@livechat/design-system-react-components 1.0.0-alpha.31 → 1.0.0-alpha.32

package/dist/dsrc.es.js

@@ -49,52 +49,141 @@ import { css } from "@emotion/css";
 var index = "";
 const DesignToken = {
   Background: "--background",
+  Background01: "--background-01",
+  Background02: "--background-02",
+  Background03: "--background-03",
   SurfaceBasicDefault: "--surface-basic-default",
+  SurfacePrimaryDefault: "--surface-primary-default",
   SurfaceBasicSubtle: "--surface-basic-subtle",
+  SurfaceSecondaryDefault: "--surface-secondary-default",
+  SurfaceSecondaryHover: "--surface-secondary-hover",
+  SurfaceSecondaryActive: "--surface-secondary-active",
+  SurfaceSecondaryDisabled: "--surface-secondary-disabled",
   SurfaceBasicHover: "--surface-basic-hover",
+  SurfacePrimaryHover: "--surface-primary-hover",
   SurfaceBasicActive: "--surface-basic-active",
+  SurfacePrimaryActive: "--surface-primary-active",
+  SurfacePrimaryActiveColored: "--surface-primary-active-colored",
   SurfaceBasicDisabled: "--surface-basic-disabled",
-  SurfaceSecondaryDefault: "--surface-secondary-default",
+  SurfacePrimaryDisabled: "--surface-primary-disabled",
+  SurfaceTertiaryDefault: "--surface-tertiary-default",
   SurfaceSecondarySubtle: "--surface-secondary-subtle",
-  SurfaceSecondaryHover: "--surface-secondary-hover",
-  SurfaceSecondaryDisabled: "--surface-secondary-disabled",
+  SurfaceModerateDefault: "--surface-moderate-default",
+  SurfaceModerateHover: "--surface-moderate-hover",
+  SurfaceModerateActive: "--surface-moderate-active",
+  SurfaceTertiaryHover: "--surface-tertiary-hover",
+  SurfaceTertiaryActive: "--surface-tertiary-active",
+  SurfaceTertiaryDisabled: "--surface-tertiary-disabled",
   SurfaceFeedbackInfo: "--surface-feedback-info",
+  SurfaceAccentEmphasisLowInfo: "--surface-accent-emphasis-low-info",
   SurfaceFeedbackNegative: "--surface-feedback-negative",
+  SurfaceAccentEmphasisLowNegative: "--surface-accent-emphasis-low-negative",
   SurfaceFeedbackWarning: "--surface-feedback-warning",
+  SurfaceAccentEmphasisLowWarning: "--surface-accent-emphasis-low-warning",
   SurfaceFeedbackPositive: "--surface-feedback-positive",
+  SurfaceAccentEmphasisLowPositive: "--surface-accent-emphasis-low-positive",
+  SurfaceAccentEmphasisLowPurple: "--surface-accent-emphasis-low-purple",
+  SurfaceAccentEmphasisMinInfo: "--surface-accent-emphasis-min-info",
+  SurfaceAccentEmphasisMinNegative: "--surface-accent-emphasis-min-negative",
+  SurfaceAccentEmphasisMinWarning: "--surface-accent-emphasis-min-warning",
+  SurfaceAccentEmphasisMinPositive: "--surface-accent-emphasis-min-positive",
+  SurfaceAccentEmphasisMinPurple: "--surface-accent-emphasis-min-purple",
   SurfaceInvertDefault: "--surface-invert-default",
+  SurfaceInvertPrimary: "--surface-invert-primary",
   SurfaceInvertSubtle: "--surface-invert-subtle",
+  SurfaceInvertSecondary: "--surface-invert-secondary",
   SurfaceInvertDisabled: "--surface-invert-disabled",
+  SurfaceLockedDefault: "--surface-locked-default",
+  SurfaceLockedHover: "--surface-locked-hover",
+  SurfaceLockedActive: "--surface-locked-active",
+  SurfaceLockedDisabled: "--surface-locked-disabled",
+  SurfaceLockedWhite: "--surface-locked-white",
+  SurfaceLockedBlack: "--surface-locked-black",
+  SurfaceAccentEmphasisHighInfo: "--surface-accent-emphasis-high-info",
+  SurfaceAccentEmphasisHighNegative: "--surface-accent-emphasis-high-negative",
+  SurfaceAccentEmphasisHighWarning: "--surface-accent-emphasis-high-warning",
+  SurfaceAccentEmphasisHighPositive: "--surface-accent-emphasis-high-positive",
+  SurfaceAccentEmphasisHighPurple: "--surface-accent-emphasis-high-purple",
   SurfaceOverlay: "--surface-overlay",
+  SurfaceOtherOverlay: "--surface-other-overlay",
+  SurfaceOtherAgent: "--surface-other-agent",
+  SurfaceOtherSkeleton: "--surface-other-skeleton",
   ContentDefault: "--content-default",
+  ContentBasicPrimary: "--content-basic-primary",
   ContentSubtle: "--content-subtle",
+  ContentBasicSecondary: "--content-basic-secondary",
   ContentDisabled: "--content-disabled",
+  ContentBasicDisabled: "--content-basic-disabled",
+  ContentBasicNegative: "--content-basic-negative",
+  ContentBasicWarning: "--content-basic-warning",
+  ContentBasicPositive: "--content-basic-positive",
+  ContentBasicInfo: "--content-basic-info",
+  ContentBasicPurple: "--content-basic-purple",
   ContentWhiteLocked: "--content-white-locked",
+  ContentLockedWhite: "--content-locked-white",
+  ContentBlackLocked: "--content-black-locked",
+  ContentLockedBlack: "--content-locked-black",
+  ContentLockedDefault: "--content-locked-default",
+  ContentLockedHover: "--content-locked-hover",
+  ContentLockedActive: "--content-locked-active",
+  ContentLockedDisabled: "--content-locked-disabled",
   ContentInvertDefault: "--content-invert-default",
+  ContentInvertPrimary: "--content-invert-primary",
   ContentInvertSubtle: "--content-invert-subtle",
+  ContentInvertSecondary: "--content-invert-secondary",
   ContentInvertDisabled: "--content-invert-disabled",
   BorderDefault: "--border-default",
+  BorderBasicPrimary: "--border-basic-primary",
+  BorderBasicSecondary: "--border-basic-secondary",
   BorderSubtle: "--border-subtle",
+  BorderBasicTertiary: "--border-basic-tertiary",
   BorderHover: "--border-hover",
+  BorderBasicHover: "--border-basic-hover",
   BorderDisabled: "--border-disabled",
+  BorderBasicDisabled: "--border-basic-disabled",
+  BorderBasicNegative: "--border-basic-negative",
+  BorderBasicWarning: "--border-basic-warning",
+  BorderBasicPositive: "--border-basic-positive",
+  BorderBasicInfo: "--border-basic-info",
+  BorderBasicPurple: "--border-basic-purple",
   BorderInvertDefault: "--border-invert-default",
+  BorderInvertPrimary: "--border-invert-primary",
   BorderInvertSubtle: "--border-invert-subtle",
+  BorderInvertSecondary: "--border-invert-secondary",
   BorderInvertHover: "--border-invert-hover",
   BorderInvertDisabled: "--border-invert-disabled",
   ColorActionActive: "--color-action-active",
+  ActionPrimaryActive: "--action-primary-active",
   ColorActionHover: "--color-action-hover",
+  ActionPrimaryHover: "--action-primary-hover",
   ColorActionDefault: "--color-action-default",
+  ActionPrimaryDefault: "--action-primary-default",
+  ColorActionDefaultRgb: "--color-action-default-rgb",
   ColorActionDisabled: "--color-action-disabled",
+  ActionPrimaryDisabled: "--action-primary-disabled",
   ColorNegativeActive: "--color-negative-active",
+  ActionNegativeActive: "--action-negative-active",
   ColorNegativeHover: "--color-negative-hover",
+  ActionNegativeHover: "--action-negative-hover",
   ColorNegativeDefault: "--color-negative-default",
+  ActionNegativeDefault: "--action-negative-default",
   ColorNegativeDisabled: "--color-negative-disabled",
+  ActionNegativeDisabled: "--action-negative-disabled",
   ColorWarningDefault: "--color-warning-default",
+  ActionWarningDefault: "--action-warning-default",
   ColorWarningHover: "--color-warning-hover",
+  ActionWarningHover: "--action-warning-hover",
   ColorPositiveDefault: "--color-positive-default",
+  ActionPositiveDefault: "--action-positive-default",
   ColorPositiveHover: "--color-positive-hover",
+  ActionPositiveHover: "--action-positive-hover",
   ColorPositiveDisabled: "--color-positive-disabled",
+  ActionPositiveDisabled: "--action-positive-disabled",
+  ActionNeutralDefault: "--action-neutral-default",
+  ActionNeutralHover: "--action-neutral-hover",
+  ActionNeutralDisabled: "--action-neutral-disabled",
   ColorBot: "--color-bot",
+  SurfaceOtherBot: "--surface-other-bot",
   ColorBlack: "--color-black",
   ColorWhite: "--color-white",
   DecorBlue900: "--decor-blue900",
@@ -171,7 +260,16 @@ const DesignToken = {
   DecorPurple300: "--decor-purple300",
   DecorPurple200: "--decor-purple200",
   DecorPurple100: "--decor-purple100",
-  DecorPurple50: "--decor-purple50"
+  DecorPurple50: "--decor-purple50",
+  ProductsLivechat: "--products-livechat",
+  ProductsHelpdesk: "--products-helpdesk",
+  ProductsChatbot: "--products-chatbot",
+  ProductsKnowledgebase: "--products-knowledgebase",
+  IllustrationsPrimary: "--illustrations-primary",
+  IllustrationsSecondary: "--illustrations-secondary",
+  IllustrationsStroke: "--illustrations-stroke",
+  TagSurface01: "--tag-surface-01",
+  TagContent01: "--tag-content-01"
 };
 const SpacingToken = {
   Spacing0: "--spacing-0",
@@ -305,7 +403,7 @@ const IconSizeMap = {
     height: 32
   }
 };
-const baseClass$N = "icon";
+const baseClass$M = "icon";
 const Icon = (props) => {
   const _a = props, {
     source,
@@ -325,7 +423,7 @@ const Icon = (props) => {
   const GeneratedIcon = React.createElement(source, __spreadProps(__spreadValues({}, IconSizeMap[size]), {
     color: customColor
   }));
-  const mergedClassNames = cx(className, styles$D[baseClass$N], kind && styles$D[`${baseClass$N}--${disabled ? "disabled--" : ""}${kind}`]);
+  const mergedClassNames = cx(className, styles$D[baseClass$M], kind && styles$D[`${baseClass$M}--${disabled ? "disabled--" : ""}${kind}`]);
   return /* @__PURE__ */ React.createElement("span", __spreadProps(__spreadValues({}, restProps), {
     className: mergedClassNames
   }), GeneratedIcon);
@@ -365,7 +463,7 @@ const IconConfig = {
     kind: "error"
   }
 };
-const baseClass$M = "alert";
+const baseClass$L = "alert";
 const Alert = (_e) => {
   var _f = _e, {
     children,
@@ -380,7 +478,7 @@ const Alert = (_e) => {
   ]);
   const containerRef = React.useRef(null);
   const [isSmallContainer, setIsSmallContainer] = React.useState(false);
-  const mergedClassNames = cx(styles$C[baseClass$M], styles$C[`${baseClass$M}--${kind}`], isSmallContainer && styles$C[`${baseClass$M}--small`], className);
+  const mergedClassNames = cx(styles$C[baseClass$L], styles$C[`${baseClass$L}--${kind}`], isSmallContainer && styles$C[`${baseClass$L}--small`], className);
   React.useEffect(() => {
     const handleResize = debounce(() => {
       if (containerRef.current && containerRef.current.offsetWidth <= 400) {
@@ -395,16 +493,16 @@ const Alert = (_e) => {
     ref: containerRef,
     className: mergedClassNames
   }, props), /* @__PURE__ */ React.createElement("div", {
-    className: styles$C[`${baseClass$M}__content`]
+    className: styles$C[`${baseClass$L}__content`]
   }, /* @__PURE__ */ React.createElement(Icon, __spreadProps(__spreadValues({}, IconConfig[kind]), {
     size: "large",
-    className: styles$C[`${baseClass$M}__content-icon`]
+    className: styles$C[`${baseClass$L}__content-icon`]
   })), /* @__PURE__ */ React.createElement(Text, {
     as: "div",
-    className: cx(styles$C[`${baseClass$M}__content-text`], onClose && styles$C[`${baseClass$M}__content-text--margin`])
+    className: cx(styles$C[`${baseClass$L}__content-text`], onClose && styles$C[`${baseClass$L}__content-text--margin`])
   }, children)), onClose && /* @__PURE__ */ React.createElement("button", {
     type: "button",
-    className: styles$C[`${baseClass$M}__close-icon`],
+    className: styles$C[`${baseClass$L}__close-icon`],
     onClick: onClose
   }, /* @__PURE__ */ React.createElement(Icon, {
     source: Close,
@@ -468,7 +566,7 @@ var styles$B = {
   "avatar--xlarge": "lc-Avatar-module__avatar--xlarge___zwgeW",
   "avatar--xxlarge": "lc-Avatar-module__avatar--xxlarge___Ur0ul"
 };
-const baseClass$L = "avatar";
+const baseClass$K = "avatar";
 const defaultBackgroundColor = "var(--surface-basic-disabled)";
 const defaultFontColor = "var(--content-subtle)";
 const Avatar = ({
@@ -492,15 +590,15 @@ const Avatar = ({
   const backgroundColor = color || defaultBackgroundColor;
   const fontColor = color ? getFontColor(color) : defaultFontColor;
   const mergedClassNames = cx({
-    [styles$B[baseClass$L]]: true,
-    [styles$B[`${baseClass$L}--${shape}`]]: true,
-    [styles$B[`${baseClass$L}--${size}`]]: true,
-    [styles$B[`${baseClass$L}--with-rim`]]: withRim,
+    [styles$B[baseClass$K]]: true,
+    [styles$B[`${baseClass$K}--${shape}`]]: true,
+    [styles$B[`${baseClass$K}--${size}`]]: true,
+    [styles$B[`${baseClass$K}--with-rim`]]: withRim,
     [`${className}`]: className
   });
-  const mergedStatusClassNames = cx(styles$B[`${baseClass$L}__status`], styles$B[`${baseClass$L}__status--${shape}`], styles$B[`${baseClass$L}__status--${size}`], styles$B[`${baseClass$L}__status--${status}`]);
-  const mergedIconClassNames = cx(styles$B[`${baseClass$L}__icon`], styles$B[`${baseClass$L}__icon--${size}`]);
-  const mergedRimClassNames = cx(styles$B[`${baseClass$L}__rim`], styles$B[`${baseClass$L}__rim--${size}`]);
+  const mergedStatusClassNames = cx(styles$B[`${baseClass$K}__status`], styles$B[`${baseClass$K}__status--${shape}`], styles$B[`${baseClass$K}__status--${size}`], styles$B[`${baseClass$K}__status--${status}`]);
+  const mergedIconClassNames = cx(styles$B[`${baseClass$K}__icon`], styles$B[`${baseClass$K}__icon--${size}`]);
+  const mergedRimClassNames = cx(styles$B[`${baseClass$K}__rim`], styles$B[`${baseClass$K}__rim--${size}`]);
   const handleError = React.useCallback(() => setShouldDisplayFallbackAvatar(true), []);
   React.useEffect(() => {
     setShouldDisplayFallbackAvatar(isImproperImageSetup);
@@ -509,20 +607,20 @@ const Avatar = ({
     className: mergedClassNames,
     style: { backgroundColor }
   }, withRim && /* @__PURE__ */ React.createElement("div", {
-    "data-testid": `${baseClass$L}__rim`,
+    "data-testid": `${baseClass$K}__rim`,
     className: mergedRimClassNames
   }), status && /* @__PURE__ */ React.createElement("div", {
-    "data-testid": `${baseClass$L}__status`,
+    "data-testid": `${baseClass$K}__status`,
     className: mergedStatusClassNames
   }), shouldDisplayImage && /* @__PURE__ */ React.createElement("img", {
-    className: styles$B[`${baseClass$L}__image`],
+    className: styles$B[`${baseClass$K}__image`],
     src,
     alt,
     onError: handleError
   }), shouldDisplayInitials && /* @__PURE__ */ React.createElement("span", {
     style: { color: fontColor }
   }, initials), shouldDisplayFallbackAvatar && /* @__PURE__ */ React.createElement(Icon, {
-    "data-testid": `${baseClass$L}__icon`,
+    "data-testid": `${baseClass$K}__icon`,
     className: mergedIconClassNames,
     source: Person,
     kind: "primary"
@@ -543,7 +641,7 @@ var styles$A = {
 function formatCount(count, max) {
   return count > max ? `${max}+` : `${count}`;
 }
-const baseClass$K = "badge";
+const baseClass$J = "badge";
 const Badge = (_g) => {
   var _h = _g, {
     className,
@@ -560,12 +658,12 @@ const Badge = (_g) => {
     "size",
     "type"
   ]);
-  const mergedClassNames = cx(className, styles$A[baseClass$K], styles$A[`${baseClass$K}--${kind}`], styles$A[`${baseClass$K}--${size}`]);
+  const mergedClassNames = cx(className, styles$A[baseClass$J], styles$A[`${baseClass$J}--${kind}`], styles$A[`${baseClass$J}--${size}`]);
   const content = {
     ["counter"]: formatCount(count, max),
     ["alert"]: "!",
     ["dot"]: /* @__PURE__ */ React.createElement("span", {
-      className: styles$A[`${baseClass$K}__dot`]
+      className: styles$A[`${baseClass$J}__dot`]
     })
   }[type];
   return /* @__PURE__ */ React.createElement("span", __spreadValues({
@@ -586,8 +684,8 @@ var styles$z = {
   rotate,
   loader__label
 };
-const baseClass$J = "loader";
-const spinnerClass = `${baseClass$J}__spinner`;
+const baseClass$I = "loader";
+const spinnerClass = `${baseClass$I}__spinner`;
 const Loader = ({
   primaryColor,
   secondaryColor,
@@ -596,7 +694,7 @@ const Loader = ({
   size = "medium"
 }) => {
   return /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$z[baseClass$J], className)
+    className: cx(styles$z[baseClass$I], className)
   }, /* @__PURE__ */ React.createElement("div", {
     className: cx(styles$z[spinnerClass], styles$z[`${spinnerClass}--${size}`])
   }, /* @__PURE__ */ React.createElement("div", {
@@ -636,7 +734,7 @@ var styles$y = {
   btn__content,
   btn__icon
 };
-const baseClass$I = "btn";
+const baseClass$H = "btn";
 const Button = (_i) => {
   var _j = _i, {
     loading = false,
@@ -669,11 +767,11 @@ const Button = (_i) => {
   ]);
   const isDisabled = loading || disabled;
   const Component = href ? "a" : "button";
-  const mergedClassNames = cx(className, styles$y[baseClass$I], styles$y[`${baseClass$I}--${kind}`], styles$y[`${baseClass$I}--${size}`], {
-    [styles$y[`${baseClass$I}--loading`]]: loading,
-    [styles$y[`${baseClass$I}--full-width`]]: fullWidth,
-    [styles$y[`${baseClass$I}--icon-only`]]: !children && icon2,
-    [styles$y[`${baseClass$I}--disabled`]]: isDisabled
+  const mergedClassNames = cx(className, styles$y[baseClass$H], styles$y[`${baseClass$H}--${kind}`], styles$y[`${baseClass$H}--${size}`], {
+    [styles$y[`${baseClass$H}--loading`]]: loading,
+    [styles$y[`${baseClass$H}--full-width`]]: fullWidth,
+    [styles$y[`${baseClass$H}--icon-only`]]: !children && icon2,
+    [styles$y[`${baseClass$H}--disabled`]]: isDisabled
   });
   return /* @__PURE__ */ React.createElement(Component, __spreadValues({
     className: mergedClassNames,
@@ -684,12 +782,12 @@ const Button = (_i) => {
   }, props), loading && /* @__PURE__ */ React.createElement(Loader, {
     size: "small",
     label: loaderLabel,
-    className: styles$y[`${baseClass$I}__loader`]
+    className: styles$y[`${baseClass$H}__loader`]
   }), icon2 && React.cloneElement(icon2, {
-    className: cx(styles$y[`${baseClass$I}__icon`], styles$y[`${baseClass$I}__icon--${iconPosition}`]),
+    className: cx(styles$y[`${baseClass$H}__icon`], styles$y[`${baseClass$H}__icon--${iconPosition}`]),
     disabled
   }), /* @__PURE__ */ React.createElement("div", {
-    className: styles$y[`${baseClass$I}__content`]
+    className: styles$y[`${baseClass$H}__content`]
   }, children));
 };
 const btn = "lc-SegmentedControl-module__btn___tfsvL";
@@ -703,7 +801,7 @@ var styles$x = {
 };
 function noop() {
 }
-const baseClass$H = "segmented-control";
+const baseClass$G = "segmented-control";
 const SegmentedControl = ({
   size = "medium",
   buttons,
@@ -713,7 +811,7 @@ const SegmentedControl = ({
   fullWidth = false,
   onButtonClick = noop
 }) => {
-  const mergedClassName = cx(styles$x[baseClass$H], className);
+  const mergedClassName = cx(styles$x[baseClass$G], className);
   const [currentStateId, setCurrentStateId] = React.useState(() => initialId);
   const isControlled = typeof currentId === "string";
   React.useEffect(() => {
@@ -773,10 +871,10 @@ var styles$w = {
   card__actions__buttons,
   "card__actions__buttons-expander": "lc-Card-module__card__actions__buttons-expander___lz4h-"
 };
-const baseClass$G = "card";
-const headerClass = `${baseClass$G}__header`;
+const baseClass$F = "card";
+const headerClass = `${baseClass$F}__header`;
 const headingClass = `${headerClass}__heading`;
-const actionsClass = `${baseClass$G}__actions`;
+const actionsClass = `${baseClass$F}__actions`;
 const noImageClass = `${headerClass}__no-image`;
 const Card = (_k) => {
   var _l = _k, {
@@ -808,7 +906,7 @@ const Card = (_k) => {
   const isImageAvailable = src;
   const noImageAvailable = isImageAvailable ? "" : styles$w[noImageClass];
   return /* @__PURE__ */ React.createElement("div", __spreadValues({
-    className: cx(styles$w[baseClass$G], className)
+    className: cx(styles$w[baseClass$F], className)
   }, divProps), isTitleAvailable && /* @__PURE__ */ React.createElement("div", {
     className: cx(styles$w[headerClass], noImageAvailable)
   }, isImageAvailable && /* @__PURE__ */ React.createElement("img", {
@@ -826,11 +924,11 @@ const Card = (_k) => {
   }, description))), /* @__PURE__ */ React.createElement(Text, {
     as: "div",
     size: "md",
-    className: styles$w[`${baseClass$G}__content`]
+    className: styles$w[`${baseClass$F}__content`]
   }, children), isExpanded && /* @__PURE__ */ React.createElement(Text, {
     as: "div",
     size: "md",
-    className: styles$w[`${baseClass$G}__expanded-content`]
+    className: styles$w[`${baseClass$F}__expanded-content`]
   }, expandableContent), shouldShowActions && /* @__PURE__ */ React.createElement("div", {
     className: styles$w[actionsClass]
   }, /* @__PURE__ */ React.createElement("div", {
@@ -854,7 +952,7 @@ const Card = (_k) => {
 var styles$v = {
   "field-description": "lc-FieldDescription-module__field-description___IcRDH"
 };
-const baseClass$F = "field-description";
+const baseClass$E = "field-description";
 const FieldDescription = (_m) => {
   var _n = _m, {
     children,
@@ -863,7 +961,7 @@ const FieldDescription = (_m) => {
     "children",
     "className"
   ]);
-  const mergedClassNames = cx(styles$v[baseClass$F], className);
+  const mergedClassNames = cx(styles$v[baseClass$E], className);
   return /* @__PURE__ */ React.createElement(Text, __spreadProps(__spreadValues({
     as: "span",
     size: "sm"
@@ -889,35 +987,35 @@ var styles$u = {
   "checkbox--disabled": "lc-Checkbox-module__checkbox--disabled___-lAqW",
   checkbox__helper
 };
-const baseClass$E = "checkbox";
+const baseClass$D = "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$u[baseClass$E], className, {
-      [styles$u[`${baseClass$E}--selected`]]: checked,
-      [styles$u[`${baseClass$E}--disabled`]]: disabled
+    className: cx(styles$u[baseClass$D], className, {
+      [styles$u[`${baseClass$D}--selected`]]: checked,
+      [styles$u[`${baseClass$D}--disabled`]]: disabled
     })
   }, /* @__PURE__ */ React.createElement("label", {
-    className: styles$u[`${baseClass$E}__label`]
+    className: styles$u[`${baseClass$D}__label`]
   }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, restInputProps), {
     ref,
     checked,
     disabled,
-    className: styles$u[`${baseClass$E}__input`],
+    className: styles$u[`${baseClass$D}__input`],
     type: "checkbox"
   })), /* @__PURE__ */ React.createElement("div", {
-    className: styles$u[`${baseClass$E}__square`]
+    className: styles$u[`${baseClass$D}__square`]
   }, /* @__PURE__ */ React.createElement(Icon, {
     source: Check,
     kind: "inverted",
     size: "xsmall",
-    className: styles$u[`${baseClass$E}__checkmark`]
+    className: styles$u[`${baseClass$D}__checkmark`]
   }))), children && /* @__PURE__ */ React.createElement(Text, {
     as: "div",
     size: "md",
-    className: styles$u[`${baseClass$E}__text`]
+    className: styles$u[`${baseClass$D}__text`]
   }, children)), description && /* @__PURE__ */ React.createElement(FieldDescription, {
-    className: styles$u[`${baseClass$E}__helper`]
+    className: styles$u[`${baseClass$D}__helper`]
   }, description));
 });
 var styles$t = {
@@ -956,7 +1054,7 @@ var styles$t = {
   "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$D = "date-picker";
+const baseClass$C = "date-picker";
 const DatePickerNavbar = (props) => {
   const {
     onPreviousClick,
@@ -1005,7 +1103,7 @@ const DatePickerNavbar = (props) => {
   return /* @__PURE__ */ React.createElement("div", {
     className
   }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$t[`${baseClass$D}__navbar-buttons-wrapper`]
+    className: styles$t[`${baseClass$C}__navbar-buttons-wrapper`]
   }, /* @__PURE__ */ React.createElement("button", {
     "data-testid": "date-picker-prev-year-button",
     className: cx({
@@ -1027,7 +1125,7 @@ const DatePickerNavbar = (props) => {
     source: ChevronLeft,
     kind: "subtle"
   }))), /* @__PURE__ */ React.createElement("div", {
-    className: styles$t[`${baseClass$D}__navbar-buttons-wrapper`]
+    className: styles$t[`${baseClass$C}__navbar-buttons-wrapper`]
   }, /* @__PURE__ */ React.createElement("button", {
     "data-testid": "date-picker-next-month-button",
     className: cx({
@@ -1050,7 +1148,7 @@ const DatePickerNavbar = (props) => {
     kind: "subtle"
   }))));
 };
-const baseClass$C = "date-picker";
+const baseClass$B = "date-picker";
 const isDateWithinRange = (date, range) => {
   const { from, to } = range;
   if (to && !isSameDay(date, to) && isAfter(date, to)) {
@@ -1073,22 +1171,22 @@ const calculateDatePickerMonth = (initialFromDate, initialToDate, toMonth) => {
 };
 const getRangeDatePickerModifiers = (from, to) => {
   const base = {
-    [styles$t[`${baseClass$C}__day--monday`]]: { daysOfWeek: [1] },
-    [styles$t[`${baseClass$C}__day--sunday`]]: { daysOfWeek: [0] },
-    [styles$t[`${baseClass$C}__day--start`]]: from,
-    [styles$t[`${baseClass$C}__day--end`]]: from
+    [styles$t[`${baseClass$B}__day--monday`]]: { daysOfWeek: [1] },
+    [styles$t[`${baseClass$B}__day--sunday`]]: { daysOfWeek: [0] },
+    [styles$t[`${baseClass$B}__day--start`]]: from,
+    [styles$t[`${baseClass$B}__day--end`]]: from
   };
   if (!to || !from)
     return base;
   const diff = differenceInCalendarDays(to, from);
   if (diff > 0) {
     return __spreadProps(__spreadValues({}, base), {
-      [styles$t[`${baseClass$C}__day--end`]]: to
+      [styles$t[`${baseClass$B}__day--end`]]: to
     });
   }
   if (diff < 0) {
     return __spreadProps(__spreadValues({}, base), {
-      [styles$t[`${baseClass$C}__day--start`]]: to
+      [styles$t[`${baseClass$B}__day--start`]]: to
     });
   }
   return base;
@@ -1127,41 +1225,41 @@ const getInitialStateFromProps = (props) => {
 };
 const getDatePickerClassNames = (range, classNames) => __spreadValues({
   container: cx({
-    [styles$t[`${baseClass$C}`]]: true,
-    [styles$t[`${baseClass$C}--range`]]: range
+    [styles$t[`${baseClass$B}`]]: true,
+    [styles$t[`${baseClass$B}--range`]]: range
   }),
-  wrapper: styles$t[`${baseClass$C}__wrapper`],
-  interactionDisabled: styles$t[`${baseClass$C}--interaction-disabled`],
-  months: styles$t[`${baseClass$C}__months`],
-  month: styles$t[`${baseClass$C}__month`],
-  navBar: styles$t[`${baseClass$C}__nav-bar`],
-  navButtonPrev: cx(styles$t[`${baseClass$C}__nav-button`], styles$t[`${baseClass$C}__nav-button--prev`]),
-  navButtonNext: cx(styles$t[`${baseClass$C}__nav-button`], styles$t[`${baseClass$C}__nav-button--next`]),
-  navButtonInteractionDisabled: styles$t[`${baseClass$C}__nav-button--interaction-disabled`],
-  caption: styles$t[`${baseClass$C}__caption`],
-  weekdays: styles$t[`${baseClass$C}__weekdays`],
-  weekdaysRow: styles$t[`${baseClass$C}__weekdays-row`],
-  weekday: styles$t[`${baseClass$C}__weekday`],
-  body: styles$t[`${baseClass$C}__body`],
-  week: styles$t[`${baseClass$C}__week`],
-  weekNumber: styles$t[`${baseClass$C}__week-number`],
-  day: styles$t[`${baseClass$C}__day`],
-  footer: styles$t[`${baseClass$C}__footer`],
-  todayButton: styles$t[`${baseClass$C}__today-button`],
-  today: styles$t[`${baseClass$C}__day--today`],
-  selected: styles$t[`${baseClass$C}__day--selected`],
-  disabled: styles$t[`${baseClass$C}__day--disabled`],
-  outside: styles$t[`${baseClass$C}__day--outside`],
-  start: styles$t[`${baseClass$C}__day--start`],
-  end: styles$t[`${baseClass$C}__day--end`]
+  wrapper: styles$t[`${baseClass$B}__wrapper`],
+  interactionDisabled: styles$t[`${baseClass$B}--interaction-disabled`],
+  months: styles$t[`${baseClass$B}__months`],
+  month: styles$t[`${baseClass$B}__month`],
+  navBar: styles$t[`${baseClass$B}__nav-bar`],
+  navButtonPrev: cx(styles$t[`${baseClass$B}__nav-button`], styles$t[`${baseClass$B}__nav-button--prev`]),
+  navButtonNext: cx(styles$t[`${baseClass$B}__nav-button`], styles$t[`${baseClass$B}__nav-button--next`]),
+  navButtonInteractionDisabled: styles$t[`${baseClass$B}__nav-button--interaction-disabled`],
+  caption: styles$t[`${baseClass$B}__caption`],
+  weekdays: styles$t[`${baseClass$B}__weekdays`],
+  weekdaysRow: styles$t[`${baseClass$B}__weekdays-row`],
+  weekday: styles$t[`${baseClass$B}__weekday`],
+  body: styles$t[`${baseClass$B}__body`],
+  week: styles$t[`${baseClass$B}__week`],
+  weekNumber: styles$t[`${baseClass$B}__week-number`],
+  day: styles$t[`${baseClass$B}__day`],
+  footer: styles$t[`${baseClass$B}__footer`],
+  todayButton: styles$t[`${baseClass$B}__today-button`],
+  today: styles$t[`${baseClass$B}__day--today`],
+  selected: styles$t[`${baseClass$B}__day--selected`],
+  disabled: styles$t[`${baseClass$B}__day--disabled`],
+  outside: styles$t[`${baseClass$B}__day--outside`],
+  start: styles$t[`${baseClass$B}__day--start`],
+  end: styles$t[`${baseClass$B}__day--end`]
 }, classNames);
-const baseClass$B = "date-picker";
+const baseClass$A = "date-picker";
 const defaultDayRenderer = (day) => {
   const date = day.getDate();
   return /* @__PURE__ */ React.createElement("div", {
-    className: styles$t[`${baseClass$B}__day-wrapper`]
+    className: styles$t[`${baseClass$A}__day-wrapper`]
   }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$t[`${baseClass$B}__day-content`]
+    className: styles$t[`${baseClass$A}__day-content`]
   }, date));
 };
 const DatePickerComponent = (props) => {
@@ -1485,7 +1583,7 @@ RangeDatePicker.defaultProps = {
 var styles$s = {
   "field-error": "lc-FieldError-module__field-error___IDkPT"
 };
-const baseClass$A = "field-error";
+const baseClass$z = "field-error";
 const FieldError = (_q) => {
   var _r = _q, {
     children,
@@ -1494,7 +1592,7 @@ const FieldError = (_q) => {
     "children",
     "className"
   ]);
-  const mergedClassNames = cx(styles$s[baseClass$A], className);
+  const mergedClassNames = cx(styles$s[baseClass$z], className);
   return /* @__PURE__ */ React.createElement(Text, __spreadProps(__spreadValues({
     as: "span",
     size: "sm"
@@ -1507,7 +1605,7 @@ var styles$r = {
   "field-group--inline": "lc-FieldGroup-module__field-group--inline___or4qf",
   "field-group--stretched": "lc-FieldGroup-module__field-group--stretched___6rkuO"
 };
-const baseClass$z = "field-group";
+const baseClass$y = "field-group";
 const FieldGroup = (_s) => {
   var _t = _s, {
     className = "",
@@ -1524,9 +1622,9 @@ const FieldGroup = (_s) => {
     "inline",
     "stretch"
   ]);
-  const mergedClassNames = cx(styles$r[baseClass$z], className, {
-    [styles$r[`${baseClass$z}--inline`]]: inline,
-    [styles$r[`${baseClass$z}--stretched`]]: stretch
+  const mergedClassNames = cx(styles$r[baseClass$y], className, {
+    [styles$r[`${baseClass$y}--inline`]]: inline,
+    [styles$r[`${baseClass$y}--stretched`]]: stretch
   });
   return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, props), {
     className: mergedClassNames
@@ -1544,7 +1642,7 @@ var styles$q = {
   form__label,
   form__helper
 };
-const baseClass$y = "form";
+const baseClass$x = "form";
 const Form = (_u) => {
   var _v = _u, {
     className,
@@ -1560,18 +1658,18 @@ const Form = (_u) => {
     "formFooter"
   ]);
   return /* @__PURE__ */ React.createElement("form", __spreadValues({
-    className: cx(styles$q[baseClass$y], className)
+    className: cx(styles$q[baseClass$x], className)
   }, restProps), (labelText || helperText) && /* @__PURE__ */ React.createElement("div", {
-    className: styles$q[`${baseClass$y}__header`]
+    className: styles$q[`${baseClass$x}__header`]
   }, labelText && /* @__PURE__ */ React.createElement(Heading, {
     size: "sm",
-    className: styles$q[`${baseClass$y}__label`]
+    className: styles$q[`${baseClass$x}__label`]
   }, labelText), helperText && /* @__PURE__ */ React.createElement(Text, {
     as: "p",
     size: "sm",
-    className: styles$q[`${baseClass$y}__helper`]
+    className: styles$q[`${baseClass$x}__helper`]
   }, helperText)), children, formFooter && /* @__PURE__ */ React.createElement("div", {
-    className: styles$q[`${baseClass$y}__footer`]
+    className: styles$q[`${baseClass$x}__footer`]
   }, formFooter));
 };
 var styles$p = {
@@ -1589,7 +1687,7 @@ var styles$p = {
   "form-field__row-break": "lc-FormField-module__form-field__row-break___DCBjC",
   "form-field__content": "lc-FormField-module__form-field__content___XaOx3"
 };
-const baseClass$x = "form-field";
+const baseClass$w = "form-field";
 const FormField = ({
   inline,
   error,
@@ -1601,33 +1699,33 @@ const FormField = ({
   children,
   labelRightNode
 }) => {
-  const mergedClassNames = cx(styles$p[baseClass$x], {
-    [styles$p[`${baseClass$x}--inline`]]: inline
+  const mergedClassNames = cx(styles$p[baseClass$w], {
+    [styles$p[`${baseClass$w}--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$p[`${baseClass$x}__label-right-node`], styles$p[`${baseClass$x}__label-right-node--inline`])
+    className: cx(styles$p[`${baseClass$w}__label-right-node`], styles$p[`${baseClass$w}__label-right-node--inline`])
   }, labelRightNode), /* @__PURE__ */ React.createElement("div", {
-    className: styles$p[`${baseClass$x}__row-break`]
+    className: styles$p[`${baseClass$w}__row-break`]
   })), /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$p[`${baseClass$x}__wrapper`], inline && styles$p[`${baseClass$x}__wrapper--inline`])
+    className: cx(styles$p[`${baseClass$w}__wrapper`], inline && styles$p[`${baseClass$w}__wrapper--inline`])
   }, (labelText || labelRightNode) && /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$p[`${baseClass$x}__label`], inline && styles$p[`${baseClass$x}__label--inline`], !labelText && styles$p[`${baseClass$x}__label--no-text`])
+    className: cx(styles$p[`${baseClass$w}__label`], inline && styles$p[`${baseClass$w}__label--inline`], !labelText && styles$p[`${baseClass$w}__label--no-text`])
   }, labelText && /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$p[`${baseClass$x}__label-wrapper`])
+    className: cx(styles$p[`${baseClass$w}__label-wrapper`])
   }, /* @__PURE__ */ React.createElement("label", {
-    className: styles$p[`${baseClass$x}__label-left-node`],
+    className: styles$p[`${baseClass$w}__label-left-node`],
     htmlFor: labelFor
   }, /* @__PURE__ */ React.createElement(Text, {
     as: "span",
     size: "sm"
   }, labelText)), labelAdornment && /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$p[`${baseClass$x}__label-adornment`])
+    className: cx(styles$p[`${baseClass$w}__label-adornment`])
   }, labelAdornment)), labelRightNode && !inline && /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$p[`${baseClass$x}__label-right-node`])
+    className: cx(styles$p[`${baseClass$w}__label-right-node`])
   }, labelRightNode)), /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$p[`${baseClass$x}__content`])
+    className: cx(styles$p[`${baseClass$w}__content`])
   }, children, error && /* @__PURE__ */ React.createElement(FieldError, null, error), description && /* @__PURE__ */ React.createElement(FieldDescription, null, description))));
 };
 var styles$o = {
@@ -1636,7 +1734,7 @@ var styles$o = {
   "form-group__label": "lc-FormGroup-module__form-group__label___NC-JW",
   "form-group__helper": "lc-FormGroup-module__form-group__helper___SRuxe"
 };
-const baseClass$w = "form-group";
+const baseClass$v = "form-group";
 const FormGroup = (_w) => {
   var _x = _w, {
     className = "",
@@ -1649,21 +1747,21 @@ const FormGroup = (_w) => {
     "labelText",
     "helperText"
   ]);
-  const mergedClassNames = cx(styles$o[baseClass$w], className);
+  const mergedClassNames = cx(styles$o[baseClass$v], 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$o[`${baseClass$w}__header`]
+    className: styles$o[`${baseClass$v}__header`]
   }, /* @__PURE__ */ React.createElement(Heading, {
     as: "div",
     size: "sm",
-    className: styles$o[`${baseClass$w}__label`]
+    className: styles$o[`${baseClass$v}__label`]
   }, labelText), helperText && /* @__PURE__ */ React.createElement(Text, {
     as: "div",
     size: "sm",
-    className: styles$o[`${baseClass$w}__helper`]
+    className: styles$o[`${baseClass$v}__helper`]
   }, helperText)), children);
 };
 const input = "lc-Input-module__input___qeMAQ";
@@ -1680,11 +1778,11 @@ var styles$n = {
   "input__icon--right": "lc-Input-module__input__icon--right___VefSK",
   "input__visibility-button": "lc-Input-module__input__visibility-button___eWrVe"
 };
-const baseClass$v = "input";
+const baseClass$u = "input";
 const renderIcon = (icon2, disabled) => React.cloneElement(icon2.source, {
   ["data-testid"]: `input-icon-${icon2.place}`,
-  className: cx(styles$n[`${baseClass$v}__icon`], styles$n[`${baseClass$v}__icon--${icon2.place}`], {
-    [styles$n[`${baseClass$v}__icon--disabled`]]: disabled
+  className: cx(styles$n[`${baseClass$u}__icon`], styles$n[`${baseClass$u}__icon--${icon2.place}`], {
+    [styles$n[`${baseClass$u}__icon--disabled`]]: disabled
   })
 });
 const Input = React.forwardRef((_y, ref) => {
@@ -1704,10 +1802,10 @@ const Input = React.forwardRef((_y, ref) => {
   const [isFocused, setIsFocused] = React.useState(false);
   const [isPasswordVisible, setIsPasswordVisible] = React.useState(false);
   const { type } = inputProps;
-  const mergedClassNames = cx(className, styles$n[baseClass$v], styles$n[`${baseClass$v}--${inputSize}`], {
-    [styles$n[`${baseClass$v}--disabled`]]: disabled,
-    [styles$n[`${baseClass$v}--focused`]]: isFocused,
-    [styles$n[`${baseClass$v}--error`]]: error
+  const mergedClassNames = cx(className, styles$n[baseClass$u], styles$n[`${baseClass$u}--${inputSize}`], {
+    [styles$n[`${baseClass$u}--disabled`]]: disabled,
+    [styles$n[`${baseClass$u}--focused`]]: isFocused,
+    [styles$n[`${baseClass$u}--error`]]: error
   });
   const iconCustomColor = !disabled ? "var(--content-default)" : "var(--content-disabled)";
   const iconSource = isPasswordVisible ? VisibilityOn : VisibilityOff;
@@ -1732,7 +1830,7 @@ const Input = React.forwardRef((_y, ref) => {
       source: iconSource
     }),
     onClick: () => setIsPasswordVisible((v) => !v),
-    className: styles$n[`${baseClass$v}__visibility-button`]
+    className: styles$n[`${baseClass$u}__visibility-button`]
   }));
 });
 const link = "lc-Link-module__link___kqx52";
@@ -1740,7 +1838,7 @@ var styles$m = {
   link,
   "link--bold": "lc-Link-module__link--bold___1rGdO"
 };
-const baseClass$u = "link";
+const baseClass$t = "link";
 const Link = (_A) => {
   var _B = _A, {
     bold = false,
@@ -1750,9 +1848,21 @@ const Link = (_A) => {
     "className"
   ]);
   return /* @__PURE__ */ React.createElement("a", __spreadValues({
-    className: cx(styles$m[baseClass$u], bold && styles$m[`${baseClass$u}--bold`], className)
+    className: cx(styles$m[baseClass$t], bold && styles$m[`${baseClass$t}--bold`], className)
   }, rest));
 };
+const KeyCodes = {
+  esc: "Escape",
+  enter: "Enter",
+  backspace: "Backspace",
+  delete: "Delete",
+  spacebar: " ",
+  tab: "Tab",
+  semicolon: ";",
+  comma: ",",
+  arrowUp: "ArrowUp",
+  arrowDown: "ArrowDown"
+};
 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";
@@ -1762,9 +1872,13 @@ var styles$l = {
   "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-base__close--label-type": "lc-Modal-module__modal-base__close--label-type___Om0Vb",
   modal__header,
+  "modal__label-header": "lc-Modal-module__modal__label-header___ZPtEy",
   modal__heading,
+  "modal__label-heading": "lc-Modal-module__modal__label-heading___WnYcF",
   modal__body,
+  "modal__body--full-space": "lc-Modal-module__modal__body--full-space___LsSNE",
   modal__footer,
   "action-modal": "lc-Modal-module__action-modal___CsRC7",
   "action-modal__heading": "lc-Modal-module__action-modal__heading___m3MuG",
@@ -1772,30 +1886,7 @@ var styles$l = {
   "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$l["modal-base__close"],
-  onClick,
-  type: "button"
-}, /* @__PURE__ */ React.createElement(Icon, {
-  source: Close,
-  size: "large"
-}));
-const KeyCodes = {
-  esc: "Escape",
-  enter: "Enter",
-  backspace: "Backspace",
-  delete: "Delete",
-  spacebar: " ",
-  tab: "Tab",
-  semicolon: ";",
-  comma: ",",
-  arrowUp: "ArrowUp",
-  arrowDown: "ArrowDown"
-};
-const baseClass$t = "modal-base";
+const baseClass$s = "modal-base";
 const ModalBase = (_C) => {
   var _D = _C, {
     children,
@@ -1810,7 +1901,7 @@ const ModalBase = (_C) => {
     "closeOnEscPress",
     "closeOnOverlayPress"
   ]);
-  const mergedClassNames = cx(styles$l[baseClass$t], className);
+  const mergedClassNames = cx(styles$l[baseClass$s], className);
   React.useEffect(() => {
     if (!closeOnEscPress) {
       return;
@@ -1828,73 +1919,79 @@ const ModalBase = (_C) => {
       onClose();
     }
   };
-  const onCloseButtonClick = (event) => {
-    event.preventDefault();
-    event.stopPropagation();
-    onClose();
-  };
   return /* @__PURE__ */ React.createElement("div", {
     "data-testid": "lc-modal-overlay",
     onMouseDown: onOverlayClick,
-    className: cx(styles$l[`${baseClass$t}__overlay`], styles$l[`${baseClass$t}__overlay--visible`])
+    className: cx(styles$l[`${baseClass$s}__overlay`], styles$l[`${baseClass$s}__overlay--visible`])
   }, /* @__PURE__ */ React.createElement("div", __spreadValues({
+    role: "dialog",
+    "aria-modal": true,
     className: mergedClassNames
-  }, props), /* @__PURE__ */ React.createElement(ModalCloseButton, {
-    onClick: onCloseButtonClick
-  }), children));
+  }, props), children));
 };
-const baseClass$s = "action-modal";
-const ActionModal = (_E) => {
+const ModalCloseButton = ({
+  labelType,
+  customColor,
+  onClick
+}) => /* @__PURE__ */ React.createElement("button", {
+  title: "Close modal",
+  className: cx(styles$l["modal-base__close"], labelType && styles$l["modal-base__close--label-type"]),
+  onClick,
+  type: "button"
+}, /* @__PURE__ */ React.createElement(Icon, {
+  source: Close,
+  size: "large",
+  customColor
+}));
+const baseClass$r = "modal";
+const Modal = (_E) => {
   var _F = _E, {
     children,
     className = "",
-    icon: icon2,
     heading,
-    actions
+    labelHeading,
+    fullSpaceContent,
+    footer,
+    onClose
   } = _F, props = __objRest(_F, [
-    "children",
-    "className",
-    "icon",
-    "heading",
-    "actions"
-  ]);
-  const mergedClassNames = cx(styles$l[baseClass$s], className);
-  return /* @__PURE__ */ React.createElement(ModalBase, __spreadValues({
-    className: mergedClassNames
-  }, props), icon2 && /* @__PURE__ */ React.createElement("div", {
-    className: styles$l[`${baseClass$s}__icon`]
-  }, icon2), heading && /* @__PURE__ */ React.createElement("div", {
-    className: styles$l[`${baseClass$s}__heading`]
-  }, heading), /* @__PURE__ */ React.createElement("div", {
-    className: styles$l[`${baseClass$s}__content`]
-  }, children), actions && /* @__PURE__ */ React.createElement("div", {
-    className: styles$l[`${baseClass$s}__actions`]
-  }, actions));
-};
-const baseClass$r = "modal";
-const Modal = (_G) => {
-  var _H = _G, {
-    children,
-    className = "",
-    heading,
-    footer
-  } = _H, props = __objRest(_H, [
     "children",
     "className",
     "heading",
-    "footer"
+    "labelHeading",
+    "fullSpaceContent",
+    "footer",
+    "onClose"
   ]);
   const mergedClassNames = cx(styles$l[baseClass$r], className);
+  const onCloseButtonClick = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    onClose();
+  };
   return /* @__PURE__ */ React.createElement(ModalBase, __spreadValues({
-    className: mergedClassNames
-  }, props), heading && /* @__PURE__ */ React.createElement("div", {
+    className: mergedClassNames,
+    onClose
+  }, props), labelHeading && /* @__PURE__ */ React.createElement("div", {
+    className: styles$l[`${baseClass$r}__label-header`]
+  }, /* @__PURE__ */ React.createElement(Heading, {
+    size: "xs",
+    as: "div",
+    className: styles$l[`${baseClass$r}__label-heading`]
+  }, labelHeading), /* @__PURE__ */ React.createElement(ModalCloseButton, {
+    labelType: !!labelHeading,
+    customColor: `var(--color-white)`,
+    onClick: onCloseButtonClick
+  })), !labelHeading && heading && /* @__PURE__ */ React.createElement("div", {
     className: styles$l[`${baseClass$r}__header`]
   }, /* @__PURE__ */ React.createElement(Heading, {
     size: "sm",
     as: "div",
     className: styles$l[`${baseClass$r}__heading`]
-  }, heading)), /* @__PURE__ */ React.createElement("div", {
-    className: styles$l[`${baseClass$r}__body`]
+  }, heading)), !labelHeading && /* @__PURE__ */ React.createElement(ModalCloseButton, {
+    onClick: onCloseButtonClick
+  }), /* @__PURE__ */ React.createElement("div", {
+    "data-testid": "modal-body",
+    className: cx(styles$l[`${baseClass$r}__body`], fullSpaceContent && styles$l[`${baseClass$r}__body--full-space`])
   }, children), footer && /* @__PURE__ */ React.createElement("div", {
     className: styles$l[`${baseClass$r}__footer`]
   }, footer));
@@ -1931,8 +2028,8 @@ var styles$k = {
   "numeric-input--error": "lc-NumericInput-module__numeric-input--error___TMxRx"
 };
 const baseClass$q = "numeric-input";
-const NumericInput = (_I) => {
-  var _J = _I, {
+const NumericInput = (_G) => {
+  var _H = _G, {
     className,
     error,
     value,
@@ -1942,7 +2039,7 @@ const NumericInput = (_I) => {
     noControls,
     style,
     onChange
-  } = _J, restProps = __objRest(_J, [
+  } = _H, restProps = __objRest(_H, [
     "className",
     "error",
     "value",
@@ -2127,6 +2224,7 @@ var styles$i = {
   "picker-list__item": "lc-PickerList-module__picker-list__item___8QNS0",
   "picker-list__item--select-all": "lc-PickerList-module__picker-list__item--select-all___PlTHV",
   "picker-list__item__header": "lc-PickerList-module__picker-list__item__header___mxmg0",
+  "picker-list__item__content": "lc-PickerList-module__picker-list__item__content___D-tsE",
   "picker-list__item__custom": "lc-PickerList-module__picker-list__item__custom___kJEP6"
 };
 const SELECT_ALL_OPTION_KEY = "select-all";
@@ -2272,6 +2370,7 @@ const PickerList = ({
       }, item.name);
     }
     return /* @__PURE__ */ React.createElement("li", {
+      "data-testid": item.key,
       ref: (element) => {
         if (currentItemKey === item.key) {
           element == null ? void 0 : element.scrollIntoView({ block: "nearest" });
@@ -2287,7 +2386,9 @@ const PickerList = ({
         [styles$i[`${itemClassName}__custom`]]: item == null ? void 0 : item.customElement
       }),
       onClick: () => !item.disabled && handleOnClick(item)
-    }, getOptionContent(item), isItemSelected(item.key) && /* @__PURE__ */ React.createElement(Icon, {
+    }, /* @__PURE__ */ React.createElement("div", {
+      className: styles$i[`${itemClassName}__content`]
+    }, getOptionContent(item)), isItemSelected(item.key) && /* @__PURE__ */ React.createElement(Icon, {
       kind: "link",
       source: Check
     }));
@@ -2336,8 +2437,8 @@ const getCustomTextClass = (customColor) => {
   }
   return getContrast(customColor, "#FFFFFF") > 4.5 ? "text-white" : "text-black";
 };
-const Tag = (_K) => {
-  var _L = _K, {
+const Tag = (_I) => {
+  var _J = _I, {
     className = "",
     children,
     dismissible = false,
@@ -2349,7 +2450,7 @@ const Tag = (_K) => {
     icon: icon2,
     avatar: avatar2,
     customColor
-  } = _L, restProps = __objRest(_L, [
+  } = _J, restProps = __objRest(_J, [
     "className",
     "children",
     "dismissible",
@@ -2422,12 +2523,14 @@ const Tag = (_K) => {
 };
 var styles$f = {
   "picker-trigger-body": "lc-TriggerBody-module__picker-trigger-body___ZWjX9",
+  "picker-trigger-body__item": "lc-TriggerBody-module__picker-trigger-body__item___0DBg1",
   "picker-trigger-body__input": "lc-TriggerBody-module__picker-trigger-body__input___ezPyz"
 };
 const baseClass$m = "picker-trigger-body";
 const TriggerBody = ({
   isOpen,
   isSearchDisabled,
+  isDisabled,
   placeholder,
   items,
   type,
@@ -2445,7 +2548,9 @@ const TriggerBody = ({
         className: styles$f[`${baseClass$m}__custom`]
       }, item.customElement.selectedItemBody);
     }
-    return item.name;
+    return /* @__PURE__ */ React.createElement("div", {
+      className: styles$f[`${baseClass$m}__item`]
+    }, item.name);
   };
   const handleOnChange = (e) => {
     onFilter(e.target.value);
@@ -2466,7 +2571,7 @@ const TriggerBody = ({
       key: item.name,
       className: styles$f[`${baseClass$m}__tag`],
       iconSize,
-      dismissible: true,
+      dismissible: !isDisabled,
       onRemove: () => onItemRemove(item)
     }, getSingleItem(item));
   }), shouldDisplaySearch && getSearch());
@@ -2540,7 +2645,7 @@ const Picker = ({
     if ((newSelectedItemsKeys == null ? void 0 : newSelectedItemsKeys.length) === 0) {
       return onSelect(null);
     }
-    const newSelectedItems = items.filter((item2) => newSelectedItemsKeys.includes(item2.key));
+    const newSelectedItems = options.filter((item2) => newSelectedItemsKeys.includes(item2.key));
     onSelect(newSelectedItems);
   };
   const isItemSelectable = (item) => !item.disabled && !item.groupHeader && item.key !== SELECT_ALL_OPTION_KEY;
@@ -2603,6 +2708,7 @@ const Picker = ({
   }, /* @__PURE__ */ React.createElement(TriggerBody, {
     isOpen: isListOpen,
     isSearchDisabled: searchDisabled,
+    isDisabled: disabled,
     placeholder,
     iconSize: tagIconSize,
     items: selected,
@@ -2756,13 +2862,13 @@ const SIZE_VALUE_FROM_SIZE = {
   large: 56
 };
 const baseClass$k = "progress-circle";
-const ProgressCircle = React.forwardRef((_M, ref) => {
-  var _N = _M, {
+const ProgressCircle = React.forwardRef((_K, ref) => {
+  var _L = _K, {
     status = "normal",
     progressValue,
     className,
     size = "medium"
-  } = _N, restProps = __objRest(_N, [
+  } = _L, restProps = __objRest(_L, [
     "status",
     "progressValue",
     "className",
@@ -2817,13 +2923,13 @@ var styles$d = {
   "progress-bar__indicator--normal": "lc-ProgressBar-module__progress-bar__indicator--normal___0Uhle"
 };
 const baseClass$j = "progress-bar";
-const ProgressBar = React.forwardRef((_O, ref) => {
-  var _P = _O, {
+const ProgressBar = React.forwardRef((_M, ref) => {
+  var _N = _M, {
     status = "normal",
     percent,
     size = "medium",
     className = ""
-  } = _P, restProps = __objRest(_P, [
+  } = _N, restProps = __objRest(_N, [
     "status",
     "percent",
     "size",
@@ -2943,8 +3049,8 @@ var styles$b = {
   "radio-button--disabled": "lc-RadioButton-module__radio-button--disabled___wHSA7"
 };
 const baseClass$h = "radio-button";
-const RadioButton = React.forwardRef((_Q, ref) => {
-  var _R = _Q, { children, className = "", description, checked, disabled } = _R, props = __objRest(_R, ["children", "className", "description", "checked", "disabled"]);
+const RadioButton = React.forwardRef((_O, ref) => {
+  var _P = _O, { children, className = "", description, checked, disabled } = _P, props = __objRest(_P, ["children", "className", "description", "checked", "disabled"]);
   const mergedClassNames = cx(styles$b[baseClass$h], className, {
     [styles$b[`${baseClass$h}--selected`]]: checked,
     [styles$b[`${baseClass$h}--disabled`]]: disabled
@@ -3110,8 +3216,8 @@ var styles$9 = {
   switch__icon
 };
 const baseClass$f = "switch";
-const Switch = (_S) => {
-  var _T = _S, {
+const Switch = (_Q) => {
+  var _R = _Q, {
     className = "",
     defaultOn = false,
     disabled = false,
@@ -3122,7 +3228,7 @@ const Switch = (_S) => {
     state = "regular",
     innerRef,
     ariaLabel
-  } = _T, props = __objRest(_T, [
+  } = _R, props = __objRest(_R, [
     "className",
     "defaultOn",
     "disabled",
@@ -3197,15 +3303,15 @@ var styles$8 = {
   "tab--disabled": "lc-Tab-module__tab--disabled___URdTh"
 };
 const baseClass$e = "tab";
-const Tab = (_U) => {
-  var _V = _U, {
+const Tab = (_S) => {
+  var _T = _S, {
     children,
     className,
     count,
     isSelected,
     asBadge,
     size = "medium"
-  } = _V, restProps = __objRest(_V, [
+  } = _T, restProps = __objRest(_T, [
     "children",
     "className",
     "count",
@@ -3505,15 +3611,15 @@ const iconConfig = {
   }
 };
 const baseClass$a = "toast";
-const Toast = (_W) => {
-  var _X = _W, {
+const Toast = (_U) => {
+  var _V = _U, {
     action,
     className,
     children,
     removable,
     kind = "info",
     onClose
-  } = _X, divProps = __objRest(_X, [
+  } = _V, divProps = __objRest(_V, [
     "action",
     "className",
     "children",
@@ -4065,8 +4171,8 @@ var styles$3 = {
   "textarea--error": "lc-Textarea-module__textarea--error___0EGuq"
 };
 const baseClass$3 = "textarea";
-const Textarea = React.forwardRef((_Y, ref) => {
-  var _Z = _Y, { className, error } = _Z, textareaProps = __objRest(_Z, ["className", "error"]);
+const Textarea = React.forwardRef((_W, ref) => {
+  var _X = _W, { className, error } = _X, textareaProps = __objRest(_X, ["className", "error"]);
   const { disabled } = textareaProps;
   const [isFocused, setIsFocused] = React.useState(false);
   const mergedClassNames = cx(className, styles$3[baseClass$3], {
@@ -4088,10 +4194,10 @@ var styles$2 = {
   "file-upload-progress__wrapper": "lc-FileUploadProgress-module__file-upload-progress__wrapper___01Nkq",
   "file-upload-progress__wrapper--with-icon": "lc-FileUploadProgress-module__file-upload-progress__wrapper--with-icon___GSXmA",
   "file-upload-progress__wrapper__header": "lc-FileUploadProgress-module__file-upload-progress__wrapper__header___mYBGK",
+  "file-upload-progress__wrapper__header__actions": "lc-FileUploadProgress-module__file-upload-progress__wrapper__header__actions___tvhB3",
   "file-upload-progress__wrapper__header__title": "lc-FileUploadProgress-module__file-upload-progress__wrapper__header__title___2IVuv",
   "file-upload-progress__wrapper__header__title--success": "lc-FileUploadProgress-module__file-upload-progress__wrapper__header__title--success___E6DQl",
-  "file-upload-progress__wrapper__header__title--error": "lc-FileUploadProgress-module__file-upload-progress__wrapper__header__title--error___5BPpI",
-  "file-upload-progress__wrapper__header__actions": "lc-FileUploadProgress-module__file-upload-progress__wrapper__header__actions___tvhB3"
+  "file-upload-progress__wrapper__header__title--error": "lc-FileUploadProgress-module__file-upload-progress__wrapper__header__title--error___5BPpI"
 };
 var styles$1 = {
   "file-upload-progress-actions": "lc-FileUploadProgressActions-module__file-upload-progress-actions___qOBr2",
@@ -4297,4 +4403,4 @@ const UploadBar = ({
     className: styles[`${baseClass}__files__list`]
   }, children))))));
 };
-export { ANIMATION_TIME, ActionModal, Alert, Avatar, Badge, Button, Card, Checkbox, DatePicker, DesignToken, EmailTagInput, FieldDescription, FieldError, FieldGroup, FileUploadProgress, FileUploadProgressActions, Form, FormField, FormGroup, Heading, Icon, Info, Input, Interactive, Link, Loader, Modal, ModalBase, ModalCloseButton, ModalPortal, NumericInput, Picker, PickerList, Popover, ProgressBar, ProgressCircle, PromoBanner, RadioButton, RangeDatePicker, SearchInput, SegmentedControl, ShadowToken, Simple, SpacingToken, Switch, Tab, TabsList, TabsWrapper, Tag, TagInput, Text, Textarea, Toast, ToastWrapper, Tooltip, UploadBar, UserGuide };
+export { ANIMATION_TIME, Alert, Avatar, Badge, Button, Card, Checkbox, DatePicker, DesignToken, EmailTagInput, FieldDescription, FieldError, FieldGroup, FileUploadProgress, FileUploadProgressActions, Form, FormField, FormGroup, Heading, Icon, Info, Input, Interactive, Link, Loader, Modal, ModalBase, ModalCloseButton, ModalPortal, NumericInput, Picker, PickerList, Popover, ProgressBar, ProgressCircle, PromoBanner, RadioButton, RangeDatePicker, SearchInput, SegmentedControl, ShadowToken, Simple, SpacingToken, Switch, Tab, TabsList, TabsWrapper, Tag, TagInput, Text, Textarea, Toast, ToastWrapper, Tooltip, UploadBar, UserGuide };