@livechat/design-system-react-components 1.0.0-alpha.1 → 1.0.0-alpha.12

package/dist/themes/dark.css

@@ -0,0 +1,129 @@
+.lc-dark-theme {
+  --background: #131317;
+  --surface-basic-default: #202024;
+  --surface-basic-subtle: #29292f;
+  --surface-basic-hover: rgba(255, 255, 255, 0.1);
+  --surface-basic-active: rgba(255, 255, 255, 0.2);
+  --surface-basic-disabled: #2d2d32;
+  --surface-secondary-default: #767680;
+  --surface-secondary-subtle: #3b3b43;
+  --surface-secondary-hover: #ababb1;
+  --surface-secondary-disabled: #3b3b43;
+  --surface-feedback-info: #323640;
+  --surface-feedback-negative: #3a3136;
+  --surface-feedback-warning: #3a362b;
+  --surface-feedback-positive: #263532;
+  --surface-invert-default: #eeeeef;
+  --surface-invert-subtle: #c9c9cd;
+  --surface-invert-disabled: #29292f;
+  --surface-overlay: rgba(19, 19, 23, 0.9);
+  --content-default: rgba(255, 255, 255, 0.8);
+  --content-subtle: rgba(255, 255, 255, 0.6);
+  --content-disabled: rgba(255, 255, 255, 0.4);
+  --content-white-locked: #fff;
+  --content-invert-default: #131317;
+  --content-invert-subtle: rgba(19, 19, 23, 0.7);
+  --content-invert-disabled: rgba(19, 19, 23, 0.3);
+  --border-default: rgba(255, 255, 255, 0.4);
+  --border-subtle: rgba(255, 255, 255, 0.1);
+  --border-hover: rgba(255, 255, 255, 0.6);
+  --border-disabled: rgba(255, 255, 255, 0.5);
+  --border-invert-default: rgba(19, 19, 23, 0.5);
+  --border-invert-subtle: rgba(19, 19, 23, 0.1);
+  --border-invert-hover: rgba(19, 19, 23, 0.7);
+  --border-invert-disabled: rgba(19, 19, 23, 0.3);
+  --color-action-active: #b6d5fb;
+  --color-action-hover: #8abbf9;
+  --color-action-default: #6daaf8;
+  --color-action-default-rgb: 157, 206, 255;
+  --color-action-disabled: #6daaf8;
+  --color-negative-active: #ffe5e5;
+  --color-negative-hover: #ffb7b7;
+  --color-negative-default: #ff4c4d;
+  --color-negative-disabled: rgba(255, 76, 77, 0.3);
+  --color-warning-default: #fed65e;
+  --color-warning-hover: #fedc89;
+  --color-positive-default: #00c057;
+  --color-positive-hover: #00e066;
+  --color-positive-disabled: #4d735e;
+  --color-bot: #50009c;
+  --color-black: #131317;
+  --color-white: #fff;
+  --decor-blue900: #003288;
+  --decor-blue800: #003fa4;
+  --decor-blue700: #004bc2;
+  --decor-blue600: #0059e1;
+  --decor-blue500: #06f;
+  --decor-blue400: #328dff;
+  --decor-blue300: #68afff;
+  --decor-blue200: #9dceff;
+  --decor-blue100: #daedff;
+  --decor-blue50: #f4faff;
+  --decor-orange900: #6c1d00;
+  --decor-orange800: #842600;
+  --decor-orange700: #9c2e00;
+  --decor-orange600: #b43700;
+  --decor-orange500: #d54300;
+  --decor-orange400: #ff5100;
+  --decor-orange300: #ff8a77;
+  --decor-orange200: #ffb8af;
+  --decor-orange100: #ffe5e3;
+  --decor-orange50: #fff8f7;
+  --decor-yellow900: #493700;
+  --decor-yellow800: #755b00;
+  --decor-yellow700: #c9a100;
+  --decor-yellow600: #e8bb00;
+  --decor-yellow500: #f3c600;
+  --decor-yellow400: #d1aa00;
+  --decor-yellow300: #fed65e;
+  --decor-yellow200: #fedc89;
+  --decor-yellow100: #fff2d6;
+  --decor-yellow50: #fff9ed;
+  --decor-gray950: #131317;
+  --decor-gray900: #1b1b20;
+  --decor-gray800: #29292f;
+  --decor-gray700: #3b3b43;
+  --decor-gray600: #4e4e58;
+  --decor-gray500: #62626d;
+  --decor-gray400: #767680;
+  --decor-gray300: #8d8d95;
+  --decor-gray200: #ababb1;
+  --decor-gray150: #c9c9cd;
+  --decor-gray100: #c9c9cd;
+  --decor-gray75: #eeeeef;
+  --decor-gray50: #e2e2e4;
+  --decor-gray40: #eeeeef;
+  --decor-gray20: #fcfcfc;
+  --decor-green900: #00431a;
+  --decor-green800: #005321;
+  --decor-green700: #006329;
+  --decor-green600: #007331;
+  --decor-green500: #00893c;
+  --decor-green400: #00a449;
+  --decor-green300: #00c057;
+  --decor-green200: #7edd92;
+  --decor-green100: #e4f4ed;
+  --decor-green50: #f3fcf4;
+  --decor-red900: #790002;
+  --decor-red800: #930002;
+  --decor-red700: #ae0003;
+  --decor-red600: #ca0005;
+  --decor-red500: #ee0007;
+  --decor-red400: #ff4c4d;
+  --decor-red300: #ff8889;
+  --decor-red200: #ffb7b7;
+  --decor-red100: #ffe5e5;
+  --decor-red50: #fff8f8;
+  --decor-purple900: #50009c;
+  --decor-purple800: #6100bd;
+  --decor-purple700: #7400df;
+  --decor-purple600: #8609ff;
+  --decor-purple500: #9146ff;
+  --decor-purple400: #a372ff;
+  --decor-purple300: #b99aff;
+  --decor-purple200: #d1c0ff;
+  --decor-purple100: #eee8ff;
+  --decor-purple50: #faf8ff;
+}
+
+/*# sourceMappingURL=dark.css.map */

package/dist/themes/dark.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../src/themes/dark.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"dark.css"}

package/dist/themes/legacy.css

@@ -0,0 +1,130 @@
+:root,
+.lc-legacy-theme {
+  --background: #fff;
+  --surface-basic-default: #fff;
+  --surface-basic-subtle: #f1f6f8;
+  --surface-basic-hover: #e0e8eb;
+  --surface-basic-active: #dae4eb;
+  --surface-basic-disabled: #eaedf0;
+  --surface-secondary-default: #bdc7d1;
+  --surface-secondary-subtle: #e4e8ec;
+  --surface-secondary-hover: #a0a6ab;
+  --surface-secondary-disabled: #dee3e8;
+  --surface-feedback-info: #e5f3ff;
+  --surface-feedback-negative: #fbeaed;
+  --surface-feedback-warning: #fff8e0;
+  --surface-feedback-positive: #e6f4ec;
+  --surface-invert-default: #424d57;
+  --surface-invert-subtle: #677179;
+  --surface-invert-disabled: #a0a6ab;
+  --surface-overlay: rgba(0, 0, 0, 0.7);
+  --content-default: #424d57;
+  --content-subtle: #677179;
+  --content-disabled: #a0a6ab;
+  --content-white-locked: #fff;
+  --content-invert-default: #fff;
+  --content-invert-subtle: rgba(255, 255, 255, 0.7);
+  --content-invert-disabled: rgba(255, 255, 255, 0.5);
+  --border-default: #bdc7d1;
+  --border-subtle: #e4e8ec;
+  --border-hover: #a0a6ab;
+  --border-disabled: #dee3e8;
+  --border-invert-default: rgba(255, 255, 255, 0.7);
+  --border-invert-subtle: rgba(255, 255, 255, 0.3);
+  --border-invert-hover: #fff;
+  --border-invert-disabled: rgba(255, 255, 255, 0.5);
+  --color-action-active: #295fbc;
+  --color-action-hover: #4379d6;
+  --color-action-default: #4284f5;
+  --color-action-default-rgb: 66, 132, 245;
+  --color-action-disabled: #a3c3fa;
+  --color-negative-active: #94383a;
+  --color-negative-hover: #b94648;
+  --color-negative-default: #d74747;
+  --color-negative-disabled: #eba3a3;
+  --color-warning-default: #fbbd04;
+  --color-warning-hover: #f99a01;
+  --color-positive-default: #22aa61;
+  --color-positive-hover: #0d874a;
+  --color-positive-disabled: #90d5c4;
+  --color-bot: #6b5aba;
+  --color-black: #424d57;
+  --color-white: #fff;
+  --decor-blue900: #003288;
+  --decor-blue800: #003fa4;
+  --decor-blue700: #004bc2;
+  --decor-blue600: #0059e1;
+  --decor-blue500: #06f;
+  --decor-blue400: #328dff;
+  --decor-blue300: #68afff;
+  --decor-blue200: #9dceff;
+  --decor-blue100: #daedff;
+  --decor-blue50: #f4faff;
+  --decor-orange900: #6c1d00;
+  --decor-orange800: #842600;
+  --decor-orange700: #9c2e00;
+  --decor-orange600: #b43700;
+  --decor-orange500: #d54300;
+  --decor-orange400: #ff5100;
+  --decor-orange300: #ff8a77;
+  --decor-orange200: #ffb8af;
+  --decor-orange100: #ffe5e3;
+  --decor-orange50: #fff8f7;
+  --decor-yellow900: #493700;
+  --decor-yellow800: #755b00;
+  --decor-yellow700: #c9a100;
+  --decor-yellow600: #e8bb00;
+  --decor-yellow500: #f3c600;
+  --decor-yellow400: #d1aa00;
+  --decor-yellow300: #fed65e;
+  --decor-yellow200: #fedc89;
+  --decor-yellow100: #fff2d6;
+  --decor-yellow50: #fff9ed;
+  --decor-gray950: #131317;
+  --decor-gray900: #1b1b20;
+  --decor-gray800: #29292f;
+  --decor-gray700: #3b3b43;
+  --decor-gray600: #4e4e58;
+  --decor-gray500: #62626d;
+  --decor-gray400: #767680;
+  --decor-gray300: #8d8d95;
+  --decor-gray200: #ababb1;
+  --decor-gray150: #c9c9cd;
+  --decor-gray100: #c9c9cd;
+  --decor-gray75: #eeeeef;
+  --decor-gray50: #e2e2e4;
+  --decor-gray40: #eeeeef;
+  --decor-gray20: #fcfcfc;
+  --decor-green900: #00431a;
+  --decor-green800: #005321;
+  --decor-green700: #006329;
+  --decor-green600: #007331;
+  --decor-green500: #00893c;
+  --decor-green400: #00a449;
+  --decor-green300: #00c057;
+  --decor-green200: #7edd92;
+  --decor-green100: #e4f4ed;
+  --decor-green50: #f3fcf4;
+  --decor-red900: #790002;
+  --decor-red800: #930002;
+  --decor-red700: #ae0003;
+  --decor-red600: #ca0005;
+  --decor-red500: #ee0007;
+  --decor-red400: #ff4c4d;
+  --decor-red300: #ff8889;
+  --decor-red200: #ffb7b7;
+  --decor-red100: #ffe5e5;
+  --decor-red50: #fff8f8;
+  --decor-purple900: #50009c;
+  --decor-purple800: #6100bd;
+  --decor-purple700: #7400df;
+  --decor-purple600: #8609ff;
+  --decor-purple500: #9146ff;
+  --decor-purple400: #a372ff;
+  --decor-purple300: #b99aff;
+  --decor-purple200: #d1c0ff;
+  --decor-purple100: #eee8ff;
+  --decor-purple50: #faf8ff;
+}
+
+/*# sourceMappingURL=legacy.css.map */

package/dist/themes/legacy.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../src/themes/legacy.scss"],"names":[],"mappings":"AAAA;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"legacy.css"}

package/dist/themes/light.css

@@ -0,0 +1,129 @@
+.lc-light-theme {
+  --background: #fff;
+  --surface-basic-default: #fff;
+  --surface-basic-subtle: #f6f6f7;
+  --surface-basic-hover: #e2e2e4;
+  --surface-basic-active: #c9c9cd;
+  --surface-basic-disabled: #f6f6f7;
+  --surface-secondary-default: #c9c9cd;
+  --surface-secondary-subtle: #e4e8ec;
+  --surface-secondary-hover: #ababb1;
+  --surface-secondary-disabled: #eeeeef;
+  --surface-feedback-info: #daedff;
+  --surface-feedback-negative: #ffe5e5;
+  --surface-feedback-warning: #fff2d6;
+  --surface-feedback-positive: #e4f4ed;
+  --surface-invert-default: #1b1b20;
+  --surface-invert-subtle: #4e4e58;
+  --surface-invert-disabled: #8d8d95;
+  --surface-overlay: rgba(19, 19, 23, 0.7);
+  --content-default: #131317;
+  --content-subtle: #62626d;
+  --content-disabled: #8d8d95;
+  --content-white-locked: #fff;
+  --content-invert-default: #fff;
+  --content-invert-subtle: rgba(255, 255, 255, 0.7);
+  --content-invert-disabled: rgba(255, 255, 255, 0.5);
+  --border-default: #c9c9cd;
+  --border-subtle: #eeeeef;
+  --border-hover: #ababb1;
+  --border-disabled: #e2e2e4;
+  --border-invert-default: rgba(255, 255, 255, 0.7);
+  --border-invert-subtle: rgba(255, 255, 255, 0.3);
+  --border-invert-hover: #fff;
+  --border-invert-disabled: rgba(255, 255, 255, 0.5);
+  --color-action-active: #003fa4;
+  --color-action-hover: #004bc2;
+  --color-action-default: #06f;
+  --color-action-default-rgb: 0, 102, 255;
+  --color-action-disabled: #9dceff;
+  --color-negative-active: #930002;
+  --color-negative-hover: #ae0003;
+  --color-negative-default: #ca0005;
+  --color-negative-disabled: #eba3a3;
+  --color-warning-default: #e8bb00;
+  --color-warning-hover: #c9a100;
+  --color-positive-default: #00893c;
+  --color-positive-hover: #006329;
+  --color-positive-disabled: #d1f4d5;
+  --color-bot: #50009c;
+  --color-black: #131317;
+  --color-white: #fff;
+  --decor-blue900: #003288;
+  --decor-blue800: #003fa4;
+  --decor-blue700: #004bc2;
+  --decor-blue600: #0059e1;
+  --decor-blue500: #06f;
+  --decor-blue400: #328dff;
+  --decor-blue300: #68afff;
+  --decor-blue200: #9dceff;
+  --decor-blue100: #daedff;
+  --decor-blue50: #f4faff;
+  --decor-orange900: #6c1d00;
+  --decor-orange800: #842600;
+  --decor-orange700: #9c2e00;
+  --decor-orange600: #b43700;
+  --decor-orange500: #d54300;
+  --decor-orange400: #ff5100;
+  --decor-orange300: #ff8a77;
+  --decor-orange200: #ffb8af;
+  --decor-orange100: #ffe5e3;
+  --decor-orange50: #fff8f7;
+  --decor-yellow900: #493700;
+  --decor-yellow800: #755b00;
+  --decor-yellow700: #c9a100;
+  --decor-yellow600: #e8bb00;
+  --decor-yellow500: #f3c600;
+  --decor-yellow400: #d1aa00;
+  --decor-yellow300: #fed65e;
+  --decor-yellow200: #fedc89;
+  --decor-yellow100: #fff2d6;
+  --decor-yellow50: #fff9ed;
+  --decor-gray950: #131317;
+  --decor-gray900: #1b1b20;
+  --decor-gray800: #29292f;
+  --decor-gray700: #3b3b43;
+  --decor-gray600: #4e4e58;
+  --decor-gray500: #62626d;
+  --decor-gray400: #767680;
+  --decor-gray300: #8d8d95;
+  --decor-gray200: #ababb1;
+  --decor-gray150: #c9c9cd;
+  --decor-gray100: #c9c9cd;
+  --decor-gray75: #eeeeef;
+  --decor-gray50: #e2e2e4;
+  --decor-gray40: #eeeeef;
+  --decor-gray20: #fcfcfc;
+  --decor-green900: #00431a;
+  --decor-green800: #005321;
+  --decor-green700: #006329;
+  --decor-green600: #007331;
+  --decor-green500: #00893c;
+  --decor-green400: #00a449;
+  --decor-green300: #00c057;
+  --decor-green200: #7edd92;
+  --decor-green100: #e4f4ed;
+  --decor-green50: #f3fcf4;
+  --decor-red900: #790002;
+  --decor-red800: #930002;
+  --decor-red700: #ae0003;
+  --decor-red600: #ca0005;
+  --decor-red500: #ee0007;
+  --decor-red400: #ff4c4d;
+  --decor-red300: #ff8889;
+  --decor-red200: #ffb7b7;
+  --decor-red100: #ffe5e5;
+  --decor-red50: #fff8f8;
+  --decor-purple900: #50009c;
+  --decor-purple800: #6100bd;
+  --decor-purple700: #7400df;
+  --decor-purple600: #8609ff;
+  --decor-purple500: #9146ff;
+  --decor-purple400: #a372ff;
+  --decor-purple300: #b99aff;
+  --decor-purple200: #d1c0ff;
+  --decor-purple100: #eee8ff;
+  --decor-purple50: #faf8ff;
+}
+
+/*# sourceMappingURL=light.css.map */

package/dist/themes/light.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../src/themes/light.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"light.css"}

package/package.json

@@ -1,67 +1,80 @@
 {
   "name": "@livechat/design-system-react-components",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.12",
   "description": "",
   "publishConfig": {
     "access": "public"
   },
   "author": "",
   "license": "ISC",
-  "source": "src/index.ts",
-  "exports": "./dist/index.modern.js",
-  "main": "./dist/index.js",
-  "module": "./dist/index.module.js",
-  "unpkg": "./dist/index.umd.js",
-  "types": "dist/index.d.ts",
-  "styles": "dist/index.css",
+  "main": "./dist/dsrc.cjs.js",
+  "module": "./dist/dsrc.es.js",
+  "unpkg": "./dist/dsrc.umd.js",
+  "types": "./dist/src/index.d.ts",
   "files": [
     "dist"
   ],
   "scripts": {
     "dev": "run-p dev:*",
     "dev:storybook": "start-storybook -p 6006 --quiet",
-    "dev:lib": "microbundle watch --jsxImportSource react --jsx 'React.createElement'",
-    "build": "microbundle --jsxImportSource react --jsx 'React.createElement'",
+    "dev:lib": "vite build -w",
+    "dev:styles": "npm run build:styles -- --watch",
+    "build": "run-s build:*",
+    "build:lib": "tsc && vite build",
+    "build:styles": "sass src/themes:dist/themes",
     "build-storybook": "build-storybook",
     "chromatic": "dotenv -e ../../.env chromatic -- --exit-zero-on-changes",
     "lint": "eslint src --ext js,jsx,ts,tsx",
-    "test": "jest --ci",
-    "test:watch": "jest --watch"
+    "test": "vitest run",
+    "test:watch": "vitest watch",
+    "test:coverage": "vitest run --coverage"
   },
   "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": ">= 17.0.2",
+    "react-dom": ">= 17.0.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.5",
-    "@babel/preset-env": "^7.15.6",
-    "@babel/preset-react": "^7.14.5",
-    "@babel/preset-typescript": "^7.15.0",
-    "@storybook/addon-actions": "^6.3.8",
-    "@storybook/addon-essentials": "^6.3.8",
-    "@storybook/addon-links": "^6.3.8",
-    "@storybook/react": "^6.3.8",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.1.0",
-    "@testing-library/user-event": "^13.4.2",
-    "@types/jest": "^27.0.1",
-    "@types/react": "^17.0.20",
+    "@babel/core": "^7.17.7",
+    "@storybook/addon-actions": "^6.4.22",
+    "@storybook/addon-docs": "^6.4.22",
+    "@storybook/addon-essentials": "^6.4.22",
+    "@storybook/addon-links": "^6.4.22",
+    "@storybook/builder-vite": "^0.1.28",
+    "@storybook/core-common": "^6.4.22",
+    "@storybook/react": "^6.4.22",
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/react": "^12.1.4",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/lodash.debounce": "^4.0.6",
+    "@types/lodash.escape": "^4.0.6",
+    "@types/react": "^17.0.33",
     "@types/react-dom": "^17.0.10",
-    "babel-jest": "^27.2.0",
-    "babel-loader": "^8.2.2",
+    "@types/react-transition-group": "^4.4.4",
+    "@vitejs/plugin-react": "^1.0.7",
+    "babel-loader": "^8.2.3",
     "chromatic": "^5.9.2",
-    "jest": "^27.2.0",
-    "microbundle": "^0.14.0",
+    "jsdom": "^19.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-material-icon-svg": "1.7.0",
-    "typescript": "^4.4.2"
+    "sass": "^1.49.9",
+    "storybook-addon-themes": "^6.1.0",
+    "typescript": "^4.5.4",
+    "vite": "^2.8.0",
+    "vite-plugin-dts": "^0.9.10",
+    "vitest": "^0.6.3"
   },
   "dependencies": {
-    "@livechat/design-system-icons": "^1.0.0-alpha.1",
-    "@livechat/design-system-styles": "^1.0.0-alpha.1",
-    "classnames": "^2.3.1",
+    "@emotion/css": "^11.9.0",
+    "@floating-ui/react-dom": "^0.7.0",
+    "@livechat/data-utils": "^0.2.16",
+    "@livechat/design-system-icons": "^1.0.0-alpha.12",
+    "@popperjs/core": "^2.11.2",
+    "clsx": "^1.1.1",
+    "lodash.debounce": "^4.0.8",
+    "lodash.escape": "^4.0.1",
+    "polished": "^4.1.3",
+    "react-popper": "^2.2.5",
     "react-transition-group": "^4.4.2"
   },
-  "gitHead": "6c822898a1f9bd07623e6ec91e1e609458730e16"
+  "gitHead": "091a933059ed675eea7cb11013a3160a603fd2f1"
 }

package/dist/components/Alert.d.ts

@@ -1,19 +0,0 @@
-import * as React from 'react';
-export declare enum AlertSize {
-    Small = "small",
-    Medium = "medium",
-    Large = "large"
-}
-export declare enum AlertType {
-    Info = "info",
-    Warning = "warning",
-    Success = "success",
-    Error = "error"
-}
-export interface IAlertProps {
-    className?: string;
-    size?: AlertSize;
-    type?: AlertType;
-    onClose?: () => void;
-}
-export declare const Alert: React.FC<IAlertProps>;

package/dist/components/Alert.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/AlertIcon.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-import { AlertType } from './Alert';
-interface IAlertIconProps {
-    type: AlertType;
-}
-export declare const AlertIcon: React.FC<IAlertIconProps>;
-export {};

package/dist/components/Badge.d.ts

@@ -1,6 +0,0 @@
-import * as React from 'react';
-export interface IBadgeProps {
-    secondary?: boolean;
-    className?: string;
-}
-export declare const Badge: React.FC<IBadgeProps>;

package/dist/components/Badge.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/Button.d.ts

@@ -1,12 +0,0 @@
-import * as React from 'react';
-export interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    kind?: 'basic' | 'primary' | 'secondary' | 'destructive' | 'text';
-    size?: 'compact' | 'medium' | 'large';
-    disabled?: boolean;
-    loading?: boolean;
-    fullWidth?: boolean;
-    loaderLabel?: string;
-    icon?: React.ReactElement;
-    iconPosition?: 'left' | 'right';
-}
-export declare const Button: React.FC<Props>;

package/dist/components/Button.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/Card.d.ts

@@ -1,6 +0,0 @@
-import * as React from 'react';
-export interface ICardProps extends React.HTMLAttributes<HTMLDivElement> {
-    title: string;
-    img?: string;
-}
-export declare const Card: React.FC<ICardProps>;

package/dist/components/Card.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/Checkbox.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-export interface ICheckboxProps extends React.HTMLAttributes<HTMLInputElement> {
-    className?: string;
-    checked?: boolean;
-    disabled?: boolean;
-}
-export declare const Checkbox: React.FC<ICheckboxProps>;

package/dist/components/CheckboxField.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/FieldDescription.d.ts

@@ -1,3 +0,0 @@
-import * as React from 'react';
-export declare type IFieldDescriptionProps = React.HTMLAttributes<HTMLSpanElement>;
-export declare const FieldDescription: React.FC<IFieldDescriptionProps>;

package/dist/components/FieldError.d.ts

@@ -1,3 +0,0 @@
-import * as React from 'react';
-export declare type IFieldErrorProps = React.HTMLAttributes<HTMLSpanElement>;
-export declare const FieldError: React.FC<IFieldErrorProps>;

package/dist/components/FieldGroup.d.ts

@@ -1,8 +0,0 @@
-import * as React from 'react';
-export interface IFieldGroupProps extends React.HTMLAttributes<HTMLDivElement> {
-    description?: React.ReactNode;
-    error?: string;
-    inline?: boolean;
-    stretch?: boolean;
-}
-export declare const FieldGroup: React.FC<IFieldGroupProps>;

package/dist/components/FieldGroup.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/FieldLabel.d.ts

@@ -1,3 +0,0 @@
-import * as React from 'react';
-export declare type IFieldLabelProps = React.HTMLAttributes<HTMLSpanElement>;
-export declare const FieldLabel: React.FC<IFieldLabelProps>;

package/dist/components/Form.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-export interface IFormProps extends React.HTMLAttributes<HTMLFormElement> {
-    labelText?: string;
-    helperText?: string;
-    formFooter?: React.ReactNode;
-}
-export declare const Form: React.FC<IFormProps>;

package/dist/components/Form.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/FormGroup.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-export interface IFormGroupProps extends React.HTMLAttributes<HTMLDivElement> {
-    className?: string;
-    labelText?: string;
-    helperText?: string;
-}
-export declare const FormGroup: React.FC<IFormGroupProps>;

package/dist/components/FormGroup.spec.d.ts

@@ -1 +0,0 @@
-export {};