@bbl-digital/snorre 4.2.98 → 4.2.99

package/esm/core/Skeleton/styles.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SkeletonRow = exports.SkeletonRectangle = exports.SkeletonCircle = void 0;
+var _base = _interopRequireDefault(require("@emotion/styled/base"));
+var _react = require("@emotion/react");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const shimmerBg = '#ccc';
+const pulse = (0, _react.keyframes)`
+  0% { opacity: 0.6; }
+  50%  { opacity: 0.2; }
+  100% { opacity: 0.6; }
+`;
+const defaultShimmer = /*#__PURE__*/(0, _base.default)("span", process.env.NODE_ENV === "production" ? {
+  target: "enirjj93"
+} : {
+  target: "enirjj93",
+  label: "defaultShimmer"
+})("display:inline-block;position:relative;overflow:hidden;vertical-align:middle;background-color:", shimmerBg, ";animation:", pulse, " 2s infinite;");
+const SkeletonRow = exports.SkeletonRow = /*#__PURE__*/(0, _base.default)(defaultShimmer, process.env.NODE_ENV === "production" ? {
+  target: "enirjj92"
+} : {
+  target: "enirjj92",
+  label: "SkeletonRow"
+})("height:", props => props.height ? props.height : '1em', ";width:", props => props.width ? props.width : '65%', ";");
+const SkeletonCircle = exports.SkeletonCircle = /*#__PURE__*/(0, _base.default)(defaultShimmer, process.env.NODE_ENV === "production" ? {
+  target: "enirjj91"
+} : {
+  target: "enirjj91",
+  label: "SkeletonCircle"
+})("height:", props => props.height ? props.height : '34px', ";width:", props => props.width ? props.width : '34px', ";border-radius:50%;");
+const SkeletonRectangle = exports.SkeletonRectangle = /*#__PURE__*/(0, _base.default)(defaultShimmer, process.env.NODE_ENV === "production" ? {
+  target: "enirjj90"
+} : {
+  target: "enirjj90",
+  label: "SkeletonRectangle"
+})("height:", props => props.height ? props.height : '34px', ";width:", props => props.width ? props.width : '34px', ";border-radius:", props => props.borderRadius ? props.borderRadius : '0', ";");

package/esm/core/Spinner/Spinner.stories.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Size = exports.Default = exports.Color = exports.Border = void 0;
+var _ = _interopRequireDefault(require("."));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  title: 'Core/Spinner',
+  component: _.default
+};
+const Default = exports.Default = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {}),
+  name: 'Default'
+};
+const Size = exports.Size = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+    size: 40
+  }),
+  name: 'Size'
+};
+const Color = exports.Color = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+    color: "red"
+  }),
+  name: 'Color'
+};
+const Border = exports.Border = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+    thickness: 5,
+    offsetColor: "red",
+    color: "green"
+  }),
+  name: 'Border'
+};

package/esm/core/Spinner/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styles = require("./styles");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/** @jsxImportSource @emotion/react */
+
+const Spinner = props => {
+  return (0, _jsxRuntime.jsx)("div", {
+    css: theme => [_styles.styles.default(theme), props.size && _styles.styles.size(props.size), props.margin && _styles.styles.margin(props.margin), props.color && _styles.styles.color(props.color), (props.thickness || props.offsetColor) && _styles.styles.border(props.thickness, props.offsetColor, props.color || theme.primary)],
+    role: "alert",
+    "aria-live": "polite",
+    "aria-label": "Laster..."
+  });
+};
+var _default = exports.default = Spinner;

package/esm/core/Spinner/styles.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.styles = exports.default = void 0;
+var _react = require("@emotion/react");
+const styles = exports.styles = {
+  default: theme => /*#__PURE__*/(0, _react.css)("@keyframes spinner{0%{transform:translate3d(-50%, -50%, 0) rotate(0deg);}100%{transform:translate3d(-50%, -50%, 0) rotate(360deg);}}position:relative;&::before{animation:1.5s linear infinite spinner;animation-play-state:inherit;border:solid 3px #cfd0d1;border-bottom-color:", theme.primary, ";border-radius:50%;content:'';height:8px;width:8px;position:absolute;top:10%;left:10%;transform:translate3d(-50%, -50%, 0);will-change:transform;}@media (prefers-reduced-motion){&::before{animation:4s linear infinite spinner;}}" + (process.env.NODE_ENV === "production" ? "" : ";label:default;")),
+  size: size => /*#__PURE__*/(0, _react.css)("&::before{width:", size, "px;height:", size, "px;}" + (process.env.NODE_ENV === "production" ? "" : ";label:size;")),
+  margin: margin => /*#__PURE__*/(0, _react.css)("margin:", margin, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:margin;")),
+  color: color => /*#__PURE__*/(0, _react.css)("&::before{border-bottom-color:", color, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:color;")),
+  border: (thickness = 3, offsetColor = '#cfd0d1', borderBottom) => /*#__PURE__*/(0, _react.css)("&::before{border:", thickness, "px solid ", offsetColor, ";border-bottom-color:", borderBottom, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:border;"))
+};
+var _default = exports.default = styles;

package/esm/core/Stepper/MobileStep/index.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Text = _interopRequireDefault(require("../../Text"));
+var _styles = require("./styles");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const MobileStep = ({
+  steps,
+  selected
+}) => {
+  const progressPercentage = selected / steps.length * 100;
+  const currentStep = steps.find(step => step.nr === selected);
+  const isLastStep = selected === steps.length;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Wrapper, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ProgressCircle, {
+      $progress: progressPercentage,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Text.default, {
+        size: "14px",
+        semibold: true,
+        children: [selected, " av ", steps.length]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.StepInformation, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+        size: "16px",
+        bold: true,
+        children: currentStep?.title || ''
+      }), !isLastStep && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Text.default, {
+        size: "13px",
+        semibold: true,
+        subtle: true,
+        children: ["Neste: ", steps[selected]?.title || '']
+      })]
+    })]
+  });
+};
+var _default = exports.default = MobileStep;

package/esm/core/Stepper/MobileStep/styles.js

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = exports.StepInformation = exports.ProgressContainer = exports.ProgressCircle = exports.NextStep = exports.LabelWrapper = exports.Label = void 0;
+var _base = _interopRequireDefault(require("@emotion/styled/base"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+const Wrapper = exports.Wrapper = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
+  target: "e19l5vu26"
+} : {
+  target: "e19l5vu26",
+  label: "Wrapper"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1pmv6kw",
+  styles: "display:flex;gap:1em"
+} : {
+  name: "1pmv6kw",
+  styles: "display:flex;gap:1em",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const LabelWrapper = exports.LabelWrapper = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
+  target: "e19l5vu25"
+} : {
+  target: "e19l5vu25",
+  label: "LabelWrapper"
+})(process.env.NODE_ENV === "production" ? {
+  name: "tod0po",
+  styles: "display:flex;align-items:center;gap:0.5em"
+} : {
+  name: "tod0po",
+  styles: "display:flex;align-items:center;gap:0.5em",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const Label = exports.Label = /*#__PURE__*/(0, _base.default)("label", process.env.NODE_ENV === "production" ? {
+  target: "e19l5vu24"
+} : {
+  target: "e19l5vu24",
+  label: "Label"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1w7caun",
+  styles: "font-size:16px;line-height:27px;font-weight:600"
+} : {
+  name: "1w7caun",
+  styles: "font-size:16px;line-height:27px;font-weight:600",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const NextStep = exports.NextStep = /*#__PURE__*/(0, _base.default)("span", process.env.NODE_ENV === "production" ? {
+  target: "e19l5vu23"
+} : {
+  target: "e19l5vu23",
+  label: "NextStep"
+})("font-size:14px;line-height:27px;font-weight:500;color:", ({
+  theme
+}) => theme.gray20, ";text-decoration:underline;");
+const ProgressContainer = exports.ProgressContainer = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
+  target: "e19l5vu22"
+} : {
+  target: "e19l5vu22",
+  label: "ProgressContainer"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1dcltk1",
+  styles: "display:flex;align-items:center;flex-direction:column;gap:1em"
+} : {
+  name: "1dcltk1",
+  styles: "display:flex;align-items:center;flex-direction:column;gap:1em",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const ProgressCircle = exports.ProgressCircle = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
+  target: "e19l5vu21"
+} : {
+  target: "e19l5vu21",
+  label: "ProgressCircle"
+})("display:flex;justify-content:center;align-items:center;width:min(60px, 90px);height:min(60px, 90px);border-radius:50%;background:", ({
+  $progress,
+  theme
+}) => `radial-gradient(closest-side, white 85%, transparent 80% 100%),
+    conic-gradient(${theme.primary} ${$progress}%, ${theme.primary50opa} 0);`, ";");
+const StepInformation = exports.StepInformation = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
+  target: "e19l5vu20"
+} : {
+  target: "e19l5vu20",
+  label: "StepInformation"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1auhwh4",
+  styles: "display:flex;flex-direction:column;text-align:left;justify-content:center;gap:0.5em"
+} : {
+  name: "1auhwh4",
+  styles: "display:flex;flex-direction:column;text-align:left;justify-content:center;gap:0.5em",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});

package/esm/core/Stepper/Step/index.js

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _styles = require("./styles");
+var _Button = _interopRequireDefault(require("../../Button"));
+var _Text = _interopRequireDefault(require("../../Text"));
+var _contrastColor = require("../../../utils/contrastColor");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "mmvz9h",
+  styles: "font-weight:400"
+} : {
+  name: "bhv4vb-buttonstep",
+  styles: "font-weight:400;label:buttonstep;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+const Step = ({
+  nr,
+  selected,
+  bidirectional,
+  title,
+  subTitle,
+  onClick,
+  trackingName = 'Bolig',
+  trackingEvent = 'Søk om utleie click:  Stepper'
+}) => {
+  const theme = (0, _react2.useTheme)();
+  const buttonstep = /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StepWrapper, {
+    color: theme.primary,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+      nostyle: true,
+      onClick: () => onClick(nr),
+      trackingName: trackingName,
+      trackingEvent: trackingEvent,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.FlexWrapper, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Circle, {
+          selected: selected,
+          color: theme.primary,
+          bg: theme.bgLight,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+            size: "14px",
+            color: selected ? (0, _contrastColor.getContrastColor)(theme.primary, theme.btnDefaultFontColor) : theme.defaultText,
+            semibold: true,
+            children: nr
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+          semibold: true,
+          children: title
+        }), subTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.SubTitleWrapper, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+            small: true,
+            css: _ref,
+            children: subTitle
+          })
+        })]
+      })
+    })
+  });
+  const step = /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StepWrapper, {
+    color: theme.primary,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.FlexWrapper, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Circle, {
+        selected: selected,
+        color: theme.primary,
+        bg: theme.bgLight,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+          size: "14px",
+          color: selected ? theme.btnDefaultFontColor : theme.defaultText,
+          semibold: true,
+          children: nr
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+        semibold: true,
+        children: title
+      }), subTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.SubTitleWrapper, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+          small: true,
+          children: subTitle
+        })
+      })]
+    })
+  });
+  return selected ? buttonstep : bidirectional ? buttonstep : step;
+};
+var _default = exports.default = Step;

package/esm/core/Stepper/Step/styles.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SubTitleWrapper = exports.StepWrapper = exports.LabelWrapper = exports.FlexWrapper = exports.Circle = void 0;
+var _base = _interopRequireDefault(require("@emotion/styled/base"));
+var _react = require("@emotion/react");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+const Circle = exports.Circle = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
+  target: "e7lmlwf4"
+} : {
+  target: "e7lmlwf4",
+  label: "Circle"
+})(props => /*#__PURE__*/(0, _react.css)("position:relative;display:flex;margin:auto;justify-content:center;align-items:center;height:32px;width:32px;border-radius:50%;border:2px solid ", props.color, ";background-color:", props.selected ? props.color : props.bg, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:Circle;")));
+const SubTitleWrapper = exports.SubTitleWrapper = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
+  target: "e7lmlwf3"
+} : {
+  target: "e7lmlwf3",
+  label: "SubTitleWrapper"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1d3lfkp",
+  styles: "display:flex;text-align:center;justify-content:center;max-width:350px"
+} : {
+  name: "1d3lfkp",
+  styles: "display:flex;text-align:center;justify-content:center;max-width:350px",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const StepWrapper = exports.StepWrapper = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
+  target: "e7lmlwf2"
+} : {
+  target: "e7lmlwf2",
+  label: "StepWrapper"
+})(props => /*#__PURE__*/(0, _react.css)("position:relative;display:flex;flex-grow:1;flex-basis:0;justify-content:center;padding:0 1rem;&>button{align-items:start;}&:not(:first-of-type){::before{content:'';position:absolute;right:calc(50% + 24px);top:16px;width:calc(50% - 24px);height:3px;background-color:", props.color, ";}}&:not(:last-of-type){::after{content:'';position:absolute;left:calc(50% + 24px);top:16px;width:calc(50% - 24px);height:3px;background-color:", props.color, ";}}" + (process.env.NODE_ENV === "production" ? "" : ";label:StepWrapper;")));
+const FlexWrapper = exports.FlexWrapper = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
+  target: "e7lmlwf1"
+} : {
+  target: "e7lmlwf1",
+  label: "FlexWrapper"
+})(process.env.NODE_ENV === "production" ? {
+  name: "9gxvy4",
+  styles: "display:flex;flex-direction:column;align-items:center;gap:0.5rem"
+} : {
+  name: "9gxvy4",
+  styles: "display:flex;flex-direction:column;align-items:center;gap:0.5rem",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const LabelWrapper = exports.LabelWrapper = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
+  target: "e7lmlwf0"
+} : {
+  target: "e7lmlwf0",
+  label: "LabelWrapper"
+})();

package/esm/core/Stepper/Stepper.stories.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _ = _interopRequireDefault(require("."));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  title: 'Core/Stepper',
+  component: _.default
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  name: 'Default',
+  args: {
+    selected: 2,
+    steps: [{
+      nr: 1,
+      title: 'Introduksjon til budsjett',
+      subTitle: 'Forklaring til budsjettforslaget og hva som har endret seg siden sist.'
+    }, {
+      nr: 2,
+      title: 'Spesifikasjon',
+      subTitle: 'Se hvordan kostnader og utgifter fordeler seg på de forskjellige underpostene.'
+    }, {
+      nr: 3,
+      title: 'Fullstendig budsjett',
+      subTitle: 'Fullfør budsjettet ved å se over og justere resterende budsjettposter.'
+    }],
+    withMobileLayout: true,
+    bidirectional: true,
+    boxType: 'mysite',
+    onStepSelected: val => console.log('selected ' + val)
+  }
+};

package/esm/core/Stepper/index.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _styles = require("./styles");
+var _Step = _interopRequireDefault(require("./Step"));
+var _MobileStep = _interopRequireDefault(require("./MobileStep"));
+var _useIsMobile = require("../../hooks/useIsMobile");
+var _Box = _interopRequireDefault(require("../Box"));
+var _jsxRuntime = require("react/jsx-runtime");
+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 Stepper = ({
+  selected,
+  steps,
+  withMobileLayout = true,
+  bidirectional = false,
+  withBox = true,
+  boxType,
+  onStepSelected,
+  trackingName,
+  trackingEvent
+}) => {
+  const isMobile = (0, _useIsMobile.useIsMobile)();
+  const DesktopStepper = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StepperWrapper, {
+    steps: steps.length,
+    children: steps.map((step, index) => {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Step.default, {
+          nr: step.nr,
+          title: step.title,
+          subTitle: step.subTitle,
+          bidirectional: bidirectional,
+          selected: step.nr <= selected,
+          onClick: onStepSelected,
+          trackingEvent: trackingEvent,
+          trackingName: trackingName
+        })
+      }, index);
+    })
+  });
+  const PolyStepper = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [!isMobile && /*#__PURE__*/(0, _jsxRuntime.jsx)(DesktopStepper, {}), isMobile && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MobileStep.default, {
+      steps: steps,
+      selected: selected
+    })]
+  });
+  if (!withBox) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: withMobileLayout ? /*#__PURE__*/(0, _jsxRuntime.jsx)(PolyStepper, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(DesktopStepper, {})
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+    type: boxType,
+    children: withMobileLayout ? /*#__PURE__*/(0, _jsxRuntime.jsx)(PolyStepper, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(DesktopStepper, {})
+  });
+};
+var _default = exports.default = Stepper;

package/esm/core/Stepper/styles.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StepperWrapper = exports.StepDivider = void 0;
+var _base = _interopRequireDefault(require("@emotion/styled/base"));
+var _react = require("@emotion/react");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+const StepDivider = exports.StepDivider = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
+  target: "egvzgek1"
+} : {
+  target: "egvzgek1",
+  label: "StepDivider"
+})(props => /*#__PURE__*/(0, _react.css)("height:3px;width:30px;margin-top:1rem;background-color:", props.color, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:StepDivider;")));
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "jpgenn",
+  styles: "display:flex;justify-content:space-between;padding:0 2.5em;align-items:top;margin-bottom:1.5em;@media screen and (max-width: 768px){padding:0 0.5em;span{font-size:12px;}}"
+} : {
+  name: "9i9w2h-StepperWrapper",
+  styles: "display:flex;justify-content:space-between;padding:0 2.5em;align-items:top;margin-bottom:1.5em;@media screen and (max-width: 768px){padding:0 0.5em;span{font-size:12px;}};label:StepperWrapper;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+const StepperWrapper = exports.StepperWrapper = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
+  target: "egvzgek0"
+} : {
+  target: "egvzgek0",
+  label: "StepperWrapper"
+})(props => _ref);

package/esm/core/TabBar/TabBar.stories.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TabBarDefault = void 0;
+var _ = _interopRequireDefault(require("."));
+var _TabItem = _interopRequireDefault(require("./TabItem"));
+var _IconMembership = _interopRequireDefault(require("../../icons/General/IconMembership"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  title: 'Core/TabBar',
+  component: _.default,
+  parameters: {
+    docs: {
+      story: {
+        inline: false
+      }
+    }
+  }
+};
+const TabBarDefault = exports.TabBarDefault = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.default, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabItem.default, {
+      text: "Medlemsbevis",
+      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMembership.default, {
+        primary: true,
+        secondary: false
+      }),
+      active: true,
+      onClick: () => console.log('hi')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabItem.default, {
+      text: "Medlemsbevis",
+      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMembership.default, {
+        primary: false,
+        secondary: true
+      }),
+      active: false,
+      onClick: () => console.log('hi')
+    })]
+  }),
+  name: 'TabBar'
+};

package/esm/core/TabBar/TabItem/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styles = require("./styles");
+var _Text = _interopRequireDefault(require("../../Text"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const TabItem = ({
+  text,
+  icon,
+  active,
+  onClick
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.TabWrapper, {
+    onClick: onClick,
+    "aria-label": `Tab knapp for ${text}`,
+    children: [icon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+      primary: active,
+      secondary: !active,
+      size: "10px",
+      children: text
+    })]
+  });
+};
+var _default = exports.default = TabItem;

package/esm/core/TabBar/TabItem/styles.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TabWrapper = void 0;
+var _base = _interopRequireDefault(require("@emotion/styled/base"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+const TabWrapper = exports.TabWrapper = /*#__PURE__*/(0, _base.default)("button", process.env.NODE_ENV === "production" ? {
+  target: "e1dmbbca0"
+} : {
+  target: "e1dmbbca0",
+  label: "TabWrapper"
+})(process.env.NODE_ENV === "production" ? {
+  name: "44ia8h",
+  styles: "display:flex;justify-content:center;align-items:center;flex-direction:column;flex:1;background-color:transparent;border:none"
+} : {
+  name: "44ia8h",
+  styles: "display:flex;justify-content:center;align-items:center;flex-direction:column;flex:1;background-color:transparent;border:none",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});

package/esm/core/TabBar/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styles = require("./styles");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const TabBar = ({
+  children
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Wrapper, {
+    children: children
+  });
+};
+var _default = exports.default = TabBar;