pds-dev-kit-web 0.6.9 → 0.6.12

package/README.md

@@ -8,5 +8,5 @@ publ design system 프로젝트
 
 ## 참고 문서
 
-해당 패키지 버전은 PDS 문서 1.1 버전을 따르고 있음
+해당 패키지 버전은 PDS 문서 1.2 버전을 따르고 있음
 [PDS 1.1 문서 링크](https://design.docs.publ.biz/pds-project/)

package/dist/src/desktop/components/FloatingActionButton/FloatingActionButton.js

@@ -38,7 +38,7 @@ var TextLabel_1 = require("../TextLabel");
 // displayType?: 'icon_only' | 'text_only' | 'icon_text';
 // state?: 'normal' | 'disabled';
 function FloatingActionButton(_a) {
-    var text = _a.text, _b = _a.displayType, displayType = _b === void 0 ? 'icon_text' : _b, _c = _a.size, size = _c === void 0 ? 'large' : _c, fontWeight = _a.fontWeight, _d = _a.iconFillType, iconFillType = _d === void 0 ? 'line' : _d, iconName = _a.iconName, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'none' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
+    var text = _a.text, _b = _a.displayType, displayType = _b === void 0 ? 'icon_text' : _b, _c = _a.size, size = _c === void 0 ? 'large' : _c, _d = _a.fontWeight, fontWeight = _d === void 0 ? 'bold' : _d, _e = _a.iconFillType, iconFillType = _e === void 0 ? 'line' : _e, iconName = _a.iconName, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'none' : _f, _g = _a.state, state = _g === void 0 ? 'normal' : _g, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
     var handleClick = function () {
         if (onClick) {
             onClick();
@@ -56,14 +56,14 @@ function FloatingActionButton(_a) {
         return 'ui_cpnt_button_icon_on_primary';
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        displayType === 'icon_only' && (react_1.default.createElement(S_ButtonIconOnly, { size: size, fontWeight: fontWeight, colorTheme: colorTheme, state: state, disabled: state === 'disabled', onClick: handleClick, onMouseDown: handleMouseDown },
+        displayType === 'icon_only' && (react_1.default.createElement(S_ButtonIconOnly, { size: size, colorTheme: colorTheme, state: state, disabled: state === 'disabled', onClick: handleClick, onMouseDown: handleMouseDown },
             react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' ? 20 : 24, colorKey: iconColor(), fillType: iconFillType }))),
-        displayType !== 'icon_only' && (react_1.default.createElement(S_Button, { size: size, fontWeight: fontWeight, colorTheme: colorTheme, state: state, disabled: state === 'disabled', onClick: handleClick, onMouseDown: handleMouseDown },
-            displayType === 'text_only' && (react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "body1Bold", singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'usrTextBrandOnPrimary', colorOverride: state === 'disabled' ? 'ui_cpnt_button_text_darktheme_disabled' : undefined })),
+        displayType !== 'icon_only' && (react_1.default.createElement(S_Button, { size: size, colorTheme: colorTheme, state: state, disabled: state === 'disabled', onClick: handleClick, onMouseDown: handleMouseDown },
+            displayType === 'text_only' && (react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: fontWeight === 'regular' ? 'body1Regular' : 'body1Bold', singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'usrTextBrandOnPrimary', colorOverride: state === 'disabled' ? 'ui_cpnt_button_text_darktheme_disabled' : undefined })),
             displayType === 'icon_text' && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: 20, colorKey: iconColor(), fillType: iconFillType }),
                 react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
-                react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "body1Bold", singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'usrTextBrandOnPrimary', colorOverride: state === 'disabled' ? 'ui_cpnt_button_text_darktheme_disabled' : undefined })))))));
+                react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: fontWeight === 'regular' ? 'body1Regular' : 'body1Bold', singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'usrTextBrandOnPrimary', colorOverride: state === 'disabled' ? 'ui_cpnt_button_text_darktheme_disabled' : undefined })))))));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 24px;\n  height: 48px;\n  width: 48px;\n"], ["\n  border-radius: 24px;\n  height: 48px;\n  width: 48px;\n"])));
 var xlarge = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 32px;\n  height: 64px;\n  width: 64px;\n"], ["\n  border-radius: 32px;\n  height: 64px;\n  width: 64px;\n"])));
@@ -71,7 +71,7 @@ var disabled = (0, styled_components_1.css)(templateObject_3 || (templateObject_
     var theme = _a.theme;
     return theme.ui_cpnt_button_fill_base_disabled;
 });
-var floatingActionButtonStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: none;\n  bottom: 24px;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  position: fixed;\n  right: 24px;\n  /* NOTE : \uB808\uC774\uC5B4 \uB3C4\uC785 \uD6C4 \uC81C\uAC70\uB420 \uAC00\uB2A5\uC131 \uB18D\uD6C4 */\n  z-index: 101;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", "\n\n  & > div {\n    ", ";\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: none;\n  bottom: 24px;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  position: fixed;\n  right: 24px;\n  /* NOTE : \uB808\uC774\uC5B4 \uB3C4\uC785 \uD6C4 \uC81C\uAC70\uB420 \uAC00\uB2A5\uC131 \uB18D\uD6C4 */\n  z-index: 101;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", "\n\n  & > div {\n    ", ";\n  }\n"])), function (_a) {
+var floatingActionButtonStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: none;\n  bottom: 24px;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  position: fixed;\n  right: 24px;\n  /* NOTE : \uB808\uC774\uC5B4 \uB3C4\uC785 \uD6C4 \uC81C\uAC70\uB420 \uAC00\uB2A5\uC131 \uB18D\uD6C4 */\n  z-index: 101;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", "\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: none;\n  bottom: 24px;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  position: fixed;\n  right: 24px;\n  /* NOTE : \uB808\uC774\uC5B4 \uB3C4\uC785 \uD6C4 \uC81C\uAC70\uB420 \uAC00\uB2A5\uC131 \uB18D\uD6C4 */\n  z-index: 101;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_fill_base_primary;
 }, function (_a) {
@@ -86,13 +86,6 @@ var floatingActionButtonStyle = (0, styled_components_1.css)(templateObject_4 ||
 }, function (_a) {
     var state = _a.state;
     return state === 'disabled' && disabled;
-}, function (_a) {
-    var theme = _a.theme, fontWeight = _a.fontWeight;
-    return fontWeight &&
-        {
-            bold: "font-weight: " + theme.fontWeight.bold,
-            regular: "font-weight: " + theme.fontWeight.normal
-        }[fontWeight];
 });
 var S_ButtonIconOnly = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  padding: none;\n  ", ";\n  ", ";\n"], ["\n  padding: none;\n  ", ";\n  ", ";\n"])), floatingActionButtonStyle, function (_a) {
     var size = _a.size;

package/dist/src/desktop/components/Select/Select.js

@@ -29,7 +29,9 @@ var hybrid_1 = require("../../../hybrid");
 function Select(_a) {
     var hintText = _a.hintText, defaultValue = _a.defaultValue, valueArray = _a.valueArray, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, _d = _a.state, state = _d === void 0 ? 'normal' : _d, onChange = _a.onChange, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'none' : _e;
     var _f = (0, react_1.useState)(false), isFocused = _f[0], setIsFocused = _f[1];
-    var handleClick = function () { return setIsFocused(true); };
+    var handleClick = function () {
+        state === 'normal' && setIsFocused(true);
+    };
     var handleBlur = function () { return setIsFocused(false); };
     var handleChange = function (e) {
         setIsFocused(false);
@@ -54,7 +56,8 @@ function Select(_a) {
         }
     };
     return (react_1.default.createElement(S_Box, { size: size, responsiveMode: responsiveMode, onClick: handleClick, onBlur: handleBlur, tabIndex: 0 },
-        react_1.default.createElement(S_Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getIconColorKey() }),
+        react_1.default.createElement(S_Icon_Wrapper, { state: state },
+            react_1.default.createElement(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getIconColorKey() })),
         react_1.default.createElement(S_Select, { disabled: state === 'disabled' || state === 'read_only', defaultValue: (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) || '', state: state, colorTheme: colorTheme, onChange: handleChange },
             react_1.default.createElement("option", { disabled: true, value: (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) || '' }, (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) || hintText),
             valueArray.map(function (el) { return (react_1.default.createElement("option", { key: el.value, value: el.value }, el.text)); }))));
@@ -100,9 +103,12 @@ var S_Box = styled_components_1.default.div(templateObject_6 || (templateObject_
     var responsiveMode = _a.responsiveMode;
     return responsiveMode === 'use' && 'width: 100%';
 });
-var S_Icon = (0, styled_components_1.default)(hybrid_1.Icon)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: 2;\n"], ["\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: 2;\n"])), function (_a) {
+var S_Icon_Wrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 16px;\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n  width: 16px;\n  ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  height: 16px;\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n  width: 16px;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingD;
+}, function (_a) {
+    var state = _a.state;
+    return state === 'normal' && 'z-index: -1';
 });
 var S_Select = styled_components_1.default.select(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  appearance: none;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  color: ", ";\n  font-family: inherit;\n  font-size: ", ";\n  height: 100%;\n  padding-left: ", ";\n  width: 100%;\n\n  :disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  :focus {\n    border: 0.5px solid ", " !important;\n    color: ", ";\n    outline: 0 !important;\n    outline-offset: 0 !important;\n  }\n\n  ", "\n"], ["\n  appearance: none;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  color: ", ";\n  font-family: inherit;\n  font-size: ", ";\n  height: 100%;\n  padding-left: ", ";\n  width: 100%;\n\n  :disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  :focus {\n    border: 0.5px solid ", " !important;\n    color: ", ";\n    outline: 0 !important;\n    outline-offset: 0 !important;\n  }\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.js

@@ -3,12 +3,31 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
+var styled_components_1 = __importStar(require("styled-components"));
 var Containers_1 = require("../Containers");
 var ContainersBox = function (_a) {
     var layoutType = _a.layoutType, pageMenuContent = _a.pageMenuContent, tabMenuContent = _a.tabMenuContent, subMenuContent = _a.subMenuContent, content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor;
@@ -167,12 +186,13 @@ var ContainersBox = function (_a) {
 };
 var S_ContainersBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  display: flex;\n  height: 100%;\n"], ["\n  align-items: flex-start;\n  display: flex;\n  height: 100%;\n"])));
 var S_RightBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  height: 100%;\n"], ["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  height: 100%;\n"])));
-var S_BottomWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  // TODO: WTO_1\uC640 WTP_1\uC720\uD615\uC744 \uC704\uD574 \uC784\uC2DC\uB85C backgroundColor\uB97C \uBD80\uC5EC\uD55C \uC0C1\uD0DC. \uD574\uB2F9 \uBD80\uBD84 \uAE30\uD68D \uCCA0\uD559 \uAC1C\uC120\uC774 \uB418\uBA74 \uBCC0\uACBD\uB418\uC5B4\uC57C \uD568.\n  background-color: ", ";\n  flex: 1;\n  height: 100%;\n  overflow: hidden;\n  ", ";\n"], ["\n  // TODO: WTO_1\uC640 WTP_1\uC720\uD615\uC744 \uC704\uD574 \uC784\uC2DC\uB85C backgroundColor\uB97C \uBD80\uC5EC\uD55C \uC0C1\uD0DC. \uD574\uB2F9 \uBD80\uBD84 \uAE30\uD68D \uCCA0\uD559 \uAC1C\uC120\uC774 \uB418\uBA74 \uBCC0\uACBD\uB418\uC5B4\uC57C \uD568.\n  background-color: ", ";\n  flex: 1;\n  height: 100%;\n  overflow: hidden;\n  ", ";\n"])), function (_a) {
+var centerStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  // TODO: WTO_1\uC640 WTP_1\uC720\uD615\uC744 \uC704\uD574 \uC784\uC2DC\uB85C backgroundColor\uB97C \uBD80\uC5EC\uD55C \uC0C1\uD0DC. \uD574\uB2F9 \uBD80\uBD84 \uAE30\uD68D \uCCA0\uD559 \uAC1C\uC120\uC774 \uB418\uBA74 \uBCC0\uACBD\uB418\uC5B4\uC57C \uD568.\n  background-color: ", ";\n"], ["\n  display: flex;\n  justify-content: center;\n  // TODO: WTO_1\uC640 WTP_1\uC720\uD615\uC744 \uC704\uD574 \uC784\uC2DC\uB85C backgroundColor\uB97C \uBD80\uC5EC\uD55C \uC0C1\uD0DC. \uD574\uB2F9 \uBD80\uBD84 \uAE30\uD68D \uCCA0\uD559 \uAC1C\uC120\uC774 \uB418\uBA74 \uBCC0\uACBD\uB418\uC5B4\uC57C \uD568.\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_contentscontainer01_background;
-}, function (_a) {
+});
+var S_BottomWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex: 1;\n  height: 100%;\n  overflow: hidden;\n  ", ";\n"], ["\n  flex: 1;\n  height: 100%;\n  overflow: hidden;\n  ", ";\n"])), function (_a) {
     var layoutType = _a.layoutType;
-    return (layoutType === 'WTO_1' || 'WTP_1') && 'display: flex; justify-content: center;';
+    return (layoutType === 'WTO_1' || layoutType === 'WTP_1' ? centerStyle : '');
 });
 exports.default = ContainersBox;
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/mobile/components/MobileHeaderBar/MobileHeaderBar.js

@@ -79,6 +79,7 @@ function MobileHeaderBar(_a) {
         react_1.default.createElement(S_ButtonWrapper, null,
             titleType === 'profile' && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a" }),
             leftIcon()),
+        displayType === 'ibtn_amount2' && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" }),
         react_1.default.createElement(S_Title, null, title()),
         react_1.default.createElement(S_ButtonWrapper, null,
             titleType === 'profile' && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a" }),

package/dist/src/mobile/components/Select/Select.js

@@ -29,7 +29,9 @@ var hybrid_1 = require("../../../hybrid");
 function Select(_a) {
     var hintText = _a.hintText, defaultValue = _a.defaultValue, valueArray = _a.valueArray, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, _d = _a.state, state = _d === void 0 ? 'normal' : _d, onChange = _a.onChange, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'none' : _e;
     var _f = (0, react_1.useState)(false), isFocused = _f[0], setIsFocused = _f[1];
-    var handleClick = function () { return setIsFocused(true); };
+    var handleClick = function () {
+        state === 'normal' && setIsFocused(true);
+    };
     var handleBlur = function () { return setIsFocused(false); };
     var handleChange = function (e) {
         setIsFocused(false);
@@ -50,7 +52,8 @@ function Select(_a) {
         return 'ui_cpnt_select_icon_01';
     };
     return (react_1.default.createElement(S_Box, { size: size, responsiveMode: responsiveMode, onClick: handleClick, onBlur: handleBlur, tabIndex: 0 },
-        react_1.default.createElement(S_Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getIconColorKey() }),
+        react_1.default.createElement(S_Icon_Wrapper, { state: state },
+            react_1.default.createElement(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getIconColorKey() })),
         react_1.default.createElement(S_Select, { disabled: state === 'disabled' || state === 'read_only', defaultValue: (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) || '', state: state, colorTheme: colorTheme, onChange: handleChange },
             react_1.default.createElement("option", { disabled: true, value: (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) || '' }, (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) || hintText),
             valueArray.map(function (el) { return (react_1.default.createElement("option", { key: el.value, value: el.value }, el.text)); }))));
@@ -96,9 +99,12 @@ var S_Box = styled_components_1.default.div(templateObject_6 || (templateObject_
     var responsiveMode = _a.responsiveMode;
     return responsiveMode === 'use' && 'width: 100%';
 });
-var S_Icon = (0, styled_components_1.default)(hybrid_1.Icon)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: 2;\n"], ["\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: 2;\n"])), function (_a) {
+var S_Icon_Wrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 16px;\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n  width: 16px;\n  ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  height: 16px;\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n  width: 16px;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingD;
+}, function (_a) {
+    var state = _a.state;
+    return state === 'normal' && 'z-index: -1';
 });
 var S_Select = styled_components_1.default.select(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  appearance: none;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  color: ", ";\n  font-family: inherit;\n  font-size: ", ";\n  height: 100%;\n  padding-left: ", ";\n  width: 100%;\n\n  :disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  :focus {\n    border: 0.5px solid ", " !important;\n    color: ", ";\n    outline: 0 !important;\n    outline-offset: 0 !important;\n  }\n\n  ", "\n"], ["\n  appearance: none;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  color: ", ";\n  font-family: inherit;\n  font-size: ", ";\n  height: 100%;\n  padding-left: ", ";\n  width: 100%;\n\n  :disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  :focus {\n    border: 0.5px solid ", " !important;\n    color: ", ";\n    outline: 0 !important;\n    outline-offset: 0 !important;\n  }\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web",
-  "version": "0.6.9",
+  "version": "0.6.12",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",

package/release-note.md

@@ -1,5 +1,7 @@
 # UW Release Notes
-## [v0.6.9]
+## [v0.6.12]
 
-### Color
-* 컬러 키 값 22.03.24 오후 14시 35분 기준 싱크
+### Component
+* Select
+  * 화살표 아이콘의 위치가 안 맞는 문제 수정
+  * read_only와 disabled일때 클릭이 되는 문제 수정