@bbl-digital/snorre 2.2.158 → 2.2.159

package/esm/core/TabNav/TabNavItem/index.js

@@ -7,6 +7,7 @@ import { useContainerDimensions } from '../utils/useContainerDimensions';
 import { TabNavItemWrapper, styles, SelectChildrenWrapper } from './styles';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 
 const TabNavItem = ({
   value,
@@ -29,8 +30,11 @@ const TabNavItem = ({
   const isActive = selected && selected === value || value === active;
   const ref = useRef(null);
   const {
-    width
+    width,
+    bottom,
+    left
   } = useContainerDimensions(ref);
+  console.log(bottom, left);
   useEffect(() => {
     const handleClickOutside = e => {
       const node = childrenRef.current;
@@ -48,17 +52,22 @@ const TabNavItem = ({
       [value]: width
     }); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [width]);
-  return _jsxs(TabNavItemWrapper, {
-    ref: ref,
-    onClick: () => isSelect ? setOpen(!open) : setActive(value),
-    theme: theme,
-    css: t => [isActive && styles.active(t)],
-    "data-tracking-name": trackingName,
-    "data-tracking-event": trackingEvent,
-    className: className,
-    children: [displayText ? displayText : value, isSelect && _jsx(IconCaretDown, {
-      flipVertical: open
+  return _jsxs(_Fragment, {
+    children: [_jsxs(TabNavItemWrapper, {
+      ref: ref,
+      onClick: () => isSelect ? setOpen(!open) : setActive(value),
+      theme: theme,
+      css: t => [isActive && styles.active(t)],
+      "data-tracking-name": trackingName,
+      "data-tracking-event": trackingEvent,
+      className: className,
+      children: [displayText ? displayText : value, isSelect && _jsx(IconCaretDown, {
+        flipVertical: open,
+        size: 20
+      })]
     }), isSelect && open && _jsx(SelectChildrenWrapper, {
+      left: left,
+      bottom: bottom,
       ref: childrenRef,
       children: children
     })]

package/esm/core/TabNav/TabNavItem/styles.js

@@ -1,28 +1,17 @@
 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';
 export const TabNavItemWrapper = _styled("button", process.env.NODE_ENV === "production" ? {
   target: "e169sb431"
 } : {
   target: "e169sb431",
   label: "TabNavItemWrapper"
-})(props => /*#__PURE__*/css("display:flex;border:none;background:transparent;cursor:pointer;padding:1rem;position:relative;font-size:16px;font-weight:bold;transition:all ease 250ms;&:hover{&::after{position:absolute;content:'';width:100%;height:4px;bottom:0;left:0;background-color:", props.theme.primary, ";z-index:1;opacity:0.4;}}" + (process.env.NODE_ENV === "production" ? "" : ";label:TabNavItemWrapper;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL1RhYk5hdi9UYWJOYXZJdGVtL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLZ0IiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL3BhY2thZ2VzL2NvcmUvVGFiTmF2L1RhYk5hdkl0ZW0vc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IElBcHBUaGVtZSB9IGZyb20gJy4uLy4uLy4uL2FwcC1zaGVsbC90aGVtZSdcblxuZXhwb3J0IGNvbnN0IFRhYk5hdkl0ZW1XcmFwcGVyID0gc3R5bGVkLmJ1dHRvbihcbiAgKHByb3BzKSA9PiBjc3NgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBib3JkZXI6IG5vbmU7XG4gICAgYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuICAgIHBhZGRpbmc6IDFyZW07XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIGZvbnQtc2l6ZTogMTZweDtcbiAgICBmb250LXdlaWdodDogYm9sZDtcbiAgICB0cmFuc2l0aW9uOiBhbGwgZWFzZSAyNTBtcztcblxuICAgICY6aG92ZXIge1xuICAgICAgJjo6YWZ0ZXIge1xuICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgIGNvbnRlbnQ6ICcnO1xuICAgICAgICB3aWR0aDogMTAwJTtcbiAgICAgICAgaGVpZ2h0OiA0cHg7XG4gICAgICAgIGJvdHRvbTogMDtcbiAgICAgICAgbGVmdDogMDtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtwcm9wcy50aGVtZS5wcmltYXJ5fTtcbiAgICAgICAgei1pbmRleDogMTtcbiAgICAgICAgb3BhY2l0eTogMC40O1xuICAgICAgfVxuICAgIH1cbiAgYFxuKVxuXG5leHBvcnQgY29uc3QgU2VsZWN0Q2hpbGRyZW5XcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB6LWluZGV4OiAyO1xuICB0b3A6IGNhbGMoMTAwJSAtIDAuNWVtKTtcbmBcblxuZXhwb3J0IGNvbnN0IHN0eWxlcyA9IHtcbiAgYWN0aXZlOiAodGhlbWU6IElBcHBUaGVtZSkgPT5cbiAgICBjc3NgXG4gICAgICAmOjphZnRlciB7XG4gICAgICAgIHRyYW5zaXRpb246IGFsbCBlYXNlIDI1MG1zO1xuICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgIGNvbnRlbnQ6ICcnO1xuICAgICAgICB3aWR0aDogMTAwJTtcbiAgICAgICAgaGVpZ2h0OiA0cHg7XG4gICAgICAgIGJvdHRvbTogMDtcbiAgICAgICAgbGVmdDogMDtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt0aGVtZS5wcmltYXJ5fTtcbiAgICAgICAgei1pbmRleDogMTtcbiAgICAgIH1cbiAgICBgLFxufVxuIl19 */"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL1RhYk5hdi9UYWJOYXZJdGVtL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJaUMiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL3BhY2thZ2VzL2NvcmUvVGFiTmF2L1RhYk5hdkl0ZW0vc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IElBcHBUaGVtZSB9IGZyb20gJy4uLy4uLy4uL2FwcC1zaGVsbC90aGVtZSdcblxuZXhwb3J0IGNvbnN0IFRhYk5hdkl0ZW1XcmFwcGVyID0gc3R5bGVkLmJ1dHRvbihcbiAgKHByb3BzKSA9PiBjc3NgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBib3JkZXI6IG5vbmU7XG4gICAgYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuICAgIHBhZGRpbmc6IDFyZW07XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIGZvbnQtc2l6ZTogMTZweDtcbiAgICBmb250LXdlaWdodDogYm9sZDtcbiAgICB0cmFuc2l0aW9uOiBhbGwgZWFzZSAyNTBtcztcblxuICAgICY6aG92ZXIge1xuICAgICAgJjo6YWZ0ZXIge1xuICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgIGNvbnRlbnQ6ICcnO1xuICAgICAgICB3aWR0aDogMTAwJTtcbiAgICAgICAgaGVpZ2h0OiA0cHg7XG4gICAgICAgIGJvdHRvbTogMDtcbiAgICAgICAgbGVmdDogMDtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtwcm9wcy50aGVtZS5wcmltYXJ5fTtcbiAgICAgICAgei1pbmRleDogMTtcbiAgICAgICAgb3BhY2l0eTogMC40O1xuICAgICAgfVxuICAgIH1cbiAgYFxuKVxuXG5leHBvcnQgY29uc3QgU2VsZWN0Q2hpbGRyZW5XcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB6LWluZGV4OiAyO1xuICB0b3A6IGNhbGMoMTAwJSAtIDAuNWVtKTtcbmBcblxuZXhwb3J0IGNvbnN0IHN0eWxlcyA9IHtcbiAgYWN0aXZlOiAodGhlbWU6IElBcHBUaGVtZSkgPT5cbiAgICBjc3NgXG4gICAgICAmOjphZnRlciB7XG4gICAgICAgIHRyYW5zaXRpb246IGFsbCBlYXNlIDI1MG1zO1xuICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgIGNvbnRlbnQ6ICcnO1xuICAgICAgICB3aWR0aDogMTAwJTtcbiAgICAgICAgaGVpZ2h0OiA0cHg7XG4gICAgICAgIGJvdHRvbTogMDtcbiAgICAgICAgbGVmdDogMDtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt0aGVtZS5wcmltYXJ5fTtcbiAgICAgICAgei1pbmRleDogMTtcbiAgICAgIH1cbiAgICBgLFxufVxuIl19 */");
+})(props => /*#__PURE__*/css("display:flex;border:none;background:transparent;cursor:pointer;padding:1rem;position:relative;font-size:16px;font-weight:bold;transition:all ease 250ms;&:hover{&::after{position:absolute;content:'';width:100%;height:4px;bottom:0;left:0;background-color:", props.theme.primary, ";z-index:1;opacity:0.4;}}" + (process.env.NODE_ENV === "production" ? "" : ";label:TabNavItemWrapper;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL1RhYk5hdi9UYWJOYXZJdGVtL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLZ0IiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL3BhY2thZ2VzL2NvcmUvVGFiTmF2L1RhYk5hdkl0ZW0vc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IElBcHBUaGVtZSB9IGZyb20gJy4uLy4uLy4uL2FwcC1zaGVsbC90aGVtZSdcblxuZXhwb3J0IGNvbnN0IFRhYk5hdkl0ZW1XcmFwcGVyID0gc3R5bGVkLmJ1dHRvbihcbiAgKHByb3BzKSA9PiBjc3NgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBib3JkZXI6IG5vbmU7XG4gICAgYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuICAgIHBhZGRpbmc6IDFyZW07XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIGZvbnQtc2l6ZTogMTZweDtcbiAgICBmb250LXdlaWdodDogYm9sZDtcbiAgICB0cmFuc2l0aW9uOiBhbGwgZWFzZSAyNTBtcztcblxuICAgICY6aG92ZXIge1xuICAgICAgJjo6YWZ0ZXIge1xuICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgIGNvbnRlbnQ6ICcnO1xuICAgICAgICB3aWR0aDogMTAwJTtcbiAgICAgICAgaGVpZ2h0OiA0cHg7XG4gICAgICAgIGJvdHRvbTogMDtcbiAgICAgICAgbGVmdDogMDtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtwcm9wcy50aGVtZS5wcmltYXJ5fTtcbiAgICAgICAgei1pbmRleDogMTtcbiAgICAgICAgb3BhY2l0eTogMC40O1xuICAgICAgfVxuICAgIH1cbiAgYFxuKVxuXG5leHBvcnQgY29uc3QgU2VsZWN0Q2hpbGRyZW5XcmFwcGVyID0gc3R5bGVkLmRpdihcbiAgKHByb3BzOiB7IGJvdHRvbTogbnVtYmVyOyBsZWZ0OiBudW1iZXIgfSkgPT4gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIHotaW5kZXg6IDI7XG4gICAgdG9wOiBjYWxjKCR7cHJvcHMuYm90dG9tfXB4IC0gMC41ZW0pO1xuICAgIGxlZnQ6ICR7cHJvcHMubGVmdH1weDtcbiAgYFxuKVxuXG5leHBvcnQgY29uc3Qgc3R5bGVzID0ge1xuICBhY3RpdmU6ICh0aGVtZTogSUFwcFRoZW1lKSA9PlxuICAgIGNzc2BcbiAgICAgICY6OmFmdGVyIHtcbiAgICAgICAgdHJhbnNpdGlvbjogYWxsIGVhc2UgMjUwbXM7XG4gICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgICAgY29udGVudDogJyc7XG4gICAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgICBoZWlnaHQ6IDRweDtcbiAgICAgICAgYm90dG9tOiAwO1xuICAgICAgICBsZWZ0OiAwO1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLnByaW1hcnl9O1xuICAgICAgICB6LWluZGV4OiAxO1xuICAgICAgfVxuICAgIGAsXG59XG4iXX0= */"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL1RhYk5hdi9UYWJOYXZJdGVtL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJaUMiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL3BhY2thZ2VzL2NvcmUvVGFiTmF2L1RhYk5hdkl0ZW0vc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IElBcHBUaGVtZSB9IGZyb20gJy4uLy4uLy4uL2FwcC1zaGVsbC90aGVtZSdcblxuZXhwb3J0IGNvbnN0IFRhYk5hdkl0ZW1XcmFwcGVyID0gc3R5bGVkLmJ1dHRvbihcbiAgKHByb3BzKSA9PiBjc3NgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBib3JkZXI6IG5vbmU7XG4gICAgYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuICAgIHBhZGRpbmc6IDFyZW07XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIGZvbnQtc2l6ZTogMTZweDtcbiAgICBmb250LXdlaWdodDogYm9sZDtcbiAgICB0cmFuc2l0aW9uOiBhbGwgZWFzZSAyNTBtcztcblxuICAgICY6aG92ZXIge1xuICAgICAgJjo6YWZ0ZXIge1xuICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgIGNvbnRlbnQ6ICcnO1xuICAgICAgICB3aWR0aDogMTAwJTtcbiAgICAgICAgaGVpZ2h0OiA0cHg7XG4gICAgICAgIGJvdHRvbTogMDtcbiAgICAgICAgbGVmdDogMDtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtwcm9wcy50aGVtZS5wcmltYXJ5fTtcbiAgICAgICAgei1pbmRleDogMTtcbiAgICAgICAgb3BhY2l0eTogMC40O1xuICAgICAgfVxuICAgIH1cbiAgYFxuKVxuXG5leHBvcnQgY29uc3QgU2VsZWN0Q2hpbGRyZW5XcmFwcGVyID0gc3R5bGVkLmRpdihcbiAgKHByb3BzOiB7IGJvdHRvbTogbnVtYmVyOyBsZWZ0OiBudW1iZXIgfSkgPT4gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIHotaW5kZXg6IDI7XG4gICAgdG9wOiBjYWxjKCR7cHJvcHMuYm90dG9tfXB4IC0gMC41ZW0pO1xuICAgIGxlZnQ6ICR7cHJvcHMubGVmdH1weDtcbiAgYFxuKVxuXG5leHBvcnQgY29uc3Qgc3R5bGVzID0ge1xuICBhY3RpdmU6ICh0aGVtZTogSUFwcFRoZW1lKSA9PlxuICAgIGNzc2BcbiAgICAgICY6OmFmdGVyIHtcbiAgICAgICAgdHJhbnNpdGlvbjogYWxsIGVhc2UgMjUwbXM7XG4gICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgICAgY29udGVudDogJyc7XG4gICAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgICBoZWlnaHQ6IDRweDtcbiAgICAgICAgYm90dG9tOiAwO1xuICAgICAgICBsZWZ0OiAwO1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLnByaW1hcnl9O1xuICAgICAgICB6LWluZGV4OiAxO1xuICAgICAgfVxuICAgIGAsXG59XG4iXX0= */");
 export const SelectChildrenWrapper = _styled("div", process.env.NODE_ENV === "production" ? {
   target: "e169sb430"
 } : {
   target: "e169sb430",
   label: "SelectChildrenWrapper"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1vabhhj",
-  styles: "display:flex;position:absolute;z-index:2;top:calc(100% - 0.5em)"
-} : {
-  name: "1vabhhj",
-  styles: "display:flex;position:absolute;z-index:2;top:calc(100% - 0.5em)",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL1RhYk5hdi9UYWJOYXZJdGVtL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnQytDIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL1RhYk5hdi9UYWJOYXZJdGVtL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBJQXBwVGhlbWUgfSBmcm9tICcuLi8uLi8uLi9hcHAtc2hlbGwvdGhlbWUnXG5cbmV4cG9ydCBjb25zdCBUYWJOYXZJdGVtV3JhcHBlciA9IHN0eWxlZC5idXR0b24oXG4gIChwcm9wcykgPT4gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYm9yZGVyOiBub25lO1xuICAgIGJhY2tncm91bmQ6IHRyYW5zcGFyZW50O1xuICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICBwYWRkaW5nOiAxcmVtO1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBmb250LXNpemU6IDE2cHg7XG4gICAgZm9udC13ZWlnaHQ6IGJvbGQ7XG4gICAgdHJhbnNpdGlvbjogYWxsIGVhc2UgMjUwbXM7XG5cbiAgICAmOmhvdmVyIHtcbiAgICAgICY6OmFmdGVyIHtcbiAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICBjb250ZW50OiAnJztcbiAgICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICAgIGhlaWdodDogNHB4O1xuICAgICAgICBib3R0b206IDA7XG4gICAgICAgIGxlZnQ6IDA7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7cHJvcHMudGhlbWUucHJpbWFyeX07XG4gICAgICAgIHotaW5kZXg6IDE7XG4gICAgICAgIG9wYWNpdHk6IDAuNDtcbiAgICAgIH1cbiAgICB9XG4gIGBcbilcblxuZXhwb3J0IGNvbnN0IFNlbGVjdENoaWxkcmVuV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgei1pbmRleDogMjtcbiAgdG9wOiBjYWxjKDEwMCUgLSAwLjVlbSk7XG5gXG5cbmV4cG9ydCBjb25zdCBzdHlsZXMgPSB7XG4gIGFjdGl2ZTogKHRoZW1lOiBJQXBwVGhlbWUpID0+XG4gICAgY3NzYFxuICAgICAgJjo6YWZ0ZXIge1xuICAgICAgICB0cmFuc2l0aW9uOiBhbGwgZWFzZSAyNTBtcztcbiAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICBjb250ZW50OiAnJztcbiAgICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICAgIGhlaWdodDogNHB4O1xuICAgICAgICBib3R0b206IDA7XG4gICAgICAgIGxlZnQ6IDA7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUucHJpbWFyeX07XG4gICAgICAgIHotaW5kZXg6IDE7XG4gICAgICB9XG4gICAgYCxcbn1cbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
+})(props => /*#__PURE__*/css("display:flex;position:absolute;z-index:2;top:calc(", props.bottom, "px - 0.5em);left:", props.left, "px;" + (process.env.NODE_ENV === "production" ? "" : ";label:SelectChildrenWrapper;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL1RhYk5hdi9UYWJOYXZJdGVtL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQ2tEIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL1RhYk5hdi9UYWJOYXZJdGVtL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBJQXBwVGhlbWUgfSBmcm9tICcuLi8uLi8uLi9hcHAtc2hlbGwvdGhlbWUnXG5cbmV4cG9ydCBjb25zdCBUYWJOYXZJdGVtV3JhcHBlciA9IHN0eWxlZC5idXR0b24oXG4gIChwcm9wcykgPT4gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYm9yZGVyOiBub25lO1xuICAgIGJhY2tncm91bmQ6IHRyYW5zcGFyZW50O1xuICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICBwYWRkaW5nOiAxcmVtO1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBmb250LXNpemU6IDE2cHg7XG4gICAgZm9udC13ZWlnaHQ6IGJvbGQ7XG4gICAgdHJhbnNpdGlvbjogYWxsIGVhc2UgMjUwbXM7XG5cbiAgICAmOmhvdmVyIHtcbiAgICAgICY6OmFmdGVyIHtcbiAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICBjb250ZW50OiAnJztcbiAgICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICAgIGhlaWdodDogNHB4O1xuICAgICAgICBib3R0b206IDA7XG4gICAgICAgIGxlZnQ6IDA7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7cHJvcHMudGhlbWUucHJpbWFyeX07XG4gICAgICAgIHotaW5kZXg6IDE7XG4gICAgICAgIG9wYWNpdHk6IDAuNDtcbiAgICAgIH1cbiAgICB9XG4gIGBcbilcblxuZXhwb3J0IGNvbnN0IFNlbGVjdENoaWxkcmVuV3JhcHBlciA9IHN0eWxlZC5kaXYoXG4gIChwcm9wczogeyBib3R0b206IG51bWJlcjsgbGVmdDogbnVtYmVyIH0pID0+IGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB6LWluZGV4OiAyO1xuICAgIHRvcDogY2FsYygke3Byb3BzLmJvdHRvbX1weCAtIDAuNWVtKTtcbiAgICBsZWZ0OiAke3Byb3BzLmxlZnR9cHg7XG4gIGBcbilcblxuZXhwb3J0IGNvbnN0IHN0eWxlcyA9IHtcbiAgYWN0aXZlOiAodGhlbWU6IElBcHBUaGVtZSkgPT5cbiAgICBjc3NgXG4gICAgICAmOjphZnRlciB7XG4gICAgICAgIHRyYW5zaXRpb246IGFsbCBlYXNlIDI1MG1zO1xuICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgIGNvbnRlbnQ6ICcnO1xuICAgICAgICB3aWR0aDogMTAwJTtcbiAgICAgICAgaGVpZ2h0OiA0cHg7XG4gICAgICAgIGJvdHRvbTogMDtcbiAgICAgICAgbGVmdDogMDtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt0aGVtZS5wcmltYXJ5fTtcbiAgICAgICAgei1pbmRleDogMTtcbiAgICAgIH1cbiAgICBgLFxufVxuIl19 */"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL1RhYk5hdi9UYWJOYXZJdGVtL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnQ3FDIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL1RhYk5hdi9UYWJOYXZJdGVtL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBJQXBwVGhlbWUgfSBmcm9tICcuLi8uLi8uLi9hcHAtc2hlbGwvdGhlbWUnXG5cbmV4cG9ydCBjb25zdCBUYWJOYXZJdGVtV3JhcHBlciA9IHN0eWxlZC5idXR0b24oXG4gIChwcm9wcykgPT4gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYm9yZGVyOiBub25lO1xuICAgIGJhY2tncm91bmQ6IHRyYW5zcGFyZW50O1xuICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICBwYWRkaW5nOiAxcmVtO1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBmb250LXNpemU6IDE2cHg7XG4gICAgZm9udC13ZWlnaHQ6IGJvbGQ7XG4gICAgdHJhbnNpdGlvbjogYWxsIGVhc2UgMjUwbXM7XG5cbiAgICAmOmhvdmVyIHtcbiAgICAgICY6OmFmdGVyIHtcbiAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICBjb250ZW50OiAnJztcbiAgICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICAgIGhlaWdodDogNHB4O1xuICAgICAgICBib3R0b206IDA7XG4gICAgICAgIGxlZnQ6IDA7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7cHJvcHMudGhlbWUucHJpbWFyeX07XG4gICAgICAgIHotaW5kZXg6IDE7XG4gICAgICAgIG9wYWNpdHk6IDAuNDtcbiAgICAgIH1cbiAgICB9XG4gIGBcbilcblxuZXhwb3J0IGNvbnN0IFNlbGVjdENoaWxkcmVuV3JhcHBlciA9IHN0eWxlZC5kaXYoXG4gIChwcm9wczogeyBib3R0b206IG51bWJlcjsgbGVmdDogbnVtYmVyIH0pID0+IGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB6LWluZGV4OiAyO1xuICAgIHRvcDogY2FsYygke3Byb3BzLmJvdHRvbX1weCAtIDAuNWVtKTtcbiAgICBsZWZ0OiAke3Byb3BzLmxlZnR9cHg7XG4gIGBcbilcblxuZXhwb3J0IGNvbnN0IHN0eWxlcyA9IHtcbiAgYWN0aXZlOiAodGhlbWU6IElBcHBUaGVtZSkgPT5cbiAgICBjc3NgXG4gICAgICAmOjphZnRlciB7XG4gICAgICAgIHRyYW5zaXRpb246IGFsbCBlYXNlIDI1MG1zO1xuICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgIGNvbnRlbnQ6ICcnO1xuICAgICAgICB3aWR0aDogMTAwJTtcbiAgICAgICAgaGVpZ2h0OiA0cHg7XG4gICAgICAgIGJvdHRvbTogMDtcbiAgICAgICAgbGVmdDogMDtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt0aGVtZS5wcmltYXJ5fTtcbiAgICAgICAgei1pbmRleDogMTtcbiAgICAgIH1cbiAgICBgLFxufVxuIl19 */");
 export const styles = {
-  active: theme => /*#__PURE__*/css("&::after{transition:all ease 250ms;position:absolute;content:'';width:100%;height:4px;bottom:0;left:0;background-color:", theme.primary, ";z-index:1;}" + (process.env.NODE_ENV === "production" ? "" : ";label:styles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL1RhYk5hdi9UYWJOYXZJdGVtL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF5Q08iLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL3BhY2thZ2VzL2NvcmUvVGFiTmF2L1RhYk5hdkl0ZW0vc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IElBcHBUaGVtZSB9IGZyb20gJy4uLy4uLy4uL2FwcC1zaGVsbC90aGVtZSdcblxuZXhwb3J0IGNvbnN0IFRhYk5hdkl0ZW1XcmFwcGVyID0gc3R5bGVkLmJ1dHRvbihcbiAgKHByb3BzKSA9PiBjc3NgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBib3JkZXI6IG5vbmU7XG4gICAgYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuICAgIHBhZGRpbmc6IDFyZW07XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIGZvbnQtc2l6ZTogMTZweDtcbiAgICBmb250LXdlaWdodDogYm9sZDtcbiAgICB0cmFuc2l0aW9uOiBhbGwgZWFzZSAyNTBtcztcblxuICAgICY6aG92ZXIge1xuICAgICAgJjo6YWZ0ZXIge1xuICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgIGNvbnRlbnQ6ICcnO1xuICAgICAgICB3aWR0aDogMTAwJTtcbiAgICAgICAgaGVpZ2h0OiA0cHg7XG4gICAgICAgIGJvdHRvbTogMDtcbiAgICAgICAgbGVmdDogMDtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtwcm9wcy50aGVtZS5wcmltYXJ5fTtcbiAgICAgICAgei1pbmRleDogMTtcbiAgICAgICAgb3BhY2l0eTogMC40O1xuICAgICAgfVxuICAgIH1cbiAgYFxuKVxuXG5leHBvcnQgY29uc3QgU2VsZWN0Q2hpbGRyZW5XcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB6LWluZGV4OiAyO1xuICB0b3A6IGNhbGMoMTAwJSAtIDAuNWVtKTtcbmBcblxuZXhwb3J0IGNvbnN0IHN0eWxlcyA9IHtcbiAgYWN0aXZlOiAodGhlbWU6IElBcHBUaGVtZSkgPT5cbiAgICBjc3NgXG4gICAgICAmOjphZnRlciB7XG4gICAgICAgIHRyYW5zaXRpb246IGFsbCBlYXNlIDI1MG1zO1xuICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgIGNvbnRlbnQ6ICcnO1xuICAgICAgICB3aWR0aDogMTAwJTtcbiAgICAgICAgaGVpZ2h0OiA0cHg7XG4gICAgICAgIGJvdHRvbTogMDtcbiAgICAgICAgbGVmdDogMDtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt0aGVtZS5wcmltYXJ5fTtcbiAgICAgICAgei1pbmRleDogMTtcbiAgICAgIH1cbiAgICBgLFxufVxuIl19 */")
+  active: theme => /*#__PURE__*/css("&::after{transition:all ease 250ms;position:absolute;content:'';width:100%;height:4px;bottom:0;left:0;background-color:", theme.primary, ";z-index:1;}" + (process.env.NODE_ENV === "production" ? "" : ";label:styles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL1RhYk5hdi9UYWJOYXZJdGVtL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE0Q08iLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL3BhY2thZ2VzL2NvcmUvVGFiTmF2L1RhYk5hdkl0ZW0vc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IElBcHBUaGVtZSB9IGZyb20gJy4uLy4uLy4uL2FwcC1zaGVsbC90aGVtZSdcblxuZXhwb3J0IGNvbnN0IFRhYk5hdkl0ZW1XcmFwcGVyID0gc3R5bGVkLmJ1dHRvbihcbiAgKHByb3BzKSA9PiBjc3NgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBib3JkZXI6IG5vbmU7XG4gICAgYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuICAgIHBhZGRpbmc6IDFyZW07XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIGZvbnQtc2l6ZTogMTZweDtcbiAgICBmb250LXdlaWdodDogYm9sZDtcbiAgICB0cmFuc2l0aW9uOiBhbGwgZWFzZSAyNTBtcztcblxuICAgICY6aG92ZXIge1xuICAgICAgJjo6YWZ0ZXIge1xuICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgIGNvbnRlbnQ6ICcnO1xuICAgICAgICB3aWR0aDogMTAwJTtcbiAgICAgICAgaGVpZ2h0OiA0cHg7XG4gICAgICAgIGJvdHRvbTogMDtcbiAgICAgICAgbGVmdDogMDtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtwcm9wcy50aGVtZS5wcmltYXJ5fTtcbiAgICAgICAgei1pbmRleDogMTtcbiAgICAgICAgb3BhY2l0eTogMC40O1xuICAgICAgfVxuICAgIH1cbiAgYFxuKVxuXG5leHBvcnQgY29uc3QgU2VsZWN0Q2hpbGRyZW5XcmFwcGVyID0gc3R5bGVkLmRpdihcbiAgKHByb3BzOiB7IGJvdHRvbTogbnVtYmVyOyBsZWZ0OiBudW1iZXIgfSkgPT4gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIHotaW5kZXg6IDI7XG4gICAgdG9wOiBjYWxjKCR7cHJvcHMuYm90dG9tfXB4IC0gMC41ZW0pO1xuICAgIGxlZnQ6ICR7cHJvcHMubGVmdH1weDtcbiAgYFxuKVxuXG5leHBvcnQgY29uc3Qgc3R5bGVzID0ge1xuICBhY3RpdmU6ICh0aGVtZTogSUFwcFRoZW1lKSA9PlxuICAgIGNzc2BcbiAgICAgICY6OmFmdGVyIHtcbiAgICAgICAgdHJhbnNpdGlvbjogYWxsIGVhc2UgMjUwbXM7XG4gICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgICAgY29udGVudDogJyc7XG4gICAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgICBoZWlnaHQ6IDRweDtcbiAgICAgICAgYm90dG9tOiAwO1xuICAgICAgICBsZWZ0OiAwO1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLnByaW1hcnl9O1xuICAgICAgICB6LWluZGV4OiAxO1xuICAgICAgfVxuICAgIGAsXG59XG4iXX0= */")
 };

package/esm/core/TabNav/utils/useContainerDimensions.js

@@ -2,11 +2,17 @@ import { useCallback, useEffect, useState } from 'react';
 export const useContainerDimensions = ref => {
   const [dimensions, setDimensions] = useState({
     width: 0,
-    height: 0
+    height: 0,
+    top: 0,
+    left: 0,
+    bottom: 0
   });
   const getDimensions = useCallback(() => ({
     width: ref.current?.offsetWidth || 0,
-    height: ref.current?.offsetHeight || 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());

package/lib/core/TabNav/TabNavItem/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/packages/core/TabNav/TabNavItem/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwC,MAAM,OAAO,CAAA;AAM5D,MAAM,WAAW,MAAM;IACrB,sDAAsD;IACtD,KAAK,EAAE,MAAM,CAAA;IACb,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CA8DhC,CAAA;AAED,OAAO,EAAE,UAAU,EAAE,CAAA;AAErB,eAAe,UAAU,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/packages/core/TabNav/TabNavItem/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwC,MAAM,OAAO,CAAA;AAM5D,MAAM,WAAW,MAAM;IACrB,sDAAsD;IACtD,KAAK,EAAE,MAAM,CAAA;IACb,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAkEhC,CAAA;AAED,OAAO,EAAE,UAAU,EAAE,CAAA;AAErB,eAAe,UAAU,CAAA"}

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

@@ -7,6 +7,7 @@ import { useContainerDimensions } from '../utils/useContainerDimensions';
 import { TabNavItemWrapper, styles, SelectChildrenWrapper } from './styles';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 
 const TabNavItem = ({
   value,
@@ -29,8 +30,11 @@ const TabNavItem = ({
   const isActive = selected && selected === value || value === active;
   const ref = useRef(null);
   const {
-    width
+    width,
+    bottom,
+    left
   } = useContainerDimensions(ref);
+  console.log(bottom, left);
   useEffect(() => {
     const handleClickOutside = e => {
       const node = childrenRef.current;
@@ -48,17 +52,22 @@ const TabNavItem = ({
       [value]: width
     }); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [width]);
-  return _jsxs(TabNavItemWrapper, {
-    ref: ref,
-    onClick: () => isSelect ? setOpen(!open) : setActive(value),
-    theme: theme,
-    css: t => [isActive && styles.active(t)],
-    "data-tracking-name": trackingName,
-    "data-tracking-event": trackingEvent,
-    className: className,
-    children: [displayText ? displayText : value, isSelect && _jsx(IconCaretDown, {
-      flipVertical: open
+  return _jsxs(_Fragment, {
+    children: [_jsxs(TabNavItemWrapper, {
+      ref: ref,
+      onClick: () => isSelect ? setOpen(!open) : setActive(value),
+      theme: theme,
+      css: t => [isActive && styles.active(t)],
+      "data-tracking-name": trackingName,
+      "data-tracking-event": trackingEvent,
+      className: className,
+      children: [displayText ? displayText : value, isSelect && _jsx(IconCaretDown, {
+        flipVertical: open,
+        size: 20
+      })]
     }), isSelect && open && _jsx(SelectChildrenWrapper, {
+      left: left,
+      bottom: bottom,
       ref: childrenRef,
       children: children
     })]

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

@@ -7,6 +7,9 @@ export declare const TabNavItemWrapper: import("@emotion/styled").StyledComponen
 export declare const SelectChildrenWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
+} & {
+    bottom: number;
+    left: number;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const styles: {
     active: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/packages/core/TabNav/TabNavItem/styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAEpD,eAAO,MAAM,iBAAiB;;;qHA0B7B,CAAA;AAED,eAAO,MAAM,qBAAqB;;;yGAKjC,CAAA;AAED,eAAO,MAAM,MAAM;oBACD,SAAS;CAc1B,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/packages/core/TabNav/TabNavItem/styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAEpD,eAAO,MAAM,iBAAiB;;;qHA0B7B,CAAA;AAED,eAAO,MAAM,qBAAqB;;;;YACd,MAAM;UAAQ,MAAM;yGAOvC,CAAA;AAED,eAAO,MAAM,MAAM;oBACD,SAAS;CAc1B,CAAA"}

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

@@ -1,28 +1,17 @@
 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';
 export const TabNavItemWrapper = _styled("button", process.env.NODE_ENV === "production" ? {
   target: "e169sb431"
 } : {
   target: "e169sb431",
   label: "TabNavItemWrapper"
-})(props => /*#__PURE__*/css("display:flex;border:none;background:transparent;cursor:pointer;padding:1rem;position:relative;font-size:16px;font-weight:bold;transition:all ease 250ms;&:hover{&::after{position:absolute;content:'';width:100%;height:4px;bottom:0;left:0;background-color:", props.theme.primary, ";z-index:1;opacity:0.4;}}" + (process.env.NODE_ENV === "production" ? "" : ";label:TabNavItemWrapper;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL1RhYk5hdi9UYWJOYXZJdGVtL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLZ0IiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL3BhY2thZ2VzL2NvcmUvVGFiTmF2L1RhYk5hdkl0ZW0vc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IElBcHBUaGVtZSB9IGZyb20gJy4uLy4uLy4uL2FwcC1zaGVsbC90aGVtZSdcblxuZXhwb3J0IGNvbnN0IFRhYk5hdkl0ZW1XcmFwcGVyID0gc3R5bGVkLmJ1dHRvbihcbiAgKHByb3BzKSA9PiBjc3NgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBib3JkZXI6IG5vbmU7XG4gICAgYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuICAgIHBhZGRpbmc6IDFyZW07XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIGZvbnQtc2l6ZTogMTZweDtcbiAgICBmb250LXdlaWdodDogYm9sZDtcbiAgICB0cmFuc2l0aW9uOiBhbGwgZWFzZSAyNTBtcztcblxuICAgICY6aG92ZXIge1xuICAgICAgJjo6YWZ0ZXIge1xuICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgIGNvbnRlbnQ6ICcnO1xuICAgICAgICB3aWR0aDogMTAwJTtcbiAgICAgICAgaGVpZ2h0OiA0cHg7XG4gICAgICAgIGJvdHRvbTogMDtcbiAgICAgICAgbGVmdDogMDtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtwcm9wcy50aGVtZS5wcmltYXJ5fTtcbiAgICAgICAgei1pbmRleDogMTtcbiAgICAgICAgb3BhY2l0eTogMC40O1xuICAgICAgfVxuICAgIH1cbiAgYFxuKVxuXG5leHBvcnQgY29uc3QgU2VsZWN0Q2hpbGRyZW5XcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB6LWluZGV4OiAyO1xuICB0b3A6IGNhbGMoMTAwJSAtIDAuNWVtKTtcbmBcblxuZXhwb3J0IGNvbnN0IHN0eWxlcyA9IHtcbiAgYWN0aXZlOiAodGhlbWU6IElBcHBUaGVtZSkgPT5cbiAgICBjc3NgXG4gICAgICAmOjphZnRlciB7XG4gICAgICAgIHRyYW5zaXRpb246IGFsbCBlYXNlIDI1MG1zO1xuICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgIGNvbnRlbnQ6ICcnO1xuICAgICAgICB3aWR0aDogMTAwJTtcbiAgICAgICAgaGVpZ2h0OiA0cHg7XG4gICAgICAgIGJvdHRvbTogMDtcbiAgICAgICAgbGVmdDogMDtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt0aGVtZS5wcmltYXJ5fTtcbiAgICAgICAgei1pbmRleDogMTtcbiAgICAgIH1cbiAgICBgLFxufVxuIl19 */"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL1RhYk5hdi9UYWJOYXZJdGVtL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJaUMiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL3BhY2thZ2VzL2NvcmUvVGFiTmF2L1RhYk5hdkl0ZW0vc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IElBcHBUaGVtZSB9IGZyb20gJy4uLy4uLy4uL2FwcC1zaGVsbC90aGVtZSdcblxuZXhwb3J0IGNvbnN0IFRhYk5hdkl0ZW1XcmFwcGVyID0gc3R5bGVkLmJ1dHRvbihcbiAgKHByb3BzKSA9PiBjc3NgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBib3JkZXI6IG5vbmU7XG4gICAgYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuICAgIHBhZGRpbmc6IDFyZW07XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIGZvbnQtc2l6ZTogMTZweDtcbiAgICBmb250LXdlaWdodDogYm9sZDtcbiAgICB0cmFuc2l0aW9uOiBhbGwgZWFzZSAyNTBtcztcblxuICAgICY6aG92ZXIge1xuICAgICAgJjo6YWZ0ZXIge1xuICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgIGNvbnRlbnQ6ICcnO1xuICAgICAgICB3aWR0aDogMTAwJTtcbiAgICAgICAgaGVpZ2h0OiA0cHg7XG4gICAgICAgIGJvdHRvbTogMDtcbiAgICAgICAgbGVmdDogMDtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtwcm9wcy50aGVtZS5wcmltYXJ5fTtcbiAgICAgICAgei1pbmRleDogMTtcbiAgICAgICAgb3BhY2l0eTogMC40O1xuICAgICAgfVxuICAgIH1cbiAgYFxuKVxuXG5leHBvcnQgY29uc3QgU2VsZWN0Q2hpbGRyZW5XcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB6LWluZGV4OiAyO1xuICB0b3A6IGNhbGMoMTAwJSAtIDAuNWVtKTtcbmBcblxuZXhwb3J0IGNvbnN0IHN0eWxlcyA9IHtcbiAgYWN0aXZlOiAodGhlbWU6IElBcHBUaGVtZSkgPT5cbiAgICBjc3NgXG4gICAgICAmOjphZnRlciB7XG4gICAgICAgIHRyYW5zaXRpb246IGFsbCBlYXNlIDI1MG1zO1xuICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgIGNvbnRlbnQ6ICcnO1xuICAgICAgICB3aWR0aDogMTAwJTtcbiAgICAgICAgaGVpZ2h0OiA0cHg7XG4gICAgICAgIGJvdHRvbTogMDtcbiAgICAgICAgbGVmdDogMDtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt0aGVtZS5wcmltYXJ5fTtcbiAgICAgICAgei1pbmRleDogMTtcbiAgICAgIH1cbiAgICBgLFxufVxuIl19 */");
+})(props => /*#__PURE__*/css("display:flex;border:none;background:transparent;cursor:pointer;padding:1rem;position:relative;font-size:16px;font-weight:bold;transition:all ease 250ms;&:hover{&::after{position:absolute;content:'';width:100%;height:4px;bottom:0;left:0;background-color:", props.theme.primary, ";z-index:1;opacity:0.4;}}" + (process.env.NODE_ENV === "production" ? "" : ";label:TabNavItemWrapper;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL1RhYk5hdi9UYWJOYXZJdGVtL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLZ0IiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL3BhY2thZ2VzL2NvcmUvVGFiTmF2L1RhYk5hdkl0ZW0vc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IElBcHBUaGVtZSB9IGZyb20gJy4uLy4uLy4uL2FwcC1zaGVsbC90aGVtZSdcblxuZXhwb3J0IGNvbnN0IFRhYk5hdkl0ZW1XcmFwcGVyID0gc3R5bGVkLmJ1dHRvbihcbiAgKHByb3BzKSA9PiBjc3NgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBib3JkZXI6IG5vbmU7XG4gICAgYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuICAgIHBhZGRpbmc6IDFyZW07XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIGZvbnQtc2l6ZTogMTZweDtcbiAgICBmb250LXdlaWdodDogYm9sZDtcbiAgICB0cmFuc2l0aW9uOiBhbGwgZWFzZSAyNTBtcztcblxuICAgICY6aG92ZXIge1xuICAgICAgJjo6YWZ0ZXIge1xuICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgIGNvbnRlbnQ6ICcnO1xuICAgICAgICB3aWR0aDogMTAwJTtcbiAgICAgICAgaGVpZ2h0OiA0cHg7XG4gICAgICAgIGJvdHRvbTogMDtcbiAgICAgICAgbGVmdDogMDtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtwcm9wcy50aGVtZS5wcmltYXJ5fTtcbiAgICAgICAgei1pbmRleDogMTtcbiAgICAgICAgb3BhY2l0eTogMC40O1xuICAgICAgfVxuICAgIH1cbiAgYFxuKVxuXG5leHBvcnQgY29uc3QgU2VsZWN0Q2hpbGRyZW5XcmFwcGVyID0gc3R5bGVkLmRpdihcbiAgKHByb3BzOiB7IGJvdHRvbTogbnVtYmVyOyBsZWZ0OiBudW1iZXIgfSkgPT4gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIHotaW5kZXg6IDI7XG4gICAgdG9wOiBjYWxjKCR7cHJvcHMuYm90dG9tfXB4IC0gMC41ZW0pO1xuICAgIGxlZnQ6ICR7cHJvcHMubGVmdH1weDtcbiAgYFxuKVxuXG5leHBvcnQgY29uc3Qgc3R5bGVzID0ge1xuICBhY3RpdmU6ICh0aGVtZTogSUFwcFRoZW1lKSA9PlxuICAgIGNzc2BcbiAgICAgICY6OmFmdGVyIHtcbiAgICAgICAgdHJhbnNpdGlvbjogYWxsIGVhc2UgMjUwbXM7XG4gICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgICAgY29udGVudDogJyc7XG4gICAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgICBoZWlnaHQ6IDRweDtcbiAgICAgICAgYm90dG9tOiAwO1xuICAgICAgICBsZWZ0OiAwO1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLnByaW1hcnl9O1xuICAgICAgICB6LWluZGV4OiAxO1xuICAgICAgfVxuICAgIGAsXG59XG4iXX0= */"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL1RhYk5hdi9UYWJOYXZJdGVtL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJaUMiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL3BhY2thZ2VzL2NvcmUvVGFiTmF2L1RhYk5hdkl0ZW0vc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IElBcHBUaGVtZSB9IGZyb20gJy4uLy4uLy4uL2FwcC1zaGVsbC90aGVtZSdcblxuZXhwb3J0IGNvbnN0IFRhYk5hdkl0ZW1XcmFwcGVyID0gc3R5bGVkLmJ1dHRvbihcbiAgKHByb3BzKSA9PiBjc3NgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBib3JkZXI6IG5vbmU7XG4gICAgYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuICAgIHBhZGRpbmc6IDFyZW07XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIGZvbnQtc2l6ZTogMTZweDtcbiAgICBmb250LXdlaWdodDogYm9sZDtcbiAgICB0cmFuc2l0aW9uOiBhbGwgZWFzZSAyNTBtcztcblxuICAgICY6aG92ZXIge1xuICAgICAgJjo6YWZ0ZXIge1xuICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgIGNvbnRlbnQ6ICcnO1xuICAgICAgICB3aWR0aDogMTAwJTtcbiAgICAgICAgaGVpZ2h0OiA0cHg7XG4gICAgICAgIGJvdHRvbTogMDtcbiAgICAgICAgbGVmdDogMDtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtwcm9wcy50aGVtZS5wcmltYXJ5fTtcbiAgICAgICAgei1pbmRleDogMTtcbiAgICAgICAgb3BhY2l0eTogMC40O1xuICAgICAgfVxuICAgIH1cbiAgYFxuKVxuXG5leHBvcnQgY29uc3QgU2VsZWN0Q2hpbGRyZW5XcmFwcGVyID0gc3R5bGVkLmRpdihcbiAgKHByb3BzOiB7IGJvdHRvbTogbnVtYmVyOyBsZWZ0OiBudW1iZXIgfSkgPT4gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIHotaW5kZXg6IDI7XG4gICAgdG9wOiBjYWxjKCR7cHJvcHMuYm90dG9tfXB4IC0gMC41ZW0pO1xuICAgIGxlZnQ6ICR7cHJvcHMubGVmdH1weDtcbiAgYFxuKVxuXG5leHBvcnQgY29uc3Qgc3R5bGVzID0ge1xuICBhY3RpdmU6ICh0aGVtZTogSUFwcFRoZW1lKSA9PlxuICAgIGNzc2BcbiAgICAgICY6OmFmdGVyIHtcbiAgICAgICAgdHJhbnNpdGlvbjogYWxsIGVhc2UgMjUwbXM7XG4gICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgICAgY29udGVudDogJyc7XG4gICAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgICBoZWlnaHQ6IDRweDtcbiAgICAgICAgYm90dG9tOiAwO1xuICAgICAgICBsZWZ0OiAwO1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLnByaW1hcnl9O1xuICAgICAgICB6LWluZGV4OiAxO1xuICAgICAgfVxuICAgIGAsXG59XG4iXX0= */");
 export const SelectChildrenWrapper = _styled("div", process.env.NODE_ENV === "production" ? {
   target: "e169sb430"
 } : {
   target: "e169sb430",
   label: "SelectChildrenWrapper"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1vabhhj",
-  styles: "display:flex;position:absolute;z-index:2;top:calc(100% - 0.5em)"
-} : {
-  name: "1vabhhj",
-  styles: "display:flex;position:absolute;z-index:2;top:calc(100% - 0.5em)",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL1RhYk5hdi9UYWJOYXZJdGVtL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnQytDIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL1RhYk5hdi9UYWJOYXZJdGVtL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBJQXBwVGhlbWUgfSBmcm9tICcuLi8uLi8uLi9hcHAtc2hlbGwvdGhlbWUnXG5cbmV4cG9ydCBjb25zdCBUYWJOYXZJdGVtV3JhcHBlciA9IHN0eWxlZC5idXR0b24oXG4gIChwcm9wcykgPT4gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYm9yZGVyOiBub25lO1xuICAgIGJhY2tncm91bmQ6IHRyYW5zcGFyZW50O1xuICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICBwYWRkaW5nOiAxcmVtO1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBmb250LXNpemU6IDE2cHg7XG4gICAgZm9udC13ZWlnaHQ6IGJvbGQ7XG4gICAgdHJhbnNpdGlvbjogYWxsIGVhc2UgMjUwbXM7XG5cbiAgICAmOmhvdmVyIHtcbiAgICAgICY6OmFmdGVyIHtcbiAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICBjb250ZW50OiAnJztcbiAgICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICAgIGhlaWdodDogNHB4O1xuICAgICAgICBib3R0b206IDA7XG4gICAgICAgIGxlZnQ6IDA7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7cHJvcHMudGhlbWUucHJpbWFyeX07XG4gICAgICAgIHotaW5kZXg6IDE7XG4gICAgICAgIG9wYWNpdHk6IDAuNDtcbiAgICAgIH1cbiAgICB9XG4gIGBcbilcblxuZXhwb3J0IGNvbnN0IFNlbGVjdENoaWxkcmVuV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgei1pbmRleDogMjtcbiAgdG9wOiBjYWxjKDEwMCUgLSAwLjVlbSk7XG5gXG5cbmV4cG9ydCBjb25zdCBzdHlsZXMgPSB7XG4gIGFjdGl2ZTogKHRoZW1lOiBJQXBwVGhlbWUpID0+XG4gICAgY3NzYFxuICAgICAgJjo6YWZ0ZXIge1xuICAgICAgICB0cmFuc2l0aW9uOiBhbGwgZWFzZSAyNTBtcztcbiAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICBjb250ZW50OiAnJztcbiAgICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICAgIGhlaWdodDogNHB4O1xuICAgICAgICBib3R0b206IDA7XG4gICAgICAgIGxlZnQ6IDA7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUucHJpbWFyeX07XG4gICAgICAgIHotaW5kZXg6IDE7XG4gICAgICB9XG4gICAgYCxcbn1cbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
+})(props => /*#__PURE__*/css("display:flex;position:absolute;z-index:2;top:calc(", props.bottom, "px - 0.5em);left:", props.left, "px;" + (process.env.NODE_ENV === "production" ? "" : ";label:SelectChildrenWrapper;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL1RhYk5hdi9UYWJOYXZJdGVtL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQ2tEIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL1RhYk5hdi9UYWJOYXZJdGVtL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBJQXBwVGhlbWUgfSBmcm9tICcuLi8uLi8uLi9hcHAtc2hlbGwvdGhlbWUnXG5cbmV4cG9ydCBjb25zdCBUYWJOYXZJdGVtV3JhcHBlciA9IHN0eWxlZC5idXR0b24oXG4gIChwcm9wcykgPT4gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYm9yZGVyOiBub25lO1xuICAgIGJhY2tncm91bmQ6IHRyYW5zcGFyZW50O1xuICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICBwYWRkaW5nOiAxcmVtO1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBmb250LXNpemU6IDE2cHg7XG4gICAgZm9udC13ZWlnaHQ6IGJvbGQ7XG4gICAgdHJhbnNpdGlvbjogYWxsIGVhc2UgMjUwbXM7XG5cbiAgICAmOmhvdmVyIHtcbiAgICAgICY6OmFmdGVyIHtcbiAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICBjb250ZW50OiAnJztcbiAgICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICAgIGhlaWdodDogNHB4O1xuICAgICAgICBib3R0b206IDA7XG4gICAgICAgIGxlZnQ6IDA7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7cHJvcHMudGhlbWUucHJpbWFyeX07XG4gICAgICAgIHotaW5kZXg6IDE7XG4gICAgICAgIG9wYWNpdHk6IDAuNDtcbiAgICAgIH1cbiAgICB9XG4gIGBcbilcblxuZXhwb3J0IGNvbnN0IFNlbGVjdENoaWxkcmVuV3JhcHBlciA9IHN0eWxlZC5kaXYoXG4gIChwcm9wczogeyBib3R0b206IG51bWJlcjsgbGVmdDogbnVtYmVyIH0pID0+IGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB6LWluZGV4OiAyO1xuICAgIHRvcDogY2FsYygke3Byb3BzLmJvdHRvbX1weCAtIDAuNWVtKTtcbiAgICBsZWZ0OiAke3Byb3BzLmxlZnR9cHg7XG4gIGBcbilcblxuZXhwb3J0IGNvbnN0IHN0eWxlcyA9IHtcbiAgYWN0aXZlOiAodGhlbWU6IElBcHBUaGVtZSkgPT5cbiAgICBjc3NgXG4gICAgICAmOjphZnRlciB7XG4gICAgICAgIHRyYW5zaXRpb246IGFsbCBlYXNlIDI1MG1zO1xuICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgIGNvbnRlbnQ6ICcnO1xuICAgICAgICB3aWR0aDogMTAwJTtcbiAgICAgICAgaGVpZ2h0OiA0cHg7XG4gICAgICAgIGJvdHRvbTogMDtcbiAgICAgICAgbGVmdDogMDtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt0aGVtZS5wcmltYXJ5fTtcbiAgICAgICAgei1pbmRleDogMTtcbiAgICAgIH1cbiAgICBgLFxufVxuIl19 */"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL1RhYk5hdi9UYWJOYXZJdGVtL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnQ3FDIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL1RhYk5hdi9UYWJOYXZJdGVtL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBJQXBwVGhlbWUgfSBmcm9tICcuLi8uLi8uLi9hcHAtc2hlbGwvdGhlbWUnXG5cbmV4cG9ydCBjb25zdCBUYWJOYXZJdGVtV3JhcHBlciA9IHN0eWxlZC5idXR0b24oXG4gIChwcm9wcykgPT4gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYm9yZGVyOiBub25lO1xuICAgIGJhY2tncm91bmQ6IHRyYW5zcGFyZW50O1xuICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICBwYWRkaW5nOiAxcmVtO1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBmb250LXNpemU6IDE2cHg7XG4gICAgZm9udC13ZWlnaHQ6IGJvbGQ7XG4gICAgdHJhbnNpdGlvbjogYWxsIGVhc2UgMjUwbXM7XG5cbiAgICAmOmhvdmVyIHtcbiAgICAgICY6OmFmdGVyIHtcbiAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICBjb250ZW50OiAnJztcbiAgICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICAgIGhlaWdodDogNHB4O1xuICAgICAgICBib3R0b206IDA7XG4gICAgICAgIGxlZnQ6IDA7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7cHJvcHMudGhlbWUucHJpbWFyeX07XG4gICAgICAgIHotaW5kZXg6IDE7XG4gICAgICAgIG9wYWNpdHk6IDAuNDtcbiAgICAgIH1cbiAgICB9XG4gIGBcbilcblxuZXhwb3J0IGNvbnN0IFNlbGVjdENoaWxkcmVuV3JhcHBlciA9IHN0eWxlZC5kaXYoXG4gIChwcm9wczogeyBib3R0b206IG51bWJlcjsgbGVmdDogbnVtYmVyIH0pID0+IGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB6LWluZGV4OiAyO1xuICAgIHRvcDogY2FsYygke3Byb3BzLmJvdHRvbX1weCAtIDAuNWVtKTtcbiAgICBsZWZ0OiAke3Byb3BzLmxlZnR9cHg7XG4gIGBcbilcblxuZXhwb3J0IGNvbnN0IHN0eWxlcyA9IHtcbiAgYWN0aXZlOiAodGhlbWU6IElBcHBUaGVtZSkgPT5cbiAgICBjc3NgXG4gICAgICAmOjphZnRlciB7XG4gICAgICAgIHRyYW5zaXRpb246IGFsbCBlYXNlIDI1MG1zO1xuICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgIGNvbnRlbnQ6ICcnO1xuICAgICAgICB3aWR0aDogMTAwJTtcbiAgICAgICAgaGVpZ2h0OiA0cHg7XG4gICAgICAgIGJvdHRvbTogMDtcbiAgICAgICAgbGVmdDogMDtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt0aGVtZS5wcmltYXJ5fTtcbiAgICAgICAgei1pbmRleDogMTtcbiAgICAgIH1cbiAgICBgLFxufVxuIl19 */");
 export const styles = {
-  active: theme => /*#__PURE__*/css("&::after{transition:all ease 250ms;position:absolute;content:'';width:100%;height:4px;bottom:0;left:0;background-color:", theme.primary, ";z-index:1;}" + (process.env.NODE_ENV === "production" ? "" : ";label:styles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL1RhYk5hdi9UYWJOYXZJdGVtL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF5Q08iLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL3BhY2thZ2VzL2NvcmUvVGFiTmF2L1RhYk5hdkl0ZW0vc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IElBcHBUaGVtZSB9IGZyb20gJy4uLy4uLy4uL2FwcC1zaGVsbC90aGVtZSdcblxuZXhwb3J0IGNvbnN0IFRhYk5hdkl0ZW1XcmFwcGVyID0gc3R5bGVkLmJ1dHRvbihcbiAgKHByb3BzKSA9PiBjc3NgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBib3JkZXI6IG5vbmU7XG4gICAgYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuICAgIHBhZGRpbmc6IDFyZW07XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIGZvbnQtc2l6ZTogMTZweDtcbiAgICBmb250LXdlaWdodDogYm9sZDtcbiAgICB0cmFuc2l0aW9uOiBhbGwgZWFzZSAyNTBtcztcblxuICAgICY6aG92ZXIge1xuICAgICAgJjo6YWZ0ZXIge1xuICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgIGNvbnRlbnQ6ICcnO1xuICAgICAgICB3aWR0aDogMTAwJTtcbiAgICAgICAgaGVpZ2h0OiA0cHg7XG4gICAgICAgIGJvdHRvbTogMDtcbiAgICAgICAgbGVmdDogMDtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtwcm9wcy50aGVtZS5wcmltYXJ5fTtcbiAgICAgICAgei1pbmRleDogMTtcbiAgICAgICAgb3BhY2l0eTogMC40O1xuICAgICAgfVxuICAgIH1cbiAgYFxuKVxuXG5leHBvcnQgY29uc3QgU2VsZWN0Q2hpbGRyZW5XcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB6LWluZGV4OiAyO1xuICB0b3A6IGNhbGMoMTAwJSAtIDAuNWVtKTtcbmBcblxuZXhwb3J0IGNvbnN0IHN0eWxlcyA9IHtcbiAgYWN0aXZlOiAodGhlbWU6IElBcHBUaGVtZSkgPT5cbiAgICBjc3NgXG4gICAgICAmOjphZnRlciB7XG4gICAgICAgIHRyYW5zaXRpb246IGFsbCBlYXNlIDI1MG1zO1xuICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgIGNvbnRlbnQ6ICcnO1xuICAgICAgICB3aWR0aDogMTAwJTtcbiAgICAgICAgaGVpZ2h0OiA0cHg7XG4gICAgICAgIGJvdHRvbTogMDtcbiAgICAgICAgbGVmdDogMDtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt0aGVtZS5wcmltYXJ5fTtcbiAgICAgICAgei1pbmRleDogMTtcbiAgICAgIH1cbiAgICBgLFxufVxuIl19 */")
+  active: theme => /*#__PURE__*/css("&::after{transition:all ease 250ms;position:absolute;content:'';width:100%;height:4px;bottom:0;left:0;background-color:", theme.primary, ";z-index:1;}" + (process.env.NODE_ENV === "production" ? "" : ";label:styles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL1RhYk5hdi9UYWJOYXZJdGVtL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE0Q08iLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL3BhY2thZ2VzL2NvcmUvVGFiTmF2L1RhYk5hdkl0ZW0vc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IElBcHBUaGVtZSB9IGZyb20gJy4uLy4uLy4uL2FwcC1zaGVsbC90aGVtZSdcblxuZXhwb3J0IGNvbnN0IFRhYk5hdkl0ZW1XcmFwcGVyID0gc3R5bGVkLmJ1dHRvbihcbiAgKHByb3BzKSA9PiBjc3NgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBib3JkZXI6IG5vbmU7XG4gICAgYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuICAgIHBhZGRpbmc6IDFyZW07XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIGZvbnQtc2l6ZTogMTZweDtcbiAgICBmb250LXdlaWdodDogYm9sZDtcbiAgICB0cmFuc2l0aW9uOiBhbGwgZWFzZSAyNTBtcztcblxuICAgICY6aG92ZXIge1xuICAgICAgJjo6YWZ0ZXIge1xuICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgIGNvbnRlbnQ6ICcnO1xuICAgICAgICB3aWR0aDogMTAwJTtcbiAgICAgICAgaGVpZ2h0OiA0cHg7XG4gICAgICAgIGJvdHRvbTogMDtcbiAgICAgICAgbGVmdDogMDtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtwcm9wcy50aGVtZS5wcmltYXJ5fTtcbiAgICAgICAgei1pbmRleDogMTtcbiAgICAgICAgb3BhY2l0eTogMC40O1xuICAgICAgfVxuICAgIH1cbiAgYFxuKVxuXG5leHBvcnQgY29uc3QgU2VsZWN0Q2hpbGRyZW5XcmFwcGVyID0gc3R5bGVkLmRpdihcbiAgKHByb3BzOiB7IGJvdHRvbTogbnVtYmVyOyBsZWZ0OiBudW1iZXIgfSkgPT4gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIHotaW5kZXg6IDI7XG4gICAgdG9wOiBjYWxjKCR7cHJvcHMuYm90dG9tfXB4IC0gMC41ZW0pO1xuICAgIGxlZnQ6ICR7cHJvcHMubGVmdH1weDtcbiAgYFxuKVxuXG5leHBvcnQgY29uc3Qgc3R5bGVzID0ge1xuICBhY3RpdmU6ICh0aGVtZTogSUFwcFRoZW1lKSA9PlxuICAgIGNzc2BcbiAgICAgICY6OmFmdGVyIHtcbiAgICAgICAgdHJhbnNpdGlvbjogYWxsIGVhc2UgMjUwbXM7XG4gICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgICAgY29udGVudDogJyc7XG4gICAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgICBoZWlnaHQ6IDRweDtcbiAgICAgICAgYm90dG9tOiAwO1xuICAgICAgICBsZWZ0OiAwO1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLnByaW1hcnl9O1xuICAgICAgICB6LWluZGV4OiAxO1xuICAgICAgfVxuICAgIGAsXG59XG4iXX0= */")
 };

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

@@ -1,5 +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/core/TabNav/utils/useContainerDimensions.d.ts.map

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

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

@@ -2,11 +2,17 @@ import { useCallback, useEffect, useState } from 'react';
 export const useContainerDimensions = ref => {
   const [dimensions, setDimensions] = useState({
     width: 0,
-    height: 0
+    height: 0,
+    top: 0,
+    left: 0,
+    bottom: 0
   });
   const getDimensions = useCallback(() => ({
     width: ref.current?.offsetWidth || 0,
-    height: ref.current?.offsetHeight || 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());

package/package.json

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