@shoplflow/base 0.12.0 → 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];
@@ -771,28 +772,57 @@ function _templateObject56() {
     };
     return data;
 }
-import React3, { createContext, forwardRef, useState, useId, useCallback, useEffect, useContext, useMemo } from "react";
-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 { noop, useParentElementClick, useResizeObserver, isNullOrUndefined } from "@shoplflow/utils";
-import { css } from "@emotion/react";
-import Scrollbars from "react-custom-scrollbars-2";
-import * as ShoplAssets from "@shoplflow/shopl-assets";
-import * as HadaAssets from "@shoplflow/hada-assets";
+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() {
+exports.useDomain = function() {
     var domain = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "SHOPL";
-    var _useState = _sliced_to_array(useState(void 0), 2), domainType = _useState[0], setDomainType = _useState[1];
-    useEffect(function() {
+    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;
         }
@@ -804,7 +834,7 @@ var useDomain = function() {
         domainType
     ];
 };
-var getDomain = function() {
+exports.getDomain = function() {
     return document.documentElement.dataset.shoplflow;
 };
 // src/animation/fadeInOut.ts
@@ -825,10 +855,10 @@ 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",
@@ -838,19 +868,19 @@ var BackDrop = function(param) {
     });
 };
 var BackDrop_default = BackDrop;
-var ModalHandlerContext = createContext({
-    addModal: noop,
-    removeModal: noop
+var ModalHandlerContext = React3.createContext({
+    addModal: utils.noop,
+    removeModal: utils.noop
 });
-var ModalContext = createContext([]);
-var SpaceMarginWrapper = styled5(motion.div)(_templateObject1());
+var ModalContext = React3.createContext([]);
+var SpaceMarginWrapper = styled5__default.default(framerMotion.motion.div)(_templateObject1());
 var ModalPortal = function() {
-    var modal = useContext(ModalContext);
-    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);
@@ -858,10 +888,10 @@ var ModalPortal = function() {
         }), document.body)
     });
 };
-var ModalPortal_default = ModalPortal;
+exports.ModalProvider = ModalPortal;
 var ModalProvider = function(param) {
     var children = param.children;
-    var _useState = _sliced_to_array(useState([]), 2), openedModals = _useState[0], setOpenedModals = _useState[1];
+    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) {
@@ -887,8 +917,8 @@ var ModalProvider = function(param) {
         }, 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);
+        var isNotIncludeAllProps = !id && Boolean(utils.isNullOrUndefined(deps));
+        var isIncludeDeps = Boolean(Boolean(!utils.isNullOrUndefined(deps)) && !id);
         if (isIncludeAllProps) {
             throw new Error("id와 deps는 동시에 사용할 수 없습니다.");
         }
@@ -919,15 +949,15 @@ var ModalProvider = function(param) {
             return;
         }
     };
-    var dispatch = useMemo(function() {
+    var dispatch = React3.useMemo(function() {
         return {
             addModal: addModal,
             removeModal: removeModal
         };
     }, []);
-    return /* @__PURE__ */ jsx(ModalContext.Provider, {
+    return /* @__PURE__ */ jsxRuntime.jsx(ModalContext.Provider, {
         value: openedModals,
-        children: /* @__PURE__ */ jsx(ModalHandlerContext.Provider, {
+        children: /* @__PURE__ */ jsxRuntime.jsx(ModalHandlerContext.Provider, {
             value: dispatch,
             children: children
         })
@@ -936,24 +966,24 @@ var ModalProvider = function(param) {
 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);
-    return /* @__PURE__ */ jsxs(ModalProvider_default, {
+    exports.useDomain(domain);
+    return /* @__PURE__ */ jsxRuntime.jsxs(ModalProvider_default, {
         children: [
-            /* @__PURE__ */ jsx(ModalPortal_default, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(exports.ModalProvider, {}),
             children
         ]
     });
 };
-var ShoplflowProvider_default = ShoplflowProvider;
-var useHandleModal = function() {
-    var _useContext = useContext(ModalHandlerContext), addModal = _useContext.addModal, removeModal = _useContext.removeModal;
+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
     };
 };
-var useModalValue = function() {
-    var modal = useContext(ModalContext);
+exports.useModalValue = function() {
+    var modal = React3.useContext(ModalContext);
     return {
         modal: modal
     };
@@ -962,7 +992,7 @@ var useModalValue = function() {
 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
@@ -973,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,
@@ -1029,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,
@@ -1089,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,
@@ -1102,7 +1132,7 @@ var spacingTokens = {
     spacing40: spacing40
 };
 var dropShadow = "var(--dropShadow)";
-var boxShadowTokens = {
+exports.boxShadowTokens = {
     dropShadow: dropShadow
 };
 var heading1_700 = ".heading1_700";
@@ -1125,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,
@@ -1147,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) {
@@ -1164,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;
@@ -1173,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",
@@ -1194,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,
@@ -1220,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);
@@ -1244,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",
@@ -1263,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,
@@ -1276,7 +1306,7 @@ var Text = forwardRef(function(_param, ref) {
         children: children
     }));
 });
-var Text_default = Text;
+exports.Text = Text;
 var MODAL_SIZE_XXS = 400;
 var MODAL_SIZE_XS = 500;
 var MODAL_SIZE_S = 560;
@@ -1306,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) {
@@ -1320,21 +1350,21 @@ 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 = {
+exports.ModalSize = {
     XXS: "XXS",
     XS: "XS",
     S: "S",
@@ -1343,43 +1373,43 @@ var ModalSize = {
     XL: "XL",
     XXL: "XXL"
 };
-var MODAL_HEADER_KEY = Symbol("MODAL_HEADER");
-var MODAL_FOOTER_KEY = Symbol("MODAL_FOOTER");
+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 = React3.Children.toArray(children);
+    var ref = utils.useParentElementClick(outsideClick);
+    var childrenArray = React3__default.default.Children.toArray(children);
     var findHeader = childrenArray.find(function(child) {
-        if (!React3.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 (!React3.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 = React3.Children.map(childrenArray, function(child) {
-        if (!React3.isValidElement(child)) {
+    var addPropInChildren = React3__default.default.Children.map(childrenArray, function(child) {
+        if (!React3__default.default.isValidElement(child)) {
             return child;
         }
-        return React3.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",
@@ -1389,21 +1419,21 @@ var ModalContainer = function(_param) {
 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;
@@ -1416,7 +1446,7 @@ var ModalBody = function(param) {
         isIncludeFooter,
         isIncludeHeader
     ]);
-    var headerFooterHeight = useMemo(function() {
+    var headerFooterHeight = React3.useMemo(function() {
         return getHeaderFooterHeight();
     }, [
         getHeaderFooterHeight
@@ -1430,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(),
@@ -1445,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
@@ -1456,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);
         }
@@ -1496,7 +1526,7 @@ var useOnToggle = function(selected, defaultSelected) {
         isControlled,
         selected
     ]);
-    useEffect(function() {
+    React3.useEffect(function() {
         if (defaultSelected) {
             setIsToggle(defaultSelected);
         }
@@ -1522,9 +1552,9 @@ var Switch = function(_param) {
         handleToggle();
         onChange && onChange(e);
     };
-    return /* @__PURE__ */ jsx(SwitchContainer, {
+    return /* @__PURE__ */ jsxRuntime.jsx(SwitchContainer, {
         isDisabled: disabled,
-        children: /* @__PURE__ */ jsx(StyledSwitch, _object_spread_props(_object_spread({
+        children: /* @__PURE__ */ jsxRuntime.jsx(StyledSwitch, _object_spread_props(_object_spread({
             type: "checkbox",
             checked: isToggled,
             disabled: disabled,
@@ -1535,12 +1565,12 @@ var Switch = function(_param) {
         }))
     });
 };
-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"
 };
@@ -1548,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) {
@@ -1563,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",
@@ -1589,7 +1619,7 @@ 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,
@@ -1599,7 +1629,7 @@ var ChipToggle = function(_param) {
         "data-shoplflow": "ChipToggle",
         children: [
             leftSource,
-            /* @__PURE__ */ jsx(Text_default, {
+            /* @__PURE__ */ jsxRuntime.jsx(exports.Text, {
                 typography: getLineTypographyBySizeVar(sizeVar),
                 children: text
             }),
@@ -1607,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;
@@ -1615,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;
     });
@@ -1640,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);
@@ -1665,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",
@@ -1684,45 +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,
         "data-shoplflow": "ChipButton",
-        children: /* @__PURE__ */ jsx(Text_default, {
+        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(), function(param) {
+var StyledButton = styled5__default.default.button(_templateObject35(), function(param) {
     var styleVar = param.styleVar, disabled = param.disabled;
     return getStyleByStyleVar(styleVar, disabled);
 }, function(param) {
@@ -1732,7 +1762,7 @@ var StyledButton = styled5.button(_templateObject35(), function(param) {
     var disabled = param.disabled;
     return getDisabledStyle(disabled);
 });
-var Button = forwardRef(function(_param, ref) {
+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",
@@ -1743,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,
@@ -1755,7 +1785,7 @@ var Button = forwardRef(function(_param, ref) {
         "data-shoplflow": "Button",
         children: [
             leftSource,
-            /* @__PURE__ */ jsx(Text_default, {
+            /* @__PURE__ */ jsxRuntime.jsx(exports.Text, {
                 wordBreak: "keep-all",
                 whiteSpace: "nowrap",
                 color: styleVar === "PRIMARY" ? "neutral0" : "neutral700",
@@ -1766,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",
@@ -1781,24 +1811,24 @@ 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 getStyleByStyleVar2 = function(styleVar) {
     switch(styleVar){
         case "SOLID":
-            return css(_templateObject39(), colorTokens.neutral200, colorTokens.neutral100);
+            return react.css(_templateObject39(), exports.colorTokens.neutral200, exports.colorTokens.neutral100);
         case "GHOST":
-            return css(_templateObject40(), colorTokens.neutral400_5);
+            return react.css(_templateObject40(), exports.colorTokens.neutral400_5);
         default:
-            return css(_templateObject41(), colorTokens.neutral200, colorTokens.neutral100);
+            return react.css(_templateObject41(), exports.colorTokens.neutral200, exports.colorTokens.neutral100);
     }
 };
-var StyledIconButton = styled5.button(_templateObject42(), 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;
     return getStyleByStyleVar2(styleVar);
 }, function(param) {
@@ -1808,7 +1838,7 @@ var StyledIconButton = styled5.button(_templateObject42(), borderRadiusTokens.bo
     var disabled = param.disabled;
     return getDisabledStyle(disabled);
 });
-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",
@@ -1816,7 +1846,7 @@ 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,
@@ -1827,33 +1857,33 @@ var IconButton = forwardRef(function(_param, ref) {
         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 informationStyle = css(_templateObject43(), colorTokens.neutral100, colorTokens.neutral600, colorTokens.neutral600);
-var alertStyle = css(_templateObject44(), colorTokens.red100, colorTokens.red300, colorTokens.red300);
-var StyledCallout = styled5.div(_templateObject45(), borderRadiusTokens.borderRadius08, 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.svg(_templateObject46());
-styled5.div(_templateObject47());
+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__ */ jsx(StyledCallout, _object_spread_props(_object_spread({}, rest), {
+    return /* @__PURE__ */ jsxRuntime.jsx(StyledCallout, _object_spread_props(_object_spread({}, rest), {
         styleVar: styleVar,
         "data-shoplflow": "Callout",
         children: children
@@ -1863,27 +1893,27 @@ var CalloutText = function(_param) {
     var children = _param.children, rest = _object_without_properties(_param, [
         "children"
     ]);
-    return /* @__PURE__ */ jsx(Text_default, _object_spread_props(_object_spread({}, rest), {
+    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__ */ jsx(StyledCalloutIcon, {
+    return /* @__PURE__ */ jsxRuntime.jsx(StyledCalloutIcon, {
         as: iconSource
     });
 };
 Callout.Text = CalloutText;
 Callout.Icon = CalloutIcon;
-var Callout_default = Callout;
+exports.Callout = Callout;
 // src/components/Callout/Callout.types.ts
-var CalloutTypes = {
+exports.CalloutTypes = {
     INFORMATION: "INFORMATION",
     ALERT: "ALERT"
 };
 // src/components/Icon/Icon.types.ts
-var IconSizeVariants = {
+exports.IconSizeVariants = {
     X_SMALL: "X_SMALL",
     SMALL: "SMALL",
     MEDIUM: "MEDIUM",
@@ -1893,21 +1923,21 @@ var IconSizeVariants = {
 // src/components/Icon/Icon.styled.ts
 var getIconSize = function(size) {
     switch(size){
-        case IconSizeVariants.X_SMALL:
+        case exports.IconSizeVariants.X_SMALL:
             return "12px";
-        case IconSizeVariants.SMALL:
+        case exports.IconSizeVariants.SMALL:
             return "20px";
-        case IconSizeVariants.MEDIUM:
+        case exports.IconSizeVariants.MEDIUM:
             return "24px";
-        case IconSizeVariants.LARGE:
+        case exports.IconSizeVariants.LARGE:
             return "30px";
-        case IconSizeVariants.X_LARGE:
+        case exports.IconSizeVariants.X_LARGE:
             return "36px";
         default:
             return "24px";
     }
 };
-var StyledIcon = styled5.svg(_templateObject48(), function(param) {
+exports.StyledIcon = styled5__default.default.svg(_templateObject48(), function(param) {
     var sizeVar = param.sizeVar;
     return sizeVar && getIconSize(sizeVar);
 }, function(param) {
@@ -1921,38 +1951,38 @@ var StyledIcon = styled5.svg(_templateObject48(), function(param) {
     return sizeVar && getIconSize(sizeVar);
 }, function(param) {
     var color = param.color;
-    return color && colorTokens[color];
+    return color && exports.colorTokens[color];
 });
-var Icon = forwardRef(function(_param, ref) {
+var Icon = React3.forwardRef(function(_param, ref) {
     var iconSource = _param.iconSource, rest = _object_without_properties(_param, [
         "iconSource"
     ]);
-    return /* @__PURE__ */ jsx(StyledIcon, _object_spread_props(_object_spread({
+    return /* @__PURE__ */ jsxRuntime.jsx(exports.StyledIcon, _object_spread_props(_object_spread({
         as: iconSource,
         ref: ref
     }, rest), {
         "data-shoplflow": "Icon"
     }));
 });
-var Icon_default = Icon;
-var StyledInput = styled5.input(_templateObject49(), colorTokens.neutral350);
-var RightElementWrapper = styled5.div(_templateObject50());
-var Wrapper = styled5.div(_templateObject51());
+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__ */ jsxs(Wrapper, {
+    return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, {
         children: [
-            /* @__PURE__ */ jsx(Text_default, {
+            /* @__PURE__ */ jsxRuntime.jsx(exports.Text, {
                 typography: "caption_400",
                 color: "neutral400",
                 children: currentLength
             }),
-            /* @__PURE__ */ jsx(Text_default, {
+            /* @__PURE__ */ jsxRuntime.jsx(exports.Text, {
                 typography: "caption_400",
                 color: "neutral350",
                 children: "/"
             }),
-            /* @__PURE__ */ jsx(Text_default, {
+            /* @__PURE__ */ jsxRuntime.jsx(exports.Text, {
                 typography: "caption_400",
                 color: "neutral350",
                 children: maxLength
@@ -1961,15 +1991,15 @@ var TextCounter = function(param) {
     });
 };
 var TextCounter_default = TextCounter;
-createContext({
+React3.createContext({
     domain: "SHOPL",
     handleToggleTheme: function() {}
 });
 // src/styles/IconAssets.tsx
 var assetFunction = function(iconName, domainProps) {
-    var domain = domainProps !== null && domainProps !== void 0 ? domainProps : getDomain();
-    var HadaIcon = HadaAssets[iconName];
-    var ShoplIcon = ShoplAssets[iconName];
+    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) {
@@ -2000,7 +2030,7 @@ function useMergeRefs() {
     for(var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++){
         refs[_key] = arguments[_key];
     }
-    return useMemo(function() {
+    return React3.useMemo(function() {
         return mergeRefs.apply(void 0, _to_consumable_array(refs));
     }, refs);
 }
@@ -2008,27 +2038,27 @@ var getBorderColorByStatus = function(param) {
     var isFocused = param.isFocused, isError = param.isError, isHovered = param.isHovered, disabled = param.disabled;
     if (!disabled) {
         if (isError) {
-            return colorTokens.red300;
+            return exports.colorTokens.red300;
         }
         if (isFocused) {
-            return colorTokens.primary300;
+            return exports.colorTokens.primary300;
         }
         if (isHovered) {
-            return colorTokens.neutral700;
+            return exports.colorTokens.neutral700;
         }
     }
-    return colorTokens.neutral300;
+    return exports.colorTokens.neutral300;
 };
-var InputWrapper = styled5.label(_templateObject52(), function(param) {
+var InputWrapper = styled5__default.default.label(_templateObject52(), function(param) {
     var direction = param.direction;
     return direction || "row";
 }, function(props) {
     return getBorderColorByStatus(props);
-}, colorTokens.neutral0, function(param) {
+}, exports.colorTokens.neutral0, function(param) {
     var disabled = param.disabled;
     return getDisabledStyle(disabled);
 });
-forwardRef(function(_param, ref) {
+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",
@@ -2042,20 +2072,20 @@ forwardRef(function(_param, ref) {
         "maxLength",
         "className"
     ]);
-    var _useState = _sliced_to_array(useState(""), 2), text = _useState[0], setText = _useState[1];
-    var _useState1 = _sliced_to_array(useState(false), 2), isFocused = _useState1[0], setIsFocused = _useState1[1];
-    var _useState2 = _sliced_to_array(useState("text"), 2), type = _useState2[0], setType = _useState2[1];
-    var _useState3 = _sliced_to_array(useState(false), 2), isHovered = _useState3[0], setIsHovered = _useState3[1];
-    var uniqueId = useId();
-    var inputRef = React3.useRef(null);
+    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 = useCallback(function(value2) {
+    var convertToString = React3.useCallback(function(value2) {
         if (typeof value2 !== "number") {
             return typeof value2 === "string" ? value2 : value2.join("");
         }
         return String(value2);
     }, []);
-    var sliceText = useCallback(function(value2) {
+    var sliceText = React3.useCallback(function(value2) {
         if (maxLength && value2.length > maxLength) {
             return value2.slice(0, maxLength);
         }
@@ -2096,7 +2126,7 @@ forwardRef(function(_param, ref) {
             setType("password");
         }
     };
-    useEffect(function() {
+    React3.useEffect(function() {
         if (defaultValue) {
             var convertString = convertToString(defaultValue);
             var slicedText = sliceText(convertString);
@@ -2108,7 +2138,7 @@ forwardRef(function(_param, ref) {
         maxLength,
         sliceText
     ]);
-    useEffect(function() {
+    React3.useEffect(function() {
         if (value) {
             var convertString = convertToString(value);
             var slicedText = sliceText(convertString);
@@ -2120,12 +2150,12 @@ forwardRef(function(_param, ref) {
         sliceText,
         value
     ]);
-    useEffect(function() {
+    React3.useEffect(function() {
         setType(initialType);
     }, [
         initialType
     ]);
-    return /* @__PURE__ */ jsxs(InputWrapper, {
+    return /* @__PURE__ */ jsxRuntime.jsxs(InputWrapper, {
         htmlFor: uniqueId,
         isFocused: isFocused,
         disabled: disabled,
@@ -2135,8 +2165,8 @@ forwardRef(function(_param, ref) {
         onMouseLeave: handleOnMouseLeave,
         "data-shoplflow": "input",
         children: [
-            /* @__PURE__ */ jsx(StyledInput, _object_spread({
-                className: "".concat(typographyTokens.body1_400, " ").concat(className),
+            /* @__PURE__ */ jsxRuntime.jsx(StyledInput, _object_spread({
+                className: "".concat(exports.typographyTokens.body1_400, " ").concat(className),
                 onFocus: handleOnFocus,
                 onBlur: handleOnBlur,
                 onChange: handleOnChange,
@@ -2147,26 +2177,26 @@ forwardRef(function(_param, ref) {
                 id: uniqueId,
                 ref: refs
             }, rest)),
-            /* @__PURE__ */ jsxs(RightElementWrapper, {
+            /* @__PURE__ */ jsxRuntime.jsxs(RightElementWrapper, {
                 children: [
-                    maxLength && isFocused && /* @__PURE__ */ jsx(TextCounter_default, {
+                    maxLength && isFocused && /* @__PURE__ */ jsxRuntime.jsx(TextCounter_default, {
                         currentLength: String(text).length,
                         maxLength: maxLength
                     }),
-                    isFocused && Boolean(String(text).length > 0) && /* @__PURE__ */ jsx(IconButton_default, {
+                    isFocused && Boolean(String(text).length > 0) && /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, {
                         sizeVar: "S",
                         onClick: handleOnClear,
                         styleVar: "GHOST",
-                        children: /* @__PURE__ */ jsx(Icon_default, {
+                        children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, {
                             iconSource: assetFunction("DeleteIcon"),
                             color: "neutral600"
                         })
                     }),
-                    initialType === "password" && /* @__PURE__ */ jsx(IconButton_default, {
+                    initialType === "password" && /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, {
                         sizeVar: "S",
                         onClick: handleTogglePasswordType,
                         styleVar: "GHOST",
-                        children: /* @__PURE__ */ jsx(Icon_default, {
+                        children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, {
                             color: "neutral600",
                             iconSource: assetFunction(type === "password" ? "ViewOffIcon" : "ViewOnIcon")
                         })
@@ -2176,15 +2206,15 @@ forwardRef(function(_param, ref) {
         ]
     });
 });
-var BottomElementWrapper = styled5.div(_templateObject53(), colorTokens.neutral0);
-var StyledTextarea = styled5.textarea(_templateObject54(), function(param) {
+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);
-}, colorTokens.neutral350);
-var TextArea = forwardRef(function(_param, ref) {
+}, 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",
@@ -2198,9 +2228,9 @@ var TextArea = forwardRef(function(_param, ref) {
         "onFocus",
         "minHeight"
     ]);
-    var _useState = _sliced_to_array(useState(""), 2), text = _useState[0], setText = _useState[1];
-    var _useState1 = _sliced_to_array(useState(false), 2), isFocused = _useState1[0], setIsFocused = _useState1[1];
-    var _useState2 = _sliced_to_array(useState(false), 2), isHovered = _useState2[0], setIsHovered = _useState2[1];
+    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);
     };
@@ -2225,7 +2255,7 @@ var TextArea = forwardRef(function(_param, ref) {
         }
         return String(value2);
     };
-    useEffect(function() {
+    React3.useEffect(function() {
         if (defaultValue) {
             var convertString = convertToString(defaultValue);
             if (maxLength && convertString.length > maxLength) {
@@ -2237,7 +2267,7 @@ var TextArea = forwardRef(function(_param, ref) {
         defaultValue,
         maxLength
     ]);
-    useEffect(function() {
+    React3.useEffect(function() {
         if (value) {
             var convertString = convertToString(value);
             if (maxLength && convertString.length > maxLength) {
@@ -2249,8 +2279,8 @@ var TextArea = forwardRef(function(_param, ref) {
         maxLength,
         value
     ]);
-    var uniqueId = useId();
-    return /* @__PURE__ */ jsxs(InputWrapper, {
+    var uniqueId = React3.useId();
+    return /* @__PURE__ */ jsxRuntime.jsxs(InputWrapper, {
         htmlFor: uniqueId,
         isFocused: isFocused,
         disabled: disabled,
@@ -2261,7 +2291,7 @@ var TextArea = forwardRef(function(_param, ref) {
         onMouseLeave: handleOnMouseLeave,
         "data-shoplflow": "text-area",
         children: [
-            /* @__PURE__ */ jsx(StyledTextarea, _object_spread({
+            /* @__PURE__ */ jsxRuntime.jsx(StyledTextarea, _object_spread({
                 className: "body1_400",
                 placeholder: placeholder,
                 onFocus: handleOnFocus,
@@ -2275,8 +2305,8 @@ var TextArea = forwardRef(function(_param, ref) {
                 disabled: disabled,
                 minHeight: minHeight
             }, rest)),
-            /* @__PURE__ */ jsx(BottomElementWrapper, {
-                children: maxLength && /* @__PURE__ */ jsx(TextCounter_default, {
+            /* @__PURE__ */ jsxRuntime.jsx(BottomElementWrapper, {
+                children: maxLength && /* @__PURE__ */ jsxRuntime.jsx(TextCounter_default, {
                     currentLength: String(text).length,
                     maxLength: maxLength
                 })
@@ -2284,39 +2314,39 @@ var TextArea = forwardRef(function(_param, ref) {
         ]
     });
 });
-var TextArea_default = TextArea;
-var Container2 = styled5.div(_templateObject55());
-var IconButton2 = styled5.button(_templateObject56(), borderRadiusTokens.borderRadius04, function(param) {
+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, {
+    return /* @__PURE__ */ jsxRuntime.jsx(Container2, {
         "data-shoplflow": "minusButton",
-        children: /* @__PURE__ */ jsx(IconButton2, _object_spread_props(_object_spread({
+        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",
@@ -2327,6 +2357,5 @@ var MinusButton = forwardRef(function(_param, ref) {
         }))
     });
 });
-var MinusButton_default = MinusButton;
-export { Button_default as Button, Callout_default as Callout, CalloutTypes, ChipButton_default as ChipButton, ChipButtonSizeVariants, ChipButtonStyleVariants, ChipToggle_default as ChipToggle, ChipToggleSizeVariants, ChipToggleStyleVariants, Icon_default as Icon, IconButton_default as IconButton, IconSizeVariants, 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, StyledIcon, StyledStack, Switch_default as Switch, Text_default as Text, TextArea_default as TextArea, borderRadiusTokens, boxShadowTokens, buttonSizeVar, buttonStyleVar, colorTokens, fontWeightTokens, getDomain, iconButtonSizeVar, iconButtonStyleVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue }; //# sourceMappingURL=out.js.map
+exports.MinusButton = MinusButton; //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map