@bbl-digital/snorre 4.2.74 → 4.2.76

package/lib/core/SimpleLineChart/index.js

@@ -1,96 +1,17 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _recharts = require("recharts");
-var _CustomLegend = require("../../shared/recharts/CustomLegend");
-var _CustomTooltip = _interopRequireDefault(require("../../shared/recharts/CustomTooltip"));
-var _styles = require("./styles");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const SimpleLineChart = ({
-  height = '350px',
-  width = '100%',
-  data = [],
-  lines,
-  xAxisDataKey,
-  yAxisDataKey,
-  xAxisLine = false,
-  yAxisLine = false,
-  tickLineX = false,
-  tickLineY = false,
-  allowDecimalsInTooltip = true,
-  legendHAlign = 'left',
-  legendVAlign = 'bottom',
-  margin,
-  legendPadding,
-  xAxisPadding = {
-    left: 50,
-    right: 50
-  },
-  layout = 'horizontal',
-  tickFormatterX = e => e,
-  tickFormatterY = e => e,
-  tooltipFormatter = e => e,
-  ...rest
-}) => {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.LineChartContainer, {
-    height: height,
-    width: width,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_recharts.ResponsiveContainer, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_recharts.LineChart, {
-        data: data,
-        margin: margin && margin,
-        barGap: "0%",
-        layout: layout && layout,
-        ...rest,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_recharts.CartesianGrid, {
-          strokeDasharray: "0",
-          vertical: false
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_recharts.XAxis, {
-          dataKey: xAxisDataKey && xAxisDataKey,
-          axisLine: xAxisLine && xAxisLine,
-          tickLine: tickLineX && tickLineX,
-          type: layout === 'vertical' ? 'number' : 'category',
-          padding: xAxisPadding && xAxisPadding,
-          tickFormatter: tickFormatterX,
-          tickMargin: 5
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_recharts.YAxis, {
-          dataKey: yAxisDataKey && yAxisDataKey,
-          axisLine: yAxisLine && yAxisLine,
-          tickLine: tickLineY && tickLineY,
-          type: layout === 'vertical' ? 'category' : 'number',
-          tickFormatter: tickFormatterY
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_recharts.Tooltip, {
-          content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomTooltip.default, {
-            formatter: tooltipFormatter,
-            lineConfig: lines,
-            allowDecimals: allowDecimalsInTooltip
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_recharts.Legend, {
-          verticalAlign: legendVAlign && legendVAlign,
-          align: legendHAlign && legendHAlign,
-          content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomLegend.CustomLegend, {}),
-          wrapperStyle: {
-            paddingLeft: legendPadding?.left ? legendPadding.left : '50px',
-            paddingTop: legendPadding?.top ? legendPadding.top : '10px',
-            paddingBottom: legendPadding?.bottom ? legendPadding.bottom : '0',
-            paddingRight: legendPadding?.right ? legendPadding.right : '0'
-          }
-        }), lines?.length && lines.map(line => {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_recharts.Line, {
-            type: line.type,
-            dataKey: line.dataKey,
-            stroke: line.stroke,
-            strokeWidth: line.strokeWidth,
-            name: line.name
-          }, line.name);
-        })]
-      })
-    })
-  });
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
+import { CustomLegend } from '../../shared/recharts/CustomLegend';
+import CustomTooltip from '../../shared/recharts/CustomTooltip';
+import { LineChartContainer } from './styles';
+const SimpleLineChart = ({ height = '350px', width = '100%', data = [], lines, xAxisDataKey, yAxisDataKey, xAxisLine = false, yAxisLine = false, tickLineX = false, tickLineY = false, allowDecimalsInTooltip = true, legendHAlign = 'left', legendVAlign = 'bottom', margin, legendPadding, xAxisPadding = { left: 50, right: 50 }, layout = 'horizontal', tickFormatterX = (e) => e, tickFormatterY = (e) => e, tooltipFormatter = (e) => e, ...rest }) => {
+    return (_jsx(LineChartContainer, { height: height, width: width, children: _jsx(ResponsiveContainer, { children: _jsxs(LineChart, { data: data, margin: margin && margin, barGap: "0%", layout: layout && layout, ...rest, children: [_jsx(CartesianGrid, { strokeDasharray: "0", vertical: false }), _jsx(XAxis, { dataKey: xAxisDataKey && xAxisDataKey, axisLine: xAxisLine && xAxisLine, tickLine: tickLineX && tickLineX, type: layout === 'vertical' ? 'number' : 'category', padding: xAxisPadding && xAxisPadding, tickFormatter: tickFormatterX, tickMargin: 5 }), _jsx(YAxis, { dataKey: yAxisDataKey && yAxisDataKey, axisLine: yAxisLine && yAxisLine, tickLine: tickLineY && tickLineY, type: layout === 'vertical' ? 'category' : 'number', tickFormatter: tickFormatterY }), _jsx(Tooltip, { content: _jsx(CustomTooltip, { formatter: tooltipFormatter, lineConfig: lines, allowDecimals: allowDecimalsInTooltip }) }), _jsx(Legend, { verticalAlign: legendVAlign && legendVAlign, align: legendHAlign && legendHAlign, content: _jsx(CustomLegend, {}), wrapperStyle: {
+                            paddingLeft: legendPadding?.left ? legendPadding.left : '50px',
+                            paddingTop: legendPadding?.top ? legendPadding.top : '10px',
+                            paddingBottom: legendPadding?.bottom ? legendPadding.bottom : '0',
+                            paddingRight: legendPadding?.right ? legendPadding.right : '0',
+                        } }), lines?.length &&
+                        lines.map((line) => {
+                            return (_jsx(Line, { type: line.type, dataKey: line.dataKey, stroke: line.stroke, strokeWidth: line.strokeWidth, name: line.name }, line.name));
+                        })] }) }) }));
 };
-var _default = exports.default = SimpleLineChart;
+export default SimpleLineChart;

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

@@ -5,4 +5,3 @@ export declare const LineChartContainer: import("@emotion/styled").StyledCompone
     width: string;
     height: string;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-//# sourceMappingURL=styles.d.ts.map

package/lib/core/SimpleLineChart/styles.js

@@ -1,14 +1,5 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.LineChartContainer = void 0;
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const LineChartContainer = exports.LineChartContainer = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "eqc7n110"
-} : {
-  target: "eqc7n110",
-  label: "LineChartContainer"
-})("width:", props => props.width && props.width, ";height:", props => props.height && props.height, ";");
+import styled from '@emotion/styled';
+export const LineChartContainer = styled.div `
+  width: ${(props) => props.width && props.width};
+  height: ${(props) => props.height && props.height};
+`;

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

@@ -34,4 +34,3 @@ export declare const Custom: {
         borderRadius: string;
     };
 };
-//# sourceMappingURL=Skeleton.stories.d.ts.map

package/lib/core/Skeleton/Skeleton.stories.js

@@ -1,53 +1,46 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Rectangle = exports.Default = exports.Custom = exports.Circle = void 0;
-var _ = _interopRequireDefault(require("."));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+import Skeleton from '.';
 const meta = {
-  title: 'Core/Skeleton',
-  component: _.default
+    title: 'Core/Skeleton',
+    component: Skeleton,
 };
-var _default = exports.default = meta;
-const Default = exports.Default = {
-  name: 'Default',
-  args: {
-    circle: false,
-    height: '',
-    width: '',
-    rectangle: false,
-    borderRadius: ''
-  }
+export default meta;
+export const Default = {
+    name: 'Default',
+    args: {
+        circle: false,
+        height: '',
+        width: '',
+        rectangle: false,
+        borderRadius: '',
+    },
 };
-const Circle = exports.Circle = {
-  name: 'Circle',
-  args: {
-    circle: true,
-    height: '',
-    width: '',
-    rectangle: false,
-    borderRadius: ''
-  }
+export const Circle = {
+    name: 'Circle',
+    args: {
+        circle: true,
+        height: '',
+        width: '',
+        rectangle: false,
+        borderRadius: '',
+    },
 };
-const Rectangle = exports.Rectangle = {
-  name: 'Rectangle',
-  args: {
-    circle: false,
-    height: '',
-    width: '',
-    rectangle: true,
-    borderRadius: ''
-  }
+export const Rectangle = {
+    name: 'Rectangle',
+    args: {
+        circle: false,
+        height: '',
+        width: '',
+        rectangle: true,
+        borderRadius: '',
+    },
+};
+export const Custom = {
+    name: 'Custom',
+    args: {
+        circle: false,
+        height: '38px',
+        width: '100px',
+        rectangle: true,
+        borderRadius: '19px',
+    },
 };
-const Custom = exports.Custom = {
-  name: 'Custom',
-  args: {
-    circle: false,
-    height: '38px',
-    width: '100px',
-    rectangle: true,
-    borderRadius: '19px'
-  }
-};

package/lib/core/Skeleton/index.d.ts

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

package/lib/core/Skeleton/index.js

@@ -1,42 +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 Skeleton = ({
-  circle = false,
-  height = undefined,
-  width = undefined,
-  rectangle = false,
-  borderRadius = undefined
-}) => {
-  const commonProps = {
-    height,
-    width,
-    'aria-hidden': true,
-    role: 'presentation'
-  };
-  if (circle) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.SkeletonCircle, {
-      "data-testid": "skeleton",
-      ...commonProps
-    });
-  }
-  if (rectangle) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.SkeletonRectangle, {
-      "data-testid": "skeleton",
-      borderRadius: borderRadius,
-      ...commonProps
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.SkeletonRow, {
-    "data-testid": "skeleton",
-    ...commonProps
-  });
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SkeletonRow, SkeletonCircle, SkeletonRectangle } from './styles';
+const Skeleton = ({ circle = false, height = undefined, width = undefined, rectangle = false, borderRadius = undefined, }) => {
+    const commonProps = {
+        height,
+        width,
+        'aria-hidden': true,
+        role: 'presentation',
+    };
+    if (circle) {
+        return _jsx(SkeletonCircle, { "data-testid": "skeleton", ...commonProps });
+    }
+    if (rectangle) {
+        return (_jsx(SkeletonRectangle, { "data-testid": "skeleton", borderRadius: borderRadius, ...commonProps }));
+    }
+    return _jsx(SkeletonRow, { "data-testid": "skeleton", ...commonProps });
 };
-var _default = exports.default = Skeleton;
+export default Skeleton;

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

@@ -17,4 +17,3 @@ export declare const SkeletonRectangle: import("@emotion/styled").StyledComponen
 } & import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme;
 } & IProps, {}, {}>;
-//# sourceMappingURL=styles.d.ts.map

package/lib/core/Skeleton/styles.js

@@ -1,39 +1,30 @@
-"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 }; }
+import styled from '@emotion/styled';
+import { keyframes } from '@emotion/react';
 const shimmerBg = '#ccc';
-const pulse = (0, _react.keyframes)`
+const pulse = 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', ";");
+const defaultShimmer = styled.span `
+  display: inline-block;
+  position: relative;
+  overflow: hidden;
+  vertical-align: middle;
+  background-color: ${shimmerBg};
+  animation: ${pulse} 2s infinite;
+`;
+export const SkeletonRow = styled(defaultShimmer) `
+  height: ${(props) => (props.height ? props.height : '1em')};
+  width: ${(props) => (props.width ? props.width : '65%')};
+`;
+export const SkeletonCircle = styled(defaultShimmer) `
+  height: ${(props) => (props.height ? props.height : '34px')};
+  width: ${(props) => (props.width ? props.width : '34px')};
+  border-radius: 50%;
+`;
+export const SkeletonRectangle = styled(defaultShimmer) `
+  height: ${(props) => (props.height ? props.height : '34px')};
+  width: ${(props) => (props.width ? props.width : '34px')};
+  border-radius: ${(props) => (props.borderRadius ? props.borderRadius : '0')};
+`;

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

@@ -2,19 +2,18 @@ import { Meta } from '@storybook/react';
 declare const _default: Meta;
 export default _default;
 export declare const Default: {
-    render: () => import("react").JSX.Element;
+    render: () => import("react/jsx-runtime").JSX.Element;
     name: string;
 };
 export declare const Size: {
-    render: () => import("react").JSX.Element;
+    render: () => import("react/jsx-runtime").JSX.Element;
     name: string;
 };
 export declare const Color: {
-    render: () => import("react").JSX.Element;
+    render: () => import("react/jsx-runtime").JSX.Element;
     name: string;
 };
 export declare const Border: {
-    render: () => import("react").JSX.Element;
+    render: () => import("react/jsx-runtime").JSX.Element;
     name: string;
 };
-//# sourceMappingURL=Spinner.stories.d.ts.map

package/lib/core/Spinner/Spinner.stories.js

@@ -1,37 +1,22 @@
-"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
+import { jsx as _jsx } from "react/jsx-runtime";
+import Spinner from '.';
+export default {
+    title: 'Core/Spinner',
+    component: Spinner,
 };
-const Default = exports.Default = {
-  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {}),
-  name: 'Default'
+export const Default = {
+    render: () => _jsx(Spinner, {}),
+    name: 'Default',
 };
-const Size = exports.Size = {
-  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
-    size: 40
-  }),
-  name: 'Size'
+export const Size = {
+    render: () => _jsx(Spinner, { size: 40 }),
+    name: 'Size',
 };
-const Color = exports.Color = {
-  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
-    color: "red"
-  }),
-  name: 'Color'
+export const Color = {
+    render: () => _jsx(Spinner, { color: "red" }),
+    name: 'Color',
+};
+export const Border = {
+    render: () => _jsx(Spinner, { thickness: 5, offsetColor: "red", color: "green" }),
+    name: 'Border',
 };
-const Border = exports.Border = {
-  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
-    thickness: 5,
-    offsetColor: "red",
-    color: "green"
-  }),
-  name: 'Border'
-};

package/lib/core/Spinner/index.d.ts

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

package/lib/core/Spinner/index.js

@@ -1,21 +1,13 @@
-"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..."
-  });
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { styles } from './styles';
+const Spinner = (props) => {
+    return (_jsx("div", { css: (theme) => [
+            styles.default(theme),
+            props.size && styles.size(props.size),
+            props.margin && styles.margin(props.margin),
+            props.color && styles.color(props.color),
+            (props.thickness || props.offsetColor) &&
+                styles.border(props.thickness, props.offsetColor, props.color || theme.primary),
+        ], role: "alert", "aria-live": "polite", "aria-label": "Laster..." }));
 };
-var _default = exports.default = Spinner;
+export default Spinner;

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

@@ -8,4 +8,3 @@ declare const styles: {
 };
 export default styles;
 export { styles };
-//# sourceMappingURL=styles.d.ts.map

package/lib/core/Spinner/styles.js

@@ -1,15 +1,58 @@
-"use strict";
+import { css } from '@emotion/react';
+const styles = {
+    default: (theme) => css `
+    @keyframes spinner {
+      0% {
+        transform: translate3d(-50%, -50%, 0) rotate(0deg);
+      }
+      100% {
+        transform: translate3d(-50%, -50%, 0) rotate(360deg);
+      }
+    }
 
-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;"))
+    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;
+      }
+    }
+  `,
+    size: (size) => css `
+    &::before {
+      width: ${size}px;
+      height: ${size}px;
+    }
+  `,
+    margin: (margin) => css `
+    margin: ${margin};
+  `,
+    color: (color) => css `
+    &::before {
+      border-bottom-color: ${color};
+    }
+  `,
+    border: (thickness = 3, offsetColor = '#cfd0d1', borderBottom) => css `
+    &::before {
+      border: ${thickness}px solid ${offsetColor};
+      border-bottom-color: ${borderBottom};
+    }
+  `,
 };
-var _default = exports.default = styles;
+export default styles;
+export { styles };

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

@@ -5,4 +5,3 @@ type Props = {
 };
 declare const MobileStep: ({ steps, selected }: Props) => import("react").JSX.Element;
 export default MobileStep;
-//# sourceMappingURL=index.d.ts.map

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

@@ -1,40 +1,10 @@
-"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 || '']
-      })]
-    })]
-  });
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import Text from '../../Text';
+import { ProgressCircle, StepInformation, Wrapper } from './styles';
+const MobileStep = ({ steps, selected }) => {
+    const progressPercentage = (selected / steps.length) * 100;
+    const currentStep = steps.find((step) => step.nr === selected);
+    const isLastStep = selected === steps.length;
+    return (_jsxs(Wrapper, { children: [_jsx(ProgressCircle, { "$progress": progressPercentage, children: _jsxs(Text, { size: "14px", semibold: true, children: [selected, " av ", steps.length] }) }), _jsxs(StepInformation, { children: [_jsx(Text, { size: "16px", bold: true, children: currentStep?.title || '' }), !isLastStep && (_jsxs(Text, { size: "13px", semibold: true, subtle: true, children: ["Neste: ", steps[selected]?.title || ''] }))] })] }));
 };
-var _default = exports.default = MobileStep;
+export default MobileStep;