[New design system pkg] Update web imports to point to new Panda (#…

…5546)

* fix: Import aliases

* refactor: Point styled-system imports to ds

apps/web/src/components/IconButton.tsx

@@ -2,7 +2,7 @@ import { ComponentProps, PropsWithChildren } from 'react';
 import { Tooltip, Button, IButtonProps } from '@novu/design-system';
 
 import { useHover } from '../hooks';
-import { css, cx } from '../styled-system/css';
+import { css, cx } from '@novu/novui/css';
 
 // Mantine styles take precedence over Panda :(, so have to use !important
 const iconButtonStyles = css({

apps/web/src/components/Timeline/Timeline.styles.ts

@@ -1,4 +1,4 @@
-import { css } from '../../styled-system/css';
+import { css } from '@novu/novui/css';
 
 export const TIMELINE_STYLES = {
   item: css({

apps/web/src/components/layout/components/v2/HeaderNav.tsx

@@ -5,7 +5,7 @@ import { IS_DOCKER_HOSTED } from '../../../../config';
 import { useBootIntercom } from '../../../../hooks';
 import useThemeChange from '../../../../hooks/useThemeChange';
 import { discordInviteUrl } from '../../../../pages/quick-start/consts';
-import { css } from '../../../../styled-system/css';
+import { css } from '@novu/novui/css';
 import { useAuthContext } from '../../../providers/AuthProvider';
 import { HEADER_NAV_HEIGHT } from '../../constants';
 import { NotificationCenterWidget } from '../NotificationCenterWidget';

apps/web/src/components/nav/EnvironmentSelect/EnvironmentPopover.styles.ts

@@ -1,4 +1,4 @@
-import { css } from '../../../styled-system/css';
+import { css } from '@novu/novui/css';
 
 export const popoverDropdownStyle = css({
   p: '100 !important',

apps/web/src/components/nav/EnvironmentSelect/EnvironmentSelect.tsx

@@ -1,5 +1,5 @@
 import { Select, When } from '@novu/design-system';
-import { css } from '../../../styled-system/css';
+import { css } from '@novu/novui/css';
 import { navSelectStyles } from '../NavSelect.styles';
 import { EnvironmentPopover } from './EnvironmentPopover';
 import { useEnvironmentSelect } from './useEnvironmentSelect';

apps/web/src/components/nav/NavMenu.tsx

@@ -1,9 +1,9 @@
 import { IconArrowBack } from '@novu/design-system';
 import { LocalizedMessage } from '@novu/shared-web';
 import { FC, MouseEventHandler } from 'react';
-import { css, cx } from '../../styled-system/css';
-import { Flex, styled, VStack } from '../../styled-system/jsx';
-import { title as titleRecipe } from '../../styled-system/recipes';
+import { css, cx } from '@novu/novui/css';
+import { Flex, styled, VStack } from '@novu/novui/jsx';
+import { title as titleRecipe } from '@novu/novui/recipes';
 
 const iconButtonStyles = css({
   display: 'inline-flex',

apps/web/src/components/nav/NavMenuButton/NavMenuButton.shared.ts

@@ -1,9 +1,9 @@
 import { IIconProps } from '@novu/design-system';
 import { LocalizedMessage } from '@novu/shared-web';
 import { ReactNode } from 'react';
-import { css } from '../../../styled-system/css';
-import { styled } from '../../../styled-system/jsx';
-import { text } from '../../../styled-system/recipes';
+import { css } from '@novu/novui/css';
+import { styled } from '@novu/novui/jsx';
+import { text } from '@novu/novui/recipes';
 
 export type RightSideTrigger = 'hover';
 

apps/web/src/components/nav/NavMenuButton/NavMenuButtonRightSide.tsx

@@ -1,7 +1,7 @@
 import { Transition } from '@mantine/core';
 import { Tooltip } from '@novu/design-system';
 import { FC, PropsWithChildren, useState } from 'react';
-import { css } from '../../../styled-system/css';
+import { css } from '@novu/novui/css';
 import { INavMenuButtonRightSideConfig } from './NavMenuButton.shared';
 
 const tooltipStyle = css({

apps/web/src/components/nav/NavMenuButton/NavMenuToggleButton.tsx

@@ -1,7 +1,7 @@
 import { IconArrowDropUp, IconArrowDropDown } from '@novu/design-system';
 import { FC, PropsWithChildren, useState } from 'react';
-import { css } from '../../../styled-system/css';
-import { Flex, HStack } from '../../../styled-system/jsx';
+import { css } from '@novu/novui/css';
+import { Flex, HStack } from '@novu/novui/jsx';
 import { INavMenuButtonProps, rawButtonBaseStyles } from './NavMenuButton.shared';
 
 type INavMenuToggleButtonProps = Omit<INavMenuButtonProps, 'rightSide'>;

apps/web/src/components/nav/NavMenuFooter.tsx

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-import { css, cx } from '../../styled-system/css';
+import { css, cx } from '@novu/novui/css';
 
 export interface INavMenuFooterProps {
   className?: string;

apps/web/src/components/nav/NavMenuSection.tsx

@@ -1,8 +1,8 @@
 import { FC } from 'react';
-import { styled } from '../../styled-system/jsx';
-import { text } from '../../styled-system/recipes';
+import { styled } from '@novu/novui/jsx';
+import { text } from '@novu/novui/recipes';
 import { LocalizedMessage } from '@novu/shared-web';
-import { css } from '../../styled-system/css';
+import { css } from '@novu/novui/css';
 
 interface INavMenuSectionProps {
   title?: LocalizedMessage;

apps/web/src/components/nav/NavSelect.styles.ts

@@ -1,4 +1,4 @@
-import { css } from '../../styled-system/css';
+import { css } from '@novu/novui/css';
 
 // TODO: these are ugly, but necessary for overriding Mantine + our design-system overrides
 export const navSelectStyles = css({

apps/web/src/components/nav/OrganizationSelect/OrganizationSelect.tsx

@@ -1,5 +1,5 @@
 import { Select } from '@novu/design-system';
-import { css } from '../../../styled-system/css';
+import { css } from '@novu/novui/css';
 import { useOrganizationSelect } from './useOrganizationSelect';
 
 interface IOrganizationSelectRendererProps {

apps/web/src/components/nav/OrganizationSelect/v2/OrganizationSelect.tsx

@@ -1,7 +1,7 @@
 import { Select, Tooltip, When } from '@novu/design-system';
 import { useState } from 'react';
 import { COMPANY_LOGO_PATH } from '../../../../constants/assets';
-import { css } from '../../../../styled-system/css';
+import { css } from '@novu/novui/css';
 import { arrowStyles, navSelectStyles, tooltipStyles } from '../../NavSelect.styles';
 import { useOrganizationSelect } from '../useOrganizationSelect';
 

apps/web/src/components/nav/RootNavMenuFooter.tsx

@@ -1,6 +1,6 @@
 import { UTM_CAMPAIGN_QUERY_PARAM } from '@novu/shared';
-import { css, cx } from '../../styled-system/css';
-import { hstack } from '../../styled-system/patterns';
+import { css, cx } from '@novu/novui/css';
+import { hstack } from '@novu/novui/patterns';
 import { NavMenuFooter } from './NavMenuFooter';
 
 export const RootNavMenuFooter: React.FC = () => {

apps/web/src/components/nav/SidebarNav.tsx

@@ -1,7 +1,7 @@
 import { ROUTES } from '@novu/shared-web';
 import { FC, useMemo } from 'react';
 import { matchRoutes, useLocation } from 'react-router-dom';
-import { css } from '../../styled-system/css';
+import { css } from '@novu/novui/css';
 
 const sidebarStyle = css({
   position: 'sticky',

apps/web/src/components/nav/VisibilityButton.tsx

@@ -1,5 +1,5 @@
 import { IconVisibilityOff } from '@novu/design-system';
-import { css } from '../../styled-system/css';
+import { css } from '@novu/novui/css';
 
 const buttonStyles = css({
   bg: 'transparent',

apps/web/src/components/shared/ProfileImage.styles.ts

@@ -1,4 +1,4 @@
-import { css } from '../../styled-system/css';
+import { css } from '@novu/novui/css';
 
 export const previewContainerStyles = css({
   bgColor: {

apps/web/src/components/shared/UploadInput.tsx

@@ -3,7 +3,7 @@ import { IconOutlineFileUpload, Text } from '@novu/design-system';
 
 import { ProfileImageProps } from './ProfileImage';
 import { imageUploadStyles } from './ProfileImage.styles';
-import { cx } from '../../styled-system/css';
+import { cx } from '@novu/novui/css';
 
 export const UploadInput = React.forwardRef<HTMLInputElement, Omit<ProfileImageProps, 'value'>>(
   ({ name, onChange }, forwardedRef) => {

apps/web/src/pages/brand/tabs/v2/BrandInputs.tsx

@@ -1,6 +1,6 @@
 import { ColorInput } from '@novu/design-system';
 import { Control, Controller, UseFormSetValue } from 'react-hook-form';
-import { Stack } from '../../../../styled-system/jsx';
+import { Stack } from '@novu/novui/jsx';
 import { IBrandFormValues } from './BrandingPage.const';
 import { inputWrapperStyles, Text } from './BrandingPage.styles';
 import { BrandLogoUpload } from './BrandLogoUpload';

apps/web/src/pages/brand/tabs/v2/BrandLogoUpload.tsx

@@ -4,8 +4,8 @@ import { UploadTypesEnum } from '@novu/shared';
 import { useRef } from 'react';
 import { ControllerRenderProps, UseFormSetValue } from 'react-hook-form';
 import { useUploadToStorage } from '../../../../api/hooks/useUploadToStorage';
-import { css, cx } from '../../../../styled-system/css';
-import { Stack } from '../../../../styled-system/jsx';
+import { css, cx } from '@novu/novui/css';
+import { Stack } from '@novu/novui/jsx';
 import { ACCEPTABLE_ORG_IMAGE_TYPES, BRAND_LOGO_SIZE, IBrandFormValues } from './BrandingPage.const';
 import {
   dropzoneOverlayStyles,

apps/web/src/pages/brand/tabs/v2/BrandingPage.styles.ts

@@ -1,6 +1,6 @@
-import { css } from '../../../../styled-system/css';
-import { styled } from '../../../../styled-system/jsx';
-import { text } from '../../../../styled-system/recipes';
+import { css } from '@novu/novui/css';
+import { styled } from '@novu/novui/jsx';
+import { text } from '@novu/novui/recipes';
 
 export const dropzoneWrapperStyles = css({
   position: 'relative',

apps/web/src/pages/brand/tabs/v2/BrandingPage.tsx

@@ -2,8 +2,8 @@ import { Button, LoadingOverlay } from '@novu/design-system';
 import { useAuthContext } from '@novu/shared-web';
 import { useForm } from 'react-hook-form';
 import { useUpdateOrganizationBranding } from '../../../../api/hooks';
-import { css } from '../../../../styled-system/css';
-import { Stack } from '../../../../styled-system/jsx';
+import { css } from '@novu/novui/css';
+import { Stack } from '@novu/novui/jsx';
 import { successMessage } from '../../../../utils/notifications';
 import { SettingsPageContainer } from '../../../settings/SettingsPageContainer';
 import {

apps/web/src/pages/get-started/GetStartedPage.tsx

@@ -6,7 +6,7 @@ import PageContainer from '../../components/layout/components/PageContainer';
 import PageHeader from '../../components/layout/components/PageHeader';
 import { useAuthContext } from '../../components/providers/AuthProvider';
 import { usePageViewTracking } from '../../hooks/usePageViewTracking';
-import { css } from '../../styled-system/css';
+import { css } from '@novu/novui/css';
 import { EchoTab } from './components/get-started-tabs/EchoTab';
 
 const PAGE_TITLE = 'Get started';

apps/web/src/pages/get-started/components/CodeSnippet.tsx

@@ -1,6 +1,6 @@
 import { Input, inputStyles } from '@novu/design-system';
 import { useClipboard } from '@mantine/hooks';
-import { css, cx } from '../../../styled-system/css';
+import { css, cx } from '@novu/novui/css';
 import { ClipboardIconButton } from '../../../components';
 
 const codeValueInputClassName = css({

apps/web/src/pages/get-started/components/get-started-tabs/EchoTab.tsx

@@ -1,10 +1,10 @@
 import { useSegment } from '@novu/shared-web';
-import { css, cx } from '../../../../styled-system/css';
-import { Flex, styled } from '../../../../styled-system/jsx';
+import { css, cx } from '@novu/novui/css';
+import { Flex, styled } from '@novu/novui/jsx';
 import { OnboardingUseCasesTabsEnum } from '../../consts/OnboardingUseCasesTabsEnum';
 import { AdditionInformationLink } from '../AdditionInformationLink';
 import { CodeSnippet } from '../CodeSnippet';
-import { text, title } from '../../../../styled-system/recipes';
+import { text, title } from '@novu/novui/recipes';
 import { IconCellTower, IconCloudQueue, IconCode, IconHealthAndSafety } from '@novu/design-system';
 import { DOMAttributes, useEffect } from 'react';
 import { useMantineTheme } from '@mantine/core';

apps/web/src/pages/settings/ApiKeysPage/ApiKeysPage.tsx

@@ -1,7 +1,7 @@
 import { IconOutlineVisibility, IconOutlineVisibilityOff, IconRefresh, IconSize, Input } from '@novu/design-system';
 import { FC } from 'react';
 import { IconButton, ClipboardIconButton } from '../../../components/';
-import { Flex } from '../../../styled-system/jsx';
+import { Flex } from '@novu/novui/jsx';
 import { SettingsPageContainer } from '../SettingsPageContainer';
 import { ConfirmRegenerationModal } from '../tabs/components/ConfirmRegenerationModal';
 import { useSettingsEnvRedirect } from '../useSettingsEnvRedirect';

apps/web/src/pages/settings/SettingsPageContainer.tsx

@@ -1,7 +1,7 @@
 import { PageContainer, When } from '@novu/design-system';
 import { FC, PropsWithChildren, ReactNode } from 'react';
 import PageHeader from '../../components/layout/components/PageHeader';
-import { css } from '../../styled-system/css';
+import { css } from '@novu/novui/css';
 
 export interface ISettingsPageContainerProps {
   // TODO: this should be LocalizedMessage, but PageContainer and PageHeader don't accept it

apps/web/src/pages/settings/WebhookPage/WebhookAdditionalInformationLink.tsx

@@ -1,6 +1,6 @@
 import { IconOutlineMenuBook } from '@novu/design-system';
 import { FC } from 'react';
-import { css } from '../../../styled-system/css';
+import { css } from '@novu/novui/css';
 import { Text } from './WebhookPage.shared';
 
 export const WebhookAdditionalInformationLink: FC = () => {

apps/web/src/pages/settings/WebhookPage/WebhookClaimStatusDisplay.tsx

@@ -8,9 +8,9 @@ import {
 import { LocalizedMessage } from '@novu/shared-web';
 import { FC } from 'react';
 import { IconButton } from '../../../components';
-import { cva } from '../../../styled-system/css';
-import { HStack } from '../../../styled-system/jsx';
-import { SystemStyleObject } from '../../../styled-system/types';
+import { cva } from '@novu/novui/css';
+import { HStack } from '@novu/novui/jsx';
+import { SystemStyleObject } from '@novu/novui/types';
 import { Text } from './WebhookPage.shared';
 import { type WebhookClaimStatus } from './WebhookPage.types';
 

apps/web/src/pages/settings/WebhookPage/WebhookPage.shared.tsx

@@ -1,5 +1,5 @@
-import { css } from '../../../styled-system/css';
-import { styled } from '../../../styled-system/jsx';
-import { text } from '../../../styled-system/recipes';
+import { css } from '@novu/novui/css';
+import { styled } from '@novu/novui/jsx';
+import { text } from '@novu/novui/recipes';
 
 export const Text = styled('p', text, { defaultProps: { className: css({ color: 'typography.text.secondary' }) } });

apps/web/src/pages/settings/WebhookPage/WebhookPage.tsx

@@ -4,9 +4,9 @@ import { Controller } from 'react-hook-form';
 
 import { ClipboardIconButton } from '../../../components';
 import { Timeline } from '../../../components/Timeline';
-import { css, cx } from '../../../styled-system/css';
-import { HStack, Stack } from '../../../styled-system/jsx';
-import { text } from '../../../styled-system/recipes';
+import { css, cx } from '@novu/novui/css';
+import { HStack, Stack } from '@novu/novui/jsx';
+import { text } from '@novu/novui/recipes';
 import { SettingsPageContainer } from '../SettingsPageContainer';
 import { Text } from './WebhookPage.shared';
 

apps/web/src/pages/settings/components/InputPlain.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Input, IInputProps } from '@novu/design-system';
 
-import { css, cx } from '../../../styled-system/css';
+import { css, cx } from '@novu/novui/css';
 
 const inputPlainStyles = css({
   marginBottom: '200',

apps/web/src/pages/settings/organization/OrganizationName.tsx

@@ -2,8 +2,8 @@ import { Button, Input, successMessage } from '@novu/design-system';
 import { useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { useRenameOrganization } from '../../../api/hooks';
-import { css } from '../../../styled-system/css';
-import { Stack } from '../../../styled-system/jsx';
+import { css } from '@novu/novui/css';
+import { Stack } from '@novu/novui/jsx';
 
 type FormValues = {
   name: string;

apps/web/src/pages/settings/organization/OrganizationPage.tsx

@@ -1,6 +1,6 @@
 import { useAuthContext } from '@novu/shared-web';
 import { COMPANY_LOGO_PATH } from '../../../constants/assets';
-import { Stack } from '../../../styled-system/jsx';
+import { Stack } from '@novu/novui/jsx';
 import { SettingsPageContainer } from '../SettingsPageContainer';
 import { OrganizationLogo } from './OrganizationLogo';
 import { OrganizationName } from './OrganizationName';

apps/web/src/pages/settings/user-profile-page/UserProfileForm.tsx

@@ -4,7 +4,7 @@ import * as capitalize from 'lodash.capitalize';
 import { Button, errorMessage, Input, successMessage } from '@novu/design-system';
 import { IUserEntity, UploadTypesEnum } from '@novu/shared';
 
-import { css } from '../../../styled-system/css';
+import { css } from '@novu/novui/css';
 import { ProfileImage } from '../../../components/shared';
 import { useUpdateUserProfile } from '../../../api/hooks';
 import { useUploadToStorage } from '../../../api/hooks/useUploadToStorage';

apps/web/src/pages/settings/user-profile-page/UserProfilePage.tsx

@@ -1,8 +1,8 @@
 import { FC } from 'react';
 import { useAuthContext } from '../../../components/providers/AuthProvider';
-import { css } from '../../../styled-system/css';
-import { Flex, styled } from '../../../styled-system/jsx';
-import { title } from '../../../styled-system/recipes';
+import { css } from '@novu/novui/css';
+import { Flex, styled } from '@novu/novui/jsx';
+import { title } from '@novu/novui/recipes';
 import { InputPlain } from '../components';
 import { SettingsPageContainer } from '../SettingsPageContainer';
 import { UserProfileForm } from './UserProfileForm';

apps/web/src/pages/settings/user-profile-page/UserProfilePasswordEmailVerificationSection.tsx

@@ -1,7 +1,7 @@
 import { Button, IconOutlineForwardToInbox, IconOutlineMarkunreadMailbox } from '@novu/design-system';
-import { css, cx } from '../../../styled-system/css';
-import { HStack, Stack } from '../../../styled-system/jsx';
-import { text } from '../../../styled-system/recipes';
+import { css, cx } from '@novu/novui/css';
+import { HStack, Stack } from '@novu/novui/jsx';
+import { text } from '@novu/novui/recipes';
 import { IUserProfilePasswordEmailVerificationProps } from './UserProfilePasswordSidebar.shared';
 
 export const UserProfilePasswordEmailVerificationSection: React.FC<IUserProfilePasswordEmailVerificationProps> = ({

apps/web/src/pages/settings/user-profile-page/UserProfilePasswordForm.tsx

@@ -4,8 +4,8 @@ import { api, useAuthContext } from '@novu/shared-web';
 import * as Sentry from '@sentry/react';
 import { useMutation } from '@tanstack/react-query';
 import { useForm } from 'react-hook-form';
-import { css } from '../../../styled-system/css';
-import { Stack } from '../../../styled-system/jsx';
+import { css } from '@novu/novui/css';
+import { Stack } from '@novu/novui/jsx';
 import { PasswordRequirementPopover } from '../../auth/components/PasswordRequirementPopover';
 import { SHARED_PASSWORD_INPUT_REGISTER_OPTIONS } from './UserProfilePasswordSidebar.shared';
 

apps/web/src/pages/settings/user-profile-page/UserProfilePasswordSidebar.tsx

@@ -1,7 +1,7 @@
 import { IconOutlineLockPerson, SidebarFormless } from '@novu/design-system';
 import { useContext, useEffect, useMemo } from 'react';
-import { HStack, styled } from '../../../styled-system/jsx';
-import { title } from '../../../styled-system/recipes';
+import { HStack, styled } from '@novu/novui/jsx';
+import { title } from '@novu/novui/recipes';
 import { UserProfilePasswordEmailVerificationSection } from './UserProfilePasswordEmailVerificationSection';
 import { UserProfilePasswordForm } from './UserProfilePasswordForm';
 import { IUserProfilePasswordSidebarProps } from './UserProfilePasswordSidebar.shared';

apps/web/src/pages/settings/user-profile-page/UserProfileSidebarControl.tsx

@@ -1,6 +1,6 @@
 import { Button, IconOutlineLockPerson } from '@novu/design-system';
 import { FC, MouseEventHandler, useContext, useMemo } from 'react';
-import { css } from '../../../styled-system/css';
+import { css } from '@novu/novui/css';
 import { UserProfileSidebarContext } from './UserProfileSidebarContext';
 import { UserProfilePasswordSidebar } from './UserProfilePasswordSidebar';
 import { useUserProfileSearchParams } from './useUserProfileSearchParams';

apps/web/src/pages/settings/user-profile-page/UserProfileUpdatePasswordForm.tsx

@@ -4,8 +4,8 @@ import { api } from '@novu/shared-web';
 import * as Sentry from '@sentry/react';
 import { useMutation } from '@tanstack/react-query';
 import { useForm } from 'react-hook-form';
-import { css } from '../../../styled-system/css';
-import { Stack } from '../../../styled-system/jsx';
+import { css } from '@novu/novui/css';
+import { Stack } from '@novu/novui/jsx';
 import { PasswordRequirementPopover } from '../../auth/components/PasswordRequirementPopover';
 import { SHARED_PASSWORD_INPUT_REGISTER_OPTIONS } from './UserProfilePasswordSidebar.shared';