@veritone-ce/design-system 2.2.6 → 2.3.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 (46) hide show
  1. package/dist/cjs/Badge/index.js +48 -0
  2. package/dist/cjs/Badge/styles.module.scss.js +7 -0
  3. package/dist/cjs/FormControl/context.js +16 -0
  4. package/dist/cjs/FormControl/index.js +63 -0
  5. package/dist/cjs/FormControl/styles.module.scss.js +7 -0
  6. package/dist/cjs/Input/index.js +42 -52
  7. package/dist/cjs/Input/styles.module.scss.js +1 -1
  8. package/dist/cjs/Select/controlled.js +35 -56
  9. package/dist/cjs/Select/styles.module.scss.js +1 -1
  10. package/dist/cjs/TablePagination/index.js +18 -20
  11. package/dist/cjs/TablePagination/styles.module.scss.js +1 -1
  12. package/dist/cjs/Textarea/index.js +33 -44
  13. package/dist/cjs/Textarea/styles.module.scss.js +1 -1
  14. package/dist/cjs/Typography/index.js +2 -1
  15. package/dist/cjs/Typography/variants.module.scss.js +1 -1
  16. package/dist/cjs/index.js +32 -30
  17. package/dist/cjs/styles/typography.js +9 -1
  18. package/dist/cjs/styles.css +7 -5
  19. package/dist/esm/Badge/index.js +44 -0
  20. package/dist/esm/Badge/styles.module.scss.js +3 -0
  21. package/dist/esm/FormControl/context.js +13 -0
  22. package/dist/esm/FormControl/index.js +59 -0
  23. package/dist/esm/FormControl/styles.module.scss.js +3 -0
  24. package/dist/esm/Input/index.js +42 -52
  25. package/dist/esm/Input/styles.module.scss.js +1 -1
  26. package/dist/esm/Select/controlled.js +35 -56
  27. package/dist/esm/Select/styles.module.scss.js +1 -1
  28. package/dist/esm/TablePagination/index.js +15 -17
  29. package/dist/esm/TablePagination/styles.module.scss.js +1 -1
  30. package/dist/esm/Textarea/index.js +34 -45
  31. package/dist/esm/Textarea/styles.module.scss.js +1 -1
  32. package/dist/esm/Typography/index.js +2 -1
  33. package/dist/esm/Typography/variants.module.scss.js +1 -1
  34. package/dist/esm/index.js +1 -0
  35. package/dist/esm/styles/scss/theme.generated.scss +25 -1
  36. package/dist/esm/styles/typography.js +9 -1
  37. package/dist/esm/styles.css +7 -5
  38. package/dist/types/Badge/index.d.ts +12 -0
  39. package/dist/types/FormControl/context.d.ts +7 -0
  40. package/dist/types/FormControl/index.d.ts +15 -0
  41. package/dist/types/Input/index.d.ts +3 -8
  42. package/dist/types/Select/types.d.ts +1 -3
  43. package/dist/types/Textarea/index.d.ts +4 -7
  44. package/dist/types/index.d.ts +2 -0
  45. package/dist/types/styles/typography.d.ts +1 -1
  46. package/package.json +1 -1
@@ -0,0 +1,48 @@
1
+ 'use strict';
2
+ 'use client';
3
+ 'use strict';
4
+
5
+ Object.defineProperty(exports, '__esModule', { value: true });
6
+
7
+ var jsxRuntime = require('react/jsx-runtime');
8
+ require('color2k');
9
+ require('../styles/css-vars.js');
10
+ var cx = require('../styles/cx.js');
11
+ var defaultTheme = require('../styles/defaultTheme.js');
12
+ require('react');
13
+ require('@mui/system');
14
+ require('../Box/index.js');
15
+ require('../styles/styled.js');
16
+ var styles_module = require('./styles.module.scss.js');
17
+ var index = require('../Typography/index.js');
18
+
19
+ function Badge({
20
+ palette = defaultTheme.defaultThemeCssVariableUsages.palette.indicator.info.base,
21
+ ...props
22
+ }) {
23
+ return /* @__PURE__ */ jsxRuntime.jsxs(
24
+ "span",
25
+ {
26
+ style: props.style,
27
+ className: cx.cx(styles_module.default["badge-anchor"], props.className),
28
+ children: [
29
+ props.children,
30
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_module.default["badge-wrapper"], children: /* @__PURE__ */ jsxRuntime.jsx(
31
+ "div",
32
+ {
33
+ className: styles_module.default["badge"],
34
+ style: {
35
+ ...{
36
+ "--vt-ce-badge-palette-base-surface": palette.surface,
37
+ "--vt-ce-badge-palette-base-on": palette.on
38
+ }
39
+ },
40
+ children: /* @__PURE__ */ jsxRuntime.jsx(index.default, { variant: "paragraph3", className: styles_module.default["badge-text"], children: props.label })
41
+ }
42
+ ) })
43
+ ]
44
+ }
45
+ );
46
+ }
47
+
48
+ exports.default = Badge;
@@ -0,0 +1,7 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var modules_efc4e723 = {"badge-anchor":"vt_ce_Badge_badgeAnchor__aa089fbb","badge-wrapper":"vt_ce_Badge_badgeWrapper__aa089fbb","badge":"vt_ce_Badge_badge__aa089fbb","badge-text":"vt_ce_Badge_badgeText__aa089fbb"};
6
+
7
+ exports.default = modules_efc4e723;
@@ -0,0 +1,16 @@
1
+ 'use strict';
2
+ 'use client';
3
+ 'use strict';
4
+
5
+ var React = require('react');
6
+
7
+ const FormControlContext = React.createContext({
8
+ error: false,
9
+ disabled: false
10
+ });
11
+ function useFormControlContext() {
12
+ return React.useContext(FormControlContext);
13
+ }
14
+
15
+ exports.FormControlContext = FormControlContext;
16
+ exports.useFormControlContext = useFormControlContext;
@@ -0,0 +1,63 @@
1
+ 'use strict';
2
+ 'use client';
3
+ 'use strict';
4
+
5
+ Object.defineProperty(exports, '__esModule', { value: true });
6
+
7
+ var jsxRuntime = require('react/jsx-runtime');
8
+ var React = require('react');
9
+ var styles_module = require('./styles.module.scss.js');
10
+ require('color2k');
11
+ require('../styles/css-vars.js');
12
+ var cx = require('../styles/cx.js');
13
+ require('../styles/defaultTheme.js');
14
+ require('@mui/system');
15
+ require('../Box/index.js');
16
+ require('../styles/styled.js');
17
+ var context = require('./context.js');
18
+
19
+ const FormControl = React.forwardRef(
20
+ ({ placement = "block-start", ...props }, ref) => {
21
+ const context$1 = {
22
+ error: Boolean(props.error),
23
+ disabled: Boolean(props.disabled)
24
+ };
25
+ return /* @__PURE__ */ jsxRuntime.jsxs(
26
+ "span",
27
+ {
28
+ ref,
29
+ "data-testid": props["data-testid"],
30
+ "data-error": context$1.error,
31
+ "data-disabled": context$1.disabled,
32
+ className: cx.cx(
33
+ styles_module.default["form-control"],
34
+ styles_module.default[`placement-${placement}`],
35
+ props.className
36
+ ),
37
+ style: props.style,
38
+ children: [
39
+ /* @__PURE__ */ jsxRuntime.jsx("label", { className: styles_module.default["label"], children: props.label }),
40
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["inner-control"], children: /* @__PURE__ */ jsxRuntime.jsx(context.FormControlContext.Provider, { value: context$1, children: props.children }) }),
41
+ props.helpLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["help-label"], children: props.helpLabel }),
42
+ props.error && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles_module.default["error-label"], children: [
43
+ /* @__PURE__ */ jsxRuntime.jsx(IndicatorCircle, {}),
44
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: props.error === true ? "An error has occurred." : props.error })
45
+ ] })
46
+ ]
47
+ }
48
+ );
49
+ }
50
+ );
51
+ const IndicatorCircle = () => /* @__PURE__ */ jsxRuntime.jsx(
52
+ "svg",
53
+ {
54
+ width: "12",
55
+ height: "12",
56
+ viewBox: "0 0 12 12",
57
+ fill: "none",
58
+ xmlns: "http://www.w3.org/2000/svg",
59
+ children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "6", cy: "6", r: "6", fill: "currentColor" })
60
+ }
61
+ );
62
+
63
+ exports.default = FormControl;
@@ -0,0 +1,7 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var modules_efc4e723 = {"form-control":"vt_ce_FormControl_formControl__8c1edd74","placement-block-start":"vt_ce_FormControl_placementBlockStart__8c1edd74","label":"vt_ce_FormControl_label__8c1edd74","placement-inline-start":"vt_ce_FormControl_placementInlineStart__8c1edd74","placement-inline-end":"vt_ce_FormControl_placementInlineEnd__8c1edd74","inner-control":"vt_ce_FormControl_innerControl__8c1edd74","help-label":"vt_ce_FormControl_helpLabel__8c1edd74","error-label":"vt_ce_FormControl_errorLabel__8c1edd74"};
6
+
7
+ exports.default = modules_efc4e723;
@@ -7,6 +7,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
7
7
  var jsxRuntime = require('react/jsx-runtime');
8
8
  var React = require('react');
9
9
  var styles_module = require('./styles.module.scss.js');
10
+ var context = require('../FormControl/context.js');
10
11
  require('color2k');
11
12
  require('../styles/css-vars.js');
12
13
  var cx = require('../styles/cx.js');
@@ -15,58 +16,47 @@ require('@mui/system');
15
16
  require('../Box/index.js');
16
17
  require('../styles/styled.js');
17
18
 
18
- const Input = React.forwardRef((props, ref) => {
19
- return /* @__PURE__ */ jsxRuntime.jsxs(
20
- "span",
21
- {
22
- "data-testid": props["data-testid"],
23
- className: cx.cx(styles_module.default["input"], props.className),
24
- style: props.style,
25
- children: [
26
- /* @__PURE__ */ jsxRuntime.jsx("label", { className: styles_module.default["label"], children: props.label }),
27
- /* @__PURE__ */ jsxRuntime.jsxs(
28
- "span",
29
- {
30
- "data-disabled": props.disabled ?? false,
31
- "data-error": props.error !== void 0,
32
- className: styles_module.default["inner-input-container"],
33
- children: [
34
- props.startIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["input-icon"], children: props.startIcon }),
35
- /* @__PURE__ */ jsxRuntime.jsx(
36
- "input",
37
- {
38
- ref,
39
- type: props.type,
40
- name: props.name,
41
- placeholder: props.placeholder,
42
- value: props.value,
43
- disabled: props.disabled,
44
- onChange: props.onChange,
45
- className: styles_module.default["inner-input"]
46
- }
47
- ),
48
- props.endIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["input-icon"], children: props.endIcon })
49
- ]
50
- }
51
- ),
52
- props.helpLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["help-label"], children: props.helpLabel }),
53
- props.error && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles_module.default["error-label"], children: [
54
- /* @__PURE__ */ jsxRuntime.jsx(IndicatorCircle, {}),
55
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: props.error })
56
- ] })
57
- ]
58
- }
59
- );
60
- });
61
- const IndicatorCircle = () => /* @__PURE__ */ jsxRuntime.jsx(
62
- "svg",
63
- {
64
- width: "12",
65
- height: "12",
66
- viewBox: "0 0 12 12",
67
- fill: "none",
68
- xmlns: "http://www.w3.org/2000/svg",
69
- children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "6", cy: "6", r: "6", fill: "currentColor" })
19
+ const Input = React.forwardRef(
20
+ ({
21
+ placeholder,
22
+ value,
23
+ error: propsError,
24
+ disabled: propsDisabled,
25
+ startIcon,
26
+ endIcon,
27
+ "data-testid": dataTestId,
28
+ style,
29
+ className,
30
+ ...props
31
+ }, ref) => {
32
+ const ctx = context.useFormControlContext();
33
+ const error = propsError ?? ctx.error;
34
+ const disabled = propsDisabled ?? ctx.disabled;
35
+ return /* @__PURE__ */ jsxRuntime.jsxs(
36
+ "span",
37
+ {
38
+ "data-disabled": disabled,
39
+ "data-error": error,
40
+ "data-testid": dataTestId,
41
+ style,
42
+ className: cx.cx(styles_module.default["input"], className),
43
+ children: [
44
+ startIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["input-icon"], children: startIcon }),
45
+ /* @__PURE__ */ jsxRuntime.jsx(
46
+ "input",
47
+ {
48
+ ref,
49
+ ...props,
50
+ placeholder,
51
+ value,
52
+ disabled,
53
+ className: styles_module.default["inner-input"]
54
+ }
55
+ ),
56
+ endIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["input-icon"], children: endIcon })
57
+ ]
58
+ }
59
+ );
70
60
  }
71
61
  );
72
62
 
@@ -2,6 +2,6 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var modules_efc4e723 = {"input":"vt_ce_Input_input__f7983a21","label":"vt_ce_Input_label__f7983a21","inner-input-container":"vt_ce_Input_innerInputContainer__f7983a21","inner-input":"vt_ce_Input_innerInput__f7983a21","input-icon":"vt_ce_Input_inputIcon__f7983a21","help-label":"vt_ce_Input_helpLabel__f7983a21","error-label":"vt_ce_Input_errorLabel__f7983a21"};
5
+ var modules_efc4e723 = {"input":"vt_ce_Input_input__a83b3209","inner-input":"vt_ce_Input_innerInput__a83b3209","input-icon":"vt_ce_Input_inputIcon__a83b3209"};
6
6
 
7
7
  exports.default = modules_efc4e723;
@@ -18,6 +18,7 @@ var iconsMaterial = require('@mui/icons-material');
18
18
  var controlled = require('../Menu/controlled.js');
19
19
  var wrappers = require('../Icon/wrappers.js');
20
20
  require('../Icon/factory.js');
21
+ var context = require('../FormControl/context.js');
21
22
 
22
23
  const DefaultEndIcon = wrappers.adaptMuiSvgIcon(iconsMaterial.ArrowDropDown);
23
24
  const DefaultUnsetIcon = wrappers.adaptMuiSvgIcon(iconsMaterial.Close);
@@ -28,6 +29,9 @@ function ControlledSelect({
28
29
  clearable = true,
29
30
  ...props
30
31
  }) {
32
+ const ctx = context.useFormControlContext();
33
+ const error = props.error ?? ctx.error;
34
+ const disabled = props.disabled ?? ctx.disabled;
31
35
  const anchorId = React.useId();
32
36
  const anchorRef = React.useRef(null);
33
37
  const [open, setOpen] = React.useState(false);
@@ -48,58 +52,44 @@ function ControlledSelect({
48
52
  {
49
53
  id: anchorId,
50
54
  ref: anchorRef,
51
- className: cx.cx(styles_module.default["select"], props.className),
55
+ "data-focused": open,
56
+ "data-disabled": disabled,
57
+ "data-error": error,
58
+ onClick: () => setOpen(true),
52
59
  "data-testid": props["data-testid"],
53
60
  style: props.style,
54
- onClick: () => setOpen(true),
61
+ className: cx.cx(styles_module.default["select"], props.className),
55
62
  children: [
56
- /* @__PURE__ */ jsxRuntime.jsx("label", { className: styles_module.default["label"], children: props.label }),
57
- /* @__PURE__ */ jsxRuntime.jsxs(
63
+ props.startIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["select-icon"], children: props.startIcon }),
64
+ /* @__PURE__ */ jsxRuntime.jsx(
65
+ "input",
66
+ {
67
+ ref,
68
+ type: "text",
69
+ size: props.size,
70
+ "data-selected": Boolean(selectedOption),
71
+ placeholder: selectedOption?.label ?? placeholder,
72
+ value: props.inputValue,
73
+ disabled: props.disabled,
74
+ onChange: (e) => {
75
+ setOpen(true);
76
+ props.onInputChange(e, e.target.value);
77
+ },
78
+ className: styles_module.default["inner-input"]
79
+ }
80
+ ),
81
+ selectedOption && clearable && /* @__PURE__ */ jsxRuntime.jsx(
58
82
  "span",
59
83
  {
60
- "data-focused": open,
61
- "data-disabled": props.disabled ?? false,
62
- "data-error": props.error !== void 0,
63
- className: styles_module.default["inner-input-container"],
64
- children: [
65
- props.startIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["select-icon"], children: props.startIcon }),
66
- /* @__PURE__ */ jsxRuntime.jsx(
67
- "input",
68
- {
69
- ref,
70
- type: "text",
71
- size: props.size,
72
- "data-selected": Boolean(selectedOption),
73
- placeholder: selectedOption?.label ?? placeholder,
74
- value: props.inputValue,
75
- disabled: props.disabled,
76
- onChange: (e) => {
77
- setOpen(true);
78
- props.onInputChange(e, e.target.value);
79
- },
80
- className: styles_module.default["inner-input"]
81
- }
82
- ),
83
- selectedOption && clearable && /* @__PURE__ */ jsxRuntime.jsx(
84
- "span",
85
- {
86
- className: styles_module.default["select-icon"],
87
- onClick: (e) => {
88
- props.onChange?.(e, null);
89
- props.onInputChange(e, "");
90
- },
91
- children: unsetIcon
92
- }
93
- ),
94
- endIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["select-icon"], children: endIcon })
95
- ]
84
+ className: styles_module.default["select-icon"],
85
+ onClick: (e) => {
86
+ props.onChange?.(e, null);
87
+ props.onInputChange(e, "");
88
+ },
89
+ children: unsetIcon
96
90
  }
97
91
  ),
98
- props.helpLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["help-label"], children: props.helpLabel }),
99
- props.error && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles_module.default["error-label"], children: [
100
- /* @__PURE__ */ jsxRuntime.jsx(IndicatorCircle, {}),
101
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: props.error })
102
- ] })
92
+ endIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["select-icon"], children: endIcon })
103
93
  ]
104
94
  }
105
95
  ),
@@ -130,16 +120,5 @@ function ControlledSelect({
130
120
  )
131
121
  ] });
132
122
  }
133
- const IndicatorCircle = () => /* @__PURE__ */ jsxRuntime.jsx(
134
- "svg",
135
- {
136
- width: "12",
137
- height: "12",
138
- viewBox: "0 0 12 12",
139
- fill: "none",
140
- xmlns: "http://www.w3.org/2000/svg",
141
- children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "6", cy: "6", r: "6", fill: "currentColor" })
142
- }
143
- );
144
123
 
145
124
  exports.default = ControlledSelect;
@@ -2,6 +2,6 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var modules_efc4e723 = {"select":"vt_ce_Select_select__cb05e024","label":"vt_ce_Select_label__cb05e024","inner-input-container":"vt_ce_Select_innerInputContainer__cb05e024","inner-input":"vt_ce_Select_innerInput__cb05e024","select-icon":"vt_ce_Select_selectIcon__cb05e024","help-label":"vt_ce_Select_helpLabel__cb05e024","error-label":"vt_ce_Select_errorLabel__cb05e024"};
5
+ var modules_efc4e723 = {"select":"vt_ce_Select_select__a4ea9d62","inner-input":"vt_ce_Select_innerInput__a4ea9d62","select-icon":"vt_ce_Select_selectIcon__a4ea9d62"};
6
6
 
7
7
  exports.default = modules_efc4e723;
@@ -6,11 +6,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
6
6
 
7
7
  var jsxRuntime = require('react/jsx-runtime');
8
8
  var styles_module = require('./styles.module.scss.js');
9
- var index = require('../IconButton/index.js');
9
+ var index$1 = require('../IconButton/index.js');
10
10
  var internal = require('../Icon/internal.js');
11
11
  require('../Select/controlled.js');
12
12
  var uncontrolled = require('../Select/uncontrolled.js');
13
13
  require('react');
14
+ var index = require('../FormControl/index.js');
14
15
 
15
16
  function TablePagination({
16
17
  page,
@@ -23,23 +24,20 @@ function TablePagination({
23
24
  const showPrev = page !== 1;
24
25
  const showNext = page < count / rowsPerPage;
25
26
  return /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: styles_module.default["container"], children: [
26
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles_module.default["rows-per-page"], children: [
27
- /* @__PURE__ */ jsxRuntime.jsx("label", { className: styles_module.default["rows-per-page-label"], children: rowsPerPageLabel }),
28
- /* @__PURE__ */ jsxRuntime.jsx(
29
- uncontrolled.default,
30
- {
31
- defaultValue: rowsPerPage,
32
- clearable: false,
33
- size: rowsPerPageOptions.length > 0 ? getDigits(Math.max(...rowsPerPageOptions)) : 3,
34
- options: rowsPerPageOptions.map((option) => ({
35
- label: option.toLocaleString(),
36
- value: option
37
- })),
38
- onChange: (_, newRowsPerPage) => props.onRowsPerPageChange?.(newRowsPerPage),
39
- className: styles_module.default["rows-per-page-select"]
40
- }
41
- )
42
- ] }),
27
+ /* @__PURE__ */ jsxRuntime.jsx(index.default, { label: rowsPerPageLabel, placement: "inline-start", children: /* @__PURE__ */ jsxRuntime.jsx(
28
+ uncontrolled.default,
29
+ {
30
+ defaultValue: rowsPerPage,
31
+ clearable: false,
32
+ size: rowsPerPageOptions.length > 0 ? getDigits(Math.max(...rowsPerPageOptions)) + 1 : 3,
33
+ options: rowsPerPageOptions.map((option) => ({
34
+ label: option.toLocaleString(),
35
+ value: option
36
+ })),
37
+ onChange: (_, newRowsPerPage) => props.onRowsPerPageChange?.(newRowsPerPage),
38
+ className: styles_module.default["rows-per-page-select"]
39
+ }
40
+ ) }),
43
41
  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles_module.default["page-counts"], children: [
44
42
  (page - 1) * rowsPerPage + 1,
45
43
  "-",
@@ -50,7 +48,7 @@ function TablePagination({
50
48
  ] }),
51
49
  /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: styles_module.default["btn-list"], children: [
52
50
  /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
53
- index.default,
51
+ index$1.default,
54
52
  {
55
53
  type: "button",
56
54
  disabled: !showPrev,
@@ -59,7 +57,7 @@ function TablePagination({
59
57
  }
60
58
  ) }),
61
59
  /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
62
- index.default,
60
+ index$1.default,
63
61
  {
64
62
  type: "button",
65
63
  disabled: !showNext,
@@ -2,6 +2,6 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var modules_efc4e723 = {"container":"vt_ce_TablePagination_container__8da45ccd","rows-per-page":"vt_ce_TablePagination_rowsPerPage__8da45ccd","rows-per-page-label":"vt_ce_TablePagination_rowsPerPageLabel__8da45ccd","rows-per-page-select":"vt_ce_TablePagination_rowsPerPageSelect__8da45ccd","page-counts":"vt_ce_TablePagination_pageCounts__8da45ccd","btn-list":"vt_ce_TablePagination_btnList__8da45ccd","ellipsis":"vt_ce_TablePagination_ellipsis__8da45ccd"};
5
+ var modules_efc4e723 = {"container":"vt_ce_TablePagination_container__b08ac6ea","rows-per-page-select":"vt_ce_TablePagination_rowsPerPageSelect__b08ac6ea","page-counts":"vt_ce_TablePagination_pageCounts__b08ac6ea","btn-list":"vt_ce_TablePagination_btnList__b08ac6ea","ellipsis":"vt_ce_TablePagination_ellipsis__b08ac6ea"};
6
6
 
7
7
  exports.default = modules_efc4e723;
@@ -14,57 +14,46 @@ require('../styles/defaultTheme.js');
14
14
  require('@mui/system');
15
15
  require('../Box/index.js');
16
16
  require('../styles/styled.js');
17
+ var context = require('../FormControl/context.js');
17
18
 
18
19
  const Textarea = React.forwardRef(
19
- (props, ref) => {
20
- return /* @__PURE__ */ jsxRuntime.jsxs(
20
+ ({
21
+ placeholder,
22
+ value,
23
+ disabled: propsDisabled,
24
+ error: propsError,
25
+ rows,
26
+ "data-testid": dataTestId,
27
+ style,
28
+ className,
29
+ ...props
30
+ }, ref) => {
31
+ const ctx = context.useFormControlContext();
32
+ const error = propsError ?? ctx.error;
33
+ const disabled = propsDisabled ?? ctx.disabled;
34
+ return /* @__PURE__ */ jsxRuntime.jsx(
21
35
  "span",
22
36
  {
23
- "data-testid": props["data-testid"],
24
- style: props.style,
25
- className: cx.cx(styles_module.default["textarea"], props.className),
26
- children: [
27
- /* @__PURE__ */ jsxRuntime.jsx("label", { className: styles_module.default["label"], children: props.label }),
28
- /* @__PURE__ */ jsxRuntime.jsx(
29
- "span",
30
- {
31
- "data-disabled": props.disabled ?? false,
32
- "data-error": props.error !== void 0,
33
- className: styles_module.default["inner-textarea-container"],
34
- children: /* @__PURE__ */ jsxRuntime.jsx(
35
- "textarea",
36
- {
37
- ref,
38
- placeholder: props.placeholder,
39
- value: props.value,
40
- rows: props.rows,
41
- onChange: props.onChange,
42
- disabled: props.disabled,
43
- className: styles_module.default["inner-textarea"]
44
- }
45
- )
46
- }
47
- ),
48
- props.helpLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["help-label"], children: props.helpLabel }),
49
- props.error && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles_module.default["error-label"], children: [
50
- /* @__PURE__ */ jsxRuntime.jsx(IndicatorCircle, {}),
51
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: props.error })
52
- ] })
53
- ]
37
+ "data-disabled": disabled,
38
+ "data-error": error,
39
+ "data-testid": dataTestId,
40
+ style,
41
+ className: cx.cx(styles_module.default["textarea"], className),
42
+ children: /* @__PURE__ */ jsxRuntime.jsx(
43
+ "textarea",
44
+ {
45
+ ref,
46
+ ...props,
47
+ placeholder,
48
+ value,
49
+ rows,
50
+ disabled,
51
+ className: styles_module.default["inner-textarea"]
52
+ }
53
+ )
54
54
  }
55
55
  );
56
56
  }
57
57
  );
58
- const IndicatorCircle = () => /* @__PURE__ */ jsxRuntime.jsx(
59
- "svg",
60
- {
61
- width: "12",
62
- height: "12",
63
- viewBox: "0 0 12 12",
64
- fill: "none",
65
- xmlns: "http://www.w3.org/2000/svg",
66
- children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "6", cy: "6", r: "6", fill: "currentColor" })
67
- }
68
- );
69
58
 
70
59
  exports.default = Textarea;
@@ -2,6 +2,6 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var modules_efc4e723 = {"textarea":"vt_ce_Textarea_textarea__77e999b0","label":"vt_ce_Textarea_label__77e999b0","inner-textarea-container":"vt_ce_Textarea_innerTextareaContainer__77e999b0","inner-textarea":"vt_ce_Textarea_innerTextarea__77e999b0","help-label":"vt_ce_Textarea_helpLabel__77e999b0","error-label":"vt_ce_Textarea_errorLabel__77e999b0"};
5
+ var modules_efc4e723 = {"textarea":"vt_ce_Textarea_textarea__bb23b4a3","inner-textarea":"vt_ce_Textarea_innerTextarea__bb23b4a3"};
6
6
 
7
7
  exports.default = modules_efc4e723;
@@ -37,7 +37,8 @@ const variantComponents = {
37
37
  paragraph2: "p",
38
38
  paragraph3: "p",
39
39
  button: "span",
40
- buttonSmall: "span"
40
+ buttonSmall: "span",
41
+ input: "span"
41
42
  };
42
43
 
43
44
  exports.default = Typography;
@@ -2,6 +2,6 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var modules_b5c3b63b = {"t-title":"vt_ce_Typography_tTitle__56e154f0","t-h1":"vt_ce_Typography_tH1__56e154f0","t-h2":"vt_ce_Typography_tH2__56e154f0","t-h3":"vt_ce_Typography_tH3__56e154f0","t-h4":"vt_ce_Typography_tH4__56e154f0","t-label":"vt_ce_Typography_tLabel__56e154f0","t-paragraph1":"vt_ce_Typography_tParagraph1__56e154f0","t-paragraph2":"vt_ce_Typography_tParagraph2__56e154f0","t-paragraph3":"vt_ce_Typography_tParagraph3__56e154f0","t-button":"vt_ce_Typography_tButton__56e154f0","t-buttonSmall":"vt_ce_Typography_tButtonSmall__56e154f0","c-primary":"vt_ce_Typography_cPrimary__56e154f0","c-secondary":"vt_ce_Typography_cSecondary__56e154f0","c-tertiary":"vt_ce_Typography_cTertiary__56e154f0","c-disabled":"vt_ce_Typography_cDisabled__56e154f0","c-inherit":"vt_ce_Typography_cInherit__56e154f0"};
5
+ var modules_b5c3b63b = {"t-title":"vt_ce_Typography_tTitle__9ad87f45","t-h1":"vt_ce_Typography_tH1__9ad87f45","t-h2":"vt_ce_Typography_tH2__9ad87f45","t-h3":"vt_ce_Typography_tH3__9ad87f45","t-h4":"vt_ce_Typography_tH4__9ad87f45","t-label":"vt_ce_Typography_tLabel__9ad87f45","t-paragraph1":"vt_ce_Typography_tParagraph1__9ad87f45","t-paragraph2":"vt_ce_Typography_tParagraph2__9ad87f45","t-paragraph3":"vt_ce_Typography_tParagraph3__9ad87f45","t-button":"vt_ce_Typography_tButton__9ad87f45","t-buttonSmall":"vt_ce_Typography_tButtonSmall__9ad87f45","t-input":"vt_ce_Typography_tInput__9ad87f45","c-primary":"vt_ce_Typography_cPrimary__9ad87f45","c-secondary":"vt_ce_Typography_cSecondary__9ad87f45","c-tertiary":"vt_ce_Typography_cTertiary__9ad87f45","c-disabled":"vt_ce_Typography_cDisabled__9ad87f45","c-inherit":"vt_ce_Typography_cInherit__9ad87f45"};
6
6
 
7
7
  exports.default = modules_b5c3b63b;