@lotte-innovate/ui-component-test 0.1.50 → 0.1.52

package/dist/cjs/.storybook/main.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var config = {
+    stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+    addons: [
+        '@storybook/addon-links',
+        '@storybook/addon-essentials',
+        '@chromatic-com/storybook',
+        '@storybook/addon-interactions',
+        '@storybook/addon-styling-webpack',
+        '@storybook/addon-a11y',
+        'storybook-dark-mode',
+        'storybook-addon-deep-controls',
+    ],
+    framework: {
+        name: '@storybook/nextjs',
+        options: {},
+    },
+    docs: {
+        autodocs: 'tag',
+    },
+    staticDirs: ['../public'],
+};
+exports.default = config;

package/dist/cjs/.storybook/manager.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var addons_1 = require("@storybook/addons");
+var theming_1 = require("@storybook/theming");
+var logo_png_1 = __importDefault(require("../src/stories/assets/logo.png"));
+var lightTheme = (0, theming_1.create)({
+    base: 'light', // 밝은 테마 설정
+    brandImage: logo_png_1.default,
+    brandTitle: '롯데이노베이트',
+    brandUrl: '../src/stories/assets/logo.png', //로고 적용
+});
+addons_1.addons.setConfig({
+    theme: lightTheme,
+});

package/dist/cjs/.storybook/preview.jsx

@@ -0,0 +1,106 @@
+"use strict";
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.decorators = void 0;
+var react_1 = __importStar(require("react"));
+var theming_1 = require("@storybook/theming");
+var storybook_dark_mode_1 = require("storybook-dark-mode");
+require("../src/app/globals.css");
+require("../src/app/styles.css");
+require("../src/app/stories.css");
+require("tailwindcss/tailwind.css");
+var preview = {
+    parameters: {
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+        options: {
+            storySort: {
+                method: 'alphabetical',
+                order: [
+                    'Welcome',
+                    'Typography',
+                    'Component',
+                    'Chart',
+                    'Light Color',
+                    'Dark Color',
+                    'Light Alpha Color',
+                    'Dark Alpha Color',
+                ],
+            },
+        },
+        docs: {
+            theme: theming_1.themes.light,
+        },
+        darkMode: {
+            dark: __assign(__assign({}, theming_1.themes.dark), { appBg: '#272a2d', textColor: '#edeef0' }),
+            light: __assign(__assign({}, theming_1.themes.light), { appBg: 'white', textColor: '#2E3438' }),
+        },
+        backgrounds: { disable: true },
+        deepControls: { enabled: true },
+    },
+};
+exports.default = preview;
+var changeClassOnBody = function (oldClassName, newClassName) {
+    var classList = document.body.classList;
+    if (classList.contains(oldClassName)) {
+        classList.replace(oldClassName, newClassName);
+    }
+};
+var withBackground = function (Story, context) {
+    var isDarkMode = (0, storybook_dark_mode_1.useDarkMode)();
+    (0, react_1.useEffect)(function () {
+        if (isDarkMode) {
+            changeClassOnBody('light', 'dark');
+        }
+        else {
+            changeClassOnBody('dark', 'light');
+        }
+        var docsStoryElements = document.querySelectorAll('.docs-story');
+        docsStoryElements.forEach(function (element) {
+            element.style.backgroundColor = isDarkMode ? '#111113' : 'white';
+        });
+        docsStoryElements = document.querySelectorAll('.sb-show-main');
+        docsStoryElements.forEach(function (element) {
+            element.style.backgroundColor = isDarkMode ? '#111113' : 'white';
+        });
+    }, [isDarkMode]);
+    return <Story {...context}/>;
+};
+exports.decorators = [withBackground];

package/dist/cjs/lib/Typography/index.js

@@ -1,10 +1,2 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Text = exports.Header = void 0;
-var Header_1 = require("./Header");
-Object.defineProperty(exports, "Header", { enumerable: true, get: function () { return __importDefault(Header_1).default; } });
-var Text_1 = require("./Text");
-Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return __importDefault(Text_1).default; } });
+export { default as Header } from './Header';
+export { default as Text } from './Text';

package/dist/cjs/lib/color/alpha.js

@@ -1,8 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.goldDarkA = exports.bronzeDarkA = exports.brownDarkA = exports.grassDarkA = exports.greenDarkA = exports.jadeDarkA = exports.tealDarkA = exports.cyanDarkA = exports.blueDarkA = exports.indigoDarkA = exports.irisDarkA = exports.violetDarkA = exports.purpleDarkA = exports.plumDarkA = exports.pinkDarkA = exports.crimsonDarkA = exports.rubyDarkA = exports.redDarkA = exports.tomatoDarkA = exports.sandDarkA = exports.oliveDarkA = exports.slateDarkA = exports.orangeA = exports.amberA = exports.yellowA = exports.limeA = exports.mintA = exports.skyA = exports.goldA = exports.bronzeA = exports.brownA = exports.grassA = exports.greenA = exports.jadeA = exports.tealA = exports.cyanA = exports.blueA = exports.indigoA = exports.irisA = exports.violetA = exports.purpleA = exports.plumA = exports.pinkA = exports.crimsonA = exports.rubyA = exports.redA = exports.tomatoA = exports.sandA = exports.oliveA = exports.slateA = void 0;
-exports.orangeDarkA = exports.amberDarkA = exports.yellowDarkA = exports.limeDarkA = exports.mintDarkA = exports.skyDarkA = void 0;
-exports.slateA = {
+export var slateA = {
     1: '#00005503',
     2: '#00005506',
     3: '#0000330f',
@@ -16,7 +12,7 @@ exports.slateA = {
     11: '#0007149f',
     12: '#000509e3',
 };
-exports.oliveA = {
+export var oliveA = {
     1: '#00550003',
     2: '#00490007',
     3: '#00200010',
@@ -30,7 +26,7 @@ exports.oliveA = {
     11: '#020a00a0',
     12: '#010600e3',
 };
-exports.sandA = {
+export var sandA = {
     1: '#55550003',
     2: '#25250007',
     3: '#20100010',
@@ -44,7 +40,7 @@ exports.sandA = {
     11: '#080800a1',
     12: '#060500e3',
 };
-exports.tomatoA = {
+export var tomatoA = {
     1: '#ff000003',
     2: '#ff200008',
     3: '#f52b0018',
@@ -58,7 +54,7 @@ exports.tomatoA = {
     11: '#cd2200ea',
     12: '#460900e0',
 };
-exports.redA = {
+export var redA = {
     1: '#ff000003',
     2: '#ff000008',
     3: '#f3000d14',
@@ -72,7 +68,7 @@ exports.redA = {
     11: '#c40006d3',
     12: '#55000de8',
 };
-exports.rubyA = {
+export var rubyA = {
     1: '#ff005503',
     2: '#ff002008',
     3: '#f3002515',
@@ -86,7 +82,7 @@ exports.rubyA = {
     11: '#c10030db',
     12: '#550016e8',
 };
-exports.crimsonA = {
+export var crimsonA = {
     1: '#ff005503',
     2: '#e0004008',
     3: '#ff005216',
@@ -100,7 +96,7 @@ exports.crimsonA = {
     11: '#c4004fe2',
     12: '#530026e9',
 };
-exports.pinkA = {
+export var pinkA = {
     1: '#ff00aa03',
     2: '#e0008008',
     3: '#f4008c16',
@@ -114,7 +110,7 @@ exports.pinkA = {
     11: '#b60074d6',
     12: '#59003bed',
 };
-exports.plumA = {
+export var plumA = {
     1: '#aa00ff03',
     2: '#c000c008',
     3: '#cc00cc14',
@@ -128,7 +124,7 @@ exports.plumA = {
     11: '#730086c1',
     12: '#40004be6',
 };
-exports.purpleA = {
+export var purpleA = {
     1: '#aa00aa03',
     2: '#8000e008',
     3: '#8e00f112',
@@ -142,7 +138,7 @@ exports.purpleA = {
     11: '#52009aba',
     12: '#250049df',
 };
-exports.violetA = {
+export var violetA = {
     1: '#5500aa03',
     2: '#4900ff07',
     3: '#4400ee0f',
@@ -156,7 +152,7 @@ exports.violetA = {
     11: '#1f0099af',
     12: '#0b0043d9',
 };
-exports.irisA = {
+export var irisA = {
     1: '#0000ff02',
     2: '#0000ff07',
     3: '#0011ee0f',
@@ -170,7 +166,7 @@ exports.irisA = {
     11: '#0600abac',
     12: '#000246d8',
 };
-exports.indigoA = {
+export var indigoA = {
     1: '#00008002',
     2: '#0040ff08',
     3: '#0047f112',
@@ -184,7 +180,7 @@ exports.indigoA = {
     11: '#002bb7c5',
     12: '#001046e0',
 };
-exports.blueA = {
+export var blueA = {
     1: '#0080ff04',
     2: '#008cff0b',
     3: '#008ff519',
@@ -198,7 +194,7 @@ exports.blueA = {
     11: '#006dcbf2',
     12: '#002359ee',
 };
-exports.cyanA = {
+export var cyanA = {
     1: '#0099cc05',
     2: '#009db10d',
     3: '#00c2d121',
@@ -212,7 +208,7 @@ exports.cyanA = {
     11: '#007491ef',
     12: '#00323ef2',
 };
-exports.tealA = {
+export var tealA = {
     1: '#00cc9905',
     2: '#00aa800c',
     3: '#00c69d1f',
@@ -226,7 +222,7 @@ exports.tealA = {
     11: '#008573',
     12: '#00332df2',
 };
-exports.jadeA = {
+export var jadeA = {
     1: '#00c08004',
     2: '#00a3460b',
     3: '#00ae4819',
@@ -240,7 +236,7 @@ exports.jadeA = {
     11: '#007152df',
     12: '#002217e2',
 };
-exports.greenA = {
+export var greenA = {
     1: '#00c04004',
     2: '#00a32f0b',
     3: '#00a43319',
@@ -254,7 +250,7 @@ exports.greenA = {
     11: '#00713fde',
     12: '#002616e6',
 };
-exports.grassA = {
+export var grassA = {
     1: '#00c00004',
     2: '#0099000a',
     3: '#00970016',
@@ -268,7 +264,7 @@ exports.grassA = {
     11: '#006514d5',
     12: '#002006df',
 };
-exports.brownA = {
+export var brownA = {
     1: '#aa550003',
     2: '#aa550009',
     3: '#a04b0018',
@@ -282,7 +278,7 @@ exports.brownA = {
     11: '#522100b9',
     12: '#140600d1',
 };
-exports.bronzeA = {
+export var bronzeA = {
     1: '#55000003',
     2: '#cc33000a',
     3: '#92250015',
@@ -296,7 +292,7 @@ exports.bronzeA = {
     11: '#3d0f00ab',
     12: '#1d0600d4',
 };
-exports.goldA = {
+export var goldA = {
     1: '#55550003',
     2: '#9d8a000d',
     3: '#75600018',
@@ -310,7 +306,7 @@ exports.goldA = {
     11: '#362100b4',
     12: '#130c00d4',
 };
-exports.skyA = {
+export var skyA = {
     1: '#00d5ff06',
     2: '#00a4db0e',
     3: '#00b3ee1e',
@@ -324,7 +320,7 @@ exports.skyA = {
     11: '#00749e',
     12: '#002540e2',
 };
-exports.mintA = {
+export var mintA = {
     1: '#00d5aa06',
     2: '#00b18a0d',
     3: '#00d29e22',
@@ -338,7 +334,7 @@ exports.mintA = {
     11: '#007763fd',
     12: '#00312ae9',
 };
-exports.limeA = {
+export var limeA = {
     1: '#66990005',
     2: '#6b95000c',
     3: '#96c80029',
@@ -352,7 +348,7 @@ exports.limeA = {
     11: '#375f00d0',
     12: '#1e2900e3',
 };
-exports.yellowA = {
+export var yellowA = {
     1: '#aaaa0006',
     2: '#f4dd0016',
     3: '#ffee0047',
@@ -366,7 +362,7 @@ exports.yellowA = {
     11: '#9e6c00',
     12: '#2e2000e0',
 };
-exports.amberA = {
+export var amberA = {
     1: '#c0800004',
     2: '#f4d10016',
     3: '#ffde003d',
@@ -380,7 +376,7 @@ exports.amberA = {
     11: '#ab6400',
     12: '#341500dd',
 };
-exports.orangeA = {
+export var orangeA = {
     1: '#c0400004',
     2: '#ff8e0012',
     3: '#ff9c0029',
@@ -394,7 +390,7 @@ exports.orangeA = {
     11: '#cc4e00',
     12: '#431200e2',
 };
-exports.slateDarkA = {
+export var slateDarkA = {
     1: '#FFFFFF0D',
     2: '#FFFFFF1A',
     3: '#FFFFFF26',
@@ -408,7 +404,7 @@ exports.slateDarkA = {
     11: '#FFFFFFE5',
     12: '#FFFFFFF2',
 };
-exports.oliveDarkA = {
+export var oliveDarkA = {
     1: '#00000000',
     2: '#F1F2F008',
     3: '#F4F5F312',
@@ -422,7 +418,7 @@ exports.oliveDarkA = {
     11: '#F6FEF4B0',
     12: '#FDFFFDED',
 };
-exports.sandDarkA = {
+export var sandDarkA = {
     1: '#00000000',
     2: '#F4F4F309',
     3: '#F6F6F513',
@@ -436,7 +432,7 @@ exports.sandDarkA = {
     11: '#FFFCF4B0',
     12: '#FFFFFDED',
 };
-exports.tomatoDarkA = {
+export var tomatoDarkA = {
     1: '#F1121208',
     2: '#FF55330F',
     3: '#FF35232B',
@@ -450,7 +446,7 @@ exports.tomatoDarkA = {
     11: '#FF977D',
     12: '#FFD6CEFB',
 };
-exports.redDarkA = {
+export var redDarkA = {
     1: '#F4121209',
     2: '#F22F3E11',
     3: '#FF173F2D',
@@ -464,7 +460,7 @@ exports.redDarkA = {
     11: '#FF9592',
     12: '#FFD1D9',
 };
-exports.rubyDarkA = {
+export var rubyDarkA = {
     1: '#F4124A09',
     2: '#FE5A7F0E',
     3: '#FF235D2C',
@@ -478,7 +474,7 @@ exports.rubyDarkA = {
     11: '#FF949D',
     12: '#FFD3E2FE',
 };
-exports.crimsonDarkA = {
+export var crimsonDarkA = {
     1: '#F4126709',
     2: '#F22F7A11',
     3: '#FE2A8B2A',
@@ -492,7 +488,7 @@ exports.crimsonDarkA = {
     11: '#FF92AD',
     12: '#FFD5EAFD',
 };
-exports.pinkDarkA = {
+export var pinkDarkA = {
     1: '#F412BC09',
     2: '#F420BB12',
     3: '#FE37CC29',
@@ -506,7 +502,7 @@ exports.pinkDarkA = {
     11: '#FF8DCC',
     12: '#FFD3ECFD',
 };
-exports.plumDarkA = {
+export var plumDarkA = {
     1: '#F112F108',
     2: '#F22FF211',
     3: '#FD4CFD27',
@@ -520,7 +516,7 @@ exports.plumDarkA = {
     11: '#F19CFEF3',
     12: '#FEDDFEF4',
 };
-exports.purpleDarkA = {
+export var purpleDarkA = {
     1: '#B412F90B',
     2: '#B744F714',
     3: '#C150FF2D',
@@ -534,7 +530,7 @@ exports.purpleDarkA = {
     11: '#D19DFF',
     12: '#F1DDFFFA',
 };
-exports.violetDarkA = {
+export var violetDarkA = {
     1: '#4422FF0F',
     2: '#853FF916',
     3: '#8354FE36',
@@ -548,7 +544,7 @@ exports.violetDarkA = {
     11: '#BAA7FF',
     12: '#E3DEFFFE',
 };
-exports.irisDarkA = {
+export var irisDarkA = {
     1: '#3636FE0E',
     2: '#564BF916',
     3: '#525BFF3B',
@@ -562,7 +558,7 @@ exports.irisDarkA = {
     11: '#B1A9FF',
     12: '#E1E0FFFE',
 };
-exports.indigoDarkA = {
+export var indigoDarkA = {
     1: '#1133FF0F',
     2: '#3354FA17',
     3: '#2F62FF3C',
@@ -576,7 +572,7 @@ exports.indigoDarkA = {
     11: '#9EB1FF',
     12: '#D6E1FF',
 };
-exports.blueDarkA = {
+export var blueDarkA = {
     1: '#004DF211',
     2: '#1166FB18',
     3: '#0077FF3A',
@@ -590,7 +586,7 @@ exports.blueDarkA = {
     11: '#70B8FF',
     12: '#C2E6FF',
 };
-exports.cyanDarkA = {
+export var cyanDarkA = {
     1: '#0091F70A',
     2: '#02A7F211',
     3: '#00BEFD28',
@@ -604,7 +600,7 @@ exports.cyanDarkA = {
     11: '#52E1FEE5',
     12: '#BBF3FEF7',
 };
-exports.tealDarkA = {
+export var tealDarkA = {
     1: '#00DEAB05',
     2: '#12FBE60C',
     3: '#00FFE61E',
@@ -618,7 +614,7 @@ exports.tealDarkA = {
     11: '#0AFED5D6',
     12: '#B8FFEBEF',
 };
-exports.jadeDarkA = {
+export var jadeDarkA = {
     1: '#00DE4505',
     2: '#27FBA60C',
     3: '#02F99920',
@@ -632,7 +628,7 @@ exports.jadeDarkA = {
     11: '#21FEC0D6',
     12: '#B8FFE1EF',
 };
-exports.greenDarkA = {
+export var greenDarkA = {
     1: '#00DE4505',
     2: '#29F99D0B',
     3: '#22FF991E',
@@ -646,7 +642,7 @@ exports.greenDarkA = {
     11: '#46FEA5D4',
     12: '#BBFFD7F0',
 };
-exports.grassDarkA = {
+export var grassDarkA = {
     1: '#00DE1205',
     2: '#5EF7780A',
     3: '#70FE8C1B',
@@ -660,7 +656,7 @@ exports.grassDarkA = {
     11: '#89FF9FCD',
     12: '#CEFFCEEF',
 };
-exports.brownDarkA = {
+export var brownDarkA = {
     1: '#91110002',
     2: '#FBA67C0C',
     3: '#FCB58C19',
@@ -674,7 +670,7 @@ exports.brownDarkA = {
     11: '#FED1AAD9',
     12: '#FEECD4F2',
 };
-exports.bronzeDarkA = {
+export var bronzeDarkA = {
     1: '#D1110004',
     2: '#FBBC910C',
     3: '#FACEB817',
@@ -688,7 +684,7 @@ exports.bronzeDarkA = {
     11: '#FFD7C6D1',
     12: '#FFF1E9EC',
 };
-exports.goldDarkA = {
+export var goldDarkA = {
     1: '#91911102',
     2: '#F9E29D0B',
     3: '#F8ECBB15',
@@ -702,7 +698,7 @@ exports.goldDarkA = {
     11: '#FEE7C6C8',
     12: '#FEF7EDE7',
 };
-exports.skyDarkA = {
+export var skyDarkA = {
     1: '#0044FF0F',
     2: '#1171FB18',
     3: '#1184FC33',
@@ -716,7 +712,7 @@ exports.skyDarkA = {
     11: '#7CD3FFEF',
     12: '#C2F3FF',
 };
-exports.mintDarkA = {
+export var mintDarkA = {
     1: '#00DEDE05',
     2: '#00F9F90B',
     3: '#00FFF61D',
@@ -730,7 +726,7 @@ exports.mintDarkA = {
     11: '#67FFDED2',
     12: '#CBFEE9F5',
 };
-exports.limeDarkA = {
+export var limeDarkA = {
     1: '#11BB0003',
     2: '#78F7000A',
     3: '#9BFD4C1A',
@@ -744,7 +740,7 @@ exports.limeDarkA = {
     11: '#D1FE77E4',
     12: '#E9FEBFF7',
 };
-exports.yellowDarkA = {
+export var yellowDarkA = {
     1: '#D1510004',
     2: '#F9B4000B',
     3: '#FFAA001E',
@@ -758,7 +754,7 @@ exports.yellowDarkA = {
     11: '#FEE949F5',
     12: '#FEF6BAF6',
 };
-exports.amberDarkA = {
+export var amberDarkA = {
     1: '#E63C0006',
     2: '#FD9B000D',
     3: '#FA820022',
@@ -772,7 +768,7 @@ exports.amberDarkA = {
     11: '#FFCA16',
     12: '#FFE7B3',
 };
-exports.orangeDarkA = {
+export var orangeDarkA = {
     1: '#EC360007',
     2: '#FE6D000E',
     3: '#FB6A0025',