@livechat/design-system-react-components 1.0.0-alpha.2 → 1.0.0-alpha.6

package/dist/dsrc.es.js

@@ -0,0 +1,2213 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import * as React from "react";
+import cx from "clsx";
+import { Info, Warning, CheckCircleSolid, Block, Close, Check, ChevronUp, ChevronDown, Error as Error2 } from "@livechat/design-system-icons/react/material";
+import * as ReactDOM from "react-dom";
+import { usePopper } from "react-popper";
+import { getContrast } from "polished";
+import escape from "lodash.escape";
+import { TransitionGroup, CSSTransition } from "react-transition-group";
+var index = "";
+const DesignTokens = {
+  Background: "--background",
+  SurfaceBasicDefault: "--surface-basic-default",
+  SurfaceBasicSubtle: "--surface-basic-subtle",
+  SurfaceBasicHover: "--surface-basic-hover",
+  SurfaceBasicActive: "--surface-basic-active",
+  SurfaceBasicDisabled: "--surface-basic-disabled",
+  SurfaceSecondaryDefault: "--surface-secondary-default",
+  SurfaceSecondarySubtle: "--surface-secondary-subtle",
+  SurfaceSecondaryHover: "--surface-secondary-hover",
+  SurfaceSecondaryDisabled: "--surface-secondary-disabled",
+  SurfaceFeedbackInfo: "--surface-feedback-info",
+  SurfaceFeedbackNegative: "--surface-feedback-negative",
+  SurfaceFeedbackWarning: "--surface-feedback-warning",
+  SurfaceFeedbackPositive: "--surface-feedback-positive",
+  SurfaceInvertDefault: "--surface-invert-default",
+  SurfaceInvertSubtle: "--surface-invert-subtle",
+  SurfaceInvertDisabled: "--surface-invert-disabled",
+  SurfaceOverlay: "--surface-overlay",
+  ContentDefault: "--content-default",
+  ContentSubtle: "--content-subtle",
+  ContentDisabled: "--content-disabled",
+  ContentWhiteLocked: "--content-white-locked",
+  ContentInvertDefault: "--content-invert-default",
+  ContentInvertSubtle: "--content-invert-subtle",
+  ContentInvertDisabled: "--content-invert-disabled",
+  BorderDefault: "--border-default",
+  BorderSubtle: "--border-subtle",
+  BorderHover: "--border-hover",
+  BorderDisabled: "--border-disabled",
+  BorderInvertDefault: "--border-invert-default",
+  BorderInvertSubtle: "--border-invert-subtle",
+  BorderInvertHover: "--border-invert-hover",
+  BorderInvertDisabled: "--border-invert-disabled",
+  ColorActionActive: "--color-action-active",
+  ColorActionHover: "--color-action-hover",
+  ColorActionDefault: "--color-action-default",
+  ColorActionDisabled: "--color-action-disabled",
+  ColorNegativeActive: "--color-negative-active",
+  ColorNegativeHover: "--color-negative-hover",
+  ColorNegativeDefault: "--color-negative-default",
+  ColorNegativeDisabled: "--color-negative-disabled",
+  ColorWarningDefault: "--color-warning-default",
+  ColorWarningHover: "--color-warning-hover",
+  ColorPositiveDefault: "--color-positive-default",
+  ColorPositiveHover: "--color-positive-hover",
+  ColorPositiveDisabled: "--color-positive-disabled",
+  ColorBot: "--color-bot",
+  ColorBlack: "--color-black",
+  ColorWhite: "--color-white",
+  DecorBlue900: "--decor-blue900",
+  DecorBlue800: "--decor-blue800",
+  DecorBlue700: "--decor-blue700",
+  DecorBlue600: "--decor-blue600",
+  DecorBlue500: "--decor-blue500",
+  DecorBlue400: "--decor-blue400",
+  DecorBlue300: "--decor-blue300",
+  DecorBlue200: "--decor-blue200",
+  DecorBlue100: "--decor-blue100",
+  DecorBlue50: "--decor-blue50",
+  DecorOrange900: "--decor-orange900",
+  DecorOrange800: "--decor-orange800",
+  DecorOrange700: "--decor-orange700",
+  DecorOrange600: "--decor-orange600",
+  DecorOrange500: "--decor-orange500",
+  DecorOrange400: "--decor-orange400",
+  DecorOrange300: "--decor-orange300",
+  DecorOrange200: "--decor-orange200",
+  DecorOrange100: "--decor-orange100",
+  DecorOrange50: "--decor-orange50",
+  DecorYellow900: "--decor-yellow900",
+  DecorYellow800: "--decor-yellow800",
+  DecorYellow700: "--decor-yellow700",
+  DecorYellow600: "--decor-yellow600",
+  DecorYellow500: "--decor-yellow500",
+  DecorYellow400: "--decor-yellow400",
+  DecorYellow300: "--decor-yellow300",
+  DecorYellow200: "--decor-yellow200",
+  DecorYellow100: "--decor-yellow100",
+  DecorYellow50: "--decor-yellow50",
+  DecorGray950: "--decor-gray950",
+  DecorGray900: "--decor-gray900",
+  DecorGray800: "--decor-gray800",
+  DecorGray700: "--decor-gray700",
+  DecorGray600: "--decor-gray600",
+  DecorGray500: "--decor-gray500",
+  DecorGray400: "--decor-gray400",
+  DecorGray300: "--decor-gray300",
+  DecorGray200: "--decor-gray200",
+  DecorGray150: "--decor-gray150",
+  DecorGray100: "--decor-gray100",
+  DecorGray75: "--decor-gray75",
+  DecorGray50: "--decor-gray50",
+  DecorGray40: "--decor-gray40",
+  DecorGray20: "--decor-gray20",
+  DecorGreen900: "--decor-green900",
+  DecorGreen800: "--decor-green800",
+  DecorGreen700: "--decor-green700",
+  DecorGreen600: "--decor-green600",
+  DecorGreen500: "--decor-green500",
+  DecorGreen400: "--decor-green400",
+  DecorGreen300: "--decor-green300",
+  DecorGreen200: "--decor-green200",
+  DecorGreen100: "--decor-green100",
+  DecorGreen50: "--decor-green50",
+  DecorRed900: "--decor-red900",
+  DecorRed800: "--decor-red800",
+  DecorRed700: "--decor-red700",
+  DecorRed600: "--decor-red600",
+  DecorRed500: "--decor-red500",
+  DecorRed400: "--decor-red400",
+  DecorRed300: "--decor-red300",
+  DecorRed200: "--decor-red200",
+  DecorRed100: "--decor-red100",
+  DecorRed50: "--decor-red50",
+  DecorPurple900: "--decor-purple900",
+  DecorPurple800: "--decor-purple800",
+  DecorPurple700: "--decor-purple700",
+  DecorPurple600: "--decor-purple600",
+  DecorPurple500: "--decor-purple500",
+  DecorPurple400: "--decor-purple400",
+  DecorPurple300: "--decor-purple300",
+  DecorPurple200: "--decor-purple200",
+  DecorPurple100: "--decor-purple100",
+  DecorPurple50: "--decor-purple50"
+};
+const caps = "lc-Typography-module__caps___c3eNJ";
+var styles$r = {
+  "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",
+  "heading-sm": "lc-Typography-module__heading-sm___nBmTV",
+  "heading-xs": "lc-Typography-module__heading-xs___VcZBs",
+  caps,
+  "caps--bold": "lc-Typography-module__caps--bold___OZovw",
+  "paragraph-md": "lc-Typography-module__paragraph-md___UGoqq",
+  "paragraph-md--bold": "lc-Typography-module__paragraph-md--bold___mWcMG",
+  "paragraph-md--underline": "lc-Typography-module__paragraph-md--underline___Fv6zM",
+  "paragraph-md--strike": "lc-Typography-module__paragraph-md--strike___yLGHh",
+  "paragraph-sm": "lc-Typography-module__paragraph-sm___QIEFL",
+  "paragraph-sm--bold": "lc-Typography-module__paragraph-sm--bold___fAjI5",
+  "paragraph-xs": "lc-Typography-module__paragraph-xs___OUooD",
+  "paragraph-xs--bold": "lc-Typography-module__paragraph-xs--bold___z7om7"
+};
+var sizeToElement = /* @__PURE__ */ ((sizeToElement2) => {
+  sizeToElement2["xl"] = "h1";
+  sizeToElement2["lg"] = "h2";
+  sizeToElement2["md"] = "h3";
+  sizeToElement2["sm"] = "h4";
+  sizeToElement2["xs"] = "h5";
+  return sizeToElement2;
+})(sizeToElement || {});
+const Heading = (_a) => {
+  var _b = _a, {
+    as,
+    size = "md",
+    children,
+    className
+  } = _b, props = __objRest(_b, [
+    "as",
+    "size",
+    "children",
+    "className"
+  ]);
+  return React.createElement(as || sizeToElement[size], __spreadValues({ className: cx(styles$r[`heading-${size}`], className) }, props), children);
+};
+const Text = (_c) => {
+  var _d = _c, {
+    as = "p",
+    size = "md",
+    caps: caps2 = false,
+    bold = false,
+    underline = false,
+    strike = false,
+    children,
+    className
+  } = _d, props = __objRest(_d, [
+    "as",
+    "size",
+    "caps",
+    "bold",
+    "underline",
+    "strike",
+    "children",
+    "className"
+  ]);
+  const baseClassPrefix = caps2 ? "caps" : `paragraph-${size}`;
+  return React.createElement(as, __spreadValues({
+    className: cx({
+      [styles$r[`${baseClassPrefix}`]]: true,
+      [styles$r[`${baseClassPrefix}--bold`]]: bold,
+      [styles$r[`${baseClassPrefix}--strike`]]: strike,
+      [styles$r[`${baseClassPrefix}--underline`]]: underline
+    }, className)
+  }, props), children);
+};
+const icon$1 = "lc-Icon-module__icon___tw31R";
+var styles$q = {
+  icon: icon$1,
+  "icon--primary": "lc-Icon-module__icon--primary___JJnBV",
+  "icon--subtle": "lc-Icon-module__icon--subtle___sZIzL",
+  "icon--inverted": "lc-Icon-module__icon--inverted___zA9QC",
+  "icon--inverted-subtle": "lc-Icon-module__icon--inverted-subtle___6UwBT",
+  "icon--link": "lc-Icon-module__icon--link___Jwkw9",
+  "icon--success": "lc-Icon-module__icon--success___MKdz3",
+  "icon--warning": "lc-Icon-module__icon--warning___5YCSW",
+  "icon--error": "lc-Icon-module__icon--error___CiJCD",
+  "icon--disabled--primary": "lc-Icon-module__icon--disabled--primary___E0nee",
+  "icon--disabled--subtle": "lc-Icon-module__icon--disabled--subtle___l-hK4",
+  "icon--disabled--inverted": "lc-Icon-module__icon--disabled--inverted___5SBAf",
+  "icon--disabled--inverted-subtle": "lc-Icon-module__icon--disabled--inverted-subtle___w-NBk",
+  "icon--disabled--link": "lc-Icon-module__icon--disabled--link___sVJOa",
+  "icon--disabled--success": "lc-Icon-module__icon--disabled--success___sG-7d",
+  "icon--disabled--warning": "lc-Icon-module__icon--disabled--warning___8ko1e",
+  "icon--disabled--error": "lc-Icon-module__icon--disabled--error___9KbVo"
+};
+var IconSizeName = /* @__PURE__ */ ((IconSizeName2) => {
+  IconSizeName2["XSmall"] = "xsmall";
+  IconSizeName2["Small"] = "small";
+  IconSizeName2["Medium"] = "medium";
+  IconSizeName2["Large"] = "large";
+  IconSizeName2["XLarge"] = "xlarge";
+  return IconSizeName2;
+})(IconSizeName || {});
+const IconSize = {
+  ["xsmall"]: {
+    width: 12,
+    height: 12
+  },
+  ["small"]: {
+    width: 16,
+    height: 16
+  },
+  ["medium"]: {
+    width: 20,
+    height: 20
+  },
+  ["large"]: {
+    width: 24,
+    height: 24
+  },
+  ["xlarge"]: {
+    width: 32,
+    height: 32
+  }
+};
+var IconTypeName = /* @__PURE__ */ ((IconTypeName2) => {
+  IconTypeName2["Primary"] = "primary";
+  IconTypeName2["Subtle"] = "subtle";
+  IconTypeName2["Inverted"] = "inverted";
+  IconTypeName2["InvertedSubtle"] = "inverted_subtle";
+  IconTypeName2["Link"] = "link";
+  IconTypeName2["Success"] = "success";
+  IconTypeName2["Warning"] = "warning";
+  IconTypeName2["Error"] = "error";
+  return IconTypeName2;
+})(IconTypeName || {});
+const IconColorMapper = {
+  ["primary"]: "primary",
+  ["subtle"]: "subtle",
+  ["inverted"]: "inverted",
+  ["inverted_subtle"]: "inverted-subtle",
+  ["link"]: "link",
+  ["success"]: "success",
+  ["warning"]: "warning",
+  ["error"]: "error"
+};
+const IconColorDisabledMapper = {
+  ["primary"]: "disabled--primary",
+  ["subtle"]: "disabled--subtle",
+  ["inverted"]: "disabled--inverted",
+  ["inverted_subtle"]: "disabled--inverted-subtle",
+  ["link"]: "disabled--link",
+  ["success"]: "disabled--success",
+  ["warning"]: "disabled--warning",
+  ["error"]: "disabled--error"
+};
+const baseClass$t = "icon";
+const Icon = (props) => {
+  const _a = props, {
+    source,
+    size = "medium",
+    iconType,
+    disabled,
+    className,
+    customColor
+  } = _a, restProps = __objRest(_a, [
+    "source",
+    "size",
+    "iconType",
+    "disabled",
+    "className",
+    "customColor"
+  ]);
+  let filledColor;
+  if (iconType) {
+    filledColor = IconColorMapper[iconType];
+    if (disabled) {
+      filledColor = IconColorDisabledMapper[iconType];
+    }
+  }
+  const GeneratedIcon = React.createElement(source, __spreadProps(__spreadValues({}, IconSize[size]), {
+    color: customColor
+  }));
+  const mergedClassNames = cx(className, styles$q[baseClass$t], filledColor && styles$q[`${baseClass$t}--${filledColor}`]);
+  return /* @__PURE__ */ React.createElement("span", __spreadProps(__spreadValues({}, restProps), {
+    className: mergedClassNames
+  }), GeneratedIcon);
+};
+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$p = {
+  alert,
+  "alert__content-text": "lc-Alert-module__alert__content-text___x2Un5",
+  alert__content,
+  "alert--small": "lc-Alert-module__alert--small___Fyk-v",
+  "alert--medium": "lc-Alert-module__alert--medium___ItZWT",
+  "alert--large": "lc-Alert-module__alert--large___IH9yM",
+  "alert__close-icon": "lc-Alert-module__alert__close-icon___rYxVy",
+  "alert--info": "lc-Alert-module__alert--info___GmIGN",
+  "alert--warning": "lc-Alert-module__alert--warning___MubhD",
+  "alert--success": "lc-Alert-module__alert--success___fPtlZ",
+  "alert--error": "lc-Alert-module__alert--error___DKPo0",
+  alert__icon
+};
+const IconConfig$1 = {
+  ["info"]: {
+    source: Info,
+    iconType: IconTypeName.Link
+  },
+  ["warning"]: {
+    source: Warning,
+    iconType: IconTypeName.Warning
+  },
+  ["success"]: {
+    source: CheckCircleSolid,
+    iconType: IconTypeName.Success
+  },
+  ["error"]: {
+    source: Block,
+    iconType: IconTypeName.Error
+  }
+};
+const baseClass$s = "alert";
+const Alert = ({
+  children,
+  className,
+  size = "small",
+  type = "info",
+  onClose
+}) => {
+  const mergedClassNames = cx(styles$p[baseClass$s], styles$p[`${baseClass$s}--${type}`], styles$p[`${baseClass$s}--${size}`], className);
+  return /* @__PURE__ */ React.createElement("div", {
+    className: mergedClassNames
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: styles$p[`${baseClass$s}__content`]
+  }, /* @__PURE__ */ React.createElement(Icon, __spreadValues({}, IconConfig$1[type])), /* @__PURE__ */ React.createElement(Text, {
+    as: "div",
+    className: styles$p[`${baseClass$s}__content-text`]
+  }, children)), onClose && /* @__PURE__ */ React.createElement("button", {
+    type: "button",
+    className: styles$p[`${baseClass$s}__close-icon`],
+    onClick: onClose
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    source: Close,
+    size: IconSizeName.Large,
+    iconType: IconTypeName.Primary
+  })));
+};
+const badge = "lc-Badge-module__badge___GhLnu";
+var styles$o = {
+  badge,
+  "badge--secondary": "lc-Badge-module__badge--secondary___JjNIJ"
+};
+const Badge = ({
+  children,
+  className,
+  secondary = false
+}) => {
+  return /* @__PURE__ */ React.createElement("span", {
+    className: cx(styles$o.badge, className, {
+      [styles$o["badge--secondary"]]: secondary
+    })
+  }, children);
+};
+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$n = {
+  loader,
+  loader__spinner,
+  "loader__spinner--small": "lc-Loader-module__loader__spinner--small___dGFFt",
+  "loader__spinner--medium": "lc-Loader-module__loader__spinner--medium___J-ki0",
+  "loader__spinner--large": "lc-Loader-module__loader__spinner--large___Poqq7",
+  "loader__spinner-circle": "lc-Loader-module__loader__spinner-circle___ApBUO",
+  rotate,
+  loader__label
+};
+const baseClass$r = "loader";
+const spinnerClass = `${baseClass$r}__spinner`;
+const Loader = ({
+  primaryColor,
+  secondaryColor,
+  label,
+  className,
+  size = "medium"
+}) => {
+  return /* @__PURE__ */ React.createElement("div", {
+    className: cx(styles$n[baseClass$r], className)
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: cx(styles$n[spinnerClass], styles$n[`${spinnerClass}--${size}`])
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: styles$n["loader__spinner-circle"],
+    style: {
+      borderColor: secondaryColor,
+      borderTopColor: primaryColor
+    }
+  })), label && /* @__PURE__ */ React.createElement(Text, {
+    as: "div",
+    size: "md",
+    className: styles$n["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$m = {
+  btn: btn$1,
+  "btn--disabled": "lc-Button-module__btn--disabled___lXBav",
+  "btn--icon-only": "lc-Button-module__btn--icon-only___bF5pW",
+  "btn__icon--left": "lc-Button-module__btn__icon--left___H68zu",
+  "btn__icon--right": "lc-Button-module__btn__icon--right___fHr3D",
+  "btn--full-width": "lc-Button-module__btn--full-width___kdbAr",
+  "btn--basic": "lc-Button-module__btn--basic___Jc2gD",
+  "btn--primary": "lc-Button-module__btn--primary___ajbjQ",
+  "btn--secondary": "lc-Button-module__btn--secondary___iWzE0",
+  "btn--destructive": "lc-Button-module__btn--destructive___-kLCl",
+  "btn--compact": "lc-Button-module__btn--compact___4eptQ",
+  "btn--large": "lc-Button-module__btn--large___lb-z6",
+  "btn--text": "lc-Button-module__btn--text___WA8OL",
+  "btn--plain": "lc-Button-module__btn--plain___eOPui",
+  "btn--plain-light": "lc-Button-module__btn--plain-light___eS9em",
+  "btn--loading": "lc-Button-module__btn--loading___ZAgjv",
+  btn__loader,
+  btn__content,
+  btn__icon
+};
+const baseClass$q = "btn";
+const Button = (_e) => {
+  var _f = _e, {
+    loading = false,
+    disabled = false,
+    type = "button",
+    fullWidth = false,
+    kind = "basic",
+    size = "medium",
+    icon: icon2 = null,
+    iconPosition = "left",
+    loaderLabel,
+    className,
+    children,
+    href
+  } = _f, props = __objRest(_f, [
+    "loading",
+    "disabled",
+    "type",
+    "fullWidth",
+    "kind",
+    "size",
+    "icon",
+    "iconPosition",
+    "loaderLabel",
+    "className",
+    "children",
+    "href"
+  ]);
+  const isDisabled = loading || disabled;
+  const Component = href ? "a" : "button";
+  const mergedClassNames = cx(className, styles$m[baseClass$q], styles$m[`${baseClass$q}--${kind}`], styles$m[`${baseClass$q}--${size}`], {
+    [styles$m[`${baseClass$q}--loading`]]: loading,
+    [styles$m[`${baseClass$q}--full-width`]]: fullWidth,
+    [styles$m[`${baseClass$q}--icon-only`]]: !children && icon2,
+    [styles$m[`${baseClass$q}--disabled`]]: isDisabled
+  });
+  return /* @__PURE__ */ React.createElement(Component, __spreadValues({
+    className: mergedClassNames,
+    disabled: isDisabled,
+    type,
+    href: isDisabled ? void 0 : href
+  }, props), loading && /* @__PURE__ */ React.createElement(Loader, {
+    size: "small",
+    label: loaderLabel,
+    className: styles$m[`${baseClass$q}__loader`]
+  }), icon2 && React.cloneElement(icon2, {
+    className: cx(styles$m[`${baseClass$q}__icon`], styles$m[`${baseClass$q}__icon--${iconPosition}`]),
+    disabled
+  }), /* @__PURE__ */ React.createElement("div", {
+    className: styles$m[`${baseClass$q}__content`]
+  }, children));
+};
+const btn = "lc-ButtonGroup-module__btn___bXPrU";
+var styles$l = {
+  "btn-group": "lc-ButtonGroup-module__btn-group___R-lZQ",
+  btn,
+  "btn--active": "lc-ButtonGroup-module__btn--active___VAc37",
+  "btn--compact": "lc-ButtonGroup-module__btn--compact___t1whe",
+  "btn--medium": "lc-ButtonGroup-module__btn--medium___XFRBP",
+  "btn--large": "lc-ButtonGroup-module__btn--large___OtNUz"
+};
+function noop() {
+}
+const baseClass$p = "btn-group";
+const ButtonGroup = (_g) => {
+  var _h = _g, {
+    size = "medium",
+    fullWidth = false,
+    onIndexChange = noop,
+    className,
+    children,
+    currentIndex,
+    initialIndex = -1
+  } = _h, restProps = __objRest(_h, [
+    "size",
+    "fullWidth",
+    "onIndexChange",
+    "className",
+    "children",
+    "currentIndex",
+    "initialIndex"
+  ]);
+  const mergedClassName = cx(styles$l[baseClass$p], className);
+  const [currentStateIndex, setCurrentStateIndex] = React.useState(initialIndex);
+  const isControlled = typeof currentIndex === "number";
+  const _currentIndex = isControlled ? currentIndex : currentStateIndex;
+  const handleClick = (index2, event) => {
+    if (!isControlled) {
+      setCurrentStateIndex(index2);
+    }
+    onIndexChange(index2, event);
+  };
+  return /* @__PURE__ */ React.createElement("div", __spreadValues({
+    role: "group",
+    className: mergedClassName
+  }, restProps), React.Children.map(children, (child, i) => React.cloneElement(child, {
+    fullWidth,
+    size,
+    kind: "secondary",
+    type: "button",
+    onClick: (event) => {
+      handleClick(i, event);
+      if (child.props.onClick) {
+        child.props.onClick(event);
+      }
+    },
+    className: cx(styles$l["btn"], styles$l[`btn--${size}`], i === _currentIndex && styles$l["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$k = {
+  card,
+  card__title,
+  card__text,
+  card__img
+};
+const Card = (_i) => {
+  var _j = _i, {
+    img,
+    title,
+    children,
+    className
+  } = _j, restProps = __objRest(_j, [
+    "img",
+    "title",
+    "children",
+    "className"
+  ]);
+  return /* @__PURE__ */ React.createElement(Text, __spreadValues({
+    as: "div",
+    size: "md",
+    className: cx(styles$k["card"], className)
+  }, restProps), (img || title) && /* @__PURE__ */ React.createElement(Heading, {
+    as: "div",
+    size: "sm",
+    className: styles$k["card__title"]
+  }, img && /* @__PURE__ */ React.createElement("img", {
+    src: img,
+    className: styles$k["card__img"]
+  }), title && /* @__PURE__ */ React.createElement("div", {
+    className: styles$k["card__text"]
+  }, title)), children);
+};
+const checkbox = "lc-Checkbox-module__checkbox___G7nTf";
+const checkbox__label = "lc-Checkbox-module__checkbox__label___-o01x";
+const checkbox__square = "lc-Checkbox-module__checkbox__square___MHUyd";
+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$j = {
+  checkbox,
+  checkbox__label,
+  checkbox__square,
+  checkbox__checkmark,
+  "checkbox--selected": "lc-Checkbox-module__checkbox--selected___S2vqY",
+  checkbox__input,
+  checkbox__text,
+  "checkbox--disabled": "lc-Checkbox-module__checkbox--disabled___-lAqW",
+  checkbox__helper
+};
+const baseClass$o = "checkbox";
+const Checkbox = (_k) => {
+  var _l = _k, {
+    className = ""
+  } = _l, props = __objRest(_l, [
+    "className"
+  ]);
+  const mergedClassNames = cx(styles$j[`${baseClass$o}__square`], className);
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, props), {
+    className: styles$j[`${baseClass$o}__input`],
+    type: "checkbox"
+  })), /* @__PURE__ */ React.createElement("div", {
+    className: mergedClassNames
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    source: Check,
+    iconType: IconTypeName.Inverted,
+    size: IconSizeName.XSmall,
+    className: styles$j[`${baseClass$o}__checkmark`]
+  })));
+};
+var styles$i = {
+  "field-description": "lc-FieldDescription-module__field-description___IcRDH"
+};
+const baseClass$n = "field-description";
+const FieldDescription = (_m) => {
+  var _n = _m, {
+    children,
+    className = ""
+  } = _n, props = __objRest(_n, [
+    "children",
+    "className"
+  ]);
+  const mergedClassNames = cx(styles$i[baseClass$n], className);
+  return /* @__PURE__ */ React.createElement(Text, __spreadProps(__spreadValues({
+    as: "span",
+    size: "sm"
+  }, props), {
+    className: mergedClassNames
+  }), children);
+};
+const baseClass$m = "checkbox";
+const CheckboxField = (_o) => {
+  var _p = _o, {
+    children,
+    className = "",
+    description,
+    checked,
+    disabled
+  } = _p, props = __objRest(_p, [
+    "children",
+    "className",
+    "description",
+    "checked",
+    "disabled"
+  ]);
+  const mergedClassNames = cx(styles$j[baseClass$m], className, {
+    [styles$j[`${baseClass$m}--selected`]]: checked,
+    [styles$j[`${baseClass$m}--disabled`]]: disabled
+  });
+  return /* @__PURE__ */ React.createElement("div", {
+    className: mergedClassNames
+  }, /* @__PURE__ */ React.createElement("label", {
+    className: styles$j[`${baseClass$m}__label`]
+  }, /* @__PURE__ */ React.createElement(Checkbox, __spreadProps(__spreadValues({}, props), {
+    checked,
+    disabled
+  })), /* @__PURE__ */ React.createElement(Text, {
+    as: "div",
+    size: "md",
+    className: styles$j[`${baseClass$m}__text`]
+  }, children)), description && /* @__PURE__ */ React.createElement(FieldDescription, {
+    className: styles$j[`${baseClass$m}__helper`]
+  }, description));
+};
+var styles$h = {
+  "field-error": "lc-FieldError-module__field-error___IDkPT"
+};
+const baseClass$l = "field-error";
+const FieldError = (_q) => {
+  var _r = _q, {
+    children,
+    className = ""
+  } = _r, props = __objRest(_r, [
+    "children",
+    "className"
+  ]);
+  const mergedClassNames = cx(styles$h[baseClass$l], className);
+  return /* @__PURE__ */ React.createElement(Text, __spreadProps(__spreadValues({
+    as: "span",
+    size: "sm"
+  }, props), {
+    className: mergedClassNames
+  }), children);
+};
+var styles$g = {
+  "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"
+};
+const baseClass$k = "field-group";
+const FieldGroup = (_s) => {
+  var _t = _s, {
+    className = "",
+    children,
+    description,
+    error,
+    inline,
+    stretch
+  } = _t, props = __objRest(_t, [
+    "className",
+    "children",
+    "description",
+    "error",
+    "inline",
+    "stretch"
+  ]);
+  const mergedClassNames = cx(styles$g[baseClass$k], className, {
+    [styles$g[`${baseClass$k}--inline`]]: inline,
+    [styles$g[`${baseClass$k}--stretched`]]: stretch
+  });
+  return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, props), {
+    className: mergedClassNames
+  }), children, error && /* @__PURE__ */ React.createElement(FieldError, null, error), description && /* @__PURE__ */ React.createElement(FieldDescription, null, description));
+};
+const form = "lc-Form-module__form___1nOYF";
+const form__header = "lc-Form-module__form__header___U4B7t";
+const form__footer = "lc-Form-module__form__footer___1-sUX";
+const form__label = "lc-Form-module__form__label___spg-J";
+const form__helper = "lc-Form-module__form__helper___bhfwS";
+var styles$f = {
+  form,
+  form__header,
+  form__footer,
+  form__label,
+  form__helper
+};
+const baseClass$j = "form";
+const Form = (_u) => {
+  var _v = _u, {
+    className,
+    children,
+    labelText,
+    helperText,
+    formFooter
+  } = _v, restProps = __objRest(_v, [
+    "className",
+    "children",
+    "labelText",
+    "helperText",
+    "formFooter"
+  ]);
+  return /* @__PURE__ */ React.createElement("form", __spreadValues({
+    className: cx(styles$f[baseClass$j], className)
+  }, restProps), (labelText || helperText) && /* @__PURE__ */ React.createElement("div", {
+    className: styles$f[`${baseClass$j}__header`]
+  }, labelText && /* @__PURE__ */ React.createElement(Heading, {
+    size: "sm",
+    className: styles$f[`${baseClass$j}__label`]
+  }, labelText), helperText && /* @__PURE__ */ React.createElement(Text, {
+    as: "p",
+    size: "sm",
+    className: styles$f[`${baseClass$j}__helper`]
+  }, helperText)), children, formFooter && /* @__PURE__ */ React.createElement("div", {
+    className: styles$f[`${baseClass$j}__footer`]
+  }, formFooter));
+};
+var styles$e = {
+  "form-group": "lc-FormGroup-module__form-group___e2JHa",
+  "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"
+};
+const baseClass$i = "form-group";
+const FormGroup = (_w) => {
+  var _x = _w, {
+    className = "",
+    children,
+    labelText,
+    helperText
+  } = _x, props = __objRest(_x, [
+    "className",
+    "children",
+    "labelText",
+    "helperText"
+  ]);
+  const mergedClassNames = cx(styles$e[baseClass$i], className);
+  return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, props), {
+    role: "group"
+  }), labelText && { "aria-label": labelText }), {
+    className: mergedClassNames
+  }), /* @__PURE__ */ React.createElement("div", {
+    className: styles$e[`${baseClass$i}__header`]
+  }, /* @__PURE__ */ React.createElement(Heading, {
+    as: "div",
+    size: "sm",
+    className: styles$e[`${baseClass$i}__label`]
+  }, labelText), helperText && /* @__PURE__ */ React.createElement(Text, {
+    as: "div",
+    size: "sm",
+    className: styles$e[`${baseClass$i}__helper`]
+  }, helperText)), children);
+};
+var styles$d = {
+  "text-field": "lc-TextField-module__text-field___bis8c",
+  "text-field--inline": "lc-TextField-module__text-field--inline___MPHqg",
+  "text-field__wrapper--inline": "lc-TextField-module__text-field__wrapper--inline___-gOob",
+  "text-field__label": "lc-TextField-module__text-field__label___vpNdg",
+  "text-field__label--inline": "lc-TextField-module__text-field__label--inline___YSRYX",
+  "text-field__label--no-text": "lc-TextField-module__text-field__label--no-text___XSyn2",
+  "text-field__label-wrapper": "lc-TextField-module__text-field__label-wrapper___SNCct",
+  "text-field__label-adornment": "lc-TextField-module__text-field__label-adornment___--pgp",
+  "text-field__label-right-node": "lc-TextField-module__text-field__label-right-node___sdnWg",
+  "text-field__label-right-node--inline": "lc-TextField-module__text-field__label-right-node--inline___vMBP2",
+  "text-field__row-break": "lc-TextField-module__text-field__row-break___AnNrI",
+  "text-field__content": "lc-TextField-module__text-field__content___dCkUW",
+  "field-label": "lc-TextField-module__field-label___q8Y-p"
+};
+const baseClass$h = "text-field";
+const TextField = ({
+  inline,
+  error,
+  description,
+  labelText,
+  labelAdornment,
+  className,
+  labelFor,
+  children,
+  labelRightNode
+}) => {
+  const mergedClassNames = cx(styles$d[baseClass$h], {
+    [styles$d[`${baseClass$h}--inline`]]: inline
+  }, className);
+  return /* @__PURE__ */ React.createElement("div", {
+    className: mergedClassNames
+  }, labelRightNode && inline && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
+    className: cx(styles$d[`${baseClass$h}__label-right-node`], styles$d[`${baseClass$h}__label-right-node--inline`])
+  }, labelRightNode), /* @__PURE__ */ React.createElement("div", {
+    className: styles$d[`${baseClass$h}__row-break`]
+  })), /* @__PURE__ */ React.createElement("div", {
+    className: cx(styles$d[`${baseClass$h}__wrapper`], inline && styles$d[`${baseClass$h}__wrapper--inline`])
+  }, (labelText || labelRightNode) && /* @__PURE__ */ React.createElement("div", {
+    className: cx(styles$d[`${baseClass$h}__label`], inline && styles$d[`${baseClass$h}__label--inline`], !labelText && styles$d[`${baseClass$h}__label--no-text`])
+  }, labelText && /* @__PURE__ */ React.createElement("div", {
+    className: cx(styles$d[`${baseClass$h}__label-wrapper`])
+  }, /* @__PURE__ */ React.createElement("label", {
+    className: "lc-field-label",
+    htmlFor: labelFor
+  }, /* @__PURE__ */ React.createElement(Text, {
+    as: "span",
+    size: "sm"
+  }, labelText)), labelAdornment && /* @__PURE__ */ React.createElement("div", {
+    className: cx(styles$d[`${baseClass$h}__label-adornment`])
+  }, labelAdornment)), labelRightNode && !inline && /* @__PURE__ */ React.createElement("div", {
+    className: cx(styles$d[`${baseClass$h}__label-right-node`])
+  }, labelRightNode)), /* @__PURE__ */ React.createElement("div", {
+    className: cx(styles$d[`${baseClass$h}__content`])
+  }, children, error && /* @__PURE__ */ React.createElement(FieldError, null, error), description && /* @__PURE__ */ React.createElement(FieldDescription, null, description))));
+};
+var styles$c = {
+  "input-field": "lc-InputField-module__input-field___A-GHj",
+  "input-field--error": "lc-InputField-module__input-field--error___MMchC"
+};
+const baseClass$g = "input-field";
+const InputField = React.forwardRef((_y, ref) => {
+  var _z = _y, {
+    id,
+    labelText,
+    labelAdornment,
+    className,
+    inline,
+    error,
+    description,
+    labelRightNode,
+    fieldClassName,
+    style,
+    type = "text"
+  } = _z, restProps = __objRest(_z, [
+    "id",
+    "labelText",
+    "labelAdornment",
+    "className",
+    "inline",
+    "error",
+    "description",
+    "labelRightNode",
+    "fieldClassName",
+    "style",
+    "type"
+  ]);
+  const mergedClassNames = cx(styles$c[baseClass$g], {
+    [styles$c[`${baseClass$g}--error`]]: error
+  }, fieldClassName);
+  return /* @__PURE__ */ React.createElement(TextField, {
+    inline,
+    error,
+    description,
+    labelText,
+    labelAdornment,
+    className,
+    labelFor: id,
+    labelRightNode
+  }, /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, restProps), {
+    id,
+    ref,
+    className: mergedClassNames,
+    style,
+    type
+  })));
+});
+const link = "lc-Link-module__link___kqx52";
+var styles$b = {
+  link,
+  "link--bold": "lc-Link-module__link--bold___1rGdO"
+};
+const baseClass$f = "link";
+const Link = (_A) => {
+  var _B = _A, {
+    bold = false,
+    className = ""
+  } = _B, rest = __objRest(_B, [
+    "bold",
+    "className"
+  ]);
+  return /* @__PURE__ */ React.createElement("a", __spreadValues({
+    className: cx(styles$b[baseClass$f], bold && styles$b[`${baseClass$f}--bold`], className)
+  }, rest));
+};
+const modal__header = "lc-Modal-module__modal__header___Fp5VE";
+const modal__heading = "lc-Modal-module__modal__heading___G9KVK";
+const modal__body = "lc-Modal-module__modal__body___M-jmN";
+const modal__footer = "lc-Modal-module__modal__footer___2LYdc";
+var styles$a = {
+  "modal-base": "lc-Modal-module__modal-base___hbL1U",
+  "modal-base__overlay": "lc-Modal-module__modal-base__overlay___kCQ8t",
+  "modal-base__overlay--visible": "lc-Modal-module__modal-base__overlay--visible___zUNJL",
+  "modal-base__close": "lc-Modal-module__modal-base__close___gJlgr",
+  modal__header,
+  modal__heading,
+  modal__body,
+  modal__footer,
+  "action-modal": "lc-Modal-module__action-modal___CsRC7",
+  "action-modal__heading": "lc-Modal-module__action-modal__heading___m3MuG",
+  "action-modal__content": "lc-Modal-module__action-modal__content___gf-R2",
+  "action-modal__actions": "lc-Modal-module__action-modal__actions___kpRXD",
+  "action-modal__icon": "lc-Modal-module__action-modal__icon___MK5xt"
+};
+const ModalCloseButton = ({
+  onClick
+}) => /* @__PURE__ */ React.createElement("button", {
+  title: "Close modal",
+  className: styles$a["modal-base__close"],
+  onClick,
+  type: "button"
+}, /* @__PURE__ */ React.createElement(Icon, {
+  source: Close,
+  size: IconSizeName.Large
+}));
+const KeyCodes = {
+  esc: "Escape",
+  enter: "Enter",
+  backspace: "Backspace",
+  delete: "Delete",
+  spacebar: " ",
+  tab: "Tab",
+  semicolon: ";",
+  comma: ",",
+  arrowUp: "ArrowUp",
+  arrowDown: "ArrowDown"
+};
+const baseClass$e = "modal-base";
+const ModalBase = (_C) => {
+  var _D = _C, {
+    children,
+    className = "",
+    onClose,
+    closeOnEscPress = true
+  } = _D, props = __objRest(_D, [
+    "children",
+    "className",
+    "onClose",
+    "closeOnEscPress"
+  ]);
+  const mergedClassNames = cx(styles$a[baseClass$e], className);
+  React.useEffect(() => {
+    if (!closeOnEscPress) {
+      return;
+    }
+    const onKeyUp = (event) => {
+      if (event.key === KeyCodes.esc) {
+        onClose();
+      }
+    };
+    document.addEventListener("keyup", onKeyUp, true);
+    return () => document.removeEventListener("keyup", onKeyUp, true);
+  }, [closeOnEscPress]);
+  const onOverlayClick = (event) => {
+    if (event.target === event.currentTarget) {
+      onClose();
+    }
+  };
+  const onCloseButtonClick = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    onClose();
+  };
+  return /* @__PURE__ */ React.createElement("div", {
+    "data-testid": "lc-modal-overlay",
+    onMouseDown: onOverlayClick,
+    className: cx(styles$a[`${baseClass$e}__overlay`], styles$a[`${baseClass$e}__overlay--visible`])
+  }, /* @__PURE__ */ React.createElement("div", __spreadValues({
+    className: mergedClassNames
+  }, props), /* @__PURE__ */ React.createElement(ModalCloseButton, {
+    onClick: onCloseButtonClick
+  }), children));
+};
+const baseClass$d = "action-modal";
+const ActionModal = (_E) => {
+  var _F = _E, {
+    children,
+    className = "",
+    icon: icon2,
+    heading,
+    actions
+  } = _F, props = __objRest(_F, [
+    "children",
+    "className",
+    "icon",
+    "heading",
+    "actions"
+  ]);
+  const mergedClassNames = cx(styles$a[baseClass$d], className);
+  return /* @__PURE__ */ React.createElement(ModalBase, __spreadValues({
+    className: mergedClassNames
+  }, props), icon2 && /* @__PURE__ */ React.createElement("div", {
+    className: styles$a[`${baseClass$d}__icon`]
+  }, icon2), heading && /* @__PURE__ */ React.createElement("div", {
+    className: styles$a[`${baseClass$d}__heading`]
+  }, heading), /* @__PURE__ */ React.createElement("div", {
+    className: styles$a[`${baseClass$d}__content`]
+  }, children), actions && /* @__PURE__ */ React.createElement("div", {
+    className: styles$a[`${baseClass$d}__actions`]
+  }, actions));
+};
+const baseClass$c = "modal";
+const Modal = (_G) => {
+  var _H = _G, {
+    children,
+    className = "",
+    heading,
+    footer
+  } = _H, props = __objRest(_H, [
+    "children",
+    "className",
+    "heading",
+    "footer"
+  ]);
+  const mergedClassNames = cx(styles$a[baseClass$c], className);
+  return /* @__PURE__ */ React.createElement(ModalBase, __spreadValues({
+    className: mergedClassNames
+  }, props), heading && /* @__PURE__ */ React.createElement("div", {
+    className: styles$a[`${baseClass$c}__header`]
+  }, /* @__PURE__ */ React.createElement(Heading, {
+    size: "sm",
+    as: "div",
+    className: styles$a[`${baseClass$c}__heading`]
+  }, heading)), /* @__PURE__ */ React.createElement("div", {
+    className: styles$a[`${baseClass$c}__body`]
+  }, children), footer && /* @__PURE__ */ React.createElement("div", {
+    className: styles$a[`${baseClass$c}__footer`]
+  }, footer));
+};
+const ModalPortal = ({
+  children,
+  className = "",
+  parentElementName = "body",
+  zIndex
+}) => {
+  const [container] = React.useState(() => document.createElement("div"));
+  if (className) {
+    container.classList.add(className);
+  }
+  if (zIndex) {
+    container.style.zIndex = zIndex.toString();
+  }
+  React.useEffect(() => {
+    var _a;
+    (_a = document.querySelector(parentElementName)) == null ? void 0 : _a.appendChild(container);
+    return () => {
+      var _a2;
+      (_a2 = document.querySelector(parentElementName)) == null ? void 0 : _a2.removeChild(container);
+    };
+  }, []);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, ReactDOM.createPortal(children, container));
+};
+var styles$9 = {
+  "numeric-input": "lc-NumericInput-module__numeric-input___j1esc",
+  "numeric-input__increment": "lc-NumericInput-module__numeric-input__increment___i3Tys",
+  "numeric-input__decrement": "lc-NumericInput-module__numeric-input__decrement___3qgn0",
+  "numeric-input--disabled": "lc-NumericInput-module__numeric-input--disabled___yaRvQ",
+  "numeric-input--no-controls": "lc-NumericInput-module__numeric-input--no-controls___D90rG",
+  "numeric-input--error": "lc-NumericInput-module__numeric-input--error___TMxRx"
+};
+const baseClass$b = "numeric-input";
+const NumericInput = (_I) => {
+  var _J = _I, {
+    className,
+    error,
+    value,
+    max,
+    min,
+    disabled,
+    noControls,
+    style,
+    onChange
+  } = _J, restProps = __objRest(_J, [
+    "className",
+    "error",
+    "value",
+    "max",
+    "min",
+    "disabled",
+    "noControls",
+    "style",
+    "onChange"
+  ]);
+  const inputRef = React.useRef(null);
+  const mergedClassNames = cx(styles$9[baseClass$b], {
+    [styles$9[`${baseClass$b}--error`]]: error,
+    [styles$9[`${baseClass$b}--no-controls`]]: noControls,
+    [styles$9[`${baseClass$b}--disabled`]]: disabled
+  }, className);
+  const callOnChange = (val) => onChange(String(val));
+  const calcValue = (val) => {
+    if (max !== void 0 && val > max) {
+      return max;
+    }
+    if (min !== void 0 && val < min) {
+      return min;
+    }
+    return val;
+  };
+  const updateValue = (val) => {
+    const newValue = parseInt(value, 10) + val;
+    return callOnChange(calcValue(newValue));
+  };
+  const onKeyDown = (e) => {
+    if (e.key === KeyCodes.arrowDown) {
+      e.preventDefault();
+      updateValue(-1);
+    }
+    if (e.key === KeyCodes.arrowUp) {
+      e.preventDefault();
+      updateValue(1);
+    }
+  };
+  const hasReachedTheLimit = (value2, margin) => margin !== void 0 && parseInt(value2, 10) === margin;
+  const handleOnChange = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const inputVal = e.currentTarget.value.replace(/((?!([-]|([-]?\d+))).)/, "");
+    if (inputVal === "" || inputVal === "-") {
+      return callOnChange(inputVal);
+    }
+    const newValue = parseInt(inputVal, 10);
+    return callOnChange(calcValue(newValue));
+  };
+  const handleIncrementClick = () => {
+    var _a;
+    (_a = inputRef.current) == null ? void 0 : _a.focus();
+    return updateValue(1);
+  };
+  const handleDecrementClick = () => {
+    var _a;
+    (_a = inputRef.current) == null ? void 0 : _a.focus();
+    return updateValue(-1);
+  };
+  return /* @__PURE__ */ React.createElement("div", {
+    className: mergedClassNames,
+    style
+  }, /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({
+    type: "text",
+    ref: inputRef
+  }, restProps), {
+    value,
+    disabled,
+    onChange: handleOnChange,
+    onKeyDown,
+    min,
+    max
+  })), !noControls && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("button", {
+    tabIndex: -1,
+    disabled: disabled || hasReachedTheLimit(value, max),
+    onClick: handleIncrementClick,
+    "aria-label": "Increment value",
+    className: styles$9[`${baseClass$b}__increment`],
+    type: "button"
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    source: ChevronUp,
+    disabled: disabled || hasReachedTheLimit(value, max),
+    iconType: IconTypeName.Primary
+  })), /* @__PURE__ */ React.createElement("button", {
+    tabIndex: -1,
+    disabled: disabled || hasReachedTheLimit(value, min),
+    "aria-label": "Decrement value",
+    className: styles$9[`${baseClass$b}__decrement`],
+    onClick: handleDecrementClick,
+    type: "button"
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    source: ChevronDown,
+    iconType: IconTypeName.Primary,
+    disabled: disabled || hasReachedTheLimit(value, min)
+  }))));
+};
+const NumericInputField = (_K) => {
+  var _L = _K, {
+    id,
+    labelText,
+    labelAdornment,
+    className,
+    inline,
+    error,
+    description,
+    labelRightNode,
+    fieldClassName,
+    style
+  } = _L, restProps = __objRest(_L, [
+    "id",
+    "labelText",
+    "labelAdornment",
+    "className",
+    "inline",
+    "error",
+    "description",
+    "labelRightNode",
+    "fieldClassName",
+    "style"
+  ]);
+  return /* @__PURE__ */ React.createElement(TextField, {
+    inline,
+    error,
+    description,
+    labelText,
+    labelAdornment,
+    className,
+    labelFor: id,
+    labelRightNode
+  }, /* @__PURE__ */ React.createElement(NumericInput, __spreadProps(__spreadValues({}, restProps), {
+    id,
+    className: fieldClassName,
+    style,
+    error
+  })));
+};
+const popover = "lc-Popover-module__popover___8X1b2";
+var cssStyles = {
+  popover,
+  "popover--visible": "lc-Popover-module__popover--visible___u5NXB"
+};
+const buildPopperModifiers = (modifiers) => {
+  const { offset, flip, preventOverflow } = modifiers;
+  const calculatedOffset = [
+    {
+      name: "offset",
+      options: __spreadValues({
+        offset: [0, 4]
+      }, (offset == null ? void 0 : offset.options) || {})
+    }
+  ];
+  const calculateFlip = [
+    {
+      name: "flip",
+      options: __spreadValues({}, (flip == null ? void 0 : flip.options) || {})
+    }
+  ];
+  const calculatePreventOverflow = [
+    {
+      name: "preventOverlow",
+      options: __spreadValues({
+        rootBoundary: "viewport"
+      }, preventOverflow || {})
+    }
+  ];
+  return [...calculatedOffset, ...calculateFlip, ...calculatePreventOverflow];
+};
+const Popover = (props) => {
+  const {
+    triggerRenderer,
+    children,
+    className,
+    placement,
+    isVisible = false
+  } = props;
+  const rendererRef = React.useRef(null);
+  const popperRef = React.useRef(null);
+  const [visible, setVisibility] = React.useState(false);
+  React.useEffect(() => {
+    setVisibility(isVisible);
+  }, [isVisible]);
+  function handleDocumentClick(event) {
+    var _a, _b;
+    if ((_a = popperRef.current) == null ? void 0 : _a.contains(event.target)) {
+      return;
+    } else if ((_b = rendererRef.current) == null ? void 0 : _b.contains(event.target)) {
+      setVisibility((prevVisible) => !prevVisible);
+    } else {
+      setVisibility(false);
+    }
+  }
+  const handleHideOnEscape = (event) => {
+    if (event.key === "Escape") {
+      setVisibility(false);
+    }
+  };
+  React.useEffect(() => {
+    document.addEventListener("keydown", handleHideOnEscape);
+    document.addEventListener("mousedown", handleDocumentClick);
+    return () => {
+      document.removeEventListener("keydown", handleHideOnEscape);
+      document.removeEventListener("mousedown", handleDocumentClick);
+    };
+  }, []);
+  const { styles: styles2, attributes } = usePopper(rendererRef.current, popperRef.current, {
+    modifiers: props.modifiers ? buildPopperModifiers(props.modifiers) : [],
+    placement
+  });
+  const mergedClassNames = cx(cssStyles["popover"], className, {
+    [cssStyles["popover--visible"]]: visible
+  });
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
+    ref: rendererRef
+  }, triggerRenderer()), /* @__PURE__ */ React.createElement("div", __spreadValues({
+    ref: popperRef,
+    className: mergedClassNames,
+    style: styles2.popper
+  }, attributes.popper), children));
+};
+var ProgressStatus = /* @__PURE__ */ ((ProgressStatus2) => {
+  ProgressStatus2["Normal"] = "normal";
+  ProgressStatus2["Error"] = "error";
+  ProgressStatus2["Success"] = "success";
+  return ProgressStatus2;
+})(ProgressStatus || {});
+var ProgressSize = /* @__PURE__ */ ((ProgressSize2) => {
+  ProgressSize2["Small"] = "small";
+  ProgressSize2["Medium"] = "medium";
+  ProgressSize2["Large"] = "large";
+  return ProgressSize2;
+})(ProgressSize || {});
+const PROGRESS_STATUSES = [
+  "normal",
+  "error",
+  "success"
+];
+const clampPercentage = (percent) => Math.min(Math.max(percent, 0), 100);
+function getPercentNumber(status, percent = 0) {
+  if (status === ProgressStatus.Error) {
+    return 0;
+  }
+  return clampPercentage(parseInt(percent.toString(), 10));
+}
+function getProgressStatus(status, percent) {
+  if (!PROGRESS_STATUSES.includes(status) && percent >= 100) {
+    return ProgressStatus.Normal;
+  }
+  return status || ProgressStatus.Normal;
+}
+var styles$8 = {
+  "progress-circle": "lc-ProgressCircle-module__progress-circle___NRHCi",
+  "progress-circle--small": "lc-ProgressCircle-module__progress-circle--small___8FVwG",
+  "progress-circle--medium": "lc-ProgressCircle-module__progress-circle--medium___XlzEX",
+  "progress-circle--large": "lc-ProgressCircle-module__progress-circle--large___qxa2y",
+  "progress-circle__bg-line--normal": "lc-ProgressCircle-module__progress-circle__bg-line--normal___nDNwj",
+  "progress-circle__bg-line--success": "lc-ProgressCircle-module__progress-circle__bg-line--success___1aP-O",
+  "progress-circle__bg-line--error": "lc-ProgressCircle-module__progress-circle__bg-line--error___oqMZL",
+  "progress-circle__indicator--normal": "lc-ProgressCircle-module__progress-circle__indicator--normal___0SdkX",
+  "progress-circle__indicator--success": "lc-ProgressCircle-module__progress-circle__indicator--success___fLwRR",
+  "progress-circle__indicator--error": "lc-ProgressCircle-module__progress-circle__indicator--error___nwJS9",
+  "progress-circle--error": "lc-ProgressCircle-module__progress-circle--error___2AA9K",
+  "progress-circle__bg-line": "lc-ProgressCircle-module__progress-circle__bg-line___12YrE",
+  "progress-circle--success": "lc-ProgressCircle-module__progress-circle--success___hH5jv",
+  "progress-circle--normal": "lc-ProgressCircle-module__progress-circle--normal___dFneQ"
+};
+const THICKNESS_FROM_SIZE = {
+  [ProgressSize.Small]: 2,
+  [ProgressSize.Medium]: 3,
+  [ProgressSize.Large]: 4
+};
+const SIZE_VALUE_FROM_SIZE = {
+  [ProgressSize.Small]: 15,
+  [ProgressSize.Medium]: 36,
+  [ProgressSize.Large]: 56
+};
+const baseClass$a = "progress-circle";
+const ProgressCircle = React.forwardRef((_M, ref) => {
+  var _N = _M, {
+    status = ProgressStatus.Normal,
+    percent,
+    className,
+    size = ProgressSize.Medium
+  } = _N, restProps = __objRest(_N, [
+    "status",
+    "percent",
+    "className",
+    "size"
+  ]);
+  const progressStatus = getProgressStatus(status, percent);
+  const percentNumber = getPercentNumber(progressStatus, percent);
+  const thickness = THICKNESS_FROM_SIZE[size];
+  const sizeValue = SIZE_VALUE_FROM_SIZE[size];
+  const mergedClassNames = cx(styles$8[baseClass$a], {
+    [styles$8[`${baseClass$a}--${size}`]]: size,
+    [styles$8[`${baseClass$a}--error`]]: progressStatus === ProgressStatus.Error,
+    [styles$8[`${baseClass$a}--success`]]: progressStatus === ProgressStatus.Success,
+    [styles$8[`${baseClass$a}--normal`]]: progressStatus === ProgressStatus.Normal
+  }, className);
+  const circumference = 2 * Math.PI * ((sizeValue - thickness) / 2);
+  const indicatorStyle = {
+    strokeDasharray: circumference.toFixed(3),
+    strokeDashoffset: `${((100 - percentNumber) / 100 * circumference).toFixed(3)}px`
+  };
+  const svgViewBox = `${sizeValue / 2} ${sizeValue / 2} ${sizeValue} ${sizeValue}`;
+  return /* @__PURE__ */ React.createElement("div", __spreadValues({
+    className: mergedClassNames,
+    ref,
+    role: "progressbar"
+  }, restProps), /* @__PURE__ */ React.createElement("svg", {
+    viewBox: svgViewBox
+  }, /* @__PURE__ */ React.createElement("circle", {
+    className: styles$8[`${baseClass$a}__bg-line--${status}`],
+    cx: sizeValue,
+    cy: sizeValue,
+    r: (sizeValue - thickness) / 2,
+    fill: "none",
+    strokeWidth: thickness
+  }), /* @__PURE__ */ React.createElement("circle", {
+    className: styles$8[`${baseClass$a}__indicator--${status}`],
+    style: indicatorStyle,
+    cx: sizeValue,
+    cy: sizeValue,
+    r: (sizeValue - thickness) / 2,
+    fill: "none",
+    strokeWidth: thickness
+  })));
+});
+var styles$7 = {
+  "promo-banner": "lc-PromoBanner-module__promo-banner___-mGpq",
+  "promo-banner__content": "lc-PromoBanner-module__promo-banner__content___kRWar",
+  "promo-banner__wrapper": "lc-PromoBanner-module__promo-banner__wrapper___I-8cl",
+  "promo-banner__header": "lc-PromoBanner-module__promo-banner__header___ebYHW",
+  "promo-banner__img": "lc-PromoBanner-module__promo-banner__img___eaShb",
+  "promo-banner__button-text": "lc-PromoBanner-module__promo-banner__button-text___taYKa",
+  "promo-banner--light": "lc-PromoBanner-module__promo-banner--light___eJxOR",
+  "promo-banner--small": "lc-PromoBanner-module__promo-banner--small___7sWLV",
+  "promo-banner__footer": "lc-PromoBanner-module__promo-banner__footer___8OjvH",
+  "promo-banner--medium": "lc-PromoBanner-module__promo-banner--medium___NeeoJ",
+  "promo-banner--large": "lc-PromoBanner-module__promo-banner--large___pMiCU",
+  "promo-banner__close-icon": "lc-PromoBanner-module__promo-banner__close-icon___GowBL"
+};
+const baseClass$9 = "promo-banner";
+const PromoBanner = ({
+  className,
+  buttonText,
+  children,
+  header,
+  img,
+  light = false,
+  linkText,
+  size = "small",
+  onButtonClick,
+  onClose,
+  onLinkClick
+}) => {
+  const mergedClassNames = cx(styles$7[baseClass$9], {
+    [styles$7[`${baseClass$9}--light`]]: light,
+    [styles$7[`${baseClass$9}--${size}`]]: size
+  }, className);
+  const shouldRenderLargeFooter = (buttonText || linkText) && size === "large";
+  const shouldRenderSmallOrMediumFooter = (buttonText || linkText) && size !== "large";
+  const footer = /* @__PURE__ */ React.createElement("div", {
+    className: styles$7[`${baseClass$9}__footer`]
+  }, buttonText && /* @__PURE__ */ React.createElement(Button, {
+    kind: "primary",
+    size: "compact",
+    onClick: onButtonClick,
+    className: styles$7[`${baseClass$9}__button-text`]
+  }, buttonText), linkText && /* @__PURE__ */ React.createElement(Button, {
+    size: "compact",
+    kind: "text",
+    onClick: onLinkClick
+  }, linkText));
+  return /* @__PURE__ */ React.createElement("div", {
+    className: mergedClassNames
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: styles$7[`${baseClass$9}__content`]
+  }, img && /* @__PURE__ */ React.createElement("img", {
+    src: img,
+    className: styles$7[`${baseClass$9}__img`]
+  }), /* @__PURE__ */ React.createElement("div", {
+    className: styles$7[`${baseClass$9}__wrapper`]
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: styles$7[`${baseClass$9}__header`]
+  }, header), /* @__PURE__ */ React.createElement("div", null, children), shouldRenderSmallOrMediumFooter && footer), shouldRenderLargeFooter && footer), onClose && /* @__PURE__ */ React.createElement("button", {
+    type: "button",
+    className: styles$7[`${baseClass$9}__close-icon`],
+    onClick: onClose
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    source: Close,
+    size: IconSizeName.Large
+  })));
+};
+var styles$6 = {
+  "radio-button": "lc-RadioButton-module__radio-button___WaToM",
+  "radio-button__label": "lc-RadioButton-module__radio-button__label___i7ygg",
+  "radio-button__circle": "lc-RadioButton-module__radio-button__circle___wimWA",
+  "radio-button__inner-circle": "lc-RadioButton-module__radio-button__inner-circle___qkRVf",
+  "radio-button__text": "lc-RadioButton-module__radio-button__text___mT8c0",
+  "radio-button__input": "lc-RadioButton-module__radio-button__input___7OTAK",
+  "radio-button__helper": "lc-RadioButton-module__radio-button__helper___r8gJJ",
+  "radio-button--selected": "lc-RadioButton-module__radio-button--selected___s9lqj",
+  "radio-button--disabled": "lc-RadioButton-module__radio-button--disabled___wHSA7"
+};
+const baseClass$8 = "radio-button";
+const RadioButton = (_O) => {
+  var _P = _O, {
+    children,
+    className = "",
+    description,
+    checked,
+    disabled
+  } = _P, props = __objRest(_P, [
+    "children",
+    "className",
+    "description",
+    "checked",
+    "disabled"
+  ]);
+  const mergedClassNames = cx(styles$6[baseClass$8], className, {
+    [styles$6[`${baseClass$8}--selected`]]: checked,
+    [styles$6[`${baseClass$8}--disabled`]]: disabled
+  });
+  return /* @__PURE__ */ React.createElement("div", {
+    className: mergedClassNames
+  }, /* @__PURE__ */ React.createElement("label", {
+    className: styles$6[`${baseClass$8}__label`]
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: styles$6[`${baseClass$8}__circle`]
+  }, /* @__PURE__ */ React.createElement("span", {
+    className: styles$6[`${baseClass$8}__inner-circle`]
+  }), /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({
+    className: styles$6[`${baseClass$8}__input`]
+  }, props), {
+    type: "radio",
+    checked,
+    disabled
+  }))), /* @__PURE__ */ React.createElement(Text, {
+    as: "div",
+    size: "md",
+    className: styles$6[`${baseClass$8}__text`]
+  }, children)), description && /* @__PURE__ */ React.createElement(FieldDescription, {
+    className: styles$6[`${baseClass$8}__helper`]
+  }, description));
+};
+const switch__input = "lc-Switch-module__switch__input___NiiOR";
+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--";
+var styles$5 = {
+  "switch": "lc-Switch-module__switch___AaA2k",
+  "switch__track--enabled": "lc-Switch-module__switch__track--enabled___sy4Xl",
+  "switch__track--disabled": "lc-Switch-module__switch__track--disabled___HkDhl",
+  "switch--basic": "lc-Switch-module__switch--basic___jKO4n",
+  "switch--compact": "lc-Switch-module__switch--compact___OGFIX",
+  switch__input,
+  switch__container,
+  switch__track,
+  switch__slider,
+  "switch__slider--basic": "lc-Switch-module__switch__slider--basic___OMKTp",
+  "switch__slider--basic--enabled": "lc-Switch-module__switch__slider--basic--enabled___sh9jo",
+  "switch__slider--basic--disabled": "lc-Switch-module__switch__slider--basic--disabled___GSTO9",
+  "switch__slider--compact": "lc-Switch-module__switch__slider--compact___uZ-lS",
+  "switch__slider--compact--enabled": "lc-Switch-module__switch__slider--compact--enabled___04TFA",
+  "switch__slider--compact--disabled": "lc-Switch-module__switch__slider--compact--disabled___Vqznr"
+};
+const baseClass$7 = "switch";
+const Switch = (_Q) => {
+  var _R = _Q, {
+    className = "",
+    defaultOn = false,
+    disabled = false,
+    name = baseClass$7,
+    on,
+    onChange = noop,
+    size = "basic",
+    innerRef
+  } = _R, props = __objRest(_R, [
+    "className",
+    "defaultOn",
+    "disabled",
+    "name",
+    "on",
+    "onChange",
+    "size",
+    "innerRef"
+  ]);
+  const getEnabledValue = () => {
+    return on !== void 0 ? on : defaultOn;
+  };
+  const [enabled, setEnabled] = React.useState(getEnabledValue());
+  React.useEffect(() => {
+    if (on !== void 0) {
+      setEnabled(on);
+    }
+  }, [on]);
+  const valueStyles = enabled ? "enabled" : "disabled";
+  const mergedClassNames = cx(styles$5[baseClass$7], styles$5[`${baseClass$7}--${size}`], className);
+  const handleChange = (e) => {
+    const hasOnChangePassed = onChange !== noop;
+    if (hasOnChangePassed) {
+      onChange(e, enabled);
+      return;
+    }
+    e.stopPropagation();
+    setEnabled((prevEnabled) => !prevEnabled);
+  };
+  return /* @__PURE__ */ React.createElement("span", {
+    className: mergedClassNames
+  }, /* @__PURE__ */ React.createElement("input", __spreadValues({
+    type: "checkbox",
+    className: styles$5[`${baseClass$7}__input`],
+    onChange: handleChange,
+    checked: enabled,
+    name,
+    ref: innerRef,
+    disabled,
+    "test-id": "foo"
+  }, props)), /* @__PURE__ */ React.createElement("span", {
+    className: styles$5[`${baseClass$7}__container`]
+  }, /* @__PURE__ */ React.createElement("span", {
+    className: cx(styles$5[`${baseClass$7}__track`], styles$5[`${baseClass$7}__track--${valueStyles}`])
+  }), /* @__PURE__ */ React.createElement("span", {
+    className: cx(styles$5[`${baseClass$7}__slider`], styles$5[`${baseClass$7}__slider--${size}`], styles$5[`${baseClass$7}__slider--${size}--${valueStyles}`])
+  })));
+};
+const tab = "lc-Tab-module__tab___fME7u";
+const tab__description = "lc-Tab-module__tab__description___JGXU6";
+var styles$4 = {
+  tab,
+  tab__description,
+  "tab--selected": "lc-Tab-module__tab--selected___c0EkL"
+};
+const baseClass$6 = "tab";
+const Tab = (_S) => {
+  var _T = _S, {
+    children,
+    className,
+    description,
+    isSelected
+  } = _T, restProps = __objRest(_T, [
+    "children",
+    "className",
+    "description",
+    "isSelected"
+  ]);
+  return /* @__PURE__ */ React.createElement(Text, __spreadProps(__spreadValues({}, restProps), {
+    as: restProps.href ? "a" : "button",
+    size: "md",
+    bold: isSelected,
+    className: cx(styles$4[baseClass$6], className, isSelected && styles$4[`${baseClass$6}--selected`])
+  }), children, description && /* @__PURE__ */ React.createElement(Text, {
+    as: "span",
+    size: "md",
+    className: styles$4[`${baseClass$6}__description`]
+  }, "(", description, ")"));
+};
+const tabs = "lc-TabsWrapper-module__tabs___Y2xyD";
+const tabs__list = "lc-TabsWrapper-module__tabs__list___i6tVO";
+var styles$3 = {
+  tabs,
+  tabs__list
+};
+const baseClass$5 = "tabs";
+const TabsWrapper = ({
+  className,
+  children
+}) => {
+  return /* @__PURE__ */ React.createElement("div", {
+    className: cx(styles$3[baseClass$5], className)
+  }, children);
+};
+const TabsList = ({
+  className,
+  children
+}) => {
+  return /* @__PURE__ */ React.createElement("div", {
+    className: cx(styles$3[`${baseClass$5}__list`], className)
+  }, children);
+};
+const tag = "lc-Tag-module__tag___1QRVY";
+const tag__remove = "lc-Tag-module__tag__remove___UmtrW";
+const icon = "lc-Tag-module__icon___2Z-35";
+const tag__icon = "lc-Tag-module__tag__icon___tZoQ9";
+const tag__avatar = "lc-Tag-module__tag__avatar___U4c-P";
+var styles$2 = {
+  tag,
+  "tag--success": "lc-Tag-module__tag--success___P2hXQ",
+  tag__remove,
+  "tag--error": "lc-Tag-module__tag--error___1cjsm",
+  "tag--warning": "lc-Tag-module__tag--warning___PstMG",
+  "tag--info": "lc-Tag-module__tag--info___RTH0C",
+  "tag--medium": "lc-Tag-module__tag--medium___l5-KI",
+  "tag--large": "lc-Tag-module__tag--large___ytC6Y",
+  "tag--outline": "lc-Tag-module__tag--outline___aZXtr",
+  icon,
+  "tag--text-white": "lc-Tag-module__tag--text-white___x0fnD",
+  "tag--text-black": "lc-Tag-module__tag--text-black___dUvmD",
+  "tag--with-icon": "lc-Tag-module__tag--with-icon___ZlkvT",
+  "tag--dismissible": "lc-Tag-module__tag--dismissible___Qobyr",
+  tag__icon,
+  tag__avatar
+};
+const baseClass$4 = "tag";
+const getCustomTextClass = (customColor) => {
+  if (!customColor) {
+    return "";
+  }
+  return getContrast(customColor, "#FFFFFF") > 4.5 ? "text-white" : "text-black";
+};
+const Tag = (_U) => {
+  var _V = _U, {
+    className = "",
+    children,
+    dismissible = false,
+    size = "medium",
+    kind = "default",
+    onRemove,
+    outline = false,
+    icon: icon2,
+    avatar,
+    customColor
+  } = _V, restProps = __objRest(_V, [
+    "className",
+    "children",
+    "dismissible",
+    "size",
+    "kind",
+    "onRemove",
+    "outline",
+    "icon",
+    "avatar",
+    "customColor"
+  ]);
+  const mergedClassNames = cx(styles$2[baseClass$4], className, styles$2[`${baseClass$4}--${size}`], styles$2[`${baseClass$4}--${kind}`], {
+    [styles$2[`${baseClass$4}--dismissible`]]: dismissible,
+    [styles$2[`${baseClass$4}--outline`]]: outline,
+    [styles$2[`${baseClass$4}--with-icon`]]: !!icon2 || !!avatar,
+    [styles$2[`${baseClass$4}--${getCustomTextClass(customColor)}`]]: !!customColor
+  });
+  const getCustomColorStyles = () => {
+    if (!customColor) {
+      return {};
+    }
+    if (outline) {
+      return {
+        style: {
+          backgroundColor: "transparent",
+          color: customColor,
+          borderColor: customColor
+        }
+      };
+    }
+    return { style: { backgroundColor: customColor } };
+  };
+  const getIconCustomColor = () => {
+    if (!customColor) {
+      return void 0;
+    }
+    if (outline) {
+      return customColor;
+    }
+    return getContrast(customColor, "#FFFFFF") > 4.5 ? "#FFFFFF" : "#000000";
+  };
+  return /* @__PURE__ */ React.createElement(Text, __spreadProps(__spreadValues(__spreadValues({
+    className: mergedClassNames
+  }, restProps), getCustomColorStyles()), {
+    as: "div",
+    size: "md"
+  }), avatar && /* @__PURE__ */ React.createElement("img", {
+    className: styles$2[`${baseClass$4}__avatar`],
+    src: avatar,
+    alt: "tag-avatar",
+    "data-testid": "lc-tag-avatar"
+  }), " ", icon2 && !avatar && /* @__PURE__ */ React.createElement(Icon, {
+    "data-testid": "lc-tag-icon",
+    className: styles$2[`${baseClass$4}__icon`],
+    source: icon2,
+    size: IconSizeName.Small,
+    customColor: getIconCustomColor()
+  }), children, dismissible && /* @__PURE__ */ React.createElement("button", {
+    title: "Remove",
+    onClick: onRemove,
+    type: "button",
+    className: styles$2[`${baseClass$4}__remove`]
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    source: Close,
+    size: IconSizeName.Medium,
+    customColor: getIconCustomColor()
+  })));
+};
+const EditableTagContent = ({
+  className = "",
+  innerEditableRef,
+  inputRef,
+  change,
+  remove,
+  value
+}) => {
+  const [removed, setRemoved] = React.useState(false);
+  const getRef = () => innerEditableRef.current;
+  const getValue = () => {
+    const ref = getRef();
+    return ref ? ref.innerText : "";
+  };
+  const focusInputRef = () => {
+    if (inputRef && inputRef.current) {
+      inputRef.current.focus();
+    }
+  };
+  const onKeyDown = (e) => {
+    if (e.key === KeyCodes.enter) {
+      e.preventDefault();
+      focusInputRef();
+      return;
+    }
+    if (e.key === KeyCodes.backspace && getValue() === "") {
+      setRemoved(true);
+      remove();
+      focusInputRef();
+    }
+  };
+  const onBlur = () => {
+    const ref = getRef();
+    if (removed || !ref) {
+      return;
+    }
+    if (ref.innerText === "") {
+      remove();
+      return;
+    }
+    change(ref.innerText);
+  };
+  const onPaste = (e) => {
+    e.preventDefault();
+    const text = e.clipboardData.getData("text/plain");
+    document.execCommand("insertHTML", false, escape(text));
+  };
+  return /* @__PURE__ */ React.createElement("div", {
+    ref: innerEditableRef,
+    className,
+    contentEditable: true,
+    onPaste,
+    onBlur,
+    onKeyDown,
+    dangerouslySetInnerHTML: { __html: escape(value) }
+  });
+};
+var styles$1 = {
+  "tag-input": "lc-TagInput-module__tag-input___CLVY-",
+  "tag-input--error": "lc-TagInput-module__tag-input--error___RP0SB",
+  "tag-input__input": "lc-TagInput-module__tag-input__input___dgEYB",
+  "tag-input__input--medium": "lc-TagInput-module__tag-input__input--medium___DYF7X",
+  "tag-input__input--large": "lc-TagInput-module__tag-input__input--large___G6iEO",
+  "tag-input__tag__content": "lc-TagInput-module__tag-input__tag__content___x95-M"
+};
+const baseClass$3 = "tag-input__tag";
+const EditableTag = ({
+  children,
+  index: index2,
+  remove,
+  validator,
+  inputRef,
+  update,
+  size
+}) => {
+  const isValid = React.useMemo(() => {
+    return validator !== void 0 ? validator(children) : true;
+  }, [children, validator]);
+  const innerEditableRef = React.useRef(null);
+  const removeTag = () => remove(index2);
+  return /* @__PURE__ */ React.createElement(Tag, {
+    kind: isValid ? "default" : "error",
+    dismissible: true,
+    size,
+    onRemove: removeTag
+  }, /* @__PURE__ */ React.createElement(EditableTagContent, {
+    value: children,
+    inputRef,
+    innerEditableRef,
+    className: styles$1[`${baseClass$3}__content`],
+    change: (newValue) => update(index2, newValue),
+    remove: removeTag,
+    validator
+  }));
+};
+const baseClass$2 = "tag-input";
+const tagSeparatorKeys = [
+  KeyCodes.enter,
+  KeyCodes.spacebar,
+  KeyCodes.tab,
+  KeyCodes.semicolon,
+  KeyCodes.comma
+];
+const tagRemoveKeys = [KeyCodes.backspace, KeyCodes.delete];
+const TagInput = ({
+  tags,
+  onChange,
+  validator,
+  error,
+  placeholder,
+  size = "medium"
+}) => {
+  const mergedClassNames = cx(styles$1[baseClass$2], {
+    [styles$1[`${baseClass$2}--error`]]: error
+  });
+  const inputClassNames = cx(styles$1[`${baseClass$2}__input`], styles$1[`${baseClass$2}__input--${size}`]);
+  const [inputValue, setInputValue] = React.useState("");
+  const inputRef = React.useRef(null);
+  const addTag = (value) => {
+    onChange([...tags || [], value]);
+    setInputValue("");
+  };
+  const removeTag = (idx) => {
+    const newTags = [...tags || []];
+    newTags.splice(idx, 1);
+    onChange(newTags);
+  };
+  const onInputChange = (e) => setInputValue(e.target.value);
+  const onInputKeyDown = (e) => {
+    if (tagSeparatorKeys.includes(e.key)) {
+      e.preventDefault();
+      if (inputValue === "") {
+        return;
+      }
+      addTag(inputValue);
+    } else if (tagRemoveKeys.includes(e.key)) {
+      if (inputValue !== "" || !(tags == null ? void 0 : tags.length)) {
+        return;
+      }
+      removeTag(tags.length - 1);
+    }
+  };
+  const updateTag = (i, value) => {
+    const newTags = [...tags || []];
+    const numOccurrencesOfValue = newTags.reduce((prev, currentValue, index2) => prev + (currentValue === value && index2 !== i ? 1 : 0), 0);
+    if (numOccurrencesOfValue > 0) {
+      newTags.splice(i, 1);
+    } else {
+      newTags[i] = value;
+    }
+    onChange(newTags);
+  };
+  const onPaste = (e) => {
+    e.preventDefault();
+    const text = e.clipboardData.getData("text/plain");
+    const newTags = text.split(/[\s,;\n]+/);
+    onChange([...tags || [], ...newTags]);
+  };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
+    className: mergedClassNames
+  }, tags == null ? void 0 : tags.map((tag2, index2) => /* @__PURE__ */ React.createElement(EditableTag, {
+    index: index2,
+    key: `${index2}${tag2}`,
+    update: updateTag,
+    remove: removeTag,
+    inputRef,
+    validator,
+    size
+  }, tag2)), /* @__PURE__ */ React.createElement("input", {
+    ref: inputRef,
+    className: inputClassNames,
+    placeholder,
+    value: inputValue,
+    onChange: onInputChange,
+    onKeyDown: onInputKeyDown,
+    onPaste
+  })), error && /* @__PURE__ */ React.createElement(FieldError, null, error));
+};
+const emailRegex = /^(?:[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;
+const defaultPlaceholder = "name@company.com";
+const emailValidator = (value) => {
+  return emailRegex.test(value);
+};
+const EmailTagInput = ({
+  tags,
+  onChange,
+  error,
+  placeholder = defaultPlaceholder,
+  size
+}) => {
+  return /* @__PURE__ */ React.createElement(TagInput, {
+    tags,
+    error,
+    onChange,
+    placeholder,
+    validator: emailValidator,
+    size
+  });
+};
+const toast = "lc-Toast-module__toast___j5Amn";
+const toast__content = "lc-Toast-module__toast__content___HjaNw";
+const toast__icon = "lc-Toast-module__toast__icon___wLbLu";
+const toast__close = "lc-Toast-module__toast__close___O18Lh";
+const toast__actions = "lc-Toast-module__toast__actions___JWu-1";
+var styles = {
+  toast,
+  toast__content,
+  toast__icon,
+  toast__close,
+  toast__actions,
+  "toast__actions-close": "lc-Toast-module__toast__actions-close___xN8YT",
+  "toast__actions-custom": "lc-Toast-module__toast__actions-custom___z1UUf",
+  "toast--notification": "lc-Toast-module__toast--notification___pDXnc",
+  "toast--success": "lc-Toast-module__toast--success___7UC6m",
+  "toast--warning": "lc-Toast-module__toast--warning___pteb7",
+  "toast--error": "lc-Toast-module__toast--error___trg--",
+  "toast--info": "lc-Toast-module__toast--info___IOp44",
+  "toast-wrapper": "lc-Toast-module__toast-wrapper___Oiwqp",
+  "toast-wrapper--fixed": "lc-Toast-module__toast-wrapper--fixed___QYxRI",
+  "toast-wrapper--block": "lc-Toast-module__toast-wrapper--block___j0kGt",
+  "toast-wrapper--horizontal-center": "lc-Toast-module__toast-wrapper--horizontal-center___t9AFd",
+  "toast-wrapper--horizontal-left": "lc-Toast-module__toast-wrapper--horizontal-left___-GY4I",
+  "toast-wrapper--horizontal-right": "lc-Toast-module__toast-wrapper--horizontal-right___VVMgm",
+  "toast-wrapper--vertical-top": "lc-Toast-module__toast-wrapper--vertical-top___uBfEG",
+  "toast-appear--slide": "lc-Toast-module__toast-appear--slide___G7GAp",
+  "toast-appear-active--slide": "lc-Toast-module__toast-appear-active--slide___brfgK",
+  "toast-exit--slide": "lc-Toast-module__toast-exit--slide___aqiBq",
+  "toast-exit-active--slide": "lc-Toast-module__toast-exit-active--slide___WryMi",
+  "toast-wrapper--vertical-bottom": "lc-Toast-module__toast-wrapper--vertical-bottom___erPuH",
+  "toast-appear--fade": "lc-Toast-module__toast-appear--fade___oUwHm",
+  "toast-appear-active--fade": "lc-Toast-module__toast-appear-active--fade___D3--J",
+  "toast-exit--fade": "lc-Toast-module__toast-exit--fade___iDA1p",
+  "toast-exit-active--fade": "lc-Toast-module__toast-exit-active--fade___tL7sb"
+};
+const baseClass$1 = "toast";
+var Variants = /* @__PURE__ */ ((Variants2) => {
+  Variants2["Success"] = "success";
+  Variants2["Warning"] = "warning";
+  Variants2["Error"] = "error";
+  Variants2["Info"] = "info";
+  Variants2["Notification"] = "notification";
+  return Variants2;
+})(Variants || {});
+const IconConfig = {
+  ["success"]: {
+    source: CheckCircleSolid,
+    iconType: IconTypeName.Inverted
+  },
+  ["warning"]: {
+    source: Warning
+  },
+  ["error"]: {
+    source: Error2,
+    iconType: IconTypeName.Inverted
+  },
+  ["info"]: {
+    source: Info,
+    iconType: IconTypeName.Inverted
+  },
+  ["notification"]: {
+    source: Info,
+    iconType: IconTypeName.Link
+  }
+};
+const Toast = ({
+  action,
+  className,
+  children,
+  removable,
+  variant = "info",
+  onClose
+}) => {
+  const mergedClassNames = cx(styles[baseClass$1], styles[`${baseClass$1}--${variant}`], className);
+  const onActionClick = (action2) => {
+    if (action2 && action2.closeOnClick && onClose) {
+      action2.handler();
+      return onClose();
+    }
+    return action2.handler();
+  };
+  return /* @__PURE__ */ React.createElement("div", {
+    className: mergedClassNames
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: styles[`${baseClass$1}__icon`]
+  }, /* @__PURE__ */ React.createElement(Icon, __spreadValues({}, IconConfig[variant]))), /* @__PURE__ */ React.createElement("div", {
+    className: styles[`${baseClass$1}__content`]
+  }, children), (action || removable) && /* @__PURE__ */ React.createElement("div", {
+    className: styles[`${baseClass$1}__actions`]
+  }, action && /* @__PURE__ */ React.createElement("button", {
+    className: styles[`${baseClass$1}__actions-custom`],
+    onClick: () => onActionClick(action)
+  }, action.label), removable && /* @__PURE__ */ React.createElement("div", {
+    className: styles[`${baseClass$1}__actions-close`],
+    "aria-label": "Close toast",
+    onClick: onClose
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    source: Close,
+    size: IconSizeName.Small,
+    iconType: ["warning", "notification"].includes(variant) ? IconTypeName.Primary : IconTypeName.Inverted
+  }))));
+};
+var HorizontalPosition = /* @__PURE__ */ ((HorizontalPosition2) => {
+  HorizontalPosition2["Left"] = "left";
+  HorizontalPosition2["Center"] = "center";
+  HorizontalPosition2["Right"] = "right";
+  return HorizontalPosition2;
+})(HorizontalPosition || {});
+var VerticalPosition = /* @__PURE__ */ ((VerticalPosition2) => {
+  VerticalPosition2["Top"] = "top";
+  VerticalPosition2["Bottom"] = "bottom";
+  return VerticalPosition2;
+})(VerticalPosition || {});
+const ANIMATION_TIME = 200;
+const baseClass = "toast-wrapper";
+const ToastWrapper = ({
+  className,
+  toasts = [],
+  fixed = true,
+  block = false,
+  animationType = "slide",
+  verticalPosition = "top",
+  horizontalPosition = "center"
+}) => {
+  const mergedClassNames = cx(styles[baseClass], {
+    [styles[`${baseClass}--fixed`]]: fixed,
+    [styles[`${baseClass}--block`]]: !fixed && block,
+    [styles[`${baseClass}--horizontal-${horizontalPosition}`]]: horizontalPosition,
+    [styles[`${baseClass}--vertical-${verticalPosition}`]]: verticalPosition
+  }, className);
+  return /* @__PURE__ */ React.createElement("div", {
+    className: mergedClassNames
+  }, /* @__PURE__ */ React.createElement(TransitionGroup, {
+    component: null
+  }, toasts.map(({ id, variant, content, removable, action, onClose }) => /* @__PURE__ */ React.createElement(CSSTransition, {
+    key: id,
+    classNames: {
+      enter: styles[`toast-appear--${animationType}`],
+      enterActive: styles[`toast-appear-active--${animationType}`],
+      exit: styles[`toast-exit--${animationType}`],
+      exitActive: styles[`toast-exit-active--${animationType}`]
+    },
+    timeout: ANIMATION_TIME
+  }, /* @__PURE__ */ React.createElement(Toast, {
+    variant,
+    onClose,
+    removable,
+    action
+  }, content)))));
+};
+export { ANIMATION_TIME, ActionModal, Alert, Badge, Button, ButtonGroup, Card, Checkbox, CheckboxField, DesignTokens, EmailTagInput, FieldDescription, FieldError, FieldGroup, Form, FormGroup, Heading, HorizontalPosition, Icon, IconSizeName, IconTypeName, InputField, Link, Loader, Modal, ModalBase, ModalCloseButton, ModalPortal, NumericInput, NumericInputField, Popover, ProgressCircle, PromoBanner, RadioButton, Switch, Tab, TabsList, TabsWrapper, Tag, TagInput, Text, TextField, Toast, ToastWrapper, Variants, VerticalPosition };