@descope/flow-components 2.0.494 → 2.0.496

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import { globalsThemeToStyle as globalsThemeToStyle$1, createComponentsTheme as createComponentsTheme$1, themeToStyle as themeToStyle$1, componentsThemeManager as componentsThemeManager$1, genColor as genColor$1, themeVars as themeVars$1, defaultTheme as defaultTheme$1, darkTheme as darkTheme$1, IconClass as IconClass$1, CheckboxClass as CheckboxClass$1, SwitchToggleClass as SwitchToggleClass$1, ButtonClass as ButtonClass$1, LoaderLinearClass as LoaderLinearClass$1, LoaderRadialClass as LoaderRadialClass$1, ContainerClass as ContainerClass$1, DividerClass as DividerClass$1, EmailFieldClass as EmailFieldClass$1, LinkClass as LinkClass$1, LogoClass as LogoClass$1, TotpImageClass as TotpImageClass$1, NotpImageClass as NotpImageClass$1, NumberFieldClass as NumberFieldClass$1, PasscodeClass as PasscodeClass$1, PasswordClass as PasswordClass$1, TextClass as TextClass$1, EnrichedTextClass as EnrichedTextClass$1, TextAreaClass as TextAreaClass$1, TextFieldClass as TextFieldClass$1, ImageClass as ImageClass$1, PhoneFieldClass as PhoneFieldClass$1, PhoneFieldInputBoxClass as PhoneFieldInputBoxClass$1, NewPasswordClass as NewPasswordClass$1, RecaptchaClass as RecaptchaClass$1, UploadFileClass as UploadFileClass$1, ButtonSelectionGroupClass as ButtonSelectionGroupClass$1, ButtonMultiSelectionGroupClass as ButtonMultiSelectionGroupClass$1, ModalClass as ModalClass$1, NotificationClass as NotificationClass$1, GridClass as GridClass$1, BadgeClass as BadgeClass$1, MultiSelectComboBoxClass as MultiSelectComboBoxClass$1, AvatarClass as AvatarClass$1, UserAttributeClass as UserAttributeClass$1, UserAuthMethodClass as UserAuthMethodClass$1, MappingsFieldClass as MappingsFieldClass$1, SamlGroupMappingsClass as SamlGroupMappingsClass$1, PolicyValidationClass as PolicyValidationClass$1, CodeSnippetClass as CodeSnippetClass$1, ComboBoxClass as ComboBoxClass$1, RadioGroupClass as RadioGroupClass$1, DateFieldClass as DateFieldClass$1, CalendarClass as CalendarClass$1, ListClass as ListClass$1, AppsListClass as AppsListClass$1, ScopesListClass as ScopesListClass$1, ThirdPartyAppLogoClass as ThirdPartyAppLogoClass$1, SecurityQuestionsSetupClass as SecurityQuestionsSetupClass$1, SecurityQuestionsVerifyClass as SecurityQuestionsVerifyClass$1, HybridFieldClass as HybridFieldClass$1, AlertClass as AlertClass$1, AddressFieldClass as AddressFieldClass$1, TimerButtonClass as TimerButtonClass$1 } from '@descope/web-components-ui';
+import { globalsThemeToStyle as globalsThemeToStyle$1, createComponentsTheme as createComponentsTheme$1, themeToStyle as themeToStyle$1, componentsThemeManager as componentsThemeManager$1, genColor as genColor$1, themeVars as themeVars$1, defaultTheme as defaultTheme$1, darkTheme as darkTheme$1, IconClass as IconClass$1, CheckboxClass as CheckboxClass$1, SwitchToggleClass as SwitchToggleClass$1, ButtonClass as ButtonClass$1, LoaderLinearClass as LoaderLinearClass$1, LoaderRadialClass as LoaderRadialClass$1, ContainerClass as ContainerClass$1, DividerClass as DividerClass$1, EmailFieldClass as EmailFieldClass$1, LinkClass as LinkClass$1, LogoClass as LogoClass$1, TotpImageClass as TotpImageClass$1, NotpImageClass as NotpImageClass$1, NumberFieldClass as NumberFieldClass$1, PasscodeClass as PasscodeClass$1, PasswordClass as PasswordClass$1, TextClass as TextClass$1, EnrichedTextClass as EnrichedTextClass$1, TextAreaClass as TextAreaClass$1, TextFieldClass as TextFieldClass$1, ImageClass as ImageClass$1, PhoneFieldClass as PhoneFieldClass$1, PhoneFieldInputBoxClass as PhoneFieldInputBoxClass$1, NewPasswordClass as NewPasswordClass$1, RecaptchaClass as RecaptchaClass$1, UploadFileClass as UploadFileClass$1, ButtonSelectionGroupClass as ButtonSelectionGroupClass$1, ButtonMultiSelectionGroupClass as ButtonMultiSelectionGroupClass$1, ModalClass as ModalClass$1, NotificationClass as NotificationClass$1, GridClass as GridClass$1, BadgeClass as BadgeClass$1, MultiSelectComboBoxClass as MultiSelectComboBoxClass$1, AvatarClass as AvatarClass$1, UserAttributeClass as UserAttributeClass$1, UserAuthMethodClass as UserAuthMethodClass$1, MappingsFieldClass as MappingsFieldClass$1, SamlGroupMappingsClass as SamlGroupMappingsClass$1, PolicyValidationClass as PolicyValidationClass$1, CodeSnippetClass as CodeSnippetClass$1, ComboBoxClass as ComboBoxClass$1, RadioGroupClass as RadioGroupClass$1, DateFieldClass as DateFieldClass$1, CalendarClass as CalendarClass$1, ListClass as ListClass$1, AppsListClass as AppsListClass$1, ScopesListClass as ScopesListClass$1, ThirdPartyAppLogoClass as ThirdPartyAppLogoClass$1, SecurityQuestionsSetupClass as SecurityQuestionsSetupClass$1, SecurityQuestionsVerifyClass as SecurityQuestionsVerifyClass$1, HybridFieldClass as HybridFieldClass$1, AlertClass as AlertClass$1, AddressFieldClass as AddressFieldClass$1, TimerButtonClass as TimerButtonClass$1, CollapsibleContainerClass as CollapsibleContainerClass$1 } from '@descope/web-components-ui';
 export * from '@descope/web-components-ui';
 import React, { useMemo } from 'react';
 
@@ -110,7 +110,7 @@ const alignItems = {
     baseline: 'baseline',
     stretch: 'stretch'
 };
-const applyDefaults = ({ paddingX, paddingY, align, justify, background, spaceBetween }) => ({
+const applyDefaults$1 = ({ paddingX, paddingY, align, justify, background, spaceBetween }) => ({
     'st-horizontal-padding': !paddingX || isNumeric(paddingX)
         ? `${Number.parseInt(paddingX || '0', 10) / 4}rem`
         : paddingX,
@@ -128,7 +128,7 @@ const applyDefaults = ({ paddingX, paddingY, align, justify, background, spaceBe
         }
         : {})
 });
-const Container = React.forwardRef(({ background, justify, paddingX, paddingY, shadow, width, align, spaceBetween, backgroundImageUrl, direction = 'row', variant, borderRadius, ...props }, ref) => {
+const Container$1 = React.forwardRef(({ background, justify, paddingX, paddingY, shadow, width, align, spaceBetween, backgroundImageUrl, direction = 'row', variant, borderRadius, ...props }, ref) => {
     const mergedProps = {
         ...props,
         direction,
@@ -141,7 +141,7 @@ const Container = React.forwardRef(({ background, justify, paddingX, paddingY, s
             : undefined,
         ...(variant
             ? {}
-            : applyDefaults({
+            : applyDefaults$1({
                 paddingX,
                 paddingY,
                 align,
@@ -440,6 +440,42 @@ const AddressField = React.forwardRef(({ size = 'md', ...props }, ref) => (React
 
 const TimerButton = React.forwardRef(({ children, color = 'primary', size = 'md', variant = 'contained', horizontal = false, 'text-align': textAlign = 'center', 'timer-seconds': timerSeconds = 0, 'timer-hide-icon': timerHideIcon = false, 'timer-paused': timerPause = false, ...props }, ref) => (React.createElement("descope-timer-button", { ...props, size: size, "text-align": textAlign, horizontal: horizontal, "button-variant": variant, "button-mode": color, "timer-hide-icon": timerHideIcon, "timer-seconds": timerSeconds, "timer-paused": timerPause, ref: ref }, children)));
 
+const applyDefaults = ({ paddingX, paddingY, background, spaceBetween }) => ({
+    'st-horizontal-padding': !paddingX || isNumeric(paddingX)
+        ? `${Number.parseInt(paddingX || '0', 10) / 4}rem`
+        : paddingX,
+    'st-vertical-padding': !paddingY || isNumeric(paddingY)
+        ? `${Number.parseInt(paddingY || '0', 10) / 4}rem`
+        : paddingY,
+    'st-background-color': background,
+    ...(spaceBetween
+        ? {
+            'st-gap': isNumeric(spaceBetween)
+                ? `${Number.parseFloat(spaceBetween || '0') / 4}rem`
+                : spaceBetween
+        }
+        : {})
+});
+const Container = React.forwardRef(({ background, paddingX, paddingY, shadow, width, spaceBetween, backgroundImageUrl, borderRadius, ...props }, ref) => {
+    const mergedProps = {
+        ...props,
+        shadow,
+        'border-radius': borderRadius || props['border-radius'],
+        'st-host-width': width || '100%',
+        'st-background-image': backgroundImageUrl?.trim()
+            ? `url('${backgroundImageUrl.trim()}')`
+            : undefined,
+        ...applyDefaults({
+            paddingX,
+            paddingY,
+            background,
+            spaceBetween
+        })
+    };
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return React.createElement("descope-collapsible-container", { ...mergedProps, ref: ref });
+});
+
 const defaultText = 'This site is protected by turnstile and the Cloudflare [Privacy Policy](https://www.cloudflare.com/privacypolicy/) and [Terms of Service](https://www.cloudflare.com/terms/) apply.';
 const Turnstile = React.forwardRef(({ textLabel = defaultText, textVariant = 'body1', textMode = 'primary', textAlign = 'left', 'full-width': fullWidth, connector, ...props }, ref) => (React.createElement("descope-enriched-text", { ref: ref, "full-width": fullWidth, variant: textVariant, mode: textMode, "text-align": textAlign, ...props }, textLabel)));
 
@@ -506,5 +542,6 @@ const HybridFieldClass = HybridFieldClass$1;
 const AlertClass = AlertClass$1;
 const AddressFieldClass = AddressFieldClass$1;
 const TimerButtonClass = TimerButtonClass$1;
+const CollapsibleContainerClass = CollapsibleContainerClass$1;
 
-export { AddressField, AddressFieldClass, Alert, AlertClass, AppsList, AppsListClass, Avatar, AvatarClass, Badge, BadgeClass, Boolean, Button, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CalendarClass, Checkbox, CheckboxClass, Code, CodeSnippet, CodeSnippetClass, ComboBox, ComboBoxClass, Container, ContainerClass, DateField, DateFieldClass, Divider, DividerClass, EmailFieldClass, EnrichedTextClass, Grid, GridClass, GridCustomColumn, GridItemDetailsColumn, GridSelectionColumn, GridTextColumn, HybridField, HybridFieldClass, IconClass, Image, ImageClass, Input, Link, LinkClass, List, ListClass, ListItem, Loader, LoaderLinearClass, LoaderRadialClass, Logo, LogoClass, MappingsField, MappingsFieldClass, Modal, ModalClass, MultiSelect, MultiSelectComboBoxClass, NOTPImage, NOTPLink, NewPassword, NewPasswordClass, NotificationClass, NotpImageClass, NumberField, NumberFieldClass, PasscodeClass, Password, PasswordClass, Phone, PhoneFieldClass, PhoneFieldInputBoxClass, PolicyValidationClass, RadioGroupClass, Recaptcha, RecaptchaClass, RecaptchaV2, SAMLGroupMappings, SamlGroupMappingsClass, ScopesList, ScopesListClass, SecurityQuestionsSetup, SecurityQuestionsSetupClass, SecurityQuestionsVerify, SecurityQuestionsVerifyClass, Select, SingleSelect, Switch, SwitchToggleClass, TOTPImage, TOTPLink, Text, TextAreaClass, TextClass, TextField, TextFieldClass, Textarea, ThirdPartyAppLogo, ThirdPartyAppLogoClass, TimerButton, TimerButtonClass, TotpImageClass, Turnstile, UploadFile, UploadFileClass, UserAttribute, UserAttributeClass, UserAuthMethod, UserAuthMethodClass, apple, authenticator, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, discord, edit, facebook, fingerprint, genColor, github, gitlab, globalsThemeToStyle, google, linkedin, microsoft, passkey, password, plus, reload, slack, sso, themeToStyle, themeVars, whatsapp };
+export { AddressField, AddressFieldClass, Alert, AlertClass, AppsList, AppsListClass, Avatar, AvatarClass, Badge, BadgeClass, Boolean, Button, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CalendarClass, Checkbox, CheckboxClass, Code, CodeSnippet, CodeSnippetClass, Container as CollapsibleContainer, CollapsibleContainerClass, ComboBox, ComboBoxClass, Container$1 as Container, ContainerClass, DateField, DateFieldClass, Divider, DividerClass, EmailFieldClass, EnrichedTextClass, Grid, GridClass, GridCustomColumn, GridItemDetailsColumn, GridSelectionColumn, GridTextColumn, HybridField, HybridFieldClass, IconClass, Image, ImageClass, Input, Link, LinkClass, List, ListClass, ListItem, Loader, LoaderLinearClass, LoaderRadialClass, Logo, LogoClass, MappingsField, MappingsFieldClass, Modal, ModalClass, MultiSelect, MultiSelectComboBoxClass, NOTPImage, NOTPLink, NewPassword, NewPasswordClass, NotificationClass, NotpImageClass, NumberField, NumberFieldClass, PasscodeClass, Password, PasswordClass, Phone, PhoneFieldClass, PhoneFieldInputBoxClass, PolicyValidationClass, RadioGroupClass, Recaptcha, RecaptchaClass, RecaptchaV2, SAMLGroupMappings, SamlGroupMappingsClass, ScopesList, ScopesListClass, SecurityQuestionsSetup, SecurityQuestionsSetupClass, SecurityQuestionsVerify, SecurityQuestionsVerifyClass, Select, SingleSelect, Switch, SwitchToggleClass, TOTPImage, TOTPLink, Text, TextAreaClass, TextClass, TextField, TextFieldClass, Textarea, ThirdPartyAppLogo, ThirdPartyAppLogoClass, TimerButton, TimerButtonClass, TotpImageClass, Turnstile, UploadFile, UploadFileClass, UserAttribute, UserAttributeClass, UserAuthMethod, UserAuthMethodClass, apple, authenticator, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, discord, edit, facebook, fingerprint, genColor, github, gitlab, globalsThemeToStyle, google, linkedin, microsoft, passkey, password, plus, reload, slack, sso, themeToStyle, themeVars, whatsapp };

package/dist/types/src/CollapsibleContainer/CollapsibleContainer.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import { FlexAlignment } from '../types';
+type Never<T extends Record<string, any>> = {
+    [K in keyof T]: never;
+};
+type SpaceBetween = '0' | '0.5' | '1' | '1.5' | '2' | '2.5' | '3' | '3.5' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | '14' | '16' | '20' | '24' | '28' | '32';
+type Flex = {
+    spaceBetween?: SpaceBetween;
+};
+type ContainerAlignment = {
+    'horizontal-alignment'?: FlexAlignment | 'space-between';
+    'vertical-alignment'?: FlexAlignment;
+    'space-between'?: 'sm' | 'md' | 'lg';
+};
+type Props = {
+    shadow?: 'md' | 'lg' | 'xl' | '2xl';
+    borderRadius?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+    paddingX?: string;
+    paddingY?: string;
+    background?: string;
+    backgroundImageUrl?: string;
+    width?: string;
+    collapsible?: boolean;
+    'icon-position'?: 'right' | 'left';
+    'fill-title'?: boolean;
+    border?: boolean;
+    text?: string;
+    'icon-name'?: string;
+    collapsed?: boolean;
+    'text-align'?: 'left' | 'right' | 'center';
+    'text-variant'?: 'body1' | 'body2' | 'subtitle1' | 'h1' | 'h2' | 'h3' | 'subtitle2';
+    'text-mode'?: 'primary' | 'secondary' | 'error' | 'success';
+} & ((Flex & Never<ContainerAlignment>) | (ContainerAlignment & Never<Flex>));
+declare global {
+    namespace React.JSX {
+        interface IntrinsicElements {
+            'descope-collapsible-container': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+declare const Container: React.ForwardRefExoticComponent<(Props & React.HTMLAttributes<HTMLDivElement>) & React.RefAttributes<HTMLDivElement>>;
+export default Container;

package/dist/types/src/CollapsibleContainer/index.d.ts

@@ -0,0 +1 @@
+export { default as CollapsibleContainer } from './CollapsibleContainer';

package/dist/types/src/index.d.ts

@@ -83,6 +83,7 @@ export declare const HybridFieldClass: ComponentClass;
 export declare const AlertClass: ComponentClass;
 export declare const AddressFieldClass: ComponentClass;
 export declare const TimerButtonClass: ComponentClass;
+export declare const CollapsibleContainerClass: ComponentClass;
 export { globalsThemeToStyle, createComponentsTheme, themeToStyle, componentsThemeManager, darkTheme, genColor, defaultTheme, themeVars };
 export type Theme = {
     globals: {
@@ -157,5 +158,6 @@ export * from './HybridField';
 export * from './Alert';
 export * from './AddressField';
 export * from './TimerButton';
+export * from './CollapsibleContainer';
 export * from './Turnstile';
 export * from '@descope/web-components-ui';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@descope/flow-components",
-	"version": "2.0.494",
+	"version": "2.0.496",
 	"description": "",
 	"main": "dist/index.cjs.js",
 	"module": "dist/index.esm.js",
@@ -104,7 +104,7 @@
 		"typescript": "^5.7.2"
 	},
 	"dependencies": {
-		"@descope/web-components-ui": "1.56.0"
+		"@descope/web-components-ui": "1.61.0"
 	},
 	"peerDependencies": {
 		"react": ">= 18"