@nuskin/foundation-ui-components 1.0.0-cft-35.13 → 1.0.0-develop.10

package/src/common/flag/types.d.ts

@@ -1,6 +1,4 @@
 /**
- * @author [vijayaprathap Kumar] (vpkumar@nuskin.com)
- * types.d.ts
  * @description Extend the FlagProps interface to include message, color and size prop.
  */
 

package/src/common/hooks/index.ts

@@ -0,0 +1,2 @@
+export {default as useWindowSize} from './useWindowSize';
+export {default as useAccordionMap} from './useAccordionMap';

package/src/common/hooks/specs/useWindowSize.spec.tsx

@@ -0,0 +1,19 @@
+import { renderHook, act } from '@testing-library/react-hooks';
+import useWindowSize from '../useWindowSize';
+
+describe('useWindowSize', () => {
+    it('should return the window size', () => {
+        const { result } = renderHook(useWindowSize);
+        expect(result.current).toEqual({ width: window.innerWidth, height: window.innerHeight });
+    });
+
+    it('should update the window size when the window is resized', () => {
+        const { result } = renderHook(() => useWindowSize());
+        act(() => {
+            window.innerWidth = 500;
+            window.innerHeight = 500;
+            window.dispatchEvent(new Event('resize'));
+        });
+        expect(result.current).toEqual({ width: 500, height: 500 });
+    });
+});

package/src/common/hooks/useAccordionMap.tsx

@@ -0,0 +1,39 @@
+import { useState, useEffect, useCallback } from 'react';
+
+type ItemMap = Record<string, boolean>;
+type UseAccordionProp = {
+    allowMultipleExpanded?: boolean;
+    defaultOpenIds?: string[];
+};
+const reducer = (map: ItemMap, id: string) => {
+    map[id] = true;
+    return map;
+};
+
+const useAccordionMap = ({ allowMultipleExpanded, defaultOpenIds }: UseAccordionProp) => {
+    const mapSetter = useCallback(() => {
+        let ids = defaultOpenIds;
+        if (!allowMultipleExpanded) {
+            ids = ids?.slice(0, 1) ?? [];
+        }
+        return ids?.reduce(reducer, {}) ?? {};
+    }, [defaultOpenIds, allowMultipleExpanded]);
+
+    const [itemStateMap, setItemMap] = useState<ItemMap>(mapSetter);
+
+    const toggleOpen = (index: string | number) => {
+        const key = index + '';
+        if (allowMultipleExpanded) {
+            setItemMap((prevState) => ({ ...prevState, [key]: !prevState[key] }));
+        } else {
+            setItemMap({ [key]: !itemStateMap[index] });
+        }
+    };
+
+    useEffect(() => {
+        setItemMap(mapSetter);
+    }, [mapSetter]);
+    return { itemStateMap, toggleOpen };
+};
+
+export default useAccordionMap;

package/src/common/hooks/useWindowSize.tsx

@@ -0,0 +1,30 @@
+import { useState, useEffect } from 'react';
+
+const useWindowSize = () => {
+    const [windowSize, setWindowSize] = useState({
+        width: window.innerWidth,
+        height: window.innerHeight,
+    });
+
+    useEffect(() => {
+        function handleResize() {
+            setWindowSize({
+                width: window?.innerWidth || 300,
+                height: window?.innerHeight || 300,
+            });
+        }
+        if (typeof window !== 'undefined') {
+            window.addEventListener('resize', handleResize);
+        }
+
+        return () => {
+            if (typeof window !== 'undefined') {
+                window.removeEventListener('resize', handleResize);
+            }
+        };
+    }, []);
+
+    return windowSize;
+};
+
+export default useWindowSize;

package/src/common/icon/NsIcon.spec.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '../../../test-utils';
+import { render, screen } from '@/test-utils/index';
 import { NsIcon, NsIconNameType, NsIconVariants } from './';
 
 describe('NsIcon Component', () => {

package/src/common/icon/NsIcon.stories.tsx

@@ -1,5 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsIcon, NsIconVariants } from './';
 
 type ComponentType = typeof NsIcon;
@@ -7,7 +7,7 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsIcon',
+    title: 'Icons/NsIcon',
     component: NsIcon,
     decorators: [withCenterDecorator],
     argTypes: {

package/src/common/icon/NsIcon.styled.tsx

@@ -1,5 +1,5 @@
 import { styled } from '@nuskin/foundation-theme';
-import { NsIconSizeType } from './types';
+import { NsIconSizeType } from './types.d';
 
 const iconSize = {
     small: '16px',

package/src/common/icon/NsIcon.tsx

@@ -1,6 +1,6 @@
 import { IconContainer } from './NsIcon.styled';
 import IconVariants from './NsIconVariants';
-import { NsIconProps } from './types';
+import { NsIconProps } from './types.d';
 
 const NsIcon = ({
     name,

package/src/common/icon/NsIconVariants.ts

@@ -17,27 +17,32 @@ import Home from './icons/home';
 import AlertErrorIcon from './icons/AlertErrorIcon';
 import WarningIcon from './icons/WarningIcon';
 import CloseIcon from './icons/CloseIcon';
+import UserIcon from './icons/UserIcon';
+import HamburgerIcon from './icons/HamburgerIcon';
 
 const IconVariants = {
     arrowDown: ArrowDown,
     arrowUp: ArrowUp,
     arrowLeft: ArrowLeft,
     arrowRight: ArrowRight,
+    alertError: AlertErrorIcon,
     cart: Cart,
     cartBadge: CartBadge,
+    close: CloseIcon,
     checkShield: CheckShield,
     checkVerified: CheckVerified,
     error: ErrorIcon,
+    hamburgerIcon: HamburgerIcon,
+    home: Home,
     infoFilled: InfoFilled,
     infoOutlined: InfoOutlined,
     search: SearchIcon,
     success: SuccessIcon,
-    trash: TrashIcon,
     slash: SlashIcon,
-    home: Home,
-    alertError: AlertErrorIcon,
+    trash: TrashIcon,
+    userIcon: UserIcon,
     warning: WarningIcon,
-    close: CloseIcon
 };
 
 export default IconVariants;
+export const isValidIconName = (name: string) => Object.keys(IconVariants).includes(name);

package/src/common/icon/icons/AlertErrorIcon.tsx

@@ -16,17 +16,26 @@ const AlertErrorIcon = (props: SvgIconProps) => {
             xmlns="http://www.w3.org/2000/svg"
             {...props}
         >
-            <g id="💎-icon/alert/WarningFill-red" transform="translate(1.000000, 1.000000)">
+            <g id="icon/alert/WarningFill-red" transform="translate(1.000000, 1.000000)">
                 <g id="Error2" transform="translate(0.000000, 1.200000)">
-                    <path d="M17.9465423,14.8670135 L9.44311247,0.246687943 C9.35049358,0.100809118 9.18936767,0.012383152 9.01617259,0.012383152 C8.84297751,0.012383152 8.68185161,
+                    <path
+                        d="M17.9465423,14.8670135 L9.44311247,0.246687943 C9.35049358,0.100809118 9.18936767,0.012383152 9.01617259,0.012383152 C8.84297751,0.012383152 8.68185161,
                         0.100809118 8.58923271,0.246687943 L0.0706452929,14.8670135 C-0.0142965839,15.0216954 -0.0118890438,15.2093943 0.0769925071,15.3618609 C0.165874058,
                         15.5143276 0.328282319,15.6093523 0.505163987,15.6123832 L17.5120236,15.6123832 C17.6889052,15.6093523 17.8513135,15.5143276 17.940195,15.3618609 C18.0290766,
-                        15.2093943 18.0314841,15.0216954 17.9465423,14.8670135 Z" id="Shape" fill={props.fill || '#B2140A'} fill-rule="nonzero">
-                    </path>
-                    <path d="M8.19,12.84 C8.16437588,12.6281014 8.2368299,12.4160897 8.38677958,12.2641927 C8.53672927,12.1122956 8.74778837,12.0371121 8.96,12.06 C9.16715704,
+                        15.2093943 18.0314841,15.0216954 17.9465423,14.8670135 Z"
+                        id="Shape"
+                        fill={props.fill || '#B2140A'}
+                        fillRule="nonzero"
+                    ></path>
+                    <path
+                        d="M8.19,12.84 C8.16437588,12.6281014 8.2368299,12.4160897 8.38677958,12.2641927 C8.53672927,12.1122956 8.74778837,12.0371121 8.96,12.06 C9.16715704,
                     12.0467652 9.37034806,12.1211477 9.52,12.265 C9.65709398,12.4241339 9.72701115,12.6303 9.715,12.84 C9.72048715,13.0522748 9.64341383,13.2584012 9.5,
                     13.415 C9.35312473,13.5641498 9.1489517,13.6425377 8.94,13.63 C8.72997224,13.6424095 8.52401376,13.5683367 8.37,13.425 C8.23531653,13.2613056 8.17063593,
-                    13.0510936 8.19,12.84 Z M9.415,11.195 L8.5,11.195 L8.25,5.96 L9.675,5.96 L9.415,11.195 Z" id="Shape" fill={props.fill || '#FFFFFF'} fill-rule="nonzero"></path>
+                    13.0510936 8.19,12.84 Z M9.415,11.195 L8.5,11.195 L8.25,5.96 L9.675,5.96 L9.415,11.195 Z"
+                        id="Shape"
+                        fill={props.fill || '#FFFFFF'}
+                        fillRule="nonzero"
+                    ></path>
                 </g>
             </g>
         </SvgIcon>

package/src/common/icon/icons/HamburgerIcon.tsx

@@ -0,0 +1,29 @@
+/* eslint-disable max-len */
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+/**
+ *
+ * @param props {fill: color to be filled for icon, color: color of the tick icon}
+ */
+const HamburgerIcon = (props: SvgIconProps) => {
+    return (
+        <SvgIcon viewBox="0 0 24 24" {...props} data-testid="hamburgerIcon" xmlns="http://www.w3.org/2000/svg">
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M0 1C0 0.447715 0.447715 0 1 0H19C19.5523 0 20 0.447715 20 1C20 1.55228 19.5523 2 19 2H1C0.447715 2 0 1.55228 0 1Z"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M0 9C0 8.44772 0.447715 8 1 8H19C19.5523 8 20 8.44772 20 9C20 9.55228 19.5523 10 19 10H1C0.447715 10 0 9.55228 0 9Z"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M0 17C0 16.4477 0.447715 16 1 16H19C19.5523 16 20 16.4477 20 17C20 17.5523 19.5523 18 19 18H1C0.447715 18 0 17.5523 0 17Z"
+            />
+        </SvgIcon>
+    );
+};
+
+export default HamburgerIcon;

package/src/common/icon/icons/UserIcon.tsx

@@ -0,0 +1,30 @@
+/* eslint-disable max-len */
+import { useTheme } from '@mui/material/styles';
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+/**
+ *
+ * @param props {fill: color to be filled for icon, color: color of the tick icon}
+ */
+const UserIcon = (props: SvgIconProps) => {
+    const { palette } = useTheme();
+    const strokeColor = palette.primary.main;
+    return (
+        <SvgIcon viewBox="0 0 24 24" {...props} data-testid="userIcon" xmlns="http://www.w3.org/2000/svg">
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23Z"
+                stroke={strokeColor}
+                strokeWidth="2"
+            />
+            <path
+                d="M19 20C18.9425 19.3229 19 17.5669 17.3793 17.2226C14.7126 16.6144 13.931 16.4078 14.1034 14.2272C15.8046 13.0796 15.7816 11.0252 15.7471 8.74139C15.7471 6.67508 14.0695 5 12 5C9.93052 5 8.25287 6.67508 8.25287 8.74139C8.25287 11.0367 8.25287 13.137 9.89655 14.2272C10.0575 16.4078 9.28736 16.6144 6.62069 17.2226C5 17.5669 5.05747 19.3229 5 20"
+                stroke={strokeColor}
+                strokeWidth="2"
+                strokeLinecap="round"
+            />
+        </SvgIcon>
+    );
+};
+
+export default UserIcon;

package/src/common/icon/icons/WarningIcon.tsx

@@ -18,15 +18,24 @@ const WarningIcon = (props: SvgIconProps) => {
         >
             <g id="💎-icon/alert/WarningFill-yellow" transform="translate(1.000000, 1.000000)">
                 <g id="Warning2" transform="translate(0.000000, 1.200000)">
-                    <path d="M17.9465423,14.8670135 L9.44311247,0.246687943 C9.35049358,0.100809118 9.18936767,0.012383152 9.01617259,0.012383152 C8.84297751,0.012383152 8.68185161,
+                    <path
+                        d="M17.9465423,14.8670135 L9.44311247,0.246687943 C9.35049358,0.100809118 9.18936767,0.012383152 9.01617259,0.012383152 C8.84297751,0.012383152 8.68185161,
                     0.100809118 8.58923271,0.246687943 L0.0706452929,14.8670135 C-0.0142965839,15.0216954 -0.0118890438,15.2093943 0.0769925071,15.3618609 C0.165874058,
                     15.5143276 0.328282319,15.6093523 0.505163987,15.6123832 L17.5120236,15.6123832 C17.6889052,15.6093523 17.8513135,15.5143276 17.940195,15.3618609 C18.0290766,
-                    15.2093943 18.0314841,15.0216954 17.9465423,14.8670135 Z" id="Shape" fill="#FEBD00" fill-rule="nonzero"></path>
-                    <path d="M8.19,12.84 C8.16437588,12.6281014 8.2368299,12.4160897 8.38677958,12.2641927 C8.53672927,12.1122956 8.74778837,12.0371121 8.96,12.06 C9.16715704,
+                    15.2093943 18.0314841,15.0216954 17.9465423,14.8670135 Z"
+                        id="Shape"
+                        fill="#FEBD00"
+                        fillRule="nonzero"
+                    ></path>
+                    <path
+                        d="M8.19,12.84 C8.16437588,12.6281014 8.2368299,12.4160897 8.38677958,12.2641927 C8.53672927,12.1122956 8.74778837,12.0371121 8.96,12.06 C9.16715704,
                     12.0467652 9.37034806,12.1211477 9.52,12.265 C9.65709398,12.4241339 9.72701115,12.6303 9.715,12.84 C9.72048715,13.0522748 9.64341383,13.2584012 9.5,
                     13.415 C9.35312473,13.5641498 9.1489517,13.6425377 8.94,13.63 C8.72997224,13.6424095 8.52401376,13.5683367 8.37,13.425 C8.23531653,13.2613056 8.17063593,
-                    13.0510936 8.19,12.84 Z M9.415,11.195 L8.5,11.195 L8.25,5.96 L9.675,5.96 L9.415,11.195 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero">
-                    </path>
+                    13.0510936 8.19,12.84 Z M9.415,11.195 L8.5,11.195 L8.25,5.96 L9.675,5.96 L9.415,11.195 Z"
+                        id="Shape"
+                        fill="#FFFFFF"
+                        fillRule="nonzero"
+                    ></path>
                 </g>
             </g>
         </SvgIcon>

package/src/common/icon/index.ts

@@ -1,3 +1,3 @@
 export { default as NsIcon } from './NsIcon';
 export { default as NsIconVariants } from './NsIconVariants';
-export type { NsIconProps, NsIconNameType, NsIconSizeType } from './types';
+export type { NsIconProps, NsIconNameType, NsIconSizeType } from './types.d';

package/src/common/icon/types.d.ts

@@ -4,6 +4,7 @@ import { NsIconVariants } from '.';
 export type NsIconSizeType = 'small' | 'medium' | 'large' | 'xLarge';
 
 export type NsIconNameType = keyof typeof NsIconVariants;
+
 export type NsIconProps = {
     name: NsIconNameType;
     size?: NsIconSizeType;

package/src/common/image/NsImage.spec.tsx

@@ -1,10 +1,60 @@
-import { render, screen } from '../../../test-utils';
-import NsImage from './NsImage';
-describe('NsImage', () => {
-    it('NsImage element renders', () => {
-        const altText = 'dummy image';
-        render(<NsImage src="https://www.google.com" width={300} height={300} alt={altText} />);
-        const imgElement = screen.getByAltText(altText);
+import { render, screen } from '@/test-utils/index';
+import { NsImage } from '../';
+
+describe('NsImage component', () => {
+    it('1. renders', () => {
+        const alt = 'test image';
+        render(<NsImage src="image.jpg" width={300} height={300} alt={alt} />);
+        const imgElement = screen.getByAltText(alt);
         expect(imgElement).toBeInTheDocument();
     });
+
+    it('2. renders with correct src and alt attributes', () => {
+        const src = 'image.jpg';
+        const alt = 'test image';
+        const { getByAltText } = render(<NsImage src={src} alt={alt} />);
+        const image = getByAltText(alt);
+        expect(image).toHaveAttribute('src', src);
+    });
+
+    it('3. renders with width and height if variant is not provided', () => {
+        const { getByAltText } = render(<NsImage src="image.jpg" alt="test image" width={300} height={300} />);
+        const image = getByAltText('test image');
+        expect(image).toHaveAttribute('width', '300');
+        expect(image).toHaveAttribute('height', '300');
+    });
+
+    it('4. renders with correct width and height based on variant', () => {
+        const { getByAltText } = render(<NsImage src="image.jpg" alt="test image" variant="icon" />);
+        const image = getByAltText('test image');
+        expect(image).toHaveAttribute('width', '60');
+        expect(image).toHaveAttribute('height', '60');
+    });
+
+    it('5. renders with correct width and height if variant is "fill"', () => {
+        const { getByAltText } = render(<NsImage src="image.jpg" alt="test image" variant="fill" />);
+        const image = getByAltText('test image');
+        expect(image).toHaveAttribute('width', '100%');
+        expect(image).toHaveAttribute('height', 'auto');
+    });
+
+    it('6. renders with correct width and height if variant is "award"', () => {
+        const { getByAltText } = render(<NsImage src="image.jpg" alt="test image" variant="award" />);
+        const image = getByAltText('test image');
+        expect(image).toHaveAttribute('width', '130');
+        expect(image).toHaveAttribute('height', '130');
+    });
+
+    it('7. renders with correct width and height if variant is "product"', () => {
+        const { getByAltText } = render(<NsImage src="image.jpg" alt="test image" variant="product" />);
+        const image = getByAltText('test image');
+        expect(image).toHaveAttribute('width', '300');
+        expect(image).toHaveAttribute('height', '300');
+    });
+
+    it('8. renders with additional props', () => {
+        const { getByAltText } = render(<NsImage src="image.jpg" alt="test image" className="custom-image" />);
+        const image = getByAltText('test image');
+        expect(image).toHaveClass('custom-image');
+    });
 });

package/src/common/image/NsImage.stories.tsx

@@ -1,5 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsImage } from './';
 
 type ComponentType = typeof NsImage;
@@ -7,7 +7,7 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsImage',
+    title: 'Components/Data Display/NsImage',
     component: NsImage,
     decorators: [withCenterDecorator],
     args: {

package/src/common/image/NsImage.tsx

@@ -1,19 +1,31 @@
-import { NsImageProps } from './types';
+import { NsImageProps } from './types.d';
 
 // eslint-disable-next-line no-unused-vars
 const NsImage = ({ src, width, height, alt, variant, ...rest }: NsImageProps) => {
-    let cHeight: string | number | undefined = height,
-        cWidth: string | number | undefined = width;
-    if (variant === 'product') {
-        (cHeight = 300), (cWidth = 300);
-    } else if (variant === 'icon') {
-        (cHeight = 60), (cWidth = 60);
-    } else if (variant === 'award') {
-        (cHeight = 130), (cWidth = 130);
-    } else if (variant === 'fill') {
-        (cHeight = 'auto'), (cWidth = '100%');
+    let cHeight, cWidth;
+    switch (variant) {
+        case 'product':
+            cHeight = 300;
+            cWidth = 300;
+            break;
+        case 'icon':
+            cHeight = 60;
+            cWidth = 60;
+            break;
+        case 'award':
+            cHeight = 130;
+            cWidth = 130;
+            break;
+        case 'fill':
+            cHeight = 'auto';
+            cWidth = '100%';
+            break;
+        default:
+            cHeight = height;
+            cWidth = width;
+            break;
     }
     // eslint-disable-next-line @next/next/no-img-element
-    return <img src={src} alt={alt} height={cHeight} width={cWidth} />;
+    return <img src={src} alt={alt} height={cHeight} width={cWidth} {...rest} />;
 };
 export default NsImage;

package/src/common/image/NsNextImage.spec.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '../../../test-utils';
+import { render, screen } from '@/test-utils/index';
 import NsNextImage from './NsNextImage';
 describe('NsNextImage', () => {
     it('test image element renders', () => {

package/src/common/image/NsNextImage.stories.tsx

@@ -1,5 +1,5 @@
 import { NsNextImage } from '.';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import type { StoryObj, Meta } from '@storybook/react';
 
 type ComponentType = typeof NsNextImage;
@@ -7,7 +7,7 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsNextImage',
+    title: 'Components/Data Display/NsNextImage',
     component: NsNextImage,
     decorators: [withCenterDecorator],
 } as MetaStory;

package/src/common/image/NsNextImage.tsx

@@ -1,4 +1,4 @@
-import { NsNextImageProps } from './types';
+import { NsNextImageProps } from './types.d';
 import Image from 'next/image';
 
 const NsNextImage = ({ src, width, height, alt, fill, priority, ...props }: NsNextImageProps) => {

package/src/common/image/index.ts

@@ -1,3 +1,3 @@
 export { default as NsNextImage } from './NsNextImage';
-export type { NsImageProps, NsNextImageProps } from './types';
+export type { NsImageProps, NsNextImageProps } from './types.d';
 export { default as NsImage } from './NsImage';

package/src/common/image/types.d.ts

@@ -15,6 +15,7 @@ export type NsNextImageProps = Pick<
     | 'blurDataURL'
     | 'fill'
     | 'unoptimized'
+    | 'loader'
 > & { id?: string; className?: string };
 
 export type NsImageProps = {

package/src/common/index.ts

@@ -1,4 +1,7 @@
+export * from './accordion';
+export * from './alert';
 export * from './auth-dropdown';
+export * from './autocomplete';
 export * from './banner';
 export * from './breadcrumb';
 export * from './brand-components';
@@ -8,21 +11,22 @@ export * from './carousal';
 export * from './cart-icon';
 export * from './column-control';
 export * from './checkbox';
+export * from './common.types.d';
 export * from './dropdown';
+export * from './email-simple';
 export * from './flag';
+export * from './hooks';
 export * from './icon';
-export * from './input';
 export * from './image';
-export * from './link';
+export * from './input';
 export * from './label';
-export * from './autocomplete';
-
-/* Dropdown Components */
-export * from './dropdown';
-export * from './auth-dropdown';
-export * from './alert';
+export * from './link';
+export * from './modal';
 export * from './nav-tab';
 export * from './nav-product-card';
+export * from './radiogroup';
+export * from './spinner';
+export * from './text-strip';
+export * from './table';
 export * from './typography';
-
-export * from './common.types';
+export * from './utility';

package/src/common/input/InputFieldWrapper.tsx

@@ -1,6 +1,6 @@
 import { Stack } from '@mui/material';
 import { styled, ColorUtils } from '@nuskin/foundation-theme';
-const { getPaletteColor, getAppColor } = ColorUtils;
+const { color, paletteColor } = ColorUtils;
 
 const InputFieldWrapper = styled(Stack)(({ theme }: any) => {
     return {
@@ -10,12 +10,12 @@ const InputFieldWrapper = styled(Stack)(({ theme }: any) => {
         '.MuiFormHelperText-root': {
             fontSize: '11px',
             marginTop: 0,
-            color: getPaletteColor(theme, 'primary', 'main'),
+            color: paletteColor('primary', 'main')({ theme }),
             '&.success': {
-                color: getAppColor(theme, 'success', '40') as string,
+                color: color('success', '40')({ theme }),
             },
             '&.error': {
-                color: getPaletteColor(theme, 'error', 'main'),
+                color: paletteColor('error', 'main')({ theme }),
             },
         },
     };

package/src/common/input/InputWrapper.tsx

@@ -1,20 +1,25 @@
 import { Box } from '@mui/material';
-import { styled, nuskinTheme } from '@nuskin/foundation-theme';
-import { fieldStateType } from './types';
+import { styled, nuskinTheme, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
+import {fieldStateType} from './types.d';
 
+const { isDarkMode } = ColorUtils;
 const { colors } = nuskinTheme;
 
 const options = {
     shouldForwardProp: (propKey: string) => propKey !== 'fieldState',
 };
 
-const getInputBorderColor = (palette: any, fieldState: fieldStateType, isLight = true): string => {
+const getInputBorderColor = (
+    palette: FoundationTheme.Theme['palette'],
+    fieldState: fieldStateType,
+    isLight = true
+): string => {
     if (fieldState === 'success') {
-        return isLight ? colors.success[40] : colors.success[40];
+        return colors.success[40];
     } else if (fieldState === 'error') {
         return isLight ? colors.red[40] : colors.red[20];
     } else {
-        return palette.primary.main;
+        return palette?.primary.main ?? '';
     }
 };
 
@@ -28,7 +33,7 @@ const InputWrapper = styled(
 )<InputWrapperType>(({ theme, fieldState }) => {
     /* default value added so that unit tests do not fail */
     const { palette = { primary: { main: '', contrastText: '' } } } = theme;
-    const isLight = palette.primary.main === colors.primary.black;
+    const isLight = isDarkMode({ theme });
     const inputFocusedBorder = isLight ? colors.accentColorB[20] : colors.accentColorB[30];
     const inputDisabledBg = isLight ? colors.neutral[30] : colors.neutral[70];
     const inputDisabledBorder = isLight ? colors.neutral[60] : colors.neutral[80];
@@ -56,7 +61,7 @@ const InputWrapper = styled(
                     },
                 },
                 fieldset: {
-                    border: `1px solid ${getInputBorderColor(palette as any, fieldState, isLight)}`,
+                    border: `1px solid ${getInputBorderColor(palette, fieldState, isLight)}`,
                 },
                 input: {
                     color: palette.primary.main,