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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (125) hide show
  1. package/dist/components/Skeleton/SkeletonAvatar.d.ts +16 -0
  2. package/dist/components/Skeleton/SkeletonText.d.ts +16 -0
  3. package/dist/components/Skeleton/SkeletonWrapper.d.ts +16 -0
  4. package/dist/components/Skeleton/index.d.ts +3 -0
  5. package/dist/components/Tag/Tag.d.ts +1 -34
  6. package/dist/components/Tag/constants.d.ts +2 -0
  7. package/dist/components/Tag/index.d.ts +2 -1
  8. package/dist/components/Tag/types.d.ts +55 -0
  9. package/dist/components/TagInput/TagInput.d.ts +2 -39
  10. package/dist/components/TagInput/{EditableTag.d.ts → components/EditableTag.d.ts} +2 -0
  11. package/dist/components/TagInput/components/EmailTagInput.d.ts +5 -0
  12. package/dist/components/TagInput/index.d.ts +3 -3
  13. package/dist/components/TagInput/types.d.ts +41 -0
  14. package/dist/components/Typography/Display.d.ts +5 -1
  15. package/dist/components/Typography/Heading.d.ts +5 -1
  16. package/dist/components/Typography/Text.d.ts +5 -1
  17. package/dist/components/Typography/types.d.ts +1 -0
  18. package/dist/foundations/design-token.d.ts +23 -0
  19. package/dist/index.cjs.js +1 -1
  20. package/dist/index.es.js +5280 -132
  21. package/dist/preview-stats.json +1254 -1254
  22. package/dist/style.css +1 -1
  23. package/package.json +5 -5
  24. package/dist/chunks/Heading-617540b6.js +0 -1
  25. package/dist/chunks/Heading-6b95d08b.js +0 -64
  26. package/dist/chunks/Text-b31d1e9a.js +0 -66
  27. package/dist/chunks/Text-df483689.js +0 -1
  28. package/dist/chunks/Tooltip-1c5cb6fe.js +0 -182
  29. package/dist/chunks/Tooltip-f9f79274.js +0 -1
  30. package/dist/chunks/Typography.module-2558416b.js +0 -1
  31. package/dist/chunks/Typography.module-93efb34d.js +0 -23
  32. package/dist/chunks/keyCodes-30323e90.js +0 -15
  33. package/dist/chunks/keyCodes-c4c35e49.js +0 -1
  34. package/dist/components/ActionBar/index.cjs.js +0 -1
  35. package/dist/components/ActionBar/index.es.js +0 -192
  36. package/dist/components/ActionMenu/index.cjs.js +0 -1
  37. package/dist/components/ActionMenu/index.es.js +0 -199
  38. package/dist/components/Alert/index.cjs.js +0 -1
  39. package/dist/components/Alert/index.es.js +0 -129
  40. package/dist/components/Avatar/index.cjs.js +0 -1
  41. package/dist/components/Avatar/index.es.js +0 -190
  42. package/dist/components/Badge/index.cjs.js +0 -1
  43. package/dist/components/Badge/index.es.js +0 -65
  44. package/dist/components/Button/index.cjs.js +0 -1
  45. package/dist/components/Button/index.es.js +0 -143
  46. package/dist/components/Card/index.cjs.js +0 -1
  47. package/dist/components/Card/index.es.js +0 -96
  48. package/dist/components/Checkbox/index.cjs.js +0 -1
  49. package/dist/components/Checkbox/index.es.js +0 -64
  50. package/dist/components/DatePicker/index.cjs.js +0 -1
  51. package/dist/components/DatePicker/index.es.js +0 -516
  52. package/dist/components/DetailsCard/index.cjs.js +0 -1
  53. package/dist/components/DetailsCard/index.es.js +0 -140
  54. package/dist/components/DetailsCardInfo/index.cjs.js +0 -1
  55. package/dist/components/DetailsCardInfo/index.es.js +0 -12
  56. package/dist/components/FieldDescription/index.cjs.js +0 -1
  57. package/dist/components/FieldDescription/index.es.js +0 -41
  58. package/dist/components/FieldError/index.cjs.js +0 -1
  59. package/dist/components/FieldError/index.es.js +0 -51
  60. package/dist/components/FieldGroup/index.cjs.js +0 -1
  61. package/dist/components/FieldGroup/index.es.js +0 -58
  62. package/dist/components/FileUploadProgress/index.cjs.js +0 -1
  63. package/dist/components/FileUploadProgress/index.es.js +0 -109
  64. package/dist/components/Form/index.cjs.js +0 -1
  65. package/dist/components/Form/index.es.js +0 -50
  66. package/dist/components/FormField/index.cjs.js +0 -1
  67. package/dist/components/FormField/index.es.js +0 -116
  68. package/dist/components/FormGroup/index.cjs.js +0 -1
  69. package/dist/components/FormGroup/index.es.js +0 -58
  70. package/dist/components/Icon/index.cjs.js +0 -1
  71. package/dist/components/Icon/index.es.js +0 -103
  72. package/dist/components/Input/index.cjs.js +0 -1
  73. package/dist/components/Input/index.es.js +0 -123
  74. package/dist/components/Link/index.cjs.js +0 -1
  75. package/dist/components/Link/index.es.js +0 -47
  76. package/dist/components/Loader/index.cjs.js +0 -1
  77. package/dist/components/Loader/index.es.js +0 -39
  78. package/dist/components/Modal/index.cjs.js +0 -1
  79. package/dist/components/Modal/index.es.js +0 -249
  80. package/dist/components/NumericInput/index.cjs.js +0 -1
  81. package/dist/components/NumericInput/index.es.js +0 -139
  82. package/dist/components/Picker/index.cjs.js +0 -1
  83. package/dist/components/Picker/index.es.js +0 -740
  84. package/dist/components/Popover/index.cjs.js +0 -1
  85. package/dist/components/Popover/index.es.js +0 -75
  86. package/dist/components/Progress/index.cjs.js +0 -1
  87. package/dist/components/Progress/index.es.js +0 -160
  88. package/dist/components/PromoBanner/index.cjs.js +0 -1
  89. package/dist/components/PromoBanner/index.es.js +0 -74
  90. package/dist/components/PromoBannerV2/index.cjs.js +0 -1
  91. package/dist/components/PromoBannerV2/index.es.js +0 -79
  92. package/dist/components/RadioButton/index.cjs.js +0 -1
  93. package/dist/components/RadioButton/index.es.js +0 -58
  94. package/dist/components/Search/index.cjs.js +0 -1
  95. package/dist/components/Search/index.es.js +0 -117
  96. package/dist/components/SegmentedControl/index.cjs.js +0 -1
  97. package/dist/components/SegmentedControl/index.es.js +0 -55
  98. package/dist/components/Switch/index.cjs.js +0 -1
  99. package/dist/components/Switch/index.es.js +0 -145
  100. package/dist/components/Tab/index.cjs.js +0 -1
  101. package/dist/components/Tab/index.es.js +0 -93
  102. package/dist/components/Tag/index.cjs.js +0 -1
  103. package/dist/components/Tag/index.es.js +0 -143
  104. package/dist/components/TagInput/EmailTagInput.d.ts +0 -5
  105. package/dist/components/TagInput/index.cjs.js +0 -1
  106. package/dist/components/TagInput/index.es.js +0 -244
  107. package/dist/components/Textarea/index.cjs.js +0 -1
  108. package/dist/components/Textarea/index.es.js +0 -55
  109. package/dist/components/Toast/index.cjs.js +0 -1
  110. package/dist/components/Toast/index.es.js +0 -163
  111. package/dist/components/Tooltip/components/UserGuide/index.cjs.js +0 -1
  112. package/dist/components/Tooltip/components/UserGuide/index.es.js +0 -196
  113. package/dist/components/Tooltip/components/index.cjs.js +0 -1
  114. package/dist/components/Tooltip/components/index.es.js +0 -117
  115. package/dist/components/Tooltip/index.cjs.js +0 -1
  116. package/dist/components/Tooltip/index.es.js +0 -21
  117. package/dist/components/Typography/index.cjs.js +0 -1
  118. package/dist/components/Typography/index.es.js +0 -48
  119. package/dist/components/UploadBar/index.cjs.js +0 -1
  120. package/dist/components/UploadBar/index.es.js +0 -111
  121. package/dist/foundations/index.cjs.js +0 -1
  122. package/dist/foundations/index.es.js +0 -353
  123. package/dist/utils/index.cjs.js +0 -1
  124. package/dist/utils/index.es.js +0 -4
  125. /package/dist/components/TagInput/{EditableTagContent.d.ts → components/EditableTagContent.d.ts} +0 -0
@@ -1 +0,0 @@
1
- "use strict";var U=Object.defineProperty,X=Object.defineProperties;var B=Object.getOwnPropertyDescriptors;var v=Object.getOwnPropertySymbols;var G=Object.prototype.hasOwnProperty,H=Object.prototype.propertyIsEnumerable;var y=(t,e,o)=>e in t?U(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,a=(t,e)=>{for(var o in e||(e={}))G.call(e,o)&&y(t,o,e[o]);if(v)for(var o of v(e))H.call(e,o)&&y(t,o,e[o]);return t},b=(t,e)=>X(t,B(e));Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const J=require("react"),s=require("@floating-ui/react"),L=require("clsx");require("../../chunks/Typography.module-2558416b.js");const Q=require("../../chunks/Text-df483689.js");function W(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const o in t)if(o!=="default"){const r=Object.getOwnPropertyDescriptor(t,o);Object.defineProperty(e,o,r.get?r:{enumerable:!0,get:()=>t[o]})}}return e.default=t,Object.freeze(e)}const n=W(J),Y="lc-Popover-module__popover___8X1b2",Z={popover:Y},$=({triggerRenderer:t,onClose:e,onOpen:o,children:r,className:F,triggerClassName:P,placement:E,flipOptions:_,offsetSize:N=4,isVisible:i,openedOnInit:T,closeOnEsc:S=!0,useDismissHookProps:j,useClickHookProps:q,floatingStrategy:x})=>{const[I,M]=n.useState(T),h=s.useFloatingParentNodeId(),l=s.useFloatingNodeId(),u=i!==void 0,d=u?i:I,k=typeof r=="string",w=typeof t=="function",C=(g,m)=>{g?o==null||o(m):e==null||e(m),!u&&M(g)},{refs:p,context:c,floatingStyles:D}=s.useFloating({nodeId:l,open:d,onOpenChange:C,middleware:[s.offset(N),s.flip(_),s.shift()],placement:E,strategy:x,whileElementsMounted:s.autoUpdate}),R=s.useClick(c,q),O=s.useDismiss(c,a({escapeKey:S},j)),V=s.useRole(c),{getReferenceProps:z,getFloatingProps:A}=s.useInteractions([R,O,V]),K=L(Z.popover,F),f=n.createElement(n.Fragment,null,n.createElement("div",b(a({"data-testid":"popover-trigger-button",ref:p.setReference},z()),{className:P}),w?t():t),n.createElement(s.FloatingNode,{id:l},d&&n.createElement(s.FloatingFocusManager,{context:c,modal:!1},n.createElement("div",a({className:K,ref:p.setFloating,style:D},A()),k?n.createElement(Q.Text,{as:"div"},r):r))));return h===null?n.createElement(s.FloatingTree,null,f):f};exports.Popover=$;
@@ -1,75 +0,0 @@
1
- var q = Object.defineProperty, z = Object.defineProperties;
2
- var B = Object.getOwnPropertyDescriptors;
3
- var g = Object.getOwnPropertySymbols;
4
- var G = Object.prototype.hasOwnProperty, H = Object.prototype.propertyIsEnumerable;
5
- var v = (o, e, t) => e in o ? q(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t, a = (o, e) => {
6
- for (var t in e || (e = {}))
7
- G.call(e, t) && v(o, t, e[t]);
8
- if (g)
9
- for (var t of g(e))
10
- H.call(e, t) && v(o, t, e[t]);
11
- return o;
12
- }, F = (o, e) => z(o, B(e));
13
- import * as s from "react";
14
- import { useFloatingParentNodeId as J, useFloatingNodeId as L, useFloating as Q, offset as W, flip as Y, shift as Z, autoUpdate as $, useClick as O, useDismiss as ee, useRole as te, useInteractions as oe, FloatingNode as se, FloatingFocusManager as ne, FloatingTree as ae } from "@floating-ui/react";
15
- import re from "clsx";
16
- import "../../chunks/Typography.module-93efb34d.js";
17
- import { T as ie } from "../../chunks/Text-b31d1e9a.js";
18
- const le = "lc-Popover-module__popover___8X1b2", ce = {
19
- popover: le
20
- }, ge = ({
21
- triggerRenderer: o,
22
- onClose: e,
23
- onOpen: t,
24
- children: r,
25
- className: y,
26
- triggerClassName: E,
27
- placement: N,
28
- flipOptions: P,
29
- offsetSize: b = 4,
30
- isVisible: i,
31
- openedOnInit: x,
32
- closeOnEsc: I = !0,
33
- useDismissHookProps: T,
34
- useClickHookProps: _,
35
- floatingStrategy: h
36
- }) => {
37
- const [C, k] = s.useState(x), w = J(), l = L(), c = i !== void 0, m = c ? i : C, M = typeof r == "string", R = typeof o == "function", S = (d, f) => {
38
- d ? t == null || t(f) : e == null || e(f), !c && k(d);
39
- }, { refs: p, context: n, floatingStyles: V } = Q({
40
- nodeId: l,
41
- open: m,
42
- onOpenChange: S,
43
- middleware: [W(b), Y(P), Z()],
44
- placement: N,
45
- strategy: h,
46
- whileElementsMounted: $
47
- }), A = O(n, _), D = ee(n, a({
48
- escapeKey: I
49
- }, T)), K = te(n), { getReferenceProps: U, getFloatingProps: X } = oe([
50
- A,
51
- D,
52
- K
53
- ]), j = re(ce.popover, y), u = /* @__PURE__ */ s.createElement(s.Fragment, null, /* @__PURE__ */ s.createElement(
54
- "div",
55
- F(a({
56
- "data-testid": "popover-trigger-button",
57
- ref: p.setReference
58
- }, U()), {
59
- className: E
60
- }),
61
- R ? o() : o
62
- ), /* @__PURE__ */ s.createElement(se, { id: l }, m && /* @__PURE__ */ s.createElement(ne, { context: n, modal: !1 }, /* @__PURE__ */ s.createElement(
63
- "div",
64
- a({
65
- className: j,
66
- ref: p.setFloating,
67
- style: V
68
- }, X()),
69
- M ? /* @__PURE__ */ s.createElement(ie, { as: "div" }, r) : r
70
- ))));
71
- return w === null ? /* @__PURE__ */ s.createElement(ae, null, u) : u;
72
- };
73
- export {
74
- ge as Popover
75
- };
@@ -1 +0,0 @@
1
- "use strict";var O=Object.defineProperty,v=Object.defineProperties;var j=Object.getOwnPropertyDescriptors;var t=Object.getOwnPropertySymbols;var C=Object.prototype.hasOwnProperty,N=Object.prototype.propertyIsEnumerable;var S=(r,e,s)=>e in r?O(r,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):r[e]=s,P=(r,e)=>{for(var s in e||(e={}))C.call(e,s)&&S(r,s,e[s]);if(t)for(var s of t(e))N.call(e,s)&&S(r,s,e[s]);return r},y=(r,e)=>v(r,j(e));var f=(r,e)=>{var s={};for(var o in r)C.call(r,o)&&e.indexOf(o)<0&&(s[o]=r[o]);if(r!=null&&t)for(var o of t(r))e.indexOf(o)<0&&N.call(r,o)&&(s[o]=r[o]);return s};Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const k=require("react"),B=require("clsx");function I(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const s in r)if(s!=="default"){const o=Object.getOwnPropertyDescriptor(r,s);Object.defineProperty(e,s,o.get?o:{enumerable:!0,get:()=>r[s]})}}return e.default=r,Object.freeze(e)}const l=I(k),q=["normal","error","success"],D=r=>Math.min(Math.max(r,0),100);function E(r,e=0){return r==="error"?0:D(parseInt(e.toString(),10))}function R(r,e){return!q.includes(r)&&e>=100?"normal":r||"normal"}const i={"progress-circle":"lc-ProgressCircle-module__progress-circle___NRHCi","progress-circle--small":"lc-ProgressCircle-module__progress-circle--small___8FVwG","progress-circle--medium":"lc-ProgressCircle-module__progress-circle--medium___XlzEX","progress-circle--large":"lc-ProgressCircle-module__progress-circle--large___qxa2y","progress-circle__bg-line--normal":"lc-ProgressCircle-module__progress-circle__bg-line--normal___nDNwj","progress-circle__bg-line--success":"lc-ProgressCircle-module__progress-circle__bg-line--success___1aP-O","progress-circle__bg-line--error":"lc-ProgressCircle-module__progress-circle__bg-line--error___oqMZL","progress-circle__indicator--normal":"lc-ProgressCircle-module__progress-circle__indicator--normal___0SdkX","progress-circle__indicator--success":"lc-ProgressCircle-module__progress-circle__indicator--success___fLwRR","progress-circle__indicator--error":"lc-ProgressCircle-module__progress-circle__indicator--error___nwJS9"},F={small:2,medium:3,large:4},T={small:15,medium:36,large:56},n="progress-circle",Z=l.forwardRef((w,u)=>{var a=w,{status:r="normal",progressValue:e,className:s,size:o="medium"}=a,d=f(a,["status","progressValue","className","size"]);const p=R(r,e),b=E(p,e),_=F[o],c=T[o],x=B(i[n],{[i[`${n}--${o}`]]:o,[i[`${n}--${r}`]]:r},s),$=2*Math.PI*((c-_)/2),h={strokeDasharray:$.toFixed(3),strokeDashoffset:`${((100-b)/100*$).toFixed(3)}px`},M=`${c/2} ${c/2} ${c} ${c}`;return l.createElement("div",P({className:x,ref:u,role:"progressbar"},d),l.createElement("svg",{viewBox:M},l.createElement("circle",{className:i[`${n}__bg-line--${r}`],cx:c,cy:c,r:(c-_)/2,fill:"none",strokeWidth:_}),l.createElement("circle",{className:i[`${n}__indicator--${r}`],style:h,cx:c,cy:c,r:(c-_)/2,fill:"none",strokeWidth:_})))}),g={"progress-bar":"lc-ProgressBar-module__progress-bar___3pa3d","progress-bar--small":"lc-ProgressBar-module__progress-bar--small___7nQKx","progress-bar--medium":"lc-ProgressBar-module__progress-bar--medium___cM44p","progress-bar--large":"lc-ProgressBar-module__progress-bar--large___UlzNR","progress-bar--error":"lc-ProgressBar-module__progress-bar--error___MulqI","progress-bar--success":"lc-ProgressBar-module__progress-bar--success___p7nB-","progress-bar--normal":"lc-ProgressBar-module__progress-bar--normal___ZwCb-","progress-bar__indicator--success":"lc-ProgressBar-module__progress-bar__indicator--success___wRjR3","progress-bar__indicator--normal":"lc-ProgressBar-module__progress-bar__indicator--normal___0Uhle"},m="progress-bar",U=l.forwardRef((w,u)=>{var a=w,{status:r="normal",percent:e,size:s="medium",className:o=""}=a,d=f(a,["status","percent","size","className"]);const p=R(r,e),b=E(p,e),_=B(g[m],{[g[`${m}--${s}`]]:s,[g[`${m}--${r}`]]:r},o);return l.createElement("div",y(P({},d),{className:_,ref:u,role:"progressbar"}),l.createElement("div",{className:g[`${m}__indicator--${r}`],style:{width:`${b}%`}}))});exports.ProgressBar=U;exports.ProgressCircle=Z;
@@ -1,160 +0,0 @@
1
- var I = Object.defineProperty, k = Object.defineProperties;
2
- var v = Object.getOwnPropertyDescriptors;
3
- var g = Object.getOwnPropertySymbols;
4
- var f = Object.prototype.hasOwnProperty, E = Object.prototype.propertyIsEnumerable;
5
- var S = (r, e, s) => e in r ? I(r, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : r[e] = s, P = (r, e) => {
6
- for (var s in e || (e = {}))
7
- f.call(e, s) && S(r, s, e[s]);
8
- if (g)
9
- for (var s of g(e))
10
- E.call(e, s) && S(r, s, e[s]);
11
- return r;
12
- }, N = (r, e) => k(r, v(e));
13
- var $ = (r, e) => {
14
- var s = {};
15
- for (var o in r)
16
- f.call(r, o) && e.indexOf(o) < 0 && (s[o] = r[o]);
17
- if (r != null && g)
18
- for (var o of g(r))
19
- e.indexOf(o) < 0 && E.call(r, o) && (s[o] = r[o]);
20
- return s;
21
- };
22
- import * as l from "react";
23
- import B from "clsx";
24
- const F = [
25
- "normal",
26
- "error",
27
- "success"
28
- ], Z = (r) => Math.min(Math.max(r, 0), 100);
29
- function R(r, e = 0) {
30
- return r === "error" ? 0 : Z(parseInt(e.toString(), 10));
31
- }
32
- function x(r, e) {
33
- return !F.includes(r) && e >= 100 ? "normal" : r || "normal";
34
- }
35
- const i = {
36
- "progress-circle": "lc-ProgressCircle-module__progress-circle___NRHCi",
37
- "progress-circle--small": "lc-ProgressCircle-module__progress-circle--small___8FVwG",
38
- "progress-circle--medium": "lc-ProgressCircle-module__progress-circle--medium___XlzEX",
39
- "progress-circle--large": "lc-ProgressCircle-module__progress-circle--large___qxa2y",
40
- "progress-circle__bg-line--normal": "lc-ProgressCircle-module__progress-circle__bg-line--normal___nDNwj",
41
- "progress-circle__bg-line--success": "lc-ProgressCircle-module__progress-circle__bg-line--success___1aP-O",
42
- "progress-circle__bg-line--error": "lc-ProgressCircle-module__progress-circle__bg-line--error___oqMZL",
43
- "progress-circle__indicator--normal": "lc-ProgressCircle-module__progress-circle__indicator--normal___0SdkX",
44
- "progress-circle__indicator--success": "lc-ProgressCircle-module__progress-circle__indicator--success___fLwRR",
45
- "progress-circle__indicator--error": "lc-ProgressCircle-module__progress-circle__indicator--error___nwJS9"
46
- }, O = {
47
- small: 2,
48
- medium: 3,
49
- large: 4
50
- }, U = {
51
- small: 15,
52
- medium: 36,
53
- large: 56
54
- }, n = "progress-circle", L = l.forwardRef(
55
- (w, p) => {
56
- var a = w, {
57
- status: r = "normal",
58
- progressValue: e,
59
- className: s,
60
- size: o = "medium"
61
- } = a, d = $(a, [
62
- "status",
63
- "progressValue",
64
- "className",
65
- "size"
66
- ]);
67
- const u = x(r, e), b = R(u, e), _ = O[o], c = U[o], h = B(
68
- i[n],
69
- {
70
- [i[`${n}--${o}`]]: o,
71
- [i[`${n}--${r}`]]: r
72
- },
73
- s
74
- ), C = 2 * Math.PI * ((c - _) / 2), y = {
75
- strokeDasharray: C.toFixed(3),
76
- strokeDashoffset: `${((100 - b) / 100 * C).toFixed(3)}px`
77
- }, M = `${c / 2} ${c / 2} ${c} ${c}`;
78
- return /* @__PURE__ */ l.createElement(
79
- "div",
80
- P({
81
- className: h,
82
- ref: p,
83
- role: "progressbar"
84
- }, d),
85
- /* @__PURE__ */ l.createElement("svg", { viewBox: M }, /* @__PURE__ */ l.createElement(
86
- "circle",
87
- {
88
- className: i[`${n}__bg-line--${r}`],
89
- cx: c,
90
- cy: c,
91
- r: (c - _) / 2,
92
- fill: "none",
93
- strokeWidth: _
94
- }
95
- ), /* @__PURE__ */ l.createElement(
96
- "circle",
97
- {
98
- className: i[`${n}__indicator--${r}`],
99
- style: y,
100
- cx: c,
101
- cy: c,
102
- r: (c - _) / 2,
103
- fill: "none",
104
- strokeWidth: _
105
- }
106
- ))
107
- );
108
- }
109
- ), m = {
110
- "progress-bar": "lc-ProgressBar-module__progress-bar___3pa3d",
111
- "progress-bar--small": "lc-ProgressBar-module__progress-bar--small___7nQKx",
112
- "progress-bar--medium": "lc-ProgressBar-module__progress-bar--medium___cM44p",
113
- "progress-bar--large": "lc-ProgressBar-module__progress-bar--large___UlzNR",
114
- "progress-bar--error": "lc-ProgressBar-module__progress-bar--error___MulqI",
115
- "progress-bar--success": "lc-ProgressBar-module__progress-bar--success___p7nB-",
116
- "progress-bar--normal": "lc-ProgressBar-module__progress-bar--normal___ZwCb-",
117
- "progress-bar__indicator--success": "lc-ProgressBar-module__progress-bar__indicator--success___wRjR3",
118
- "progress-bar__indicator--normal": "lc-ProgressBar-module__progress-bar__indicator--normal___0Uhle"
119
- }, t = "progress-bar", T = l.forwardRef(
120
- (w, p) => {
121
- var a = w, {
122
- status: r = "normal",
123
- percent: e,
124
- size: s = "medium",
125
- className: o = ""
126
- } = a, d = $(a, [
127
- "status",
128
- "percent",
129
- "size",
130
- "className"
131
- ]);
132
- const u = x(r, e), b = R(u, e), _ = B(
133
- m[t],
134
- {
135
- [m[`${t}--${s}`]]: s,
136
- [m[`${t}--${r}`]]: r
137
- },
138
- o
139
- );
140
- return /* @__PURE__ */ l.createElement(
141
- "div",
142
- N(P({}, d), {
143
- className: _,
144
- ref: p,
145
- role: "progressbar"
146
- }),
147
- /* @__PURE__ */ l.createElement(
148
- "div",
149
- {
150
- className: m[`${t}__indicator--${r}`],
151
- style: { width: `${b}%` }
152
- }
153
- )
154
- );
155
- }
156
- );
157
- export {
158
- T as ProgressBar,
159
- L as ProgressCircle
160
- };
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const N=require("react"),R=require("@livechat/design-system-icons"),O=require("clsx"),S=require("lodash.debounce"),f=require("../Button/index.cjs.js"),v=require("../Icon/index.cjs.js");require("../../chunks/Typography.module-2558416b.js");const h=require("../../chunks/Text-df483689.js");require("../Loader/index.cjs.js");function q(o){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const a in o)if(a!=="default"){const c=Object.getOwnPropertyDescriptor(o,a);Object.defineProperty(t,a,c.get?c:{enumerable:!0,get:()=>o[a]})}}return t.default=o,Object.freeze(t)}const e=q(N),n={"promo-banner":"lc-PromoBanner-module__promo-banner___-mGpq","promo-banner__content":"lc-PromoBanner-module__promo-banner__content___kRWar","promo-banner__wrapper":"lc-PromoBanner-module__promo-banner__wrapper___I-8cl","promo-banner__header":"lc-PromoBanner-module__promo-banner__header___ebYHW","promo-banner__img":"lc-PromoBanner-module__promo-banner__img___eaShb","promo-banner__button-text":"lc-PromoBanner-module__promo-banner__button-text___taYKa","promo-banner--light":"lc-PromoBanner-module__promo-banner--light___eJxOR","promo-banner__footer":"lc-PromoBanner-module__promo-banner__footer___8OjvH","promo-banner--small":"lc-PromoBanner-module__promo-banner--small___7sWLV","promo-banner--large":"lc-PromoBanner-module__promo-banner--large___pMiCU","promo-banner__close-icon":"lc-PromoBanner-module__promo-banner__close-icon___GowBL"},y=400,z=800,C=500,r="promo-banner",L=({className:o,buttonText:t,children:a,header:c,img:i,light:E=!1,linkText:u,onButtonClick:g,onClose:d,onLinkClick:B})=>{const _=e.useRef(null),[m,l]=e.useState("medium"),P=O(n[r],{[n[`${r}--light`]]:E,[n[`${r}--small`]]:m==="small",[n[`${r}--large`]]:m==="large"},o);e.useEffect(()=>{const b=()=>_.current&&_.current.offsetWidth<=y?l("small"):_.current&&_.current.offsetWidth>=z?l("large"):l("medium"),s=S(b,C);return window.addEventListener("resize",s),b(),()=>{s.cancel(),window.removeEventListener("resize",s)}},[]);const p=e.createElement("div",{className:n[`${r}__footer`]},t&&e.createElement(f.Button,{kind:"primary",size:"compact",onClick:g,className:n[`${r}__button-text`]},t),u&&e.createElement(f.Button,{size:"compact",kind:"text",onClick:B},u));return e.createElement("div",{ref:_,className:P},e.createElement("div",{className:n[`${r}__content`]},i&&e.createElement("img",{src:i,className:n[`${r}__img`]}),e.createElement("div",{className:n[`${r}__wrapper`]},e.createElement("div",{className:n[`${r}__header`]},c),e.createElement(h.Text,{as:"div"},a),m!=="large"&&p),m==="large"&&p),d&&e.createElement("button",{type:"button",className:n[`${r}__close-icon`],onClick:d},e.createElement(v.Icon,{source:R.Close,size:"large",kind:"primary"})))};exports.PromoBanner=L;
@@ -1,74 +0,0 @@
1
- import * as e from "react";
2
- import { Close as R } from "@livechat/design-system-icons";
3
- import P from "clsx";
4
- import h from "lodash.debounce";
5
- import { Button as d } from "../Button/index.es.js";
6
- import { Icon as v } from "../Icon/index.es.js";
7
- import "../../chunks/Typography.module-93efb34d.js";
8
- import { T as C } from "../../chunks/Text-b31d1e9a.js";
9
- import "../Loader/index.es.js";
10
- const r = {
11
- "promo-banner": "lc-PromoBanner-module__promo-banner___-mGpq",
12
- "promo-banner__content": "lc-PromoBanner-module__promo-banner__content___kRWar",
13
- "promo-banner__wrapper": "lc-PromoBanner-module__promo-banner__wrapper___I-8cl",
14
- "promo-banner__header": "lc-PromoBanner-module__promo-banner__header___ebYHW",
15
- "promo-banner__img": "lc-PromoBanner-module__promo-banner__img___eaShb",
16
- "promo-banner__button-text": "lc-PromoBanner-module__promo-banner__button-text___taYKa",
17
- "promo-banner--light": "lc-PromoBanner-module__promo-banner--light___eJxOR",
18
- "promo-banner__footer": "lc-PromoBanner-module__promo-banner__footer___8OjvH",
19
- "promo-banner--small": "lc-PromoBanner-module__promo-banner--small___7sWLV",
20
- "promo-banner--large": "lc-PromoBanner-module__promo-banner--large___pMiCU",
21
- "promo-banner__close-icon": "lc-PromoBanner-module__promo-banner__close-icon___GowBL"
22
- }, L = 400, $ = 800, z = 500, o = "promo-banner", x = ({
23
- className: u,
24
- buttonText: m,
25
- children: b,
26
- header: E,
27
- img: l,
28
- light: f = !1,
29
- linkText: c,
30
- onButtonClick: g,
31
- onClose: s,
32
- onLinkClick: B
33
- }) => {
34
- const n = e.useRef(null), [a, _] = e.useState("medium"), N = P(
35
- r[o],
36
- {
37
- [r[`${o}--light`]]: f,
38
- [r[`${o}--small`]]: a === "small",
39
- [r[`${o}--large`]]: a === "large"
40
- },
41
- u
42
- );
43
- e.useEffect(() => {
44
- const p = () => n.current && n.current.offsetWidth <= L ? _("small") : n.current && n.current.offsetWidth >= $ ? _("large") : _("medium"), t = h(
45
- p,
46
- z
47
- );
48
- return window.addEventListener("resize", t), p(), () => {
49
- t.cancel(), window.removeEventListener("resize", t);
50
- };
51
- }, []);
52
- const i = /* @__PURE__ */ e.createElement("div", { className: r[`${o}__footer`] }, m && /* @__PURE__ */ e.createElement(
53
- d,
54
- {
55
- kind: "primary",
56
- size: "compact",
57
- onClick: g,
58
- className: r[`${o}__button-text`]
59
- },
60
- m
61
- ), c && /* @__PURE__ */ e.createElement(d, { size: "compact", kind: "text", onClick: B }, c));
62
- return /* @__PURE__ */ e.createElement("div", { ref: n, className: N }, /* @__PURE__ */ e.createElement("div", { className: r[`${o}__content`] }, l && /* @__PURE__ */ e.createElement("img", { src: l, className: r[`${o}__img`] }), /* @__PURE__ */ e.createElement("div", { className: r[`${o}__wrapper`] }, /* @__PURE__ */ e.createElement("div", { className: r[`${o}__header`] }, E), /* @__PURE__ */ e.createElement(C, { as: "div" }, b), a !== "large" && i), a === "large" && i), s && /* @__PURE__ */ e.createElement(
63
- "button",
64
- {
65
- type: "button",
66
- className: r[`${o}__close-icon`],
67
- onClick: s
68
- },
69
- /* @__PURE__ */ e.createElement(v, { source: R, size: "large", kind: "primary" })
70
- ));
71
- };
72
- export {
73
- x as PromoBanner
74
- };
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v=require("react"),u=require("@livechat/design-system-icons"),l=require("clsx"),m=require("../Button/index.cjs.js"),P=require("../Icon/index.cjs.js");require("../Loader/index.cjs.js");require("../../chunks/Typography.module-2558416b.js");require("../../chunks/Text-df483689.js");function k(r){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const c in r)if(c!=="default"){const e=Object.getOwnPropertyDescriptor(r,c);Object.defineProperty(t,c,e.get?e:{enumerable:!0,get:()=>r[c]})}}return t.default=r,Object.freeze(t)}const n=k(v),_={"main-wrapper":"lc-PromoBannerV2-module__main-wrapper___U-dPS","promo-banner-v2":"lc-PromoBannerV2-module__promo-banner-v2___HkNxR","promo-banner-v2__content":"lc-PromoBannerV2-module__promo-banner-v2__content___65vEP","promo-banner-v2__content__cta":"lc-PromoBannerV2-module__promo-banner-v2__content__cta___II2hK","promo-banner-v2__content__cta__secondary":"lc-PromoBannerV2-module__promo-banner-v2__content__cta__secondary___17BKS","promo-banner-v2__additional-content":"lc-PromoBannerV2-module__promo-banner-v2__additional-content___LpU9B","promo-banner-v2__close":"lc-PromoBannerV2-module__promo-banner-v2__close___rOh-U","promo-banner-v2__close__btn":"lc-PromoBannerV2-module__promo-banner-v2__close__btn___5AZQC","promo-banner-v2--vertical":"lc-PromoBannerV2-module__promo-banner-v2--vertical___p0mSU"},o="promo-banner-v2",E=({children:r,className:t,additionalContent:c,primaryButton:e,secondaryButton:a,vertical:i,contentClassName:d,additionalContentClassName:b,onClose:s})=>{const p=l(_["main-wrapper"],t);return n.createElement("div",{role:"banner",className:p},n.createElement("div",{className:l(_[o],i&&_[`${o}--vertical`])},n.createElement("div",{className:l(_[`${o}__content`],d)},r,(e||a)&&n.createElement("div",{className:_[`${o}__content__cta`]},e&&n.createElement(m.Button,{kind:(e==null?void 0:e.kind)||"high-contrast",onClick:e.handleClick},e.label),a&&n.createElement(m.Button,{kind:(a==null?void 0:a.kind)||"text",onClick:a.handleClick,className:_[`${o}__content__cta__secondary`]},a.label))),c&&n.createElement("div",{className:l(_[`${o}__additional-content`],b)},c),s&&n.createElement("div",{className:_[`${o}__close`]},n.createElement(m.Button,{className:_[`${o}__close__btn`],onClick:s,icon:n.createElement(P.Icon,{source:u.Close,kind:"primary"}),kind:"plain",size:"compact"}))))};exports.PromoBannerV2=E;
@@ -1,79 +0,0 @@
1
- import * as e from "react";
2
- import { Close as d } from "@livechat/design-system-icons";
3
- import a from "clsx";
4
- import { Button as m } from "../Button/index.es.js";
5
- import { Icon as k } from "../Icon/index.es.js";
6
- import "../Loader/index.es.js";
7
- import "../../chunks/Typography.module-93efb34d.js";
8
- import "../../chunks/Text-b31d1e9a.js";
9
- const _ = {
10
- "main-wrapper": "lc-PromoBannerV2-module__main-wrapper___U-dPS",
11
- "promo-banner-v2": "lc-PromoBannerV2-module__promo-banner-v2___HkNxR",
12
- "promo-banner-v2__content": "lc-PromoBannerV2-module__promo-banner-v2__content___65vEP",
13
- "promo-banner-v2__content__cta": "lc-PromoBannerV2-module__promo-banner-v2__content__cta___II2hK",
14
- "promo-banner-v2__content__cta__secondary": "lc-PromoBannerV2-module__promo-banner-v2__content__cta__secondary___17BKS",
15
- "promo-banner-v2__additional-content": "lc-PromoBannerV2-module__promo-banner-v2__additional-content___LpU9B",
16
- "promo-banner-v2__close": "lc-PromoBannerV2-module__promo-banner-v2__close___rOh-U",
17
- "promo-banner-v2__close__btn": "lc-PromoBannerV2-module__promo-banner-v2__close__btn___5AZQC",
18
- "promo-banner-v2--vertical": "lc-PromoBannerV2-module__promo-banner-v2--vertical___p0mSU"
19
- }, n = "promo-banner-v2", f = ({
20
- children: t,
21
- className: s,
22
- additionalContent: c,
23
- primaryButton: o,
24
- secondaryButton: r,
25
- vertical: i,
26
- contentClassName: p,
27
- additionalContentClassName: v,
28
- onClose: l
29
- }) => {
30
- const b = a(_["main-wrapper"], s);
31
- return /* @__PURE__ */ e.createElement("div", { role: "banner", className: b }, /* @__PURE__ */ e.createElement(
32
- "div",
33
- {
34
- className: a(
35
- _[n],
36
- i && _[`${n}--vertical`]
37
- )
38
- },
39
- /* @__PURE__ */ e.createElement("div", { className: a(_[`${n}__content`], p) }, t, (o || r) && /* @__PURE__ */ e.createElement("div", { className: _[`${n}__content__cta`] }, o && /* @__PURE__ */ e.createElement(
40
- m,
41
- {
42
- kind: (o == null ? void 0 : o.kind) || "high-contrast",
43
- onClick: o.handleClick
44
- },
45
- o.label
46
- ), r && /* @__PURE__ */ e.createElement(
47
- m,
48
- {
49
- kind: (r == null ? void 0 : r.kind) || "text",
50
- onClick: r.handleClick,
51
- className: _[`${n}__content__cta__secondary`]
52
- },
53
- r.label
54
- ))),
55
- c && /* @__PURE__ */ e.createElement(
56
- "div",
57
- {
58
- className: a(
59
- _[`${n}__additional-content`],
60
- v
61
- )
62
- },
63
- c
64
- ),
65
- l && /* @__PURE__ */ e.createElement("div", { className: _[`${n}__close`] }, /* @__PURE__ */ e.createElement(
66
- m,
67
- {
68
- className: _[`${n}__close__btn`],
69
- onClick: l,
70
- icon: /* @__PURE__ */ e.createElement(k, { source: d, kind: "primary" }),
71
- kind: "plain",
72
- size: "compact"
73
- }
74
- ))
75
- ));
76
- };
77
- export {
78
- f as PromoBannerV2
79
- };
@@ -1 +0,0 @@
1
- "use strict";var B=Object.defineProperty,N=Object.defineProperties;var y=Object.getOwnPropertyDescriptors;var i=Object.getOwnPropertySymbols;var d=Object.prototype.hasOwnProperty,s=Object.prototype.propertyIsEnumerable;var u=(e,o,t)=>o in e?B(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,b=(e,o)=>{for(var t in o||(o={}))d.call(o,t)&&u(e,t,o[t]);if(i)for(var t of i(o))s.call(o,t)&&u(e,t,o[t]);return e},m=(e,o)=>N(e,y(o));var p=(e,o)=>{var t={};for(var _ in e)d.call(e,_)&&o.indexOf(_)<0&&(t[_]=e[_]);if(e!=null&&i)for(var _ of i(e))o.indexOf(_)<0&&s.call(e,_)&&(t[_]=e[_]);return t};Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const $=require("react"),q=require("clsx"),x=require("../FieldDescription/index.cjs.js");require("../../chunks/Typography.module-2558416b.js");const E=require("../../chunks/Text-df483689.js");function O(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const _=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(o,t,_.get?_:{enumerable:!0,get:()=>e[t]})}}return o.default=e,Object.freeze(o)}const r=O($),a={"radio-button":"lc-RadioButton-module__radio-button___WaToM","radio-button__circle":"lc-RadioButton-module__radio-button__circle___wimWA","radio-button__label":"lc-RadioButton-module__radio-button__label___i7ygg","radio-button__inner-circle":"lc-RadioButton-module__radio-button__inner-circle___qkRVf","radio-button__text":"lc-RadioButton-module__radio-button__text___mT8c0","radio-button__input":"lc-RadioButton-module__radio-button__input___7OTAK","radio-button__helper":"lc-RadioButton-module__radio-button__helper___r8gJJ","radio-button--selected":"lc-RadioButton-module__radio-button--selected___s9lqj","radio-button--disabled":"lc-RadioButton-module__radio-button--disabled___wHSA7"},n="radio-button",T=r.forwardRef((j,f)=>{var c=j,{children:e,className:o="",description:t,checked:_,disabled:l}=c,R=p(c,["children","className","description","checked","disabled"]);const g=q(a[n],o,{[a[`${n}--selected`]]:_,[a[`${n}--disabled`]]:l});return r.createElement("div",{className:g},r.createElement("label",{className:a[`${n}__label`]},r.createElement("div",{className:a[`${n}__circle`]},r.createElement("span",{className:a[`${n}__inner-circle`]}),r.createElement("input",m(b({},R),{className:a[`${n}__input`],ref:f,type:"radio",checked:_,disabled:l}))),e&&r.createElement(E.Text,{as:"div",size:"md",className:a[`${n}__text`]},e)),t&&r.createElement(x.FieldDescription,{className:a[`${n}__helper`]},t))});exports.RadioButton=T;
@@ -1,58 +0,0 @@
1
- var $ = Object.defineProperty, f = Object.defineProperties;
2
- var E = Object.getOwnPropertyDescriptors;
3
- var r = Object.getOwnPropertySymbols;
4
- var c = Object.prototype.hasOwnProperty, m = Object.prototype.propertyIsEnumerable;
5
- var u = (t, e, o) => e in t ? $(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o, s = (t, e) => {
6
- for (var o in e || (e = {}))
7
- c.call(e, o) && u(t, o, e[o]);
8
- if (r)
9
- for (var o of r(e))
10
- m.call(e, o) && u(t, o, e[o]);
11
- return t;
12
- }, b = (t, e) => f(t, E(e));
13
- var p = (t, e) => {
14
- var o = {};
15
- for (var _ in t)
16
- c.call(t, _) && e.indexOf(_) < 0 && (o[_] = t[_]);
17
- if (t != null && r)
18
- for (var _ of r(t))
19
- e.indexOf(_) < 0 && m.call(t, _) && (o[_] = t[_]);
20
- return o;
21
- };
22
- import * as i from "react";
23
- import x from "clsx";
24
- import { FieldDescription as T } from "../FieldDescription/index.es.js";
25
- import "../../chunks/Typography.module-93efb34d.js";
26
- import { T as g } from "../../chunks/Text-b31d1e9a.js";
27
- const a = {
28
- "radio-button": "lc-RadioButton-module__radio-button___WaToM",
29
- "radio-button__circle": "lc-RadioButton-module__radio-button__circle___wimWA",
30
- "radio-button__label": "lc-RadioButton-module__radio-button__label___i7ygg",
31
- "radio-button__inner-circle": "lc-RadioButton-module__radio-button__inner-circle___qkRVf",
32
- "radio-button__text": "lc-RadioButton-module__radio-button__text___mT8c0",
33
- "radio-button__input": "lc-RadioButton-module__radio-button__input___7OTAK",
34
- "radio-button__helper": "lc-RadioButton-module__radio-button__helper___r8gJJ",
35
- "radio-button--selected": "lc-RadioButton-module__radio-button--selected___s9lqj",
36
- "radio-button--disabled": "lc-RadioButton-module__radio-button--disabled___wHSA7"
37
- }, l = "radio-button", J = i.forwardRef(
38
- (v, B) => {
39
- var d = v, { children: t, className: e = "", description: o, checked: _, disabled: n } = d, R = p(d, ["children", "className", "description", "checked", "disabled"]);
40
- const N = x(a[l], e, {
41
- [a[`${l}--selected`]]: _,
42
- [a[`${l}--disabled`]]: n
43
- });
44
- return /* @__PURE__ */ i.createElement("div", { className: N }, /* @__PURE__ */ i.createElement("label", { className: a[`${l}__label`] }, /* @__PURE__ */ i.createElement("div", { className: a[`${l}__circle`] }, /* @__PURE__ */ i.createElement("span", { className: a[`${l}__inner-circle`] }), /* @__PURE__ */ i.createElement(
45
- "input",
46
- b(s({}, R), {
47
- className: a[`${l}__input`],
48
- ref: B,
49
- type: "radio",
50
- checked: _,
51
- disabled: n
52
- })
53
- )), t && /* @__PURE__ */ i.createElement(g, { as: "div", size: "md", className: a[`${l}__text`] }, t)), o && /* @__PURE__ */ i.createElement(T, { className: a[`${l}__helper`] }, o));
54
- }
55
- );
56
- export {
57
- J as RadioButton
58
- };
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const N=require("react"),h=require("@livechat/design-system-icons"),O=require("clsx"),T=require("../../chunks/keyCodes-c4c35e49.js"),j=require("../Button/index.cjs.js"),m=require("../Icon/index.cjs.js"),v=require("../Loader/index.cjs.js");require("../../chunks/Typography.module-2558416b.js");const F=require("../../chunks/Text-df483689.js");function w(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const l=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(r,n,l.get?l:{enumerable:!0,get:()=>e[n]})}}return r.default=e,Object.freeze(r)}const c=w(N),a={"search-input":"lc-Search-module__search-input___FsbCk","search-input--compact":"lc-Search-module__search-input--compact___498To","search-input--medium":"lc-Search-module__search-input--medium___Hwteg","search-input--large":"lc-Search-module__search-input--large___-IBuC","search-input--focused":"lc-Search-module__search-input--focused___i2eul","search-input--disabled":"lc-Search-module__search-input--disabled___LSJ2e","search-input--collapsable":"lc-Search-module__search-input--collapsable___5GaIH","search-input__search-icon":"lc-Search-module__search-input__search-icon___BBQoD","search-input--collapsable--open":"lc-Search-module__search-input--collapsable--open___vqTpD","search-input__clear-icon":"lc-Search-module__search-input__clear-icon___LoNkc","search-input__loader":"lc-Search-module__search-input__loader___pkpIG","search-input__input":"lc-Search-module__search-input__input___OhyTr"},t="search-input",D=`${t}__input`,R=({isCollapsable:e,isDisabled:r,isLoading:n,placeholder:l="Search ...",size:f="medium",value:o,className:S,onChange:u})=>{const[i,_]=c.useState(!0),[b,d]=c.useState(!1),p=c.useRef(null),y=!!o&&!r&&!n,g=e&&!i&&"true",k=O(S,a[t],a[`${t}--${f}`],b&&a[`${t}--focused`],r&&a[`${t}--disabled`],e&&a[`${t}--collapsable`],!i&&a[`${t}--collapsable--open`]);c.useEffect(()=>{e&&o&&_(!1)},[e]);const C=s=>{const B=s.currentTarget.value;u(B)},I=()=>{u("")},x=()=>{var s;(s=p.current)==null||s.focus()},$=()=>{e&&_(!1),d(!0)},q=()=>{e&&!o&&_(!0),d(!1)},E=s=>{s.key===T.KeyCodes.enter&&(s.preventDefault(),u(o))};return c.createElement("div",{"aria-expanded":g,role:"search",className:k,onClick:x},c.createElement(m.Icon,{className:a[`${t}__search-icon`],source:h.Search,disabled:r,kind:"primary"}),c.createElement(F.Text,{as:"div"},c.createElement("input",{role:"searchbox",ref:p,className:a[D],type:"text",value:o,placeholder:l,onChange:C,onBlur:q,onFocus:$,onKeyDown:E,disabled:r})),y&&c.createElement(j.Button,{"aria-label":"Clear search",title:"Clear search",className:a[`${t}__clear-icon`],onClick:I,icon:c.createElement(m.Icon,{source:h.Close,kind:"primary"}),kind:"text",size:"compact"}),n&&c.createElement("div",{"data-testid":`${t}-loader`,className:a[`${t}__loader`]},c.createElement(v.Loader,{size:"small"})))};exports.SearchInput=R;
@@ -1,117 +0,0 @@
1
- import * as e from "react";
2
- import { Search as T, Close as F } from "@livechat/design-system-icons";
3
- import g from "clsx";
4
- import { K } from "../../chunks/keyCodes-30323e90.js";
5
- import { Button as v } from "../Button/index.es.js";
6
- import { Icon as m } from "../Icon/index.es.js";
7
- import { Loader as w } from "../Loader/index.es.js";
8
- import "../../chunks/Typography.module-93efb34d.js";
9
- import { T as R } from "../../chunks/Text-b31d1e9a.js";
10
- const a = {
11
- "search-input": "lc-Search-module__search-input___FsbCk",
12
- "search-input--compact": "lc-Search-module__search-input--compact___498To",
13
- "search-input--medium": "lc-Search-module__search-input--medium___Hwteg",
14
- "search-input--large": "lc-Search-module__search-input--large___-IBuC",
15
- "search-input--focused": "lc-Search-module__search-input--focused___i2eul",
16
- "search-input--disabled": "lc-Search-module__search-input--disabled___LSJ2e",
17
- "search-input--collapsable": "lc-Search-module__search-input--collapsable___5GaIH",
18
- "search-input__search-icon": "lc-Search-module__search-input__search-icon___BBQoD",
19
- "search-input--collapsable--open": "lc-Search-module__search-input--collapsable--open___vqTpD",
20
- "search-input__clear-icon": "lc-Search-module__search-input__clear-icon___LoNkc",
21
- "search-input__loader": "lc-Search-module__search-input__loader___pkpIG",
22
- "search-input__input": "lc-Search-module__search-input__input___OhyTr"
23
- }, c = "search-input", z = `${c}__input`, Q = ({
24
- isCollapsable: t,
25
- isDisabled: o,
26
- isLoading: _,
27
- placeholder: h = "Search ...",
28
- size: d = "medium",
29
- value: s,
30
- className: f,
31
- onChange: n
32
- }) => {
33
- const [u, l] = e.useState(!0), [S, i] = e.useState(!1), p = e.useRef(null), C = !!s && !o && !_, $ = t && !u && "true", k = g(
34
- f,
35
- a[c],
36
- a[`${c}--${d}`],
37
- S && a[`${c}--focused`],
38
- o && a[`${c}--disabled`],
39
- t && a[`${c}--collapsable`],
40
- !u && a[`${c}--collapsable--open`]
41
- );
42
- e.useEffect(() => {
43
- t && s && l(!1);
44
- }, [t]);
45
- const E = (r) => {
46
- const N = r.currentTarget.value;
47
- n(N);
48
- }, y = () => {
49
- n("");
50
- }, b = () => {
51
- var r;
52
- (r = p.current) == null || r.focus();
53
- }, x = () => {
54
- t && l(!1), i(!0);
55
- }, I = () => {
56
- t && !s && l(!0), i(!1);
57
- }, B = (r) => {
58
- r.key === K.enter && (r.preventDefault(), n(s));
59
- };
60
- return /* @__PURE__ */ e.createElement(
61
- "div",
62
- {
63
- "aria-expanded": $,
64
- role: "search",
65
- className: k,
66
- onClick: b
67
- },
68
- /* @__PURE__ */ e.createElement(
69
- m,
70
- {
71
- className: a[`${c}__search-icon`],
72
- source: T,
73
- disabled: o,
74
- kind: "primary"
75
- }
76
- ),
77
- /* @__PURE__ */ e.createElement(R, { as: "div" }, /* @__PURE__ */ e.createElement(
78
- "input",
79
- {
80
- role: "searchbox",
81
- ref: p,
82
- className: a[z],
83
- type: "text",
84
- value: s,
85
- placeholder: h,
86
- onChange: E,
87
- onBlur: I,
88
- onFocus: x,
89
- onKeyDown: B,
90
- disabled: o
91
- }
92
- )),
93
- C && /* @__PURE__ */ e.createElement(
94
- v,
95
- {
96
- "aria-label": "Clear search",
97
- title: "Clear search",
98
- className: a[`${c}__clear-icon`],
99
- onClick: y,
100
- icon: /* @__PURE__ */ e.createElement(m, { source: F, kind: "primary" }),
101
- kind: "text",
102
- size: "compact"
103
- }
104
- ),
105
- _ && /* @__PURE__ */ e.createElement(
106
- "div",
107
- {
108
- "data-testid": `${c}-loader`,
109
- className: a[`${c}__loader`]
110
- },
111
- /* @__PURE__ */ e.createElement(w, { size: "small" })
112
- )
113
- );
114
- };
115
- export {
116
- Q as SearchInput
117
- };
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const j=require("react"),i=require("clsx"),P=require("../Button/index.cjs.js");require("../Loader/index.cjs.js");require("../../chunks/Typography.module-2558416b.js");require("../../chunks/Text-df483689.js");function w(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const c=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(o,t,c.get?c:{enumerable:!0,get:()=>e[t]})}}return o.default=e,Object.freeze(o)}const r=w(j);function N(){}const E="lc-SegmentedControl-module__btn___tfsvL",l={"segmented-control":"lc-SegmentedControl-module__segmented-control___LHWSk",btn:E,"btn--active":"lc-SegmentedControl-module__btn--active___Za-th","btn--compact":"lc-SegmentedControl-module__btn--compact___gcSwq","btn--medium":"lc-SegmentedControl-module__btn--medium___w3UzC","btn--large":"lc-SegmentedControl-module__btn--large___yHPw4"},h="segmented-control",x=({size:e="medium",buttons:o,className:t,initialId:c,currentId:s,fullWidth:_=!1,onButtonClick:g=N})=>{const b=i(l[h],t),[S,u]=r.useState(()=>c),d=typeof s=="string";r.useEffect(()=>{d&&u(s)},[s]);const f=(n,a)=>{d||u(n),g(n,a)},p=o.map(({id:n,label:a,loading:C,disabled:y,icon:v})=>{const m=n===S,q=m?l["btn--active"]:"",k=m?!1:C;return r.createElement(P.Button,{key:n,fullWidth:_,loading:k,disabled:y,"aria-pressed":m,kind:"secondary",icon:v,className:i(l.btn,l[`btn--${e}`],q),onClick:O=>{f(n,O)}},a)});return r.createElement("div",{role:"group",className:b},p)};exports.SegmentedControl=x;