@bothub-chat/ui 2.33.0 → 2.33.1-develop-b4a52ff1-8d76-44bf-8e78-4c5d0f724112

package/README.md

@@ -1,24 +1,24 @@
-<p align="center">
-  <img src="https://bothub.chat/icon-144x144.png" />
-</p>
-<h1 align="center">Bothub Chat</h1>
-<p align="center">UI Components from Bothub.</p>
-<p align="center">
-  <a href="https://bothub-docs.vercel.app/">Documentation</a>
-</p>
-
-<h2>Installing</h2>
-<p>Preliminary requirements:</p>
-<ul>
-    <li><a href="https://nodejs.org/">Node.js</a> >= <code>18.12.1</code></li>
-    <li><a href="https://www.npmjs.com/">npm</a> >= <code>9.1.2</code></li>
-    <li><a href="https://yarnpkg.com/">yarn</a> >= <code>1.22.19</code></li>
-</ul>
-<p>Installing peer dependencies:</p>
-<pre>yarn add framer-motion@10.16.3 react@18.2.0 react-dom@18.2.0 styled-components@6.0.7 react-helmet@6.1.0 normalize.css@8.0.1 react-slider@2.0.6 react-markdown@8.0.5 highlight.js@11.9.0 react-highlight@0.15.0</pre>
-<p>Installing package:</p>
-<pre>yarn add @bothub-chat/ui</pre>
-
-
-<h2>License</h2>
+<p align="center">
+  <img src="https://bothub.chat/icon-144x144.png" />
+</p>
+<h1 align="center">Bothub Chat</h1>
+<p align="center">UI Components from Bothub.</p>
+<p align="center">
+  <a href="https://bothub-docs.vercel.app/">Documentation</a>
+</p>
+
+<h2>Installing</h2>
+<p>Preliminary requirements:</p>
+<ul>
+    <li><a href="https://nodejs.org/">Node.js</a> >= <code>18.12.1</code></li>
+    <li><a href="https://www.npmjs.com/">npm</a> >= <code>9.1.2</code></li>
+    <li><a href="https://yarnpkg.com/">yarn</a> >= <code>1.22.19</code></li>
+</ul>
+<p>Installing peer dependencies:</p>
+<pre>yarn add framer-motion@10.16.3 react@18.2.0 react-dom@18.2.0 styled-components@6.0.7 react-helmet@6.1.0 normalize.css@8.0.1 react-slider@2.0.6 react-markdown@8.0.5 highlight.js@11.9.0 react-highlight@0.15.0</pre>
+<p>Installing package:</p>
+<pre>yarn add @bothub-chat/ui</pre>
+
+
+<h2>License</h2>
 <p><a href="https://github.com/matbea-dev/bothub/blob/main/LICENSE">MIT</a></p>

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

@@ -1,6 +1,7 @@
 import React from 'react';
 export interface AccordionProps extends React.ComponentProps<'div'> {
-    label: string;
+    label: string | React.ReactNode;
+    variant?: 'with-icon' | 'default';
     fullWidth?: boolean;
 }
 export declare const Accordion: React.FC<AccordionProps>;

package/dist/components/accordion/index.js

@@ -1 +1 @@
-import{__rest as r}from"tslib";import{jsxs as e,jsx as i}from"react/jsx-runtime";import{useState as n,useCallback as t}from"react";import{AccordionStyled as l,AccordionHead as c,AccordionLabel as o,AccordionArrow as s,AccordionBody as p,AccordionText as m}from"./styled.js";const d=d=>{var{label:h,children:a}=d,f=r(d,["label","children"]);const[O,b]=n(!1),$=t((()=>{b(!O)}),[O]);return e(l,Object.assign({},f,{children:[e(c,{$isOpen:O,onClick:$,children:[i(o,{children:h}),i(s,{$isOpen:O})]}),i(p,{$isOpen:O,children:"string"==typeof a?i(m,{$isOpen:O,children:a}):a})]}))};export{d as Accordion,s as AccordionArrow,p as AccordionBody,c as AccordionHead,o as AccordionLabel,l as AccordionStyled,m as AccordionText};
+import{__rest as r}from"tslib";import{jsxs as e,jsx as i}from"react/jsx-runtime";import{useState as t,useCallback as n}from"react";import{AccordionStyled as a,AccordionHead as l,AccordionLabel as s,AccordionArrow as c,AccordionBody as o,AccordionText as d}from"./styled.js";const f=f=>{var{label:p,children:m,variant:h="default"}=f,u=r(f,["label","children","variant"]);const[$,O]=t(!1),b=n((()=>{O(!$)}),[$]);return e(a,Object.assign({},u,{children:[e(l,{$isDefaultVariant:"default"===h,$isOpen:$,onClick:b,children:[i(s,{children:p}),i(c,{$isOpen:$})]}),i(o,{$isDefaultVariant:"default"===h,$isOpen:$,children:"string"==typeof m?i(d,{$isOpen:$,children:m}):m})]}))};export{f as Accordion,c as AccordionArrow,o as AccordionBody,l as AccordionHead,s as AccordionLabel,a as AccordionStyled,d as AccordionText};

package/dist/components/accordion/styled.d.ts

@@ -271,7 +271,9 @@ export declare const AccordionStyled: import("styled-components").IStyledCompone
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
 }>;
-export declare const AccordionHead: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IsOpenProps>>;
+export declare const AccordionHead: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IsOpenProps & {
+    $isDefaultVariant: boolean;
+}>>;
 export declare const AccordionLabel: import("styled-components").IStyledComponent<"web", {
     children?: import("react").ReactNode;
     variant?: import("@/ui/components/typography").TypographyVariant | undefined;
@@ -1027,7 +1029,9 @@ export declare const AccordionArrow: import("styled-components").IStyledComponen
     zoomAndPan?: string | undefined | undefined;
     $isOpen: boolean;
 }>;
-export declare const AccordionBody: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IsOpenProps>>;
+export declare const AccordionBody: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IsOpenProps & {
+    $isDefaultVariant: boolean;
+}>>;
 export declare const AccordionText: import("styled-components").IStyledComponent<"web", {
     children?: import("react").ReactNode;
     variant?: import("@/ui/components/typography").TypographyVariant | undefined;

package/dist/components/accordion/styled.js

@@ -1,16 +1,17 @@
-import{styled as o,css as e}from"styled-components";import{Typography as t}from"../typography/index.js";import{ArrowDownIcon as i}from"../../icons/arrow-down/index.js";const r=o.div.withConfig({displayName:"styled__AccordionStyled",componentId:"sc-1vnkdol-0"})(["width:100%;display:flex;flex-direction:column;flex-shrink:0;box-sizing:border-box;position:relative;"]),n=o.div.withConfig({displayName:"styled__AccordionHead",componentId:"sc-1vnkdol-1"})(["display:flex;justify-content:space-between;align-items:center;gap:10px;padding:18px;cursor:pointer;border:1px solid ",";border-radius:20px;transition:border-bottom 0.3s,border-radius 0.3s;position:relative;overflow:hidden;",";&::before{content:'';display:block;width:100%;height:100%;position:absolute;top:0;left:0;background-color:",";opacity:0.5;}"],(({theme:o})=>o.colors.grayScale.gray2),(({$isOpen:o})=>o&&e`
+import{styled as o,css as t}from"styled-components";import{Typography as i}from"../typography/index.js";import{ArrowDownIcon as e}from"../../icons/arrow-down/index.js";import"react";import"unified";import"remark-parse";import"remark-gfm";import"mdast-util-to-markdown";import{colorToRgba as r}from"../../utils/colors/colorToRgba.js";import"../../utils/colors/calculateAccentColors.js";const a=o.div.withConfig({displayName:"styled__AccordionStyled",componentId:"sc-1vnkdol-0"})(["width:100%;display:flex;flex-direction:column;flex-shrink:0;box-sizing:border-box;position:relative;"]),n=o.div.withConfig({displayName:"styled__AccordionHead",componentId:"sc-1vnkdol-1"})(["display:flex;justify-content:space-between;align-items:center;gap:10px;padding:18px;cursor:pointer;border:",";border-radius:20px;transition:border-bottom 0.3s,border-radius 0.3s;position:relative;overflow:hidden;",";&::before{content:'';display:block;width:100%;height:100%;position:absolute;top:0;left:0;background-color:",";opacity:",";}"],(({theme:o,$isDefaultVariant:t})=>t&&`1px solid ${o.colors.grayScale.gray2}`),(({$isOpen:o})=>o&&t`
       border-bottom: 0;
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
-    `),(({theme:o})=>o.colors.grayScale.gray4)),d=o(t).attrs({variant:"body-m-semibold"}).withConfig({displayName:"styled__AccordionLabel",componentId:"sc-1vnkdol-2"})(["position:relative;z-index:1;"]),a=o(i).attrs({size:24}).withConfig({displayName:"styled__AccordionArrow",componentId:"sc-1vnkdol-3"})(["transform:rotate(",");transition:transform 0.2s ease-in-out;"],(({$isOpen:o})=>o?"180deg":"0deg")),s=o.div.withConfig({displayName:"styled__AccordionBody",componentId:"sc-1vnkdol-4"})(["background-color:",";border:1px solid ",";border-top:0;border-radius:0 0 20px 20px;transition:max-height 0.3s,padding 0.3s,opacity 0.3s;",";"],(({theme:o})=>o.colors.grayScale.gray3),(({theme:o})=>o.colors.grayScale.gray2),(({$isOpen:o})=>o?e`
+    `),(({theme:o})=>o.colors.grayScale.gray4),(({$isDefaultVariant:o})=>o?"0.5":"0.75")),s=o(i).attrs({variant:"body-m-semibold"}).withConfig({displayName:"styled__AccordionLabel",componentId:"sc-1vnkdol-2"})(["position:relative;z-index:1;"]),d=o(e).attrs({size:24}).withConfig({displayName:"styled__AccordionArrow",componentId:"sc-1vnkdol-3"})(["transform:rotate(",");transition:transform 0.2s ease-in-out;"],(({$isOpen:o})=>o?"180deg":"0deg")),p=o.div.withConfig({displayName:"styled__AccordionBody",componentId:"sc-1vnkdol-4"})(["background-color:",";border:",";border-top:0;border-radius:0 0 20px 20px;transition:max-height 0.3s,padding 0.3s,opacity 0.3s;",";"],(({theme:o,$isDefaultVariant:t})=>t?o.colors.grayScale.gray3:r(o.colors.grayScale.gray4,.75)),(({theme:o,$isDefaultVariant:t})=>t&&`1px solid ${o.colors.grayScale.gray2}`),(({$isOpen:o,$isDefaultVariant:i})=>o?t`
           padding: 18px;
+          ${i?"":"padding-top: 0px;"}
           max-height: auto;
-        `:e`
+        `:t`
           padding: 0 18px;
           max-height: 0px;
           opacity: 0;
           pointer-events: none;
-        `)),p=o(t).attrs({variant:"body-m-regular",component:"p"}).withConfig({displayName:"styled__AccordionText",componentId:"sc-1vnkdol-5"})(["white-space:pre-wrap;",";"],(({$isOpen:o})=>!o&&e`
+        `)),l=o(i).attrs({variant:"body-m-regular",component:"p"}).withConfig({displayName:"styled__AccordionText",componentId:"sc-1vnkdol-5"})(["white-space:pre-wrap;",";"],(({$isOpen:o})=>!o&&t`
       opacity: 0;
       pointer-events: none;
-    `));export{a as AccordionArrow,s as AccordionBody,n as AccordionHead,d as AccordionLabel,r as AccordionStyled,p as AccordionText};
+    `));export{d as AccordionArrow,p as AccordionBody,n as AccordionHead,s as AccordionLabel,a as AccordionStyled,l as AccordionText};

package/dist/components/adaptive-button/styled.d.ts

@@ -32,6 +32,7 @@ export declare const AdaptiveButtonTooltip: import("styled-components").IStyledC
     align?: import("@/ui/components/tooltip").TooltipAlign | undefined;
     inverted?: boolean | undefined;
     label?: import("react").ReactNode;
+    contentWidth?: number | undefined;
     disabled?: boolean | undefined;
     disableHiddenAnimation?: boolean | undefined;
     markdown?: boolean | undefined;

package/dist/components/avatar/assets/default-avatar-light.png.js

@@ -0,0 +1 @@
+var A="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAPySURBVHgBxZlbTxNBFMf/s1TlooAGL8HE1miiRg0YEvVJt0+iT1bxWf0EwCcQP4H4CdRnIX0T9KWLr8YEjBFNIC7Gu4SUWwsROp4zpaWXbTuzLfWXtNvsnun+e87M2TOnAj55PhazAw1WV0pKGxLdEGinY7u6KBCXEq4QcFMpOUVnnDvXww58IEyMo9FYO5qt/hTkQFaMPi69HEvKh5HrYVd3kJbAtDDxICUxgNrwVFdoRYHRVxP9FMYhHx6rBE0BMXTr2tVn5YzKCoy+dB7V0GulFAzfvmYPlr7sAYc01SSi9NFGHZDA5HJShu9HwvHCa5bXgM0mEUOdxDHkpe7WtEOKKBLIYeUBqD/2KN278GReiEfHYvcgxBP4YFcggOamPeq4uLyKvxsb8IccvN0bHkahwOhYLJQSKrQhGNCxvw1nToZw8ED+Iv+zEMfb95+QSK7BCErySwl5PDMfsyHeBIZMxQU7D+PKxe4icQyf671yCcGjh2EEpbNWyrnI6kXWe58NvobC2agE6PD6zRTmF+IwYSkp97MXlQe3vGdEz7lT2rZnTgRhSmtjOv8qgZTRr5oMZu95hbUUbMtjjLBEvzpwVQLDudfcuAemtO3ba2TPc5G1sQdtGLJ7VwB1QaDbsoTogiFxynOmGKcbqBVsW9IwvJmbLS6v7Jh9BgHRRQ40F8h8mJnTtp2e1bfNg6p0y2+d9+P3vNaN2Wbu20/4grRVNdunZ1ysUvg4z7UUpBEO69THWfVDqiHAz75qquUv5B1+deTkOhZn+uTwhLQFSBx/k7FArloyFYyCtnGJRDJ7nYsIhquaRHLdV3VDC9jlEE/CYCUHO4/gGBUAJk8SJk6reNb9irnvv/QHSTlHAuUE+fJmJVv2Vs/5U+g81AE/tNOTpOf8aTUV3tHc1PEoBWXSok3RJDSoRlwuwaNHcPnCWV1zx1I7foGyM5rDWgtxGXh6cC1ZAZe1qWqG2hOPy1mePmleLlXiGHmyAg6/KYGBNQyXsuK512JaKmlQqQTjzoM68luEKlcJby+27WvBTlFG4NNMWyS7J2lIUlXtMRer26GVJp0fPSscN+M9Jn/b+SI2QJVs0d6Uf2lzjcO8uLTi+cOpur+X268pan2MjMeGqczpx39A0mLtuxHO6wV59mZGxp2YqGPrg+H+TF+vfaHwvGdvpiEpIwJ6CbwWkDiH7hn2ula2/VaPcHuFNRer3OC+Xhoo5X2k27e1hTIGtZIHy4lLm2nAnQfe3NMKu4sawF5rWMdQxKMfWIhZE31bKG/0QyZjlcdIGD+1dIRtD/PJ1obfpn1rF5VFIbX5yvkbQhXCgsolIZyNzdSU378h/gGq/371XuxSzAAAAABJRU5ErkJggg==";export{A as default};

package/dist/components/avatar/index.js

@@ -1 +1 @@
-import{__rest as t}from"tslib";import{jsxs as e,jsx as r}from"react/jsx-runtime";import s from"react";import i from"./assets/default-avatar.png.js";import a from"./assets/bot-avatar.png.js";import{AvatarStyled as o,AvatarObject as l,AvatarImage as m,AvatarSkeleton as c}from"./styled.js";import{IconProvider as p}from"../icon/context.js";import"../icon/styled.js";import"@react-spring/web";import"react-dom";import"../portal/styled.js";import"../tooltip/styled.js";import"../tooltip/arrow/styled.js";import"../../theme/index.js";import"../tooltip/context.js";const n=n=>{var{className:d,style:h,variant:j="user",size:y=40,src:f,alt:b,children:g}=n,u=t(n,["className","style","variant","size","src","alt","children"]);const v=s.isValidElement(g),w=v&&"Skeleton"===g.type.displayName;switch(j){case"user":f||(f=i);break;case"default":f=i;break;case"bot":f=a}return e(o,Object.assign({},u,{$size:y,$children:v,className:d,style:h,children:[!w&&!v&&r(l,{data:f,width:y,height:y,children:r(m,{src:i,width:y,height:y,alt:b})}),v&&!w&&r(p,{size:y,children:g}),w&&r(c,{})]}))};export{n as Avatar};
+import{__rest as t}from"tslib";import{jsxs as e,jsx as r}from"react/jsx-runtime";import s from"react";import i from"./assets/default-avatar.png.js";import o from"./assets/default-avatar-light.png.js";import a from"./assets/bot-avatar.png.js";import{AvatarStyled as m,AvatarObject as l,AvatarImage as p,AvatarSkeleton as c}from"./styled.js";import{IconProvider as n}from"../icon/context.js";import"../icon/styled.js";import"@react-spring/web";import"react-dom";import"../portal/styled.js";import"../tooltip/styled.js";import"../tooltip/arrow/styled.js";import"../../theme/index.js";import"../tooltip/context.js";import{useTheme as d}from"../../theme/hook.js";const h=h=>{var{className:j,style:f,variant:y="user",size:g=40,src:b,alt:u,children:v}=h,w=t(h,["className","style","variant","size","src","alt","children"]);const x=d(),k=s.isValidElement(v),z=k&&"Skeleton"===v.type.displayName,N="light"===x.mode?o:i;switch(y){case"user":b||(b=N);break;case"default":b=N;break;case"bot":b=a}return e(m,Object.assign({},w,{$size:g,$children:k,className:j,style:f,children:[!z&&!k&&r(l,{data:b,width:g,height:g,children:r(p,{src:N,width:g,height:g,alt:u})}),k&&!z&&r(n,{size:g,children:v}),z&&r(c,{})]}))};export{h as Avatar};