@lotte-innovate/ui-component-test 0.1.45 → 0.1.47

package/dist/{lib/components/Toast/ToastDescription.js → esm/src/lib/components/Toast/ToastDescription.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,11 +9,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import * as ToastPrimitive from '@radix-ui/react-toast';
 import { cva } from 'class-variance-authority';
-import { cn } from '../../../lib/utils/utils';
+import { cn } from '../../../../../lib/utils/utils';
 import { useToastContext } from './ToastRoot';
 export var toastDescriptionVariants = cva('flex m-0 text-wrap text-slate-11 dark:text-slateDark-11', {
     variants: {
@@ -48,6 +36,10 @@ export var toastDescriptionVariants = cva('flex m-0 text-wrap text-slate-11 dark
 export var ToastDescription = forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, contentText = _a.contentText, props = __rest(_a, ["className", "children", "contentText"]);
     var _b = useToastContext(), size = _b.size, color = _b.color;
-    return (_jsx(ToastPrimitive.Description, __assign({ ref: ref }, props, { children: _jsx("p", { className: cn(toastDescriptionVariants({ size: size, color: color }), className), children: contentText !== null && contentText !== void 0 ? contentText : children }) })));
+    return (<ToastPrimitive.Description ref={ref} {...props}>
+      <p className={cn(toastDescriptionVariants({ size: size, color: color }), className)}>
+        {contentText !== null && contentText !== void 0 ? contentText : children}
+      </p>
+    </ToastPrimitive.Description>);
 });
 ToastDescription.displayName = 'Toast.Description';

package/dist/{lib/components/Toast/ToastRoot.js → esm/src/lib/components/Toast/ToastRoot.jsx}

@@ -20,11 +20,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, createContext, useContext, useMemo, } from 'react';
+import React, { forwardRef, createContext, useContext, useMemo, } from 'react';
 import { cva } from 'class-variance-authority';
-import { cn } from '../../../lib/utils/utils';
-import { scalingVariants } from '../../../lib/constants';
+import { cn } from '../../../../../lib/utils/utils';
+import { scalingVariants } from '../../../../../lib/constants';
 import * as ToastPrimitive from '@radix-ui/react-toast';
 export var toastVariants = cva('flex bg-white dark:bg-slateDark-1', {
     variants: {
@@ -84,7 +83,14 @@ export var ToastRoot = forwardRef(function (_a, ref) {
     var contextValue = useMemo(function () { return ({ radius: radius, size: size, scaling: scaling, color: color }); }, [radius, size, scaling, color]);
     var toastRootStyle = "\n      shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] \n      flex flex-col px-[15px] relative justify-center\n      data-[state=open]:animate-slideIn \n      data-[state=closed]:animate-hide \n      data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] \n      data-[swipe=cancel]:translate-x-0 \n      data-[swipe=cancel]:transition-[transform_200ms_ease-out] \n      data-[swipe=end]:animate-swipeOut\n    ";
     var toastClassName = cn(toastVariants({ radius: radius, scaling: scaling, size: size, color: color }), toastRootStyle, className);
-    return (_jsx(ToastContext.Provider, { value: contextValue, children: _jsxs(ToastPrimitive.Provider, { swipeDirection: "right", duration: duration, children: [_jsx(ToastPrimitive.Root, __assign({ ref: ref, className: toastClassName, open: openToast, onOpenChange: setOpenToast }, props, { children: children })), _jsx(ToastPrimitive.Viewport, { className: cn(toastViewportVariants({ toastPosition: toastPosition })) })] }) }));
+    return (<ToastContext.Provider value={contextValue}>
+        <ToastPrimitive.Provider swipeDirection="right" duration={duration}>
+          <ToastPrimitive.Root ref={ref} className={toastClassName} open={openToast} onOpenChange={setOpenToast} {...props}>
+            {children}
+          </ToastPrimitive.Root>
+          <ToastPrimitive.Viewport className={cn(toastViewportVariants({ toastPosition: toastPosition }))}/>
+        </ToastPrimitive.Provider>
+      </ToastContext.Provider>);
 });
 ToastRoot.displayName = 'Toast.Root';
 export default ToastRoot;

package/dist/{lib/components/Toast/ToastTitle.js → esm/src/lib/components/Toast/ToastTitle.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,11 +9,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import * as ToastPrimitive from '@radix-ui/react-toast';
 import { cva } from 'class-variance-authority';
-import { cn } from '../../../lib/utils/utils';
+import { cn } from '../../../../../lib/utils/utils';
 import { useToastContext } from './ToastRoot';
 export var toastTitleVariants = cva('flex mb-[5px] text-slate-12 dark:text-slateDark-12 text-wrap break-words font-medium', {
     variants: {
@@ -48,6 +36,8 @@ export var toastTitleVariants = cva('flex mb-[5px] text-slate-12 dark:text-slate
 export var ToastTitle = forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, titleText = _a.titleText, props = __rest(_a, ["className", "children", "titleText"]);
     var _b = useToastContext(), size = _b.size, color = _b.color;
-    return (_jsx(ToastPrimitive.Title, __assign({ ref: ref }, props, { children: _jsx("p", { className: cn(toastTitleVariants({ size: size, color: color }), className), children: titleText !== null && titleText !== void 0 ? titleText : children }) })));
+    return (<ToastPrimitive.Title ref={ref} {...props}>
+      <p className={cn(toastTitleVariants({ size: size, color: color }), className)}>{titleText !== null && titleText !== void 0 ? titleText : children}</p>
+    </ToastPrimitive.Title>);
 });
 ToastTitle.displayName = 'Toast.Title';

package/dist/{lib/components/Toggle/ToggleWithText.js → esm/src/lib/components/Toggle/ToggleWithText.jsx}

@@ -20,13 +20,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsxs as _jsxs } from "react/jsx-runtime";
 import React, { Children, forwardRef } from 'react';
 import { cva } from 'class-variance-authority';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
-import { radiusVariants, toggleAppearanceStyle } from '../../../lib/constants';
-import { scalingVariants } from '../../../lib/constants';
-import { cn } from '../../../lib/utils/utils';
+import { radiusVariants, toggleAppearanceStyle } from '../../../../../lib/constants';
+import { scalingVariants } from '../../../../../lib/constants';
+import { cn } from '../../../../../lib/utils/utils';
 var toggleWithTextVariants = cva('flex items-center justify-center box-border font-medium', {
     variants: {
         radius: __assign({}, radiusVariants['base']),
@@ -50,9 +49,12 @@ export var IconScaling = {
 };
 export var ToggleWithText = 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, text = _a.text, props = __rest(_a, ["className", "children", "radius", "size", "scaling", "color", "appearance", "text"]);
-    return (_jsxs(TogglePrimitive.Root, __assign({ ref: ref, className: cn(toggleWithTextVariants({ radius: radius, size: size, scaling: scaling }), toggleAppearanceStyle(appearance, color, true, 'data-[state=on]:'), className) }, props, { children: [Children.map(children, function (child) {
-                return React.cloneElement(child, { className: IconScaling[size] });
-            }), text] })));
+    return (<TogglePrimitive.Root ref={ref} className={cn(toggleWithTextVariants({ 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] });
+        })}
+      {text}
+    </TogglePrimitive.Root>);
 });
 ToggleWithText.displayName = 'ToggleWithText';
 export default ToggleWithText;

package/dist/{lib/components/Toggle/index.js → esm/src/lib/components/Toggle/index.jsx}

@@ -20,12 +20,11 @@ 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 { cva } from 'class-variance-authority';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
-import { radiusVariants, scalingVariants, toggleAppearanceStyle } from '../../../lib/constants';
-import { cn } from '../../../lib/utils/utils';
+import { radiusVariants, scalingVariants, toggleAppearanceStyle } from '../../../../../lib/constants';
+import { cn } from '../../../../../lib/utils/utils';
 export * from './ToggleWithText';
 var toggleVariants = cva('grid place-content-center items-center justify-center box-border"', {
     variants: {
@@ -50,9 +49,11 @@ 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 (_jsx(TogglePrimitive.Root, __assign({ ref: ref, className: cn(toggleVariants({ radius: radius, size: size, scaling: scaling }), toggleAppearanceStyle(appearance, color, true, 'data-[state=on]:'), className) }, props, { children: Children.map(children, function (child) {
+    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';
 export default Toggle;

package/dist/{lib/components/ToggleGroup/ToggleGroupItem.js → esm/src/lib/components/ToggleGroup/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,13 +9,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
 import React, { Children, forwardRef, useContext, } from 'react';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import { cva } from 'class-variance-authority';
-import { toggleAppearanceStyle } from '../../../lib/constants';
+import { toggleAppearanceStyle } from '../../../../../lib/constants';
 import { ToggleGroupContext } from './ToggleGroupRoot';
-import { cn } from '../../../lib/utils/utils';
+import { cn } from '../../../../../lib/utils/utils';
 export var toggleGroupItemVariants = cva('grid place-content-center mr-[-1px] first:rounded-l last:rounded-r', {
     variants: {
         size: {
@@ -47,8 +35,10 @@ export var IconScaling = {
 export var ToggleGroupItem = forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, value = _a.value, props = __rest(_a, ["className", "children", "value"]);
     var _b = useContext(ToggleGroupContext), size = _b.size, _c = _b.color, color = _c === void 0 ? 'red' : _c, _d = _b.appearance, appearance = _d === void 0 ? 'surface' : _d;
-    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 !== null && size !== void 0 ? size : 'medium'] });
-        }) })));
+        })}
+    </ToggleGroupPrimitive.Item>);
 });
 ToggleGroupItem.displayName = 'ToggleGroup.Item';

package/dist/{lib/components/ToggleGroup/ToggleGroupRoot.js → esm/src/lib/components/ToggleGroup/ToggleGroupRoot.jsx}

@@ -20,12 +20,11 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, forwardRef } from 'react';
+import React, { createContext, forwardRef } from 'react';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import { cva } from 'class-variance-authority';
-import { scalingVariants } from '../../../lib/constants';
-import { cn } from '../../../lib/utils/utils';
+import { scalingVariants } from '../../../../../lib/constants';
+import { cn } from '../../../../../lib/utils/utils';
 var toggleVariants = cva('inline-flex', {
     variants: {
         scaling: __assign({}, scalingVariants),
@@ -43,6 +42,12 @@ export var ToggleGroupRoot = forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, scaling = _a.scaling, size = _a.size, color = _a.color, appearance = _a.appearance, props = __rest(_a, ["className", "children", "scaling", "size", "color", "appearance"]);
     var type = __assign({}, props).type;
     var contextValue = { size: size, color: color, appearance: appearance };
-    return (_jsx(ToggleGroupContext.Provider, { value: contextValue, children: type === 'single' ? (_jsx(ToggleGroupPrimitive.Root, __assign({ className: cn(toggleVariants({ scaling: scaling }), className) }, props, { ref: ref, children: children }))) : (_jsx(ToggleGroupPrimitive.Root, __assign({ className: cn(toggleVariants({ scaling: scaling }), className) }, props, { ref: ref, children: children }))) }));
+    return (<ToggleGroupContext.Provider value={contextValue}>
+      {type === 'single' ? (<ToggleGroupPrimitive.Root className={cn(toggleVariants({ scaling: scaling }), className)} {...props} ref={ref}>
+          {children}
+        </ToggleGroupPrimitive.Root>) : (<ToggleGroupPrimitive.Root className={cn(toggleVariants({ scaling: scaling }), className)} {...props} ref={ref}>
+          {children}
+        </ToggleGroupPrimitive.Root>)}
+    </ToggleGroupContext.Provider>);
 });
 ToggleGroupRoot.displayName = 'ToggleGroup.Root';

package/dist/{lib/components/ToggleSwitch/index.js → esm/src/lib/components/ToggleSwitch/index.jsx}

@@ -20,13 +20,12 @@ 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 '../../../lib/utils/utils';
-import { radiusVariants, scalingVariants } from '../../../lib/constants';
+import { cn } from '../../../../../lib/utils/utils';
+import { radiusVariants, scalingVariants } from '../../../../../lib/constants';
 import { Switch as SwitchTheme, Theme } from '@radix-ui/themes';
-import { Text } from '../../../lib/Typography/Text';
+import { Text } from '../../../../../lib/Typography/Text';
 var toggleSwitchVariants = cva('', {
     variants: {
         scaling: __assign({}, scalingVariants),
@@ -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), "aria-label": "Switch" })), 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)} aria-label="Switch"></SwitchTheme>
+          {children}
+        </Text>
+      </Theme>);
 });
 ToggleSwitch.displayName = 'ToggleSwitch';
 export default ToggleSwitch;

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

@@ -20,13 +20,12 @@ 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 '../../../lib/utils/utils';
-import { primaryColorStyle, radiusVariants, weightVariants } from '../../../lib/constants';
+import { cn } from '../../../../../lib/utils/utils';
+import { primaryColorStyle, radiusVariants, weightVariants } from '../../../../../lib/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: {
         weight: __assign({}, weightVariants),
@@ -43,7 +42,17 @@ var Tooltip = React.forwardRef(function (_a, ref) {
     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({ 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({ 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 = 'Tooltip';
 export default Tooltip;

package/dist/{lib → esm/src/lib}/constants.js

@@ -1,5 +1,5 @@
-import { ColorStyle, DarkColorStyle, colorOptions, chartColorOptions } from '../lib/color/constants';
-import * as lightColors from '../lib/color/light';
+import { ColorStyle, DarkColorStyle, colorOptions, chartColorOptions } from '../../../lib/color/constants';
+import * as lightColors from '../../../lib/color/light';
 export var radiusOptions = ['none', 'small', 'medium', 'large', 'full'];
 export var typoSizeOptions = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
 export var scalingOptions = ['90%', '95%', '100%', '105%', '110%'];

package/dist/{lib → esm/src/lib}/utils/useDarkMode.js

@@ -1,4 +1,4 @@
-import { slateA, slateDarkA } from '../../lib/color/alpha';
+import { slateA, slateDarkA } from '../../../../lib/color/alpha';
 import { useEffect, useState } from 'react';
 export var useDarkMode = function (isRAxes) {
     if (isRAxes === void 0) { isRAxes = false; }

package/dist/esm/src/stories/ToggleSwitch/ToggleSwitch.stories.jsx

@@ -0,0 +1,118 @@
+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 { ToggleSwitch } from '../../../../lib/components/ToggleSwitch/index';
+import { commonArgTypes, radiusOptions, scalingOptions } from '../../../../lib/constants';
+var meta = {
+    title: 'Component/ToggleSwitch',
+    component: ToggleSwitch,
+    parameters: {
+        layout: 'centered',
+        themes: {
+            themeOverride: 'dark',
+        },
+        docs: {
+            description: {
+                component: '선택 상태와 선택 해제 상태를 전환하여 컨트롤하는 요소',
+            },
+        },
+    },
+    argTypes: {
+        radius: __assign(__assign({}, commonArgTypes.radius), { description: 'ToggleSwitch 의 둥굴기' }),
+        size: {
+            table: {
+                category: 'Props',
+                type: { summary: ['small', 'medium', 'large'].join(' | ') },
+            },
+            control: { type: 'select' },
+            options: ['small', 'medium', 'large'],
+            defaultValue: { summary: 'medium' },
+            description: 'ToggleSwitch 의 크기',
+        },
+        scaling: __assign(__assign({}, commonArgTypes.scaling), { description: 'ToggleSwitch 비율' }),
+        color: __assign(__assign({}, commonArgTypes.color), { description: 'ToggleSwitch' }),
+        appearance: {
+            table: {
+                category: 'Props',
+                type: { summary: ['classic', 'soft', 'surface'].join(' | ') },
+            },
+            control: { type: 'select' },
+            defaultValue: { summary: 'surface' },
+            description: 'ToggleSwitch 스타일',
+            options: ['classic', 'soft', 'surface'],
+        },
+        disabled: {
+            description: 'ToggleSwitch disabled 기본 속성',
+            defaultValue: { summary: 'false' },
+            table: {
+                category: 'Props',
+                type: { summary: 'boolean' },
+            },
+            control: { type: 'boolean' },
+        },
+        label: {
+            table: {
+                category: 'Props',
+                type: { summary: '' },
+            },
+            control: { type: 'text' },
+            defaultValue: { summary: '' },
+            description: 'ToggleSwitch Label',
+        },
+    },
+};
+export default meta;
+export var Default = {
+    args: {
+        scaling: '100%',
+        disabled: false,
+        children: '토글 스위치',
+    },
+};
+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>
+  </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>); })}
+  </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>); })}
+  </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>); })}
+  </div>);
+};

package/dist/esm/src/stories/Welcome.jsx

@@ -0,0 +1,68 @@
+import React, { useEffect, useState } from 'react';
+import LandingLight from './assets/landing.svg';
+import LandingDark from './assets/landing_dark.svg';
+import Figma from './assets/figma.svg';
+import Gitlab from './assets/gitlab.svg';
+import Image from 'next/image';
+import Button from '../../../lib/components/Button';
+import Header from '../../../lib/Typography/Header';
+var addParentClass = function (theme) {
+    var elements = document.querySelectorAll('.welcome-wrap');
+    elements.forEach(function (element) {
+        var parent = element.parentElement.parentElement;
+        if (parent) {
+            parent.classList.add('welcome-wrap-layout');
+            if (theme === 'dark') {
+                document.body.classList.add('dark');
+                parent.classList.remove('light');
+                parent.classList.add('dark');
+            }
+            else {
+                document.body.classList.remove('dark');
+                parent.classList.remove('dark');
+                parent.classList.add('light');
+            }
+        }
+    });
+};
+var Welcome = function () {
+    var themeValue = localStorage.getItem('sb-addon-themes-3');
+    var _a = useState(JSON.parse(themeValue).current), theme = _a[0], setTheme = _a[1];
+    window.addEventListener('storage', function (event) {
+        themeValue = localStorage.getItem('sb-addon-themes-3');
+        if (!themeValue)
+            return;
+        if (event.key === 'sb-addon-themes-3') {
+            setTheme(JSON.parse(themeValue).current);
+        }
+    });
+    useEffect(function () {
+        addParentClass(theme);
+    }, [theme]);
+    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>
+          <p className="!text-[30px] dark:text-slateDark-12">Style Guide UI Kit</p>
+          <Header className="welcome-title">LOTTE UI Library</Header>
+        </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>
+      {theme === 'dark' ? (<Image className="absolute bottom-0 w-full" src={LandingDark} width={0} height={0} alt="컴포넌트 이미지입니다."/>) : (<Image className="absolute bottom-0 w-auto" src={LandingLight} width={0} height={0} alt="컴포넌트 이미지입니다."/>)}
+    </div>);
+};
+export default Welcome;

package/dist/esm/src/stories/accordion/Accordion.stories.jsx

@@ -0,0 +1,81 @@
+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 Accordion from '../../../../lib/components/Accordion/index';
+import { commonArgTypes } from '../../../../lib/constants';
+var meta = {
+    title: 'Component/Accordion',
+    component: Accordion.Root,
+    parameters: {
+        layout: 'centered',
+        themes: {
+            themeOverride: 'dark',
+        },
+        docs: {
+            description: {
+                component: '제한된 공간에 많은 정보를 구성할 수 있는 요소로 접힘, 펼침을 통해 정보를 보이거나 숨기는 기능',
+            },
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        color: __assign(__assign({}, commonArgTypes.color), { description: 'Accordion 색상' }),
+        scaling: __assign(__assign({}, commonArgTypes.scaling), { description: 'Accordion 크기' }),
+        type: {
+            description: 'Accordion 항목을 하나 또는 여러개 열 수 있는지 설정',
+            defaultValue: { summary: 'single' },
+            table: {
+                category: 'Props',
+                type: { summary: ['single', 'multiple'].join(' | ') },
+            },
+            options: ['single', 'multiple'],
+            control: { type: 'select' },
+        },
+    },
+};
+export default meta;
+export var Default = function (_a) {
+    var _b;
+    var args = __rest(_a, []);
+    return (<Accordion.Root defaultValue="item-1" type={(_b = args.type) !== null && _b !== void 0 ? _b : 'single'} {...args}>
+    <Accordion.Item value="item-1">
+      <Accordion.Trigger {...args}>리액트는 무엇인가요?</Accordion.Trigger>
+      <Accordion.Content>
+        리액트는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.
+      </Accordion.Content>
+    </Accordion.Item>
+
+    <Accordion.Item value="item-2">
+      <Accordion.Trigger {...args}>자바스크립트란 무엇인가요?</Accordion.Trigger>
+      <Accordion.Content>
+        자바스크립트는 객체 기반의 스크립트 프로그래밍 언어이다.
+      </Accordion.Content>
+    </Accordion.Item>
+
+    <Accordion.Item value="item-3" disabled={true}>
+      <Accordion.Trigger {...args}>Can it be animated?</Accordion.Trigger>
+      <Accordion.Content>
+        Yes! You can animate the Accordion with CSS or JavaScript.
+      </Accordion.Content>
+    </Accordion.Item>
+  </Accordion.Root>);
+};