@descope/web-components-ui 1.0.358 → 1.0.360

package/dist/cjs/index.cjs.js

@@ -3,6 +3,7 @@
 var merge = require('lodash.merge');
 var Color = require('color');
 var MarkdownIt = require('markdown-it');
+require('lodash.debounce');
 var hljs = require('highlight.js');
 
 const DESCOPE_PREFIX = 'descope';
@@ -2972,6 +2973,7 @@ const {
   requiredIndicator: requiredIndicator$b,
   inputField: inputField$6,
   input,
+  inputMask,
   helperText: helperText$a,
   errorMessage: errorMessage$c,
   disabledPlaceholder,
@@ -2988,6 +2990,7 @@ const {
   disabledPlaceholder: { selector: '> input:disabled::placeholder' },
   inputField: { selector: '::part(input-field)' },
   input: { selector: 'input' },
+  inputMask: { selector: '::part(input-field)::before' },
   inputDisabled: { selector: 'input:disabled' },
   helperText: { selector: '::part(helper-text)' },
   errorMessage: { selector: '::part(error-message)' },
@@ -3013,7 +3016,10 @@ var textFieldMappings = {
   hostMinWidth: { ...host$m, property: 'min-width' },
   hostDirection: { ...host$m, property: 'direction' },
 
-  inputBackgroundColor: { ...inputField$6, property: 'background-color' },
+  inputBackgroundColor: [
+    { ...inputField$6, property: 'background-color' },
+    { ...inputMask, property: 'background-color' },
+  ],
 
   errorMessageTextColor: { ...errorMessage$c, property: 'color' },
   helperTextColor: { ...helperText$a, property: '-webkit-text-fill-color' },
@@ -4937,6 +4943,7 @@ const text$2 = {
   [vars$v.textLineHeight]: '1.35em',
   [vars$v.textAlign]: 'left',
   [vars$v.textColor]: globalRefs$m.colors.surface.dark,
+
   variant: {
     h1: {
       [vars$v.fontSize]: globalRefs$m.typography.h1.size,
@@ -5044,7 +5051,7 @@ const decodeHTML = (html) => {
 
 const componentName$C = getComponentName('enriched-text');
 
-let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName: componentName$C, baseSelector: ':host > div' }) {
+class EnrichedText extends createBaseClass({ componentName: componentName$C, baseSelector: ':host > div' }) {
   #origLinkRenderer;
 
   #origEmRenderer;
@@ -5204,7 +5211,7 @@ let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName:
       this.contentNode.removeAttribute('inert');
     }
   }
-};
+}
 
 const EnrichedTextClass = compose(
   createStyleMixin({
@@ -5229,9 +5236,10 @@ const EnrichedTextClass = compose(
     },
   }),
   createStyleMixin({ componentNameOverride: getComponentName('link') }),
+  createStyleMixin({ componentNameOverride: getComponentName('text') }),
   draggableMixin,
   componentNameValidationMixin
-)(EnrichedText$2);
+)(EnrichedText);
 
 const componentName$B = getComponentName('link');
 
@@ -5300,33 +5308,31 @@ const LinkClass = compose(
 )(RawLink);
 
 const globalRefs$l = getThemeRefs(globals);
-const vars$u = EnrichedTextClass.cssVarList;
+const vars$u = LinkClass.cssVarList;
 
-const EnrichedText = {
+const link$1 = {
   [vars$u.hostDirection]: globalRefs$l.direction,
+  [vars$u.cursor]: 'pointer',
 
-  [vars$u.fontSize]: globalRefs$l.typography.body1.size,
-  [vars$u.fontWeight]: globalRefs$l.typography.body1.weight,
-  [vars$u.fontWeightBold]: '900',
-  [vars$u.fontFamily]: globalRefs$l.typography.body1.font,
+  [vars$u.textColor]: globalRefs$l.colors.primary.main,
 
-  [vars$u.textLineHeight]: '1.35em',
-  [vars$u.textAlign]: 'left',
-  [vars$u.textColor]: globalRefs$l.colors.surface.dark,
+  textAlign: {
+    right: { [vars$u.textAlign]: 'right' },
+    left: { [vars$u.textAlign]: 'left' },
+    center: { [vars$u.textAlign]: 'center' },
+  },
 
-  [vars$u.linkColor]: `var(${LinkClass.cssVarList.textColor})`,
-  [vars$u.linkTextDecoration]: 'none',
-  [vars$u.linkHoverTextDecoration]: 'underline',
+  _fullWidth: {
+    [vars$u.hostWidth]: '100%',
+  },
 
-  [vars$u.minWidth]: '0.25em',
-  [vars$u.minHeight]: '1.35em',
+  _hover: {
+    [vars$u.textDecoration]: 'underline',
+  },
 
   mode: {
-    primary: {
-      [vars$u.textColor]: globalRefs$l.colors.surface.contrast,
-    },
     secondary: {
-      [vars$u.textColor]: globalRefs$l.colors.surface.dark,
+      [vars$u.textColor]: globalRefs$l.colors.secondary.main,
     },
     error: {
       [vars$u.textColor]: globalRefs$l.colors.error.main,
@@ -5335,101 +5341,41 @@ const EnrichedText = {
       [vars$u.textColor]: globalRefs$l.colors.success.main,
     },
   },
-
-  variant: {
-    h1: {
-      [vars$u.fontSize]: globalRefs$l.typography.h1.size,
-      [vars$u.fontWeight]: globalRefs$l.typography.h1.weight,
-      [vars$u.fontFamily]: globalRefs$l.typography.h1.font,
-    },
-    h2: {
-      [vars$u.fontSize]: globalRefs$l.typography.h2.size,
-      [vars$u.fontWeight]: globalRefs$l.typography.h2.weight,
-      [vars$u.fontFamily]: globalRefs$l.typography.h2.font,
-    },
-    h3: {
-      [vars$u.fontSize]: globalRefs$l.typography.h3.size,
-      [vars$u.fontWeight]: globalRefs$l.typography.h3.weight,
-      [vars$u.fontFamily]: globalRefs$l.typography.h3.font,
-    },
-    subtitle1: {
-      [vars$u.fontSize]: globalRefs$l.typography.subtitle1.size,
-      [vars$u.fontWeight]: globalRefs$l.typography.subtitle1.weight,
-      [vars$u.fontFamily]: globalRefs$l.typography.subtitle1.font,
-    },
-    subtitle2: {
-      [vars$u.fontSize]: globalRefs$l.typography.subtitle2.size,
-      [vars$u.fontWeight]: globalRefs$l.typography.subtitle2.weight,
-      [vars$u.fontFamily]: globalRefs$l.typography.subtitle2.font,
-    },
-    body1: {
-      [vars$u.fontSize]: globalRefs$l.typography.body1.size,
-      [vars$u.fontWeight]: globalRefs$l.typography.body1.weight,
-      [vars$u.fontFamily]: globalRefs$l.typography.body1.font,
-    },
-    body2: {
-      [vars$u.fontSize]: globalRefs$l.typography.body2.size,
-      [vars$u.fontWeight]: globalRefs$l.typography.body2.weight,
-      [vars$u.fontFamily]: globalRefs$l.typography.body2.font,
-    },
-  },
-
-  textAlign: {
-    right: { [vars$u.textAlign]: 'right' },
-    left: { [vars$u.textAlign]: 'left' },
-    center: { [vars$u.textAlign]: 'center' },
-  },
-
-  _fullWidth: {
-    [vars$u.hostWidth]: '100%',
-  },
 };
 
-var EnrichedText$1 = /*#__PURE__*/Object.freeze({
+var link$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: EnrichedText,
+  default: link$1,
   vars: vars$u
 });
 
 const globalRefs$k = getThemeRefs(globals);
-const vars$t = LinkClass.cssVarList;
+const vars$t = EnrichedTextClass.cssVarList;
 
-const link$1 = {
+const enrichedText = {
   [vars$t.hostDirection]: globalRefs$k.direction,
-  [vars$t.cursor]: 'pointer',
+  [vars$t.hostWidth]: useVar(vars$v.hostWidth),
 
-  [vars$t.textColor]: globalRefs$k.colors.primary.main,
+  [vars$t.textLineHeight]: useVar(vars$v.textLineHeight),
+  [vars$t.textColor]: useVar(vars$v.textColor),
+  [vars$t.textAlign]: useVar(vars$v.textAlign),
 
-  textAlign: {
-    right: { [vars$t.textAlign]: 'right' },
-    left: { [vars$t.textAlign]: 'left' },
-    center: { [vars$t.textAlign]: 'center' },
-  },
+  [vars$t.fontSize]: useVar(vars$v.fontSize),
+  [vars$t.fontWeight]: useVar(vars$v.fontWeight),
+  [vars$t.fontFamily]: useVar(vars$v.fontFamily),
 
-  _fullWidth: {
-    [vars$t.hostWidth]: '100%',
-  },
+  [vars$t.linkColor]: useVar(vars$u.textColor),
+  [vars$t.linkTextDecoration]: 'none',
+  [vars$t.linkHoverTextDecoration]: 'underline',
 
-  _hover: {
-    [vars$t.textDecoration]: 'underline',
-  },
-
-  mode: {
-    secondary: {
-      [vars$t.textColor]: globalRefs$k.colors.secondary.main,
-    },
-    error: {
-      [vars$t.textColor]: globalRefs$k.colors.error.main,
-    },
-    success: {
-      [vars$t.textColor]: globalRefs$k.colors.success.main,
-    },
-  },
+  [vars$t.fontWeightBold]: '900',
+  [vars$t.minWidth]: '0.25em',
+  [vars$t.minHeight]: '1.35em',
 };
 
-var link$2 = /*#__PURE__*/Object.freeze({
+var enrichedText$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: link$1,
+  default: enrichedText,
   vars: vars$t
 });
 
@@ -5785,10 +5731,15 @@ const PasscodeClass = compose(
 				-webkit-mask-image: none;
 			}
 
+      /* safari */
+			vaadin-text-field::part(input-field)::after {
+        opacity: 0;
+      }
+
 			vaadin-text-field {
 				margin: 0;
 				padding: 0;
-				width: 100%
+				width: 100%;
 			}
 
 			vaadin-text-field::before {
@@ -13106,7 +13057,7 @@ const components = {
   totpImage,
   notpImage,
   text: text$3,
-  EnrichedText: EnrichedText$1,
+  enrichedText: enrichedText$1,
   link: link$2,
   divider: divider$1,
   passcode: passcode$1,
@@ -13544,4 +13495,5 @@ exports.globalsThemeToStyle = globalsThemeToStyle;
 exports.themeToCSSVarsObj = themeToCSSVarsObj;
 exports.themeToStyle = themeToStyle;
 exports.themeVars = themeVars;
+exports.useVar = useVar;
 //# sourceMappingURL=index.cjs.js.map