@nuskin/foundation-ui-components 1.20.1 → 1.21.0-cx130-1031.2

package/package.json

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

package/src/common/accordion/NsAccordion.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 
-import { AccordionItem, NsAccordionItem, NsAccordionProps, useAccordionMap } from '..';
+import { AccordionItem, NsAccordionItem, NsAccordionProps, NsTypography, useAccordionMap } from '..';
 import { StyledAccordionWrapper } from './ToggleSection.styled';
 
 /**
@@ -58,7 +58,11 @@ const NsAccordion = ({
                         openedIconName={openedIconName}
                         startIcon={item.icon}
                         toggleOpen={() => toggleOpen(createKey(item, index))}
-                        title={<div className="nsa-item-title">{item.title}</div>}
+                        title={
+                            <NsTypography weight="bold" variant="h6" className="nsa-item-title">
+                                {item.title}
+                            </NsTypography>
+                        }
                         variant={variant}
                     />
                 );

package/src/common/accordion/NsCollapse.tsx

@@ -1,14 +1,7 @@
 import { styled } from '@nuskin/foundation-theme';
 import { isValidElement, ReactElement, useMemo } from 'react';
 
-import {
-    AccordionContentTypeObject,
-    AccordionItem,
-    AccordionVariant,
-    AccordionVariantType,
-    NsAccordion,
-    NsCollapseProps,
-} from '../';
+import { AccordionContentTypeObject, AccordionItem, AccordionVariant, AccordionVariantType, NsAccordion, NsCollapseProps, NsTypography } from '../';
 import { getAccordionColor } from './colorMap';
 
 const getLevelOffset = (level: number) => {
@@ -70,17 +63,19 @@ const NsCollapse = ({
         }
         if (type === AccordionContentTypeObject.html) {
             return (
-                <div
-                    className="nsa-content-padded"
-                    dangerouslySetInnerHTML={{ __html: content as string }}
-                    {...(cslp?.content ?? {})}
-                />
+                <NsTypography variant="body-m">
+                    <div
+                        className="nsa-content-padded"
+                        dangerouslySetInnerHTML={{ __html: content as string }}
+                        {...(cslp?.content ?? {})}
+                    />
+                </NsTypography>
             );
         } else if (type === AccordionContentTypeObject.text) {
             return (
-                <div className="p-4" {...(cslp?.content ?? {})}>
+                <NsTypography variant="body-m" className="p-4" {...(cslp?.content ?? {})}>
                     {content as string}
-                </div>
+                </NsTypography>
             );
         } else if (type === AccordionContentTypeObject.accordion) {
             return (

package/src/common/card/NsMediumCard.tsx

@@ -1,9 +1,9 @@
+import { NsCardButton } from './types';
 import Box from '@mui/material/Box';
 import { styled } from '@nuskin/foundation-theme';
 
 import { NsImage, NsTypography } from '../';
 import CardButton from './CardButton';
-import { NsCardButton } from './types';
 
 type NsMediumCardProps = {
     title: string;
@@ -22,9 +22,8 @@ const textVariantButton = {
     span: {
         margin: 0,
     },
-    '>div': {
+    '> div': {
         margin: 0,
-        borderBottom: '1px solid #252525',
     },
     '.MuiButton-endIcon': {
         svg: {