@descope/web-components-ui 0.0.1

package/src/helpers/themeHelpers/colorsHelpers.js

@@ -0,0 +1,94 @@
+import Color from 'color';
+
+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);
+};
+
+export 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;
+};
+
+export const genColors = (colors) => {
+  return Object.keys(colors).reduce((acc, colorName) => {
+    const currentColor = colors[colorName];
+
+    return Object.assign(acc, {
+      [colorName]: genColor(currentColor),
+    });
+  }, {});
+};

package/src/helpers/themeHelpers/index.js

@@ -0,0 +1,175 @@
+import merge from 'lodash.merge';
+import { BASE_THEME_SECTION, DESCOPE_PREFIX, PORTAL_THEME_PREFIX } from '../../constants';
+import { isUrl, kebabCase } from '..';
+import { getComponentName, getCssVarName } from '../componentHelpers';
+
+const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
+
+// lodash.set alternative
+const set = (obj, path, value) => {
+  const pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g);
+
+  pathArray.reduce((acc, key, i) => {
+    if (acc[key] === undefined) acc[key] = {};
+    if (i === pathArray.length - 1) acc[key] = value;
+    return acc[key];
+  }, obj);
+
+  return obj;
+};
+
+const transformTheme = (theme, path, getTransformation) => {
+  return Object.entries(theme).reduce((acc, [key, val]) => {
+    if (val?.constructor !== Object) {
+      return merge(acc, getTransformation(path.concat(key), val));
+    }
+    return merge(acc, transformTheme(val, [...path, key], getTransformation));
+  }, {});
+};
+
+const stringifyArray = (strArr) =>
+  strArr.map((str) => (str.includes(' ') ? `"${str}"` : str)).join(', ');
+
+const getCssVarValue = (val) => {
+  switch (true) {
+    case Array.isArray(val):
+      return stringifyArray(val);
+    case isUrl(val):
+      return `url(${val})`;
+    default:
+      return val;
+  }
+};
+
+export const themeToCSSVarsObj = (theme) =>
+  transformTheme(theme, [], (path, val) => ({
+    [getVarName(path)]: getCssVarValue(val),
+  }));
+
+export const getThemeRefs = (theme, prefix) =>
+  transformTheme(theme, [], (path) =>
+    set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)
+  );
+
+export const getThemeVars = (theme, prefix) =>
+  transformTheme(theme, [], (path) => set({}, path, getVarName(prefix ? [prefix, ...path] : path)));
+
+export const globalsThemeToStyle = (theme, themeName = '') => {
+  const style = Object.entries(themeToCSSVarsObj(theme)).reduce(
+    (acc, entry) => `${acc}${entry.join(':')};\n`,
+    ''
+  );
+
+  if (!themeName) return style;
+
+  return `*[data-theme="${themeName}"] {${style}}`;
+};
+
+const componentsThemeToStyleObj = (componentsTheme) =>
+  transformTheme(componentsTheme, [], (path, val) => {
+    const [component, ...restPath] = path;
+    const property = restPath.pop();
+    const componentName = getComponentName(component);
+
+    if (property === 'undefined') {
+      // eslint-disable-next-line no-console
+      console.warn(componentName, `theme value: "${val}" is mapped to an invalid property`);
+    }
+
+    // we need a support for portal components theme (e.g. overlay)
+    // this allows us to generate those themes under different sections
+    // if the theme has root level attribute that starts with #
+    // we are generating a new theme
+    let themeName = BASE_THEME_SECTION;
+
+    if (restPath[0] && restPath[0].startsWith(PORTAL_THEME_PREFIX)) {
+      themeName = restPath.shift();
+    }
+
+    // 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(section.replace(/^_/, ''))}="true"]`;
+
+      const nextSection = restPath[idx + 1];
+
+      if (typeof nextSection !== 'string' || nextSection.startsWith('_')) {
+        // eslint-disable-next-line no-console
+        console.error(
+          'theme generator',
+          `your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`
+        );
+        return acc;
+      }
+
+      return `${acc}[${kebabCase(section)}="${restPath.splice(idx + 1, 1).join('')}"]`;
+    }, '');
+
+    const selector = `:host${attrsSelector ? `(${attrsSelector})` : ''}`;
+
+    return {
+      [componentName]: {
+        [themeName]: {
+          [selector]: {
+            [property]: getCssVarValue(val),
+          },
+        },
+      },
+    };
+  });
+
+const componentsThemeToStyle = (componentsTheme) =>
+  Object.entries(componentsTheme).reduce(
+    (acc, [selector, vars]) =>
+      `${acc}${selector} { \n${Object.entries(vars)
+        .map(([key, val]) => `${key}: ${val}`)
+        .join(';\n')} \n}\n\n`,
+    ''
+  );
+
+export 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]) }),
+        {}
+      ),
+    });
+  }, {});
+};
+
+export const themeToStyle = ({ globals, components }, themeName) => ({
+  globals: globalsThemeToStyle(globals, themeName),
+  components: createComponentsTheme(components),
+});
+
+// allows to generate css variables with nested fallbacks
+export const useVar = (...varNames) => {
+  return varNames.reduceRight((acc, value) => {
+    if (value.startsWith('--')) return `var(${value}${acc ? `, ${acc}` : acc})`;
+
+    return `${value}${acc ? `, ${acc}` : acc}`;
+  }, '');
+};
+
+export const createHelperVars = (theme, prefix) => {
+  const res = transformTheme(theme, [], (path, value) => {
+    const modifiedPath = [...path];
+    const property = modifiedPath.splice(-1);
+    const varName = getCssVarName(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];
+};
+
+export { componentsThemeManager } from 'common/theme-helpers';

package/src/helpers/themeHelpers/resetHelpers.js

@@ -0,0 +1,144 @@
+export const useHostExternalPadding = (cssVarList) => `
+    :host {
+        padding: calc(var(${cssVarList.inputOutlineWidth}) + var(${cssVarList.inputOutlineOffset}))
+    }
+`;
+
+export const resetInputFieldUnderlayingBorder = (name) => `
+    ${name}::part(input-field)::after {
+        border: none;
+    }
+`;
+
+export const resetInitialHeight = (name) => `
+    ${name}::before {
+		height: unset;
+	}
+`;
+
+export const resetInputElement = (name) => `
+    ${name} > input {
+        -webkit-mask-image: none;
+        min-height: 0;
+        box-sizing: border-box;
+    }
+`;
+
+export const resetInputContainer = (name) => `
+    ${name} {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+    }
+`;
+
+export const resetInputField = (name) => `
+    ${name}::part(input-field) {
+        overflow: hidden;
+        padding: 0;
+        box-shadow: none;
+    }
+`;
+
+export const resetInputCursor = (name) => `
+    ${name} > label,
+    ${name}::part(label),
+    ${name}::part(required-indicator) {
+        cursor: pointer;
+    }
+`;
+
+export const resetInputPlaceholder = (name, ele = 'input') => `
+    ${name}[disabled] > ${ele}:placeholder-shown,
+	${name}[readonly] > ${ele}:placeholder-shown {
+		opacity: 1;
+	}
+`;
+
+export 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;
+    }
+`;
+
+export const resetInputFieldDefaultWidth = () => `
+    :host {
+        --vaadin-field-default-width: auto;
+        box-sizing: border-box;
+    }
+`;
+
+export const resetInputReadonlyStyle = (name) => `
+    ${name}::part(input-field)::after {
+        opacity: 0;
+    }
+`;
+
+export const resetInputFieldInvalidBackgroundColor = (name) => `
+    ${name}::part(input-field)::after {
+        background: none;
+    }
+`;
+
+export 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.
+export 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;
+    }
+`;
+
+export const inputFloatingLabelStyle = () => {
+  return `
+  :host([label-type="floating"]) {
+    position: relative;
+  }
+  :host([label-type="floating"][has-label]) [slot="label"] {
+    padding: 0;
+  }
+  :host([label-type="floating"][has-label]) > ::part(label) {
+    z-index: 1;
+    padding: 0;
+    width: auto;
+  }
+  `;
+};

package/src/index.cjs.js

@@ -0,0 +1,60 @@
+// CJS is used by screen-renderer-service, we cannot export client stuff here (except HTMLElement class),
+
+export * from './helpers/themeHelpers';
+export * from './helpers/themeHelpers/colorsHelpers';
+export { defaultTheme, themeVars } from './theme';
+export { default as darkTheme } from './darkTheme';
+
+export { CheckboxClass } from './components/boolean-fields/descope-checkbox/CheckboxClass';
+export { SwitchToggleClass } from './components/boolean-fields/descope-switch-toggle/SwitchToggleClass';
+export { ButtonClass } from './components/descope-button/ButtonClass';
+export { LoaderLinearClass } from './components/descope-loader-linear/LoaderLinearClass';
+export { LoaderRadialClass } from './components/descope-loader-radial/LoaderRadialClass';
+export { ContainerClass } from './components/descope-container/ContainerClass';
+export { DividerClass } from './components/descope-divider/DividerClass';
+export { EmailFieldClass } from './components/descope-email-field/EmailFieldClass';
+export { LinkClass } from './components/descope-link/LinkClass';
+export { LogoClass } from './components/descope-logo/LogoClass';
+export { TotpImageClass } from './components/descope-totp-image/TotpImageClass';
+export { NotpImageClass } from './components/descope-notp-image/NotpImageClass';
+export { NumberFieldClass } from './components/descope-number-field/NumberFieldClass';
+export { PasscodeClass } from './components/descope-passcode/PasscodeClass';
+export { PasswordClass } from './components/descope-password/PasswordClass';
+export { EnrichedTextClass } from './components/descope-enriched-text/EnrichedTextClass';
+export { TextAreaClass } from './components/descope-text-area/TextAreaClass';
+export { TextFieldClass } from './components/descope-text-field/TextFieldClass';
+export { ImageClass } from './components/descope-image/ImageClass';
+export { PhoneFieldClass } from './components/phone-fields/descope-phone-field/PhoneFieldClass';
+export { PhoneFieldInputBoxClass } from './components/phone-fields/descope-phone-input-box-field/PhoneFieldInputBoxClass';
+export { NewPasswordClass } from './components/descope-new-password/NewPasswordClass';
+export { RecaptchaClass } from './components/descope-recaptcha/RecaptchaClass';
+export { UploadFileClass } from './components/descope-upload-file/UploadFileClass';
+export { ButtonSelectionGroupClass } from './components/button-selection-group-fields/descope-button-selection-group/ButtonSelectionGroupClass';
+export { ButtonMultiSelectionGroupClass } from './components/button-selection-group-fields/descope-button-multi-selection-group/ButtonMultiSelectionGroupClass';
+export { ButtonSelectionGroupItemClass } from './components/button-selection-group-fields/descope-button-selection-group-item/ButtonSelectionGroupItemClass';
+export { ModalClass } from './components/descope-modal/ModalClass';
+export { NotificationClass } from './components/descope-notification/NotificationClass';
+export { GridClass } from './components/descope-grid/GridClass';
+export { BadgeClass } from './components/descope-badge/BadgeClass';
+export { MultiSelectComboBoxClass } from './components/descope-multi-select-combo-box/MultiSelectComboBoxClass';
+export { UserAttributeClass } from './components/descope-user-attribute/UserAttributeClass';
+export { UserAuthMethodClass } from './components/descope-user-auth-method/UserAuthMethodClass';
+export { MappingsFieldClass } from './components/mapping-fields/descope-mappings-field/MappingsFieldClass';
+export { SamlGroupMappingsClass } from './components/mapping-fields/descope-saml-group-mappings/SamlGroupMappingsClass';
+export { PolicyValidationClass } from './components/descope-policy-validation/PolicyValidationClass';
+export { CodeSnippetClass } from './components/descope-code-snippet/CodeSnippetClass';
+export { RadioGroupClass } from './components/descope-radio-group/RadioGroupClass';
+export { RadioButtonClass } from './components/descope-radio-group/RadioButtonClass';
+export { DateFieldClass } from './components/descope-date-field/DateFieldClass';
+export { CalendarClass } from './components/descope-date-field/descope-calendar/CalendarClass';
+export { ListClass } from './components/descope-list/ListClass';
+export { ListItemClass } from './components/descope-list/ListItemClass';
+export { AppsListClass } from './components/descope-apps-list/AppsListClass';
+export { ScopesListClass } from './components/descope-scopes-list/ScopesListClass';
+export { ThirdPartyAppLogoClass } from './components/descope-third-party-app-logo/ThirdPartyAppLogoClass';
+export { SecurityQuestionsSetupClass } from './components/descope-security-questions-setup/SecurityQuestionsSetupClass';
+export { SecurityQuestionsVerifyClass } from './components/descope-security-questions-verify/SecurityQuestionsVerifyClass';
+export { HybridFieldClass } from './components/descope-hybrid-field/HybridFieldClass';
+export { AlertClass } from './components/descope-alert/AlertClass';
+
+/* INJECT_COMPONENTS */

package/src/index.d.ts

@@ -0,0 +1,72 @@
+export {
+  globalsThemeToStyle,
+  createComponentsTheme,
+  themeToStyle,
+  componentsThemeManager,
+} from './helpers/themeHelpers';
+export { genColor } from './helpers/themeHelpers/colorsHelpers';
+export { defaultTheme, themeVars } from './theme';
+export { default as darkTheme } from './darkTheme';
+export { ButtonClass } from './components/descope-button';
+export { CheckboxClass } from './components/boolean-fields/descope-checkbox';
+export { SwitchToggleClass } from './components/boolean-fields/descope-switch-toggle';
+export { LoaderLinearClass } from './components/descope-loader-linear';
+export { LoaderRadialClass } from './components/descope-loader-radial';
+export { ContainerClass } from './components/descope-container';
+export { DividerClass } from './components/descope-divider';
+export { EmailFieldClass } from './components/descope-email-field';
+export { LinkClass } from './components/descope-link';
+export { LogoClass } from './components/descope-logo';
+export { TotpImageClass } from './components/descope-totp-image';
+export { NotpImageClass } from './components/descope-notp-image';
+export { NumberFieldClass } from './components/descope-number-field';
+export { PasscodeClass } from './components/descope-passcode';
+export { PasswordClass } from './components/descope-password';
+export { TextClass } from './components/descope-text';
+export { EnrichedTextClass } from './components/descope-enriched-text';
+export { TextAreaClass } from './components/descope-text-area';
+export { TextFieldClass } from './components/descope-text-field';
+export { ImageClass } from './components/descope-image';
+export { PhoneFieldClass } from './components/phone-fields/descope-phone-field';
+export { PhoneFieldInputBoxClass } from './components/phone-fields/descope-phone-input-box-field';
+export { NewPasswordClass } from './components/descope-new-password';
+export { RecaptchaClass } from './components/descope-recaptcha';
+export { UploadFileClass } from './components/descope-upload-file';
+export { ButtonSelectionGroupClass } from './components/button-selection-group-fields/descope-button-selection-group/ButtonSelectionGroupClass';
+export { ButtonMultiSelectionGroupClass } from './components/button-selection-group-fields/descope-button-multi-selection-group/ButtonMultiSelectionGroupClass';
+export { GridClass } from './components/descope-grid/GridClass';
+export { GridTextColumnClass } from './components/descope-grid/descope-grid-text-column/index';
+export { GridSelectionColumnClass } from './components/descope-grid/descope-grid-selection-column/index';
+export { ModalClass } from './components/descope-modal/ModalClass';
+export { NotificationClass } from './components/descope-notification/';
+export { BadgeClass } from './components/descope-badge/';
+export { MultiSelectComboBoxClass } from './components/descope-multi-select-combo-box/';
+export { MappingsFieldClass } from './components/mapping-fields/descope-mappings-field/';
+export { SamlGroupMappingsClass } from './components/mapping-fields/descope-saml-group-mappings/';
+export { PolicyValidationClass } from './components/descope-policy-validation/';
+export { CodeSnippetClass } from './components/descope-code-snippet/';
+export { CalendarClass } from './components/descope-date-field/descope-calendar';
+export { DateFieldClass } from './components/descope-date-field/';
+export { HybridFieldClass } from './components/descope-hybrid-field';
+
+export type Theme = {
+  globals: {
+    colors: Record<string, string>;
+    fonts: Record<string, any>;
+    typography: Record<string, any>;
+    shadow: Record<string, string>;
+    spacing: Record<string, string>;
+    radius: Record<string, string>;
+    border: Record<string, string>;
+  };
+  components: {
+    button: Record<string, any>;
+    textField: Record<string, any>;
+    logo: Record<string, any>;
+    container: Record<string, any>;
+    link: Record<string, any>;
+    text: Record<string, any>;
+    inputWrapper: Record<string, any>;
+    buttonSelectionGroupItem: Record<string, any>;
+  };
+};

package/src/index.js

@@ -0,0 +1,62 @@
+export * from './components/descope-button';
+export * from './components/boolean-fields/descope-checkbox';
+export * from './components/boolean-fields/descope-switch-toggle';
+export * from './components/descope-loader-linear';
+export * from './components/descope-loader-radial';
+export * from './components/descope-container';
+export * from './components/descope-date-field/descope-calendar';
+export * from './components/descope-date-field';
+export * from './components/descope-divider';
+export * from './components/descope-email-field';
+export * from './components/descope-link';
+export * from './components/descope-logo';
+export * from './components/descope-totp-image';
+export * from './components/descope-notp-image';
+export * from './components/descope-number-field';
+export * from './components/descope-passcode';
+export * from './components/descope-password';
+export * from './components/descope-enriched-text';
+export * from './components/descope-text-area';
+export * from './components/descope-text-field';
+export * from './components/descope-image';
+export * from './components/phone-fields/descope-phone-field';
+export * from './components/phone-fields/descope-phone-input-box-field';
+export * from './components/descope-new-password';
+export * from './components/descope-recaptcha';
+export * from './components/descope-upload-file';
+export * from './components/button-selection-group-fields/descope-button-selection-group';
+export * from './components/button-selection-group-fields/descope-button-multi-selection-group';
+export * from './components/descope-grid';
+export * from './components/descope-combo-box';
+export * from './components/descope-multi-select-combo-box';
+export * from './components/descope-badge';
+export * from './components/descope-modal';
+export * from './components/descope-notification';
+export * from './components/descope-icon';
+export * from './components/mapping-fields/descope-mappings-field';
+export * from './components/descope-user-attribute';
+export * from './components/descope-user-auth-method';
+export * from './components/mapping-fields/descope-saml-group-mappings';
+export * from './components/descope-policy-validation';
+export * from './components/descope-code-snippet';
+export * from './components/descope-radio-group';
+export * from './components/descope-list';
+export * from './components/descope-apps-list';
+export * from './components/descope-scopes-list';
+export * from './components/descope-third-party-app-logo';
+export * from './components/descope-security-questions-setup';
+export * from './components/descope-security-questions-verify';
+export * from './components/descope-hybrid-field';
+export * from './components/descope-alert';
+
+export {
+  globalsThemeToStyle,
+  createComponentsTheme,
+  themeToStyle,
+  componentsThemeManager,
+} from './helpers/themeHelpers';
+export { genColor } from './helpers/themeHelpers/colorsHelpers';
+export { defaultTheme, themeVars } from './theme';
+export { default as darkTheme } from './darkTheme';
+
+/* INJECT_COMPONENTS */

package/src/index.umd.js

@@ -0,0 +1,28 @@
+const { componentsThemeManager } = require('./helpers/themeHelpers');
+
+const components = import.meta.webpackContext('./components', {
+  recursive: true,
+  regExp: /index.js$/,
+  mode: 'lazy',
+  chunkName: '[request]',
+  prefetch: true,
+});
+
+// all components must be in a folder with the component name, and have an index.js file
+// e.g. ./descope-button/index.js
+module.exports = components.keys().reduce((acc, key) => {
+  // eslint-disable-next-line no-useless-escape
+  const componentName = key.replace(/.*?([^\/]+)\/index\.js$/, '$1');
+
+  if (componentName.endsWith('-internal')) {
+    return acc;
+  }
+
+  acc[componentName] = () => components(key);
+
+  return acc;
+}, {});
+
+module.exports.componentsThemeManager = componentsThemeManager;
+
+/* INJECT_COMPONENTS */

package/src/mixins/activableMixin.js

@@ -0,0 +1,14 @@
+export const activeableMixin = (superclass) =>
+  class ActiveableMixinClass extends superclass {
+    init() {
+      super.init?.();
+
+      this.baseElement.addEventListener('mousedown', (e) => {
+        e.preventDefault();
+        this.setAttribute('active', 'true');
+        window.addEventListener('mouseup', () => this.removeAttribute('active'), {
+          once: true,
+        });
+      });
+    }
+  };

package/src/mixins/changeMixin.js

@@ -0,0 +1,22 @@
+import { createDispatchEvent } from '../helpers/mixinsHelpers';
+
+export const changeMixin = (superclass) =>
+  class ChangeMixinClass extends superclass {
+    #dispatchChange = createDispatchEvent.bind(this, 'change');
+
+    init() {
+      super.init?.();
+      this.prevValue = this.value;
+
+      this.addEventListener('change', (e) => {
+        e.stopPropagation();
+      });
+
+      this.addEventListener('blur', () => {
+        if (this.value !== this.prevValue) {
+          this.#dispatchChange();
+          this.prevValue = this.value;
+        }
+      });
+    }
+  };