@sats-group/ui-lib 85.3.7 → 85.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sats-group/ui-lib",
-  "version": "85.3.7",
+  "version": "85.4.0",
   "description": "SATS web user interface library",
   "author": "developer@sats.no",
   "license": "UNLICENSED",

package/react/components.js

@@ -1,2 +1,2 @@
-const e=["badge","banner","bomb","button","checkbox","chip","chip-selected","collapse","confirmation","context-menu","cropped-image","div-button","dropdown-list","expander","filter","filter-wrapper","flag","form-content","hidden-input","link","link-button","link-card","message","message-field","modal","pagination","progress-bar","radio","scale-bar","search","select","select-option","tag","text","text-area","text-input","toggle","toolbox","visually-button","visually-hidden"],t=[".badge",".banner",".bomb",".button",".checkbox",".chip",".chip-selected",".collapse",".confirmation",".context-menu",".cropped-image",".div-button",".dropdown-list",".expander",".filter",".filter-wrapper",".flag",".form-content",".hidden-input",".link",".link-button",".link-card",".message",".message-field",".modal",".pagination",".progress-bar",".radio",".scale-bar",".search",".select",".select-option",".tag",".text",".text-area",".text-input",".toggle",".toolbox",".visually-button",".visually-hidden"];export{e as names,t as selectors};
+const e=["badge","banner","bomb","button","checkbox","chip","chip-selected","collapse","confirmation","context-menu","cropped-image","div-button","dropdown-list","expander","filter","filter-wrapper","flag","form-content","hidden-input","link","link-button","link-card","message","message-field","modal","navigation-card","pagination","progress-bar","radio","scale-bar","search","select","select-option","tag","text","text-area","text-input","toggle","toolbox","visually-button","visually-hidden"],t=[".badge",".banner",".bomb",".button",".checkbox",".chip",".chip-selected",".collapse",".confirmation",".context-menu",".cropped-image",".div-button",".dropdown-list",".expander",".filter",".filter-wrapper",".flag",".form-content",".hidden-input",".link",".link-button",".link-card",".message",".message-field",".modal",".navigation-card",".pagination",".progress-bar",".radio",".scale-bar",".search",".select",".select-option",".tag",".text",".text-area",".text-input",".toggle",".toolbox",".visually-button",".visually-hidden"];export{e as names,t as selectors};
 //# sourceMappingURL=components.js.map

package/react/components.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../react/components.ts"],
-  "sourcesContent": ["export const names = [\n  'badge',\n  'banner',\n  'bomb',\n  'button',\n  'checkbox',\n  'chip',\n  'chip-selected',\n  'collapse',\n  'confirmation',\n  'context-menu',\n  'cropped-image',\n  'div-button',\n  'dropdown-list',\n  'expander',\n  'filter',\n  'filter-wrapper',\n  'flag',\n  'form-content',\n  'hidden-input',\n  'link',\n  'link-button',\n  'link-card',\n  'message',\n  'message-field',\n  'modal',\n  'pagination',\n  'progress-bar',\n  'radio',\n  'scale-bar',\n  'search',\n  'select',\n  'select-option',\n  'tag',\n  'text',\n  'text-area',\n  'text-input',\n  'toggle',\n  'toolbox',\n  'visually-button',\n  'visually-hidden',\n];\n\nexport const selectors = [\n  '.badge',\n  '.banner',\n  '.bomb',\n  '.button',\n  '.checkbox',\n  '.chip',\n  '.chip-selected',\n  '.collapse',\n  '.confirmation',\n  '.context-menu',\n  '.cropped-image',\n  '.div-button',\n  '.dropdown-list',\n  '.expander',\n  '.filter',\n  '.filter-wrapper',\n  '.flag',\n  '.form-content',\n  '.hidden-input',\n  '.link',\n  '.link-button',\n  '.link-card',\n  '.message',\n  '.message-field',\n  '.modal',\n  '.pagination',\n  '.progress-bar',\n  '.radio',\n  '.scale-bar',\n  '.search',\n  '.select',\n  '.select-option',\n  '.tag',\n  '.text',\n  '.text-area',\n  '.text-input',\n  '.toggle',\n  '.toolbox',\n  '.visually-button',\n  '.visually-hidden',\n];\n"],
-  "mappings": "AAAO,MAAMA,EAAQ,CACnB,QACA,SACA,OACA,SACA,WACA,OACA,gBACA,WACA,eACA,eACA,gBACA,aACA,gBACA,WACA,SACA,iBACA,OACA,eACA,eACA,OACA,cACA,YACA,UACA,gBACA,QACA,aACA,eACA,QACA,YACA,SACA,SACA,gBACA,MACA,OACA,YACA,aACA,SACA,UACA,kBACA,iBACF,EAEaC,EAAY,CACvB,SACA,UACA,QACA,UACA,YACA,QACA,iBACA,YACA,gBACA,gBACA,iBACA,cACA,iBACA,YACA,UACA,kBACA,QACA,gBACA,gBACA,QACA,eACA,aACA,WACA,iBACA,SACA,cACA,gBACA,SACA,aACA,UACA,UACA,iBACA,OACA,QACA,aACA,cACA,UACA,WACA,mBACA,kBACF",
+  "sourcesContent": ["export const names = [\n  'badge',\n  'banner',\n  'bomb',\n  'button',\n  'checkbox',\n  'chip',\n  'chip-selected',\n  'collapse',\n  'confirmation',\n  'context-menu',\n  'cropped-image',\n  'div-button',\n  'dropdown-list',\n  'expander',\n  'filter',\n  'filter-wrapper',\n  'flag',\n  'form-content',\n  'hidden-input',\n  'link',\n  'link-button',\n  'link-card',\n  'message',\n  'message-field',\n  'modal',\n  'navigation-card',\n  'pagination',\n  'progress-bar',\n  'radio',\n  'scale-bar',\n  'search',\n  'select',\n  'select-option',\n  'tag',\n  'text',\n  'text-area',\n  'text-input',\n  'toggle',\n  'toolbox',\n  'visually-button',\n  'visually-hidden',\n];\n\nexport const selectors = [\n  '.badge',\n  '.banner',\n  '.bomb',\n  '.button',\n  '.checkbox',\n  '.chip',\n  '.chip-selected',\n  '.collapse',\n  '.confirmation',\n  '.context-menu',\n  '.cropped-image',\n  '.div-button',\n  '.dropdown-list',\n  '.expander',\n  '.filter',\n  '.filter-wrapper',\n  '.flag',\n  '.form-content',\n  '.hidden-input',\n  '.link',\n  '.link-button',\n  '.link-card',\n  '.message',\n  '.message-field',\n  '.modal',\n  '.navigation-card',\n  '.pagination',\n  '.progress-bar',\n  '.radio',\n  '.scale-bar',\n  '.search',\n  '.select',\n  '.select-option',\n  '.tag',\n  '.text',\n  '.text-area',\n  '.text-input',\n  '.toggle',\n  '.toolbox',\n  '.visually-button',\n  '.visually-hidden',\n];\n"],
+  "mappings": "AAAO,MAAMA,EAAQ,CACnB,QACA,SACA,OACA,SACA,WACA,OACA,gBACA,WACA,eACA,eACA,gBACA,aACA,gBACA,WACA,SACA,iBACA,OACA,eACA,eACA,OACA,cACA,YACA,UACA,gBACA,QACA,kBACA,aACA,eACA,QACA,YACA,SACA,SACA,gBACA,MACA,OACA,YACA,aACA,SACA,UACA,kBACA,iBACF,EAEaC,EAAY,CACvB,SACA,UACA,QACA,UACA,YACA,QACA,iBACA,YACA,gBACA,gBACA,iBACA,cACA,iBACA,YACA,UACA,kBACA,QACA,gBACA,gBACA,QACA,eACA,aACA,WACA,iBACA,SACA,mBACA,cACA,gBACA,SACA,aACA,UACA,UACA,iBACA,OACA,QACA,aACA,cACA,UACA,WACA,mBACA,kBACF",
   "names": ["names", "selectors"]
 }

package/react/filter-wrapper/filter-wrapper.js

@@ -1,2 +1,2 @@
-var n=Object.defineProperty,s=Object.defineProperties;var d=Object.getOwnPropertyDescriptors;var t=Object.getOwnPropertySymbols;var f=Object.prototype.hasOwnProperty,w=Object.prototype.propertyIsEnumerable;var m=(r,e,p)=>e in r?n(r,e,{enumerable:!0,configurable:!0,writable:!0,value:p}):r[e]=p,i=(r,e)=>{for(var p in e||(e={}))f.call(e,p)&&m(r,p,e[p]);if(t)for(var p of t(e))w.call(e,p)&&m(r,p,e[p]);return r},o=(r,e)=>s(r,d(e));import c from"classnames";import a from"react";import g from"../filter/filter";import{BreakAtElements as l}from"./filter-wrapper.types";const u=({filters:r})=>a.createElement("div",{className:c("filter-wrapper",{"filter-wrapper--medium":r.length<=l.medium,"filter-wrapper--wide":r.length>=l.wide,"filter-wrapper--single":r.length===1})},r.map((e,p)=>a.createElement(g,o(i({},e),{key:p}))));var W=u;export{W as default};
+var n=Object.defineProperty,s=Object.defineProperties;var d=Object.getOwnPropertyDescriptors;var m=Object.getOwnPropertySymbols;var f=Object.prototype.hasOwnProperty,w=Object.prototype.propertyIsEnumerable;var t=(e,r,p)=>r in e?n(e,r,{enumerable:!0,configurable:!0,writable:!0,value:p}):e[r]=p,i=(e,r)=>{for(var p in r||(r={}))f.call(r,p)&&t(e,p,r[p]);if(m)for(var p of m(r))w.call(r,p)&&t(e,p,r[p]);return e},o=(e,r)=>s(e,d(r));import c from"classnames";import a from"react";import u from"../filter/filter";import{BreakAtElements as l}from"./filter-wrapper.types";const F=({filters:e})=>a.createElement("div",{className:c("filter-wrapper",{"filter-wrapper--medium":e.length<=l.medium,"filter-wrapper--wide":e.length>=l.wide})},e.map((r,p)=>a.createElement(u,o(i({},r),{key:p}))));var W=F;export{W as default};
 //# sourceMappingURL=filter-wrapper.js.map

package/react/filter-wrapper/filter-wrapper.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/filter-wrapper/filter-wrapper.tsx"],
-  "sourcesContent": ["import classNames from 'classnames';\nimport React from 'react';\nimport Filter from '../filter/filter';\n\nimport {\n  FilterWrapper as Props,\n  BreakAtElements,\n} from './filter-wrapper.types';\n\nconst FilterWrapper: React.FunctionComponent<Props> = ({ filters }) => (\n  <div\n    className={classNames('filter-wrapper', {\n      [`filter-wrapper--medium`]: filters.length <= BreakAtElements.medium,\n      [`filter-wrapper--wide`]: filters.length >= BreakAtElements.wide,\n      [`filter-wrapper--single`]: filters.length === 1,\n    })}\n  >\n    {filters.map((filter, i) => (\n      <Filter {...filter} key={i} />\n    ))}\n  </div>\n);\n\nexport default FilterWrapper;\n"],
-  "mappings": "6aAAA,OAAOA,MAAgB,aACvB,OAAOC,MAAW,QAClB,OAAOC,MAAY,mBAEnB,OAEE,mBAAAC,MACK,yBAEP,MAAMC,EAAgD,CAAC,CAAE,QAAAC,CAAQ,IAC/DJ,EAAA,cAAC,OACC,UAAWD,EAAW,iBAAkB,CACrC,yBAA2BK,EAAQ,QAAUF,EAAgB,OAC7D,uBAAyBE,EAAQ,QAAUF,EAAgB,KAC3D,yBAA2BE,EAAQ,SAAW,CACjD,CAAC,GAEAA,EAAQ,IAAI,CAACC,EAAQC,IACpBN,EAAA,cAACC,EAAAM,EAAAC,EAAA,GAAWH,GAAX,CAAmB,IAAKC,GAAG,CAC7B,CACH,EAGF,IAAOG,EAAQN",
+  "sourcesContent": ["import classNames from 'classnames';\nimport React from 'react';\nimport Filter from '../filter/filter';\n\nimport {\n  FilterWrapper as Props,\n  BreakAtElements,\n} from './filter-wrapper.types';\n\nconst FilterWrapper: React.FunctionComponent<Props> = ({ filters }) => (\n  <div\n    className={classNames('filter-wrapper', {\n      [`filter-wrapper--medium`]: filters.length <= BreakAtElements.medium,\n      [`filter-wrapper--wide`]: filters.length >= BreakAtElements.wide,\n    })}\n  >\n    {filters.map((filter, i) => (\n      <Filter {...filter} key={i} />\n    ))}\n  </div>\n);\n\nexport default FilterWrapper;\n"],
+  "mappings": "6aAAA,OAAOA,MAAgB,aACvB,OAAOC,MAAW,QAClB,OAAOC,MAAY,mBAEnB,OAEE,mBAAAC,MACK,yBAEP,MAAMC,EAAgD,CAAC,CAAE,QAAAC,CAAQ,IAC/DJ,EAAA,cAAC,OACC,UAAWD,EAAW,iBAAkB,CACrC,yBAA2BK,EAAQ,QAAUF,EAAgB,OAC7D,uBAAyBE,EAAQ,QAAUF,EAAgB,IAC9D,CAAC,GAEAE,EAAQ,IAAI,CAACC,EAAQC,IACpBN,EAAA,cAACC,EAAAM,EAAAC,EAAA,GAAWH,GAAX,CAAmB,IAAKC,GAAG,CAC7B,CACH,EAGF,IAAOG,EAAQN",
   "names": ["classNames", "React", "Filter", "BreakAtElements", "FilterWrapper", "filters", "filter", "i", "__spreadProps", "__spreadValues", "filter_wrapper_default"]
 }

package/react/filter-wrapper/filter-wrapper.scss

@@ -5,10 +5,8 @@
   $breakpointMedium: 850px;
   $breakpointSmall: 500px;
   width: 100%;
-
   display: grid;
   gap: spacing.$s;
-  width: 100%;
 
   &--wide {
     @media (min-width: $breakpointLarge) {
@@ -20,12 +18,6 @@
   }
 
   &--medium {
-    &--single {
-      > * + * {
-        max-width: 430px;
-        width: 100%;
-      }
-    }
     @media (min-width: $breakpointMedium) {
       grid-template-columns: repeat(
         auto-fit,
@@ -37,10 +29,4 @@
   @media (max-width: $breakpointSmall) {
     gap: 0;
   }
-
-  &--single {
-    > * {
-      width: 430px;
-    }
-  }
 }

package/react/icons/32/info.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const SvgInfo: () => React.JSX.Element;
+export default SvgInfo;

package/react/icons/32/info.js

@@ -0,0 +1,2 @@
+import*as l from"react";const o=()=>l.createElement("svg",{width:32,height:32,viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},l.createElement("path",{fill:"currentColor",fillRule:"evenodd",d:"M1.926 8a6.074 6.074 0 1 0 12.148 0A6.074 6.074 0 0 0 1.926 8M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1",clipRule:"evenodd"}),l.createElement("path",{fill:"currentColor",d:"M8.523 11.038v-3.61a.588.588 0 1 0-1.176 0v3.61a.588.588 0 0 0 1.176 0M7.935 5.854a.74.74 0 1 0 0-1.48.74.74 0 0 0 0 1.48"}));var e=o;export{e as default};
+//# sourceMappingURL=info.js.map

package/react/icons/32/info.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../react/icons/32/info.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nconst SvgInfo = () => (\n  <svg\n    width={32}\n    height={32}\n    viewBox=\"0 0 16 16\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n      d=\"M1.926 8a6.074 6.074 0 1 0 12.148 0A6.074 6.074 0 0 0 1.926 8M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1\"\n      clipRule=\"evenodd\"\n    />\n    <path\n      fill=\"currentColor\"\n      d=\"M8.523 11.038v-3.61a.588.588 0 1 0-1.176 0v3.61a.588.588 0 0 0 1.176 0M7.935 5.854a.74.74 0 1 0 0-1.48.74.74 0 0 0 0 1.48\"\n    />\n  </svg>\n);\nexport default SvgInfo;\n"],
+  "mappings": "AAAA,UAAYA,MAAW,QACvB,MAAMC,EAAU,IACdD,EAAA,cAAC,OACC,MAAO,GACP,OAAQ,GACR,QAAQ,YACR,KAAK,OACL,MAAM,8BAENA,EAAA,cAAC,QACC,KAAK,eACL,SAAS,UACT,EAAE,iGACF,SAAS,UACX,EACAA,EAAA,cAAC,QACC,KAAK,eACL,EAAE,4HACJ,CACF,EAEF,IAAOE,EAAQD",
+  "names": ["React", "SvgInfo", "info_default"]
+}

package/react/navigation-card/index.d.ts

@@ -0,0 +1,2 @@
+import NavigationCard from './navigation-card';
+export default NavigationCard;

package/react/navigation-card/index.js

@@ -0,0 +1,2 @@
+import a from"./navigation-card";var r=a;export{r as default};
+//# sourceMappingURL=index.js.map

package/react/navigation-card/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../react/navigation-card/index.ts"],
+  "sourcesContent": ["import NavigationCard from './navigation-card';\nexport default NavigationCard;\n"],
+  "mappings": "AAAA,OAAOA,MAAoB,oBAC3B,IAAOC,EAAQD",
+  "names": ["NavigationCard", "navigation_card_default"]
+}

package/react/navigation-card/navigation-card.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { NavigationCard as Props } from './navigation-card.types';
+declare const NavigationCard: React.FunctionComponent<Props>;
+export default NavigationCard;

package/react/navigation-card/navigation-card.js

@@ -0,0 +1,2 @@
+import i from"../text/text";import l from"classnames";import a from"react";const m=({data:o,description:d,errors:v,href:s,icon:t,tall:r,title:e})=>a.createElement("a",{"aria-disabled":!s,className:l("navigation-card",{"navigation-card--disabled":!s,"navigation-card--enabled":!!s,"navigation-card--tall":r}),href:s,tabIndex:s?0:-1},a.createElement("div",{className:"navigation-card__text"},a.createElement("div",{className:"navigation-card__title"},t?a.createElement("div",{className:"navigation-card__icon"},t):null,a.createElement(i,{theme:i.themes.emphasis,tight:!0},e)),a.createElement("div",{className:"navigation-card__text-group"},o.map(n=>a.createElement("div",{className:"navigation-card__data",key:n},a.createElement(i,{size:i.sizes.small},n))),v.map(n=>a.createElement("div",{className:"navigation-card__error",key:n},a.createElement(i,{size:i.sizes.small},n)))),d?a.createElement("div",{className:"navigation-card__description"},a.createElement(i,{size:i.sizes.small},d)):null));var c=m;export{c as default};
+//# sourceMappingURL=navigation-card.js.map

package/react/navigation-card/navigation-card.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../react/navigation-card/navigation-card.tsx"],
+  "sourcesContent": ["import Text from '../text/text';\nimport cn from 'classnames';\nimport React from 'react';\nimport type { NavigationCard as Props } from './navigation-card.types';\n\nconst NavigationCard: React.FunctionComponent<Props> = ({\n  data,\n  description,\n  errors,\n  href,\n  icon,\n  tall,\n  title,\n}) => (\n  <a\n    aria-disabled={!href}\n    className={cn('navigation-card', {\n      'navigation-card--disabled': !href,\n      'navigation-card--enabled': !!href,\n      'navigation-card--tall': tall,\n    })}\n    href={href}\n    tabIndex={href ? 0 : -1}\n  >\n    <div className=\"navigation-card__text\">\n      <div className=\"navigation-card__title\">\n        {icon ? <div className=\"navigation-card__icon\">{icon}</div> : null}\n        <Text theme={Text.themes.emphasis} tight>\n          {title}\n        </Text>\n      </div>\n      <div className=\"navigation-card__text-group\">\n        {data.map(d => (\n          <div className=\"navigation-card__data\" key={d}>\n            <Text size={Text.sizes.small}>{d}</Text>\n          </div>\n        ))}\n        {errors.map(e => (\n          <div className=\"navigation-card__error\" key={e}>\n            <Text size={Text.sizes.small}>{e}</Text>\n          </div>\n        ))}\n      </div>\n      {description ? (\n        <div className=\"navigation-card__description\">\n          <Text size={Text.sizes.small}>{description}</Text>\n        </div>\n      ) : null}\n    </div>\n  </a>\n);\n\nexport default NavigationCard;\n"],
+  "mappings": "AAAA,OAAOA,MAAU,eACjB,OAAOC,MAAQ,aACf,OAAOC,MAAW,QAGlB,MAAMC,EAAiD,CAAC,CACtD,KAAAC,EACA,YAAAC,EACA,OAAAC,EACA,KAAAC,EACA,KAAAC,EACA,KAAAC,EACA,MAAAC,CACF,IACER,EAAA,cAAC,KACC,gBAAe,CAACK,EAChB,UAAWN,EAAG,kBAAmB,CAC/B,4BAA6B,CAACM,EAC9B,2BAA4B,CAAC,CAACA,EAC9B,wBAAyBE,CAC3B,CAAC,EACD,KAAMF,EACN,SAAUA,EAAO,EAAI,IAErBL,EAAA,cAAC,OAAI,UAAU,yBACbA,EAAA,cAAC,OAAI,UAAU,0BACZM,EAAON,EAAA,cAAC,OAAI,UAAU,yBAAyBM,CAAK,EAAS,KAC9DN,EAAA,cAACF,EAAA,CAAK,MAAOA,EAAK,OAAO,SAAU,MAAK,IACrCU,CACH,CACF,EACAR,EAAA,cAAC,OAAI,UAAU,+BACZE,EAAK,IAAIO,GACRT,EAAA,cAAC,OAAI,UAAU,wBAAwB,IAAKS,GAC1CT,EAAA,cAACF,EAAA,CAAK,KAAMA,EAAK,MAAM,OAAQW,CAAE,CACnC,CACD,EACAL,EAAO,IAAIM,GACVV,EAAA,cAAC,OAAI,UAAU,yBAAyB,IAAKU,GAC3CV,EAAA,cAACF,EAAA,CAAK,KAAMA,EAAK,MAAM,OAAQY,CAAE,CACnC,CACD,CACH,EACCP,EACCH,EAAA,cAAC,OAAI,UAAU,gCACbA,EAAA,cAACF,EAAA,CAAK,KAAMA,EAAK,MAAM,OAAQK,CAAY,CAC7C,EACE,IACN,CACF,EAGF,IAAOQ,EAAQV",
+  "names": ["Text", "cn", "React", "NavigationCard", "data", "description", "errors", "href", "icon", "tall", "title", "d", "e", "navigation_card_default"]
+}

package/react/navigation-card/navigation-card.scss

@@ -0,0 +1,80 @@
+@use '../../tokens/colours';
+@use '../../tokens/corner-radius';
+@use '../../tokens/spacing';
+
+.navigation-card {
+  @mixin break {
+    @media (min-width: 500px) {
+      @content;
+    }
+  }
+
+  align-content: start;
+  align-items: start;
+  display: grid;
+  background: var(--surface-primary-default);
+  border: 1px solid var(--ge-border-default);
+  border-radius: corner-radius.$s;
+  gap: spacing.$m;
+  padding: spacing.$m;
+  text-align: center;
+  text-decoration: none;
+  width: 100%;
+
+  @include break {
+    padding: spacing.$l;
+  }
+
+  &--disabled {
+    background: var(--surface-primary-disabled);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  &--enabled {
+    transition: all 0.2s ease-in-out;
+    @media (hover: hover) {
+      &:hover {
+        background: var(--surface-primary-hover);
+      }
+    }
+  }
+
+  &--tall {
+    height: 100%;
+  }
+
+  &__icon {
+    place-self: center;
+  }
+
+  &__text {
+    display: grid;
+    gap: spacing.$m;
+  }
+
+  &__text-group {
+    display: grid;
+    gap: spacing.$xs;
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  &__title {
+    color: var(--on-surface-primary-default);
+  }
+
+  &__data {
+    color: var(--on-surface-primary-default);
+  }
+
+  &__error {
+    color: var(--on-surface-error);
+  }
+
+  &__description {
+    color: var(--on-surface-primary-alternate);
+  }
+}

package/react/navigation-card/navigation-card.types.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+export type NavigationCard = {
+    data: string[];
+    description?: string;
+    errors: string[];
+    href?: string;
+    icon?: ReactElement;
+    tall?: boolean;
+    title: string;
+};

package/react/navigation-card/navigation-card.types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=navigation-card.types.js.map

package/react/navigation-card/navigation-card.types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/react/style.scss

@@ -18,6 +18,7 @@
 @use "./message/message.scss";
 @use "./message-field/message-field.scss";
 @use "./modal/modal.scss";
+@use "./navigation-card/navigation-card.scss";
 @use "./pagination/pagination.scss";
 @use "./progress-bar/progress-bar.scss";
 @use "./radio/radio.scss";