pager-widget 0.0.1 → 0.0.2

package/fontStyles.js

@@ -0,0 +1,41 @@
+import GM from "./static/fonts/Gordita-Medium.woff2";
+import GR from "./static/fonts/Gordita-Regular.woff2";
+import { createGlobalStyle } from "styled-components";
+import { getPackageNameAndVersion } from "./getVersion";
+
+const packageDetails = getPackageNameAndVersion();
+
+
+
+const getFontUrls = (type) => {
+
+    if (type == "GM") {
+        return process.env.NODE_ENV === "production" ? `https://unpkg.com/${packageDetails.name}@${packageDetails.version}/dist/Gordita-Medium.e5d1fa87.woff2` : GM
+    }
+
+    if (type == "GR") {
+        return process.env.NODE_ENV === "production" ? `https://unpkg.com/${packageDetails.name}@${packageDetails.version}/dist/Gordita-Regular.6d2fd269.woff2` : GR
+    }
+
+  return ""
+
+}
+
+const FontStyles = createGlobalStyle`
+
+@font-face {
+    font-family: 'Gordita-Medium';
+    src: url(${getFontUrls("GM")}) format('woff2');
+    font-weight: 500;
+    font-style: normal;
+  } 
+  
+  @font-face {
+    font-family: 'Gordita-Regular';
+    src: url(${getFontUrls("GR")}) format('woff2');
+    font-weight: 500;
+    font-style: normal;
+  } 
+`;
+
+export default FontStyles;

package/md/assistant_md.js

@@ -1,6 +1,7 @@
 import React from "react";
 
-const URL_REGEX = /[(http(s)?):\/\/(www\.)?a-zA-Z0-9@:%._\+~#=-]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/;
+const URL_REGEX =
+  /[(http(s)?):\/\/(www\.)?a-zA-Z0-9@:%._\+~#=-]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/;
 
 const normalStr = (str) => ({
   type: "normal_str",
@@ -12,21 +13,27 @@ const urlStr = (str) => ({
   value: str,
 });
 
-const normalWrapper = (TagName) => ({ mdText }) => (
-  <TagName>
-    <AssistantMd mdText={mdText.value} />
-  </TagName>
-);
-
-const listWrapper = (TagName) => ({ mdText: { list } }) => (
-  <TagName>
-    {list.map((mdText) => (
-      <li>
-        <AssistantMd mdText={mdText} />
-      </li>
-    ))}
-  </TagName>
-);
+const normalWrapper =
+  (TagName) =>
+    ({ mdText: { value } }) =>
+    (
+      <TagName>
+        <AssistantMd mdText={value} />
+      </TagName>
+    );
+
+const listWrapper =
+  (TagName) =>
+    ({ mdText: { value: list } }) =>
+    (
+      <TagName>
+        {list.map((mdText) => (
+          <li>
+            <AssistantMd mdText={mdText} />
+          </li>
+        ))}
+      </TagName>
+    );
 
 export function parseUrlAndString(str) {
   const results = [];
@@ -53,14 +60,14 @@ export function parseUrlAndString(str) {
 }
 
 const mdTypeRenderers = {
-  normal_text: NormalTextMd,
+  text: NormalTextMd,
   bold: normalWrapper("strong"),
   italic: normalWrapper("em"),
   underline: normalWrapper("u"),
   hyperlink: HyperLinkMd,
-  ordered_list: listWrapper("ol"),
+  order_list: listWrapper("ol"),
   unordered_list: listWrapper("ul"),
-  newline: () => <br />,
+  new_line: () => <br />,
   join: JoinMd,
 };
 
@@ -100,24 +107,30 @@ const DisplayURL = ({ text }) => {
   );
 };
 
-function NormalTextMd({ mdText }) {
-  return <DisplayURL text={mdText} />;
+function NormalTextMd({ mdText: { value } }) {
+  console.log("NormalTextMd ::: value ::: ", value);
+  return typeof value === "string" ? <DisplayURL text={value} /> : <AssistantMd mdText={value} />;
 }
 
-function HyperLinkMd({ mdText }) {
+function HyperLinkMd({ mdText: { value, href } }) {
+  // let value = mdText.value;
+  console.log("HyperLinkMd ::: value ::: ", value);
   return (
-    <a href={mdText.link} target="_blank">
-      <AssistantMd mdText={mdText.value} />
+    <a href={href} target="_blank">
+      <AssistantMd mdText={value} />
     </a>
   );
 }
 
 export function evalNormalOrJoinText(mdText) {
+  if (typeof mdText === "string") {
+    return mdText
+  }
   return mdText.markdown_text === "normal_text"
     ? mdText.normal_text
     : mdText.markdown_text === "join"
-    ? joinAsNormalText(mdText.join.lhs, mdText.join.rhs)
-    : null;
+      ? joinAsNormalText(mdText.join.lhs, mdText.join.rhs)
+      : null;
 }
 
 function joinAsNormalText(lhs, rhs) {
@@ -133,7 +146,7 @@ function joinAsNormalText(lhs, rhs) {
 
 function JoinMd({ mdText: { lhs, rhs } }) {
   let normalText = joinAsNormalText(lhs, rhs);
-  console.log({ normalText });
+  // console.log({ normalText });
   return normalText ? (
     <NormalTextMd mdText={normalText} />
   ) : (
@@ -145,6 +158,7 @@ function JoinMd({ mdText: { lhs, rhs } }) {
 }
 
 export default function AssistantMd({ mdText }) {
-  let RenderMd = mdTypeRenderers[mdText.markdown_text];
-  return <RenderMd mdText={mdText[mdText.markdown_text]} />;
+  console.log("AssistantMd ::: mdText.markdown_text ::: ", mdText.type, mdText);
+  let RenderMd = mdTypeRenderers[mdText.type];
+  return typeof mdText === "string" ? mdText : <RenderMd mdText={mdText} />;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pager-widget",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "",
   "main": "index.js",
   "targets": {
@@ -29,6 +29,7 @@
     "@fullhuman/postcss-purgecss": "^4.0.3",
     "@skitter/assistant_md": "^1.0.1",
     "autoprefixer": "^9.8.7",
+    "autosize": "^6.0.1",
     "axios": "^0.21.1",
     "broadcast-channel": "^4.9.0",
     "deepmerge": "^4.3.1",
@@ -39,11 +40,11 @@
     "postcss-loader": "^4.0.3",
     "postcss-modules": "^4.2.2",
     "postcss-scopify": "^0.1.9",
+    "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-is": "^17.0.2",
-    "socket.io": "^4.0.0",
-    "socket.io-client": "^2.4.0",
+    "socket.io-client": "^4.7.5",
     "styled-components": "^5.3.0",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17",
     "url-parse": "^1.5.1",

package/useMessages.js

@@ -0,0 +1,285 @@
+import { useEffect, useState, useRef } from "react";
+import parseURL from "url-parse";
+import { createSocket } from "./socket";
+import { sendInitialMessage } from "./widget-api";
+
+const rTrimSlash = (str) => str.replace(/\/$/, "");
+
+
+const useSocket = ({ endpoint }) => {
+    const parsedEndpoint = parseURL(endpoint);
+    console.log({ parsedEndpoint })
+    let [socket, setSocket] = useState(null);
+    const [connected, setConnected] = useState(false);
+    useEffect(() => {
+        const socket = createSocket(
+            parsedEndpoint.origin,
+            `${rTrimSlash(parsedEndpoint.pathname)}/socket.io`
+        );
+        setSocket(socket);
+        socket.on("connect", () => {
+            setConnected(true);
+        });
+        return () => {
+            socket.disconnect();
+        };
+    }, []);
+    return { socket, connected };
+};
+
+const useInitialMessage = ({
+    socket,
+    widget_id,
+    connected,
+    context,
+    authToken,
+    widget,
+    userDetails,
+}) => {
+    const [sent, setSent] = useState(false);
+    useEffect(() => {
+        console.log({ connected, widget });
+        const messages = getMessagesFromLS(`${widget_id}-messages`);
+        if (!sent && connected && widget && !messages) {
+            sendInitialMessage(socket, widget_id, context, authToken, widget);
+            setSent(true);
+        } else if (!sent && connected && widget && messages) {
+            let msg = message(
+                "",
+                context,
+                JSON.parse(messages),
+                widget_id,
+                authToken,
+                widget,
+                userDetails,
+                null
+            );
+            socket.emit("app_reconnect", msg);
+            setSent(true);
+        }
+    }, [connected, widget]);
+};
+
+function getMessagesFromLS(widget_id) {
+    // return localStorage.getItem(`${widget_id}-messages`);
+}
+
+function setMessagesToLS(messages, widget_id) {
+    // return localStorage.setItem(`${widget_id}-messages`, JSON.stringify(messages));
+}
+
+const recievedMsg = (msg) => ({
+    type: "received",
+    time: new Date(),
+    message: {
+        ...msg,
+    },
+})
+
+
+const useMessageReceiver = ({ widget_id, socket, messages, setMessages, setIsTyping }) => {
+    // console.log("XDOING::1 useMessageReceiver 4", messages)
+    const onMessageReceived = (messages) => (msg) => {
+        console.log("XDOING::1 useMessageReceived 1", messages, msg)
+        const recievedMessage = recievedMsg(msg);
+        // console.log("DOING::1 useMessageReceiver ::: received Messages", messages)
+        const newMessages = [...messages, recievedMessage];
+        setMessages(newMessages);
+        // console.log("XDOING::1 useMessageReceived 2", newMessages)
+        setMessagesToLS(newMessages, widget_id);
+        // channel.postMessage(JSON.stringify(recievedMessage));
+        // onMessageReceivedCallBack.current = onMessageReceived(newMessages)
+    };
+
+    const onMessageTypingEndReceived = (msg) => {
+        setIsTyping(false);
+    };
+
+    const onMessageReceivedCallBack = useRef(onMessageReceived);
+
+    useEffect(() => {
+        // console.log("XDOING::1 useMessageReceiver 3", messages)
+        onMessageReceivedCallBack.current = onMessageReceived(messages);
+    }, [messages]);
+
+    useEffect(() => {
+        if (socket) {
+            socket.on("message", onMessageReceivedCallBack.current);
+            socket.on("typingend", onMessageTypingEndReceived);
+        }
+        return () => {
+            socket && socket.off("message", onMessageReceivedCallBack.current);
+            socket && socket.off("typingend", onMessageTypingEndReceived);
+        };
+    }, [socket, messages]);
+};
+
+const getUpdatedContext = (
+    messages,
+    currentContext,
+    { SYS_FirstName, SYS_LastName, SYS_UserEmail },
+    file = null
+) => {
+    if (!messages.length) {
+        const userDetails = {
+            first_name: SYS_FirstName,
+            last_name: SYS_LastName,
+            email: SYS_UserEmail,
+        };
+        currentContext.context = {
+            ...currentContext.context,
+            SYS_FirstName,
+            SYS_LastName,
+            SYS_UserEmail,
+        };
+        currentContext.system = {
+            user: { ...currentContext.system?.user, ...userDetails },
+        };
+        return currentContext;
+    }
+    let message = messages[messages.length - 1].message;
+
+    return {
+        context: {
+            ...message.context,
+            SYS_UPLOADED_FILE: file,
+            SYS_FirstName,
+            SYS_LastName,
+            SYS_UserEmail,
+        },
+        system: message.system,
+    };
+};
+
+const feedback = (feedback,
+    currentContext,
+    messages,
+    widget_id,
+    authToken,
+    widget,
+    userDetails,
+) => {
+    return {
+        authToken,
+        widget_id,
+        context: {
+            ...getUpdatedContext([...messages], currentContext, widget, userDetails, file),
+            input: { type: "text", value: "" },
+            feedback,
+            SYS_UPLOADED_FILE: file,
+            output: [],
+        },
+    };
+}
+
+const message = (
+    input,
+    currentContext,
+    messages,
+    widget_id,
+    authToken,
+    widget,
+    userDetails,
+    file = null
+) => {
+    return {
+        authToken,
+        widget_id,
+        context: {
+            ...getUpdatedContext([...messages], currentContext, widget, userDetails, file),
+            input: { type: "text", value: input },
+            SYS_UPLOADED_FILE: file,
+            output: [],
+        },
+    };
+};
+
+export const useMessages = ({
+    widget_id,
+    endpoint,
+    context: currentContext,
+    authToken,
+    newToken,
+    widget,
+    userDetails,
+}) => {
+    const { socket, connected } = useSocket({ endpoint });
+    const [currentToken, setCurrentToken] = useState(authToken);
+
+    const sendMessage = (input, file = null) => {
+        // console.log("DOING::1 Service :: sendMessage called", input,messages)
+        setIsTyping(true);
+        let msg = message(
+            input,
+            currentContext,
+            messages,
+            widget_id,
+            currentToken,
+            widget,
+            userDetails,
+            file
+        );
+        socket.emit("message", msg);
+        const sentMessage = {
+            type: "sent",
+            message: msg.context,
+            time: new Date(),
+        };
+        // console.log("DOING::1 sendMessage",messages,sentMessage)
+        setMessages([...messages, sentMessage]);
+        // channel.postMessage(JSON.stringify(sentMessage));
+
+    };
+
+    const sendFeedback = (input) => {
+        // console.log("DOING::1 Service :: sendMessage called", input,messages)
+        setIsTyping(true);
+        let msg = message(
+            input,
+            currentContext,
+            messages,
+            widget_id,
+            currentToken,
+            widget,
+            userDetails,
+            null
+        );
+        socket.emit("feedback", msg);
+        // const sentMessage = {
+        //     type: "sent",
+        //     message: msg.context,
+        //     time: new Date(),
+        // };
+        // // console.log("DOING::1 sendMessage",messages,sentMessage)
+        // setMessages([...messages, sentMessage]);
+        // channel.postMessage(JSON.stringify(sentMessage));
+
+    };
+
+    const [messages, setMessages] = useState([]);
+
+    console.log("all mesesages ::: ", { messages })
+
+    const [isTypingEnd, setIsTyping] = useState(false);
+    useInitialMessage({
+        socket,
+        widget_id,
+        connected,
+        context: currentContext,
+        authToken: currentToken,
+        widget,
+        userDetails,
+    });
+    useMessageReceiver({ widget_id, socket, messages, setMessages, setIsTyping });
+
+    return {
+        connected,
+        messages,
+        setMessages,
+        isTypingEnd,
+        sendMessage,
+        sendFeedback
+    }
+};
+
+export default useMessages;

package/useScale.js

@@ -1,5 +1,7 @@
 import React, {
-  createContext, useContext, useReducer
+  createContext,
+  useContext,
+  useReducer
 } from "react";
 
 const MIN_ZOOM_LEVEL = 60;
@@ -71,7 +73,7 @@ export const ScaleSizeProvider = ({ children, widgetSize }) => {
 
   return (
     <ScaleContext.Provider
-      value={{ zoomLevel, scale: scaleRatio, updateZoomLevel }}
+      value={{ zoomLevel, scale: scaleRatio, updateZoomLevel , widgetSize}}
     >
       {children}
     </ScaleContext.Provider>

package/dist/lib.css

@@ -1 +0,0 @@
-.workativ-widget *,.workativ-widget :after,.workativ-widget :before{--tw-border-opacity:1;border-color:rgba(229,231,235,var(--tw-border-opacity))}.workativ-widget .fixed{position:fixed}.workativ-widget .absolute{position:absolute}.workativ-widget .relative{position:relative}.workativ-widget .top-0{top:0}.workativ-widget .top-4{top:1rem}.workativ-widget .right-0{right:0}.workativ-widget .right-6{right:1.5rem}.workativ-widget .right-8{right:2rem}.workativ-widget .bottom-8{bottom:2rem}.workativ-widget .bottom-10{bottom:2.5rem}.workativ-widget .bottom-24{bottom:6rem}.workativ-widget .left-0{left:0}.workativ-widget .float-left{float:left}.workativ-widget .mt-2{margin-top:.5rem}.workativ-widget .mt-2\.5{margin-top:.625rem}.workativ-widget .mr-1{margin-right:.25rem}.workativ-widget .mr-2{margin-right:.5rem}.workativ-widget .mr-2\.5{margin-right:.625rem}.workativ-widget .ml-1{margin-left:.25rem}.workativ-widget .ml-2{margin-left:.5rem}.workativ-widget .ml-2\.5{margin-left:.625rem}.workativ-widget .inline-block{display:inline-block}.workativ-widget .flex{display:flex}.workativ-widget .inline-flex{display:inline-flex}.workativ-widget .table{display:table}.workativ-widget .grid{display:grid}.workativ-widget .hidden{display:none}.workativ-widget .h-4{height:1rem}.workativ-widget .h-8{height:2rem}.workativ-widget .h-11{height:2.75rem}.workativ-widget .h-auto{height:auto}.workativ-widget .h-full{height:100%}.workativ-widget .w-4{width:1rem}.workativ-widget .w-8{width:2rem}.workativ-widget .w-11{width:2.75rem}.workativ-widget .w-auto{width:auto}.workativ-widget .w-5\/6{width:83.333333%}.workativ-widget .w-2\/12{width:16.666667%}.workativ-widget .w-full{width:100%}.workativ-widget .w-max{width:-moz-max-content;width:max-content}.workativ-widget .flex-shrink{flex-shrink:1}.workativ-widget .transform{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(1turn)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}.workativ-widget .cursor-default{cursor:default}.workativ-widget .cursor-pointer{cursor:pointer}.workativ-widget .grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.workativ-widget .flex-row{flex-direction:row}.workativ-widget .flex-col{flex-direction:column}.workativ-widget .flex-wrap{flex-wrap:wrap}.workativ-widget .items-start{align-items:flex-start}.workativ-widget .items-end{align-items:flex-end}.workativ-widget .items-center{align-items:center}.workativ-widget .justify-start{justify-content:flex-start}.workativ-widget .justify-end{justify-content:flex-end}.workativ-widget .justify-center{justify-content:center}.workativ-widget .justify-between{justify-content:space-between}.workativ-widget .gap-2{gap:.5rem}.workativ-widget .gap-2\.5{gap:.625rem}.workativ-widget .self-center{align-self:center}.workativ-widget .overflow-y-scroll{overflow-y:scroll}.workativ-widget .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.workativ-widget .break-words{overflow-wrap:break-word}.workativ-widget .break-all{word-break:break-all}.workativ-widget .rounded{border-radius:.25rem}.workativ-widget .rounded-full{border-radius:9999px}.workativ-widget .rounded-b-md{border-bottom-right-radius:.375rem;border-bottom-left-radius:.375rem}.workativ-widget .rounded-tl-none{border-top-left-radius:0}.workativ-widget .rounded-tl-md{border-top-left-radius:.375rem}.workativ-widget .rounded-tr-none{border-top-right-radius:0}.workativ-widget .rounded-tr-md{border-top-right-radius:.375rem}.workativ-widget .rounded-br-md{border-bottom-right-radius:.375rem}.workativ-widget .rounded-bl-md{border-bottom-left-radius:.375rem}.workativ-widget .border{border-width:1px}.workativ-widget .bg-transparent{background-color:transparent}.workativ-widget .bg-white{--tw-bg-opacity:1;background-color:rgba(255,255,255,var(--tw-bg-opacity))}.workativ-widget .bg-gray-200{--tw-bg-opacity:1;background-color:rgba(229,231,235,var(--tw-bg-opacity))}.workativ-widget .bg-gray-900{--tw-bg-opacity:1;background-color:rgba(17,24,39,var(--tw-bg-opacity))}.workativ-widget .hover\:bg-white:hover{--tw-bg-opacity:1;background-color:rgba(255,255,255,var(--tw-bg-opacity))}.workativ-widget .object-cover{-o-object-fit:cover;object-fit:cover}.workativ-widget .object-center{-o-object-position:center;object-position:center}.workativ-widget .p-2{padding:.5rem}.workativ-widget .p-3{padding:.75rem}.workativ-widget .p-2\.5{padding:.625rem}.workativ-widget .px-2{padding-left:.5rem;padding-right:.5rem}.workativ-widget .px-4{padding-left:1rem;padding-right:1rem}.workativ-widget .px-2\.5{padding-left:.625rem;padding-right:.625rem}.workativ-widget .py-1{padding-top:.25rem;padding-bottom:.25rem}.workativ-widget .py-3{padding-top:.75rem;padding-bottom:.75rem}.workativ-widget .py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.workativ-widget .pr-1{padding-right:.25rem}.workativ-widget .pr-2{padding-right:.5rem}.workativ-widget .pr-9{padding-right:2.25rem}.workativ-widget .pr-1\.5{padding-right:.375rem}.workativ-widget .pr-2\.5{padding-right:.625rem}.workativ-widget .pb-2{padding-bottom:.5rem}.workativ-widget .pb-2\.5{padding-bottom:.625rem}.workativ-widget .pl-2{padding-left:.5rem}.workativ-widget .pl-4{padding-left:1rem}.workativ-widget .pl-2\.5{padding-left:.625rem}.workativ-widget .text-left{text-align:left}.workativ-widget .font-sans{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.workativ-widget .text-xs{font-size:.75rem;line-height:1rem}.workativ-widget .text-sm{font-size:.875rem;line-height:1.25rem}.workativ-widget .text-base{font-size:1rem;line-height:1.5rem}.workativ-widget .font-normal{font-weight:400}.workativ-widget .font-semibold{font-weight:600}.workativ-widget .font-bold{font-weight:700}.workativ-widget .text-black{--tw-text-opacity:1;color:rgba(0,0,0,var(--tw-text-opacity))}.workativ-widget .text-white{--tw-text-opacity:1;color:rgba(255,255,255,var(--tw-text-opacity))}.workativ-widget .text-gray-200{--tw-text-opacity:1;color:rgba(229,231,235,var(--tw-text-opacity))}.workativ-widget .hover\:text-black:hover{--tw-text-opacity:1;color:rgba(0,0,0,var(--tw-text-opacity))}.workativ-widget *,.workativ-widget :after,.workativ-widget :before{--tw-shadow:0 0 transparent}.workativ-widget .shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04)}.workativ-widget .shadow-2xl,.workativ-widget .shadow-xl{box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)}.workativ-widget .shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,0.25)}.workativ-widget .focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.workativ-widget *,.workativ-widget :after,.workativ-widget :before{--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,0.5);--tw-ring-offset-shadow:0 0 transparent;--tw-ring-shadow:0 0 transparent}.workativ-widget .transition{transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.workativ-widget .ease-linear{transition-timing-function:linear}.workativ-widget .ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}@media (min-width:640px){.workativ-widget .sm\:right-0{right:0}.workativ-widget .sm\:bottom-0{bottom:0}}@media (min-width:1280px){.workativ-widget .xl\:right-6{right:1.5rem}.workativ-widget .xl\:bottom-32{bottom:8rem}}.workativ-widget *,.workativ-widget :after,.workativ-widget :before{box-sizing:border-box;border:0 solid #e5e7eb;font-family:Open Sans,sans-serif}.workativ-widget .flex{display:flex}@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap");@font-face{font-family:Gordita-Medium;src:url(/Gordita-Medium.e5d1fa87.woff2) format("woff2"),url(/Gordita-Medium.e5d1fa87.woff2) format("woff");font-weight:500;font-style:normal}@font-face{font-family:Gordita-Regular;src:url(/Gordita-Regular.6d2fd269.woff2) format("woff2"),url(/Gordita-Regular.6d2fd269.woff2) format("woff");font-weight:500;font-style:normal}