@bbl-digital/snorre 4.1.70 → 4.1.72

package/lib/v2/core/TabNav/index.js

@@ -0,0 +1,123 @@
+/** @jsxImportSource @emotion/react */
+import React from 'react';
+import { useTheme } from '@emotion/react';
+import { TabContextProvider, TabContext } from './TabContext';
+import { styles, TabNavWrapper, TabNavActions, SelectWrapper, SelectLinkWrapper } from './styles';
+import { useContainerDimensions } from './utils/useContainerDimensions';
+import { useIsMobile } from '../../../hooks/useIsMobile';
+import Select, { Option } from '../../../core/Select';
+import Link from '../../../core/Link';
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+const TabNav = ({
+  value,
+  children,
+  onChange,
+  css,
+  maxWidth,
+  vertical,
+  actions,
+  className,
+  breakpoint
+}) => {
+  const isMobile = useIsMobile(breakpoint);
+  const theme = useTheme();
+
+  // Container dimensions
+  const ref = React.useRef(null);
+  const {
+    width: containerWidth
+  } = useContainerDimensions(ref);
+
+  // Button dimensions
+  const buttonRef = React.useRef(null);
+  const {
+    width: actionsWidth
+  } = useContainerDimensions(buttonRef);
+  const values = React.Children.map(children, child => child !== null && child.props)?.filter(Boolean) || [];
+  const displayNameFromValue = value => {
+    const item = values.find(item => item.value === value);
+    return item?.displayText || String(value);
+  };
+  const valueWithSelectItemIndex = values.findIndex(item => item.selectItems?.length);
+  const listOfSelectedItems = items => {
+    if (!items) return [];
+    return items.map(prop => ({
+      ...prop
+    }));
+  };
+  if (valueWithSelectItemIndex > -1) {
+    const selectedItems = values[valueWithSelectItemIndex].selectItems;
+
+    // If we have no actual selectedItems, dont show any label while in the mobile/dropdown version
+    const isEverySelectedItemDisabledOrLink = Number(selectedItems?.length) >= 1 && selectedItems?.every(item => item.disabled || item.onClick);
+    if (isEverySelectedItemDisabledOrLink) {
+      const itemsWithOnClick = selectedItems?.filter(item => item.onClick) || [];
+
+      // Remove valueWithSelectItemIndex from the values array, but add on itemsWithOnClick in the list
+      values.splice(valueWithSelectItemIndex, 1, ...listOfSelectedItems(itemsWithOnClick));
+    } else {
+      values.splice(valueWithSelectItemIndex + 1, 0, ...listOfSelectedItems(selectedItems));
+    }
+  }
+  return _jsx(TabContextProvider, {
+    onChange: onChange,
+    value: value || values?.[0].value,
+    children: _jsx(TabContext.Consumer, {
+      children: ({
+        width: childrenTotalWidth,
+        setActive,
+        active
+      }) => {
+        if (breakpoint && isMobile || !breakpoint && actionsWidth + childrenTotalWidth > containerWidth) {
+          // Render dropdown instead of tabs
+
+          return _jsxs(SelectWrapper, {
+            children: [_jsx(Select, {
+              input: true,
+              width: "auto",
+              text: "Velg",
+              selectedValue: displayNameFromValue(String(active)) || '0',
+              onChange: ({
+                value
+              }) => value && setActive(value),
+              className: className,
+              maxHeight: "40vh",
+              children: values.map(({
+                displayText,
+                value: v,
+                selectItems,
+                onClick,
+                indent,
+                disabled
+              }) => onClick ? _jsx(SelectLinkWrapper, {
+                children: _jsx(Link, {
+                  nopadding: true,
+                  small: true,
+                  onClick: onClick,
+                  children: displayText || v
+                })
+              }, v) : _jsx(Option, {
+                value: v,
+                indent: indent,
+                disabled: disabled || Boolean(selectItems?.length),
+                children: displayText || v
+              }, v))
+            }), actions]
+          });
+        }
+        return _jsxs(TabNavWrapper, {
+          ref: ref,
+          theme: theme,
+          className: className,
+          css: () => [vertical && styles.vertical, maxWidth && styles.maxWidth(maxWidth), css],
+          children: [children, actions && _jsx(TabNavActions, {
+            ref: buttonRef,
+            children: actions
+          })]
+        });
+      }
+    })
+  });
+};
+export { TabNav };
+export default TabNav;

package/lib/v2/core/TabNav/styles.d.ts

@@ -0,0 +1,22 @@
+export declare const TabNavWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TabNavActions: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const SelectLinkWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
+export declare const SelectWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const styles: {
+    maxWidth: (width: number) => import("@emotion/react").SerializedStyles;
+    vertical: import("@emotion/react").SerializedStyles;
+};
+export default styles;
+//# sourceMappingURL=styles.d.ts.map

package/lib/v2/core/TabNav/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/packages/v2/core/TabNav/styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,aAAa;;eA8BvB,WAAW;yGAnBb,CAAA;AAED,eAAO,MAAM,aAAa;;eAiBvB,WAAW;2GAJb,CAAA;AAED,eAAO,MAAM,iBAAiB;;eAE3B,WAAW;yGAF8B,CAAA;AAE5C,eAAO,MAAM,aAAa;;eAAvB,WAAW;yGAUb,CAAA;AAED,eAAO,MAAM,MAAM;sBACC,MAAM;;CAsBzB,CAAA;AAED,eAAe,MAAM,CAAA"}

package/lib/v2/core/TabNav/styles.js

@@ -0,0 +1,58 @@
+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)."; }
+import { css } from '@emotion/react';
+import bp from '../../../globals/styles/breakpoints';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1qytrcl",
+  styles: "display:flex;gap:0.5rem;width:100%;position:relative;padding:0;margin:0;align-content:space-between;align-items:flex-end"
+} : {
+  name: "mniq5c-TabNavWrapper",
+  styles: "display:flex;gap:0.5rem;width:100%;position:relative;padding:0;margin:0;align-content:space-between;align-items:flex-end;label:TabNavWrapper;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy92Mi9jb3JlL1RhYk5hdi9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS2dCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy92Mi9jb3JlL1RhYk5hdi9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IGJwIGZyb20gJy4uLy4uLy4uL2dsb2JhbHMvc3R5bGVzL2JyZWFrcG9pbnRzJ1xuXG5leHBvcnQgY29uc3QgVGFiTmF2V3JhcHBlciA9IHN0eWxlZC5kaXYoXG4gIChwcm9wcykgPT4gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgZ2FwOiAwLjVyZW07XG4gICAgd2lkdGg6IDEwMCU7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIHBhZGRpbmc6IDA7XG4gICAgbWFyZ2luOiAwO1xuICAgIGFsaWduLWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG4gICAgYWxpZ24taXRlbXM6IGZsZXgtZW5kO1xuICBgXG4pXG5cbmV4cG9ydCBjb25zdCBUYWJOYXZBY3Rpb25zID0gc3R5bGVkLnNwYW5gXG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgcmlnaHQ6IDA7XG4gIGJvdHRvbTogMWVtO1xuXG4gIEBtZWRpYSAobWF4LXdpZHRoOiAke2JwLm1lZGl1bX0pIHtcbiAgICBib3R0b206IDA7XG4gICAgcGFkZGluZzogMWVtO1xuXG4gICAgJjphZnRlciB7XG4gICAgICBkaXNwbGF5OiBub25lO1xuICAgIH1cbiAgfVxuYFxuXG5leHBvcnQgY29uc3QgU2VsZWN0TGlua1dyYXBwZXIgPSBzdHlsZWQubGlgYFxuXG5leHBvcnQgY29uc3QgU2VsZWN0V3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGdhcDogMC41ZW07XG5cbiAgLy8gVG8gbWFrZSB0aGUgdGVzdCBhbGlnbiBjb3JyZWN0bHkgYW5kIG5vdCBvdmVyZmxvdy5cbiAgJiA+IHNwYW4gPiBkaXYgPiB1bCA+IGxpID4gYnV0dG9uIHtcbiAgICB3b3JkLWJyZWFrOiBicmVhay1hbGw7XG4gICAgdGV4dC1hbGlnbjogbGVmdDtcbiAgfVxuYFxuXG5leHBvcnQgY29uc3Qgc3R5bGVzID0ge1xuICBtYXhXaWR0aDogKHdpZHRoOiBudW1iZXIpID0+IGNzc2BcbiAgICBtYXgtd2lkdGg6ICR7d2lkdGh9cHg7XG4gIGAsXG5cbiAgdmVydGljYWw6IGNzc2BcbiAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgIGFsaWduLWl0ZW1zOiBmbGV4LXN0YXJ0O1xuXG4gICAgJjphZnRlciB7XG4gICAgICBsZWZ0OiAwO1xuICAgICAgdG9wOiAwO1xuICAgICAgd2lkdGg6IDRweDtcbiAgICAgIGhlaWdodDogMTAwJTtcbiAgICB9XG5cbiAgICAmIGJ1dHRvbjo6YWZ0ZXIsXG4gICAgJiBidXR0b246aG92ZXI6OmFmdGVyIHtcbiAgICAgIGhlaWdodDogMTAwJTtcbiAgICAgIHdpZHRoOiA0cHg7XG4gICAgICB0b3A6IDA7XG4gICAgfVxuICBgLFxufVxuXG5leHBvcnQgZGVmYXVsdCBzdHlsZXNcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export const TabNavWrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e2i76m83"
+} : {
+  target: "e2i76m83",
+  label: "TabNavWrapper"
+})(props => _ref, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy92Mi9jb3JlL1RhYk5hdi9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSTZCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy92Mi9jb3JlL1RhYk5hdi9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IGJwIGZyb20gJy4uLy4uLy4uL2dsb2JhbHMvc3R5bGVzL2JyZWFrcG9pbnRzJ1xuXG5leHBvcnQgY29uc3QgVGFiTmF2V3JhcHBlciA9IHN0eWxlZC5kaXYoXG4gIChwcm9wcykgPT4gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgZ2FwOiAwLjVyZW07XG4gICAgd2lkdGg6IDEwMCU7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIHBhZGRpbmc6IDA7XG4gICAgbWFyZ2luOiAwO1xuICAgIGFsaWduLWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG4gICAgYWxpZ24taXRlbXM6IGZsZXgtZW5kO1xuICBgXG4pXG5cbmV4cG9ydCBjb25zdCBUYWJOYXZBY3Rpb25zID0gc3R5bGVkLnNwYW5gXG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgcmlnaHQ6IDA7XG4gIGJvdHRvbTogMWVtO1xuXG4gIEBtZWRpYSAobWF4LXdpZHRoOiAke2JwLm1lZGl1bX0pIHtcbiAgICBib3R0b206IDA7XG4gICAgcGFkZGluZzogMWVtO1xuXG4gICAgJjphZnRlciB7XG4gICAgICBkaXNwbGF5OiBub25lO1xuICAgIH1cbiAgfVxuYFxuXG5leHBvcnQgY29uc3QgU2VsZWN0TGlua1dyYXBwZXIgPSBzdHlsZWQubGlgYFxuXG5leHBvcnQgY29uc3QgU2VsZWN0V3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGdhcDogMC41ZW07XG5cbiAgLy8gVG8gbWFrZSB0aGUgdGVzdCBhbGlnbiBjb3JyZWN0bHkgYW5kIG5vdCBvdmVyZmxvdy5cbiAgJiA+IHNwYW4gPiBkaXYgPiB1bCA+IGxpID4gYnV0dG9uIHtcbiAgICB3b3JkLWJyZWFrOiBicmVhay1hbGw7XG4gICAgdGV4dC1hbGlnbjogbGVmdDtcbiAgfVxuYFxuXG5leHBvcnQgY29uc3Qgc3R5bGVzID0ge1xuICBtYXhXaWR0aDogKHdpZHRoOiBudW1iZXIpID0+IGNzc2BcbiAgICBtYXgtd2lkdGg6ICR7d2lkdGh9cHg7XG4gIGAsXG5cbiAgdmVydGljYWw6IGNzc2BcbiAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgIGFsaWduLWl0ZW1zOiBmbGV4LXN0YXJ0O1xuXG4gICAgJjphZnRlciB7XG4gICAgICBsZWZ0OiAwO1xuICAgICAgdG9wOiAwO1xuICAgICAgd2lkdGg6IDRweDtcbiAgICAgIGhlaWdodDogMTAwJTtcbiAgICB9XG5cbiAgICAmIGJ1dHRvbjo6YWZ0ZXIsXG4gICAgJiBidXR0b246aG92ZXI6OmFmdGVyIHtcbiAgICAgIGhlaWdodDogMTAwJTtcbiAgICAgIHdpZHRoOiA0cHg7XG4gICAgICB0b3A6IDA7XG4gICAgfVxuICBgLFxufVxuXG5leHBvcnQgZGVmYXVsdCBzdHlsZXNcbiJdfQ== */");
+export const TabNavActions = /*#__PURE__*/_styled("span", process.env.NODE_ENV === "production" ? {
+  target: "e2i76m82"
+} : {
+  target: "e2i76m82",
+  label: "TabNavActions"
+})("position:absolute;right:0;bottom:1em;@media (max-width: ", bp.medium, "){bottom:0;padding:1em;&:after{display:none;}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy92Mi9jb3JlL1RhYk5hdi9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUJ3QyIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvcGFja2FnZXMvdjIvY29yZS9UYWJOYXYvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCBicCBmcm9tICcuLi8uLi8uLi9nbG9iYWxzL3N0eWxlcy9icmVha3BvaW50cydcblxuZXhwb3J0IGNvbnN0IFRhYk5hdldyYXBwZXIgPSBzdHlsZWQuZGl2KFxuICAocHJvcHMpID0+IGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGdhcDogMC41cmVtO1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBwYWRkaW5nOiAwO1xuICAgIG1hcmdpbjogMDtcbiAgICBhbGlnbi1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuICAgIGFsaWduLWl0ZW1zOiBmbGV4LWVuZDtcbiAgYFxuKVxuXG5leHBvcnQgY29uc3QgVGFiTmF2QWN0aW9ucyA9IHN0eWxlZC5zcGFuYFxuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHJpZ2h0OiAwO1xuICBib3R0b206IDFlbTtcblxuICBAbWVkaWEgKG1heC13aWR0aDogJHticC5tZWRpdW19KSB7XG4gICAgYm90dG9tOiAwO1xuICAgIHBhZGRpbmc6IDFlbTtcblxuICAgICY6YWZ0ZXIge1xuICAgICAgZGlzcGxheTogbm9uZTtcbiAgICB9XG4gIH1cbmBcblxuZXhwb3J0IGNvbnN0IFNlbGVjdExpbmtXcmFwcGVyID0gc3R5bGVkLmxpYGBcblxuZXhwb3J0IGNvbnN0IFNlbGVjdFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICBnYXA6IDAuNWVtO1xuXG4gIC8vIFRvIG1ha2UgdGhlIHRlc3QgYWxpZ24gY29ycmVjdGx5IGFuZCBub3Qgb3ZlcmZsb3cuXG4gICYgPiBzcGFuID4gZGl2ID4gdWwgPiBsaSA+IGJ1dHRvbiB7XG4gICAgd29yZC1icmVhazogYnJlYWstYWxsO1xuICAgIHRleHQtYWxpZ246IGxlZnQ7XG4gIH1cbmBcblxuZXhwb3J0IGNvbnN0IHN0eWxlcyA9IHtcbiAgbWF4V2lkdGg6ICh3aWR0aDogbnVtYmVyKSA9PiBjc3NgXG4gICAgbWF4LXdpZHRoOiAke3dpZHRofXB4O1xuICBgLFxuXG4gIHZlcnRpY2FsOiBjc3NgXG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICBhbGlnbi1pdGVtczogZmxleC1zdGFydDtcblxuICAgICY6YWZ0ZXIge1xuICAgICAgbGVmdDogMDtcbiAgICAgIHRvcDogMDtcbiAgICAgIHdpZHRoOiA0cHg7XG4gICAgICBoZWlnaHQ6IDEwMCU7XG4gICAgfVxuXG4gICAgJiBidXR0b246OmFmdGVyLFxuICAgICYgYnV0dG9uOmhvdmVyOjphZnRlciB7XG4gICAgICBoZWlnaHQ6IDEwMCU7XG4gICAgICB3aWR0aDogNHB4O1xuICAgICAgdG9wOiAwO1xuICAgIH1cbiAgYCxcbn1cblxuZXhwb3J0IGRlZmF1bHQgc3R5bGVzXG4iXX0= */"));
+export const SelectLinkWrapper = /*#__PURE__*/_styled("li", process.env.NODE_ENV === "production" ? {
+  target: "e2i76m81"
+} : {
+  target: "e2i76m81",
+  label: "SelectLinkWrapper"
+})(process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy92Mi9jb3JlL1RhYk5hdi9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0MwQyIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvcGFja2FnZXMvdjIvY29yZS9UYWJOYXYvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCBicCBmcm9tICcuLi8uLi8uLi9nbG9iYWxzL3N0eWxlcy9icmVha3BvaW50cydcblxuZXhwb3J0IGNvbnN0IFRhYk5hdldyYXBwZXIgPSBzdHlsZWQuZGl2KFxuICAocHJvcHMpID0+IGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGdhcDogMC41cmVtO1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBwYWRkaW5nOiAwO1xuICAgIG1hcmdpbjogMDtcbiAgICBhbGlnbi1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuICAgIGFsaWduLWl0ZW1zOiBmbGV4LWVuZDtcbiAgYFxuKVxuXG5leHBvcnQgY29uc3QgVGFiTmF2QWN0aW9ucyA9IHN0eWxlZC5zcGFuYFxuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHJpZ2h0OiAwO1xuICBib3R0b206IDFlbTtcblxuICBAbWVkaWEgKG1heC13aWR0aDogJHticC5tZWRpdW19KSB7XG4gICAgYm90dG9tOiAwO1xuICAgIHBhZGRpbmc6IDFlbTtcblxuICAgICY6YWZ0ZXIge1xuICAgICAgZGlzcGxheTogbm9uZTtcbiAgICB9XG4gIH1cbmBcblxuZXhwb3J0IGNvbnN0IFNlbGVjdExpbmtXcmFwcGVyID0gc3R5bGVkLmxpYGBcblxuZXhwb3J0IGNvbnN0IFNlbGVjdFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICBnYXA6IDAuNWVtO1xuXG4gIC8vIFRvIG1ha2UgdGhlIHRlc3QgYWxpZ24gY29ycmVjdGx5IGFuZCBub3Qgb3ZlcmZsb3cuXG4gICYgPiBzcGFuID4gZGl2ID4gdWwgPiBsaSA+IGJ1dHRvbiB7XG4gICAgd29yZC1icmVhazogYnJlYWstYWxsO1xuICAgIHRleHQtYWxpZ246IGxlZnQ7XG4gIH1cbmBcblxuZXhwb3J0IGNvbnN0IHN0eWxlcyA9IHtcbiAgbWF4V2lkdGg6ICh3aWR0aDogbnVtYmVyKSA9PiBjc3NgXG4gICAgbWF4LXdpZHRoOiAke3dpZHRofXB4O1xuICBgLFxuXG4gIHZlcnRpY2FsOiBjc3NgXG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICBhbGlnbi1pdGVtczogZmxleC1zdGFydDtcblxuICAgICY6YWZ0ZXIge1xuICAgICAgbGVmdDogMDtcbiAgICAgIHRvcDogMDtcbiAgICAgIHdpZHRoOiA0cHg7XG4gICAgICBoZWlnaHQ6IDEwMCU7XG4gICAgfVxuXG4gICAgJiBidXR0b246OmFmdGVyLFxuICAgICYgYnV0dG9uOmhvdmVyOjphZnRlciB7XG4gICAgICBoZWlnaHQ6IDEwMCU7XG4gICAgICB3aWR0aDogNHB4O1xuICAgICAgdG9wOiAwO1xuICAgIH1cbiAgYCxcbn1cblxuZXhwb3J0IGRlZmF1bHQgc3R5bGVzXG4iXX0= */");
+export const SelectWrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e2i76m80"
+} : {
+  target: "e2i76m80",
+  label: "SelectWrapper"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1cickod",
+  styles: "display:flex;flex-direction:column;gap:0.5em;&>span>div>ul>li>button{word-break:break-all;text-align:left;}"
+} : {
+  name: "1cickod",
+  styles: "display:flex;flex-direction:column;gap:0.5em;&>span>div>ul>li>button{word-break:break-all;text-align:left;}",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy92Mi9jb3JlL1RhYk5hdi9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa0N1QyIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvcGFja2FnZXMvdjIvY29yZS9UYWJOYXYvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCBicCBmcm9tICcuLi8uLi8uLi9nbG9iYWxzL3N0eWxlcy9icmVha3BvaW50cydcblxuZXhwb3J0IGNvbnN0IFRhYk5hdldyYXBwZXIgPSBzdHlsZWQuZGl2KFxuICAocHJvcHMpID0+IGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGdhcDogMC41cmVtO1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBwYWRkaW5nOiAwO1xuICAgIG1hcmdpbjogMDtcbiAgICBhbGlnbi1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuICAgIGFsaWduLWl0ZW1zOiBmbGV4LWVuZDtcbiAgYFxuKVxuXG5leHBvcnQgY29uc3QgVGFiTmF2QWN0aW9ucyA9IHN0eWxlZC5zcGFuYFxuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHJpZ2h0OiAwO1xuICBib3R0b206IDFlbTtcblxuICBAbWVkaWEgKG1heC13aWR0aDogJHticC5tZWRpdW19KSB7XG4gICAgYm90dG9tOiAwO1xuICAgIHBhZGRpbmc6IDFlbTtcblxuICAgICY6YWZ0ZXIge1xuICAgICAgZGlzcGxheTogbm9uZTtcbiAgICB9XG4gIH1cbmBcblxuZXhwb3J0IGNvbnN0IFNlbGVjdExpbmtXcmFwcGVyID0gc3R5bGVkLmxpYGBcblxuZXhwb3J0IGNvbnN0IFNlbGVjdFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICBnYXA6IDAuNWVtO1xuXG4gIC8vIFRvIG1ha2UgdGhlIHRlc3QgYWxpZ24gY29ycmVjdGx5IGFuZCBub3Qgb3ZlcmZsb3cuXG4gICYgPiBzcGFuID4gZGl2ID4gdWwgPiBsaSA+IGJ1dHRvbiB7XG4gICAgd29yZC1icmVhazogYnJlYWstYWxsO1xuICAgIHRleHQtYWxpZ246IGxlZnQ7XG4gIH1cbmBcblxuZXhwb3J0IGNvbnN0IHN0eWxlcyA9IHtcbiAgbWF4V2lkdGg6ICh3aWR0aDogbnVtYmVyKSA9PiBjc3NgXG4gICAgbWF4LXdpZHRoOiAke3dpZHRofXB4O1xuICBgLFxuXG4gIHZlcnRpY2FsOiBjc3NgXG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICBhbGlnbi1pdGVtczogZmxleC1zdGFydDtcblxuICAgICY6YWZ0ZXIge1xuICAgICAgbGVmdDogMDtcbiAgICAgIHRvcDogMDtcbiAgICAgIHdpZHRoOiA0cHg7XG4gICAgICBoZWlnaHQ6IDEwMCU7XG4gICAgfVxuXG4gICAgJiBidXR0b246OmFmdGVyLFxuICAgICYgYnV0dG9uOmhvdmVyOjphZnRlciB7XG4gICAgICBoZWlnaHQ6IDEwMCU7XG4gICAgICB3aWR0aDogNHB4O1xuICAgICAgdG9wOiAwO1xuICAgIH1cbiAgYCxcbn1cblxuZXhwb3J0IGRlZmF1bHQgc3R5bGVzXG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+export const styles = {
+  maxWidth: width => /*#__PURE__*/css("max-width:", width, "px;" + (process.env.NODE_ENV === "production" ? "" : ";label:maxWidth;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy92Mi9jb3JlL1RhYk5hdi9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBK0NrQyIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvcGFja2FnZXMvdjIvY29yZS9UYWJOYXYvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCBicCBmcm9tICcuLi8uLi8uLi9nbG9iYWxzL3N0eWxlcy9icmVha3BvaW50cydcblxuZXhwb3J0IGNvbnN0IFRhYk5hdldyYXBwZXIgPSBzdHlsZWQuZGl2KFxuICAocHJvcHMpID0+IGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGdhcDogMC41cmVtO1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBwYWRkaW5nOiAwO1xuICAgIG1hcmdpbjogMDtcbiAgICBhbGlnbi1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuICAgIGFsaWduLWl0ZW1zOiBmbGV4LWVuZDtcbiAgYFxuKVxuXG5leHBvcnQgY29uc3QgVGFiTmF2QWN0aW9ucyA9IHN0eWxlZC5zcGFuYFxuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHJpZ2h0OiAwO1xuICBib3R0b206IDFlbTtcblxuICBAbWVkaWEgKG1heC13aWR0aDogJHticC5tZWRpdW19KSB7XG4gICAgYm90dG9tOiAwO1xuICAgIHBhZGRpbmc6IDFlbTtcblxuICAgICY6YWZ0ZXIge1xuICAgICAgZGlzcGxheTogbm9uZTtcbiAgICB9XG4gIH1cbmBcblxuZXhwb3J0IGNvbnN0IFNlbGVjdExpbmtXcmFwcGVyID0gc3R5bGVkLmxpYGBcblxuZXhwb3J0IGNvbnN0IFNlbGVjdFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICBnYXA6IDAuNWVtO1xuXG4gIC8vIFRvIG1ha2UgdGhlIHRlc3QgYWxpZ24gY29ycmVjdGx5IGFuZCBub3Qgb3ZlcmZsb3cuXG4gICYgPiBzcGFuID4gZGl2ID4gdWwgPiBsaSA+IGJ1dHRvbiB7XG4gICAgd29yZC1icmVhazogYnJlYWstYWxsO1xuICAgIHRleHQtYWxpZ246IGxlZnQ7XG4gIH1cbmBcblxuZXhwb3J0IGNvbnN0IHN0eWxlcyA9IHtcbiAgbWF4V2lkdGg6ICh3aWR0aDogbnVtYmVyKSA9PiBjc3NgXG4gICAgbWF4LXdpZHRoOiAke3dpZHRofXB4O1xuICBgLFxuXG4gIHZlcnRpY2FsOiBjc3NgXG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICBhbGlnbi1pdGVtczogZmxleC1zdGFydDtcblxuICAgICY6YWZ0ZXIge1xuICAgICAgbGVmdDogMDtcbiAgICAgIHRvcDogMDtcbiAgICAgIHdpZHRoOiA0cHg7XG4gICAgICBoZWlnaHQ6IDEwMCU7XG4gICAgfVxuXG4gICAgJiBidXR0b246OmFmdGVyLFxuICAgICYgYnV0dG9uOmhvdmVyOjphZnRlciB7XG4gICAgICBoZWlnaHQ6IDEwMCU7XG4gICAgICB3aWR0aDogNHB4O1xuICAgICAgdG9wOiAwO1xuICAgIH1cbiAgYCxcbn1cblxuZXhwb3J0IGRlZmF1bHQgc3R5bGVzXG4iXX0= */"),
+  vertical: process.env.NODE_ENV === "production" ? {
+    name: "1yrkr6r",
+    styles: "flex-direction:column;align-items:flex-start;&:after{left:0;top:0;width:4px;height:100%;}& button::after,& button:hover::after{height:100%;width:4px;top:0;}"
+  } : {
+    name: "qxb6uv-vertical",
+    styles: "flex-direction:column;align-items:flex-start;&:after{left:0;top:0;width:4px;height:100%;}& button::after,& button:hover::after{height:100%;width:4px;top:0;};label:vertical;",
+    map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy92Mi9jb3JlL1RhYk5hdi9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBbURlIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy92Mi9jb3JlL1RhYk5hdi9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IGJwIGZyb20gJy4uLy4uLy4uL2dsb2JhbHMvc3R5bGVzL2JyZWFrcG9pbnRzJ1xuXG5leHBvcnQgY29uc3QgVGFiTmF2V3JhcHBlciA9IHN0eWxlZC5kaXYoXG4gIChwcm9wcykgPT4gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgZ2FwOiAwLjVyZW07XG4gICAgd2lkdGg6IDEwMCU7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIHBhZGRpbmc6IDA7XG4gICAgbWFyZ2luOiAwO1xuICAgIGFsaWduLWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG4gICAgYWxpZ24taXRlbXM6IGZsZXgtZW5kO1xuICBgXG4pXG5cbmV4cG9ydCBjb25zdCBUYWJOYXZBY3Rpb25zID0gc3R5bGVkLnNwYW5gXG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgcmlnaHQ6IDA7XG4gIGJvdHRvbTogMWVtO1xuXG4gIEBtZWRpYSAobWF4LXdpZHRoOiAke2JwLm1lZGl1bX0pIHtcbiAgICBib3R0b206IDA7XG4gICAgcGFkZGluZzogMWVtO1xuXG4gICAgJjphZnRlciB7XG4gICAgICBkaXNwbGF5OiBub25lO1xuICAgIH1cbiAgfVxuYFxuXG5leHBvcnQgY29uc3QgU2VsZWN0TGlua1dyYXBwZXIgPSBzdHlsZWQubGlgYFxuXG5leHBvcnQgY29uc3QgU2VsZWN0V3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGdhcDogMC41ZW07XG5cbiAgLy8gVG8gbWFrZSB0aGUgdGVzdCBhbGlnbiBjb3JyZWN0bHkgYW5kIG5vdCBvdmVyZmxvdy5cbiAgJiA+IHNwYW4gPiBkaXYgPiB1bCA+IGxpID4gYnV0dG9uIHtcbiAgICB3b3JkLWJyZWFrOiBicmVhay1hbGw7XG4gICAgdGV4dC1hbGlnbjogbGVmdDtcbiAgfVxuYFxuXG5leHBvcnQgY29uc3Qgc3R5bGVzID0ge1xuICBtYXhXaWR0aDogKHdpZHRoOiBudW1iZXIpID0+IGNzc2BcbiAgICBtYXgtd2lkdGg6ICR7d2lkdGh9cHg7XG4gIGAsXG5cbiAgdmVydGljYWw6IGNzc2BcbiAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgIGFsaWduLWl0ZW1zOiBmbGV4LXN0YXJ0O1xuXG4gICAgJjphZnRlciB7XG4gICAgICBsZWZ0OiAwO1xuICAgICAgdG9wOiAwO1xuICAgICAgd2lkdGg6IDRweDtcbiAgICAgIGhlaWdodDogMTAwJTtcbiAgICB9XG5cbiAgICAmIGJ1dHRvbjo6YWZ0ZXIsXG4gICAgJiBidXR0b246aG92ZXI6OmFmdGVyIHtcbiAgICAgIGhlaWdodDogMTAwJTtcbiAgICAgIHdpZHRoOiA0cHg7XG4gICAgICB0b3A6IDA7XG4gICAgfVxuICBgLFxufVxuXG5leHBvcnQgZGVmYXVsdCBzdHlsZXNcbiJdfQ== */",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  }
+};
+export default styles;

package/lib/v2/core/TabNav/utils/useContainerDimensions.d.ts

@@ -0,0 +1,8 @@
+export declare const useContainerDimensions: (ref: React.RefObject<HTMLButtonElement | HTMLDivElement | HTMLSpanElement>) => {
+    width: number;
+    height: number;
+    top: number;
+    left: number;
+    bottom: number;
+};
+//# sourceMappingURL=useContainerDimensions.d.ts.map

package/lib/v2/core/TabNav/utils/useContainerDimensions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useContainerDimensions.d.ts","sourceRoot":"","sources":["../../../../../src/packages/v2/core/TabNav/utils/useContainerDimensions.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB,QAC5B,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,cAAc,GAAG,eAAe,CAAC;;;;;;CAkC3E,CAAA"}

package/lib/v2/core/TabNav/utils/useContainerDimensions.js

@@ -0,0 +1,26 @@
+import { useCallback, useEffect, useState } from 'react';
+export const useContainerDimensions = ref => {
+  const [dimensions, setDimensions] = useState({
+    width: 0,
+    height: 0,
+    top: 0,
+    left: 0,
+    bottom: 0
+  });
+  const getDimensions = useCallback(() => ({
+    width: ref.current?.offsetWidth || 0,
+    height: ref.current?.offsetHeight || 0,
+    top: ref.current?.offsetTop || 0,
+    left: ref.current?.offsetLeft || 0,
+    bottom: Number(ref.current?.offsetTop) + Number(ref.current?.offsetHeight) || 0
+  }), [ref]);
+  useEffect(() => {
+    const handleResize = () => setDimensions(getDimensions());
+    if (ref.current) setDimensions(getDimensions());
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [getDimensions, ref]);
+  return dimensions;
+};

package/lib/v2/index.d.ts

@@ -2,5 +2,8 @@ import Chip from './core/Chip';
 import Button from './core/Button';
 import ButtonsFilter from './core/ButtonsFilter';
 import { MemberBenefitsCard } from './Memberbenefits/MemberbenefitsCard';
-export { Chip, Button, ButtonsFilter, MemberBenefitsCard };
+import Box from './core/Box';
+import TabNav from './core/TabNav';
+import TabNavItem from './core/TabNav';
+export { Chip, Button, ButtonsFilter, MemberBenefitsCard, Box, TabNav, TabNavItem, };
 //# sourceMappingURL=index.d.ts.map

package/lib/v2/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/packages/v2/index.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,aAAa,CAAA;AAC9B,OAAO,MAAM,MAAM,eAAe,CAAA;AAClC,OAAO,aAAa,MAAM,sBAAsB,CAAA;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAA;AAExE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,aAAa,EAAE,kBAAkB,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/packages/v2/index.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,aAAa,CAAA;AAC9B,OAAO,MAAM,MAAM,eAAe,CAAA;AAClC,OAAO,aAAa,MAAM,sBAAsB,CAAA;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAA;AACxE,OAAO,GAAG,MAAM,YAAY,CAAA;AAC5B,OAAO,MAAM,MAAM,eAAe,CAAA;AAClC,OAAO,UAAU,MAAM,eAAe,CAAA;AAEtC,OAAO,EACL,IAAI,EACJ,MAAM,EACN,aAAa,EACb,kBAAkB,EAClB,GAAG,EACH,MAAM,EACN,UAAU,GACX,CAAA"}

package/lib/v2/index.js

@@ -2,4 +2,7 @@ import Chip from './core/Chip';
 import Button from './core/Button';
 import ButtonsFilter from './core/ButtonsFilter';
 import { MemberBenefitsCard } from './Memberbenefits/MemberbenefitsCard';
-export { Chip, Button, ButtonsFilter, MemberBenefitsCard };
+import Box from './core/Box';
+import TabNav from './core/TabNav';
+import TabNavItem from './core/TabNav';
+export { Chip, Button, ButtonsFilter, MemberBenefitsCard, Box, TabNav, TabNavItem };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbl-digital/snorre",
-  "version": "4.1.70",
+  "version": "4.1.72",
   "description": "Design library for BBL Digital",
   "license": "MIT",
   "main": "./lib/index.js",

package/rollup.config.js

@@ -1,13 +1,13 @@
-import commonjs from '@rollup/plugin-commonjs'
-
-const config = {
-  input: 'esm/index.js',
-  output: {
-    file: 'dist/bundle.js',
-    format: 'umd',
-    name: 'Snorre',
-  },
-  plugins: [commonjs()],
-}
-
-export default config
+import commonjs from '@rollup/plugin-commonjs'
+
+const config = {
+  input: 'esm/index.js',
+  output: {
+    file: 'dist/bundle.js',
+    format: 'umd',
+    name: 'Snorre',
+  },
+  plugins: [commonjs()],
+}
+
+export default config