@descope/flow-components 2.2.15 → 2.2.17

package/dist/index.cjs.js

@@ -93927,6 +93927,14 @@ descope-enriched-text {
 	      [compVars$4.hostWidth]: '98px',
 	      [compVars$4.hostHeight]: '98px',
 	    },
+	    xl: {
+	      [compVars$4.hostWidth]: '120px',
+	      [compVars$4.hostHeight]: '120px',
+	    },
+	    '2xl': {
+	      [compVars$4.hostWidth]: '140px',
+	      [compVars$4.hostHeight]: '140px',
+	    },
 	  },
 	};
 
@@ -94150,9 +94158,9 @@ descope-enriched-text {
 	  vars: vars$x
 	});
 
-	var deleteIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEgMTZDMSAxNy4xIDEuOSAxOCAzIDE4SDExQzEyLjEgMTggMTMgMTcuMSAxMyAxNlY0SDFWMTZaTTMgNkgxMVYxNkgzVjZaTTEwLjUgMUw5LjUgMEg0LjVMMy41IDFIMFYzSDE0VjFIMTAuNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPgo8L3N2Zz4K";
+	var deleteIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNMSAxNkMxIDE3LjEgMS45IDE4IDMgMThIMTFDMTIuMSAxOCAxMyAxNy4xIDEzIDE2VjRIMVYxNlpNMyA2SDExVjE2SDNWNlpNMTAuNSAxTDkuNSAwSDQuNUwzLjUgMUgwVjNIMTRWMUgxMC41WiIgZmlsbD0iY3VycmVudGNvbG9yIi8+Cjwvc3ZnPg==";
 
-	var editIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjAwMDIgMC45OTIxNDlDMTAuMDAwMiAxLjAxNjE1IDEwLjAwMDIgMS4wMTYxNSAxMC4wMDAyIDEuMDE2MTVMOC4yMjQxOSAzLjAwODE1SDIuOTkyMTlDMi40NjQxOSAzLjAwODE1IDIuMDA4MTkgMy40NDAxNSAyLjAwODE5IDMuOTkyMTVWMTIuMDA4MkMyLjAwODE5IDEyLjUzNjIgMi40NDAxOSAxMi45OTIyIDIuOTkyMTkgMTIuOTkyMkg1LjUzNjE5QzUuODQ4MTkgMTMuMDQwMiA2LjE2MDE5IDEzLjA0MDIgNi40NzIxOSAxMi45OTIySDExLjAwODJDMTEuNTM2MiAxMi45OTIyIDExLjk5MjIgMTIuNTYwMiAxMS45OTIyIDEyLjAwODJWNy43ODQxNkwxMy45MzYyIDUuNjI0MTVMMTQuMDA4MiA1LjY3MjE1VjExLjk4NDJDMTQuMDA4MiAxMy42NjQyIDEyLjY2NDIgMTUuMDA4MiAxMS4wMDgyIDE1LjAwODJIMy4wMTYxOUMxLjMzNjE5IDE1LjAwODIgLTAuMDA3ODEyNSAxMy42NjQyIC0wLjAwNzgxMjUgMTEuOTg0MlYzLjk5MjE1Qy0wLjAwNzgxMjUgMi4zMzYxNSAxLjMzNjE5IDAuOTkyMTQ5IDMuMDE2MTkgMC45OTIxNDlIMTAuMDAwMlpNMTEuMjcyMiAyLjYyNDE1TDEyLjYxNjIgNC4xMTIxNUw3LjcyMDE5IDkuNjgwMTZDNy41MDQxOSA5LjkyMDE2IDYuODMyMTkgMTAuMjMyMiA1LjY4MDE5IDEwLjYxNjJDNS42NTYxOSAxMC42NDAyIDUuNjA4MTkgMTAuNjQwMiA1LjU2MDE5IDEwLjYxNjJDNS40NjQxOSAxMC41OTIyIDUuMzkyMTkgMTAuNDcyMiA1LjQ0MDE5IDEwLjM3NjJDNS43NTIxOSA5LjI0ODE2IDYuMDQwMTkgOC41NTIxNiA2LjI1NjE5IDguMzEyMTZMMTEuMjcyMiAyLjYyNDE1Wk0xMS45MjAyIDEuODU2MTVMMTMuMjg4MiAwLjMyMDE0OUMxMy42NDgyIC0wLjA4Nzg1MTYgMTQuMjcyMiAtMC4xMTE4NTIgMTQuNjgwMiAwLjI3MjE0OUMxNS4wODgyIDAuNjMyMTQ5IDE1LjExMjIgMS4yODAxNSAxNC43NTIyIDEuNjg4MTVMMTMuMjY0MiAzLjM2ODE1TDExLjkyMDIgMS44NTYxNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPgo8L3N2Zz4K";
+	var editIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNMTAuMDAwMiAwLjk5MjE0OUMxMC4wMDAyIDEuMDE2MTUgMTAuMDAwMiAxLjAxNjE1IDEwLjAwMDIgMS4wMTYxNUw4LjIyNDE5IDMuMDA4MTVIMi45OTIxOUMyLjQ2NDE5IDMuMDA4MTUgMi4wMDgxOSAzLjQ0MDE1IDIuMDA4MTkgMy45OTIxNVYxMi4wMDgyQzIuMDA4MTkgMTIuNTM2MiAyLjQ0MDE5IDEyLjk5MjIgMi45OTIxOSAxMi45OTIySDUuNTM2MTlDNS44NDgxOSAxMy4wNDAyIDYuMTYwMTkgMTMuMDQwMiA2LjQ3MjE5IDEyLjk5MjJIMTEuMDA4MkMxMS41MzYyIDEyLjk5MjIgMTEuOTkyMiAxMi41NjAyIDExLjk5MjIgMTIuMDA4MlY3Ljc4NDE2TDEzLjkzNjIgNS42MjQxNUwxNC4wMDgyIDUuNjcyMTVWMTEuOTg0MkMxNC4wMDgyIDEzLjY2NDIgMTIuNjY0MiAxNS4wMDgyIDExLjAwODIgMTUuMDA4MkgzLjAxNjE5QzEuMzM2MTkgMTUuMDA4MiAtMC4wMDc4MTI1IDEzLjY2NDIgLTAuMDA3ODEyNSAxMS45ODQyVjMuOTkyMTVDLTAuMDA3ODEyNSAyLjMzNjE1IDEuMzM2MTkgMC45OTIxNDkgMy4wMTYxOSAwLjk5MjE0OUgxMC4wMDAyWk0xMS4yNzIyIDIuNjI0MTVMMTIuNjE2MiA0LjExMjE1TDcuNzIwMTkgOS42ODAxNkM3LjUwNDE5IDkuOTIwMTYgNi44MzIxOSAxMC4yMzIyIDUuNjgwMTkgMTAuNjE2MkM1LjY1NjE5IDEwLjY0MDIgNS42MDgxOSAxMC42NDAyIDUuNTYwMTkgMTAuNjE2MkM1LjQ2NDE5IDEwLjU5MjIgNS4zOTIxOSAxMC40NzIyIDUuNDQwMTkgMTAuMzc2MkM1Ljc1MjE5IDkuMjQ4MTYgNi4wNDAxOSA4LjU1MjE2IDYuMjU2MTkgOC4zMTIxNkwxMS4yNzIyIDIuNjI0MTVaTTExLjkyMDIgMS44NTYxNUwxMy4yODgyIDAuMzIwMTQ5QzEzLjY0ODIgLTAuMDg3ODUxNiAxNC4yNzIyIC0wLjExMTg1MiAxNC42ODAyIDAuMjcyMTQ5QzE1LjA4ODIgMC42MzIxNDkgMTUuMTEyMiAxLjI4MDE1IDE0Ljc1MjIgMS42ODgxNUwxMy4yNjQyIDMuMzY4MTVMMTEuOTIwMiAxLjg1NjE1WiIgZmlsbD0iY3VycmVudGNvbG9yIi8+Cjwvc3ZnPgo=";
 
 	const componentName$x = getComponentName$1('user-attribute');
 	class RawUserAttribute extends createBaseClass({
@@ -94170,10 +94178,10 @@ descope-enriched-text {
           <div class="btn-wrapper">
             <descope-badge mode="default" bordered="true" size="xs"></descope-badge>
             <descope-button size="xs" data-id="edit-btn" square="true" variant="link" mode="primary">
-              <vaadin-icon src=${editIcon}></vaadin-icon>
+              <slot name="edit-icon"></slot>
             </descope-button>
             <descope-button size="xs" data-id="delete-btn" square="true" variant="link" mode="primary">
-              <vaadin-icon src=${deleteIcon}></vaadin-icon>
+              <slot name="delete-icon"></slot>
             </descope-button>
           </div>
         </div>
@@ -94187,16 +94195,18 @@ descope-enriched-text {
           container-type: inline-size;
 				}
 
-        vaadin-icon {
-          color: currentcolor;
-        }
-
         .root {
           display: flex;
           width: 100%;
           height: 100%;
           align-items: center;
         }
+        
+        ::slotted(*) {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
 
         @container (max-width: 529px) {
           .root {
@@ -94336,6 +94346,22 @@ descope-enriched-text {
 	    this.editButton.addEventListener('click', () =>
 	      this.dispatchEvent(new CustomEvent('edit-clicked', { bubbles: true, composed: true }))
 	    );
+
+	    this.setDefaultChildren();
+	  }
+
+	  #addIcon(src, slotName) {
+	    const icon = document.createElement('descope-icon');
+	    icon.setAttribute('src', src);
+	    icon.setAttribute('src-dark', src);
+	    icon.setAttribute('slot', slotName);
+	    this.appendChild(icon);
+	  }
+
+	  setDefaultChildren() {
+	    if (this.children.length) return;
+	    this.#addIcon(deleteIcon, 'delete-icon');
+	    this.#addIcon(editIcon, 'edit-icon');
 	  }
 
 	  static get observedAttributes() {
@@ -97979,6 +98005,9 @@ descope-enriched-text {
 	        selector: () => '::slotted(:not([slot]))',
 	        property: 'min-width',
 	      },
+	      maxRowItems: {
+	        property: 'max-row-items',
+	      },
 	      itemsHorizontalAlign: {
 	        selector: () => '::slotted(*)',
 	        property: 'justify-self',
@@ -98000,7 +98029,7 @@ descope-enriched-text {
 	const componentName$m = getComponentName('apps-list');
 
 	const itemRenderer$4 = ({ name, icon, url }, _, ref) => `
-  <a ${url ? `href="${url}" title="${url}"` : ''} target="_blank">
+  <a ${url ? `href="${url}" title="${url}"` : ''} ${ref.openInSameWindow ? '' : 'target="_blank"'}>
     <descope-list-item>
     <div class="avatar-wrapper">
       <descope-avatar
@@ -98031,6 +98060,10 @@ descope-enriched-text {
 	    get logoSize() {
 	      return this.getAttribute('logo-size');
 	    }
+
+	    get openInSameWindow() {
+	      return this.getAttribute('open-in-same-window') === 'true';
+	    }
 	  };
 
 	const AppsListClass = compose(
@@ -98039,6 +98072,14 @@ descope-enriched-text {
 	      maxHeight: { selector: () => ':host' },
 	      minHeight: { selector: () => ':host' },
 	      hostDirection: { selector: () => ':host', property: 'direction' },
+	      gap: {
+	        selector: ListClass.componentName,
+	        property: ListClass.cssVarList.gap,
+	      },
+	      maxRowItems: {
+	        selector: ListClass.componentName,
+	        property: ListClass.cssVarList.maxRowItems,
+	      },
 	      itemsFontWeight: {
 	        selector: TextClass.componentName,
 	        property: TextClass.cssVarList.fontWeightOverride,
@@ -98055,6 +98096,10 @@ descope-enriched-text {
 	        selector: ListItemClass.componentName,
 	        property: ListItemClass.cssVarList.backgroundColor,
 	      },
+	      itemHoverBackgroundColor: {
+	        selector: `${ListItemClass.componentName}:hover`,
+	        property: ListItemClass.cssVarList.backgroundColor,
+	      },
 	      backgroundColor: {
 	        selector: ListClass.componentName,
 	        property: ListClass.cssVarList.backgroundColorOverride,
@@ -98081,14 +98126,25 @@ descope-enriched-text {
 	      },
 	      itemAlignment: [
 	        { selector: () => '.avatar-wrapper', property: 'text-align' },
-	        { selector: TextClass.componentName, property: TextClass.cssVarList.textAlign },
-	      ]
+	        {
+	          selector: TextClass.componentName,
+	          property: TextClass.cssVarList.textAlign,
+	        },
+	      ],
 	    },
 	  }),
-	  createDynamicDataMixin$1({ itemRenderer: itemRenderer$4, rerenderAttrsList: ['size', 'item-text-variant', 'logo-size'] }),
+	  createDynamicDataMixin$1({
+	    itemRenderer: itemRenderer$4,
+	    rerenderAttrsList: [
+	      'size',
+	      'item-text-variant',
+	      'logo-size',
+	      'open-in-same-window',
+	    ],
+	  }),
 	  draggableMixin$1,
 	  componentNameValidationMixin$1,
-	  customMixin$2
+	  customMixin$2,
 	)(
 	  createProxy$1({
 	    slots: ['empty-state'],
@@ -98126,7 +98182,7 @@ descope-enriched-text {
         width: 100%;
       }
     `,
-	  })
+	  }),
 	);
 
 	const vars$l = AppsListClass.cssVarList;
@@ -98138,6 +98194,7 @@ descope-enriched-text {
 	  [vars$l.itemsTextAlign]: 'start',
 	  [vars$l.hostDirection]: globalRefs$b.direction,
 	  [vars$l.maxHeight]: defaultHeight,
+	  [vars$l.itemHoverBackgroundColor]: globalRefs$b.colors.surface.highlight,
 
 	  _empty: {
 	    [vars$l.minHeight]: defaultHeight,
@@ -98198,7 +98255,7 @@ descope-enriched-text {
 
 	const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars$1(
 	  { shadowColor: '#00000020' },
-	  componentName$n
+	  componentName$n,
 	);
 
 	const { shadowColor: shadowColor$2 } = helperRefs$2;
@@ -98220,6 +98277,7 @@ descope-enriched-text {
 	  [compVars$3.maxHeight]: '100%',
 	  [compVars$3.hostDirection]: globalRefs$a.direction,
 	  [compVars$3.minItemsWidth]: '150px',
+	  [compVars$3.maxRowItems]: '1000', // effectively no limit
 
 	  _empty: {
 	    [compVars$3.minHeight]: '150px',
@@ -98229,13 +98287,33 @@ descope-enriched-text {
 
 	  variant: {
 	    tiles: {
-	      [compVars$3.gridTemplateColumns]: `repeat(auto-fit, minmax(min(${useVar$1(
-	        compVars$3.minItemsWidth
-	      )}, 100%), 1fr))`,
+	      [compVars$3.gridTemplateColumns]: `repeat(auto-fit, minmax(
+        max(
+            min(${useVar$1(compVars$3.minItemsWidth)}, 100%),
+                calc((100% - (${useVar$1(compVars$3.maxRowItems)} - 1) * ${useVar$1(compVars$3.gap)}) / ${useVar$1(compVars$3.maxRowItems)})),
+        1fr))`,
 	      [compVars$3.maxItemsWidth]: '200px',
 	      [compVars$3.itemsHorizontalAlign]: 'center',
 	    },
 	  },
+
+	  gap: {
+	    xs: {
+	      [compVars$3.gap]: globalRefs$a.spacing.xs,
+	    },
+	    sm: {
+	      [compVars$3.gap]: globalRefs$a.spacing.sm,
+	    },
+	    md: {
+	      [compVars$3.gap]: globalRefs$a.spacing.md,
+	    },
+	    lg: {
+	      [compVars$3.gap]: globalRefs$a.spacing.lg,
+	    },
+	    xl: {
+	      [compVars$3.gap]: globalRefs$a.spacing.xl,
+	    },
+	  },
 	};
 
 	const vars$k = {
@@ -101663,7 +101741,6 @@ descope-enriched-text {
 	  init() {
 	    super.init();
 
-
 	    this.icon.addEventListener('click', this.onCopy.bind(this));
 
 	    forwardAttrs(this, this.iconWrapper, { includeAttrs: ['variant', 'mode'] });
@@ -101688,7 +101765,7 @@ descope-enriched-text {
 	  onReadOnly(isReadOnly) {
 	    this.icon.classList.toggle('readonly', isReadOnly);
 	  }
-	 
+
 	  attributeChangedCallback(attrName, oldValue, newValue) {
 	    super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
@@ -101709,20 +101786,20 @@ descope-enriched-text {
 	        { selector: () => ':host', property: 'direction' },
 	        {
 	          selector: () => TextClass.componentName,
-	          property: TextClass.cssVarList.hostDirection
+	          property: TextClass.cssVarList.hostDirection,
 	        },
 	      ],
 	      textAlign: { selector: () => '.list', property: 'align-items' },
 	      iconColor: { selector: () => 'vaadin-icon', property: 'color' },
 	      iconSize: { selector: () => 'vaadin-icon', property: 'font-size' },
 	      iconGap: { selector: () => '.wrapper', property: 'gap' },
-	      bulletGap: { selector: () => 'descope-text span', property: 'gap' }
+	      bulletGap: { selector: () => 'descope-text span', property: 'gap' },
 	    },
 	  }),
 	  createDynamicDataMixin$1({
 	    itemRenderer: itemRenderer$2,
 	    rerenderAttrsList: ['variant', 'mode'],
-	    targetSelector: '.list'
+	    targetSelector: '.list',
 	  }),
 	  draggableMixin$1,
 	  componentNameValidationMixin$1,
@@ -103656,7 +103733,7 @@ const Icon = ({ icon, noColor, ...props }) => {
     if (icons[icon]) {
         return (React__default.default.createElement("descope-icon", { src: icons[icon], ...(noColor && { 'st-fill': 'currentColor' }), ...props }));
     }
-    return React__default.default.createElement("descope-icon", { "fill-color": noColor, src: icon });
+    return React__default.default.createElement("descope-icon", { "fill-color": noColor, src: icon, ...props });
 };
 
 const Tooltip = React__default.default.forwardRef(({ text, hideDelay = 0, hoverDelay = 0, children, readonly, staticDisplay, ...props }, ref) => (React__default.default.createElement("descope-tooltip", { text: text, "hide-delay": hideDelay, "hover-delay": hoverDelay, readonly: readonly, "static-display": staticDisplay, ref: ref, ...props }, children)));
@@ -103792,6 +103869,9 @@ const defaultProps = {
     'policy-label': 'Passwords must have:',
     // in the future, 'active-policies' can be injected in runtime
     'active-policies': [],
+    /* these patterns are cloned in the orchestration service (context.go file)
+    * make sure to update both places when changing it
+    */
     // non-user-editable patterns
     'data-password-policy-pattern-minlength': '^.{{{value}},}$',
     'data-password-policy-pattern-lowercase': '[a-z]',
@@ -103814,6 +103894,9 @@ const defaultProps = {
 };
 const NewPassword = React__default.default.forwardRef((props, ref) => {
     const mergedProps = { ...defaultProps, ...props };
+    /* this logic is cloned in the orchestration service (context.go file)
+    * make sure to update both places when changing it
+    */
     const availablePolicies = mergedProps?.['active-policies']?.map((id) => ({
         id,
         message: mergedProps[`data-password-policy-message-${id}`],
@@ -104003,7 +104086,9 @@ const UserAuthMethod = React__default.default.forwardRef(({ methodIcon, buttonIc
     React__default.default.createElement(Icon, { icon: methodIcon, slot: "method-icon", noColor: true }),
     React__default.default.createElement(Icon, { icon: buttonIcon, slot: "button-icon", noColor: true, width: "1em", height: "1em" }))));
 
-const UserAttribute = React__default.default.forwardRef(({ required = false, ...props }, ref) => (React__default.default.createElement("descope-user-attribute", { required: required, ...props, ref: ref })));
+const UserAttribute = React__default.default.forwardRef(({ required = false, deleteIconLight, deleteIconDark, editIconLight, editIconDark, ...props }, ref) => (React__default.default.createElement("descope-user-attribute", { required: required, ...props, ref: ref },
+    React__default.default.createElement(Icon, { icon: deleteIconLight, "src-dark": deleteIconDark, slot: "delete-icon" }),
+    React__default.default.createElement(Icon, { icon: editIconLight, "src-dark": editIconDark, slot: "edit-icon" }))));
 
 const Avatar = React__default.default.forwardRef(({ size = 'md', editable = false, ...props }, ref) => (React__default.default.createElement("descope-avatar", { size: size, editable: editable, ...props, ref: ref })));
 

package/dist/index.d.ts

@@ -827,6 +827,10 @@ type Props$j = {
     label?: string;
     'full-width'?: boolean;
     required?: boolean;
+    deleteIconLight?: string;
+    editIconLight?: string;
+    deleteIconDark?: string;
+    editIconDark?: string;
 };
 declare global {
     namespace React.JSX {

package/dist/index.esm.js

@@ -149,7 +149,7 @@ const Icon = ({ icon, noColor, ...props }) => {
     if (icons[icon]) {
         return (React.createElement("descope-icon", { src: icons[icon], ...(noColor && { 'st-fill': 'currentColor' }), ...props }));
     }
-    return React.createElement("descope-icon", { "fill-color": noColor, src: icon });
+    return React.createElement("descope-icon", { "fill-color": noColor, src: icon, ...props });
 };
 
 const Tooltip = React.forwardRef(({ text, hideDelay = 0, hoverDelay = 0, children, readonly, staticDisplay, ...props }, ref) => (React.createElement("descope-tooltip", { text: text, "hide-delay": hideDelay, "hover-delay": hoverDelay, readonly: readonly, "static-display": staticDisplay, ref: ref, ...props }, children)));
@@ -285,6 +285,9 @@ const defaultProps = {
     'policy-label': 'Passwords must have:',
     // in the future, 'active-policies' can be injected in runtime
     'active-policies': [],
+    /* these patterns are cloned in the orchestration service (context.go file)
+    * make sure to update both places when changing it
+    */
     // non-user-editable patterns
     'data-password-policy-pattern-minlength': '^.{{{value}},}$',
     'data-password-policy-pattern-lowercase': '[a-z]',
@@ -307,6 +310,9 @@ const defaultProps = {
 };
 const NewPassword = React.forwardRef((props, ref) => {
     const mergedProps = { ...defaultProps, ...props };
+    /* this logic is cloned in the orchestration service (context.go file)
+    * make sure to update both places when changing it
+    */
     const availablePolicies = mergedProps?.['active-policies']?.map((id) => ({
         id,
         message: mergedProps[`data-password-policy-message-${id}`],
@@ -496,7 +502,9 @@ const UserAuthMethod = React.forwardRef(({ methodIcon, buttonIcon, ...props }, r
     React.createElement(Icon, { icon: methodIcon, slot: "method-icon", noColor: true }),
     React.createElement(Icon, { icon: buttonIcon, slot: "button-icon", noColor: true, width: "1em", height: "1em" }))));
 
-const UserAttribute = React.forwardRef(({ required = false, ...props }, ref) => (React.createElement("descope-user-attribute", { required: required, ...props, ref: ref })));
+const UserAttribute = React.forwardRef(({ required = false, deleteIconLight, deleteIconDark, editIconLight, editIconDark, ...props }, ref) => (React.createElement("descope-user-attribute", { required: required, ...props, ref: ref },
+    React.createElement(Icon, { icon: deleteIconLight, "src-dark": deleteIconDark, slot: "delete-icon" }),
+    React.createElement(Icon, { icon: editIconLight, "src-dark": editIconDark, slot: "edit-icon" }))));
 
 const Avatar = React.forwardRef(({ size = 'md', editable = false, ...props }, ref) => (React.createElement("descope-avatar", { size: size, editable: editable, ...props, ref: ref })));
 

package/dist/types/UserAttribute/UserAttribute.d.ts

@@ -7,6 +7,10 @@ type Props = {
     label?: string;
     'full-width'?: boolean;
     required?: boolean;
+    deleteIconLight?: string;
+    editIconLight?: string;
+    deleteIconDark?: string;
+    editIconDark?: string;
 };
 declare global {
     namespace React.JSX {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/flow-components",
-  "version": "2.2.15",
+  "version": "2.2.17",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -60,7 +60,7 @@
     "eslint-config-standard": "17.1.0",
     "eslint-import-resolver-typescript": "4.4.4",
     "eslint-plugin-import": "2.32.0",
-    "eslint-plugin-jest": "29.2.1",
+    "eslint-plugin-jest": "29.4.0",
     "eslint-plugin-jest-dom": "5.5.0",
     "eslint-plugin-jest-formatting": "3.1.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
@@ -76,10 +76,10 @@
     "jest-environment-jsdom": "30.2.0",
     "lint-staged": "^16.0.0",
     "postcss": "^8.4.14",
-    "prettier": "3.7.3",
+    "prettier": "3.7.4",
     "pretty-quick": "^4.0.0",
-    "react": "19.2.0",
-    "react-dom": "19.2.0",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
     "rollup": "^4.0.0",
     "rollup-plugin-auto-external": "^2.0.0",
     "rollup-plugin-copy": "^3.4.0",
@@ -96,7 +96,7 @@
     "webpack-dev-server": "5.2.2"
   },
   "dependencies": {
-    "@descope/web-components-ui": "2.2.15"
+    "@descope/web-components-ui": "2.2.17"
   },
   "peerDependencies": {
     "react": ">= 18"
@@ -134,7 +134,8 @@
     "build-storybook": "storybook build",
     "build:rollup": "rollup -c",
     "build:webpack": "webpack --mode production",
-    "build": "npm run build:rollup && npm run build:webpack",
+    "build:all": "npm run build:rollup && npm run build:webpack",
+    "build": "npx nx run flow-components:build",
     "dev": "nx dev flow-components",
     "dev-server": "FEDERATION_IP=127.0.0.1 NODE_ENV=development webpack serve --mode development --port 4444",
     "test": "exit 0",