@descope/web-components-ui 1.0.135 → 1.0.148

package/src/theme/components/checkbox.js

@@ -1,39 +1,37 @@
-import globals from '../globals';
-import { getThemeRefs } from '../../helpers/themeHelpers';
 import { CheckboxClass } from '../../components/boolean-fields/descope-checkbox/CheckboxClass';
 import { refs } from './inputWrapper';
 
-const globalRefs = getThemeRefs(globals);
 const vars = CheckboxClass.cssVarList;
 
 const checkbox = {
-	[vars.hostWidth]: refs.width,
-	[vars.fontSize]: refs.fontSize,
-	[vars.fontFamily]: refs.fontFamily,
-	[vars.labelTextColor]: refs.labelTextColor,
-	[vars.labelRequiredIndicator]: refs.requiredIndicator,
-	[vars.labelFontWeight]: '400',
-	[vars.labelSpacing]: '0.75em',
-	[vars.inputOutlineWidth]: refs.outlineWidth,
-	[vars.inputOutlineOffset]: refs.outlineOffset,
-	[vars.inputOutlineColor]: refs.outlineColor,
-	[vars.inputOutlineStyle]: refs.outlineStyle,
-	[vars.inputBorderRadius]: refs.borderRadius,
-	[vars.inputBorderColor]: refs.borderColor,
-	[vars.inputBorderWidth]: refs.borderWidth,
-	[vars.inputBorderStyle]: refs.borderStyle,
-	[vars.inputBackgroundColor]: refs.inputBackgroundColor,
-	[vars.inputSize]: '2em',
+  [vars.hostWidth]: refs.width,
+  [vars.fontSize]: refs.fontSize,
+  [vars.fontFamily]: refs.fontFamily,
+  [vars.labelTextColor]: refs.labelTextColor,
+  [vars.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars.labelFontWeight]: '400',
+  [vars.labelSpacing]: '0.75em',
+  [vars.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars.inputOutlineWidth]: refs.outlineWidth,
+  [vars.inputOutlineOffset]: refs.outlineOffset,
+  [vars.inputOutlineColor]: refs.outlineColor,
+  [vars.inputOutlineStyle]: refs.outlineStyle,
+  [vars.inputBorderRadius]: refs.borderRadius,
+  [vars.inputBorderColor]: refs.borderColor,
+  [vars.inputBorderWidth]: refs.borderWidth,
+  [vars.inputBorderStyle]: refs.borderStyle,
+  [vars.inputBackgroundColor]: refs.inputBackgroundColor,
+  [vars.inputSize]: '2em',
 
-	_checked: {
-		[vars.inputBackgroundColor]: refs.backgroundColor,
-		[vars.inputValueTextColor]: refs.valueTextColor,
-	},
+  _checked: {
+    [vars.inputBackgroundColor]: refs.backgroundColor,
+    [vars.inputValueTextColor]: refs.valueTextColor,
+  },
 
-	_disabled: {
-		[vars.labelTextColor]: refs.labelTextColor,
-	},
+  _disabled: {
+    [vars.labelTextColor]: refs.labelTextColor,
+  },
 };
 
 export default checkbox;
-export { vars }
+export { vars };

package/src/theme/components/comboBox.js

@@ -7,40 +7,41 @@ const globalRefs = getThemeRefs(globals);
 const vars = ComboBoxClass.cssVarList;
 
 export const comboBox = {
-	[vars.hostWidth]: refs.width,
-	[vars.fontSize]: refs.fontSize,
-	[vars.fontFamily]: refs.fontFamily,
-	[vars.labelTextColor]: refs.labelTextColor,
-	[vars.inputBorderColor]: refs.borderColor,
-	[vars.inputBorderWidth]: refs.borderWidth,
-	[vars.inputBorderStyle]: refs.borderStyle,
-	[vars.inputBorderRadius]: refs.borderRadius,
-	[vars.inputOutlineColor]: refs.outlineColor,
-	[vars.inputOutlineOffset]: refs.outlineOffset,
-	[vars.inputOutlineWidth]: refs.outlineWidth,
-	[vars.inputOutlineStyle]: refs.outlineStyle,
-	[vars.labelRequiredIndicator]: refs.requiredIndicator,
-	[vars.inputValueTextColor]: refs.valueTextColor,
-	[vars.inputPlaceholderTextColor]: refs.placeholderTextColor,
-	[vars.inputBackgroundColor]: refs.backgroundColor,
-	[vars.inputHorizontalPadding]: refs.horizontalPadding,
-	[vars.inputHeight]: refs.inputHeight,
-	[vars.inputDropdownButtonColor]: globalRefs.colors.surface.contrast,
-	[vars.inputDropdownButtonCursor]: 'pointer',
-	[vars.inputDropdownButtonSize]: refs.toggleButtonSize,
-	[vars.inputDropdownButtonOffset]: globalRefs.spacing.xs,
+  [vars.hostWidth]: refs.width,
+  [vars.fontSize]: refs.fontSize,
+  [vars.fontFamily]: refs.fontFamily,
+  [vars.labelTextColor]: refs.labelTextColor,
+  [vars.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars.inputBorderColor]: refs.borderColor,
+  [vars.inputBorderWidth]: refs.borderWidth,
+  [vars.inputBorderStyle]: refs.borderStyle,
+  [vars.inputBorderRadius]: refs.borderRadius,
+  [vars.inputOutlineColor]: refs.outlineColor,
+  [vars.inputOutlineOffset]: refs.outlineOffset,
+  [vars.inputOutlineWidth]: refs.outlineWidth,
+  [vars.inputOutlineStyle]: refs.outlineStyle,
+  [vars.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars.inputValueTextColor]: refs.valueTextColor,
+  [vars.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars.inputBackgroundColor]: refs.backgroundColor,
+  [vars.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars.inputHeight]: refs.inputHeight,
+  [vars.inputDropdownButtonColor]: globalRefs.colors.surface.contrast,
+  [vars.inputDropdownButtonCursor]: 'pointer',
+  [vars.inputDropdownButtonSize]: refs.toggleButtonSize,
+  [vars.inputDropdownButtonOffset]: globalRefs.spacing.xs,
 
-	_readonly: {
-		[vars.inputDropdownButtonCursor]: 'default'
-	},
+  _readonly: {
+    [vars.inputDropdownButtonCursor]: 'default',
+  },
 
-	[vars.overlay.minHeight]: '400px',
-	[vars.overlay.margin]: '0 auto'
+  [vars.overlay.minHeight]: '400px',
+  [vars.overlay.margin]: '0 auto',
 
-	// [vars.overlayCursor]: 'pointer',
-	// [vars.overlayBackground]: globalRefs.colors.surface.light,
-	// [vars.overlayBorder]: `2px solid red`,
+  // [vars.overlayCursor]: 'pointer',
+  // [vars.overlayBackground]: globalRefs.colors.surface.light,
+  // [vars.overlayBorder]: `2px solid red`,
 };
 
 export default comboBox;
-export { vars }
+export { vars };

package/src/theme/components/container.js

@@ -1,106 +1,116 @@
-import globals from "../globals";
-import { getThemeRefs, createHelperVars } from "../../helpers/themeHelpers";
-import { ContainerClass, componentName } from "../../components/descope-container/ContainerClass";
+import globals from '../globals';
+import { getThemeRefs, createHelperVars } from '../../helpers/themeHelpers';
+import { ContainerClass, componentName } from '../../components/descope-container/ContainerClass';
 
 const globalRefs = getThemeRefs(globals);
 
-const compVars = ContainerClass.cssVarList
+const compVars = ContainerClass.cssVarList;
 
 const verticalAlignment = {
-	start: { verticalAlignment: 'start' },
-	center: { verticalAlignment: 'safe center' },
-	end: { verticalAlignment: 'end' },
-}
+  start: { verticalAlignment: 'start' },
+  center: { verticalAlignment: 'safe center' },
+  end: { verticalAlignment: 'end' },
+};
 
 const horizontalAlignment = {
-	start: { horizontalAlignment: 'start' },
-	center: { horizontalAlignment: 'safe center' },
-	end: { horizontalAlignment: 'end' },
-}
-
-const [helperTheme, helperRefs, helperVars] =
-	createHelperVars({
-		verticalAlignment,
-		horizontalAlignment,
-		shadowColor: '#00000020' //if we want to support transparency vars, we should use different color format
-	}, componentName)
+  start: { horizontalAlignment: 'start' },
+  center: { horizontalAlignment: 'safe center' },
+  end: { horizontalAlignment: 'end' },
+};
+
+const [helperTheme, helperRefs, helperVars] = createHelperVars(
+  {
+    verticalAlignment,
+    horizontalAlignment,
+    shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
+  },
+  componentName
+);
 
 const { shadowColor } = helperRefs;
 
 const container = {
-	...helperTheme,
-
-	[compVars.hostWidth]: '100%',
-	[compVars.boxShadow]: 'none',
-	[compVars.backgroundColor]: globalRefs.colors.surface.light,
-	[compVars.color]: globalRefs.colors.surface.contrast,
-
-	verticalPadding: {
-		sm: { [compVars.verticalPadding]: '5px' },
-		md: { [compVars.verticalPadding]: '10px' },
-		lg: { [compVars.verticalPadding]: '20px' },
-	},
-
-	horizontalPadding: {
-		sm: { [compVars.horizontalPadding]: '5px' },
-		md: { [compVars.horizontalPadding]: '10px' },
-		lg: { [compVars.horizontalPadding]: '20px' },
-	},
-
-	direction: {
-		row: {
-			[compVars.flexDirection]: 'row',
-			[compVars.alignItems]: helperRefs.verticalAlignment,
-			[compVars.justifyContent]: helperRefs.horizontalAlignment,
-			[compVars.flexWrap]: 'wrap',
-			horizontalAlignment: {
-				spaceBetween: {
-					[helperVars.horizontalAlignment]: 'space-between'
-				},
-			}
-		},
-		column: {
-			[compVars.flexDirection]: 'column',
-			[compVars.alignItems]: helperRefs.horizontalAlignment,
-			[compVars.justifyContent]: helperRefs.verticalAlignment,
-			verticalAlignment: {
-				spaceBetween: {
-					[helperVars.verticalAlignment]: 'space-between'
-				}
-			}
-		},
-	},
-
-	spaceBetween: {
-		sm: { [compVars.gap]: '10px' },
-		md: { [compVars.gap]: '20px' },
-		lg: { [compVars.gap]: '30px' }
-	},
-
-	shadow: {
-		sm: { [compVars.boxShadow]: `${globalRefs.shadow.wide.sm} ${shadowColor}, ${globalRefs.shadow.narrow.sm} ${shadowColor}` },
-		md: { [compVars.boxShadow]: `${globalRefs.shadow.wide.md} ${shadowColor}, ${globalRefs.shadow.narrow.md} ${shadowColor}` },
-		lg: { [compVars.boxShadow]: `${globalRefs.shadow.wide.lg} ${shadowColor}, ${globalRefs.shadow.narrow.lg} ${shadowColor}` },
-		xl: { [compVars.boxShadow]: `${globalRefs.shadow.wide.xl} ${shadowColor}, ${globalRefs.shadow.narrow.xl} ${shadowColor}` },
-		'2xl': {
-			[helperVars.shadowColor]: '#00000050', // mimic daisyUI shadow settings 
-			[compVars.boxShadow]: `${globalRefs.shadow.wide['2xl']} ${shadowColor}`
-		},
-	},
-
-	borderRadius: {
-		sm: { [compVars.borderRadius]: globalRefs.radius.sm },
-		md: { [compVars.borderRadius]: globalRefs.radius.md },
-		lg: { [compVars.borderRadius]: globalRefs.radius.lg },
-		xl: { [compVars.borderRadius]: globalRefs.radius.xl },
-		'2xl': { [compVars.borderRadius]: globalRefs.radius['2xl'] },
-		'3xl': { [compVars.borderRadius]: globalRefs.radius['3xl'] },
-	}
+  ...helperTheme,
+
+  [compVars.hostWidth]: '100%',
+  [compVars.boxShadow]: 'none',
+  [compVars.backgroundColor]: globalRefs.colors.surface.light,
+  [compVars.color]: globalRefs.colors.surface.contrast,
+
+  verticalPadding: {
+    sm: { [compVars.verticalPadding]: '5px' },
+    md: { [compVars.verticalPadding]: '10px' },
+    lg: { [compVars.verticalPadding]: '20px' },
+  },
+
+  horizontalPadding: {
+    sm: { [compVars.horizontalPadding]: '5px' },
+    md: { [compVars.horizontalPadding]: '10px' },
+    lg: { [compVars.horizontalPadding]: '20px' },
+  },
+
+  direction: {
+    row: {
+      [compVars.flexDirection]: 'row',
+      [compVars.alignItems]: helperRefs.verticalAlignment,
+      [compVars.justifyContent]: helperRefs.horizontalAlignment,
+      [compVars.flexWrap]: 'wrap',
+      horizontalAlignment: {
+        spaceBetween: {
+          [helperVars.horizontalAlignment]: 'space-between',
+        },
+      },
+    },
+    column: {
+      [compVars.flexDirection]: 'column',
+      [compVars.alignItems]: helperRefs.horizontalAlignment,
+      [compVars.justifyContent]: helperRefs.verticalAlignment,
+      verticalAlignment: {
+        spaceBetween: {
+          [helperVars.verticalAlignment]: 'space-between',
+        },
+      },
+    },
+  },
+
+  spaceBetween: {
+    sm: { [compVars.gap]: '10px' },
+    md: { [compVars.gap]: '20px' },
+    lg: { [compVars.gap]: '30px' },
+  },
+
+  shadow: {
+    sm: {
+      [compVars.boxShadow]: `${globalRefs.shadow.wide.sm} ${shadowColor}, ${globalRefs.shadow.narrow.sm} ${shadowColor}`,
+    },
+    md: {
+      [compVars.boxShadow]: `${globalRefs.shadow.wide.md} ${shadowColor}, ${globalRefs.shadow.narrow.md} ${shadowColor}`,
+    },
+    lg: {
+      [compVars.boxShadow]: `${globalRefs.shadow.wide.lg} ${shadowColor}, ${globalRefs.shadow.narrow.lg} ${shadowColor}`,
+    },
+    xl: {
+      [compVars.boxShadow]: `${globalRefs.shadow.wide.xl} ${shadowColor}, ${globalRefs.shadow.narrow.xl} ${shadowColor}`,
+    },
+    '2xl': {
+      [helperVars.shadowColor]: '#00000050', // mimic daisyUI shadow settings
+      [compVars.boxShadow]: `${globalRefs.shadow.wide['2xl']} ${shadowColor}`,
+    },
+  },
+
+  borderRadius: {
+    sm: { [compVars.borderRadius]: globalRefs.radius.sm },
+    md: { [compVars.borderRadius]: globalRefs.radius.md },
+    lg: { [compVars.borderRadius]: globalRefs.radius.lg },
+    xl: { [compVars.borderRadius]: globalRefs.radius.xl },
+    '2xl': { [compVars.borderRadius]: globalRefs.radius['2xl'] },
+    '3xl': { [compVars.borderRadius]: globalRefs.radius['3xl'] },
+  },
 };
 
 export default container;
 
 export const vars = {
-	...compVars,
-	...helperVars
+  ...compVars,
+  ...helperVars,
 };

package/src/theme/components/divider.js

@@ -5,44 +5,43 @@ import { createHelperVars, getThemeRefs } from '../../helpers/themeHelpers';
 const globalRefs = getThemeRefs(globals);
 const compVars = DividerClass.cssVarList;
 
-const [
-	helperTheme,
-	helperRefs,
-	helperVars
-] = createHelperVars({
-	thickness: '2px',
-	spacing: '10px'
-}, componentName);
+const [helperTheme, helperRefs, helperVars] = createHelperVars(
+  {
+    thickness: '2px',
+    spacing: '10px',
+  },
+  componentName
+);
 
 const divider = {
-	...helperTheme,
+  ...helperTheme,
 
-	[compVars.alignItems]: 'center',
-	[compVars.flexDirection]: 'row',
-	[compVars.alignSelf]: 'stretch',
-	[compVars.hostWidth]: '100%',
-	[compVars.stripeColor]: globalRefs.colors.surface.main,
-	[compVars.stripeColorOpacity]: '0.5',
-	[compVars.stripeHorizontalThickness]: helperRefs.thickness,
-	[compVars.labelTextWidth]: 'fit-content',
-	[compVars.labelTextMaxWidth]: 'calc(100% - 100px)',
-	[compVars.labelTextHorizontalSpacing]: helperRefs.spacing,
+  [compVars.alignItems]: 'center',
+  [compVars.flexDirection]: 'row',
+  [compVars.alignSelf]: 'stretch',
+  [compVars.hostWidth]: '100%',
+  [compVars.stripeColor]: globalRefs.colors.surface.main,
+  [compVars.stripeColorOpacity]: '0.5',
+  [compVars.stripeHorizontalThickness]: helperRefs.thickness,
+  [compVars.labelTextWidth]: 'fit-content',
+  [compVars.labelTextMaxWidth]: 'calc(100% - 100px)',
+  [compVars.labelTextHorizontalSpacing]: helperRefs.spacing,
 
-	_vertical: {
-		[compVars.minHeight]: '200px',
-		[compVars.flexDirection]: 'column',
-		[compVars.hostWidth]: 'fit-content',
-		[compVars.hostPadding]: `0 calc(${helperRefs.thickness} * 3)`,
-		[compVars.stripeVerticalThickness]: helperRefs.thickness,
-		[compVars.labelTextWidth]: 'fit-content',
-		[compVars.labelTextMaxWidth]: '100%',
-		[compVars.labelTextVerticalSpacing]: helperRefs.spacing,
-	}
+  _vertical: {
+    [compVars.minHeight]: '200px',
+    [compVars.flexDirection]: 'column',
+    [compVars.hostWidth]: 'fit-content',
+    [compVars.hostPadding]: `0 calc(${helperRefs.thickness} * 3)`,
+    [compVars.stripeVerticalThickness]: helperRefs.thickness,
+    [compVars.labelTextWidth]: 'fit-content',
+    [compVars.labelTextMaxWidth]: '100%',
+    [compVars.labelTextVerticalSpacing]: helperRefs.spacing,
+  },
 };
 
 export default divider;
 
 export const vars = {
-	...compVars,
-	...helperVars
+  ...compVars,
+  ...helperVars,
 };

package/src/theme/components/emailField.js

@@ -4,25 +4,26 @@ import { refs } from './inputWrapper';
 const vars = EmailFieldClass.cssVarList;
 
 const emailField = {
-	[vars.hostWidth]: refs.width,
-	[vars.hostMinWidth]: refs.minWidth,
-	[vars.fontSize]: refs.fontSize,
-	[vars.fontFamily]: refs.fontFamily,
-	[vars.labelTextColor]: refs.labelTextColor,
-	[vars.inputValueTextColor]: refs.valueTextColor,
-	[vars.labelRequiredIndicator]: refs.requiredIndicator,
-	[vars.inputPlaceholderColor]: refs.placeholderTextColor,
-	[vars.inputBorderWidth]: refs.borderWidth,
-	[vars.inputBorderStyle]: refs.borderStyle,
-	[vars.inputBorderColor]: refs.borderColor,
-	[vars.inputBorderRadius]: refs.borderRadius,
-	[vars.inputOutlineWidth]: refs.outlineWidth,
-	[vars.inputOutlineStyle]: refs.outlineStyle,
-	[vars.inputOutlineColor]: refs.outlineColor,
-	[vars.inputOutlineOffset]: refs.outlineOffset,
-	[vars.inputBackgroundColor]: refs.backgroundColor,
-	[vars.inputHorizontalPadding]: refs.horizontalPadding,
-	[vars.inputHeight]: refs.inputHeight
+  [vars.hostWidth]: refs.width,
+  [vars.hostMinWidth]: refs.minWidth,
+  [vars.fontSize]: refs.fontSize,
+  [vars.fontFamily]: refs.fontFamily,
+  [vars.labelTextColor]: refs.labelTextColor,
+  [vars.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars.inputValueTextColor]: refs.valueTextColor,
+  [vars.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars.inputBorderWidth]: refs.borderWidth,
+  [vars.inputBorderStyle]: refs.borderStyle,
+  [vars.inputBorderColor]: refs.borderColor,
+  [vars.inputBorderRadius]: refs.borderRadius,
+  [vars.inputOutlineWidth]: refs.outlineWidth,
+  [vars.inputOutlineStyle]: refs.outlineStyle,
+  [vars.inputOutlineColor]: refs.outlineColor,
+  [vars.inputOutlineOffset]: refs.outlineOffset,
+  [vars.inputBackgroundColor]: refs.backgroundColor,
+  [vars.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars.inputHeight]: refs.inputHeight,
 };
 
 export default emailField;

package/src/theme/components/image.js

@@ -1,8 +1,8 @@
-import { ImageClass } from "../../components/descope-image/ImageClass";
+import { ImageClass } from '../../components/descope-image/ImageClass';
 
-const vars = ImageClass.cssVarList
+const vars = ImageClass.cssVarList;
 
 const image = {};
 
 export default image;
-export { vars }
+export { vars };

package/src/theme/components/index.js

@@ -19,34 +19,42 @@ import * as image from './image';
 import * as phoneField from './phoneField';
 import * as newPassword from './newPassword';
 import * as inputWrapper from './inputWrapper';
+import * as uploadFile from './uploadFile';
 
 const components = {
-	button,
-	textField,
-	password,
-	numberField,
-	emailField,
-	textArea,
-	checkbox,
-	switchToggle,
-	container,
-	logo,
-	totpImage,
-	text,
-	link,
-	divider,
-	passcode,
-	loaderRadial,
-	loaderLinear,
-	comboBox,
-	image,
-	phoneField,
-	newPassword,
-	inputWrapper,
+  button,
+  textField,
+  password,
+  numberField,
+  emailField,
+  textArea,
+  checkbox,
+  switchToggle,
+  container,
+  logo,
+  totpImage,
+  text,
+  link,
+  divider,
+  passcode,
+  loaderRadial,
+  loaderLinear,
+  comboBox,
+  image,
+  phoneField,
+  newPassword,
+  inputWrapper,
+  uploadFile,
 };
 
-const theme = Object.keys(components).reduce((acc, comp) => ({ ...acc, [comp]: components[comp].default }), {});
-const vars = Object.keys(components).reduce((acc, comp) => ({ ...acc, [comp]: components[comp].vars }), {});
+const theme = Object.keys(components).reduce(
+  (acc, comp) => ({ ...acc, [comp]: components[comp].default }),
+  {}
+);
+const vars = Object.keys(components).reduce(
+  (acc, comp) => ({ ...acc, [comp]: components[comp].vars }),
+  {}
+);
 
 export default theme;
-export { vars }
+export { vars };

package/src/theme/components/inputWrapper.js

@@ -1,16 +1,17 @@
 import globals from '../globals';
-import { getThemeRefs } from '../../helpers/themeHelpers';
-import { createHelperVars } from '../../helpers/themeHelpers';
+import { getThemeRefs, createHelperVars } from '../../helpers/themeHelpers';
 import { getComponentName } from '../../helpers/componentHelpers';
 
 const componentName = getComponentName('input-wrapper');
 const globalRefs = getThemeRefs(globals);
 
-const [theme, refs, vars] = createHelperVars({
+const [theme, refs, vars] = createHelperVars(
+  {
     labelTextColor: globalRefs.colors.surface.contrast,
     valueTextColor: globalRefs.colors.surface.contrast,
     placeholderTextColor: globalRefs.colors.surface.main,
     requiredIndicator: "'*'",
+    errorMessageTextColor: globalRefs.colors.error.main,
 
     borderWidth: globalRefs.border.xs,
     borderRadius: globalRefs.radius.xs,
@@ -32,40 +33,42 @@ const [theme, refs, vars] = createHelperVars({
     fontFamily: globalRefs.fonts.font1.family,
 
     size: {
-        xs: { fontSize: '12px' },
-        sm: { fontSize: '14px' },
-        md: { fontSize: '16px' },
-        lg: { fontSize: '18px' }
+      xs: { fontSize: '12px' },
+      sm: { fontSize: '14px' },
+      md: { fontSize: '16px' },
+      lg: { fontSize: '18px' },
     },
 
     _fullWidth: {
-        width: '100%',
+      width: '100%',
     },
 
     _focused: {
-        outlineColor: globalRefs.colors.surface.main,
-        _invalid: {
-            outlineColor: globalRefs.colors.error.main,
-        }
+      outlineColor: globalRefs.colors.surface.main,
+      _invalid: {
+        outlineColor: globalRefs.colors.error.main,
+      },
     },
 
     _bordered: {
-        outlineWidth: globalRefs.border.xs,
-        borderColor: globalRefs.colors.surface.main,
-        borderStyle: 'solid',
-        _invalid: {
-            borderColor: globalRefs.colors.error.main,
-        }
+      outlineWidth: globalRefs.border.xs,
+      borderColor: globalRefs.colors.surface.main,
+      borderStyle: 'solid',
+      _invalid: {
+        borderColor: globalRefs.colors.error.main,
+      },
     },
 
     _disabled: {
-        labelTextColor: globalRefs.colors.surface.main,
-        borderColor: globalRefs.colors.surface.main,
-        valueTextColor: globalRefs.colors.surface.dark,
-        placeholderTextColor: globalRefs.colors.surface.dark,
-        backgroundColor: globalRefs.colors.surface.main
-    }
-}, componentName);
+      labelTextColor: globalRefs.colors.surface.main,
+      borderColor: globalRefs.colors.surface.main,
+      valueTextColor: globalRefs.colors.surface.dark,
+      placeholderTextColor: globalRefs.colors.surface.dark,
+      backgroundColor: globalRefs.colors.surface.main,
+    },
+  },
+  componentName
+);
 
 export { refs, vars };
 export default theme;