@team-frieeren/components 1.0.0

package/dist/index.js

@@ -0,0 +1,1378 @@
+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 cx from 'classnames';
+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) {
+    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 SpacingMap = {
+  m: ["margin"],
+  mx: ["marginLeft", "marginRight"],
+  my: ["marginTop", "marginBottom"],
+  mt: ["marginTop"],
+  mb: ["marginBottom"],
+  ml: ["marginLeft"],
+  mr: ["marginRight"],
+  p: ["padding"],
+  px: ["paddingLeft", "paddingRight"],
+  py: ["paddingTop", "paddingBottom"],
+  pt: ["paddingTop"],
+  pb: ["paddingBottom"],
+  pl: ["paddingLeft"],
+  pr: ["paddingRight"]
+};
+var getSpacingStyle = function getSpacingStyle(props) {
+  var style = {};
+  Object.entries(props).forEach(function (_a) {
+    var key = _a[0],
+      value = _a[1];
+    if (value === undefined) return;
+    var properties = SpacingMap[key];
+    properties.forEach(function (property) {
+      style[property] = value;
+    });
+  });
+  return style;
+};
+
+function Box(_a) {
+  var _b = _a.as,
+    Component = _b === void 0 ? "div" : _b,
+    className = _a.className,
+    style = _a.style,
+    width = _a.width,
+    height = _a.height,
+    _c = _a.display,
+    display = _c === void 0 ? "inline-block" : _c,
+    children = _a.children,
+    rest = __rest(_a, ["as", "className", "style", "width", "height", "display", "children"]);
+  var m = rest.m,
+    mt = rest.mt,
+    mb = rest.mb,
+    ml = rest.ml,
+    mr = rest.mr,
+    mx = rest.mx,
+    my = rest.my,
+    p = rest.p,
+    pt = rest.pt,
+    pb = rest.pb,
+    pl = rest.pl,
+    pr = rest.pr,
+    px = rest.px,
+    py = rest.py,
+    props = __rest(rest, ["m", "mt", "mb", "ml", "mr", "mx", "my", "p", "pt", "pb", "pl", "pr", "px", "py"]);
+  var spacingStyle = getSpacingStyle({
+    m: m,
+    mt: mt,
+    mb: mb,
+    ml: ml,
+    mr: mr,
+    mx: mx,
+    my: my,
+    p: p,
+    pt: pt,
+    pb: pb,
+    pl: pl,
+    pr: pr,
+    px: px,
+    py: py
+  });
+  return jsx(Component, _assign({
+    "data-frieeren-component": "Box",
+    className: cx("box", className),
+    style: _assign(_assign({
+      width: width,
+      height: height,
+      display: display
+    }, spacingStyle), style)
+  }, props, {
+    children: children
+  }));
+}
+
+function Container(_a) {
+  var _b = _a.as,
+    Component = _b === void 0 ? "div" : _b,
+    _c = _a.maxWidth,
+    maxWidth = _c === void 0 ? "100%" : _c,
+    className = _a.className,
+    style = _a.style,
+    rest = __rest(_a, ["as", "maxWidth", "className", "style"]);
+  return jsx(Box, _assign({
+    "data-frieeren-component": "Container",
+    as: Component,
+    className: cx("container", className),
+    style: _assign({
+      maxWidth: maxWidth,
+      marginLeft: "auto",
+      marginRight: "auto"
+    }, style)
+  }, rest));
+}
+
+function Flex(_a) {
+  var _b = _a.as,
+    Component = _b === void 0 ? "div" : _b,
+    align = _a.align,
+    justify = _a.justify,
+    flex = _a.flex,
+    direction = _a.direction,
+    wrap = _a.wrap,
+    gap = _a.gap,
+    className = _a.className,
+    style = _a.style,
+    rest = __rest(_a, ["as", "align", "justify", "flex", "direction", "wrap", "gap", "className", "style"]);
+  return jsx(Box, _assign({
+    "data-frieeren-component": "Flex",
+    as: Component,
+    className: cx("flex", className),
+    style: _assign({
+      display: "flex",
+      alignItems: align,
+      justifyContent: justify,
+      flex: flex,
+      flexDirection: direction,
+      flexWrap: wrap,
+      gap: gap
+    }, style)
+  }, rest));
+}
+
+function Grid(_a) {
+  var _b = _a.as,
+    Component = _b === void 0 ? "div" : _b,
+    columns = _a.columns,
+    gap = _a.gap,
+    rowGap = _a.rowGap,
+    columnGap = _a.columnGap,
+    autoFlow = _a.autoFlow,
+    areas = _a.areas,
+    className = _a.className,
+    style = _a.style,
+    rest = __rest(_a, ["as", "columns", "gap", "rowGap", "columnGap", "autoFlow", "areas", "className", "style"]);
+  return jsx(Box, _assign({
+    "data-frieeren-component": "Grid",
+    as: Component,
+    className: cx("grid", className),
+    style: _assign({
+      display: "grid",
+      gridTemplateColumns: typeof columns === "number" ? "repeat(".concat(columns, ", 1fr)") : columns,
+      gap: gap,
+      rowGap: rowGap,
+      columnGap: columnGap,
+      gridAutoFlow: autoFlow,
+      gridTemplateAreas: areas
+    }, style)
+  }, rest));
+}
+
+var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var _b;
+  var _c = _a.type,
+    type = _c === void 0 ? "base" : _c,
+    _d = _a.display,
+    display = _d === void 0 ? "inline" : _d,
+    _e = _a.disabled,
+    disabled = _e === void 0 ? false : _e,
+    _f = _a.loading,
+    loading = _f === void 0 ? false : _f,
+    _g = _a.size,
+    size = _g === void 0 ? "md" : _g,
+    className = _a.className,
+    children = _a.children,
+    color = _a.color,
+    backgroundColor = _a.backgroundColor,
+    borderColor = _a.borderColor,
+    rest = __rest(_a, ["type", "display", "disabled", "loading", "size", "className", "children", "color", "backgroundColor", "borderColor"]);
+  return jsxs("button", _assign({
+    ref: ref,
+    "data-frieeren-component": "Button",
+    className: cx("button", (_b = {}, _b["button--size-".concat(size)] = size, _b["button--type-".concat(type)] = type, _b["button--display-".concat(display)] = display, _b), {
+      disabled: disabled
+    }, className),
+    disabled: disabled || loading,
+    style: {
+      color: color,
+      backgroundColor: backgroundColor,
+      borderColor: borderColor
+    }
+  }, rest, {
+    children: [jsx("span", {
+      className: cx("button--content", {
+        "button--content--hidden": loading
+      }),
+      children: children
+    }), loading && jsxs("span", {
+      className: "button--loading",
+      children: [jsx("div", {
+        className: "button--loading-dot"
+      }), jsx("div", {
+        className: "button--loading-dot"
+      }), jsx("div", {
+        className: "button--loading-dot"
+      })]
+    })]
+  }));
+});
+Button.displayName = "Button";
+
+var Typography;
+(function (Typography) {
+  Typography["Heading"] = "heading";
+  Typography["Body"] = "body";
+  Typography["Text"] = "text";
+})(Typography || (Typography = {}));
+var FontWeight;
+(function (FontWeight) {
+  FontWeight["Regular"] = "regular";
+  FontWeight["Medium"] = "medium";
+  FontWeight["Bold"] = "bold";
+})(FontWeight || (FontWeight = {}));
+
+function Text(_a) {
+  var _b;
+  var _c = _a.as,
+    Component = _c === void 0 ? "span" : _c,
+    className = _a.className,
+    children = _a.children,
+    ellipsisLines = _a.ellipsisLines,
+    _d = _a.typography,
+    typography = _d === void 0 ? Typography.Body : _d,
+    _e = _a.fontWeight,
+    fontWeight = _e === void 0 ? FontWeight.Regular : _e,
+    color = _a.color,
+    _f = _a.display,
+    display = _f === void 0 ? "inline-block" : _f,
+    textAlign = _a.textAlign,
+    style = _a.style,
+    rest = __rest(_a, ["as", "className", "children", "ellipsisLines", "typography", "fontWeight", "color", "display", "textAlign", "style"]);
+  var isSingleLine = ellipsisLines !== undefined && ellipsisLines === 1;
+  var isMultiLine = ellipsisLines !== undefined && ellipsisLines > 1;
+  return jsx(Component, _assign({
+    "data-frieeren-component": "Text",
+    className: cx("text", (_b = {
+      "text--single-line": isSingleLine,
+      "text--multi-line": isMultiLine
+    }, _b["text--font-weight-".concat(fontWeight)] = fontWeight, _b["text--display-".concat(display)] = display && !isSingleLine && !isMultiLine, _b["text--typography-".concat(typography)] = typography, _b), className),
+    style: _assign({
+      color: color,
+      textAlign: textAlign,
+      WebkitLineClamp: ellipsisLines
+    }, style)
+  }, rest, {
+    children: children
+  }));
+}
+
+function Root$3(_a) {
+  var className = _a.className,
+    props = __rest(_a, ["className"]);
+  return jsx(RadioGroupBase.Root, _assign({
+    className: cx("radio-group", className),
+    "data-frieeren-component": "RadioGroup"
+  }, props));
+}
+var Item$1 = function Item(_a) {
+  _a.children;
+    var value = _a.value,
+    props = __rest(_a, ["children", "value"]);
+  return jsx(RadioGroupBase.Item, _assign({
+    value: value,
+    "data-frieeren-component": "RadioGroupItem"
+  }, props));
+};
+var Indicator$1 = function Indicator(_a) {
+  var props = __rest(_a, []);
+  return jsx(RadioGroupBase.Indicator, _assign({
+    "data-frieeren-component": "RadioGroupIndicator"
+  }, props));
+};
+var RadioGroup = {
+  Root: Root$3,
+  Item: Item$1,
+  Indicator: Indicator$1
+};
+
+var Root$2 = function Root(_a) {
+  var className = _a.className,
+    props = __rest(_a, ["className"]);
+  return jsx(CheckboxBase.Root, _assign({
+    className: cx("checkbox", className),
+    "data-frieeren-component": "Checkbox"
+  }, props));
+};
+var Indicator = function Indicator(_a) {
+  var props = __rest(_a, []);
+  jsx(CheckboxBase.Indicator, _assign({
+    "data-frieeren-component": "CheckboxIndicator"
+  }, props));
+};
+var Checkbox = {
+  Root: Root$2,
+  Indicator: Indicator
+};
+
+var Toggle = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var className = _a.className,
+    _b = _a.states,
+    states = _b === void 0 ? "active" : _b,
+    onChange = _a.onChange;
+  return jsx(Switch.Root, {
+    ref: ref,
+    onCheckedChange: onChange,
+    checked: states === "active",
+    className: cx("toggle", className),
+    "data-frieeren-component": "Toggle",
+    children: jsx(Switch.Thumb, {
+      className: "toggle-thumb"
+    })
+  });
+});
+Toggle.displayName = "Toggle";
+
+var Root$1 = function Root(_a) {
+  var className = _a.className,
+    props = __rest(_a, ["className"]);
+  return jsx("div", {
+    className: cx("select", className),
+    children: jsx(SelectBase.Root, _assign({
+      "data-frieeren-component": "Select"
+    }, props))
+  });
+};
+var Trigger$1 = function Trigger(_a) {
+  var props = __rest(_a, []);
+  return jsx(SelectBase.Trigger, _assign({
+    "data-frieeren-component": "SelectTrigger"
+  }, props));
+};
+var Portal = function Portal(_a) {
+  var props = __rest(_a, []);
+  return jsx(SelectBase.Portal, _assign({
+    "data-frieeren-component": "SelectPortal"
+  }, props));
+};
+var Content$1 = function Content(_a) {
+  var props = __rest(_a, []);
+  return jsx(SelectBase.Content, _assign({
+    "data-frieeren-component": "SelectContent"
+  }, props));
+};
+var Viewport = function Viewport(_a) {
+  var props = __rest(_a, []);
+  return jsx(SelectBase.Viewport, _assign({
+    "data-frieeren-component": "SelectViewport"
+  }, props));
+};
+var Group = function Group(_a) {
+  var props = __rest(_a, []);
+  return jsx(SelectBase.Group, _assign({
+    "data-frieeren-component": "SelectGroup"
+  }, props));
+};
+var Item = function Item(_a) {
+  var props = __rest(_a, []);
+  return jsx(SelectBase.Item, _assign({
+    "data-frieeren-component": "SelectItem"
+  }, props));
+};
+var Label = function Label(_a) {
+  var props = __rest(_a, []);
+  return jsx(SelectBase.Label, _assign({
+    "data-frieeren-component": "SelectLabel"
+  }, props));
+};
+var ItemText = function ItemText(_a) {
+  var props = __rest(_a, []);
+  return jsx(SelectBase.ItemText, _assign({
+    "data-frieeren-component": "SelectItemText"
+  }, props));
+};
+var Value = function Value(_a) {
+  var props = __rest(_a, []);
+  return jsx(SelectBase.Value, _assign({
+    "data-frieeren-component": "SelectValue"
+  }, props));
+};
+var Select = {
+  Root: Root$1,
+  Trigger: Trigger$1,
+  Portal: Portal,
+  Content: Content$1,
+  Viewport: Viewport,
+  Group: Group,
+  Item: Item,
+  Label: Label,
+  ItemText: ItemText,
+  Value: Value
+};
+
+var Popup = function Popup(props) {
+  var _a;
+  var className = props.className,
+    children = props.children,
+    buttonLayoutType = props.buttonLayoutType,
+    container = props.container,
+    title = props.title,
+    description = props.description,
+    onClose = props.onClose,
+    rest = __rest(props, ["className", "children", "buttonLayoutType", "container", "title", "description", "onClose"]);
+  return jsx(Dialog.Root, _assign({}, rest, {
+    defaultOpen: true,
+    children: jsxs(Dialog.Portal, {
+      container: container || document.body,
+      children: [jsx(Dialog.Overlay, {
+        className: "popup--overlay",
+        onClick: onClose
+      }), jsxs(Dialog.Content, {
+        "data-frieeren-component": "Popup",
+        className: cx("popup", (_a = {}, _a["popup--layout-".concat(buttonLayoutType)] = buttonLayoutType, _a), className),
+        children: [jsx(Dialog.Title, {
+          className: "visually-hidden",
+          children: title || "Popup"
+        }), jsx(Dialog.Description, {
+          className: "visually-hidden",
+          children: description || "Popup"
+        }), jsx("div", {
+          className: "popup--body",
+          children: children
+        }), buttonLayoutType === "typeA" && "button" in props && props.button && jsx("div", {
+          className: "popup--actions",
+          children: props.button
+        }), buttonLayoutType === "typeB" && "leftButton" in props && "rightButton" in props && jsxs("div", {
+          className: "popup--actions popup--actions-typeB",
+          children: [jsx("div", {
+            className: "popup--actions-left",
+            children: props.leftButton
+          }), jsx("div", {
+            className: "popup--actions-right",
+            children: props.rightButton
+          })]
+        })]
+      })]
+    })
+  }));
+};
+
+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;
+}
+
+var BottomSheet = function BottomSheet(_a) {
+  var _b;
+  var open = _a.open,
+    onClose = _a.onClose,
+    _c = _a.locked,
+    locked = _c === void 0 ? true : _c,
+    _d = _a.showHandle,
+    showHandle = _d === void 0 ? true : _d,
+    _e = _a.handleOnly,
+    handleOnly = _e === void 0 ? false : _e,
+    radius = _a.radius,
+    _f = _a.theme,
+    theme = _f === void 0 ? "light" : _f,
+    _g = _a.zIndex,
+    zIndex = _g === void 0 ? 1 : _g,
+    className = _a.className,
+    children = _a.children;
+  return jsx(Drawer.Root, {
+    open: open,
+    onClose: onClose,
+    modal: locked,
+    handleOnly: handleOnly,
+    children: jsxs(Drawer.Portal, {
+      children: [jsx(Drawer.Overlay, {
+        className: "overlay",
+        "data-frieeren-component": "BottomSheetOverlay",
+        style: {
+          zIndex: zIndex
+        }
+      }), jsxs(Drawer.Content, {
+        className: cx("drawer-content", (_b = {}, _b["bottomsheet-container--radius-".concat(radius)] = radius, _b["bottomsheet-container--theme-".concat(theme)] = theme, _b), className),
+        "data-frieeren-component": "BottomSheet",
+        style: {
+          zIndex: zIndex
+        },
+        children: [jsx(SwitchCase, {
+          value: String(showHandle),
+          caseBy: {
+            "true": jsx(Flex, {
+              className: "drawer-handle",
+              align: "center",
+              justify: "center",
+              children: jsx(Drawer.Handle, {
+                style: {
+                  width: 36
+                }
+              })
+            })
+          }
+        }), jsx("div", {
+          className: "drawer-content-inner",
+          children: children
+        })]
+      })]
+    })
+  });
+};
+
+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 SvgClose = function SvgClose(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$4({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 16 16"
+  }, props), _rect || (_rect = /*#__PURE__*/React.createElement("rect", {
+    width: 16,
+    height: 16,
+    fill: "#F6F7F9",
+    rx: 8
+  })), _path$4 || (_path$4 = /*#__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",
+    clipRule: "evenodd"
+  })));
+};
+
+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 SvgLink = function SvgLink(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$3({
+    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", {
+    stroke: "#A6ABAF",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 1.5,
+    d: "m14 10-4 4"
+  })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
+    stroke: "#A6ABAF",
+    strokeLinecap: "round",
+    strokeWidth: 1.5,
+    d: "m16 13 2-2a3.536 3.536 0 0 0 0-5v0a3.536 3.536 0 0 0-5 0l-2 2m-3 3-2 2a3.536 3.536 0 0 0 0 5v0a3.536 3.536 0 0 0 5 0l2-2"
+  })));
+};
+
+var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var _b;
+  var _c = _a.type,
+    type = _c === void 0 ? "text" : _c;
+    _a.accept;
+    var _d = _a.display,
+    display = _d === void 0 ? "box" : _d,
+    _e = _a.disabled,
+    disabled = _e === void 0 ? false : _e,
+    _f = _a.error,
+    error = _f === void 0 ? false : _f,
+    onClear = _a.onClear,
+    className = _a.className,
+    value = _a.value,
+    onChange = _a.onChange,
+    _g = _a.placeholder,
+    placeholder = _g === void 0 ? "텍스트를 입력하세요" : _g,
+    rest = __rest(_a, ["type", "accept", "display", "disabled", "error", "onClear", "className", "value", "onChange", "placeholder"]);
+  var _h = useState(false),
+    hasFile = _h[0],
+    setHasFile = _h[1];
+  var handleChange = function handleChange(e) {
+    if (type === "file") {
+      setHasFile(!!(e.target.files && e.target.files.length > 0));
+    }
+    if (onChange) {
+      onChange(e);
+    }
+  };
+  return jsxs("div", {
+    className: cx("input-wrapper", (_b = {}, _b["input--display-".concat(display)] = display, _b["input--disabled"] = disabled, _b["input--error"] = error, _b), className),
+    children: [jsx("input", _assign({
+      placeholder: placeholder,
+      ref: ref,
+      type: type,
+      disabled: disabled,
+      className: cx("input", {
+        "has-file": hasFile
+      }),
+      "data-frieeren-component": "Input",
+      onChange: handleChange
+    }, rest)), type === "file" && jsx("button", {
+      className: "input--action input--action-link",
+      disabled: disabled,
+      children: jsx(SvgLink, {})
+    }), value && onClear && jsx("button", {
+      onClick: onClear,
+      className: "input--close",
+      disabled: disabled,
+      children: jsx(SvgClose, {})
+    })]
+  });
+});
+Input.displayName = "Input";
+
+var Root = function Root(_a) {
+  var props = __rest(_a, []);
+  return jsx(TabsBase.Root, _assign({
+    "data-frieeren-component": "Tabs",
+    className: "tabs"
+  }, props));
+};
+var List = function List(_a) {
+  var props = __rest(_a, []);
+  return jsx(TabsBase.List, _assign({
+    "data-frieeren-component": "TabsList",
+    className: "tabs--list"
+  }, props));
+};
+var Trigger = function Trigger(_a) {
+  var props = __rest(_a, []);
+  return jsx(TabsBase.Trigger, _assign({
+    "data-frieeren-component": "TabsTrigger",
+    className: "tabs--trigger"
+  }, props));
+};
+var Content = function Content(_a) {
+  var props = __rest(_a, []);
+  return jsx(TabsBase.Content, _assign({
+    "data-frieeren-component": "TabsContent",
+    className: "tabs--content"
+  }, props));
+};
+
+/**
+ * 탭 인디케이터의 위치를 계산하고 관리하는 커스텀 훅
+ * @param {UseTabsIndicatorProps} props - 탭 인디케이터 설정
+ * @returns {Object} indicatorStyle - 인디케이터의 스타일 객체
+ */
+var useTabsIndicator = function useTabsIndicator(_a) {
+  var listRef = _a.listRef;
+  var _b = useState({}),
+    indicatorStyle = _b[0],
+    setIndicatorStyle = _b[1];
+  // 활성화된 탭의 위치를 기반으로 인디케이터의 위치를 계산합니다.
+  var updateIndicatorPosition = useCallback(function (listRef) {
+    var _a;
+    var activeTab = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('[data-state="active"]');
+    if (!activeTab) return;
+    var _b = activeTab,
+      offsetLeft = _b.offsetLeft,
+      offsetWidth = _b.offsetWidth;
+    setIndicatorStyle({
+      transform: "translateX(".concat(offsetLeft, "px)"),
+      width: "".concat(offsetWidth, "px")
+    });
+  }, []);
+  useEffect(function () {
+    if (!listRef.current) return;
+    // 초기 인디케이터 위치 설정
+    updateIndicatorPosition(listRef);
+    /**
+     * 탭의 상태 변화를 감지하는 MutationObserver
+     * data-state 속성이 변경될 때마다 인디케이터 위치를 업데이트합니다.
+     */
+    var mutationObserver = new MutationObserver(function (mutations) {
+      mutations.forEach(function (mutation) {
+        if (mutation.type === "attributes" && mutation.attributeName === "data-state") {
+          updateIndicatorPosition(listRef);
+        }
+      });
+    });
+    /**
+     * 탭의 크기 변화를 감지하는 ResizeObserver
+     * 윈도우 리사이즈나 탭 크기 변경 시 인디케이터 위치를 업데이트합니다.
+     */
+    var resizeObserver = new ResizeObserver(function () {
+      updateIndicatorPosition(listRef);
+    });
+    // 모든 탭 트리거에 옵저버 적용
+    var triggers = listRef.current.querySelectorAll('[role="tab"]');
+    triggers.forEach(function (trigger) {
+      mutationObserver.observe(trigger, {
+        attributes: true
+      });
+      resizeObserver.observe(trigger);
+    });
+    return function () {
+      mutationObserver.disconnect();
+      resizeObserver.disconnect();
+    };
+  }, [listRef, updateIndicatorPosition]);
+  return {
+    indicatorStyle: indicatorStyle
+  };
+};
+
+var Tabs = function Tabs(props) {
+  var _a = props.width,
+    width = _a === void 0 ? "100%" : _a,
+    tabItems = props.tabItems,
+    value = props.value,
+    rest = __rest(props, ["width", "tabItems", "value"]);
+  var listRef = useRef(null);
+  var indicatorStyle = useTabsIndicator({
+    listRef: listRef
+  }).indicatorStyle;
+  return jsxs(Root, _assign({
+    value: value
+  }, rest, {
+    style: {
+      width: width
+    },
+    children: [jsxs("div", {
+      ref: listRef,
+      className: "tabs--list-wrapper",
+      children: [jsx(List, {
+        "data-orientation": "horizontal",
+        children: tabItems.map(function (item) {
+          return jsx(Trigger, {
+            value: item.value,
+            children: item.text
+          }, "tabTrigger_".concat(item.value));
+        })
+      }), jsx("div", {
+        className: "tabs--indicator",
+        style: indicatorStyle
+      })]
+    }), tabItems.map(function (item) {
+      return jsx(Content, {
+        value: item.value,
+        children: item.content
+      }, "tabContent_".concat(item.value));
+    })]
+  }));
+};
+
+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 };