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

package/dist/stories/scroll-area/ScrollArea.stories.jsx

@@ -54,70 +54,70 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (<ScrollArea type="always" scrollbars="vertical" className="h-[180px]" {...args}>
-    <div className="p-2 pr-8">
-      <Header size={'4'} mb={'2'} trim={'start'}>
-        Principles of the typographic craft
-      </Header>
-      <div className="flex flex-col gap-4">
-        <Text as="p">
-          Three fundamental aspects of typography are legibility, readability, and aesthetics.
-          Although in a non-technical sense “legible” and “readable” are often used synonymously,
-          typographically they are separate but related concepts.
-        </Text>
-
-        <Text as="p">
-          Legibility describes how easily individual characters can be distinguished from one
-          another. It is described by Walter Tracy as “the quality of being decipherable and
-          recognisable”. For instance, if a “b” and an “h”, or a “3” and an “8”, are difficult to
-          distinguish at small sizes, this is a problem of legibility.
-        </Text>
-
-        <Text as="p">
-          Typographers are concerned with legibility insofar as it is their job to select the
-          correct font to use. Brush Script is an example of a font containing many characters that
-          might be difficult to distinguish. The selection of cases influences the legibility of
-          typography because using only uppercase letters (all-caps) reduces legibility.
-        </Text>
-      </div>
-    </div>
+    return (<ScrollArea type="always" scrollbars="vertical" className="h-[180px]" {...args}>
+    <div className="p-2 pr-8">
+      <Header size={'4'} mb={'2'} trim={'start'}>
+        Principles of the typographic craft
+      </Header>
+      <div className="flex flex-col gap-4">
+        <Text as="p">
+          Three fundamental aspects of typography are legibility, readability, and aesthetics.
+          Although in a non-technical sense “legible” and “readable” are often used synonymously,
+          typographically they are separate but related concepts.
+        </Text>
+
+        <Text as="p">
+          Legibility describes how easily individual characters can be distinguished from one
+          another. It is described by Walter Tracy as “the quality of being decipherable and
+          recognisable”. For instance, if a “b” and an “h”, or a “3” and an “8”, are difficult to
+          distinguish at small sizes, this is a problem of legibility.
+        </Text>
+
+        <Text as="p">
+          Typographers are concerned with legibility insofar as it is their job to select the
+          correct font to use. Brush Script is an example of a font containing many characters that
+          might be difficult to distinguish. The selection of cases influences the legibility of
+          typography because using only uppercase letters (all-caps) reduces legibility.
+        </Text>
+      </div>
+    </div>
   </ScrollArea>);
 };
 export var Type = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="grid grid-cols-2 gap-2">
-    <ScrollArea type="always" scrollbars="vertical" className="h-[150px]" {...args}>
-      <div className="flex flex-col p-2 pr-8 gap-4">
-        <Text size="2">
-          Three fundamental aspects of typography are legibility, readability, and aesthetics.
-          Although in a non-technical sense legible and readable are often used synonymously,
-          typographically they are separate but related concepts.
-        </Text>
-
-        <Text size="2">
-          Legibility describes how easily individual characters can be distinguished from one
-          another. It is described by Walter Tracy as the quality of being decipherable and
-          recognisable. For instance, if a b and an h, or a 3 and an 8, are difficult to distinguish
-          at small sizes, this is a problem of legibility.
-        </Text>
-      </div>
-    </ScrollArea>
-
-    <ScrollArea type="always" scrollbars="horizontal" className="h-[150px]" {...args}>
-      <div className="gap-4 p-2 w-[700px]">
-        <Text size="2">
-          Three fundamental aspects of typography are legibility, readability, and aesthetics.
-          Although in a non-technical sense legible and readable are often used synonymously,
-          typographically they are separate but related concepts.
-        </Text>
-
-        <Text size="2">
-          Legibility describes how easily individual characters can be distinguished from one
-          another. It is described by Walter Tracy as the quality of being decipherable and
-          recognisable. For instance, if a b and an h, or a 3 and an 8, are difficult to distinguish
-          at small sizes, this is a problem of legibility.
-        </Text>
-      </div>
-    </ScrollArea>
+    return (<div className="grid grid-cols-2 gap-2">
+    <ScrollArea type="always" scrollbars="vertical" className="h-[150px]" {...args}>
+      <div className="flex flex-col p-2 pr-8 gap-4">
+        <Text size="2">
+          Three fundamental aspects of typography are legibility, readability, and aesthetics.
+          Although in a non-technical sense legible and readable are often used synonymously,
+          typographically they are separate but related concepts.
+        </Text>
+
+        <Text size="2">
+          Legibility describes how easily individual characters can be distinguished from one
+          another. It is described by Walter Tracy as the quality of being decipherable and
+          recognisable. For instance, if a b and an h, or a 3 and an 8, are difficult to distinguish
+          at small sizes, this is a problem of legibility.
+        </Text>
+      </div>
+    </ScrollArea>
+
+    <ScrollArea type="always" scrollbars="horizontal" className="h-[150px]" {...args}>
+      <div className="gap-4 p-2 w-[700px]">
+        <Text size="2">
+          Three fundamental aspects of typography are legibility, readability, and aesthetics.
+          Although in a non-technical sense legible and readable are often used synonymously,
+          typographically they are separate but related concepts.
+        </Text>
+
+        <Text size="2">
+          Legibility describes how easily individual characters can be distinguished from one
+          another. It is described by Walter Tracy as the quality of being decipherable and
+          recognisable. For instance, if a b and an h, or a 3 and an 8, are difficult to distinguish
+          at small sizes, this is a problem of legibility.
+        </Text>
+      </div>
+    </ScrollArea>
   </div>);
 };

package/dist/stories/segmented-control/SegmentedControl.stories.jsx

@@ -63,39 +63,39 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (<SegmentedControl {...args} defaultValue={'inbox'}>
-      <SegmentedControlItem value={'inbox'}>Inbox</SegmentedControlItem>
-      <SegmentedControlItem value={'drafts'}>Drafts</SegmentedControlItem>
-      <SegmentedControlItem value={'sent'}>Sent</SegmentedControlItem>
+    return (<SegmentedControl {...args} defaultValue={'inbox'}>
+      <SegmentedControlItem value={'inbox'}>Inbox</SegmentedControlItem>
+      <SegmentedControlItem value={'drafts'}>Drafts</SegmentedControlItem>
+      <SegmentedControlItem value={'sent'}>Sent</SegmentedControlItem>
     </SegmentedControl>);
 };
 export var Size = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex flex-col space-y-3">
-    {['small', 'medium', 'large'].map(function (size) { return (<SegmentedControl key={size} defaultValue={'inbox'} {...args} size={size}>
-        <SegmentedControlItem value={'inbox'}>Inbox</SegmentedControlItem>
-        <SegmentedControlItem value={'drafts'}>Drafts</SegmentedControlItem>
-        <SegmentedControlItem value={'sent'}>Sent</SegmentedControlItem>
-      </SegmentedControl>); })}
+    return (<div className="flex flex-col space-y-3">
+    {['small', 'medium', 'large'].map(function (size) { return (<SegmentedControl key={size} defaultValue={'inbox'} {...args} size={size}>
+        <SegmentedControlItem value={'inbox'}>Inbox</SegmentedControlItem>
+        <SegmentedControlItem value={'drafts'}>Drafts</SegmentedControlItem>
+        <SegmentedControlItem value={'sent'}>Sent</SegmentedControlItem>
+      </SegmentedControl>); })}
   </div>);
 };
 export var Radius = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex flex-col space-y-3">
-    {radiusOptions.map(function (radius) { return (<SegmentedControl key={radius} defaultValue={'inbox'} {...args} radius={radius}>
-        <SegmentedControlItem value={'inbox'}>Inbox</SegmentedControlItem>
-        <SegmentedControlItem value={'drafts'}>Drafts</SegmentedControlItem>
-        <SegmentedControlItem value={'sent'}>Sent</SegmentedControlItem>
-      </SegmentedControl>); })}
+    return (<div className="flex flex-col space-y-3">
+    {radiusOptions.map(function (radius) { return (<SegmentedControl key={radius} defaultValue={'inbox'} {...args} radius={radius}>
+        <SegmentedControlItem value={'inbox'}>Inbox</SegmentedControlItem>
+        <SegmentedControlItem value={'drafts'}>Drafts</SegmentedControlItem>
+        <SegmentedControlItem value={'sent'}>Sent</SegmentedControlItem>
+      </SegmentedControl>); })}
   </div>);
 };
 export var Variant = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex flex-col space-y-3">
-    {['surface', 'classic'].map(function (appearance) { return (<SegmentedControl key={appearance} defaultValue={'inbox'} {...args} appearance={appearance}>
-        <SegmentedControlItem value={'inbox'}>Inbox</SegmentedControlItem>
-        <SegmentedControlItem value={'drafts'}>Drafts</SegmentedControlItem>
-        <SegmentedControlItem value={'sent'}>Sent</SegmentedControlItem>
-      </SegmentedControl>); })}
+    return (<div className="flex flex-col space-y-3">
+    {['surface', 'classic'].map(function (appearance) { return (<SegmentedControl key={appearance} defaultValue={'inbox'} {...args} appearance={appearance}>
+        <SegmentedControlItem value={'inbox'}>Inbox</SegmentedControlItem>
+        <SegmentedControlItem value={'drafts'}>Drafts</SegmentedControlItem>
+        <SegmentedControlItem value={'sent'}>Sent</SegmentedControlItem>
+      </SegmentedControl>); })}
   </div>);
 };

package/dist/stories/select/Select.stories.jsx

@@ -67,83 +67,83 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (<Select {...args}>
-    <SelectTrigger {...args} placeholder="Select..."/>
-    <SelectContent {...args}>
-      <SelectItem value="apple" {...args}>
-        Apple
-      </SelectItem>
-      <SelectItem value="orange" {...args}>
-        Orange
-      </SelectItem>
-    </SelectContent>
+    return (<Select {...args}>
+    <SelectTrigger {...args} placeholder="Select..."/>
+    <SelectContent {...args}>
+      <SelectItem value="apple" {...args}>
+        Apple
+      </SelectItem>
+      <SelectItem value="orange" {...args}>
+        Orange
+      </SelectItem>
+    </SelectContent>
   </Select>);
 };
 export var Size = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex gap-3">
-    {['small', 'medium', 'large'].map(function (size) { return (<Select key={size} size={size} {...args}>
-        <SelectTrigger {...args} placeholder="Select..."/>
-        <SelectContent {...args}>
-          <SelectItem value="apple" {...args}>
-            Apple
-          </SelectItem>
-          <SelectItem value="orange" {...args}>
-            Orange
-          </SelectItem>
-        </SelectContent>
-      </Select>); })}
+    return (<div className="flex gap-3">
+    {['small', 'medium', 'large'].map(function (size) { return (<Select key={size} size={size} {...args}>
+        <SelectTrigger {...args} placeholder="Select..."/>
+        <SelectContent {...args}>
+          <SelectItem value="apple" {...args}>
+            Apple
+          </SelectItem>
+          <SelectItem value="orange" {...args}>
+            Orange
+          </SelectItem>
+        </SelectContent>
+      </Select>); })}
   </div>);
 };
 export var Appearance = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex gap-3">
-    {['classic', 'surface', 'soft', 'ghost'].map(function (appearance) { return (<Select key={appearance} {...args}>
-        <SelectTrigger appearance={appearance} {...args} placeholder="Select..."/>
-        <SelectContent {...args}>
-          <SelectItem value="apple" {...args}>
-            Apple
-          </SelectItem>
-          <SelectItem value="orange" {...args}>
-            Orange
-          </SelectItem>
-        </SelectContent>
-      </Select>); })}
+    return (<div className="flex gap-3">
+    {['classic', 'surface', 'soft', 'ghost'].map(function (appearance) { return (<Select key={appearance} {...args}>
+        <SelectTrigger appearance={appearance} {...args} placeholder="Select..."/>
+        <SelectContent {...args}>
+          <SelectItem value="apple" {...args}>
+            Apple
+          </SelectItem>
+          <SelectItem value="orange" {...args}>
+            Orange
+          </SelectItem>
+        </SelectContent>
+      </Select>); })}
   </div>);
 };
 export var Radius = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex gap-3">
-    {radiusOptions.map(function (radius) { return (<Select key={radius} {...args}>
-        <SelectTrigger radius={radius} {...args} placeholder="Select..."/>
-        <SelectContent {...args}>
-          <SelectItem value="apple" {...args}>
-            Apple
-          </SelectItem>
-          <SelectItem value="orange" {...args}>
-            Orange
-          </SelectItem>
-        </SelectContent>
-      </Select>); })}
+    return (<div className="flex gap-3">
+    {radiusOptions.map(function (radius) { return (<Select key={radius} {...args}>
+        <SelectTrigger radius={radius} {...args} placeholder="Select..."/>
+        <SelectContent {...args}>
+          <SelectItem value="apple" {...args}>
+            Apple
+          </SelectItem>
+          <SelectItem value="orange" {...args}>
+            Orange
+          </SelectItem>
+        </SelectContent>
+      </Select>); })}
   </div>);
 };
 export var WithIcon = function (_a) {
     var args = __rest(_a, []);
-    return (<Select defaultValue="dark" {...args}>
-    <SelectTrigger {...args}></SelectTrigger>
-    <SelectContent {...args}>
-      <SelectItem value="dark" {...args}>
-        <div className="flex gap-2 items-center">
-          <MoonIcon />
-          <label>Dark</label>
-        </div>
-      </SelectItem>
-      <SelectItem value="light" {...args}>
-        <div className="flex gap-2 items-center">
-          <SunIcon />
-          <label>Light</label>
-        </div>
-      </SelectItem>
-    </SelectContent>
+    return (<Select defaultValue="dark" {...args}>
+    <SelectTrigger {...args}></SelectTrigger>
+    <SelectContent {...args}>
+      <SelectItem value="dark" {...args}>
+        <div className="flex gap-2 items-center">
+          <MoonIcon />
+          <label>Dark</label>
+        </div>
+      </SelectItem>
+      <SelectItem value="light" {...args}>
+        <div className="flex gap-2 items-center">
+          <SunIcon />
+          <label>Light</label>
+        </div>
+      </SelectItem>
+    </SelectContent>
   </Select>);
 };

package/dist/stories/separator/Separator.stories.jsx

@@ -65,42 +65,42 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="text-slate-12 dark:text-slate-1 w-full max-w-[300px] mx-[15px]">
-    Tools for building high-quality, accessible UI.
-    <Separator my="3" size="fill-large" {...args}/>
-    <div className="flex gap-3 text-slate-12 dark:text-slate-1 ">
-      Themes
-      <Separator orientation="vertical" {...args}/>
-      Primitives
-      <Separator orientation="vertical" {...args}/>
-      Icons
-      <Separator orientation="vertical" {...args}/>
-      Colors
-    </div>
+    return (<div className="text-slate-12 dark:text-slate-1 w-full max-w-[300px] mx-[15px]">
+    Tools for building high-quality, accessible UI.
+    <Separator my="3" size="fill-large" {...args}/>
+    <div className="flex gap-3 text-slate-12 dark:text-slate-1 ">
+      Themes
+      <Separator orientation="vertical" {...args}/>
+      Primitives
+      <Separator orientation="vertical" {...args}/>
+      Icons
+      <Separator orientation="vertical" {...args}/>
+      Colors
+    </div>
   </div>);
 };
 export var Orientation = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="grid grid-cols-2 gap-2">
-    <Separator orientation={'horizontal'} {...args}/>
-    <Separator orientation={'vertical'} {...args}/>
+    return (<div className="grid grid-cols-2 gap-2">
+    <Separator orientation={'horizontal'} {...args}/>
+    <Separator orientation={'vertical'} {...args}/>
   </div>);
 };
 export var HorizontalSize = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="w-96 grid gap-4">
-    <Separator orientation={'horizontal'} size={'small'} {...args}/>
-    <Separator orientation={'horizontal'} size={'medium'} {...args}/>
-    <Separator orientation={'horizontal'} size={'large'} {...args}/>
-    <Separator orientation={'horizontal'} size={'fill-large'} {...args}/>
+    return (<div className="w-96 grid gap-4">
+    <Separator orientation={'horizontal'} size={'small'} {...args}/>
+    <Separator orientation={'horizontal'} size={'medium'} {...args}/>
+    <Separator orientation={'horizontal'} size={'large'} {...args}/>
+    <Separator orientation={'horizontal'} size={'fill-large'} {...args}/>
   </div>);
 };
 export var VerticalSize = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="h-60 grid grid-cols-4 gap-4">
-    <Separator orientation={'vertical'} size={'small'} {...args}/>
-    <Separator orientation={'vertical'} size={'medium'} {...args}/>
-    <Separator orientation={'vertical'} size={'large'} {...args}/>
-    <Separator orientation={'vertical'} size={'fill-large'} {...args}/>
+    return (<div className="h-60 grid grid-cols-4 gap-4">
+    <Separator orientation={'vertical'} size={'small'} {...args}/>
+    <Separator orientation={'vertical'} size={'medium'} {...args}/>
+    <Separator orientation={'vertical'} size={'large'} {...args}/>
+    <Separator orientation={'vertical'} size={'fill-large'} {...args}/>
   </div>);
 };

package/dist/stories/skeleton/Skeleton.stories.jsx

@@ -71,49 +71,49 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (<Skeleton {...args}>
-    <div>Component</div>
+    return (<Skeleton {...args}>
+    <div>Component</div>
   </Skeleton>);
 };
 export var Loading = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="">
-    <Skeleton loading={true} {...args}>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque felis tellus, efficitur
-      id convallis a, viverra eget libero. Nam magna erat, fringilla sed commodo sed, aliquet nec
-      magna.
-    </Skeleton>
-    <Skeleton loading={false} {...args}>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque felis tellus, efficitur
-      id convallis a, viverra eget libero. Nam magna erat, fringilla sed commodo sed, aliquet nec
-      magna.
-    </Skeleton>
+    return (<div className="">
+    <Skeleton loading={true} {...args}>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque felis tellus, efficitur
+      id convallis a, viverra eget libero. Nam magna erat, fringilla sed commodo sed, aliquet nec
+      magna.
+    </Skeleton>
+    <Skeleton loading={false} {...args}>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque felis tellus, efficitur
+      id convallis a, viverra eget libero. Nam magna erat, fringilla sed commodo sed, aliquet nec
+      magna.
+    </Skeleton>
   </div>);
 };
 export var WithChildren = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="grid gap-4 grid-cols-2">
-    <Skeleton loading={true}>
-      <ToggleSwitch />
-    </Skeleton>
-    <Skeleton loading={false}>
-      <ToggleSwitch />
-    </Skeleton>
+    return (<div className="grid gap-4 grid-cols-2">
+    <Skeleton loading={true}>
+      <ToggleSwitch />
+    </Skeleton>
+    <Skeleton loading={false}>
+      <ToggleSwitch />
+    </Skeleton>
   </div>);
 };
 export var Radius = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="grid gap-5">
-    {radiusOptions.map(function (radius) { return (<div key={radius}>
-        <Skeleton loading={true} radius={radius} {...args}>
-          <div>Component</div>
-        </Skeleton>
-      </div>); })}
+    return (<div className="grid gap-5">
+    {radiusOptions.map(function (radius) { return (<div key={radius}>
+        <Skeleton loading={true} radius={radius} {...args}>
+          <div>Component</div>
+        </Skeleton>
+      </div>); })}
   </div>);
 };
 export var Size = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="">
-    <Skeleton loading={true} width="48px" height="48px" {...args}/>
+    return (<div className="">
+    <Skeleton loading={true} width="48px" height="48px" {...args}/>
   </div>);
 };

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>);
 };