@ethora/chat-component 26.7.4 → 26.7.6

package/dist/SideDrawer-Dr_lkaOW.js

@@ -0,0 +1,226 @@
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import { useId as x, useRef as v } from "react";
+import { n as f, w as g, aH as u, B as w, aI as m, x as e, aJ as b } from "./main-B-8IhwaP.js";
+const c = 767, D = `${c}px`, y = e.div`
+  position: relative;
+  pointer-events: auto;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  background-color: var(--ethora-color-bg, #fff);
+  overflow: hidden;
+  ${b}
+
+  @media (min-width: 768px) {
+    width: 400px;
+    max-width: 100%;
+    border-left: 1px solid var(--ethora-color-border, #e6e8ec);
+    box-shadow: var(--ethora-shadow-lg, 0 12px 32px rgba(16, 24, 40, 0.14));
+  }
+`, R = e.header`
+  display: flex;
+  align-items: center;
+  gap: var(--ethora-space-2, 8px);
+  flex: 0 0 auto;
+  padding: var(--ethora-space-2, 8px) var(--ethora-space-3, 12px);
+  border-bottom: 1px solid var(--ethora-color-border, #e6e8ec);
+  background-color: var(--ethora-color-bg, #fff);
+`, k = e.h2`
+  flex: 1 1 auto;
+  margin: 0;
+  min-width: 0;
+  font-size: var(--ethora-font-size-lg, 18px);
+  font-weight: var(--ethora-font-weight-semibold, 600);
+  color: var(--ethora-color-text, #141414);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`, z = e.div`
+  display: flex;
+  align-items: center;
+  gap: var(--ethora-space-1, 4px);
+  flex: 0 0 auto;
+`, B = e.div`
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ethora-space-6, 24px);
+  padding: var(--ethora-space-5, 20px) var(--ethora-space-4, 16px)
+    var(--ethora-space-6, 24px);
+
+  @media (max-width: ${D}) {
+    padding-left: var(--ethora-space-4, 16px);
+    padding-right: var(--ethora-space-4, 16px);
+  }
+`, j = e.section`
+  display: flex;
+  flex-direction: column;
+  gap: var(--ethora-space-2, 8px);
+`, M = e.h3`
+  margin: 0;
+  padding: 0 var(--ethora-space-1, 4px);
+  font-size: var(--ethora-font-size-xs, 12px);
+  font-weight: var(--ethora-font-weight-semibold, 600);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--ethora-color-text-muted, #8c8c8c);
+`, P = e.div`
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: 100%;
+  border: 1px solid var(--ethora-color-border, #e6e8ec);
+  border-radius: var(--ethora-radius-md, 12px);
+  background-color: var(--ethora-color-bg, #fff);
+  overflow: hidden;
+`, W = e.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--ethora-space-1, 4px);
+  padding: var(--ethora-space-3, 12px) var(--ethora-space-4, 16px);
+`, _ = e.div`
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--ethora-space-2, 8px);
+`, $ = e.button`
+  border: none;
+  background: transparent;
+  padding: var(--ethora-space-2, 8px) 0;
+  cursor: pointer;
+  font: inherit;
+  font-size: var(--ethora-font-size-xs, 13px);
+  font-weight: var(--ethora-font-weight-medium, 500);
+  color: var(--ethora-color-primary, #0052cd);
+  align-self: center;
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--ethora-color-primary, #0052cd);
+    outline-offset: 2px;
+    border-radius: var(--ethora-radius-sm, 8px);
+  }
+`, K = e.div`
+  height: 1px;
+  margin: 0 var(--ethora-space-4, 16px);
+  background-color: var(--ethora-color-border, #e6e8ec);
+`, I = e.div`
+  font-size: var(--ethora-font-size-sm, 14px);
+  font-weight: var(--ethora-font-weight-medium, 500);
+  color: var(--ethora-color-text, #141414);
+  text-align: start;
+`, S = e.div`
+  font-size: var(--ethora-font-size-xs, 12px);
+  font-weight: var(--ethora-font-weight-regular, 400);
+  color: var(--ethora-color-text-muted, #8c8c8c);
+  text-align: start;
+  line-height: 1.4;
+`, T = e.button`
+  display: flex;
+  align-items: center;
+  gap: var(--ethora-space-3, 12px);
+  width: 100%;
+  min-height: 56px;
+  padding: var(--ethora-space-3, 12px) var(--ethora-space-4, 16px);
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  text-align: start;
+  font: inherit;
+  color: inherit;
+  transition: background-color var(--ethora-motion-fast, 150ms);
+
+  &:hover {
+    background-color: var(--ethora-color-bg-hover, #f0f2f5);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--ethora-color-primary, #0052cd);
+    outline-offset: -2px;
+  }
+`, A = e.span`
+  display: flex;
+  flex-direction: column;
+  gap: var(--ethora-space-1, 4px);
+  flex: 1 1 auto;
+  min-width: 0;
+`, C = e.span`
+  flex: 0 0 auto;
+  display: inline-flex;
+  color: var(--ethora-color-text-muted, #8c8c8c);
+`, E = () => /* @__PURE__ */ r("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ r(
+  "path",
+  {
+    d: "M6 3.5L10.5 8L6 12.5",
+    stroke: "currentColor",
+    strokeWidth: "1.75",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) }), O = ({
+  label: i,
+  hint: o,
+  onClick: a
+}) => /* @__PURE__ */ t(T, { type: "button", onClick: a, children: [
+  /* @__PURE__ */ t(A, { children: [
+    /* @__PURE__ */ r(I, { children: i }),
+    o && /* @__PURE__ */ r(S, { children: o })
+  ] }),
+  /* @__PURE__ */ r(C, { "aria-hidden": "true", children: /* @__PURE__ */ r(E, {}) })
+] }), F = ({
+  title: i,
+  onClose: o,
+  headerActions: a,
+  backLabel: d,
+  children: l
+}) => {
+  const h = f(), n = x(), s = v(null);
+  g({ onClose: o, containerRef: s });
+  const p = u(c);
+  return /* @__PURE__ */ t(
+    y,
+    {
+      ref: s,
+      role: "dialog",
+      "aria-modal": p ? !0 : void 0,
+      "aria-labelledby": n,
+      "data-testid": "side-drawer",
+      children: [
+        /* @__PURE__ */ t(R, { children: [
+          /* @__PURE__ */ r(
+            w,
+            {
+              EndIcon: /* @__PURE__ */ r(m, {}),
+              onClick: o,
+              "aria-label": d ?? h("action.close")
+            }
+          ),
+          /* @__PURE__ */ r(k, { id: n, children: i }),
+          a && /* @__PURE__ */ r(z, { children: a })
+        ] }),
+        /* @__PURE__ */ r(B, { children: l })
+      ]
+    }
+  );
+};
+export {
+  j as D,
+  F as S,
+  M as a,
+  P as b,
+  K as c,
+  O as d,
+  W as e,
+  S as f,
+  I as g,
+  $ as h,
+  _ as i
+};