maru_design2 2.26.10 → 2.27.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## [2.27.0](https://github.com/42maru-ai/maru-design2/compare/v2.26.11...v2.27.0) (2025-07-21)
+
+
+### Features
+
+* :sparkles: ICON - ADD copy ([31546b5](https://github.com/42maru-ai/maru-design2/commit/31546b5cc64d7e4b080a3c7be83ada104a58e8d7))
+
+
+### Bug Fixes
+
+* :bug: Input - fix end node wrapper margin left logic ([8fd1646](https://github.com/42maru-ai/maru-design2/commit/8fd164691623c49f93142fc5782d06cfaf050f22))
+* :lipstick: Input - update margin between text and x ([3649897](https://github.com/42maru-ai/maru-design2/commit/3649897fdf62f264a461ac358b5b80e8c7bfdd94))
+
+## [2.26.11](https://github.com/42maru-ai/maru-design2/compare/v2.26.10...v2.26.11) (2025-07-14)
+
+
+### Bug Fixes
+
+* :bento: Icon - add Download02_s2413 [#402](https://github.com/42maru-ai/maru-design2/issues/402) ([b31ba53](https://github.com/42maru-ai/maru-design2/commit/b31ba53eab4d9e73cacf78229028a5444d095b2a))
+
 ## [2.26.10](https://github.com/42maru-ai/maru-design2/compare/v2.26.9...v2.26.10) (2025-07-11)
 
 

package/dist/components/atoms/icon/iconmap.d.ts

@@ -182,6 +182,7 @@ export declare const ICONS: {
     readonly Download01_s1313: "Download01_s1313";
     readonly Download01_s1413: "Download01_s1413";
     readonly Download01_s1613: "Download01_s1613";
+    readonly Download02_s2413: "Download02_s2413";
     readonly Downstream_s1310: "Downstream_s1310";
     readonly Downstream_s1410: "Downstream_s1410";
     readonly Downstream_s2410: "Downstream_s2410";

package/dist/index.js

@@ -2952,6 +2952,21 @@ var iconmap = {
     "circles": [],
     "rects": []
   },
+  "Download02_s2413": {
+    "width": "24",
+    "height": "24",
+    "viewBox": "0 0 24 24",
+    "fill": "none",
+    "paths": [{
+      "d": "M20 20H4M17.3333 11.1111L12 16.4444M12 16.4444L6.66667 11.1111M12 16.4444V4",
+      "stroke": "#8C8C8C",
+      "strokeWidth": "1.3",
+      "strokeLinecap": "round",
+      "strokeLinejoin": "round"
+    }],
+    "circles": [],
+    "rects": []
+  },
   "Downstream_s1310": {
     "width": "13",
     "height": "13",
@@ -7064,6 +7079,7 @@ var ICONS = {
   "Download01_s1313": "Download01_s1313",
   "Download01_s1413": "Download01_s1413",
   "Download01_s1613": "Download01_s1613",
+  "Download02_s2413": "Download02_s2413",
   "Downstream_s1310": "Downstream_s1310",
   "Downstream_s1410": "Downstream_s1410",
   "Downstream_s2410": "Downstream_s2410",
@@ -69642,7 +69658,7 @@ function Code(_a) {
   }));
 }
 
-var css_248z$g = ".maru-input-wrapper .maru-input-label {\n  margin-bottom: 8px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n}\n.maru-input-wrapper .maru-input-label label {\n  color: #5c5c5c;\n}\n.maru-input-wrapper .maru-input {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  flex-direction: row;\n  height: 37px;\n  padding: 8px 10px 8px 14px;\n  border: 1px solid #e4e4e4;\n  border-radius: 6px;\n  position: relative;\n  z-index: 0;\n}\n.maru-input-wrapper .maru-input .persistent-placeholder {\n  position: absolute;\n  z-index: -1;\n}\n.maru-input-wrapper .maru-input .persistent-placeholder > span {\n  color: #8c8c8c;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 300;\n}\n.maru-input-wrapper .maru-input .persistent-placeholder > span[data-hidden] {\n  visibility: hidden;\n}\n.maru-input-wrapper .maru-input > input {\n  width: 100%;\n  border: unset;\n  outline: unset;\n  background-color: transparent;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 400;\n  color: #5c5c5c;\n  padding: unset;\n}\n.maru-input-wrapper .maru-input > input::-webkit-input-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-input-wrapper .maru-input > input::-moz-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-input-wrapper .maru-input > input:-ms-input-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-input-wrapper .maru-input > input::-ms-input-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-input-wrapper .maru-input > input::placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-input-wrapper .maru-input:focus-visible, .maru-input-wrapper .maru-input:focus-within {\n  border-color: #5c5c5c;\n  background-color: rgba(228, 228, 228, 0.2);\n}\n.maru-input-wrapper .maru-input.errored {\n  outline: 1px solid #e53e3e;\n  border-color: #e53e3e;\n}\n.maru-input-wrapper .maru-input:hover {\n  outline: 1px solid #e4e4e4;\n  border-color: #e4e4e4;\n  background-color: rgba(228, 228, 228, 0.2);\n}\n.maru-input-wrapper .maru-input.disabled {\n  background-color: #fafafa;\n}\n.maru-input-wrapper .maru-input.disabled > input {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled > input::-webkit-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled > input::-moz-placeholder {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled > input:-ms-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled > input::-ms-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled > input::placeholder {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled:hover {\n  outline: unset;\n}\n.maru-input-wrapper .maru-input-start-node {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  margin-right: 10px;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  gap: 6px;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper > button {\n  padding: unset;\n  margin: unset;\n  border: unset;\n  background-color: unset;\n  cursor: pointer;\n  display: flex;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper .maru-input-end-node {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-input-wrapper .maru-input-footer {\n  display: block;\n  margin-top: 4px;\n}\n.maru-input-wrapper .maru-input-footer > span {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 12px;\n  letter-spacing: -0.48px;\n  font-weight: 500;\n  color: #e53e3e;\n  font-weight: 400;\n}";
+var css_248z$g = ".maru-input-wrapper .maru-input-label {\n  margin-bottom: 8px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n}\n.maru-input-wrapper .maru-input-label label {\n  color: #5c5c5c;\n}\n.maru-input-wrapper .maru-input {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  flex-direction: row;\n  height: 37px;\n  padding: 8px 10px 8px 14px;\n  border: 1px solid #e4e4e4;\n  border-radius: 6px;\n  position: relative;\n  z-index: 0;\n}\n.maru-input-wrapper .maru-input .persistent-placeholder {\n  position: absolute;\n  z-index: -1;\n}\n.maru-input-wrapper .maru-input .persistent-placeholder > span {\n  color: #8c8c8c;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 300;\n}\n.maru-input-wrapper .maru-input .persistent-placeholder > span[data-hidden] {\n  visibility: hidden;\n}\n.maru-input-wrapper .maru-input > input {\n  width: 100%;\n  border: unset;\n  outline: unset;\n  background-color: transparent;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 400;\n  color: #5c5c5c;\n  padding: unset;\n}\n.maru-input-wrapper .maru-input > input::-webkit-input-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-input-wrapper .maru-input > input::-moz-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-input-wrapper .maru-input > input:-ms-input-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-input-wrapper .maru-input > input::-ms-input-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-input-wrapper .maru-input > input::placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-input-wrapper .maru-input:focus-visible, .maru-input-wrapper .maru-input:focus-within {\n  border-color: #5c5c5c;\n  background-color: rgba(228, 228, 228, 0.2);\n}\n.maru-input-wrapper .maru-input.errored {\n  outline: 1px solid #e53e3e;\n  border-color: #e53e3e;\n}\n.maru-input-wrapper .maru-input:hover {\n  outline: 1px solid #e4e4e4;\n  border-color: #e4e4e4;\n  background-color: rgba(228, 228, 228, 0.2);\n}\n.maru-input-wrapper .maru-input.disabled {\n  background-color: #fafafa;\n}\n.maru-input-wrapper .maru-input.disabled > input {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled > input::-webkit-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled > input::-moz-placeholder {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled > input:-ms-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled > input::-ms-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled > input::placeholder {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled:hover {\n  outline: unset;\n}\n.maru-input-wrapper .maru-input-start-node {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  margin-right: 10px;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  gap: 6px;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper > button {\n  padding: unset;\n  margin: unset;\n  border: unset;\n  background-color: unset;\n  cursor: pointer;\n  display: flex;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper .maru-input-end-node {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper.maru-input-end-node-margin {\n  margin-left: 8px;\n}\n.maru-input-wrapper .maru-input-footer {\n  display: block;\n  margin-top: 4px;\n}\n.maru-input-wrapper .maru-input-footer > span {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 12px;\n  letter-spacing: -0.48px;\n  font-weight: 500;\n  color: #e53e3e;\n  font-weight: 400;\n}";
 styleInject(css_248z$g);
 
 var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
@@ -69847,7 +69863,14 @@ var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
         onBlur: handleInputBlur,
         placeholder: persistentPlaceholder ? undefined : props.placeholder
       })), jsxs("div", __assign({
-        className: "maru-input-end-node-wrapper"
+        className: classNames('maru-input-end-node-wrapper', {
+          // 셋 중 뭐라도 있으면 margin-left: 8px;
+          'maru-input-end-node-margin': type === 'password' && !props.disabled ||
+          // password 버튼이 있거나
+          showClearButton && !props.disabled ||
+          // X 버튼이 있거나
+          endNode // 추가 노드가 있거나
+        })
       }, {
         children: [type === 'password' && !props.disabled && jsx("button", __assign({
           type: "button",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "maru_design2",
-  "version": "2.26.10",
+  "version": "2.27.0",
   "main": "./dist/index.js",
   "author": "zena-42maru",
   "license": "MIT",