@shiflo/ui 0.2.0 → 0.2.3

package/dist/assets/icons/index.mjs

@@ -1,5 +1,5 @@
 import { S as e } from "./line/calendar-line.svg-DHsuXoUL.js";
-import { S } from "./solid/calendar-days-solid.svg-CIj8vf6t.js";
+import { S as a } from "./solid/calendar-days-solid.svg-CIj8vf6t.js";
 import { S as i } from "./solid/calendar-lines-solid.svg-D2qG_E7t.js";
 import { S as t } from "./solid/calendar-week-solid.svg-CVmrJtif.js";
 import { S as f } from "./solid/calendars-solid.svg-rClh_xBu.js";
@@ -8,31 +8,35 @@ import { S as n } from "./solid/grid-2-solid.svg-BRtzwK6Y.js";
 import { S as c } from "./solid/pen-to-square-solid.svg-DUdNcuTM.js";
 import { S as h } from "./solid/plus-solid.svg-piiaS3kO.js";
 import { S as L } from "./solid/rotate-right-solid.svg-CYW200XH.js";
-import { S as D } from "./solid/xmark-solid.svg-Ce8xHlZn.js";
-import { S as P } from "./solid/check-solid.svg-C41sTTzR.js";
+import { S as B } from "./solid/xmark-solid.svg-Ce8xHlZn.js";
+import { S as G } from "./solid/check-solid.svg-C41sTTzR.js";
 import { S as T } from "./solid/trash-solid.svg-iJSf_6Y3.js";
 import { S as q } from "./solid/minus-solid.svg-BBiGvc-2.js";
-import { S as y } from "./solid/briefcase-blank-solid.svg-6ppQL_Z4.js";
-import { S as A } from "./solid/chart-simple-horizontal-solid.svg-znTJSeQj.js";
-import { S as H } from "./solid/clock-desk-solid.svg-Dvm3Xip1.js";
-import { S as M } from "./solid/circle-check-solid.svg-D2Pv_oiO.js";
-import { S as X } from "./solid/arrow-left-solid.svg-C16XJbK9.js";
-import { S as j } from "./solid/circle-info-solid.svg-eMJtJJRm.js";
+import { S as w } from "./solid/briefcase-blank-solid.svg-6ppQL_Z4.js";
+import { S as z } from "./solid/chart-simple-horizontal-solid.svg-znTJSeQj.js";
+import { S as E } from "./solid/clock-desk-solid.svg-Dvm3Xip1.js";
+import { S as I } from "./solid/circle-check-solid.svg-D2Pv_oiO.js";
+import { S as W } from "./solid/arrow-left-solid.svg-C16XJbK9.js";
+import { S as b } from "./solid/circle-info-solid.svg-eMJtJJRm.js";
 import { S as F } from "./solid/circle-exclamation-solid.svg-CuZt_q4T.js";
+import { S as K } from "./solid/circle-plus-solid.svg-wYCF_uVS.js";
+import { S as O } from "./solid/chevron-left-solid.svg-CrKzZ71H.js";
 export {
-  X as ArrowLeftSolid,
-  y as BriefcaseBlankSolid,
-  S as CalendarDaysSolid,
+  W as ArrowLeftSolid,
+  w as BriefcaseBlankSolid,
+  a as CalendarDaysSolid,
   e as CalendarLine,
   i as CalendarLinesSolid,
   t as CalendarWeekSolid,
   f as CalendarsSolid,
-  A as ChartSimpleHorizontalSolid,
-  P as CheckSolid,
-  M as CircleCheckSolid,
+  z as ChartSimpleHorizontalSolid,
+  G as CheckSolid,
+  O as ChevronLeftSolid,
+  I as CircleCheckSolid,
   F as CircleExclamationSolid,
-  j as CircleInfoSolid,
-  H as ClockDeskSolid,
+  b as CircleInfoSolid,
+  K as CirclePlusSolid,
+  E as ClockDeskSolid,
   p as GearSolid,
   n as Grid2Solid,
   q as MinusSolid,
@@ -40,5 +44,5 @@ export {
   h as PlusSolid,
   L as RotateRightSolid,
   T as TrashSolid,
-  D as XmarkSolid
+  B as XmarkSolid
 };

package/dist/assets/icons/{index.ts-Cv-GsCPN.js → index.ts-BhlTWUs_.js}

@@ -9,8 +9,8 @@ import { S as d } from "./solid/pen-to-square-solid.svg-DUdNcuTM.js";
 import { S as m } from "./solid/plus-solid.svg-piiaS3kO.js";
 import { S as t } from "./solid/rotate-right-solid.svg-CYW200XH.js";
 import { S as s } from "./solid/xmark-solid.svg-Ce8xHlZn.js";
-import { S as n } from "./solid/check-solid.svg-C41sTTzR.js";
-import { S as f } from "./solid/trash-solid.svg-iJSf_6Y3.js";
+import { S as f } from "./solid/check-solid.svg-C41sTTzR.js";
+import { S as n } from "./solid/trash-solid.svg-iJSf_6Y3.js";
 import { S as g } from "./solid/minus-solid.svg-BBiGvc-2.js";
 import { S as p } from "./solid/briefcase-blank-solid.svg-6ppQL_Z4.js";
 import { S as C } from "./solid/chart-simple-horizontal-solid.svg-znTJSeQj.js";
@@ -19,7 +19,9 @@ import { S as c } from "./solid/circle-check-solid.svg-D2Pv_oiO.js";
 import { S as k } from "./solid/arrow-left-solid.svg-C16XJbK9.js";
 import { S as h } from "./solid/circle-info-solid.svg-eMJtJJRm.js";
 import { S as u } from "./solid/circle-exclamation-solid.svg-CuZt_q4T.js";
-const W = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+import { S as L } from "./solid/circle-plus-solid.svg-wYCF_uVS.js";
+import { S as P } from "./solid/chevron-left-solid.svg-CrKzZ71H.js";
+const K = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   ArrowLeftSolid: k,
   BriefcaseBlankSolid: p,
@@ -29,10 +31,12 @@ const W = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   CalendarWeekSolid: r,
   CalendarsSolid: l,
   ChartSimpleHorizontalSolid: C,
-  CheckSolid: n,
+  CheckSolid: f,
+  ChevronLeftSolid: P,
   CircleCheckSolid: c,
   CircleExclamationSolid: u,
   CircleInfoSolid: h,
+  CirclePlusSolid: L,
   ClockDeskSolid: v,
   GearSolid: a,
   Grid2Solid: e,
@@ -40,9 +44,9 @@ const W = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   PenToSquareSolid: d,
   PlusSolid: m,
   RotateRightSolid: t,
-  TrashSolid: f,
+  TrashSolid: n,
   XmarkSolid: s
 }, Symbol.toStringTag, { value: "Module" }));
 export {
-  W as S
+  K as S
 };

package/dist/assets/icons/solid/chevron-left-solid.svg-CrKzZ71H.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const o = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", ...t }, /* @__PURE__ */ e.createElement("path", { fill: "currentColor", d: "M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z" }));
+export {
+  o as S
+};

package/dist/assets/icons/solid/circle-plus-solid.svg-wYCF_uVS.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const t = (l) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...l }, /* @__PURE__ */ e.createElement("path", { fill: "currentColor", d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM232 344l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z" }));
+export {
+  t as S
+};

package/dist/assets/icons/solid/index.d.ts

@@ -18,3 +18,5 @@ export { default as CircleCheckSolid } from './circle-check-solid.svg';
 export { default as ArrowLeftSolid } from './arrow-left-solid.svg';
 export { default as CircleInfoSolid } from './circle-info-solid.svg';
 export { default as CircleExclamationSolid } from './circle-exclamation-solid.svg';
+export { default as CirclePlusSolid } from './circle-plus-solid.svg';
+export { default as ChevronLeftSolid } from './chevron-left-solid.svg';

package/dist/assets/icons/solid/index.mjs

@@ -1,42 +1,46 @@
-import { S } from "./calendar-days-solid.svg-CIj8vf6t.js";
+import { S as e } from "./calendar-days-solid.svg-CIj8vf6t.js";
 import { S as a } from "./calendar-lines-solid.svg-D2qG_E7t.js";
 import { S as i } from "./calendar-week-solid.svg-CVmrJtif.js";
 import { S as t } from "./calendars-solid.svg-rClh_xBu.js";
 import { S as f } from "./gear-solid.svg-C6vEx0Wx.js";
 import { S as p } from "./grid-2-solid.svg-BRtzwK6Y.js";
-import { S as n } from "./pen-to-square-solid.svg-DUdNcuTM.js";
+import { S as C } from "./pen-to-square-solid.svg-DUdNcuTM.js";
 import { S as c } from "./plus-solid.svg-piiaS3kO.js";
 import { S as h } from "./rotate-right-solid.svg-CYW200XH.js";
-import { S as B } from "./xmark-solid.svg-Ce8xHlZn.js";
-import { S as G } from "./check-solid.svg-C41sTTzR.js";
-import { S as P } from "./trash-solid.svg-iJSf_6Y3.js";
+import { S as L } from "./xmark-solid.svg-Ce8xHlZn.js";
+import { S as B } from "./check-solid.svg-C41sTTzR.js";
+import { S as G } from "./trash-solid.svg-iJSf_6Y3.js";
 import { S as T } from "./minus-solid.svg-BBiGvc-2.js";
 import { S as q } from "./briefcase-blank-solid.svg-6ppQL_Z4.js";
-import { S as y } from "./chart-simple-horizontal-solid.svg-znTJSeQj.js";
-import { S as A } from "./clock-desk-solid.svg-Dvm3Xip1.js";
-import { S as H } from "./circle-check-solid.svg-D2Pv_oiO.js";
-import { S as M } from "./arrow-left-solid.svg-C16XJbK9.js";
-import { S as X } from "./circle-info-solid.svg-eMJtJJRm.js";
-import { S as j } from "./circle-exclamation-solid.svg-CuZt_q4T.js";
+import { S as w } from "./chart-simple-horizontal-solid.svg-znTJSeQj.js";
+import { S as z } from "./clock-desk-solid.svg-Dvm3Xip1.js";
+import { S as E } from "./circle-check-solid.svg-D2Pv_oiO.js";
+import { S as I } from "./arrow-left-solid.svg-C16XJbK9.js";
+import { S as W } from "./circle-info-solid.svg-eMJtJJRm.js";
+import { S as b } from "./circle-exclamation-solid.svg-CuZt_q4T.js";
+import { S as F } from "./circle-plus-solid.svg-wYCF_uVS.js";
+import { S as K } from "./chevron-left-solid.svg-CrKzZ71H.js";
 export {
-  M as ArrowLeftSolid,
+  I as ArrowLeftSolid,
   q as BriefcaseBlankSolid,
-  S as CalendarDaysSolid,
+  e as CalendarDaysSolid,
   a as CalendarLinesSolid,
   i as CalendarWeekSolid,
   t as CalendarsSolid,
-  y as ChartSimpleHorizontalSolid,
-  G as CheckSolid,
-  H as CircleCheckSolid,
-  j as CircleExclamationSolid,
-  X as CircleInfoSolid,
-  A as ClockDeskSolid,
+  w as ChartSimpleHorizontalSolid,
+  B as CheckSolid,
+  K as ChevronLeftSolid,
+  E as CircleCheckSolid,
+  b as CircleExclamationSolid,
+  W as CircleInfoSolid,
+  F as CirclePlusSolid,
+  z as ClockDeskSolid,
   f as GearSolid,
   p as Grid2Solid,
   T as MinusSolid,
-  n as PenToSquareSolid,
+  C as PenToSquareSolid,
   c as PlusSolid,
   h as RotateRightSolid,
-  P as TrashSolid,
-  B as XmarkSolid
+  G as TrashSolid,
+  L as XmarkSolid
 };

package/dist/components/BottomSheet/BottomSheet.d.ts

@@ -1,3 +1,3 @@
 import { BottomSheetProps } from './BottomSheet.typing';
-declare function BottomSheet({ open, onClose, children, transitionDuration, maxWidth, onClick, ref, hideDragHandleBar, hideOverlay, style, ...props }: BottomSheetProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function BottomSheet({ open, onClose, children, transitionDuration, maxWidth, onClick, ref, hideDragHandleBar, hideOverlay, disablePortal, style, ...props }: BottomSheetProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export default BottomSheet;

package/dist/components/BottomSheet/BottomSheet.mjs

@@ -1,8 +1,8 @@
-import { jsx as g, jsxs as V } from "@emotion/react/jsx-runtime";
-import { useState as z, useRef as o, useImperativeHandle as C, useEffect as M } from "react";
+import { jsx as g, jsxs as z } from "@emotion/react/jsx-runtime";
+import { useState as C, useRef as o, useImperativeHandle as G, useEffect as M } from "react";
 import y from "@emotion/styled";
-import G from "../Overlay/Overlay.mjs";
-const J = y.div`
+import J from "../Overlay/Overlay.mjs";
+const K = y.div`
   width: calc(100% - ${({ theme: { spacing: t } }) => t[800]});
   max-width: ${({ maxWidth: t = "375px" }) => t};
   max-height: calc(100% - ${({ theme: { spacing: t } }) => t[800]});
@@ -19,7 +19,7 @@ const J = y.div`
     transform ${({ transitionDuration: t }) => `${t}ms`}
       ${({ ease: t }) => t === "in" ? "ease-out" : "ease-in"},
     background-color 0.2s;
-`, K = y.div`
+`, N = y.div`
   position: sticky;
   top: 0;
   left: 0;
@@ -34,7 +34,7 @@ const J = y.div`
   }
 }) => t.background};
   transition: background-color 0.2s;
-`, N = y.div`
+`, Q = y.div`
   width: 24px;
   height: 4px;
   border-radius: ${({ theme: { radius: t } }) => t[100]};
@@ -45,7 +45,7 @@ const J = y.div`
 }) => t.main};
   transition: background-color 0.2s;
 `;
-function _({
+function ee({
   open: t,
   onClose: d,
   children: S,
@@ -55,12 +55,13 @@ function _({
   ref: j,
   hideDragHandleBar: I,
   hideOverlay: O,
-  style: A,
-  ...F
+  disablePortal: A,
+  style: F,
+  ...W
 }) {
-  const [E, $] = z(!1), m = o(null), L = o(null), c = o(null), u = o(!1), f = o(0), l = o(0), h = o(0), v = o(0), p = o(0), W = o(0.25);
-  C(j, () => m.current);
-  const q = (e) => {
+  const [E, $] = C(!1), m = o(null), L = o(null), c = o(null), u = o(!1), f = o(0), l = o(0), h = o(0), v = o(0), p = o(0), q = o(0.25);
+  G(j, () => m.current);
+  const P = (e) => {
     e.stopPropagation(), typeof b == "function" && b(e);
   };
   return M(() => {
@@ -80,46 +81,47 @@ function _({
       l.current = r;
       const B = Date.now(), D = B - p.current;
       if (D > 0) {
-        const P = l.current;
-        v.current = (r - P) / D, p.current = B;
+        const V = l.current;
+        v.current = (r - V) / D, p.current = B;
       }
       n && (n.style.opacity = `${Math.max(0, 1 - i / (h.current * 2))}`), e.style.transform = `translate3d(0, ${i}px, 0)`;
     }, s = () => {
       if (!e || !u.current) return;
       u.current = !1, e.style.cursor = "default", c.current && (c.current.style.cursor = "grab");
-      const r = l.current - f.current, i = h.current * W.current;
+      const r = l.current - f.current, i = h.current * q.current;
       e.style.transition = `transform ${a}ms ease-out`, n && (n.style.transition = `opacity ${a}ms ease-out`), r > i || v.current > 0.5 && v.current > 0 ? (e.style.transform = "translate3d(0, 200%, 0)", n && (n.style.opacity = "0"), d?.()) : (e.style.transform = "translate3d(0, 0, 0)", n && (n.style.opacity = "1"));
     }, R = (r) => x(r.clientY), w = (r) => k(r.clientY), H = (r) => x(r.touches[0].clientY), Y = (r) => k(r.touches[0].clientY);
     return e?.addEventListener("mousedown", R), e?.addEventListener("mousemove", w), e?.addEventListener("mouseup", s), e?.addEventListener("mouseleave", s), e?.addEventListener("touchstart", H), e?.addEventListener("touchmove", Y), e?.addEventListener("touchend", s), e?.addEventListener("touchcancel", s), () => {
       e?.removeEventListener("mousedown", R), e?.removeEventListener("mousemove", w), e?.removeEventListener("mouseup", s), e?.removeEventListener("mouseleave", s), e?.removeEventListener("touchstart", H), e?.removeEventListener("touchmove", Y), e?.removeEventListener("touchend", s), e?.removeEventListener("touchcancel", s);
     };
   }, [E, d, a]), /* @__PURE__ */ g(
-    G,
+    J,
     {
       ref: L,
       open: t,
       onClose: d,
       transitionDuration: a,
       placement: "center-bottom",
+      disablePortal: A,
       css: O ? {
         pointerEvents: "none",
         backgroundColor: "transparent !important"
       } : void 0,
-      children: /* @__PURE__ */ V(
-        J,
+      children: /* @__PURE__ */ z(
+        K,
         {
           ref: m,
           ease: t ? "in" : "out",
           transitionDuration: a,
           maxWidth: T,
-          onClick: q,
-          ...F,
+          onClick: P,
+          ...W,
           style: {
             transform: `translate3d(0, ${E ? "0" : "200%"}, 0)`,
-            ...A
+            ...F
           },
           children: [
-            !I && /* @__PURE__ */ g(K, { ref: c, children: /* @__PURE__ */ g(N, {}) }),
+            !I && /* @__PURE__ */ g(N, { ref: c, children: /* @__PURE__ */ g(Q, {}) }),
             S
           ]
         }
@@ -128,5 +130,5 @@ function _({
   );
 }
 export {
-  _ as default
+  ee as default
 };

package/dist/components/BottomSheet/BottomSheet.typing.d.ts

@@ -7,4 +7,5 @@ export interface BottomSheetProps extends ComponentPropsWithRef<"div">, Pick<Uti
     maxWidth?: string;
     hideDragHandleBar?: boolean;
     hideOverlay?: boolean;
+    disablePortal?: boolean;
 }

package/dist/components/Dialog/Dialog.d.ts

@@ -1,3 +1,3 @@
 import { DialogProps } from './Dialog.typing';
-declare function Dialog({ open, onClose, children, transitionDuration, onClick, style, maxWidth, ...props }: DialogProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function Dialog({ open, onClose, children, transitionDuration, onClick, style, maxWidth, disablePortal, ...props }: DialogProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export default Dialog;

package/dist/components/Dialog/Dialog.mjs

@@ -1,8 +1,8 @@
 import { jsx as s } from "@emotion/react/jsx-runtime";
-import { useState as $, useRef as p, useEffect as h } from "react";
-import g from "@emotion/styled";
-import y from "../Overlay/Overlay.mjs";
-const x = g.div`
+import { useState as p, useRef as h, useEffect as g } from "react";
+import y from "@emotion/styled";
+import x from "../Overlay/Overlay.mjs";
+const b = y.div`
   width: calc(100% - ${({ theme: { spacing: e } }) => e[800]});
   max-width: ${({ maxWidth: e = "375px" }) => e};
   max-height: calc(100% - ${({ theme: { spacing: e } }) => e[800]});
@@ -22,7 +22,7 @@ const x = g.div`
       ${({ ease: e }) => e === "in" ? "ease-out" : "ease-in"},
     background-color 0.2s;
 `;
-function O({
+function A({
   open: e,
   onClose: n,
   children: m,
@@ -30,12 +30,13 @@ function O({
   onClick: o,
   style: l,
   maxWidth: c = "375px",
-  ...f
+  disablePortal: f,
+  ...u
 }) {
-  const [r, i] = $(!1), u = p(null), d = (t) => {
+  const [r, i] = p(!1), d = h(null), $ = (t) => {
     t.stopPropagation(), typeof o == "function" && o(t);
   };
-  return h(() => {
+  return g(() => {
     let t;
     return e ? t = requestAnimationFrame(() => {
       i(!0);
@@ -43,21 +44,22 @@ function O({
       t && cancelAnimationFrame(t);
     };
   }, [e]), /* @__PURE__ */ s(
-    y,
+    x,
     {
-      ref: u,
+      ref: d,
       open: e,
       onClose: n,
       transitionDuration: a,
       placement: "center-middle",
+      disablePortal: f,
       children: /* @__PURE__ */ s(
-        x,
+        b,
         {
           ease: e ? "in" : "out",
           transitionDuration: a,
           maxWidth: c,
-          onClick: d,
-          ...f,
+          onClick: $,
+          ...u,
           style: {
             transform: `scale(${r ? 1 : 0.9})`,
             opacity: r ? 1 : 0,
@@ -70,5 +72,5 @@ function O({
   );
 }
 export {
-  O as default
+  A as default
 };

package/dist/components/Dialog/Dialog.typing.d.ts

@@ -5,4 +5,5 @@ export interface DialogProps extends ComponentPropsWithRef<"div">, Pick<UtilityP
     onClose?: () => void;
     transitionDuration?: number;
     maxWidth?: string;
+    disablePortal?: boolean;
 }

package/dist/components/Icon/Icon.mjs

@@ -1,5 +1,5 @@
 import { jsx as e } from "@emotion/react/jsx-runtime";
-import { S as i } from "../../assets/icons/index.ts-Cv-GsCPN.js";
+import { S as i } from "../../assets/icons/index.ts-BhlTWUs_.js";
 import s from "@emotion/styled";
 import c from "../../utils/getValueByPath.mjs";
 const l = (o) => s(o)`

package/dist/components/Overlay/Overlay.d.ts

@@ -1,3 +1,3 @@
 import { OverlayProps } from './Overlay.typing';
-declare function Overlay({ children, open, onClose, transitionDuration, placement, style, ref, onClick, ...props }: OverlayProps): import('react').ReactPortal | null;
+declare function Overlay({ children, open, onClose, transitionDuration, placement, style, ref, onClick, disablePortal, ...props }: OverlayProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
 export default Overlay;

package/dist/components/Overlay/Overlay.mjs

@@ -1,13 +1,13 @@
-import { jsxs as k, jsx as l } from "@emotion/react/jsx-runtime";
-import { useState as f, useRef as j, useImperativeHandle as x, useLayoutEffect as E, useEffect as $ } from "react";
-import { createPortal as I } from "react-dom";
-import s from "@emotion/styled";
-const w = s.div`
+import { jsxs as p, jsx as s } from "@emotion/react/jsx-runtime";
+import { useState as y, useRef as C, useImperativeHandle as I, useLayoutEffect as w, useEffect as L } from "react";
+import { createPortal as A } from "react-dom";
+import o from "@emotion/styled";
+const g = o.div`
   position: fixed;
   top: 0;
   left: 0;
   z-index: 1;
-`, C = s.div`
+`, h = o.div`
   position: fixed;
   top: 0;
   left: 0;
@@ -15,135 +15,149 @@ const w = s.div`
   height: 100%;
   background-color: ${({
   theme: {
-    palette: { common: e }
+    palette: { common: t }
   }
-}) => e.overlay};
+}) => t.overlay};
   transition:
-    opacity ${({ transitionDuration: e }) => `${e}ms`}
-      ${({ ease: e }) => e === "in" ? "ease-in" : "ease-out"},
+    opacity ${({ transitionDuration: t }) => `${t}ms`}
+      ${({ ease: t }) => t === "in" ? "ease-in" : "ease-out"},
     background-color 0.2s;
-`, L = s.div`
+`, O = o.div`
   position: fixed;
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
 
-  ${({ placement: e }) => {
-  const t = {};
-  switch (e) {
+  ${({ placement: t }) => {
+  const e = {};
+  switch (t) {
     case "top-left":
-      Object.assign(t, {
+      Object.assign(e, {
         top: 0,
         left: 0
       });
       break;
     case "top-right":
-      Object.assign(t, {
+      Object.assign(e, {
         top: 0,
         right: 0
       });
       break;
     case "bottom-left":
-      Object.assign(t, {
+      Object.assign(e, {
         bottom: 0,
         left: 0
       });
       break;
     case "bottom-right":
-      Object.assign(t, {
+      Object.assign(e, {
         bottom: 0,
         right: 0
       });
       break;
     case "center-top":
-      Object.assign(t, {
+      Object.assign(e, {
         top: 0,
         left: "50%",
         transform: "translate3d(-50%, 0, 0)"
       });
       break;
     case "center-bottom":
-      Object.assign(t, {
+      Object.assign(e, {
         bottom: 0,
         left: "50%",
         transform: "translate3d(-50%, 0, 0)"
       });
       break;
     case "center-middle":
-      Object.assign(t, {
+      Object.assign(e, {
         top: "50%",
         left: "50%",
         transform: "translate3d(-50%, -50%, 0)"
       });
       break;
     case "center-left":
-      Object.assign(t, {
+      Object.assign(e, {
         top: "50%",
         left: 0,
         transform: "translate3d(0, -50%, 0)"
       });
       break;
     case "center-right":
-      Object.assign(t, {
+      Object.assign(e, {
         top: "50%",
         right: 0,
         transform: "translate3d(0, -50%, 0)"
       });
       break;
   }
-  return t;
+  return e;
 }}
 `;
-function U({
-  children: e,
-  open: t,
-  onClose: d,
+function q({
+  children: t,
+  open: e,
+  onClose: k,
   transitionDuration: a = 200,
-  placement: m,
-  style: u,
-  ref: b,
-  onClick: p,
-  ...g
+  placement: i,
+  style: c,
+  ref: v,
+  onClick: j,
+  disablePortal: x = !0,
+  ...l
 }) {
-  const [y, o] = f(!0), [h, i] = f(!1), n = j(null), O = (r) => {
-    d?.(), p?.(r);
+  const [E, f] = y(!0), [d, m] = y(!1), n = C(null), u = (r) => {
+    k?.(), j?.(r);
   };
-  return x(b, () => n.current), E(() => {
+  return I(v, () => n.current), w(() => {
     let r;
-    return t ? (o(!1), r = requestAnimationFrame(() => {
-      i(!0);
-    })) : i(!1), () => {
+    return e ? (f(!1), r = requestAnimationFrame(() => {
+      m(!0);
+    })) : m(!1), () => {
       r && cancelAnimationFrame(r);
     };
-  }, [t, a]), $(() => {
-    const r = n.current, c = (v) => {
-      t || v.propertyName === "opacity" && o(!0);
+  }, [e, a]), L(() => {
+    const r = n.current, b = ($) => {
+      e || $.propertyName === "opacity" && f(!0);
     };
-    return r?.addEventListener("transitionend", c), () => {
-      r?.removeEventListener("transitionend", c);
+    return r?.addEventListener("transitionend", b), () => {
+      r?.removeEventListener("transitionend", b);
     };
-  }, [t]), y ? null : I(
-    /* @__PURE__ */ k(w, { children: [
-      /* @__PURE__ */ l(
-        C,
+  }, [e]), E ? null : x ? /* @__PURE__ */ p(g, { children: [
+    /* @__PURE__ */ s(
+      h,
+      {
+        ref: n,
+        transitionDuration: a,
+        ease: e ? "in" : "out",
+        onClick: u,
+        style: { opacity: d ? 1 : 0, ...c },
+        ...l
+      }
+    ),
+    /* @__PURE__ */ s(O, { placement: i, children: t })
+  ] }) : A(
+    /* @__PURE__ */ p(g, { children: [
+      /* @__PURE__ */ s(
+        h,
         {
           ref: n,
           transitionDuration: a,
-          ease: t ? "in" : "out",
-          onClick: O,
+          ease: e ? "in" : "out",
+          onClick: u,
           style: {
-            opacity: h ? 1 : 0,
-            ...u
+            opacity: d ? 1 : 0,
+            ...c
           },
-          ...g
+          ...l
         }
       ),
-      /* @__PURE__ */ l(L, { placement: m, children: e })
+      /* @__PURE__ */ s(O, { placement: i, children: t })
     ] }),
     document.body
   );
 }
 export {
-  U as default
+  q as default
 };

package/dist/components/Overlay/Overlay.typing.d.ts

@@ -6,4 +6,5 @@ export interface OverlayProps extends ComponentPropsWithRef<"div">, Pick<Utility
     transitionDuration?: number;
     placement?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "center-top" | "center-bottom" | "center-middle" | "center-left" | "center-right";
     hideOverlay?: boolean;
+    disablePortal?: boolean;
 }

package/dist/theme/GlobalStyle.mjs

@@ -34,6 +34,7 @@ function l() {
           color: e.primary,
           backgroundColor: o.background,
           transition: "background-color 0.3s, color 0.3s",
+          fontSmooth: "antialiased",
           fontFamily: `Spoqa Han Sans Neo, -apple-system, BlinkMacSystemFont, Helvetica Neue,
             Apple SD Gothic Neo, Malgun Gothic, 맑은 고딕, 나눔고딕, Nanum Gothic,
             Noto Sans KR, Noto Sans CJK KR, arial, 돋움, Dotum, Tahoma, Geneva, sans-serif`

package/dist/theme/dark.mjs

@@ -1,7 +1,7 @@
 import a from "./radius.mjs";
 import r from "./spacing.mjs";
 import i from "./typography.mjs";
-const e = {
+const t = {
   mode: "dark",
   palette: {
     primary: {
@@ -65,9 +65,9 @@ const e = {
         dark: "#CCB77A"
       },
       error: {
-        light: "#8C4F4F",
-        main: "#F5A3A3",
-        dark: "#C88585"
+        light: "#7F1D1D",
+        main: "#EF4444",
+        dark: "#C53030"
       },
       info: {
         light: "#446E9E",
@@ -99,5 +99,5 @@ const e = {
   radius: a
 };
 export {
-  e as default
+  t as default
 };

package/dist/theme/light.mjs

@@ -65,9 +65,9 @@ const e = {
         dark: "#B89A4F"
       },
       error: {
-        light: "#FBC7C7",
-        main: "#D67C7C",
-        dark: "#B85C5C"
+        light: "#FFD6D6",
+        main: "#DC2626",
+        dark: "#B91C1C"
       },
       info: {
         light: "#C7E0FA",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shiflo/ui",
   "description": "Shiflo React UI Components",
-  "version": "0.2.0",
+  "version": "0.2.3",
   "type": "module",
   "files": [
     "dist"