@bbl-digital/snorre 4.2.74 → 4.2.76

package/lib/core/Stepper/MobileStep/styles.d.ts

@@ -28,4 +28,3 @@ export declare const StepInformation: import("@emotion/styled").StyledComponent<
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-//# sourceMappingURL=styles.d.ts.map

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

@@ -1,92 +1,46 @@
-"use strict";
+import styled from '@emotion/styled';
+export const Wrapper = styled.div `
+  display: flex;
+  gap: 1em;
+`;
+export const LabelWrapper = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+`;
+export const Label = styled.label `
+  font-size: 16px;
+  line-height: 27px;
+  font-weight: 600;
+`;
+export const NextStep = styled.span `
+  font-size: 14px;
+  line-height: 27px;
+  font-weight: 500;
+  color: ${({ theme }) => theme.gray20};
+  text-decoration: underline;
+`;
+export const ProgressContainer = styled.div `
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: 1em;
+`;
+export const ProgressCircle = styled.div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
-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__
-});
+  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);`};
+`;
+export const StepInformation = styled.div `
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+  justify-content: center;
+  gap: 0.5em;
+`;

package/lib/core/Stepper/Step/index.d.ts

@@ -11,4 +11,3 @@ interface IProps {
 }
 declare const Step: React.FC<IProps>;
 export default Step;
-//# sourceMappingURL=index.d.ts.map

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

@@ -1,92 +1,15 @@
-"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__
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from '@emotion/react';
+import { Circle, FlexWrapper, StepWrapper, SubTitleWrapper } from './styles';
+import Button from '../../Button';
+import Text from '../../Text';
+import { getContrastColor } from '../../../utils/contrastColor';
+const Step = ({ nr, selected, bidirectional, title, subTitle, onClick, trackingName = 'Bolig', trackingEvent = 'Søk om utleie click:  Stepper', }) => {
+    const theme = useTheme();
+    const buttonstep = (_jsx(StepWrapper, { color: theme.primary, children: _jsx(Button, { nostyle: true, onClick: () => onClick(nr), trackingName: trackingName, trackingEvent: trackingEvent, children: _jsxs(FlexWrapper, { children: [_jsx(Circle, { selected: selected, color: theme.primary, bg: theme.bgLight, children: _jsx(Text, { size: "14px", color: selected
+                                ? getContrastColor(theme.primary, theme.btnDefaultFontColor)
+                                : theme.defaultText, semibold: true, children: nr }) }), _jsx(Text, { semibold: true, children: title }), subTitle && (_jsx(SubTitleWrapper, { children: _jsx(Text, { small: true, css: { fontWeight: 400 }, children: subTitle }) }))] }) }) }));
+    const step = (_jsx(StepWrapper, { color: theme.primary, children: _jsxs(FlexWrapper, { children: [_jsx(Circle, { selected: selected, color: theme.primary, bg: theme.bgLight, children: _jsx(Text, { size: "14px", color: selected ? theme.btnDefaultFontColor : theme.defaultText, semibold: true, children: nr }) }), _jsx(Text, { semibold: true, children: title }), subTitle && (_jsx(SubTitleWrapper, { children: _jsx(Text, { small: true, children: subTitle }) }))] }) }));
+    return selected ? buttonstep : bidirectional ? buttonstep : step;
 };
-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;
+export default Step;

package/lib/core/Stepper/Step/styles.d.ts

@@ -24,4 +24,3 @@ export declare const LabelWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-//# sourceMappingURL=styles.d.ts.map

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

@@ -1,54 +1,61 @@
-"use strict";
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+export const Circle = styled.div((props) => 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};
+  `);
+export const SubTitleWrapper = styled.div `
+  display: flex;
+  text-align: center;
+  justify-content: center;
+  max-width: 350px;
+`;
+export const StepWrapper = styled.div((props) => css `
+    position: relative;
+    display: flex;
+    flex-grow: 1;
+    flex-basis: 0;
+    justify-content: center;
+    padding: 0 1rem;
 
-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"
-})();
+    & > 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};
+      }
+    }
+  `);
+export const FlexWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+`;
+export const LabelWrapper = styled.div ``;

package/lib/core/Stepper/Stepper.stories.d.ts

@@ -4,4 +4,3 @@ declare const meta: Meta<typeof Stepper>;
 export default meta;
 type Story = StoryObj<typeof Stepper>;
 export declare const Default: Story;
-//# sourceMappingURL=Stepper.stories.d.ts.map

package/lib/core/Stepper/Stepper.stories.js

@@ -1,36 +1,33 @@
-"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 }; }
+import Stepper from '.';
 const meta = {
-  title: 'Core/Stepper',
-  component: _.default
+    title: 'Core/Stepper',
+    component: Stepper,
+};
+export default meta;
+export const 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),
+    },
 };
-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/lib/core/Stepper/index.d.ts

@@ -17,4 +17,3 @@ export interface IStep {
 }
 declare const Stepper: React.FC<IProps>;
 export default Stepper;
-//# sourceMappingURL=index.d.ts.map

package/lib/core/Stepper/index.js

@@ -1,60 +1,18 @@
-"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, {})
-  });
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { StepperWrapper } from './styles';
+import Step from './Step';
+import MobileStep from './MobileStep';
+import { useIsMobile } from '../../hooks/useIsMobile';
+import Box from '../Box';
+const Stepper = ({ selected, steps, withMobileLayout = true, bidirectional = false, withBox = true, boxType, onStepSelected, trackingName, trackingEvent, }) => {
+    const isMobile = useIsMobile();
+    const DesktopStepper = () => (_jsx(StepperWrapper, { steps: steps.length, children: steps.map((step, index) => {
+            return (_jsx(Fragment, { children: _jsx(Step, { nr: step.nr, title: step.title, subTitle: step.subTitle, bidirectional: bidirectional, selected: step.nr <= selected, onClick: onStepSelected, trackingEvent: trackingEvent, trackingName: trackingName }) }, index));
+        }) }));
+    const PolyStepper = () => (_jsxs(_Fragment, { children: [!isMobile && _jsx(DesktopStepper, {}), isMobile && _jsx(MobileStep, { steps: steps, selected: selected })] }));
+    if (!withBox)
+        return _jsx(_Fragment, { children: withMobileLayout ? _jsx(PolyStepper, {}) : _jsx(DesktopStepper, {}) });
+    return (_jsx(Box, { type: boxType, children: withMobileLayout ? _jsx(PolyStepper, {}) : _jsx(DesktopStepper, {}) }));
 };
-var _default = exports.default = Stepper;
+export default Stepper;

package/lib/core/Stepper/styles.d.ts

@@ -10,4 +10,3 @@ export declare const StepperWrapper: import("@emotion/styled").StyledComponent<{
 } & {
     steps: number;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-//# sourceMappingURL=styles.d.ts.map

package/lib/core/Stepper/styles.js

@@ -1,30 +1,23 @@
-"use strict";
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+export const StepDivider = styled.div((props) => css `
+    height: 3px;
+    width: 30px;
+    margin-top: 1rem;
+    background-color: ${props.color};
+  `);
+export const StepperWrapper = styled.div((props) => css `
+    display: flex;
+    justify-content: space-between;
+    padding: 0 2.5em;
+    align-items: top;
+    margin-bottom: 1.5em;
 
-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);
+    @media screen and (max-width: 768px) {
+      padding: 0 0.5em;
+
+      span {
+        font-size: 12px;
+      }
+    }
+  `);

package/lib/core/TabBar/TabBar.stories.d.ts

@@ -2,7 +2,6 @@ import { Meta } from '@storybook/react';
 declare const _default: Meta;
 export default _default;
 export declare const TabBarDefault: {
-    render: () => import("react").JSX.Element;
+    render: () => import("react/jsx-runtime").JSX.Element;
     name: string;
 };
-//# sourceMappingURL=TabBar.stories.d.ts.map