Merge pull request #116 from sebgroup/chore/fix-audit-warnings

Chore/fix audit warnings

develop/components/common/About.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-const Highlight = (require("react-highlight")).default;
+import Highlight from "react-highlight";
 const docMD: string = require("../../../README.md");
 
 const About: React.FunctionComponent = () => {

develop/components/common/TitleBar.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { TextBoxGroup } from "../../../src/TextBoxGroup/TextBoxGroup";
 import { Icon } from "../../../src/Icon/Icon";
-const SEBLogo: string = require("../../assets/images/icons/seblogo.svg");
-const reactLogo: string = require("../../assets/images/icons/ReactLogo.png");
+const SEBLogo: string = require("../../assets/images/icons/seblogo.svg").default;
+const reactLogo: string = require("../../assets/images/icons/ReactLogo.png").default;
 const sidebarData = require("../../assets/components-list.json");
 
 interface SideBarDataItem {

develop/components/pages/AccordionPage.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Accordion, AccrodionListItem } from "../../../src/Accordion/Accordion";
-const Highlight = require("react-highlight").default;
+import Highlight from "react-highlight";
 const docMD: string = require("../../../src/Accordion/readme.md");
 
 const plusIcon: JSX.Element = <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 640" width="640" height="640"><defs><path d="M585.08 342.54C593.39 342.54 600.1 335.82 600.1 327.51C600.1 326.01 600.1 313.99 600.1 312.49C600.1 304.18 593.39 297.46 585.08 297.46C568.91 297.46 488.06 297.46 342.54 297.46C342.49 151.99 342.46 71.18 342.45 55.01C342.45 46.7 335.73 39.99 327.42 39.99C325.92 39.99 313.9 39.99 312.4 39.99C304.09 39.99 297.37 46.7 297.37 55.01C297.38 71.18 297.41 151.99 297.46 297.46C151.99 297.51 71.18 297.54 55.01 297.55C46.7 297.55 39.99 304.27 39.99 312.58C39.99 314.08 39.99 326.1 39.99 327.6C39.99 335.91 46.7 342.63 55.01 342.63C71.18 342.62 151.99 342.59 297.46 342.54C297.46 488.06 297.46 568.91 297.46 585.08C297.46 593.39 304.18 600.1 312.49 600.1C313.99 600.1 326.01 600.1 327.51 600.1C335.82 600.1 342.54 593.39 342.54 585.08C342.54 568.91 342.54 488.06 342.54 342.54C488.06 342.54 568.91 342.54 585.08 342.54Z" id="e9WTWunf5M" /></defs><g><g><g><use xlinkHref="#e9WTWunf5M" /><g><use xlinkHref="#e9WTWunf5M" strokeWidth="1" /></g></g></g></g></svg>;

develop/components/pages/BreadcrumbPage.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Breadcrumb } from "../../../src/Breadcrumb/Breadcrumb";
-const Highlight = require("react-highlight").default;
+import Highlight from "react-highlight";
 const docMD: string = require("../../../src/Breadcrumb/readme.md");
 
 const userIcon: JSX.Element = <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170 170"><title>regular_black</title><path d="M149.1,165h-6V132.3c0-18.8-14.2-34.8-32.5-36.8l-24,15.9a3,3,0,0,1-3.3,0L59.2,95.5C41,97.7,26.9,113.6,26.9,132.3V165h-6V132.3c0-22.5,16.7-40.9,38.8-42.9a3,3,0,0,1,1.9.5L85,105.3l23.2-15.4a3,3,0,0,1,1.9-.5c21.9,1.8,39,20.7,39,42.9Z" /><path d="M85,86.4A31.7,31.7,0,0,1,53.4,54.8V36.6a31.6,31.6,0,1,1,63.3,0V54.8A31.7,31.7,0,0,1,85,86.4Zm0-75.5A25.7,25.7,0,0,0,59.4,36.6V54.8a25.6,25.6,0,0,0,51.3,0V36.6A25.7,25.7,0,0,0,85,10.9Z" /></svg>;

develop/components/pages/ButtonPage.tsx

@@ -3,7 +3,7 @@ import { Button, ButtonTheme, ButtonIconPosition, ButtonSizes } from "../../../s
 import { Loader } from "../../../src/Loader/Loader";
 import { RadioGroup, RadioListModel } from "../../../src/RadioGroup/RadioGroup";
 import { CheckBox } from "../../../src/CheckBox/CheckBox";
-const Highlight = (require("react-highlight")).default;
+import Highlight from "react-highlight";
 const docMD: string = require("../../../src/Button/readme.md");
 
 const mysvg: JSX.Element = <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M12.8 371.2L.2 485.3c-1.7 15.3 11.2 28.2 26.5 26.5l114.2-12.7 352.4-352.4c25-25 25-65.5 0-90.5l-37.5-37.5c-25-25-65.5-25-90.5 0L12.8 371.2zm113.3 97.4L33 478.9l10.3-93.1 271.9-271.9 82.7 82.7-271.8 272zm344.5-344.5L420.7 174 338 91.3l49.9-49.9c12.5-12.5 32.7-12.5 45.3 0l37.5 37.5c12.4 12.4 12.4 32.7-.1 45.2z" /></svg>;

develop/components/pages/CarouselPage.tsx

@@ -1,11 +1,11 @@
 import * as React from "react";
 import { Carousel, CarouselItem } from "../../../src/Carousel/Carousel";
-const Highlight = (require("react-highlight")).default;
+import Highlight from "react-highlight";
 const docMD: string = require("../../../src/Carousel/readme.md");
 
-const firstImg: string = require("../../assets/images/cat-pet-animal-1.jpeg");
-const secondImg: string = require("../../assets/images/cat-pet-animal-2.jpg");
-const thirdImg: string = require("../../assets/images/cat-pet-animal-3.jpg");
+const firstImg: string = require("../../assets/images/cat-pet-animal-1.jpeg").default;
+const secondImg: string = require("../../assets/images/cat-pet-animal-2.jpg").default;
+const thirdImg: string = require("../../assets/images/cat-pet-animal-3.jpg").default;
 
 const CarouselPage: React.FunctionComponent = () => {
     return (

develop/components/pages/ChartPage.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Chart, ExtendedChartOptions } from "../../../src/Chart/Chart";
 import { ChartData, ChartOptions } from "chart.js";
-const Highlight = (require("react-highlight")).default;
+import Highlight from "react-highlight";
 const docMD: string = require("../../../src/Chart/readme.md");
 
 const ChartPage: React.FunctionComponent = () => {

develop/components/pages/CheckBoxPage.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { CheckBox } from "../../../src/CheckBox/CheckBox";
 import { Tabs } from "../../../src/Tabs/Tabs";
-const Highlight = (require("react-highlight")).default;
+import Highlight from "react-highlight";
 const docMD: string = require("../../../src/CheckBox/readme.md");
 
 const CheckBoxPage: React.FunctionComponent = () => {

develop/components/pages/DatepickerPage.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Datepicker } from "../../../src/Datepicker/Datepicker";
 import * as moment from "moment";
-const Highlight = (require("react-highlight")).default;
+import Highlight from "react-highlight";
 const docMD: string = require("../../../src/Datepicker/readme.md");
 
 const moreIcon: JSX.Element = <svg className="dropdown-more-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M192 256c0 17.7-14.3 32-32 32s-32-14.3-32-32 14.3-32 32-32 32 14.3 32 32zm88-32c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zm-240 0c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32z" /></svg>;

develop/components/pages/DialoguePage.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Dialogue } from "../../../src/Dialogue/Dialogue";
 import { Button } from "../../../src/Button/Button";
-const Highlight = (require("react-highlight")).default;
+import Highlight from "react-highlight";
 const docMD: string = require("../../../src/Dialogue/readme.md");
 
 const DialoguePage: React.FunctionComponent = () => {

develop/components/pages/DropdownPage.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Dropdown, DropdownItem } from "../../../src/Dropdown/Dropdown";
 import { Toggle } from "../../../src/Toggle/Toggle";
-const Highlight = (require("react-highlight")).default;
+import Highlight from "react-highlight";
 const docMD: string = require("../../../src/Dropdown/readme.md");
 
 const DropdownPage: React.FunctionComponent = () => {

develop/components/pages/IconPage.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Icon } from "../../../src/Icon/Icon";
-const Highlight = (require("react-highlight")).default;
+import Highlight from "react-highlight";
 const docMD: string = require("../../../src/Icon/readme.md");
 
 const mySvg: JSX.Element = <svg id="PIKTO_REGULAR" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170 170"><title>regular_black</title><path d="M137.5,102.1V40.4a3,3,0,0,0-3-3H8a3,3,0,0,0-3,3v61.7a3,3,0,0,0,3,3H134.5A3,3,0,0,0,137.5,102.1ZM112,91.3v7.7H30.5V91.3a3,3,0,0,0-3-3,6.1,6.1,0,0,1-6.1-6.1,3,3,0,0,0-3-3H11V63h7.5a3,3,0,0,0,3-3,6.1,6.1,0,0,1,6.1-6.1,3,3,0,0,0,3-3V43.4H112v7.5a3,3,0,0,0,3,3A6.1,6.1,0,0,1,121,60a3,3,0,0,0,3,3h7.5V79.3H124a3,3,0,0,0-3,3,6.1,6.1,0,0,1-6.1,6.1A3,3,0,0,0,112,91.3ZM131.5,57h-4.9a12.1,12.1,0,0,0-8.7-8.7V43.4h13.6ZM24.5,43.4v4.9A12.1,12.1,0,0,0,15.9,57H11V43.4ZM11,85.3h4.9A12.1,12.1,0,0,0,24.5,94v5.1H11ZM118,99.1V94a12.1,12.1,0,0,0,8.7-8.7h4.9V99.1Z" /><path d="M151.3,115.8V54.2h-6v58.7H21.7v6H148.3A3,3,0,0,0,151.3,115.8Z" /><path d="M159,67.9v58.7H35.5v6H162a3,3,0,0,0,3-3V67.9Z" /><path d="M71.3,88.8A17.5,17.5,0,1,1,88.8,71.3,17.5,17.5,0,0,1,71.3,88.8Zm0-29A11.5,11.5,0,1,0,82.8,71.3,11.5,11.5,0,0,0,71.3,59.8Z" /></svg>;

develop/components/pages/ImageCropperPage.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { ImageCropper, OptionProps } from "../../../src/ImageCropper";
-const Highlight = (require("react-highlight")).default;
+import Highlight from "react-highlight";
 const docMD: string = require("../../../src/ImageCropper/readme.md");
 
 const ImageCropperPage: React.FunctionComponent = () => {

develop/components/pages/ImagePage.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { Image } from "../../../src/Image/Image";
-const Highlight = (require("react-highlight")).default;
+import Highlight from "react-highlight";
 const docMD: string = require("../../../src/Image/readme.md");
-const imgSrc: string = require("../../assets/images/cat-pet-animal-1.jpeg");
+const imgSrc: string = require("../../assets/images/cat-pet-animal-1.jpeg").default;
 
 const ImagePage: React.FunctionComponent = () => {
     return (

develop/components/pages/InlineLinkPage.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { InlineLink } from "../../../src/InlineLink/InlineLink";
-const Highlight = (require("react-highlight")).default;
+import Highlight from "react-highlight";
 const docMD: string = require("../../../src/InlineLink/readme.md");
 
 const InlineLinkPage: React.FunctionComponent = () => {

develop/components/pages/LoaderPage.tsx

@@ -3,7 +3,7 @@ import { Loader } from "../../../src/Loader/Loader";
 import { Button } from "../../../src/Button/Button";
 import { TextBoxGroup } from "../../../src/TextBoxGroup/TextBoxGroup";
 
-const Highlight = (require("react-highlight")).default;
+import Highlight from "react-highlight";
 const docMD: string = require("../../../src/Loader/readme.md");
 const mysvg: JSX.Element = <svg id="PIKTO_REGULAR" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170 170"><title>regular_black</title><path d="M149.1,165h-6V132.3c0-18.8-14.2-34.8-32.5-36.8l-24,15.9a3,3,0,0,1-3.3,0L59.2,95.5C41,97.7,26.9,113.6,26.9,132.3V165h-6V132.3c0-22.5,16.7-40.9,38.8-42.9a3,3,0,0,1,1.9.5L85,105.3l23.2-15.4a3,3,0,0,1,1.9-.5c21.9,1.8,39,20.7,39,42.9Z" /><path d="M85,86.4A31.7,31.7,0,0,1,53.4,54.8V36.6a31.6,31.6,0,1,1,63.3,0V54.8A31.7,31.7,0,0,1,85,86.4Zm0-75.5A25.7,25.7,0,0,0,59.4,36.6V54.8a25.6,25.6,0,0,0,51.3,0V36.6A25.7,25.7,0,0,0,85,10.9Z" /></svg>;
 

develop/components/pages/ModalPage.tsx

@@ -3,7 +3,7 @@ import { Button } from "../../../src/Button/Button";
 import { Modal, ModalProps } from "../../../src/Modal/Modal";
 import { getParameterByName } from "../../utils/queryString";
 import { RouteComponentProps } from "react-router";
-const Highlight = (require("react-highlight")).default;
+import Highlight from "react-highlight";
 const docMD: string = require("../../../src/Modal/readme.md");
 
 class ModalPage extends React.Component<RouteComponentProps, Partial<ModalProps>>  {

develop/components/pages/NotificationPage.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Notification, NotificationAction } from "../../../src/Notification/Notification";
 import { Button } from "../../../src/Button/Button";
-const Highlight = (require("react-highlight")).default;
+import Highlight from "react-highlight";
 const docMD: string = require("../../../src/Notification/readme.md");
 
 const NotificationPage: React.FunctionComponent = () => {

develop/components/pages/PaginationPage.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Pagination } from "../../../src/Pagination/Pagination";
-const Highlight = (require("react-highlight")).default;
+import Highlight from "react-highlight";
 const docMD: string = require("../../../src/Pagination/readme.md");
 
 const PaginationPage: React.FunctionComponent = () => {

develop/components/pages/ProgressBarPage.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { ProgressBar, ProgressBarProps } from "../../../src/ProgressBar/ProgressBar";
 import { RouteComponentProps } from "react-router";
-const Highlight = (require("react-highlight")).default;
+import Highlight from "react-highlight";
 const docMD: string = require("../../../src/ProgressBar/readme.md");
 
 interface ProgressBarPageState {

develop/components/pages/RadioButtonPage.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { RadioButton } from "../../../src/RadioButton/RadioButton";
 import { Tabs } from "../../../src/Tabs/Tabs";
-const Highlight = (require("react-highlight")).default;
+import Highlight from "react-highlight";
 const docMD: string = require("../../../src/RadioButton/readme.md");
 
 const RadioButtonPage: React.FunctionComponent = () => {

develop/components/pages/RadioGroupPage.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { RadioGroup, RadioListModel } from "../../../src/RadioGroup/RadioGroup";
 import { Tabs } from "../../../src/Tabs/Tabs";
-const Highlight = (require("react-highlight")).default;
+import Highlight from "react-highlight";
 const docMD: string = require("../../../src/RadioGroup/readme.md");
 
 const RadioGroupPage: React.FunctionComponent = () => {

develop/components/pages/RatingPage.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Rating } from "../../../src/Rating/Rating";
-const Highlight = (require("react-highlight")).default;
+import Highlight from "react-highlight";
 const docMD: string = require("../../../src/Rating/readme.md");
 
 const RatingPage: React.FunctionComponent = () => {

develop/components/pages/SliderPage.tsx

@@ -4,7 +4,7 @@ import { TextBoxGroup } from "../../../src/TextBoxGroup/TextBoxGroup";
 import { RadioListModel, RadioGroup } from "../../../src/RadioGroup/RadioGroup";
 import { CheckBox } from "../../../src/CheckBox/CheckBox";
 import { TextBox } from "../../../src/TextBox/TextBox";
-const Highlight = (require("react-highlight")).default;
+import Highlight from "react-highlight";
 const docMD: string = require("../../../src/Slider/readme.md");
 
 const SliderPage: React.FunctionComponent = () => {

develop/components/pages/StepTrackerPage.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { StepTracker } from "../../../src/StepTracker/StepTracker";
-const Highlight = (require("react-highlight")).default;
+import Highlight from "react-highlight";
 const docMD = require("../../../src/StepTracker/readme.md");
 
 const StepTrackerPage: React.FunctionComponent = () => {

develop/components/pages/StepperPage.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Stepper } from "../../../src/Stepper/Stepper";
-const Highlight = (require("react-highlight")).default;
+import Highlight from "react-highlight";
 const docMD = require("../../../src/Stepper/readme.md");
 
 const StepperPage: React.FunctionComponent = () => {

develop/components/pages/TabsPage.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Tabs, TabsListItem } from "../../../src/Tabs/Tabs";
-const Highlight = (require("react-highlight")).default;
+import Highlight from "react-highlight";
 const docMD = require("../../../src/Tabs/readme.md");
 
 const TabsPage: React.FunctionComponent = () => {

develop/components/pages/TextAreaPage.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { TextArea } from "../../../src/TextArea/TextArea";
-const Highlight = (require("react-highlight")).default;
+import Highlight from "react-highlight";
 const docMD: string = require("../../../src/TextArea/readme.md");
 
 const TextAreaPage: React.FunctionComponent = () => {

develop/components/pages/TextBoxGroupPage.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { TextBoxGroup } from "../../../src/TextBoxGroup/TextBoxGroup";
-const Highlight = (require("react-highlight")).default;
+import Highlight from "react-highlight";
 const docMD: string = require("../../../src/TextBoxGroup/readme.md");
 
 const moneyIcon: JSX.Element = <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170 170"><title>regular_black</title><path d="M137.5,102.1V40.4a3,3,0,0,0-3-3H8a3,3,0,0,0-3,3v61.7a3,3,0,0,0,3,3H134.5A3,3,0,0,0,137.5,102.1ZM112,91.3v7.7H30.5V91.3a3,3,0,0,0-3-3,6.1,6.1,0,0,1-6.1-6.1,3,3,0,0,0-3-3H11V63h7.5a3,3,0,0,0,3-3,6.1,6.1,0,0,1,6.1-6.1,3,3,0,0,0,3-3V43.4H112v7.5a3,3,0,0,0,3,3A6.1,6.1,0,0,1,121,60a3,3,0,0,0,3,3h7.5V79.3H124a3,3,0,0,0-3,3,6.1,6.1,0,0,1-6.1,6.1A3,3,0,0,0,112,91.3ZM131.5,57h-4.9a12.1,12.1,0,0,0-8.7-8.7V43.4h13.6ZM24.5,43.4v4.9A12.1,12.1,0,0,0,15.9,57H11V43.4ZM11,85.3h4.9A12.1,12.1,0,0,0,24.5,94v5.1H11ZM118,99.1V94a12.1,12.1,0,0,0,8.7-8.7h4.9V99.1Z" /><path d="M151.3,115.8V54.2h-6v58.7H21.7v6H148.3A3,3,0,0,0,151.3,115.8Z" /><path d="M159,67.9v58.7H35.5v6H162a3,3,0,0,0,3-3V67.9Z" /><path d="M71.3,88.8A17.5,17.5,0,1,1,88.8,71.3,17.5,17.5,0,0,1,71.3,88.8Zm0-29A11.5,11.5,0,1,0,82.8,71.3,11.5,11.5,0,0,0,71.3,59.8Z" /></svg>;

develop/components/pages/TextBoxPage.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { TextBox } from "../../../src/TextBox/TextBox";
-const Highlight = (require("react-highlight")).default;
+import Highlight from "react-highlight";
 const docMD: string = require("../../../src/TextBox/readme.md");
 
 const TextBoxPage: React.FunctionComponent = () => {

develop/components/pages/TextLabelPage.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { TextLabel } from "../../../src/TextLabel/TextLabel";
 import { Tooltip } from "../../../src/Tooltip/Tooltip";
 import { TextBox } from "../../../src/TextBox/TextBox";
-const Highlight = (require("react-highlight")).default;
+import Highlight from "react-highlight";
 const docMD: string = require("../../../src/TextLabel/readme.md");
 
 const TextLabelPage: React.FunctionComponent = () => {

develop/components/pages/TimelinePage.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Timeline, TimelineListItem } from "../../../src/Timeline/Timeline";
-const Highlight = (require("react-highlight")).default;
+import Highlight from "react-highlight";
 const docMD: string = require("../../../src/Timeline/readme.md");
 
 const TimelinePage: React.FunctionComponent = () => {

develop/components/pages/TimepickerPage.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Timepicker, TimepickerValue, TimepickerDayperiodTypes } from "../../../src/Timepicker/Timepicker";
-const Highlight = (require("react-highlight")).default;
+import Highlight from "react-highlight";
 const docMD: string = require("../../../src/Timepicker/readme.md");
 
 const TimepickerPage: React.FunctionComponent = () => {

develop/components/pages/TimerPage.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Timer } from "../../../src/Timer/Timer";
-const Highlight = (require("react-highlight")).default;
+import Highlight from "react-highlight";
 const docMD: string = require("../../../src/Timer/readme.md");
 
 const TimerPage: React.FunctionComponent = () => {

develop/components/pages/TogglePage.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Toggle } from "../../../src/Toggle/Toggle";
-const Highlight = (require("react-highlight")).default;
+import Highlight from "react-highlight";
 const docMD: string = require("../../../src/Toggle/readme.md");
 
 const TogglePage: React.FunctionComponent = () => {

develop/components/pages/TooltipPage.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Tooltip } from "../../../src/Tooltip/Tooltip";
-const Highlight = (require("react-highlight")).default;
+import Highlight from "react-highlight";
 const docMD: string = require("../../../src/Tooltip/readme.md");
 
 const moneySVG: JSX.Element = <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170 170"><title>regular_black</title><path d="M137.5,102.1V40.4a3,3,0,0,0-3-3H8a3,3,0,0,0-3,3v61.7a3,3,0,0,0,3,3H134.5A3,3,0,0,0,137.5,102.1ZM112,91.3v7.7H30.5V91.3a3,3,0,0,0-3-3,6.1,6.1,0,0,1-6.1-6.1,3,3,0,0,0-3-3H11V63h7.5a3,3,0,0,0,3-3,6.1,6.1,0,0,1,6.1-6.1,3,3,0,0,0,3-3V43.4H112v7.5a3,3,0,0,0,3,3A6.1,6.1,0,0,1,121,60a3,3,0,0,0,3,3h7.5V79.3H124a3,3,0,0,0-3,3,6.1,6.1,0,0,1-6.1,6.1A3,3,0,0,0,112,91.3ZM131.5,57h-4.9a12.1,12.1,0,0,0-8.7-8.7V43.4h13.6ZM24.5,43.4v4.9A12.1,12.1,0,0,0,15.9,57H11V43.4ZM11,85.3h4.9A12.1,12.1,0,0,0,24.5,94v5.1H11ZM118,99.1V94a12.1,12.1,0,0,0,8.7-8.7h4.9V99.1Z" /><path d="M151.3,115.8V54.2h-6v58.7H21.7v6H148.3A3,3,0,0,0,151.3,115.8Z" /><path d="M159,67.9v58.7H35.5v6H162a3,3,0,0,0,3-3V67.9Z" /><path d="M71.3,88.8A17.5,17.5,0,1,1,88.8,71.3,17.5,17.5,0,0,1,71.3,88.8Zm0-29A11.5,11.5,0,1,0,82.8,71.3,11.5,11.5,0,0,0,71.3,59.8Z" /></svg>;

develop/components/pages/VideoPage.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { Video } from "../../../src/Video/Video";
-const Highlight = (require("react-highlight")).default;
+import Highlight from "react-highlight";
 const docMD: string = require("../../../src/Video/readme.md");
-const videoSrc: string = require("../../assets/videos/sample.mp4");
+const videoSrc: string = require("../../assets/videos/sample.mp4").default;
 const vimeoSrc: string = "https://player.vimeo.com/video/259422408";
 const youtubeSrc: string = "https://www.youtube.com/embed/f19fctL72CY";