@veritone-ce/design-system 2.2.6 → 2.3.0

package/dist/cjs/FormControl/context.js

@@ -0,0 +1,16 @@
+'use strict';
+'use client';
+'use strict';
+
+var React = require('react');
+
+const FormControlContext = React.createContext({
+  error: false,
+  disabled: false
+});
+function useFormControlContext() {
+  return React.useContext(FormControlContext);
+}
+
+exports.FormControlContext = FormControlContext;
+exports.useFormControlContext = useFormControlContext;

package/dist/cjs/FormControl/index.js

@@ -0,0 +1,63 @@
+'use strict';
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var styles_module = require('./styles.module.scss.js');
+require('color2k');
+require('../styles/css-vars.js');
+var cx = require('../styles/cx.js');
+require('../styles/defaultTheme.js');
+require('@mui/system');
+require('../Box/index.js');
+require('../styles/styled.js');
+var context = require('./context.js');
+
+const FormControl = React.forwardRef(
+  ({ placement = "block-start", ...props }, ref) => {
+    const context$1 = {
+      error: Boolean(props.error),
+      disabled: Boolean(props.disabled)
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        ref,
+        "data-testid": props["data-testid"],
+        "data-error": context$1.error,
+        "data-disabled": context$1.disabled,
+        className: cx.cx(
+          styles_module.default["form-control"],
+          styles_module.default[`placement-${placement}`],
+          props.className
+        ),
+        style: props.style,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { className: styles_module.default["label"], children: props.label }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["inner-control"], children: /* @__PURE__ */ jsxRuntime.jsx(context.FormControlContext.Provider, { value: context$1, children: props.children }) }),
+          props.helpLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["help-label"], children: props.helpLabel }),
+          props.error && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles_module.default["error-label"], children: [
+            /* @__PURE__ */ jsxRuntime.jsx(IndicatorCircle, {}),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: props.error === true ? "An error has occurred." : props.error })
+          ] })
+        ]
+      }
+    );
+  }
+);
+const IndicatorCircle = () => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "6", cy: "6", r: "6", fill: "currentColor" })
+  }
+);
+
+exports.default = FormControl;

package/dist/cjs/FormControl/styles.module.scss.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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"};
+
+exports.default = modules_efc4e723;

package/dist/cjs/Input/index.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var styles_module = require('./styles.module.scss.js');
+var context = require('../FormControl/context.js');
 require('color2k');
 require('../styles/css-vars.js');
 var cx = require('../styles/cx.js');
@@ -15,58 +16,47 @@ require('@mui/system');
 require('../Box/index.js');
 require('../styles/styled.js');
 
-const Input = React.forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "span",
-    {
-      "data-testid": props["data-testid"],
-      className: cx.cx(styles_module.default["input"], props.className),
-      style: props.style,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { className: styles_module.default["label"], children: props.label }),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "span",
-          {
-            "data-disabled": props.disabled ?? false,
-            "data-error": props.error !== void 0,
-            className: styles_module.default["inner-input-container"],
-            children: [
-              props.startIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["input-icon"], children: props.startIcon }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "input",
-                {
-                  ref,
-                  type: props.type,
-                  name: props.name,
-                  placeholder: props.placeholder,
-                  value: props.value,
-                  disabled: props.disabled,
-                  onChange: props.onChange,
-                  className: styles_module.default["inner-input"]
-                }
-              ),
-              props.endIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["input-icon"], children: props.endIcon })
-            ]
-          }
-        ),
-        props.helpLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["help-label"], children: props.helpLabel }),
-        props.error && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles_module.default["error-label"], children: [
-          /* @__PURE__ */ jsxRuntime.jsx(IndicatorCircle, {}),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: props.error })
-        ] })
-      ]
-    }
-  );
-});
-const IndicatorCircle = () => /* @__PURE__ */ jsxRuntime.jsx(
-  "svg",
-  {
-    width: "12",
-    height: "12",
-    viewBox: "0 0 12 12",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "6", cy: "6", r: "6", fill: "currentColor" })
+const Input = React.forwardRef(
+  ({
+    placeholder,
+    value,
+    error: propsError,
+    disabled: propsDisabled,
+    startIcon,
+    endIcon,
+    "data-testid": dataTestId,
+    style,
+    className,
+    ...props
+  }, ref) => {
+    const ctx = context.useFormControlContext();
+    const error = propsError ?? ctx.error;
+    const disabled = propsDisabled ?? ctx.disabled;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        "data-disabled": disabled,
+        "data-error": error,
+        "data-testid": dataTestId,
+        style,
+        className: cx.cx(styles_module.default["input"], className),
+        children: [
+          startIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["input-icon"], children: startIcon }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ref,
+              ...props,
+              placeholder,
+              value,
+              disabled,
+              className: styles_module.default["inner-input"]
+            }
+          ),
+          endIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["input-icon"], children: endIcon })
+        ]
+      }
+    );
   }
 );
 

package/dist/cjs/Input/styles.module.scss.js

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-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"};
+var modules_efc4e723 = {"input":"vt_ce_Input_input__a83b3209","inner-input":"vt_ce_Input_innerInput__a83b3209","input-icon":"vt_ce_Input_inputIcon__a83b3209"};
 
 exports.default = modules_efc4e723;

package/dist/cjs/Select/controlled.js

@@ -18,6 +18,7 @@ var iconsMaterial = require('@mui/icons-material');
 var controlled = require('../Menu/controlled.js');
 var wrappers = require('../Icon/wrappers.js');
 require('../Icon/factory.js');
+var context = require('../FormControl/context.js');
 
 const DefaultEndIcon = wrappers.adaptMuiSvgIcon(iconsMaterial.ArrowDropDown);
 const DefaultUnsetIcon = wrappers.adaptMuiSvgIcon(iconsMaterial.Close);
@@ -28,6 +29,9 @@ function ControlledSelect({
   clearable = true,
   ...props
 }) {
+  const ctx = context.useFormControlContext();
+  const error = props.error ?? ctx.error;
+  const disabled = props.disabled ?? ctx.disabled;
   const anchorId = React.useId();
   const anchorRef = React.useRef(null);
   const [open, setOpen] = React.useState(false);
@@ -48,58 +52,44 @@ function ControlledSelect({
       {
         id: anchorId,
         ref: anchorRef,
-        className: cx.cx(styles_module.default["select"], props.className),
+        "data-focused": open,
+        "data-disabled": disabled,
+        "data-error": error,
+        onClick: () => setOpen(true),
         "data-testid": props["data-testid"],
         style: props.style,
-        onClick: () => setOpen(true),
+        className: cx.cx(styles_module.default["select"], props.className),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("label", { className: styles_module.default["label"], children: props.label }),
-          /* @__PURE__ */ jsxRuntime.jsxs(
+          props.startIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["select-icon"], children: props.startIcon }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ref,
+              type: "text",
+              size: props.size,
+              "data-selected": Boolean(selectedOption),
+              placeholder: selectedOption?.label ?? placeholder,
+              value: props.inputValue,
+              disabled: props.disabled,
+              onChange: (e) => {
+                setOpen(true);
+                props.onInputChange(e, e.target.value);
+              },
+              className: styles_module.default["inner-input"]
+            }
+          ),
+          selectedOption && clearable && /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
-              "data-focused": open,
-              "data-disabled": props.disabled ?? false,
-              "data-error": props.error !== void 0,
-              className: styles_module.default["inner-input-container"],
-              children: [
-                props.startIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["select-icon"], children: props.startIcon }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "input",
-                  {
-                    ref,
-                    type: "text",
-                    size: props.size,
-                    "data-selected": Boolean(selectedOption),
-                    placeholder: selectedOption?.label ?? placeholder,
-                    value: props.inputValue,
-                    disabled: props.disabled,
-                    onChange: (e) => {
-                      setOpen(true);
-                      props.onInputChange(e, e.target.value);
-                    },
-                    className: styles_module.default["inner-input"]
-                  }
-                ),
-                selectedOption && clearable && /* @__PURE__ */ jsxRuntime.jsx(
-                  "span",
-                  {
-                    className: styles_module.default["select-icon"],
-                    onClick: (e) => {
-                      props.onChange?.(e, null);
-                      props.onInputChange(e, "");
-                    },
-                    children: unsetIcon
-                  }
-                ),
-                endIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["select-icon"], children: endIcon })
-              ]
+              className: styles_module.default["select-icon"],
+              onClick: (e) => {
+                props.onChange?.(e, null);
+                props.onInputChange(e, "");
+              },
+              children: unsetIcon
             }
           ),
-          props.helpLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["help-label"], children: props.helpLabel }),
-          props.error && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles_module.default["error-label"], children: [
-            /* @__PURE__ */ jsxRuntime.jsx(IndicatorCircle, {}),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: props.error })
-          ] })
+          endIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["select-icon"], children: endIcon })
         ]
       }
     ),
@@ -130,16 +120,5 @@ function ControlledSelect({
     )
   ] });
 }
-const IndicatorCircle = () => /* @__PURE__ */ jsxRuntime.jsx(
-  "svg",
-  {
-    width: "12",
-    height: "12",
-    viewBox: "0 0 12 12",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "6", cy: "6", r: "6", fill: "currentColor" })
-  }
-);
 
 exports.default = ControlledSelect;

package/dist/cjs/Select/styles.module.scss.js

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-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"};
+var modules_efc4e723 = {"select":"vt_ce_Select_select__a4ea9d62","inner-input":"vt_ce_Select_innerInput__a4ea9d62","select-icon":"vt_ce_Select_selectIcon__a4ea9d62"};
 
 exports.default = modules_efc4e723;

package/dist/cjs/TablePagination/index.js

@@ -6,11 +6,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var styles_module = require('./styles.module.scss.js');
-var index = require('../IconButton/index.js');
+var index$1 = require('../IconButton/index.js');
 var internal = require('../Icon/internal.js');
 require('../Select/controlled.js');
 var uncontrolled = require('../Select/uncontrolled.js');
 require('react');
+var index = require('../FormControl/index.js');
 
 function TablePagination({
   page,
@@ -23,23 +24,20 @@ function TablePagination({
   const showPrev = page !== 1;
   const showNext = page < count / rowsPerPage;
   return /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: styles_module.default["container"], children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles_module.default["rows-per-page"], children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { className: styles_module.default["rows-per-page-label"], children: rowsPerPageLabel }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        uncontrolled.default,
-        {
-          defaultValue: rowsPerPage,
-          clearable: false,
-          size: rowsPerPageOptions.length > 0 ? getDigits(Math.max(...rowsPerPageOptions)) : 3,
-          options: rowsPerPageOptions.map((option) => ({
-            label: option.toLocaleString(),
-            value: option
-          })),
-          onChange: (_, newRowsPerPage) => props.onRowsPerPageChange?.(newRowsPerPage),
-          className: styles_module.default["rows-per-page-select"]
-        }
-      )
-    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(index.default, { label: rowsPerPageLabel, placement: "inline-start", children: /* @__PURE__ */ jsxRuntime.jsx(
+      uncontrolled.default,
+      {
+        defaultValue: rowsPerPage,
+        clearable: false,
+        size: rowsPerPageOptions.length > 0 ? getDigits(Math.max(...rowsPerPageOptions)) + 1 : 3,
+        options: rowsPerPageOptions.map((option) => ({
+          label: option.toLocaleString(),
+          value: option
+        })),
+        onChange: (_, newRowsPerPage) => props.onRowsPerPageChange?.(newRowsPerPage),
+        className: styles_module.default["rows-per-page-select"]
+      }
+    ) }),
     /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles_module.default["page-counts"], children: [
       (page - 1) * rowsPerPage + 1,
       "-",
@@ -50,7 +48,7 @@ function TablePagination({
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: styles_module.default["btn-list"], children: [
       /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
-        index.default,
+        index$1.default,
         {
           type: "button",
           disabled: !showPrev,
@@ -59,7 +57,7 @@ function TablePagination({
         }
       ) }),
       /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
-        index.default,
+        index$1.default,
         {
           type: "button",
           disabled: !showNext,

package/dist/cjs/TablePagination/styles.module.scss.js

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-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"};
+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"};
 
 exports.default = modules_efc4e723;

package/dist/cjs/Textarea/index.js

@@ -14,57 +14,46 @@ require('../styles/defaultTheme.js');
 require('@mui/system');
 require('../Box/index.js');
 require('../styles/styled.js');
+var context = require('../FormControl/context.js');
 
 const Textarea = React.forwardRef(
-  (props, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(
+  ({
+    placeholder,
+    value,
+    disabled: propsDisabled,
+    error: propsError,
+    rows,
+    "data-testid": dataTestId,
+    style,
+    className,
+    ...props
+  }, ref) => {
+    const ctx = context.useFormControlContext();
+    const error = propsError ?? ctx.error;
+    const disabled = propsDisabled ?? ctx.disabled;
+    return /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
-        "data-testid": props["data-testid"],
-        style: props.style,
-        className: cx.cx(styles_module.default["textarea"], props.className),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("label", { className: styles_module.default["label"], children: props.label }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              "data-disabled": props.disabled ?? false,
-              "data-error": props.error !== void 0,
-              className: styles_module.default["inner-textarea-container"],
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                "textarea",
-                {
-                  ref,
-                  placeholder: props.placeholder,
-                  value: props.value,
-                  rows: props.rows,
-                  onChange: props.onChange,
-                  disabled: props.disabled,
-                  className: styles_module.default["inner-textarea"]
-                }
-              )
-            }
-          ),
-          props.helpLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["help-label"], children: props.helpLabel }),
-          props.error && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles_module.default["error-label"], children: [
-            /* @__PURE__ */ jsxRuntime.jsx(IndicatorCircle, {}),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: props.error })
-          ] })
-        ]
+        "data-disabled": disabled,
+        "data-error": error,
+        "data-testid": dataTestId,
+        style,
+        className: cx.cx(styles_module.default["textarea"], className),
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "textarea",
+          {
+            ref,
+            ...props,
+            placeholder,
+            value,
+            rows,
+            disabled,
+            className: styles_module.default["inner-textarea"]
+          }
+        )
       }
     );
   }
 );
-const IndicatorCircle = () => /* @__PURE__ */ jsxRuntime.jsx(
-  "svg",
-  {
-    width: "12",
-    height: "12",
-    viewBox: "0 0 12 12",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "6", cy: "6", r: "6", fill: "currentColor" })
-  }
-);
 
 exports.default = Textarea;

package/dist/cjs/Textarea/styles.module.scss.js

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-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"};
+var modules_efc4e723 = {"textarea":"vt_ce_Textarea_textarea__bb23b4a3","inner-textarea":"vt_ce_Textarea_innerTextarea__bb23b4a3"};
 
 exports.default = modules_efc4e723;

package/dist/cjs/Typography/index.js

@@ -37,7 +37,8 @@ const variantComponents = {
   paragraph2: "p",
   paragraph3: "p",
   button: "span",
-  buttonSmall: "span"
+  buttonSmall: "span",
+  input: "span"
 };
 
 exports.default = Typography;

package/dist/cjs/Typography/variants.module.scss.js

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-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"};
+var modules_b5c3b63b = {"t-title":"vt_ce_Typography_tTitle__c826af39","t-h1":"vt_ce_Typography_tH1__c826af39","t-h2":"vt_ce_Typography_tH2__c826af39","t-h3":"vt_ce_Typography_tH3__c826af39","t-h4":"vt_ce_Typography_tH4__c826af39","t-label":"vt_ce_Typography_tLabel__c826af39","t-paragraph1":"vt_ce_Typography_tParagraph1__c826af39","t-paragraph2":"vt_ce_Typography_tParagraph2__c826af39","t-paragraph3":"vt_ce_Typography_tParagraph3__c826af39","t-button":"vt_ce_Typography_tButton__c826af39","t-buttonSmall":"vt_ce_Typography_tButtonSmall__c826af39","t-input":"vt_ce_Typography_tInput__c826af39","c-primary":"vt_ce_Typography_cPrimary__c826af39","c-secondary":"vt_ce_Typography_cSecondary__c826af39","c-tertiary":"vt_ce_Typography_cTertiary__c826af39","c-disabled":"vt_ce_Typography_cDisabled__c826af39","c-inherit":"vt_ce_Typography_cInherit__c826af39"};
 
 exports.default = modules_b5c3b63b;

package/dist/cjs/styles/typography.js

@@ -12,7 +12,8 @@ const TypographyVariantKeys = [
   "paragraph2",
   "paragraph3",
   "button",
-  "buttonSmall"
+  "buttonSmall",
+  "input"
 ];
 function createTypography(typography = {}) {
   const base = {
@@ -109,6 +110,13 @@ function createTypography(typography = {}) {
       fontWeight: base.fontWeightMedium,
       lineHeight: "18px",
       ...typography.buttonSmall
+    },
+    input: {
+      ...inherit,
+      fontSize: "14px",
+      fontWeight: base.fontWeightRegular,
+      lineHeight: "20px",
+      ...typography.input
     }
   };
 }