@thecb/components 4.1.8 → 4.1.9

package/dist/index.cjs.js

@@ -14720,6 +14720,47 @@ var StatusUnknownIcon = function StatusUnknownIcon() {
   }))));
 };
 
+var CarrotIcon = function CarrotIcon(_ref) {
+  var themeValues = _ref.themeValues;
+  return /*#__PURE__*/React__default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlnsXlink: "http://www.w3.org/1999/xlink",
+    width: "10",
+    height: "5",
+    viewBox: "0 0 10 5"
+  }, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("path", {
+    id: "carrot-path-1",
+    d: "M6.99999958 9.9999994L11.9999993 14.9999991 16.999999 9.9999994z"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd",
+    stroke: "none",
+    strokeWidth: "1"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(-423 -974)"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(372 958)"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(44 6)"
+  }, /*#__PURE__*/React__default.createElement("mask", {
+    id: "carrot-mask-2",
+    fill: "#fff"
+  }, /*#__PURE__*/React__default.createElement("use", {
+    xlinkHref: "#carrot-path-1"
+  })), /*#__PURE__*/React__default.createElement("use", {
+    fill: "#000",
+    xlinkHref: "#carrot-path-1"
+  }), /*#__PURE__*/React__default.createElement("g", {
+    fill: themeValues.singleIconColor,
+    fillRule: "nonzero",
+    mask: "url(#carrot-mask-2)"
+  }, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("path", {
+    d: "M0 0H24V24H0z"
+  }))))))));
+};
+
+var CarrotIcon$1 = themeComponent(CarrotIcon, "Icons", fallbackValues$2, "darkMode");
+
 var color$2 = "#15749D";
 var hoverColor$1 = "#116285";
 var activeColor$1 = "#0E506D";
@@ -36534,9 +36575,9 @@ var fallbackValues$u = {
 var NavMenuDesktop = function NavMenuDesktop(_ref) {
   var id = _ref.id,
       _ref$top = _ref.top,
-      top = _ref$top === void 0 ? "125%" : _ref$top,
+      top = _ref$top === void 0 ? "115%" : _ref$top,
       _ref$left = _ref.left,
-      left = _ref$left === void 0 ? "-100%" : _ref$left,
+      left = _ref$left === void 0 ? "-165%" : _ref$left,
       _ref$menuContent = _ref.menuContent,
       menuContent = _ref$menuContent === void 0 ? [] : _ref$menuContent,
       _ref$visible = _ref.visible,
@@ -36559,7 +36600,7 @@ var NavMenuDesktop = function NavMenuDesktop(_ref) {
     extraStyles: "position: relative; ".concat(menuCarat),
     background: themeValues.backgroundColor,
     borderRadius: "5px",
-    boxShadow: "0px 3px 8px 0px ".concat(themeValues.shadowColor, ", 0px 2px 14px 0px ").concat(themeValues.shadowColor, ";"),
+    boxShadow: "0px 1px 8px -1px rgba(0, 0, 0, 0.3), 0px 1px 4px 0px ".concat(themeValues.shadowColor, ", 0px 7px 32px 0px ").concat(themeValues.shadowColor),
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
     onFocus: onFocus,
@@ -40674,6 +40715,7 @@ exports.Breadcrumb = Breadcrumbs;
 exports.ButtonWithAction = ButtonWithAction;
 exports.ButtonWithLink = ButtonWithLink;
 exports.CalendarIcon = CalendarIcon;
+exports.CarrotIcon = CarrotIcon$1;
 exports.Center = Center;
 exports.CenterSingle = CenterSingle$1;
 exports.CenterStack = CenterStack$1;

package/package.json

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

package/src/components/atoms/icons/CarrotIcon.js

@@ -0,0 +1,45 @@
+import React from "react";
+import { fallbackValues } from "./Icons.theme";
+import { themeComponent } from "../../../util/themeUtils";
+
+const CarrotIcon = ({ themeValues }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      width="10"
+      height="5"
+      viewBox="0 0 10 5"
+    >
+      <defs>
+        <path
+          id="carrot-path-1"
+          d="M6.99999958 9.9999994L11.9999993 14.9999991 16.999999 9.9999994z"
+        ></path>
+      </defs>
+      <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
+        <g transform="translate(-423 -974)">
+          <g transform="translate(372 958)">
+            <g transform="translate(44 6)">
+              <mask id="carrot-mask-2" fill="#fff">
+                <use xlinkHref="#carrot-path-1"></use>
+              </mask>
+              <use fill="#000" xlinkHref="#carrot-path-1"></use>
+              <g
+                fill={themeValues.singleIconColor}
+                fillRule="nonzero"
+                mask="url(#carrot-mask-2)"
+              >
+                <g>
+                  <path d="M0 0H24V24H0z"></path>
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+export default themeComponent(CarrotIcon, "Icons", fallbackValues, "darkMode");

package/src/components/atoms/icons/index.js

@@ -39,6 +39,7 @@ import RejectedVelocityIcon from "./RejectedVelocityIcon";
 import SuccessfulIcon from "./SuccessfulIcon";
 import VoidedIcon from "./VoidedIcon";
 import StatusUnknownIcon from "./StatusUnknownIcon";
+import CarrotIcon from "./CarrotIcon";
 
 export {
   AccountsIcon,
@@ -81,5 +82,6 @@ export {
   RejectedVelocityIcon,
   SuccessfulIcon,
   VoidedIcon,
-  StatusUnknownIcon
+  StatusUnknownIcon,
+  CarrotIcon
 };

package/src/components/molecules/nav-menu/NavMenuDesktop.js

@@ -5,8 +5,8 @@ import { themeComponent } from "../../../util/themeUtils";
 
 const NavMenuDesktop = ({
   id,
-  top = "125%",
-  left = "-100%",
+  top = "115%",
+  left = "-165%",
   menuContent = [],
   visible = true,
   onMouseEnter,
@@ -25,7 +25,7 @@ const NavMenuDesktop = ({
         extraStyles={`position: relative; ${menuCarat}`}
         background={themeValues.backgroundColor}
         borderRadius="5px"
-        boxShadow={`0px 3px 8px 0px ${themeValues.shadowColor}, 0px 2px 14px 0px ${themeValues.shadowColor};`}
+        boxShadow={`0px 1px 8px -1px rgba(0, 0, 0, 0.3), 0px 1px 4px 0px ${themeValues.shadowColor}, 0px 7px 32px 0px ${themeValues.shadowColor}`}
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
         onFocus={onFocus}