dibk-design 7.7.0 → 8.0.0

package/dist/components/Theme.js

@@ -1,138 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Accordion = _interopRequireDefault(require("./Accordion"));
-var _Button = _interopRequireDefault(require("./Button"));
-var _CheckBoxList = _interopRequireDefault(require("./CheckBoxList"));
-var _CheckBoxListItem = _interopRequireDefault(require("./CheckBoxListItem"));
-var _Container = _interopRequireDefault(require("./Container"));
-var _DescriptionDetails = _interopRequireDefault(require("./DescriptionDetails"));
-var _DescriptionList = _interopRequireDefault(require("./DescriptionList"));
-var _DescriptionTerm = _interopRequireDefault(require("./DescriptionTerm"));
-var _Header = _interopRequireDefault(require("./Header"));
-var _List = _interopRequireDefault(require("./List"));
-var _ListItem = _interopRequireDefault(require("./ListItem"));
-var _NavigationBar = _interopRequireDefault(require("./NavigationBar"));
-var _Paper = _interopRequireDefault(require("./Paper"));
-var _RadioButtonList = _interopRequireDefault(require("./RadioButtonList"));
-var _RadioButtonListItem = _interopRequireDefault(require("./RadioButtonListItem"));
-var _ThemeModule = _interopRequireDefault(require("./Theme.module.scss"));
-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; }
-const Theme = _ref => {
-  let {
-    theme
-  } = _ref;
-  const renderColors = theme => {
-    return Object.keys(theme.colors).map(color => {
-      const colorClassName = _ThemeModule.default[color];
-      return _react.default.createElement(_react.Fragment, {
-        key: color
-      }, _react.default.createElement("div", null, color), _react.default.createElement("div", {
-        className: "".concat(_ThemeModule.default.color, " ").concat(colorClassName)
-      }));
-    });
-  };
-  return theme ? _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_NavigationBar.default, {
-    theme: theme
-  }), _react.default.createElement(_Container.default, {
-    maxWidth: "916px"
-  }, _react.default.createElement(_Paper.default, {
-    noMargin: true
-  }, _react.default.createElement("section", null, _react.default.createElement(_Header.default, {
-    size: 2
-  }, "Colors"), _react.default.createElement("div", {
-    className: _ThemeModule.default.colorPalette
-  }, " ", renderColors(theme))), _react.default.createElement("section", null, _react.default.createElement(_Header.default, {
-    size: 2
-  }, "Typography"), _react.default.createElement(_Header.default, {
-    size: 1,
-    htmlTag: "p"
-  }, "Heading size 1"), _react.default.createElement(_Header.default, {
-    size: 2,
-    htmlTag: "p"
-  }, "Heading size 2"), _react.default.createElement(_Header.default, {
-    size: 3,
-    htmlTag: "p"
-  }, "Heading size 3"), _react.default.createElement(_Header.default, {
-    size: 4,
-    htmlTag: "p"
-  }, "Heading size 4"), _react.default.createElement(_Header.default, {
-    size: 5,
-    htmlTag: "p"
-  }, "Heading size 5"), _react.default.createElement("p", null, "Paragraph"), _react.default.createElement("p", null, _react.default.createElement("a", {
-    href: "#theme"
-  }, "Hyperlink"))), _react.default.createElement("section", null, _react.default.createElement(_Header.default, {
-    size: 2
-  }, "Accordions"), _react.default.createElement(_Accordion.default, {
-    title: "Accordion with default color"
-  }, _react.default.createElement("p", null, "Accordion content")), _react.default.createElement(_Accordion.default, {
-    title: "Accordion with secondary color",
-    color: "secondary"
-  }, _react.default.createElement("p", null, "Accordion content"))), _react.default.createElement("section", null, _react.default.createElement(_Header.default, {
-    size: 2
-  }, "Buttons"), _react.default.createElement(_Button.default, {
-    color: "primary",
-    content: "Primary button",
-    arrow: "left"
-  }), _react.default.createElement(_Button.default, {
-    color: "secondary",
-    content: "Secondary button",
-    arrow: "right"
-  })), _react.default.createElement("section", null, _react.default.createElement(_Header.default, {
-    size: 2
-  }, "Checkboxes"), _react.default.createElement(_CheckBoxList.default, {
-    legend: "Default checkbox list"
-  }, _react.default.createElement(_CheckBoxListItem.default, {
-    onChange: () => {},
-    checked: true,
-    name: "checkboxlist",
-    id: "checkboxList-listItem-1"
-  }, "Label for checked checkbox"), _react.default.createElement(_CheckBoxListItem.default, {
-    onChange: () => {},
-    name: "checkboxlist",
-    id: "checkboxList-listItem-2"
-  }, "Label for unchecked checkbox"))), _react.default.createElement("section", null, _react.default.createElement(_Header.default, {
-    size: 2
-  }, "Radio buttons"), _react.default.createElement(_RadioButtonList.default, {
-    legend: "Default radio button list"
-  }, _react.default.createElement(_RadioButtonListItem.default, {
-    onChange: () => {},
-    inputValue: "value 1",
-    name: "radio-button-list-list-item",
-    id: "radioButtonList-listItem-1",
-    checked: true
-  }, "Checked radio button"), _react.default.createElement(_RadioButtonListItem.default, {
-    onChange: () => {},
-    inputValue: "value 2",
-    name: "radio-button-list-list-item",
-    id: "radioButtonList-listItem-2"
-  }, "Unchecked radio button"))), _react.default.createElement("section", null, _react.default.createElement(_Header.default, {
-    size: 2
-  }, "Lists"), _react.default.createElement(_Header.default, {
-    size: 3
-  }, "Unordered list"), _react.default.createElement(_List.default, null, _react.default.createElement(_ListItem.default, null, "First list item"), _react.default.createElement(_ListItem.default, null, "Second list item"), _react.default.createElement(_ListItem.default, null, "Third list item")), _react.default.createElement(_Header.default, {
-    size: 3
-  }, "Ordered list"), _react.default.createElement(_List.default, {
-    ordered: true
-  }, _react.default.createElement(_ListItem.default, null, "First list item"), _react.default.createElement(_ListItem.default, null, "Second list item"), _react.default.createElement(_ListItem.default, null, "Third list item"))), _react.default.createElement("section", null, _react.default.createElement(_Header.default, {
-    size: 2
-  }, "Description lists"), _react.default.createElement(_Header.default, {
-    size: 3
-  }, "Description list variable title width"), _react.default.createElement(_DescriptionList.default, null, _react.default.createElement(_DescriptionTerm.default, null, "First description term:"), _react.default.createElement(_DescriptionDetails.default, null, "First description details"), _react.default.createElement(_DescriptionTerm.default, null, "Second description term:"), _react.default.createElement(_DescriptionDetails.default, null, "Second description details"), _react.default.createElement(_DescriptionTerm.default, null, "Third description term:"), _react.default.createElement(_DescriptionDetails.default, null, "Third description details")), _react.default.createElement(_Header.default, {
-    size: 3
-  }, "Description list with static title width"), _react.default.createElement(_DescriptionList.default, {
-    titleWidth: "240px"
-  }, _react.default.createElement(_DescriptionTerm.default, null, "First description term:"), _react.default.createElement(_DescriptionDetails.default, null, "First description details"), _react.default.createElement(_DescriptionTerm.default, null, "Second description term:"), _react.default.createElement(_DescriptionDetails.default, null, "Second description details"), _react.default.createElement(_DescriptionTerm.default, null, "Third description term:"), _react.default.createElement(_DescriptionDetails.default, null, "Third description details")))))) : "Select a theme";
-};
-Theme.propTypes = {
-  theme: _propTypes.default.object.isRequired
-};
-Theme.defaultProps = {};
-var _default = exports.default = Theme;

package/dist/components/Theme.module.scss

@@ -1,103 +0,0 @@
-// Variables
-@use "../style/abstracts/variables/colors";
-@use "../style/abstracts/variables/viewports";
-
-section:not(:last-of-type) {
-  margin: 24px 0;
-}
-
-section:last-of-type {
-  margin: 24px 0 0 0;
-}
-
-.colorPalette {
-  display: flex;
-  flex-wrap: wrap;
-  font-size: 12px;
-  > div {
-    padding: 8px;
-    text-align: right;
-    width: 50%;
-    @media screen and (min-width: viewports.$screen-sm) {
-      width: 25%;
-    }
-    @media screen and (min-width: viewports.$screen-md) {
-      width: 16.6%;
-    }
-  }
-
-  .color {
-    &.bodyBackground {
-      background-color: var(--color-body-background, colors.$color-body-background);
-    }
-    &.defaultText {
-      background-color: var(--color-default-text, colors.$color-default-text);
-    }
-    &.primaryText {
-      background-color: var(--color-primary-text, colors.$color-primary-text);
-    }
-    &.secondaryText {
-      background-color: var(--color-border, colors.$color-border);
-    }
-    &.primary {
-      background-color: var(--color-primary, colors.$color-primary);
-    }
-    &.primaryLight {
-      background-color: var(--color-primary-light, colors.$color-primary-light);
-    }
-    &.primaryXLight {
-      background-color: var(--color-primary-x-light, colors.$color-primary-x-light);
-    }
-    &.primaryContrast {
-      background-color: var(--color-primary-contrast, colors.$color-primary-contrast);
-    }
-    &.secondary {
-      background-color: var(--color-secondary, colors.$color-secondary);
-    }
-    &.secondaryLight {
-      background-color: var(--color-secondary-light, colors.$color-secondary-light);
-    }
-    &.secondaryXLight {
-      background-color: var(--color-secondary-x-light, colors.$color-secondary-x-light);
-    }
-    &.secondaryContrast {
-      background-color: var(--color-secondary-contrast, colors.$color-secondary-contrast);
-    }
-    &.focus {
-      background-color: var(--color-focus, colors.$color-focus);
-    }
-    &.defaultBackground {
-      background-color: var(--color-default-background, colors.$color-default-background);
-    }
-    &.secondaryBackground {
-      background-color: var(--color-secondary-background, colors.$color-secondary-background);
-    }
-    &.success {
-      background-color: var(--color-success, colors.$color-success);
-    }
-    &.successLight {
-      background-color: var(--color-success-light, colors.$color-success-light);
-    }
-    &.successXLight {
-      background-color: var(--color-success-x-light, colors.$color-success-x-light);
-    }
-    &.warning {
-      background-color: var(--color-warning, colors.$color-warning);
-    }
-    &.warningLight {
-      background-color: var(--color-warning-light, colors.$color-warning-light);
-    }
-    &.warningXLight {
-      background-color: var(--color-warning-x-light, colors.$color-warning-x-light);
-    }
-    &.error {
-      background-color: var(--color-error, colors.$color-error);
-    }
-    &.errorLight {
-      background-color: var(--color-error-light, colors.$color-error-light);
-    }
-    &.errorXLight {
-      background-color: var(--color-error-x-light, colors.$color-error-x-light);
-    }
-  }
-}

package/dist/components/ThemeProvider.js

@@ -1,24 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _helpers = require("../functions/helpers");
-var _ThemeProviderModule = _interopRequireDefault(require("!!raw-loader!sass-loader!./ThemeProvider.module.scss"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const ThemeProvider = _ref => {
-  let {
-    theme,
-    children
-  } = _ref;
-  const cssVariablesFromTheme = (0, _helpers.getCssVariablesFromTheme)(theme);
-  const cssColorVariablesString = (0, _helpers.stringifyCssColorVariables)(cssVariablesFromTheme);
-  (0, _helpers.addGlobalStylesheet)("theme-provider", ":root {".concat(cssColorVariablesString, "} ").concat(_ThemeProviderModule.default));
-  return children;
-};
-ThemeProvider.propTypes = {
-  theme: _propTypes.default.object
-};
-var _default = exports.default = ThemeProvider;

package/dist/components/ThemeProvider.module.scss

@@ -1,24 +0,0 @@
-// Variables
-@use "../style/abstracts/variables/colors";
-@use "../style/abstracts/variables/typography";
-
-*,
-*::before,
-*::after {
-    box-sizing: border-box;
-}
-body {
-    margin: 0;
-    font-family: typography.$default-font;
-    background-color: var(--color-body-background, colors.$color-body-background);
-    color: var(--color-default-text, colors.$color-default-text);
-    font-size: 16px;
-    line-height: 24px;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    font-weight: normal;
-    letter-spacing: 0.01em;
-}
-a {
-    color: var(--color-primary, colors.$color-primary);
-}

package/dist/components/ToggleNavigationButton.js

@@ -1,44 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ToggleNavigationButtonModule = _interopRequireDefault(require("./ToggleNavigationButton.module.scss"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-const ToggleNavigationButton = _ref => {
-  let {
-    id,
-    htmlTag,
-    showText,
-    hideText,
-    buttonProps,
-    isOpen
-  } = _ref;
-  const elementClass = _ToggleNavigationButtonModule.default.toggleNavigationButton;
-  let element = _react.default.createElement(htmlTag, _objectSpread(_objectSpread({}, buttonProps), {}, {
-    className: elementClass,
-    id: id || null
-  }), isOpen ? hideText : showText);
-  return element;
-};
-ToggleNavigationButton.propTypes = {
-  id: _propTypes.default.string,
-  htmlTag: _propTypes.default.string,
-  showText: _propTypes.default.string,
-  hideText: _propTypes.default.string,
-  buttonProps: _propTypes.default.object,
-  isOpen: _propTypes.default.bool
-};
-ToggleNavigationButton.defaultProps = {
-  htmlTag: "button",
-  isOpen: false
-};
-var _default = exports.default = ToggleNavigationButton;

package/dist/components/ToggleNavigationButton.module.scss

@@ -1,34 +0,0 @@
-// Variables
-@use "../style/abstracts/variables/colors";
-@use "../style/abstracts/variables/transitions";
-@use "../style/abstracts/variables/typography";
-
-.toggleNavigationButton {
-    background-color: var(--color-body-background, colors.$color-body-background);
-    color: var(--color-primary, colors.$color-primary);
-    border: 1px solid var(--color-primary, colors.$color-primary);
-    font-family: typography.$default-font;
-    transition: background-color transitions.$default-transition;
-    display: block;
-    width: 100%;
-    margin: 0 auto;
-    border-radius: 0;
-    font-size: 16px;
-    font-weight: 600;
-    line-height: 24px;
-    letter-spacing: 0.01em;
-    padding: 12px 24px;
-    cursor: pointer;
-    text-align: center;
-    position: relative;
-    text-decoration: none;
-    &:hover {
-        color: var(--color-primary-text, colors.$color-primary-text);
-    }
-    &:focus {
-        outline-width: 2px;
-        outline-color: var(--color-focus, colors.$color-focus);
-        outline-style: auto;
-        outline-offset: 1px;
-    }
-}

package/dist/components/WizardNavigation/Step.js

@@ -1,66 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _reactRouterDom = require("react-router-dom");
-var _helpers = require("../../functions/helpers");
-var _StepModule = _interopRequireDefault(require("./Step.module.scss"));
-var _checkmarkSymbol = _interopRequireDefault(require("../../assets/svg/checkmark-symbol.svg?url"));
-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; }
-const Step = props => {
-  const getActiveClass = step => {
-    return props.activeStepId === step.id ? _StepModule.default.active : "";
-  };
-  const getFinishedClass = step => {
-    return step.finished ? _StepModule.default.finished : "";
-  };
-  const getErrorClass = step => {
-    return step.hasErrors ? _StepModule.default.hasErrors : "";
-  };
-  const renderStepContent = (step, index) => {
-    const isActiveStep = props.activeStepId === step.id;
-    const isVertical = props.direction === "vertical";
-    const isFinished = step.finished;
-    const showCheckmarkSymbol = isVertical && isFinished && !isActiveStep;
-    return _react.default.createElement(_react.Fragment, null, _react.default.createElement("span", {
-      className: _StepModule.default.stepNumber
-    }, index + 1), _react.default.createElement("span", {
-      className: _StepModule.default.stepName
-    }, step.name), showCheckmarkSymbol && _react.default.createElement("img", {
-      src: _checkmarkSymbol.default,
-      alt: "",
-      className: _StepModule.default.checkmarkSymbol
-    }));
-  };
-  const {
-    step,
-    index,
-    activeStepId
-  } = props;
-  return _react.default.createElement("li", {
-    className: (0, _helpers.classNameArrayToClassNameString)([_StepModule.default.wizardTopnavItem, getActiveClass(step), getFinishedClass(step), getErrorClass(step), _StepModule.default[props.direction]])
-  }, step.link && Object.keys(step.link).length ? _react.default.createElement(_reactRouterDom.Link, {
-    to: step.link,
-    "aria-current": activeStepId === step.id ? "step" : null,
-    className: _StepModule.default.wizardTopnavItemContent
-  }, renderStepContent(step, index)) : _react.default.createElement("span", {
-    "aria-current": activeStepId === step.id ? "step" : null,
-    className: _StepModule.default.wizardTopnavItemContent
-  }, renderStepContent(step, index)));
-};
-Step.propTypes = {
-  step: _propTypes.default.object.isRequired,
-  activeStepId: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
-  index: _propTypes.default.number.isRequired,
-  direction: _propTypes.default.oneOf(["vertical", "horizontal"])
-};
-Step.defaultProps = {
-  direction: "vertical"
-};
-var _default = exports.default = Step;

package/dist/components/WizardNavigation/Step.module.scss

@@ -1,175 +0,0 @@
-// Variables
-@use "../../style/abstracts/variables/colors";
-@use "../../style/abstracts/variables/transitions";
-@use "../../style/abstracts/variables/viewports";
-
-.wizardTopnavItem {
-  a {
-    text-decoration: none;
-  }
-  .wizardTopnavItemContent {
-    display: flex;
-  }
-  &.vertical {
-    transition: background-color transitions.$long-transition;
-    .wizardTopnavItemContent {
-      -webkit-box-align: center;
-      align-items: center;
-      -webkit-box-pack: center;
-      justify-content: center;
-      text-decoration: none;
-      border-radius: 0px;
-      padding: 12px;
-      margin-bottom: 4px;
-      font-size: 16px;
-      font-weight: 400;
-      line-height: 24px;
-      letter-spacing: 0.01em;
-      .stepNumber {
-        display: flex;
-        align-self: stretch;
-        -webkit-box-align: center;
-        align-items: center;
-        -webkit-box-pack: center;
-        justify-content: center;
-        overflow: hidden;
-        min-width: 12px;
-        max-width: 100%;
-        color: var(--color-secondary-contrast, colors.$color-secondary-contrast);
-      }
-      .stepName {
-        -webkit-box-flex: 1;
-        flex-grow: 1;
-        font-size: 16px;
-        font-weight: 400;
-        line-height: 24px;
-        letter-spacing: 0.01em;
-        margin: 0px 0px 0px 12px;
-        color: var(--color-default-text, colors.$color-default-text);
-      }
-    }
-    &:hover:not(.active):not(.finished):not(.hasErrors) {
-      background-color: var(--color-secondary-x-light, colors.$color-secondary-x-light);
-    }
-    &.active {
-      background-color: var(--color-secondary-light, colors.$color-secondary-light);
-    }
-    &.finished:not(.active) {
-      background-color: var(--color-success-x-light, colors.$color-success-x-light);
-      &:hover {
-        background-color: var(--color-success-light, colors.$color-success-light);
-      }
-    }
-    &.hasErrors:not(.active) {
-      background-color: var(--color-error-x-light, colors.$color-error-x-light);
-      &:hover {
-        background-color: var(--color-error-light, colors.$color-error-light);
-      }
-    }
-  }
-  &.horizontal {
-    flex: 1;
-    .wizardTopnavItemContent {
-      height: 60px;
-      align-items: center;
-      @media only screen and (min-width: viewports.$screen-sm) {
-        display: block;
-        height: auto;
-      }
-      &:before {
-        @media only screen and (max-width: viewports.$screen-xs-max) {
-          display: block;
-          content: " ";
-          height: 36px;
-          background-color: #e2e1e0;
-          left: 10px;
-          top: 33px;
-          position: relative;
-          margin-top: -3px;
-          margin-bottom: -3px;
-          width: 15px;
-          margin-right: -15px;
-        }
-        @media only screen and (min-width: viewports.$screen-sm) {
-          display: inline-block;
-          content: " ";
-          height: 15px;
-          background-color: #e2e1e0;
-          width: 100%;
-          left: 50%;
-          position: relative;
-          margin-bottom: -30px;
-        }
-      }
-      .stepNumber {
-        border-radius: 50%;
-        width: 35px;
-        height: 35px;
-        display: block;
-        text-align: center;
-        background-color: #e2e1e0;
-        color: var(--color-default-text, colors.$color-default-text);
-        position: relative;
-        font-size: 20px;
-        line-height: 1.75em;
-        z-index: 1;
-        margin-right: 8px;
-        @media only screen and (min-width: viewports.$screen-sm) {
-          margin: auto;
-        }
-      }
-      .stepName {
-        display: block;
-        text-align: left;
-        color: var(--color-default-text, colors.$color-default-text);
-        flex: 1;
-        flex-basis: min-content;
-        @media only screen and (min-width: viewports.$screen-sm) {
-          display: block;
-          text-align: center;
-        }
-      }
-    }
-
-    &.active {
-      :local(.stepNumber) {
-        background-color: var(--color-primary, colors.$color-primary);
-        color: #fff;
-      }
-    }
-    &.finished {
-      .wizardTopnavItemContent {
-        &:before {
-          background-color: var(--color-primary, colors.$color-primary);
-        }
-        .stepNumber {
-          background-color: var(--color-primary, colors.$color-primary);
-          color: #fff;
-        }
-      }
-    }
-    &.hasErrors {
-      .wizardTopnavItemContent {
-        &:before {
-          background-color: var(--color-warning, colors.$color-warning);
-        }
-        .stepNumber {
-          background-color: var(--color-warning, colors.$color-warning);
-          color: #fff;
-        }
-      }
-    }
-    &:last-child {
-      .wizardTopnavItemContent {
-        &:before {
-          @media only screen and (max-width: viewports.$screen-xs-max) {
-            height: 0;
-          }
-          @media only screen and (min-width: viewports.$screen-sm) {
-            width: 0;
-          }
-        }
-      }
-    }
-  }
-}

package/dist/components/WizardNavigation.js

@@ -1,56 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Step = _interopRequireDefault(require("./WizardNavigation/Step"));
-var _helpers = require("../functions/helpers");
-var _WizardNavigationModule = _interopRequireDefault(require("./WizardNavigation.module.scss"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const WizardNavigation = props => {
-  var _Object$keys, _props$ariaLabel;
-  const renderSteps = (steps, activeStepId) => {
-    const hasSteps = steps && Object.keys(steps).length;
-    return hasSteps ? Object.keys(steps).map((stepKey, stepIndex) => {
-      const step = steps[stepKey];
-      return _react.default.createElement(_Step.default, {
-        direction: props.direction,
-        step: step,
-        activeStepId: activeStepId,
-        index: stepIndex,
-        key: stepKey
-      });
-    }) : null;
-  };
-  const amountOfSteps = props.steps && (_Object$keys = Object.keys(props.steps)) !== null && _Object$keys !== void 0 && _Object$keys.length ? Object.keys(props.steps).length : 0;
-  const defaultAriaLabel = "I dette skjemaet er det totalt ".concat(amountOfSteps, " steg som du skal g\xE5 igjennom");
-  const ariaLabel = (_props$ariaLabel = props["aria-label"]) !== null && _props$ariaLabel !== void 0 && _props$ariaLabel.length ? props["aria-label"] : defaultAriaLabel;
-  return _react.default.createElement("nav", {
-    "aria-label": ariaLabel,
-    className: (0, _helpers.classNameArrayToClassNameString)([_WizardNavigationModule.default.wizardTopnavContainer, _WizardNavigationModule.default[props.direction]])
-  }, _react.default.createElement("ol", {
-    className: _WizardNavigationModule.default.wizardTopnav
-  }, renderSteps(props.steps, props.activeStepId)));
-};
-WizardNavigation.propTypes = {
-  steps: _propTypes.default.shape({
-    id: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-    name: _propTypes.default.string,
-    finished: _propTypes.default.bool,
-    hasErrors: _propTypes.default.bool,
-    link: _propTypes.default.shape({
-      to: _propTypes.default.object,
-      reactLink: _propTypes.default.bool
-    })
-  }).isRequired,
-  activeStepId: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
-  "aria-label": _propTypes.default.string,
-  direction: _propTypes.default.oneOf(["vertical", "horizontal"])
-};
-WizardNavigation.defaultProps = {
-  direction: "vertical"
-};
-var _default = exports.default = WizardNavigation;