@nuskin/foundation-ui-components 1.9.0 → 1.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.9.0",
+    "version": "1.9.2",
     "description": "It is a foundation library written in react, that provides common components to all UI pages",
     "main": "src/common/index.ts",
     "repository": {

package/src/common/accordion/NsAccordionHeader.tsx

@@ -2,15 +2,10 @@ import { NsTypography, NsIcon, NsAccordionHeaderProps, AccordionVariant, NsIconP
 import { styled } from '@nuskin/foundation-theme';
 import { isValidIconName } from '../icon/NsIconVariants';
 import { getAccordionColor } from './colorMap';
-const options = {
-    shouldForwardProp: (propKey: string) => !['variant', 'invert'].includes(propKey),
-};
+
 type StyledType = { variant: AccordionVariantType; invert: boolean };
 
-const StyledHeader = styled(
-    'header',
-    options
-)<StyledType>(({ theme, variant, invert }) => {
+const StyledHeader = styled('header')<StyledType>(({ theme, variant, invert }) => {
     const { headBg, headText } = getAccordionColor({ theme, variant, invert, keys: ['headBg', 'headText'] });
     let borderBottom = 'none';
     if (variant === AccordionVariant.Compact) {

package/src/common/accordion/NsCollapse.tsx

@@ -1,59 +1,52 @@
 import { styled } from '@nuskin/foundation-theme';
+import { isValidElement, ReactElement, useMemo } from 'react';
+
 import {
+    AccordionContentTypeObject,
+    AccordionItem,
     AccordionVariant,
     AccordionVariantType,
-    NsCollapseProps,
-    AccordionItem,
     NsAccordion,
-    AccordionContentTypeObject,
+    NsCollapseProps,
 } from '../';
 import { getAccordionColor } from './colorMap';
-import { ReactElement, isValidElement, useMemo } from 'react';
 
 const getLevelOffset = (level: number) => {
     return level > 1 ? (level - 1) * 16 : 0;
 };
+type CollapsePropsType = { variant: AccordionVariantType; level: number; invert: boolean; isChild: boolean };
 
-const options = {
-    shouldForwardProp: (key: string) => !['variant', 'level'].includes(key),
-};
+export const StyledCollapse = styled('section')<CollapsePropsType>(({ theme, variant, level, invert, isChild }) => {
+    const { contentBg, contentText } = getAccordionColor({
+        theme,
+        invert,
+        variant,
+        keys: ['contentBg', 'contentText'],
+    });
 
-export const StyledCollapse = styled(
-    'section',
-    options
-)<{ variant: AccordionVariantType; level: number; invert: boolean; isChild: boolean }>(
-    ({ theme, variant, level, invert, isChild }) => {
-        const { contentBg, contentText } = getAccordionColor({
-            theme,
-            invert,
-            variant,
-            keys: ['contentBg', 'contentText'],
-        });
-
-        let borderBottom = 'none';
-        if (variant === AccordionVariant.Compact) {
-            borderBottom = isChild ? 'none' : '1px solid rgb(0,0,0,0.125)';
-        }
-        return {
-            backgroundColor: contentBg,
-            color: contentText,
-            opacity: 0,
-            padding: '0 16px',
-            height: 0,
-            overflow: 'hidden',
-            transition: '0.3s',
-            '&.expanded': {
-                padding: `9px 0 9px ${getLevelOffset(level)}px`,
-                height: 'auto',
-                opacity: 1,
-                borderBottom,
-            },
-            '.nsa-content-padded': {
-                padding: '0 16px 16px',
-            },
-        };
+    let borderBottom = 'none';
+    if (variant === AccordionVariant.Compact) {
+        borderBottom = isChild ? 'none' : '1px solid rgb(0,0,0,0.125)';
     }
-);
+    return {
+        backgroundColor: contentBg,
+        color: contentText,
+        opacity: 0,
+        padding: '0 16px',
+        height: 0,
+        overflow: 'hidden',
+        transition: '0.3s',
+        '&.expanded': {
+            padding: `9px 0 9px ${getLevelOffset(level)}px`,
+            height: 'auto',
+            opacity: 1,
+            borderBottom,
+        },
+        '.nsa-content-padded': {
+            padding: '0 16px 16px',
+        },
+    };
+});
 
 /**
  * NsCollapse component adds css animation while showing children items if prop `isOpen` is true,

package/src/common/alert/NsAlert.tsx

@@ -1,14 +1,16 @@
 import React, { useEffect, useState } from 'react';
+
 import {
-    AlertContainer,
     Alert,
-    AlertIcon,
-    AlertHead,
+    AlertBody,
     AlertCloseButton,
+    AlertContainer,
     AlertContent,
     AlertFoot,
-    AlertBody,
+    AlertHead,
+    AlertIcon,
 } from './NsAlert.styled';
+
 import type { NsAlertProps, ContextType, AlertType } from './types.d';
 import { NsIcon } from '../icon';
 import Header, { colorMap, iconMap } from './Header';
@@ -59,7 +61,7 @@ export default function NsAlert({
                 </AlertHead>
                 {hasDismissListener && (
                     <AlertCloseButton data-testid="alert-close-button" onClick={onDismiss}>
-                        <NsIcon name="close" size="small" />
+                        <NsIcon name="close" size="small" cursor="pointer" />
                     </AlertCloseButton>
                 )}
                 <AlertContent type={alertType as AlertType}>

package/src/common/auth-dropdown/NsAuthDropdown.styled.ts

@@ -1,6 +1,5 @@
 import { styled, ColorUtils } from '@nuskin/foundation-theme';
 import { DarkModeEnabledOption } from '../common.types';
-import { skipDarkModeEnabled } from '../util';
 
 //[TODO-Arun] - Use from custom color variables
 // const MAGENTA_COLOR = '#bb29bb';
@@ -49,10 +48,7 @@ export const Triangle = styled.div`
         box-shadow: 0 0 5px 0 ${color('neutral', '20')};
     }
 `;
-const options = {
-    shouldForwardProp: skipDarkModeEnabled,
-};
-export const AuthHead = styled('div', options)<DarkModeEnabledOption>`
+export const AuthHead = styled('div')<DarkModeEnabledOption>`
     cursor: pointer;
     padding: 5px 10px;
     display: flex;

package/src/common/button/NsButton.styled.tsx

@@ -5,7 +5,6 @@ import { ButtonConfig } from '@nuskin/foundation-theme/src/common/themes/types/b
 
 import { NsButtonProps } from './types.d';
 import { generateContainedStyle, generateIconOnlyStyles, generateOutlinedStyle, generateTextStyles } from './helper';
-import { skipDarkModeEnabled } from '../util';
 
 const { buttonColor, paletteColor } = ColorUtils;
 
@@ -13,49 +12,45 @@ const getButtonConfig = (theme: FoundationTheme.Theme, attribute: keyof ButtonCo
     const { config } = theme || {};
     return config?.components?.button?.[attribute] || '';
 };
-const options = {
-    shouldForwardProp: skipDarkModeEnabled,
-};
 
-export const StyledButton = styled(
-    MUIButton,
-    options
-)<NsButtonProps>(({ theme, color, size, darkModeEnabled, variant, iconOnly }) => {
-    const borderRadius = getButtonConfig(theme, 'borderRadius') || 0;
-    const focusBorderColor = getButtonConfig(theme, 'focusColor');
-    // TODO: remove as any from the theme and color
-    const sizeStyle = (theme as any)?.components?.button?.['size']?.[size ?? '']?.padding ?? {};
-    const btnColor = color as any;
-
-    let buttonStyles = {};
-    const hovered = buttonColor(btnColor, 'hovered')({ theme });
-    const pressed = buttonColor(btnColor, 'pressed')({ theme });
-    const focused = buttonColor(btnColor, 'focused')({ theme });
-    const textColor = paletteColor(btnColor, 'contrastText')({ theme, darkModeEnabled });
-    const backgroundColor = paletteColor(btnColor)({ theme, darkModeEnabled });
-
-    if (variant === 'contained') {
-        buttonStyles = generateContainedStyle({ backgroundColor, textColor, hovered, pressed, focused });
-    } else if (variant === 'outlined') {
-        const activeColor = paletteColor(btnColor)({ theme });
-        buttonStyles = generateOutlinedStyle({ borderColor: backgroundColor, hovered, pressed, activeColor });
-    } else if (variant === 'text') {
-        buttonStyles = generateTextStyles({ underlineColor: backgroundColor, hovered, pressed });
-    } else if (iconOnly) {
-        buttonStyles = generateIconOnlyStyles();
+export const StyledButton = styled(MUIButton)<NsButtonProps>(
+    ({ theme, color, size, darkModeEnabled, variant, iconOnly }) => {
+        const borderRadius = getButtonConfig(theme, 'borderRadius') || 0;
+        const focusBorderColor = getButtonConfig(theme, 'focusColor');
+        // TODO: remove as any from the theme and color
+        const sizeStyle = (theme as any)?.components?.button?.['size']?.[size ?? '']?.padding ?? {};
+        const btnColor = color as any;
+
+        let buttonStyles = {};
+        const hovered = buttonColor(btnColor, 'hovered')({ theme });
+        const pressed = buttonColor(btnColor, 'pressed')({ theme });
+        const focused = buttonColor(btnColor, 'focused')({ theme });
+        const textColor = paletteColor(btnColor, 'contrastText')({ theme, darkModeEnabled });
+        const backgroundColor = paletteColor(btnColor)({ theme, darkModeEnabled });
+
+        if (variant === 'contained') {
+            buttonStyles = generateContainedStyle({ backgroundColor, textColor, hovered, pressed, focused });
+        } else if (variant === 'outlined') {
+            const activeColor = paletteColor(btnColor)({ theme });
+            buttonStyles = generateOutlinedStyle({ borderColor: backgroundColor, hovered, pressed, activeColor });
+        } else if (variant === 'text') {
+            buttonStyles = generateTextStyles({ underlineColor: backgroundColor, hovered, pressed });
+        } else if (iconOnly) {
+            buttonStyles = generateIconOnlyStyles();
+        }
+
+        return {
+            gap: '10px',
+            borderRadius,
+            '&:focus': {
+                border: `1px solid ${focusBorderColor} !important`,
+            },
+            '&:disabled': {
+                backgroundColor: buttonColor(btnColor, 'disabled'),
+                color: buttonColor(btnColor, 'disabledText'),
+            },
+            ...buttonStyles,
+            ...sizeStyle,
+        };
     }
-
-    return {
-        gap: '10px',
-        borderRadius,
-        '&:focus': {
-            border: `1px solid ${focusBorderColor} !important`,
-        },
-        '&:disabled': {
-            backgroundColor: buttonColor(btnColor, 'disabled'),
-            color: buttonColor(btnColor, 'disabledText'),
-        },
-        ...buttonStyles,
-        ...sizeStyle,
-    };
-});
+);

package/src/common/card/NsBgCard.tsx

@@ -1,11 +1,12 @@
 import Card from '@mui/material/Card';
 import { styled } from '@nuskin/foundation-theme';
+import { shouldNotForwardPropsWithKeys } from '../util';
 
 type NsBgCardProps = {
     backgroundImageUrl: string;
 };
 const options = {
-    shouldForwardProp: (propKey: string) => propKey !== 'backgroundImageUrl',
+    shouldForwardProp: shouldNotForwardPropsWithKeys<NsBgCardProps>(['backgroundImageUrl']),
 };
 const Component = ({ backgroundImageUrl }: NsBgCardProps) => {
     const width = 256;

package/src/common/card/NsLargeCard.tsx

@@ -7,7 +7,7 @@ type NsLargeCardProps = {
     subtitle?: string;
     intro: string;
     icon?: NsIconNameType;
-    buttonVariant: 'text' | 'outlined' | 'contained';
+    buttonVariant?: 'text' | 'outlined' | 'contained';
     backgroundImageUrl: string;
     backgroundImageAlt: string;
     cardLink: { href: string; title: string };

package/src/common/card/NsMediumCard.tsx

@@ -9,7 +9,7 @@ type NsMediumCardProps = {
     icon?: NsIconNameType;
     backgroundImageUrl: string;
     backgroundImageAlt: string;
-    buttonVariant: 'text' | 'outlined' | 'contained';
+    buttonVariant?: 'text' | 'outlined' | 'contained';
     cardLink: { href: string; title: string };
 };
 

package/src/common/carousal/CarousalControl.tsx

@@ -5,6 +5,7 @@ import { NsTypography, NsLink, NsIcon } from '..';
 interface CarousalControlProps {
     next(): void;
     prev(): void;
+    viewAllLabel: string;
     viewAllUrl: string;
 }
 /*
@@ -14,21 +15,24 @@ const Wrapper = styled.div`
     display: flex;
     justify-content: flex-end;
     padding: 0 30px;
-    margin: 10px 20px;
+    margin: 30px 20px;
 `;
 const InnerWrapper = styled.div`
     display: flex;
-    width: 220px;
     gap: 20px;
     align-items: center;
 `;
-const CarousalControl = ({ next, prev, viewAllUrl }: CarousalControlProps) => {
+const CarousalControl = ({ next, prev, viewAllUrl, viewAllLabel }: CarousalControlProps) => {
     return (
         <Wrapper>
             <InnerWrapper>
-                <NsLink href={viewAllUrl}>
-                    <NsTypography variant={'h5'}>View All</NsTypography>
-                </NsLink>
+                {viewAllUrl ? (
+                    <NsLink href={viewAllUrl} underlineOnHover={false}>
+                        <NsTypography decoration="underline" variant={'h5'}>
+                            {viewAllLabel}
+                        </NsTypography>
+                    </NsLink>
+                ) : null}
                 <IconWrapper onClick={prev} className="carousal-prev-button">
                     <NsIcon name="arrowLeft" />
                 </IconWrapper>

package/src/common/carousal/NsCarousal.tsx

@@ -1,11 +1,13 @@
 import Box from '@mui/material/Box';
 import { styled } from '@nuskin/foundation-theme';
-import { useRef, useCallback, ReactNode } from 'react';
+import { ReactNode, useCallback, useRef } from 'react';
 import Slider from 'react-slick';
-import 'slick-carousel/slick/slick.css';
-import 'slick-carousel/slick/slick-theme.css';
-import defaultCarousalSettings from './slickSetting';
+
 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 {
@@ -18,13 +20,21 @@ const SlickContainer = styled(Box)(() => {
 });
 interface CarousalProps<T = any> {
     entries: T[];
-    // eslint-disable-next-line no-unused-vars
     renderEntry(entry: T, index: number): ReactNode;
-    allEntryLink: string;
+    allEntryLink?: string;
+    allEntryLabel?: string;
     settings: any;
+    showControlButtons?: boolean;
 }
 
-export default function NsCarousal({ entries, renderEntry, allEntryLink, settings }: CarousalProps) {
+export default function NsCarousal({
+    entries,
+    renderEntry,
+    allEntryLink = '',
+    settings,
+    allEntryLabel = 'View All',
+    showControlButtons = true,
+}: CarousalProps) {
     const sliderRef = useRef();
     const prev = useCallback(() => {
         if (sliderRef.current) {
@@ -40,9 +50,12 @@ export default function NsCarousal({ entries, renderEntry, allEntryLink, setting
     }, [sliderRef]);
     return (
         <SlickContainer className="brand-carousal">
-            <CarousalControl prev={prev} next={next} viewAllUrl={allEntryLink} />
+            {showControlButtons ? (
+                <CarousalControl prev={prev} next={next} viewAllUrl={allEntryLink} viewAllLabel={allEntryLabel} />
+            ) : null}
             <Slider {...{ ...defaultCarousalSettings, ...settings }} ref={sliderRef as any}>
                 {entries.map((entry, index) => {
+                    
                     return renderEntry(entry, index);
                 })}
             </Slider>

package/src/common/carousal/NsScrollingCarousal.tsx

@@ -3,16 +3,11 @@ import Slider from 'react-slick';
 import { NsScrollingCarousalProps } from '../';
 import { styled } from '@nuskin/foundation-theme';
 
-const options = {
-    shouldForwardProp: (prop: string) => prop !== 'dotsBottomPixel',
+type StyledType = {
+    dotsBottomPixel?: number;
 };
 
-const StyledDiv = styled(
-    'div',
-    options
-)<{
-    dotsBottomPixel?: number;
-}>(({ dotsBottomPixel }) => {
+const StyledDiv = styled('div')<StyledType>(({ dotsBottomPixel }) => {
     return {
         '.slick-dots': {
             zIndex: 9,
@@ -50,6 +45,7 @@ const NsScrollingCarousal = ({
     }, [stillSeconds, scrollSeconds, settings]);
     return (
         <StyledDiv
+            className="scrolling-carousal-wrapper"
             dotsBottomPixel={dotsBottomPixel}
             data-testid={additionalProps?.testid ?? 'scrolling-carousal-test-id'}
         >

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

@@ -12,6 +12,13 @@ export default {
     title: 'Components/Containers/NsCarousal/Brand',
     component: NsCarousal,
     argTypes: {},
+    decorators: [
+        (Story) => (
+            <div style={{ width: 800 }}>
+                <Story />
+            </div>
+        ),
+    ],
 } as MetaStory;
 
 export const Default: Story = {

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

@@ -3,14 +3,17 @@ import { Box } from '@mui/material';
 import { styled } from '@nuskin/foundation-theme';
 import { NsColumnControlProps, sizeObjectType } from './types.d';
 import { getColumnSizes } from './utils';
+import { shouldNotForwardPropsWithKeys } from '../util';
 
-const options = {
-    shouldForwardProp: (propKey: string) => propKey !== 'sizes',
-};
 type StyledDivProps = {
     sizes: sizeObjectType;
     gap?: number;
 };
+
+const options = {
+    shouldForwardProp: shouldNotForwardPropsWithKeys<StyledDivProps>(['sizes']),
+};
+
 const descMaxWidthBreakpoints = [960, 600];
 
 /* media queries */

package/src/common/column-control/styled/StyledFlex.tsx

@@ -2,10 +2,7 @@ import { Box } from '@mui/material';
 import { styled } from '@nuskin/foundation-theme';
 import { sizeObjectType } from '../types';
 import { commonStyles, getPercentArray } from './common';
-
-const options = {
-    shouldForwardProp: (propKey: string) => !['sizes', 'gap', 'isFullWidth'].includes(propKey),
-};
+import { shouldNotForwardPropsWithKeys } from '../../../common/util';
 
 type StyledFlexProps = {
     sizes: sizeObjectType;
@@ -13,6 +10,10 @@ type StyledFlexProps = {
     isFullWidth: boolean;
 };
 
+const options = {
+    shouldForwardProp: shouldNotForwardPropsWithKeys<StyledFlexProps>(['sizes']),
+};
+
 /* main wrapper for column control using css flex */
 export const StyledFlex = styled(
     Box as any,

package/src/common/column-control/styled/StyledGrid.tsx

@@ -2,6 +2,7 @@ import { Box } from '@mui/material';
 import { styled } from '@nuskin/foundation-theme';
 import { sizeObjectType } from '../types';
 import { commonStyles, getPercentArray } from './common';
+import { shouldNotForwardPropsWithKeys } from '../../../common/util';
 
 type StyledGridProps = {
     sizes: sizeObjectType;
@@ -9,7 +10,7 @@ type StyledGridProps = {
     isFullWidth: boolean;
 };
 const options = {
-    shouldForwardProp: (propKey: string) => !['sizes', 'gap', 'isFullWidth'].includes(propKey),
+    shouldForwardProp: shouldNotForwardPropsWithKeys<StyledGridProps>(['sizes']),
 };
 
 /* main wrapper for column control using css grid */

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

@@ -1,4 +1,5 @@
 import { PaletteColors } from '@nuskin/foundation-theme';
+
 import type { StoryObj, Meta } from '@storybook/react';
 import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsIcon, NsIconVariants } from './';
@@ -24,6 +25,47 @@ export default {
         colorOverride: {
             control: 'color',
         },
+        cursor: {
+            control: 'select',
+            options: [
+                'auto',
+                'default',
+                'none',
+                'context-menu',
+                'help',
+                'pointer',
+                'progress',
+                'wait',
+                'cell',
+                'crosshair',
+                'text',
+                'vertical-text',
+                'alias',
+                'copy',
+                'move',
+                'no-drop',
+                'not-allowed',
+                'grab',
+                'grabbing',
+                'e-resize',
+                'n-resize',
+                'ne-resize',
+                'nw-resize',
+                's-resize',
+                'se-resize',
+                'sw-resize',
+                'w-resize',
+                'ew-resize',
+                'ns-resize',
+                'nesw-resize',
+                'nwse-resize',
+                'col-resize',
+                'row-resize',
+                'all-scroll',
+                'zoom-in',
+                'zoom-out',
+            ],
+        },
     },
     args: {
         size: 'large',

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

@@ -1,5 +1,6 @@
 import { styled } from '@nuskin/foundation-theme';
-import { NsIconSizeType } from './types.d';
+
+import { NsIconProps, NsIconSizeType } from './types.d';
 
 export const iconSize: Record<NsIconSizeType, string> = {
     small: '16px',
@@ -7,13 +8,14 @@ export const iconSize: Record<NsIconSizeType, string> = {
     large: '24px',
     xLarge: '30px',
 };
-type IconWrapperType = { size: NsIconSizeType };
+type IconWrapperType = { size: NsIconSizeType; cursor: NsIconProps['cursor'] };
 
-export const IconWrapper = styled('div')<IconWrapperType>(({ size }) => {
+export const IconWrapper = styled('div')<IconWrapperType>(({ size, cursor }) => {
     return {
         display: 'flex',
         placeContent: 'center',
         placeItems: 'center',
+        cursor,
         svg: {
             width: iconSize[size],
             height: iconSize[size],

package/src/common/icon/NsIcon.tsx

@@ -15,6 +15,7 @@ const NsIcon = ({
     className,
     colorOverride,
     onClick = () => {},
+    cursor = 'pointer',
     ...rest
 }: NsIconProps) => {
     const Icon = IconVariants[name as NsIconNameType];
@@ -25,7 +26,14 @@ const NsIcon = ({
     }
 
     return (
-        <IconWrapper {...rest} data-testid={testId} size={size || 'large'} className={className} onClick={onClick}>
+        <IconWrapper
+            {...rest}
+            data-testid={testId}
+            size={size || 'large'}
+            className={className}
+            onClick={onClick}
+            cursor={cursor}
+        >
             <Icon color={colorOverride ? colorOverride : (iconColor as any)} />
         </IconWrapper>
     );

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

@@ -13,4 +13,41 @@ export type NsIconProps = HTMLProps & {
     color?: FoundationTheme.PaletteColors;
     testId?: string;
     colorOverride?: string;
+    cursor?:
+        | 'auto'
+        | 'default'
+        | 'none'
+        | 'context-menu'
+        | 'help'
+        | 'pointer'
+        | 'progress'
+        | 'wait'
+        | 'cell'
+        | 'crosshair'
+        | 'text'
+        | 'vertical-text'
+        | 'alias'
+        | 'copy'
+        | 'move'
+        | 'no-drop'
+        | 'not-allowed'
+        | 'grab'
+        | 'grabbing'
+        | 'e-resize'
+        | 'n-resize'
+        | 'ne-resize'
+        | 'nw-resize'
+        | 's-resize'
+        | 'se-resize'
+        | 'sw-resize'
+        | 'w-resize'
+        | 'ew-resize'
+        | 'ns-resize'
+        | 'nesw-resize'
+        | 'nwse-resize'
+        | 'col-resize'
+        | 'row-resize'
+        | 'all-scroll'
+        | 'zoom-in'
+        | 'zoom-out';
 };

package/src/common/input/InputWrapper.tsx

@@ -5,8 +5,8 @@ import { fieldStateType } from './types.d';
 const { isDarkMode } = ColorUtils;
 const { colors } = nuskinTheme;
 
-const options = {
-    shouldForwardProp: (propKey: string) => propKey !== 'fieldState',
+type InputWrapperType = {
+    fieldState: fieldStateType;
 };
 
 const getInputBorderColor = (
@@ -23,14 +23,7 @@ const getInputBorderColor = (
     }
 };
 
-type InputWrapperType = {
-    fieldState: fieldStateType;
-};
-
-const InputWrapper = styled(
-    Box,
-    options
-)<InputWrapperType>(({ theme, fieldState }) => {
+const InputWrapper = styled(Box)<InputWrapperType>(({ theme, fieldState }) => {
     /* default value added so that unit tests do not fail */
     const { palette = { primary: { main: '', contrastText: '' } } } = theme;
     const isLight = isDarkMode({ theme });

package/src/common/link/NsLink.styled.tsx

@@ -1,14 +1,7 @@
-/**
- * @author [Vijayaprathap Kumar] (vpkumar@nuskin.com)
- * NsLink.styled.tsx
- * @description Styled Components for NsLink are defined here
- */
-
 import { styled } from '@nuskin/foundation-theme';
 import MUILink from '@mui/material/Link';
 import NextLink from 'next/link';
 
-/** Prop Types doe Styled components */
 type StyledProps = {
     disabled?: boolean;
     $underlineOnHover?: boolean;
@@ -53,16 +46,13 @@ const getLinkStyles = ({ disabled, $underlineOnHover = true }: StyledProps) => {
     }
     return '';
 };
-const options = {
-    shouldForwardProp: (propKey: string) => propKey !== '$underlineOnHover',
-};
 
-export const StyledNextLink = styled(NextLink, options)<StyledProps>`
+export const StyledNextLink = styled(NextLink)<StyledProps>`
     ${linkDefaultStyles};
     ${getLinkStyles}
 `;
 
-export const StyledLink = styled(MUILink, options)<StyledProps>`
+export const StyledLink = styled(MUILink)<StyledProps>`
     ${linkDefaultStyles};
     ${getLinkStyles}
 `;

package/src/common/link/NsLink.tsx

@@ -8,12 +8,6 @@ import React, { PropsWithChildren } from 'react';
 import { StyledLink, StyledNextLink } from './NsLink.styled';
 import { NsLinkProps } from './types.d';
 
-/**
- * @component NsLink
- *
- * Component for displaying an Link tag
- *
- */
 const NsLink = (props: PropsWithChildren<NsLinkProps>) => {
     const {
         className,
@@ -25,6 +19,7 @@ const NsLink = (props: PropsWithChildren<NsLinkProps>) => {
         children,
         passHref,
         prefetch,
+        disabled,
     } = props;
 
     if (isSsr) {
@@ -33,9 +28,10 @@ const NsLink = (props: PropsWithChildren<NsLinkProps>) => {
                 className={className}
                 href={href}
                 $underlineOnHover={underlineOnHover}
-                {...additionalProps}
                 passHref={passHref}
                 prefetch={prefetch}
+                disabled={disabled}
+                {...additionalProps}
             >
                 {children}
             </StyledNextLink>
@@ -46,6 +42,7 @@ const NsLink = (props: PropsWithChildren<NsLinkProps>) => {
         <StyledLink
             className={className}
             href={href}
+            disabled={disabled}
             $underlineOnHover={underlineOnHover}
             target={target}
             {...additionalProps}

package/src/common/radiogroup/NsRadioGroup.styled.tsx

@@ -1,6 +1,5 @@
 import { Radio, FormControlLabel, FormLabel, RadioGroup } from '@mui/material';
 import { ColorUtils, FoundationTheme, styled } from '@nuskin/foundation-theme';
-import { skipDarkModeEnabled } from '../util';
 
 const { paletteColor, isDarkMode, color } = ColorUtils;
 
@@ -36,13 +35,13 @@ export const StyledFormControlLabel = styled(FormControlLabel)<{ darkModeEnabled
         },
     };
 });
-const options = {
-    shouldForwardProp: skipDarkModeEnabled,
+
+type StyledRadioPropsType = {
+    color: FoundationTheme.PaletteColors;
+    darkModeEnabled?: boolean;
 };
-export const StyledRadioGroup = styled(
-    RadioGroup,
-    options
-)<{ color: FoundationTheme.PaletteColors; darkModeEnabled?: boolean }>(({ theme, color, darkModeEnabled }) => {
+
+export const StyledRadioGroup = styled(RadioGroup)<StyledRadioPropsType>(({ theme, color, darkModeEnabled }) => {
     return {
         marginTop: '10px',
         '.MuiRadio-root.custom-radio.Mui-checked': {

package/src/common/util.ts

@@ -1 +1,3 @@
-export const skipDarkModeEnabled = (key: string) => key !== 'darkModeEnabled';
+export function shouldNotForwardPropsWithKeys<T>(propArray: Array<keyof T>) {
+    return (propName: string) => !propArray.includes(propName as keyof T);
+}