@intlayer/design-system 2.0.10 → 2.0.11

package/dist/components/Navbar/MobileNavbar.es.js

@@ -1,14 +1,14 @@
 "use client";
 import { j as t } from "../../jsx-runtime-Tw_Kw2GZ.js";
-import { p as r, c as R } from "../../styled-components.browser.esm-D6kkzXl4.js";
-import { useState as y, useRef as X } from "react";
-import { useScrollBlockage as Y } from "../../hooks/useScrollBlockage/index.es.js";
-import { useScrollDetection as B } from "../../hooks/useScrollDetection.es.js";
-import { MaxHeightSmoother as F } from "../MaxHeightSmoother/index.es.js";
-import { Burger as z } from "./Burger.es.js";
-import { useNavActions as P } from "./useNavigation.es.js";
-import { m as g } from "../../motion-CP5YERk7.js";
-const T = {
+import { p as r, c as u } from "../../styled-components.browser.esm-D6kkzXl4.js";
+import { useState as m, useRef as S } from "react";
+import { useScrollBlockage as j } from "../../hooks/useScrollBlockage/index.es.js";
+import { useScrollDetection as C } from "../../hooks/useScrollDetection.es.js";
+import { MaxHeightSmoother as D } from "../MaxHeightSmoother/index.es.js";
+import { Burger as H } from "./Burger.es.js";
+import { useNavActions as I } from "./useNavigation.es.js";
+import { m as y } from "../../motion-minimal-BFpJTMRN.js";
+const R = {
   open: {
     y: 0,
     opacity: 1,
@@ -28,7 +28,7 @@ const T = {
       }
     }
   }
-}, A = {
+}, X = {
   open: {
     transition: {
       staggerChildren: 0.07,
@@ -41,7 +41,7 @@ const T = {
       staggerDirection: -1
     }
   }
-}, L = r(g.div)`
+}, Y = r(y.div)`
   ${{
   width: "100%",
   cursor: "pointer",
@@ -59,137 +59,137 @@ const T = {
     color: "rgba(232, 121, 249, var(--tw-text-opacity))"
   }
 }}
-`, h = ({
-  sections: o,
+`, x = ({
+  sections: a,
   activeSection: c,
   onClickSection: i
-}) => /* @__PURE__ */ t.jsx("div", { role: "tablist", "aria-orientation": "vertical", "aria-multiselectable": "false", children: o == null ? void 0 : o.map(({
-  id: a,
+}) => /* @__PURE__ */ t.jsx("div", { role: "tablist", "aria-orientation": "vertical", "aria-multiselectable": "false", children: a == null ? void 0 : a.map(({
+  id: o,
   label: d,
   url: n,
   title: s,
   onClick: e
-}) => /* @__PURE__ */ t.jsx(L, { role: "tab", id: a, "aria-label": d, onClick: (l) => {
-  i(a, n), e == null || e(l);
-}, variants: T, "aria-selected": c === a, children: s }, a)) }), J = ({
-  logo: o,
+}) => /* @__PURE__ */ t.jsx(Y, { role: "tab", id: o, "aria-label": d, onClick: (l) => {
+  i(o, n), e == null || e(l);
+}, variants: R, "aria-selected": c === o, children: s }, o)) }), h = [{
+  backgroundColor: "rgba(231, 231, 231, 0.95)",
+  "--tw-shadow": "0 0 10px -15px rgba(0,0,0,0.3)",
+  "--tw-shadow-colored": "0 0 10px -15px var(--tw-shadow-color)",
+  boxShadow: "var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)",
+  "--tw-backdrop-blur": "blur(8px)",
+  backdropFilter: "var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)",
+  '&:where([data-theme="dark"], [data-theme="dark"] *)': {
+    backgroundColor: "rgba(39, 39, 39, 0.95)"
+  }
+}, u`
+    -webkit-backdrop-filter: var(--tw-backdrop-blur)
+      var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
+      var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
+      var(--tw-backdrop-invert) var(--tw-backdrop-opacity)
+      var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  `], B = r.nav(({
+  $isHidden: a
+}) => [...h, {
+  position: "sticky",
+  top: "0px",
+  zIndex: "50",
+  display: "flex",
+  width: "100vw",
+  flexDirection: "column",
+  transitionProperty: "color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",
+  transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+  transitionDuration: "150ms"
+}, a ? {
+  "--tw-translate-y": "-100%",
+  transform: "translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))"
+} : {
+  "--tw-translate-y": "0px",
+  transform: "translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))"
+}]), F = r.div({
+  display: "flex",
+  width: "100%",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: "10vw",
+  paddingLeft: "1rem",
+  paddingRight: "1rem",
+  paddingTop: "0.75rem",
+  paddingBottom: "0.75rem"
+}), z = r.div({
+  display: "flex",
+  width: "100%",
+  alignItems: "center",
+  justifyContent: "flex-end",
+  gap: "1.5rem"
+}), P = r.div({
+  display: "flex",
+  width: "100%",
+  alignItems: "center",
+  justifyContent: "flex-end",
+  gap: "0.25rem"
+}), T = r.div(() => [...h, {
+  position: "absolute",
+  bottom: "0px",
+  left: "0px",
+  width: "100%",
+  "--tw-translate-y": "100%",
+  transform: "translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))"
+}]), A = r(y.div)(() => ({
+  display: "flex",
+  width: "100%",
+  flexDirection: "column",
+  paddingBottom: "20%",
+  paddingTop: "2.5rem",
+  fontSize: "1.125rem",
+  lineHeight: "1.75rem",
+  letterSpacing: "0.025em",
+  "--tw-text-opacity": "1",
+  color: "rgba(18, 18, 18, var(--tw-text-opacity))",
+  '&:where([data-theme="dark"], [data-theme="dark"] *)': {
+    "--tw-text-opacity": "1",
+    color: "rgba(255, 245, 237, var(--tw-text-opacity))"
+  }
+})), L = r.div({
+  display: "flex",
+  height: "100%",
+  flexDirection: "column",
+  justifyContent: "space-between"
+}), J = ({
+  logo: a,
   topChildren: c,
   topSections: i = [],
-  bottomSections: a = [],
+  bottomSections: o = [],
   rightItems: d
 }) => {
-  var x;
-  const [n, s] = y(!1), [e, l] = y(!1), p = X(null), {
-    activeSection: v,
-    onClickSection: b
-  } = P();
-  Y({
+  var b;
+  const [n, s] = m(!1), [e, l] = m(!1), w = S(null), {
+    activeSection: p,
+    onClickSection: v
+  } = I();
+  j({
     disableScroll: e,
     key: "mobile_nav"
-  }), B({
+  }), C({
     onScrollUp: () => s(!1),
     onScrollDown: () => s(!0),
     isEnabled: !e
   });
-  const f = n ? 0 : ((x = p.current) == null ? void 0 : x.clientHeight) ?? 0, k = i.length + a.length > 0, m = [{
-    backgroundColor: "rgba(231, 231, 231, 0.95)",
-    "--tw-shadow": "0 0 10px -15px rgba(0,0,0,0.3)",
-    "--tw-shadow-colored": "0 0 10px -15px var(--tw-shadow-color)",
-    boxShadow: "var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)",
-    "--tw-backdrop-blur": "blur(8px)",
-    backdropFilter: "var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)",
-    '&:where([data-theme="dark"], [data-theme="dark"] *)': {
-      backgroundColor: "rgba(69, 69, 69, 0.95)"
-    }
-  }, R`
-      -webkit-backdrop-filter: var(--tw-backdrop-blur)
-        var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
-        var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
-        var(--tw-backdrop-invert) var(--tw-backdrop-opacity)
-        var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-    `], u = r.nav(({
-    $isHidden: w
-  }) => [...m, {
-    position: "sticky",
-    top: "0px",
-    zIndex: "50",
-    display: "flex",
-    width: "100vw",
-    flexDirection: "column",
-    transitionProperty: "color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",
-    transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
-    transitionDuration: "150ms"
-  }, w ? {
-    "--tw-translate-y": "-100%",
-    transform: "translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))"
-  } : {
-    "--tw-translate-y": "0px",
-    transform: "translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))"
-  }]), S = r.div({
-    display: "flex",
-    width: "100%",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: "10vw",
-    paddingLeft: "1rem",
-    paddingRight: "1rem",
-    paddingTop: "0.75rem",
-    paddingBottom: "0.75rem"
-  }), j = r.div({
-    display: "flex",
-    width: "100%",
-    alignItems: "center",
-    justifyContent: "flex-end",
-    gap: "1.5rem"
-  }), C = r.div({
-    display: "flex",
-    width: "100%",
-    alignItems: "center",
-    justifyContent: "flex-end",
-    gap: "0.25rem"
-  }), D = r.div(() => [...m, {
-    position: "absolute",
-    bottom: "0px",
-    left: "0px",
-    width: "100%",
-    "--tw-translate-y": "100%",
-    transform: "translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))"
-  }]), H = r(g.div)(() => ({
-    display: "flex",
-    width: "100%",
-    flexDirection: "column",
-    paddingBottom: "20%",
-    paddingTop: "2.5rem",
-    fontSize: "1.125rem",
-    lineHeight: "1.75rem",
-    letterSpacing: "0.025em",
-    "--tw-text-opacity": "1",
-    color: "rgba(18, 18, 18, var(--tw-text-opacity))",
-    '&:where([data-theme="dark"], [data-theme="dark"] *)': {
-      "--tw-text-opacity": "1",
-      color: "rgba(255, 245, 237, var(--tw-text-opacity))"
-    }
-  })), I = r.div({
-    display: "flex",
-    height: "100%",
-    flexDirection: "column",
-    justifyContent: "space-between"
-  });
-  return /* @__PURE__ */ t.jsxs(u, { id: "mobile-menu", $isHidden: n, children: [
-    /* @__PURE__ */ t.jsxs(S, { ref: p, children: [
-      o,
-      /* @__PURE__ */ t.jsxs(j, { children: [
-        /* @__PURE__ */ t.jsx(C, { children: d }),
-        k && /* @__PURE__ */ t.jsx(z, { isActive: e, onClick: () => l((w) => !w) })
+  const g = n ? 0 : ((b = w.current) == null ? void 0 : b.clientHeight) ?? 0, f = i.length + o.length > 0;
+  return /* @__PURE__ */ t.jsxs(B, { id: "mobile-menu", $isHidden: n, children: [
+    /* @__PURE__ */ t.jsxs(F, { ref: w, children: [
+      a,
+      /* @__PURE__ */ t.jsxs(z, { children: [
+        /* @__PURE__ */ t.jsx(P, { children: d }),
+        f && /* @__PURE__ */ t.jsx(H, { isActive: e, onClick: () => l((k) => !k) })
       ] })
     ] }),
-    /* @__PURE__ */ t.jsx(D, { children: /* @__PURE__ */ t.jsx(F, { isHidden: !e, children: /* @__PURE__ */ t.jsxs(H, { onClick: () => l(!1), animate: e ? "open" : "closed", variants: A, style: {
-      height: `calc(100vh - ${f}px)`
+    /* @__PURE__ */ t.jsx(T, { children: /* @__PURE__ */ t.jsx(D, { isHidden: !e, children: /* @__PURE__ */ t.jsxs(A, { onClick: () => l(!1), animate: e ? "open" : "closed", variants: X, style: {
+      height: `calc(100vh - ${g}px)`
     }, children: [
       c,
-      /* @__PURE__ */ t.jsxs(I, { children: [
-        /* @__PURE__ */ t.jsx(h, { sections: i, activeSection: v, onClickSection: b }),
-        /* @__PURE__ */ t.jsx(h, { sections: a, activeSection: v, onClickSection: b })
+      /* @__PURE__ */ t.jsxs(L, { children: [
+        /* @__PURE__ */ t.jsx(x, { sections: i, activeSection: p, onClickSection: v }),
+        /* @__PURE__ */ t.jsx(x, { sections: o, activeSection: p, onClickSection: v })
       ] })
     ] }) }) })
   ] });

package/dist/components/Popover/index.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../jsx-runtime-D6agescH.cjs"),r=require("../../styled-components.browser.esm-GqWwDlfY.cjs"),a=r.pt.div({position:"relative"}),o=r.pt.div({position:"absolute",bottom:"0px",right:"1.25rem","--tw-translate-y":"1.75rem",transform:"translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))",borderRadius:"0.375rem",backgroundColor:"currentColor",padding:"0.25rem",fontSize:"0.75rem",lineHeight:"1rem","--tw-text-opacity":"0.75",opacity:"0",transitionProperty:"all",transitionTimingFunction:"cubic-bezier(0.4, 0, 0.2, 1)",transitionDuration:"200ms",transitionDelay:"700ms",animationDelay:"700ms",animationDuration:"200ms",animationTimingFunction:"cubic-bezier(0.4, 0, 0.2, 1)","&:hover":{transitionDelay:"0s",animationDelay:"0s"},".group:hover &":{opacity:"1"}}),n=r.pt.span({maxWidth:"60%",userSelect:"none","--tw-text-opacity":"1",color:"rgba(255, 255, 255, var(--tw-text-opacity))",mixBlendMode:"difference"}),s=({children:i,content:t})=>e.jsxRuntimeExports.jsxs(a,{className:"group","aria-haspopup":!0,"aria-expanded":!1,"aria-label":"Display the popup by hovering this element",children:[i,e.jsxRuntimeExports.jsx(o,{"aria-hidden":!0,children:typeof t=="string"?e.jsxRuntimeExports.jsx(n,{children:t}):t})]});exports.Popover=s;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../jsx-runtime-D6agescH.cjs"),r=require("../../styled-components.browser.esm-GqWwDlfY.cjs"),o=r.pt.div({position:"relative"}),i=r.pt.div({position:"absolute",bottom:"0px",left:"1.25rem",zIndex:"50","--tw-translate-y":"150%",transform:"translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))",borderRadius:"0.375rem","--tw-bg-opacity":"1",backgroundColor:"rgba(231, 231, 231, var(--tw-bg-opacity))",padding:"0.25rem",fontSize:"0.75rem",lineHeight:"1rem","--tw-text-opacity":"0.75",opacity:"0","--tw-ring-offset-shadow":"var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)","--tw-ring-shadow":"var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)",boxShadow:"var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)","--tw-ring-color":"currentColor",transitionProperty:"all",transitionTimingFunction:"cubic-bezier(0.4, 0, 0.2, 1)",transitionDuration:"200ms",transitionDelay:"200ms",animationDelay:"200ms",animationDuration:"200ms",animationTimingFunction:"cubic-bezier(0.4, 0, 0.2, 1)","&:hover":{transitionDelay:"0s",animationDelay:"0s"},".group:hover &":{opacity:"1"},'&:where([data-theme="dark"], [data-theme="dark"] *)':{"--tw-bg-opacity":"1",backgroundColor:"rgba(39, 39, 39, var(--tw-bg-opacity))"}}),n=({children:a,content:e})=>t.jsxRuntimeExports.jsxs(o,{className:"group","aria-haspopup":!0,"aria-expanded":!1,"aria-label":"Display the popup by hovering this element",children:[a,t.jsxRuntimeExports.jsx(i,{"aria-hidden":!0,children:e})]});exports.Popover=n;

package/dist/components/Popover/index.es.js

@@ -1,26 +1,32 @@
 "use client";
-import { j as e } from "../../jsx-runtime-Tw_Kw2GZ.js";
+import { j as t } from "../../jsx-runtime-Tw_Kw2GZ.js";
 import { p as a } from "../../styled-components.browser.esm-D6kkzXl4.js";
-const i = a.div({
+const e = a.div({
   position: "relative"
 }), o = a.div({
   position: "absolute",
   bottom: "0px",
-  right: "1.25rem",
-  "--tw-translate-y": "1.75rem",
+  left: "1.25rem",
+  zIndex: "50",
+  "--tw-translate-y": "150%",
   transform: "translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))",
   borderRadius: "0.375rem",
-  backgroundColor: "currentColor",
+  "--tw-bg-opacity": "1",
+  backgroundColor: "rgba(231, 231, 231, var(--tw-bg-opacity))",
   padding: "0.25rem",
   fontSize: "0.75rem",
   lineHeight: "1rem",
   "--tw-text-opacity": "0.75",
   opacity: "0",
+  "--tw-ring-offset-shadow": "var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)",
+  "--tw-ring-shadow": "var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)",
+  boxShadow: "var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)",
+  "--tw-ring-color": "currentColor",
   transitionProperty: "all",
   transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
   transitionDuration: "200ms",
-  transitionDelay: "700ms",
-  animationDelay: "700ms",
+  transitionDelay: "200ms",
+  animationDelay: "200ms",
   animationDuration: "200ms",
   animationTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
   "&:hover": {
@@ -29,20 +35,18 @@ const i = a.div({
   },
   ".group:hover &": {
     opacity: "1"
+  },
+  '&:where([data-theme="dark"], [data-theme="dark"] *)': {
+    "--tw-bg-opacity": "1",
+    backgroundColor: "rgba(39, 39, 39, var(--tw-bg-opacity))"
   }
-}), n = a.span({
-  maxWidth: "60%",
-  userSelect: "none",
-  "--tw-text-opacity": "1",
-  color: "rgba(255, 255, 255, var(--tw-text-opacity))",
-  mixBlendMode: "difference"
-}), p = ({
+}), w = ({
   children: r,
-  content: t
-}) => /* @__PURE__ */ e.jsxs(i, { className: "group", "aria-haspopup": !0, "aria-expanded": !1, "aria-label": "Display the popup by hovering this element", children: [
+  content: i
+}) => /* @__PURE__ */ t.jsxs(e, { className: "group", "aria-haspopup": !0, "aria-expanded": !1, "aria-label": "Display the popup by hovering this element", children: [
   r,
-  /* @__PURE__ */ e.jsx(o, { "aria-hidden": !0, children: typeof t == "string" ? /* @__PURE__ */ e.jsx(n, { children: t }) : t })
+  /* @__PURE__ */ t.jsx(o, { "aria-hidden": !0, children: i })
 ] });
 export {
-  p as Popover
+  w as Popover
 };

package/dist/components/PressableDiv/PressableDiv.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("../../jsx-runtime-D6agescH.cjs"),e=require("react"),v=require("../../styled-components.browser.esm-GqWwDlfY.cjs"),y=400,g=v.pt.div(({$isSelecting:s})=>[{display:"inline",cursor:"pointer",borderRadius:"0.375rem",outlineStyle:"solid",outlineWidth:"2px",outlineOffset:"4px",outlineColor:"transparent",transitionProperty:"all",transitionTimingFunction:"cubic-bezier(0.4, 0, 0.2, 1)",transitionDuration:"200ms",transitionDelay:"100ms",animationDelay:"100ms",animationDuration:"200ms"},s?{outlineColor:"inherit"}:{"&:hover":{outlineColor:"inherit"}}]),E=({children:s,onPress:f,onClickOutside:t,pressDuration:p=y,isSelecting:a,...S})=>{const i=e.useRef(null),[c,u]=e.useState(a),n=e.useRef(null),T=()=>{u(!0),f()},h=()=>{n.current=setTimeout(()=>{T()},p)},d=()=>{n.current&&(clearTimeout(n.current),n.current=null)},m=()=>{d(),h()},o=()=>{d()},l=e.useCallback(r=>{i.current&&!i.current.contains(r.target)&&(u(!1),t==null||t())},[t]);e.useEffect(()=>(document.addEventListener("mousedown",l),()=>{document.removeEventListener("mousedown",l)}),[l]);const C=r=>{c&&(r.preventDefault(),r.stopPropagation())},D=()=>{u(!1)};return b.jsxRuntimeExports.jsx(g,{role:"button",tabIndex:0,onKeyUp:()=>null,onClick:C,onMouseDown:m,onMouseUp:o,onMouseLeave:o,onTouchStart:m,onTouchEnd:o,onTouchCancel:o,onBlur:D,ref:i,$isSelecting:a??c,...S,children:s})};exports.PressableDiv=E;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("../../jsx-runtime-D6agescH.cjs"),e=require("react"),v=require("../../styled-components.browser.esm-GqWwDlfY.cjs"),y=400,g=v.pt.div(({$isSelecting:s})=>[{display:"inline",cursor:"pointer",userSelect:"none",borderRadius:"0.375rem",outlineStyle:"solid",outlineWidth:"2px",outlineOffset:"4px",outlineColor:"transparent",transitionProperty:"all",transitionTimingFunction:"cubic-bezier(0.4, 0, 0.2, 1)",transitionDuration:"200ms",transitionDelay:"100ms",animationDelay:"100ms",animationDuration:"200ms"},s?{outlineColor:"inherit"}:{"&:hover":{outlineColor:"inherit"}}]),E=({children:s,onPress:f,onClickOutside:t,pressDuration:p=y,isSelecting:a,...S})=>{const i=e.useRef(null),[c,u]=e.useState(a),n=e.useRef(null),T=()=>{u(!0),f()},h=()=>{n.current=setTimeout(()=>{T()},p)},d=()=>{n.current&&(clearTimeout(n.current),n.current=null)},m=()=>{d(),h()},o=()=>{d()},l=e.useCallback(r=>{i.current&&!i.current.contains(r.target)&&(u(!1),t==null||t())},[t]);e.useEffect(()=>(document.addEventListener("mousedown",l),()=>{document.removeEventListener("mousedown",l)}),[l]);const C=r=>{c&&(r.preventDefault(),r.stopPropagation())},D=()=>{u(!1)};return b.jsxRuntimeExports.jsx(g,{role:"button",tabIndex:0,onKeyUp:()=>null,onClick:C,onMouseDown:m,onMouseUp:o,onMouseLeave:o,onTouchStart:m,onTouchEnd:o,onTouchCancel:o,onBlur:D,ref:i,$isSelecting:a??c,...S,children:s})};exports.PressableDiv=E;

package/dist/components/PressableDiv/PressableDiv.es.js

@@ -7,6 +7,7 @@ const y = 400, O = x.div(({
 }) => [{
   display: "inline",
   cursor: "pointer",
+  userSelect: "none",
   borderRadius: "0.375rem",
   outlineStyle: "solid",
   outlineWidth: "2px",
@@ -32,16 +33,16 @@ const y = 400, O = x.div(({
   isSelecting: l,
   ...h
 }) => {
-  const i = d(null), [a, s] = E(l), t = d(null), T = () => {
+  const i = d(null), [a, s] = E(l), t = d(null), S = () => {
     s(!0), p();
-  }, S = () => {
+  }, T = () => {
     t.current = setTimeout(() => {
-      T();
+      S();
     }, f);
   }, c = () => {
     t.current && (clearTimeout(t.current), t.current = null);
   }, m = () => {
-    c(), S();
+    c(), T();
   }, n = () => {
     c();
   }, u = b((o) => {

package/dist/components/ThemeSwitcherDropDown/MobileThemeSwitcher.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../../jsx-runtime-D6agescH.cjs"),r=require("../../styled-components.browser.esm-GqWwDlfY.cjs"),S=require("react"),e=require("./types.cjs.js"),d=require("../../sun-BQYZHcpc.cjs"),k=({theme:i,systemTheme:c,setTheme:l})=>{const u=c===i,m=u?e.Modes.system:i,[s,M]=S.useState(m),t=s===e.Modes.system?i===e.Modes.dark?e.Modes.light:e.Modes.dark:u?e.Modes.system:s===e.Modes.light?e.Modes.dark:e.Modes.light,n=()=>{t===e.Modes.system?l(c??e.Modes.light):l(t),M(t)},y=r.pt.button({position:"relative",width:"2.5rem",height:"2.5rem"}),a=({isCurrentMode:h,isNextMode:w})=>[{position:"absolute",left:"50%",top:"50%","--tw-translate-x":"-50%",transform:"translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))","--tw-translate-y":"-50%"},{opacity:"0",transitionProperty:"opacity",transitionTimingFunction:"cubic-bezier(0.4, 0, 0.2, 1)",transitionDuration:"300ms",animationDuration:"300ms",animationTimingFunction:"cubic-bezier(0.4, 0, 0.2, 1)"},h?{opacity:"1",".group:hover &":{opacity:"0"}}:{},w?{".group:hover &":{opacity:"1"}}:{}],p=r.pt(d.CircleDashed)(a),x=r.pt(d.Moon)(a),g=r.pt(d.Sun)(a);return o.jsxRuntimeExports.jsxs(y,{"aria-label":"Theme selector",className:"group",children:[o.jsxRuntimeExports.jsx(p,{onClick:n,"data-mode":"system",isCurrentMode:s===e.Modes.system,isNextMode:t===e.Modes.system}),o.jsxRuntimeExports.jsx(x,{onClick:n,"data-mode":"light",isCurrentMode:s===e.Modes.dark,isNextMode:t===e.Modes.dark}),o.jsxRuntimeExports.jsx(g,{onClick:n,"data-mode":"dark",isCurrentMode:s===e.Modes.light,isNextMode:t===e.Modes.light})]})};exports.MobileThemeSwitcher=k;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("../../jsx-runtime-D6agescH.cjs"),n=require("../../styled-components.browser.esm-GqWwDlfY.cjs"),y=require("react"),e=require("./types.cjs.js"),d=require("../../sun-BQYZHcpc.cjs"),c=({$isCurrentMode:s,$isNextMode:r})=>[{position:"absolute",left:"50%",top:"50%","--tw-translate-x":"-50%",transform:"translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))","--tw-translate-y":"-50%"},{opacity:"0",transitionProperty:"opacity",transitionTimingFunction:"cubic-bezier(0.4, 0, 0.2, 1)",transitionDuration:"300ms",animationDuration:"300ms",animationTimingFunction:"cubic-bezier(0.4, 0, 0.2, 1)"},s?{opacity:"1",".group:hover &":{opacity:"0"}}:{},r?{".group:hover &":{opacity:"1"}}:{}],p=n.pt(d.CircleDashed)(c),x=n.pt(d.Moon)(c),g=n.pt(d.Sun)(c),h=n.pt.button({position:"relative",width:"2.5rem",height:"2.5rem"}),w=({theme:s,systemTheme:r,setTheme:l})=>{const u=r===s,m=u?e.Modes.system:s,[o,M]=y.useState(m),t=o===e.Modes.system?s===e.Modes.dark?e.Modes.light:e.Modes.dark:u?e.Modes.system:o===e.Modes.light?e.Modes.dark:e.Modes.light,a=()=>{t===e.Modes.system?l(r??e.Modes.light):l(t),M(t)};return i.jsxRuntimeExports.jsxs(h,{"aria-label":"Theme selector",className:"group",children:[i.jsxRuntimeExports.jsx(p,{onClick:a,"data-mode":"system",$isCurrentMode:o===e.Modes.system,$isNextMode:t===e.Modes.system}),i.jsxRuntimeExports.jsx(x,{onClick:a,"data-mode":"light",$isCurrentMode:o===e.Modes.dark,$isNextMode:t===e.Modes.dark}),i.jsxRuntimeExports.jsx(g,{onClick:a,"data-mode":"dark",$isCurrentMode:o===e.Modes.light,$isNextMode:t===e.Modes.light})]})};exports.MobileThemeSwitcher=w;

package/dist/components/ThemeSwitcherDropDown/MobileThemeSwitcher.es.js

@@ -1,65 +1,65 @@
 "use client";
-import { j as s } from "../../jsx-runtime-Tw_Kw2GZ.js";
-import { p as r } from "../../styled-components.browser.esm-D6kkzXl4.js";
-import { useState as M } from "react";
+import { j as a } from "../../jsx-runtime-Tw_Kw2GZ.js";
+import { p as i } from "../../styled-components.browser.esm-D6kkzXl4.js";
+import { useState as p } from "react";
 import { Modes as t } from "./types.es.js";
-import { C as k, M as S, S as v } from "../../sun-BrKC5Qwg.js";
-const D = ({
-  theme: a,
-  systemTheme: l,
+import { C as u, M as g, S as h } from "../../sun-BrKC5Qwg.js";
+const l = ({
+  $isCurrentMode: o,
+  $isNextMode: r
+}) => [{
+  position: "absolute",
+  left: "50%",
+  top: "50%",
+  "--tw-translate-x": "-50%",
+  transform: "translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))",
+  "--tw-translate-y": "-50%"
+}, {
+  opacity: "0",
+  transitionProperty: "opacity",
+  transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+  transitionDuration: "300ms",
+  animationDuration: "300ms",
+  animationTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)"
+}, o ? {
+  opacity: "1",
+  ".group:hover &": {
+    opacity: "0"
+  }
+} : {}, r ? {
+  ".group:hover &": {
+    opacity: "1"
+  }
+} : {}], w = i(u)(l), x = i(g)(l), M = i(h)(l), k = i.button({
+  position: "relative",
+  width: "2.5rem",
+  height: "2.5rem"
+}), j = ({
+  theme: o,
+  systemTheme: r,
   setTheme: c
 }) => {
-  const d = l === a, m = d ? t.system : a, [o, y] = M(m), e = (
+  const d = r === o, m = d ? t.system : o, [s, y] = p(m), e = (
     // Start loop
     // If mode is system, toggle the theme inverse of the system theme
-    o === t.system ? a === t.dark ? t.light : t.dark : (
+    s === t.system ? o === t.dark ? t.light : t.dark : (
       // Close loop
       // If current theme same as system theme, reset by toggle the system theme
       d ? t.system : (
         // Go to next step
         // Otherwise, toggle the remaining theme
-        o === t.light ? t.dark : t.light
+        s === t.light ? t.dark : t.light
       )
     )
-  ), i = () => {
-    e === t.system ? c(l ?? t.light) : c(e), y(e);
-  }, p = r.button({
-    position: "relative",
-    width: "2.5rem",
-    height: "2.5rem"
-  }), n = ({
-    isCurrentMode: w,
-    isNextMode: x
-  }) => [{
-    position: "absolute",
-    left: "50%",
-    top: "50%",
-    "--tw-translate-x": "-50%",
-    transform: "translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))",
-    "--tw-translate-y": "-50%"
-  }, {
-    opacity: "0",
-    transitionProperty: "opacity",
-    transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
-    transitionDuration: "300ms",
-    animationDuration: "300ms",
-    animationTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)"
-  }, w ? {
-    opacity: "1",
-    ".group:hover &": {
-      opacity: "0"
-    }
-  } : {}, x ? {
-    ".group:hover &": {
-      opacity: "1"
-    }
-  } : {}], u = r(k)(n), g = r(S)(n), h = r(v)(n);
-  return /* @__PURE__ */ s.jsxs(p, { "aria-label": "Theme selector", className: "group", children: [
-    /* @__PURE__ */ s.jsx(u, { onClick: i, "data-mode": "system", isCurrentMode: o === t.system, isNextMode: e === t.system }),
-    /* @__PURE__ */ s.jsx(g, { onClick: i, "data-mode": "light", isCurrentMode: o === t.dark, isNextMode: e === t.dark }),
-    /* @__PURE__ */ s.jsx(h, { onClick: i, "data-mode": "dark", isCurrentMode: o === t.light, isNextMode: e === t.light })
+  ), n = () => {
+    e === t.system ? c(r ?? t.light) : c(e), y(e);
+  };
+  return /* @__PURE__ */ a.jsxs(k, { "aria-label": "Theme selector", className: "group", children: [
+    /* @__PURE__ */ a.jsx(w, { onClick: n, "data-mode": "system", $isCurrentMode: s === t.system, $isNextMode: e === t.system }),
+    /* @__PURE__ */ a.jsx(x, { onClick: n, "data-mode": "light", $isCurrentMode: s === t.dark, $isNextMode: e === t.dark }),
+    /* @__PURE__ */ a.jsx(M, { onClick: n, "data-mode": "dark", $isCurrentMode: s === t.light, $isNextMode: e === t.light })
   ] });
 };
 export {
-  D as MobileThemeSwitcher
+  j as MobileThemeSwitcher
 };

package/dist/components/index.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./MaxHeightSmoother/index.cjs.js"),n=require("./MaxWidthSmoother/index.cjs.js"),i=require("./RightDrawer/RightDrawer.cjs.js"),o=require("./RightDrawer/useRightDrawerStore.cjs.js"),c=require("./PressableDiv/PressableDiv.cjs.js"),s=require("./ContentEditor/ContentEditor.cjs.js"),a=require("./ContentSelector/ContentSelector.cjs.js"),_=require("./DictionaryEditor/DictionaryEditor.cjs.js"),D=require("./DropDown/index.cjs.js"),h=require("./LocaleSwitcherDropDown/LocaleSwitcher.cjs.js"),p=require("./ThemeSwitcherDropDown/DesktopThemeSwitcher.cjs.js"),d=require("./ThemeSwitcherDropDown/MobileThemeSwitcher.cjs.js"),m=require("./ThemeSwitcherDropDown/types.cjs.js"),u=require("./RedirectionButton/RedirectionButton.cjs.js"),w=require("./Button/index.cjs.js"),t=require("./Container/index.cjs.js"),S=require("./Footer/index.cjs.js"),q=require("./Navbar/index.cjs.js"),l=require("./ProfileDropDown/index.cjs.js"),g=require("./Avatar/index.cjs.js"),x=require("./Logo/index.cjs.js"),R=require("./IDE/CodeRender.cjs.js"),C=require("./IDE/IDE.cjs.js"),M=require("./Popover/index.cjs.js"),v=require("./MarkDownRender/index.cjs.js"),e=require("./Headers/index.cjs.js");exports.MaxHeightSmoother=r.MaxHeightSmoother;exports.MaxWidthSmoother=n.MaxWidthSmoother;exports.RightDrawer=i.RightDrawer;exports.createRightDrawerStore=o.createRightDrawerStore;exports.useRightDrawerStore=o.useRightDrawerStore;exports.PressableDiv=c.PressableDiv;exports.ContentEditor=s.ContentEditor;exports.ContentSelector=a.ContentSelector;exports.DictionaryEditor=_.DictionaryEditor;exports.DropDown=D.DropDown;exports.LocaleSwitcher=h.LocaleSwitcher;exports.DesktopThemeSwitcher=p.DesktopThemeSwitcher;exports.MobileThemeSwitcher=d.MobileThemeSwitcher;exports.Modes=m.Modes;exports.RedirectionButton=u.RedirectionButton;exports.Button=w.Button;exports.Container=t.Container;exports.getContainerStyles=t.getContainerStyles;exports.Footer=S.Footer;exports.Navbar=q.Navbar;exports.ProfileDropDown=l.ProfileDropDown;exports.Avatar=g.Avatar;exports.Logo=x.Logo;exports.Code=R.Code;exports.IDE=C.IDE;exports.Popover=M.Popover;exports.MarkdownRenderer=v.MarkdownRenderer;exports.H1=e.H1;exports.H2=e.H2;exports.H3=e.H3;exports.H4=e.H4;exports.H5=e.H5;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./MaxHeightSmoother/index.cjs.js"),n=require("./MaxWidthSmoother/index.cjs.js"),i=require("./RightDrawer/RightDrawer.cjs.js"),o=require("./RightDrawer/useRightDrawerStore.cjs.js"),c=require("./PressableDiv/PressableDiv.cjs.js"),s=require("./ContentEditor/ContentEditor.cjs.js"),a=require("./ContentSelector/ContentSelector.cjs.js"),_=require("./DictionaryEditor/DictionaryEditor.cjs.js"),D=require("./DropDown/index.cjs.js"),d=require("./LocaleSwitcherDropDown/LocaleSwitcher.cjs.js"),p=require("./ThemeSwitcherDropDown/DesktopThemeSwitcher.cjs.js"),h=require("./ThemeSwitcherDropDown/MobileThemeSwitcher.cjs.js"),m=require("./ThemeSwitcherDropDown/types.cjs.js"),u=require("./RedirectionButton/RedirectionButton.cjs.js"),w=require("./Button/index.cjs.js"),t=require("./Container/index.cjs.js"),S=require("./Footer/index.cjs.js"),q=require("./Navbar/index.cjs.js"),l=require("./ProfileDropDown/index.cjs.js"),g=require("./Avatar/index.cjs.js"),x=require("./Logo/index.cjs.js"),R=require("./IDE/CodeRender.cjs.js"),C=require("./IDE/IDE.cjs.js"),M=require("./Popover/index.cjs.js"),v=require("./MarkDownRender/index.cjs.js"),e=require("./Headers/index.cjs.js"),H=require("./Loader/index.cjs.js");exports.MaxHeightSmoother=r.MaxHeightSmoother;exports.MaxWidthSmoother=n.MaxWidthSmoother;exports.RightDrawer=i.RightDrawer;exports.createRightDrawerStore=o.createRightDrawerStore;exports.useRightDrawerStore=o.useRightDrawerStore;exports.PressableDiv=c.PressableDiv;exports.ContentEditor=s.ContentEditor;exports.ContentSelector=a.ContentSelector;exports.DictionaryEditor=_.DictionaryEditor;exports.DropDown=D.DropDown;exports.LocaleSwitcher=d.LocaleSwitcher;exports.DesktopThemeSwitcher=p.DesktopThemeSwitcher;exports.MobileThemeSwitcher=h.MobileThemeSwitcher;exports.Modes=m.Modes;exports.RedirectionButton=u.RedirectionButton;exports.Button=w.Button;exports.Container=t.Container;exports.getContainerStyles=t.getContainerStyles;exports.Footer=S.Footer;exports.Navbar=q.Navbar;exports.ProfileDropDown=l.ProfileDropDown;exports.Avatar=g.Avatar;exports.Logo=x.Logo;exports.Code=R.Code;exports.IDE=C.IDE;exports.Popover=M.Popover;exports.MarkdownRenderer=v.MarkdownRenderer;exports.H1=e.H1;exports.H2=e.H2;exports.H3=e.H3;exports.H4=e.H4;exports.H5=e.H5;exports.Loader=H.Loader;

package/dist/components/index.d.ts

@@ -20,3 +20,4 @@ export * from './IDE';
 export * from './Popover';
 export * from './MarkDownRender';
 export * from './Headers';
+export * from './Loader';

package/dist/components/index.es.js

@@ -2,18 +2,18 @@
 import { MaxHeightSmoother as e } from "./MaxHeightSmoother/index.es.js";
 import { MaxWidthSmoother as m } from "./MaxWidthSmoother/index.es.js";
 import { RightDrawer as x } from "./RightDrawer/RightDrawer.es.js";
-import { createRightDrawerStore as i, useRightDrawerStore as n } from "./RightDrawer/useRightDrawerStore.es.js";
+import { createRightDrawerStore as i, useRightDrawerStore as a } from "./RightDrawer/useRightDrawerStore.es.js";
 import { PressableDiv as h } from "./PressableDiv/PressableDiv.es.js";
 import { ContentEditor as c } from "./ContentEditor/ContentEditor.es.js";
-import { ContentSelector as S } from "./ContentSelector/ContentSelector.es.js";
+import { ContentSelector as w } from "./ContentSelector/ContentSelector.es.js";
 import { DictionaryEditor as l } from "./DictionaryEditor/DictionaryEditor.es.js";
 import { DropDown as g } from "./DropDown/index.es.js";
 import { LocaleSwitcher as C } from "./LocaleSwitcherDropDown/LocaleSwitcher.es.js";
 import { DesktopThemeSwitcher as R } from "./ThemeSwitcherDropDown/DesktopThemeSwitcher.es.js";
 import { MobileThemeSwitcher as v } from "./ThemeSwitcherDropDown/MobileThemeSwitcher.es.js";
 import { Modes as E } from "./ThemeSwitcherDropDown/types.es.js";
-import { RedirectionButton as k } from "./RedirectionButton/RedirectionButton.es.js";
-import { Button as B } from "./Button/index.es.js";
+import { RedirectionButton as P } from "./RedirectionButton/RedirectionButton.es.js";
+import { Button as y } from "./Button/index.es.js";
 import { Container as T, getContainerStyles as A } from "./Container/index.es.js";
 import { Footer as I } from "./Footer/index.es.js";
 import { Navbar as W } from "./Navbar/index.es.js";
@@ -25,13 +25,14 @@ import { IDE as V } from "./IDE/IDE.es.js";
 import { Popover as Y } from "./Popover/index.es.js";
 import { MarkdownRenderer as _ } from "./MarkDownRender/index.es.js";
 import { H1 as oo, H2 as ro, H3 as eo, H4 as to, H5 as mo } from "./Headers/index.es.js";
+import { Loader as xo } from "./Loader/index.es.js";
 export {
   G as Avatar,
-  B as Button,
+  y as Button,
   Q as Code,
   T as Container,
   c as ContentEditor,
-  S as ContentSelector,
+  w as ContentSelector,
   R as DesktopThemeSwitcher,
   l as DictionaryEditor,
   g as DropDown,
@@ -42,6 +43,7 @@ export {
   to as H4,
   mo as H5,
   V as IDE,
+  xo as Loader,
   C as LocaleSwitcher,
   K as Logo,
   _ as MarkdownRenderer,
@@ -53,9 +55,9 @@ export {
   Y as Popover,
   h as PressableDiv,
   q as ProfileDropDown,
-  k as RedirectionButton,
+  P as RedirectionButton,
   x as RightDrawer,
   i as createRightDrawerStore,
   A as getContainerStyles,
-  n as useRightDrawerStore
+  a as useRightDrawerStore
 };