uibee 2.13.1 → 2.13.3

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 (7) hide show
  1. package/dist/src/components/inputs/textarea.js +10 -9
  2. package/dist/src/components/table/body.js +2 -2
  3. package/dist/src/components/table/header.js +3 -3
  4. package/dist/src/components/table/table.js +1 -1
  5. package/dist/src/globals.css +101 -98
  6. package/package.json +1 -1
  7. package/src/components/inputs/textarea.tsx +21 -20
package/dist/src/components/inputs/textarea.js CHANGED
@@ -18,20 +18,21 @@ export default function Textarea(props) {
18
18
  const [preview, setPreview] = useState(false);
19
19
  const jsonError = type === 'json' && value ? isValidJson(value) : undefined;
20
20
  const displayError = jsonError || error;
21
- return (_jsx(FieldWrapper, { label: label, name: name, required: textareaProps.required, info: info, description: description, error: displayError, textSize: textSize, className: className, children: _jsxs("div", { className: 'relative', children: [type === 'markdown' && (_jsx("div", { className: 'absolute right-2 top-2 z-10 flex gap-2', children: _jsx("button", { type: 'button', onClick: () => setPreview(!preview), className: 'p-1 rounded hover:bg-login-500/50 text-login-text transition-colors', title: preview ? 'Edit' : 'Preview', children: preview ? _jsx(Pencil, { size: 16 }) : _jsx(Eye, { size: 16 }) }) })), type === 'markdown' && preview ? (_jsx("div", { className: `
22
- w-full rounded-md bg-login-500/50 border border-login-500
23
- text-login-text
24
- p-3
25
- prose prose-invert prose-sm max-w-none overflow-y-auto
26
- ${error ? 'border-red-500' : ''}
27
- `, style: { minHeight: `${rows * 1.5}rem` }, children: _jsx(ReactMarkdown, { children: String(value || '') }) })) : (_jsx("textarea", { ...textareaProps, id: name, name: name, rows: rows, title: label, "aria-invalid": !!error, "aria-describedby": error ? `${name}-error` : undefined, className: `
21
+ return (_jsx(FieldWrapper, { label: label, name: name, required: textareaProps.required, info: info, description: description, error: displayError, textSize: textSize, className: className, children: _jsxs("div", { className: 'relative', children: [type === 'markdown' && (_jsx("div", { className: 'absolute right-2 top-2 z-10 flex gap-2', children: _jsx("button", { type: 'button', onClick: () => setPreview(!preview), className: 'p-1 rounded hover:bg-login-500/50 text-login-text transition-colors', title: preview ? 'Edit' : 'Preview', children: preview ? _jsx(Pencil, { size: 16 }) : _jsx(Eye, { size: 16 }) }) })), type === 'markdown' && preview && (_jsx("div", { className: `
22
+ w-full rounded-md bg-login-500/50 border border-login-500
23
+ text-login-text
24
+ p-3
25
+ prose prose-invert prose-base max-w-none overflow-y-auto
26
+ ${error ? 'border-red-500' : ''}
27
+ `, style: { minHeight: `${rows * 1.5}rem` }, children: _jsx(ReactMarkdown, { children: String(value || '') }) })), _jsx("textarea", { ...textareaProps, id: name, name: name, rows: rows, title: label, "aria-invalid": !!error, "aria-describedby": error ? `${name}-error` : undefined, className: `
28
+ ${type === 'markdown' && preview ? 'hidden' : ''}
28
29
  w-full rounded-md bg-login-500/50 border border-login-500
29
30
  text-login-text placeholder-login-200
30
31
  focus:outline-none focus:border-login focus:ring-1 focus:ring-login
31
32
  disabled:opacity-50 disabled:cursor-not-allowed
32
- p-3
33
+ p-3 pr-10
33
34
  transition-all duration-200
34
35
  resize-y
35
36
  ${error ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : ''}
36
- ` }))] }) }));
37
+ ` })] }) }));
37
38
  }
package/dist/src/components/table/body.js CHANGED
@@ -102,9 +102,9 @@ export default function Body({ list, columns, menuItems, redirectPath, variant =
102
102
  }
103
103
  }
104
104
  return (_jsx("td", { className: `
105
- flex-1 px-6 py-4 whitespace-nowrap text-sm min-w-40 flex items-center text-login-100
105
+ flex-1 min-w-0 px-6 py-4 whitespace-nowrap text-sm flex items-center text-login-100
106
106
  ${variant === 'minimal' ? 'px-4! py-2!' : ''}
107
- `, children: _jsx("div", { className: 'relative', children: _jsx("h1", { className: badgeClass, children: formatValue(col.key, value) }) }) }, col.key));
107
+ `, children: _jsx("div", { className: 'relative w-full min-w-0', children: _jsx("h1", { className: `block max-w-full truncate ${badgeClass}`, children: formatValue(col.key, value) }) }) }, col.key));
108
108
  }), menuItems && (_jsx("td", { className: 'shrink-0 w-16 flex flex-row items-center justify-end p-2 px-4\n whitespace-nowrap text-right text-sm font-medium', children: _jsxs("div", { className: 'relative', children: [_jsx("button", { type: 'button', className: `p-1.5 rounded flex items-center justify-center transition-colors ${buttonClass}`, onMouseDown: (e) => e.nativeEvent.stopImmediatePropagation(), onClick: (e) => {
109
109
  e.stopPropagation();
110
110
  const rect = e.currentTarget.getBoundingClientRect();
package/dist/src/components/table/header.js CHANGED
@@ -33,9 +33,9 @@ export default function Header({ columns, hideMenu, variant = 'default' }) {
33
33
  .slice(1)
34
34
  .replaceAll('_', ' ')}`);
35
35
  return (_jsx("th", { className: `
36
- flex-1 px-6 py-3 text-xs font-medium uppercase tracking-wider text-left
36
+ flex-1 min-w-0 px-6 py-3 text-xs font-medium uppercase tracking-wider text-left
37
37
  ${variant === 'default' ? 'text-login-200' : 'text-login-100'}
38
- ${variant === 'minimal' ? 'px-4!!' : ''}
39
- `, children: _jsxs("button", { className: 'flex flex-row items-center gap-2 group uppercase', onClick: () => handleChange(key), children: [value, _jsx("span", { className: 'flex flex-col', children: column === key ? (order === 'asc' ? (_jsx(ChevronUp, { className: 'h-4 w-4' })) : (_jsx(ChevronDown, { className: 'h-4 w-4' }))) : (_jsx(ChevronUp, { className: 'h-4 w-4 stroke-login-200 opacity-0 group-hover:opacity-100' })) })] }) }, key));
38
+ ${variant === 'minimal' ? 'px-4!' : ''}
39
+ `, children: _jsxs("button", { className: 'flex w-full min-w-0 flex-row items-center gap-2 group uppercase whitespace-nowrap', onClick: () => handleChange(key), children: [_jsx("span", { className: 'min-w-0 truncate', children: value }), _jsx("span", { className: 'flex flex-col', children: column === key ? (order === 'asc' ? (_jsx(ChevronUp, { className: 'h-4 w-4' })) : (_jsx(ChevronDown, { className: 'h-4 w-4' }))) : (_jsx(ChevronUp, { className: 'h-4 w-4 stroke-login-200 opacity-0 group-hover:opacity-100' })) })] }) }, key));
40
40
  }), !hideMenu && _jsx("th", { className: 'shrink-0 w-16 px-6 py-3' })] }) }));
41
41
  }
package/dist/src/components/table/table.js CHANGED
@@ -7,7 +7,7 @@ export default function Table({ data, columns, menuItems, redirectPath, variant
7
7
  return _jsx("div", { className: 'p-4 text-center text-login-200', children: "No data found" });
8
8
  }
9
9
  return (_jsx("div", { className: `
10
- flex-1 flex flex-col min-h-0 overflow-x-auto h-full w-full
10
+ flex-1 flex flex-col min-h-0 overflow-x-auto overflow-y-hidden h-full w-full
11
11
  ${variant === 'default' ? 'bg-login-500/50 rounded-lg shadow border border-login-600' : ''}
12
12
  ${variant === 'minimal' ? 'bg-transparent' : ''}
13
13
  `, children: _jsxs("table", { className: 'min-w-full w-max divide-y divide-login-600 flex flex-col flex-1 min-h-0', children: [_jsx(Header, { columns: columns, hideMenu: !menuItems, variant: variant }), _jsx(Body, { list: data, columns: columns, menuItems: menuItems, redirectPath: redirectPath, variant: variant, idKey: idKey })] }) }));
package/dist/src/globals.css CHANGED
@@ -826,145 +826,145 @@
826
826
  font-size: 1.2rem;
827
827
  font-weight: 500;
828
828
  }
829
- .prose-sm {
830
- font-size: 0.875rem;
831
- line-height: 1.7142857;
829
+ .prose-base {
830
+ font-size: 1rem;
831
+ line-height: 1.75;
832
832
  :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
833
- margin-top: 1.1428571em;
834
- margin-bottom: 1.1428571em;
833
+ margin-top: 1.25em;
834
+ margin-bottom: 1.25em;
835
835
  }
836
836
  :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
837
- font-size: 1.2857143em;
838
- line-height: 1.5555556;
839
- margin-top: 0.8888889em;
840
- margin-bottom: 0.8888889em;
837
+ font-size: 1.25em;
838
+ line-height: 1.6;
839
+ margin-top: 1.2em;
840
+ margin-bottom: 1.2em;
841
841
  }
842
842
  :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
843
- margin-top: 1.3333333em;
844
- margin-bottom: 1.3333333em;
845
- padding-inline-start: 1.1111111em;
843
+ margin-top: 1.6em;
844
+ margin-bottom: 1.6em;
845
+ padding-inline-start: 1em;
846
846
  }
847
847
  :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
848
- font-size: 2.1428571em;
848
+ font-size: 2.25em;
849
849
  margin-top: 0;
850
- margin-bottom: 0.8em;
851
- line-height: 1.2;
850
+ margin-bottom: 0.8888889em;
851
+ line-height: 1.1111111;
852
852
  }
853
853
  :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
854
- font-size: 1.4285714em;
855
- margin-top: 1.6em;
856
- margin-bottom: 0.8em;
857
- line-height: 1.4;
854
+ font-size: 1.5em;
855
+ margin-top: 2em;
856
+ margin-bottom: 1em;
857
+ line-height: 1.3333333;
858
858
  }
859
859
  :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
860
- font-size: 1.2857143em;
861
- margin-top: 1.5555556em;
862
- margin-bottom: 0.4444444em;
863
- line-height: 1.5555556;
860
+ font-size: 1.25em;
861
+ margin-top: 1.6em;
862
+ margin-bottom: 0.6em;
863
+ line-height: 1.6;
864
864
  }
865
865
  :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
866
- margin-top: 1.4285714em;
867
- margin-bottom: 0.5714286em;
868
- line-height: 1.4285714;
866
+ margin-top: 1.5em;
867
+ margin-bottom: 0.5em;
868
+ line-height: 1.5;
869
869
  }
870
870
  :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
871
- margin-top: 1.7142857em;
872
- margin-bottom: 1.7142857em;
871
+ margin-top: 2em;
872
+ margin-bottom: 2em;
873
873
  }
874
874
  :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
875
- margin-top: 1.7142857em;
876
- margin-bottom: 1.7142857em;
875
+ margin-top: 2em;
876
+ margin-bottom: 2em;
877
877
  }
878
878
  :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
879
879
  margin-top: 0;
880
880
  margin-bottom: 0;
881
881
  }
882
882
  :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
883
- margin-top: 1.7142857em;
884
- margin-bottom: 1.7142857em;
883
+ margin-top: 2em;
884
+ margin-bottom: 2em;
885
885
  }
886
886
  :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
887
- font-size: 0.8571429em;
887
+ font-size: 0.875em;
888
888
  border-radius: 0.3125rem;
889
- padding-top: 0.1428571em;
890
- padding-inline-end: 0.3571429em;
891
- padding-bottom: 0.1428571em;
892
- padding-inline-start: 0.3571429em;
889
+ padding-top: 0.1875em;
890
+ padding-inline-end: 0.375em;
891
+ padding-bottom: 0.1875em;
892
+ padding-inline-start: 0.375em;
893
893
  }
894
894
  :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
895
- font-size: 0.8571429em;
895
+ font-size: 0.875em;
896
896
  }
897
897
  :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
898
- font-size: 0.9em;
898
+ font-size: 0.875em;
899
899
  }
900
900
  :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
901
- font-size: 0.8888889em;
901
+ font-size: 0.9em;
902
902
  }
903
903
  :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
904
- font-size: 0.8571429em;
905
- line-height: 1.6666667;
906
- margin-top: 1.6666667em;
907
- margin-bottom: 1.6666667em;
908
- border-radius: 0.25rem;
909
- padding-top: 0.6666667em;
910
- padding-inline-end: 1em;
911
- padding-bottom: 0.6666667em;
912
- padding-inline-start: 1em;
904
+ font-size: 0.875em;
905
+ line-height: 1.7142857;
906
+ margin-top: 1.7142857em;
907
+ margin-bottom: 1.7142857em;
908
+ border-radius: 0.375rem;
909
+ padding-top: 0.8571429em;
910
+ padding-inline-end: 1.1428571em;
911
+ padding-bottom: 0.8571429em;
912
+ padding-inline-start: 1.1428571em;
913
913
  }
914
914
  :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
915
- margin-top: 1.1428571em;
916
- margin-bottom: 1.1428571em;
917
- padding-inline-start: 1.5714286em;
915
+ margin-top: 1.25em;
916
+ margin-bottom: 1.25em;
917
+ padding-inline-start: 1.625em;
918
918
  }
919
919
  :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
920
- margin-top: 1.1428571em;
921
- margin-bottom: 1.1428571em;
922
- padding-inline-start: 1.5714286em;
920
+ margin-top: 1.25em;
921
+ margin-bottom: 1.25em;
922
+ padding-inline-start: 1.625em;
923
923
  }
924
924
  :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
925
- margin-top: 0.2857143em;
926
- margin-bottom: 0.2857143em;
925
+ margin-top: 0.5em;
926
+ margin-bottom: 0.5em;
927
927
  }
928
928
  :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
929
- padding-inline-start: 0.4285714em;
929
+ padding-inline-start: 0.375em;
930
930
  }
931
931
  :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
932
- padding-inline-start: 0.4285714em;
932
+ padding-inline-start: 0.375em;
933
933
  }
934
- :where(.prose-sm > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
935
- margin-top: 0.5714286em;
936
- margin-bottom: 0.5714286em;
934
+ :where(.prose-base > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
935
+ margin-top: 0.75em;
936
+ margin-bottom: 0.75em;
937
937
  }
938
- :where(.prose-sm > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
939
- margin-top: 1.1428571em;
938
+ :where(.prose-base > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
939
+ margin-top: 1.25em;
940
940
  }
941
- :where(.prose-sm > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
942
- margin-bottom: 1.1428571em;
941
+ :where(.prose-base > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
942
+ margin-bottom: 1.25em;
943
943
  }
944
- :where(.prose-sm > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
945
- margin-top: 1.1428571em;
944
+ :where(.prose-base > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
945
+ margin-top: 1.25em;
946
946
  }
947
- :where(.prose-sm > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
948
- margin-bottom: 1.1428571em;
947
+ :where(.prose-base > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
948
+ margin-bottom: 1.25em;
949
949
  }
950
950
  :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
951
- margin-top: 0.5714286em;
952
- margin-bottom: 0.5714286em;
951
+ margin-top: 0.75em;
952
+ margin-bottom: 0.75em;
953
953
  }
954
954
  :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
955
- margin-top: 1.1428571em;
956
- margin-bottom: 1.1428571em;
955
+ margin-top: 1.25em;
956
+ margin-bottom: 1.25em;
957
957
  }
958
958
  :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
959
- margin-top: 1.1428571em;
959
+ margin-top: 1.25em;
960
960
  }
961
961
  :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
962
- margin-top: 0.2857143em;
963
- padding-inline-start: 1.5714286em;
962
+ margin-top: 0.5em;
963
+ padding-inline-start: 1.625em;
964
964
  }
965
965
  :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
966
- margin-top: 2.8571429em;
967
- margin-bottom: 2.8571429em;
966
+ margin-top: 3em;
967
+ margin-bottom: 3em;
968
968
  }
969
969
  :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
970
970
  margin-top: 0;
@@ -979,13 +979,13 @@
979
979
  margin-top: 0;
980
980
  }
981
981
  :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
982
- font-size: 0.8571429em;
983
- line-height: 1.5;
982
+ font-size: 0.875em;
983
+ line-height: 1.7142857;
984
984
  }
985
985
  :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
986
- padding-inline-end: 1em;
987
- padding-bottom: 0.6666667em;
988
- padding-inline-start: 1em;
986
+ padding-inline-end: 0.5714286em;
987
+ padding-bottom: 0.5714286em;
988
+ padding-inline-start: 0.5714286em;
989
989
  }
990
990
  :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
991
991
  padding-inline-start: 0;
@@ -994,10 +994,10 @@
994
994
  padding-inline-end: 0;
995
995
  }
996
996
  :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
997
- padding-top: 0.6666667em;
998
- padding-inline-end: 1em;
999
- padding-bottom: 0.6666667em;
1000
- padding-inline-start: 1em;
997
+ padding-top: 0.5714286em;
998
+ padding-inline-end: 0.5714286em;
999
+ padding-bottom: 0.5714286em;
1000
+ padding-inline-start: 0.5714286em;
1001
1001
  }
1002
1002
  :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
1003
1003
  padding-inline-start: 0;
@@ -1006,22 +1006,22 @@
1006
1006
  padding-inline-end: 0;
1007
1007
  }
1008
1008
  :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
1009
- margin-top: 1.7142857em;
1010
- margin-bottom: 1.7142857em;
1009
+ margin-top: 2em;
1010
+ margin-bottom: 2em;
1011
1011
  }
1012
1012
  :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
1013
1013
  margin-top: 0;
1014
1014
  margin-bottom: 0;
1015
1015
  }
1016
1016
  :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
1017
- font-size: 0.8571429em;
1018
- line-height: 1.3333333;
1019
- margin-top: 0.6666667em;
1017
+ font-size: 0.875em;
1018
+ line-height: 1.4285714;
1019
+ margin-top: 0.8571429em;
1020
1020
  }
1021
- :where(.prose-sm > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
1021
+ :where(.prose-base > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
1022
1022
  margin-top: 0;
1023
1023
  }
1024
- :where(.prose-sm > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
1024
+ :where(.prose-base > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
1025
1025
  margin-bottom: 0;
1026
1026
  }
1027
1027
  }
@@ -1236,6 +1236,9 @@
1236
1236
  .max-w-200 {
1237
1237
  max-width: calc(var(--spacing) * 200);
1238
1238
  }
1239
+ .max-w-full {
1240
+ max-width: 100%;
1241
+ }
1239
1242
  .max-w-md {
1240
1243
  max-width: var(--container-md);
1241
1244
  }
@@ -1257,9 +1260,6 @@
1257
1260
  .min-w-30 {
1258
1261
  min-width: calc(var(--spacing) * 30);
1259
1262
  }
1260
- .min-w-40 {
1261
- min-width: calc(var(--spacing) * 40);
1262
- }
1263
1263
  .min-w-70 {
1264
1264
  min-width: calc(var(--spacing) * 70);
1265
1265
  }
@@ -1451,6 +1451,9 @@
1451
1451
  .overflow-y-auto {
1452
1452
  overflow-y: auto;
1453
1453
  }
1454
+ .overflow-y-hidden {
1455
+ overflow-y: hidden;
1456
+ }
1454
1457
  .rounded {
1455
1458
  border-radius: 0.25rem;
1456
1459
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "uibee",
3
- "version": "2.13.1",
3
+ "version": "2.13.3",
4
4
  "description": "Shared components, functions and hooks for reuse across Login projects",
5
5
  "homepage": "https://github.com/Login-Linjeforening-for-IT/uibee#readme",
6
6
  "bugs": {
package/src/components/inputs/textarea.tsx CHANGED
@@ -56,40 +56,41 @@ export default function Textarea(props: TextareaProps) {
56
56
  </div>
57
57
  )}
58
58
 
59
- {type === 'markdown' && preview ? (
59
+ {type === 'markdown' && preview && (
60
60
  <div
61
61
  className={`
62
- w-full rounded-md bg-login-500/50 border border-login-500
63
- text-login-text
64
- p-3
65
- prose prose-invert prose-sm max-w-none overflow-y-auto
66
- ${error ? 'border-red-500' : ''}
67
- `}
62
+ w-full rounded-md bg-login-500/50 border border-login-500
63
+ text-login-text
64
+ p-3
65
+ prose prose-invert prose-base max-w-none overflow-y-auto
66
+ ${error ? 'border-red-500' : ''}
67
+ `}
68
68
  style={{ minHeight: `${rows * 1.5}rem` }}
69
69
  >
70
70
  <ReactMarkdown>{String(value || '')}</ReactMarkdown>
71
71
  </div>
72
- ) : (
73
- <textarea
74
- {...textareaProps}
75
- id={name}
76
- name={name}
77
- rows={rows}
78
- title={label}
79
- aria-invalid={!!error}
80
- aria-describedby={error ? `${name}-error` : undefined}
81
- className={`
72
+ )}
73
+
74
+ <textarea
75
+ {...textareaProps}
76
+ id={name}
77
+ name={name}
78
+ rows={rows}
79
+ title={label}
80
+ aria-invalid={!!error}
81
+ aria-describedby={error ? `${name}-error` : undefined}
82
+ className={`
83
+ ${type === 'markdown' && preview ? 'hidden' : ''}
82
84
  w-full rounded-md bg-login-500/50 border border-login-500
83
85
  text-login-text placeholder-login-200
84
86
  focus:outline-none focus:border-login focus:ring-1 focus:ring-login
85
87
  disabled:opacity-50 disabled:cursor-not-allowed
86
- p-3
88
+ p-3 pr-10
87
89
  transition-all duration-200
88
90
  resize-y
89
91
  ${error ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : ''}
90
92
  `}
91
- />
92
- )}
93
+ />
93
94
  </div>
94
95
  </FieldWrapper>
95
96
  )