@nuskin/foundation-ui-components 1.30.1 → 1.31.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.30.1",
+    "version": "1.31.0",
     "description": "It is a foundation library written in react, that provides common components to all UI pages",
     "main": "src/common/index.ts",
     "repository": {
@@ -57,6 +57,7 @@
         "react-dom": "^18.2.0",
         "react-material-ui-carousel": "^3.4.2",
         "react-slick": "^0.29.0",
+        "react-window": "^1.8.10",
         "slick-carousel": "^1.8.1",
         "typescript": "^5.4.2"
     },
@@ -86,6 +87,7 @@
         "@types/ramda": "^0.29.7",
         "@types/react-slick": "^0.23.11",
         "@types/react-test-renderer": "^18.0.5",
+        "@types/react-window": "^1.8.8",
         "babel-jest": "^29.7.0",
         "babel-loader": "^9.1.3",
         "babel-plugin-emotion": "^11.0.0",

package/src/common/autocomplete/NsAutocomplete.styled.tsx

@@ -1,6 +1,6 @@
 import { styled, ColorUtils } from '@nuskin/foundation-theme';
 import { NsInputField } from '../input';
-import { Popper } from '@mui/material';
+import { Popper, autocompleteClasses } from '@mui/material';
 const { getGenomeColor } = ColorUtils;
 
 export const StyledTextField = styled(NsInputField)`
@@ -13,9 +13,12 @@ export const StyledTextField = styled(NsInputField)`
     }
 `;
 
-export const StyledPopper = styled(Popper)`
-    width: 100% !important;
-    #custom_autocomplete_dropdown-listbox{
-        overflow-x:hidden;
-    }
-`
+export const StyledPopper = styled(Popper)({
+    [`& .${autocompleteClasses.listbox}`]: {
+        boxSizing: 'border-box',
+        '& ul': {
+            padding: 0,
+            margin: 0,
+        },
+    },
+});

package/src/common/autocomplete/NsAutocomplete.tsx

@@ -1,36 +1,19 @@
-import React, {
-    PropsWithChildren,
-    ReactElement,
-    useEffect,
-    useRef,
-    useState,
-} from 'react';
-
-import {
-    Autocomplete,
-    AutocompleteRenderInputParams,
-    Popper,
-} from '@mui/material';
+import React, { PropsWithChildren, ReactElement, useEffect, useRef, useState } from 'react';
+
+import { Autocomplete, AutocompleteRenderInputParams, ListSubheader, Popper, useMediaQuery, useTheme } from '@mui/material';
 
 import { LineLoader } from './helper/LineLoader';
 import { RecentClearAll } from './helper/RecentClearAll';
-import {
-    renderGroupBy,
-    renderGroupName,
-    renderOptionLabel,
-} from './helper/renderGroupName';
+import { renderGroupBy, renderOptionLabel } from './helper/renderGroupName';
 import { SeeMoreButton } from './helper/SeeMoreButton';
-import {
-    StyledPopper,
-    StyledTextField,
-} from './NsAutocomplete.styled';
-import {
-    ComponentBoxProps,
-    NsAutocompleteProps,
-    OptionsProps,
-} from './types.d';
+import { StyledPopper, StyledTextField } from './NsAutocomplete.styled';
+import { ComponentBoxProps, NsAutocompleteProps, OptionsProps } from './types.d';
+import { VariableSizeList, ListChildComponentProps } from 'react-window';
 
+const LISTBOX_PADDING = 8;
 const noop = () => {};
+const OuterElementContext = React.createContext({});
+
 const NsAutocomplete = ({
     id = 'custom_autocomplete_dropdown',
     options,
@@ -50,9 +33,10 @@ const NsAutocomplete = ({
     value,
     isFilterEnabled = true,
     fullWidth,
-}: PropsWithChildren<NsAutocompleteProps>):ReactElement => {
+    onKeypress
+}: PropsWithChildren<NsAutocompleteProps>): ReactElement => {
+    const listboxRef = useRef<any | null>(null);
     const [scrollTopPosition, setScrollTopPosition] = useState(0);
-    const listboxRef = useRef<HTMLUListElement | null>(null);
 
     useEffect(() => {
         if (listboxRef.current && options.length > 0) {
@@ -60,6 +44,13 @@ const NsAutocomplete = ({
         }
     }, [options, scrollTopPosition]);
 
+    const OuterElementType = React.forwardRef((props: any, ref) => {
+        const outerProps = React.useContext(OuterElementContext);
+        return <ul ref={ref} {...props} {...outerProps} />;
+    });
+
+    OuterElementType.displayName = 'OuterElementType';
+
     const renderInput = (params: AutocompleteRenderInputParams) => (
         <StyledTextField
             {...(params as any)}
@@ -82,54 +73,132 @@ const NsAutocomplete = ({
             </li>
         );
 
-    const renderListBoxComponent = ({ children, ...rest }: ComponentBoxProps): React.JSX.Element => {
+    const renderRow = (props: ListChildComponentProps) => {
+        const { data, index, style } = props;
+        const dataSet = data[index];
+        const option = dataSet?.[1];
+        const inlineStyle = {
+            top: (style.top as number) + LISTBOX_PADDING,
+        };
+
+        if (Object.hasOwn(dataSet, 'group')) {
+            return (
+                <ListSubheader key={dataSet.key} component="div" style={inlineStyle}>
+                    {dataSet.group}
+                </ListSubheader>
+            );
+        }
+
         return (
-            <ul
-                aria-labelledby={rest['aria-labelledby']}
-                onMouseDown={rest.onMouseDown}
-                role={rest.role}
-                id={rest.id}
-                className={rest.className}
-                ref={listboxRef}
-            >
-                <RecentClearAll
-                    show={clear?.show ?? false}
-                    text={clear?.text ?? 'Clear All'}
-                    onClick={clear?.onClear ?? noop}
-                    testId="autocomplete-clear-id"
-                    recentSearchText={clear?.recentSearchText ?? 'Your Recent Searches'}
-                />
-                {children}
-                <SeeMoreButton
-                    onSeeMore={seeMore?.onSeeMore}
-                    show={seeMore?.show}
-                    text={seeMore?.text}
-                    options={options}
-                    setScrollTopPosition={setScrollTopPosition}
-                    listboxRef={listboxRef}
-                />
-            </ul>
+            <div component="div" {...dataSet[0]} style={inlineStyle}>
+                {renderOption(props, option)}
+            </div>
         );
     };
+
+    const useResetCache = (data: any) => {
+        const ref = React.useRef<VariableSizeList>(null);
+        React.useEffect(() => {
+            if (ref.current != null) {
+                ref.current.resetAfterIndex(0, true);
+            }
+        }, [data]);
+        return ref;
+    };
+
+    const ListboxComponent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLElement>>(
+        function ListboxComponent(props, ref) {
+            const { children, ...other } = props;
+            const itemData: React.ReactElement[] = [];
+            (children as React.ReactElement[]).forEach(
+                (item: React.ReactElement & { children?: React.ReactElement[] }) => {
+                    itemData.push(item);
+                    itemData.push(...(item.children || []));
+                }
+            );
+
+            const theme = useTheme();
+            const smUp = useMediaQuery(theme.breakpoints.up('sm'), {
+                noSsr: true,
+            });
+            const itemCount = itemData.length;
+            const itemSize = smUp ? 36 : 48;
+
+            const getChildSize = (child: React.ReactElement) => {
+                if (Object.hasOwn(child, 'group')) {
+                    return 48;
+                }
+
+                return itemSize;
+            };
+
+            const getHeight = () => {
+                if (itemCount > 8) {
+                    return 8 * itemSize;
+                }
+                return itemData.map(getChildSize).reduce((a, b) => a + b, 0);
+            };
+
+            const gridRef = useResetCache(itemCount);
+
+            return (
+                <>
+                    <RecentClearAll
+                        show={clear?.show ?? false}
+                        text={clear?.text ?? 'Clear All'}
+                        onClick={clear?.onClear ?? noop}
+                        testId="autocomplete-clear-id"
+                        recentSearchText={clear?.recentSearchText ?? 'Your Recent Searches'}
+                    />
+                    <div ref={ref}>
+                        <OuterElementContext.Provider value={other}>
+                            <VariableSizeList
+                                itemData={itemData}
+                                height={getHeight() + 2 * LISTBOX_PADDING}
+                                width="100%"
+                                ref={gridRef}
+                                outerElementType={OuterElementType}
+                                innerElementType="ul"
+                                itemSize={(index) => getChildSize(itemData[index])}
+                                overscanCount={5}
+                                itemCount={itemCount}
+                            >
+                                {renderRow}
+                            </VariableSizeList>
+                        </OuterElementContext.Provider>
+                    </div>
+                    <SeeMoreButton
+                        onSeeMore={seeMore?.onSeeMore}
+                        show={seeMore?.show}
+                        text={seeMore?.text}
+                        options={options}
+                        setScrollTopPosition={setScrollTopPosition}
+                        listboxRef={listboxRef}
+                    />
+                </>
+            );
+        }
+    );
+
     return (
         <>
             <LineLoader show={loading ?? false} />
             <Autocomplete
-                openOnFocus
+                open
                 id={id}
-                disablePortal
+                disableListWrap
                 className={className}
-                options={options}
                 loading={loading}
                 noOptionsText={noOptionsText}
+                PopperComponent={fullWidth ? StyledPopper : Popper}
+                ListboxComponent={ListboxComponent}
+                options={options}
                 groupBy={renderGroupBy}
                 getOptionLabel={renderOptionLabel}
-                renderOption={renderOption as any}
-                renderInput={renderInput}
-                PopperComponent={fullWidth ? StyledPopper : Popper} // TODO:https://code.tls.nuskin.io/ns-am/content-foundation/nuskin-app/-/jobs/1355817
-                ListboxComponent={renderListBoxComponent}
-                renderGroup={renderGroupName}
+                renderOption={(props, option, state) => [props, option, state.index] as React.ReactNode}
+                renderGroup={(params) => params as any}
                 onChange={onChange}
+                renderInput={renderInput}
                 onInputChange={onInputChange}
                 value={value}
                 onFocus={onFocus ?? noop}
@@ -140,6 +209,7 @@ const NsAutocomplete = ({
                         : (options) => options
                 }
                 freeSolo
+                onKeyDown={onKeypress}
             />
         </>
     );

package/src/common/autocomplete/stories/NsAutocomplete.stories.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react';
+import React, { ReactElement, SyntheticEvent } from 'react';
 
 import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import type { Meta, StoryObj } from '@storybook/react';
@@ -65,6 +65,7 @@ export default {
         iconEnd: (<NsIcon name="roundedClose" size="small" colorOverride="#F5F5F5" />) as ReactElement,
         placeholder: 'Search',
         fullWidth: false,
+        onKeypress: (e: SyntheticEvent) => console.log(e),
     },
 } as MetaStory;
 

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

@@ -17,6 +17,7 @@ export type NsAutocompleteProps = {
         reason Can be: "input" (user input), "reset" (programmatic change), "clear".
      */
     onInputChange(event: SyntheticEvent, value: string, reason: string): void;
+    onKeypress?:(event:SyntheticEvent) => void;
     /*
         event The event source of the callback.
         value The new value of the component.

package/src/common/card/CardButton.tsx

@@ -6,16 +6,14 @@ import { styled } from '@nuskin/foundation-theme';
 import { NsButton, NsIcon } from '../';
 import { NsCardButton } from './types';
 
-const ButtonTextVariant = styled(Button)(() => {
-    return {
-        padding: 0,
-        borderBottom: '1px solid black',
-        borderRadius: 0,
-        textTransform: 'none',
-        fontSize: '14px',
-        fontWeight: 600,
-    };
-});
+const ButtonTextVariant = styled(Button)`
+    padding: 0;
+    border-bottom: 1px solid black;
+    border-radius: 0;
+    text-transform: none;
+    font-size: 14px;
+    font-weight: 600;
+`;
 
 const CardButton = ({
     url,

package/src/common/card/NsAwardCard.tsx

@@ -15,35 +15,33 @@ type NsAwardCardProps = {
     className?: string;
 };
 
-const CardContainer = styled(Box)(() => {
-    return {
-        display: 'flex',
-        flexDirection: 'column',
-        position: 'relative',
-        alignItems: 'center',
-        width: '160px',
-        height: 'auto',
-        '.image': {
-            width: '160px',
-            height: 'auto',
-            objectFit: 'cover',
-        },
-        '.content': {
-            display: 'flex',
-            flexDirection: 'column',
-            textAlign: 'center',
-            alignItems: 'center',
-            marginTop: '25px',
-        },
-        '.content-text': {
-            marginTop: '20px',
-        },
-        '.action-link': {
-            marginTop: '10px',
-            alignSelf: 'start',
-        },
-    };
-});
+const CardContainer = styled(Box)`
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    align-items: center;
+    width: 160px;
+    height: auto;
+    .image {
+        width: 160px;
+        height: auto;
+        object-fit: cover;
+    }
+    .content {
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+        align-items: center;
+        margin-top: 25px;
+    }
+    .content-text: {
+        margin-top: 20px;
+    }
+    .action-link {
+        margin-top: 10px;
+        align-self: start;
+    },
+`;
 
 export default function NsAwardCard({
     title,

package/src/common/card/NsBrandWrapper.tsx

@@ -3,24 +3,22 @@ import { PropsWithChildren, ReactElement } from 'react';
 import Box from '@mui/material/Box';
 import { styled } from '@nuskin/foundation-theme';
 
-const Wrapper = styled(Box)(() => {
-    return {
-        backgroundColor: 'rgba(0, 0, 0, 0.5)',
-        width: '100%',
-        height: '100%',
-        zIndex: 100,
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        '&:hover': {
-            backgroundColor: 'rgba(0, 0, 0, 0)',
-            '& img': {
-                visibility: 'hidden',
-            },
-        },
-    };
-});
+const Wrapper = styled(Box)`
+    background-color: rgba(0, 0, 0, 0.5);
+    width: 100%;
+    height: 100%;
+    z-index: 100;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    &:hover {
+        background-color: rgba(0, 0, 0, 0);
+        & img {
+            visibility: hidden;
+        }
+    }
+`;
 
 export default function NsBrandWrapper({ children }: PropsWithChildren): ReactElement {
     return <Wrapper className="logo-wrapper">{children}</Wrapper>;

package/src/common/card/NsCheckoutCard.tsx

@@ -13,54 +13,52 @@ type NsCheckoutCardProps = {
     className?: string;
 };
 
-const CardContainer = styled(Box)(() => {
-    return {
-        backgroundColor: '#fff',
-        display: 'flex',
-        maxWidth: '345px',
-        height: 'auto',
-        border: '2px solid #B2B2B2',
-        borderRadius: '2px',
-        '.left-bar': {
-            width: '4px',
-            height: 'auto',
-            backgroundColor: '#22D55C',
-        },
-        '.content': {
-            display: 'flex',
-            flexDirection: 'row',
-            gap: '10px',
-            margin: '10px',
-            width: '100%',
-        },
-        '.text-content': {
-            width: '100%',
-        },
-        '.title': {
-            fontSize: '14px',
-            fontWeight: '700',
-        },
-        '.address': {
-            fontSize: '13px',
-            fontWeight: '400',
-        },
-        '.action-link': {
-            color: '#7123D9',
-            fontSize: '14px',
-            fontWeight: '700',
-            letterSpacing: '0.7',
-        },
-        '.icon-right': {
-            marginLeft: 'auto',
-        },
-        '.icon': {
-            ':hover': {
-                cursor: 'pointer',
-            },
-        },
-    };
-});
-
+const CardContainer = styled(Box)`
+    background-color: #fff;
+    display: flex;
+    max-width: 345px;
+    height: auto;
+    border: 2px solid #B2B2B2;
+    border-radius: 2px;
+    .left-bar {
+        width: 4px;
+        height: auto;
+        background-color: #22D55C;
+    }
+    .content {
+        display: flex;
+        flex-direction: row;
+        gap: 10px;
+        margin: 10px;
+        width: 100%;
+    }
+    .text-content {
+        width: 100%;
+    }
+    .title {
+        font-size: 14px;
+        font-weight: 700;
+    }
+    .address {
+        font-size: 13px;
+        font-weight: 400;
+    }
+    .action-link {
+        color: #7123D9;
+        font-size: 14px;
+        font-weight: 700;
+        letter-spacing: 0.7;
+    }
+    .icon-right {
+        margin-left: auto;
+    }
+    .icon {
+        &:hover {
+            cursor: pointer;
+        }
+    }
+`;
+    
 export default function NsCheckoutCard({ title, icon, linkText, url, className }: NsCheckoutCardProps): ReactElement {
     const [dropdownIcon, setDropdownIcon] = useState(false);
     const handleClick = () => {

package/src/common/card/NsHeroCardLevel2.tsx

@@ -17,52 +17,50 @@ type NsHeroCardLevel2Props = {
     className?: string;
 };
 
-const CardContainer = styled(Box)(() => {
-    return {
-        backgroundClip: 'border-box',
-        display: 'flex',
-        flexDirection: 'row' as 'row',
-        wordWrap: 'break-word' as 'break-word',
-        position: 'relative',
-        overflow: 'hidden',
-        height: '236px',
-        maxWidth: '536px',
-        '.content': {
-            height: '100%',
-            padding: '50px',
-            display: 'flex',
-            flexDirection: 'column' as 'column',
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            boxSizing: 'border-box',
-        },
-        '.bg-image': {
-            objectFit: 'cover',
-        },
-        '.brand-container': {
-            backgroundColor: '#fff',
-            width: 'fit-content',
-            paddingLeft: '10px',
-            paddingRight: '10px',
-        },
-        '.body-title': {
-            fontSize: '26px',
-            lineHeight: '44px',
-            marginBottom: '5px',
-        },
-        '.body-text': {
-            fontSize: '12px',
-            fontWeight: 700,
-            marginBottom: '5px',
-        },
-        '@media (max-width:768px)': {
-            '.content': {
-                padding: '5%',
-            },
-        },
-    };
-});
+const CardContainer = styled(Box)`
+    background-clip: border-box;
+    display: flex;
+    flex-direction: row;
+    word-wrap: break-word;
+    position: relative;
+    overflow: hidden;
+    height: 236px;
+    max-width: 536px;
+    .content {
+        height: 100%;
+        padding: 50px;
+        display: flex;
+        flex-direction: column;
+        position: absolute;
+        top: 0;
+        left: 0;
+        box-sizing: border-box;
+    }
+    .bg-image {
+        object-fit: cover;
+    }
+    .brand-container {
+        background-color: #fff;
+        width: fit-content;
+        padding-left: 10px;
+        padding-right: 10px;
+    }
+    .body-title {
+        font-size: 26px;
+        line-height: 44px;
+        margin-bottom: 5px;
+    }
+    .body-text {
+        font-size: 12px;
+        font-weight: 700;
+        margin-bottom: 5px;
+    }
+    @media (max-width:768px) {
+        .content {
+            padding: 5%;
+        }
+    }
+`
 
 const NsHeroCardLevel2 = ({
     brandName,

package/src/common/card/NsIconText.tsx

@@ -9,40 +9,38 @@ type NsIconTextProps = {
     className?: string;
 };
 
-const CardContainer = styled(Box)(() => {
-    return {
-        backgroundClip: 'border-box',
-        display: 'flex',
-        flexDirection: 'column' as 'column',
-        wordWrap: 'break-word' as 'break-word',
-        position: 'relative',
-        overflow: 'hidden',
-        height: 'auto',
-        maxWidth: '222px',
-        backgroundColor: '#F5F5F5',
-        padding: '20px',
-        justifyContent: 'center',
-        gap: '30px',
-        '.icon': {
-            display: 'flex',
-            width: '100%',
-        },
-        '.divider': {
-            width: '182px',
-            height: '1px',
-            background: '#B2B2B2',
-        },
-        '.title': {
-            fontSize: '26px',
-            fontWeight: 400,
-            marginTop: '-10px',
-        },
-        '.text': {
-            fontWeight: 400,
-            fontSize: '14px',
-        },
-    };
-});
+const CardContainer = styled(Box)`
+    background-clip: border-box;
+    display: flex;
+    flex-direction: column;
+    word-wrap: break-word;
+    position: relative;
+    overflow: hidden;
+    height: auto;
+    max-width: 222px;
+    background-color: #F5F5F5;
+    padding: 20px;
+    justify-content: center;
+    gap: 30px;
+    .icon {
+        display: flex;
+        width: 100%;
+    }
+    .divider {
+        width: 182px;
+        height: 1px;
+        background: #B2B2B2;
+    }
+    .title {
+        font-size: 26px;
+        font-weight: 400;
+        margin-top: -10px;
+    }
+    .text {
+        font-weight: 400;
+        font-size: 14px;
+    }
+`;
 
 const Icon = (): ReactElement => {
     return (

package/src/common/card/NsPost.tsx

@@ -13,53 +13,51 @@ type NsPostProps = {
     className?: string;
 };
 
-const CardContainer = styled(Box)(() => {
-    return {
-        backgroundClip: 'border-box',
-        display: 'flex',
-        flexDirection: 'column' as 'column',
-        wordWrap: 'break-word' as 'break-word',
-        position: 'relative',
-        overflow: 'hidden',
-        maxWidth: '165px',
-        height: '272px',
-        backgroundColor: '#fff',
-        '.image': {
-            height: '180px',
-            overflow: 'hidden',
-            objectFit: 'contain',
-        },
-        '.content': {
-            padding: '20px',
-            display: 'flex',
-            flexDirection: 'column',
-            minHeight: '92px',
-            maxHeight: '92px',
-            justifyContent: 'space-around',
-        },
-        '.body-title': {
-            fontSize: '18px',
-            fontWeight: 600,
-            display: '-webkit-box',
-            '-webkit-box-orient': 'vertical',
-            '-webkit-line-clamp': '1',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            margin: 0,
-        },
-        '.body-text': {
-            fontSize: '12px',
-            fontWeight: 700,
-            display: '-webkit-box',
-            '-webkit-box-orient': 'vertical',
-            '-webkit-line-clamp': '1',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            color: '#8C8C8C',
-            margin: 0,
-        },
-    };
-});
+const CardContainer = styled(Box)`
+    background-clip: border-box;
+    display: flex;
+    flex-direction: column;
+    word-wrap: break-word;
+    position: relative;
+    overflow: hidden;
+    max-width: 165px;
+    height: 272px;
+    background-color: #fff;
+    .image {
+        height: 180px;
+        overflow: hidden;
+        object-fit: contain
+    }
+    .content {
+        padding: 20px;
+        display: flex;
+        flex-direction: column;
+        min-height: 92px;
+        max-height: 92px;
+        justify-content: space-around
+    }
+    .body-title {
+        font-size: 18px;
+        font-weight: 600;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin: 0
+    }
+    .body-text {
+        font-size: 12px;
+        font-weight: 700;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        color: #8C8C8C;
+        margin: 0
+    }
+`;
 
 const NsPost = ({ text, body, backgroundImageDetail, className }: NsPostProps): ReactElement => {
     return (

package/src/common/card/NsSmallFullCard.tsx

@@ -16,55 +16,53 @@ type NsSmallFullCardProps = {
     className?: string;
 };
 
-const CardContainer = styled(Box)(() => {
-    return {
-        backgroundColor: '#fff',
-        display: 'flex',
-        maxHeight: '320px',
-        maxWidth: '375px',
-        overflow: 'hidden',
-        position: 'relative',
-        '.image': {
-            width: '100%',
-            height: '100%',
-            objectFit: 'cover',
-        },
-        '.gradientOverlay': {
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            width: '100%',
-            height: '100%',
-            background: 'linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);',
-        },
-        '.content': {
-            position: 'absolute',
-            height: '100%',
-            width: '100%',
-            padding: '40px 40px 25px 30px',
-            display: 'flex',
-            flexDirection: 'column',
-        },
-        '.subtitle': {
-            color: '#fff',
-            fontSize: '11px',
-            fontWeight: '400',
-            marginTop: 'auto',
-        },
-        '.title': {
-            color: '#fff',
-            fontSize: '26px',
-            fontWeight: '400',
-            marginTop: '20px',
-        },
-        '.cta': {
-            marginTop: '20px',
-            maxWidth: '208px',
-            borderRadius: '4px',
-            overflow: 'hidden',
-        },
-    };
-});
+const CardContainer = styled(Box)`
+    background-color: #fff;
+    display: flex;
+    max-height: 320px;
+    max-width: 375px;
+    overflow: hidden;
+    position: relative;
+    .image {
+        width: 100%;
+        height: 100%;
+        object-fit: cover
+    }
+    .gradientOverlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);
+    }
+    .content {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        padding: 40px 40px 25px 30px;
+        display: flex;
+        flex-direction: column
+    }
+    .subtitle {
+        color: #fff;
+        font-size: 11px;
+        font-weight: 400;
+        margin-top: auto
+    }
+    .title {
+        color: #fff;
+        font-size: 26px;
+        font-weight: 400;
+        margin-top: 20px
+    }
+    .cta {
+        margin-top: 20px;
+        max-width: 208px;
+        border-radius: 4px;
+        overflow: hidden
+    }
+`
 
 export default function NsSmallFullCard({
     title,

package/src/common/card/NsXLargeCard.tsx

@@ -16,51 +16,49 @@ type NsXLargeCardProps = {
     className?: string;
 };
 
-const CardContainer = styled(Box)(() => {
-    return {
-        backgroundColor: '#fff',
-        display: 'flex',
-        height: '620px',
-        width: '450px',
-        position: 'relative',
-        '.image': {
-            width: '100%',
-            height: '100%',
-            objectFit: 'cover',
-        },
-        '.gradientOverlay': {
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            width: '100%',
-            height: '100%',
-            background: 'linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);',
-        },
-        '.content': {
-            position: 'absolute',
-            height: '100%',
-            width: '100%',
-            padding: '40px 40px 25px 30px',
-            display: 'flex',
-            flexDirection: 'column',
-        },
-        '.subtitle': {
-            color: '#fff',
-            fontSize: '11px',
-            fontWeight: '400',
-            marginTop: 'auto',
-        },
-        '.title': {
-            color: '#fff',
-            fontSize: '26px',
-            fontWeight: '400',
-            marginTop: '20px',
-        },
-        '.cta': {
-            marginTop: '20px',
-        },
-    };
-});
+const CardContainer = styled(Box)`
+    background-color: #fff;
+    display: flex;
+    height: 620px;
+    width: 450px;
+    position: relative;
+    .image {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+    .gradientOverlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);
+    }
+    .content {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        padding: 40px 40px 25px 30px;
+        display: flex;
+        flex-direction: column;
+    }
+    .subtitle {
+        color: #fff;
+        font-size: 11px;
+        font-weight: 400;
+        margin-top: auto;
+    }
+    .title {
+        color: #fff;
+        font-size: 26px;
+        font-weight: 400;
+        margin-top: 20px;
+    }
+    .cta {
+        margin-top: 20px;
+    }
+`
 
 export default function NsXLargeCard({
     title,

package/src/common/input/InputFieldWrapper.tsx

@@ -5,7 +5,7 @@ const { color, paletteColor } = ColorUtils;
 const InputFieldWrapper = styled(Stack)(({ theme }: any) => {
     return {
         display: 'flex',
-        flexDirection: 'column',
+        flexDirection: 'column' as 'column',
         gap: '7px',
         '.MuiFormHelperText-root': {
             fontSize: '11px',

package/src/common/progress/NsProgress.styled.tsx

@@ -32,26 +32,25 @@ export const StyledLinearProgress = styled(LinearProgress)<Omit<NsProgressProps,
         },
     })
 );
-export const StyledProgress = styled('div')(() => {
-    return {
-        display: 'grid',
-        gridTemplateRows: '30px 30px',
-        '.progress-info': {
-            justifyContent: 'flex-end',
-            display: 'flex',
-            alignItems: 'center',
-        },
-        '.progress-bar': {
-            display: 'flex',
-            alignItems: 'center',
-            '.MuiSvgIcon-root': {
-                padding: '0',
-                margin: '0',
-                height: '100%',
-                position: 'relative',
-                left: '-4px',
-                scale: '1.3',
-            },
-        },
-    };
-});
+export const StyledProgress = styled('div')`
+    display: grid;
+    grid-template-rows: 30px 30px;
+    .progress-info {
+        justify-content: flex-end;
+        display: flex;
+        align-items: center;
+    }
+    .progress-bar {
+        display: flex;
+        align-items: center;
+        .MuiSvgIcon-root {
+            padding: 0;
+            margin: 0;
+            height: 100%;
+            position: relative;
+            left: -4px;
+            scale: 1.3
+        }
+    }
+`;
+

package/src/common/search-bar/NsSearchBar.tsx

@@ -12,14 +12,14 @@ const Search = styled('div')`
     width: 100%;
 )`;
 
-const SearchIconWrapper = styled('div')(() => ({
-    height: '100%',
-    position: 'absolute',
-    pointerEvents: 'none',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-}));
+const SearchIconWrapper = styled('div')`
+    height: 100%;
+    position: absolute;
+    pointer-events: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+`;
 
 const StyledInputBase = styled(InputBase)(() => ({
     color: 'inherit',