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/BaseSvg/BaseSvg.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+
+interface Props {
+  className: string;
+  viewBox: string;
+  preserveAspectRatio?: string;
+}
+
+export default class BaseSvg extends React.PureComponent<Props> {
+  static defaultProps = {
+    className: "",
+    viewBox: "0 0 100 100",
+  };
+
+  render() {
+    const { className, viewBox, children, preserveAspectRatio } = this.props;
+
+    let classNames: Array<string> = ["ddbc-svg", className];
+
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox={viewBox}
+        className={classNames.join(" ")}
+        preserveAspectRatio={preserveAspectRatio}
+      >
+        {children}
+      </svg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/BaseSvg/index.ts

@@ -0,0 +1,5 @@
+import BaseSvg from "./BaseSvg";
+
+export default BaseSvg;
+export * from "./BaseSvgTypings";
+export { BaseSvg };

ddb_main/tools/js/smartComponents/Svg/SvgConstants.ts

@@ -0,0 +1,46 @@
+export const SvgConstantDarkModeBackgroundColor = "#10161A";
+
+export const SvgConstantLightTheme = {
+  fill: "#fff",
+  secondaryFill: "#242528",
+};
+export const SvgConstantDarkTheme = {
+  fill: "#242528",
+  secondaryFill: "#fff",
+};
+export const SvgConstantGrayTheme = {
+  fill: "#b0b7bd",
+  secondaryFill: "#242528",
+};
+export const SvgConstantDisabledTheme = {
+  fill: "#999999",
+  secondaryFill: "#fff",
+};
+export const SvgConstantEmptyTheme = {
+  fill: "#d8d8d8",
+  secondaryFill: "#fff",
+};
+export const SvgConstantPositiveTheme = {
+  fill: "#00c680",
+  secondaryFill: "#fff",
+};
+export const SvgConstantNegativeTheme = {
+  fill: "#e40712",
+  secondaryFill: "#fff",
+};
+export const SvgConstantBuilderTheme = {
+  fill: "#1C9AEF",
+  secondaryFill: "#fff",
+};
+export const SvgConstantModifiedTheme = {
+  fill: "#1C9AEF",
+  secondaryFill: "#1C9AEF",
+};
+export const SvgConstantDarkModePositiveTheme = {
+  fill: "#00c680",
+  secondaryFill: SvgConstantDarkModeBackgroundColor,
+};
+export const SvgConstantDarkModeNegativeTheme = {
+  fill: "#e40712",
+  secondaryFill: SvgConstantDarkModeBackgroundColor,
+};

ddb_main/tools/js/smartComponents/Svg/abilities/CharaismaSvg/CharismaSvg.tsx

@@ -0,0 +1,42 @@
+import * as React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../BaseSvg";
+
+export default class CharismaSvg extends React.PureComponent<BaseSvgProps> {
+  static defaultProps = {
+    className: "",
+  };
+
+  render() {
+    const { className, fillColor, secondaryFillColor } = this.props;
+
+    return (
+      <BaseSvg viewBox="0 0 36.89 29.81" className={className}>
+        <path
+          fill={secondaryFillColor}
+          d="M11.26,9.5a12.63,12.63,0,0,0-3.6,2.44,2.06,2.06,0,0,0,2,1.75,2.8,2.8,0,0,0,2.49-2.45A2.13,2.13,0,0,0,11.26,9.5Z"
+        />
+        <path
+          fill={fillColor}
+          d="M35.18,29.31a10.94,10.94,0,0,0,.08-4.38,4.24,4.24,0,0,0,1.63,2,17.82,17.82,0,0,1-2.07-8.2s.61,1.65,1.38,3.59c0,0,.32-1.84-1.16-6.76a37.09,37.09,0,0,1,1.52,4.55s-.1-11.94-5.1-14.83c0,0,1.22-.14,4.63,4.39,0,0-2.57-6.19-7.76-7.91l4.51,1.34S29.87.47,22.11.59c0,0,3.38-.37,4.08-.05,0,0-9.76-2.63-16.74,3.72,0,0-2.32.08-3,.73,0,0-2.36-.48-5,2.14-3.13,3.07-.29,6.57,1.25,8a3.78,3.78,0,0,1,.42-2.87s2,1.31,6.06,1c11.25-.74,8,4,4.39,7.46,0,0-1.87,1.75-5.54,5.58,0,0,5.56-1.68,6.42-2.75a10.86,10.86,0,0,1,1.78,3.57,8.09,8.09,0,0,0,1.72-3,9.1,9.1,0,0,0,.42,2.11,2.47,2.47,0,0,0,.94-1,4.83,4.83,0,0,0,.68,1.54,3.46,3.46,0,0,0,.55-1.54,6.4,6.4,0,0,0,1.82,3.36,3.52,3.52,0,0,0,.55-1.8,2.35,2.35,0,0,0,.73,1,11.67,11.67,0,0,0,.83-4.24s.47,4.32,2.08,5.81a5.41,5.41,0,0,0,.63-2.68,39.45,39.45,0,0,0,4.36,3.15,5.51,5.51,0,0,1-.7-2.45S30.75,27.56,35.18,29.31Z"
+        />
+        <path
+          fill={secondaryFillColor}
+          d="M16.29,4.95c0,1,1.6,1.75,2.56,1.75a1.74,1.74,0,0,0,1.4-2.79,21.32,21.32,0,0,0-3.77.49A1,1,0,0,0,16.29,4.95Z"
+        />
+        <path
+          fill="none"
+          stroke={secondaryFillColor}
+          strokeMiterlimit={10}
+          d="M9.37,15.38a6.18,6.18,0,0,1,5.37-2.71c3.83,0,1.17-1.87-2.33-2.54s-.33-5.67-8-7"
+        />
+        <path
+          fill="none"
+          stroke={secondaryFillColor}
+          strokeMiterlimit={10}
+          d="M3.66,13.55S.73,11,3.5,10.66c1.19-.12,10.25,0,10.25,0"
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/abilities/CharaismaSvg/index.ts

@@ -0,0 +1,9 @@
+import { asDarkSvg } from "../../hocs/asDarkSvg";
+import { asLightSvg } from "../../hocs/asLightSvg";
+import CharismaSvg from "./CharismaSvg";
+
+const LightCharismaSvg = asLightSvg(CharismaSvg);
+const DarkCharismaSvg = asDarkSvg(CharismaSvg);
+
+export default CharismaSvg;
+export { CharismaSvg, LightCharismaSvg, DarkCharismaSvg };

ddb_main/tools/js/smartComponents/Svg/abilities/ConstitutionSvg/ConstitutionSvg.tsx

@@ -0,0 +1,43 @@
+import * as React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../BaseSvg";
+
+export default class ConstitutionSvg extends React.PureComponent<BaseSvgProps> {
+  static defaultProps = {
+    className: "",
+  };
+
+  render() {
+    const { className, fillColor } = this.props;
+
+    return (
+      <BaseSvg viewBox="0 0 34.76 32.85" className={className}>
+        <path
+          fill={fillColor}
+          d="M2.41,13.25l2.89.47.78,3.08h.49l.42-3,3,2.14c-2.7,2.42-3.43,5.23-2.15,8.8L6.19,24v1.82c-.39.06-2.22-.09-2.51,0a2.42,2.42,0,0,1-.14-.25C3,23.88,5.79,22.94,6,21.51a5.19,5.19,0,0,0-2.06-5.13c-.62-.47-1.18-.86-.91-1.91.08-.33-.36-.83-.56-1.26Z"
+        />
+        <path
+          fill={fillColor}
+          d="M20.71,1.89c-2,.29-6.66,1.53-9.16,1.89C12.87,2.57,16,.08,17.63,0,18.55,0,20,1.08,21,1.45Z"
+        />
+        <path fill="none" d="M26.3,7.44l.56-2-.23-.12-2.25,4,3.13-1.39Z" />
+        <path
+          fill="none"
+          d="M12.66,8.84c-.7.06-1.52,2.65-2.25,3.78,1.88-.11,4.25.1,6,0C15.41,11.26,15.11,8.61,12.66,8.84Z"
+        />
+        <path
+          fill={fillColor}
+          d="M5.49,6.6c-.12-.53-.73-.88-1.25-1.16a4.15,4.15,0,0,0-.73-.32l-.22,0A2.35,2.35,0,0,0,2.85,5a1.8,1.8,0,0,0-.5,0l-.07,0a1.8,1.8,0,0,0-.41.19l-.13.09a2.54,2.54,0,0,0-.36.31l-.09.09a4.31,4.31,0,0,0-.41.56l-.1.17q-.15.26-.3.58l-.11.23c-.13.28-.25.58-.37.92l.33.09h0l.35.11L1,8.5h.05l.3,0h.17l.07,0,.09,0,.07,0,.08-.06.06-.06L2,8.25l0-.08L2.08,8l0-.1c0-.05,0-.11,0-.18s0-.08,0-.12,0-.16,0-.25,0-.08,0-.13,0-.29,0-.46c.51.4.72.7.95.72l.73.07c.23,0,.46,0,.66,0H4.7a1.61,1.61,0,0,0,.32,0l.05,0a.43.43,0,0,0,.25-.16A1,1,0,0,0,5.49,6.6Z"
+        />
+        <path
+          fill={fillColor}
+          d="M6.08,16.09l-.26-2.26C6.74,14.1,6.77,14.34,6.08,16.09Z"
+        />
+        <path
+          fill={fillColor}
+          d="M34.76,16.27c-1.1-3-1.6-6.19-4.52-7.61-2,2.38-2.26,2.51-4.05,2.05.32-.11.65-.19,1-.32A3.53,3.53,0,0,0,29.6,7.64a4.31,4.31,0,0,0-1.14-3.92,1.91,1.91,0,0,0-2.72-.29c-.69.47-1.39.9-2.1,1.34A.57.57,0,0,1,23.3,5c-.16.1-.76-.88-1.71-.94a18.17,18.17,0,0,0-5.81.46A45.59,45.59,0,0,1,8.81,6a4.8,4.8,0,0,0-.86.17s0,.07.05.11a2.29,2.29,0,0,1-.35,1.83L8.18,8l.06.32L.35,10.83l1.06,3.1,1-.68c-.25-.66.15-.53.49-.48,1.29.21,2.57.46,3.86.64,2.56.35,3.86,2.18,4.58,4.69.64,2.2-.29,3.83-1.64,5.3l-.24.28c-.54,3-2.29,4-4.93,3.58a3.79,3.79,0,0,0,3.93.89A29.55,29.55,0,0,1,11.88,27c2.17-.51,4.42-1.28,6.56-.31,1.55.71,2.83,2.08,4.29,3.06s3.16,2.13,4.8,3c.31-.85.59-1.71.83-2.59.35-1.27,1-2.47,1.28-3.75a.5.5,0,0,1,.57-.44l1-2,.59,2.31a11.8,11.8,0,0,0,.7-1.72,49.17,49.17,0,0,0,1.24-6.29,14.3,14.3,0,0,0-.66-3.8ZM11.12,12.18c.55-.87,1.18-2.84,1.72-2.89,1.87-.17,2.1,1.85,2.86,2.89C14.37,12.25,12.56,12.1,11.12,12.18Z"
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/abilities/ConstitutionSvg/index.ts

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

ddb_main/tools/js/smartComponents/Svg/abilities/DexteritySvg/DexteritySvg.tsx

@@ -0,0 +1,75 @@
+import * as React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../BaseSvg";
+
+export default class DexteritySvg extends React.PureComponent<BaseSvgProps> {
+  static defaultProps = {
+    className: "",
+  };
+
+  render() {
+    const { className, fillColor, secondaryFillColor } = this.props;
+
+    return (
+      <BaseSvg viewBox="0 0 36.17 35.63" className={className}>
+        <path
+          fill={secondaryFillColor}
+          d="M13,20s1-5.61,7.7-7c0,0-2.52,1.32-2.6,1.9s1.43,2-.36,3.8C15.62,20.79,14,17.16,13,20Z"
+        />
+        <path
+          fill={secondaryFillColor}
+          d="M15.68,30.39c.06,0,.55.05,1.28.07L15.71,30Z"
+        />
+        <path
+          fill={fillColor}
+          d="M10.45,6.26A7.07,7.07,0,0,0,6,2.16L7.06,7.39Z"
+        />
+        <path
+          fill="none"
+          stroke={fillColor}
+          strokeMiterlimit={10}
+          strokeWidth="0.65px"
+          d="M9.49,26.36a15.46,15.46,0,0,1-1.48,9"
+        />
+        <path
+          fill="none"
+          stroke={fillColor}
+          strokeMiterlimit={10}
+          strokeWidth="0.55px"
+          d="M11.67,27.58S14,30.79,13,34.15"
+        />
+        <path
+          fill="none"
+          stroke={fillColor}
+          strokeMiterlimit={10}
+          strokeWidth="0.55px"
+          d="M5.32,28.82a6.15,6.15,0,0,1-1.45,5.33"
+        />
+        <path
+          fill="none"
+          d="M10.06,18.91a6,6,0,0,1-3.69,1.7A1.73,1.73,0,0,1,5,20.09c-.9-1-.12-3.19,1.76-4.86a6,6,0,0,1,3.69-1.7,1.73,1.73,0,0,1,1.34.52C12.72,15.06,11.94,17.24,10.06,18.91Z"
+        />
+        <path
+          fill="none"
+          d="M10.48,14.48a5.24,5.24,0,0,0-3.06,1.46C5.8,17.38,5.34,19,5.74,19.46a.87.87,0,0,0,.63.2A5.24,5.24,0,0,0,9.43,18.2a6,6,0,0,0,1.66-2.29,1.35,1.35,0,0,0,0-1.23A.87.87,0,0,0,10.48,14.48Z"
+        />
+        <path
+          fill={fillColor}
+          d="M21.39,23.19h.12l.54,0h.2l.43,0,.17,0,.52-.06h.07l.37-.06.12,0,.2,0h.07l.08,0a4.69,4.69,0,0,0-1.47-1.67A9.68,9.68,0,0,1,24,21l.42,0c.3,0,.6-.06.93-.06s.57,0,.86,0l.45,0a14.14,14.14,0,0,1,1.48.22c-.06-.27-.13-.6-.21-1l-.14-.58-.13-.55c-.07-.3-.15-.6-.24-.93l-.07-.27a44.12,44.12,0,0,0-1.88-5.52l0-.09c-.21-.48-.42-1-.65-1.43h0a21.2,21.2,0,0,0-1.76-3H21.74A16.87,16.87,0,0,0,12.81,0V7.39s-9.14,3.49-9.34,6.16-.41,6.26-1,6.88-3,3.75-2.34,4.36,4.6,5.08,6.76,5.08,7.19-.51,8.42,0l.44.16L15.83,29s.51,0,1.25.05h.14c.33,0,.72,0,1.13,0l.32,0,1-.11.48-.07c.35-.06.71-.13,1.07-.21l.49-.11A13,13,0,0,0,23.33,28a12.19,12.19,0,0,1-3.67-2.79l.6.07.18,0,.39,0h1.6a5.59,5.59,0,0,1-2.34-2.23,6.62,6.62,0,0,0,1.28.11Z"
+        />
+        <path
+          fill={secondaryFillColor}
+          d="M10.15,16.32A3.88,3.88,0,0,1,9.07,17.8a3.38,3.38,0,0,1-2,.94.56.56,0,0,1-.41-.13c-.26-.29,0-1.35,1.08-2.27a3.38,3.38,0,0,1,2-.94.56.56,0,0,1,.41.13A.87.87,0,0,1,10.15,16.32Z"
+        />
+        <path
+          fill={fillColor}
+          d="M35.1,21.8c0-.13,0-.25,0-.39a8.32,8.32,0,0,0-1.85-4.57,7.41,7.41,0,0,1,2.07,1.36c-1.38-3.91-4.48-4-4.8-4a25.72,25.72,0,0,0-3.73-2.4,49.22,49.22,0,0,1,2.93,9.45l.29,1.4-1.4-.28a12.45,12.45,0,0,0-2.45-.26l-.72,0a4.55,4.55,0,0,1,.37.63l.53,1.1-1.2.24a18.83,18.83,0,0,1-2.24.28,2.09,2.09,0,0,0,.53.31l4.25,1.58-4.53.25H23a8.52,8.52,0,0,0,1.41.83l2,.91-2,.83a17.27,17.27,0,0,1-6.11,1.14c2,2.75,8.06,5.4,8.06,5.4-.46-2.55,2.55-4.51,2.55-4.51.89.27,1,4.51,1,4.51a19.44,19.44,0,0,0,4.61-7.81A7.25,7.25,0,0,1,36,30.17C36.53,28.15,35.8,24.49,35.1,21.8Z"
+        />
+        <path
+          fill={secondaryFillColor}
+          d="M6.12,19.45a6.75,6.75,0,0,1,5.53-5s-1.81.95-1.87,1.36,1,1.45-.26,2.73C8,20,6.77,17.44,6.12,19.45Z"
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/abilities/DexteritySvg/index.ts

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

ddb_main/tools/js/smartComponents/Svg/abilities/IntelligenceSvg/IntelligenceSvg.tsx

@@ -0,0 +1,43 @@
+import * as React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../BaseSvg";
+
+export default class IntelligenceSvg extends React.PureComponent<BaseSvgProps> {
+  static defaultProps = {
+    className: "",
+  };
+
+  render() {
+    const { className, fillColor, secondaryFillColor } = this.props;
+
+    return (
+      <BaseSvg viewBox="0 0 30.86 31.19" className={className}>
+        <path
+          fill={fillColor}
+          d="M5.25,6.93a8.88,8.88,0,0,1,.49-.79,4.36,4.36,0,0,1,.63-.66,7.76,7.76,0,0,1,1.74-.89C4.42,2.69,1.84.88,2.35,2.56c.29.95.21,1.09,2,3.38Z"
+        />
+        <path fill={fillColor} d="M23,8v.06C23,8.08,23,8,23,8Z" />
+        <path
+          fill={fillColor}
+          d="M5.82,8.83A31.34,31.34,0,0,1,21.34,7.16c-.86-.48-2.2-1.25-4.28-2.49C10.47.74,5.81-1.23,7.18.82A11.26,11.26,0,0,1,9.35,6S6.56,7,5.82,8.83Z"
+        />
+        <path
+          fill={fillColor}
+          d="M22.92,9.39c-.3-.35-.56-.75-.87-1.16.2,0,.34,0,.48,0a.54.54,0,0,0,.18-.08.65.65,0,0,0-.08-.2c-.29-.31-.57-.62-.87-.91a18.35,18.35,0,0,0-4.95-3.29,9.6,9.6,0,0,0-3.79-1c-.31.16-.61.34-.93.48s-.88.56-1.35.81-1.14.66-1.7,1c-.14.11-.3.2-.44.3.1.22-.05.43-.23.63Q7.3,7.18,6.27,8.4a4.12,4.12,0,0,0-1,3.39,4.22,4.22,0,0,1-.73,3,10.25,10.25,0,0,1-1.91,2.12c-.8.69-1.62,1.35-2.42,2-.26.22-.26.29,0,.53a4.52,4.52,0,0,0,2,1.1,1,1,0,0,0,.37,0c.18,0,.38-.2.49.12,0,0,.12.06.18.05a9.94,9.94,0,0,0,1.69-.17c1.23-.32,2.44-.71,3.65-1.09A11.76,11.76,0,0,1,12,18.66c.62,0,.62,0,.84.67.32,1,1.7,1.82,1.48,2.8,0,.08,0,.15-.06.23a4.42,4.42,0,0,1,.53,3.24,5.41,5.41,0,0,1-1.51,3.61c-.09.21-.17.42-.27.61a3.89,3.89,0,0,1-.53.76.28.28,0,0,0,.15.08c1.74-.77,4.27-3.57,5.64-5.13.46-.52.77-.14.41.49-.68,1.18-2.08,4.1-3,4.91q1.85.13,3.71.2l1.79.06.37-.06c.55-.11,1.09-.26,1.63-.42.89-.79,2.16-4,2.65-4.94.39-.72.55-.09.62.72.13,1.4-1.72,3.5-2.06,4a20.7,20.7,0,0,0,4.31-2c3.19-2.79,1.84-6.61,1-8.11-.34-.63-1.47-3.09-1.54-3.42a18.82,18.82,0,0,1,2.63,4.73C30.84,14.15,23.88,10.5,22.92,9.39Z"
+        />
+        <polygon
+          fill={secondaryFillColor}
+          points="8.11 11.41 8.04 11.11 8.84 9.73 10.49 9.73 10.04 10.94 8.4 11.73 8.11 11.41"
+        />
+        <path
+          fill={secondaryFillColor}
+          d="M13.17,28.75a8.88,8.88,0,0,0,1.14-3.16v-.07l0-.07a4,4,0,0,0-.51-2.88l-.07-.16.1-.39c.08-.34-.28-.78-.65-1.24a4.27,4.27,0,0,1-.82-1.29c0-.12-.08-.24-.11-.32H12a11.27,11.27,0,0,0-3.28.7c-1.21.39-2.44.78-3.68,1.1a6.2,6.2,0,0,1-1.29.15l-.48,0h0A.77.77,0,0,1,2.71,21H2.66a1.72,1.72,0,0,1-.38.06H2.22l-.13,0-.19-.07-.49-.14.13-.5.14-.44.1-.09c.1-.09,2.42-2.23,3.75-3.19s5-3,7.73-3a4.52,4.52,0,0,1,1.12.13,6.86,6.86,0,0,1,3.86,3.62,9.52,9.52,0,0,1,.31,7.95l-.1.25-.27.05c-1.75,2-3.41,3.77-4.5,3.93l-1,.15Z"
+        />
+        <path
+          fill={fillColor}
+          d="M13.26,14.06a4,4,0,0,1,1,.12c2.52.64,6,5.42,3.82,10.89a.5.5,0,0,0-.29.16c-1.37,1.55-3.22,3.62-4.18,3.76a9.62,9.62,0,0,0,1.21-3.4,4.42,4.42,0,0,0-.53-3.24c0-.08,0-.15.06-.23.22-1-1.16-1.83-1.48-2.8-.2-.61-.22-.67-.7-.67H12a11.76,11.76,0,0,0-3.43.73c-1.21.39-2.42.77-3.65,1.09a9.94,9.94,0,0,1-1.69.17h0c-.06,0-.15,0-.16-.05s-.13-.2-.21-.2a1.93,1.93,0,0,0-.29.07,1.79,1.79,0,0,1-.29,0H2.2L2,20.45l.1-.31s2.39-2.2,3.7-3.16c1.16-.84,4.77-2.92,7.44-2.92m0-1c-3.06,0-6.91,2.3-8,3.11-1.34,1-3.69,3.14-3.79,3.23l-.2.18-.08.26-.1.31-.3,1,.94.28.26.09a1.32,1.32,0,0,0,.32,0,1.63,1.63,0,0,0,.31,0,1.27,1.27,0,0,0,.63.16h.11l.46,0a6.69,6.69,0,0,0,1.39-.17c1.25-.33,2.49-.72,3.7-1.1a11.39,11.39,0,0,1,3-.68,4.79,4.79,0,0,0,.9,1.43,2.94,2.94,0,0,1,.55.82l0,.07,0,.13-.08.34.14.31a3.59,3.59,0,0,1,.49,2.51l0,.14v.15a8.31,8.31,0,0,1-1.07,2.93l-1,1.78,2-.3c1.13-.17,2.47-1.47,4.68-4l.38-.08.2-.5a10,10,0,0,0-.33-8.36,7.27,7.27,0,0,0-4.18-3.88,5,5,0,0,0-1.25-.15Z"
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/abilities/IntelligenceSvg/index.ts

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

ddb_main/tools/js/smartComponents/Svg/abilities/StrengthSvg/StrengthSvg.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../BaseSvg";
+
+export default class StrengthSvg extends React.PureComponent<BaseSvgProps> {
+  static defaultProps = {
+    className: "",
+  };
+
+  render() {
+    const { className, fillColor, secondaryFillColor } = this.props;
+
+    return (
+      <BaseSvg viewBox="0 0 35.11 37.7" className={className}>
+        <path
+          fill={fillColor}
+          d="M22.23,9.42a7.43,7.43,0,0,1,.24,4.07c4.91.71,6.94,4.19,7.33,6.13l.31,1.54-1.54.31a13.16,13.16,0,0,1-2.62.27h0a11.71,11.71,0,0,1-1.86-.15l.76,1.1a8.79,8.79,0,0,1,.2,9,8.83,8.83,0,0,1-1,1.46C28.5,34.87,27,37.7,31,37.7s6.91-24.39,0-27.49C29.34,9.27,24.62,9.18,22.23,9.42Z"
+        />
+        <path
+          fill={fillColor}
+          d="M8.34,12.46l3.4-2.82C8.38,9.27.45,1.55.7,1.91,1.78,7.79,8.34,12.46,8.34,12.46Z"
+        />
+        <path
+          fill={fillColor}
+          d="M28.47,19.93s-1.05-5.21-8.05-5c0,0,2.73-4.68-2.25-9.32C13,.82,3.57,0,3.57,0S16.34,6.63,14.9,11.22c0,0-6.06,2.36-6.73,5.78s-1.41,5.12-6.36,8.32c0,0-2,1.88-1.79,2.89s5.12,6.7,7.48,6.52,7.7-1.79,11.73-.88,7.35-6.26,4.55-10.24a34.73,34.73,0,0,1-3.37-5.38S23.3,21,28.47,19.93Z"
+        />
+        <path
+          fill={secondaryFillColor}
+          d="M10.52,21.8a6.75,6.75,0,0,1,5.53-5s-1.81.95-1.87,1.36,1,1.45-.26,2.73C12.38,22.39,11.17,19.78,10.52,21.8Z"
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/abilities/StrengthSvg/index.ts

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

ddb_main/tools/js/smartComponents/Svg/abilities/WisdomSvg/WisdomSvg.tsx

@@ -0,0 +1,51 @@
+import * as React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../BaseSvg";
+
+export default class WisdomSvg extends React.PureComponent<BaseSvgProps> {
+  static defaultProps = {
+    className: "",
+  };
+
+  render() {
+    const { className, fillColor } = this.props;
+
+    return (
+      <BaseSvg viewBox="0 0 30.04 31.68" className={className}>
+        <path
+          fill={fillColor}
+          d="M14.46,4.32S21.57-1.33,30,3A9.07,9.07,0,0,0,27,3.41a4.45,4.45,0,0,1,1.19,0,3.17,3.17,0,0,1-2,.4s0,.23.89.28a3.66,3.66,0,0,1-2.46.58,2.62,2.62,0,0,0,1.16.25s-.54.62-2.23.56a.68.68,0,0,0,.41.18,2.45,2.45,0,0,1-1.47.16A.92.92,0,0,0,23,6.1s-1.85.3-2.39,1S14.46,4.32,14.46,4.32Z"
+        />
+        <path
+          fill={fillColor}
+          d="M5.91,5.48s4-6,10.7-5.45a6.45,6.45,0,0,0-1.9,1.1,3.16,3.16,0,0,1,.78-.32,2.25,2.25,0,0,1-1.18.79s0,.16.66-.06c0,0-.25.56-1.46,1a1.86,1.86,0,0,0,.83-.15s-.18.55-1.31,1a.48.48,0,0,0,.32,0,1.74,1.74,0,0,1-.92.5.66.66,0,0,0,.43,0s-1.13.7-1.3,1.3S5.91,5.48,5.91,5.48Z"
+        />
+        <path
+          fill={fillColor}
+          d="M3.34,12.44l-.45-.2C2.37,7.72,5,3.3,11.74,3.3a16.36,16.36,0,0,1,2.72.22A7.54,7.54,0,0,0,10.73,8.4c-1.26,4.8-3.78,4.81-5.86,5.14A4.65,4.65,0,0,0,3.34,12.44Z"
+        />
+        <path fill={fillColor} d="M3.77,14.8" />
+        <path
+          fill={fillColor}
+          d="M19.44,15.72l.57-.34a3.35,3.35,0,0,0-.33-.85l.53-.38a4.61,4.61,0,0,0-.74-1l-2-1.84,1.26.66.27-.55.13.06a3.42,3.42,0,0,0,.52.15c-.59-.53-1-.86-1-.86L17.23,9.7l1.48.42a56.1,56.1,0,0,0-5.25-2.37l.11-.31a6.85,6.85,0,0,0-1.1,2.38,10,10,0,0,1-.57,1.63,1.61,1.61,0,0,1,.18,0c1,0,2.79.83,2.79,1.84S13.52,16,12.54,16a2.9,2.9,0,0,1-2.3-1.8c-1,1-3.12.75-4.06.89a3.2,3.2,0,0,1,.17,2.62l.55.5L6,18.44l.16.29,0,0s5.51,2.65,8.77,2.28,4.18-3.59,4.22-3.73l.24-.78.39.72a5.17,5.17,0,0,0,.68.92A19.09,19.09,0,0,0,19.44,15.72Z"
+        />
+        <path
+          fill="none"
+          d="M3.51,15.49a3.83,3.83,0,0,0-1.83-1.95A3.83,3.83,0,0,1,3.51,15.49Z"
+        />
+        <path
+          fill={fillColor}
+          d="M4.45,18.36a9,9,0,0,0-.76-3.09A4.36,4.36,0,0,0,1.6,13S-1.56,17.25,1,21.32a5.34,5.34,0,0,1,.91-.45A3.41,3.41,0,0,1,4.45,18.36Z"
+        />
+        <path
+          fill={fillColor}
+          d="M1.67,21.54A6.29,6.29,0,0,1,2,20.43a4.7,4.7,0,0,0-.8.39A6.63,6.63,0,0,0,1.67,21.54Z"
+        />
+        <path
+          fill={fillColor}
+          d="M29,22.84a2.13,2.13,0,0,1,.88.88S29.44,19.65,27,18a2.46,2.46,0,0,1,1.86.85s-.28-2.26-1.75-3a3.71,3.71,0,0,1,1.47.31,5.25,5.25,0,0,0-2.77-3.42,3.11,3.11,0,0,1,1.19.28s-.37-2.2-3.5-3.53A3.65,3.65,0,0,1,25,9.69l-1-.71A15.15,15.15,0,0,0,15,4a7.63,7.63,0,0,0-2.11,1.71c1.16.45,7.4,2.89,8.62,4.33l.86,1-1.74-.48.84.78.88.84-1.2-.12a2.07,2.07,0,0,1,.25.3l.45.66L21,13H21a9.43,9.43,0,0,1,1.09,2l.4,1-1-.46-.27-.14a6.46,6.46,0,0,1,.15.94l.06.75L21.15,17a13,13,0,0,1,.94,2.93L22.25,21l-.84-.7a12.24,12.24,0,0,1-1.6-1.64,7,7,0,0,1-5.52,4.22,8.15,8.15,0,0,1-.89,0c-3.28,0-7-1.76-8.4-2.52a4.32,4.32,0,0,0-1.62-.25,4.75,4.75,0,0,0-.53,1.53l-.33,2.76v0a16,16,0,0,0,2,4.79,5.4,5.4,0,0,0,2,2,4.58,4.58,0,0,1-.69-2.16A7.65,7.65,0,0,0,11,31.68a3.22,3.22,0,0,1-.23-2.7,4.71,4.71,0,0,0,3,2.56,3,3,0,0,0,.63-2.73c1.77,2.76,6.62,2.86,6.62,2.86a4.12,4.12,0,0,1-.43-3.26c.8,2.16,4.13,2.83,4.13,2.83a3.47,3.47,0,0,1-.43-2.3A3.38,3.38,0,0,0,27,30.24c-.92-1-1.33-3.5-1.33-3.5a6.56,6.56,0,0,1,2.26,4.93,3.3,3.3,0,0,0,2-2.15h0a2.3,2.3,0,0,0,.07-.46h0A11.7,11.7,0,0,0,29,22.84Z"
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/abilities/WisdomSvg/index.ts

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

ddb_main/tools/js/smartComponents/Svg/aoeTypes/ConeSvg/ConeSvg.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../BaseSvg";
+
+const ConeSvg: React.FunctionComponent<BaseSvgProps> = ({
+  className = "",
+  fillColor,
+  secondaryFillColor,
+}) => {
+  return (
+    <BaseSvg className={className} viewBox="0 0 16.73 17.49">
+      <path
+        fill={fillColor}
+        d="M14,17.49c-1.85,0-2.69-4.53-2.69-8.74S12.18,0,14,0s2.69,4.53,2.69,8.74S15.88,17.49,14,17.49ZM14,1c-.51,0-1.69,2.63-1.69,7.74s1.19,7.74,1.69,7.74,1.69-2.63,1.69-7.74S14.54,1,14,1Z"
+      />
+      <path
+        fill={fillColor}
+        d="M14,17.49a.5.5,0,0,1-.26-.07L.24,9.17a.5.5,0,0,1,0-.85L13.77.07a.5.5,0,1,1,.52.85L1.46,8.74l12.83,7.82a.5.5,0,0,1-.26.93Z"
+      />
+    </BaseSvg>
+  );
+};
+
+export default ConeSvg;

ddb_main/tools/js/smartComponents/Svg/aoeTypes/ConeSvg/index.ts

@@ -0,0 +1,11 @@
+import { asDarkSvg } from "../../hocs/asDarkSvg";
+import { asGraySvg } from "../../hocs/asGraySvg";
+import { asLightSvg } from "../../hocs/asLightSvg";
+import ConeSvg from "./ConeSvg";
+
+const LightConeSvg = asLightSvg(ConeSvg);
+const DarkConeSvg = asDarkSvg(ConeSvg);
+const GrayConeSvg = asGraySvg(ConeSvg);
+
+export default ConeSvg;
+export { ConeSvg, LightConeSvg, DarkConeSvg, GrayConeSvg };

ddb_main/tools/js/smartComponents/Svg/aoeTypes/CubeSvg/CubeSvg.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../BaseSvg";
+
+const CubeSvg: React.FunctionComponent<BaseSvgProps> = ({
+  className = "",
+  fillColor,
+  secondaryFillColor,
+}) => {
+  return (
+    <BaseSvg className={className} viewBox="0 0 16.89 17.57">
+      <path
+        fill={fillColor}
+        d="M13.43,17.57H.5a.5.5,0,0,1-.5-.5V4.14a.5.5,0,0,1,.5-.5H13.43a.5.5,0,0,1,.5.5V17.07A.5.5,0,0,1,13.43,17.57ZM1,16.57H12.93V4.64H1Z"
+      />
+      <path
+        fill={fillColor}
+        d="M13.43,17.57a.5.5,0,0,1-.4-.81l2.86-3.71V1.91L13.82,4.46A.5.5,0,1,1,13,3.83L16,.18a.5.5,0,0,1,.89.32V13.23a.5.5,0,0,1-.1.31l-3,3.85A.5.5,0,0,1,13.43,17.57Z"
+      />
+      <path
+        fill={fillColor}
+        d="M.5,4.64A.5.5,0,0,1,.13,3.8L3.55.16A.5.5,0,0,1,3.91,0H16.39a.5.5,0,0,1,0,1H4.13L.87,4.48A.5.5,0,0,1,.5,4.64Z"
+      />
+    </BaseSvg>
+  );
+};
+
+export default CubeSvg;

ddb_main/tools/js/smartComponents/Svg/aoeTypes/CubeSvg/index.ts

@@ -0,0 +1,11 @@
+import { asDarkSvg } from "../../hocs/asDarkSvg";
+import { asGraySvg } from "../../hocs/asGraySvg";
+import { asLightSvg } from "../../hocs/asLightSvg";
+import CubeSvg from "./CubeSvg";
+
+const LightCubeSvg = asLightSvg(CubeSvg);
+const DarkCubeSvg = asDarkSvg(CubeSvg);
+const GrayCubeSvg = asGraySvg(CubeSvg);
+
+export default CubeSvg;
+export { CubeSvg, LightCubeSvg, DarkCubeSvg, GrayCubeSvg };

ddb_main/tools/js/smartComponents/Svg/aoeTypes/CylinderSvg/Cylinder.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../BaseSvg";
+
+const Cylinder: React.FunctionComponent<BaseSvgProps> = ({
+  className = "",
+  fillColor,
+  secondaryFillColor,
+}) => {
+  return (
+    <BaseSvg className={className} viewBox="0 0 17.49 18.31">
+      <path
+        fill={fillColor}
+        d="M8.74,5.38C4.53,5.38,0,4.54,0,2.69S4.53,0,8.74,0s8.74.84,8.74,2.69S13,5.38,8.74,5.38ZM8.74,1C3.63,1,1,2.19,1,2.69S3.63,4.38,8.74,4.38s7.74-1.19,7.74-1.69S13.85,1,8.74,1Z"
+      />
+      <path
+        fill={fillColor}
+        d="M8.74,18.31C4.53,18.31,0,17.47,0,15.62V2.69a.5.5,0,0,1,1,0V15.62c0,.51,2.63,1.69,7.74,1.69s7.74-1.19,7.74-1.69V2.69a.5.5,0,0,1,1,0V15.62C17.49,17.47,13,18.31,8.74,18.31Z"
+      />
+    </BaseSvg>
+  );
+};
+
+export default Cylinder;

ddb_main/tools/js/smartComponents/Svg/aoeTypes/CylinderSvg/index.ts

@@ -0,0 +1,11 @@
+import { asDarkSvg } from "../../hocs/asDarkSvg";
+import { asGraySvg } from "../../hocs/asGraySvg";
+import { asLightSvg } from "../../hocs/asLightSvg";
+import Cylinder from "./Cylinder";
+
+const LightCylinderSvg = asLightSvg(Cylinder);
+const DarkCylinderSvg = asDarkSvg(Cylinder);
+const GrayCylinderSvg = asGraySvg(Cylinder);
+
+export default Cylinder;
+export { Cylinder, LightCylinderSvg, DarkCylinderSvg, GrayCylinderSvg };

ddb_main/tools/js/smartComponents/Svg/aoeTypes/LineSvg/LineSvg.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../BaseSvg";
+
+const LineSvg: React.FunctionComponent<BaseSvgProps> = ({
+  className = "",
+  fillColor,
+  secondaryFillColor,
+}) => {
+  return (
+    <BaseSvg className={className} viewBox="0 0 17.49 7.1">
+      <path
+        fill={fillColor}
+        d="M14,5.44H.5a.5.5,0,0,1-.5-.5V2a.5.5,0,0,1,.5-.5H14a.5.5,0,0,1,0,1H1v2H14a.5.5,0,0,1,0,1Z"
+      />
+      <path
+        fill={fillColor}
+        d="M14,7.1a.49.49,0,0,1-.18,0,.5.5,0,0,1-.32-.46V4.94a.5.5,0,0,1,1,0v.4l1.76-1.87L14.53,1.71v.17a.5.5,0,0,1-1,0V.5a.5.5,0,0,1,.85-.35l3,3a.5.5,0,0,1,0,.7l-3,3.15A.5.5,0,0,1,14,7.1Z"
+      />
+    </BaseSvg>
+  );
+};
+
+export default LineSvg;

ddb_main/tools/js/smartComponents/Svg/aoeTypes/LineSvg/index.ts

@@ -0,0 +1,11 @@
+import { asDarkSvg } from "../../hocs/asDarkSvg";
+import { asGraySvg } from "../../hocs/asGraySvg";
+import { asLightSvg } from "../../hocs/asLightSvg";
+import LineSvg from "./LineSvg";
+
+const LightLineSvg = asLightSvg(LineSvg);
+const DarkLineSvg = asDarkSvg(LineSvg);
+const GrayLineSvg = asGraySvg(LineSvg);
+
+export default LineSvg;
+export { LineSvg, LightLineSvg, DarkLineSvg, GrayLineSvg };

ddb_main/tools/js/smartComponents/Svg/aoeTypes/SphereSvg/SphereSvg.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../BaseSvg";
+
+const SphereSvg: React.FunctionComponent<BaseSvgProps> = ({
+  className = "",
+  fillColor,
+  secondaryFillColor,
+}) => {
+  return (
+    <BaseSvg className={className} viewBox="0 0 18 18.06">
+      <path
+        fill={fillColor}
+        d="M9,1A8,8,0,1,1,1,9,8,8,0,0,1,9,1M9,0a9,9,0,1,0,9,9A9,9,0,0,0,9,0Z"
+      />
+      <path
+        fill={fillColor}
+        d="M9,18.06a.5.5,0,0,1,0-1c2,0,3.65-3.68,3.65-8S11,1,9,1A.5.5,0,0,1,9,0c2.61,0,4.65,4,4.65,9S11.61,18.06,9,18.06Z"
+      />
+      <path
+        fill={fillColor}
+        d="M9.48,11.44A18.11,18.11,0,0,1,.28,8.84.5.5,0,0,1,.78,8c9,5.25,16.37.49,16.44.44a.5.5,0,0,1,.56.83A16.25,16.25,0,0,1,9.48,11.44Z"
+      />
+    </BaseSvg>
+  );
+};
+
+export default SphereSvg;

ddb_main/tools/js/smartComponents/Svg/aoeTypes/SphereSvg/index.ts

@@ -0,0 +1,11 @@
+import { asDarkSvg } from "../../hocs/asDarkSvg";
+import { asGraySvg } from "../../hocs/asGraySvg";
+import { asLightSvg } from "../../hocs/asLightSvg";
+import SphereSvg from "./SphereSvg";
+
+const LightSphereSvg = asLightSvg(SphereSvg);
+const DarkSphereSvg = asDarkSvg(SphereSvg);
+const GraySphereSvg = asGraySvg(SphereSvg);
+
+export default SphereSvg;
+export { SphereSvg, LightSphereSvg, DarkSphereSvg, GraySphereSvg };

ddb_main/tools/js/smartComponents/Svg/aoeTypes/SquareSvg/SquareSvg.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../BaseSvg";
+
+const SquareSvg: React.FunctionComponent<BaseSvgProps> = ({
+  className = "",
+  fillColor,
+  secondaryFillColor,
+}) => {
+  return (
+    <BaseSvg className={className} viewBox="0 0 13.75 13.33">
+      <rect
+        fill={secondaryFillColor}
+        stroke={fillColor}
+        strokeMiterlimit={10}
+        className="cls-1"
+        x="0.71"
+        y="0.29"
+        width="12.33"
+        height="12.75"
+        transform="translate(0.21 13.54) rotate(-90)"
+      />
+    </BaseSvg>
+  );
+};
+
+export default SquareSvg;

ddb_main/tools/js/smartComponents/Svg/aoeTypes/SquareSvg/index.ts

@@ -0,0 +1,11 @@
+import { asDarkSvg } from "../../hocs/asDarkSvg";
+import { asGraySvg } from "../../hocs/asGraySvg";
+import { asLightSvg } from "../../hocs/asLightSvg";
+import SquareSvg from "./SquareSvg";
+
+const LightSquareSvg = asLightSvg(SquareSvg);
+const DarkSquareSvg = asDarkSvg(SquareSvg);
+const GraySquareSvg = asGraySvg(SquareSvg);
+
+export default SquareSvg;
+export { SquareSvg, LightSquareSvg, DarkSquareSvg, GraySquareSvg };

ddb_main/tools/js/smartComponents/Svg/attackTypes/MeleeSpellSvg/MeleeSpellSvg.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../BaseSvg";
+
+const MeleeSpellSvg: React.FunctionComponent<BaseSvgProps> = ({
+  className = "",
+  fillColor,
+  secondaryFillColor,
+}) => {
+  return (
+    <BaseSvg className={className} viewBox="0 0 18.52 17.03">
+      <path
+        fill={fillColor}
+        d="M8.17 16.03L.63 17l5.12-3.33-5.54-3.64h5.71L0 0l7.67 4.92L6.4 1.13 9.38 3l2-2.54 2.41 3.37 2.42-3.1-1.38 13.81-6.66 1.49z"
+      />
+      <path
+        fill={fillColor}
+        d="M13.15 16.53c-1.62 0-3.15-.61-3.57-1.42A6 6 0 007 14.44h-.27a.87.87 0 01-.85-.71 1.14 1.14 0 01.73-1.26A3.49 3.49 0 018 12.29a8.08 8.08 0 012 .23.8.8 0 00.23 0h.06v-.14c-.09-.25-.54-1.08-1-1.88C7.34 7.11 7 6.37 7.39 5.91A.76.76 0 018 5.59c.87 0 2.05 1.3 2.58 2.18a7.07 7.07 0 00.66.93c-.23-.8-.61-1.93-.81-2.52-.14-.42-.25-.75-.3-.91a1.36 1.36 0 01.18-1.23 1.37 1.37 0 011.14-.52c.69 0 1 .93 1.58 3.38v-.46c0-1.3.45-2 1.21-2a.74.74 0 01.57.27c.62.74.26 3.42.26 3.45a1.31 1.31 0 000 .23c.56-.9 1.5-1.77 2.19-1.77a.71.71 0 01.68.47c.16.44 0 1.14-1.63 3.73l-.17.29v1.27a13.7 13.7 0 01-.1 2.35c-.27 1.4-2.58 1.72-2.85 1.76h-.06z"
+      />
+      <path
+        d="M11.46 4c.64 0 1.39 5 1.69 5 .29 0 .4-1.94.42-2.54s.11-1.46.7-1.46c.6 0 .38 2.73.31 3.15s0 1.34.33 1.34c.1 0 .23-.12.39-.45.51-1 1.5-1.87 2-1.87a.21.21 0 01.21.14c.19.52-1.58 3.27-1.77 3.6s0 2.69-.17 3.77S13.15 16 13.15 16c-1.54 0-2.83-.58-3.12-1.15s-2.24-1-3-1h-.26c-.43 0-.58-.72.09-1A3.12 3.12 0 018 12.79a7.67 7.67 0 011.81.2 1.3 1.3 0 00.39.06c.37 0 .71-.19.49-.81-.29-.83-3.23-5.58-2.9-6A.26.26 0 018 6.09c.51 0 1.55.94 2.15 1.94s1.3 1.71 1.62 1.71a.15.15 0 00.13-.06c.21-.29-1.1-3.9-1.29-4.54A.8.8 0 0111.46 4m0-1a1.88 1.88 0 00-1.53.72 1.85 1.85 0 00-.26 1.67c0 .13.12.37.22.68A3 3 0 008 5.09a1.26 1.26 0 00-1 .52c-.54.74-.17 1.58 1.81 5.16l.61 1.12a10.32 10.32 0 00-1.4-.1 3.9 3.9 0 00-1.57.21 1.65 1.65 0 00-1 1.82A1.36 1.36 0 006.77 15a1.44 1.44 0 00.29 0 6.46 6.46 0 012.15.54c.58.91 2.2 1.56 3.94 1.56h.12c.49-.06 2.95-.45 3.28-2.16a13.94 13.94 0 00.11-2.45v-1.13l.1-.17C18.48 8.31 18.67 7.6 18.44 7a1.21 1.21 0 00-1.15-.8 2.58 2.58 0 00-1.58.77 4.22 4.22 0 00-.48-2.49 1.21 1.21 0 00-.9-.45h-.06a1.45 1.45 0 00-1.27.69C12.62 3.62 12.21 3 11.46 3z"
+        fill={secondaryFillColor}
+      />
+    </BaseSvg>
+  );
+};
+
+export default MeleeSpellSvg;

ddb_main/tools/js/smartComponents/Svg/attackTypes/MeleeSpellSvg/index.ts

@@ -0,0 +1,16 @@
+import { asDarkSvg } from "../../hocs/asDarkSvg";
+import { asGraySvg } from "../../hocs/asGraySvg";
+import { asLightSvg } from "../../hocs/asLightSvg";
+import MeleeSpellSvg from "./MeleeSpellSvg";
+
+const LightMeleeSpellSvg = asLightSvg(MeleeSpellSvg);
+const DarkMeleeSpellSvg = asDarkSvg(MeleeSpellSvg);
+const GrayMeleeSpellSvg = asGraySvg(MeleeSpellSvg);
+
+export default MeleeSpellSvg;
+export {
+  MeleeSpellSvg,
+  LightMeleeSpellSvg,
+  DarkMeleeSpellSvg,
+  GrayMeleeSpellSvg,
+};

ddb_main/tools/js/smartComponents/Svg/attackTypes/MeleeWeaponSvg/index.ts

@@ -0,0 +1,16 @@
+import { asDarkSvg } from "../../hocs/asDarkSvg";
+import { asGraySvg } from "../../hocs/asGraySvg";
+import { asLightSvg } from "../../hocs/asLightSvg";
+import MeleeWeaponSvg from "./MeleeWeaponSvg";
+
+const LightMeleeWeaponSvg = asLightSvg(MeleeWeaponSvg);
+const DarkMeleeWeaponSvg = asDarkSvg(MeleeWeaponSvg);
+const GrayMeleeWeaponSvg = asGraySvg(MeleeWeaponSvg);
+
+export default MeleeWeaponSvg;
+export {
+  MeleeWeaponSvg,
+  LightMeleeWeaponSvg,
+  DarkMeleeWeaponSvg,
+  GrayMeleeWeaponSvg,
+};

ddb_main/tools/js/smartComponents/Svg/attackTypes/RangedSpellSvg/RangedSpellSvg.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../BaseSvg";
+
+const RangedSpellSvg: React.FunctionComponent<BaseSvgProps> = ({
+  className = "",
+  fillColor,
+  secondaryFillColor,
+}) => {
+  return (
+    <BaseSvg className={className} viewBox="0 0 20.28 20.17">
+      <defs>
+        <style>
+          {`.prefix__cls-1{stroke:${fillColor};stroke-miterlimit:10}.prefix__cls-5{fill:${secondaryFillColor}}`}
+        </style>
+      </defs>
+      <title>{"Asset 14"}</title>
+      <g id="prefix__Layer_2" data-name="Layer 2">
+        <g id="prefix__Layer_1-2" data-name="Layer 1">
+          <path
+            className="prefix__cls-1"
+            d="M15.25 19.55l-3.97-3.05M9.37 9.48c-.11-.1-.21-.21-.32-.32.2.19.32.32.32.32z"
+          />
+          <path
+            d="M16.41 16.42l-7.82-12h3.83L7.58 2.84l-.31-.55 4.19-.79L4.91.55 4.4.52.51.5v7.17l.76 3.72s.07-2.67 0-3a49.92 49.92 0 013 4c-.3-1.3-.69-3.51-.86-4.5zM7.17 8.3h.17l.07.18z"
+            fill={fillColor}
+            stroke={fillColor}
+            strokeMiterlimit={10}
+          />
+          <path
+            d="M5.41 7.42c.11.11 1.89.9 2 1a18.82 18.82 0 00-1-2.32c-1.47-1.48.37-.81 0-2.68s-3.18-.47-5-1c.34 1.07-.77 1.89 1 4 1.06 1.32 2.29.34 3 1z"
+            fill="none"
+          />
+          <path
+            d="M15.16 19.8c-1.57 0-3.06-.58-3.46-1.35a5.69 5.69 0 00-2.65-.75h-.27a.74.74 0 01-.73-.61A1 1 0 018.72 16a3.38 3.38 0 011.28-.2 7.94 7.94 0 011.92.22.93.93 0 00.27 0 .29.29 0 00.18 0v-.28c0-.19-.53-1.06-1-1.9-1.83-3.27-2.16-4.07-1.87-4.47a.64.64 0 01.5-.26c.72 0 1.86 1.1 2.47 2.12a6 6 0 001 1.31c-.18-.77-.69-2.28-.94-3l-.3-.9A1.17 1.17 0 0113.47 7c.59 0 .88.83 1.51 3.49l.14.57c0-.35.07-.78.08-1.26 0-1.22.41-1.84 1.08-1.84a.61.61 0 01.47.23c.57.68.24 3.33.23 3.35a2.59 2.59 0 000 .65c.54-1.08 1.63-2.05 2.28-2.05a.58.58 0 01.57.39c.14.39-.08 1.1-1.62 3.62l-.18.29a10.57 10.57 0 000 1.34 13.58 13.58 0 01-.1 2.32c-.25 1.31-2.49 1.62-2.74 1.66z"
+            fill={fillColor}
+          />
+          <path
+            className="prefix__cls-5"
+            d="M13.47 7.42c.64 0 1.39 5 1.69 5 .29 0 .4-1.94.42-2.54s.12-1.48.71-1.48c.6 0 .38 2.73.31 3.15s0 1.34.33 1.34c.1 0 .23-.12.39-.45.51-1 1.5-1.87 2-1.87a.21.21 0 01.21.14c.19.52-1.58 3.27-1.77 3.6s0 2.69-.17 3.77-2.42 1.35-2.42 1.35c-1.54 0-2.83-.58-3.12-1.15s-2.24-1-3-1h-.27c-.43 0-.58-.72.09-1a3.12 3.12 0 011.13-.1 7.67 7.67 0 011.81.2 1.3 1.3 0 00.39.06c.37 0 .71-.19.49-.81-.29-.83-3.23-5.58-2.9-6a.26.26 0 01.21-.15c.51 0 1.55.94 2.15 1.94s1.3 1.71 1.62 1.71a.15.15 0 00.13-.06c.21-.29-1.1-3.9-1.29-4.54a.8.8 0 01.83-1.1m0-.75a1.64 1.64 0 00-1.33.62 1.61 1.61 0 00-.22 1.45c0 .16.16.5.3.92l.32 1c-.64-.88-1.67-1.87-2.5-1.87a1 1 0 00-.83.41C8.77 9.74 9 10.42 11 14c.32.57.67 1.21.85 1.58a9.06 9.06 0 00-1.85-.15 3.67 3.67 0 00-1.45.23 1.38 1.38 0 00-.88 1.54 1.12 1.12 0 001.09.9H9a6.16 6.16 0 012.38.61c.5.87 2.07 1.49 3.76 1.49h.09c.46-.06 2.77-.42 3.06-2a13.8 13.8 0 00.1-2.4v-1.21l.13-.21c1.65-2.69 1.84-3.42 1.65-3.95a1 1 0 00-.92-.64A2.94 2.94 0 0017.43 11c.07-.88.11-2.39-.38-3a1 1 0 00-.71-.36c-.53 0-1.12.24-1.38 1.23-.41-1.51-.76-2.19-1.48-2.19zM1.37 1.47L2.29 8 3 4.34s3.42 4 3.33 3.79-2-4.37-2-4.37l4 .42-4.21-1.92 4.13-.75z"
+          />
+        </g>
+      </g>
+    </BaseSvg>
+  );
+};
+
+export default RangedSpellSvg;

ddb_main/tools/js/smartComponents/Svg/attackTypes/RangedSpellSvg/index.ts

@@ -0,0 +1,16 @@
+import { asDarkSvg } from "../../hocs/asDarkSvg";
+import { asGraySvg } from "../../hocs/asGraySvg";
+import { asLightSvg } from "../../hocs/asLightSvg";
+import RangedSpellSvg from "./RangedSpellSvg";
+
+const LightRangedSpellSvg = asLightSvg(RangedSpellSvg);
+const DarkRangedSpellSvg = asDarkSvg(RangedSpellSvg);
+const GrayRangedSpellSvg = asGraySvg(RangedSpellSvg);
+
+export default RangedSpellSvg;
+export {
+  RangedSpellSvg,
+  LightRangedSpellSvg,
+  DarkRangedSpellSvg,
+  GrayRangedSpellSvg,
+};

ddb_main/tools/js/smartComponents/Svg/attackTypes/RangedWeaponSvg/index.ts

@@ -0,0 +1,16 @@
+import { asDarkSvg } from "../../hocs/asDarkSvg";
+import { asGraySvg } from "../../hocs/asGraySvg";
+import { asLightSvg } from "../../hocs/asLightSvg";
+import RangedWeaponSvg from "./RangedWeaponSvg";
+
+const LightRangedWeaponSvg = asLightSvg(RangedWeaponSvg);
+const DarkRangedWeaponSvg = asDarkSvg(RangedWeaponSvg);
+const GrayRangedWeaponSvg = asGraySvg(RangedWeaponSvg);
+
+export default RangedWeaponSvg;
+export {
+  RangedWeaponSvg,
+  LightRangedWeaponSvg,
+  DarkRangedWeaponSvg,
+  GrayRangedWeaponSvg,
+};

ddb_main/tools/js/smartComponents/Svg/attackTypes/ThrownSvg/ThrownSvg.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../BaseSvg";
+
+const ThrownSvg: React.FunctionComponent<BaseSvgProps> = ({
+  className = "",
+  fillColor,
+  secondaryFillColor,
+}) => {
+  return (
+    <BaseSvg className={className} viewBox="0 0 18.16 18.94">
+      <path
+        d="M8.82 5.68S6.78 6 6.07 7.09c0 0 1.19 1 2.07.54s1.25-1.17.68-1.95z"
+        fill={secondaryFillColor}
+      />
+      <path
+        fill={fillColor}
+        d="M10.41 8.58L1.59 0s.76 7.26 5.77 10.47zM11.33 9.47l4.37 5.21-1.7.86-4.02-5.07 1.35-1zM16.29 8.66A24.79 24.79 0 0012 .62S10.82 4 14.15 9.06zM16.75 9.63c.19.16 1.4 4.07 1.4 4.07l-1.15.87L15.51 10zM15.38 17.8l-4.7-2.96-1.08 1.21 4.67 2.89 1.11-1.14zM9.6 14.38L0 11s3.13 5.07 7.72 5.72z"
+      />
+    </BaseSvg>
+  );
+};
+
+export default ThrownSvg;

ddb_main/tools/js/smartComponents/Svg/attackTypes/ThrownSvg/index.ts

@@ -0,0 +1,11 @@
+import { asDarkSvg } from "../../hocs/asDarkSvg";
+import { asGraySvg } from "../../hocs/asGraySvg";
+import { asLightSvg } from "../../hocs/asLightSvg";
+import ThrownSvg from "./ThrownSvg";
+
+const LightThrownSvg = asLightSvg(ThrownSvg);
+const DarkThrownSvg = asDarkSvg(ThrownSvg);
+const GrayThrownSvg = asGraySvg(ThrownSvg);
+
+export default ThrownSvg;
+export { ThrownSvg, LightThrownSvg, DarkThrownSvg, GrayThrownSvg };

ddb_main/tools/js/smartComponents/Svg/attackTypes/UnarmedStrikeSvg/UnarmedStrikeSvg.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../BaseSvg";
+
+const UnarmedStrikeSvg: React.FunctionComponent<BaseSvgProps> = ({
+  className = "",
+  fillColor,
+  secondaryFillColor,
+}) => {
+  return (
+    <BaseSvg className={className} viewBox="0 0 20 20">
+      <g fill={fillColor}>
+        <path d="M14.5 6.5l-2.793-2.793a1 1 0 00-1.414 0l-.864.864a.497.497 0 00.076.765L12.5 8.5zM7.707 4.707a1 1 0 00-1.414 0l-.584.584a1.003 1.003 0 000 1.418L10 11l2.102-1.898zM4.713 7.287l-1 1a1.004 1.004 0 00.003 1.423l4.578 4.55a1 1 0 001.43.017l.581-.582a.997.997 0 00.011-1.4l-4.978-5.07a.495.495 0 00-.625.062zM7.327 14.299l-2.99-3.074a.495.495 0 00-.624.062l-.999.999a1 1 0 00.008 1.421l2.575 2.543a.995.995 0 001.43.023l.586-.586a.992.992 0 00.014-1.388z" />
+        <path d="M19 13V9l-3-3-5 5c2 2 5-1 5-1v1l-1 1a3.773 3.773 0 00-.742 3.258A2.798 2.798 0 0114 12s-1 1-3 0a1.385 1.385 0 010 2l-1 1a3.097 3.097 0 01-2 1l-1 1 2 2c1 1 4 0 4 0l1 1h5a1 1 0 001-1v-5zM7 0H0v7l1-6 6-1z" />
+        <path d="M14 1L2 2 1 14 3 3l11-2z" />
+      </g>
+    </BaseSvg>
+  );
+};
+
+export default UnarmedStrikeSvg;

ddb_main/tools/js/smartComponents/Svg/attackTypes/UnarmedStrikeSvg/index.ts

@@ -0,0 +1,16 @@
+import { asDarkSvg } from "../../hocs/asDarkSvg";
+import { asGraySvg } from "../../hocs/asGraySvg";
+import { asLightSvg } from "../../hocs/asLightSvg";
+import UnarmedStrikeSvg from "./UnarmedStrikeSvg";
+
+const LightUnarmedStrikeSvg = asLightSvg(UnarmedStrikeSvg);
+const DarkUnarmedStrikeSvg = asDarkSvg(UnarmedStrikeSvg);
+const GrayUnarmedStrikeSvg = asGraySvg(UnarmedStrikeSvg);
+
+export default UnarmedStrikeSvg;
+export {
+  UnarmedStrikeSvg,
+  LightUnarmedStrikeSvg,
+  DarkUnarmedStrikeSvg,
+  GrayUnarmedStrikeSvg,
+};

ddb_main/tools/js/smartComponents/Svg/attackTypes/WeaponSpellDamageSvg/WeaponSpellDamageSvg.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../BaseSvg";
+
+const WeaponSpellDamageSvg: React.FunctionComponent<BaseSvgProps> = ({
+  className = "",
+  fillColor,
+  secondaryFillColor,
+}) => {
+  return (
+    <BaseSvg className={className} viewBox="0 0 21.97 22.38">
+      <path
+        fill={fillColor}
+        d="M14.28 2.7l-.06.06.04-.15.02.09zM13.81 7.36l.45-1.83.45 1.83 1.59.5-1.53.27-.51 1.88-.5-1.88-.88-.16-.64-.11.78-.25.79-.25zM10.79 8.33l1.82.32-.32.82-1.5-1.14zM7.98 14.83l2.04.65-1.97.34-.65 2.42-.65-2.42-1.94-.34 2.01-.65.04-.16.54-2.18.47 1.88.11.46z"
+      />
+      <path
+        fill={fillColor}
+        d="M.7 15.79l.05.01-.3.05 3.69-3.11L.15 9.35h4.11L0 0l5.52 4.58-.92-3.53L6.74 2.8 8.18.43l1.01 3.86L12.58.98l-1.31 4.85 2.95-3.07-.99 4.05-3.11 1-2.83-2.16a.927.927 0 00-.59-.21 1.002 1.002 0 00-.84 1.57l1.38 1.98-1.25 5.09z"
+      />
+      <path
+        fill={fillColor}
+        d="M7.71 9.66l2.75 3.96-1.62.47-.04-.01-1.09-4.42z"
+      />
+      <path
+        fill={fillColor}
+        d="M21.97 21.03l-.7.65-.64.7-3.32-3.39-2.22 2.26-1.12-.81 2.05-2.03-2.04-2.58-.11-.14-2.69-3.41-4.59-5.81 5.16 4.36 6.42 5.44 1.87-1.89.81 1.11-2.27 2.23 3.39 3.31zM14.55 3.76l-.27-1.06 1.16-1.2-.89 2.26z"
+      />
+    </BaseSvg>
+  );
+};
+
+export default WeaponSpellDamageSvg;

ddb_main/tools/js/smartComponents/Svg/attackTypes/WeaponSpellDamageSvg/index.ts

@@ -0,0 +1,16 @@
+import { asDarkSvg } from "../../hocs/asDarkSvg";
+import { asGraySvg } from "../../hocs/asGraySvg";
+import { asLightSvg } from "../../hocs/asLightSvg";
+import WeaponSpellDamageSvg from "./WeaponSpellDamageSvg";
+
+const LightWeaponSpellDamageSvg = asLightSvg(WeaponSpellDamageSvg);
+const DarkWeaponSpellDamageSvg = asDarkSvg(WeaponSpellDamageSvg);
+const GrayWeaponSpellDamageSvg = asGraySvg(WeaponSpellDamageSvg);
+
+export default WeaponSpellDamageSvg;
+export {
+  WeaponSpellDamageSvg,
+  LightWeaponSpellDamageSvg,
+  DarkWeaponSpellDamageSvg,
+  GrayWeaponSpellDamageSvg,
+};

ddb_main/tools/js/smartComponents/Svg/boxes/AbilityScoreBoxSvg/AbilityScoreBoxSvg.tsx

@@ -0,0 +1,38 @@
+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 AbilityScoreBoxSvg extends React.PureComponent<Props> {
+  static defaultProps = {
+    className: "",
+  };
+
+  render() {
+    const { theme, className } = this.props;
+
+    let classNames: Array<string> = ["ddbc-ability-score-box-svg", className];
+
+    return (
+      <BaseSvg className={classNames.join(" ")} viewBox="0 0 81 95">
+        <path
+          fill={theme.backgroundColor}
+          d="M77.56,53.81a4.55,4.55,0,0,1-1.64-3.69c0-6.29-1.3-14.52,1.37-20.68A5,5,0,0,1,76,26.51a5.3,5.3,0,0,1-.72-6c1.28-2.68,1.17-6.68.88-9.54a4.15,4.15,0,0,1,1.22-3.27c.12-.62.23-1.24.35-1.86C73.47,7.49,70.86,2,70.86,2H10.14S8,6.44,4.48,6.16A5.61,5.61,0,0,1,4.63,7.5c0,1.54-.17,3.1-.21,4.66.09,1.24.23,2.47.44,3.68a33,33,0,0,1,1.58,7.78,4.58,4.58,0,0,1-1.05,3.21,4.79,4.79,0,0,1-1.47,2.34,5.17,5.17,0,0,1,.5,2.12c.18,6.94.78,13.53.25,20.5a5,5,0,0,1-1.2,3c.06,2,0,4,0,6.07a4.61,4.61,0,0,1,.44,3.71C1.64,73,6.36,78,12.35,82.16a5.16,5.16,0,0,1,.49.21c.91.5,1.81,1,2.73,1.55a1,1,0,0,0,.17.1c.54.3,1.09.59,1.66.85a2.39,2.39,0,0,1,.21.13h1.85a4.21,4.21,0,0,1-1.19-1.92,9.45,9.45,0,0,1-.9-6.13,3.71,3.71,0,0,1,.18-1.22c.16-.41.32-.79.49-1.15A10.44,10.44,0,0,1,21,70.26c.11-.12.21-.25.32-.36a14.53,14.53,0,0,1,1.91-1.84,18.26,18.26,0,0,1,6-3.17,21.13,21.13,0,0,1,4.9-1.39c6.15-1.45,14.34-.72,19.85,2.51.67.3,1.33.62,1.94,1a6.52,6.52,0,0,1,.67.45l.07,0a14.44,14.44,0,0,1,4,3.33,4.51,4.51,0,0,1,.77,1,22.47,22.47,0,0,1,1.29,1.89,4.61,4.61,0,0,1,.57,3.41,5.42,5.42,0,0,1,.27,1.78,5.73,5.73,0,0,1-.27,2.33,5.11,5.11,0,0,1-1.29,3.1,3.79,3.79,0,0,1-.66.72h2.68a4.41,4.41,0,0,1,2.21-1.49c1.34-.86,2.74-1.65,4.06-2.61,1.7-1.26,5.14-3.55,5.9-5.61A5.51,5.51,0,0,1,76.8,74a7.8,7.8,0,0,0,.37-1.71,5.4,5.4,0,0,1,.34-1.56c-.09-1.51-.18-3-.41-4.53a6.21,6.21,0,0,1,.5-3.74C77.46,59.57,77.46,56.64,77.56,53.81Z"
+        />
+        <path
+          fill={theme.backgroundColor}
+          d="M40.5,66C50.7,66,59,71.61,59,78.5S50.7,91,40.5,91,22,85.39,22,78.5,30.3,66,40.5,66"
+        />
+        <path
+          fill={theme.themeColor}
+          d="M4.52,13.62A34.66,34.66,0,0,1,3.08,6.26l0-.42.63-.2C5.22,5.18,9.41,3.35,9.41,1V0H71.59V1c0,2.37,4.19,4.2,5.66,4.66l.63.2,0,.42a35.34,35.34,0,0,1-1.44,7.36L76,7.3C74.42,6.71,70.47,5,69.74,2H11.26C10.52,5,6.58,6.71,5,7.3ZM2.32,79.46H2.6c.08-1.12.16-2.38.24-3.76A13,13,0,0,1,.63,69.83,9.4,9.4,0,0,1,3.21,62.6V61.43S1.83,35.67.56,31.56L.4,31l.47-.29a12.31,12.31,0,0,0,2.2-1.87,6.23,6.23,0,0,0,1.55-2.24A5.08,5.08,0,0,0,5,23.27c0-.11-.58-1.35-1.12-3l-.26,2.85c.27.79.5,1.63.71,2.49a5.17,5.17,0,0,1-1.56,2A33.13,33.13,0,0,0,1.74,23.6l-.07-.2L2.91,9.63c0,2,1.38,6.53,1.38,6.53a36.23,36.23,0,0,0,2.1,6.67A7.13,7.13,0,0,1,5,28.71C6.68,38,5.08,71,4.87,74.89A15.6,15.6,0,0,1,3,71.41c.08-2,.13-4.16.16-6.41a7.57,7.57,0,0,0-1.15,4.71,12,12,0,0,0,2.1,5.41l.15.22.45.64.06.07h0a29.64,29.64,0,0,0,5.74,5.66A39.48,39.48,0,0,1,14,83.83h0l.26.18c.79.54,1.55,1.09,2.29,1.65l.18.13h0c1.42,1.09,2.71,2.17,3.78,3.11,1.39,0,2.75.11,4,.22a16.4,16.4,0,0,1-3.19-3.33H17.91l-2.49-2h2.32a16.19,16.19,0,0,1-.88-4.16,4.31,4.31,0,0,1-5.21,1.79c.59.18,3,.53,5.24-4.08v0a8.24,8.24,0,0,1,2.52-5.32,13.54,13.54,0,0,0-1,10.29A1.76,1.76,0,0,0,19.8,83,11.36,11.36,0,0,1,19,78.77c0-8.55,9.66-15.51,21.54-15.51S62,70.22,62,78.77A11.36,11.36,0,0,1,61.2,83a1.76,1.76,0,0,0,1.34-.64,13.54,13.54,0,0,0-1-10.29A8.24,8.24,0,0,1,64.1,77.4v0c2.2,4.61,4.64,4.26,5.24,4.08a4.31,4.31,0,0,1-5.21-1.79,16.19,16.19,0,0,1-.88,4.16h2.32l-2.49,2H59.68a16.4,16.4,0,0,1-3.19,3.33c1.2-.11,2.57-.21,4-.22,1.07-.94,2.36-2,3.78-3.11h0l.18-.13c.74-.56,1.5-1.11,2.29-1.65l.26-.18h0a39.48,39.48,0,0,1,3.49-2.11,29.64,29.64,0,0,0,5.74-5.66h0l.06-.07.45-.64.15-.22A12,12,0,0,0,79,69.71,7.64,7.64,0,0,0,77.8,65c0,2.25.08,4.41.16,6.41a15.6,15.6,0,0,1-1.83,3.48C75.92,71,74.32,38,76,28.71a7.1,7.1,0,0,1-1.34-5.88,38.28,38.28,0,0,0,2.09-6.67s1.4-4.48,1.38-6.53L79.33,23.4l-.07.2a33.13,33.13,0,0,0-1.07,4.08,5.39,5.39,0,0,1-1.57-2c.22-.86.45-1.7.71-2.49l-.25-2.85c-.54,1.61-1.07,2.85-1.12,3a5.08,5.08,0,0,0,.42,3.36,6.23,6.23,0,0,0,1.55,2.24,12.31,12.31,0,0,0,2.2,1.87l.48.29-.17.53c-1.26,4.11-2.64,29.87-2.64,29.87,0,.39,0,.79,0,1.17a9.4,9.4,0,0,1,2.58,7.23,13.37,13.37,0,0,1-2.2,5.89c.07,1.38.15,2.64.23,3.76h.28c1.49-.12,2.79.71,2.16,1.75a2.46,2.46,0,0,1-1.72,1.15,2.58,2.58,0,0,0,.75-.85c.17-.3,0-.44-.14-.51l-.38,0h0a7.86,7.86,0,0,0-.84,0c.18,2.31.32,3.71.33,3.79L79,85.79H66.64c-1.46,1-2.84,2.15-4,3.15a11.85,11.85,0,0,1,7,2.12l-2.75,1.09h0a30,30,0,0,1-5.35,1.74h0l-.33,0L61,94c-9.66,1.67-10.67.75-10.67.75A10.09,10.09,0,0,0,57.11,92l.23-.24c.1-.1.62-.62,1.46-1.4-.62,0-1.22.07-1.81.12h0l-.44,0a8.82,8.82,0,0,0-1.18.23,7.12,7.12,0,0,0-.87.27l-.14,0a6.24,6.24,0,0,0-1,.44l-.11.07a5.63,5.63,0,0,0-.77.54l-.22.19a4.82,4.82,0,0,0-.75.86l-7.89.9.06,0a26.18,26.18,0,0,1-6.46,0l.06,0-7.89-.9a4.5,4.5,0,0,0-.76-.86l-.22-.2a7,7,0,0,0-.79-.55l-.09-.06a8.88,8.88,0,0,0-.95-.44L26.45,91c-.3-.11-.59-.2-.86-.27-.46-.11-.86-.17-1.14-.21l-.44,0h0c-.59,0-1.19-.09-1.81-.12.84.78,1.36,1.3,1.45,1.4l.24.24a10.09,10.09,0,0,0,6.78,2.71s-1,.92-10.67-.75l-.24,0-.33,0h0a29.76,29.76,0,0,1-5.35-1.74h0l-2.75-1.09a11.85,11.85,0,0,1,7-2.12c-1.2-1-2.58-2.1-4-3.15H2l.12-1.08c0-.08.15-1.48.33-3.79a7.86,7.86,0,0,0-.84,0h0l-.38,0c-.17.07-.31.21-.14.51a2.5,2.5,0,0,0,.74.85A2.47,2.47,0,0,1,.16,81.21c-.63-1,.67-1.87,2.16-1.75ZM76.78,49.11c.53-5.66,1.25-14.21,2.15-17.46a15.6,15.6,0,0,1-1.28-1,144.6,144.6,0,0,0-.87,18.5ZM74.63,80a11.89,11.89,0,0,1,1.8-.35c0-.46-.07-1-.1-1.48-.57.67-1.15,1.28-1.7,1.83Zm-5,3.82h7.17c-.06-.66-.15-1.61-.24-2.76a18.56,18.56,0,0,0-6.93,2.76ZM58.69,92.48l.07,0c1.06.59,4.54-.45,7.31-1.59a17.09,17.09,0,0,0-5.08-.6c-1.07,1-1.88,1.72-2.3,2.14ZM40.5,92.14c7,0,13-2.55,16.48-6.35.27-.3.53-.62.78-.94a.61.61,0,0,1,.07-.1,9.16,9.16,0,0,0,.61-.92,9.74,9.74,0,0,0,1.46-5.06c0-7.37-8.7-13.37-19.4-13.37s-19.4,6-19.4,13.37a9.83,9.83,0,0,0,1.45,5.06c.19.32.4.62.62.92l.08.1c.24.32.5.64.77.94,3.43,3.8,9.52,6.35,16.48,6.35ZM20,90.34a17.09,17.09,0,0,0-5.08.6c2.78,1.14,6.25,2.18,7.31,1.59l.07,0c-.42-.42-1.22-1.18-2.3-2.14ZM4.57,79.66a12.14,12.14,0,0,1,1.8.35c-.55-.55-1.13-1.16-1.7-1.83,0,.52-.07,1-.1,1.48Zm-.35,4.17h7.17a18.62,18.62,0,0,0-6.93-2.76c-.09,1.15-.18,2.1-.24,2.76Zm0-34.72a144.6,144.6,0,0,0-.87-18.5,15.6,15.6,0,0,1-1.28,1C3,34.9,3.68,43.45,4.22,49.11Z"
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/boxes/AbilityScoreBoxSvg/index.ts

@@ -0,0 +1,4 @@
+import AbilityScoreBoxSvg from "./AbilityScoreBoxSvg";
+
+export default AbilityScoreBoxSvg;
+export { AbilityScoreBoxSvg };

ddb_main/tools/js/smartComponents/Svg/boxes/ArmorClassBoxSvg/ArmorClassBoxSvg.tsx

@@ -0,0 +1,54 @@
+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 ArmorClassBoxSvg extends React.PureComponent<Props> {
+  render() {
+    const { theme, className } = this.props;
+
+    let classNames: Array<string> = ["ddbc-armor-class-box-svg", className];
+
+    return (
+      <BaseSvg className={classNames.join(" ")} viewBox="0 0 79 90">
+        <path
+          fill={theme.backgroundColor}
+          d="M72.8,30.7v13.7c-1,3.6-9.7,30.9-31.9,38.6c-0.3-0.4-0.8-0.7-1.4-0.7c-0.6,0-1,0.3-1.4,0.7
+                        C26,78.7,17.9,68.6,12.9,59.8c0,0,0,0,0,0c-0.3-0.5-0.6-1-0.8-1.5c-3.6-6.7-5.4-12.4-5.9-14V30.7c0.7-0.3,1.2-0.9,1.2-1.7
+                        c0-0.1,0-0.2-0.1-0.3c6.2-4,8.5-11.5,9.2-15.2L38.1,7c0.3,0.4,0.8,0.7,1.4,0.7c0.6,0,1.1-0.3,1.4-0.7l21.4,6.6
+                        c0.8,3.6,3,11.1,9.2,15.2V29c0,0.2,0,0.4,0.1,0.6C71.8,30.1,72.3,30.5,72.8,30.7z"
+        />
+        <path
+          fill={theme.themeColor}
+          d="M73.2,27.3c-0.4,0-0.8,0.2-1.1,0.4c-5.8-3.9-7.9-11.3-8.6-14.5l-0.1-0.4l-22-6.7c-0.1-0.9-0.8-1.7-1.8-1.7
+                        s-1.7,0.8-1.8,1.7l-22,6.7l-0.1,0.4c-0.6,3.2-2.7,10.6-8.6,14.5c-0.3-0.3-0.7-0.4-1.1-0.4c-1,0-1.8,0.8-1.8,1.9
+                        c0,0.8,0.5,1.5,1.2,1.7v13.5v0.2c0.9,3.2,9.7,31.2,32.4,39.2c0.1,1,0.8,1.8,1.8,1.8s1.8-0.8,1.8-1.8c9.3-3.3,17.3-10.1,23.8-20.4
+                        c5.3-8.4,7.9-16.5,8.6-18.8V30.9c0.7-0.3,1.2-0.9,1.2-1.7C75,28.1,74.2,27.3,73.2,27.3z M72.5,44.3c-1,3.6-9.6,30.5-31.5,38.2
+                        c-0.3-0.4-0.8-0.7-1.4-0.7c-0.6,0-1,0.3-1.4,0.7C16.3,74.8,7.8,47.9,6.7,44.3V30.9c0.7-0.3,1.2-0.9,1.2-1.7c0-0.1,0-0.2-0.1-0.3
+                        c6.1-4,8.4-11.4,9.1-15l21.3-6.5c0.3,0.4,0.8,0.7,1.4,0.7c0.6,0,1.1-0.3,1.4-0.7l21.2,6.5c0.8,3.6,3,11,9.1,15c0,0.1,0,0.2,0,0.3
+                        c0,0.8,0.5,1.5,1.2,1.7V44.3z M73.2,27.3c-0.4,0-0.8,0.2-1.1,0.4c-5.8-3.9-7.9-11.3-8.6-14.5l-0.1-0.4l-22-6.7
+                        c-0.1-0.9-0.8-1.7-1.8-1.7s-1.7,0.8-1.8,1.7l-22,6.7l-0.1,0.4c-0.6,3.2-2.7,10.6-8.6,14.5c-0.3-0.3-0.7-0.4-1.1-0.4
+                        c-1,0-1.8,0.8-1.8,1.9c0,0.8,0.5,1.5,1.2,1.7v13.5v0.2c0.9,3.2,9.7,31.2,32.4,39.2c0.1,1,0.8,1.8,1.8,1.8s1.8-0.8,1.8-1.8
+                        c9.3-3.3,17.3-10.1,23.8-20.4c5.3-8.4,7.9-16.5,8.6-18.8V30.9c0.7-0.3,1.2-0.9,1.2-1.7C75,28.1,74.2,27.3,73.2,27.3z M72.5,44.3
+                        c-1,3.6-9.6,30.5-31.5,38.2c-0.3-0.4-0.8-0.7-1.4-0.7c-0.6,0-1,0.3-1.4,0.7C16.3,74.8,7.8,47.9,6.7,44.3V30.9
+                        c0.7-0.3,1.2-0.9,1.2-1.7c0-0.1,0-0.2-0.1-0.3c6.1-4,8.4-11.4,9.1-15l21.3-6.5c0.3,0.4,0.8,0.7,1.4,0.7c0.6,0,1.1-0.3,1.4-0.7
+                        l21.2,6.5c0.8,3.6,3,11,9.1,15c0,0.1,0,0.2,0,0.3c0,0.8,0.5,1.5,1.2,1.7V44.3z M78.1,24.5c-8.7-1.8-9.9-14.9-9.9-15l-0.1-0.8L39.5,0
+                        L10.9,8.7l-0.1,0.8c0,0.1-1.2,13.3-9.9,15l-1,0.2v20.4v0.3C0,45.8,9.6,82.1,39.1,89.9l0.3,0.1l0.3-0.1C69.5,82.1,79,45.8,79.1,45.4
+                        V24.7L78.1,24.5z M76.7,45C76,47.5,66.6,80.1,39.5,87.5C12.6,80.1,3.2,47.4,2.5,45V26.7c8.3-2.4,10.3-13,10.7-16.1l26.4-8l26.4,8
+                        c0.4,3.1,2.4,13.7,10.7,16.1V45z M63.5,13.2l-0.1-0.4l-22-6.7c-0.1-0.9-0.8-1.7-1.8-1.7s-1.7,0.8-1.8,1.7l-22,6.7l-0.1,0.4
+                        c-0.6,3.2-2.7,10.6-8.6,14.5c-0.3-0.3-0.7-0.4-1.1-0.4c-1,0-1.8,0.8-1.8,1.9c0,0.8,0.5,1.5,1.2,1.7v13.5v0.2
+                        c0.9,3.2,9.7,31.2,32.4,39.2c0.1,1,0.8,1.8,1.8,1.8s1.8-0.8,1.8-1.8c9.3-3.3,17.3-10.1,23.8-20.4c5.3-8.4,7.9-16.5,8.6-18.8V30.9
+                        c0.7-0.3,1.2-0.9,1.2-1.7c0-1-0.8-1.9-1.8-1.9c-0.4,0-0.8,0.2-1.1,0.4C66.2,23.9,64.1,16.4,63.5,13.2z M72.5,30.9v13.5
+                        c-1,3.6-9.6,30.5-31.5,38.2c-0.3-0.4-0.8-0.7-1.4-0.7c-0.6,0-1,0.3-1.4,0.7C16.3,74.8,7.8,47.9,6.7,44.3V30.9
+                        c0.7-0.3,1.2-0.9,1.2-1.7c0-0.1,0-0.2-0.1-0.3c6.1-4,8.4-11.4,9.1-15l21.3-6.5c0.3,0.4,0.8,0.7,1.4,0.7c0.6,0,1.1-0.3,1.4-0.7
+                        l21.2,6.5c0.8,3.6,3,11,9.1,15c0,0.1,0,0.2,0,0.3C71.3,30,71.8,30.6,72.5,30.9z"
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/boxes/ArmorClassBoxSvg/index.ts

@@ -0,0 +1,4 @@
+import ArmorClassBoxSvg from "./ArmorClassBoxSvg";
+
+export default ArmorClassBoxSvg;
+export { ArmorClassBoxSvg };

ddb_main/tools/js/smartComponents/Svg/boxes/AttunementSlotBoxSvg/AttunementSlotBoxSvg.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+
+import BaseSvg from "../../BaseSvg";
+import { InjectedSvgProps } from "../../hocs";
+
+export default class AttunementSlotBoxSvg extends React.PureComponent<InjectedSvgProps> {
+  render() {
+    const { fillColor, className } = this.props;
+
+    let classNames: Array<string> = ["ddbc-attunement-slot-box-svg"];
+
+    if (className) {
+      classNames.push(className);
+    }
+
+    return (
+      <BaseSvg className={classNames.join(" ")} viewBox="0 0 247.1 50">
+        <defs>
+          <rect id="SVGID_1_" x="-38.5" y="-152.3" width="612" height="792" />
+        </defs>
+        <clipPath id="SVGID_2_">
+          <use xlinkHref="#SVGID_1_" style={{ overflow: "visible" }} />
+        </clipPath>
+        <path
+          fill={fillColor}
+          clipPath="url(#SVGID_2_)"
+          d="M27.3,8c1.4,1.2,3.1,2.4,5.2,3.2c2,0.8,4.2,1.1,6.5,1.1c2.8,3.5,4.5,7.9,4.5,12.8c0,4.8-1.7,9.3-4.5,12.8
+                    c-2.3-0.1-4.4,0.3-6.5,1.1c-2.1,0.8-3.8,1.9-5.2,3.2c-2,0.7-6.2,1.9-11.3,2.1C8.4,41.1,2.9,33.7,2.9,25c0-8.7,5.5-16.1,13.2-19
+                    C21.1,6.1,25.3,7.3,27.3,8 M49.7,9.3L49.7,9.3l180.8,0c3.5,1.3,12.5,5.1,14.7,10.7v5v5c-2.1,5.5-11.2,9.4-14.7,10.7H49.7l0,0
+                    c-2.6-1.3-5-2.1-7.4-2.6c2.6-3.7,4.1-8.3,4.1-13.1s-1.5-9.4-4.1-13.1C44.7,11.4,47.2,10.6,49.7,9.3 M40.3,9.3h6.8
+                    c-1.9,0.8-3.7,1.3-5.5,1.6C41.2,10.3,40.7,9.8,40.3,9.3 M239.6,9.3c0.8,1.3,3.1,4.7,5.5,6.2v2.1c-2.6-3.9-8-6.7-11.7-8.4H239.6z
+                     M245.2,34.5c-2.4,1.5-4.7,4.9-5.5,6.2h-6.2c3.7-1.6,9.1-4.5,11.7-8.4V34.5z M40.3,40.7c0.5-0.5,0.9-1,1.3-1.6
+                    c1.8,0.3,3.6,0.8,5.5,1.6H40.3z M22.2,0c-0.3,0.1-0.4,0.4-0.3,0.7c0,0.1,0.2,0.4,0.5,1C19.1,1.9,16,2.7,13.2,4
+                    c2.7-0.3,6.9-0.1,10.9,0.7c0.1,0,0.1,0,0.2,0C24.5,5,24.7,5.3,25,5.6c-18.4-4.3-23.1,5-23.1,5C3.5,9,5.3,7.8,7.3,6.9
+                    c0.6-0.2,1.2-0.3,1.8-0.4C3.6,10.8,0,17.5,0,25c0,7.5,3.6,14.2,9.1,18.5c-0.6-0.1-1.2-0.3-1.8-0.4c-2-0.8-3.9-2-5.5-3.7
+                    c0,0,4.8,9.3,23.1,5c-0.2,0.3-0.5,0.6-0.7,0.9c-0.1,0-0.1,0-0.2,0c-4,0.8-8.2,1-10.9,0.7c2.8,1.4,5.9,2.1,9.2,2.3
+                    c-0.3,0.6-0.5,1-0.5,1c-0.1,0.3,0,0.6,0.3,0.7c0.3,0.1,0.6,0,0.7-0.3c0,0,4.3-8.3,10-9.8c1.7-0.5,3.3-0.9,5.1-1
+                    c-2.9,3.2-6.8,5.4-11.2,6.2c-1.2,1.2-1.7,2.3-1.9,3.2c3.3-0.2,6.3-1.2,9.1-2.6l3.1-2c0.4-0.3,0.8-0.6,1.1-0.9h202.5l0.3-0.5
+                    c0.8-1.4,3.4-5.2,5.5-6.2l0.6-0.3V25V14.3l-0.6-0.3c-2.1-1-4.7-4.8-5.5-6.2l-0.3-0.5H38.2c-0.4-0.3-0.7-0.6-1.1-0.9l-3.1-2
+                    C31.3,3,28.2,2,24.9,1.8c0.2,0.9,0.7,2,1.9,3.2c4.4,0.8,8.3,3,11.2,6.2c-1.8-0.1-3.5-0.5-5.1-1c-5.6-1.6-10-9.8-10-9.8
+                    C22.8,0.1,22.5-0.1,22.2,0"
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/boxes/AttunementSlotBoxSvg/index.ts

@@ -0,0 +1,15 @@
+import { asEmptySvg, asThemedSvg, asThemedWithOpacitySvg } from "../../hocs";
+import AttunementSlotBoxSvg from "./AttunementSlotBoxSvg";
+
+const EmptyAttunementSlotBoxSvg = asEmptySvg(AttunementSlotBoxSvg);
+const ThemedAttunementSlotBoxSvg = asThemedSvg(AttunementSlotBoxSvg);
+const ThemedWithOpacityAttunementSlotBoxSvg =
+  asThemedWithOpacitySvg(AttunementSlotBoxSvg);
+
+export default AttunementSlotBoxSvg;
+export {
+  AttunementSlotBoxSvg,
+  EmptyAttunementSlotBoxSvg,
+  ThemedAttunementSlotBoxSvg,
+  ThemedWithOpacityAttunementSlotBoxSvg,
+};

ddb_main/tools/js/smartComponents/Svg/boxes/InitiativeBoxSvg/InitiativeBoxSvg.tsx

@@ -0,0 +1,36 @@
+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 InitiativeBoxSvg extends React.PureComponent<Props> {
+  static defaultProps = {
+    className: "",
+  };
+
+  render() {
+    const { theme, className } = this.props;
+
+    let classNames: Array<string> = ["ddbc-initiative-box-svg", className];
+
+    return (
+      <BaseSvg className={classNames.join(" ")} viewBox="0 0 70 45">
+        <polygon
+          fill={theme.backgroundColor}
+          points="68.8,22.5 55.8,43.3 14.2,43.3 1.2,22.5 14.2,1.8 14.3,1.7 55.7,1.7 55.8,1.8 "
+        />
+        <path
+          fill={theme.themeColor}
+          d="M59.1,0H10.9L0,17.2v10.5L10.9,45H59l11-17.2V17.2L59.1,0z M58.2,2.2l10,15.8v3L56.5,2.3l-0.1-0.1H58.2z M14.8,2.2h40.5
+                        l0.1,0.1L68,22.5L55.3,42.8H14.7L2,22.5L14.8,2.2L14.8,2.2z M1.8,18l10-15.8h1.8l-0.1,0.1L1.8,21V18z M11.8,42.8L1.8,27v-3
+                        l11.7,18.8H11.8z M68.2,27l-10,15.8h-1.7L68.2,24V27z"
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/boxes/InspirationBoxSvg/InspirationBoxSvg.tsx

@@ -0,0 +1,63 @@
+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 InspirationBoxSvg extends React.PureComponent<Props> {
+  static defaultProps = {
+    className: "",
+  };
+
+  render() {
+    const { theme, className } = this.props;
+
+    let classNames: Array<string> = ["ddbc-inspiration-box-svg", className];
+
+    return (
+      <BaseSvg className={classNames.join(" ")} viewBox="0 0 72 54">
+        <defs>
+          <polygon
+            id="InspirationBoxSvg-path-1"
+            points="71.7300755 53.9993077 71.7300755 0.798923077 0.000275471698 0.798923077 0.000275471698 53.9993077"
+          />
+        </defs>
+        <g
+          id="InspirationBoxSvg-Page-1"
+          stroke="none"
+          strokeWidth="1"
+          fill="none"
+          fillRule="evenodd"
+        >
+          <g
+            id="InspirationBoxSvg-Sheet_Desktop_Static"
+            transform="translate(-1484.000000, -280.000000)"
+          >
+            <g
+              id="InspirationBoxSvg-Page-1"
+              transform="translate(1484.000000, 280.000000)"
+            >
+              <polygon
+                id="InspirationBoxSvg-Fill-1"
+                fill={theme.backgroundColor}
+                points="70 2 70 51 50.05556 51 42.7471616 47.5987134 29.2706337 47.5987134 21.9430711 51 2 51 2 2 21.3270795 2 27.9441984 6.34142368 44.0749658 6.34142368 50.6729205 2"
+              />
+              <g id="InspirationBoxSvg-Group-4">
+                <g id="InspirationBoxSvg-Clip-3" />
+                <path
+                  d="M71.7303509,6.16223077 L71.7303509,0.798230769 L49.3978604,0.798230769 L48.9033887,1.42269231 C48.0728415,2.47223077 47.0508415,3.29746154 45.9186528,3.88592308 C43.1198604,2.67438462 40.1668038,1.99176923 37.1848226,1.83392308 C36.9492943,1.33407692 36.4534453,0.979615385 35.8639358,0.979615385 C35.2771811,0.979615385 34.7785774,1.33407692 34.5458038,1.83392308 C31.5624453,1.99176923 28.6121434,2.67438462 25.8133509,3.88592308 C24.6797849,3.29746154 23.6577849,2.47223077 22.8286151,1.42269231 L22.3341434,0.798230769 L0.000275471698,0.798230769 L0.000275471698,53.9993077 L22.3341434,53.9993077 L22.8286151,53.3762308 C23.6577849,52.3280769 24.6770302,51.5000769 25.8092189,50.9143846 C28.6025019,52.1300769 31.530766,52.8223846 34.5526906,52.9774615 C34.7909736,53.4703846 35.2826906,53.8179231 35.8639358,53.8179231 C36.4451811,53.8179231 36.9396528,53.4703846 37.1751811,52.9774615 C40.1998604,52.8223846 43.1295019,52.1300769 45.9227849,50.9143846 C47.0522189,51.5000769 48.0742189,52.3280769 48.9033887,53.3762308 L49.3978604,53.9993077 L71.7303509,53.9993077 L71.7303509,48.6366923 L71.7303509,6.16223077 Z M71.7303509,11.4348462 L71.7303509,8.76253846 L71.7303509,11.4348462 Z M34.6546151,3.23238462 C34.9121811,3.63946154 35.3474264,3.92330769 35.8639358,3.92330769 C36.3832,3.92330769 36.8156906,3.63946154 37.0773887,3.23238462 C39.4230302,3.35146154 41.7452566,3.81253846 43.9793321,4.61976923 C43.2934075,4.79007692 42.5854453,4.88284615 41.8692189,4.88284615 L29.8627849,4.88284615 C29.1424264,4.88284615 28.4372189,4.79007692 27.7540491,4.61976923 C29.9853698,3.81253846 32.3089736,3.35146154 34.6546151,3.23238462 L34.6546151,3.23238462 Z M37.0760113,51.5651538 C36.8143132,51.1594615 36.3818226,50.8728462 35.8639358,50.8728462 C35.3474264,50.8728462 34.9149358,51.1594615 34.6573698,51.5651538 C32.3089736,51.4474615 29.9853698,50.9863846 27.7540491,50.1763846 C28.4372189,50.0074615 29.1424264,49.9146923 29.8627849,49.9146923 L41.8692189,49.9146923 C42.5854453,49.9146923 43.2934075,50.0074615 43.9793321,50.1763846 C41.7452566,50.9863846 39.4202755,51.4474615 37.0760113,51.5651538 L37.0760113,51.5651538 Z M50.9515208,50.6914615 C48.6058792,48.0856154 45.3374075,46.6054615 41.8692189,46.6054615 L29.8627849,46.6054615 C26.3932189,46.6054615 23.1261245,48.0856154 20.780483,50.6914615 L18.5918604,50.6914615 C18.5918604,50.6914615 3.29078491,50.6291538 3.29078491,42.6537692 L3.29078491,12.1437692 C3.29078491,4.167 18.5918604,4.10746154 18.5918604,4.10746154 L20.780483,4.10746154 C23.1261245,6.71192308 26.3932189,8.19069231 29.8627849,8.19069231 L41.8692189,8.19069231 C45.3374075,8.19069231 48.6058792,6.71192308 50.9515208,4.10746154 L53.138766,4.10746154 C53.138766,4.10746154 68.4384642,4.167 68.4384642,12.1437692 L68.4384642,42.6537692 C68.4384642,50.6291538 53.138766,50.6914615 53.138766,50.6914615 L50.9515208,50.6914615 Z M71.7303509,46.0363846 L71.7303509,43.3626923 L71.7303509,46.0363846 Z"
+                  id="InspirationBoxSvg-Fill-2"
+                  fill={theme.themeColor}
+                />
+              </g>
+            </g>
+          </g>
+        </g>
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/boxes/SavingThrowRowBoxSvg/SavingThrowRowBoxSvg.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+
+import BaseSvg from "../../BaseSvg";
+import { InjectedSvgProps } from "../../hocs";
+
+export default class SavingThrowRowBoxSvg extends React.PureComponent<InjectedSvgProps> {
+  render() {
+    const { fillColor, className } = this.props;
+
+    let classNames: Array<string> = ["ddbc-saving-throw-row-box-svg"];
+
+    if (className) {
+      classNames.push(className);
+    }
+
+    return (
+      <BaseSvg className={classNames.join(" ")} viewBox="0 0 116.1 34">
+        <g id="SavingThrowRowBoxSvg-Page-1_1_">
+          <g
+            id="SavingThrowRowBoxSvg-Sheet_Desktop_Static"
+            transform="translate(-683.000000, -651.000000)"
+          >
+            <path
+              fill={fillColor}
+              id="SavingThrowRowBoxSvg-Page-1"
+              d="M789.8,651h-22l-0.3,0.2c-1.2,0.8-2.3,1.7-3.2,2.7h-75.6l-0.3,0.4c-0.7,1.2-3,4.5-4.9,5.4
+                            l-0.5,0.2l0,16.1l0.5,0.2c1.8,0.9,4.1,4.2,4.9,5.4l0.3,0.4h75.6c1,1,2.1,1.9,3.2,2.7l0.3,0.2h21.9l0.3-0.2c5.6-3.8,9-10,9-16.8
+                            s-3.4-13-9-16.8L789.8,651z M797.1,668c0,5.8-2.9,11.2-7.6,14.5h-10.3c-4.7-2.1-11.1-3.2-14.3-3.8c-2.3-3-3.7-6.8-3.7-10.7v0
+                            c0-3.9,1.3-7.7,3.7-10.7c3.1-0.6,9.5-1.7,14.3-3.8h10.3C794.3,656.8,797.1,662.2,797.1,668L797.1,668z M752.8,655.6
+                            c0.8,0.7,2.5,1.8,5.7,2.1c-0.9,1.5-3,5.5-3,10.3s2,8.8,3,10.3c-3.2,0.3-4.9,1.4-5.7,2.1h-55.4c-3.1-1.1-11.1-4.5-12.9-9.3l0-6.2
+                            c1.9-4.8,9.9-8.1,12.9-9.3H752.8z M759.6,657.8c0.6,0,1.3,0,2,0c-1.8,3.1-2.8,6.6-2.8,10.3v0c0,3.7,1,7.2,2.9,10.3
+                            c-0.7,0-1.3-0.1-2,0c-0.6-1-3.1-5.2-3.1-10.2S759,658.8,759.6,657.8L759.6,657.8z M768.9,682.5c-1.1-0.8-2.1-1.7-3-2.6
+                            c2.4,0.5,5.1,1.3,8.3,2.6H768.9L768.9,682.5z M762.2,679.3c0.3,0.4,0.5,0.7,0.8,1.1h-8.5C755.9,679.7,758.3,678.9,762.2,679.3
+                            L762.2,679.3z M689.3,680.4c-0.7-1.1-2.8-4.1-4.9-5.4v-1.9c2.3,3.4,7.1,5.9,10.4,7.3H689.3L689.3,680.4z M684.4,661
+                            c2.1-1.3,4.2-4.3,4.9-5.4h5.5c-3.3,1.4-8,3.9-10.4,7.3V661L684.4,661z M763,655.6c-0.3,0.4-0.5,0.7-0.8,1.1
+                            c-3.9,0.4-6.3-0.4-7.7-1.1H763z M765.9,656.1c0.9-1,1.9-1.9,3-2.6h5.3C771,654.8,768.2,655.6,765.9,656.1L765.9,656.1z"
+            />
+          </g>
+        </g>
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/boxes/SavingThrowRowBoxSvg/SavingThrowRowSmallBoxSvg/SavingThrowRowSmallBoxSvg.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+import { BaseSvg } from "../../../BaseSvg";
+import { InjectedSvgProps } from "../../../hocs";
+
+export default class SavingThrowRowSmallBoxSvg extends React.PureComponent<InjectedSvgProps> {
+  render() {
+    const { fillColor, className } = this.props;
+
+    let classNames: Array<string> = ["ddbc-saving-throw-row-small-box-svg"];
+
+    if (className) {
+      classNames.push(className);
+    }
+
+    return (
+      <BaseSvg className={classNames.join(" ")} viewBox="0 0 88 28">
+        <g id="SavingThrowRowSmallBoxSvg-Page-1">
+          <g id="SavingThrowRowSmallBoxSvg-Sheet_Desktop_Static">
+            <path
+              id="SavingThrowRowSmallBoxSvg-Page-1-2"
+              fill={fillColor}
+              d="M81.02068,0H64.331l-.22758.1652a13.19155,13.19155,0,0,0-2.4276,2.23009H4.32415l-.22758.3304c-.531.99116-2.27586,3.7168-3.71726,4.46018L0,7.35107V20.64893l.37931.1652c1.36551.74338,3.11033,3.469,3.71726,4.46018l.22758.3304h57.3517a20.96667,20.96667,0,0,0,2.4276,2.23009L64.331,28H80.94484l.22757-.1652A17.166,17.166,0,0,0,88,13.95876,17.166,17.166,0,0,0,81.17241.08273ZM86.5586,14.04124a15.10111,15.10111,0,0,1-5.7655,11.97635H72.97932c-3.56553-1.73449-8.42067-2.64307-10.84827-3.13862a15.53188,15.53188,0,0,1-2.8069-8.83773h0a14.98609,14.98609,0,0,1,2.8069-8.83773C64.48276,4.708,69.338,3.79937,72.97932,2.06489H80.7931a14.8801,14.8801,0,0,1,5.7655,11.97635ZM52.95171,3.79937a7.09114,7.09114,0,0,0,4.32415,1.73449A18.4022,18.4022,0,0,0,55,14.04119a17.50539,17.50539,0,0,0,2.27586,8.50732A7.09144,7.09144,0,0,0,52.95171,24.283H10.92411c-2.35171-.90853-8.42067-3.7168-9.78623-7.68137V11.4807c1.4414-3.96458,7.51037-6.69022,9.78623-7.68138h42.0276Zm5.15862,1.81711h1.51724a18.00564,18.00564,0,0,0-2.12413,8.50733h0a17.221,17.221,0,0,0,2.2,8.50733,9.30868,9.30868,0,0,0-1.51724,0,18.18447,18.18447,0,0,1-2.35171-8.42475,19.36161,19.36161,0,0,1,2.27582-8.58991Zm7.05521,20.40111a19.90907,19.90907,0,0,1-2.27587-2.14747,34.16144,34.16144,0,0,1,6.29655,2.14747Zm-5.08277-2.64307c.22757.3304.37931.57818.60689.90853H54.24138a9.56687,9.56687,0,0,1,5.84139-.90853ZM4.7793,24.2831A15.78928,15.78928,0,0,0,1.062,19.82292V18.25359c1.74482,2.80827,5.38619,4.87315,7.88967,6.02946H4.7793ZM1.06209,8.25955A15.7888,15.7888,0,0,0,4.77935,3.79937H8.95176C6.44832,4.95573,2.8828,7.02062,1.06209,9.82884V8.25955ZM60.68966,3.79937c-.22758.33041-.37932.57818-.60689.90853a9.56642,9.56642,0,0,1-5.84139-.90853Zm2.2.413a11.52883,11.52883,0,0,1,2.27587-2.14746h4.02068a36.16356,36.16356,0,0,1-6.29655,2.14746Z"
+            />
+          </g>
+        </g>
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/boxes/SavingThrowRowBoxSvg/SavingThrowRowSmallBoxSvg/index.ts

@@ -0,0 +1,3 @@
+import SavingThrowRowSmallBoxSvg from "./SavingThrowRowSmallBoxSvg";
+
+export default SavingThrowRowSmallBoxSvg;

ddb_main/tools/js/smartComponents/Svg/boxes/SavingThrowRowBoxSvg/index.ts

@@ -0,0 +1,18 @@
+import { asEmptySvg, asThemedSvg } from "../../hocs";
+import SavingThrowRowBoxSvg from "./SavingThrowRowBoxSvg";
+import SavingThrowRowSmallBoxSvg from "./SavingThrowRowSmallBoxSvg";
+
+const EmptySavingThrowRowBoxSvg = asEmptySvg(SavingThrowRowBoxSvg);
+const ThemedSavingThrowRowBoxSvg = asThemedSvg(SavingThrowRowBoxSvg);
+const EmptySavingThrowRowSmallBoxSvg = asEmptySvg(SavingThrowRowSmallBoxSvg);
+const ThemedSavingThrowRowSmallBoxSvg = asThemedSvg(SavingThrowRowSmallBoxSvg);
+
+export default SavingThrowRowBoxSvg;
+export {
+  SavingThrowRowBoxSvg,
+  SavingThrowRowSmallBoxSvg,
+  EmptySavingThrowRowBoxSvg,
+  ThemedSavingThrowRowBoxSvg,
+  EmptySavingThrowRowSmallBoxSvg,
+  ThemedSavingThrowRowSmallBoxSvg,
+};

ddb_main/tools/js/smartComponents/Svg/boxes/SavingThrowSelectionBoxSvg/SavingThrowSelectionBoxSvg.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+import BaseSvg from "../../BaseSvg";
+import { InjectedSvgProps } from "../../hocs";
+import SavingThrowRowBoxSvg from "../SavingThrowRowBoxSvg";
+
+export default class SavingThrowSelectionBoxSvg extends React.PureComponent<InjectedSvgProps> {
+  render() {
+    const { fillColor, className } = this.props;
+
+    let classNames: Array<string> = ["ddbc-saving-throw-selection-box-svg"];
+
+    if (className) {
+      classNames.push(className);
+    }
+
+    return (
+      <React.Fragment>
+        <BaseSvg className={classNames.join(" ")} viewBox="0 0 41 36">
+          <path
+            d="M10.8724 1H30.3426C30.9246 1 31.4467 1.15738 31.8408 1.45807C35.0159 3.88086 40 9.69489 40 18C40 26.3051 35.0159 32.1191 31.8408 34.5419C31.4467 34.8426 30.9246 35 30.3426 35H10.8724C10.1907 35 9.57613 34.7818 9.1371 34.3765C6.08124 31.555 1.5 25.4781 1.5 18C1.5 10.5219 6.08124 4.44504 9.1371 1.62354C9.57613 1.21818 10.1907 1 10.8724 1Z"
+            stroke="#BFCCD6"
+            strokeWidth="1"
+          />
+        </BaseSvg>
+      </React.Fragment>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/boxes/SavingThrowSelectionBoxSvg/SavingThrowSelectionSmallBoxSvg/SavingThrowSelectionSmallBoxSvg.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+import { BaseSvg } from "../../../BaseSvg";
+import { InjectedSvgProps } from "../../../hocs";
+
+export default class SavingThrowSelectionSmallBoxSvg extends React.PureComponent<InjectedSvgProps> {
+  render() {
+    const { fillColor, className } = this.props;
+
+    let classNames: Array<string> = [
+      "ddbc-saving-throw-selection-small-box-svg",
+    ];
+
+    if (className) {
+      classNames.push(className);
+    }
+
+    return (
+      <BaseSvg className={classNames.join(" ")} viewBox="0 0 41 36">
+        <path
+          d="M10.8724 1H30.3426C30.9246 1 31.4467 1.15738 31.8408 1.45807C35.0159 3.88086 40 9.69489 40 18C40 26.3051 35.0159 32.1191 31.8408 34.5419C31.4467 34.8426 30.9246 35 30.3426 35H10.8724C10.1907 35 9.57613 34.7818 9.1371 34.3765C6.08124 31.555 1.5 25.4781 1.5 18C1.5 10.5219 6.08124 4.44504 9.1371 1.62354C9.57613 1.21818 10.1907 1 10.8724 1Z"
+          stroke="#BFCCD6"
+          strokeWidth="1"
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/boxes/SavingThrowSelectionBoxSvg/SavingThrowSelectionSmallBoxSvg/index.ts

@@ -0,0 +1,3 @@
+import SavingThrowSelectionSmallBoxSvg from "./SavingThrowSelectionSmallBoxSvg";
+
+export default SavingThrowSelectionSmallBoxSvg;

ddb_main/tools/js/smartComponents/Svg/boxes/SavingThrowSelectionBoxSvg/index.ts

@@ -0,0 +1,24 @@
+import { asEmptySvg, asThemedSvg } from "../../hocs";
+import SavingThrowSelectionBoxSvg from "./SavingThrowSelectionBoxSvg";
+import SavingThrowSelectionSmallBoxSvg from "./SavingThrowSelectionSmallBoxSvg";
+
+const EmptySavingThrowSelectionBoxSvg = asEmptySvg(SavingThrowSelectionBoxSvg);
+const ThemedSavingThrowSelectionBoxSvg = asThemedSvg(
+  SavingThrowSelectionBoxSvg
+);
+const EmptySavingThrowSelectionSmallBoxSvg = asEmptySvg(
+  SavingThrowSelectionSmallBoxSvg
+);
+const ThemedSavingThrowSelectionSmallBoxSvg = asThemedSvg(
+  SavingThrowSelectionSmallBoxSvg
+);
+
+export default SavingThrowSelectionBoxSvg;
+export {
+  SavingThrowSelectionBoxSvg,
+  SavingThrowSelectionSmallBoxSvg,
+  EmptySavingThrowSelectionBoxSvg,
+  ThemedSavingThrowSelectionBoxSvg,
+  EmptySavingThrowSelectionSmallBoxSvg,
+  ThemedSavingThrowSelectionSmallBoxSvg,
+};

ddb_main/tools/js/smartComponents/Svg/boxes/SenseRowBoxSvg/SenseRowBoxSvg.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+
+import BaseSvg from "../../BaseSvg";
+import { InjectedSvgProps } from "../../hocs";
+
+export default class SenseRowBoxSvg extends React.PureComponent<InjectedSvgProps> {
+  render() {
+    const { fillColor, className } = this.props;
+
+    let classNames: Array<string> = ["ddbc-sense-row-box-svg"];
+
+    if (className) {
+      classNames.push(className);
+    }
+
+    return (
+      <BaseSvg className={classNames.join(" ")} viewBox="0 0 241 34">
+        <g id="SenseRowBoxSvg-Page-1_1_">
+          <g
+            id="SenseRowBoxSvg-Sheet_Desktop_Static"
+            transform="translate(-683.000000, -651.000000)"
+          >
+            <path
+              id="SenseRowBoxSvg-Page-1"
+              fill={fillColor}
+              d="M692.1,651.2c-5.7,3.8-9.1,10-9.1,16.8s3.4,13,9.1,16.8l0.3,0.2h22.1l0.3-0.2
+                            c1.2-0.8,2.3-1.7,3.3-2.7h200.2l0.3-0.4c0.7-1.2,3-4.5,4.9-5.4l0.5-0.2l0-16.1l-0.5-0.2c-1.9-0.9-4.2-4.2-4.9-5.4l-0.3-0.4H718.1
+                            c-1-1-2.1-1.9-3.3-2.7l-0.3-0.2h-22.1L692.1,651.2z M685.5,668c0-5.8,2.9-11.2,7.6-14.5h10.3c4.7,2.1,11.1,3.2,14.3,3.8
+                            c2.3,3,3.7,6.8,3.7,10.7v0c0,3.9-1.3,7.7-3.7,10.7c-3.1,0.6-9.5,1.7-14.3,3.8h-10.3C688.4,679.2,685.5,673.8,685.5,668L685.5,668z
+                             M909.3,655.6c3.1,1.1,11.1,4.5,12.9,9.3l0,6.2c-1.9,4.8-9.9,8.2-12.9,9.3H729.9c-0.8-0.7-2.5-1.8-5.7-2.1c0.9-1.5,3-5.5,3-10.3
+                            s-2-8.8-3-10.3c3.2-0.3,4.9-1.4,5.7-2.1H909.3z M723.1,657.8c0.6,1,3.1,5.2,3.1,10.2s-2.5,9.2-3.1,10.2c-0.6,0-1.3,0-2,0
+                            c1.8-3.1,2.9-6.6,2.9-10.3v0c0-3.7-1-7.2-2.8-10.3C721.8,657.8,722.5,657.8,723.1,657.8L723.1,657.8z M713.8,682.5h-5.3
+                            c3.2-1.3,6-2.1,8.3-2.6C715.9,680.8,714.9,681.7,713.8,682.5L713.8,682.5z M720.5,679.3c3.9-0.4,6.3,0.4,7.7,1.1h-8.5
+                            C719.9,680,720.2,679.7,720.5,679.3L720.5,679.3z M917.4,680.4h-5.5c3.3-1.4,8.1-3.9,10.4-7.3v1.9
+                            C920.1,676.3,918.1,679.3,917.4,680.4L917.4,680.4z M922.2,661v1.9c-2.3-3.4-7.1-5.9-10.4-7.3h5.5
+                            C918.1,656.7,920.1,659.7,922.2,661L922.2,661z M728.1,655.6c-1.4,0.7-3.7,1.4-7.7,1.1c-0.3-0.4-0.5-0.7-0.8-1.1H728.1z
+                             M716.8,656.1c-2.4-0.5-5.1-1.3-8.3-2.6h5.3C714.9,654.3,715.9,655.2,716.8,656.1L716.8,656.1z"
+            />
+          </g>
+        </g>
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/boxes/SenseRowBoxSvg/SenseRowSmallBoxSvg/SenseRowSmallBoxSvg.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+import { BaseSvg } from "../../../BaseSvg";
+import { InjectedSvgProps } from "../../../hocs";
+
+export default class SenseRowSmallBoxSvg extends React.PureComponent<InjectedSvgProps> {
+  render() {
+    const { fillColor, className } = this.props;
+
+    let classNames: Array<string> = ["ddbc-sense-row-small-box-svg"];
+
+    if (className) {
+      classNames.push(className);
+    }
+
+    return (
+      <BaseSvg className={classNames.join(" ")} viewBox="0 0 188 33.90015">
+        <g id="SenseRowSmallBoxSvg-Page-1">
+          <g id="SenseRowSmallBoxSvg-Sheet_Desktop_Static">
+            <path
+              id="SenseRowSmallBoxSvg-Page-1-2"
+              fill={fillColor}
+              d="M8.72855.10016A20.33138,20.33138,0,0,0,0,16.90015a20.33152,20.33152,0,0,0,8.72855,16.8l.28774.2h21.198l.28774-.2a20.90539,20.90539,0,0,0,3.1653-2.7H182.53264l.28774-.4c.67144-1.2,2.87756-4.5,4.7-5.4l.47959-.2v-16.1l-.47959-.2c-1.82247-.9-4.02859-4.2-4.7-5.4l-.28774-.4H33.66733A20.9054,20.9054,0,0,0,30.502.2L30.2143,0H9.01635Zm-6.33059,16.8a18.01,18.01,0,0,1,7.28977-14.5h9.87959c4.50817,2.1,10.64692,3.2,13.71632,3.8a18.26332,18.26332,0,0,1,3.549,10.7h0a17.62364,17.62364,0,0,1-3.549,10.7c-2.97345.6-9.11225,1.7-13.71632,3.8H9.68773a18.01,18.01,0,0,1-7.28977-14.5ZM173.9,4.50012c2.97345,1.1,10.64692,4.5,12.3735,9.3v6.2c-1.82247,4.8-9.49595,8.2-12.3735,9.3H44.98575a9.16413,9.16413,0,0,0-5.46736-2.1,21.57693,21.57693,0,0,0,2.87755-10.3,20.52873,20.52873,0,0,0-2.87755-10.3,9.16452,9.16452,0,0,0,5.46736-2.1H173.9Zm-135.43679,2.2a21.34515,21.34515,0,0,1,2.97345,10.2,21.34509,21.34509,0,0,1-2.97345,10.2H36.54489a21.15057,21.15057,0,0,0,2.78165-10.3h0a21.06756,21.06756,0,0,0-2.6857-10.3,5.67381,5.67381,0,0,0,1.82241.19995Zm-8.9204,24.7H24.45919a47.13553,47.13553,0,0,1,7.96122-2.6,24.74945,24.74945,0,0,1-2.87756,2.6Zm6.42655-3.2a12.55865,12.55865,0,0,1,7.38573,1.1H35.20206a7.63546,7.63546,0,0,1,.76734-1.1Zm145.70007,1.1H176.394c3.16529-1.4,7.76936-3.9,9.97553-7.3v1.9c-2.11027,1.29992-4.02864,4.29992-4.7,5.4Zm4.60407-19.4v1.9c-2.20611-3.4-6.81018-5.9-9.97554-7.3h5.27551c.76734,1.1,2.68571,4.1,4.7,5.4Zm-143.01437-5.4c-1.34288.7-3.549,1.4-7.38572,1.1-.28775-.4-.4796-.7-.76734-1.1Zm-10.83876.5a44.52529,44.52529,0,0,1-7.96122-2.6h5.08366a24.74848,24.74848,0,0,1,2.87756,2.6Z"
+            />
+          </g>
+        </g>
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/boxes/SenseRowBoxSvg/SenseRowSmallBoxSvg/index.ts

@@ -0,0 +1,3 @@
+import SenseRowSmallBoxSvg from "./SenseRowSmallBoxSvg";
+
+export default SenseRowSmallBoxSvg;

ddb_main/tools/js/smartComponents/Svg/boxes/SenseRowBoxSvg/index.ts

@@ -0,0 +1,18 @@
+import { asEmptySvg, asThemedSvg } from "../../hocs";
+import SenseRowBoxSvg from "./SenseRowBoxSvg";
+import SenseRowSmallBoxSvg from "./SenseRowSmallBoxSvg";
+
+const EmptySenseRowBoxSvg = asEmptySvg(SenseRowBoxSvg);
+const ThemedSenseRowBoxSvg = asThemedSvg(SenseRowBoxSvg);
+const EmptySenseRowSmallBoxSvg = asEmptySvg(SenseRowSmallBoxSvg);
+const ThemedSenseRowSmallBoxSvg = asThemedSvg(SenseRowSmallBoxSvg);
+
+export default SenseRowBoxSvg;
+export {
+  SenseRowBoxSvg,
+  SenseRowSmallBoxSvg,
+  EmptySenseRowBoxSvg,
+  ThemedSenseRowBoxSvg,
+  EmptySenseRowSmallBoxSvg,
+  ThemedSenseRowSmallBoxSvg,
+};

ddb_main/tools/js/smartComponents/Svg/boxes/themeBoxes/BeveledBoxSvg/BeveledBoxSvg317x89/BeveledBoxSvg317x89.tsx

@@ -0,0 +1,32 @@
+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 BeveledBoxSvg317x89 extends React.PureComponent<Props> {
+  static defaultProps = {
+    className: "",
+  };
+
+  render() {
+    const { theme, className } = this.props;
+
+    return (
+      <BaseSvg className={className} viewBox="0 0 317 88.98">
+        <path
+          fill={theme.backgroundColor}
+          d="M9.35,8,7,10.29a38.78,38.78,0,0,1,.35,6.19l.85,57c0,4.29.29,6.67,3.67,9.37l3.76,2.46c2.56,2,19.53,1.87,9.58,1.87l271.48-.68c3.29,0,5.19-2.23,7.75-4.28l3-2.64c3.38-2.7,1.7-2.4,1.7-6.69L310,17.06c0-4.28-.76-8-4.13-10.71h0a18.9,18.9,0,0,0-10.39-3.64L19.59,2.48A36.38,36.38,0,0,0,9.35,8Z"
+        />
+        <path
+          fill={theme.themeColor}
+          d="M305.89,0H11.1L0,9V79.93l11.1,9H305.89l11.11-9V9ZM294.34,86.5H22.6A24.06,24.06,0,0,1,8.69,78.78V10.24a24.36,24.36,0,0,1,14-7.76H294.4a24.09,24.09,0,0,1,13.91,7.72V78.73a24.36,24.36,0,0,1-14,7.77ZM3.05,21.16a27.77,27.77,0,0,1,4-8.79V76.63c-.37-.53-.76-1-1.09-1.62a27.78,27.78,0,0,1-2.89-7.1ZM310,12.34c.37.54.76,1.05,1.09,1.62A28,28,0,0,1,314,21.07V67.81a27.91,27.91,0,0,1-4,8.8Zm4-2.27v7a26.94,26.94,0,0,0-4-6.77v-.13h-.1a24.53,24.53,0,0,0-11.24-7.68h6ZM12.37,2.48h6A24.53,24.53,0,0,0,7.13,10.16H7v.13a26.94,26.94,0,0,0-4,6.77v-7ZM3.05,78.91v-7a26.81,26.81,0,0,0,4,6.78v.13h.1A24.61,24.61,0,0,0,18.37,86.5h-6ZM304.63,86.5h-6a24.61,24.61,0,0,0,11.24-7.68h.1v-.13a26.81,26.81,0,0,0,4-6.78v7Z"
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/boxes/themeBoxes/BeveledBoxSvg/BeveledBoxSvg517x660/BeveledBoxSvg517x660.tsx

@@ -0,0 +1,32 @@
+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 BeveledBoxSvg517x660 extends React.PureComponent<Props> {
+  static defaultProps = {
+    className: "",
+  };
+
+  render() {
+    const { theme, className } = this.props;
+
+    return (
+      <BaseSvg className={className} viewBox="0 0 517 660">
+        <path
+          fill={theme.backgroundColor}
+          d="M509.2,646.2c-1.7,5.7-12.9,11.7-14.5,11.7H22.5c-1.7,0-12.8-6-14.5-11.7L8.2,19.3V12S16.1,2.3,23.4,1.4H493.80005c7.3.8,15.1,10.6,15.1,10.6v7.3Z"
+        />
+        <path
+          fill={theme.themeColor}
+          d="M505.9,0H11L0,11.5v637L11,660H506l11-11.5V11.5ZM3,12.8l9.2-9.6h5.9A25.8384,25.8384,0,0,0,7,12.9H6.9v.2A36.38553,36.38553,0,0,0,3,21.7ZM3,26.9A42.92655,42.92655,0,0,1,6.9,15.7V644.3a13.90069,13.90069,0,0,1-1.1-2.1,51.50646,51.50646,0,0,1-2.9-9L3,26.9Zm9.2,629.9L3,647.2v-8.9a40.90524,40.90524,0,0,0,3.9,8.6v.2H7a24.86426,24.86426,0,0,0,11.1,9.8H12.2Zm10.1,0A22.56646,22.56646,0,0,1,8.6,647V13A23.74954,23.74954,0,0,1,22.4,3.1H494.6a22.56647,22.56647,0,0,1,13.7,9.8v634a23.74956,23.74956,0,0,1-13.8,9.9Zm491.6-9.6-9.2,9.6h-5.9a24.86437,24.86437,0,0,0,11.1-9.8h.1v-.2a36.38635,36.38635,0,0,0,3.9-8.6l.00006,9Zm0-14.1a41.717,41.717,0,0,1-3.9,11.2V15.7a13.89825,13.89825,0,0,1,1.1,2.1,51.50837,51.50837,0,0,1,2.9,9l-.1,606.3Zm0-611.4a40.9054,40.9054,0,0,0-3.9-8.6v-.2h-.1a24.86433,24.86433,0,0,0-11.1-9.8h5.9l9.2,9.6-.00007,9Z"
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/boxes/themeBoxes/BeveledBoxSvg/BeveledBoxSvg623x660/BeveledBoxSvg623x660.tsx

@@ -0,0 +1,32 @@
+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 BeveledBoxSvg623x660 extends React.PureComponent<Props> {
+  static defaultProps = {
+    className: "",
+  };
+
+  render() {
+    const { theme, className } = this.props;
+
+    return (
+      <BaseSvg className={className} viewBox="0 0 623 660">
+        <path
+          fill={theme.backgroundColor}
+          d="M615.2,646.2c-1.7,5.7-12.9,11.7-14.5,11.7H22.5c-1.7,0-12.8-6-14.5-11.7L8.2,19.3V12S16.1,2.3,23.4,1.4H599.80005c7.3.8,15.1,10.6,15.1,10.6v7.3Z"
+        />
+        <path
+          fill={theme.themeColor}
+          d="M611.9,0H11L0,11.5v637L11,660H612l11-11.5V11.5ZM3,12.8l9.2-9.6h5.9A25.8384,25.8384,0,0,0,7,12.9H6.9v.2A36.38553,36.38553,0,0,0,3,21.7ZM3,26.9A42.92655,42.92655,0,0,1,6.9,15.7V644.3a13.90069,13.90069,0,0,1-1.1-2.1,51.50646,51.50646,0,0,1-2.9-9L3,26.9Zm9.2,629.9L3,647.2v-8.9a40.90524,40.90524,0,0,0,3.9,8.6v.2H7a24.86426,24.86426,0,0,0,11.1,9.8H12.2Zm10.1,0A22.56646,22.56646,0,0,1,8.6,647V13A23.74954,23.74954,0,0,1,22.4,3.1H600.6a22.56647,22.56647,0,0,1,13.7,9.8v634a23.74956,23.74956,0,0,1-13.8,9.9Zm597.6-9.6-9.2,9.6h-5.9a24.86437,24.86437,0,0,0,11.1-9.8h.1v-.2a36.38635,36.38635,0,0,0,3.9-8.6l.00006,9Zm0-14.1a41.717,41.717,0,0,1-3.9,11.2V15.7a13.89825,13.89825,0,0,1,1.1,2.1,51.50837,51.50837,0,0,1,2.9,9l-.1,606.3Zm0-611.4a40.9054,40.9054,0,0,0-3.9-8.6v-.2h-.1a24.86433,24.86433,0,0,0-11.1-9.8h5.9l9.2,9.6-.00007,9Z"
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/boxes/themeBoxes/BeveledBoxSvg/BeveledBoxSvg94x89/BeveledBoxSvg94x89.tsx

@@ -0,0 +1,32 @@
+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 BeveledBoxSvg94x89 extends React.PureComponent<Props> {
+  static defaultProps = {
+    className: "",
+  };
+
+  render() {
+    const { theme, className } = this.props;
+
+    return (
+      <BaseSvg className={className} viewBox="0 0 94 89">
+        <path
+          fill={theme.backgroundColor}
+          d="M87.54,9.45a42.28,42.28,0,0,1-3-3A42.91,42.91,0,0,0,74.21,1H18.36a11,11,0,0,0-1.53.59A4.9,4.9,0,0,1,15.36,2.7,21.09,21.09,0,0,0,6,12.28a5.14,5.14,0,0,1,.12,1.59,5.15,5.15,0,0,1,.24,1.18c1,12.72.57,25.84.4,38.59-.09,6.5,0,13-.05,19.48,0,2-.11,4.08-.22,6.12a17.93,17.93,0,0,0,2.78,2.94A73.22,73.22,0,0,0,16.51,87H78l.07-.06a32.31,32.31,0,0,0,9.31-8.5c.13-6,.65-12,.36-18s.2-11.89.36-17.9c.16-6.53,0-13.11-.17-19.64C87.84,18.57,88.07,13.86,87.54,9.45Z"
+        />
+        <path
+          fill={theme.themeColor}
+          d="M85,0H9L0,9.05V80l9,9H85l9-9V9.05Zm6.55,10.08v7a29.26,29.26,0,0,0-3.24-6.78v-.13h-.08a20.45,20.45,0,0,0-9.13-7.69H84ZM75.6,86.52H18.36a19,19,0,0,1-11.3-7.73V10.25A19.27,19.27,0,0,1,18.4,2.48H75.64a18.94,18.94,0,0,1,11.3,7.73V78.75A19.27,19.27,0,0,1,75.6,86.52ZM2.47,21.18a31.7,31.7,0,0,1,3.24-8.8V76.64c-.3-.53-.62-1-.89-1.62a32.92,32.92,0,0,1-2.35-7.11Zm85.82-8.82c.3.53.62,1,.89,1.62a32.92,32.92,0,0,1,2.35,7.11V67.81a31.64,31.64,0,0,1-3.24,8.81ZM10.05,2.48h4.87a20.45,20.45,0,0,0-9.13,7.69H5.71v.13a29.26,29.26,0,0,0-3.24,6.78v-7ZM2.47,78.92v-7A29.45,29.45,0,0,0,5.71,78.7v.13h.08a20.45,20.45,0,0,0,9.13,7.69H10.05ZM84,86.52H79.08a20.45,20.45,0,0,0,9.13-7.69h.08V78.7a29.45,29.45,0,0,0,3.24-6.78v7Z"
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/boxes/themeBoxes/FancyBoxSvg/FancyBoxSvg230x200/FancyBoxSvg230x200.tsx

@@ -0,0 +1,32 @@
+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 FancyBoxSvg230x200 extends React.PureComponent<Props> {
+  static defaultProps = {
+    className: "",
+  };
+
+  render() {
+    const { theme, className } = this.props;
+
+    return (
+      <BaseSvg className={className} viewBox="0 0 230 200">
+        <path
+          fill={theme.backgroundColor}
+          d="M223.79241,153.59a27.608,27.608,0,0,0-.92665-3c-1.70385-4.27-1.12594-39.26-1.12594-39.26s0-12.67-.57791-30.9c-.34874-11.2,1.56437-25,3.08887-33.94a8.35593,8.35593,0,0,1-2.98922-8.09,11.90127,11.90127,0,0,1,.78717-2.54,28.715,28.715,0,0,1,.25908-3.46c-.81706-5.25-1.116-10.74-3.63688-15.42s-6.82542-7.78-10.6018-11.19c-.0797-.08-.12954-.15-.1993-.23-2.212-1.06-4.59343-1.79-6.75563-3a6.12742,6.12742,0,0,1-.837-.57H30.07152c-.77719.52-1.58428,1-2.34155,1.57a4.15331,4.15331,0,0,1-2.81982.68c-6.20761,5.4-13.023,9-15.67347,17.58a47.09122,47.09122,0,0,0-1.7736,9.43,3.20851,3.20851,0,0,1,.09964.42c.269,1.51.41849,3,.568,4.54,0,0,.12954.91.12954,1a14.64046,14.64046,0,0,0,.548,1.93,4.62021,4.62021,0,0,1-1.46472,4.95,5.5453,5.5453,0,0,1-2.48105,3c1.50457,9,3.328,22.38,2.98922,33.33-.57792,18.23-.57792,30.9-.57792,30.9s.57792,35-1.12593,39.26a27.95546,27.95546,0,0,0-1.08609,3.65A4.77275,4.77275,0,0,1,8.051,157.4c1.30529,4,.40853,8.33-.7772,12.49A4.69483,4.69483,0,0,1,7.473,171c1.13591,12.88,10.08363,21.75,21.42273,26.68A4.7335,4.7335,0,0,1,30.71919,199h165.0244c1.933-.54,3.89595-1,5.78912-1.65a3.81486,3.81486,0,0,1,1.30529-.86,4.58851,4.58851,0,0,1,2.41131-1.31l.74731-.19a3.86723,3.86723,0,0,1,1.05618-.81c1.24551-.62,2.54083-1.18,3.77639-1.85a17.07178,17.07178,0,0,1,1.70385-1.4,3.15462,3.15462,0,0,1,.64765-.36c.0797-.09.15943-.17.22919-.26s.568-.83.568-.83a5.37543,5.37543,0,0,1,2.45115-2.06c.44839-.55.87684-1.12,1.28537-1.69l.09965-.12a37.40281,37.40281,0,0,0,4.703-17.11,3.01265,3.01265,0,0,1,0-.31c-1.64406-3.32-1.2754-6.59-1.5245-10.19A4.68107,4.68107,0,0,1,223.79241,153.59Z"
+        />
+        <path
+          fill={theme.themeColor}
+          d="M224.29061,101.4v2c.76723-12.53,2.63053-42.67,5.50015-52L230,50.72l-.59785-.37a20.84247,20.84247,0,0,1-3.66677-3.08,61.10991,61.10991,0,0,1,2.33159-9.38l.11956-.34L225.70552,10l-1.0761-.34c-2.51093-.78-9.67509-3.91-9.67509-8V0H15.03577V1.68c0,4.05-6.97485,7.12-9.67511,8L4.28455,10,1.81346,37.56l.11957.34a61.71326,61.71326,0,0,1,2.33159,9.36,20.993,20.993,0,0,1-3.66678,3.1L0,50.74l.20925.67c2.86964,9.33,4.723,39.41,5.49019,52v-2C4.982,113.87,3.07889,139.25.20925,148.59L0,149.27l.59784.37a20.84352,20.84352,0,0,1,3.66678,3.08A59.97805,59.97805,0,0,1,1.933,162.1l-.11957.34L4.28455,190l1.07611.34c2.6903.84,9.67511,3.91,9.67511,8V200H214.9543v-1.68c0-4,6.97484-7.12,9.67509-8l1.0761-.34,2.4711-27.58-.11956-.34a61.71415,61.71415,0,0,1-2.33159-9.36,20.99378,20.99378,0,0,1,3.66677-3.1l.59785-.38-.20924-.67c-2.86965-9.33-4.72295-34.65-5.49021-47.19m-3.82619,62.1s.44839,1.05.9964,2.57a28.78706,28.78706,0,0,1-1.3252,12.18c-2.93941,8.6-10.12349,14.89-20.805,18.39H30.56973c-22.91733-7.48-22.718-25.21-22.08035-30.51.58788-1.59,1.05619-2.7,1.08608-2.78A11.8232,11.8232,0,0,0,7.483,153.74c3.36785-18.48,1.654-42,1.57432-43.08V89.42C9.147,88.25,10.86083,64.68,7.493,46.19A12.03425,12.03425,0,0,0,9.52564,36.5s-.44838-1.06-.99641-2.57a28.78762,28.78762,0,0,1,1.3053-12.18C12.82374,13.15,19.958,6.85,30.64944,3.36H199.42033c22.96714,7.48,22.718,25.21,22.08036,30.51-.58788,1.59-1.05619,2.7-1.08608,2.78a11.82318,11.82318,0,0,0,2.09246,9.57c-3.36786,18.48-1.654,42-1.57431,43.08v21.28c-.08967,1.17-1.80349,24.74,1.56437,43.23a12.03425,12.03425,0,0,0-2.04262,9.69m7.38337-112c-1.70385,6-2.98922,17.24-3.98563,27.91a184.99022,184.99022,0,0,1,1.49461-29.93,24.6963,24.6963,0,0,0,2.491,2m-5.69945-14.31c.08968-.2,1.12595-2.66,2.11238-5.71l.50818,5.64a58.84459,58.84459,0,0,0-1.74377,6.47,9.19916,9.19916,0,0,1-.88682-6.35m.4185-24.74,1.23554,13.81a30.597,30.597,0,0,1-.99641,3.62,29.09268,29.09268,0,0,0-1.54442-8.55c-1.99281-5.88-6.85527-13.33-18.35379-18h8.858c1.2455,5.13,7.97124,8.1,10.76117,9.12M17.745,3.36h8.88C9.985,10.1,6.955,22.74,6.705,30c-.38-1.23-.74-2.52-1-3.75l1.24-13.77c2.79-1,9.55-4,10.8-9.12m-13,33.79.51-5.64c1,3,2,5.43,2.07,5.56a9.4,9.4,0,0,1-.83,6.44,59.8691,59.8691,0,0,0-1.73-6.36M4.135,49.5a184.3395,184.3395,0,0,1,1.51,29.94c-1-10.67-2.29-21.88-4-27.91a22.88006,22.88006,0,0,0,2.49-2m-2.49,99c1.71-6,3-17.24,4-27.91a184.33119,184.33119,0,0,1-1.5,29.93,23.41786,23.41786,0,0,0-2.5-2m5.72,14.31c-.09.2-1.13,2.66-2.12,5.71l-.51-5.63a59.48905,59.48905,0,0,0,1.76-6.51,9.17,9.17,0,0,1,.89,6.35m-.42,24.74-1.26-13.81a31.59812,31.59812,0,0,1,1-3.62,29,29,0,0,0,1.55,8.55c2,5.89,6.88,13.33,18.42,18h-8.93c-1.25-5.13-8-8.1-10.8-9.12m204.86064,9.12h-8.84809c16.58021-6.73,19.59932-19.38,19.84842-26.68.37864,1.23.73733,2.52.9964,3.75l-1.23553,13.81c-2.78,1-9.51566,4-10.76117,9.12M224.759,162.86l-.50818,5.63c-.99641-3-1.99281-5.43-2.06257-5.56a9.44012,9.44012,0,0,1,.84695-6.44,60.89563,60.89563,0,0,0,1.7238,6.37m.59785-12.36a184.99938,184.99938,0,0,1-1.50459-29.94c.99641,10.67,2.28178,21.88,3.98563,27.91a22.811,22.811,0,0,0-2.481,2"
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/boxes/themeBoxes/FancyBoxSvg/FancyBoxSvg230x765/FancyBoxSvg230x765.tsx

@@ -0,0 +1,32 @@
+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 FancyBoxSvg230x765 extends React.PureComponent<Props> {
+  static defaultProps = {
+    className: "",
+  };
+
+  render() {
+    const { theme, className } = this.props;
+
+    return (
+      <BaseSvg className={className} viewBox="0 0 230 765">
+        <path
+          fill={theme.backgroundColor}
+          d="M224.09593,719a32.58075,32.58075,0,0,0-1.22463-4.29c-1.70252-4.36-1.12506-582.66-1.12506-582.66s0-30.43-.57746-49c-.35841-11.85,1.71249-26.54,3.26566-35.6a3.99385,3.99385,0,0,1-1.48347-1.64c-1.69258-3.61-2.39947-7.49-.99563-11.35a6.27817,6.27817,0,0,1,.92593-1.69c-.697-3.15-.32855-6.48-1.29431-9.54a42.83292,42.83292,0,0,0-3.52453-7,18.648,18.648,0,0,0-4.97814-6.37c-1.99126-1.48-4.06215-2.5-5.77463-4.27-1.73238-.72-3.47475-1.42-5.17726-2.21l-.39825-.21H29.28142a5.06422,5.06422,0,0,1-3.56435,1.27,5.80144,5.80144,0,0,1-2.24016,1.44l-.3883.12-.18917.05c-.41816.25-.86619.47-1.28436.74a7.30725,7.30725,0,0,0-1.21466.84c.99563-.91-.25887.24-.448.41a5.81329,5.81329,0,0,1-2.81762,1.33,51.94484,51.94484,0,0,0-3.88295,4c-4.56993,5.47-4.80889,13.51-6.21272,20.2a1.8288,1.8288,0,0,1-.10952.4,11.12318,11.12318,0,0,1,.28873,1.52c-.1593-1.2.08961.35.13939.59q.13938.63.29869,1.26a21.06275,21.06275,0,0,0,.87615,2.57c1.06532,2.59-1.16488,5.4-3.47474,6.15a3.19358,3.19358,0,0,1-.69694.14C5.914,55.14,8.204,70.62,7.82564,83c-.57747,18.57-.57747,49-.57747,49s.6372,576.13-.99563,587.33a5.14529,5.14529,0,0,1,3.05658,6,29.22893,29.22893,0,0,1-2.65832,7,4.69483,4.69483,0,0,1,.84628,2.91c-.26882,14.38,12.077,22.59,23.66608,28.18a5.66959,5.66959,0,0,1,.87615.53h166.1703a5.05453,5.05453,0,0,1,2.82758-1.08,4.08858,4.08858,0,0,1,1.583-1.45c.99563-.5,2.061-.93,3.10635-1.37l.63722-.27-.54758.24a6.826,6.826,0,0,0,1.28437-.6c.219-.11.448-.18.677-.27.99562-1,1.85185-1.92,2.39946-2.37,2.89728-2.43,6.20278-4.26,7.82562-7.81a4.37454,4.37454,0,0,1,1.73239-2c.80645-4.9,2.12069-9.72,2.5687-14.7a5.33774,5.33774,0,0,1,.56752-2,1.92248,1.92248,0,0,0-.1095-.51c-.37835-1.74-.8662-3.44-1.27441-5.17A4.80654,4.80654,0,0,1,224.09593,719Z"
+        />
+        <path
+          fill={theme.themeColor}
+          d="M224.29507,654.52v-554c.76662-12.76,2.62847-38.62,5.49586-48.14L230,51.69l-.59738-.38a21.29124,21.29124,0,0,1-3.66391-3.14,63.02656,63.02656,0,0,1,2.32977-9.56l.11947-.34-2.47907-28.1-1.07527-.34c-2.509-.8-9.66754-4-9.66754-8.12V0H15.024V1.71c0,4.13-6.9694,7.26-9.66755,8.12l-1.07528.34L1.812,38.28l.11948.34a64.23307,64.23307,0,0,1,2.32977,9.54A20.93372,20.93372,0,0,1,.59738,51.32L0,51.7l.20908.69C3.07649,61.89,4.97814,87.7,5.695,100.48v554c-.71685,12.75-2.6185,48.62-5.48591,58.13L0,713.3l.59738.38a20.76441,20.76441,0,0,1,3.66391,3.14,61.86478,61.86478,0,0,1-2.32977,9.56l-.11948.35,2.46916,28.1,1.07528.34c2.68819.86,9.66755,4,9.66755,8.12V765H214.966v-1.71c0-4.13,6.9694-7.26,9.66754-8.12l1.07527-.34,2.46916-28.1-.11947-.35a64.23172,64.23172,0,0,1-2.32976-9.54,20.93312,20.93312,0,0,1,3.6639-3.16l.59738-.38-.20907-.69c-2.86741-9.5-4.71927-45.31-5.48592-58.09m-3.82321,73.29s.448,1.07.99563,2.61a29.91379,29.91379,0,0,1-1.32417,12.42c-2.91721,8.76-10.06582,15.16-20.76882,18.74H30.54587c-22.89945-7.63-22.70032-25.7-22.06312-31.09.58742-1.63,1.05537-2.75,1.08524-2.83a12.25228,12.25228,0,0,0-2.09082-9.76c3.36522-18.83,1.65274-42.81,1.57309-43.89V91.12c.08961-1.19,1.80209-25.21-1.56314-44.05a12.45343,12.45343,0,0,0,2.041-9.88s-.448-1.07-.99563-2.61A29.92378,29.92378,0,0,1,9.82685,22.16C12.764,13.4,19.91256,7,30.62552,3.42H199.44421c22.94921,7.63,22.7003,25.7,22.06311,31.09-.58741,1.63-1.05536,2.75-1.08523,2.84a12.23211,12.23211,0,0,0,2.09083,9.75c-3.36523,18.83-1.65275,42.81-1.57308,43.89V673.88c-.0896,1.19-1.80208,25.21,1.56314,44a12.45342,12.45342,0,0,0-2.041,9.88m7.87311-675.3c-1.71,6.15-3,17.57-4,28.45a191.48013,191.48013,0,0,1,1.5-30.51,23.5903,23.5903,0,0,0,2.5,2.06m-5.72-14.58c.09-.21,1.13-2.72,2.12-5.82l.51,5.74a61.15693,61.15693,0,0,0-1.75006,6.6,9.49991,9.49991,0,0,1-.89-6.47m.42-25.21,1.24,14.07a31.5754,31.5754,0,0,1-1,3.69,30.09944,30.09944,0,0,0-1.55-8.72c-2-6-6.88-13.57-18.42-18.34h8.89c1.25,5.24,8,8.26,10.8,9.3M18.17021,3.42h8.84118C10.44414,10.29,7.42738,23.17,7.17848,30.61c-.37834-1.25-.73677-2.56-.99563-3.82L7.41743,12.72c2.7778-1,9.50825-4.06,10.75278-9.3M5.22705,37.85l.50777-5.74c.99563,3.07,1.99125,5.53,2.061,5.66a9.76825,9.76825,0,0,1-.82637,6.56A62.4619,62.4619,0,0,0,5.247,37.85M4.64958,50.44A192.25139,192.25139,0,0,1,6.12311,81c-.99563-10.87-2.28-22.29-3.98251-28.44a21.82554,21.82554,0,0,0,2.47911-2.07m-2.47911,662c1.70252-6.15,2.98688-17.57,3.98251-28.44a192.24174,192.24174,0,0,1-1.49344,30.5,23.50089,23.50089,0,0,0-2.48907-2.06m5.695,14.58c-.0896.21-1.12506,2.72-2.11073,5.82l-.50777-5.74A60.75,60.75,0,0,0,6.9694,720.6a9.53688,9.53688,0,0,1,.8861,6.47m-.41816,25.21L6.18285,738.21a32.23,32.23,0,0,1,.99563-3.69,30.11827,30.11827,0,0,0,1.54322,8.72c1.99126,6,6.84992,13.57,18.33947,18.34h-8.891c-1.24453-5.24-7.965-8.26-10.75278-9.3m204.82758,9.3h-8.88c16.64-6.86,19.67-19.75,19.92-27.19.38,1.26.74,2.56,1,3.82l-1.24,14.07c-2.79,1-9.55,4.06-10.8,9.3m13-34.43-.51,5.74c-1-3.08-2-5.53-2.07-5.66a9.7301,9.7301,0,0,1,.85-6.56,62.23563,62.23563,0,0,0,1.73,6.48m.6-12.59a191.36971,191.36971,0,0,1-1.51-30.51c1,10.88,2.29,22.29,4,28.44a21.90029,21.90029,0,0,0-2.49,2.07"
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/boxes/themeBoxes/FancyBoxSvg/FancyBoxSvg281x200/FancyBoxSvg281x200.tsx

@@ -0,0 +1,32 @@
+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 FancyBoxSvg281x200 extends React.PureComponent<Props> {
+  static defaultProps = {
+    className: "",
+  };
+
+  render() {
+    const { theme, className } = this.props;
+
+    return (
+      <BaseSvg className={className} viewBox="0 0 281 200">
+        <path
+          fill={theme.backgroundColor}
+          d="M274.78,153.59a27.53,27.53,0,0,0-.93-3c-1.71-4.27-1.13-39.26-1.13-39.26s0-12.67-.58-30.9c-.35-11.2,1.57-25,3.1-33.94a8.34,8.34,0,0,1-3-8.09,11.87,11.87,0,0,1,.79-2.54c0-1.16.12-2.31.26-3.46-.82-5.25-1.12-10.74-3.65-15.42S262.79,9.2,259,5.79c-.08-.08-.13-.15-.2-.23-2.22-1.06-4.61-1.79-6.78-3a6.15,6.15,0,0,1-.84-.57h-221c-.78.52-1.59,1-2.35,1.57A4.18,4.18,0,0,1,25,4.24c-6.23,5.4-13.07,9-15.73,17.58a46.94,46.94,0,0,0-1.78,9.43,3.2,3.2,0,0,1,.1.42c.27,1.51.42,3,.57,4.54,0,0,.13.91.13,1a14.6,14.6,0,0,0,.55,1.93,4.61,4.61,0,0,1-1.47,4.95,5.55,5.55,0,0,1-2.49,3c1.51,9,3.34,22.38,3,33.33-.58,18.23-.58,30.9-.58,30.9s.58,35-1.13,39.26a27.88,27.88,0,0,0-1.09,3.65,4.78,4.78,0,0,1,3,3.17c1.31,4,.41,8.33-.78,12.49A4.68,4.68,0,0,1,7.5,171C8.64,183.88,17.62,192.75,29,197.68A4.75,4.75,0,0,1,30.83,199h215.8c1.94-.54,3.91-1,5.81-1.65a3.83,3.83,0,0,1,1.31-.86,4.61,4.61,0,0,1,2.42-1.31l.75-.19a3.88,3.88,0,0,1,1.06-.81c1.25-.62,2.55-1.18,3.79-1.85a17.12,17.12,0,0,1,1.71-1.4,3.17,3.17,0,0,1,.65-.36c.08-.09.16-.17.23-.26s.57-.83.57-.83a5.39,5.39,0,0,1,2.46-2.06c.45-.55.88-1.12,1.29-1.69l.1-.12a37.3,37.3,0,0,0,4.72-17.11,3,3,0,0,1,0-.31c-1.65-3.32-1.28-6.59-1.53-10.19A4.68,4.68,0,0,1,274.78,153.59Z"
+        />
+        <path
+          fill={theme.themeColor}
+          d="M275.28,101.4v2c.77-12.53,2.64-42.67,5.52-52l.21-.68-.6-.37a20.9,20.9,0,0,1-3.68-3.08,60.93,60.93,0,0,1,2.34-9.38l.12-.34L276.7,10l-1.08-.34c-2.52-.78-9.71-3.91-9.71-8V0H15.09V1.68c0,4.05-7,7.12-9.71,8L4.3,10,1.82,37.56l.12.34a61.53,61.53,0,0,1,2.34,9.36A21.05,21.05,0,0,1,.6,50.36l-.6.38.21.67c2.88,9.33,4.74,39.41,5.51,52v-2C5,113.87,3.09,139.25.21,148.59l-.21.68.6.37a20.9,20.9,0,0,1,3.68,3.08,59.8,59.8,0,0,1-2.34,9.38l-.12.34L4.3,190l1.08.34c2.7.84,9.71,3.91,9.71,8V200H265.91v-1.68c0-4,7-7.12,9.71-8l1.08-.34,2.48-27.58-.12-.34a61.53,61.53,0,0,1-2.34-9.36,21.05,21.05,0,0,1,3.68-3.1l.6-.38-.21-.67c-2.88-9.33-4.74-34.65-5.51-47.19m-3.84,62.1s.45,1.05,1,2.57a28.69,28.69,0,0,1-1.33,12.18c-2.95,8.6-10.16,14.89-20.88,18.39H30.68c-23-7.48-22.8-25.21-22.16-30.51.59-1.59,1.06-2.7,1.09-2.78a11.79,11.79,0,0,0-2.1-9.57c3.38-18.48,1.66-42,1.58-43.08V89.42c.09-1.17,1.81-24.74-1.57-43.23A12,12,0,0,0,9.56,36.5s-.45-1.06-1-2.57A28.69,28.69,0,0,1,9.87,21.75c3-8.6,10.16-14.9,20.89-18.39H250.32c23.05,7.48,22.8,25.21,22.16,30.51-.59,1.59-1.06,2.7-1.09,2.78a11.79,11.79,0,0,0,2.1,9.57c-3.38,18.48-1.66,42-1.58,43.08v21.28c-.09,1.17-1.81,24.74,1.57,43.23a12,12,0,0,0-2.05,9.69m7.41-112c-1.71,6-3,17.24-4,27.91a184.33,184.33,0,0,1,1.5-29.93,24.77,24.77,0,0,0,2.5,2m-5.72-14.31c.09-.2,1.13-2.66,2.12-5.71l.51,5.64A58.68,58.68,0,0,0,274,43.57a9.17,9.17,0,0,1-.89-6.35m.42-24.74,1.24,13.81c-.25,1.19-.59,2.43-1,3.62a29,29,0,0,0-1.55-8.55c-2-5.88-6.88-13.33-18.42-18h8.89c1.25,5.13,8,8.1,10.8,9.12M18.25,3.36h8.88C10.49,10.1,7.46,22.74,7.21,30c-.38-1.23-.74-2.52-1-3.75L7.45,12.48c2.79-1,9.55-4,10.8-9.12m-13,33.79.51-5.64c1,3,2,5.43,2.07,5.56A9.4,9.4,0,0,1,7,43.51a59.87,59.87,0,0,0-1.73-6.36M4.64,49.5A184.34,184.34,0,0,1,6.15,79.44c-1-10.67-2.29-21.88-4-27.91a22.88,22.88,0,0,0,2.49-2m-2.49,99c1.71-6,3-17.24,4-27.91a184.33,184.33,0,0,1-1.5,29.93,23.42,23.42,0,0,0-2.5-2m5.72,14.31c-.09.2-1.13,2.66-2.12,5.71l-.51-5.63A59.49,59.49,0,0,0,7,156.43a9.17,9.17,0,0,1,.89,6.35m-.42,24.74L6.21,173.71c.25-1.18.59-2.42,1-3.62a29,29,0,0,0,1.55,8.55c2,5.89,6.88,13.33,18.42,18H18.25c-1.25-5.13-8-8.1-10.8-9.12m255.3,9.12h-8.88c16.64-6.73,19.67-19.38,19.92-26.68.38,1.23.74,2.52,1,3.75l-1.24,13.81c-2.79,1-9.55,4-10.8,9.12m13-33.78-.51,5.63c-1-3-2-5.43-2.07-5.56a9.41,9.41,0,0,1,.85-6.44,60.72,60.72,0,0,0,1.73,6.37m.6-12.36a184.34,184.34,0,0,1-1.51-29.94c1,10.67,2.29,21.88,4,27.91a22.88,22.88,0,0,0-2.49,2"
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/boxes/themeBoxes/FancyBoxSvg/FancyBoxSvg281x765/FancyBoxSvg281x765.tsx

@@ -0,0 +1,32 @@
+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 FancyBoxSvg281x765 extends React.PureComponent<Props> {
+  static defaultProps = {
+    className: "",
+  };
+
+  render() {
+    const { theme, className } = this.props;
+
+    return (
+      <BaseSvg className={className} viewBox="0 0 281 765">
+        <path
+          fill={theme.backgroundColor}
+          d="M275.08,719a32.47,32.47,0,0,0-1.23-4.29c-1.71-4.36-1.13-582.66-1.13-582.66s0-30.43-.58-49c-.36-11.85,1.72-26.54,3.28-35.6a4,4,0,0,1-1.49-1.64c-1.7-3.61-2.41-7.49-1-11.35a6.27,6.27,0,0,1,.93-1.69c-.7-3.15-.33-6.48-1.3-9.54a42.76,42.76,0,0,0-3.54-7,18.66,18.66,0,0,0-5-6.37c-2-1.48-4.08-2.5-5.8-4.27-1.74-.72-3.49-1.42-5.2-2.21l-.4-.21H29.41a5.1,5.1,0,0,1-3.58,1.27,5.83,5.83,0,0,1-2.25,1.44L23.19,6,23,6.05c-.42.25-.87.47-1.29.74a7.34,7.34,0,0,0-1.22.84c1-.91-.26.24-.45.41a5.85,5.85,0,0,1-2.83,1.33,52.05,52.05,0,0,0-3.9,4c-4.59,5.47-4.83,13.51-6.24,20.2,0,.14-.08.27-.11.4a11.08,11.08,0,0,1,.29,1.52c-.16-1.2.09.35.14.59q.14.63.3,1.26a21,21,0,0,0,.88,2.57c1.07,2.59-1.17,5.4-3.49,6.15a3.22,3.22,0,0,1-.7.14C5.94,55.14,8.24,70.62,7.86,83c-.58,18.57-.58,49-.58,49s.64,576.13-1,587.33a5.14,5.14,0,0,1,3.07,6,29.15,29.15,0,0,1-2.67,7,4.68,4.68,0,0,1,.85,2.91c-.27,14.38,12.13,22.59,23.77,28.18a5.7,5.7,0,0,1,.88.53h216.9a5.09,5.09,0,0,1,2.84-1.08,4.1,4.1,0,0,1,1.59-1.45c1-.5,2.07-.93,3.12-1.37l.64-.27-.55.24a6.87,6.87,0,0,0,1.29-.6c.22-.11.45-.18.68-.27,1-1,1.86-1.92,2.41-2.37,2.91-2.43,6.23-4.26,7.86-7.81a4.38,4.38,0,0,1,1.74-2c.81-4.9,2.13-9.72,2.58-14.7a5.32,5.32,0,0,1,.57-2c0-.19-.07-.36-.11-.51-.38-1.74-.87-3.44-1.28-5.17A4.8,4.8,0,0,1,275.08,719Z"
+        />
+        <path
+          fill={theme.themeColor}
+          d="M275.28,654.52v-554c.77-12.76,2.64-38.62,5.52-48.14l.21-.69-.6-.38a21.36,21.36,0,0,1-3.68-3.14,62.8,62.8,0,0,1,2.34-9.56l.12-.34L276.7,10.17l-1.08-.34c-2.52-.8-9.71-4-9.71-8.12V0H15.09V1.71c0,4.13-7,7.26-9.71,8.12l-1.08.34L1.82,38.28l.12.34a64,64,0,0,1,2.34,9.54A21,21,0,0,1,.6,51.32L0,51.7l.21.69C3.09,61.89,5,87.7,5.72,100.48v554C5,667.23,3.09,703.1.21,712.61L0,713.3l.6.38a20.83,20.83,0,0,1,3.68,3.14,61.64,61.64,0,0,1-2.34,9.56l-.12.35,2.48,28.1,1.08.34c2.7.86,9.71,4,9.71,8.12V765H265.91v-1.71c0-4.13,7-7.26,9.71-8.12l1.08-.34,2.48-28.1-.12-.35a64,64,0,0,1-2.34-9.54,21,21,0,0,1,3.68-3.16l.6-.38-.21-.69c-2.88-9.5-4.74-45.31-5.51-58.09m-3.84,73.29s.45,1.07,1,2.61a29.79,29.79,0,0,1-1.33,12.42C268.18,751.6,261,758,250.25,761.58H30.68c-23-7.63-22.8-25.7-22.16-31.09.59-1.63,1.06-2.75,1.09-2.83a12.21,12.21,0,0,0-2.1-9.76c3.38-18.83,1.66-42.81,1.58-43.89V91.12c.09-1.19,1.81-25.21-1.57-44.05a12.41,12.41,0,0,0,2.05-9.88s-.45-1.07-1-2.61A29.8,29.8,0,0,1,9.87,22.16C12.82,13.4,20,7,30.76,3.42H250.32c23.05,7.63,22.8,25.7,22.16,31.09-.59,1.63-1.06,2.75-1.09,2.84a12.19,12.19,0,0,0,2.1,9.75c-3.38,18.83-1.66,42.81-1.58,43.89V673.88c-.09,1.19-1.81,25.21,1.57,44a12.41,12.41,0,0,0-2.05,9.88m7.41-675.3c-1.71,6.15-3,17.57-4,28.45a191.48,191.48,0,0,1,1.5-30.51,23.59,23.59,0,0,0,2.5,2.06m-5.72-14.58c.09-.21,1.13-2.72,2.12-5.82l.51,5.74A61.16,61.16,0,0,0,274,44.4a9.5,9.5,0,0,1-.89-6.47m.42-25.21,1.24,14.07c-.25,1.21-.59,2.48-1,3.69a30.1,30.1,0,0,0-1.55-8.72c-2-6-6.88-13.57-18.42-18.34h8.89c1.25,5.24,8,8.26,10.8,9.3M18.25,3.42h8.88C10.49,10.29,7.46,23.17,7.21,30.61c-.38-1.25-.74-2.56-1-3.82L7.45,12.72c2.79-1,9.55-4.06,10.8-9.3m-13,34.43.51-5.74c1,3.07,2,5.53,2.07,5.66A9.73,9.73,0,0,1,7,44.33a62.24,62.24,0,0,0-1.73-6.48m-.6,12.59A191.42,191.42,0,0,1,6.15,81c-1-10.87-2.29-22.29-4-28.44a21.9,21.9,0,0,0,2.49-2.07M2.15,712.49c1.71-6.15,3-17.57,4-28.44a191.41,191.41,0,0,1-1.5,30.5,23.59,23.59,0,0,0-2.5-2.06m5.72,14.58c-.09.21-1.13,2.72-2.12,5.82l-.51-5.74A60.54,60.54,0,0,0,7,720.6a9.5,9.5,0,0,1,.89,6.47m-.42,25.21L6.21,738.21c.25-1.21.59-2.47,1-3.69a30,30,0,0,0,1.55,8.72c2,6,6.88,13.57,18.42,18.34H18.25c-1.25-5.24-8-8.26-10.8-9.3m255.3,9.3h-8.88c16.64-6.86,19.67-19.75,19.92-27.19.38,1.26.74,2.56,1,3.82l-1.24,14.07c-2.79,1-9.55,4.06-10.8,9.3m13-34.43-.51,5.74c-1-3.08-2-5.53-2.07-5.66a9.73,9.73,0,0,1,.85-6.56,62.24,62.24,0,0,0,1.73,6.48m.6-12.59a191.37,191.37,0,0,1-1.51-30.51c1,10.88,2.29,22.29,4,28.44a21.9,21.9,0,0,0-2.49,2.07"
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/boxes/themeBoxes/FancyBoxSvg/FancyBoxSvg361x765/FancyBoxSvg361x765.tsx

@@ -0,0 +1,32 @@
+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 FancyBoxSvg361x765 extends React.PureComponent<Props> {
+  static defaultProps = {
+    className: "",
+  };
+
+  render() {
+    const { theme, className } = this.props;
+
+    return (
+      <BaseSvg className={className} viewBox="0 0 361.00998 765">
+        <path
+          fill={theme.backgroundColor}
+          d="M355.08,719a32.47245,32.47245,0,0,0-1.23-4.29c-1.71-4.36-1.13-582.66-1.13-582.66s0-30.43-.58-49c-.36-11.85,1.72-26.54,3.28-35.6a4.00019,4.00019,0,0,1-1.49-1.64c-1.7-3.61-2.41-7.49-1-11.35a6.27,6.27,0,0,1,.93-1.69c-.7-3.15-.33-6.48-1.3-9.54a42.76049,42.76049,0,0,0-3.54-7,18.66,18.66,0,0,0-5-6.37c-2-1.48-4.08-2.5-5.8-4.27-1.74-.72-3.49-1.42-5.2-2.21l-.4-.21H29.41a5.1,5.1,0,0,1-3.58,1.27,5.82988,5.82988,0,0,1-2.25,1.44L23.19,6,23,6.05c-.42.25-.87.47-1.29.74a7.34028,7.34028,0,0,0-1.22.84c1-.91-.26.24-.45.41a5.84993,5.84993,0,0,1-2.83,1.33,52.0505,52.0505,0,0,0-3.9,4c-4.59,5.47-4.83,13.51-6.24,20.2a1.82259,1.82259,0,0,1-.11.4,11.08122,11.08122,0,0,1,.29,1.52c-.16-1.2.09.35.14.59q.14.63.3,1.26a21.00051,21.00051,0,0,0,.88,2.57c1.07,2.59-1.17,5.4-3.49,6.15a3.21992,3.21992,0,0,1-.7.14C5.94,55.14,8.24,70.62,7.86,83c-.58,18.57-.58,49-.58,49s.64,576.13-1,587.33a5.14,5.14,0,0,1,3.07,6,29.1505,29.1505,0,0,1-2.67,7,4.68007,4.68007,0,0,1,.85,2.91c-.27,14.38,12.13,22.59,23.77,28.18a5.6994,5.6994,0,0,1,.88.53h296.9a5.08977,5.08977,0,0,1,2.84-1.08,4.1,4.1,0,0,1,1.59-1.45c1-.5,2.07-.93,3.12-1.37l.64-.27-.55.24a6.86962,6.86962,0,0,0,1.29-.6c.22-.11.45-.18.68-.27,1-1,1.86-1.92,2.41-2.37,2.91-2.43,6.23-4.26,7.86-7.81a4.38024,4.38024,0,0,1,1.74-2c.81-4.9,2.13-9.72,2.58-14.7a5.31965,5.31965,0,0,1,.57-2,1.91507,1.91507,0,0,0-.11-.51c-.38-1.74-.87-3.44-1.28-5.17A4.8,4.8,0,0,1,355.08,719Z"
+        />
+        <path
+          fill={theme.themeColor}
+          d="M355.28,654.52v-554c.77-12.76,2.64-38.62,5.52-48.14l.21-.69-.6-.38a21.35956,21.35956,0,0,1-3.68-3.14,62.79784,62.79784,0,0,1,2.34-9.56l.12-.34-2.49-28.1-1.08-.34c-2.52-.8-9.71-4-9.71-8.12V0H15.09V1.71c0,4.13-7,7.26-9.71,8.12l-1.08.34L1.82,38.28l.12.34a64.00013,64.00013,0,0,1,2.34,9.54A20.99964,20.99964,0,0,1,.6,51.32L0,51.7l.21.69C3.09,61.89,5,87.7,5.72,100.48v554C5,667.23,3.09,703.1.21,712.61L0,713.3l.6.38a20.83062,20.83062,0,0,1,3.68,3.14,61.63931,61.63931,0,0,1-2.34,9.56l-.12.35,2.48,28.1,1.08.34c2.7.86,9.71,4,9.71,8.12V765H345.91v-1.71c0-4.13,7-7.26,9.71-8.12l1.08-.34,2.48-28.1-.12-.35a63.99882,63.99882,0,0,1-2.34-9.54,20.99977,20.99977,0,0,1,3.68-3.16l.6-.38-.21-.69c-2.88-9.5-4.74-45.31-5.51-58.09m-3.84,73.29s.45,1.07,1,2.61a29.79032,29.79032,0,0,1-1.33,12.42C348.18,751.6,341,758,330.25,761.58H30.68c-23-7.63-22.8-25.7-22.16-31.09.59-1.63,1.06-2.75,1.09-2.83a12.21,12.21,0,0,0-2.1-9.76c3.38-18.83,1.66-42.81,1.58-43.89V91.12c.09-1.19,1.81-25.21-1.57-44.05a12.41,12.41,0,0,0,2.05-9.88s-.45-1.07-1-2.61a29.8,29.8,0,0,1,1.3-12.42C12.82,13.4,20,7,30.76,3.42H330.32c23.05,7.63,22.8,25.7,22.16,31.09-.59,1.63-1.06,2.75-1.09,2.84a12.18993,12.18993,0,0,0,2.1,9.75c-3.38,18.83-1.66,42.81-1.58,43.89V673.88c-.09,1.19-1.81,25.21,1.57,44a12.41,12.41,0,0,0-2.05,9.88m7.41-675.3c-1.71,6.15-3,17.57-4,28.45a191.48013,191.48013,0,0,1,1.5-30.51,23.5903,23.5903,0,0,0,2.5,2.06m-5.72-14.58c.09-.21,1.13-2.72,2.12-5.82l.51,5.74A61.15693,61.15693,0,0,0,354,44.4a9.49991,9.49991,0,0,1-.89-6.47m.42-25.21,1.24,14.07a31.5754,31.5754,0,0,1-1,3.69,30.09944,30.09944,0,0,0-1.55-8.72c-2-6-6.88-13.57-18.42-18.34h8.89c1.25,5.24,8,8.26,10.8,9.3M18.25,3.42h8.88C10.49,10.29,7.46,23.17,7.21,30.61c-.38-1.25-.74-2.56-1-3.82L7.45,12.72c2.79-1,9.55-4.06,10.8-9.3m-13,34.43.51-5.74c1,3.07,2,5.53,2.07,5.66A9.73,9.73,0,0,1,7,44.33a62.24043,62.24043,0,0,0-1.73-6.48m-.6,12.59A191.41937,191.41937,0,0,1,6.15,81c-1-10.87-2.29-22.29-4-28.44a21.9,21.9,0,0,0,2.49-2.07m-2.49,662c1.71-6.15,3-17.57,4-28.44a191.41024,191.41024,0,0,1-1.5,30.5,23.583,23.583,0,0,0-2.5-2.06m5.72,14.58c-.09.21-1.13,2.72-2.12,5.82l-.51-5.74A60.54042,60.54042,0,0,0,7,720.6a9.5,9.5,0,0,1,.89,6.47m-.42,25.21L6.21,738.21a32.11788,32.11788,0,0,1,1-3.69,29.99971,29.99971,0,0,0,1.55,8.72c2,6,6.88,13.57,18.42,18.34H18.25c-1.25-5.24-8-8.26-10.8-9.3m335.3,9.3h-8.88c16.64-6.86,19.67-19.75,19.92-27.19.38,1.26.74,2.56,1,3.82l-1.24,14.07c-2.79,1-9.55,4.06-10.8,9.3m13-34.43-.51,5.74c-1-3.08-2-5.53-2.07-5.66a9.7301,9.7301,0,0,1,.85-6.56,62.23563,62.23563,0,0,0,1.73,6.48m.6-12.59a191.36971,191.36971,0,0,1-1.51-30.51c1,10.88,2.29,22.29,4,28.44a21.90029,21.90029,0,0,0-2.49,2.07"
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/boxes/themeBoxes/SquaredBoxSvg/SquaredBoxSvg228x338/SquaredBoxSvg228x338.tsx

@@ -0,0 +1,32 @@
+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 SquaredBoxSvg228x338 extends React.PureComponent<Props> {
+  static defaultProps = {
+    className: "",
+  };
+
+  render() {
+    const { theme, className } = this.props;
+
+    return (
+      <BaseSvg className={className} viewBox="0 0 228 338">
+        <polygon
+          fill={theme.backgroundColor}
+          points="8 336 221 336 221 2 8 2 8 336"
+        />
+        <path
+          fill={theme.themeColor}
+          d="M228,6.39V4.47h-6.14V0h-2.68s-1.06,1.54-3.91,1.54H12.73C9.88,1.54,8.82,0,8.82,0H6.14V4.47H0V6.39c2.53,0,2.67,4.14,2.67,4.14V324.91S2.53,329,0,329v2H6.14v7H8.82V3.31H219.18V334.69H8.82V338s1.06-1.54,3.91-1.54H215.27c2.84,0,3.9,1.52,3.91,1.54h2.68v-7H228v-2c-2.53,0-2.67-4.13-2.67-4.13V10.53S225.47,6.39,228,6.39ZM6.27,324.91H4.14V12.12H6.27Zm217.79.48h-2.12V12.61h2.12Z"
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/boxes/themeBoxes/SquaredBoxSvg/SquaredBoxSvg278x338/SquaredBoxSvg278x338.tsx

@@ -0,0 +1,32 @@
+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 SquaredBoxSvg278x338 extends React.PureComponent<Props> {
+  static defaultProps = {
+    className: "",
+  };
+
+  render() {
+    const { theme, className } = this.props;
+
+    return (
+      <BaseSvg className={className} viewBox="0 0 278 338">
+        <polygon
+          fill={theme.backgroundColor}
+          points="8 336 271 336 271 2 8 2 8 336"
+        />
+        <path
+          fill={theme.themeColor}
+          d="M278,6.39V4.47h-6.14V0h-2.68s-1.06,1.54-3.91,1.54H12.73C9.88,1.54,8.82,0,8.82,0H6.14V4.47H0V6.39c2.53,0,2.67,4.14,2.67,4.14V324.91S2.53,329,0,329V331H6.14v7H8.82V3.31H269.18V334.69H8.82V338s1.06-1.54,3.91-1.54H265.27c2.84,0,3.9,1.52,3.91,1.54h2.68v-7H278V329c-2.53,0-2.67-4.13-2.67-4.13V10.53s.14-4.14,2.67-4.14ZM6.27,324.91H4.14V12.12H6.27Zm267.79.48h-2.12V12.61h2.12Z"
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/boxes/themeBoxes/SquaredBoxSvg/SquaredBoxSvg344x95/SquaredBoxSvg344x95.tsx

@@ -0,0 +1,32 @@
+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 SquaredBoxSvg344x95 extends React.PureComponent<Props> {
+  static defaultProps = {
+    className: "",
+  };
+
+  render() {
+    const { theme, className } = this.props;
+
+    return (
+      <BaseSvg className={className} viewBox="0 0 344 95">
+        <polygon
+          fill={theme.backgroundColor}
+          points="8 93 337 93 337 2 8 2 8 93"
+        />
+        <path
+          fill={theme.themeColor}
+          d="M344,6.39V4.47h-6.14V0h-2.68s-1.06,1.54-3.91,1.54H12.73C9.88,1.54,8.82,0,8.82,0H6.14V4.47H0V6.39c2.53,0,2.67,4.14,2.67,4.14V81.91S2.53,86,0,86v2H6.14v7H8.82V3.31H335.18V91.69H8.82V95s1.06-1.54,3.91-1.54H331.27c2.84,0,3.9,1.52,3.91,1.54h2.68V88H344V86c-2.53,0-2.67-4.13-2.67-4.13V10.53S341.47,6.39,344,6.39ZM6.27,81.91H4.14V12.12H6.27Zm333.79.48h-2.12V12.61h2.12Z"
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/boxes/themeBoxes/SquaredBoxSvg/SquaredBoxSvg408x95/SquaredBoxSvg408x95.tsx

@@ -0,0 +1,32 @@
+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 SquaredBoxSvg408x95 extends React.PureComponent<Props> {
+  static defaultProps = {
+    className: "",
+  };
+
+  render() {
+    const { theme, className } = this.props;
+
+    return (
+      <BaseSvg className={className} viewBox="0 0 408 95">
+        <polygon
+          fill={theme.backgroundColor}
+          points="8 93 401 93 401 2 8 2 8 93"
+        />
+        <path
+          fill={theme.themeColor}
+          d="M408,6.39V4.47h-6.14V0h-2.68s-1.06,1.54-3.91,1.54H12.73C9.88,1.54,8.82,0,8.82,0H6.14V4.47H0V6.39c2.53,0,2.67,4.14,2.67,4.14V81.91S2.53,86,0,86v2H6.14v7H8.82V3.31H399.18V91.69H8.82V95s1.06-1.54,3.91-1.54H395.27c2.84,0,3.9,1.52,3.91,1.54h2.68V88H408V86c-2.53,0-2.67-4.13-2.67-4.13V10.53S405.47,6.39,408,6.39ZM6.27,81.91H4.14V12.12H6.27Zm397.79.48h-2.12V12.61h2.12Z"
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/coin/CopperCoinSvg/CopperCoinSvg.tsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../BaseSvg";
+
+export default class CopperCoinSvg extends React.PureComponent<BaseSvgProps> {
+  static defaultProps = {
+    className: "",
+  };
+
+  render() {
+    const { className } = this.props;
+
+    return (
+      <BaseSvg viewBox="0 0 24 24" className={className}>
+        <path
+          clipRule="evenodd"
+          d="m6.41421 3c-.26521 0-.51957.10536-.7071.29289l-2.41422 2.41422c-.18753.18753-.29289.44189-.29289.7071v11.17159c0 .2652.10536.5196.29289.7071l2.41422 2.4142c.18753.1875.44189.2929.7071.2929h11.17159c.2652 0 .5196-.1054.7071-.2929l2.4142-2.4142c.1875-.1875.2929-.4419.2929-.7071v-11.17159c0-.26521-.1054-.51957-.2929-.7071l-2.4142-2.41422c-.1875-.18753-.4419-.29289-.7071-.29289zm5.58579 10.5c.8284 0 1.5-.6716 1.5-1.5s-.6716-1.5-1.5-1.5-1.5.6716-1.5 1.5.6716 1.5 1.5 1.5z"
+          fill="#ab6e57"
+          fillRule="evenodd"
+        />
+        <path
+          d="m10 9c0-1.10457.8954-2 2-2h4c1.1046 0 2 .89543 2 2v1c0 1.1046-.8954 2-2 2h-1c0-1.6569-1.3431-3-3-3-.7684 0-1.4692.28885-2 .76389z"
+          fill="#c2866f"
+        />
+        <path
+          d="m17.7071 7.94975-.6568-.65686c-.1876-.18753-.4419-.29289-.7072-.29289h-8.68625c-.26521 0-.51957.10536-.7071.29289l-.65686.65686c-.18753.18753-.29289.44189-.29289.7071v-1c0-.26521.10536-.51957.29289-.7071l.65686-.65686c.18753-.18753.44189-.29289.7071-.29289h8.68625c.2653 0 .5196.10536.7072.29289l.6568.65686c.1875.18753.2929.44189.2929.7071v1c0-.26521-.1054-.51957-.2929-.7071z"
+          fill="#9f6854"
+        />
+        <path
+          d="m14.9585 12.5c-.238 1.4189-1.472 2.5-2.9585 2.5s-2.72048-1.0811-2.95852-2.5c-.02728.1626-.04148.3296-.04148.5 0 1.6569 1.3431 3 3 3s3-1.3431 3-3c0-.1704-.0142-.3374-.0415-.5z"
+          fill="#9f6854"
+        />
+        <g fill="#c2866f">
+          <path
+            clipRule="evenodd"
+            d="m15 12c0 1.6569-1.3431 3-3 3s-3-1.3431-3-3 1.3431-3 3-3 3 1.3431 3 3zm-3 1.5c.8284 0 1.5-.6716 1.5-1.5s-.6716-1.5-1.5-1.5-1.5.6716-1.5 1.5.6716 1.5 1.5 1.5z"
+            fillRule="evenodd"
+          />
+          <circle cx="12" cy="12" fillOpacity=".5" r="1.5" />
+          <path
+            clipRule="evenodd"
+            d="m6.29289 6.94975c-.18753.18753-.29289.44189-.29289.7071v8.68625c0 .2653.10536.5196.29289.7072l.65686.6568c.18753.1875.44189.2929.7071.2929h8.68625c.2653 0 .5196-.1054.7072-.2929l.6568-.6568c.1875-.1876.2929-.4419.2929-.7072v-8.68625c0-.26521-.1054-.51957-.2929-.7071l-.6568-.65686c-.1876-.18753-.4419-.29289-.7072-.29289h-8.68625c-.26521 0-.51957.10536-.7071.29289zm.12132-3.94975c-.26521 0-.51957.10536-.7071.29289l-2.41422 2.41422c-.18753.18753-.29289.44189-.29289.7071v11.17159c0 .2652.10536.5196.29289.7071l2.41422 2.4142c.18753.1875.44189.2929.7071.2929h11.17159c.2652 0 .5196-.1054.7071-.2929l2.4142-2.4142c.1875-.1875.2929-.4419.2929-.7071v-11.17159c0-.26521-.1054-.51957-.2929-.7071l-2.4142-2.41422c-.1875-.18753-.4419-.29289-.7071-.29289z"
+            fillRule="evenodd"
+          />
+        </g>
+        <path
+          clipRule="evenodd"
+          d="m10.125 4.5c0-.48325.3918-.875.875-.875h6.0858c.4973 0 .9742.19754 1.3258.54917l1.4142 1.41422c.3517.35163.5492.82854.5492 1.32582v3.58579c0 .4832-.3918.875-.875.875s-.875-.3918-.875-.875v-3.58579c0-.03315-.0132-.06494-.0366-.08838l-1.4142-1.41422c-.0235-.02344-.0553-.03661-.0884-.03661h-6.0858c-.4832 0-.875-.39175-.875-.875z"
+          fill="#e6a58c"
+          fillRule="evenodd"
+        />
+        <circle cx="8.375" cy="4.47501" fill="#e5a48c" r=".875" />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/coin/ElectrumCoinSvg/ElectrumCoinSvg.tsx

@@ -0,0 +1,60 @@
+import * as React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../BaseSvg";
+
+export default class ElectrumCoinSvg extends React.PureComponent<BaseSvgProps> {
+  static defaultProps = {
+    className: "",
+  };
+
+  render() {
+    const { className } = this.props;
+
+    return (
+      <BaseSvg viewBox="0 0 24 24" className={className}>
+        <path
+          clipRule="evenodd"
+          d="m7.32745 3c-.42911 0-.84556.13554-1.16546.42156-1.20722 1.07938-4.16199 4.17139-4.16199 8.57844 0 4.407 2.95477 7.4991 4.16199 8.5784.3199.2861.73635.4216 1.16547.4216h9.34504c.4292 0 .8456-.1355 1.1655-.4216 1.2072-1.0793 4.162-4.1714 4.162-8.5784 0-4.40704-2.9548-7.49906-4.162-8.57844-.3199-.28602-.7363-.42156-1.1655-.42156zm4.67255 14.25c.6904 0 1.25-.5596 1.25-1.25s-.5596-1.25-1.25-1.25-1.25.5596-1.25 1.25.5596 1.25 1.25 1.25z"
+          fill="#8a9eac"
+          fillRule="evenodd"
+        />
+        <path
+          d="m7.03711 16.9284c.34586.3796.84504.5716 1.35854.5716h7.20875c.5134 0 1.0126-.192 1.3585-.5716 1.0485-1.1506 2.3552-3.0498 2.5198-5.4284.0114.1644.0173.3311.0173.5 0 2.6125-1.4162 4.6983-2.5371 5.9284-.3459.3796-.845.5716-1.3585.5716h-7.20875c-.5135 0-1.01268-.192-1.35854-.5716-1.12095-1.2301-2.53711-3.3159-2.53711-5.9284 0-.1689.00592-.3356.01729-.5.16458 2.3786 1.47133 4.2778 2.51982 5.4284z"
+          fill="#6d7f8c"
+        />
+        <path
+          d="m14.7246 16.375c-.1829 1.3414-1.333 2.375-2.7246 2.375s-2.54175-1.0336-2.72465-2.375c-.01671.1226-.02535.2478-.02535.375 0 1.5188 1.2312 2.75 2.75 2.75s2.75-1.2312 2.75-2.75c0-.1272-.0086-.2524-.0254-.375z"
+          fill="#6d7f8c"
+        />
+        <path
+          clipRule="evenodd"
+          d="m14.75 16c0 1.5188-1.2312 2.75-2.75 2.75s-2.75-1.2312-2.75-2.75 1.2312-2.75 2.75-2.75 2.75 1.2312 2.75 2.75zm-2.75 1.25c.6904 0 1.25-.5596 1.25-1.25s-.5596-1.25-1.25-1.25-1.25.5596-1.25 1.25.5596 1.25 1.25 1.25z"
+          fill="#7c8d99"
+          fillRule="evenodd"
+        />
+        <circle cx="12" cy="16" fill="#8697a3" fillOpacity=".5" r="1.25" />
+        <path
+          clipRule="evenodd"
+          d="m8.39565 5.5c-.5135 0-1.01268.19203-1.35854.57159-1.12095 1.23016-2.53711 3.31587-2.53711 5.92841 0 2.6125 1.41616 4.6983 2.53711 5.9284.34586.3796.84504.5716 1.35854.5716h7.20875c.5135 0 1.0126-.192 1.3585-.5716 1.1209-1.2301 2.5371-3.3159 2.5371-5.9284 0-2.61254-1.4162-4.69825-2.5371-5.92841-.3459-.37956-.8451-.57159-1.3585-.57159zm-1.0682-2.5c-.42911 0-.84556.13554-1.16546.42156-1.20722 1.07938-4.16199 4.17139-4.16199 8.57844 0 4.407 2.95477 7.4991 4.16199 8.5784.3199.2861.73635.4216 1.16547.4216h9.34504c.4292 0 .8456-.1355 1.1655-.4216 1.2072-1.0793 4.162-4.1714 4.162-8.5784 0-4.40704-2.9548-7.49906-4.162-8.57844-.3199-.28602-.7363-.42156-1.1655-.42156z"
+          fill="#7c8d99"
+          fillRule="evenodd"
+        />
+        <path
+          d="m9.75003 9.13768c.23943.5003.03173 1.10552-.46392 1.35192l-1.62912.8597c-.49566.2463-1.09156.0404-1.33099-.4599s-.03173-1.10555.46392-1.35187l1.62912-.85971c.49566-.24633 1.09156-.04044 1.33099.45986z"
+          fill="#7c8d99"
+        />
+        <path
+          d="m10 8c0-1.10457.8954-2 2-2h3c1.6569 0 3 1.34315 3 3v1c0 1.1046-.8954 2-2 2h-4c-1.1046 0-2-.8954-2-2z"
+          fill="#9fb3c0"
+        />
+        <path
+          clipRule="evenodd"
+          d="m11.8507 3.53389c-.4997.02746-.8798.4106-.8489.85577.0308.44514.4608.78374.9604.75632l.0092-.00049.0303-.00157c.027-.00137.0673-.00336.1193-.00575.1039-.0048.6517.00093.6517.00093l1.3785-.02395s1.0448.01588 1.4768.05451c.2164.01934.3931.04327.5261.07005.1131.02275.1591.04034.1591.04034.8407.47238 1.3364 1.1415 1.969 2.07148.3071.45151.5537.87024.7234 1.17593.0846.15247.1495.27584.1927.35991.0216.04201.0377.07413.0481.09509l.0113.02287.0023.00484c.1974.40967.7304.60007 1.1904.42444.4601-.1757.6733-.65045.4761-1.0604l-.0008-.00162-.0014-.0028-.0044-.00908-.0156-.03164c-.0133-.02693-.0326-.06533-.0576-.1139-.0499-.0971-.1225-.23511-.216-.40351-.1865-.33604-.4578-.797-.7981-1.29727-.6596-.96959-1.3422-1.92667-2.5695-2.61007-.2296-.12785-.4955-.197-.7095-.24006-.2307-.04644-.4866-.07863-.7446-.10169-.5167-.04619-1.6535-.06257-1.6535-.06257s-1.0706.0119-1.4533.02517c-.1918.00665-.5643-.0051-.6749 0-.0553.00255-.0988.00469-.1288.00622l-.0347.00179z"
+          fill="#9fb3c0"
+          fillRule="evenodd"
+        />
+        <circle cx="9.75" cy="4.25" fill="#8a9eac" r=".75" />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/coin/GoldCoinSvg/GoldCoinSvg.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../BaseSvg";
+
+export default class GoldCoinSvg extends React.PureComponent<BaseSvgProps> {
+  static defaultProps = {
+    className: "",
+  };
+
+  render() {
+    const { className } = this.props;
+
+    return (
+      <BaseSvg viewBox="0 0 24 24" className={className}>
+        <path
+          d="m4 4.5c0-.27615.22385-.5.5-.5h15c.2761 0 .5.22385.5.5v1c0 .27615-.2239.5-.5.5 0 0-2 2.32653-2 6 0 3.6735 2 6 2 6 .2761 0 .5.2239.5.5v1c0 .2761-.2239.5-.5.5h-15c-.27615 0-.5-.2239-.5-.5v-1c0-.2761.22385-.5.5-.5 0 0 2-1.8673 2-6 0-4.13265-2-6-2-6-.27615 0-.5-.22385-.5-.5z"
+          fill="#dd970e"
+        />
+        <path
+          d="m9.99993 12c0-.6216-.03345-1.2128-.09414-1.7735l4.11311 1.0283c-.002.04-.0039.0802-.0056.1205l-4.07254 2.0363c.03844-.4517.05917-.9222.05917-1.4116z"
+          fill="#eca825"
+        />
+        <path
+          d="m9.79321 14.6034 4.21509-2.1076c.0516 1.5192.3351 2.8657.7046 4.0042h-5.36158c.17845-.5819.33016-1.214.44189-1.8966z"
+          fill="#eca825"
+        />
+        <path
+          d="m14.0189 11.2548-4.11311-1.0283c-.10897-1.00676-.30575-1.91549-.55447-2.7265h5.36158c-.3492 1.07581-.6215 2.3373-.694 3.7548z"
+          fill="#ffb72c"
+        />
+        <path
+          d="m6.26343 5.5h11.54557c-.1777.29323-.3708.64106-.5624 1.0399-.0702.14609-.1404.29953-.2097.4601h-9.99142c-.10248-.24281-.20889-.47037-.31689-.68278-.15543-.30571-.31301-.57786-.46516-.81722z"
+          fill="#eca825"
+        />
+        <path
+          clipRule="evenodd"
+          d="m17.8089 5.5h-11.54556c.15215.23936.30973.51151.46516.81722.66607 1.31004 1.2715 3.19617 1.2715 5.68278 0 2.4866-.60543 4.3727-1.2715 5.6828-.15543.3057-.31301.5778-.46516.8172h11.54556c-.1777-.2932-.3708-.6411-.5624-1.0399-.6216-1.2941-1.2465-3.1649-1.2465-5.4601 0-2.29517.6249-4.166 1.2465-5.4601.1916-.39884.3847-.74667.5624-1.0399zm2.6911 12.5s-2-2.3265-2-6c0-3.67347 2-6 2-6 .2761 0 .5-.22385.5-.5v-2c0-.27615-.2239-.5-.5-.5h-17c-.27615 0-.5.22385-.5.5v2c0 .27615.22385.5.5.5 0 0 2 1.86735 2 6 0 4.1327-2 6-2 6-.27615 0-.5.2239-.5.5v2c0 .2761.22385.5.5.5h17c.2761 0 .5-.2239.5-.5v-2c0-.2761-.2239-.5-.5-.5z"
+          fill="#c78727"
+          fillRule="evenodd"
+        />
+        <path
+          d="m8 4.25c0-.41421.33579-.75.75-.75h11c.4142 0 .75.33579.75.75s-.3358.75-.75.75h-11c-.41421 0-.75-.33579-.75-.75z"
+          fill="#ffb72c"
+        />
+        <circle cx="6.75" cy="4.25" fill="#eca825" r=".75" />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/coin/PlatinumCoinSvg/PlatinumCoinSvg.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../BaseSvg";
+
+export default class PlatinumCoinSvg extends React.PureComponent<BaseSvgProps> {
+  static defaultProps = {
+    className: "",
+  };
+
+  render() {
+    const { className } = this.props;
+
+    return (
+      <BaseSvg viewBox="0 0 24 24" className={className}>
+        <path
+          d="m9.95662 3.30735c.16878-.19532.41258-.30735.66898-.30735h2.7488c.2564 0 .5002.11203.669.30735l5.7367 6.63816c.1418.16409.2199.37469.2199.59269v2.9236c0 .218-.0781.4286-.2199.5927l-5.7367 6.6382c-.1688.1953-.4126.3073-.669.3073h-2.7488c-.2564 0-.5002-.112-.66899-.3073l-5.73668-6.6382c-.14178-.1641-.21993-.3747-.21993-.5927v-2.9236c0-.218.07815-.4286.21993-.59269z"
+          fill="#b5b5b5"
+        />
+        <path
+          d="m10.8356 18.1585-5.08818-5.8151c-.1595-.1823-.24742-.4162-.24742-.6585v1c0 .2423.08792.4762.24742.6585l5.08818 5.8151c.1899.217.4642.3415.7526.3415h.8236c.2884 0 .5627-.1245.7526-.3415l5.0882-5.8151c.1595-.1823.2474-.4162.2474-.6585v-1c0 .2423-.0879.4762-.2474.6585l-5.0882 5.8151c-.1899.217-.4642.3415-.7526.3415h-.8236c-.2884 0-.5627-.1245-.7526-.3415z"
+          fill="#a3a3a3"
+        />
+        <path
+          clipRule="evenodd"
+          d="m11.5882 4.5c-.2884 0-.5627.12448-.7526.34149l-5.08818 5.81511c-.1595.1823-.24742.4163-.24742.6585v1.3698c0 .2422.08792.4762.24742.6585l5.08818 5.8151c.1899.217.4642.3415.7526.3415h.8236c.2884 0 .5627-.1245.7526-.3415l5.0882-5.8151c.1595-.1823.2474-.4163.2474-.6585v-1.3698c0-.2423-.0879-.4762-.2474-.6585l-5.0882-5.8151c-.1899-.21702-.4642-.3415-.7526-.3415zm-1.1344-2.5c-.2884 0-.56272.12448-.75261.34149l-6.45377 7.37574c-.1595.18229-.24742.41627-.24742.65847v3.2486c0 .2422.08792.4762.24742.6585l6.45377 7.3757c.18989.217.46421.3415.75261.3415h3.0924c.2884 0 .5627-.1245.7526-.3415l6.4538-7.3757c.1595-.1823.2474-.4163.2474-.6585v-3.2486c0-.2422-.0879-.47618-.2474-.65847l-6.4538-7.37573c-.1899-.21702-.4642-.3415-.7526-.3415z"
+          fill="#949494"
+          fillRule="evenodd"
+        />
+        <path
+          d="m10.2929 9.12132c-.39053-.39052-.39053-1.02369 0-1.41421l1.2463-1.41422c.3905-.39052 1.0237-.39052 1.4142 0l3.6679 4.29291c.3905.3905.3905 1.0237 0 1.4142l-1.4142 1.4142c-.3905.3905-1.0237.3905-1.4142 0z"
+          fill="#dcdcdc"
+        />
+        <path
+          d="m8.34764 10.2442c.42128-.36072 1.05967-.31674 1.42589.0983l1.25207 1.3511c.3662.415.3216 1.0439-.0997 1.4046-.4213.3608-1.05969.3168-1.4259-.0982l-1.25207-1.3511c-.36621-.415-.32157-1.0439.09971-1.4047z"
+          fill="#ccc"
+        />
+        <path
+          d="m11.9999 2.47315c.3413-.26295 1.5-.37315 2 .02685l4 4.5c.3662.37344.3216.93932-.0997 1.26394s-1.0597.28505-1.4259-.08838c0 0-2.74-3.30604-3.5744-3.98415-.3682-.29925-.7065-.1553-.9997-.45432-.2932-.29901-.2416-1.00098.0997-1.26394z"
+          fill="#ccc"
+        />
+        <circle cx="18.6001" cy="9.25" fill="#b5b5b5" r="1" />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/coin/SilverCoinSvg/SilverCoinSvg.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../BaseSvg";
+
+export default class SilverCoinSvg extends React.PureComponent<BaseSvgProps> {
+  static defaultProps = {
+    className: "",
+  };
+
+  render() {
+    const { className } = this.props;
+
+    return (
+      <BaseSvg viewBox="0 0 24 24" className={className}>
+        <path
+          clipRule="evenodd"
+          d="m2.49372 21c-.3779 0-.61528-.4138-.42875-.7473l9.50623-16.99932c.189-.33784.6686-.33784.8576 0l9.5062 16.99932c.1866.3335-.0508.7473-.4287.7473zm9.50628-5c.6904 0 1.25-.5596 1.25-1.25s-.5596-1.25-1.25-1.25-1.25.5596-1.25 1.25.5596 1.25 1.25 1.25z"
+          fill="#a59e98"
+          fillRule="evenodd"
+        />
+        <path
+          clipRule="evenodd"
+          d="m2.06497 20.2527c-.18653.3335.05085.7473.42875.7473h19.01258c.3779 0 .6153-.4138.4287-.7473l-9.5062-16.99932c-.189-.33784-.6686-.33784-.8576 0zm10.15323-12.30742c-.0954-.17063-.341-.17063-.4364 0l-5.69332 10.18092c-.09319.1666.02727.372.21819.372h11.38663c.191 0 .3114-.2054.2182-.372z"
+          fill="#99938d"
+          fillRule="evenodd"
+        />
+        <path
+          d="m12 17.25c1.3807 0 2.5-1.1193 2.5-2.5 0-.1714-.0173-.3388-.0501-.5005.1919.3752.3001.8002.3001 1.2505 0 1.5188-1.2312 2.75-2.75 2.75s-2.75-1.2312-2.75-2.75c0-.4503.10824-.8753.30011-1.2505-.03286.1617-.05011.3291-.05011.5005 0 1.3807 1.1193 2.5 2.5 2.5z"
+          fill="#857d76"
+        />
+        <circle cx="12" cy="14.75" fill="#a59e98" fillOpacity=".5" r="1.25" />
+        <path
+          d="m11.7819 7.94529c.0954-.17064.341-.17064.4364 0l5.6933 10.18091c.0932.1666-.0273.372-.2182.372h-.133l-5.3421-9.55291c-.0954-.17064-.341-.17064-.4364 0l-5.34216 9.55291h-.13298c-.19093 0-.31139-.2054-.2182-.372z"
+          fill="#b5ada7"
+        />
+        <path
+          d="m11.6724 11.3586c-.2371-.4211.1496-1.88397.5707-2.12106.1389-.07818.7171.84136.9542 1.26246l.5249 1.1414c.2371.4211.0879.9547-.3331 1.1918-.4211.2371-.9547.0879-1.1918-.3332z"
+          fill="#b5ada7"
+        />
+        <path
+          d="m11.4292 5.62102c-.2371-.42109.1496-1.88394.5707-2.12103.1389-.07818.7172.84137.9542 1.26246l3.0664 5.44615c.2371.4211.0879.9546-.3332 1.1917s-.9547.0879-1.1917-.3332z"
+          fill="#cec6bf"
+        />
+      </BaseSvg>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Svg/conditions/BlindedSvg/BlindedSvg.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../BaseSvg";
+
+const BlindedSvg: React.FunctionComponent<BaseSvgProps> = ({
+  className = "",
+  fillColor,
+  secondaryFillColor,
+}) => {
+  return (
+    <BaseSvg className={className} viewBox="0 0 20 20">
+      <path
+        fill={fillColor}
+        d="M9.55,3.05A10.27,10.27,0,0,0,0,9.47a10.33,10.33,0,0,0,19.12,0A10.29,10.29,0,0,0,9.55,3.05Zm0,11.3A8.67,8.67,0,0,1,1.71,9.47a8.75,8.75,0,0,1,15.69,0A8.71,8.71,0,0,1,9.55,14.35Z"
+      />
+      <line
+        stroke={fillColor}
+        fill={fillColor}
+        x1="18.17"
+        y1="0.71"
+        x2="1.17"
+        y2="17.79"
+      />
+      <path
+        fill={fillColor}
+        d="M8,10.56a1,1,0,0,1-.11.16,2.4,2.4,0,0,1-.48.44,1.16,1.16,0,0,1-.24.15A3.4,3.4,0,0,0,12.36,7C11,8.3,9.34,9.25,8,10.56Z"
+      />
+    </BaseSvg>
+  );
+};
+
+export default BlindedSvg;

ddb_main/tools/js/smartComponents/Svg/conditions/BlindedSvg/index.ts

@@ -0,0 +1,11 @@
+import { asDarkSvg } from "../../hocs/asDarkSvg";
+import { asGraySvg } from "../../hocs/asGraySvg";
+import { asLightSvg } from "../../hocs/asLightSvg";
+import BlindedSvg from "./BlindedSvg";
+
+const LightBlindedSvg = asLightSvg(BlindedSvg);
+const DarkBlindedSvg = asDarkSvg(BlindedSvg);
+const GrayBlindedSvg = asGraySvg(BlindedSvg);
+
+export default BlindedSvg;
+export { BlindedSvg, LightBlindedSvg, DarkBlindedSvg, GrayBlindedSvg };

ddb_main/tools/js/smartComponents/Svg/conditions/CharmedSvg/CharmedSvg.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../BaseSvg";
+
+const CharmedSvg: React.FunctionComponent<BaseSvgProps> = ({
+  className = "",
+  fillColor,
+  secondaryFillColor,
+}) => {
+  return (
+    <BaseSvg className={className} viewBox="0 0 24 24">
+      <path
+        fill={fillColor}
+        d="M15.7,12.4c0,0-0.1,0-0.1,0c0-0.1,0-0.1,0-0.2c0-4.3-3.2-7.8-7.2-7.8s-7.2,3.5-7.2,7.8c0,0.1,0,0.1,0,0.2    c-0.1,0-0.1,0-0.2,0c-0.6,0.2-0.8,1.1-0.5,2.1c0.3,1,1,1.6,1.6,1.5c0.2,0.4,0.4,0.8,0.7,1.1c0.5,2.9,2.8,5.8,5.6,5.8    c2.8,0,5.1-3,5.6-5.8c0.3-0.3,0.5-0.7,0.7-1.1c0.6,0.1,1.2-0.5,1.5-1.5C16.5,13.5,16.3,12.6,15.7,12.4z"
+      />
+
+      <path
+        fill={secondaryFillColor}
+        d="M8.4,1.3c0.3-0.3,0.6-0.6,1-0.8c1.3-0.5,2.8,0.3,3,1.5c0.1,0.5,0,1-0.4,1.5c-1.2,1.6-2.4,3.1-3.6,4.7    c0,0,0,0-0.1,0.1c0,0-0.1-0.1-0.1-0.1C7.2,6.7,6,5.1,4.8,3.6C3.9,2.4,4.5,0.7,6.1,0.4C7,0.3,7.7,0.5,8.3,1.2    C8.4,1.2,8.4,1.2,8.4,1.3z"
+      />
+      <path
+        fill={fillColor}
+        d="M8.4,8.8L8.2,8.5C8.1,8.5,8.1,8.4,8.1,8.4L7.3,7.5C6.4,6.3,5.4,5,4.5,3.8C4,3.2,3.9,2.3,4.2,1.6    c0.3-0.8,1-1.3,1.9-1.5C7-0.1,7.8,0.1,8.4,0.7C8.7,0.5,9,0.3,9.3,0.2c0.7-0.3,1.6-0.2,2.3,0.2c0.6,0.4,1.1,1,1.2,1.6    c0.1,0.6,0,1.2-0.5,1.8L8.4,8.8z M6.6,0.8c-0.1,0-0.3,0-0.4,0c-0.6,0.1-1.1,0.5-1.3,1C4.7,2.4,4.8,2.9,5.1,3.4C6,4.6,7,5.8,7.9,7    l0.5,0.7l3.4-4.4c0.3-0.4,0.4-0.8,0.3-1.2C12,1.7,11.7,1.3,11.3,1c-0.5-0.3-1.1-0.3-1.7-0.1C9.2,1,9,1.2,8.7,1.5L8.5,1.9L8,1.4    C7.6,1,7.2,0.8,6.6,0.8z"
+      />
+      <path
+        fill={secondaryFillColor}
+        d="M2.4,5.4C2.5,5.2,2.7,5.1,2.9,5c0.6-0.2,1.4,0.1,1.5,0.8c0,0.3,0,0.5-0.2,0.7C3.6,7.3,3,8,2.4,8.8    c0,0,0,0,0,0c0,0,0,0,0,0C1.8,8,1.2,7.3,0.6,6.5C0.1,5.9,0.5,5.1,1.2,5C1.7,4.9,2,5,2.4,5.4C2.3,5.3,2.4,5.4,2.4,5.4z"
+      />
+      <path
+        fill={fillColor}
+        d="M2.4,9.4L2,9L0.3,6.8C0,6.4-0.1,5.9,0.1,5.5C0.3,5,0.7,4.7,1.2,4.6c0.5-0.1,0.9,0,1.2,0.3    c0.1-0.1,0.2-0.2,0.4-0.2c0.4-0.2,0.9-0.1,1.3,0.1C4.4,5,4.7,5.3,4.8,5.7c0.1,0.4,0,0.7-0.3,1L2.4,9.4z M1.5,5.3    c-0.1,0-0.1,0-0.2,0c-0.2,0-0.4,0.2-0.5,0.4c-0.1,0.2,0,0.4,0.1,0.6l1.5,1.9l1.5-2C4,6.1,4,6,4,5.8c0-0.2-0.1-0.3-0.3-0.4    C3.5,5.3,3.2,5.3,3,5.4C2.9,5.4,2.8,5.5,2.7,5.6L2.4,6L2.1,5.6C1.9,5.4,1.7,5.3,1.5,5.3z"
+      />
+
+      <path
+        fill={secondaryFillColor}
+        d="M14.4,5.4c0.1-0.2,0.3-0.3,0.5-0.4c0.6-0.2,1.4,0.1,1.5,0.8c0,0.3,0,0.5-0.2,0.7C15.6,7.3,15,8,14.4,8.8    c0,0,0,0,0,0c0,0,0,0,0,0c-0.6-0.8-1.2-1.5-1.8-2.3c-0.5-0.6-0.1-1.4,0.6-1.6C13.7,4.9,14,5,14.4,5.4C14.3,5.3,14.4,5.4,14.4,5.4z    "
+      />
+      <path
+        fill={fillColor}
+        d="M14.4,9.4L14,9l-1.8-2.3c-0.3-0.4-0.4-0.9-0.2-1.3c0.2-0.4,0.6-0.8,1.1-0.9c0.5-0.1,0.9,0,1.2,0.3    c0.1-0.1,0.2-0.2,0.4-0.2c0.4-0.2,0.9-0.1,1.3,0.1c0.4,0.2,0.6,0.6,0.7,0.9c0.1,0.4,0,0.7-0.3,1L14.4,9.4z M13.5,5.3    c-0.1,0-0.1,0-0.2,0c-0.2,0-0.4,0.2-0.5,0.4c-0.1,0.2,0,0.4,0.1,0.6l1.5,1.9l1.5-2C16,6.1,16,6,16,5.8c0-0.2-0.1-0.3-0.3-0.4    c-0.2-0.1-0.5-0.1-0.7-0.1c-0.1,0.1-0.3,0.1-0.3,0.3L14.4,6l-0.3-0.4C13.9,5.4,13.7,5.3,13.5,5.3z"
+      />
+
+      <path
+        fill={secondaryFillColor}
+        d="M11.2,15.1L11.2,15.1c0,1-0.2,1.7-0.7,2.2S9.4,18,8.6,18S7,17.7,6.4,17.2s-0.8-1.3-0.8-2.3v-2.5     c0-1,0.3-1.8,0.8-2.3s1.2-0.8,2-0.8c0.9,0,1.6,0.2,2.1,0.7s0.7,1.2,0.7,2.2l0,0H9.6c0-0.6-0.1-1-0.2-1.2s-0.5-0.4-0.9-0.4     c-0.4,0-0.7,0.1-0.9,0.4c-0.2,0.3-0.3,0.7-0.3,1.3v2.6c0,0.6,0.1,1,0.3,1.3c0.2,0.3,0.5,0.4,0.9,0.4c0.4,0,0.7-0.1,0.8-0.3     s0.2-0.6,0.2-1.2H11.2z"
+      />
+    </BaseSvg>
+  );
+};
+
+export default CharmedSvg;

ddb_main/tools/js/smartComponents/Svg/conditions/CharmedSvg/index.ts

@@ -0,0 +1,11 @@
+import { asDarkSvg } from "../../hocs/asDarkSvg";
+import { asGraySvg } from "../../hocs/asGraySvg";
+import { asLightSvg } from "../../hocs/asLightSvg";
+import CharmedSvg from "./CharmedSvg";
+
+const LightCharmedSvg = asLightSvg(CharmedSvg);
+const DarkCharmedSvg = asDarkSvg(CharmedSvg);
+const GrayCharmedSvg = asGraySvg(CharmedSvg);
+
+export default CharmedSvg;
+export { CharmedSvg, LightCharmedSvg, DarkCharmedSvg, GrayCharmedSvg };

ddb_main/tools/js/smartComponents/Svg/conditions/DeafenedSvg/DeafenedSvg.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../BaseSvg";
+
+const DeafenedSvg: React.FunctionComponent<BaseSvgProps> = ({
+  className = "",
+  fillColor,
+  secondaryFillColor,
+}) => {
+  return (
+    <BaseSvg className={className} viewBox="0 0 24 24">
+      <path
+        fill={secondaryFillColor}
+        d="M11.28,6.07a1.92,1.92,0,0,0-3-.39,1.56,1.56,0,0,0-.19,2,5.88,5.88,0,0,0,.81.86l2.44-2.43Z"
+      />
+      <path
+        fill={secondaryFillColor}
+        d="M7.66,18.36a2.41,2.41,0,0,0,2.79-1.12,9.25,9.25,0,0,0,.74-1.64,16.06,16.06,0,0,1,2.34-4.43A8.22,8.22,0,0,0,15,8.09l-9,9A2.18,2.18,0,0,0,7.66,18.36Z"
+      />
+      <path
+        fill={fillColor}
+        d="M14.53,2.62A6.29,6.29,0,0,0,11.64,1c-.46-.12-.93-.18-1.4-.27H9.5C8.91.82,8.32.9,7.74,1A5.09,5.09,0,0,0,4,5.18c0,.36,0,.66.45.71S5,5.69,5,5.33a3.82,3.82,0,0,1,3-3.24,9.8,9.8,0,0,1,2.52-.2,4.73,4.73,0,0,1,3,1.31C13.9,3,14.22,2.82,14.53,2.62Z"
+      />
+      <path
+        fill={fillColor}
+        d="M15.24,8.09,15,8.35a8.44,8.44,0,0,1-1.44,2.83,16.06,16.06,0,0,0-2.34,4.43,9.25,9.25,0,0,1-.74,1.64,2.41,2.41,0,0,1-2.79,1.12,2.21,2.21,0,0,1-1.31-.8l-.86.67a3.14,3.14,0,0,0,1.68,1.12A3.42,3.42,0,0,0,11,18.27a8.1,8.1,0,0,0,1.14-2.19,17.26,17.26,0,0,1,2.29-4.34,12.38,12.38,0,0,0,1.14-1.85,6.8,6.8,0,0,0,.69-2.48A8.9,8.9,0,0,1,15.24,8.09Z"
+      />
+      <path
+        fill={fillColor}
+        d="M8.25,5.68a1.92,1.92,0,0,1,2.62-.1c.28-.21.57-.41.86-.6a2.66,2.66,0,0,0-.79-.59,3.24,3.24,0,0,0-3.65.71C6.47,6,6.16,7.88,7.17,8.77l.07.07a8.05,8.05,0,0,1,1-.89c-.07-.08-.14-.15-.2-.23A1.56,1.56,0,0,1,8.25,5.68Z"
+      />
+      <path
+        fill={fillColor}
+        d="M12.51,6.38a3.11,3.11,0,0,1,0,1.09,6.75,6.75,0,0,1-.62,1.83c-.14.3-.5.5-.76.75l-.22-.13a7.26,7.26,0,0,1,.41-1.16,2.55,2.55,0,0,0,.32-1.51L9.56,9.3a2,2,0,0,1,.33,1.8,9,9,0,0,1-.37,1.06l5.65-5.62a5,5,0,0,0-.65-2.18Z"
+      />
+      <path
+        fill={fillColor}
+        d="M20.33,1.42,18.92,0l-3.6,3.58a6,6,0,0,1,.83,2Z"
+      />
+      <path
+        fill={fillColor}
+        d="M6.78,13.72a1.2,1.2,0,0,1-.29-1.36L0,18.82l1.41,1.42,3.4-3.38a3.73,3.73,0,0,1-.07-.41c0-.17-.07-.4,0-.52a.94.94,0,0,1,.56-.42c.14,0,.31.24.45.41L7.66,14A1.13,1.13,0,0,1,6.78,13.72Z"
+      />
+      <path
+        fill={fillColor}
+        d="M5.3,15.51a.94.94,0,0,0-.56.42c-.08.12,0,.34,0,.52a3.73,3.73,0,0,0,.07.41l.94-.94C5.61,15.75,5.44,15.5,5.3,15.51Z"
+      />
+      <path
+        fill={fillColor}
+        d="M15.18,6.54l1-1a6,6,0,0,0-.83-2l-.79.79A5,5,0,0,1,15.18,6.54Z"
+      />
+      <path
+        fill={fillColor}
+        d="M6.78,13.72a1.13,1.13,0,0,0,.89.29l1.86-1.85A9,9,0,0,0,9.9,11.1a2,2,0,0,0-.33-1.8L6.49,12.37A1.2,1.2,0,0,0,6.78,13.72Z"
+      />
+      <path
+        fill={fillColor}
+        d="M11.33,8.75a7.26,7.26,0,0,0-.41,1.16l.22.13c.26-.25.62-.45.76-.75a6.75,6.75,0,0,0,.62-1.83,3.11,3.11,0,0,0,0-1.09l-.86.85A2.55,2.55,0,0,1,11.33,8.75Z"
+      />
+      <path
+        fill={secondaryFillColor}
+        d="M14.53,4.36l.79-.79a5.93,5.93,0,0,0-.61-.8l-.77.76A5,5,0,0,1,14.53,4.36Z"
+      />
+    </BaseSvg>
+  );
+};
+
+export default DeafenedSvg;

ddb_main/tools/js/smartComponents/Svg/conditions/DeafenedSvg/index.ts

@@ -0,0 +1,11 @@
+import { asDarkSvg } from "../../hocs/asDarkSvg";
+import { asGraySvg } from "../../hocs/asGraySvg";
+import { asLightSvg } from "../../hocs/asLightSvg";
+import DeafenedSvg from "./DeafenedSvg";
+
+const LightDeafenedSvg = asLightSvg(DeafenedSvg);
+const DarkDeafenedSvg = asDarkSvg(DeafenedSvg);
+const GrayDeafenedSvg = asGraySvg(DeafenedSvg);
+
+export default DeafenedSvg;
+export { DeafenedSvg, LightDeafenedSvg, DarkDeafenedSvg, GrayDeafenedSvg };

ddb_main/tools/js/smartComponents/Svg/conditions/ExhaustedSvg/ExhaustedSvg.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../BaseSvg";
+
+const ExhaustedSvg: React.FunctionComponent<BaseSvgProps> = ({
+  className = "",
+  fillColor,
+  secondaryFillColor,
+}) => {
+  return (
+    <BaseSvg className={className} viewBox="0 0 20 10">
+      <path
+        fill={fillColor}
+        d="M1.65,0A1.66,1.66,0,0,0,.45.45c-.81.81-.51,2.44.68,3.63S4,5.58,4.77,4.77A1.47,1.47,0,0,0,5,4.38a13.15,13.15,0,0,1-3.57,7.83H4.12C5.67,10.7,6.64,7.72,7.25,5.76a6.78,6.78,0,0,1,4.22,2l-3.85,4.5h11.2l-1.15-2.08h-5.2C16.62,7,14,3.55,10.55,2.05V2a10.23,10.23,0,0,0-1.47-.49h0a5.93,5.93,0,0,0-4.41.32,4.35,4.35,0,0,0-.59-.73A3.59,3.59,0,0,0,1.65,0Z"
+      />
+    </BaseSvg>
+  );
+};
+
+export default ExhaustedSvg;

ddb_main/tools/js/smartComponents/Svg/conditions/ExhaustedSvg/index.ts

@@ -0,0 +1,11 @@
+import { asDarkSvg } from "../../hocs/asDarkSvg";
+import { asGraySvg } from "../../hocs/asGraySvg";
+import { asLightSvg } from "../../hocs/asLightSvg";
+import ExhaustedSvg from "./ExhaustedSvg";
+
+const LightExhaustedSvg = asLightSvg(ExhaustedSvg);
+const DarkExhaustedSvg = asDarkSvg(ExhaustedSvg);
+const GrayExhaustedSvg = asGraySvg(ExhaustedSvg);
+
+export default ExhaustedSvg;
+export { ExhaustedSvg, LightExhaustedSvg, DarkExhaustedSvg, GrayExhaustedSvg };

ddb_main/tools/js/smartComponents/Svg/conditions/FrightenedSvg/FrightenedSvg.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../BaseSvg";
+
+const FrightenedSvg: React.FunctionComponent<BaseSvgProps> = ({
+  className = "",
+  fillColor,
+  secondaryFillColor,
+}) => {
+  return (
+    <BaseSvg className={className} viewBox="0 0 20 20">
+      <ellipse fill={fillColor} cx="8" cy="7.8" rx="7.2" ry="7.8" />
+      <path
+        fill={fillColor}
+        d="M13.7,11.7c0,3.1-2.5,6.9-5.7,6.9s-5.7-3.8-5.7-6.9S4.8,7.2,8,7.2S13.7,8.5,13.7,11.7z"
+      />
+      <path
+        fill={secondaryFillColor}
+        d="M6.4,8.9c0,0.9-0.7,1-1.5,1s-1.5-0.1-1.5-1S4,7.4,4.9,7.4S6.4,8.1,6.4,8.9z"
+      />
+      <path
+        fill={secondaryFillColor}
+        d="M10.3,14.5c0,1.3-1,0-2.3,0s-2.3,1.3-2.3,0s1-2.3,2.3-2.3S10.3,13.2,10.3,14.5z"
+      />
+      <path
+        fill={secondaryFillColor}
+        d="M12.4,8.9c0,0.9-0.7,1-1.5,1c-0.9,0-1.5-0.1-1.5-1s0.7-1.5,1.5-1.5C11.8,7.4,12.4,8.1,12.4,8.9z"
+      />
+      <ellipse
+        transform="matrix(0.2904 -0.9569 0.9569 0.2904 1.0307 21.1022)"
+        fill={fillColor}
+        cx="14.7"
+        cy="9.9"
+        rx="1.9"
+        ry="1.1"
+      />
+      <ellipse
+        transform="matrix(0.9569 -0.2904 0.2904 0.9569 -2.812 0.7634)"
+        fill={fillColor}
+        cx="1.2"
+        cy="9.9"
+        rx="1.1"
+        ry="1.9"
+      />
+    </BaseSvg>
+  );
+};
+
+export default FrightenedSvg;

ddb_main/tools/js/smartComponents/Svg/conditions/FrightenedSvg/index.ts

@@ -0,0 +1,16 @@
+import { asDarkSvg } from "../../hocs/asDarkSvg";
+import { asGraySvg } from "../../hocs/asGraySvg";
+import { asLightSvg } from "../../hocs/asLightSvg";
+import FrightenedSvg from "./FrightenedSvg";
+
+const LightFrightenedSvg = asLightSvg(FrightenedSvg);
+const DarkFrightenedSvg = asDarkSvg(FrightenedSvg);
+const GrayFrightenedSvg = asGraySvg(FrightenedSvg);
+
+export default FrightenedSvg;
+export {
+  FrightenedSvg,
+  LightFrightenedSvg,
+  DarkFrightenedSvg,
+  GrayFrightenedSvg,
+};

ddb_main/tools/js/smartComponents/Svg/conditions/GrappledSvg/GrappledSvg.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../BaseSvg";
+
+const GrappledSvg: React.FunctionComponent<BaseSvgProps> = ({
+  className = "",
+  fillColor,
+  secondaryFillColor,
+}) => {
+  return (
+    <BaseSvg className={className} viewBox="0 0 20 20">
+      <path
+        fill={fillColor}
+        d="M10.5,9.5c0,0,1.5-1.6,0.9-2.6c-0.6-1-2.3-2.6-2.3-3S8.6,0.3,8.1,0S7.2,1.4,7.6,2.8S6.6,2.9,6.4,2.6   C6.2,2.2,4.6,0,4.1,0.4s0,1.1,0.4,1.6c0.4,0.5,1.6,2,1.3,2.2c-0.2,0.2-4-3.1-4.5-2.7s-0.5,1,0.1,1.4s3.9,2.2,3.9,2.6S4.3,5.8,3,5.4   C1.7,4.9,0,5,0,5.5s5.4,2.2,6.1,2.7c0.8,0.4,0.3,1-0.2,1.1C5.5,9.5,4,10.6,3.7,11.3C3.4,12,4,12.4,4.4,12c0.3-0.4,2.4-1.6,3-1.4   C8,10.9,9.3,10.5,10.5,9.5z"
+      />
+      <polygon
+        fill={fillColor}
+        points="11.4,6.9 21.6,13.7 18.5,17.3 8.5,9.2  "
+      />
+      <path
+        fill={fillColor}
+        stroke={secondaryFillColor}
+        d="M10.6,19.1c-1.2-0.9-2.5-1.8-3.7-2.8c0.1-0.1,1.5-2,1.5-2.1c0.5-0.6,1-1.2,1.4-1.9c0-0.1,0.1-0.2,0.1-0.3   c-0.2-1.2-0.4-2.4-0.5-3.6c-0.1-0.6,0.2-1,0.8-1c0.4-0.1,0.8-0.1,1.2-0.2c0.1,0,0.1,0,0.2,0c0.2,0,0.2,0.2,0.2,0.3   c-0.1,0.2-0.3,0.5-0.4,0.7c-0.1,0.2-0.1,0.3,0,0.3c0.1,0.1,0.2,0,0.3-0.1c0.3-0.4,0.6-0.9,0.9-1.3c0.5-0.6,1.3-0.5,1.6,0.2   c0.1,0.2,0.2,0.2,0.3,0.1c0.1,0,0.1-0.1,0.2-0.1c0.3-0.1,0.7-0.1,1,0.1c0.3,0.2,0.4,0.5,0.3,0.9c0,0.3,0,0.4,0.3,0.4   c0.7,0.1,0.9,0.7,0.7,1.3c-0.1,0.2,0,0.4,0.2,0.6c0.1,0.1,0.1,0.1,0.2,0.2c0.3,0.3,0.5,0.7,0.2,1.1c-0.6,0.9-1.4,1.6-2.4,2.1   c-0.4,0.2-0.8,0.2-1.2,0.2c-0.1,0-0.2,0-0.3,0.1c-0.6,0.9-1.3,1.9-2,2.8C11.9,17.3,10.6,19.1,10.6,19.1z"
+      />
+    </BaseSvg>
+  );
+};
+
+export default GrappledSvg;

ddb_main/tools/js/smartComponents/Svg/conditions/GrappledSvg/index.ts

@@ -0,0 +1,11 @@
+import { asDarkSvg } from "../../hocs/asDarkSvg";
+import { asGraySvg } from "../../hocs/asGraySvg";
+import { asLightSvg } from "../../hocs/asLightSvg";
+import GrappledSvg from "./GrappledSvg";
+
+const LightGrappledSvg = asLightSvg(GrappledSvg);
+const DarkGrappledSvg = asDarkSvg(GrappledSvg);
+const GrayGrappledSvg = asGraySvg(GrappledSvg);
+
+export default GrappledSvg;
+export { GrappledSvg, LightGrappledSvg, DarkGrappledSvg, GrayGrappledSvg };

ddb_main/tools/js/smartComponents/Svg/conditions/IncapacitatedSvg/IncapacitatedSvg.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../BaseSvg";
+
+const IncapacitatedSvg: React.FunctionComponent<BaseSvgProps> = ({
+  className = "",
+  fillColor,
+  secondaryFillColor,
+}) => {
+  return (
+    <BaseSvg className={className} viewBox="0 0 24 24">
+      <path
+        fill={fillColor}
+        d="M17.8,13.1c0,0-0.1,0-0.1,0c0-0.1,0-0.1,0-0.2c0-4.3-3.2-7.8-7.2-7.8s-7.2,3.5-7.2,7.8c0,0.1,0,0.1,0,0.2    c-0.1,0-0.1,0-0.2,0c-0.6,0.2-0.8,1.1-0.5,2.1c0.3,1,1,1.6,1.6,1.5c0.2,0.4,0.4,0.8,0.7,1.1c0.5,2.9,2.8,5.8,5.6,5.8    c2.8,0,5.1-3,5.6-5.8c0.3-0.3,0.5-0.7,0.7-1.1c0.6,0.1,1.2-0.5,1.5-1.5C18.5,14.2,18.3,13.2,17.8,13.1z"
+      />
+      <path fill={secondaryFillColor} d="M11.3,18.9H9.6v-8.5h1.7V18.9z" />
+      <path
+        fill={fillColor}
+        d="M8.8,10.8c-1.5,0-3-0.1-4.6-0.2c-0.2,0-0.4-0.2-0.3-0.4c0-0.2,0.2-0.4,0.4-0.3c4.9,0.5,8.9,0.2,13.9-0.8    c1-0.2,1.5-0.5,1.6-0.8c0.1-0.2-0.1-0.5-0.3-0.7c-0.3-0.2-0.7-0.4-1.1-0.6c-0.4-0.2-0.9-0.4-1.4-0.5c-0.2,0.2-0.5,0.5-0.8,0.7    c-1.1,0.7-2.4,0.9-3.6,1.1C9,8.6,5.2,8.4,1.6,7.5C1,7.4,0.2,7.1,0,6.4c-0.1-0.4,0.2-0.9,0.7-1.2C1,5,1.5,4.9,1.9,4.8    c0.9-0.2,1.8-0.3,2.7-0.4C4.4,4.3,4.2,4.2,4,4.1C3.7,3.9,3.4,3.8,3.1,3.5C2.8,3.2,2.7,2.7,3,2.3c0.3-0.4,0.8-0.5,1.3-0.6    c3.2-0.3,6.4-0.2,9.5,0.3c0.2,0,0.5,0.1,0.7,0.1c0,0,0,0-0.1,0c-0.5-0.3-1-0.5-1.6-0.6c-2-0.5-4.2-0.8-6.3-0.8c0,0,0,0,0,0    c-0.2,0-0.4-0.2-0.4-0.4C6.2,0.1,6.4,0,6.7,0c2.2,0,4.3,0.3,6.4,0.8c0.6,0.2,1.2,0.4,1.8,0.7c0.5,0.3,0.8,0.7,1,1.1    c0.9,0.4,1.5,0.9,1.8,1.5c0.2,0.5,0.2,1.2-0.1,1.7c0.4,0.1,0.8,0.3,1.2,0.5C19.2,6.5,19.6,6.7,20,7c0.5,0.4,0.7,0.9,0.5,1.4    c-0.2,0.9-1.4,1.2-2.2,1.4C14.9,10.5,11.9,10.8,8.8,10.8z M6.5,5C5,5,3.5,5.2,2,5.5c-0.3,0.1-0.7,0.2-1,0.3    C0.9,5.9,0.7,6.1,0.8,6.2c0,0.1,0.2,0.3,1,0.6C5.3,7.6,9,7.9,12.6,7.4c1.1-0.1,2.4-0.4,3.3-0.9c0.1-0.1,0.3-0.2,0.4-0.3    c-1-0.3-2.1-0.6-3.2-0.8c-0.3,0-0.6,0.1-0.9,0.1C10.3,5.6,8.3,5.4,6.5,5z M14.6,4.9c0.7,0.2,1.5,0.4,2.2,0.6    c0.2-0.4,0.3-0.8,0.1-1.2c-0.2-0.4-0.5-0.7-1-0.9C15.8,4,15.3,4.6,14.6,4.9C14.6,4.9,14.6,4.9,14.6,4.9z M7.8,4.2    c1.8,0,3.5,0.2,5.2,0.5c0.4-0.1,0.8-0.2,1.2-0.4c0.6-0.3,0.9-0.7,0.9-1.1c-0.4-0.1-0.9-0.3-1.5-0.4c-3.1-0.5-6.2-0.6-9.3-0.3    c-0.4,0-0.7,0.1-0.8,0.2c0,0.1,0,0.2,0.1,0.3c0.1,0.2,0.4,0.3,0.6,0.4C5,3.7,5.8,4,6.6,4.2C7,4.2,7.4,4.2,7.8,4.2z"
+      />
+    </BaseSvg>
+  );
+};
+
+export default IncapacitatedSvg;

ddb_main/tools/js/smartComponents/Svg/conditions/IncapacitatedSvg/index.ts

@@ -0,0 +1,16 @@
+import { asDarkSvg } from "../../hocs/asDarkSvg";
+import { asGraySvg } from "../../hocs/asGraySvg";
+import { asLightSvg } from "../../hocs/asLightSvg";
+import IncapacitatedSvg from "./IncapacitatedSvg";
+
+const LightIncapacitatedSvg = asLightSvg(IncapacitatedSvg);
+const DarkIncapacitatedSvg = asDarkSvg(IncapacitatedSvg);
+const GrayIncapacitatedSvg = asGraySvg(IncapacitatedSvg);
+
+export default IncapacitatedSvg;
+export {
+  IncapacitatedSvg,
+  LightIncapacitatedSvg,
+  DarkIncapacitatedSvg,
+  GrayIncapacitatedSvg,
+};

ddb_main/tools/js/smartComponents/Svg/conditions/InvisibleSvg/InvisibleSvg.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../BaseSvg";
+
+const InvisibleSvg: React.FunctionComponent<BaseSvgProps> = ({
+  className = "",
+  fillColor,
+  secondaryFillColor,
+}) => {
+  return (
+    <BaseSvg className={className} viewBox="0 0 24 24">
+      <path
+        fill={secondaryFillColor}
+        d="M19.63,17.73c-.92-.29-4.07-1.39-5-1.71a1.56,1.56,0,0,1-1.13-1.32,1.4,1.4,0,0,1-.06-.29,1,1,0,0,1,.08-.38c.17-.34.39-.66.53-1,.2-.52.35-1.05.52-1.59.28.11.47-.06.6-.3A5.48,5.48,0,0,0,16,8.26a.6.6,0,0,0-.16-.42c-.24-.18-.19-.37-.14-.59s0-.23.06-.35a8.3,8.3,0,0,0,0-3A2.23,2.23,0,0,0,14.7,2.22a4,4,0,0,1-1-.83A4.73,4.73,0,0,0,9.15.13,6.11,6.11,0,0,0,5.81,2.29,5.08,5.08,0,0,0,4.5,6a12.15,12.15,0,0,0,.21,1.34c-.5.12-.65.32-.65.85a1.94,1.94,0,0,0,0,.25,6.85,6.85,0,0,0,.62,2.15,3.7,3.7,0,0,0,.43.56.84.84,0,0,1,.19.3,6.81,6.81,0,0,0,1.07,2.7.39.39,0,0,1,.07.27c-.07.31-.16.61-.25.92a.61.61,0,0,1-.38.39,31.27,31.27,0,0,1-5,1.77c-.25.06-.49.17-.79.28.32.44.66,1.36,1,1.75H18.37Z"
+      />
+      <path
+        fill={fillColor}
+        d="M6.7,1.4l-.12.1h0a10,10,0,0,0-.72.74H5.6l0,0h0l-.21.3.83.56A4.79,4.79,0,0,1,6.57,3a8.53,8.53,0,0,1,.8-.8L6.7,1.4ZM4.59,4.7q0,.13,0,.26h0a5.42,5.42,0,0,0,0,.89h0V6h0a4.83,4.83,0,0,0,.06.5h0v0h0v0h0v.06l1-.18a4.36,4.36,0,0,1-.08-.57,4.34,4.34,0,0,1,.08-1l-1-.2Zm.46,3.58-1,.05V8.4h0a7.1,7.1,0,0,0,.43,1.73h0l0,.09.92-.39a6,6,0,0,1-.41-1.59ZM6.4,11.77l-1,.25q.06.22.12.43h0v0h0v0h.07a6.51,6.51,0,0,0,.27.63h0v0H6l.18.31.85-.53a5.57,5.57,0,0,1-.65-1.56Zm-.48,3.88,0,0h0l0,0H5.63l-1.09.46H4.39l-.31.12.36.93c.58-.22,1.18-.47,1.78-.74l.21-.11-.51-.86ZM2.19,17.08q-.66.21-1.34.38H.54l-.26.1.36.93A3.65,3.65,0,0,1,1,18.44c.48-.12,1-.26,1.45-.41l-.3-1ZM2.7,18.5H1v.63H1v0l-.19.12a2,2,0,0,0,.18.25H2.7v-1Zm4,0h-2v1h2v-1Zm4,0h-2v1h2v-1Zm4,0h-2v1h2v-1Zm3.67,0v.6h0v-.6H16.7v1h1.69l.17-.24-.19-.14v-.6ZM17.59,17l-.33.95,1.76.6.31-.44.15-.46-.56-.19L17.59,17Zm-3.68-1.5-.74.67a2.76,2.76,0,0,0,1.15.75l1.05.37.33-.94-.28-.1L14.66,16h-.15l0,0h0a1.64,1.64,0,0,1-.54-.39Zm-.39-4,0,.05c-.11.36-.22.71-.34,1a4,4,0,0,1-.25.48l0,.07.87.5v0h0l0,0a5.34,5.34,0,0,0,.28-.53h.06c.13-.34.23-.68.34-1h0v0l-1-.29ZM15,8.45A4.12,4.12,0,0,1,14.64,10l.92.38A5.15,5.15,0,0,0,16,8.51H15Zm.88-3.87-1,.09a8,8,0,0,1-.07,1.77l1,.13c0-.23.06-.46.07-.69h0v0h0v0h0v0h0v0h0v0h0v0h0v0h0v0h0v0h0v0h0V5h0V5h0V5h0v0h0v0h0v0h0q0-.15,0-.3ZM13.73,1.44,13,2.15a4.69,4.69,0,0,0,1.23,1,.62.62,0,0,1,.22.19l.8-.6-.12-.15h-.72a4.84,4.84,0,0,1-.7-.61ZM10.35,0A6,6,0,0,0,9.21.12H9.14a4.71,4.71,0,0,0-.52.14H8.56L8.4.35l.36.93a3.73,3.73,0,0,1,.6-.17,5.07,5.07,0,0,1,1-.11h0a3.65,3.65,0,0,1,1.36.25l.37-.93A4.57,4.57,0,0,0,10.57,0h-.22Z"
+      />
+    </BaseSvg>
+  );
+};
+
+export default InvisibleSvg;

ddb_main/tools/js/smartComponents/Svg/conditions/InvisibleSvg/index.ts

@@ -0,0 +1,11 @@
+import { asDarkSvg } from "../../hocs/asDarkSvg";
+import { asGraySvg } from "../../hocs/asGraySvg";
+import { asLightSvg } from "../../hocs/asLightSvg";
+import InvisibleSvg from "./InvisibleSvg";
+
+const LightInvisibleSvg = asLightSvg(InvisibleSvg);
+const DarkInvisibleSvg = asDarkSvg(InvisibleSvg);
+const GrayInvisibleSvg = asGraySvg(InvisibleSvg);
+
+export default InvisibleSvg;
+export { InvisibleSvg, LightInvisibleSvg, DarkInvisibleSvg, GrayInvisibleSvg };

ddb_main/tools/js/smartComponents/Svg/conditions/ParalyzedSvg/ParalyzedSvg.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../BaseSvg";
+
+const ParalyzedSvg: React.FunctionComponent<BaseSvgProps> = ({
+  className = "",
+  fillColor,
+  secondaryFillColor,
+}) => {
+  return (
+    <BaseSvg className={className} viewBox="0 0 24 24">
+      <path
+        fill={fillColor}
+        d="M17.5,12.6c0,0-0.1,0-0.1,0c0-0.1,0-0.1,0-0.2c0-4.3-3.2-7.8-7.2-7.8S3,8.1,3,12.4c0,0.1,0,0.1,0,0.2   c-0.1,0-0.1,0-0.2,0c-0.6,0.2-0.8,1.1-0.5,2.1c0.3,1,1,1.6,1.6,1.5c0.2,0.4,0.4,0.8,0.7,1.1c0.5,2.9,2.8,5.8,5.6,5.8   c2.8,0,5.1-3,5.6-5.8c0.3-0.3,0.5-0.7,0.7-1.1c0.6,0.1,1.2-0.5,1.5-1.5C18.3,13.8,18.1,12.8,17.5,12.6z"
+      />
+
+      <path
+        fill={secondaryFillColor}
+        d="M9.5,15v2.6H8v-7.3h2.5c0.7,0,1.3,0.2,1.7,0.6c0.4,0.4,0.6,1,0.6,1.7c0,0.7-0.2,1.3-0.6,1.7    c-0.4,0.4-1,0.6-1.7,0.6H9.5z M9.5,13.8h1.1c0.3,0,0.5-0.1,0.7-0.3c0.2-0.2,0.2-0.5,0.2-0.9c0-0.3-0.1-0.6-0.2-0.9    c-0.2-0.2-0.4-0.3-0.7-0.3H9.5V13.8z"
+      />
+
+      <polygon
+        fill={secondaryFillColor}
+        points="5.1,8.8 8.3,5.6 5.1,2.4 7,0.5 10.2,3.7 13.4,0.5 15.3,2.4 12.1,5.6 15.3,8.8 13.4,10.7 10.2,7.5     7,10.7   "
+      />
+      <polygon
+        stroke={fillColor}
+        fill={secondaryFillColor}
+        points="5.1,8.8 8.3,5.6 5.1,2.4 7,0.5 10.2,3.7 13.4,0.5 15.3,2.4 12.1,5.6 15.3,8.8 13.4,10.7 10.2,7.5     7,10.7   "
+      />
+
+      <polygon
+        fill={secondaryFillColor}
+        points="0.5,10.8 2,9.3 0.5,7.9 1.8,6.7 3.2,8.1 4.7,6.7 5.9,7.9 4.4,9.3 5.9,10.8 4.7,12 3.2,10.6 1.8,12       "
+      />
+      <polygon
+        stroke={fillColor}
+        fill={secondaryFillColor}
+        points="0.5,10.8 2,9.3 0.5,7.9 1.8,6.7 3.2,8.1 4.7,6.7 5.9,7.9 4.4,9.3 5.9,10.8 4.7,12 3.2,10.6 1.8,12       "
+      />
+
+      <polygon
+        fill={secondaryFillColor}
+        points="15.5,10.8 17,9.3 15.5,7.9 16.8,6.7 18.2,8.1 19.7,6.7 20.9,7.9 19.4,9.3 20.9,10.8 19.7,12     18.2,10.6 16.8,12   "
+      />
+      <polygon
+        stroke={fillColor}
+        fill={secondaryFillColor}
+        points="15.5,10.8 17,9.3 15.5,7.9 16.8,6.7 18.2,8.1 19.7,6.7 20.9,7.9 19.4,9.3 20.9,10.8 19.7,12     18.2,10.6 16.8,12   "
+      />
+    </BaseSvg>
+  );
+};
+
+export default ParalyzedSvg;

ddb_main/tools/js/smartComponents/Svg/conditions/ParalyzedSvg/index.ts

@@ -0,0 +1,11 @@
+import { asDarkSvg } from "../../hocs/asDarkSvg";
+import { asGraySvg } from "../../hocs/asGraySvg";
+import { asLightSvg } from "../../hocs/asLightSvg";
+import ParalyzedSvg from "./ParalyzedSvg";
+
+const LightParalyzedSvg = asLightSvg(ParalyzedSvg);
+const DarkParalyzedSvg = asDarkSvg(ParalyzedSvg);
+const GrayParalyzedSvg = asGraySvg(ParalyzedSvg);
+
+export default ParalyzedSvg;
+export { ParalyzedSvg, LightParalyzedSvg, DarkParalyzedSvg, GrayParalyzedSvg };

ddb_main/tools/js/smartComponents/Svg/conditions/PetrifiedSvg/PetrifiedSvg.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../BaseSvg";
+
+const PetrifiedSvg: React.FunctionComponent<BaseSvgProps> = ({
+  className = "",
+  fillColor,
+  secondaryFillColor,
+}) => {
+  return (
+    <BaseSvg className={className} viewBox="0 0 22 22">
+      <path
+        fill={fillColor}
+        d="M8.1,6.4L7,4.9l1.1-0.6c0.1-0.1,0.2-0.1,0.2-0.2c0-0.1,0-0.2,0-0.3L6.4,0.2C6.9,0.1,7.4,0,8,0   c3.3,0,6.1,2.4,6.9,5.8l-2.8-0.9c-0.1,0-0.2,0-0.3,0L8.1,6.4z"
+      />
+      <path
+        fill={fillColor}
+        d="M4.5,11.4l-1.9,2.4c-0.1-0.3-0.2-0.6-0.2-1c-0.3-0.4-0.5-0.7-0.7-1.1c-0.6,0.2-1.3-0.5-1.5-1.5   c-0.3-1-0.1-1.9,0.5-2.1c0.1,0,0.1,0,0.2,0c0-0.1,0-0.1,0-0.2c0-3.5,2.1-6.4,4.9-7.4l1.8,3.4L6.3,4.4c0,0-0.1,0-0.1,0.1L4.4,5.4   C4.2,5.5,4.2,5.6,4.2,5.7L4.5,11.4z"
+      />
+      <path
+        fill={fillColor}
+        d="M7.9,16.9c0.1,0.5,0.2,1.1,0.3,1.6c-0.1,0-0.2,0-0.3,0c-2.2,0-4.1-1.9-5-4l2.3-2.8c0-0.1,0.1-0.2,0.1-0.3   L4.9,5.9l1.4-0.7l1.3,1.9C7.7,7.2,7.9,7.3,8,7.3c0.1,0,0.1,0,0.2,0l3.9-1.6l3,1c0.1,0.4,0.1,0.8,0.1,1.2c0,0.1,0,0.1,0,0.2   c0.1,0,0.1,0,0.1,0c0.4,0.1,0.6,0.6,0.6,1.1L10.3,11c-0.1,0-0.2,0.1-0.2,0.2c0,0.1,0,0.2,0,0.3l1.6,3.1l-3.5,1.9   C8,16.6,7.9,16.8,7.9,16.9z"
+      />
+
+      <path
+        fill={secondaryFillColor}
+        d="M6.4,8.9c0,0.9-0.7,1-1.5,1s-1.5-0.1-1.5-1c0-0.9,0.7-1.5,1.5-1.5S6.4,8.1,6.4,8.9z"
+      />
+
+      <path
+        fill={secondaryFillColor}
+        d="M10.3,14.5c0,1.3-1,0-2.3,0s-2.3,1.3-2.3,0s1-2.3,2.3-2.3S10.3,13.2,10.3,14.5z"
+      />
+
+      <path
+        fill={secondaryFillColor}
+        d="M12.4,8.9c0,0.9-0.7,1-1.5,1s-1.5-0.1-1.5-1c0-0.9,0.7-1.5,1.5-1.5S12.4,8.1,12.4,8.9z"
+      />
+
+      <path
+        fill={fillColor}
+        d="M10.9,11.6l4.9-1.6c0,0.1,0,0.1,0,0.1c-0.3,1-1,1.6-1.5,1.5c-0.2,0.4-0.4,0.8-0.7,1.1   c-0.4,2.5-2.2,5.1-4.6,5.7h0c-0.1-0.4-0.1-0.8-0.2-1.4l3.6-1.9c0.2-0.1,0.2-0.3,0.2-0.5L10.9,11.6z"
+      />
+    </BaseSvg>
+  );
+};
+
+export default PetrifiedSvg;

ddb_main/tools/js/smartComponents/Svg/conditions/PetrifiedSvg/index.ts

@@ -0,0 +1,11 @@
+import { asDarkSvg } from "../../hocs/asDarkSvg";
+import { asGraySvg } from "../../hocs/asGraySvg";
+import { asLightSvg } from "../../hocs/asLightSvg";
+import PetrifiedSvg from "./PetrifiedSvg";
+
+const LightPetrifiedSvg = asLightSvg(PetrifiedSvg);
+const DarkPetrifiedSvg = asDarkSvg(PetrifiedSvg);
+const GrayPetrifiedSvg = asGraySvg(PetrifiedSvg);
+
+export default PetrifiedSvg;
+export { PetrifiedSvg, LightPetrifiedSvg, DarkPetrifiedSvg, GrayPetrifiedSvg };

ddb_main/tools/js/smartComponents/Svg/conditions/PoisonedSvg/PoisonedSvg.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+
+import BaseSvg, { BaseSvgProps } from "../../BaseSvg";
+
+const PoisonedSvg: React.FunctionComponent<BaseSvgProps> = ({
+  className = "",
+  fillColor,
+  secondaryFillColor,
+}) => {
+  return (
+    <BaseSvg className={className} viewBox="0 0 22 22">
+      <path
+        fill={fillColor}
+        d="M15.3,8.1c0,0-0.1,0-0.1,0c0-0.1,0-0.1,0-0.2C15.2,3.5,11.9,0,8,0S0.8,3.5,0.8,7.8c0,0.1,0,0.1,0,0.2    c-0.1,0-0.1,0-0.2,0c-0.6,0.2-0.8,1.1-0.5,2.1c0.3,1,1,1.6,1.6,1.5c0.2,0.4,0.4,0.8,0.7,1.1c0.5,2.9,2.8,5.8,5.6,5.8    c2.8,0,5.1-3,5.6-5.8c0.3-0.3,0.5-0.7,0.7-1.1c0.6,0.1,1.2-0.5,1.5-1.5C16.1,9.2,15.9,8.2,15.3,8.1z"
+      />
+      <path
+        fill={secondaryFillColor}
+        d="M9.9,9l-0.3,1L9,10.6c-0.1,0.2-0.3,0.4-0.4,0.5c-0.2,0.1-0.4,0.2-0.6,0.2c-0.5,0-0.9-0.2-1.1-0.6l-0.6-0.5     L6,9l0.4-0.1c0,0.1,0.1,0.2,0.1,0.2C6.6,9.5,6.8,9.8,7,9.9c0.2,0.1,0.5,0.2,0.9,0.2c0.5,0,0.8-0.1,1-0.2c0.2-0.1,0.4-0.4,0.5-0.7     c0-0.1,0.1-0.1,0.1-0.2L9.9,9z"
+      />
+      <path
+        fill={fillColor}
+        d="M7.9,11.5c-0.6,0-1-0.3-1.3-0.7l-0.6-0.5c0,0-0.1-0.1-0.1-0.1l-0.3-1c0-0.1,0-0.1,0-0.2     c0-0.1,0.1-0.1,0.2-0.1l0.4-0.1c0.1,0,0.2,0,0.3,0.1l0.1,0.2C6.8,9.5,7,9.6,7.1,9.7c0.1,0.1,0.3,0.1,0.8,0.1     c0.6,0,0.8-0.1,0.9-0.1C8.9,9.6,9,9.5,9.2,9.1l0.1-0.2c0-0.1,0.2-0.2,0.3-0.1L10,8.8c0.1,0,0.1,0.1,0.2,0.1c0,0.1,0,0.1,0,0.2     l-0.3,1c0,0,0,0.1-0.1,0.1l-0.6,0.5c-0.1,0.2-0.3,0.4-0.5,0.5C8.5,11.4,8.2,11.5,7.9,11.5z M6.5,9.9L7,10.4c0,0,0,0,0.1,0.1     C7.3,10.8,7.5,11,7.9,11c0.2,0,0.4,0,0.5-0.1c0.1-0.1,0.3-0.2,0.3-0.4c0,0,0-0.1,0.1-0.1l0.6-0.5l0.1-0.3C9.4,9.9,9.2,10,9,10.1     c-0.2,0.1-0.6,0.2-1.1,0.2c-0.5,0-0.8-0.1-1.1-0.2C6.7,10,6.5,9.9,6.4,9.6L6.5,9.9z"
+      />
+      <path
+        fill={secondaryFillColor}
+        d="M8,12.2c0.4-0.2,1.2-0.6,2.3-1.1c0.1,0,0.2-0.1,0.4-0.2c0.4-0.4,0.7-0.7,1-0.9c0.3-0.2,0.4-0.3,0.6-0.3      c0.1,0,0.3,0,0.3,0.1c0.1,0.1,0.1,0.2,0.1,0.4c0,0.2,0,0.4-0.1,0.7c0.3,0.4,0.4,0.6,0.4,0.8c0,0.2,0,0.3-0.1,0.3      c-0.1,0.1-0.2,0.1-0.4,0.1c-0.1,0-0.2,0-0.4-0.1c-0.2-0.1-0.4-0.2-0.6-0.4c-0.6,0.1-1.5,0.5-2.7,1.1c0.2,0.1,0.3,0.2,0.3,0.2      c0.4,0.2,0.9,0.5,1.5,0.9c0.1,0,0.2,0.2,0.5,0.3c1.2,0.1,1.9,0.5,1.9,0.9c0,0.3-0.3,0.5-1,0.6c-0.3,0.4-0.6,0.6-0.8,0.6      c-0.2,0-0.5-0.3-0.7-1c0-0.1-0.1-0.2-0.1-0.3c-1-0.8-1.8-1.4-2.6-1.8c-0.9,0.5-1.8,1.2-2.6,1.9C5.2,16,5,16.4,4.6,16.4      c-0.2,0-0.5-0.2-0.8-0.7c-0.7,0-1-0.2-1-0.6c0-0.3,0.1-0.5,0.4-0.6c0.3-0.1,0.8-0.3,1.6-0.4c0.6-0.5,1.4-0.9,2.2-1.4      c-1.2-0.6-2.1-0.9-2.8-1.1C4,11.8,3.9,12,3.7,12c-0.1,0.1-0.3,0.1-0.4,0.1c-0.2,0-0.3,0-0.4-0.1c-0.1-0.1-0.1-0.2-0.1-0.3      c0-0.1,0.2-0.4,0.5-0.8c-0.1-0.3-0.1-0.5-0.1-0.6c0-0.2,0-0.4,0.1-0.5c0.1-0.1,0.2-0.1,0.4-0.1C3.8,9.7,4,9.8,4.2,10      c0.3,0.2,0.6,0.5,0.9,0.9C6,11.2,6.9,11.6,8,12.2z"
+      />
+      <path
+        fill={fillColor}
+        d="M11.3,16.6c-0.5,0-0.8-0.6-1-1.1c0-0.1,0-0.1-0.1-0.2c-0.9-0.7-1.7-1.3-2.4-1.7c-0.8,0.5-1.6,1.1-2.4,1.7      c-0.1,0.9-0.5,1.3-0.9,1.3c-0.3,0-0.6-0.2-0.9-0.7c-1,0-1.2-0.5-1.2-0.8c0-0.4,0.2-0.7,0.5-0.8c0.3-0.1,0.8-0.3,1.7-0.4      c0.5-0.4,1.1-0.8,1.8-1.1c-0.9-0.4-1.6-0.7-2.2-0.8c-0.2,0.1-0.3,0.2-0.4,0.3c-0.4,0.2-0.8,0.2-1.1,0c-0.1-0.1-0.2-0.2-0.2-0.5      c0-0.1,0.1-0.3,0.4-0.8c-0.1-0.2-0.1-0.4-0.1-0.6C2.9,10,3,9.8,3.1,9.7c0.2-0.2,0.6-0.4,1.3,0.1C4.7,10,5,10.3,5.3,10.7      C6.1,11,7,11.4,8,11.9c0.5-0.2,1.2-0.6,2.3-1c0,0,0.2-0.1,0.4-0.2c0.4-0.4,0.7-0.7,1-0.9c0.3-0.2,0.5-0.4,0.7-0.4      c0.3,0,0.4,0.1,0.5,0.2C13,9.8,13,10,13,10.2c0,0.2,0,0.3-0.1,0.6c0.3,0.4,0.4,0.7,0.4,0.9c0,0.2-0.1,0.4-0.2,0.5      c-0.1,0.1-0.3,0.2-0.5,0.2c-0.1,0-0.3,0-0.5-0.2c-0.2-0.1-0.3-0.2-0.6-0.3c-0.5,0.1-1.2,0.4-2.1,0.8c0.4,0.2,0.9,0.5,1.5,0.9      c0.1,0,0.2,0.1,0.5,0.3c0.6,0.1,2,0.3,2,1.2c0,0.4-0.4,0.7-1.1,0.9C11.9,16.4,11.6,16.6,11.3,16.6z M7.9,13c0,0,0.1,0,0.1,0      c0.8,0.4,1.7,1,2.6,1.8c0,0,0.1,0.1,0.1,0.1c0.1,0.1,0.1,0.2,0.1,0.3c0.3,0.8,0.5,0.8,0.5,0.8c0,0,0.2,0,0.6-0.5      c0,0,0.1-0.1,0.2-0.1c0.5-0.1,0.8-0.2,0.8-0.4c0-0.3-0.6-0.6-1.6-0.7c0,0-0.1,0-0.1,0c-0.3-0.2-0.4-0.3-0.5-0.3      c-0.6-0.4-1.1-0.7-1.5-0.9L8.8,13c-0.1,0-0.1-0.1-0.1-0.2c0-0.1,0.1-0.2,0.1-0.2c1.2-0.6,2.1-1,2.8-1.1c0.1,0,0.1,0,0.2,0      c0.3,0.2,0.5,0.3,0.6,0.4c0.2,0.1,0.3,0.1,0.3,0.1c0.1,0,0.2,0,0.2,0c0,0,0-0.1,0-0.2c0,0,0-0.2-0.4-0.7c0-0.1-0.1-0.1-0.1-0.2      c0-0.3,0.1-0.5,0.1-0.6c0-0.2,0-0.2-0.1-0.3c0,0,0,0-0.1,0c0,0-0.1,0-0.4,0.3c-0.2,0.2-0.6,0.5-1,0.9c0,0-0.1,0-0.1,0.1      c-0.2,0.1-0.4,0.2-0.4,0.2c-1.1,0.5-1.9,0.8-2.3,1.1c-0.1,0-0.2,0-0.2,0c-1.1-0.6-2-1-2.8-1.3c0,0-0.1,0-0.1-0.1      c-0.3-0.4-0.6-0.7-0.9-0.9C3.8,9.9,3.7,9.9,3.6,9.9c-0.1,0-0.2,0-0.2,0.1c0,0-0.1,0.1-0.1,0.3c0,0.1,0,0.3,0.1,0.6      c0,0.1,0,0.1,0,0.2C3.1,11.6,3,11.7,3,11.7c0,0.1,0,0.1,0,0.1c0.1,0.1,0.3,0.1,0.5,0c0.1-0.1,0.3-0.2,0.4-0.3      c0.1,0,0.1-0.1,0.2-0.1C5,11.6,6,11.9,7.2,12.5c0.1,0,0.1,0.1,0.1,0.2c0,0.1,0,0.2-0.1,0.2c-0.8,0.5-1.6,0.9-2.2,1.4      c0,0-0.1,0-0.1,0c-1,0.1-1.4,0.3-1.6,0.4C3.1,14.8,3,14.9,3,15.1c0,0.2,0.3,0.3,0.8,0.3c0.1,0,0.2,0,0.2,0.1      c0.3,0.5,0.5,0.5,0.6,0.5c0.2,0,0.4-0.3,0.5-0.9c0-0.1,0-0.1,0.1-0.1c0.8-0.7,1.7-1.4,2.7-1.9C7.8,13.1,7.9,13,7.9,13z"
+      />
+      <path
+        fill={secondaryFillColor}
+        d="M10.5,2.4C9.9,1.9,9,1.6,7.9,1.6S6,1.9,5.3,2.4c-0.7,0.6-1,1.3-1,2.2c0,0.8,0.1,1.4,0.3,1.7      c0.3,0.5,0.4,0.8,0.4,1l0.1,0.9l1.4,0.7l0.2,0.5c0.1,0,0.3,0.1,0.5,0.1c0.2,0,0.4,0,0.6,0c0.4,0,0.8,0,1.1-0.1l0.2-0.5l1.4-0.7      l0.1-0.9c0-0.2,0.1-0.3,0.1-0.4c0.4-0.8,0.7-1.5,0.7-2.3C11.5,3.8,11.2,3,10.5,2.4z M6.4,7.3c-0.6,0-0.9-0.3-0.9-1      c0-0.3,0.1-0.6,0.2-0.7c0.1-0.2,0.4-0.2,0.7-0.2c0.6,0,0.8,0.3,0.8,0.9C7.3,7,7,7.3,6.4,7.3z M8.2,8.7c-0.1,0-0.2,0-0.2-0.1      C7.9,8.7,7.8,8.7,7.7,8.7c-0.1,0-0.2,0-0.3-0.1C7.4,8.6,7.3,8.5,7.3,8.4c0-0.1,0.1-0.2,0.2-0.4C7.7,7.8,7.8,7.6,8,7.4      C8.1,7.6,8.2,7.8,8.4,8c0.2,0.2,0.2,0.3,0.2,0.4C8.6,8.6,8.5,8.7,8.2,8.7z M9.5,7.3c-0.6,0-0.9-0.3-0.9-1c0-0.6,0.3-0.9,0.9-0.9      c0.3,0,0.5,0.1,0.6,0.2c0.1,0.1,0.2,0.4,0.2,0.7C10.3,7,10,7.3,9.5,7.3z"
+      />
+      <path
+        fill={fillColor}
+        d="M7.9,9.8c-0.2,0-0.4,0-0.6,0c-0.2,0-0.4-0.1-0.5-0.1c-0.1,0-0.1-0.1-0.2-0.1L6.5,9.1L5.1,8.4      C5,8.4,5,8.3,5,8.3L4.8,7.4c0-0.1-0.1-0.3-0.4-0.9c-0.2-0.4-0.4-1-0.4-1.8c0-1,0.4-1.8,1.1-2.4c0.7-0.6,1.6-0.9,2.8-0.9      c1.1,0,2.1,0.3,2.8,0.9l0,0c0.7,0.6,1.1,1.4,1.1,2.4c0,0.8-0.2,1.6-0.7,2.4c0,0,0,0.1-0.1,0.3l-0.1,0.9c0,0.1-0.1,0.2-0.1,0.2      L9.4,9.1L9.2,9.5c0,0.1-0.1,0.1-0.2,0.1C8.8,9.8,8.4,9.8,7.9,9.8z M7.1,9.2c0.1,0,0.2,0,0.3,0.1c0.2,0,0.4,0,0.6,0      c0.4,0,0.6,0,0.9-0.1L9,8.8C9,8.8,9,8.7,9.1,8.7L10.4,8l0.1-0.7c0-0.2,0.1-0.3,0.1-0.4c0.4-0.7,0.6-1.5,0.6-2.2      c0-0.8-0.3-1.5-0.9-2C9.7,2.1,8.9,1.8,7.9,1.8c-1,0-1.8,0.3-2.4,0.8c-0.6,0.5-0.9,1.2-0.9,2c0,0.7,0.1,1.3,0.3,1.6      c0.4,0.7,0.5,0.9,0.5,1.1L5.4,8l1.3,0.6c0.1,0,0.1,0.1,0.1,0.1L7.1,9.2z M8.2,9C8.1,9,8.1,9,8,8.9C7.7,9,7.4,9,7.3,8.8      C7.2,8.8,7.1,8.6,7.1,8.4c0-0.2,0.1-0.4,0.3-0.6c0.1-0.1,0.2-0.3,0.4-0.5c0-0.1,0.1-0.1,0.2-0.1c0,0,0,0,0,0      c0.1,0,0.2,0,0.2,0.1c0.1,0.2,0.2,0.4,0.4,0.5C8.8,8,8.8,8.2,8.8,8.4c0,0.2-0.1,0.3-0.2,0.4C8.6,8.9,8.4,9,8.2,9z M8,8.4      c0,0,0.1,0,0.1,0c0.1,0,0.1,0,0.1,0c0.1,0,0.1,0,0.1,0c0,0,0,0,0-0.1l0,0c0,0,0-0.1-0.2-0.3C8.1,8,8,8,8,7.9      C7.9,8,7.8,8,7.8,8.1C7.6,8.3,7.6,8.4,7.6,8.4c0,0.1,0,0.1,0.1,0.1c0,0,0,0,0.1,0C7.9,8.4,7.9,8.4,8,8.4z M9.5,7.6      c-0.4,0-1.1-0.2-1.1-1.2c0-0.8,0.4-1.2,1.1-1.2c0.3,0,0.6,0.1,0.8,0.3c0.2,0.2,0.3,0.5,0.3,0.8C10.6,7.4,9.9,7.6,9.5,7.6z       M9.5,5.7C9,5.7,8.9,5.9,8.9,6.3c0,0.6,0.3,0.7,0.6,0.7c0.3,0,0.6-0.1,0.6-0.8c0-0.2,0-0.4-0.1-0.5C9.9,5.7,9.7,5.7,9.5,5.7z       M6.4,7.6C6,7.6,5.3,7.4,5.3,6.3c0-0.4,0.1-0.7,0.3-0.9c0.2-0.2,0.5-0.3,0.8-0.3c0.7,0,1.1,0.4,1.1,1.1C7.5,7.4,6.8,7.6,6.4,7.6      z M6.5,5.7C6.2,5.7,6.1,5.7,6,5.8C5.9,5.9,5.8,6.1,5.8,6.3c0,0.6,0.3,0.7,0.6,0.7C6.7,7.1,7,7,7,6.3C7,5.8,6.9,5.7,6.5,5.7z"
+      />
+    </BaseSvg>
+  );
+};
+
+export default PoisonedSvg;