@shoplflow/base 0.11.4 → 0.12.1

package/dist/index.js

@@ -1,3 +1,4 @@
+"use strict";
 function _array_like_to_array(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
@@ -536,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"
@@ -552,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;
@@ -561,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;
@@ -570,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;
@@ -579,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;
@@ -589,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;
@@ -598,63 +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;
 }
-import React2, { forwardRef, useState, useEffect, Children, useCallback, useMemo } from "react";
-import { create } from "zustand";
-import { isNullOrUndefined, noop, useParentElementClick, useResizeObserver } from "@shoplflow/utils";
-import styled5 from "@emotion/styled";
-import { motion, AnimatePresence } from "framer-motion";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { createPortal } from "react-dom";
-import { css } from "@emotion/react";
-import Scrollbars from "react-custom-scrollbars-2";
+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
+    };
+}
+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
-var useDomain = function(param) {
-    var _param_domain = param.domain, domain = _param_domain === void 0 ? "SHOPL" : _param_domain;
-    var _useState = _sliced_to_array(useState(void 0), 2), domainType = _useState[0], setDomainType = _useState[1];
-    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
     ]);
-    useEffect(function() {
+    React3.useEffect(function() {
         if (!domainType) {
             return;
         }
@@ -662,94 +830,13 @@ var useDomain = function(param) {
     }, [
         domainType
     ]);
+    return [
+        domainType
+    ];
 };
-var getDomain = function() {
+exports.getDomain = function() {
     return document.documentElement.dataset.shoplflow;
 };
-var useModalStore = 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(isNullOrUndefined(deps));
-            var isIncludeDeps = Boolean(Boolean(!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
-var useHandleModal = function() {
-    var addModal = useModalStore(function(state) {
-        return state.addModal;
-    });
-    var removeModal = useModalStore(function(state) {
-        return state.removeModal;
-    });
-    return {
-        addModal: addModal,
-        removeModal: removeModal
-    };
-};
-// src/hooks/useModalValue.ts
-var useModalValue = function() {
-    var modal = useModalStore(function(state) {
-        return state.modal;
-    });
-    return {
-        modal: modal
-    };
-};
 // src/animation/fadeInOut.ts
 var fadeInOut = {
     initial: {
@@ -768,28 +855,32 @@ var fadeInOut = {
         }
     }
 };
-var BackDropStyled = styled5(motion.div)(_templateObject());
+var BackDropStyled = styled5__default.default(framerMotion.motion.div)(_templateObject());
 var BackDrop = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ jsx(BackDropStyled, {
+    return /* @__PURE__ */ jsxRuntime.jsx(BackDropStyled, {
         variants: fadeInOut,
         initial: "initial",
         animate: "animate",
         exit: "exit",
+        "data-shoplflow": "BackDrop",
         children: children
     });
 };
 var BackDrop_default = BackDrop;
-var SpaceMarginWrapper = styled5(motion.div)(_templateObject1());
+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 = useModalStore(function(state) {
-        return state.modal;
-    });
-    return /* @__PURE__ */ jsx(Fragment, {
-        children: createPortal(/* @__PURE__ */ jsx(AnimatePresence, {
+    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) {
-                return /* @__PURE__ */ jsx(BackDrop_default, {
-                    children: /* @__PURE__ */ jsx(SpaceMarginWrapper, {
+                return /* @__PURE__ */ jsxRuntime.jsx(BackDrop_default, {
+                    children: /* @__PURE__ */ jsxRuntime.jsx(SpaceMarginWrapper, {
                         children: item.component
                     })
                 }, index);
@@ -797,25 +888,111 @@ var ModalPortal = function() {
         }), document.body)
     });
 };
-var ModalPortal_default = ModalPortal;
+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;
-    useDomain({
-        domain: domain
-    });
-    return /* @__PURE__ */ jsxs(Fragment, {
+    exports.useDomain(domain);
+    return /* @__PURE__ */ jsxRuntime.jsxs(ModalProvider_default, {
         children: [
-            /* @__PURE__ */ jsx(ModalPortal_default, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(exports.ModalProvider, {}),
             children
         ]
     });
 };
-var ShoplflowProvider_default = ShoplflowProvider;
+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)";
 var fontWeightBold = "var(--font-weight-bold)";
-var fontWeightTokens = {
+exports.fontWeightTokens = {
     fontWeightRegular: fontWeightRegular,
     fontWeightMedium: fontWeightMedium,
     fontWeightBold: fontWeightBold
@@ -826,7 +1003,7 @@ var borderRadius08 = "var(--border-radius08)";
 var borderRadius12 = "var(--border-radius12)";
 var borderRadius16 = "var(--border-radius16)";
 var borderRadius20 = "var(--border-radius20)";
-var borderRadiusTokens = {
+exports.borderRadiusTokens = {
     borderRadius04: borderRadius04,
     borderRadius06: borderRadius06,
     borderRadius08: borderRadius08,
@@ -882,7 +1059,7 @@ var primary150 = "var(--primary150)";
 var primary200 = "var(--primary200)";
 var primary300 = "var(--primary300)";
 var primary400 = "var(--primary400)";
-var colorTokens = {
+exports.colorTokens = {
     coolgray300: coolgray300,
     coolgray200: coolgray200,
     coolgray100: coolgray100,
@@ -942,7 +1119,7 @@ var spacing24 = "var(--spacing24)";
 var spacing30 = "var(--spacing30)";
 var spacing32 = "var(--spacing32)";
 var spacing40 = "var(--spacing40)";
-var spacingTokens = {
+exports.spacingTokens = {
     spacing04: spacing04,
     spacing06: spacing06,
     spacing08: spacing08,
@@ -955,7 +1132,7 @@ var spacingTokens = {
     spacing40: spacing40
 };
 var dropShadow = "var(--dropShadow)";
-var boxShadowTokens = {
+exports.boxShadowTokens = {
     dropShadow: dropShadow
 };
 var heading1_700 = ".heading1_700";
@@ -978,7 +1155,7 @@ var body2_400 = ".body2_400";
 var body3_400 = ".body3_400";
 var body3_500 = ".body3_500";
 var caption_400 = ".caption_400";
-var typographyTokens = {
+exports.typographyTokens = {
     heading1_700: heading1_700,
     heading1_400: heading1_400,
     heading2_700: heading2_700,
@@ -1000,7 +1177,7 @@ var typographyTokens = {
     body3_500: body3_500,
     caption_400: caption_400
 };
-var StyledStack = styled5.div(_templateObject2(), function(param) {
+exports.StyledStack = styled5__default.default.div(_templateObject2(), function(param) {
     var width = param.width;
     return width;
 }, function(param) {
@@ -1017,7 +1194,7 @@ var StyledStack = styled5.div(_templateObject2(), function(param) {
     return justify;
 }, function(param) {
     var spacing = param.spacing;
-    return spacing && spacingTokens[spacing];
+    return spacing && exports.spacingTokens[spacing];
 }, function(param) {
     var flexWrap = param.flexWrap;
     return flexWrap;
@@ -1026,14 +1203,14 @@ var StyledStack = styled5.div(_templateObject2(), function(param) {
     return flex;
 }, function(param) {
     var background2 = param.background;
-    return background2 ? colorTokens[background2] : "transparent";
+    return background2 ? exports.colorTokens[background2] : "transparent";
 }, function(param) {
     var radius = param.radius;
-    return radius && borderRadiusTokens[radius];
+    return radius && exports.borderRadiusTokens[radius];
 });
 var createStackComponent = function(stackOption) {
     var _stackOption_direction, _stackOption_align, _stackOption_justify, _stackOption_width, _stackOption_height, _stackOption_flexWrap, _stackOption_flex;
-    return 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",
@@ -1047,7 +1224,7 @@ var createStackComponent = function(stackOption) {
             "radius",
             "background"
         ]);
-        return /* @__PURE__ */ jsx(StyledStack, _object_spread_props(_object_spread({
+        return /* @__PURE__ */ jsxRuntime.jsx(exports.StyledStack, _object_spread_props(_object_spread({
             as: as,
             spacing: spacing,
             ref: ref,
@@ -1061,6 +1238,7 @@ var createStackComponent = function(stackOption) {
             background: background2,
             radius: radius
         }, rest), {
+            "data-shoplflow": "Stack",
             children: rest.children
         }));
     });
@@ -1072,19 +1250,19 @@ Stack.Vertical = createStackComponent({
 Stack.Horizontal = createStackComponent({
     direction: "row"
 });
-var MotionStack = motion(Stack);
-MotionStack.Vertical = motion(Stack.Vertical);
-MotionStack.Horizontal = motion(Stack.Horizontal);
-var Stack_default = Stack;
+exports.MotionStack = framerMotion.motion(Stack);
+exports.MotionStack.Vertical = framerMotion.motion(Stack.Vertical);
+exports.MotionStack.Horizontal = framerMotion.motion(Stack.Horizontal);
+exports.Stack = Stack;
 var setEllipsis = function(maxLines) {
-    return css(_templateObject3(), maxLines, maxLines);
+    return react.css(_templateObject3(), maxLines, maxLines);
 };
-var StyledText = styled5.span(_templateObject7(), function(param) {
+var StyledText = styled5__default.default.span(_templateObject7(), function(param) {
     var display = param.display;
     return display && display;
 }, function(param) {
     var color = param.color;
-    return color && colorTokens[color];
+    return color && exports.colorTokens[color];
 }, function(param) {
     var lineClamp = param.lineClamp;
     return lineClamp && setEllipsis(lineClamp);
@@ -1096,15 +1274,15 @@ var StyledText = styled5.span(_templateObject7(), function(param) {
     return whiteSpace && whiteSpace;
 }, function(param) {
     var textDecorations = param.textDecorations;
-    return textDecorations && css(_templateObject4(), textDecorations);
+    return textDecorations && react.css(_templateObject4(), textDecorations);
 }, function(param) {
     var opacity = param.opacity;
-    return opacity && css(_templateObject5(), opacity);
+    return opacity && react.css(_templateObject5(), opacity);
 }, function(param) {
     var wordBreak = param.wordBreak;
-    return wordBreak && css(_templateObject6(), wordBreak);
+    return wordBreak && react.css(_templateObject6(), wordBreak);
 });
-var Text = 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",
@@ -1115,7 +1293,7 @@ var Text = forwardRef(function(_param, ref) {
         "className",
         "as"
     ]);
-    return /* @__PURE__ */ jsx(StyledText, _object_spread_props(_object_spread({
+    return /* @__PURE__ */ jsxRuntime.jsx(StyledText, _object_spread_props(_object_spread({
         ref: ref,
         whiteSpace: whiteSpace,
         className: className ? "".concat(typography, " ").concat(className) : typography,
@@ -1124,10 +1302,11 @@ var Text = forwardRef(function(_param, ref) {
         textAlign: textAlign,
         as: as
     }, rest), {
+        "data-shoplflow": "Text",
         children: children
     }));
 });
-var Text_default = Text;
+exports.Text = Text;
 var MODAL_SIZE_XXS = 400;
 var MODAL_SIZE_XS = 500;
 var MODAL_SIZE_S = 560;
@@ -1157,11 +1336,11 @@ var getModalWidthFromSize = function(size) {
 };
 var getModalBodyTopBottomPadding = function(isIncludeHeader) {
     if (isIncludeHeader) {
-        return css(_templateObject8());
+        return react.css(_templateObject8());
     }
-    return css(_templateObject9());
+    return react.css(_templateObject9());
 };
-var Container = styled5.div(_templateObject10(), borderRadiusTokens.borderRadius08, colorTokens.neutral0, boxShadowTokens.dropShadow, function(param) {
+var Container = styled5__default.default.div(_templateObject10(), exports.borderRadiusTokens.borderRadius08, exports.colorTokens.neutral0, exports.boxShadowTokens.dropShadow, function(param) {
     var height = param.height;
     return height ? "".concat(height, "px") : "initial";
 }, function(param) {
@@ -1171,90 +1350,90 @@ var Container = styled5.div(_templateObject10(), borderRadiusTokens.borderRadius
     var sizeVar = param.sizeVar;
     return getModalWidthFromSize(sizeVar);
 });
-var HeaderContainer = styled5.div(_templateObject11());
-var BodyContainer = styled5.div(_templateObject12(), colorTokens.neutral0, function(param) {
+var HeaderContainer = styled5__default.default.div(_templateObject11());
+var BodyContainer = styled5__default.default.div(_templateObject12(), exports.colorTokens.neutral0, function(param) {
     var height = param.height;
     return height;
 }, function(param) {
     var isIncludeHeader = param.isIncludeHeader;
     return getModalBodyTopBottomPadding(isIncludeHeader);
 });
-var ModalBodyContent = styled5.div(_templateObject13(), function(param) {
+var ModalBodyContent = styled5__default.default.div(_templateObject13(), function(param) {
     var sizeVar = param.sizeVar;
     return getModalWidthFromSize(sizeVar);
-}, colorTokens.neutral0);
-var FooterContainer = styled5.div(_templateObject14(), colorTokens.neutral300, colorTokens.neutral0);
+}, exports.colorTokens.neutral0);
+var FooterContainer = styled5__default.default.div(_templateObject14(), exports.colorTokens.neutral300, exports.colorTokens.neutral0);
 // src/components/Modal/Modal.types.ts
-var 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;
-}(ModalSize || {});
-var MODAL_HEADER_KEY = Symbol("MODAL_HEADER");
-var MODAL_FOOTER_KEY = Symbol("MODAL_FOOTER");
+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) {
-    var children = _param.children, _param_outsideClick = _param.outsideClick, outsideClick = _param_outsideClick === void 0 ? noop : _param_outsideClick, rest = _object_without_properties(_param, [
+    var children = _param.children, _param_outsideClick = _param.outsideClick, outsideClick = _param_outsideClick === void 0 ? utils.noop : _param_outsideClick, rest = _object_without_properties(_param, [
         "children",
         "outsideClick"
     ]);
-    var ref = useParentElementClick(outsideClick);
-    var childrenArray = React2.Children.toArray(children);
+    var ref = utils.useParentElementClick(outsideClick);
+    var childrenArray = React3__default.default.Children.toArray(children);
     var findHeader = childrenArray.find(function(child) {
-        if (!React2.isValidElement(child)) {
+        if (!React3__default.default.isValidElement(child)) {
             return child;
         }
-        if (child.type[MODAL_HEADER_KEY]) {
+        if (child.type[exports.MODAL_HEADER_KEY]) {
             return child;
         }
     });
     var findFooter = childrenArray.find(function(child) {
-        if (!React2.isValidElement(child)) {
+        if (!React3__default.default.isValidElement(child)) {
             return child;
         }
-        if (child.type[MODAL_FOOTER_KEY]) {
+        if (child.type[exports.MODAL_FOOTER_KEY]) {
             return child;
         }
     });
-    var addPropInChildren = Children.map(childrenArray, function(child) {
-        if (!React2.isValidElement(child)) {
+    var addPropInChildren = React3__default.default.Children.map(childrenArray, function(child) {
+        if (!React3__default.default.isValidElement(child)) {
             return child;
         }
-        return React2.cloneElement(child, {
+        return React3__default.default.cloneElement(child, {
             isIncludeHeader: Boolean(findHeader),
             isIncludeFooter: Boolean(findFooter),
             sizeVar: rest.sizeVar,
             height: rest.height
         });
     });
-    return /* @__PURE__ */ jsx(Container, _object_spread_props(_object_spread({
+    return /* @__PURE__ */ jsxRuntime.jsx(Container, _object_spread_props(_object_spread({
         ref: ref
     }, rest), {
+        "data-shoplflow": "Modal",
         children: addPropInChildren
     }));
 };
 var ModalContainer_default = ModalContainer;
 var ModalFooter = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ jsx(FooterContainer, {
+    return /* @__PURE__ */ jsxRuntime.jsx(FooterContainer, {
         children: children
     });
 };
-ModalFooter[MODAL_FOOTER_KEY] = true;
+ModalFooter[exports.MODAL_FOOTER_KEY] = true;
 var ModalFooter_default = ModalFooter;
 var ModalBody = function(param) {
     var children = param.children, _param_isIncludeHeader = param.isIncludeHeader, isIncludeHeader = _param_isIncludeHeader === void 0 ? false : _param_isIncludeHeader, _param_isIncludeFooter = param.isIncludeFooter, isIncludeFooter = _param_isIncludeFooter === void 0 ? false : _param_isIncludeFooter, sizeVar = param.sizeVar, modalContainerHeight = param.height;
-    var _useResizeObserver = useResizeObserver(document.body, {
+    var _utils_useResizeObserver = utils.useResizeObserver(document.body, {
         trackHeight: true
-    }), windowHeight = _useResizeObserver.height;
+    }), windowHeight = _utils_useResizeObserver.height;
     var headerHeight = 64;
     var footerHeight = 64;
     var topBottomMargin = 64;
-    var getHeaderFooterHeight = useCallback(function() {
+    var getHeaderFooterHeight = React3.useCallback(function() {
         var result = 0;
         if (isIncludeHeader) {
             result += headerHeight;
@@ -1267,7 +1446,7 @@ var ModalBody = function(param) {
         isIncludeFooter,
         isIncludeHeader
     ]);
-    var headerFooterHeight = useMemo(function() {
+    var headerFooterHeight = React3.useMemo(function() {
         return getHeaderFooterHeight();
     }, [
         getHeaderFooterHeight
@@ -1281,10 +1460,10 @@ var ModalBody = function(param) {
     };
     var heightUnderMaxHeight = windowHeight - topBottomMargin - headerFooterHeight;
     var heightOverMaxHeight = 1200 - topBottomMargin - headerFooterHeight;
-    return /* @__PURE__ */ jsx(BodyContainer, {
+    return /* @__PURE__ */ jsxRuntime.jsx(BodyContainer, {
         isIncludeHeader: isIncludeHeader,
         height: setAutoHeightMin(),
-        children: /* @__PURE__ */ jsx(Scrollbars, {
+        children: /* @__PURE__ */ jsxRuntime.jsx(Scrollbars__default.default, {
             id: "scrollbar",
             autoHeight: !modalContainerHeight,
             autoHeightMin: setAutoHeightMin(),
@@ -1296,7 +1475,7 @@ var ModalBody = function(param) {
                 height: "100%",
                 overflow: "hidden"
             },
-            children: /* @__PURE__ */ jsx(ModalBodyContent, {
+            children: /* @__PURE__ */ jsxRuntime.jsx(ModalBodyContent, {
                 isIncludeHeader: isIncludeHeader,
                 sizeVar: sizeVar,
                 children: children
@@ -1307,39 +1486,39 @@ var ModalBody = function(param) {
 var ModalBody_default = ModalBody;
 var ModalHeader = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ jsx(HeaderContainer, {
+    return /* @__PURE__ */ jsxRuntime.jsx(HeaderContainer, {
         children: children
     });
 };
-ModalHeader[MODAL_HEADER_KEY] = true;
+ModalHeader[exports.MODAL_HEADER_KEY] = true;
 var ModalHeader_default = ModalHeader;
 // src/components/Modal/index.ts
-var Modal = {
+exports.Modal = {
     Container: ModalContainer_default,
     Header: ModalHeader_default,
     Body: ModalBody_default,
     Footer: ModalFooter_default
 };
-var SwitchContainer = styled5.div(_templateObject15(), function(param) {
+var SwitchContainer = styled5__default.default.div(_templateObject15(), function(param) {
     var isDisabled = param.isDisabled;
     return isDisabled && 0.3;
 }, function(param) {
     var isDisabled = param.isDisabled;
-    return !isDisabled && colorTokens.neutral400_5;
+    return !isDisabled && exports.colorTokens.neutral400_5;
 });
-var StyledSwitch = styled5.input(_templateObject16(), colorTokens.neutral350, colorTokens.neutral0, function(param) {
+var StyledSwitch = styled5__default.default.input(_templateObject16(), exports.colorTokens.neutral350, exports.colorTokens.neutral0, function(param) {
     var activeColor = param.activeColor;
-    return colorTokens[activeColor];
+    return exports.colorTokens[activeColor];
 });
 var useOnToggle = function(selected, defaultSelected) {
-    var _useState = _sliced_to_array(useState(false), 2), isToggle = _useState[0], setIsToggle = _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;
         });
     };
-    useEffect(function() {
+    React3.useEffect(function() {
         if (isControlled) {
             setIsToggle(selected);
         }
@@ -1347,7 +1526,7 @@ var useOnToggle = function(selected, defaultSelected) {
         isControlled,
         selected
     ]);
-    useEffect(function() {
+    React3.useEffect(function() {
         if (defaultSelected) {
             setIsToggle(defaultSelected);
         }
@@ -1369,26 +1548,29 @@ var Switch = function(_param) {
         "defaultSelected"
     ]);
     var _useOnToggle = _sliced_to_array(useOnToggle(isSelected, defaultSelected), 2), isToggled = _useOnToggle[0], handleToggle = _useOnToggle[1];
-    return /* @__PURE__ */ jsx(SwitchContainer, {
+    var handleOnChange = function(e) {
+        handleToggle();
+        onChange && onChange(e);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(SwitchContainer, {
         isDisabled: disabled,
-        children: /* @__PURE__ */ 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"
+        }))
     });
 };
-var Switch_default = Switch;
+exports.Switch = Switch;
 // src/components/Chips/ChipToggle/ChipToggle.types.ts
-var ChipToggleStyleVariants = {
+exports.ChipToggleStyleVariants = {
     SOLID: "SOLID"
 };
-var ChipToggleSizeVariants = {
+exports.ChipToggleSizeVariants = {
     S: "S",
     XS: "XS"
 };
@@ -1396,7 +1578,7 @@ var getDisabledStyle = function(disabled) {
     if (!disabled) {
         return;
     }
-    return css(_templateObject17());
+    return react.css(_templateObject17());
 };
 // src/components/Chips/ChipToggle/ChipToggle.styled.ts
 var getLineTypographyBySizeVar = function(sizeVar) {
@@ -1411,16 +1593,16 @@ var getLineTypographyBySizeVar = function(sizeVar) {
 };
 var solidStyle = function(param) {
     var isSelected = param.isSelected, color = param.color, radius = param.radius;
-    return css(_templateObject20(), colorTokens.neutral150, borderRadiusTokens.borderRadius06, colorTokens.neutral400, colorTokens.neutral200, radius && css(_templateObject18(), borderRadiusTokens.borderRadius16), isSelected && css(_templateObject19(), colorTokens[color], colorTokens["neutral0"], colorTokens[color]));
+    return react.css(_templateObject20(), exports.colorTokens.neutral150, exports.borderRadiusTokens.borderRadius06, exports.colorTokens.neutral400, exports.colorTokens.neutral200, radius && react.css(_templateObject18(), exports.borderRadiusTokens.borderRadius16), isSelected && react.css(_templateObject19(), exports.colorTokens[color], exports.colorTokens["neutral0"], exports.colorTokens[color]));
 };
-var StyledChip = styled5.button(_templateObject21(), function(props) {
+var StyledChip = styled5__default.default.button(_templateObject21(), function(props) {
     return props.styleVar === "SOLID" && solidStyle(props);
 }, function(param) {
     var disabled = param.disabled;
     return getDisabledStyle(disabled);
 });
 var ChipToggle = function(_param) {
-    var text = _param.text, isSelected = _param.isSelected, defaultSelected = _param.defaultSelected, _param_color = _param.color, color = _param_color === void 0 ? "neutral600" : _param_color, _param_styleVar = _param.styleVar, styleVar = _param_styleVar === void 0 ? ChipToggleStyleVariants.SOLID : _param_styleVar, sizeVar = _param.sizeVar, leftSource = _param.leftSource, rightSource = _param.rightSource, _param_onClick = _param.onClick, onClick = _param_onClick === void 0 ? noop : _param_onClick, _param_disabled = _param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, rest = _object_without_properties(_param, [
+    var text = _param.text, isSelected = _param.isSelected, defaultSelected = _param.defaultSelected, _param_color = _param.color, color = _param_color === void 0 ? "neutral600" : _param_color, _param_styleVar = _param.styleVar, styleVar = _param_styleVar === void 0 ? exports.ChipToggleStyleVariants.SOLID : _param_styleVar, sizeVar = _param.sizeVar, leftSource = _param.leftSource, rightSource = _param.rightSource, _param_onClick = _param.onClick, onClick = _param_onClick === void 0 ? utils.noop : _param_onClick, _param_disabled = _param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, rest = _object_without_properties(_param, [
         "text",
         "isSelected",
         "defaultSelected",
@@ -1437,16 +1619,17 @@ var ChipToggle = function(_param) {
         !disabled && handleToggle();
         !disabled && onClick && onClick(e);
     };
-    return /* @__PURE__ */ jsxs(StyledChip, _object_spread_props(_object_spread({}, rest), {
+    return /* @__PURE__ */ jsxRuntime.jsxs(StyledChip, _object_spread_props(_object_spread({}, rest), {
         color: color,
         isSelected: isToggled,
         styleVar: styleVar,
         sizeVar: sizeVar,
         onClick: handleClick,
         disabled: disabled,
+        "data-shoplflow": "ChipToggle",
         children: [
             leftSource,
-            /* @__PURE__ */ jsx(Text_default, {
+            /* @__PURE__ */ jsxRuntime.jsx(exports.Text, {
                 typography: getLineTypographyBySizeVar(sizeVar),
                 children: text
             }),
@@ -1454,7 +1637,7 @@ var ChipToggle = function(_param) {
         ]
     }));
 };
-var ChipToggle_default = ChipToggle;
+exports.ChipToggle = ChipToggle;
 // src/utils/getNextColor.ts
 var getNextColor = function(color) {
     var step = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 1;
@@ -1462,12 +1645,12 @@ var getNextColor = function(color) {
     var colorNumber = color.replace(/[a-z]|_/g, "");
     var nextColorNumber = Number(colorNumber) + 100 * step;
     var nextColorToken = "".concat(colorName).concat(nextColorNumber);
-    var colorKeysOfColorName = Object.keys(colorTokens).filter(function(colorToken) {
+    var colorKeysOfColorName = Object.keys(exports.colorTokens).filter(function(colorToken) {
         return colorToken.includes(colorName);
     }).sort(function(a, b) {
         return Number(a.replace(/[a-z]|_/g, "")) - Number(b.replace(/[a-z]|_/g, ""));
     });
-    var colorTokenKeys = Object.keys(colorTokens);
+    var colorTokenKeys = Object.keys(exports.colorTokens);
     var findColorToken = colorTokenKeys.find(function(colorToken) {
         return colorToken === nextColorToken;
     });
@@ -1487,21 +1670,21 @@ var getLineTypographyBySizeVar2 = function(sizeVar) {
 };
 var lineStyle = function(param) {
     var color = param.color;
-    return css(_templateObject22(), colorTokens.neutral0, colorTokens[color], borderRadiusTokens.borderRadius20, colorTokens[getNextColor(color, 2)], colorTokens[getNextColor(color, 4)]);
+    return react.css(_templateObject22(), exports.colorTokens.neutral0, exports.colorTokens[color], exports.borderRadiusTokens.borderRadius20, exports.colorTokens[getNextColor(color, 2)], exports.colorTokens[getNextColor(color, 4)]);
 };
 var getStyleBySizeVar = function(sizeVar) {
     switch(sizeVar){
         case "XS":
-            return css(_templateObject23());
+            return react.css(_templateObject23());
         case "S":
-            return css(_templateObject24());
+            return react.css(_templateObject24());
         default:
-            return css(_templateObject25());
+            return react.css(_templateObject25());
     }
 };
-var StyledChipButton = styled5.button(_templateObject26(), function(param) {
+var StyledChipButton = styled5__default.default.button(_templateObject26(), function(param) {
     var background2 = param.background;
-    return background2 && colorTokens[background2];
+    return background2 && exports.colorTokens[background2];
 }, function(param) {
     var sizeVar = param.sizeVar;
     return getStyleBySizeVar(sizeVar);
@@ -1512,15 +1695,15 @@ var StyledChipButton = styled5.button(_templateObject26(), function(param) {
     return getDisabledStyle(disabled);
 });
 // src/components/Chips/ChipButton/ChipButton.types.ts
-var ChipButtonStyleVariants = {
+exports.ChipButtonStyleVariants = {
     LINE: "LINE"
 };
-var ChipButtonSizeVariants = {
+exports.ChipButtonSizeVariants = {
     S: "S",
     XS: "XS"
 };
 var ChipButton = function(_param) {
-    var _param_styleVar = _param.styleVar, styleVar = _param_styleVar === void 0 ? ChipButtonStyleVariants.LINE : _param_styleVar, _param_color = _param.color, color = _param_color === void 0 ? "neutral200" : _param_color, _param_sizeVar = _param.sizeVar, sizeVar = _param_sizeVar === void 0 ? ChipButtonSizeVariants.S : _param_sizeVar, text = _param.text, _param_onClick = _param.onClick, onClick = _param_onClick === void 0 ? noop : _param_onClick, _param_disabled = _param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, rest = _object_without_properties(_param, [
+    var _param_styleVar = _param.styleVar, styleVar = _param_styleVar === void 0 ? exports.ChipButtonStyleVariants.LINE : _param_styleVar, _param_color = _param.color, color = _param_color === void 0 ? "neutral200" : _param_color, _param_sizeVar = _param.sizeVar, sizeVar = _param_sizeVar === void 0 ? exports.ChipButtonSizeVariants.S : _param_sizeVar, text = _param.text, _param_onClick = _param.onClick, onClick = _param_onClick === void 0 ? utils.noop : _param_onClick, _param_disabled = _param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, rest = _object_without_properties(_param, [
         "styleVar",
         "color",
         "sizeVar",
@@ -1531,44 +1714,45 @@ var ChipButton = function(_param) {
     var handleOnClick = function(e) {
         !disabled && onClick(e);
     };
-    return /* @__PURE__ */ jsx(StyledChipButton, _object_spread_props(_object_spread({
+    return /* @__PURE__ */ jsxRuntime.jsx(StyledChipButton, _object_spread_props(_object_spread({
         styleVar: styleVar,
         color: color
     }, rest), {
         onClick: handleOnClick,
         disabled: disabled,
-        children: /* @__PURE__ */ jsx(Text_default, {
+        "data-shoplflow": "ChipButton",
+        children: /* @__PURE__ */ jsxRuntime.jsx(exports.Text, {
             typography: getLineTypographyBySizeVar2(sizeVar),
             children: text
         })
     }));
 };
-var ChipButton_default = ChipButton;
+exports.ChipButton = ChipButton;
 var getStyleByStyleVar = function(styleVar, disabled) {
     switch(styleVar){
         case "PRIMARY":
-            return css(_templateObject27(), colorTokens.primary400, colorTokens.primary300, !disabled && colorTokens.primary400);
+            return react.css(_templateObject27(), exports.colorTokens.primary400, exports.colorTokens.primary300, !disabled && exports.colorTokens.primary400);
         case "SECONDARY":
-            return css(_templateObject28(), colorTokens.neutral350, colorTokens.neutral0, !disabled && colorTokens.neutral100);
+            return react.css(_templateObject28(), exports.colorTokens.neutral350, exports.colorTokens.neutral0, !disabled && exports.colorTokens.neutral100);
         case "SOLID":
-            return css(_templateObject29(), colorTokens.coolgray100, colorTokens.coolgray50, !disabled && colorTokens.coolgray100);
+            return react.css(_templateObject29(), exports.colorTokens.coolgray100, exports.colorTokens.coolgray50, !disabled && exports.colorTokens.coolgray100);
         case "GHOST":
-            return css(_templateObject30(), !disabled && colorTokens.neutral400_5);
+            return react.css(_templateObject30(), !disabled && exports.colorTokens.neutral400_5);
         default:
-            return css(_templateObject31(), colorTokens.primary400, colorTokens.primary300);
+            return react.css(_templateObject31(), exports.colorTokens.primary400, exports.colorTokens.primary300);
     }
 };
 var getStyleBySizeVar2 = function(sizeVar) {
     switch(sizeVar){
         case "M":
-            return css(_templateObject32());
+            return react.css(_templateObject32());
         case "S":
-            return css(_templateObject33());
+            return react.css(_templateObject33());
         default:
-            return css(_templateObject34());
+            return react.css(_templateObject34());
     }
 };
-var StyledButton = styled5.button(_templateObject35(), spacingTokens.spacing04, borderRadiusTokens.borderRadius06, spacingTokens.spacing12, 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) {
@@ -1578,8 +1762,8 @@ var StyledButton = styled5.button(_templateObject35(), spacingTokens.spacing04,
     var disabled = param.disabled;
     return getDisabledStyle(disabled);
 });
-var Button = 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",
@@ -1589,7 +1773,7 @@ var Button = forwardRef(function(_param, ref) {
         "leftSource",
         "rightSource"
     ]);
-    return /* @__PURE__ */ jsxs(StyledButton, _object_spread_props(_object_spread({
+    return /* @__PURE__ */ jsxRuntime.jsxs(StyledButton, _object_spread_props(_object_spread({
         styleVar: styleVar,
         sizeVar: sizeVar,
         className: styleVar,
@@ -1598,9 +1782,12 @@ var Button = forwardRef(function(_param, ref) {
         ref: ref,
         color: color
     }, rest), {
+        "data-shoplflow": "Button",
         children: [
             leftSource,
-            /* @__PURE__ */ jsx(Text_default, {
+            /* @__PURE__ */ jsxRuntime.jsx(exports.Text, {
+                wordBreak: "keep-all",
+                whiteSpace: "nowrap",
                 color: styleVar === "PRIMARY" ? "neutral0" : "neutral700",
                 typography: sizeVar === "M" ? "body1_400" : "body2_400",
                 children: children
@@ -1609,13 +1796,13 @@ var Button = forwardRef(function(_param, ref) {
         ]
     }));
 });
-var Button_default = Button;
+exports.Button = Button;
 // src/components/Buttons/Button/Button.types.ts
-var buttonSizeVar = {
+exports.buttonSizeVar = {
     S: "S",
     M: "M"
 };
-var buttonStyleVar = {
+exports.buttonStyleVar = {
     PRIMARY: "PRIMARY",
     SECONDARY: "SECONDARY",
     SOLID: "SOLID",
@@ -1624,56 +1811,34 @@ var buttonStyleVar = {
 var getWidthAndHeightFromSizeVar = function(sizeVar) {
     switch(sizeVar){
         case "M":
-            return css(_templateObject36());
+            return react.css(_templateObject36());
         case "S":
-            return css(_templateObject37());
+            return react.css(_templateObject37());
         default:
-            return css(_templateObject38());
+            return react.css(_templateObject38());
     }
 };
-var getHoverBackgroundFromStyleVar = function(styleVar) {
+var getStyleByStyleVar2 = function(styleVar) {
     switch(styleVar){
         case "SOLID":
-            return colorTokens.neutral100;
+            return react.css(_templateObject39(), exports.colorTokens.neutral200, exports.colorTokens.neutral100);
         case "GHOST":
-            return colorTokens.neutral400_5;
+            return react.css(_templateObject40(), exports.colorTokens.neutral400_5);
         default:
-            return colorTokens.neutral100;
+            return react.css(_templateObject41(), exports.colorTokens.neutral200, exports.colorTokens.neutral100);
     }
 };
-var getBorderByStyleVar = function(styleVar) {
-    if (!styleVar) {
-        return;
-    }
-    if (styleVar === "SOLID") {
-        return css(_templateObject39(), colorTokens.neutral200);
-    }
-};
-var StyledIconButton = styled5.button(_templateObject41(), borderRadiusTokens.borderRadius06, 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 css(_templateObject40(), 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 = 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",
@@ -1681,57 +1846,507 @@ var IconButton = forwardRef(function(_param, ref) {
         "as",
         "children"
     ]);
-    return /* @__PURE__ */ jsx(StyledIconButton, _object_spread_props(_object_spread({
+    return /* @__PURE__ */ jsxRuntime.jsx(StyledIconButton, _object_spread_props(_object_spread({
         styleVar: styleVar,
         sizeVar: sizeVar,
         disabled: disabled,
         as: as,
         ref: ref
     }, rest), {
+        "data-shoplflow": "IconButton",
         children: children
     }));
 });
-var IconButton_default = IconButton;
+exports.IconButton = IconButton;
 // src/components/Buttons/IconButton/IconButton.types.ts
-var iconButtonSizeVar = {
+exports.iconButtonSizeVar = {
     S: "S",
     M: "M"
 };
-var iconButtonStyleVar = {
+exports.iconButtonStyleVar = {
     SOLID: "SOLID",
     GHOST: "GHOST"
 };
-var Container2 = styled5.div(_templateObject42());
-var IconButton2 = styled5.button(_templateObject43(), 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 colorTokens[color];
+    return exports.colorTokens[color];
 }, function(param) {
     var color = param.color;
-    return colorTokens[getNextColor(color, 1)];
+    return exports.colorTokens[getNextColor(color, 1)];
 });
-var MinusButton = 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__ */ jsx(Container2, {
-        children: /* @__PURE__ */ jsx(IconButton2, _object_spread_props(_object_spread({
+    return /* @__PURE__ */ jsxRuntime.jsx(Container2, {
+        "data-shoplflow": "minusButton",
+        children: /* @__PURE__ */ jsxRuntime.jsx(IconButton2, _object_spread_props(_object_spread({
             color: color,
             onClick: onClick,
             ref: ref
         }, rest), {
-            children: /* @__PURE__ */ jsxs("svg", {
+            children: /* @__PURE__ */ jsxRuntime.jsxs("svg", {
                 width: "16",
                 height: "16",
                 viewBox: "0 0 16 16",
                 fill: "none",
                 xmlns: "http://www.w3.org/2000/svg",
                 children: [
-                    /* @__PURE__ */ jsx("path", {
+                    /* @__PURE__ */ jsxRuntime.jsx("path", {
                         d: "M0 4C0 1.79086 1.79086 0 4 0H12C14.2091 0 16 1.79086 16 4V12C16 14.2091 14.2091 16 12 16H4C1.79086 16 0 14.2091 0 12V4Z",
                         fill: "none"
                     }),
-                    /* @__PURE__ */ jsx("path", {
+                    /* @__PURE__ */ jsxRuntime.jsx("path", {
                         fillRule: "evenodd",
                         clipRule: "evenodd",
                         d: "M3 8C3 7.44772 3.44772 7 4 7H12C12.5523 7 13 7.44772 13 8C13 8.55228 12.5523 9 12 9H4C3.44772 9 3 8.55228 3 8Z",
@@ -1742,6 +2357,5 @@ var MinusButton = forwardRef(function(_param, ref) {
         }))
     });
 });
-var MinusButton_default = MinusButton;
-export { Button_default as Button, ChipButton_default as ChipButton, ChipButtonSizeVariants, ChipButtonStyleVariants, ChipToggle_default as ChipToggle, ChipToggleSizeVariants, ChipToggleStyleVariants, IconButton_default as IconButton, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, MinusButton_default as MinusButton, Modal, ModalPortal_default as ModalProvider, ModalSize, MotionStack, ShoplflowProvider_default as ShoplflowProvider, Stack_default as Stack, StyledStack, Switch_default as Switch, Text_default as Text, borderRadiusTokens, boxShadowTokens, buttonSizeVar, buttonStyleVar, colorTokens, fontWeightTokens, getDomain, iconButtonSizeVar, iconButtonStyleVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalStore, useModalValue }; //# sourceMappingURL=out.js.map
+exports.MinusButton = MinusButton; //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map