newskit 0.0.0-e00e1f6 → 0.0.0-e02a96ba5

package/site/components/icons/icon-filled-dark.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import {Svg, SvgProps, toNewsKitIcon, withDefaultProps} from 'newskit';
+
+const Dark: React.FC<SvgProps> = props => (
+  <Svg {...props} viewBox="0 0 17 17" fill="none">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12.7349 0C12.9152 0 13.0614 0.146193 13.0614 0.326531C13.0614 1.76923 14.2309 2.93878 15.6736 2.93878C15.854 2.93878 16.0002 3.08497 16.0002 3.26531V3.59184C16.0002 3.77217 15.854 3.91837 15.6736 3.91837C14.2309 3.91837 13.0614 5.08791 13.0614 6.53061C13.0614 6.71095 12.9152 6.85714 12.7349 6.85714H12.4083C12.228 6.85714 12.0818 6.71095 12.0818 6.53061C12.0818 5.08791 10.9123 3.91837 9.46956 3.91837C9.28922 3.91837 9.14303 3.77217 9.14303 3.59184V3.26531C9.14303 3.08497 9.28922 2.93878 9.46956 2.93878C10.9123 2.93878 12.0818 1.76923 12.0818 0.326531C12.0818 0.146193 12.228 0 12.4083 0H12.7349ZM14.8384 9.78689C15.2381 9.50799 15.8414 9.80867 15.7022 10.2758C14.7157 13.5862 11.6485 16 8.01747 16C3.58955 16 0 12.4105 0 7.98253C0 4.35151 2.41376 1.28426 5.72424 0.29782C6.19133 0.158637 6.49201 0.761872 6.21311 1.16157C5.51277 2.16524 5.10203 3.38598 5.10203 4.70265C5.10203 8.12423 7.87577 10.898 11.2973 10.898C12.614 10.898 13.8348 10.4872 14.8384 9.78689Z"
+      fill="#577FFB"
+    />
+  </Svg>
+);
+
+export const IconFilledDark = withDefaultProps(toNewsKitIcon(Dark), {
+  title: 'Dark icon',
+  overrides: {size: 'iconSize020'},
+});
+
+IconFilledDark.displayName = 'IconFilledDark';

package/site/components/icons/icon-filled-edge.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import {Svg, SvgProps, toNewsKitIcon, withDefaultProps} from 'newskit';
+
+const FilledEdge: React.FC<SvgProps> = props => (
+  <Svg {...props} viewBox="1 0 24 24">
+    <path d="M10.7674 15.7814C10.0089 14.9302 9.4923 13.9132 9.32742 12.7746C8.99766 13.2831 8.72285 13.8358 8.52499 14.4328C7.51372 17.4727 9.27246 21.2644 12.2623 22.3699C14.8345 23.2321 17.7254 21.6956 19.627 20.0153C19.9128 19.6284 22.1662 17.6275 21.045 17.4064C17.7254 19.1199 13.3285 18.6335 10.7674 15.7814ZM11.4269 9.35875C12.5701 9.34769 11.4709 8.8834 10.9982 8.52966C9.85504 7.89955 8.514 7.59003 7.21693 7.59003C2.98497 7.63424 -0.0763376 10.2984 1.35813 14.7091C2.39139 18.9983 6.09574 22.4473 10.4706 23C8.21721 21.574 6.85419 18.8988 6.85419 16.2346C6.94213 13.4379 8.6569 10.1547 11.4269 9.35875ZM1.88576 7.89955C5.22736 5.42334 10.5475 5.62232 13.4275 8.73969C14.5487 9.96674 15.3181 12.056 14.2959 13.5705C12.3832 15.6488 17.6814 15.9251 18.8136 15.6156C22.9247 14.8197 24.0129 10.011 22.0563 6.69461C20.1876 2.93608 16.0436 0.968379 11.9765 1.00154C7.51372 0.924161 3.5016 3.76517 1.88576 7.89955Z" />
+  </Svg>
+);
+
+export const IconFilledEdge = withDefaultProps(toNewsKitIcon(FilledEdge), {});
+
+IconFilledEdge.displayName = 'IconFilledEdge';

package/site/components/icons/icon-filled-expand-less.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import {Svg, SvgProps, toNewsKitIcon, withDefaultProps} from 'newskit';
+
+const ExpandLess: React.FC<SvgProps> = props => (
+  <Svg {...props} viewBox="0 0 24 24" height="24px" width="24px">
+    <path d="M0 0h24v24H0V0z" fill="none" />
+    <path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14l-6-6z" />
+  </Svg>
+);
+
+export const IconExpandLess = withDefaultProps(toNewsKitIcon(ExpandLess), {});
+
+IconExpandLess.displayName = 'IconExpandLess';

package/site/components/icons/icon-filled-expand-more.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import {Svg, SvgProps, toNewsKitIcon, withDefaultProps} from 'newskit';
+
+const ExpandMore: React.FC<SvgProps> = props => (
+  <Svg {...props} viewBox="0 0 24 24" height="24px" width="24px">
+    <path d="M24 24H0V0h24v24z" fill="none" opacity=".87" />
+    <path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z" />
+  </Svg>
+);
+
+export const IconExpandMore = withDefaultProps(toNewsKitIcon(ExpandMore), {});
+
+IconExpandMore.displayName = 'IconExpandMore';

package/site/components/icons/icon-filled-facebook.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import {Svg, customToNewsKitIcon} from 'newskit';
+
+export const IconFilledFacebook = customToNewsKitIcon(
+  'IconFilledFacebook',
+  props => (
+    <Svg {...props} viewBox="0 0 24 24">
+      <path
+        fillRule="nonzero"
+        d="M13.0784931,22.2595724 L13.0784931,13.1365112 L16.2002321,13.1365112 L16.6676019,9.5811424 L13.0784931,9.5811424 L13.0784931,7.31114568 C13.0784931,6.28180493 13.3699223,5.58025387 14.8748197,5.58025387 L16.7941176,5.57938466 L16.7941176,2.39951562 C16.4620261,2.35634473 15.3227937,2.25957241 13.9973813,2.25957241 C11.2301818,2.25957241 9.33569472,3.916388 9.33569472,6.9592112 L9.33569472,9.58123898 L6.20588235,9.58123898 L6.20588235,13.1366078 L9.33559627,13.1366078 L9.33559627,22.2595724 L13.0784931,22.2595724 Z"
+      />
+    </Svg>
+  ),
+);

package/site/components/icons/icon-filled-figma.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import {Svg, customToNewsKitIcon} from 'newskit';
+
+export const IconFilledFigma = customToNewsKitIcon('IconFilledFigma', props => (
+  <Svg {...props} viewBox="0 0 24 24">
+    <path
+      d="M12.3333 12C12.3333 11.0275 12.7196 10.0949 13.4073 9.40729C14.0949 8.71965 15.0275 8.33334 16 8.33334C16.9724 8.33334 17.9051 8.71965 18.5927 9.40729C19.2803 10.0949 19.6666 11.0275 19.6666 12C19.6666 12.9725 19.2803 13.9051 18.5927 14.5927C17.9051 15.2804 16.9724 15.6667 16 15.6667C15.0275 15.6667 14.0949 15.2804 13.4073 14.5927C12.7196 13.9051 12.3333 12.9725 12.3333 12V12Z"
+      fill="#1ABCFE"
+    />
+    <path
+      d="M5 19.3333C5 18.3609 5.38631 17.4282 6.07394 16.7406C6.76158 16.053 7.69421 15.6667 8.66667 15.6667H12.3333V19.3333C12.3333 20.3058 11.947 21.2384 11.2594 21.926C10.5718 22.6137 9.63913 23 8.66667 23C7.69421 23 6.76158 22.6137 6.07394 21.926C5.38631 21.2384 5 20.3058 5 19.3333V19.3333Z"
+      fill="#0ACF83"
+    />
+    <path
+      d="M12.3333 1V8.33333H16C16.9724 8.33333 17.9051 7.94703 18.5927 7.25939C19.2803 6.57176 19.6666 5.63913 19.6666 4.66667C19.6666 3.69421 19.2803 2.76158 18.5927 2.07394C17.9051 1.38631 16.9724 1 16 1L12.3333 1Z"
+      fill="#FF7262"
+    />
+    <path
+      d="M5 4.66667C5 5.63913 5.38631 6.57176 6.07394 7.25939C6.76158 7.94703 7.69421 8.33333 8.66667 8.33333H12.3333V1H8.66667C7.69421 1 6.76158 1.38631 6.07394 2.07394C5.38631 2.76158 5 3.69421 5 4.66667V4.66667Z"
+      fill="#F24E1E"
+    />
+    <path
+      d="M5 12C5 12.9725 5.38631 13.9051 6.07394 14.5927C6.76158 15.2804 7.69421 15.6667 8.66667 15.6667H12.3333V8.33334H8.66667C7.69421 8.33334 6.76158 8.71965 6.07394 9.40729C5.38631 10.0949 5 11.0275 5 12V12Z"
+      fill="#A259FF"
+    />
+  </Svg>
+));

package/site/components/icons/icon-filled-firefox.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import {Svg, SvgProps, toNewsKitIcon, withDefaultProps} from 'newskit';
+
+const FilledFirefox: React.FC<SvgProps> = props => (
+  <Svg {...props} viewBox="0 0 24 24">
+    <path d="M23.7614 8.26591C23.6742 8.25286 23.5887 8.29824 23.5524 8.37664L23.2838 8.95678C23.1818 8.19419 22.9927 6.9668 22.7429 6.16198C22.3621 4.92276 21.5557 4.12162 21.5216 4.08806C21.4598 4.02748 21.3646 4.01404 21.2876 4.05504C21.2109 4.09605 21.171 4.18167 21.1901 4.26506L21.3988 5.18261C20.8967 4.67074 20.0901 3.93602 19.2919 3.57788C19.1 3.48658 18.9049 3.40288 18.7341 3.33069C17 1.82748 14.7762 1 12.4686 1C9.2189 1 6.25718 2.58868 4.5036 5.26078C4.33859 5.1307 4.10726 4.90318 3.97468 4.57521C3.73358 3.99837 3.61146 3.35035 3.6102 3.3439C3.59722 3.27433 3.54623 3.21735 3.47731 3.19555C3.40853 3.17374 3.33284 3.19063 3.28051 3.23955C1.83538 4.59187 1.97882 6.70019 2.03272 7.17804C1.85363 7.36472 1.34745 7.91821 0.836075 8.71674C0.201084 9.70893 0.00885608 11.4434 0.00106623 11.5168C-0.00766784 11.5986 0.037891 11.6768 0.114452 11.7112C0.191327 11.7456 0.281737 11.7285 0.339492 11.6687L0.762425 11.2327C0.716316 11.3996 0.669891 11.5898 0.627008 11.8028C0.436511 12.7224 0.49222 14.1487 0.494659 14.209C0.498279 14.2973 0.563194 14.3719 0.65203 14.3894C0.740787 14.4073 0.83041 14.3633 0.869123 14.2833L1.118 13.7691C1.3015 15.0209 2.00597 17.6844 4.70716 20.138C6.70781 21.9567 9.49044 22.9998 12.3416 23C12.3419 23 12.342 23 12.3423 23C15.1095 23 17.7223 22.0341 19.8978 20.207C22.4702 18.0444 23.4285 14.9559 23.7794 12.7458C24.1582 10.3597 23.9364 8.51025 23.9268 8.4327C23.9163 8.34715 23.8487 8.27897 23.7614 8.26591ZM19.3691 8.33541C19.3718 8.33879 19.6387 8.67988 19.6969 9.55389C19.7371 10.208 19.5995 11.254 19.5127 11.8263L18.9886 11.2328C18.932 11.1688 18.8394 11.1482 18.7601 11.1825C18.6809 11.2167 18.6339 11.2974 18.6444 11.3812C18.6462 11.396 18.8248 12.8738 18.5243 14.1583C18.382 14.7619 18.1594 15.1959 17.9685 15.4822L18.0417 14.5147C18.0487 14.4218 17.9866 14.3375 17.8941 14.3146C17.8016 14.2915 17.7056 14.3365 17.6663 14.4214C17.6575 14.4405 16.749 16.3439 14.2609 17.0976C13.9134 17.2021 13.5475 17.255 13.1731 17.255C11.8469 17.2551 10.6419 16.5948 9.95885 16.1309C10.0176 16.1338 10.0761 16.1352 10.1342 16.1352C11.1127 16.1352 11.8652 15.7239 12.4699 15.3933C12.6288 15.3064 12.7789 15.2244 12.9232 15.1548C13.7923 14.7283 14.1964 14.6925 14.5068 14.6925C14.6708 14.6925 14.7972 14.5991 14.8369 14.4487C14.934 14.0797 14.4794 13.4219 13.918 13.1203C13.6395 12.9725 13.3418 12.9037 12.9812 12.9037C12.4074 12.9037 11.696 13.0803 10.6769 13.3496C10.4899 13.3982 10.3052 13.423 10.128 13.423C9.50358 13.4231 9.09064 13.1283 8.85419 12.8809C8.53599 12.5481 8.35477 12.1083 8.38145 11.7333C8.39356 11.5623 8.46218 11.3875 8.87913 11.3875C9.24903 11.3875 9.66016 11.5363 9.66418 11.5377C9.6866 11.5459 9.71013 11.55 9.7335 11.55C9.73389 11.55 9.73444 11.55 9.73499 11.55C9.84366 11.55 9.93171 11.4641 9.93171 11.358C9.93171 11.3477 9.93084 11.3375 9.92927 11.3276L9.87426 9.64596C10.0729 9.52233 10.5484 9.22155 11.0054 8.89735C12.111 8.11303 12.2591 7.81309 12.1407 7.58526C11.984 7.27503 11.5714 7.22466 11.0937 7.1663C10.8204 7.13289 10.5106 7.09504 10.2308 7.00466C9.64789 6.8156 9.26382 6.32446 9.17641 6.20375C9.15831 6.10269 9.11503 5.76221 9.28617 5.47157C9.4714 5.15389 10.112 4.66206 10.3432 4.49927C10.4093 4.45281 10.4392 4.37134 10.4184 4.29447C10.3975 4.21768 10.3303 4.16124 10.2494 4.15272C10.2295 4.15057 9.64183 4.09328 8.68179 4.40351C7.90013 4.65906 7.29386 5.07326 7.08495 5.22692C6.99509 5.20972 6.84126 5.18599 6.5864 5.16034C8.08339 3.51061 10.2067 2.57148 12.4689 2.57148C14.1293 2.57148 15.698 3.06424 17.0336 4.00114L15.7111 4.21699C15.6212 4.23166 15.5535 4.30461 15.5472 4.39322C15.541 4.48191 15.5981 4.56316 15.6849 4.58965C15.7026 4.59502 17.4639 5.13838 18.7781 6.12704C19.0705 6.35041 19.3379 6.63968 19.5731 6.98699C19.7924 7.44573 19.964 7.91875 20.0856 8.39891L19.6434 8.06357C19.5648 8.00406 19.454 8.01197 19.384 8.0807C19.3136 8.14927 19.3078 8.25916 19.3691 8.33541Z" />
+  </Svg>
+);
+
+export const IconFilledFirefox = withDefaultProps(
+  toNewsKitIcon(FilledFirefox),
+  {},
+);
+
+IconFilledFirefox.displayName = 'IconFilledFirefox';

package/site/components/icons/icon-filled-github.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import {Svg, customToNewsKitIcon} from 'newskit';
+
+export const IconFilledGitHub = customToNewsKitIcon(
+  'IconFilledGitHub',
+  props => (
+    <Svg {...props} viewBox="0 0 24 24">
+      <path
+        fillRule="nonzero"
+        d="M11.9990792,2 C6.47773105,2 2,6.47565999 2,11.9970521 C2,16.4137976 4.86503576,20.1603908 8.83876117,21.4822847 C9.33908346,21.5743385 9.5214095,21.2656512 9.5214095,21.000536 C9.5214095,20.7636506 9.512815,20.1346157 9.50790386,19.3006075 C6.72635747,19.904481 6.13947635,17.9603029 6.13947635,17.9603029 C5.68458209,16.8053335 5.02894503,16.4978735 5.02894503,16.4978735 C4.12099819,15.878044 5.09770097,15.8903179 5.09770097,15.8903179 C6.10141502,15.9608925 6.62936247,16.9207077 6.62936247,16.9207077 C7.52134811,18.4481885 8.97013414,18.0069436 9.53982627,17.7510338 C9.63068234,17.1054292 9.88913104,16.6647979 10.174591,16.415025 C7.95414224,16.1627974 5.6195095,15.3048551 5.6195095,11.4741861 C5.6195095,10.3830406 6.00933116,9.49011794 6.64900703,8.79173579 C6.54587311,8.53889444 6.20270727,7.52200584 6.74722981,6.14610707 C6.74722981,6.14610707 7.5864207,5.87730972 9.4968538,7.17097368 C10.2943,6.94881697 11.150066,6.8383523 12.0003069,6.83405645 C12.849934,6.8383523 13.7050861,6.94881697 14.5037601,7.17097368 C16.4129654,5.87730972 17.2509285,6.14610707 17.2509285,6.14610707 C17.7966788,7.52200584 17.453513,8.53889444 17.350993,8.79173579 C17.9918966,9.49011794 18.3786488,10.3830406 18.3786488,11.4741861 C18.3786488,15.3146742 16.0403327,16.1597289 13.8131312,16.407047 C14.1716443,16.7157344 14.4914822,17.3257448 14.4914822,18.2585575 C14.4914822,19.5945663 14.4792044,20.6728241 14.4792044,21.000536 C14.4792044,21.2681059 14.6596888,21.5792481 15.1667639,21.481671 C19.1374198,20.1567087 22,16.4125702 22,11.9970521 C22,6.47565999 17.5222689,2 11.9990792,2"
+      />
+    </Svg>
+  ),
+);

package/site/components/icons/icon-filled-instagram.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import {Svg, customToNewsKitIcon} from 'newskit';
+
+export const IconFilledInstagram = customToNewsKitIcon(
+  'IconFilledInstagram',
+  props => (
+    <Svg {...props} viewBox="0 0 24 24">
+      <path
+        fillRule="nonzero"
+        d="M13.0240794,2.0007793 C14.8239059,2.004046 15.2045862,2.01845805 16.1185317,2.06015873 C17.1825794,2.10869048 17.9092857,2.27769841 18.5451587,2.52484127 C19.2025397,2.78027778 19.7600397,3.12210317 20.3158333,3.67785714 C20.8715873,4.23365079 21.2134127,4.79115079 21.4688889,5.44853175 C21.7159921,6.08440476 21.885,6.81111111 21.9335317,7.87515873 C21.97697,8.82718537 21.9907981,9.20058213 21.9932626,11.2021502 L21.9932626,12.7915685 C21.9916853,14.072554 21.9854535,14.6866521 21.9697839,15.2123551 L21.9634561,15.40648 C21.9555357,15.6307614 21.9456944,15.8519643 21.9335317,16.1185317 C21.885,17.1825794 21.7159921,17.9092857 21.4688889,18.5451587 C21.2134127,19.2025397 20.8715873,19.7600397 20.3158333,20.3158333 C19.7600397,20.8715873 19.2025397,21.2134127 18.5451587,21.4688889 C17.9092857,21.7159921 17.1825794,21.885 16.1185317,21.9335317 C15.8519643,21.9456944 15.6307614,21.9555357 15.40648,21.9634561 L15.2123551,21.9697839 C14.6866521,21.9854535 14.072554,21.9916853 12.7915685,21.9932626 L11.2021502,21.9932626 C9.20058213,21.9907981 8.82718537,21.97697 7.87515873,21.9335317 C6.81111111,21.885 6.08440476,21.7159921 5.44853175,21.4688889 C4.79115079,21.2134127 4.23365079,20.8715873 3.67785714,20.3158333 C3.12210317,19.7600397 2.78027778,19.2025397 2.52484127,18.5451587 C2.27769841,17.9092857 2.10869048,17.1825794 2.06015873,16.1185317 C2.01845805,15.2045862 2.004046,14.8239059 2.0007793,13.0240794 L2.0007793,10.969636 C2.004046,9.16978458 2.01845805,8.78910431 2.06015873,7.87515873 C2.10869048,6.81111111 2.27769841,6.08440476 2.52484127,5.44853175 C2.78027778,4.79115079 3.12210317,4.23365079 3.67785714,3.67785714 C4.23365079,3.12210317 4.79115079,2.78027778 5.44853175,2.52484127 C6.08440476,2.27769841 6.81111111,2.10869048 7.87515873,2.06015873 C8.78910431,2.01845805 9.16978458,2.004046 10.969636,2.0007793 Z M13.0383134,3.80199172 L10.9554016,3.80199172 C9.21769716,3.80508367 8.85522193,3.81855379 7.9572619,3.85952381 C6.98257937,3.90396825 6.45325397,4.0668254 6.10099206,4.20373016 C5.63436508,4.38507937 5.30134921,4.60170635 4.95154762,4.95154762 C4.60170635,5.30134921 4.38507937,5.63436508 4.20373016,6.10099206 C4.0668254,6.45325397 3.90396825,6.98257937 3.85952381,7.9572619 C3.81855379,8.85522193 3.80508367,9.21769716 3.80199172,10.9554016 L3.80199172,13.0383134 C3.80508367,14.7759933 3.81855379,15.1384685 3.85952381,16.0364286 C3.90396825,17.0111111 4.0668254,17.5404365 4.20373016,17.8926984 C4.38507937,18.3593254 4.60174603,18.6923413 4.95154762,19.0421429 C5.30134921,19.3919841 5.63436508,19.6086111 6.10099206,19.7899603 C6.45325397,19.9268651 6.98257937,20.0897222 7.9572619,20.1341667 C8.23052322,20.1466358 8.45418654,20.1565577 8.68212095,20.164415 L8.87979571,20.1706555 C9.31580182,20.1831299 9.8196227,20.1889592 10.7363033,20.1912352 L11.1899586,20.1920446 C11.2708725,20.1921412 11.3545435,20.1922196 11.4411286,20.1922812 L12.552594,20.1922812 C12.639178,20.1922196 12.722848,20.1921412 12.8037611,20.1920446 L13.257412,20.1912352 C14.8087048,20.1873835 15.1776396,20.1733554 16.0364286,20.1341667 C17.0111111,20.0897222 17.5404365,19.9268651 17.8926984,19.7899603 C18.3593254,19.6086111 18.6923413,19.3919841 19.0421429,19.0421429 C19.3919841,18.6923413 19.6086111,18.3593254 19.7899603,17.8926984 C19.9268651,17.5404365 20.0897222,17.0111111 20.1341667,16.0364286 C20.1733554,15.1775103 20.1873835,14.8085252 20.1912352,13.2573255 L20.1920446,12.8037036 C20.1921412,12.722796 20.1922196,12.6391317 20.1922812,12.5525537 L20.1922812,11.4411682 C20.1922196,11.354589 20.1921412,11.2709235 20.1920446,11.1900148 L20.1912352,10.7363865 C20.188609,9.67873568 20.1812521,9.17067809 20.164415,8.68220139 L20.1571633,8.4865987 C20.1506801,8.32237284 20.1430732,8.15247061 20.1341667,7.9572619 C20.0897222,6.98257937 19.9268651,6.45325397 19.7899603,6.10099206 C19.6086111,5.63436508 19.3919841,5.30134921 19.0421429,4.95154762 C18.6923413,4.60170635 18.3593254,4.38507937 17.8926984,4.20373016 C17.5404365,4.0668254 17.0111111,3.90396825 16.0364286,3.85952381 C15.1384685,3.81855379 14.7759933,3.80508367 13.0383134,3.80199172 Z M11.9968651,6.86333333 C14.8320238,6.86333333 17.1303571,9.16166667 17.1303571,11.9968651 C17.1303571,14.8320238 14.8320238,17.1303571 11.9968651,17.1303571 C9.16166667,17.1303571 6.86333333,14.8320238 6.86333333,11.9968651 C6.86333333,9.16166667 9.16166667,6.86333333 11.9968651,6.86333333 Z M11.9968651,8.66456349 C10.1564683,8.66456349 8.66456349,10.1564683 8.66456349,11.9968651 C8.66456349,13.8372222 10.1564683,15.329127 11.9968651,15.329127 C13.8372222,15.329127 15.329127,13.8372222 15.329127,11.9968651 C15.329127,10.1564683 13.8372222,8.66456349 11.9968651,8.66456349 Z M17.3331746,5.46087302 C17.9957143,5.46087302 18.5328175,5.99797619 18.5328175,6.66051587 C18.5328175,7.32305556 17.9957143,7.86011905 17.3331746,7.86011905 C16.6706746,7.86011905 16.1335714,7.32305556 16.1335714,6.66051587 C16.1335714,5.99797619 16.6706746,5.46087302 17.3331746,5.46087302 Z"
+      />
+    </Svg>
+  ),
+);

package/site/components/icons/icon-filled-light.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import {Svg, SvgProps, toNewsKitIcon, withDefaultProps} from 'newskit';
+
+const Light: React.FC<SvgProps> = props => (
+  <Svg {...props} viewBox="0 0 16 16" fill="none">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M7.95857 0.606282C8.15777 0.323947 8.57647 0.323948 8.77567 0.606283L10.1795 2.596C10.4021 2.91144 10.7863 3.0706 11.1667 3.00492L13.5663 2.59063C13.9068 2.53185 14.2029 2.82791 14.1441 3.16841L13.7298 5.56801C13.6641 5.94843 13.8233 6.33268 14.1387 6.55523L16.1285 7.95906C16.4108 8.15826 16.4108 8.57696 16.1285 8.77616L14.1387 10.18C13.8233 10.4025 13.6641 10.7868 13.7298 11.1672L14.1441 13.5668C14.2029 13.9073 13.9068 14.2034 13.5663 14.1446L11.1667 13.7303C10.7863 13.6646 10.4021 13.8238 10.1795 14.1392L8.77567 16.1289C8.57647 16.4113 8.15777 16.4113 7.95857 16.1289L6.55475 14.1392C6.33219 13.8238 5.94794 13.6646 5.56752 13.7303L3.16792 14.1446C2.82743 14.2034 2.53136 13.9073 2.59015 13.5668L3.00443 11.1672C3.07011 10.7868 2.91095 10.4025 2.59551 10.18L0.605794 8.77616C0.323459 8.57696 0.323459 8.15826 0.605794 7.95906L2.59551 6.55523C2.91095 6.33268 3.07011 5.94843 3.00443 5.56801L2.59015 3.16841C2.53136 2.82791 2.82743 2.53185 3.16792 2.59063L5.56752 3.00492C5.94794 3.0706 6.33219 2.91144 6.55475 2.596L7.95857 0.606282ZM13.003 8.36878C13.003 10.9285 10.928 13.0035 8.3683 13.0035C5.80861 13.0035 3.73358 10.9285 3.73358 8.36878C3.73358 5.8091 5.80861 3.73406 8.3683 3.73406C10.928 3.73406 13.003 5.8091 13.003 8.36878ZM8.36712 12.0744C10.4144 12.0744 12.074 10.4148 12.074 8.36761C12.074 6.32038 10.4144 4.66077 8.36712 4.66077C6.31989 4.66077 4.66028 6.32038 4.66028 8.36761C4.66028 10.4148 6.31989 12.0744 8.36712 12.0744Z"
+      fill="white"
+    />
+  </Svg>
+);
+
+export const IconFilledLight = withDefaultProps(toNewsKitIcon(Light), {
+  title: 'Light icon',
+  overrides: {size: 'iconSize020'},
+});
+
+IconFilledLight.displayName = 'IconFilledLight';

package/site/components/icons/icon-filled-npm.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {Svg, SvgProps, toNewsKitIcon, withDefaultProps} from 'newskit';
+
+const FilledNpm: React.FC<SvgProps> = props => (
+  <Svg {...props} viewBox="0 0 24 24">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M3.46897 2H20.531C21.3423 2 22 2.65768 22 3.46897V20.531C22 21.3423 21.3423 22 20.531 22H3.46897C2.65768 22 2 21.3423 2 20.531V3.46897C2 2.65768 2.65768 2 3.46897 2ZM12.0337 17.975H6.26069L6.27538 6.43624L17.8068 6.45092L17.7994 17.9823H14.9129L14.9203 9.3301H12.0411L12.0337 17.975Z"
+    />
+  </Svg>
+);
+
+export const IconFilledNpm = withDefaultProps(toNewsKitIcon(FilledNpm), {});
+
+IconFilledNpm.displayName = 'IconFilledNpm';

package/site/components/icons/icon-filled-null-dot.tsx

@@ -0,0 +1,19 @@
+import {styled} from 'newskit';
+import React from 'react';
+import {IconFilledCircle} from './icon-filled-circle';
+
+// Apply horizontal margin so dot is centered with cross and check icons.
+const Icon = styled(IconFilledCircle)`
+  margin: 0 ${({theme}) => parseInt(theme.spacePresets.space030, 10) / 2}px;
+`;
+
+export const IconFilledNullDot: React.FC = () => (
+  <Icon
+    overrides={{
+      size: 'sizing030',
+      stylePreset: 'nullDotIcon',
+    }}
+  />
+);
+
+IconFilledNullDot.displayName = 'IconFilledNullDot';

package/site/components/icons/icon-filled-reddit.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import {Svg, customToNewsKitIcon} from 'newskit';
+
+export const IconFilledReddit = customToNewsKitIcon(
+  'IconFilledReddit',
+  props => (
+    <Svg {...props} viewBox="0 0 24 24">
+      <path
+        fillRule="nonzero"
+        d="M11.9999415,2 C17.5228317,2 22,6.47716835 22,11.9999415 C22,17.5228317 17.5228317,22 11.9999415,22 C6.47716835,22 2,17.5228317 2,11.9999415 C2,6.47716835 6.47716835,2 11.9999415,2 Z M16.1666813,5.9583443 C15.757496,5.9583443 15.4069329,6.19646044 15.2365657,6.5397689 L12.8130467,6.02457218 C12.7456487,6.00982887 12.6749744,6.02316806 12.6171713,6.0608454 C12.5591341,6.09852274 12.5185315,6.15761299 12.5042563,6.22512798 L11.7622934,9.7126225 C10.2101507,9.75568232 8.8146848,10.2209156 7.8051192,10.9481351 C7.54313295,10.6969139 7.18824046,10.5416411 6.79648969,10.5416411 C5.99110721,10.5416411 5.33818926,11.194559 5.33818926,11.9999415 C5.33818926,12.5925991 5.69226269,13.1015943 6.19985374,13.3296475 C6.17738774,13.4746234 6.16498464,13.6217054 6.16498464,13.7708937 C6.16498464,16.0144508 8.77665643,17.8332602 11.9983033,17.8332602 C15.2199503,17.8332602 17.8316221,16.0144508 17.8316221,13.7708937 C17.8316221,13.6227585 17.81957,13.4766125 17.797455,13.3325728 C18.3082054,13.1058066 18.665087,12.5949393 18.665087,11.9999415 C18.665087,11.194559 18.0120521,10.5416411 17.2066696,10.5416411 C16.8135147,10.5416411 16.4574521,10.6979669 16.1952318,10.9508264 C15.1984204,10.2314465 13.8249525,9.76691531 12.2951587,9.71355858 L12.9595437,6.58809419 L15.1299693,7.04946614 C15.1562966,7.60128711 15.6083077,8.0417142 16.1666813,8.0417142 C16.7419043,8.0417142 17.2083077,7.57531081 17.2083077,6.99997075 C17.2083077,6.4247477 16.7419043,5.9583443 16.1666813,5.9583443 Z M14.4752962,15.4125494 C14.5806055,15.5179757 14.5804885,15.6889279 14.4750622,15.7942372 C13.7641071,16.5042563 12.4017552,16.5594852 12.0011116,16.5594852 C11.600468,16.5594852 10.2379991,16.5042563 9.52798011,15.7941202 C9.42255375,15.6886939 9.42255375,15.5177417 9.52809712,15.4123153 C9.63340646,15.306889 9.80435864,15.306889 9.90978499,15.4124324 C10.3578178,15.8604651 11.3164838,16.0194822 12.0011116,16.0194822 C12.6858564,16.0194822 13.6446395,15.8604651 14.0934913,15.4121983 C14.1991517,15.306889 14.3701038,15.307006 14.4752962,15.4125494 Z M14.2917069,11.9999415 C14.8659939,11.9999415 15.3333333,12.467398 15.3333333,13.041919 C15.3333333,13.6162059 14.8659939,14.0834284 14.2917069,14.0834284 C13.7171859,14.0834284 13.2499634,13.6162059 13.2499634,13.041919 C13.2499634,12.467398 13.7171859,11.9999415 14.2917069,11.9999415 Z M9.70876115,11.9999415 C10.2828141,11.9999415 10.7499196,12.467398 10.7499196,13.041802 C10.7499196,13.6159719 10.2828141,14.0831944 9.70876115,14.0831944 C9.13412315,14.0831944 8.66666667,13.6159719 8.66666667,13.041802 C8.66666667,12.467398 9.13412315,11.9999415 9.70876115,11.9999415 Z"
+      />
+    </Svg>
+  ),
+);

package/site/components/icons/icon-filled-safari.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import {Svg, SvgProps, toNewsKitIcon, withDefaultProps} from 'newskit';
+
+const FilledSafari: React.FC<SvgProps> = props => (
+  <Svg {...props} viewBox="1 0 24 24">
+    <path d="M23 12C23 13.491 22.7078 14.9133 22.1277 16.2711C21.5477 17.6289 20.7656 18.802 19.7816 19.7816C18.7977 20.7656 17.6289 21.5434 16.2711 22.1277C14.9133 22.7121 13.491 23 12 23C10.509 23 9.08672 22.7078 7.72891 22.1277C6.37109 21.5477 5.19806 20.7656 4.21836 19.7816C3.23438 18.802 2.45233 17.6289 1.87225 16.2711C1.29217 14.9133 1 13.491 1 12C1 10.509 1.29217 9.08672 1.87225 7.72891C2.45233 6.37109 3.23438 5.19805 4.21836 4.21836C5.20233 3.23867 6.37109 2.45234 7.72891 1.87227C9.08672 1.29219 10.509 1 12 1C13.491 1 14.9133 1.29219 16.2711 1.87227C17.6289 2.45234 18.802 3.23437 19.7816 4.21836C20.7656 5.20234 21.5434 6.37109 22.1277 7.72891C22.7121 9.08672 23 10.509 23 12ZM21.8227 12C21.8227 10.6637 21.5605 9.3918 21.0449 8.18008C20.525 6.96836 19.8289 5.92422 18.9523 5.04766C18.0758 4.17109 17.0316 3.475 15.8199 2.95508C14.6039 2.43945 13.332 2.17734 12 2.17734C10.668 2.17734 9.3918 2.43516 8.18008 2.95508C6.96836 3.475 5.92422 4.17109 5.04767 5.04766C4.17108 5.92422 3.475 6.96836 2.95508 8.18008C2.43516 9.3918 2.17734 10.6637 2.17734 12C2.17734 13.3363 2.43516 14.6082 2.95508 15.8199C3.475 17.0316 4.17108 18.0758 5.04767 18.9523C5.92422 19.8289 6.96836 20.525 8.18008 21.0449C9.3918 21.5648 10.6637 21.8227 12 21.8227C13.3363 21.8227 14.6082 21.5648 15.8199 21.0449C17.0316 20.525 18.0758 19.8289 18.9523 18.9523C19.8289 18.0758 20.525 17.0316 21.0449 15.8199C21.5605 14.6082 21.8227 13.332 21.8227 12ZM20.7785 12C20.7785 13.6457 20.3531 15.1625 19.5023 16.5547C19.4766 16.5375 19.4078 16.4945 19.2918 16.4215C19.1758 16.3484 19.0684 16.2797 18.9652 16.2195C18.8621 16.1594 18.7934 16.125 18.7633 16.1293C18.6559 16.1293 18.6043 16.1809 18.6043 16.2883C18.6043 16.3699 18.8449 16.5504 19.3305 16.8297C18.7246 17.7449 17.9684 18.527 17.066 19.1672C16.1594 19.8074 15.1711 20.2629 14.1012 20.525L13.9035 19.7043C13.8949 19.6227 13.8348 19.5797 13.7188 19.5797L13.6199 19.6484L13.5941 19.7645L13.7918 20.598C13.2031 20.7227 12.6059 20.7828 12 20.7828C10.3715 20.7828 8.85039 20.3531 7.43242 19.4937C7.44102 19.4766 7.49258 19.3949 7.59141 19.2402C7.69023 19.0898 7.77617 18.9523 7.85352 18.8277C7.93086 18.7031 7.96953 18.6258 7.96953 18.5957C7.96953 18.4883 7.91797 18.4367 7.81055 18.4367C7.76328 18.4367 7.69023 18.4969 7.6 18.6129C7.50977 18.7332 7.41523 18.8707 7.325 19.0383C7.23047 19.2016 7.17461 19.2961 7.16172 19.3219C6.23789 18.7074 5.45156 17.9426 4.80273 17.0187C4.1582 16.0949 3.70703 15.0937 3.45352 14.0152L4.29998 13.8305L4.42463 13.6457L4.35586 13.5469L4.22695 13.5211L3.39338 13.7059C3.27734 13.1172 3.2215 12.5457 3.2215 12C3.2215 10.3156 3.66836 8.76445 4.5578 7.34648C4.57502 7.35508 4.64805 7.40234 4.78555 7.49258C4.91877 7.58281 5.04336 7.66016 5.1551 7.72461C5.26678 7.78906 5.33984 7.82344 5.36992 7.82344C5.47734 7.82344 5.52891 7.77617 5.52891 7.67734C5.52891 7.63008 5.47734 7.56562 5.37422 7.48828C5.27109 7.41094 5.13787 7.3207 4.97461 7.22617L4.72967 7.08008C5.36133 6.16484 6.13477 5.39141 7.05 4.75977C7.96523 4.12812 8.96641 3.69414 10.0449 3.44492L10.2297 4.26562C10.2469 4.34727 10.307 4.39023 10.4145 4.39023L10.5133 4.32148L10.5391 4.19258L10.3543 3.38047C10.9344 3.27305 11.4844 3.22148 12 3.22148C13.6715 3.22148 15.2227 3.66836 16.6535 4.55781C16.3355 5.01758 16.1766 5.28398 16.1766 5.35703C16.1766 5.46445 16.2238 5.51602 16.3227 5.51602C16.4129 5.51602 16.6105 5.25391 16.9113 4.72969C17.818 5.34414 18.5871 6.10469 19.2145 7.01133C19.8418 7.91797 20.2801 8.90625 20.5336 9.97187L19.8461 10.118C19.7645 10.1352 19.7215 10.1996 19.7215 10.3156L19.7902 10.4145L19.9063 10.4402L20.6066 10.2812C20.7227 10.8699 20.7785 11.4457 20.7785 12ZM12.8336 12.6746L17.1305 5.5418C17.0574 5.60625 16.7824 5.86406 16.3012 6.30664C15.8242 6.75352 15.3086 7.23047 14.7629 7.7418C14.2129 8.24883 13.6543 8.76875 13.0871 9.30156C12.5199 9.83437 12.0387 10.2855 11.652 10.6594C11.2652 11.0332 11.0547 11.2437 11.0332 11.291L6.74922 18.4109C6.80508 18.3551 7.08008 18.1016 7.56992 17.6504C8.05977 17.1992 8.57539 16.7223 9.1168 16.2195C9.6582 15.7168 10.2125 15.1969 10.7883 14.6598C11.3598 14.1227 11.841 13.6672 12.2234 13.2977C12.6059 12.9238 12.8121 12.7176 12.8336 12.6746ZM12.6488 11.9613C12.6488 12.1719 12.5801 12.3566 12.4469 12.5156C12.3137 12.6703 12.1418 12.7477 11.9355 12.7477C11.725 12.7477 11.5402 12.6789 11.3813 12.5457C11.2266 12.4125 11.1492 12.2406 11.1492 12.0344C11.1492 11.8195 11.218 11.6391 11.3598 11.4801C11.4973 11.3254 11.6691 11.248 11.8754 11.248C12.0816 11.248 12.2578 11.3168 12.4168 11.45C12.5715 11.5875 12.6488 11.7594 12.6488 11.9613Z" />
+  </Svg>
+);
+
+export const IconFilledSafari = withDefaultProps(
+  toNewsKitIcon(FilledSafari),
+  {},
+);
+
+IconFilledSafari.displayName = 'IconFilledSafari';

package/site/components/icons/icon-filled-search.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import {Svg, customToNewsKitIcon} from 'newskit';
+
+export const IconFilledSearch = customToNewsKitIcon(
+  'IconFilledSearch',
+  props => (
+    <Svg {...props} viewBox="0 0 24 24">
+      <path d="m19.6 21-6.3-6.3q-.75.6-1.725.95Q10.6 16 9.5 16q-2.725 0-4.612-1.887Q3 12.225 3 9.5q0-2.725 1.888-4.613Q6.775 3 9.5 3t4.613 1.887Q16 6.775 16 9.5q0 1.1-.35 2.075-.35.975-.95 1.725l6.3 6.3ZM9.5 14q1.875 0 3.188-1.312Q14 11.375 14 9.5q0-1.875-1.312-3.188Q11.375 5 9.5 5 7.625 5 6.312 6.312 5 7.625 5 9.5q0 1.875 1.312 3.188Q7.625 14 9.5 14Z" />
+    </Svg>
+  ),
+);

package/site/components/icons/icon-filled-storybook.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import {Svg, customToNewsKitIcon} from 'newskit';
+
+export const IconFilledStorybook = customToNewsKitIcon(
+  'IconFilledStorybook',
+  props => (
+    <Svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M4.61824 20.4293L4.00072 3.92089C3.98032 3.37568 4.397 2.91362 4.93974 2.87959L18.9352 2.00199C19.4877 1.96735 19.9635 2.38859 19.998 2.94286C19.9993 2.96374 20 2.98466 20 3.00558V20.9945C20 21.5498 19.5513 22 18.9978 22C18.9828 22 18.9678 21.9997 18.9528 21.999L5.57482 21.3962C5.0538 21.3727 4.6378 20.9522 4.61824 20.4293Z"
+        fill="#FF4785"
+      />
+      <path
+        d="M15.8555 4.42657L15.9531 2.14956L17.9154 2L17.9999 4.34821C18.0028 4.42993 17.9369 4.49849 17.8527 4.50135C17.8166 4.50257 17.7813 4.49135 17.7529 4.46968L16.9962 3.89144L16.1003 4.55068C16.0331 4.6001 15.9374 4.58735 15.8864 4.5222C15.865 4.49478 15.854 4.46096 15.8555 4.42657ZM13.346 9.44092C13.346 9.82708 16.0275 9.642 16.3875 9.37075C16.3875 6.74106 14.9328 5.3592 12.2692 5.3592C9.60547 5.3592 8.11304 6.76256 8.11304 8.8676C8.11304 12.5339 13.2137 12.604 13.2137 14.6038C13.2137 15.1652 12.9304 15.4985 12.3069 15.4985C11.4946 15.4985 11.1735 15.096 11.2112 13.7278C11.2112 13.4309 8.11304 13.3384 8.01859 13.7278C7.77806 17.0436 9.90773 18 12.3447 18C14.7062 18 16.5575 16.779 16.5575 14.5687C16.5575 10.6393 11.3813 10.7446 11.3813 8.79743C11.3813 8.00804 11.9858 7.90279 12.3447 7.90279C12.7226 7.90279 13.4026 7.96739 13.346 9.44092Z"
+        fill="white"
+      />
+    </Svg>
+  ),
+);

package/site/components/icons/icon-filled-timer.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import {Svg, SvgProps, toNewsKitIcon, withDefaultProps} from 'newskit';
+
+const FilledTimer: React.FC<SvgProps> = props => (
+  <Svg {...props} viewBox="0 0 24 24">
+    <path d="M0 0h24v24H0V0z" fill="none" />
+    <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z" />
+  </Svg>
+);
+
+export const IconFilledTimer = withDefaultProps(toNewsKitIcon(FilledTimer), {});
+
+IconFilledTimer.displayName = 'IconFilledTimer';

package/site/components/icons/icon-filled-twitter.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import {Svg, customToNewsKitIcon} from 'newskit';
+
+export const IconFilledTwitter = customToNewsKitIcon(
+  'IconFilledTwitter',
+  props => (
+    <Svg {...props} viewBox="0 0 24 24">
+      <path
+        fillRule="nonzero"
+        d="M8.28984,21 C15.83736,21 19.96472,14.4602319 19.96472,8.78946539 C19.96472,8.60363327 19.96112,8.41863784 19.95296,8.23464647 C20.75408,7.62895589 21.45056,6.87316048 22,6.01260963 C21.26472,6.35415252 20.47352,6.58441367 19.64352,6.68816506 C20.49072,6.15702487 21.14112,5.31630393 21.44784,4.31426631 C20.65488,4.80583036 19.77704,5.1633543 18.8424,5.35588007 C18.09368,4.52176909 17.02728,4 15.84728,4 C13.58104,4 11.74336,5.92199451 11.74336,8.29129138 C11.74336,8.62814872 11.77944,8.95555129 11.84976,9.2698176 C8.4396,9.09051177 5.4156,7.38271368 3.392,4.78600045 C3.03928,5.42005532 2.83632,6.15702487 2.83632,6.94294166 C2.83632,8.43194145 3.56072,9.74632096 4.66224,10.5152526 C3.98928,10.493582 3.35688,10.3001358 2.80384,9.97833919 C2.80288,9.99624467 2.80288,10.0142338 2.80288,10.0330597 C2.80288,12.111769 4.21752,13.8469273 6.09488,14.2404296 C5.75032,14.3384914 5.3876,14.3913711 5.0132,14.3913711 C4.74888,14.3913711 4.49176,14.3640109 4.24184,14.3139759 C4.76424,16.0190129 6.27896,17.2597624 8.07512,17.2947366 C6.67048,18.4457914 4.90136,19.1317219 2.97888,19.1317219 C2.64776,19.1317219 2.3212,19.1119757 2,19.0723159 C3.81608,20.2894703 5.97224,21 8.28984,21"
+      />
+    </Svg>
+  ),
+);

package/site/components/icons/icon-filled-whatsapp.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import {Svg, customToNewsKitIcon} from 'newskit';
+
+export const IconFilledWhatsApp = customToNewsKitIcon(
+  'IconFilledWhatsApp',
+  props => (
+    <Svg {...props} viewBox="0 0 24 24">
+      <path
+        fillRule="nonzero"
+        d="M16.785027,13.9561141 C16.538879,13.8223647 15.3300065,13.1749815 15.1031467,13.0835155 C14.8765111,12.9921609 14.7111041,12.9445362 14.534371,13.1873327 C14.3578622,13.4294616 13.8562586,13.9718036 13.7043084,14.1323697 C13.5515733,14.2930471 13.4047817,14.3079576 13.1584094,14.1738743 C12.9129343,14.0405699 12.115056,13.7477008 11.1897863,12.865199 C10.4697333,12.1783141 9.99751049,11.3454398 9.86058717,11.0912935 C9.72343957,10.8368134 9.8595779,10.707181 9.9897728,10.5881194 C10.106623,10.4806302 10.2513961,10.3066001 10.3822639,10.1662856 C10.5126831,10.0258597 10.5587727,9.92382288 10.648485,9.76092 C10.7381972,9.59801712 10.7020881,9.45124876 10.6438872,9.32450943 C10.5857986,9.19821519 10.1308453,7.9555244 9.94087963,7.45001363 C9.7508018,6.94450286 9.5390809,7.01961177 9.39273779,7.01393688 C9.24661897,7.00892961 9.08031489,6.98166786 8.91311369,6.97554788 C8.74602463,6.96920535 8.47195371,7.0215034 8.23309485,7.26162936 C7.99401171,7.5018666 7.32386122,8.07937064 7.27765941,9.30336766 C7.2314576,10.5265858 8.08473322,11.7425712 8.20371409,11.912818 C8.3228071,12.08351 9.83311279,14.7359115 12.3430372,15.8267154 C14.8535223,16.9171855 14.8666427,16.5847034 15.327203,16.5602234 C15.7880997,16.5361886 16.8326867,16.0134306 17.0636957,15.4409338 C17.2944805,14.8682145 17.3129836,14.3703815 17.2543342,14.2643388 C17.1954606,14.1584075 17.0310629,14.0895298 16.785027,13.9561141 Z M12.1813309,19.8526641 C10.5215422,19.8526641 8.97557584,19.3586144 7.68472873,18.511831 L4.54379079,19.5094999 L5.56471617,16.4977996 C4.58617983,15.1604159 4.00820867,13.5177007 4.00820867,11.7425712 C4.00820867,7.27019734 7.67486039,3.63181057 12.1813309,3.63181057 C16.6886985,3.63181057 20.3551259,7.27019734 20.3551259,11.7425712 C20.3551259,16.2144999 16.6886985,19.8526641 12.1813309,19.8526641 Z M12.1813309,2 C6.75912261,2 2.3633346,6.36165774 2.3633346,11.7425712 C2.3633346,13.5831289 2.87817077,15.304625 3.77215332,16.7731989 L2,22 L7.43588938,20.273274 C8.84268957,21.0448372 10.4602014,21.4850311 12.1813309,21.4850311 C17.6044363,21.4850311 22,17.122817 22,11.7425712 C22,6.36165774 17.6044363,2 12.1813309,2 L12.1813309,2 Z"
+      />
+    </Svg>
+  ),
+);

package/site/components/icons/icon-filled-youtube.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import {Svg, customToNewsKitIcon} from 'newskit';
+
+export const IconFilledYoutube = customToNewsKitIcon(
+  'IconFilledYoutube',
+  props => (
+    <Svg {...props} viewBox="0 0 24 24">
+      <path
+        fillRule="nonzero"
+        d="M12.2473734,5.00056183 C13.4225086,5.00578028 18.439862,5.04961525 19.813858,5.41782899 C20.6744329,5.64781541 21.3520517,6.32546805 21.5820535,7.18602595 C21.9442836,8.53773335 21.9925809,11.162261 21.9990206,11.8381047 L21.9999958,11.9892698 L21.9999958,11.9892698 L22.0000113,11.999934 C22.0000113,11.999934 22.0000113,12.0035497 21.9999958,12.0105978 L21.9990206,12.1617582 C21.9925809,12.8375828 21.9442836,15.4620518 21.5820535,16.8139549 C21.3520517,17.6743999 20.6744329,18.3520525 19.813858,18.5821518 C18.439862,18.9502661 13.4225086,18.9940892 12.2473734,18.9993063 L12.0412976,18.9999662 C12.0141159,19.0000113 11.999934,19.0000113 11.999934,19.0000113 L11.9894453,19.0000056 C11.9825021,19 11.9721611,18.9999887 11.9585703,18.9999662 L11.7524945,18.9993063 C10.5773593,18.9940892 5.56000592,18.9502661 4.18600991,18.5821518 C3.32554871,18.3520525 2.6478162,17.6743999 2.41781442,16.8139549 C2.05558434,15.4620518 2.007287,12.8375828 2.00084736,12.1617582 L2.00084736,11.8381047 C2.007287,11.162261 2.05558434,8.53773335 2.41781442,7.18602595 C2.6478162,6.32546805 3.32554871,5.64781541 4.18600991,5.41782899 C5.56000592,5.04961525 10.5773593,5.00578028 11.7524945,5.00056183 Z M9.9544636,9.04533681 L9.9544636,14.9545311 L15.1817767,12.0000469 L9.9544636,9.04533681 Z"
+      />
+    </Svg>
+  ),
+);

package/site/components/icons/index.tsx

@@ -0,0 +1,18 @@
+export * from './icon-filled-check-circle';
+export * from './icon-filled-cross-circle';
+export * from './icon-filled-dark';
+export * from './icon-filled-null-dot';
+export * from './icon-filled-light';
+export * from './icon-filled-circle';
+export * from './icon-filled-aa';
+export * from './icon-filled-aaa';
+export * from './icon-filled-npm';
+export * from './icon-filled-chrome';
+export * from './icon-filled-firefox';
+export * from './icon-filled-safari';
+export * from './icon-filled-edge';
+export * from './icon-filled-timer';
+export * from './icon-filled-expand-less';
+export * from './icon-filled-expand-more';
+export * from './icon-filled-search';
+export * from './icon-filled-github';

package/site/components/illustrations/illustration-loader.tsx

@@ -0,0 +1,76 @@
+import React, {useEffect, useState} from 'react';
+import {isNotSafari, isSafari} from './utils';
+
+/**
+ * Only for Safari. It reads the svg file as raw string and returns it as an inline SVG.
+ */
+const getSafariSVG = async (
+  sanitize: (source: string) => string,
+  path: string,
+  props?: React.SVGProps<SVGSVGElement>,
+) => {
+  const rawSVG = sanitize(
+    // `!!raw-loader!` would apply the raw-loader only for this usage
+
+    await (
+      await import(`!!raw-loader!../../public/static/illustrations/${path}.svg`)
+    ).default,
+  );
+  return (
+    <svg
+      viewBox="0 0 1490 838"
+      width="100%"
+      {...props}
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{__html: rawSVG}}
+    />
+  );
+};
+
+export const getIllustrationComponent = (
+  path: string,
+  props?: React.SVGProps<SVGSVGElement>,
+) => {
+  const Component = () => {
+    const [safariSVG, setSafariSVG] = useState<React.ReactElement | null>(null);
+    const [opacity, setOpacity] = useState(0);
+
+    useEffect(() => {
+      if (isNotSafari) {
+        setOpacity(1);
+      }
+    }, []);
+
+    useEffect(() => {
+      if (isSafari) {
+        // Dynamically importing 'isomorphic-dompurify' only for Safari to avoid bloating the bundle size for other browsers.
+        const importSanitizer = async () => {
+          const dompurify = await (await import('isomorphic-dompurify'))
+            .default;
+          const svg = await getSafariSVG(dompurify.sanitize, path, props);
+          setSafariSVG(svg);
+        };
+        importSanitizer();
+      }
+    }, []);
+
+    const nonSafariSVG = (
+      <svg viewBox="0 0 1490 838" width="100%" opacity={opacity} {...props}>
+        <use href={`static/illustrations/${path}.svg#nksvg`} />
+      </svg>
+    );
+
+    return safariSVG || nonSafariSVG;
+  };
+
+  return Component;
+};
+
+type IllustrationProps = {
+  path: string;
+} & React.SVGProps<SVGSVGElement>;
+
+export const Illustration: React.FC<IllustrationProps> = ({path, ...props}) => {
+  const Component = getIllustrationComponent(path, props);
+  return <Component />;
+};

package/site/components/illustrations/utils.ts

@@ -0,0 +1,7 @@
+const safariUACheck = /^((?!chrome|android).)*safari/i;
+const isWindowLoaded = typeof window !== 'undefined';
+
+export const isSafari =
+  isWindowLoaded && safariUACheck.test(window.navigator.userAgent);
+export const isNotSafari =
+  isWindowLoaded && !safariUACheck.test(window.navigator.userAgent);

package/site/components/inverse-theme.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import {ThemeProvider, useTheme} from 'newskit';
+import {docsThemeDark, docsThemeLight} from '../theme/doc-theme';
+
+export interface InverseThemeProps {
+  children: React.ReactNode;
+}
+
+export const InverseTheme = ({children}: InverseThemeProps) => {
+  const inverseTheme =
+    useTheme().name === 'docs-theme-dark' ? docsThemeLight : docsThemeDark;
+
+  return <ThemeProvider theme={inverseTheme}>{children}</ThemeProvider>;
+};

package/site/components/json.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import {Code} from './code';
+
+interface Props {
+  src: string;
+}
+
+const JSONViewer: React.FC<Props> = ({src}) => (
+  <Code>{JSON.stringify(src, null, 2)}</Code>
+);
+
+export default JSONViewer;

package/site/components/layout-cells/index.ts

@@ -0,0 +1,16 @@
+import {Cell, withDefaultProps} from 'newskit';
+
+export const ComponentPageCell = withDefaultProps(Cell, {
+  xs: 12,
+  md: 10,
+  xl: 8,
+  mdOffset: 1,
+});
+
+export const ComponentPageCellCompact = withDefaultProps(Cell, {
+  xs: 12,
+  md: 8,
+  lg: 10,
+  xl: 8,
+  mdOffset: 1,
+});