@nuskin/foundation-ui-components 1.29.1 → 1.30.0

package/src/common/card/specs/NsHeroCardLevel1.spec.tsx

@@ -1,15 +1,14 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import NsHeroCardLevel1 from '../NsHeroCardLevel1';
+import { ImageData1 } from '../fixtures/ImageData1';
 
 describe('NsHeroCardLevel1 component', () => {
     const props = {
         cardTitle: 'A skin ready for winter',
         cardDescription:
             'We have brought these discoveries to life through our powerful skin care products and supplements.',
-        backgroundImageUrl:
-            'https://media.nuskin.com/m/9734240cc191163/webimage-lash-brow-serum-carousel-image-launch.png',
-        backgroundImageAlt: 'lash brow serum carousel',
+        backgroundImageDetail: ImageData1,
         button: {
             showButton: true,
             buttonText: 'SHOP NOW',

package/src/common/card/specs/NsHeroCardLevel2.spec.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { NsHeroCardLevel2 } from '../';
+import { ImageData1 } from '../fixtures/ImageData1';
 
 describe('NsHeroCardLevel2 component', () => {
     const props = {
         cardTitle: 'Current shop deals',
         cardDescription: 'Lumispa, sunscreen and more',
         brandName: 'Beauty focus™',
-        backgroundImageUrl: 'https://media.nuskin.com/m/5f1c423bb57589f0/webimage-autumn-sale-carousel.png',
-        backgroundImageAlt: 'lash brow serum carousel',
+        backgroundImageDetail: ImageData1,
         button: {
             showButton: true,
             buttonText: 'Discover more',

package/src/common/card/specs/NsLargeCard.spec.tsx

@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { NsLargeCard } from '../';
+import { ImageData1 } from '../fixtures/ImageData1';
 
 describe('NsLargeCard component', () => {
     const props = {
@@ -14,9 +15,7 @@ describe('NsLargeCard component', () => {
             buttonColor: 'secondary' as 'secondary',
             url: 'https://www.forceforgood.org/',
         },
-        backgroundImageUrl:
-            'https://media.nuskin.com/m/95f9cf4143e3882/Small-About_Us-Personal-Care-Products-Image.jpg',
-        backgroundImageAlt: 'Facial Moisturizers',
+        backgroundImageDetail: ImageData1,
     };
 
     it('1. renders with correct content and styles', () => {

package/src/common/card/specs/NsMediumCard.spec.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import NsMediumCard from '../NsMediumCard';
+import { ImageData1 } from '../fixtures/ImageData1';
 
 describe('NsMediumCard component', () => {
     const props = {
@@ -15,8 +16,7 @@ describe('NsMediumCard component', () => {
             buttonColor: 'secondary' as 'secondary',
             url: '#',
         },
-        backgroundImageUrl: 'https://media.nuskin.com/m/3353b9c05cb83860/Small-category-facial_moisturizers.jpg',
-        backgroundImageAlt: 'Lumi Spa',
+        backgroundImageDetail: ImageData1,
     };
 
     it('1. renders with correct content and styles', () => {
@@ -33,7 +33,7 @@ describe('NsMediumCard component', () => {
         );
         expect(subtitleElement).toBeInTheDocument();
 
-        const imageElement = screen.getByAltText('Lumi Spa');
+        const imageElement = screen.getByAltText(ImageData1.selected?.altText || '');
         expect(imageElement).toBeInTheDocument();
 
         const button = screen.queryByText('SEE WHAT WE’RE DOING');

package/src/common/card/specs/NsPost.spec.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import NsPost from '../NsPost';
+import { ImageData1 } from '../fixtures/ImageData1';
 
 describe('NsPost component', () => {
     const props = {
         text: '38 New Beauty Products Our Editors Are Loving',
         body: 'SPA & BEAUTY TODAY',
-        backgroundImageUrl: 'https://media.nuskin.com/m/780f8d84bcb9d5ed/Small-Essence_News.jpg',
-        backgroundImageAlt: 'small essence news',
+        backgroundImageDetail: ImageData1,
     };
 
     it('1. renders with correct content and styles', () => {
@@ -22,7 +22,7 @@ describe('NsPost component', () => {
         const bodyElement = screen.getByText('SPA & BEAUTY TODAY');
         expect(bodyElement).toBeInTheDocument();
 
-        const imageElement = screen.getByAltText('small essence news');
+        const imageElement = screen.getByAltText(ImageData1?.selected?.altText || '');
         expect(imageElement).toBeInTheDocument();
     });
 });

package/src/common/card/specs/NsSmallFullCard.spec.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import NsSmallFullCard from '../NsSmallFullCard';
+import { ImageData1 } from '../fixtures/ImageData1';
 
 describe('NsSmallFullCard component', () => {
     const props = {
         title: 'Title',
         subtitle: 'Subtitle',
-        backgroundImageUrl: 'https://media.nuskin.com/m/4f5b0aee8fe3ff90/Small-category-makeup.jpg',
-        backgroundImageAlt: 'Facial Moisturizers',
+        backgroundImageDetail: ImageData1,
         button: {
             showButton: true,
             buttonText: 'Placeholder',
@@ -29,7 +29,7 @@ describe('NsSmallFullCard component', () => {
         const subtitleElement = screen.getByText('Subtitle');
         expect(subtitleElement).toBeInTheDocument();
 
-        const imageElement = screen.getByAltText('Facial Moisturizers');
+        const imageElement = screen.getByAltText(ImageData1.selected?.altText || '');
         expect(imageElement).toBeInTheDocument();
 
         const linkElement = screen.getByText('Placeholder');

package/src/common/card/specs/NsXLargeCard.spec.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import NsXLargeCard from '../NsXLargeCard';
+import { ImageData1 } from '../fixtures/ImageData1';
 
 describe('NsXLargeCard component', () => {
     const props = {
         title: 'Title',
         subtitle: 'Subtitle',
-        backgroundImageUrl: 'https://media.nuskin.com/m/4f5b0aee8fe3ff90/Small-category-makeup.jpg',
-        backgroundImageAlt: 'Facial Moisturizers',
+        backgroundImageDetail: ImageData1,
         button: {
             showButton: true,
             buttonText: 'Discover more',
@@ -29,7 +29,7 @@ describe('NsXLargeCard component', () => {
         const titleElement = screen.getByText('Title');
         expect(titleElement).toBeInTheDocument();
 
-        const imageElement = screen.getByAltText('Facial Moisturizers');
+        const imageElement = screen.getByAltText(ImageData1.selected?.altText || '');
         expect(imageElement).toBeInTheDocument();
 
         const linkElement = screen.getByText('Discover more');

package/src/common/card/stories/NsAwardCard.stories.tsx

@@ -1,5 +1,6 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import { NsAwardCard } from '../';
+import { ImageData1 } from '../fixtures/ImageData1';
 
 type ComponentType = typeof NsAwardCard;
 type Story = StoryObj<ComponentType>;
@@ -10,14 +11,11 @@ export default {
     title: 'Components/Containers/Card/NsAwardCard',
 } as MetaStory;
 
-const host = 'https://media.nuskin.com';
-
 export const Default: Story = {
     args: {
         title: 'AgeLoc LumiSpa iO',
         awardName: '2023 Bronze Winner',
         mediaOutlet: 'Edison Awards',
-        backgroundImageUrl: `${host}/m/2ec571a87dc9680c/Small-Edison-Bronze-Logo-Homepage.jpg`,
-        backgroundImageAlt: 'Edison Bronze Logo',
+        backgroundImageDetail: ImageData1,
     },
 };

package/src/common/card/stories/NsHeroCardLevel1.stories.tsx

@@ -1,5 +1,6 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import { NsHeroCardLevel1 } from '../';
+import { ImageData1 } from '../fixtures/ImageData1';
 
 type ComponentType = typeof NsHeroCardLevel1;
 type Story = StoryObj<ComponentType>;
@@ -10,15 +11,12 @@ export default {
     title: 'Components/Containers/Card/NsHeroCardLevel1',
 } as MetaStory;
 
-const host = 'https://media.nuskin.com/';
-
 export const Default: Story = {
     args: {
         cardTitle: 'A skin ready for winter',
         cardDescription:
             'We have brought these discoveries to life through our powerful skin care products and supplements.',
-        backgroundImageUrl: `${host}m/9734240cc191163/webimage-lash-brow-serum-carousel-image-launch.png`,
-        backgroundImageAlt: 'lash brow serum carousel',
+        backgroundImageDetail: ImageData1,
         button: {
             showButton: true,
             fullWidth: true,

package/src/common/card/stories/NsHeroCardLevel2.stories.tsx

@@ -1,5 +1,6 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import { NsHeroCardLevel2 } from '../';
+import { ImageData1 } from '../fixtures/ImageData1';
 
 type ComponentType = typeof NsHeroCardLevel2;
 type Story = StoryObj<ComponentType>;
@@ -10,15 +11,12 @@ export default {
     title: 'Components/Containers/Card/NsHeroCardLevel2',
 } as MetaStory;
 
-const host = 'https://media.nuskin.com/';
-
 export const Default: Story = {
     args: {
         cardTitle: 'Current shop deals',
         cardDescription: 'Lumispa, sunscreen and more',
         brandName: 'Beauty focus™',
-        backgroundImageUrl: `${host}m/5f1c423bb57589f0/webimage-autumn-sale-carousel.png`,
-        backgroundImageAlt: 'lash brow serum carousel',
+        backgroundImageDetail: ImageData1,
         button: {
             showButton: true,
             endIcon: 'arrowRight',

package/src/common/card/stories/NsLargeCard.stories.tsx

@@ -1,6 +1,7 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsLargeCard } from '../';
+import { ImageData1 } from '../fixtures/ImageData1';
 
 type ComponentType = typeof NsLargeCard;
 type Story = StoryObj<ComponentType>;
@@ -12,16 +13,13 @@ export default {
     decorators: [withCenterDecorator],
 } as MetaStory;
 
-const host = 'https://media.nuskin.com';
-
 export const Default: Story = {
     args: {
         isHorizontal: false,
         title: 'Personal Care',
         subtitle: 'Subtitle',
         intro: 'Nu Skin® product lines combine nature and science for skincare benefits you can see and feel.',
-        backgroundImageUrl: `${host}/m/95f9cf4143e3882/Small-About_Us-Personal-Care-Products-Image.jpg`,
-        backgroundImageAlt: 'Facial Moisturizers',
+        backgroundImageDetail: ImageData1,
         button: {
             showButton: true,
             buttonText: 'REVEAL YOUR BEST SKIN',

package/src/common/card/stories/NsMediumCard.stories.tsx

@@ -2,6 +2,7 @@ import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { NsMediumCard } from '../';
+import { ImageData1 } from '../fixtures/ImageData1';
 
 type ComponentType = typeof NsMediumCard;
 type Story = StoryObj<ComponentType>;
@@ -14,16 +15,13 @@ export default {
     decorators: [withCenterDecorator],
 } as MetaStory;
 
-const host = 'https://media.nuskin.com';
-
 export const Default: Story = {
     args: {
         title: 'Sustainability',
         titleFontWeight: 'bold',
         subtitle:
             'We’re committed to keeping our global communities clean, safe, and protected for the future. We’re proud to embrace sustainable practices today for a resource-rich tomorrow.',
-        backgroundImageUrl: `${host}/m/3353b9c05cb83860/Small-category-facial_moisturizers.jpg`,
-        backgroundImageAlt: 'Lumi Spa',
+        backgroundImageDetail: ImageData1,
         button: {
             showButton: true,
             buttonText: 'SEE WHAT WE’RE DOING',

package/src/common/card/stories/NsPost.stories.tsx

@@ -1,5 +1,6 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import { NsPost } from '../';
+import { ImageData1 } from '../fixtures/ImageData1';
 
 type ComponentType = typeof NsPost;
 type Story = StoryObj<ComponentType>;
@@ -10,13 +11,10 @@ export default {
     title: 'Components/Containers/Card/NsPost',
 } as MetaStory;
 
-const host = 'https://media.nuskin.com/';
-
 export const Default: Story = {
     args: {
         text: '38 New Beauty Products Our Editors Are Loving',
         body: 'SPA & BEAUTY TODAY',
-        backgroundImageUrl: `${host}m/780f8d84bcb9d5ed/Small-Essence_News.jpg`,
-        backgroundImageAlt: 'small essence news',
+        backgroundImageDetail: ImageData1,
     },
 };

package/src/common/card/stories/NsSmallFullCard.stories.tsx

@@ -1,6 +1,7 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsSmallFullCard } from '../';
+import { ImageData1 } from '../fixtures/ImageData1';
 
 type ComponentType = typeof NsSmallFullCard;
 type Story = StoryObj<ComponentType>;
@@ -13,14 +14,11 @@ export default {
     decorators: [withCenterDecorator],
 } as MetaStory;
 
-const host = 'https://media.nuskin.com';
-
 export const Default: Story = {
     args: {
         title: 'Title',
         subtitle: 'Subtitle',
-        backgroundImageUrl: `${host}/m/4f5b0aee8fe3ff90/Small-category-makeup.jpg`,
-        backgroundImageAlt: 'Facial Moisturizers',
+        backgroundImageDetail: ImageData1,
         button: {
             showButton: true,
             buttonText: 'Placeholder',

package/src/common/card/stories/NsXLargeCard.stories.tsx

@@ -1,6 +1,8 @@
-import type { StoryObj, Meta } from '@storybook/react';
 import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import type { Meta, StoryObj } from '@storybook/react';
+
 import { NsXLargeCard } from '../';
+import { ImageData1 } from '../fixtures/ImageData1';
 
 type ComponentType = typeof NsXLargeCard;
 type Story = StoryObj<ComponentType>;
@@ -13,14 +15,11 @@ export default {
     decorators: [withCenterDecorator],
 } as MetaStory;
 
-const host = 'https://media.nuskin.com';
-
 export const Default: Story = {
     args: {
         title: 'Title',
         subtitle: 'Subtitle',
-        backgroundImageUrl: `${host}/m/4f5b0aee8fe3ff90/Small-category-makeup.jpg`,
-        backgroundImageAlt: 'Facial Moisturizers',
+        backgroundImageDetail: ImageData1,
         button: {
             showButton: true,
             buttonText: 'Discover more',

package/src/common/carousal/CarousalControl.tsx

@@ -1,6 +1,9 @@
+import { ReactElement } from 'react';
+
 import { styled } from '@nuskin/foundation-theme';
+
+import { NsIcon, NsLink, NsTypography } from '../';
 import IconWrapper from './IconWrapper';
-import { NsTypography, NsLink, NsIcon } from '..';
 
 interface CarousalControlProps {
     next(): void;
@@ -20,7 +23,7 @@ const InnerWrapper = styled.div`
     gap: 20px;
     align-items: center;
 `;
-const CarousalControl = ({ next, prev, viewAllUrl, viewAllLabel }: CarousalControlProps) => {
+const CarousalControl = ({ next, prev, viewAllUrl, viewAllLabel }: CarousalControlProps): ReactElement => {
     return (
         <Wrapper>
             <InnerWrapper>

package/src/common/carousal/IconWrapper.tsx

@@ -1,6 +1,7 @@
-import { PropsWithChildren } from 'react';
-import { styled } from '@nuskin/foundation-theme';
+import { PropsWithChildren, ReactElement } from 'react';
+
 import { Box } from '@mui/material';
+import { styled } from '@nuskin/foundation-theme';
 
 type IconWrapperProps = PropsWithChildren<{
     onClick(): void;
@@ -22,7 +23,7 @@ const Wrapper = styled(
         boxSizing: 'content-box',
     };
 });
-const IconWrapper = ({ children, onClick, className }: IconWrapperProps) => {
+const IconWrapper = ({ children, onClick, className }: IconWrapperProps): ReactElement => {
     return (
         <Wrapper component="span" className={className || ''} onClick={onClick}>
             {children}

package/src/common/carousal/NsCarousal.tsx

@@ -1,14 +1,16 @@
+import 'slick-carousel/slick/slick-theme.css';
+import 'slick-carousel/slick/slick.css';
+
+import { ReactElement, ReactNode, useCallback, useRef } from 'react';
+
+import Slider from 'react-slick';
+
 import Box from '@mui/material/Box';
 import { styled } from '@nuskin/foundation-theme';
-import { ReactNode, useCallback, useRef } from 'react';
-import Slider from 'react-slick';
 
 import CarousalControl from './CarousalControl';
 import defaultCarousalSettings from './slickSetting';
 
-import 'slick-carousel/slick/slick-theme.css';
-import 'slick-carousel/slick/slick.css';
-
 const SlickContainer = styled(Box)(() => {
     return {
         padding: '30px 0 60px',
@@ -34,7 +36,7 @@ export default function NsCarousal({
     settings,
     allEntryLabel = 'View All',
     showControlButtons = true,
-}: CarousalProps) {
+}: CarousalProps): ReactElement {
     const sliderRef = useRef();
     const prev = useCallback(() => {
         if (sliderRef.current) {

package/src/common/carousal/NsScrollingCarousal.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { ReactElement, useMemo } from 'react';
 
 import Slider from 'react-slick';
 
@@ -28,7 +28,7 @@ const NsScrollingCarousal = ({
     settings,
     dotsBottomPixel,
     additionalProps,
-}: NsScrollingCarousalProps) => {
+}: NsScrollingCarousalProps): ReactElement => {
     const defaultSettings = useMemo(() => {
         return {
             ...settings,

package/src/common/carousal/RenderBrand.tsx

@@ -1,3 +1,5 @@
+import { ReactElement } from 'react';
+
 import NsBrandCard from '../card/NsBrandCard';
 
 interface BrandType {
@@ -5,7 +7,7 @@ interface BrandType {
     backgroundImage: string;
     brandImage: string;
 }
-export const RenderBrand = (entry: BrandType, index: number) => {
+export const RenderBrand = (entry: BrandType, index: number): ReactElement => {
     const { title, backgroundImage, brandImage } = entry;
     return (
         <NsBrandCard

package/src/common/carousal/specs/NsScrollingCarousal.spec.tsx

@@ -1,5 +1,7 @@
-import { render, screen, fireEvent } from '@/test-utils/index';
+import { ReactElement } from 'react';
+
 import { NsScrollingCarousal } from '@/common/';
+import { fireEvent, render, screen } from '@/test-utils/index';
 
 const mockEntries = [
     { id: 1, title: 'First entry' },
@@ -9,7 +11,7 @@ const mockEntries = [
     { id: 5, title: 'Fifth entry' },
 ];
 
-const mockRenderEntry = (entry: any, index: number) => {
+const mockRenderEntry = (entry: any, index: number): ReactElement => {
     return <div key={index}>{entry.title}</div>;
 };
 const mockSettings = {

package/src/common/carousal/stories/{NSCarousal.stories.tsx → NsCarousal1.stories.tsx}

@@ -1,5 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import { ReactElement } from 'react';
+
 import { NsCarousal } from '@/common/';
+import type { Meta, StoryObj } from '@storybook/react';
+
 import { brandEntries } from '../../card/stories/data';
 import { RenderBrand } from '../RenderBrand';
 import settings from '../slickSetting';
@@ -13,7 +16,7 @@ export default {
     component: NsCarousal,
     argTypes: {},
     decorators: [
-        (Story) => (
+        (Story): ReactElement => (
             <div style={{ width: 800 }}>
                 <Story />
             </div>

package/src/common/carousal/stories/NsScrollingCarousal.stories.tsx

@@ -1,3 +1,5 @@
+import { ReactElement } from 'react';
+
 import { NsScrollingCarousal, NsTextStrip } from '@/common/';
 import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import type { Meta, StoryObj } from '@storybook/react';
@@ -6,7 +8,7 @@ type ComponentType = typeof NsScrollingCarousal;
 type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
-const renderSlide = (slide: any, i: number) => <NsTextStrip key={i} {...slide} />;
+const renderSlide = (slide: any, i: number): ReactElement => <NsTextStrip key={i} {...slide} />;
 
 const slides = [
     {
@@ -68,7 +70,7 @@ export default {
             testid: 'scrolling-carousal',
         },
     },
-    render: (args) => (
+    render: (args): ReactElement => (
         <div style={{ width: '90vw' }}>
             <NsScrollingCarousal {...args} />
         </div>

package/src/common/cart-icon/NsCartIcon.tsx

@@ -1,9 +1,17 @@
+import { ReactElement } from 'react';
+
 import { IconButton } from '@mui/material';
+
 import { NsIcon } from '../icon';
 import { StyledBadge } from './NsCartIcon.styled';
 import { NsCartIconProps } from './types.d';
 
-const NsCartIcon = ({ itemCount = 0, size = 'large', color = 'primary', maxItemCount = 999 }: NsCartIconProps) => {
+const NsCartIcon = ({
+    itemCount = 0,
+    size = 'large',
+    color = 'primary',
+    maxItemCount = 999,
+}: NsCartIconProps): ReactElement => {
     return (
         <IconButton aria-label="cart">
             <StyledBadge badgeContent={itemCount} max={maxItemCount} bgcolor={color} showZero>

package/src/common/checkbox/NsCheckbox.stories.tsx

@@ -1,8 +1,9 @@
-import React, { useState } from 'react';
-import { within } from '@storybook/testing-library';
+import React, { ReactElement, useState } from 'react';
+
 import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import type { StoryObj, Meta } from '@storybook/react';
 import { expect } from '@storybook/jest';
+import type { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/testing-library';
 
 import { NsCheckbox } from './';
 
@@ -35,7 +36,7 @@ export default {
     },
 } as MetaStory;
 
-const RenderCheckbox = (args: any) => {
+const RenderCheckbox = (args: any): ReactElement => {
     const [isChecked, setIsChecked] = useState(false);
     const handleChange = (event: { target: { checked: boolean } }) => {
         const isChecked = event.target.checked;

package/src/common/checkbox/NsCheckbox.tsx

@@ -4,16 +4,16 @@
  * @description
  */
 
-import React, { PropsWithChildren, useCallback } from 'react';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import { default as MUICheckbox } from '@mui/material/Checkbox';
+import React, { PropsWithChildren, ReactElement, useCallback } from 'react';
 
-import { BpCheckedIcon, BpIcon, StyledLabel, StyledFlagLabel } from './NsCheckbox.styled';
-import { NsCheckboxProps } from './types.d';
+import MUICheckbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
 
 import { NsTypography } from '../';
+import { BpCheckedIcon, BpIcon, StyledFlagLabel, StyledLabel } from './NsCheckbox.styled';
+import { NsCheckboxProps } from './types.d';
 
-const NsCheckbox = (props: PropsWithChildren<NsCheckboxProps>) => {
+const NsCheckbox = (props: PropsWithChildren<NsCheckboxProps>): ReactElement => {
     const {
         name,
         label,

package/src/common/column-control/NsColumnControl.tsx

@@ -1,9 +1,11 @@
-import { useMemo } from 'react';
+import { ReactElement, useMemo } from 'react';
+
 import { Box } from '@mui/material';
 import { styled } from '@nuskin/foundation-theme';
+
+import { shouldNotForwardPropsWithKeys } from '../util';
 import { NsColumnControlProps, sizeObjectType } from './types.d';
 import { getColumnSizes } from './utils';
-import { shouldNotForwardPropsWithKeys } from '../util';
 
 type StyledDivProps = {
     sizes: sizeObjectType;
@@ -42,7 +44,7 @@ const StyledDiv = styled(
     };
 });
 
-const NsColumnControl = ({ columnClass, children, gap, additionalProps }: NsColumnControlProps) => {
+const NsColumnControl = ({ columnClass, children, gap, additionalProps }: NsColumnControlProps): ReactElement => {
     const sizes = useMemo(() => {
         return getColumnSizes(columnClass);
     }, [columnClass]);

package/src/common/column-control/NsFlexColumns.tsx

@@ -1,9 +1,16 @@
-import { useMemo } from 'react';
-import { getColumnSizes } from './utils';
+import { ReactElement, useMemo } from 'react';
+
 import { StyledFlex } from './styled/StyledFlex';
 import { NsFlexColumnsProps } from './types';
+import { getColumnSizes } from './utils';
 
-const NsFlexColumns = ({ columnClass, children, gap, additionalProps, isFullWidth }: NsFlexColumnsProps) => {
+const NsFlexColumns = ({
+    columnClass,
+    children,
+    gap,
+    additionalProps,
+    isFullWidth,
+}: NsFlexColumnsProps): ReactElement => {
     const sizes = useMemo(() => {
         return getColumnSizes(columnClass ?? 'ns-col-lg-1-1');
     }, [columnClass]);

package/src/common/column-control/NsGridColumns.tsx

@@ -1,9 +1,16 @@
-import { useMemo } from 'react';
-import { getColumnSizes } from './utils';
+import { ReactElement, useMemo } from 'react';
+
 import { StyledGrid } from './styled/StyledGrid';
 import { NsGridColumnsProps } from './types';
+import { getColumnSizes } from './utils';
 
-const NsGridColumns = ({ columnClass, children, gap, isFullWidth, additionalProps }: NsGridColumnsProps) => {
+const NsGridColumns = ({
+    columnClass,
+    children,
+    gap,
+    isFullWidth,
+    additionalProps,
+}: NsGridColumnsProps): ReactElement => {
     const sizes = useMemo(() => {
         return getColumnSizes(columnClass ?? 'ns-col-lg-1-1');
     }, [columnClass]);