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

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

@@ -0,0 +1,516 @@
+var K = Object.defineProperty, ee = Object.defineProperties;
+var te = Object.getOwnPropertyDescriptors;
+var w = Object.getOwnPropertySymbols;
+var B = Object.prototype.hasOwnProperty, x = Object.prototype.propertyIsEnumerable;
+var W = (e, t, a) => t in e ? K(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a, y = (e, t) => {
+  for (var a in t || (t = {}))
+    B.call(t, a) && W(e, a, t[a]);
+  if (w)
+    for (var a of w(t))
+      x.call(t, a) && W(e, a, t[a]);
+  return e;
+}, D = (e, t) => ee(e, te(t));
+var A = (e, t) => {
+  var a = {};
+  for (var _ in e)
+    B.call(e, _) && t.indexOf(_) < 0 && (a[_] = e[_]);
+  if (e != null && w)
+    for (var _ of w(e))
+      t.indexOf(_) < 0 && x.call(e, _) && (a[_] = e[_]);
+  return a;
+};
+import * as s from "react";
+import { useReducer as ae, useRef as re, useEffect as P, useCallback as R, useMemo as I } from "react";
+import _e from "react-day-picker";
+import { DoubleArrowLeft as ne, ChevronLeft as de, ChevronRight as ce, DoubleArrowRight as oe } from "@livechat/design-system-icons";
+import v from "clsx";
+import { subMonths as S, differenceInCalendarMonths as F, addMonths as H, isSameMonth as g, isSameDay as L, isAfter as Y, differenceInCalendarDays as V } from "date-fns";
+import { Icon as $ } from "../Icon/index.es.js";
+const r = {
+  "date-picker": "lc-DatePicker-module__date-picker___9AqJ2",
+  "date-picker--interaction-disabled": "lc-DatePicker-module__date-picker--interaction-disabled___-zn8o",
+  "date-picker__day": "lc-DatePicker-module__date-picker__day___ZTSw9",
+  "date-picker__day--disabled": "lc-DatePicker-module__date-picker__day--disabled___4O6yW",
+  "date-picker__day--selected": "lc-DatePicker-module__date-picker__day--selected___1D1tC",
+  "date-picker__day--outside": "lc-DatePicker-module__date-picker__day--outside___ptNdC",
+  "date-picker__day-content": "lc-DatePicker-module__date-picker__day-content___rDIa0",
+  "date-picker__wrapper": "lc-DatePicker-module__date-picker__wrapper___tNp4l",
+  "date-picker__months": "lc-DatePicker-module__date-picker__months___QuPb0",
+  "date-picker__month": "lc-DatePicker-module__date-picker__month___239nh",
+  "date-picker__nav-bar": "lc-DatePicker-module__date-picker__nav-bar___u-l17",
+  "date-picker__nav-button": "lc-DatePicker-module__date-picker__nav-button___1Ysdp",
+  "date-picker__nav-button--interaction-disabled": "lc-DatePicker-module__date-picker__nav-button--interaction-disabled___Ivjrx",
+  "date-picker__caption": "lc-DatePicker-module__date-picker__caption___XPgZJ",
+  "date-picker__weekdays": "lc-DatePicker-module__date-picker__weekdays___kpTY9",
+  "date-picker__weekdays-row": "lc-DatePicker-module__date-picker__weekdays-row___tGgay",
+  "date-picker__weekday": "lc-DatePicker-module__date-picker__weekday___3FCx8",
+  "date-picker__body": "lc-DatePicker-module__date-picker__body___toP1u",
+  "date-picker__week": "lc-DatePicker-module__date-picker__week___nZI1x",
+  "date-picker__day-wrapper": "lc-DatePicker-module__date-picker__day-wrapper___gGeeJ",
+  "date-picker__day--today": "lc-DatePicker-module__date-picker__day--today___LL51c",
+  "date-picker__footer": "lc-DatePicker-module__date-picker__footer___cXMQ5",
+  "date-picker__input": "lc-DatePicker-module__date-picker__input___r6qih",
+  "date-picker__input-overlay-wrapper": "lc-DatePicker-module__date-picker__input-overlay-wrapper___vmC0M",
+  "date-picker__input-overlay": "lc-DatePicker-module__date-picker__input-overlay___eJ9D0",
+  "date-picker--range": "lc-DatePicker-module__date-picker--range___ZU-7k",
+  "date-picker__day--start": "lc-DatePicker-module__date-picker__day--start___-oB8U",
+  "date-picker__day--end": "lc-DatePicker-module__date-picker__day--end___TtN5P",
+  "date-picker__day--single": "lc-DatePicker-module__date-picker__day--single___biWcB",
+  "date-picker__day--sunday": "lc-DatePicker-module__date-picker__day--sunday___JEnhV",
+  "date-picker__day--monday": "lc-DatePicker-module__date-picker__day--monday___NXYIr",
+  "date-picker--range__select-input": "lc-DatePicker-module__date-picker--range__select-input___6pyj3",
+  "date-picker--range__calendars-wrapper": "lc-DatePicker-module__date-picker--range__calendars-wrapper___8nWaW",
+  "date-picker__navbar-buttons-wrapper": "lc-DatePicker-module__date-picker__navbar-buttons-wrapper___Hnksb"
+}, U = "date-picker", ie = (e) => {
+  const {
+    onPreviousClick: t,
+    onMonthChange: a,
+    onNextClick: _,
+    showNextButton: i,
+    showPreviousButton: c,
+    className: l,
+    classNames: E,
+    numberOfMonths: m,
+    month: u,
+    fromMonth: T,
+    toMonth: N
+  } = e, b = () => {
+    typeof t == "function" && t();
+  }, C = () => {
+    typeof _ == "function" && _();
+  }, M = () => {
+    if (!T) {
+      const f = S(u, 12);
+      return a(f);
+    }
+    const o = Math.abs(F(u, T)), p = S(
+      u,
+      !Number.isNaN(o) && o > 12 ? 12 : o
+    );
+    return a(p);
+  }, d = () => {
+    if (!N) {
+      const f = H(u, 12);
+      return a(f);
+    }
+    const o = Math.abs(F(N, u)), p = H(
+      u,
+      !Number.isNaN(o) && o > 12 ? 12 : o
+    );
+    return m === 2 && g(p, N) ? a(S(p, 1)) : a(p);
+  };
+  return /* @__PURE__ */ s.createElement("div", { className: l }, /* @__PURE__ */ s.createElement("div", { className: r[`${U}__navbar-buttons-wrapper`] }, /* @__PURE__ */ s.createElement(
+    "button",
+    {
+      "data-testid": "date-picker-prev-year-button",
+      className: v({
+        [E.navButtonPrev]: !0,
+        [E.navButtonInteractionDisabled]: !c
+      }),
+      onClick: M
+    },
+    /* @__PURE__ */ s.createElement($, { source: ne, kind: "subtle" })
+  ), /* @__PURE__ */ s.createElement(
+    "button",
+    {
+      "data-testid": "date-picker-prev-month-button",
+      className: v({
+        [E.navButtonPrev]: !0,
+        [E.navButtonInteractionDisabled]: !c
+      }),
+      onClick: b
+    },
+    /* @__PURE__ */ s.createElement($, { source: de, kind: "subtle" })
+  )), /* @__PURE__ */ s.createElement("div", { className: r[`${U}__navbar-buttons-wrapper`] }, /* @__PURE__ */ s.createElement(
+    "button",
+    {
+      "data-testid": "date-picker-next-month-button",
+      className: v({
+        [E.navButtonNext]: !0,
+        [E.navButtonInteractionDisabled]: !i
+      }),
+      onClick: C
+    },
+    /* @__PURE__ */ s.createElement($, { source: ce, kind: "subtle" })
+  ), /* @__PURE__ */ s.createElement(
+    "button",
+    {
+      "data-testid": "date-picker-next-year-button",
+      className: v({
+        [E.navButtonNext]: !0,
+        [E.navButtonInteractionDisabled]: !i
+      }),
+      onClick: d
+    },
+    /* @__PURE__ */ s.createElement($, { source: oe, kind: "subtle" })
+  )));
+}, n = "date-picker", Z = (e, t) => {
+  const { from: a, to: _ } = t;
+  return !(_ && !L(e, _) && Y(e, _) || a && !L(e, a) && !Y(e, a));
+}, X = (e, t, a) => t ? e && !g(e, t) || a && g(t, a) ? S(t, 1) : t : S(a || /* @__PURE__ */ new Date(), 1), se = (e, t) => {
+  const a = {
+    [r[`${n}__day--monday`]]: { daysOfWeek: [1] },
+    [r[`${n}__day--sunday`]]: { daysOfWeek: [0] },
+    [r[`${n}__day--start`]]: e,
+    [r[`${n}__day--end`]]: e
+  };
+  if (!t || !e)
+    return a;
+  const _ = V(t, e);
+  return _ > 0 ? D(y({}, a), {
+    [r[`${n}__day--end`]]: t
+  }) : _ < 0 ? D(y({}, a), {
+    [r[`${n}__day--start`]]: t
+  }) : a;
+}, h = (e, t) => {
+  const a = t.find((_) => _.id === e);
+  return a || void 0;
+}, G = (e, t) => !!(!e || e && t), le = (e) => {
+  const t = {};
+  if (!e.initialSelectedItemKey)
+    return t;
+  const a = h(
+    e.initialSelectedItemKey,
+    e.options
+  );
+  return a ? (t.selectedItem = e.initialSelectedItemKey, a.isManual && (e.initialFromDate && (t.from = e.initialFromDate), e.initialToDate && (t.to = e.initialToDate, t.temporaryTo = e.initialToDate)), t) : {};
+}, ue = (e, t) => y({
+  container: v({
+    [r[`${n}`]]: !0,
+    [r[`${n}--range`]]: e
+  }),
+  wrapper: r[`${n}__wrapper`],
+  interactionDisabled: r[`${n}--interaction-disabled`],
+  months: r[`${n}__months`],
+  month: r[`${n}__month`],
+  navBar: r[`${n}__nav-bar`],
+  navButtonPrev: v(
+    r[`${n}__nav-button`],
+    r[`${n}__nav-button--prev`]
+  ),
+  navButtonNext: v(
+    r[`${n}__nav-button`],
+    r[`${n}__nav-button--next`]
+  ),
+  navButtonInteractionDisabled: r[`${n}__nav-button--interaction-disabled`],
+  caption: r[`${n}__caption`],
+  weekdays: r[`${n}__weekdays`],
+  weekdaysRow: r[`${n}__weekdays-row`],
+  weekday: r[`${n}__weekday`],
+  body: r[`${n}__body`],
+  week: r[`${n}__week`],
+  weekNumber: r[`${n}__week-number`],
+  day: r[`${n}__day`],
+  footer: r[`${n}__footer`],
+  todayButton: r[`${n}__today-button`],
+  today: r[`${n}__day--today`],
+  selected: r[`${n}__day--selected`],
+  disabled: r[`${n}__day--disabled`],
+  outside: r[`${n}__day--outside`],
+  start: r[`${n}__day--start`],
+  end: r[`${n}__day--end`]
+}, t), J = "date-picker", pe = (e) => {
+  const t = e.getDate();
+  return /* @__PURE__ */ s.createElement("div", { className: r[`${J}__day-wrapper`] }, /* @__PURE__ */ s.createElement("div", { className: r[`${J}__day-content`] }, t));
+}, ke = (e) => {
+  const p = e, {
+    classNames: t,
+    range: a,
+    toMonth: _,
+    month: i,
+    fromMonth: c,
+    firstDayOfWeek: l,
+    numberOfMonths: E,
+    navbarElement: m,
+    renderDay: u,
+    innerRef: T
+  } = p, N = A(p, [
+    "classNames",
+    "range",
+    "toMonth",
+    "month",
+    "fromMonth",
+    "firstDayOfWeek",
+    "numberOfMonths",
+    "navbarElement",
+    "renderDay",
+    "innerRef"
+  ]), [b, C] = s.useState(i || /* @__PURE__ */ new Date());
+  s.useEffect(() => {
+    i && i !== b && C(i);
+  }, [i, b]), s.useEffect(() => {
+    _ && (Z(b, { from: c, to: _ }) || C(_));
+  }, [b, e.toMonth, e.fromMonth]);
+  const M = s.useCallback(
+    (f) => {
+      if (e.onMonthChange && f) {
+        e.onMonthChange(f);
+        return;
+      }
+      C(f);
+    },
+    [i, e.onMonthChange]
+  );
+  let d = 1;
+  (l === 0 || l && l < 7) && (d = l);
+  const o = s.useMemo(
+    () => ue(a, t),
+    [a, t]
+  );
+  return /* @__PURE__ */ s.createElement(
+    _e,
+    y({
+      navbarElement: m || /* @__PURE__ */ s.createElement(
+        ie,
+        {
+          month: b,
+          classNames: o,
+          numberOfMonths: E,
+          onMonthChange: M,
+          toMonth: _,
+          fromMonth: c
+        }
+      ),
+      ref: T,
+      classNames: o,
+      numberOfMonths: E,
+      toMonth: _,
+      fromMonth: c,
+      firstDayOfWeek: d,
+      month: b,
+      renderDay: u || pe
+    }, N)
+  );
+}, me = s.forwardRef(
+  (e, t) => /* @__PURE__ */ s.createElement(ke, y({ innerRef: t }, e))
+);
+me.displayName = "DatePicker";
+var k = /* @__PURE__ */ ((e) => (e.NEW_SELECTED_ITEM = "NEW_SELECTED_ITEM", e.NEW_TEMPORARY_TO_VALUE = "NEW_TEMPORARY_TO_VALUE", e.CLEAR = "CLEAR", e.SET_FROM = "SET_FROM", e.SET_TO = "SET_TO", e.SELECT_FIRST_DAY = "SELECT_FIRST_DAY", e.SELECT_SECOND_DAY_AS_FROM = "SELECT_SECOND_DAY_AS_FROM", e.SELECT_SECOND_DAY_AS_TO = "SELECT_SECOND_DAY_AS_TO", e.CURRENT_MONTH_CHANGE = "CURRENT_MONTH_CHANGE", e))(k || {});
+const ye = (e) => {
+  const t = X(
+    e.initialFromDate,
+    e.initialToDate,
+    e.toMonth
+  ), _ = y(y({}, {
+    selectedItem: null,
+    from: void 0,
+    to: void 0,
+    temporaryTo: void 0,
+    currentMonth: t
+  }), le(e));
+  function i(c, l) {
+    switch (l.type) {
+      case k.NEW_SELECTED_ITEM:
+        return {
+          selectedItem: l.payload.selectedItem,
+          from: void 0,
+          to: void 0,
+          temporaryTo: void 0,
+          currentMonth: t
+        };
+      case k.NEW_TEMPORARY_TO_VALUE:
+        return D(y({}, c), {
+          temporaryTo: l.payload.date
+        });
+      case k.SELECT_FIRST_DAY:
+        return D(y({}, c), {
+          from: l.payload.date,
+          to: void 0,
+          temporaryTo: void 0
+        });
+      case k.SELECT_SECOND_DAY_AS_FROM:
+        return D(y({}, c), {
+          from: l.payload.date,
+          to: c.from,
+          temporaryTo: c.from
+        });
+      case k.SELECT_SECOND_DAY_AS_TO:
+        return D(y({}, c), {
+          to: l.payload.date,
+          temporaryTo: l.payload.date
+        });
+      case k.CURRENT_MONTH_CHANGE:
+        return D(y({}, c), {
+          currentMonth: l.payload.date
+        });
+      case k.SET_FROM:
+        return D(y({}, c), {
+          from: l.payload.date
+        });
+      case k.SET_TO:
+        return D(y({}, c), {
+          to: l.payload.date
+        });
+      default:
+        return c;
+    }
+  }
+  return ae(i, _);
+}, fe = ({
+  options: e,
+  initialSelectedItemKey: t,
+  initialFromDate: a,
+  initialToDate: _,
+  toMonth: i,
+  onChange: c,
+  children: l
+}) => {
+  const E = re(
+    t || null
+  ), [m, u] = ye({
+    options: e,
+    initialSelectedItemKey: t,
+    initialFromDate: a,
+    initialToDate: _,
+    toMonth: i,
+    onChange: c,
+    children: l
+  });
+  P(() => {
+    u({
+      type: k.SET_FROM,
+      payload: { date: a }
+    });
+  }, [a]), P(() => {
+    u({
+      type: k.SET_TO,
+      payload: { date: _ }
+    });
+  }, [_]), P(() => {
+    const d = X(
+      a,
+      _,
+      i
+    );
+    u({
+      type: k.CURRENT_MONTH_CHANGE,
+      payload: { date: d }
+    });
+  }, [i, a, _]), P(() => {
+    const { from: d, selectedItem: o, to: p } = m;
+    if (!(d && p))
+      return;
+    const f = h(o, e);
+    f && (c == null || c(D(y({}, f), {
+      value: {
+        from: d,
+        to: p
+      }
+    })));
+  }, [m.from, m.to, m.selectedItem, e, c]), P(() => {
+    const { selectedItem: d } = m;
+    if (d === E.current)
+      return;
+    if (!d) {
+      c(null);
+      return;
+    }
+    if (!h(d, e))
+      return;
+    const p = e.reduce(
+      (f, O) => D(y({}, f), { [O.id]: O }),
+      {}
+    );
+    c(p[d]);
+  }, [c, m.selectedItem, e]);
+  const T = R(
+    (d) => {
+      const o = i ? V(i, d) >= 0 : !0;
+      !G(m.from, m.to) && o && u({
+        type: k.NEW_TEMPORARY_TO_VALUE,
+        payload: { date: d }
+      });
+    },
+    [i, m.from, m.to]
+  ), N = R(
+    (d) => {
+      const { from: o, to: p } = m;
+      Z(d, { to: i }) && (G(o, p) ? u({
+        type: k.SELECT_FIRST_DAY,
+        payload: { date: d }
+      }) : o && L(d, o) || o && Y(d, o) ? u({
+        type: k.SELECT_SECOND_DAY_AS_TO,
+        payload: { date: d }
+      }) : u({
+        type: k.SELECT_SECOND_DAY_AS_FROM,
+        payload: { date: d }
+      }));
+    },
+    [i, m.from, m.to]
+  ), b = R(
+    (d) => {
+      if (d === null) {
+        u({
+          type: k.NEW_SELECTED_ITEM,
+          payload: { selectedItem: null }
+        });
+        return;
+      }
+      h(d, e) && u({
+        type: k.NEW_SELECTED_ITEM,
+        payload: { selectedItem: d }
+      });
+    },
+    [e]
+  ), C = R((d) => {
+    u({
+      type: k.CURRENT_MONTH_CHANGE,
+      payload: { date: d }
+    });
+  }, []);
+  return l((() => {
+    const { currentMonth: d, from: o, selectedItem: p, temporaryTo: f, to: O } = m, j = I(
+      () => se(o, f),
+      [o, f]
+    ), q = I(() => h(p, e), [e, p]), Q = I(() => [o, { from: o, to: f }], [o, f]), z = I(() => i ? { after: i } : void 0, [i]);
+    return {
+      select: {
+        onItemSelect: b,
+        selected: p || ""
+      },
+      inputs: {
+        fromDate: o,
+        toDate: O
+      },
+      datepicker: {
+        range: !0,
+        month: d,
+        numberOfMonths: 2,
+        onDayClick: N,
+        selectedDays: Q,
+        modifiers: j,
+        initialMonth: i && S(i, 1),
+        toMonth: i,
+        disabledDays: z,
+        onDayMouseEnter: T,
+        onMonthChange: C
+      },
+      selectedOption: q
+    };
+  })());
+};
+fe.defaultProps = {
+  options: [
+    {
+      id: "default",
+      label: "Default option",
+      isManual: !0,
+      value: {
+        from: void 0,
+        to: void 0
+      }
+    }
+  ]
+};
+const Se = (e) => {
+  const c = e, { className: t, children: a } = c, _ = A(c, ["className", "children"]), i = v(
+    t,
+    r["date-picker--range__calendars-wrapper"]
+  );
+  return /* @__PURE__ */ s.createElement("div", D(y({}, _), { className: i }), a);
+};
+export {
+  me as DatePicker,
+  Se as DatePickerRangeCalendarsWrapper,
+  fe as RangeDatePicker
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("react"),N=require("@livechat/design-system-icons"),c=require("clsx"),x=require("../Button/index.cjs.js"),y=require("../Icon/index.cjs.js"),q=require("../../chunks/Heading-617540b6.js");require("../../chunks/Typography.module-2558416b.js");require("../Loader/index.cjs.js");require("../../chunks/Text-df483689.js");function I(l){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const r in l)if(r!=="default"){const i=Object.getOwnPropertyDescriptor(l,r);Object.defineProperty(s,r,i.get?i:{enumerable:!0,get:()=>l[r]})}}return s.default=l,Object.freeze(s)}const a=I(S),e={"details-card":"lc-DetailsCard-module__details-card___cVoS7","details-card__button--fading":"lc-DetailsCard-module__details-card__button--fading___tQA02","details-card--with-divider":"lc-DetailsCard-module__details-card--with-divider___xyXvc","details-card__label-wrapper":"lc-DetailsCard-module__details-card__label-wrapper___7W-BY","details-card__label-wrapper--hide":"lc-DetailsCard-module__details-card__label-wrapper--hide___H-U4O","details-card__label-wrapper--fading":"lc-DetailsCard-module__details-card__label-wrapper--fading___yiAoB","details-card__label":"lc-DetailsCard-module__details-card__label___nhDQE","details-card__label--with-margin":"lc-DetailsCard-module__details-card__label--with-margin___w2S8X","details-card__label__left-node":"lc-DetailsCard-module__details-card__label__left-node___Slmc6","details-card__label__right-node":"lc-DetailsCard-module__details-card__label__right-node___ZrOLh","details-card__label__content":"lc-DetailsCard-module__details-card__label__content___Cfip3","details-card__button":"lc-DetailsCard-module__details-card__button___FWUG5","details-card__button--closed":"lc-DetailsCard-module__details-card__button--closed___TkMaQ","details-card__button__icon":"lc-DetailsCard-module__details-card__button__icon___iOlKd","details-card__button__icon--open":"lc-DetailsCard-module__details-card__button__icon--open___TI0Xq","details-card__content-wrapper":"lc-DetailsCard-module__details-card__content-wrapper___2UOlE","details-card__content-wrapper--open":"lc-DetailsCard-module__details-card__content-wrapper--open___ESQxg","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"},t="details-card",H=({children:l,className:s,leftNode:r,rightNode:i,label:u,withDivider:g,fullSpaceContent:w,openOnInit:C=!1,hideLabelOnOpen:n,onClick:m})=>{const[_,D]=a.useState(C),[b,$]=a.useState(0),d=a.useRef(null),v=c(e[t],g&&e[`${t}--with-divider`],s),f=n&&_,h=typeof u=="string",E=p=>{D(o=>!o),p.currentTarget.blur(),m==null||m()};return a.useEffect(()=>{const p=!!window.IntersectionObserver;if(d.current&&p){const o=new ResizeObserver(()=>{d.current&&b!==d.current.offsetHeight&&$(d.current.offsetHeight)});return o.observe(d.current),()=>o.disconnect()}},[d]),a.createElement("div",{className:v},a.createElement("div",{className:c(e[`${t}__label-wrapper`],n&&e[`${t}__label-wrapper--fading`],f&&e[`${t}__label-wrapper--hide`],_&&e[`${t}__label-wrapper--open`]),"aria-expanded":_,"aria-hidden":f,"data-testid":"details-card-label"},a.createElement("div",{className:c(e[`${t}__label`],n&&e[`${t}__label--with-margin`])},r&&a.createElement("div",{className:e[`${t}__label__left-node`]},r),h?a.createElement(q.Heading,{size:"xs",className:e[`${t}__label__content`]},u):a.createElement("div",{className:e[`${t}__label__content`]},u),i&&a.createElement("div",{className:e[`${t}__label__right-node`]},i))),a.createElement(x.Button,{kind:_&&n?"float":"text",icon:a.createElement(y.Icon,{source:N.ChevronRight,className:c(e[`${t}__button__icon`],_&&e[`${t}__button__icon--open`])}),className:c(e[`${t}__button`],!_&&e[`${t}__button--closed`],_&&e[`${t}__button--open`],n&&e[`${t}__button--fading`]),onClick:E,"aria-expanded":_}),a.createElement("div",null,a.createElement("div",{className:c(e[`${t}__content-wrapper`],_&&e[`${t}__content-wrapper--open`]),style:{maxHeight:_?b:0}},a.createElement("div",{ref:d,className:c(e[`${t}__content`],w&&e[`${t}__content--full-space`],n&&e[`${t}__content--spacing`])},l))))};exports.DetailsCard=H;

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

@@ -0,0 +1,140 @@
+import * as a from "react";
+import { ChevronRight as N } from "@livechat/design-system-icons";
+import d from "clsx";
+import { Button as x } from "../Button/index.es.js";
+import { Icon as S } from "../Icon/index.es.js";
+import { H } from "../../chunks/Heading-6b95d08b.js";
+import "../../chunks/Typography.module-93efb34d.js";
+import "../Loader/index.es.js";
+import "../../chunks/Text-b31d1e9a.js";
+const e = {
+  "details-card": "lc-DetailsCard-module__details-card___cVoS7",
+  "details-card__button--fading": "lc-DetailsCard-module__details-card__button--fading___tQA02",
+  "details-card--with-divider": "lc-DetailsCard-module__details-card--with-divider___xyXvc",
+  "details-card__label-wrapper": "lc-DetailsCard-module__details-card__label-wrapper___7W-BY",
+  "details-card__label-wrapper--hide": "lc-DetailsCard-module__details-card__label-wrapper--hide___H-U4O",
+  "details-card__label-wrapper--fading": "lc-DetailsCard-module__details-card__label-wrapper--fading___yiAoB",
+  "details-card__label": "lc-DetailsCard-module__details-card__label___nhDQE",
+  "details-card__label--with-margin": "lc-DetailsCard-module__details-card__label--with-margin___w2S8X",
+  "details-card__label__left-node": "lc-DetailsCard-module__details-card__label__left-node___Slmc6",
+  "details-card__label__right-node": "lc-DetailsCard-module__details-card__label__right-node___ZrOLh",
+  "details-card__label__content": "lc-DetailsCard-module__details-card__label__content___Cfip3",
+  "details-card__button": "lc-DetailsCard-module__details-card__button___FWUG5",
+  "details-card__button--closed": "lc-DetailsCard-module__details-card__button--closed___TkMaQ",
+  "details-card__button__icon": "lc-DetailsCard-module__details-card__button__icon___iOlKd",
+  "details-card__button__icon--open": "lc-DetailsCard-module__details-card__button__icon--open___TI0Xq",
+  "details-card__content-wrapper": "lc-DetailsCard-module__details-card__content-wrapper___2UOlE",
+  "details-card__content-wrapper--open": "lc-DetailsCard-module__details-card__content-wrapper--open___ESQxg",
+  "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"
+}, _ = "details-card", X = ({
+  children: b,
+  className: f,
+  leftNode: o,
+  rightNode: m,
+  label: s,
+  withDivider: w,
+  fullSpaceContent: C,
+  openOnInit: g = !1,
+  hideLabelOnOpen: r,
+  onClick: i
+}) => {
+  const [t, D] = a.useState(g), [p, $] = a.useState(0), l = a.useRef(null), v = d(
+    e[_],
+    w && e[`${_}--with-divider`],
+    f
+  ), u = r && t, h = typeof s == "string", E = (n) => {
+    D((c) => !c), n.currentTarget.blur(), i == null || i();
+  };
+  return a.useEffect(() => {
+    const n = !!window.IntersectionObserver;
+    if (l.current && n) {
+      const c = new ResizeObserver(() => {
+        l.current && p !== l.current.offsetHeight && $(l.current.offsetHeight);
+      });
+      return c.observe(l.current), () => c.disconnect();
+    }
+  }, [l]), /* @__PURE__ */ a.createElement("div", { className: v }, /* @__PURE__ */ a.createElement(
+    "div",
+    {
+      className: d(
+        e[`${_}__label-wrapper`],
+        r && e[`${_}__label-wrapper--fading`],
+        u && e[`${_}__label-wrapper--hide`],
+        t && e[`${_}__label-wrapper--open`]
+      ),
+      "aria-expanded": t,
+      "aria-hidden": u,
+      "data-testid": "details-card-label"
+    },
+    /* @__PURE__ */ a.createElement(
+      "div",
+      {
+        className: d(
+          e[`${_}__label`],
+          r && e[`${_}__label--with-margin`]
+        )
+      },
+      o && /* @__PURE__ */ a.createElement("div", { className: e[`${_}__label__left-node`] }, o),
+      h ? /* @__PURE__ */ a.createElement(
+        H,
+        {
+          size: "xs",
+          className: e[`${_}__label__content`]
+        },
+        s
+      ) : /* @__PURE__ */ a.createElement("div", { className: e[`${_}__label__content`] }, s),
+      m && /* @__PURE__ */ a.createElement("div", { className: e[`${_}__label__right-node`] }, m)
+    )
+  ), /* @__PURE__ */ a.createElement(
+    x,
+    {
+      kind: t && r ? "float" : "text",
+      icon: /* @__PURE__ */ a.createElement(
+        S,
+        {
+          source: N,
+          className: d(
+            e[`${_}__button__icon`],
+            t && e[`${_}__button__icon--open`]
+          )
+        }
+      ),
+      className: d(
+        e[`${_}__button`],
+        !t && e[`${_}__button--closed`],
+        t && e[`${_}__button--open`],
+        r && e[`${_}__button--fading`]
+      ),
+      onClick: E,
+      "aria-expanded": t
+    }
+  ), /* @__PURE__ */ a.createElement("div", null, /* @__PURE__ */ a.createElement(
+    "div",
+    {
+      className: d(
+        e[`${_}__content-wrapper`],
+        t && e[`${_}__content-wrapper--open`]
+      ),
+      style: {
+        maxHeight: t ? p : 0
+      }
+    },
+    /* @__PURE__ */ a.createElement(
+      "div",
+      {
+        ref: l,
+        className: d(
+          e[`${_}__content`],
+          C && e[`${_}__content--full-space`],
+          r && e[`${_}__content--spacing`]
+        )
+      },
+      b
+    )
+  )));
+};
+export {
+  X as DetailsCard
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react");function r(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const o=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,o.get?o:{enumerable:!0,get:()=>e[a]})}}return t.default=e,Object.freeze(t)}const l=r(s),n={"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"},c="details-card-info",i=({children:e,label:t})=>l.createElement("div",{className:n[c]},l.createElement("div",{className:n[`${c}__label`]},t),l.createElement("div",{className:n[`${c}__content`]},e));exports.DetailsCardInfo=i;

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

@@ -0,0 +1,12 @@
+import * as e from "react";
+const a = {
+  "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"
+}, l = "details-card-info", _ = ({
+  children: t,
+  label: s
+}) => /* @__PURE__ */ e.createElement("div", { className: a[l] }, /* @__PURE__ */ e.createElement("div", { className: a[`${l}__label`] }, s), /* @__PURE__ */ e.createElement("div", { className: a[`${l}__content`] }, t));
+export {
+  _ as DetailsCardInfo
+};

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

@@ -0,0 +1 @@
+"use strict";var f=Object.defineProperty,m=Object.defineProperties;var b=Object.getOwnPropertyDescriptors;var c=Object.getOwnPropertySymbols;var o=Object.prototype.hasOwnProperty,l=Object.prototype.propertyIsEnumerable;var n=(e,t,r)=>t in e?f(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,a=(e,t)=>{for(var r in t||(t={}))o.call(t,r)&&n(e,r,t[r]);if(c)for(var r of c(t))l.call(t,r)&&n(e,r,t[r]);return e},u=(e,t)=>m(e,b(t));var d=(e,t)=>{var r={};for(var s in e)o.call(e,s)&&t.indexOf(s)<0&&(r[s]=e[s]);if(e!=null&&c)for(var s of c(e))t.indexOf(s)<0&&l.call(e,s)&&(r[s]=e[s]);return r};Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react"),_=require("clsx");require("../../chunks/Typography.module-2558416b.js");const y=require("../../chunks/Text-df483689.js");function D(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const s=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,s.get?s:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const O=D(g),j={"field-description":"lc-FieldDescription-module__field-description___IcRDH"},q="field-description",S=s=>{var i=s,{children:e,className:t=""}=i,r=d(i,["children","className"]);const p=_(j[q],t);return O.createElement(y.Text,u(a({as:"span",size:"sm"},r),{className:p}),e)};exports.FieldDescription=S;