@bbl-digital/snorre 4.0.0-beta.1 → 4.0.0-beta.11

package/lib/core/SimpleBarChart/SimpleBarChart.stories.js

@@ -0,0 +1,174 @@
+import SimpleBarChart from '.';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default {
+  title: 'Core/SimpleBarChart',
+  component: SimpleBarChart
+};
+export const storyDataKostnadBudsjett = [{
+  name: 'Jan',
+  kostnad: 66000,
+  budsjett: 65000
+}, {
+  name: 'Feb',
+  kostnad: 55000,
+  budsjett: 65000
+}, {
+  name: 'Mars',
+  kostnad: 60000,
+  budsjett: 70000
+}, {
+  name: 'Apr',
+  kostnad: 34000,
+  budsjett: 40000
+}, {
+  name: 'Mai',
+  kostnad: 36000,
+  budsjett: 50000
+}, {
+  name: 'Jun',
+  kostnad: 50400,
+  budsjett: 70000
+}, {
+  name: 'Jul',
+  kostnad: 54400,
+  budsjett: 70000
+}, {
+  name: 'Aug',
+  kostnad: 53400,
+  budsjett: 70000
+}, {
+  name: 'Sept',
+  kostnad: 50400,
+  budsjett: 70000
+}, {
+  name: 'Okt',
+  kostnad: 44400,
+  budsjett: 70000
+}, {
+  name: 'Nov',
+  kostnad: 24700,
+  budsjett: 70000
+}, {
+  name: 'Des',
+  kostnad: 5400,
+  budsjett: 70000
+}];
+export const storyDataSimpleNumbers = [{
+  name: 'Jan',
+  amount: 1
+}, {
+  name: 'Feb',
+  amount: 3
+}, {
+  name: 'Mars',
+  amount: 2
+}, {
+  name: 'Apr',
+  amount: 5
+}, {
+  name: 'Mai',
+  amount: 6
+}, {
+  name: 'Jun',
+  amount: 7
+}, {
+  name: 'Jul',
+  amount: 8
+}, {
+  name: 'Aug',
+  amount: 6
+}, {
+  name: 'Sept',
+  amount: 5
+}, {
+  name: 'Okt',
+  amount: 3
+}, {
+  name: 'Nov',
+  amount: 2
+}, {
+  name: 'Des',
+  amount: 1
+}];
+export const Default = {
+  render: (_args, {
+    loaded: {
+      theme
+    }
+  }) => /*#__PURE__*/_jsx(SimpleBarChart, {
+    data: storyDataKostnadBudsjett,
+    bars: [{
+      name: 'Kostnad',
+      dataKey: 'kostnad',
+      fill: theme.primary
+    }, {
+      name: 'Budsjett',
+      dataKey: 'budsjett',
+      fill: theme.secondary
+    }],
+    xAxisDataKey: "name"
+  }),
+  name: 'Default'
+};
+export const WithXAxisLineAndYAxisLine = {
+  render: (_args, {
+    loaded: {
+      theme
+    }
+  }) => /*#__PURE__*/_jsx(SimpleBarChart, {
+    data: storyDataKostnadBudsjett,
+    bars: [{
+      name: 'Kostnad',
+      dataKey: 'kostnad',
+      fill: theme.primary
+    }, {
+      name: 'Budsjett',
+      dataKey: 'budsjett',
+      fill: theme.secondary
+    }],
+    xAxisLine: true,
+    yAxisLine: true,
+    xAxisDataKey: "name"
+  }),
+  name: 'With xAxisLine and yAxisLine'
+};
+export const VerticalBarChart = {
+  render: (_args, {
+    loaded: {
+      theme
+    }
+  }) => /*#__PURE__*/_jsx(SimpleBarChart, {
+    data: storyDataKostnadBudsjett,
+    bars: [{
+      name: 'Kostnad',
+      dataKey: 'kostnad',
+      fill: theme.primary
+    }, {
+      name: 'Budsjett',
+      dataKey: 'budsjett',
+      fill: theme.secondary
+    }],
+    layout: "vertical",
+    yAxisDataKey: "name",
+    xAxisDataKey: "kostnad"
+  }),
+  name: 'Vertical BarChart'
+};
+export const WithSimpleNumbers = {
+  render: (_args, {
+    loaded: {
+      theme
+    }
+  }) => /*#__PURE__*/_jsx(SimpleBarChart, {
+    data: storyDataSimpleNumbers,
+    bars: [{
+      name: 'Antall',
+      dataKey: 'amount',
+      fill: theme.primary
+    }],
+    xAxisDataKey: "name",
+    yAxisDataKey: "amount",
+    allowDecimals: false
+  }),
+  name: 'With simple numbers'
+};

package/lib/core/SimpleBarChart/index.js

@@ -6,7 +6,6 @@ import CustomTooltip from '../../shared/recharts/CustomTooltip';
 import { CustomLegend } from '../../shared/recharts/CustomLegend';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 const SimpleBarChart = ({
   height = '350px',
   width = 'auto',
@@ -35,7 +34,6 @@ const SimpleBarChart = ({
     if (tickFormatter) return tickFormatter;
     return formatAxisPrice;
   };
-
   return /*#__PURE__*/_jsx(BarChartContainer, {
     width: width && width,
     height: height && height,
@@ -95,5 +93,4 @@ const SimpleBarChart = ({
     })
   });
 };
-
 export default SimpleBarChart;

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

@@ -0,0 +1,8 @@
+import { LoadedType } from '../../shared/types/LoadedType';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: {
+    render: (_args: unknown, { loaded: { theme } }: LoadedType) => JSX.Element;
+    name: string;
+};
+//# sourceMappingURL=SimpleLineChart.stories.d.ts.map

package/lib/core/SimpleLineChart/SimpleLineChart.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SimpleLineChart.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/SimpleLineChart/SimpleLineChart.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAA;;AAI1D,wBAGS;AAyCT,eAAO,MAAM,OAAO;oBACF,OAAO,yBAAyB,UAAU;;CAgB3D,CAAA"}

package/lib/core/SimpleLineChart/SimpleLineChart.stories.js

@@ -0,0 +1,53 @@
+import SimpleLineChart from '.';
+import { getFormattedDate } from '../../utils/format';
+import { ddmmyyyy } from '../../utils/dates';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default {
+  title: 'Core/SimpleLineChart',
+  component: SimpleLineChart
+};
+const simplelinechartdata = [{
+  date: getFormattedDate(new Date(2020, 1, 5), ddmmyyyy),
+  interest: 1.7
+}, {
+  date: getFormattedDate(new Date(2020, 2, 5), ddmmyyyy),
+  interest: 1.9
+}, {
+  date: getFormattedDate(new Date(2020, 3, 5), ddmmyyyy),
+  interest: 2.4
+}, {
+  date: getFormattedDate(new Date(2020, 4, 5), ddmmyyyy),
+  interest: 2.8
+}, {
+  date: getFormattedDate(new Date(2020, 5, 5), ddmmyyyy),
+  interest: 2.6
+}, {
+  date: getFormattedDate(new Date(2020, 6, 5), ddmmyyyy),
+  interest: 2.3
+}, {
+  date: getFormattedDate(new Date(2020, 7, 5), ddmmyyyy),
+  interest: 2.4
+}, {
+  date: getFormattedDate(new Date(2020, 8, 5), ddmmyyyy),
+  interest: 2.5
+}, {
+  date: getFormattedDate(new Date(2020, 9, 5), ddmmyyyy),
+  interest: 3.5
+}];
+export const Default = {
+  render: (_args, {
+    loaded: {
+      theme
+    }
+  }) => /*#__PURE__*/_jsx(SimpleLineChart, {
+    data: simplelinechartdata,
+    lines: [{
+      name: 'Interest',
+      dataKey: 'interest',
+      stroke: theme.primary,
+      type: 'monotone'
+    }],
+    xAxisDataKey: "date"
+  }),
+  name: 'Default'
+};

package/lib/core/SimpleLineChart/index.js

@@ -5,7 +5,6 @@ import CustomTooltip from '../../shared/recharts/CustomTooltip';
 import { LineChartContainer } from './styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 const SimpleLineChart = ({
   height = '350px',
   width = '100%',
@@ -88,5 +87,4 @@ const SimpleLineChart = ({
     })
   });
 };
-
 export default SimpleLineChart;

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

@@ -0,0 +1,37 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Skeleton from '.';
+declare const meta: Meta<typeof Skeleton>;
+export default meta;
+declare type Story = StoryObj<typeof Skeleton>;
+export declare const Default: Story;
+export declare const Circle: {
+    name: string;
+    args: {
+        circle: boolean;
+        height: string;
+        width: string;
+        rectangle: boolean;
+        borderRadius: string;
+    };
+};
+export declare const Rectangle: {
+    name: string;
+    args: {
+        circle: boolean;
+        height: string;
+        width: string;
+        rectangle: boolean;
+        borderRadius: string;
+    };
+};
+export declare const Custom: {
+    name: string;
+    args: {
+        circle: boolean;
+        height: string;
+        width: string;
+        rectangle: boolean;
+        borderRadius: string;
+    };
+};
+//# sourceMappingURL=Skeleton.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Skeleton/Skeleton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,QAAQ,MAAM,GAAG,CAAA;AAExB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAGvB,CAAA;AAET,eAAe,IAAI,CAAA;AAEnB,aAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAA;AAEtC,eAAO,MAAM,OAAO,EAAE,KASrB,CAAA;AAED,eAAO,MAAM,MAAM;;;;;;;;;CASlB,CAAA;AAED,eAAO,MAAM,SAAS;;;;;;;;;CASrB,CAAA;AAED,eAAO,MAAM,MAAM;;;;;;;;;CASlB,CAAA"}

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

@@ -0,0 +1,46 @@
+import Skeleton from '.';
+const meta = {
+  title: 'Core/Skeleton',
+  component: Skeleton
+};
+export default meta;
+export const Default = {
+  name: 'Default',
+  args: {
+    circle: false,
+    height: '',
+    width: '',
+    rectangle: false,
+    borderRadius: ''
+  }
+};
+export const Circle = {
+  name: 'Circle',
+  args: {
+    circle: true,
+    height: '',
+    width: '',
+    rectangle: false,
+    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'
+  }
+};

package/lib/core/Skeleton/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { SkeletonRow, SkeletonCircle, SkeletonRectangle } from './styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const Skeleton = ({
   circle = false,
   height = undefined,
@@ -16,7 +15,6 @@ const Skeleton = ({
       width: width
     });
   }
-
   if (rectangle) {
     return /*#__PURE__*/_jsx(SkeletonRectangle, {
       "data-testid": "skeleton",
@@ -25,12 +23,10 @@ const Skeleton = ({
       width: width
     });
   }
-
   return /*#__PURE__*/_jsx(SkeletonRow, {
     "data-testid": "skeleton",
     height: height,
     width: width
   });
 };
-
 export default Skeleton;

package/lib/core/Skeleton/styles.js

@@ -6,14 +6,12 @@ const pulse = keyframes`
   50%  { opacity: 0.2; }
   100% { opacity: 0.6; }
 `;
-
 const defaultShimmer = _styled("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;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL1NrZWxldG9uL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFZa0MiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL3BhY2thZ2VzL2NvcmUvU2tlbGV0b24vc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCB7IElQcm9wcyB9IGZyb20gJy4uL1NrZWxldG9uJ1xuXG5jb25zdCBzaGltbWVyQmcgPSAnI2NjYydcblxuY29uc3QgcHVsc2UgPSBrZXlmcmFtZXNgXG4gIDAlIHsgb3BhY2l0eTogMC42OyB9XG4gIDUwJSAgeyBvcGFjaXR5OiAwLjI7IH1cbiAgMTAwJSB7IG9wYWNpdHk6IDAuNjsgfVxuYFxuXG5jb25zdCBkZWZhdWx0U2hpbW1lciA9IHN0eWxlZC5zcGFuYFxuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgdmVydGljYWwtYWxpZ246IG1pZGRsZTtcbiAgYmFja2dyb3VuZC1jb2xvcjogJHtzaGltbWVyQmd9O1xuICBhbmltYXRpb246ICR7cHVsc2V9IDJzIGluZmluaXRlO1xuYFxuXG5leHBvcnQgY29uc3QgU2tlbGV0b25Sb3cgPSBzdHlsZWQoZGVmYXVsdFNoaW1tZXIpPElQcm9wcz5gXG4gIGhlaWdodDogJHsocHJvcHMpID0+IChwcm9wcy5oZWlnaHQgPyBwcm9wcy5oZWlnaHQgOiAnMWVtJyl9O1xuICB3aWR0aDogJHsocHJvcHMpID0+IChwcm9wcy53aWR0aCA/IHByb3BzLndpZHRoIDogJzY1JScpfTtcbmBcblxuZXhwb3J0IGNvbnN0IFNrZWxldG9uQ2lyY2xlID0gc3R5bGVkKGRlZmF1bHRTaGltbWVyKTxJUHJvcHM+YFxuICBoZWlnaHQ6ICR7KHByb3BzKSA9PiAocHJvcHMuaGVpZ2h0ID8gcHJvcHMuaGVpZ2h0IDogJzM0cHgnKX07XG4gIHdpZHRoOiAkeyhwcm9wcykgPT4gKHByb3BzLndpZHRoID8gcHJvcHMud2lkdGggOiAnMzRweCcpfTtcbiAgYm9yZGVyLXJhZGl1czogNTAlO1xuYFxuXG5leHBvcnQgY29uc3QgU2tlbGV0b25SZWN0YW5nbGUgPSBzdHlsZWQoZGVmYXVsdFNoaW1tZXIpPElQcm9wcz5gXG4gIGhlaWdodDogJHsocHJvcHMpID0+IChwcm9wcy5oZWlnaHQgPyBwcm9wcy5oZWlnaHQgOiAnMzRweCcpfTtcbiAgd2lkdGg6ICR7KHByb3BzKSA9PiAocHJvcHMud2lkdGggPyBwcm9wcy53aWR0aCA6ICczNHB4Jyl9O1xuICBib3JkZXItcmFkaXVzOiAkeyhwcm9wcykgPT4gKHByb3BzLmJvcmRlclJhZGl1cyA/IHByb3BzLmJvcmRlclJhZGl1cyA6ICcwJyl9O1xuYFxuIl19 */"));
-
 export const SkeletonRow = /*#__PURE__*/_styled(defaultShimmer, process.env.NODE_ENV === "production" ? {
   target: "enirjj92"
 } : {

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

@@ -0,0 +1,19 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const Size: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const Color: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const Border: {
+    render: () => JSX.Element;
+    name: string;
+};
+//# sourceMappingURL=Spinner.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Spinner/Spinner.stories.tsx"],"names":[],"mappings":";AAGA,wBAGS;AAET,eAAO,MAAM,OAAO;;;CAGnB,CAAA;AAED,eAAO,MAAM,IAAI;;;CAGhB,CAAA;AAED,eAAO,MAAM,KAAK;;;CAGjB,CAAA;AAED,eAAO,MAAM,MAAM;;;CAGlB,CAAA"}

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

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

package/lib/core/Spinner/index.js

@@ -2,11 +2,9 @@
 import React from 'react';
 import { styles } from './styles';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-
 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)]
   });
 };
-
 export default Spinner;

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

@@ -0,0 +1,7 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const TabBarDefault: {
+    render: () => JSX.Element;
+    name: string;
+};
+//# sourceMappingURL=TabBar.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabBar.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/TabBar/TabBar.stories.tsx"],"names":[],"mappings":";AAKA,wBAUS;AAET,eAAO,MAAM,aAAa;;;CAmBzB,CAAA"}

package/lib/core/TabBar/TabBar.stories.js

@@ -0,0 +1,38 @@
+import TabBar from '.';
+import TabItem from './TabItem';
+import IconMembership from '../../icons/General/IconMembership';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default {
+  title: 'Core/TabBar',
+  component: TabBar,
+  parameters: {
+    docs: {
+      story: {
+        inline: false
+      }
+    }
+  }
+};
+export const TabBarDefault = {
+  render: () => /*#__PURE__*/_jsxs(TabBar, {
+    children: [/*#__PURE__*/_jsx(TabItem, {
+      text: "Medlemsbevis",
+      icon: /*#__PURE__*/_jsx(IconMembership, {
+        primary: true,
+        secondary: false
+      }),
+      active: true,
+      onClick: () => console.log('hi')
+    }), /*#__PURE__*/_jsx(TabItem, {
+      text: "Medlemsbevis",
+      icon: /*#__PURE__*/_jsx(IconMembership, {
+        primary: false,
+        secondary: true
+      }),
+      active: false,
+      onClick: () => console.log('hi')
+    })]
+  }),
+  name: 'TabBar'
+};

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

@@ -3,7 +3,6 @@ import { TabWrapper } from './styles';
 import Text from '../../Text';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 const TabItem = ({
   text,
   icon,
@@ -20,5 +19,4 @@ const TabItem = ({
     })]
   });
 };
-
 export default TabItem;

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

@@ -1,7 +1,5 @@
 import _styled from "@emotion/styled/base";
-
 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)."; }
-
 export const TabWrapper = _styled("button", process.env.NODE_ENV === "production" ? {
   target: "e1dmbbca0"
 } : {

package/lib/core/TabBar/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Wrapper } from './styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const TabBar = ({
   children
 }) => {
@@ -9,5 +8,4 @@ const TabBar = ({
     children: children
   });
 };
-
 export default TabBar;

package/lib/core/TabBar/styles.js

@@ -1,7 +1,5 @@
 import _styled from "@emotion/styled/base";
-
 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)."; }
-
 export const Wrapper = _styled("div", process.env.NODE_ENV === "production" ? {
   target: "eg2v4jp0"
 } : {

package/lib/core/TabNav/TabContext.js

@@ -1,4 +1,8 @@
 import React, { useCallback, useEffect, useState } from 'react';
+
+// Props for the Provider.
+
+// Handles props to the context.
 import { jsx as _jsx } from "react/jsx-runtime";
 export const TabContext = /*#__PURE__*/React.createContext({
   active: 0,
@@ -15,21 +19,20 @@ export const TabContextProvider = ({
   const [widthObjects, setWidthObjects] = useState({});
   const [initialized, setInitialized] = useState(false);
   const width = Object.values(widthObjects).reduce((a, b) => a + b, 0);
-
   const setWidth = obj => {
     const [[key, value]] = Object.entries(obj);
-    setWidthObjects(prev => ({ ...prev,
+    setWidthObjects(prev => ({
+      ...prev,
       [key]: value
     }));
   };
-
   const handleChange = useCallback(() => {
     if (!initialized) {
       setInitialized(true);
       return;
     }
-
-    onChange(active); // eslint-disable-next-line react-hooks/exhaustive-deps
+    onChange(active);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [active]);
   useEffect(() => {
     if (value) setActive(value);

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

@@ -0,0 +1,47 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const TabNavDefault: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const TabNavColors: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const TabNavVertical: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const TabNavValue: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const TabNavWithButton: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const TabNavWithSelect: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const TabNavWithOneDisabledValue: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const TabNavWithBreakpoint: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const TabNavWithSelectAndLoadsItems: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const TabNavWithManyOptions: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const TabNavVerticalWithButton: {
+    render: () => JSX.Element;
+    name: string;
+};
+//# sourceMappingURL=TabNav.stories.d.ts.map

package/lib/core/TabNav/TabNav.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabNav.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/TabNav/TabNav.stories.tsx"],"names":[],"mappings":";AAKA,wBAGS;AAET,eAAO,MAAM,aAAa;;;CASzB,CAAA;AAED,eAAO,MAAM,YAAY;;;CASxB,CAAA;AAED,eAAO,MAAM,cAAc;;;CAS1B,CAAA;AAED,eAAO,MAAM,WAAW;;;CASvB,CAAA;AAED,eAAO,MAAM,gBAAgB;;;CAa5B,CAAA;AAED,eAAO,MAAM,gBAAgB;;;CAsC5B,CAAA;AAED,eAAO,MAAM,0BAA0B;;;CA6BtC,CAAA;AAED,eAAO,MAAM,oBAAoB;;;CAiBhC,CAAA;AAED,eAAO,MAAM,6BAA6B;;;CA6GzC,CAAA;AAED,eAAO,MAAM,qBAAqB;;;CAsBjC,CAAA;AAED,eAAO,MAAM,wBAAwB;;;CAcpC,CAAA"}