@myelmut/design-system 0.1.76 → 0.1.78

package/dist/types/index.d.ts

@@ -12,6 +12,8 @@ import { ReactComponent as DoubleArrowIcon } from './double-arrow.svg';
 import { ReactComponent as FacebookIcon } from './Facebook.svg';
 import { ReactComponent as FiltersIcon } from './filters.svg';
 import { ForwardRefExoticComponent } from 'react';
+import { ReactComponent as FreshHeroShapeIcon } from './fresh-hero-shape.svg';
+import { ReactComponent as FreshHeroShapeSmallIcon } from './fresh-hero-shape-mobile.svg';
 import { ReactComponent as HatCookIcon } from './hat-cook.svg';
 import { ReactComponent as HomeHeroShape } from './home-hero-shape.svg';
 import { ReactComponent as HomeHeroShapeMobile } from './home-hero-shape-mobile.svg';
@@ -354,6 +356,10 @@ declare interface FrequencySelectorCardProps {
     imageAlt: string;
 }
 
+export { FreshHeroShapeIcon }
+
+export { FreshHeroShapeSmallIcon }
+
 export declare const H1: default_2.ForwardRefExoticComponent<Omit<TitleProps, "variant"> & default_2.RefAttributes<HTMLHeadingElement>>;
 
 export declare const H2: default_2.ForwardRefExoticComponent<Omit<TitleProps, "variant"> & default_2.RefAttributes<HTMLHeadingElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myelmut/design-system",
-  "version": "0.1.76",
+  "version": "0.1.78",
   "description": "Design system for Elmut project",
   "repository": {
     "type": "git",

package/src/components/Cards/UpCard/UpCard.tsx

@@ -17,7 +17,7 @@ export interface UpCardProps {
 export const UpCard = ({ title1, description1, title2, description2, step, illustration, className, illustrationClassName, align = 'bottom' }: UpCardProps) => {
     return (
         <div className={clsx('flex max-md:flex-col max-md:gap-4', align === 'top' ? 'items-start' : 'md:items-end', className)}>
-            <div className="bg-lavender-blue-light text-claret-violet-dark flex w-63 -rotate-2 flex-col gap-4 p-4 max-md:-translate-x-10 md:w-87.5 md:px-11 md:py-8">
+            <div className={clsx('bg-lavender-blue-light text-claret-violet-dark flex w-63 -rotate-2 flex-col gap-4 p-4 max-md:-translate-x-10 md:w-87.5 md:px-11 md:py-8', align === 'bottom' && 'md:mb-18')}>
                 <ParagraphTitle size="heading-xl" className="hidden md:block">
                     {step}
                 </ParagraphTitle>
@@ -31,7 +31,7 @@ export const UpCard = ({ title1, description1, title2, description2, step, illus
                     {description1}
                 </Text>
             </div>
-            <div className={clsx('bg-pink-oyster-light text-claret-violet-dark relative flex w-63.5 -rotate-2 flex-col gap-2 p-6 md:z-1 md:w-85.5 md:-translate-x-8 md:rotate-2 md:px-11 md:py-8', align === 'top' ? 'md:translate-y-26' : 'md:translate-y-18')}>
+            <div className={clsx('bg-pink-oyster-light text-claret-violet-dark relative flex w-63.5 -rotate-2 flex-col gap-2 p-6 md:z-1 md:w-85.5 md:-translate-x-8 md:rotate-2 md:px-11 md:py-8', align === 'top' && 'md:mt-26')}>
                 <div className={clsx('relative w-11.5 shrink-0 md:w-18', illustrationClassName)}>
                     <img src={illustration} alt={title2} className="w-full" />
                 </div>
@@ -39,7 +39,7 @@ export const UpCard = ({ title1, description1, title2, description2, step, illus
                     {title2}
                 </ParagraphTitle>
                 <ParagraphTitle size="heading-lg" className="block max-md:not-italic md:hidden">
-                    {step}.&nbsp;{title2}
+                    {title2}
                 </ParagraphTitle>
                 <Text size="md" className="whitespace-pre-line max-md:not-italic">
                     {description2}

package/src/components/Navigation/WizardNavbar/WizardNavbar.tsx

@@ -14,8 +14,8 @@ export type WizardNavbarProps = {
 };
 
 const variantStyles = {
-    default: 'bg-beige-light text-claret-violet-dark pt-20 md:pt-9.5 pb-6',
-    form: 'bg-beige-light text-claret-violet-dark pt-5',
+    default: 'text-claret-violet-dark pt-20 md:pt-9.5 pb-6',
+    form: 'text-claret-violet-dark pt-5',
     payment: 'bg-claret-violet-dark text-beige-light pt-5',
 };
 

package/src/components/SVG/fresh-hero-shape-mobile.svg

@@ -0,0 +1,3 @@
+<svg width="320" height="500" viewBox="0 0 320 500" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M320 500C320 453.019 320 33.8718 320 33.8718C276.107 6.12228 243.407 -6.69599e-06 155.79 -1.43557e-05C68.1724 -2.20155e-05 17.2193 22.9514 -0.00026398 28.7754C-0.00026398 28.7754 -5.73964e-05 458.377 -6.10352e-05 500L320 500Z" fill="#EEAEB4"/>
+</svg>

package/src/components/SVG/fresh-hero-shape.svg

@@ -0,0 +1,3 @@
+<svg width="1512" height="906" viewBox="0 0 1512 906" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1511.01 905.499C1511.01 684.266 1511.01 159.5 1511.01 159.5C1303.69 28.8298 1149.23 2.94069e-05 735.371 -6.77369e-06C321.513 -4.29543e-05 80.8367 108.075 -0.499566 135.5C-0.499566 135.5 -0.499983 709.499 -0.5 905.499L1511.01 905.499Z" fill="#EEAEB4"/>
+</svg>

package/src/components/SVG/index.ts

@@ -12,6 +12,8 @@ import { ReactComponent as DollarRoundedIcon } from './dollar-rounded.svg';
 import { ReactComponent as DoubleArrowIcon } from './double-arrow.svg';
 import { ReactComponent as FacebookIcon } from './Facebook.svg';
 import { ReactComponent as FiltersIcon } from './filters.svg';
+import { ReactComponent as FreshHeroShapeSmallIcon } from './fresh-hero-shape-mobile.svg';
+import { ReactComponent as FreshHeroShapeIcon } from './fresh-hero-shape.svg';
 import { ReactComponent as HatCookIcon } from './hat-cook.svg';
 import { ReactComponent as HomeHeroShapeMobile } from './home-hero-shape-mobile.svg';
 import { ReactComponent as HomeHeroShapeSmall } from './home-hero-shape-small.svg';
@@ -37,6 +39,8 @@ import { ReactComponent as TrustpilotIcon } from './trustpilot.svg';
 import { ReactComponent as UnmuteIcon } from './unmute.svg';
 
 export {
+    FreshHeroShapeIcon,
+    FreshHeroShapeSmallIcon,
     FacebookIcon,
     InstagramIcon,
     LinkedinIcon,