@lanaco/lnc-react-ui 3.11.35 → 4.0.2

package/dist/Separator.cjs

@@ -0,0 +1,6 @@
+"use strict";const i=require("react/jsx-runtime"),l=require("react"),r=require("./index-DXnSjbfJ.cjs"),m=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),u=require("./utils-hdRGTsQ7.cjs"),p=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),d=m.newStyled.div`
+  height: 1px;
+  background-color: ${e=>u.getColorRgbaValue(e.theme,"MenuItem","default","enabled","separator")};
+  margin-left: -0.25rem;
+  margin-right: -0.25rem;
+`,t=l.forwardRef((e,s)=>{const{className:o="",style:n={},...a}=e,c=p.useTheme();return i.jsx(d,{ref:s,theme:c,className:"lnc-ui-dropdown-separator "+o,style:n,...a})});t.propTypes={className:r.PropTypes.string,style:r.PropTypes.object};module.exports=t;

package/dist/Separator.js

@@ -0,0 +1,37 @@
+import { jsx as p } from "react/jsx-runtime";
+import l from "react";
+import { P as r } from "./index-Ds9PUTwb.js";
+import { n } from "./emotion-styled.browser.esm-BZSYYThs.js";
+import { b as i } from "./utils-DEke8iwo.js";
+import { u as c } from "./emotion-element-5486c51c.browser.esm-CSejtOeT.js";
+const f = n.div`
+  height: 1px;
+  background-color: ${(e) => i(
+  e.theme,
+  "MenuItem",
+  "default",
+  "enabled",
+  "separator"
+)};
+  margin-left: -0.25rem;
+  margin-right: -0.25rem;
+`, d = l.forwardRef((e, t) => {
+  const { className: o = "", style: a = {}, ...s } = e, m = c();
+  return /* @__PURE__ */ p(
+    f,
+    {
+      ref: t,
+      theme: m,
+      className: "lnc-ui-dropdown-separator " + o,
+      style: a,
+      ...s
+    }
+  );
+});
+d.propTypes = {
+  className: r.string,
+  style: r.object
+};
+export {
+  d as default
+};

package/dist/Sidebar.cjs

@@ -0,0 +1,39 @@
+"use strict";const t=require("react/jsx-runtime"),a=require("react"),i=require("./index-DXnSjbfJ.cjs"),l=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),x=require("./Icon.cjs"),g=require("./utils-hdRGTsQ7.cjs"),y=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),_=l.newStyled.aside`
+  direction: ${e=>e.placement=="right"?"rtl":"ltr"};
+  position: relative;
+  && {
+    flex: ${e=>e.sidebarCollapsed?"0 0 0":`0 0 ${e.size}`};
+  }
+  transition: flex 0.6s ease-in-out;
+}
+`,C=l.newStyled.div`
+  overflow: hidden;
+  width: ${e=>e.sidebarCollapsed?"0":e.size};
+  height: 100%;
+  transition: width 0.6s ease-in-out
+    ${e=>e.sidebarCollapsed?"0s":"0.2s"};
+`,w=l.newStyled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 2rem;
+  height: 2rem;
+  background-color: ${e=>e.theme.palette[e.theme.colorContext.neutral][900]};
+  opacity: 0.7;
+  border-radius: ${e=>e.placement=="left"?"0 5px 5px 0":"5px 0 0 5px"};
+  position: absolute;
+  top: 5px;
+  right: ${e=>e.placement=="left"?"-2rem":"100%"};
+  cursor: pointer;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  & > span {
+    & > .sidebar-icon-lnc {
+      transform: ${e=>e.sidebarCollapsed?"rotate(180deg)":"rotate(0)"};
+      transition: transform 0.6s ease;
+    }
+  }
+`,c=a.forwardRef((e,b)=>{const{placement:o,collapsed:n=void 0,hideCollapseButton:h=!1,size:d="15rem",children:f,className:p,__TYPE__:T="Sidebar",...S}=e,u=y.useTheme(),m=g.useScreenSize(),[s,r]=a.useState();return a.useEffect(()=>{n!=null?r(n):m=="XS"||m=="S"?r(!0):r(!1)},[n]),t.jsxs(_,{className:"lnc-sidebar-container "+(p||""),sidebarCollapsed:s,placement:o,size:d,theme:u,ref:b,...S,children:[!h&&t.jsx(w,{onClick:$=>r(!s),placement:o,sidebarCollapsed:s,theme:u,children:t.jsx("span",{children:t.jsx(x,{className:"sidebar-icon-lnc",icon:o=="right"?"angle-right":"angle-left",color:"neutral"})})}),t.jsx(C,{className:"lnc-sidebar-content",sidebarCollapsed:s,size:d,children:f})]})});c.propTypes={collapsed:i.PropTypes.bool,hideCollapseButton:i.PropTypes.bool,size:i.PropTypes.string,__TYPE__:i.PropTypes.string};c.displayName="Sidebar";module.exports=c;

package/dist/Sidebar.js

@@ -0,0 +1,123 @@
+import { jsxs as g, jsx as o } from "react/jsx-runtime";
+import S, { useState as x, useEffect as C } from "react";
+import { P as s } from "./index-Ds9PUTwb.js";
+import { n as l } from "./emotion-styled.browser.esm-BZSYYThs.js";
+import _ from "./Icon.js";
+import { u as y } from "./utils-DEke8iwo.js";
+import { u as $ } from "./emotion-element-5486c51c.browser.esm-CSejtOeT.js";
+const v = l.aside`
+  direction: ${(e) => e.placement == "right" ? "rtl" : "ltr"};
+  position: relative;
+  && {
+    flex: ${(e) => e.sidebarCollapsed ? "0 0 0" : `0 0 ${e.size}`};
+  }
+  transition: flex 0.6s ease-in-out;
+}
+`, w = l.div`
+  overflow: hidden;
+  width: ${(e) => e.sidebarCollapsed ? "0" : e.size};
+  height: 100%;
+  transition: width 0.6s ease-in-out
+    ${(e) => e.sidebarCollapsed ? "0s" : "0.2s"};
+`, z = l.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 2rem;
+  height: 2rem;
+  background-color: ${(e) => e.theme.palette[e.theme.colorContext.neutral][900]};
+  opacity: 0.7;
+  border-radius: ${(e) => e.placement == "left" ? "0 5px 5px 0" : "5px 0 0 5px"};
+  position: absolute;
+  top: 5px;
+  right: ${(e) => e.placement == "left" ? "-2rem" : "100%"};
+  cursor: pointer;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  & > span {
+    & > .sidebar-icon-lnc {
+      transform: ${(e) => e.sidebarCollapsed ? "rotate(180deg)" : "rotate(0)"};
+      transition: transform 0.6s ease;
+    }
+  }
+`, m = S.forwardRef((e, f) => {
+  const {
+    placement: r,
+    collapsed: a = void 0,
+    hideCollapseButton: h = !1,
+    size: n = "15rem",
+    children: u,
+    className: d,
+    __TYPE__: T = "Sidebar",
+    ...b
+  } = e, c = $(), p = y(), [t, i] = x();
+  return C(() => {
+    a != null ? i(a) : p == "XS" || p == "S" ? i(!0) : i(!1);
+  }, [a]), /* @__PURE__ */ g(
+    v,
+    {
+      className: "lnc-sidebar-container " + (d || ""),
+      sidebarCollapsed: t,
+      placement: r,
+      size: n,
+      theme: c,
+      ref: f,
+      ...b,
+      children: [
+        !h && /* @__PURE__ */ o(
+          z,
+          {
+            onClick: (N) => i(!t),
+            placement: r,
+            sidebarCollapsed: t,
+            theme: c,
+            children: /* @__PURE__ */ o("span", { children: /* @__PURE__ */ o(
+              _,
+              {
+                className: "sidebar-icon-lnc",
+                icon: r == "right" ? "angle-right" : "angle-left",
+                color: "neutral"
+              }
+            ) })
+          }
+        ),
+        /* @__PURE__ */ o(
+          w,
+          {
+            className: "lnc-sidebar-content",
+            sidebarCollapsed: t,
+            size: n,
+            children: u
+          }
+        )
+      ]
+    }
+  );
+});
+m.propTypes = {
+  /**
+   * Indicates if the sidebar is collapsed.
+   */
+  collapsed: s.bool,
+  /**
+   * Hides the collapse button.
+   * Useful if you want control the sidebar with your own button via `collapsed` prop.
+   */
+  hideCollapseButton: s.bool,
+  /**
+   * Controls the sidebar width.
+   */
+  size: s.string,
+  /**
+   * Do not override this property.
+   * Should only be used as indicator for type if you are passing custom component.
+   */
+  __TYPE__: s.string
+};
+m.displayName = "Sidebar";
+export {
+  m as default
+};

package/dist/Spinner.cjs

@@ -0,0 +1,38 @@
+"use strict";const s=require("react/jsx-runtime");require("react");const n=require("./index-DXnSjbfJ.cjs"),i=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),u=require("./emotion-react.browser.esm-DQBL7Wls.cjs"),t=require("./utils-hdRGTsQ7.cjs"),g=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),p={small:"0.6rem",medium:"0.7rem",large:"0.8rem"},b=(e,r)=>{if(e==="small")return`
+          width: ${r.sizes.small};
+          height: ${r.sizes.small};
+        `;if(e==="medium")return`
+            width: ${r.sizes.medium};
+            height: ${r.sizes.medium};
+        `;if(e==="large")return`
+          width: ${r.sizes.large};
+          height: ${r.sizes.large};
+        `},h=u.keyframes`
+  to {
+    transform: rotate(360deg);
+  }
+`,y=i.newStyled.div`
+  position: relative;
+  height: max-content;
+  width: max-content;
+  display: flex;
+  & .label-text {
+    display: ${e=>e.label?"unset":"none"};
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    ${e=>t.getComponentTypographyCss(e.theme,"Spinner",e.size,"enabled")};
+    font-size: ${e=>p[e.size]};
+    color: ${e=>t.getColorRgbaValue(e.theme,"Spinner",e.color,"enabled","text")};
+  }
+`,$=i.newStyled.div`
+  display: inline-block;
+  ${e=>b(e.size,e.theme)}
+  border: ${e=>`0.3125rem solid ${t.getColorRgbaValue(e.theme,"Spinner",e.color,"enabled","unfilled")}`};
+  border-radius: 50%;
+  border-top-color: ${e=>t.getColorRgbaValue(e.theme,"Spinner",e.color,"enabled","background")};
+  border-right-color: ${e=>t.getColorRgbaValue(e.theme,"Spinner",e.color,"enabled","background")};
+
+  animation: ${h} 0.8s ease-in-out infinite;
+`,l=e=>{const{label:r,className:a="",style:m={},size:c="small",color:d="primary"}=e,o={theme:g.useTheme(),size:c,color:d};return s.jsxs(y,{...o,className:"lnc-ui-spinner "+a,style:m,label:r,children:[s.jsx($,{...o}),s.jsx("div",{className:"label-text",children:r})]})};l.propTypes={label:n.PropTypes.string,className:n.PropTypes.string,style:n.PropTypes.object,size:n.PropTypes.oneOf(["small","medium","large"]),color:n.PropTypes.oneOf(["primary","secondary","success","danger","warning","information","neutral","gray"])};module.exports=l;

package/dist/Spinner.js

@@ -0,0 +1,114 @@
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import "react";
+import { P as i } from "./index-Ds9PUTwb.js";
+import { n as s } from "./emotion-styled.browser.esm-BZSYYThs.js";
+import { k as p } from "./emotion-react.browser.esm-OWM-uG8Q.js";
+import { a as g, b as n } from "./utils-DEke8iwo.js";
+import { u as h } from "./emotion-element-5486c51c.browser.esm-CSejtOeT.js";
+const u = {
+  small: "0.6rem",
+  medium: "0.7rem",
+  large: "0.8rem"
+}, b = (e, r) => {
+  if (e === "small")
+    return `
+          width: ${r.sizes.small};
+          height: ${r.sizes.small};
+        `;
+  if (e === "medium")
+    return `
+            width: ${r.sizes.medium};
+            height: ${r.sizes.medium};
+        `;
+  if (e === "large")
+    return `
+          width: ${r.sizes.large};
+          height: ${r.sizes.large};
+        `;
+}, f = p`
+  to {
+    transform: rotate(360deg);
+  }
+`, y = s.div`
+  position: relative;
+  height: max-content;
+  width: max-content;
+  display: flex;
+  & .label-text {
+    display: ${(e) => e.label ? "unset" : "none"};
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    ${(e) => g(e.theme, "Spinner", e.size, "enabled")};
+    font-size: ${(e) => u[e.size]};
+    color: ${(e) => n(
+  e.theme,
+  "Spinner",
+  e.color,
+  "enabled",
+  "text"
+)};
+  }
+`, $ = s.div`
+  display: inline-block;
+  ${(e) => b(e.size, e.theme)}
+  border: ${(e) => `0.3125rem solid ${n(
+  e.theme,
+  "Spinner",
+  e.color,
+  "enabled",
+  "unfilled"
+)}`};
+  border-radius: 50%;
+  border-top-color: ${(e) => n(
+  e.theme,
+  "Spinner",
+  e.color,
+  "enabled",
+  "background"
+)};
+  border-right-color: ${(e) => n(
+  e.theme,
+  "Spinner",
+  e.color,
+  "enabled",
+  "background"
+)};
+
+  animation: ${f} 0.8s ease-in-out infinite;
+`, z = (e) => {
+  const { label: r, className: a = "", style: l = {}, size: m = "small", color: d = "primary" } = e, t = { theme: h(), size: m, color: d };
+  return /* @__PURE__ */ c(
+    y,
+    {
+      ...t,
+      className: "lnc-ui-spinner " + a,
+      style: l,
+      label: r,
+      children: [
+        /* @__PURE__ */ o($, { ...t }),
+        /* @__PURE__ */ o("div", { className: "label-text", children: r })
+      ]
+    }
+  );
+};
+z.propTypes = {
+  label: i.string,
+  className: i.string,
+  style: i.object,
+  size: i.oneOf(["small", "medium", "large"]),
+  color: i.oneOf([
+    "primary",
+    "secondary",
+    "success",
+    "danger",
+    "warning",
+    "information",
+    "neutral",
+    "gray"
+  ])
+};
+export {
+  z as default
+};

package/dist/Surface.cjs

@@ -0,0 +1,7 @@
+"use strict";const x=require("react/jsx-runtime");require("react");const c=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),r=require("./index-DXnSjbfJ.cjs"),s=require("./utils-hdRGTsQ7.cjs"),p=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),g=c.newStyled.div`
+  padding: ${e=>e.padding};
+  box-shadow: ${e=>s.getBoxShadowValue(e.theme,e.boxShadow)};
+  border-radius: ${e=>s.getBorderRadiusValueWithUnits(e.theme,e.borderRadius)};
+  width: ${e=>e.fullWidth?"100%":"fit-content"};
+  border-top: 1px solid rgba(0, 0, 0, 0.04);
+`,o=({children:e,style:t={},className:d="",boxShadow:i="s",borderRadius:n="regular",padding:l="s",fullWidth:a=!1})=>{const u=p.useTheme(),m={xs:"0.25rem",s:"0.5rem",m:"0.75rem",l:"1rem",xl:"1.25rem",xxl:"1.5rem"};return x.jsx(g,{theme:u,style:t,className:"lnc-ui-surface "+d,borderRadius:n,boxShadow:i,padding:m[l],fullWidth:a,children:e})};o.propTypes={borderRadius:r.PropTypes.oneOf(["slight","regular","edged","curved","none"]),boxShadow:r.PropTypes.oneOf(["xs","s","m","l","xl","xxl"]),paddign:r.PropTypes.oneOf(["xs","s","m","l","xl","xxl"]),fullWidth:r.PropTypes.bool,className:r.PropTypes.string,style:r.PropTypes.object};module.exports=o;

package/dist/Surface.js

@@ -0,0 +1,60 @@
+import { jsx as n } from "react/jsx-runtime";
+import "react";
+import { n as x } from "./emotion-styled.browser.esm-BZSYYThs.js";
+import { P as r } from "./index-Ds9PUTwb.js";
+import { m as u, c as p } from "./utils-DEke8iwo.js";
+import { u as f } from "./emotion-element-5486c51c.browser.esm-CSejtOeT.js";
+const c = x.div`
+  padding: ${(e) => e.padding};
+  box-shadow: ${(e) => u(e.theme, e.boxShadow)};
+  border-radius: ${(e) => p(e.theme, e.borderRadius)};
+  width: ${(e) => e.fullWidth ? "100%" : "fit-content"};
+  border-top: 1px solid rgba(0, 0, 0, 0.04);
+`, g = ({
+  children: e,
+  style: o = {},
+  className: s = "",
+  boxShadow: a = "s",
+  borderRadius: d = "regular",
+  padding: t = "s",
+  fullWidth: i = !1
+}) => {
+  const l = f(), m = {
+    xs: "0.25rem",
+    s: "0.5rem",
+    m: "0.75rem",
+    l: "1rem",
+    xl: "1.25rem",
+    xxl: "1.5rem"
+  };
+  return /* @__PURE__ */ n(
+    c,
+    {
+      theme: l,
+      style: o,
+      className: "lnc-ui-surface " + s,
+      borderRadius: d,
+      boxShadow: a,
+      padding: m[t],
+      fullWidth: i,
+      children: e
+    }
+  );
+};
+g.propTypes = {
+  borderRadius: r.oneOf([
+    "slight",
+    "regular",
+    "edged",
+    "curved",
+    "none"
+  ]),
+  boxShadow: r.oneOf(["xs", "s", "m", "l", "xl", "xxl"]),
+  paddign: r.oneOf(["xs", "s", "m", "l", "xl", "xxl"]),
+  fullWidth: r.bool,
+  className: r.string,
+  style: r.object
+};
+export {
+  g as default
+};

package/dist/SwipeableDrawer.cjs

@@ -0,0 +1,33 @@
+"use strict";const g=require("react/jsx-runtime"),u=require("react"),t=require("./index-DXnSjbfJ.cjs"),v=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),y=require("./utils-hdRGTsQ7.cjs"),V=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),X=(e,o,n,c,a)=>{if(e==="right"||e==="left"||o&&n)return"height: 100%;";if(!(o&&a===!0))return o?"height: "+c+";":"height: 0;"},Y=(e,o,n,c,a)=>{if(e==="top"||e==="bottom"||o&&n)return"width: 100%;";if(!(o&&a===!0))return o?"width: "+c+";":"width: 0;"},A=v.newStyled.div`
+  touch-action: none;
+  overflow: auto;
+  max-height: ${e=>e.isOpen||e.unsetHeight===!1?"100dvh":0};
+  ${e=>X(e.direction,e.isOpen,e.isFullPage,e.drawerSize,e.unsetHeight)}
+  max-width: ${e=>e.isOpen||e.unsetWidth===!1?"100vw":0};
+  ${e=>Y(e.direction,e.isOpen,e.isFullPage,e.drawerSize,e.unsetWidth)}
+  position: fixed;
+  z-index: ${e=>e.zIndex};
+  ${e=>e.direction==="bottom"?"bottom: 0":"top: 0"};
+  ${e=>e.direction==="right"?"right: 0":"left: 0"};
+  -webkit-transition: ${e=>`all ${e.duration}s`};
+  -moz-transition: ${e=>`all ${e.duration}s`};
+  -ms-transition: ${e=>`all ${e.duration}s`};
+  -o-transition: ${e=>`all ${e.duration}s`};
+  transition: ${e=>`all ${e.duration}s`};
+  padding: ${e=>e.isOpen===!0?"20px":0};
+
+  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
+
+  background-color: ${e=>y.getColorRgbaValue(e.theme,"Drawer",e.color,"enabled","background")};
+  color: ${e=>y.getColorRgbaValue(e.theme,"Drawer",e.color,"enabled","text")};
+  ${e=>y.getComponentTypographyCss(e.theme,"Drawer",e.size,"enabled")};
+`,B=v.newStyled.div`
+  z-index: ${e=>e.zIndex};
+  position: fixed;
+  top: 0;
+  left: 0;
+
+  height: ${e=>e.isOpen===!0&&e.enableOverlay===!0?"100dvh":0};
+  width: ${e=>e.isOpen===!0&&e.enableOverlay===!0?"100vw":0};
+  background-color: ${e=>e.overlayColor};
+`,$=u.forwardRef((e,o)=>{const{direction:n="right",open:c=!1,duration:a=.8,enableOverlay:x=!0,zIndex:m=100,closeOnClickOutside:O=!0,closeOnSwipe:d=!0,isFullPage:P=!1,unsetHeight:S=!1,unsetWidth:z=!1,onClose:C=()=>{},onOpen:D=()=>{},className:k="",style:q={},color:H="neutral",overlayColor:I="rgba(123, 123, 123, 0.5)",size:j="small",drawerSize:E="12.5rem",children:F,...W}=e,M=V.useTheme(),i=u.useRef(),[p,b]=u.useState(!1);var h=null,f=null;function _(r){return r.touches||r.originalEvent.touches}function R(r){const l=_(r)[0];h=l.clientX,f=l.clientY}function L(r){if(!(!h||!f)){var l=r.touches[0].clientX,U=r.touches[0].clientY,w=h-l,T=f-U;Math.abs(w)>Math.abs(T)?w>0?d==!0&&n=="left"&&s():d==!0&&n=="right"&&s():T>0?d==!0&&n=="top"&&s():d==!0&&n=="bottom"&&s(),h=null,f=null}}u.useImperativeHandle(o,()=>({open(){N()},close(){s()},isOpen(){return p}}));const N=r=>{b(!0),D(r)},s=r=>{b(!1),C(r)};return u.useEffect(()=>{const r=l=>{i!=null&&i.current&&!(i!=null&&i.current.contains(l.target))&&O==!0&&s()};return document.addEventListener("click",r,!0),()=>{document.removeEventListener("click",r,!0)}},[]),g.jsx(g.Fragment,{children:g.jsx(B,{enableOverlay:x,overlayColor:I,isOpen:p,zIndex:m,children:g.jsx(A,{ref:i,zIndex:m,isOpen:p,direction:n,isFullPage:P,unsetHeight:S,unsetWidth:z,duration:a,color:H,theme:M,className:k,style:q,size:j,drawerSize:E,onTouchStart:R,onTouchMove:L,...W,children:F})})})});$.propTypes={direction:t.PropTypes.oneOf(["top","right","left","bottom"]),open:t.PropTypes.bool,duration:t.PropTypes.number,enableOverlay:t.PropTypes.bool,zIndex:t.PropTypes.number,closeOnClickOutside:t.PropTypes.bool,closeOnSwipe:t.PropTypes.bool,isFullPage:t.PropTypes.bool,unsetHeight:t.PropTypes.bool,unsetWidth:t.PropTypes.bool,onClose:t.PropTypes.func,onOpen:t.PropTypes.func,className:t.PropTypes.string,style:t.PropTypes.object,overlayColor:t.PropTypes.string,drawerSize:t.PropTypes.string,size:t.PropTypes.oneOf(["small","medium","large"]),color:t.PropTypes.oneOf(["primary","secondary","success","warning","danger","information","neutral","gray"])};module.exports=$;

package/dist/SwipeableDrawer.js

@@ -0,0 +1,213 @@
+import { jsx as g, Fragment as Y } from "react/jsx-runtime";
+import _, { useRef as R, useState as V, useImperativeHandle as q, useEffect as A } from "react";
+import { P as t } from "./index-Ds9PUTwb.js";
+import { n as y } from "./emotion-styled.browser.esm-BZSYYThs.js";
+import { b as $, a as B } from "./utils-DEke8iwo.js";
+import { u as G } from "./emotion-element-5486c51c.browser.esm-CSejtOeT.js";
+const J = (e, r, o, u, s) => {
+  if (e === "right" || e === "left" || r && o) return "height: 100%;";
+  if (!(r && s === !0))
+    return r ? "height: " + u + ";" : "height: 0;";
+}, K = (e, r, o, u, s) => {
+  if (e === "top" || e === "bottom" || r && o) return "width: 100%;";
+  if (!(r && s === !0))
+    return r ? "width: " + u + ";" : "width: 0;";
+}, Q = y.div`
+  touch-action: none;
+  overflow: auto;
+  max-height: ${(e) => e.isOpen || e.unsetHeight === !1 ? "100dvh" : 0};
+  ${(e) => J(
+  e.direction,
+  e.isOpen,
+  e.isFullPage,
+  e.drawerSize,
+  e.unsetHeight
+)}
+  max-width: ${(e) => e.isOpen || e.unsetWidth === !1 ? "100vw" : 0};
+  ${(e) => K(
+  e.direction,
+  e.isOpen,
+  e.isFullPage,
+  e.drawerSize,
+  e.unsetWidth
+)}
+  position: fixed;
+  z-index: ${(e) => e.zIndex};
+  ${(e) => e.direction === "bottom" ? "bottom: 0" : "top: 0"};
+  ${(e) => e.direction === "right" ? "right: 0" : "left: 0"};
+  -webkit-transition: ${(e) => `all ${e.duration}s`};
+  -moz-transition: ${(e) => `all ${e.duration}s`};
+  -ms-transition: ${(e) => `all ${e.duration}s`};
+  -o-transition: ${(e) => `all ${e.duration}s`};
+  transition: ${(e) => `all ${e.duration}s`};
+  padding: ${(e) => e.isOpen === !0 ? "20px" : 0};
+
+  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
+
+  background-color: ${(e) => $(
+  e.theme,
+  "Drawer",
+  e.color,
+  "enabled",
+  "background"
+)};
+  color: ${(e) => $(e.theme, "Drawer", e.color, "enabled", "text")};
+  ${(e) => B(e.theme, "Drawer", e.size, "enabled")};
+`, Z = y.div`
+  z-index: ${(e) => e.zIndex};
+  position: fixed;
+  top: 0;
+  left: 0;
+
+  height: ${(e) => e.isOpen === !0 && e.enableOverlay === !0 ? "100dvh" : 0};
+  width: ${(e) => e.isOpen === !0 && e.enableOverlay === !0 ? "100vw" : 0};
+  background-color: ${(e) => e.overlayColor};
+`, ee = _.forwardRef((e, r) => {
+  const {
+    direction: o = "right",
+    open: u = !1,
+    duration: s = 0.8,
+    enableOverlay: O = !0,
+    zIndex: m = 100,
+    closeOnClickOutside: x = !0,
+    closeOnSwipe: c = !0,
+    isFullPage: p = !1,
+    unsetHeight: z = !1,
+    unsetWidth: S = !1,
+    //----------------
+    onClose: C = () => {
+    },
+    onOpen: D = () => {
+    },
+    //----------------
+    className: T = "",
+    style: k = {},
+    color: H = "neutral",
+    overlayColor: I = "rgba(123, 123, 123, 0.5)",
+    size: P = "small",
+    drawerSize: F = "12.5rem",
+    children: W,
+    ...E
+  } = e, M = G(), i = R(), [f, b] = V(!1);
+  var d = null, h = null;
+  function j(n) {
+    return n.touches || n.originalEvent.touches;
+  }
+  function L(n) {
+    const a = j(n)[0];
+    d = a.clientX, h = a.clientY;
+  }
+  function N(n) {
+    if (!(!d || !h)) {
+      var a = n.touches[0].clientX, X = n.touches[0].clientY, w = d - a, v = h - X;
+      Math.abs(w) > Math.abs(v) ? w > 0 ? c == !0 && o == "left" && l() : c == !0 && o == "right" && l() : v > 0 ? c == !0 && o == "top" && l() : c == !0 && o == "bottom" && l(), d = null, h = null;
+    }
+  }
+  q(r, () => ({
+    open() {
+      U();
+    },
+    close() {
+      l();
+    },
+    isOpen() {
+      return f;
+    }
+  }));
+  const U = (n) => {
+    b(!0), D(n);
+  }, l = (n) => {
+    b(!1), C(n);
+  };
+  return A(() => {
+    const n = (a) => {
+      i != null && i.current && !(i != null && i.current.contains(a.target)) && x == !0 && l();
+    };
+    return document.addEventListener("click", n, !0), () => {
+      document.removeEventListener("click", n, !0);
+    };
+  }, []), /* @__PURE__ */ g(Y, { children: /* @__PURE__ */ g(
+    Z,
+    {
+      enableOverlay: O,
+      overlayColor: I,
+      isOpen: f,
+      zIndex: m,
+      children: /* @__PURE__ */ g(
+        Q,
+        {
+          ref: i,
+          zIndex: m,
+          isOpen: f,
+          direction: o,
+          isFullPage: p,
+          unsetHeight: z,
+          unsetWidth: S,
+          duration: s,
+          color: H,
+          theme: M,
+          className: T,
+          style: k,
+          size: P,
+          drawerSize: F,
+          onTouchStart: L,
+          onTouchMove: N,
+          ...E,
+          children: W
+        }
+      )
+    }
+  ) });
+});
+ee.propTypes = {
+  direction: t.oneOf(["top", "right", "left", "bottom"]),
+  open: t.bool,
+  /**
+   * Duration of opening the drawer in ms
+   */
+  duration: t.number,
+  /**
+   * Determines whether to show the overlay
+   */
+  enableOverlay: t.bool,
+  /**
+   * z-index of Drawer
+   */
+  zIndex: t.number,
+  closeOnClickOutside: t.bool,
+  closeOnSwipe: t.bool,
+  /**
+   * Determines whether drawer takes up the whole page
+   */
+  isFullPage: t.bool,
+  unsetHeight: t.bool,
+  unsetWidth: t.bool,
+  //---------------------------------------------------------------
+  onClose: t.func,
+  onOpen: t.func,
+  //---------------------------------------------------------------
+  className: t.string,
+  style: t.object,
+  overlayColor: t.string,
+  /**
+   * Determines drawer's height or width depending on direction
+   */
+  drawerSize: t.string,
+  /**
+   * Determines font size
+   */
+  size: t.oneOf(["small", "medium", "large"]),
+  color: t.oneOf([
+    "primary",
+    "secondary",
+    "success",
+    "warning",
+    "danger",
+    "information",
+    "neutral",
+    "gray"
+  ])
+};
+export {
+  ee as default
+};