@livechat/design-system-react-components 1.0.0-alpha.20 → 1.0.0-alpha.23

package/dist/dsrc.es.js

@@ -34,10 +34,13 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import * as React from "react";
+import { useReducer, useRef, useEffect, useCallback, useMemo } from "react";
 import cx from "clsx";
-import { Close, Info as Info$1, Warning, CheckCircleSolid, Block, Person, Check, ChevronUp, ChevronDown, Error as Error2, Search, LockBlack } from "@livechat/design-system-icons/react/material";
+import { Close, Info as Info$1, Warning, CheckCircleSolid, Block, Person, ChevronUp, ChevronDown, Check, DoubleArrowLeft, ChevronLeft, ChevronRight, DoubleArrowRight, Error as Error2, Search, LockBlack } from "@livechat/design-system-icons/react/material";
 import debounce from "lodash.debounce";
 import { getContrast } from "polished";
+import ReactDayPicker from "react-day-picker";
+import { subMonths, differenceInCalendarMonths, addMonths, isSameMonth, isSameDay, isAfter, differenceInCalendarDays } from "date-fns";
 import * as ReactDOM from "react-dom";
 import { useFloating, offset, flip, autoUpdate, arrow } from "@floating-ui/react-dom";
 import escape from "lodash.escape";
@@ -192,7 +195,7 @@ const ShadowToken = {
   Modal: "--shadow-modal"
 };
 const caps = "lc-Typography-module__caps___c3eNJ";
-var styles$y = {
+var styles$z = {
   "heading-xl": "lc-Typography-module__heading-xl___nhr-6",
   "heading-lg": "lc-Typography-module__heading-lg___XYF7l",
   "heading-md": "lc-Typography-module__heading-md___wHOIs",
@@ -228,7 +231,7 @@ const Heading = (_a) => {
     "children",
     "className"
   ]);
-  return React.createElement(as || SIZE_TO_ELEMENT_MAP[size], __spreadValues({ className: cx(styles$y[`heading-${size}`], className) }, props), children);
+  return React.createElement(as || SIZE_TO_ELEMENT_MAP[size], __spreadValues({ className: cx(styles$z[`heading-${size}`], className) }, props), children);
 };
 const Text = (_c) => {
   var _d = _c, {
@@ -253,15 +256,15 @@ const Text = (_c) => {
   const baseClassPrefix = caps2 ? "caps" : `paragraph-${size}`;
   return React.createElement(as, __spreadValues({
     className: cx({
-      [styles$y[`${baseClassPrefix}`]]: true,
-      [styles$y[`${baseClassPrefix}--bold`]]: bold,
-      [styles$y[`${baseClassPrefix}--strike`]]: strike,
-      [styles$y[`${baseClassPrefix}--underline`]]: underline
+      [styles$z[`${baseClassPrefix}`]]: true,
+      [styles$z[`${baseClassPrefix}--bold`]]: bold,
+      [styles$z[`${baseClassPrefix}--strike`]]: strike,
+      [styles$z[`${baseClassPrefix}--underline`]]: underline
     }, className)
   }, props), children);
 };
 const icon$1 = "lc-Icon-module__icon___tw31R";
-var styles$x = {
+var styles$y = {
   icon: icon$1,
   "icon--primary": "lc-Icon-module__icon--primary___JJnBV",
   "icon--subtle": "lc-Icon-module__icon--subtle___sZIzL",
@@ -302,7 +305,7 @@ const IconSizeMap = {
     height: 32
   }
 };
-const baseClass$E = "icon";
+const baseClass$I = "icon";
 const Icon = (props) => {
   const _a = props, {
     source,
@@ -322,7 +325,7 @@ const Icon = (props) => {
   const GeneratedIcon = React.createElement(source, __spreadProps(__spreadValues({}, IconSizeMap[size]), {
     color: customColor
   }));
-  const mergedClassNames = cx(className, styles$x[baseClass$E], kind && styles$x[`${baseClass$E}--${disabled ? "disabled--" : ""}${kind}`]);
+  const mergedClassNames = cx(className, styles$y[baseClass$I], kind && styles$y[`${baseClass$I}--${disabled ? "disabled--" : ""}${kind}`]);
   return /* @__PURE__ */ React.createElement("span", __spreadProps(__spreadValues({}, restProps), {
     className: mergedClassNames
   }), GeneratedIcon);
@@ -330,7 +333,7 @@ const Icon = (props) => {
 const alert = "lc-Alert-module__alert___HBTns";
 const alert__content = "lc-Alert-module__alert__content___9nZdf";
 const alert__icon = "lc-Alert-module__alert__icon___8TaAH";
-var styles$w = {
+var styles$x = {
   alert,
   alert__content,
   "alert__content-text": "lc-Alert-module__alert__content-text___x2Un5",
@@ -362,7 +365,7 @@ const IconConfig = {
     kind: "error"
   }
 };
-const baseClass$D = "alert";
+const baseClass$H = "alert";
 const Alert = ({
   children,
   className,
@@ -371,7 +374,7 @@ const Alert = ({
 }) => {
   const containerRef = React.useRef(null);
   const [isSmallContainer, setIsSmallContainer] = React.useState(false);
-  const mergedClassNames = cx(styles$w[baseClass$D], styles$w[`${baseClass$D}--${kind}`], isSmallContainer && styles$w[`${baseClass$D}--small`], className);
+  const mergedClassNames = cx(styles$x[baseClass$H], styles$x[`${baseClass$H}--${kind}`], isSmallContainer && styles$x[`${baseClass$H}--small`], className);
   React.useEffect(() => {
     const handleResize = debounce(() => {
       if (containerRef.current && containerRef.current.offsetWidth <= 400) {
@@ -386,16 +389,16 @@ const Alert = ({
     ref: containerRef,
     className: mergedClassNames
   }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$w[`${baseClass$D}__content`]
+    className: styles$x[`${baseClass$H}__content`]
   }, /* @__PURE__ */ React.createElement(Icon, __spreadProps(__spreadValues({}, IconConfig[kind]), {
     size: "large",
-    className: styles$w[`${baseClass$D}__content-icon`]
+    className: styles$x[`${baseClass$H}__content-icon`]
   })), /* @__PURE__ */ React.createElement(Text, {
     as: "div",
-    className: cx(styles$w[`${baseClass$D}__content-text`], onClose && styles$w[`${baseClass$D}__content-text--margin`])
+    className: cx(styles$x[`${baseClass$H}__content-text`], onClose && styles$x[`${baseClass$H}__content-text--margin`])
   }, children)), onClose && /* @__PURE__ */ React.createElement("button", {
     type: "button",
-    className: styles$w[`${baseClass$D}__close-icon`],
+    className: styles$x[`${baseClass$H}__close-icon`],
     onClick: onClose
   }, /* @__PURE__ */ React.createElement(Icon, {
     source: Close,
@@ -413,7 +416,7 @@ const avatar = "lc-Avatar-module__avatar___1zTCE";
 const avatar__status = "lc-Avatar-module__avatar__status___nX2Ls";
 const avatar__rim = "lc-Avatar-module__avatar__rim___RCQ8Q";
 const avatar__image = "lc-Avatar-module__avatar__image___YqfqE";
-var styles$v = {
+var styles$w = {
   avatar,
   avatar__status,
   "avatar__status--available": "lc-Avatar-module__avatar__status--available___tcpFg",
@@ -459,7 +462,7 @@ var styles$v = {
   "avatar--xlarge": "lc-Avatar-module__avatar--xlarge___zwgeW",
   "avatar--xxlarge": "lc-Avatar-module__avatar--xxlarge___Ur0ul"
 };
-const baseClass$C = "avatar";
+const baseClass$G = "avatar";
 const defaultBackgroundColor = "var(--surface-basic-disabled)";
 const defaultFontColor = "var(--content-subtle)";
 const Avatar = ({
@@ -483,15 +486,15 @@ const Avatar = ({
   const backgroundColor = color || defaultBackgroundColor;
   const fontColor = color ? getFontColor(color) : defaultFontColor;
   const mergedClassNames = cx({
-    [styles$v[baseClass$C]]: true,
-    [styles$v[`${baseClass$C}--${shape}`]]: true,
-    [styles$v[`${baseClass$C}--${size}`]]: true,
-    [styles$v[`${baseClass$C}--with-rim`]]: withRim,
+    [styles$w[baseClass$G]]: true,
+    [styles$w[`${baseClass$G}--${shape}`]]: true,
+    [styles$w[`${baseClass$G}--${size}`]]: true,
+    [styles$w[`${baseClass$G}--with-rim`]]: withRim,
     [`${className}`]: className
   });
-  const mergedStatusClassNames = cx(styles$v[`${baseClass$C}__status`], styles$v[`${baseClass$C}__status--${shape}`], styles$v[`${baseClass$C}__status--${size}`], styles$v[`${baseClass$C}__status--${status}`]);
-  const mergedIconClassNames = cx(styles$v[`${baseClass$C}__icon`], styles$v[`${baseClass$C}__icon--${size}`]);
-  const mergedRimClassNames = cx(styles$v[`${baseClass$C}__rim`], styles$v[`${baseClass$C}__rim--${size}`]);
+  const mergedStatusClassNames = cx(styles$w[`${baseClass$G}__status`], styles$w[`${baseClass$G}__status--${shape}`], styles$w[`${baseClass$G}__status--${size}`], styles$w[`${baseClass$G}__status--${status}`]);
+  const mergedIconClassNames = cx(styles$w[`${baseClass$G}__icon`], styles$w[`${baseClass$G}__icon--${size}`]);
+  const mergedRimClassNames = cx(styles$w[`${baseClass$G}__rim`], styles$w[`${baseClass$G}__rim--${size}`]);
   const handleError = React.useCallback(() => setShouldDisplayFallbackAvatar(true), []);
   React.useEffect(() => {
     setShouldDisplayFallbackAvatar(isImproperImageSetup);
@@ -500,20 +503,20 @@ const Avatar = ({
     className: mergedClassNames,
     style: { backgroundColor }
   }, withRim && /* @__PURE__ */ React.createElement("div", {
-    "data-testid": `${baseClass$C}__rim`,
+    "data-testid": `${baseClass$G}__rim`,
     className: mergedRimClassNames
   }), status && /* @__PURE__ */ React.createElement("div", {
-    "data-testid": `${baseClass$C}__status`,
+    "data-testid": `${baseClass$G}__status`,
     className: mergedStatusClassNames
   }), shouldDisplayImage && /* @__PURE__ */ React.createElement("img", {
-    className: styles$v[`${baseClass$C}__image`],
+    className: styles$w[`${baseClass$G}__image`],
     src,
     alt,
     onError: handleError
   }), shouldDisplayInitials && /* @__PURE__ */ React.createElement("span", {
     style: { color: fontColor }
   }, initials), shouldDisplayFallbackAvatar && /* @__PURE__ */ React.createElement(Icon, {
-    "data-testid": `${baseClass$C}__icon`,
+    "data-testid": `${baseClass$G}__icon`,
     className: mergedIconClassNames,
     source: Person,
     kind: "primary"
@@ -521,7 +524,7 @@ const Avatar = ({
 };
 const badge = "lc-Badge-module__badge___GhLnu";
 const badge__dot = "lc-Badge-module__badge__dot___z6RO6";
-var styles$u = {
+var styles$v = {
   badge,
   badge__dot,
   "badge--large": "lc-Badge-module__badge--large___B131q",
@@ -534,7 +537,7 @@ var styles$u = {
 function formatCount(count, max) {
   return count > max ? `${max}+` : `${count}`;
 }
-const baseClass$B = "badge";
+const baseClass$F = "badge";
 const Badge = (_e) => {
   var _f = _e, {
     className,
@@ -551,12 +554,12 @@ const Badge = (_e) => {
     "size",
     "type"
   ]);
-  const mergedClassNames = cx(className, styles$u[baseClass$B], styles$u[`${baseClass$B}--${kind}`], styles$u[`${baseClass$B}--${size}`]);
+  const mergedClassNames = cx(className, styles$v[baseClass$F], styles$v[`${baseClass$F}--${kind}`], styles$v[`${baseClass$F}--${size}`]);
   const content = {
     ["counter"]: formatCount(count, max),
     ["alert"]: "!",
     ["dot"]: /* @__PURE__ */ React.createElement("span", {
-      className: styles$u[`${baseClass$B}__dot`]
+      className: styles$v[`${baseClass$F}__dot`]
     })
   }[type];
   return /* @__PURE__ */ React.createElement("span", __spreadValues({
@@ -567,7 +570,7 @@ const loader = "lc-Loader-module__loader___LRflD";
 const loader__spinner = "lc-Loader-module__loader__spinner___l3C1g";
 const rotate = "lc-Loader-module__rotate___Tlni-";
 const loader__label = "lc-Loader-module__loader__label___R74f6";
-var styles$t = {
+var styles$u = {
   loader,
   loader__spinner,
   "loader__spinner--small": "lc-Loader-module__loader__spinner--small___dGFFt",
@@ -577,8 +580,8 @@ var styles$t = {
   rotate,
   loader__label
 };
-const baseClass$A = "loader";
-const spinnerClass = `${baseClass$A}__spinner`;
+const baseClass$E = "loader";
+const spinnerClass = `${baseClass$E}__spinner`;
 const Loader = ({
   primaryColor,
   secondaryColor,
@@ -587,11 +590,11 @@ const Loader = ({
   size = "medium"
 }) => {
   return /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$t[baseClass$A], className)
+    className: cx(styles$u[baseClass$E], className)
   }, /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$t[spinnerClass], styles$t[`${spinnerClass}--${size}`])
+    className: cx(styles$u[spinnerClass], styles$u[`${spinnerClass}--${size}`])
   }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$t["loader__spinner-circle"],
+    className: styles$u["loader__spinner-circle"],
     style: {
       borderColor: secondaryColor,
       borderTopColor: primaryColor
@@ -599,14 +602,14 @@ const Loader = ({
   })), label && /* @__PURE__ */ React.createElement(Text, {
     as: "div",
     size: "md",
-    className: styles$t["loader__label"]
+    className: styles$u["loader__label"]
   }, label));
 };
 const btn$1 = "lc-Button-module__btn___aijZJ";
 const btn__loader = "lc-Button-module__btn__loader___c8zZz";
 const btn__content = "lc-Button-module__btn__content___wefl2";
 const btn__icon = "lc-Button-module__btn__icon___GVExB";
-var styles$s = {
+var styles$t = {
   btn: btn$1,
   "btn--disabled": "lc-Button-module__btn--disabled___lXBav",
   "btn--icon-only": "lc-Button-module__btn--icon-only___bF5pW",
@@ -627,7 +630,7 @@ var styles$s = {
   btn__content,
   btn__icon
 };
-const baseClass$z = "btn";
+const baseClass$D = "btn";
 const Button = (_g) => {
   var _h = _g, {
     loading = false,
@@ -641,7 +644,8 @@ const Button = (_g) => {
     loaderLabel,
     className,
     children,
-    href
+    href,
+    onClick
   } = _h, props = __objRest(_h, [
     "loading",
     "disabled",
@@ -654,34 +658,36 @@ const Button = (_g) => {
     "loaderLabel",
     "className",
     "children",
-    "href"
+    "href",
+    "onClick"
   ]);
   const isDisabled = loading || disabled;
   const Component = href ? "a" : "button";
-  const mergedClassNames = cx(className, styles$s[baseClass$z], styles$s[`${baseClass$z}--${kind}`], styles$s[`${baseClass$z}--${size}`], {
-    [styles$s[`${baseClass$z}--loading`]]: loading,
-    [styles$s[`${baseClass$z}--full-width`]]: fullWidth,
-    [styles$s[`${baseClass$z}--icon-only`]]: !children && icon2,
-    [styles$s[`${baseClass$z}--disabled`]]: isDisabled
+  const mergedClassNames = cx(className, styles$t[baseClass$D], styles$t[`${baseClass$D}--${kind}`], styles$t[`${baseClass$D}--${size}`], {
+    [styles$t[`${baseClass$D}--loading`]]: loading,
+    [styles$t[`${baseClass$D}--full-width`]]: fullWidth,
+    [styles$t[`${baseClass$D}--icon-only`]]: !children && icon2,
+    [styles$t[`${baseClass$D}--disabled`]]: isDisabled
   });
   return /* @__PURE__ */ React.createElement(Component, __spreadValues({
     className: mergedClassNames,
-    disabled: isDisabled,
+    "aria-disabled": isDisabled,
     type,
-    href: isDisabled ? void 0 : href
+    href: isDisabled ? void 0 : href,
+    onClick: isDisabled ? void 0 : onClick
   }, props), loading && /* @__PURE__ */ React.createElement(Loader, {
     size: "small",
     label: loaderLabel,
-    className: styles$s[`${baseClass$z}__loader`]
+    className: styles$t[`${baseClass$D}__loader`]
   }), icon2 && React.cloneElement(icon2, {
-    className: cx(styles$s[`${baseClass$z}__icon`], styles$s[`${baseClass$z}__icon--${iconPosition}`]),
+    className: cx(styles$t[`${baseClass$D}__icon`], styles$t[`${baseClass$D}__icon--${iconPosition}`]),
     disabled
   }), /* @__PURE__ */ React.createElement("div", {
-    className: styles$s[`${baseClass$z}__content`]
+    className: styles$t[`${baseClass$D}__content`]
   }, children));
 };
 const btn = "lc-ButtonGroup-module__btn___bXPrU";
-var styles$r = {
+var styles$s = {
   "btn-group": "lc-ButtonGroup-module__btn-group___R-lZQ",
   btn,
   "btn--active": "lc-ButtonGroup-module__btn--active___VAc37",
@@ -691,7 +697,7 @@ var styles$r = {
 };
 function noop() {
 }
-const baseClass$y = "btn-group";
+const baseClass$C = "btn-group";
 const ButtonGroup = (_i) => {
   var _j = _i, {
     size = "medium",
@@ -710,7 +716,7 @@ const ButtonGroup = (_i) => {
     "currentIndex",
     "initialIndex"
   ]);
-  const mergedClassName = cx(styles$r[baseClass$y], className);
+  const mergedClassName = cx(styles$s[baseClass$C], className);
   const [currentStateIndex, setCurrentStateIndex] = React.useState(initialIndex);
   const isControlled = typeof currentIndex === "number";
   const _currentIndex = isControlled ? currentIndex : currentStateIndex;
@@ -734,50 +740,111 @@ const ButtonGroup = (_i) => {
         child.props.onClick(event);
       }
     },
-    className: cx(styles$r["btn"], styles$r[`btn--${size}`], i === _currentIndex && styles$r["btn--active"])
+    className: cx(styles$s["btn"], styles$s[`btn--${size}`], i === _currentIndex && styles$s["btn--active"])
   })));
 };
 const card = "lc-Card-module__card___GqMm2";
-const card__title = "lc-Card-module__card__title___1YjAR";
-const card__text = "lc-Card-module__card__text___-jYlF";
-const card__img = "lc-Card-module__card__img___teLC8";
-var styles$q = {
+const card__header = "lc-Card-module__card__header___0ptfD";
+const card__header__image = "lc-Card-module__card__header__image___QMwSu";
+const card__header__heading = "lc-Card-module__card__header__heading___Wkikx";
+const card__header__heading__title = "lc-Card-module__card__header__heading__title___Uxi8s";
+const card__header__heading__description = "lc-Card-module__card__header__heading__description___6LnOK";
+const card__content = "lc-Card-module__card__content___KuDcc";
+const card__actions = "lc-Card-module__card__actions___q9sAo";
+const card__actions__line = "lc-Card-module__card__actions__line___TF1bt";
+const card__actions__buttons = "lc-Card-module__card__actions__buttons___PDMMR";
+var styles$r = {
   card,
-  card__title,
-  card__text,
-  card__img
-};
+  card__header,
+  card__header__image,
+  card__header__heading,
+  card__header__heading__title,
+  card__header__heading__description,
+  card__content,
+  "card__expanded-content": "lc-Card-module__card__expanded-content___yB-QL",
+  card__actions,
+  card__actions__line,
+  card__actions__buttons,
+  "card__actions__buttons-expander": "lc-Card-module__card__actions__buttons-expander___lz4h-"
+};
+const baseClass$B = "card";
+const headerClass = `${baseClass$B}__header`;
+const headingClass = `${headerClass}__heading`;
+const actionsClass = `${baseClass$B}__actions`;
 const Card = (_k) => {
   var _l = _k, {
-    img,
-    title,
+    alt,
+    buttonsOptions = [],
     children,
-    className
-  } = _l, restProps = __objRest(_l, [
-    "img",
-    "title",
+    className,
+    description,
+    expandableContent,
+    src,
+    title
+  } = _l, divProps = __objRest(_l, [
+    "alt",
+    "buttonsOptions",
     "children",
-    "className"
+    "className",
+    "description",
+    "expandableContent",
+    "src",
+    "title"
   ]);
-  return /* @__PURE__ */ React.createElement(Text, __spreadValues({
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const expandIcon = isExpanded ? ChevronUp : ChevronDown;
+  const expandButtonText = isExpanded ? "Hide" : "Show more";
+  const shouldShowActionButtons = (buttonsOptions == null ? void 0 : buttonsOptions.length) > 0;
+  const shouldShowExpandAction = !!expandableContent;
+  const shouldShowActions = shouldShowActionButtons || shouldShowExpandAction;
+  return /* @__PURE__ */ React.createElement("div", __spreadValues({
+    className: cx(styles$r[baseClass$B], className)
+  }, divProps), /* @__PURE__ */ React.createElement("div", {
+    className: styles$r[headerClass]
+  }, src && /* @__PURE__ */ React.createElement("img", {
+    alt,
+    className: styles$r[`${headerClass}__image`],
+    src
+  }), /* @__PURE__ */ React.createElement("div", {
+    className: styles$r[headingClass]
+  }, /* @__PURE__ */ React.createElement(Heading, {
+    size: "sm",
+    className: styles$r[`${headingClass}__title`]
+  }, title), /* @__PURE__ */ React.createElement(Text, {
+    size: "sm",
+    className: styles$r[`${headingClass}__description`]
+  }, description))), /* @__PURE__ */ React.createElement(Text, {
     as: "div",
     size: "md",
-    className: cx(styles$q["card"], className)
-  }, restProps), (img || title) && /* @__PURE__ */ React.createElement(Heading, {
+    className: styles$r[`${baseClass$B}__content`]
+  }, children), isExpanded && /* @__PURE__ */ React.createElement(Text, {
     as: "div",
-    size: "sm",
-    className: styles$q["card__title"]
-  }, img && /* @__PURE__ */ React.createElement("img", {
-    src: img,
-    className: styles$q["card__img"]
-  }), title && /* @__PURE__ */ React.createElement("div", {
-    className: styles$q["card__text"]
-  }, title)), children);
+    size: "md",
+    className: styles$r[`${baseClass$B}__expanded-content`]
+  }, expandableContent), shouldShowActions && /* @__PURE__ */ React.createElement("div", {
+    className: styles$r[actionsClass]
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: styles$r[`${actionsClass}__line`]
+  }), /* @__PURE__ */ React.createElement("div", {
+    className: styles$r[`${actionsClass}__buttons`]
+  }, shouldShowActionButtons && buttonsOptions.map(({ kind, onClick, children: buttonChildren }) => /* @__PURE__ */ React.createElement(Button, {
+    size: "compact",
+    kind,
+    onClick
+  }, buttonChildren)), shouldShowExpandAction && /* @__PURE__ */ React.createElement(Button, {
+    className: styles$r[`${actionsClass}__buttons-expander`],
+    kind: "plain",
+    iconPosition: "right",
+    icon: /* @__PURE__ */ React.createElement(Icon, {
+      source: expandIcon
+    }),
+    onClick: () => setIsExpanded(!isExpanded)
+  }, expandButtonText))));
 };
-var styles$p = {
+var styles$q = {
   "field-description": "lc-FieldDescription-module__field-description___IcRDH"
 };
-const baseClass$x = "field-description";
+const baseClass$A = "field-description";
 const FieldDescription = (_m) => {
   var _n = _m, {
     children,
@@ -786,7 +853,7 @@ const FieldDescription = (_m) => {
     "children",
     "className"
   ]);
-  const mergedClassNames = cx(styles$p[baseClass$x], className);
+  const mergedClassNames = cx(styles$q[baseClass$A], className);
   return /* @__PURE__ */ React.createElement(Text, __spreadProps(__spreadValues({
     as: "span",
     size: "sm"
@@ -801,7 +868,7 @@ const checkbox__checkmark = "lc-Checkbox-module__checkbox__checkmark___16pfY";
 const checkbox__input = "lc-Checkbox-module__checkbox__input___YLbVF";
 const checkbox__text = "lc-Checkbox-module__checkbox__text___P2SIq";
 const checkbox__helper = "lc-Checkbox-module__checkbox__helper___YSJ-n";
-var styles$o = {
+var styles$p = {
   checkbox,
   checkbox__label,
   checkbox__square,
@@ -812,37 +879,599 @@ var styles$o = {
   "checkbox--disabled": "lc-Checkbox-module__checkbox--disabled___-lAqW",
   checkbox__helper
 };
-const baseClass$w = "checkbox";
+const baseClass$z = "checkbox";
 const Checkbox = React.forwardRef((_o, ref) => {
   var _p = _o, { checked, disabled, children, description, className } = _p, restInputProps = __objRest(_p, ["checked", "disabled", "children", "description", "className"]);
   return /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$o[baseClass$w], className, {
-      [styles$o[`${baseClass$w}--selected`]]: checked,
-      [styles$o[`${baseClass$w}--disabled`]]: disabled
+    className: cx(styles$p[baseClass$z], className, {
+      [styles$p[`${baseClass$z}--selected`]]: checked,
+      [styles$p[`${baseClass$z}--disabled`]]: disabled
     })
   }, /* @__PURE__ */ React.createElement("label", {
-    className: styles$o[`${baseClass$w}__label`]
+    className: styles$p[`${baseClass$z}__label`]
   }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, restInputProps), {
     ref,
     checked,
     disabled,
-    className: styles$o[`${baseClass$w}__input`],
+    className: styles$p[`${baseClass$z}__input`],
     type: "checkbox"
   })), /* @__PURE__ */ React.createElement("div", {
-    className: styles$o[`${baseClass$w}__square`]
+    className: styles$p[`${baseClass$z}__square`]
   }, /* @__PURE__ */ React.createElement(Icon, {
     source: Check,
     kind: "inverted",
     size: "xsmall",
-    className: styles$o[`${baseClass$w}__checkmark`]
+    className: styles$p[`${baseClass$z}__checkmark`]
   }))), children && /* @__PURE__ */ React.createElement(Text, {
     as: "div",
     size: "md",
-    className: styles$o[`${baseClass$w}__text`]
+    className: styles$p[`${baseClass$z}__text`]
   }, children)), description && /* @__PURE__ */ React.createElement(FieldDescription, {
-    className: styles$o[`${baseClass$w}__helper`]
+    className: styles$p[`${baseClass$z}__helper`]
   }, description));
 });
+var styles$o = {
+  "date-picker": "lc-DatePicker-module__date-picker___9AqJ2",
+  "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": "lc-DatePicker-module__date-picker__day___ZTSw9",
+  "date-picker__day-content": "lc-DatePicker-module__date-picker__day-content___rDIa0",
+  "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__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--disabled": "lc-DatePicker-module__date-picker__day--disabled___4O6yW",
+  "date-picker--interaction-disabled": "lc-DatePicker-module__date-picker--interaction-disabled___-zn8o",
+  "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"
+};
+const baseClass$y = "date-picker";
+const DatePickerNavbar = (props) => {
+  const {
+    onPreviousClick,
+    onMonthChange,
+    onNextClick,
+    showNextButton,
+    showPreviousButton,
+    className,
+    classNames,
+    numberOfMonths,
+    month,
+    fromMonth,
+    toMonth
+  } = props;
+  const handlePrevClick = () => {
+    if (typeof onPreviousClick === "function") {
+      onPreviousClick();
+    }
+  };
+  const handleNextClick = () => {
+    if (typeof onNextClick === "function") {
+      onNextClick();
+    }
+  };
+  const handlePrevYearClick = () => {
+    if (!fromMonth) {
+      const newMonth2 = subMonths(month, 12);
+      return onMonthChange(newMonth2);
+    }
+    const diff = Math.abs(differenceInCalendarMonths(month, fromMonth));
+    const newMonth = subMonths(month, !Number.isNaN(diff) && diff > 12 ? 12 : diff);
+    return onMonthChange(newMonth);
+  };
+  const handleNextYearClick = () => {
+    if (!toMonth) {
+      const newMonth2 = addMonths(month, 12);
+      return onMonthChange(newMonth2);
+    }
+    const diff = Math.abs(differenceInCalendarMonths(toMonth, month));
+    const newMonth = addMonths(month, !Number.isNaN(diff) && diff > 12 ? 12 : diff);
+    if (numberOfMonths === 2 && isSameMonth(newMonth, toMonth)) {
+      return onMonthChange(subMonths(newMonth, 1));
+    }
+    return onMonthChange(newMonth);
+  };
+  return /* @__PURE__ */ React.createElement("div", {
+    className
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: styles$o[`${baseClass$y}__navbar-buttons-wrapper`]
+  }, /* @__PURE__ */ React.createElement("button", {
+    "data-testid": "date-picker-prev-year-button",
+    className: cx({
+      [classNames.navButtonPrev]: true,
+      [classNames.navButtonInteractionDisabled]: !showPreviousButton
+    }),
+    onClick: handlePrevYearClick
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    source: DoubleArrowLeft,
+    kind: "subtle"
+  })), /* @__PURE__ */ React.createElement("button", {
+    "data-testid": "date-picker-prev-month-button",
+    className: cx({
+      [classNames.navButtonPrev]: true,
+      [classNames.navButtonInteractionDisabled]: !showPreviousButton
+    }),
+    onClick: handlePrevClick
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    source: ChevronLeft,
+    kind: "subtle"
+  }))), /* @__PURE__ */ React.createElement("div", {
+    className: styles$o[`${baseClass$y}__navbar-buttons-wrapper`]
+  }, /* @__PURE__ */ React.createElement("button", {
+    "data-testid": "date-picker-next-month-button",
+    className: cx({
+      [classNames.navButtonNext]: true,
+      [classNames.navButtonInteractionDisabled]: !showNextButton
+    }),
+    onClick: handleNextClick
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    source: ChevronRight,
+    kind: "subtle"
+  })), /* @__PURE__ */ React.createElement("button", {
+    "data-testid": "date-picker-next-year-button",
+    className: cx({
+      [classNames.navButtonNext]: true,
+      [classNames.navButtonInteractionDisabled]: !showNextButton
+    }),
+    onClick: handleNextYearClick
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    source: DoubleArrowRight,
+    kind: "subtle"
+  }))));
+};
+const baseClass$x = "date-picker";
+const isDateWithinRange = (date, range) => {
+  const { from, to } = range;
+  if (to && !isSameDay(date, to) && isAfter(date, to)) {
+    return false;
+  }
+  if (from && !isSameDay(date, from) && !isAfter(date, from)) {
+    return false;
+  }
+  return true;
+};
+const calculateDatePickerMonth = (initialFromDate, initialToDate, toMonth) => {
+  if (!initialToDate) {
+    return subMonths(toMonth || new Date(), 1);
+  }
+  const forcePreviousMonth = initialFromDate && !isSameMonth(initialFromDate, initialToDate);
+  if (forcePreviousMonth || toMonth && isSameMonth(initialToDate, toMonth)) {
+    return subMonths(initialToDate, 1);
+  }
+  return initialToDate;
+};
+const getRangeDatePickerModifiers = (from, to) => {
+  const base = {
+    [styles$o[`${baseClass$x}__day--monday`]]: { daysOfWeek: [1] },
+    [styles$o[`${baseClass$x}__day--sunday`]]: { daysOfWeek: [0] },
+    [styles$o[`${baseClass$x}__day--start`]]: from,
+    [styles$o[`${baseClass$x}__day--end`]]: from
+  };
+  if (!to || !from)
+    return base;
+  const diff = differenceInCalendarDays(to, from);
+  if (diff > 0) {
+    return __spreadProps(__spreadValues({}, base), {
+      [styles$o[`${baseClass$x}__day--end`]]: to
+    });
+  }
+  if (diff < 0) {
+    return __spreadProps(__spreadValues({}, base), {
+      [styles$o[`${baseClass$x}__day--start`]]: to
+    });
+  }
+  return base;
+};
+const getSelectedOption = (itemId, options) => {
+  const selectedOption = options.find((item) => {
+    return item.id === itemId;
+  });
+  return selectedOption ? selectedOption : void 0;
+};
+const isSelectingFirstDay = (from, to) => {
+  const isRangeSelected = from && to;
+  return Boolean(!from || isRangeSelected);
+};
+const getInitialStateFromProps = (props) => {
+  const state = {};
+  if (!props.initialSelectedItemKey) {
+    return state;
+  }
+  const selectedOption = getSelectedOption(props.initialSelectedItemKey, props.options);
+  if (!selectedOption) {
+    return {};
+  }
+  state.selectedItem = props.initialSelectedItemKey;
+  if (!selectedOption.isManual) {
+    return state;
+  }
+  if (props.initialFromDate) {
+    state.from = props.initialFromDate;
+  }
+  if (props.initialToDate) {
+    state.to = props.initialToDate;
+    state.temporaryTo = props.initialToDate;
+  }
+  return state;
+};
+const getDatePickerClassNames = (range, classNames) => __spreadValues({
+  container: cx({
+    [styles$o[`${baseClass$x}`]]: true,
+    [styles$o[`${baseClass$x}--range`]]: range
+  }),
+  wrapper: styles$o[`${baseClass$x}__wrapper`],
+  interactionDisabled: styles$o[`${baseClass$x}--interaction-disabled`],
+  months: styles$o[`${baseClass$x}__months`],
+  month: styles$o[`${baseClass$x}__month`],
+  navBar: styles$o[`${baseClass$x}__nav-bar`],
+  navButtonPrev: cx(styles$o[`${baseClass$x}__nav-button`], styles$o[`${baseClass$x}__nav-button--prev`]),
+  navButtonNext: cx(styles$o[`${baseClass$x}__nav-button`], styles$o[`${baseClass$x}__nav-button--next`]),
+  navButtonInteractionDisabled: styles$o[`${baseClass$x}__nav-button--interaction-disabled`],
+  caption: styles$o[`${baseClass$x}__caption`],
+  weekdays: styles$o[`${baseClass$x}__weekdays`],
+  weekdaysRow: styles$o[`${baseClass$x}__weekdays-row`],
+  weekday: styles$o[`${baseClass$x}__weekday`],
+  body: styles$o[`${baseClass$x}__body`],
+  week: styles$o[`${baseClass$x}__week`],
+  weekNumber: styles$o[`${baseClass$x}__week-number`],
+  day: styles$o[`${baseClass$x}__day`],
+  footer: styles$o[`${baseClass$x}__footer`],
+  todayButton: styles$o[`${baseClass$x}__today-button`],
+  today: styles$o[`${baseClass$x}__day--today`],
+  selected: styles$o[`${baseClass$x}__day--selected`],
+  disabled: styles$o[`${baseClass$x}__day--disabled`],
+  outside: styles$o[`${baseClass$x}__day--outside`],
+  start: styles$o[`${baseClass$x}__day--start`],
+  end: styles$o[`${baseClass$x}__day--end`]
+}, classNames);
+const baseClass$w = "date-picker";
+const defaultDayRenderer = (day) => {
+  const date = day.getDate();
+  return /* @__PURE__ */ React.createElement("div", {
+    className: styles$o[`${baseClass$w}__day-wrapper`]
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: styles$o[`${baseClass$w}__day-content`]
+  }, date));
+};
+const DatePickerComponent = (props) => {
+  const _a = props, {
+    classNames,
+    range,
+    toMonth,
+    month,
+    fromMonth,
+    firstDayOfWeek: propsFirstDayOfWeek,
+    numberOfMonths,
+    navbarElement,
+    renderDay,
+    innerRef
+  } = _a, restProps = __objRest(_a, [
+    "classNames",
+    "range",
+    "toMonth",
+    "month",
+    "fromMonth",
+    "firstDayOfWeek",
+    "numberOfMonths",
+    "navbarElement",
+    "renderDay",
+    "innerRef"
+  ]);
+  const [currentMonth, setCurrentMonth] = React.useState(month || new Date());
+  React.useEffect(() => {
+    if (month && month !== currentMonth) {
+      setCurrentMonth(month);
+    }
+  }, [month, currentMonth]);
+  React.useEffect(() => {
+    if (toMonth) {
+      if (!isDateWithinRange(currentMonth, { from: fromMonth, to: toMonth })) {
+        setCurrentMonth(toMonth);
+      }
+    }
+  }, [currentMonth, props.toMonth, props.fromMonth]);
+  const handleMonthChange = React.useCallback((month2) => {
+    if (props.onMonthChange && month2) {
+      props.onMonthChange(month2);
+      return;
+    }
+    setCurrentMonth(month2);
+  }, [month, props.onMonthChange]);
+  let firstDayOfWeek = 1;
+  if (propsFirstDayOfWeek === 0 || propsFirstDayOfWeek && propsFirstDayOfWeek < 7) {
+    firstDayOfWeek = propsFirstDayOfWeek;
+  }
+  const datePickerClassNames = React.useMemo(() => getDatePickerClassNames(range, classNames), [range, classNames]);
+  return /* @__PURE__ */ React.createElement(ReactDayPicker, __spreadValues({
+    navbarElement: navbarElement || /* @__PURE__ */ React.createElement(DatePickerNavbar, {
+      month: currentMonth,
+      classNames: datePickerClassNames,
+      numberOfMonths,
+      onMonthChange: handleMonthChange,
+      toMonth,
+      fromMonth
+    }),
+    ref: innerRef,
+    classNames: datePickerClassNames,
+    numberOfMonths,
+    toMonth,
+    fromMonth,
+    firstDayOfWeek,
+    month: currentMonth,
+    renderDay: renderDay || defaultDayRenderer
+  }, restProps));
+};
+const DatePicker = React.forwardRef((props, ref) => /* @__PURE__ */ React.createElement(DatePickerComponent, __spreadValues({
+  innerRef: ref
+}, props)));
+DatePicker.displayName = "DatePicker";
+var RangeDatePickerAction = /* @__PURE__ */ ((RangeDatePickerAction2) => {
+  RangeDatePickerAction2["NEW_SELECTED_ITEM"] = "NEW_SELECTED_ITEM";
+  RangeDatePickerAction2["NEW_TEMPORARY_TO_VALUE"] = "NEW_TEMPORARY_TO_VALUE";
+  RangeDatePickerAction2["CLEAR"] = "CLEAR";
+  RangeDatePickerAction2["SET_FROM"] = "SET_FROM";
+  RangeDatePickerAction2["SET_TO"] = "SET_TO";
+  RangeDatePickerAction2["SELECT_FIRST_DAY"] = "SELECT_FIRST_DAY";
+  RangeDatePickerAction2["SELECT_SECOND_DAY_AS_FROM"] = "SELECT_SECOND_DAY_AS_FROM";
+  RangeDatePickerAction2["SELECT_SECOND_DAY_AS_TO"] = "SELECT_SECOND_DAY_AS_TO";
+  RangeDatePickerAction2["CURRENT_MONTH_CHANGE"] = "CURRENT_MONTH_CHANGE";
+  return RangeDatePickerAction2;
+})(RangeDatePickerAction || {});
+const useRangeDatePickerState = (props) => {
+  const initialCurrentMonth = calculateDatePickerMonth(props.initialFromDate, props.initialToDate, props.toMonth);
+  const defaultInitialState = {
+    selectedItem: null,
+    from: void 0,
+    to: void 0,
+    temporaryTo: void 0,
+    currentMonth: initialCurrentMonth
+  };
+  const initialState = __spreadValues(__spreadValues({}, defaultInitialState), getInitialStateFromProps(props));
+  function reducer(state, action) {
+    switch (action.type) {
+      case RangeDatePickerAction.NEW_SELECTED_ITEM:
+        return {
+          selectedItem: action.payload.selectedItem,
+          from: void 0,
+          to: void 0,
+          temporaryTo: void 0,
+          currentMonth: initialCurrentMonth
+        };
+      case RangeDatePickerAction.NEW_TEMPORARY_TO_VALUE:
+        return __spreadProps(__spreadValues({}, state), {
+          temporaryTo: action.payload.date
+        });
+      case RangeDatePickerAction.SELECT_FIRST_DAY:
+        return __spreadProps(__spreadValues({}, state), {
+          from: action.payload.date,
+          to: void 0,
+          temporaryTo: void 0
+        });
+      case RangeDatePickerAction.SELECT_SECOND_DAY_AS_FROM:
+        return __spreadProps(__spreadValues({}, state), {
+          from: action.payload.date,
+          to: state.from,
+          temporaryTo: state.from
+        });
+      case RangeDatePickerAction.SELECT_SECOND_DAY_AS_TO:
+        return __spreadProps(__spreadValues({}, state), {
+          to: action.payload.date,
+          temporaryTo: action.payload.date
+        });
+      case RangeDatePickerAction.CURRENT_MONTH_CHANGE:
+        return __spreadProps(__spreadValues({}, state), {
+          currentMonth: action.payload.date
+        });
+      case RangeDatePickerAction.SET_FROM:
+        return __spreadProps(__spreadValues({}, state), {
+          from: action.payload.date
+        });
+      case RangeDatePickerAction.SET_TO:
+        return __spreadProps(__spreadValues({}, state), {
+          to: action.payload.date
+        });
+      default:
+        return state;
+    }
+  }
+  return useReducer(reducer, initialState);
+};
+const RangeDatePicker = ({
+  options,
+  initialSelectedItemKey,
+  initialFromDate,
+  initialToDate,
+  toMonth,
+  onChange,
+  children
+}) => {
+  const prevSelectedItem = useRef(initialSelectedItemKey || null);
+  const [state, dispatch] = useRangeDatePickerState({
+    options,
+    initialSelectedItemKey,
+    initialFromDate,
+    initialToDate,
+    toMonth,
+    onChange,
+    children
+  });
+  useEffect(() => {
+    dispatch({
+      type: RangeDatePickerAction.SET_FROM,
+      payload: { date: initialFromDate }
+    });
+  }, [initialFromDate]);
+  useEffect(() => {
+    dispatch({
+      type: RangeDatePickerAction.SET_TO,
+      payload: { date: initialToDate }
+    });
+  }, [initialToDate]);
+  useEffect(() => {
+    const currentMonth = calculateDatePickerMonth(initialFromDate, initialToDate, toMonth);
+    dispatch({
+      type: RangeDatePickerAction.CURRENT_MONTH_CHANGE,
+      payload: { date: currentMonth }
+    });
+  }, [toMonth, initialFromDate, initialToDate]);
+  useEffect(() => {
+    const { from, selectedItem, to } = state;
+    if (!(from && to)) {
+      return;
+    }
+    const selectedOption = getSelectedOption(selectedItem, options);
+    if (!selectedOption)
+      return;
+    onChange && onChange(__spreadProps(__spreadValues({}, selectedOption), {
+      value: {
+        from,
+        to
+      }
+    }));
+  }, [state.from, state.to, state.selectedItem, options, onChange]);
+  useEffect(() => {
+    const { selectedItem } = state;
+    if (selectedItem === prevSelectedItem.current) {
+      return;
+    }
+    if (!selectedItem) {
+      onChange(null);
+      return;
+    }
+    const selectedOption = getSelectedOption(selectedItem, options);
+    if (!selectedOption) {
+      return;
+    }
+    const optionsHash = options.reduce((acc, option) => __spreadProps(__spreadValues({}, acc), { [option.id]: option }), {});
+    onChange(optionsHash[selectedItem]);
+  }, [onChange, state.selectedItem, options]);
+  const handleDayMouseEnter = useCallback((day) => {
+    const isInRange = toMonth ? differenceInCalendarDays(toMonth, day) >= 0 : true;
+    if (!isSelectingFirstDay(state.from, state.to) && isInRange) {
+      dispatch({
+        type: RangeDatePickerAction.NEW_TEMPORARY_TO_VALUE,
+        payload: { date: day }
+      });
+    }
+  }, [toMonth, state.from, state.to]);
+  const handleDayClick = useCallback((day) => {
+    const { from, to } = state;
+    if (!isDateWithinRange(day, { to: toMonth })) {
+      return;
+    }
+    if (isSelectingFirstDay(from, to)) {
+      dispatch({
+        type: RangeDatePickerAction.SELECT_FIRST_DAY,
+        payload: { date: day }
+      });
+    } else if (from && isSameDay(day, from) || from && isAfter(day, from)) {
+      dispatch({
+        type: RangeDatePickerAction.SELECT_SECOND_DAY_AS_TO,
+        payload: { date: day }
+      });
+    } else {
+      dispatch({
+        type: RangeDatePickerAction.SELECT_SECOND_DAY_AS_FROM,
+        payload: { date: day }
+      });
+    }
+  }, [toMonth, state.from, state.to]);
+  const handleItemSelect = useCallback((itemKey) => {
+    if (itemKey === null) {
+      dispatch({
+        type: RangeDatePickerAction.NEW_SELECTED_ITEM,
+        payload: { selectedItem: null }
+      });
+      return;
+    }
+    const selectedOption = getSelectedOption(itemKey, options);
+    if (!selectedOption) {
+      return;
+    }
+    dispatch({
+      type: RangeDatePickerAction.NEW_SELECTED_ITEM,
+      payload: { selectedItem: itemKey }
+    });
+  }, [options]);
+  const handleMonthChange = useCallback((date) => {
+    dispatch({
+      type: RangeDatePickerAction.CURRENT_MONTH_CHANGE,
+      payload: { date }
+    });
+  }, []);
+  const getRangeDatePickerApi = () => {
+    const { currentMonth, from, selectedItem, temporaryTo, to } = state;
+    const modifiers = useMemo(() => getRangeDatePickerModifiers(from, temporaryTo), [from, temporaryTo]);
+    const selectedOption = useMemo(() => {
+      return getSelectedOption(selectedItem, options);
+    }, [options, selectedItem]);
+    const selectedDays = useMemo(() => {
+      return [from, { from, to: temporaryTo }];
+    }, [from, temporaryTo]);
+    const disabledDays = useMemo(() => {
+      return toMonth ? { after: toMonth } : void 0;
+    }, [toMonth]);
+    return {
+      select: {
+        onItemSelect: handleItemSelect,
+        selected: selectedItem || ""
+      },
+      inputs: {
+        fromDate: from,
+        toDate: to
+      },
+      datepicker: {
+        range: true,
+        month: currentMonth,
+        numberOfMonths: 2,
+        onDayClick: handleDayClick,
+        selectedDays,
+        modifiers,
+        initialMonth: toMonth && subMonths(toMonth, 1),
+        toMonth,
+        disabledDays,
+        onDayMouseEnter: handleDayMouseEnter,
+        onMonthChange: handleMonthChange
+      },
+      selectedOption
+    };
+  };
+  return children(getRangeDatePickerApi());
+};
+RangeDatePicker.defaultProps = {
+  options: [
+    {
+      id: "default",
+      label: "Default option",
+      isManual: true,
+      value: {
+        from: void 0,
+        to: void 0
+      }
+    }
+  ]
+};
 var styles$n = {
   "field-error": "lc-FieldError-module__field-error___IDkPT"
 };
@@ -2122,6 +2751,7 @@ const switch__container = "lc-Switch-module__switch__container___79F7W";
 const switch__track = "lc-Switch-module__switch__track___2wr2M";
 const switch__slider = "lc-Switch-module__switch__slider___WHd--";
 const switch__loader = "lc-Switch-module__switch__loader___FE-fA";
+const switch__icon = "lc-Switch-module__switch__icon___-O1qY";
 var styles$6 = {
   "switch": "lc-Switch-module__switch___AaA2k",
   "switch__track--enabled": "lc-Switch-module__switch__track--enabled___sy4Xl",
@@ -2148,7 +2778,8 @@ var styles$6 = {
   switch__loader,
   "switch__loader--compact": "lc-Switch-module__switch__loader--compact___3imUh",
   "switch__loader--medium": "lc-Switch-module__switch__loader--medium___2zi05",
-  "switch__loader--large": "lc-Switch-module__switch__loader--large___vLRFa"
+  "switch__loader--large": "lc-Switch-module__switch__loader--large___vLRFa",
+  switch__icon
 };
 const baseClass$c = "switch";
 const Switch = (_Q) => {
@@ -2215,6 +2846,7 @@ const Switch = (_Q) => {
   }, isLoading && /* @__PURE__ */ React.createElement(Loader, {
     className: cx(styles$6[`${baseClass$c}__loader`], styles$6[`${baseClass$c}__loader--${size}`])
   }), isLocked && /* @__PURE__ */ React.createElement(Icon, {
+    className: styles$6[`${baseClass$c}__icon`],
     "data-testid": "lock-icon",
     size: iconSize,
     source: LockBlack,
@@ -3185,4 +3817,4 @@ const UserGuide = (props) => {
     })
   }), props.children)) : null;
 };
-export { ANIMATION_TIME, ActionModal, Alert, Avatar, Badge, Button, ButtonGroup, Card, Checkbox, DesignToken, EmailTagInput, FieldDescription, FieldError, FieldGroup, Form, FormField, FormGroup, Heading, Icon, Info, Input, Interactive, Link, Loader, Modal, ModalBase, ModalCloseButton, ModalPortal, NumericInput, Picker, Popover, ProgressBar, ProgressCircle, PromoBanner, RadioButton, SearchInput, ShadowToken, Simple, SpacingToken, Switch, Tab, TabsList, TabsWrapper, Tag, TagInput, Text, Toast, ToastWrapper, Tooltip, UserGuide };
+export { ANIMATION_TIME, ActionModal, Alert, Avatar, Badge, Button, ButtonGroup, Card, Checkbox, DatePicker, DesignToken, EmailTagInput, FieldDescription, FieldError, FieldGroup, Form, FormField, FormGroup, Heading, Icon, Info, Input, Interactive, Link, Loader, Modal, ModalBase, ModalCloseButton, ModalPortal, NumericInput, Picker, Popover, ProgressBar, ProgressCircle, PromoBanner, RadioButton, RangeDatePicker, SearchInput, ShadowToken, Simple, SpacingToken, Switch, Tab, TabsList, TabsWrapper, Tag, TagInput, Text, Toast, ToastWrapper, Tooltip, UserGuide };