@ethora/chat-component 26.7.5 → 26.7.7

package/dist/SideDrawer-DewJ-iPn.js

@@ -0,0 +1,270 @@
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import { useId as f, useRef as v } from "react";
+import { n as u, w as g, aF as m, aG as w, B as b, aH as y, v as e, aI as D, aJ as k } from "./main-C2FKeV6y.js";
+const c = 767, R = `${c}px`, z = 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;
+  ${({ $closing: r }) => r ? D : k}
+
+  /* The width belongs to the column (SidePanel), not to the panel: this is
+     in-layout furniture now, so it takes the space it is given. A hairline
+     separates it from the chat; the drop shadow it used to carry belonged to
+     a floating overlay and read as wrong once the panel stopped floating. */
+  @media (min-width: 768px) {
+    border-left: 1px solid var(--ethora-color-border, #e6e8ec);
+  }
+`, B = 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);
+`, I = 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;
+`, S = e.div`
+  display: flex;
+  align-items: center;
+  gap: var(--ethora-space-1, 4px);
+  flex: 0 0 auto;
+`, A = 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: ${R}) {
+    padding-left: var(--ethora-space-4, 16px);
+    padding-right: var(--ethora-space-4, 16px);
+  }
+`, $ = e.section`
+  display: flex;
+  flex-direction: column;
+  gap: var(--ethora-space-2, 8px);
+`, O = 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);
+`, W = 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;
+`, _ = e.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--ethora-space-1, 4px);
+  padding: var(--ethora-space-3, 12px) var(--ethora-space-4, 16px);
+`, F = e.div`
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--ethora-space-2, 8px);
+`, K = 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);
+  }
+`, G = e.div`
+  height: 1px;
+  margin: 0 var(--ethora-space-4, 16px);
+  background-color: var(--ethora-color-border, #e6e8ec);
+`, J = e.div`
+  display: flex;
+  align-items: center;
+  gap: var(--ethora-space-2, 8px);
+  width: 100%;
+  box-sizing: border-box;
+  height: 44px;
+  padding: 0 var(--ethora-space-3, 12px);
+  border-radius: var(--ethora-radius-md, 12px);
+  background: var(--ethora-color-bg-subtle, #f5f7fa);
+  color: var(--ethora-color-text-muted, #8c8c8c);
+  transition: background-color var(--ethora-motion-fast, 150ms)
+    var(--ethora-motion-ease, ease);
+
+  &:focus-within {
+    outline: 2px solid var(--ethora-color-primary, #0052cd);
+    outline-offset: 1px;
+  }
+
+  & > svg {
+    flex: 0 0 auto;
+  }
+`, V = e.input`
+  flex: 1 1 auto;
+  min-width: 0;
+  border: none;
+  background: transparent;
+  outline: none;
+  font: inherit;
+  font-size: var(--ethora-font-size-sm, 14px);
+  color: var(--ethora-color-text, #141414);
+
+  &::placeholder {
+    color: var(--ethora-color-text-muted, #8c8c8c);
+  }
+`, X = e.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`, T = 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;
+`, C = 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;
+`, E = 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;
+  }
+`, L = e.span`
+  display: flex;
+  flex-direction: column;
+  gap: var(--ethora-space-1, 4px);
+  flex: 1 1 auto;
+  min-width: 0;
+`, j = e.span`
+  flex: 0 0 auto;
+  display: inline-flex;
+  color: var(--ethora-color-text-muted, #8c8c8c);
+`, H = () => /* @__PURE__ */ o("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ o(
+  "path",
+  {
+    d: "M6 3.5L10.5 8L6 12.5",
+    stroke: "currentColor",
+    strokeWidth: "1.75",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) }), q = ({
+  label: r,
+  hint: a,
+  onClick: t
+}) => /* @__PURE__ */ i(E, { type: "button", onClick: t, children: [
+  /* @__PURE__ */ i(L, { children: [
+    /* @__PURE__ */ o(T, { children: r }),
+    a && /* @__PURE__ */ o(C, { children: a })
+  ] }),
+  /* @__PURE__ */ o(j, { "aria-hidden": "true", children: /* @__PURE__ */ o(H, {}) })
+] }), Q = ({
+  title: r,
+  onClose: a,
+  headerActions: t,
+  backLabel: l,
+  children: d
+}) => {
+  const h = u(), n = f(), s = v(null);
+  g({ onClose: a, containerRef: s });
+  const p = m(c), x = w();
+  return /* @__PURE__ */ i(
+    z,
+    {
+      ref: s,
+      role: "dialog",
+      "aria-modal": p ? !0 : void 0,
+      "aria-labelledby": n,
+      "data-testid": "side-drawer",
+      $closing: x,
+      children: [
+        /* @__PURE__ */ i(B, { children: [
+          /* @__PURE__ */ o(
+            b,
+            {
+              EndIcon: /* @__PURE__ */ o(y, {}),
+              onClick: a,
+              "aria-label": l ?? h("action.close")
+            }
+          ),
+          /* @__PURE__ */ o(I, { id: n, children: r }),
+          t && /* @__PURE__ */ o(S, { children: t })
+        ] }),
+        /* @__PURE__ */ o(A, { children: d })
+      ]
+    }
+  );
+};
+export {
+  $ as D,
+  Q as S,
+  O as a,
+  W as b,
+  G as c,
+  q as d,
+  _ as e,
+  C as f,
+  T as g,
+  F as h,
+  J as i,
+  V as j,
+  X as k,
+  K as l
+};