@stack-spot/ai-chat-widget 1.36.1-betacitric.1 → 1.36.1

package/dist/components/StackedBadge.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Text } from '@stack-spot/citric-react';
+import { IconBox, Text } from '@citric/core';
 import { theme } from '@stack-spot/portal-theme';
 import { styled } from 'styled-components';
 const Styled = styled.div `
@@ -39,9 +39,9 @@ const Styled = styled.div `
       }
     }
 
-    .citric-icon {
-      margin: 1px;
-      font-size: 10px;
+    i {
+      width: 12px;
+      height: 12px;
     }
 
     img, svg {
@@ -52,5 +52,5 @@ const Styled = styled.div `
 `;
 export const StackedBadge = ({ label, images, ...props }) => (_jsxs(Styled, { ...props, children: [_jsx(Text, { appearance: "microtext1", children: label }), _jsx("ul", { children: images.map(({ key, name, url, icon }, i) => (_jsx("li", { children: url
                     ? _jsx("img", { alt: name, "aria-label": name, title: name, src: url })
-                    : _jsx("span", { "aria-label": name, title: name, children: icon }) }, key || i))) })] }));
+                    : _jsx(IconBox, { size: "xs", "aria-label": name, title: name, children: icon }) }, key || i))) })] }));
 //# sourceMappingURL=StackedBadge.js.map

package/dist/components/StackedBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"StackedBadge.js","sourceRoot":"","sources":["../../src/components/StackedBadge.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAEhD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAQ1C,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAA;;sBAEH,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;sBACtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;WACjC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;0BAkBP,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;0BACtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;CAwB/C,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,EAAS,EAAE,EAAE,CAAC,CAClE,MAAC,MAAM,OAAK,KAAK,aACf,KAAC,IAAI,IAAC,UAAU,EAAC,YAAY,YAAE,KAAK,GAAQ,EAC5C,uBACG,MAAM,CAAC,GAAG,CACT,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAC/B,uBACG,GAAG;oBACF,CAAC,CAAC,cAAK,GAAG,EAAE,IAAI,gBAAc,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,GAAI;oBAC7D,CAAC,CAAC,6BAAkB,IAAI,EAAE,KAAK,EAAE,IAAI,YAAG,IAAI,GAAQ,IAH/C,GAAG,IAAI,CAAC,CAKZ,CACN,CACF,GACE,IACE,CACV,CAAA"}
+{"version":3,"file":"StackedBadge.js","sourceRoot":"","sources":["../../src/components/StackedBadge.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAEhD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAQ1C,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAA;;sBAEH,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;sBACtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;WACjC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;0BAkBP,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;0BACtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;CAwB/C,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,EAAS,EAAE,EAAE,CAAC,CAClE,MAAC,MAAM,OAAK,KAAK,aACf,KAAC,IAAI,IAAC,UAAU,EAAC,YAAY,YAAE,KAAK,GAAQ,EAC5C,uBACG,MAAM,CAAC,GAAG,CACT,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAC/B,uBACG,GAAG;oBACF,CAAC,CAAC,cAAK,GAAG,EAAE,IAAI,gBAAc,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,GAAI;oBAC7D,CAAC,CAAC,KAAC,OAAO,IAAC,IAAI,EAAC,IAAI,gBAAa,IAAI,EAAE,KAAK,EAAE,IAAI,YAAG,IAAI,GAAW,IAH/D,GAAG,IAAI,CAAC,CAKZ,CACN,CACF,GACE,IACE,CACV,CAAA"}

package/dist/components/TabManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabManager.d.ts","sourceRoot":"","sources":["../../src/components/TabManager.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAGvC,UAAU,KAAK,CAAC,CAAC,EAAE,GAAG,SAAS,KAAK,CAAC,GAAG;IACtC;;OAEG;IACH,IAAI,EAAE,CAAC,EAAE,CAAC;IACV;;OAEG;IACH,MAAM,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,GAAG,CAAC;IACxB;;OAEG;IACH,MAAM,EAAE,GAAG,CAAC;IACZ;;OAEG;IACH,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC;IAC3B;;OAEG;IACH,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC;IAC3B;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB;;OAEG;IACH,WAAW,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;CAC7C;AAqGD;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,CAAC,EAAE,GAAG,SAAS,KAAK,CAAC,GAAG,EACjD,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAY,EAAE,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,2CA4DvF"}
+{"version":3,"file":"TabManager.d.ts","sourceRoot":"","sources":["../../src/components/TabManager.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAGvC,UAAU,KAAK,CAAC,CAAC,EAAE,GAAG,SAAS,KAAK,CAAC,GAAG;IACtC;;OAEG;IACH,IAAI,EAAE,CAAC,EAAE,CAAC;IACV;;OAEG;IACH,MAAM,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,GAAG,CAAC;IACxB;;OAEG;IACH,MAAM,EAAE,GAAG,CAAC;IACZ;;OAEG;IACH,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC;IAC3B;;OAEG;IACH,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC;IAC3B;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB;;OAEG;IACH,WAAW,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;CAC7C;AA4HD;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,CAAC,EAAE,GAAG,SAAS,KAAK,CAAC,GAAG,EACjD,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAY,EAAE,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,2CA+DvF"}

package/dist/components/TabManager.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /* Tabs to select chat and add new chats */
-import { Button, IconBox, IconButton } from '@stack-spot/citric-react';
+import { Button, IconBox } from '@citric/core';
+import { TimesMini } from '@citric/icons';
+import { IconButton } from '@citric/ui';
 import { listToClass, theme } from '@stack-spot/portal-theme';
 import { useTranslate } from '@stack-spot/portal-translate';
 import { last } from 'lodash';
@@ -35,6 +37,14 @@ const Tabs = styled.nav `
     }
   }
 
+  ${IconButton} {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: transparent;
+    border: none;
+  }
+
   .list-overflow {
     max-width: ${({ $numberOfExtraButtons }) => `calc(100% - ${$numberOfExtraButtons * (EXTRA_BTN_SIZE + EXTRA_BTN_MARGIN * 2)}px)`};
   }
@@ -101,6 +111,21 @@ const Tabs = styled.nav `
           mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
         }
       }
+
+      ${IconButton} {
+        padding: 0;
+        width: 18px;
+        height: 18px;
+        transition: background-color 0.3s;
+
+        svg {
+          height: 14px;
+        }
+
+        &:hover {
+          background-color: ${theme.color.light[600]};
+        }
+      }
     }
   }
 `;
@@ -119,10 +144,10 @@ export function TabManager({ active, tabs, keygen, onRemove, onSelect, renderLab
         if (target.tagName === 'LI')
             target.querySelector('button')?.click();
     }, []);
-    const tabItems = useMemo(() => tabs.map((tab) => (_jsxs("li", { className: keygen(tab) === active ? 'active' : undefined, onClick: onClickTab, children: [_jsx("button", { className: "label", onClick: () => onSelect(tab), children: _jsx(FadingOverflow, { children: renderLabel(tab) }) }), tabs.length > 1 && _jsx(IconButton, { icon: "TimesMini", "aria-label": t.close, title: t.close, onClick: () => onRemove(tab) })] }, keygen(tab)))), [tabs, active]);
-    const extras = useMemo(() => buttons.map(({ ariaLabel, label, onClick, group, icon, className, style }) => (_jsx(_Fragment, { children: label ?
-            _jsxs(Button, { style: { ...style, paddingLeft: 0, marginRight: '4px', fontWeight: '400' }, colorScheme: "light", size: "md", title: label, onClick: onClick, children: [_jsx(IconBox, { group: group, icon: icon, size: "sm", style: { width: '32px', height: '16px', paddingInline: '8px' } }), label] }, ariaLabel) :
-            _jsx(IconButton, { group: group, icon: icon, "aria-label": ariaLabel, title: label, className: listToClass([className, 'extra']), style: style, onClick: onClick }, ariaLabel) }))), [buttons]);
+    const tabItems = useMemo(() => tabs.map((tab) => (_jsxs("li", { className: keygen(tab) === active ? 'active' : undefined, onClick: onClickTab, children: [_jsx("button", { className: "label", onClick: () => onSelect(tab), children: _jsx(FadingOverflow, { children: renderLabel(tab) }) }), tabs.length > 1 && _jsx(IconButton, { "aria-label": t.close, title: t.close, onClick: () => onRemove(tab), children: _jsx(TimesMini, {}) })] }, keygen(tab)))), [tabs, active]);
+    const extras = useMemo(() => buttons.map(({ ariaLabel, label, onClick, icon, className, style }) => (_jsx(_Fragment, { children: label ?
+            _jsxs(Button, { sx: { paddingLeft: 0, marginRight: '4px', fontWeight: '400' }, colorScheme: "light", size: "md", title: label, style: style, onClick: onClick, children: [_jsx(IconBox, { size: "sm", sx: { width: '32px', height: '16px', paddingInline: '8px' }, children: icon }), label] }, ariaLabel) :
+            _jsx(IconButton, { "aria-label": ariaLabel, title: label, className: listToClass([className, 'extra']), style: style, onClick: onClick, children: icon }, ariaLabel) }))), [buttons]);
     // when a new tab is added, we should scroll to it if there are more tabs that we can show.
     useEffect(() => {
         if (tabs.length > lastNumberOfTabs.current) {

package/dist/components/TabManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabManager.js","sourceRoot":"","sources":["../../src/components/TabManager.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TabManager.js","sourceRoot":"","sources":["../../src/components/TabManager.tsx"],"names":[],"mappings":"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"}

package/dist/components/ToolBadge.d.ts

@@ -1,9 +1,14 @@
-type Props = Omit<React.JSX.IntrinsicElements['div'], 'onChange'> & {
+import { ColorSchemeKey } from '@stack-spot/portal-theme';
+import { DetailedHTMLProps, HTMLAttributes } from 'react';
+import { FastOmit } from 'styled-components/dist/types';
+interface Props extends FastOmit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> {
     name: string;
     duration?: number;
     image?: string;
     description?: string;
-};
-export declare const ToolBadge: ({ name, duration, image, description, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+    appearance?: 'round' | 'square';
+    backgroundColor?: ColorSchemeKey;
+}
+export declare const ToolBadge: ({ name, duration, image, description, appearance, backgroundColor, className, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ToolBadge.d.ts.map

package/dist/components/ToolBadge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolBadge.d.ts","sourceRoot":"","sources":["../../src/components/ToolBadge.tsx"],"names":[],"mappings":"AAMA,KAAK,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAClE,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAA;AAwBD,eAAO,MAAM,SAAS,qDAC8B,KAAK,4CAqBxD,CAAA"}
+{"version":3,"file":"ToolBadge.d.ts","sourceRoot":"","sources":["../../src/components/ToolBadge.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAsB,MAAM,0BAA0B,CAAA;AAG7E,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAY,MAAM,OAAO,CAAA;AAEnE,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAA;AAGvD,UAAU,KAAM,SAAQ,QAAQ,CAAC,iBAAiB,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC,EAAE,KAAK,CAAC;IACxG,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAChC,eAAe,CAAC,EAAE,cAAc,CAAC;CAClC;AAmFD,eAAO,MAAM,SAAS,6FAC+F,KAAK,4CAiCzH,CAAA"}

package/dist/components/ToolBadge.js

@@ -1,32 +1,110 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Icon } from '@stack-spot/citric-icons';
-import { Accordion, Card, ImageBox, ImageWithFallback, Text } from '@stack-spot/citric-react';
-import { theme } from '@stack-spot/portal-theme';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconBox, Text } from '@citric/core';
+import { ChevronDown, Cog } from '@citric/icons';
+import { IconButton } from '@citric/ui';
+import { AnimatedHeight } from '@stack-spot/portal-components/AnimatedHeight';
+import { listToClass, theme } from '@stack-spot/portal-theme';
+import { useTranslate } from '@stack-spot/portal-translate';
+import { get } from 'lodash';
+import { useState } from 'react';
 import { styled } from 'styled-components';
 import { toPrecision } from '../views/Steps/utils.js';
 const Styled = styled.div `
-  [data-citric="card"] {
-    flex-direction: row;
-    gap: 8px;
-    border-radius: ${theme.radius.xl};
-    border: none;
-    align-items: center;
-    padding: 4px 16px 4px 4px;
+ .tool-header-wrapper {
+    background-color: ${({ $backgroundColor }) => get(theme.color, $backgroundColor)};
+    border-radius: 8px;
   }
+ 
+  .tool-header {
+    padding: 4px 8px 4px 4px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    position: relative;
 
-  [data-citric="accordion"] {
-    background-color: ${theme.color.light[500]};
-    > header > label {
-      padding: 6px 10px 6px 6px;
-      font: ${theme.font.body2};
-      input:before {
-        font-size: 12px !important;
+    .title {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      .tool-image {
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        overflow: hidden;
+        flex-shrink: 0;
+      }
+      .name {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+
+    .btn-expand {
+      display: none;
+    }
+
+    .duration {
+      opacity: 0.7;
+      text-align: right;
+    }
+  }
+
+  &.with-description {
+    .tool-header {
+      &:before {
+        content: '';
+        top: 32px;
+        bottom: 8px;
+        left: 15px;
+        width: 1px;
+        background-color: ${theme.color.light[700]};
+        opacity: 0.3;
+        position: absolute;
+      }
+
+      .btn-expand {
+        display: flex;
+        transition: transform 0.3s ease-in-out;
+        &.open {
+          transform: rotate(180deg);
+        }
+      }
+
+      .description {
+        padding: 0 0 10px 20px;
+        opacity: 0.7;
+      }
+    }
+  }
+
+  &.round {
+    .tool-header-wrapper {
+      border-radius: 30px;
+    }
+    &:not(.with-description) {
+      .tool-header-wrapper {
+        padding-right: 10px;
       }
     }
   }
 `;
-export const ToolBadge = ({ name, duration, image, description, ...props }) => {
-    const header = _jsxs(_Fragment, { children: [_jsx(ImageBox, { children: _jsx(ImageWithFallback, { src: image, fallback: _jsx(Icon, { icon: "Cog", className: "tool-image" }) }) }), _jsx(Text, { color: "light.700", className: "name", style: { flex: 1 }, children: name }), duration !== undefined && _jsxs(Text, { color: "light.700", className: "duration", children: [toPrecision(duration), "s"] })] });
-    return _jsx(Styled, { children: description ? (_jsx(Accordion, { appearance: "card", header: header, ...props, children: _jsx(Text, { className: "description", color: "light.700", children: description }) })) : _jsx(Card, { ...props, children: header }) });
+export const ToolBadge = ({ name, duration, image, description, appearance = 'square', backgroundColor = 'light.300', className, ...props }) => {
+    const t = useTranslate(dictionary);
+    const [showDescription, setShowDescription] = useState(false);
+    const rootClass = listToClass([className, appearance, description && 'with-description']);
+    const wrapperClass = 'tool-header-wrapper';
+    const content = (_jsxs("div", { className: "tool-header", children: [_jsxs("div", { className: "title", children: [image ? _jsx("img", { src: image, className: "tool-image" }) : _jsx(IconBox, { className: "tool-image", children: _jsx(Cog, {}) }), _jsx(Text, { colorScheme: "light.700", className: "name", children: name }), duration !== undefined && _jsxs(Text, { colorScheme: "light.700", className: "duration", children: [toPrecision(duration), "s"] }), _jsx(IconButton, { size: "xs", className: listToClass(['btn-expand', showDescription && 'open']), onClick: () => setShowDescription(v => !v), "aria-label": showDescription ? t.close : t.open, children: _jsx(ChevronDown, {}) })] }), showDescription && _jsx(Text, { className: "description", colorScheme: "light.700", children: description })] }));
+    return (_jsx(Styled, { ...props, "$backgroundColor": backgroundColor, className: rootClass, children: description ? _jsx(AnimatedHeight, { className: wrapperClass, children: content }) : _jsx("div", { className: wrapperClass, children: content }) }));
+};
+const dictionary = {
+    en: {
+        open: 'Open',
+        close: 'Close',
+    },
+    pt: {
+        open: 'Abrir',
+        close: 'Fechar',
+    },
 };
 //# sourceMappingURL=ToolBadge.js.map

package/dist/components/ToolBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolBadge.js","sourceRoot":"","sources":["../../src/components/ToolBadge.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAA;AAC/C,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,iBAAiB,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAA;AAC7F,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AASlD,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAA;;;;qBAIJ,KAAK,CAAC,MAAM,CAAC,EAAE;;;;;;;wBAOZ,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;cAGhC,KAAK,CAAC,IAAI,CAAC,KAAK;;;;;;CAM7B,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,CACvB,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,KAAK,EAAS,EACvD,EAAE;IACF,MAAM,MAAM,GAAG,8BACb,KAAC,QAAQ,cAAC,KAAC,iBAAiB,IAAC,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAC,IAAI,IAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAC,YAAY,GAAG,GAAI,GAAW,EAC5G,KAAC,IAAI,IAAC,KAAK,EAAC,WAAW,EAAC,SAAS,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YAAG,IAAI,GAAQ,EACzE,QAAQ,KAAK,SAAS,IAAI,MAAC,IAAI,IAAC,KAAK,EAAC,WAAW,EAAC,SAAS,EAAC,UAAU,aACpE,WAAW,CAAC,QAAQ,CAAC,SACjB,IACN,CAAA;IAEH,OAAO,KAAC,MAAM,cACX,WAAW,CAAC,CAAC,CAAC,CACb,KAAC,SAAS,IACR,UAAU,EAAC,MAAM,EACjB,MAAM,EAAE,MAAM,KACV,KAAK,YAET,KAAC,IAAI,IAAC,SAAS,EAAC,aAAa,EAAC,KAAK,EAAC,WAAW,YAAE,WAAW,GAAQ,GAC1D,CACb,CAAC,CAAC,CAAC,KAAC,IAAI,OAAK,KAAK,YAAG,MAAM,GAAQ,GAC7B,CAAA;AACX,CAAC,CAAA"}
+{"version":3,"file":"ToolBadge.js","sourceRoot":"","sources":["../../src/components/ToolBadge.tsx"],"names":[],"mappings":"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"}

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,37 @@
+import { WithStyle } from '@stack-spot/portal-theme';
+import { WithChildren } from '../../types.js';
+import { TooltipPosition } from './types.js';
+interface Props extends WithChildren, WithStyle {
+    /**
+     * The content of the tooltip. Can be either a string or a Rect Element.
+     */
+    content: React.ReactNode;
+    /**
+     * Where to position the tooltip relative to the element that triggered it.
+     */
+    position?: TooltipPosition;
+    /**
+     * A tooltip can be triggered either by hovering an element or by clicking it.
+     * @default 'hover'
+     */
+    triggeredBy?: 'click' | 'hover';
+    /**
+     * If true, no style is applied to the tooltip, letting you customize it however you want to.
+     */
+    custom?: boolean;
+    /**
+     * Function to run whenever the tooltip is shown.
+     */
+    onShow?: () => void;
+    /**
+     * Function to run whenever the tooltip is hidden.
+     */
+    onHide?: () => void;
+}
+/**
+ * Shows a tooltip for its children. This tooltip element is always reused and placed at a root level in order to not be cut out by
+ * hidden overflows in the children and its ascendants.
+ */
+export declare const Tooltip: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=Tooltip.d.ts.map

package/dist/components/Tooltip/Tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAEpD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAG1C,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAEzC,UAAU,KAAM,SAAQ,YAAY,EAAE,SAAS;IAC7C;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAChC;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;;GAGG;AACH,eAAO,MAAM,OAAO,kGAoClB,CAAA"}

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable react/display-name */
+import { Text } from '@citric/core';
+import { forwardRef } from 'react';
+import { useTooltip } from './context.js';
+import { DefaultTooltip } from './style.js';
+/**
+ * Shows a tooltip for its children. This tooltip element is always reused and placed at a root level in order to not be cut out by
+ * hidden overflows in the children and its ascendants.
+ */
+export const Tooltip = forwardRef(({ content, custom, position, triggeredBy = 'hover', onHide, onShow, children, className, style }, ref) => {
+    const api = useTooltip();
+    async function show(e, hideOnClickOutside) {
+        await api.show({
+            content: custom ? content : _jsx(DefaultTooltip, { children: _jsx(Text, { appearance: "microtext1", children: content }) }),
+            anchor: e.target,
+            position,
+            hideOnClickOutside,
+        });
+        onShow?.();
+    }
+    function hide() {
+        api.hide();
+        onHide?.();
+    }
+    return (_jsx("div", { ...(triggeredBy === 'hover'
+            ? { onMouseEnter: show, onMouseLeave: hide }
+            : { onClick: (e) => show(e, true), onKeyDown: (e) => e.key === 'Enter' && show(e, true) }), className: className, style: style, tabIndex: triggeredBy === 'click' ? 0 : undefined, role: triggeredBy === 'click' ? 'button' : undefined, ref: ref, children: children }));
+});
+//# sourceMappingURL=Tooltip.js.map

package/dist/components/Tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAEnC,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAElC,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AA+BxC;;;GAGG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,UAAU,CAAwB,CACvD,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,GAAG,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,EAChG,GAAG,EACH,EAAE;IACF,MAAM,GAAG,GAAG,UAAU,EAAE,CAAA;IAExB,KAAK,UAAU,IAAI,CAAC,CAAgB,EAAE,kBAA4B;QAChE,MAAM,GAAG,CAAC,IAAI,CAAC;YACb,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAC,cAAc,cAAC,KAAC,IAAI,IAAC,UAAU,EAAC,YAAY,YAAE,OAAO,GAAQ,GAAiB;YAC3G,MAAM,EAAE,CAAC,CAAC,MAAqB;YAC/B,QAAQ;YACR,kBAAkB;SACnB,CAAC,CAAA;QACF,MAAM,EAAE,EAAE,CAAA;IACZ,CAAC;IAED,SAAS,IAAI;QACX,GAAG,CAAC,IAAI,EAAE,CAAA;QACV,MAAM,EAAE,EAAE,CAAA;IACZ,CAAC;IAED,OAAO,CACL,iBACM,CAAC,WAAW,KAAK,OAAO;YAC1B,CAAC,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE;YAC5C,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,CAC1F,EACD,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,WAAW,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EACjD,IAAI,EAAE,WAAW,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EACpD,GAAG,EAAE,GAAG,YAEP,QAAQ,GACL,CACP,CAAA;AACH,CAAC,CAAC,CAAA"}

package/dist/components/Tooltip/TooltipAPI.d.ts

@@ -0,0 +1,29 @@
+import { ShowOptions } from './types.js';
+/**
+ * Allows interaction with the tooltip element.
+ *
+ * This places the tooltip element at the correct place, shows it, hides it and manages its contents.
+ *
+ * This also takes into account the screen edges, making adjustments to the tooltip position if it would overflow the screen.
+ */
+export declare class TooltipAPI {
+    /**
+     * A reference to the tooltip element in the HTML tree.
+     */
+    tooltipRef: React.RefObject<HTMLDivElement>;
+    private setContent;
+    private hideTimeoutId;
+    private clickListener;
+    private relativeTo;
+    constructor(tooltipRef: React.RefObject<HTMLDivElement>, setContent: React.Dispatch<React.SetStateAction<React.ReactNode>>);
+    private computeRelativeTo;
+    /**
+     * Shows the tooltip with `content`. Its position is based on `position` and the position of the element referred by `anchor`.
+     */
+    show({ content, anchor, position, hideOnClickOutside }: ShowOptions): Promise<void>;
+    /**
+     * Hides the tooltip. After the animation, the content is removed.
+     */
+    hide(): void;
+}
+//# sourceMappingURL=TooltipAPI.d.ts.map

package/dist/components/Tooltip/TooltipAPI.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipAPI.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/TooltipAPI.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AASrC;;;;;;GAMG;AACH,qBAAa,UAAU;IACrB;;OAEG;IACH,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;IAC3C,OAAO,CAAC,UAAU,CAAuD;IACzE,OAAO,CAAC,aAAa,CAAoB;IACzC,OAAO,CAAC,aAAa,CAAuC;IAC5D,OAAO,CAAC,UAAU,CAAyB;gBAE/B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EAAE,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IAK1H,OAAO,CAAC,iBAAiB;IAQzB;;OAEG;IACG,IAAI,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,QAAmB,EAAE,kBAAkB,EAAE,EAAE,WAAW;IA+CpF;;OAEG;IACH,IAAI,IAAI,IAAI;CAMb"}

package/dist/components/Tooltip/TooltipAPI.js

@@ -0,0 +1,107 @@
+import { delay } from '@stack-spot/portal-components';
+import { animationTimeMS } from './style.js';
+// the maximum amount of pixels a tooltip can get close to the screen edges.
+const MARGIN_TO_CORNERS_PX = 10;
+function isRelative(element) {
+    return ['relative', 'absolute', 'fixed'].includes(element.computedStyleMap().get('position')?.toString() ?? '');
+}
+/**
+ * Allows interaction with the tooltip element.
+ *
+ * This places the tooltip element at the correct place, shows it, hides it and manages its contents.
+ *
+ * This also takes into account the screen edges, making adjustments to the tooltip position if it would overflow the screen.
+ */
+export class TooltipAPI {
+    /**
+     * A reference to the tooltip element in the HTML tree.
+     */
+    tooltipRef;
+    setContent;
+    hideTimeoutId;
+    clickListener;
+    relativeTo;
+    constructor(tooltipRef, setContent) {
+        this.tooltipRef = tooltipRef;
+        this.setContent = setContent;
+    }
+    computeRelativeTo() {
+        if (this.relativeTo)
+            return;
+        this.relativeTo = this.tooltipRef.current?.parentElement;
+        while (this.relativeTo && this.relativeTo !== document.body && !isRelative(this.relativeTo)) {
+            this.relativeTo = this.relativeTo.parentElement;
+        }
+    }
+    /**
+     * Shows the tooltip with `content`. Its position is based on `position` and the position of the element referred by `anchor`.
+     */
+    async show({ content, anchor, position = 'bottom', hideOnClickOutside }) {
+        window.clearTimeout(this.hideTimeoutId);
+        this.hideTimeoutId = undefined;
+        if (this.clickListener)
+            document.removeEventListener('click', this.clickListener);
+        this.setContent(content);
+        await delay(10);
+        if (!this.tooltipRef.current)
+            return;
+        const anchorRect = anchor.getClientRects()[0];
+        this.tooltipRef.current.classList.add('visible');
+        const tooltipWidth = this.tooltipRef.current.clientWidth;
+        const tooltipHeight = this.tooltipRef.current.clientHeight;
+        let top = 0;
+        let left = 0;
+        if (position === 'left' || position === 'right') {
+            top = anchorRect.top + anchorRect.height / 2 - tooltipHeight / 2;
+            if (position === 'left')
+                left = anchorRect.left - tooltipWidth;
+            else
+                left = anchorRect.left + anchorRect.width;
+        }
+        else {
+            left = anchorRect.left + anchorRect.width / 2 - tooltipWidth / 2;
+            if (position === 'top')
+                top = anchorRect.top - tooltipHeight;
+            else
+                top = anchorRect.top + anchorRect.height;
+        }
+        // takes the parent the tooltip is positioned relative to into consideration
+        this.computeRelativeTo();
+        const relativeRect = this.relativeTo?.getClientRects()[0] ?? { top: 0, left: 0 };
+        top -= relativeRect.top;
+        left -= relativeRect.left;
+        // adjusts positions in order to avoid overflowing the window and leaving a margin to the corners
+        if (top <= 0)
+            top += MARGIN_TO_CORNERS_PX;
+        else if (top + tooltipHeight >= document.body.clientHeight - MARGIN_TO_CORNERS_PX) {
+            top = document.body.clientHeight - MARGIN_TO_CORNERS_PX + tooltipHeight;
+        }
+        if (left <= 0)
+            left += MARGIN_TO_CORNERS_PX;
+        else if (left + tooltipWidth >= document.body.clientWidth - MARGIN_TO_CORNERS_PX) {
+            left = document.body.clientWidth - MARGIN_TO_CORNERS_PX - tooltipWidth;
+        }
+        this.tooltipRef.current.style.top = `${top}px`;
+        this.tooltipRef.current.style.left = `${left}px`;
+        if (hideOnClickOutside) {
+            this.clickListener = (e) => {
+                if (this.tooltipRef.current?.contains(e.target))
+                    return;
+                this.hide();
+            };
+            document.addEventListener('click', this.clickListener);
+        }
+    }
+    /**
+     * Hides the tooltip. After the animation, the content is removed.
+     */
+    hide() {
+        if (!this.tooltipRef.current)
+            return;
+        this.tooltipRef.current.classList.remove('visible');
+        this.hideTimeoutId = window.setTimeout(() => this.setContent(undefined), animationTimeMS);
+        if (this.clickListener)
+            document.removeEventListener('click', this.clickListener);
+    }
+}
+//# sourceMappingURL=TooltipAPI.js.map

package/dist/components/Tooltip/TooltipAPI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipAPI.js","sourceRoot":"","sources":["../../../src/components/Tooltip/TooltipAPI.ts"],"names":[],"mappings":"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"}

package/dist/components/Tooltip/context.d.ts

@@ -0,0 +1,5 @@
+import { WithChildren } from '../../types.js';
+import { TooltipAPI } from './TooltipAPI.js';
+export declare const TooltipProvider: ({ children }: Required<WithChildren>) => import("react/jsx-runtime").JSX.Element;
+export declare function useTooltip(): TooltipAPI;
+//# sourceMappingURL=context.d.ts.map

package/dist/components/Tooltip/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/context.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAE1C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAIzC,eAAO,MAAM,eAAe,iBAAkB,QAAQ,CAAC,YAAY,CAAC,4CAUnE,CAAA;AAED,wBAAgB,UAAU,eAIzB"}

package/dist/components/Tooltip/context.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, useRef, useState } from 'react';
+import { TooltipBox } from './style.js';
+import { TooltipAPI } from './TooltipAPI.js';
+const Context = createContext(undefined);
+export const TooltipProvider = ({ children }) => {
+    const ref = useRef(null);
+    const [content, setContent] = useState();
+    const api = useMemo(() => new TooltipAPI(ref, setContent), []);
+    return (_jsxs(Context.Provider, { value: api, children: [children, _jsx(TooltipBox, { ref: ref, children: content })] }));
+};
+export function useTooltip() {
+    const api = useContext(Context);
+    if (!api)
+        throw new Error('In order to use tooltips, you must wrap your content in a <TooltipProvider>.');
+    return api;
+}
+//# sourceMappingURL=context.js.map

package/dist/components/Tooltip/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../../../src/components/Tooltip/context.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE5E,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,MAAM,OAAO,GAAG,aAAa,CAAyB,SAAS,CAAC,CAAA;AAEhE,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAA0B,EAAE,EAAE;IACtE,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IACxC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,EAAmB,CAAA;IACzD,MAAM,GAAG,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,UAAU,CAAC,GAAG,EAAE,UAAU,CAAC,EAAE,EAAE,CAAC,CAAA;IAC9D,OAAO,CACL,MAAC,OAAO,CAAC,QAAQ,IAAC,KAAK,EAAE,GAAG,aACzB,QAAQ,EACT,KAAC,UAAU,IAAC,GAAG,EAAE,GAAG,YAAG,OAAO,GAAc,IAC3B,CACpB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,UAAU,UAAU;IACxB,MAAM,GAAG,GAAG,UAAU,CAAC,OAAO,CAAC,CAAA;IAC/B,IAAI,CAAC,GAAG;QAAE,MAAM,IAAI,KAAK,CAAC,8EAA8E,CAAC,CAAA;IACzG,OAAO,GAAG,CAAA;AACZ,CAAC"}

package/dist/components/Tooltip/index.d.ts

@@ -0,0 +1,3 @@
+export { TooltipProvider } from './context.js';
+export { Tooltip } from './Tooltip.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Tooltip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA"}

package/dist/components/Tooltip/index.js

@@ -0,0 +1,3 @@
+export { TooltipProvider } from './context.js';
+export { Tooltip } from './Tooltip.js';
+//# sourceMappingURL=index.js.map

package/dist/components/Tooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA"}

package/dist/components/Tooltip/style.d.ts

@@ -0,0 +1,4 @@
+export declare const animationTimeMS = 300;
+export declare const TooltipBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const DefaultTooltip: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+//# sourceMappingURL=style.d.ts.map

package/dist/components/Tooltip/style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/style.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,MAAM,CAAA;AAElC,eAAO,MAAM,UAAU,wOAUtB,CAAA;AAED,eAAO,MAAM,cAAc,wOAM1B,CAAA"}

package/dist/components/Tooltip/style.js

@@ -0,0 +1,22 @@
+import { theme } from '@stack-spot/portal-theme';
+import { styled } from 'styled-components';
+export const animationTimeMS = 300;
+export const TooltipBox = styled.div `
+  position: absolute;
+  opacity: 0;
+  transition: opacity ${animationTimeMS / 1000}s;
+  top: 0;
+  left: 0;
+
+  &.visible {
+    opacity: 1;
+  }
+`;
+export const DefaultTooltip = styled.div `
+  padding: 4px 8px;
+  background-color: ${theme.color.inverse[500]};
+  color: ${theme.color.inverse.contrastText};
+  border-radius: 6px;
+  margin: 6px;
+`;
+//# sourceMappingURL=style.js.map

package/dist/components/Tooltip/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sourceRoot":"","sources":["../../../src/components/Tooltip/style.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAE1C,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;AAElC,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;wBAGZ,eAAe,GAAE,IAAI;;;;;;;CAO5C,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;sBAElB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;WACnC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY;;;CAG1C,CAAA"}