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

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

@@ -0,0 +1 @@
+"use strict";var D=Object.defineProperty,Q=Object.defineProperties;var T=Object.getOwnPropertyDescriptors;var s=Object.getOwnPropertySymbols;var b=Object.prototype.hasOwnProperty,y=Object.prototype.propertyIsEnumerable;var I=(e,n,t)=>n in e?D(e,n,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[n]=t,g=(e,n)=>{for(var t in n||(n={}))b.call(n,t)&&I(e,t,n[t]);if(s)for(var t of s(n))y.call(n,t)&&I(e,t,n[t]);return e},$=(e,n)=>Q(e,T(n));var S=(e,n)=>{var t={};for(var u in e)b.call(e,u)&&n.indexOf(u)<0&&(t[u]=e[u]);if(e!=null&&s)for(var u of s(e))n.indexOf(u)<0&&y.call(e,u)&&(t[u]=e[u]);return t};Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const X=require("react"),O=require("@livechat/design-system-icons"),x=require("clsx"),k=require("../Button/index.cjs.js"),z=require("../Icon/index.cjs.js");require("../../chunks/Typography.module-2558416b.js");const K=require("../../chunks/Text-df483689.js");require("../Loader/index.cjs.js");function M(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const u=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,u.get?u:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const _=M(X),P="lc-Input-module__input___qeMAQ",o={input:P,"input--focused":"lc-Input-module__input--focused___wQH5-","input--disabled":"lc-Input-module__input--disabled___HidXX","input--crop":"lc-Input-module__input--crop___uzJS8","input--read-only":"lc-Input-module__input--read-only___4O-G3","input--error":"lc-Input-module__input--error___DlDbC","input--xsmall":"lc-Input-module__input--xsmall___9u99K","input--compact":"lc-Input-module__input--compact___iKSQZ","input--medium":"lc-Input-module__input--medium___3BjqQ","input--large":"lc-Input-module__input--large___jX5RW","input__icon--disabled":"lc-Input-module__input__icon--disabled___XO3dc","input__icon--left":"lc-Input-module__input__icon--left___BcySs","input__icon--right":"lc-Input-module__input__icon--right___VefSK","input__visibility-button":"lc-Input-module__input__visibility-button___eWrVe"},i="input",q=(e,n)=>_.cloneElement(e.source,{"data-testid":`input-icon-${e.place}`,className:x(o[`${i}__icon`],o[`${i}__icon--${e.place}`],{[o[`${i}__icon--disabled`]]:n})}),F=_.forwardRef((H,w)=>{var d=H,{inputSize:e="medium",error:n=!1,disabled:t,icon:u=null,className:v,cropOnBlur:j=!0}=d,r=S(d,["inputSize","error","disabled","icon","className","cropOnBlur"]);const[C,m]=_.useState(!1),[f,R]=_.useState(!1),{type:l,onFocus:p,onBlur:a}=r,h=x(v,o[i],o[`${i}--${e}`],{[o[`${i}--disabled`]]:t,[o[`${i}--focused`]]:C,[o[`${i}--error`]]:n,[o[`${i}--crop`]]:j,[o[`${i}--read-only`]]:r.readOnly}),V=t?"var(--content-disabled)":"var(--content-default)",E=f?O.VisibilityOn:O.VisibilityOff,N=u&&u.place==="left",B=u&&l!=="password"&&u.place==="right";return _.createElement(K.Text,{as:"div",className:h,"aria-disabled":t,"tab-index":"0"},N&&q(u,t),_.createElement("input",$(g({},r),{ref:w,onFocus:c=>{m(!0),p==null||p(c)},onBlur:c=>{m(!1),a==null||a(c)},disabled:t,type:l&&!f?l:"text"})),B&&q(u,t),l==="password"&&_.createElement(k.Button,{disabled:t,kind:"text",size:"compact",icon:_.createElement(z.Icon,{customColor:V,source:E}),onClick:()=>R(c=>!c),className:o[`${i}__visibility-button`]}))});exports.Input=F;

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

@@ -0,0 +1,123 @@
+var B = Object.defineProperty, K = Object.defineProperties;
+var j = Object.getOwnPropertyDescriptors;
+var s = Object.getOwnPropertySymbols;
+var b = Object.prototype.hasOwnProperty, y = Object.prototype.propertyIsEnumerable;
+var I = (t, n, e) => n in t ? B(t, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[n] = e, $ = (t, n) => {
+  for (var e in n || (n = {}))
+    b.call(n, e) && I(t, e, n[e]);
+  if (s)
+    for (var e of s(n))
+      y.call(n, e) && I(t, e, n[e]);
+  return t;
+}, x = (t, n) => K(t, j(n));
+var g = (t, n) => {
+  var e = {};
+  for (var _ in t)
+    b.call(t, _) && n.indexOf(_) < 0 && (e[_] = t[_]);
+  if (t != null && s)
+    for (var _ of s(t))
+      n.indexOf(_) < 0 && y.call(t, _) && (e[_] = t[_]);
+  return e;
+};
+import * as u from "react";
+import { VisibilityOn as k, VisibilityOff as q } from "@livechat/design-system-icons";
+import S from "clsx";
+import { Button as z } from "../Button/index.es.js";
+import { Icon as D } from "../Icon/index.es.js";
+import "../../chunks/Typography.module-93efb34d.js";
+import { T as F } from "../../chunks/Text-b31d1e9a.js";
+import "../Loader/index.es.js";
+const H = "lc-Input-module__input___qeMAQ", o = {
+  input: H,
+  "input--focused": "lc-Input-module__input--focused___wQH5-",
+  "input--disabled": "lc-Input-module__input--disabled___HidXX",
+  "input--crop": "lc-Input-module__input--crop___uzJS8",
+  "input--read-only": "lc-Input-module__input--read-only___4O-G3",
+  "input--error": "lc-Input-module__input--error___DlDbC",
+  "input--xsmall": "lc-Input-module__input--xsmall___9u99K",
+  "input--compact": "lc-Input-module__input--compact___iKSQZ",
+  "input--medium": "lc-Input-module__input--medium___3BjqQ",
+  "input--large": "lc-Input-module__input--large___jX5RW",
+  "input__icon--disabled": "lc-Input-module__input__icon--disabled___XO3dc",
+  "input__icon--left": "lc-Input-module__input__icon--left___BcySs",
+  "input__icon--right": "lc-Input-module__input__icon--right___VefSK",
+  "input__visibility-button": "lc-Input-module__input__visibility-button___eWrVe"
+}, i = "input", C = (t, n) => u.cloneElement(t.source, {
+  "data-testid": `input-icon-${t.place}`,
+  className: S(
+    o[`${i}__icon`],
+    o[`${i}__icon--${t.place}`],
+    {
+      [o[`${i}__icon--disabled`]]: n
+    }
+  )
+}), U = u.forwardRef(
+  (T, w) => {
+    var m = T, {
+      inputSize: t = "medium",
+      error: n = !1,
+      disabled: e,
+      icon: _ = null,
+      className: h,
+      cropOnBlur: v = !0
+    } = m, p = g(m, [
+      "inputSize",
+      "error",
+      "disabled",
+      "icon",
+      "className",
+      "cropOnBlur"
+    ]);
+    const [R, d] = u.useState(!1), [f, V] = u.useState(!1), { type: c, onFocus: r, onBlur: a } = p, E = S(
+      h,
+      o[i],
+      o[`${i}--${t}`],
+      {
+        [o[`${i}--disabled`]]: e,
+        [o[`${i}--focused`]]: R,
+        [o[`${i}--error`]]: n,
+        [o[`${i}--crop`]]: v,
+        [o[`${i}--read-only`]]: p.readOnly
+      }
+    ), O = e ? "var(--content-disabled)" : "var(--content-default)", N = f ? k : q, Q = _ && _.place === "left", X = _ && c !== "password" && _.place === "right";
+    return /* @__PURE__ */ u.createElement(
+      F,
+      {
+        as: "div",
+        className: E,
+        "aria-disabled": e,
+        "tab-index": "0"
+      },
+      Q && C(_, e),
+      /* @__PURE__ */ u.createElement(
+        "input",
+        x($({}, p), {
+          ref: w,
+          onFocus: (l) => {
+            d(!0), r == null || r(l);
+          },
+          onBlur: (l) => {
+            d(!1), a == null || a(l);
+          },
+          disabled: e,
+          type: c && !f ? c : "text"
+        })
+      ),
+      X && C(_, e),
+      c === "password" && /* @__PURE__ */ u.createElement(
+        z,
+        {
+          disabled: e,
+          kind: "text",
+          size: "compact",
+          icon: /* @__PURE__ */ u.createElement(D, { customColor: O, source: N }),
+          onClick: () => V((l) => !l),
+          className: o[`${i}__visibility-button`]
+        }
+      )
+    );
+  }
+);
+export {
+  U as Input
+};

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

@@ -0,0 +1 @@
+"use strict";var b=Object.defineProperty;var c=Object.getOwnPropertySymbols;var i=Object.prototype.hasOwnProperty,s=Object.prototype.propertyIsEnumerable;var r=(e,n,t)=>n in e?b(e,n,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[n]=t,a=(e,n)=>{for(var t in n||(n={}))i.call(n,t)&&r(e,t,n[t]);if(c)for(var t of c(n))s.call(n,t)&&r(e,t,n[t]);return e};var u=(e,n)=>{var t={};for(var l in e)i.call(e,l)&&n.indexOf(l)<0&&(t[l]=e[l]);if(e!=null&&c)for(var l of c(e))n.indexOf(l)<0&&s.call(e,l)&&(t[l]=e[l]);return t};Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const k=require("react"),f=require("clsx");function m(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const l=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,l.get?l:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const g=m(k),p="lc-Link-module__link___kqx52",d={link:p,"link--bold":"lc-Link-module__link--bold___1rGdO"},_="link",O=l=>{var o=l,{bold:e=!1,className:n=""}=o,t=u(o,["bold","className"]);return g.createElement("a",a({className:f(d[_],e&&d[`${_}--bold`],n)},t))};exports.Link=O;

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

@@ -0,0 +1,47 @@
+var d = Object.defineProperty;
+var s = Object.getOwnPropertySymbols;
+var c = Object.prototype.hasOwnProperty, k = Object.prototype.propertyIsEnumerable;
+var i = (l, o, n) => o in l ? d(l, o, { enumerable: !0, configurable: !0, writable: !0, value: n }) : l[o] = n, _ = (l, o) => {
+  for (var n in o || (o = {}))
+    c.call(o, n) && i(l, n, o[n]);
+  if (s)
+    for (var n of s(o))
+      k.call(o, n) && i(l, n, o[n]);
+  return l;
+};
+var a = (l, o) => {
+  var n = {};
+  for (var e in l)
+    c.call(l, e) && o.indexOf(e) < 0 && (n[e] = l[e]);
+  if (l != null && s)
+    for (var e of s(l))
+      o.indexOf(e) < 0 && k.call(l, e) && (n[e] = l[e]);
+  return n;
+};
+import * as b from "react";
+import f from "clsx";
+const p = "lc-Link-module__link___kqx52", r = {
+  link: p,
+  "link--bold": "lc-Link-module__link--bold___1rGdO"
+}, m = "link", L = (e) => {
+  var t = e, {
+    bold: l = !1,
+    className: o = ""
+  } = t, n = a(t, [
+    "bold",
+    "className"
+  ]);
+  return /* @__PURE__ */ b.createElement(
+    "a",
+    _({
+      className: f(
+        r[m],
+        l && r[`${m}--bold`],
+        o
+      )
+    }, n)
+  );
+};
+export {
+  L as Link
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),n=require("clsx");require("../../chunks/Typography.module-2558416b.js");const i=require("../../chunks/Text-df483689.js");function m(e){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const _=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(l,r,_.get?_:{enumerable:!0,get:()=>e[r]})}}return l.default=e,Object.freeze(l)}const a=m(c),u="lc-Loader-module__loader___LRflD",p="lc-Loader-module__loader__spinner___l3C1g",b="lc-Loader-module__rotate___Tlni-",f="lc-Loader-module__loader__label___R74f6",o={loader:u,loader__spinner:p,"loader__spinner--small":"lc-Loader-module__loader__spinner--small___dGFFt","loader__spinner--medium":"lc-Loader-module__loader__spinner--medium___J-ki0","loader__spinner--large":"lc-Loader-module__loader__spinner--large___Poqq7","loader__spinner-circle":"lc-Loader-module__loader__spinner-circle___ApBUO",rotate:b,loader__label:f},d="loader",t=`${d}__spinner`,L=({primaryColor:e,secondaryColor:l,label:r,className:_,size:s="medium"})=>a.createElement("div",{className:n(o[d],_)},a.createElement("div",{className:n(o[t],o[`${t}--${s}`])},a.createElement("div",{className:o["loader__spinner-circle"],style:{borderColor:l,borderTopColor:e}})),r&&a.createElement(i.Text,{as:"div",size:"md",className:o.loader__label},r));exports.Loader=L;

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

@@ -0,0 +1,39 @@
+import * as _ from "react";
+import l from "clsx";
+import "../../chunks/Typography.module-93efb34d.js";
+import { T as c } from "../../chunks/Text-b31d1e9a.js";
+const m = "lc-Loader-module__loader___LRflD", i = "lc-Loader-module__loader__spinner___l3C1g", p = "lc-Loader-module__rotate___Tlni-", u = "lc-Loader-module__loader__label___R74f6", e = {
+  loader: m,
+  loader__spinner: i,
+  "loader__spinner--small": "lc-Loader-module__loader__spinner--small___dGFFt",
+  "loader__spinner--medium": "lc-Loader-module__loader__spinner--medium___J-ki0",
+  "loader__spinner--large": "lc-Loader-module__loader__spinner--large___Poqq7",
+  "loader__spinner-circle": "lc-Loader-module__loader__spinner-circle___ApBUO",
+  rotate: p,
+  loader__label: u
+}, a = "loader", o = `${a}__spinner`, C = ({
+  primaryColor: d,
+  secondaryColor: s,
+  label: r,
+  className: n,
+  size: t = "medium"
+}) => /* @__PURE__ */ _.createElement("div", { className: l(e[a], n) }, /* @__PURE__ */ _.createElement(
+  "div",
+  {
+    className: l(e[o], e[`${o}--${t}`])
+  },
+  /* @__PURE__ */ _.createElement(
+    "div",
+    {
+      className: e["loader__spinner-circle"],
+      style: {
+        /* stylelint-disable */
+        borderColor: s,
+        borderTopColor: d
+      }
+    }
+  )
+), r && /* @__PURE__ */ _.createElement(c, { as: "div", size: "md", className: e.loader__label }, r));
+export {
+  C as Loader
+};

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

@@ -0,0 +1 @@
+"use strict";var B=Object.defineProperty;var v=Object.getOwnPropertySymbols;var H=Object.prototype.hasOwnProperty,O=Object.prototype.propertyIsEnumerable;var k=(a,l,e)=>l in a?B(a,l,{enumerable:!0,configurable:!0,writable:!0,value:e}):a[l]=e,b=(a,l)=>{for(var e in l||(l={}))H.call(l,e)&&k(a,e,l[e]);if(v)for(var e of v(l))O.call(l,e)&&k(a,e,l[e]);return a};var E=(a,l)=>{var e={};for(var o in a)H.call(a,o)&&l.indexOf(o)<0&&(e[o]=a[o]);if(a!=null&&v)for(var o of v(a))l.indexOf(o)<0&&O.call(a,o)&&(e[o]=a[o]);return e};Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const j=require("react"),u=require("clsx"),C=require("../../chunks/Heading-617540b6.js"),x=require("../../chunks/Text-df483689.js");require("../../chunks/Typography.module-2558416b.js");const z=require("@floating-ui/react"),D=require("../../chunks/keyCodes-c4c35e49.js"),F=require("@livechat/design-system-icons"),K=require("../Button/index.cjs.js"),S=require("../Icon/index.cjs.js"),P=require("react-dom"),R=require("../Avatar/index.cjs.js");require("../Loader/index.cjs.js");require("polished");function T(a){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const e in a)if(e!=="default"){const o=Object.getOwnPropertyDescriptor(a,e);Object.defineProperty(l,e,o.get?o:{enumerable:!0,get:()=>a[e]})}}return l.default=a,Object.freeze(l)}const t=T(j),I=T(P),w="lc-Modal-module__modal__body___M-jmN",A="lc-Modal-module__modal__header___Fp5VE",G="lc-Modal-module__modal__heading___G9KVK",U="lc-Modal-module__modal__footer___2LYdc",d={"modal-base":"lc-Modal-module__modal-base___hbL1U","modal-base--full-space":"lc-Modal-module__modal-base--full-space___KcGFL","modal-base__overlay":"lc-Modal-module__modal-base__overlay___kCQ8t","modal-base__overlay--visible":"lc-Modal-module__modal-base__overlay--visible___zUNJL","modal-base__overlay--labelled":"lc-Modal-module__modal-base__overlay--labelled___THAo-","modal-base__close":"lc-Modal-module__modal-base__close___gJlgr","modal-base__close--label-type":"lc-Modal-module__modal-base__close--label-type___Om0Vb",modal__body:w,modal__header:A,"modal__label-header":"lc-Modal-module__modal__label-header___ZPtEy",modal__heading:G,"modal__label-heading":"lc-Modal-module__modal__label-heading___WnYcF",modal__footer:U},y="modal-base",L=$=>{var f=$,{children:a,className:l="",onClose:e,closeOnEscPress:o=!0,closeOnOverlayPress:_=!0,fullSpaceContent:s,isLabelled:r}=f,M=E(f,["children","className","onClose","closeOnEscPress","closeOnOverlayPress","fullSpaceContent","isLabelled"]);const g=u(d[y],l,s&&d[`${y}--full-space`]);t.useEffect(()=>{if(!o)return;const c=h=>{h.key===D.KeyCodes.esc&&e()};return document.addEventListener("keyup",c,!0),()=>document.removeEventListener("keyup",c,!0)},[o]);const p=c=>{_&&c.target===c.currentTarget&&e()};return t.createElement(z.FloatingOverlay,{"data-testid":"lc-modal-overlay",onMouseDown:p,className:u(d[`${y}__overlay`],d[`${y}__overlay--visible`],r&&d[`${y}__overlay--labelled`])},t.createElement("div",b({role:"dialog","aria-modal":!0,className:g},M),a))},N=({labelType:a,customColor:l,onClick:e})=>t.createElement(K.Button,{type:"button",kind:"plain","aria-label":"Close modal",title:"Close modal",className:u(d["modal-base__close"],a&&d["modal-base__close--label-type"]),onClick:e,icon:t.createElement(S.Icon,{source:F.Close,size:"medium",customColor:l})}),n="modal",V=f=>{var g=f,{children:a,className:l="",heading:e,labelHeading:o,fullSpaceContent:_,footer:s,onClose:r,contentClassName:M}=g,$=E(g,["children","className","heading","labelHeading","fullSpaceContent","footer","onClose","contentClassName"]);const p=u(d[n],l),c=typeof a=="string",h=q=>{q.preventDefault(),q.stopPropagation(),r()};return t.createElement(L,b({className:p,fullSpaceContent:_,onClose:r,isLabelled:!!o},$),o&&t.createElement("div",{className:d[`${n}__label-header`]},t.createElement(C.Heading,{size:"md",as:"div",className:d[`${n}__label-heading`]},o),t.createElement(N,{labelType:!!o,customColor:"var(--color-white)",onClick:h})),!o&&e&&t.createElement("div",{className:d[`${n}__header`]},t.createElement(C.Heading,{size:"md",as:"div",className:d[`${n}__heading`]},e),t.createElement(N,{onClick:h})),t.createElement("div",{"data-testid":"modal-body",className:u(d[`${n}__body`],M)},c?t.createElement(x.Text,{as:"div"},a):a),s&&t.createElement("div",{className:d[`${n}__footer`]},s))},J=({children:a,className:l="",parentElementName:e="body",zIndex:o})=>{const[_]=t.useState(()=>document.createElement("div"));return l&&_.classList.add(l),o&&(_.style.zIndex=o.toString()),t.useEffect(()=>{var s;return(s=document.querySelector(e))==null||s.appendChild(_),()=>{var r;(r=document.querySelector(e))==null||r.removeChild(_)}},[e]),t.createElement(t.Fragment,null,I.createPortal(a,_))},m={"modal-header":"lc-ModalHeader-module__modal-header___xk3bd","modal-header__heading-left-node":"lc-ModalHeader-module__modal-header__heading-left-node___1--G5","modal-header__heading-body":"lc-ModalHeader-module__modal-header__heading-body___HHEF-","modal-header__heading-title":"lc-ModalHeader-module__modal-header__heading-title___2R9pm","modal-header__heading-description":"lc-ModalHeader-module__modal-header__heading-description___54Xvf"},i="modal-header",Y=({title:a,iconProps:l,avatarProps:e,children:o,className:_=""})=>{const s=u(m[i],_);return t.createElement("div",{className:s},l&&t.createElement(S.Icon,b({className:m[`${i}__heading-left-node`]},l)),e&&t.createElement(R.Avatar,b({className:m[`${i}__heading-left-node`]},e)),t.createElement("div",{className:m[`${i}__heading-body`]},t.createElement(C.Heading,{as:"div",size:"md",className:m[`${i}__heading-title`]},a),o&&t.createElement(x.Text,{as:"div",className:m[`${i}__heading-description`]},o)))};exports.Modal=V;exports.ModalBase=L;exports.ModalCloseButton=N;exports.ModalHeader=Y;exports.ModalPortal=J;

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

@@ -0,0 +1,249 @@
+var x = Object.defineProperty;
+var f = Object.getOwnPropertySymbols;
+var L = Object.prototype.hasOwnProperty, H = Object.prototype.propertyIsEnumerable;
+var k = (a, l, e) => l in a ? x(a, l, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[l] = e, b = (a, l) => {
+  for (var e in l || (l = {}))
+    L.call(l, e) && k(a, e, l[e]);
+  if (f)
+    for (var e of f(l))
+      H.call(l, e) && k(a, e, l[e]);
+  return a;
+};
+var M = (a, l) => {
+  var e = {};
+  for (var _ in a)
+    L.call(a, _) && l.indexOf(_) < 0 && (e[_] = a[_]);
+  if (a != null && f)
+    for (var _ of f(a))
+      l.indexOf(_) < 0 && H.call(a, _) && (e[_] = a[_]);
+  return e;
+};
+import * as o from "react";
+import u from "clsx";
+import { H as C } from "../../chunks/Heading-6b95d08b.js";
+import { T as K } from "../../chunks/Text-b31d1e9a.js";
+import "../../chunks/Typography.module-93efb34d.js";
+import { FloatingOverlay as z } from "@floating-ui/react";
+import { K as B } from "../../chunks/keyCodes-30323e90.js";
+import { Close as S } from "@livechat/design-system-icons";
+import { Button as D } from "../Button/index.es.js";
+import { Icon as T } from "../Icon/index.es.js";
+import * as G from "react-dom";
+import { Avatar as O } from "../Avatar/index.es.js";
+import "../Loader/index.es.js";
+import "polished";
+const R = "lc-Modal-module__modal__body___M-jmN", U = "lc-Modal-module__modal__header___Fp5VE", V = "lc-Modal-module__modal__heading___G9KVK", q = "lc-Modal-module__modal__footer___2LYdc", d = {
+  "modal-base": "lc-Modal-module__modal-base___hbL1U",
+  "modal-base--full-space": "lc-Modal-module__modal-base--full-space___KcGFL",
+  "modal-base__overlay": "lc-Modal-module__modal-base__overlay___kCQ8t",
+  "modal-base__overlay--visible": "lc-Modal-module__modal-base__overlay--visible___zUNJL",
+  "modal-base__overlay--labelled": "lc-Modal-module__modal-base__overlay--labelled___THAo-",
+  "modal-base__close": "lc-Modal-module__modal-base__close___gJlgr",
+  "modal-base__close--label-type": "lc-Modal-module__modal-base__close--label-type___Om0Vb",
+  modal__body: R,
+  modal__header: U,
+  "modal__label-header": "lc-Modal-module__modal__label-header___ZPtEy",
+  modal__heading: V,
+  "modal__label-heading": "lc-Modal-module__modal__label-heading___WnYcF",
+  modal__footer: q
+}, h = "modal-base", w = (N) => {
+  var g = N, {
+    children: a,
+    className: l = "",
+    onClose: e,
+    closeOnEscPress: _ = !0,
+    closeOnOverlayPress: t = !0,
+    fullSpaceContent: m,
+    isLabelled: s
+  } = g, v = M(g, [
+    "children",
+    "className",
+    "onClose",
+    "closeOnEscPress",
+    "closeOnOverlayPress",
+    "fullSpaceContent",
+    "isLabelled"
+  ]);
+  const y = u(
+    d[h],
+    l,
+    m && d[`${h}--full-space`]
+  );
+  o.useEffect(() => {
+    if (!_)
+      return;
+    const r = (p) => {
+      p.key === B.esc && e();
+    };
+    return document.addEventListener("keyup", r, !0), () => document.removeEventListener("keyup", r, !0);
+  }, [_]);
+  const E = (r) => {
+    t && r.target === r.currentTarget && e();
+  };
+  return /* @__PURE__ */ o.createElement(
+    z,
+    {
+      "data-testid": "lc-modal-overlay",
+      onMouseDown: E,
+      className: u(
+        d[`${h}__overlay`],
+        d[`${h}__overlay--visible`],
+        s && d[`${h}__overlay--labelled`]
+      )
+    },
+    /* @__PURE__ */ o.createElement(
+      "div",
+      b({
+        role: "dialog",
+        "aria-modal": !0,
+        className: y
+      }, v),
+      a
+    )
+  );
+}, F = ({
+  labelType: a,
+  customColor: l,
+  onClick: e
+}) => /* @__PURE__ */ o.createElement(
+  D,
+  {
+    type: "button",
+    kind: "plain",
+    "aria-label": "Close modal",
+    title: "Close modal",
+    className: u(
+      d["modal-base__close"],
+      a && d["modal-base__close--label-type"]
+    ),
+    onClick: e,
+    icon: /* @__PURE__ */ o.createElement(T, { source: S, size: "medium", customColor: l })
+  }
+), c = "modal", oe = (g) => {
+  var y = g, {
+    children: a,
+    className: l = "",
+    heading: e,
+    labelHeading: _,
+    fullSpaceContent: t,
+    footer: m,
+    onClose: s,
+    contentClassName: v
+  } = y, N = M(y, [
+    "children",
+    "className",
+    "heading",
+    "labelHeading",
+    "fullSpaceContent",
+    "footer",
+    "onClose",
+    "contentClassName"
+  ]);
+  const E = u(d[c], l), r = typeof a == "string", p = ($) => {
+    $.preventDefault(), $.stopPropagation(), s();
+  };
+  return /* @__PURE__ */ o.createElement(
+    w,
+    b({
+      className: E,
+      fullSpaceContent: t,
+      onClose: s,
+      isLabelled: !!_
+    }, N),
+    _ && /* @__PURE__ */ o.createElement("div", { className: d[`${c}__label-header`] }, /* @__PURE__ */ o.createElement(
+      C,
+      {
+        size: "md",
+        as: "div",
+        className: d[`${c}__label-heading`]
+      },
+      _
+    ), /* @__PURE__ */ o.createElement(
+      F,
+      {
+        labelType: !!_,
+        customColor: "var(--color-white)",
+        onClick: p
+      }
+    )),
+    !_ && e && /* @__PURE__ */ o.createElement("div", { className: d[`${c}__header`] }, /* @__PURE__ */ o.createElement(
+      C,
+      {
+        size: "md",
+        as: "div",
+        className: d[`${c}__heading`]
+      },
+      e
+    ), /* @__PURE__ */ o.createElement(F, { onClick: p })),
+    /* @__PURE__ */ o.createElement(
+      "div",
+      {
+        "data-testid": "modal-body",
+        className: u(d[`${c}__body`], v)
+      },
+      r ? /* @__PURE__ */ o.createElement(K, { as: "div" }, a) : a
+    ),
+    m && /* @__PURE__ */ o.createElement("div", { className: d[`${c}__footer`] }, m)
+  );
+}, _e = ({
+  children: a,
+  className: l = "",
+  parentElementName: e = "body",
+  zIndex: _
+}) => {
+  const [t] = o.useState(() => document.createElement("div"));
+  return l && t.classList.add(l), _ && (t.style.zIndex = _.toString()), o.useEffect(() => {
+    var m;
+    return (m = document.querySelector(e)) == null || m.appendChild(t), () => {
+      var s;
+      (s = document.querySelector(e)) == null || s.removeChild(t);
+    };
+  }, [e]), /* @__PURE__ */ o.createElement(o.Fragment, null, G.createPortal(a, t));
+}, n = {
+  "modal-header": "lc-ModalHeader-module__modal-header___xk3bd",
+  "modal-header__heading-left-node": "lc-ModalHeader-module__modal-header__heading-left-node___1--G5",
+  "modal-header__heading-body": "lc-ModalHeader-module__modal-header__heading-body___HHEF-",
+  "modal-header__heading-title": "lc-ModalHeader-module__modal-header__heading-title___2R9pm",
+  "modal-header__heading-description": "lc-ModalHeader-module__modal-header__heading-description___54Xvf"
+}, i = "modal-header", de = ({
+  title: a,
+  iconProps: l,
+  avatarProps: e,
+  children: _,
+  className: t = ""
+}) => {
+  const m = u(n[i], t);
+  return /* @__PURE__ */ o.createElement("div", { className: m }, l && /* @__PURE__ */ o.createElement(
+    T,
+    b({
+      className: n[`${i}__heading-left-node`]
+    }, l)
+  ), e && /* @__PURE__ */ o.createElement(
+    O,
+    b({
+      className: n[`${i}__heading-left-node`]
+    }, e)
+  ), /* @__PURE__ */ o.createElement("div", { className: n[`${i}__heading-body`] }, /* @__PURE__ */ o.createElement(
+    C,
+    {
+      as: "div",
+      size: "md",
+      className: n[`${i}__heading-title`]
+    },
+    a
+  ), _ && /* @__PURE__ */ o.createElement(
+    K,
+    {
+      as: "div",
+      className: n[`${i}__heading-description`]
+    },
+    _
+  )));
+};
+export {
+  oe as Modal,
+  w as ModalBase,
+  F as ModalCloseButton,
+  de as ModalHeader,
+  _e as ModalPortal
+};

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

@@ -0,0 +1 @@
+"use strict";var K=Object.defineProperty,M=Object.defineProperties;var x=Object.getOwnPropertyDescriptors;var _=Object.getOwnPropertySymbols;var C=Object.prototype.hasOwnProperty,N=Object.prototype.propertyIsEnumerable;var g=(n,r,e)=>r in n?K(n,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):n[r]=e,h=(n,r)=>{for(var e in r||(r={}))C.call(r,e)&&g(n,e,r[e]);if(_)for(var e of _(r))N.call(r,e)&&g(n,e,r[e]);return n},D=(n,r)=>M(n,x(r));var k=(n,r)=>{var e={};for(var c in n)C.call(n,c)&&r.indexOf(c)<0&&(e[c]=n[c]);if(n!=null&&_)for(var c of _(n))r.indexOf(c)<0&&N.call(n,c)&&(e[c]=n[c]);return e};Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const U=require("react"),v=require("@livechat/design-system-icons"),z=require("clsx"),w=require("../../chunks/keyCodes-c4c35e49.js"),O=require("../Icon/index.cjs.js");function F(n){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const e in n)if(e!=="default"){const c=Object.getOwnPropertyDescriptor(n,e);Object.defineProperty(r,e,c.get?c:{enumerable:!0,get:()=>n[e]})}}return r.default=n,Object.freeze(r)}const o=F(U),a={"numeric-input":"lc-NumericInput-module__numeric-input___j1esc","numeric-input__increment":"lc-NumericInput-module__numeric-input__increment___i3Tys","numeric-input__decrement":"lc-NumericInput-module__numeric-input__decrement___3qgn0","numeric-input--disabled":"lc-NumericInput-module__numeric-input--disabled___yaRvQ","numeric-input--no-controls":"lc-NumericInput-module__numeric-input--no-controls___D90rG","numeric-input--error":"lc-NumericInput-module__numeric-input--error___TMxRx"},l="numeric-input",G=L=>{var b=L,{className:n,error:r,value:e,max:c,min:i,disabled:s,noControls:y,style:E,onChange:R}=b,j=k(b,["className","error","value","max","min","disabled","noControls","style","onChange"]);const d=o.useRef(null),q=z(a[l],{[a[`${l}--error`]]:r,[a[`${l}--no-controls`]]:y,[a[`${l}--disabled`]]:s},n),f=t=>R(String(t)),I=t=>c!==void 0&&t>c?c:i!==void 0&&t<i?i:t,m=t=>{const u=parseInt(e,10)+t;return f(I(u))},S=t=>{t.key===w.KeyCodes.arrowDown&&(t.preventDefault(),m(-1)),t.key===w.KeyCodes.arrowUp&&(t.preventDefault(),m(1))},p=(t,u)=>u!==void 0&&parseInt(t,10)===u,T=t=>{t.preventDefault(),t.stopPropagation();const u=t.currentTarget.value.replace(/((?!([-]|([-]?\d+))).)/,"");if(u===""||u==="-")return f(u);const P=parseInt(u,10);return f(I(P))},V=()=>{var t;return(t=d.current)==null||t.focus(),m(1)},$=()=>{var t;return(t=d.current)==null||t.focus(),m(-1)};return o.createElement("div",{className:q,style:E},o.createElement("input",D(h({type:"text",ref:d},j),{value:e,disabled:s,onChange:T,onKeyDown:S,min:i,max:c})),!y&&o.createElement(o.Fragment,null,o.createElement("button",{tabIndex:-1,disabled:s||p(e,c),onClick:V,"aria-label":"Increment value",className:a[`${l}__increment`],type:"button"},o.createElement(O.Icon,{source:v.ChevronUp,disabled:s||p(e,c),kind:"primary"})),o.createElement("button",{tabIndex:-1,disabled:s||p(e,i),"aria-label":"Decrement value",className:a[`${l}__decrement`],onClick:$,type:"button"},o.createElement(O.Icon,{source:v.ChevronDown,kind:"primary",disabled:s||p(e,i)}))))};exports.NumericInput=G;

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

@@ -0,0 +1,139 @@
+var j = Object.defineProperty, q = Object.defineProperties;
+var F = Object.getOwnPropertyDescriptors;
+var _ = Object.getOwnPropertySymbols;
+var C = Object.prototype.hasOwnProperty, N = Object.prototype.propertyIsEnumerable;
+var h = (t, r, n) => r in t ? j(t, r, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[r] = n, D = (t, r) => {
+  for (var n in r || (r = {}))
+    C.call(r, n) && h(t, n, r[n]);
+  if (_)
+    for (var n of _(r))
+      N.call(r, n) && h(t, n, r[n]);
+  return t;
+}, g = (t, r) => q(t, F(r));
+var k = (t, r) => {
+  var n = {};
+  for (var c in t)
+    C.call(t, c) && r.indexOf(c) < 0 && (n[c] = t[c]);
+  if (t != null && _)
+    for (var c of _(t))
+      r.indexOf(c) < 0 && N.call(t, c) && (n[c] = t[c]);
+  return n;
+};
+import * as o from "react";
+import { ChevronUp as G, ChevronDown as L } from "@livechat/design-system-icons";
+import M from "clsx";
+import { K as w } from "../../chunks/keyCodes-30323e90.js";
+import { Icon as E } from "../Icon/index.es.js";
+const l = {
+  "numeric-input": "lc-NumericInput-module__numeric-input___j1esc",
+  "numeric-input__increment": "lc-NumericInput-module__numeric-input__increment___i3Tys",
+  "numeric-input__decrement": "lc-NumericInput-module__numeric-input__decrement___3qgn0",
+  "numeric-input--disabled": "lc-NumericInput-module__numeric-input--disabled___yaRvQ",
+  "numeric-input--no-controls": "lc-NumericInput-module__numeric-input--no-controls___D90rG",
+  "numeric-input--error": "lc-NumericInput-module__numeric-input--error___TMxRx"
+}, m = "numeric-input", H = (P) => {
+  var y = P, {
+    className: t,
+    error: r,
+    value: n,
+    max: c,
+    min: i,
+    disabled: a,
+    noControls: I,
+    style: v,
+    onChange: R
+  } = y, V = k(y, [
+    "className",
+    "error",
+    "value",
+    "max",
+    "min",
+    "disabled",
+    "noControls",
+    "style",
+    "onChange"
+  ]);
+  const d = o.useRef(null), $ = M(
+    l[m],
+    {
+      [l[`${m}--error`]]: r,
+      [l[`${m}--no-controls`]]: I,
+      [l[`${m}--disabled`]]: a
+    },
+    t
+  ), f = (e) => R(String(e)), b = (e) => c !== void 0 && e > c ? c : i !== void 0 && e < i ? i : e, s = (e) => {
+    const u = parseInt(n, 10) + e;
+    return f(b(u));
+  }, T = (e) => {
+    e.key === w.arrowDown && (e.preventDefault(), s(-1)), e.key === w.arrowUp && (e.preventDefault(), s(1));
+  }, p = (e, u) => u !== void 0 && parseInt(e, 10) === u, K = (e) => {
+    e.preventDefault(), e.stopPropagation();
+    const u = e.currentTarget.value.replace(
+      /((?!([-]|([-]?\d+))).)/,
+      ""
+    );
+    if (u === "" || u === "-")
+      return f(u);
+    const U = parseInt(u, 10);
+    return f(b(U));
+  }, x = () => {
+    var e;
+    return (e = d.current) == null || e.focus(), s(1);
+  }, O = () => {
+    var e;
+    return (e = d.current) == null || e.focus(), s(-1);
+  };
+  return /* @__PURE__ */ o.createElement("div", { className: $, style: v }, /* @__PURE__ */ o.createElement(
+    "input",
+    g(D({
+      type: "text",
+      ref: d
+    }, V), {
+      value: n,
+      disabled: a,
+      onChange: K,
+      onKeyDown: T,
+      min: i,
+      max: c
+    })
+  ), !I && /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(
+    "button",
+    {
+      tabIndex: -1,
+      disabled: a || p(n, c),
+      onClick: x,
+      "aria-label": "Increment value",
+      className: l[`${m}__increment`],
+      type: "button"
+    },
+    /* @__PURE__ */ o.createElement(
+      E,
+      {
+        source: G,
+        disabled: a || p(n, c),
+        kind: "primary"
+      }
+    )
+  ), /* @__PURE__ */ o.createElement(
+    "button",
+    {
+      tabIndex: -1,
+      disabled: a || p(n, i),
+      "aria-label": "Decrement value",
+      className: l[`${m}__decrement`],
+      onClick: O,
+      type: "button"
+    },
+    /* @__PURE__ */ o.createElement(
+      E,
+      {
+        source: L,
+        kind: "primary",
+        disabled: a || p(n, i)
+      }
+    )
+  )));
+};
+export {
+  H as NumericInput
+};