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

package/dist/components/Toggle/index.jsx

@@ -49,10 +49,10 @@ export var IconScaling = {
 };
 export var Toggle = forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, radius = _a.radius, _b = _a.size, size = _b === void 0 ? 'medium' : _b, scaling = _a.scaling, _c = _a.color, color = _c === void 0 ? 'red' : _c, _d = _a.appearance, appearance = _d === void 0 ? 'surface' : _d, props = __rest(_a, ["className", "children", "radius", "size", "scaling", "color", "appearance"]);
-    return (<TogglePrimitive.Root ref={ref} className={cn(toggleVariants({ radius: radius, size: size, scaling: scaling }), toggleAppearanceStyle(appearance, color, true, 'data-[state=on]:'), className)} {...props}>
+    return (<TogglePrimitive.Root ref={ref} className={cn(toggleVariants({ radius: radius, size: size, scaling: scaling }), toggleAppearanceStyle(appearance, color, true, 'data-[state=on]:'), className)} {...props}>
         {Children.map(children, function (child) {
             return React.cloneElement(child, { className: IconScaling[size] });
-        })}
+        })}
       </TogglePrimitive.Root>);
 });
 Toggle.displayName = 'Toggle';

package/dist/components/ToggleGroup/index.d.ts

@@ -14,7 +14,7 @@ export interface ToggleGroupMultipleProps extends VariantProps<typeof toggleVari
     value?: string[];
 }
 declare const toggleVariants: (props?: ({
-    scaling?: "100%" | "90%" | "95%" | "105%" | "110%" | null | undefined;
+    scaling?: "90%" | "95%" | "100%" | "105%" | "110%" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const ToggleGroup: React.ForwardRefExoticComponent<(React.ComponentPropsWithoutRef<React.ForwardRefExoticComponent<(ToggleGroupPrimitive.ToggleGroupSingleProps | ToggleGroupPrimitive.ToggleGroupMultipleProps) & React.RefAttributes<HTMLDivElement>>> & ToggleGroupSingleProps & ToggleGroupMultipleProps) & React.RefAttributes<HTMLDivElement>>;
 export default ToggleGroup;

package/dist/components/ToggleGroup/index.jsx

@@ -36,10 +36,10 @@ var toggleVariants = cva('inline-flex', {
 });
 export var ToggleGroup = forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, defaultValue = _a.defaultValue, value = _a.value, type = _a.type, onValueChange = _a.onValueChange, scaling = _a.scaling, props = __rest(_a, ["className", "children", "defaultValue", "value", "type", "onValueChange", "scaling"]);
-    return type === 'single' ? (<ToggleGroupPrimitive.Root ref={ref} type={type} value={value} defaultValue={defaultValue} className={cn(toggleVariants({ scaling: scaling }), className)} {...props}>
-      {children}
-    </ToggleGroupPrimitive.Root>) : (<ToggleGroupPrimitive.Root ref={ref} type={type} value={value} defaultValue={defaultValue} className={cn(toggleVariants({ scaling: scaling }), className)} {...props}>
-      {children}
+    return type === 'single' ? (<ToggleGroupPrimitive.Root ref={ref} type={type} value={value} defaultValue={defaultValue} className={cn(toggleVariants({ scaling: scaling }), className)} {...props}>
+      {children}
+    </ToggleGroupPrimitive.Root>) : (<ToggleGroupPrimitive.Root ref={ref} type={type} value={value} defaultValue={defaultValue} className={cn(toggleVariants({ scaling: scaling }), className)} {...props}>
+      {children}
     </ToggleGroupPrimitive.Root>);
 });
 ToggleGroup.displayName = 'ToggleGroup';

package/dist/components/ToggleGroup/toggleGroupItem.jsx

@@ -33,10 +33,10 @@ export var IconScaling = {
 };
 export var ToggleGroupItem = forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, value = _a.value, _b = _a.size, size = _b === void 0 ? 'medium' : _b, _c = _a.color, color = _c === void 0 ? 'red' : _c, _d = _a.appearance, appearance = _d === void 0 ? 'surface' : _d, props = __rest(_a, ["className", "children", "value", "size", "color", "appearance"]);
-    return (<ToggleGroupPrimitive.Item ref={ref} value={value} className={cn(toggleGroupItemVariants({ size: size }), toggleAppearanceStyle(appearance, color, true, 'data-[state=on]:'), className)} {...props}>
+    return (<ToggleGroupPrimitive.Item ref={ref} value={value} className={cn(toggleGroupItemVariants({ size: size }), toggleAppearanceStyle(appearance, color, true, 'data-[state=on]:'), className)} {...props}>
       {Children.map(children, function (child) {
             return React.cloneElement(child, { className: IconScaling[size] });
-        })}
+        })}
     </ToggleGroupPrimitive.Item>);
 });
 ToggleGroupItem.displayName = 'ToggleGroupItem';

package/dist/components/ToggleSwitch/index.d.ts

@@ -5,9 +5,9 @@ export interface ToggleSwitchProps extends VariantProps<typeof toggleSwitchVaria
     children?: any;
 }
 declare const toggleSwitchVariants: (props?: ({
-    scaling?: "100%" | "90%" | "95%" | "105%" | "110%" | null | undefined;
-    radius?: "medium" | "small" | "none" | "large" | "full" | null | undefined;
-    size?: "medium" | "small" | "large" | null | undefined;
+    scaling?: "90%" | "95%" | "100%" | "105%" | "110%" | null | undefined;
+    radius?: "none" | "small" | "medium" | "large" | "full" | null | undefined;
+    size?: "small" | "medium" | "large" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const ToggleSwitch: React.ForwardRefExoticComponent<Omit<import("@radix-ui/themes").SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & ToggleSwitchProps & React.RefAttributes<HTMLButtonElement>>;
 export default ToggleSwitch;

package/dist/components/ToggleSwitch/index.jsx

@@ -64,11 +64,11 @@ export var ToggleSwitch = React.forwardRef(function (_a, forwardedRef) {
         sizeTheme = '1';
     if (size === 'large')
         sizeTheme = '3';
-    return (<Theme className="flex" accentColor={color} hasBackground={false}>
-        <Text as="label" className={cn('flex items-center', SwitchLabelVariants({ size: size, scaling: scaling }))}>
-          <SwitchTheme ref={forwardedRef} {...switchProps} variant={appearance} radius={radius} size={sizeTheme} color={color} className={cn(toggleSwitchVariants({ scaling: scaling, radius: radius, size: size }), className)}></SwitchTheme>
-          {children}
-        </Text>
+    return (<Theme className="flex" accentColor={color} hasBackground={false}>
+        <Text as="label" className={cn('flex items-center', SwitchLabelVariants({ size: size, scaling: scaling }))}>
+          <SwitchTheme ref={forwardedRef} {...switchProps} variant={appearance} radius={radius} size={sizeTheme} color={color} className={cn(toggleSwitchVariants({ scaling: scaling, radius: radius, size: size }), className)}></SwitchTheme>
+          {children}
+        </Text>
       </Theme>);
 });
 ToggleSwitch.displayName = 'ToggleSwitch';

package/dist/components/Tooltip/index.d.ts

@@ -11,7 +11,7 @@ export interface TooltipProps extends React.InputHTMLAttributes<HTMLInputElement
     side?: 'top' | 'right' | 'bottom' | 'left';
 }
 declare const tooltipVariants: (props?: ({
-    scaling?: number | typeof Symbol.iterator | typeof Symbol.unscopables | "map" | "filter" | "fill" | "values" | "concat" | "indexOf" | "lastIndexOf" | "slice" | "length" | "includes" | "at" | "toLocaleString" | "toString" | "join" | "every" | "some" | "forEach" | "reduce" | "reduceRight" | "find" | "findIndex" | "entries" | "keys" | "flatMap" | "flat" | "findLast" | "findLastIndex" | "toReversed" | "toSorted" | "toSpliced" | "with" | "pop" | "push" | "reverse" | "shift" | "sort" | "splice" | "unshift" | "copyWithin" | null | undefined;
+    scaling?: number | typeof Symbol.iterator | typeof Symbol.unscopables | "toString" | "concat" | "indexOf" | "lastIndexOf" | "slice" | "length" | "includes" | "at" | "map" | "filter" | "fill" | "values" | "toLocaleString" | "join" | "every" | "some" | "forEach" | "reduce" | "reduceRight" | "find" | "findIndex" | "entries" | "keys" | "flatMap" | "flat" | "findLast" | "findLastIndex" | "toReversed" | "toSorted" | "toSpliced" | "with" | "pop" | "push" | "reverse" | "shift" | "sort" | "splice" | "unshift" | "copyWithin" | null | undefined;
     weight?: "medium" | "regular" | "semibold" | "bold" | null | undefined;
     radius?: "none" | "small" | "medium" | "large" | "full" | null | undefined;
     color?: string | null | undefined;

package/dist/components/Tooltip/index.jsx

@@ -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 +0,0 @@
-// components 디렉토리 내의 모든 타입 선언을 내보냄
-export * from './components';
-
-// typography 디렉토리 내의 모든 타입 선언을 내보냄
-export * from './Typography';

package/dist/index.js

@@ -1,5 +1,3 @@
-// components 디렉토리 내의 모든 파일을 내보냄
-export * from './components';
-
-// typography 디렉토리 내의 모든 파일을 내보냄
-export * from './Typography';
+"use strict";
+// export * from './components';
+// 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>);
 };