@shoplflow/base 0.9.0 → 0.11.3

package/dist/index.js

@@ -0,0 +1,1747 @@
+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];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _array_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array(arr);
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _iterable_to_array(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _non_iterable_spread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _tagged_template_literal(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _to_consumable_array(arr) {
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+function _templateObject() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 20000;\n  width: 100%;\n  height: 100%;\n  background: rgba(51, 51, 51, 0.6);\n"
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    var data = _tagged_template_literal([
+        "\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-grow: 1;\n  z-index: 101;\n  padding: 32px 20px;\n  width: 100%;\n  height: 100%;\n"
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  width: ",
+        ";\n  height: ",
+        ";\n  flex-direction: ",
+        ";\n  align-items: ",
+        ";\n  justify-content: ",
+        ";\n  gap: ",
+        ";\n  flex-wrap: ",
+        ";\n  flex: ",
+        ";\n  background: ",
+        ";\n  border-radius: ",
+        ";\n  animation: 0.2s all ease-in-out;\n"
+    ]);
+    _templateObject2 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject3() {
+    var data = _tagged_template_literal([
+        "\n    display: -webkit-box;\n    line-clamp: ",
+        ";\n    -webkit-line-clamp: ",
+        ";\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  "
+    ]);
+    _templateObject3 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject4() {
+    var data = _tagged_template_literal([
+        "\n      text-decoration: ",
+        ";\n    "
+    ]);
+    _templateObject4 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject5() {
+    var data = _tagged_template_literal([
+        "\n      opacity: ",
+        ";\n    "
+    ]);
+    _templateObject5 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject6() {
+    var data = _tagged_template_literal([
+        "\n      word-break: ",
+        ";\n    "
+    ]);
+    _templateObject6 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject7() {
+    var data = _tagged_template_literal([
+        "\n  display: ",
+        ";\n  align-items: center;\n  color: ",
+        ";\n  ",
+        ";\n  text-align: ",
+        ";\n  white-space: ",
+        ";\n  ",
+        ";\n  ",
+        "\n  ",
+        ";\n"
+    ]);
+    _templateObject7 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject8() {
+    var data = _tagged_template_literal([
+        "\n      padding-top: 16px;\n      padding-bottom: 24px;\n    "
+    ]);
+    _templateObject8 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject9() {
+    var data = _tagged_template_literal([
+        "\n    padding-top: 24px;\n    padding-bottom: 24px;\n  "
+    ]);
+    _templateObject9 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject10() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  flex-direction: column;\n  border-radius: ",
+        ";\n  background: ",
+        ";\n  box-shadow: ",
+        ";\n  overflow: hidden;\n  flex-grow: 1;\n  height: ",
+        ";\n  min-height: 180px;\n  max-height: 1200px;\n  width: ",
+        "px;\n  max-width: ",
+        "px;\n"
+    ]);
+    _templateObject10 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject11() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  width: 100%;\n  min-height: 64px;\n  justify-content: space-between;\n  align-items: center;\n  padding: 12px 16px 12px 24px;\n  gap: 10px;\n"
+    ]);
+    _templateObject11 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject12() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  flex-direction: column;\n  background: ",
+        ";\n  min-height: 112px;\n  min-height: ",
+        ";\n  flex: 1;\n  ",
+        "\n"
+    ]);
+    _templateObject12 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject13() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  max-width: ",
+        "px;\n  box-sizing: border-box;\n  padding: 0 24px;\n  overflow: hidden;\n  background: ",
+        ";\n"
+    ]);
+    _templateObject13 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject14() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  width: 100%;\n  flex-direction: row;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 16px 24px;\n  gap: 12px;\n  border-top: 1px solid ",
+        ";\n  background: ",
+        ";\n"
+    ]);
+    _templateObject14 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject15() {
+    var data = _tagged_template_literal([
+        "\n  width: 32px;\n  height: 32px;\n  border-radius: 6px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: ",
+        ";\n\n  &:hover {\n    background: ",
+        ";\n  }\n"
+    ]);
+    _templateObject15 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject16() {
+    var data = _tagged_template_literal([
+        "\n  appearance: none;\n  border: none;\n  border-radius: 12px;\n  width: 28px;\n  height: 18px;\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  align-items: center;\n  background: ",
+        ";\n  padding: 2px;\n  margin: 0;\n\n  // slider\n  &:before {\n    content: '';\n    left: 2px;\n    display: block;\n    position: absolute;\n    width: 14px;\n    height: 14px;\n    background: ",
+        ";\n    border-radius: 50%;\n    transition: left 0.2s ease-in-out;\n  }\n\n  // selected\n  &:checked {\n    background: ",
+        ";\n    &:before {\n      left: 12px;\n    }\n  }\n\n  // disabled\n  &:disabled {\n    cursor: auto;\n  }\n"
+    ]);
+    _templateObject16 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject17() {
+    var data = _tagged_template_literal([
+        "\n    opacity: 50%;\n    cursor: not-allowed;\n  "
+    ]);
+    _templateObject17 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject18() {
+    var data = _tagged_template_literal([
+        "\n    border-radius: ",
+        ";\n  "
+    ]);
+    _templateObject18 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject19() {
+    var data = _tagged_template_literal([
+        "\n    background: ",
+        ";\n    & > span {\n      color: ",
+        ";\n    }\n    &:hover {\n      background: ",
+        ";\n    }\n  "
+    ]);
+    _templateObject19 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject20() {
+    var data = _tagged_template_literal([
+        "\n  padding: 7px 12px;\n  gap: 4px;\n  background: ",
+        ";\n  border-radius: ",
+        ";\n  & > span {\n    color: ",
+        ";\n  }\n  &:hover {\n    background: ",
+        ";\n  }\n\n  ",
+        ";\n  ",
+        ";\n"
+    ]);
+    _templateObject20 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject21() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  width: fit-content;\n  user-select: none;\n  cursor: pointer;\n  ",
+        ";\n  ",
+        ";\n"
+    ]);
+    _templateObject21 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject22() {
+    var data = _tagged_template_literal([
+        "\n  background: ",
+        ";\n  border: 1px solid ",
+        ";\n  border-radius: ",
+        ";\n  &:hover {\n    border: 1px solid ",
+        ";\n  }\n  & > span {\n    color: ",
+        ";\n  }\n"
+    ]);
+    _templateObject22 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject23() {
+    var data = _tagged_template_literal([
+        "\n        padding: 4px 8px;\n      "
+    ]);
+    _templateObject23 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject24() {
+    var data = _tagged_template_literal([
+        "\n        padding: 7px 12px;\n      "
+    ]);
+    _templateObject24 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject25() {
+    var data = _tagged_template_literal([
+        "\n        padding: 7px 12px;\n      "
+    ]);
+    _templateObject25 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject26() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  width: fit-content;\n  gap: 4px;\n  cursor: pointer;\n  background: ",
+        ";\n  ",
+        ";\n  ",
+        ";\n  ",
+        ";\n"
+    ]);
+    _templateObject26 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject27() {
+    var data = _tagged_template_literal([
+        "\n        border: 1px solid ",
+        ";\n        background-color: ",
+        ";\n        :hover {\n          background-color: ",
+        ";\n        }\n      "
+    ]);
+    _templateObject27 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject28() {
+    var data = _tagged_template_literal([
+        "\n        border: 1px solid ",
+        ";\n        background-color: ",
+        ";\n        :hover {\n          background-color: ",
+        ";\n        }\n      "
+    ]);
+    _templateObject28 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject29() {
+    var data = _tagged_template_literal([
+        "\n        border: 1px solid ",
+        ";\n        background-color: ",
+        ";\n        :hover {\n          background-color: ",
+        ";\n        }\n      "
+    ]);
+    _templateObject29 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject30() {
+    var data = _tagged_template_literal([
+        "\n        border: 1px solid transparent;\n        background-color: transparent;\n        :hover {\n          background-color: ",
+        ";\n        }\n      "
+    ]);
+    _templateObject30 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject31() {
+    var data = _tagged_template_literal([
+        "\n        border: 1px solid ",
+        ";\n        background-color: ",
+        ";\n      "
+    ]);
+    _templateObject31 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject32() {
+    var data = _tagged_template_literal([
+        "\n        min-width: 72px;\n        min-height: 40px;\n      "
+    ]);
+    _templateObject32 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject33() {
+    var data = _tagged_template_literal([
+        "\n        min-width: 54px;\n        min-height: 32px;\n      "
+    ]);
+    _templateObject33 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject34() {
+    var data = _tagged_template_literal([
+        "\n        min-width: 72px;\n        min-height: 40px;\n      "
+    ]);
+    _templateObject34 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+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  ",
+        ";\n  ",
+        ";\n"
+    ]);
+    _templateObject35 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject36() {
+    var data = _tagged_template_literal([
+        "\n        width: 40px;\n        height: 40px;\n      "
+    ]);
+    _templateObject36 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject37() {
+    var data = _tagged_template_literal([
+        "\n        width: 32px;\n        height: 32px;\n      "
+    ]);
+    _templateObject37 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject38() {
+    var data = _tagged_template_literal([
+        "\n        width: 40px;\n        height: 40px;\n      "
+    ]);
+    _templateObject38 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject39() {
+    var data = _tagged_template_literal([
+        "\n      border: 1px solid ",
+        ";\n    "
+    ]);
+    _templateObject39 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject40() {
+    var data = _tagged_template_literal([
+        "\n        border: 1px solid ",
+        ";\n      "
+    ]);
+    _templateObject40 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject41() {
+    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  ",
+        ";\n  ",
+        ";\n  ",
+        ";\n  ",
+        ";\n  cursor: pointer;\n  &:hover {\n    background-color: ",
+        ";\n  }\n"
+    ]);
+    _templateObject41 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject42() {
+    var data = _tagged_template_literal([
+        "\n  width: 32px;\n  height: 32px;\n  padding: 7px;\n"
+    ]);
+    _templateObject42 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject43() {
+    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() {
+        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";
+// 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() {
+        if (domain) {
+            setDomainType(domain);
+        }
+    }, [
+        domain
+    ]);
+    useEffect(function() {
+        if (!domainType) {
+            return;
+        }
+        document.documentElement.dataset.shoplflow = domainType === null || domainType === void 0 ? void 0 : domainType.toLowerCase();
+    }, [
+        domainType
+    ]);
+};
+var 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: {
+        opacity: 0
+    },
+    animate: {
+        opacity: 1,
+        transition: {
+            duration: 0.1
+        }
+    },
+    exit: {
+        opacity: 0,
+        transition: {
+            duration: 0.1
+        }
+    }
+};
+var BackDropStyled = styled5(motion.div)(_templateObject());
+var BackDrop = function(param) {
+    var children = param.children;
+    return /* @__PURE__ */ jsx(BackDropStyled, {
+        variants: fadeInOut,
+        initial: "initial",
+        animate: "animate",
+        exit: "exit",
+        children: children
+    });
+};
+var BackDrop_default = BackDrop;
+var SpaceMarginWrapper = styled5(motion.div)(_templateObject1());
+var ModalPortal = function() {
+    var modal = useModalStore(function(state) {
+        return state.modal;
+    });
+    return /* @__PURE__ */ jsx(Fragment, {
+        children: createPortal(/* @__PURE__ */ jsx(AnimatePresence, {
+            children: modal.map(function(item, index) {
+                return /* @__PURE__ */ jsx(BackDrop_default, {
+                    children: /* @__PURE__ */ jsx(SpaceMarginWrapper, {
+                        children: item.component
+                    })
+                }, index);
+            })
+        }), document.body)
+    });
+};
+var ModalPortal_default = ModalPortal;
+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, {
+        children: [
+            /* @__PURE__ */ jsx(ModalPortal_default, {}),
+            children
+        ]
+    });
+};
+var ShoplflowProvider_default = ShoplflowProvider;
+// src/styles/tokens.ts
+var fontWeightRegular = "var(--font-weight-regular)";
+var fontWeightMedium = "var(--font-weight-medium)";
+var fontWeightBold = "var(--font-weight-bold)";
+var fontWeightTokens = {
+    fontWeightRegular: fontWeightRegular,
+    fontWeightMedium: fontWeightMedium,
+    fontWeightBold: fontWeightBold
+};
+var borderRadius04 = "var(--border-radius04)";
+var borderRadius06 = "var(--border-radius06)";
+var borderRadius08 = "var(--border-radius08)";
+var borderRadius12 = "var(--border-radius12)";
+var borderRadius16 = "var(--border-radius16)";
+var borderRadius20 = "var(--border-radius20)";
+var borderRadiusTokens = {
+    borderRadius04: borderRadius04,
+    borderRadius06: borderRadius06,
+    borderRadius08: borderRadius08,
+    borderRadius12: borderRadius12,
+    borderRadius16: borderRadius16,
+    borderRadius20: borderRadius20
+};
+var coolgray300 = "var(--coolgray300)";
+var coolgray200 = "var(--coolgray200)";
+var coolgray100 = "var(--coolgray100)";
+var coolgray50 = "var(--coolgray50)";
+var navy400 = "var(--navy400)";
+var navy300 = "var(--navy300)";
+var neutral0 = "var(--neutral0)";
+var neutral100 = "var(--neutral100)";
+var neutral150 = "var(--neutral150)";
+var neutral200 = "var(--neutral200)";
+var neutral300 = "var(--neutral300)";
+var neutral350 = "var(--neutral350)";
+var neutral400 = "var(--neutral400)";
+var neutral500 = "var(--neutral500)";
+var neutral600 = "var(--neutral600)";
+var neutral700 = "var(--neutral700)";
+var neutral400_5 = "var(--neutral400_5)";
+var red300 = "var(--red300)";
+var red200 = "var(--red200)";
+var red100 = "var(--red100)";
+var ocean300 = "var(--ocean300)";
+var ocean200 = "var(--ocean200)";
+var ocean100 = "var(--ocean100)";
+var purple400 = "var(--purple400)";
+var purple300 = "var(--purple300)";
+var purple100 = "var(--purple100)";
+var yellow300 = "var(--yellow300)";
+var yellow200 = "var(--yellow200)";
+var yellow100 = "var(--yellow100)";
+var green300 = "var(--green300)";
+var green200 = "var(--green200)";
+var green100 = "var(--green100)";
+var shopl400 = "var(--shopl400)";
+var shopl300 = "var(--shopl300)";
+var shopl200 = "var(--shopl200)";
+var shopl150 = "var(--shopl150)";
+var shopl100 = "var(--shopl100)";
+var hada400 = "var(--hada400)";
+var hada300 = "var(--hada300)";
+var hada200 = "var(--hada200)";
+var hada150 = "var(--hada150)";
+var hada100 = "var(--hada100)";
+var background = "var(--background)";
+var primary100 = "var(--primary100)";
+var primary150 = "var(--primary150)";
+var primary200 = "var(--primary200)";
+var primary300 = "var(--primary300)";
+var primary400 = "var(--primary400)";
+var colorTokens = {
+    coolgray300: coolgray300,
+    coolgray200: coolgray200,
+    coolgray100: coolgray100,
+    coolgray50: coolgray50,
+    navy400: navy400,
+    navy300: navy300,
+    neutral0: neutral0,
+    neutral100: neutral100,
+    neutral150: neutral150,
+    neutral200: neutral200,
+    neutral300: neutral300,
+    neutral350: neutral350,
+    neutral400: neutral400,
+    neutral500: neutral500,
+    neutral600: neutral600,
+    neutral700: neutral700,
+    neutral400_5: neutral400_5,
+    red300: red300,
+    red200: red200,
+    red100: red100,
+    ocean300: ocean300,
+    ocean200: ocean200,
+    ocean100: ocean100,
+    purple400: purple400,
+    purple300: purple300,
+    purple100: purple100,
+    yellow300: yellow300,
+    yellow200: yellow200,
+    yellow100: yellow100,
+    green300: green300,
+    green200: green200,
+    green100: green100,
+    shopl400: shopl400,
+    shopl300: shopl300,
+    shopl200: shopl200,
+    shopl150: shopl150,
+    shopl100: shopl100,
+    hada400: hada400,
+    hada300: hada300,
+    hada200: hada200,
+    hada150: hada150,
+    hada100: hada100,
+    background: background,
+    primary100: primary100,
+    primary150: primary150,
+    primary200: primary200,
+    primary300: primary300,
+    primary400: primary400
+};
+var spacing04 = "var(--spacing04)";
+var spacing06 = "var(--spacing06)";
+var spacing08 = "var(--spacing08)";
+var spacing12 = "var(--spacing12)";
+var spacing16 = "var(--spacing16)";
+var spacing20 = "var(--spacing20)";
+var spacing24 = "var(--spacing24)";
+var spacing30 = "var(--spacing30)";
+var spacing32 = "var(--spacing32)";
+var spacing40 = "var(--spacing40)";
+var spacingTokens = {
+    spacing04: spacing04,
+    spacing06: spacing06,
+    spacing08: spacing08,
+    spacing12: spacing12,
+    spacing16: spacing16,
+    spacing20: spacing20,
+    spacing24: spacing24,
+    spacing30: spacing30,
+    spacing32: spacing32,
+    spacing40: spacing40
+};
+var dropShadow = "var(--dropShadow)";
+var boxShadowTokens = {
+    dropShadow: dropShadow
+};
+var heading1_700 = ".heading1_700";
+var heading1_400 = ".heading1_400";
+var heading2_700 = ".heading2_700";
+var heading2_400 = ".heading2_400";
+var heading3_700 = ".heading3_700";
+var heading3_400 = ".heading3_400";
+var title1_700 = ".title1_700";
+var title1_400 = ".title1_400";
+var title2_700 = ".title2_700";
+var title2_500 = ".title2_500";
+var title2_400 = ".title2_400";
+var body1_700 = ".body1_700";
+var body1_500 = ".body1_500";
+var body1_400 = ".body1_400";
+var body2_700 = ".body2_700";
+var body2_500 = ".body2_500";
+var body2_400 = ".body2_400";
+var body3_400 = ".body3_400";
+var body3_500 = ".body3_500";
+var caption_400 = ".caption_400";
+var typographyTokens = {
+    heading1_700: heading1_700,
+    heading1_400: heading1_400,
+    heading2_700: heading2_700,
+    heading2_400: heading2_400,
+    heading3_700: heading3_700,
+    heading3_400: heading3_400,
+    title1_700: title1_700,
+    title1_400: title1_400,
+    title2_700: title2_700,
+    title2_500: title2_500,
+    title2_400: title2_400,
+    body1_700: body1_700,
+    body1_500: body1_500,
+    body1_400: body1_400,
+    body2_700: body2_700,
+    body2_500: body2_500,
+    body2_400: body2_400,
+    body3_400: body3_400,
+    body3_500: body3_500,
+    caption_400: caption_400
+};
+var StyledStack = styled5.div(_templateObject2(), function(param) {
+    var width = param.width;
+    return width;
+}, function(param) {
+    var height = param.height;
+    return height;
+}, function(param) {
+    var direction = param.direction;
+    return direction;
+}, function(param) {
+    var align = param.align;
+    return align;
+}, function(param) {
+    var justify = param.justify;
+    return justify;
+}, function(param) {
+    var spacing = param.spacing;
+    return spacing && spacingTokens[spacing];
+}, function(param) {
+    var flexWrap = param.flexWrap;
+    return flexWrap;
+}, function(param) {
+    var flex = param.flex;
+    return flex;
+}, function(param) {
+    var background2 = param.background;
+    return background2 ? colorTokens[background2] : "transparent";
+}, function(param) {
+    var radius = param.radius;
+    return radius && 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) {
+        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",
+            "direction",
+            "align",
+            "justify",
+            "width",
+            "height",
+            "flexWrap",
+            "flex",
+            "radius",
+            "background"
+        ]);
+        return /* @__PURE__ */ jsx(StyledStack, _object_spread_props(_object_spread({
+            as: as,
+            spacing: spacing,
+            ref: ref,
+            direction: direction,
+            align: align,
+            justify: justify,
+            width: width,
+            height: height,
+            flexWrap: flexWrap,
+            flex: flex,
+            background: background2,
+            radius: radius
+        }, rest), {
+            children: rest.children
+        }));
+    });
+};
+var Stack = createStackComponent();
+Stack.Vertical = createStackComponent({
+    direction: "column"
+});
+Stack.Horizontal = createStackComponent({
+    direction: "row"
+});
+var MotionStack = motion(Stack);
+MotionStack.Vertical = motion(Stack.Vertical);
+MotionStack.Horizontal = motion(Stack.Horizontal);
+var Stack_default = Stack;
+var setEllipsis = function(maxLines) {
+    return css(_templateObject3(), maxLines, maxLines);
+};
+var StyledText = styled5.span(_templateObject7(), function(param) {
+    var display = param.display;
+    return display && display;
+}, function(param) {
+    var color = param.color;
+    return color && colorTokens[color];
+}, function(param) {
+    var lineClamp = param.lineClamp;
+    return lineClamp && setEllipsis(lineClamp);
+}, function(param) {
+    var textAlign = param.textAlign;
+    return textAlign && textAlign;
+}, function(param) {
+    var whiteSpace = param.whiteSpace;
+    return whiteSpace && whiteSpace;
+}, function(param) {
+    var textDecorations = param.textDecorations;
+    return textDecorations && css(_templateObject4(), textDecorations);
+}, function(param) {
+    var opacity = param.opacity;
+    return opacity && css(_templateObject5(), opacity);
+}, function(param) {
+    var wordBreak = param.wordBreak;
+    return wordBreak && css(_templateObject6(), wordBreak);
+});
+var Text = 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",
+        "whiteSpace",
+        "color",
+        "display",
+        "textAlign",
+        "className",
+        "as"
+    ]);
+    return /* @__PURE__ */ jsx(StyledText, _object_spread_props(_object_spread({
+        ref: ref,
+        whiteSpace: whiteSpace,
+        className: className ? "".concat(typography, " ").concat(className) : typography,
+        color: color,
+        display: display,
+        textAlign: textAlign,
+        as: as
+    }, rest), {
+        children: children
+    }));
+});
+var Text_default = Text;
+var MODAL_SIZE_XXS = 400;
+var MODAL_SIZE_XS = 500;
+var MODAL_SIZE_S = 560;
+var MODAL_SIZE_M = 640;
+var MODAL_SIZE_L = 768;
+var MODAL_SIZE_XL = 1040;
+var MODAL_SIZE_XXL = 1280;
+var getModalWidthFromSize = function(size) {
+    switch(size){
+        case "XXS":
+            return MODAL_SIZE_XXS;
+        case "XS":
+            return MODAL_SIZE_XS;
+        case "S":
+            return MODAL_SIZE_S;
+        case "M":
+            return MODAL_SIZE_M;
+        case "L":
+            return MODAL_SIZE_L;
+        case "XL":
+            return MODAL_SIZE_XL;
+        case "XXL":
+            return MODAL_SIZE_XXL;
+        default:
+            return MODAL_SIZE_M;
+    }
+};
+var getModalBodyTopBottomPadding = function(isIncludeHeader) {
+    if (isIncludeHeader) {
+        return css(_templateObject8());
+    }
+    return css(_templateObject9());
+};
+var Container = styled5.div(_templateObject10(), borderRadiusTokens.borderRadius08, colorTokens.neutral0, boxShadowTokens.dropShadow, function(param) {
+    var height = param.height;
+    return height ? "".concat(height, "px") : "initial";
+}, function(param) {
+    var sizeVar = param.sizeVar;
+    return getModalWidthFromSize(sizeVar);
+}, function(param) {
+    var sizeVar = param.sizeVar;
+    return getModalWidthFromSize(sizeVar);
+});
+var HeaderContainer = styled5.div(_templateObject11());
+var BodyContainer = styled5.div(_templateObject12(), 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 sizeVar = param.sizeVar;
+    return getModalWidthFromSize(sizeVar);
+}, colorTokens.neutral0);
+var FooterContainer = styled5.div(_templateObject14(), colorTokens.neutral300, 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");
+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, [
+        "children",
+        "outsideClick"
+    ]);
+    var ref = useParentElementClick(outsideClick);
+    var childrenArray = React2.Children.toArray(children);
+    var findHeader = childrenArray.find(function(child) {
+        if (!React2.isValidElement(child)) {
+            return child;
+        }
+        if (child.type[MODAL_HEADER_KEY]) {
+            return child;
+        }
+    });
+    var findFooter = childrenArray.find(function(child) {
+        if (!React2.isValidElement(child)) {
+            return child;
+        }
+        if (child.type[MODAL_FOOTER_KEY]) {
+            return child;
+        }
+    });
+    var addPropInChildren = Children.map(childrenArray, function(child) {
+        if (!React2.isValidElement(child)) {
+            return child;
+        }
+        return React2.cloneElement(child, {
+            isIncludeHeader: Boolean(findHeader),
+            isIncludeFooter: Boolean(findFooter),
+            sizeVar: rest.sizeVar,
+            height: rest.height
+        });
+    });
+    return /* @__PURE__ */ jsx(Container, _object_spread_props(_object_spread({
+        ref: ref
+    }, rest), {
+        children: addPropInChildren
+    }));
+};
+var ModalContainer_default = ModalContainer;
+var ModalFooter = function(param) {
+    var children = param.children;
+    return /* @__PURE__ */ jsx(FooterContainer, {
+        children: children
+    });
+};
+ModalFooter[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, {
+        trackHeight: true
+    }), windowHeight = _useResizeObserver.height;
+    var headerHeight = 64;
+    var footerHeight = 64;
+    var topBottomMargin = 64;
+    var getHeaderFooterHeight = useCallback(function() {
+        var result = 0;
+        if (isIncludeHeader) {
+            result += headerHeight;
+        }
+        if (isIncludeFooter) {
+            result += footerHeight;
+        }
+        return result;
+    }, [
+        isIncludeFooter,
+        isIncludeHeader
+    ]);
+    var headerFooterHeight = useMemo(function() {
+        return getHeaderFooterHeight();
+    }, [
+        getHeaderFooterHeight
+    ]);
+    var setAutoHeightMin = function() {
+        if (modalContainerHeight) {
+            return modalContainerHeight - headerFooterHeight;
+        } else {
+            return "100%";
+        }
+    };
+    var heightUnderMaxHeight = windowHeight - topBottomMargin - headerFooterHeight;
+    var heightOverMaxHeight = 1200 - topBottomMargin - headerFooterHeight;
+    return /* @__PURE__ */ jsx(BodyContainer, {
+        isIncludeHeader: isIncludeHeader,
+        height: setAutoHeightMin(),
+        children: /* @__PURE__ */ jsx(Scrollbars, {
+            id: "scrollbar",
+            autoHeight: !modalContainerHeight,
+            autoHeightMin: setAutoHeightMin(),
+            autoHeightMax: windowHeight > 1200 ? heightOverMaxHeight : heightUnderMaxHeight,
+            autoHide: true,
+            autoHideTimeout: 1e3,
+            autoHideDuration: 200,
+            style: {
+                height: "100%",
+                overflow: "hidden"
+            },
+            children: /* @__PURE__ */ jsx(ModalBodyContent, {
+                isIncludeHeader: isIncludeHeader,
+                sizeVar: sizeVar,
+                children: children
+            })
+        })
+    });
+};
+var ModalBody_default = ModalBody;
+var ModalHeader = function(param) {
+    var children = param.children;
+    return /* @__PURE__ */ jsx(HeaderContainer, {
+        children: children
+    });
+};
+ModalHeader[MODAL_HEADER_KEY] = true;
+var ModalHeader_default = ModalHeader;
+// src/components/Modal/index.ts
+var Modal = {
+    Container: ModalContainer_default,
+    Header: ModalHeader_default,
+    Body: ModalBody_default,
+    Footer: ModalFooter_default
+};
+var SwitchContainer = styled5.div(_templateObject15(), function(param) {
+    var isDisabled = param.isDisabled;
+    return isDisabled && 0.3;
+}, function(param) {
+    var isDisabled = param.isDisabled;
+    return !isDisabled && colorTokens.neutral400_5;
+});
+var StyledSwitch = styled5.input(_templateObject16(), colorTokens.neutral350, colorTokens.neutral0, function(param) {
+    var activeColor = param.activeColor;
+    return colorTokens[activeColor];
+});
+var useOnToggle = function(selected, defaultSelected) {
+    var _useState = _sliced_to_array(useState(false), 2), isToggle = _useState[0], setIsToggle = _useState[1];
+    var isControlled = selected !== void 0;
+    var handleToggle = function() {
+        !isControlled && setIsToggle(function(prev) {
+            return !prev;
+        });
+    };
+    useEffect(function() {
+        if (isControlled) {
+            setIsToggle(selected);
+        }
+    }, [
+        isControlled,
+        selected
+    ]);
+    useEffect(function() {
+        if (defaultSelected) {
+            setIsToggle(defaultSelected);
+        }
+    }, [
+        defaultSelected,
+        isControlled
+    ]);
+    return [
+        isToggle,
+        handleToggle
+    ];
+};
+var Switch = function(_param) {
+    var onChange = _param.onChange, isSelected = _param.isSelected, _param_disabled = _param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, _param_activeColor = _param.activeColor, activeColor = _param_activeColor === void 0 ? "primary300" : _param_activeColor, _param_defaultSelected = _param.defaultSelected, defaultSelected = _param_defaultSelected === void 0 ? false : _param_defaultSelected, rest = _object_without_properties(_param, [
+        "onChange",
+        "isSelected",
+        "disabled",
+        "activeColor",
+        "defaultSelected"
+    ]);
+    var _useOnToggle = _sliced_to_array(useOnToggle(isSelected, defaultSelected), 2), isToggled = _useOnToggle[0], handleToggle = _useOnToggle[1];
+    return /* @__PURE__ */ jsx(SwitchContainer, {
+        isDisabled: disabled,
+        children: /* @__PURE__ */ jsx(StyledSwitch, _object_spread({
+            type: "checkbox",
+            checked: isToggled,
+            disabled: disabled,
+            onChange: function() {
+                handleToggle();
+                onChange && onChange();
+            },
+            activeColor: activeColor
+        }, rest))
+    });
+};
+var Switch_default = Switch;
+// src/components/Chips/ChipToggle/ChipToggle.types.ts
+var ChipToggleStyleVariants = {
+    SOLID: "SOLID"
+};
+var ChipToggleSizeVariants = {
+    S: "S",
+    XS: "XS"
+};
+var getDisabledStyle = function(disabled) {
+    if (!disabled) {
+        return;
+    }
+    return css(_templateObject17());
+};
+// src/components/Chips/ChipToggle/ChipToggle.styled.ts
+var getLineTypographyBySizeVar = function(sizeVar) {
+    switch(sizeVar){
+        case "XS":
+            return "body3_400";
+        case "S":
+            return "body2_400";
+        default:
+            return "body2_400";
+    }
+};
+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]));
+};
+var StyledChip = styled5.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, [
+        "text",
+        "isSelected",
+        "defaultSelected",
+        "color",
+        "styleVar",
+        "sizeVar",
+        "leftSource",
+        "rightSource",
+        "onClick",
+        "disabled"
+    ]);
+    var _useOnToggle = _sliced_to_array(useOnToggle(isSelected, defaultSelected), 2), isToggled = _useOnToggle[0], handleToggle = _useOnToggle[1];
+    var handleClick = function(e) {
+        !disabled && handleToggle();
+        !disabled && onClick && onClick(e);
+    };
+    return /* @__PURE__ */ jsxs(StyledChip, _object_spread_props(_object_spread({}, rest), {
+        color: color,
+        isSelected: isToggled,
+        styleVar: styleVar,
+        sizeVar: sizeVar,
+        onClick: handleClick,
+        disabled: disabled,
+        children: [
+            leftSource,
+            /* @__PURE__ */ jsx(Text_default, {
+                typography: getLineTypographyBySizeVar(sizeVar),
+                children: text
+            }),
+            rightSource
+        ]
+    }));
+};
+var ChipToggle_default = ChipToggle;
+// src/utils/getNextColor.ts
+var getNextColor = function(color) {
+    var step = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 1;
+    var colorName = color.replace(/[0-9]|_/g, "");
+    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) {
+        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 findColorToken = colorTokenKeys.find(function(colorToken) {
+        return colorToken === nextColorToken;
+    });
+    var lastColorToken = colorKeysOfColorName[colorKeysOfColorName.length - 1];
+    return findColorToken ? findColorToken : lastColorToken;
+};
+// src/components/Chips/ChipButton/ChipButton.styled.ts
+var getLineTypographyBySizeVar2 = function(sizeVar) {
+    switch(sizeVar){
+        case "XS":
+            return "caption_400";
+        case "S":
+            return "body3_400";
+        default:
+            return "body3_400";
+    }
+};
+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)]);
+};
+var getStyleBySizeVar = function(sizeVar) {
+    switch(sizeVar){
+        case "XS":
+            return css(_templateObject23());
+        case "S":
+            return css(_templateObject24());
+        default:
+            return css(_templateObject25());
+    }
+};
+var StyledChipButton = styled5.button(_templateObject26(), function(param) {
+    var background2 = param.background;
+    return background2 && colorTokens[background2];
+}, function(param) {
+    var sizeVar = param.sizeVar;
+    return getStyleBySizeVar(sizeVar);
+}, function(props) {
+    return props.styleVar === "LINE" && lineStyle(props);
+}, function(param) {
+    var disabled = param.disabled;
+    return getDisabledStyle(disabled);
+});
+// src/components/Chips/ChipButton/ChipButton.types.ts
+var ChipButtonStyleVariants = {
+    LINE: "LINE"
+};
+var 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, [
+        "styleVar",
+        "color",
+        "sizeVar",
+        "text",
+        "onClick",
+        "disabled"
+    ]);
+    var handleOnClick = function(e) {
+        !disabled && onClick(e);
+    };
+    return /* @__PURE__ */ jsx(StyledChipButton, _object_spread_props(_object_spread({
+        styleVar: styleVar,
+        color: color
+    }, rest), {
+        onClick: handleOnClick,
+        disabled: disabled,
+        children: /* @__PURE__ */ jsx(Text_default, {
+            typography: getLineTypographyBySizeVar2(sizeVar),
+            children: text
+        })
+    }));
+};
+var ChipButton_default = ChipButton;
+var getStyleByStyleVar = function(styleVar, disabled) {
+    switch(styleVar){
+        case "PRIMARY":
+            return css(_templateObject27(), colorTokens.primary400, colorTokens.primary300, !disabled && colorTokens.primary400);
+        case "SECONDARY":
+            return css(_templateObject28(), colorTokens.neutral350, colorTokens.neutral0, !disabled && colorTokens.neutral100);
+        case "SOLID":
+            return css(_templateObject29(), colorTokens.coolgray100, colorTokens.coolgray50, !disabled && colorTokens.coolgray100);
+        case "GHOST":
+            return css(_templateObject30(), !disabled && colorTokens.neutral400_5);
+        default:
+            return css(_templateObject31(), colorTokens.primary400, colorTokens.primary300);
+    }
+};
+var getStyleBySizeVar2 = function(sizeVar) {
+    switch(sizeVar){
+        case "M":
+            return css(_templateObject32());
+        case "S":
+            return css(_templateObject33());
+        default:
+            return css(_templateObject34());
+    }
+};
+var StyledButton = styled5.button(_templateObject35(), spacingTokens.spacing04, borderRadiusTokens.borderRadius06, spacingTokens.spacing12, borderRadiusTokens.borderRadius12, function(param) {
+    var styleVar = param.styleVar, disabled = param.disabled;
+    return getStyleByStyleVar(styleVar, disabled);
+}, function(param) {
+    var sizeVar = param.sizeVar;
+    return getStyleBySizeVar2(sizeVar);
+}, function(param) {
+    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, [
+        "styleVar",
+        "sizeVar",
+        "style",
+        "color",
+        "as",
+        "children",
+        "leftSource",
+        "rightSource"
+    ]);
+    return /* @__PURE__ */ jsxs(StyledButton, _object_spread_props(_object_spread({
+        styleVar: styleVar,
+        sizeVar: sizeVar,
+        className: styleVar,
+        style: style,
+        as: as,
+        ref: ref,
+        color: color
+    }, rest), {
+        children: [
+            leftSource,
+            /* @__PURE__ */ jsx(Text_default, {
+                color: styleVar === "PRIMARY" ? "neutral0" : "neutral700",
+                typography: sizeVar === "M" ? "body1_400" : "body2_400",
+                children: children
+            }),
+            rightSource
+        ]
+    }));
+});
+var Button_default = Button;
+// src/components/Buttons/Button/Button.types.ts
+var buttonSizeVar = {
+    S: "S",
+    M: "M"
+};
+var buttonStyleVar = {
+    PRIMARY: "PRIMARY",
+    SECONDARY: "SECONDARY",
+    SOLID: "SOLID",
+    GHOST: "GHOST"
+};
+var getWidthAndHeightFromSizeVar = function(sizeVar) {
+    switch(sizeVar){
+        case "M":
+            return css(_templateObject36());
+        case "S":
+            return css(_templateObject37());
+        default:
+            return css(_templateObject38());
+    }
+};
+var getHoverBackgroundFromStyleVar = function(styleVar) {
+    switch(styleVar){
+        case "SOLID":
+            return colorTokens.neutral100;
+        case "GHOST":
+            return colorTokens.neutral400_5;
+        default:
+            return 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 styleVar = param.styleVar;
+    if (!styleVar) {
+        return;
+    }
+    if (styleVar === "SOLID") {
+        return css(_templateObject40(), colorTokens.neutral200);
+    }
+}, function(param) {
+    var styleVar = param.styleVar;
+    return getBorderByStyleVar(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 styleVar = _param.styleVar, sizeVar = _param.sizeVar, disabled = _param.disabled, as = _param.as, children = _param.children, rest = _object_without_properties(_param, [
+        "styleVar",
+        "sizeVar",
+        "disabled",
+        "as",
+        "children"
+    ]);
+    return /* @__PURE__ */ jsx(StyledIconButton, _object_spread_props(_object_spread({
+        styleVar: styleVar,
+        sizeVar: sizeVar,
+        disabled: disabled,
+        as: as,
+        ref: ref
+    }, rest), {
+        children: children
+    }));
+});
+var IconButton_default = IconButton;
+// src/components/Buttons/IconButton/IconButton.types.ts
+var iconButtonSizeVar = {
+    S: "S",
+    M: "M"
+};
+var iconButtonStyleVar = {
+    SOLID: "SOLID",
+    GHOST: "GHOST"
+};
+var Container2 = styled5.div(_templateObject42());
+var IconButton2 = styled5.button(_templateObject43(), borderRadiusTokens.borderRadius04, function(param) {
+    var color = param.color;
+    return colorTokens[color];
+}, function(param) {
+    var color = param.color;
+    return colorTokens[getNextColor(color, 1)];
+});
+var MinusButton = 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({
+            color: color,
+            onClick: onClick,
+            ref: ref
+        }, rest), {
+            children: /* @__PURE__ */ jsxs("svg", {
+                width: "16",
+                height: "16",
+                viewBox: "0 0 16 16",
+                fill: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                children: [
+                    /* @__PURE__ */ 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", {
+                        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",
+                        fill: "white"
+                    })
+                ]
+            })
+        }))
+    });
+});
+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
+//# sourceMappingURL=index.js.map