@lotte-innovate/ui-component-test 0.0.6 → 0.0.8

package/dist/stories/slider/Slider.stories.jsx

@@ -66,29 +66,29 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="w-60">
-    <Slider defaultValue={[50]} {...args}/>
+    return (<div className="w-60">
+    <Slider defaultValue={[50]} {...args}/>
   </div>);
 };
 export var Size = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="w-60 grid items-center gap-3">
-    <Slider defaultValue={[50]} {...args} size={'small'}></Slider>
-    <Slider defaultValue={[50]} {...args} size={'medium'}></Slider>
-    <Slider defaultValue={[50]} {...args} size={'large'}></Slider>
+    return (<div className="w-60 grid items-center gap-3">
+    <Slider defaultValue={[50]} {...args} size={'small'}></Slider>
+    <Slider defaultValue={[50]} {...args} size={'medium'}></Slider>
+    <Slider defaultValue={[50]} {...args} size={'large'}></Slider>
   </div>);
 };
 export var Radius = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="w-60">
-    {radiusOptions.map(function (radius) { return (<div key={radius} className="pb-1">
-        <Slider key={radius} defaultValue={[50]} radius={radius} {...args}/>
-      </div>); })}
+    return (<div className="w-60">
+    {radiusOptions.map(function (radius) { return (<div key={radius} className="pb-1">
+        <Slider key={radius} defaultValue={[50]} radius={radius} {...args}/>
+      </div>); })}
   </div>);
 };
 export var Range = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="w-60">
-    <Slider defaultValue={[20, 80]} {...args}/>
+    return (<div className="w-60">
+    <Slider defaultValue={[20, 80]} {...args}/>
   </div>);
 };

package/dist/stories/spinner/Spinner.stories.jsx

@@ -70,43 +70,43 @@ export var Default = function (_a) {
 };
 export var Loading = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="grid grid-cols-2 gap-3">
-    <Spinner loading={true} {...args}>
-      Loading
-    </Spinner>
-    <Spinner loading={false} {...args}>
-      Loading
-    </Spinner>
+    return (<div className="grid grid-cols-2 gap-3">
+    <Spinner loading={true} {...args}>
+      Loading
+    </Spinner>
+    <Spinner loading={false} {...args}>
+      Loading
+    </Spinner>
   </div>);
 };
 export var WithChildren = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="grid grid-cols-2 gap-3">
-    <Spinner loading={true} {...args}>
-      <ToggleSwitch></ToggleSwitch>
-    </Spinner>
-    <Spinner loading={false} {...args}>
-      <ToggleSwitch></ToggleSwitch>
-    </Spinner>
+    return (<div className="grid grid-cols-2 gap-3">
+    <Spinner loading={true} {...args}>
+      <ToggleSwitch></ToggleSwitch>
+    </Spinner>
+    <Spinner loading={false} {...args}>
+      <ToggleSwitch></ToggleSwitch>
+    </Spinner>
   </div>);
 };
 export var WithButton = function (_a) {
     var args = __rest(_a, []);
-    return (<div>
-    <Button color="slate" className="mr-2" {...args}>
-      <Spinner {...args}/>
-    </Button>
-    <Button color="slate" {...args}>
-      <Spinner {...args} className="mr-2"/>
-      Loading
-    </Button>
+    return (<div>
+    <Button color="slate" className="mr-2" {...args}>
+      <Spinner {...args}/>
+    </Button>
+    <Button color="slate" {...args}>
+      <Spinner {...args} className="mr-2"/>
+      Loading
+    </Button>
   </div>);
 };
 export var Size = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="grid grid-cols-3 gap-4">
-    <Spinner loading={true} {...args} size={'small'}/>
-    <Spinner loading={true} {...args} size={'medium'}/>
-    <Spinner loading={true} {...args} size={'large'}/>
+    return (<div className="grid grid-cols-3 gap-4">
+    <Spinner loading={true} {...args} size={'small'}/>
+    <Spinner loading={true} {...args} size={'medium'}/>
+    <Spinner loading={true} {...args} size={'large'}/>
   </div>);
 };

package/dist/stories/switch/Switch.stories.jsx

@@ -91,29 +91,29 @@ export var Default = {
 };
 export var Size = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex items-center gap-3">
-    <ToggleSwitch {...args} size={'small'}></ToggleSwitch>
-    <ToggleSwitch {...args} size={'medium'}></ToggleSwitch>
-    <ToggleSwitch {...args} size={'large'}></ToggleSwitch>
+    return (<div className="flex items-center gap-3">
+    <ToggleSwitch {...args} size={'small'}></ToggleSwitch>
+    <ToggleSwitch {...args} size={'medium'}></ToggleSwitch>
+    <ToggleSwitch {...args} size={'large'}></ToggleSwitch>
   </div>);
 };
 export var Scaling = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex items-center gap-3">
-    {scalingOptions.map(function (scaling) { return (<ToggleSwitch key={scaling} {...args} scaling={scaling}></ToggleSwitch>); })}
+    return (<div className="flex items-center gap-3">
+    {scalingOptions.map(function (scaling) { return (<ToggleSwitch key={scaling} {...args} scaling={scaling}></ToggleSwitch>); })}
   </div>);
 };
 export var Radius = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex items-center gap-3">
-    {radiusOptions.map(function (radius) { return (<div key={radius}>
-        <ToggleSwitch key={radius} radius={radius} {...args}/>
-      </div>); })}
+    return (<div className="flex items-center gap-3">
+    {radiusOptions.map(function (radius) { return (<div key={radius}>
+        <ToggleSwitch key={radius} radius={radius} {...args}/>
+      </div>); })}
   </div>);
 };
 export var Appearance = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex items-center gap-3">
-    {['classic', 'soft', 'surface'].map(function (appearance) { return (<ToggleSwitch key={appearance} {...args} appearance={appearance}></ToggleSwitch>); })}
+    return (<div className="flex items-center gap-3">
+    {['classic', 'soft', 'surface'].map(function (appearance) { return (<ToggleSwitch key={appearance} {...args} appearance={appearance}></ToggleSwitch>); })}
   </div>);
 };

package/dist/stories/tab-nav/TabNav.stories.jsx

@@ -54,15 +54,15 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (<TabNav {...args}>
-    <TabNavLink href="#" active {...args}>
-      Account
-    </TabNavLink>
-    <TabNavLink href="#" {...args}>
-      Documents
-    </TabNavLink>
-    <TabNavLink href="#" {...args}>
-      Settings
-    </TabNavLink>
+    return (<TabNav {...args}>
+    <TabNavLink href="#" active {...args}>
+      Account
+    </TabNavLink>
+    <TabNavLink href="#" {...args}>
+      Documents
+    </TabNavLink>
+    <TabNavLink href="#" {...args}>
+      Settings
+    </TabNavLink>
   </TabNav>);
 };

package/dist/stories/table/Table.stories.jsx

@@ -74,33 +74,33 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (<Table {...args}>
-    <TableHeader>
-      <TableRow>
-        <TableColumnHeaderCell>Full name</TableColumnHeaderCell>
-        <TableColumnHeaderCell>Email</TableColumnHeaderCell>
-        <TableColumnHeaderCell>Group</TableColumnHeaderCell>
-      </TableRow>
-    </TableHeader>
-
-    <TableBody>
-      <TableRow>
-        <TableRowHeaderCell>Danilo Sousa</TableRowHeaderCell>
-        <TableCell>danilo@examplecom</TableCell>
-        <TableCell>Developer</TableCell>
-      </TableRow>
-
-      <TableRow>
-        <TableRowHeaderCell>Zahra Ambessa</TableRowHeaderCell>
-        <TableCell>zahra@examplecom</TableCell>
-        <TableCell>Admin</TableCell>
-      </TableRow>
-
-      <TableRow>
-        <TableRowHeaderCell>Jasper Eriksson</TableRowHeaderCell>
-        <TableCell>jasper@examplecom</TableCell>
-        <TableCell>Developer</TableCell>
-      </TableRow>
-    </TableBody>
+    return (<Table {...args}>
+    <TableHeader>
+      <TableRow>
+        <TableColumnHeaderCell>Full name</TableColumnHeaderCell>
+        <TableColumnHeaderCell>Email</TableColumnHeaderCell>
+        <TableColumnHeaderCell>Group</TableColumnHeaderCell>
+      </TableRow>
+    </TableHeader>
+
+    <TableBody>
+      <TableRow>
+        <TableRowHeaderCell>Danilo Sousa</TableRowHeaderCell>
+        <TableCell>danilo@examplecom</TableCell>
+        <TableCell>Developer</TableCell>
+      </TableRow>
+
+      <TableRow>
+        <TableRowHeaderCell>Zahra Ambessa</TableRowHeaderCell>
+        <TableCell>zahra@examplecom</TableCell>
+        <TableCell>Admin</TableCell>
+      </TableRow>
+
+      <TableRow>
+        <TableRowHeaderCell>Jasper Eriksson</TableRowHeaderCell>
+        <TableCell>jasper@examplecom</TableCell>
+        <TableCell>Developer</TableCell>
+      </TableRow>
+    </TableBody>
   </Table>);
 };

package/dist/stories/tabs/Tabs.stories.jsx

@@ -54,23 +54,23 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (<Tabs defaultValue="account" {...args}>
-    <TabsList {...args}>
-      <TabsTrigger value="account">Account</TabsTrigger>
-      <TabsTrigger value="documents">Documents</TabsTrigger>
-      <TabsTrigger value="settings">Settings</TabsTrigger>
-    </TabsList>
-
-    <TabsContent value="account">
-      <div>Make changes to your account</div>
-    </TabsContent>
-
-    <TabsContent value="documents">
-      <div>Access and update your documents</div>
-    </TabsContent>
-
-    <TabsContent value="settings">
-      <div>Edit your profile</div>
-    </TabsContent>
+    return (<Tabs defaultValue="account" {...args}>
+    <TabsList {...args}>
+      <TabsTrigger value="account">Account</TabsTrigger>
+      <TabsTrigger value="documents">Documents</TabsTrigger>
+      <TabsTrigger value="settings">Settings</TabsTrigger>
+    </TabsList>
+
+    <TabsContent value="account">
+      <div>Make changes to your account</div>
+    </TabsContent>
+
+    <TabsContent value="documents">
+      <div>Access and update your documents</div>
+    </TabsContent>
+
+    <TabsContent value="settings">
+      <div>Edit your profile</div>
+    </TabsContent>
   </Tabs>);
 };

package/dist/stories/text/Text.stories.jsx

@@ -59,33 +59,33 @@ export var Default = function (_a) {
 };
 export var Weight = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex items-center space-x-4">
-    {textWeightOption.map(function (weight, index) { return (<Text key={weight} {...args} weight={weight}>
-        Text Component
-      </Text>); })}
+    return (<div className="flex items-center space-x-4">
+    {textWeightOption.map(function (weight, index) { return (<Text key={weight} {...args} weight={weight}>
+        Text Component
+      </Text>); })}
   </div>);
 };
 export var Color = function (_a) {
     var args = __rest(_a, []);
-    return (<div>
-    {colorOptions.map(function (color) { return (<Text key={color} {...args} color={color}>
-        Text Component
-      </Text>); })}
+    return (<div>
+    {colorOptions.map(function (color) { return (<Text key={color} {...args} color={color}>
+        Text Component
+      </Text>); })}
   </div>);
 };
 export var Size = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex items-center space-x-4">
-    {typoSizeOptions.map(function (size) { return (<Text key={size} {...args} size={size}>
-        Text Component
-      </Text>); })}
+    return (<div className="flex items-center space-x-4">
+    {typoSizeOptions.map(function (size) { return (<Text key={size} {...args} size={size}>
+        Text Component
+      </Text>); })}
   </div>);
 };
 export var Align = function (_a) {
     var args = __rest(_a, []);
-    return (<div>
-    {['left', 'center', 'right'].map(function (align) { return (<Text key={align} {...args} align={align} as="div">
-        Text Component
-      </Text>); })}
+    return (<div>
+    {['left', 'center', 'right'].map(function (align) { return (<Text key={align} {...args} align={align} as="div">
+        Text Component
+      </Text>); })}
   </div>);
 };

package/dist/stories/textArea/TextArea.stories.jsx

@@ -79,34 +79,34 @@ export var Default = function (_a) {
 };
 export var Scaling = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="grid gap-5">
-    {scalingOptions.map(function (scaling, index) { return (<div key={scaling} className="">
-        <TextArea placeholder="Reply to comment…" {...args} scaling={scaling}/>
-      </div>); })}
+    return (<div className="grid gap-5">
+    {scalingOptions.map(function (scaling, index) { return (<div key={scaling} className="">
+        <TextArea placeholder="Reply to comment…" {...args} scaling={scaling}/>
+      </div>); })}
   </div>);
 };
 export var Size = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex items-center gap-3">
-    <TextArea placeholder="Reply to comment…" {...args} size={'small'}></TextArea>
-    <TextArea placeholder="Reply to comment…" {...args} size={'medium'}></TextArea>
-    <TextArea placeholder="Reply to comment…" {...args} size={'large'}></TextArea>
-    <TextArea placeholder="Reply to comment…" {...args} size={'x-large'}></TextArea>
+    return (<div className="flex items-center gap-3">
+    <TextArea placeholder="Reply to comment…" {...args} size={'small'}></TextArea>
+    <TextArea placeholder="Reply to comment…" {...args} size={'medium'}></TextArea>
+    <TextArea placeholder="Reply to comment…" {...args} size={'large'}></TextArea>
+    <TextArea placeholder="Reply to comment…" {...args} size={'x-large'}></TextArea>
   </div>);
 };
 export var Appearance = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="grid gap-3">
-    {['classic', 'soft', 'surface'].map(function (appearance, index) { return (<div key={appearance} className="">
-        <TextArea placeholder="Reply to comment…" {...args} appearance={appearance}/>
-      </div>); })}
+    return (<div className="grid gap-3">
+    {['classic', 'soft', 'surface'].map(function (appearance, index) { return (<div key={appearance} className="">
+        <TextArea placeholder="Reply to comment…" {...args} appearance={appearance}/>
+      </div>); })}
   </div>);
 };
 export var Radius = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="grid gap-3">
-    {radiusOptions.map(function (radius, index) { return (<div key={radius} className="">
-        <TextArea placeholder="Reply to comment…" {...args} radius={radius}/>
-      </div>); })}
+    return (<div className="grid gap-3">
+    {radiusOptions.map(function (radius, index) { return (<div key={radius} className="">
+        <TextArea placeholder="Reply to comment…" {...args} radius={radius}/>
+      </div>); })}
   </div>);
 };

package/dist/stories/textfield/TextField.stories.jsx

@@ -71,50 +71,50 @@ export var Default = function (_a) {
 };
 export var Size = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex items-center gap-3">
-    <TextField placeholder="Search the docs..." {...args} size={'small'}></TextField>
-    <TextField placeholder="Search the docs..." {...args} size={'medium'}></TextField>
-    <TextField placeholder="Search the docs..." {...args} size={'large'}></TextField>
+    return (<div className="flex items-center gap-3">
+    <TextField placeholder="Search the docs..." {...args} size={'small'}></TextField>
+    <TextField placeholder="Search the docs..." {...args} size={'medium'}></TextField>
+    <TextField placeholder="Search the docs..." {...args} size={'large'}></TextField>
   </div>);
 };
 export var Radius = function (_a) {
     var args = __rest(_a, []);
-    return (<div>
-    {radiusOptions.map(function (radius) { return (<div key={radius} className="pb-1">
-        <TextField placeholder="Search the docs..." key={radius} radius={radius} {...args}/>
-      </div>); })}
+    return (<div>
+    {radiusOptions.map(function (radius) { return (<div key={radius} className="pb-1">
+        <TextField placeholder="Search the docs..." key={radius} radius={radius} {...args}/>
+      </div>); })}
   </div>);
 };
 export var Appearance = function (_a) {
     var args = __rest(_a, []);
-    return (<div>
-    {['classic', 'soft', 'surface'].map(function (appearance) { return (<div key={appearance} className="pb-1">
-        <TextField placeholder="Search the docs..." key={appearance} appearance={appearance} {...args}/>
-      </div>); })}
+    return (<div>
+    {['classic', 'soft', 'surface'].map(function (appearance) { return (<div key={appearance} className="pb-1">
+        <TextField placeholder="Search the docs..." key={appearance} appearance={appearance} {...args}/>
+      </div>); })}
   </div>);
 };
 export var States = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex items-center gap-3">
-    <TextField placeholder="Search the docs..." {...args}>
-      <TextFieldSlot>
-        <MagnifyingGlassIcon height="16" width="16"/>
-      </TextFieldSlot>
-    </TextField>
-
-    <TextField placeholder="Search the docs..." {...args}>
-      <TextFieldSlot side={'right'}>
-        <DotsHorizontalIcon height="14" width="14"/>
-      </TextFieldSlot>
-    </TextField>
-
-    <TextField {...args}>
-      <TextFieldSlot>
-        <MagnifyingGlassIcon height="16" width="16"/>
-      </TextFieldSlot>
-      <TextFieldSlot>
-        <DotsHorizontalIcon height="14" width="14"/>
-      </TextFieldSlot>
-    </TextField>
+    return (<div className="flex items-center gap-3">
+    <TextField placeholder="Search the docs..." {...args}>
+      <TextFieldSlot>
+        <MagnifyingGlassIcon height="16" width="16"/>
+      </TextFieldSlot>
+    </TextField>
+
+    <TextField placeholder="Search the docs..." {...args}>
+      <TextFieldSlot side={'right'}>
+        <DotsHorizontalIcon height="14" width="14"/>
+      </TextFieldSlot>
+    </TextField>
+
+    <TextField {...args}>
+      <TextFieldSlot>
+        <MagnifyingGlassIcon height="16" width="16"/>
+      </TextFieldSlot>
+      <TextFieldSlot>
+        <DotsHorizontalIcon height="14" width="14"/>
+      </TextFieldSlot>
+    </TextField>
   </div>);
 };

package/dist/stories/toast/Toast.stories.jsx

@@ -89,34 +89,34 @@ export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
     var _b = useState(false), open = _b[0], setOpen = _b[1];
-    return (<div>
-      <Button onClick={function () { return setOpen(true); }}>토스트 메세지 호출</Button>
-      <Toast openToast={open} setOpenToast={setOpen} {...args}>
-        <ToastTitle titleText={args.titleText}>토스트 타이틀</ToastTitle>
-        <ToastDescription contentText={args.contentText}>토스트 내용이 위치합니다</ToastDescription>
-        <ToastActionButton altText="액션버튼">Action</ToastActionButton>
-      </Toast>
+    return (<div>
+      <Button onClick={function () { return setOpen(true); }}>토스트 메세지 호출</Button>
+      <Toast openToast={open} setOpenToast={setOpen} {...args}>
+        <ToastTitle titleText={args.titleText}>토스트 타이틀</ToastTitle>
+        <ToastDescription contentText={args.contentText}>토스트 내용이 위치합니다</ToastDescription>
+        <ToastActionButton altText="액션버튼">Action</ToastActionButton>
+      </Toast>
     </div>);
 };
 export var NoTitleToast = function (_a) {
     var args = __rest(_a, []);
     var _b = useState(false), open = _b[0], setOpen = _b[1];
-    return (<div>
-      <Button onClick={function () { return setOpen(true); }}>타이틀 없음</Button>
-      <Toast openToast={open} setOpenToast={setOpen} {...args}>
-        <ToastDescription>토스트 내용이 위치합니다</ToastDescription>
-        <ToastActionButton altText="액션버튼">닫기</ToastActionButton>
-      </Toast>
+    return (<div>
+      <Button onClick={function () { return setOpen(true); }}>타이틀 없음</Button>
+      <Toast openToast={open} setOpenToast={setOpen} {...args}>
+        <ToastDescription>토스트 내용이 위치합니다</ToastDescription>
+        <ToastActionButton altText="액션버튼">닫기</ToastActionButton>
+      </Toast>
     </div>);
 };
 export var NoButtonToast = function (_a) {
     var args = __rest(_a, []);
     var _b = useState(false), open = _b[0], setOpen = _b[1];
-    return (<div>
-      <Button onClick={function () { return setOpen(true); }}>버튼 없음</Button>
-      <Toast openToast={open} setOpenToast={setOpen} {...args}>
-        <ToastTitle>토스트 타이틀</ToastTitle>
-        <ToastDescription>토스트 내용이 위치합니다</ToastDescription>
-      </Toast>
+    return (<div>
+      <Button onClick={function () { return setOpen(true); }}>버튼 없음</Button>
+      <Toast openToast={open} setOpenToast={setOpen} {...args}>
+        <ToastTitle>토스트 타이틀</ToastTitle>
+        <ToastDescription>토스트 내용이 위치합니다</ToastDescription>
+      </Toast>
     </div>);
 };

package/dist/stories/toggle/Toggle.stories.jsx

@@ -68,39 +68,39 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex items-center space-x-4">
-    <Toggle {...args} aria-label="Toggle italic">
-      <FontBoldIcon />
-    </Toggle>
+    return (<div className="flex items-center space-x-4">
+    <Toggle {...args} aria-label="Toggle italic">
+      <FontBoldIcon />
+    </Toggle>
   </div>);
 };
 export var Radius = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex items-center space-x-4">
-    {radiusOptions.map(function (radius) { return (<Toggle key={radius} aria-label="Toggle italic" {...args} radius={radius}>
-        <FontBoldIcon />
-      </Toggle>); })}
+    return (<div className="flex items-center space-x-4">
+    {radiusOptions.map(function (radius) { return (<Toggle key={radius} aria-label="Toggle italic" {...args} radius={radius}>
+        <FontBoldIcon />
+      </Toggle>); })}
   </div>);
 };
 export var Size = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex items-center space-x-4">
-    {['small', 'medium', 'large'].map(function (size) { return (<Toggle key={size} aria-label="Toggle italic" {...args} size={size}>
-        <FontBoldIcon />
-      </Toggle>); })}
+    return (<div className="flex items-center space-x-4">
+    {['small', 'medium', 'large'].map(function (size) { return (<Toggle key={size} aria-label="Toggle italic" {...args} size={size}>
+        <FontBoldIcon />
+      </Toggle>); })}
   </div>);
 };
 export var WithText = function (_a) {
     var args = __rest(_a, []);
-    return (<ToggleWithText {...args} aria-label="Toggle italic" text={'Bold'}>
-    <FontBoldIcon />
+    return (<ToggleWithText {...args} aria-label="Toggle italic" text={'Bold'}>
+    <FontBoldIcon />
   </ToggleWithText>);
 };
 export var Appearance = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex items-center space-x-4">
-    {['ghost', 'soft', 'surface', 'outline'].map(function (appearance) { return (<Toggle key={appearance} aria-label="Toggle italic" {...args} appearance={appearance}>
-        <FontBoldIcon />
-      </Toggle>); })}
+    return (<div className="flex items-center space-x-4">
+    {['ghost', 'soft', 'surface', 'outline'].map(function (appearance) { return (<Toggle key={appearance} aria-label="Toggle italic" {...args} appearance={appearance}>
+        <FontBoldIcon />
+      </Toggle>); })}
   </div>);
 };