@asgardeo/react 0.5.12 → 0.5.14

package/dist/components/control/{AsgardeoLoading.d.ts → Loading/Loading.d.ts}

@@ -19,7 +19,7 @@ import { FC, PropsWithChildren, ReactNode } from 'react';
 /**
  * Props for the Loading component.
  */
-export interface AsgardeoLoadingProps {
+export interface LoadingProps {
     /**
      * Content to show when the user is not signed in.
      */
@@ -32,16 +32,16 @@ export interface AsgardeoLoadingProps {
  *
  * @example
  * ```tsx
- * import { AsgardeoLoading } from '@asgardeo/auth-react';
+ * import { Loading } from '@asgardeo/auth-react';
  *
  * const App = () => {
  *   return (
- *     <AsgardeoLoading fallback={<p>Finished Loading...</p>}>
+ *     <Loading fallback={<p>Finished Loading...</p>}>
  *       <p>Loading...</p>
- *     </AsgardeoLoading>
+ *     </Loading>
  *   );
  * }
  * ```
  */
-declare const AsgardeoLoading: FC<PropsWithChildren<AsgardeoLoadingProps>>;
-export default AsgardeoLoading;
+declare const Loading: FC<PropsWithChildren<LoadingProps>>;
+export default Loading;

package/dist/components/presentation/CreateOrganization/BaseCreateOrganization.styles.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Theme } from '@asgardeo/browser';
+/**
+ * Creates styles for the BaseCreateOrganization component using BEM methodology
+ * @param theme - The theme object containing design tokens
+ * @param colorScheme - The current color scheme (used for memoization)
+ * @returns Object containing CSS class names for component styling
+ */
+declare const useStyles: (theme: Theme, colorScheme: string) => {
+    root: string;
+    card: string;
+    content: string;
+    form: string;
+    header: string;
+    field: string;
+    fieldGroup: string;
+    textarea: string;
+    textareaError: string;
+    input: string;
+    avatarContainer: string;
+    actions: string;
+    infoContainer: string;
+    value: string;
+    popup: string;
+    errorAlert: string;
+};
+export default useStyles;

package/dist/components/presentation/OrganizationList/BaseOrganizationList.styles.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Theme } from '@asgardeo/browser';
+/**
+ * Creates styles for the BaseOrganizationList component using BEM methodology
+ * @param theme - The theme object containing design tokens
+ * @param colorScheme - The current color scheme (used for memoization)
+ * @returns Object containing CSS class names for component styling
+ */
+declare const useStyles: (theme: Theme, colorScheme: string) => {
+    root: string;
+    header: string;
+    headerInfo: string;
+    title: string;
+    subtitle: string;
+    refreshButton: string;
+    listContainer: string;
+    organizationItem: string;
+    organizationContent: string;
+    organizationInfo: string;
+    organizationName: string;
+    organizationHandle: string;
+    organizationStatus: string;
+    statusText: string;
+    statusTextActive: string;
+    statusTextInactive: string;
+    organizationActions: string;
+    badge: string;
+    badgeSuccess: string;
+    badgeError: string;
+    loadingContainer: string;
+    loadingText: string;
+    errorContainer: string;
+    emptyContainer: string;
+    emptyText: string;
+    loadMoreButton: string;
+    errorMargin: string;
+    loadMoreMargin: string;
+    popupContent: string;
+};
+export default useStyles;

package/dist/components/presentation/OrganizationList/OrganizationList.styles.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Theme } from '@asgardeo/browser';
+/**
+ * Creates styles for the OrganizationList component using BEM methodology
+ * @param theme - The theme object containing design tokens
+ * @param colorScheme - The current color scheme (used for memoization)
+ * @returns Object containing CSS class names for component styling
+ */
+declare const useStyles: (theme: Theme, colorScheme: string) => {
+    root: string;
+    container: string;
+    errorState: string;
+    loadingOverlay: string;
+};
+export default useStyles;

package/dist/components/presentation/OrganizationProfile/BaseOrganizationProfile.styles.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Theme } from '@asgardeo/browser';
+/**
+ * Creates styles for the BaseOrganizationProfile component using BEM methodology
+ * @param theme - The theme object containing design tokens
+ * @param colorScheme - The current color scheme (used for memoization)
+ * @returns Object containing CSS class names for component styling
+ */
+declare const useStyles: (theme: Theme, colorScheme: string) => {
+    root: string;
+    card: string;
+    header: string;
+    orgInfo: string;
+    name: string;
+    handle: string;
+    infoContainer: string;
+    field: string;
+    fieldLast: string;
+    fieldContent: string;
+    fieldActions: string;
+    label: string;
+    value: string;
+    valueEmpty: string;
+    statusBadge: string;
+    permissionsList: string;
+    permissionBadge: string;
+    attributesList: string;
+    attributeItem: string;
+    attributeKey: string;
+    attributeValue: string;
+    popup: string;
+    editButton: string;
+    placeholderButton: string;
+    fieldInput: string;
+};
+export default useStyles;

package/dist/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.styles.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Theme } from '@asgardeo/browser';
+/**
+ * Creates styles for the BaseOrganizationSwitcher component using BEM methodology
+ * @param theme - The theme object containing design tokens
+ * @param colorScheme - The current color scheme (used for memoization)
+ * @returns Object containing CSS class names for component styling
+ */
+declare const useStyles: (theme: Theme, colorScheme: string) => {
+    root: string;
+    trigger: string;
+    triggerLabel: string;
+    content: string;
+    header: string;
+    headerInfo: string;
+    headerName: string;
+    headerMeta: string;
+    headerRole: string;
+    manageButton: string;
+    menu: string;
+    menuItem: string;
+    menuDivider: string;
+    organizationInfo: string;
+    organizationName: string;
+    organizationMeta: string;
+    loadingContainer: string;
+    loadingText: string;
+    errorContainer: string;
+    errorText: string;
+    sectionHeader: string;
+    sectionHeaderContainer: string;
+    roleCapitalized: string;
+};
+export default useStyles;

package/dist/components/presentation/SignIn/BaseSignIn.styles.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Theme } from '@asgardeo/browser';
+/**
+ * Creates styles for the BaseSignIn component
+ * @param theme - The theme object containing design tokens
+ * @param colorScheme - The current color scheme (used for memoization)
+ * @returns Object containing CSS class names for component styling
+ */
+declare const useStyles: (theme: Theme, colorScheme: string) => {
+    signIn: string;
+    card: string;
+    logoContainer: string;
+    header: string;
+    title: string;
+    subtitle: string;
+    messagesContainer: string;
+    messageItem: string;
+    errorContainer: string;
+    contentContainer: string;
+    loadingContainer: string;
+    loadingText: string;
+    divider: string;
+    centeredContainer: string;
+    passkeyContainer: string;
+    passkeyText: string;
+    form: string;
+    formDivider: string;
+    authenticatorSection: string;
+    authenticatorItem: string;
+    noAuthenticatorCard: string;
+    errorAlert: string;
+    messagesAlert: string;
+    flowMessagesContainer: string;
+    flowMessageItem: string;
+};
+export default useStyles;

package/dist/components/presentation/SignUp/BaseSignUp.styles.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Theme } from '@asgardeo/browser';
+/**
+ * Creates styles for the BaseSignUp component
+ * @param theme - The theme object containing design tokens
+ * @param colorScheme - The current color scheme (used for memoization)
+ * @returns Object containing CSS class names for component styling
+ */
+declare const useStyles: (theme: Theme, colorScheme: string) => {
+    signUp: string;
+    card: string;
+    logoContainer: string;
+    header: string;
+    title: string;
+    subtitle: string;
+    messagesContainer: string;
+    messageItem: string;
+    errorContainer: string;
+    contentContainer: string;
+    loadingContainer: string;
+    loadingText: string;
+    divider: string;
+    centeredContainer: string;
+    passkeyContainer: string;
+    passkeyText: string;
+    form: string;
+    formDivider: string;
+    authenticatorSection: string;
+    authenticatorItem: string;
+    noAuthenticatorCard: string;
+    errorAlert: string;
+    messagesAlert: string;
+    flowMessagesContainer: string;
+    flowMessageItem: string;
+};
+export default useStyles;

package/dist/components/presentation/UserDropdown/BaseUserDropdown.styles.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Theme } from '@asgardeo/browser';
+/**
+ * Creates styles for the BaseUserDropdown component
+ * @param theme - The theme object containing design tokens
+ * @param colorScheme - The current color scheme (used for memoization)
+ * @returns Object containing CSS class names for component styling
+ */
+declare const useStyles: (theme: Theme, colorScheme: string) => {
+    trigger: string;
+    userName: string;
+    dropdownContent: string;
+    dropdownMenu: string;
+    menuItem: string;
+    menuItemAnchor: string;
+    divider: string;
+    dropdownHeader: string;
+    headerInfo: string;
+    headerName: string;
+    headerEmail: string;
+    loadingContainer: string;
+    loadingText: string;
+};
+export default useStyles;

package/dist/components/presentation/UserProfile/BaseUserProfile.d.ts

@@ -44,22 +44,19 @@ export interface BaseUserProfileProps {
         picture?: string | string[];
         username?: string | string[];
     };
-    cancelButtonText?: string;
     cardLayout?: boolean;
     className?: string;
     editable?: boolean;
     fallback?: ReactElement;
     flattenedProfile?: User;
     mode?: 'inline' | 'popup';
-    onChange?: (field: string, value: any) => void;
     onOpenChange?: (open: boolean) => void;
-    onSubmit?: (data: any) => void;
     onUpdate?: (payload: any) => Promise<void>;
     open?: boolean;
     profile?: User;
-    saveButtonText?: string;
     schemas?: Schema[];
     title?: string;
+    error?: string | null;
 }
 declare const BaseUserProfile: FC<BaseUserProfileProps>;
 export default BaseUserProfile;

package/dist/components/presentation/UserProfile/BaseUserProfile.styles.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Theme } from '@asgardeo/browser';
+/**
+ * Creates styles for the BaseUserProfile component
+ * @param theme - The theme object containing design tokens
+ * @param colorScheme - The current color scheme (used for memoization)
+ * @returns Object containing CSS class names for component styling
+ */
+declare const useStyles: (theme: Theme, colorScheme: string) => {
+    root: string;
+    alert: string;
+    card: string;
+    header: string;
+    profileInfo: string;
+    name: string;
+    infoContainer: string;
+    info: string;
+    field: string;
+    lastField: string;
+    label: string;
+    value: string;
+    popup: string;
+    valuePlaceholder: string;
+    editButton: string;
+    fieldInner: string;
+    fieldActions: string;
+    complexTextarea: string;
+    objectKey: string;
+    objectValue: string;
+};
+export default useStyles;

package/dist/components/primitives/Alert/Alert.d.ts

@@ -43,6 +43,7 @@ export interface AlertDescriptionProps extends HTMLAttributes<HTMLParagraphEleme
      */
     children?: ReactNode;
 }
+export declare const useAlertVariant: () => AlertVariant;
 /**
  * Alert component that displays important information with different severity levels.
  *

package/dist/components/primitives/Alert/Alert.styles.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Theme } from '@asgardeo/browser';
+export type AlertVariant = 'success' | 'error' | 'warning' | 'info';
+/**
+ * Creates styles for the Alert component using BEM methodology
+ * @param theme - The theme object containing design tokens
+ * @param colorScheme - The current color scheme (used for memoization)
+ * @param variant - The alert variant
+ * @returns Object containing CSS class names for component styling
+ */
+declare const useStyles: (theme: Theme, colorScheme: string, variant: AlertVariant) => {
+    alert: string;
+    variant: string;
+    icon: string;
+    content: string;
+    title: string;
+    description: string;
+};
+export default useStyles;

package/dist/components/primitives/Avatar/Avatar.styles.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Theme } from '@asgardeo/browser';
+export type AvatarVariant = 'circular' | 'square';
+/**
+ * Creates styles for the Avatar component using BEM methodology
+ * @param theme - The theme object containing design tokens
+ * @param colorScheme - The current color scheme (used for memoization)
+ * @param size - The size of the avatar in pixels
+ * @param variant - The avatar variant
+ * @param backgroundColor - The background color for the avatar
+ * @returns Object containing CSS class names for component styling
+ */
+declare const useStyles: (theme: Theme, colorScheme: string, size: number, variant: AvatarVariant, backgroundColor?: string) => {
+    avatar: string;
+    variant: string;
+    image: string;
+    skeleton: string;
+};
+export default useStyles;

package/dist/components/primitives/Button/Button.d.ts

@@ -17,7 +17,7 @@
  */
 import { ButtonHTMLAttributes } from 'react';
 export type ButtonColor = 'primary' | 'secondary' | 'tertiary' | string;
-export type ButtonVariant = 'solid' | 'outline' | 'text';
+export type ButtonVariant = 'solid' | 'outline' | 'text' | 'icon';
 export type ButtonSize = 'small' | 'medium' | 'large';
 export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {
     /**
@@ -48,6 +48,10 @@ export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement
      * Icon to display after the button text
      */
     endIcon?: React.ReactNode;
+    /**
+     * The shape of the button: square or round
+     */
+    shape?: 'square' | 'round';
 }
 /**
  * Button component with multiple variants and types.

package/dist/components/primitives/Button/Button.styles.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Theme } from '@asgardeo/browser';
+export type ButtonColor = 'primary' | 'secondary' | 'tertiary' | string;
+export type ButtonVariant = 'solid' | 'outline' | 'text' | 'icon';
+export type ButtonSize = 'small' | 'medium' | 'large';
+/**
+ * Creates styles for the Button component using BEM methodology
+ * @param theme - The theme object containing design tokens
+ * @param colorScheme - The current color scheme (used for memoization)
+ * @param color - The button color
+ * @param variant - The button variant
+ * @param size - The button size
+ * @param fullWidth - Whether the button should take full width
+ * @param disabled - Whether the button is disabled
+ * @param loading - Whether the button is in loading state
+ * @returns Object containing CSS class names for component styling
+ */
+declare const useStyles: (theme: Theme, colorScheme: string, color: ButtonColor, variant: ButtonVariant, size: ButtonSize, fullWidth: boolean, disabled: boolean, loading: boolean, shape?: "square" | "round") => {
+    button: string;
+    size: string;
+    variant: string;
+    fullWidth: string;
+    loading: string;
+    shape: string;
+    spinner: string;
+    icon: string;
+    startIcon: string;
+    endIcon: string;
+    content: string;
+};
+export default useStyles;

package/dist/components/primitives/Card/Card.styles.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Theme } from '@asgardeo/browser';
+export type CardVariant = 'default' | 'outlined' | 'elevated';
+/**
+ * Creates styles for the Card component using BEM methodology
+ * @param theme - The theme object containing design tokens
+ * @param colorScheme - The current color scheme (used for memoization)
+ * @param variant - The card variant
+ * @param clickable - Whether the card is clickable
+ * @returns Object containing CSS class names for component styling
+ */
+declare const useStyles: (theme: Theme, colorScheme: string, variant: CardVariant, clickable: boolean) => {
+    card: string;
+    variant: string;
+    clickable: string;
+    header: string;
+    title: string;
+    description: string;
+    action: string;
+    content: string;
+    footer: string;
+};
+export default useStyles;