@credithub/harlan-components 1.44.0 → 1.44.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/components/dossie/generativeAi/styles.js +74 -2
  2. package/lib/cjs/index.js +75 -3
  3. package/lib/esm/index.js +75 -3
  4. package/package.json +1 -1
package/dist/components/dossie/generativeAi/styles.js CHANGED
@@ -7,9 +7,45 @@ export var BetaTag = styled.span(templateObject_1 || (templateObject_1 = __makeT
7
7
  export var dotFlashing = keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n 0% {\n opacity: 1;\n }\n 50%,\n 100% {\n opacity: 0;\n }\n"], ["\n 0% {\n opacity: 1;\n }\n 50%,\n 100% {\n opacity: 0;\n }\n"])));
8
8
  export var LoadingDots = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n &::after {\n content: '...';\n animation: ", " 1.2s infinite steps(3, end);\n display: inline-block;\n width: 1em;\n text-align: left;\n }\n"], ["\n &::after {\n content: '...';\n animation: ", " 1.2s infinite steps(3, end);\n display: inline-block;\n width: 1em;\n text-align: left;\n }\n"])), dotFlashing);
9
9
  export var InitialMessageBox = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding: 20px;\n border-radius: 8px;\n margin-bottom: 20px;\n width: 95%;\n"], ["\n padding: 20px;\n border-radius: 8px;\n margin-bottom: 20px;\n width: 95%;\n"])));
10
- export var InitialMessageContent = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-size: 1rem;\n line-height: 1.5;\n padding: 20px 56px;\n display: flex;\n flex-direction: column;\n\n .icon-and-text {\n display: flex;\n align-items: flex-start;\n margin-bottom: 16px;\n\n span {\n all: unset; /* Remove todas as heran\u00E7as */\n font-family: ", ";\n font-size: 1rem;\n line-height: 1.5;\n\n /* Estilo espec\u00EDfico para o primeiro par\u00E1grafo */\n p:first-child {\n margin-top: 0;\n margin-bottom: -8px;\n margin-left: 8px;\n display: inline-block;\n }\n\n /* Estilos globais para tags internas */\n & p,\n & strong,\n & em,\n & ul,\n & ol,\n & li {\n font-size: inherit;\n line-height: inherit;\n margin: 0;\n }\n\n strong {\n font-weight: bold;\n }\n\n em {\n font-style: italic;\n }\n\n ul,\n ol {\n padding-left: 1.5em;\n }\n\n li {\n margin-top: 0.5em;\n }\n }\n }\n\n svg.initial-icon {\n width: 18px;\n height: 18px;\n margin-right: 8px;\n flex-shrink: 0;\n align-self: flex-start;\n }\n\n .additional-message {\n margin-top: 16px;\n padding-left: 26px;\n\n p {\n margin: 0;\n }\n\n .blue-text {\n color: ", ";\n font-weight: bold;\n }\n }\n\n .final-message {\n margin-top: 16px;\n display: flex;\n align-items: center;\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n }\n }\n\n @media (max-width: 768px) {\n font-size: 0.9rem;\n padding: 10px 20px;\n\n .additional-message {\n padding-left: 20px;\n }\n }\n"], ["\n font-size: 1rem;\n line-height: 1.5;\n padding: 20px 56px;\n display: flex;\n flex-direction: column;\n\n .icon-and-text {\n display: flex;\n align-items: flex-start;\n margin-bottom: 16px;\n\n span {\n all: unset; /* Remove todas as heran\u00E7as */\n font-family: ", ";\n font-size: 1rem;\n line-height: 1.5;\n\n /* Estilo espec\u00EDfico para o primeiro par\u00E1grafo */\n p:first-child {\n margin-top: 0;\n margin-bottom: -8px;\n margin-left: 8px;\n display: inline-block;\n }\n\n /* Estilos globais para tags internas */\n & p,\n & strong,\n & em,\n & ul,\n & ol,\n & li {\n font-size: inherit;\n line-height: inherit;\n margin: 0;\n }\n\n strong {\n font-weight: bold;\n }\n\n em {\n font-style: italic;\n }\n\n ul,\n ol {\n padding-left: 1.5em;\n }\n\n li {\n margin-top: 0.5em;\n }\n }\n }\n\n svg.initial-icon {\n width: 18px;\n height: 18px;\n margin-right: 8px;\n flex-shrink: 0;\n align-self: flex-start;\n }\n\n .additional-message {\n margin-top: 16px;\n padding-left: 26px;\n\n p {\n margin: 0;\n }\n\n .blue-text {\n color: ", ";\n font-weight: bold;\n }\n }\n\n .final-message {\n margin-top: 16px;\n display: flex;\n align-items: center;\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n }\n }\n\n @media (max-width: 768px) {\n font-size: 0.9rem;\n padding: 10px 20px;\n\n .additional-message {\n padding-left: 20px;\n }\n }\n"])), function (_a) {
10
+ export var InitialMessageContent = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-size: 1rem;\n line-height: 1.5;\n padding: 20px 56px;\n display: flex;\n flex-direction: column;\n\n .icon-and-text {\n display: flex;\n align-items: flex-start;\n margin-bottom: 16px;\n\n span {\n all: unset; /* Remove todas as heran\u00E7as */\n font-family: ", ";\n font-size: 1rem;\n line-height: 1.5;\n\n /* Estilo espec\u00EDfico para o primeiro par\u00E1grafo */\n p:first-child {\n margin-top: 0;\n margin-bottom: -8px;\n margin-left: 8px;\n display: inline-block;\n }\n\n /* Estilos globais para tags internas */\n & p,\n & strong,\n & em,\n & ul,\n & ol,\n & li,\n & h1,\n & h2,\n & h3,\n & h4 {\n font-size: inherit;\n line-height: inherit;\n margin: 0;\n }\n\n strong {\n font-weight: bold;\n }\n\n em {\n font-style: italic;\n }\n\n ul,\n ol {\n padding-left: 1.5em;\n }\n\n li {\n margin-top: 0.5em;\n }\n\n /* Estilo para os cabe\u00E7alhos */\n h1 {\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n }\n\n h2 {\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n }\n\n h3 {\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n }\n\n h4 {\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n }\n }\n }\n\n svg.initial-icon {\n width: 18px;\n height: 18px;\n margin-right: 8px;\n flex-shrink: 0;\n align-self: flex-start;\n }\n\n .additional-message {\n margin-top: 16px;\n padding-left: 26px;\n\n p {\n margin: 0;\n }\n\n .blue-text {\n color: ", ";\n font-weight: bold;\n }\n }\n\n .final-message {\n margin-top: 16px;\n display: flex;\n align-items: center;\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n }\n }\n\n @media (max-width: 768px) {\n font-size: 0.9rem;\n padding: 10px 20px;\n\n .additional-message {\n padding-left: 20px;\n }\n }\n"], ["\n font-size: 1rem;\n line-height: 1.5;\n padding: 20px 56px;\n display: flex;\n flex-direction: column;\n\n .icon-and-text {\n display: flex;\n align-items: flex-start;\n margin-bottom: 16px;\n\n span {\n all: unset; /* Remove todas as heran\u00E7as */\n font-family: ", ";\n font-size: 1rem;\n line-height: 1.5;\n\n /* Estilo espec\u00EDfico para o primeiro par\u00E1grafo */\n p:first-child {\n margin-top: 0;\n margin-bottom: -8px;\n margin-left: 8px;\n display: inline-block;\n }\n\n /* Estilos globais para tags internas */\n & p,\n & strong,\n & em,\n & ul,\n & ol,\n & li,\n & h1,\n & h2,\n & h3,\n & h4 {\n font-size: inherit;\n line-height: inherit;\n margin: 0;\n }\n\n strong {\n font-weight: bold;\n }\n\n em {\n font-style: italic;\n }\n\n ul,\n ol {\n padding-left: 1.5em;\n }\n\n li {\n margin-top: 0.5em;\n }\n\n /* Estilo para os cabe\u00E7alhos */\n h1 {\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n }\n\n h2 {\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n }\n\n h3 {\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n }\n\n h4 {\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n }\n }\n }\n\n svg.initial-icon {\n width: 18px;\n height: 18px;\n margin-right: 8px;\n flex-shrink: 0;\n align-self: flex-start;\n }\n\n .additional-message {\n margin-top: 16px;\n padding-left: 26px;\n\n p {\n margin: 0;\n }\n\n .blue-text {\n color: ", ";\n font-weight: bold;\n }\n }\n\n .final-message {\n margin-top: 16px;\n display: flex;\n align-items: center;\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n }\n }\n\n @media (max-width: 768px) {\n font-size: 0.9rem;\n padding: 10px 20px;\n\n .additional-message {\n padding-left: 20px;\n }\n }\n"])), function (_a) {
11
11
  var theme = _a.theme;
12
12
  return theme.typography.defaultFontFamily;
13
+ }, function (_a) {
14
+ var theme = _a.theme;
15
+ return theme.typography.headline24.fontSize;
16
+ }, function (_a) {
17
+ var theme = _a.theme;
18
+ return theme.typography.headline24.fontWeight;
19
+ }, function (_a) {
20
+ var theme = _a.theme;
21
+ return theme.typography.headline24.lineHeight;
22
+ }, function (_a) {
23
+ var theme = _a.theme;
24
+ return theme.typography.headline20.fontSize;
25
+ }, function (_a) {
26
+ var theme = _a.theme;
27
+ return theme.typography.headline20.fontWeight;
28
+ }, function (_a) {
29
+ var theme = _a.theme;
30
+ return theme.typography.headline20.lineHeight;
31
+ }, function (_a) {
32
+ var theme = _a.theme;
33
+ return theme.typography.headline16.fontSize;
34
+ }, function (_a) {
35
+ var theme = _a.theme;
36
+ return theme.typography.headline16.fontWeight;
37
+ }, function (_a) {
38
+ var theme = _a.theme;
39
+ return theme.typography.headline16.lineHeight;
40
+ }, function (_a) {
41
+ var theme = _a.theme;
42
+ return theme.typography.headline14.fontSize;
43
+ }, function (_a) {
44
+ var theme = _a.theme;
45
+ return theme.typography.headline14.fontWeight;
46
+ }, function (_a) {
47
+ var theme = _a.theme;
48
+ return theme.typography.headline14.lineHeight;
13
49
  }, function (_a) {
14
50
  var theme = _a.theme;
15
51
  return theme.colors.azulCredithub;
@@ -40,7 +76,7 @@ export var MessageHistory = styled.div(templateObject_10 || (templateObject_10 =
40
76
  var theme = _a.theme;
41
77
  return theme.colors.cinzaBackground;
42
78
  });
43
- export var Message = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n padding: 10px 15px;\n margin: 10px 0;\n max-width: 90%;\n border-radius: 16px;\n word-wrap: break-word;\n background-color: ", ";\n color: ", ";\n align-self: ", ";\n text-align: ", ";\n overflow-y: auto;\n opacity: 0;\n transform: translateY(20px);\n animation: fadeIn 0.5s ease-out forwards;\n\n .icon-and-message {\n display: flex;\n align-items: center;\n gap: 8px;\n\n span {\n all: unset; /* Remove todas as heran\u00E7as */\n font-family: ", ";\n font-size: 1rem;\n line-height: 1.5;\n\n /* Estilo espec\u00EDfico para o primeiro par\u00E1grafo */\n p:first-child {\n margin-top: 0;\n margin-bottom: -8px;\n margin-left: 8px;\n display: inline-block;\n }\n\n /* Estilos globais para tags internas */\n & p,\n & strong,\n & em,\n & ul,\n & ol,\n & li {\n font-size: inherit;\n line-height: inherit;\n margin: 0;\n }\n\n strong {\n font-weight: bold;\n }\n\n em {\n font-style: italic;\n }\n\n ul,\n ol {\n padding-left: 1.5em;\n }\n\n li {\n margin-top: 0.5em;\n }\n }\n }\n\n svg {\n flex-shrink: 0;\n align-self: flex-start;\n }\n\n span {\n font-size: 1rem;\n line-height: 1.5;\n }\n\n @media (max-width: 768px) {\n padding: 8px;\n margin: 8px 0;\n max-width: 80%;\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n"], ["\n display: flex;\n align-items: flex-start;\n padding: 10px 15px;\n margin: 10px 0;\n max-width: 90%;\n border-radius: 16px;\n word-wrap: break-word;\n background-color: ", ";\n color: ", ";\n align-self: ", ";\n text-align: ", ";\n overflow-y: auto;\n opacity: 0;\n transform: translateY(20px);\n animation: fadeIn 0.5s ease-out forwards;\n\n .icon-and-message {\n display: flex;\n align-items: center;\n gap: 8px;\n\n span {\n all: unset; /* Remove todas as heran\u00E7as */\n font-family: ", ";\n font-size: 1rem;\n line-height: 1.5;\n\n /* Estilo espec\u00EDfico para o primeiro par\u00E1grafo */\n p:first-child {\n margin-top: 0;\n margin-bottom: -8px;\n margin-left: 8px;\n display: inline-block;\n }\n\n /* Estilos globais para tags internas */\n & p,\n & strong,\n & em,\n & ul,\n & ol,\n & li {\n font-size: inherit;\n line-height: inherit;\n margin: 0;\n }\n\n strong {\n font-weight: bold;\n }\n\n em {\n font-style: italic;\n }\n\n ul,\n ol {\n padding-left: 1.5em;\n }\n\n li {\n margin-top: 0.5em;\n }\n }\n }\n\n svg {\n flex-shrink: 0;\n align-self: flex-start;\n }\n\n span {\n font-size: 1rem;\n line-height: 1.5;\n }\n\n @media (max-width: 768px) {\n padding: 8px;\n margin: 8px 0;\n max-width: 80%;\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n"])), function (_a) {
79
+ export var Message = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n padding: 10px 15px;\n margin: 10px 0;\n max-width: 90%;\n border-radius: 16px;\n word-wrap: break-word;\n background-color: ", ";\n color: ", ";\n align-self: ", ";\n text-align: ", ";\n overflow-y: auto;\n opacity: 0;\n transform: translateY(20px);\n animation: fadeIn 0.5s ease-out forwards;\n\n .icon-and-message {\n display: flex;\n align-items: center;\n gap: 8px;\n\n span {\n all: unset; /* Remove todas as heran\u00E7as */\n font-family: ", ";\n font-size: 1rem;\n line-height: 1.5;\n\n /* Estilo espec\u00EDfico para o primeiro par\u00E1grafo */\n p:first-child {\n margin-top: 0;\n margin-bottom: -8px;\n margin-left: 8px;\n display: inline-block;\n }\n\n /* Estilos globais para tags internas */\n & p,\n & strong,\n & em,\n & ul,\n & ol,\n & li,\n & h1,\n & h2,\n & h3,\n & h4 {\n font-size: inherit;\n line-height: inherit;\n margin: 0;\n }\n\n strong {\n font-weight: bold;\n }\n\n em {\n font-style: italic;\n }\n\n ul,\n ol {\n padding-left: 1.5em;\n }\n\n li {\n margin-top: 0.5em;\n }\n\n /* Estilo para os cabe\u00E7alhos */\n h1 {\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n }\n\n h2 {\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n }\n\n h3 {\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n }\n\n h4 {\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n }\n }\n }\n\n svg {\n flex-shrink: 0;\n align-self: flex-start;\n }\n\n span {\n font-size: 1rem;\n line-height: 1.5;\n }\n\n @media (max-width: 768px) {\n padding: 8px;\n margin: 8px 0;\n max-width: 80%;\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n"], ["\n display: flex;\n align-items: flex-start;\n padding: 10px 15px;\n margin: 10px 0;\n max-width: 90%;\n border-radius: 16px;\n word-wrap: break-word;\n background-color: ", ";\n color: ", ";\n align-self: ", ";\n text-align: ", ";\n overflow-y: auto;\n opacity: 0;\n transform: translateY(20px);\n animation: fadeIn 0.5s ease-out forwards;\n\n .icon-and-message {\n display: flex;\n align-items: center;\n gap: 8px;\n\n span {\n all: unset; /* Remove todas as heran\u00E7as */\n font-family: ", ";\n font-size: 1rem;\n line-height: 1.5;\n\n /* Estilo espec\u00EDfico para o primeiro par\u00E1grafo */\n p:first-child {\n margin-top: 0;\n margin-bottom: -8px;\n margin-left: 8px;\n display: inline-block;\n }\n\n /* Estilos globais para tags internas */\n & p,\n & strong,\n & em,\n & ul,\n & ol,\n & li,\n & h1,\n & h2,\n & h3,\n & h4 {\n font-size: inherit;\n line-height: inherit;\n margin: 0;\n }\n\n strong {\n font-weight: bold;\n }\n\n em {\n font-style: italic;\n }\n\n ul,\n ol {\n padding-left: 1.5em;\n }\n\n li {\n margin-top: 0.5em;\n }\n\n /* Estilo para os cabe\u00E7alhos */\n h1 {\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n }\n\n h2 {\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n }\n\n h3 {\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n }\n\n h4 {\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n }\n }\n }\n\n svg {\n flex-shrink: 0;\n align-self: flex-start;\n }\n\n span {\n font-size: 1rem;\n line-height: 1.5;\n }\n\n @media (max-width: 768px) {\n padding: 8px;\n margin: 8px 0;\n max-width: 80%;\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n"])), function (_a) {
44
80
  var theme = _a.theme;
45
81
  return theme.colors.white;
46
82
  }, function (_a) {
@@ -49,6 +85,42 @@ export var Message = styled.div(templateObject_11 || (templateObject_11 = __make
49
85
  }, function (props) { return (props.role === 'user' ? 'flex-end' : 'flex-start'); }, function (props) { return (props.role === 'user' ? 'right' : 'left'); }, function (_a) {
50
86
  var theme = _a.theme;
51
87
  return theme.typography.defaultFontFamily;
88
+ }, function (_a) {
89
+ var theme = _a.theme;
90
+ return theme.typography.headline24.fontSize;
91
+ }, function (_a) {
92
+ var theme = _a.theme;
93
+ return theme.typography.headline24.fontWeight;
94
+ }, function (_a) {
95
+ var theme = _a.theme;
96
+ return theme.typography.headline24.lineHeight;
97
+ }, function (_a) {
98
+ var theme = _a.theme;
99
+ return theme.typography.headline20.fontSize;
100
+ }, function (_a) {
101
+ var theme = _a.theme;
102
+ return theme.typography.headline20.fontWeight;
103
+ }, function (_a) {
104
+ var theme = _a.theme;
105
+ return theme.typography.headline20.lineHeight;
106
+ }, function (_a) {
107
+ var theme = _a.theme;
108
+ return theme.typography.headline16.fontSize;
109
+ }, function (_a) {
110
+ var theme = _a.theme;
111
+ return theme.typography.headline16.fontWeight;
112
+ }, function (_a) {
113
+ var theme = _a.theme;
114
+ return theme.typography.headline16.lineHeight;
115
+ }, function (_a) {
116
+ var theme = _a.theme;
117
+ return theme.typography.headline14.fontSize;
118
+ }, function (_a) {
119
+ var theme = _a.theme;
120
+ return theme.typography.headline14.fontWeight;
121
+ }, function (_a) {
122
+ var theme = _a.theme;
123
+ return theme.typography.headline14.lineHeight;
52
124
  });
53
125
  export var ChatInputContainer = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 30px;\n width: 100%;\n background-color: ", ";\n border-radius: 30px;\n padding: 8px;\n box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);\n\n @media (max-width: 768px) {\n margin-top: 15px;\n padding: 6px;\n border-radius: 20px;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 30px;\n width: 100%;\n background-color: ", ";\n border-radius: 30px;\n padding: 8px;\n box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);\n\n @media (max-width: 768px) {\n margin-top: 15px;\n padding: 6px;\n border-radius: 20px;\n }\n"])), function (_a) {
54
126
  var theme = _a.theme;