newskit 0.0.0-e00e1f6 → 0.0.0-e02a96ba5

package/src/icons/outlined/custom/icon-outlined-forward-25.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {Svg} from '../../svg';
+import {customToNewsKitIcon} from '../../custom-to-newskit-icon';
+
+export const IconOutlinedForward25 = customToNewsKitIcon(
+  'IconOutlinedForward25',
+  props => (
+    <Svg {...props} viewBox="0 0 24 24">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8.15595 3C7.63482 3 7.16 3.08308 6.7416 3.24579C6.32602 3.4074 5.9673 3.64003 5.68392 3.93095C5.39576 4.21938 5.17714 4.55539 5.02923 4.94451C4.8894 5.30974 4.82051 5.69584 4.81287 6.10072L4.80872 6.32093H6.78367L6.79042 6.11177C6.79717 5.90239 6.82398 5.71234 6.87511 5.53926C6.93126 5.35892 7.01799 5.20381 7.1232 5.07328C7.22837 4.95134 7.36579 4.85418 7.536 4.77853C7.69698 4.70698 7.90391 4.66717 8.1415 4.66717C8.34252 4.66717 8.50699 4.69961 8.64028 4.75757C8.77595 4.81655 8.89508 4.90558 8.991 5.01348C9.0833 5.11733 9.15716 5.2491 9.21507 5.40887C9.26627 5.57 9.29749 5.74149 9.29749 5.92426C9.29749 6.06141 9.27907 6.19515 9.24612 6.34121C9.20739 6.48191 9.14931 6.63024 9.05784 6.79358C8.96185 6.96499 8.83831 7.15714 8.6732 7.36353L8.67048 7.36708C8.50841 7.57847 8.30381 7.82539 8.04957 8.09375L4.97893 11.4442V12.8204H11.6435V11.1533H7.6272L9.35236 9.30143C9.63243 9.01383 9.88195 8.7201 10.114 8.43728C10.3522 8.14701 10.5535 7.85623 10.7253 7.56504C10.8983 7.27159 11.035 6.97612 11.1341 6.67866C11.2357 6.3739 11.2824 6.06187 11.2824 5.75816C11.2824 5.35085 11.2132 4.96875 11.0713 4.62196C10.9296 4.27553 10.7234 3.9808 10.4523 3.74129C10.1795 3.49295 9.84127 3.31434 9.46895 3.18517L9.46277 3.18323C9.07002 3.06002 8.63607 3 8.15595 3ZM13.6857 8.03235L14.2633 3.01815H19.7859V4.65874H15.8577L15.6035 6.78458C15.6439 6.75766 15.6921 6.73858 15.7436 6.7182C15.7805 6.7036 15.8191 6.68834 15.8577 6.66904C15.9501 6.62283 16.0657 6.57662 16.2043 6.55351C16.2736 6.54196 16.3429 6.52463 16.4123 6.5073L16.4123 6.5073C16.4816 6.48997 16.5509 6.47264 16.6202 6.46108C16.7589 6.43798 16.9206 6.41487 17.0824 6.41487C17.5676 6.41487 17.9835 6.48419 18.3533 6.64594C18.723 6.80769 19.0465 7.01565 19.3006 7.29293C19.5548 7.57021 19.7628 7.91682 19.8783 8.33274C19.9938 8.74867 20.0863 9.2108 20.0863 9.71916C20.0863 10.1582 20.0169 10.5741 19.8783 10.9669C19.7397 11.3597 19.5317 11.7063 19.2544 12.0067C18.9771 12.3071 18.6305 12.5613 18.2146 12.7231C17.7987 12.8848 17.3134 13.0003 16.7358 13.0003C16.3198 13.0003 15.9039 12.931 15.5111 12.8155C15.1183 12.6999 14.7717 12.492 14.4482 12.2609C14.1247 12.0298 13.8936 11.7063 13.7088 11.3597C13.5239 11.0131 13.4084 10.5972 13.4084 10.1351H15.3494C15.3956 10.551 15.5342 10.8745 15.7884 11.0825C16.0426 11.2904 16.3661 11.4291 16.7589 11.4291C17.0131 11.4291 17.221 11.3829 17.3828 11.2904C17.5445 11.198 17.7063 11.0594 17.7987 10.8976C17.8911 10.7359 17.9835 10.551 18.0529 10.3199C18.1222 10.0889 18.1222 9.8578 18.1222 9.60362C18.1222 9.34944 18.0991 9.11838 18.0298 8.88731C17.9604 8.65624 17.868 8.49449 17.7294 8.33274C17.5907 8.17099 17.429 8.05546 17.2441 7.98614C17.0593 7.91682 16.8051 7.8706 16.5509 7.8706C16.3661 7.8706 16.2043 7.89371 16.0888 7.91682C15.9732 7.93992 15.8346 7.98614 15.7422 8.03235C15.696 8.05546 15.6498 8.08434 15.6035 8.11322L15.6035 8.11323C15.5573 8.14211 15.5111 8.17099 15.4649 8.1941C15.3951 8.22899 15.3385 8.29023 15.2851 8.34797C15.2678 8.36671 15.2508 8.38508 15.2338 8.40206L13.6857 8.03235ZM12.6287 21L17.0001 18L12.6287 15V21ZM8 21L12.3714 18L8 15V21Z"
+      />
+    </Svg>
+  ),
+);

package/src/icons/outlined/custom/icon-outlined-forward-30.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {Svg} from '../../svg';
+import {customToNewsKitIcon} from '../../custom-to-newskit-icon';
+
+export const IconOutlinedForward30 = customToNewsKitIcon(
+  'IconOutlinedForward30',
+  props => (
+    <Svg {...props} viewBox="0 0 24 24">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.63899 7.13242H6.63003V8.61644H7.68383C7.93047 8.61644 8.13226 8.6621 8.33405 8.70776C8.53584 8.75343 8.69279 8.84475 8.82732 8.9589C8.96185 9.07306 9.07396 9.23288 9.14122 9.41553C9.20849 9.59817 9.25333 9.82648 9.25333 10.0776C9.25333 10.2831 9.23091 10.4658 9.16364 10.6256C9.09638 10.7854 8.98427 10.9224 8.87216 11.0365C8.76006 11.1507 8.60311 11.242 8.42374 11.3105C8.24437 11.379 8.04257 11.4018 7.81836 11.4018C7.61657 11.4018 7.4372 11.3562 7.25783 11.3105C7.07846 11.2648 6.94393 11.1735 6.8094 11.0594C6.67487 10.9452 6.58519 10.8311 6.51792 10.6712C6.45066 10.5114 6.40582 10.3516 6.40582 10.169H4.5C4.5 10.6484 4.58969 11.0822 4.76906 11.4247C4.94843 11.7671 5.21748 12.0411 5.50896 12.2922C5.80044 12.5434 6.15918 12.7032 6.54034 12.8174C6.92151 12.9315 7.32509 12.9772 7.72868 12.9772C8.22195 12.9772 8.64795 12.9087 9.07396 12.7945C9.49996 12.6804 9.83628 12.4749 10.1502 12.2466C10.4641 12.0183 10.6883 11.6986 10.8677 11.3562C11.047 11.0137 11.1367 10.6027 11.1367 10.1461C11.1367 9.62101 11.0022 9.16438 10.7331 8.75343C10.4641 8.34247 10.0605 8.06849 9.52238 7.86301C9.76902 7.74886 9.97081 7.6347 10.1502 7.47489C10.3296 7.31507 10.4641 7.15525 10.5986 6.9726C10.7331 6.78995 10.8228 6.60731 10.8901 6.40183C10.9574 6.19635 10.9798 5.99087 10.9798 5.78539C10.9798 5.32877 10.8901 4.91781 10.7331 4.57534C10.5762 4.23288 10.352 3.93607 10.0605 3.70776C9.76902 3.47945 9.4327 3.2968 9.02911 3.18265C8.62553 3.06849 8.1771 3 7.70625 3C7.28025 3 6.87666 3.06849 6.4955 3.18265C6.11434 3.2968 5.80044 3.47945 5.50896 3.70776C5.21748 3.93607 4.99327 4.23288 4.83632 4.55251C4.67937 4.87215 4.58969 5.23744 4.58969 5.6484H6.4955C6.4955 5.48858 6.54034 5.32877 6.60761 5.19178C6.67487 5.05479 6.76456 4.96347 6.87666 4.84932C6.98877 4.73516 7.1233 4.66667 7.28025 4.621C7.4372 4.57534 7.59415 4.55251 7.77352 4.55251C7.97531 4.55251 8.1771 4.59817 8.33405 4.64384C8.491 4.6895 8.62553 4.78082 8.73764 4.89498C8.84974 5.00913 8.91701 5.12329 8.98427 5.28311C9.05154 5.44292 9.07396 5.60274 9.07396 5.78539C9.07396 6.19635 8.96185 6.51598 8.71522 6.76712C8.46858 7.01826 8.10984 7.13242 7.63899 7.13242ZM19.2758 10.7169C19.4327 10.2146 19.5 9.57534 19.5 8.84475V7.15525C19.5 6.42466 19.4103 5.80822 19.2534 5.28311C19.0964 4.75799 18.8722 4.3242 18.5807 3.98174C18.2892 3.63927 17.9529 3.38813 17.5493 3.22831C17.1457 3.06849 16.7197 3 16.2265 3C15.7332 3 15.2848 3.06849 14.9036 3.22831C14.5224 3.38813 14.1637 3.63927 13.8947 3.98174C13.6256 4.3242 13.4014 4.78082 13.2444 5.28311C13.0875 5.78539 13.0202 6.42466 13.0202 7.15525V8.84475C13.0202 9.57534 13.1099 10.1918 13.2669 10.7169C13.4238 11.242 13.648 11.6758 13.9395 12.0183C14.231 12.3607 14.5673 12.6119 14.9709 12.7717C15.3745 12.9315 15.8005 13 16.2937 13C16.787 13 17.2354 12.9315 17.6166 12.7717C17.9978 12.6119 18.3565 12.3607 18.6256 12.0183C18.8946 11.6758 19.1188 11.2192 19.2758 10.7169ZM17.5941 6.88113C17.5941 6.44734 17.5717 6.08204 17.5044 5.78524C17.4371 5.48844 17.3475 5.26013 17.2354 5.07748C17.1232 4.89483 16.9887 4.75784 16.8093 4.68935C16.63 4.62086 16.4506 4.5752 16.2488 4.5752C16.047 4.5752 15.8452 4.62086 15.6883 4.68935C15.5313 4.75784 15.3744 4.89483 15.2623 5.07748C15.1502 5.26013 15.0605 5.48844 14.9932 5.78524C14.926 6.08204 14.9035 6.44734 14.9035 6.88113V9.09574C14.9035 9.52953 14.926 9.89483 14.9932 10.1916C15.0605 10.4884 15.1502 10.7396 15.2623 10.9222C15.3744 11.1049 15.5089 11.2419 15.6883 11.3104C15.8676 11.3788 16.047 11.4245 16.2488 11.4245C16.4506 11.4245 16.6524 11.3788 16.8093 11.3104C16.9663 11.2419 17.1232 11.1049 17.2354 10.9222C17.3475 10.7396 17.4371 10.4884 17.482 10.1916C17.5493 9.89483 17.5717 9.52953 17.5717 9.09574V6.88113H17.5941ZM12.6287 21L17.0001 18L12.6287 15V21ZM8.00003 21L12.3715 18L8.00003 15V21Z"
+      />
+    </Svg>
+  ),
+);

package/src/icons/outlined/custom/icon-outlined-forward-5.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {Svg} from '../../svg';
+import {customToNewsKitIcon} from '../../custom-to-newskit-icon';
+
+export const IconOutlinedForward5 = customToNewsKitIcon(
+  'IconOutlinedForward5',
+  props => (
+    <Svg {...props} viewBox="0 0 24 24">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.39619 3L8.79066 8.02315L10.4135 8.39352C10.4313 8.3765 10.4491 8.3581 10.4673 8.33933C10.5232 8.28148 10.5826 8.22014 10.6557 8.18518C10.7042 8.16204 10.7526 8.1331 10.801 8.10417C10.8495 8.07523 10.8979 8.0463 10.9464 8.02315C11.0433 7.97685 11.1886 7.93056 11.3097 7.90741C11.4308 7.88426 11.6003 7.86111 11.7941 7.86111C12.0606 7.86111 12.327 7.90741 12.5208 7.97685C12.7145 8.0463 12.8841 8.16204 13.0294 8.32407C13.1747 8.48611 13.2716 8.64815 13.3443 8.87963C13.417 9.11111 13.4412 9.34259 13.4412 9.59722C13.4412 9.85185 13.4412 10.0833 13.3685 10.3148C13.2958 10.5463 13.199 10.7315 13.1021 10.8935C13.0052 11.0556 12.8356 11.1944 12.6661 11.287C12.4965 11.3796 12.2785 11.4259 12.0121 11.4259C11.6003 11.4259 11.2612 11.287 10.9948 11.0787C10.7284 10.8704 10.583 10.5463 10.5346 10.1296H8.5C8.5 10.5926 8.62111 11.0093 8.81488 11.3565C9.00865 11.7037 9.25086 12.0278 9.58997 12.2593C9.92907 12.4907 10.2924 12.6991 10.7042 12.8148C11.1159 12.9306 11.5519 13 11.9879 13C12.5934 13 13.1021 12.8843 13.5381 12.7222C13.974 12.5602 14.3374 12.3056 14.628 12.0046C14.9187 11.7037 15.1367 11.3565 15.282 10.963C15.4273 10.5694 15.5 10.1528 15.5 9.71296C15.5 9.2037 15.4031 8.74074 15.282 8.32407C15.1609 7.90741 14.9429 7.56019 14.6765 7.28241C14.41 7.00463 14.0709 6.7963 13.6834 6.63426C13.2958 6.47222 12.8599 6.40278 12.3512 6.40278C12.1817 6.40278 12.0121 6.42593 11.8668 6.44907C11.7941 6.46065 11.7215 6.47801 11.6488 6.49537C11.5761 6.51273 11.5035 6.53009 11.4308 6.54167C11.2855 6.56481 11.1644 6.61111 11.0675 6.65741C11.027 6.67673 10.9866 6.69202 10.9479 6.70665C10.8939 6.72706 10.8434 6.74618 10.801 6.77315L11.0675 4.64352H15.1851V3H9.39619ZM12.6287 21L17.0001 18L12.6287 15V21ZM8 21L12.3714 18L8 15V21Z"
+      />
+    </Svg>
+  ),
+);

package/src/icons/outlined/custom/icon-outlined-replay-10.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {Svg} from '../../svg';
+import {customToNewsKitIcon} from '../../custom-to-newskit-icon';
+
+export const IconOutlinedReplay10 = customToNewsKitIcon(
+  'IconOutlinedReplay10',
+  props => (
+    <Svg {...props} viewBox="0 0 24 24">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M18.7719 10.7169C18.9316 10.2146 19 9.57534 19 8.84475V7.15525C19 6.42466 18.9088 5.80822 18.7491 5.2831C18.5895 4.75799 18.3615 4.3242 18.0651 3.98174C17.7687 3.63927 17.4267 3.38813 17.0162 3.22831C16.6058 3.06849 16.1726 3 15.671 3C15.1693 3 14.7133 3.06849 14.3257 3.22831C13.9381 3.38813 13.5732 3.63927 13.2996 3.98174C13.026 4.3242 12.798 4.78082 12.6384 5.2831C12.4788 5.78539 12.4104 6.42466 12.4104 7.15525V8.84475C12.4104 9.57534 12.5016 10.1918 12.6612 10.7169C12.8208 11.242 13.0488 11.6758 13.3452 12.0183C13.6416 12.3607 13.9837 12.6119 14.3941 12.7717C14.8045 12.9315 15.2377 13 15.7394 13C16.241 13 16.697 12.9315 17.0846 12.7717C17.4723 12.6119 17.8371 12.3607 18.1107 12.0183C18.3843 11.6758 18.6123 11.2192 18.7719 10.7169ZM7.30293 12.8626H9.24104V3.11373H9.03583L5 4.55209V6.12743L7.30293 5.41967V12.8626ZM17.062 6.88113C17.062 6.44734 17.0392 6.08204 16.9708 5.78524C16.9024 5.48844 16.8112 5.26013 16.6972 5.07748C16.5832 4.89483 16.4464 4.75784 16.264 4.68935C16.0815 4.62086 15.8991 4.5752 15.6939 4.5752C15.4887 4.5752 15.2835 4.62086 15.1239 4.68935C14.9643 4.75784 14.8047 4.89483 14.6907 5.07748C14.5767 5.26013 14.4855 5.48844 14.4171 5.78524C14.3486 6.08204 14.3258 6.44734 14.3258 6.88113V9.09574C14.3258 9.52953 14.3486 9.89483 14.4171 10.1916C14.4855 10.4884 14.5767 10.7396 14.6907 10.9222C14.8047 11.1049 14.9415 11.2419 15.1239 11.3104C15.3063 11.3788 15.4887 11.4245 15.6939 11.4245C15.8991 11.4245 16.1043 11.3788 16.264 11.3104C16.4236 11.2419 16.5832 11.1049 16.6972 10.9222C16.8112 10.7396 16.9024 10.4884 16.948 10.1916C16.9936 9.89483 17.0392 9.52953 17.0392 9.09574V6.88113H17.062ZM16.0001 21L11.6287 18L16.0001 15V21ZM11.3714 21L7 18L11.3714 15V21Z"
+      />
+    </Svg>
+  ),
+);

package/src/icons/outlined/custom/icon-outlined-replay-15.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {Svg} from '../../svg';
+import {customToNewsKitIcon} from '../../custom-to-newskit-icon';
+
+export const IconOutlinedReplay15 = customToNewsKitIcon(
+  'IconOutlinedReplay15',
+  props => (
+    <Svg {...props} viewBox="0 0 24 24">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.3577 8.02336L12.9347 3H18.45V4.64359H14.527L14.2731 6.7733C14.3135 6.74633 14.3616 6.72722 14.4131 6.7068C14.4499 6.69218 14.4884 6.67689 14.527 6.65756C14.6193 6.61126 14.7347 6.56496 14.8731 6.54181C14.9424 6.53024 15.0116 6.51288 15.0808 6.49552L15.0808 6.49552L15.0808 6.49551C15.1501 6.47815 15.2193 6.46079 15.2885 6.44922C15.427 6.42607 15.5885 6.40292 15.75 6.40292C16.2347 6.40292 16.65 6.47237 17.0193 6.63441C17.3885 6.79645 17.7116 7.0048 17.9654 7.28259C18.2193 7.56037 18.427 7.90761 18.5424 8.3243C18.6577 8.74098 18.75 9.20396 18.75 9.71324C18.75 10.1531 18.6808 10.5698 18.5424 10.9633C18.4039 11.3568 18.1962 11.7041 17.9193 12.005C17.6424 12.3059 17.2962 12.5606 16.8808 12.7226C16.4654 12.8847 15.9808 13.0004 15.4039 13.0004C14.9885 13.0004 14.5731 12.931 14.1808 12.8152C13.7885 12.6995 13.4424 12.4911 13.1193 12.2596C12.7962 12.0282 12.5654 11.7041 12.3808 11.3568C12.1962 11.0096 12.0808 10.5929 12.0808 10.1299H14.0193C14.0654 10.5466 14.2039 10.8707 14.4577 11.079C14.7116 11.2874 15.0347 11.4263 15.427 11.4263C15.6808 11.4263 15.8885 11.38 16.05 11.2874C16.2116 11.1948 16.3731 11.0559 16.4654 10.8938C16.5577 10.7318 16.65 10.5466 16.7193 10.3151C16.7885 10.0836 16.7885 9.85214 16.7885 9.5975C16.7885 9.34286 16.7654 9.11136 16.6962 8.87987C16.627 8.64838 16.5347 8.48634 16.3962 8.3243C16.2577 8.16225 16.0962 8.04651 15.9116 7.97706C15.727 7.90761 15.4731 7.86131 15.2193 7.86131C15.0347 7.86131 14.8731 7.88446 14.7577 7.90761C14.6424 7.93076 14.5039 7.97706 14.4116 8.02336C14.3654 8.04651 14.3193 8.07544 14.2731 8.10438C14.227 8.13332 14.1808 8.16225 14.1347 8.1854C14.065 8.22036 14.0084 8.2817 13.9551 8.33955C13.9378 8.35832 13.9209 8.37673 13.9039 8.39374L12.3577 8.02336ZM9.54231 12.8915H7.58077V5.3449L5.25 6.06252V4.46523L9.33462 3.00684H9.54231V12.8915ZM16.0001 21L11.6287 18L16.0001 15V21ZM11.3714 21L7.00002 18L11.3714 15V21Z"
+      />
+    </Svg>
+  ),
+);

package/src/icons/outlined/custom/icon-outlined-replay-20.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {Svg} from '../../svg';
+import {customToNewsKitIcon} from '../../custom-to-newskit-icon';
+
+export const IconOutlinedReplay20 = customToNewsKitIcon(
+  'IconOutlinedReplay20',
+  props => (
+    <Svg {...props} viewBox="0 0 24 24">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.91757 3C7.38549 3 6.90069 3.08308 6.4735 3.24579C6.04919 3.4074 5.68293 3.64003 5.3936 3.93095C5.09938 4.21938 4.87617 4.55539 4.72515 4.94451C4.58238 5.30974 4.51204 5.69584 4.50424 6.10072L4.5 6.32093H6.51646L6.52335 6.11177C6.53024 5.90239 6.55761 5.71234 6.60982 5.53926C6.66715 5.35892 6.7557 5.20381 6.86312 5.07328C6.9705 4.95134 7.11081 4.85418 7.2846 4.77853C7.44896 4.70698 7.66024 4.66717 7.90282 4.66717C8.10807 4.66717 8.27599 4.69961 8.41208 4.75757C8.5506 4.81655 8.67224 4.90558 8.77017 5.01348C8.86441 5.11733 8.93982 5.2491 8.99895 5.40887C9.05123 5.57 9.0831 5.74149 9.0831 5.92426C9.0831 6.06141 9.0643 6.19515 9.03065 6.34121C8.99111 6.48191 8.93181 6.63024 8.83842 6.79358C8.74041 6.96499 8.61427 7.15714 8.44569 7.36353L8.44292 7.36708C8.27744 7.57847 8.06854 7.82539 7.80896 8.09375L4.67379 11.4442V12.8204H11.4784V11.1533H7.37771L9.13912 9.30143C9.42509 9.01383 9.67984 8.7201 9.91677 8.43728C10.1599 8.14701 10.3655 7.85623 10.5409 7.56504C10.7176 7.27159 10.8571 6.97612 10.9583 6.67866C11.062 6.3739 11.1097 6.06187 11.1097 5.75816C11.1097 5.35085 11.0391 4.96875 10.8942 4.62196C10.7495 4.27553 10.5389 3.9808 10.2622 3.74129C9.98364 3.49295 9.63831 3.31434 9.25816 3.18517L9.25185 3.18323C8.85085 3.06002 8.40779 3 7.91757 3ZM19.2692 10.717C19.4307 10.2147 19.5 9.57555 19.5 8.84504V7.15574C19.5 6.42523 19.4076 5.80887 19.2461 5.28381C19.0845 4.75876 18.8537 4.32502 18.5537 3.9826C18.2536 3.64017 17.9074 3.38906 17.492 3.22926C17.0765 3.06946 16.638 3.00098 16.1302 3.00098C15.6225 3.00098 15.1609 3.06946 14.7685 3.22926C14.3761 3.38906 14.0069 3.64017 13.7299 3.9826C13.4529 4.32502 13.2221 4.78159 13.0606 5.28381C12.899 5.78604 12.8298 6.42523 12.8298 7.15574V8.84504C12.8298 9.57555 12.9221 10.1919 13.0836 10.717C13.2452 11.242 13.476 11.6758 13.7761 12.0182C14.0761 12.3606 14.4223 12.6117 14.8377 12.7715C15.2532 12.9313 15.6917 12.9998 16.1995 12.9998C16.7072 12.9998 17.1689 12.9313 17.5612 12.7715C17.9536 12.6117 18.3229 12.3606 18.5998 12.0182C18.8768 11.6758 19.1076 11.2192 19.2692 10.717ZM17.4454 5.78608C17.5146 6.08284 17.5377 6.4481 17.5377 6.88184H17.5146V9.09619C17.5146 9.52993 17.4685 9.89518 17.4223 10.192C17.3762 10.4887 17.2838 10.7398 17.1684 10.9225C17.053 11.1051 16.8915 11.2421 16.7299 11.3105C16.5684 11.379 16.3606 11.4247 16.1529 11.4247C15.9452 11.4247 15.7605 11.379 15.5759 11.3105C15.3913 11.2421 15.2528 11.1051 15.1374 10.9225C15.022 10.7398 14.9297 10.4887 14.8604 10.192C14.7912 9.89518 14.7681 9.52993 14.7681 9.09619V6.88184C14.7681 6.4481 14.7912 6.08284 14.8604 5.78608C14.9297 5.48931 15.022 5.26102 15.1374 5.0784C15.2528 4.89577 15.4143 4.7588 15.5759 4.69031C15.7375 4.62183 15.9452 4.57617 16.1529 4.57617C16.3606 4.57617 16.5453 4.62183 16.7299 4.69031C16.9146 4.7588 17.053 4.89577 17.1684 5.0784C17.2838 5.26102 17.3762 5.48931 17.4454 5.78608ZM16.0001 21L11.6287 18L16.0001 15V21ZM11.3714 21L7.00002 18L11.3714 15V21Z"
+      />
+    </Svg>
+  ),
+);

package/src/icons/outlined/custom/icon-outlined-replay-25.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {Svg} from '../../svg';
+import {customToNewsKitIcon} from '../../custom-to-newskit-icon';
+
+export const IconOutlinedReplay25 = customToNewsKitIcon(
+  'IconOutlinedReplay25',
+  props => (
+    <Svg {...props} viewBox="0 0 24 24">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8.15595 3C7.63482 3 7.16 3.08308 6.7416 3.24579C6.32602 3.4074 5.9673 3.64003 5.68392 3.93095C5.39576 4.21938 5.17714 4.55539 5.02923 4.94451C4.8894 5.30974 4.82051 5.69584 4.81287 6.10072L4.80872 6.32093H6.78367L6.79042 6.11177C6.79717 5.90239 6.82398 5.71234 6.87511 5.53926C6.93126 5.35892 7.01799 5.20381 7.1232 5.07328C7.22837 4.95134 7.36579 4.85418 7.536 4.77853C7.69698 4.70698 7.90391 4.66717 8.1415 4.66717C8.34252 4.66717 8.50699 4.69961 8.64028 4.75757C8.77595 4.81655 8.89508 4.90558 8.991 5.01348C9.0833 5.11733 9.15716 5.2491 9.21507 5.40887C9.26627 5.57 9.29749 5.74149 9.29749 5.92426C9.29749 6.06141 9.27907 6.19515 9.24612 6.34121C9.20739 6.48191 9.14931 6.63024 9.05784 6.79358C8.96185 6.96499 8.83831 7.15714 8.6732 7.36353L8.67048 7.36708C8.50841 7.57847 8.30381 7.82539 8.04957 8.09375L4.97893 11.4442V12.8204H11.6435V11.1533H7.6272L9.35236 9.30143C9.63243 9.01383 9.88195 8.7201 10.114 8.43728C10.3522 8.14701 10.5535 7.85623 10.7253 7.56504C10.8983 7.27159 11.035 6.97612 11.1341 6.67866C11.2357 6.3739 11.2824 6.06187 11.2824 5.75816C11.2824 5.35085 11.2132 4.96875 11.0713 4.62196C10.9296 4.27553 10.7234 3.9808 10.4523 3.74129C10.1795 3.49295 9.84127 3.31434 9.46895 3.18517L9.46277 3.18323C9.07002 3.06002 8.63607 3 8.15595 3ZM13.6857 8.03235L14.2633 3.01815H19.7859V4.65874H15.8577L15.6035 6.78458C15.6439 6.75766 15.6921 6.73858 15.7436 6.7182C15.7805 6.7036 15.8191 6.68834 15.8577 6.66904C15.9501 6.62283 16.0657 6.57662 16.2043 6.55351C16.2736 6.54196 16.3429 6.52463 16.4123 6.5073L16.4123 6.5073C16.4816 6.48997 16.5509 6.47264 16.6202 6.46108C16.7589 6.43798 16.9206 6.41487 17.0824 6.41487C17.5676 6.41487 17.9835 6.48419 18.3533 6.64594C18.723 6.80769 19.0465 7.01565 19.3006 7.29293C19.5548 7.57021 19.7628 7.91682 19.8783 8.33274C19.9938 8.74867 20.0863 9.2108 20.0863 9.71916C20.0863 10.1582 20.0169 10.5741 19.8783 10.9669C19.7397 11.3597 19.5317 11.7063 19.2544 12.0067C18.9771 12.3071 18.6305 12.5613 18.2146 12.7231C17.7987 12.8848 17.3134 13.0003 16.7358 13.0003C16.3198 13.0003 15.9039 12.931 15.5111 12.8155C15.1183 12.6999 14.7717 12.492 14.4482 12.2609C14.1247 12.0298 13.8936 11.7063 13.7088 11.3597C13.5239 11.0131 13.4084 10.5972 13.4084 10.1351H15.3494C15.3956 10.551 15.5342 10.8745 15.7884 11.0825C16.0426 11.2904 16.3661 11.4291 16.7589 11.4291C17.0131 11.4291 17.221 11.3829 17.3828 11.2904C17.5445 11.198 17.7063 11.0594 17.7987 10.8976C17.8911 10.7359 17.9835 10.551 18.0529 10.3199C18.1222 10.0889 18.1222 9.8578 18.1222 9.60362C18.1222 9.34944 18.0991 9.11838 18.0298 8.88731C17.9604 8.65624 17.868 8.49449 17.7294 8.33274C17.5907 8.17099 17.429 8.05546 17.2441 7.98614C17.0593 7.91682 16.8051 7.8706 16.5509 7.8706C16.3661 7.8706 16.2043 7.89371 16.0888 7.91682C15.9732 7.93992 15.8346 7.98614 15.7422 8.03235C15.696 8.05546 15.6498 8.08434 15.6035 8.11322L15.6035 8.11323C15.5573 8.14211 15.5111 8.17099 15.4649 8.1941C15.3951 8.22899 15.3385 8.29023 15.2851 8.34797C15.2678 8.36671 15.2508 8.38508 15.2338 8.40206L13.6857 8.03235ZM16.0001 21L11.6287 18L16.0001 15V21ZM11.3714 21L7.00002 18L11.3714 15V21Z"
+      />
+    </Svg>
+  ),
+);

package/src/icons/outlined/custom/icon-outlined-replay-30.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {Svg} from '../../svg';
+import {customToNewsKitIcon} from '../../custom-to-newskit-icon';
+
+export const IconOutlinedReplay30 = customToNewsKitIcon(
+  'IconOutlinedReplay30',
+  props => (
+    <Svg {...props} viewBox="0 0 24 24">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8.63899 7.13242H7.63003V8.61644H8.68383C8.93047 8.61644 9.13226 8.6621 9.33405 8.70776C9.53584 8.75343 9.69279 8.84475 9.82732 8.9589C9.96185 9.07306 10.074 9.23288 10.1412 9.41553C10.2085 9.59817 10.2533 9.82648 10.2533 10.0776C10.2533 10.2831 10.2309 10.4658 10.1636 10.6256C10.0964 10.7854 9.98427 10.9224 9.87216 11.0365C9.76006 11.1507 9.60311 11.242 9.42374 11.3105C9.24437 11.379 9.04257 11.4018 8.81836 11.4018C8.61657 11.4018 8.4372 11.3562 8.25783 11.3105C8.07846 11.2648 7.94393 11.1735 7.8094 11.0594C7.67487 10.9452 7.58519 10.8311 7.51792 10.6712C7.45066 10.5114 7.40582 10.3516 7.40582 10.169H5.5C5.5 10.6484 5.58969 11.0822 5.76906 11.4247C5.94843 11.7671 6.21748 12.0411 6.50896 12.2922C6.80044 12.5434 7.15918 12.7032 7.54034 12.8174C7.92151 12.9315 8.32509 12.9772 8.72868 12.9772C9.22195 12.9772 9.64795 12.9087 10.074 12.7945C10.5 12.6804 10.8363 12.4749 11.1502 12.2466C11.4641 12.0183 11.6883 11.6986 11.8677 11.3562C12.047 11.0137 12.1367 10.6027 12.1367 10.1461C12.1367 9.62101 12.0022 9.16438 11.7331 8.75343C11.4641 8.34247 11.0605 8.06849 10.5224 7.86301C10.769 7.74886 10.9708 7.6347 11.1502 7.47489C11.3296 7.31507 11.4641 7.15525 11.5986 6.9726C11.7331 6.78995 11.8228 6.60731 11.8901 6.40183C11.9574 6.19635 11.9798 5.99087 11.9798 5.78539C11.9798 5.32877 11.8901 4.91781 11.7331 4.57534C11.5762 4.23288 11.352 3.93607 11.0605 3.70776C10.769 3.47945 10.4327 3.2968 10.0291 3.18265C9.62553 3.06849 9.1771 3 8.70625 3C8.28025 3 7.87666 3.06849 7.4955 3.18265C7.11434 3.2968 6.80044 3.47945 6.50896 3.70776C6.21748 3.93607 5.99327 4.23288 5.83632 4.55251C5.67937 4.87215 5.58969 5.23744 5.58969 5.6484H7.4955C7.4955 5.48858 7.54034 5.32877 7.60761 5.19178C7.67487 5.05479 7.76456 4.96347 7.87666 4.84932C7.98877 4.73516 8.1233 4.66667 8.28025 4.621C8.4372 4.57534 8.59415 4.55251 8.77352 4.55251C8.97531 4.55251 9.1771 4.59817 9.33405 4.64384C9.491 4.6895 9.62553 4.78082 9.73764 4.89498C9.84974 5.00913 9.91701 5.12329 9.98427 5.28311C10.0515 5.44292 10.074 5.60274 10.074 5.78539C10.074 6.19635 9.96185 6.51598 9.71522 6.76712C9.46858 7.01826 9.10984 7.13242 8.63899 7.13242ZM20.2756 10.7169C20.4325 10.2146 20.4998 9.57534 20.4998 8.84475V7.15525C20.4998 6.42466 20.4101 5.80822 20.2532 5.28311C20.0962 4.75799 19.872 4.3242 19.5805 3.98174C19.289 3.63927 18.9527 3.38813 18.5491 3.22831C18.1455 3.06849 17.7195 3 17.2263 3C16.733 3 16.2846 3.06849 15.9034 3.22831C15.5223 3.38813 15.1635 3.63927 14.8945 3.98174C14.6254 4.3242 14.4012 4.78082 14.2442 5.28311C14.0873 5.78539 14.02 6.42466 14.02 7.15525V8.84475C14.02 9.57534 14.1097 10.1918 14.2667 10.7169C14.4236 11.242 14.6478 11.6758 14.9393 12.0183C15.2308 12.3607 15.5671 12.6119 15.9707 12.7717C16.3743 12.9315 16.8003 13 17.2935 13C17.7868 13 18.2352 12.9315 18.6164 12.7717C18.9976 12.6119 19.3563 12.3607 19.6254 12.0183C19.8944 11.6758 20.1186 11.2192 20.2756 10.7169ZM18.5939 6.88113C18.5939 6.44734 18.5715 6.08204 18.5042 5.78524C18.4369 5.48844 18.3472 5.26013 18.2351 5.07748C18.123 4.89483 17.9885 4.75784 17.8091 4.68935C17.6298 4.62086 17.4504 4.5752 17.2486 4.5752C17.0468 4.5752 16.845 4.62086 16.6881 4.68935C16.5311 4.75784 16.3742 4.89483 16.2621 5.07748C16.15 5.26013 16.0603 5.48844 15.993 5.78524C15.9257 6.08204 15.9033 6.44734 15.9033 6.88113V9.09574C15.9033 9.52953 15.9257 9.89483 15.993 10.1916C16.0603 10.4884 16.15 10.7396 16.2621 10.9222C16.3742 11.1049 16.5087 11.2419 16.6881 11.3104C16.8674 11.3788 17.0468 11.4245 17.2486 11.4245C17.4504 11.4245 17.6522 11.3788 17.8091 11.3104C17.9661 11.2419 18.123 11.1049 18.2351 10.9222C18.3472 10.7396 18.4369 10.4884 18.4818 10.1916C18.549 9.89483 18.5715 9.52953 18.5715 9.09574V6.88113H18.5939ZM16.0001 21L11.6287 18L16.0001 15V21ZM11.3714 21L7.00002 18L11.3714 15V21Z"
+      />
+    </Svg>
+  ),
+);

package/src/icons/outlined/custom/icon-outlined-replay-5.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {Svg} from '../../svg';
+import {customToNewsKitIcon} from '../../custom-to-newskit-icon';
+
+export const IconOutlinedReplay5 = customToNewsKitIcon(
+  'IconOutlinedReplay5',
+  props => (
+    <Svg {...props} viewBox="0 0 24 24">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.39619 3L8.79066 8.02315L10.4135 8.39352C10.4313 8.3765 10.4491 8.3581 10.4673 8.33933C10.5232 8.28148 10.5826 8.22014 10.6557 8.18518C10.7042 8.16204 10.7526 8.1331 10.801 8.10417C10.8495 8.07523 10.8979 8.0463 10.9464 8.02315C11.0433 7.97685 11.1886 7.93056 11.3097 7.90741C11.4308 7.88426 11.6003 7.86111 11.7941 7.86111C12.0606 7.86111 12.327 7.90741 12.5208 7.97685C12.7145 8.0463 12.8841 8.16204 13.0294 8.32407C13.1747 8.48611 13.2716 8.64815 13.3443 8.87963C13.417 9.11111 13.4412 9.34259 13.4412 9.59722C13.4412 9.85185 13.4412 10.0833 13.3685 10.3148C13.2958 10.5463 13.199 10.7315 13.1021 10.8935C13.0052 11.0556 12.8356 11.1944 12.6661 11.287C12.4965 11.3796 12.2785 11.4259 12.0121 11.4259C11.6003 11.4259 11.2612 11.287 10.9948 11.0787C10.7284 10.8704 10.583 10.5463 10.5346 10.1296H8.5C8.5 10.5926 8.62111 11.0093 8.81488 11.3565C9.00865 11.7037 9.25086 12.0278 9.58997 12.2593C9.92907 12.4907 10.2924 12.6991 10.7042 12.8148C11.1159 12.9306 11.5519 13 11.9879 13C12.5934 13 13.1021 12.8843 13.5381 12.7222C13.974 12.5602 14.3374 12.3056 14.628 12.0046C14.9187 11.7037 15.1367 11.3565 15.282 10.963C15.4273 10.5694 15.5 10.1528 15.5 9.71296C15.5 9.2037 15.4031 8.74074 15.282 8.32407C15.1609 7.90741 14.9429 7.56019 14.6765 7.28241C14.41 7.00463 14.0709 6.7963 13.6834 6.63426C13.2958 6.47222 12.8599 6.40278 12.3512 6.40278C12.1817 6.40278 12.0121 6.42593 11.8668 6.44907C11.7941 6.46065 11.7215 6.47801 11.6488 6.49537C11.5761 6.51273 11.5035 6.53009 11.4308 6.54167C11.2855 6.56481 11.1644 6.61111 11.0675 6.65741C11.027 6.67673 10.9866 6.69202 10.9479 6.70665C10.8939 6.72706 10.8434 6.74618 10.801 6.77315L11.0675 4.64352H15.1851V3H9.39619ZM16.0001 21L11.6287 18L16.0001 15V21ZM11.3714 21L7 18L11.3714 15V21Z"
+      />
+    </Svg>
+  ),
+);

package/src/icons/outlined/custom/index.ts

@@ -0,0 +1,16 @@
+// Social custom icons
+export * from './icon-outlined-figma';
+
+export * from './icon-outlined-forward-5';
+export * from './icon-outlined-forward-10';
+export * from './icon-outlined-forward-15';
+export * from './icon-outlined-forward-20';
+export * from './icon-outlined-forward-25';
+export * from './icon-outlined-forward-30';
+
+export * from './icon-outlined-replay-5';
+export * from './icon-outlined-replay-10';
+export * from './icon-outlined-replay-15';
+export * from './icon-outlined-replay-20';
+export * from './icon-outlined-replay-25';
+export * from './icon-outlined-replay-30';

package/src/icons/style-presets.ts

@@ -0,0 +1,80 @@
+import {StylePreset} from '../theme/types';
+
+export default {
+  iconPositive: {
+    base: {
+      iconColor: '{{colors.inkPositive}}',
+    },
+  },
+  iconNegative: {
+    base: {
+      iconColor: '{{colors.inkNegative}}',
+    },
+  },
+  iconSocialTwitter: {
+    base: {
+      iconColor: '{{colors.socialTwitter}}',
+    },
+  },
+  iconSocialGitHub: {
+    base: {
+      iconColor: '{{colors.socialGithub}}',
+    },
+  },
+  iconSocialFacebook: {
+    base: {
+      iconColor: '{{colors.socialFacebook}}',
+    },
+  },
+  iconSocialInstagram: {
+    base: {
+      iconColor: '{{colors.socialInstagram}}',
+    },
+  },
+  iconSocialYoutube: {
+    base: {
+      iconColor: '{{colors.socialYoutube}}',
+    },
+  },
+  iconSocialWhatsApp: {
+    base: {
+      iconColor: '{{colors.socialWhatsapp}}',
+    },
+  },
+  iconSocialReddit: {
+    base: {
+      iconColor: '{{colors.socialReddit}}',
+    },
+  },
+
+  iconDefault: {
+    base: {
+      iconColor: '{{colors.inkBase}}',
+    },
+  },
+  indeterminateProgressIndicatorPrimary: {
+    base: {
+      iconColor: '{{colors.inkBrand010}}',
+    },
+  },
+  indeterminateProgressIndicatorSecondary: {
+    base: {
+      iconColor: '{{colors.inkBase}}',
+    },
+  },
+  indeterminateProgressIndicatorNegative: {
+    base: {
+      iconColor: '{{colors.inkNegative}}',
+    },
+  },
+  indeterminateProgressIndicatorPositive: {
+    base: {
+      iconColor: '{{colors.inkPositive}}',
+    },
+  },
+  indeterminateProgressIndicatorInverse: {
+    base: {
+      iconColor: '{{colors.inkInverse}}',
+    },
+  },
+} as Record<string, StylePreset>;

package/src/icons/svg.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import {SvgProps} from './types';
+
+const modeProps = {
+  decorative: {
+    'aria-hidden': true,
+  },
+  standalone: {
+    role: 'img',
+  },
+};
+
+export const Svg: React.FC<SvgProps & React.SVGProps<SVGSVGElement>> = ({
+  children,
+  title,
+  ...props
+}) => {
+  // Ignore line rather than use "as any" - only want to ignore overrides
+  // prop not existing in type, don't want to lose typing on the rest of props.
+  // @ts-ignore
+  const {overrides, ...p} = props;
+  return (
+    <svg
+      {...p}
+      {...modeProps[title ? 'standalone' : 'decorative']}
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      {title && <title>{title}</title>}
+      {children}
+    </svg>
+  );
+};

package/src/icons/to-newskit-icon.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import {EmotionIconProps, EmotionIcon} from '@emotion-icons/emotion-icon';
+import {withTheme} from '../theme';
+import {NewsKitIconProps, NewsKitIcon, SvgProps} from './types';
+import {getSizingCssFromTheme, getStylePreset, styled} from '../utils/style';
+import {getTransitionPresetFromTheme} from '../utils/style/transition-preset';
+import defaults from './defaults';
+import stylePresets from './style-presets';
+import {withOwnTheme} from '../utils/with-own-theme';
+import {logicalProps} from '../utils/logical-properties';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const renderIconStylePreset = (overridesOnly: boolean) => (props: any) => {
+  if (!overridesOnly || (props.overrides && props.overrides.stylePreset)) {
+    const stylePreset = getStylePreset('icons', '', {
+      isSvg: true,
+    })(props);
+
+    const transitionPreset = getTransitionPresetFromTheme('iconColorChange')(
+      props,
+    );
+
+    return {
+      ...stylePreset,
+      ...transitionPreset,
+    };
+  }
+  return {};
+};
+
+const StyledIcon = styled.svg<NewsKitIconProps>`
+  // If not overridden, render SP CSS here, this allows parent SP to override Icon default.
+  ${renderIconStylePreset(false)}
+
+  vertical-align: unset;
+  display: inline-block;
+
+  // https://css-tricks.com/the-sass-ampersand/#doubling-up-specificity
+  && {
+    //we don't want the icon to have a default size hence using non defaulted functions
+    ${props =>
+      props.overrides?.size &&
+      getSizingCssFromTheme('width', props.overrides.size)}
+    ${props =>
+      props.overrides?.size &&
+      getSizingCssFromTheme('height', props.overrides.size)}
+      
+      // If overridden, render SP CSS here instead - this ensures we override fill color from parent SP.
+      ${renderIconStylePreset(true)}
+  }
+
+  ${logicalProps()}
+`;
+
+export const toNewsKitIcon = (
+  PassedIcon:
+    | React.ComponentType<EmotionIconProps>
+    | React.ComponentType<SvgProps>
+    | EmotionIcon,
+): NewsKitIcon =>
+  withOwnTheme(
+    withTheme<NewsKitIconProps>(
+      React.memo(props => {
+        const emotionIconName = PassedIcon.displayName;
+        if (props.theme.icons[`${emotionIconName}`]) {
+          const Icon = props.theme.icons[`${emotionIconName}`];
+          return <Icon title={props.title} {...props} />;
+        }
+        return <StyledIcon title={props.title} {...props} as={PassedIcon} />;
+      }),
+    ),
+  )({defaults, stylePresets});

package/src/icons/types.ts

@@ -0,0 +1,19 @@
+import {ComponentType} from 'react';
+import {MQ} from '../utils/style/types';
+import {Theme} from '../theme';
+import {LogicalProps} from '../utils/logical-properties';
+
+export interface SvgProps extends React.SVGAttributes<SVGElement> {
+  title?: string;
+}
+
+export interface NewsKitIconProps extends SvgProps {
+  overrides?: {
+    stylePreset?: MQ<string>;
+    size?: MQ<string>;
+  } & LogicalProps;
+}
+
+export type NewsKitIcon = ComponentType<
+  NewsKitIconProps & {theme?: Theme | undefined}
+>;

package/src/image/defaults.ts

@@ -0,0 +1,5 @@
+export default {
+  image: {
+    stylePreset: 'imageSharp',
+  },
+};

package/src/image/image.tsx

@@ -0,0 +1,132 @@
+import React, {useState, useRef, useCallback} from 'react';
+import dequal from 'dequal';
+import composeRefs from '@seznam/compose-react-refs';
+import {IconOutlinedImage, NewsKitIconProps} from '../icons';
+import {ImageProps} from './types';
+import {
+  StyledLoadingContainer,
+  StyledIconContainer,
+  StyledImage,
+  StyledPicture,
+} from './styled';
+import {useIntersection} from '../utils/hooks/use-intersection';
+import {Sources} from './sources';
+import {useClientSide} from './utils';
+import {getComponentOverrides} from '../utils/overrides';
+import defaults from './defaults';
+import stylePresets from './style-presets';
+import {withOwnTheme} from '../utils/with-own-theme';
+
+const ImageComponent = React.forwardRef<HTMLImageElement, ImageProps>(
+  (
+    {
+      width,
+      height,
+      loadingAspectRatio,
+      placeholderIcon = false,
+      overrides = {},
+      renderOnServer = false,
+      loading,
+      src,
+      sources = [],
+      ...props
+    },
+    ref,
+  ) => {
+    const imageRef: React.RefObject<HTMLImageElement | null> = useRef(null);
+    const [isLoading, setIsLoading] = useState(!renderOnServer);
+    const [hasError, setError] = useState(false);
+    const onLoad = useCallback(() => isLoading && setIsLoading(false), [
+      isLoading,
+      setIsLoading,
+    ]);
+    const onError = useCallback(() => setError(true), [setError]);
+
+    useClientSide(onLoad, imageRef);
+
+    const lazyBoundary = '256px'; // its arbitrary
+    const isLazy = loading === 'lazy' && typeof window !== 'undefined';
+    const hasNativeLazyLoadSupport =
+      typeof window !== 'undefined' && 'loading' in HTMLImageElement.prototype;
+
+    const disableIntersection = useCallback(() => {
+      if (!isLazy) return true;
+      return hasNativeLazyLoadSupport;
+    }, [isLazy, hasNativeLazyLoadSupport]);
+
+    const [setRef, isIntersected] = useIntersection<HTMLImageElement>({
+      rootMargin: lazyBoundary,
+      // useIntersection is not needed when native lazy loading is supported or loading is not lazy
+      disabled: disableIntersection(),
+    });
+
+    const isVisible = !isLazy || isIntersected;
+
+    // This code can be removed once Safari start supporting loading=lazy
+    // This code can be removed once Safari start supporting loading=lazy
+    const getSource = useCallback(
+      () =>
+        isLazy && !renderOnServer && !hasNativeLazyLoadSupport && !isVisible
+          ? undefined
+          : src,
+      [isVisible, isLazy, src, hasNativeLazyLoadSupport, renderOnServer],
+    );
+
+    const currentSrc = getSource();
+
+    const showLoading = useCallback(() => {
+      if (hasError && currentSrc !== '') return true;
+      if (!renderOnServer && isLoading) return true;
+      return false;
+    }, [hasError, renderOnServer, isLoading, currentSrc]);
+
+    const [PlaceholderComponent, placeholderProps] = getComponentOverrides(
+      /* istanbul ignore next  */
+      overrides?.placeholderIcon,
+      IconOutlinedImage,
+      {
+        overrides: {
+          size: 'iconSize040',
+        },
+      },
+    );
+    return (
+      <StyledPicture
+        isLoading={showLoading()}
+        loadingAspectRatio={loadingAspectRatio}
+        overrides={overrides}
+        ref={setRef}
+      >
+        {showLoading() && (
+          <StyledLoadingContainer>
+            {placeholderIcon && (
+              <StyledIconContainer>
+                <PlaceholderComponent
+                  {...(placeholderProps as NewsKitIconProps)}
+                />
+              </StyledIconContainer>
+            )}
+          </StyledLoadingContainer>
+        )}
+        <Sources sources={sources} />
+        <StyledImage
+          {...props}
+          width={width}
+          height={height}
+          onLoad={onLoad}
+          onError={onError}
+          isLoading={showLoading()}
+          loading={loading}
+          overrides={overrides}
+          loadingAspectRatio={loadingAspectRatio}
+          ref={composeRefs(imageRef, ref)}
+          src={currentSrc}
+        />
+      </StyledPicture>
+    );
+  },
+);
+
+const ThemelessImage = React.memo(ImageComponent, dequal);
+
+export const Image = withOwnTheme(ThemelessImage)({defaults, stylePresets});

package/src/image/index.ts

@@ -0,0 +1,3 @@
+export * from './image';
+export type {ImageProps, ImageSource} from './types';
+export {useClientSide} from './utils';

package/src/image/sources.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import {BreakpointKeys, useTheme} from '../theme';
+import {getMediaQueryFromTheme} from '../utils';
+import {ImageSource} from './types';
+import {getNextBreakpoint} from './utils';
+
+export const Sources = ({sources}: {sources: ImageSource[]}) => {
+  const theme = useTheme();
+  const {breakpoints} = theme;
+  const breakpointKeys = Object.keys(breakpoints) as BreakpointKeys[];
+  const breakpointKeysFromAllSources = sources
+    .reduce((bps, {media}) => {
+      if (
+        breakpointKeys.indexOf(media as BreakpointKeys) >= 0 &&
+        bps.indexOf(media as BreakpointKeys) === -1
+      ) {
+        bps.push(media as BreakpointKeys);
+      }
+      return bps;
+    }, [] as BreakpointKeys[])
+    .sort((a, b) => breakpointKeys.indexOf(a) - breakpointKeys.indexOf(b));
+
+  return (
+    <>
+      {sources.map(({media, ...sourceAttr}) => {
+        let mediaQuery = media;
+        const usesBreakpointKey =
+          breakpointKeys.indexOf(media as BreakpointKeys) >= 0;
+        if (media && usesBreakpointKey) {
+          const nextBreakpoint = getNextBreakpoint(
+            media as BreakpointKeys,
+            breakpointKeysFromAllSources,
+          );
+          mediaQuery = getMediaQueryFromTheme(
+            media as BreakpointKeys,
+            nextBreakpoint,
+          )({
+            theme,
+          }).replace('@media ', '');
+        }
+
+        return (
+          <source
+            key={`${media}-${sourceAttr.type}-${sourceAttr.srcSet}`}
+            media={mediaQuery}
+            {...sourceAttr}
+          />
+        );
+      })}
+    </>
+  );
+};