@livechat/design-system-react-components 1.17.1-alpha.3 → 1.17.1-alpha.4

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

@@ -0,0 +1,244 @@
+var X = Object.defineProperty, j = Object.defineProperties;
+var q = Object.getOwnPropertyDescriptors;
+var E = Object.getOwnPropertySymbols;
+var w = Object.prototype.hasOwnProperty, N = Object.prototype.propertyIsEnumerable;
+var h = (t, e, n) => e in t ? X(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n, D = (t, e) => {
+  for (var n in e || (e = {}))
+    w.call(e, n) && h(t, n, e[n]);
+  if (E)
+    for (var n of E(e))
+      N.call(e, n) && h(t, n, e[n]);
+  return t;
+}, $ = (t, e) => j(t, q(e));
+var z = (t, e) => {
+  var n = {};
+  for (var r in t)
+    w.call(t, r) && e.indexOf(r) < 0 && (n[r] = t[r]);
+  if (t != null && E)
+    for (var r of E(t))
+      e.indexOf(r) < 0 && N.call(t, r) && (n[r] = t[r]);
+  return n;
+};
+import * as c from "react";
+import O from "clsx";
+import { K as i } from "../../chunks/keyCodes-30323e90.js";
+import { FieldError as A } from "../FieldError/index.es.js";
+import "../../chunks/Typography.module-93efb34d.js";
+import { T as J } from "../../chunks/Text-b31d1e9a.js";
+import { Tag as Q } from "../Tag/index.es.js";
+import P from "lodash.escape";
+import "@livechat/design-system-icons";
+import "../Icon/index.es.js";
+import "polished";
+const U = ({
+  className: t = "",
+  innerEditableRef: e,
+  inputRef: n,
+  change: r,
+  remove: u,
+  value: _
+}) => {
+  const [m, x] = c.useState(!1), s = () => e.current, p = () => {
+    const o = s();
+    return o ? o.innerText : "";
+  }, f = () => {
+    n && n.current && n.current.focus();
+  }, y = (o) => {
+    if (o.key === i.enter) {
+      o.preventDefault(), f();
+      return;
+    }
+    o.key === i.backspace && p() === "" && (x(!0), u(), f());
+  }, R = () => {
+    const o = s();
+    if (!(m || !o)) {
+      if (o.innerText === "") {
+        u();
+        return;
+      }
+      r(o.innerText);
+    }
+  }, b = (o) => {
+    o.preventDefault();
+    const I = o.clipboardData.getData("text/plain");
+    document.execCommand("insertHTML", !1, P(I));
+  };
+  return /* @__PURE__ */ c.createElement(
+    "div",
+    {
+      ref: e,
+      className: t,
+      contentEditable: !0,
+      onPaste: b,
+      onBlur: R,
+      onKeyDown: y,
+      dangerouslySetInnerHTML: { __html: P(_) }
+    }
+  );
+}, T = {
+  "tag-input": "lc-TagInput-module__tag-input___CLVY-",
+  "tag-input--error": "lc-TagInput-module__tag-input--error___RP0SB",
+  "tag-input__input": "lc-TagInput-module__tag-input__input___dgEYB",
+  "tag-input__input--medium": "lc-TagInput-module__tag-input__input--medium___DYF7X",
+  "tag-input__input--large": "lc-TagInput-module__tag-input__input--large___G6iEO",
+  "tag-input__tag__content": "lc-TagInput-module__tag-input__tag__content___x95-M"
+}, W = "tag-input__tag", Z = ({
+  children: t,
+  index: e,
+  remove: n,
+  validator: r,
+  inputRef: u,
+  update: _,
+  size: m
+}) => {
+  const x = c.useMemo(() => r !== void 0 ? r(t) : !0, [t, r]), s = c.useRef(null), p = () => n(e);
+  return /* @__PURE__ */ c.createElement(
+    Q,
+    {
+      kind: x ? "default" : "error",
+      dismissible: !0,
+      size: m,
+      onRemove: p
+    },
+    /* @__PURE__ */ c.createElement(
+      U,
+      {
+        value: t,
+        inputRef: u,
+        innerEditableRef: s,
+        className: T[`${W}__content`],
+        change: (f) => _(e, f),
+        remove: p,
+        validator: r
+      }
+    )
+  );
+}, v = "tag-input", ee = [
+  i.enter,
+  i.spacebar,
+  i.tab,
+  i.semicolon,
+  i.comma
+], te = [i.backspace, i.delete], ne = (R) => {
+  var b = R, {
+    id: t,
+    tags: e,
+    onChange: n,
+    validator: r,
+    error: u,
+    placeholder: _,
+    size: m = "medium",
+    className: x,
+    inputClassName: s,
+    onBlur: p,
+    addOnBlur: f = !0
+  } = b, y = z(b, [
+    "id",
+    "tags",
+    "onChange",
+    "validator",
+    "error",
+    "placeholder",
+    "size",
+    "className",
+    "inputClassName",
+    "onBlur",
+    "addOnBlur"
+  ]);
+  const o = O(
+    T[v],
+    {
+      [T[`${v}--error`]]: u
+    },
+    x
+  ), I = O(
+    s,
+    T[`${v}__input`],
+    T[`${v}__input--${m}`]
+  ), [g, k] = c.useState(""), V = c.useRef(null), C = (a) => {
+    n([...e || [], a]), k("");
+  }, K = (a) => {
+    const l = [...e || []];
+    l.splice(a, 1), n(l);
+  }, S = (a) => k(a.target.value), M = (a) => {
+    if (ee.includes(a.key)) {
+      if (a.preventDefault(), g === "")
+        return;
+      C(g);
+    } else if (te.includes(a.key)) {
+      if (g !== "" || !(e != null && e.length))
+        return;
+      K(e.length - 1);
+    }
+  }, F = (a) => {
+    f && C(g), p == null || p(a);
+  }, L = (a, l) => {
+    const d = [...e || []];
+    d.reduce(
+      (H, B, G) => H + (B === l && G !== a ? 1 : 0),
+      0
+    ) > 0 ? d.splice(a, 1) : d[a] = l, n(d);
+  }, Y = (a) => {
+    a.preventDefault();
+    const d = a.clipboardData.getData("text/plain").split(/[\s,;\n]+/);
+    n([...e || [], ...d]);
+  };
+  return /* @__PURE__ */ c.createElement(c.Fragment, null, /* @__PURE__ */ c.createElement(J, { as: "div", className: o }, e == null ? void 0 : e.map((a, l) => /* @__PURE__ */ c.createElement(
+    Z,
+    {
+      index: l,
+      key: `${l}${a}`,
+      update: L,
+      remove: K,
+      inputRef: V,
+      validator: r,
+      size: m
+    },
+    a
+  )), /* @__PURE__ */ c.createElement(
+    "input",
+    $(D({}, y), {
+      id: t,
+      ref: V,
+      className: I,
+      placeholder: _,
+      value: g,
+      onChange: S,
+      onKeyDown: M,
+      onPaste: Y,
+      onBlur: F
+    })
+  )), u && /* @__PURE__ */ c.createElement(A, null, u));
+}, ae = /^(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)])$/i, re = "name@company.com", oe = (t) => ae.test(t), Te = (x) => {
+  var s = x, {
+    id: t,
+    tags: e,
+    onChange: n,
+    error: r,
+    placeholder: u = re,
+    size: _
+  } = s, m = z(s, [
+    "id",
+    "tags",
+    "onChange",
+    "error",
+    "placeholder",
+    "size"
+  ]);
+  return /* @__PURE__ */ c.createElement(
+    ne,
+    $(D({}, m), {
+      id: t,
+      tags: e,
+      error: r,
+      onChange: n,
+      placeholder: u,
+      validator: oe,
+      size: _
+    })
+  );
+};
+export {
+  Te as EmailTagInput,
+  ne as TagInput
+};

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

@@ -0,0 +1 @@
+"use strict";var v=Object.defineProperty,S=Object.defineProperties;var E=Object.getOwnPropertyDescriptors;var s=Object.getOwnPropertySymbols;var f=Object.prototype.hasOwnProperty,m=Object.prototype.propertyIsEnumerable;var x=(e,a,t)=>a in e?v(e,a,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[a]=t,b=(e,a)=>{for(var t in a||(a={}))f.call(a,t)&&x(e,t,a[t]);if(s)for(var t of s(a))m.call(a,t)&&x(e,t,a[t]);return e},T=(e,a)=>S(e,E(a));var g=(e,a)=>{var t={};for(var r in e)f.call(e,r)&&a.indexOf(r)<0&&(t[r]=e[r]);if(e!=null&&s)for(var r of s(e))a.indexOf(r)<0&&m.call(e,r)&&(t[r]=e[r]);return t};Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const F=require("react"),N=require("clsx");require("../../chunks/Typography.module-2558416b.js");const R=require("../../chunks/Text-df483689.js");function $(e){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(a,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return a.default=e,Object.freeze(a)}const c=$(F),h="lc-Textarea-module__textarea___g6U8F",o={textarea:h,"textarea--focused":"lc-Textarea-module__textarea--focused___1vtEx","textarea--disabled":"lc-Textarea-module__textarea--disabled___xXaGv","textarea--error":"lc-Textarea-module__textarea--error___0EGuq"},n="textarea",w=c.forwardRef((C,r)=>{var _=C,{className:e,error:a}=_,t=g(_,["className","error"]);const{disabled:O,onBlur:l,onFocus:u}=t,[p,i]=c.useState(!1),y=N(e,o[n],{[o[`${n}--disabled`]]:O,[o[`${n}--focused`]]:p,[o[`${n}--error`]]:a}),j=d=>{i(!1),l==null||l(d)},q=d=>{i(!0),u==null||u(d)};return c.createElement(R.Text,{as:"div",className:y},c.createElement("textarea",T(b({},t),{ref:r,onFocus:q,onBlur:j})))});exports.Textarea=w;

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

@@ -0,0 +1,55 @@
+var h = Object.defineProperty, C = Object.defineProperties;
+var G = Object.getOwnPropertyDescriptors;
+var s = Object.getOwnPropertySymbols;
+var f = Object.prototype.hasOwnProperty, i = Object.prototype.propertyIsEnumerable;
+var u = (e, a, t) => a in e ? h(e, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[a] = t, T = (e, a) => {
+  for (var t in a || (a = {}))
+    f.call(a, t) && u(e, t, a[t]);
+  if (s)
+    for (var t of s(a))
+      i.call(a, t) && u(e, t, a[t]);
+  return e;
+}, b = (e, a) => C(e, G(a));
+var p = (e, a) => {
+  var t = {};
+  for (var r in e)
+    f.call(e, r) && a.indexOf(r) < 0 && (t[r] = e[r]);
+  if (e != null && s)
+    for (var r of s(e))
+      a.indexOf(r) < 0 && i.call(e, r) && (t[r] = e[r]);
+  return t;
+};
+import * as o from "react";
+import N from "clsx";
+import "../../chunks/Typography.module-93efb34d.js";
+import { T as O } from "../../chunks/Text-b31d1e9a.js";
+const R = "lc-Textarea-module__textarea___g6U8F", c = {
+  textarea: R,
+  "textarea--focused": "lc-Textarea-module__textarea--focused___1vtEx",
+  "textarea--disabled": "lc-Textarea-module__textarea--disabled___xXaGv",
+  "textarea--error": "lc-Textarea-module__textarea--error___0EGuq"
+}, l = "textarea", S = o.forwardRef(
+  (q, r) => {
+    var m = q, { className: e, error: a } = m, t = p(m, ["className", "error"]);
+    const { disabled: E, onBlur: d, onFocus: x } = t, [F, n] = o.useState(!1), v = N(e, c[l], {
+      [c[`${l}--disabled`]]: E,
+      [c[`${l}--focused`]]: F,
+      [c[`${l}--error`]]: a
+    }), $ = (_) => {
+      n(!1), d == null || d(_);
+    }, g = (_) => {
+      n(!0), x == null || x(_);
+    };
+    return /* @__PURE__ */ o.createElement(O, { as: "div", className: v }, /* @__PURE__ */ o.createElement(
+      "textarea",
+      b(T({}, t), {
+        ref: r,
+        onFocus: g,
+        onBlur: $
+      })
+    ));
+  }
+);
+export {
+  S as Textarea
+};

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

@@ -0,0 +1 @@
+"use strict";var O=Object.defineProperty,j=Object.defineProperties;var M=Object.getOwnPropertyDescriptors;var d=Object.getOwnPropertySymbols;var $=Object.prototype.hasOwnProperty,N=Object.prototype.propertyIsEnumerable;var x=(t,o,e)=>o in t?O(t,o,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[o]=e,w=(t,o)=>{for(var e in o||(o={}))$.call(o,e)&&x(t,e,o[e]);if(d)for(var e of d(o))N.call(o,e)&&x(t,e,o[e]);return t},C=(t,o)=>j(t,M(o));var E=(t,o)=>{var e={};for(var a in t)$.call(t,a)&&o.indexOf(a)<0&&(e[a]=t[a]);if(t!=null&&d)for(var a of d(t))o.indexOf(a)<0&&N.call(t,a)&&(e[a]=t[a]);return e};Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const G=require("react"),u=require("@livechat/design-system-icons"),v=require("clsx"),h=require("../Button/index.cjs.js"),I=require("../Icon/index.cjs.js");require("../../chunks/Typography.module-2558416b.js");const y=require("../../chunks/Text-df483689.js"),k=require("react-transition-group");require("../Loader/index.cjs.js");function S(t){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const e in t)if(e!=="default"){const a=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(o,e,a.get?a:{enumerable:!0,get:()=>t[e]})}}return o.default=t,Object.freeze(o)}const _=S(G),B="lc-Toast-module__toast___j5Amn",W="lc-Toast-module__toast__content___HjaNw",D="lc-Toast-module__toast__actions___JWu-1",H="lc-Toast-module__toast__actions__button___Iblrl",s={toast:B,toast__content:W,toast__actions:D,toast__actions__button:H,"toast__actions__button--success":"lc-Toast-module__toast__actions__button--success___5JmFw","toast__actions__button--warning":"lc-Toast-module__toast__actions__button--warning___zGQ-Q","toast__actions__button--error":"lc-Toast-module__toast__actions__button--error___PuTv3","toast__actions__button--info":"lc-Toast-module__toast__actions__button--info___fNtsj","toast__actions--custom":"lc-Toast-module__toast__actions--custom___lm-pM","toast--success":"lc-Toast-module__toast--success___7UC6m","toast--warning":"lc-Toast-module__toast--warning___pteb7","toast--error":"lc-Toast-module__toast--error___trg--","toast--info":"lc-Toast-module__toast--info___IOp44","toast-wrapper":"lc-Toast-module__toast-wrapper___Oiwqp","toast-wrapper--fixed":"lc-Toast-module__toast-wrapper--fixed___QYxRI","toast-wrapper--block":"lc-Toast-module__toast-wrapper--block___j0kGt","toast-wrapper--horizontal-center":"lc-Toast-module__toast-wrapper--horizontal-center___t9AFd","toast-wrapper--horizontal-left":"lc-Toast-module__toast-wrapper--horizontal-left___-GY4I","toast-wrapper--horizontal-right":"lc-Toast-module__toast-wrapper--horizontal-right___VVMgm","toast-wrapper--vertical-top":"lc-Toast-module__toast-wrapper--vertical-top___uBfEG","toast-appear--slide":"lc-Toast-module__toast-appear--slide___G7GAp","toast-appear-active--slide":"lc-Toast-module__toast-appear-active--slide___brfgK","toast-exit--slide":"lc-Toast-module__toast-exit--slide___aqiBq","toast-exit-active--slide":"lc-Toast-module__toast-exit-active--slide___WryMi","toast-wrapper--vertical-bottom":"lc-Toast-module__toast-wrapper--vertical-bottom___erPuH","toast-appear--fade":"lc-Toast-module__toast-appear--fade___oUwHm","toast-appear-active--fade":"lc-Toast-module__toast-appear-active--fade___D3--J","toast-exit--fade":"lc-Toast-module__toast-exit--fade___iDA1p","toast-exit-active--fade":"lc-Toast-module__toast-exit-active--fade___tL7sb"},J={success:{source:u.CheckCircle},warning:{source:u.Warning},error:{source:u.Block},info:{source:u.Info}},r="toast",q=g=>{var m=g,{action:t,className:o,children:e,removable:a,kind:c="info",onClose:n}=m,p=E(m,["action","className","children","removable","kind","onClose"]);const T=v(s[r],s[`${r}--${c}`],o),f=typeof e=="string",b=l=>l&&l.closesOnClick&&n?(l.onClick(),n()):l.onClick();return _.createElement("div",w({className:T},p),_.createElement("div",{className:s[`${r}__icon`]},_.createElement(I.Icon,C(w({},J[c]),{size:"medium"}))),_.createElement("div",{className:s[`${r}__content`]},f?_.createElement(y.Text,{as:"div"},e):e),(t||a)&&_.createElement("div",{className:s[`${r}__actions`]},t&&_.createElement(h.Button,{className:s[`${r}__actions--custom`],kind:"text",size:"compact",onClick:()=>b(t)},t.label),a&&_.createElement("button",{className:v(s[`${r}__actions__button`],s[`${r}__actions__button--${c}`]),"aria-label":"Close toast",onClick:n},_.createElement(I.Icon,{source:u.Close,size:"medium"}))))},z=200,i="toast-wrapper",P=({className:t,toasts:o=[],fixed:e=!0,block:a=!1,animationType:c="slide",verticalPosition:n="top",horizontalPosition:p="center"})=>{const g=v(s[i],{[s[`${i}--fixed`]]:e,[s[`${i}--block`]]:!e&&a,[s[`${i}--horizontal-${p}`]]:p,[s[`${i}--vertical-${n}`]]:n},t);return _.createElement("div",{className:g},_.createElement(k.TransitionGroup,{component:null},o.map(({id:m,kind:T,content:f,removable:b,action:l,onClose:A})=>_.createElement(k.CSSTransition,{key:m,classNames:{enter:s[`toast-appear--${c}`],enterActive:s[`toast-appear-active--${c}`],exit:s[`toast-exit--${c}`],exitActive:s[`toast-exit-active--${c}`]},timeout:z},_.createElement(q,{kind:T,onClose:A,removable:b,action:l},f)))))};exports.ANIMATION_TIME=z;exports.Toast=q;exports.ToastWrapper=P;

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

@@ -0,0 +1,163 @@
+var z = Object.defineProperty, A = Object.defineProperties;
+var I = Object.getOwnPropertyDescriptors;
+var u = Object.getOwnPropertySymbols;
+var $ = Object.prototype.hasOwnProperty, C = Object.prototype.propertyIsEnumerable;
+var x = (t, a, o) => a in t ? z(t, a, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[a] = o, b = (t, a) => {
+  for (var o in a || (a = {}))
+    $.call(a, o) && x(t, o, a[o]);
+  if (u)
+    for (var o of u(a))
+      C.call(a, o) && x(t, o, a[o]);
+  return t;
+}, g = (t, a) => A(t, I(a));
+var E = (t, a) => {
+  var o = {};
+  for (var _ in t)
+    $.call(t, _) && a.indexOf(_) < 0 && (o[_] = t[_]);
+  if (t != null && u)
+    for (var _ of u(t))
+      a.indexOf(_) < 0 && C.call(t, _) && (o[_] = t[_]);
+  return o;
+};
+import * as s from "react";
+import { Close as h, CheckCircle as G, Warning as M, Block as j, Info as B } from "@livechat/design-system-icons";
+import w from "clsx";
+import { Button as O } from "../Button/index.es.js";
+import { Icon as N } from "../Icon/index.es.js";
+import "../../chunks/Typography.module-93efb34d.js";
+import { T as W } from "../../chunks/Text-b31d1e9a.js";
+import { TransitionGroup as q, CSSTransition as H } from "react-transition-group";
+import "../Loader/index.es.js";
+const J = "lc-Toast-module__toast___j5Amn", Q = "lc-Toast-module__toast__content___HjaNw", D = "lc-Toast-module__toast__actions___JWu-1", F = "lc-Toast-module__toast__actions__button___Iblrl", e = {
+  toast: J,
+  toast__content: Q,
+  toast__actions: D,
+  toast__actions__button: F,
+  "toast__actions__button--success": "lc-Toast-module__toast__actions__button--success___5JmFw",
+  "toast__actions__button--warning": "lc-Toast-module__toast__actions__button--warning___zGQ-Q",
+  "toast__actions__button--error": "lc-Toast-module__toast__actions__button--error___PuTv3",
+  "toast__actions__button--info": "lc-Toast-module__toast__actions__button--info___fNtsj",
+  "toast__actions--custom": "lc-Toast-module__toast__actions--custom___lm-pM",
+  "toast--success": "lc-Toast-module__toast--success___7UC6m",
+  "toast--warning": "lc-Toast-module__toast--warning___pteb7",
+  "toast--error": "lc-Toast-module__toast--error___trg--",
+  "toast--info": "lc-Toast-module__toast--info___IOp44",
+  "toast-wrapper": "lc-Toast-module__toast-wrapper___Oiwqp",
+  "toast-wrapper--fixed": "lc-Toast-module__toast-wrapper--fixed___QYxRI",
+  "toast-wrapper--block": "lc-Toast-module__toast-wrapper--block___j0kGt",
+  "toast-wrapper--horizontal-center": "lc-Toast-module__toast-wrapper--horizontal-center___t9AFd",
+  "toast-wrapper--horizontal-left": "lc-Toast-module__toast-wrapper--horizontal-left___-GY4I",
+  "toast-wrapper--horizontal-right": "lc-Toast-module__toast-wrapper--horizontal-right___VVMgm",
+  "toast-wrapper--vertical-top": "lc-Toast-module__toast-wrapper--vertical-top___uBfEG",
+  "toast-appear--slide": "lc-Toast-module__toast-appear--slide___G7GAp",
+  "toast-appear-active--slide": "lc-Toast-module__toast-appear-active--slide___brfgK",
+  "toast-exit--slide": "lc-Toast-module__toast-exit--slide___aqiBq",
+  "toast-exit-active--slide": "lc-Toast-module__toast-exit-active--slide___WryMi",
+  "toast-wrapper--vertical-bottom": "lc-Toast-module__toast-wrapper--vertical-bottom___erPuH",
+  "toast-appear--fade": "lc-Toast-module__toast-appear--fade___oUwHm",
+  "toast-appear-active--fade": "lc-Toast-module__toast-appear-active--fade___D3--J",
+  "toast-exit--fade": "lc-Toast-module__toast-exit--fade___iDA1p",
+  "toast-exit-active--fade": "lc-Toast-module__toast-exit-active--fade___tL7sb"
+}, R = {
+  success: {
+    source: G
+  },
+  warning: {
+    source: M
+  },
+  error: {
+    source: j
+  },
+  info: {
+    source: B
+  }
+}, r = "toast", S = (v) => {
+  var p = v, {
+    action: t,
+    className: a,
+    children: o,
+    removable: _,
+    kind: c = "info",
+    onClose: l
+  } = p, m = E(p, [
+    "action",
+    "className",
+    "children",
+    "removable",
+    "kind",
+    "onClose"
+  ]);
+  const d = w(
+    e[r],
+    e[`${r}--${c}`],
+    a
+  ), T = typeof o == "string", f = (n) => n && n.closesOnClick && l ? (n.onClick(), l()) : n.onClick();
+  return /* @__PURE__ */ s.createElement("div", b({ className: d }, m), /* @__PURE__ */ s.createElement("div", { className: e[`${r}__icon`] }, /* @__PURE__ */ s.createElement(N, g(b({}, R[c]), { size: "medium" }))), /* @__PURE__ */ s.createElement("div", { className: e[`${r}__content`] }, T ? /* @__PURE__ */ s.createElement(W, { as: "div" }, o) : o), (t || _) && /* @__PURE__ */ s.createElement("div", { className: e[`${r}__actions`] }, t && /* @__PURE__ */ s.createElement(
+    O,
+    {
+      className: e[`${r}__actions--custom`],
+      kind: "text",
+      size: "compact",
+      onClick: () => f(t)
+    },
+    t.label
+  ), _ && /* @__PURE__ */ s.createElement(
+    "button",
+    {
+      className: w(
+        e[`${r}__actions__button`],
+        e[`${r}__actions__button--${c}`]
+      ),
+      "aria-label": "Close toast",
+      onClick: l
+    },
+    /* @__PURE__ */ s.createElement(N, { source: h, size: "medium" })
+  )));
+}, U = 200, i = "toast-wrapper", ot = ({
+  className: t,
+  toasts: a = [],
+  fixed: o = !0,
+  block: _ = !1,
+  animationType: c = "slide",
+  verticalPosition: l = "top",
+  horizontalPosition: m = "center"
+}) => {
+  const v = w(
+    e[i],
+    {
+      [e[`${i}--fixed`]]: o,
+      [e[`${i}--block`]]: !o && _,
+      [e[`${i}--horizontal-${m}`]]: m,
+      [e[`${i}--vertical-${l}`]]: l
+    },
+    t
+  );
+  return /* @__PURE__ */ s.createElement("div", { className: v }, /* @__PURE__ */ s.createElement(q, { component: null }, a.map(({ id: p, kind: d, content: T, removable: f, action: n, onClose: k }) => /* @__PURE__ */ s.createElement(
+    H,
+    {
+      key: p,
+      classNames: {
+        enter: e[`toast-appear--${c}`],
+        enterActive: e[`toast-appear-active--${c}`],
+        exit: e[`toast-exit--${c}`],
+        exitActive: e[`toast-exit-active--${c}`]
+      },
+      timeout: U
+    },
+    /* @__PURE__ */ s.createElement(
+      S,
+      {
+        kind: d,
+        onClose: k,
+        removable: f,
+        action: n
+      },
+      T
+    )
+  ))));
+};
+export {
+  U as ANIMATION_TIME,
+  S as Toast,
+  ot as ToastWrapper
+};

package/dist/components/Tooltip/components/UserGuide/index.cjs.js

@@ -0,0 +1 @@
+"use strict";var R=Object.defineProperty,S=Object.defineProperties;var C=Object.getOwnPropertyDescriptors;var p=Object.getOwnPropertySymbols;var N=Object.prototype.hasOwnProperty,B=Object.prototype.propertyIsEnumerable;var v=(e,t,n)=>t in e?R(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,_=(e,t)=>{for(var n in t||(t={}))N.call(t,n)&&v(e,n,t[n]);if(p)for(var n of p(t))B.call(t,n)&&v(e,n,t[n]);return e},$=(e,t)=>S(e,C(t));var f=(e,t,n)=>(v(e,typeof t!="symbol"?t+"":t,n),n);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const O=require("react"),h=require("clsx"),l=require("../../../../chunks/Tooltip-f9f79274.js");require("@floating-ui/react");require("../../../../chunks/Typography.module-2558416b.js");require("../../../../chunks/Text-df483689.js");function P(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const s=P(O),i="guide-tooltip",q=({gap:e,isVisible:t,slide:n,disablePointerEvents:o})=>{if(!e)return null;const c={top:`${e.top}px`,left:"0",width:`${e.left}px`,height:`${e.height}px`},r={top:`${e.top}px`,left:`${e.right}px`,width:`calc(100% - ${e.right}px)`,height:`${e.height}px`},d={top:"0",left:"0",width:"100%",height:`${e.top}px`},a={top:`${e.bottom}px`,left:"0",width:"100%",height:`calc(100% - ${e.bottom}px)`},u={top:`${e.top}px`,left:`${e.left}px`,width:`${e.width}px`,height:`${e.height}px`,backgroundColor:"transparent"};return s.createElement(s.Fragment,null,s.createElement("div",{className:h({[l.styles[`${i}__overlay`]]:!0,[l.styles[`${i}__overlay--visible`]]:t,[l.styles[`${i}__overlay--slide`]]:n}),style:c}),s.createElement("div",{className:h({[l.styles[`${i}__overlay`]]:!0,[l.styles[`${i}__overlay--visible`]]:t,[l.styles[`${i}__overlay--slide`]]:n}),style:d}),s.createElement("div",{className:h({[l.styles[`${i}__overlay`]]:!0,[l.styles[`${i}__overlay--visible`]]:t,[l.styles[`${i}__overlay--slide`]]:n}),style:r}),s.createElement("div",{className:h({[l.styles[`${i}__overlay`]]:!0,[l.styles[`${i}__overlay--visible`]]:t,[l.styles[`${i}__overlay--slide`]]:n}),style:a}),o&&s.createElement("div",{className:h({[l.styles[`${i}__overlay`]]:!0,[l.styles[`${i}__overlay--visible`]]:t,[l.styles[`${i}__overlay--slide`]]:n}),style:u}))};class M{constructor(t,n){f(this,"element");f(this,"padding");this.element=t,this.padding=n}addPadding(t){const n=Math.round(t.left)-this.padding,o=Math.round(t.top)-this.padding,c=Math.round(t.width)+2*this.padding,r=Math.round(t.height)+2*this.padding,d=o,a=n,u=d+r,y=a+c;return{x:n,y:o,width:c,height:r,top:d,left:a,bottom:u,right:y}}getBoundingClientRect(){return this.addPadding(this.element.getBoundingClientRect())}get clientWidth(){return this.getBoundingClientRect().width}get clientHeight(){return this.getBoundingClientRect().height}}const E=8,w="guide-tooltip",b=(e,t)=>new M(e,t),j=e=>{const{className:t,parentElementName:n,isVisible:o=!1,shouldSlide:c=!0}=e,[r,d]=s.useState(null),[a,u]=s.useState(null),[y,m]=s.useState(c),g=()=>{r&&(u(b(r,E).getBoundingClientRect()),m(!1))};return s.useEffect(()=>{if(r!==null)return window.addEventListener("resize",g),window.addEventListener("scroll",g),()=>{window.addEventListener("resize",g),window.addEventListener("resize",g)}},[r,n]),s.useEffect(()=>{if(n){const x=document.querySelector(n);d(x)}},[n]),s.useEffect(()=>{r&&u(b(r,E).getBoundingClientRect()),m(!0)},[r]),r&&o?s.createElement("div",null,s.createElement(q,{gap:a,isVisible:o,slide:y,disablePointerEvents:!0}),s.createElement(l.Tooltip,$(_({},e),{referenceElement:{getBoundingClientRect:()=>a,contextElement:r},arrowOffsetY:25,className:h({[l.styles[w]]:!0,[l.styles[`${w}--slide`]]:y,className:t})}),e.children)):null};exports.UserGuide=j;

package/dist/components/Tooltip/components/UserGuide/index.es.js

@@ -0,0 +1,196 @@
+var C = Object.defineProperty, b = Object.defineProperties;
+var B = Object.getOwnPropertyDescriptors;
+var f = Object.getOwnPropertySymbols;
+var N = Object.prototype.hasOwnProperty, S = Object.prototype.propertyIsEnumerable;
+var v = (e, t, n) => t in e ? C(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n, _ = (e, t) => {
+  for (var n in t || (t = {}))
+    N.call(t, n) && v(e, n, t[n]);
+  if (f)
+    for (var n of f(t))
+      S.call(t, n) && v(e, n, t[n]);
+  return e;
+}, y = (e, t) => b(e, B(t));
+var p = (e, t, n) => (v(e, typeof t != "symbol" ? t + "" : t, n), n);
+import * as i from "react";
+import u from "clsx";
+import { s as l, T as L } from "../../../../chunks/Tooltip-1c5cb6fe.js";
+import "@floating-ui/react";
+import "../../../../chunks/Typography.module-93efb34d.js";
+import "../../../../chunks/Text-b31d1e9a.js";
+const o = "guide-tooltip", P = ({
+  gap: e,
+  isVisible: t,
+  slide: n,
+  disablePointerEvents: s
+}) => {
+  if (!e)
+    return null;
+  const d = {
+    top: `${e.top}px`,
+    left: "0",
+    width: `${e.left}px`,
+    height: `${e.height}px`
+  }, r = {
+    top: `${e.top}px`,
+    left: `${e.right}px`,
+    width: `calc(100% - ${e.right}px)`,
+    height: `${e.height}px`
+  }, c = {
+    top: "0",
+    left: "0",
+    width: "100%",
+    height: `${e.top}px`
+  }, a = {
+    top: `${e.bottom}px`,
+    left: "0",
+    width: "100%",
+    height: `calc(100% - ${e.bottom}px)`
+  }, h = {
+    top: `${e.top}px`,
+    left: `${e.left}px`,
+    width: `${e.width}px`,
+    height: `${e.height}px`,
+    backgroundColor: "transparent"
+  };
+  return /* @__PURE__ */ i.createElement(i.Fragment, null, /* @__PURE__ */ i.createElement(
+    "div",
+    {
+      className: u({
+        [l[`${o}__overlay`]]: !0,
+        [l[`${o}__overlay--visible`]]: t,
+        [l[`${o}__overlay--slide`]]: n
+      }),
+      style: d
+    }
+  ), /* @__PURE__ */ i.createElement(
+    "div",
+    {
+      className: u({
+        [l[`${o}__overlay`]]: !0,
+        [l[`${o}__overlay--visible`]]: t,
+        [l[`${o}__overlay--slide`]]: n
+      }),
+      style: c
+    }
+  ), /* @__PURE__ */ i.createElement(
+    "div",
+    {
+      className: u({
+        [l[`${o}__overlay`]]: !0,
+        [l[`${o}__overlay--visible`]]: t,
+        [l[`${o}__overlay--slide`]]: n
+      }),
+      style: r
+    }
+  ), /* @__PURE__ */ i.createElement(
+    "div",
+    {
+      className: u({
+        [l[`${o}__overlay`]]: !0,
+        [l[`${o}__overlay--visible`]]: t,
+        [l[`${o}__overlay--slide`]]: n
+      }),
+      style: a
+    }
+  ), s && /* @__PURE__ */ i.createElement(
+    "div",
+    {
+      className: u({
+        [l[`${o}__overlay`]]: !0,
+        [l[`${o}__overlay--visible`]]: t,
+        [l[`${o}__overlay--slide`]]: n
+      }),
+      style: h
+    }
+  ));
+};
+class M {
+  constructor(t, n) {
+    p(this, "element");
+    p(this, "padding");
+    this.element = t, this.padding = n;
+  }
+  addPadding(t) {
+    const n = Math.round(t.left) - this.padding, s = Math.round(t.top) - this.padding, d = Math.round(t.width) + 2 * this.padding, r = Math.round(t.height) + 2 * this.padding, c = s, a = n, h = c + r, m = a + d;
+    return {
+      x: n,
+      y: s,
+      width: d,
+      height: r,
+      top: c,
+      left: a,
+      bottom: h,
+      right: m
+    };
+  }
+  getBoundingClientRect() {
+    return this.addPadding(this.element.getBoundingClientRect());
+  }
+  get clientWidth() {
+    return this.getBoundingClientRect().width;
+  }
+  get clientHeight() {
+    return this.getBoundingClientRect().height;
+  }
+}
+const E = 8, w = "guide-tooltip", x = (e, t) => new M(e, t), G = (e) => {
+  const {
+    className: t,
+    parentElementName: n,
+    isVisible: s = !1,
+    shouldSlide: d = !0
+  } = e, [r, c] = i.useState(
+    null
+  ), [a, h] = i.useState(null), [m, $] = i.useState(d), g = () => {
+    r && (h(
+      x(
+        r,
+        E
+      ).getBoundingClientRect()
+    ), $(!1));
+  };
+  return i.useEffect(() => {
+    if (r !== null)
+      return window.addEventListener("resize", g), window.addEventListener("scroll", g), () => {
+        window.addEventListener("resize", g), window.addEventListener("resize", g);
+      };
+  }, [r, n]), i.useEffect(() => {
+    if (n) {
+      const R = document.querySelector(n);
+      c(R);
+    }
+  }, [n]), i.useEffect(() => {
+    r && h(
+      x(
+        r,
+        E
+      ).getBoundingClientRect()
+    ), $(!0);
+  }, [r]), r && s ? /* @__PURE__ */ i.createElement("div", null, /* @__PURE__ */ i.createElement(
+    P,
+    {
+      gap: a,
+      isVisible: s,
+      slide: m,
+      disablePointerEvents: !0
+    }
+  ), /* @__PURE__ */ i.createElement(
+    L,
+    y(_({}, e), {
+      referenceElement: {
+        getBoundingClientRect: () => a,
+        contextElement: r
+      },
+      arrowOffsetY: 25,
+      className: u({
+        [l[w]]: !0,
+        [l[`${w}--slide`]]: m,
+        className: t
+      })
+    }),
+    e.children
+  )) : null;
+};
+export {
+  G as UserGuide
+};