@asgardeo/react 0.5.12 → 0.5.14

package/dist/components/primitives/Checkbox/Checkbox.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';
+/**
+ * Creates styles for the Checkbox component using BEM methodology
+ * @param theme - The theme object containing design tokens
+ * @param colorScheme - The current color scheme (used for memoization)
+ * @param hasError - Whether the checkbox has an error state
+ * @param required - Whether the checkbox is required
+ * @returns Object containing CSS class names for component styling
+ */
+declare const useStyles: (theme: Theme, colorScheme: string, hasError: boolean, required: boolean) => {
+    container: string;
+    input: string;
+    errorInput: string;
+    label: string;
+    errorLabel: string;
+    required: string;
+};
+export default useStyles;

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

@@ -0,0 +1,33 @@
+/**
+ * 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 DatePicker component using BEM methodology
+ * @param theme - The theme object containing design tokens
+ * @param colorScheme - The current color scheme (used for memoization)
+ * @param hasError - Whether the date picker has an error state
+ * @param disabled - Whether the date picker is disabled
+ * @returns Object containing CSS class names for component styling
+ */
+declare const useStyles: (theme: Theme, colorScheme: string, hasError: boolean, disabled: boolean) => {
+    input: string;
+    errorInput: string;
+    disabledInput: string;
+    label: string;
+};
+export default useStyles;

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

@@ -0,0 +1,61 @@
+/**
+ * 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 { UseFloatingReturn, UseInteractionsReturn } from '@floating-ui/react';
+import React from 'react';
+interface DialogOptions {
+    initialOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    open?: boolean;
+}
+interface DialogHookReturn extends UseFloatingReturn, UseInteractionsReturn {
+    descriptionId: string | undefined;
+    labelId: string | undefined;
+    open: boolean;
+    setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
+    setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
+    setOpen: (open: boolean) => void;
+}
+export declare function useDialog({ initialOpen, open: controlledOpen, onOpenChange: setControlledOpen, }?: DialogOptions): DialogHookReturn;
+export declare const useDialogContext: () => DialogHookReturn;
+export declare function Dialog({ children, ...options }: {
+    children: React.ReactNode;
+} & DialogOptions): import("react/jsx-runtime").JSX.Element;
+interface DialogTriggerProps {
+    asChild?: boolean;
+    children: React.ReactNode;
+}
+export declare const DialogTrigger: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLElement> & DialogTriggerProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export declare const DialogContent: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DialogHeading: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+export declare const DialogDescription: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+interface DialogCloseProps {
+    asChild?: boolean;
+    children?: React.ReactNode;
+}
+export declare const DialogClose: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+export interface DialogComponent extends React.FC<{
+    children: React.ReactNode;
+} & DialogOptions> {
+    Trigger: typeof DialogTrigger;
+    Content: typeof DialogContent;
+    Heading: typeof DialogHeading;
+    Description: typeof DialogDescription;
+    Close: typeof DialogClose;
+}
+declare const _default: DialogComponent;
+export default _default;

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

@@ -0,0 +1,34 @@
+/**
+ * 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 Dialog 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) => {
+    overlay: string;
+    content: string;
+    dropdownContent: string;
+    header: string;
+    headerTitle: string;
+    contentBody: string;
+    description: string;
+};
+export default useStyles;

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

@@ -0,0 +1,38 @@
+/**
+ * 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 DividerOrientation = 'horizontal' | 'vertical';
+export type DividerVariant = 'solid' | 'dashed' | 'dotted';
+/**
+ * Creates styles for the Divider component using BEM methodology
+ * @param theme - The theme object containing design tokens
+ * @param colorScheme - The current color scheme (used for memoization)
+ * @param orientation - The divider orientation
+ * @param variant - The divider variant
+ * @param color - Custom color for the divider
+ * @param hasChildren - Whether the divider has children (text)
+ * @returns Object containing CSS class names for component styling
+ */
+declare const useStyles: (theme: Theme, colorScheme: string, orientation: DividerOrientation, variant: DividerVariant, color?: string, hasChildren?: boolean) => {
+    divider: string;
+    vertical: string;
+    horizontal: string;
+    line: string;
+    text: string;
+};
+export default useStyles;

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

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ * 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
@@ -16,6 +16,7 @@
  * under the License.
  */
 import { CSSProperties, FC, ReactNode } from 'react';
+export type FormControlHelperTextAlign = 'left' | 'center';
 export interface FormControlProps {
     /**
      * The content to be wrapped by the form control
@@ -33,18 +34,18 @@ export interface FormControlProps {
      * Additional CSS class names
      */
     className?: string;
-    /**
-     * Custom container style
-     */
-    style?: CSSProperties;
     /**
      * Custom alignment for helper text (default: left, center for OTP)
      */
-    helperTextAlign?: 'left' | 'center';
+    helperTextAlign?: FormControlHelperTextAlign;
     /**
      * Custom margin left for helper text (for components like Checkbox)
      */
     helperTextMarginLeft?: string;
+    /**
+     * Custom container style
+     */
+    style?: CSSProperties;
 }
 declare const FormControl: FC<FormControlProps>;
 export default FormControl;

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

@@ -0,0 +1,34 @@
+/**
+ * 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 FormControlHelperTextAlign = 'left' | 'center';
+/**
+ * Creates styles for the FormControl component using BEM methodology
+ * @param theme - The theme object containing design tokens
+ * @param colorScheme - The current color scheme (used for memoization)
+ * @param helperTextAlign - The alignment for helper text
+ * @param helperTextMarginLeft - Custom margin left for helper text
+ * @param hasError - Whether the form control has an error
+ * @returns Object containing CSS class names for component styling
+ */
+declare const useStyles: (theme: Theme, colorScheme: string, helperTextAlign: FormControlHelperTextAlign, helperTextMarginLeft?: string, hasError?: boolean) => {
+    formControl: string;
+    helperText: string;
+    helperTextError: string;
+};
+export default useStyles;

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

@@ -16,6 +16,7 @@
  * under the License.
  */
 import { CSSProperties, FC, LabelHTMLAttributes, ReactNode } from 'react';
+export type InputLabelVariant = 'block' | 'inline';
 export interface InputLabelProps extends Omit<LabelHTMLAttributes<HTMLLabelElement>, 'style'> {
     /**
      * Label text or content
@@ -36,11 +37,15 @@ export interface InputLabelProps extends Omit<LabelHTMLAttributes<HTMLLabelEleme
     /**
      * Display type for label positioning
      */
-    variant?: 'block' | 'inline';
+    variant?: InputLabelVariant;
     /**
      * Custom margin bottom (useful for different form layouts)
      */
     marginBottom?: string;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
 }
 declare const InputLabel: FC<InputLabelProps>;
 export default InputLabel;

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

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2024, 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 InputLabelVariant = 'block' | 'inline';
+/**
+ * Creates styles for the InputLabel component using BEM methodology
+ * @param theme - The theme object containing design tokens
+ * @param colorScheme - The current color scheme (used for memoization)
+ * @param variant - The display variant of the label
+ * @param error - Whether the label has an error state
+ * @param marginBottom - Custom margin bottom value
+ * @returns Object containing CSS class names for component styling
+ */
+declare const useStyles: (theme: Theme, colorScheme: string, variant: InputLabelVariant, error: boolean, marginBottom?: string) => {
+    label: string;
+    error: string;
+    requiredIndicator: string;
+    block: string;
+    inline: string;
+};
+export default useStyles;

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

@@ -0,0 +1,45 @@
+/**
+ * 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 KeyValueInput component using BEM methodology
+ * @param theme - The theme object containing design tokens
+ * @param colorScheme - The current color scheme (used for memoization)
+ * @param disabled - Whether the component is disabled
+ * @param readOnly - Whether the component is read-only
+ * @param hasError - Whether the component has an error
+ * @returns Object containing CSS class names for component styling
+ */
+declare const useStyles: (theme: Theme, colorScheme: string, disabled: boolean, readOnly: boolean, hasError: boolean) => {
+    container: string;
+    label: string;
+    requiredIndicator: string;
+    pairsList: string;
+    pairRow: string;
+    pairInput: string;
+    addRow: string;
+    removeButton: string;
+    addButton: string;
+    helperText: string;
+    emptyState: string;
+    readOnlyPair: string;
+    readOnlyKey: string;
+    readOnlyValue: string;
+    counterText: string;
+};
+export default useStyles;

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

@@ -16,6 +16,7 @@
  * under the License.
  */
 import { FC } from 'react';
+export type LogoSize = 'small' | 'medium' | 'large';
 /**
  * Props for the Logo component.
  */
@@ -39,11 +40,7 @@ export interface LogoProps {
     /**
      * Size of the logo.
      */
-    size?: 'small' | 'medium' | 'large';
-    /**
-     * Custom style object.
-     */
-    style?: React.CSSProperties;
+    size?: LogoSize;
 }
 /**
  * Logo component that displays the brand logo from theme or custom source.

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

@@ -0,0 +1,34 @@
+/**
+ * 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 LogoSize = 'small' | 'medium' | 'large';
+/**
+ * Creates styles for the Logo 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 logo
+ * @returns Object containing CSS class names for component styling
+ */
+declare const useStyles: (theme: Theme, colorScheme: string, size: LogoSize) => {
+    logo: string;
+    size: string;
+    small: string;
+    medium: string;
+    large: string;
+};
+export default useStyles;

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

@@ -16,6 +16,8 @@
  * under the License.
  */
 import { CSSProperties, FC, ReactNode } from 'react';
+export type MultiInputType = 'text' | 'email' | 'tel' | 'url' | 'password' | 'date' | 'boolean';
+export type MultiInputFieldType = 'STRING' | 'DATE_TIME' | 'BOOLEAN';
 export interface MultiInputProps {
     /**
      * Label text to display above the inputs
@@ -53,18 +55,14 @@ export interface MultiInputProps {
      * Callback when values change
      */
     onChange: (values: string[]) => void;
-    /**
-     * Custom style object
-     */
-    style?: CSSProperties;
     /**
      * Input type
      */
-    type?: 'text' | 'email' | 'tel' | 'url' | 'password' | 'date' | 'boolean';
+    type?: MultiInputType;
     /**
      * Field type for different input components
      */
-    fieldType?: 'STRING' | 'DATE_TIME' | 'BOOLEAN';
+    fieldType?: MultiInputFieldType;
     /**
      * Icon to display at the start (left) of each input
      */
@@ -81,6 +79,10 @@ export interface MultiInputProps {
      * Maximum number of fields to allow (default: unlimited)
      */
     maxFields?: number;
+    /**
+     * Custom style object
+     */
+    style?: CSSProperties;
 }
 declare const MultiInput: FC<MultiInputProps>;
 export default MultiInput;

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

@@ -0,0 +1,42 @@
+/**
+ * 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 MultiInputType = 'text' | 'email' | 'tel' | 'url' | 'password' | 'date' | 'boolean';
+export type MultiInputFieldType = 'STRING' | 'DATE_TIME' | 'BOOLEAN';
+/**
+ * Creates styles for the MultiInput component using BEM methodology
+ * @param theme - The theme object containing design tokens
+ * @param colorScheme - The current color scheme (used for memoization)
+ * @param disabled - Whether the component is disabled
+ * @param hasError - Whether the component has an error
+ * @param canAddMore - Whether more items can be added
+ * @param canRemove - Whether items can be removed
+ * @returns Object containing CSS class names for component styling
+ */
+declare const useStyles: (theme: Theme, colorScheme: string, disabled: boolean, hasError: boolean, canAddMore: boolean, canRemove: boolean) => {
+    container: string;
+    inputRow: string;
+    inputWrapper: string;
+    plusIcon: string;
+    listContainer: string;
+    listItem: string;
+    listItemText: string;
+    removeButton: string;
+    icon: string;
+};
+export default useStyles;

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

@@ -15,7 +15,8 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { CSSProperties, FC } from 'react';
+import { FC, CSSProperties } from 'react';
+export type OtpFieldType = 'text' | 'number' | 'password';
 export interface OtpInputProps {
     /**
      * Label text to display above the OTP input
@@ -64,7 +65,7 @@ export interface OtpInputProps {
     /**
      * Type of input (text, number, password)
      */
-    type?: 'text' | 'number' | 'password';
+    type?: OtpFieldType;
     /**
      * Placeholder character for each input field
      */

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

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2024, 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 OtpFieldType = 'text' | 'number' | 'password';
+/**
+ * Creates styles for the OtpField component using BEM methodology
+ * @param theme - The theme object containing design tokens
+ * @param colorScheme - The current color scheme (used for memoization)
+ * @param disabled - Whether the component is disabled
+ * @param hasError - Whether the component has an error
+ * @param length - Number of OTP input fields
+ * @returns Object containing CSS class names for component styling
+ */
+declare const useStyles: (theme: Theme, colorScheme: string, disabled: boolean, hasError: boolean, length: number) => {
+    inputContainer: string;
+    input: string;
+    inputError: string;
+    inputDisabled: string;
+};
+export default useStyles;

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

@@ -0,0 +1,33 @@
+/**
+ * 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 PasswordField component using BEM methodology
+ * @param theme - The theme object containing design tokens
+ * @param colorScheme - The current color scheme (used for memoization)
+ * @param showPassword - Whether the password is currently visible
+ * @param disabled - Whether the component is disabled
+ * @param hasError - Whether the component has an error
+ * @returns Object containing CSS class names for component styling
+ */
+declare const useStyles: (theme: Theme, colorScheme: string, showPassword: boolean, disabled: boolean, hasError: boolean) => {
+    toggleIcon: string;
+    visibleIcon: string;
+    hiddenIcon: string;
+};
+export default useStyles;

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

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2024, 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 Select component using BEM methodology
+ * @param theme - The theme object containing design tokens
+ * @param colorScheme - The current color scheme (used for memoization)
+ * @param disabled - Whether the component is disabled
+ * @param hasError - Whether the component has an error
+ * @returns Object containing CSS class names for component styling
+ */
+declare const useStyles: (theme: Theme, colorScheme: string, disabled: boolean, hasError: boolean) => {
+    select: string;
+    selectError: string;
+    selectDisabled: string;
+    option: string;
+};
+export default useStyles;