Grabbed dndbeyond's source code

```
~/go/bin/sourcemapper -output ddb -jsurl https://media.dndbeyond.com/character-app/static/js/main.90aa78c5.js
```

ddb_main/tools/js/smartComponents/Svg/icons/AdvantageDisadvantageSvg/AdvantageDisadvantageSvg.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+
+import BaseSvg from "../../BaseSvg";
+import { InjectedSvgProps } from "../../hocs";
+
+export default class AdvantageDisadvantageSvg extends React.PureComponent<InjectedSvgProps> {
+  static defaultProps = {
+    fillColor: "#3BAE1D",
+    secondaryFillColor: "#C53131",
+  };
+
+  render() {
+    const { fillColor, secondaryFillColor, className } = this.props;
+
+    let classNames: Array<string> = ["ddbc-advantage-disadvantage-svg"];
+
+    if (className) {
+      classNames.push(className);
+    }
+
+    return (
+      <BaseSvg className={classNames.join(" ")} viewBox="0 0 24 24">
+        <g id="svgPathAdvantage" fill={fillColor}>
+          <path d="M10.241 0.13251L14.5471 2.50087L11.6548 10.1452L9.69909 5H7.3009L3.5 15H5.89819L6.66742 12.8676H10.3326L10.4752 13.2629L6.90213 22.7064L5.91835 19.7551L0.25904 16.6425C0.0992659 16.5546 0 16.3867 0 16.2043V5.79562C0 5.61327 0.0992665 5.44539 0.259041 5.35751L9.75904 0.13251C9.90908 0.0499869 10.0909 0.0499871 10.241 0.13251Z" />
+          <path d="M9.63876 10.8529L8.50754 7.73529L7.37632 10.8529H9.63876Z" />
+        </g>
+        <g id="svgPathDisadvantage" fill={secondaryFillColor}>
+          <path d="M13.7592 23.8675L9.45312 21.4991L12.5002 13.4457V18H15.8054C19.0058 18 21.0002 15.9265 21.0002 13C21.0002 10.0735 19.0058 8 15.8054 8H14.5606L17.0981 1.29358L18.0818 4.24492L23.7411 7.35754C23.9009 7.44542 24.0002 7.61331 24.0002 7.79565V18.2044C24.0002 18.3867 23.9009 18.5546 23.7411 18.6425L14.2411 23.8675C14.0911 23.95 13.9093 23.95 13.7592 23.8675Z" />
+          <path d="M18.7275 13C18.7275 11.3088 17.6916 10.0147 15.7899 10.0147H14.6956V15.9853H15.7899C17.6916 15.9853 18.7275 14.7059 18.7275 13Z" />
+        </g>
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/icons/AdvantageSvg/AdvantageSvg.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+import BaseSvg from "../../BaseSvg";
+import { InjectedSvgProps } from "../../hocs";
+
+export default class AdvantageSvg extends React.PureComponent<InjectedSvgProps> {
+  render() {
+    const { fillColor, secondaryFillColor, className } = this.props;
+
+    let classNames: Array<string> = ["ddbc-advantage-svg"];
+
+    if (className) {
+      classNames.push(className);
+    }
+
+    return (
+      <BaseSvg className={classNames.join(" ")} viewBox="0 0 24 24">
+        <g>
+          <path
+            d="M13.3665 12.5235L12.009 8.78235L10.6516 12.5235H13.3665Z"
+            fill={fillColor}
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M12.241 1.13253C12.0909 1.05 11.9091 1.05 11.759 1.13252L2.25904 6.35753C2.09927 6.4454 2 6.61329 2 6.79563V17.2044C2 17.3867 2.09927 17.5546 2.25904 17.6425L11.759 22.8675C11.9091 22.95 12.0909 22.95 12.241 22.8675L21.741 17.6425C21.9007 17.5546 22 17.3867 22 17.2044V6.79563C22 6.61329 21.9007 6.4454 21.741 6.35753L12.241 1.13253ZM18 17.5H15.1222L14.1991 14.9412H9.80091L8.87783 17.5H6L10.5611 5.5H13.4389L18 17.5Z"
+            fill={fillColor}
+          />
+        </g>
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/icons/AdvantageSvg/index.ts

@@ -0,0 +1,8 @@
+import { asDarkModePositiveSvg, asPositiveSvg } from "../../hocs";
+import AdvantageSvg from "./AdvantageSvg";
+
+const PositiveAdvantageSvg = asPositiveSvg(AdvantageSvg);
+const DarkModePositiveAdvantageSvg = asDarkModePositiveSvg(AdvantageSvg);
+
+export default AdvantageSvg;
+export { AdvantageSvg, PositiveAdvantageSvg, DarkModePositiveAdvantageSvg };

ddb_main/tools/js/smartComponents/Svg/icons/AnimatedLoadingRingSvg/AnimatedLoadingRingSvg.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+
+import { BaseSvgProps } from "../../BaseSvg";
+
+export default class AnimatedLoadingRingSvg extends React.PureComponent<BaseSvgProps> {
+  static defaultProps = {
+    fillColor: "#EC2127",
+    secondaryFillColor: "#131315",
+    className: "",
+  };
+
+  render() {
+    const { fillColor, secondaryFillColor, className } = this.props;
+
+    let classNames: Array<string> = ["ddbc-animated-loading-ring-svg"];
+
+    if (className) {
+      classNames.push(className);
+    }
+
+    const htmlContent: string = `<html><head><style>* {margin:0}</style></head><body style="background-color: transparent;">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-ring-alt">
+                        <rect x="0" y="0" width="100" height="100" fill="none" class="bk"/>
+                        <circle cx="50" cy="50" r="40" stroke="${secondaryFillColor}" fill="none" stroke-width="10" stroke-linecap="round"/>
+                        <circle cx="50" cy="50" r="40" stroke="${fillColor}" fill="none" stroke-width="6" stroke-linecap="round">
+                            <animate attributeName="stroke-dashoffset" dur="2s" repeatCount="indefinite" from="0" to="502"/>
+                            <animate attributeName="stroke-dasharray" dur="2s" repeatCount="indefinite" values="150.6 100.4;1 250;150.6 100.4"/>
+                        </circle>
+                    </svg></body></html>`;
+
+    return (
+      <iframe
+        className={classNames.join(" ")}
+        frameBorder="0"
+        title="loading"
+        style={{ backgroundColor: "transparent" }}
+        src={`data:text/html;base64,${btoa(htmlContent)}`}
+      ></iframe>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/icons/AttunementSvg/AttunementSvg.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+import BaseSvg from "../../BaseSvg";
+import { InjectedSvgProps } from "../../hocs";
+
+export default class AttunementSvg extends React.PureComponent<InjectedSvgProps> {
+  render() {
+    const { fillColor, className } = this.props;
+
+    let classNames: Array<string> = ["ddbc-attunement-svg"];
+
+    if (className) {
+      classNames.push(className);
+    }
+
+    return (
+      <BaseSvg className={classNames.join(" ")} viewBox="0 0 18.54 16.05">
+        <path
+          fill={fillColor}
+          d="M9.27,0,0,16.05H18.54Zm1.25,11.53H8l-.49,1.54H6.08L8.54,5.93H10l2.45,7.14H11Z"
+        />
+        <polygon
+          fill={fillColor}
+          points="9.26 7.6 8.37 10.41 10.17 10.41 9.29 7.6 9.26 7.6"
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/icons/AttunementSvg/index.ts

@@ -0,0 +1,15 @@
+import { asLightSvg, asDarkSvg } from "../../hocs";
+import { asGraySvg } from "../../hocs/asGraySvg";
+import AttunementSvg from "./AttunementSvg";
+
+const LightAttunementSvg = asLightSvg(AttunementSvg);
+const DarkAttunementSvg = asDarkSvg(AttunementSvg);
+const GrayAttunementSvg = asGraySvg(AttunementSvg);
+
+export default AttunementSvg;
+export {
+  AttunementSvg,
+  LightAttunementSvg,
+  DarkAttunementSvg,
+  GrayAttunementSvg,
+};

ddb_main/tools/js/smartComponents/Svg/icons/BackdropSvg/BackdropSvg.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+
+import BaseSvg from "../../BaseSvg";
+import { InjectedSvgProps } from "../../hocs";
+
+export default class BackdropSvg extends React.PureComponent<InjectedSvgProps> {
+  render() {
+    const { fillColor, className } = this.props;
+
+    let classNames: Array<string> = ["ddbc-backdrop-svg"];
+
+    if (className) {
+      classNames.push(className);
+    }
+
+    return (
+      <BaseSvg className={classNames.join(" ")} viewBox="0 0 32 30.43">
+        <path
+          fill="none"
+          d="M15.53,19.47l2.58-2.13-2.61-3.48-4.45,4.05C12.9,18.11,14.69,17.56,15.53,19.47Z"
+          transform="translate(0 -0.78)"
+        />
+        <path
+          fill="none"
+          d="M3,21.76c.51.47,1,1,1.64,1.49a1.15,1.15,0,0,0,1.63-.08c.45-.35,1.25-.24,2.11-.36L5.5,19.19Z"
+          transform="translate(0 -0.78)"
+        />
+        <path
+          fill="none"
+          d="M25.36,21.41a7.21,7.21,0,0,0,1.51.77l.29-.44-3.87-4.46-2.66,2c.44.24.74.55,1,.52C23.22,19.59,24.27,20.49,25.36,21.41Z"
+          transform="translate(0 -0.78)"
+        />
+        <path
+          fill={fillColor}
+          d="M23.68,28.81c-1.45-.23-2.9.54-4.41-.6S16.88,26.86,16.54,27s-1.65-.87-1.82-1l-3.84-4,.88-.44s2.42,1.14,2.53.77.17-1.61.34-1.61.81.33,1.18.17,1.62.37,1.62.37l1-.4.44-.13.34.3.81,0S23,22.88,23.18,23s3.27,2.78,3.47,2.91a8.16,8.16,0,0,0,1.11.67c.17,0,.64.5.77.33s.67-1.24.67-1.24L32,27.8V25c-2.51-2.87-5.06-5.72-7.52-8.63-.79-.93-1.4-1-2.25-.18-.57.53-1.25.94-2,1.49-1.32-1.74-2.58-3.42-3.86-5.09-.81-1.06-1.12-1.08-2-.14l-6.7,6.94c-.28-.3-.52-.53-.72-.78C5.53,17,5.54,17,4,18.52c-1.3,1.27-2.63,2.5-4,3.75v8.95H13.75c-.86-1.13-1.86-2.06-3.42-2a2.66,2.66,0,0,1-2.47-.8c-.81-1-1.74-1.7-3.18-.6L3.8,25.19c2,.46,2,.46,3.19-.84l2.35-.42c1.19,1.47,2.47,3,3.72,4.63.68.86,1.29,1.77,1.94,2.66H26.84C26.22,30.51,24.79,29,23.68,28.81Zm-.4-11.53,3.87,4.46-.29.44a7.21,7.21,0,0,1-1.51-.77c-1.09-.92-2.14-1.82-3.72-1.64-.27,0-.57-.28-1-.52Zm-7.78-3.41c.79,1.06,2,1.84,2.87,3.07L15.8,19.06c-.84-1.92-2.9-1-4.74-1.15ZM6.31,23.18a1.15,1.15,0,0,1-1.63.08c-.6-.47-1.13-1-1.64-1.49L5.5,19.19l2.92,3.62C7.56,22.94,6.76,22.83,6.31,23.18Z"
+          transform="translate(0 -0.78)"
+        />
+        <path
+          fill={fillColor}
+          d="M29,8.24l2.82-2.1-3.53-.45,1-3.3L26.16,4,25,.78l-1.53,3.1L20.5,1.94l.64,3.38-3.55.1,2.57,2.37-2.82,2.1,3.53.45-1,3.3L23,12l1.19,3.24,1.53-3.1,2.93,1.94L28,10.71l3.56-.1Zm-4.41,3.3A4,4,0,0,1,21.06,8a4,4,0,0,1,3.53-3.53A4,4,0,0,1,28.1,8,4,4,0,0,1,24.58,11.54Z"
+          transform="translate(0 -0.78)"
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/icons/BackdropSvg/index.ts

@@ -0,0 +1,8 @@
+import { asLightSvg, asThemedSvg } from "../../hocs";
+import BackdropSvg from "./BackdropSvg";
+
+const LightBackdropSvg = asLightSvg(BackdropSvg);
+const ThemedBackdropSvg = asThemedSvg(BackdropSvg);
+
+export default BackdropSvg;
+export { BackdropSvg, LightBackdropSvg, ThemedBackdropSvg };

ddb_main/tools/js/smartComponents/Svg/icons/BonusNegativeSvg/BonusNegativeSvg.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+import BaseSvg from "../../BaseSvg";
+import { InjectedSvgProps } from "../../hocs";
+
+export default class BonusNegativeSvg extends React.PureComponent<InjectedSvgProps> {
+  render() {
+    const { fillColor, className } = this.props;
+
+    let classNames: Array<string> = ["ddbc-bonus-negative-svg"];
+
+    if (className) {
+      classNames.push(className);
+    }
+
+    return (
+      <BaseSvg className={classNames.join(" ")} viewBox="0 0 24 24">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M12.241 1.13253C12.0909 1.05 11.9091 1.05 11.759 1.13252L2.25904 6.35753C2.09927 6.4454 2 6.61329 2 6.79563V17.2044C2 17.3867 2.09927 17.5546 2.25904 17.6425L11.759 22.8675C11.9091 22.95 12.0909 22.95 12.241 22.8675L21.741 17.6425C21.9007 17.5546 22 17.3867 22 17.2044V6.79563C22 6.61329 21.9007 6.4454 21.741 6.35753L12.241 1.13253ZM18 10.5H6V13.5H18V10.5Z"
+          fill={fillColor}
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/icons/BonusNegativeSvg/index.ts

@@ -0,0 +1,13 @@
+import { asDarkModeNegativeSvg, asNegativeSvg } from "../../hocs";
+import BonusNegativeSvg from "./BonusNegativeSvg";
+
+const NegativeBonusNegativeSvg = asNegativeSvg(BonusNegativeSvg);
+const DarkModeNegativeBonusNegativeSvg =
+  asDarkModeNegativeSvg(BonusNegativeSvg);
+
+export default BonusNegativeSvg;
+export {
+  BonusNegativeSvg,
+  NegativeBonusNegativeSvg,
+  DarkModeNegativeBonusNegativeSvg,
+};

ddb_main/tools/js/smartComponents/Svg/icons/BonusPositiveSvg/BonusPositiveSvg.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+import BaseSvg from "../../BaseSvg";
+import { InjectedSvgProps } from "../../hocs";
+
+export default class BonusPositiveSvg extends React.PureComponent<InjectedSvgProps> {
+  render() {
+    const { fillColor, className } = this.props;
+
+    let classNames: Array<string> = ["ddbc-bonus-positive-svg"];
+
+    if (className) {
+      classNames.push(className);
+    }
+
+    return (
+      <BaseSvg className={classNames.join(" ")} viewBox="0 0 24 24">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M12.241 1.13253C12.0909 1.05 11.9091 1.05 11.759 1.13252L2.25904 6.35753C2.09927 6.4454 2 6.61329 2 6.79563V17.2044C2 17.3867 2.09927 17.5546 2.25904 17.6425L11.759 22.8675C11.9091 22.95 12.0909 22.95 12.241 22.8675L21.741 17.6425C21.9007 17.5546 22 17.3867 22 17.2044V6.79563C22 6.61329 21.9007 6.4454 21.741 6.35753L12.241 1.13253ZM10.5 6H13.5V10.5H18V13.5H13.5V18H10.5V13.5H6V10.5H10.5V6Z"
+          fill={fillColor}
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/icons/BonusPositiveSvg/index.ts

@@ -0,0 +1,13 @@
+import { asDarkModePositiveSvg, asPositiveSvg } from "../../hocs";
+import BonusPositiveSvg from "./BonusPositiveSvg";
+
+const PositiveBonusPositiveSvg = asPositiveSvg(BonusPositiveSvg);
+const DarkModePositiveBonusPositiveSvg =
+  asDarkModePositiveSvg(BonusPositiveSvg);
+
+export default BonusPositiveSvg;
+export {
+  BonusPositiveSvg,
+  PositiveBonusPositiveSvg,
+  DarkModePositiveBonusPositiveSvg,
+};

ddb_main/tools/js/smartComponents/Svg/icons/BuilderSvg/BuilderSvg.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+
+import BaseSvg from "../../BaseSvg";
+import { InjectedSvgProps } from "../../hocs";
+
+export default class BuilderSvg extends React.PureComponent<InjectedSvgProps> {
+  render() {
+    const { fillColor, className } = this.props;
+
+    let classNames: Array<string> = ["ddbc-builder-svg"];
+
+    if (className) {
+      classNames.push(className);
+    }
+
+    return (
+      <BaseSvg className={classNames.join(" ")} viewBox="0 0 46.82 38.62">
+        <path
+          fill={fillColor}
+          d="M46.17,16.56v4.51s-8.16-.94-12,2.56-3.32,6.47-2.11,7.43,4.17,1.27,4.17,1.27l2.48,3.2v3.08H32.81S31,36.08,26.35,36.08s-6.89,2.48-6.89,2.48H14V35.41l2.36-2.9s2.54.12,3.87-1.27.54-5.32-1.45-5.32H15.35v-.66S5.74,25.44,0,18.31H18V16.56Z"
+        />
+        <path
+          fill={fillColor}
+          d="M27.49,0a52.76,52.76,0,0,0-4.33,11.7,13,13,0,0,0,5.25,2.07,41.51,41.51,0,0,0,4.4-11.55A12.5,12.5,0,0,0,27.49,0Z"
+        />
+        <path
+          fill={fillColor}
+          d="M32.74,6.78a8.53,8.53,0,0,1-1.14,3l13.52,4.79c.57.2,1.32-.69,1.45-1s.62-1.62-.27-1.93Z"
+        />
+        <path
+          fill={fillColor}
+          d="M24.63,3.51A28.29,28.29,0,0,0,23.36,6.7a1.64,1.64,0,0,1-.42-2.14A1.63,1.63,0,0,1,24.63,3.51Z"
+        />
+        <path
+          fill={fillColor}
+          d="M21.76,12,18.94,2.57l-.22,8.23-3.42-4,1.93,5.69L11.15,9.86l7.07,5.36h9.63l-1.73-.44a11.47,11.47,0,0,1-3.83-1.85Z"
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/icons/BuilderSvg/index.ts

@@ -0,0 +1,9 @@
+import { asDarkSvg, asLightSvg, asThemedSvg } from "../../hocs";
+import BuilderSvg from "./BuilderSvg";
+
+const LightBuilderSvg = asLightSvg(BuilderSvg);
+const DarkBuilderSvg = asDarkSvg(BuilderSvg);
+const ThemedBuilderSvg = asThemedSvg(BuilderSvg);
+
+export default BuilderSvg;
+export { BuilderSvg, DarkBuilderSvg, LightBuilderSvg, ThemedBuilderSvg };

ddb_main/tools/js/smartComponents/Svg/icons/ChatBubbleSvg/ChatBubbleSvg.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+import BaseSvg from "../../BaseSvg";
+import { InjectedSvgProps } from "../../hocs";
+
+export default class ChatBubbleSvg extends React.PureComponent<InjectedSvgProps> {
+  render() {
+    const { fillColor, className } = this.props;
+
+    let classNames: Array<string> = ["ddbc-chat-bubble-svg"];
+
+    if (className) {
+      classNames.push(className);
+    }
+
+    return (
+      <BaseSvg className={classNames.join(" ")} viewBox="0 0 21 21">
+        <path
+          fill={fillColor}
+          d="M17.5 11.6666C17.5 12.3095 16.9761 12.8333 16.3333 12.8333H10.5C10.1908 12.8333 9.89329 12.9558 9.67513 13.1751L6.99996 15.8503V14C6.99996 13.3548 6.47729 12.8333 5.83329 12.8333H4.66663C4.02379 12.8333 3.49996 12.3095 3.49996 11.6666V4.66663C3.49996 4.02379 4.02379 3.49996 4.66663 3.49996H16.3333C16.9761 3.49996 17.5 4.02379 17.5 4.66663V11.6666ZM16.3333 1.16663H4.66663C2.73696 1.16663 1.16663 2.73696 1.16663 4.66663V11.6666C1.16663 13.5963 2.73696 15.1666 4.66663 15.1666V18.6666C4.66663 19.138 4.95129 19.565 5.38646 19.7446C5.53113 19.8041 5.68279 19.8333 5.83329 19.8333C6.13663 19.8333 6.43529 19.7143 6.65813 19.4915L10.983 15.1666H16.3333C18.263 15.1666 19.8333 13.5963 19.8333 11.6666V4.66663C19.8333 2.73696 18.263 1.16663 16.3333 1.16663ZM14 6.99996H6.99996C6.35596 6.99996 5.83329 7.52146 5.83329 8.16663C5.83329 8.81179 6.35596 9.33329 6.99996 9.33329H14C14.644 9.33329 15.1666 8.81179 15.1666 8.16663C15.1666 7.52146 14.644 6.99996 14 6.99996Z"
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/icons/ChatBubbleSvg/index.ts

@@ -0,0 +1,16 @@
+import { asDarkSvg, asLightSvg, asPositiveSvg, asThemedSvg } from "../../hocs";
+import ChatBubbleSvg from "./ChatBubbleSvg";
+
+const LightChatBubbleSvg = asLightSvg(ChatBubbleSvg);
+const DarkChatBubbleSvg = asDarkSvg(ChatBubbleSvg);
+const ThemedChatBubbleSvg = asThemedSvg(ChatBubbleSvg);
+const PositiveChatBubbleSvg = asPositiveSvg(ChatBubbleSvg);
+
+export default ChatBubbleSvg;
+export {
+  ChatBubbleSvg,
+  LightChatBubbleSvg,
+  ThemedChatBubbleSvg,
+  DarkChatBubbleSvg,
+  PositiveChatBubbleSvg,
+};

ddb_main/tools/js/smartComponents/Svg/icons/CheckSvg/CheckSvg.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+import BaseSvg from "../../BaseSvg";
+import { InjectedSvgProps } from "../../hocs";
+
+export default class CheckSvg extends React.PureComponent<InjectedSvgProps> {
+  render() {
+    const { fillColor, className } = this.props;
+
+    let classNames: Array<string> = ["ddbc-check-svg"];
+
+    if (className) {
+      classNames.push(className);
+    }
+
+    return (
+      <BaseSvg className={classNames.join(" ")} viewBox="0 0 1792 1792">
+        <path
+          fill={fillColor}
+          d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z"
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/icons/CheckSvg/index.ts

@@ -0,0 +1,16 @@
+import { asDarkSvg, asLightSvg, asPositiveSvg, asThemedSvg } from "../../hocs";
+import CheckSvg from "./CheckSvg";
+
+const LightCheckSvg = asLightSvg(CheckSvg);
+const DarkCheckSvg = asDarkSvg(CheckSvg);
+const ThemedCheckSvg = asThemedSvg(CheckSvg);
+const PositiveCheckSvg = asPositiveSvg(CheckSvg);
+
+export default CheckSvg;
+export {
+  CheckSvg,
+  LightCheckSvg,
+  ThemedCheckSvg,
+  DarkCheckSvg,
+  PositiveCheckSvg,
+};

ddb_main/tools/js/smartComponents/Svg/icons/CloseSvg/CloseSvg.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+import BaseSvg from "../../BaseSvg";
+import { InjectedSvgProps } from "../../hocs";
+
+export default class CloseSvg extends React.PureComponent<InjectedSvgProps> {
+  render() {
+    const { fillColor, className } = this.props;
+
+    let classNames: Array<string> = ["ddbc-close-svg"];
+
+    if (className) {
+      classNames.push(className);
+    }
+
+    return (
+      <BaseSvg className={classNames.join(" ")} viewBox="0 0 1092 1092">
+        <path
+          fill={fillColor}
+          d="M849.9,990L990,849.9L639.9,499.9L990,150L849.9,10L499.9,359.9L150,10L10,150l349.9,349.9L10,849.9L150,990l349.9-350.1L849.9,990z"
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/icons/CloseSvg/index.ts

@@ -0,0 +1,16 @@
+import { asDarkSvg, asLightSvg, asPositiveSvg, asThemedSvg } from "../../hocs";
+import CloseSvg from "./CloseSvg";
+
+const LightCloseSvg = asLightSvg(CloseSvg);
+const DarkCloseSvg = asDarkSvg(CloseSvg);
+const ThemedCloseSvg = asThemedSvg(CloseSvg);
+const PositiveCloseSvg = asPositiveSvg(CloseSvg);
+
+export default CloseSvg;
+export {
+  CloseSvg,
+  LightCloseSvg,
+  ThemedCloseSvg,
+  DarkCloseSvg,
+  PositiveCloseSvg,
+};

ddb_main/tools/js/smartComponents/Svg/icons/ConcentrationSvg/ConcentrationSvg.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../BaseSvg";
+
+const ConcentrationSvg: React.FunctionComponent<BaseSvgProps> = ({
+  className = "",
+  fillColor,
+  secondaryFillColor,
+}) => {
+  return (
+    <BaseSvg className={className} viewBox="0 0 19.73 21.49">
+      <rect
+        fill={fillColor}
+        x="2.95"
+        y="2.95"
+        width="15"
+        height="15"
+        transform="translate(-4.18 10.09) rotate(-45)"
+      />
+      <path
+        fill={secondaryFillColor}
+        d="M12.53,10.92v0A2.44,2.44,0,0,1,12,12.71a2.19,2.19,0,0,1-1.67.6,2.35,2.35,0,0,1-1.76-.68,2.63,2.63,0,0,1-.66-1.92V8.59a2.7,2.7,0,0,1,.64-1.92A2.23,2.23,0,0,1,10.24,6,2.26,2.26,0,0,1,12,6.6a2.56,2.56,0,0,1,.6,1.79v0H11.2a1.66,1.66,0,0,0-.19-1,.88.88,0,0,0-.77-.31.82.82,0,0,0-.72.37,2,2,0,0,0-.25,1.11v2.14a1.91,1.91,0,0,0,.27,1.12.9.9,0,0,0,.78.37.79.79,0,0,0,.7-.29,1.73,1.73,0,0,0,.17-1Z"
+      />
+    </BaseSvg>
+  );
+};
+
+export default ConcentrationSvg;

ddb_main/tools/js/smartComponents/Svg/icons/ConcentrationSvg/index.ts

@@ -0,0 +1,16 @@
+import { asDarkSvg } from "../../hocs/asDarkSvg";
+import { asGraySvg } from "../../hocs/asGraySvg";
+import { asLightSvg } from "../../hocs/asLightSvg";
+import ConcentrationSvg from "./ConcentrationSvg";
+
+const LightConcentrationSvg = asLightSvg(ConcentrationSvg);
+const DarkConcentrationSvg = asDarkSvg(ConcentrationSvg);
+const GrayConcentrationSvg = asGraySvg(ConcentrationSvg);
+
+export default ConcentrationSvg;
+export {
+  ConcentrationSvg,
+  LightConcentrationSvg,
+  DarkConcentrationSvg,
+  GrayConcentrationSvg,
+};

ddb_main/tools/js/smartComponents/Svg/icons/DdbBadgeSvg/DdbBadgeSvg.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+import BaseSvg from "../../BaseSvg";
+
+interface Props {
+  className?: string;
+}
+
+const DdbBadgeSvg: React.FunctionComponent<Props> = ({ className = "" }) => {
+  return (
+    <BaseSvg className={className} viewBox="0 0 24 25">
+      <path
+        d="M1 0.832519C1 0.556377 1.22386 0.33252 1.5 0.33252H22.5C22.7761 0.33252 23 0.556377 23 0.83252V23.7334C23 24.0454 22.7175 24.2812 22.4106 24.2253L12.0894 22.3488C12.0303 22.338 11.9697 22.338 11.9106 22.3488L1.58944 24.2253C1.28252 24.2812 1 24.0454 1 23.7334V0.832519Z"
+        fill="#E40712"
+      />
+      <path
+        d="M17.2309 12.4843C16.8013 12.0744 16.2351 11.7622 15.4931 11.5475C15.786 11.4694 16.0593 11.3523 16.3132 11.1961C16.567 11.04 16.7622 10.8839 16.938 10.6887C17.1137 10.4935 17.2504 10.2983 17.3285 10.0836C17.4261 9.88846 17.4652 9.69329 17.4652 9.49811V9.12727C17.4652 8.67837 17.3675 8.24898 17.1527 7.87814C16.938 7.50731 16.6451 7.17551 16.2546 6.92178C15.8641 6.64853 15.3174 6.45335 14.7707 6.29721C14.224 6.16059 13.6187 6.08252 12.9548 6.08252H7.683H7.13629H6.12098L7.13629 7.13647V10.7277H5.75L7.13629 12.5038V16.4269L6.12098 17.4808H7.13629H7.683H13.3063C14.6535 17.4808 15.825 17.2466 16.6451 16.7587C17.4652 16.2707 17.8557 15.5681 17.8557 14.6117V13.9677C17.8557 13.3821 17.6409 12.8942 17.2309 12.4843ZM10.4556 8.19043H12.291C12.8181 8.19043 13.2477 8.2685 13.5796 8.42464C13.9116 8.58078 14.0678 8.87355 14.0678 9.30293V9.67377C14.0678 10.0056 13.9506 10.2593 13.6968 10.4545C13.443 10.6497 13.111 10.7472 12.6815 10.7472H10.4556V8.19043ZM14.4583 14.2799C14.4583 14.5141 14.4192 14.7093 14.3216 14.846C14.224 14.9826 14.1068 15.0997 13.9506 15.1973C13.7944 15.2753 13.6187 15.3339 13.4039 15.3729C13.1891 15.3924 12.9743 15.412 12.7596 15.412H10.4556V12.66H12.7791C13.2086 12.66 13.5796 12.7576 13.9311 12.9527C14.263 13.1479 14.4387 13.4016 14.4387 13.7334V14.2799H14.4583Z"
+        fill="white"
+      />
+    </BaseSvg>
+  );
+};
+
+export default DdbBadgeSvg;

ddb_main/tools/js/smartComponents/Svg/icons/DiceSvg/DiceSvg.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+import BaseSvg from "../../BaseSvg";
+import { InjectedSvgProps } from "../../hocs";
+
+export default class DiceSvg extends React.PureComponent<InjectedSvgProps> {
+  render() {
+    const { fillColor, className } = this.props;
+
+    let classNames: Array<string> = ["ddbc-dice-svg"];
+
+    if (className) {
+      classNames.push(className);
+    }
+
+    return (
+      <BaseSvg className={classNames.join(" ")} viewBox="0 0 16 18">
+        <path
+          d="M8 0L0 4.4702V13.5298L8 18L15.4286 13.8278L16 13.4702V4.4702L8 0ZM6.85714 4.94702L3.48571 10.1921L1.37143 5.42384L6.85714 4.94702ZM4.57143
+                    10.7285L8 5.30464L11.4286 10.7285H4.57143ZM12.4571 10.1921L9.14286 4.94702L14.5714 5.36424L12.4571 10.1921ZM8.57143 1.66887L12.8 4.05298L8.57143
+                    3.69536V1.66887ZM7.42857 1.66887V3.69536L3.2 4.05298L7.42857 1.66887ZM1.14286 7.62914L2.68571 11.2053L1.14286 12.1589V7.62914ZM1.71429 13.1722L3.25714
+                    12.2185L5.77143 15.4967L1.71429 13.1722ZM4.57143 11.9205H10.8571L8 16.3907L4.57143 11.9205ZM10.2286 15.4371L12.7429 12.1589L14.2857 13.1126L10.2286
+                    15.4371ZM13.4286 11.2649L13.3143 11.2053L14.8571 7.62914V12.1589L13.4286 11.2649Z"
+          fill={fillColor}
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/icons/DiceSvg/index.ts

@@ -0,0 +1,8 @@
+import { asLightSvg, asThemedSvg } from "../../hocs";
+import DiceSvg from "./DiceSvg";
+
+const LightDiceSvg = asLightSvg(DiceSvg);
+const ThemedDiceSvg = asThemedSvg(DiceSvg);
+
+export default DiceSvg;
+export { DiceSvg, LightDiceSvg, ThemedDiceSvg };

ddb_main/tools/js/smartComponents/Svg/icons/DisadvantageSvg/DisadvantageSvg.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+import BaseSvg from "../../BaseSvg";
+import { InjectedSvgProps } from "../../hocs";
+
+export default class DisadvantageSvg extends React.PureComponent<InjectedSvgProps> {
+  render() {
+    const { fillColor, secondaryFillColor, className } = this.props;
+
+    let classNames: Array<string> = ["ddbc-disadvantage-svg"];
+
+    if (className) {
+      classNames.push(className);
+    }
+
+    return (
+      <BaseSvg className={classNames.join(" ")} viewBox="0 0 24 24">
+        <path
+          d="M15.1364 12C15.1364 9.97059 13.8933 8.41764 11.6113 8.41764H10.1345V15.5823H11.6113C13.8933 15.5823 15.1364 14.0471 15.1364 12Z"
+          fill={fillColor}
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M12.241 1.13253C12.0909 1.05 11.9091 1.05 11.759 1.13252L2.25904 6.35753C2.09927 6.4454 2 6.61329 2 6.79563V17.2044C2 17.3867 2.09927 17.5546 2.25904 17.6425L11.759 22.8675C11.9091 22.95 12.0909 22.95 12.241 22.8675L21.741 17.6425C21.9007 17.5546 22 17.3867 22 17.2044V6.79563C22 6.61329 21.9007 6.4454 21.741 6.35753L12.241 1.13253ZM11.6299 18H7.5V6H11.6299C15.4703 6 17.8636 8.48823 17.8636 12C17.8636 15.5118 15.4703 18 11.6299 18Z"
+          fill={fillColor}
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/icons/DisadvantageSvg/index.ts

@@ -0,0 +1,12 @@
+import { asDarkModeNegativeSvg, asNegativeSvg } from "../../hocs";
+import DisadvantageSvg from "./DisadvantageSvg";
+
+const NegativeDisadvantageSvg = asNegativeSvg(DisadvantageSvg);
+const DarkModeNegativeDisadvantageSvg = asDarkModeNegativeSvg(DisadvantageSvg);
+
+export default DisadvantageSvg;
+export {
+  DisadvantageSvg,
+  NegativeDisadvantageSvg,
+  DarkModeNegativeDisadvantageSvg,
+};

ddb_main/tools/js/smartComponents/Svg/icons/DoubleArrowLeftSvg/DoubleArrowLeftSvg.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../BaseSvg";
+
+export default class DoubleArrowLeftSvg extends React.PureComponent<BaseSvgProps> {
+  static defaultProps = {
+    className: "",
+  };
+
+  render() {
+    const { className, fillColor } = this.props;
+
+    return (
+      <BaseSvg viewBox="0 0 16 16" className={className}>
+        <path
+          fill={fillColor}
+          d="M11,2.48,5,8l6,5.52a1.3,1.3,0,0,1-.21,2.12h0a2.25,2.25,0,0,1-2.68-.17L0,8,8.11.53A2.25,2.25,0,0,1,10.79.36h0A1.3,1.3,0,0,1,11,2.48Z"
+        />
+        <polygon fill={fillColor} points="6.92 8 16 0 16 16 6.92 8" />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/icons/DoubleArrowLeftSvg/index.ts

@@ -0,0 +1,8 @@
+import { asDarkSvg, asLightSvg } from "../../hocs";
+import DoubleArrowLeftSvg from "./DoubleArrowLeftSvg";
+
+const LightDoubleArrowLeftSvg = asLightSvg(DoubleArrowLeftSvg);
+const DarkDoubleArrowLeftSvg = asDarkSvg(DoubleArrowLeftSvg);
+
+export default DoubleArrowLeftSvg;
+export { DoubleArrowLeftSvg, LightDoubleArrowLeftSvg, DarkDoubleArrowLeftSvg };

ddb_main/tools/js/smartComponents/Svg/icons/ExportSvg/ExportSvg.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+import BaseSvg from "../../BaseSvg";
+import { InjectedSvgProps } from "../../hocs";
+
+export default class ExportSvg extends React.PureComponent<InjectedSvgProps> {
+  render() {
+    const { fillColor, className } = this.props;
+
+    let classNames: Array<string> = ["ddbc-export-svg"];
+
+    if (className) {
+      classNames.push(className);
+    }
+
+    return (
+      <BaseSvg className={classNames.join(" ")} viewBox="0 0 13 16">
+        <path
+          d="M9 0H0V16H13V4L9 0ZM8.7 1.8L10.7 3.8H8.7V1.8ZM1.5 14.5V12.4H9.1V10.9H1.5V8.7H9.1V7.2H1.5V5H4.3V3.5H1.5V1.5H7.2V5.3H11.5V14.5H1.5Z"
+          fill={fillColor}
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/icons/ExportSvg/index.ts

@@ -0,0 +1,16 @@
+import { asDarkSvg, asLightSvg, asThemedSvg, asDisabledSvg } from "../../hocs";
+import ExportSvg from "./ExportSvg";
+
+const LightExportSvg = asLightSvg(ExportSvg);
+const DarkExportSvg = asDarkSvg(ExportSvg);
+const ThemedExportSvg = asThemedSvg(ExportSvg);
+const DisabledExportSvg = asDisabledSvg(ExportSvg);
+
+export default ExportSvg;
+export {
+  ExportSvg,
+  DarkExportSvg,
+  LightExportSvg,
+  ThemedExportSvg,
+  DisabledExportSvg,
+};

ddb_main/tools/js/smartComponents/Svg/icons/FilterSvg/FilterSvg.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+import BaseSvg from "../../BaseSvg";
+import { InjectedSvgProps } from "../../hocs";
+
+export default class FilterSvg extends React.PureComponent<InjectedSvgProps> {
+  render() {
+    const { fillColor, className } = this.props;
+
+    let classNames: Array<string> = ["ddbc-filter-svg"];
+
+    if (className) {
+      classNames.push(className);
+    }
+
+    return (
+      <BaseSvg className={classNames.join(" ")} viewBox="0 0 29 31.43435">
+        <g id="5980cc6f-d687-4543-b0ac-5355a2132dc6" data-name="Layer 2">
+          <g id="567f4281-9d41-458b-8080-e577c6ec19c5" data-name="Layer 2">
+            <path
+              fill={fillColor}
+              d="M10,18,.38675,3.58013A2.30282,2.30282,0,0,1,0,2.30278H0A2.30278,2.30278,0,0,1,2.30277,0H26.69723A2.30278,2.30278,0,0,1,29,2.30277h0a2.30282,2.30282,0,0,1-.38675,1.27735L19,18V30.78071a.65255.65255,0,0,1-1.01451.543L10.44556,26.297A1.00058,1.00058,0,0,1,10,25.46451Z"
+            />
+          </g>
+        </g>
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/icons/FilterSvg/index.ts

@@ -0,0 +1,9 @@
+import { asDarkSvg, asThemedSvg, asLightSvg } from "../../hocs";
+import FilterSvg from "./FilterSvg";
+
+const ThemedFilterSvg = asThemedSvg(FilterSvg);
+const DarkFilterSvg = asDarkSvg(FilterSvg);
+const LightFilterSvg = asLightSvg(FilterSvg);
+
+export default FilterSvg;
+export { FilterSvg, ThemedFilterSvg, DarkFilterSvg, LightFilterSvg };

ddb_main/tools/js/smartComponents/Svg/icons/FrameSvg/FrameSvg.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+import BaseSvg from "../../BaseSvg";
+import { InjectedSvgProps } from "../../hocs";
+
+export default class FrameSvg extends React.PureComponent<InjectedSvgProps> {
+  render() {
+    const { fillColor, className } = this.props;
+
+    let classNames: Array<string> = ["ddbc-frame-svg"];
+
+    if (className) {
+      classNames.push(className);
+    }
+
+    return (
+      <BaseSvg className={classNames.join(" ")} viewBox="0 0 26 26">
+        <rect
+          fill="none"
+          stroke={fillColor}
+          strokeMiterlimit={10}
+          strokeWidth="3px"
+          x="1.5"
+          y="1.5"
+          width="23"
+          height="23"
+          rx="3"
+          ry="3"
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/icons/FrameSvg/index.ts

@@ -0,0 +1,8 @@
+import { asLightSvg, asThemedSvg } from "../../hocs";
+import FrameSvg from "./FrameSvg";
+
+const LightFrameSvg = asLightSvg(FrameSvg);
+const ThemedFrameSvg = asThemedSvg(FrameSvg);
+
+export default FrameSvg;
+export { FrameSvg, LightFrameSvg, ThemedFrameSvg };

ddb_main/tools/js/smartComponents/Svg/icons/HealingSvg/HealingSvg.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+import BaseSvg from "../../BaseSvg";
+import { InjectedSvgProps } from "../../hocs";
+
+const HealingSvg: React.FunctionComponent<InjectedSvgProps> = ({
+  className = "",
+  fillColor,
+}) => {
+  let classNames: Array<string> = ["ddbc-attunement-svg"];
+
+  if (className) {
+    classNames.push(className);
+  }
+
+  return (
+    <BaseSvg className={classNames.join(" ")} viewBox="0 0 18.4 20.1">
+      <path
+        fill={fillColor}
+        d="M9.2,2.9c3.4-6.9,13.8,0,6.9,6.9c-6.9,6.9-6.9,10.4-6.9,10.4s0-3.5-6.9-10.4C-4.6,2.9,5.8-4,9.2,2.9"
+      />
+    </BaseSvg>
+  );
+};
+export default HealingSvg;

ddb_main/tools/js/smartComponents/Svg/icons/HealingSvg/index.ts

@@ -0,0 +1,10 @@
+import { asLightSvg, asDarkSvg } from "../../hocs";
+import { asGraySvg } from "../../hocs/asGraySvg";
+import HealingSvg from "./HealingSvg";
+
+const LightHealingSvg = asLightSvg(HealingSvg);
+const DarkHealingSvg = asDarkSvg(HealingSvg);
+const GrayHealingSvg = asGraySvg(HealingSvg);
+
+export default HealingSvg;
+export { HealingSvg, LightHealingSvg, DarkHealingSvg, GrayHealingSvg };

ddb_main/tools/js/smartComponents/Svg/icons/ImmunitySvg/ImmunitySvg.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../BaseSvg";
+
+const ImmunitySvg: React.FunctionComponent<BaseSvgProps> = ({
+  className = "",
+  fillColor,
+}) => {
+  return (
+    <BaseSvg className={className} viewBox="0 0 40.89941 48">
+      <path
+        fill={fillColor}
+        d="M40.4497,8c-11,0-20-6-20-8,0,2-9,8-20,8-4,35,20,40,20,40S44.4497,43,40.4497,8Zm-16.75,29.42h-6.5V10.4h6.5Z"
+      />
+    </BaseSvg>
+  );
+};
+
+export default ImmunitySvg;

ddb_main/tools/js/smartComponents/Svg/icons/ImmunitySvg/index.ts

@@ -0,0 +1,8 @@
+import { asPositiveSvg, asDarkModePositiveSvg } from "../../hocs";
+import ImmunitySvg from "./ImmunitySvg";
+
+const PositiveImmunitySvg = asPositiveSvg(ImmunitySvg);
+const DarkModePositiveImmunitySvg = asDarkModePositiveSvg(ImmunitySvg);
+
+export default ImmunitySvg;
+export { ImmunitySvg, PositiveImmunitySvg, DarkModePositiveImmunitySvg };

ddb_main/tools/js/smartComponents/Svg/icons/InspirationTokenSvg/InspirationTokenSvg.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+
+import { CharacterTheme } from "@dndbeyond/character-rules-engine/es";
+
+import BaseSvg from "../../BaseSvg";
+
+interface Props {
+  theme: CharacterTheme;
+  className: string;
+}
+export default class InspirationTokenSvg extends React.PureComponent<Props> {
+  static defaultProps = {
+    className: "",
+  };
+
+  render() {
+    const { theme, className } = this.props;
+
+    let classNames: Array<string> = ["ddbc-inspiration-token-svg", className];
+
+    return (
+      <BaseSvg className={classNames.join(" ")} viewBox="0 0 50 30">
+        <g>
+          <path
+            fill={theme.themeColor}
+            d="M25,14.2c-6.4,0-11.7,5.1-12.2,11.5H2.2V30h10.9h23.8h10.9v-4.3H37.2C36.7,19.3,31.4,14.2,25,14.2z"
+          />
+          <path
+            fill={theme.themeColor}
+            d="M26.9,10.3V0h-3.7v10.3c0.6-0.1,1.2-0.1,1.9-0.1S26.3,10.2,26.9,10.3z"
+          />
+          <path
+            fill={theme.themeColor}
+            d="M42.4,5.3l-3-2.3l-6.4,9.1c1.1,0.5,2.2,1.2,3.1,2.1L42.4,5.3z"
+          />
+          <path
+            fill={theme.themeColor}
+            d="M41.7,22.1l8.3-3.1l-1.3-3.6L40,18.7C40.7,19.7,41.3,20.9,41.7,22.1z"
+          />
+          <path
+            fill={theme.themeColor}
+            d="M17.1,12.1L10.6,3l-3,2.3l6.3,8.9C14.9,13.3,16,12.6,17.1,12.1z"
+          />
+          <path
+            fill={theme.themeColor}
+            d="M10,18.7l-8.7-3.3L0,18.9l8.3,3.1C8.7,20.9,9.3,19.7,10,18.7z"
+          />
+        </g>
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/icons/LinkOutSvg/LinkOutSvg.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+import BaseSvg from "../../BaseSvg";
+import { InjectedSvgProps } from "../../hocs";
+
+export default class LinkOutSvg extends React.PureComponent<InjectedSvgProps> {
+  render() {
+    const { fillColor, className } = this.props;
+
+    let classNames: Array<string> = ["ddbc-link-out-svg"];
+
+    if (className) {
+      classNames.push(className);
+    }
+
+    return (
+      <BaseSvg className={classNames.join(" ")} viewBox="0 0 18 18">
+        <path
+          d="M16.7068 1.293C16.8028 1.389 16.8758 1.5 16.9248 1.619C16.9728 1.735 16.9998 1.863 16.9998 1.997V2V7C16.9998 7.553 16.5518 8 15.9998
+                 8C15.4478 8 14.9998 7.553 14.9998 7V4.414L8.7068 10.707C8.5118 10.902 8.2558 11 7.9998 11C7.7438 11 7.4878 10.902 7.2928 10.707C6.9028 10.316
+                 6.9028 9.683 7.2928 9.293L13.5858 3H10.9998C10.4478 3 9.9998 2.553 9.9998 2C9.9998 1.447 10.4478 1 10.9998 1H15.9998H16.0028C16.1368 1 16.2648
+                 1.027 16.3808 1.075C16.4998 1.124 16.6108 1.197 16.7068 1.293ZM12 10.9999C12 10.4469 12.448 9.9999 13 9.9999C13.552 9.9999 14 10.4469 14
+                 10.9999V15.9999C14 16.5529 13.552 16.9999 13 16.9999H2C1.448 16.9999 1 16.5529 1 15.9999V4.9999C1 4.4469 1.448 3.9999 2 3.9999H7C7.552
+                 3.9999 8 4.4469 8 4.9999C8 5.5529 7.552 5.9999 7 5.9999H3V14.9999H12V10.9999Z"
+          fill={fillColor}
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/icons/LinkOutSvg/index.ts

@@ -0,0 +1,8 @@
+import { asLightSvg, asThemedSvg } from "../../hocs";
+import LinkOutSvg from "./LinkOutSvg";
+
+const LightLinkOutSvg = asLightSvg(LinkOutSvg);
+const ThemedLinkOutSvg = asThemedSvg(LinkOutSvg);
+
+export default LinkOutSvg;
+export { LinkOutSvg, LightLinkOutSvg, ThemedLinkOutSvg };

ddb_main/tools/js/smartComponents/Svg/icons/LockSvg/LockSvg.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+
+import BaseSvg from "../../BaseSvg";
+import { InjectedSvgProps } from "../../hocs";
+
+export default class LockSvg extends React.PureComponent<InjectedSvgProps> {
+  static defaultProps = {
+    className: "",
+  };
+
+  render() {
+    const { className, fillColor } = this.props;
+
+    return (
+      <BaseSvg viewBox="0 0 10.2299 15.0756" className={className}>
+        <path
+          fill={fillColor}
+          d="M9.30491,6.41174V4.19A4.19,4.19,0,0,0,.925,4.19V6.41174L0,6.54333v7.61309l5.115.91918,5.115-.91918V6.54333ZM2.30862,4.19a2.80632,2.80632,0,0,1,5.61264,0V6.21491L5.115,5.81568l-2.80633.39923Z"
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/icons/LockSvg/index.ts

@@ -0,0 +1,9 @@
+import { asDarkSvg, asDisabledSvg, asLightSvg } from "../../hocs";
+import LockSvg from "./LockSvg";
+
+const LightLockSvg = asLightSvg(LockSvg);
+const DarkLockSvg = asDarkSvg(LockSvg);
+const DisabledLockSvg = asDisabledSvg(LockSvg);
+
+export default LockSvg;
+export { LockSvg, LightLockSvg, DarkLockSvg, DisabledLockSvg };

ddb_main/tools/js/smartComponents/Svg/icons/LongRestSvg/LongRestSvg.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+
+import BaseSvg from "../../BaseSvg";
+import { InjectedSvgProps } from "../../hocs";
+
+export default class LongRestSvg extends React.PureComponent<InjectedSvgProps> {
+  render() {
+    const { fillColor, className } = this.props;
+
+    let classNames: Array<string> = ["ddbc-long-rest-svg"];
+
+    if (className) {
+      classNames.push(className);
+    }
+
+    return (
+      <BaseSvg className={classNames.join(" ")} viewBox="0 0 443.5 443.5">
+        <path
+          fill={fillColor}
+          d="M221.75.25c122.33,0,221.5,99.17,221.5,221.5s-99.17,221.5-221.5,221.5S.25,344.08.25,221.75,99.42.25,221.75.25ZM370.58,353.13c69.03-39.84,83.21-144.48,31.66-233.72C350.7,30.17,252.96-9.88,183.92,29.97c-69.03,39.84-83.21,144.48-31.66,233.72C203.8,352.93,301.54,392.98,370.58,353.13Z"
+        />
+        <ellipse
+          fill="none"
+          stroke={fillColor}
+          strokeMiterlimit={10}
+          strokeWidth="10px"
+          cx="277.25"
+          cy="191.55"
+          rx="144.3145"
+          ry="186.5974"
+          transform="matrix(0.86569, -0.50058, 0.50058, 0.86569, -58.64876, 164.51324)"
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/icons/LongRestSvg/index.ts

@@ -0,0 +1,8 @@
+import { asLightSvg, asThemedSvg } from "../../hocs";
+import LongRestSvg from "./LongRestSvg";
+
+const LightLongRestSvg = asLightSvg(LongRestSvg);
+const ThemedLongRestSvg = asThemedSvg(LongRestSvg);
+
+export default LongRestSvg;
+export { LongRestSvg, LightLongRestSvg, ThemedLongRestSvg };

ddb_main/tools/js/smartComponents/Svg/icons/ManageLevelSvg/ManageLevelSvg.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+
+import BaseSvg from "../../BaseSvg";
+import { InjectedSvgProps } from "../../hocs";
+
+export default class ManageLevelSvg extends React.PureComponent<InjectedSvgProps> {
+  render() {
+    const { fillColor, className } = this.props;
+
+    let classNames: Array<string> = ["ddbc-manage-level-svg"];
+
+    if (className) {
+      classNames.push(className);
+    }
+
+    return (
+      <BaseSvg className={classNames.join(" ")} viewBox="0 0 16 16">
+        <g
+          id="Sheet"
+          stroke="none"
+          strokeWidth="1"
+          fill="none"
+          fillRule="evenodd"
+        >
+          <g
+            id="Character-Drop-Down"
+            transform="translate(-30.000000, -140.000000)"
+          >
+            <g id="Group-45-Copy" transform="translate(30.000000, 140.000000)">
+              <circle
+                id="Oval-4"
+                fill={fillColor}
+                cx="8"
+                cy="8"
+                r="7.51098633"
+              ></circle>
+              <path
+                d="M9.83015873,7.3467308 L12,7.3467308 L8,3.3467308 L4,7.3467308 L6.16984127,7.3467308 L6.16984127,11.8389386 L9.83015873,11.8389386 L9.83015873,7.3467308 Z"
+                id="Combined-Shape"
+                fill="#242528"
+              ></path>
+            </g>
+          </g>
+        </g>
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/icons/ManageLevelSvg/index.ts

@@ -0,0 +1,8 @@
+import { asLightSvg, asThemedSvg } from "../../hocs";
+import ManageLevelSvg from "./ManageLevelSvg";
+
+const LightManageLevelSvg = asLightSvg(ManageLevelSvg);
+const ThemedManageLevelSvg = asThemedSvg(ManageLevelSvg);
+
+export default ManageLevelSvg;
+export { ManageLevelSvg, LightManageLevelSvg, ThemedManageLevelSvg };

ddb_main/tools/js/smartComponents/Svg/icons/ManageXpSvg/ManageXpSvg.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+
+import BaseSvg from "../../BaseSvg";
+import { InjectedSvgProps } from "../../hocs";
+
+export default class ManageXpSvg extends React.PureComponent<InjectedSvgProps> {
+  render() {
+    const { fillColor, className } = this.props;
+
+    let classNames: Array<string> = ["ddbc-manage-xp-svg"];
+
+    if (className) {
+      classNames.push(className);
+    }
+
+    return (
+      <BaseSvg className={classNames.join(" ")} viewBox="0 0 16 8">
+        <defs>
+          <polygon
+            id="ManageXpSvg-path-1"
+            points="0.9639 8 7.751 8 7.751 0.0003 0.9639 0.0003"
+          ></polygon>
+        </defs>
+        <g
+          id="ManageXpSvg-Sheet"
+          stroke="none"
+          strokeWidth="1"
+          fill="none"
+          fillRule="evenodd"
+        >
+          <g
+            id="ManageXpSvg-Character-Drop-Down"
+            transform="translate(-30.000000, -235.000000)"
+          >
+            <g
+              id="ManageXpSvg-Page-1"
+              transform="translate(30.000000, 235.000000)"
+            >
+              <polygon
+                id="ManageXpSvg-Fill-1"
+                fill={fillColor}
+                points="5.733 0.00031 4.186 2.50631 2.615 0.00031 0.18 0.00031 2.794 3.89831 0 7.99931 2.447 7.99931 4.186 5.31331 5.925 7.99931 8.359 7.99931 5.576 3.88531 8.179 0.00031"
+              ></polygon>
+              <g
+                id="ManageXpSvg-Group-4"
+                transform="translate(8.000000, -0.000490)"
+              >
+                <mask id="ManageXpSvg-mask-2" fill="white">
+                  <use xlinkHref="#ManageXpSvg-path-1"></use>
+                </mask>
+                <path
+                  d="M4.6929,1.7393 L3.0259,1.7393 L3.0259,3.5383 L4.6929,3.5383 C5.2449,3.5383 5.6529,3.1903 5.6529,2.6513 C5.6529,2.0993 5.2449,1.7393 4.6929,1.7393 L4.6929,1.7393 Z M0.9639,0.0003 L4.9689,0.0003 C6.7679,0.0003 7.7519,1.2123 7.7519,2.6633 C7.7519,4.1023 6.7679,5.2893 4.9689,5.2893 L3.0259,5.2893 L3.0259,8.0003 L0.9639,8.0003 L0.9639,0.0003 Z"
+                  id="ManageXpSvg-Fill-2"
+                  fill={fillColor}
+                  mask="url(#ManageXpSvg-mask-2)"
+                ></path>
+              </g>
+            </g>
+          </g>
+        </g>
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/icons/ManageXpSvg/index.ts

@@ -0,0 +1,8 @@
+import { asLightSvg, asThemedSvg } from "../../hocs";
+import ManageXpSvg from "./ManageXpSvg";
+
+const LightManageXpSvg = asLightSvg(ManageXpSvg);
+const ThemedManageXpSvg = asThemedSvg(ManageXpSvg);
+
+export default ManageXpSvg;
+export { ManageXpSvg, LightManageXpSvg, ThemedManageXpSvg };

ddb_main/tools/js/smartComponents/Svg/icons/PaintBrushSvg/PaintBrushSvg.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+
+import BaseSvg from "../../BaseSvg";
+import { InjectedSvgProps } from "../../hocs";
+
+export default class PaintBrushSvg extends React.PureComponent<InjectedSvgProps> {
+  render() {
+    const { fillColor, className } = this.props;
+
+    let classNames: Array<string> = ["ddbc-paint-brush-svg"];
+
+    if (className) {
+      classNames.push(className);
+    }
+
+    return (
+      <BaseSvg className={classNames.join(" ")} viewBox="0 0 24 24">
+        <g clipPath="url(#clip0)">
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M3.16445 13.127L0.903338 12.1028C0.622071 11.9754 0.481436 11.9117 0.389292 11.8406C-0.0163848 11.5276 -0.119928 10.9587 0.14948 10.5229C0.210673 10.424 0.319843 10.3148 0.538184 10.0964L8.24683 2.3878L8.24684 2.38778C8.71992 1.9147 8.95647 1.67815 9.19101 1.51876C10.2088 0.82708 11.5457 0.827081 12.5635 1.51876C12.7981 1.67815 13.0346 1.91469 13.5077 2.38777L13.5077 2.38779L13.5077 2.3878L17.2408 6.12085L17.241 6.12059L18.6552 7.5348L19.5659 8.4455C20.7375 9.61708 20.7375 11.5166 19.5659 12.6881L18.67 13.5841L20.0842 14.9983L23.0771 17.9912C24.3267 19.2408 24.3267 21.2669 23.0771 22.5166C21.8274 23.7663 19.8013 23.7663 18.5516 22.5166L15.5588 19.5238L14.1445 18.1095L13.264 18.9901C12.0924 20.1617 10.1929 20.1617 9.02132 18.9901L8.11062 18.0794L6.6964 16.6652L6.69952 16.6621L3.16445 13.127ZM9.52841 16.6626L9.5253 16.6657L10.4355 17.5759C10.8261 17.9664 11.4592 17.9664 11.8497 17.5759L12.7303 16.6953L14.1445 15.2811L15.5588 16.6953L19.9658 21.1024C20.4345 21.571 21.1942 21.571 21.6629 21.1024C22.1315 20.6338 22.1315 19.874 21.6629 19.4054L17.2558 14.9983L15.8416 13.5841L17.2558 12.1699L18.1517 11.2739C18.5422 10.8834 18.5423 10.2502 18.1517 9.85972L17.2415 8.94948L17.2412 8.94975L9.52841 16.6626ZM12.0935 3.80201L15.8265 7.53506L8.11373 15.2479L4.57866 11.7128L4.32128 11.4554L3.98971 11.3052L2.72894 10.7341L5.22052 8.24253L7.34194 10.364C7.73246 10.7545 8.36563 10.7545 8.75615 10.364C9.14667 9.97343 9.14667 9.34027 8.75615 8.94974L6.63473 6.82832L8.04887 5.41418L8.756 6.1213C9.14652 6.51183 9.77969 6.51183 10.1702 6.1213C10.5607 5.73078 10.5607 5.09762 10.1702 4.70709L9.46308 3.99997L9.66104 3.80201C9.90679 3.55626 10.0573 3.40607 10.1754 3.29555C10.274 3.20318 10.3109 3.17597 10.3152 3.17289C10.3152 3.1729 10.3152 3.17291 10.3152 3.17292C10.3155 3.17271 10.3157 3.17259 10.3157 3.17258C10.3157 3.17258 10.3155 3.17267 10.3152 3.17289C10.6545 2.94237 11.1001 2.94237 11.4393 3.17289L11.4393 3.1729C11.4437 3.17601 11.4806 3.20326 11.5792 3.29555C11.6972 3.40607 11.8477 3.55626 12.0935 3.80201ZM3.08861 17.7808C2.96366 18.044 2.76883 18.2677 2.52537 18.4277C2.28658 18.5975 2.00549 18.6981 1.71313 18.7183C1.42078 18.7384 1.12854 18.6774 0.868687 18.5419C0.608832 18.4065 0.391472 18.2018 0.240608 17.9506C0.0897448 17.6993 0.0112472 17.4113 0.0137836 17.1183L0 15.5957C0.00382222 15.4984 0.0305142 15.4033 0.0779134 15.3182C0.125312 15.2332 0.192086 15.1605 0.272823 15.106C0.35356 15.0515 0.44599 15.0169 0.542625 15.0048C0.639259 14.9927 0.73738 15.0036 0.829038 15.0365L2.2356 15.6196C2.50659 15.7265 2.74301 15.9057 2.91906 16.1378C3.09512 16.3699 3.20404 16.6458 3.23394 16.9356C3.26384 17.2253 3.21357 17.5177 3.08861 17.7808Z"
+            fill={fillColor}
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0">
+            <rect width="24" height="24" fill={fillColor} />
+          </clipPath>
+        </defs>
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/icons/PaintBrushSvg/index.ts

@@ -0,0 +1,14 @@
+import { asLightSvg, asDarkSvg, asThemedSvg } from "../../hocs";
+import PaintBrushSvg from "./PaintBrushSvg";
+
+const LightPaintBrushSvg = asLightSvg(PaintBrushSvg);
+const DarkPaintBrushSvg = asDarkSvg(PaintBrushSvg);
+const ThemedPaintBrushSvg = asThemedSvg(PaintBrushSvg);
+
+export default PaintBrushSvg;
+export {
+  PaintBrushSvg,
+  LightPaintBrushSvg,
+  DarkPaintBrushSvg,
+  ThemedPaintBrushSvg,
+};

ddb_main/tools/js/smartComponents/Svg/icons/PencilSvg/PencilSvg.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+import BaseSvg from "../../BaseSvg";
+import { InjectedSvgProps } from "../../hocs";
+
+export default class PencilSvg extends React.PureComponent<InjectedSvgProps> {
+  render() {
+    const { fillColor, className } = this.props;
+
+    let classNames: Array<string> = ["ddbc-pencil-svg"];
+
+    if (className) {
+      classNames.push(className);
+    }
+
+    return (
+      <BaseSvg className={classNames.join(" ")} viewBox="0 0 15 14">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M0.828181 12.0217C0.625019 13.125 1.12507 13.75 2.33489 13.5284L5.177 12.8479C5.67077 12.7297 6.12217 12.4771 6.48119 12.118L13.4476 5.15165C14.3262 4.27297 14.3262 2.84835 13.4476 1.96967L12.3869 0.90901C11.5082 0.0303294 10.0836 0.0303308 9.20493 0.90901L2.23855 7.87539C1.87953 8.23441 1.62691 8.68581 1.50869 9.17959L0.828181 12.0217ZM12.3869 4.09099L11.3852 5.09272L9.26385 2.9714L10.2656 1.96967C10.5585 1.67678 11.0334 1.67678 11.3262 1.96967L12.3869 3.03033C12.6798 3.32322 12.6798 3.7981 12.3869 4.09099ZM4.56587 11.4518L2.38184 11.9748L2.90477 9.79074C2.94584 9.61921 3.03155 9.4616 3.15319 9.33389L8.20322 4.03206L10.3245 6.15338L5.02271 11.2034C4.895 11.3251 4.73739 11.4108 4.56587 11.4518Z"
+          fill={fillColor}
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/icons/PencilSvg/index.ts

@@ -0,0 +1,9 @@
+import { asLightSvg, asDarkSvg, asThemedSvg } from "../../hocs";
+import PencilSvg from "./PencilSvg";
+
+const LightPencilSvg = asLightSvg(PencilSvg);
+const DarkPencilSvg = asDarkSvg(PencilSvg);
+const ThemedPencilSvg = asThemedSvg(PencilSvg);
+
+export default PencilSvg;
+export { PencilSvg, LightPencilSvg, DarkPencilSvg, ThemedPencilSvg };

ddb_main/tools/js/smartComponents/Svg/icons/PlayButtonSvg/PlayButtonSvg.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+import BaseSvg from "../../BaseSvg";
+import { InjectedSvgProps } from "../../hocs";
+
+export default class PlayButtonSvg extends React.PureComponent<InjectedSvgProps> {
+  render() {
+    const { fillColor, className } = this.props;
+
+    let classNames: Array<string> = ["ddbc-play-button-svg"];
+
+    if (className) {
+      classNames.push(className);
+    }
+
+    return (
+      <BaseSvg className={classNames.join(" ")} viewBox="0 0 11 14">
+        <path
+          fill={fillColor}
+          d="M2 3.64L7.27 7L2 10.36V3.64ZM0 0V14L11 7L0 0Z"
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/icons/PlayButtonSvg/index.ts

@@ -0,0 +1,16 @@
+import { asDarkSvg, asLightSvg, asPositiveSvg, asThemedSvg } from "../../hocs";
+import PlayButtonSvg from "./PlayButtonSvg";
+
+const LightPlayButtonSvg = asLightSvg(PlayButtonSvg);
+const DarkPlayButtonSvg = asDarkSvg(PlayButtonSvg);
+const ThemedPlayButtonSvg = asThemedSvg(PlayButtonSvg);
+const PositivePlayButtonSvg = asPositiveSvg(PlayButtonSvg);
+
+export default PlayButtonSvg;
+export {
+  PlayButtonSvg,
+  LightPlayButtonSvg,
+  ThemedPlayButtonSvg,
+  DarkPlayButtonSvg,
+  PositivePlayButtonSvg,
+};

ddb_main/tools/js/smartComponents/Svg/icons/PortraitSvg/PortraitSvg.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+import BaseSvg from "../../BaseSvg";
+import { InjectedSvgProps } from "../../hocs";
+
+export default class PortraitSvg extends React.PureComponent<InjectedSvgProps> {
+  render() {
+    const { fillColor, className } = this.props;
+
+    let classNames: Array<string> = ["ddbc-portrait-svg"];
+
+    if (className) {
+      classNames.push(className);
+    }
+
+    return (
+      <BaseSvg className={classNames.join(" ")} viewBox="0 0 17.9 22">
+        <path
+          fill={fillColor}
+          d="M16.4,19.1C16.4,19.1,16.4,19.1,16.4,19.1c-0.6-0.2-1.1-0.4-1.7-0.6c-0.8-0.3-1.2-0.8-1.3-1.5
+                    c0-0.1-0.1-0.2-0.1-0.3c0-0.1,0-0.3,0.1-0.4c0.2-0.4,0.5-0.8,0.6-1.2c0.2-0.6,0.4-1.2,0.6-1.8c0.3,0.1,0.5-0.1,0.7-0.3
+                    c0.6-1,0.9-2.1,0.9-3.3c0-0.2-0.1-0.4-0.2-0.5c-0.3-0.2-0.2-0.4-0.2-0.7C16,8.3,16,8.1,16,8c0.2-1.2,0.3-2.3,0-3.5
+                    c-0.2-0.8-0.5-1.6-1.2-1.9c-0.5-0.2-0.8-0.6-1.2-1c-1.5-1.5-3.3-1.9-5.2-1.5C6.8,0.5,5.6,1.5,4.5,2.7C3.5,3.9,2.9,5.3,3,6.9
+                    c0,0.5,0.2,1,0.2,1.5c-0.6,0.1-0.8,0.4-0.8,1c0,0.1,0,0.2,0,0.3c0.1,0.9,0.3,1.7,0.7,2.5c0.1,0.2,0.3,0.4,0.5,0.6
+                    c0.1,0.1,0.2,0.2,0.2,0.3c0.2,1.1,0.6,2.2,1.2,3.1c0.1,0.1,0.1,0.2,0.1,0.3C5.2,17,5.1,17.4,5,17.7c-0.1,0.2-0.2,0.4-0.4,0.5
+                    c-1.2,0.5-2.4,1-3.6,1.4c-0.2,0.1-0.3,0.2-0.5,0.3c-0.1,0.3-0.3,0.5-0.4,0.8c1,0.6,2,1.1,3.1,1.3h11.6c1-0.2,2-0.6,3-0.9
+                    c0.1,0,0.2-0.1,0.3-0.1v-1C17.4,19.7,17,19.3,16.4,19.1z"
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/icons/PortraitSvg/index.ts

@@ -0,0 +1,8 @@
+import { asLightSvg, asThemedSvg } from "../../hocs";
+import PortraitSvg from "./PortraitSvg";
+
+const LightPortraitSvg = asLightSvg(PortraitSvg);
+const ThemedPortraitSvg = asThemedSvg(PortraitSvg);
+
+export default PortraitSvg;
+export { PortraitSvg, LightPortraitSvg, ThemedPortraitSvg };

ddb_main/tools/js/smartComponents/Svg/icons/PreferencesSvg/PreferencesSvg.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+
+import BaseSvg from "../../BaseSvg";
+import { InjectedSvgProps } from "../../hocs";
+
+export default class PreferencesSvg extends React.PureComponent<InjectedSvgProps> {
+  render() {
+    const { fillColor, className } = this.props;
+
+    let classNames: Array<string> = ["ddbc-preferences-svg"];
+
+    if (className) {
+      classNames.push(className);
+    }
+
+    return (
+      <BaseSvg className={classNames.join(" ")} viewBox="0 0 14 15">
+        <defs>
+          <polygon
+            id="PreferencesSvg-path-1"
+            points="13.7538 14.6039 0 14.6039 0 0.0003 13.7538 0.0003 13.7538 14.6039"
+          ></polygon>
+        </defs>
+        <g
+          id="PreferencesSvg-Sheet"
+          stroke="none"
+          strokeWidth="1"
+          fill="none"
+          fillRule="evenodd"
+        >
+          <g
+            id="PreferencesSvg-Character-Drop-Down"
+            transform="translate(-32.000000, -327.000000)"
+          >
+            <g
+              id="PreferencesSvg-Page-1"
+              transform="translate(32.000000, 327.000000)"
+            >
+              <mask id="PreferencesSvg-mask-2" fill="white">
+                <use xlinkHref="#PreferencesSvg-path-1"></use>
+              </mask>
+              <g id="PreferencesSvg-Clip-2"></g>
+              <path
+                d="M6.8768,9.8273 C5.4818,9.8273 4.3518,8.6963 4.3518,7.3023 C4.3518,5.9073 5.4818,4.7763 6.8768,4.7763 C8.2718,4.7763 9.4018,5.9073 9.4018,7.3023 C9.4018,8.6963 8.2718,9.8273 6.8768,9.8273 M12.3888,7.3023 C12.3888,6.7963 12.3198,6.3073 12.1918,5.8423 L13.7538,4.5083 L12.3228,2.2583 L10.4508,3.1073 C9.8868,2.6263 9.2248,2.2553 8.4978,2.0323 L8.2098,0.0003 L5.5438,0.0003 L5.2558,2.0323 C4.5288,2.2553 3.8668,2.6253 3.3028,3.1073 L1.4308,2.2583 L-0.0002,4.5083 L1.5618,5.8423 C1.4338,6.3073 1.3648,6.7963 1.3648,7.3023 C1.3648,7.8073 1.4338,8.2963 1.5618,8.7623 L-0.0002,10.0953 L1.4308,12.3463 L3.3028,11.4963 C3.8668,11.9783 4.5288,12.3483 5.2558,12.5713 L5.5438,14.6043 L8.2098,14.6043 L8.4978,12.5713 C9.2248,12.3483 9.8868,11.9783 10.4508,11.4963 L12.3228,12.3463 L13.7538,10.0953 L12.1918,8.7623 C12.3198,8.2963 12.3888,7.8073 12.3888,7.3023"
+                id="Fill-1"
+                fill={fillColor}
+                mask="url(#PreferencesSvg-mask-2)"
+              />
+            </g>
+          </g>
+        </g>
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/icons/PreferencesSvg/index.ts

@@ -0,0 +1,8 @@
+import { asLightSvg, asThemedSvg } from "../../hocs";
+import PreferencesSvg from "./PreferencesSvg";
+
+const LightPreferencesSvg = asLightSvg(PreferencesSvg);
+const ThemedPreferencesSvg = asThemedSvg(PreferencesSvg);
+
+export default PreferencesSvg;
+export { PreferencesSvg, LightPreferencesSvg, ThemedPreferencesSvg };

ddb_main/tools/js/smartComponents/Svg/icons/ResistanceSvg/ResistanceSvg.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../BaseSvg";
+
+const ResistanceSvg: React.FunctionComponent<BaseSvgProps> = ({
+  className = "",
+  fillColor,
+}) => {
+  return (
+    <BaseSvg className={className} viewBox="0 0 40.89941 48">
+      <path
+        fill={fillColor}
+        d="M21.18969,15.5h-4.12v7.44h4.12a3.68142,3.68142,0,0,0,2.79-.97,3.75732,3.75732,0,0,0,.94-2.73,3.81933,3.81933,0,0,0-.95-2.74A3.638,3.638,0,0,0,21.18969,15.5Z"
+      />
+      <path
+        fill={fillColor}
+        d="M40.4497,8c-11,0-20-6-20-8,0,2-9,8-20,8-4,35,20,40,20,40S44.4497,43,40.4497,8Zm-8.11,29.51h-6.97l-4.77-9.56h-3.53v9.56h-6.51V10.49h10.63c3.2,0,5.71.71,7.51,2.13a7.21618,7.21618,0,0,1,2.71,6.03,8.78153,8.78153,0,0,1-1.14,4.67005,8.14932,8.14932,0,0,1-3.57,3l5.64,10.91Z"
+      />
+    </BaseSvg>
+  );
+};
+
+export default ResistanceSvg;

ddb_main/tools/js/smartComponents/Svg/icons/ResistanceSvg/index.ts

@@ -0,0 +1,8 @@
+import { asPositiveSvg, asDarkModePositiveSvg } from "../../hocs";
+import ResistanceSvg from "./ResistanceSvg";
+
+const PositiveResistanceSvg = asPositiveSvg(ResistanceSvg);
+const DarkModePositiveResistanceSvg = asDarkModePositiveSvg(ResistanceSvg);
+
+export default ResistanceSvg;
+export { ResistanceSvg, PositiveResistanceSvg, DarkModePositiveResistanceSvg };

ddb_main/tools/js/smartComponents/Svg/icons/RitualSvg/RitualSvg.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../BaseSvg";
+
+const RitualSvg: React.FunctionComponent<BaseSvgProps> = ({
+  className = "",
+  fillColor,
+  secondaryFillColor,
+}) => {
+  return (
+    <BaseSvg className={className} viewBox="0 0 12.17 14.83">
+      <path
+        fill={fillColor}
+        d="M3,0H1.22A1.23,1.23,0,0,0,0,1.24V13.6a1.23,1.23,0,0,0,1.22,1.24H11.41a.77.77,0,0,0,.76-.77c0-.43-.34-1-.76-1H2.13c-.33,0-.61,0-.61-.34s.27-1,.61-1H11a1.23,1.23,0,0,0,1.22-1.24V1.24A1.23,1.23,0,0,0,11,0H3.08"
+      />
+      <path
+        fill={secondaryFillColor}
+        d="M4.35,2.23A11.66,11.66,0,0,1,6.2,2.09a3.12,3.12,0,0,1,2.08.54A1.7,1.7,0,0,1,8.86,4,1.8,1.8,0,0,1,7.64,5.67v0A1.72,1.72,0,0,1,8.58,7a13.32,13.32,0,0,0,.53,1.88H7.84a9.62,9.62,0,0,1-.45-1.59c-.19-.88-.51-1.16-1.21-1.18H5.57V8.88H4.35Zm1.22,3H6.3c.83,0,1.35-.44,1.35-1.11S7.12,3,6.33,3a3.53,3.53,0,0,0-.76.06Z"
+      />
+    </BaseSvg>
+  );
+};
+
+export default RitualSvg;

ddb_main/tools/js/smartComponents/Svg/icons/RitualSvg/index.ts

@@ -0,0 +1,11 @@
+import { asDarkSvg } from "../../hocs/asDarkSvg";
+import { asGraySvg } from "../../hocs/asGraySvg";
+import { asLightSvg } from "../../hocs/asLightSvg";
+import RitualSvg from "./RitualSvg";
+
+const LightRitualSvg = asLightSvg(RitualSvg);
+const DarkRitualSvg = asDarkSvg(RitualSvg);
+const GrayRitualSvg = asGraySvg(RitualSvg);
+
+export default RitualSvg;
+export { RitualSvg, LightRitualSvg, DarkRitualSvg, GrayRitualSvg };

ddb_main/tools/js/smartComponents/Svg/icons/ShareSvg/ShareSvg.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+import BaseSvg from "../../BaseSvg";
+import { InjectedSvgProps } from "../../hocs";
+
+export default class ShareSvg extends React.PureComponent<InjectedSvgProps> {
+  render() {
+    const { fillColor, className } = this.props;
+
+    let classNames: Array<string> = ["ddbc-share-svg"];
+
+    if (className) {
+      classNames.push(className);
+    }
+
+    return (
+      <BaseSvg className={classNames.join(" ")} viewBox="0 0 50 60">
+        <path
+          fill={fillColor}
+          d="M40.38461,0a9.61466,9.61466,0,0,0-9.61538,9.61538c0,.16527.05258.31551.0601.48077L15.74519,22.66827a9.4614,9.4614,0,0,0-6.12981-2.28366,9.61539,9.61539,0,0,0,0,19.23077,9.4614,9.4614,0,0,0,6.12981-2.28365L30.82933,49.90385c-.00752.16526-.0601.3155-.0601.48076a9.61539,9.61539,0,1,0,9.61538-9.61538,9.46142,9.46142,0,0,0-6.1298,2.28365L19.17067,30.48077c.00751-.16526.0601-.3155.0601-.48077s-.05259-.3155-.0601-.48077L34.25481,16.94711a9.46138,9.46138,0,0,0,6.1298,2.28366A9.61539,9.61539,0,1,0,40.38461,0Z"
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/icons/ShareSvg/index.ts

@@ -0,0 +1,8 @@
+import { asLightSvg, asThemedSvg } from "../../hocs";
+import ShareSvg from "./ShareSvg";
+
+const LightShareSvg = asLightSvg(ShareSvg);
+const ThemedShareSvg = asThemedSvg(ShareSvg);
+
+export default ShareSvg;
+export { ShareSvg, LightShareSvg, ThemedShareSvg };

ddb_main/tools/js/smartComponents/Svg/icons/ShortRestSvg/ShortRestSvg.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+import BaseSvg from "../../BaseSvg";
+import { InjectedSvgProps } from "../../hocs";
+
+export default class ShortRestSvg extends React.PureComponent<InjectedSvgProps> {
+  render() {
+    const { fillColor, className } = this.props;
+
+    let classNames: Array<string> = ["ddbc-short-rest-svg"];
+
+    if (className) {
+      classNames.push(className);
+    }
+
+    return (
+      <BaseSvg className={classNames.join(" ")} viewBox="0 0 75.00001 91.37608">
+        <path
+          fill={fillColor}
+          d="M58.745,34.053c-8.41376-5.41754,0-15.47864,0-15.47864C44.08877,22.05707,44.77651,32,44.77651,32c-4.07116-2.51532-3.67328-7.23413.94074-16.52136S37.032,0,37.032,0s12.21356,13.15686-8.68518,24.76587-8.68518,24.76587-8.68518,24.76587A16.47186,16.47186,0,0,1,6.63387,43.34027c0,10.289,10.45673,17.73334,21.37586,20.491a17.23033,17.23033,0,0,1-2.96533-7.19837c-.04621-.27893.12744-.6784.48211-.63293a17.25615,17.25615,0,0,1,8.43189,3.63074,21.50626,21.50626,0,0,0,1.09772-5.22364c.37316-4.59375-1.6828-8.0484-4.21137-11.65478-.27563-.39319.18073-.80023.5647-.7345a12.743,12.743,0,0,1,10.2716,10.49347c4.52625-1.53119,6.34034-7.317,6.42878-11.678.01117-.55072.86242-.697.98217-.13293,1.39893,6.59,6.35651,14.61285,2.942,21.23028C66.09347,54.97485,65.35421,38.30859,58.745,34.053Z"
+        />
+        <path
+          fill={fillColor}
+          d="M4.3,73.47608l10,2.7,18.3-5s-27.2-7.4-27.7-7.4a4.908,4.908,0,0,0-4.9,4.9A4.78148,4.78148,0,0,0,4.3,73.47608Z"
+        />
+        <path
+          fill={fillColor}
+          d="M70.1,63.77607c-.7,0-65.8,17.9-65.8,17.9a4.83787,4.83787,0,0,0-4.1,4.8,4.908,4.908,0,0,0,4.9,4.9c.6,0,65.8-17.9,65.8-17.9a4.83788,4.83788,0,0,0,4.1-4.8A4.908,4.908,0,0,0,70.1,63.77607Z"
+        />
+        <path
+          fill={fillColor}
+          d="M70.9,81.67607l-10.3-2.8-18.3,5s27.2,7.5,27.8,7.5a4.8815,4.8815,0,0,0,.8-9.7Z"
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/icons/ShortRestSvg/index.ts

@@ -0,0 +1,8 @@
+import { asLightSvg, asThemedSvg } from "../../hocs";
+import ShortRestSvg from "./ShortRestSvg";
+
+const LightShortRestSvg = asLightSvg(ShortRestSvg);
+const ThemedShortRestSvg = asThemedSvg(ShortRestSvg);
+
+export default ShortRestSvg;
+export { ShortRestSvg, LightShortRestSvg, ThemedShortRestSvg };

ddb_main/tools/js/smartComponents/Svg/icons/ThemeIconSvg/ThemeIconSvg.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+import BaseSvg from "../../BaseSvg";
+import { InjectedSvgProps } from "../../hocs";
+
+export default class ThemeIconSvg extends React.PureComponent<InjectedSvgProps> {
+  render() {
+    const { fillColor, className } = this.props;
+
+    let classNames: Array<string> = ["ddbc-theme-icon-svg"];
+
+    if (className) {
+      classNames.push(className);
+    }
+
+    return (
+      <BaseSvg className={classNames.join(" ")} viewBox="0 0 16 16">
+        <path
+          fill={fillColor}
+          d="M15,0H0v16h16V0H15z M12.3,3H3.7l-2-2h12.6L12.3,3z M4,12L4,12l0-8h8v8l0,0H4z M3,3.7v8.6l-2,2V1.7L3,3.7z M3.7,13h8.6
+			            l2,2H1.7L3.7,13z M13,12.3V3.7l2-2v12.6L13,12.3z"
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/icons/ThemeIconSvg/index.ts

@@ -0,0 +1,8 @@
+import { asLightSvg, asThemedSvg } from "../../hocs";
+import ThemeIconSvg from "./ThemeIconSvg";
+
+const LightThemeIconSvg = asLightSvg(ThemeIconSvg);
+const ThemedThemeIconSvg = asThemedSvg(ThemeIconSvg);
+
+export default ThemeIconSvg;
+export { ThemeIconSvg, LightThemeIconSvg, ThemedThemeIconSvg };

ddb_main/tools/js/smartComponents/Svg/icons/UnlockSvg/UnlockSvg.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+
+import BaseSvg from "../../BaseSvg";
+import { InjectedSvgProps } from "../../hocs";
+
+export default class UnlockSvg extends React.PureComponent<InjectedSvgProps> {
+  static defaultProps = {
+    className: "",
+  };
+
+  render() {
+    const { className, fillColor } = this.props;
+
+    return (
+      <BaseSvg viewBox="0 0 10.23313 16" className={className}>
+        <path
+          fill={fillColor}
+          d="M5.11656,6.73717l-2.80744.39938V4.19033a2.8071,2.8071,0,0,1,5.6142,0H9.30741a4.19119,4.19119,0,0,0-8.38238,0V7.33344L0,7.465v7.61549L5.11656,16l5.11657-.91947V7.465Z"
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/icons/UnlockSvg/index.ts

@@ -0,0 +1,9 @@
+import { asDarkSvg, asDisabledSvg, asLightSvg } from "../../hocs";
+import UnlockSvg from "./UnlockSvg";
+
+const LightUnlockSvg = asLightSvg(UnlockSvg);
+const DarkUnlockSvg = asDarkSvg(UnlockSvg);
+const DisabledUnlockSvg = asDisabledSvg(UnlockSvg);
+
+export default UnlockSvg;
+export { UnlockSvg, LightUnlockSvg, DarkUnlockSvg, DisabledUnlockSvg };

ddb_main/tools/js/smartComponents/Svg/icons/VulnerabilitySvg/VulnerabilitySvg.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../BaseSvg";
+
+const VulnerabilitySvg: React.FunctionComponent<BaseSvgProps> = ({
+  className = "",
+  fillColor,
+}) => {
+  return (
+    <BaseSvg className={className} viewBox="0 0 40.89941 48">
+      <path
+        fill={fillColor}
+        d="M40.4497,8c-11,0-20-6-20-8,0,2-9,8-20,8-4,35,20,40,20,40S44.4497,43,40.4497,8Zm-16.63,30.42h-7.12l-9.02-27.02h7.22L20.2597,31.07l5.38-19.67h7.27Z"
+      />
+    </BaseSvg>
+  );
+};
+
+export default VulnerabilitySvg;

ddb_main/tools/js/smartComponents/Svg/icons/VulnerabilitySvg/index.ts

@@ -0,0 +1,13 @@
+import { asDarkModeNegativeSvg, asNegativeSvg } from "../../hocs";
+import VulnerabilitySvg from "./VulnerabilitySvg";
+
+const NegativeVulnerabilitySvg = asNegativeSvg(VulnerabilitySvg);
+const DarkModeNegativeVulnerabilitySvg =
+  asDarkModeNegativeSvg(VulnerabilitySvg);
+
+export default VulnerabilitySvg;
+export {
+  VulnerabilitySvg,
+  NegativeVulnerabilitySvg,
+  DarkModeNegativeVulnerabilitySvg,
+};

ddb_main/tools/js/smartComponents/Svg/icons/chevrons/ChevronDownSvg/ChevronDownSvg.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+import BaseSvg from "../../../BaseSvg";
+import { InjectedSvgProps } from "../../../hocs";
+
+export default class ChevronDownSvg extends React.PureComponent<InjectedSvgProps> {
+  render() {
+    const { fillColor, className } = this.props;
+
+    let classNames: Array<string> = [
+      "ddbc-chevron-svg",
+      "ddbc-chevron-down-svg",
+    ];
+
+    if (className) {
+      classNames.push(className);
+    }
+
+    return (
+      <BaseSvg className={classNames.join(" ")} viewBox="0 0 1792 1792">
+        <path
+          fill={fillColor}
+          d="M1683,653.5l-742,741c-12.7,12.7-27.7,19-45,19s-32.3-6.3-45-19l-742-741c-12.7-12.7-19-27.8-19-45.5
+                        s6.3-32.8,19-45.5l166-165c12.7-12.7,27.7-19,45-19s32.3,6.3,45,19l531,531l531-531c12.7-12.7,27.7-19,45-19s32.3,6.3,45,19l166,165
+                        c12.7,12.7,19,27.8,19,45.5S1695.7,640.8,1683,653.5z"
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/icons/chevrons/ChevronDownSvg/index.ts

@@ -0,0 +1,21 @@
+import {
+  asDarkSvg,
+  asDisabledSvg,
+  asLightSvg,
+  asThemedSvg,
+} from "../../../hocs";
+import ChevronDownSvg from "./ChevronDownSvg";
+
+const LightChevronDownSvg = asLightSvg(ChevronDownSvg);
+const DarkChevronDownSvg = asDarkSvg(ChevronDownSvg);
+const DisabledChevronDownSvg = asDisabledSvg(ChevronDownSvg);
+const ThemedChevronDownSvg = asThemedSvg(ChevronDownSvg);
+
+export default ChevronDownSvg;
+export {
+  ChevronDownSvg,
+  LightChevronDownSvg,
+  ThemedChevronDownSvg,
+  DarkChevronDownSvg,
+  DisabledChevronDownSvg,
+};

ddb_main/tools/js/smartComponents/Svg/icons/chevrons/ChevronLeftSvg/ChevronLeftSvg.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+import BaseSvg from "../../../BaseSvg";
+import { InjectedSvgProps } from "../../../hocs";
+
+export default class ChevronLeftSvg extends React.PureComponent<InjectedSvgProps> {
+  render() {
+    const { fillColor, className } = this.props;
+
+    let classNames: Array<string> = [
+      "ddbc-chevron-svg",
+      "ddbc-chevron-left-svg",
+    ];
+
+    if (className) {
+      classNames.push(className);
+    }
+
+    return (
+      <BaseSvg className={classNames.join(" ")} viewBox="0 0 1035 1612">
+        <path
+          fill={fillColor}
+          d="M1184,90q26.5,0,45.5,19l165,166q19,19,19,45t-19,45l-531,531,531,531q19,19,19,45t-19,45l-165,166q-19,19-45.5,19t-45.5-19l-741-742q-19-19-19-45t19-45l741-742Q1157.5,90,1184,90Z"
+          transform="translate(-378.5 -90)"
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/icons/chevrons/ChevronLeftSvg/index.ts

@@ -0,0 +1,24 @@
+import {
+  asBuilderSvg,
+  asDarkSvg,
+  asDisabledSvg,
+  asLightSvg,
+  asThemedSvg,
+} from "../../../hocs";
+import ChevronLeftSvg from "./ChevronLeftSvg";
+
+const BuilderChevronLeftSvg = asBuilderSvg(ChevronLeftSvg);
+const LightChevronLeftSvg = asLightSvg(ChevronLeftSvg);
+const DarkChevronLeftSvg = asDarkSvg(ChevronLeftSvg);
+const DisabledChevronLeftSvg = asDisabledSvg(ChevronLeftSvg);
+const ThemedChevronLeftSvg = asThemedSvg(ChevronLeftSvg);
+
+export default ChevronLeftSvg;
+export {
+  ChevronLeftSvg,
+  BuilderChevronLeftSvg,
+  LightChevronLeftSvg,
+  ThemedChevronLeftSvg,
+  DarkChevronLeftSvg,
+  DisabledChevronLeftSvg,
+};

ddb_main/tools/js/smartComponents/Svg/icons/chevrons/ChevronRightSvg/ChevronRightSvg.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+import BaseSvg from "../../../BaseSvg";
+import { InjectedSvgProps } from "../../../hocs";
+
+export default class ChevronRightSvg extends React.PureComponent<InjectedSvgProps> {
+  render() {
+    const { fillColor, className } = this.props;
+
+    let classNames: Array<string> = [
+      "ddbc-chevron-svg",
+      "ddbc-chevron-right-svg",
+    ];
+
+    if (className) {
+      classNames.push(className);
+    }
+
+    return (
+      <BaseSvg className={classNames.join(" ")} viewBox="0 0 1035 1612">
+        <path
+          fill={fillColor}
+          d="M653.5,109l741,742q19,19,19,45t-19,45l-741,742q-19,19-45.5,19t-45.5-19l-165-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l165-166q19-19,45.5-19T653.5,109Z"
+          transform="translate(-378.5 -90)"
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/icons/chevrons/ChevronRightSvg/index.ts

@@ -0,0 +1,24 @@
+import {
+  asBuilderSvg,
+  asDarkSvg,
+  asDisabledSvg,
+  asLightSvg,
+  asThemedSvg,
+} from "../../../hocs";
+import ChevronRightSvg from "./ChevronRightSvg";
+
+const BuilderChevronRightSvg = asBuilderSvg(ChevronRightSvg);
+const LightChevronRightSvg = asLightSvg(ChevronRightSvg);
+const DarkChevronRightSvg = asDarkSvg(ChevronRightSvg);
+const DisabledChevronRightSvg = asDisabledSvg(ChevronRightSvg);
+const ThemedChevronRightSvg = asThemedSvg(ChevronRightSvg);
+
+export default ChevronRightSvg;
+export {
+  ChevronRightSvg,
+  BuilderChevronRightSvg,
+  LightChevronRightSvg,
+  ThemedChevronRightSvg,
+  DarkChevronRightSvg,
+  DisabledChevronRightSvg,
+};

ddb_main/tools/js/smartComponents/Svg/icons/chevrons/ChevronUpSvg/ChevronUpSvg.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+import BaseSvg from "../../../BaseSvg";
+import { InjectedSvgProps } from "../../../hocs";
+
+export default class ChevronUpSvg extends React.PureComponent<InjectedSvgProps> {
+  render() {
+    const { fillColor, className } = this.props;
+
+    let classNames: Array<string> = ["ddbc-chevron-svg", "ddbc-chevron-up-svg"];
+
+    if (className) {
+      classNames.push(className);
+    }
+
+    return (
+      <BaseSvg className={classNames.join(" ")} viewBox="0 0 1792 1792">
+        <path
+          fill={fillColor}
+          d="M109,1138.5l742-741c12.7-12.7,27.7-19,45-19s32.3,6.3,45,19l742,741c12.7,12.7,19,27.8,19,45.5
+                        c0,17.7-6.3,32.8-19,45.5l-166,165c-12.7,12.7-27.7,19-45,19s-32.3-6.3-45-19l-531-531l-531,531c-12.7,12.7-27.7,19-45,19
+                        s-32.3-6.3-45-19l-166-165c-12.7-12.7-19-27.8-19-45.5C90,1166.3,96.3,1151.2,109,1138.5z"
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/icons/chevrons/ChevronUpSvg/index.ts

@@ -0,0 +1,21 @@
+import {
+  asDarkSvg,
+  asDisabledSvg,
+  asLightSvg,
+  asThemedSvg,
+} from "../../../hocs";
+import ChevronUpSvg from "./ChevronUpSvg";
+
+const LightChevronUpSvg = asLightSvg(ChevronUpSvg);
+const DarkChevronUpSvg = asDarkSvg(ChevronUpSvg);
+const DisabledChevronUpSvg = asDisabledSvg(ChevronUpSvg);
+const ThemedChevronUpSvg = asThemedSvg(ChevronUpSvg);
+
+export default ChevronUpSvg;
+export {
+  ChevronUpSvg,
+  LightChevronUpSvg,
+  ThemedChevronUpSvg,
+  DarkChevronUpSvg,
+  DisabledChevronUpSvg,
+};

ddb_main/tools/js/smartComponents/Svg/icons/menu/AbilitiesSvg/AbilitiesSvg.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../../BaseSvg";
+
+export default class AbilitiesSvg extends React.PureComponent<BaseSvgProps> {
+  static defaultProps = {
+    className: "",
+  };
+
+  render() {
+    const { className, fillColor } = this.props;
+
+    return (
+      <BaseSvg viewBox="0 0 134 144" className={className}>
+        <g fill={fillColor}>
+          <path d="M95.2078222,31.6564445 C102.611927,36.9740755 106.365398,41.8804109 106.365398,41.8804109 L110.739645,44.7774205 C108.552521,43.3289157 104.178274,43.3289157 104.178274,43.3289157 C118.759099,49.122935 120.217182,59.2624686 120.217182,59.2624686 C119.48814,57.8139638 115.113893,57.8139638 115.113893,57.8139638 C124.591429,61.4352258 127.507594,73.0232643 127.507594,73.0232643 C126.049512,71.5747595 120.946223,71.5747595 120.946223,71.5747595 C127.507594,75.1960215 128.965677,85.3355552 128.965677,85.3355552 C126.049512,81.7142932 120.217182,81.7142932 120.217182,81.7142932 C131.1528,89.6810696 133.339924,107.78738 133.339924,107.78738 C131.1528,104.89037 129.694718,104.166118 129.694718,104.166118 C134.798007,115.754156 134.798007,125.169437 132.610883,132.411962 C132.610883,132.411962 132.610883,133.136214 132.610883,134.584719 C131.881842,136.757476 130.423759,141.10299 123.862388,144 C123.862388,144 124.591429,130.963457 113.65581,121.548175 C113.65581,121.548175 115.113893,133.136214 119.48814,137.481728 C119.48814,137.481728 111.468686,137.481728 107.82348,131.687709 C107.82348,131.687709 107.094439,137.481728 110.010604,141.827243 C110.010604,141.827243 94.7007375,138.930233 91.0555312,128.790699 C91.0555312,128.790699 88.8684074,136.033224 93.242655,143.275748 C93.242655,143.275748 71.3714172,142.551495 63.3519633,130.239204 C63.3519633,130.239204 65.5390871,135.308971 60.4357983,142.551495 C60.4357983,142.551495 50.2292206,139.654486 46.5840144,130.963457 C46.5840144,130.963457 43.6678493,137.481728 47.3130556,143.275748 C47.3130556,143.275748 34.9193542,143.275748 23.9837353,131.687709 C23.9837353,131.687709 23.9837353,138.205981 26.8999003,141.827243 C26.8999003,141.827243 19.6094877,137.481728 17.422364,132.411962 C17.422364,132.411962 9.40291011,119.375418 7.94482759,110.684389 L9.40291011,98.3720985 C9.40291011,98.3720985 10.1319514,94.0265841 11.5900339,91.1295744 C13.7771577,91.1295744 16.6933227,91.8538268 18.8804465,92.5780792 C25.4418178,96.1993413 42.2097668,104.166118 57.5196332,104.166118 C58.9777158,104.166118 60.4357983,104.166118 61.8938808,104.166118 C77.2037473,102.717613 84.4941599,91.1295744 87.4103249,85.3355552 C90.3264899,88.9568172 94.7007375,92.5780792 94.7007375,92.5780792 L98.3459438,96.1993413 L97.6169025,91.1295744 C96.8878613,87.5083124 94.7007375,82.4385456 93.242655,78.0930312 L94.7007375,78.8172836 L94.7007375,75.1960215 C94.7007375,73.7475167 93.9716962,72.2990119 93.9716962,70.8505071 C94.7007375,71.5747595 95.4297788,71.5747595 95.4297788,71.5747595 L99.8040263,73.7475167 L97.6169025,69.4020023 C96.15882,65.0564879 93.9716962,62.1594782 92.5136137,59.986721 L96.15882,59.986721 L93.9716962,57.0897114 C93.242655,56.365459 93.242655,56.365459 92.5136137,55.6412066 L98.3459438,56.365459 L94.7007375,52.744197 C93.242655,51.2956922 92.5136137,49.8471874 91.0555312,49.122935 L99.0749851,51.2956922 L95.4297788,46.9501777 C89.5974487,40.4319061 61.1648395,29.56812 56.0615507,27.3953628 C58.5157508,24.3477639 60.9699508,22.3260901 63.8587068,20.4669385 C63.5302449,20.2641653 63.3519633,20.1528388 63.3519633,20.1528388 C63.3519633,20.1528388 95.4297788,-5.19599542 134.068966,14.3588195 C134.068966,14.3588195 123.862388,14.3588195 120.217182,16.5315767 C120.217182,16.5315767 123.862388,15.8073243 125.32047,16.5315767 C125.32047,16.5315767 121.675264,18.7043339 116.571975,17.9800815 C116.571975,17.9800815 116.571975,18.7043339 120.946223,19.4285864 C120.946223,19.4285864 118.030058,22.325596 110.010604,22.325596 C110.010604,22.325596 112.197728,23.7741008 115.113893,23.7741008 C115.113893,23.7741008 112.926769,26.6711104 104.907315,26.6711104 C104.907315,26.6711104 105.636356,27.3953628 107.094439,27.3953628 C107.094439,27.3953628 103.449233,28.8438676 100.533068,28.1196152 C100.533068,28.1196152 101.99115,29.56812 102.720191,29.56812 C102.720191,29.56812 98.5159258,30.2642282 95.2078222,31.6564445 Z" />
+          <path d="M27.5139937 20.2690075C34.1884697 12.7639713 49.9667473-1.48054959 72.4965517.125097866 72.4965517.125097866 65.9756795 3.01673626 63.8020554 5.18546506 63.8020554 5.18546506 65.9756795 3.73964586 67.4247622 3.73964586 67.4247622 3.73964586 65.9756795 5.90837466 62.3529727 7.35419386 62.3529727 7.35419386 62.3529727 8.07710346 65.2511381 7.35419386 65.2511381 7.35419386 63.8020554 9.52292266 58.7302659 12.4145611 58.7302659 12.4145611 60.1793486 12.4145611 62.3529727 11.6916515 62.3529727 11.6916515 61.6928611 13.667526 57.2222477 15.733298 59.0313156 15.8896856 60.7620132 16.029109 62.3529727 16.029109 55.1075591 20.3665666 48.5866868 26.872753 45.6885214 38.4393066 39.8921905 60.1265946 28.2995287 60.1265946 18.880491 61.5724138 18.1559496 59.403685 15.2577842 57.9578658 12.3596187 56.5120466L10.1859946 55.789137C8.66754915 41.6488966 13.8672015 27.5086562 27.5139937 20.2690075zM83.1921978 70.2900455L85.3678858 68.8397832C84.6426564 66.6643899 83.9174271 65.2141277 83.9174271 65.2141277L86.0931151 63.7638654C84.6426564 60.8633409 83.1921978 59.4130787 82.4669685 59.4130787L73.7642169 51.4366364 79.5660513 54.3371609 81.0165099 52.1617675C81.0165099 52.1617675 81.0165099 52.1617675 81.7417392 52.1617675 82.4669685 52.1617675 83.1921978 52.8868986 83.9174271 52.8868986 81.0165099 50.7115053 79.5660513 49.2612431 79.5660513 49.2612431L73.7642169 44.1853252 80.2912806 46.3607186C73.0389876 42.0099319 62.160548 37.6591452 57.0839429 36.2088829L57.8091722 34.7586207C55.6334843 37.6591452 54.1830257 41.2848008 52.732567 44.9104563 52.0073377 47.8109808 51.2821084 49.9863742 50.5568791 52.1617675 50.5568791 52.1617675 51.2821084 52.1617675 51.2821084 52.1617675 55.6334843 52.1617675 63.6110066 55.7874231 63.6110066 60.1382098 63.6110066 64.4889965 57.8091722 72.4654388 53.4577964 72.4654388 49.8316498 72.4654388 44.0298154 68.1146521 43.3045861 64.4889965 38.9532103 68.8397832 33.8766051 68.1146521 30.2504586 68.1146521 33.8766051 73.1905699 30.9756879 78.9916189 30.9756879 79.71675L33.1513758 81.8921434 28.8 82.6172745 29.5252293 84.0675367C29.5252293 84.0675367 49.1064205 95.6696346 63.6110066 94.2193724 77.3903634 92.7691101 81.7417392 78.2664878 82.4669685 77.5413567L83.1921978 73.9157011C86.8334533 78.0123091 88.8958241 80.5440338 89.3793103 81.5108753 87.9288517 75.7098264 83.1921978 70.2900455 83.1921978 70.2900455zM7.88605046 92.9161468C7.91608043 92.9212845 7.94640383 92.9269787 7.97703405 92.933244 6.45759237 95.8728302 5.72032862 97.3241379 5.72032862 97.3241379 4.96060778 95.8543448 4.99385226 95.8387558 4.23413142 94.3689627 4.29313889 94.340423 4.35100539 94.3114841 4.4078161 94.2822376 4.34037678 94.3162933 4.27145113 94.3504225 4.20088694 94.3845517-6.43520483 77.481931 6.48004946 60.5793103 6.48004946 60.5793103 10.2786537 62.0491034 13.317537 65.7235862 14.8369787 69.398069 17.8758621 75.2772414 17.8758621 81.8913103 17.8758621 81.8913103 11.7980953 82.6262069 8.75921198 87.7704828 7.99949114 92.9147586 7.96120328 92.9147586 7.92339782 92.9152253 7.88605046 92.9161468z" />
+        </g>
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/icons/menu/AbilitiesSvg/index.ts

@@ -0,0 +1,8 @@
+import { asDarkSvg, asLightSvg } from "../../../hocs";
+import AbilitiesSvg from "./AbilitiesSvg";
+
+const LightAbilitiesSvg = asLightSvg(AbilitiesSvg);
+const DarkAbilitiesSvg = asDarkSvg(AbilitiesSvg);
+
+export default AbilitiesSvg;
+export { AbilitiesSvg, LightAbilitiesSvg, DarkAbilitiesSvg };

ddb_main/tools/js/smartComponents/Svg/icons/menu/ActionsSvg/ActionsSvg.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../../BaseSvg";
+
+export default class ActionsSvg extends React.PureComponent<BaseSvgProps> {
+  static defaultProps = {
+    className: "",
+  };
+
+  render() {
+    const { className, fillColor } = this.props;
+
+    return (
+      <BaseSvg viewBox="0 0 149 144" className={className}>
+        <g fill={fillColor} opacity=".89" transform="translate(.74)">
+          <path d="M132.39628,49.653393 C131.802145,45.5227285 130.482935,41.5048751 128.47568,37.7919268 C126.616052,35.4844132 123.845339,34.099057 120.883551,33.9958627 L120.37741,33.9958627 C116.024895,33.8911513 111.944792,36.1079 109.664073,39.8164943 C106.458508,30.5372265 102.999872,25.3070938 96.6730984,25.3070938 C91.6517967,25.1734503 86.8640495,27.4265078 83.7664805,31.3807963 C80.8077369,35.4487749 79.9911944,40.6934904 81.5731991,45.4684119 C81.5731991,46.5650526 82.5854828,48.5896201 83.4290526,51.2046865 C79.3039463,46.5925507 73.6320228,43.6515533 67.4855835,42.9377025 C64.1399815,42.9905965 61.0145904,44.6157999 59.0498856,47.3242654 C54.4946087,53.5666819 57.6158169,60.6526682 74.3184989,90.8524668 L79.4642746,100.300449 C75.5513209,99.7515725 71.6055386,99.4697309 67.6542975,99.4568787 C63.1649158,99.1352122 58.6572778,99.7381447 54.4102517,101.228375 C49.2943021,103.317841 45.9933934,108.176867 45.7655325,113.515879 L1.77149657,84.6100503 L49.9393318,84.6100503 L0,0 L64.7018032,41.5036339 L53.9884668,9.53233867 L79.1268467,25.3070938 L95.9982426,3.88042105 L116.328275,32.3087231 L136.742664,6.1580595 L132.39628,49.653393 Z M46.0261587,116.928377 C46.9188787,122.365388 51.5679176,126.421047 57.1096751,126.535469 C57.9230483,126.61779 58.7426542,126.61779 59.5560275,126.535469 C65.8189235,126.997519 71.9548286,128.53863 77.692778,131.090746 C78.0978182,131.72624 78.562983,132.346703 79.0838693,132.950268 L68.9196522,135.224238 L5.3144897,143.406865 L46.0261587,116.928377 Z" />
+          <path d="M96.6730984,33.7427918 C102.071945,33.7427918 108.398719,75.9212815 110.929428,75.9212815 C113.37578,75.9212815 114.303707,59.5560275 114.472421,54.4946087 C114.641135,49.4331899 115.400348,42.1784897 120.37741,42.1784897 C125.438828,42.1784897 123.582975,65.2079451 122.992476,68.7509382 C122.401977,72.2939314 122.992476,80.0547735 125.776256,80.0547735 C126.619826,80.0547735 127.716467,79.0424897 129.066178,76.2587094 C133.368384,67.8230114 141.719725,60.4839542 145.937574,60.4839542 C146.725159,60.4392854 147.447387,60.9207704 147.709071,61.6649519 C149.311854,66.0515149 134.380668,89.2496842 132.777886,92.0334645 C131.175103,94.8172449 132.777886,114.725492 131.343817,123.836046 C129.909748,132.9466 110.929428,134.971167 110.929428,134.971167 C97.9384531,134.971167 87.0564027,130.078462 84.6100503,125.270114 C82.1636979,120.461767 65.714087,116.834416 59.3029565,116.834416 L57.1096751,116.834416 C53.4823249,116.834416 52.2169703,110.760714 57.8688879,108.398719 C61.0160448,107.640007 64.2761704,107.468421 67.4855835,107.892577 C72.6240604,107.846637 77.7497143,108.413007 82.7541968,109.579716 C83.8186951,109.914848 84.9281127,110.085528 86.044119,110.085858 C89.1653272,110.085858 92.0334645,108.483076 90.177611,103.252943 C87.7312586,96.2513135 62.9303066,56.1817483 65.714087,52.6387551 C66.0388127,51.9329975 66.7126585,51.4516791 67.4855835,51.3734005 C71.7877895,51.3734005 80.5609153,59.3029565 85.6223341,67.7386545 C90.6837529,76.1743524 96.5887414,82.1636979 99.2881648,82.1636979 C99.7158392,82.1915906 100.128564,82.0011021 100.384805,81.6575561 C102.156302,79.2112037 91.1055378,48.7583341 89.5027551,43.3594874 C88.3952186,41.0895358 88.6479264,38.3911426 90.1576753,36.3663029 C91.6674242,34.3414633 94.1814682,33.3291541 96.6730984,33.7427918 Z" />
+        </g>
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/icons/menu/ActionsSvg/index.ts

@@ -0,0 +1,8 @@
+import { asDarkSvg, asLightSvg } from "../../../hocs";
+import ActionsSvg from "./ActionsSvg";
+
+const LightActionsSvg = asLightSvg(ActionsSvg);
+const DarkActionsSvg = asDarkSvg(ActionsSvg);
+
+export default ActionsSvg;
+export { ActionsSvg, LightActionsSvg, DarkActionsSvg };

ddb_main/tools/js/smartComponents/Svg/icons/menu/CreaturesSvg/CreaturesSvg.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../../BaseSvg";
+
+export default class CreaturesSvg extends React.PureComponent<BaseSvgProps> {
+  static defaultProps = {
+    className: "",
+  };
+
+  render() {
+    const { className, fillColor } = this.props;
+
+    return (
+      <BaseSvg viewBox="0 0 25 25" className={className}>
+        <defs>
+          <polygon
+            id="icon---creature@2x-a"
+            points="0 .058 1.06 .058 1.06 5.006 0 5.006"
+          />
+        </defs>
+        <g fill="none" fillRule="evenodd" transform="translate(1)">
+          <path
+            fill={fillColor}
+            d="M11.1381293 23.8628061C10.0682313 23.527602 8.9655102 23.5454592 7.99459184 23.927602 5.33540816 24.9742007.972482993 25.3060034 1.72588435 20.7832143 2.27673469 17.4770918 5.43829932 17.3753912 7.46346939 15.9094048 8.58047619 15.1007313 9.21755102 12.8988605 11.0272449 13.0315136 12.8053061 13.1617857 13.4333673 15.194949 14.7456122 16.0913776 17.5473129 18.0053231 22.1854082 18.4769218 19.417551 22.435085 17.0519048 25.8177381 14.6287755 24.9566837 11.1381293 23.8628061M2.51539116 12.499966C2.02134354 11.9844898 1.16505102 12.0520068.770663265 12.647415.110969388 13.6433333.0492346939 15.065102.644472789 16.0933333 1.10807823 16.8941837 2.1077381 17.3047279 2.83528912 16.5928231 3.32610544 16.1127211 3.49073129 14.9196939 3.41913265 14.2528571 3.37117347 13.805068 3.05348639 13.0613605 2.51539116 12.499966M7.20207483 8.52022109C6.79561224 7.84232993 5.89816327 7.70032313 5.30292517 8.22056122 4.23863946 9.15083333 3.67248299 10.4409694 4.28829932 11.8756633 4.64901361 12.7161395 5.24595238 13.1851871 6.19289116 12.9763435 6.54323129 12.8989626 6.91602041 12.8069558 7.20853741 12.5144388 7.50088435 12.2220918 7.66806122 11.4989626 7.6405102 11.1164796 7.58438776 10.3377381 7.69697279 9.34573129 7.20207483 8.52022109M12.2988776 6.3122449C11.8313605 6.09047619 11.2754082 6.14846939 10.8631633 6.46122449 10.03 7.09336735 9.58017007 7.92227891 9.68544218 9.06105442 9.7597619 9.86479592 9.88170068 10.7270408 10.5619728 11.2272109 11.402449 11.8452381 12.6782993 11.2168367 13.0376531 10.2719388 13.2078912 9.82380952 13.2228571 9.50493197 13.1946259 9.03180272 13.167415 8.57670068 13.1726871 8.17772109 13.192415 7.70612245 13.2196259 7.05238095 13.000068 6.64506803 12.2988776 6.3122449M17.2009524 8.12511905C16.9788435 7.9897449 16.6871769 8.01797619 16.5116667 8.20964286 16.1007823 8.65811224 15.5397279 9.95573129 15.3262925 10.3411054 14.8684694 11.1672959 14.7842857 11.8759694 15.1235714 12.8213776 15.4956803 13.8581122 16.4897279 13.7060714 17.2541837 13.1417857 18.117619 12.5043707 18.472381 11.4079422 18.4810544 10.4264796 18.4897279 9.45284014 18.3232313 8.80930272 17.2009524 8.12511905M22.2045068 12.5752041C21.944983 12.2107483 21.4541667 12.0957823 21.0834184 12.3462925 20.7045068 12.602415 20.4892007 13.0301361 20.2613095 13.4728231 19.8514456 14.2694218 18.9876701 14.9338776 19.1337585 15.9076871 19.2427721 16.6326871 20.0754252 17.1490136 20.8041667 16.9728231 21.6403912 16.7707823 22.2128401 15.9843878 22.3939626 15.2087075 22.5342687 14.6073469 22.7783163 13.3811565 22.2045068 12.5752041"
+          />
+          <g transform="translate(0 6.467)">
+            <mask id="icon---creature@2x-b" fill="#fff">
+              <use xlinkHref="#icon---creature@2x-a" />
+            </mask>
+            <path
+              fill={fillColor}
+              d="M0.118248299,4.57210884 C0.329302721,5.14693878 0.76042517,5.12636054 0.889506803,4.65697279 C0.985595238,4.30765306 0.894778912,3.66547619 0.894438776,3.31632653 C0.893928571,2.58911565 0.856343537,1.08809524 1.05991497,0.0576530612 C0.737295918,1.14336735 -0.358112245,2.91496599 0.118248299,4.57210884"
+              mask="url(#icon---creature@2x-b)"
+            />
+          </g>
+          <path
+            fill={fillColor}
+            d="M5.50229592 6.96736395C5.46641156 7.05767007 5.3087585 7.06073129 5.26164966 7.0112415 4.28664966 6.02858844 4.92848639 3.44916667 5.64294218 2.44406463 5.40705782 3.15835034 5.30331633 4.07569728 5.45501701 4.77586735 5.59685374 5.42926871 5.89821429 5.95392857 5.50229592 6.96736395M11.2848639.0000510204082C10.8857143 1.45736395 10.8472789 2.79086735 11.170068 4.26161565 11.3195578 4.94205782 11.7482993 5.25158163 11.9188776 4.42658163 12.0397959 3.84222789 12.155102 3.03406463 11.9782313 2.44784014 11.7782313 1.78491497 11.2440476 1.15770408 11.2848639.0000510204082M16.7684864 2.17357143C16.9451871 2.95095238 17.1309014 3.69108844 17.3089626 4.45792517 17.4805612 5.19704082 17.2638946 6.03122449 17.3888946 6.78173469 17.5552211 7.77833333 18.3593027 7.35146259 18.3936565 6.57391156 18.417466 6.03547619 18.2269898 5.11438776 18.0484184 4.59006803 17.8337925 4.0822449 17.4363435 3.32697279 16.7684864 2.17357143M21.0196769 7.70957483C21.3783503 8.5219898 21.5242687 8.9187585 21.4206973 9.60481293 21.3337925 10.1810034 21.1404252 10.775051 21.4215476 11.317568 21.4790306 11.4286224 21.6059014 11.4959694 21.7275 11.4668878 22.759983 11.2209694 21.9877041 9.05056122 21.0196769 7.70957483"
+          />
+        </g>
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/icons/menu/CreaturesSvg/index.ts

@@ -0,0 +1,8 @@
+import { asDarkSvg, asLightSvg } from "../../../hocs";
+import CreaturesSvg from "./CreaturesSvg";
+
+const LightCreaturesSvg = asLightSvg(CreaturesSvg);
+const DarkCreaturesSvg = asDarkSvg(CreaturesSvg);
+
+export default CreaturesSvg;
+export { CreaturesSvg, LightCreaturesSvg, DarkCreaturesSvg };

ddb_main/tools/js/smartComponents/Svg/icons/menu/DescriptionSvg/DescriptionSvg.tsx

@@ -0,0 +1,58 @@
+import * as React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../../BaseSvg";
+
+export default class DescriptionSvg extends React.PureComponent<BaseSvgProps> {
+  static defaultProps = {
+    className: "",
+  };
+
+  render() {
+    const { className, fillColor, secondaryFillColor } = this.props;
+
+    return (
+      <BaseSvg viewBox="0 0 139 136" className={className}>
+        <defs>
+          <polygon
+            id="icon---description-copy@2x-a"
+            points="0 .828 129.209 .828 129.209 125.717 0 125.717"
+          />
+          <polygon
+            id="icon---description-copy@2x-c"
+            points=".621 .796 81.849 .796 81.849 99.777 .621 99.777"
+          />
+        </defs>
+        <g fill="none" fillRule="evenodd" transform="translate(0 -1)">
+          <g transform="translate(0 10.483)">
+            <mask id="icon---description-copy@2x-b" fill="#fff">
+              <use xlinkHref="#icon---description-copy@2x-a" />
+            </mask>
+            <path
+              fill={fillColor}
+              d="M109.708992,79.00928 L110.400192,78.83648 C114.720192,77.73632 118.412352,78.25472 121.292352,80.32832 C126.821952,84.36608 126.873792,92.48768 126.361152,95.36768 C120.422592,96.68672 117.542592,96.34688 115.641792,95.59808 C117.029952,92.54528 117.893952,88.91648 116.511552,85.74848 C115.180992,82.80512 112.882752,80.50688 109.708992,79.00928 M17.093952,44.04608 C12.710592,44.21888 9.260352,43.06688 6.950592,40.47488 C2.521152,35.57888 2.751552,26.93888 3.033792,23.82848 C8.620992,23.76512 12.422592,25.66592 14.150592,26.76608 C12.249792,29.46752 11.564352,32.98688 12.313152,36.38528 C12.940992,39.37472 14.611392,41.96672 17.093952,44.04608 M122.668992,78.42752 C119.212992,75.89888 114.892992,75.26528 109.829952,76.52672 L100.320192,79.00928 L105.273792,80.04608 C109.651392,80.96768 112.819392,83.32928 114.322752,86.66432 C115.589952,89.54432 114.553152,92.94848 112.992192,95.53472 L112.421952,96.57728 L93.753792,103.77728 L108.211392,94.78592 C105.331392,93.23648 102.629952,90.98432 100.383552,87.64928 C96.121152,82.00448 95.660352,74.56832 96.691392,66.33728 C87.129792,74.33792 76.243392,82.69568 64.153152,91.04768 L44.050752,114.60608 L52.742592,89.02592 C52.972992,87.58592 56.832192,67.42592 65.932992,45.25568 C66.341952,44.21888 67.090752,43.40672 68.069952,42.88832 C67.781952,41.79392 67.891392,40.70528 68.300352,39.72608 C72.902592,29.29472 78.092352,20.31488 83.731392,12.76928 L73.081152,14.83712 L85.753152,10.23488 L95.481792,6.65792 C94.502592,5.73632 93.523392,4.93568 92.549952,4.29632 C83.270592,-1.80352 71.813952,1.99808 71.813952,1.99808 L0.441792,21.00608 L0.268992,22.15808 C0.211392,22.72832 -1.568448,35.34848 4.819392,42.37568 C7.762752,45.65888 11.909952,47.15648 17.203392,46.92608 L25.042752,45.65888 L22.450752,43.92512 C18.470592,42.14528 15.820992,39.26528 15.072192,35.74592 C14.444352,32.75648 15.250752,29.64608 17.260992,27.39392 L18.240192,26.35712 C21.523392,28.89728 23.833152,32.06528 25.382592,35.22752 L42.201792,33.32672 L26.880192,38.68928 C27.461952,40.35392 27.922752,41.91488 28.210752,43.29728 L43.699392,38.91392 L28.780992,46.97792 C29.011392,48.59648 29.011392,49.57568 29.011392,49.57568 C29.011392,65.46752 22.329792,74.74688 20.204352,91.21472 L40.531392,84.82688 L19.743552,95.24672 C19.570752,97.32608 19.513152,99.56672 19.513152,101.92832 C19.513152,111.43808 24.230592,125.71712 43.301952,125.71712 C61.042752,125.71712 120.192192,100.89728 128.083392,97.55648 L128.140992,97.55648 C128.492352,97.32608 128.780352,97.26848 128.889792,97.20512 L129.120192,96.22592 C129.183552,95.70752 130.272192,83.95712 122.668992,78.42752"
+              mask="url(#icon---description-copy@2x-b)"
+            />
+          </g>
+          <g transform="translate(56.84 .963)">
+            <mask id="icon---description-copy@2x-d" fill="#fff">
+              <use xlinkHref="#icon---description-copy@2x-c" />
+            </mask>
+            <path
+              fill={fillColor}
+              d="M73.467904,33.156672 L73.467904,33.208512 C67.949824,35.679552 61.573504,37.488192 55.243264,36.964032 C59.384704,39.394752 63.284224,41.059392 66.947584,42.297792 C63.670144,46.439232 59.666944,50.955072 54.817024,55.810752 C51.153664,55.338432 46.868224,54.048192 42.110464,51.525312 C44.155264,55.240512 47.110144,58.091712 50.203264,60.286272 C47.962624,62.475072 45.491584,64.709952 42.870784,67.042752 C40.111744,66.178752 37.444864,65.228352 35.405824,64.139712 C36.120064,66.564672 37.398784,68.707392 38.827264,70.469952 C29.357824,78.603072 16.127104,90.071232 2.187904,99.776832 C2.187904,99.684672 3.426304,97.829952 3.754624,97.357632 C3.800704,97.305792 3.800704,97.259712 3.852544,97.259712 C3.852544,97.207872 3.852544,97.207872 3.950464,97.207872 C23.695744,67.417152 57.673984,20.357952 74.994304,9.840192 C73.231744,10.462272 46.009984,20.928192 1.093504,99.114432 L0.995584,99.114432 C0.897664,99.298752 0.805504,99.684672 0.621184,99.776832 C0.621184,99.776832 4.324864,78.885312 13.465984,56.571072 C15.464704,58.379712 17.843584,60.142272 20.550784,61.611072 C18.845824,60.712512 17.181184,56.144832 15.793024,51.145152 C20.510464,40.679232 26.356864,30.155712 33.591424,21.452352 C35.590144,24.735552 38.349184,27.874752 42.254464,29.971392 C40.347904,28.116672 40.163584,20.830272 40.399744,14.223552 C43.867264,11.032512 47.582464,8.273472 51.625984,6.084672 C52.340224,8.987712 53.670784,12.172992 55.767424,15.698112 C55.295104,10.842432 56.723584,6.510912 58.952704,2.847552 C65.236864,0.802752 72.183424,0.180672 79.705984,1.465152 C79.705984,1.465152 87.464704,11.130432 73.467904,33.156672"
+              mask="url(#icon---description-copy@2x-d)"
+            />
+          </g>
+          <path
+            fill={fillColor}
+            d="M60.68736,98.2112 C53.32032,109.33376 47.90016,117.98528 46.09152,121.38368 C50.1408,113.78048 54.06912,106.71296 57.85344,100.10048 L57.9168,100.07744 C58.84992,99.44384 59.78304,98.81024 60.68736,98.2112"
+          />
+          <path
+            fill={fillColor}
+            d="M75.68352,73.702976 C70.07904,81.150656 60.21216,96.420416 57.91392,100.078016 L60.68448,98.211776 L75.68352,73.702976 Z"
+          />
+        </g>
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/icons/menu/DescriptionSvg/index.ts

@@ -0,0 +1,8 @@
+import { asDarkSvg, asLightSvg } from "../../../hocs";
+import DescriptionSvg from "./DescriptionSvg";
+
+const LightDescriptionSvg = asLightSvg(DescriptionSvg);
+const DarkDescriptionSvg = asDarkSvg(DescriptionSvg);
+
+export default DescriptionSvg;
+export { DescriptionSvg, LightDescriptionSvg, DarkDescriptionSvg };

ddb_main/tools/js/smartComponents/Svg/icons/menu/EquipmentSvg/EquipmentSvg.tsx

@@ -0,0 +1,68 @@
+import * as React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../../BaseSvg";
+
+export default class EquipmentSvg extends React.PureComponent<BaseSvgProps> {
+  static defaultProps = {
+    className: "",
+  };
+
+  render() {
+    const { className, fillColor } = this.props;
+
+    return (
+      <BaseSvg viewBox="0 0 172 135" className={className}>
+        <defs>
+          <polygon
+            id="icon---equipment-copy@2x-a"
+            points="0 .614 77.491 .614 77.491 134.399 0 134.399"
+          />
+        </defs>
+        <g fill="none" fillRule="evenodd">
+          <path
+            fill={fillColor}
+            d="M9.023232 60.475968L8.984832 61.704768 8.984832 61.935168 40.434432 63.509568 67.237632 64.815168 67.237632 60.475968C67.237632 60.130368 67.237632 59.784768 67.199232 59.435328L58.063872 54.907968 66.124032 49.493568C62.706432 29.909568 51.378432 15.317568 38.360832 15.163968L38.130432 15.163968C27.032832 15.163968 17.202432 25.570368 12.325632 40.661568L31.141632 42.888768 11.404032 43.810368C9.983232 48.955968 9.176832 54.600768 9.023232 60.475968M171.2256 59.3232C170.6496 38.5872 161.2416 20.7312 147.7248 11.976 156.5952 23.496 162.3552 40.5456 162.7776 59.9376L162.7776 64.008 171.264 63.8928 171.264 59.3232 171.2256 59.3232z"
+          />
+          <polygon
+            fill={fillColor}
+            points="162.777 103.714 162.815 127.752 162.815 129.365 171.263 128.866 171.263 67.733 162.777 67.848"
+          />
+          <g transform="translate(0 .226)">
+            <mask id="icon---equipment-copy@2x-b" fill="#fff">
+              <use xlinkHref="#icon---equipment-copy@2x-a" />
+            </mask>
+            <path
+              fill={fillColor}
+              d="M44.2752,0.959232 L40.704,0.767232 L40.6272,0.767232 L38.1312,0.613632 C17.5488,0.613632 0.768,26.341632 0.0384,58.559232 L0,58.559232 L0,126.412032 L76.2624,134.399232 L77.4912,134.322432 L77.4912,127.064832 L77.4912,68.696832 L76.2624,68.696832 L73.4208,68.735232 L71.1168,68.620032 L71.1168,124.108032 L70.4256,124.031232 L68.4672,123.839232 L5.1456,117.234432 L5.2608,58.290432 C6.4896,31.679232 20.6976,11.096832 38.1312,11.096832 L38.208,11.096832 C54.1056,11.135232 67.3536,28.338432 70.4256,51.608832 C70.7328,53.797632 70.9248,56.024832 71.04,58.290432 L71.1168,58.290432 L71.1168,64.780032 L73.4976,64.895232 L76.2624,64.856832 L77.4912,64.856832 L77.4912,59.749632 C77.2224,47.500032 74.6112,36.133632 70.4256,26.687232 C64.3584,13.016832 54.9504,3.340032 44.2752,0.959232"
+              mask="url(#icon---equipment-copy@2x-b)"
+            />
+          </g>
+          <path
+            fill={fillColor}
+            d="M131.520768,74.9136 C134.554368,74.9136 136.973568,77.3712 136.973568,80.4048 C136.973568,82.2096 136.086528,83.8224 134.707968,84.8208 L134.707968,91.9248 L128.099328,92.5776 L128.099328,84.6288 C126.874368,83.6304 126.067968,82.0944 126.067968,80.4048 C126.067968,77.3712 128.487168,74.9136 131.520768,74.9136 Z M144.269568,98.3376 L144.269568,69 L116.045568,69.4224 L116.045568,100.0656 L144.269568,98.3376 Z"
+          />
+          <polygon
+            fill={fillColor}
+            points="67.276 102.791 67.237 68.654 40.588 67.348 8.984 65.774 8.984 87.124 31.141 90.618 8.984 93.114 8.984 95.457 23.768 96.302 8.984 99.45 8.984 114.004 65.356 119.879 67.276 120.071 67.276 108.782 56.101 107.322 56.101 107.284 38.13 104.942 53.528 103.828"
+          />
+          <polygon
+            fill={fillColor}
+            points="158.937 92.04 158.937 91.464 158.937 67.886 150.758 68.002 148.112 68.002 148.112 101.986 112.204 104.136 112.204 68.462 108.786 68.501 93.81 68.693 93.81 83.323 103.986 84.59 93.81 85.819 93.81 114.235 108.825 116.462 108.825 116.539 93.81 117.998 93.81 118.536 93.81 120.494 100.377 120.878 93.81 122.837 93.81 129.941 93.81 133.55 158.975 129.595 158.975 127.214 158.975 114.926 150.335 113.851 158.975 110.357"
+          />
+          <path
+            fill={fillColor}
+            d="M88.283136,44.077248 C85.322496,29.062848 78.794496,16.429248 70.427136,8.749248 C67.163136,5.715648 63.588096,3.450048 59.828736,2.106048 L55.562496,1.875648 C61.249536,5.562048 66.314496,11.168448 70.427136,18.157248 C76.874496,29.216448 80.948736,43.808448 81.328896,59.936448 L81.328896,65.005248 L86.128896,64.966848 L89.968896,64.928448 L89.968896,59.974848 C89.853696,54.483648 89.243136,49.184448 88.283136,44.115648 L88.283136,44.077248 Z"
+          />
+          <path
+            fill={fillColor}
+            d="M93.810816,64.852416 L108.786816,64.660416 L149.375616,64.161216 L158.937216,64.046016 L158.937216,59.975616 C158.860416,55.905216 158.476416,51.911616 157.900416,48.071616 L143.692416,48.263616 L143.500416,47.687616 L157.405056,44.961216 C157.251456,44.193216 157.094016,43.386816 156.902016,42.618816 L148.492416,41.658816 L156.210816,39.623616 C152.758656,25.799616 146.226816,14.356416 138.051456,7.521216 C135.052416,6.638016 131.942016,6.177216 128.716416,6.177216 L90.051456,3.911616 L90.009216,3.911616 L70.425216,2.759616 L69.238656,2.682816 C69.657216,2.951616 70.045056,3.258816 70.425216,3.566016 C77.682816,9.095616 83.711616,17.774016 87.858816,28.449216 L94.310016,28.871616 L104.758656,29.524416 L116.390016,30.254016 L105.330816,31.329216 L92.390016,32.596416 L89.433216,32.865216 C89.817216,34.170816 90.239616,35.476416 90.585216,36.820416 C92.505216,43.962816 93.618816,51.758016 93.810816,59.937216 L93.810816,64.852416 Z"
+          />
+          <polygon
+            fill={fillColor}
+            points="81.331 68.846 81.331 127.905 81.331 134.318 89.971 133.78 89.971 129.288 89.971 117.998 89.971 68.769 86.131 68.808"
+          />
+        </g>
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/icons/menu/EquipmentSvg/index.ts

@@ -0,0 +1,8 @@
+import { asDarkSvg, asLightSvg } from "../../../hocs";
+import EquipmentSvg from "./EquipmentSvg";
+
+const LightEquipmentSvg = asLightSvg(EquipmentSvg);
+const DarkEquipmentSvg = asDarkSvg(EquipmentSvg);
+
+export default EquipmentSvg;
+export { EquipmentSvg, LightEquipmentSvg, DarkEquipmentSvg };

ddb_main/tools/js/smartComponents/Svg/icons/menu/ExtrasSvg/ExtrasSvg.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../../BaseSvg";
+
+export default class ExtrasSvg extends React.PureComponent<BaseSvgProps> {
+  static defaultProps = {
+    className: "",
+  };
+
+  render() {
+    const { className, fillColor } = this.props;
+
+    return (
+      <BaseSvg viewBox="0 0 21.41 4.34" className={className}>
+        <circle fill={fillColor} cx="10.7" cy="2.17" r="2.17" />
+        <circle fill={fillColor} cx="2.17" cy="2.17" r="2.17" />
+        <circle fill={fillColor} cx="19.24" cy="2.17" r="2.17" />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/icons/menu/ExtrasSvg/index.ts

@@ -0,0 +1,8 @@
+import { asDarkSvg, asLightSvg } from "../../../hocs";
+import ExtrasSvg from "./ExtrasSvg";
+
+const LightExtrasSvg = asLightSvg(ExtrasSvg);
+const DarkExtrasSvg = asDarkSvg(ExtrasSvg);
+
+export default ExtrasSvg;
+export { ExtrasSvg, LightExtrasSvg, DarkExtrasSvg };

ddb_main/tools/js/smartComponents/Svg/icons/menu/FeaturesSvg/FeaturesSvg.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../../BaseSvg";
+
+export default class FeaturesSvg extends React.PureComponent<BaseSvgProps> {
+  static defaultProps = {
+    className: "",
+  };
+
+  render() {
+    const { className, fillColor } = this.props;
+
+    return (
+      <BaseSvg viewBox="0 0 139 139" className={className}>
+        <g fill={fillColor} fillRule="evenodd" transform="translate(.353)">
+          <path
+            fillRule="nonzero"
+            d="M127.527552,75.108096 C127.354752,77.129856 127.066752,79.082496 126.605952,80.989056 C126.433152,81.910656 126.202752,82.889856 125.972352,83.811456 C125.511552,85.712256 124.935552,87.492096 124.244352,89.341056 C123.898752,90.199296 123.553152,91.120896 123.207552,91.990656 C122.861952,92.848896 122.458752,93.712896 122.055552,94.582656 C120.557952,97.629696 118.829952,100.509696 116.929152,103.222656 C116.122752,104.311296 115.316352,105.411456 114.452352,106.442496 L114.394752,106.500096 C111.975552,109.443456 109.325952,112.093056 106.388352,114.448896 C105.121152,115.491456 103.796352,116.470656 102.471552,117.392256 C99.764352,119.293056 96.884352,120.963456 93.889152,122.340096 C92.391552,123.031296 90.893952,123.670656 89.338752,124.240896 C83.002752,126.550656 76.205952,127.812096 69.121152,127.812096 C62.036352,127.812096 55.239552,126.550656 48.961152,124.240896 C47.405952,123.670656 45.908352,123.031296 44.410752,122.340096 C41.415552,120.900096 38.535552,119.293056 35.828352,117.392256 C35.194752,116.931456 34.561152,116.470656 33.927552,115.952256 C33.236352,115.549056 32.602752,115.030656 31.969152,114.448896 C30.471552,113.302656 29.089152,112.029696 27.764352,110.653056 C27.073152,110.019456 26.381952,109.380096 25.805952,108.631296 C25.114752,107.940096 24.538752,107.248896 23.905152,106.500096 L23.847552,106.442496 C22.983552,105.411456 22.177152,104.311296 21.370752,103.222656 C18.721152,99.530496 16.532352,95.498496 14.804352,91.241856 C14.458752,90.372096 14.113152,89.508096 13.825152,88.649856 C13.364352,87.319296 12.903552,85.942656 12.557952,84.560256 C12.212352,83.229696 11.866752,81.910656 11.636352,80.522496 C11.405952,79.600896 11.233152,78.679296 11.117952,77.763456 C11.002752,76.841856 10.887552,75.862656 10.772352,74.941056 C10.657152,74.192256 10.599552,73.380096 10.599552,72.579456 C10.541952,72.170496 10.541952,71.773056 10.541952,71.369856 C10.426752,70.621056 10.426752,69.872256 10.426752,69.123456 C10.426752,67.971456 10.484352,66.819456 10.599552,65.719296 C10.599552,64.573056 10.657152,63.472896 10.887552,62.378496 C11.060352,60.189696 11.405952,58.000896 11.981952,55.869696 C12.154752,54.948096 12.385152,54.032256 12.673152,53.162496 C13.594752,49.879296 14.804352,46.711296 16.244352,43.721856 C17.050752,41.988096 17.972352,40.323456 18.951552,38.710656 C19.930752,37.092096 20.967552,35.542656 22.119552,34.039296 C32.833152,19.702656 49.882752,10.429056 69.121152,10.429056 C88.359552,10.429056 105.466752,19.702656 116.180352,34.039296 C117.332352,35.542656 118.369152,37.092096 119.348352,38.710656 C120.327552,40.323456 121.249152,41.988096 122.055552,43.721856 C123.495552,46.711296 124.705152,49.879296 125.626752,53.162496 C125.914752,54.032256 126.145152,54.948096 126.317952,55.869696 C126.893952,58.000896 127.239552,60.189696 127.412352,62.378496 C127.642752,63.472896 127.700352,64.573056 127.700352,65.719296 C127.815552,66.819456 127.873152,67.971456 127.873152,69.123456 C127.873152,70.160256 127.873152,71.139456 127.757952,72.170496 C127.757952,73.149696 127.642752,74.128896 127.527552,75.108096 M69.121152,0.003456 C31.047552,0.003456 0.001152,30.992256 0.001152,69.123456 C0.001152,87.209856 7.028352,103.620096 18.433152,115.952256 C18.663552,116.240256 18.893952,116.522496 19.181952,116.752896 C31.796352,129.949056 49.479552,138.243456 69.121152,138.243456 C88.877952,138.243456 106.676352,129.891456 119.290752,116.580096 C119.405952,116.413056 119.521152,116.292096 119.636352,116.119296 C131.156352,103.792896 138.241152,87.261696 138.241152,69.123456 C138.241152,30.992256 107.252352,0.003456 69.121152,0.003456"
+          />
+          <path d="M114.393024,106.500672 C111.973824,109.444032 109.324224,112.093632 106.386624,114.449472 C99.589824,111.799872 92.044224,109.611072 87.378624,108.228672 C84.441024,107.364672 83.404224,107.082432 82.655424,106.731072 C80.581824,105.809472 79.084224,104.202432 78.450624,102.065472 C77.183424,97.745472 79.775424,92.964672 82.713024,88.471872 L83.173824,87.780672 C85.132224,84.785472 85.535424,84.272832 86.111424,81.329472 C86.514624,79.083072 88.185024,75.454272 90.316224,73.150272 C91.180224,71.710272 92.159424,67.563072 91.871424,66.065472 C91.065024,64.395072 89.740224,61.630272 89.970624,58.583232 C90.316224,54.142272 89.855424,49.943232 88.703424,46.308672 C87.436224,42.161472 83.289024,38.192832 78.450624,36.401472 C75.109824,35.191872 71.999424,35.082432 69.177024,35.082432 C66.239424,35.082432 63.186624,35.191872 59.788224,36.401472 C55.007424,38.192832 50.860224,42.161472 49.535424,46.308672 C48.383424,49.943232 47.980224,54.032832 48.268224,58.635072 C48.556224,61.803072 47.058624,64.804032 46.425024,66.065472 C46.137024,67.505472 47.116224,71.710272 47.922624,73.150272 C50.053824,75.454272 51.666624,78.973632 52.185024,81.214272 C52.761024,84.209472 53.106624,84.785472 55.065024,87.780672 L55.468224,88.299072 C58.521024,92.964672 61.113024,97.745472 59.845824,102.065472 C59.212224,104.202432 57.714624,105.809472 55.641024,106.731072 C54.892224,107.082432 53.855424,107.364672 50.917824,108.228672 C48.037824,109.092672 44.005824,110.244672 39.801024,111.684672 C38.937024,111.972672 38.073024,112.260672 37.209024,112.548672 C36.575424,112.721472 35.941824,112.951872 35.365824,113.182272 C34.213824,113.585472 33.119424,113.988672 32.025024,114.391872 C30.585024,113.182272 29.145024,111.972672 27.762624,110.653632 C27.129024,110.014272 26.437824,109.323072 25.804224,108.631872 C25.113024,107.940672 24.537024,107.249472 23.903424,106.500672 C32.140224,102.871872 42.220224,99.934272 47.980224,98.263872 C48.383424,98.148672 48.729024,98.033472 49.074624,97.924032 C48.671424,97.054272 47.980224,95.902272 46.885824,94.231872 L46.425024,93.483072 C44.178624,90.142272 42.969024,88.241472 41.989824,83.345472 C41.874624,82.711872 40.953024,80.868672 40.261824,80.183232 C37.554624,77.355072 34.732224,68.139072 36.575424,62.609472 C36.690624,62.379072 36.805824,61.981632 37.093824,61.463232 C37.727424,60.132672 37.900224,59.562432 37.900224,59.332032 C37.497024,53.451072 38.073024,48.042432 39.628224,43.204032 C41.932224,35.883072 48.268224,29.552832 56.217024,26.672832 C60.997824,24.939072 65.202624,24.708672 69.119424,24.708672 C73.036224,24.708672 77.298624,24.939072 82.021824,26.672832 C90.028224,29.604672 96.364224,35.940672 98.668224,43.204032 C100.223424,48.094272 100.799424,53.508672 100.338624,59.332032 C100.396224,59.614272 100.684224,60.363072 101.202624,61.463232 C101.490624,62.033472 101.663424,62.442432 101.721024,62.672832 C103.564224,68.202432 100.741824,77.355072 97.977024,80.183232 C97.343424,80.868672 96.421824,82.654272 96.306624,83.345472 C95.327424,88.241472 94.117824,90.142272 91.871424,93.483072 L91.525824,94.001472 C90.373824,95.792832 89.682624,97.054272 89.221824,97.924032 C89.567424,98.033472 89.913024,98.148672 90.316224,98.263872 C96.076224,99.934272 106.156224,102.871872 114.393024,106.500672" />
+        </g>
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/icons/menu/FeaturesSvg/index.ts

@@ -0,0 +1,8 @@
+import { asDarkSvg, asLightSvg } from "../../../hocs";
+import FeaturesSvg from "./FeaturesSvg";
+
+const LightFeaturesSvg = asLightSvg(FeaturesSvg);
+const DarkFeaturesSvg = asDarkSvg(FeaturesSvg);
+
+export default FeaturesSvg;
+export { FeaturesSvg, LightFeaturesSvg, DarkFeaturesSvg };

ddb_main/tools/js/smartComponents/Svg/icons/menu/NotesSvg/NotesSvg.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../../BaseSvg";
+
+export default class NotesSvg extends React.PureComponent<BaseSvgProps> {
+  static defaultProps = {
+    className: "",
+  };
+
+  render() {
+    const { className, fillColor } = this.props;
+
+    return (
+      <BaseSvg viewBox="0 0 157 143" className={className}>
+        <g fill={fillColor} transform="translate(.76)">
+          <polygon points="142.167 41.629 142.167 100.538 69.905 100.538 50.269 117.033 104.465 117.033 132.742 142.167 132.742 117.033 155.52 117.033 155.52 41.629" />
+          <path d="M22.7781818,120.174545 L22.7781818,87.9709091 L0,87.9709091 L0,0 L128.029091,0 L128.029091,87.9709091 L58.9090909,87.9709091 L22.7781818,120.174545 Z M11.7818182,76.1890909 L34.56,76.1890909 L34.56,94.2545455 L54.9818182,76.1890909 L117.032727,76.1890909 L117.032727,11.7818182 L12.5672727,11.7818182 L12.5672727,76.1890909 L11.7818182,76.1890909 Z" />
+        </g>
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/icons/menu/NotesSvg/index.ts

@@ -0,0 +1,8 @@
+import { asDarkSvg, asLightSvg } from "../../../hocs";
+import NotesSvg from "./NotesSvg";
+
+const LightNotesSvg = asLightSvg(NotesSvg);
+const DarkNotesSvg = asDarkSvg(NotesSvg);
+
+export default NotesSvg;
+export { NotesSvg, LightNotesSvg, DarkNotesSvg };

ddb_main/tools/js/smartComponents/Svg/icons/menu/ProficienciesSvg/ProficienciesSvg.tsx

@@ -0,0 +1,52 @@
+import * as React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../../BaseSvg";
+
+export default class ProficienciesSvg extends React.PureComponent<BaseSvgProps> {
+  static defaultProps = {
+    className: "",
+  };
+
+  render() {
+    const { className, fillColor } = this.props;
+
+    return (
+      <BaseSvg viewBox="0 0 145 144" className={className}>
+        <defs>
+          <polygon
+            id="icon---prof@2x-a"
+            points=".789 .79 42.018 .79 42.018 41.998 .789 41.998"
+          />
+          <polygon
+            id="icon---prof@2x-c"
+            points="0 0 124.418 0 124.418 124.416 0 124.416"
+          />
+        </defs>
+        <g fill="none" fillRule="evenodd">
+          <g transform="translate(102 102)">
+            <mask id="icon---prof@2x-b" fill="#fff">
+              <use xlinkHref="#icon---prof@2x-a" />
+            </mask>
+            <path
+              fill={fillColor}
+              d="M38.571,38.5722 C36.315,40.8342 33.273,41.9982 30.315,41.9982 C27.357,41.9982 24.315,40.8342 22.059,38.5722 L0.789,17.3082 C7.185,12.7902 12.789,7.1802 17.307,0.7902 L38.571,22.0602 C43.173,26.6562 43.173,33.9762 38.571,38.5722"
+              mask="url(#icon---prof@2x-b)"
+            />
+          </g>
+          <path
+            fill={fillColor}
+            d="M66.1038 73.8924L58.3098 73.8924 52.4478 38.6784C51.4398 32.6484 56.0898 27.1524 62.2098 27.1524 68.3238 27.1524 72.9798 32.6484 71.9718 38.6784L66.1038 73.8924zM70.0008 89.4726C70.0008 93.7746 66.5088 97.2606 62.2068 97.2606 57.9048 97.2606 54.4188 93.7746 54.4188 89.4726 54.4188 85.1706 57.9048 81.6786 62.2068 81.6786 66.5088 81.6786 70.0008 85.1706 70.0008 89.4726"
+          />
+          <mask id="icon---prof@2x-d" fill="#fff">
+            <use xlinkHref="#icon---prof@2x-c" />
+          </mask>
+          <path
+            fill={fillColor}
+            d="M108.6198,62.25 C108.6198,87.762 87.7578,108.618 62.1678,108.618 C36.6558,108.618 15.7998,87.762 15.7998,62.25 C15.7998,36.654 36.6558,15.798 62.1678,15.798 C87.7578,15.798 108.6198,36.654 108.6198,62.25 M62.1678,0 C27.8838,0 -0.0042,27.882 -0.0042,62.166 C-0.0042,96.534 27.8838,124.416 62.1678,124.416 C96.5298,124.416 124.4178,96.534 124.4178,62.166 C124.4178,27.882 96.5298,0 62.1678,0"
+            mask="url(#icon---prof@2x-d)"
+          />
+        </g>
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/icons/menu/ProficienciesSvg/index.ts

@@ -0,0 +1,8 @@
+import { asDarkSvg, asLightSvg } from "../../../hocs";
+import ProficienciesSvg from "./ProficienciesSvg";
+
+const LightProficienciesSvg = asLightSvg(ProficienciesSvg);
+const DarkProficienciesSvg = asDarkSvg(ProficienciesSvg);
+
+export default ProficienciesSvg;
+export { ProficienciesSvg, LightProficienciesSvg, DarkProficienciesSvg };