maru_design2 2.26.11 → 2.27.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/index.js +9 -2
  3. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # Changelog
2
2
 
3
+ ## [2.27.0](https://github.com/42maru-ai/maru-design2/compare/v2.26.11...v2.27.0) (2025-07-21)
4
+
5
+
6
+ ### Features
7
+
8
+ * :sparkles: ICON - ADD copy ([31546b5](https://github.com/42maru-ai/maru-design2/commit/31546b5cc64d7e4b080a3c7be83ada104a58e8d7))
9
+
10
+
11
+ ### Bug Fixes
12
+
13
+ * :bug: Input - fix end node wrapper margin left logic ([8fd1646](https://github.com/42maru-ai/maru-design2/commit/8fd164691623c49f93142fc5782d06cfaf050f22))
14
+ * :lipstick: Input - update margin between text and x ([3649897](https://github.com/42maru-ai/maru-design2/commit/3649897fdf62f264a461ac358b5b80e8c7bfdd94))
15
+
3
16
  ## [2.26.11](https://github.com/42maru-ai/maru-design2/compare/v2.26.10...v2.26.11) (2025-07-14)
4
17
 
5
18
 
package/dist/index.js CHANGED
@@ -69658,7 +69658,7 @@ function Code(_a) {
69658
69658
  }));
69659
69659
  }
69660
69660
 
69661
- 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}";
69661
+ 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}";
69662
69662
  styleInject(css_248z$g);
69663
69663
 
69664
69664
  var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
@@ -69863,7 +69863,14 @@ var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
69863
69863
  onBlur: handleInputBlur,
69864
69864
  placeholder: persistentPlaceholder ? undefined : props.placeholder
69865
69865
  })), jsxs("div", __assign({
69866
- className: "maru-input-end-node-wrapper"
69866
+ className: classNames('maru-input-end-node-wrapper', {
69867
+ // 셋 중 뭐라도 있으면 margin-left: 8px;
69868
+ 'maru-input-end-node-margin': type === 'password' && !props.disabled ||
69869
+ // password 버튼이 있거나
69870
+ showClearButton && !props.disabled ||
69871
+ // X 버튼이 있거나
69872
+ endNode // 추가 노드가 있거나
69873
+ })
69867
69874
  }, {
69868
69875
  children: [type === 'password' && !props.disabled && jsx("button", __assign({
69869
69876
  type: "button",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "maru_design2",
3
- "version": "2.26.11",
3
+ "version": "2.27.0",
4
4
  "main": "./dist/index.js",
5
5
  "author": "zena-42maru",
6
6
  "license": "MIT",