@team-frieeren/components 1.0.1 → 1.0.3

package/dist/client.d.ts

@@ -1,5 +1,8 @@
+import "./style/client.scss";
 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";
+export { Popup } from "./components/Popup";
+export { BottomSheet } from "./components/BottomSheet";

package/dist/client.js

@@ -3,6 +3,36 @@ 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';
+import { Dialog } from 'radix-ui';
+import { Drawer } from 'vaul';
+
+function styleInject(css, ref) {
+  if (ref === void 0) ref = {};
+  var insertAt = ref.insertAt;
+  if (!css || typeof document === 'undefined') {
+    return;
+  }
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z$1 = "@import url(\"https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css\");\n/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.15}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--seed-palette-color-base-200:#f6f7f9;--seed-palette-color-base-300:#edf0f3;--seed-palette-color-base-400:#e0e5ea;--seed-palette-color-base-500:#c6ccd1;--seed-palette-color-base-600:#a6abaf;--seed-palette-color-base-700:#7b8287;--seed-palette-color-base-900:#25292c;--seed-palette-color-base-1000:#191b1c;--seed-palette-color-blue-100:#f0f9ff;--seed-palette-color-blue-200:#e0f2fe;--seed-palette-color-blue-300:#bae6fd;--seed-palette-color-blue-400:#7dd3fc;--seed-palette-color-blue-500:#38bdf8;--seed-palette-color-blue-600:#0ea5e9;--seed-palette-color-blue-700:#0284c7;--seed-palette-color-blue-800:#0369a1;--seed-palette-color-blue-900:#075985;--seed-palette-color-blue-1000:#0c4a6e;--seed-palette-color-purple-100:#f9fafe;--seed-palette-color-purple-200:#ecedfc;--seed-palette-color-purple-300:#d0d2f7;--seed-palette-color-purple-400:#b5b8f2;--seed-palette-color-purple-500:#9a9eec;--seed-palette-color-purple-600:#7a82e4;--seed-palette-color-purple-700:#6167c9;--seed-palette-color-purple-800:#5756a6;--seed-palette-color-purple-900:#494582;--seed-palette-color-purple-1000:#38325d;--seed-palette-color-red-100:#fef2f2;--seed-palette-color-red-200:#fee2e2;--seed-palette-color-red-300:#fecaca;--seed-palette-color-red-400:#fca5a5;--seed-palette-color-red-500:#f87171;--seed-palette-color-red-600:#ef4444;--seed-palette-color-red-700:#dc2626;--seed-palette-color-red-800:#b91c1c;--seed-palette-color-red-900:#991b1b;--seed-palette-color-red-1000:#7f1d1d;--seed-palette-color-orange-100:#fff7ed;--seed-palette-color-orange-200:#ffedd5;--seed-palette-color-orange-300:#fed7aa;--seed-palette-color-orange-400:#fdba74;--seed-palette-color-orange-500:#fb923c;--seed-palette-color-orange-600:#f97316;--seed-palette-color-orange-700:#ea580c;--seed-palette-color-orange-800:#c2410c;--seed-palette-color-orange-900:#9a3412;--seed-palette-color-orange-1000:#7c2d12;--seed-palette-color-yellow-100:#fefce8;--seed-palette-color-yellow-200:#fef9c3;--seed-palette-color-yellow-300:#fef08a;--seed-palette-color-yellow-400:#fde047;--seed-palette-color-yellow-500:#facc15;--seed-palette-color-yellow-600:#eab308;--seed-palette-color-yellow-700:#ca8a04;--seed-palette-color-yellow-800:#a16207;--seed-palette-color-yellow-900:#854d0e;--seed-palette-color-yellow-1000:#713f12;--seed-palette-color-green-100:#e9ffe9;--seed-palette-color-green-200:#d5ffd5;--seed-palette-color-green-300:#bdffbd;--seed-palette-color-green-400:#89ee89;--seed-palette-color-green-500:#60e060;--seed-palette-color-green-600:#50bf50;--seed-palette-color-green-700:#2fa32f;--seed-palette-color-green-800:#1e861e;--seed-palette-color-green-900:#156015;--seed-palette-color-green-1000:#063f06;--seed-ui-color-text-white:#fff;--seed-ui-color-text-disabled:#c6ccd1;--seed-ui-color-text-lite:#a6abaf;--seed-ui-color-text-dark:#494f54;--seed-ui-color-text-black:#191b1c;--seed-ui-color-background-white:#fff;--seed-ui-color-background-container:#fff;--seed-ui-color-background-gray:#f6f7f9;--seed-ui-color-background-chips:#f6f7f9;--seed-ui-color-background-placeholder:#e0e5ea;--seed-ui-color-background-guide:#e0e5ea;--seed-ui-color-background-focus:#191b1c;--seed-ui-color-icon-white:#fff;--seed-ui-color-icon-lite:#a6abaf;--seed-ui-color-icon-dark:#494f54;--seed-ui-color-icon-black:#191b1c;--seed-ui-color-line-white:#fff;--seed-ui-color-line-lite:#edf0f3;--seed-ui-color-line-medium:#c6ccd1;--seed-ui-color-line-dark:#494f54;--seed-ui-color-line-focus:#25292c;--seed-ui-color-toast-complete:#50bf50;--seed-ui-color-toast-error:#ef4444;--seed-ui-color-toast-caution:#fef08a;--seed-ui-color-misc-black-70:rgba(0,0,0,.7);--seed-ui-color-misc-black-40:rgba(0,0,0,.4);--seed-brand-color-primary:#50bf50;--seed-brand-color-secondary1:#bdffbd;--seed-brand-color-secondary2:#e9ffe9;--seed-brand-color-point1:#ef4444;--seed-brand-color-point2:#f87171;--seed-brand-color-point3:#fb923c;--seed-brand-color-point4:#fef08a;--seed-font-family-head:pretendard;--seed-font-family-title:pretendard;--seed-font-family-body:pretendard;--seed-font-family-paragraph:pretendard;--seed-font-family-caption:pretendard;--seed-font-weight-400:regular;--seed-font-weight-500:medium;--seed-font-weight-700:bold;--seed-font-size-xs:12px;--seed-font-size-s:14px;--seed-font-size-sm:16px;--seed-font-size-md:18px;--seed-font-size-lg:20px;--seed-font-size-xl:22px;--seed-font-size-2xl:24px;--seed-font-size-4xl:32px;--seed-font-size-5xl:40px;--seed-font-size-6xl:48px;--seed-font-size-3xl:28px;--seed-font-line-height-sm:16px;--seed-font-line-height-2xl:24px;--seed-font-line-height-4xl:32px;--seed-font-line-height-5xl:40px;--seed-font-line-height-6xl:48px;--seed-font-line-height-lg:20px;--seed-font-line-height-3xl:28px;--seed-font-line-height-s:14px;--seed-spacing-200:4px;--seed-spacing-400:12px;--seed-spacing-500:16px;--seed-spacing-700:24px;--seed-spacing-800:28px;--seed-spacing-1000:40px;--seed-spacing-1100:48px;--seed-spacing-1200:56px;--seed-spacing-1300:64px;--seed-spacing-1400:72px;--seed-rounding-100:0px;--seed-rounding-200:4px;--seed-rounding-300:8px;--seed-rounding-400:12px;--seed-rounding-500:16px;--seed-rounding-600:20px;--seed-rounding-700:24px;--seed-rounding-800:28px;--seed-rounding-900:32px;--seed-rounding-1000:40px;--seed-rounding-1100:48px;--seed-rounding-1200:56px;--seed-rounding-1300:64px;--seed-rounding-1400:72px}.popup{animation:popup-content-show .15s cubic-bezier(.16,1,.3,1);background-color:var(--seed-ui-color-background-white);border-radius:16px;box-shadow:0 4px 16px 0 hsla(0,0%,43%,.07);left:50%;max-height:85vh;max-width:450px;overflow-y:auto;padding:24px 16px;position:fixed;top:50%;transform:translate(-50%,-50%);width:100%}.popup:focus{outline:none}.popup--actions{display:flex;gap:8px;justify-content:flex-end;margin-top:24px}.popup--actions>*{flex:1}.popup--actions-typeB{display:flex;gap:8px;justify-content:space-between}.popup--actions-left{flex:0 0 auto;min-width:76px}.popup--actions-right{flex:1 1 auto}@keyframes popup-overlay-show{0%{opacity:0}to{opacity:1}}@keyframes popup-content-show{0%{opacity:0;transform:translate(-50%,-48%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.visually-hidden{clip:rect(0 0 0 0);word-wrap:normal;border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}:root{--seed-palette-color-base-100:#fff;--seed-palette-color-base-800:#494f54;--seed-spacing-100:0px;--seed-spacing-300:8px;--seed-spacing-600:20px;--seed-spacing-900:32px}.overlay{background-color:rgba(0,0,0,.4);inset:0;position:fixed}.drawer-content{background-color:#fff;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important;bottom:0;height:fit-content;left:0;max-height:calc(100dvh - 32px);outline:none;overflow-y:hidden;position:fixed;right:0}.drawer-content-inner{-webkit-overflow-scrolling:touch;max-height:calc(100dvh - 68px);overflow-y:auto}.bottomsheet-container--radius-none{border-top:var(--seed-spacing-100)}.bottomsheet-container--radius-small{border-radius:var(--seed-spacing-300)}.bottomsheet-container--radius-medium{border-radius:var(--seed-spacing-700)}.bottomsheet-container--radius-large{border-radius:var(--seed-spacing-900)}.bottomsheet-container--theme-light{background-color:var(--seed-palette-color-base-100)}.bottomsheet-container--theme-dark{background-color:var(--seed-palette-color-base-800)}.drawer-handle{height:36px;width:100%}@keyframes toast-enter-top{0%{opacity:.5;transform:translate3d(0,-200%,0) scale(.6)}to{opacity:1;transform:translateZ(0) scale(1)}}@keyframes toast-exit-top{0%{opacity:1;transform:translateZ(-1px) scale(1)}to{opacity:0;transform:translate3d(0,-150%,-1px) scale(.6)}}@keyframes toast-enter-bottom{0%{opacity:.5;transform:translate3d(0,200%,0) scale(.6)}to{opacity:1;transform:translateZ(0) scale(1)}}@keyframes toast-exit-bottom{0%{opacity:1;transform:translateZ(-1px) scale(1)}to{opacity:0;transform:translate3d(0,150%,-1px) scale(.6)}}@keyframes toast-fade-in{0%{opacity:0}to{opacity:1}}@keyframes toast-fade-out{0%{opacity:1}to{opacity:0}}.toast--content{align-items:center;background:var(--seed-ui-color-misc-black-70);border-radius:var(--seed-rounding-300);box-shadow:0 3px 10px rgba(0,0,0,.1),0 3px 3px rgba(0,0,0,.05);box-sizing:border-box;color:#363636;display:flex;gap:var(--seed-spacing-600);justify-content:space-between;min-height:56px;opacity:0;padding:var(--seed-spacing-500);pointer-events:auto;position:relative;transition:transform .23s cubic-bezier(.21,1.02,.73,1);will-change:transform}.toast--content.top.visible{animation:toast-enter-top .35s cubic-bezier(.21,1.02,.73,1) forwards}.toast--content.top.hidden{animation:toast-exit-top .4s cubic-bezier(.06,.71,.55,1) forwards}.toast--content.bottom.visible{animation:toast-enter-bottom .35s cubic-bezier(.21,1.02,.73,1) forwards}.toast--content.bottom.hidden{animation:toast-exit-bottom .4s cubic-bezier(.06,.71,.55,1) forwards}@media (prefers-reduced-motion:reduce){.toast--content.visible{animation:toast-fade-in .35s ease-in forwards}.toast--content.hidden{animation:toast-fade-out .4s ease-out forwards}}.toast--type-message{gap:var(--seed-spacing-300)}.toast--type-icon,.toast--type-message{align-items:center;display:flex}.toast--type-icon[data-toast-type=default]{display:none}.toast--message{color:var(--seed-ui-color-text-white);font-size:var(--seed-font-size-s);font-weight:var(--seed-font-weight-400);line-height:var(--seed-font-line-height-sm)}.toast--action-link{text-decoration:underline;text-underline-offset:2px}.toast--action-button,.toast--action-link{color:var(--seed-ui-color-text-white);cursor:pointer;flex-shrink:0;font-size:var(--seed-font-size-xs);font-weight:var(--seed-font-weight-400)}.toast--action-button{align-items:center;background-color:var(--seed-brand-color-primary);border-radius:var(--seed-rounding-400);display:flex;justify-content:center;padding:var(--seed-spacing-200) var(--seed-spacing-300)}.toaster-content{bottom:0;left:0;pointer-events:none;position:fixed;right:0;top:0;z-index:9999}.toast-wrapper{position:absolute}.toast-wrapper>*{transition:all .23s cubic-bezier(.21,1.02,.73,1)}.toast-wrapper.toast-wrapper--top-right{right:0}.toast-wrapper.toast-wrapper--top-left{left:0}.toast-wrapper.toast-wrapper--top-center{left:50%}.toast-wrapper.toast-wrapper--bottom-right{bottom:0;right:0}.toast-wrapper.toast-wrapper--bottom-left{bottom:0;left:0}.toast-wrapper.toast-wrapper--bottom-center{bottom:0;left:50%}";
+styleInject(css_248z$1);
 
 var _assign = function __assign() {
   _assign = Object.assign || function __assign(t) {
@@ -630,4 +660,225 @@ var useToast = function useToast() {
   return context;
 };
 
-export { RouterProvider, ToastProvider, WindowRouter, safeLocalStorage, safeSessionStorage, useFunnel, useRouter, useToast };
+var css_248z = ".popup{animation:popup-content-show .15s cubic-bezier(.16,1,.3,1);background-color:var(--seed-ui-color-background-white);border-radius:16px;box-shadow:0 4px 16px 0 hsla(0,0%,43%,.07);left:50%;max-height:85vh;max-width:450px;overflow-y:auto;padding:24px 16px;position:fixed;top:50%;transform:translate(-50%,-50%);width:100%}.popup:focus{outline:none}.popup--actions{display:flex;gap:8px;justify-content:flex-end;margin-top:24px}.popup--actions>*{flex:1}.popup--actions-typeB{display:flex;gap:8px;justify-content:space-between}.popup--actions-left{flex:0 0 auto;min-width:76px}.popup--actions-right{flex:1 1 auto}@keyframes popup-overlay-show{0%{opacity:0}to{opacity:1}}@keyframes popup-content-show{0%{opacity:0;transform:translate(-50%,-48%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.visually-hidden{clip:rect(0 0 0 0);word-wrap:normal;border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}";
+styleInject(css_248z);
+
+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
+          })]
+        })]
+      })]
+    })
+  }));
+};
+
+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 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));
+}
+
+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
+        })]
+      })]
+    })
+  });
+};
+
+export { BottomSheet, Popup, RouterProvider, ToastProvider, WindowRouter, safeLocalStorage, safeSessionStorage, useFunnel, useRouter, useToast };

package/dist/index.css

@@ -1669,75 +1669,6 @@ button {
 .toggle-thumb[data-state=checked] {
   transform: translateX(26px);
 }
-.popup {
-  background-color: var(--seed-ui-color-background-white);
-  border-radius: 16px;
-  box-shadow: 0px 4px 16px 0px rgba(109, 109, 109, 0.07);
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 100%;
-  max-width: 450px;
-  max-height: 85vh;
-  padding: 24px 16px;
-  animation: popup-content-show 150ms cubic-bezier(0.16, 1, 0.3, 1);
-  overflow-y: auto;
-}
-.popup:focus {
-  outline: none;
-}
-.popup--actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  margin-top: 24px;
-}
-.popup--actions > * {
-  flex: 1;
-}
-.popup--actions-typeB {
-  display: flex;
-  justify-content: space-between;
-  gap: 8px;
-}
-.popup--actions-left {
-  min-width: 76px;
-  flex: 0 0 auto;
-}
-.popup--actions-right {
-  flex: 1 1 auto;
-}
-@keyframes popup-overlay-show {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@keyframes popup-content-show {
-  from {
-    opacity: 0;
-    transform: translate(-50%, -48%) scale(0.96);
-  }
-  to {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
-  }
-}
-.visually-hidden {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-  white-space: nowrap;
-  word-wrap: normal;
-}
 @charset "UTF-8";
 :root {
   --input-transition: 0.2s ease-in-out;

package/dist/index.d.ts

@@ -9,7 +9,5 @@ export { RadioGroup } from "./components/RadioGroup";
 export { Checkbox } from "./components/Checkbox";
 export { Toggle } from "./components/Toggle";
 export { Select } from "./components/Select";
-export { Popup } from "./components/Popup";
-export { BottomSheet } from "./components/BottomSheet";
 export { Input } from "./components/Input";
 export { Tabs } from "./components/Tabs";

package/dist/index.js

@@ -4,11 +4,38 @@ 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 { Switch } from 'radix-ui';
 import * as SelectBase from '@radix-ui/react-select';
-import { Drawer } from 'vaul';
 import * as TabsBase from '@radix-ui/react-tabs';
 
+function styleInject(css, ref) {
+  if (ref === void 0) ref = {};
+  var insertAt = ref.insertAt;
+  if (!css || typeof document === 'undefined') {
+    return;
+  }
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z$3 = "@charset \"UTF-8\";@import url(\"https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css\");\n/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.15}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--seed-palette-color-base-200:#f6f7f9;--seed-palette-color-base-300:#edf0f3;--seed-palette-color-base-400:#e0e5ea;--seed-palette-color-base-600:#a6abaf;--seed-palette-color-base-700:#7b8287;--seed-palette-color-blue-100:#f0f9ff;--seed-palette-color-blue-300:#bae6fd;--seed-palette-color-blue-400:#7dd3fc;--seed-palette-color-blue-500:#38bdf8;--seed-palette-color-blue-600:#0ea5e9;--seed-palette-color-blue-700:#0284c7;--seed-palette-color-blue-900:#075985;--seed-palette-color-purple-100:#f9fafe;--seed-palette-color-purple-200:#ecedfc;--seed-palette-color-purple-300:#d0d2f7;--seed-palette-color-purple-400:#b5b8f2;--seed-palette-color-purple-500:#9a9eec;--seed-palette-color-purple-600:#7a82e4;--seed-palette-color-purple-700:#6167c9;--seed-palette-color-purple-800:#5756a6;--seed-palette-color-purple-900:#494582;--seed-palette-color-purple-1000:#38325d;--seed-palette-color-red-100:#fef2f2;--seed-palette-color-red-200:#fee2e2;--seed-palette-color-red-300:#fecaca;--seed-palette-color-red-400:#fca5a5;--seed-palette-color-red-500:#f87171;--seed-palette-color-red-600:#ef4444;--seed-palette-color-red-700:#dc2626;--seed-palette-color-red-800:#b91c1c;--seed-palette-color-red-900:#991b1b;--seed-palette-color-red-1000:#7f1d1d;--seed-palette-color-orange-100:#fff7ed;--seed-palette-color-orange-200:#ffedd5;--seed-palette-color-orange-300:#fed7aa;--seed-palette-color-orange-400:#fdba74;--seed-palette-color-orange-500:#fb923c;--seed-palette-color-orange-600:#f97316;--seed-palette-color-orange-700:#ea580c;--seed-palette-color-orange-800:#c2410c;--seed-palette-color-orange-900:#9a3412;--seed-palette-color-orange-1000:#7c2d12;--seed-palette-color-yellow-100:#fefce8;--seed-palette-color-yellow-200:#fef9c3;--seed-palette-color-yellow-300:#fef08a;--seed-palette-color-yellow-400:#fde047;--seed-palette-color-yellow-500:#facc15;--seed-palette-color-yellow-600:#eab308;--seed-palette-color-yellow-700:#ca8a04;--seed-palette-color-yellow-800:#a16207;--seed-palette-color-yellow-900:#854d0e;--seed-palette-color-yellow-1000:#713f12;--seed-palette-color-green-100:#e9ffe9;--seed-palette-color-green-200:#d5ffd5;--seed-palette-color-green-300:#bdffbd;--seed-palette-color-green-400:#89ee89;--seed-palette-color-green-500:#60e060;--seed-palette-color-green-600:#50bf50;--seed-palette-color-green-700:#2fa32f;--seed-palette-color-green-800:#1e861e;--seed-palette-color-green-900:#156015;--seed-palette-color-green-1000:#063f06;--seed-ui-color-text-white:#fff;--seed-ui-color-text-disabled:#c6ccd1;--seed-ui-color-text-lite:#a6abaf;--seed-ui-color-text-dark:#494f54;--seed-ui-color-text-black:#191b1c;--seed-ui-color-background-white:#fff;--seed-ui-color-background-container:#fff;--seed-ui-color-background-gray:#f6f7f9;--seed-ui-color-background-chips:#f6f7f9;--seed-ui-color-background-placeholder:#e0e5ea;--seed-ui-color-background-guide:#e0e5ea;--seed-ui-color-background-focus:#191b1c;--seed-ui-color-icon-white:#fff;--seed-ui-color-icon-lite:#a6abaf;--seed-ui-color-icon-dark:#494f54;--seed-ui-color-icon-black:#191b1c;--seed-ui-color-line-white:#fff;--seed-ui-color-line-lite:#edf0f3;--seed-ui-color-line-medium:#c6ccd1;--seed-ui-color-line-dark:#494f54;--seed-ui-color-line-focus:#25292c;--seed-ui-color-toast-complete:#50bf50;--seed-ui-color-toast-error:#ef4444;--seed-ui-color-toast-caution:#fef08a;--seed-ui-color-misc-black-70:rgba(0,0,0,.7);--seed-ui-color-misc-black-40:rgba(0,0,0,.4);--seed-brand-color-primary:#50bf50;--seed-brand-color-secondary1:#bdffbd;--seed-brand-color-secondary2:#e9ffe9;--seed-brand-color-point1:#ef4444;--seed-brand-color-point2:#f87171;--seed-brand-color-point3:#fb923c;--seed-brand-color-point4:#fef08a;--seed-font-family-head:pretendard;--seed-font-family-title:pretendard;--seed-font-family-body:pretendard;--seed-font-family-paragraph:pretendard;--seed-font-family-caption:pretendard;--seed-font-weight-400:regular;--seed-font-weight-500:medium;--seed-font-weight-700:bold;--seed-font-size-xs:12px;--seed-font-size-s:14px;--seed-font-size-sm:16px;--seed-font-size-md:18px;--seed-font-size-lg:20px;--seed-font-size-xl:22px;--seed-font-size-2xl:24px;--seed-font-size-4xl:32px;--seed-font-size-5xl:40px;--seed-font-size-6xl:48px;--seed-font-size-3xl:28px;--seed-font-line-height-sm:16px;--seed-font-line-height-2xl:24px;--seed-font-line-height-4xl:32px;--seed-font-line-height-5xl:40px;--seed-font-line-height-6xl:48px;--seed-font-line-height-lg:20px;--seed-font-line-height-3xl:28px;--seed-font-line-height-s:14px;--seed-spacing-200:4px;--seed-spacing-400:12px;--seed-spacing-500:16px;--seed-spacing-700:24px;--seed-spacing-800:28px;--seed-spacing-1000:40px;--seed-spacing-1100:48px;--seed-spacing-1200:56px;--seed-spacing-1300:64px;--seed-spacing-1400:72px;--seed-rounding-100:0px;--seed-rounding-200:4px;--seed-rounding-300:8px;--seed-rounding-400:12px;--seed-rounding-500:16px;--seed-rounding-600:20px;--seed-rounding-700:24px;--seed-rounding-800:28px;--seed-rounding-900:32px;--seed-rounding-1000:40px;--seed-rounding-1100:48px;--seed-rounding-1200:56px;--seed-rounding-1300:64px;--seed-rounding-1400:72px}.box{box-sizing:border-box}:root{--button-loading-dot-delay:0.2s;--button-loading-dot-duration:1.4s}.button{border:none;border-radius:var(--seed-spacing-300);box-sizing:border-box;cursor:pointer;font-weight:500;position:relative;transition:all .2s ease-in-out}.button:disabled{cursor:not-allowed}.button.button--loading{cursor:wait}.button--size-lg{font-size:16px;gap:var(--seed-spacing-300);height:52px;padding:var(--seed-spacing-500) var(--seed-spacing-700)}.button--size-lg>.button--content span{height:20px}.button--size-md{font-size:14px;gap:var(--seed-spacing-300);height:48px;padding:var(--seed-spacing-300) var(--seed-spacing-400)}.button--size-md>.button--content span{height:20px}.button--type-solid-green{background-color:var(--seed-brand-color-primary);color:var(--seed-ui-color-line-white)}.button--type-solid-green:active:not(:disabled),.button--type-solid-green:hover:not(:disabled){background-color:var(--seed-palette-color-green-700)}.button--type-solid-green.disabled{background-color:var(--seed-ui-color-background-guide);border-color:var(--seed-ui-color-background-guide);color:var(--seed-ui-color-text-disabled)}.button--type-solid-red{background-color:var(--seed-brand-color-point2);color:var(--seed-ui-color-line-white)}.button--type-solid-red:active:not(:disabled),.button--type-solid-red:hover:not(:disabled){background-color:var(--seed-palette-color-red-600)}.button--type-solid-red.disabled{background-color:var(--seed-ui-color-background-guide);border-color:var(--seed-ui-color-background-guide);color:var(--seed-ui-color-text-disabled)}.button--type-outline-green{background-color:var(--seed-ui-color-background-container);border:1px solid var(--seed-brand-color-primary);color:var(--seed-brand-color-primary)}.button--type-outline-green:active:not(:disabled),.button--type-outline-green:hover:not(:disabled){background-color:var(--seed-brand-color-secondary2)}.button--type-outline-green.disabled{background-color:var(--seed-ui-color-background-white);border-color:var(---seed-ui-color-line-lite);color:var(--seed-ui-color-text-disabled)}.button--type-outline-gray{background-color:var(--seed-ui-color-background-white);border:1px solid var(--seed-ui-color-line-dark);color:var(--seed-ui-color-text-black)}.button--type-outline-gray:active:not(:disabled),.button--type-outline-gray:hover:not(:disabled){background-color:var(--seed-ui-color-background-gray)}.button--type-outline-gray.disabled{background-color:var(--seed-ui-color-background-white);border-color:var(---seed-ui-color-line-lite);color:var(--seed-ui-color-text-disabled)}.button--type-text-none{background-color:transparent;color:var(--seed-ui-color-text-black)}.button--type-text-none:active:not(:disabled),.button--type-text-none:hover:not(:disabled){color:var(--seed-ui-color-text-lite)}.button--type-text-none.disabled{color:var(--seed-ui-color-text-disabled)}.button--display-inline{display:inline-flex}.button--display-block{display:flex}.button--content,.button--display-full{display:flex;width:100%}.button--content{align-items:center;flex-direction:row;justify-content:center;opacity:1;transition:opacity .2s}.button--content.button--content--hidden{opacity:0}.button--loading{align-items:center;display:flex;gap:12px;justify-content:center;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.button--loading-dot{animation:loadingDot var(--button-loading-dot-duration) infinite;background-color:currentColor;border-radius:50%;height:8px;opacity:0;width:8px}.button--loading-dot:nth-child(2){animation-delay:var(--button-loading-dot-delay)}.button--loading-dot:nth-child(3){animation-delay:calc(var(--button-loading-dot-delay)*2)}@keyframes loadingDot{0%,20%{opacity:0;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}80%,to{opacity:0;transform:translateY(0)}}:root{--font-weight-regular:400;--font-weight-medium:500;--font-weight-bold:700;--font-size-heading:24px;--font-size-body:16px;--font-size-text:14px;--line-height-default:1.4;--font-display-block:block;--font-display-inline-block:inline-block;--font-display-inline:inline;--font-display-flex:flex;--font-display-inline-flex:inline-flex;--font-display-none:none}.text{box-sizing:border-box}.text--font-weight-regular{font-weight:var(--font-weight-regular)}.text--font-weight-medium{font-weight:var(--font-weight-medium)}.text--font-weight-bold{font-weight:var(--font-weight-bold)}.text--typography-heading{font-size:var(--font-size-heading);line-height:var(--line-height-default)}.text--typography-body{font-size:var(--font-size-body);line-height:var(--line-height-default)}.text--typography-text{font-size:var(--font-size-text);line-height:var(--line-height-default)}.text--single-line{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text--multi-line{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.text--display-block{display:var(--font-display-block)}.text--display-inline-block{display:var(--font-display-inline-block)}.text--display-inline{display:var(--font-display-inline)}.text--display-flex{display:var(--font-display-flex)}.text--display-inline-flex{display:var(--font-display-inline-flex)}.text--display-none{display:var(--font-display-none)}:root{--seed-palette-color-base-900:#25292c;--seed-spacing-100:0px;--seed-spacing-300:8px;--seed-spacing-600:20px;--seed-spacing-900:32px}.overlay{animation:overlayShow .25s cubic-bezier(.3,0,0,1);background-color:rgba(0,0,0,.4);inset:0;position:fixed}.dialog-content{animation:contentShow .3s cubic-bezier(.3,0,0,1);background-color:#fff;border-radius:6px;box-shadow:0 10px 38px -10px rgba(14,18,22,.35),0 10px 20px -15px rgba(14,18,22,.2);left:50%;max-height:85vh;max-width:450px;padding:25px;position:fixed;top:50%;transform:translate(-50%,-50%);width:90vw}.dialog-handle{margin-top:10px;width:45px}@keyframes overlayShow{0%{opacity:0}to{opacity:1}}@keyframes contentShow{0%{opacity:0;transform:translate(-50%,-48%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.dialog-content--theme-light{background-color:var(--seed-palette-color-base-100)}.dialog-content--theme-dark{background-color:var(--seed-palette-color-base-900)}.dialog-content--radius-none{border-radius:var(--seed-spacing-100)}.dialog-content--radius-small{border-radius:var(--seed-spacing-300)}.dialog-content--radius-medium{border-radius:var(--seed-spacing-600)}.dialog-content--radius-large{border-radius:var(--seed-spacing-900)}.popover-content{animation-duration:.4s;animation-timing-function:cubic-bezier(.16,1,.3,1);background-color:#fff;border-radius:4px;box-shadow:0 10px 38px -10px rgba(14,18,22,.35),0 10px 20px -15px rgba(14,18,22,.2);padding:20px;width:260px;will-change:transform,opacity}:root{--seed-palette-color-base-100:#fff;--seed-palette-color-base-500:#c6ccd1;--seed-palette-color-base-800:#494f54;--seed-palette-color-base-1000:#191b1c;--seed-palette-color-blue-200:#e0f2fe;--seed-palette-color-blue-800:#0369a1;--seed-palette-color-blue-1000:#0c4a6e}button{all:unset}.SelectTrigger{align-items:center;background-color:#fff;border-radius:4px;box-shadow:0 2px 10px var(--seed-palette-color-base-1000);color:var(--seed-palette-color-base-1000);display:inline-flex;font-size:13px;gap:5px;height:35px;justify-content:center;line-height:1;padding:0 15px}.SelectTrigger:hover{background-color:var(--seed-palette-color-blue-200)}.SelectTrigger:focus{box-shadow:0 0 0 2px #000}.SelectTrigger[data-placeholder]{color:var(--seed-palette-color-base-800)}.SelectIcon{color:var(--seed-palette-color-base-1000)}.SelectContent{background-color:#fff;border-radius:6px;box-shadow:0 10px 38px -10px rgba(22,23,24,.35),0 10px 20px -15px rgba(22,23,24,.2);overflow:hidden}.SelectViewport{padding:5px}.SelectItem{align-items:center;border-radius:3px;color:var(--seed-palette-color-base-1000);display:flex;font-size:13px;height:25px;line-height:1;padding:0 35px 0 25px;position:relative;user-select:none}.SelectItem[data-disabled]{color:var(--seed-palette-color-blue-800);pointer-events:none}.SelectItem[data-highlighted]{background-color:var(--seed-palette-color-base-800);color:var(--seed-color-violet-1);outline:none}.SelectLabel{color:var(--seed-palette-color-blue-1000);font-size:12px;line-height:25px;padding:0 25px}.SelectSeparator{background-color:var(--seed-palette-color-base-500);height:1px;margin:5px}.SelectItemIndicator{display:inline-flex;left:0;position:absolute;width:25px}.SelectItemIndicator,.SelectScrollButton{align-items:center;justify-content:center}.SelectScrollButton{background-color:#fff;color:var(--seed-palette-color-base-1000);cursor:default;display:flex;height:25px}.toggle{background-color:var(--seed-palette-color-base-400);border-radius:var(--seed-rounding-500);height:28px;position:relative;width:52px}.toggle[data-state=checked]{background-color:var(--seed-brand-color-primary)}.toggle-thumb{background-color:var(--seed-ui-color-icon-white);border-radius:var(--seed-rounding-400);box-shadow:0 4px 4px 0 rgba(0,0,0,.15);display:block;height:22px;transform:translateX(4px);transition:transform .1s;width:22px;will-change:transform}.toggle-thumb[data-state=checked]{transform:translateX(26px)}:root{--input-transition:0.2s ease-in-out}.input-wrapper{align-items:center;display:flex;position:relative;width:100%}.input-wrapper.input--display-line .input{border:1px solid var(--seed-ui-color-line-medium);border-radius:0}.input-wrapper.input--display-line .input:focus,.input-wrapper.input--display-line .input:hover:not(:disabled){border-bottom-color:var(--seed-brand-color-primary)}.input-wrapper.input--display-box .input{border:1px solid var(--seed-ui-color-line-medium);border-radius:var(--seed-spacing-300)}.input-wrapper.input--display-box .input:focus,.input-wrapper.input--display-box .input:hover:not(:disabled){border-color:var(--seed-brand-color-primary)}.input-wrapper.input--error .input,.input-wrapper.input--error .input:focus{border-color:var(--seed-brand-color-point2)}.input-wrapper.input--disabled{cursor:not-allowed;opacity:.5}.input-wrapper.input--disabled .input{border:1px solid var(--seed-ui-color-line-medium);color:var(--seed-ui-color-text-disabled)}.input{background:var(--seed-ui-color-background-white);color:var(--seed-ui-color-text-black);font-size:var(--seed-font-size-sm);height:var(--seed-font-line-height-lg);line-height:var(--seed-font-size-sm);padding:17px var(--seed-spacing-500);transition:all var(--input-transition);width:100%}.input:focus{outline:none}.input[type=file]{color:transparent;cursor:pointer}.input[type=file]::-webkit-file-upload-button{visibility:hidden;width:0}.input[type=file]:before{color:var(--seed-ui-color-text-lite);content:\"파일 선택\"}.input[type=file].has-file:before{color:var(--seed-ui-color-text-black);content:\"파일 선택 완료\"}.input[type=file]:disabled:before{background:var(--seed-ui-color-background-guide);color:var(--seed-ui-color-text-disabled);cursor:not-allowed}.input--action{background:none;border:none;color:var(--seed-ui-color-text-lite);cursor:pointer;position:absolute;right:var(--seed-spacing-500);top:50%;transform:translateY(-50%)}.input--action:hover:not(:disabled){color:var(--seed-ui-color-text-dark)}.input--action.input--action-link{height:24px}.input--action.input--close{height:16px}.tabs{display:flex;flex-direction:column;position:relative}.tabs--indicator,.tabs--list,.tabs--trigger{box-sizing:border-box}.tabs--list-wrapper{position:relative}.tabs--list{background-color:var(--seed-ui-color-background-chips);display:flex;gap:var(--seed-spacing-200);height:48px;padding:var(--seed-spacing-200)}.tabs--indicator,.tabs--list{border-radius:var(--seed-rounding-500)}.tabs--indicator{background-color:var(--seed-ui-color-background-white);box-shadow:4px 4px 20px 0 rgba(0,0,0,.08);height:calc(48px - var(--seed-spacing-200)*2);left:0;position:absolute;top:var(--seed-spacing-200);transition:all .2s ease-in-out;z-index:0}.tabs--trigger{align-items:center;border-radius:var(--seed-rounding-400);display:flex;flex:1;font-size:var(--seed-font-size-s);justify-content:center;position:relative;transition:all .2s ease-in-out;z-index:1}.tabs--trigger[data-state=inactive]{color:var(--seed-ui-color-text-lite);font-weight:var(--seed-font-weight-400)}.tabs--trigger[data-state=active]{color:var(--seed-ui-color-text-black);font-weight:var(--seed-font-weight-700)}";
+styleInject(css_248z$3);
+
 var _assign = function __assign() {
   _assign = Object.assign || function __assign(t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -339,6 +366,9 @@ var Checkbox = {
   Indicator: Indicator
 };
 
+var css_248z$2 = ".toggle{background-color:var(--seed-palette-color-base-400);border-radius:var(--seed-rounding-500);height:28px;position:relative;width:52px}.toggle[data-state=checked]{background-color:var(--seed-brand-color-primary)}.toggle-thumb{background-color:var(--seed-ui-color-icon-white);border-radius:var(--seed-rounding-400);box-shadow:0 4px 4px 0 rgba(0,0,0,.15);display:block;height:22px;transform:translateX(4px);transition:transform .1s;width:22px;will-change:transform}.toggle-thumb[data-state=checked]{transform:translateX(26px)}";
+styleInject(css_248z$2);
+
 var Toggle = /*#__PURE__*/forwardRef(function (_a, ref) {
   var className = _a.className,
     _b = _a.states,
@@ -434,122 +464,8 @@ var Select = {
   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 css_248z$1 = "@charset \"UTF-8\";:root{--input-transition:0.2s ease-in-out}.input-wrapper{align-items:center;display:flex;position:relative;width:100%}.input-wrapper.input--display-line .input{border:1px solid var(--seed-ui-color-line-medium);border-radius:0}.input-wrapper.input--display-line .input:focus,.input-wrapper.input--display-line .input:hover:not(:disabled){border-bottom-color:var(--seed-brand-color-primary)}.input-wrapper.input--display-box .input{border:1px solid var(--seed-ui-color-line-medium);border-radius:var(--seed-spacing-300)}.input-wrapper.input--display-box .input:focus,.input-wrapper.input--display-box .input:hover:not(:disabled){border-color:var(--seed-brand-color-primary)}.input-wrapper.input--error .input,.input-wrapper.input--error .input:focus{border-color:var(--seed-brand-color-point2)}.input-wrapper.input--disabled{cursor:not-allowed;opacity:.5}.input-wrapper.input--disabled .input{border:1px solid var(--seed-ui-color-line-medium);color:var(--seed-ui-color-text-disabled)}.input{background:var(--seed-ui-color-background-white);color:var(--seed-ui-color-text-black);font-size:var(--seed-font-size-sm);height:var(--seed-font-line-height-lg);line-height:var(--seed-font-size-sm);padding:17px var(--seed-spacing-500);transition:all var(--input-transition);width:100%}.input:focus{outline:none}.input[type=file]{color:transparent;cursor:pointer}.input[type=file]::-webkit-file-upload-button{visibility:hidden;width:0}.input[type=file]:before{color:var(--seed-ui-color-text-lite);content:\"파일 선택\"}.input[type=file].has-file:before{color:var(--seed-ui-color-text-black);content:\"파일 선택 완료\"}.input[type=file]:disabled:before{background:var(--seed-ui-color-background-guide);color:var(--seed-ui-color-text-disabled);cursor:not-allowed}.input--action{background:none;border:none;color:var(--seed-ui-color-text-lite);cursor:pointer;position:absolute;right:var(--seed-spacing-500);top:50%;transform:translateY(-50%)}.input--action:hover:not(:disabled){color:var(--seed-ui-color-text-dark)}.input--action.input--action-link{height:24px}.input--action.input--close{height:16px}";
+styleInject(css_248z$1);
 
 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); }
@@ -651,6 +567,9 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
 });
 Input.displayName = "Input";
 
+var css_248z = ".tabs{display:flex;flex-direction:column;position:relative}.tabs--indicator,.tabs--list,.tabs--trigger{box-sizing:border-box}.tabs--list-wrapper{position:relative}.tabs--list{background-color:var(--seed-ui-color-background-chips);display:flex;gap:var(--seed-spacing-200);height:48px;padding:var(--seed-spacing-200)}.tabs--indicator,.tabs--list{border-radius:var(--seed-rounding-500)}.tabs--indicator{background-color:var(--seed-ui-color-background-white);box-shadow:4px 4px 20px 0 rgba(0,0,0,.08);height:calc(48px - var(--seed-spacing-200)*2);left:0;position:absolute;top:var(--seed-spacing-200);transition:all .2s ease-in-out;z-index:0}.tabs--trigger{align-items:center;border-radius:var(--seed-rounding-400);display:flex;flex:1;font-size:var(--seed-font-size-s);justify-content:center;position:relative;transition:all .2s ease-in-out;z-index:1}.tabs--trigger[data-state=inactive]{color:var(--seed-ui-color-text-lite);font-weight:var(--seed-font-weight-400)}.tabs--trigger[data-state=active]{color:var(--seed-ui-color-text-black);font-weight:var(--seed-font-weight-700)}";
+styleInject(css_248z);
+
 var Root = function Root(_a) {
   var props = __rest(_a, []);
   return jsx(TabsBase.Root, _assign({
@@ -783,4 +702,4 @@ var Tabs = function Tabs(props) {
   }));
 };
 
-export { BottomSheet, Box, Button, Checkbox, Container, Flex, Grid, Input, Popup, RadioGroup, Select, Tabs, Text, Toggle };
+export { Box, Button, Checkbox, Container, Flex, Grid, Input, RadioGroup, Select, Tabs, Text, Toggle };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-frieeren/components",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",