@team-frieeren/components 1.0.0 → 1.0.1

package/dist/client.d.ts

@@ -0,0 +1,5 @@
+export { useFunnel } from "./components/Funnel";
+export { safeLocalStorage, safeSessionStorage } from "./shared/storage";
+export { RouterProvider, useRouter } from "./hooks/useRouter";
+export { WindowRouter } from "./router/windowRouter";
+export { useToast, ToastProvider } from "./components/Toast";

package/dist/client.js

@@ -0,0 +1,633 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Children, isValidElement, useEffect, createContext, useContext, useMemo, useCallback, useState, Fragment as Fragment$1 } from 'react';
+import cx from 'classnames';
+import { createPortal } from 'react-dom';
+
+var _assign = function __assign() {
+  _assign = Object.assign || function __assign(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return _assign.apply(this, arguments);
+};
+function __rest(s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+}
+function __spreadArray(to, from, pack) {
+  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+    if (ar || !(i in from)) {
+      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+      ar[i] = from[i];
+    }
+  }
+  return to.concat(ar || Array.prototype.slice.call(from));
+}
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+  var e = new Error(message);
+  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+var Funnel = function Funnel(_a) {
+  var steps = _a.steps,
+    step = _a.step,
+    children = _a.children;
+  var validChildren = Children.toArray(children).filter(isValidElement).filter(function (i) {
+    var _a;
+    return steps.includes((_a = i.props.name) !== null && _a !== void 0 ? _a : "");
+  });
+  var targetStep = validChildren.find(function (child) {
+    return child.props.name === step;
+  });
+  if (!targetStep) {
+    throw new Error("".concat(step, " Step Component\uB97C \uCC3E\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4."));
+  }
+  return jsx(Fragment, {
+    children: targetStep
+  });
+};
+var Step = function Step(_a) {
+  var onMounted = _a.onMounted,
+    onUnMounted = _a.onUnMounted,
+    children = _a.children;
+  useEffect(function () {
+    onMounted === null || onMounted === void 0 ? void 0 : onMounted();
+    return function () {
+      onUnMounted === null || onUnMounted === void 0 ? void 0 : onUnMounted();
+    };
+  }, [onMounted, onUnMounted]);
+  return jsx(Fragment, {
+    children: children
+  });
+};
+
+var RouterContext = /*#__PURE__*/createContext(null);
+var RouterProvider = RouterContext.Provider;
+function useRouter() {
+  var router = useContext(RouterContext);
+  if (!router) {
+    throw new Error("RouterProvider를 설정해주세요");
+  }
+  return router;
+}
+
+function useQueryParam(name, options) {
+  var router = useRouter();
+  var value = router.getQuery(name);
+  return value;
+}
+
+var DEFAULT_STEP_QUERY_KEY = "funnel-step";
+var useFunnel = function useFunnel(steps, options) {
+  var _a;
+  var router = useRouter();
+  var stepQueryKey = (_a = options === null || options === void 0 ? void 0 : options.stepQueryKey) !== null && _a !== void 0 ? _a : DEFAULT_STEP_QUERY_KEY;
+  if (steps.length === 0) {
+    throw new Error("steps가 비어있습니다.");
+  }
+  var FunnelComponent = useMemo(function () {
+    return Object.assign(function RouteFunnel(props) {
+      var _a;
+      var step = (_a = useQueryParam(stepQueryKey)) !== null && _a !== void 0 ? _a : options === null || options === void 0 ? void 0 : options.initialStep;
+      if (!step) {
+        throw new Error("\uD45C\uC2DC\uD560 \uC2A4\uD15D\uC744 ".concat(stepQueryKey, " \uCFFC\uB9AC \uD30C\uB77C\uBBF8\uD130\uC5D0 \uC9C0\uC815\uD574\uC8FC\uC138\uC694. \uCFFC\uB9AC \uD30C\uB77C\uBBF8\uD130\uAC00 \uC5C6\uC744 \uB54C \uCD08\uAE30 Step\uC744 \uB80C\uB354\uD558\uB824\uBA74 useFunnel\uC758 \uB450 \uBC88\uC9F8 \uD30C\uB77C\uBBF8\uD130 options\uC5D0 initialStep\uC744 \uC9C0\uC815\uD574\uC8FC\uC138\uC694."));
+      }
+      return jsx(Funnel, _assign({
+        steps: steps,
+        step: step
+      }, props));
+    }, {
+      Step: Step
+    });
+  }, []);
+  var setStep = useCallback(function (step) {
+    var _a;
+    router.setQuery((_a = {}, _a[stepQueryKey] = step, _a));
+  }, [stepQueryKey, router]);
+  return [FunnelComponent, setStep];
+};
+
+var generateRandomKey = function generateRandomKey() {
+  return Math.random().toString(36).substring(2, 11);
+};
+
+var MemoryStorage = /** @class */function () {
+  function MemoryStorage() {
+    this.map = new Map();
+  }
+  MemoryStorage.prototype.has = function (key) {
+    return this.map.get(key) !== null;
+  };
+  MemoryStorage.prototype.get = function (key) {
+    return this.map.get(key) || null;
+  };
+  MemoryStorage.prototype.set = function (key, value) {
+    this.map.set(key, value);
+  };
+  MemoryStorage.prototype.remove = function (key) {
+    this.map["delete"](key);
+  };
+  MemoryStorage.prototype.clear = function () {
+    this.map.clear();
+  };
+  MemoryStorage.prototype.setObject = function (key, value) {
+    this.map.set(key, JSON.stringify(value));
+  };
+  MemoryStorage.prototype.getObject = function (key) {
+    var value = this.map.get(key);
+    if (!value) return null;
+    return JSON.parse(value);
+  };
+  return MemoryStorage;
+}();
+
+var LocalStorage = /** @class */function () {
+  function LocalStorage() {}
+  LocalStorage.isEnabled = function () {
+    if (typeof window === "undefined" || !!window.localStorage) {
+      return false;
+    }
+    try {
+      var KEY = generateRandomKey();
+      localStorage.setItem(KEY, "test");
+      localStorage.removeItem(KEY);
+      return true;
+    } catch (_a) {
+      return false;
+    }
+  };
+  LocalStorage.prototype.has = function (key) {
+    return localStorage.getItem(key) !== null;
+  };
+  LocalStorage.prototype.get = function (key) {
+    return localStorage.getItem(key);
+  };
+  LocalStorage.prototype.set = function (key, value) {
+    localStorage.setItem(key, value);
+  };
+  LocalStorage.prototype.remove = function (key) {
+    localStorage.removeItem(key);
+  };
+  LocalStorage.prototype.clear = function () {
+    localStorage.clear();
+  };
+  LocalStorage.prototype.setObject = function (key, value) {
+    localStorage.setItem(key, JSON.stringify(value));
+  };
+  LocalStorage.prototype.getObject = function (key) {
+    var value = localStorage.getItem(key);
+    if (!value) return null;
+    return JSON.parse(value);
+  };
+  return LocalStorage;
+}();
+var safeLocalStorage = LocalStorage.isEnabled() ? new LocalStorage() : new MemoryStorage();
+
+var SessionStorage = /** @class */function () {
+  function SessionStorage() {}
+  SessionStorage.isEnabled = function () {
+    if (typeof window === "undefined" || !!window.sessionStorage) {
+      return false;
+    }
+    try {
+      var KEY = generateRandomKey();
+      sessionStorage.setItem(KEY, "test");
+      sessionStorage.removeItem(KEY);
+      return true;
+    } catch (_a) {
+      return false;
+    }
+  };
+  SessionStorage.prototype.has = function (key) {
+    return sessionStorage.getItem(key) !== null;
+  };
+  SessionStorage.prototype.get = function (key) {
+    return sessionStorage.getItem(key);
+  };
+  SessionStorage.prototype.set = function (key, value) {
+    sessionStorage.setItem(key, value);
+  };
+  SessionStorage.prototype.remove = function (key) {
+    sessionStorage.removeItem(key);
+  };
+  SessionStorage.prototype.clear = function () {
+    sessionStorage.clear();
+  };
+  SessionStorage.prototype.setObject = function (key, value) {
+    sessionStorage.setItem(key, JSON.stringify(value));
+  };
+  SessionStorage.prototype.getObject = function (key) {
+    var value = sessionStorage.getItem(key);
+    if (!value) return null;
+    return JSON.parse(value);
+  };
+  return SessionStorage;
+}();
+var safeSessionStorage = SessionStorage.isEnabled() ? new SessionStorage() : new MemoryStorage();
+
+var WindowRouter = /** @class */function () {
+  function WindowRouter() {}
+  Object.defineProperty(WindowRouter.prototype, "location", {
+    get: function get() {
+      return {
+        pathname: window.location.pathname,
+        search: window.location.search,
+        hash: window.location.hash,
+        state: window.history.state
+      };
+    },
+    enumerable: false,
+    configurable: true
+  });
+  WindowRouter.prototype.push = function (path, options) {
+    var _a;
+    window.history.pushState((_a = options === null || options === void 0 ? void 0 : options.state) !== null && _a !== void 0 ? _a : null, "", this.normalizePath(path));
+  };
+  WindowRouter.prototype.replace = function (path, options) {
+    var _a;
+    window.history.replaceState((_a = options === null || options === void 0 ? void 0 : options.state) !== null && _a !== void 0 ? _a : null, "", this.normalizePath(path));
+  };
+  WindowRouter.prototype.back = function () {
+    window.history.back();
+  };
+  WindowRouter.prototype.forward = function () {
+    window.history.forward();
+  };
+  WindowRouter.prototype.setQuery = function (query) {
+    var searchParams = new URLSearchParams(window.location.search);
+    Object.entries(query).forEach(function (_a) {
+      var key = _a[0],
+        value = _a[1];
+      if (Array.isArray(value)) {
+        searchParams["delete"](key);
+        value.forEach(function (v) {
+          return searchParams.append(key, v);
+        });
+      } else if (value !== undefined) {
+        searchParams.set(key, value);
+      } else {
+        searchParams["delete"](key);
+      }
+    });
+    this.replace("".concat(window.location.pathname, "?").concat(searchParams.toString()));
+  };
+  WindowRouter.prototype.getQuery = function (key) {
+    var searchParams = new URLSearchParams(window.location.search);
+    var values = searchParams.getAll(key);
+    if (values.length > 1) {
+      return values;
+    }
+    return searchParams.get(key);
+  };
+  WindowRouter.prototype.getAllQueries = function () {
+    var searchParams = new URLSearchParams(window.location.search);
+    var query = {};
+    searchParams.forEach(function (value, key) {
+      var existing = query[key];
+      if (existing !== undefined) {
+        query[key] = Array.isArray(existing) ? __spreadArray(__spreadArray([], existing, true), [value], false) : [existing, value];
+      } else {
+        query[key] = value;
+      }
+    });
+    return query;
+  };
+  WindowRouter.prototype.normalizePath = function (path) {
+    if (path.startsWith("http://") || path.startsWith("https://")) {
+      return path;
+    }
+    return path.startsWith("/") ? path : "/".concat(path);
+  };
+  return WindowRouter;
+}();
+
+function SwitchCase(_a) {
+  var _b;
+  var value = _a.value,
+    caseBy = _a.caseBy,
+    _c = _a.defaultComponent,
+    defaultComponent = _c === void 0 ? null : _c;
+  if (value == null) {
+    return defaultComponent;
+  }
+  return (_b = caseBy[value]) !== null && _b !== void 0 ? _b : defaultComponent;
+}
+
+function useIsMounted() {
+  var _a = useState(false),
+    mounted = _a[0],
+    setMounted = _a[1];
+  useEffect(function () {
+    setMounted(true);
+  }, []);
+  return mounted;
+}
+
+/** between the toasts spacing */
+var GAP = 8;
+var useToastStack = function useToastStack(toasts) {
+  var _a = useState({}),
+    heights = _a[0],
+    setHeights = _a[1];
+  var updateHeight = useCallback(function (id, height) {
+    setHeights(function (prev) {
+      var _a;
+      return _assign(_assign({}, prev), (_a = {}, _a[id] = height, _a));
+    });
+  }, []);
+  var groupedToasts = useMemo(function () {
+    var groups = {
+      "top-left": [],
+      "top-right": [],
+      "top-center": [],
+      "bottom-left": [],
+      "bottom-right": [],
+      "bottom-center": []
+    };
+    toasts.forEach(function (toast) {
+      var position = toast.position;
+      groups[position].push(toast);
+    });
+    return groups;
+  }, [toasts]);
+  var getToasterProps = useCallback(function (toast, index, position) {
+    var positionToasts = groupedToasts[position];
+    var offset = positionToasts.slice(0, index).reduce(function (total, t) {
+      return total + (heights[t.id] || 0) + GAP;
+    }, 0);
+    var translateY = "".concat(offset * (position.includes("top") ? 1 : -1), "px");
+    var translateX = position.includes("center") ? "-50%" : "0";
+    return {
+      ref: function ref(el) {
+        if (el) {
+          var height = el.getBoundingClientRect().height;
+          if (heights[toast.id] !== height) {
+            updateHeight(toast.id, height);
+          }
+        }
+      },
+      style: {
+        transform: "translate(".concat(translateX, ", ").concat(translateY, ")"),
+        transition: "transform 0.23s cubic-bezier(0.21, 1.02, 0.73, 1)"
+      },
+      className: cx("toast-wrapper", "toast-wrapper--".concat(position))
+    };
+  }, [heights, groupedToasts]);
+  return {
+    getToasterProps: getToasterProps,
+    groupedToasts: groupedToasts
+  };
+};
+
+var _path$2;
+function _extends$2() { return _extends$2 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2.apply(null, arguments); }
+var SvgToastSuccess = function SvgToastSuccess(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$2({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 18 18"
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
+    fill: "#50BF50",
+    fillRule: "evenodd",
+    d: "M9 18A9 9 0 1 0 9 0a9 9 0 0 0 0 18m4.768-11.36a1 1 0 1 0-1.536-1.28L8.634 9.677c-.347.416-.542.647-.697.788l-.006.006-.007-.005c-.168-.127-.383-.339-.766-.722l-1.45-1.451a1 1 0 0 0-1.415 1.414l1.451 1.451.041.041c.327.327.64.641.933.862.327.248.756.48 1.305.456.55-.025.956-.296 1.26-.572.27-.247.555-.588.85-.943l.037-.044z",
+    clipRule: "evenodd"
+  })));
+};
+
+var _path$1;
+function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
+var SvgToastWarning = function SvgToastWarning(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$1({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 18 16"
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
+    fill: "#FEF08A",
+    fillRule: "evenodd",
+    d: "M8.133.504a1 1 0 0 1 1.737 0l8 14A1 1 0 0 1 17 15.998h-16a1 1 0 0 1-.868-1.496zM7.981 5.16a1.02 1.02 0 1 1 2.042 0v4.146a1.02 1.02 0 0 1-2.042 0zm1.02 8.26c.565 0 1.022-.461 1.022-1.031s-.457-1.031-1.021-1.031-1.02.461-1.02 1.031.456 1.031 1.02 1.031",
+    clipRule: "evenodd"
+  })));
+};
+
+var _path;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var SvgToastError = function SvgToastError(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 18 18"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fill: "#EF4444",
+    fillRule: "evenodd",
+    d: "M18 9A9 9 0 1 1 0 9a9 9 0 0 1 18 0M4.293 13.707a1 1 0 0 1 0-1.414L7.586 9 4.293 5.707a1 1 0 0 1 1.414-1.414L9 7.586l3.293-3.293a1 1 0 1 1 1.414 1.414L10.414 9l3.293 3.293a1 1 0 0 1-1.414 1.414L9 10.414l-3.293 3.293a1 1 0 0 1-1.414 0",
+    clipRule: "evenodd"
+  })));
+};
+
+var Toaster = function Toaster(_a) {
+  var toasts = _a.toasts;
+  var _b = useToastStack(toasts),
+    getToasterProps = _b.getToasterProps,
+    groupedToasts = _b.groupedToasts;
+  return jsx(Fragment$1, {
+    children: Object.entries(groupedToasts).map(function (_a) {
+      var position = _a[0],
+        positionToasts = _a[1];
+      return positionToasts.length > 0 && jsx("div", {
+        className: "toaster-content",
+        children: positionToasts.map(function (toast, idx) {
+          var toasterProps = getToasterProps(toast, idx, position);
+          return jsx("div", _assign({}, toasterProps, {
+            children: jsx(Toast, _assign({}, toast))
+          }), toast.id);
+        })
+      }, position);
+    })
+  });
+};
+var Toast = function Toast(_a) {
+  var toast = __rest(_a, []);
+  var width = toast.width,
+    type = toast.type,
+    action = toast.action,
+    position = toast.position,
+    offest = toast.offest,
+    duration = toast.duration,
+    style = toast.style,
+    message = toast.message,
+    buttonText = toast.buttonText,
+    onAction = toast.onAction;
+  var isMounted = useIsMounted();
+  var _b = useState(false),
+    visible = _b[0],
+    setVisible = _b[1];
+  var isTop = position === null || position === void 0 ? void 0 : position.includes("top");
+  var positionClass = isTop ? "top" : "bottom";
+  var offsetStyle = useMemo(function () {
+    var offsetValue = offest;
+    return isTop ? {
+      top: offsetValue + "px"
+    } : {
+      bottom: offsetValue + "px"
+    };
+  }, [isTop, offest]);
+  useEffect(function () {
+    if (isMounted) {
+      requestAnimationFrame(function () {
+        setVisible(true);
+      });
+    }
+    var timer = setTimeout(function () {
+      setVisible(false);
+    }, duration - 500);
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, [isMounted]);
+  return jsxs("div", {
+    "data-frieeren-component": "Toast",
+    className: cx("toast--content", positionClass, {
+      visible: visible,
+      hidden: !visible
+    }),
+    style: _assign(_assign({
+      width: width,
+      visibility: visible ? "visible" : "hidden"
+    }, offsetStyle), style),
+    children: [jsxs("div", {
+      className: "toast--type-message",
+      children: [jsx("div", {
+        className: "toast--type-icon",
+        "data-toast-type": type,
+        children: jsx(SwitchCase, {
+          value: type || "default",
+          caseBy: {
+            success: jsx(SvgToastSuccess, {}),
+            warning: jsx(SvgToastWarning, {}),
+            error: jsx(SvgToastError, {})
+          },
+          defaultComponent: null
+        })
+      }), jsx("div", {
+        className: "toast--message",
+        children: message
+      })]
+    }), jsx(SwitchCase, {
+      value: action || "defualt",
+      caseBy: {
+        "icon-link": jsx("button", {
+          className: "toast--action-link",
+          onClick: onAction,
+          children: "\uB9C1\uD06C\u2192"
+        }),
+        "icon-button": jsx("button", {
+          className: "toast--action-button",
+          onClick: onAction,
+          children: buttonText
+        })
+      },
+      defaultComponent: null
+    })]
+  });
+};
+
+var defaultToastValue = {
+  type: "default",
+  action: "defualt",
+  style: {},
+  offest: 0,
+  message: "",
+  duration: 3000,
+  position: "top-right"
+};
+var ToastContext = /*#__PURE__*/createContext({
+  toasts: [],
+  add: function add() {
+    return "";
+  },
+  remove: function remove() {}
+});
+var ToastPortal = function ToastPortal(_a) {
+  var children = _a.children;
+  var isMounted = useIsMounted();
+  var node = document.getElementById("toast-portal");
+  if (!isMounted) return null;
+  return /*#__PURE__*/createPortal(children, node);
+};
+var ToastProvider = function ToastProvider(_a) {
+  var options = _a.options,
+    children = _a.children;
+  var _b = useState([]),
+    toasts = _b[0],
+    setToasts = _b[1];
+  var add = useCallback(function (toast) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    var id = Math.random().toString(36).substring(2, 9);
+    var newToast = _assign(_assign({}, toast), {
+      id: id,
+      type: (_b = (_a = toast.type) !== null && _a !== void 0 ? _a : options === null || options === void 0 ? void 0 : options.type) !== null && _b !== void 0 ? _b : defaultToastValue.type,
+      action: (_d = (_c = toast.action) !== null && _c !== void 0 ? _c : options === null || options === void 0 ? void 0 : options.action) !== null && _d !== void 0 ? _d : defaultToastValue.action,
+      style: (_f = (_e = toast.style) !== null && _e !== void 0 ? _e : options === null || options === void 0 ? void 0 : options.style) !== null && _f !== void 0 ? _f : defaultToastValue.style,
+      offest: (_h = (_g = toast.offest) !== null && _g !== void 0 ? _g : options === null || options === void 0 ? void 0 : options.offest) !== null && _h !== void 0 ? _h : defaultToastValue.offest,
+      radius: (_k = (_j = toast.radius) !== null && _j !== void 0 ? _j : options === null || options === void 0 ? void 0 : options.radius) !== null && _k !== void 0 ? _k : defaultToastValue.radius,
+      message: (_m = (_l = toast.message) !== null && _l !== void 0 ? _l : options === null || options === void 0 ? void 0 : options.message) !== null && _m !== void 0 ? _m : defaultToastValue.message,
+      duration: (_p = (_o = toast.duration) !== null && _o !== void 0 ? _o : options === null || options === void 0 ? void 0 : options.duration) !== null && _p !== void 0 ? _p : defaultToastValue.duration,
+      position: (_r = (_q = toast.position) !== null && _q !== void 0 ? _q : options === null || options === void 0 ? void 0 : options.position) !== null && _r !== void 0 ? _r : defaultToastValue.position
+    });
+    setToasts(function (prev) {
+      return __spreadArray([newToast], prev, true);
+    });
+    if (newToast.duration > 0) {
+      setTimeout(function () {
+        return remove(id);
+      }, newToast.duration);
+    }
+    return id;
+  }, [options]);
+  var remove = useCallback(function (id) {
+    setToasts(function (prev) {
+      return prev.filter(function (toast) {
+        return toast.id !== id;
+      });
+    });
+  }, []);
+  var value = useMemo(function () {
+    return {
+      toasts: toasts,
+      add: add,
+      remove: remove
+    };
+  }, [toasts, add, remove]);
+  return jsxs(ToastContext.Provider, {
+    value: value,
+    children: [children, jsx(ToastPortal, {
+      children: toasts.length && jsx(Toaster, {
+        toasts: toasts
+      })
+    })]
+  });
+};
+
+var useToast = function useToast() {
+  var context = useContext(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return context;
+};
+
+export { RouterProvider, ToastProvider, WindowRouter, safeLocalStorage, safeSessionStorage, useFunnel, useRouter, useToast };

package/dist/index.d.ts

@@ -1,5 +1,4 @@
 import "./style/index.scss";
-export { useFunnel } from "./components/Funnel";
 export { Box } from "./components/layout/Box";
 export { Container } from "./components/layout/Container";
 export { Flex } from "./components/layout/Flex";
@@ -14,8 +13,3 @@ export { Popup } from "./components/Popup";
 export { BottomSheet } from "./components/BottomSheet";
 export { Input } from "./components/Input";
 export { Tabs } from "./components/Tabs";
-export { ToastProvider } from "./components/Toast";
-export { safeLocalStorage, safeSessionStorage } from "./shared/storage";
-export { RouterProvider, useRouter } from "./hooks/useRouter";
-export { WindowRouter } from "./router/windowRouter";
-export { useToast } from "./components/Toast";

package/dist/index.js

@@ -1,14 +1,13 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import * as React from 'react';
-import { Children, isValidElement, useEffect, createContext, useContext, useMemo, useCallback, forwardRef, useState, useRef, Fragment as Fragment$1 } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import cx from 'classnames';
+import * as React from 'react';
+import { forwardRef, useState, useCallback, useEffect, useRef } from 'react';
 import * as RadioGroupBase from '@radix-ui/react-radio-group';
 import * as CheckboxBase from '@radix-ui/react-checkbox';
 import { Switch, Dialog } from 'radix-ui';
 import * as SelectBase from '@radix-ui/react-select';
 import { Drawer } from 'vaul';
 import * as TabsBase from '@radix-ui/react-tabs';
-import { createPortal } from 'react-dom';
 
 var _assign = function __assign() {
   _assign = Object.assign || function __assign(t) {
@@ -28,99 +27,11 @@ function __rest(s, e) {
   }
   return t;
 }
-function __spreadArray(to, from, pack) {
-  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-    if (ar || !(i in from)) {
-      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-      ar[i] = from[i];
-    }
-  }
-  return to.concat(ar || Array.prototype.slice.call(from));
-}
 typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
   var e = new Error(message);
   return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var Funnel = function Funnel(_a) {
-  var steps = _a.steps,
-    step = _a.step,
-    children = _a.children;
-  var validChildren = Children.toArray(children).filter(isValidElement).filter(function (i) {
-    var _a;
-    return steps.includes((_a = i.props.name) !== null && _a !== void 0 ? _a : "");
-  });
-  var targetStep = validChildren.find(function (child) {
-    return child.props.name === step;
-  });
-  if (!targetStep) {
-    throw new Error("".concat(step, " Step Component\uB97C \uCC3E\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4."));
-  }
-  return jsx(Fragment, {
-    children: targetStep
-  });
-};
-var Step = function Step(_a) {
-  var onMounted = _a.onMounted,
-    onUnMounted = _a.onUnMounted,
-    children = _a.children;
-  useEffect(function () {
-    onMounted === null || onMounted === void 0 ? void 0 : onMounted();
-    return function () {
-      onUnMounted === null || onUnMounted === void 0 ? void 0 : onUnMounted();
-    };
-  }, [onMounted, onUnMounted]);
-  return jsx(Fragment, {
-    children: children
-  });
-};
-
-var RouterContext = /*#__PURE__*/createContext(null);
-var RouterProvider = RouterContext.Provider;
-function useRouter() {
-  var router = useContext(RouterContext);
-  if (!router) {
-    throw new Error("RouterProvider를 설정해주세요");
-  }
-  return router;
-}
-
-function useQueryParam(name, options) {
-  var router = useRouter();
-  var value = router.getQuery(name);
-  return value;
-}
-
-var DEFAULT_STEP_QUERY_KEY = "funnel-step";
-var useFunnel = function useFunnel(steps, options) {
-  var _a;
-  var router = useRouter();
-  var stepQueryKey = (_a = options === null || options === void 0 ? void 0 : options.stepQueryKey) !== null && _a !== void 0 ? _a : DEFAULT_STEP_QUERY_KEY;
-  if (steps.length === 0) {
-    throw new Error("steps가 비어있습니다.");
-  }
-  var FunnelComponent = useMemo(function () {
-    return Object.assign(function RouteFunnel(props) {
-      var _a;
-      var step = (_a = useQueryParam(stepQueryKey)) !== null && _a !== void 0 ? _a : options === null || options === void 0 ? void 0 : options.initialStep;
-      if (!step) {
-        throw new Error("\uD45C\uC2DC\uD560 \uC2A4\uD15D\uC744 ".concat(stepQueryKey, " \uCFFC\uB9AC \uD30C\uB77C\uBBF8\uD130\uC5D0 \uC9C0\uC815\uD574\uC8FC\uC138\uC694. \uCFFC\uB9AC \uD30C\uB77C\uBBF8\uD130\uAC00 \uC5C6\uC744 \uB54C \uCD08\uAE30 Step\uC744 \uB80C\uB354\uD558\uB824\uBA74 useFunnel\uC758 \uB450 \uBC88\uC9F8 \uD30C\uB77C\uBBF8\uD130 options\uC5D0 initialStep\uC744 \uC9C0\uC815\uD574\uC8FC\uC138\uC694."));
-      }
-      return jsx(Funnel, _assign({
-        steps: steps,
-        step: step
-      }, props));
-    }, {
-      Step: Step
-    });
-  }, []);
-  var setStep = useCallback(function (step) {
-    var _a;
-    router.setQuery((_a = {}, _a[stepQueryKey] = step, _a));
-  }, [stepQueryKey, router]);
-  return [FunnelComponent, setStep];
-};
-
 var SpacingMap = {
   m: ["margin"],
   mx: ["marginLeft", "marginRight"],
@@ -640,10 +551,10 @@ var BottomSheet = function BottomSheet(_a) {
   });
 };
 
-var _rect, _path$4;
-function _extends$4() { return _extends$4 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$4.apply(null, arguments); }
+var _rect, _path$1;
+function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
 var SvgClose = function SvgClose(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$4({
+  return /*#__PURE__*/React.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
@@ -654,7 +565,7 @@ var SvgClose = function SvgClose(props) {
     height: 16,
     fill: "#F6F7F9",
     rx: 8
-  })), _path$4 || (_path$4 = /*#__PURE__*/React.createElement("path", {
+  })), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
     fill: "#A6ABAF",
     fillRule: "evenodd",
     d: "M5.997 5.29a.5.5 0 0 0-.707.707L7.293 8 5.29 10.004a.5.5 0 1 0 .707.707L8 8.708l2.004 2.003a.5.5 0 0 0 .707-.707L8.707 8l2.004-2.003a.5.5 0 0 0-.707-.707L8 7.293z",
@@ -662,16 +573,16 @@ var SvgClose = function SvgClose(props) {
   })));
 };
 
-var _path$3, _path2;
-function _extends$3() { return _extends$3 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$3.apply(null, arguments); }
+var _path, _path2;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var SvgLink = function SvgLink(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$3({
+  return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "none",
     viewBox: "0 0 24 24"
-  }, props), _path$3 || (_path$3 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
     stroke: "#A6ABAF",
     strokeLinecap: "round",
     strokeLinejoin: "round",
@@ -872,507 +783,4 @@ var Tabs = function Tabs(props) {
   }));
 };
 
-function useIsMounted() {
-  var _a = useState(false),
-    mounted = _a[0],
-    setMounted = _a[1];
-  useEffect(function () {
-    setMounted(true);
-  }, []);
-  return mounted;
-}
-
-/** between the toasts spacing */
-var GAP = 8;
-var useToastStack = function useToastStack(toasts) {
-  var _a = useState({}),
-    heights = _a[0],
-    setHeights = _a[1];
-  var updateHeight = useCallback(function (id, height) {
-    setHeights(function (prev) {
-      var _a;
-      return _assign(_assign({}, prev), (_a = {}, _a[id] = height, _a));
-    });
-  }, []);
-  var groupedToasts = useMemo(function () {
-    var groups = {
-      "top-left": [],
-      "top-right": [],
-      "top-center": [],
-      "bottom-left": [],
-      "bottom-right": [],
-      "bottom-center": []
-    };
-    toasts.forEach(function (toast) {
-      var position = toast.position;
-      groups[position].push(toast);
-    });
-    return groups;
-  }, [toasts]);
-  var getToasterProps = useCallback(function (toast, index, position) {
-    var positionToasts = groupedToasts[position];
-    var offset = positionToasts.slice(0, index).reduce(function (total, t) {
-      return total + (heights[t.id] || 0) + GAP;
-    }, 0);
-    var translateY = "".concat(offset * (position.includes("top") ? 1 : -1), "px");
-    var translateX = position.includes("center") ? "-50%" : "0";
-    return {
-      ref: function ref(el) {
-        if (el) {
-          var height = el.getBoundingClientRect().height;
-          if (heights[toast.id] !== height) {
-            updateHeight(toast.id, height);
-          }
-        }
-      },
-      style: {
-        transform: "translate(".concat(translateX, ", ").concat(translateY, ")"),
-        transition: "transform 0.23s cubic-bezier(0.21, 1.02, 0.73, 1)"
-      },
-      className: cx("toast-wrapper", "toast-wrapper--".concat(position))
-    };
-  }, [heights, groupedToasts]);
-  return {
-    getToasterProps: getToasterProps,
-    groupedToasts: groupedToasts
-  };
-};
-
-var _path$2;
-function _extends$2() { return _extends$2 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2.apply(null, arguments); }
-var SvgToastSuccess = function SvgToastSuccess(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "1em",
-    height: "1em",
-    fill: "none",
-    viewBox: "0 0 18 18"
-  }, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
-    fill: "#50BF50",
-    fillRule: "evenodd",
-    d: "M9 18A9 9 0 1 0 9 0a9 9 0 0 0 0 18m4.768-11.36a1 1 0 1 0-1.536-1.28L8.634 9.677c-.347.416-.542.647-.697.788l-.006.006-.007-.005c-.168-.127-.383-.339-.766-.722l-1.45-1.451a1 1 0 0 0-1.415 1.414l1.451 1.451.041.041c.327.327.64.641.933.862.327.248.756.48 1.305.456.55-.025.956-.296 1.26-.572.27-.247.555-.588.85-.943l.037-.044z",
-    clipRule: "evenodd"
-  })));
-};
-
-var _path$1;
-function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
-var SvgToastWarning = function SvgToastWarning(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "1em",
-    height: "1em",
-    fill: "none",
-    viewBox: "0 0 18 16"
-  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
-    fill: "#FEF08A",
-    fillRule: "evenodd",
-    d: "M8.133.504a1 1 0 0 1 1.737 0l8 14A1 1 0 0 1 17 15.998h-16a1 1 0 0 1-.868-1.496zM7.981 5.16a1.02 1.02 0 1 1 2.042 0v4.146a1.02 1.02 0 0 1-2.042 0zm1.02 8.26c.565 0 1.022-.461 1.022-1.031s-.457-1.031-1.021-1.031-1.02.461-1.02 1.031.456 1.031 1.02 1.031",
-    clipRule: "evenodd"
-  })));
-};
-
-var _path;
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-var SvgToastError = function SvgToastError(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "1em",
-    height: "1em",
-    fill: "none",
-    viewBox: "0 0 18 18"
-  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
-    fill: "#EF4444",
-    fillRule: "evenodd",
-    d: "M18 9A9 9 0 1 1 0 9a9 9 0 0 1 18 0M4.293 13.707a1 1 0 0 1 0-1.414L7.586 9 4.293 5.707a1 1 0 0 1 1.414-1.414L9 7.586l3.293-3.293a1 1 0 1 1 1.414 1.414L10.414 9l3.293 3.293a1 1 0 0 1-1.414 1.414L9 10.414l-3.293 3.293a1 1 0 0 1-1.414 0",
-    clipRule: "evenodd"
-  })));
-};
-
-var Toaster = function Toaster(_a) {
-  var toasts = _a.toasts;
-  var _b = useToastStack(toasts),
-    getToasterProps = _b.getToasterProps,
-    groupedToasts = _b.groupedToasts;
-  return jsx(Fragment$1, {
-    children: Object.entries(groupedToasts).map(function (_a) {
-      var position = _a[0],
-        positionToasts = _a[1];
-      return positionToasts.length > 0 && jsx("div", {
-        className: "toaster-content",
-        children: positionToasts.map(function (toast, idx) {
-          var toasterProps = getToasterProps(toast, idx, position);
-          return jsx("div", _assign({}, toasterProps, {
-            children: jsx(Toast, _assign({}, toast))
-          }), toast.id);
-        })
-      }, position);
-    })
-  });
-};
-var Toast = function Toast(_a) {
-  var toast = __rest(_a, []);
-  var width = toast.width,
-    type = toast.type,
-    action = toast.action,
-    position = toast.position,
-    offest = toast.offest,
-    duration = toast.duration,
-    style = toast.style,
-    message = toast.message,
-    buttonText = toast.buttonText,
-    onAction = toast.onAction;
-  var isMounted = useIsMounted();
-  var _b = useState(false),
-    visible = _b[0],
-    setVisible = _b[1];
-  var isTop = position === null || position === void 0 ? void 0 : position.includes("top");
-  var positionClass = isTop ? "top" : "bottom";
-  var offsetStyle = useMemo(function () {
-    var offsetValue = offest;
-    return isTop ? {
-      top: offsetValue + "px"
-    } : {
-      bottom: offsetValue + "px"
-    };
-  }, [isTop, offest]);
-  useEffect(function () {
-    if (isMounted) {
-      requestAnimationFrame(function () {
-        setVisible(true);
-      });
-    }
-    var timer = setTimeout(function () {
-      setVisible(false);
-    }, duration - 500);
-    return function () {
-      return clearTimeout(timer);
-    };
-  }, [isMounted]);
-  return jsxs("div", {
-    "data-frieeren-component": "Toast",
-    className: cx("toast--content", positionClass, {
-      visible: visible,
-      hidden: !visible
-    }),
-    style: _assign(_assign({
-      width: width,
-      visibility: visible ? "visible" : "hidden"
-    }, offsetStyle), style),
-    children: [jsxs("div", {
-      className: "toast--type-message",
-      children: [jsx("div", {
-        className: "toast--type-icon",
-        "data-toast-type": type,
-        children: jsx(SwitchCase, {
-          value: type || "default",
-          caseBy: {
-            success: jsx(SvgToastSuccess, {}),
-            warning: jsx(SvgToastWarning, {}),
-            error: jsx(SvgToastError, {})
-          },
-          defaultComponent: null
-        })
-      }), jsx("div", {
-        className: "toast--message",
-        children: message
-      })]
-    }), jsx(SwitchCase, {
-      value: action || "defualt",
-      caseBy: {
-        "icon-link": jsx("button", {
-          className: "toast--action-link",
-          onClick: onAction,
-          children: "\uB9C1\uD06C\u2192"
-        }),
-        "icon-button": jsx("button", {
-          className: "toast--action-button",
-          onClick: onAction,
-          children: buttonText
-        })
-      },
-      defaultComponent: null
-    })]
-  });
-};
-
-var defaultToastValue = {
-  type: "default",
-  action: "defualt",
-  style: {},
-  offest: 0,
-  message: "",
-  duration: 3000,
-  position: "top-right"
-};
-var ToastContext = /*#__PURE__*/createContext({
-  toasts: [],
-  add: function add() {
-    return "";
-  },
-  remove: function remove() {}
-});
-var ToastPortal = function ToastPortal(_a) {
-  var children = _a.children;
-  var isMounted = useIsMounted();
-  var node = document.getElementById("toast-portal");
-  if (!isMounted) return null;
-  return /*#__PURE__*/createPortal(children, node);
-};
-var ToastProvider = function ToastProvider(_a) {
-  var options = _a.options,
-    children = _a.children;
-  var _b = useState([]),
-    toasts = _b[0],
-    setToasts = _b[1];
-  var add = useCallback(function (toast) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
-    var id = Math.random().toString(36).substring(2, 9);
-    var newToast = _assign(_assign({}, toast), {
-      id: id,
-      type: (_b = (_a = toast.type) !== null && _a !== void 0 ? _a : options === null || options === void 0 ? void 0 : options.type) !== null && _b !== void 0 ? _b : defaultToastValue.type,
-      action: (_d = (_c = toast.action) !== null && _c !== void 0 ? _c : options === null || options === void 0 ? void 0 : options.action) !== null && _d !== void 0 ? _d : defaultToastValue.action,
-      style: (_f = (_e = toast.style) !== null && _e !== void 0 ? _e : options === null || options === void 0 ? void 0 : options.style) !== null && _f !== void 0 ? _f : defaultToastValue.style,
-      offest: (_h = (_g = toast.offest) !== null && _g !== void 0 ? _g : options === null || options === void 0 ? void 0 : options.offest) !== null && _h !== void 0 ? _h : defaultToastValue.offest,
-      radius: (_k = (_j = toast.radius) !== null && _j !== void 0 ? _j : options === null || options === void 0 ? void 0 : options.radius) !== null && _k !== void 0 ? _k : defaultToastValue.radius,
-      message: (_m = (_l = toast.message) !== null && _l !== void 0 ? _l : options === null || options === void 0 ? void 0 : options.message) !== null && _m !== void 0 ? _m : defaultToastValue.message,
-      duration: (_p = (_o = toast.duration) !== null && _o !== void 0 ? _o : options === null || options === void 0 ? void 0 : options.duration) !== null && _p !== void 0 ? _p : defaultToastValue.duration,
-      position: (_r = (_q = toast.position) !== null && _q !== void 0 ? _q : options === null || options === void 0 ? void 0 : options.position) !== null && _r !== void 0 ? _r : defaultToastValue.position
-    });
-    setToasts(function (prev) {
-      return __spreadArray([newToast], prev, true);
-    });
-    if (newToast.duration > 0) {
-      setTimeout(function () {
-        return remove(id);
-      }, newToast.duration);
-    }
-    return id;
-  }, [options]);
-  var remove = useCallback(function (id) {
-    setToasts(function (prev) {
-      return prev.filter(function (toast) {
-        return toast.id !== id;
-      });
-    });
-  }, []);
-  var value = useMemo(function () {
-    return {
-      toasts: toasts,
-      add: add,
-      remove: remove
-    };
-  }, [toasts, add, remove]);
-  return jsxs(ToastContext.Provider, {
-    value: value,
-    children: [children, jsx(ToastPortal, {
-      children: toasts.length && jsx(Toaster, {
-        toasts: toasts
-      })
-    })]
-  });
-};
-
-var useToast = function useToast() {
-  var context = useContext(ToastContext);
-  if (!context) {
-    throw new Error("useToast must be used within a ToastProvider");
-  }
-  return context;
-};
-
-var generateRandomKey = function generateRandomKey() {
-  return Math.random().toString(36).substring(2, 11);
-};
-
-var MemoryStorage = /** @class */function () {
-  function MemoryStorage() {
-    this.map = new Map();
-  }
-  MemoryStorage.prototype.has = function (key) {
-    return this.map.get(key) !== null;
-  };
-  MemoryStorage.prototype.get = function (key) {
-    return this.map.get(key) || null;
-  };
-  MemoryStorage.prototype.set = function (key, value) {
-    this.map.set(key, value);
-  };
-  MemoryStorage.prototype.remove = function (key) {
-    this.map["delete"](key);
-  };
-  MemoryStorage.prototype.clear = function () {
-    this.map.clear();
-  };
-  MemoryStorage.prototype.setObject = function (key, value) {
-    this.map.set(key, JSON.stringify(value));
-  };
-  MemoryStorage.prototype.getObject = function (key) {
-    var value = this.map.get(key);
-    if (!value) return null;
-    return JSON.parse(value);
-  };
-  return MemoryStorage;
-}();
-
-var LocalStorage = /** @class */function () {
-  function LocalStorage() {}
-  LocalStorage.isEnabled = function () {
-    if (typeof window === "undefined" || !!window.localStorage) {
-      return false;
-    }
-    try {
-      var KEY = generateRandomKey();
-      localStorage.setItem(KEY, "test");
-      localStorage.removeItem(KEY);
-      return true;
-    } catch (_a) {
-      return false;
-    }
-  };
-  LocalStorage.prototype.has = function (key) {
-    return localStorage.getItem(key) !== null;
-  };
-  LocalStorage.prototype.get = function (key) {
-    return localStorage.getItem(key);
-  };
-  LocalStorage.prototype.set = function (key, value) {
-    localStorage.setItem(key, value);
-  };
-  LocalStorage.prototype.remove = function (key) {
-    localStorage.removeItem(key);
-  };
-  LocalStorage.prototype.clear = function () {
-    localStorage.clear();
-  };
-  LocalStorage.prototype.setObject = function (key, value) {
-    localStorage.setItem(key, JSON.stringify(value));
-  };
-  LocalStorage.prototype.getObject = function (key) {
-    var value = localStorage.getItem(key);
-    if (!value) return null;
-    return JSON.parse(value);
-  };
-  return LocalStorage;
-}();
-var safeLocalStorage = LocalStorage.isEnabled() ? new LocalStorage() : new MemoryStorage();
-
-var SessionStorage = /** @class */function () {
-  function SessionStorage() {}
-  SessionStorage.isEnabled = function () {
-    if (typeof window === "undefined" || !!window.sessionStorage) {
-      return false;
-    }
-    try {
-      var KEY = generateRandomKey();
-      sessionStorage.setItem(KEY, "test");
-      sessionStorage.removeItem(KEY);
-      return true;
-    } catch (_a) {
-      return false;
-    }
-  };
-  SessionStorage.prototype.has = function (key) {
-    return sessionStorage.getItem(key) !== null;
-  };
-  SessionStorage.prototype.get = function (key) {
-    return sessionStorage.getItem(key);
-  };
-  SessionStorage.prototype.set = function (key, value) {
-    sessionStorage.setItem(key, value);
-  };
-  SessionStorage.prototype.remove = function (key) {
-    sessionStorage.removeItem(key);
-  };
-  SessionStorage.prototype.clear = function () {
-    sessionStorage.clear();
-  };
-  SessionStorage.prototype.setObject = function (key, value) {
-    sessionStorage.setItem(key, JSON.stringify(value));
-  };
-  SessionStorage.prototype.getObject = function (key) {
-    var value = sessionStorage.getItem(key);
-    if (!value) return null;
-    return JSON.parse(value);
-  };
-  return SessionStorage;
-}();
-var safeSessionStorage = SessionStorage.isEnabled() ? new SessionStorage() : new MemoryStorage();
-
-var WindowRouter = /** @class */function () {
-  function WindowRouter() {}
-  Object.defineProperty(WindowRouter.prototype, "location", {
-    get: function get() {
-      return {
-        pathname: window.location.pathname,
-        search: window.location.search,
-        hash: window.location.hash,
-        state: window.history.state
-      };
-    },
-    enumerable: false,
-    configurable: true
-  });
-  WindowRouter.prototype.push = function (path, options) {
-    var _a;
-    window.history.pushState((_a = options === null || options === void 0 ? void 0 : options.state) !== null && _a !== void 0 ? _a : null, "", this.normalizePath(path));
-  };
-  WindowRouter.prototype.replace = function (path, options) {
-    var _a;
-    window.history.replaceState((_a = options === null || options === void 0 ? void 0 : options.state) !== null && _a !== void 0 ? _a : null, "", this.normalizePath(path));
-  };
-  WindowRouter.prototype.back = function () {
-    window.history.back();
-  };
-  WindowRouter.prototype.forward = function () {
-    window.history.forward();
-  };
-  WindowRouter.prototype.setQuery = function (query) {
-    var searchParams = new URLSearchParams(window.location.search);
-    Object.entries(query).forEach(function (_a) {
-      var key = _a[0],
-        value = _a[1];
-      if (Array.isArray(value)) {
-        searchParams["delete"](key);
-        value.forEach(function (v) {
-          return searchParams.append(key, v);
-        });
-      } else if (value !== undefined) {
-        searchParams.set(key, value);
-      } else {
-        searchParams["delete"](key);
-      }
-    });
-    this.replace("".concat(window.location.pathname, "?").concat(searchParams.toString()));
-  };
-  WindowRouter.prototype.getQuery = function (key) {
-    var searchParams = new URLSearchParams(window.location.search);
-    var values = searchParams.getAll(key);
-    if (values.length > 1) {
-      return values;
-    }
-    return searchParams.get(key);
-  };
-  WindowRouter.prototype.getAllQueries = function () {
-    var searchParams = new URLSearchParams(window.location.search);
-    var query = {};
-    searchParams.forEach(function (value, key) {
-      var existing = query[key];
-      if (existing !== undefined) {
-        query[key] = Array.isArray(existing) ? __spreadArray(__spreadArray([], existing, true), [value], false) : [existing, value];
-      } else {
-        query[key] = value;
-      }
-    });
-    return query;
-  };
-  WindowRouter.prototype.normalizePath = function (path) {
-    if (path.startsWith("http://") || path.startsWith("https://")) {
-      return path;
-    }
-    return path.startsWith("/") ? path : "/".concat(path);
-  };
-  return WindowRouter;
-}();
-
-export { BottomSheet, Box, Button, Checkbox, Container, Flex, Grid, Input, Popup, RadioGroup, RouterProvider, Select, Tabs, Text, ToastProvider, Toggle, WindowRouter, safeLocalStorage, safeSessionStorage, useFunnel, useRouter, useToast };
+export { BottomSheet, Box, Button, Checkbox, Container, Flex, Grid, Input, Popup, RadioGroup, Select, Tabs, Text, Toggle };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-frieeren/components",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -75,6 +75,10 @@
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
     },
+    "./client": {
+      "import": "./dist/client.js",
+      "types": "./dist/client.d.ts"
+    },
     "./styles": "./dist/index.css"
   },
   "scripts": {