@shoplflow/base 0.11.4 → 0.12.0

package/dist/index.cjs

@@ -537,11 +537,7 @@ function _templateObject34() {
 }
 function _templateObject35() {
     var data = _tagged_template_literal([
-        "\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: ",
-        ";\n  border-radius: ",
-        ";\n  padding: 0px ",
-        ";\n  border-radius: ",
-        ";\n  cursor: pointer;\n  ",
+        "\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  padding: 0 12px;\n  border-radius: 6px;\n  cursor: pointer;\n  ",
         ";\n  ",
         ";\n  ",
         ";\n"
@@ -553,7 +549,7 @@ function _templateObject35() {
 }
 function _templateObject36() {
     var data = _tagged_template_literal([
-        "\n        width: 40px;\n        height: 40px;\n      "
+        "\n        width: 40px;\n        min-width: 40px;\n        height: 40px;\n        min-height: 40px;\n      "
     ]);
     _templateObject36 = function _templateObject() {
         return data;
@@ -562,7 +558,7 @@ function _templateObject36() {
 }
 function _templateObject37() {
     var data = _tagged_template_literal([
-        "\n        width: 32px;\n        height: 32px;\n      "
+        "\n        width: 32px;\n        min-width: 32px;\n        height: 32px;\n        min-height: 32px;\n      "
     ]);
     _templateObject37 = function _templateObject() {
         return data;
@@ -571,7 +567,7 @@ function _templateObject37() {
 }
 function _templateObject38() {
     var data = _tagged_template_literal([
-        "\n        width: 40px;\n        height: 40px;\n      "
+        "\n        width: 40px;\n        min-width: 40px;\n        height: 40px;\n        min-height: 40px;\n      "
     ]);
     _templateObject38 = function _templateObject() {
         return data;
@@ -580,8 +576,9 @@ function _templateObject38() {
 }
 function _templateObject39() {
     var data = _tagged_template_literal([
-        "\n      border: 1px solid ",
-        ";\n    "
+        "\n        border: 1px solid ",
+        ";\n        &:hover {\n          background-color: ",
+        ";\n        }\n      "
     ]);
     _templateObject39 = function _templateObject() {
         return data;
@@ -590,8 +587,8 @@ function _templateObject39() {
 }
 function _templateObject40() {
     var data = _tagged_template_literal([
-        "\n        border: 1px solid ",
-        ";\n      "
+        "\n        border: 1px solid transparent;\n        &:hover {\n          background-color: ",
+        ";\n        }\n      "
     ]);
     _templateObject40 = function _templateObject() {
         return data;
@@ -599,71 +596,233 @@ function _templateObject40() {
     return data;
 }
 function _templateObject41() {
+    var data = _tagged_template_literal([
+        "\n        border: 1px solid ",
+        ";\n        &:hover {\n          background-color: ",
+        ";\n        }\n      "
+    ]);
+    _templateObject41 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject42() {
     var data = _tagged_template_literal([
         "\n  display: flex;\n  flex-shrink: 0;\n  border-radius: ",
         ";\n  justify-content: center;\n  align-items: center;\n  background-color: ",
+        ";\n  cursor: pointer;\n  ",
         ";\n  ",
         ";\n  ",
+        ";\n  & > svg {\n    width: 20px;\n    height: 20px;\n  }\n"
+    ]);
+    _templateObject42 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject43() {
+    var data = _tagged_template_literal([
+        "\n  background: ",
+        ";\n  & > span {\n    color: ",
+        ";\n  }\n  & > svg > path {\n    fill: ",
+        ";\n  }\n"
+    ]);
+    _templateObject43 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject44() {
+    var data = _tagged_template_literal([
+        "\n  background: ",
+        ";\n  & > span {\n    align-self: center;\n    color: ",
+        ";\n  }\n  & > svg > path {\n    fill: ",
+        ";\n  }\n"
+    ]);
+    _templateObject44 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject45() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  justify-content: flex-start;\n  align-items: start;\n  padding: 6px 8px;\n  gap: 4px;\n  border-radius: ",
         ";\n  ",
-        ";\n  ",
-        ";\n  cursor: pointer;\n  &:hover {\n    background-color: ",
+        "\n  ",
+        "\n"
+    ]);
+    _templateObject45 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject46() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  min-height: 20px;\n  min-width: 20px;\n"
+    ]);
+    _templateObject46 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject47() {
+    var data = _tagged_template_literal([
+        "\n  padding: 2px 0;\n"
+    ]);
+    _templateObject47 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject48() {
+    var data = _tagged_template_literal([
+        "\n  width: ",
+        ";\n  min-width: ",
+        ";\n  height: ",
+        ";\n  min-height: ",
+        ";\n\n  & > path {\n    fill: ",
         ";\n  }\n"
     ]);
-    _templateObject41 = function _templateObject() {
+    _templateObject48 = function _templateObject() {
         return data;
     };
     return data;
 }
-function _templateObject42() {
+function _templateObject49() {
+    var data = _tagged_template_literal([
+        "\n  padding: 4px 8px 4px 12px;\n  background-color: transparent;\n  width: 100%;\n  border: none;\n  box-sizing: border-box;\n  &::placeholder {\n    color: ",
+        ";\n  }\n"
+    ]);
+    _templateObject49 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject50() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"
+    ]);
+    _templateObject50 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject51() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  width: 100%;\n  justify-content: flex-end;\n  align-items: center;\n  gap: 2px;\n"
+    ]);
+    _templateObject51 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject52() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  align-items: center;\n  width: 100%;\n  flex-direction: ",
+        ";\n  justify-content: space-between;\n  min-height: 40px;\n  margin: 1px;\n  gap: 8px;\n  box-shadow: 0 0 0 1px ",
+        ";\n  border-radius: 6px;\n  background-color: ",
+        ";\n  overflow: hidden;\n  ",
+        ";\n"
+    ]);
+    _templateObject52 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject53() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  width: 100%;\n  flex-direction: row;\n  padding: 8px 12px;\n  gap: 8px;\n  background-color: ",
+        ";\n"
+    ]);
+    _templateObject53 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject54() {
+    var data = _tagged_template_literal([
+        "\n  padding: 8px 12px 0 12px;\n  background-color: transparent;\n  resize: none;\n  width: 100%;\n  height: ",
+        ";\n  flex: 1;\n  word-break: break-all;\n  ",
+        ";\n  &::placeholder {\n    color: ",
+        ";\n  }\n"
+    ]);
+    _templateObject54 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject55() {
     var data = _tagged_template_literal([
         "\n  width: 32px;\n  height: 32px;\n  padding: 7px;\n"
     ]);
-    _templateObject42 = function _templateObject() {
+    _templateObject55 = function _templateObject() {
         return data;
     };
     return data;
 }
-function _templateObject43() {
+function _templateObject56() {
     var data = _tagged_template_literal([
         "\n  display: flex;\n  width: 16px;\n  height: 16px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  border-radius: ",
         ";\n  border: none;\n  background: ",
         ";\n  cursor: pointer;\n  transition:\n    transform 0.1s ease-out,\n    background 0.1s ease;\n\n  &:hover {\n    background: ",
         ";\n  }\n"
     ]);
-    _templateObject43 = function _templateObject() {
+    _templateObject56 = function _templateObject() {
         return data;
     };
     return data;
 }
-var React2 = require("react");
-var zustand = require("zustand");
-var utils = require("@shoplflow/utils");
+var React3 = require("react");
 var styled5 = require("@emotion/styled");
 var framerMotion = require("framer-motion");
 var jsxRuntime = require("react/jsx-runtime");
 var reactDom = require("react-dom");
+var utils = require("@shoplflow/utils");
 var react = require("@emotion/react");
 var Scrollbars = require("react-custom-scrollbars-2");
+var ShoplAssets = require("@shoplflow/shopl-assets");
+var HadaAssets = require("@shoplflow/hada-assets");
 function _interopDefault(e) {
     return e && e.__esModule ? e : {
         default: e
     };
 }
-var React2__default = /*#__PURE__*/ _interopDefault(React2);
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function(k) {
+            if (k !== "default") {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function get() {
+                        return e[k];
+                    }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+var React3__default = /*#__PURE__*/ _interopDefault(React3);
 var styled5__default = /*#__PURE__*/ _interopDefault(styled5);
 var Scrollbars__default = /*#__PURE__*/ _interopDefault(Scrollbars);
+var ShoplAssets__namespace = /*#__PURE__*/ _interopNamespace(ShoplAssets);
+var HadaAssets__namespace = /*#__PURE__*/ _interopNamespace(HadaAssets);
 // src/hooks/useDomain.ts
-exports.useDomain = function(param) {
-    var _param_domain = param.domain, domain = _param_domain === void 0 ? "SHOPL" : _param_domain;
-    var _React2_useState = _sliced_to_array(React2.useState(void 0), 2), domainType = _React2_useState[0], setDomainType = _React2_useState[1];
-    React2.useEffect(function() {
+exports.useDomain = function() {
+    var domain = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "SHOPL";
+    var _React3_useState = _sliced_to_array(React3.useState(void 0), 2), domainType = _React3_useState[0], setDomainType = _React3_useState[1];
+    React3.useEffect(function() {
         if (domain) {
             setDomainType(domain);
         }
     }, [
         domain
     ]);
-    React2.useEffect(function() {
+    React3.useEffect(function() {
         if (!domainType) {
             return;
         }
@@ -671,94 +830,13 @@ exports.useDomain = function(param) {
     }, [
         domainType
     ]);
+    return [
+        domainType
+    ];
 };
 exports.getDomain = function() {
     return document.documentElement.dataset.shoplflow;
 };
-exports.useModalStore = zustand.create(function(set) {
-    return {
-        modal: [],
-        addModal: function(modal, id) {
-            return set(function(state) {
-                return {
-                    modal: _to_consumable_array(state.modal).concat([
-                        {
-                            component: modal,
-                            id: id
-                        }
-                    ])
-                };
-            });
-        },
-        removeModal: function(props) {
-            var _ref = props || {
-                id: void 0,
-                deps: void 0
-            }, id = _ref.id, deps = _ref.deps;
-            var isIncludeAllProps = Boolean(id && deps);
-            var isIncludeId = Boolean(id);
-            var isNotIncludeAllProps = !id && Boolean(utils.isNullOrUndefined(deps));
-            var isIncludeDeps = Boolean(Boolean(!utils.isNullOrUndefined(deps)) && !id);
-            if (isIncludeAllProps) {
-                throw new Error("id와 deps는 동시에 사용할 수 없습니다.");
-            }
-            if (isIncludeId) {
-                set(function(state) {
-                    var filterModal = state.modal.filter(function(modal) {
-                        return modal.id !== id;
-                    });
-                    return {
-                        modal: _to_consumable_array(filterModal)
-                    };
-                });
-                return;
-            }
-            if (isNotIncludeAllProps || deps === 1) {
-                set(function(state) {
-                    var removeModal = state.modal.slice(0, -1);
-                    return {
-                        modal: _to_consumable_array(removeModal)
-                    };
-                });
-                return;
-            }
-            if (isIncludeDeps) {
-                if (deps === 0 || deps === void 0) {
-                    return;
-                }
-                set(function(state) {
-                    var removeDeps = state.modal.slice(0, -deps);
-                    return {
-                        modal: _to_consumable_array(removeDeps)
-                    };
-                });
-                return;
-            }
-        }
-    };
-});
-// src/hooks/useHandleModal.ts
-exports.useHandleModal = function() {
-    var addModal = exports.useModalStore(function(state) {
-        return state.addModal;
-    });
-    var removeModal = exports.useModalStore(function(state) {
-        return state.removeModal;
-    });
-    return {
-        addModal: addModal,
-        removeModal: removeModal
-    };
-};
-// src/hooks/useModalValue.ts
-exports.useModalValue = function() {
-    var modal = exports.useModalStore(function(state) {
-        return state.modal;
-    });
-    return {
-        modal: modal
-    };
-};
 // src/animation/fadeInOut.ts
 var fadeInOut = {
     initial: {
@@ -785,15 +863,19 @@ var BackDrop = function(param) {
         initial: "initial",
         animate: "animate",
         exit: "exit",
+        "data-shoplflow": "BackDrop",
         children: children
     });
 };
 var BackDrop_default = BackDrop;
+var ModalHandlerContext = React3.createContext({
+    addModal: utils.noop,
+    removeModal: utils.noop
+});
+var ModalContext = React3.createContext([]);
 var SpaceMarginWrapper = styled5__default.default(framerMotion.motion.div)(_templateObject1());
 var ModalPortal = function() {
-    var modal = exports.useModalStore(function(state) {
-        return state.modal;
-    });
+    var modal = React3.useContext(ModalContext);
     return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
         children: reactDom.createPortal(/* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, {
             children: modal.map(function(item, index) {
@@ -807,12 +889,85 @@ var ModalPortal = function() {
     });
 };
 exports.ModalProvider = ModalPortal;
+var ModalProvider = function(param) {
+    var children = param.children;
+    var _React3_useState = _sliced_to_array(React3.useState([]), 2), openedModals = _React3_useState[0], setOpenedModals = _React3_useState[1];
+    var addModal = function(component, id) {
+        setOpenedModals(function(modals) {
+            if (modals) {
+                return _to_consumable_array(modals).concat([
+                    {
+                        component: component,
+                        id: id
+                    }
+                ]);
+            }
+            return [
+                {
+                    component: component,
+                    id: id
+                }
+            ];
+        });
+    };
+    var removeModal = function(props) {
+        var _ref = props || {
+            id: void 0,
+            deps: void 0
+        }, id = _ref.id, deps = _ref.deps;
+        var isIncludeAllProps = Boolean(id && deps);
+        var isIncludeId = Boolean(id);
+        var isNotIncludeAllProps = !id && Boolean(utils.isNullOrUndefined(deps));
+        var isIncludeDeps = Boolean(Boolean(!utils.isNullOrUndefined(deps)) && !id);
+        if (isIncludeAllProps) {
+            throw new Error("id와 deps는 동시에 사용할 수 없습니다.");
+        }
+        if (isIncludeId) {
+            setOpenedModals(function(modal) {
+                var filterModal = modal.filter(function(modal2) {
+                    return modal2.id !== id;
+                });
+                return _to_consumable_array(filterModal);
+            });
+            return;
+        }
+        if (isNotIncludeAllProps || deps === 1) {
+            setOpenedModals(function(modal) {
+                var removeModal2 = modal.slice(0, -1);
+                return _to_consumable_array(removeModal2);
+            });
+            return;
+        }
+        if (isIncludeDeps) {
+            if (deps === 0 || deps === void 0) {
+                return;
+            }
+            setOpenedModals(function(modal) {
+                var removeDeps = modal.slice(0, -deps);
+                return _to_consumable_array(removeDeps);
+            });
+            return;
+        }
+    };
+    var dispatch = React3.useMemo(function() {
+        return {
+            addModal: addModal,
+            removeModal: removeModal
+        };
+    }, []);
+    return /* @__PURE__ */ jsxRuntime.jsx(ModalContext.Provider, {
+        value: openedModals,
+        children: /* @__PURE__ */ jsxRuntime.jsx(ModalHandlerContext.Provider, {
+            value: dispatch,
+            children: children
+        })
+    });
+};
+var ModalProvider_default = ModalProvider;
 var ShoplflowProvider = function(param) {
     var children = param.children, _param_domain = param.domain, domain = _param_domain === void 0 ? "SHOPL" : _param_domain;
-    exports.useDomain({
-        domain: domain
-    });
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    exports.useDomain(domain);
+    return /* @__PURE__ */ jsxRuntime.jsxs(ModalProvider_default, {
         children: [
             /* @__PURE__ */ jsxRuntime.jsx(exports.ModalProvider, {}),
             children
@@ -820,6 +975,19 @@ var ShoplflowProvider = function(param) {
     });
 };
 exports.ShoplflowProvider = ShoplflowProvider;
+exports.useHandleModal = function() {
+    var _React3_useContext = React3.useContext(ModalHandlerContext), addModal = _React3_useContext.addModal, removeModal = _React3_useContext.removeModal;
+    return {
+        addModal: addModal,
+        removeModal: removeModal
+    };
+};
+exports.useModalValue = function() {
+    var modal = React3.useContext(ModalContext);
+    return {
+        modal: modal
+    };
+};
 // src/styles/tokens.ts
 var fontWeightRegular = "var(--font-weight-regular)";
 var fontWeightMedium = "var(--font-weight-medium)";
@@ -1042,7 +1210,7 @@ exports.StyledStack = styled5__default.default.div(_templateObject2(), function(
 });
 var createStackComponent = function(stackOption) {
     var _stackOption_direction, _stackOption_align, _stackOption_justify, _stackOption_width, _stackOption_height, _stackOption_flexWrap, _stackOption_flex;
-    return React2.forwardRef(function Stack2(_param, ref) {
+    return React3.forwardRef(function Stack2(_param, ref) {
         var _param_as = _param.as, as = _param_as === void 0 ? "div" : _param_as, _param_spacing = _param.spacing, spacing = _param_spacing === void 0 ? stackOption === null || stackOption === void 0 ? void 0 : stackOption.spacing : _param_spacing, _param_direction = _param.direction, direction = _param_direction === void 0 ? (_stackOption_direction = stackOption === null || stackOption === void 0 ? void 0 : stackOption.direction) !== null && _stackOption_direction !== void 0 ? _stackOption_direction : "column" : _param_direction, _param_align = _param.align, align = _param_align === void 0 ? (_stackOption_align = stackOption === null || stackOption === void 0 ? void 0 : stackOption.align) !== null && _stackOption_align !== void 0 ? _stackOption_align : "flex-start" : _param_align, _param_justify = _param.justify, justify = _param_justify === void 0 ? (_stackOption_justify = stackOption === null || stackOption === void 0 ? void 0 : stackOption.justify) !== null && _stackOption_justify !== void 0 ? _stackOption_justify : "flex-start" : _param_justify, _param_width = _param.width, width = _param_width === void 0 ? (_stackOption_width = stackOption === null || stackOption === void 0 ? void 0 : stackOption.width) !== null && _stackOption_width !== void 0 ? _stackOption_width : "initial" : _param_width, _param_height = _param.height, height = _param_height === void 0 ? (_stackOption_height = stackOption === null || stackOption === void 0 ? void 0 : stackOption.height) !== null && _stackOption_height !== void 0 ? _stackOption_height : "initial" : _param_height, _param_flexWrap = _param.flexWrap, flexWrap = _param_flexWrap === void 0 ? (_stackOption_flexWrap = stackOption === null || stackOption === void 0 ? void 0 : stackOption.flexWrap) !== null && _stackOption_flexWrap !== void 0 ? _stackOption_flexWrap : "initial" : _param_flexWrap, _param_flex = _param.flex, flex = _param_flex === void 0 ? (_stackOption_flex = stackOption === null || stackOption === void 0 ? void 0 : stackOption.flex) !== null && _stackOption_flex !== void 0 ? _stackOption_flex : "initial" : _param_flex, _param_radius = _param.radius, radius = _param_radius === void 0 ? stackOption === null || stackOption === void 0 ? void 0 : stackOption.radius : _param_radius, tmp = _param.background, background2 = tmp === void 0 ? stackOption === null || stackOption === void 0 ? void 0 : stackOption.background : tmp, rest = _object_without_properties(_param, [
             "as",
             "spacing",
@@ -1070,6 +1238,7 @@ var createStackComponent = function(stackOption) {
             background: background2,
             radius: radius
         }, rest), {
+            "data-shoplflow": "Stack",
             children: rest.children
         }));
     });
@@ -1113,7 +1282,7 @@ var StyledText = styled5__default.default.span(_templateObject7(), function(para
     var wordBreak = param.wordBreak;
     return wordBreak && react.css(_templateObject6(), wordBreak);
 });
-var Text = React2.forwardRef(function(_param, ref) {
+var Text = React3.forwardRef(function(_param, ref) {
     var children = _param.children, _param_typography = _param.typography, typography = _param_typography === void 0 ? "body1_400" : _param_typography, whiteSpace = _param.whiteSpace, _param_color = _param.color, color = _param_color === void 0 ? "neutral700" : _param_color, _param_display = _param.display, display = _param_display === void 0 ? "inline-block" : _param_display, _param_textAlign = _param.textAlign, textAlign = _param_textAlign === void 0 ? "start" : _param_textAlign, className = _param.className, as = _param.as, rest = _object_without_properties(_param, [
         "children",
         "typography",
@@ -1133,6 +1302,7 @@ var Text = React2.forwardRef(function(_param, ref) {
         textAlign: textAlign,
         as: as
     }, rest), {
+        "data-shoplflow": "Text",
         children: children
     }));
 });
@@ -1194,16 +1364,15 @@ var ModalBodyContent = styled5__default.default.div(_templateObject13(), functio
 }, exports.colorTokens.neutral0);
 var FooterContainer = styled5__default.default.div(_templateObject14(), exports.colorTokens.neutral300, exports.colorTokens.neutral0);
 // src/components/Modal/Modal.types.ts
-exports.ModalSize = /* @__PURE__ */ function(ModalSize2) {
-    ModalSize2["XXS"] = "XXS";
-    ModalSize2["XS"] = "XS";
-    ModalSize2["S"] = "S";
-    ModalSize2["M"] = "M";
-    ModalSize2["L"] = "L";
-    ModalSize2["XL"] = "XL";
-    ModalSize2["XXL"] = "XXL";
-    return ModalSize2;
-}(exports.ModalSize || {});
+exports.ModalSize = {
+    XXS: "XXS",
+    XS: "XS",
+    S: "S",
+    M: "M",
+    L: "L",
+    XL: "XL",
+    XXL: "XXL"
+};
 exports.MODAL_HEADER_KEY = Symbol("MODAL_HEADER");
 exports.MODAL_FOOTER_KEY = Symbol("MODAL_FOOTER");
 var ModalContainer = function(_param) {
@@ -1212,9 +1381,9 @@ var ModalContainer = function(_param) {
         "outsideClick"
     ]);
     var ref = utils.useParentElementClick(outsideClick);
-    var childrenArray = React2__default.default.Children.toArray(children);
+    var childrenArray = React3__default.default.Children.toArray(children);
     var findHeader = childrenArray.find(function(child) {
-        if (!React2__default.default.isValidElement(child)) {
+        if (!React3__default.default.isValidElement(child)) {
             return child;
         }
         if (child.type[exports.MODAL_HEADER_KEY]) {
@@ -1222,18 +1391,18 @@ var ModalContainer = function(_param) {
         }
     });
     var findFooter = childrenArray.find(function(child) {
-        if (!React2__default.default.isValidElement(child)) {
+        if (!React3__default.default.isValidElement(child)) {
             return child;
         }
         if (child.type[exports.MODAL_FOOTER_KEY]) {
             return child;
         }
     });
-    var addPropInChildren = React2.Children.map(childrenArray, function(child) {
-        if (!React2__default.default.isValidElement(child)) {
+    var addPropInChildren = React3__default.default.Children.map(childrenArray, function(child) {
+        if (!React3__default.default.isValidElement(child)) {
             return child;
         }
-        return React2__default.default.cloneElement(child, {
+        return React3__default.default.cloneElement(child, {
             isIncludeHeader: Boolean(findHeader),
             isIncludeFooter: Boolean(findFooter),
             sizeVar: rest.sizeVar,
@@ -1243,6 +1412,7 @@ var ModalContainer = function(_param) {
     return /* @__PURE__ */ jsxRuntime.jsx(Container, _object_spread_props(_object_spread({
         ref: ref
     }, rest), {
+        "data-shoplflow": "Modal",
         children: addPropInChildren
     }));
 };
@@ -1263,7 +1433,7 @@ var ModalBody = function(param) {
     var headerHeight = 64;
     var footerHeight = 64;
     var topBottomMargin = 64;
-    var getHeaderFooterHeight = React2.useCallback(function() {
+    var getHeaderFooterHeight = React3.useCallback(function() {
         var result = 0;
         if (isIncludeHeader) {
             result += headerHeight;
@@ -1276,7 +1446,7 @@ var ModalBody = function(param) {
         isIncludeFooter,
         isIncludeHeader
     ]);
-    var headerFooterHeight = React2.useMemo(function() {
+    var headerFooterHeight = React3.useMemo(function() {
         return getHeaderFooterHeight();
     }, [
         getHeaderFooterHeight
@@ -1341,14 +1511,14 @@ var StyledSwitch = styled5__default.default.input(_templateObject16(), exports.c
     return exports.colorTokens[activeColor];
 });
 var useOnToggle = function(selected, defaultSelected) {
-    var _React2_useState = _sliced_to_array(React2.useState(false), 2), isToggle = _React2_useState[0], setIsToggle = _React2_useState[1];
+    var _React3_useState = _sliced_to_array(React3.useState(false), 2), isToggle = _React3_useState[0], setIsToggle = _React3_useState[1];
     var isControlled = selected !== void 0;
     var handleToggle = function() {
         !isControlled && setIsToggle(function(prev) {
             return !prev;
         });
     };
-    React2.useEffect(function() {
+    React3.useEffect(function() {
         if (isControlled) {
             setIsToggle(selected);
         }
@@ -1356,7 +1526,7 @@ var useOnToggle = function(selected, defaultSelected) {
         isControlled,
         selected
     ]);
-    React2.useEffect(function() {
+    React3.useEffect(function() {
         if (defaultSelected) {
             setIsToggle(defaultSelected);
         }
@@ -1378,18 +1548,21 @@ var Switch = function(_param) {
         "defaultSelected"
     ]);
     var _useOnToggle = _sliced_to_array(useOnToggle(isSelected, defaultSelected), 2), isToggled = _useOnToggle[0], handleToggle = _useOnToggle[1];
+    var handleOnChange = function(e) {
+        handleToggle();
+        onChange && onChange(e);
+    };
     return /* @__PURE__ */ jsxRuntime.jsx(SwitchContainer, {
         isDisabled: disabled,
-        children: /* @__PURE__ */ jsxRuntime.jsx(StyledSwitch, _object_spread({
+        children: /* @__PURE__ */ jsxRuntime.jsx(StyledSwitch, _object_spread_props(_object_spread({
             type: "checkbox",
             checked: isToggled,
             disabled: disabled,
-            onChange: function() {
-                handleToggle();
-                onChange && onChange();
-            },
+            onChange: handleOnChange,
             activeColor: activeColor
-        }, rest))
+        }, rest), {
+            "data-shoplflow": "Switch"
+        }))
     });
 };
 exports.Switch = Switch;
@@ -1453,6 +1626,7 @@ var ChipToggle = function(_param) {
         sizeVar: sizeVar,
         onClick: handleClick,
         disabled: disabled,
+        "data-shoplflow": "ChipToggle",
         children: [
             leftSource,
             /* @__PURE__ */ jsxRuntime.jsx(exports.Text, {
@@ -1546,6 +1720,7 @@ var ChipButton = function(_param) {
     }, rest), {
         onClick: handleOnClick,
         disabled: disabled,
+        "data-shoplflow": "ChipButton",
         children: /* @__PURE__ */ jsxRuntime.jsx(exports.Text, {
             typography: getLineTypographyBySizeVar2(sizeVar),
             children: text
@@ -1577,7 +1752,7 @@ var getStyleBySizeVar2 = function(sizeVar) {
             return react.css(_templateObject34());
     }
 };
-var StyledButton = styled5__default.default.button(_templateObject35(), exports.spacingTokens.spacing04, exports.borderRadiusTokens.borderRadius06, exports.spacingTokens.spacing12, exports.borderRadiusTokens.borderRadius12, function(param) {
+var StyledButton = styled5__default.default.button(_templateObject35(), function(param) {
     var styleVar = param.styleVar, disabled = param.disabled;
     return getStyleByStyleVar(styleVar, disabled);
 }, function(param) {
@@ -1587,8 +1762,8 @@ var StyledButton = styled5__default.default.button(_templateObject35(), exports.
     var disabled = param.disabled;
     return getDisabledStyle(disabled);
 });
-var Button = React2.forwardRef(function(_param, ref) {
-    var styleVar = _param.styleVar, _param_sizeVar = _param.sizeVar, sizeVar = _param_sizeVar === void 0 ? "M" : _param_sizeVar, style = _param.style, color = _param.color, as = _param.as, children = _param.children, leftSource = _param.leftSource, rightSource = _param.rightSource, rest = _object_without_properties(_param, [
+var Button = React3.forwardRef(function(_param, ref) {
+    var _param_styleVar = _param.styleVar, styleVar = _param_styleVar === void 0 ? "PRIMARY" : _param_styleVar, _param_sizeVar = _param.sizeVar, sizeVar = _param_sizeVar === void 0 ? "M" : _param_sizeVar, style = _param.style, color = _param.color, as = _param.as, children = _param.children, leftSource = _param.leftSource, rightSource = _param.rightSource, rest = _object_without_properties(_param, [
         "styleVar",
         "sizeVar",
         "style",
@@ -1607,9 +1782,12 @@ var Button = React2.forwardRef(function(_param, ref) {
         ref: ref,
         color: color
     }, rest), {
+        "data-shoplflow": "Button",
         children: [
             leftSource,
             /* @__PURE__ */ jsxRuntime.jsx(exports.Text, {
+                wordBreak: "keep-all",
+                whiteSpace: "nowrap",
                 color: styleVar === "PRIMARY" ? "neutral0" : "neutral700",
                 typography: sizeVar === "M" ? "body1_400" : "body2_400",
                 children: children
@@ -1640,49 +1818,27 @@ var getWidthAndHeightFromSizeVar = function(sizeVar) {
             return react.css(_templateObject38());
     }
 };
-var getHoverBackgroundFromStyleVar = function(styleVar) {
+var getStyleByStyleVar2 = function(styleVar) {
     switch(styleVar){
         case "SOLID":
-            return exports.colorTokens.neutral100;
+            return react.css(_templateObject39(), exports.colorTokens.neutral200, exports.colorTokens.neutral100);
         case "GHOST":
-            return exports.colorTokens.neutral400_5;
+            return react.css(_templateObject40(), exports.colorTokens.neutral400_5);
         default:
-            return exports.colorTokens.neutral100;
+            return react.css(_templateObject41(), exports.colorTokens.neutral200, exports.colorTokens.neutral100);
     }
 };
-var getBorderByStyleVar = function(styleVar) {
-    if (!styleVar) {
-        return;
-    }
-    if (styleVar === "SOLID") {
-        return react.css(_templateObject39(), exports.colorTokens.neutral200);
-    }
-};
-var StyledIconButton = styled5__default.default.button(_templateObject41(), exports.borderRadiusTokens.borderRadius06, exports.colorTokens.neutral0, function(param) {
+var StyledIconButton = styled5__default.default.button(_templateObject42(), exports.borderRadiusTokens.borderRadius06, exports.colorTokens.neutral0, function(param) {
     var styleVar = param.styleVar;
-    if (!styleVar) {
-        return;
-    }
-    if (styleVar === "SOLID") {
-        return react.css(_templateObject40(), exports.colorTokens.neutral200);
-    }
-}, function(param) {
-    var styleVar = param.styleVar;
-    return getBorderByStyleVar(styleVar);
+    return getStyleByStyleVar2(styleVar);
 }, function(param) {
     var sizeVar = param.sizeVar;
     return getWidthAndHeightFromSizeVar(sizeVar);
 }, function(param) {
     var disabled = param.disabled;
     return getDisabledStyle(disabled);
-}, function(param) {
-    var styleVar = param.styleVar, disabled = param.disabled;
-    if (disabled) {
-        return;
-    }
-    return getHoverBackgroundFromStyleVar(styleVar);
 });
-var IconButton = React2.forwardRef(function(_param, ref) {
+var IconButton = React3.forwardRef(function(_param, ref) {
     var styleVar = _param.styleVar, sizeVar = _param.sizeVar, disabled = _param.disabled, as = _param.as, children = _param.children, rest = _object_without_properties(_param, [
         "styleVar",
         "sizeVar",
@@ -1697,6 +1853,7 @@ var IconButton = React2.forwardRef(function(_param, ref) {
         as: as,
         ref: ref
     }, rest), {
+        "data-shoplflow": "IconButton",
         children: children
     }));
 });
@@ -1710,20 +1867,469 @@ exports.iconButtonStyleVar = {
     SOLID: "SOLID",
     GHOST: "GHOST"
 };
-var Container2 = styled5__default.default.div(_templateObject42());
-var IconButton2 = styled5__default.default.button(_templateObject43(), exports.borderRadiusTokens.borderRadius04, function(param) {
+var informationStyle = react.css(_templateObject43(), exports.colorTokens.neutral100, exports.colorTokens.neutral600, exports.colorTokens.neutral600);
+var alertStyle = react.css(_templateObject44(), exports.colorTokens.red100, exports.colorTokens.red300, exports.colorTokens.red300);
+var StyledCallout = styled5__default.default.div(_templateObject45(), exports.borderRadiusTokens.borderRadius08, function(param) {
+    var styleVar = param.styleVar;
+    return styleVar === "INFORMATION" && informationStyle;
+}, function(param) {
+    var styleVar = param.styleVar;
+    return styleVar === "ALERT" && alertStyle;
+});
+var StyledCalloutIcon = styled5__default.default.svg(_templateObject46());
+styled5__default.default.div(_templateObject47());
+var Callout = function(_param) {
+    var children = _param.children, _param_styleVar = _param.styleVar, styleVar = _param_styleVar === void 0 ? "INFORMATION" : _param_styleVar, rest = _object_without_properties(_param, [
+        "children",
+        "styleVar"
+    ]);
+    return /* @__PURE__ */ jsxRuntime.jsx(StyledCallout, _object_spread_props(_object_spread({}, rest), {
+        styleVar: styleVar,
+        "data-shoplflow": "Callout",
+        children: children
+    }));
+};
+var CalloutText = function(_param) {
+    var children = _param.children, rest = _object_without_properties(_param, [
+        "children"
+    ]);
+    return /* @__PURE__ */ jsxRuntime.jsx(exports.Text, _object_spread_props(_object_spread({}, rest), {
+        typography: "body3_400",
+        children: children
+    }));
+};
+var CalloutIcon = function(param) {
+    var iconSource = param.iconSource;
+    return /* @__PURE__ */ jsxRuntime.jsx(StyledCalloutIcon, {
+        as: iconSource
+    });
+};
+Callout.Text = CalloutText;
+Callout.Icon = CalloutIcon;
+exports.Callout = Callout;
+// src/components/Callout/Callout.types.ts
+exports.CalloutTypes = {
+    INFORMATION: "INFORMATION",
+    ALERT: "ALERT"
+};
+// src/components/Icon/Icon.types.ts
+exports.IconSizeVariants = {
+    X_SMALL: "X_SMALL",
+    SMALL: "SMALL",
+    MEDIUM: "MEDIUM",
+    LARGE: "LARGE",
+    X_LARGE: "X_LARGE"
+};
+// src/components/Icon/Icon.styled.ts
+var getIconSize = function(size) {
+    switch(size){
+        case exports.IconSizeVariants.X_SMALL:
+            return "12px";
+        case exports.IconSizeVariants.SMALL:
+            return "20px";
+        case exports.IconSizeVariants.MEDIUM:
+            return "24px";
+        case exports.IconSizeVariants.LARGE:
+            return "30px";
+        case exports.IconSizeVariants.X_LARGE:
+            return "36px";
+        default:
+            return "24px";
+    }
+};
+exports.StyledIcon = styled5__default.default.svg(_templateObject48(), function(param) {
+    var sizeVar = param.sizeVar;
+    return sizeVar && getIconSize(sizeVar);
+}, function(param) {
+    var sizeVar = param.sizeVar;
+    return sizeVar && getIconSize(sizeVar);
+}, function(param) {
+    var sizeVar = param.sizeVar;
+    return sizeVar && getIconSize(sizeVar);
+}, function(param) {
+    var sizeVar = param.sizeVar;
+    return sizeVar && getIconSize(sizeVar);
+}, function(param) {
+    var color = param.color;
+    return color && exports.colorTokens[color];
+});
+var Icon = React3.forwardRef(function(_param, ref) {
+    var iconSource = _param.iconSource, rest = _object_without_properties(_param, [
+        "iconSource"
+    ]);
+    return /* @__PURE__ */ jsxRuntime.jsx(exports.StyledIcon, _object_spread_props(_object_spread({
+        as: iconSource,
+        ref: ref
+    }, rest), {
+        "data-shoplflow": "Icon"
+    }));
+});
+exports.Icon = Icon;
+var StyledInput = styled5__default.default.input(_templateObject49(), exports.colorTokens.neutral350);
+var RightElementWrapper = styled5__default.default.div(_templateObject50());
+var Wrapper = styled5__default.default.div(_templateObject51());
+var TextCounter = function(param) {
+    var currentLength = param.currentLength, maxLength = param.maxLength;
+    return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, {
+        children: [
+            /* @__PURE__ */ jsxRuntime.jsx(exports.Text, {
+                typography: "caption_400",
+                color: "neutral400",
+                children: currentLength
+            }),
+            /* @__PURE__ */ jsxRuntime.jsx(exports.Text, {
+                typography: "caption_400",
+                color: "neutral350",
+                children: "/"
+            }),
+            /* @__PURE__ */ jsxRuntime.jsx(exports.Text, {
+                typography: "caption_400",
+                color: "neutral350",
+                children: maxLength
+            })
+        ]
+    });
+};
+var TextCounter_default = TextCounter;
+React3.createContext({
+    domain: "SHOPL",
+    handleToggleTheme: function() {}
+});
+// src/styles/IconAssets.tsx
+var assetFunction = function(iconName, domainProps) {
+    var domain = domainProps !== null && domainProps !== void 0 ? domainProps : exports.getDomain();
+    var HadaIcon = HadaAssets__namespace[iconName];
+    var ShoplIcon = ShoplAssets__namespace[iconName];
+    return domain === "hada" ? HadaIcon : ShoplIcon;
+};
+function assignRef(ref, value) {
+    if (ref == null) {
+        return;
+    }
+    if (typeof ref === "function") {
+        ref(value);
+        return;
+    }
+    try {
+        ref.current = value;
+    } catch (error) {
+        throw new Error("Cannot assign value '".concat(value, "' to ref '").concat(ref, "'"));
+    }
+}
+function mergeRefs() {
+    for(var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++){
+        refs[_key] = arguments[_key];
+    }
+    return function(node) {
+        refs.forEach(function(ref) {
+            assignRef(ref, node);
+        });
+    };
+}
+function useMergeRefs() {
+    for(var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++){
+        refs[_key] = arguments[_key];
+    }
+    return React3.useMemo(function() {
+        return mergeRefs.apply(void 0, _to_consumable_array(refs));
+    }, refs);
+}
+var getBorderColorByStatus = function(param) {
+    var isFocused = param.isFocused, isError = param.isError, isHovered = param.isHovered, disabled = param.disabled;
+    if (!disabled) {
+        if (isError) {
+            return exports.colorTokens.red300;
+        }
+        if (isFocused) {
+            return exports.colorTokens.primary300;
+        }
+        if (isHovered) {
+            return exports.colorTokens.neutral700;
+        }
+    }
+    return exports.colorTokens.neutral300;
+};
+var InputWrapper = styled5__default.default.label(_templateObject52(), function(param) {
+    var direction = param.direction;
+    return direction || "row";
+}, function(props) {
+    return getBorderColorByStatus(props);
+}, exports.colorTokens.neutral0, function(param) {
+    var disabled = param.disabled;
+    return getDisabledStyle(disabled);
+});
+React3.forwardRef(function(_param, ref) {
+    var onFocus = _param.onFocus, onBlur = _param.onBlur, onChange = _param.onChange, onClear = _param.onClear, defaultValue = _param.defaultValue, value = _param.value, isError = _param.isError, disabled = _param.disabled, initialType = _param.type, maxLength = _param.maxLength, className = _param.className, rest = _object_without_properties(_param, [
+        "onFocus",
+        "onBlur",
+        "onChange",
+        "onClear",
+        "defaultValue",
+        "value",
+        "isError",
+        "disabled",
+        "type",
+        "maxLength",
+        "className"
+    ]);
+    var _React3_useState = _sliced_to_array(React3.useState(""), 2), text = _React3_useState[0], setText = _React3_useState[1];
+    var _React3_useState1 = _sliced_to_array(React3.useState(false), 2), isFocused = _React3_useState1[0], setIsFocused = _React3_useState1[1];
+    var _React3_useState2 = _sliced_to_array(React3.useState("text"), 2), type = _React3_useState2[0], setType = _React3_useState2[1];
+    var _React3_useState3 = _sliced_to_array(React3.useState(false), 2), isHovered = _React3_useState3[0], setIsHovered = _React3_useState3[1];
+    var uniqueId = React3.useId();
+    var inputRef = React3__default.default.useRef(null);
+    var refs = useMergeRefs(ref, inputRef);
+    var convertToString = React3.useCallback(function(value2) {
+        if (typeof value2 !== "number") {
+            return typeof value2 === "string" ? value2 : value2.join("");
+        }
+        return String(value2);
+    }, []);
+    var sliceText = React3.useCallback(function(value2) {
+        if (maxLength && value2.length > maxLength) {
+            return value2.slice(0, maxLength);
+        }
+        return value2;
+    }, [
+        maxLength
+    ]);
+    var handleOnMouseEnter = function() {
+        setIsHovered(true);
+    };
+    var handleOnMouseLeave = function() {
+        setIsHovered(false);
+    };
+    var handleOnFocus = function(event) {
+        onFocus && onFocus(event);
+        setIsFocused(true);
+    };
+    var handleOnBlur = function(event) {
+        onBlur && onBlur(event);
+        !isHovered && setIsFocused(false);
+    };
+    var handleOnChange = function(event) {
+        onChange && onChange(event);
+        var slicedText = sliceText(event.target.value);
+        setText(slicedText);
+    };
+    var handleOnClear = function() {
+        onClear && onClear();
+        if (inputRef.current) {
+            setText("");
+            inputRef.current.value = "";
+        }
+    };
+    var handleTogglePasswordType = function() {
+        if (type === "password") {
+            setType("text");
+        } else {
+            setType("password");
+        }
+    };
+    React3.useEffect(function() {
+        if (defaultValue) {
+            var convertString = convertToString(defaultValue);
+            var slicedText = sliceText(convertString);
+            setText(slicedText);
+        }
+    }, [
+        convertToString,
+        defaultValue,
+        maxLength,
+        sliceText
+    ]);
+    React3.useEffect(function() {
+        if (value) {
+            var convertString = convertToString(value);
+            var slicedText = sliceText(convertString);
+            setText(slicedText);
+        }
+    }, [
+        convertToString,
+        maxLength,
+        sliceText,
+        value
+    ]);
+    React3.useEffect(function() {
+        setType(initialType);
+    }, [
+        initialType
+    ]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(InputWrapper, {
+        htmlFor: uniqueId,
+        isFocused: isFocused,
+        disabled: disabled,
+        isError: isError,
+        isHovered: isHovered,
+        onMouseEnter: handleOnMouseEnter,
+        onMouseLeave: handleOnMouseLeave,
+        "data-shoplflow": "input",
+        children: [
+            /* @__PURE__ */ jsxRuntime.jsx(StyledInput, _object_spread({
+                className: "".concat(exports.typographyTokens.body1_400, " ").concat(className),
+                onFocus: handleOnFocus,
+                onBlur: handleOnBlur,
+                onChange: handleOnChange,
+                maxLength: maxLength,
+                disabled: disabled,
+                value: text,
+                type: type,
+                id: uniqueId,
+                ref: refs
+            }, rest)),
+            /* @__PURE__ */ jsxRuntime.jsxs(RightElementWrapper, {
+                children: [
+                    maxLength && isFocused && /* @__PURE__ */ jsxRuntime.jsx(TextCounter_default, {
+                        currentLength: String(text).length,
+                        maxLength: maxLength
+                    }),
+                    isFocused && Boolean(String(text).length > 0) && /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, {
+                        sizeVar: "S",
+                        onClick: handleOnClear,
+                        styleVar: "GHOST",
+                        children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, {
+                            iconSource: assetFunction("DeleteIcon"),
+                            color: "neutral600"
+                        })
+                    }),
+                    initialType === "password" && /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, {
+                        sizeVar: "S",
+                        onClick: handleTogglePasswordType,
+                        styleVar: "GHOST",
+                        children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, {
+                            color: "neutral600",
+                            iconSource: assetFunction(type === "password" ? "ViewOffIcon" : "ViewOnIcon")
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+});
+var BottomElementWrapper = styled5__default.default.div(_templateObject53(), exports.colorTokens.neutral0);
+var StyledTextarea = styled5__default.default.textarea(_templateObject54(), function(param) {
+    var minHeight = param.minHeight;
+    return minHeight ? "".concat(minHeight, "px") : "300px";
+}, function(param) {
+    var disabled = param.disabled;
+    return getDisabledStyle(disabled);
+}, exports.colorTokens.neutral350);
+var TextArea = React3.forwardRef(function(_param, ref) {
+    var name = _param.name, maxLength = _param.maxLength, placeholder = _param.placeholder, _param_disabled = _param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, _param_isError = _param.isError, isError = _param_isError === void 0 ? false : _param_isError, onChange = _param.onChange, value = _param.value, defaultValue = _param.defaultValue, onBlur = _param.onBlur, onFocus = _param.onFocus, _param_minHeight = _param.minHeight, minHeight = _param_minHeight === void 0 ? 100 : _param_minHeight, rest = _object_without_properties(_param, [
+        "name",
+        "maxLength",
+        "placeholder",
+        "disabled",
+        "isError",
+        "onChange",
+        "value",
+        "defaultValue",
+        "onBlur",
+        "onFocus",
+        "minHeight"
+    ]);
+    var _React3_useState = _sliced_to_array(React3.useState(""), 2), text = _React3_useState[0], setText = _React3_useState[1];
+    var _React3_useState1 = _sliced_to_array(React3.useState(false), 2), isFocused = _React3_useState1[0], setIsFocused = _React3_useState1[1];
+    var _React3_useState2 = _sliced_to_array(React3.useState(false), 2), isHovered = _React3_useState2[0], setIsHovered = _React3_useState2[1];
+    var handleOnMouseEnter = function() {
+        setIsHovered(true);
+    };
+    var handleOnMouseLeave = function() {
+        setIsHovered(false);
+    };
+    var handleOnFocus = function(event) {
+        onFocus && onFocus(event);
+        setIsFocused(true);
+    };
+    var handleOnBlur = function(event) {
+        onBlur && onBlur(event);
+        !isHovered && setIsFocused(false);
+    };
+    var handleOnChange = function(event) {
+        onChange && onChange(event);
+        setText(event.target.value);
+    };
+    var convertToString = function(value2) {
+        if (typeof value2 !== "number") {
+            return typeof value2 === "string" ? value2 : value2.join("");
+        }
+        return String(value2);
+    };
+    React3.useEffect(function() {
+        if (defaultValue) {
+            var convertString = convertToString(defaultValue);
+            if (maxLength && convertString.length > maxLength) {
+                setText(convertString);
+            }
+            setText(convertString);
+        }
+    }, [
+        defaultValue,
+        maxLength
+    ]);
+    React3.useEffect(function() {
+        if (value) {
+            var convertString = convertToString(value);
+            if (maxLength && convertString.length > maxLength) {
+                setText(convertString);
+            }
+            setText(convertToString(value));
+        }
+    }, [
+        maxLength,
+        value
+    ]);
+    var uniqueId = React3.useId();
+    return /* @__PURE__ */ jsxRuntime.jsxs(InputWrapper, {
+        htmlFor: uniqueId,
+        isFocused: isFocused,
+        disabled: disabled,
+        isHovered: isHovered,
+        isError: isError,
+        direction: "column",
+        onMouseEnter: handleOnMouseEnter,
+        onMouseLeave: handleOnMouseLeave,
+        "data-shoplflow": "text-area",
+        children: [
+            /* @__PURE__ */ jsxRuntime.jsx(StyledTextarea, _object_spread({
+                className: "body1_400",
+                placeholder: placeholder,
+                onFocus: handleOnFocus,
+                onBlur: handleOnBlur,
+                onChange: handleOnChange,
+                name: name,
+                id: uniqueId,
+                value: value,
+                ref: ref,
+                maxLength: maxLength,
+                disabled: disabled,
+                minHeight: minHeight
+            }, rest)),
+            /* @__PURE__ */ jsxRuntime.jsx(BottomElementWrapper, {
+                children: maxLength && /* @__PURE__ */ jsxRuntime.jsx(TextCounter_default, {
+                    currentLength: String(text).length,
+                    maxLength: maxLength
+                })
+            })
+        ]
+    });
+});
+exports.TextArea = TextArea;
+var Container2 = styled5__default.default.div(_templateObject55());
+var IconButton2 = styled5__default.default.button(_templateObject56(), exports.borderRadiusTokens.borderRadius04, function(param) {
     var color = param.color;
     return exports.colorTokens[color];
 }, function(param) {
     var color = param.color;
     return exports.colorTokens[getNextColor(color, 1)];
 });
-var MinusButton = React2.forwardRef(function(_param, ref) {
+var MinusButton = React3.forwardRef(function(_param, ref) {
     var onClick = _param.onClick, _param_color = _param.color, color = _param_color === void 0 ? "neutral300" : _param_color, rest = _object_without_properties(_param, [
         "onClick",
         "color"
     ]);
     return /* @__PURE__ */ jsxRuntime.jsx(Container2, {
+        "data-shoplflow": "minusButton",
         children: /* @__PURE__ */ jsxRuntime.jsx(IconButton2, _object_spread_props(_object_spread({
             color: color,
             onClick: onClick,