diy-template-components 5.1.2 → 5.1.4

package/build/index.js

@@ -2508,9 +2508,9 @@ const getBorderRadius = roundness => {
       large: 24
     },
     pill: {
-      small: 9999,
-      regular: 9999,
-      large: 9999
+      small: 32,
+      regular: 32,
+      large: 32
     }
   };
   return mapping[roundness] || {
@@ -3224,7 +3224,8 @@ const useSectionStyles$9 = createUseStyles(theme => ({
     width: '100%',
     height: 'calc(100% - 100px)',
     // objectFit: 'cover',
-    objectPosition: '50% 50%'
+    objectPosition: '50% 50%',
+    borderRadius: theme?.shape?.borderRadius?.regular
   },
   absoluteButtonsBannerRight: {
     display: 'flex',
@@ -4199,7 +4200,7 @@ const useSectionStyles$6 = createUseStyles(theme => {
       flexDirection: 'column'
     },
     subTitleHeading: {
-      color: theme?.palette?.font?.invertedDefault,
+      color: theme?.colors?.font2,
       marginBottom: '8px',
       fontSize: theme.typography.fontSize.subHead,
       wordBreak: 'break-word',
@@ -4208,14 +4209,14 @@ const useSectionStyles$6 = createUseStyles(theme => {
     heading: {
       margin: '0',
       fontSize: theme.typography.fontSize.h1,
-      color: theme?.palette?.font?.invertedDefault,
+      color: theme?.colors?.font2,
       wordBreak: ({
         wordBreakValue
       }) => wordBreakValue || 'break-word',
       lineHeight: '80px'
     },
     description: {
-      color: theme?.palette?.font?.invertedDefault,
+      color: theme?.colors?.font2,
       lineHeight: '32px',
       fontWeight: '400',
       wordBreak: 'break-word',
@@ -4490,7 +4491,8 @@ const useSectionStyles$5 = createUseStyles(theme => {
       width: '100%',
       position: 'relative',
       zIndex: '2',
-      objectFit: 'cover'
+      objectFit: 'cover',
+      borderRadius: theme?.shape?.borderRadius?.regular
     },
     textContainer: {
       marginLeft: '72px',
@@ -5593,7 +5595,7 @@ const useVideoTestimonialStyles = createUseStyles(theme => {
       display: 'flex',
       alignItems: 'center',
       // marginTop: '16px',
-      borderRadius: '8px'
+      borderRadius: theme?.shape?.borderRadius?.regular
     },
     iframeContainer: {
       width: '100%',
@@ -6394,7 +6396,7 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
       cursor: 'pointer'
     },
     singleCard: {
-      borderRadius: '24px',
+      borderRadius: theme?.shape?.borderRadius?.large,
       margin: '0 1px',
       width: 'calc(100% - 24px)',
       position: 'relative',
@@ -6417,7 +6419,7 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
       height: ({
         cardsCount
       }) => cardsCount === 1 ? '480px' : '100%',
-      borderRadius: '24px',
+      borderRadius: theme?.shape?.borderRadius?.large,
       objectFit: 'cover',
       objectPosition: 'center',
       position: 'absolute',
@@ -6460,7 +6462,7 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
         height: ({
           cardsCount
         }) => cardsCount === 1 ? '360px' : '',
-        borderRadius: '16px'
+        borderRadius: theme?.shape?.borderRadius?.regular
       },
       singleCard: {
         width: ({
@@ -6609,7 +6611,7 @@ const useFaqListStyles = createUseStyles(theme => ({
   },
   container: {
     boxShadow: theme?.shadows?.secondary,
-    borderRadius: '8px',
+    borderRadius: theme?.shape?.borderRadius?.regular,
     backgroundColor: theme?.colors?.white
   },
   basicCardContainer: {
@@ -8282,7 +8284,7 @@ const useTeamStyles = createUseStyles(theme => {
       height: '208px',
       top: '0',
       left: '0',
-      borderRadius: '12px 12px 0px 0px',
+      borderRadius: `${theme?.shape?.borderRadius?.regular}px ${theme?.shape?.borderRadius?.regular}px 0 0`,
       objectFit: 'cover'
     },
     teamDetailsContainer: {
@@ -11468,7 +11470,7 @@ const useAboutInstituteStyles = createUseStyles(theme => ({
   image: {
     width: '100%',
     height: '100%',
-    borderRadius: '16px',
+    borderRadius: theme?.shape?.borderRadius?.large,
     border: '1px solid var(--stroke, #D8E0F0)'
   },
   infoContainer: {
@@ -11476,7 +11478,7 @@ const useAboutInstituteStyles = createUseStyles(theme => ({
     gap: '16px',
     display: 'flex',
     flexDirection: 'column',
-    borderRadius: '16px',
+    borderRadius: theme?.shape?.borderRadius?.large,
     background: 'var(--Blue-Tertiary, #F4F9FF)',
     flex: 1
   },
@@ -11510,7 +11512,7 @@ const useAboutInstituteStyles = createUseStyles(theme => ({
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
-    borderRadius: '16px',
+    borderRadius: theme?.shape?.borderRadius?.large,
     background: 'var(--Blue-Tertiary, #F4F9FF)',
     flexGrow: 1
   },
@@ -11570,7 +11572,7 @@ const useAboutInstituteStyles = createUseStyles(theme => ({
       width: '150px'
     },
     image: {
-      borderRadius: '10px',
+      borderRadius: theme?.shape?.borderRadius?.regular,
       border: '1px solid var(--stroke, #D8E0F0)'
     },
     infoContainer: {
@@ -11792,7 +11794,6 @@ const useCounterSectionStyles = createUseStyles(theme => {
   return {
     section: {
       width: '100%',
-      borderRadius: theme.shape?.borderRadius?.regular || '12px',
       overflow: 'hidden',
       backgroundImage: ({
         backgroundImage
@@ -11857,9 +11858,6 @@ const useCounterSectionStyles = createUseStyles(theme => {
       }
     },
     '@media (max-width: 767px)': {
-      section: {
-        borderRadius: theme.shape?.borderRadius?.small || '8px'
-      },
       container: {
         padding: `${theme.spacing.padding.regular}px ${theme.spacing.padding.tiny}px`
       },