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

package/dist/components/ToggleGroup/{toggleGroupItem.js → toggleGroupItem.jsx}

@@ -1,14 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -20,7 +9,6 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
 import React, { Children, forwardRef } from 'react';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import { cva } from 'class-variance-authority';
@@ -45,8 +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 (_jsx(ToggleGroupPrimitive.Item, __assign({ ref: ref, value: value, className: cn(toggleGroupItemVariants({ size: size }), toggleAppearanceStyle(appearance, color, true, 'data-[state=on]:'), className) }, props, { children: Children.map(children, function (child) {
+    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.js → index.jsx}

@@ -20,7 +20,6 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { cva } from 'class-variance-authority';
 import { cn } from '../../utils/utils';
@@ -65,7 +64,12 @@ export var ToggleSwitch = React.forwardRef(function (_a, forwardedRef) {
         sizeTheme = '1';
     if (size === 'large')
         sizeTheme = '3';
-    return (_jsx(Theme, { className: "flex", accentColor: color, hasBackground: false, children: _jsxs(Text, { as: "label", className: cn('flex items-center', SwitchLabelVariants({ size: size, scaling: scaling })), children: [_jsx(SwitchTheme, __assign({ ref: forwardedRef }, switchProps, { variant: appearance, radius: radius, size: sizeTheme, color: color, className: cn(toggleSwitchVariants({ scaling: scaling, radius: radius, size: size }), className) })), children] }) }));
+    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';
 export default ToggleSwitch;

package/dist/components/Tooltip/{index.js → index.jsx}

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

@@ -1,2 +1,3 @@
-declare const Welcome: () => import("react/jsx-runtime").JSX.Element;
+import React from 'react';
+declare const Welcome: () => React.JSX.Element;
 export default Welcome;

package/dist/stories/Welcome.jsx

@@ -0,0 +1,48 @@
+import React, { useEffect } from 'react';
+import Landing from './assets/landing.svg';
+import Logo from './assets/logo.svg';
+import Figma from './assets/figma.svg';
+import Gitlab from './assets/gitlab.svg';
+import Image from 'next/image';
+import Button from 'components/Button';
+var addParentClass = function () {
+    var elements = document.querySelectorAll('.welcome-wrap');
+    elements.forEach(function (element) {
+        var parent = element.parentElement.parentElement;
+        if (parent) {
+            parent.classList.add('welcome-wrap-layout');
+        }
+    });
+};
+var Welcome = function () {
+    useEffect(function () {
+        addParentClass();
+    }, []);
+    var navigateToGitlab = function () {
+        window.open('http://s-gitlab.ldcc.co.kr/l-ui/ui-component', '_blank');
+    };
+    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="컴포넌트 이미지입니다."/>
+    </div>);
+};
+export default Welcome;

package/dist/stories/accordion/Accordion.stories.d.ts

@@ -68,4 +68,4 @@ declare const meta: {
 export default meta;
 export declare const Default: ({ ...args }: {
     [x: string]: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;

package/dist/stories/accordion/{Accordion.stories.js → Accordion.stories.jsx}

@@ -20,7 +20,6 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from '../../components/Accordion/index';
 import { commonArgTypes } from '../../constants';
 var meta = {
@@ -57,5 +56,24 @@ export default meta;
 export var Default = function (_a) {
     var _b;
     var args = __rest(_a, []);
-    return (_jsxs(Accordion, __assign({ defaultValue: "item-1", type: (_b = args.type) !== null && _b !== void 0 ? _b : 'single' }, args, { children: [_jsxs(AccordionItem, { value: "item-1", children: [_jsx(AccordionTrigger, __assign({}, args, { children: "\uB9AC\uC561\uD2B8\uB294 \uBB34\uC5C7\uC778\uAC00\uC694?" })), _jsx(AccordionContent, { children: "\uB9AC\uC561\uD2B8\uB294 \uC790\uBC14\uC2A4\uD06C\uB9BD\uD2B8 \uB77C\uC774\uBE0C\uB7EC\uB9AC\uC758 \uD558\uB098\uB85C\uC11C \uC0AC\uC6A9\uC790 \uC778\uD130\uD398\uC774\uC2A4\uB97C \uB9CC\uB4E4\uAE30 \uC704\uD574 \uC0AC\uC6A9\uB41C\uB2E4." })] }), _jsxs(AccordionItem, { value: "item-2", children: [_jsx(AccordionTrigger, __assign({}, args, { children: "\uC790\uBC14\uC2A4\uD06C\uB9BD\uD2B8\uB780 \uBB34\uC5C7\uC778\uAC00\uC694?" })), _jsx(AccordionContent, { children: "\uC790\uBC14\uC2A4\uD06C\uB9BD\uD2B8\uB294 \uAC1D\uCCB4 \uAE30\uBC18\uC758 \uC2A4\uD06C\uB9BD\uD2B8 \uD504\uB85C\uADF8\uB798\uBC0D \uC5B8\uC5B4\uC774\uB2E4." })] }), _jsxs(AccordionItem, { value: "item-3", disabled: true, children: [_jsx(AccordionTrigger, __assign({}, args, { children: "Can it be animated?" })), _jsx(AccordionContent, { children: "Yes! You can animate the Accordion with CSS or JavaScript." })] })] })));
+    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.d.ts

@@ -104,4 +104,4 @@ declare const meta: {
 export default meta;
 export declare const Default: ({ ...args }: {
     [x: string]: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;

package/dist/stories/alert-dialog/{AlertDialog.stories.js → AlertDialog.stories.jsx}

@@ -20,7 +20,6 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { commonArgTypes, sizeOptions } from '../../constants';
 import Button from 'components/Button';
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogTitle, AlertDialogTrigger, } from 'components/AlertDialog';
@@ -56,5 +55,19 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (_jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { children: _jsx(Button, { children: "\uBC84\uD2BC\uC744 \uD074\uB9AD\uD574\uC8FC\uC138\uC694" }) }), _jsxs(AlertDialogContent, __assign({}, args, { children: [_jsx(AlertDialogTitle, __assign({}, args, { children: "AlertDialog \uC81C\uBAA9" })), _jsx(AlertDialogDescription, __assign({}, args, { children: "AlertDialog \uB0B4\uC6A9\uC774 \uB4E4\uC5B4\uAC08 \uACF5\uAC04\uC785\uB2C8\uB2E4." })), _jsxs("div", { className: "flex justify-end", children: [_jsx(AlertDialogCancel, __assign({}, args, { children: "\uCDE8\uC18C" })), _jsx(AlertDialogAction, __assign({}, args, { children: "\uD655\uC778" }))] })] }))] }));
+    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.d.ts

@@ -59,10 +59,10 @@ declare const meta: {
 export default meta;
 export declare const Default: ({ ...args }: {
     [x: string]: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export declare const Ratio: ({ ...args }: {
     [x: string]: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export declare const Scaling: ({ ...args }: {
     [x: string]: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;

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

@@ -0,0 +1,106 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import Image from 'next/image';
+import AspectRatio from 'components/AspectRatio';
+import { Text } from 'Typography/Text';
+import { commonArgTypes, scalingOptions } from '../../constants';
+var aspectOptions = {
+    '1': 1,
+    '5/4': 1.25,
+    '5/3': 1.66,
+    '5/2': 2.5,
+    '5/1': 5,
+    '16/9': 1.77,
+};
+var meta = {
+    title: 'Component/AspectRatio',
+    component: AspectRatio,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: '원하는 비율로 콘텐츠를 표시하는 컴포넌트',
+            },
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        ratio: {
+            table: {
+                category: 'Props',
+                type: { summary: 'number' },
+            },
+            options: Object.keys(aspectOptions),
+            mapping: aspectOptions,
+            control: {
+                type: 'select',
+            },
+            description: 'width / height 비율',
+            defaultValue: { summary: '16/9' },
+        },
+        scaling: __assign(__assign({}, commonArgTypes.scaling), { description: 'AspectRatio 비율' }),
+    },
+    args: {},
+};
+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>
+  </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>
+  </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>); })}
+  </div>);
+};

package/dist/stories/avatar/Avatar.stories.d.ts

@@ -112,16 +112,16 @@ declare const meta: {
 export default meta;
 export declare const Default: ({ ...args }: {
     [x: string]: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export declare const Radius: ({ ...args }: {
     [x: string]: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export declare const Size: ({ ...args }: {
     [x: string]: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export declare const Scaling: ({ ...args }: {
     [x: string]: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export declare const Appearance: ({ ...args }: {
     [x: string]: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;

package/dist/stories/avatar/{Avatar.stories.js → Avatar.stories.jsx}

@@ -20,7 +20,6 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Avatar from 'components/Avatar';
 import { radiusOptions, scalingOptions, commonArgTypes, typoSizeOptions, appearanceOptions, } from '../../constants';
 var meta = {
@@ -74,21 +73,33 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (_jsxs("div", { className: "flex space-x-4", children: [_jsx(Avatar, __assign({ imagePath: "https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80" }, args)), _jsx(Avatar, __assign({ 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 (_jsx("div", { className: "flex space-x-4", children: radiusOptions.map(function (radius) { return (_jsx(Avatar, __assign({ radius: radius, imagePath: "https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&w=128&h=128&dpr=2&q=80" }, args), radius)); }) }));
+    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 (_jsx("div", { className: "flex space-x-4", children: typoSizeOptions.map(function (size) { return (_jsx(Avatar, __assign({ size: size, fallbackText: "A" }, args), size)); }) }));
+    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 (_jsx("div", { className: "flex space-x-4", children: scalingOptions.map(function (scaling) { return (_jsx(Avatar, __assign({ 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), scaling)); }) }));
+    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 (_jsxs("div", { className: "flex space-x-4", children: [_jsx(Avatar, __assign({ appearance: "solid", fallbackText: 'A' }, args)), _jsx(Avatar, __assign({ 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.d.ts

@@ -115,19 +115,19 @@ declare const meta: {
 export default meta;
 export declare const Default: ({ ...args }: {
     [x: string]: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export declare const Radius: ({ ...args }: {
     [x: string]: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export declare const Size: ({ ...args }: {
     [x: string]: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export declare const Scaling: ({ ...args }: {
     [x: string]: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export declare const Weight: ({ ...args }: {
     [x: string]: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export declare const Appearance: ({ ...args }: {
     [x: string]: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;

package/dist/stories/badge/{Badge.stories.js → Badge.stories.jsx}

@@ -20,7 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import Badge from 'components/Badge';
 import { radiusOptions, commonArgTypes, appearanceOptions, sizeOptions, scalingOptions, } from '../../../src/constants';
 var meta = {
@@ -62,25 +62,69 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return _jsx(Badge, __assign({}, args, { children: "Badge" }));
+    return <Badge {...args}>Badge</Badge>;
 };
 export var Radius = function (_a) {
     var args = __rest(_a, []);
-    return (_jsx("div", { className: "flex gap-3", children: radiusOptions.map(function (radius) { return (_jsx(Badge, __assign({}, args, { radius: radius, children: radius }), radius)); }) }));
+    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 (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Badge, __assign({}, args, { size: 'small', children: "small" })), _jsx(Badge, __assign({}, args, { size: 'medium', children: "medium" })), _jsx(Badge, __assign({}, args, { size: 'large', children: "large" }))] }));
+    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 (_jsx("div", { className: "flex items-center gap-3", children: scalingOptions.map(function (scaling) { return (_jsx(Badge, __assign({}, args, { scaling: scaling, children: scaling }), scaling)); }) }));
+    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 (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Badge, __assign({}, args, { weight: "regular", children: "regular" })), _jsx(Badge, __assign({}, args, { weight: "medium", children: "medium" })), _jsx(Badge, __assign({}, args, { weight: "semibold", children: "semibold" })), _jsx(Badge, __assign({}, args, { weight: "bold", children: "bold" }))] }));
+    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 (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Badge, __assign({}, args, { appearance: "solid", children: "solid" })), _jsx(Badge, __assign({}, args, { appearance: "soft", children: "soft" })), _jsx(Badge, __assign({}, args, { appearance: "surface", children: "surface" })), _jsx(Badge, __assign({}, args, { appearance: "outline", children: "outline" }))] }));
+    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.d.ts

@@ -1,8 +1,9 @@
+/// <reference types="react" />
 import { PointStyle } from 'types';
 declare const meta: {
     title: string;
     component: {
-        ({ className, datasets, scaling, width, height, ...props }: import("components/BubbleChart").BubbleChartProps): import("react/jsx-runtime").JSX.Element;
+        ({ className, datasets, scaling, width, height, ...props }: import("components/BubbleChart").BubbleChartProps): import("react").JSX.Element;
         displayName: string;
     };
     parameters: {
@@ -93,10 +94,10 @@ declare const meta: {
 export default meta;
 export declare const Default: ({ ...args }: {
     [x: string]: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export declare const MultiDatasets: ({ ...args }: {
     [x: string]: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export declare const PointStyles: ({ ...args }: {
     [x: string]: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;

package/dist/stories/bubble-chart/{BubbleChart.stories.js → BubbleChart.stories.jsx}

@@ -20,7 +20,6 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BubbleChart } from 'components/BubbleChart';
 import { commonArgTypes, labelPositionList } from '../../constants';
 import { red, blue, yellow } from 'color/light';
@@ -110,7 +109,9 @@ export var Default = function (_a) {
             },
         },
     };
-    return (_jsx("div", { className: "w-[500px] h-[400px]", children: _jsx(BubbleChart, __assign({ 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) {
     var args = __rest(_a, []);
@@ -157,12 +158,19 @@ export var MultiDatasets = function (_a) {
             },
         },
     };
-    return _jsx(Default, { datasets: datasets, options: options });
+    return <Default datasets={datasets} options={options}/>;
 };
 export var PointStyles = function (_a) {
     var args = __rest(_a, []);
     var options = {
         responsive: false,
     };
-    return (_jsxs("div", { className: "space-y-3", children: [_jsx("div", { className: "flex items-center space-x-3", children: ['cross', 'crossRot'].map(function (style, index) { return (_jsx(BubbleChart, __assign({ options: options, width: 350, height: 250 }, args, { datasets: datasets(style, style) }), index)); }) }), _jsx("div", { className: "flex items-center space-x-3", children: ['dash', 'rect'].map(function (style, index) { return (_jsx(BubbleChart, __assign({ options: options, width: 350, height: 250 }, args, { datasets: datasets(style, style) }), index)); }) })] }));
+    return (<div className="space-y-3">
+      <div className="flex items-center space-x-3">
+        {['cross', 'crossRot'].map(function (style, index) { return (<BubbleChart key={index} options={options} width={350} height={250} {...args} datasets={datasets(style, style)}/>); })}
+      </div>
+      <div className="flex items-center space-x-3">
+        {['dash', 'rect'].map(function (style, index) { return (<BubbleChart key={index} options={options} width={350} height={250} {...args} datasets={datasets(style, style)}/>); })}
+      </div>
+    </div>);
 };

package/dist/stories/button/Button.stories.d.ts

@@ -139,10 +139,10 @@ declare const meta: {
     };
 };
 export default meta;
-export declare const Default: (args: ButtonProps) => import("react/jsx-runtime").JSX.Element;
-export declare const Radius: (args: ButtonProps) => import("react/jsx-runtime").JSX.Element;
-export declare const Size: (args: ButtonProps) => import("react/jsx-runtime").JSX.Element;
-export declare const Scaling: (args: ButtonProps) => import("react/jsx-runtime").JSX.Element;
-export declare const Weight: (args: ButtonProps) => import("react/jsx-runtime").JSX.Element;
-export declare const Appearance: (args: ButtonProps) => import("react/jsx-runtime").JSX.Element;
-export declare const WithIcon: (args: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Default: (args: ButtonProps) => import("react").JSX.Element;
+export declare const Radius: (args: ButtonProps) => import("react").JSX.Element;
+export declare const Size: (args: ButtonProps) => import("react").JSX.Element;
+export declare const Scaling: (args: ButtonProps) => import("react").JSX.Element;
+export declare const Weight: (args: ButtonProps) => import("react").JSX.Element;
+export declare const Appearance: (args: ButtonProps) => import("react").JSX.Element;
+export declare const WithIcon: (args: ButtonProps) => import("react").JSX.Element;