@nuskin/foundation-ui-components 1.0.0-develop.4 → 1.0.0-develop.6

package/src/common/autocomplete/NsAutocomplete.tsx

@@ -1,4 +1,4 @@
-import React, { useState, PropsWithChildren, useRef } from 'react';
+import React, { PropsWithChildren } from 'react';
 import { Autocomplete, AutocompleteRenderGroupParams, List, AutocompleteRenderInputParams } from '@mui/material';
 import { NsTypography, NsButton } from '../';
 import { NsAutocompleteProps, OptionsProps, ComponentBoxProps } from './types.d';
@@ -18,23 +18,23 @@ const NsAutocomplete = ({
     className,
     iconStart,
     iconEnd,
+    inputValue,
+    value,
 }: PropsWithChildren<NsAutocompleteProps>) => {
-    const inputRef = useRef(null);
-
-    const [selectedOption, setSelectedOption] = useState<OptionsProps | null>(null);
     const OptionUI = renderOptions;
 
-    const handleSelect = (event: React.SyntheticEvent<Element, Event>, value: OptionsProps | null) => {
-        setSelectedOption(value);
+    const handleSelect = (event: React.SyntheticEvent<Element, Event>, value: string | OptionsProps | null) => {
         onSelect ? onSelect(value) : null;
     };
 
+    const handleInputChange = (event: React.SyntheticEvent<Element, Event>, newInputValue: string) => {
+        onChange ? onChange(newInputValue) : null;
+    };
+
     const renderInput = (params: AutocompleteRenderInputParams) => (
         <StyledTextField
             {...params}
-            onChange={onChange}
             placeholder={placeholder}
-            inputRef={inputRef}
             InputProps={{
                 ...params.InputProps,
                 startAdornment: iconStart,
@@ -61,23 +61,23 @@ const NsAutocomplete = ({
                     {group}
                 </NsTypography>
             ) : null}
-            <span>{children}</span>
+            <ul className="p-0">{children}</ul>
         </li>
     );
 
     const renderClearButton = () => {
-        const { show, onClear, text = 'See More Results' } = clear || {};
+        const { show, onClear, text = 'Clear Search' } = clear || {};
         if (!show) {
             return null;
         }
         return (
-            <div className="text-right p-3">
+            <li className="text-right p-3">
                 <NsButton onClick={onClear} data-testid="autocomplete-clear-id">
                     <NsTypography variant={'p-xs'} weight="bold">
                         {text}
                     </NsTypography>
                 </NsButton>
-            </div>
+            </li>
         );
     };
 
@@ -87,13 +87,13 @@ const NsAutocomplete = ({
             return null;
         }
         return (
-            <div className="text-center p-3">
+            <li className="text-center p-3">
                 <NsButton onClick={onSeeMore} data-testid="autocomplete-loadmore-id">
                     <NsTypography variant="p-xs" weight="bold">
                         {text}
                     </NsTypography>
                 </NsButton>
-            </div>
+            </li>
         );
     };
 
@@ -120,7 +120,10 @@ const NsAutocomplete = ({
             ListboxComponent={renderListBoxComponent}
             renderGroup={renderGroupName}
             onChange={handleSelect}
-            value={selectedOption}
+            onInputChange={handleInputChange}
+            value={value}
+            inputValue={inputValue}
+            freeSolo
         />
     );
 };

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

@@ -6,27 +6,29 @@ import { ComponentsProps } from '@mui/material';
 export type NsAutocompleteProps = {
     id?: string;
     options: OptionsProps[];
-    loading?:boolean;
+    loading?: boolean;
     renderOptions: React.ComponentType<any>;
-    noOptionsText ?:string;
+    noOptionsText?: string;
     // eslint-disable-next-line no-unused-vars
-    onSelect?: (params: OptionsProps | null) => void;
+    onSelect?: (params: string | OptionsProps | null) => void;
     // eslint-disable-next-line no-unused-vars
-    onChange?: (params) => void;
+    onChange?: (params: string) => void;
     clear?: {
         text: string;
         show?: boolean; //default to false
-        onClear: () => {};
+        onClear: () => void;
     };
     seeMore?: {
         text: string;
         show?: boolean; //default to false
-        onSeeMore: () => {};
+        onSeeMore: () => void;
     };
     placeholder?: string;
     className?: string;
     iconStart?: string | React.ReactNode;
     iconEnd?: string | React.ReactNode;
+    inputValue: string;
+    value: string | OptionsProps | null;
 } & AdditionalProps;
 
 export type ListUiProps = {

package/src/common/brand-components/NsBrandComponent.tsx

@@ -1,10 +1,12 @@
 import React, { PropsWithChildren, useCallback } from 'react';
+
 import NSLogoHorizontal from './icons/NSLogoHorizontal';
 import NSLogoMark from './icons/NSLogoMark';
 import NSLogoPoweredBy from './icons/NSLogoPoweredBy';
 import NSLogoStacked from './icons/NSLogoStacked';
 import NSLogoWordMark from './icons/NSWordMark';
 import LogoContainer from './NsBrandContanier.styled';
+
 import { NsBrandComponentProps } from './types.d';
 
 const VariantMap = {
@@ -19,6 +21,7 @@ const NsBrandComponent = (props: PropsWithChildren<NsBrandComponentProps>) => {
     const { variant = 'stacked', size = '108px', color = 'primary' } = props;
     const renderBrand = useCallback(() => {
         const BrandComponent = VariantMap[variant || 'stacked'];
+        // [Todo - Add neutral as FoundationTheme.PaletteColor]
         return <BrandComponent color={color as any} />;
     }, [color, variant]);
     return <LogoContainer size={size}>{renderBrand()}</LogoContainer>;

package/src/common/breadcrumb/NsBreadcrumb.tsx

@@ -12,12 +12,14 @@ import { NsBreadcrumbProps, ItemProps } from './types.d';
 import { useTheme } from '@mui/material/styles';
 import { ColorUtils } from '@nuskin/foundation-theme';
 
+const { color } = ColorUtils;
+
 const NsBreadcrumb = (props: PropsWithChildren<NsBreadcrumbProps>) => {
     const { items, iconVisibility } = props;
 
     const theme = useTheme();
-    const neutral80 = ColorUtils.getAppColor(theme, 'neutral', '80') as string;
-    const neutral60 = ColorUtils.getAppColor(theme, 'neutral', '60') as string;
+    const neutral80 = color('neutral', '80')({ theme });
+    const neutral60 = color('neutral', '60')({ theme });
 
     const getLabel = (item: ItemProps) => {
         if (item?.href) {

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@/test-utils/index';
-import nuskinTheme from '@nuskin/foundation-theme/src/themes/genome-foundation';
+import { nuskinTheme } from '@nuskin/foundation-theme';
 import Button from './NsButton';
 
 const { palette } = nuskinTheme;

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

@@ -37,7 +37,7 @@ export const button: Story = {};
 
 export const IconOnlyButton: Story = {
     render: (args) => (
-        <NsButton {...args} iconOnly>
+        <NsButton {...args} iconOnly darkModeEnabled={false}>
             <ShoppingCart />
         </NsButton>
     ),

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

@@ -1,10 +1,11 @@
 import { Button as MUIButton } from '@mui/material';
 
 import { styled, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
-import { ButtonConfig } from '@nuskin/foundation-theme/src/themes/types/button';
+import { ButtonConfig } from '@nuskin/foundation-theme/src/common/themes/types/button';
+
 import { NsButtonProps } from './types.d';
 
-const { getPaletteColor, getButtonStateColor } = ColorUtils;
+const { buttonColor, paletteColor } = ColorUtils;
 
 const getButtonConfig = (theme: FoundationTheme.Theme, attribute: keyof ButtonConfig) => {
     const { config } = theme || {};
@@ -18,8 +19,8 @@ const StyledButton = styled(MUIButton)<NsButtonProps>`
         border: 1px solid ${({ theme }) => getButtonConfig(theme, 'focusColor')} !important;
     }
     :disabled {
-        background-color: ${({ theme, color }) => getButtonStateColor(theme, color, 'disabled')};
-        color: ${({ theme, color }) => getButtonStateColor(theme, color, 'disabledText')};
+        background-color: ${(btnProps) => buttonColor(btnProps?.color, 'disabled')};
+        color: ${(btnProps) => buttonColor(btnProps?.color, 'disabledText')};
     }
     ${({ theme: { config }, size }) => {
         return size === 'medium' ? config?.components?.button?.size?.medium?.padding : '';
@@ -27,37 +28,38 @@ const StyledButton = styled(MUIButton)<NsButtonProps>`
     ${({ theme: { config }, size }) => {
         return size === 'large' ? config?.components?.button?.size?.large?.padding : '';
     }}
-    ${({ variant, theme, color = 'primary' }) => {
+    ${({ variant, theme, color = 'primary', darkModeEnabled }) => {
         return variant === 'contained'
             ? `
-                background-color: ${getPaletteColor(theme, color)};
+                background-color: ${paletteColor(color)({ theme, darkModeEnabled })};
+                color: ${paletteColor(color, 'contrastText')({ theme, darkModeEnabled })} !important;
                 :hover {
-                    background-color: ${getButtonStateColor(theme, color, 'hovered')};
+                    background-color: ${buttonColor(color, 'hovered')({ theme })};
                 }
                 :active {
-                    background-color: ${getButtonStateColor(theme, color, 'pressed')};
+                    background-color: ${buttonColor(color, 'pressed')({ theme })};
                 }
                 :focus {
-                    background-color: ${getButtonStateColor(theme, color, 'focused')};
+                    background-color: ${buttonColor(color, 'focused')({ theme })};
                 }
             `
             : '';
     }}
-  ${({ variant, theme, color = 'primary' }) =>
+  ${({ variant, theme, color = 'primary', darkModeEnabled }) =>
         variant === 'outlined' &&
         `
-            border-color: ${getPaletteColor(theme, color)};
-            color: ${getPaletteColor(theme, color)};
+            border-color: ${paletteColor(color)({ theme, darkModeEnabled })};
+            color: ${paletteColor(color)({ theme, darkModeEnabled })};
             :hover {
-                border-color: ${getButtonStateColor(theme, color, 'hovered')};
-                color: ${getPaletteColor(theme, color)};
+                border-color: ${buttonColor(color, 'hovered')({ theme })};
+                color: ${paletteColor(color)({ theme, darkModeEnabled })};
             }
             :active {
-                border-color: ${getButtonStateColor(theme, color, 'pressed')};
-                color: ${getPaletteColor(theme, color)};
+                border-color: ${buttonColor(color, 'pressed')({ theme })};
+                color: ${paletteColor(color)({ theme })};
             }
         `}
-  ${({ variant, theme, color = 'primary' }) =>
+  ${({ variant, theme, color = 'primary', darkModeEnabled }) =>
         variant === 'text' &&
         `
             text-decoration: underline 1px !important;
@@ -65,15 +67,15 @@ const StyledButton = styled(MUIButton)<NsButtonProps>`
             padding: 0;
             min-width: auto;
             background-color: transparent !important;
-            text-decoration-color: ${getPaletteColor(theme, color)};
-            color: ${getPaletteColor(theme, color)};
+            text-decoration-color: ${paletteColor(color)({ theme, darkModeEnabled })};
+            color: ${paletteColor(color)({ theme, darkModeEnabled })};
             :hover {
-                color:  ${getButtonStateColor(theme, color, 'hovered')};
-                text-decoration-color:  ${getButtonStateColor(theme, color, 'hovered')};
+                color:  ${buttonColor(color, 'hovered')({ theme })};
+                text-decoration-color:  ${buttonColor(color, 'hovered')({ theme })};
             }
             :active {
-                color: ${getPaletteColor(theme, color)};
-                text-decoration-color:  ${getButtonStateColor(theme, color, 'pressed')};
+                color: ${paletteColor(color)};
+                text-decoration-color:  ${buttonColor(color, 'pressed')({ theme })};
             }
         `}
   ${({ iconOnly }) =>

package/src/common/button/NsButton.tsx

@@ -1,10 +1,17 @@
 import { PropsWithChildren } from 'react';
+import { useTheme } from '@mui/material/styles';
+
 import StyledButton from './NsButton.styled';
+
 import { NsButtonProps } from './types.d';
+import { FoundationTheme } from '@nuskin/foundation-theme';
 
-const NsButton = ({ children, ...props }: PropsWithChildren<NsButtonProps>) => {
+const NsButton = ({ children, darkModeEnabled = true, ...props }: PropsWithChildren<NsButtonProps>) => {
+    const { color } = props;
+    const { palette } = useTheme();
+    const btnColor = (color && palette?.[color] ? color : 'primary') as FoundationTheme.PaletteColors;
     return (
-        <StyledButton {...props} disableRipple>
+        <StyledButton {...props} color={btnColor} disableRipple darkModeEnabled={darkModeEnabled}>
             {children}
         </StyledButton>
     );

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

@@ -16,4 +16,5 @@ export type NsButtonProps = Pick<
   | 'className'
 > & {
   iconOnly?: boolean;
+  darkModeEnabled?: boolean;
 };

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

@@ -3,6 +3,7 @@ export type ContentStackLiveTags = {
 };
 
 export type AdditionalProps = {
+    darkModeEnabled?: boolean;
     additionalProps?: {
         ariaLabel?: string;
         testid?: string;

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

@@ -1,7 +1,9 @@
 import { ReactNode } from 'react';
 import { FoundationTheme } from '@nuskin/foundation-theme';
 
-export interface DropdownProps {
+import { AdditionalProps } from '../common.types';
+
+export interface DropdownProps extends AdditionalProps {
     selectedValue: string;
     selectedLabel: string;
     onSelect: (arg: string) => void; // eslint-disable-line

package/src/common/flag/NsFlag.spec.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { render } from '@/test-utils/index';
 import { NsFlag } from '../';
 

package/src/common/flag/NsFlag.styled.tsx

@@ -9,6 +9,8 @@ import { styled, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
 
 import { NsFlagSize } from './types.d';
 
+const { paletteColor } = ColorUtils;
+
 type NsFlagThemeParams = {
     $size: NsFlagSize;
     $bgColor?: FoundationTheme.PaletteColors;
@@ -33,11 +35,9 @@ const makeFlagSize = ({ $size }: { $size: NsFlagSize }) => {
     return sizeValue / FLAG_SCALE_VALUE;
 };
 
-const { getPaletteColor } = ColorUtils;
-
 const makeFlagBorder = ({ $size, $bgColor = 'accentColorA', theme }: NsFlagThemeParams) => {
     if (theme) {
-        return `${makeFlagSize({ $size })}px solid ${getPaletteColor(theme, $bgColor)}`;
+        return `${makeFlagSize({ $size })}px solid ${paletteColor($bgColor)({ theme })}`;
     }
     return '';
 };
@@ -45,8 +45,8 @@ const makeFlagBorder = ({ $size, $bgColor = 'accentColorA', theme }: NsFlagTheme
 export const StyledFlag = styled('span')<NsFlagThemeParams>`
     min-width: 29px;
     height: ${getFlagHeight}px;
-    color: ${({ $bgColor = 'accentColorA', theme }) => getPaletteColor(theme, $bgColor, 'contrastText')};
-    background: ${({ $bgColor = 'accentColorA', theme }) => getPaletteColor(theme, $bgColor)};
+    color: ${({ $bgColor = 'accentColorA', theme }) => paletteColor($bgColor, 'contrastText')({ theme })};
+    background: ${({ $bgColor = 'accentColorA', theme }) => paletteColor($bgColor)({ theme })};
     position: relative;
     padding: 0 15px;
     display: inline-grid;

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/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/label/NsLabel.tsx

@@ -1,20 +1,24 @@
+import { CSSProperties } from 'react';
+
 import { FormLabel } from '@mui/material';
-import { NsLabelProps } from './types.d';
+
 import { styled, ColorUtils } from '@nuskin/foundation-theme';
-import { CSSProperties } from 'react';
-const { getAppColor, getPaletteColor } = ColorUtils;
+
+import { NsLabelProps } from './types.d';
+
+const { paletteColor, isDarkMode, color } = ColorUtils;
 
 const StyledLabel = styled(FormLabel)<{ fontSize?: number; style?: CSSProperties }>(({ theme, fontSize, style }) => {
-    const isLight = theme.palette?.primary?.main === '#252525';
+    const isLight = !isDarkMode({ theme });
     return {
         fontSize: fontSize ? `${fontSize}px` : '14px',
         textAlign: style?.textAlign ?? 'left',
-        color: getPaletteColor(theme, 'primary', 'main'),
+        color: paletteColor('primary', 'main')({ theme }),
         '.optional-label': {
-            color: isLight ? getAppColor(theme, 'neutral', '60') : getAppColor(theme, 'neutral', '50'),
+            color: isLight ? color('neutral', '60')({ theme }) : color('neutral', '50')({ theme }),
         },
         '.MuiInputLabel-asterisk': {
-            color: isLight ? getAppColor(theme, 'error', '40') : getAppColor(theme, 'error', '20'),
+            color: isLight ? color('error', '40')({ theme }) : color('error', '20')({ theme }),
         },
         ...(style || {}),
     } as any; // TODO: may be this "any" has to be fixed from foundation-theme

package/src/common/nav-tab/NsNavTab.styled.tsx

@@ -1,6 +1,9 @@
-import { FoundationTheme, styled } from '@nuskin/foundation-theme';
+import { FoundationTheme, styled, ColorUtils } from '@nuskin/foundation-theme';
 import { motion } from 'framer-motion';
 
+const { paletteColor } = ColorUtils;
+
+
 export const NavTabContainer = styled.div`
     .shadow {
         box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@@ -23,7 +26,7 @@ export const NavTabUnderLine = styled(motion.div)<{ color?: FoundationTheme.Pale
     position: absolute;
     bottom: -2px;
     height: 2px;
-    background-color: ${({ theme: { palette }, color = 'primary' }) => palette?.[color]?.main};
+    background-color: ${({ theme, color = 'primary' }) => paletteColor(color)({ theme })};
 `;
 
 export const NavDrawer = styled.div`
@@ -37,7 +40,7 @@ export const NavDrawer = styled.div`
     width: 100%;
     max-height: 590px;
 
-    background-color: ${({ theme }) => theme?.palette?.primary.contrastText};
+    background-color: ${paletteColor('primary', 'contrastText')};
     box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
     transition: all 0.15s ease-in-out;
     overflow: hidden;
@@ -54,7 +57,7 @@ export const NavDrawerContainer = styled(motion.div)`
         z-index: 1;
     }
     box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
-    background-color: ${({ theme }) => theme?.palette?.primary.contrastText};
+    background-color: ${paletteColor('primary', 'contrastText')};
     width: 100%;
     text-align: left;
     max-height: 590px;

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, fireEvent, screen } from '@testing-library/react';
 import { NsRadioGroup } from './';
+import { FoundationTheme } from '@nuskin/foundation-theme';
 
 
 describe('NsRadioGroup', () => {
@@ -16,7 +17,7 @@ describe('NsRadioGroup', () => {
         items: options,
         name: 'test',
         label: 'I choose to signup as',
-        color: '#272525',
+        color: '#272525' as FoundationTheme.PaletteColors,
         additionalSlot: 'An additional slot allows for more text',
         size: 24,
         labelFontSize: 16,

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

@@ -3,6 +3,7 @@ import type { StoryObj, Meta } from '@storybook/react';
 import { within, userEvent } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 import { NsRadioGroup } from './'
+import { FoundationTheme } from '@nuskin/foundation-theme';
 
 type ComponentType = typeof NsRadioGroup;
 type Story = StoryObj<ComponentType>;
@@ -77,7 +78,7 @@ export const RadioGroup: Story = {
         ],
         name: 'test',
         label: 'I choose to signup as',
-        color: '#272525',
+        color: '#272525' as FoundationTheme.PaletteColors,
         additionalSlot: 'An additional slot allows for more text',
         size: 10,
         labelFontSize: 16,

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

@@ -1,9 +1,7 @@
 import { Radio, FormControlLabel, FormLabel, RadioGroup } from '@mui/material';
-import { ColorUtils } from '@nuskin/foundation-theme';
-import { styled, nuskinTheme } from '@nuskin/foundation-theme';
+import { ColorUtils, FoundationTheme, styled } from '@nuskin/foundation-theme';
 
-const { getPaletteColor } = ColorUtils;
-const { colors } = nuskinTheme;
+const { paletteColor, isDarkMode, color } = ColorUtils;
 
 export const StyledHelperText = styled('div')`
     margin-top :10px;
@@ -15,42 +13,38 @@ export const StyledHelperText = styled('div')`
 export const StyledSpan = styled('span')`
     font-size: '16px';
     font-weight: 300;
-    color: ${({ theme }) => getPaletteColor(theme, 'primary')};
+    color: ${paletteColor('primary')};
 `;
 
-export const StyledLabel = styled(FormLabel)(({ theme }) => {
-    return {
-        color: getPaletteColor(theme, 'primary'),
-        marginBottom: '15px',
-        backgroundColor: 'transparent',
-    };
-});
-
-export const StyledRadio = styled(Radio)(({ theme }) => {
-    const isLight = theme.palette?.primary?.main === '#252525';
-
-    return {
-        color: isLight ? colors.primary.black : colors.primary.white,
-    };
-});
+export const StyledLabel = styled(FormLabel)`
+    color: ${paletteColor('primary')},
+    marginBottom: '15px',
+    backgroundColor: 'transparent',
+`;
 
-export const StyledFormControlLabel = styled(FormControlLabel)(({ theme }) => {
-    const isLight = theme.palette?.primary?.main === '#252525';
+export const StyledRadio = styled(Radio)`
+    color: ${(props) => !isDarkMode(props) ? color('primary', 'black')(props) : color('primary', 'white')(props)}
+`;
 
+export const StyledFormControlLabel = styled(FormControlLabel)<{ darkModeEnabled?: boolean }>((props) => {
     return {
-        color: getPaletteColor(theme, 'primary'),
+        color: paletteColor('primary')(props),
         marginBottom: '10px',
         '.MuiFormControlLabel-label.Mui-disabled': {
-            color: isLight ? colors?.neutral?.[60] : colors?.neutral?.[20],
+            color: `${!isDarkMode(props) ? color('neutral', 60)(props) : color('neutral', 20)(props)}`
         },
     };
 });
 
-export const StyledRadioGroup = styled(RadioGroup)(({ color }) => {
-    return {
-        marginTop: '10px',
-        '.MuiRadio-root.custom-radio.Mui-checked': {
-            color: color,
-        },
-    };
-});
+export const StyledRadioGroup = styled(RadioGroup)<
+    { color: FoundationTheme.PaletteColors; darkModeEnabled?: boolean }
+>(
+    ({ theme, color, darkModeEnabled }) => {
+        return {
+            marginTop: '10px',
+            '.MuiRadio-root.custom-radio.Mui-checked': {
+                color: paletteColor(color)({ theme, darkModeEnabled })
+            },
+        };
+    }
+);