@solibo/solibo-ui 1.0.29 → 1.1.1

package/dist/components/message/index.js

@@ -1,38 +1,38 @@
-import { jsx as a, jsxs as n } from "react/jsx-runtime";
+import { jsx as s, jsxs as r } from "react/jsx-runtime";
 import { t as y } from "../../classix-DG18itHa.js";
 import { Avatar as h } from "../avatar/index.js";
 import { Icon as u } from "../icon/index.js";
-import '../../assets/index15.css';const w = "_attachments_pb8yr_1", N = "_message_pb8yr_11", x = "_timestamp_pb8yr_138", S = "_preview_pb8yr_143", s = {
+import '../../assets/index15.css';const w = "_attachments_1yja9_1", N = "_message_1yja9_11", x = "_timestamp_1yja9_142", I = "_preview_1yja9_147", a = {
   attachments: w,
-  "message-group": "_message-group_pb8yr_11",
+  "message-group": "_message-group_1yja9_11",
   message: N,
   timestamp: x,
-  preview: S
+  preview: I
 }, D = ({
   appearance: c = "default",
-  attachments: r,
+  attachments: o,
   author: t,
-  authorColor: p,
-  authorImageUrl: l,
-  authorRole: d,
-  content: g,
-  iconName: _ = "info",
+  authorColor: l,
+  authorImageUrl: d,
+  authorRole: g,
+  content: p,
+  iconName: _ = "Info",
   id: v,
   preview: f,
   timestamp: i,
-  timestampText: b,
+  timestampText: j,
   type: e = "default"
 }) => {
-  const m = i ? new Date(i) : void 0, o = m ? /* @__PURE__ */ a("time", { className: s.timestamp, dateTime: m.toISOString(), children: b ?? m.toLocaleString() }) : null;
-  return /* @__PURE__ */ n("div", { className: s["message-group"], "data-message-type": e, "data-component": "message", children: [
-    t && /* @__PURE__ */ a(h, { accessibleLabel: t, color: p, imageUrl: l, name: t, role: d }),
-    e === "system" && o,
-    /* @__PURE__ */ n("div", { className: y(s.message, f && s.preview), "data-appearance": c, "data-id": v, "data-type": e, children: [
-      e == "system" && /* @__PURE__ */ a(u, { fill: !0, gap: "right", name: _ }),
-      g
+  const m = i ? new Date(i) : void 0, n = m ? /* @__PURE__ */ s("time", { className: a.timestamp, dateTime: m.toISOString(), children: j ?? m.toLocaleString() }) : null;
+  return /* @__PURE__ */ r("div", { className: a["message-group"], "data-message-type": e, "data-component": "message", children: [
+    t && /* @__PURE__ */ s(h, { accessibleLabel: t, color: l, imageUrl: d, name: t, role: g }),
+    e === "system" && n,
+    /* @__PURE__ */ r("div", { className: y(a.message, f && a.preview), "data-appearance": c, "data-id": v, "data-type": e, children: [
+      e == "system" && /* @__PURE__ */ s(u, { gap: "right", name: _ }),
+      p
     ] }),
-    r && /* @__PURE__ */ a("div", { className: s.attachments, children: r }),
-    e !== "system" && o
+    o && /* @__PURE__ */ s("div", { className: a.attachments, children: o }),
+    e !== "system" && n
   ] });
 };
 export {

package/dist/components/message/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/message/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport { IconName } from '@/components/icon/icons.ts';\n\nimport { Avatar, type AvatarColor } from '../avatar';\nimport { Icon } from '../icon';\nimport styles from './styles.module.css';\n\nexport type MessageOptions = {\n  appearance?: 'default' | 'document' | 'file';\n  attachments?: React.ReactNode;\n  author?: string;\n  authorColor?: AvatarColor;\n  authorImageUrl?: string;\n  authorRole?: string;\n  content: React.ReactNode;\n  iconName?: IconName;\n  id: string;\n  preview?: boolean;\n  timestamp?: Date | string;\n  timestampText?: React.ReactNode;\n  type?: 'default' | 'minimal' | 'system' | 'user';\n};\n\nexport const Message = ({\n  appearance = 'default',\n  attachments,\n  author,\n  authorColor,\n  authorImageUrl,\n  authorRole,\n  content,\n  iconName = 'info',\n  id,\n  preview,\n  timestamp,\n  timestampText,\n  type = 'default',\n}: MessageOptions) => {\n  const date = timestamp ? new Date(timestamp) : undefined;\n  const timestampElement = date ? (\n    <time\n      className={styles.timestamp}\n      dateTime={date.toISOString()}\n    >\n      {timestampText ?? date.toLocaleString()}\n    </time>\n  ) : null;\n\n  return (\n    <div\n      className={styles['message-group']}\n      data-message-type={type}\n    >\n      {author && (\n        <Avatar\n          accessibleLabel={author}\n          color={authorColor}\n          imageUrl={authorImageUrl}\n          name={author}\n          role={authorRole}\n        />\n      )}\n      {type === 'system' && timestampElement}\n      <div\n        className={cx(styles.message, preview && styles.preview)}\n        data-appearance={appearance}\n        data-id={id}\n        data-type={type}\n      >\n        {type == 'system' && (\n          <Icon\n            fill\n            gap='right'\n            name={iconName}\n          />\n        )}\n        {content}\n      </div>\n      {attachments && <div className={styles.attachments}>{attachments}</div>}\n      {type !== 'system' && timestampElement}\n    </div>\n  );\n};\n"],"names":["Message","appearance","attachments","author","authorColor","authorImageUrl","authorRole","content","iconName","id","preview","timestamp","timestampText","type","date","Date","undefined","timestampElement","jsx","styles","toISOString","toLocaleString","jsxs","Avatar","cx","message","Icon"],"mappings":";;;;;;;;;;GAwBaA,IAAUA,CAAC;AAAA,EACtBC,YAAAA,IAAa;AAAA,EACbC,aAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,gBAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,UAAAA,IAAW;AAAA,EACXC,IAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,eAAAA;AAAAA,EACAC,MAAAA,IAAO;AACO,MAAM;AACpB,QAAMC,IAAOH,IAAY,IAAII,KAAKJ,CAAS,IAAIK,QACzCC,IAAmBH,IACvB,gBAAAI,EAAC,QAAA,EACC,WAAWC,EAAOR,WAClB,UAAUG,EAAKM,eAEdR,UAAAA,KAAiBE,EAAKO,eAAAA,GACzB,IACE;AAEJ,SACE,gBAAAC,EAAC,SACC,WAAWH,EAAO,eAAe,GACjC,qBAAmBN,GAAK,kBAAA,WAEvBV,UAAAA;AAAAA,IAAAA,KACC,gBAAAe,EAACK,GAAA,EACC,iBAAiBpB,GACjB,OAAOC,GACP,UAAUC,GACV,MAAMF,GACN,MAAMG,EAAAA,CAAW;AAAA,IAGpBO,MAAS,YAAYI;AAAAA,IACtB,gBAAAK,EAAC,OAAA,EACC,WAAWE,EAAGL,EAAOM,SAASf,KAAWS,EAAOT,OAAO,GACvD,mBAAiBT,GACjB,WAASQ,GACT,aAAWI,GAEVA,UAAAA;AAAAA,MAAAA,KAAQ,8BACNa,GAAA,EACC,MAAI,IACJ,KAAI,SACJ,MAAMlB,EAAAA,CAAS;AAAA,MAGlBD;AAAAA,IAAAA,GACH;AAAA,IACCL,KAAe,gBAAAgB,EAAC,OAAA,EAAI,WAAWC,EAAOjB,aAAcA,UAAAA,GAAY;AAAA,IAChEW,MAAS,YAAYI;AAAAA,EAAAA,GACxB;AAEJ;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/message/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport type { IconName } from '@/components/icon';\n\nimport { Avatar, type AvatarColor } from '../avatar';\nimport { Icon } from '../icon';\nimport styles from './styles.module.css';\n\nexport type MessageOptions = {\n  appearance?: 'default' | 'document' | 'file';\n  attachments?: React.ReactNode;\n  author?: string;\n  authorColor?: AvatarColor;\n  authorImageUrl?: string;\n  authorRole?: string;\n  content: React.ReactNode;\n  iconName?: IconName;\n  id: string;\n  preview?: boolean;\n  timestamp?: Date | string;\n  timestampText?: React.ReactNode;\n  type?: 'default' | 'minimal' | 'system' | 'user';\n};\n\nexport const Message = ({\n  appearance = 'default',\n  attachments,\n  author,\n  authorColor,\n  authorImageUrl,\n  authorRole,\n  content,\n  iconName = 'Info',\n  id,\n  preview,\n  timestamp,\n  timestampText,\n  type = 'default',\n}: MessageOptions) => {\n  const date = timestamp ? new Date(timestamp) : undefined;\n  const timestampElement = date ? (\n    <time\n      className={styles.timestamp}\n      dateTime={date.toISOString()}\n    >\n      {timestampText ?? date.toLocaleString()}\n    </time>\n  ) : null;\n\n  return (\n    <div\n      className={styles['message-group']}\n      data-message-type={type}\n    >\n      {author && (\n        <Avatar\n          accessibleLabel={author}\n          color={authorColor}\n          imageUrl={authorImageUrl}\n          name={author}\n          role={authorRole}\n        />\n      )}\n      {type === 'system' && timestampElement}\n      <div\n        className={cx(styles.message, preview && styles.preview)}\n        data-appearance={appearance}\n        data-id={id}\n        data-type={type}\n      >\n        {type == 'system' && (\n          <Icon\n            gap='right'\n            name={iconName}\n          />\n        )}\n        {content}\n      </div>\n      {attachments && <div className={styles.attachments}>{attachments}</div>}\n      {type !== 'system' && timestampElement}\n    </div>\n  );\n};\n"],"names":["Message","appearance","attachments","author","authorColor","authorImageUrl","authorRole","content","iconName","id","preview","timestamp","timestampText","type","date","Date","undefined","timestampElement","jsx","styles","toISOString","toLocaleString","jsxs","Avatar","cx","message","Icon"],"mappings":";;;;;;;;;;GAwBaA,IAAUA,CAAC;AAAA,EACtBC,YAAAA,IAAa;AAAA,EACbC,aAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,gBAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,UAAAA,IAAW;AAAA,EACXC,IAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,eAAAA;AAAAA,EACAC,MAAAA,IAAO;AACO,MAAM;AACpB,QAAMC,IAAOH,IAAY,IAAII,KAAKJ,CAAS,IAAIK,QACzCC,IAAmBH,IACvB,gBAAAI,EAAC,QAAA,EACC,WAAWC,EAAOR,WAClB,UAAUG,EAAKM,eAEdR,UAAAA,KAAiBE,EAAKO,eAAAA,GACzB,IACE;AAEJ,SACE,gBAAAC,EAAC,SACC,WAAWH,EAAO,eAAe,GACjC,qBAAmBN,GAAK,kBAAA,WAEvBV,UAAAA;AAAAA,IAAAA,KACC,gBAAAe,EAACK,GAAA,EACC,iBAAiBpB,GACjB,OAAOC,GACP,UAAUC,GACV,MAAMF,GACN,MAAMG,EAAAA,CAAW;AAAA,IAGpBO,MAAS,YAAYI;AAAAA,IACtB,gBAAAK,EAAC,OAAA,EACC,WAAWE,EAAGL,EAAOM,SAASf,KAAWS,EAAOT,OAAO,GACvD,mBAAiBT,GACjB,WAASQ,GACT,aAAWI,GAEVA,UAAAA;AAAAA,MAAAA,KAAQ,YACP,gBAAAK,EAACQ,GAAA,EACC,KAAI,SACJ,MAAMlB,GAAS;AAAA,MAGlBD;AAAAA,IAAAA,GACH;AAAA,IACCL,KAAe,gBAAAgB,EAAC,OAAA,EAAI,WAAWC,EAAOjB,aAAcA,UAAAA,GAAY;AAAA,IAChEW,MAAS,YAAYI;AAAAA,EAAAA,GACxB;AAEJ;"}

package/dist/components/messages/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index13.css');const s=require("react/jsx-runtime"),w=require("../../classix-5H4IWnMA.cjs"),c=require("react"),E=require("../editor/index.cjs"),L=require("../list/index.cjs"),T=require("../tooltip/index.cjs"),H=require("../message/index.cjs"),N="_messages_pqp89_1",O="_fill_pqp89_20",f={messages:N,fill:O},P=({fill:_=!1,files:n,handleUpload:g,inlineImages:t,maxEditorRows:q=5,message:i="",messages:o,minEditorRows:x=1,onChange:j,onFilesChange:r,onInlineImagesChange:y,onSubmit:R,placeholder:b,sending:v,tooltipLabel:l})=>{var p;const a=c.useRef(null),[M,S]=c.useState([]),u=n??M,d=(p=o[o.length-1])==null?void 0:p.id,h=i.replace(/<[^>]*>/g,"").replace(/&nbsp;/g," ").trim()==="";return c.useLayoutEffect(()=>{var m;const e=(m=a.current)==null?void 0:m.querySelector("[data-message-list]");!e||d===void 0||(e.scrollTop=e.scrollHeight)},[d]),s.jsxs("div",{className:w.t(f.messages,_&&f.fill),"data-component":"messages",ref:a,children:[s.jsx(L.List,{"data-message-list":!0,children:o.map(e=>s.jsx(H.Message,{...e},e.id))}),l&&s.jsx(T.Tooltip,{variant:"static",children:l}),s.jsx(E.Editor,{autofocus:!0,content:i,disabled:v||h&&u.length===0&&!(t!=null&&t.length),files:u,inlineImages:t,maxRows:q,minRows:x,onChange:j,onFilesChange:e=>{n===void 0&&S(e),r==null||r(e)},onInlineImagesChange:y,onSubmit:R,onUpload:g,placeholder:b,submitLabel:"Send message"})]})};exports.Messages=P;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index13.css');const r=require("react/jsx-runtime"),A=require("../../classix-5H4IWnMA.cjs"),n=require("react"),D=require("../editor/index.cjs"),G=require("../list/index.cjs"),I=require("../tooltip/index.cjs"),J=require("../message/index.cjs"),K="_messages_pqp89_1",Q="_fill_pqp89_20",j={messages:K,fill:Q},V=({fill:M=!1,files:u,handleUpload:S,inlineImages:c,maxEditorRows:y=5,message:d="",messages:l,minEditorRows:b=1,onChange:Y,onFilesChange:a,onInlineImagesChange:H,onSubmit:B,placeholder:N,sending:O,tooltipLabel:m})=>{var g;const f=n.useRef(null),o=n.useRef(!0),v=n.useRef(!1),[P,U]=n.useState([]),h=u??P,p=(g=l[l.length-1])==null?void 0:g.id,W=d.replace(/<[^>]*>/g,"").replace(/&nbsp;/g," ").trim()==="";return n.useLayoutEffect(()=>{var w;const e=(w=f.current)==null?void 0:w.querySelector("[data-message-list]");if(!e||p===void 0)return;const k=e.scrollHeight-e.scrollTop-e.clientHeight<450,L=!v.current||k;o.current=L,v.current=!0;const z=window.setTimeout(()=>{o.current=!1},5e3),_=()=>{e.scrollTop=e.scrollHeight};L&&_();const E=t=>{o.current&&t.target instanceof HTMLImageElement&&_()},T=t=>{t.deltaY<0&&(o.current=!1)};let i;const q=t=>{var s;i=(s=t.touches[0])==null?void 0:s.clientY},x=t=>{var R;const s=(R=t.touches[0])==null?void 0:R.clientY;s!==void 0&&i!==void 0&&s>i&&(o.current=!1),i=s};return e.addEventListener("load",E,!0),e.addEventListener("wheel",T,{passive:!0}),e.addEventListener("touchstart",q,{passive:!0}),e.addEventListener("touchmove",x,{passive:!0}),()=>{window.clearTimeout(z),e.removeEventListener("load",E,!0),e.removeEventListener("wheel",T),e.removeEventListener("touchstart",q),e.removeEventListener("touchmove",x)}},[p]),r.jsxs("div",{className:A.t(j.messages,M&&j.fill),"data-component":"messages",ref:f,children:[r.jsx(G.List,{"data-message-list":!0,children:l.map(e=>r.jsx(J.Message,{...e},e.id))}),m&&r.jsx(I.Tooltip,{variant:"static",children:m}),r.jsx(D.Editor,{autofocus:!0,content:d,disabled:O||W&&h.length===0&&!(c!=null&&c.length),files:h,inlineImages:c,maxRows:y,minRows:b,onChange:Y,onFilesChange:e=>{u===void 0&&U(e),a==null||a(e)},onInlineImagesChange:H,onSubmit:B,onUpload:S,placeholder:N,submitLabel:"Send message"})]})};exports.Messages=V;
 //# sourceMappingURL=index.cjs.map

package/dist/components/messages/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/messages/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useLayoutEffect, useRef, useState } from 'react';\n\nimport { Editor, type PendingInlineImage } from '@/components/editor';\nimport { List } from '@/components/list';\nimport { Tooltip } from '@/components/tooltip';\n\nimport { Message, type MessageOptions } from '../message';\nimport styles from './styles.module.css';\n\nexport type MessageItem = MessageOptions;\n\nexport type MessagesProps = {\n  fill?: boolean;\n  files?: readonly File[];\n  handleUpload: (files: FileList) => Promise<void> | void;\n  inlineImages?: readonly PendingInlineImage[];\n  maxEditorRows?: number;\n  message: string;\n  messages: MessageItem[];\n  minEditorRows?: number;\n  onChange: (content: string) => void;\n  onFilesChange?: (files: File[]) => void;\n  onInlineImagesChange?: (images: PendingInlineImage[]) => void;\n  onSubmit: () => Promise<void> | void;\n  placeholder?: string;\n  sending: boolean;\n  tooltipLabel?: string;\n};\n\nexport const Messages = ({\n  fill = false,\n  files,\n  handleUpload,\n  inlineImages,\n  maxEditorRows = 5,\n  message = '',\n  messages,\n  minEditorRows = 1,\n  onChange,\n  onFilesChange,\n  onInlineImagesChange,\n  onSubmit,\n  placeholder,\n  sending,\n  tooltipLabel,\n}: MessagesProps) => {\n  const messagesRef = useRef<HTMLDivElement>(null);\n  const [internalFiles, setInternalFiles] = useState<File[]>([]);\n  const queuedFiles = files ?? internalFiles;\n  const newestMessageId = messages[messages.length - 1]?.id;\n  const messageIsEmpty =\n    message\n      .replace(/<[^>]*>/g, '')\n      .replace(/&nbsp;/g, ' ')\n      .trim() === '';\n\n  useLayoutEffect(() => {\n    const messageList = messagesRef.current?.querySelector<HTMLElement>('[data-message-list]');\n    if (!messageList || newestMessageId === undefined) return;\n\n    messageList.scrollTop = messageList.scrollHeight;\n  }, [newestMessageId]);\n\n  return (\n    <div\n      className={cx(styles.messages, fill && styles.fill)}\n      data-component='messages'\n      ref={messagesRef}\n    >\n      <List data-message-list>\n        {messages.map((message) => (\n          <Message\n            key={message.id}\n            {...message}\n          />\n        ))}\n      </List>\n      {tooltipLabel && <Tooltip variant='static'>{tooltipLabel}</Tooltip>}\n      <Editor\n        autofocus\n        content={message}\n        disabled={\n          sending || (messageIsEmpty && queuedFiles.length === 0 && !inlineImages?.length)\n        }\n        files={queuedFiles}\n        inlineImages={inlineImages}\n        maxRows={maxEditorRows}\n        minRows={minEditorRows}\n        onChange={onChange}\n        onFilesChange={(nextFiles) => {\n          if (files === undefined) setInternalFiles(nextFiles);\n          onFilesChange?.(nextFiles);\n        }}\n        onInlineImagesChange={onInlineImagesChange}\n        onSubmit={onSubmit}\n        onUpload={handleUpload}\n        placeholder={placeholder}\n        submitLabel='Send message'\n      />\n    </div>\n  );\n};\n"],"names":["Messages","fill","files","handleUpload","inlineImages","maxEditorRows","message","messages","minEditorRows","onChange","onFilesChange","onInlineImagesChange","onSubmit","placeholder","sending","tooltipLabel","messagesRef","useRef","internalFiles","setInternalFiles","useState","queuedFiles","newestMessageId","length","id","messageIsEmpty","replace","trim","useLayoutEffect","messageList","current","querySelector","undefined","scrollTop","scrollHeight","jsxs","cx","styles","jsx","List","map","Message","Tooltip","Editor","nextFiles"],"mappings":"mXA8BaA,EAAWA,CAAC,CACvBC,KAAAA,EAAO,GACPC,MAAAA,EACAC,aAAAA,EACAC,aAAAA,EACAC,cAAAA,EAAgB,EAChBC,QAAAA,EAAU,GACVC,SAAAA,EACAC,cAAAA,EAAgB,EAChBC,SAAAA,EACAC,cAAAA,EACAC,qBAAAA,EACAC,SAAAA,EACAC,YAAAA,EACAC,QAAAA,EACAC,aAAAA,CACa,IAAM,OACnB,MAAMC,EAAcC,EAAAA,OAAuB,IAAI,EACzC,CAACC,EAAeC,CAAgB,EAAIC,EAAAA,SAAiB,CAAA,CAAE,EACvDC,EAAcnB,GAASgB,EACvBI,GAAkBf,EAAAA,EAASA,EAASgB,OAAS,CAAC,IAA5BhB,YAAAA,EAA+BiB,GACjDC,EACJnB,EACGoB,QAAQ,WAAY,EAAE,EACtBA,QAAQ,UAAW,GAAG,EACtBC,KAAAA,IAAW,GAEhBC,OAAAA,EAAAA,gBAAgB,IAAM,OACpB,MAAMC,GAAcb,EAAAA,EAAYc,UAAZd,YAAAA,EAAqBe,cAA2B,uBAChE,CAACF,GAAeP,IAAoBU,SAExCH,EAAYI,UAAYJ,EAAYK,aACtC,EAAG,CAACZ,CAAe,CAAC,EAGlBa,EAAAA,KAAC,MAAA,CACC,UAAWC,EAAAA,EAAGC,EAAO9B,SAAUN,GAAQoC,EAAOpC,IAAI,EAClD,iBAAe,WACf,IAAKe,EAEL,SAAA,CAAAsB,EAAAA,IAACC,EAAAA,KAAA,CAAK,oBAAiB,GACpBhC,SAAAA,EAASiC,IAAKlC,GACbgC,EAAAA,IAACG,EAAAA,QAAA,CAEC,GAAInC,CAAAA,EADCA,EAAQkB,EACD,CAEf,EACH,EACCT,GAAgBuB,EAAAA,IAACI,UAAA,CAAQ,QAAQ,SAAU3B,SAAAA,EAAa,EACzDuB,EAAAA,IAACK,EAAAA,OAAA,CACC,UAAS,GACT,QAASrC,EACT,SACEQ,GAAYW,GAAkBJ,EAAYE,SAAW,GAAK,EAACnB,GAAAA,MAAAA,EAAcmB,QAE3E,MAAOF,EACP,aAAAjB,EACA,QAASC,EACT,QAASG,EACT,SAAAC,EACA,cAAgBmC,GAAc,CACxB1C,IAAU8B,QAAWb,EAAiByB,CAAS,EACnDlC,GAAAA,MAAAA,EAAgBkC,EAClB,EACA,qBAAAjC,EACA,SAAAC,EACA,SAAUT,EACV,YAAAU,EACA,YAAY,cAAA,CAAc,CAAA,EAE9B,CAEJ"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/messages/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useLayoutEffect, useRef, useState } from 'react';\n\nimport { Editor, type PendingInlineImage } from '@/components/editor';\nimport { List } from '@/components/list';\nimport { Tooltip } from '@/components/tooltip';\n\nimport { Message, type MessageOptions } from '../message';\nimport styles from './styles.module.css';\n\nexport type MessageItem = MessageOptions;\n\nexport type MessagesProps = {\n  fill?: boolean;\n  files?: readonly File[];\n  handleUpload: (files: FileList) => Promise<void> | void;\n  inlineImages?: readonly PendingInlineImage[];\n  maxEditorRows?: number;\n  message: string;\n  messages: MessageItem[];\n  minEditorRows?: number;\n  onChange: (content: string) => void;\n  onFilesChange?: (files: File[]) => void;\n  onInlineImagesChange?: (images: PendingInlineImage[]) => void;\n  onSubmit: () => Promise<void> | void;\n  placeholder?: string;\n  sending: boolean;\n  tooltipLabel?: string;\n};\n\nexport const Messages = ({\n  fill = false,\n  files,\n  handleUpload,\n  inlineImages,\n  maxEditorRows = 5,\n  message = '',\n  messages,\n  minEditorRows = 1,\n  onChange,\n  onFilesChange,\n  onInlineImagesChange,\n  onSubmit,\n  placeholder,\n  sending,\n  tooltipLabel,\n}: MessagesProps) => {\n  const messagesRef = useRef<HTMLDivElement>(null);\n  const followImageLoadsRef = useRef(true);\n  const hasLoadedRef = useRef(false);\n  const [internalFiles, setInternalFiles] = useState<File[]>([]);\n  const queuedFiles = files ?? internalFiles;\n  const newestMessageId = messages[messages.length - 1]?.id;\n  const messageIsEmpty =\n    message\n      .replace(/<[^>]*>/g, '')\n      .replace(/&nbsp;/g, ' ')\n      .trim() === '';\n\n  useLayoutEffect(() => {\n    const messageList = messagesRef.current?.querySelector<HTMLElement>('[data-message-list]');\n    if (!messageList || newestMessageId === undefined) return;\n\n    const isNearBottom =\n      messageList.scrollHeight - messageList.scrollTop - messageList.clientHeight <\n      450; /* 🌝 preview image max height plus allowance */\n    const shouldScrollToBottom = !hasLoadedRef.current || isNearBottom;\n\n    followImageLoadsRef.current = shouldScrollToBottom;\n    hasLoadedRef.current = true;\n\n    const timeout = window.setTimeout(() => {\n      followImageLoadsRef.current = false;\n    }, 5000);\n\n    const scrollToBottom = () => {\n      messageList.scrollTop = messageList.scrollHeight;\n    };\n\n    if (shouldScrollToBottom) scrollToBottom();\n\n    const handleLoad = (event: Event) => {\n      if (followImageLoadsRef.current && event.target instanceof HTMLImageElement) {\n        scrollToBottom();\n      }\n    };\n\n    const handleWheel = (event: WheelEvent) => {\n      if (event.deltaY < 0) {\n        followImageLoadsRef.current = false;\n      }\n    };\n\n    let previousTouchY: number | undefined;\n\n    const handleTouchStart = (event: TouchEvent) => {\n      previousTouchY = event.touches[0]?.clientY;\n    };\n\n    const handleTouchMove = (event: TouchEvent) => {\n      const touchY = event.touches[0]?.clientY;\n      if (touchY !== undefined && previousTouchY !== undefined && touchY > previousTouchY) {\n        followImageLoadsRef.current = false;\n      }\n      previousTouchY = touchY;\n    };\n\n    messageList.addEventListener('load', handleLoad, true);\n    messageList.addEventListener('wheel', handleWheel, { passive: true });\n    messageList.addEventListener('touchstart', handleTouchStart, { passive: true });\n    messageList.addEventListener('touchmove', handleTouchMove, { passive: true });\n\n    return () => {\n      window.clearTimeout(timeout);\n      messageList.removeEventListener('load', handleLoad, true);\n      messageList.removeEventListener('wheel', handleWheel);\n      messageList.removeEventListener('touchstart', handleTouchStart);\n      messageList.removeEventListener('touchmove', handleTouchMove);\n    };\n  }, [newestMessageId]);\n\n  return (\n    <div\n      className={cx(styles.messages, fill && styles.fill)}\n      data-component='messages'\n      ref={messagesRef}\n    >\n      <List data-message-list>\n        {messages.map((message) => (\n          <Message\n            key={message.id}\n            {...message}\n          />\n        ))}\n      </List>\n      {tooltipLabel && <Tooltip variant='static'>{tooltipLabel}</Tooltip>}\n      <Editor\n        autofocus\n        content={message}\n        disabled={sending || (messageIsEmpty && queuedFiles.length === 0 && !inlineImages?.length)}\n        files={queuedFiles}\n        inlineImages={inlineImages}\n        maxRows={maxEditorRows}\n        minRows={minEditorRows}\n        onChange={onChange}\n        onFilesChange={(nextFiles) => {\n          if (files === undefined) setInternalFiles(nextFiles);\n          onFilesChange?.(nextFiles);\n        }}\n        onInlineImagesChange={onInlineImagesChange}\n        onSubmit={onSubmit}\n        onUpload={handleUpload}\n        placeholder={placeholder}\n        submitLabel='Send message'\n      />\n    </div>\n  );\n};\n"],"names":["Messages","fill","files","handleUpload","inlineImages","maxEditorRows","message","messages","minEditorRows","onChange","onFilesChange","onInlineImagesChange","onSubmit","placeholder","sending","tooltipLabel","messagesRef","useRef","followImageLoadsRef","hasLoadedRef","internalFiles","setInternalFiles","useState","queuedFiles","newestMessageId","length","id","messageIsEmpty","replace","trim","useLayoutEffect","messageList","current","querySelector","undefined","isNearBottom","scrollHeight","scrollTop","clientHeight","shouldScrollToBottom","timeout","window","setTimeout","scrollToBottom","handleLoad","event","target","HTMLImageElement","handleWheel","deltaY","previousTouchY","handleTouchStart","touches","clientY","handleTouchMove","touchY","addEventListener","passive","clearTimeout","removeEventListener","jsxs","cx","styles","jsx","List","map","Message","Tooltip","Editor","nextFiles"],"mappings":"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"}

package/dist/components/messages/index.js

@@ -1,45 +1,76 @@
-import { jsxs as L, jsx as e } from "react/jsx-runtime";
-import { t as M } from "../../classix-DG18itHa.js";
-import { useRef as S, useState as j, useLayoutEffect as T } from "react";
-import { Editor as H } from "../editor/index.js";
-import { List as N } from "../list/index.js";
-import { Tooltip as U } from "../tooltip/index.js";
-import { Message as k } from "../message/index.js";
-import '../../assets/index13.css';const z = "_messages_pqp89_1", A = "_fill_pqp89_20", n = {
-  messages: z,
-  fill: A
-}, Q = ({
-  fill: u = !1,
-  files: l,
-  handleUpload: g,
-  inlineImages: t,
-  maxEditorRows: _ = 5,
-  message: a = "",
-  messages: o,
-  minEditorRows: h = 1,
-  onChange: q,
-  onFilesChange: r,
-  onInlineImagesChange: v,
-  onSubmit: y,
-  placeholder: R,
-  sending: b,
-  tooltipLabel: c
+import { jsxs as G, jsx as c } from "react/jsx-runtime";
+import { t as I } from "../../classix-DG18itHa.js";
+import { useRef as i, useState as J, useLayoutEffect as K } from "react";
+import { Editor as O } from "../editor/index.js";
+import { List as P } from "../list/index.js";
+import { Tooltip as Q } from "../tooltip/index.js";
+import { Message as V } from "../message/index.js";
+import '../../assets/index13.css';const X = "_messages_pqp89_1", Z = "_fill_pqp89_20", Y = {
+  messages: X,
+  fill: Z
+}, re = ({
+  fill: q = !1,
+  files: u,
+  handleUpload: y,
+  inlineImages: r,
+  maxEditorRows: H = 5,
+  message: d = "",
+  messages: l,
+  minEditorRows: b = 1,
+  onChange: x,
+  onFilesChange: a,
+  onInlineImagesChange: B,
+  onSubmit: j,
+  placeholder: N,
+  sending: U,
+  tooltipLabel: m
 }) => {
-  var p;
-  const m = S(null), [w, x] = j([]), i = l ?? w, f = (p = o[o.length - 1]) == null ? void 0 : p.id, E = a.replace(/<[^>]*>/g, "").replace(/&nbsp;/g, " ").trim() === "";
-  return T(() => {
-    var d;
-    const s = (d = m.current) == null ? void 0 : d.querySelector("[data-message-list]");
-    !s || f === void 0 || (s.scrollTop = s.scrollHeight);
-  }, [f]), /* @__PURE__ */ L("div", { className: M(n.messages, u && n.fill), "data-component": "messages", ref: m, children: [
-    /* @__PURE__ */ e(N, { "data-message-list": !0, children: o.map((s) => /* @__PURE__ */ e(k, { ...s }, s.id)) }),
-    c && /* @__PURE__ */ e(U, { variant: "static", children: c }),
-    /* @__PURE__ */ e(H, { autofocus: !0, content: a, disabled: b || E && i.length === 0 && !(t != null && t.length), files: i, inlineImages: t, maxRows: _, minRows: h, onChange: q, onFilesChange: (s) => {
-      l === void 0 && x(s), r == null || r(s);
-    }, onInlineImagesChange: v, onSubmit: y, onUpload: g, placeholder: R, submitLabel: "Send message" })
+  var L;
+  const f = i(null), o = i(!0), h = i(!1), [W, k] = J([]), p = u ?? W, v = (L = l[l.length - 1]) == null ? void 0 : L.id, z = d.replace(/<[^>]*>/g, "").replace(/&nbsp;/g, " ").trim() === "";
+  return K(() => {
+    var M;
+    const e = (M = f.current) == null ? void 0 : M.querySelector("[data-message-list]");
+    if (!e || v === void 0) return;
+    const A = e.scrollHeight - e.scrollTop - e.clientHeight < 450, g = !h.current || A;
+    o.current = g, h.current = !0;
+    const D = window.setTimeout(() => {
+      o.current = !1;
+    }, 5e3), E = () => {
+      e.scrollTop = e.scrollHeight;
+    };
+    g && E();
+    const T = (t) => {
+      o.current && t.target instanceof HTMLImageElement && E();
+    }, w = (t) => {
+      t.deltaY < 0 && (o.current = !1);
+    };
+    let n;
+    const R = (t) => {
+      var s;
+      n = (s = t.touches[0]) == null ? void 0 : s.clientY;
+    }, _ = (t) => {
+      var S;
+      const s = (S = t.touches[0]) == null ? void 0 : S.clientY;
+      s !== void 0 && n !== void 0 && s > n && (o.current = !1), n = s;
+    };
+    return e.addEventListener("load", T, !0), e.addEventListener("wheel", w, {
+      passive: !0
+    }), e.addEventListener("touchstart", R, {
+      passive: !0
+    }), e.addEventListener("touchmove", _, {
+      passive: !0
+    }), () => {
+      window.clearTimeout(D), e.removeEventListener("load", T, !0), e.removeEventListener("wheel", w), e.removeEventListener("touchstart", R), e.removeEventListener("touchmove", _);
+    };
+  }, [v]), /* @__PURE__ */ G("div", { className: I(Y.messages, q && Y.fill), "data-component": "messages", ref: f, children: [
+    /* @__PURE__ */ c(P, { "data-message-list": !0, children: l.map((e) => /* @__PURE__ */ c(V, { ...e }, e.id)) }),
+    m && /* @__PURE__ */ c(Q, { variant: "static", children: m }),
+    /* @__PURE__ */ c(O, { autofocus: !0, content: d, disabled: U || z && p.length === 0 && !(r != null && r.length), files: p, inlineImages: r, maxRows: H, minRows: b, onChange: x, onFilesChange: (e) => {
+      u === void 0 && k(e), a == null || a(e);
+    }, onInlineImagesChange: B, onSubmit: j, onUpload: y, placeholder: N, submitLabel: "Send message" })
   ] });
 };
 export {
-  Q as Messages
+  re as Messages
 };
 //# sourceMappingURL=index.js.map

package/dist/components/messages/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/messages/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useLayoutEffect, useRef, useState } from 'react';\n\nimport { Editor, type PendingInlineImage } from '@/components/editor';\nimport { List } from '@/components/list';\nimport { Tooltip } from '@/components/tooltip';\n\nimport { Message, type MessageOptions } from '../message';\nimport styles from './styles.module.css';\n\nexport type MessageItem = MessageOptions;\n\nexport type MessagesProps = {\n  fill?: boolean;\n  files?: readonly File[];\n  handleUpload: (files: FileList) => Promise<void> | void;\n  inlineImages?: readonly PendingInlineImage[];\n  maxEditorRows?: number;\n  message: string;\n  messages: MessageItem[];\n  minEditorRows?: number;\n  onChange: (content: string) => void;\n  onFilesChange?: (files: File[]) => void;\n  onInlineImagesChange?: (images: PendingInlineImage[]) => void;\n  onSubmit: () => Promise<void> | void;\n  placeholder?: string;\n  sending: boolean;\n  tooltipLabel?: string;\n};\n\nexport const Messages = ({\n  fill = false,\n  files,\n  handleUpload,\n  inlineImages,\n  maxEditorRows = 5,\n  message = '',\n  messages,\n  minEditorRows = 1,\n  onChange,\n  onFilesChange,\n  onInlineImagesChange,\n  onSubmit,\n  placeholder,\n  sending,\n  tooltipLabel,\n}: MessagesProps) => {\n  const messagesRef = useRef<HTMLDivElement>(null);\n  const [internalFiles, setInternalFiles] = useState<File[]>([]);\n  const queuedFiles = files ?? internalFiles;\n  const newestMessageId = messages[messages.length - 1]?.id;\n  const messageIsEmpty =\n    message\n      .replace(/<[^>]*>/g, '')\n      .replace(/&nbsp;/g, ' ')\n      .trim() === '';\n\n  useLayoutEffect(() => {\n    const messageList = messagesRef.current?.querySelector<HTMLElement>('[data-message-list]');\n    if (!messageList || newestMessageId === undefined) return;\n\n    messageList.scrollTop = messageList.scrollHeight;\n  }, [newestMessageId]);\n\n  return (\n    <div\n      className={cx(styles.messages, fill && styles.fill)}\n      data-component='messages'\n      ref={messagesRef}\n    >\n      <List data-message-list>\n        {messages.map((message) => (\n          <Message\n            key={message.id}\n            {...message}\n          />\n        ))}\n      </List>\n      {tooltipLabel && <Tooltip variant='static'>{tooltipLabel}</Tooltip>}\n      <Editor\n        autofocus\n        content={message}\n        disabled={\n          sending || (messageIsEmpty && queuedFiles.length === 0 && !inlineImages?.length)\n        }\n        files={queuedFiles}\n        inlineImages={inlineImages}\n        maxRows={maxEditorRows}\n        minRows={minEditorRows}\n        onChange={onChange}\n        onFilesChange={(nextFiles) => {\n          if (files === undefined) setInternalFiles(nextFiles);\n          onFilesChange?.(nextFiles);\n        }}\n        onInlineImagesChange={onInlineImagesChange}\n        onSubmit={onSubmit}\n        onUpload={handleUpload}\n        placeholder={placeholder}\n        submitLabel='Send message'\n      />\n    </div>\n  );\n};\n"],"names":["Messages","fill","files","handleUpload","inlineImages","maxEditorRows","message","messages","minEditorRows","onChange","onFilesChange","onInlineImagesChange","onSubmit","placeholder","sending","tooltipLabel","messagesRef","useRef","internalFiles","setInternalFiles","useState","queuedFiles","newestMessageId","length","id","messageIsEmpty","replace","trim","useLayoutEffect","messageList","current","querySelector","undefined","scrollTop","scrollHeight","jsxs","cx","styles","jsx","List","map","Message","Tooltip","Editor","nextFiles"],"mappings":";;;;;;;;;;GA8BaA,IAAWA,CAAC;AAAA,EACvBC,MAAAA,IAAO;AAAA,EACPC,OAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,eAAAA,IAAgB;AAAA,EAChBC,SAAAA,IAAU;AAAA,EACVC,UAAAA;AAAAA,EACAC,eAAAA,IAAgB;AAAA,EAChBC,UAAAA;AAAAA,EACAC,eAAAA;AAAAA,EACAC,sBAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,cAAAA;AACa,MAAM;;AACnB,QAAMC,IAAcC,EAAuB,IAAI,GACzC,CAACC,GAAeC,CAAgB,IAAIC,EAAiB,CAAA,CAAE,GACvDC,IAAcnB,KAASgB,GACvBI,KAAkBf,IAAAA,EAASA,EAASgB,SAAS,CAAC,MAA5BhB,gBAAAA,EAA+BiB,IACjDC,IACJnB,EACGoB,QAAQ,YAAY,EAAE,EACtBA,QAAQ,WAAW,GAAG,EACtBC,KAAAA,MAAW;AAEhBC,SAAAA,EAAgB,MAAM;;AACpB,UAAMC,KAAcb,IAAAA,EAAYc,YAAZd,gBAAAA,EAAqBe,cAA2B;AACpE,IAAI,CAACF,KAAeP,MAAoBU,WAExCH,EAAYI,YAAYJ,EAAYK;AAAAA,EACtC,GAAG,CAACZ,CAAe,CAAC,GAGlB,gBAAAa,EAAC,OAAA,EACC,WAAWC,EAAGC,EAAO9B,UAAUN,KAAQoC,EAAOpC,IAAI,GAClD,kBAAe,YACf,KAAKe,GAEL,UAAA;AAAA,IAAA,gBAAAsB,EAACC,GAAA,EAAK,qBAAiB,IACpBhC,UAAAA,EAASiC,IAAKlC,CAAAA,MACb,gBAAAgC,EAACG,GAAA,EAEC,GAAInC,EAAAA,GADCA,EAAQkB,EACD,CAEf,GACH;AAAA,IACCT,KAAgB,gBAAAuB,EAACI,GAAA,EAAQ,SAAQ,UAAU3B,UAAAA,GAAa;AAAA,IACzD,gBAAAuB,EAACK,GAAA,EACC,WAAS,IACT,SAASrC,GACT,UACEQ,KAAYW,KAAkBJ,EAAYE,WAAW,KAAK,EAACnB,KAAAA,QAAAA,EAAcmB,SAE3E,OAAOF,GACP,cAAAjB,GACA,SAASC,GACT,SAASG,GACT,UAAAC,GACA,eAAgBmC,CAAAA,MAAc;AAC5B,MAAI1C,MAAU8B,UAAWb,EAAiByB,CAAS,GACnDlC,KAAAA,QAAAA,EAAgBkC;AAAAA,IAClB,GACA,sBAAAjC,GACA,UAAAC,GACA,UAAUT,GACV,aAAAU,GACA,aAAY,eAAA,CAAc;AAAA,EAAA,GAE9B;AAEJ;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/messages/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useLayoutEffect, useRef, useState } from 'react';\n\nimport { Editor, type PendingInlineImage } from '@/components/editor';\nimport { List } from '@/components/list';\nimport { Tooltip } from '@/components/tooltip';\n\nimport { Message, type MessageOptions } from '../message';\nimport styles from './styles.module.css';\n\nexport type MessageItem = MessageOptions;\n\nexport type MessagesProps = {\n  fill?: boolean;\n  files?: readonly File[];\n  handleUpload: (files: FileList) => Promise<void> | void;\n  inlineImages?: readonly PendingInlineImage[];\n  maxEditorRows?: number;\n  message: string;\n  messages: MessageItem[];\n  minEditorRows?: number;\n  onChange: (content: string) => void;\n  onFilesChange?: (files: File[]) => void;\n  onInlineImagesChange?: (images: PendingInlineImage[]) => void;\n  onSubmit: () => Promise<void> | void;\n  placeholder?: string;\n  sending: boolean;\n  tooltipLabel?: string;\n};\n\nexport const Messages = ({\n  fill = false,\n  files,\n  handleUpload,\n  inlineImages,\n  maxEditorRows = 5,\n  message = '',\n  messages,\n  minEditorRows = 1,\n  onChange,\n  onFilesChange,\n  onInlineImagesChange,\n  onSubmit,\n  placeholder,\n  sending,\n  tooltipLabel,\n}: MessagesProps) => {\n  const messagesRef = useRef<HTMLDivElement>(null);\n  const followImageLoadsRef = useRef(true);\n  const hasLoadedRef = useRef(false);\n  const [internalFiles, setInternalFiles] = useState<File[]>([]);\n  const queuedFiles = files ?? internalFiles;\n  const newestMessageId = messages[messages.length - 1]?.id;\n  const messageIsEmpty =\n    message\n      .replace(/<[^>]*>/g, '')\n      .replace(/&nbsp;/g, ' ')\n      .trim() === '';\n\n  useLayoutEffect(() => {\n    const messageList = messagesRef.current?.querySelector<HTMLElement>('[data-message-list]');\n    if (!messageList || newestMessageId === undefined) return;\n\n    const isNearBottom =\n      messageList.scrollHeight - messageList.scrollTop - messageList.clientHeight <\n      450; /* 🌝 preview image max height plus allowance */\n    const shouldScrollToBottom = !hasLoadedRef.current || isNearBottom;\n\n    followImageLoadsRef.current = shouldScrollToBottom;\n    hasLoadedRef.current = true;\n\n    const timeout = window.setTimeout(() => {\n      followImageLoadsRef.current = false;\n    }, 5000);\n\n    const scrollToBottom = () => {\n      messageList.scrollTop = messageList.scrollHeight;\n    };\n\n    if (shouldScrollToBottom) scrollToBottom();\n\n    const handleLoad = (event: Event) => {\n      if (followImageLoadsRef.current && event.target instanceof HTMLImageElement) {\n        scrollToBottom();\n      }\n    };\n\n    const handleWheel = (event: WheelEvent) => {\n      if (event.deltaY < 0) {\n        followImageLoadsRef.current = false;\n      }\n    };\n\n    let previousTouchY: number | undefined;\n\n    const handleTouchStart = (event: TouchEvent) => {\n      previousTouchY = event.touches[0]?.clientY;\n    };\n\n    const handleTouchMove = (event: TouchEvent) => {\n      const touchY = event.touches[0]?.clientY;\n      if (touchY !== undefined && previousTouchY !== undefined && touchY > previousTouchY) {\n        followImageLoadsRef.current = false;\n      }\n      previousTouchY = touchY;\n    };\n\n    messageList.addEventListener('load', handleLoad, true);\n    messageList.addEventListener('wheel', handleWheel, { passive: true });\n    messageList.addEventListener('touchstart', handleTouchStart, { passive: true });\n    messageList.addEventListener('touchmove', handleTouchMove, { passive: true });\n\n    return () => {\n      window.clearTimeout(timeout);\n      messageList.removeEventListener('load', handleLoad, true);\n      messageList.removeEventListener('wheel', handleWheel);\n      messageList.removeEventListener('touchstart', handleTouchStart);\n      messageList.removeEventListener('touchmove', handleTouchMove);\n    };\n  }, [newestMessageId]);\n\n  return (\n    <div\n      className={cx(styles.messages, fill && styles.fill)}\n      data-component='messages'\n      ref={messagesRef}\n    >\n      <List data-message-list>\n        {messages.map((message) => (\n          <Message\n            key={message.id}\n            {...message}\n          />\n        ))}\n      </List>\n      {tooltipLabel && <Tooltip variant='static'>{tooltipLabel}</Tooltip>}\n      <Editor\n        autofocus\n        content={message}\n        disabled={sending || (messageIsEmpty && queuedFiles.length === 0 && !inlineImages?.length)}\n        files={queuedFiles}\n        inlineImages={inlineImages}\n        maxRows={maxEditorRows}\n        minRows={minEditorRows}\n        onChange={onChange}\n        onFilesChange={(nextFiles) => {\n          if (files === undefined) setInternalFiles(nextFiles);\n          onFilesChange?.(nextFiles);\n        }}\n        onInlineImagesChange={onInlineImagesChange}\n        onSubmit={onSubmit}\n        onUpload={handleUpload}\n        placeholder={placeholder}\n        submitLabel='Send message'\n      />\n    </div>\n  );\n};\n"],"names":["Messages","fill","files","handleUpload","inlineImages","maxEditorRows","message","messages","minEditorRows","onChange","onFilesChange","onInlineImagesChange","onSubmit","placeholder","sending","tooltipLabel","messagesRef","useRef","followImageLoadsRef","hasLoadedRef","internalFiles","setInternalFiles","useState","queuedFiles","newestMessageId","length","id","messageIsEmpty","replace","trim","useLayoutEffect","messageList","current","querySelector","undefined","isNearBottom","scrollHeight","scrollTop","clientHeight","shouldScrollToBottom","timeout","window","setTimeout","scrollToBottom","handleLoad","event","target","HTMLImageElement","handleWheel","deltaY","previousTouchY","handleTouchStart","touches","clientY","handleTouchMove","touchY","addEventListener","passive","clearTimeout","removeEventListener","jsxs","cx","styles","jsx","List","map","Message","Tooltip","Editor","nextFiles"],"mappings":";;;;;;;;;;GA8BaA,KAAWA,CAAC;AAAA,EACvBC,MAAAA,IAAO;AAAA,EACPC,OAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,eAAAA,IAAgB;AAAA,EAChBC,SAAAA,IAAU;AAAA,EACVC,UAAAA;AAAAA,EACAC,eAAAA,IAAgB;AAAA,EAChBC,UAAAA;AAAAA,EACAC,eAAAA;AAAAA,EACAC,sBAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,cAAAA;AACa,MAAM;;AACnB,QAAMC,IAAcC,EAAuB,IAAI,GACzCC,IAAsBD,EAAO,EAAI,GACjCE,IAAeF,EAAO,EAAK,GAC3B,CAACG,GAAeC,CAAgB,IAAIC,EAAiB,CAAA,CAAE,GACvDC,IAAcrB,KAASkB,GACvBI,KAAkBjB,IAAAA,EAASA,EAASkB,SAAS,CAAC,MAA5BlB,gBAAAA,EAA+BmB,IACjDC,IACJrB,EACGsB,QAAQ,YAAY,EAAE,EACtBA,QAAQ,WAAW,GAAG,EACtBC,KAAAA,MAAW;AAEhBC,SAAAA,EAAgB,MAAM;;AACpB,UAAMC,KAAcf,IAAAA,EAAYgB,YAAZhB,gBAAAA,EAAqBiB,cAA2B;AACpE,QAAI,CAACF,KAAeP,MAAoBU,OAAW;AAEnD,UAAMC,IACJJ,EAAYK,eAAeL,EAAYM,YAAYN,EAAYO,eAC/D,KACIC,IAAuB,CAACpB,EAAaa,WAAWG;AAEtDjB,IAAAA,EAAoBc,UAAUO,GAC9BpB,EAAaa,UAAU;AAEvB,UAAMQ,IAAUC,OAAOC,WAAW,MAAM;AACtCxB,MAAAA,EAAoBc,UAAU;AAAA,IAChC,GAAG,GAAI,GAEDW,IAAiBA,MAAM;AAC3BZ,MAAAA,EAAYM,YAAYN,EAAYK;AAAAA,IACtC;AAEA,IAAIG,KAAsBI,EAAAA;AAE1B,UAAMC,IAAaA,CAACC,MAAiB;AACnC,MAAI3B,EAAoBc,WAAWa,EAAMC,kBAAkBC,oBACzDJ,EAAAA;AAAAA,IAEJ,GAEMK,IAAcA,CAACH,MAAsB;AACzC,MAAIA,EAAMI,SAAS,MACjB/B,EAAoBc,UAAU;AAAA,IAElC;AAEA,QAAIkB;AAEJ,UAAMC,IAAmBA,CAACN,MAAsB;;AAC9CK,MAAAA,KAAiBL,IAAAA,EAAMO,QAAQ,CAAC,MAAfP,gBAAAA,EAAkBQ;AAAAA,IACrC,GAEMC,IAAkBA,CAACT,MAAsB;;AAC7C,YAAMU,KAASV,IAAAA,EAAMO,QAAQ,CAAC,MAAfP,gBAAAA,EAAkBQ;AACjC,MAAIE,MAAWrB,UAAagB,MAAmBhB,UAAaqB,IAASL,MACnEhC,EAAoBc,UAAU,KAEhCkB,IAAiBK;AAAAA,IACnB;AAEAxB,WAAAA,EAAYyB,iBAAiB,QAAQZ,GAAY,EAAI,GACrDb,EAAYyB,iBAAiB,SAASR,GAAa;AAAA,MAAES,SAAS;AAAA,IAAA,CAAM,GACpE1B,EAAYyB,iBAAiB,cAAcL,GAAkB;AAAA,MAAEM,SAAS;AAAA,IAAA,CAAM,GAC9E1B,EAAYyB,iBAAiB,aAAaF,GAAiB;AAAA,MAAEG,SAAS;AAAA,IAAA,CAAM,GAErE,MAAM;AACXhB,aAAOiB,aAAalB,CAAO,GAC3BT,EAAY4B,oBAAoB,QAAQf,GAAY,EAAI,GACxDb,EAAY4B,oBAAoB,SAASX,CAAW,GACpDjB,EAAY4B,oBAAoB,cAAcR,CAAgB,GAC9DpB,EAAY4B,oBAAoB,aAAaL,CAAe;AAAA,IAC9D;AAAA,EACF,GAAG,CAAC9B,CAAe,CAAC,GAGlB,gBAAAoC,EAAC,OAAA,EACC,WAAWC,EAAGC,EAAOvD,UAAUN,KAAQ6D,EAAO7D,IAAI,GAClD,kBAAe,YACf,KAAKe,GAEL,UAAA;AAAA,IAAA,gBAAA+C,EAACC,GAAA,EAAK,qBAAiB,IACpBzD,UAAAA,EAAS0D,IAAK3D,CAAAA,MACb,gBAAAyD,EAACG,GAAA,EAEC,GAAI5D,EAAAA,GADCA,EAAQoB,EACD,CAEf,GACH;AAAA,IACCX,KAAgB,gBAAAgD,EAACI,GAAA,EAAQ,SAAQ,UAAUpD,UAAAA,GAAa;AAAA,IACzD,gBAAAgD,EAACK,GAAA,EACC,WAAS,IACT,SAAS9D,GACT,UAAUQ,KAAYa,KAAkBJ,EAAYE,WAAW,KAAK,EAACrB,KAAAA,QAAAA,EAAcqB,SACnF,OAAOF,GACP,cAAAnB,GACA,SAASC,GACT,SAASG,GACT,UAAAC,GACA,eAAgB4D,CAAAA,MAAc;AAC5B,MAAInE,MAAUgC,UAAWb,EAAiBgD,CAAS,GACnD3D,KAAAA,QAAAA,EAAgB2D;AAAAA,IAClB,GACA,sBAAA1D,GACA,UAAAC,GACA,UAAUT,GACV,aAAAU,GACA,aAAY,eAAA,CAAc;AAAA,EAAA,GAE9B;AAEJ;"}

package/dist/components/nav/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index12.css');const o=require("react/jsx-runtime"),r=require("../../classix-5H4IWnMA.cjs"),p=require("react"),h=require("../../icons-Lq3pr85X.cjs"),v="_nav_1hgi7_3",f="_label_1hgi7_9",g="_horizontal_1hgi7_17",m="_sidebar_1hgi7_27",N="_tabs_1hgi7_66",w="_pills_1hgi7_86",t={nav:v,label:f,horizontal:g,sidebar:m,tabs:N,pills:w},x={default:t.default,pills:t.pills,sidebar:t.sidebar,tabs:t.tabs},j=({className:e,...n})=>o.jsx("span",{className:r.t(e,t.label),...n,"data-component":"navlabel"}),q=({animation:e,children:n,className:c,horizontal:i=!1,variant:s="default",...d})=>{const[b,l]=p.useState(!1),u={"--icon-svg":h.iconSVG("chevron")};return o.jsx("nav",{className:r.t(c,i&&t.horizontal,t.nav,x[s]),"data-animation":e,"data-open":b?"true":"false","data-orientation":i?"horizontal":"vertical",onBlurCapture:a=>{if(s!=="pills"||window.innerWidth>960)return;const _=a.relatedTarget;a.currentTarget.contains(_)||l(!1)},onClick:()=>{s!=="pills"||window.innerWidth>960||l(a=>!a)},style:u,...d,"data-component":"nav",children:n})};exports.Nav=q;exports.NavLabel=j;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index12.css');const o=require("react/jsx-runtime"),r=require("../../classix-5H4IWnMA.cjs"),p=require("react"),h=require("../../icons-B_uIKmIp.cjs"),v="_nav_1hgi7_3",f="_label_1hgi7_9",g="_horizontal_1hgi7_17",m="_sidebar_1hgi7_27",w="_tabs_1hgi7_66",N="_pills_1hgi7_86",t={nav:v,label:f,horizontal:g,sidebar:m,tabs:w,pills:N},x={default:t.default,pills:t.pills,sidebar:t.sidebar,tabs:t.tabs},j=({className:e,...n})=>o.jsx("span",{className:r.t(e,t.label),...n,"data-component":"navlabel"}),q=({animation:e,children:n,className:c,horizontal:i=!1,variant:s="default",...d})=>{const[b,l]=p.useState(!1),u={"--icon-svg":h.iconSVG("CaretDown")};return o.jsx("nav",{className:r.t(c,i&&t.horizontal,t.nav,x[s]),"data-animation":e,"data-open":b?"true":"false","data-orientation":i?"horizontal":"vertical",onBlurCapture:a=>{if(s!=="pills"||window.innerWidth>960)return;const _=a.relatedTarget;a.currentTarget.contains(_)||l(!1)},onClick:()=>{s!=="pills"||window.innerWidth>960||l(a=>!a)},style:u,...d,"data-component":"nav",children:n})};exports.Nav=q;exports.NavLabel=j;
 //# sourceMappingURL=index.cjs.map

package/dist/components/nav/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/nav/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useState } from 'react';\n\nimport { iconSVG } from '@/components/icon/icons.ts';\n\nimport styles from './styles.module.css';\n\nconst variants = {\n  default: styles.default,\n  pills: styles.pills,\n  sidebar: styles.sidebar,\n  tabs: styles.tabs,\n};\n\nexport type NavProps = React.HTMLAttributes<HTMLElement> & {\n  animation?: string;\n  children?: React.ReactNode;\n  className?: string;\n  horizontal?: boolean;\n  variant?: keyof typeof variants;\n};\n\nexport type NavLabelProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const NavLabel = ({ className, ...props }: NavLabelProps) => (\n  <span\n    className={cx(className, styles.label)}\n    {...props}\n  />\n);\n\nexport const Nav = ({\n  animation,\n  children,\n  className,\n  horizontal = false,\n  variant = 'default',\n  ...props\n}: NavProps) => {\n  const [open, setOpen] = useState(false);\n\n  type withVars = React.CSSProperties & {\n    '--icon-svg'?: string;\n  };\n  const withVars: withVars = {\n    '--icon-svg': iconSVG('chevron'),\n  };\n\n  return (\n    <nav\n      className={cx(className, horizontal && styles.horizontal, styles.nav, variants[variant])}\n      data-animation={animation}\n      data-open={open ? 'true' : 'false'}\n      data-orientation={horizontal ? 'horizontal' : 'vertical'}\n      onBlurCapture={(e) => {\n        if (variant !== 'pills' || window.innerWidth > 960) return;\n\n        const next = e.relatedTarget as Node | null;\n        if (!e.currentTarget.contains(next)) {\n          setOpen(false);\n        }\n      }}\n      onClick={() => {\n        if (variant !== 'pills' || window.innerWidth > 960) return;\n\n        setOpen((v) => !v);\n      }}\n      style={withVars}\n      {...props}\n    >\n      {children}\n    </nav>\n  );\n};\n"],"names":["variants","default","styles","pills","sidebar","tabs","NavLabel","className","props","jsx","cx","label","Nav","animation","children","horizontal","variant","open","setOpen","useState","withVars","iconSVG","nav","e","window","innerWidth","next","relatedTarget","currentTarget","contains","v"],"mappings":"wYAOMA,EAAW,CACfC,QAASC,EAAOD,QAChBE,MAAOD,EAAOC,MACdC,QAASF,EAAOE,QAChBC,KAAMH,EAAOG,IACf,EAYaC,EAAWA,CAAC,CAAEC,UAAAA,EAAW,GAAGC,CAAqB,IAC5DC,MAAC,OAAA,CACC,UAAWC,EAAAA,EAAGH,EAAWL,EAAOS,KAAK,EACrC,GAAIH,EAAM,iBAAA,UAAA,CAAA,EAIDI,EAAMA,CAAC,CAClBC,UAAAA,EACAC,SAAAA,EACAP,UAAAA,EACAQ,WAAAA,EAAa,GACbC,QAAAA,EAAU,UACV,GAAGR,CACK,IAAM,CACd,KAAM,CAACS,EAAMC,CAAO,EAAIC,EAAAA,SAAS,EAAK,EAKhCC,EAAqB,CACzB,aAAcC,EAAAA,QAAQ,SAAS,CAAA,EAGjC,OACEZ,EAAAA,IAAC,MAAA,CACC,UAAWC,EAAAA,EAAGH,EAAWQ,GAAcb,EAAOa,WAAYb,EAAOoB,IAAKtB,EAASgB,CAAO,CAAC,EACvF,iBAAgBH,EAChB,YAAWI,EAAO,OAAS,QAC3B,mBAAkBF,EAAa,aAAe,WAC9C,cAAgBQ,GAAM,CACpB,GAAIP,IAAY,SAAWQ,OAAOC,WAAa,IAAK,OAEpD,MAAMC,EAAOH,EAAEI,cACVJ,EAAEK,cAAcC,SAASH,CAAI,GAChCR,EAAQ,EAAK,CAEjB,EACA,QAAS,IAAM,CACTF,IAAY,SAAWQ,OAAOC,WAAa,KAE/CP,EAASY,GAAM,CAACA,CAAC,CACnB,EACA,MAAOV,EACP,GAAIZ,EAAM,iBAAA,MAETM,SAAAA,EACH,CAEJ"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/nav/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useState } from 'react';\n\nimport { iconSVG } from '@/components/icon/icons.ts';\n\nimport styles from './styles.module.css';\n\nconst variants = {\n  default: styles.default,\n  pills: styles.pills,\n  sidebar: styles.sidebar,\n  tabs: styles.tabs,\n};\n\nexport type NavProps = React.HTMLAttributes<HTMLElement> & {\n  animation?: string;\n  children?: React.ReactNode;\n  className?: string;\n  horizontal?: boolean;\n  variant?: keyof typeof variants;\n};\n\nexport type NavLabelProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const NavLabel = ({ className, ...props }: NavLabelProps) => (\n  <span\n    className={cx(className, styles.label)}\n    {...props}\n  />\n);\n\nexport const Nav = ({\n  animation,\n  children,\n  className,\n  horizontal = false,\n  variant = 'default',\n  ...props\n}: NavProps) => {\n  const [open, setOpen] = useState(false);\n\n  type withVars = React.CSSProperties & {\n    '--icon-svg'?: string;\n  };\n  const withVars: withVars = {\n    '--icon-svg': iconSVG('CaretDown'),\n  };\n\n  return (\n    <nav\n      className={cx(className, horizontal && styles.horizontal, styles.nav, variants[variant])}\n      data-animation={animation}\n      data-open={open ? 'true' : 'false'}\n      data-orientation={horizontal ? 'horizontal' : 'vertical'}\n      onBlurCapture={(e) => {\n        if (variant !== 'pills' || window.innerWidth > 960) return;\n\n        const next = e.relatedTarget as Node | null;\n        if (!e.currentTarget.contains(next)) {\n          setOpen(false);\n        }\n      }}\n      onClick={() => {\n        if (variant !== 'pills' || window.innerWidth > 960) return;\n\n        setOpen((v) => !v);\n      }}\n      style={withVars}\n      {...props}\n    >\n      {children}\n    </nav>\n  );\n};\n"],"names":["variants","default","styles","pills","sidebar","tabs","NavLabel","className","props","jsx","cx","label","Nav","animation","children","horizontal","variant","open","setOpen","useState","withVars","iconSVG","nav","e","window","innerWidth","next","relatedTarget","currentTarget","contains","v"],"mappings":"wYAOMA,EAAW,CACfC,QAASC,EAAOD,QAChBE,MAAOD,EAAOC,MACdC,QAASF,EAAOE,QAChBC,KAAMH,EAAOG,IACf,EAYaC,EAAWA,CAAC,CAAEC,UAAAA,EAAW,GAAGC,CAAqB,IAC5DC,MAAC,OAAA,CACC,UAAWC,EAAAA,EAAGH,EAAWL,EAAOS,KAAK,EACrC,GAAIH,EAAM,iBAAA,UAAA,CAAA,EAIDI,EAAMA,CAAC,CAClBC,UAAAA,EACAC,SAAAA,EACAP,UAAAA,EACAQ,WAAAA,EAAa,GACbC,QAAAA,EAAU,UACV,GAAGR,CACK,IAAM,CACd,KAAM,CAACS,EAAMC,CAAO,EAAIC,EAAAA,SAAS,EAAK,EAKhCC,EAAqB,CACzB,aAAcC,EAAAA,QAAQ,WAAW,CAAA,EAGnC,OACEZ,EAAAA,IAAC,MAAA,CACC,UAAWC,EAAAA,EAAGH,EAAWQ,GAAcb,EAAOa,WAAYb,EAAOoB,IAAKtB,EAASgB,CAAO,CAAC,EACvF,iBAAgBH,EAChB,YAAWI,EAAO,OAAS,QAC3B,mBAAkBF,EAAa,aAAe,WAC9C,cAAgBQ,GAAM,CACpB,GAAIP,IAAY,SAAWQ,OAAOC,WAAa,IAAK,OAEpD,MAAMC,EAAOH,EAAEI,cACVJ,EAAEK,cAAcC,SAASH,CAAI,GAChCR,EAAQ,EAAK,CAEjB,EACA,QAAS,IAAM,CACTF,IAAY,SAAWQ,OAAOC,WAAa,KAE/CP,EAASY,GAAM,CAACA,CAAC,CACnB,EACA,MAAOV,EACP,GAAIZ,EAAM,iBAAA,MAETM,SAAAA,EACH,CAEJ"}

package/dist/components/nav/index.js

@@ -1,7 +1,7 @@
 import { jsx as l } from "react/jsx-runtime";
 import { t as r } from "../../classix-DG18itHa.js";
 import { useState as f } from "react";
-import { i as h } from "../../icons-BkaMeh-J.js";
+import { i as h } from "../../icons-Dm2kyF0g.js";
 import '../../assets/index12.css';const m = "_nav_1hgi7_3", u = "_label_1hgi7_9", v = "_horizontal_1hgi7_17", g = "_sidebar_1hgi7_27", w = "_tabs_1hgi7_66", z = "_pills_1hgi7_86", a = {
   nav: m,
   label: u,
@@ -26,7 +26,7 @@ import '../../assets/index12.css';const m = "_nav_1hgi7_3", u = "_label_1hgi7_9"
   ...p
 }) => {
   const [d, i] = f(!1), _ = {
-    "--icon-svg": h("chevron")
+    "--icon-svg": h("CaretDown")
   };
   return /* @__PURE__ */ l("nav", { className: r(c, e && a.horizontal, a.nav, N[o]), "data-animation": n, "data-open": d ? "true" : "false", "data-orientation": e ? "horizontal" : "vertical", onBlurCapture: (t) => {
     if (o !== "pills" || window.innerWidth > 960) return;

package/dist/components/nav/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/nav/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useState } from 'react';\n\nimport { iconSVG } from '@/components/icon/icons.ts';\n\nimport styles from './styles.module.css';\n\nconst variants = {\n  default: styles.default,\n  pills: styles.pills,\n  sidebar: styles.sidebar,\n  tabs: styles.tabs,\n};\n\nexport type NavProps = React.HTMLAttributes<HTMLElement> & {\n  animation?: string;\n  children?: React.ReactNode;\n  className?: string;\n  horizontal?: boolean;\n  variant?: keyof typeof variants;\n};\n\nexport type NavLabelProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const NavLabel = ({ className, ...props }: NavLabelProps) => (\n  <span\n    className={cx(className, styles.label)}\n    {...props}\n  />\n);\n\nexport const Nav = ({\n  animation,\n  children,\n  className,\n  horizontal = false,\n  variant = 'default',\n  ...props\n}: NavProps) => {\n  const [open, setOpen] = useState(false);\n\n  type withVars = React.CSSProperties & {\n    '--icon-svg'?: string;\n  };\n  const withVars: withVars = {\n    '--icon-svg': iconSVG('chevron'),\n  };\n\n  return (\n    <nav\n      className={cx(className, horizontal && styles.horizontal, styles.nav, variants[variant])}\n      data-animation={animation}\n      data-open={open ? 'true' : 'false'}\n      data-orientation={horizontal ? 'horizontal' : 'vertical'}\n      onBlurCapture={(e) => {\n        if (variant !== 'pills' || window.innerWidth > 960) return;\n\n        const next = e.relatedTarget as Node | null;\n        if (!e.currentTarget.contains(next)) {\n          setOpen(false);\n        }\n      }}\n      onClick={() => {\n        if (variant !== 'pills' || window.innerWidth > 960) return;\n\n        setOpen((v) => !v);\n      }}\n      style={withVars}\n      {...props}\n    >\n      {children}\n    </nav>\n  );\n};\n"],"names":["variants","default","styles","pills","sidebar","tabs","NavLabel","className","props","jsx","cx","label","Nav","animation","children","horizontal","variant","open","setOpen","useState","withVars","iconSVG","nav","e","window","innerWidth","next","relatedTarget","currentTarget","contains","v"],"mappings":";;;;;;;;;;;GAOMA,IAAW;AAAA,EACfC,SAASC,EAAOD;AAAAA,EAChBE,OAAOD,EAAOC;AAAAA,EACdC,SAASF,EAAOE;AAAAA,EAChBC,MAAMH,EAAOG;AACf,GAYaC,IAAWA,CAAC;AAAA,EAAEC,WAAAA;AAAAA,EAAW,GAAGC;AAAqB,MAC5D,gBAAAC,EAAC,QAAA,EACC,WAAWC,EAAGH,GAAWL,EAAOS,KAAK,GACrC,GAAIH,GAAM,kBAAA,WAAA,CAAA,GAIDI,IAAMA,CAAC;AAAA,EAClBC,WAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAP,WAAAA;AAAAA,EACAQ,YAAAA,IAAa;AAAA,EACbC,SAAAA,IAAU;AAAA,EACV,GAAGR;AACK,MAAM;AACd,QAAM,CAACS,GAAMC,CAAO,IAAIC,EAAS,EAAK,GAKhCC,IAAqB;AAAA,IACzB,cAAcC,EAAQ,SAAS;AAAA,EAAA;AAGjC,SACE,gBAAAZ,EAAC,OAAA,EACC,WAAWC,EAAGH,GAAWQ,KAAcb,EAAOa,YAAYb,EAAOoB,KAAKtB,EAASgB,CAAO,CAAC,GACvF,kBAAgBH,GAChB,aAAWI,IAAO,SAAS,SAC3B,oBAAkBF,IAAa,eAAe,YAC9C,eAAgBQ,CAAAA,MAAM;AACpB,QAAIP,MAAY,WAAWQ,OAAOC,aAAa,IAAK;AAEpD,UAAMC,IAAOH,EAAEI;AACf,IAAKJ,EAAEK,cAAcC,SAASH,CAAI,KAChCR,EAAQ,EAAK;AAAA,EAEjB,GACA,SAAS,MAAM;AACb,IAAIF,MAAY,WAAWQ,OAAOC,aAAa,OAE/CP,EAASY,CAAAA,MAAM,CAACA,CAAC;AAAA,EACnB,GACA,OAAOV,GACP,GAAIZ,GAAM,kBAAA,OAETM,UAAAA,GACH;AAEJ;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/nav/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useState } from 'react';\n\nimport { iconSVG } from '@/components/icon/icons.ts';\n\nimport styles from './styles.module.css';\n\nconst variants = {\n  default: styles.default,\n  pills: styles.pills,\n  sidebar: styles.sidebar,\n  tabs: styles.tabs,\n};\n\nexport type NavProps = React.HTMLAttributes<HTMLElement> & {\n  animation?: string;\n  children?: React.ReactNode;\n  className?: string;\n  horizontal?: boolean;\n  variant?: keyof typeof variants;\n};\n\nexport type NavLabelProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const NavLabel = ({ className, ...props }: NavLabelProps) => (\n  <span\n    className={cx(className, styles.label)}\n    {...props}\n  />\n);\n\nexport const Nav = ({\n  animation,\n  children,\n  className,\n  horizontal = false,\n  variant = 'default',\n  ...props\n}: NavProps) => {\n  const [open, setOpen] = useState(false);\n\n  type withVars = React.CSSProperties & {\n    '--icon-svg'?: string;\n  };\n  const withVars: withVars = {\n    '--icon-svg': iconSVG('CaretDown'),\n  };\n\n  return (\n    <nav\n      className={cx(className, horizontal && styles.horizontal, styles.nav, variants[variant])}\n      data-animation={animation}\n      data-open={open ? 'true' : 'false'}\n      data-orientation={horizontal ? 'horizontal' : 'vertical'}\n      onBlurCapture={(e) => {\n        if (variant !== 'pills' || window.innerWidth > 960) return;\n\n        const next = e.relatedTarget as Node | null;\n        if (!e.currentTarget.contains(next)) {\n          setOpen(false);\n        }\n      }}\n      onClick={() => {\n        if (variant !== 'pills' || window.innerWidth > 960) return;\n\n        setOpen((v) => !v);\n      }}\n      style={withVars}\n      {...props}\n    >\n      {children}\n    </nav>\n  );\n};\n"],"names":["variants","default","styles","pills","sidebar","tabs","NavLabel","className","props","jsx","cx","label","Nav","animation","children","horizontal","variant","open","setOpen","useState","withVars","iconSVG","nav","e","window","innerWidth","next","relatedTarget","currentTarget","contains","v"],"mappings":";;;;;;;;;;;GAOMA,IAAW;AAAA,EACfC,SAASC,EAAOD;AAAAA,EAChBE,OAAOD,EAAOC;AAAAA,EACdC,SAASF,EAAOE;AAAAA,EAChBC,MAAMH,EAAOG;AACf,GAYaC,IAAWA,CAAC;AAAA,EAAEC,WAAAA;AAAAA,EAAW,GAAGC;AAAqB,MAC5D,gBAAAC,EAAC,QAAA,EACC,WAAWC,EAAGH,GAAWL,EAAOS,KAAK,GACrC,GAAIH,GAAM,kBAAA,WAAA,CAAA,GAIDI,IAAMA,CAAC;AAAA,EAClBC,WAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAP,WAAAA;AAAAA,EACAQ,YAAAA,IAAa;AAAA,EACbC,SAAAA,IAAU;AAAA,EACV,GAAGR;AACK,MAAM;AACd,QAAM,CAACS,GAAMC,CAAO,IAAIC,EAAS,EAAK,GAKhCC,IAAqB;AAAA,IACzB,cAAcC,EAAQ,WAAW;AAAA,EAAA;AAGnC,SACE,gBAAAZ,EAAC,OAAA,EACC,WAAWC,EAAGH,GAAWQ,KAAcb,EAAOa,YAAYb,EAAOoB,KAAKtB,EAASgB,CAAO,CAAC,GACvF,kBAAgBH,GAChB,aAAWI,IAAO,SAAS,SAC3B,oBAAkBF,IAAa,eAAe,YAC9C,eAAgBQ,CAAAA,MAAM;AACpB,QAAIP,MAAY,WAAWQ,OAAOC,aAAa,IAAK;AAEpD,UAAMC,IAAOH,EAAEI;AACf,IAAKJ,EAAEK,cAAcC,SAASH,CAAI,KAChCR,EAAQ,EAAK;AAAA,EAEjB,GACA,SAAS,MAAM;AACb,IAAIF,MAAY,WAAWQ,OAAOC,aAAa,OAE/CP,EAASY,CAAAA,MAAM,CAACA,CAAC;AAAA,EACnB,GACA,OAAOV,GACP,GAAIZ,GAAM,kBAAA,OAETM,UAAAA,GACH;AAEJ;"}

package/dist/components/portal/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index10.css');const e=require("react/jsx-runtime"),r=require("../../classix-5H4IWnMA.cjs"),i=require("../button/index.cjs"),a=require("../icon/index.cjs"),l=require("../aside/index.cjs"),_=require("../branding/index.cjs"),d=require("../figure/index.cjs"),u=require("../nav/index.cjs"),g="_portal_1co65_41",p="_content_1co65_254",x="_toggle_1co65_261",m="_open_1co65_314",n={portal:g,content:p,toggle:x,open:m},j=({children:o,portals:t,open:s,setOpen:c})=>e.jsxs(l.Aside,{className:r.t(n.portal,s&&n.open),sticky:!0,"data-component":"portal",children:[e.jsx(i.Button,{className:n.toggle,onClick:()=>c(!s),variant:"tertiary",children:e.jsx(a.Icon,{name:"sidebar"})}),e.jsx(d.Figure,{children:e.jsx(_.Branding,{name:"logo",size:48,variant:"white"})}),e.jsxs("div",{className:n.content,children:[t&&e.jsx(u.Nav,{horizontal:!0,children:t}),o&&o]})]});exports.Portal=j;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index10.css');const e=require("react/jsx-runtime"),r=require("../../classix-5H4IWnMA.cjs"),i=require("../button/index.cjs"),a=require("../icon/index.cjs"),l=require("../aside/index.cjs"),_=require("../branding/index.cjs"),d=require("../figure/index.cjs"),u=require("../nav/index.cjs"),p="_portal_1co65_41",g="_content_1co65_254",m="_toggle_1co65_261",x="_open_1co65_314",n={portal:p,content:g,toggle:m,open:x},j=({children:o,portals:t,open:s,setOpen:c})=>e.jsxs(l.Aside,{className:r.t(n.portal,s&&n.open),sticky:!0,"data-component":"portal",children:[e.jsx(i.Button,{className:n.toggle,onClick:()=>c(!s),variant:"tertiary",children:e.jsx(a.Icon,{name:"SidebarSimple"})}),e.jsx(d.Figure,{children:e.jsx(_.Branding,{name:"logo",size:48,variant:"white"})}),e.jsxs("div",{className:n.content,children:[t&&e.jsx(u.Nav,{horizontal:!0,children:t}),o&&o]})]});exports.Portal=j;
 //# sourceMappingURL=index.cjs.map

package/dist/components/portal/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/portal/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport { Button } from '@/components/button';\nimport { Icon } from '@/components/icon';\n\nimport { Aside } from '../aside';\nimport { Branding } from '../branding';\nimport { Figure } from '../figure';\nimport { Nav } from '../nav';\nimport styles from './styles.module.css';\n\nexport type PortalProps = {\n  accessibleLabel?: string;\n  children?: React.ReactNode;\n  portals?: React.ReactNode;\n  open: boolean;\n  setOpen: (open: boolean) => void;\n};\n\nexport const Portal = ({ children, portals, open, setOpen }: PortalProps) => (\n  <Aside\n    className={cx(styles.portal, open && styles.open)}\n    sticky\n  >\n    <Button\n      className={styles.toggle}\n      onClick={() => setOpen(!open)}\n      variant={'tertiary'}\n    >\n      <Icon name={'sidebar'} />\n    </Button>\n    <Figure>\n      <Branding\n        name='logo'\n        size={48}\n        variant='white'\n      />\n    </Figure>\n    <div className={styles.content}>\n      {portals && <Nav horizontal>{portals}</Nav>}\n      {children && children}\n    </div>\n  </Aside>\n);\n"],"names":["Portal","children","portals","open","setOpen","jsxs","Aside","cx","styles","portal","jsx","Button","toggle","Icon","Figure","Branding","content","Nav"],"mappings":"4dAmBaA,EAASA,CAAC,CAAEC,SAAAA,EAAUC,QAAAA,EAASC,KAAAA,EAAMC,QAAAA,CAAqB,IACrEC,EAAAA,KAACC,EAAAA,MAAA,CACC,UAAWC,EAAAA,EAAGC,EAAOC,OAAQN,GAAQK,EAAOL,IAAI,EAChD,OAAM,GAAA,iBAAA,SAEN,SAAA,CAAAO,MAACC,EAAAA,QACC,UAAWH,EAAOI,OAClB,QAAS,IAAMR,EAAQ,CAACD,CAAI,EAC5B,QAAS,WAET,SAAAO,EAAAA,IAACG,EAAAA,KAAA,CAAK,KAAM,UAAU,EACxB,EACAH,EAAAA,IAACI,EAAAA,OAAA,CACC,SAAAJ,EAAAA,IAACK,EAAAA,SAAA,CACC,KAAK,OACL,KAAM,GACN,QAAQ,OAAA,CAAO,CAAA,CAEnB,EACAV,EAAAA,KAAC,MAAA,CAAI,UAAWG,EAAOQ,QACpBd,SAAAA,CAAAA,GAAWQ,EAAAA,IAACO,MAAA,CAAI,WAAU,GAAEf,SAAAA,EAAQ,EACpCD,GAAYA,CAAAA,CAAAA,CACf,CAAA,CAAA,CACF"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/portal/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport { Button } from '@/components/button';\nimport { Icon } from '@/components/icon';\n\nimport { Aside } from '../aside';\nimport { Branding } from '../branding';\nimport { Figure } from '../figure';\nimport { Nav } from '../nav';\nimport styles from './styles.module.css';\n\nexport type PortalProps = {\n  accessibleLabel?: string;\n  children?: React.ReactNode;\n  portals?: React.ReactNode;\n  open: boolean;\n  setOpen: (open: boolean) => void;\n};\n\nexport const Portal = ({ children, portals, open, setOpen }: PortalProps) => (\n  <Aside\n    className={cx(styles.portal, open && styles.open)}\n    sticky\n  >\n    <Button\n      className={styles.toggle}\n      onClick={() => setOpen(!open)}\n      variant={'tertiary'}\n    >\n      <Icon name='SidebarSimple' />\n    </Button>\n    <Figure>\n      <Branding\n        name='logo'\n        size={48}\n        variant='white'\n      />\n    </Figure>\n    <div className={styles.content}>\n      {portals && <Nav horizontal>{portals}</Nav>}\n      {children && children}\n    </div>\n  </Aside>\n);\n"],"names":["Portal","children","portals","open","setOpen","jsxs","Aside","cx","styles","portal","jsx","Button","toggle","Icon","Figure","Branding","content","Nav"],"mappings":"4dAmBaA,EAASA,CAAC,CAAEC,SAAAA,EAAUC,QAAAA,EAASC,KAAAA,EAAMC,QAAAA,CAAqB,IACrEC,EAAAA,KAACC,EAAAA,MAAA,CACC,UAAWC,EAAAA,EAAGC,EAAOC,OAAQN,GAAQK,EAAOL,IAAI,EAChD,OAAM,GAAA,iBAAA,SAEN,SAAA,CAAAO,MAACC,EAAAA,QACC,UAAWH,EAAOI,OAClB,QAAS,IAAMR,EAAQ,CAACD,CAAI,EAC5B,QAAS,WAET,SAAAO,EAAAA,IAACG,EAAAA,KAAA,CAAK,KAAK,gBAAe,EAC5B,EACAH,EAAAA,IAACI,EAAAA,OAAA,CACC,SAAAJ,EAAAA,IAACK,EAAAA,SAAA,CACC,KAAK,OACL,KAAM,GACN,QAAQ,OAAA,CAAO,CAAA,CAEnB,EACAV,EAAAA,KAAC,MAAA,CAAI,UAAWG,EAAOQ,QACpBd,SAAAA,CAAAA,GAAWQ,EAAAA,IAACO,MAAA,CAAI,WAAU,GAAEf,SAAAA,EAAQ,EACpCD,GAAYA,CAAAA,CAAAA,CACf,CAAA,CAAA,CACF"}

package/dist/components/portal/index.js

@@ -1,4 +1,4 @@
-import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
 import { t as a } from "../../classix-DG18itHa.js";
 import { Button as m } from "../button/index.js";
 import { Icon as l } from "../icon/index.js";
@@ -11,20 +11,20 @@ import '../../assets/index10.css';const d = "_portal_1co65_41", f = "_content_1c
   content: f,
   toggle: h,
   open: u
-}, b = ({
+}, S = ({
   children: r,
   portals: n,
   open: e,
-  setOpen: i
-}) => /* @__PURE__ */ c(s, { className: a(t.portal, e && t.open), sticky: !0, "data-component": "portal", children: [
-  /* @__PURE__ */ o(m, { className: t.toggle, onClick: () => i(!e), variant: "tertiary", children: /* @__PURE__ */ o(l, { name: "sidebar" }) }),
+  setOpen: c
+}) => /* @__PURE__ */ i(s, { className: a(t.portal, e && t.open), sticky: !0, "data-component": "portal", children: [
+  /* @__PURE__ */ o(m, { className: t.toggle, onClick: () => c(!e), variant: "tertiary", children: /* @__PURE__ */ o(l, { name: "SidebarSimple" }) }),
   /* @__PURE__ */ o(_, { children: /* @__PURE__ */ o(p, { name: "logo", size: 48, variant: "white" }) }),
-  /* @__PURE__ */ c("div", { className: t.content, children: [
+  /* @__PURE__ */ i("div", { className: t.content, children: [
     n && /* @__PURE__ */ o(g, { horizontal: !0, children: n }),
     r && r
   ] })
 ] });
 export {
-  b as Portal
+  S as Portal
 };
 //# sourceMappingURL=index.js.map

package/dist/components/portal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/portal/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport { Button } from '@/components/button';\nimport { Icon } from '@/components/icon';\n\nimport { Aside } from '../aside';\nimport { Branding } from '../branding';\nimport { Figure } from '../figure';\nimport { Nav } from '../nav';\nimport styles from './styles.module.css';\n\nexport type PortalProps = {\n  accessibleLabel?: string;\n  children?: React.ReactNode;\n  portals?: React.ReactNode;\n  open: boolean;\n  setOpen: (open: boolean) => void;\n};\n\nexport const Portal = ({ children, portals, open, setOpen }: PortalProps) => (\n  <Aside\n    className={cx(styles.portal, open && styles.open)}\n    sticky\n  >\n    <Button\n      className={styles.toggle}\n      onClick={() => setOpen(!open)}\n      variant={'tertiary'}\n    >\n      <Icon name={'sidebar'} />\n    </Button>\n    <Figure>\n      <Branding\n        name='logo'\n        size={48}\n        variant='white'\n      />\n    </Figure>\n    <div className={styles.content}>\n      {portals && <Nav horizontal>{portals}</Nav>}\n      {children && children}\n    </div>\n  </Aside>\n);\n"],"names":["Portal","children","portals","open","setOpen","jsxs","Aside","cx","styles","portal","jsx","Button","toggle","Icon","Figure","Branding","content","Nav"],"mappings":";;;;;;;;;;;;;GAmBaA,IAASA,CAAC;AAAA,EAAEC,UAAAA;AAAAA,EAAUC,SAAAA;AAAAA,EAASC,MAAAA;AAAAA,EAAMC,SAAAA;AAAqB,MACrE,gBAAAC,EAACC,GAAA,EACC,WAAWC,EAAGC,EAAOC,QAAQN,KAAQK,EAAOL,IAAI,GAChD,QAAM,IAAA,kBAAA,UAEN,UAAA;AAAA,EAAA,gBAAAO,EAACC,KACC,WAAWH,EAAOI,QAClB,SAAS,MAAMR,EAAQ,CAACD,CAAI,GAC5B,SAAS,YAET,UAAA,gBAAAO,EAACG,GAAA,EAAK,MAAM,WAAU,GACxB;AAAA,EACA,gBAAAH,EAACI,GAAA,EACC,UAAA,gBAAAJ,EAACK,GAAA,EACC,MAAK,QACL,MAAM,IACN,SAAQ,QAAA,CAAO,EAAA,CAEnB;AAAA,EACA,gBAAAV,EAAC,OAAA,EAAI,WAAWG,EAAOQ,SACpBd,UAAAA;AAAAA,IAAAA,KAAW,gBAAAQ,EAACO,GAAA,EAAI,YAAU,IAAEf,UAAAA,GAAQ;AAAA,IACpCD,KAAYA;AAAAA,EAAAA,EAAAA,CACf;AAAA,EAAA,CACF;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/portal/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport { Button } from '@/components/button';\nimport { Icon } from '@/components/icon';\n\nimport { Aside } from '../aside';\nimport { Branding } from '../branding';\nimport { Figure } from '../figure';\nimport { Nav } from '../nav';\nimport styles from './styles.module.css';\n\nexport type PortalProps = {\n  accessibleLabel?: string;\n  children?: React.ReactNode;\n  portals?: React.ReactNode;\n  open: boolean;\n  setOpen: (open: boolean) => void;\n};\n\nexport const Portal = ({ children, portals, open, setOpen }: PortalProps) => (\n  <Aside\n    className={cx(styles.portal, open && styles.open)}\n    sticky\n  >\n    <Button\n      className={styles.toggle}\n      onClick={() => setOpen(!open)}\n      variant={'tertiary'}\n    >\n      <Icon name='SidebarSimple' />\n    </Button>\n    <Figure>\n      <Branding\n        name='logo'\n        size={48}\n        variant='white'\n      />\n    </Figure>\n    <div className={styles.content}>\n      {portals && <Nav horizontal>{portals}</Nav>}\n      {children && children}\n    </div>\n  </Aside>\n);\n"],"names":["Portal","children","portals","open","setOpen","jsxs","Aside","cx","styles","portal","jsx","Button","toggle","Icon","Figure","Branding","content","Nav"],"mappings":";;;;;;;;;;;;;GAmBaA,IAASA,CAAC;AAAA,EAAEC,UAAAA;AAAAA,EAAUC,SAAAA;AAAAA,EAASC,MAAAA;AAAAA,EAAMC,SAAAA;AAAqB,MACrE,gBAAAC,EAACC,GAAA,EACC,WAAWC,EAAGC,EAAOC,QAAQN,KAAQK,EAAOL,IAAI,GAChD,QAAM,IAAA,kBAAA,UAEN,UAAA;AAAA,EAAA,gBAAAO,EAACC,KACC,WAAWH,EAAOI,QAClB,SAAS,MAAMR,EAAQ,CAACD,CAAI,GAC5B,SAAS,YAET,UAAA,gBAAAO,EAACG,GAAA,EAAK,MAAK,iBAAe,GAC5B;AAAA,EACA,gBAAAH,EAACI,GAAA,EACC,UAAA,gBAAAJ,EAACK,GAAA,EACC,MAAK,QACL,MAAM,IACN,SAAQ,QAAA,CAAO,EAAA,CAEnB;AAAA,EACA,gBAAAV,EAAC,OAAA,EAAI,WAAWG,EAAOQ,SACpBd,UAAAA;AAAAA,IAAAA,KAAW,gBAAAQ,EAACO,GAAA,EAAI,YAAU,IAAEf,UAAAA,GAAQ;AAAA,IACpCD,KAAYA;AAAAA,EAAAA,EAAAA,CACf;AAAA,EAAA,CACF;"}

package/dist/components/search/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index9.css');const a=require("react/jsx-runtime"),b=require("react"),m=require("../button/index.cjs"),w=require("../checkbox/index.cjs"),B=require("../chip/index.cjs"),I=require("../collapsible/index.cjs"),T=require("../controls/index.cjs"),H=require("../dialog/index.cjs"),P=require("../header/index.cjs"),z=require("../../index-BOiGSTKz.cjs"),A="_search_1rde5_3",E="_controls_1rde5_15",J="_chips_1rde5_35",K="_radio_1rde5_101",n={search:A,controls:E,chips:J,"filter-dialog":"_filter-dialog_1rde5_42","filter-groups":"_filter-groups_1rde5_47","filter-group":"_filter-group_1rde5_47","filter-option":"_filter-option_1rde5_83","option-copy":"_option-copy_1rde5_89",radio:K,"collapsible-options":"_collapsible-options_1rde5_128"},L=({closeLabel:q="Close",filterButtonLabel:x="Filters",filterDialogColumns:f=1,filterDialogTitle:k="Filters",filterGroups:d=[],onChange:$,onSelectedFiltersChange:o,removeFilterLabel:M=i=>`Remove ${i.label} filter`,resetLabel:O="Reset",searchLabel:C="Search",searchPlaceholder:D="Search",selectedFilters:t=[],value:R=""})=>{const i=b.useId(),[j,r]=b.useState(!1),S=b.useMemo(()=>new Map(d.flatMap(e=>{var l;return[...e.options,...((l=e.collapsible)==null?void 0:l.options)??[]]}).map(e=>[e.value,e])),[d]),h=t.flatMap(e=>{const l=S.get(e);return l?[l]:[]}),_=(e,l,s)=>{var N;if(!o)return;const p=new Set([...(s==null?void 0:s.options.map(c=>c.value))??[],...((N=s==null?void 0:s.collapsible)==null?void 0:N.options.map(c=>c.value))??[]]),y=t.filter(c=>!p.has(c));if(l&&(s==null?void 0:s.defaultValue)===e){o(y);return}o(l?(s==null?void 0:s.control)==="radio"||(s==null?void 0:s.selectionMode)==="single"?[...y,e]:[...new Set([...t,e])]:t.filter(c=>c!==e))},v=(e,l)=>{var s;return t.includes(e)||l.defaultValue===e&&![...l.options,...((s=l.collapsible)==null?void 0:s.options)??[]].some(p=>t.includes(p.value))},u=(e,l)=>a.jsx("div",{className:n["filter-option"],"data-component":"renderfilter",children:l.control==="radio"?a.jsxs("label",{className:n.radio,children:[a.jsx("input",{checked:v(e.value,l),name:`${i}-filter-${l.label??"group"}`,onChange:s=>_(e.value,s.target.checked,l),type:"radio"}),a.jsxs("span",{className:n["option-copy"],children:[e.label,e.description&&a.jsx("sub",{children:e.description})]})]}):a.jsx(w.Checkbox,{checked:v(e.value,l),label:a.jsxs("span",{className:n["option-copy"],children:[e.label,e.description&&a.jsx("sub",{children:e.description})]}),onChange:s=>_(e.value,s.target.checked,l)})},e.value);return a.jsxs("div",{className:n.search,"data-component":"search",children:[a.jsxs("div",{className:n.controls,children:[a.jsx(z.Input,{"aria-label":C,icon:"search",onChange:e=>$(e.target.value),placeholder:D,type:"search",value:R}),d.length>0&&a.jsx(m.Button,{"aria-expanded":j,"aria-haspopup":"dialog",badge:h.length,icon:"funnel",onClick:()=>r(!0),variant:"tertiary",children:x})]}),h.length>0&&a.jsxs("div",{"aria-label":x,className:n.chips,children:[h.map(e=>a.jsx(B.Chip,{accessibleLabel:M(e),label:e.label,onDelete:()=>_(e.value,!1)},e.value)),a.jsx(m.Button,{onClick:()=>o==null?void 0:o([]),variant:"tertiary",children:O})]}),j&&a.jsx(H.Dialog,{"aria-labelledby":i,className:n["filter-dialog"],controls:a.jsx(T.Controls,{children:a.jsx(m.Button,{onClick:()=>r(!1),children:q})}),header:a.jsx(P.Header,{children:a.jsx("h2",{id:i,children:k})}),open:!0,setOpen:r,children:a.jsx("div",{className:n["filter-groups"],"data-columns":f,children:d.map((e,l)=>a.jsxs("section",{"aria-labelledby":e.label?`${i}-${l}`:void 0,className:n["filter-group"],"data-column-span":e.columnSpan??1,role:e.control==="radio"?"radiogroup":"group",children:[e.label&&a.jsx("h3",{id:`${i}-${l}`,children:e.label}),e.options.map(s=>u(s,e)),e.collapsible&&a.jsx(I.Collapsible,{summary:e.collapsible.label,children:a.jsx("div",{className:n["collapsible-options"],children:e.collapsible.options.map(s=>u(s,e))})})]},e.label??l))})})]})};exports.Search=L;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index9.css');const a=require("react/jsx-runtime"),b=require("react"),m=require("../button/index.cjs"),w=require("../checkbox/index.cjs"),B=require("../chip/index.cjs"),I=require("../collapsible/index.cjs"),T=require("../controls/index.cjs"),H=require("../dialog/index.cjs"),P=require("../header/index.cjs"),z=require("../../index-rXfEqyt5.cjs"),A="_search_1rde5_3",E="_controls_1rde5_15",J="_chips_1rde5_35",K="_radio_1rde5_101",n={search:A,controls:E,chips:J,"filter-dialog":"_filter-dialog_1rde5_42","filter-groups":"_filter-groups_1rde5_47","filter-group":"_filter-group_1rde5_47","filter-option":"_filter-option_1rde5_83","option-copy":"_option-copy_1rde5_89",radio:K,"collapsible-options":"_collapsible-options_1rde5_128"},L=({closeLabel:q="Close",filterButtonLabel:x="Filters",filterDialogColumns:f=1,filterDialogTitle:k="Filters",filterGroups:d=[],onChange:M,onSelectedFiltersChange:o,removeFilterLabel:$=i=>`Remove ${i.label} filter`,resetLabel:O="Reset",searchLabel:C="Search",searchPlaceholder:D="Search",selectedFilters:t=[],value:R=""})=>{const i=b.useId(),[j,r]=b.useState(!1),S=b.useMemo(()=>new Map(d.flatMap(e=>{var l;return[...e.options,...((l=e.collapsible)==null?void 0:l.options)??[]]}).map(e=>[e.value,e])),[d]),h=t.flatMap(e=>{const l=S.get(e);return l?[l]:[]}),_=(e,l,s)=>{var N;if(!o)return;const p=new Set([...(s==null?void 0:s.options.map(c=>c.value))??[],...((N=s==null?void 0:s.collapsible)==null?void 0:N.options.map(c=>c.value))??[]]),y=t.filter(c=>!p.has(c));if(l&&(s==null?void 0:s.defaultValue)===e){o(y);return}o(l?(s==null?void 0:s.control)==="radio"||(s==null?void 0:s.selectionMode)==="single"?[...y,e]:[...new Set([...t,e])]:t.filter(c=>c!==e))},v=(e,l)=>{var s;return t.includes(e)||l.defaultValue===e&&![...l.options,...((s=l.collapsible)==null?void 0:s.options)??[]].some(p=>t.includes(p.value))},u=(e,l)=>a.jsx("div",{className:n["filter-option"],"data-component":"renderfilter",children:l.control==="radio"?a.jsxs("label",{className:n.radio,children:[a.jsx("input",{checked:v(e.value,l),name:`${i}-filter-${l.label??"group"}`,onChange:s=>_(e.value,s.target.checked,l),type:"radio"}),a.jsxs("span",{className:n["option-copy"],children:[e.label,e.description&&a.jsx("sub",{children:e.description})]})]}):a.jsx(w.Checkbox,{checked:v(e.value,l),label:a.jsxs("span",{className:n["option-copy"],children:[e.label,e.description&&a.jsx("sub",{children:e.description})]}),onChange:s=>_(e.value,s.target.checked,l)})},e.value);return a.jsxs("div",{className:n.search,"data-component":"search",children:[a.jsxs("div",{className:n.controls,children:[a.jsx(z.Input,{"aria-label":C,icon:"MagnifyingGlass",onChange:e=>M(e.target.value),placeholder:D,type:"search",value:R}),d.length>0&&a.jsx(m.Button,{"aria-expanded":j,"aria-haspopup":"dialog",badge:h.length,icon:"Funnel",onClick:()=>r(!0),variant:"tertiary",children:x})]}),h.length>0&&a.jsxs("div",{"aria-label":x,className:n.chips,children:[h.map(e=>a.jsx(B.Chip,{accessibleLabel:$(e),label:e.label,onDelete:()=>_(e.value,!1)},e.value)),a.jsx(m.Button,{onClick:()=>o==null?void 0:o([]),variant:"tertiary",children:O})]}),j&&a.jsx(H.Dialog,{"aria-labelledby":i,className:n["filter-dialog"],controls:a.jsx(T.Controls,{children:a.jsx(m.Button,{onClick:()=>r(!1),children:q})}),header:a.jsx(P.Header,{children:a.jsx("h2",{id:i,children:k})}),open:!0,setOpen:r,children:a.jsx("div",{className:n["filter-groups"],"data-columns":f,children:d.map((e,l)=>a.jsxs("section",{"aria-labelledby":e.label?`${i}-${l}`:void 0,className:n["filter-group"],"data-column-span":e.columnSpan??1,role:e.control==="radio"?"radiogroup":"group",children:[e.label&&a.jsx("h3",{id:`${i}-${l}`,children:e.label}),e.options.map(s=>u(s,e)),e.collapsible&&a.jsx(I.Collapsible,{summary:e.collapsible.label,children:a.jsx("div",{className:n["collapsible-options"],children:e.collapsible.options.map(s=>u(s,e))})})]},e.label??l))})})]})};exports.Search=L;
 //# sourceMappingURL=index.cjs.map

package/dist/components/search/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/search/index.tsx"],"sourcesContent":["import { useId, useMemo, useState } from 'react';\n\nimport { Button } from '../button';\nimport { Checkbox } from '../checkbox';\nimport { Chip } from '../chip';\nimport { Collapsible } from '../collapsible';\nimport { Controls } from '../controls';\nimport { Dialog } from '../dialog';\nimport { Header } from '../header';\nimport { Input } from '../input';\nimport styles from './styles.module.css';\n\nexport type SearchFilter = {\n  description?: string;\n  label: string;\n  value: string;\n};\n\nexport type SearchFilterGroup = {\n  collapsible?: {\n    label: string;\n    options: readonly SearchFilter[];\n  };\n  columnSpan?: 1 | 2;\n  control?: 'checkbox' | 'radio';\n  defaultValue?: string;\n  label?: string;\n  options: readonly SearchFilter[];\n  selectionMode?: 'multiple' | 'single';\n};\n\nexport type SearchProps = {\n  closeLabel?: string;\n  filterButtonLabel?: string;\n  filterDialogColumns?: 1 | 2;\n  filterDialogTitle?: string;\n  filterGroups?: readonly SearchFilterGroup[];\n  onChange: (value: string) => void;\n  onSelectedFiltersChange?: (selectedFilters: string[]) => void;\n  removeFilterLabel?: (filter: SearchFilter) => string;\n  resetLabel?: string;\n  searchLabel?: string;\n  searchPlaceholder?: string;\n  selectedFilters?: readonly string[];\n  value?: string;\n};\n\nexport const Search = ({\n  closeLabel = 'Close',\n  filterButtonLabel = 'Filters',\n  filterDialogColumns = 1,\n  filterDialogTitle = 'Filters',\n  filterGroups = [],\n  onChange,\n  onSelectedFiltersChange,\n  removeFilterLabel = (filter) => `Remove ${filter.label} filter`,\n  resetLabel = 'Reset',\n  searchLabel = 'Search',\n  searchPlaceholder = 'Search',\n  selectedFilters = [],\n  value = '',\n}: SearchProps) => {\n  const dialogTitleId = useId();\n  const [isFilterDialogOpen, setIsFilterDialogOpen] = useState(false);\n  const filtersByValue = useMemo(\n    () =>\n      new Map(\n        filterGroups\n          .flatMap((group) => [...group.options, ...(group.collapsible?.options ?? [])])\n          .map((filter) => [filter.value, filter])\n      ),\n    [filterGroups]\n  );\n  const activeFilters = selectedFilters.flatMap((selectedFilter) => {\n    const filter = filtersByValue.get(selectedFilter);\n\n    return filter ? [filter] : [];\n  });\n\n  const setFilterSelected = (\n    filterValue: string,\n    isSelected: boolean,\n    group?: SearchFilterGroup\n  ) => {\n    if (!onSelectedFiltersChange) return;\n\n    const groupValues = new Set([\n      ...(group?.options.map((filter) => filter.value) ?? []),\n      ...(group?.collapsible?.options.map((filter) => filter.value) ?? []),\n    ]);\n    const filtersOutsideGroup = selectedFilters.filter(\n      (selectedFilter) => !groupValues.has(selectedFilter)\n    );\n\n    if (isSelected && group?.defaultValue === filterValue) {\n      onSelectedFiltersChange(filtersOutsideGroup);\n      return;\n    }\n\n    onSelectedFiltersChange(\n      isSelected\n        ? group?.control === 'radio' || group?.selectionMode === 'single'\n          ? [...filtersOutsideGroup, filterValue]\n          : [...new Set([...selectedFilters, filterValue])]\n        : selectedFilters.filter((selectedFilter) => selectedFilter !== filterValue)\n    );\n  };\n\n  const isFilterSelected = (filterValue: string, group: SearchFilterGroup) =>\n    selectedFilters.includes(filterValue) ||\n    (group.defaultValue === filterValue &&\n      ![...group.options, ...(group.collapsible?.options ?? [])].some((filter) =>\n        selectedFilters.includes(filter.value)\n      ));\n\n  const renderFilter = (filter: SearchFilter, group: SearchFilterGroup) => (\n    <div\n      className={styles['filter-option']}\n      key={filter.value}\n    >\n      {group.control === 'radio' ? (\n        <label className={styles.radio}>\n          <input\n            checked={isFilterSelected(filter.value, group)}\n            name={`${dialogTitleId}-filter-${group.label ?? 'group'}`}\n            onChange={(event) => setFilterSelected(filter.value, event.target.checked, group)}\n            type='radio'\n          />\n          <span className={styles['option-copy']}>\n            {filter.label}\n            {filter.description && <sub>{filter.description}</sub>}\n          </span>\n        </label>\n      ) : (\n        <Checkbox\n          checked={isFilterSelected(filter.value, group)}\n          label={\n            <span className={styles['option-copy']}>\n              {filter.label}\n              {filter.description && <sub>{filter.description}</sub>}\n            </span>\n          }\n          onChange={(event) => setFilterSelected(filter.value, event.target.checked, group)}\n        />\n      )}\n    </div>\n  );\n\n  return (\n    <div\n      className={styles.search}\n      data-component='search'\n    >\n      <div className={styles.controls}>\n        <Input\n          aria-label={searchLabel}\n          icon='search'\n          onChange={(event) => onChange(event.target.value)}\n          placeholder={searchPlaceholder}\n          type='search'\n          value={value}\n        />\n        {filterGroups.length > 0 && (\n          <Button\n            aria-expanded={isFilterDialogOpen}\n            aria-haspopup='dialog'\n            badge={activeFilters.length}\n            icon='funnel'\n            onClick={() => setIsFilterDialogOpen(true)}\n            variant='tertiary'\n          >\n            {filterButtonLabel}\n          </Button>\n        )}\n      </div>\n      {activeFilters.length > 0 && (\n        <div\n          aria-label={filterButtonLabel}\n          className={styles.chips}\n        >\n          {activeFilters.map((filter) => (\n            <Chip\n              accessibleLabel={removeFilterLabel(filter)}\n              key={filter.value}\n              label={filter.label}\n              onDelete={() => setFilterSelected(filter.value, false)}\n            />\n          ))}\n          <Button\n            onClick={() => onSelectedFiltersChange?.([])}\n            variant='tertiary'\n          >\n            {resetLabel}\n          </Button>\n        </div>\n      )}\n      {isFilterDialogOpen && (\n        <Dialog\n          aria-labelledby={dialogTitleId}\n          className={styles['filter-dialog']}\n          controls={\n            <Controls>\n              <Button onClick={() => setIsFilterDialogOpen(false)}>{closeLabel}</Button>\n            </Controls>\n          }\n          header={\n            <Header>\n              <h2 id={dialogTitleId}>{filterDialogTitle}</h2>\n            </Header>\n          }\n          open\n          setOpen={setIsFilterDialogOpen}\n        >\n          <div\n            className={styles['filter-groups']}\n            data-columns={filterDialogColumns}\n          >\n            {filterGroups.map((group, groupIndex) => (\n              <section\n                aria-labelledby={group.label ? `${dialogTitleId}-${groupIndex}` : undefined}\n                className={styles['filter-group']}\n                data-column-span={group.columnSpan ?? 1}\n                key={group.label ?? groupIndex}\n                role={group.control === 'radio' ? 'radiogroup' : 'group'}\n              >\n                {group.label && <h3 id={`${dialogTitleId}-${groupIndex}`}>{group.label}</h3>}\n                {group.options.map((filter) => renderFilter(filter, group))}\n                {group.collapsible && (\n                  <Collapsible summary={group.collapsible.label}>\n                    <div className={styles['collapsible-options']}>\n                      {group.collapsible.options.map((filter) => renderFilter(filter, group))}\n                    </div>\n                  </Collapsible>\n                )}\n              </section>\n            ))}\n          </div>\n        </Dialog>\n      )}\n    </div>\n  );\n};\n"],"names":["Search","closeLabel","filterButtonLabel","filterDialogColumns","filterDialogTitle","filterGroups","onChange","onSelectedFiltersChange","removeFilterLabel","filter","label","resetLabel","searchLabel","searchPlaceholder","selectedFilters","value","dialogTitleId","useId","isFilterDialogOpen","setIsFilterDialogOpen","useState","filtersByValue","useMemo","Map","flatMap","group","options","collapsible","map","activeFilters","selectedFilter","get","setFilterSelected","filterValue","isSelected","groupValues","Set","filtersOutsideGroup","has","defaultValue","control","selectionMode","isFilterSelected","includes","some","renderFilter","jsx","styles","radio","event","target","checked","jsxs","description","Checkbox","search","controls","Input","length","Button","chips","Chip","Dialog","Controls","Header","groupIndex","undefined","columnSpan","Collapsible"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/search/index.tsx"],"sourcesContent":["import { useId, useMemo, useState } from 'react';\n\nimport { Button } from '../button';\nimport { Checkbox } from '../checkbox';\nimport { Chip } from '../chip';\nimport { Collapsible } from '../collapsible';\nimport { Controls } from '../controls';\nimport { Dialog } from '../dialog';\nimport { Header } from '../header';\nimport { Input } from '../input';\nimport styles from './styles.module.css';\n\nexport type SearchFilter = {\n  description?: string;\n  label: string;\n  value: string;\n};\n\nexport type SearchFilterGroup = {\n  collapsible?: {\n    label: string;\n    options: readonly SearchFilter[];\n  };\n  columnSpan?: 1 | 2;\n  control?: 'checkbox' | 'radio';\n  defaultValue?: string;\n  label?: string;\n  options: readonly SearchFilter[];\n  selectionMode?: 'multiple' | 'single';\n};\n\nexport type SearchProps = {\n  closeLabel?: string;\n  filterButtonLabel?: string;\n  filterDialogColumns?: 1 | 2;\n  filterDialogTitle?: string;\n  filterGroups?: readonly SearchFilterGroup[];\n  onChange: (value: string) => void;\n  onSelectedFiltersChange?: (selectedFilters: string[]) => void;\n  removeFilterLabel?: (filter: SearchFilter) => string;\n  resetLabel?: string;\n  searchLabel?: string;\n  searchPlaceholder?: string;\n  selectedFilters?: readonly string[];\n  value?: string;\n};\n\nexport const Search = ({\n  closeLabel = 'Close',\n  filterButtonLabel = 'Filters',\n  filterDialogColumns = 1,\n  filterDialogTitle = 'Filters',\n  filterGroups = [],\n  onChange,\n  onSelectedFiltersChange,\n  removeFilterLabel = (filter) => `Remove ${filter.label} filter`,\n  resetLabel = 'Reset',\n  searchLabel = 'Search',\n  searchPlaceholder = 'Search',\n  selectedFilters = [],\n  value = '',\n}: SearchProps) => {\n  const dialogTitleId = useId();\n  const [isFilterDialogOpen, setIsFilterDialogOpen] = useState(false);\n  const filtersByValue = useMemo(\n    () =>\n      new Map(\n        filterGroups\n          .flatMap((group) => [...group.options, ...(group.collapsible?.options ?? [])])\n          .map((filter) => [filter.value, filter])\n      ),\n    [filterGroups]\n  );\n  const activeFilters = selectedFilters.flatMap((selectedFilter) => {\n    const filter = filtersByValue.get(selectedFilter);\n\n    return filter ? [filter] : [];\n  });\n\n  const setFilterSelected = (\n    filterValue: string,\n    isSelected: boolean,\n    group?: SearchFilterGroup\n  ) => {\n    if (!onSelectedFiltersChange) return;\n\n    const groupValues = new Set([\n      ...(group?.options.map((filter) => filter.value) ?? []),\n      ...(group?.collapsible?.options.map((filter) => filter.value) ?? []),\n    ]);\n    const filtersOutsideGroup = selectedFilters.filter(\n      (selectedFilter) => !groupValues.has(selectedFilter)\n    );\n\n    if (isSelected && group?.defaultValue === filterValue) {\n      onSelectedFiltersChange(filtersOutsideGroup);\n      return;\n    }\n\n    onSelectedFiltersChange(\n      isSelected\n        ? group?.control === 'radio' || group?.selectionMode === 'single'\n          ? [...filtersOutsideGroup, filterValue]\n          : [...new Set([...selectedFilters, filterValue])]\n        : selectedFilters.filter((selectedFilter) => selectedFilter !== filterValue)\n    );\n  };\n\n  const isFilterSelected = (filterValue: string, group: SearchFilterGroup) =>\n    selectedFilters.includes(filterValue) ||\n    (group.defaultValue === filterValue &&\n      ![...group.options, ...(group.collapsible?.options ?? [])].some((filter) =>\n        selectedFilters.includes(filter.value)\n      ));\n\n  const renderFilter = (filter: SearchFilter, group: SearchFilterGroup) => (\n    <div\n      className={styles['filter-option']}\n      key={filter.value}\n    >\n      {group.control === 'radio' ? (\n        <label className={styles.radio}>\n          <input\n            checked={isFilterSelected(filter.value, group)}\n            name={`${dialogTitleId}-filter-${group.label ?? 'group'}`}\n            onChange={(event) => setFilterSelected(filter.value, event.target.checked, group)}\n            type='radio'\n          />\n          <span className={styles['option-copy']}>\n            {filter.label}\n            {filter.description && <sub>{filter.description}</sub>}\n          </span>\n        </label>\n      ) : (\n        <Checkbox\n          checked={isFilterSelected(filter.value, group)}\n          label={\n            <span className={styles['option-copy']}>\n              {filter.label}\n              {filter.description && <sub>{filter.description}</sub>}\n            </span>\n          }\n          onChange={(event) => setFilterSelected(filter.value, event.target.checked, group)}\n        />\n      )}\n    </div>\n  );\n\n  return (\n    <div\n      className={styles.search}\n      data-component='search'\n    >\n      <div className={styles.controls}>\n        <Input\n          aria-label={searchLabel}\n          icon='MagnifyingGlass'\n          onChange={(event) => onChange(event.target.value)}\n          placeholder={searchPlaceholder}\n          type='search'\n          value={value}\n        />\n        {filterGroups.length > 0 && (\n          <Button\n            aria-expanded={isFilterDialogOpen}\n            aria-haspopup='dialog'\n            badge={activeFilters.length}\n            icon='Funnel'\n            onClick={() => setIsFilterDialogOpen(true)}\n            variant='tertiary'\n          >\n            {filterButtonLabel}\n          </Button>\n        )}\n      </div>\n      {activeFilters.length > 0 && (\n        <div\n          aria-label={filterButtonLabel}\n          className={styles.chips}\n        >\n          {activeFilters.map((filter) => (\n            <Chip\n              accessibleLabel={removeFilterLabel(filter)}\n              key={filter.value}\n              label={filter.label}\n              onDelete={() => setFilterSelected(filter.value, false)}\n            />\n          ))}\n          <Button\n            onClick={() => onSelectedFiltersChange?.([])}\n            variant='tertiary'\n          >\n            {resetLabel}\n          </Button>\n        </div>\n      )}\n      {isFilterDialogOpen && (\n        <Dialog\n          aria-labelledby={dialogTitleId}\n          className={styles['filter-dialog']}\n          controls={\n            <Controls>\n              <Button onClick={() => setIsFilterDialogOpen(false)}>{closeLabel}</Button>\n            </Controls>\n          }\n          header={\n            <Header>\n              <h2 id={dialogTitleId}>{filterDialogTitle}</h2>\n            </Header>\n          }\n          open\n          setOpen={setIsFilterDialogOpen}\n        >\n          <div\n            className={styles['filter-groups']}\n            data-columns={filterDialogColumns}\n          >\n            {filterGroups.map((group, groupIndex) => (\n              <section\n                aria-labelledby={group.label ? `${dialogTitleId}-${groupIndex}` : undefined}\n                className={styles['filter-group']}\n                data-column-span={group.columnSpan ?? 1}\n                key={group.label ?? groupIndex}\n                role={group.control === 'radio' ? 'radiogroup' : 'group'}\n              >\n                {group.label && <h3 id={`${dialogTitleId}-${groupIndex}`}>{group.label}</h3>}\n                {group.options.map((filter) => renderFilter(filter, group))}\n                {group.collapsible && (\n                  <Collapsible summary={group.collapsible.label}>\n                    <div className={styles['collapsible-options']}>\n                      {group.collapsible.options.map((filter) => renderFilter(filter, group))}\n                    </div>\n                  </Collapsible>\n                )}\n              </section>\n            ))}\n          </div>\n        </Dialog>\n      )}\n    </div>\n  );\n};\n"],"names":["Search","closeLabel","filterButtonLabel","filterDialogColumns","filterDialogTitle","filterGroups","onChange","onSelectedFiltersChange","removeFilterLabel","filter","label","resetLabel","searchLabel","searchPlaceholder","selectedFilters","value","dialogTitleId","useId","isFilterDialogOpen","setIsFilterDialogOpen","useState","filtersByValue","useMemo","Map","flatMap","group","options","collapsible","map","activeFilters","selectedFilter","get","setFilterSelected","filterValue","isSelected","groupValues","Set","filtersOutsideGroup","has","defaultValue","control","selectionMode","isFilterSelected","includes","some","renderFilter","jsx","styles","radio","event","target","checked","jsxs","description","Checkbox","search","controls","Input","length","Button","chips","Chip","Dialog","Controls","Header","groupIndex","undefined","columnSpan","Collapsible"],"mappings":"2xBA+CaA,EAASA,CAAC,CACrBC,WAAAA,EAAa,QACbC,kBAAAA,EAAoB,UACpBC,oBAAAA,EAAsB,EACtBC,kBAAAA,EAAoB,UACpBC,aAAAA,EAAe,CAAA,EACfC,SAAAA,EACAC,wBAAAA,EACAC,kBAAAA,EAAqBC,GAAW,UAAUA,EAAOC,KAAK,UACtDC,WAAAA,EAAa,QACbC,YAAAA,EAAc,SACdC,kBAAAA,EAAoB,SACpBC,gBAAAA,EAAkB,CAAA,EAClBC,MAAAA,EAAQ,EACG,IAAM,CACjB,MAAMC,EAAgBC,EAAAA,MAAAA,EAChB,CAACC,EAAoBC,CAAqB,EAAIC,EAAAA,SAAS,EAAK,EAC5DC,EAAiBC,EAAAA,QACrB,IACE,IAAIC,IACFlB,EACGmB,QAASC,GAAAA,OAAU,OAAC,GAAGA,EAAMC,QAAS,KAAID,EAAAA,EAAME,cAANF,YAAAA,EAAmBC,UAAW,CAAA,CAAG,EAAC,EAC5EE,OAAgB,CAACnB,EAAOM,MAAON,CAAM,CAAC,CAC3C,EACF,CAACJ,CAAY,CACf,EACMwB,EAAgBf,EAAgBU,QAASM,GAAmB,CAChE,MAAMrB,EAASY,EAAeU,IAAID,CAAc,EAEhD,OAAOrB,EAAS,CAACA,CAAM,EAAI,CAAA,CAC7B,CAAC,EAEKuB,EAAoBA,CACxBC,EACAC,EACAT,IACG,OACH,GAAI,CAAClB,EAAyB,OAE9B,MAAM4B,EAAc,IAAIC,IAAI,CAC1B,IAAIX,GAAAA,YAAAA,EAAOC,QAAQE,IAAKnB,GAAWA,EAAOM,SAAU,CAAA,EACpD,KAAIU,EAAAA,GAAAA,YAAAA,EAAOE,cAAPF,YAAAA,EAAoBC,QAAQE,IAAKnB,GAAWA,EAAOM,SAAU,CAAA,CAAG,CACrE,EACKsB,EAAsBvB,EAAgBL,OACzCqB,GAAmB,CAACK,EAAYG,IAAIR,CAAc,CACrD,EAEA,GAAII,IAAcT,GAAAA,YAAAA,EAAOc,gBAAiBN,EAAa,CACrD1B,EAAwB8B,CAAmB,EAC3C,MACF,CAEA9B,EACE2B,GACIT,GAAAA,YAAAA,EAAOe,WAAY,UAAWf,GAAAA,YAAAA,EAAOgB,iBAAkB,SACrD,CAAC,GAAGJ,EAAqBJ,CAAW,EACpC,CAAC,GAAG,IAAIG,IAAI,CAAC,GAAGtB,EAAiBmB,CAAW,CAAC,CAAC,EAChDnB,EAAgBL,OAAQqB,GAAmBA,IAAmBG,CAAW,CAC/E,CACF,EAEMS,EAAmBA,CAACT,EAAqBR,IAAAA,OAC7CX,OAAAA,EAAgB6B,SAASV,CAAW,GACnCR,EAAMc,eAAiBN,GACtB,CAAC,CAAC,GAAGR,EAAMC,QAAS,KAAID,EAAAA,EAAME,cAANF,YAAAA,EAAmBC,UAAW,CAAA,CAAG,EAAEkB,KAAMnC,GAC/DK,EAAgB6B,SAASlC,EAAOM,KAAK,CACvC,GAEE8B,EAAeA,CAACpC,EAAsBgB,IAC1CqB,EAAAA,IAAC,MAAA,CACC,UAAWC,EAAO,eAAe,EACf,iBAAA,eAEjBtB,WAAMe,UAAY,eAChB,QAAA,CAAM,UAAWO,EAAOC,MACvB,SAAA,CAAAF,EAAAA,IAAC,QAAA,CACC,QAASJ,EAAiBjC,EAAOM,MAAOU,CAAK,EAC7C,KAAM,GAAGT,CAAa,WAAWS,EAAMf,OAAS,OAAO,GACvD,SAAWuC,GAAUjB,EAAkBvB,EAAOM,MAAOkC,EAAMC,OAAOC,QAAS1B,CAAK,EAChF,KAAK,OAAA,CAAO,EAEd2B,EAAAA,KAAC,OAAA,CAAK,UAAWL,EAAO,aAAa,EAClCtC,SAAAA,CAAAA,EAAOC,MACPD,EAAO4C,aAAeP,MAAC,MAAA,CAAKrC,WAAO4C,WAAAA,CAAY,CAAA,CAAA,CAClD,CAAA,CAAA,CACF,EAEAP,EAAAA,IAACQ,EAAAA,SAAA,CACC,QAASZ,EAAiBjC,EAAOM,MAAOU,CAAK,EAC7C,MACE2B,EAAAA,KAAC,OAAA,CAAK,UAAWL,EAAO,aAAa,EAClCtC,SAAAA,CAAAA,EAAOC,MACPD,EAAO4C,aAAeP,MAAC,MAAA,CAAKrC,WAAO4C,WAAAA,CAAY,CAAA,CAAA,CAClD,EAEF,SAAWJ,GAAUjB,EAAkBvB,EAAOM,MAAOkC,EAAMC,OAAOC,QAAS1B,CAAK,CAAA,CAAE,CAAA,EAxBjFhB,EAAOM,KA2Bd,EAGF,cACG,MAAA,CACC,UAAWgC,EAAOQ,OAClB,iBAAe,SAEf,SAAA,CAAAH,EAAAA,KAAC,MAAA,CAAI,UAAWL,EAAOS,SACrB,SAAA,CAAAV,MAACW,EAAAA,OACC,aAAY7C,EACZ,KAAK,kBACL,SAAWqC,GAAU3C,EAAS2C,EAAMC,OAAOnC,KAAK,EAChD,YAAaF,EACb,KAAK,SACL,MAAAE,EAAa,EAEdV,EAAaqD,OAAS,GACrBZ,EAAAA,IAACa,EAAAA,QACC,gBAAezC,EACf,gBAAc,SACd,MAAOW,EAAc6B,OACrB,KAAK,SACL,QAAS,IAAMvC,EAAsB,EAAI,EACzC,QAAQ,WAEPjB,SAAAA,CAAAA,CACH,CAAA,EAEJ,EACC2B,EAAc6B,OAAS,GACtBN,EAAAA,KAAC,OACC,aAAYlD,EACZ,UAAW6C,EAAOa,MAEjB/B,SAAAA,CAAAA,EAAcD,OACbkB,EAAAA,IAACe,OAAA,CACC,gBAAiBrD,EAAkBC,CAAM,EAEzC,MAAOA,EAAOC,MACd,SAAU,IAAMsB,EAAkBvB,EAAOM,MAAO,EAAK,CAAA,EAFhDN,EAAOM,KAE2C,CAE1D,EACD+B,EAAAA,IAACa,EAAAA,OAAA,CACC,QAAS,IAAMpD,GAAAA,YAAAA,EAA0B,IACzC,QAAQ,WAEPI,SAAAA,CAAAA,CACH,CAAA,EACF,EAEDO,GACC4B,EAAAA,IAACgB,EAAAA,OAAA,CACC,kBAAiB9C,EACjB,UAAW+B,EAAO,eAAe,EACjC,SACED,MAACiB,EAAAA,SAAA,CACC,SAAAjB,EAAAA,IAACa,EAAAA,OAAA,CAAO,QAAS,IAAMxC,EAAsB,EAAK,EAAIlB,SAAAA,CAAAA,CAAW,CAAA,CACnE,EAEF,aACG+D,EAAAA,OAAA,CACC,SAAAlB,MAAC,KAAA,CAAG,GAAI9B,EAAgBZ,SAAAA,CAAAA,CAAkB,CAAA,CAC5C,EAEF,KAAI,GACJ,QAASe,EAET,SAAA2B,EAAAA,IAAC,MAAA,CACC,UAAWC,EAAO,eAAe,EACjC,eAAc5C,EAEbE,SAAAA,EAAauB,IAAI,CAACH,EAAOwC,IACxBb,EAAAA,KAAC,UAAA,CACC,kBAAiB3B,EAAMf,MAAQ,GAAGM,CAAa,IAAIiD,CAAU,GAAKC,OAClE,UAAWnB,EAAO,cAAc,EAChC,mBAAkBtB,EAAM0C,YAAc,EAEtC,KAAM1C,EAAMe,UAAY,QAAU,aAAe,QAEhDf,SAAAA,CAAAA,EAAMf,OAASoC,EAAAA,IAAC,KAAA,CAAG,GAAI,GAAG9B,CAAa,IAAIiD,CAAU,GAAKxC,SAAAA,EAAMf,KAAAA,CAAM,EACtEe,EAAMC,QAAQE,OAAgBiB,EAAapC,EAAQgB,CAAK,CAAC,EACzDA,EAAME,aACLmB,EAAAA,IAACsB,EAAAA,YAAA,CAAY,QAAS3C,EAAME,YAAYjB,MACtC,SAAAoC,MAAC,MAAA,CAAI,UAAWC,EAAO,qBAAqB,EACzCtB,SAAAA,EAAME,YAAYD,QAAQE,IAAKnB,GAAWoC,EAAapC,EAAQgB,CAAK,CAAC,CAAA,CACxE,CAAA,CACF,CAAA,CAAA,EAVGA,EAAMf,OAASuD,CAYtB,CACD,EACH,CAAA,CACF,CAAA,EAEJ,CAEJ"}

package/dist/components/search/index.js

@@ -7,7 +7,7 @@ import { Collapsible as A } from "../collapsible/index.js";
 import { Controls as E } from "../controls/index.js";
 import { Dialog as J } from "../dialog/index.js";
 import { Header as K } from "../header/index.js";
-import { I as L } from "../../index-DMGGDV9J.js";
+import { I as L } from "../../index-m3slpD7c.js";
 import '../../assets/index9.css';const P = "_search_1rde5_3", Q = "_controls_1rde5_15", U = "_chips_1rde5_35", V = "_radio_1rde5_101", o = {
   search: P,
   controls: Q,
@@ -64,8 +64,8 @@ import '../../assets/index9.css';const P = "_search_1rde5_3", Q = "_controls_1rd
   ] }), onChange: (e) => p(a.value, e.target.checked, l) }) }, a.value);
   return /* @__PURE__ */ c("div", { className: o.search, "data-component": "search", children: [
     /* @__PURE__ */ c("div", { className: o.controls, children: [
-      /* @__PURE__ */ i(L, { "aria-label": I, icon: "search", onChange: (a) => O(a.target.value), placeholder: j, type: "search", value: R }),
-      d.length > 0 && /* @__PURE__ */ i(_, { "aria-expanded": f, "aria-haspopup": "dialog", badge: h.length, icon: "funnel", onClick: () => m(!0), variant: "tertiary", children: v })
+      /* @__PURE__ */ i(L, { "aria-label": I, icon: "MagnifyingGlass", onChange: (a) => O(a.target.value), placeholder: j, type: "search", value: R }),
+      d.length > 0 && /* @__PURE__ */ i(_, { "aria-expanded": f, "aria-haspopup": "dialog", badge: h.length, icon: "Funnel", onClick: () => m(!0), variant: "tertiary", children: v })
     ] }),
     h.length > 0 && /* @__PURE__ */ c("div", { "aria-label": v, className: o.chips, children: [
       h.map((a) => /* @__PURE__ */ i(z, { accessibleLabel: w(a), label: a.label, onDelete: () => p(a.value, !1) }, a.value)),