@equinor/amplify-component-lib 9.16.0-beta.0 → 9.16.0-beta.1

package/dist/molecules/Select/Select.styles.js

@@ -1,61 +1,61 @@
-import{VARIANT_COLORS as e,VARIANT_HELPER_TEXT_COLORS as t}from"src/atoms/style/colors";import n,{css as r}from"styled-components";import{Button as i,Menu as a,Typography as o}from"@equinor/eds-core-react";import{animation as s,colors as c,spacings as l}from"src/atoms/style";import{Chip as u}from"src/molecules/Chip/Chip";n.div`
+import{animation as e}from"../../atoms/style/animation.js";import{VARIANT_COLORS as t,VARIANT_HELPER_TEXT_COLORS as n,colors as r}from"../../atoms/style/colors.js";import{spacings as i}from"../../atoms/style/spacings.js";import{Chip as a}from"../Chip/Chip.js";import{Button as o,Menu as s,Typography as c}from"@equinor/eds-core-react";import l,{css as u}from"styled-components";const d=l.div`
   display: flex;
   flex-direction: column;
-  gap: ${l.small};
-`,n.span`
+  gap: ${i.small};
+`,f=l.span`
   display: flex;
-  gap: ${l.small};
+  gap: ${i.small};
   align-items: center;
-  margin-left: ${l.small};
-  width: calc(100% - ${l.small});
+  margin-left: ${i.small};
+  width: calc(100% - ${i.small});
   > label {
     margin: 0;
   }
-  ${({$variant:e})=>e?r`
+  ${({$variant:e})=>e?u`
       > label {
-        color: ${e===`disabled`?c.interactive.disabled__text.rgba:t[e]};
+        color: ${e===`disabled`?r.interactive.disabled__text.rgba:n[e]};
       }
       > svg {
         flex-shrink: 0;
-        fill: ${e===`disabled`?c.interactive.disabled__text.rgba:t[e]};
+        fill: ${e===`disabled`?r.interactive.disabled__text.rgba:n[e]};
       }
     `:``}
-`,n.div`
+`,p=l.div`
   position: relative;
   display: grid;
   grid-template-columns: 1fr auto;
   align-items: center;
   padding: 6px 8px;
   transition:
-    background ${s.transitionMS},
-    box-shadow ${s.transitionMS};
+    background ${e.transitionMS},
+    box-shadow ${e.transitionMS};
   &:hover:not(:has(input:disabled)) {
     cursor: pointer;
-    background: ${c.ui.background__light_medium.rgba};
+    background: ${r.ui.background__light_medium.rgba};
   }
 
-  ${({$variant:t})=>t?t===`dirty`?r`
-        box-shadow: inset 0 -2px 0 0 ${e[t]};
+  ${({$variant:e})=>e?e===`dirty`?u`
+        box-shadow: inset 0 -2px 0 0 ${t[e]};
         &:hover {
-          box-shadow: inset 0 -2px 0 0 ${e[t]};
+          box-shadow: inset 0 -2px 0 0 ${t[e]};
         }
-      `:r`
-      outline: 1px solid ${e[t]};
+      `:u`
+      outline: 1px solid ${t[e]};
       &:hover {
-        box-shadow: inset 0 -1px 0 0 ${e[t]};
+        box-shadow: inset 0 -1px 0 0 ${t[e]};
       }
-    `:r`
-        box-shadow: inset 0 -1px 0 0 ${c.text.static_icons__tertiary.rgba};
+    `:u`
+        box-shadow: inset 0 -1px 0 0 ${r.text.static_icons__tertiary.rgba};
         &:hover {
           box-shadow: inset 0 -2px 0 0
-            ${c.text.static_icons__tertiary.rgba};
+            ${r.text.static_icons__tertiary.rgba};
         }
       `}
 
-  ${({$lightBackground:e})=>e?`background-color: ${c.ui.background__default.rgba}`:`background-color: ${c.ui.background__light.rgba}`};
+  ${({$lightBackground:e})=>e?`background-color: ${r.ui.background__default.rgba}`:`background-color: ${r.ui.background__light.rgba}`};
 
   &[aria-expanded='true'] {
-    box-shadow: inset 0 -2px 0 0 ${c.interactive.primary__resting.rgba};
+    box-shadow: inset 0 -2px 0 0 ${r.interactive.primary__resting.rgba};
   }
 
   > svg[role='progressbar'] {
@@ -64,7 +64,7 @@ import{VARIANT_COLORS as e,VARIANT_HELPER_TEXT_COLORS as t}from"src/atoms/style/
   > svg:not([role='progressbar']) {
     cursor: pointer;
     &:hover {
-      background: ${c.interactive.primary__hover_alt.rgba};
+      background: ${r.interactive.primary__hover_alt.rgba};
       border-radius: 50%;
     }
   }
@@ -72,16 +72,16 @@ import{VARIANT_COLORS as e,VARIANT_HELPER_TEXT_COLORS as t}from"src/atoms/style/
   &:has(input:disabled) {
     outline: none;
     cursor: not-allowed;
-    box-shadow: inset 0 -1px 0 0 ${c.interactive.disabled__text.rgba} !important;
+    box-shadow: inset 0 -1px 0 0 ${r.interactive.disabled__text.rgba} !important;
     > svg:not([role='progressbar']) {
       cursor: not-allowed;
-      fill: ${c.interactive.disabled__text.rgba};
+      fill: ${r.interactive.disabled__text.rgba};
       &:hover {
         background: transparent;
       }
     }
     > label {
-      color: ${c.interactive.disabled__text.rgba};
+      color: ${r.interactive.disabled__text.rgba};
     }
   }
 
@@ -90,11 +90,11 @@ import{VARIANT_COLORS as e,VARIANT_HELPER_TEXT_COLORS as t}from"src/atoms/style/
       width: calc(100% - 24px);
     }
   }
-`,n.section`
+`,m=l.section`
   position: relative;
   display: flex;
   flex-wrap: wrap;
-  gap: ${l.x_small};
+  gap: ${i.x_small};
   min-height: 24px;
   input[type='search'] {
     background: transparent;
@@ -102,7 +102,7 @@ import{VARIANT_COLORS as e,VARIANT_HELPER_TEXT_COLORS as t}from"src/atoms/style/
     flex-grow: 1;
     padding: 0;
     font-family: 'Equinor', sans-serif;
-    color: ${c.text.static_icons__default.rgba};
+    color: ${r.text.static_icons__default.rgba};
     outline: none;
     border: none;
   }
@@ -117,14 +117,14 @@ import{VARIANT_COLORS as e,VARIANT_HELPER_TEXT_COLORS as t}from"src/atoms/style/
   }
   &:has(input:disabled) {
     > p {
-      color: ${c.interactive.disabled__text.rgba};
+      color: ${r.interactive.disabled__text.rgba};
     }
     > .amplify-combo-box-chip {
       cursor: not-allowed;
-      background: ${c.interactive.disabled__fill.rgba};
-      color: ${c.interactive.disabled__text.rgba};
+      background: ${r.interactive.disabled__fill.rgba};
+      color: ${r.interactive.disabled__text.rgba};
       > svg {
-        fill: ${c.interactive.disabled__text.rgba};
+        fill: ${r.interactive.disabled__text.rgba};
         &:hover {
           cursor: not-allowed;
           background: none;
@@ -132,7 +132,7 @@ import{VARIANT_COLORS as e,VARIANT_HELPER_TEXT_COLORS as t}from"src/atoms/style/
       }
     }
   }
-`,n(i)`
+`,h=l(o)`
   position: absolute;
   top: 50%;
   transform: translate(0, -50%);
@@ -140,16 +140,16 @@ import{VARIANT_COLORS as e,VARIANT_HELPER_TEXT_COLORS as t}from"src/atoms/style/
   width: 24px;
   height: 24px;
   svg {
-    fill: ${c.text.static_icons__secondary.rgba};
+    fill: ${r.text.static_icons__secondary.rgba};
   }
   &:after {
     width: 24px;
     height: 24px;
     left: 0;
   }
-`;const d=n(u)`
-  background: ${({$tryingToRemove:e,$lightBackground:t})=>e?c.interactive.primary__hover_alt.rgba:t?c.ui.background__light.rgba:c.ui.background__default.rgba} !important;
-`;n(a.Item)`
+`,g=l(a)`
+  background: ${({$tryingToRemove:e,$lightBackground:t})=>e?r.interactive.primary__hover_alt.rgba:t?r.ui.background__light.rgba:r.ui.background__default.rgba} !important;
+`,_=l(s.Item)`
   flex-grow: 1;
   ${({$paddedLeft:e})=>e&&`margin-left: 36px`};
   padding-left: 10px;
@@ -160,43 +160,43 @@ import{VARIANT_COLORS as e,VARIANT_HELPER_TEXT_COLORS as t}from"src/atoms/style/
   }
 
   &:hover {
-    background: ${c.interactive.primary__hover_alt.rgba};
+    background: ${r.interactive.primary__hover_alt.rgba};
   }
 
   &:focus-visible {
-    outline: 2px dashed ${c.interactive.primary__resting.rgba};
+    outline: 2px dashed ${r.interactive.primary__resting.rgba};
   }
 
-    ${({$selected:e})=>e?r`
-            background: ${c.interactive.primary__selected_highlight.rgba};
+    ${({$selected:e})=>e?u`
+            background: ${r.interactive.primary__selected_highlight.rgba};
 
             &:hover {
-              background: ${c.interactive.primary__selected_hover.rgba};
+              background: ${r.interactive.primary__selected_hover.rgba};
             }
           `:``}}
-`,n.hr`
-  height: calc(100% + ${l.medium} * 2);
+`,v=l.hr`
+  height: calc(100% + ${i.medium} * 2);
   justify-self: center;
-  width: ${l.x_large};
-  min-width: ${l.x_large};
-`;const f=n(o)`
+  width: ${i.x_large};
+  min-width: ${i.x_large};
+`,y=l(c)`
   user-select: none;
   pointer-events: none;
   position: absolute;
-  color: ${c.text.static_icons__tertiary.rgba};
+  color: ${r.text.static_icons__tertiary.rgba};
   top: calc(50%);
   transform: translate(0, -50%);
-`;n(f)`
+`,b=l(y)`
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: ${c.text.static_icons__default.rgba};
+  color: ${r.text.static_icons__default.rgba};
   max-width: 100%;
-`,n(o)`
-  margin: ${l.medium};
-`,n(o)`
-  margin-left: ${l.medium};
-`,n(a)`
+`,x=l(c)`
+  margin: ${i.medium};
+`,S=l(c)`
+  margin-left: ${i.medium};
+`,C=l(s)`
   max-height: 20rem;
   max-width: inherit;
   overflow-y: auto;
@@ -204,10 +204,10 @@ import{VARIANT_COLORS as e,VARIANT_HELPER_TEXT_COLORS as t}from"src/atoms/style/
     width: inherit;
     max-width: inherit;
   }
-`,n.div`
+`,w=l.div`
   display: flex;
   align-items: center;
-`,n(i)`
+`,T=l(o)`
   width: 36px;
   height: 36px;
-`;export{d as ComboBoxChip};
+`;export{h as ClearButton,g as ComboBoxChip,p as Container,f as HelperWrapper,v as MenuItemSpacer,w as MenuItemWrapper,S as NoItemsFoundText,x as NoTagFoundText,y as PlaceholderText,m as Section,T as SmallButton,C as StyledMenu,_ as StyledMenuItem,b as ValueText,d as Wrapper};

package/dist/molecules/Select/Select.utils.js

@@ -0,0 +1 @@
+function e(t,n){let r=t.length,i=t.slice(0,n).map(t=>e(t.children??[],0)).reduce((e,t)=>e+t,0);return r+i}const t=e=>{let t=e=>{if(!e?.length)return[];let n=e.flatMap(({children:e,value:t})=>e?.map(e=>({...e,parent:t}))??[]);return[...n,...t(n)]};return[...e,...t(e)]},n=e=>{let t=Array(e.length).fill(0);for(let n=1;n<e.length;n++)t[n]=t[n-1]+e[n-1];return t};export{t as flattenOptions,e as getChildOffset,n as getCumulativeArrayFromNumberedArray};

package/dist/molecules/Select/SelectMenuItem.js

@@ -0,0 +1 @@
+import{tokens as e}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{spacings as t}from"../../atoms/style/spacings.js";import{getChildOffset as n}from"./Select.utils.js";import{MenuItemSpacer as r,MenuItemWrapper as i,SmallButton as a,StyledMenuItem as o}from"./Select.styles.js";import{getParentIcon as s,getParentState as c}from"./SelectMenuItem.utils.js";import{useMemo as l,useRef as u,useState as d}from"react";import{Icon as f}from"@equinor/eds-core-react";import{Fragment as p,jsx as m,jsxs as h}from"react/jsx-runtime";import{checkbox as g,checkbox_outline as _,chevron_down as v,chevron_right as y}from"@equinor/eds-icons";const{colors:b}=e,x=e=>{let{index:S,childOffset:C,depth:w=0,item:T,itemRefs:E,onItemKeyDown:D,onItemSelect:O,parentHasNestedItems:k=!1,CustomMenuItemComponent:A}=e,[j,M]=d(!1),N=u(-1),P=u([]),F=(`values`in e?e.values.map(({value:e})=>e):[]).includes(T.value),I=l(()=>`value`in e?_:s(T,e.values),[T,e]),L=l(()=>`value`in e?`none`:c(T,e.values),[T,e]),R=l(()=>Array(w).fill(0).map((e,t)=>m(r,{},`spacer-${e+t}`)),[w]),z=e=>{e.preventDefault(),O(T)},B=e=>{e.stopPropagation(),M(e=>!e)},V=e=>{e.key===`ArrowDown`?N.current+=1:e.key===`ArrowUp`&&--N.current,N.current<=-1?(E.current[S]?.focus(),N.current=-1):N.current+C===P.current.length?(N.current=-1,D(e),M(!1)):N.current>=0&&N.current<P.current.length-C&&P.current[N.current+C]?.focus()},H=e=>{!j&&e.key===`ArrowDown`||e.key===`ArrowUp`?D(e):e.key===`ArrowRight`||e.key===`ArrowLeft`?M(e=>!e):j&&e.key===`ArrowDown`&&N.current===-1&&(N.current=0,P.current[N.current+C]?.focus())};return T.children&&T.children.length>0&&`values`in e?h(p,{children:[h(i,{style:{paddingLeft:w===0?t.small:0},children:[R,m(a,{variant:`ghost_icon`,onClick:B,"data-testid":`toggle-button`,children:m(f,{color:b.interactive.primary__resting.rgba,data:j?v:y})}),m(o,{$depth:w,ref:e=>{E.current[S]=e},index:S,closeMenuOnClick:!1,onKeyDownCapture:H,onClick:z,children:A?m(A,{item:T,selectedState:L}):h(p,{children:[m(f,{color:b.interactive.primary__resting.rgba,data:I}),m(`span`,{children:T.label})]})})]}),j&&T.children.map((t,r)=>m(x,{index:C+r,childOffset:C+n(T.children,r),depth:w+1,item:t,itemRefs:P,values:e.values,onItemKeyDown:V,onItemSelect:O,parentHasNestedItems:!0,CustomMenuItemComponent:A},`child-${r}-${t.value}-${T.value}`))]}):`values`in e?h(i,{children:[R,m(o,{$depth:w,$paddedLeft:k,ref:e=>{E.current[S]=e},index:S,tabIndex:w,closeMenuOnClick:!1,onKeyDownCapture:D,onClick:z,children:A?m(A,{item:T,selectedState:F?`selected`:`none`}):h(p,{children:[m(f,{color:b.interactive.primary__resting.rgba,data:F?g:_}),m(`span`,{children:T.label})]})})]}):m(i,{children:m(o,{$depth:w,$selected:e.value&&T.value===e.value.value,ref:e=>{E.current[S]=e},index:S,onKeyDownCapture:D,onClick:z,children:A?m(A,{item:T,selectedState:e.value&&T.value===e.value.value?`selected`:`none`}):m(`span`,{children:T.label})})})};export{x as SelectMenuItem};

package/dist/molecules/Select/SelectMenuItem.utils.js

@@ -0,0 +1 @@
+import{flattenOptions as e}from"./Select.utils.js";import{checkbox as t,checkbox_indeterminate as n,checkbox_outline as r}from"@equinor/eds-icons";const i={selected:t,indeterminate:n,none:r};function a(e,t){let n=o(e,t);return i[n]}function o(t,n){if(!t.children||t.children.length===0)return`none`;let r=n.some(e=>e.value===t.value),i=n.map(({value:e})=>e),a=e([t])?.map(({value:e})=>e);return r?`selected`:a.some(e=>i.includes(e))?`indeterminate`:`none`}export{a as getParentIcon,o as getParentState};

package/dist/molecules/Select/SingleSelect/SingleSelect.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{Select as t}from"src/molecules/Select/Select";function n(n){return e(t,{...n})}export{n as SingleSelect};
+import{Select as e}from"../Select.js";import{jsx as t}from"react/jsx-runtime";function n(n){return t(e,{...n})}export{n as SingleSelect};

package/dist/molecules/SelectionControls/Checkbox/Checkbox.d.ts

@@ -1,4 +1,4 @@
-import * as react89 from "react";
+import * as react92 from "react";
 import { CheckboxProps } from "@equinor/eds-core-react";
 
 //#region src/molecules/SelectionControls/Checkbox/Checkbox.d.ts
@@ -7,6 +7,6 @@ interface CheckboxProps$1 extends CheckboxProps {
   outlined?: boolean;
   error?: boolean;
 }
-declare const Checkbox$1: react89.ForwardRefExoticComponent<CheckboxProps$1 & react89.RefAttributes<HTMLInputElement>>;
+declare const Checkbox$1: react92.ForwardRefExoticComponent<CheckboxProps$1 & react92.RefAttributes<HTMLInputElement>>;
 //#endregion
 export { Checkbox$1 as Checkbox, CheckboxProps$1 as CheckboxProps };

package/dist/molecules/SelectionControls/Checkbox/Checkbox.js

@@ -1 +1 @@
-import{Wrapper as e}from"../SelectionControls.styles.js";import{forwardRef as t}from"react";import{jsx as n}from"react/jsx-runtime";import{Checkbox as r}from"@equinor/eds-core-react";const i=t((t,i)=>{let{outlined:a,error:o,...s}=t;return n(e,{$outlined:a||!1,$error:o,children:n(r,{ref:i,...s})})});i.displayName=`Checkbox`;export{i as Checkbox};
+import{Wrapper as e}from"../SelectionControls.styles.js";import{forwardRef as t}from"react";import{Checkbox as n}from"@equinor/eds-core-react";import{jsx as r}from"react/jsx-runtime";const i=t((t,i)=>{let{outlined:a,error:o,...s}=t;return r(e,{$outlined:a||!1,$error:o,children:r(n,{ref:i,...s})})});i.displayName=`Checkbox`;export{i as Checkbox};

package/dist/molecules/SelectionControls/Radio/Radio.d.ts

@@ -1,4 +1,4 @@
-import * as react93 from "react";
+import * as react94 from "react";
 import { RadioProps } from "@equinor/eds-core-react";
 
 //#region src/molecules/SelectionControls/Radio/Radio.d.ts
@@ -7,6 +7,6 @@ interface RadioProps$1 extends RadioProps {
   outlined?: boolean;
   error?: boolean;
 }
-declare const Radio$1: react93.ForwardRefExoticComponent<RadioProps$1 & react93.RefAttributes<HTMLInputElement>>;
+declare const Radio$1: react94.ForwardRefExoticComponent<RadioProps$1 & react94.RefAttributes<HTMLInputElement>>;
 //#endregion
 export { Radio$1 as Radio, RadioProps$1 as RadioProps };

package/dist/molecules/SelectionControls/Radio/Radio.js

@@ -1 +1 @@
-import{Wrapper as e}from"../SelectionControls.styles.js";import{forwardRef as t}from"react";import{jsx as n}from"react/jsx-runtime";import{Radio as r}from"@equinor/eds-core-react";const i=t((t,i)=>{let{outlined:a,error:o,...s}=t;return n(e,{$outlined:a||!1,$error:o,children:n(r,{ref:i,...s,checked:s.checked?!0:void 0})})});i.displayName=`Radio`;export{i as Radio};
+import{Wrapper as e}from"../SelectionControls.styles.js";import{forwardRef as t}from"react";import{Radio as n}from"@equinor/eds-core-react";import{jsx as r}from"react/jsx-runtime";const i=t((t,i)=>{let{outlined:a,error:o,...s}=t;return r(e,{$outlined:a||!1,$error:o,children:r(n,{ref:i,...s,checked:s.checked?!0:void 0})})});i.displayName=`Radio`;export{i as Radio};

package/dist/molecules/SelectionControls/SelectionControls.styles.js

@@ -1,9 +1,9 @@
-import e,{css as t}from"styled-components";import{animation as n,colors as r,shape as i,spacings as a}from"src/atoms/style";const o=e.span`
+import{animation as e}from"../../atoms/style/animation.js";import{colors as t}from"../../atoms/style/colors.js";import{spacings as n}from"../../atoms/style/spacings.js";import{shape as r}from"../../atoms/style/index.js";import i,{css as a}from"styled-components";const o=i.span`
   > label {
-    padding: ${a.x_small} ${a.medium_small};
-    border-radius: ${i.button.borderRadius};
-    transition: background ${n.transitionMS};
-    gap: ${a.small};
+    padding: ${n.x_small} ${n.medium_small};
+    border-radius: ${r.button.borderRadius};
+    transition: background ${e.transitionMS};
+    gap: ${n.small};
     min-height: 36px;
     > span:first-child {
       padding: 0;
@@ -11,13 +11,13 @@ import e,{css as t}from"styled-components";import{animation as n,colors as r,sha
       aspect-ratio: 1;
     }
     > span[class*='Switch']:last-child {
-      padding: 0 ${a.medium_small} 0 0;
+      padding: 0 ${n.medium_small} 0 0;
     }
   }
 
   &.switch > label {
-    padding: 0 ${a.x_small} 0 ${a.medium_small};
-    gap: ${a.small};
+    padding: 0 ${n.x_small} 0 ${n.medium_small};
+    gap: ${n.small};
 
     > span:first-child {
       height: 36px;
@@ -41,21 +41,21 @@ import e,{css as t}from"styled-components";import{animation as n,colors as r,sha
     background: transparent !important;
   }
   svg {
-    transition: fill ${n.transitionMS};
+    transition: fill ${e.transitionMS};
   }
   input:not(:checked) {
     ~ svg {
-      fill: ${({$error:e})=>e?r.interactive.danger__resting.rgba:r.text.static_icons__tertiary.rgba};
+      fill: ${({$error:e})=>e?t.interactive.danger__resting.rgba:t.text.static_icons__tertiary.rgba};
       &:hover {
-        fill: ${({$error:e})=>e?r.interactive.danger__hover.rgba:r.text.static_icons__default.rgba};
+        fill: ${({$error:e})=>e?t.interactive.danger__hover.rgba:t.text.static_icons__default.rgba};
       }
     }
   }
-  ${({$error:e})=>e?t`
+  ${({$error:e})=>e?a`
         input ~ svg {
-          fill: ${r.interactive.danger__resting.rgba};
+          fill: ${t.interactive.danger__resting.rgba};
           &:hover {
-            fill: ${r.interactive.danger__hover.rgba};
+            fill: ${t.interactive.danger__hover.rgba};
           }
         }
       `:``}
@@ -65,43 +65,43 @@ import e,{css as t}from"styled-components";import{animation as n,colors as r,sha
     > span
     > span
     > span:last-child:not([class*='SwitchSmall']) {
-    background: ${r.interactive.primary__resting.rgba};
+    background: ${t.interactive.primary__resting.rgba};
   }
   > label:has(input)
     > span
     > span
     > span:last-child:not([class*='SwitchSmall']) {
-    background: ${r.text.static_icons__tertiary.rgba};
+    background: ${t.text.static_icons__tertiary.rgba};
   }
 
   > label:hover:not(:has(input:disabled)) {
-    background: ${({$error:e})=>e?r.interactive.danger__highlight.rgba:r.interactive.primary__hover_alt.rgba};
+    background: ${({$error:e})=>e?t.interactive.danger__highlight.rgba:t.interactive.primary__hover_alt.rgba};
     svg {
-      fill: ${({$error:e})=>e?r.interactive.danger__hover.rgba:r.text.static_icons__default.rgba};
+      fill: ${({$error:e})=>e?t.interactive.danger__hover.rgba:t.text.static_icons__default.rgba};
     }
   }
 
   > label:focus:not(:hover):not(:has(input:disabled)) {
-    outline: 1px dashed ${r.interactive.primary__resting.rgba};
+    outline: 1px dashed ${t.interactive.primary__resting.rgba};
     outline-offset: -1px;
   }
 
   &:has(input:disabled) {
     span:last-child {
-      color: ${r.interactive.disabled__text.rgba};
+      color: ${t.interactive.disabled__text.rgba};
     }
     svg {
-      fill: ${r.interactive.disabled__text.rgba};
+      fill: ${t.interactive.disabled__text.rgba};
     }
   }
 
-  ${({$outlined:e})=>{if(e)return t`
+  ${({$outlined:e})=>{if(e)return a`
         > label {
-          outline: 1px solid ${r.ui.background__medium.rgba};
+          outline: 1px solid ${t.ui.background__medium.rgba};
         }
         &:has(input:disabled) {
           svg {
-            fill: ${r.interactive.disabled__border.rgba};
+            fill: ${t.interactive.disabled__border.rgba};
           }
         }
       `}}

package/dist/molecules/SelectionControls/Switch/Switch.d.ts

@@ -1,10 +1,10 @@
-import * as react95 from "react";
+import * as react96 from "react";
 import { SwitchProps } from "@equinor/eds-core-react";
 
 //#region src/molecules/SelectionControls/Switch/Switch.d.ts
 interface SwitchProps$1 extends SwitchProps {
   outlined?: boolean;
 }
-declare const Switch$1: react95.ForwardRefExoticComponent<SwitchProps$1 & react95.RefAttributes<HTMLInputElement>>;
+declare const Switch$1: react96.ForwardRefExoticComponent<SwitchProps$1 & react96.RefAttributes<HTMLInputElement>>;
 //#endregion
 export { Switch$1 as Switch, SwitchProps$1 as SwitchProps };

package/dist/molecules/SelectionControls/Switch/Switch.js

@@ -1 +1 @@
-import{Wrapper as e}from"../SelectionControls.styles.js";import{forwardRef as t}from"react";import{jsx as n}from"react/jsx-runtime";import{Switch as r}from"@equinor/eds-core-react";const i=t((t,i)=>{let{outlined:a,...o}=t;return n(e,{$outlined:a||!1,className:`switch`,children:n(r,{ref:i,...o})})});i.displayName=`Switch`;export{i as Switch};
+import{Wrapper as e}from"../SelectionControls.styles.js";import{forwardRef as t}from"react";import{Switch as n}from"@equinor/eds-core-react";import{jsx as r}from"react/jsx-runtime";const i=t((t,i)=>{let{outlined:a,...o}=t;return r(e,{$outlined:a||!1,className:`switch`,children:r(n,{ref:i,...o})})});i.displayName=`Switch`;export{i as Switch};

package/dist/molecules/SingleFilterMenu/SingleFilterMenu.js

@@ -1,20 +1,20 @@
-import{tokens as e}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import t,{useState as n}from"react";import{jsx as r,jsxs as i}from"react/jsx-runtime";import{filter_list as a}from"@equinor/eds-icons";import o from"styled-components";import{Button as s,Chip as c,Icon as l,Menu as u,Typography as d}from"@equinor/eds-core-react";import{spacings as f}from"src/atoms/style";const{colors:p}=e,m=o.div`
+import{tokens as e}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{spacings as t}from"../../atoms/style/spacings.js";import n,{useState as r}from"react";import{Button as i,Chip as a,Icon as o,Menu as s,Typography as c}from"@equinor/eds-core-react";import l from"styled-components";import{jsx as u,jsxs as d}from"react/jsx-runtime";import{filter_list as f}from"@equinor/eds-icons";const{colors:p}=e,m=l.div`
   margin-left: auto;
   display: flex;
   align-items: center;
   gap: 25px;
-`,h=o(c)`
+`,h=l(a)`
   background: ${e=>e.$backgroundColor};
-`,g=o(s)`
+`,g=l(i)`
   justify-self: flex-end;
-`,_=o(u)`
+`,_=l(s)`
   overflow-y: auto;
-`,v=o.div`
-  padding: ${f.medium};
-  padding-left: ${f.large};
-`,y=o(u.Item)`
+`,v=l.div`
+  padding: ${t.medium};
+  padding-left: ${t.large};
+`,y=l(s.Item)`
   &:focus {
     outline: none;
     background: ${p.ui.background__light.rgba};
   }
-`,b=({onChange:e,customIcon:t,menuTitle:o,data:s,showChip:c=!1,chipColor:u=p.ui.background__default.rgba})=>{let[f,b]=n(!1),[x,S]=n(null),[C,w]=n(),T=e=>{let t=e.target;S(t),b(!f)},E=()=>b(!1),D=t=>{b(!1),C===t?(w(void 0),e(void 0)):(w(t),e(t))},O=()=>{E(),e(void 0),w(void 0)};return i(m,{children:[c&&C&&r(h,{"data-testid":`chip`,onDelete:O,variant:`default`,$backgroundColor:u,children:C}),r(g,{"data-testid":`menuButton`,variant:`ghost_icon`,onClick:e=>T(e),children:r(l,{data:t??a})}),i(_,{open:f,anchorEl:x,onClose:E,placement:`bottom-end`,"data-testid":`menuContainer`,children:[r(v,{children:r(d,{group:`navigation`,variant:`label`,children:o})}),s.map((e,t)=>r(y,{onClick:()=>D(e),disabled:C===e&&c,active:C===e&&!c,children:r(d,{group:`navigation`,variant:`menu_title`,as:`span`,children:e})},e+t))]})]})};b.displayName=`SingleFilterMenu`;export{b as SingleFilterMenu};
+`,b=({onChange:e,customIcon:t,menuTitle:n,data:i,showChip:a=!1,chipColor:s=p.ui.background__default.rgba})=>{let[l,b]=r(!1),[x,S]=r(null),[C,w]=r(),T=e=>{let t=e.target;S(t),b(!l)},E=()=>b(!1),D=t=>{b(!1),C===t?(w(void 0),e(void 0)):(w(t),e(t))},O=()=>{E(),e(void 0),w(void 0)};return d(m,{children:[a&&C&&u(h,{"data-testid":`chip`,onDelete:O,variant:`default`,$backgroundColor:s,children:C}),u(g,{"data-testid":`menuButton`,variant:`ghost_icon`,onClick:e=>T(e),children:u(o,{data:t??f})}),d(_,{open:l,anchorEl:x,onClose:E,placement:`bottom-end`,"data-testid":`menuContainer`,children:[u(v,{children:u(c,{group:`navigation`,variant:`label`,children:n})}),i.map((e,t)=>u(y,{onClick:()=>D(e),disabled:C===e&&a,active:C===e&&!a,children:u(c,{group:`navigation`,variant:`menu_title`,as:`span`,children:e})},e+t))]})]})};b.displayName=`SingleFilterMenu`;export{b as SingleFilterMenu};

package/dist/molecules/Skeleton/Skeleton.styles.js

@@ -0,0 +1 @@
+import{colors as e}from"../../atoms/style/colors.js";const t={START:e.interactive.disabled__border.rgba,END:e.interactive.disabled__text.rgba};export{t as COLORS};

package/dist/molecules/Skeleton/SkeletonBase/SkeletonBase.d.ts

@@ -1,4 +1,4 @@
-import * as react38 from "react";
+import * as react41 from "react";
 import * as styled_components_dist_types6 from "styled-components/dist/types";
 import * as styled_components_dist_models_Keyframes0 from "styled-components/dist/models/Keyframes";
 
@@ -7,6 +7,6 @@ declare const skeletonBaseloading: styled_components_dist_models_Keyframes0.defa
 interface SkeletonBaseProps {
   $offset?: number;
 }
-declare const SkeletonBase: styled_components_dist_types6.IStyledComponentBase<"web", styled_components_dist_types6.Substitute<react38.DetailedHTMLProps<react38.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SkeletonBaseProps>> & string;
+declare const SkeletonBase: styled_components_dist_types6.IStyledComponentBase<"web", styled_components_dist_types6.Substitute<react41.DetailedHTMLProps<react41.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SkeletonBaseProps>> & string;
 //#endregion
 export { SkeletonBase, SkeletonBaseProps, skeletonBaseloading };

package/dist/molecules/Skeleton/SkeletonBase/SkeletonBase.js

@@ -1,18 +1,18 @@
-import e,{css as t,keyframes as n}from"styled-components";import{COLORS as r}from"src/molecules/Skeleton/Skeleton.styles";const i=n`
+import{COLORS as e}from"../Skeleton.styles.js";import t,{css as n,keyframes as r}from"styled-components";const i=r`
   to {
     transform: translateX(100%);
   }
-`,a=e.div`
-  background: ${r.START};
+`,a=t.div`
+  background: ${e.START};
   overflow: hidden;
   position: relative;
   z-index: 2;
   &:after {
     background: linear-gradient(
       90deg,
-      ${r.START} 0%,
-      ${r.END} 50%,
-      ${r.START} 100%
+      ${e.START} 0%,
+      ${e.END} 50%,
+      ${e.START} 100%
     );
     animation: ${i} 1.5s infinite;
     content: '';
@@ -23,7 +23,7 @@ import e,{css as t,keyframes as n}from"styled-components";import{COLORS as r}fro
     top: 0;
     transform: translateX(-100%);
     z-index: 1;
-    ${e=>e.$offset&&t`
+    ${e=>e.$offset&&n`
         animation-delay: ${e.$offset}ms;
       `};
   }

package/dist/molecules/Skeleton/SkeletonField.js

@@ -0,0 +1,8 @@
+import{spacings as e}from"../../atoms/style/spacings.js";import{shape as t}from"../../atoms/style/index.js";import{SkeletonBase as n}from"./SkeletonBase/SkeletonBase.js";import r from"styled-components";const i=r(n)`
+  position: absolute;
+  left: ${e.small};
+  border-radius: ${t.corners.borderRadius};
+  transform: translateY(${e.x_small});
+  height: 100%;
+  top: 0;
+`;export{i as SkeletonField};

package/dist/molecules/Skeleton/SkeletonGradient/SkeletonGradient.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{COLORS as n}from"src/molecules/Skeleton/Skeleton.styles";const r=({duration:r=`1.5s`})=>t(`linearGradient`,{id:`skeleton-gradient`,x1:`0%`,x2:`100%`,gradientTransform:`translate(-0.1)`,children:[e(`stop`,{stopColor:n.START,offset:`0%`}),e(`stop`,{stopColor:n.END,offset:`50%`}),e(`stop`,{stopColor:n.START,offset:`100%`}),e(`animateTransform`,{attributeName:`gradientTransform`,type:`translate`,begin:`0s`,dur:r,repeatCount:`indefinite`,values:`-1; 1; 1`})]});export{r as SkeletonGradient};
+import{COLORS as e}from"../Skeleton.styles.js";import{jsx as t,jsxs as n}from"react/jsx-runtime";const r=({duration:r=`1.5s`})=>n(`linearGradient`,{id:`skeleton-gradient`,x1:`0%`,x2:`100%`,gradientTransform:`translate(-0.1)`,children:[t(`stop`,{stopColor:e.START,offset:`0%`}),t(`stop`,{stopColor:e.END,offset:`50%`}),t(`stop`,{stopColor:e.START,offset:`100%`}),t(`animateTransform`,{attributeName:`gradientTransform`,type:`translate`,begin:`0s`,dur:r,repeatCount:`indefinite`,values:`-1; 1; 1`})]});export{r as SkeletonGradient};

package/dist/molecules/Stepper/Step/Step.js

@@ -1,15 +1,15 @@
-import{useMemo as e}from"react";import{jsx as t,jsxs as n}from"react/jsx-runtime";import{useStepper as r}from"src/providers/StepperProvider";import i,{css as a}from"styled-components";import{Typography as o}from"@equinor/eds-core-react";import{colors as s,spacings as c}from"src/atoms/style";import{StepIcon as l}from"src/molecules/Stepper/Step/StepIcon";const u=i.div`
+import{colors as e}from"../../../atoms/style/colors.js";import{spacings as t}from"../../../atoms/style/spacings.js";import{useStepper as n}from"../../../providers/StepperProvider.js";import{StepIcon as r}from"./StepIcon.js";import{useMemo as i}from"react";import{Typography as a}from"@equinor/eds-core-react";import o,{css as s}from"styled-components";import{jsx as c,jsxs as l}from"react/jsx-runtime";const u=o.div`
   display: flex;
-  gap: ${c.small};
+  gap: ${t.small};
   align-items: center;
   white-space: nowrap;
-  ${({$disabled:e,$clickable:t})=>e?a`
+  ${({$disabled:e,$clickable:t})=>e?s`
           &:hover {
             cursor: not-allowed;
           }
-        `:t&&a`
+        `:t&&s`
           &:hover {
             cursor: pointer;
           }
         `}
-`,d=({index:i,onlyShowCurrentStepLabel:a=!1,children:c})=>{let{currentStep:d,setCurrentStep:f,isStepAtIndexDisabled:p}=r(),m=p(i),h=e(()=>i<d?`body_short`:`body_short_bold`,[d,i]),g=e(()=>i>d||m?s.interactive.disabled__text.rgba:s.text.static_icons__default.rgba,[d,i,m]),_=()=>{i<d&&!m&&f(i)};return n(u,{"data-testid":`step`,$clickable:i<d,onClick:_,$disabled:m,"aria-disabled":m,role:`button`,children:[t(l,{index:i,disabled:m}),(!a||d===i)&&t(o,{variant:h,color:g,children:c})]})};export{d as Step};
+`,d=({index:t,onlyShowCurrentStepLabel:o=!1,children:s})=>{let{currentStep:d,setCurrentStep:f,isStepAtIndexDisabled:p}=n(),m=p(t),h=i(()=>t<d?`body_short`:`body_short_bold`,[d,t]),g=i(()=>t>d||m?e.interactive.disabled__text.rgba:e.text.static_icons__default.rgba,[d,t,m]),_=()=>{t<d&&!m&&f(t)};return l(u,{"data-testid":`step`,$clickable:t<d,onClick:_,$disabled:m,"aria-disabled":m,role:`button`,children:[c(r,{index:t,disabled:m}),(!o||d===t)&&c(a,{variant:h,color:g,children:s})]})};export{d as Step};

package/dist/molecules/Stepper/Step/StepIcon.js

@@ -0,0 +1,19 @@
+import{colors as e}from"../../../atoms/style/colors.js";import{shape as t}from"../../../atoms/style/index.js";import{useStepper as n}from"../../../providers/StepperProvider.js";import{Icon as r,Typography as i}from"@equinor/eds-core-react";import a from"styled-components";import{jsx as o}from"react/jsx-runtime";import{check as s,lock as c}from"@equinor/eds-icons";const l=a.span`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 22px;
+  height: 22px;
+  border-radius: ${t.circle.borderRadius};
+  border: 2px solid
+    ${({$filled:t,$outlined:n})=>t??n?e.interactive.primary__resting.rgba:e.interactive.disabled__text.rgba};
+  background: ${({$filled:t})=>t?e.interactive.primary__resting.rgba:`none`};
+  > p {
+    // Ensure text icons are not squished
+    padding: 8px;
+    color: ${t=>t.$filled?e.text.static_icons__primary_white.rgba:e.interactive.disabled__text.rgba};
+  }
+  > svg {
+    transform: scale(0.9);
+  }
+`,u=({index:t,disabled:a})=>{let{currentStep:u}=n();return a?o(r,{data:c,color:e.interactive.disabled__text.rgba}):t>=u?o(l,{$filled:t===u,children:o(i,{variant:`caption`,children:t+1})}):o(l,{$outlined:!0,"data-testid":`wrapper`,children:o(r,{data:s,color:e.interactive.primary__resting.rgba})})};export{u as StepIcon};

package/dist/molecules/Stepper/StepLine.js

@@ -1,7 +1,7 @@
-import{tokens as e}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{useMemo as t}from"react";import{jsx as n}from"react/jsx-runtime";import r from"styled-components";const{colors:i}=e,a=r.hr`
+import{tokens as e}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{useMemo as t}from"react";import n from"styled-components";import{jsx as r}from"react/jsx-runtime";const{colors:i}=e,a=n.hr`
   height: 1px;
   width: 100%;
   background: ${e=>e.$background};
   border: none;
   margin: 0;
-`,o=({done:e})=>{let r=t(()=>e?i.interactive.primary__resting.rgba:i.interactive.disabled__text.rgba,[e]);return n(a,{$background:r})};export{o as StepLine};
+`,o=({done:e})=>{let n=t(()=>e?i.interactive.primary__resting.rgba:i.interactive.disabled__text.rgba,[e]);return r(a,{$background:n})};export{o as StepLine};