@eka-care/abha 0.0.5 → 0.0.7

package/src/atoms/input-field/types.ts

@@ -1,24 +0,0 @@
-export type InputFieldProps = {
-  borderRadius?: string;
-  borderStyle?: string;
-  padding?: string;
-  textColor?: string;
-  textStyle?: string;
-  placeholder?: string;
-  PrefixComponent?: React.ReactNode;
-  onChange?: React.ChangeEventHandler<HTMLInputElement>;
-  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
-  value: string;
-  type?: React.HTMLInputTypeAttribute;
-  label?: string;
-  isMandatory?: boolean;
-  maxDate?: string;
-  error?: string;
-  autoCapitalize?: string;
-  autoCorrect?: string;
-  disabled?: boolean;
-  inputMode?: 'email' | 'search' | 'tel' | 'text' | 'url' | 'none' | 'numeric' | 'decimal';
-  autoFocus?: boolean;
-  pattern?: string;
-  maxLength?: number;
-};

package/src/atoms/pds2-otp-input/index.tsx

@@ -1,35 +0,0 @@
-import { InputHTMLAttributes, useState } from 'react';
-import { TOtpInputProps } from './types';
-
-const Pds2OtpInput = ({
-  value,
-  isError,
-  ...restProps
-}: InputHTMLAttributes<HTMLInputElement> & TOtpInputProps) => {
-  const [isFocused, setIsFocused] = useState(false);
-
-  return (
-    <input
-      {...restProps}
-      value={value}
-      placeholder="."
-      onFocus={(e) => {
-        setIsFocused(true);
-        restProps.onFocus?.(e);
-      }}
-      onBlur={(e) => {
-        setIsFocused(false);
-        restProps.onBlur?.(e);
-      }}
-      className={`pds2-rounded-16 pds2-border-1 pds2-p-16 ${
-        isError
-          ? 'pds2-border-border-error'
-          : isFocused
-            ? 'pds2-border-border-doc'
-            : 'pds2-border-border-03'
-      } pds2-w-48 pds2-bg-bg-white pds2-text-text-primary pds2-text-center placeholder:pds2-text-text-04 Body1Regular pds2-outline-none`}
-    />
-  );
-};
-
-export default Pds2OtpInput;

package/src/atoms/pds2-otp-input/types.d.ts

@@ -1,3 +0,0 @@
-export type TOtpInputProps = {
-  isError?: boolean;
-};

package/src/atoms/single-input-chip/index.tsx

@@ -1,32 +0,0 @@
-import { useRef } from 'react';
-import { TSingleInputChipProps } from './types';
-
-export default function Pds2SingleInputChip({
-  title,
-  isDisabled,
-  isSelected,
-  onSelect,
-}: TSingleInputChipProps) {
-  const divRef = useRef<HTMLInputElement>(null);
-  return (
-    <div
-      onClick={!isDisabled ? onSelect : undefined}
-      className={`pds2-flex pds2-items-center pds2-cursor-pointer pds2-py-12 pds2-px-16 pds2-border-1 pds2-rounded-12 pds2-bg-bg-white 
-        ${isSelected ? 'pds2-border-border-brand-01' : 'pds2-border-border-03'}
-        focus-within:pds2-ring-2 focus-within:pds2-ring-border-brand-01 focus-within:pds2-ring-offset-2
-        active:pds2-bg-bg-brand-02 hover:pds2-bg-bg-hover-01
-        pds2-transition-colors pds2-duration-200
-      `}
-      tabIndex={-1}
-      ref={divRef}
-    >
-      <p
-        className={`${
-          isSelected ? 'pds2-text-text-brand Body2Semibold' : 'pds2-text-text-01 Body2Medium'
-        }`}
-      >
-        {title}
-      </p>
-    </div>
-  );
-}

package/src/atoms/single-input-chip/types.ts

@@ -1,6 +0,0 @@
-export type TSingleInputChipProps = {
-  title: string;
-  isSelected?: boolean;
-  isDisabled?: boolean;
-  onSelect?: () => void;
-};

package/src/atoms/spinner.tsx

@@ -1,33 +0,0 @@
-type TSpinner = {
-  className?: string;
-  size?: number;
-};
-
-const Pds2Spinner = ({ className = '', size = 40 }: TSpinner): JSX.Element => {
-  return (
-    <div className={`pds2-w-fit pds2-flex pds2-justify-center pds2-items-center ${className}`}>
-      <svg
-        className="pds2-animate-spin"
-        id="svg-spinner"
-        xmlns="http://www.w3.org/2000/svg"
-        width={size}
-        height={size}
-        viewBox="0 0 48 48"
-        fill="currentColor"
-      >
-        <circle cx="24" cy="4" r="2.5" className="fill-current opacity-100" />
-        <circle cx="12.19" cy="7.86" r="2.5" className="fill-current opacity-90" />
-        <circle cx="5.02" cy="17.68" r="2.5" className="fill-current opacity-80" />
-        <circle cx="5.02" cy="30.32" r="2.5" className="fill-current opacity-70" />
-        <circle cx="12.19" cy="40.14" r="2.5" className="fill-current opacity-60" />
-        <circle cx="24" cy="44" r="2.5" className="fill-current opacity-50" />
-        <circle cx="35.81" cy="40.14" r="2.5" className="fill-current opacity-40" />
-        <circle cx="42.98" cy="30.32" r="2.5" className="fill-current opacity-30" />
-        <circle cx="42.98" cy="17.68" r="2.5" className="fill-current opacity-20" />
-        <circle cx="35.81" cy="7.86" r="2.5" className="fill-current opacity-10" />
-      </svg>
-    </div>
-  );
-};
-
-export default Pds2Spinner;

package/src/atoms/text-separator.tsx

@@ -1,11 +0,0 @@
-const TextSeparator = ({ title }: { title: string }) => {
-  return (
-    <div className="pds2-relative pds2-flex pds2-flex-row pds2-items-center pds2-gap-16">
-      <div className="pds2-w-full pds2-h-1 pds2-bg-border-03"></div>
-      <div className="pds2-text-text-04 Body2Regular pds2-text-center pds2-min-w-max">{title}</div>
-      <div className="pds2-w-full pds2-h-1 pds2-bg-border-03"></div>
-    </div>
-  );
-};
-
-export default TextSeparator;

package/src/index.css

@@ -1,118 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-body {
-  @apply pds2-font-lato;
-}
-
-@layer base {
-  .TitlesSubheadline {
-    @apply pds2-font-700 pds2-text-16 pds2-leading-20;
-  }
-  .BodyBody {
-    @apply pds2-font-400 pds2-text-16 pds2-leading-22;
-  }
-  .DisplayRegular {
-    @apply pds2-font-400 pds2-text-34 pds2-leading-44;
-  }
-  .DisplayMedium {
-    @apply pds2-font-500 pds2-text-32 pds2-leading-40;
-  }
-  .DisplaySemibold {
-    @apply pds2-font-600 pds2-text-32 pds2-leading-40;
-  }
-  .Heading2Medium {
-    @apply pds2-font-500 pds2-text-24 pds2-leading-32;
-  }
-  .Heading2Semibold {
-    @apply pds2-font-600 pds2-text-24 pds2-leading-32;
-  }
-  .Heading3Semibold {
-    @apply pds2-font-600 pds2-text-20 pds2-leading-28;
-  }
-  .Heading4Semibold {
-    @apply pds2-font-600 pds2-text-18 pds2-leading-24;
-  }
-
-  .Body1Semibold {
-    @apply pds2-font-600 pds2-text-16 pds2-leading-24;
-  }
-  .Body2Semibold {
-    @apply pds2-font-600 pds2-text-14 pds2-leading-20;
-  }
-
-  .Body1Regular {
-    @apply pds2-font-400 pds2-text-16 pds2-leading-24;
-  }
-  .Body2Regular {
-    @apply pds2-font-400 pds2-text-14 pds2-leading-20;
-  }
-  .Body2Medium {
-    @apply pds2-font-500 pds2-text-14 pds2-leading-20;
-  }
-  .Body3Regular {
-    @apply pds2-font-400 pds2-text-12 pds2-leading-16;
-  }
-
-  .Body3Medium {
-    @apply pds2-font-500 pds2-text-12 pds2-leading-16;
-  }
-
-  .Body3Semibold {
-    @apply pds2-font-600 pds2-text-12 pds2-leading-16;
-  }
-
-  .Body3CapsRegular {
-    @apply pds2-font-400 pds2-text-12 pds2-leading-16 pds2-uppercase pds2-tracking-[0.96px];
-  }
-  .Body3CapsSemibold {
-    @apply pds2-font-600 pds2-text-12 pds2-leading-16 pds2-uppercase pds2-tracking-[0.96px];
-  }
-
-  .BodyFootnote {
-    @apply pds2-font-400 pds2-text-13 pds2-leading-18;
-  }
-
-  .BodyInputLabel {
-    @apply pds2-font-400 pds2-text-12 pds2-leading-12;
-  }
-  .Label1Semibold {
-    @apply pds2-font-600 pds2-text-10 pds2-leading-14;
-  }
-  .SubheadlineRegular {
-    @apply pds2-font-400 pds2-text-14 pds2-leading-20;
-  }
-}
-
-@layer utilities {
-  @variants responsive {
-    .ripple {
-      @apply pds2-relative pds2-overflow-hidden pds2-transform;
-    }
-
-    .ripple::after {
-      @apply pds2-absolute pds2-inset-0 pds2-block pds2-bg-center pds2-bg-no-repeat pds2-opacity-0 pds2-pointer-events-none;
-      content: '';
-      background-image: radial-gradient(circle, #000 10%, transparent 10.01%);
-      transform: scale(10, 10);
-      transition:
-        transform 0.3s,
-        opacity 1s;
-    }
-
-    .ripple:active::after {
-      transform: scale(0, 0);
-      opacity: 0.3;
-      transition: 0s;
-    }
-  }
-}
-
-input[type="date"]::-webkit-calendar-picker-indicator {
-  display: inline !important;
-  -webkit-appearance: auto !important;
-  width: 16px;
-  padding: 0px;
-  margin: 0px;
-}

package/src/main.tsx

@@ -1,313 +0,0 @@
-import { ABHA_AUTH_FLOW_METHOD } from '@elixir/types';
-import { setEnv } from 'apis';
-import { TAuthVerifyV2Response } from 'apis/src/types/aorta-go';
-import { createRoot, Root } from 'react-dom/client';
-import 'ui/styles.css';
-import App, { queryClient } from './App';
-import './index.css';
-import useAuthAbhaStore from './stores/auth-abha-store';
-import { SCREEN_NAMES } from './stores/auth-abha-store/types';
-import { handleSendEvent } from '@elixir/utils';
-
-const trackAbhaEvent = ({ name, data = {} }: { name: string; data?: Record<string, any> }) => {
-
-  const eventData = {
-    ...data,
-  };
-
-  handleSendEvent({
-    eventName: name,
-    eventData,
-  });
-
-  window.curio?.pushToMixpanel?.(name, eventData);
-};
-
-export type TMethod = 'login_with_abha' | 'create_abha_with_mobile' | 'login_or_create_abha';
-
-const getScreenName = ({ method = 'login_with_abha' }: { method?: TMethod }): SCREEN_NAMES => {
-  switch (method) {
-    case 'login_with_abha':
-      return SCREEN_NAMES.LOGIN_WITH_ABHA;
-    case 'create_abha_with_mobile':
-      return SCREEN_NAMES.CREATE_ABHA_WITH_AADHAAR;
-    case 'login_or_create_abha':
-      return SCREEN_NAMES.LOGIN_OR_CREATE_ABHA;
-    default:
-      return SCREEN_NAMES.LOGIN_WITH_ABHA;
-  }
-};
-
-type TInitAbhaAppParams = {
-  clientId: string;
-  containerId: string;
-  urlParams?: {
-    nextUrl: string;
-  };
-  method?: TMethod;
-  data?: {
-    mobile?: string;
-    accessToken?: string;
-    oid?: string;
-  };
-  appVersion?: string;
-  onSuccess: (params: TOnAbhaSuccessParams) => void;
-  onError: (params: TOnAbhaFailureParams) => void;
-  onAbhaClose: () => void;
-};
-
-declare global {
-  interface Window {
-    initAbhaApp: (params: TInitAbhaAppParams) => void;
-    closeAbhaApp: () => void;
-    EkaAbha?: {
-      mobileNumber?: string;
-      onAbhaSuccess: (params: string) => void;
-      onAbhaError: (params: string) => void;
-      onAbhaClose: () => void;
-      changeStatusBarColor?: (params: string) => void;
-    };
-    curio?: {
-      pushToMixpanel?: (eventName: string, eventProps: Record<string, any>) => void;
-    };
-  }
-}
-
-// TODO: Move all the rendering functions to a separate file
-
-let PopupReactNode: Root | null = null;
-
-export let unMount: () => void;
-
-type TOnAbhaSuccessParams = {
-  response: TAuthVerifyV2Response;
-};
-
-export let onAbhaSuccess: (params: TOnAbhaSuccessParams) => void;
-
-type TOnAbhaFailureParams = { error?: string; response?: TAuthVerifyV2Response };
-
-export let onAbhaFailure: (params: TOnAbhaFailureParams) => void;
-
-function initAbhaApp(params: TInitAbhaAppParams) {
-  // clear abha auth store at the very start
-  console.log('clear the abha auth store for every sdk invocation', params);
-  useAuthAbhaStore.getState().clearAbhaAuthStore();
-
-  const {
-    clientId,
-    containerId,
-    urlParams,
-    method,
-    data: abhaData,
-    appVersion,
-    onSuccess,
-    onError,
-    onAbhaClose,
-  } = params;
-  const { mobile, accessToken, oid } = abhaData || {};
-  const headers: Record<string, string> = {};
-
-  if (accessToken) {
-    headers.auth = accessToken;
-  }
-
-  if (oid) {
-    headers['X-User-ID'] = oid;
-  }
-  console.log('set headers in headers');
-  
-  console.log('invoked initAbhaApp', headers);
-
-  // adding a check of oid in headers, in stetho, only oid is passed, auth is not passed.
-
-  const isEkaAppLogin = headers !== null && ('auth' in headers || 'X-User-ID' in headers);
-  useAuthAbhaStore.getState().setIsEkaAppLogin(isEkaAppLogin);
-
-  // set true to isEkaAppLogin if clientId is doc-web
-  if (clientId === 'doc-web') {
-    useAuthAbhaStore.getState().setIsEkaAppLogin(true);
-  }
-  console.log('clientId ', clientId);
-  console.log('isEkaAppLogin', useAuthAbhaStore.getState().isEkaAppLogin);
-
-  if (
-    clientId === 'androiddoc' ||
-    clientId === 'doctor-app-ios' ||
-    clientId === 'doctor-ipad-ios' ||
-    clientId === 'doc-web'
-  ) {
-    useAuthAbhaStore.getState().setClientId('doctor');
-  } else if (clientId === 'androidp' || clientId === 'patient-app-ios') {
-    useAuthAbhaStore.getState().setClientId('phr');
-  } else if (clientId === 'www-eka') {
-    useAuthAbhaStore.getState().setClientId('eka-web');
-  } else {
-    console.log('here');
-    useAuthAbhaStore.getState().setClientId('phr');
-  }
-
-  let isDocAppRequest = false;
-
-  // publish an mix panel event
-  handleSendEvent({
-    eventName: 'init_abha_app',
-    eventData: {
-      platform: clientId,
-      method: method || '',
-      mobile: mobile || '',
-      accessToken: accessToken || '',
-      oid: oid || '',
-      appVersion: appVersion || '',
-      isEkaAppLogin: isEkaAppLogin.toString(),
-      container_id: containerId,
-    },
-  });
-
-  // use onTrack
-  onTrack('init_abha_app', {
-    platform: clientId,
-    method: method || '',
-    mobile: mobile || '',
-    accessToken: headers.auth || '',
-    oid: headers['X-User-ID'] || '',
-    appVersion: appVersion || '',
-    isEkaAppLogin: isEkaAppLogin.toString(),
-    container_id: containerId,
-  });
-
-  if (
-    clientId === 'androiddoc' ||
-    clientId === 'doctor-app-ios' ||
-    clientId === 'doctor-ipad-ios' ||
-    clientId === 'doc-web'
-  ) {
-    isDocAppRequest = true;
-    useAuthAbhaStore.getState().setIsDocAppRequest(isDocAppRequest);
-  }
-
-  useAuthAbhaStore
-    .getState()
-    .setInitAbhaAppMethod(
-      method === 'create_abha_with_mobile' ? 'create_abha_with_mobile' : 'login_with_abha'
-    );
-
-  setEnv({
-    // TODO: Change this to the actual client id
-    clientId,
-    env: import.meta.env.VITE_APP_ENV === 'PROD' ? 'PROD' : 'DEV',
-    ...(headers && { extraHeaders: headers }),
-  });
-
-  const screenName = SCREEN_NAMES.LOGIN_OR_CREATE_ABHA;
-
-  useAuthAbhaStore.getState().setInitState({
-    screen: [screenName],
-    urlParams,
-  });
-
-  useAuthAbhaStore.getState().setAbhaAuthFlowMethod(ABHA_AUTH_FLOW_METHOD.MOBILE);
-  const regex = /[^0-9]/g;
-  const mobileNumber = mobile || window.EkaAbha?.mobileNumber;
-  const regexMobileNumber = mobileNumber?.replace(regex, '');
-  const validMobile = regexMobileNumber?.slice(-10);
-
-  if (validMobile && validMobile.length === 10) {
-    // if it valid mobile number then set it in the store
-    useAuthAbhaStore.getState().setInitAbhaAppMobileNumber(validMobile);
-  }
-
-  const closeAbhaApp = () => {
-
-    trackAbhaEvent({
-      name: 'connectivity-debug-onclose',
-      data: {
-        platform: clientId,
-        line: 226,
-        function: "closeAbhaApp",
-        page: "main.tsx.tsx",
-        flow: "debug",
-      },
-    });
-    useAuthAbhaStore.getState().clearAbhaAuthStore();
-    queryClient.removeQueries();
-    PopupReactNode?.unmount();
-    onAbhaClose();
-  };
-
-  const rootElement = document.getElementById(containerId);
-  if (!rootElement) {
-    const errorMessage = `Element with id ${containerId} not found`;
-    console.error(errorMessage);
-    onError({ error: errorMessage });
-    closeAbhaApp();
-    return;
-  }
-
-  onAbhaSuccess = onSuccess;
-  onAbhaFailure = onError;
-
-  PopupReactNode = createRoot(rootElement);
-  PopupReactNode.render(<App />);
-
-  unMount = closeAbhaApp;
-  window.closeAbhaApp = closeAbhaApp;
-
-  return closeAbhaApp;
-}
-
-window.initAbhaApp = initAbhaApp;
-
-let eventQueue: Array<{ eventName: string; eventProps: Record<string, any> }> = [];
-
-function onTrack(eventName: string, eventProperties: Record<string, any> = {}) {
-  const platform = useAuthAbhaStore.getState().clientId || 'unknown-platform';
-
-  const finalEventProps = {
-    ...eventProperties,
-    platform,
-  };
-
-  console.log('Tracking Event:', eventName, finalEventProps);
-
-  if (window.curio?.pushToMixpanel) {
-    console.log('Pushing to Mixpanel:', eventName, finalEventProps);
-    window.curio.pushToMixpanel(eventName, finalEventProps);
-  } else {
-    console.log('Curio not available. Queuing event:', eventName, finalEventProps);
-    console.error('Curio not available. Could not push event to Mixpanel.');
-  }
-}
-
-if (import.meta.env.VITE_APP_MODE === 'DEBUG') {
-  initAbhaApp({
-    clientId: 'www-eka',
-    containerId: 'lofe_root',
-    method: 'login_or_create_abha',
-    data: {
-      // mobile: '8709459003',
-      // accessToken:
-      // 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJhbmRyb2lkZG9jIiwiYi1pZCI6Ijc3MjM3NjM3NzYzODE3IiwiY2MiOnt9LCJkb2IiOiIxOTk4LTAyLTEwIiwiZXhwIjoxNzQxODY3NDMyLCJmbiI6IlN0YWdlIiwiZ2VuIjoiTSIsImlhdCI6MTc0MTg2NjgzMiwiaXNzIjoiZW1yLmVrYS5jYXJlIiwibG4iOiJHb2QiLCJvaWQiOiIxNzQxMTY3MTMwMjk3NjgiLCJwcyI6IkQiLCJ1dWlkIjoiZGRjMGVmNDUtNDZmOS00ZGE5LTlhNTgtNjcwZjc1N2YyYzc3In0.ZHpMNQuolWQ-MqzbYAHnZGVz1CqFTofm7sV-7ARlfug',
-      // oid: '17418668693032712',
-    },
-    // urlParams: { from: 'dr', next: 'https://www.google.com' },
-    // workspaceName: 'hell',
-    onSuccess: (params) => {
-      handleSendEvent({
-        eventName: 'abha_on_success',
-        eventData: {
-          params: JSON.stringify(params),
-          oid: params?.response?.data?.profile?.oid ?? '',
-          uuid: params?.response?.data?.profile?.uuid ?? '',
-        },
-      });
-      console.log('%c Line:117 🍕 onSuccessParams', 'color:#465975', params);
-    },
-    onError: (params) => {
-      console.log('%c Line:121 🥟 onErrorParams', 'color:#6ec1c2', params);
-    },
-    onAbhaClose: () => {
-      console.log('%c Line:121 🥟 onAbhaClose', 'color:#6ec1c2');
-    },
-  });
-}

package/src/molecules/abha/bottom-sheet/bottom-sheet-wrapper.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-type BottomSheetWrapperProps = {
-  isOpen: boolean;
-  setIsOpen: (open: boolean) => void;
-  children: React.ReactNode;
-  shouldCloseOnClickOutside?: boolean;
-};
-const BottomSheetWrapper = ({
-  isOpen,
-  setIsOpen,
-  children,
-  shouldCloseOnClickOutside = true,
-}: BottomSheetWrapperProps) => {
-  return (
-    <div
-      className={`pds2-absolute pds2-inset-0 pds2-z-50 pds2-transition-opacity pds2-duration-300 ${
-        isOpen
-          ? 'pds2-opacity-100 pds2-pointer-events-auto'
-          : 'pds2-opacity-0 pds2-pointer-events-none'
-      }`}
-    >
-      {/* Background overlay */}
-      <div
-        className="pds2-absolute pds2-inset-0 pds2-bg-text-black pds2-bg-opacity-60 pds2-transition-opacity pds2-duration-300"
-        onClick={() => shouldCloseOnClickOutside && setIsOpen(false)}
-      />
-
-      {/* Bottom Sheet Content */}
-      <div
-        className="pds2-absolute pds2-bottom-0 pds2-left-0 pds2-right-0 pds2-w-full pds2-bg-bg-white pds2-rounded-t-16 pds2-shadow-lg pds2-p-4 pds2-transition-all pds2-duration-300 pds2-ease-out"
-        style={{
-          transform: isOpen ? 'translateY(0)' : 'translateY(100%)',
-        }}
-      >
-        {children}
-      </div>
-    </div>
-  );
-};
-export default BottomSheetWrapper;

package/src/molecules/abha/bottom-sheet/index.tsx

@@ -1,66 +0,0 @@
-import { XMarkRegularIcon } from '@elixir/icons';
-import Pds2Button from '../../../atoms/button';
-import BottomSheetWrapper from './bottom-sheet-wrapper';
-
-type TAbhaBottomSheetProps = {
-  description: string;
-  subText?: string;
-  className?: string;
-  submitText: string;
-  onSubmitClick: () => void;
-  iconUrl?: string;
-  isBottomSheetOpen: boolean;
-  onBottomSheetClose: () => void;
-  shouldCloseOnClickOutside?: boolean;
-};
-
-const AbhaBottomSheet = ({
-  description,
-  subText,
-  submitText,
-  onSubmitClick,
-  iconUrl,
-  isBottomSheetOpen,
-  onBottomSheetClose,
-  shouldCloseOnClickOutside = true,
-}: TAbhaBottomSheetProps) => {
-  return (
-    <BottomSheetWrapper
-      isOpen={isBottomSheetOpen}
-      setIsOpen={onBottomSheetClose}
-      shouldCloseOnClickOutside={shouldCloseOnClickOutside}
-    >
-      <div className="pds2-flex pds2-flex-col pds2-p-16 pds2-text-center">
-        {shouldCloseOnClickOutside ? (
-          <div className="pds2-flex pds2-justify-end pds2-items-center">
-            <button
-              onClick={onBottomSheetClose}
-              className="pds2-w-24 pds2-h-24 pds2-rounded-full pds2-flex pds2-items-center pds2-justify-center ripple"
-            >
-              <XMarkRegularIcon className="pds2-w-18 pds2-h-18 pds2-text-text-03" />
-            </button>
-          </div>
-        ) : null}
-        <div className="pds2-space-y-8">
-          {iconUrl && (
-            <span className="pds2-flex pds2-justify-center">
-              <img src={iconUrl} className="pds2-w-64 pds2-h-64" alt="Bottom sheet icon" />
-            </span>
-          )}
-          <div className="Heading4Semibold pds2-text-text-01 pds2-py-16 pds2-text-18">
-            {description}
-          </div>
-          {subText && <div className="Body2Regular pds2-text-text-03">{subText}</div>}
-          <Pds2Button
-            title={submitText}
-            onClick={onSubmitClick}
-            state={'enabled'}
-            className="pds2-w-full"
-          />
-        </div>
-      </div>
-    </BottomSheetWrapper>
-  );
-};
-
-export default AbhaBottomSheet;