dibk-design 6.5.2 → 7.0.0

package/dist/components/ErrorMessage.module.scss

@@ -1,4 +1,6 @@
-@import "../style/global.scss";
+// Variables
+@use "../style/abstracts/variables/colors";
+@use "../style/abstracts/variables/typography";
 
 @keyframes messageIn {
     0% {
@@ -10,12 +12,12 @@
 .errorMessage {
     display: flex;
     align-items: center;
-    font-family: $default-font;
+    font-family: typography.$default-font;
     font-size: 16px;
     font-weight: 400;
     line-height: 24px;
     letter-spacing: 0.01em;
-    color: $color-error;
+    color: colors.$color-error;
     margin: 4px 0 0;
     animation: 1000ms cubic-bezier(0.22, 1, 0.36, 1) 0s 1 normal none running messageIn;
     .errorSign {

package/dist/components/Footer.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Container = _interopRequireDefault(require("./Container"));
 var _FooterModule = _interopRequireDefault(require("./Footer.module.scss"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Footer = props => {
   return _react.default.createElement("footer", {
     className: _FooterModule.default.footer

package/dist/components/Footer.module.scss

@@ -1,7 +1,8 @@
-@import "../style/global.scss";
+// Variables
+@use "../style/abstracts/variables/colors";
 
 .footer {
-  background-color: var(--color-primary, $color-primary);
+  background-color: var(--color-primary, colors.$color-primary);
   padding: 16px 0;
   text-align: right;
   * {

package/dist/components/Header.js

@@ -8,21 +8,20 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _HeaderModule = _interopRequireDefault(require("./Header.module.scss"));
 var _helpers = require("../functions/helpers");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Header = props => {
-  var _props$htmlTag, _props$label, _props$content;
   const bigClass = props.big ? _HeaderModule.default.bigHeader : "";
-  const htmlTag = (_props$htmlTag = props.htmlTag) !== null && _props$htmlTag !== void 0 && _props$htmlTag.length ? props.htmlTag : "h".concat(props.size);
+  const htmlTag = props.htmlTag?.length ? props.htmlTag : `h${props.size}`;
   const headerClass = _HeaderModule.default.header;
-  const headerSizeClass = _HeaderModule.default["size-".concat(props.size)];
+  const headerSizeClass = _HeaderModule.default[`size-${props.size}`];
   let headerElement = _react.default.createElement(htmlTag, {
     className: (0, _helpers.classNameArrayToClassNameString)([headerClass, headerSizeClass, bigClass]),
     id: props.id || null,
     htmlFor: props.htmlFor || null,
-    style: props !== null && props !== void 0 && (_props$label = props.label) !== null && _props$label !== void 0 && _props$label.length ? {
-      "--label": "\"".concat(props.label, "\"")
+    style: props?.label?.length ? {
+      "--label": `"${props.label}"`
     } : null
-  }, !!((_props$content = props.content) !== null && _props$content !== void 0 && _props$content.length) ? props.content : props.children);
+  }, !!props.content?.length ? props.content : props.children);
   return _react.default.createElement("div", {
     className: _HeaderModule.default.headerContainer
   }, " ", headerElement, " ");

package/dist/components/Header.module.scss

@@ -1,4 +1,7 @@
-@import "../style/global.scss";
+// Variables
+@use "../style/abstracts/variables/colors";
+@use "../style/abstracts/variables/typography";
+@use "../style/abstracts/variables/viewports";
 
 .headerContainer {
 	.header {
@@ -6,27 +9,27 @@
 		font-weight: normal;
 		line-height: 1.4;
 		font-style: normal;
-		color: var(--color-heading-text, $color-heading-text);
+		color: var(--color-heading-text, colors.$color-heading-text);
 		&.size-1 {
-			font-family: $default-font;
+			font-family: typography.$default-font;
 			font-style: normal;
 			font-size: 28px;
 			font-weight: 600;
 			line-height: 36px;
 			letter-spacing: 0px;
 			&.bigHeader {
-				font-family: $default-font;
+				font-family: typography.$default-font;
 				font-size: 40px;
 				line-height: 1.2;
 				overflow: hidden;
 				text-overflow: ellipsis;
-				@media only screen and (min-width: $screen-sm) {
+				@media only screen and (min-width: viewports.$screen-sm) {
 					font-size: 50px;
 				}
 			}
 		}
 		&.size-2 {
-			font-family: $default-font;
+			font-family: typography.$default-font;
 			font-style: normal;
 			font-size: 22px;
 			font-weight: 600;
@@ -34,7 +37,7 @@
 			letter-spacing: 0px;
 		}
 		&.size-3 {
-			font-family: $default-font;
+			font-family: typography.$default-font;
 			font-style: normal;
 			font-size: 18px;
 			font-weight: 600;
@@ -42,7 +45,7 @@
 			letter-spacing: 0px;
 		}
 		&.size-4 {
-			font-family: $default-font;
+			font-family: typography.$default-font;
 			font-style: italic;
 			font-size: 17px;
 			font-weight: normal;
@@ -50,7 +53,7 @@
 			letter-spacing: 0px;
 		}
 		&.size-5 {
-			font-family: $default-font;
+			font-family: typography.$default-font;
 			font-style: normal;
 			font-size: 15px;
 			font-weight: 600;
@@ -61,13 +64,13 @@
 			&::before {
 				content: var(--label);
 				display: block;
-				font-family: $default-font;
+				font-family: typography.$default-font;
 				font-size: 12px;
 				font-weight: 600;
 				line-height: 18px;
 				letter-spacing: 0px;
 				text-transform: uppercase;
-				color: var(--color-heading-text, $color-heading-text);
+				color: var(--color-heading-text, colors.$color-heading-text);
 				opacity: 0.75;
 				margin-bottom: 0.3em;
 			}

package/dist/components/InfoBox.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _InfoBoxModule = _interopRequireDefault(require("./InfoBox.module.scss"));
 var _infoSign = _interopRequireDefault(require("../assets/svg/info-sign.svg?url"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const InfoBox = props => {
   return _react.default.createElement("div", {
     className: _InfoBoxModule.default.infoBox

package/dist/components/InfoBox.module.scss

@@ -1,4 +1,7 @@
-@import "../style/global.scss";
+// Variables
+@use "../style/abstracts/variables/colors";
+@use "../style/abstracts/variables/typography";
+@use "../style/abstracts/variables/viewports";
 
 @keyframes messageIn {
     0% {
@@ -9,9 +12,9 @@
 
 .infoBox {
     background-color: #fff;
-    border: 1px solid var(--color-secondary-light, $color-secondary-light);
+    border: 1px solid var(--color-secondary-light, colors.$color-secondary-light);
     padding: 24px 24px 24px calc(1.2em + 48px);
-    font-family: $default-font;
+    font-family: typography.$default-font;
     animation: 1000ms cubic-bezier(0.22, 1, 0.36, 1) 0s 1 normal none running messageIn;
     position: relative;
     .infoSign {
@@ -31,7 +34,7 @@
         font-weight: 500;
         line-height: 1.3;
         margin: 0;
-        @media only screen and (min-width: $screen-sm) {
+        @media only screen and (min-width: viewports.$screen-sm) {
             font-size: 24px;
         }
     }

package/dist/components/InputField.js

@@ -13,27 +13,25 @@ var _generators = require("../functions/generators");
 var _helpers = require("../functions/helpers");
 var _asterisk = _interopRequireDefault(require("../assets/svg/asterisk.svg?url"));
 var _InputFieldModule = _interopRequireDefault(require("./InputField.module.scss"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const InputField = props => {
-  var _props$width;
   const formatDate = inputDate => {
     if (!inputDate) {
       return null;
     }
     const date = new Date(inputDate);
     const year = date.getFullYear();
-    const month = date.getMonth() + 1 < 10 ? "0".concat(date.getMonth() + 1) : date.getMonth() + 1;
-    const day = date.getDate() < 10 ? "0".concat(date.getDate()) : date.getDate();
-    return "".concat(day, ".").concat(month, ".").concat(year);
+    const month = date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1;
+    const day = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate();
+    return `${day}.${month}.${year}`;
   };
   const renderValueAsText = (value, defaultContent) => {
     return props.type === "date" ? value ? formatDate(value) : defaultContent : value ? value : defaultContent;
   };
   const getErrorElementId = () => {
-    return "".concat(props.id, "-errorMessage");
+    return `${props.id}-errorMessage`;
   };
   const getInputElementProps = (defaultValue, defaultKey, styleRules) => {
-    var _props$errorMessage, _props$ariaDescribed;
     return {
       name: props.name,
       readOnly: props.readOnly,
@@ -42,7 +40,7 @@ const InputField = props => {
       type: props.type,
       role: props.role,
       id: props.id,
-      key: defaultKey || "".concat(props.id, "-").concat((0, _generators.generateRandomString)(6)),
+      key: defaultKey || `${props.id}-${(0, _generators.generateRandomString)(6)}`,
       min: props.min || null,
       max: props.max || null,
       onChange: props.onChange,
@@ -50,7 +48,7 @@ const InputField = props => {
       [defaultValue ? "defaultValue" : "value"]: defaultValue || props.value,
       placeholder: props.placeholder || null,
       className: props.hasErrors ? _InputFieldModule.default.hasErrors : null,
-      "aria-describedby": props.hasErrors && !!((_props$errorMessage = props.errorMessage) !== null && _props$errorMessage !== void 0 && _props$errorMessage.length) ? getErrorElementId() : !!((_props$ariaDescribed = props["aria-describedby"]) !== null && _props$ariaDescribed !== void 0 && _props$ariaDescribed.length) ? props["aria-describedby"] : null,
+      "aria-describedby": props.hasErrors && !!props.errorMessage?.length ? getErrorElementId() : !!props["aria-describedby"]?.length ? props["aria-describedby"] : null,
       "aria-invalid": props.hasErrors ? "true" : null,
       "aria-autocomplete": props["aria-autocomplete"] || null,
       style: styleRules
@@ -59,7 +57,7 @@ const InputField = props => {
   const defaultValue = props.defaultValue ? props.defaultValue : props.value || null;
   const defaultKey = props.elementKey || null;
   const styleRules = {
-    ...(((_props$width = props.width) === null || _props$width === void 0 ? void 0 : _props$width.length) && {
+    ...(props.width?.length && {
       maxWidth: props.width
     })
   };

package/dist/components/InputField.module.scss

@@ -1,4 +1,10 @@
-@import "../style/global.scss";
+// Mixins
+@use "../style/abstracts/mixins/appearance";
+@use "../style/abstracts/mixins/border-radius";
+@use "../style/abstracts/mixins/box-shadow";
+
+// Variables
+@use "../style/abstracts/variables/colors";
 
 .inputField {
     font-size: 18px;
@@ -17,9 +23,9 @@
     }
     input,
     &.file span.input {
-        @include appearance(none);
-        @include border-radius(0);
-        @include box-shadow(none);
+        @include appearance.appearance(none);
+        @include border-radius.border-radius(0);
+        @include box-shadow.box-shadow(none);
         height: 54px;
         width: 100%;
         display: block;
@@ -27,36 +33,36 @@
         margin-bottom: 0;
         background-color: #fff;
         box-shadow: none;
-        color: $color-default-text;
+        color: colors.$color-default-text;
         font-family: inherit;
         font-size: 18px;
         box-sizing: border-box;
-        border: 1px solid var(--color-primary, $color-primary);
+        border: 1px solid var(--color-primary, colors.$color-primary);
 
         &:hover {
-            border-color: var(--color-primary, $color-primary);
+            border-color: var(--color-primary, colors.$color-primary);
         }
 
         &:focus {
-            border-color: var(--color-primary, $color-primary);
-            outline: $color-focus solid 3px;
+            border-color: var(--color-primary, colors.$color-primary);
+            outline: colors.$color-focus solid 3px;
         }
 
         &[disabled],
         &[readonly] {
-            background-color: var(--color-secondary-x-light, $color-secondary-x-light);
+            background-color: var(--color-secondary-x-light, colors.$color-secondary-x-light);
             cursor: default;
         }
 
         &.hasErrors {
-            border-color: var(--color-error, $color-error);
+            border-color: var(--color-error, colors.$color-error);
             &:focus {
-                border-color: var(--color-error, $color-error);
+                border-color: var(--color-error, colors.$color-error);
                 outline-color: #b8565d;
             }
             &[disabled],
             &[readonly] {
-                background-color: var(--color-secondary-x-light, $color-secondary-x-light);
+                background-color: var(--color-secondary-x-light, colors.$color-secondary-x-light);
                 cursor: default;
                 border-color: #afaba8;
             }

package/dist/components/Label.js

@@ -7,17 +7,16 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _LabelModule = _interopRequireDefault(require("./Label.module.scss"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Label = props => {
-  var _props$htmlTag;
   let labelProps = {
     ...props
   };
-  const htmlTag = (_props$htmlTag = props.htmlTag) !== null && _props$htmlTag !== void 0 && _props$htmlTag.length ? props.htmlTag : "label";
+  const htmlTag = props.htmlTag?.length ? props.htmlTag : "label";
   delete labelProps.inline;
   delete labelProps.normalCursor;
   delete labelProps.htmlTag;
-  const className = "".concat(_LabelModule.default.label, " ").concat(props.inline ? _LabelModule.default.inline : "", " ").concat(props.normalCursor ? _LabelModule.default.normalCursor : "");
+  const className = `${_LabelModule.default.label} ${props.inline ? _LabelModule.default.inline : ""} ${props.normalCursor ? _LabelModule.default.normalCursor : ""}`;
   const labelElement = _react.default.createElement(htmlTag, {
     ...labelProps,
     className,

package/dist/components/Label.module.scss

@@ -1,4 +1,5 @@
-@import "../style/global.scss";
+// Variables
+@use "../style/abstracts/variables/typography";
 
 .label {
     color: #000;
@@ -7,7 +8,7 @@
     font-weight: bold;
     line-height: 1.2;
     margin-bottom: 2px;
-    font-family: $default-font;
+    font-family: typography.$default-font;
     overflow-wrap: break-word;
     &.inline {
         display: inline-block;

package/dist/components/Lead.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _LeadModule = _interopRequireDefault(require("./Lead.module.scss"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Lead = _ref => {
   let {
     id,

package/dist/components/Lead.module.scss

@@ -1,11 +1,13 @@
-@import "../style/global.scss";
+// Variables
+@use "../style/abstracts/variables/colors";
+@use "../style/abstracts/variables/typography";
 
 .lead {
-	font-family: $default-font;
+	font-family: typography.$default-font;
 	font-size: 18px;
 	font-weight: 400;
 	line-height: 26px;
 	letter-spacing: 0.01em;
 	margin: 0 0 24px;
-	color: var(--color-heading-text, $color-heading-text);
+	color: var(--color-heading-text, colors.$color-heading-text);
 }

package/dist/components/List.js

@@ -8,14 +8,14 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _helpers = require("../functions/helpers");
 var _ListModule = _interopRequireDefault(require("./List.module.scss"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const List = props => {
   const renderChildElements = childElements => {
     const childElementsthroughFragments = (0, _helpers.cloneThroughFragments)(childElements);
     return childElementsthroughFragments.map((childElement, index) => {
       const childElementCopy = _react.default.cloneElement(childElement, {
         compact: props.compact,
-        key: "listItem-".concat(index)
+        key: `listItem-${index}`
       });
       return childElementCopy;
     });
@@ -25,7 +25,7 @@ const List = props => {
     const defaultListStyle = props.ordered ? "decimal" : "disc";
     const scssValueProperty = "--listStyle";
     let listElement = _react.default.createElement(listType, {
-      className: "".concat(_ListModule.default.list, " ").concat(!!props.compact ? _ListModule.default.compact : ""),
+      className: `${_ListModule.default.list} ${!!props.compact ? _ListModule.default.compact : ""}`,
       style: {
         [scssValueProperty]: props.listStyle || defaultListStyle
       }

package/dist/components/List.module.scss

@@ -1,5 +1,3 @@
-@import "../style/global.scss";
-
 .list {
     margin: 0;
     margin-left: 20px;

package/dist/components/ListItem.js

@@ -8,7 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _helpers = require("../functions/helpers");
 var _ListItemModule = _interopRequireDefault(require("./ListItem.module.scss"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const ListItem = _ref => {
   let {
     compact,

package/dist/components/ListItem.module.scss

@@ -1,8 +1,9 @@
-@import "../style/global.scss";
+// Variables
+@use "../style/abstracts/variables/colors";
 
 .listItem {
     line-height: 1.6;
-    color: var(--color-form-element, $color-form-element);
+    color: var(--color-form-element, colors.$color-form-element);
     &.compact {
         line-height: 1.4;
     }

package/dist/components/LoadingAnimation.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _LoadingAnimationModule = _interopRequireDefault(require("./LoadingAnimation.module.scss"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const LoadingAnimation = props => {
   return _react.default.createElement("div", {
     className: props.fixed ? _LoadingAnimationModule.default.loadingAnimation + " " + _LoadingAnimationModule.default.fixed : _LoadingAnimationModule.default.loadingAnimation

package/dist/components/LoadingAnimation.module.scss

@@ -1,7 +1,9 @@
-@import "../style/global.scss";
+// Mixins
+@use "../style/abstracts/mixins/box-shadow";
+@use "../style/abstracts/mixins/calc";
 
 .loadingAnimation {
-    @include box-shadow(0 8px 17px 0 rgba(0, 0, 0, 0.2));
+    @include box-shadow.box-shadow(0 8px 17px 0 rgba(0, 0, 0, 0.2));
     z-index: 6;
     background-repeat: no-repeat;
     background-position: 50% 15px;
@@ -14,7 +16,7 @@
     display: block;
     text-align: center;
     &.fixed {
-        @include calc(left, "50% - 100px");
+        @include calc.calc(left, "50% - 100px");
         top: 40%;
         margin: auto;
         position: fixed;

package/dist/components/NavigationBar.js

@@ -12,12 +12,11 @@ var _helpers = require("../functions/helpers");
 var _dibkLogoMobile = _interopRequireDefault(require("../assets/svg/dibk-logo-mobile.svg?url"));
 var _dibkLogo = _interopRequireDefault(require("../assets/svg/dibk-logo.svg?url"));
 var _NavigationBarModule = _interopRequireDefault(require("./NavigationBar.module.scss"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const NavigationBar = props => {
-  var _props$primaryListIte, _props$secondaryListI, _props$mainContentId;
   const [active, setActive] = (0, _react.useState)(false);
   const toggleList = () => {
     setActive(!active);
@@ -44,7 +43,7 @@ const NavigationBar = props => {
         });
       }
     });
-    return !!(listItems !== null && listItems !== void 0 && listItems.length) && _react.default.createElement("ul", {
+    return !!listItems?.length && _react.default.createElement("ul", {
       className: _NavigationBarModule.default.primaryList
     }, listItems);
   };
@@ -56,7 +55,7 @@ const NavigationBar = props => {
         theme: props.theme
       });
     });
-    return !!(listItems !== null && listItems !== void 0 && listItems.length) && _react.default.createElement("ul", {
+    return !!listItems?.length && _react.default.createElement("ul", {
       className: _NavigationBarModule.default.secondaryList
     }, listItems);
   };
@@ -67,7 +66,7 @@ const NavigationBar = props => {
       if (logoLink && logoLinkTitle) {
         return "";
       } else if (themeLogo && themeAppName) {
-        return "".concat(themeAppName, " logo");
+        return `${themeAppName} logo`;
       } else {
         return "DIBK logo";
       }
@@ -92,12 +91,12 @@ const NavigationBar = props => {
       title: logoLinkTitle
     }), renderLogoElement()) : renderLogoElement();
   };
-  const hasListItems = !!((_props$primaryListIte = props.primaryListItems) !== null && _props$primaryListIte !== void 0 && _props$primaryListIte.length) || !!((_props$secondaryListI = props.secondaryListItems) !== null && _props$secondaryListI !== void 0 && _props$secondaryListI.length);
+  const hasListItems = !!props.primaryListItems?.length || !!props.secondaryListItems?.length;
   return _react.default.createElement("div", {
     className: (0, _helpers.classNameArrayToClassNameString)([props.compact && _NavigationBarModule.default.compact, _NavigationBarModule.default.navigationBarContainer])
-  }, ((_props$mainContentId = props.mainContentId) === null || _props$mainContentId === void 0 ? void 0 : _props$mainContentId.length) && _react.default.createElement("a", {
+  }, props.mainContentId?.length && _react.default.createElement("a", {
     id: "main-content-link",
-    href: "#".concat(props.mainContentId),
+    href: `#${props.mainContentId}`,
     className: _NavigationBarModule.default.mainContentLink
   }, _react.default.createElement("span", {
     id: "main-content-link-text"
@@ -109,7 +108,7 @@ const NavigationBar = props => {
     className: _NavigationBarModule.default.childElements
   }, props.children), hasListItems && _react.default.createElement("button", {
     type: "button",
-    className: "".concat(_NavigationBarModule.default.menuToggle, " ").concat(active ? _NavigationBarModule.default.active : ""),
+    className: `${_NavigationBarModule.default.menuToggle} ${active ? _NavigationBarModule.default.active : ""}`,
     onClick: () => toggleList(),
     "aria-expanded": active ? "true" : "false",
     "aria-controls": "main-menu-dropdown"