@pfct/purple 1.4.0-rc.6 → 1.4.0-rc.7

package/dist/utils/GenerateColorStyle/control/check-box.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const Colors_1 = require("../../../core/Colors");
+const checkBoxColorStyle = (colorType) => {
+    const defaultOnBorderColor = 'transparent';
+    const defaultOffContainerColor = 'transparent';
+    const defaultOffBorderColor = Colors_1.basicColors.gray100;
+    const defaultOffIconColor = Colors_1.basicColors.gray100;
+    const disabledOnBorderColor = 'transparent';
+    const disabledOffContainerColor = Colors_1.basicColors.gray25;
+    const disabledOffBorderColor = Colors_1.basicColors.gray50;
+    const disabledOffIconColor = Colors_1.basicColors.gray50;
+    switch (colorType) {
+        case 'gray':
+            return {
+                default: {
+                    on: {
+                        containerColor: Colors_1.basicColors.gray900,
+                        borderColor: defaultOnBorderColor,
+                        iconColor: Colors_1.basicColors.gray900,
+                    },
+                    off: {
+                        containerColor: defaultOffContainerColor,
+                        borderColor: defaultOffBorderColor,
+                        iconColor: defaultOffIconColor,
+                    },
+                },
+                disabled: {
+                    on: {
+                        containerColor: Colors_1.basicColors.gray200,
+                        borderColor: disabledOnBorderColor,
+                        iconColor: Colors_1.basicColors.gray200,
+                    },
+                    off: {
+                        containerColor: disabledOffContainerColor,
+                        borderColor: disabledOffBorderColor,
+                        iconColor: disabledOffIconColor,
+                    },
+                },
+            };
+        default:
+            return {
+                default: {
+                    on: {
+                        containerColor: Colors_1.basicColors[`${colorType}400`],
+                        borderColor: defaultOnBorderColor,
+                        iconColor: Colors_1.basicColors[`${colorType}400`],
+                    },
+                    off: {
+                        containerColor: defaultOffContainerColor,
+                        borderColor: defaultOffBorderColor,
+                        iconColor: defaultOffIconColor,
+                    },
+                },
+                disabled: {
+                    on: {
+                        containerColor: Colors_1.basicColors[`${colorType}100`],
+                        borderColor: disabledOnBorderColor,
+                        iconColor: Colors_1.basicColors[`${colorType}100`],
+                    },
+                    off: {
+                        containerColor: disabledOffContainerColor,
+                        borderColor: disabledOffBorderColor,
+                        iconColor: disabledOffIconColor,
+                    },
+                },
+            };
+    }
+};
+exports.default = checkBoxColorStyle;

package/dist/utils/GenerateColorStyle/control/check-mark.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const Colors_1 = require("../../../core/Colors");
+// fyi. control간 컬러 공유 가능
+const checkMarkColorStyle = (colorType) => {
+    const defaultOffContainerColor = Colors_1.basicColors.gray100;
+    const disabledOffContainerColor = Colors_1.basicColors.gray50;
+    switch (colorType) {
+        case 'gray':
+            return {
+                default: {
+                    on: {
+                        containerColor: Colors_1.basicColors.gray900,
+                    },
+                    off: {
+                        containerColor: defaultOffContainerColor,
+                    },
+                },
+                disabled: {
+                    on: {
+                        containerColor: Colors_1.basicColors.gray200,
+                    },
+                    off: {
+                        containerColor: disabledOffContainerColor,
+                    },
+                },
+            };
+        default:
+            return {
+                default: {
+                    on: {
+                        containerColor: Colors_1.basicColors[`${colorType}400`],
+                    },
+                    off: {
+                        containerColor: defaultOffContainerColor,
+                    },
+                },
+                disabled: {
+                    on: {
+                        containerColor: Colors_1.basicColors[`${colorType}100`],
+                    },
+                    off: {
+                        containerColor: disabledOffContainerColor,
+                    },
+                },
+            };
+    }
+};
+exports.default = checkMarkColorStyle;

package/dist/utils/GenerateColorStyle/control/radio-button.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const Colors_1 = require("../../../core/Colors");
+const radioButtonColorStyle = (colorType) => {
+    const defaultOnContainerColor = 'transparent';
+    const defaultOffContainerColor = 'transparent';
+    const defaultOffBorderColor = Colors_1.basicColors.gray100;
+    const disabledOnContainerColor = 'transparent';
+    const disabledOffContainerColor = Colors_1.basicColors.gray25;
+    const disabledOffBorderColor = Colors_1.basicColors.gray50;
+    switch (colorType) {
+        case 'gray':
+            return {
+                default: {
+                    on: {
+                        containerColor: defaultOnContainerColor,
+                        borderColor: Colors_1.basicColors.gray900,
+                    },
+                    off: {
+                        containerColor: defaultOffContainerColor,
+                        borderColor: defaultOffBorderColor,
+                    },
+                },
+                disabled: {
+                    on: {
+                        containerColor: disabledOnContainerColor,
+                        borderColor: Colors_1.basicColors.gray200,
+                    },
+                    off: {
+                        containerColor: disabledOffContainerColor,
+                        borderColor: disabledOffBorderColor,
+                    },
+                },
+            };
+        default:
+            return {
+                default: {
+                    on: {
+                        containerColor: defaultOnContainerColor,
+                        borderColor: Colors_1.basicColors[`${colorType}400`],
+                    },
+                    off: {
+                        containerColor: defaultOffContainerColor,
+                        borderColor: defaultOffBorderColor,
+                    },
+                },
+                disabled: {
+                    on: {
+                        containerColor: disabledOnContainerColor,
+                        borderColor: Colors_1.basicColors[`${colorType}100`],
+                    },
+                    off: {
+                        containerColor: disabledOffContainerColor,
+                        borderColor: disabledOffBorderColor,
+                    },
+                },
+            };
+    }
+};
+exports.default = radioButtonColorStyle;

package/dist/utils/GenerateColorStyle/control/switch.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const Colors_1 = require("../../../core/Colors");
+const switchColorStyle = (colorType) => {
+    const defaultOnInnerCircleColor = Colors_1.basicColors.white;
+    const defaultOffContainerColor = Colors_1.basicColors.gray100;
+    const defaultOffInnerCircleColor = Colors_1.semanticColors.controlSwitchEnabledOffInnerCircle;
+    const disabledOnInnerCircleColor = Colors_1.semanticColors.controlSwitchDisabledOnInnerCircle;
+    const disabledOffContainerColor = Colors_1.basicColors.gray50;
+    const disabledOffInnerCircleColor = Colors_1.semanticColors.controlSwitchDisabledOffInnerCircle;
+    switch (colorType) {
+        case 'gray':
+            return {
+                default: {
+                    on: {
+                        containerColor: Colors_1.semanticColors.controlGraySwitchEnabledOnContainer,
+                        innerCircleColor: defaultOnInnerCircleColor,
+                    },
+                    off: {
+                        containerColor: defaultOffContainerColor,
+                        innerCircleColor: defaultOffInnerCircleColor,
+                    },
+                },
+                disabled: {
+                    on: {
+                        containerColor: Colors_1.basicColors.gray200,
+                        innerCircleColor: disabledOnInnerCircleColor,
+                    },
+                    off: {
+                        containerColor: disabledOffContainerColor,
+                        innerCircleColor: disabledOffInnerCircleColor,
+                    },
+                },
+            };
+        default:
+            return {
+                default: {
+                    on: {
+                        containerColor: Colors_1.basicColors[`${colorType}400`],
+                        innerCircleColor: defaultOnInnerCircleColor,
+                    },
+                    off: {
+                        containerColor: defaultOffContainerColor,
+                        innerCircleColor: defaultOffInnerCircleColor,
+                    },
+                },
+                disabled: {
+                    on: {
+                        containerColor: Colors_1.basicColors[`${colorType}100`],
+                        innerCircleColor: disabledOnInnerCircleColor,
+                    },
+                    off: {
+                        containerColor: disabledOffContainerColor,
+                        innerCircleColor: disabledOffInnerCircleColor,
+                    },
+                },
+            };
+    }
+};
+exports.default = switchColorStyle;

package/dist/utils/GenerateColorStyle/datepicker.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const Colors_1 = require("../../core/Colors");
+const commonMiniButtonColorStyle = {
+    textColor: Colors_1.basicColors.gray900,
+    focusedTextColor: Colors_1.basicColors.white,
+    disabledTextColor: Colors_1.basicColors.gray100,
+    hoverContainerColor: Colors_1.basicColors.gray50,
+};
+const datepickerColorStyle = (colorType) => {
+    switch (colorType) {
+        case 'gray':
+            return Object.assign(Object.assign({}, commonMiniButtonColorStyle), { focusedContainerColor: Colors_1.basicColors.gray900, rangeContainerColor: Colors_1.basicColors.gray50 });
+        default:
+            return Object.assign(Object.assign({}, commonMiniButtonColorStyle), { focusedContainerColor: Colors_1.basicColors[`${colorType}400`], rangeContainerColor: Colors_1.basicColors[`${colorType}50`] });
+    }
+};
+exports.default = datepickerColorStyle;

package/dist/utils/GenerateColorStyle/index.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tagColorStyle = exports.progressBarColorStyle = exports.fillTabColorStyle = exports.textTabColorStyle = exports.chipColorStyle = exports.checkMarkColorStyle = exports.checkBoxColorStyle = exports.radioButtonColorStyle = exports.switchColorStyle = exports.datepickerColorStyle = exports.miniButtonColorStyle = exports.singleButtonColorStyle = exports.StatusArray = exports.StateArray = exports.PurposeArray = exports.ColorTypeArray = void 0;
+const type_1 = require("./common/type");
+Object.defineProperty(exports, "ColorTypeArray", { enumerable: true, get: function () { return type_1.ColorTypeArray; } });
+Object.defineProperty(exports, "PurposeArray", { enumerable: true, get: function () { return type_1.PurposeArray; } });
+Object.defineProperty(exports, "StateArray", { enumerable: true, get: function () { return type_1.StateArray; } });
+Object.defineProperty(exports, "StatusArray", { enumerable: true, get: function () { return type_1.StatusArray; } });
+var single_button_1 = require("./single-button");
+Object.defineProperty(exports, "singleButtonColorStyle", { enumerable: true, get: function () { return __importDefault(single_button_1).default; } });
+var mini_button_1 = require("./mini-button");
+Object.defineProperty(exports, "miniButtonColorStyle", { enumerable: true, get: function () { return __importDefault(mini_button_1).default; } });
+var datepicker_1 = require("./datepicker");
+Object.defineProperty(exports, "datepickerColorStyle", { enumerable: true, get: function () { return __importDefault(datepicker_1).default; } });
+var switch_1 = require("./control/switch");
+Object.defineProperty(exports, "switchColorStyle", { enumerable: true, get: function () { return __importDefault(switch_1).default; } });
+var radio_button_1 = require("./control/radio-button");
+Object.defineProperty(exports, "radioButtonColorStyle", { enumerable: true, get: function () { return __importDefault(radio_button_1).default; } });
+var check_box_1 = require("./control/check-box");
+Object.defineProperty(exports, "checkBoxColorStyle", { enumerable: true, get: function () { return __importDefault(check_box_1).default; } });
+var check_mark_1 = require("./control/check-mark");
+Object.defineProperty(exports, "checkMarkColorStyle", { enumerable: true, get: function () { return __importDefault(check_mark_1).default; } });
+var chip_1 = require("./chip");
+Object.defineProperty(exports, "chipColorStyle", { enumerable: true, get: function () { return __importDefault(chip_1).default; } });
+var text_tabs_1 = require("./tab/text-tabs");
+Object.defineProperty(exports, "textTabColorStyle", { enumerable: true, get: function () { return __importDefault(text_tabs_1).default; } });
+var fill_tabs_1 = require("./tab/fill-tabs");
+Object.defineProperty(exports, "fillTabColorStyle", { enumerable: true, get: function () { return __importDefault(fill_tabs_1).default; } });
+var progress_bar_1 = require("./progress-bar");
+Object.defineProperty(exports, "progressBarColorStyle", { enumerable: true, get: function () { return __importDefault(progress_bar_1).default; } });
+var tag_1 = require("./tag");
+Object.defineProperty(exports, "tagColorStyle", { enumerable: true, get: function () { return __importDefault(tag_1).default; } });

package/dist/utils/GenerateColorStyle/mini-button.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const Colors_1 = require("../../core/Colors");
+const commonMiniButtonColorStyle = {
+    hoverContainerColor: Colors_1.basicColors.gray50,
+    focusedContainerColor: Colors_1.basicColors.gray100,
+    disabledTextColor: Colors_1.basicColors.gray200,
+};
+const miniButtonColorStyle = (colorType) => {
+    switch (colorType) {
+        case 'gray':
+            return Object.assign(Object.assign({}, commonMiniButtonColorStyle), { textColor: Colors_1.basicColors.gray400, iconColor: Colors_1.basicColors.gray200, iconDisabledColor: Colors_1.basicColors.gray50 });
+        default:
+            return Object.assign(Object.assign({}, commonMiniButtonColorStyle), { textColor: Colors_1.basicColors[`${colorType}400`], iconColor: Colors_1.basicColors[`${colorType}400`], iconDisabledColor: Colors_1.basicColors.gray200 });
+    }
+};
+exports.default = miniButtonColorStyle;

package/dist/utils/GenerateColorStyle/progress-bar.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const Colors_1 = require("../../core/Colors");
+const progressBarColorStyle = (colorType) => {
+    switch (colorType) {
+        default:
+            return {
+                upperColor: Colors_1.basicColors[`${colorType}400`],
+            };
+    }
+};
+exports.default = progressBarColorStyle;

package/dist/utils/GenerateColorStyle/single-button.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const Colors_1 = require("../../core/Colors");
+const mainButtonColorStyle = (colorType) => {
+    let textColor;
+    let disabledTextColor;
+    let defaultContainerColor;
+    let hoverContainerColor;
+    let focusedContainerColor;
+    let disabledContainerColor;
+    switch (colorType) {
+        case 'gray':
+        default:
+            textColor = Colors_1.basicColors.white;
+            disabledTextColor = Colors_1.basicColors.white;
+            break;
+    }
+    switch (colorType) {
+        case 'gray':
+            defaultContainerColor = Colors_1.basicColors.gray900;
+            hoverContainerColor = Colors_1.basicColors.gray700;
+            focusedContainerColor = Colors_1.basicColors.gray800;
+            disabledContainerColor = Colors_1.basicColors.gray100;
+            break;
+        default:
+            defaultContainerColor = Colors_1.basicColors[`${colorType}400`];
+            hoverContainerColor = Colors_1.basicColors[`${colorType}500`];
+            focusedContainerColor = Colors_1.basicColors[`${colorType}600`];
+            disabledContainerColor = Colors_1.basicColors[`${colorType}100`];
+            break;
+    }
+    return {
+        textColor,
+        disabledTextColor,
+        defaultContainerColor,
+        hoverContainerColor,
+        focusedContainerColor,
+        disabledContainerColor,
+    };
+};
+const subButtonColorStyle = (colorType) => {
+    let textColor;
+    let disabledTextColor;
+    let defaultContainerColor;
+    let hoverContainerColor;
+    let focusedContainerColor;
+    let disabledContainerColor;
+    switch (colorType) {
+        case 'gray':
+            textColor = Colors_1.basicColors.gray700;
+            break;
+        default:
+            textColor = Colors_1.basicColors[`${colorType}400`];
+            break;
+    }
+    switch (colorType) {
+        default:
+            disabledTextColor = Colors_1.semanticColorsMethod.buttonSubDisabledText(colorType);
+    }
+    switch (colorType) {
+        case 'gray':
+        default:
+            defaultContainerColor = Colors_1.basicColors[`${colorType}50`];
+            hoverContainerColor = Colors_1.basicColors[`${colorType}100`];
+            focusedContainerColor = Colors_1.basicColors[`${colorType}200`];
+            disabledContainerColor = Colors_1.basicColors[`${colorType}50`];
+    }
+    return {
+        textColor,
+        disabledTextColor,
+        defaultContainerColor,
+        hoverContainerColor,
+        focusedContainerColor,
+        disabledContainerColor,
+    };
+};
+const singleButtonColorStyle = ({ colorType, purpose }) => {
+    switch (purpose) {
+        case 'main':
+            return mainButtonColorStyle(colorType);
+        case 'sub':
+            return subButtonColorStyle(colorType);
+    }
+};
+exports.default = singleButtonColorStyle;

package/dist/utils/GenerateColorStyle/tab/fill-tabs.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const __1 = require("../../..");
+const fillTabColorStyle = (colorType) => {
+    const offTextColor = __1.basicColors.gray700;
+    const offContainerColor = __1.basicColors.gray50;
+    switch (colorType) {
+        case 'gray':
+            return {
+                on: {
+                    textColor: __1.semanticColors.buttonGrayMainAbledText,
+                    containerColor: __1.basicColors.gray700,
+                },
+                off: {
+                    textColor: offTextColor,
+                    containerColor: offContainerColor,
+                },
+            };
+        default:
+            return {
+                on: {
+                    textColor: __1.semanticColors.buttonGrayMainAbledText,
+                    containerColor: __1.basicColors[`${colorType}400`],
+                },
+                off: {
+                    textColor: offTextColor,
+                    containerColor: offContainerColor,
+                },
+            };
+    }
+};
+exports.default = fillTabColorStyle;

package/dist/utils/GenerateColorStyle/tab/text-tabs.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const __1 = require("../../..");
+const textTabColorStyle = (colorType) => {
+    const offTextColor = __1.basicColors.gray100;
+    const offBarColor = 'none';
+    switch (colorType) {
+        case 'gray':
+            return {
+                on: {
+                    textColor: __1.basicColors.gray900,
+                    barColor: __1.basicColors.gray900,
+                },
+                off: {
+                    textColor: offTextColor,
+                    barColor: offBarColor,
+                },
+            };
+        default:
+            return {
+                on: {
+                    textColor: __1.basicColors[`${colorType}400`],
+                    barColor: __1.basicColors[`${colorType}400`],
+                },
+                off: {
+                    textColor: offTextColor,
+                    barColor: offBarColor,
+                },
+            };
+    }
+};
+exports.default = textTabColorStyle;

package/dist/utils/GenerateColorStyle/tag.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const Colors_1 = require("../../core/Colors");
+const tintTagColorStyle = (colorType) => {
+    switch (colorType) {
+        case 'gray':
+            return {
+                backgroundColor: Colors_1.basicColors.gray50,
+                textColor: Colors_1.basicColors.gray600,
+            };
+        default:
+            return {
+                backgroundColor: Colors_1.basicColors[`${colorType}50`],
+                textColor: Colors_1.basicColors[`${colorType}400`],
+            };
+    }
+};
+const fillTagColorStyle = (colorType) => {
+    switch (colorType) {
+        case 'gray':
+            return {
+                backgroundColor: Colors_1.basicColors.gray600,
+                textColor: Colors_1.basicColors.gray5,
+            };
+        default:
+            return {
+                backgroundColor: Colors_1.basicColors[`${colorType}400`],
+                textColor: Colors_1.basicColors.gray5,
+            };
+    }
+};
+const tagColorStyle = ({ type, colorType }) => {
+    switch (type) {
+        case 'tint':
+            return tintTagColorStyle(colorType);
+        case 'fill':
+            return fillTagColorStyle(colorType);
+    }
+};
+exports.default = tagColorStyle;

package/dist/utils/format.util.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatKoreaCurrency = exports.extractNumber = exports.numberAccept = void 0;
+exports.numberAccept = /[\d]+/g;
+const extractNumber = (val) => (val.match(exports.numberAccept) || []).join('');
+exports.extractNumber = extractNumber;
+const formatKoreaCurrency = (val) => {
+    if (!val) {
+        return val;
+    }
+    const parsed = (0, exports.extractNumber)(val);
+    const number = Number.parseFloat(parsed);
+    return number.toLocaleString('kr-KO');
+};
+exports.formatKoreaCurrency = formatKoreaCurrency;

package/dist/utils/index.js

@@ -0,0 +1,19 @@
+"use strict";
+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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./media.util"), exports);
+__exportStar(require("./format.util"), exports);
+__exportStar(require("./GenerateColorStyle"), exports);

package/dist/utils/media.util.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BetweenPcAndMobile = exports.Between = exports.Larger = exports.Smaller = exports.MediaQuerySize = void 0;
+const react_1 = require("@emotion/react");
+exports.MediaQuerySize = {
+    Mobile: 768,
+    PC: 1024,
+};
+const Smaller = (style) => (0, react_1.css) `
+	@media (max-width: ${exports.MediaQuerySize.Mobile}px) {
+		${style}
+	}
+`;
+exports.Smaller = Smaller;
+const Larger = (style) => (0, react_1.css) `
+	@media (min-width: ${exports.MediaQuerySize.Mobile + 1}px) {
+		${style}
+	}
+`;
+exports.Larger = Larger;
+const Between = (style) => (0, react_1.css) `
+	@media (min-width: ${exports.MediaQuerySize.Mobile + 1}px) and (max-width: ${exports.MediaQuerySize.PC + 30}px) {
+		${style}
+	}
+`;
+exports.Between = Between;
+const BetweenPcAndMobile = (PcStyle, MobileStyle) => (0, react_1.css) `
+	@media (min-width: ${exports.MediaQuerySize.Mobile + 1}px) {
+		${PcStyle}
+	}
+	@media (max-width: ${exports.MediaQuerySize.Mobile}px) {
+		${MobileStyle}
+	}
+`;
+exports.BetweenPcAndMobile = BetweenPcAndMobile;

package/dist/utils/uuid.util.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.uuid = void 0;
+// uuidv4
+const uuid = () => {
+    return (String([1e7]) + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (ch) => {
+        const c = Number(ch);
+        return (c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16);
+    });
+};
+exports.uuid = uuid;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pfct/purple",
-	"version": "1.4.0-rc.6",
+	"version": "1.4.0-rc.7",
 	"description": "design system for PFCT web service",
 	"exports": {
 		".": {
@@ -105,7 +105,7 @@
 		"css-loader": "^6.7.1",
 		"css-minimizer-webpack-plugin": "^4.0.0",
 		"eslint-plugin-prettier": "^5.2.4",
-		"eslint-plugin-storybook": "^0.11.6",
+		"eslint-plugin-storybook": "^0.12.0",
 		"glob": "^11.0.1",
 		"html-webpack-plugin": "^5.5.0",
 		"husky": "^9.1.7",
@@ -141,7 +141,7 @@
 		"@emotion/babel-preset-css-prop": "^11.11.0",
 		"@emotion/eslint-plugin": "^11.7.0",
 		"@testing-library/jest-dom": "^5.16.5",
-		"@testing-library/react": "^14.0.0",
+		"@testing-library/react": "^15.0.7",
 		"@testing-library/user-event": "^14.4.3",
 		"@typescript-eslint/eslint-plugin": "^5.23.0",
 		"@typescript-eslint/parser": "^5.30.0",