@thecb/components 3.3.8 → 3.4.0

package/.tool-versions

@@ -0,0 +1 @@
+nodejs 10.13.0

package/dist/index.cjs.js

@@ -12283,6 +12283,7 @@ var padding = {
   smallPrimary: "0.75rem 1rem",
   smallSecondary: "0.75rem 1rem",
   smallGhost: "0",
+  tertiary: "1rem 1.25rem",
   ghost: "0.65rem 0",
   danger: "1rem 1.25rem",
   whiteSecondary: "0.75rem 2rem",
@@ -12296,6 +12297,7 @@ var color$1 = {
   smallSecondary: "#15749D",
   smallGhost: "#15749D",
   ghost: "#15749D",
+  tertiary: "#15749D",
   danger: "#FFFFFF",
   whiteSecondary: "#FFFFFF",
   whitePrimary: "#FFFFFF"
@@ -12308,6 +12310,7 @@ var fontSizeVariant = {
   smallSecondary: "pS",
   smallGhost: "p",
   ghost: "pL",
+  tertiary: "pS",
   danger: "pS",
   whiteSecondary: "pS",
   whitePrimary: "pS"
@@ -12320,6 +12323,7 @@ var fontWeight = {
   smallSecondary: "600",
   smallGhost: "400",
   ghost: "600",
+  tertiary: "600",
   danger: "600",
   whiteSecondary: "600",
   whitePrimary: "600"
@@ -12332,6 +12336,7 @@ var height = {
   smallSecondary: "2.5rem",
   smallGhost: "1.5rem",
   ghost: "3rem",
+  tertiary: "3rem",
   danger: "3rem",
   whiteSecondary: "3rem",
   whitePrimary: "auto"
@@ -12344,6 +12349,7 @@ var minWidth = {
   smallSecondary: "100px",
   smallGhost: "100px",
   ghost: "130px",
+  tertiary: "130px",
   danger: "130px",
   whiteSecondary: "160px",
   whitePrimary: "130px"
@@ -12356,6 +12362,7 @@ var backgroundColor = {
   smallSecondary: "transparent",
   smallGhost: "transparent",
   ghost: "transparent",
+  tertiary: "transparent",
   danger: "#ED125F",
   whiteSecondary: "transparent",
   whitePrimary: "transparent"
@@ -12368,6 +12375,7 @@ var border = {
   smallSecondary: "2px solid #15749D",
   smallGhost: "none",
   ghost: "none",
+  tertiary: "none",
   danger: "2px solid #ED125F",
   whiteSecondary: "2px solid white",
   whitePrimary: "2px solid transparent"
@@ -12378,8 +12386,9 @@ var hoverBackgroundColor = {
   back: "transparent",
   smallPrimary: "#116285",
   smallSecondary: "transparent",
-  ghost: "transparent",
   smallGhost: "transparent",
+  ghost: "transparent",
+  tertiary: "transparent",
   danger: "#BA002C",
   whiteSecondary: "transparent",
   whitePrimary: "transparent"
@@ -12390,8 +12399,9 @@ var hoverBorderColor = {
   back: "#DCEAF1",
   smallPrimary: "#116285",
   smallSecondary: "#DCEAF1",
-  ghost: "transparent",
   smallGhost: "transparent",
+  ghost: "transparent",
+  tertiary: "transparent",
   danger: "#BA002C",
   whiteSecondary: "2px solid transparent",
   whitePrimary: "2px solid transparent"
@@ -12402,8 +12412,9 @@ var hoverColor = {
   back: "#116285",
   smallPrimary: "#FFFFFF",
   smallSecondary: "#116285",
-  ghost: "#116285",
   smallGhost: "#116285",
+  ghost: "#116285",
+  tertiary: "#116285",
   danger: "#FFFFFF",
   whiteSecondary: "#FFFFFF",
   whitePrimary: "#FFFFFF"
@@ -12414,8 +12425,9 @@ var activeBackgroundColor = {
   back: "transparent",
   smallPrimary: "#0E506D",
   smallSecondary: "transparent",
-  ghost: "transparent",
   smallGhost: "transparent",
+  ghost: "transparent",
+  tertiary: "transparent",
   danger: "#870000",
   whiteSecondary: "transparent",
   whitePrimary: "transparent"
@@ -12426,8 +12438,9 @@ var activeBorderColor = {
   back: "#0E506D",
   smallPrimary: "#0E506D",
   smallSecondary: "#0E506D",
-  ghost: "transparent",
   smallGhost: "transparent",
+  ghost: "transparent",
+  tertiary: "transparent",
   danger: "#870000",
   whiteSecondary: "2px solid transparent",
   whitePrimary: "2px solid transparent"
@@ -12438,8 +12451,9 @@ var activeColor = {
   back: "#0E506D",
   smallPrimary: "#FFFFFF",
   smallSecondary: "#0E506D",
-  ghost: "#0E506D",
   smallGhost: "#0E506D",
+  ghost: "#0E506D",
+  tertiary: "#0E506D",
   danger: "#FFFFFF",
   whiteSecondary: "#FFFFFF",
   whitePrimary: "#FFFFFF"
@@ -14002,7 +14016,7 @@ var IconQuit = function IconQuit(_ref) {
     height: height,
     viewBox: "0 0 24 24"
   }, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("path", {
-    id: "a",
+    id: "quit",
     d: "M18.9999989 6.40999946L17.589999 4.9999997 11.9999993 10.5899995 6.40999946 4.9999997 4.9999997 6.40999946 10.5899995 11.9999993 4.9999997 17.589999 6.40999946 18.9999989 11.9999993 13.409999 17.589999 18.9999989 18.9999989 17.589999 13.409999 11.9999993z"
   })), /*#__PURE__*/React__default.createElement("g", {
     fill: "none",
@@ -14010,16 +14024,16 @@ var IconQuit = function IconQuit(_ref) {
     stroke: "none",
     strokeWidth: "1"
   }, /*#__PURE__*/React__default.createElement("mask", {
-    id: "b",
+    id: "quitMask",
     fill: "#fff"
   }, /*#__PURE__*/React__default.createElement("use", {
-    xlinkHref: "#a"
+    xlinkHref: "#quit"
   })), /*#__PURE__*/React__default.createElement("use", {
     fill: fill,
-    xlinkHref: "#a"
+    xlinkHref: "#quit"
   }), /*#__PURE__*/React__default.createElement("g", {
     fill: fill,
-    mask: "url(#b)"
+    mask: "url(#quitMask)"
   }, /*#__PURE__*/React__default.createElement("path", {
     d: "M0 0H24V24H0z"
   }))));
@@ -34261,8 +34275,8 @@ var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$s)
 
 var AccountBillIcon = function AccountBillIcon() {
   return /*#__PURE__*/React__default.createElement("svg", {
-    width: "81px",
-    height: "81px",
+    width: "51px",
+    height: "51px",
     viewBox: "0 0 81 81",
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
@@ -34337,8 +34351,8 @@ var AccountBillIcon = function AccountBillIcon() {
 
 var AccountGenericIcon = function AccountGenericIcon() {
   return /*#__PURE__*/React__default.createElement("svg", {
-    width: "81px",
-    height: "81px",
+    width: "51px",
+    height: "51px",
     viewBox: "0 0 81 81",
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
@@ -34413,8 +34427,8 @@ var AccountGenericIcon = function AccountGenericIcon() {
 
 var AccountConstructionIcon = function AccountConstructionIcon() {
   return /*#__PURE__*/React__default.createElement("svg", {
-    width: "81px",
-    height: "81px",
+    width: "51px",
+    height: "51px",
     viewBox: "0 0 81 81",
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
@@ -34492,8 +34506,8 @@ var AccountConstructionIcon = function AccountConstructionIcon() {
 
 var AccountDentalIcon = function AccountDentalIcon() {
   return /*#__PURE__*/React__default.createElement("svg", {
-    width: "81px",
-    height: "81px",
+    width: "51px",
+    height: "51px",
     viewBox: "0 0 81 81",
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
@@ -34571,8 +34585,8 @@ var AccountDentalIcon = function AccountDentalIcon() {
 
 var AccountElectricIcon = function AccountElectricIcon() {
   return /*#__PURE__*/React__default.createElement("svg", {
-    width: "81px",
-    height: "81px",
+    width: "51px",
+    height: "51px",
     viewBox: "0 0 81 81",
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
@@ -34650,8 +34664,8 @@ var AccountElectricIcon = function AccountElectricIcon() {
 
 var AccountGarbageIcon = function AccountGarbageIcon() {
   return /*#__PURE__*/React__default.createElement("svg", {
-    width: "81px",
-    height: "81px",
+    width: "51px",
+    height: "51px",
     viewBox: "0 0 81 81",
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
@@ -34729,8 +34743,8 @@ var AccountGarbageIcon = function AccountGarbageIcon() {
 
 var AccountGasIcon = function AccountGasIcon() {
   return /*#__PURE__*/React__default.createElement("svg", {
-    width: "81px",
-    height: "81px",
+    width: "51px",
+    height: "51px",
     viewBox: "0 0 81 81",
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
@@ -34808,8 +34822,8 @@ var AccountGasIcon = function AccountGasIcon() {
 
 var AccountMedicalIcon = function AccountMedicalIcon() {
   return /*#__PURE__*/React__default.createElement("svg", {
-    width: "81px",
-    height: "81px",
+    width: "51px",
+    height: "51px",
     viewBox: "0 0 81 81",
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
@@ -34887,8 +34901,8 @@ var AccountMedicalIcon = function AccountMedicalIcon() {
 
 var AccountWaterIcon = function AccountWaterIcon() {
   return /*#__PURE__*/React__default.createElement("svg", {
-    width: "81px",
-    height: "81px",
+    width: "51px",
+    height: "51px",
     viewBox: "0 0 81 81",
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
@@ -34966,8 +34980,8 @@ var AccountWaterIcon = function AccountWaterIcon() {
 
 var PropertyApartmentIcon = function PropertyApartmentIcon() {
   return /*#__PURE__*/React__default.createElement("svg", {
-    width: "81px",
-    height: "81px",
+    width: "51px",
+    height: "51px",
     viewBox: "0 0 81 81",
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
@@ -35048,8 +35062,8 @@ var PropertyApartmentIcon = function PropertyApartmentIcon() {
 
 var PropertyBusinessIcon = function PropertyBusinessIcon() {
   return /*#__PURE__*/React__default.createElement("svg", {
-    width: "81px",
-    height: "81px",
+    width: "51px",
+    height: "51px",
     viewBox: "0 0 81 81",
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
@@ -35124,8 +35138,8 @@ var PropertyBusinessIcon = function PropertyBusinessIcon() {
 
 var PropertyCarIcon = function PropertyCarIcon() {
   return /*#__PURE__*/React__default.createElement("svg", {
-    width: "81px",
-    height: "81px",
+    width: "51px",
+    height: "51px",
     viewBox: "0 0 81 81",
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
@@ -35206,8 +35220,8 @@ var PropertyCarIcon = function PropertyCarIcon() {
 
 var PropertyCommercialVehicleIcon = function PropertyCommercialVehicleIcon() {
   return /*#__PURE__*/React__default.createElement("svg", {
-    width: "81px",
-    height: "81px",
+    width: "51px",
+    height: "51px",
     viewBox: "0 0 81 81",
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
@@ -35288,8 +35302,8 @@ var PropertyCommercialVehicleIcon = function PropertyCommercialVehicleIcon() {
 
 var PropertyGarageIcon = function PropertyGarageIcon() {
   return /*#__PURE__*/React__default.createElement("svg", {
-    width: "81px",
-    height: "81px",
+    width: "51px",
+    height: "51px",
     viewBox: "0 0 81 81",
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
@@ -35369,8 +35383,8 @@ var PropertyGarageIcon = function PropertyGarageIcon() {
 
 var PropertyLandIcon = function PropertyLandIcon() {
   return /*#__PURE__*/React__default.createElement("svg", {
-    width: "81px",
-    height: "81px",
+    width: "51px",
+    height: "51px",
     viewBox: "0 0 81 81",
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
@@ -35451,8 +35465,8 @@ var PropertyLandIcon = function PropertyLandIcon() {
 
 var PropertyMotorcycleIcon = function PropertyMotorcycleIcon() {
   return /*#__PURE__*/React__default.createElement("svg", {
-    width: "81px",
-    height: "81px",
+    width: "51px",
+    height: "51px",
     viewBox: "0 0 81 81",
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
@@ -35533,8 +35547,8 @@ var PropertyMotorcycleIcon = function PropertyMotorcycleIcon() {
 
 var PropertyStorefrontIcon = function PropertyStorefrontIcon() {
   return /*#__PURE__*/React__default.createElement("svg", {
-    width: "81px",
-    height: "81px",
+    width: "51px",
+    height: "51px",
     viewBox: "0 0 81 81",
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
@@ -35615,8 +35629,8 @@ var PropertyStorefrontIcon = function PropertyStorefrontIcon() {
 
 var PropertyPersonalIcon = function PropertyPersonalIcon() {
   return /*#__PURE__*/React__default.createElement("svg", {
-    width: "81px",
-    height: "81px",
+    width: "51px",
+    height: "51px",
     viewBox: "0 0 81 81",
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "3.3.8",
+  "version": "3.4.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/atoms/button-with-action/ButtonWithAction.theme.js

@@ -10,6 +10,7 @@ const padding = {
   smallPrimary: "0.75rem 1rem",
   smallSecondary: "0.75rem 1rem",
   smallGhost: "0",
+  tertiary: "1rem 1.25rem",
   ghost: "0.65rem 0",
   danger: "1rem 1.25rem",
   whiteSecondary: "0.75rem 2rem",
@@ -24,6 +25,7 @@ const color = {
   smallSecondary: "#15749D",
   smallGhost: "#15749D",
   ghost: "#15749D",
+  tertiary: "#15749D",
   danger: "#FFFFFF",
   whiteSecondary: "#FFFFFF",
   whitePrimary: "#FFFFFF"
@@ -37,6 +39,7 @@ const fontSizeVariant = {
   smallSecondary: "pS",
   smallGhost: "p",
   ghost: "pL",
+  tertiary: "pS",
   danger: "pS",
   whiteSecondary: "pS",
   whitePrimary: "pS"
@@ -50,6 +53,7 @@ const fontWeight = {
   smallSecondary: "600",
   smallGhost: "400",
   ghost: "600",
+  tertiary: "600",
   danger: "600",
   whiteSecondary: "600",
   whitePrimary: "600"
@@ -63,6 +67,7 @@ const height = {
   smallSecondary: "2.5rem",
   smallGhost: "1.5rem",
   ghost: "3rem",
+  tertiary: "3rem",
   danger: "3rem",
   whiteSecondary: "3rem",
   whitePrimary: "auto"
@@ -76,6 +81,7 @@ const minWidth = {
   smallSecondary: "100px",
   smallGhost: "100px",
   ghost: "130px",
+  tertiary: "130px",
   danger: "130px",
   whiteSecondary: "160px",
   whitePrimary: "130px"
@@ -89,6 +95,7 @@ const backgroundColor = {
   smallSecondary: "transparent",
   smallGhost: "transparent",
   ghost: "transparent",
+  tertiary: "transparent",
   danger: "#ED125F",
   whiteSecondary: "transparent",
   whitePrimary: "transparent"
@@ -102,6 +109,7 @@ const border = {
   smallSecondary: "2px solid #15749D",
   smallGhost: "none",
   ghost: "none",
+  tertiary: "none",
   danger: "2px solid #ED125F",
   whiteSecondary: "2px solid white",
   whitePrimary: "2px solid transparent"
@@ -113,8 +121,9 @@ const hoverBackgroundColor = {
   back: "transparent",
   smallPrimary: "#116285",
   smallSecondary: "transparent",
-  ghost: "transparent",
   smallGhost: "transparent",
+  ghost: "transparent",
+  tertiary: "transparent",
   danger: "#BA002C",
   whiteSecondary: "transparent",
   whitePrimary: "transparent"
@@ -126,8 +135,9 @@ const hoverBorderColor = {
   back: "#DCEAF1",
   smallPrimary: "#116285",
   smallSecondary: "#DCEAF1",
-  ghost: "transparent",
   smallGhost: "transparent",
+  ghost: "transparent",
+  tertiary: "transparent",
   danger: "#BA002C",
   whiteSecondary: "2px solid transparent",
   whitePrimary: "2px solid transparent"
@@ -139,8 +149,9 @@ const hoverColor = {
   back: "#116285",
   smallPrimary: "#FFFFFF",
   smallSecondary: "#116285",
-  ghost: "#116285",
   smallGhost: "#116285",
+  ghost: "#116285",
+  tertiary: "#116285",
   danger: "#FFFFFF",
   whiteSecondary: "#FFFFFF",
   whitePrimary: "#FFFFFF"
@@ -152,8 +163,9 @@ const activeBackgroundColor = {
   back: "transparent",
   smallPrimary: "#0E506D",
   smallSecondary: "transparent",
-  ghost: "transparent",
   smallGhost: "transparent",
+  ghost: "transparent",
+  tertiary: "transparent",
   danger: "#870000",
   whiteSecondary: "transparent",
   whitePrimary: "transparent"
@@ -165,8 +177,9 @@ const activeBorderColor = {
   back: "#0E506D",
   smallPrimary: "#0E506D",
   smallSecondary: "#0E506D",
-  ghost: "transparent",
   smallGhost: "transparent",
+  ghost: "transparent",
+  tertiary: "transparent",
   danger: "#870000",
   whiteSecondary: "2px solid transparent",
   whitePrimary: "2px solid transparent"
@@ -178,8 +191,9 @@ const activeColor = {
   back: "#0E506D",
   smallPrimary: "#FFFFFF",
   smallSecondary: "#0E506D",
-  ghost: "#0E506D",
   smallGhost: "#0E506D",
+  ghost: "#0E506D",
+  tertiary: "#0E506D",
   danger: "#FFFFFF",
   whiteSecondary: "#FFFFFF",
   whitePrimary: "#FFFFFF"

package/src/components/molecules/obligation/icons/AccountBillIcon.js

@@ -2,8 +2,8 @@ import React from "react";
 
 const AccountBillIcon = () => (
   <svg
-    width="81px"
-    height="81px"
+    width="51px"
+    height="51px"
     viewBox="0 0 81 81"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"

package/src/components/molecules/obligation/icons/AccountConstructionIcon.js

@@ -2,8 +2,8 @@ import React from "react";
 
 const AccountConstructionIcon = () => (
   <svg
-    width="81px"
-    height="81px"
+    width="51px"
+    height="51px"
     viewBox="0 0 81 81"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"

package/src/components/molecules/obligation/icons/AccountDentalIcon.js

@@ -2,8 +2,8 @@ import React from "react";
 
 const AccountDentalIcon = () => (
   <svg
-    width="81px"
-    height="81px"
+    width="51px"
+    height="51px"
     viewBox="0 0 81 81"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"

package/src/components/molecules/obligation/icons/AccountElectricIcon.js

@@ -2,8 +2,8 @@ import React from "react";
 
 const AccountElectricIcon = () => (
   <svg
-    width="81px"
-    height="81px"
+    width="51px"
+    height="51px"
     viewBox="0 0 81 81"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"

package/src/components/molecules/obligation/icons/AccountGarbageIcon.js

@@ -2,8 +2,8 @@ import React from "react";
 
 const AccountGarbageIcon = () => (
   <svg
-    width="81px"
-    height="81px"
+    width="51px"
+    height="51px"
     viewBox="0 0 81 81"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"

package/src/components/molecules/obligation/icons/AccountGasIcon.js

@@ -2,8 +2,8 @@ import React from "react";
 
 const AccountGasIcon = () => (
   <svg
-    width="81px"
-    height="81px"
+    width="51px"
+    height="51px"
     viewBox="0 0 81 81"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"

package/src/components/molecules/obligation/icons/AccountGenericIcon.js

@@ -2,8 +2,8 @@ import React from "react";
 
 const AccountGenericIcon = () => (
   <svg
-    width="81px"
-    height="81px"
+    width="51px"
+    height="51px"
     viewBox="0 0 81 81"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"

package/src/components/molecules/obligation/icons/AccountMedicalIcon.js

@@ -2,8 +2,8 @@ import React from "react";
 
 const AccountMedicalIcon = () => (
   <svg
-    width="81px"
-    height="81px"
+    width="51px"
+    height="51px"
     viewBox="0 0 81 81"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"

package/src/components/molecules/obligation/icons/AccountWaterIcon.js

@@ -2,8 +2,8 @@ import React from "react";
 
 const AccountWaterIcon = () => (
   <svg
-    width="81px"
-    height="81px"
+    width="51px"
+    height="51px"
     viewBox="0 0 81 81"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"

package/src/components/molecules/obligation/icons/PropertyApartmentIcon.js

@@ -2,8 +2,8 @@ import React from "react";
 
 const PropertyApartmentIcon = () => (
   <svg
-    width="81px"
-    height="81px"
+    width="51px"
+    height="51px"
     viewBox="0 0 81 81"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"

package/src/components/molecules/obligation/icons/PropertyBusinessIcon.js

@@ -2,8 +2,8 @@ import React from "react";
 
 const PropertyBusinessIcon = () => (
   <svg
-    width="81px"
-    height="81px"
+    width="51px"
+    height="51px"
     viewBox="0 0 81 81"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"

package/src/components/molecules/obligation/icons/PropertyCarIcon.js

@@ -2,8 +2,8 @@ import React from "react";
 
 const PropertyCarIcon = () => (
   <svg
-    width="81px"
-    height="81px"
+    width="51px"
+    height="51px"
     viewBox="0 0 81 81"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"

package/src/components/molecules/obligation/icons/PropertyCommercialVehicleIcon.js

@@ -2,8 +2,8 @@ import React from "react";
 
 const PropertyCommercialVehicleIcon = () => (
   <svg
-    width="81px"
-    height="81px"
+    width="51px"
+    height="51px"
     viewBox="0 0 81 81"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"

package/src/components/molecules/obligation/icons/PropertyGarageIcon.js

@@ -2,8 +2,8 @@ import React from "react";
 
 const PropertyGarageIcon = () => (
   <svg
-    width="81px"
-    height="81px"
+    width="51px"
+    height="51px"
     viewBox="0 0 81 81"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"

package/src/components/molecules/obligation/icons/PropertyLandIcon.js

@@ -2,8 +2,8 @@ import React from "react";
 
 const PropertyLandIcon = () => (
   <svg
-    width="81px"
-    height="81px"
+    width="51px"
+    height="51px"
     viewBox="0 0 81 81"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"

package/src/components/molecules/obligation/icons/PropertyMotorcycleIcon.js

@@ -2,8 +2,8 @@ import React from "react";
 
 const PropertyMotorcycleIcon = () => (
   <svg
-    width="81px"
-    height="81px"
+    width="51px"
+    height="51px"
     viewBox="0 0 81 81"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"

package/src/components/molecules/obligation/icons/PropertyPersonalIcon.js

@@ -2,8 +2,8 @@ import React from "react";
 
 const PropertyPersonalIcon = () => (
   <svg
-    width="81px"
-    height="81px"
+    width="51px"
+    height="51px"
     viewBox="0 0 81 81"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"

package/src/components/molecules/obligation/icons/PropertyStorefrontIcon.js

@@ -2,8 +2,8 @@ import React from "react";
 
 const PropertyStorefrontIcon = () => (
   <svg
-    width="81px"
-    height="81px"
+    width="51px"
+    height="51px"
     viewBox="0 0 81 81"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"

package/src/deprecated/icons/IconQuit.js

@@ -15,16 +15,16 @@ export const IconQuit = ({
   >
     <defs>
       <path
-        id="a"
+        id="quit"
         d="M18.9999989 6.40999946L17.589999 4.9999997 11.9999993 10.5899995 6.40999946 4.9999997 4.9999997 6.40999946 10.5899995 11.9999993 4.9999997 17.589999 6.40999946 18.9999989 11.9999993 13.409999 17.589999 18.9999989 18.9999989 17.589999 13.409999 11.9999993z"
       ></path>
     </defs>
     <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
-      <mask id="b" fill="#fff">
-        <use xlinkHref="#a"></use>
+      <mask id="quitMask" fill="#fff">
+        <use xlinkHref="#quit"></use>
       </mask>
-      <use fill={fill} xlinkHref="#a"></use>
-      <g fill={fill} mask="url(#b)">
+      <use fill={fill} xlinkHref="#quit"></use>
+      <g fill={fill} mask="url(#quitMask)">
         <path d="M0 0H24V24H0z"></path>
       </g>
     </g>