@nuskin/foundation-ui-components 1.0.0-develop.1 → 1.0.0-develop.2

package/src/common/carousal/tests/NsCarousal.spec.tsx

@@ -1,5 +1,5 @@
-import { render, screen, fireEvent } from '../../../../test-utils';
-import NsCarousal from '../NsCarousal';
+import { render, screen, fireEvent } from '@/test-utils/index';
+import { NsCarousal } from '@/common/';
 
 const mockEntries = [
     { id: 1, title: 'First entry' },

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

@@ -0,0 +1,61 @@
+import { render, screen, fireEvent } from '@/test-utils/index';
+import { NsScrollingCarousal } from '@/common/';
+
+const mockEntries = [
+    { id: 1, title: 'First entry' },
+    { id: 2, title: 'Second entry' },
+    { id: 3, title: 'Third entry' },
+    { id: 4, title: 'Fourth entry' },
+    { id: 5, title: 'Fifth entry' },
+];
+
+const mockRenderEntry = (entry: any, index: number) => {
+    return <div key={index}>{entry.title}</div>;
+};
+const mockSettings = {
+    slidesToShow: 2,
+    slidesToScroll: 1,
+};
+const testId = 'scrolling-carousal';
+describe('NsScrollingCarousal', () => {
+    it('should have slides', () => {
+        render(
+            <NsScrollingCarousal
+                slides={mockEntries}
+                renderSlide={mockRenderEntry}
+                settings={mockSettings}
+                scrollSeconds={1}
+                stillSeconds={9}
+                additionalProps={{
+                    testid: testId,
+                }}
+            />
+        );
+        const el = screen.getAllByText(mockEntries[0].title);
+        expect(el).toHaveLength(2);
+    });
+
+    it('should change slides when clicking on prev or next buttons', () => {
+        const { container } = render(
+            <NsScrollingCarousal
+                slides={mockEntries}
+                renderSlide={mockRenderEntry}
+                settings={mockSettings}
+                scrollSeconds={1}
+                stillSeconds={9}
+            />
+        );
+
+        let currentSlide = container.querySelector('.slick-slide.slick-current');
+        expect(currentSlide!.attributes['data-index' as any].value).toEqual('0');
+
+        /* this is library's button, not our button, it is used for changing slides,
+      clicking svg is not making any slide change in this test */
+        const nextButton = screen.getByRole('button', { name: /next/i });
+        fireEvent.click(nextButton);
+
+        let slickTrack = container.querySelector('.slick-track');
+        currentSlide = slickTrack!.querySelector('.slick-slide.slick-current');
+        expect(currentSlide!.attributes['data-index' as any].value).toEqual('1');
+    });
+});

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

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import { AdditionalProps } from '../common.types';
+
+export type NsCarousalProps<T = any> = {
+    entries: T[];
+    // eslint-disable-next-line no-unused-vars
+    renderEntry(entry: T, index: number): ReactNode;
+    allEntryLink: string;
+    settings: any;
+};
+
+export type NsScrollingCarousalProps<T = any> = {
+    slides: T;
+    // eslint-disable-next-line no-unused-vars
+    renderSlide(slide: T, index: number): ReactNode;
+    /* time it takes while scrolling */
+    scrollSeconds: number;
+    /* time for which slide stays still before scrolling */
+    stillSeconds: number;
+    settings: any;
+} & AdditionalProps;

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

@@ -1,5 +1,5 @@
 import { NsCartIcon } from './';
-import { render, screen } from '../../../test-utils';
+import { render, screen } from '@/test-utils/index';
 
 const { getByTestId } = screen;
 describe('NsCartIcon', () => {

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

@@ -1,6 +1,6 @@
 import { NsIcon } from '../icon';
 import { CartIconContainer, ItemCount } from './NsCartIcon.styled';
-import { NsCartIconProps } from './types';
+import { NsCartIconProps } from './types.d';
 
 const NsCartIcon = ({ itemCount, size = 'large', color = 'primary' }: NsCartIconProps) => {
     return (

package/src/common/cart-icon/index.ts

@@ -1,2 +1,2 @@
 export { default as NsCartIcon } from './NsCartIcon';
-export type { NsCartIconProps } from './types';
+export type { NsCartIconProps } from './types.d';

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

@@ -6,7 +6,7 @@
 
 import React from 'react';
 
-import { render, fireEvent, noop } from '../../../test-utils';
+import { render, fireEvent, noop } from '@/test-utils/index';
 import NsCheckbox from './NsCheckbox';
 
 // Test suite for CustomCheckbox
@@ -54,4 +54,4 @@ describe('CustomCheckbox', () => {
         // Assert that the handleChange function has been called
         expect(handleChange).toHaveBeenCalled();
     });
-});
+});

package/src/common/checkbox/NsCheckbox.tsx

@@ -9,7 +9,7 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 import { default as MUICheckbox } from '@mui/material/Checkbox';
 
 import { BpCheckedIcon, BpIcon, StyledLabel, StyledFlagLabel } from './NsCheckbox.styled';
-import { NsCheckboxProps } from './types';
+import { NsCheckboxProps } from './types.d';
 
 import { NsTypography } from '../';
 

package/src/common/checkbox/index.ts

@@ -1,2 +1,2 @@
 export { default as NsCheckbox } from './NsCheckbox';
-export type { NsCheckboxProps } from './types';
+export type { NsCheckboxProps } from './types.d';

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

@@ -1,15 +1,9 @@
-/**
- * @author [vijayaprathap Kumar] (vpkumar@nuskin.com)
- * types.d.ts
- * @description NsCheckbox Props extending Mui CheckboxProps interface.
- */
-
 import { CheckboxProps as MUICheckboxProps } from '@material-ui/core/Checkbox';
 
 import { NsFlagProps } from '../flag';
 
 // Define the props for the custom checkbox component
-export type NsCheckboxProps = Pick<MUICheckboxProps, 'label' | 'onChange'> & {
+export type NsCheckboxProps = Partial<Pick<MUICheckboxProps, 'label' | 'onChange'>> & {
     name: string;
     className?: string;
     checked: boolean;

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

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { Box } from '@mui/material';
 import { styled } from '@nuskin/foundation-theme';
-import { NsColumnControlProps, sizeObjectType } from './types';
+import { NsColumnControlProps, sizeObjectType } from './types.d';
 import { getColumnSizes } from './utils';
 
 const options = {

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

@@ -0,0 +1,27 @@
+import { PropsWithChildren, useMemo } from 'react';
+import { getColumnSizes } from './utils';
+import { StyledFlex } from './styled/StyledFlex';
+import { AdditionalProps } from '../common.types';
+
+type NsFlexColumnsProps = PropsWithChildren<{
+    columnClass: string;
+    gap: number;
+}> &
+    AdditionalProps;
+
+const NsFlexColumns = ({ columnClass, children, gap, additionalProps }: NsFlexColumnsProps) => {
+    const sizes = useMemo(() => {
+        return getColumnSizes(columnClass ?? 'ns-col-lg-1-1');
+    }, [columnClass]);
+    return (
+        <StyledFlex
+            gap={gap}
+            sizes={sizes}
+            className="styled-flex"
+            data-testid={additionalProps?.testid ?? 'ns-flex-columns'}
+        >
+            {children}
+        </StyledFlex>
+    );
+};
+export default NsFlexColumns;

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

@@ -0,0 +1,27 @@
+import { PropsWithChildren, useMemo } from 'react';
+import { getColumnSizes } from './utils';
+import { StyledGrid } from './styled/StyledGrid';
+import { AdditionalProps } from '../common.types';
+
+type NsGridColumnsProps = PropsWithChildren<{
+    columnClass: string;
+    gap: number;
+}> &
+    AdditionalProps;
+
+const NsGridColumns = ({ columnClass, children, gap, additionalProps }: NsGridColumnsProps) => {
+    const sizes = useMemo(() => {
+        return getColumnSizes(columnClass ?? 'ns-col-lg-1-1');
+    }, [columnClass]);
+    return (
+        <StyledGrid
+            gap={gap}
+            sizes={sizes}
+            className="styled-grid"
+            data-testid={additionalProps?.testid ?? 'ns-grid-columns'}
+        >
+            {children}
+        </StyledGrid>
+    );
+};
+export default NsGridColumns;

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

@@ -1,2 +1,4 @@
 export { default as NsColumnControl } from './NsColumnControl';
-export type { NsColumnControlProps } from './types';
+export { default as NsFlexColumns } from './NsFlexColumns';
+export { default as NsGridColumns } from './NsGridColumns';
+export type { NsColumnControlProps } from './types.d';

package/src/common/column-control/{NsColumnControl.spec.tsx → specs/NsColumnControl.spec.tsx}

@@ -1,6 +1,6 @@
-import { render, screen } from '../../../test-utils';
-import { NsColumnControl } from './';
-import { DivArray } from './NDivs.story';
+import { NsColumnControl } from '@/common/index';
+import { DivArray } from '../stories/NDivs.story';
+import { render, screen } from '@/test-utils/index';
 
 describe('NsColumnControl component', () => {
     it('renders an column with proper grid value for tablet', () => {

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

@@ -0,0 +1,24 @@
+import { render, screen } from '../../../../test-utils';
+import { NsFlexColumns } from '@/common/index';
+import { DivArray } from '../stories/NDivs.story';
+
+describe('NsFlexColumns component', () => {
+    it('renders an column with proper grid value for tablet', () => {
+        render(
+            <NsFlexColumns columnClass="ns-col-lg-1-1-1" gap={16}>
+                <DivArray elementsCount={4} />
+            </NsFlexColumns>
+        );
+        const element = screen.getByTestId('ns-flex-columns');
+        expect(element).toBeInTheDocument();
+    });
+    it('renders an column with proper grid value', () => {
+        console.warn = jest.fn();
+        render(
+            <NsFlexColumns columnClass="" gap={16}>
+                <DivArray elementsCount={4} />
+            </NsFlexColumns>
+        );
+        expect(console.warn).toHaveBeenCalledWith(expect.stringContaining('Received invalid className'));
+    });
+});

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

@@ -0,0 +1,24 @@
+import { render, screen } from '../../../../test-utils';
+import { NsGridColumns } from '@/common/index';
+import { DivArray } from '../stories/NDivs.story';
+
+describe('NsGridColumns component', () => {
+    it('renders an column with proper grid value for tablet', () => {
+        render(
+            <NsGridColumns columnClass="ns-col-lg-1-1-1" gap={16}>
+                <DivArray elementsCount={4} />
+            </NsGridColumns>
+        );
+        const element = screen.getByTestId('ns-grid-columns');
+        expect(element).toBeInTheDocument();
+    });
+    it('renders an column with proper grid value', () => {
+        console.warn = jest.fn();
+        render(
+            <NsGridColumns columnClass="" gap={16}>
+                <DivArray elementsCount={4} />
+            </NsGridColumns>
+        );
+        expect(console.warn).toHaveBeenCalledWith(expect.stringContaining('Received invalid className'));
+    });
+});

package/src/common/column-control/{NDivs.story.tsx → stories/NDivs.story.tsx}

@@ -1,5 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '../../../stories/decorators/withCenterDecorator';
 
 type DivArrayProps = {
     elementsCount: number;

package/src/common/column-control/{NsColumnControl.stories.tsx → stories/NsColumnControl.stories.tsx}

@@ -1,25 +1,15 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
-import { NsColumnControl } from '.';
+import { withCenterDecorator } from '../../../stories/decorators/withCenterDecorator';
+import { NsColumnControl } from '@/common/index';
 import { DivArray } from './NDivs.story';
+import { childrenMapping, selectDivOptions } from './common';
 
 type ComponentType = typeof NsColumnControl;
 type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
-/* an array from 1 to n */
-const selectDivOptions = Array(16)
-    .fill(0)
-    .map((e, i) => i + 1);
-const childrenMapping = selectDivOptions.reduce((a, c) => {
-    return {
-        ...a,
-        [c]: <DivArray elementsCount={c} />,
-    };
-}, {});
-
 export default {
-    title: 'Components/NsColumnControl',
+    title: 'Components/Column/NsColumnControl',
     component: NsColumnControl,
     decorators: [withCenterDecorator],
     argTypes: {

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

@@ -0,0 +1,59 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { withCenterDecorator } from '../../../stories/decorators/withCenterDecorator';
+import { NsFlexColumns } from '..';
+import { DivArray } from './NDivs.story';
+import {childrenMapping,  selectDivOptions } from './common';
+
+type ComponentType = typeof NsFlexColumns;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    title: 'Components/Column/NsFlexColumns',
+    component: NsFlexColumns,
+    decorators: [withCenterDecorator],
+    argTypes: {
+        columnClass: {
+            control: 'text',
+            defaultValue: 'ns-col-lg-1-1-1 ns-col-md-1-1 ns-col-sm-1',
+        },
+        gap: {
+            control: 'number',
+            defaultValue: 16,
+        },
+        children: {
+            control: {
+                type: 'select',
+                options: selectDivOptions,
+            },
+            defaultValue: <DivArray elementsCount={8} />,
+            mapping: childrenMapping,
+        },
+    },
+    args: {
+        columnClass: 'ns-col-lg-1-1-1',
+        children: <DivArray elementsCount={12} />,
+    },
+} as MetaStory;
+
+export const SingleColumnControl: Story = {};
+export const TwoColumn11: Story = {
+    args: { columnClass: 'ns-col-lg-1-1' },
+};
+export const TwoColumn21: Story = {
+    args: { columnClass: 'ns-col-lg-2-1' },
+};
+
+export const ThreeColumn211: Story = {
+    args: { columnClass: 'ns-col-lg-2-1-1' },
+};
+export const ThreeColumn121: Story = {
+    args: { columnClass: 'ns-col-lg-1-2-1' },
+};
+export const ThreeColumn111Responsive: Story = {
+    args: { columnClass: 'ns-col-lg-1-1-1' },
+};
+
+export const FourColumn1111Responsive: Story = {
+    args: { columnClass: 'ns-col-lg-1-1-1-1' },
+};

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

@@ -0,0 +1,59 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { withCenterDecorator } from '../../../stories/decorators/withCenterDecorator';
+import { NsGridColumns } from '..';
+import { DivArray } from './NDivs.story';
+import { childrenMapping, selectDivOptions } from './common';
+
+type ComponentType = typeof NsGridColumns;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    title: 'Components/Column/NsGridColumns',
+    component: NsGridColumns,
+    decorators: [withCenterDecorator],
+    argTypes: {
+        columnClass: {
+            control: 'text',
+            defaultValue: 'ns-col-lg-1-1-1 ns-col-md-1-1 ns-col-sm-1',
+        },
+        gap: {
+            control: 'number',
+            defaultValue: 16,
+        },
+        children: {
+            control: {
+                type: 'select',
+                options: selectDivOptions,
+            },
+            defaultValue: <DivArray elementsCount={8} />,
+            mapping: childrenMapping,
+        },
+    },
+    args: {
+        columnClass: 'ns-col-lg-1-1-1',
+        children: <DivArray elementsCount={12} />,
+    },
+} as MetaStory;
+
+export const SingleColumnControl: Story = {};
+export const TwoColumn11: Story = {
+    args: { columnClass: 'ns-col-lg-1-1' },
+};
+export const TwoColumn21: Story = {
+    args: { columnClass: 'ns-col-lg-2-1' },
+};
+
+export const ThreeColumn211: Story = {
+    args: { columnClass: 'ns-col-lg-2-1-1' },
+};
+export const ThreeColumn121: Story = {
+    args: { columnClass: 'ns-col-lg-1-2-1' },
+};
+export const ThreeColumn111Responsive: Story = {
+    args: { columnClass: 'ns-col-lg-1-1-1' },
+};
+
+export const FourColumn1111Responsive: Story = {
+    args: { columnClass: 'ns-col-lg-1-1-1-1' },
+};

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

@@ -0,0 +1,14 @@
+import { DivArray } from './NDivs.story';
+
+/* an array from 1 to n */
+export const selectDivOptions = Array(16)
+    .fill(0)
+    .map((_, index) => index + 1);
+
+/* this component is used only as a utility to show column control in storybook */
+export const childrenMapping = selectDivOptions.reduce((childrenMappingObject, elementCount) => {
+    return {
+        ...childrenMappingObject,
+        [elementCount]: <DivArray elementsCount={elementCount} />,
+    };
+}, {});

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

@@ -0,0 +1,41 @@
+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) => propKey !== 'sizes | gap',
+};
+
+type StyledFlexProps = {
+    sizes: sizeObjectType;
+    gap?: number;
+};
+
+/* main wrapper for column control using css flex */
+export const StyledFlex = styled(
+    Box as any,
+    options
+)<StyledFlexProps>(({ sizes, gap }: StyledFlexProps) => {
+    const gridGap = gap ? `${gap}px` : '2rem';
+    const fraction = getPercentArray(sizes.fractions);
+    const flexResponsive = { flexGrow: 1, flexShrink: 1 };
+    const style: any = {
+        gap: gridGap,
+        ...commonStyles,
+        display: 'flex',
+        paddingInline: '20px',
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        ' > *': {
+            display: 'flex',
+        },
+    };
+    fraction.forEach((f, i) => {
+        style[`> :nth-of-type(${fraction.length}n+${i + 1})`] = {
+            flexBasis: `calc(${fraction[i]} - ${gridGap})`,
+            ...flexResponsive,
+        };
+    });
+    return style;
+});

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

@@ -0,0 +1,33 @@
+import { Box } from '@mui/material';
+import { styled } from '@nuskin/foundation-theme';
+import { sizeObjectType } from '../types';
+import { commonStyles, getPercentArray } from './common';
+
+type StyledGridProps = {
+    sizes: sizeObjectType;
+    gap?: number;
+};
+const options = {
+    shouldForwardProp: (propKey: string) => propKey !== 'sizes | gap',
+};
+
+/* main wrapper for column control using css grid */
+export const StyledGrid = styled(
+    Box as any,
+    options
+)<StyledGridProps>(({ sizes, gap }: StyledGridProps) => {
+    const gridGap = gap ?? '2rem';
+    return {
+        gap: gridGap,
+        ...commonStyles,
+        display: 'grid',
+        /* here we are creating gridTemplateColumns as calc(40% - 20px) calc(40% - 20px), */
+        gridTemplateColumns: getPercentArray(sizes.fractions)
+            ?.map((fractionPercent) => `calc(${fractionPercent} - 20px)`)
+            .join(''),
+        justifyContent: 'center',
+        '.span-2': {
+            gridColumn: 'span 2',
+        },
+    } as any;
+});

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

@@ -0,0 +1,27 @@
+const mobileBreakPoint = '600px';
+// TODO: we need to add a prop in the to allow full width of page instead of 1200px
+export const commonStyles = {
+    maxWidth: '1200px',
+    margin: '32px auto',
+    [`@media (max-width: ${mobileBreakPoint})`]: {
+        display: 'flex',
+        flexDirection: 'column',
+        flexWrap: 'wrap',
+        margin: '2rem 1rem',
+        '> * ': {
+            flex: '1 1 0 !important',
+        },
+    },
+};
+/*
+   we have kept extra margin by taking 80% instead of 100%, because margins and padding,
+   and gaps also take up space, so we should be left with appropriate space
+   example:
+   ['1','1'] => ['40%','40%']
+   ['1','2'] => ['27%','53%']
+ */
+export function getPercentArray(fractionArray?: string[] | number[]) {
+    let numbers = fractionArray?.map((numberString) => +numberString)?.filter((num) => 0 < num && num < 10) ?? [];
+    const sum = numbers.reduce((currentSum, currentNumber) => currentSum + currentNumber, 0);
+    return numbers.map((currentNumber) => ((currentNumber / sum) * 80).toFixed(2) + '%');
+}

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',

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.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/flag/NsFlag.spec.tsx

@@ -8,7 +8,7 @@
 import React from 'react';
 import nuskinTheme from '@nuskin/foundation-theme/src/themes/genome-foundation';
 
-import { render } from '../../../test-utils/index';
+import { render } from '@/test-utils/index';
 import NsFlag from './NsFlag';
 
 const { palette } = nuskinTheme;

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

@@ -7,7 +7,7 @@
 import { Theme } from '@mui/material';
 import { styled, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
 
-import { NsFlagSize } from './types';
+import { NsFlagSize } from './types.d';
 
 type NsFlagThemeParams = {
     $size: NsFlagSize;
@@ -33,11 +33,9 @@ const makeFlagSize = ({ $size }: { $size: NsFlagSize }) => {
     return sizeValue / FLAG_SCALE_VALUE;
 };
 
-const {
-    getPaletteColor,
-} = ColorUtils;
+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)}`;
     }