@descope/web-components-ui 1.0.135 → 1.0.148

package/src/theme/components/link.js

@@ -6,42 +6,35 @@ const globalRefs = getThemeRefs(globals);
 const vars = LinkClass.cssVarList;
 
 const link = {
-	[vars.cursor]: 'pointer',
-
-	[vars.textUnderlineWidth]: '2px',
-	[vars.textUnderlineStyle]: 'solid',
-	[vars.textUnderlineColor]: 'transparent',
-	[vars.textColor]: globalRefs.colors.primary.main,
-
-	_hover: {
-		[vars.textUnderlineColor]: globalRefs.colors.primary.main
-	},
-
-	textAlign: {
-		right: { [vars.textAlign]: 'right' },
-		left: { [vars.textAlign]: 'left' },
-		center: { [vars.textAlign]: 'center' }
-	},
-
-	_fullWidth: {
-		[vars.hostWidth]: '100%'
-	},
-
-	mode: {
-		primary: {
-			[vars.textColor]: globalRefs.colors.primary.main,
-		},
-		secondary: {
-			[vars.textColor]: globalRefs.colors.secondary.main,
-		},
-		error: {
-			[vars.textColor]: globalRefs.colors.error.main,
-		},
-		success: {
-			[vars.textColor]: globalRefs.colors.success.main,
-		}
-	}
+  [vars.cursor]: 'pointer',
+
+  [vars.textColor]: globalRefs.colors.primary.main,
+
+  textAlign: {
+    right: { [vars.textAlign]: 'right' },
+    left: { [vars.textAlign]: 'left' },
+    center: { [vars.textAlign]: 'center' },
+  },
+
+  _fullWidth: {
+    [vars.hostWidth]: '100%',
+  },
+
+  mode: {
+    primary: {
+      [vars.textColor]: globalRefs.colors.primary.main,
+    },
+    secondary: {
+      [vars.textColor]: globalRefs.colors.secondary.main,
+    },
+    error: {
+      [vars.textColor]: globalRefs.colors.error.main,
+    },
+    success: {
+      [vars.textColor]: globalRefs.colors.success.main,
+    },
+  },
 };
 
 export default link;
-export { vars }
+export { vars };

package/src/theme/components/loader/index.js

@@ -1,4 +1,4 @@
-import * as loaderLinear from './loaderLinear'
-import * as loaderRadial from './loaderRadial'
+import * as loaderLinear from './loaderLinear';
+import * as loaderRadial from './loaderRadial';
 
-export { loaderLinear, loaderRadial };
+export { loaderLinear, loaderRadial };

package/src/theme/components/loader/loaderLinear.js

@@ -6,40 +6,40 @@ const globalRefs = getThemeRefs(globals);
 const vars = LoaderLinearClass.cssVarList;
 
 const loaderLinear = {
-	[vars.hostDisplay]: 'inline-block',
-	[vars.hostWidth]: '100%',
-
-	[vars.barColor]: globalRefs.colors.surface.contrast,
-	[vars.barWidth]: '20%',
-
-	[vars.barBackgroundColor]: globalRefs.colors.surface.main,
-	[vars.barBorderRadius]: '4px',
-
-	[vars.animationDuration]: '2s',
-	[vars.animationTimingFunction]: 'linear',
-	[vars.animationIterationCount]: 'infinite',
-
-	size: {
-		xs: { [vars.barHeight]: '8px' },
-		sm: { [vars.barHeight]: '10px' },
-		md: { [vars.barHeight]: '14px' },
-		lg: { [vars.barHeight]: '20px' },
-		xl: { [vars.barHeight]: '25px' }
-	},
-
-	mode: {
-		primary: {
-			[vars.barColor]: globalRefs.colors.primary.main
-		},
-		secondary: {
-			[vars.barColor]: globalRefs.colors.secondary.main
-		}
-	},
-
-	_hidden: {
-		[vars.hostDisplay]: 'none'
-	}
+  [vars.hostDisplay]: 'inline-block',
+  [vars.hostWidth]: '100%',
+
+  [vars.barColor]: globalRefs.colors.surface.contrast,
+  [vars.barWidth]: '20%',
+
+  [vars.barBackgroundColor]: globalRefs.colors.surface.main,
+  [vars.barBorderRadius]: '4px',
+
+  [vars.animationDuration]: '2s',
+  [vars.animationTimingFunction]: 'linear',
+  [vars.animationIterationCount]: 'infinite',
+  [vars.verticalPadding]: '0.25em',
+
+  size: {
+    xs: { [vars.barHeight]: '2px' },
+    sm: { [vars.barHeight]: '4px' },
+    md: { [vars.barHeight]: '6px' },
+    lg: { [vars.barHeight]: '8px' },
+  },
+
+  mode: {
+    primary: {
+      [vars.barColor]: globalRefs.colors.primary.main,
+    },
+    secondary: {
+      [vars.barColor]: globalRefs.colors.secondary.main,
+    },
+  },
+
+  _hidden: {
+    [vars.hostDisplay]: 'none',
+  },
 };
 
 export default loaderLinear;
-export { vars }
+export { vars };

package/src/theme/components/loader/loaderRadial.js

@@ -1,48 +1,54 @@
 import globals from '../../globals';
-import { LoaderRadialClass, componentName } from '../../../components/descope-loader-radial/LoaderRadialClass';
+import {
+  LoaderRadialClass,
+  componentName,
+} from '../../../components/descope-loader-radial/LoaderRadialClass';
 import { createHelperVars, getThemeRefs } from '../../../helpers/themeHelpers';
 
 const globalRefs = getThemeRefs(globals);
 const vars = LoaderRadialClass.cssVarList;
 
-const [helperTheme, helperRefs] = createHelperVars({
-	spinnerColor: globalRefs.colors.surface.contrast,
-	mode: {
-		primary: {
-			spinnerColor: globalRefs.colors.primary.main
-		},
-		secondary: {
-			spinnerColor: globalRefs.colors.secondary.main
-		}
-	}
-}, componentName);
+const [helperTheme, helperRefs] = createHelperVars(
+  {
+    spinnerColor: globalRefs.colors.surface.contrast,
+    mode: {
+      primary: {
+        spinnerColor: globalRefs.colors.primary.main,
+      },
+      secondary: {
+        spinnerColor: globalRefs.colors.secondary.main,
+      },
+    },
+  },
+  componentName
+);
 
 const loaderRadial = {
-	...helperTheme,
+  ...helperTheme,
 
-	[vars.animationDuration]: '2s',
-	[vars.animationTimingFunction]: 'linear',
-	[vars.animationIterationCount]: 'infinite',
-	[vars.spinnerBorderStyle]: 'solid',
-	[vars.spinnerBorderWidth]: '0.2em',
-	[vars.spinnerBorderRadius]: '50%',
-	[vars.spinnerQuadrant1Color]: helperRefs.spinnerColor,
-	[vars.spinnerQuadrant2Color]: 'transparent',
-	[vars.spinnerQuadrant3Color]: helperRefs.spinnerColor,
-	[vars.spinnerQuadrant4Color]: 'transparent',
+  [vars.animationDuration]: '2s',
+  [vars.animationTimingFunction]: 'linear',
+  [vars.animationIterationCount]: 'infinite',
+  [vars.spinnerBorderStyle]: 'solid',
+  [vars.spinnerBorderWidth]: '0.2em',
+  [vars.spinnerBorderRadius]: '50%',
+  [vars.spinnerQuadrant1Color]: helperRefs.spinnerColor,
+  [vars.spinnerQuadrant2Color]: 'transparent',
+  [vars.spinnerQuadrant3Color]: helperRefs.spinnerColor,
+  [vars.spinnerQuadrant4Color]: 'transparent',
 
-	size: {
-		xs: { [vars.spinnerSize]: '20px' },
-		sm: { [vars.spinnerSize]: '30px' },
-		md: { [vars.spinnerSize]: '40px' },
-		lg: { [vars.spinnerSize]: '60px' },
-		xl: { [vars.spinnerSize]: '80px' }
-	},
+  size: {
+    xs: { [vars.spinnerSize]: '20px' },
+    sm: { [vars.spinnerSize]: '30px' },
+    md: { [vars.spinnerSize]: '40px' },
+    lg: { [vars.spinnerSize]: '60px' },
+    xl: { [vars.spinnerSize]: '80px' },
+  },
 
-	_hidden: {
-		[vars.hostDisplay]: 'none'
-	}
+  _hidden: {
+    [vars.hostDisplay]: 'none',
+  },
 };
 
 export default loaderRadial;
-export { vars }
+export { vars };

package/src/theme/components/logo.js

@@ -1,10 +1,10 @@
-import { LogoClass } from "../../components/descope-logo/LogoClass";
+import { LogoClass } from '../../components/descope-logo/LogoClass';
 
-const vars = LogoClass.cssVarList
+const vars = LogoClass.cssVarList;
 
 const logo = {
-	[vars.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)'
+  [vars.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
 };
 
 export default logo;
-export { vars }
+export { vars };

package/src/theme/components/newPassword.js

@@ -1,22 +1,23 @@
 import { NewPasswordClass } from '../../components/descope-new-password/NewPasswordClass';
-import { refs } from "./inputWrapper"
+import { refs } from './inputWrapper';
 
 const vars = NewPasswordClass.cssVarList;
 
 const newPassword = {
-	[vars.hostWidth]: refs.width,
-	[vars.hostMinWidth]: refs.minWidth,
-	[vars.fontSize]: refs.fontSize,
-	[vars.fontFamily]: refs.fontFamily,
-	[vars.spaceBetweenInputs]: '1em',
+  [vars.hostWidth]: refs.width,
+  [vars.hostMinWidth]: refs.minWidth,
+  [vars.fontSize]: refs.fontSize,
+  [vars.fontFamily]: refs.fontFamily,
+  [vars.spaceBetweenInputs]: '1em',
+  [vars.errorMessageTextColor]: refs.errorMessageTextColor,
 
-	_required: {
-		// NewPassword doesn't pass `required` attribute to its Password components.
-		// That's why we fake the required indicator on each input.
-		// We do that by injecting `::after` element, and populating it with requiredIndicator content.
-		[vars.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
-	}
+  _required: {
+    // NewPassword doesn't pass `required` attribute to its Password components.
+    // That's why we fake the required indicator on each input.
+    // We do that by injecting `::after` element, and populating it with requiredIndicator content.
+    [vars.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
+  },
 };
 
 export default newPassword;
-export { vars }
+export { vars };

package/src/theme/components/numberField.js

@@ -4,25 +4,26 @@ import { refs } from './inputWrapper';
 const vars = NumberFieldClass.cssVarList;
 
 const numberField = {
-	[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.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.labelRequiredIndicator]: refs.requiredIndicator,
-	[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.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.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars.inputHeight]: refs.inputHeight,
 };
 
 export default numberField;

package/src/theme/components/passcode.js

@@ -1,30 +1,28 @@
-import globals from '../globals';
-import { getThemeRefs } from '../../helpers/themeHelpers';
 import { PasscodeClass } from '../../components/descope-passcode/PasscodeClass';
 import { refs } from './inputWrapper';
 
-const globalRefs = getThemeRefs(globals);
-const vars = PasscodeClass.cssVarList
+const vars = PasscodeClass.cssVarList;
 
 const passcode = {
-	[vars.fontFamily]: refs.fontFamily,
-	[vars.fontSize]: refs.fontSize,
-	[vars.labelTextColor]: refs.labelTextColor,
-	[vars.labelRequiredIndicator]: refs.requiredIndicator,
-	[vars.digitValueTextColor]: refs.valueTextColor,
-	[vars.digitPadding]: '0',
-	[vars.digitTextAlign]: 'center',
-	[vars.digitSpacing]: '0',
-	[vars.hostWidth]: refs.width,
-	[vars.digitOutlineColor]: 'transparent',
-	[vars.digitOutlineWidth]: refs.outlineWidth,
-	[vars.focusedDigitFieldOutlineColor]: refs.outlineColor,
-	[vars.digitSize]: refs.inputHeight,
+  [vars.fontFamily]: refs.fontFamily,
+  [vars.fontSize]: refs.fontSize,
+  [vars.labelTextColor]: refs.labelTextColor,
+  [vars.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars.digitValueTextColor]: refs.valueTextColor,
+  [vars.digitPadding]: '0',
+  [vars.digitTextAlign]: 'center',
+  [vars.digitSpacing]: '4px',
+  [vars.hostWidth]: refs.width,
+  [vars.digitOutlineColor]: 'transparent',
+  [vars.digitOutlineWidth]: refs.outlineWidth,
+  [vars.focusedDigitFieldOutlineColor]: refs.outlineColor,
+  [vars.digitSize]: refs.inputHeight,
 
-	_hideCursor: {
-		[vars.digitCaretTextColor]: 'transparent',
-	}
-}
+  _hideCursor: {
+    [vars.digitCaretTextColor]: 'transparent',
+  },
+};
 
 export default passcode;
-export { vars }
+export { vars };

package/src/theme/components/password.js

@@ -7,27 +7,28 @@ const globalRefs = getThemeRefs(globals);
 const vars = PasswordClass.cssVarList;
 
 const password = {
-	[vars.hostWidth]: refs.width,
-	[vars.fontSize]: refs.fontSize,
-	[vars.fontFamily]: refs.fontFamily,
-	[vars.labelTextColor]: refs.labelTextColor,
-	[vars.inputHorizontalPadding]: refs.horizontalPadding,
-	[vars.inputHeight]: refs.inputHeight,
-	[vars.inputBackgroundColor]: refs.backgroundColor,
-	[vars.labelRequiredIndicator]: refs.requiredIndicator,
-	[vars.inputValueTextColor]: refs.valueTextColor,
-	[vars.inputPlaceholderTextColor]: 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.revealButtonOffset]: globalRefs.spacing.md,
-	[vars.revealButtonSize]: refs.toggleButtonSize
+  [vars.hostWidth]: refs.width,
+  [vars.fontSize]: refs.fontSize,
+  [vars.fontFamily]: refs.fontFamily,
+  [vars.labelTextColor]: refs.labelTextColor,
+  [vars.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars.inputHeight]: refs.inputHeight,
+  [vars.inputBackgroundColor]: refs.backgroundColor,
+  [vars.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars.inputValueTextColor]: refs.valueTextColor,
+  [vars.inputPlaceholderTextColor]: 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.revealButtonOffset]: globalRefs.spacing.md,
+  [vars.revealButtonSize]: refs.toggleButtonSize,
 };
 
 export default password;
-export { vars }
+export { vars };

package/src/theme/components/phoneField.js

@@ -4,30 +4,30 @@ import { refs } from './inputWrapper';
 const vars = PhoneFieldClass.cssVarList;
 
 const phoneField = {
-	[vars.hostWidth]: refs.width,
-	[vars.fontSize]: refs.fontSize,
-	[vars.fontFamily]: refs.fontFamily,
-	[vars.labelTextColor]: refs.labelTextColor,
-	[vars.labelRequiredIndicator]: refs.requiredIndicator,
-	[vars.inputValueTextColor]: refs.valueTextColor,
-	[vars.inputPlaceholderTextColor]: refs.placeholderTextColor,
-	[vars.inputBorderStyle]: refs.borderStyle,
-	[vars.inputBorderWidth]: refs.borderWidth,
-	[vars.inputBorderColor]: refs.borderColor,
-	[vars.inputBorderRadius]: refs.borderRadius,
-	[vars.inputOutlineStyle]: refs.outlineStyle,
-	[vars.inputOutlineWidth]: refs.outlineWidth,
-	[vars.inputOutlineColor]: refs.outlineColor,
-	[vars.inputOutlineOffset]: refs.outlineOffset,
-	[vars.inputHeight]: refs.inputHeight,
-	[vars.phoneInputWidth]: refs.minWidth,
-	[vars.countryCodeInputWidth]: '5em',
-	[vars.countryCodeDropdownWidth]: '20em',
+  [vars.hostWidth]: refs.width,
+  [vars.fontSize]: refs.fontSize,
+  [vars.fontFamily]: refs.fontFamily,
+  [vars.labelTextColor]: refs.labelTextColor,
+  [vars.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars.inputValueTextColor]: refs.valueTextColor,
+  [vars.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars.inputBorderStyle]: refs.borderStyle,
+  [vars.inputBorderWidth]: refs.borderWidth,
+  [vars.inputBorderColor]: refs.borderColor,
+  [vars.inputBorderRadius]: refs.borderRadius,
+  [vars.inputOutlineStyle]: refs.outlineStyle,
+  [vars.inputOutlineWidth]: refs.outlineWidth,
+  [vars.inputOutlineColor]: refs.outlineColor,
+  [vars.inputOutlineOffset]: refs.outlineOffset,
+  [vars.phoneInputWidth]: refs.minWidth,
+  [vars.countryCodeInputWidth]: '5em',
+  [vars.countryCodeDropdownWidth]: '20em',
 
-	// '@overlay': {
-	// 	overlayItemBackgroundColor: 'red'
-	// }
+  // '@overlay': {
+  // 	overlayItemBackgroundColor: 'red'
+  // }
 };
 
 export default phoneField;
-export { vars }
+export { vars };

package/src/theme/components/switchToggle.js

@@ -10,61 +10,62 @@ const globalRefs = getThemeRefs(globals);
 const vars = SwitchToggleClass.cssVarList;
 
 const switchToggle = {
-    [vars.fontSize]: refs.fontSize,
-    [vars.fontFamily]: refs.fontFamily,
+  [vars.fontSize]: refs.fontSize,
+  [vars.fontFamily]: refs.fontFamily,
 
-    [vars.inputOutlineWidth]: refs.outlineWidth,
-    [vars.inputOutlineOffset]: refs.outlineOffset,
-    [vars.inputOutlineColor]: refs.outlineColor,
-    [vars.inputOutlineStyle]: refs.outlineStyle,
+  [vars.inputOutlineWidth]: refs.outlineWidth,
+  [vars.inputOutlineOffset]: refs.outlineOffset,
+  [vars.inputOutlineColor]: refs.outlineColor,
+  [vars.inputOutlineStyle]: refs.outlineStyle,
 
-    [vars.trackBorderStyle]: refs.borderStyle,
-    [vars.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
-    [vars.trackBorderColor]: refs.borderColor,
-    [vars.trackBackgroundColor]: 'none',
-    [vars.trackBorderRadius]: globalRefs.radius.md,
-    [vars.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
-    [vars.trackHeight]: checkboxHeight,
+  [vars.trackBorderStyle]: refs.borderStyle,
+  [vars.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
+  [vars.trackBorderColor]: refs.borderColor,
+  [vars.trackBackgroundColor]: 'none',
+  [vars.trackBorderRadius]: globalRefs.radius.md,
+  [vars.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
+  [vars.trackHeight]: checkboxHeight,
 
-    [vars.knobSize]: `calc(1em - ${knobMargin})`,
-    [vars.knobRadius]: '50%',
-    [vars.knobTopOffset]: '1px',
-    [vars.knobLeftOffset]: knobMargin,
-    [vars.knobColor]: refs.valueTextColor,
-    [vars.knobTransitionDuration]: '0.3s',
+  [vars.knobSize]: `calc(1em - ${knobMargin})`,
+  [vars.knobRadius]: '50%',
+  [vars.knobTopOffset]: '1px',
+  [vars.knobLeftOffset]: knobMargin,
+  [vars.knobColor]: refs.valueTextColor,
+  [vars.knobTransitionDuration]: '0.3s',
 
-    [vars.labelTextColor]: refs.labelTextColor,
-    [vars.labelFontWeight]: '400',
-    [vars.labelLineHeight]: `calc(${checkboxHeight} + 0.25em)`,
-    [vars.labelSpacing]: '0.25em',
-    [vars.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars.labelTextColor]: refs.labelTextColor,
+  [vars.labelFontWeight]: '400',
+  [vars.labelLineHeight]: `calc(${checkboxHeight} + 0.25em)`,
+  [vars.labelSpacing]: '0.25em',
+  [vars.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars.errorMessageTextColor]: refs.errorMessageTextColor,
 
-    [vars.hostWidth]: refs.width,
+  [vars.hostWidth]: refs.width,
 
-    _checked: {
-        [vars.trackBorderColor]: refs.borderColor,
-        [vars.trackBackgroundColor]: refs.backgroundColor,
-        [vars.knobLeftOffset]: `calc(100% - var(${vars.knobSize}) - ${knobMargin})`,
-        [vars.knobColor]: refs.valueTextColor,
-        [vars.knobTextColor]: refs.valueTextColor,
-    },
+  _checked: {
+    [vars.trackBorderColor]: refs.borderColor,
+    [vars.trackBackgroundColor]: refs.backgroundColor,
+    [vars.knobLeftOffset]: `calc(100% - var(${vars.knobSize}) - ${knobMargin})`,
+    [vars.knobColor]: refs.valueTextColor,
+    [vars.knobTextColor]: refs.valueTextColor,
+  },
 
-    _disabled: {
-        [vars.knobColor]: globalRefs.colors.surface.light,
-        [vars.trackBorderColor]: globalRefs.colors.surface.main,
-        [vars.trackBackgroundColor]: globalRefs.colors.surface.main,
-        [vars.labelTextColor]: refs.labelTextColor,
-        _checked: {
-            [vars.knobColor]: globalRefs.colors.surface.light,
-            [vars.trackBackgroundColor]: globalRefs.colors.surface.main,
-        }
+  _disabled: {
+    [vars.knobColor]: globalRefs.colors.surface.light,
+    [vars.trackBorderColor]: globalRefs.colors.surface.main,
+    [vars.trackBackgroundColor]: globalRefs.colors.surface.main,
+    [vars.labelTextColor]: refs.labelTextColor,
+    _checked: {
+      [vars.knobColor]: globalRefs.colors.surface.light,
+      [vars.trackBackgroundColor]: globalRefs.colors.surface.main,
     },
+  },
 
-    _invalid: {
-        [vars.trackBorderColor]: globalRefs.colors.error.main,
-        [vars.knobColor]: globalRefs.colors.error.main,
-    },
+  _invalid: {
+    [vars.trackBorderColor]: globalRefs.colors.error.main,
+    [vars.knobColor]: globalRefs.colors.error.main,
+  },
 };
 
 export default switchToggle;
-export { vars }
+export { vars };