@descope/web-components-ui 1.134.0 → 1.136.0

package/dist/cjs/index.cjs.js

@@ -32,7 +32,7 @@ var zxcvbnCommonPackage__namespace = /*#__PURE__*/_interopNamespaceDefault(zxcvb
 var zxcvbnEnPackage__namespace = /*#__PURE__*/_interopNamespaceDefault(zxcvbnEnPackage);
 
 const DESCOPE_PREFIX$1 = 'descope';
-const CSS_SELECTOR_SPECIFIER_MULTIPLY$1 = 3;
+const CSS_SELECTOR_SPECIFIER_MULTIPLY$1 = 5;
 const BASE_THEME_SECTION$1 = 'host';
 const PORTAL_THEME_PREFIX$1 = '@';
 
@@ -199,7 +199,7 @@ const forwardProps$3 = (src, target, props = []) => {
 };
 
 const DESCOPE_PREFIX = 'descope';
-const CSS_SELECTOR_SPECIFIER_MULTIPLY = 3;
+const CSS_SELECTOR_SPECIFIER_MULTIPLY = 5;
 const BASE_THEME_SECTION = 'host';
 
 const kebabCase = (str) =>
@@ -643,6 +643,241 @@ const createHelperVars$1 = (theme, prefix) => {
   return [res.theme, res.useVars, res.vars];
 };
 
+const colorGaps = {
+  darkLight: 0.4,
+  highlight: 0.8,
+  contrast: 1,
+  edgeColor: {
+    darkLight: 0.25,
+    highlight: 0.1,
+  },
+};
+
+const darken = (c, percentage) => c.darken(percentage).hex();
+
+const contrast = (c) => {
+  const isDark = c.isDark();
+  return c
+    .mix(Color(isDark ? 'white' : 'black'), colorGaps.contrast)
+    .saturate(1)
+    .hex();
+};
+
+const lighten = (c, percentage) => {
+  const isDark = c.lightness() < 0.5;
+
+  if (isDark) {
+    return c.lightness(percentage * 100).hex();
+  }
+
+  return c.lighten(percentage).hex();
+};
+
+const isNearBlack = (color) => color.luminosity() < 0.01;
+const isNearWhite = (color) => color.luminosity() > 0.99;
+
+const generateDarkColor = (color, theme) => {
+  if (theme === 'dark') {
+    return isNearWhite(color)
+      ? darken(color, colorGaps.edgeColor.darkLight)
+      : lighten(color, colorGaps.darkLight);
+  }
+
+  return isNearBlack(color)
+    ? lighten(color, colorGaps.edgeColor.darkLight)
+    : darken(color, colorGaps.darkLight);
+};
+
+const generateLightColor = (color, theme) => {
+  if (theme === 'dark') {
+    return isNearBlack(color)
+      ? lighten(color, colorGaps.edgeColor.darkLight)
+      : darken(color, colorGaps.darkLight);
+  }
+
+  return isNearWhite(color)
+    ? darken(color, colorGaps.edgeColor.darkLight)
+    : lighten(color, colorGaps.darkLight);
+};
+
+const generateHighlightColor = (color, theme) => {
+  if (theme === 'dark') {
+    return isNearBlack(color)
+      ? lighten(color, colorGaps.edgeColor.highlight)
+      : darken(color, colorGaps.highlight);
+  }
+
+  return isNearWhite(color)
+    ? darken(color, colorGaps.edgeColor.highlight)
+    : lighten(color, colorGaps.highlight);
+};
+
+const genColor = (color, theme) => {
+  const mainColor = new Color(color.main || color);
+
+  const res = {
+    main: mainColor.hex(),
+    dark: color.dark || generateDarkColor(mainColor, theme),
+    light: color.light || generateLightColor(mainColor, theme),
+    highlight: color.highlight || generateHighlightColor(mainColor, theme),
+    contrast: color.contrast || contrast(mainColor),
+  };
+
+  return res;
+};
+
+const genColors = (colors) => {
+  return Object.keys(colors).reduce((acc, colorName) => {
+    const currentColor = colors[colorName];
+
+    return Object.assign(acc, {
+      [colorName]: genColor(currentColor),
+    });
+  }, {});
+};
+
+const useHostExternalPadding = (cssVarList) => `
+    :host {
+        padding: calc(var(${cssVarList.inputOutlineWidth}) + var(${cssVarList.inputOutlineOffset}))
+    }
+`;
+
+const resetInputFieldUnderlayingBorder = (name) => `
+    ${name}::part(input-field)::after {
+        border: none;
+    }
+`;
+
+const resetInitialHeight = (name) => `
+    ${name}::before {
+		height: unset;
+	}
+`;
+
+const resetInputElement = (name) => `
+    ${name} > input {
+        -webkit-mask-image: none;
+        min-height: 0;
+        box-sizing: border-box;
+    }
+`;
+
+const resetInputContainer = (name) => `
+    ${name} {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+    }
+`;
+
+const resetInputField = (name) => `
+    ${name}::part(input-field) {
+        overflow: hidden;
+        padding: 0;
+        box-shadow: none;
+    }
+`;
+
+const resetInputCursor = (name) => `
+    ${name} > label,
+    ${name}::part(label),
+    ${name}::part(required-indicator) {
+        cursor: pointer;
+    }
+`;
+
+const resetInputPlaceholder = (name, ele = 'input') => `
+    ${name}[disabled] > ${ele}:placeholder-shown,
+	${name}[readonly] > ${ele}:placeholder-shown {
+		opacity: 1;
+	}
+`;
+
+const resetInputAutoFill = (name, cssVarList) => `
+    ${name} input:-webkit-autofill,
+    ${name} input:-webkit-autofill::first-line,
+    ${name} input:-webkit-autofill:hover,
+    ${name} input:-webkit-autofill:active,
+    ${name} input:-webkit-autofill:focus {
+        -webkit-text-fill-color: var(${cssVarList.inputValueTextColor});
+        box-shadow: 0 0 0 var(${cssVarList.inputHeight}) var(${cssVarList.inputBackgroundColor}) inset;
+    }
+`;
+
+const resetInputFieldDefaultWidth = () => `
+    :host {
+        --vaadin-field-default-width: auto;
+        box-sizing: border-box;
+    }
+`;
+
+const resetInputReadonlyStyle = (name) => `
+    ${name}::part(input-field)::after {
+        opacity: 0;
+    }
+`;
+
+const resetInputFieldInvalidBackgroundColor = (name) => `
+    ${name}::part(input-field)::after {
+        background: none;
+    }
+`;
+
+const resetInputOverrides = (name, cssVarList) => `
+    ${resetInputContainer(name)}
+    ${resetInputCursor(name)}
+    ${resetInputPlaceholder(name)}
+    ${resetInputField(name)}
+    ${resetInputAutoFill(name, cssVarList)}
+    ${resetInputFieldInvalidBackgroundColor(name)}
+    ${resetInitialHeight(name)}
+    ${resetInputElement(name)}
+    ${resetInputFieldUnderlayingBorder(name)}
+`;
+
+// This function is used to support RTL correctly for input components.
+// It also fixes the error message to be displayed LTR since we currently
+// don't support RTL for error messages.
+const resetInputLabelPosition = (name) => `
+    :host ::part(error-message) {
+      direction: ltr;
+    }
+    :host([required]) ::part(required-indicator) {
+      width: 1em;
+      display: inline-flex;
+    }
+    :host([required]) ::part(required-indicator)::after {
+      position: static;
+    }
+    :host([has-label]) ::part(label) {
+      padding-right: 0;
+      padding-bottom: 0;
+      display: flex;
+      width: 100%;
+    }
+    ${name} [slot="label"] {
+      max-width: calc(100% - 1em);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      padding-bottom: 0.5em;
+    }
+`;
+
+const inputFloatingLabelStyle = () => {
+  return `
+  :host([label-type="floating"]) {
+    position: relative;
+  }
+  :host([label-type="floating"][has-label]) > ::part(label) {
+    z-index: 1;
+    padding: 0;
+    width: auto;
+  }
+  `;
+};
+
 const getVarName = (path) => getCssVarName$1(DESCOPE_PREFIX$1, ...path);
 
 // lodash.set alternative
@@ -705,6 +940,15 @@ const globalsThemeToStyle = (theme, themeName = '') => {
   return `*[data-theme="${themeName}"] {${style}}`;
 };
 
+function splitAmpersands(str) {
+  const match = str.match(/^(&+)?(.*)$/);
+  return [match[1] || '', match[2] || ''];
+}
+
+// st attributes are also using selector multiplication
+// so we need to limit the multiplication
+const MAX_SELECTOR_MULTIPLY = 3;
+
 const componentsThemeToStyleObj = (componentsTheme) =>
   transformTheme(componentsTheme, [], (path, val) => {
     const [component, ...restPath] = path;
@@ -729,11 +973,22 @@ const componentsThemeToStyleObj = (componentsTheme) =>
     // do not start with underscore -> key:value, must have 2 no underscore attrs in a row
     // starts with underscore -> attribute selector
     const attrsSelector = restPath.reduce((acc, section, idx) => {
-      if (section.startsWith('_')) return `${acc}[${kebabCase$1(section.replace(/^_/, ''))}="true"]`;
+      const [ampersands, content] = splitAmpersands(section);
+      const selectorMultiplier = Math.min(
+        ampersands.length + 1, // if there are no & we need to multiply by 1
+        MAX_SELECTOR_MULTIPLY
+      );
+
+      if (content.startsWith('_'))
+        return acc + `[${kebabCase$1(content.replace(/^_/, ''))}="true"]`.repeat(selectorMultiplier);
 
       const nextSection = restPath[idx + 1];
 
-      if (typeof nextSection !== 'string' || nextSection.startsWith('_')) {
+      if (
+        typeof nextSection !== 'string' ||
+        nextSection.startsWith('_') ||
+        nextSection.startsWith('&')
+      ) {
         // eslint-disable-next-line no-console
         console.error(
           'theme generator',
@@ -742,7 +997,12 @@ const componentsThemeToStyleObj = (componentsTheme) =>
         return acc;
       }
 
-      return `${acc}[${kebabCase$1(section)}="${restPath.splice(idx + 1, 1).join('')}"]`;
+      return (
+        acc +
+        `[${kebabCase$1(content)}="${restPath.splice(idx + 1, 1).join('')}"]`.repeat(
+          selectorMultiplier
+        )
+      );
     }, '');
 
     const selector = `:host${attrsSelector ? `(${attrsSelector})` : ''}`;
@@ -770,139 +1030,48 @@ const componentsThemeToStyle = (componentsTheme) =>
 const createComponentsTheme = (componentsTheme) => {
   const styleObj = componentsThemeToStyleObj(componentsTheme);
 
-  return Object.keys(styleObj).reduce((acc, componentName) => {
-    const componentThemes = styleObj[componentName];
-
-    return Object.assign(acc, {
-      [componentName]: Object.keys(componentThemes).reduce(
-        (res, theme) =>
-          Object.assign(res, { [theme]: componentsThemeToStyle(componentThemes[theme]) }),
-        {}
-      ),
-    });
-  }, {});
-};
-
-const themeToStyle = ({ globals, components }, themeName) => ({
-  globals: globalsThemeToStyle(globals, themeName),
-  components: createComponentsTheme(components),
-});
-
-// allows to generate css variables with nested fallbacks
-const useVar = (...varNames) => {
-  return varNames.reduceRight((acc, value) => {
-    if (value.startsWith('--')) return `var(${value}${acc ? `, ${acc}` : acc})`;
-
-    return `${value}${acc ? `, ${acc}` : acc}`;
-  }, '');
-};
-
-const createHelperVars = (theme, prefix) => {
-  const res = transformTheme(theme, [], (path, value) => {
-    const modifiedPath = [...path];
-    const property = modifiedPath.splice(-1);
-    const varName = getCssVarName$1(prefix, property);
-
-    const vars = { [property]: varName };
-    const useVars = { [property]: useVar(varName) };
-
-    return { theme: set({}, [...modifiedPath, varName], value), useVars, vars };
-  });
-
-  return [res.theme, res.useVars, res.vars];
-};
-
-const colorGaps = {
-  darkLight: 0.4,
-  highlight: 0.8,
-  contrast: 1,
-  edgeColor: {
-    darkLight: 0.25,
-    highlight: 0.1,
-  },
-};
-
-const darken = (c, percentage) => c.darken(percentage).hex();
-
-const contrast = (c) => {
-  const isDark = c.isDark();
-  return c
-    .mix(Color(isDark ? 'white' : 'black'), colorGaps.contrast)
-    .saturate(1)
-    .hex();
-};
-
-const lighten = (c, percentage) => {
-  const isDark = c.lightness() < 0.5;
-
-  if (isDark) {
-    return c.lightness(percentage * 100).hex();
-  }
-
-  return c.lighten(percentage).hex();
-};
-
-const isNearBlack = (color) => color.luminosity() < 0.01;
-const isNearWhite = (color) => color.luminosity() > 0.99;
-
-const generateDarkColor = (color, theme) => {
-  if (theme === 'dark') {
-    return isNearWhite(color)
-      ? darken(color, colorGaps.edgeColor.darkLight)
-      : lighten(color, colorGaps.darkLight);
-  }
-
-  return isNearBlack(color)
-    ? lighten(color, colorGaps.edgeColor.darkLight)
-    : darken(color, colorGaps.darkLight);
-};
-
-const generateLightColor = (color, theme) => {
-  if (theme === 'dark') {
-    return isNearBlack(color)
-      ? lighten(color, colorGaps.edgeColor.darkLight)
-      : darken(color, colorGaps.darkLight);
-  }
-
-  return isNearWhite(color)
-    ? darken(color, colorGaps.edgeColor.darkLight)
-    : lighten(color, colorGaps.darkLight);
-};
-
-const generateHighlightColor = (color, theme) => {
-  if (theme === 'dark') {
-    return isNearBlack(color)
-      ? lighten(color, colorGaps.edgeColor.highlight)
-      : darken(color, colorGaps.highlight);
-  }
+  return Object.keys(styleObj).reduce((acc, componentName) => {
+    const componentThemes = styleObj[componentName];
 
-  return isNearWhite(color)
-    ? darken(color, colorGaps.edgeColor.highlight)
-    : lighten(color, colorGaps.highlight);
+    return Object.assign(acc, {
+      [componentName]: Object.keys(componentThemes).reduce(
+        (res, theme) =>
+          Object.assign(res, {
+            [theme]: componentsThemeToStyle(componentThemes[theme]),
+          }),
+        {}
+      ),
+    });
+  }, {});
 };
 
-const genColor = (color, theme) => {
-  const mainColor = new Color(color.main || color);
+const themeToStyle = ({ globals, components }, themeName) => ({
+  globals: globalsThemeToStyle(globals, themeName),
+  components: createComponentsTheme(components),
+});
 
-  const res = {
-    main: mainColor.hex(),
-    dark: color.dark || generateDarkColor(mainColor, theme),
-    light: color.light || generateLightColor(mainColor, theme),
-    highlight: color.highlight || generateHighlightColor(mainColor, theme),
-    contrast: color.contrast || contrast(mainColor),
-  };
+// allows to generate css variables with nested fallbacks
+const useVar = (...varNames) => {
+  return varNames.reduceRight((acc, value) => {
+    if (value.startsWith('--')) return `var(${value}${acc ? `, ${acc}` : acc})`;
 
-  return res;
+    return `${value}${acc ? `, ${acc}` : acc}`;
+  }, '');
 };
 
-const genColors = (colors) => {
-  return Object.keys(colors).reduce((acc, colorName) => {
-    const currentColor = colors[colorName];
+const createHelperVars = (theme, prefix) => {
+  const res = transformTheme(theme, [], (path, value) => {
+    const modifiedPath = [...path];
+    const property = modifiedPath.splice(-1);
+    const varName = getCssVarName$1(prefix, property);
 
-    return Object.assign(acc, {
-      [colorName]: genColor(currentColor),
-    });
-  }, {});
+    const vars = { [property]: varName };
+    const useVars = { [property]: useVar(varName) };
+
+    return { theme: set({}, [...modifiedPath, varName], value), useVars, vars };
+  });
+
+  return [res.theme, res.useVars, res.vars];
 };
 
 const direction$1 = 'ltr';
@@ -1374,8 +1543,7 @@ const createCssVarsList$1 = (componentName, mappings) =>
 
 // on some cases we need a selector to be more specific than another
 // for this we have this fn that generate a class selector multiple times
-const createClassSelectorSpecifier$1 = (className, numOfRepeats) =>
-  Array(numOfRepeats).fill(`.${className}`).join('');
+const createClassSelectorSpecifier$1 = (className, numOfRepeats) => `.${className}`.repeat(numOfRepeats);
 
 const STYLE_OVERRIDE_ATTR_PREFIX$1 = 'st';
 
@@ -1462,18 +1630,22 @@ const createStyleMixin$1 =
 
       #createOverridesStyle() {
         if (this.#styleAttributes.length) {
-          const classSpecifier = createClassSelectorSpecifier$1(
+          let classSpecifier = createClassSelectorSpecifier$1(
             componentName,
-            CSS_SELECTOR_SPECIFIER_MULTIPLY,
+            CSS_SELECTOR_SPECIFIER_MULTIPLY
           );
+          const elementId = this.getAttribute('id');
+          if (elementId) {
+            // basically this is enough to make the selector more specific
+            // but just in case there is no id, we will also add the class multiple times
+            classSpecifier += `#${elementId}`;
+          }
 
-          this.#overrideStyleEle = injectStyle(
-            `:host(${classSpecifier}) {}`,
-            this.#rootElement,
-          );
+          this.#overrideStyleEle = injectStyle(`:host(${classSpecifier}) {}`, this.#rootElement);
         }
       }
 
+
       #setAttrOverride(attrName, value) {
         const style = this.#overrideStyleEle?.cssRules[0].style;
 
@@ -3377,7 +3549,7 @@ const createCssVarsList = (componentName, mappings) =>
 // on some cases we need a selector to be more specific than another
 // for this we have this fn that generate a class selector multiple times
 const createClassSelectorSpecifier = (className, numOfRepeats) =>
-  Array(numOfRepeats).fill(`.${className}`).join('');
+  `.${className}`.repeat(numOfRepeats);
 
 const STYLE_OVERRIDE_ATTR_PREFIX = 'st';
 
@@ -3453,10 +3625,16 @@ const createStyleMixin =
 
       #createOverridesStyle() {
         if (this.#styleAttributes.length) {
-          const classSpecifier = createClassSelectorSpecifier(
+          let classSpecifier = createClassSelectorSpecifier(
             componentName,
             CSS_SELECTOR_SPECIFIER_MULTIPLY$1
           );
+          const elementId = this.getAttribute('id');
+          if (elementId) {
+            // basically this is enough to make the selector more specific
+            // but just in case there is no id, we will also add the class multiple times
+            classSpecifier += `#${elementId}`;
+          }
 
           this.#overrideStyleEle = injectStyle(`:host(${classSpecifier}) {}`, this.#rootElement);
         }
@@ -4879,148 +5057,6 @@ var textFieldMappings = {
   inputIconColor: { ...inputIcon, property: 'color' },
 };
 
-const useHostExternalPadding = (cssVarList) => `
-    :host {
-        padding: calc(var(${cssVarList.inputOutlineWidth}) + var(${cssVarList.inputOutlineOffset}))
-    }
-`;
-
-const resetInputFieldUnderlayingBorder = (name) => `
-    ${name}::part(input-field)::after {
-        border: none;
-    }
-`;
-
-const resetInitialHeight = (name) => `
-    ${name}::before {
-		height: unset;
-	}
-`;
-
-const resetInputElement = (name) => `
-    ${name} > input {
-        -webkit-mask-image: none;
-        min-height: 0;
-        box-sizing: border-box;
-    }
-`;
-
-const resetInputContainer = (name) => `
-    ${name} {
-        margin: 0;
-        padding: 0;
-        width: 100%;
-        height: 100%;
-        box-sizing: border-box;
-    }
-`;
-
-const resetInputField = (name) => `
-    ${name}::part(input-field) {
-        overflow: hidden;
-        padding: 0;
-        box-shadow: none;
-    }
-`;
-
-const resetInputCursor = (name) => `
-    ${name} > label,
-    ${name}::part(label),
-    ${name}::part(required-indicator) {
-        cursor: pointer;
-    }
-`;
-
-const resetInputPlaceholder = (name, ele = 'input') => `
-    ${name}[disabled] > ${ele}:placeholder-shown,
-	${name}[readonly] > ${ele}:placeholder-shown {
-		opacity: 1;
-	}
-`;
-
-const resetInputAutoFill = (name, cssVarList) => `
-    ${name} input:-webkit-autofill,
-    ${name} input:-webkit-autofill::first-line,
-    ${name} input:-webkit-autofill:hover,
-    ${name} input:-webkit-autofill:active,
-    ${name} input:-webkit-autofill:focus {
-        -webkit-text-fill-color: var(${cssVarList.inputValueTextColor});
-        box-shadow: 0 0 0 var(${cssVarList.inputHeight}) var(${cssVarList.inputBackgroundColor}) inset;
-    }
-`;
-
-const resetInputFieldDefaultWidth = () => `
-    :host {
-        --vaadin-field-default-width: auto;
-        box-sizing: border-box;
-    }
-`;
-
-const resetInputReadonlyStyle = (name) => `
-    ${name}::part(input-field)::after {
-        opacity: 0;
-    }
-`;
-
-const resetInputFieldInvalidBackgroundColor = (name) => `
-    ${name}::part(input-field)::after {
-        background: none;
-    }
-`;
-
-const resetInputOverrides = (name, cssVarList) => `
-    ${resetInputContainer(name)}
-    ${resetInputCursor(name)}
-    ${resetInputPlaceholder(name)}
-    ${resetInputField(name)}
-    ${resetInputAutoFill(name, cssVarList)}
-    ${resetInputFieldInvalidBackgroundColor(name)}
-    ${resetInitialHeight(name)}
-    ${resetInputElement(name)}
-    ${resetInputFieldUnderlayingBorder(name)}
-`;
-
-// This function is used to support RTL correctly for input components.
-// It also fixes the error message to be displayed LTR since we currently
-// don't support RTL for error messages.
-const resetInputLabelPosition = (name) => `
-    :host ::part(error-message) {
-      direction: ltr;
-    }
-    :host([required]) ::part(required-indicator) {
-      width: 1em;
-      display: inline-flex;
-    }
-    :host([required]) ::part(required-indicator)::after {
-      position: static;
-    }
-    :host([has-label]) ::part(label) {
-      padding-right: 0;
-      padding-bottom: 0;
-      display: flex;
-      width: 100%;
-    }
-    ${name} [slot="label"] {
-      max-width: calc(100% - 1em);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      padding-bottom: 0.5em;
-    }
-`;
-
-const inputFloatingLabelStyle = () => {
-  return `
-  :host([label-type="floating"]) {
-    position: relative;
-  }
-  :host([label-type="floating"][has-label]) > ::part(label) {
-    z-index: 1;
-    padding: 0;
-    width: auto;
-  }
-  `;
-};
-
 const componentName$1c = getComponentName$1('text-field');
 
 const observedAttrs$4 = ['type', 'label-type', 'copy-to-clipboard'];
@@ -6734,7 +6770,8 @@ const container = {
     },
   },
 
-  borderRadius: {
+  // we must add & to override the root container style (applied via the styles page)
+  '&borderRadius': {
     sm: { [compVars$8.borderRadius]: globalRefs$B.radius.sm },
     md: { [compVars$8.borderRadius]: globalRefs$B.radius.md },
     lg: { [compVars$8.borderRadius]: globalRefs$B.radius.lg },
@@ -15959,6 +15996,31 @@ const CALENDAR_LABEL_TODAY = 'Today';
 
 const MOBILE_DEVICE_INTERACTION_TIMEOUT_MS = 150;
 
+// polyfill for safari Date API (which doesn't accept "YYYY-MM-DD" string as value)
+const newDate = (date, isUtcTime) => {
+  if (typeof date === 'number') {
+    return new Date(date);
+  }
+  if (typeof date === 'string') {
+    const d = new Date(date.replace(/-/g, '/'));
+    if (isUtcTime) {
+      return new Date(
+        Date.UTC(
+          d.getFullYear(),
+          d.getMonth(),
+          d.getDate(),
+          d.getHours(),
+          d.getMinutes(),
+          d.getSeconds(),
+          d.getMilliseconds()
+        )
+      );
+    }
+    return new Date(d);
+  }
+  return new Date();
+};
+
 const patterns = {
   MM: '(0?[1-9]|1[0-2])',
   DD: '(0?[1-9]|[12][0-9]|3[01])',
@@ -16030,31 +16092,6 @@ const formatEpoch = (epoch, format) => {
   return format.replace(/DD|MM|YYYY/g, (match) => parts[match]);
 };
 
-// polyfill for safari Date API (which doesn't accept "YYYY-MM-DD" string as value)
-const newDate = (date, isUtcTime) => {
-  if (typeof date === 'number') {
-    return new Date(date);
-  }
-  if (typeof date === 'string') {
-    const d = new Date(date.replace(/-/g, '/'));
-    if (isUtcTime) {
-      return new Date(
-        Date.UTC(
-          d.getFullYear(),
-          d.getMonth(),
-          d.getDate(),
-          d.getHours(),
-          d.getMinutes(),
-          d.getSeconds(),
-          d.getMilliseconds()
-        )
-      );
-    }
-    return new Date(d);
-  }
-  return new Date();
-};
-
 const getCurrentTime = () => newDate().getTime();
 const getFullYear = (epoch) => newDate(epoch).getFullYear().toString();
 const getMonth = (epoch) => (newDate(epoch).getMonth() + 1).toString();
@@ -23405,8 +23442,23 @@ exports.genColors = genColors;
 exports.getThemeRefs = getThemeRefs;
 exports.getThemeVars = getThemeVars;
 exports.globalsThemeToStyle = globalsThemeToStyle;
+exports.inputFloatingLabelStyle = inputFloatingLabelStyle;
+exports.resetInitialHeight = resetInitialHeight;
+exports.resetInputAutoFill = resetInputAutoFill;
+exports.resetInputContainer = resetInputContainer;
+exports.resetInputCursor = resetInputCursor;
+exports.resetInputElement = resetInputElement;
+exports.resetInputField = resetInputField;
+exports.resetInputFieldDefaultWidth = resetInputFieldDefaultWidth;
+exports.resetInputFieldInvalidBackgroundColor = resetInputFieldInvalidBackgroundColor;
+exports.resetInputFieldUnderlayingBorder = resetInputFieldUnderlayingBorder;
+exports.resetInputLabelPosition = resetInputLabelPosition;
+exports.resetInputOverrides = resetInputOverrides;
+exports.resetInputPlaceholder = resetInputPlaceholder;
+exports.resetInputReadonlyStyle = resetInputReadonlyStyle;
 exports.themeToCSSVarsObj = themeToCSSVarsObj;
 exports.themeToStyle = themeToStyle;
 exports.themeVars = themeVars;
+exports.useHostExternalPadding = useHostExternalPadding;
 exports.useVar = useVar;
 //# sourceMappingURL=index.cjs.js.map