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

package/src/common/column-control/types.d.ts

@@ -18,22 +18,7 @@ export type NsColumnControlProps = PropsWithChildren<{
      *  ns-col-md-(column-ratio) (for tablet screens >= 600px),
      *  and ns-col-sm-(column-ratio) (for mobile screens i.e < 600px)
      * sample values
-     * 'ns-col-lg-2-1',
-    'ns-col-lg-1-2',
-    'ns-col-lg-1-1',
-    'ns-col-lg-1-1-1',
-    'ns-col-lg-2-1-1',
-    'ns-col-lg-1-1-1-1',
-    'ns-col-md-1',
-    'ns-col-md-1-1',
-    'ns-col-md-1-2',
-    'ns-col-md-2-1',
-    'ns-col-md-1-1-1',
-    'ns-col-md-2-1-1',
-    'ns-col-sm-1',
-    'ns-col-sm-1-1',
-    'ns-col-sm-1-2',
-    'ns-col-sm-2-1',
+     * 'ns-col-lg-2-1', 'ns-col-lg-1-2', 'ns-col-lg-1-1',
      */
     columnClass: string;
     gap?: number;
@@ -45,3 +30,17 @@ export type sizeObjectType = {
     tabletFractions?: number[];
     mobileFractions?: number[];
 };
+
+export type NsFlexColumnsProps = PropsWithChildren<{
+    /**
+     * follows the convention of ns-col-lg-{column-ratio}
+     * sample value for column-ratio = 2-1 ==>ns-col-lg-2-1
+     */
+    columnClass: string;
+    gap: number;
+    /* when this boolean is true, column control takes full width of page instead of being restricted to 1200px */
+    isFullWidth?: boolean;
+}> &
+    AdditionalProps;
+
+export type NsGridColumnsProps = NsFlexColumnsProps;

package/src/common/column-control/utils.ts

@@ -1,5 +1,5 @@
 import { ValueOf } from 'next/dist/shared/lib/constants';
-import { NsColumnControlProps, sizeObjectType } from './types';
+import { NsColumnControlProps, sizeObjectType } from './types.d';
 
 export const columnClasses: NsColumnControlProps['columnClass'][] = [
     'ns-col-lg-2-1',
@@ -40,15 +40,15 @@ const sizeKeyMap: Record<ValueOf<typeof sizeKeyPrefix>, string> = {
  * @returns {fractions:['1','1','1'], tabletFractions:['1','1'], mobileFractions:['1'] }
  */
 export const getColumnSizes = (inputColumnClass: string): sizeObjectType => {
-    let columnClass = inputColumnClass.trim() as NsColumnControlProps['columnClass'];
+    const columnClass = inputColumnClass.trim();
     const validClasses = columnClass
         .split(' ')
         .filter((e) => Object.values(sizeKeyPrefix).some((prefix) => e.startsWith(prefix)));
     const sizeObject: sizeObjectType = validClasses.reduce((acc: any, current: string) => {
-        for (let key of Object.values(sizeKeyPrefix)) {
+        for (const key of Object.values(sizeKeyPrefix)) {
             if (current.startsWith(key)) {
-                let interClass = current.replace(key, '');
-                let sizes = interClass.split('-').filter((e) => /^[1-9]$/.test(e));
+                const interClass = current.replace(key, '');
+                const sizes = interClass.split('-').filter((e) => /^[1-9]$/.test(e));
                 acc[sizeKeyMap[key]] = sizes;
                 break;
             }

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

@@ -0,0 +1,21 @@
+import { FoundationTheme } from '@nuskin/foundation-theme';
+
+export type CslpTag = { 'data-cslp': string };
+
+export type AdditionalProps = {
+    additionalProps?: {
+        ariaLabel?: string;
+        testid?: string;
+        className?: string;
+        'data-testid'?: string;
+    } & Partial<CslpTag>;
+    cslp?: Record<string, CslpTag>;
+} & DarkModeEnabledOption;
+
+export type Themed = {
+    theme: FoundationTheme.Theme;
+};
+
+export type DarkModeEnabledOption = {
+    darkModeEnabled?: boolean;
+};

package/src/common/dropdown/NsDropdown.spec.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, fireEvent, screen, waitFor } from '../../../test-utils';
+import { render, fireEvent, screen, waitFor } from '@/test-utils/index';
 import NsDropdown from './NsDropdown';
 import NsDropdownOption from './NsDropdownOption';
 

package/src/common/dropdown/NsDropdown.styled.tsx

@@ -1,5 +1,6 @@
 import { styled, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
-const { getPaletteColor, getAppColor } = ColorUtils;
+import { Themed } from '../common.types';
+const { color, paletteColor, isDarkMode } = ColorUtils;
 
 export const DropdownContainer = styled.div<{ disabled: boolean }>`
     position: relative;
@@ -7,15 +8,22 @@ export const DropdownContainer = styled.div<{ disabled: boolean }>`
     opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};
 `;
 
+/** this function also used for SelectHead */
+export const getDropdownHeadBorder = ({ type, theme }: { type: string } & Themed) => {
+    if (type === 'outlined') {
+        const borderColor = color('primary', 'black')({ theme });
+        return `1px solid ${borderColor}`;
+    }
+    return 'none';
+};
 export const DropdownHead = styled.div<{ type: string; disabled: boolean }>`
     cursor: ${({ disabled }) => (disabled ? 'inherit' : 'pointer')};
     padding: 5px 10px;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    border: ${({ type, theme }) =>
-        type === 'outlined' ? `1px solid ${getAppColor(theme, 'primary', 'black')}` : 'none'};
-    color: ${({ theme }) => getPaletteColor(theme, 'primary')};
+    border: ${getDropdownHeadBorder}
+    color: ${paletteColor('primary')};
 `;
 
 export const DropdownButton = styled.div`
@@ -25,27 +33,19 @@ export const DropdownButton = styled.div`
 export const DropdownList = styled.div<{ borderColor: FoundationTheme.PaletteColors }>`
     position: absolute;
     z-index: 100;
-    border: 1px solid ${({ borderColor, theme }) => getPaletteColor(theme, borderColor)};
+    border: 1px solid ${({ borderColor, theme }) => paletteColor(borderColor)({ theme })};
     padding: 0;
     margin: 0;
     width: 100%;
-    color: ${({ theme }) => getPaletteColor(theme, 'primary', 'main')};
-    background-color: ${({ theme }) => getPaletteColor(theme, 'primary', 'contrastText')};
+    color: ${paletteColor('primary', 'main')};
+    background-color: ${paletteColor('primary', 'contrastText')};
 `;
-const getIsLight = (theme: FoundationTheme.Theme) => {
-    const { palette = { primary: { main: '', contrastText: '' } } } = theme;
-    return palette.primary.main === getAppColor(theme, 'primary', 'black');
-};
 
 const getDividerColor = (theme: FoundationTheme.Theme) => {
-    const isLight = getIsLight(theme);
-    const dividerColor = isLight ? getAppColor(theme, 'neutral', '30') : getAppColor(theme, 'neutral', '20');
-    return dividerColor;
+    return color('neutral', isDarkMode({ theme }) ? '20' : '30')({ theme });
 };
 const getListBgColor = (theme: FoundationTheme.Theme) => {
-    const isLight = getIsLight(theme);
-    const bgColor = isLight ? getAppColor(theme, 'accentColorB', '10') : getAppColor(theme, 'accentColorB', '50');
-    return bgColor;
+    return color('accentColorB', isDarkMode({ theme }) ? '50' : '10')({ theme });
 };
 export const ListItemContainer = styled.div<{ showListDivider: boolean }>`
     cursor: pointer;
@@ -61,7 +61,12 @@ export const ListItemContainer = styled.div<{ showListDivider: boolean }>`
     }
 `;
 
+const getBorder = ({ isSelected, theme }: { isSelected: boolean } & Themed) => {
+    const borderColor = paletteColor('primary')({ theme });
+    return isSelected ? `2px solid ${borderColor}` : 'none';
+};
+
 export const ListItem = styled.span<{ isSelected: boolean }>`
     padding: 5px 10px;
-    border-left: ${({ isSelected, theme }) => (isSelected ? `2px solid ${getPaletteColor(theme, 'primary')}` : 'none')};
+    border-left: ${getBorder};
 `;

package/src/common/dropdown/NsDropdown.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { DropdownContainer, DropdownButton, DropdownList, DropdownHead } from './NsDropdown.styled';
 import { NsIcon } from '../icon';
-import { DropdownProps } from './types';
+import { DropdownProps } from './types.d';
 
 const NsDropdown: React.FC<DropdownProps> = ({
     selectedValue,

package/src/common/dropdown/NsDropdownOption.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ListItem, ListItemContainer } from './NsDropdown.styled';
-import { DropdownOptionProps } from './types';
+import { DropdownOptionProps } from './types.d';
 
 export const NsDropdownOption: React.FC<DropdownOptionProps> = ({
     value,

package/src/common/dropdown/index.ts

@@ -1,3 +1,3 @@
 export { default as NsDropdown } from './NsDropdown';
 export { default as NsDropdownOption } from './NsDropdownOption';
-export type { DropdownOptionProps, DropdownProps } from './types';
+export type { DropdownOptionProps, DropdownProps } from './types.d';

package/src/common/dropdown/stories/NsDropdown.stories.tsx

@@ -1,14 +1,14 @@
 import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { NsDropdown, NsDropdownOption } from '../';
-import { withCenterDecorator } from '../../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 
 type ComponentType = typeof NsDropdown;
 type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsDropdown',
+    title: 'Components/Inputs/NsDropdown',
     decorators: [withCenterDecorator],
     component: NsDropdown,
     argTypes: {

package/src/common/dropdown/stories/NsDropdownCountry.stories.tsx

@@ -1,14 +1,14 @@
 import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { NsDropdown, NsDropdownOption } from '../';
-import { withCenterDecorator } from '../../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 
 type ComponentType = typeof NsDropdown;
 type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsDropdown',
+    title: 'Components/Inputs/NsDropdown',
     decorators: [withCenterDecorator],
     component: NsDropdown,
     argTypes: {

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/email-simple/NsEmailSimple.spec.tsx

@@ -0,0 +1,145 @@
+import React from 'react';
+import { render, screen, act } from '@testing-library/react';
+import NsEmailSimple from './NsEmailSimple';
+import { userEvent } from '@storybook/testing-library';
+import { emailPattern } from '../validations/regex';
+
+describe('NsEmailSimple', () => {
+    let mockCheckEmail = jest.fn().mockResolvedValue([true, false]);
+    let propsData = {
+        disabled: false,
+        label: 'Email',
+        required: true,
+        maxLength: 50,
+        invalidEmailMessage: 'Please enter a valid email',
+        dupedEmailMessage: 'Email ID already exists',
+        requiredErrorMessage: 'Email field is required',
+        checkEmail: mockCheckEmail,
+    };
+    it('renders email field with invalid regex error', async () => {
+        render(<NsEmailSimple {...propsData} />);
+        const emailField = (await screen.findByTestId('email-field-test')) as HTMLInputElement;
+        expect(emailField).toBeInTheDocument;
+        const inputElement = emailField.querySelector('input');
+        if (!inputElement) {
+            return;
+        }
+        act(() => {
+            userEvent.type(inputElement, 'test');
+            userEvent.tab();
+        });
+
+        expect(inputElement).toHaveValue('test');
+
+        act(() => {
+            userEvent.clear(inputElement);
+            userEvent.type(inputElement, 'test@gm');
+            userEvent.tab();
+        });
+        expect(inputElement).toHaveValue('test@gm');
+
+        mockCheckEmail = jest.fn().mockResolvedValue([true, true]);
+        render(<NsEmailSimple {...propsData} />);
+        act(() => {
+            userEvent.clear(inputElement);
+            userEvent.type(inputElement, 'test!gmail');
+            userEvent.tab();
+        });
+        expect(inputElement).toHaveValue('test!gmail');
+        act(() => {
+            userEvent.clear(inputElement);
+            userEvent.tab();
+        });
+        expect(inputElement).toHaveValue('');
+
+        mockCheckEmail = jest.fn().mockResolvedValue([true, false]);
+        render(<NsEmailSimple {...propsData} />);
+        act(() => {
+            userEvent.clear(inputElement);
+            userEvent.type(inputElement, 'test@gmail.co');
+            userEvent.tab();
+        });
+        expect(inputElement).toHaveValue('test@gmail.co');
+    });
+    it('renders email field with invalid error', async () => {
+        let mockCheckEmail1 = jest.fn().mockResolvedValue([false, false]);
+        let propsData1 = {
+            disabled: false,
+            label: 'Email',
+            required: true,
+            maxLength: 50,
+            invalidEmailMessage: 'Please enter a valid email',
+            dupedEmailMessage: 'Email ID already exists',
+            requiredErrorMessage: 'Email field is required',
+            checkEmail: mockCheckEmail1,
+        };
+        render(<NsEmailSimple {...propsData1} />);
+        const emailField = (await screen.findByTestId('email-field-test')) as HTMLInputElement;
+        expect(emailField).toBeInTheDocument;
+        const inputElement = emailField.querySelector('input');
+        if (!inputElement) {
+            return;
+        }
+        act(() => {
+            userEvent.clear(inputElement);
+            userEvent.type(inputElement, 'test@gmail.com');
+            userEvent.tab();
+        });
+        expect(inputElement).toHaveValue('test@gmail.com');
+        expect(inputElement.value).toMatch(emailPattern);
+    });
+    it('renders email field without error', async () => {
+        let mockCheckEmail1 = jest.fn().mockResolvedValue([true, true]);
+        let propsData1 = {
+            disabled: false,
+            label: 'Email',
+            required: true,
+            maxLength: 50,
+            invalidEmailMessage: 'Please enter a valid email',
+            dupedEmailMessage: 'Email ID already exists',
+            requiredErrorMessage: 'Email field is required',
+            checkEmail: mockCheckEmail1,
+        };
+        render(<NsEmailSimple {...propsData1} />);
+        const emailField = (await screen.findByTestId('email-field-test')) as HTMLInputElement;
+        expect(emailField).toBeInTheDocument;
+        const inputElement = emailField.querySelector('input');
+        if (!inputElement) {
+            return;
+        }
+        act(() => {
+            userEvent.clear(inputElement);
+            userEvent.type(inputElement, 'test@gmail.com');
+            userEvent.tab();
+        });
+        expect(inputElement).toHaveValue('test@gmail.com');
+        expect(inputElement.value).toMatch(emailPattern);
+    });
+    it('renders email field with API error', async () => {
+        let mockCheckEmail1 = jest.fn().mockResolvedValue(undefined);
+        let propsData1 = {
+            disabled: false,
+            label: 'Email',
+            required: true,
+            maxLength: 50,
+            invalidEmailMessage: 'Please enter a valid email',
+            dupedEmailMessage: 'Email ID already exists',
+            requiredErrorMessage: 'Email field is required',
+            checkEmail: mockCheckEmail1,
+        };
+        render(<NsEmailSimple {...propsData1} />);
+        const emailField = (await screen.findByTestId('email-field-test')) as HTMLInputElement;
+        expect(emailField).toBeInTheDocument;
+        const inputElement = emailField.querySelector('input');
+        if (!inputElement) {
+            return;
+        }
+        act(() => {
+            userEvent.clear(inputElement);
+            userEvent.type(inputElement, 'test@gmail.com');
+            userEvent.tab();
+        });
+        expect(inputElement).toHaveValue('test@gmail.com');
+        expect(inputElement.value).toMatch(emailPattern);
+    });
+});

package/src/common/email-simple/NsEmailSimple.stories.tsx

@@ -0,0 +1,61 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import NsEmailSimple from './NsEmailSimple';
+import { within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+
+async function checkEmail() {
+    const isServiceValid = Promise.resolve(true);
+    const isEmailAvailable = Promise.resolve(true);
+    return [isServiceValid, isEmailAvailable];
+}
+type ComponentType = typeof NsEmailSimple;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    component: NsEmailSimple,
+    title: 'Components/Inputs/NsEmailSimple',
+    decorators: [withCenterDecorator],
+    play: ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const el = canvas.getByTestId('email-field-test');
+        expect(el).toBeInTheDocument();
+    },
+
+    argTypes: {
+        disabled: {
+            description: 'Indicates whether the email field is enabled/disabled',
+        },
+        label: {
+            description: 'Label of the email component',
+        },
+        required: {
+            description: 'Indicates whether the email field is mandatory or not',
+        },
+        maxLength: {
+            description: 'Maximum number of characters allowed',
+        },
+        invalidEmailMessage: {
+            description: 'Displayed when an invalid email is entered',
+        },
+        dupedEmailMessage: {
+            description: 'Displayed when a duplicate email is entered',
+        },
+        requiredErrorMessage: {
+            description: 'Displayed when email is not entered',
+        },
+    },
+    args: {
+        disabled: false,
+        label: 'Email',
+        required: true,
+        maxLength: 50,
+        invalidEmailMessage: 'Please enter a valid email',
+        dupedEmailMessage: 'Email ID already exists',
+        requiredErrorMessage: 'Email field is required',
+        checkEmail: checkEmail,
+    },
+} as MetaStory;
+
+export const NsEmail: Story = {};

package/src/common/email-simple/NsEmailSimple.tsx

@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import { NsEmailSimpleProps } from './types';
+import { NsInputField } from '../input';
+import { fieldStateType } from '../input/types';
+import { emailPattern } from '../validations/regex';
+
+const NsEmailSimple = (props: NsEmailSimpleProps) => {
+    const {
+        disabled,
+        label,
+        required,
+        maxLength,
+        invalidEmailMessage,
+        dupedEmailMessage,
+        requiredErrorMessage,
+        checkEmail,
+        additionalProps,
+    } = props;
+    const [fieldState, setFieldState] = useState<fieldStateType>();
+    const [errorMsg, setErrorMessage] = useState('');
+
+    const handleBlur = async (e: React.FocusEvent<HTMLInputElement>) => {
+        const emailInput = e.target.value.toLowerCase().trim();
+        let fieldStateValue: fieldStateType;
+        let errorMessageValue = '';
+        if (required && !emailInput) {
+            fieldStateValue = 'error';
+            errorMessageValue = requiredErrorMessage;
+        } else if (!emailPattern.test(emailInput)) {
+            fieldStateValue = 'error';
+            errorMessageValue = invalidEmailMessage;
+        } else if (typeof checkEmail === 'function') {
+            try {
+                const [isValid, isAvailable] = await checkEmail();
+                if (!isValid) {
+                    fieldStateValue = 'error';
+                    errorMessageValue = invalidEmailMessage;
+                } else if (!isAvailable) {
+                    fieldStateValue = 'error';
+                    errorMessageValue = dupedEmailMessage;
+                } else {
+                    fieldStateValue = undefined;
+                    errorMessageValue = '';
+                }
+            } catch (error) {
+                console.log('API error', error);
+            }
+        } else {
+            //TODO What happens when user does not pass valid checkEmail function
+        }
+        setFieldState(fieldStateValue);
+        setErrorMessage(errorMessageValue);
+    };
+    return (
+        <NsInputField
+            required={required}
+            disabled={disabled}
+            label={label}
+            onBlur={handleBlur}
+            inputProps={{ maxLength }}
+            additionalProps={{ testid: additionalProps?.testid ?? 'email-field-test' }}
+            helperText={errorMsg}
+            fieldState={fieldState}
+            InputProps={{
+                endAdornment: null,
+            }}
+        />
+    );
+};
+
+export default NsEmailSimple;

package/src/common/email-simple/index.ts

@@ -0,0 +1,2 @@
+export { default as NsEmailSimple } from './NsEmailSimple';
+export type { NsEmailSimpleProps } from './types.d';

package/src/common/email-simple/types.d.ts

@@ -0,0 +1,14 @@
+import { TextFieldProps } from '@mui/material';
+import { AdditionalProps } from '../common.types';
+
+export type NsEmailSimpleProps = Pick<TextFieldProps> &
+    AdditionalProps & {
+        disabled?: boolean;
+        label?: string;
+        required?: boolean;
+        maxLength?: number;
+        invalidEmailText?: string;
+        dupedEmailText?: string;
+        requiredErrorMessage?: string;
+        checkEmail?: Function;
+    };

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

@@ -1,35 +1,15 @@
-/**
- * @author [vijayaprathap Kumar] (vpkumar@nuskin.com)
- * Flag.spec.tsx
- * @description In this test case,
- * we use the render function to render the MyComponent with the desired background color and text.
- */
-
 import React from 'react';
-import nuskinTheme from '@nuskin/foundation-theme/src/themes/genome-foundation';
-
-import { render } from '../../../test-utils/index';
-import NsFlag from './NsFlag';
 
-const { palette } = nuskinTheme;
+import { render } from '@/test-utils/index';
+import { NsFlag } from '../';
 
-// Test suite for FlagComponent
 describe('FlagComponent', () => {
-    // Test case for rendering a div element with background color and text.
     it('renders a div element with background color and text', () => {
-        // Render FlagComponent with blue background color and "Nuskin" text
+        const text = 'NU SKIN';
         const { getByText } = render(<NsFlag message="NU SKIN" color="accentColorA" />);
+        const divElement = getByText(text);
 
-        // Get the rendered div element using its text
-        const divElement = getByText('NU SKIN');
-
-        // Assert that the div element is in the document
         expect(divElement).toBeInTheDocument();
-
-        // Assert that the div element has the expected background color
-        expect(divElement).toHaveStyle(`color: ${palette?.primary?.contrastText}`);
-
-        // Assert that the div element has the expected text content
-        expect(divElement).toHaveTextContent('NU SKIN');
+        expect(divElement).toHaveTextContent(text);
     });
 });

package/src/common/flag/NsFlag.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 { NsFlag } from './';
 
 type ComponentType = typeof NsFlag;
@@ -7,7 +7,7 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsFlag',
+    title: 'Components/Data Display/NsFlag',
     component: NsFlag,
     decorators: [withCenterDecorator],
     argTypes: {

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

@@ -7,7 +7,9 @@
 import { Theme } from '@mui/material';
 import { styled, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
 
-import { NsFlagSize } from './types';
+import { NsFlagSize } from './types.d';
+
+const { paletteColor } = ColorUtils;
 
 type NsFlagThemeParams = {
     $size: NsFlagSize;
@@ -33,13 +35,9 @@ const makeFlagSize = ({ $size }: { $size: NsFlagSize }) => {
     return sizeValue / FLAG_SCALE_VALUE;
 };
 
-const {
-    getPaletteColor,
-} = ColorUtils;
-
-const makeFlagBorder = ({ $size, $bgColor = 'accentColorA', theme}: NsFlagThemeParams) => {
+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 '';
 };
@@ -47,8 +45,8 @@ const makeFlagBorder = ({ $size, $bgColor = 'accentColorA', theme}: NsFlagThemeP
 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/flag/NsFlag.tsx

@@ -5,10 +5,8 @@
  */
 
 import React, { PropsWithChildren } from 'react';
-
 import { StyledFlag } from './NsFlag.styled';
-
-import { NsFlagProps } from './types';
+import { NsFlagProps } from './types.d';
 
 const NsFlag = (props: PropsWithChildren<NsFlagProps>) => {
     const { className = '', size = 'small', color = 'accentColorA', message, testId = 'ns-flag-component' } = props;

package/src/common/flag/index.ts

@@ -1,2 +1,2 @@
 export { default as NsFlag } from './NsFlag';
-export type { NsFlagProps, NsFlagSize } from './types';
+export type { NsFlagProps, NsFlagSize } from './types.d';