@descope/web-components-ui 1.0.367 → 1.0.369

package/dist/index.esm.js

@@ -1401,7 +1401,9 @@ const getFileExtension = (path) => {
   return match ? match[1] : null;
 };
 
-const isSvg = (src) => getFileExtension(src) === 'svg' || src.indexOf('image/svg+xml') > -1;
+const base64Prefix = 'data:image/svg+xml;base64,';
+
+const isBase64Svg = (src) => src.startsWith(base64Prefix);
 
 const createImgEle = (src) => {
   const ele = document.createElement('img');
@@ -1418,12 +1420,17 @@ const createSvgEle = (text) => {
 const createIcon = async (src) => {
   try {
     let ele;
-
-    if (isSvg(src)) {
+    if (isBase64Svg(src)) {
+      // handle base64 source
+      const svgXml = atob(src.slice(base64Prefix.length));
+      ele = createSvgEle(svgXml);
+    } else if (getFileExtension(src) === 'svg') {
+      // handle urls
       const fetchedSrc = await fetch(src);
       const text = await fetchedSrc.text();
       ele = createSvgEle(text);
     } else {
+      // handle binary
       ele = createImgEle(src);
     }
 
@@ -11877,132 +11884,509 @@ const RadioGroupClass = compose(
 customElements.define(componentName$4, RadioGroupClass);
 customElements.define(componentName$5, RadioButtonClass);
 
-const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
+const activeableMixin = (superclass) =>
+  class ActiveableMixinClass extends superclass {
+    init() {
+      super.init?.();
 
-// lodash.set alternative
-const set = (obj, path, value) => {
-  const pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g);
+      this.baseElement.addEventListener('mousedown', (e) => {
+        e.preventDefault();
+        this.setAttribute('active', 'true');
+        window.addEventListener('mouseup', () => this.removeAttribute('active'), {
+          once: true,
+        });
+      });
+    }
+  };
 
-  pathArray.reduce((acc, key, i) => {
-    if (acc[key] === undefined) acc[key] = {};
-    if (i === pathArray.length - 1) acc[key] = value;
-    return acc[key];
-  }, obj);
+const componentName$3 = getComponentName('list-item');
 
-  return obj;
-};
+const customMixin$1 = (superclass) =>
+  class ListItemMixinClass extends superclass {
+    constructor() {
+      super();
 
-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));
+      this.attachShadow({ mode: 'open' }).innerHTML = `
+      <style>
+        /*css*/
+        slot {
+            width: 100%;
+            display: flex;
+            overflow: hidden;
+            box-sizing: border-box;
+        }
+        :host {
+          display: block;
+        }
+
+        /*!css*/
+      </style>
+      <slot></slot>
+    `;
     }
-    return merge(acc, transformTheme(val, [...path, key], getTransformation));
-  }, {});
-};
+  };
 
-const stringifyArray = (strArr) =>
-  strArr.map((str) => (str.includes(' ') ? `"${str}"` : str)).join(', ');
+const ListItemClass = compose(
+  createStyleMixin({
+    mappings: {
+      padding: {},
+      backgroundColor: {},
+      borderColor: {},
+      borderStyle: {},
+      borderWidth: {},
+      borderRadius: {},
+      outline: {},
+      cursor: {},
+      gap: {},
+      maxWidth: { selector: () => ':host' },
+      alignItems: {},
+      flexDirection: {},
+      transition: {},
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin,
+  customMixin$1,
+  activeableMixin
+)(createBaseClass({ componentName: componentName$3, baseSelector: 'slot' }));
 
-const getCssVarValue = (val) => {
-  switch (true) {
-    case Array.isArray(val):
-      return stringifyArray(val);
-    case isUrl(val):
-      return `url(${val})`;
-    default:
-      return val;
-  }
-};
+const componentName$2 = getComponentName('list');
 
-const themeToCSSVarsObj = (theme) =>
-  transformTheme(theme, [], (path, val) => ({
-    [getVarName(path)]: getCssVarValue(val),
-  }));
+class RawList extends createBaseClass({ componentName: componentName$2, baseSelector: '.wrapper' }) {
+  static get observedAttributes() {
+    return ['variant'];
+  }
 
-const getThemeRefs = (theme, prefix) =>
-  transformTheme(theme, [], (path) =>
-    set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)
-  );
+  constructor() {
+    super();
 
-const getThemeVars = (theme, prefix) =>
-  transformTheme(theme, [], (path) => set({}, path, getVarName(prefix ? [prefix, ...path] : path)));
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+	    /*css*/
+      .wrapper {
+        overflow: auto;
+        display: grid;
+        max-height: 100%;
+        width: 100%;
+      }
 
-const globalsThemeToStyle = (theme, themeName = '') => {
-  const style = Object.entries(themeToCSSVarsObj(theme)).reduce(
-    (acc, entry) => `${acc}${entry.join(':')};\n`,
-    ''
-  );
+      :host {
+        display: inline-flex;
+        width: 100%;
+      }
+      slot[name="empty-state"] {
+        justify-content: center;
+        align-items: center;
+        display: flex;
+        flex-grow: 1;
+      }
 
-  if (!themeName) return style;
+      :host slot[name="empty-state"] {
+        display: none;
+      }
+      :host([empty]) slot[name="empty-state"] {
+        display: flex;
+      }
+      ::slotted(:not([slot])) {
+        width: 100%;
+      }
+      /*!css*/
+		</style>
 
-  return `*[data-theme="${themeName}"] {${style}}`;
-};
+    <div class="wrapper">
+    <slot></slot>
+    <slot name="empty-state">
+      No item...
+    </slot>
+    </div>
+	`;
+  }
 
-const componentsThemeToStyleObj = (componentsTheme) =>
-  transformTheme(componentsTheme, [], (path, val) => {
-    const [component, ...restPath] = path;
-    const property = restPath.pop();
-    const componentName = getComponentName(component);
+  get items() {
+    return this.shadowRoot.querySelector('slot').assignedElements();
+  }
 
-    if (property === 'undefined') {
-      // eslint-disable-next-line no-console
-      console.warn(componentName, `theme value: "${val}" is mapped to an invalid property`);
+  #handleEmptyState() {
+    if (this.items.length === 0) {
+      this.setAttribute('empty', 'true');
+    } else {
+      this.removeAttribute('empty');
     }
+  }
 
-    // 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;
+  get variant() {
+    return this.getAttribute('variant') || 'list';
+  }
 
-    if (restPath[0] && restPath[0].startsWith(PORTAL_THEME_PREFIX)) {
-      themeName = restPath.shift();
-    }
+  #handleItemsVariant() {
+    this.items.forEach((item) => {
+      let listItem = item;
+      if (listItem.localName !== ListItemClass.componentName) {
+        listItem = item.querySelector(ListItemClass.componentName);
+      }
 
-    // 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 listItemVariant = this.variant === 'tiles' ? 'tile' : 'row';
+      listItem.setAttribute('variant', listItemVariant);
+    });
+  }
 
-      const nextSection = restPath[idx + 1];
+  init() {
+    super.init?.();
 
-      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;
-      }
+    // we want new items to get the size
+    observeChildren(this, () => {
+      this.#handleEmptyState();
+      this.#handleItemsVariant();
+    });
+  }
 
-      return `${acc}[${kebabCase(section)}="${restPath.splice(idx + 1, 1).join('')}"]`;
-    }, '');
+  attributeChangedCallback(name, oldValue, newValue) {
+    super.attributeChangedCallback?.(name, oldValue, newValue);
 
-    const selector = `:host${attrsSelector ? `(${attrsSelector})` : ''}`;
+    if (newValue === oldValue) return;
 
-    return {
-      [componentName]: {
-        [themeName]: {
-          [selector]: {
-            [property]: getCssVarValue(val),
-          },
-        },
-      },
-    };
-  });
+    if (name === 'variant') {
+      this.#handleItemsVariant();
+    }
+  }
+}
 
-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`,
-    ''
-  );
+const ListClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { selector: () => ':host', property: 'width' },
+      maxHeight: { selector: () => ':host' },
+      minHeight: {},
+      verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
+      horizontalPadding: [{ property: 'padding-left' }, { property: 'padding-right' }],
+      hostDirection: { selector: () => ':host', property: 'direction' },
+      fontFamily: {},
+      gap: {},
 
-const createComponentsTheme = (componentsTheme) => {
-  const styleObj = componentsThemeToStyleObj(componentsTheme);
+      backgroundColor: {},
+      borderRadius: {},
+      borderColor: {},
+      borderStyle: {},
+      borderWidth: {},
+
+      boxShadow: {},
+      gridTemplateColumns: {},
+      maxItemsWidth: { selector: () => '::slotted(:not([slot]))', property: 'max-width' },
+      minItemsWidth: { selector: () => '::slotted(:not([slot]))', property: 'min-width' },
+      itemsHorizontalAlign: { selector: () => '::slotted(*)', property: 'justify-self' },
+      emptyStateTextColor: { selector: () => 'slot[name="empty-state"]', property: 'color' },
+      emptyStateTextFontFamily: {
+        selector: () => 'slot[name="empty-state"]',
+        property: 'font-family',
+      },
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawList);
+
+customElements.define(componentName$2, ListClass);
+customElements.define(componentName$3, ListItemClass);
+
+const defaultValidateSchema = () => true;
+const defaultItemRenderer = (item) => `<pre>${JSON.stringify(item, null, 4)}</pre>`;
+
+const createTemplate = (templateString) => {
+  const template = document.createElement('template');
+  template.innerHTML = templateString;
+
+  return template;
+};
+
+const getTemplateContent = (templateOrString) => {
+  if (typeof templateOrString === 'string') {
+    return createTemplate(templateOrString).content;
+  }
+
+  if (templateOrString instanceof HTMLTemplateElement) {
+    return templateOrString.content;
+  }
+
+  // eslint-disable-next-line no-console
+  console.error('Invalid template', templateOrString);
+  return null;
+};
+
+const createDynamicDataMixin =
+  ({
+    itemRenderer = defaultItemRenderer,
+    validateSchema = defaultValidateSchema,
+    slotName,
+    rerenderAttrsList = [],
+  }) =>
+  (superclass) =>
+    class DynamicDataMixinClass extends superclass {
+      #data = [];
+
+      // eslint-disable-next-line class-methods-use-this
+      #validateSchema(data) {
+        if (!validateSchema) return true;
+
+        const validation = validateSchema(data);
+        if (validation === true) return true;
+
+        // eslint-disable-next-line no-console
+        console.error('Data schema validation failed', validation || '');
+
+        return false;
+      }
+
+      #removeOldItems() {
+        const selector = slotName ? `*[slot="${slotName}"]` : ':not([slot])';
+        this.baseElement.querySelectorAll(selector).forEach((item) => item.remove());
+      }
+
+      #renderItems() {
+        this.#removeOldItems();
+        this.data.forEach((item, index) => {
+          const content = getTemplateContent(itemRenderer(item, index, this));
+          this.baseElement.appendChild(content?.cloneNode(true));
+        });
+      }
+
+      set data(value) {
+        if (this.#validateSchema(value)) {
+          this.#data = value;
+          this.#renderItems();
+        }
+      }
+
+      get data() {
+        return this.#data;
+      }
+
+      init() {
+        super.init?.();
+
+        if (rerenderAttrsList.length) {
+          observeAttributes(this, () => this.#renderItems(), { includeAttrs: rerenderAttrsList });
+        } else {
+          this.#renderItems();
+        }
+      }
+    };
+
+const componentName$1 = getComponentName('apps-list');
+
+const limitAbbreviation = (str, limit = 3) =>
+  str
+    .trim()
+    .split(' ')
+    .splice(0, limit)
+    .map((s) => s[0]?.toUpperCase())
+    .join('');
+
+const itemRenderer = ({ name, icon, url }, _, ref) => `
+  <a href="${url}" target="_blank" title="${url}">
+    <descope-list-item>
+    <descope-avatar
+      img="${icon}"
+      display-name="${name}"
+      abbr=${limitAbbreviation(name)}
+      size=${ref.size}
+    ></descope-avatar>
+    <descope-text
+      variant="body1"
+      mode="primary"
+    >${name}</descope-text>
+    </descope-list-item>
+  </a>
+`;
+
+const customMixin = (superclass) =>
+  class AppsListMixinClass extends superclass {
+    get size() {
+      return this.getAttribute('size') || 'sm';
+    }
+  };
+
+const AppsListClass = compose(
+  createStyleMixin({
+    mappings: {
+      maxHeight: { selector: () => ':host' },
+      minHeight: { selector: () => ':host' },
+      hostDirection: { selector: () => ':host', property: 'direction' },
+      itemsFontWeight: {
+        selector: TextClass.componentName,
+        property: TextClass.cssVarList.fontWeight,
+      },
+      itemsFontSize: {
+        selector: TextClass.componentName,
+        property: TextClass.cssVarList.fontSize,
+      },
+      itemsTextAlign: {
+        selector: TextClass.componentName,
+        property: TextClass.cssVarList.textAlign,
+      },
+    },
+  }),
+  createDynamicDataMixin({ itemRenderer, rerenderAttrsList: ['size'] }),
+  draggableMixin,
+  componentNameValidationMixin,
+  customMixin
+)(
+  createProxy({
+    slots: ['empty-state'],
+    wrappedEleName: 'descope-list',
+    excludeAttrsSync: ['tabindex', 'class'],
+    componentName: componentName$1,
+    style: () => `
+      :host {
+        width: 100%;
+        display: inline-flex;
+      }
+
+      descope-text::part(text-wrapper) {
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+
+      a {
+        text-decoration: none;
+      }
+
+      descope-text {
+        ${TextClass.cssVarList.hostDirection}: var(${AppsListClass.cssVarList.hostDirection});
+      }
+    `,
+  })
+);
+
+customElements.define(componentName$1, AppsListClass);
+
+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;
+  }
+};
+
+const themeToCSSVarsObj = (theme) =>
+  transformTheme(theme, [], (path, val) => ({
+    [getVarName(path)]: getCssVarValue(val),
+  }));
+
+const getThemeRefs = (theme, prefix) =>
+  transformTheme(theme, [], (path) =>
+    set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)
+  );
+
+const getThemeVars = (theme, prefix) =>
+  transformTheme(theme, [], (path) => set({}, path, getVarName(prefix ? [prefix, ...path] : path)));
+
+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`,
+    ''
+  );
+
+const createComponentsTheme = (componentsTheme) => {
+  const styleObj = componentsThemeToStyleObj(componentsTheme);
 
   return Object.keys(styleObj).reduce((acc, componentName) => {
     const componentThemes = styleObj[componentName];
@@ -12444,7 +12828,7 @@ var button$1 = /*#__PURE__*/Object.freeze({
   vars: vars$L
 });
 
-const componentName$3 = getComponentName('input-wrapper');
+const componentName = getComponentName('input-wrapper');
 const globalRefs$u = getThemeRefs(globals);
 
 const [theme$1, refs, vars$K] = createHelperVars(
@@ -12553,7 +12937,7 @@ const [theme$1, refs, vars$K] = createHelperVars(
       backgroundColor: globalRefs$u.colors.surface.main,
     },
   },
-  componentName$3
+  componentName
 );
 
 var inputWrapper = /*#__PURE__*/Object.freeze({
@@ -14358,262 +14742,61 @@ const radioGroup = {
     [vars$5.buttonsSpacing]: 'space-between',
   },
 
-  _disabled: {
-    [vars$5.itemsLabelColor]: globalRefs$4.colors.surface.light,
-  },
-};
-
-var radioGroup$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: radioGroup,
-  radioGroup: radioGroup,
-  vars: vars$5
-});
-
-const vars$4 = RadioButtonClass.cssVarList;
-const globalRefs$3 = getThemeRefs(globals);
-
-const radioButton = {
-  [vars$4.fontFamily]: refs.fontFamily,
-  [vars$4.radioSize]: 'calc(1em + 6px)',
-  [vars$4.radioMargin]: 'auto 4px',
-  [vars$4.radioCheckedSize]: `calc(var(${vars$4.radioSize})/5)`,
-  [vars$4.radioCheckedColor]: globalRefs$3.colors.surface.light,
-  [vars$4.radioBackgroundColor]: globalRefs$3.colors.surface.light,
-  [vars$4.radioBorderColor]: 'none',
-  [vars$4.radioBorderWidth]: 0,
-
-  _checked: {
-    [vars$4.radioBackgroundColor]: globalRefs$3.colors.surface.contrast,
-  },
-
-  _hover: {
-    cursor: 'pointer',
-  },
-
-  size: {
-    xs: {
-      [vars$4.fontSize]: '12px',
-    },
-    sm: {
-      [vars$4.fontSize]: '14px',
-    },
-    md: {
-      [vars$4.fontSize]: '16px',
-    },
-    lg: {
-      [vars$4.fontSize]: '18px',
-    },
-  },
-};
-
-var radioButton$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: radioButton,
-  radioButton: radioButton,
-  vars: vars$4
-});
-
-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,
-        });
-      });
-    }
-  };
-
-const componentName$2 = getComponentName('list-item');
-
-const customMixin$1 = (superclass) =>
-  class ListItemMixinClass extends superclass {
-    constructor() {
-      super();
-
-      this.attachShadow({ mode: 'open' }).innerHTML = `
-      <style>
-        /*css*/
-        slot {
-            width: 100%;
-            display: flex;
-            overflow: hidden;
-            box-sizing: border-box;
-        }
-        :host {
-          display: block;
-        }
-
-        /*!css*/
-      </style>
-      <slot></slot>
-    `;
-    }
-  };
-
-const ListItemClass = compose(
-  createStyleMixin({
-    mappings: {
-      padding: {},
-      backgroundColor: {},
-      borderColor: {},
-      borderStyle: {},
-      borderWidth: {},
-      borderRadius: {},
-      outline: {},
-      cursor: {},
-      gap: {},
-      maxWidth: { selector: () => ':host' },
-      alignItems: {},
-      flexDirection: {},
-      transition: {},
-    },
-  }),
-  draggableMixin,
-  componentNameValidationMixin,
-  customMixin$1,
-  activeableMixin
-)(createBaseClass({ componentName: componentName$2, baseSelector: 'slot' }));
-
-const componentName$1 = getComponentName('list');
-
-class RawList extends createBaseClass({ componentName: componentName$1, baseSelector: '.wrapper' }) {
-  static get observedAttributes() {
-    return ['variant'];
-  }
-
-  constructor() {
-    super();
-
-    this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
-	    /*css*/
-      .wrapper {
-        overflow: auto;
-        display: grid;
-        max-height: 100%;
-        width: 100%;
-      }
-
-      :host {
-        display: inline-flex;
-        width: 100%;
-      }
-      slot[name="empty-state"] {
-        justify-content: center;
-        align-items: center;
-        display: flex;
-        flex-grow: 1;
-      }
-
-      :host slot[name="empty-state"] {
-        display: none;
-      }
-      :host([empty]) slot[name="empty-state"] {
-        display: flex;
-      }
-      ::slotted(:not([slot])) {
-        width: 100%;
-      }
-      /*!css*/
-		</style>
-
-    <div class="wrapper">
-    <slot></slot>
-    <slot name="empty-state">
-      No item...
-    </slot>
-    </div>
-	`;
-  }
-
-  get items() {
-    return this.shadowRoot.querySelector('slot').assignedElements();
-  }
-
-  #handleEmptyState() {
-    if (this.items.length === 0) {
-      this.setAttribute('empty', 'true');
-    } else {
-      this.removeAttribute('empty');
-    }
-  }
-
-  get variant() {
-    return this.getAttribute('variant') || 'list';
-  }
-
-  #handleItemsVariant() {
-    this.items.forEach((item) => {
-      let listItem = item;
-      if (listItem.localName !== ListItemClass.componentName) {
-        listItem = item.querySelector(ListItemClass.componentName);
-      }
-
-      const listItemVariant = this.variant === 'tiles' ? 'tile' : 'row';
-      listItem.setAttribute('variant', listItemVariant);
-    });
-  }
-
-  init() {
-    super.init?.();
-
-    // we want new items to get the size
-    observeChildren(this, () => {
-      this.#handleEmptyState();
-      this.#handleItemsVariant();
-    });
-  }
+  _disabled: {
+    [vars$5.itemsLabelColor]: globalRefs$4.colors.surface.light,
+  },
+};
 
-  attributeChangedCallback(name, oldValue, newValue) {
-    super.attributeChangedCallback?.(name, oldValue, newValue);
+var radioGroup$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: radioGroup,
+  radioGroup: radioGroup,
+  vars: vars$5
+});
 
-    if (newValue === oldValue) return;
+const vars$4 = RadioButtonClass.cssVarList;
+const globalRefs$3 = getThemeRefs(globals);
 
-    if (name === 'variant') {
-      this.#handleItemsVariant();
-    }
-  }
-}
+const radioButton = {
+  [vars$4.fontFamily]: refs.fontFamily,
+  [vars$4.radioSize]: 'calc(1em + 6px)',
+  [vars$4.radioMargin]: 'auto 4px',
+  [vars$4.radioCheckedSize]: `calc(var(${vars$4.radioSize})/5)`,
+  [vars$4.radioCheckedColor]: globalRefs$3.colors.surface.light,
+  [vars$4.radioBackgroundColor]: globalRefs$3.colors.surface.light,
+  [vars$4.radioBorderColor]: 'none',
+  [vars$4.radioBorderWidth]: 0,
 
-const ListClass = compose(
-  createStyleMixin({
-    mappings: {
-      hostWidth: { selector: () => ':host', property: 'width' },
-      maxHeight: { selector: () => ':host' },
-      minHeight: {},
-      verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
-      horizontalPadding: [{ property: 'padding-left' }, { property: 'padding-right' }],
-      hostDirection: { selector: () => ':host', property: 'direction' },
-      fontFamily: {},
-      gap: {},
+  _checked: {
+    [vars$4.radioBackgroundColor]: globalRefs$3.colors.surface.contrast,
+  },
 
-      backgroundColor: {},
-      borderRadius: {},
-      borderColor: {},
-      borderStyle: {},
-      borderWidth: {},
+  _hover: {
+    cursor: 'pointer',
+  },
 
-      boxShadow: {},
-      gridTemplateColumns: {},
-      maxItemsWidth: { selector: () => '::slotted(:not([slot]))', property: 'max-width' },
-      minItemsWidth: { selector: () => '::slotted(:not([slot]))', property: 'min-width' },
-      itemsHorizontalAlign: { selector: () => '::slotted(*)', property: 'justify-self' },
-      emptyStateTextColor: { selector: () => 'slot[name="empty-state"]', property: 'color' },
-      emptyStateTextFontFamily: {
-        selector: () => 'slot[name="empty-state"]',
-        property: 'font-family',
-      },
+  size: {
+    xs: {
+      [vars$4.fontSize]: '12px',
     },
-  }),
-  draggableMixin,
-  componentNameValidationMixin
-)(RawList);
+    sm: {
+      [vars$4.fontSize]: '14px',
+    },
+    md: {
+      [vars$4.fontSize]: '16px',
+    },
+    lg: {
+      [vars$4.fontSize]: '18px',
+    },
+  },
+};
+
+var radioButton$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: radioButton,
+  radioButton: radioButton,
+  vars: vars$4
+});
 
 const globalRefs$2 = getThemeRefs(globals);
 
@@ -14621,7 +14804,7 @@ const compVars = ListClass.cssVarList;
 
 const [helperTheme, helperRefs, helperVars] = createHelperVars(
   { shadowColor: '#00000020' },
-  componentName$1
+  componentName$2
 );
 
 const { shadowColor } = helperRefs;
@@ -14714,177 +14897,6 @@ var listItem = /*#__PURE__*/Object.freeze({
   vars: vars$2
 });
 
-const defaultValidateSchema = () => true;
-const defaultItemRenderer = (item) => `<pre>${JSON.stringify(item, null, 4)}</pre>`;
-
-const createTemplate = (templateString) => {
-  const template = document.createElement('template');
-  template.innerHTML = templateString;
-
-  return template;
-};
-
-const getTemplateContent = (templateOrString) => {
-  if (typeof templateOrString === 'string') {
-    return createTemplate(templateOrString).content;
-  }
-
-  if (templateOrString instanceof HTMLTemplateElement) {
-    return templateOrString.content;
-  }
-
-  // eslint-disable-next-line no-console
-  console.error('Invalid template', templateOrString);
-  return null;
-};
-
-const createDynamicDataMixin =
-  ({
-    itemRenderer = defaultItemRenderer,
-    validateSchema = defaultValidateSchema,
-    slotName,
-    rerenderAttrsList = [],
-  }) =>
-  (superclass) =>
-    class DynamicDataMixinClass extends superclass {
-      #data = [];
-
-      // eslint-disable-next-line class-methods-use-this
-      #validateSchema(data) {
-        if (!validateSchema) return true;
-
-        const validation = validateSchema(data);
-        if (validation === true) return true;
-
-        // eslint-disable-next-line no-console
-        console.error('Data schema validation failed', validation || '');
-
-        return false;
-      }
-
-      #removeOldItems() {
-        const selector = slotName ? `*[slot="${slotName}"]` : ':not([slot])';
-        this.baseElement.querySelectorAll(selector).forEach((item) => item.remove());
-      }
-
-      #renderItems() {
-        this.#removeOldItems();
-        this.data.forEach((item, index) => {
-          const content = getTemplateContent(itemRenderer(item, index, this));
-          this.baseElement.appendChild(content?.cloneNode(true));
-        });
-      }
-
-      set data(value) {
-        if (this.#validateSchema(value)) {
-          this.#data = value;
-          this.#renderItems();
-        }
-      }
-
-      get data() {
-        return this.#data;
-      }
-
-      init() {
-        super.init?.();
-
-        if (rerenderAttrsList.length) {
-          observeAttributes(this, () => this.#renderItems(), { includeAttrs: rerenderAttrsList });
-        } else {
-          this.#renderItems();
-        }
-      }
-    };
-
-const componentName = getComponentName('apps-list');
-
-const limitAbbreviation = (str, limit = 3) =>
-  str
-    .trim()
-    .split(' ')
-    .splice(0, limit)
-    .map((s) => s[0]?.toUpperCase())
-    .join('');
-
-const itemRenderer = ({ name, icon, url }, _, ref) => `
-  <a href="${url}" target="_blank" title="${url}">
-    <descope-list-item>
-    <descope-avatar
-      img="${icon}"
-      display-name="${name}"
-      abbr=${limitAbbreviation(name)}
-      size=${ref.size}
-    ></descope-avatar>
-    <descope-text
-      variant="body1"
-      mode="primary"
-    >${name}</descope-text>
-    </descope-list-item>
-  </a>
-`;
-
-const customMixin = (superclass) =>
-  class AppsListMixinClass extends superclass {
-    get size() {
-      return this.getAttribute('size') || 'sm';
-    }
-  };
-
-const AppsListClass = compose(
-  createStyleMixin({
-    mappings: {
-      maxHeight: { selector: () => ':host' },
-      minHeight: { selector: () => ':host' },
-      hostDirection: { selector: () => ':host', property: 'direction' },
-      itemsFontWeight: {
-        selector: TextClass.componentName,
-        property: TextClass.cssVarList.fontWeight,
-      },
-      itemsFontSize: {
-        selector: TextClass.componentName,
-        property: TextClass.cssVarList.fontSize,
-      },
-      itemsTextAlign: {
-        selector: TextClass.componentName,
-        property: TextClass.cssVarList.textAlign,
-      },
-    },
-  }),
-  createDynamicDataMixin({ itemRenderer, rerenderAttrsList: ['size'] }),
-  draggableMixin,
-  componentNameValidationMixin,
-  customMixin
-)(
-  createProxy({
-    slots: ['empty-state'],
-    wrappedEleName: 'descope-list',
-    excludeAttrsSync: ['tabindex', 'class'],
-    componentName,
-    style: () => `
-      :host {
-        width: 100%;
-        display: inline-flex;
-      }
-
-      descope-text::part(text-wrapper) {
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-      }
-
-      a {
-        text-decoration: none;
-      }
-
-      descope-text {
-        ${TextClass.cssVarList.hostDirection}: var(${AppsListClass.cssVarList.hostDirection});
-      }
-    `,
-  })
-);
-
 const vars$1 = AppsListClass.cssVarList;
 const globalRefs = getThemeRefs(globals);
 
@@ -15031,5 +15043,5 @@ const darkTheme = merge({}, defaultTheme, {
   },
 });
 
-export { AvatarClass, BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CheckboxClass, CodeSnippetClass, ComboBoxClass, ContainerClass, DividerClass, EmailFieldClass, EnrichedTextClass, GridClass, IconClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, MappingsFieldClass, ModalClass, MultiSelectComboBoxClass, NewPasswordClass, NotificationClass, NotpImageClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, PolicyValidationClass, RadioGroupClass, RecaptchaClass, SamlGroupMappingsClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, UserAttributeClass, UserAuthMethodClass, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
+export { AppsListClass, AvatarClass, BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CheckboxClass, CodeSnippetClass, ComboBoxClass, ContainerClass, DividerClass, EmailFieldClass, EnrichedTextClass, GridClass, IconClass, ImageClass, LinkClass, ListClass, LoaderLinearClass, LoaderRadialClass, LogoClass, MappingsFieldClass, ModalClass, MultiSelectComboBoxClass, NewPasswordClass, NotificationClass, NotpImageClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, PolicyValidationClass, RadioGroupClass, RecaptchaClass, SamlGroupMappingsClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, UserAttributeClass, UserAuthMethodClass, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
 //# sourceMappingURL=index.esm.js.map