@conduction/components 2.2.49 → 2.2.51

package/package.json

@@ -1,50 +1,50 @@
-{
-  "name": "@conduction/components",
-  "version": "2.2.49",
-  "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
-  "main": "lib/index.js",
-  "scripts": {
-    "clean": "rimraf lib/",
-    "build": "npm-run-all build:**",
-    "build:tsc": "tsc",
-    "build:copyCSS": "copyfiles -u 1 src/**/*.css lib/",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/ConductionNL/conduction-components.git"
-  },
-  "keywords": ["React", "Gatsby", "Conduction", "Components"],
-  "author": "Conduction B.V.",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/ConductionNL/conduction-components/issues"
-  },
-  "homepage": "https://github.com/ConductionNL/conduction-components#readme",
-  "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.5.1",
-    "@fortawesome/free-solid-svg-icons": "^6.5.1",
-    "@fortawesome/react-fontawesome": "^0.2.0",
-    "@utrecht/component-library-react": "3.0.0",
-    "clsx": "^2.1.0",
-    "gatsby": "^5.13.3",
-    "react": "^18.2.0",
-    "react-datepicker": "^6.3.0",
-    "react-hook-form": "7.51.0",
-    "react-paginate": "^8.2.0",
-    "react-select": "5.8.0",
-    "react-tabs": "^6.0.2",
-    "react-tooltip": "^5.26.3"
-  },
-  "devDependencies": {
-    "@types/node": "^20.11.27",
-    "@types/react": "^18.2.66",
-    "@types/react-datepicker": "^6.2.0",
-    "@types/react-dom": "^18.2.22",
-    "copyfiles": "^2.4.1",
-    "npm-run-all": "^4.1.5",
-    "rimraf": "^5.0.5",
-    "tsc-hooks": "^1.1.2",
-    "typescript": "^5.4.2"
-  }
-}
+{
+  "name": "@conduction/components",
+  "version": "2.2.51",
+  "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
+  "main": "lib/index.js",
+  "scripts": {
+    "clean": "rimraf lib/",
+    "build": "npm-run-all build:**",
+    "build:tsc": "tsc",
+    "build:copyCSS": "copyfiles -u 1 src/**/*.css lib/",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ConductionNL/conduction-components.git"
+  },
+  "keywords": ["React", "Gatsby", "Conduction", "Components"],
+  "author": "Conduction B.V.",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/ConductionNL/conduction-components/issues"
+  },
+  "homepage": "https://github.com/ConductionNL/conduction-components#readme",
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@utrecht/component-library-react": "3.0.0",
+    "clsx": "^2.1.0",
+    "gatsby": "^5.13.3",
+    "react": "^18.2.0",
+    "react-datepicker": "^6.3.0",
+    "react-hook-form": "7.51.0",
+    "react-paginate": "^8.2.0",
+    "react-select": "5.8.0",
+    "react-tabs": "^6.0.2",
+    "react-tooltip": "^5.26.3"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.27",
+    "@types/react": "^18.2.66",
+    "@types/react-datepicker": "^6.2.0",
+    "@types/react-dom": "^18.2.22",
+    "copyfiles": "^2.4.1",
+    "npm-run-all": "^4.1.5",
+    "rimraf": "^5.0.5",
+    "tsc-hooks": "^1.1.2",
+    "typescript": "^5.4.2"
+  }
+}

package/src/components/badgeCounter/BadgeCounter.module.css

@@ -1,27 +1,27 @@
-:root {
-  --conduction-badge-counter-color: hsl(0 0% 0%);
-  --conduction-badge-counter-background-color: var(--skeleton-color-grey-1);
-  --conduction-badge-counter-height: var(--skeleton-size-md);
-  --conduction-badge-counter-width: var(--skeleton-size-md);
-  --conduction-badge-counter-font-size: var(--skeleton-font-size-xs);
-  --conduction-badge-counter-max-number-font-size: var(--skeleton-font-size-2xs);
-}
-
-.content {
-  display: flex;
-}
-
-.badge {
-  height: var(--conduction-badge-counter-height);
-  width: var(--conduction-badge-counter-width);
-  border-radius: 50%;
-  font-size: var(--conduction-badge-counter-font-size);
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  background-color: var(--conduction-badge-counter-background-color);
-  color: var(--conduction-badge-counter-color);
-}
-.maxNumber {
-  font-size: var(--conduction-badge-counter-max-number-font-size);
-}
+:root {
+  --conduction-badge-counter-color: hsl(0 0% 0%);
+  --conduction-badge-counter-background-color: var(--skeleton-color-grey-1);
+  --conduction-badge-counter-height: var(--skeleton-size-md);
+  --conduction-badge-counter-width: var(--skeleton-size-md);
+  --conduction-badge-counter-font-size: var(--skeleton-font-size-xs);
+  --conduction-badge-counter-max-number-font-size: var(--skeleton-font-size-2xs);
+}
+
+.content {
+  display: flex;
+}
+
+.badge {
+  height: var(--conduction-badge-counter-height);
+  width: var(--conduction-badge-counter-width);
+  border-radius: 50%;
+  font-size: var(--conduction-badge-counter-font-size);
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  background-color: var(--conduction-badge-counter-background-color);
+  color: var(--conduction-badge-counter-color);
+}
+.maxNumber {
+  font-size: var(--conduction-badge-counter-max-number-font-size);
+}

package/src/components/card/cardHeader/CardHeader.module.css

@@ -1,41 +1,52 @@
-:root {
-  /* --conduction-card-header-border-bottom-width: unset;
-  --conduction-card-header-border-bottom-style: unset;
-  --conduction-card-header-border-bottom-color: unset; */
-  /* --conduction-card-header-hover-border-bottom-width: unset; */
-  /* --conduction-card-header-hover-border-bottom-style: unset; */
-  /* --conduction-card-header-hover-border-bottom-color: unset; */
-  --conduction-card-header-title-color: #000000;
-  /* --conduction-card-header-title-hover-color: #000000; */
-  --conduction-card-header-date-color: #000000;
-  --conduction-card-header-date-font-size: 16px;
-  --conduction-card-header-date-font-weight: 100;
-  --conduction-card-header-date-margin-block-end: 8px;
-}
-
-.container {
-  border-bottom-width: var(--conduction-card-header-border-bottom-width);
-  border-bottom-style: var(--conduction-card-header-border-bottom-style);
-  border-bottom-color: var(--conduction-card-header-border-bottom-color);
-}
-
-.container:hover {
-  border-bottom-width: var(--conduction-card-header-hover-border-bottom-width);
-  border-bottom-style: var(--conduction-card-header-hover-border-bottom-style);
-  border-bottom-color: var(--conduction-card-header-hover-border-bottom-color);
-}
-
-.title > * {
-  color: var(--conduction-card-header-title-color) !important;
-}
-
-.title:hover > * {
-  color: var(--conduction-card-header-title-hover-color, var(--conduction-card-header-title-color)) !important;
-}
-
-.date {
-  color: var(--conduction-card-header-date-color);
-  font-size: var(--conduction-card-header-date-font-size);
-  font-weight: var(--conduction-card-header-date-font-weight);
-  margin-block-end: var(--conduction-card-header-date-margin-block-end);
-}
+:root {
+  /* --conduction-card-header-border-bottom-width: unset;
+  --conduction-card-header-border-bottom-style: unset;
+  --conduction-card-header-border-bottom-color: unset; */
+  /* --conduction-card-header-hover-border-bottom-width: unset; */
+  /* --conduction-card-header-hover-border-bottom-style: unset; */
+  /* --conduction-card-header-hover-border-bottom-color: unset; */
+  --conduction-card-header-title-color: #000000;
+  /* --conduction-card-header-title-text-decoration: none; */
+  /* --conduction-card-header-title-text-underline-offset: 2px; */
+  /* --conduction-card-header-title-hover-color: #000000; */
+  /* --conduction-card-header-title-hover-text-decoration: none; */
+  /* --conduction-card-header-title-hover-text-underline-offset: 2px; */
+
+  --conduction-card-header-date-color: #000000;
+  --conduction-card-header-date-font-size: 16px;
+  --conduction-card-header-date-font-weight: 100;
+  /* --conduction-card-header-date-font-style: normal; */
+  --conduction-card-header-date-margin-block-end: 8px;
+}
+
+.container {
+  border-bottom-width: var(--conduction-card-header-border-bottom-width);
+  border-bottom-color: var(--conduction-card-header-border-bottom-color);
+  border-bottom-style: var(--conduction-card-header-border-bottom-style);
+}
+
+.container:hover {
+  border-bottom-width: var(--conduction-card-header-hover-border-bottom-width);
+  border-bottom-style: var(--conduction-card-header-hover-border-bottom-style);
+  border-bottom-color: var(--conduction-card-header-hover-border-bottom-color);
+}
+
+.title > * {
+  color: var(--conduction-card-header-title-color) !important;
+  text-decoration: var(--conduction-card-header-title-text-decoration) !important;
+  text-underline-offset: var(--conduction-card-header-title-text-underline-offset) !important;
+}
+
+.title:hover > * {
+  color: var(--conduction-card-header-title-hover-color, var(--conduction-card-header-title-color)) !important;
+  text-decoration: var(--conduction-card-header-title-hover-text-decoration, var(--conduction-card-header-title-text-decoration)) !important;
+  text-underline-offset: var(--conduction-card-header-title-hover-text-underline-offset, var(--conduction-card-header-title-text-underline-offset)) !important;
+}
+
+.date {
+  color: var(--conduction-card-header-date-color);
+  font-size: var(--conduction-card-header-date-font-size);
+  font-weight: var(--conduction-card-header-date-font-weight);
+  font-style: var(--conduction-card-header-date-font-style);
+  margin-block-end: var(--conduction-card-header-date-margin-block-end);
+}

package/src/components/card/cardWrapper/CardWrapper.module.css

@@ -3,23 +3,26 @@
   /* --conduction-card-wrapper-border-width: unset; */
   /* --conduction-card-wrapper-border-style: unset; */
   /* --conduction-card-wrapper-border-color: unset; */
+  --conduction-card-wrapper-border-radius: 16px;
   /* --conduction-card-wrapper-border-bottom-width: unset; */
   /* --conduction-card-wrapper-border-bottom-style: unset; */
   /* --conduction-card-wrapper-border-bottom-color: unset; */
   /* --conduction-card-wrapper-box-shadow: unset; */
+  /* --conduction-card-wrapper-hover-background-color: unset; */
   /* --conduction-card-wrapper-hover-border-width: unset; */
   /* --conduction-card-wrapper-hover-border-style: unset; */
   /* --conduction-card-wrapper-hover-border-color: unset; */
+  /* --conduction-card-wrapper-hover-border-radius: 16px; */
   /* --conduction-card-wrapper-hover-border-bottom-width: unset; */
   /* --conduction-card-wrapper-hover-border-bottom-style: unset; */
   /* --conduction-card-wrapper-hover-border-bottom-color: unset; */
-  --conduction-card-wrapper-border-radius: 16px;
+  /* --conduction-card-wrapper-hover-box-shadow: unset; */
   --conduction-card-wrapper-color: #000000;
-  /* --conduction-card-wrapper-hover-background-color: unset; */
   --conduction-card-wrapper-padding-inline-end: 18px;
   --conduction-card-wrapper-padding-inline-start: 18px;
   --conduction-card-wrapper-padding-block-end: 18px;
   --conduction-card-wrapper-padding-block-start: 18px;
+  /* --conduction-card-wrapper-transition: unset; */
 }
 
 .container {
@@ -28,6 +31,8 @@
   position: relative;
   box-shadow: var(--conduction-card-wrapper-box-shadow);
 
+  transition: var(--conduction-card-wrapper-transition);
+
   border-radius: var(--conduction-card-wrapper-border-radius);
   border-width: var(--conduction-card-wrapper-border-width);
   border-style: var(--conduction-card-wrapper-border-style);
@@ -47,6 +52,9 @@
   color: var(--conduction-card-wrapper-hover-color, var(--conduction-card-wrapper-color));
   cursor: pointer;
 
+  box-shadow: var(--conduction-card-wrapper-hover-box-shadow, var(--conduction-card-wrapper-box-shadow));
+
+  border-radius: var(--conduction-card-wrapper-hover-border-radius, var(--conduction-card-wrapper-border-radius));
   border-width: var(--conduction-card-wrapper-hover-border-width, var(--conduction-card-wrapper-border-width));
   border-style: var(--conduction-card-wrapper-hover-border-style, var(--conduction-card-wrapper-border-style));
   border-color: var(--conduction-card-wrapper-hover-border-color, var(--conduction-card-wrapper-border-color));

package/src/components/card/infoCard/InfoCard.module.css

@@ -1,26 +1,26 @@
-.container {
-  background-color: var(--skeleton-color-grey-1);
-  border-radius: var(--skeleton-border-radius-md);
-  padding-inline-start: var(--skeleton-size-md);
-  padding-inline-end: var(--skeleton-size-md);
-  padding-block-start: var(--skeleton-size-md);
-  padding-block-end: var(--skeleton-size-md);
-}
-
-.container > * {
-  display: block;
-}
-
-.container > *:not(:last-child) {
-  margin-block-end: var(--skeleton-size-xs);
-}
-
-.container > .title {
-  font-weight: var(--skeleton-font-weight-bold);
-  font-size: var(--skeleton-font-size-xl);
-  color: var(--skeleton-color-black);
-}
-
-.content {
-  color: var(--skeleton-color-black);
-}
+.container {
+  background-color: var(--skeleton-color-grey-1);
+  border-radius: var(--skeleton-border-radius-md);
+  padding-inline-start: var(--skeleton-size-md);
+  padding-inline-end: var(--skeleton-size-md);
+  padding-block-start: var(--skeleton-size-md);
+  padding-block-end: var(--skeleton-size-md);
+}
+
+.container > * {
+  display: block;
+}
+
+.container > *:not(:last-child) {
+  margin-block-end: var(--skeleton-size-xs);
+}
+
+.container > .title {
+  font-weight: var(--skeleton-font-weight-bold);
+  font-size: var(--skeleton-font-size-xl);
+  color: var(--skeleton-color-black);
+}
+
+.content {
+  color: var(--skeleton-color-black);
+}

package/src/components/codeBlock/CodeBlock.module.css

@@ -1,6 +1,6 @@
-.code {
-  margin-block: var(--skeleton-size-sm);
-  background-color: var(--skeleton-color-grey-1);
-  border-radius: var(--skeleton-size-2xs);
-  padding: var(--skeleton-size-lg);
-}
+.code {
+  margin-block: var(--skeleton-size-sm);
+  background-color: var(--skeleton-color-grey-1);
+  border-radius: var(--skeleton-size-2xs);
+  padding: var(--skeleton-size-lg);
+}

package/src/components/formFields/checkbox/Checkbox.module.css

@@ -103,6 +103,10 @@
   box-sizing: border-box;
 }
 
+.checkbox:hover + label {
+  color: var(--conduction-input-checkbox-label-hover-color, var(--conduction-input-checkbox-label-color, var(--utrecht-document-color)));
+
+}
 .checkbox:hover + label::before {
   content: " ";
   display: inline-block;

package/src/components/formFields/date/Date.module.css

@@ -1,12 +1,12 @@
-.container {
-  display: flex;
-}
-
-.calendar {
-  display: flex;
-}
-
-.calendar > div::before,
-.calendar > div::after {
-  display: none;
-}
+.container {
+  display: flex;
+}
+
+.calendar {
+  display: flex;
+}
+
+.calendar > div::before,
+.calendar > div::after {
+  display: none;
+}

package/src/components/formFields/select/select.tsx

@@ -11,7 +11,7 @@ export type TSelectOption = { label: string; value: string };
 export type TGroupedSelectOption = { label: string; options: TSelectOption[] };
 
 interface ISelectProps {
-  control: Control<FieldValues, any>;
+  control: Control<any, any>;
   options: TSelectOption[] | TGroupedSelectOption[];
   name: string;
   ariaLabel: string;

package/src/components/imageDivider/imageDivider.module.css

@@ -1,5 +1,5 @@
-.divider {
-  display: block;
-  object-fit: cover;
-  width: 100%;
-}
+.divider {
+  display: block;
+  object-fit: cover;
+  width: 100%;
+}

package/src/components/metaIcon/MetaIcon.module.css

@@ -1,29 +1,29 @@
-:root {
-  --conduction-meta-icon-icon-size: var(--skeleton-size-lg);
-  --conduction-meta-icon-icon-color: var(--skeleton-color-secondary-4);
-}
-
-.container {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-}
-
-.container > *:not(:last-child) {
-  margin-block-end: var(--skeleton-size-xs);
-}
-
-.icon {
-  color: var(--conduction-meta-icon-icon-color);
-  height: var(--conduction-meta-icon-icon-size);
-  width: var(--conduction-meta-icon-icon-size);
-}
-
-.icon > svg {
-  height: 100%;
-  width: 100%;
-}
-
-.value {
-  font-weight: var(--skeleton-font-weight-bold);
-}
+:root {
+  --conduction-meta-icon-icon-size: var(--skeleton-size-lg);
+  --conduction-meta-icon-icon-color: var(--skeleton-color-secondary-4);
+}
+
+.container {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.container > *:not(:last-child) {
+  margin-block-end: var(--skeleton-size-xs);
+}
+
+.icon {
+  color: var(--conduction-meta-icon-icon-color);
+  height: var(--conduction-meta-icon-icon-size);
+  width: var(--conduction-meta-icon-icon-size);
+}
+
+.icon > svg {
+  height: 100%;
+  width: 100%;
+}
+
+.value {
+  font-weight: var(--skeleton-font-weight-bold);
+}

package/src/components/quoteWrapper/QuoteWrapper.module.css

@@ -1,12 +1,12 @@
-:root {
-  --conduction-quote-wrapper-border-width: var(--skeleton-size-sm);
-  --conduction-quote-wrapper-border-color: var(--skeleton-color-grey-1);
-  --conduction-quote-wrapper-padding-inline: var(--skeleton-size-lg);
-}
-
-.container {
-  border-left-width: var(--conduction-quote-wrapper-border-width);
-  border-left-style: solid;
-  border-left-color: var(--conduction-quote-wrapper-border-color);
-  padding-inline-start: var(--conduction-quote-wrapper-padding-inline);
-}
+:root {
+  --conduction-quote-wrapper-border-width: var(--skeleton-size-sm);
+  --conduction-quote-wrapper-border-color: var(--skeleton-color-grey-1);
+  --conduction-quote-wrapper-padding-inline: var(--skeleton-size-lg);
+}
+
+.container {
+  border-left-width: var(--conduction-quote-wrapper-border-width);
+  border-left-style: solid;
+  border-left-color: var(--conduction-quote-wrapper-border-color);
+  padding-inline-start: var(--conduction-quote-wrapper-padding-inline);
+}

package/src/components/tabs/Tabs.module.css

@@ -167,6 +167,7 @@
   background-color: var(--conduction-tabs-tab-hover-background-color);
   color: var(--conduction-tabs-tab-hover-color);
   text-decoration: var(--conduction-tabs-tab-hover-text-decoration);
+  font-weight: var(--conduction-tabs-tab-hover-font-weight, var(--conduction-tabs-tab-font-weight));
 }
 
 .tabList {

package/src/components/tabs/Tabs.tsx

@@ -17,7 +17,7 @@ import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons
 
 // Tabs
 export const Tabs: ReactTabsFunctionComponent<TabsProps> = ({ children, ...otherProps }) => (
-  <RTabs className={styles.tabs} {...otherProps}>
+  <RTabs selectedIndex={0} className={styles.tabs} {...otherProps}>
     {children}
   </RTabs>
 );
@@ -102,7 +102,7 @@ TabList.tabsRole = "TabList";
 
 // Tab
 export const Tab: ReactTabsFunctionComponent<TabProps> = ({ children, ...otherProps }) => (
-  <RTab className={styles.tab} {...otherProps}>
+  <RTab tabIndex="0" className={styles.tab} {...otherProps}>
     {children}
   </RTab>
 );

package/src/components/tag/Tag.module.css

@@ -1,44 +1,44 @@
-:root {
-  --conduction-tag-font-size: var(--skeleton-font-size-sm);
-  --conduction-tag-color: var(--skeleton-black);
-  --conduction-tag-background-color: var(--skeleton-color-grey-1);
-  --conduction-tag-border-radius: var(--skeleton-border-radius-md);
-  --conduction-tag-padding: var(--skeleton-size-xs);
-  --conduction-tag-icon-margin-inline-end: var(--skeleton-size-2xs);
-  --conduction-tag-remove-background-color: #ffbdad;
-  --conduction-tag-remove-text-color: #e44f2a;
-}
-
-.tag {
-  display: inline-block;
-  width: fit-content;
-  font-size: var(--conduction-tag-font-size);
-  color: var(--conduction-tag-color);
-  background-color: var(--conduction-tag-background-color);
-  padding-inline-start: var(--conduction-tag-padding);
-  padding-inline-end: var(--conduction-tag-padding);
-  padding-block-start: var(--conduction-tag-padding);
-  padding-block-end: var(--conduction-tag-padding);
-}
-
-.tag > *:not(:last-child) {
-  margin-inline-end: var(--conduction-tag-icon-margin-inline-end);
-}
-
-.clickable :hover {
-  cursor: pointer;
-}
-
-.remove {
-  padding-inline-end: 4px;
-}
-
-.tagContainer {
-  display: flex;
-}
-
-.removeTag:hover {
-  cursor: pointer;
-  background-color: var(--conduction-tag-remove-background-color);
-  color: var(--conduction-tag-remove-text-color);
-}
+:root {
+  --conduction-tag-font-size: var(--skeleton-font-size-sm);
+  --conduction-tag-color: var(--skeleton-black);
+  --conduction-tag-background-color: var(--skeleton-color-grey-1);
+  --conduction-tag-border-radius: var(--skeleton-border-radius-md);
+  --conduction-tag-padding: var(--skeleton-size-xs);
+  --conduction-tag-icon-margin-inline-end: var(--skeleton-size-2xs);
+  --conduction-tag-remove-background-color: #ffbdad;
+  --conduction-tag-remove-text-color: #e44f2a;
+}
+
+.tag {
+  display: inline-block;
+  width: fit-content;
+  font-size: var(--conduction-tag-font-size);
+  color: var(--conduction-tag-color);
+  background-color: var(--conduction-tag-background-color);
+  padding-inline-start: var(--conduction-tag-padding);
+  padding-inline-end: var(--conduction-tag-padding);
+  padding-block-start: var(--conduction-tag-padding);
+  padding-block-end: var(--conduction-tag-padding);
+}
+
+.tag > *:not(:last-child) {
+  margin-inline-end: var(--conduction-tag-icon-margin-inline-end);
+}
+
+.clickable :hover {
+  cursor: pointer;
+}
+
+.remove {
+  padding-inline-end: 4px;
+}
+
+.tagContainer {
+  display: flex;
+}
+
+.removeTag:hover {
+  cursor: pointer;
+  background-color: var(--conduction-tag-remove-background-color);
+  color: var(--conduction-tag-remove-text-color);
+}

package/src/components/topNav/index.ts

@@ -1,4 +1,4 @@
-import { PrimaryTopNav } from "./primaryTopNav/PrimaryTopNav";
-import { SecondaryTopNav } from "./secondaryTopNav/SecondaryTopNav";
-
-export { PrimaryTopNav, SecondaryTopNav };
+import { PrimaryTopNav } from "./primaryTopNav/PrimaryTopNav";
+import { SecondaryTopNav } from "./secondaryTopNav/SecondaryTopNav";
+
+export { PrimaryTopNav, SecondaryTopNav };