@livechat/design-system-react-components 1.8.0 → 1.9.0

package/dist/dsrc.es.js

@@ -307,7 +307,8 @@ const Rc = {
   SurfaceAvatar7: "--surface-avatar-7",
   SurfaceAvatar8: "--surface-avatar-8",
   SurfaceAvatar9: "--surface-avatar-9",
-  SurfaceAvatar10: "--surface-avatar-10"
+  SurfaceAvatar10: "--surface-avatar-10",
+  NavbarBackground: "--navbar-background"
 }, Mc = {
   Spacing0: "--spacing-0",
   Spacing05: "--spacing-05",
@@ -345,7 +346,14 @@ const Rc = {
   1: "--radius-1",
   2: "--radius-2",
   3: "--radius-3"
-}, Hc = (t, a) => `color-mix(in srgb, var(${t}) ${a}, transparent)`, z = {
+}, Hc = {
+  Fast1: "--transition-duration-fast-1",
+  Fast2: "--transition-duration-fast-2",
+  Moderate1: "--transition-duration-moderate-1"
+}, zc = {
+  EaseIn: "--transition-timing-ease-in",
+  EaseOut: "--transition-timing-ease-out"
+}, Gc = (t, a) => `color-mix(in srgb, var(${t}) ${a}, transparent)`, z = {
   esc: "Escape",
   enter: "Enter",
   backspace: "Backspace",
@@ -575,7 +583,7 @@ const Rc = {
     }, s),
     l
   );
-}, zc = (c) => {
+}, Uc = (c) => {
   var l = c, {
     as: t = "div",
     size: a = "md",
@@ -980,7 +988,7 @@ const o_ = "lc-Tooltip-module__tooltip___QOOAr", c_ = "lc-Tooltip-module__toolti
       }
     )
   ));
-}, Gc = ({ text: t }) => /* @__PURE__ */ e.createElement("div", null, t), mt = "tooltip", Uc = ({ className: t, header: a, text: r, closeWithX: _, theme: o, handleCloseAction: c }) => /* @__PURE__ */ e.createElement("div", { className: t }, _ && /* @__PURE__ */ e.createElement(
+}, Wc = ({ text: t }) => /* @__PURE__ */ e.createElement("div", null, t), mt = "tooltip", Vc = ({ className: t, header: a, text: r, closeWithX: _, theme: o, handleCloseAction: c }) => /* @__PURE__ */ e.createElement("div", { className: t }, _ && /* @__PURE__ */ e.createElement(
   "button",
   {
     className: C[`${mt}-close`],
@@ -1005,7 +1013,7 @@ const o_ = "lc-Tooltip-module__tooltip___QOOAr", c_ = "lc-Tooltip-module__toolti
     )
   },
   r
-)), xe = "tooltip", Wc = ({
+)), xe = "tooltip", Yc = ({
   header: t,
   text: a,
   image: r,
@@ -1174,7 +1182,7 @@ class s_ {
     return this.getBoundingClientRect().height;
   }
 }
-const xa = 8, Sa = "guide-tooltip", Da = (t, a) => new s_(t, a), Vc = (t) => {
+const xa = 8, Sa = "guide-tooltip", Da = (t, a) => new s_(t, a), qc = (t) => {
   const {
     className: a,
     parentElementName: r,
@@ -1231,7 +1239,7 @@ const xa = 8, Sa = "guide-tooltip", Da = (t, a) => new s_(t, a), Vc = (t) => {
     }),
     t.children
   )) : null;
-}, pt = "reports-tooltip", Yc = ({
+}, pt = "reports-tooltip", Kc = ({
   title: t,
   description: a,
   children: r
@@ -1308,7 +1316,7 @@ const xa = 8, Sa = "guide-tooltip", Da = (t, a) => new s_(t, a), Vc = (t) => {
       icon: t.element
     }
   );
-}, Xe = "action-bar", qc = ({
+}, Xe = "action-bar", Jc = ({
   className: t,
   id: a = "action-bar-area",
   type: r = "menu",
@@ -1440,7 +1448,7 @@ const xa = 8, Sa = "guide-tooltip", Da = (t, a) => new s_(t, a), Vc = (t) => {
     source: Ya,
     kind: "error"
   }
-}, ke = "alert", Kc = (n) => {
+}, ke = "alert", jc = (n) => {
   var s = n, {
     children: t,
     className: a,
@@ -1686,7 +1694,7 @@ const A_ = "lc-SegmentedControl-module__btn___tfsvL", Bt = {
   "btn--compact": "lc-SegmentedControl-module__btn--compact___gcSwq",
   "btn--medium": "lc-SegmentedControl-module__btn--medium___w3UzC",
   "btn--large": "lc-SegmentedControl-module__btn--large___yHPw4"
-}, I_ = "segmented-control", Jc = ({
+}, I_ = "segmented-control", Qc = ({
   size: t = "medium",
   buttons: a,
   className: r,
@@ -1736,7 +1744,7 @@ const A_ = "lc-SegmentedControl-module__btn___tfsvL", Bt = {
   card__actions__line: G_,
   card__actions__buttons: U_,
   "card__actions__buttons-expander": "lc-Card-module__card__actions__buttons-expander___lz4h-"
-}, Et = "card", zt = `${Et}__header`, Yt = `${zt}__heading`, At = `${Et}__actions`, W_ = `${zt}__no-image`, jc = (i) => {
+}, Et = "card", zt = `${Et}__header`, Yt = `${zt}__heading`, At = `${Et}__actions`, W_ = `${zt}__no-image`, Zc = (i) => {
   var d = i, {
     alt: t,
     buttonsOptions: a = [],
@@ -1807,7 +1815,7 @@ const A_ = "lc-SegmentedControl-module__btn___tfsvL", Bt = {
   checkbox__square: Z_,
   "checkbox--disabled": "lc-Checkbox-module__checkbox--disabled___-lAqW",
   checkbox__helper: X_
-}, Ye = "checkbox", Qc = e.forwardRef(
+}, Ye = "checkbox", Xc = e.forwardRef(
   (n, l) => {
     var s = n, { checked: t, disabled: a, children: r, description: _, className: o } = s, c = P(s, ["checked", "disabled", "children", "description", "className"]);
     return /* @__PURE__ */ e.createElement(
@@ -2330,7 +2338,7 @@ const L = {
   "details-card__content": "lc-DetailsCard-module__details-card__content___RNVd2",
   "details-card__content--spacing": "lc-DetailsCard-module__details-card__content--spacing___QecUa",
   "details-card__content--full-space": "lc-DetailsCard-module__details-card__content--full-space___2ms8I"
-}, O = "details-card", Zc = ({
+}, O = "details-card", el = ({
   children: t,
   className: a,
   leftNode: r,
@@ -2443,7 +2451,7 @@ const L = {
   "details-card-info": "lc-DetailsCardInfo-module__details-card-info___D4VRk",
   "details-card-info__label": "lc-DetailsCardInfo-module__details-card-info__label___U-KsO",
   "details-card-info__content": "lc-DetailsCardInfo-module__details-card-info__content___TFEXS"
-}, Kt = "details-card-info", Xc = ({
+}, Kt = "details-card-info", tl = ({
   children: t,
   label: a
 }) => /* @__PURE__ */ e.createElement("div", { className: qt[Kt] }, /* @__PURE__ */ e.createElement("div", { className: qt[`${Kt}__label`] }, a), /* @__PURE__ */ e.createElement("div", { className: qt[`${Kt}__content`] }, t)), Pa = {
@@ -2470,7 +2478,7 @@ const L = {
   "field-group": "lc-FieldGroup-module__field-group___gy8lp",
   "field-group--inline": "lc-FieldGroup-module__field-group--inline___or4qf",
   "field-group--stretched": "lc-FieldGroup-module__field-group--stretched___6rkuO"
-}, jt = "field-group", el = (n) => {
+}, jt = "field-group", al = (n) => {
   var s = n, {
     className: t = "",
     children: a,
@@ -2497,7 +2505,7 @@ const L = {
   form__footer: uo,
   form__label: mo,
   form__helper: po
-}, bt = "form", tl = (l) => {
+}, bt = "form", rl = (l) => {
   var n = l, {
     className: t,
     children: a,
@@ -2529,7 +2537,7 @@ const L = {
   "form-field__row-break": "lc-FormField-module__form-field__row-break___DCBjC",
   "form-field__content": "lc-FormField-module__form-field__content___XaOx3",
   "form-field__content__description": "lc-FormField-module__form-field__content__description___NpVw4"
-}, K = "form-field", al = ({
+}, K = "form-field", _l = ({
   inline: t,
   error: a,
   description: r,
@@ -2621,7 +2629,7 @@ const L = {
   "form-group__header": "lc-FormGroup-module__form-group__header___DgGmR",
   "form-group__label": "lc-FormGroup-module__form-group__label___NC-JW",
   "form-group__helper": "lc-FormGroup-module__form-group__helper___SRuxe"
-}, Pt = "form-group", rl = (c) => {
+}, Pt = "form-group", ol = (c) => {
   var l = c, {
     className: t = "",
     children: a,
@@ -2667,7 +2675,7 @@ const L = {
       [De[`${Te}__icon--disabled`]]: a
     }
   )
-}), _l = e.forwardRef(
+}), cl = e.forwardRef(
   (s, n) => {
     var i = s, {
       inputSize: t = "medium",
@@ -2723,7 +2731,7 @@ const L = {
 ), bo = "lc-Link-module__link___kqx52", Ma = {
   link: bo,
   "link--bold": "lc-Link-module__link--bold___1rGdO"
-}, La = "link", ol = (_) => {
+}, La = "link", ll = (_) => {
   var o = _, {
     bold: t = !1,
     className: a = ""
@@ -2822,7 +2830,7 @@ const L = {
     onClick: r,
     icon: /* @__PURE__ */ e.createElement(x, { source: Ne, size: "medium", customColor: a })
   }
-), qe = "modal", cl = (i) => {
+), qe = "modal", nl = (i) => {
   var d = i, {
     children: t,
     className: a = "",
@@ -2887,7 +2895,7 @@ const L = {
     ),
     c && /* @__PURE__ */ e.createElement("div", { className: ue[`${qe}__footer`] }, c)
   );
-}, ll = ({
+}, sl = ({
   children: t,
   className: a = "",
   parentElementName: r = "body",
@@ -2907,7 +2915,7 @@ const L = {
   "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"
-}, tt = "modal-header", nl = ({
+}, tt = "modal-header", il = ({
   title: t,
   iconProps: a,
   avatarProps: r,
@@ -2948,7 +2956,7 @@ const L = {
   "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"
-}, rt = "numeric-input", sl = (d) => {
+}, rt = "numeric-input", dl = (d) => {
   var m = d, {
     className: t,
     error: a,
@@ -3534,7 +3542,7 @@ const j = {
 }, Io = "lc-Picker-module__picker___GRj9W", Po = "lc-Picker-module__picker__container___s0PUc", za = {
   picker: Io,
   picker__container: Po
-}, Ga = "picker", il = (k) => {
+}, Ga = "picker", ul = (k) => {
   var f = k, {
     className: t,
     disabled: a,
@@ -3669,7 +3677,7 @@ const j = {
   )));
 }, Fo = "lc-Popover-module__popover___8X1b2", Ro = {
   popover: Fo
-}, dl = ({
+}, ml = ({
   triggerRenderer: t,
   onClose: a,
   onOpen: r,
@@ -3864,7 +3872,7 @@ const ft = {
   "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"
-}, Uo = 400, Wo = 800, Vo = 500, $e = "promo-banner", ul = ({
+}, Uo = 400, Wo = 800, Vo = 500, $e = "promo-banner", pl = ({
   className: t,
   buttonText: a,
   children: r,
@@ -3922,7 +3930,7 @@ const ft = {
   "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"
-}, Ke = "promo-banner-v2", ml = ({
+}, Ke = "promo-banner-v2", gl = ({
   children: t,
   className: a,
   additionalContent: r,
@@ -3966,7 +3974,7 @@ const ft = {
   "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"
-}, Fe = "radio-button", pl = e.forwardRef(
+}, Fe = "radio-button", bl = e.forwardRef(
   (n, l) => {
     var s = n, { children: t, className: a = "", description: r, checked: _, disabled: o } = s, c = P(s, ["children", "className", "description", "checked", "disabled"]);
     const i = g(Pe[Fe], a, {
@@ -3997,7 +4005,7 @@ const ft = {
   "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"
-}, Ce = "search-input", Yo = `${Ce}__input`, gl = ({
+}, Ce = "search-input", Yo = `${Ce}__input`, fl = ({
   isCollapsable: t,
   isDisabled: a,
   isLoading: r,
@@ -4116,7 +4124,7 @@ const ft = {
   "switch__loader--medium": "lc-Switch-module__switch__loader--medium___2zi05",
   "switch__loader--large": "lc-Switch-module__switch__loader--large___vLRFa",
   switch__icon: Zo
-}, re = "switch", bl = (m) => {
+}, re = "switch", vl = (m) => {
   var u = m, {
     className: t = "",
     defaultOn: a = !1,
@@ -4211,7 +4219,7 @@ const ft = {
   tab__badge: tc,
   "tab--selected": "lc-Tab-module__tab--selected___c0EkL",
   "tab--disabled": "lc-Tab-module__tab--disabled___URdTh"
-}, ot = "tab", fl = (n) => {
+}, ot = "tab", hl = (n) => {
   var s = n, {
     children: t,
     className: a,
@@ -4257,10 +4265,10 @@ const ft = {
 }, ac = "lc-TabsWrapper-module__tabs___Y2xyD", rc = "lc-TabsWrapper-module__tabs__list___i6tVO", lr = {
   tabs: ac,
   tabs__list: rc
-}, nr = "tabs", vl = ({
+}, nr = "tabs", kl = ({
   className: t,
   children: a
-}) => /* @__PURE__ */ e.createElement("div", { className: g(lr[nr], t) }, a), hl = ({
+}) => /* @__PURE__ */ e.createElement("div", { className: g(lr[nr], t) }, a), yl = ({
   className: t,
   children: a
 }) => /* @__PURE__ */ e.createElement("div", { className: g(lr[`${nr}__list`], t) }, a), _c = ({
@@ -4442,7 +4450,7 @@ const ft = {
       onBlur: T
     })
   )), o && /* @__PURE__ */ e.createElement(va, null, o));
-}, ic = /^(?:[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, dc = "name@company.com", uc = (t) => ic.test(t), kl = (n) => {
+}, ic = /^(?:[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, dc = "name@company.com", uc = (t) => ic.test(t), El = (n) => {
   var s = n, {
     id: t,
     tags: a,
@@ -4555,7 +4563,7 @@ const ft = {
     },
     /* @__PURE__ */ e.createElement(x, { source: Ne, size: "medium" })
   )));
-}, hc = 200, ht = "toast-wrapper", yl = ({
+}, hc = 200, ht = "toast-wrapper", $l = ({
   className: t,
   toasts: a = [],
   fixed: r = !0,
@@ -4602,7 +4610,7 @@ const ft = {
   "textarea--focused": "lc-Textarea-module__textarea--focused___1vtEx",
   "textarea--disabled": "lc-Textarea-module__textarea--disabled___xXaGv",
   "textarea--error": "lc-Textarea-module__textarea--error___0EGuq"
-}, Ht = "textarea", El = e.forwardRef(
+}, Ht = "textarea", wl = e.forwardRef(
   (o, _) => {
     var c = o, { className: t, error: a } = c, r = P(c, ["className", "error"]);
     const { disabled: l, onBlur: n, onFocus: s } = r, [i, d] = e.useState(!1), m = g(t, Ot[Ht], {
@@ -4748,7 +4756,7 @@ const ft = {
     status: t,
     progressValue: a
   }
-), $l = ({
+), Cl = ({
   children: t,
   className: a,
   progressValue: r,
@@ -4821,71 +4829,73 @@ const ft = {
 };
 export {
   hc as ANIMATION_TIME,
-  qc as ActionBar,
+  Jc as ActionBar,
   Wr as ActionMenu,
   qr as ActionMenuItem,
-  Kc as Alert,
+  jc as Alert,
   N_ as Avatar,
   T_ as Badge,
   G as Button,
-  jc as Card,
-  Qc as Checkbox,
+  Zc as Card,
+  Xc as Checkbox,
   co as DatePicker,
   Rc as DesignToken,
-  Zc as DetailsCard,
-  Xc as DetailsCardInfo,
-  zc as Display,
-  kl as EmailTagInput,
+  el as DetailsCard,
+  tl as DetailsCardInfo,
+  Uc as Display,
+  El as EmailTagInput,
   Ut as FieldDescription,
   va as FieldError,
-  el as FieldGroup,
+  al as FieldGroup,
   yc as FileUploadProgress,
   oa as FileUploadProgressActions,
-  tl as Form,
-  al as FormField,
-  rl as FormGroup,
+  rl as Form,
+  _l as FormField,
+  ol as FormGroup,
   je as Heading,
   x as Icon,
-  Uc as Info,
-  _l as Input,
-  Wc as Interactive,
-  ol as Link,
+  Vc as Info,
+  cl as Input,
+  Yc as Interactive,
+  ll as Link,
   fa as Loader,
-  cl as Modal,
+  nl as Modal,
   yo as ModalBase,
   Oa as ModalCloseButton,
-  nl as ModalHeader,
-  ll as ModalPortal,
-  sl as NumericInput,
-  il as Picker,
+  il as ModalHeader,
+  sl as ModalPortal,
+  dl as NumericInput,
+  ul as Picker,
   wo as PickerList,
-  dl as Popover,
+  ml as Popover,
   Go as ProgressBar,
   zo as ProgressCircle,
-  ul as PromoBanner,
-  ml as PromoBannerV2,
-  pl as RadioButton,
+  pl as PromoBanner,
+  gl as PromoBannerV2,
+  bl as RadioButton,
   Oc as RadiusToken,
   no as RangeDatePicker,
-  Yc as Reports,
-  gl as SearchInput,
-  Jc as SegmentedControl,
+  Kc as Reports,
+  fl as SearchInput,
+  Qc as SegmentedControl,
   Lc as ShadowToken,
-  Gc as Simple,
+  Wc as Simple,
   Mc as SpacingToken,
-  bl as Switch,
-  fl as Tab,
-  hl as TabsList,
-  vl as TabsWrapper,
+  vl as Switch,
+  hl as Tab,
+  yl as TabsList,
+  kl as TabsWrapper,
   _r as Tag,
   sc as TagInput,
   M as Text,
-  El as Textarea,
+  wl as Textarea,
   vc as Toast,
-  yl as ToastWrapper,
+  $l as ToastWrapper,
   tr as Tooltip,
-  $l as UploadBar,
-  Vc as UserGuide,
+  Hc as TransitionDurationToken,
+  zc as TransitionTimingToken,
+  Cl as UploadBar,
+  qc as UserGuide,
   h_ as generateAvatarColor,
-  Hc as getDesignTokenWithOpacity
+  Gc as getDesignTokenWithOpacity
 };

package/dist/foundations/transition-token.d.ts

@@ -0,0 +1,9 @@
+export declare const TransitionDurationToken: {
+    Fast1: string;
+    Fast2: string;
+    Moderate1: string;
+};
+export declare const TransitionTimingToken: {
+    EaseIn: string;
+    EaseOut: string;
+};

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export { DesignToken } from './themes/design-token';
 export { SpacingToken } from './foundations/spacing-token';
 export { ShadowToken } from './foundations/shadow-token';
 export { RadiusToken } from './foundations/radius-token';
+export { TransitionDurationToken, TransitionTimingToken, } from './foundations/transition-token';
 export type { Size } from './utils';
 export { getDesignTokenWithOpacity } from './utils';
 export * from './components/ActionBar';