@shohojdhara/atomix 0.1.14 → 0.1.16

package/src/components/Upload/Upload.tsx

@@ -1,7 +1,7 @@
 import React, { useRef, useEffect, useState } from 'react';
 import { UPLOAD } from '../../lib/constants/components';
 
-interface UploadProps {
+export interface UploadProps {
   /**
    * Whether the upload component is disabled
    */
@@ -81,7 +81,7 @@ type UploadStatus = 'idle' | 'loading' | 'success' | 'error';
 /**
  * Upload component for file uploads with drag and drop
  */
-const Upload: React.FC<UploadProps> = ({
+export const Upload: React.FC<UploadProps> = ({
   disabled = false,
   maxSizeInMB = 5,
   acceptedFileTypes = ['application/pdf', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'image/jpeg', 'image/png'],
@@ -112,7 +112,7 @@ const Upload: React.FC<UploadProps> = ({
   
   useEffect(() => {
     // Only run on client-side
-    if (typeof window === 'undefined' || !uploadRef.current) return;
+    if (typeof window === 'undefined' || !uploadRef.current) return undefined;
 
     // Dynamically import the upload script to avoid server-side rendering issues
     import('./scripts').then(({ default: UploadClass }) => {
@@ -223,13 +223,15 @@ const Upload: React.FC<UploadProps> = ({
     
     // Notify about file selection
     if (validFiles.length && onFileSelect) {
-      onFileSelect(validFiles);
+      onFileSelect(validFiles as File[]);
     }
     
     // Process the first valid file
     if (validFiles.length) {
-      setCurrentFile(validFiles[0]);
-      simulateUpload(validFiles[0]);
+        setCurrentFile(validFiles[0] || null);
+      if (validFiles[0]) {
+        simulateUpload(validFiles[0]);
+      }
     }
   };
   
@@ -401,13 +403,5 @@ const Upload: React.FC<UploadProps> = ({
   );
 };
 
-export type { UploadProps  };
-
-// Set display name for debugging
 Upload.displayName = 'Upload';
-
-// Default export (primary)
-export default Upload;
-
-// Named export for compatibility
-export { Upload };
+export default Upload;

package/src/components/Upload/index.ts

@@ -1,4 +1,3 @@
 export { Upload } from './Upload';
 export type { UploadProps } from './Upload';
-export { default as default } from './Upload';
-export { initializeUploads } from './scripts'; 
+export { default } from './Upload'; 

package/src/components/index.ts

@@ -1,153 +1,118 @@
 // Components Index - Explicit exports for better tree-shaking and compatibility
 
 // Accordion
-export { default as Accordion } from './Accordion/Accordion';
-export type { AccordionProps } from './Accordion/Accordion';
+export { Accordion, type AccordionProps } from './Accordion/Accordion';
 
 // Avatar  
-export { default as Avatar } from './Avatar/Avatar';
-export type { AvatarProps } from './Avatar/Avatar';
+export { Avatar, type AvatarProps } from './Avatar/Avatar';
+
+// AvatarGroup
+export { AvatarGroup, type AvatarGroupProps } from './Avatar/AvatarGroup';
 
 // Badge
-export { default as Badge } from './Badge/Badge';
-export type { BadgeProps } from './Badge/Badge';
+export { Badge, type BadgeProps } from './Badge/Badge';
 
 // Breadcrumb
-export { default as Breadcrumb } from './Breadcrumb/Breadcrumb';
-export type { BreadcrumbProps } from './Breadcrumb/Breadcrumb';
+export { Breadcrumb, type BreadcrumbProps } from './Breadcrumb/Breadcrumb';
 
 // Button
-export { default as Button } from './Button';
-export type { ButtonProps } from './Button';
+export { Button, type ButtonProps } from './Button/Button';
 
 // Callout
-export { default as Callout } from './Callout/Callout';
-export type { CalloutProps } from './Callout/Callout';
+export { Callout, type CalloutProps } from './Callout/Callout';
 
 // Card
-export { default as Card } from './Card/Card';
-export type { CardProps } from './Card/Card';
+export { Card, type CardProps } from './Card/Card';
 
 // ColorModeToggle
-export { default as ColorModeToggle } from './ColorModeToggle/ColorModeToggle';
-export type { ColorModeToggleProps } from './ColorModeToggle/ColorModeToggle';
+export { ColorModeToggle, type ColorModeToggleProps } from './ColorModeToggle/ColorModeToggle';
 
 // Countdown
-export { default as Countdown } from './Countdown/Countdown';
-export type { CountdownProps } from './Countdown/Countdown';
+export { Countdown, type CountdownProps } from './Countdown/Countdown';
 
 // DataTable
-export { default as DataTable } from './DataTable/DataTable';
-export type { DataTableProps } from './DataTable/DataTable';
+export { DataTable, type DataTableProps } from './DataTable/DataTable';
 
 // DatePicker
-export { default as DatePicker } from './DatePicker/DatePicker';
-export type { DatePickerProps } from './DatePicker/DatePicker';
+export { DatePicker, type DatePickerProps } from './DatePicker/DatePicker';
 
 // Dropdown
-export { default as Dropdown } from './Dropdown/Dropdown';
-export type { DropdownProps } from './Dropdown/Dropdown';
+export { Dropdown, type DropdownProps } from './Dropdown/Dropdown';          
 
 // EdgePanel
-export { default as EdgePanel } from './EdgePanel/EdgePanel';
-export type { EdgePanelProps } from './EdgePanel/EdgePanel';
+export { EdgePanel, type EdgePanelProps } from './EdgePanel/EdgePanel';
 
 // Form components - you might want to break these down further
-export { default as Form } from './Form/Form';
-export { default as Input } from './Form/Input';
-export { default as Textarea } from './Form/Textarea';
-export { default as Select } from './Form/Select';
-export { default as Checkbox } from './Form/Checkbox';
-export { default as Radio } from './Form/Radio';
+export { Form, type FormProps } from './Form/Form';
+export { Input, type InputProps } from './Form/Input';
+export { Textarea, type TextareaProps } from './Form/Textarea';
+export { Select, type SelectProps } from './Form/Select';
+export { Checkbox, type CheckboxProps } from './Form/Checkbox';
+export { Radio, type RadioProps } from './Form/Radio';
 
 // Hero
-export { default as Hero } from './Hero/Hero';
-export type { HeroProps } from './Hero/Hero';
+export { Hero, type HeroProps } from './Hero/Hero';
 
 // Icon
-export { default as Icon } from './Icon/Icon';
-export type { IconProps } from './Icon/Icon';
+export { Icon, type IconProps } from './Icon/Icon';
 
 // List
-export { default as List } from './List/List';
-export type { ListProps } from './List/List';
+export { List, type ListProps } from './List/List';
 
 // Messages
-export { default as Messages } from './Messages/Messages';
-export type { MessagesProps } from './Messages/Messages';
+export { Messages, type MessagesProps } from './Messages/Messages';
 
 // Modal
-export { default as Modal } from './Modal/Modal';
-export type { ModalProps } from './Modal/Modal';
+export { Modal, type ModalProps } from './Modal/Modal';
 
 // Navbar
-export { default as Navbar } from './Navbar/Navbar';
-export type { NavbarProps } from './Navbar/Navbar';
+export { Navbar, type NavbarProps } from './Navbar/Navbar';
 
 // Pagination
-export { default as Pagination } from './Pagination/Pagination';
-export type { PaginationProps } from './Pagination/Pagination';
+export { Pagination, type PaginationProps } from './Pagination/Pagination';
 
 // PhotoViewer
-export { default as PhotoViewer } from './PhotoViewer/PhotoViewer';
-export type { PhotoViewerProps } from './PhotoViewer/PhotoViewer';
+export { PhotoViewer, type PhotoViewerProps } from './PhotoViewer/PhotoViewer';
 
 // Popover
-export { default as Popover } from './Popover/Popover';
-export type { PopoverProps } from './Popover/Popover';
+export { Popover, type PopoverProps } from './Popover/Popover';
 
 // ProductReview
-export { default as ProductReview } from './ProductReview/ProductReview';
-export type { ProductReviewProps } from './ProductReview/ProductReview';
+export { ProductReview, type ProductReviewProps } from './ProductReview/ProductReview';       
 
 // Progress
-export { default as Progress } from './Progress/Progress';
-export type { ProgressProps } from './Progress/Progress';
+export { Progress, type ProgressProps } from './Progress/Progress';
 
 // Rating
-export { default as Rating } from './Rating/Rating';
-export type { RatingProps } from './Rating/Rating';
+export { Rating, type RatingProps } from './Rating/Rating';
 
 // River
-export { default as River } from './River/River';
-export type { RiverProps } from './River/River';
+export { River, type RiverProps } from './River/River';
 
 // SectionIntro
-export { default as SectionIntro } from './SectionIntro/SectionIntro';
-export type { SectionIntroProps } from './SectionIntro/SectionIntro';
+export { SectionIntro, type SectionIntroProps } from './SectionIntro/SectionIntro';
 
 // Spinner
-export { default as Spinner } from './Spinner/Spinner';
-export type { SpinnerProps } from './Spinner/Spinner';
+export { Spinner, type SpinnerProps } from './Spinner/Spinner';
 
 // Steps
-export { default as Steps } from './Steps/Steps';
-export type { StepsProps } from './Steps/Steps';
+export { Steps, type StepsProps } from './Steps/Steps';
 
 // Tab
-export { default as Tab } from './Tab/Tab';
-export type { TabProps } from './Tab/Tab';
+export { Tab, type TabProps } from './Tab/Tab';
 
 // Testimonial
-export { default as Testimonial } from './Testimonial/Testimonial';
-export type { TestimonialProps } from './Testimonial/Testimonial';
+export { Testimonial, type TestimonialProps } from './Testimonial/Testimonial';
 
 // Todo
-export { default as Todo } from './Todo/Todo';
-export type { TodoProps } from './Todo/Todo';
+export { Todo, type TodoProps } from './Todo/Todo';
 
 // Toggle
-export { default as Toggle } from './Toggle/Toggle';
-export type { ToggleProps } from './Toggle/Toggle';
+export { Toggle, type ToggleProps } from './Toggle/Toggle';
 
 // Tooltip
-export { default as Tooltip } from './Tooltip/Tooltip';
-export type { TooltipProps } from './Tooltip/Tooltip';
+export { Tooltip, type TooltipProps } from './Tooltip/Tooltip'; 
 
 // Upload
-export { default as Upload } from './Upload/Upload';
-export type { UploadProps } from './Upload/Upload';
+export { Upload, type UploadProps } from './Upload/Upload';
 
-// AtomixLogo
-export { default as AtomixLogo } from './AtomixLogo/AtomixLogo';
-export type { AtomixLogoProps } from './AtomixLogo/AtomixLogo';

package/src/index.ts

@@ -1,18 +1,21 @@
-// Re-export with namespaces for backwards compatibility
-import * as components from './components';
-import * as lib from './lib';
-import * as layouts from './layouts';
+// Export all components individually for better tree-shaking
+export * from './components';
+
+// Export lib utilities
+export * from './lib';
+
+// Export layouts
+export * from './layouts';
 
 // Create a properly typed default export
 const atomix = {
-  // Export components
-  ...components,
-  // Export lib utilities
-  composables: lib.composables,
-  utils: lib.utils,
-  constants: lib.constants,
-  layouts: layouts
+  // Re-export all components and utilities
+  ...require('./components'),
+  composables: require('./lib').composables,
+  utils: require('./lib').utils,
+  constants: require('./lib').constants,
+  layouts: require('./layouts')
 };
 
-
+// Default export
 export default atomix;

package/src/layouts/MasonryGrid/MasonryGrid.stories.tsx

@@ -2,7 +2,8 @@ import React, { useState, useEffect } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { MasonryGrid } from './MasonryGrid';
 import { MasonryGridItem } from './MasonryGridItem';
-import { Card, ElevationCard } from '../../components/Card';
+import Card  from '../../components/Card/Card';
+import ElevationCard from '../../components/Card/Card';
 
 const meta: Meta<typeof MasonryGrid> = {
   title: 'Layouts/MasonryGrid',

package/src/layouts/MasonryGrid/MasonryGrid.tsx

@@ -213,7 +213,7 @@ export const MasonryGrid = forwardRef<HTMLDivElement, MasonryGridProps>(
     );
 
     const trackImages = useCallback(() => {
-      if (!imagesLoaded || !containerRef.current) return;
+      if (!imagesLoaded || !containerRef.current) return undefined;
       imageElements.current.clear();
       imagesLoadedCount.current = 0;
       const images = containerRef.current.querySelectorAll('img');
@@ -222,7 +222,7 @@ export const MasonryGrid = forwardRef<HTMLDivElement, MasonryGridProps>(
         setLayoutComplete(true);
         setLoadingImages(false);
         onLayoutComplete?.();
-        return;
+        return undefined;
       }
       setLoadingImages(true);
       images.forEach((img) => {
@@ -283,8 +283,8 @@ export const MasonryGrid = forwardRef<HTMLDivElement, MasonryGridProps>(
 
     // === OBSERVE CONTAINER RESIZE ===
     useEffect(() => {
-      if (!containerRef.current) return;
-      let animationFrame: number | null = null;
+      if (!containerRef.current) return undefined;
+      let animationFrame: ReturnType<typeof requestAnimationFrame> | null = null;
       const observer = new ResizeObserver(() => {
         if (animationFrame) cancelAnimationFrame(animationFrame);
         animationFrame = requestAnimationFrame(() => calculateLayout());
@@ -305,6 +305,7 @@ export const MasonryGrid = forwardRef<HTMLDivElement, MasonryGridProps>(
         calculateLayout();
         setLayoutComplete(true);
         setLoadingImages(false);
+        return undefined;
       }
       // Only reset layoutComplete when items or columns change
       // eslint-disable-next-line

package/src/lib/composables/useDropdown.ts

@@ -67,7 +67,7 @@ export const useDropdown = ({
 
   // Handle click outside
   useEffect(() => {
-    if (!isOpen || !closeOnClickOutside) return;
+    if (!isOpen || !closeOnClickOutside) return undefined;
 
     const handleClickOutside = (event: MouseEvent) => {
       if (
@@ -89,7 +89,7 @@ export const useDropdown = ({
 
   // Handle escape key
   useEffect(() => {
-    if (!isOpen || !closeOnEscape) return;
+    if (!isOpen || !closeOnEscape) return undefined;
 
     const handleEscapeKey = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
@@ -204,7 +204,7 @@ export const useDropdown = ({
 
   // Update position when menu is opened
   useEffect(() => {
-    if (!isOpen) return;
+    if (!isOpen) return undefined;
 
     // Initial position update
     updatePosition();

package/src/lib/composables/useNavbar.ts

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { NavbarProps, NavProps, NavItemProps, NavDropdownProps } from '../types/components';
 import { NAVBAR, NAV } from '../constants/components';
 import React from 'react';
-import { Icon } from '../../components/Icon';
+import { Icon } from '../../components/Icon/Icon';
 
 /**
  * Navbar state and functionality

package/src/lib/composables/usePhotoViewer.ts

@@ -47,7 +47,7 @@ export const usePhotoViewer = ({
   const lastDistanceRef = useRef<number | null>(null);
   const lastMidpointRef = useRef<{ x: number; y: number } | null>(null);
   const lastWheelTime = useRef<number>(0);
-  const momentumTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const momentumTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   // Calculate dragging bounds based on zoom level and image dimensions
   const calculateBounds = useCallback((zoomLevel: number, rotation: number) => {
@@ -177,8 +177,8 @@ export const usePhotoViewer = ({
     const image = imageRef.current;
     const container = containerRef.current;
     
-    const updateImageBounds = () => {
-      if (!isMounted || !image || !container) return;
+    const updateImageBounds = (): void => {
+      if (!isMounted || !image || !container) return undefined;
       
       setImageStates(prev => {
         const currentState = prev[currentIndex] || {
@@ -204,16 +204,18 @@ export const usePhotoViewer = ({
     
     if (image && container && image.complete && isMounted) {
       updateImageBounds();
+      return undefined;
     } else if (image && container && isMounted) {
       image.addEventListener('load', updateImageBounds);
       return () => image.removeEventListener('load', updateImageBounds);
     }
+    return undefined;
   }, [currentIndex, calculateBounds, constrainPosition, isMounted]);
 
   // Handle window resize
   useEffect(() => {
-    const handleResize = () => {
-      if (!isMounted || !imageRef.current || !containerRef.current) return;
+    const handleResize = (): void => {
+      if (!isMounted || !imageRef.current || !containerRef.current) return undefined;
       
       setImageStates(prev => {
         const currentState = prev[currentIndex] || {

package/src/lib/composables/usePopover.ts

@@ -47,7 +47,7 @@ export const usePopover = ({
   const triggerRef = useRef<HTMLElement>(null);
   const popoverRef = useRef<HTMLDivElement>(null);
   const arrowRef = useRef<HTMLDivElement>(null);
-  const timeoutRef = useRef<number | null>(null);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const popoverId = id || `popover-${Math.random().toString(36).slice(2, 11)}`;
 
   // Use controlled state if provided
@@ -66,16 +66,16 @@ export const usePopover = ({
 
   // Handle hover events if trigger is hover
   useEffect(() => {
-    if (trigger !== 'hover' || !triggerRef.current || !popoverRef.current) return;
+    if (trigger !== 'hover' || !triggerRef.current || !popoverRef.current) return undefined;
 
     const handleTriggerMouseEnter = () => {
       if (timeoutRef.current !== null) {
-        window.clearTimeout(timeoutRef.current);
+        clearTimeout(timeoutRef.current);
         timeoutRef.current = null;
       }
 
       if (delay > 0) {
-        timeoutRef.current = window.setTimeout(() => {
+        timeoutRef.current = setTimeout(() => {
           setIsOpen(true);
         }, delay);
       } else {
@@ -85,11 +85,11 @@ export const usePopover = ({
 
     const handleTriggerMouseLeave = () => {
       if (timeoutRef.current !== null) {
-        window.clearTimeout(timeoutRef.current);
+        clearTimeout(timeoutRef.current);
         timeoutRef.current = null;
       }
 
-      timeoutRef.current = window.setTimeout(() => {
+      timeoutRef.current = setTimeout(() => {
         if (!popoverRef.current?.matches(':hover')) {
           setIsOpen(false);
         }
@@ -98,7 +98,7 @@ export const usePopover = ({
 
     const handlePopoverMouseEnter = () => {
       if (timeoutRef.current !== null) {
-        window.clearTimeout(timeoutRef.current);
+        clearTimeout(timeoutRef.current);
         timeoutRef.current = null;
       }
     };
@@ -247,7 +247,7 @@ export const usePopover = ({
 
   // Position the popover
   useEffect(() => {
-    if (!isOpenState || !triggerRef.current || !popoverRef.current) return;
+    if (!isOpenState || !triggerRef.current || !popoverRef.current) return undefined;
     
     // Initial positioning
     updatePosition();
@@ -256,13 +256,13 @@ export const usePopover = ({
     window.addEventListener('resize', updatePosition);
     
     // Update position on scroll, but throttled for performance
-    let scrollTimeout: number | null = null;
+    let scrollTimeout: ReturnType<typeof setTimeout> | null = null;
     const handleScroll = (e: Event) => {
       if (scrollTimeout) {
         return;
       }
       
-      scrollTimeout = window.setTimeout(() => {
+      scrollTimeout = setTimeout(() => {
         updatePosition(e);
         scrollTimeout = null;
       }, 100);
@@ -271,7 +271,7 @@ export const usePopover = ({
     window.addEventListener('scroll', handleScroll, { passive: true });
     
     // Update position less frequently to handle content changes
-    const intervalId = setInterval(() => {
+    const intervalId: ReturnType<typeof setInterval> = setInterval(() => {
       updatePosition();
     }, 500);
     
@@ -279,7 +279,7 @@ export const usePopover = ({
       window.removeEventListener('resize', updatePosition);
       window.removeEventListener('scroll', handleScroll);
       if (scrollTimeout) {
-        window.clearTimeout(scrollTimeout);
+        clearTimeout(scrollTimeout);
       }
       clearInterval(intervalId);
     };
@@ -287,7 +287,7 @@ export const usePopover = ({
   
   // Handle click outside to close popover
   useEffect(() => {
-    if (!isOpenState || !closeOnClickOutside) return;
+    if (!isOpenState || !closeOnClickOutside) return undefined;
     
     const handleClickOutside = (event: MouseEvent) => {
       if (
@@ -309,7 +309,7 @@ export const usePopover = ({
   
   // Handle escape key to close popover
   useEffect(() => {
-    if (!isOpenState || !closeOnEscape) return;
+    if (!isOpenState || !closeOnEscape) return undefined;
     
     const handleEscapeKey = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
@@ -345,4 +345,4 @@ export const usePopover = ({
   };
 };
 
-export default usePopover; 
+export default usePopover;

package/src/styles/01-settings/_settings.typography.scss

@@ -3,13 +3,16 @@
 // Font, line-height, and color for body text, headings, and more.
 
 // Font stacks with appropriate fallbacks
+$Roboto: "Roboto", sans-serif;
+
 $helvetica-neue:                'Helvetica Neue', 'Helvetica', 'Arial', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !default;
 $system-font-stack:             system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif !default;
 
-$font-family-base:              $helvetica-neue !default;
-$font-family-sans-serif:        $helvetica-neue !default;
+
+$font-family-base:              $Roboto !default;
+$font-family-sans-serif:        $Roboto !default;
 $font-family-monospace:         SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !default;
-$headings-font-family:          $helvetica-neue !default;
+$headings-font-family:          $Roboto !default;
 
 $font-weight-light:             300 !default;
 $font-weight-normal:            400 !default;

package/src/styles/03-generic/_generic.fonts.scss

@@ -1,22 +1,25 @@
 @use '../01-settings/settings.fonts' as fonts;
 @use '../01-settings/settings.typography' as *;
 
-// Import Helvetica Neue font family using the font-face mixin
-@include fonts.font-face('Helvetica Neue', 'HelveticaNeue', 'HelveticaNeue', $font-weight-normal, normal);
-@include fonts.font-face('Helvetica Neue', 'HelveticaNeue', 'HelveticaNeue-Light', $font-weight-light, normal);
-@include fonts.font-face('Helvetica Neue', 'HelveticaNeue', 'HelveticaNeue-Medium', $font-weight-medium, normal);
-@include fonts.font-face('Helvetica Neue', 'HelveticaNeue', 'HelveticaNeue-Bold', $font-weight-bold, normal);
-@include fonts.font-face('Helvetica Neue', 'HelveticaNeue', 'HelveticaNeue-Thin', $font-weight-light - 100, normal);
-@include fonts.font-face('Helvetica Neue', 'HelveticaNeue', 'HelveticaNeue-UltraLight', $font-weight-light - 200, normal);
+// // Import Helvetica Neue font family using the font-face mixin
+// @include fonts.font-face('Helvetica Neue', 'HelveticaNeue', 'HelveticaNeue', $font-weight-normal, normal);
+// @include fonts.font-face('Helvetica Neue', 'HelveticaNeue', 'HelveticaNeue-Light', $font-weight-light, normal);
+// @include fonts.font-face('Helvetica Neue', 'HelveticaNeue', 'HelveticaNeue-Medium', $font-weight-medium, normal);
+// @include fonts.font-face('Helvetica Neue', 'HelveticaNeue', 'HelveticaNeue-Bold', $font-weight-bold, normal);
+// @include fonts.font-face('Helvetica Neue', 'HelveticaNeue', 'HelveticaNeue-Thin', $font-weight-light - 100, normal);
+// @include fonts.font-face('Helvetica Neue', 'HelveticaNeue', 'HelveticaNeue-UltraLight', $font-weight-light - 200, normal);
 
-// Italic versions
-@include fonts.font-face('Helvetica Neue', 'HelveticaNeue', 'HelveticaNeue-Italic', $font-weight-normal, italic);
-@include fonts.font-face('Helvetica Neue', 'HelveticaNeue', 'HelveticaNeue-LightItalic', $font-weight-light, italic);
-@include fonts.font-face('Helvetica Neue', 'HelveticaNeue', 'HelveticaNeue-MediumItalic', $font-weight-medium, italic);
-@include fonts.font-face('Helvetica Neue', 'HelveticaNeue', 'HelveticaNeue-BoldItalic', $font-weight-bold, italic);
-@include fonts.font-face('Helvetica Neue', 'HelveticaNeue', 'HelveticaNeue-ThinItalic', $font-weight-light - 100, italic);
-@include fonts.font-face('Helvetica Neue', 'HelveticaNeue', 'HelveticaNeue-UltraLightItalic', $font-weight-light - 200, italic);
+// // Italic versions
+// @include fonts.font-face('Helvetica Neue', 'HelveticaNeue', 'HelveticaNeue-Italic', $font-weight-normal, italic);
+// @include fonts.font-face('Helvetica Neue', 'HelveticaNeue', 'HelveticaNeue-LightItalic', $font-weight-light, italic);
+// @include fonts.font-face('Helvetica Neue', 'HelveticaNeue', 'HelveticaNeue-MediumItalic', $font-weight-medium, italic);
+// @include fonts.font-face('Helvetica Neue', 'HelveticaNeue', 'HelveticaNeue-BoldItalic', $font-weight-bold, italic);
+// @include fonts.font-face('Helvetica Neue', 'HelveticaNeue', 'HelveticaNeue-ThinItalic', $font-weight-light - 100, italic);
+// @include fonts.font-face('Helvetica Neue', 'HelveticaNeue', 'HelveticaNeue-UltraLightItalic', $font-weight-light - 200, italic);
 
-// Condensed versions
-@include fonts.font-face('Helvetica Neue Condensed', 'HelveticaNeue', 'HelveticaNeue-CondensedBold', $font-weight-bold, normal);
-@include fonts.font-face('Helvetica Neue Condensed', 'HelveticaNeue', 'HelveticaNeue-CondensedBlack', $font-weight-black, normal);
+// // Condensed versions
+// @include fonts.font-face('Helvetica Neue Condensed', 'HelveticaNeue', 'HelveticaNeue-CondensedBold', $font-weight-bold, normal);
+// @include fonts.font-face('Helvetica Neue Condensed', 'HelveticaNeue', 'HelveticaNeue-CondensedBlack', $font-weight-black, normal);
+
+
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

package/css.d.ts

@@ -1,10 +0,0 @@
-// Type definitions for CSS imports
-declare module '*.css' {
-  const content: { [className: string]: string };
-  export default content;
-}
-
-declare module '*.scss' {
-  const content: { [className: string]: string };
-  export default content;
-}