@evolve.ui/core-components 1.0.0 → 1.1.0

package/src/Icons/importedIcons.ts

@@ -0,0 +1,152 @@
+// Should be kept in sync with the icons in this folder
+export const phosphorIcons: string[] = [
+    'Archive',
+    'ArrowClockwise',
+    'ArrowDown',
+    'ArrowLeft',
+    'ArrowRight',
+    'ArrowSquareOut',
+    'ArrowSquareRight',
+    'ArrowsCounterClockwise',
+    'ArrowsLeftRight',
+    'ArrowsOutCardinal',
+    'ArrowUp',
+    'Bank',
+    'Bell',
+    'BookBookmark',
+    'BookmarksSimple',
+    'Broadcast',
+    'CalendarBlank',
+    'CalendarStar',
+    'Camera',
+    'CaretDown',
+    'CaretLeft',
+    'CaretRight',
+    'CaretUp',
+    'Certificate',
+    'ChartBar',
+    'Check',
+    'CheckCircle',
+    'CirclesFour',
+    'Clock',
+    'ClockCountdown',
+    'Close',
+    'CloudArrowUp',
+    'CloudWarning',
+    'Code',
+    'Compass',
+    'Confetti',
+    'Copy',
+    'CornersOut',
+    'CreditCard',
+    'CrownSimple',
+    'Crown',
+    'CurrencyCircleDollar',
+    'CurrencyDollarSimple',
+    'Desktop',
+    'Detective',
+    'DotOutline',
+    'DotsThreeOutline',
+    'DotsThreeOutlineVertical',
+    'DotsSixVertical',
+    'DownloadSimple',
+    'EnvelopeSimple',
+    'Eraser',
+    'Eye',
+    'EyeSlash',
+    'FileArchive',
+    'FileArrowDown',
+    'FileCsv',
+    'FilePdf',
+    'FileText',
+    'Files',
+    'Fire',
+    'Flag',
+    'FlagBannerFold',
+    'FloppyDisk',
+    'Gavel',
+    'Gauge',
+    'Gear',
+    'GlobeHemisphereWest',
+    'GridNine',
+    'HandbagSimple',
+    'HandCoins',
+    'Headset',
+    'HeartStraight',
+    'HourglassLow',
+    'House',
+    'Image',
+    'ImageSquare',
+    'ImagesSquare',
+    'Info',
+    'Lightning',
+    'Link',
+    'List',
+    'Lock',
+    'LockOpen',
+    'MagnifyingGlass',
+    'MapPin',
+    'MapPinSimpleArea',
+    'Medal',
+    'Megaphone',
+    'Minus',
+    'Money',
+    'Notches',
+    'NotePencil',
+    'Package',
+    'PaintBrush',
+    'Paperclip',
+    'PaperPlaneTilt',
+    'Pause',
+    'PencilLine',
+    'PencilRuler',
+    'PencilSimple',
+    'Phone',
+    'Play',
+    'Plus',
+    'PlusCircle',
+    'Printer',
+    'Question',
+    'Receipt',
+    'Rows',
+    'SealCheck',
+    'SelectionSlash',
+    'ShareNetwork',
+    'ShieldCheck',
+    'ShieldStar',
+    'ShoppingCart',
+    'ShuffleAngular',
+    'SidebarSimple',
+    'SlidersHorizontal',
+    'Smiley',
+    'Sparkle',
+    'SpinnerGap',
+    'StackPlus',
+    'Star',
+    'Storefront',
+    'Swap',
+    'Tag',
+    'ThumbsDown',
+    'ThumbsUp',
+    'Toolbox',
+    'Trash',
+    'TrendUp',
+    'Trophy',
+    'Truck',
+    'UploadSimple',
+    'User',
+    'Users',
+    'UsersThree',
+    'VideoCamera',
+    'Warning',
+    'WarningCircle',
+    'WifiHigh',
+    'XCircle',
+    'XLogo',
+    'YoutubeLogo',
+    'FacebookLogo',
+    'PinterestLogo',
+    'LinkedinLogo',
+    'InstagramLogo',
+    'GoogleLogo',
+];

package/src/Icons/index.ts

@@ -0,0 +1,149 @@
+export * from './generatedIcons/Archive';
+export * from './generatedIcons/ArrowClockwise';
+export * from './generatedIcons/ArrowDown';
+export * from './generatedIcons/ArrowLeft';
+export * from './generatedIcons/ArrowRight';
+export * from './generatedIcons/ArrowSquareOut';
+export * from './generatedIcons/ArrowSquareRight';
+export * from './generatedIcons/ArrowsCounterClockwise';
+export * from './generatedIcons/ArrowsLeftRight';
+export * from './generatedIcons/ArrowsOutCardinal';
+export * from './generatedIcons/ArrowUp';
+export * from './generatedIcons/Bank';
+export * from './generatedIcons/Bell';
+export * from './generatedIcons/BookBookmark';
+export * from './generatedIcons/BookmarksSimple';
+export * from './generatedIcons/Broadcast';
+export * from './generatedIcons/CalendarBlank';
+export * from './generatedIcons/CalendarStar';
+export * from './generatedIcons/Camera';
+export * from './generatedIcons/CaretDown';
+export * from './generatedIcons/CaretLeft';
+export * from './generatedIcons/CaretRight';
+export * from './generatedIcons/CaretUp';
+export * from './generatedIcons/Certificate';
+export * from './generatedIcons/ChartBar';
+export * from './generatedIcons/Check';
+export * from './generatedIcons/CheckCircle';
+export * from './generatedIcons/CirclesFour';
+export * from './generatedIcons/Clock';
+export * from './generatedIcons/ClockCountdown';
+export * from './generatedIcons/Close';
+export * from './generatedIcons/CloudArrowUp';
+export * from './generatedIcons/CloudWarning';
+export * from './generatedIcons/Code';
+export * from './generatedIcons/Compass';
+export * from './generatedIcons/Confetti';
+export * from './generatedIcons/Copy';
+export * from './generatedIcons/CornersOut';
+export * from './generatedIcons/CreditCard';
+export * from './generatedIcons/CrownSimple';
+export * from './generatedIcons/Crown';
+export * from './generatedIcons/CurrencyCircleDollar';
+export * from './generatedIcons/CurrencyDollarSimple';
+export * from './generatedIcons/Desktop';
+export * from './generatedIcons/Detective';
+export * from './generatedIcons/DotOutline';
+export * from './generatedIcons/DotsThreeOutline';
+export * from './generatedIcons/DotsThreeOutlineVertical';
+export * from './generatedIcons/DotsSixVertical';
+export * from './generatedIcons/DownloadSimple';
+export * from './generatedIcons/EnvelopeSimple';
+export * from './generatedIcons/Eraser';
+export * from './generatedIcons/Eye';
+export * from './generatedIcons/EyeSlash';
+export * from './generatedIcons/FileArchive';
+export * from './generatedIcons/FileArrowDown';
+export * from './generatedIcons/FileCsv';
+export * from './generatedIcons/FilePdf';
+export * from './generatedIcons/FileText';
+export * from './generatedIcons/Files';
+export * from './generatedIcons/Fire';
+export * from './generatedIcons/Flag';
+export * from './generatedIcons/FlagBannerFold';
+export * from './generatedIcons/FloppyDisk';
+export * from './generatedIcons/Gavel';
+export * from './generatedIcons/Gauge';
+export * from './generatedIcons/Gear';
+export * from './generatedIcons/GlobeHemisphereWest';
+export * from './generatedIcons/GridNine';
+export * from './generatedIcons/HandbagSimple';
+export * from './generatedIcons/HandCoins';
+export * from './generatedIcons/Headset';
+export * from './generatedIcons/HeartStraight';
+export * from './generatedIcons/HourglassLow';
+export * from './generatedIcons/House';
+export * from './generatedIcons/Image';
+export * from './generatedIcons/ImageSquare';
+export * from './generatedIcons/ImagesSquare';
+export * from './generatedIcons/Info';
+export * from './generatedIcons/Lightning';
+export * from './generatedIcons/Link';
+export * from './generatedIcons/List';
+export * from './generatedIcons/Lock';
+export * from './generatedIcons/LockOpen';
+export * from './generatedIcons/MagnifyingGlass';
+export * from './generatedIcons/MapPin';
+export * from './generatedIcons/MapPinSimpleArea';
+export * from './generatedIcons/Medal';
+export * from './generatedIcons/Megaphone';
+export * from './generatedIcons/Minus';
+export * from './generatedIcons/Money';
+export * from './generatedIcons/Notches';
+export * from './generatedIcons/NotePencil';
+export * from './generatedIcons/Package';
+export * from './generatedIcons/PaintBrush';
+export * from './generatedIcons/Paperclip';
+export * from './generatedIcons/PaperPlaneTilt';
+export * from './generatedIcons/Pause';
+export * from './generatedIcons/PencilLine';
+export * from './generatedIcons/PencilRuler';
+export * from './generatedIcons/PencilSimple';
+export * from './generatedIcons/Phone';
+export * from './generatedIcons/Play';
+export * from './generatedIcons/Plus';
+export * from './generatedIcons/PlusCircle';
+export * from './generatedIcons/Printer';
+export * from './generatedIcons/Question';
+export * from './generatedIcons/Receipt';
+export * from './generatedIcons/Rows';
+export * from './generatedIcons/SealCheck';
+export * from './generatedIcons/SelectionSlash';
+export * from './generatedIcons/ShareNetwork';
+export * from './generatedIcons/ShieldCheck';
+export * from './generatedIcons/ShieldStar';
+export * from './generatedIcons/ShoppingCart';
+export * from './generatedIcons/ShuffleAngular';
+export * from './generatedIcons/SidebarSimple';
+export * from './generatedIcons/SlidersHorizontal';
+export * from './generatedIcons/Smiley';
+export * from './generatedIcons/Sparkle';
+export * from './generatedIcons/SpinnerGap';
+export * from './generatedIcons/StackPlus';
+export * from './generatedIcons/Star';
+export * from './generatedIcons/Storefront';
+export * from './generatedIcons/Swap';
+export * from './generatedIcons/Tag';
+export * from './generatedIcons/ThumbsDown';
+export * from './generatedIcons/ThumbsUp';
+export * from './generatedIcons/Toolbox';
+export * from './generatedIcons/Trash';
+export * from './generatedIcons/TrendUp';
+export * from './generatedIcons/Trophy';
+export * from './generatedIcons/Truck';
+export * from './generatedIcons/UploadSimple';
+export * from './generatedIcons/User';
+export * from './generatedIcons/Users';
+export * from './generatedIcons/UsersThree';
+export * from './generatedIcons/VideoCamera';
+export * from './generatedIcons/Warning';
+export * from './generatedIcons/WarningCircle';
+export * from './generatedIcons/WifiHigh';
+export * from './generatedIcons/XCircle';
+export * from './generatedIcons/XLogo';
+export * from './generatedIcons/YoutubeLogo';
+export * from './generatedIcons/FacebookLogo';
+export * from './generatedIcons/PinterestLogo';
+export * from './generatedIcons/LinkedinLogo';
+export * from './generatedIcons/InstagramLogo';
+export * from './generatedIcons/GoogleLogo';

package/src/Icons/socialIcons/appleSocialIcon.tsx

@@ -0,0 +1,50 @@
+// No colors are available for this icon
+export const AppleSocialIconMedium = ({ className }: { className?: string }) => (
+    <svg
+        className={className}
+        fill="none"
+        height="30"
+        viewBox="0 0 30 30"
+        width="30"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M15.2969 8.53846C16.4063 8.53846 17.7969 7.8061 18.625 6.82962C19.375 5.94469 19.9219 4.70884 19.9219 3.47298C19.9219 3.30515 19.9063 3.13732 19.875 3C18.6406 3.04577 17.1563 3.80865 16.2656 4.8309C15.5625 5.60903 14.9219 6.82963 14.9219 8.08074C14.9219 8.26383 14.9531 8.44692 14.9688 8.50795C15.0469 8.5232 15.1719 8.53846 15.2969 8.53846ZM11.3906 27C12.9062 27 13.5781 26.0083 15.4688 26.0083C17.3906 26.0083 17.8125 26.9695 19.5 26.9695C21.1562 26.9695 22.2656 25.4743 23.3125 24.0095C24.4844 22.3312 24.9688 20.6834 25 20.6071C24.8906 20.5766 21.7188 19.3102 21.7188 15.7552C21.7188 12.6732 24.2188 11.2848 24.3594 11.178C22.7031 8.85887 20.1875 8.79784 19.5 8.79784C17.6406 8.79784 16.125 9.89638 15.1719 9.89638C14.1406 9.89638 12.7812 8.85887 11.1719 8.85887C8.10937 8.85887 5 11.3306 5 15.9994C5 18.8983 6.15625 21.965 7.57812 23.9485C8.79687 25.6268 9.85937 27 11.3906 27Z"
+            fill="black"
+        />
+    </svg>
+);
+
+// No colors are available for this icon
+export const AppleSocialIconSmall = ({ className }: { className?: string }) => (
+    <svg
+        className={className}
+        fill="none"
+        height="20"
+        viewBox="0 0 20 20"
+        width="20"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M10.2375 4.61538C11.125 4.61538 12.2375 4.00509 12.9 3.19135C13.5 2.45391 13.9375 1.42403 13.9375 0.394152C13.9375 0.254292 13.925 0.114431 13.9 0C12.9125 0.0381437 11.725 0.673872 11.0125 1.52575C10.45 2.17419 9.9375 3.19135 9.9375 4.23395C9.9375 4.38652 9.9625 4.5391 9.975 4.58996C10.0375 4.60267 10.1375 4.61538 10.2375 4.61538ZM7.1125 20C8.325 20 8.8625 19.1736 10.375 19.1736C11.9125 19.1736 12.25 19.9746 13.6 19.9746C14.925 19.9746 15.8125 18.7285 16.65 17.5079C17.5875 16.1093 17.975 14.7362 18 14.6726C17.9125 14.6472 15.375 13.5919 15.375 10.6294C15.375 8.06103 17.375 6.90401 17.4875 6.815C16.1625 4.88239 14.15 4.83153 13.6 4.83153C12.1125 4.83153 10.9 5.74698 10.1375 5.74698C9.3125 5.74698 8.225 4.88239 6.9375 4.88239C4.4875 4.88239 2 6.94215 2 10.8328C2 13.2486 2.925 15.8042 4.0625 17.4571C5.0375 18.8557 5.8875 20 7.1125 20Z"
+            fill="black"
+        />
+    </svg>
+);
+
+// No colors are available for this icon
+export const AppleSocialIconExtraSmall = ({ className }: { className?: string }) => (
+    <svg
+        className={className}
+        fill="none"
+        height="14"
+        viewBox="0 0 14 14"
+        width="14"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M7.14844 3C7.70313 3 8.39844 2.60331 8.8125 2.07438C9.1875 1.59504 9.46094 0.92562 9.46094 0.256198C9.46094 0.165289 9.45313 0.0743801 9.4375 0C8.82031 0.0247934 8.07813 0.438017 7.63281 0.991736C7.28125 1.41322 6.96094 2.07438 6.96094 2.75207C6.96094 2.85124 6.97656 2.95041 6.98438 2.98347C7.02344 2.99174 7.08594 3 7.14844 3ZM5.19531 13C5.95313 13 6.28906 12.4628 7.23438 12.4628C8.19531 12.4628 8.40625 12.9835 9.25 12.9835C10.0781 12.9835 10.6328 12.1736 11.1562 11.3802C11.7422 10.4711 11.9844 9.57851 12 9.53719C11.9453 9.52066 10.3594 8.83471 10.3594 6.90909C10.3594 5.23967 11.6094 4.4876 11.6797 4.42975C10.8516 3.17355 9.59375 3.1405 9.25 3.1405C8.32031 3.1405 7.5625 3.73554 7.08594 3.73554C6.57031 3.73554 5.89063 3.17355 5.08594 3.17355C3.55469 3.17355 2 4.5124 2 7.04132C2 8.61157 2.57813 10.2727 3.28906 11.3471C3.89844 12.2562 4.42969 13 5.19531 13Z"
+            fill="black"
+        />
+    </svg>
+);

package/src/Icons/socialIcons/facebookSocialIcon.tsx

@@ -0,0 +1,41 @@
+// No colors are available for this icon
+export const FacebookSocialIconMedium = ({ className }: { className?: string }) => (
+    <svg
+        className={className}
+        fill="none"
+        height="30"
+        viewBox="0 0 30 30"
+        width="30"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M30 15C30 6.71573 23.2843 0 15 0C6.71573 0 0 6.71573 0 15C0 22.4869 5.48528 28.6925 12.6562 29.8178V19.3359H8.84766V15H12.6562V11.6953C12.6562 7.93594 14.8957 5.85938 18.3219 5.85938C19.9631 5.85938 21.6797 6.15234 21.6797 6.15234V9.84375H19.7883C17.925 9.84375 17.3438 11 17.3438 12.1875V15H21.5039L20.8389 19.3359H17.3438V29.8178C24.5147 28.6925 30 22.4869 30 15Z"
+            fill="#0866FF"
+        />
+        <path
+            d="M20.8389 19.3359L21.5039 15H17.3438V12.1875C17.3438 11 17.925 9.84375 19.7883 9.84375H21.6797V6.15234C21.6797 6.15234 19.9631 5.85938 18.3219 5.85938C14.8957 5.85938 12.6562 7.93594 12.6562 11.6953V15H8.84766V19.3359H12.6562V29.8178C13.4199 29.9393 14.2027 30 15 30C15.7973 30 16.5801 29.9393 17.3438 29.8178V19.3359H20.8389Z"
+            fill="white"
+        />
+    </svg>
+);
+
+// No colors are available for this icon
+export const FacebookSocialIconSmall = ({ className }: { className?: string }) => (
+    <svg
+        className={className}
+        fill="none"
+        height="20"
+        viewBox="0 0 20 20"
+        width="20"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M20 10C20 4.47715 15.5229 0 10 0C4.47715 0 0 4.47715 0 10C0 14.9913 3.65685 19.1283 8.4375 19.8785V12.8906H5.89844V10H8.4375V7.79688C8.4375 5.29063 9.93047 3.90625 12.2146 3.90625C13.3087 3.90625 14.4531 4.10156 14.4531 4.10156V6.5625H13.1922C11.95 6.5625 11.5625 7.33333 11.5625 8.125V10H14.3359L13.8926 12.8906H11.5625V19.8785C16.3432 19.1283 20 14.9913 20 10Z"
+            fill="#0866FF"
+        />
+        <path
+            d="M13.8926 12.8906L14.3359 10H11.5625V8.125C11.5625 7.33333 11.95 6.5625 13.1922 6.5625H14.4531V4.10156C14.4531 4.10156 13.3087 3.90625 12.2146 3.90625C9.93047 3.90625 8.4375 5.29063 8.4375 7.79688V10H5.89844V12.8906H8.4375V19.8785C8.94661 19.9595 9.46847 20 10 20C10.5315 20 11.0534 19.9595 11.5625 19.8785V12.8906H13.8926Z"
+            fill="white"
+        />
+    </svg>
+);

package/src/Icons/socialIcons/googleSocialIcon.tsx

@@ -0,0 +1,134 @@
+// No colors are available for this icon
+export const GoogleSocialIconMedium = ({ className }: { className?: string }) => (
+    <svg
+        className={className}
+        fill="none"
+        height="30"
+        viewBox="0 0 30 30"
+        width="30"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <mask
+            height="30"
+            id="mask0_284_27"
+            maskUnits="userSpaceOnUse"
+            style={{ maskType: 'luminance' }}
+            width="30"
+            x="0"
+            y="0"
+        >
+            <path
+                d="M30 0H0V30H30V0Z"
+                fill="white"
+            />
+        </mask>
+        <g mask="url(#mask0_284_27)">
+            <path
+                d="M29.4 15.3407C29.4 14.2771 29.3046 13.2544 29.1273 12.2725H15V18.0748H23.0727C22.725 19.9498 21.6683 21.5384 20.0796 22.6021V26.3657H24.9273C27.7637 23.7544 29.4 19.9088 29.4 15.3407Z"
+                fill="#4285F4"
+            />
+            <path
+                d="M15 29.9996C19.05 29.9996 22.4454 28.6564 24.9271 26.3656L20.0794 22.6019C18.7363 23.5019 17.0181 24.0337 15 24.0337C11.0931 24.0337 7.78635 21.395 6.60675 17.8496H1.5954V21.736C4.06365 26.6383 9.13635 29.9996 15 29.9996Z"
+                fill="#34A853"
+            />
+            <path
+                d="M6.60675 17.85C6.30675 16.95 6.13635 15.9887 6.13635 15C6.13635 14.0114 6.30675 13.05 6.60675 12.15V8.26367H1.5954C0.579599 10.2887 0 12.5796 0 15C0 17.4204 0.579599 19.7114 1.5954 21.7364L6.60675 17.85Z"
+                fill="#FBBC04"
+            />
+            <path
+                d="M15 5.96595C17.2021 5.96595 19.1794 6.7227 20.734 8.20905L25.0364 3.90675C22.4387 1.48635 19.0431 0 15 0C9.13635 0 4.06365 3.36135 1.5954 8.26365L6.60675 12.15C7.78635 8.6046 11.0931 5.96595 15 5.96595Z"
+                fill="#E94235"
+            />
+        </g>
+    </svg>
+);
+
+// No colors are available for this icon
+export const GoogleSocialIconSmall = ({ className }: { className?: string }) => (
+    <svg
+        className={className}
+        fill="none"
+        height="20"
+        viewBox="0 0 20 20"
+        width="20"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <mask
+            height="20"
+            id="mask0_284_29"
+            maskUnits="userSpaceOnUse"
+            style={{ maskType: 'luminance' }}
+            width="20"
+            x="0"
+            y="0"
+        >
+            <path
+                d="M20 0H0V20H20V0Z"
+                fill="white"
+            />
+        </mask>
+        <g mask="url(#mask0_284_29)">
+            <path
+                d="M19.6 10.2271C19.6 9.51804 19.5364 8.83624 19.4182 8.18164H10V12.0498H15.3818C15.15 13.2998 14.4455 14.3589 13.3864 15.068V17.5771H16.6182C18.5091 15.8362 19.6 13.2725 19.6 10.2271Z"
+                fill="#4285F4"
+            />
+            <path
+                d="M10 19.9999C12.7 19.9999 14.9636 19.1044 16.6181 17.5772L13.3863 15.0681C12.4909 15.6681 11.3454 16.0226 10 16.0226C7.3954 16.0226 5.1909 14.2635 4.4045 11.8999H1.0636V14.4908C2.7091 17.759 6.0909 19.9999 10 19.9999Z"
+                fill="#34A853"
+            />
+            <path
+                d="M4.4045 11.9002C4.2045 11.3002 4.0909 10.6593 4.0909 10.0002C4.0909 9.34108 4.2045 8.70018 4.4045 8.10018V5.50928H1.0636C0.3864 6.85928 0 8.38658 0 10.0002C0 11.6138 0.3864 13.1411 1.0636 14.4911L4.4045 11.9002Z"
+                fill="#FBBC04"
+            />
+            <path
+                d="M10 3.9773C11.4681 3.9773 12.7863 4.4818 13.8227 5.4727L16.6909 2.6045C14.9591 0.9909 12.6954 0 10 0C6.0909 0 2.7091 2.2409 1.0636 5.5091L4.4045 8.1C5.1909 5.7364 7.3954 3.9773 10 3.9773Z"
+                fill="#E94235"
+            />
+        </g>
+    </svg>
+);
+
+// No colors are available for this icon
+export const GoogleSocialIconExtraSmall = ({ className }: { className?: string }) => (
+    <svg
+        className={className}
+        fill="none"
+        height="14"
+        viewBox="0 0 14 14"
+        width="14"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <mask
+            height="14"
+            id="mask0_284_28"
+            maskUnits="userSpaceOnUse"
+            style={{ maskType: 'luminance' }}
+            width="14"
+            x="0"
+            y="0"
+        >
+            <path
+                d="M14 0H0V14H14V0Z"
+                fill="white"
+            />
+        </mask>
+        <g mask="url(#mask0_284_28)">
+            <path
+                d="M13.72 7.1589C13.72 6.66253 13.6755 6.18527 13.5927 5.72705H7V8.43479H10.7673C10.605 9.30979 10.1119 10.0512 9.37048 10.5475V12.3039H11.6327C12.9564 11.0853 13.72 9.29068 13.72 7.1589Z"
+                fill="#4285F4"
+            />
+            <path
+                d="M6.99999 14.0001C8.88999 14.0001 10.4745 13.3732 11.6327 12.3042L9.3704 10.5478C8.74362 10.9678 7.94177 11.216 6.99999 11.216C5.17677 11.216 3.63362 9.9846 3.08314 8.33008H0.744507V10.1437C1.89636 12.4314 4.26362 14.0001 6.99999 14.0001Z"
+                fill="#34A853"
+            />
+            <path
+                d="M3.08315 8.33007C2.94315 7.91008 2.86363 7.46145 2.86363 7.00008C2.86363 6.53871 2.94315 6.09008 3.08315 5.67008V3.85645H0.74452C0.27048 4.80145 0 5.87056 0 7.00008C0 8.1296 0.27048 9.19871 0.74452 10.1437L3.08315 8.33007Z"
+                fill="#FBBC04"
+            />
+            <path
+                d="M6.99999 2.78411C8.02766 2.78411 8.9504 3.13726 9.67588 3.83089L11.6836 1.82315C10.4714 0.69363 8.88677 0 6.99999 0C4.26362 0 1.89636 1.56863 0.744507 3.85637L3.08314 5.67C3.63362 4.01548 5.17677 2.78411 6.99999 2.78411Z"
+                fill="#E94235"
+            />
+        </g>
+    </svg>
+);

package/src/ImageCluster/ImageCluster.tsx

@@ -0,0 +1,125 @@
+import { cn } from '@evolve.ui/theme-system';
+import { useCallback, useMemo, useState } from 'react';
+
+import { ImageSquare } from '../Icons';
+
+const MAX_IMAGES = 3;
+
+type Props = {
+    /**
+     * The images to display in the cluster. Only the first three images are used; any additional
+     * images are silently ignored.
+     *
+     * When three images are provided, the slot order is:
+     * - `images[0]` → left card (tilted left, rendered behind the center)
+     * - `images[1]` → center card (front-most, largest)
+     * - `images[2]` → right card (tilted right, rendered behind the center)
+     */
+    images: {
+        alt: string;
+        url: string;
+    }[];
+    size: 'sm' | 'md';
+};
+
+export const ImageCluster = ({ images, size }: Props) => {
+    const [erroredIndexes, setErroredIndexes] = useState<Set<number>>(new Set());
+
+    const imagesToUse = useMemo(() => {
+        if (images.length > MAX_IMAGES) {
+            return images.slice(0, MAX_IMAGES);
+        }
+        return images;
+    }, [images]);
+
+    const handleImageError = useCallback((index: number) => {
+        setErroredIndexes((prev) => new Set(prev).add(index));
+    }, []);
+
+    const numberOfImages = imagesToUse.length;
+
+    return (
+        <div className="relative flex h-[268px] justify-center smMax:h-[173px]">
+            {imagesToUse.map((image, index) => (
+                <div
+                    className={cn(
+                        // BASE IMAGE CONTAINER CLASSES
+                        'absolute flex h-[180px] w-[180px] items-center justify-center overflow-hidden rounded-md border-4 border-border-inverse shadow-02',
+                        erroredIndexes.has(index) ? 'bg-background-subdued' : 'bg-surface-50',
+                        // POSITIONING WITH 3 IMAGES
+                        // IMAGE 1
+                        {
+                            'top-[58px] -translate-x-[160px] -rotate-[15deg] smMax:top-[38px] smMax:h-[128px] smMax:w-[128px] smMax:-translate-x-[120px] smMax:-rotate-[15deg]':
+                                index === 0 && numberOfImages === 3,
+                        },
+                        // IMAGE 1 SMALL
+                        {
+                            'top-[38px] h-[128px] w-[128px] -translate-x-[120px] -rotate-[15deg]':
+                                numberOfImages === 3 && index === 0 && size === 'sm',
+                        },
+
+                        // IMAGE 2
+                        {
+                            'z-[1] h-[256px] w-[256px] smMax:h-[173px] smMax:w-[173px]':
+                                index === 1 && numberOfImages === 3,
+                        },
+                        // IMAGE 2 SMALL
+                        {
+                            'z-[1] h-[173px] w-[173px]': index === 1 && numberOfImages === 3 && size === 'sm',
+                        },
+                        // IMAGE 3
+                        {
+                            'top-[58px] translate-x-[160px] rotate-[15deg] smMax:top-[38px] smMax:h-[128px] smMax:w-[128px] smMax:translate-x-[120px] smMax:rotate-[15deg]':
+                                index === 2 && numberOfImages === 3,
+                        },
+                        // SMALL
+                        {
+                            'top-[38px] h-[128px] w-[128px] translate-x-[120px] rotate-[15deg]':
+                                index === 2 && numberOfImages === 3 && size === 'sm',
+                        },
+                        // POSITIONING WITH 2 IMAGES
+                        {
+                            'relative h-[256px] w-[256px] smMax:h-[173px] smMax:w-[173px]':
+                                numberOfImages === 2 || numberOfImages === 1,
+                        },
+                        {
+                            // MOBILE
+                            'smMax:translate-x-[10px] smMax:-rotate-[15deg]': index === 0 && numberOfImages === 2,
+                            // DESKTOP
+                            'translate-x-[20px] -rotate-[15deg]': index === 0 && numberOfImages === 2,
+                        },
+                        {
+                            // DESKTOP
+                            '-translate-x-[20px] rotate-[15deg]': index === 1 && numberOfImages === 2,
+                            // MOBILE
+                            'smMax:-translate-x-[10px] smMax:rotate-[15deg]': index === 1 && numberOfImages === 2,
+                        }
+                        // With 1 image, we just keep the image in the center
+                    )}
+                    key={image.url}
+                >
+                    {erroredIndexes.has(index) ? (
+                        <ImageSquare
+                            $withoutAriaLabel
+                            aria-label={image.alt}
+                            className="m-auto"
+                            color="primary"
+                            size="lg"
+                            style="duotone"
+                        />
+                    ) : (
+                        <img
+                            alt={image.alt}
+                            className="h-full w-full object-cover object-top"
+                            height={256}
+                            loading="lazy"
+                            onError={() => handleImageError(index)}
+                            src={image.url}
+                            width={256}
+                        />
+                    )}
+                </div>
+            ))}
+        </div>
+    );
+};