@equinor/amplify-component-lib 0.0.1

package/dist/esm/components/Navigation/SideBar/SideBar.styles.js

@@ -0,0 +1,32 @@
+import{tokens as e}from"../../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{spacings as i}from"../../../style/spacings.js";import t from"styled-components";const{colors:o}=e,s=t.div`
+  display: flex;
+  flex-direction: column;
+  align-self: stretch;
+  align-items: flex-start;
+  justify-content: space-between;
+  width: ${e=>e.$width};
+  min-width: ${e=>e.$width};
+  height: calc(100vh - 64px);
+  position: sticky;
+  top: 64px;
+  overflow: hidden;
+  border-right: 1px solid ${o.ui.background__medium.rgba};
+  background-color: ${o.ui.background__default.rgba};
+`,l=t.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+`,d=t.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+  border-top: 1px solid ${o.ui.background__medium.rgba};
+`,n=t.div`
+  display: flex;
+  align-self: stretch;
+  justify-content: center;
+  padding: 20px ${i.medium};
+`;export{d as BottomItemContainer,n as EquinorIconContainer,s as NavigationContainer,l as TopItemContainer};

package/dist/esm/components/Navigation/SideBar/ToggleOpen.js

@@ -0,0 +1 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{Icon as o,Typography as i}from"@equinor/eds-core-react";import{first_page as r,last_page as n}from"@equinor/eds-icons";import{tokens as a}from"../../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{IconContainer as s}from"./MenuItem.styles.js";import{Container as c}from"./ToggleOpen.styles.js";import l from"../../DataDisplay/OptionalTooltip.js";const{colors:d}=a,m=({isOpen:a,toggle:m})=>a?e(c,{$open:a,onClick:m,children:[t(s,{"data-testid":"icon-container",children:t(o,{size:24,data:r,color:d.interactive.primary__resting.rgba})}),t(i,{variant:"button",group:"navigation",color:d.text.static_icons__default.rgba,children:"Collapse"})]}):t(c,{$open:a,onClick:m,children:t(l,{title:"Expand",placement:"right",children:t(s,{"data-testid":"icon-container",children:t(o,{size:24,data:n,color:d.interactive.primary__resting.rgba})})})});export{m as default};

package/dist/esm/components/Navigation/SideBar/ToggleOpen.styles.js

@@ -0,0 +1,21 @@
+import{tokens as e}from"../../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{spacings as o}from"../../../style/spacings.js";import t from"styled-components";const{colors:r}=e,i=t.button`
+  display: flex;
+  align-self: stretch;
+  align-items: center;
+  justify-content: ${({$open:e})=>!e&&"center"};
+  height: 64px;
+  padding: ${o.medium};
+  gap: ${o.medium};
+  box-sizing: border-box;
+  border-bottom: 1px solid ${r.ui.background__medium.rgba};
+  transition: background 0.1s ease-out;
+
+  &:hover {
+    background: ${r.interactive.primary__hover_alt.rgba};
+    cursor: pointer;
+  }
+  &:focus {
+    outline: 1px dashed ${r.interactive.primary__resting.rgba};
+    outline-offset: -1px;
+  }
+`;export{i as Container};

package/dist/esm/components/Navigation/SideBar/index.js

@@ -0,0 +1 @@
+import e from"./MenuItem.js";import{SideBar as m}from"./SideBar.js";const t=m;t.Item=e,t.Item.displayName="SideBar.Item";export{t as default};

package/dist/esm/components/Navigation/TableOfContents/TableOfContents.constants.js

@@ -0,0 +1 @@
+import{spacings as o}from"../../../style/spacings.js";const s={buttons:"39px",border:"34px"},t={buttons:o.x_small,border:"0"};export{t as GAP,s as HEIGHT};

package/dist/esm/components/Navigation/TableOfContents/TableOfContents.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{useMemo as t}from"react";import r from"./TableOfContentsItem.js";import{TableOfContentsContainer as o,BorderItemsContainer as n}from"./TableOfContents.styles.js";import{useTableOfContents as i}from"../../../providers/TableOfContentsProvider.js";import{getValues as a}from"../../../providers/TableOfContentsProvider.utils.js";const s=({variant:s="buttons",onlyShowSelectedChildren:l=!0,isLink:d=!1})=>{const{items:m,selected:c}=i(),u=t((()=>{for(const[e,t]of m.entries()){const r=a([],t);if(t.value===c||c&&r.includes(c))return e}return-1}),[m,c]);return e(o,"border"===s?{className:"page-menu",$variant:s,layoutRoot:!0,children:m.map(((t,o)=>e(n,{"data-testid":`border-items-container-${t.value}`,$index:o,$activeIndex:u,"aria-selected":u===o,children:e(r,{variant:s,...t,onlyShowSelectedChildren:l,isLink:d})},t.value)))}:{className:"page-menu",$variant:s,layoutRoot:!0,children:m.map((t=>e(r,{variant:s,...t,onlyShowSelectedChildren:l,isLink:d},t.value)))})};export{s as TableOfContents};

package/dist/esm/components/Navigation/TableOfContents/TableOfContents.styles.js

@@ -0,0 +1,165 @@
+import{Link as t}from"react-router-dom";import{tokens as e}from"../../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{HEIGHT as i}from"./TableOfContents.constants.js";import{spacings as o}from"../../../style/spacings.js";import{motion as r}from"framer-motion";import a,{css as n}from"styled-components";const{colors:s,shape:l}=e,d=a.button`
+  &:hover {
+    background: ${s.interactive.primary__hover_alt.rgba};
+  }
+  &:focus {
+    outline: 2px dashed ${s.interactive.focus.rgba};
+    outline-offset: -4px;
+  }
+  position: relative;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  gap: ${o.small};
+  color: ${s.text.static_icons__default.rgba};
+  cursor: pointer;
+  padding: 0 ${o.medium};
+  height: ${({$variant:t})=>i[t]};
+  transition: background 200ms;
+  > span {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    text-align: left;
+    font-family: 'Equinor', sans-serif;
+    font-weight: 700;
+    font-size: 14px;
+  }
+  ${({$variant:t,$active:e})=>{switch(t){case"buttons":return n`
+          border-radius: ${l.corners.borderRadius};
+          background: ${e?s.interactive.primary__hover_alt.rgba:"none"};
+        `;case"border":return n`
+          > span {
+            font-weight: ${e?700:500};
+            &:after {
+              height: 0;
+              display: block;
+              content: attr(title);
+              font-weight: 700;
+              font-size: 14px;
+              overflow: hidden;
+              visibility: hidden;
+            }
+          }
+        `}}}
+  ${({$active:t})=>!t&&n`
+      &:disabled {
+        color: ${s.interactive.disabled__text.rgba};
+        cursor: not-allowed;
+      }
+    `}
+`,c=a(t)`
+  text-decoration: none;
+  &:focus,
+  &:hover,
+  &:active {
+    text-decoration: none;
+    color: ${s.text.static_icons__default.rgba};
+  }
+  &:hover {
+    background: ${s.interactive.primary__hover_alt.rgba};
+  }
+  &:focus-visible {
+    color: ${s.text.static_icons__default.rgba};
+    outline: 2px dashed ${s.interactive.focus.rgba};
+    outline-offset: -4px;
+  }
+
+  ${({$disabled:t,$active:e})=>t&&!e&&n`
+      color: ${s.interactive.disabled__text.rgba} !important;
+      &:hover {
+        cursor: not-allowed;
+      }
+    `};
+
+  position: relative;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  gap: ${o.small};
+  color: ${s.text.static_icons__default.rgba};
+  cursor: pointer;
+  padding: 0 ${o.medium};
+  height: ${({$variant:t})=>i[t]};
+  transition: background 200ms;
+
+  > span {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    text-align: left;
+    font-family: 'Equinor', sans-serif;
+    font-weight: 700;
+    font-size: 14px;
+  }
+  ${({$variant:t,$active:e})=>{switch(t){case"buttons":return n`
+          border-radius: ${l.corners.borderRadius};
+          background: ${e?s.interactive.primary__hover_alt.rgba:"none"};
+        `;case"border":return n`
+          > span {
+            font-weight: ${e?700:500};
+            &:after {
+              height: 0;
+              display: block;
+              content: attr(title);
+              font-weight: 700;
+              font-size: 14px;
+              overflow: hidden;
+              visibility: hidden;
+            }
+          }
+        `}}}
+`,u=a.div`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  &:after {
+    position: absolute;
+    left: 0;
+    top: ${({$activeIndex:t,$index:e})=>100*(t-e)+"%"};
+    content: '';
+    width: 2px;
+    height: 100%;
+    background: ${s.interactive.primary__resting.rgba};
+    z-index: 100;
+  }
+`,f=a(r.div)`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  ${({$variant:t})=>n`
+    min-height: ${i[t]};
+    ${"buttons"===t&&`gap: ${o.x_small};`}
+  `}
+`,p=a(r.div)`
+  display: flex;
+  flex-direction: column;
+  height: fit-content;
+  overflow: hidden;
+  ${({$variant:t})=>{switch(t){case"buttons":return`gap: ${o.small};`;case"border":return n`
+          &:after {
+            position: absolute;
+            left: 0;
+            content: '';
+            width: 2px;
+            height: 100%;
+            background: ${s.ui.background__medium.rgba};
+          }
+        `}}}
+`,g=a(r.div)`
+  display: flex;
+  flex-direction: column;
+  ${({$shouldShowChildren:t})=>t?null:n`
+          visibility: hidden;
+          height: 0 !important;
+        `}
+  > div > button, a {
+    ${({$variant:t})=>{switch(t){case"buttons":return n`
+            margin-left: ${o.medium};
+          `;case"border":return n`
+            padding-left: ${o.x_large};
+          `}}}
+  }
+
+  ${({$variant:t})=>"buttons"===t&&`gap:${o.x_small};`}
+`;export{u as BorderItemsContainer,d as Button,g as ChildContainer,c as Link,p as TableOfContentsContainer,f as TableOfContentsItemContainer};

package/dist/esm/components/Navigation/TableOfContents/TableOfContentsItem.js

@@ -0,0 +1 @@
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import{useRef as i,useEffect as n,useMemo as a}from"react";import{HEIGHT as l,GAP as r}from"./TableOfContents.constants.js";import{TableOfContentsItemContainer as o,Link as d,Button as s,ChildContainer as c}from"./TableOfContents.styles.js";import{Badge as h}from"../../DataDisplay/Badge/Badge.js";import{useTableOfContents as v}from"../../../providers/TableOfContentsProvider.js";const u=({label:m,value:p,count:$,disabled:b=!1,children:f,variant:g,onlyShowSelectedChildren:y,isLink:C=!1})=>{const{isActive:S,selected:j,setSelected:k}=v(),w=i(void 0);n((()=>{void 0===w.current&&(w.current=0)}),[]);const x=a((()=>S({label:m,value:p,children:f})&&!b),[f,b,S,m,p]),D=t=>{b&&t&&t.preventDefault(),b||j===p||k(p)},O=y&&x||!y;return t(o,{$variant:g,layoutScroll:!0,layoutRoot:!0,children:[C?t(d,{$active:j===p,$variant:g,onClick:t=>D(t),to:b?"":`#${p}`,$disabled:b,tabIndex:b?-1:0,children:[e("span",{title:m,children:m}),void 0!==$&&e(h,{variant:0===$?"empty":"light",value:$})]}):t(s,{$active:j===p,$variant:g,onClick:()=>D(),disabled:b,children:[e("span",{title:m,children:m}),void 0!==$&&e(h,{variant:0===$?"empty":"light",value:$})]}),f&&e(c,{$shouldShowChildren:O,$variant:g,initial:{height:w.current},animate:{height:`\n                  calc(\n                    (${O?l[g]:"0"} * ${f.length})\n                    ${"buttons"===g?`+ (${r.buttons} * ${f.length-1})`:""}\n                  )`},transition:{duration:.4},children:f.map((t=>e(u,{onlyShowSelectedChildren:y,variant:g,...t,isLink:C},t.value)))})]})};export{u as default};

package/dist/esm/components/Navigation/TopBar/Account/Account.js

@@ -0,0 +1 @@
+import{jsxs as r,Fragment as o,jsx as e}from"react/jsx-runtime";import{useState as n,useRef as t,useCallback as i,useMemo as c}from"react";import{Typography as l,Button as a,Icon as m}from"@equinor/eds-core-react";import{log_out as s}from"@equinor/eds-icons";import{ProfileButton as u,Container as d,TextContent as h,RolesContainer as p,RoleChip as f,ButtonWrapper as j}from"./Account.styles.js";import A from"../../../DataDisplay/ProfileAvatar.js";import C from"../TopBarMenu.js";const g=({account:g,logout:v,photo:y,roles:B,renderCustomButton:k})=>{const[q,x]=n(!1),z=t(null),D=i((()=>x((r=>!r))),[]),T=c((()=>k?k(z,D):null),[k,D]);return r(o,{children:[T||e(u,{ref:z,onClick:D,children:e(A,{size:36,name:g?.name,url:y})}),r(C,{open:q,title:"Account",onClose:()=>x(!1),anchorEl:z.current,children:[r(d,{children:[e(A,{size:64,name:g?.name,url:y}),r(h,{children:[e(l,{variant:"h6",children:g?.name}),e(l,{children:g?.username})]}),B&&e(p,{children:B.map((r=>e(f,{children:r},r)))})]}),e(j,{children:r(a,{variant:"ghost",onClick:v,children:[e(m,{data:s}),"Log out"]})})]})]})};g.displayName="TopBar.Account";export{g as Account};

package/dist/esm/components/Navigation/TopBar/Account/Account.styles.js

@@ -0,0 +1,36 @@
+import{Chip as i}from"@equinor/eds-core-react";import{tokens as e}from"../../../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{spacings as r}from"../../../../style/spacings.js";import o from"styled-components";const{colors:t}=e,s=o.button`
+  border-radius: 50%;
+  padding: 0;
+  outline-offset: ${r.x_small};
+  background: none;
+  cursor: pointer;
+  &:focus {
+    outline: 2px dashed ${t.interactive.primary__resting.rgba};
+  }
+`,a=o.div`
+  padding: ${r.medium} ${r.small} 0 ${r.small};
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: ${r.small};
+  > div:first-child {
+    border: 1px solid ${t.text.static_icons__primary_white.rgba};
+    border-radius: 50%;
+  }
+`,d=o.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`,n=o.section`
+  display: flex;
+  gap: ${r.small};
+  margin-top: ${r.small};
+`,l=o(i)`
+  background: ${t.ui.background__light.rgba};
+  border: 1px solid ${t.ui.background__medium.rgba};
+  color: ${t.text.static_icons__default.rgba};
+`,m=o.div`
+  display: grid;
+  margin-top: ${r.x_large};
+  justify-content: center;
+`;export{m as ButtonWrapper,a as Container,s as ProfileButton,l as RoleChip,n as RolesContainer,d as TextContent};

package/dist/esm/components/Navigation/TopBar/Actions.js

@@ -0,0 +1,6 @@
+import{jsx as r}from"react/jsx-runtime";import{forwardRef as e}from"react";import{TopBar as o}from"@equinor/eds-core-react";import{spacings as t}from"../../../style/spacings.js";import i from"styled-components";const s=i(o.Actions)`
+  display: flex;
+  align-items: center;
+  flex-direction: row-reverse;
+  gap: ${t.large};
+`,m=e((({children:e},o)=>r(s,{ref:o,children:e})));m.displayName="TopBar.Actions";export{m as Actions};

package/dist/esm/components/Navigation/TopBar/ApplicationDrawer/ApplicationDrawer.js

@@ -0,0 +1 @@
+import{jsxs as r,Fragment as i,jsx as e}from"react/jsx-runtime";import{useState as o,useRef as t}from"react";import{Icon as a,DotProgress as n,Typography as c}from"@equinor/eds-core-react";import{apps as l,exit_to_app as s}from"@equinor/eds-icons";import{tokens as p}from"../../../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{useQuery as d}from"@tanstack/react-query";import{TopBarButton as m}from"../TopBar.styles.js";import h from"../TopBarMenu.js";import{PortalService as u}from"../../../../api/services/PortalService.js";import v from"../../../Icons/ApplicationIcon/ApplicationIcon.js";import{MenuSection as g,ApplicationContent as f,LoadingApplications as A,NoApplications as j,ApplicationBox as _,ApplicationButton as y,ApplicationName as C,MenuFixedItem as T,TextContainer as E}from"./ApplicationDrawer.styles.js";import P from"../Resources/TransferToAppDialog.js";import{environment as b}from"../../../../utils/auth_environment.js";import"../../../Feedback/ErrorPage/illustrations/GlitchAnimation.js";import"../../../Feedback/ErrorPage/illustrations/QuestioningAnimation.js";import"../../../../types/Errors.js";import"html2canvas";import"proj4";const{colors:k}=p,{getAppName:S,PORTAL_URL_WITHOUT_LOCALHOST:q}=b,I=()=>{const[p,b]=o(!1),[I,L]=o(void 0),[x,N]=o(!1),{data:z=[],isLoading:O}=d({queryKey:["userApplications"],queryFn:()=>u.userApplications()}),$=t(null),B=()=>b(!p),F=()=>{b(!1),L(void 0)};return r(i,O?{children:[e(m,{variant:"ghost",onClick:B,ref:$,$isSelected:p,children:e(a,{data:l,size:24})}),e(h,{open:p,title:"Your available applications",onClose:F,anchorEl:$.current,contentPadding:!1,children:e(i,{children:e(g,{children:e(f,{children:e(A,{children:e(n,{color:"primary"})})})})})})]}:{children:[e(m,{variant:"ghost",onClick:B,ref:$,$isSelected:p,children:e(a,{data:l,size:24})}),e(h,{open:p,title:"Your available applications",onClose:F,anchorEl:$.current,contentPadding:!1,children:r(i,{children:[r(g,{children:[0===z.length?e(j,{children:e(c,{group:"paragraph",variant:"body_short",style:{color:k.text.static_icons__tertiary.rgba},children:"You don't have access to other applications"})}):e(c,{group:"paragraph",variant:"overline",children:"SWITCH BETWEEN APPS"}),e(f,{children:e(i,{children:z.map(((i,o)=>{const t=S(import.meta.env.VITE_NAME)===i.name;return e(_,{$isSelected:t,"data-testid":`application-box-${i.name}`,children:r(y,{variant:"ghost_icon",onClick:()=>{L(i)},"data-testid":i.name,children:[e(v,{name:i.name.toLowerCase(),size:36}),e(C,{children:e(c,{group:"paragraph",variant:"caption",children:i.name})})]})},o)}))})})]}),e(T,{"data-testid":"access-it-link",onClick:()=>{N(!0)},children:r("div",{children:[r(E,{children:[e(c,{variant:"overline",children:"Access to more applications?"}),e(c,{variant:"h6",children:"Go to Application Portal"})]}),e(a,{data:s,color:k.interactive.primary__resting.rgba,size:24})]})})]})}),x&&e(P,{onClose:F,applicationName:"Portal",url:q}),I&&e(P,{onClose:F,applicationName:I.name,url:I.url})]})};export{I as default};

package/dist/esm/components/Navigation/TopBar/ApplicationDrawer/ApplicationDrawer.styles.js

@@ -0,0 +1,73 @@
+import{Button as e}from"@equinor/eds-core-react";import{tokens as i}from"../../../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{spacings as r}from"../../../../style/spacings.js";import d from"styled-components";const{colors:t,shape:o}=i,n=d.div`
+  border-bottom: 1px solid ${t.ui.background__light.rgba};
+  display: flex;
+  flex-direction: column;
+
+  padding: ${r.small} ${r.medium} ${r.medium}
+    ${r.medium};
+  > p {
+    margin-left: ${r.small};
+  }
+`,a=d.div`
+  display: flex;
+  align-items: flex-start;
+  > p {
+    text-align: center;
+  }
+`,l=d.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  padding-top: ${r.small};
+  justify-items: center;
+  gap: ${r.small};
+`,s=d.div`
+  > div {
+    display: grid;
+    grid-template-columns: 1fr 24px;
+    justify-content: space-between;
+    width: 100%;
+  }
+  &:hover {
+    background: ${t.interactive.primary__selected_hover.rgba};
+    cursor: pointer;
+  }
+  border-top: 1px solid ${t.ui.background__light.rgba};
+  outline: none !important;
+  padding: ${r.medium};
+  svg {
+    align-self: center;
+  }
+`,m=d.div`
+  display: flex;
+  flex-direction: column;
+  > h6 {
+    text-transform: capitalize;
+  }
+`,p=d.div`
+  display: flex;
+  padding: ${r.medium};
+`,c=d.div`
+  display: flex;
+  padding: ${r.large};
+  align-items: center;
+  grid-column: span 3;
+`,g=d.div`
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  background: ${({$isSelected:e})=>e?t.interactive.primary__selected_highlight.rgba:"none"};
+  border-radius: ${o.corners.borderRadius};
+  &:hover {
+    background: ${t.interactive.primary__hover_alt.rgba};
+    border-radius: ${o.corners.borderRadius};
+  }
+`,u=d(e)`
+  height: 96px;
+
+  > span {
+    display: flex;
+    flex-direction: column;
+  }
+`;export{g as ApplicationBox,u as ApplicationButton,l as ApplicationContent,a as ApplicationName,c as LoadingApplications,s as MenuFixedItem,n as MenuSection,p as NoApplications,m as TextContainer};

package/dist/esm/components/Navigation/TopBar/FieldSelector.js

@@ -0,0 +1,69 @@
+import{jsxs as e,jsx as i,Fragment as r}from"react/jsx-runtime";import{forwardRef as t,useState as o,useRef as n,useMemo as a}from"react";import{Typography as l,Icon as d,Search as c}from"@equinor/eds-core-react";import{platform as s,arrow_drop_up as m,arrow_drop_down as u,check as p,exit_to_app as h}from"@equinor/eds-icons";import{tokens as g}from"../../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{TopBarButton as f}from"./TopBar.styles.js";import v from"./TopBarMenu.js";import{spacings as _}from"../../../style/spacings.js";import b from"styled-components";import{useOutsideClick as x}from"../../../node_modules/@equinor/eds-utils/dist/esm/hooks/useOutsideClick.js";const{colors:$}=g,y=b.div`
+  display: flex;
+  flex-direction: column;
+
+  padding: ${_.medium_small} ${_.medium};
+  div[role='search'] {
+    > div {
+      outline: none !important;
+    }
+    input {
+      color: ${$.text.static_icons__default.rgba};
+    }
+    input:focus {
+      box-shadow: inset 0 -2px 0 0 ${$.interactive.primary__resting.rgba};
+    }
+  }
+`,k=b(l)`
+  margin: 0 auto ${_.medium};
+`,w=b.div`
+  max-height: 25vh;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+`,C=b.div`
+  &:hover {
+    background: ${$.interactive.primary__selected_hover.rgba};
+    cursor: pointer;
+  }
+  border-top: 1px solid ${$.ui.background__light.rgba};
+  outline: none !important;
+  padding: ${_.medium} ${_.large};
+`,j=b.div`
+  ${e=>e.$active&&`background: ${$.interactive.primary__selected_highlight.rgba};\n    `};
+  > div {
+    display: grid;
+    grid-template-columns: 1fr 24px;
+    justify-content: space-between;
+    width: 100%;
+  }
+  &:hover {
+    background: ${$.interactive.primary__selected_hover.rgba};
+    cursor: pointer;
+  }
+  border-top: 1px solid ${$.ui.background__light.rgba};
+  outline: none !important;
+  padding: ${_.medium} ${_.large};
+  svg {
+    align-self: center;
+  }
+`,L=b.div`
+  border-bottom: 1px solid ${$.ui.background__light.rgba};
+  display: flex;
+  flex-direction: column;
+  > p {
+    margin-left: ${_.large};
+    margin-bottom: ${_.small};
+  }
+`,S=b.div`
+  padding-top: ${_.small};
+  display: flex;
+  align-items: center;
+  padding-bottom: ${_.xxx_large};
+`,q=b.div`
+  display: flex;
+  flex-direction: column;
+  > h6 {
+    text-transform: capitalize;
+  }
+`,F=t((({currentField:t,availableFields:g,onSelect:_,showAccessITLink:b=!0},F)=>{const[z,T]=o(!1),A=n(null),B=n(null),[I,M]=o(""),N=()=>T(!1);x(A.current,(e=>{B.current!==e.target&&T(!1)}));const E=a((()=>""===I?g.filter((e=>e.name?.toLowerCase()!==t?.name?.toLowerCase())):g.filter((e=>e.name?.toLowerCase().includes(I.toLowerCase())))),[g,I,t]),G=a((()=>0===E.length&&g.length>1),[g.length,E.length]),O=a((()=>{if(t?.name)return t?.name?.charAt(0).toUpperCase()+t?.name?.slice(1)}),[t?.name]),P=a((()=>E.length>=4||""!==I),[E,I]);return void 0===t?null:e("div",{ref:F,children:[e(f,{variant:"ghost",ref:B,onClick:()=>T(!z),$isSelected:z,"data-testid":"field-selector-top-bar-button",$fieldSelector:!0,children:[i(d,{data:s,size:24}),O,i(d,{data:z?m:u})]}),i(v,{open:z,title:"Field Selection",onClose:N,anchorEl:B.current,contentPadding:!1,ref:A,children:e(r,{children:[e(L,{children:[P&&i(y,{children:i(c,{autoFocus:!0,placeholder:"Search fields",value:I,onChange:e=>{M(e.target.value)}})}),e(w,{children:[t&&!G&&""===I&&i(j,{$active:!0,children:e("div",{children:[i(q,{children:i(l,{variant:"h6",children:t.name?.toLowerCase()})}),i(d,{data:p,color:$.interactive.primary__resting.rgba,size:24})]})}),G?i(S,{children:i(k,{variant:"body_short",color:$.text.static_icons__tertiary.rgba,children:"No fields matching your search"})}):E.map((e=>i(C,{onClick:()=>{_(e),N()},children:i(q,{children:i(l,{variant:"h6",children:e.name?.toLowerCase()})})},e.uuid)))]})]}),b&&!G&&i(j,{"data-testid":"access-it-link",onClick:()=>window.open("https://accessit.equinor.com/#","_blank"),children:e("div",{children:[e(q,{children:[i(l,{variant:"overline",children:"Missing a field?"}),i(l,{variant:"h6",children:"Go to AccessIT"})]}),i(d,{data:h,color:$.interactive.primary__resting.rgba,size:24})]})})]})})]})}));F.displayName="FieldSelector";export{F as default};

package/dist/esm/components/Navigation/TopBar/Guidelines/Colorbox.js

@@ -0,0 +1,6 @@
+import{tokens as o}from"../../../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import e from"styled-components";const{elevation:s}=o,d=e.div`
+  width: 52px;
+  height: 32px;
+  background-color: ${o=>o.$color};
+  box-shadow: ${s.raised};
+`;export{d as default};

package/dist/esm/components/Navigation/TopBar/Guidelines/Guidelines.js

@@ -0,0 +1 @@
+import{jsxs as o,Fragment as t,jsx as e}from"react/jsx-runtime";import{useState as r,useRef as i}from"react";import{Icon as n}from"@equinor/eds-core-react";import{info_circle as c}from"@equinor/eds-icons";import l from"./Colorbox.js";import s from"./Item.js";import m from"./Section.js";import{TopBarButton as a}from"../TopBar.styles.js";import p from"../TopBarMenu.js";const d=({sections:d})=>{const[f,h]=r(!1),u=i(null);return o(t,{children:[e(a,{variant:"ghost",ref:u,onClick:()=>{h(!f)},"data-testid":"show-hide-button",$isSelected:f,children:e(n,{data:c})},"topbar-notifications"),e(p,{open:f,anchorEl:u.current,onClose:()=>{h(!1)},withGap:!0,children:d.map(((t,r)=>e(m,{title:t.sectionName,children:t.items.map(((t,i)=>"element"in t?e(s,{title:t.title,children:t.element},`${i}-${r}`):o(s,{title:t.title,children:[t.colorBox&&e(l,{"data-testid":`color-box-${t.title}`,$color:t.color}),e(n,{data:t.icon,color:t.color,size:24})]},`${i}-${r}`)))},`section-${t.sectionName}`)))})]})};d.displayName="TopBar.Guidelines";export{d as Guidelines};

package/dist/esm/components/Navigation/TopBar/Guidelines/Item.js

@@ -0,0 +1,6 @@
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import{Typography as r}from"@equinor/eds-core-react";import{spacings as i}from"../../../../style/spacings.js";import o from"styled-components";const n=o.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: ${i.medium_small};
+`,s=({title:i,children:o})=>t(n,{children:[o,e(r,{variant:"caption",children:i})]});export{s as default};

package/dist/esm/components/Navigation/TopBar/Guidelines/Section.js

@@ -0,0 +1,19 @@
+import{jsxs as e,jsx as i}from"react/jsx-runtime";import{Typography as t}from"@equinor/eds-core-react";import{spacings as o}from"../../../../style/spacings.js";import n from"styled-components";const r=n.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${o.medium};
+  > p {
+    padding-left: ${o.medium};
+    padding-top: ${o.small};
+  }
+
+  > section {
+    display: flex;
+    flex-direction: column;
+    gap: ${o.medium};
+    margin-left: ${o.medium};
+    overflow: auto;
+    height: fit-content;
+    max-height: 66vh;
+  }
+`,d=({title:o,children:n})=>e(r,{"data-testid":"guidelines-section",children:[i(t,{variant:"overline",children:o}),i("section",{children:n})]});export{d as default};

package/dist/esm/components/Navigation/TopBar/Guidelines/index.js

@@ -0,0 +1 @@
+import o from"./Colorbox.js";import{Guidelines as r}from"./Guidelines.js";const s=r;s.Colorbox=o;export{s as default};

package/dist/esm/components/Navigation/TopBar/Notifications/FilterOptions.js

@@ -0,0 +1,36 @@
+import{jsxs as e,Fragment as i,jsx as r}from"react/jsx-runtime";import{useState as o,useRef as n}from"react";import{Menu as t,Typography as a,Icon as l}from"@equinor/eds-core-react";import{filter_list as c,sort as d,checkbox as s,checkbox_outline as m}from"@equinor/eds-icons";import{tokens as p}from"../../../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{SortNotification as h,FilterNotification as u}from"./NotificationsTemplate/Notifications.types.js";import g from"styled-components";const{spacings:f,colors:b,shape:_}=p,E=g(t.Item)`
+  display: flex;
+`,v=g.div`
+  display: flex;
+  gap: ${f.comfortable.small};
+  padding: ${f.comfortable.medium};
+`,k=g(t)`
+  padding: ${f.comfortable.small} 0;
+`,$=g.div`
+  padding: ${f.comfortable.small} ${f.comfortable.large};
+`,S=g.span`
+  font-family: 'Equionor', sans-serif;
+  font-size: 12px;
+  border-radius: ${_.rounded.borderRadius};
+  border: ${({$active:e})=>e?`solid 1px ${b.interactive.primary__selected_hover.rgba}`:`solid 1px ${b.ui.background__medium.rgba}`};
+  background-color: ${({$active:e})=>e?b.interactive.primary__selected_highlight.rgba:b.ui.background__default.rgba};
+  color: black;
+  padding: ${f.comfortable.x_small} ${f.comfortable.small};
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  grid-gap: ${f.comfortable.small};
+  cursor: pointer;
+  &:hover {
+    background: ${b.interactive.primary__selected_highlight.rgba};
+  }
+
+  > p {
+    line-height: normal;
+    height: min-content;
+    font-size: 12px;
+  }
+  > svg {
+    color: ${({$active:e})=>e?b.text.static_icons__default.rgba:b.interactive.primary__resting.rgba};
+  }
+`,C=({onFilter:t,onSort:p,sortMenuRef:g,filterMenuRef:f})=>{const[b,_]=o(!1),[C,N]=o(!1),x=n(null),y=n(null),[O,D]=o({[h.UNREAD]:!1,[h.OLD_NEWEST]:!1,[h.NEW_OLDEST]:!1}),[R,U]=o({[u.SYSTEM]:!1,[u.USER]:!1,[u.UNREAD]:!1}),M=()=>{_(!1)},T=()=>{N(!1)},A=e=>{t(R[e]?[]:[e]),U((i=>({...i,[e]:!i[e]})))},L=e=>{p(O[e]?[]:[e]),D((i=>({...i,[e]:!i[e]})))};return e(i,{children:[e(v,{children:[e(S,{onClick:()=>b?M():(_(!0),void N(!1)),ref:x,$active:b,children:[r(a,{group:"ui",variant:"chip__badge",children:"Filter by"}),r(l,{data:c,size:16})]}),e(S,{onClick:()=>C?T():(N(!0),void _(!1)),ref:y,$active:C,children:[r(a,{group:"ui",variant:"chip__badge",children:"Sort by"}),r(l,{data:d,size:16})]})]}),b&&e(k,{open:b,anchorEl:x.current,placement:"bottom-start",ref:f,onClose:M,children:[r($,{children:r(a,{group:"navigation",variant:"label",children:"Filter notifications"})}),e(E,{onClick:()=>A(u.USER),closeMenuOnClick:!1,children:[r(l,{data:R[u.USER]?s:m}),r(a,{children:" User messages "})]}),e(E,{onClick:()=>A(u.SYSTEM),closeMenuOnClick:!1,children:[r(l,{data:R[u.SYSTEM]?s:m}),r(a,{children:" System messages "})]}),e(E,{onClick:()=>A(u.UNREAD),closeMenuOnClick:!1,children:[r(l,{data:R[u.UNREAD]?s:m}),r(a,{children:" Unread "})]})]}),C&&e(k,{open:C,anchorEl:y.current,placement:"bottom-start",ref:g,onClose:T,children:[r($,{children:r(a,{group:"navigation",variant:"label",children:"Sort notifications"})}),e(E,{onClick:()=>L(h.NEW_OLDEST),closeMenuOnClick:!1,children:[r(l,{data:O[h.NEW_OLDEST]?s:m}),r(a,{children:" Newest to oldest "})]}),e(E,{onClick:()=>L(h.OLD_NEWEST),closeMenuOnClick:!1,children:[r(l,{data:O[h.OLD_NEWEST]?s:m}),r(a,{children:" Oldest to newest "})]}),e(E,{onClick:()=>L(h.UNREAD),closeMenuOnClick:!1,children:[r(l,{data:O[h.UNREAD]?s:m}),r(a,{children:" Unread"})]})]})]})};export{C as default};

package/dist/esm/components/Navigation/TopBar/Notifications/NotificationProvider.js

@@ -0,0 +1 @@
+import{jsx as r}from"react/jsx-runtime";import{createContext as t,useContext as e,useState as i}from"react";const o=t(void 0),n=()=>{const r=e(o);if(void 0===r)throw new Error("useNotificationContext must be used within a Notification provider");return r},s=({children:t})=>{const[e,n]=i(!1);return r(o.Provider,{value:{isOpen:e,setIsOpen:n},children:t})};export{s as default,n as useNotification};

package/dist/esm/components/Navigation/TopBar/Notifications/Notifications.js

@@ -0,0 +1 @@
+import{jsx as o}from"react/jsx-runtime";import r from"./NotificationProvider.js";import{NotificationsInner as i}from"./NotificationsInner.js";const t=t=>o(r,{children:o(i,{...t})});export{t as default};

package/dist/esm/components/Navigation/TopBar/Notifications/NotificationsInner.js

@@ -0,0 +1,8 @@
+import{useRef as t,useState as e,useMemo as i,createElement as o}from"react";import{jsxs as n,Fragment as r,jsx as s}from"react/jsx-runtime";import{Icon as a}from"@equinor/eds-core-react";import{notifications as l}from"@equinor/eds-icons";import{TopBarButton as c,UnreadRedDot as d}from"../TopBar.styles.js";import m from"./NotificationsTemplate/NotificationElements/NoNotifications.js";import{FilterNotification as f,SortNotification as p}from"./NotificationsTemplate/Notifications.types.js";import u from"./NotificationsTemplate/NotificationTemplate.js";import h from"./FilterOptions.js";import{useNotification as N}from"./NotificationProvider.js";import T from"../TopBarMenu.js";import R from"styled-components";const g=R.div`
+  display: flex;
+`,j=R.div`
+  overflow: auto;
+  height: fit-content;
+  max-height: 66vh;
+  width: 350px;
+`,E=({children:R,hasUnread:E=!1,setAllAsRead:v,showFilterOptions:S=!1,notifications:w})=>{const y=t(null),x=t(null),D=t(null),{isOpen:O,setIsOpen:A}=N(),[M,U]=e([]),[b,q]=e([]),B=i((()=>{if(!w)return[];let t=[...w];return M.length>0&&(t=t.filter((t=>M.includes(f.UNREAD)?!t.Read:M.includes(f.USER)?t.user:M.includes(f.SYSTEM)?!t.user:void 0))),b.length>0&&(t=t.sort(((t,e)=>{const i=new Date(t.time).getTime(),o=new Date(e.time).getTime();return b.includes(p.OLD_NEWEST)?o-i:b.includes(p.UNREAD)?t.Read===e.Read?0:t.Read?1:-1:i-o}))),t}),[M,w,b]),F=()=>{v(),A(!1)};return n(r,{children:[n(c,{variant:"ghost",ref:y,onClick:()=>{O?F():A(!0)},"data-testid":"show-hide-button",$isSelected:O,children:[s(a,{data:l,size:24}),E&&s(d,{"data-testid":"unread-dot"})]},"topbar-notifications"),n(T,{open:O,anchorEl:y.current,contentPadding:!1,isNotification:!0,onClose:F,children:[S&&s(g,{children:s(h,{onFilter:U,onSort:q,sortMenuRef:D,filterMenuRef:x})}),s(j,R?{children:R}:{children:B&&B?.length>0?B.map((t=>o(u,{...t,key:t.SequenceNumber}))):s(m,{})})]})]})};E.displayName="TopBar.NotificationsInner";export{E as NotificationsInner};

package/dist/esm/components/Navigation/TopBar/Notifications/NotificationsTemplate/NotificationElements/DeafultNotification.js

@@ -0,0 +1,6 @@
+import{jsx as e}from"react/jsx-runtime";import{Typography as o}from"@equinor/eds-core-react";import{tokens as t}from"../../../../../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{NotificationsTypes as i}from"../Notifications.types.js";import r from"styled-components";const{spacings:m}=t,s=r.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${m.comfortable.medium};
+  padding-top: ${m.comfortable.medium_small};
+`,a=({message:t})=>e(s,{"data-testid":i.DEFAULT,children:e(o,{group:"table",variant:"cell_text",children:t})});export{a as default};

package/dist/esm/components/Navigation/TopBar/Notifications/NotificationsTemplate/NotificationElements/ExperienceDue3Weeks.js

@@ -0,0 +1,6 @@
+import{jsxs as e,jsx as i}from"react/jsx-runtime";import{Tooltip as o,Typography as r}from"@equinor/eds-core-react";import{tokens as t}from"../../../../../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import l from"styled-components";const{spacings:n}=t,d=l.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${n.comfortable.medium};
+  padding-top: ${n.comfortable.medium_small};
+`,a=({well:t,commentsCount:l,onClick:n})=>e(d,{children:[i(o,{title:`Go to ${t.displayName}`,children:e("div",{onClick:n,children:[i(r,{group:"table",variant:"cell_text",bold:!0,children:"Experience report are due in 3 weeks"}),i(r,{group:"table",variant:"cell_text",children:t.displayName})]})}),i("div",{children:e(r,{group:"table",variant:"cell_text",children:[l," experiences"]})})]});export{a as default};

package/dist/esm/components/Navigation/TopBar/Notifications/NotificationsTemplate/NotificationElements/MergedBranchOrca.js

@@ -0,0 +1,7 @@
+import{jsx as e,jsxs as o}from"react/jsx-runtime";import{Tooltip as r,Typography as t}from"@equinor/eds-core-react";import{tokens as i}from"../../../../../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import m from"styled-components";const{spacings:a}=i,n=m.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${a.comfortable.medium};
+  padding-top: ${a.comfortable.medium_small};
+  cursor: pointer;
+`,s=({fromUser:i,branchName:m,onClick:a})=>e(n,{onClick:a,children:e(r,{title:`Go to ${m}`,children:o(t,{group:"table",variant:"cell_text",children:[i.displayName," has merged your branch ",m," to the master"]})})});export{s as default};

package/dist/esm/components/Navigation/TopBar/Notifications/NotificationsTemplate/NotificationElements/NoNotifications.js

@@ -0,0 +1,7 @@
+import{jsxs as e,jsx as o}from"react/jsx-runtime";import{Typography as i}from"@equinor/eds-core-react";import{tokens as r}from"../../../../../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import n from"../../../../../Icons/FeedBackIcon/FeedBackIcon.js";import t from"styled-components";const{spacings:m}=r,s=t.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${m.comfortable.medium};
+  align-items: center;
+  padding: ${m.comfortable.large};
+`,a=()=>e(s,{children:[o(n,{name:"positive",variant:"filled"}),o(i,{children:" No notifications "})]});export{a as default};

package/dist/esm/components/Navigation/TopBar/Notifications/NotificationsTemplate/NotificationElements/ReadyToBePublished.js

@@ -0,0 +1,5 @@
+import{jsx as e,jsxs as i}from"react/jsx-runtime";import{Tooltip as r,Typography as l}from"@equinor/eds-core-react";import{tokens as t}from"../../../../../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import o from"styled-components";const{spacings:n}=t,d=o.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${n.comfortable.medium};
+`,a=({experienceCount:t,well:o,onClick:n})=>e(r,{title:`Go to ${o.displayName}`,children:i(d,{onClick:n,children:[i("div",{children:[e(l,{group:"table",variant:"cell_text",bold:!0,children:"Experiences are ready to be published"}),e(l,{group:"table",variant:"cell_text",children:o.displayName})]}),e("div",{children:e(l,{group:"table",variant:"cell_text",children:t})})]})});export{a as default};

package/dist/esm/components/Navigation/TopBar/Notifications/NotificationsTemplate/NotificationElements/ReadyToReportNotification.js

@@ -0,0 +1,14 @@
+import{jsx as e,jsxs as i}from"react/jsx-runtime";import{Tooltip as r,Typography as t,Chip as l}from"@equinor/eds-core-react";import{tokens as o}from"../../../../../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{NotificationsTypes as a}from"../Notifications.types.js";import n from"styled-components";const{spacings:d}=o,p=n.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: ${d.comfortable.medium};
+  padding-top: ${d.comfortable.medium_small};
+`,c=n.div`
+  display: flex;
+  flex-direction: column;
+`,s=n.div`
+  grid-column: span 3;
+  display: flex;
+  gap: 5px;
+  align-items: center;
+`,m=({field:o,wellbore:n,dataType:d,onClick:m})=>e(r,{title:`Go to ${d}`,children:i(p,{onClick:m,"data-testid":a.READY_TO_REPORT,children:[i(c,{children:[e(t,{group:"paragraph",variant:"overline",children:"Field"}),e(t,{group:"table",variant:"cell_text",children:o})]}),i(c,{children:[e(t,{group:"paragraph",variant:"overline",children:"WELLBORE"}),e(t,{group:"table",variant:"cell_text",children:n})]}),i(s,{children:[i(l,{children:[" ",d," "]}),e(t,{group:"navigation",variant:"label",children:"is ready to report"})]})]})});export{m as default};

package/dist/esm/components/Navigation/TopBar/Notifications/NotificationsTemplate/NotificationElements/RequestChangeOrca.js

@@ -0,0 +1,7 @@
+import{jsx as e,jsxs as o}from"react/jsx-runtime";import{Tooltip as r,Typography as t}from"@equinor/eds-core-react";import{tokens as i}from"../../../../../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import a from"../../../../../DataDisplay/OptionalTooltip.js";import l from"styled-components";const{spacings:m}=i,n=l.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${m.comfortable.medium};
+  padding-top: ${m.comfortable.medium_small};
+  cursor: pointer;
+`,s=({fromUser:i,branchName:l,onClick:m})=>e(r,{title:`Go to ${l}`,children:e(n,{onClick:m,children:e(a,{title:`Go to ${l}`,children:o(t,{group:"table",variant:"cell_text",children:[i.displayName," has requested changes for branch ",l]})})})});export{s as default};

package/dist/esm/components/Navigation/TopBar/Notifications/NotificationsTemplate/NotificationElements/RequestReviewOrca.js

@@ -0,0 +1,7 @@
+import{jsx as e,jsxs as o}from"react/jsx-runtime";import{Tooltip as t,Typography as i}from"@equinor/eds-core-react";import{tokens as r}from"../../../../../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{NotificationsTypes as a}from"../Notifications.types.js";import s from"../../../../../DataDisplay/OptionalTooltip.js";import m from"styled-components";const{spacings:l}=r,n=m.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${l.comfortable.medium};
+  padding-top: ${l.comfortable.medium_small};
+  cursor: pointer;
+`,d=({fromUser:r,branchName:m,onClick:l})=>e(t,{title:`Go to ${m}`,children:e(n,{onClick:l,"data-testid":a.REQUESTED_REVIEW,children:e(s,{title:`Go to ${m}`,children:o(i,{group:"table",variant:"cell_text",children:[r.displayName," has requested review for branch ",m]})})})});export{d as default};