@rio-cloud/rio-uikit 0.16.2-beta.8 → 0.16.2

package/lib/es/styles/design/callouts.less

@@ -1,4 +1,6 @@
 .callout {
+  position: relative;
+  overflow: hidden;
   background-color: var(--color-white);
   border-radius: @border-radius-default;
   border: 1px solid var(--gray-light);
@@ -8,20 +10,19 @@
     margin-bottom: 0;
   }
 
-  // default
-  // primary
-  // secondary
-  // info
-  // success
-  // warning
-  // danger
-  &-default {
-    box-shadow: inset 5px 0 0 0 var(--gray);
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 5px;
+    background-color: var(--gray);
   }
 
   each(@colors-brand-and-status-map, {
-    &-@{key} {
-      box-shadow: inset 5px 0 0 0 @value;
+    &-@{key}::before {
+      background-color: @value;
     }
   })
 }

package/lib/es/styles/design/colors.less

@@ -83,6 +83,15 @@ each(@colors-map-marker-map, {
   }
 })
 
+each(@colors-map-marker-night-map, {
+  .bg-@{key} {
+    background-color: @value !important;
+  }
+  .hover-bg-@{key}:hover {
+    background-color: @value !important;
+  }
+})
+
 // rating-1
 // rating-2
 // rating-3
@@ -161,9 +170,9 @@ each(@colors-highlight-map, {
     .hover-bg-@{key}:hover {
       background-color: @value !important;
     }
-    .fill-@{key} {
-      fill: @value !important;
-    }
+    // .fill-@{key} {
+    //   fill: @value !important;
+    // }
   })
   .bg-coldplay-wine,
   .bg-coldplay-aubergine,
@@ -189,9 +198,9 @@ each(@colors-highlight-map, {
     .hover-bg-@{key}:hover {
       background-color: @value !important;
     }
-    .fill-@{key} {
-      fill: @value !important;
-    }
+    // .fill-@{key} {
+    //   fill: @value !important;
+    // }
   })
   .bg-warmup-crimson,
   .bg-warmup-victoria,

package/lib/es/styles/design/cols.less

@@ -13,26 +13,27 @@
     padding-right: floor((@grid-gutter-width / 2));
     //
     float: left;
+    width: 100%;
   }
-}
 
-// Columns
-.make-grid-columns();
-
-// col-
-.make-grid(~'-');
-.make-grid(~'-xs-'); // BS remains
-
-// col-sm
-// col-ls
-// col-md
-// col-lg
-// col-xl
-each(@breakpoint-ls-to-xl, {
-  @media (min-width: @value) {
-    .make-grid(~'-@{key}-');
-  }
-})
+  // Columns
+  .make-grid-columns();
+
+  // col-
+  .make-grid(~'-');
+  .make-grid(~'-xs-'); // BS remains
+
+  // col-ls
+  // col-sm
+  // col-md
+  // col-lg
+  // col-xl
+  each(@breakpoint-ls-to-xl, {
+    @media (min-width: @value) {
+      .make-grid(~'-@{key}-');
+    }
+  })
+}
 
 .no-gutter {
   margin-right: 0;

package/lib/es/styles/design/divide.less

@@ -0,0 +1,165 @@
+[class*="divider-y"] > :not([hidden]) ~ :not([hidden]) {
+  border-bottom-width: 0;
+  border-top-style: solid;
+}
+
+[class*="divider-x"] > :not([hidden]) ~ :not([hidden]) {
+  border-right-width: 0;
+  border-left-style: solid;
+}
+
+.divider-y-1 {
+  &> :not([hidden]) ~ :not([hidden]) {
+    border-top-width: 1px;
+  }
+}
+
+.divider-y-2 > :not([hidden]) ~ :not([hidden]) {
+  border-top-width: 2px;
+}
+
+.divider-y-3 > :not([hidden]) ~ :not([hidden]) {
+  border-top-width: 3px;
+}
+
+.divider-x-1 {
+  &> :not([hidden]) ~ :not([hidden]) {
+    border-left-width: 1px;
+  }
+}
+
+.divider-x-2 > :not([hidden]) ~ :not([hidden]) {
+  border-left-width: 2px;
+}
+
+.divider-x-3 > :not([hidden]) ~ :not([hidden]) {
+  border-left-width: 3px;
+}
+
+// coloring
+
+.divider-color {
+  // white
+  // black
+  each(@colors-text-map, {
+    &-@{key} > :not([hidden]) ~ :not([hidden]) {
+      border-color: @value !important;
+    }
+  })
+
+  // primary
+  // secondary
+  each(@colors-brand-map, {
+    &-@{key} > :not([hidden]) ~ :not([hidden]) {
+      border-color: @value !important;
+    }
+  })
+
+  // info
+  // success
+  // warning
+  // danger
+  each(@colors-status-map, {
+    &-@{key} > :not([hidden]) ~ :not([hidden]) {
+      border-color: @value !important;
+    }
+  })
+
+  // darkest
+  // darker
+  // dark
+  // gray
+  // light
+  // lighter
+  // lightest
+  each(@colors-gray-map, {
+    &-@{key} > :not([hidden]) ~ :not([hidden]) {
+      border-color: @value !important;
+    }
+  })
+
+  // map-marker-asset
+  // map-marker-poi
+  // map-marker-geofence
+  // map-marker-route
+  each(@colors-map-marker-map, {
+    &-@{key} > :not([hidden]) ~ :not([hidden]) {
+      border-color: @value !important;
+    }
+  })
+
+  each(@colors-map-marker-night-map, {
+    &-@{key} > :not([hidden]) ~ :not([hidden]) {
+      border-color: @value !important;
+    }
+  })
+
+  // rating-1
+  // rating-2
+  // rating-3
+  // rating-4
+  // rating-5
+  each(@colors-rating-map, {
+    &-@{key} > :not([hidden]) ~ :not([hidden]) {
+      border-color: @value !important;
+    }
+  })
+
+  // status-available
+  // status-driving
+  // status-resting
+  // status-working
+  each(@colors-driving-status-map, {
+    &-@{key} > :not([hidden]) ~ :not([hidden]) {
+      border-color: @value !important;
+    }
+  })
+
+  // highlight-darkest
+  // highlight-darker
+  // highlight-dark
+  // highlight
+  // highlight-light
+  // highlight-lighter
+  // highlight-lightest
+  // highlight-decent
+  each(@colors-highlight-map, {
+    &-@{key} > :not([hidden]) ~ :not([hidden]) {
+      border-color: @value !important;
+    }
+  })
+
+  // coldplay-wine
+  // coldplay-aubergine
+  // coldplay-kashmir
+  // coldplay-fountain
+  // coldplay-turquoise
+  // coldplay-bermuda
+  // coldplay-moos
+  // coldplay-primrose
+  // coldplay-khaki
+  // & when (@buildColdplayColors = true) {
+  //   each(@colors-coldplay-map, {
+  //     &-@{key} > :not([hidden]) ~ :not([hidden]) {
+  //       border-color: @value !important;
+  //     }
+  //   })
+  // }
+
+  // warmup-crimson
+  // warmup-victoria
+  // warmup-cadillac
+  // warmup-raspberry
+  // warmup-cerise
+  // warmup-charm
+  // warmup-salmon
+  // warmup-cherokee
+  // warmup-corn
+  // & when (@buildWarmupColors = true) {
+  //   each(@colors-warmup-map, {
+  //     &-@{key} > :not([hidden]) ~ :not([hidden]) {
+  //       border-color: @value !important;
+  //     }
+  //   })
+  // }
+}

package/lib/es/styles/design/divider.less

@@ -0,0 +1,90 @@
+.divider-y {
+  > * ~ * {
+    border-bottom-width: 0;
+    border-color: var(--gray-light);
+    border-top-style: solid;
+    border-top-width: 1px;
+  }
+}
+
+.divider-x {
+  > * ~ * {
+    border-color: var(--gray-light);
+    border-left-style: solid;
+    border-left-width: 1px;
+    border-right-width: 0;
+  }
+}
+
+[class*="divider-y"] {
+  &> * ~ * {
+    border-bottom-width: 0 !important;
+  }
+
+  &.divider-style-solid > * ~ * { border-top-style: solid !important}
+  &.divider-style-dotted > * ~ * { border-top-style: dotted !important}
+  &.divider-style-dashed > * ~ * { border-top-style: dashed !important}
+}
+
+[class*="divider-x"] {
+  &> * ~ * {
+    border-right-width: 0;
+  }
+
+  &.divider-style-solid > * ~ * { border-left-style: solid !important}
+  &.divider-style-dotted > * ~ * { border-left-style: dotted !important}
+  &.divider-style-dashed > * ~ * { border-left-style: dashed !important}
+}
+
+.divider-y-1 {
+  &> * ~ * {
+    border-top-width: 1px !important;
+  }
+}
+
+.divider-y-2 > * ~ * {
+  border-top-width: 2px !important;
+}
+
+.divider-y-3 > * ~ * {
+  border-top-width: 3px !important;
+}
+
+.divider-x-1 {
+  &> * ~ * {
+    border-left-width: 1px !important;
+  }
+}
+
+.divider-x-2 > * ~ * {
+  border-left-width: 2px !important;
+}
+
+.divider-x-3 > * ~ * {
+  border-left-width: 3px !important;
+}
+
+// coloring
+
+.divider-color {
+  // white
+  // black
+  each(@colors-text-map, {
+    &-@{key} > * ~ * {
+      border-color: @value !important;
+    }
+  })
+
+  // darkest
+  // darker
+  // dark
+  // gray
+  // light
+  // lighter
+  // lightest
+  each(@colors-gray-map, {
+    &-@{key} > * ~ * {
+      border-color: @value !important;
+    }
+  })
+}

package/lib/es/styles/design/responsive/_imports.less

@@ -11,6 +11,7 @@
   @import (multiple) "padding.less";
   @import (multiple) "position.less";
   @import (multiple) "sizing.less";
+  @import (multiple) "spacing.less";
   @import (multiple) "text.less";
 }
 

package/lib/es/styles/design/responsive/gap.less

@@ -26,16 +26,8 @@ each(@spacings-px, {
 
 // gap pct
 each(@spacings-pct, {
-  // x & y
-  // .gap-@{key}@{suffix} {
-  //   gap: @value !important;
-  // }
   // x
   .column-gap-@{key}@{suffix} {
     column-gap: @value !important;
   }
-  // y
-  // .row-gap-@{key}@{suffix} {
-  //   row-gap: @value !important;
-  // }
 })

package/lib/es/styles/design/responsive/spacing.less

@@ -0,0 +1,25 @@
+// spacing px
+each(@spacings-px, {
+  .space-x-@{key}@{suffix} > * ~ * {
+    margin-left: @value !important;
+    margin-right: 0 !important;
+  }
+
+  .space-y-@{key}@{suffix} > * ~ * {
+    margin-top: @value !important;
+    margin-bottom: 0 !important;
+  }
+})
+
+// nagative 1-3 px
+each(@spacings--px, {
+  .space-x-@{key}@{suffix} > * ~ * {
+    margin-left: @value !important;
+    margin-right: 0 !important;
+  }
+
+  .space-y-@{key}@{suffix} > * ~ * {
+    margin-top: @value !important;
+    margin-bottom: 0 !important;
+  }
+})

package/lib/es/styles/design/text.less

@@ -55,7 +55,6 @@ each(@colors-gray-map, {
 // map-marker-poi
 // map-marker-geofence
 // map-marker-route
-.color-map-marker-text { color: var(--color-map-marker-text) !important }
 each(@colors-map-marker-map, {
   .text-color-@{key},
   .hover-text-color-@{key}:hover {
@@ -63,6 +62,16 @@ each(@colors-map-marker-map, {
   }
 })
 
+each(@colors-map-marker-night-map, {
+  .text-color-@{key},
+  .hover-text-color-@{key}:hover {
+    color: @value !important;
+  }
+})
+
+// .text-color-map-marker-text { color: var(--color-map-marker-text) !important }
+// .text-color-map-marker-text-night { color: var(--color-map-marker-text-night) !important }
+
 // rating-1
 // rating-2
 // rating-3
@@ -173,9 +182,14 @@ h2, h3, h4, h5, h6, [class*='text-size-h'] {
 
 /* Text - Decoration */
 .text-decoration-none { text-decoration: none !important }
-.text-decoration-underline { text-decoration: underline !important }
 .text-decoration-line-through { text-decoration: line-through !important }
 
+.text-decoration-underline { text-decoration: underline !important }
+.text-decoration-underline-offset-2 { text-decoration: underline !important; text-underline-offset: 2px !important }
+.text-decoration-underline-offset-3 { text-decoration: underline !important; text-underline-offset: 3px !important }
+.text-decoration-underline-offset-4 { text-decoration: underline !important; text-underline-offset: 4px !important }
+.text-decoration-underline-offset-5 { text-decoration: underline !important; text-underline-offset: 5px !important }
+
 .hover-text-decoration-underline:hover { text-decoration: underline !important }
 .hover-text-decoration-none:hover { text-decoration: none !important }
 

package/lib/es/styles/mapping/color-map.less

@@ -115,6 +115,7 @@
 // map-marker-geofence
 // map-marker-route
 @colors-map-marker-map: {
+  map-marker-text: var(--color-map-marker-text);
   map-marker-active: var(--color-map-marker-active);
   map-marker-asset: var(--color-map-marker-asset);
   map-marker-poi: var(--color-map-marker-poi);
@@ -122,6 +123,15 @@
   map-marker-route: var(--color-map-marker-route);
 }
 
+@colors-map-marker-night-map: {
+  map-marker-text-night: var(--color-map-marker-text-night);
+  map-marker-active-night: var(--color-map-marker-active-night);
+  map-marker-asset-night: var(--color-map-marker-asset-night);
+  map-marker-poi-night: var(--color-map-marker-poi-night);
+  map-marker-geofence-night: var(--color-map-marker-geofence-night);
+  map-marker-route-night: var(--color-map-marker-route-night);
+}
+
 // Color Map - Rating
 // rating-1
 // rating-2

package/lib/es/styles/mapping/spacings-map.less

@@ -1,5 +1,10 @@
 // These values must always be kept in sync with those of the demo page
 // uikit-demo/src/utils/spacings.js
+@spacings--px: {
+  -1: -1px;
+  -2: -2px;
+  -3: -3px;
+}
 
 @spacings-px: {
   1: 1px;

package/lib/es/styles/rio-uikit-core.less

@@ -42,6 +42,8 @@
 @import (less) './design/aspect-ratio.less';
 @import (less) './design/colors.less';
 @import (less) './design/border.less';
+@import (less) './design/blur.less';
+@import (less) './design/divider.less';
 @import (less) './design/cursors.less';
 @import (less) './design/custom.less';
 @import (less) './design/ellipsis.less';

package/lib/es/styles/variables/colors.json

@@ -33,6 +33,12 @@
 	"color-map-marker-geofence": "#5a4876",
 	"color-map-marker-route": "#3690ae",
 	"color-map-marker-text": "#ffffff",
+	"color-map-marker-active-night": "#ededed",
+	"color-map-marker-asset-night": "#6e757a",
+	"color-map-marker-poi-night": "#b23672",
+	"color-map-marker-geofence-night": "#79619f",
+	"color-map-marker-route-night": "#3b9fc1",
+	"color-map-marker-text-night": "#ededed",
 	"color-rating-1": "#d90000",
 	"color-rating-2": "#ff8e3c",
 	"color-rating-3": "#f8c575",

package/lib/es/styles/variables/concated_css_variables.less

@@ -33,6 +33,12 @@
 @color-map-marker-geofence-hsl: var(--color-map-marker-geofence-h), var(--color-map-marker-geofence-s), var(--color-map-marker-geofence-l);
 @color-map-marker-route-hsl: var(--color-map-marker-route-h), var(--color-map-marker-route-s), var(--color-map-marker-route-l);
 @color-map-marker-text-hsl: var(--color-map-marker-text-h), var(--color-map-marker-text-s), var(--color-map-marker-text-l);
+@color-map-marker-active-night-hsl: var(--color-map-marker-active-night-h), var(--color-map-marker-active-night-s), var(--color-map-marker-active-night-l);
+@color-map-marker-asset-night-hsl: var(--color-map-marker-asset-night-h), var(--color-map-marker-asset-night-s), var(--color-map-marker-asset-night-l);
+@color-map-marker-poi-night-hsl: var(--color-map-marker-poi-night-h), var(--color-map-marker-poi-night-s), var(--color-map-marker-poi-night-l);
+@color-map-marker-geofence-night-hsl: var(--color-map-marker-geofence-night-h), var(--color-map-marker-geofence-night-s), var(--color-map-marker-geofence-night-l);
+@color-map-marker-route-night-hsl: var(--color-map-marker-route-night-h), var(--color-map-marker-route-night-s), var(--color-map-marker-route-night-l);
+@color-map-marker-text-night-hsl: var(--color-map-marker-text-night-h), var(--color-map-marker-text-night-s), var(--color-map-marker-text-night-l);
 @color-highlight-darkest-hsl: var(--color-highlight-darkest-h), var(--color-highlight-darkest-s), var(--color-highlight-darkest-l);
 @color-highlight-darker-hsl: var(--color-highlight-darker-h), var(--color-highlight-darker-s), var(--color-highlight-darker-l);
 @color-highlight-dark-hsl: var(--color-highlight-dark-h), var(--color-highlight-dark-s), var(--color-highlight-dark-l);

package/lib/es/styles/variables/dark_colors.less

@@ -48,6 +48,13 @@
 @dark-color-map-marker-route: @color-map-marker-route;
 @dark-color-map-marker-text: @color-map-marker-text;
 
+@dark-color-map-marker-active-night: @color-map-marker-active-night;
+@dark-color-map-marker-asset-night: @color-map-marker-asset-night;
+@dark-color-map-marker-poi-night: @color-map-marker-poi-night;
+@dark-color-map-marker-geofence-night: @color-map-marker-geofence-night;
+@dark-color-map-marker-route-night: @color-map-marker-route-night;
+@dark-color-map-marker-text-night: @color-map-marker-text-night;
+
 // Color - Rating // CURRENTLY NO DIFFERENCES TO THE LIGHT THEME
 @dark-color-rating-1: @color-rating-1;
 @dark-color-rating-2: @color-rating-2;

package/lib/es/styles/variables/dark_css_variables_map.less

@@ -49,6 +49,13 @@
   // color-map-marker-route: @dark-color-map-marker-route;
   // color-map-marker-text: @dark-color-map-marker-text;
 
+  // color-map-marker-active-night: @dark-color-map-marker-active-night;
+  // color-map-marker-asset-night: @dark-color-map-marker-asset-night;
+  // color-map-marker-poi-night: @dark-color-map-marker-poi-night;
+  // color-map-marker-geofence-night: @dark-color-map-marker-geofence-night;
+  // color-map-marker-route-night: @dark-color-map-marker-route-night;
+  // color-map-marker-text-night: @dark-color-map-marker-text-night;
+
   // Color - Highlight
   color-highlight-darkest: @dark-color-highlight-darkest;
   color-highlight-darker: @dark-color-highlight-darker;

package/lib/es/styles/variables/light_colors.less

@@ -52,6 +52,13 @@
 @color-map-marker-route: #3690ae;
 @color-map-marker-text: #ffffff;
 
+@color-map-marker-active-night: #ededed;
+@color-map-marker-asset-night: #6e757a;
+@color-map-marker-poi-night: #b23672;
+@color-map-marker-geofence-night: #79619f;
+@color-map-marker-route-night: #3b9fc1;
+@color-map-marker-text-night: #ededed;
+
 // Color - Rating
 @color-rating-1: #d90000;
 @color-rating-2: #ff8e3c;

package/lib/es/styles/variables/light_css_variables_map.less

@@ -53,6 +53,13 @@
   color-map-marker-route: @color-map-marker-route;
   color-map-marker-text: @color-map-marker-text;
 
+  color-map-marker-active-night: @color-map-marker-active-night;
+  color-map-marker-asset-night: @color-map-marker-asset-night;
+  color-map-marker-poi-night: @color-map-marker-poi-night;
+  color-map-marker-geofence-night: @color-map-marker-geofence-night;
+  color-map-marker-route-night: @color-map-marker-route-night;
+  color-map-marker-text-night: @color-map-marker-text-night;
+
   // Color - Highlight
   color-highlight-darkest: @color-highlight-darkest;
   color-highlight-darker: @color-highlight-darker;

package/lib/es/themes/Volkswagen/components/applicationHeader/VolkswagenApplicationHeader.js

@@ -6,7 +6,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.VolkswagenApplicationHeader = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _isEmpty = _interopRequireDefault(require("lodash/fp/isEmpty"));
@@ -14,21 +16,26 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _ApplicationActionBar = require("../../../../components/applicationHeader/ApplicationActionBar");
 var _useResizeObserver3 = _interopRequireDefault(require("../../../../hooks/useResizeObserver"));
 var _modulePropTypes = _interopRequireDefault(require("./modulePropTypes"));
+var _excluded = ["homeRoute", "className", "appNavigator", "appNavigatorClassName", "appMenuItems", "navItems", "actionBarItems"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var VolkswagenApplicationHeader = function VolkswagenApplicationHeader(props) {
+var VolkswagenApplicationHeader = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var homeRoute = props.homeRoute,
     className = props.className,
     appNavigator = props.appNavigator,
     appNavigatorClassName = props.appNavigatorClassName,
     appMenuItems = props.appMenuItems,
     navItems = props.navItems,
-    actionBarItems = props.actionBarItems;
+    actionBarItems = props.actionBarItems,
+    remainingProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var actionBarRef = (0, _react.useRef)();
   var _useResizeObserver = (0, _useResizeObserver3["default"])(),
     _useResizeObserver2 = (0, _slicedToArray2["default"])(_useResizeObserver, 2),
     navRef = _useResizeObserver2[0],
     contentRect = _useResizeObserver2[1].contentRect;
+  (0, _react.useImperativeHandle)(ref, function () {
+    return navRef;
+  }, []);
 
   // const getContentRect = useCallback(key => contentRect && Math.round(contentRect[key]), [contentRect]);
   // const containerWidth = getContentRect('width') || 0;
@@ -37,9 +44,11 @@ var VolkswagenApplicationHeader = function VolkswagenApplicationHeader(props) {
   // const hasActionBarItems = !isEmpty(actionBarItems);
 
   var classNames = (0, _classnames["default"])('ApplicationHeader VolkswagenApplicationHeader', 'user-select-none', className && className);
-  return /*#__PURE__*/_react["default"].createElement("nav", {
+  return /*#__PURE__*/_react["default"].createElement("nav", (0, _extends2["default"])({}, remainingProps, {
     className: classNames,
     ref: navRef
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "width-100pct"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "brand"
   }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -57,8 +66,8 @@ var VolkswagenApplicationHeader = function VolkswagenApplicationHeader(props) {
   })), /*#__PURE__*/_react["default"].createElement(_ApplicationActionBar.ApplicationActionBar, {
     nodeRef: actionBarRef,
     items: actionBarItems
-  }));
-};
+  })));
+});
 exports.VolkswagenApplicationHeader = VolkswagenApplicationHeader;
 var _default = VolkswagenApplicationHeader;
 exports["default"] = _default;