@cuemath/leap 3.5.43-j1 → 3.5.44-link.0

package/dist/features/parent-dashboard/parent-dashboard-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"parent-dashboard-view.js","sources":["../../../src/features/parent-dashboard/parent-dashboard-view.tsx"],"sourcesContent":["import { memo, useMemo, useCallback, type FC } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport OnboardingGuide from '../auth/pla-signup/onboarding-guide/onboarding-guide';\nimport SignupHeader from '../auth/pla-signup/signup-header/signup-header';\nimport TeacherProfile from '../trial-session/comps/teacher-intro/teacher-profile/teacher-profile';\nimport Button from '../ui/buttons/button/button';\nimport TextButton from '../ui/buttons/text-button/text-button';\nimport Error from '../ui/error/error';\nimport FlexView from '../ui/layout/flex-view';\nimport AppLoader from '../ui/loader/app-loader/app-loader';\nimport Separator from '../ui/separator/separator';\nimport Text from '../ui/text/text';\nimport { EDeviceType } from '../ui/theme/constants';\nimport { invalidateParentHome } from './api/parent-home';\nimport BillingInformation from './comps/billing-information/billing-information';\nimport CompactHeader from './comps/compact-header/compact-header';\nimport CuemathAppFeatures from './comps/cuemath-app-features/cuemath-app-features';\nimport MathPractice from './comps/math-practice/math-practice';\nimport NextSteps from './comps/next-steps/next-steps';\nimport ParentDashboardFaqs from './comps/parent-dashboard-faqs/parent-dashboard-faqs';\nimport SessionStatus from './comps/session-status/session-status';\nimport SessionSummary from './comps/session-summary/session-summary';\nimport UpcomingSessions from './comps/upcoming-sessions/upcoming-sessions';\nimport useParentHomeData from './hooks/use-parent-home-data';\nimport useStudentProfileSummaryData from './hooks/use-student-profile-summary-data';\nimport { usePLAModalHandlers } from './modals/hooks/use-pla-model-handlers';\nimport { DESKTOP_SPACING, MOBILE_SPACING } from './parent-dashboard-constants';\nimport * as Styled from './parent-dashboard-styled';\nimport type { ESummaryType, IParentDashboardProps, ISpacingConfig } from './parent-dashboard-types';\n\nconst ParentDashboardView: FC<IParentDashboardProps> = memo(function ParentDashboardView({\n  studentName,\n  studentId,\n  onRescheduleDemo,\n  onViewSummary,\n  onGetStartedAgain,\n  onChangeTutor,\n  onSwitchUser,\n  HeaderAvatar,\n}) {\n  const { device } = useTheme();\n  const isMobile = device <= EDeviceType.MOBILE;\n\n  const parentHomeData = useParentHomeData(studentId);\n  const {\n    isStudentNoShow,\n    isTutorNoShow,\n    teacherDetails,\n    billingDetails,\n    teacherName,\n    completedSessions,\n    nextSessionStart,\n    nextSessionEnd,\n    upcomingSessions,\n    isTrialDone,\n    isOnlyTrialDone,\n    isRegularClassDone,\n    showLoading = false,\n    demoId,\n    isProcessingFailed,\n    userAttemptId,\n    isSubscriptionCancelled,\n    canChangeTutor,\n    sessionDetails,\n    cardOnFileNotAvailable,\n    isCardDeclined,\n  } = parentHomeData;\n  const { summaryInfo, fetchSummaryData } = useStudentProfileSummaryData(studentId);\n\n  const spacing = useMemo<ISpacingConfig>(\n    () => (isMobile ? MOBILE_SPACING : DESKTOP_SPACING),\n    [isMobile],\n  );\n\n  const buttonWidth = useMemo(() => (isMobile ? '100%' : 200), [isMobile]);\n\n  const handleTryAgain = useCallback(() => {\n    invalidateParentHome(studentId);\n    fetchSummaryData();\n  }, [fetchSummaryData, studentId]);\n\n  const handleRescheduleDemo = useCallback(() => {\n    onRescheduleDemo(demoId);\n  }, [demoId, onRescheduleDemo]);\n\n  const handleChangeTutor = useCallback(() => {\n    onChangeTutor(demoId);\n  }, [demoId, onChangeTutor]);\n\n  const { onCancelSubscription, onViewPaymentMethod } = usePLAModalHandlers({\n    demoId,\n    studentId,\n    isTrialDone,\n    studentName,\n    billingDetails,\n    withTutor: !!teacherName,\n    onChangeTutor: handleChangeTutor,\n    onRescheduleDemo: handleRescheduleDemo,\n  });\n\n  const handleViewSummary = useCallback(\n    (key: ESummaryType) => {\n      onViewSummary?.(key, { ...summaryInfo, userAttemptId: userAttemptId ?? null });\n    },\n    [onViewSummary, summaryInfo, userAttemptId],\n  );\n\n  const sessionStatusProps = useMemo(\n    () => ({\n      completedSessions,\n      nextSessionStartTime: nextSessionStart,\n      teacherName,\n      isTutorNoShow,\n      isStudentNoShow,\n      nextSessionEndTime: nextSessionEnd,\n      studentName,\n      onRescheduleClick: handleRescheduleDemo,\n      isTrialDone,\n      isOnlyTrialDone,\n    }),\n    [\n      completedSessions,\n      nextSessionStart,\n      teacherName,\n      isTutorNoShow,\n      isStudentNoShow,\n      nextSessionEnd,\n      studentName,\n      handleRescheduleDemo,\n      isTrialDone,\n      isOnlyTrialDone,\n    ],\n  );\n\n  const sessionSummaryProps = useMemo(\n    () => ({\n      isTrialDone,\n      studentName,\n      onViewSummary: handleViewSummary,\n    }),\n    [isTrialDone, studentName, handleViewSummary],\n  );\n\n  const CancelledSubscriptionView = useMemo(\n    () => (\n      <FlexView>\n        <SignupHeader />\n        <Separator height={spacing.separator.extraLarge} />\n        <OnboardingGuide orientation=\"horizontal\" />\n        {onGetStartedAgain && (\n          <FlexView>\n            <Separator height={spacing.medium} />\n            <Button\n              label=\"Get Started\"\n              renderAs=\"yellow-dark\"\n              shape=\"square\"\n              size=\"small\"\n              width={buttonWidth}\n              onClick={onGetStartedAgain}\n            />\n          </FlexView>\n        )}\n      </FlexView>\n    ),\n    [spacing, buttonWidth, onGetStartedAgain],\n  );\n\n  const SessionStatusSection = useMemo(\n    () => <SessionStatus {...sessionStatusProps} />,\n    [sessionStatusProps],\n  );\n\n  const TeacherProfileSection = useMemo(() => {\n    if (!teacherDetails || isTrialDone) return null;\n\n    return (\n      <FlexView>\n        <Separator height={spacing.separator.large} />\n        <TeacherProfile teacherProfile={teacherDetails} />\n      </FlexView>\n    );\n  }, [teacherDetails, isTrialDone, spacing.separator.large]);\n\n  const SessionSummarySection = useMemo(() => {\n    if (isRegularClassDone) return null;\n\n    return (\n      <FlexView>\n        <Separator height={spacing.separator.extraLarge} />\n        <SessionSummary {...sessionSummaryProps} />\n      </FlexView>\n    );\n  }, [isRegularClassDone, spacing.separator.extraLarge, sessionSummaryProps]);\n\n  const TutorChangeSection = useMemo(() => {\n    if (!canChangeTutor) return null;\n\n    return (\n      <FlexView>\n        <Separator height={spacing.separator.small} />\n        <FlexView $flexDirection=\"row\" $flexColumnGapX={0.25}>\n          <Text $renderAs=\"ub1\" $renderOnMobileAs=\"ub2\" $color=\"WHITE\">\n            Not the right fit for your child?\n          </Text>\n          <TextButton\n            color=\"WHITE_1\"\n            sizeOnMobile=\"small\"\n            label=\"Try another tutor\"\n            onClick={handleChangeTutor}\n          />\n        </FlexView>\n      </FlexView>\n    );\n  }, [canChangeTutor, spacing.separator.small, handleChangeTutor]);\n\n  const TeacherDetailsSection = useMemo(() => {\n    if (!teacherDetails) return null;\n\n    return (\n      <FlexView>\n        <Separator height={spacing.separator.extraLarge} />\n        <Text $renderAs=\"ah4-bold\" $renderOnMobileAs=\"ab1-bold\" $color=\"WHITE\">\n          Know your tutor\n        </Text>\n        <Separator height={spacing.separator.medium} />\n        <TeacherProfile teacherProfile={teacherDetails} />\n        {TutorChangeSection}\n      </FlexView>\n    );\n  }, [teacherDetails, spacing.separator, TutorChangeSection]);\n\n  const OnlyTrialDoneSection = useMemo(() => {\n    if (!isOnlyTrialDone) return null;\n\n    return (\n      <FlexView>\n        <Separator height={spacing.separator.extraLarge} />\n        <NextSteps />\n        <UpcomingSessions sessions={upcomingSessions} />\n        {TeacherDetailsSection}\n      </FlexView>\n    );\n  }, [isOnlyTrialDone, spacing.separator.extraLarge, upcomingSessions, TeacherDetailsSection]);\n\n  const AppFeaturesSection = useMemo(() => {\n    if (!isTrialDone) return null;\n\n    return (\n      <FlexView>\n        <Separator height={spacing.separator.extraLarge} />\n        <CuemathAppFeatures />\n      </FlexView>\n    );\n  }, [isTrialDone, spacing.separator.extraLarge]);\n\n  const MathPracticeSection = useMemo(() => {\n    if (isRegularClassDone) return null;\n\n    return (\n      <FlexView>\n        <Separator height={spacing.separator.extraLarge} />\n        <Styled.MathPracticeWrapper>\n          <MathPractice onSwitchUser={onSwitchUser} />\n        </Styled.MathPracticeWrapper>\n      </FlexView>\n    );\n  }, [isRegularClassDone, spacing.separator.extraLarge, onSwitchUser]);\n\n  const BillingInformationSection = useMemo(() => {\n    if (!billingDetails) return null;\n\n    return (\n      <FlexView>\n        <Separator height={spacing.separator.extraLarge} />\n        <BillingInformation\n          billingDetails={billingDetails}\n          onViewPaymentMethod={onViewPaymentMethod}\n          onCancelSubscription={onCancelSubscription}\n        />\n      </FlexView>\n    );\n  }, [billingDetails, spacing.separator.extraLarge, onViewPaymentMethod, onCancelSubscription]);\n\n  const MainContent = useMemo(\n    () => (\n      <FlexView>\n        {SessionStatusSection}\n        {TeacherProfileSection}\n        {SessionSummarySection}\n        {OnlyTrialDoneSection}\n        {AppFeaturesSection}\n        {MathPracticeSection}\n        {BillingInformationSection}\n      </FlexView>\n    ),\n    [\n      SessionStatusSection,\n      TeacherProfileSection,\n      SessionSummarySection,\n      OnlyTrialDoneSection,\n      AppFeaturesSection,\n      MathPracticeSection,\n      BillingInformationSection,\n    ],\n  );\n\n  const FaqsSection = useMemo(\n    () => (\n      <FlexView>\n        <Separator height={spacing.separator.extraLarge} />\n        <ParentDashboardFaqs />\n      </FlexView>\n    ),\n    [spacing.separator.extraLarge],\n  );\n\n  const isLoading = useMemo(() => {\n    return isCardDeclined || cardOnFileNotAvailable || !sessionDetails || showLoading;\n  }, [cardOnFileNotAvailable, isCardDeclined, sessionDetails, showLoading]);\n\n  if (isLoading) {\n    return <AppLoader height=\"100dvh\" />;\n  }\n\n  if (isProcessingFailed) {\n    return (\n      <FlexView $flex={1} $alignItems=\"center\" $justifyContent=\"center\">\n        <Error theme=\"dark\" onTryAgain={handleTryAgain} />\n      </FlexView>\n    );\n  }\n\n  return (\n    <Styled.Container>\n      <CompactHeader HeaderAvatar={HeaderAvatar} />\n      <Styled.ContentWrapper\n        $flex={1}\n        $width=\"100%\"\n        $height=\"100%\"\n        $background=\"BLACK_1\"\n        $gap={spacing.medium}\n        $gutter={spacing.small}\n      >\n        {isSubscriptionCancelled ? CancelledSubscriptionView : MainContent}\n        {FaqsSection}\n      </Styled.ContentWrapper>\n    </Styled.Container>\n  );\n});\n\nexport default ParentDashboardView;\n"],"names":["ParentDashboardView","memo","studentName","studentId","onRescheduleDemo","onViewSummary","onGetStartedAgain","onChangeTutor","onSwitchUser","HeaderAvatar","device","useTheme","isMobile","EDeviceType","parentHomeData","useParentHomeData","isStudentNoShow","isTutorNoShow","teacherDetails","billingDetails","teacherName","completedSessions","nextSessionStart","nextSessionEnd","upcomingSessions","isTrialDone","isOnlyTrialDone","isRegularClassDone","showLoading","demoId","isProcessingFailed","userAttemptId","isSubscriptionCancelled","canChangeTutor","sessionDetails","cardOnFileNotAvailable","isCardDeclined","summaryInfo","fetchSummaryData","useStudentProfileSummaryData","spacing","useMemo","MOBILE_SPACING","DESKTOP_SPACING","buttonWidth","handleTryAgain","useCallback","invalidateParentHome","handleRescheduleDemo","handleChangeTutor","onCancelSubscription","onViewPaymentMethod","usePLAModalHandlers","handleViewSummary","key","sessionStatusProps","sessionSummaryProps","CancelledSubscriptionView","FlexView","jsx","SignupHeader","Separator","OnboardingGuide","Button","SessionStatusSection","SessionStatus","TeacherProfileSection","TeacherProfile","SessionSummarySection","SessionSummary","TutorChangeSection","jsxs","Text","TextButton","TeacherDetailsSection","OnlyTrialDoneSection","NextSteps","UpcomingSessions","AppFeaturesSection","CuemathAppFeatures","MathPracticeSection","Styled.MathPracticeWrapper","MathPractice","BillingInformationSection","BillingInformation","MainContent","FaqsSection","ParentDashboardFaqs","AppLoader","Error","Styled.Container","CompactHeader","Styled.ContentWrapper"],"mappings":"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"}
+{"version":3,"file":"parent-dashboard-view.js","sources":["../../../src/features/parent-dashboard/parent-dashboard-view.tsx"],"sourcesContent":["import { memo, useMemo, useCallback, type FC } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport TeacherProfile from '../trial-session/comps/teacher-intro/teacher-profile/teacher-profile';\nimport TextButton from '../ui/buttons/text-button/text-button';\nimport Error from '../ui/error/error';\nimport FlexView from '../ui/layout/flex-view';\nimport AppLoader from '../ui/loader/app-loader/app-loader';\nimport Separator from '../ui/separator/separator';\nimport Text from '../ui/text/text';\nimport { EDeviceType } from '../ui/theme/constants';\nimport { invalidateParentHome } from './api/parent-home';\nimport BillingInformation from './comps/billing-information/billing-information';\nimport CompactHeader from './comps/compact-header/compact-header';\nimport CuemathAppFeatures from './comps/cuemath-app-features/cuemath-app-features';\nimport MathPractice from './comps/math-practice/math-practice';\nimport NextSteps from './comps/next-steps/next-steps';\nimport ParentDashboardFaqs from './comps/parent-dashboard-faqs/parent-dashboard-faqs';\nimport SessionStatus from './comps/session-status/session-status';\nimport SessionSummary from './comps/session-summary/session-summary';\nimport UpcomingSessions from './comps/upcoming-sessions/upcoming-sessions';\nimport useParentHomeData from './hooks/use-parent-home-data';\nimport useStudentProfileSummaryData from './hooks/use-student-profile-summary-data';\nimport { usePLAModalHandlers } from './modals/hooks/use-pla-model-handlers';\nimport { DESKTOP_SPACING, MOBILE_SPACING } from './parent-dashboard-constants';\nimport * as Styled from './parent-dashboard-styled';\nimport type { ESummaryType, IParentDashboardProps, ISpacingConfig } from './parent-dashboard-types';\nimport SubscriptionInitiation from './comps/subscription-initiation/subscription-initiation';\n\nconst ParentDashboardView: FC<IParentDashboardProps> = memo(function ParentDashboardView({\n  studentName,\n  studentId,\n  onRescheduleDemo,\n  onViewSummary,\n  onGetStartedAgain,\n  onChangeTutor,\n  onSwitchUser,\n  HeaderAvatar,\n}) {\n  const { device } = useTheme();\n  const isMobile = device <= EDeviceType.MOBILE;\n\n  const parentHomeData = useParentHomeData(studentId);\n  const {\n    isStudentNoShow,\n    isTutorNoShow,\n    teacherDetails,\n    billingDetails,\n    teacherName,\n    completedSessions,\n    nextSessionStart,\n    nextSessionEnd,\n    upcomingSessions,\n    isTrialDone,\n    isOnlyTrialDone,\n    isRegularClassDone,\n    showLoading = false,\n    demoId,\n    isProcessingFailed,\n    userAttemptId,\n    isSubscriptionCancelled,\n    canChangeTutor,\n    sessionDetails,\n    cardOnFileNotAvailable,\n    isCardDeclined,\n  } = parentHomeData;\n  const { summaryInfo, fetchSummaryData } = useStudentProfileSummaryData(studentId);\n\n  const spacing = useMemo<ISpacingConfig>(\n    () => (isMobile ? MOBILE_SPACING : DESKTOP_SPACING),\n    [isMobile],\n  );\n\n  const handleTryAgain = useCallback(() => {\n    invalidateParentHome(studentId);\n    fetchSummaryData();\n  }, [fetchSummaryData, studentId]);\n\n  const handleRescheduleDemo = useCallback(() => {\n    onRescheduleDemo(demoId);\n  }, [demoId, onRescheduleDemo]);\n\n  const handleChangeTutor = useCallback(() => {\n    onChangeTutor(demoId);\n  }, [demoId, onChangeTutor]);\n\n  const { onCancelSubscription, onViewPaymentMethod } = usePLAModalHandlers({\n    demoId,\n    studentId,\n    isTrialDone,\n    studentName,\n    billingDetails,\n    withTutor: !!teacherName,\n    onChangeTutor: handleChangeTutor,\n    onRescheduleDemo: handleRescheduleDemo,\n  });\n\n  const handleViewSummary = useCallback(\n    (key: ESummaryType) => {\n      onViewSummary?.(key, { ...summaryInfo, userAttemptId: userAttemptId ?? null });\n    },\n    [onViewSummary, summaryInfo, userAttemptId],\n  );\n\n  const sessionStatusProps = useMemo(\n    () => ({\n      completedSessions,\n      nextSessionStartTime: nextSessionStart,\n      teacherName,\n      isTutorNoShow,\n      isStudentNoShow,\n      nextSessionEndTime: nextSessionEnd,\n      studentName,\n      onRescheduleClick: handleRescheduleDemo,\n      isTrialDone,\n      isOnlyTrialDone,\n    }),\n    [\n      completedSessions,\n      nextSessionStart,\n      teacherName,\n      isTutorNoShow,\n      isStudentNoShow,\n      nextSessionEnd,\n      studentName,\n      handleRescheduleDemo,\n      isTrialDone,\n      isOnlyTrialDone,\n    ],\n  );\n\n  const sessionSummaryProps = useMemo(\n    () => ({\n      isTrialDone,\n      studentName,\n      onViewSummary: handleViewSummary,\n    }),\n    [isTrialDone, studentName, handleViewSummary],\n  );\n\n  const CancelledSubscriptionView = useMemo(\n    () => <SubscriptionInitiation onGetStartedAgain={onGetStartedAgain} />,\n    [onGetStartedAgain],\n  );\n\n  const SessionStatusSection = useMemo(\n    () => <SessionStatus {...sessionStatusProps} />,\n    [sessionStatusProps],\n  );\n\n  const TeacherProfileSection = useMemo(() => {\n    if (!teacherDetails || isTrialDone) return null;\n\n    return (\n      <FlexView>\n        <Separator height={spacing.separator.large} />\n        <TeacherProfile teacherProfile={teacherDetails} />\n      </FlexView>\n    );\n  }, [teacherDetails, isTrialDone, spacing.separator.large]);\n\n  const SessionSummarySection = useMemo(() => {\n    if (isRegularClassDone) return null;\n\n    return (\n      <FlexView>\n        <Separator height={spacing.separator.extraLarge} />\n        <SessionSummary {...sessionSummaryProps} />\n      </FlexView>\n    );\n  }, [isRegularClassDone, spacing.separator.extraLarge, sessionSummaryProps]);\n\n  const TutorChangeSection = useMemo(() => {\n    if (!canChangeTutor) return null;\n\n    return (\n      <FlexView>\n        <Separator height={spacing.separator.small} />\n        <FlexView $flexDirection=\"row\" $flexColumnGapX={0.25}>\n          <Text $renderAs=\"ub1\" $renderOnMobileAs=\"ub2\" $color=\"WHITE\">\n            Not the right fit for your child?\n          </Text>\n          <TextButton\n            color=\"WHITE_1\"\n            sizeOnMobile=\"small\"\n            label=\"Try another tutor\"\n            onClick={handleChangeTutor}\n          />\n        </FlexView>\n      </FlexView>\n    );\n  }, [canChangeTutor, spacing.separator.small, handleChangeTutor]);\n\n  const TeacherDetailsSection = useMemo(() => {\n    if (!teacherDetails) return null;\n\n    return (\n      <FlexView>\n        <Separator height={spacing.separator.extraLarge} />\n        <Text $renderAs=\"ah4-bold\" $renderOnMobileAs=\"ab1-bold\" $color=\"WHITE\">\n          Know your tutor\n        </Text>\n        <Separator height={spacing.separator.medium} />\n        <TeacherProfile teacherProfile={teacherDetails} />\n        {TutorChangeSection}\n      </FlexView>\n    );\n  }, [teacherDetails, spacing.separator, TutorChangeSection]);\n\n  const OnlyTrialDoneSection = useMemo(() => {\n    if (!isOnlyTrialDone) return null;\n\n    return (\n      <FlexView>\n        <Separator height={spacing.separator.extraLarge} />\n        <NextSteps />\n        <UpcomingSessions sessions={upcomingSessions} />\n        {TeacherDetailsSection}\n      </FlexView>\n    );\n  }, [isOnlyTrialDone, spacing.separator.extraLarge, upcomingSessions, TeacherDetailsSection]);\n\n  const AppFeaturesSection = useMemo(() => {\n    if (!isTrialDone) return null;\n\n    return (\n      <FlexView>\n        <Separator height={spacing.separator.extraLarge} />\n        <CuemathAppFeatures />\n      </FlexView>\n    );\n  }, [isTrialDone, spacing.separator.extraLarge]);\n\n  const MathPracticeSection = useMemo(() => {\n    if (isRegularClassDone) return null;\n\n    return (\n      <FlexView>\n        <Separator height={spacing.separator.extraLarge} />\n        <Styled.MathPracticeWrapper>\n          <MathPractice onSwitchUser={onSwitchUser} />\n        </Styled.MathPracticeWrapper>\n      </FlexView>\n    );\n  }, [isRegularClassDone, spacing.separator.extraLarge, onSwitchUser]);\n\n  const BillingInformationSection = useMemo(() => {\n    if (!billingDetails) return null;\n\n    return (\n      <FlexView>\n        <Separator height={spacing.separator.extraLarge} />\n        <BillingInformation\n          billingDetails={billingDetails}\n          onViewPaymentMethod={onViewPaymentMethod}\n          onCancelSubscription={onCancelSubscription}\n        />\n      </FlexView>\n    );\n  }, [billingDetails, spacing.separator.extraLarge, onViewPaymentMethod, onCancelSubscription]);\n\n  const MainContent = useMemo(\n    () => (\n      <FlexView>\n        {SessionStatusSection}\n        {TeacherProfileSection}\n        {SessionSummarySection}\n        {OnlyTrialDoneSection}\n        {AppFeaturesSection}\n        {MathPracticeSection}\n        {BillingInformationSection}\n      </FlexView>\n    ),\n    [\n      SessionStatusSection,\n      TeacherProfileSection,\n      SessionSummarySection,\n      OnlyTrialDoneSection,\n      AppFeaturesSection,\n      MathPracticeSection,\n      BillingInformationSection,\n    ],\n  );\n\n  const FaqsSection = useMemo(\n    () => (\n      <FlexView>\n        <Separator height={spacing.separator.extraLarge} />\n        <ParentDashboardFaqs />\n      </FlexView>\n    ),\n    [spacing.separator.extraLarge],\n  );\n\n  const isLoading = useMemo(() => {\n    return isCardDeclined || cardOnFileNotAvailable || !sessionDetails || showLoading;\n  }, [cardOnFileNotAvailable, isCardDeclined, sessionDetails, showLoading]);\n\n  if (isLoading) {\n    return <AppLoader height=\"100dvh\" />;\n  }\n\n  if (isProcessingFailed) {\n    return (\n      <FlexView $flex={1} $alignItems=\"center\" $justifyContent=\"center\">\n        <Error theme=\"dark\" onTryAgain={handleTryAgain} />\n      </FlexView>\n    );\n  }\n\n  return (\n    <Styled.Container>\n      <CompactHeader HeaderAvatar={HeaderAvatar} />\n      <Styled.ContentWrapper\n        $flex={1}\n        $width=\"100%\"\n        $height=\"100%\"\n        $background=\"BLACK_1\"\n        $gap={spacing.medium}\n        $gutter={spacing.small}\n      >\n        {isSubscriptionCancelled ? CancelledSubscriptionView : MainContent}\n        {FaqsSection}\n      </Styled.ContentWrapper>\n    </Styled.Container>\n  );\n});\n\nexport default ParentDashboardView;\n"],"names":["ParentDashboardView","memo","studentName","studentId","onRescheduleDemo","onViewSummary","onGetStartedAgain","onChangeTutor","onSwitchUser","HeaderAvatar","device","useTheme","isMobile","EDeviceType","parentHomeData","useParentHomeData","isStudentNoShow","isTutorNoShow","teacherDetails","billingDetails","teacherName","completedSessions","nextSessionStart","nextSessionEnd","upcomingSessions","isTrialDone","isOnlyTrialDone","isRegularClassDone","showLoading","demoId","isProcessingFailed","userAttemptId","isSubscriptionCancelled","canChangeTutor","sessionDetails","cardOnFileNotAvailable","isCardDeclined","summaryInfo","fetchSummaryData","useStudentProfileSummaryData","spacing","useMemo","MOBILE_SPACING","DESKTOP_SPACING","handleTryAgain","useCallback","invalidateParentHome","handleRescheduleDemo","handleChangeTutor","onCancelSubscription","onViewPaymentMethod","usePLAModalHandlers","handleViewSummary","key","sessionStatusProps","sessionSummaryProps","CancelledSubscriptionView","jsx","SubscriptionInitiation","SessionStatusSection","SessionStatus","TeacherProfileSection","FlexView","Separator","TeacherProfile","SessionSummarySection","SessionSummary","TutorChangeSection","jsxs","Text","TextButton","TeacherDetailsSection","OnlyTrialDoneSection","NextSteps","UpcomingSessions","AppFeaturesSection","CuemathAppFeatures","MathPracticeSection","Styled.MathPracticeWrapper","MathPractice","BillingInformationSection","BillingInformation","MainContent","FaqsSection","ParentDashboardFaqs","AppLoader","Error","Styled.Container","CompactHeader","Styled.ContentWrapper"],"mappings":"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"}

package/dist/features/ui/tabs/tab-tem/tab-item.js

@@ -1,51 +1,45 @@
-import { jsxs as p, jsx as r } from "react/jsx-runtime";
-import { memo as T, useMemo as x, useCallback as I } from "react";
-import { useTheme as g } from "styled-components";
-import v from "../../text/text.js";
-import { TabWrapper as j, Icon as k } from "../tabs-styled.js";
-const A = ({
-  tab: t,
-  isSelected: e,
-  onChange: c,
-  theme: l,
-  layout: m,
-  height: d,
-  minWidth: $
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { memo as p, useCallback as I } from "react";
+import T from "../../text/text.js";
+import { TabWrapper as f, Icon as b } from "../tabs-styled.js";
+const u = ({
+  tab: o,
+  isSelected: r,
+  onChange: n,
+  tabUnderlineColor: c = "WHITE_T_15",
+  selectedTabUnderlineColor: s = "WHITE",
+  activeTabTextProps: l = { $renderAs: "ub2-bold" },
+  inactiveTabTextProps: $ = { $renderAs: "ub2" }
 }) => {
-  const { tabs: f } = g(), { Icon: s, iconPosition: u = "left", disabled: o = !1 } = t, i = f[l], n = x(() => o ? "disabled" : e ? "active" : "inactive", [o, e]), a = i.text[n], C = n === "active" ? i.underline[n] : "TRANSPARENT", b = i.icon[n], h = I(() => {
-    o || c(t.id);
-  }, [t.id, c, o]);
-  return /* @__PURE__ */ p(
-    j,
+  const { Icon: t, iconPosition: m = "left" } = o, d = I(() => {
+    n(o.id);
+  }, [o.id, n]), i = r ? l : $;
+  return /* @__PURE__ */ a(
+    f,
     {
       $flexDirection: "row",
       $alignItems: "center",
       $justifyContent: "center",
-      $gutterX: 1,
-      onClick: h,
-      $borderBottomColor: C,
-      $disabled: o,
-      $layout: m,
-      $theme: l,
-      $isSelected: e,
-      $height: d,
-      $minWidth: $,
+      $gapX: 0.875,
+      onClick: d,
+      $borderBottomColor: r ? s : c,
       children: [
-        s && e && !o ? /* @__PURE__ */ r(k, { $iconPosition: u, $iconColor: b, children: /* @__PURE__ */ r(s, {}) }) : void 0,
-        /* @__PURE__ */ r(
-          v,
+        t ? /* @__PURE__ */ e(b, { $selected: r, $iconPosition: m, children: /* @__PURE__ */ e(t, {}) }) : void 0,
+        /* @__PURE__ */ e(
+          T,
           {
             $align: "center",
-            $color: a.color,
-            $renderAs: a.variant,
-            children: t.label
+            $color: "WHITE",
+            ...i,
+            $renderAs: i.$renderAs,
+            children: o.label
           }
         )
       ]
     }
   );
-}, w = T(A);
+}, h = p(u);
 export {
-  w as default
+  h as default
 };
 //# sourceMappingURL=tab-item.js.map

package/dist/features/ui/tabs/tab-tem/tab-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-item.js","sources":["../../../../../src/features/ui/tabs/tab-tem/tab-item.tsx"],"sourcesContent":["import { memo, useCallback, useMemo } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport Text from '../../text/text';\nimport type { TColorNames, TTextVariants } from '../../types';\nimport * as Styled from '../tabs-styled';\nimport type { ITabItemProps } from '../tabs-types';\n\nconst TabItemComponent = <TId extends string = string>({\n  tab,\n  isSelected,\n  onChange,\n  theme,\n  layout,\n  height,\n  minWidth,\n}: ITabItemProps<TId>) => {\n  const { tabs: tabsTheme } = useTheme();\n  const { Icon, iconPosition = 'left', disabled = false } = tab;\n  const themeConfig = tabsTheme[theme];\n  const tabState = useMemo(() => {\n    if (disabled) return 'disabled';\n\n    if (isSelected) return 'active';\n\n    return 'inactive';\n  }, [disabled, isSelected]);\n  const textConfig = themeConfig.text[tabState];\n  const underlineColor: TColorNames =\n    tabState === 'active' ? themeConfig.underline[tabState] : 'TRANSPARENT';\n  const iconColor = themeConfig.icon[tabState];\n\n  const handleClick = useCallback(() => {\n    if (!disabled) {\n      onChange(tab.id);\n    }\n  }, [tab.id, onChange, disabled]);\n\n  return (\n    <Styled.TabWrapper\n      $flexDirection=\"row\"\n      $alignItems=\"center\"\n      $justifyContent=\"center\"\n      $gutterX={1}\n      onClick={handleClick}\n      $borderBottomColor={underlineColor}\n      $disabled={disabled}\n      $layout={layout}\n      $theme={theme}\n      $isSelected={isSelected}\n      $height={height}\n      $minWidth={minWidth}\n    >\n      {Icon && isSelected && !disabled ? (\n        <Styled.Icon $iconPosition={iconPosition} $iconColor={iconColor}>\n          <Icon />\n        </Styled.Icon>\n      ) : undefined}\n      <Text\n        $align=\"center\"\n        $color={textConfig.color}\n        $renderAs={textConfig.variant as TTextVariants}\n      >\n        {tab.label}\n      </Text>\n    </Styled.TabWrapper>\n  );\n};\n\nconst TabItem = memo(TabItemComponent) as <TId extends string = string>(\n  props: ITabItemProps<TId>,\n) => React.ReactElement;\n\nexport default TabItem;\n"],"names":["TabItemComponent","tab","isSelected","onChange","theme","layout","height","minWidth","tabsTheme","useTheme","Icon","iconPosition","disabled","themeConfig","tabState","useMemo","textConfig","underlineColor","iconColor","handleClick","useCallback","jsxs","Styled.TabWrapper","jsx","Styled.Icon","Text","TabItem","memo"],"mappings":";;;;;AAQA,MAAMA,IAAmB,CAA8B;AAAA,EACrD,KAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AACF,MAA0B;AACxB,QAAM,EAAE,MAAMC,EAAU,IAAIC,EAAS,GAC/B,EAAA,MAAEC,GAAM,cAAAC,IAAe,QAAQ,UAAAC,IAAW,GAAU,IAAAX,GACpDY,IAAcL,EAAUJ,CAAK,GAC7BU,IAAWC,EAAQ,MACnBH,IAAiB,aAEjBV,IAAmB,WAEhB,YACN,CAACU,GAAUV,CAAU,CAAC,GACnBc,IAAaH,EAAY,KAAKC,CAAQ,GACtCG,IACJH,MAAa,WAAWD,EAAY,UAAUC,CAAQ,IAAI,eACtDI,IAAYL,EAAY,KAAKC,CAAQ,GAErCK,IAAcC,EAAY,MAAM;AACpC,IAAKR,KACHT,EAASF,EAAI,EAAE;AAAA,KAEhB,CAACA,EAAI,IAAIE,GAAUS,CAAQ,CAAC;AAG7B,SAAA,gBAAAS;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,gBAAe;AAAA,MACf,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAChB,UAAU;AAAA,MACV,SAASH;AAAA,MACT,oBAAoBF;AAAA,MACpB,WAAWL;AAAA,MACX,SAASP;AAAA,MACT,QAAQD;AAAA,MACR,aAAaF;AAAA,MACb,SAASI;AAAA,MACT,WAAWC;AAAA,MAEV,UAAA;AAAA,QAAAG,KAAQR,KAAc,CAACU,IACtB,gBAAAW,EAACC,GAAA,EAAY,eAAeb,GAAc,YAAYO,GACpD,UAAC,gBAAAK,EAAAb,GAAA,CAAA,CAAK,GACR,IACE;AAAA,QACJ,gBAAAa;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,QAAO;AAAA,YACP,QAAQT,EAAW;AAAA,YACnB,WAAWA,EAAW;AAAA,YAErB,UAAIf,EAAA;AAAA,UAAA;AAAA,QACP;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,GAEMyB,IAAUC,EAAK3B,CAAgB;"}
+{"version":3,"file":"tab-item.js","sources":["../../../../../src/features/ui/tabs/tab-tem/tab-item.tsx"],"sourcesContent":["import { memo, useCallback } from 'react';\n\nimport Text from '../../text/text';\nimport * as Styled from '../tabs-styled';\nimport type { ITabItemProps } from '../tabs-types';\n\nconst TabItem = ({\n  tab,\n  isSelected,\n  onChange,\n  tabUnderlineColor = 'WHITE_T_15',\n  selectedTabUnderlineColor = 'WHITE',\n  activeTabTextProps = { $renderAs: 'ub2-bold' },\n  inactiveTabTextProps = { $renderAs: 'ub2' },\n}: ITabItemProps) => {\n  const { Icon, iconPosition = 'left' } = tab;\n\n  const handleClick = useCallback(() => {\n    onChange(tab.id);\n  }, [tab.id, onChange]);\n\n  const activeTextProps = isSelected ? activeTabTextProps : inactiveTabTextProps;\n\n  return (\n    <Styled.TabWrapper\n      $flexDirection=\"row\"\n      $alignItems=\"center\"\n      $justifyContent=\"center\"\n      $gapX={0.875}\n      onClick={handleClick}\n      $borderBottomColor={isSelected ? selectedTabUnderlineColor : tabUnderlineColor}\n    >\n      {Icon ? (\n        <Styled.Icon $selected={isSelected} $iconPosition={iconPosition}>\n          <Icon />\n        </Styled.Icon>\n      ) : undefined}\n      <Text\n        $align=\"center\"\n        $color=\"WHITE\"\n        {...activeTextProps}\n        $renderAs={activeTextProps.$renderAs}\n      >\n        {tab.label}\n      </Text>\n    </Styled.TabWrapper>\n  );\n};\n\nexport default memo(TabItem);\n"],"names":["TabItem","tab","isSelected","onChange","tabUnderlineColor","selectedTabUnderlineColor","activeTabTextProps","inactiveTabTextProps","Icon","iconPosition","handleClick","useCallback","activeTextProps","jsxs","Styled.TabWrapper","jsx","Styled.Icon","Text","TabItem$1","memo"],"mappings":";;;;AAMA,MAAMA,IAAU,CAAC;AAAA,EACf,KAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,mBAAAC,IAAoB;AAAA,EACpB,2BAAAC,IAA4B;AAAA,EAC5B,oBAAAC,IAAqB,EAAE,WAAW,WAAW;AAAA,EAC7C,sBAAAC,IAAuB,EAAE,WAAW,MAAM;AAC5C,MAAqB;AACnB,QAAM,EAAEC,MAAAA,GAAM,cAAAC,IAAe,OAAA,IAAWR,GAElCS,IAAcC,EAAY,MAAM;AACpC,IAAAR,EAASF,EAAI,EAAE;AAAA,EACd,GAAA,CAACA,EAAI,IAAIE,CAAQ,CAAC,GAEfS,IAAkBV,IAAaI,IAAqBC;AAGxD,SAAA,gBAAAM;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,gBAAe;AAAA,MACf,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAChB,OAAO;AAAA,MACP,SAASJ;AAAA,MACT,oBAAoBR,IAAaG,IAA4BD;AAAA,MAE5D,UAAA;AAAA,QACCI,IAAA,gBAAAO,EAACC,GAAA,EAAY,WAAWd,GAAY,eAAeO,GACjD,UAAA,gBAAAM,EAACP,GAAK,CAAA,CAAA,EACR,CAAA,IACE;AAAA,QACJ,gBAAAO;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,QAAO;AAAA,YACP,QAAO;AAAA,YACN,GAAGL;AAAA,YACJ,WAAWA,EAAgB;AAAA,YAE1B,UAAIX,EAAA;AAAA,UAAA;AAAA,QACP;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,GAEeiB,IAAAC,EAAKnB,CAAO;"}

package/dist/features/ui/tabs/tabs-styled.js

@@ -1,57 +1,31 @@
-import n from "styled-components";
-import g from "../layout/flex-view.js";
-const f = n.div(({ theme: t, $inactiveUnderlineColor: o }) => {
-  const { colors: r } = t;
+import e from "styled-components";
+import i from "../layout/flex-view.js";
+const l = e.div(({ theme: r, $tabsCount: o, $background: t }) => {
+  const { colors: s } = r;
   return `
-    display: flex;
-    border-bottom: 1.5px solid ${r[o]};
-    position: relative;
+    display: grid;
+    background: ${s[t]};
+    grid-template-columns: repeat(${o}, 1fr);
   `;
-}), m = n(g)(({
-  theme: t,
-  $borderBottomColor: o,
-  $disabled: r,
-  $layout: e,
-  $theme: l,
-  $isSelected: a,
-  $height: p,
-  $minWidth: s
-}) => {
-  const { colors: i, tabs: c } = t, d = c[l], x = i[d.background.hover];
-  return `
-    cursor: ${r ? "not-allowed" : "pointer"};
-    border-bottom: 1.5px solid ${i[o]};
+}), a = e(i)(({ $borderBottomColor: r }) => `
+    cursor: pointer;
+    border-bottom: 1.5px solid ${r};
     transition: all 0.3s ease;
-    height: ${p || 40}px;
-    ${s ? `min-width: ${s}px;` : ""}
-    position: relative;
-    margin-bottom: -1.5px;
-    background-color: transparent;
-    ${e === "fill" ? "flex: 1;" : "flex-shrink: 0;"}
-
-    ${!r && !a ? `
-      &:hover {
-        background-color: ${x};
-      }
-    ` : ""}
-  `;
-}), $ = n.div(({ theme: t, $iconPosition: o, $iconColor: r }) => {
-  const { colors: e } = t;
-  return `
+  `), d = e.div(({ theme: r, $iconPosition: o, $selected: t }) => `
     ${o === "left" ? "padding-right" : "padding-left"}: 4px;
     order: ${o === "left" ? -1 : 1};
-
+    
     & svg {
+      display: ${t ? "block" : "none"};
       width: 16px;
       height: 16px;
-      color: ${e[r]};
+      color: ${r.colors.WHITE_1};
       transition: color 0.2s ease-in-out;
     }
-  `;
-});
+      `);
 export {
-  $ as Icon,
-  m as TabWrapper,
-  f as TabsWrapper
+  d as Icon,
+  a as TabWrapper,
+  l as TabsWrapper
 };
 //# sourceMappingURL=tabs-styled.js.map

package/dist/features/ui/tabs/tabs-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-styled.js","sources":["../../../../src/features/ui/tabs/tabs-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../layout/flex-view';\nimport type { TColorNames } from '../types';\nimport type { ITabItem, TTabsLayout } from './tabs-types';\nimport type { TTabsTheme } from '../theme/tabs';\n\ninterface ITabsWrapperProps {\n  $inactiveUnderlineColor: TColorNames;\n}\n\nconst TabsWrapper = styled.div<ITabsWrapperProps>(({ theme, $inactiveUnderlineColor }) => {\n  const { colors } = theme;\n\n  return `\n    display: flex;\n    border-bottom: 1.5px solid ${colors[$inactiveUnderlineColor]};\n    position: relative;\n  `;\n});\n\ninterface ITabWrapperProps {\n  $borderBottomColor: TColorNames;\n  $disabled?: boolean;\n  $layout: TTabsLayout;\n  $theme: TTabsTheme;\n  $isSelected?: boolean;\n  $height?: number;\n  $minWidth?: number;\n}\n\nconst TabWrapper = styled(FlexView)<ITabWrapperProps>(({\n  theme,\n  $borderBottomColor,\n  $disabled,\n  $layout,\n  $theme: tabsTheme,\n  $isSelected,\n  $height,\n  $minWidth,\n}) => {\n  const { colors, tabs } = theme;\n  const tabsThemeConfig = tabs[tabsTheme];\n  const hoverBackgroundColor = colors[tabsThemeConfig.background.hover];\n\n  return `\n    cursor: ${$disabled ? 'not-allowed' : 'pointer'};\n    border-bottom: 1.5px solid ${colors[$borderBottomColor]};\n    transition: all 0.3s ease;\n    height: ${$height || 40}px;\n    ${$minWidth ? `min-width: ${$minWidth}px;` : ''}\n    position: relative;\n    margin-bottom: -1.5px;\n    background-color: transparent;\n    ${$layout === 'fill' ? 'flex: 1;' : 'flex-shrink: 0;'}\n\n    ${\n      !$disabled && !$isSelected\n        ? `\n      &:hover {\n        background-color: ${hoverBackgroundColor};\n      }\n    `\n        : ''\n    }\n  `;\n});\n\ninterface IStyledIconProps {\n  $iconPosition: NonNullable<ITabItem['iconPosition']>;\n  $iconColor: TColorNames;\n}\n\nconst Icon = styled.div<IStyledIconProps>(({ theme, $iconPosition, $iconColor }) => {\n  const { colors } = theme;\n\n  return `\n    ${$iconPosition === 'left' ? 'padding-right' : 'padding-left'}: 4px;\n    order: ${$iconPosition === 'left' ? -1 : 1};\n\n    & svg {\n      width: 16px;\n      height: 16px;\n      color: ${colors[$iconColor]};\n      transition: color 0.2s ease-in-out;\n    }\n  `;\n});\n\nexport { TabsWrapper, Icon, TabWrapper };\n"],"names":["TabsWrapper","styled","theme","$inactiveUnderlineColor","colors","TabWrapper","FlexView","$borderBottomColor","$disabled","$layout","tabsTheme","$isSelected","$height","$minWidth","tabs","tabsThemeConfig","hoverBackgroundColor","Icon","$iconPosition","$iconColor"],"mappings":";;AAWA,MAAMA,IAAcC,EAAO,IAAuB,CAAC,EAAE,OAAAC,GAAO,yBAAAC,QAA8B;AAClF,QAAA,EAAE,QAAAC,EAAW,IAAAF;AAEZ,SAAA;AAAA;AAAA,iCAEwBE,EAAOD,CAAuB,CAAC;AAAA;AAAA;AAGhE,CAAC,GAYKE,IAAaJ,EAAOK,CAAQ,EAAoB,CAAC;AAAA,EACrD,OAAAJ;AAAA,EACA,oBAAAK;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,QAAQC;AAAA,EACR,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AACF,MAAM;AACE,QAAA,EAAE,QAAAT,GAAQ,MAAAU,EAAS,IAAAZ,GACnBa,IAAkBD,EAAKJ,CAAS,GAChCM,IAAuBZ,EAAOW,EAAgB,WAAW,KAAK;AAE7D,SAAA;AAAA,cACKP,IAAY,gBAAgB,SAAS;AAAA,iCAClBJ,EAAOG,CAAkB,CAAC;AAAA;AAAA,cAE7CK,KAAW,EAAE;AAAA,MACrBC,IAAY,cAAcA,CAAS,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA,MAI7CJ,MAAY,SAAS,aAAa,iBAAiB;AAAA;AAAA,MAGnD,CAACD,KAAa,CAACG,IACX;AAAA;AAAA,4BAEkBK,CAAoB;AAAA;AAAA,QAGtC,EACN;AAAA;AAEJ,CAAC,GAOKC,IAAOhB,EAAO,IAAsB,CAAC,EAAE,OAAAC,GAAO,eAAAgB,GAAe,YAAAC,QAAiB;AAC5E,QAAA,EAAE,QAAAf,EAAW,IAAAF;AAEZ,SAAA;AAAA,MACHgB,MAAkB,SAAS,kBAAkB,cAAc;AAAA,aACpDA,MAAkB,SAAS,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,eAK/Bd,EAAOe,CAAU,CAAC;AAAA;AAAA;AAAA;AAIjC,CAAC;"}
+{"version":3,"file":"tabs-styled.js","sources":["../../../../src/features/ui/tabs/tabs-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../layout/flex-view';\nimport type { TColorNames } from '../types';\nimport type { ITabItem } from './tabs-types';\n\ninterface TabsWrapperProps {\n  $tabsCount: number;\n  $background: TColorNames;\n}\n\nconst TabsWrapper = styled.div<TabsWrapperProps>(({ theme, $tabsCount, $background }) => {\n  const { colors } = theme;\n\n  return `\n    display: grid;\n    background: ${colors[$background]};\n    grid-template-columns: repeat(${$tabsCount}, 1fr);\n  `;\n});\n\ninterface ITabsText {\n  $borderBottomColor: TColorNames;\n}\n\nconst TabWrapper = styled(FlexView)<ITabsText>(({ $borderBottomColor }) => {\n  return `\n    cursor: pointer;\n    border-bottom: 1.5px solid ${$borderBottomColor};\n    transition: all 0.3s ease;\n  `;\n});\n\ninterface IStyledIconProps {\n  $iconPosition: NonNullable<ITabItem['iconPosition']>;\n  $selected: boolean;\n}\n\nconst Icon = styled.div<IStyledIconProps>(({ theme, $iconPosition, $selected }) => {\n  return `\n    ${$iconPosition === 'left' ? 'padding-right' : 'padding-left'}: 4px;\n    order: ${$iconPosition === 'left' ? -1 : 1};\n    \n    & svg {\n      display: ${$selected ? 'block' : 'none'};\n      width: 16px;\n      height: 16px;\n      color: ${theme.colors.WHITE_1};\n      transition: color 0.2s ease-in-out;\n    }\n      `;\n});\n\nexport { TabsWrapper, Icon, TabWrapper };\n"],"names":["TabsWrapper","styled","theme","$tabsCount","$background","colors","TabWrapper","FlexView","$borderBottomColor","Icon","$iconPosition","$selected"],"mappings":";;AAWM,MAAAA,IAAcC,EAAO,IAAsB,CAAC,EAAE,OAAAC,GAAO,YAAAC,GAAY,aAAAC,QAAkB;AACjF,QAAA,EAAE,QAAAC,EAAW,IAAAH;AAEZ,SAAA;AAAA;AAAA,kBAESG,EAAOD,CAAW,CAAC;AAAA,oCACDD,CAAU;AAAA;AAE9C,CAAC,GAMKG,IAAaL,EAAOM,CAAQ,EAAa,CAAC,EAAE,oBAAAC,QACzC;AAAA;AAAA,iCAEwBA,CAAkB;AAAA;AAAA,GAGlD,GAOKC,IAAOR,EAAO,IAAsB,CAAC,EAAE,OAAAC,GAAO,eAAAQ,GAAe,WAAAC,QAC1D;AAAA,MACHD,MAAkB,SAAS,kBAAkB,cAAc;AAAA,aACpDA,MAAkB,SAAS,KAAK,CAAC;AAAA;AAAA;AAAA,iBAG7BC,IAAY,UAAU,MAAM;AAAA;AAAA;AAAA,eAG9BT,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA,OAIlC;"}

package/dist/features/ui/tabs/tabs.js

@@ -1,33 +1,30 @@
-import { jsx as r } from "react/jsx-runtime";
-import { memo as d } from "react";
-import { useTheme as f } from "styled-components";
-import l from "./tab-tem/tab-item.js";
-import { TabsWrapper as T } from "./tabs-styled.js";
-const b = d(function({
-  selectedTab: i,
+import { jsx as o } from "react/jsx-runtime";
+import { memo as a } from "react";
+import b from "./tab-tem/tab-item.js";
+import { TabsWrapper as u } from "./tabs-styled.js";
+const c = ({
+  selectedTab: m,
   onChange: t,
-  tabs: n,
-  theme: o = "dark",
-  layout: m = "compact",
-  height: s,
-  minWidth: a
-}) {
-  const { tabs: c } = f(), p = c[o].underline.inactive;
-  return /* @__PURE__ */ r(T, { $inactiveUnderlineColor: p, children: n.map((e) => /* @__PURE__ */ r(
-    l,
-    {
-      tab: e,
-      isSelected: e.id === i,
-      onChange: t,
-      theme: o,
-      layout: m,
-      height: s,
-      minWidth: a
-    },
-    e.id
-  )) });
-}), $ = b;
+  tabs: e,
+  tabUnderlineColor: s,
+  selectedTabUnderlineColor: d,
+  background: n = "BLACK_4",
+  activeTabTextProps: i = { $renderAs: "ub2-bold" },
+  inactiveTabTextProps: p = { $renderAs: "ub2" }
+}) => /* @__PURE__ */ o(u, { $tabsCount: e.length, $background: n, children: e.map((r) => /* @__PURE__ */ o(
+  b,
+  {
+    tab: r,
+    isSelected: r.id === m,
+    onChange: t,
+    inactiveTabTextProps: p,
+    activeTabTextProps: i,
+    tabUnderlineColor: s,
+    selectedTabUnderlineColor: d
+  },
+  r.id
+)) }), T = a(c);
 export {
-  $ as default
+  T as default
 };
 //# sourceMappingURL=tabs.js.map

package/dist/features/ui/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":["../../../../src/features/ui/tabs/tabs.tsx"],"sourcesContent":["import { memo } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport TabItem from './tab-tem/tab-item';\nimport * as Styled from './tabs-styled';\nimport type { ITabsProps } from './tabs-types';\n\nconst Tabs = memo(function Tabs<TId extends string = string>({\n  selectedTab,\n  onChange,\n  tabs,\n  theme = 'dark',\n  layout = 'compact',\n  height,\n  minWidth,\n}: ITabsProps<TId>) {\n  const { tabs: tabsTheme } = useTheme();\n  const themeConfig = tabsTheme[theme];\n  const inactiveUnderlineColor = themeConfig.underline.inactive;\n\n  return (\n    <Styled.TabsWrapper $inactiveUnderlineColor={inactiveUnderlineColor}>\n      {tabs.map(tab => (\n        <TabItem\n          key={tab.id}\n          tab={tab}\n          isSelected={tab.id === selectedTab}\n          onChange={onChange}\n          theme={theme}\n          layout={layout}\n          height={height}\n          minWidth={minWidth}\n        />\n      ))}\n    </Styled.TabsWrapper>\n  );\n});\n\nexport default Tabs;\n"],"names":["Tabs","memo","selectedTab","onChange","tabs","theme","layout","height","minWidth","tabsTheme","useTheme","inactiveUnderlineColor","jsx","Styled.TabsWrapper","tab","TabItem","Tabs$1"],"mappings":";;;;;AAOA,MAAMA,IAAOC,EAAK,SAA2C;AAAA,EAC3D,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,QAAAC;AAAA,EACA,UAAAC;AACF,GAAoB;AAClB,QAAM,EAAE,MAAMC,EAAU,IAAIC,EAAS,GAE/BC,IADcF,EAAUJ,CAAK,EACQ,UAAU;AAGnD,SAAA,gBAAAO,EAACC,GAAA,EAAmB,yBAAyBF,GAC1C,UAAAP,EAAK,IAAI,CACRU,MAAA,gBAAAF;AAAA,IAACG;AAAA,IAAA;AAAA,MAEC,KAAAD;AAAA,MACA,YAAYA,EAAI,OAAOZ;AAAA,MACvB,UAAAC;AAAA,MACA,OAAAE;AAAA,MACA,QAAAC;AAAA,MACA,QAAAC;AAAA,MACA,UAAAC;AAAA,IAAA;AAAA,IAPKM,EAAI;AAAA,EASZ,CAAA,EACH,CAAA;AAEJ,CAAC,GAEDE,IAAehB;"}
+{"version":3,"file":"tabs.js","sources":["../../../../src/features/ui/tabs/tabs.tsx"],"sourcesContent":["import { memo } from 'react';\n\nimport TabItem from './tab-tem/tab-item';\nimport * as Styled from './tabs-styled';\nimport type { ITabsProps } from './tabs-types';\n\nconst Tabs = ({\n  selectedTab,\n  onChange,\n  tabs,\n  tabUnderlineColor,\n  selectedTabUnderlineColor,\n  background = 'BLACK_4',\n  activeTabTextProps = { $renderAs: 'ub2-bold' },\n  inactiveTabTextProps = { $renderAs: 'ub2' },\n}: ITabsProps) => {\n  return (\n    <Styled.TabsWrapper $tabsCount={tabs.length} $background={background}>\n      {tabs.map(tab => (\n        <TabItem\n          key={tab.id}\n          tab={tab}\n          isSelected={tab.id === selectedTab}\n          onChange={onChange}\n          inactiveTabTextProps={inactiveTabTextProps}\n          activeTabTextProps={activeTabTextProps}\n          tabUnderlineColor={tabUnderlineColor}\n          selectedTabUnderlineColor={selectedTabUnderlineColor}\n        />\n      ))}\n    </Styled.TabsWrapper>\n  );\n};\n\nexport default memo(Tabs);\n"],"names":["Tabs","selectedTab","onChange","tabs","tabUnderlineColor","selectedTabUnderlineColor","background","activeTabTextProps","inactiveTabTextProps","jsx","Styled.TabsWrapper","tab","TabItem","memo"],"mappings":";;;;AAMA,MAAMA,IAAO,CAAC;AAAA,EACZ,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,2BAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,oBAAAC,IAAqB,EAAE,WAAW,WAAW;AAAA,EAC7C,sBAAAC,IAAuB,EAAE,WAAW,MAAM;AAC5C,MAEI,gBAAAC,EAACC,GAAA,EAAmB,YAAYP,EAAK,QAAQ,aAAaG,GACvD,UAAKH,EAAA,IAAI,CACRQ,MAAA,gBAAAF;AAAA,EAACG;AAAA,EAAA;AAAA,IAEC,KAAAD;AAAA,IACA,YAAYA,EAAI,OAAOV;AAAA,IACvB,UAAAC;AAAA,IACA,sBAAAM;AAAA,IACA,oBAAAD;AAAA,IACA,mBAAAH;AAAA,IACA,2BAAAC;AAAA,EAAA;AAAA,EAPKM,EAAI;AASZ,CAAA,EACH,CAAA,GAIWR,IAAAU,EAAKb,CAAI;"}

package/dist/features/ui/theme/get-theme.js

@@ -5,13 +5,12 @@ import g, { hues as f } from "./clrs.js";
 import { getDevice as n } from "./get-device.js";
 import p from "./input.js";
 import u from "./layout.js";
-import { getMediaQueries as s } from "./media-queries.js";
-import c from "./tab.js";
-import C from "./tabs.js";
-import a from "./text.js";
-import x from "./text-button.js";
-import { getZIndexConfig as T } from "./z-index.js";
-const D = () => {
+import { getMediaQueries as c } from "./media-queries.js";
+import s from "./tab.js";
+import x from "./text.js";
+import C from "./text-button.js";
+import { getZIndexConfig as a } from "./z-index.js";
+const z = () => {
   const t = u(), { gutter: o, deviceWidth: e } = t;
   return {
     arrowTooltip: r(),
@@ -21,16 +20,15 @@ const D = () => {
     input: p(o),
     checkbox: m(o),
     layout: t,
-    tab: c(t.gutter),
-    tabs: C(),
-    text: a(),
-    textButton: x(),
-    zIndex: T(),
+    tab: s(t.gutter),
+    text: x(),
+    textButton: C(),
+    zIndex: a(),
     device: n(e),
-    mediaQueries: s()
+    mediaQueries: c()
   };
 };
 export {
-  D as getTheme
+  z as getTheme
 };
 //# sourceMappingURL=get-theme.js.map

package/dist/features/ui/theme/get-theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"get-theme.js","sources":["../../../../src/features/ui/theme/get-theme.ts"],"sourcesContent":["import type { DefaultTheme } from 'styled-components';\n\nimport getArrowTooltipConfig from './arrow-tooltip';\nimport getButtonConfig from './button';\nimport getCheckboxConfig from './checkbox';\nimport getColors, { hues } from './clrs';\nimport { getDevice } from './get-device';\nimport getInputConfig from './input';\nimport getLayout from './layout';\nimport { getMediaQueries } from './media-queries';\nimport getTabConfig from './tab';\nimport getTabsConfig from './tabs';\nimport getTextTypes from './text';\nimport getTextButtonConfig from './text-button';\nimport { getZIndexConfig } from './z-index';\n\nconst getTheme: () => DefaultTheme = () => {\n  const layout = getLayout();\n  const { gutter, deviceWidth } = layout;\n\n  return {\n    arrowTooltip: getArrowTooltipConfig(),\n    button: getButtonConfig(gutter),\n    colors: getColors(),\n    hues: hues,\n    input: getInputConfig(gutter),\n    checkbox: getCheckboxConfig(gutter),\n    layout,\n    tab: getTabConfig(layout.gutter),\n    tabs: getTabsConfig(),\n    text: getTextTypes(),\n    textButton: getTextButtonConfig(),\n    zIndex: getZIndexConfig(),\n    device: getDevice(deviceWidth),\n    mediaQueries: getMediaQueries(),\n  };\n};\n\nexport { getTheme };\n"],"names":["getTheme","layout","getLayout","gutter","deviceWidth","getArrowTooltipConfig","getButtonConfig","getColors","hues","getInputConfig","getCheckboxConfig","getTabConfig","getTabsConfig","getTextTypes","getTextButtonConfig","getZIndexConfig","getDevice","getMediaQueries"],"mappings":";;;;;;;;;;;;;AAgBA,MAAMA,IAA+B,MAAM;AACzC,QAAMC,IAASC,KACT,EAAE,QAAAC,GAAQ,aAAAC,EAAgB,IAAAH;AAEzB,SAAA;AAAA,IACL,cAAcI,EAAsB;AAAA,IACpC,QAAQC,EAAgBH,CAAM;AAAA,IAC9B,QAAQI,EAAU;AAAA,IAClB,MAAAC;AAAA,IACA,OAAOC,EAAeN,CAAM;AAAA,IAC5B,UAAUO,EAAkBP,CAAM;AAAA,IAClC,QAAAF;AAAA,IACA,KAAKU,EAAaV,EAAO,MAAM;AAAA,IAC/B,MAAMW,EAAc;AAAA,IACpB,MAAMC,EAAa;AAAA,IACnB,YAAYC,EAAoB;AAAA,IAChC,QAAQC,EAAgB;AAAA,IACxB,QAAQC,EAAUZ,CAAW;AAAA,IAC7B,cAAca,EAAgB;AAAA,EAAA;AAElC;"}
+{"version":3,"file":"get-theme.js","sources":["../../../../src/features/ui/theme/get-theme.ts"],"sourcesContent":["import type { DefaultTheme } from 'styled-components';\n\nimport getArrowTooltipConfig from './arrow-tooltip';\nimport getButtonConfig from './button';\nimport getCheckboxConfig from './checkbox';\nimport getColors, { hues } from './clrs';\nimport { getDevice } from './get-device';\nimport getInputConfig from './input';\nimport getLayout from './layout';\nimport { getMediaQueries } from './media-queries';\nimport getTabConfig from './tab';\nimport getTextTypes from './text';\nimport getTextButtonConfig from './text-button';\nimport { getZIndexConfig } from './z-index';\n\nconst getTheme: () => DefaultTheme = () => {\n  const layout = getLayout();\n  const { gutter, deviceWidth } = layout;\n\n  return {\n    arrowTooltip: getArrowTooltipConfig(),\n    button: getButtonConfig(gutter),\n    colors: getColors(),\n    hues: hues,\n    input: getInputConfig(gutter),\n    checkbox: getCheckboxConfig(gutter),\n    layout,\n    tab: getTabConfig(layout.gutter),\n    text: getTextTypes(),\n    textButton: getTextButtonConfig(),\n    zIndex: getZIndexConfig(),\n    device: getDevice(deviceWidth),\n    mediaQueries: getMediaQueries(),\n  };\n};\n\nexport { getTheme };\n"],"names":["getTheme","layout","getLayout","gutter","deviceWidth","getArrowTooltipConfig","getButtonConfig","getColors","hues","getInputConfig","getCheckboxConfig","getTabConfig","getTextTypes","getTextButtonConfig","getZIndexConfig","getDevice","getMediaQueries"],"mappings":";;;;;;;;;;;;AAeA,MAAMA,IAA+B,MAAM;AACzC,QAAMC,IAASC,KACT,EAAE,QAAAC,GAAQ,aAAAC,EAAgB,IAAAH;AAEzB,SAAA;AAAA,IACL,cAAcI,EAAsB;AAAA,IACpC,QAAQC,EAAgBH,CAAM;AAAA,IAC9B,QAAQI,EAAU;AAAA,IAClB,MAAAC;AAAA,IACA,OAAOC,EAAeN,CAAM;AAAA,IAC5B,UAAUO,EAAkBP,CAAM;AAAA,IAClC,QAAAF;AAAA,IACA,KAAKU,EAAaV,EAAO,MAAM;AAAA,IAC/B,MAAMW,EAAa;AAAA,IACnB,YAAYC,EAAoB;AAAA,IAChC,QAAQC,EAAgB;AAAA,IACxB,QAAQC,EAAUX,CAAW;AAAA,IAC7B,cAAcY,EAAgB;AAAA,EAAA;AAElC;"}