@inploi/plugin-chatbot 3.7.0 → 3.9.0

package/dist/{job-application-content-43128b7f.cjs → job-application-content-cdd9aeb2.cjs}

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("./index-09e54786.cjs");
+const index = require("./index-210f3179.cjs");
 require("@inploi/sdk");
+const kbToReadableSize = (kb) => index.N(kb).with(index._.number.lte(1e3), () => `${Math.round(kb)}KB`).with(index._.number.lt(1e3 * 10), () => `${(kb / 1e3).toFixed(1)}MB`).otherwise(() => `${Math.round(kb / 1e3)}MB`);
 const getHeadOrThrow = (nodes) => {
   const head = nodes.find((n2) => n2.isHead);
   if (!head)
@@ -235,8 +236,6 @@ async function interpretSubmitNode({
     method: "POST",
     body: JSON.stringify({
       ...context,
-      type: node.data.type,
-      ats: node.data.ats,
       integration_id: node.data.integrationId,
       anonymous_id: analytics.getAnonymousId(),
       submissions: getApplicationSubmissionsPayload(submissions || {})
@@ -287,12 +286,13 @@ async function interpretSubmitNode({
 async function interpretLinkNode({
   chat,
   next,
-  node
+  node,
+  submissions
 }) {
   await chat.sendMessage({
     type: "link",
     href: node.data.href,
-    text: node.data.cta
+    text: interpolateString(node.data.cta, submissions)
   });
   next(node.nextId);
 }
@@ -307,12 +307,13 @@ async function interpretIfBlockNode({
 async function interpretTextNode({
   chat,
   next,
-  node
+  node,
+  submissions
 }) {
   await chat.sendMessage({
     author: "bot",
     type: "text",
-    text: node.data.text
+    text: interpolateString(node.data.text, submissions)
   });
   next(node.nextId);
 }
@@ -333,12 +334,13 @@ async function interpretImageNode({
 async function interpretQuestionTextNode({
   chat,
   next,
-  node
+  node,
+  submissions
 }) {
   await chat.sendMessage({
     author: "bot",
     type: "text",
-    text: node.data.question
+    text: interpolateString(node.data.question, submissions)
   });
   const reply = await chat.userInput({
     key: node.data.key,
@@ -367,12 +369,13 @@ async function interpretQuestionTextNode({
 async function interpretQuestionNumberNode({
   chat,
   next,
-  node
+  node,
+  submissions
 }) {
   await chat.sendMessage({
     author: "bot",
     type: "text",
-    text: node.data.question
+    text: interpolateString(node.data.question, submissions)
   });
   const reply = await chat.userInput({
     key: node.data.key,
@@ -401,12 +404,13 @@ async function interpretQuestionNumberNode({
 async function interpretQuestionEnumNode({
   chat,
   next,
-  node
+  node,
+  submissions
 }) {
   await chat.sendMessage({
     author: "bot",
     type: "text",
-    text: node.data.question
+    text: interpolateString(node.data.question, submissions)
   });
   const reply = await chat.userInput({
     key: node.data.key,
@@ -431,12 +435,13 @@ async function interpretQuestionEnumNode({
 async function interpretQuestionBooleanNode({
   chat,
   next,
-  node
+  node,
+  submissions
 }) {
   await chat.sendMessage({
     author: "bot",
     type: "text",
-    text: node.data.question
+    text: interpolateString(node.data.question, submissions)
   });
   const input = await chat.userInput({
     key: node.data.key,
@@ -468,27 +473,205 @@ async function interpretQuestionBooleanNode({
   }
   next(node.nextId);
 }
+const dummyDivBecauseGoogleRequiresIt = document.createElement("div");
+const keyToAddressComponnents = {
+  line1: ["street_number", "floor", "room", "premise"],
+  line2: ["subpremise", "street_address", "route"],
+  line3: ["sublocality", "neighborhood"],
+  city: ["locality", "postal_town"],
+  state: ["administrative_area_level_1"],
+  postcode: ["postal_code"],
+  country: ["country"]
+};
+const fieldMapKeys = Object.keys(keyToAddressComponnents);
 async function interpretQuestionAddressNode({
   chat,
   next,
-  node
+  node,
+  logger
 }) {
+  const {
+    google
+  } = window;
   await chat.sendMessage({
     author: "bot",
     type: "text",
-    text: "Address questions are not implemented yet"
+    text: node.data.question
   });
-  next(node.nextId);
+  const askForAddress = async (defaultValues) => {
+    const addressFields = [{
+      label: "Postcode",
+      key: node.data.keys.postcode,
+      optional: false,
+      defaultValue: defaultValues.postcode
+    }, {
+      label: "Line 1",
+      key: node.data.keys.line1,
+      optional: false,
+      defaultValue: defaultValues.line1
+    }, {
+      label: "Line 2",
+      key: node.data.keys.line2,
+      optional: true,
+      defaultValue: defaultValues.line2
+    }, {
+      label: "Line 3",
+      key: node.data.keys.line3,
+      optional: true,
+      defaultValue: defaultValues.line3
+    }, {
+      label: "City",
+      key: node.data.keys.city,
+      optional: false,
+      defaultValue: defaultValues.city
+    }, {
+      label: "State/County/Province",
+      key: node.data.keys.state,
+      optional: true,
+      defaultValue: defaultValues.state
+    }, {
+      label: "Country",
+      key: node.data.keys.country,
+      optional: false,
+      defaultValue: defaultValues.country
+    }];
+    for (const field of addressFields) {
+      await chat.sendMessage({
+        author: "bot",
+        type: "text",
+        text: field.label
+      });
+      const {
+        value
+      } = await chat.userInput({
+        type: "text",
+        key: field.key,
+        config: {
+          format: "text",
+          optional: field.optional,
+          defaultValue: field.defaultValue
+        }
+      });
+      if (value === null) {
+        await chat.sendMessage({
+          type: "system",
+          variant: "info",
+          text: "Skipped"
+        });
+      } else {
+        await chat.sendMessage({
+          author: "user",
+          type: "text",
+          text: value
+        });
+      }
+    }
+  };
+  if (!index.hasProp(window, "google") || !index.hasProp(window.google, "maps") || !index.hasProp(window.google.maps, "places")) {
+    logger.warn("Google maps not available, falling back to manual input.");
+    logger.info("If you’d like to use the address autocomplete, please insert the google maps API snippet in your website and make sure it has access to the *places* library.");
+    await askForAddress({});
+    return next(node.nextId);
+  }
+  const autocomplete = new google.maps.places.AutocompleteService();
+  const places = new google.maps.places.PlacesService(dummyDivBecauseGoogleRequiresIt);
+  const {
+    value: search
+  } = await chat.userInput({
+    type: "text",
+    key: "_internal-address-search",
+    config: {
+      format: "text",
+      optional: false,
+      placeholder: "Search for your address"
+    }
+  });
+  if (search === null)
+    return next(node.id);
+  await chat.sendMessage({
+    author: "user",
+    type: "text",
+    text: `Search for “${search}”`
+  });
+  const {
+    predictions
+  } = await autocomplete.getPlacePredictions({
+    input: search
+  });
+  const {
+    value: [selected]
+  } = await chat.userInput({
+    type: "multiple-choice",
+    key: void 0,
+    config: {
+      options: predictions.slice(0, 4).map((p) => ({
+        label: p.description,
+        value: p.place_id
+      })).concat({
+        label: "None of these",
+        value: "none"
+      }),
+      maxSelected: 1,
+      minSelected: 1
+    }
+  });
+  if (!selected || selected === "none") {
+    return next(node.id);
+  }
+  const result = await new Promise((resolve, reject) => places.getDetails({
+    placeId: selected,
+    fields: ["address_components"]
+  }, (result2, status) => {
+    if (status !== google.maps.places.PlacesServiceStatus["OK"])
+      return reject(status);
+    if (result2 === null)
+      return reject("ZERO_RESULTS");
+    return resolve({
+      ok: true,
+      place: result2
+    });
+  })).catch(async (e) => {
+    logger.error("Failed to get address details", e);
+    return {
+      ok: false
+    };
+  });
+  if (result.ok === false) {
+    await chat.sendMessage({
+      type: "system",
+      variant: "error",
+      text: "Failed to get address details"
+    });
+    await askForAddress({});
+    return next(node.id);
+  }
+  const addressComponents = result.place.address_components;
+  const autoFilledInputs = addressComponents ? fieldMapKeys.reduce((acc, key) => {
+    const componentTypes = keyToAddressComponnents[key];
+    const value = addressComponents.filter((component) => component.types.some((type) => componentTypes.includes(type))).map((component) => component.long_name).join(", ");
+    if (value) {
+      acc[key] = value;
+    }
+    return acc;
+  }, {}) : {};
+  await chat.sendMessage({
+    author: "bot",
+    type: "text",
+    text: "Please confirm or adjust your address:"
+  });
+  await askForAddress(autoFilledInputs);
+  return next(node.nextId);
 }
 async function interpretQuestionFileNode({
   node,
   chat,
-  next
+  next,
+  submissions
 }) {
   await chat.sendMessage({
     author: "bot",
     type: "text",
-    text: node.data.question
+    text: interpolateString(node.data.question, submissions)
   });
   const files = await chat.userInput({
     key: node.data.key,
@@ -577,11 +760,33 @@ const isIfBlockConditionMet = (ifBlock, submissions) => {
     }
   }, () => false).exhaustive();
 };
+const interpolateString = (str, context) => {
+  const regex = /{{\s*([^}]+?)\s*(?:\|\s*([^}]+?)\s*)?}}/g;
+  return str.replace(regex, (match2, key, defaultValue = "") => {
+    key = key.trim();
+    const submission = context == null ? void 0 : context[key];
+    if (!submission)
+      return defaultValue;
+    switch (submission.type) {
+      case "boolean":
+        return submission.value === "true" ? "true" : "false";
+      case "file":
+        if (!submission.value)
+          return "no files";
+        return submission.value.map((file) => `${file.name} (${kbToReadableSize(file.sizeKb)})`).join(", ");
+      case "multiple-choice":
+        return submission.value.join(", ");
+      default:
+        return submission.value || defaultValue;
+    }
+  });
+};
 const SendButton = ({
   class: className,
   ...props
 }) => index.o("button", {
-  class: index.clsx("bg-accent-7 active:bg-accent-10 active:text-accent-2 text-lowest pointer-coarse:touch-hitbox focus-visible:ring-accent-7/50 flex-shrink-0 rounded-full p-2 transition-all focus:outline-none focus-visible:ring-4 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", className),
+  class: index.clsx("bg-accent-9 active:bg-accent-10 pointer-coarse:touch-hitbox fr flex-shrink-0 rounded-full p-2 text-white transition-all disabled:cursor-not-allowed disabled:opacity-50", className),
+  type: "submit",
   ...props,
   children: index.o("svg", {
     class: "block",
@@ -605,7 +810,8 @@ const SkipButton = ({
   class: className,
   ...props
 }) => index.o("button", {
-  class: index.clsx("focus-visible:ring-accent-7/50 text-neutral-9 flex flex-shrink-0 items-center justify-center gap-1 rounded-full py-[6px] pl-2 pr-3 text-sm underline-offset-2 transition-all focus:outline-none focus-visible:ring-4 focus-visible:ring-offset-2", className),
+  type: "button",
+  class: index.clsx("fr text-neutral-9 flex flex-shrink-0 items-center justify-center gap-1 rounded-full py-[6px] pl-2 pr-3 text-sm underline-offset-2 transition-all", className),
   ...props,
   children: [index.o("svg", {
     class: "block",
@@ -668,7 +874,7 @@ const ChatInputBoolean = ({
           type: "submit",
           name: FIELD_NAME,
           value,
-          class: "bg-lowest ease-expo-out ring-neutral-12/5 text-neutral-12 active:ring-accent-7 active:bg-accent-2 active:text-accent-11 fr duration-snappy block flex-1 overflow-hidden rounded-2xl px-2.5 py-2.5 ring-2 transition-all selection:bg-transparent",
+          class: "bg-lowest ease-expo-out ring-divider text-neutral-12 active:ring-accent-7 active:bg-accent-2 active:text-accent-11 fr block flex-1 overflow-hidden rounded-2xl px-2.5 py-2.5 ring-2 transition-all selection:bg-transparent",
           children: index.o("p", {
             class: "truncate text-center text-base",
             children: input.config.labels[value]
@@ -700,7 +906,7 @@ const InputError = ({
     role: "alert",
     class: "text-error-11 flex max-w-full items-center gap-1 overflow-hidden rounded-full px-2 py-2",
     children: [index.o("svg", {
-      class: "text-error-10 h-4 w-4",
+      class: "text-error-9 h-4 w-4",
       viewBox: "0 0 16 16",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
@@ -739,7 +945,6 @@ const toBase64 = (file) => new Promise((resolve, reject) => {
   };
   reader.onerror = reject;
 });
-const kbToReadableSize = (kb) => index.N(kb).with(index._.number.lte(1e3), () => `${Math.round(kb)}KB`).with(index._.number.lt(1e3 * 10), () => `${(kb / 1e3).toFixed(1)}MB`).otherwise(() => `${Math.round(kb / 1e3)}MB`);
 const addFileSizesKb = (files) => files.reduce((acc, cur) => acc + cur.sizeKb, 0);
 const isFileSubmission = isSubmissionOfType("file");
 const FILENAMES_TO_SHOW_QTY = 3;
@@ -751,7 +956,7 @@ const FileThumbnail = ({
   const extension = file.name.split(".").pop();
   const fileName = file.name.replace(new RegExp(`.${extension}$`), "");
   return index.o("div", {
-    class: index.clsx("bg-accent-1 outline-neutral-4 flex max-w-full gap-2 overflow-hidden rounded-lg px-3 py-2 text-sm outline", className),
+    class: index.clsx("bg-accent-1 outline-accent-4 flex max-w-full gap-2 overflow-hidden rounded-lg px-3 py-2 text-sm outline", className),
     ...props,
     children: [index.o("p", {
       "aria-label": "File name",
@@ -764,7 +969,7 @@ const FileThumbnail = ({
       })]
     }), index.o("p", {
       "aria-label": "File size",
-      class: "text-neutral-10",
+      class: "text-accent-11",
       children: kbToReadableSize(file.sizeKb)
     })]
   });
@@ -858,7 +1063,7 @@ const ChatInputFile = ({
                 d: "M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
               })
             }), index.o("p", {
-              class: "text-neutral-12 tracking-[-0.01em] dark:text-gray-400",
+              class: "text-neutral-12 tracking-[-0.01em]",
               children: [input.config.allowMultiple ? "Select files" : "Select a file", " to upload"]
             }), input.config.fileSizeLimitKib ? index.o("p", {
               class: "text-neutral-10 text-xs",
@@ -2424,7 +2629,7 @@ const ChatInputMultipleChoice = ({
     resolver: getResolver$1(input.config)
   });
   const focusRef = useFocusOnMount();
-  const isSingleChoice = input.config.minSelected === 1 && input.config.maxSelected === 1;
+  const isSingleChoice = (input.config.minSelected === 1 || input.config.minSelected === void 0) && input.config.maxSelected === 1;
   return index.o("form", {
     noValidate: true,
     class: "flex flex-col gap-1 pr-2.5",
@@ -2467,7 +2672,7 @@ const ChatInputMultipleChoice = ({
               class: "peer sr-only h-full",
               type: "checkbox"
             }), index.o("label", {
-              class: "bg-lowest peer-focus-visible:ring-accent-7 active:outline-neutral-10 ease-expo-out outline-neutral-12/5 text-neutral-11 peer-checked:outline-accent-7 peer-checked:bg-accent-2 peer-checked:text-accent-9 duration-snappy block rounded-2xl px-2.5 py-1 outline outline-2 ring-0 ring-transparent transition-all selection:bg-transparent peer-focus-visible:ring-4 peer-focus-visible:ring-offset-2",
+              class: "bg-lowest peer-focus-visible:ring-accent-7 active:outline-neutral-10 ease-expo-out outline-divider text-neutral-11 peer-checked:outline-accent-7 peer-checked:bg-accent-2 peer-checked:text-accent-9 block rounded-2xl px-2.5 py-1 outline outline-2 ring-0 ring-transparent transition-all selection:bg-transparent peer-focus-visible:ring-4 peer-focus-visible:ring-offset-2",
               htmlFor: id,
               children: option.label
             })]
@@ -2532,6 +2737,7 @@ const ChatInputText = ({
 }) => {
   var _a;
   const submission = input.key ? (_a = index.application.current$.value.application) == null ? void 0 : _a.data.submissions[input.key] : void 0;
+  const defaultValue = input.config.defaultValue;
   const {
     register,
     handleSubmit,
@@ -2540,7 +2746,7 @@ const ChatInputText = ({
     }
   } = useForm({
     defaultValues: {
-      text: isTextSubmission(submission) ? submission.value : ""
+      text: defaultValue ? defaultValue : isTextSubmission(submission) ? submission.value : ""
     },
     resolver: getResolver(input.config)
   });
@@ -2582,7 +2788,7 @@ const ChatInputText = ({
               }
               setRef(element);
             },
-            class: "outline-neutral-12/5 ease-expo-out placeholder:text-neutral-5 focus-visible:outline-accent-7 caret-accent-9 duration-snappy w-full rounded-full px-3 py-1 text-base outline outline-2 transition-all",
+            class: "outline-divider ease-expo-out placeholder:text-neutral-10 text-neutral-12 focus-visible:outline-accent-7 caret-accent-9 bg-lowest w-full rounded-full px-3 py-1 text-base outline outline-2 transition-all",
             placeholder: input.config.placeholder
           }), input.config.optional && index.o(SkipButton, {
             class: "absolute right-0 top-0",
@@ -2626,10 +2832,10 @@ const ChatInput = ({
       height: 0,
       opacity: 0
     },
-    class: "bg-neutral-2/80 absolute bottom-0 w-full overflow-hidden rounded-b-3xl backdrop-blur-md backdrop-saturate-150",
+    class: "bg-statusbar absolute bottom-0 w-full overflow-hidden rounded-b-3xl backdrop-blur-md backdrop-saturate-150",
     children: index.o("div", {
       ref: inputWrapperRef,
-      class: "border-neutral-12/5 border-t",
+      class: "border-divider border-t",
       children: index.N({
         application: index.application,
         input,
@@ -2641,7 +2847,7 @@ const ChatInput = ({
         children: [index.o("input", {
           "aria-hidden": "true",
           id: "chat-input",
-          class: "outline-neutral-12/5 placeholder:text-neutral-4 focus-visible:outline-accent-9 caret-accent-9 flex-grow rounded-full px-3 py-1 text-base outline outline-2",
+          class: "outline-divider flex-grow rounded-full bg-transparent px-3 py-1 text-base outline outline-2",
           disabled: true
         }), index.o(SendButton, {
           disabled: true,
@@ -2724,11 +2930,11 @@ const cva = (base, config) => {
     return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
   };
 };
-const chatBubbleVariants = cva("max-w-[min(100%,24rem)] [text-wrap:pretty] leading-snug flex-shrink-1 min-w-[2rem] text-md py-2 px-3 rounded-[18px] min-h-[36px] break-words", {
+const chatBubbleVariants = cva("max-w-[min(100%,24rem)] [text-wrap:pretty] leading-snug flex-shrink min-w-[2rem] py-2 px-3 rounded-[18px] min-h-[36px] break-words", {
   variants: {
     side: {
-      left: "bg-lowest text-neutral-12 shadow-surface-sm outline outline-1 outline-neutral-11/[.08] rounded-bl-md",
-      right: "ml-auto bg-accent-7 text-lowest rounded-br-md bubble-right"
+      left: "bg-bubble-weak-bg text-neutral-12 shadow-surface-sm outline outline-1 outline-bubble-weak rounded-bl-md",
+      right: "ml-auto bg-accent-9 text-white rounded-br-md shadow-surface-sm shadow-bubble-strong-shadow"
     },
     transitionState: {
       entering: "opacity-0 translate-y-8",
@@ -2791,7 +2997,7 @@ const TypingIndicator = ({
     children: Array.from({
       length: 3
     }, (_, i2) => index.o("div", {
-      class: "bg-accent-7 h-1.5 w-1.5 animate-bounce rounded-full",
+      class: "bg-accent-9 h-1.5 w-1.5 animate-bounce rounded-full",
       style: {
         animationDelay: `${-i2 * 200}ms`
       }
@@ -2802,7 +3008,7 @@ const authorToSide = {
   bot: "left",
   user: "right"
 };
-const systemMessageStyle = cva("w-full select-none py-2 text-center text-[10px] uppercase tracking-widest drop-shadow-[0_1.5px_white]", {
+const systemMessageStyle = cva("w-full select-none py-2 text-center text-[10px] uppercase tracking-widest drop-shadow-[0_1.5px_var(--i-color-n-1)]", {
   variants: {
     variant: {
       info: "text-neutral-8",
@@ -2812,7 +3018,7 @@ const systemMessageStyle = cva("w-full select-none py-2 text-center text-[10px]
     }
   }
 });
-const JobApplicationMessages = ({
+const Conversation = ({
   messages,
   isBotTyping
 }) => {
@@ -2842,9 +3048,9 @@ const JobApplicationMessages = ({
           type: "link"
         }, (message2) => {
           return index.o("div", {
-            class: "bg-accent-8/5 flex w-full items-center justify-center overflow-hidden rounded-xl py-2",
+            class: "bg-accent-3 flex w-full items-center justify-center overflow-hidden rounded-xl py-2",
             children: index.o("a", {
-              class: "bg-lowest shadow-surface-sm ring-accent-8/20 hover:ring-accent-8 active:bg-accent-2 active:text-accent-10 text-accent-9 focus-visible:ring-accent-7/50 flex items-center gap-1.5 truncate rounded-full py-2 pl-4 pr-2.5 no-underline ring-1 transition-all focus:outline-none focus-visible:ring-4 focus-visible:ring-offset-2",
+              class: "bg-lowest shadow-surface-sm ring-accent-6 hover:ring-accent-8 active:bg-accent-2 active:text-accent-10 text-accent-9 focus-visible:ring-accent-7/50 flex items-center gap-1.5 truncate rounded-full py-2 pl-4 pr-2.5 no-underline ring-1 transition-all focus:outline-none focus-visible:ring-4 focus-visible:ring-offset-2",
               target: "_blank",
               href: message2.href,
               children: [message2.text, index.o("svg", {
@@ -3066,7 +3272,7 @@ const JobApplicationContent = ({
         paddingBottom: index.inputHeight.value
       },
       children: index.o(index.AnimatePresence, {
-        children: index.o(JobApplicationMessages, {
+        children: index.o(Conversation, {
           isBotTyping,
           messages: currentApplication.data.messages
         })

package/dist/plugin-chatbot.cjs

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("./index-09e54786.cjs");
+const index = require("./index-210f3179.cjs");
 require("@inploi/sdk");
 exports.chatbotPlugin = index.chatbotPlugin;

package/dist/plugin-chatbot.js

@@ -1,5 +1,5 @@
-import { z } from "./index-1808db67.js";
+import { B } from "./index-6a43f107.js";
 import "@inploi/sdk";
 export {
-  z as chatbotPlugin
+  B as chatbotPlugin
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inploi/plugin-chatbot",
-  "version": "3.7.0",
+  "version": "3.9.0",
   "type": "module",
   "main": "dist/plugin-chatbot.js",
   "types": "dist/index.d.ts",
@@ -22,9 +22,8 @@
     "@inploi/sdk": "*"
   },
   "devDependencies": {
-    "@happy-dom/global-registrator": "^12.6.0",
+    "@happy-dom/global-registrator": "^13.6.2",
     "@hookform/resolvers": "^3.3.2",
-    "@playwright/test": "^1.40.1",
     "@preact/preset-vite": "^2.5.0",
     "@preact/signals": "^1.2.2",
     "@radix-ui/react-dialog": "^1.0.5",
@@ -32,7 +31,9 @@
     "@radix-ui/react-focus-scope": "^1.0.4",
     "@radix-ui/react-slot": "^1.0.2",
     "@total-typescript/ts-reset": "^0.5.1",
+    "@types/bun": "^1.0.8",
     "@types/culori": "^2.0.4",
+    "@types/google.maps": "^3.55.4",
     "@types/node": "^20.10.0",
     "@types/react-transition-group": "^4.4.9",
     "autoprefixer": "^10.4.16",
@@ -43,6 +44,7 @@
     "dotenv": "^16.3.1",
     "eslint": "^7.32.0",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-tailwindcss": "^3.14.1",
     "happy-dom": "^12.6.0",
     "idb-keyval": "^6.2.1",
     "msw": "^2.0.10",
@@ -63,7 +65,8 @@
     "vite": "^4.4.5",
     "vite-plugin-dts": "^3.7.0",
     "vite-tsconfig-paths": "^4.2.1",
-    "@inploi/core": "1.11.4",
+    "@inploi/core": "1.11.5",
+    "@inploi/design-tokens": "0.2.0",
     "@inploi/sdk": "1.11.4",
     "eslint-config-custom": "0.1.0",
     "tsconfig": "0.1.0"