@livechat/design-system-react-components 1.0.0-alpha.15 → 1.0.0-alpha.18

package/dist/dsrc.es.js

@@ -35,7 +35,7 @@ var __publicField = (obj, key, value) => {
 };
 import * as React from "react";
 import cx from "clsx";
-import { Close, Info as Info$1, Warning, CheckCircleSolid, Block, Check, ChevronUp, ChevronDown, Error as Error2, Search } from "@livechat/design-system-icons/react/material";
+import { Close, Info as Info$1, Warning, CheckCircleSolid, Block, Check, ChevronUp, ChevronDown, Error as Error2, Search, LockBlack } from "@livechat/design-system-icons/react/material";
 import debounce from "lodash.debounce";
 import * as ReactDOM from "react-dom";
 import { useFloating, offset, flip, autoUpdate, arrow } from "@floating-ui/react-dom";
@@ -44,7 +44,7 @@ import escape from "lodash.escape";
 import { TransitionGroup, CSSTransition } from "react-transition-group";
 import { css } from "@emotion/css";
 var index = "";
-const DesignTokens = {
+const DesignToken = {
   Background: "--background",
   SurfaceBasicDefault: "--surface-basic-default",
   SurfaceBasicSubtle: "--surface-basic-subtle",
@@ -170,6 +170,22 @@ const DesignTokens = {
   DecorPurple100: "--decor-purple100",
   DecorPurple50: "--decor-purple50"
 };
+const SpacingToken = {
+  Spacing0: "--spacing-0",
+  Spacing05: "--spacing-05",
+  Spacing1: "--spacing-1",
+  Spacing2: "--spacing-2",
+  Spacing3: "--spacing-3",
+  Spacing4: "--spacing-4",
+  Spacing5: "--spacing-5",
+  Spacing6: "--spacing-6",
+  Spacing8: "--spacing-8",
+  Spacing12: "--spacing-12",
+  Spacing16: "--spacing-16",
+  Spacing18: "--spacing-18",
+  Spacing20: "--spacing-20",
+  Spacing24: "--spacing-24"
+};
 const caps = "lc-Typography-module__caps___c3eNJ";
 var styles$x = {
   "heading-xl": "lc-Typography-module__heading-xl___nhr-6",
@@ -382,20 +398,36 @@ const Alert = ({
   })));
 };
 const badge = "lc-Badge-module__badge___GhLnu";
+const badge__dot = "lc-Badge-module__badge__dot___z6RO6";
 var styles$u = {
   badge,
-  "badge--secondary": "lc-Badge-module__badge--secondary___JjNIJ"
-};
+  badge__dot,
+  "badge--large": "lc-Badge-module__badge--large___B131q",
+  "badge--medium": "lc-Badge-module__badge--medium___TDU8a",
+  "badge--compact": "lc-Badge-module__badge--compact___9xJ4y",
+  "badge--primary": "lc-Badge-module__badge--primary___8LRpp",
+  "badge--secondary": "lc-Badge-module__badge--secondary___JjNIJ",
+  "badge--tertiary": "lc-Badge-module__badge--tertiary___e83wV"
+};
+const baseClass$B = "badge";
 const Badge = ({
   children,
   className,
-  secondary = false
+  kind = "primary",
+  size = "medium",
+  type = "content"
 }) => {
-  return /* @__PURE__ */ React.createElement("span", {
-    className: cx(styles$u.badge, className, {
-      [styles$u["badge--secondary"]]: secondary
+  const mergedClassNames = cx(className, styles$u[baseClass$B], styles$u[`${baseClass$B}--${kind}`], styles$u[`${baseClass$B}--${size}`]);
+  const content = {
+    ["content"]: children,
+    ["alert"]: "!",
+    ["dot"]: /* @__PURE__ */ React.createElement("span", {
+      className: styles$u[`${baseClass$B}__dot`]
     })
-  }, children);
+  }[type];
+  return /* @__PURE__ */ React.createElement("span", {
+    className: mergedClassNames
+  }, content);
 };
 const loader = "lc-Loader-module__loader___LRflD";
 const loader__spinner = "lc-Loader-module__loader__spinner___l3C1g";
@@ -411,8 +443,8 @@ var styles$t = {
   rotate,
   loader__label
 };
-const baseClass$B = "loader";
-const spinnerClass = `${baseClass$B}__spinner`;
+const baseClass$A = "loader";
+const spinnerClass = `${baseClass$A}__spinner`;
 const Loader = ({
   primaryColor,
   secondaryColor,
@@ -421,7 +453,7 @@ const Loader = ({
   size = "medium"
 }) => {
   return /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$t[baseClass$B], className)
+    className: cx(styles$t[baseClass$A], className)
   }, /* @__PURE__ */ React.createElement("div", {
     className: cx(styles$t[spinnerClass], styles$t[`${spinnerClass}--${size}`])
   }, /* @__PURE__ */ React.createElement("div", {
@@ -461,7 +493,7 @@ var styles$s = {
   btn__content,
   btn__icon
 };
-const baseClass$A = "btn";
+const baseClass$z = "btn";
 const Button = (_e) => {
   var _f = _e, {
     loading = false,
@@ -492,11 +524,11 @@ const Button = (_e) => {
   ]);
   const isDisabled = loading || disabled;
   const Component = href ? "a" : "button";
-  const mergedClassNames = cx(className, styles$s[baseClass$A], styles$s[`${baseClass$A}--${kind}`], styles$s[`${baseClass$A}--${size}`], {
-    [styles$s[`${baseClass$A}--loading`]]: loading,
-    [styles$s[`${baseClass$A}--full-width`]]: fullWidth,
-    [styles$s[`${baseClass$A}--icon-only`]]: !children && icon2,
-    [styles$s[`${baseClass$A}--disabled`]]: isDisabled
+  const mergedClassNames = cx(className, styles$s[baseClass$z], styles$s[`${baseClass$z}--${kind}`], styles$s[`${baseClass$z}--${size}`], {
+    [styles$s[`${baseClass$z}--loading`]]: loading,
+    [styles$s[`${baseClass$z}--full-width`]]: fullWidth,
+    [styles$s[`${baseClass$z}--icon-only`]]: !children && icon2,
+    [styles$s[`${baseClass$z}--disabled`]]: isDisabled
   });
   return /* @__PURE__ */ React.createElement(Component, __spreadValues({
     className: mergedClassNames,
@@ -506,12 +538,12 @@ const Button = (_e) => {
   }, props), loading && /* @__PURE__ */ React.createElement(Loader, {
     size: "small",
     label: loaderLabel,
-    className: styles$s[`${baseClass$A}__loader`]
+    className: styles$s[`${baseClass$z}__loader`]
   }), icon2 && React.cloneElement(icon2, {
-    className: cx(styles$s[`${baseClass$A}__icon`], styles$s[`${baseClass$A}__icon--${iconPosition}`]),
+    className: cx(styles$s[`${baseClass$z}__icon`], styles$s[`${baseClass$z}__icon--${iconPosition}`]),
     disabled
   }), /* @__PURE__ */ React.createElement("div", {
-    className: styles$s[`${baseClass$A}__content`]
+    className: styles$s[`${baseClass$z}__content`]
   }, children));
 };
 const btn = "lc-ButtonGroup-module__btn___bXPrU";
@@ -525,7 +557,7 @@ var styles$r = {
 };
 function noop() {
 }
-const baseClass$z = "btn-group";
+const baseClass$y = "btn-group";
 const ButtonGroup = (_g) => {
   var _h = _g, {
     size = "medium",
@@ -544,7 +576,7 @@ const ButtonGroup = (_g) => {
     "currentIndex",
     "initialIndex"
   ]);
-  const mergedClassName = cx(styles$r[baseClass$z], className);
+  const mergedClassName = cx(styles$r[baseClass$y], className);
   const [currentStateIndex, setCurrentStateIndex] = React.useState(initialIndex);
   const isControlled = typeof currentIndex === "number";
   const _currentIndex = isControlled ? currentIndex : currentStateIndex;
@@ -608,6 +640,26 @@ const Card = (_i) => {
     className: styles$q["card__text"]
   }, title)), children);
 };
+var styles$p = {
+  "field-description": "lc-FieldDescription-module__field-description___IcRDH"
+};
+const baseClass$x = "field-description";
+const FieldDescription = (_k) => {
+  var _l = _k, {
+    children,
+    className = ""
+  } = _l, props = __objRest(_l, [
+    "children",
+    "className"
+  ]);
+  const mergedClassNames = cx(styles$p[baseClass$x], className);
+  return /* @__PURE__ */ React.createElement(Text, __spreadProps(__spreadValues({
+    as: "span",
+    size: "sm"
+  }, props), {
+    className: mergedClassNames
+  }), 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";
@@ -615,7 +667,7 @@ const checkbox__checkmark = "lc-Checkbox-module__checkbox__checkmark___16pfY";
 const checkbox__input = "lc-Checkbox-module__checkbox__input___YLbVF";
 const checkbox__text = "lc-Checkbox-module__checkbox__text___P2SIq";
 const checkbox__helper = "lc-Checkbox-module__checkbox__helper___YSJ-n";
-var styles$p = {
+var styles$o = {
   checkbox,
   checkbox__label,
   checkbox__square,
@@ -626,89 +678,46 @@ var styles$p = {
   "checkbox--disabled": "lc-Checkbox-module__checkbox--disabled___-lAqW",
   checkbox__helper
 };
-const baseClass$y = "checkbox";
-const Checkbox = (_k) => {
-  var _l = _k, {
-    className = ""
-  } = _l, props = __objRest(_l, [
-    "className"
-  ]);
-  const mergedClassNames = cx(styles$p[`${baseClass$y}__square`], className);
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, props), {
-    className: styles$p[`${baseClass$y}__input`],
+const baseClass$w = "checkbox";
+const Checkbox = React.forwardRef((_m, ref) => {
+  var _n = _m, { checked, disabled, children, description, className } = _n, restInputProps = __objRest(_n, ["checked", "disabled", "children", "description", "className"]);
+  return /* @__PURE__ */ React.createElement("div", {
+    className: cx(styles$o[baseClass$w], className, {
+      [styles$o[`${baseClass$w}--selected`]]: checked,
+      [styles$o[`${baseClass$w}--disabled`]]: disabled
+    })
+  }, /* @__PURE__ */ React.createElement("label", {
+    className: styles$o[`${baseClass$w}__label`]
+  }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, restInputProps), {
+    ref,
+    checked,
+    disabled,
+    className: styles$o[`${baseClass$w}__input`],
     type: "checkbox"
   })), /* @__PURE__ */ React.createElement("div", {
-    className: mergedClassNames
+    className: styles$o[`${baseClass$w}__square`]
   }, /* @__PURE__ */ React.createElement(Icon, {
     source: Check,
     kind: "inverted",
     size: "xsmall",
-    className: styles$p[`${baseClass$y}__checkmark`]
-  })));
-};
-var styles$o = {
-  "field-description": "lc-FieldDescription-module__field-description___IcRDH"
-};
-const baseClass$x = "field-description";
-const FieldDescription = (_m) => {
-  var _n = _m, {
-    children,
-    className = ""
-  } = _n, props = __objRest(_n, [
-    "children",
-    "className"
-  ]);
-  const mergedClassNames = cx(styles$o[baseClass$x], className);
-  return /* @__PURE__ */ React.createElement(Text, __spreadProps(__spreadValues({
-    as: "span",
-    size: "sm"
-  }, props), {
-    className: mergedClassNames
-  }), children);
-};
-const baseClass$w = "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$p[baseClass$w], className, {
-    [styles$p[`${baseClass$w}--selected`]]: checked,
-    [styles$p[`${baseClass$w}--disabled`]]: disabled
-  });
-  return /* @__PURE__ */ React.createElement("div", {
-    className: mergedClassNames
-  }, /* @__PURE__ */ React.createElement("label", {
-    className: styles$p[`${baseClass$w}__label`]
-  }, /* @__PURE__ */ React.createElement(Checkbox, __spreadProps(__spreadValues({}, props), {
-    checked,
-    disabled
-  })), /* @__PURE__ */ React.createElement(Text, {
+    className: styles$o[`${baseClass$w}__checkmark`]
+  }))), children && /* @__PURE__ */ React.createElement(Text, {
     as: "div",
     size: "md",
-    className: styles$p[`${baseClass$w}__text`]
+    className: styles$o[`${baseClass$w}__text`]
   }, children)), description && /* @__PURE__ */ React.createElement(FieldDescription, {
-    className: styles$p[`${baseClass$w}__helper`]
+    className: styles$o[`${baseClass$w}__helper`]
   }, description));
-};
+});
 var styles$n = {
   "field-error": "lc-FieldError-module__field-error___IDkPT"
 };
 const baseClass$v = "field-error";
-const FieldError = (_q) => {
-  var _r = _q, {
+const FieldError = (_o) => {
+  var _p = _o, {
     children,
     className = ""
-  } = _r, props = __objRest(_r, [
+  } = _p, props = __objRest(_p, [
     "children",
     "className"
   ]);
@@ -726,15 +735,15 @@ var styles$m = {
   "field-group--stretched": "lc-FieldGroup-module__field-group--stretched___6rkuO"
 };
 const baseClass$u = "field-group";
-const FieldGroup = (_s) => {
-  var _t = _s, {
+const FieldGroup = (_q) => {
+  var _r = _q, {
     className = "",
     children,
     description,
     error,
     inline,
     stretch
-  } = _t, props = __objRest(_t, [
+  } = _r, props = __objRest(_r, [
     "className",
     "children",
     "description",
@@ -763,14 +772,14 @@ var styles$l = {
   form__helper
 };
 const baseClass$t = "form";
-const Form = (_u) => {
-  var _v = _u, {
+const Form = (_s) => {
+  var _t = _s, {
     className,
     children,
     labelText,
     helperText,
     formFooter
-  } = _v, restProps = __objRest(_v, [
+  } = _t, restProps = __objRest(_t, [
     "className",
     "children",
     "labelText",
@@ -793,58 +802,22 @@ const Form = (_u) => {
   }, formFooter));
 };
 var styles$k = {
-  "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$s = "form-group";
-const FormGroup = (_w) => {
-  var _x = _w, {
-    className = "",
-    children,
-    labelText,
-    helperText
-  } = _x, props = __objRest(_x, [
-    "className",
-    "children",
-    "labelText",
-    "helperText"
-  ]);
-  const mergedClassNames = cx(styles$k[baseClass$s], 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$k[`${baseClass$s}__header`]
-  }, /* @__PURE__ */ React.createElement(Heading, {
-    as: "div",
-    size: "sm",
-    className: styles$k[`${baseClass$s}__label`]
-  }, labelText), helperText && /* @__PURE__ */ React.createElement(Text, {
-    as: "div",
-    size: "sm",
-    className: styles$k[`${baseClass$s}__helper`]
-  }, helperText)), children);
-};
-var styles$j = {
-  "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$r = "text-field";
-const TextField = ({
+  "form-field": "lc-FormField-module__form-field___JqnX6",
+  "form-field--inline": "lc-FormField-module__form-field--inline___4DgIq",
+  "form-field__wrapper--inline": "lc-FormField-module__form-field__wrapper--inline___Ubvrn",
+  "form-field__label": "lc-FormField-module__form-field__label___hNCFS",
+  "form-field__label--inline": "lc-FormField-module__form-field__label--inline___QxyM6",
+  "form-field__label--no-text": "lc-FormField-module__form-field__label--no-text___Ohs-I",
+  "form-field__label-wrapper": "lc-FormField-module__form-field__label-wrapper___61-NO",
+  "form-field__label-adornment": "lc-FormField-module__form-field__label-adornment___HB0z7",
+  "form-field__label-left-node": "lc-FormField-module__form-field__label-left-node___dvipB",
+  "form-field__label-right-node": "lc-FormField-module__form-field__label-right-node___LR-03",
+  "form-field__label-right-node--inline": "lc-FormField-module__form-field__label-right-node--inline___BkiPG",
+  "form-field__row-break": "lc-FormField-module__form-field__row-break___DCBjC",
+  "form-field__content": "lc-FormField-module__form-field__content___XaOx3"
+};
+const baseClass$s = "form-field";
+const FormField = ({
   inline,
   error,
   description,
@@ -855,85 +828,90 @@ const TextField = ({
   children,
   labelRightNode
 }) => {
-  const mergedClassNames = cx(styles$j[baseClass$r], {
-    [styles$j[`${baseClass$r}--inline`]]: inline
+  const mergedClassNames = cx(styles$k[baseClass$s], {
+    [styles$k[`${baseClass$s}--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$j[`${baseClass$r}__label-right-node`], styles$j[`${baseClass$r}__label-right-node--inline`])
+    className: cx(styles$k[`${baseClass$s}__label-right-node`], styles$k[`${baseClass$s}__label-right-node--inline`])
   }, labelRightNode), /* @__PURE__ */ React.createElement("div", {
-    className: styles$j[`${baseClass$r}__row-break`]
+    className: styles$k[`${baseClass$s}__row-break`]
   })), /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$j[`${baseClass$r}__wrapper`], inline && styles$j[`${baseClass$r}__wrapper--inline`])
+    className: cx(styles$k[`${baseClass$s}__wrapper`], inline && styles$k[`${baseClass$s}__wrapper--inline`])
   }, (labelText || labelRightNode) && /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$j[`${baseClass$r}__label`], inline && styles$j[`${baseClass$r}__label--inline`], !labelText && styles$j[`${baseClass$r}__label--no-text`])
+    className: cx(styles$k[`${baseClass$s}__label`], inline && styles$k[`${baseClass$s}__label--inline`], !labelText && styles$k[`${baseClass$s}__label--no-text`])
   }, labelText && /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$j[`${baseClass$r}__label-wrapper`])
+    className: cx(styles$k[`${baseClass$s}__label-wrapper`])
   }, /* @__PURE__ */ React.createElement("label", {
-    className: "lc-field-label",
+    className: styles$k[`${baseClass$s}__label-left-node`],
     htmlFor: labelFor
   }, /* @__PURE__ */ React.createElement(Text, {
     as: "span",
     size: "sm"
   }, labelText)), labelAdornment && /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$j[`${baseClass$r}__label-adornment`])
+    className: cx(styles$k[`${baseClass$s}__label-adornment`])
   }, labelAdornment)), labelRightNode && !inline && /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$j[`${baseClass$r}__label-right-node`])
+    className: cx(styles$k[`${baseClass$s}__label-right-node`])
   }, labelRightNode)), /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$j[`${baseClass$r}__content`])
+    className: cx(styles$k[`${baseClass$s}__content`])
   }, children, error && /* @__PURE__ */ React.createElement(FieldError, null, error), description && /* @__PURE__ */ React.createElement(FieldDescription, null, description))));
 };
-var styles$i = {
-  "input-field": "lc-InputField-module__input-field___A-GHj",
-  "input-field--error": "lc-InputField-module__input-field--error___MMchC"
+var styles$j = {
+  "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$q = "input-field";
-const InputField = React.forwardRef((_y, ref) => {
-  var _z = _y, {
-    id,
+const baseClass$r = "form-group";
+const FormGroup = (_u) => {
+  var _v = _u, {
+    className = "",
+    children,
     labelText,
-    labelAdornment,
-    className,
-    inline,
-    error,
-    description,
-    labelRightNode,
-    fieldClassName,
-    style,
-    type = "text"
-  } = _z, restProps = __objRest(_z, [
-    "id",
-    "labelText",
-    "labelAdornment",
+    helperText
+  } = _v, props = __objRest(_v, [
     "className",
-    "inline",
-    "error",
-    "description",
-    "labelRightNode",
-    "fieldClassName",
-    "style",
-    "type"
+    "children",
+    "labelText",
+    "helperText"
   ]);
-  const mergedClassNames = cx(styles$i[baseClass$q], {
-    [styles$i[`${baseClass$q}--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 mergedClassNames = cx(styles$j[baseClass$r], 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$j[`${baseClass$r}__header`]
+  }, /* @__PURE__ */ React.createElement(Heading, {
+    as: "div",
+    size: "sm",
+    className: styles$j[`${baseClass$r}__label`]
+  }, labelText), helperText && /* @__PURE__ */ React.createElement(Text, {
+    as: "div",
+    size: "sm",
+    className: styles$j[`${baseClass$r}__helper`]
+  }, helperText)), children);
+};
+const input = "lc-Input-module__input___qeMAQ";
+var styles$i = {
+  input,
+  "input--error": "lc-Input-module__input--error___DlDbC",
+  "input--xsmall": "lc-Input-module__input--xsmall___9u99K",
+  "input--small": "lc-Input-module__input--small___elNtF",
+  "input--medium": "lc-Input-module__input--medium___3BjqQ",
+  "input--large": "lc-Input-module__input--large___jX5RW"
+};
+const baseClass$q = "input";
+const Input = React.forwardRef((_w, ref) => {
+  var _x = _w, { size = "medium", error = false, className } = _x, inputProps = __objRest(_x, ["size", "error", "className"]);
+  return /* @__PURE__ */ React.createElement("input", __spreadValues({
+    className: cx(className, styles$i[baseClass$q], styles$i[`${baseClass$q}--${size}`], {
+      [styles$i[`${baseClass$q}--error`]]: error
+    }),
+    type: "text",
+    ref
+  }, inputProps));
 });
 const link = "lc-Link-module__link___kqx52";
 var styles$h = {
@@ -941,11 +919,11 @@ var styles$h = {
   "link--bold": "lc-Link-module__link--bold___1rGdO"
 };
 const baseClass$p = "link";
-const Link = (_A) => {
-  var _B = _A, {
+const Link = (_y) => {
+  var _z = _y, {
     bold = false,
     className = ""
-  } = _B, rest = __objRest(_B, [
+  } = _z, rest = __objRest(_z, [
     "bold",
     "className"
   ]);
@@ -996,13 +974,13 @@ const KeyCodes = {
   arrowDown: "ArrowDown"
 };
 const baseClass$o = "modal-base";
-const ModalBase = (_C) => {
-  var _D = _C, {
+const ModalBase = (_A) => {
+  var _B = _A, {
     children,
     className = "",
     onClose,
     closeOnEscPress = true
-  } = _D, props = __objRest(_D, [
+  } = _B, props = __objRest(_B, [
     "children",
     "className",
     "onClose",
@@ -1042,14 +1020,14 @@ const ModalBase = (_C) => {
   }), children));
 };
 const baseClass$n = "action-modal";
-const ActionModal = (_E) => {
-  var _F = _E, {
+const ActionModal = (_C) => {
+  var _D = _C, {
     children,
     className = "",
     icon: icon2,
     heading,
     actions
-  } = _F, props = __objRest(_F, [
+  } = _D, props = __objRest(_D, [
     "children",
     "className",
     "icon",
@@ -1070,13 +1048,13 @@ const ActionModal = (_E) => {
   }, actions));
 };
 const baseClass$m = "modal";
-const Modal = (_G) => {
-  var _H = _G, {
+const Modal = (_E) => {
+  var _F = _E, {
     children,
     className = "",
     heading,
     footer
-  } = _H, props = __objRest(_H, [
+  } = _F, props = __objRest(_F, [
     "children",
     "className",
     "heading",
@@ -1129,8 +1107,8 @@ var styles$f = {
   "numeric-input--error": "lc-NumericInput-module__numeric-input--error___TMxRx"
 };
 const baseClass$l = "numeric-input";
-const NumericInput = (_I) => {
-  var _J = _I, {
+const NumericInput = (_G) => {
+  var _H = _G, {
     className,
     error,
     value,
@@ -1140,7 +1118,7 @@ const NumericInput = (_I) => {
     noControls,
     style,
     onChange
-  } = _J, restProps = __objRest(_J, [
+  } = _H, restProps = __objRest(_H, [
     "className",
     "error",
     "value",
@@ -1239,46 +1217,6 @@ const NumericInput = (_I) => {
     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
-  })));
-};
 var styles$e = {
   "picker-trigger": "lc-Trigger-module__picker-trigger___BIvTx",
   "picker-trigger--compact": "lc-Trigger-module__picker-trigger--compact___3i1DL",
@@ -1293,6 +1231,7 @@ var styles$e = {
 const baseClass$k = "picker-trigger";
 const Trigger = ({
   children,
+  isSearchDisabled,
   isDisabled,
   isError,
   isItemSelected,
@@ -1312,9 +1251,15 @@ const Trigger = ({
         onClick();
       }
     };
-    document.addEventListener("keydown", onKeyDown);
-    return () => document.removeEventListener("keydown", onKeyDown);
-  }, []);
+    if (!isSearchDisabled) {
+      document.addEventListener("keydown", onKeyDown);
+    }
+    return () => {
+      if (!isSearchDisabled) {
+        document.removeEventListener("keydown", onKeyDown);
+      }
+    };
+  }, [isSearchDisabled]);
   const handleTriggerClick = () => {
     onClick();
   };
@@ -1330,7 +1275,7 @@ const Trigger = ({
     className: mergedClassNames,
     onClick: handleTriggerClick,
     tabIndex: 0
-  }, isOpen ? /* @__PURE__ */ React.createElement("input", {
+  }, isOpen && !isSearchDisabled ? /* @__PURE__ */ React.createElement("input", {
     className: styles$e[`${baseClass$k}__input`],
     placeholder: "Select option",
     onChange: handleOnChange,
@@ -1503,14 +1448,16 @@ const Picker = ({
   error,
   label,
   options,
+  selectedOption,
   size = "medium",
   placeholder = "Select option",
   isRequired,
   noSearchResultText = "No results found",
+  searchDisabled = false,
   onSelect
 }) => {
   const [isListOpen, setIsListOpen] = React.useState(false);
-  const [selectedItem, setSelectedItem] = React.useState(null);
+  const [selectedItem, setSelectedItem] = React.useState(selectedOption || null);
   const [searchPhrase, setSearchPhrase] = React.useState(null);
   const triggerRef = React.useRef(null);
   React.useEffect(() => {
@@ -1571,7 +1518,7 @@ const Picker = ({
   }, [searchPhrase]);
   return /* @__PURE__ */ React.createElement("div", {
     ref: triggerRef,
-    className: baseClass$i
+    className: styles$c[baseClass$i]
   }, label && /* @__PURE__ */ React.createElement("div", {
     className: cx(styles$c[`${baseClass$i}__label`], {
       [styles$c[`${baseClass$i}__label--disabled`]]: disabled
@@ -1579,6 +1526,7 @@ const Picker = ({
   }, label), /* @__PURE__ */ React.createElement("div", {
     className: styles$c[`${baseClass$i}__container`]
   }, /* @__PURE__ */ React.createElement(Trigger, {
+    isSearchDisabled: searchDisabled,
     isError: !!error,
     isOpen: isListOpen,
     isDisabled: disabled,
@@ -1724,13 +1672,13 @@ const SIZE_VALUE_FROM_SIZE = {
   large: 56
 };
 const baseClass$h = "progress-circle";
-const ProgressCircle = React.forwardRef((_M, ref) => {
-  var _N = _M, {
+const ProgressCircle = React.forwardRef((_I, ref) => {
+  var _J = _I, {
     status = "normal",
     progressValue,
     className,
     size = "medium"
-  } = _N, restProps = __objRest(_N, [
+  } = _J, restProps = __objRest(_J, [
     "status",
     "progressValue",
     "className",
@@ -1785,13 +1733,13 @@ var styles$a = {
   "progress-bar__indicator--normal": "lc-ProgressBar-module__progress-bar__indicator--normal___0Uhle"
 };
 const baseClass$g = "progress-bar";
-const ProgressBar = React.forwardRef((_O, ref) => {
-  var _P = _O, {
+const ProgressBar = React.forwardRef((_K, ref) => {
+  var _L = _K, {
     status = "normal",
     percent,
     size = "medium",
     className = ""
-  } = _P, restProps = __objRest(_P, [
+  } = _L, restProps = __objRest(_L, [
     "status",
     "percent",
     "size",
@@ -1911,20 +1859,8 @@ var styles$8 = {
   "radio-button--disabled": "lc-RadioButton-module__radio-button--disabled___wHSA7"
 };
 const baseClass$e = "radio-button";
-const RadioButton = (_Q) => {
-  var _R = _Q, {
-    children,
-    className = "",
-    description,
-    checked,
-    disabled
-  } = _R, props = __objRest(_R, [
-    "children",
-    "className",
-    "description",
-    "checked",
-    "disabled"
-  ]);
+const RadioButton = React.forwardRef((_M, ref) => {
+  var _N = _M, { children, className = "", description, checked, disabled } = _N, props = __objRest(_N, ["children", "className", "description", "checked", "disabled"]);
   const mergedClassNames = cx(styles$8[baseClass$e], className, {
     [styles$8[`${baseClass$e}--selected`]]: checked,
     [styles$8[`${baseClass$e}--disabled`]]: disabled
@@ -1937,20 +1873,20 @@ const RadioButton = (_Q) => {
     className: styles$8[`${baseClass$e}__circle`]
   }, /* @__PURE__ */ React.createElement("span", {
     className: styles$8[`${baseClass$e}__inner-circle`]
-  }), /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({
-    className: styles$8[`${baseClass$e}__input`]
-  }, props), {
+  }), /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, props), {
+    className: styles$8[`${baseClass$e}__input`],
+    ref,
     type: "radio",
     checked,
     disabled
-  }))), /* @__PURE__ */ React.createElement(Text, {
+  }))), children && /* @__PURE__ */ React.createElement(Text, {
     as: "div",
     size: "md",
     className: styles$8[`${baseClass$e}__text`]
   }, children)), description && /* @__PURE__ */ React.createElement(FieldDescription, {
     className: styles$8[`${baseClass$e}__helper`]
   }, description));
-};
+});
 var styles$7 = {
   "search-input": "lc-Search-module__search-input___FsbCk",
   "search-input__search-icon": "lc-Search-module__search-input__search-icon___BBQoD",
@@ -2054,23 +1990,26 @@ const switch__slider = "lc-Switch-module__switch__slider___WHd--";
 var styles$6 = {
   "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__track--on": "lc-Switch-module__switch__track--on___aOMWe",
+  "switch__track--off": "lc-Switch-module__switch__track--off___NAisj",
   "switch--basic": "lc-Switch-module__switch--basic___jKO4n",
   "switch--compact": "lc-Switch-module__switch--compact___OGFIX",
   switch__input,
+  "switch__input--disabled": "lc-Switch-module__switch__input--disabled___Po8gh",
   switch__container,
   switch__track,
+  "switch__track--disabled": "lc-Switch-module__switch__track--disabled___HkDhl",
   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--basic--on": "lc-Switch-module__switch__slider--basic--on___mn3f9",
+  "switch__slider--basic--off": "lc-Switch-module__switch__slider--basic--off___MRoBu",
   "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"
+  "switch__slider--compact--on": "lc-Switch-module__switch__slider--compact--on___FykE3",
+  "switch__slider--compact--off": "lc-Switch-module__switch__slider--compact--off___s5yR8"
 };
 const baseClass$c = "switch";
-const Switch = (_S) => {
-  var _T = _S, {
+const Switch = (_O) => {
+  var _P = _O, {
     className = "",
     defaultOn = false,
     disabled = false,
@@ -2079,7 +2018,7 @@ const Switch = (_S) => {
     onChange = noop,
     size = "basic",
     innerRef
-  } = _T, props = __objRest(_T, [
+  } = _P, props = __objRest(_P, [
     "className",
     "defaultOn",
     "disabled",
@@ -2089,30 +2028,32 @@ const Switch = (_S) => {
     "size",
     "innerRef"
   ]);
-  const [enabled, setEnabled] = React.useState(() => on !== void 0 ? on : defaultOn);
+  const [checked, setChecked] = React.useState(() => on !== void 0 ? on : defaultOn);
   React.useEffect(() => {
     if (on !== void 0) {
-      setEnabled(on);
+      setChecked(on);
     }
   }, [on]);
-  const valueStyles = enabled ? "enabled" : "disabled";
+  const iconSize = size === "basic" ? "small" : "xsmall";
+  const toggleStyles = checked ? "on" : "off";
+  const availabilityStyles = disabled ? "disabled" : "enabled";
   const mergedClassNames = cx(styles$6[baseClass$c], styles$6[`${baseClass$c}--${size}`], className);
   const handleChange = (e) => {
     const hasOnChangePassed = onChange !== noop;
     if (hasOnChangePassed) {
-      onChange(e, enabled);
+      onChange(e, checked);
       return;
     }
     e.stopPropagation();
-    setEnabled((prevEnabled) => !prevEnabled);
+    setChecked((prevEnabled) => !prevEnabled);
   };
   return /* @__PURE__ */ React.createElement("span", {
     className: mergedClassNames
   }, /* @__PURE__ */ React.createElement("input", __spreadValues({
     type: "checkbox",
-    className: styles$6[`${baseClass$c}__input`],
+    className: cx(styles$6[`${baseClass$c}__input`], styles$6[`${baseClass$c}__input--${availabilityStyles}`]),
     onChange: handleChange,
-    checked: enabled,
+    checked,
     name,
     ref: innerRef,
     disabled,
@@ -2120,10 +2061,14 @@ const Switch = (_S) => {
   }, props)), /* @__PURE__ */ React.createElement("span", {
     className: styles$6[`${baseClass$c}__container`]
   }, /* @__PURE__ */ React.createElement("span", {
-    className: cx(styles$6[`${baseClass$c}__track`], styles$6[`${baseClass$c}__track--${valueStyles}`])
+    className: cx(styles$6[`${baseClass$c}__track`], styles$6[`${baseClass$c}__track--${toggleStyles}`], styles$6[`${baseClass$c}__track--${availabilityStyles}`])
   }), /* @__PURE__ */ React.createElement("span", {
-    className: cx(styles$6[`${baseClass$c}__slider`], styles$6[`${baseClass$c}__slider--${size}`], styles$6[`${baseClass$c}__slider--${size}--${valueStyles}`])
-  })));
+    className: cx(styles$6[`${baseClass$c}__slider`], styles$6[`${baseClass$c}__slider--${size}`], styles$6[`${baseClass$c}__slider--${size}--${toggleStyles}`])
+  }, disabled && /* @__PURE__ */ React.createElement(Icon, {
+    size: iconSize,
+    source: LockBlack,
+    kind: "primary"
+  }))));
 };
 const tab = "lc-Tab-module__tab___fME7u";
 const tab__description = "lc-Tab-module__tab__description___JGXU6";
@@ -2133,13 +2078,13 @@ var styles$5 = {
   "tab--selected": "lc-Tab-module__tab--selected___c0EkL"
 };
 const baseClass$b = "tab";
-const Tab = (_U) => {
-  var _V = _U, {
+const Tab = (_Q) => {
+  var _R = _Q, {
     children,
     className,
     description,
     isSelected
-  } = _V, restProps = __objRest(_V, [
+  } = _R, restProps = __objRest(_R, [
     "children",
     "className",
     "description",
@@ -2209,8 +2154,8 @@ const getCustomTextClass = (customColor) => {
   }
   return getContrast(customColor, "#FFFFFF") > 4.5 ? "text-white" : "text-black";
 };
-const Tag = (_W) => {
-  var _X = _W, {
+const Tag = (_S) => {
+  var _T = _S, {
     className = "",
     children,
     dismissible = false,
@@ -2221,7 +2166,7 @@ const Tag = (_W) => {
     icon: icon2,
     avatar,
     customColor
-  } = _X, restProps = __objRest(_X, [
+  } = _T, restProps = __objRest(_T, [
     "className",
     "children",
     "dismissible",
@@ -3087,4 +3032,4 @@ const UserGuide = (props) => {
     })
   }), props.children)) : null;
 };
-export { ANIMATION_TIME, ActionModal, Alert, Badge, Button, ButtonGroup, Card, Checkbox, CheckboxField, DesignTokens, EmailTagInput, FieldDescription, FieldError, FieldGroup, Form, FormGroup, Heading, Icon, Info, InputField, Interactive, Link, Loader, Modal, ModalBase, ModalCloseButton, ModalPortal, NumericInput, NumericInputField, Picker, Popover, ProgressBar, ProgressCircle, PromoBanner, RadioButton, SearchInput, Simple, Switch, Tab, TabsList, TabsWrapper, Tag, TagInput, Text, TextField, Toast, ToastWrapper, Tooltip, UserGuide };
+export { ANIMATION_TIME, ActionModal, Alert, Badge, Button, ButtonGroup, Card, Checkbox, DesignToken, EmailTagInput, FieldDescription, FieldError, FieldGroup, Form, FormField, FormGroup, Heading, Icon, Info, Input, Interactive, Link, Loader, Modal, ModalBase, ModalCloseButton, ModalPortal, NumericInput, Picker, Popover, ProgressBar, ProgressCircle, PromoBanner, RadioButton, SearchInput, Simple, SpacingToken, Switch, Tab, TabsList, TabsWrapper, Tag, TagInput, Text, Toast, ToastWrapper, Tooltip, UserGuide };