rk-designsystem 1.1.57 → 1.1.59

package/dist/componentlibrary.umd.js

@@ -1,25 +1,32 @@
-(function(C,w){typeof exports=="object"&&typeof module<"u"?w(exports,require("react"),require("@digdir/designsystemet-react"),require("date-fns"),require("@navikt/aksel-icons")):typeof define=="function"&&define.amd?define(["exports","react","@digdir/designsystemet-react","date-fns","@navikt/aksel-icons"],w):(C=typeof globalThis<"u"?globalThis:C||self,w(C.ComponentLibrary={},C.React,C.designsystemetReact,C.dateFns,C.akselIcons))})(this,(function(C,w,L,$,de){"use strict";var _e={exports:{}},ye={};/**
- * @license React
- * react-jsx-runtime.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */var Qe;function Ot(){if(Qe)return ye;Qe=1;var t=Symbol.for("react.transitional.element"),e=Symbol.for("react.fragment");function n(s,i,a){var o=null;if(a!==void 0&&(o=""+a),i.key!==void 0&&(o=""+i.key),"key"in i){a={};for(var d in i)d!=="key"&&(a[d]=i[d])}else a=i;return i=a.ref,{$$typeof:t,type:s,key:o,ref:i!==void 0?i:null,props:a}}return ye.Fragment=e,ye.jsx=n,ye.jsxs=n,ye}var xe={};/**
- * @license React
- * react-jsx-runtime.development.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */var et;function Ht(){return et||(et=1,process.env.NODE_ENV!=="production"&&(function(){function t(c){if(c==null)return null;if(typeof c=="function")return c.$$typeof===z?null:c.displayName||c.name||null;if(typeof c=="string")return c;switch(c){case v:return"Fragment";case m:return"Profiler";case p:return"StrictMode";case P:return"Suspense";case I:return"SuspenseList";case G:return"Activity"}if(typeof c=="object")switch(typeof c.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),c.$$typeof){case b:return"Portal";case N:return c.displayName||"Context";case T:return(c._context.displayName||"Context")+".Consumer";case F:var _=c.render;return c=c.displayName,c||(c=_.displayName||_.name||"",c=c!==""?"ForwardRef("+c+")":"ForwardRef"),c;case B:return _=c.displayName||null,_!==null?_:t(c.type)||"Memo";case M:_=c._payload,c=c._init;try{return t(c(_))}catch{}}return null}function e(c){return""+c}function n(c){try{e(c);var _=!1}catch{_=!0}if(_){_=console;var R=_.error,W=typeof Symbol=="function"&&Symbol.toStringTag&&c[Symbol.toStringTag]||c.constructor.name||"Object";return R.call(_,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",W),e(c)}}function s(c){if(c===v)return"<>";if(typeof c=="object"&&c!==null&&c.$$typeof===M)return"<...>";try{var _=t(c);return _?"<"+_+">":"<...>"}catch{return"<...>"}}function i(){var c=K.A;return c===null?null:c.getOwner()}function a(){return Error("react-stack-top-frame")}function o(c){if(O.call(c,"key")){var _=Object.getOwnPropertyDescriptor(c,"key").get;if(_&&_.isReactWarning)return!1}return c.key!==void 0}function d(c,_){function R(){Z||(Z=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",_))}R.isReactWarning=!0,Object.defineProperty(c,"key",{get:R,configurable:!0})}function l(){var c=t(this.type);return se[c]||(se[c]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),c=this.props.ref,c!==void 0?c:null}function u(c,_,R,W,x,A){var D=R.ref;return c={$$typeof:h,type:c,key:_,props:R,_owner:W},(D!==void 0?D:null)!==null?Object.defineProperty(c,"ref",{enumerable:!1,get:l}):Object.defineProperty(c,"ref",{enumerable:!1,value:null}),c._store={},Object.defineProperty(c._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(c,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(c,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:x}),Object.defineProperty(c,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:A}),Object.freeze&&(Object.freeze(c.props),Object.freeze(c)),c}function y(c,_,R,W,x,A){var D=_.children;if(D!==void 0)if(W)if(H(D)){for(W=0;W<D.length;W++)f(D[W]);Object.freeze&&Object.freeze(D)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else f(D);if(O.call(_,"key")){D=t(c);var U=Object.keys(_).filter(function(re){return re!=="key"});W=0<U.length?"{key: someKey, "+U.join(": ..., ")+": ...}":"{key: someKey}",ie[D+W]||(U=0<U.length?"{"+U.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
-  let props = %s;
-  <%s {...props} />
-React keys must be passed directly to JSX without using spread:
-  let props = %s;
-  <%s key={someKey} {...props} />`,W,D,U,D),ie[D+W]=!0)}if(D=null,R!==void 0&&(n(R),D=""+R),o(_)&&(n(_.key),D=""+_.key),"key"in _){R={};for(var te in _)te!=="key"&&(R[te]=_[te])}else R=_;return D&&d(R,typeof c=="function"?c.displayName||c.name||"Unknown":c),u(c,D,R,i(),x,A)}function f(c){k(c)?c._store&&(c._store.validated=1):typeof c=="object"&&c!==null&&c.$$typeof===M&&(c._payload.status==="fulfilled"?k(c._payload.value)&&c._payload.value._store&&(c._payload.value._store.validated=1):c._store&&(c._store.validated=1))}function k(c){return typeof c=="object"&&c!==null&&c.$$typeof===h}var g=w,h=Symbol.for("react.transitional.element"),b=Symbol.for("react.portal"),v=Symbol.for("react.fragment"),p=Symbol.for("react.strict_mode"),m=Symbol.for("react.profiler"),T=Symbol.for("react.consumer"),N=Symbol.for("react.context"),F=Symbol.for("react.forward_ref"),P=Symbol.for("react.suspense"),I=Symbol.for("react.suspense_list"),B=Symbol.for("react.memo"),M=Symbol.for("react.lazy"),G=Symbol.for("react.activity"),z=Symbol.for("react.client.reference"),K=g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,O=Object.prototype.hasOwnProperty,H=Array.isArray,E=console.createTask?console.createTask:function(){return null};g={react_stack_bottom_frame:function(c){return c()}};var Z,se={},ee=g.react_stack_bottom_frame.bind(g,a)(),X=E(s(a)),ie={};xe.Fragment=v,xe.jsx=function(c,_,R){var W=1e4>K.recentlyCreatedOwnerStacks++;return y(c,_,R,!1,W?Error("react-stack-top-frame"):ee,W?E(s(c)):X)},xe.jsxs=function(c,_,R){var W=1e4>K.recentlyCreatedOwnerStacks++;return y(c,_,R,!0,W?Error("react-stack-top-frame"):ee,W?E(s(c)):X)}})()),xe}var tt;function Wt(){return tt||(tt=1,process.env.NODE_ENV==="production"?_e.exports=Ot():_e.exports=Ht()),_e.exports}var r=Wt();const nt=w.forwardRef((t,e)=>r.jsx(L.Alert,{ref:e,...t}));nt.displayName="Alert";const Re=w.forwardRef((t,e)=>r.jsx(L.Avatar,{ref:e,...t}));Re.displayName="Avatar";const ot=w.forwardRef((t,e)=>r.jsx(L.Badge,{ref:e,...t}));ot.displayName="Badge";const Vt=L.BadgePosition,Gt=L.Breadcrumbs,Ut=L.BreadcrumbsList,Kt=L.BreadcrumbsItem,qt=L.BreadcrumbsLink,ge=L.Button;ge.displayName="Button";const rt=L.Card,Yt=L.CardBlock;rt.displayName="Card";const st=L.Checkbox,$t=L.Fieldset,Jt=L.useCheckboxGroup;st.displayName="Checkbox",$t.displayName="Fieldset";const Zt=L.Chip;function Oe(t){return(e={})=>{const n=e.width?String(e.width):t.defaultWidth;return t.formats[n]||t.formats[t.defaultWidth]}}function Te(t){return(e,n)=>{const s=n!=null&&n.context?String(n.context):"standalone";let i;if(s==="formatting"&&t.formattingValues){const o=t.defaultFormattingWidth||t.defaultWidth,d=n!=null&&n.width?String(n.width):o;i=t.formattingValues[d]||t.formattingValues[o]}else{const o=t.defaultWidth,d=n!=null&&n.width?String(n.width):t.defaultWidth;i=t.values[d]||t.values[o]}const a=t.argumentCallback?t.argumentCallback(e):e;return i[a]}}function Se(t){return(e,n={})=>{const s=n.width,i=s&&t.matchPatterns[s]||t.matchPatterns[t.defaultMatchWidth],a=e.match(i);if(!a)return null;const o=a[0],d=s&&t.parsePatterns[s]||t.parsePatterns[t.defaultParseWidth],l=Array.isArray(d)?Qt(d,f=>f.test(o)):Xt(d,f=>f.test(o));let u;u=t.valueCallback?t.valueCallback(l):l,u=n.valueCallback?n.valueCallback(u):u;const y=e.slice(o.length);return{value:u,rest:y}}}function Xt(t,e){for(const n in t)if(Object.prototype.hasOwnProperty.call(t,n)&&e(t[n]))return n}function Qt(t,e){for(let n=0;n<t.length;n++)if(e(t[n]))return n}function en(t){return(e,n={})=>{const s=e.match(t.matchPattern);if(!s)return null;const i=s[0],a=e.match(t.parsePattern);if(!a)return null;let o=t.valueCallback?t.valueCallback(a[0]):a[0];o=n.valueCallback?n.valueCallback(o):o;const d=e.slice(i.length);return{value:o,rest:d}}}const tn={lessThanXSeconds:{one:"mindre enn ett sekund",other:"mindre enn {{count}} sekunder"},xSeconds:{one:"ett sekund",other:"{{count}} sekunder"},halfAMinute:"et halvt minutt",lessThanXMinutes:{one:"mindre enn ett minutt",other:"mindre enn {{count}} minutter"},xMinutes:{one:"ett minutt",other:"{{count}} minutter"},aboutXHours:{one:"omtrent en time",other:"omtrent {{count}} timer"},xHours:{one:"en time",other:"{{count}} timer"},xDays:{one:"en dag",other:"{{count}} dager"},aboutXWeeks:{one:"omtrent en uke",other:"omtrent {{count}} uker"},xWeeks:{one:"en uke",other:"{{count}} uker"},aboutXMonths:{one:"omtrent en måned",other:"omtrent {{count}} måneder"},xMonths:{one:"en måned",other:"{{count}} måneder"},aboutXYears:{one:"omtrent ett år",other:"omtrent {{count}} år"},xYears:{one:"ett år",other:"{{count}} år"},overXYears:{one:"over ett år",other:"over {{count}} år"},almostXYears:{one:"nesten ett år",other:"nesten {{count}} år"}},nn=(t,e,n)=>{let s;const i=tn[t];return typeof i=="string"?s=i:e===1?s=i.one:s=i.other.replace("{{count}}",String(e)),n!=null&&n.addSuffix?n.comparison&&n.comparison>0?"om "+s:s+" siden":s},on={full:"EEEE d. MMMM y",long:"d. MMMM y",medium:"d. MMM y",short:"dd.MM.y"},rn={full:"'kl'. HH:mm:ss zzzz",long:"HH:mm:ss z",medium:"HH:mm:ss",short:"HH:mm"},sn={full:"{{date}} 'kl.' {{time}}",long:"{{date}} 'kl.' {{time}}",medium:"{{date}} {{time}}",short:"{{date}} {{time}}"},an={date:Oe({formats:on,defaultWidth:"full"}),time:Oe({formats:rn,defaultWidth:"full"}),dateTime:Oe({formats:sn,defaultWidth:"full"})},ln={lastWeek:"'forrige' eeee 'kl.' p",yesterday:"'i går kl.' p",today:"'i dag kl.' p",tomorrow:"'i morgen kl.' p",nextWeek:"EEEE 'kl.' p",other:"P"},dn=(t,e,n,s)=>ln[t],cn={narrow:["f.Kr.","e.Kr."],abbreviated:["f.Kr.","e.Kr."],wide:["før Kristus","etter Kristus"]},un={narrow:["1","2","3","4"],abbreviated:["Q1","Q2","Q3","Q4"],wide:["1. kvartal","2. kvartal","3. kvartal","4. kvartal"]},mn={narrow:["J","F","M","A","M","J","J","A","S","O","N","D"],abbreviated:["jan.","feb.","mars","apr.","mai","juni","juli","aug.","sep.","okt.","nov.","des."],wide:["januar","februar","mars","april","mai","juni","juli","august","september","oktober","november","desember"]},gn={narrow:["S","M","T","O","T","F","L"],short:["sø","ma","ti","on","to","fr","lø"],abbreviated:["søn","man","tir","ons","tor","fre","lør"],wide:["søndag","mandag","tirsdag","onsdag","torsdag","fredag","lørdag"]},pn={narrow:{am:"a",pm:"p",midnight:"midnatt",noon:"middag",morning:"på morg.",afternoon:"på etterm.",evening:"på kvelden",night:"på natten"},abbreviated:{am:"a.m.",pm:"p.m.",midnight:"midnatt",noon:"middag",morning:"på morg.",afternoon:"på etterm.",evening:"på kvelden",night:"på natten"},wide:{am:"a.m.",pm:"p.m.",midnight:"midnatt",noon:"middag",morning:"på morgenen",afternoon:"på ettermiddagen",evening:"på kvelden",night:"på natten"}},fn={ordinalNumber:(t,e)=>Number(t)+".",era:Te({values:cn,defaultWidth:"wide"}),quarter:Te({values:un,defaultWidth:"wide",argumentCallback:t=>t-1}),month:Te({values:mn,defaultWidth:"wide"}),day:Te({values:gn,defaultWidth:"wide"}),dayPeriod:Te({values:pn,defaultWidth:"wide"})},hn=/^(\d+)\.?/i,kn=/\d+/i,bn={narrow:/^(f\.? ?Kr\.?|fvt\.?|e\.? ?Kr\.?|evt\.?)/i,abbreviated:/^(f\.? ?Kr\.?|fvt\.?|e\.? ?Kr\.?|evt\.?)/i,wide:/^(før Kristus|før vår tid|etter Kristus|vår tid)/i},vn={any:[/^f/i,/^e/i]},yn={narrow:/^[1234]/i,abbreviated:/^q[1234]/i,wide:/^[1234](\.)? kvartal/i},xn={any:[/1/i,/2/i,/3/i,/4/i]},Tn={narrow:/^[jfmasond]/i,abbreviated:/^(jan|feb|mars?|apr|mai|juni?|juli?|aug|sep|okt|nov|des)\.?/i,wide:/^(januar|februar|mars|april|mai|juni|juli|august|september|oktober|november|desember)/i},Sn={narrow:[/^j/i,/^f/i,/^m/i,/^a/i,/^m/i,/^j/i,/^j/i,/^a/i,/^s/i,/^o/i,/^n/i,/^d/i],any:[/^ja/i,/^f/i,/^mar/i,/^ap/i,/^mai/i,/^jun/i,/^jul/i,/^aug/i,/^s/i,/^o/i,/^n/i,/^d/i]},wn={narrow:/^[smtofl]/i,short:/^(sø|ma|ti|on|to|fr|lø)/i,abbreviated:/^(søn|man|tir|ons|tor|fre|lør)/i,wide:/^(søndag|mandag|tirsdag|onsdag|torsdag|fredag|lørdag)/i},Cn={any:[/^s/i,/^m/i,/^ti/i,/^o/i,/^to/i,/^f/i,/^l/i]},jn={narrow:/^(midnatt|middag|(på) (morgenen|ettermiddagen|kvelden|natten)|[ap])/i,any:/^([ap]\.?\s?m\.?|midnatt|middag|(på) (morgenen|ettermiddagen|kvelden|natten))/i},Dn={any:{am:/^a(\.?\s?m\.?)?$/i,pm:/^p(\.?\s?m\.?)?$/i,midnight:/^midn/i,noon:/^midd/i,morning:/morgen/i,afternoon:/ettermiddag/i,evening:/kveld/i,night:/natt/i}},In={ordinalNumber:en({matchPattern:hn,parsePattern:kn,valueCallback:t=>parseInt(t,10)}),era:Se({matchPatterns:bn,defaultMatchWidth:"wide",parsePatterns:vn,defaultParseWidth:"any"}),quarter:Se({matchPatterns:yn,defaultMatchWidth:"wide",parsePatterns:xn,defaultParseWidth:"any",valueCallback:t=>t+1}),month:Se({matchPatterns:Tn,defaultMatchWidth:"wide",parsePatterns:Sn,defaultParseWidth:"any"}),day:Se({matchPatterns:wn,defaultMatchWidth:"wide",parsePatterns:Cn,defaultParseWidth:"any"}),dayPeriod:Se({matchPatterns:jn,defaultMatchWidth:"any",parsePatterns:Dn,defaultParseWidth:"any"})},be={code:"nb",formatDistance:nn,formatLong:an,formatRelative:dn,localize:fn,match:In,options:{weekStartsOn:1,firstWeekContainsDate:4}},at=({title:t,...e})=>r.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 28 28",fill:"none","aria-hidden":t?void 0:!0,focusable:"false",...e,children:[t&&r.jsx("title",{children:t}),r.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M16.952 6.96459C16.6103 6.62289 16.0563 6.62289 15.7146 6.96459L9.2979 13.3813C8.95621 13.723 8.95621 14.277 9.2979 14.6187L15.7146 21.0354C16.0563 21.3771 16.6103 21.3771 16.952 21.0354C17.2937 20.6937 17.2937 20.1396 16.952 19.7979L11.1541 14L16.952 8.20203C17.2937 7.86032 17.2937 7.3063 16.952 6.96459Z",fill:"currentColor"})]});at.displayName="ChevronLeftIcon";const it=({title:t,...e})=>r.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 28 28",fill:"none","aria-hidden":t?void 0:!0,focusable:"false",...e,children:[t&&r.jsx("title",{children:t}),r.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M11.048 6.96459C11.3897 6.62289 11.9437 6.62289 12.2854 6.96459L18.7021 13.3813C19.0438 13.723 19.0438 14.277 18.7021 14.6187L12.2854 21.0354C11.9437 21.3771 11.3897 21.3771 11.048 21.0354C10.7063 20.6937 10.7063 20.1396 11.048 19.7979L16.8459 14L11.048 8.20203C10.7063 7.86032 10.7063 7.3063 11.048 6.96459Z",fill:"currentColor"})]});it.displayName="ChevronRightIcon";const ae={calendarContainer:"_calendarContainer_10l5p_1",calendarHeader:"_calendarHeader_10l5p_14",monthYear:"_monthYear_10l5p_21",navigationButtons:"_navigationButtons_10l5p_32",grid:"_grid_10l5p_41",dayNameCell:"_dayNameCell_10l5p_48",dateCell:"_dateCell_10l5p_65",dateNumberContainer:"_dateNumberContainer_10l5p_90",otherMonth:"_otherMonth_10l5p_103",selectedDate:"_selectedDate_10l5p_129"},Ln=t=>{const e=$.startOfMonth(t),n=$.startOfWeek(e,{locale:be}),s=$.addDays(n,41);return $.eachDayOfInterval({start:n,end:s})},lt=t=>t&&t.charAt(0).toUpperCase()+t.slice(1),dt=({initialDate:t=new Date,selectedDate:e=null,onDateSelect:n,"data-color":s,"data-size":i})=>{const[a,o]=w.useState($.startOfMonth(e&&$.isValid(e)?e:t));w.useEffect(()=>{if(e&&$.isValid(e)){const m=$.startOfMonth(e);$.isSameMonth(m,a)||o(m)}},[e]);const d=w.useMemo(()=>$.startOfMonth(new Date),[]),l=w.useMemo(()=>!1,[a,d]),u=w.useMemo(()=>Ln(a),[a]),y=w.useMemo(()=>{const m=$.startOfWeek(new Date,{locale:be});return Array.from({length:7}).map((T,N)=>{const F=$.format($.addDays(m,N),"EEEEEE",{locale:be});return lt(F)})},[]),f=w.useCallback(()=>{l||o(m=>$.startOfMonth($.subMonths(m,1)))},[l]),k=w.useCallback(()=>{o(m=>$.startOfMonth($.addMonths(m,1)))},[]),g=w.useCallback(m=>{n&&n(m)},[n]),h=w.useCallback((m,T)=>{(m.key==="Enter"||m.key===" ")&&(m.preventDefault(),g(T))},[g]),b=$.format(a,"MMMM",{locale:be}),v=$.format(a,"yyyy",{locale:be}),p=`${lt(b)} ${v}`;return r.jsxs("div",{className:ae.calendarContainer,"data-color":s,"data-size":i,children:[r.jsxs("div",{className:ae.calendarHeader,children:[r.jsx("span",{className:ae.monthYear,children:p}),r.jsxs("div",{className:ae.navigationButtons,children:[r.jsx(L.Button,{variant:"tertiary",icon:!0,onClick:f,"aria-label":"Forrige måned",disabled:l,children:r.jsx(at,{})}),r.jsx(L.Button,{variant:"tertiary",icon:!0,onClick:k,"aria-label":"Neste måned",children:r.jsx(it,{})})]})]}),r.jsx("div",{className:ae.grid,children:y.map(m=>r.jsx("div",{className:ae.dayNameCell,children:m},m))}),r.jsx("div",{className:ae.grid,children:u.map(m=>{const T=$.isSameMonth(m,a),N=e&&$.isValid(e)&&$.isSameDay(m,e),F=$.isToday(m),P=[ae.dateCell,T?"":ae.otherMonth,N?ae.selectedDate:"",F&&!N?ae.todayDate:""].filter(Boolean).join(" ");return r.jsx("div",{className:P,onClick:()=>g(m),onKeyDown:I=>h(I,m),role:"button",tabIndex:0,"aria-pressed":N??!1,"aria-label":$.format(m,"PPP",{locale:be}),children:r.jsx("span",{className:ae.dateNumberContainer,children:$.format(m,"d")})},m.toISOString())})})]})};dt.displayName="DatePicker";const pe={fieldset:"_fieldset_16fx7_2",description:"_description_16fx7_14",error:"_error_16fx7_21",inputWrapper:"_inputWrapper_16fx7_30",inputWrapperError:"_inputWrapperError_16fx7_42",suffixButton:"_suffixButton_16fx7_80",suffixButtonInteractive:"_suffixButtonInteractive_16fx7_100"},ct=t=>{const e=t.slice(0,2),n=t.slice(2,4),s=t.slice(4,8);return t.length>4?`${e}.${n}.${s}`:t.length>2?`${e}.${n}`:t.length>0?e:""},ut=t=>(t||"").replace(/\D/g,""),mt=t=>{let e=t;if(e.length>=2){const n=parseInt(e.substring(0,2),10);!isNaN(n)&&n>31&&(e="31"+e.substring(2))}if(e.length>=4){const n=parseInt(e.substring(2,4),10);!isNaN(n)&&n>12&&(e=e.substring(0,2)+"12"+e.substring(4))}return e.slice(0,8)},gt=w.forwardRef((t,e)=>{const{label:n,suffixIcon:s,onSuffixClick:i,className:a,inputWrapperClassName:o,inputClassName:d,value:l,defaultValue:u,onChange:y,readOnly:f,placeholder:k="dd.mm.åååå",id:g,name:h,required:b,disabled:v,onClick:p,onFocus:m,onBlur:T,autoComplete:N="off","aria-label":F,"aria-labelledby":P,description:I,error:B,"data-color":M,"data-size":G,...z}=t,K=l!==void 0,O=w.useRef(null);w.useImperativeHandle(e,()=>O.current);const H=w.useCallback(A=>{const D=ut(A),U=mt(D);return ct(U)},[]),[E,Z]=w.useState(()=>H(l??u));w.useEffect(()=>{if(K){const A=H(l);A!==E&&(Z(A),O.current&&O.current.value!==A&&(O.current.value=A))}},[l,K,E,H]);const se=w.useCallback(A=>{const D=A.target,U=D.value,te=E,re=ut(U).slice(0,8),q=mt(re),j=ct(q);let V=0;const Y=q.length;Y<=2?V=Y:Y<=4?V=Y+1:V=Y+2,V=Math.min(V,j.length),requestAnimationFrame(()=>{if(O.current&&(Z(j),O.current.value=j,O.current.setSelectionRange(V,V),(j!==te||K)&&y)){const ne={...A,target:{...D,value:j}};y(ne,j)}})},[E,K,y,H]),ee=[pe.fieldset,a].filter(Boolean).join(" "),X=[pe.inputWrapper,o,B?pe.inputWrapperError:""].filter(Boolean).join(" "),ie=[d].filter(Boolean).join(" "),c=[pe.suffixButton,i?pe.suffixButtonInteractive:""].filter(Boolean).join(" ");!n&&!F&&!P&&console.warn("Advarsel: DateInput-komponenten bør ha label, aria-label, eller aria-labelledby for tilgjengelighet.");const _=n&&typeof n=="string"?P||`${g}-label`:void 0,R=I?`${g}-desc`:void 0,W=B?`${g}-err`:void 0,x=[R,W].filter(Boolean).join(" ")||void 0;return r.jsxs("div",{className:ee,"data-color":M,"data-size":G,children:[n&&typeof n=="string"?r.jsx("label",{id:_,htmlFor:g,children:n}):n,I&&r.jsx("p",{id:R,className:pe.description,children:I}),r.jsxs("div",{className:X,children:[r.jsx("input",{ref:O,type:"text",inputMode:"numeric",pattern:"\\d{2}\\.\\d{2}\\.\\d{4}",maxLength:10,value:E,readOnly:f,placeholder:k,id:g,name:h,required:b,disabled:v,onClick:p,onChange:se,onFocus:m,onBlur:T,autoComplete:N,"aria-label":F,"aria-labelledby":_,"aria-describedby":x,"aria-invalid":!!B,className:ie,...z}),s&&r.jsx("button",{type:"button",className:c,onClick:v?void 0:i,tabIndex:i&&!v?0:-1,"aria-hidden":!i,disabled:v,"aria-label":i?"Åpne datovelger":void 0,children:s})]}),B&&r.jsx("p",{id:W,className:pe.error,role:"alert",children:B})]})});gt.displayName="DateInput";function An(t){return Object.prototype.toString.call(t)==="[object Object]"}function pt(t){return An(t)||Array.isArray(t)}function En(){return!!(typeof window<"u"&&window.document&&window.document.createElement)}function He(t,e){const n=Object.keys(t),s=Object.keys(e);if(n.length!==s.length)return!1;const i=JSON.stringify(Object.keys(t.breakpoints||{})),a=JSON.stringify(Object.keys(e.breakpoints||{}));return i!==a?!1:n.every(o=>{const d=t[o],l=e[o];return typeof d=="function"?`${d}`==`${l}`:!pt(d)||!pt(l)?d===l:He(d,l)})}function ft(t){return t.concat().sort((e,n)=>e.name>n.name?1:-1).map(e=>e.options)}function Bn(t,e){if(t.length!==e.length)return!1;const n=ft(t),s=ft(e);return n.every((i,a)=>{const o=s[a];return He(i,o)})}function We(t){return typeof t=="number"}function Ve(t){return typeof t=="string"}function Fe(t){return typeof t=="boolean"}function ht(t){return Object.prototype.toString.call(t)==="[object Object]"}function J(t){return Math.abs(t)}function Ge(t){return Math.sign(t)}function we(t,e){return J(t-e)}function _n(t,e){if(t===0||e===0||J(t)<=J(e))return 0;const n=we(J(t),J(e));return J(n/t)}function Fn(t){return Math.round(t*100)/100}function Ce(t){return De(t).map(Number)}function le(t){return t[je(t)]}function je(t){return Math.max(0,t.length-1)}function Ue(t,e){return e===je(t)}function kt(t,e=0){return Array.from(Array(t),(n,s)=>e+s)}function De(t){return Object.keys(t)}function bt(t,e){return[t,e].reduce((n,s)=>(De(s).forEach(i=>{const a=n[i],o=s[i],d=ht(a)&&ht(o);n[i]=d?bt(a,o):o}),n),{})}function Ke(t,e){return typeof e.MouseEvent<"u"&&t instanceof e.MouseEvent}function Nn(t,e){const n={start:s,center:i,end:a};function s(){return 0}function i(l){return a(l)/2}function a(l){return e-l}function o(l,u){return Ve(t)?n[t](l):t(e,l,u)}return{measure:o}}function Ie(){let t=[];function e(i,a,o,d={passive:!0}){let l;if("addEventListener"in i)i.addEventListener(a,o,d),l=()=>i.removeEventListener(a,o,d);else{const u=i;u.addListener(o),l=()=>u.removeListener(o)}return t.push(l),s}function n(){t=t.filter(i=>i())}const s={add:e,clear:n};return s}function Pn(t,e,n,s){const i=Ie(),a=1e3/60;let o=null,d=0,l=0;function u(){i.add(t,"visibilitychange",()=>{t.hidden&&h()})}function y(){g(),i.clear()}function f(v){if(!l)return;o||(o=v,n(),n());const p=v-o;for(o=v,d+=p;d>=a;)n(),d-=a;const m=d/a;s(m),l&&(l=e.requestAnimationFrame(f))}function k(){l||(l=e.requestAnimationFrame(f))}function g(){e.cancelAnimationFrame(l),o=null,d=0,l=0}function h(){o=null,d=0}return{init:u,destroy:y,start:k,stop:g,update:n,render:s}}function Mn(t,e){const n=e==="rtl",s=t==="y",i=s?"y":"x",a=s?"x":"y",o=!s&&n?-1:1,d=y(),l=f();function u(h){const{height:b,width:v}=h;return s?b:v}function y(){return s?"top":n?"right":"left"}function f(){return s?"bottom":n?"left":"right"}function k(h){return h*o}return{scroll:i,cross:a,startEdge:d,endEdge:l,measureSize:u,direction:k}}function fe(t=0,e=0){const n=J(t-e);function s(u){return u<t}function i(u){return u>e}function a(u){return s(u)||i(u)}function o(u){return a(u)?s(u)?t:e:u}function d(u){return n?u-n*Math.ceil((u-e)/n):u}return{length:n,max:e,min:t,constrain:o,reachedAny:a,reachedMax:i,reachedMin:s,removeOffset:d}}function vt(t,e,n){const{constrain:s}=fe(0,t),i=t+1;let a=o(e);function o(k){return n?J((i+k)%i):s(k)}function d(){return a}function l(k){return a=o(k),f}function u(k){return y().set(d()+k)}function y(){return vt(t,d(),n)}const f={get:d,set:l,add:u,clone:y};return f}function zn(t,e,n,s,i,a,o,d,l,u,y,f,k,g,h,b,v,p,m){const{cross:T,direction:N}=t,F=["INPUT","SELECT","TEXTAREA"],P={passive:!1},I=Ie(),B=Ie(),M=fe(50,225).constrain(g.measure(20)),G={mouse:300,touch:400},z={mouse:500,touch:600},K=h?43:25;let O=!1,H=0,E=0,Z=!1,se=!1,ee=!1,X=!1;function ie(j){if(!m)return;function V(ne){(Fe(m)||m(j,ne))&&A(ne)}const Y=e;I.add(Y,"dragstart",ne=>ne.preventDefault(),P).add(Y,"touchmove",()=>{},P).add(Y,"touchend",()=>{}).add(Y,"touchstart",V).add(Y,"mousedown",V).add(Y,"touchcancel",U).add(Y,"contextmenu",U).add(Y,"click",te,!0)}function c(){I.clear(),B.clear()}function _(){const j=X?n:e;B.add(j,"touchmove",D,P).add(j,"touchend",U).add(j,"mousemove",D,P).add(j,"mouseup",U)}function R(j){const V=j.nodeName||"";return F.includes(V)}function W(){return(h?z:G)[X?"mouse":"touch"]}function x(j,V){const Y=f.add(Ge(j)*-1),ne=y.byDistance(j,!h).distance;return h||J(j)<M?ne:v&&V?ne*.5:y.byIndex(Y.get(),0).distance}function A(j){const V=Ke(j,s);X=V,ee=h&&V&&!j.buttons&&O,O=we(i.get(),o.get())>=2,!(V&&j.button!==0)&&(R(j.target)||(Z=!0,a.pointerDown(j),u.useFriction(0).useDuration(0),i.set(o),_(),H=a.readPoint(j),E=a.readPoint(j,T),k.emit("pointerDown")))}function D(j){if(!Ke(j,s)&&j.touches.length>=2)return U(j);const Y=a.readPoint(j),ne=a.readPoint(j,T),ce=we(Y,H),ue=we(ne,E);if(!se&&!X&&(!j.cancelable||(se=ce>ue,!se)))return U(j);const he=a.pointerMove(j);ce>b&&(ee=!0),u.useFriction(.3).useDuration(.75),d.start(),i.add(N(he)),j.preventDefault()}function U(j){const Y=y.byDistance(0,!1).index!==f.get(),ne=a.pointerUp(j)*W(),ce=x(N(ne),Y),ue=_n(ne,ce),he=K-10*ue,me=p+ue/50;se=!1,Z=!1,B.clear(),u.useDuration(he).useFriction(me),l.distance(ce,!h),X=!1,k.emit("pointerUp")}function te(j){ee&&(j.stopPropagation(),j.preventDefault(),ee=!1)}function re(){return Z}return{init:ie,destroy:c,pointerDown:re}}function Rn(t,e){let s,i;function a(f){return f.timeStamp}function o(f,k){const h=`client${(k||t.scroll)==="x"?"X":"Y"}`;return(Ke(f,e)?f:f.touches[0])[h]}function d(f){return s=f,i=f,o(f)}function l(f){const k=o(f)-o(i),g=a(f)-a(s)>170;return i=f,g&&(s=f),k}function u(f){if(!s||!i)return 0;const k=o(i)-o(s),g=a(f)-a(s),h=a(f)-a(i)>170,b=k/g;return g&&!h&&J(b)>.1?b:0}return{pointerDown:d,pointerMove:l,pointerUp:u,readPoint:o}}function On(){function t(n){const{offsetTop:s,offsetLeft:i,offsetWidth:a,offsetHeight:o}=n;return{top:s,right:i+a,bottom:s+o,left:i,width:a,height:o}}return{measure:t}}function Hn(t){function e(s){return t*(s/100)}return{measure:e}}function Wn(t,e,n,s,i,a,o){const d=[t].concat(s);let l,u,y=[],f=!1;function k(v){return i.measureSize(o.measure(v))}function g(v){if(!a)return;u=k(t),y=s.map(k);function p(m){for(const T of m){if(f)return;const N=T.target===t,F=s.indexOf(T.target),P=N?u:y[F],I=k(N?t:s[F]);if(J(I-P)>=.5){v.reInit(),e.emit("resize");break}}}l=new ResizeObserver(m=>{(Fe(a)||a(v,m))&&p(m)}),n.requestAnimationFrame(()=>{d.forEach(m=>l.observe(m))})}function h(){f=!0,l&&l.disconnect()}return{init:g,destroy:h}}function Vn(t,e,n,s,i,a){let o=0,d=0,l=i,u=a,y=t.get(),f=0;function k(){const P=s.get()-t.get(),I=!l;let B=0;return I?(o=0,n.set(s),t.set(s),B=P):(n.set(t),o+=P/l,o*=u,y+=o,t.add(o),B=y-f),d=Ge(B),f=y,F}function g(){const P=s.get()-e.get();return J(P)<.001}function h(){return l}function b(){return d}function v(){return o}function p(){return T(i)}function m(){return N(a)}function T(P){return l=P,F}function N(P){return u=P,F}const F={direction:b,duration:h,velocity:v,seek:k,settled:g,useBaseFriction:m,useBaseDuration:p,useFriction:N,useDuration:T};return F}function Gn(t,e,n,s,i){const a=i.measure(10),o=i.measure(50),d=fe(.1,.99);let l=!1;function u(){return!(l||!t.reachedAny(n.get())||!t.reachedAny(e.get()))}function y(g){if(!u())return;const h=t.reachedMin(e.get())?"min":"max",b=J(t[h]-e.get()),v=n.get()-e.get(),p=d.constrain(b/o);n.subtract(v*p),!g&&J(v)<a&&(n.set(t.constrain(n.get())),s.useDuration(25).useBaseFriction())}function f(g){l=!g}return{shouldConstrain:u,constrain:y,toggleActive:f}}function Un(t,e,n,s,i){const a=fe(-e+t,0),o=f(),d=y(),l=k();function u(h,b){return we(h,b)<=1}function y(){const h=o[0],b=le(o),v=o.lastIndexOf(h),p=o.indexOf(b)+1;return fe(v,p)}function f(){return n.map((h,b)=>{const{min:v,max:p}=a,m=a.constrain(h),T=!b,N=Ue(n,b);return T?p:N||u(v,m)?v:u(p,m)?p:m}).map(h=>parseFloat(h.toFixed(3)))}function k(){if(e<=t+i)return[a.max];if(s==="keepSnaps")return o;const{min:h,max:b}=d;return o.slice(h,b)}return{snapsContained:l,scrollContainLimit:d}}function Kn(t,e,n){const s=e[0],i=n?s-t:le(e);return{limit:fe(i,s)}}function qn(t,e,n,s){const a=e.min+.1,o=e.max+.1,{reachedMin:d,reachedMax:l}=fe(a,o);function u(k){return k===1?l(n.get()):k===-1?d(n.get()):!1}function y(k){if(!u(k))return;const g=t*(k*-1);s.forEach(h=>h.add(g))}return{loop:y}}function Yn(t){const{max:e,length:n}=t;function s(a){const o=a-e;return n?o/-n:0}return{get:s}}function $n(t,e,n,s,i){const{startEdge:a,endEdge:o}=t,{groupSlides:d}=i,l=f().map(e.measure),u=k(),y=g();function f(){return d(s).map(b=>le(b)[o]-b[0][a]).map(J)}function k(){return s.map(b=>n[a]-b[a]).map(b=>-J(b))}function g(){return d(u).map(b=>b[0]).map((b,v)=>b+l[v])}return{snaps:u,snapsAligned:y}}function Jn(t,e,n,s,i,a){const{groupSlides:o}=i,{min:d,max:l}=s,u=y();function y(){const k=o(a),g=!t||e==="keepSnaps";return n.length===1?[a]:g?k:k.slice(d,l).map((h,b,v)=>{const p=!b,m=Ue(v,b);if(p){const T=le(v[0])+1;return kt(T)}if(m){const T=je(a)-le(v)[0]+1;return kt(T,le(v)[0])}return h})}return{slideRegistry:u}}function Zn(t,e,n,s,i){const{reachedAny:a,removeOffset:o,constrain:d}=s;function l(h){return h.concat().sort((b,v)=>J(b)-J(v))[0]}function u(h){const b=t?o(h):d(h),v=e.map((m,T)=>({diff:y(m-b,0),index:T})).sort((m,T)=>J(m.diff)-J(T.diff)),{index:p}=v[0];return{index:p,distance:b}}function y(h,b){const v=[h,h+n,h-n];if(!t)return h;if(!b)return l(v);const p=v.filter(m=>Ge(m)===b);return p.length?l(p):le(v)-n}function f(h,b){const v=e[h]-i.get(),p=y(v,b);return{index:h,distance:p}}function k(h,b){const v=i.get()+h,{index:p,distance:m}=u(v),T=!t&&a(v);if(!b||T)return{index:p,distance:h};const N=e[p]-m,F=h+y(N,0);return{index:p,distance:F}}return{byDistance:k,byIndex:f,shortcut:y}}function Xn(t,e,n,s,i,a,o){function d(f){const k=f.distance,g=f.index!==e.get();a.add(k),k&&(s.duration()?t.start():(t.update(),t.render(1),t.update())),g&&(n.set(e.get()),e.set(f.index),o.emit("select"))}function l(f,k){const g=i.byDistance(f,k);d(g)}function u(f,k){const g=e.clone().set(f),h=i.byIndex(g.get(),k);d(h)}return{distance:l,index:u}}function Qn(t,e,n,s,i,a,o,d){const l={passive:!0,capture:!0};let u=0;function y(g){if(!d)return;function h(b){if(new Date().getTime()-u>10)return;o.emit("slideFocusStart"),t.scrollLeft=0;const m=n.findIndex(T=>T.includes(b));We(m)&&(i.useDuration(0),s.index(m,0),o.emit("slideFocus"))}a.add(document,"keydown",f,!1),e.forEach((b,v)=>{a.add(b,"focus",p=>{(Fe(d)||d(g,p))&&h(v)},l)})}function f(g){g.code==="Tab"&&(u=new Date().getTime())}return{init:y}}function Le(t){let e=t;function n(){return e}function s(l){e=o(l)}function i(l){e+=o(l)}function a(l){e-=o(l)}function o(l){return We(l)?l:l.get()}return{get:n,set:s,add:i,subtract:a}}function yt(t,e){const n=t.scroll==="x"?o:d,s=e.style;let i=null,a=!1;function o(k){return`translate3d(${k}px,0px,0px)`}function d(k){return`translate3d(0px,${k}px,0px)`}function l(k){if(a)return;const g=Fn(t.direction(k));g!==i&&(s.transform=n(g),i=g)}function u(k){a=!k}function y(){a||(s.transform="",e.getAttribute("style")||e.removeAttribute("style"))}return{clear:y,to:l,toggleActive:u}}function eo(t,e,n,s,i,a,o,d,l){const y=Ce(i),f=Ce(i).reverse(),k=p().concat(m());function g(I,B){return I.reduce((M,G)=>M-i[G],B)}function h(I,B){return I.reduce((M,G)=>g(M,B)>0?M.concat([G]):M,[])}function b(I){return a.map((B,M)=>({start:B-s[M]+.5+I,end:B+e-.5+I}))}function v(I,B,M){const G=b(B);return I.map(z=>{const K=M?0:-n,O=M?n:0,H=M?"end":"start",E=G[z][H];return{index:z,loopPoint:E,slideLocation:Le(-1),translate:yt(t,l[z]),target:()=>d.get()>E?K:O}})}function p(){const I=o[0],B=h(f,I);return v(B,n,!1)}function m(){const I=e-o[0]-1,B=h(y,I);return v(B,-n,!0)}function T(){return k.every(({index:I})=>{const B=y.filter(M=>M!==I);return g(B,e)<=.1})}function N(){k.forEach(I=>{const{target:B,translate:M,slideLocation:G}=I,z=B();z!==G.get()&&(M.to(z),G.set(z))})}function F(){k.forEach(I=>I.translate.clear())}return{canLoop:T,clear:F,loop:N,loopPoints:k}}function to(t,e,n){let s,i=!1;function a(l){if(!n)return;function u(y){for(const f of y)if(f.type==="childList"){l.reInit(),e.emit("slidesChanged");break}}s=new MutationObserver(y=>{i||(Fe(n)||n(l,y))&&u(y)}),s.observe(t,{childList:!0})}function o(){s&&s.disconnect(),i=!0}return{init:a,destroy:o}}function no(t,e,n,s){const i={};let a=null,o=null,d,l=!1;function u(){d=new IntersectionObserver(h=>{l||(h.forEach(b=>{const v=e.indexOf(b.target);i[v]=b}),a=null,o=null,n.emit("slidesInView"))},{root:t.parentElement,threshold:s}),e.forEach(h=>d.observe(h))}function y(){d&&d.disconnect(),l=!0}function f(h){return De(i).reduce((b,v)=>{const p=parseInt(v),{isIntersecting:m}=i[p];return(h&&m||!h&&!m)&&b.push(p),b},[])}function k(h=!0){if(h&&a)return a;if(!h&&o)return o;const b=f(h);return h&&(a=b),h||(o=b),b}return{init:u,destroy:y,get:k}}function oo(t,e,n,s,i,a){const{measureSize:o,startEdge:d,endEdge:l}=t,u=n[0]&&i,y=h(),f=b(),k=n.map(o),g=v();function h(){if(!u)return 0;const m=n[0];return J(e[d]-m[d])}function b(){if(!u)return 0;const m=a.getComputedStyle(le(s));return parseFloat(m.getPropertyValue(`margin-${l}`))}function v(){return n.map((m,T,N)=>{const F=!T,P=Ue(N,T);return F?k[T]+y:P?k[T]+f:N[T+1][d]-m[d]}).map(J)}return{slideSizes:k,slideSizesWithGaps:g,startGap:y,endGap:f}}function ro(t,e,n,s,i,a,o,d,l){const{startEdge:u,endEdge:y,direction:f}=t,k=We(n);function g(p,m){return Ce(p).filter(T=>T%m===0).map(T=>p.slice(T,T+m))}function h(p){return p.length?Ce(p).reduce((m,T,N)=>{const F=le(m)||0,P=F===0,I=T===je(p),B=i[u]-a[F][u],M=i[u]-a[T][y],G=!s&&P?f(o):0,z=!s&&I?f(d):0,K=J(M-z-(B+G));return N&&K>e+l&&m.push(T),I&&m.push(p.length),m},[]).map((m,T,N)=>{const F=Math.max(N[T-1]||0);return p.slice(F,m)}):[]}function b(p){return k?g(p,n):h(p)}return{groupSlides:b}}function so(t,e,n,s,i,a,o){const{align:d,axis:l,direction:u,startIndex:y,loop:f,duration:k,dragFree:g,dragThreshold:h,inViewThreshold:b,slidesToScroll:v,skipSnaps:p,containScroll:m,watchResize:T,watchSlides:N,watchDrag:F,watchFocus:P}=a,I=2,B=On(),M=B.measure(e),G=n.map(B.measure),z=Mn(l,u),K=z.measureSize(M),O=Hn(K),H=Nn(d,K),E=!f&&!!m,Z=f||!!m,{slideSizes:se,slideSizesWithGaps:ee,startGap:X,endGap:ie}=oo(z,M,G,n,Z,i),c=ro(z,K,v,f,M,G,X,ie,I),{snaps:_,snapsAligned:R}=$n(z,H,M,G,c),W=-le(_)+le(ee),{snapsContained:x,scrollContainLimit:A}=Un(K,W,R,m,I),D=E?x:R,{limit:U}=Kn(W,D,f),te=vt(je(D),y,f),re=te.clone(),q=Ce(n),j=({dragHandler:ve,scrollBody:Ze,scrollBounds:Xe,options:{loop:ze}})=>{ze||Xe.constrain(ve.pointerDown()),Ze.seek()},V=({scrollBody:ve,translate:Ze,location:Xe,offsetLocation:ze,previousLocation:Ho,scrollLooper:Wo,slideLooper:Vo,dragHandler:Go,animation:Uo,eventHandler:Ft,scrollBounds:Ko,options:{loop:Nt}},Pt)=>{const Mt=ve.settled(),qo=!Ko.shouldConstrain(),zt=Nt?Mt:Mt&&qo,Rt=zt&&!Go.pointerDown();Rt&&Uo.stop();const Yo=Xe.get()*Pt+Ho.get()*(1-Pt);ze.set(Yo),Nt&&(Wo.loop(ve.direction()),Vo.loop()),Ze.to(ze.get()),Rt&&Ft.emit("settle"),zt||Ft.emit("scroll")},Y=Pn(s,i,()=>j(Je),ve=>V(Je,ve)),ne=.68,ce=D[te.get()],ue=Le(ce),he=Le(ce),me=Le(ce),ke=Le(ce),Be=Vn(ue,me,he,ke,k,ne),Ye=Zn(f,D,W,U,ke),$e=Xn(Y,te,re,Be,Ye,ke,o),Et=Yn(U),Bt=Ie(),Ro=no(e,n,o,b),{slideRegistry:_t}=Jn(E,m,D,A,c,q),Oo=Qn(t,n,_t,$e,Be,Bt,o,P),Je={ownerDocument:s,ownerWindow:i,eventHandler:o,containerRect:M,slideRects:G,animation:Y,axis:z,dragHandler:zn(z,t,s,i,ke,Rn(z,i),ue,Y,$e,Be,Ye,te,o,O,g,h,p,ne,F),eventStore:Bt,percentOfView:O,index:te,indexPrevious:re,limit:U,location:ue,offsetLocation:me,previousLocation:he,options:a,resizeHandler:Wn(e,o,i,n,z,T,B),scrollBody:Be,scrollBounds:Gn(U,me,ke,Be,O),scrollLooper:qn(W,U,me,[ue,me,he,ke]),scrollProgress:Et,scrollSnapList:D.map(Et.get),scrollSnaps:D,scrollTarget:Ye,scrollTo:$e,slideLooper:eo(z,K,W,se,ee,_,D,me,n),slideFocus:Oo,slidesHandler:to(e,o,N),slidesInView:Ro,slideIndexes:q,slideRegistry:_t,slidesToScroll:c,target:ke,translate:yt(z,e)};return Je}function ao(){let t={},e;function n(u){e=u}function s(u){return t[u]||[]}function i(u){return s(u).forEach(y=>y(e,u)),l}function a(u,y){return t[u]=s(u).concat([y]),l}function o(u,y){return t[u]=s(u).filter(f=>f!==y),l}function d(){t={}}const l={init:n,emit:i,off:o,on:a,clear:d};return l}const io={align:"center",axis:"x",container:null,slides:null,containScroll:"trimSnaps",direction:"ltr",slidesToScroll:1,inViewThreshold:0,breakpoints:{},dragFree:!1,dragThreshold:10,loop:!1,skipSnaps:!1,duration:25,startIndex:0,active:!0,watchDrag:!0,watchResize:!0,watchSlides:!0,watchFocus:!0};function lo(t){function e(a,o){return bt(a,o||{})}function n(a){const o=a.breakpoints||{},d=De(o).filter(l=>t.matchMedia(l).matches).map(l=>o[l]).reduce((l,u)=>e(l,u),{});return e(a,d)}function s(a){return a.map(o=>De(o.breakpoints||{})).reduce((o,d)=>o.concat(d),[]).map(t.matchMedia)}return{mergeOptions:e,optionsAtMedia:n,optionsMediaQueries:s}}function co(t){let e=[];function n(a,o){return e=o.filter(({options:d})=>t.optionsAtMedia(d).active!==!1),e.forEach(d=>d.init(a,t)),o.reduce((d,l)=>Object.assign(d,{[l.name]:l}),{})}function s(){e=e.filter(a=>a.destroy())}return{init:n,destroy:s}}function Ne(t,e,n){const s=t.ownerDocument,i=s.defaultView,a=lo(i),o=co(a),d=Ie(),l=ao(),{mergeOptions:u,optionsAtMedia:y,optionsMediaQueries:f}=a,{on:k,off:g,emit:h}=l,b=z;let v=!1,p,m=u(io,Ne.globalOptions),T=u(m),N=[],F,P,I;function B(){const{container:q,slides:j}=T;P=(Ve(q)?t.querySelector(q):q)||t.children[0];const Y=Ve(j)?P.querySelectorAll(j):j;I=[].slice.call(Y||P.children)}function M(q){const j=so(t,P,I,s,i,q,l);if(q.loop&&!j.slideLooper.canLoop()){const V=Object.assign({},q,{loop:!1});return M(V)}return j}function G(q,j){v||(m=u(m,q),T=y(m),N=j||N,B(),p=M(T),f([m,...N.map(({options:V})=>V)]).forEach(V=>d.add(V,"change",z)),T.active&&(p.translate.to(p.location.get()),p.animation.init(),p.slidesInView.init(),p.slideFocus.init(re),p.eventHandler.init(re),p.resizeHandler.init(re),p.slidesHandler.init(re),p.options.loop&&p.slideLooper.loop(),P.offsetParent&&I.length&&p.dragHandler.init(re),F=o.init(re,N)))}function z(q,j){const V=c();K(),G(u({startIndex:V},q),j),l.emit("reInit")}function K(){p.dragHandler.destroy(),p.eventStore.clear(),p.translate.clear(),p.slideLooper.clear(),p.resizeHandler.destroy(),p.slidesHandler.destroy(),p.slidesInView.destroy(),p.animation.destroy(),o.destroy(),d.clear()}function O(){v||(v=!0,d.clear(),K(),l.emit("destroy"),l.clear())}function H(q,j,V){!T.active||v||(p.scrollBody.useBaseFriction().useDuration(j===!0?0:T.duration),p.scrollTo.index(q,V||0))}function E(q){const j=p.index.add(1).get();H(j,q,-1)}function Z(q){const j=p.index.add(-1).get();H(j,q,1)}function se(){return p.index.add(1).get()!==c()}function ee(){return p.index.add(-1).get()!==c()}function X(){return p.scrollSnapList}function ie(){return p.scrollProgress.get(p.offsetLocation.get())}function c(){return p.index.get()}function _(){return p.indexPrevious.get()}function R(){return p.slidesInView.get()}function W(){return p.slidesInView.get(!1)}function x(){return F}function A(){return p}function D(){return t}function U(){return P}function te(){return I}const re={canScrollNext:se,canScrollPrev:ee,containerNode:U,internalEngine:A,destroy:O,off:g,on:k,emit:h,plugins:x,previousScrollSnap:_,reInit:b,rootNode:D,scrollNext:E,scrollPrev:Z,scrollProgress:ie,scrollSnapList:X,scrollTo:H,selectedScrollSnap:c,slideNodes:te,slidesInView:R,slidesNotInView:W};return G(e,n),setTimeout(()=>l.emit("init"),0),re}Ne.globalOptions=void 0;function qe(t={},e=[]){const n=w.useRef(t),s=w.useRef(e),[i,a]=w.useState(),[o,d]=w.useState(),l=w.useCallback(()=>{i&&i.reInit(n.current,s.current)},[i]);return w.useEffect(()=>{He(n.current,t)||(n.current=t,l())},[t,l]),w.useEffect(()=>{Bn(s.current,e)||(s.current=e,l())},[e,l]),w.useEffect(()=>{if(En()&&o){Ne.globalOptions=qe.globalOptions;const u=Ne(o,n.current,s.current);return a(u),()=>u.destroy()}else a(void 0)},[o,a]),[d,i]}qe.globalOptions=void 0;const oe={carouselContainer:"_carouselContainer_1bu1s_1",viewport:"_viewport_1bu1s_11",slides:"_slides_1bu1s_17",slide:"_slide_1bu1s_17",slideInner:"_slideInner_1bu1s_37",loaderOverlay:"_loaderOverlay_1bu1s_45",image:"_image_1bu1s_55",loaded:"_loaded_1bu1s_66",empty:"_empty_1bu1s_78",controls:"_controls_1bu1s_84",arrows:"_arrows_1bu1s_94",dots:"_dots_1bu1s_104",dot:"_dot_1bu1s_104",dotActive:"_dotActive_1bu1s_130"},xt=L.Spinner,Tt=({images:t,autoPlay:e=!1,autoDelay:n=5,showArrows:s=!0,showDots:i=!0,variant:a,slidesPerView:o=1,slideSpacing:d=16,cornerRadius:l=0,"data-color":u,"data-size":y})=>{const f={loop:!0,align:"start",containScroll:"trimSnaps",slidesToScroll:1},[k,g]=qe(f),[h,b]=w.useState(0),[v,p]=w.useState([]),[m,T]=w.useState([]);w.useEffect(()=>{T(new Array((t==null?void 0:t.length)||0).fill(!1))},[t]);const N=w.useCallback(O=>{T(H=>{const E=[...H];return E[O]=!0,E})},[]),F=w.useMemo(()=>n*1e3,[n]),P=w.useCallback(()=>{g&&b(g.selectedScrollSnap())},[g]),I=w.useCallback(O=>g&&g.scrollTo(O),[g]),B=w.useCallback(()=>g&&g.scrollPrev(),[g]),M=w.useCallback(()=>g&&g.scrollNext(),[g]);w.useEffect(()=>{if(g)return g.on("select",P),g.on("reInit",P),p(g.scrollSnapList()),()=>{g.off("select",P),g.off("reInit",P)}},[g,P]),w.useEffect(()=>{g&&(g.reInit(),p(g.scrollSnapList()))},[g,t,o,d]),w.useEffect(()=>{if(!e||!g||!t||t.length<=1)return;const O=window.setInterval(()=>{g.canScrollNext()&&g.scrollNext()},F);return()=>{window.clearInterval(O)}},[e,F,g,t]);const G=Math.max(1,o),z=`${100/G}%`,K=d/2;return r.jsxs("div",{className:oe.carouselContainer,"data-color":u,"data-size":y,"data-variant":a,children:[r.jsx("div",{className:oe.viewport,ref:k,children:r.jsx("div",{className:oe.slides,style:{marginLeft:`-${K}px`,marginRight:`-${K}px`},children:t&&t.length>0?t.map((O,H)=>r.jsx("div",{className:oe.slide,style:{flex:`0 0 ${z}`,paddingLeft:`${K}px`,paddingRight:`${K}px`,borderRadius:l>0?`${l}px`:void 0,overflow:"hidden"},children:r.jsxs("div",{className:oe.slideInner,style:{borderRadius:`${l}px`,overflow:"hidden",position:"relative",width:"100%",height:"100%"},children:[!m[H]&&r.jsx("div",{className:oe.loaderOverlay,children:r.jsx(xt,{"aria-label":"Laster bilde"})}),r.jsx("img",{className:`${oe.image} ${m[H]?oe.loaded:oe.loadingImage}`,src:O.src,alt:O.alt,loading:H<G?"eager":"lazy",crossOrigin:"anonymous",onLoad:()=>N(H),onError:E=>{E.target.style.display="none",N(H)}})]})},`image-${H}-${O.src}`)):r.jsx("div",{className:oe.slide,style:{flex:"0 0 100%"},children:r.jsx("div",{className:oe.empty,children:"Ingen bilder"})})})}),(s||i&&t&&t.length>1)&&r.jsxs("div",{className:oe.controls,"aria-hidden":"false",children:[s&&r.jsxs("div",{className:oe.arrows,children:[r.jsx(ge,{variant:"primary",icon:!0,"aria-label":"Forrige bilde",onClick:B,disabled:!t||t.length<=1,children:r.jsx(de.ChevronLeftIcon,{"aria-hidden":!0})}),r.jsx(ge,{variant:"primary",icon:!0,"aria-label":"Neste bilde",onClick:M,disabled:!t||t.length<=1,children:r.jsx(de.ChevronRightIcon,{"aria-hidden":!0})})]}),i&&t&&t.length>1&&r.jsx("div",{className:oe.dots,role:"tablist","aria-label":"Bildeposisjon",children:v.map((O,H)=>{const E=H===h;return r.jsx("button",{type:"button",className:`${oe.dot} ${E?oe.dotActive:""}`,onClick:()=>I(H),"aria-label":`Gå til bilde ${H+1}`,"aria-selected":E,role:"tab"},`dot-${H}`)})})]})]})};Tt.displayName="Carousel";const uo=L.Details,mo=L.Dialog,go=L.Divider,Q=L.Dropdown,po=L.ErrorSummary,fo=L.Field,St=L.FieldDescription,wt=L.FieldCounter;St.displayName="Field.Description",wt.displayName="Field.Counter";const ho=L.Fieldset,Ct=w.forwardRef((t,e)=>r.jsx(L.Heading,{ref:e,...t}));Ct.displayName="Heading";const ko=L.Input,jt=w.forwardRef((t,e)=>r.jsx(L.Label,{ref:e,...t}));jt.displayName="Label";const Ae=L.Link,bo=L.List,vo=L.Pagination,yo=L.usePagination,Pe=w.forwardRef((t,e)=>r.jsx(L.Paragraph,{ref:e,...t}));Pe.displayName="Paragraph";const xo=L.Popover,To=L.Radio,So=L.useRadioGroup,Ee=Object.assign(L.Search,{Button:L.SearchButton,ClearButton:L.SearchClear,Input:L.SearchInput}),wo=L.Select,Co=L.Skeleton,jo=L.SkipLink,Dt=L.EXPERIMENTAL_Suggestion;Dt.displayName="Suggestion";const Me=L.Switch,Do=L.Table,Io=L.Tabs,Lo=L.Tag,Ao=L.Textarea,Eo=L.Textfield,Bo=L.ToggleGroup,_o=L.Tooltip,It=w.forwardRef((t,e)=>r.jsx(L.ValidationMessage,{ref:e,...t}));It.displayName="ValidationMessage";const Fo={NO:{header:{darkMode:"Nattmodus",toggleTheme:"Bytt tema",language:"Språk:",search:"Søk",searchPlaceholder:"Søk etter innhold...",closeSearch:"Lukk søk",openSearch:"Åpne søk",clearSearch:"Tøm søk",close:"Lukk",menu:"Meny",closeMenu:"Lukk meny",openMenu:"Åpne meny",login:"Logg inn",supportUs:"Støtt oss",suggestions:"Forslag til søk",viewAll:"Vis alle resultater",noResults:"Ingen treff funnet for",selectLanguage:"Velg språk",homeAriaLabel:"Norges Røde Kors Hjem",nav:{design:"Design",components:"Komponenter",code:"Kode",work:"Vårt arbeid",volunteer:"Bli frivillig",courses:"Kurs og opplæring"}},home:{heroTitle:"Røde Kors Designsystem",heroLead:"Felles komponentbibliotek og retningslinjer for design og utvikling av digitale løsninger i Røde Kors.",searchComponents:"Søk i komponenter",exploreSystem:"Utforsk systemet",componentsDesc:"Bibliotek med ferdige React-komponenter.",designDesc:"Farger, typografi og prinsipper.",codeDesc:"Dokumentasjon, arbeidsflyt og MCP.",universalDesign:"Universell utforming",universalDesignText:"Innebygd tilgjengelighet som standard. Vi følger WCAG 2.1-kravene strengt.",readGuidelines:"Les retningslinjene",consistentBrand:"Konsistent merkevare",consistentBrandText:"Design tokens sikrer at Røde Kors sin visuelle profil ivaretas på alle flater.",seeColors:"Se farger",efficientDev:"Effektiv utvikling",efficientDevText:"Spar tid med ferdige komponenter. Fokuser på funksjonalitet, ikke CSS.",exploreComponents:"Utforsk komponenter",quickActionsTitle:"Hopp rett inn",quickActionCodeTitle:"Start i kode",quickActionCodeText:"Se oppsett, tokens og eksempler.",quickActionDesignTitle:"Designguiden",quickActionDesignText:"Farger, typografi og prinsipper.",quickActionComponentsTitle:"Komponentbibliotek",quickActionComponentsText:"Utforsk og gjenbruk ferdige komponenter.",openCode:"Åpne kode",openDesign:"Åpne design",openComponents:"Åpne komponenter",featureStripTitle:"Nyttig akkurat nå",featureToken:"Oppdaterte designtokens",featureFont:"Source Sans 3 inkludert",featureComponent:"Nye komponentvarianter",featureSeeAll:"Se alle oppdateringer",profile:"Profil",name:"Navn Navnesen",volunteer:"Frivillig",save:"Lagre",approved:"Godkjent",rejected:"Avvist",darkModeLabel:"Mørk modus",importantMessage:"Viktig melding",updateGuidelines:"Husk å oppdatere retningslinjene...",all:"Alle",active:"Aktive",alerts:"Varsler",status:"Status"},components:{title:"Komponenter",intro:"Designsystemet inneholder grunnleggende komponenter som kan settes sammen på mange ulike måter og i forskjellige mønstre.",searchPlaceholder:"Søk etter komponent...",searchAriaLabel:"Søk i komponenter",noResults:"Ingen komponenter funnet for"},code:{sidebar:{overview:"Oversikt",workflow:"Arbeidsflyt",structure:"Struktur",contribute:"Bidra",home:"Startside",getStarted:"Kom i gang",designTokens:"Designtokens",fonts:"Fonter",icons:"Bruk av ikoner",figmaMcp:"Fra Figma til Kode (MCP)",componentCreation:"Komponent Kreasjon",metadataFiles:"Metadata filer",developerGuide:"Utviklerguide"},overview:{title:"Røde Kors Designsystem",intro:"Velkommen til Røde Kors Designsystem! Dette repositoriet inneholder et bibliotek med gjenbrukbare UI-komponenter bygget med React, skreddersydd for Norges Røde Kors sine digitale prosjekter.",text1:"Det er utviklet ved å utnytte grunnkomponentene fra Digdirs Designsystemet. Denne tilnærmingen sikrer en helhetlig og gjenkjennelig visuell identitet på tvers av alle applikasjoner for Røde Kors. Systemet er forhåndskonfigurert med det offisielle Røde Kors-temaet, som leveres via en dedikert designtoken-pakke.",text2:"Hovedmålet er å sikre merkevarekonsistens, forbedre utviklingseffektiviteten og opprettholde høye standarder for tilgjengelighet i alle Røde Kors-applikasjoner.",text3:"Storybook fungerer som den interaktive dokumentasjonen og utviklingsmiljøet for å vise og teste disse komponentene.",getStartedCard:"Kom i gang",getStartedDesc:"Installasjon, oppsett og retningslinjer for utviklere.",getStartedLink:"Kom i gang",designTokensCard:"Designtokens",designTokensDesc:"Lær hvordan du bruker designtokens og fonter.",designTokensLink:"Les mer",workflowCard:"Arbeidsflyt",workflowDesc:"Lær hvordan du bruker MCP-verktøy for å hente komponenter direkte fra Figma.",workflowLink:"Les guide"},getStarted:{title:"Kom i gang",intro:"For å ta i bruk Røde Kors Designsystem i din Next.js (eller annen React) applikasjon:",installationTitle:"1. Installasjon",installationText:"Installer de nødvendige npm-pakkene for prosjektet ditt. Du trenger tre pakker: selve komponentbiblioteket (rk-designsystem), grunnstilene fra Digdir, og Røde Kors-temapakken (rk-design-tokens).",githubLink:"Gå til GitHub Repository",npmTitle:"npm",yarnTitle:"yarn",pnpmTitle:"pnpm",note:"Merk: Du trenger ikke å installere @digdir/designsystemet-react separat, da alle nødvendige komponenter er inkludert i rk-designsystem-pakken.",stylesTitle:"2. Inkludering av stiler (CSS)",stylesText1:"For at komponentene skal styles riktig, må du importere stilarkene på øverste nivå i applikasjonen din, for eksempel i layout.tsx (for Next.js App Router) eller _app.tsx (for Next.js Pages Router).",stylesText2:"Viktig rekkefølge: Det er avgjørende at grunnstilarket (@digdir/designsystemet-css) lastes før Røde Kors-temafilen (rk-design-tokens). Dette sikrer at vårt temas tokens overstyrer standardverdiene korrekt.",appRouterExample:"Eksempel for Next.js (App Router - src/app/layout.tsx):",pagesRouterExample:"Eksempel for Next.js (Pages Router - pages/_app.tsx):",usageTitle:"3. Bruk av komponenter",usageText:"Når stilarkene er inkludert, kan du begynne å importere og bruke komponenter i prosjektet ditt. Alle komponenter du trenger er tilgjengelige direkte fra rk-designsystem-pakken.",importTitle:"3.1 Importer og bruk Røde Kors Designsystem-komponenter",nextjsExample:"3.2 Eksempel på bruk i en Next.js-side",updateText:"Utseendet til alle komponenter styres fullt ut av pakken rk-design-tokens. For å motta visuelle oppdateringer til merkevaretemaet (som en ny primærfarge), oppdaterer du ganske enkelt pakken til siste versjon:"},designTokens:{title:"Røde Kors Designtokens",intro:"Dette repositoriet er den sentrale kilden for alle designtokens (farger, typografi, avstander osv.) for Norges Røde Kors sine digitale produkter. Det fungerer som en sannhetskilde (single source of truth) som automatisk distribuerer stilendringer til alle tilkoblede prosjekter.",howToTitle:"Hvordan ta i bruk tokens",howToText:"For å bruke designtokens i ditt prosjekt, må du installere og konfigurere temapakken.",installTitle:"1. Installasjon",importTitle:"2. Importer CSS",importText:"I din applikasjons rot-layout (f.eks. layout.tsx), importer grunnstilarket før Røde Kors-temafilen.",fontTitle:"Hvordan legge til fonten",workflowTitle:"Automatisert arbeidsflyt for Designtokens (End-to-End)",workflowText:"Denne arbeidsflyten etablerer en helautomatisert pipeline som kobler designprosessen vår direkte til live produksjonsapplikasjoner. Når en designer oppdaterer stilen i Figma, bygger, versjonerer og publiserer dette systemet automatisk en ny stilpakke til npm. Deretter varsles Vercel-prosjektene våre, som oppdaterer seg selv og redeployer med de nye stilene.",phase1Title:"Fase 1: En Designer gjør en endring (Publisist)",phase1Item1:"Design i Figma: En designer gjør en endring på en farge, font eller annen designtoken.",phase1Item2:"Push til GitHub: Ved bruk av Token Studio-pluginet pusher designeren endringene. Dette committer automatisk de oppdaterte JSON-filene til main-branchen.",phase1Item3:"Trigge Publisher Workflow: Denne pushen trigger umiddelbart GitHub Action definert i .github/workflows/publish.yml.",phase1Item4:"Bygg & Commit Artefakter: Workflowen kjører npm run build for å generere CSS fra JSON-filene og committer resultatene.",phase1Item5:"Versjonering & Release: Workflowen kjører npm version patch for å øke versjonsnummeret, lage en release-commit, og tagge den.",phase1Item6:"Publiser til npm: Til slutt publiserer workflowen den nye versjonen av pakken til npm-registeret.",phase2Title:"Fase 2: Varsling av applikasjoner (Signalet)",phase2Text:"Send et Dispatch-signal: Etter en vellykket publisering, sender workflowen et repository_dispatch-signal til konsumentprosjekter som rk-designsystem for å varsle om den nye versjonen.",phase3Title:"Fase 3: Automatisk oppdatering og redeploy (Konsumentene)",phase3Item1:'Trigge Consumer Workflow: Dispatch-signalet starter en "Update"-workflow i konsumentprosjektene.',phase3Item2:"Oppdater Avhengigheter: Workflowen kjører npm update rk-design-tokens for å hente den siste versjonen.",phase3Item3:"Commit & Push Oppdateringen: Workflowen committer den oppdaterte package-lock.json-filen.",phase3Item4:"Vercel Auto-Deploys: Vercels Git-integrasjon oppdager den nye commiten og starter automatisk en ny deployment."},fonts:{title:"Fonter",intro:"Røde Kors Designsystem bruker fonten Source Sans 3. For at typografien skal vises korrekt i applikasjonen din, må denne fonten lastes inn.",howToTitle:"Hvordan legge til fonten",howToText:"Du kan inkludere fonten ved å legge til følgende linjer i <head>-elementet i din HTML eller i rot-layouten din:",afterLoadTitle:"Etter lasting",afterLoadText:"Når fonten er lastet, vil CSS-variablene fra rk-design-tokens automatisk ta den i bruk (--ds-font-family).",nextjsTitle:"Eksempel for Next.js",nextjsText:"For Next.js App Router, legg til fonten i layout.tsx:",nextjsPagesText:"For Next.js Pages Router, legg til fonten i _app.tsx eller _document.tsx:",cssVariablesTitle:"CSS-variabler",cssVariablesText:"Etter at fonten er lastet, bruker designsystemet automatisk CSS-variabelen --ds-font-family som er definert i rk-design-tokens pakken. Du trenger ikke å spesifisere fonten manuelt i komponentene dine."},icons:{title:"Bruk av Ikoner",intro:"Dette biblioteket er designet for å fungere sømløst med det offisielle ikonsettet fra NAV/Aksel.",installTitle:"Installasjon",importTitle:"Import og bruk",importText:"Ikoner eksporteres som navngitte React-komponenter. Importer kun de ikonene du trenger (tree‑shakable):",accessibilityTitle:"Tilgjengelighetsguide",accessibilityItem1:"Ikon + synlig tekst: sett aria-hidden på ikonet slik at skjermlesere ikke leser det opp to ganger.",accessibilityItem2:"Ikon-kun triggere (f.eks. en knapp): legg til en beskrivende aria-label på triggeren, behold ikonet aria-hidden.",accessibilityItem3:"Farge: ikoner arver currentColor; bruk komponentens variant/farge for å styre det (f.eks. knappevarianter, tag-farger).",accessibilityItem4:`Størrelse: sett fontSize (f.eks. fontSize="1.25rem") eller inline style (f.eks. style="{ fontSize: '1.25rem' }").`,performanceTitle:"Ytelse",performanceText:"Bruk navngitte importer fra @navikt/aksel-icons for å holde pakkestørrelsen nede – ubrukte ikoner fjernes (tree-shaken) av moderne bundlere."},contributing:{title:"Bidra til Biblioteket",intro:"Denne guiden gir et sett med standarder og beste praksis for å lage nye komponenter. Å følge disse retningslinjene sikrer at komponentbiblioteket vårt forblir konsistent, tilgjengelig og enkelt å vedlikeholde.",getStartedTitle:"Kom i gang (for bidragsytere)",getStartedText:"Følg disse stegene for å kjøre det lokale utviklingsmiljøet. Alle kommandoer skal kjøres fra roten av prosjektet.",principlesTitle:"Kjerneprinsipper",principlesText:"Hver komponent vi bygger bør følge disse kjerneprinsippene:",principlesA11y:"Tilgjengelighet (A11y): Komponenter må kunne brukes av alle, inkludert personer med nedsatt funksjonsevne. Dette betyr korrekte ARIA-attributter, tastaturnavigasjon og semantisk HTML.",principlesReuse:"Gjenbrukbarhet: Komponenter bør være generiske nok til å brukes i flere kontekster uten modifikasjon.",principlesConsistency:"Konsistens: Komponenter skal følge våre etablerte designtokens (farger, avstander, typografi) og ha et konsistent API og struktur.",principlesDocs:"Dokumentasjon: Hver komponent må dokumenteres i Storybook for å gjøre den oppdagbar og enkel å bruke for andre utviklere.",whenTitle:"Når skal man lage en ny komponent",whenText:"Før du begynner å kode, avgjør hvilken type komponent du trenger. De fleste av våre behov faller inn i en av tre kategorier:",wrappedSimpleTitle:"Wrapped Component (Enkel):",wrappedSimpleWhat:"Hva det er: En komponent som direkte wrapper og re-eksporterer en komponent fra @digdir/designsystemet-react uten modifikasjoner.",wrappedSimpleWhen:"Når den skal brukes: Når den grunnleggende Digdir-komponenten dekker behovene våre perfekt, men vi ønsker å inkludere den i vårt eget bibliotek for en konsistent importkilde.",wrappedSimpleExample:"Eksempel: Buttons-komponenten er et perfekt eksempel på dette.",wrappedStyledTitle:"Wrapped Component (med stiloverstyringer):",wrappedStyledWhat:"Hva det er: En wrappet Digdir-komponent hvor vi bruker tilpasset CSS for å justere utseendet slik at det passer bedre til Røde Kors sitt spesifikke designspråk.",wrappedStyledWhen:"Når den skal brukes: Når en Digdir-komponent er funksjonelt korrekt, men trenger visuelle justeringer (f.eks. andre ikoner, border-radius, padding).",wrappedStyledExample:"Eksempel: Alert-komponenten, som bruker composes i CSS for å arve grunnstiler og deretter påføre egne overstyringer.",customTitle:"Custom Component (fra bunnen):",customWhat:"Hva det er: En helt ny komponent bygget når ingen eksisterende Digdir-komponent dekker kravene våre.",customWhen:"Når den skal brukes: For unike UI-mønstre eller funksjonalitet som ikke dekkes av grunnbiblioteket.",customExample:"Eksempel: DateInput-komponenten er en tilpasset komponent med egen tilstand, logikk og styling.",fileStructureTitle:"Filstruktur for komponenter",fileStructureText:"For å opprettholde konsistens, bør hver ny komponent følge denne filstrukturen. Lag en ny mappe under src/components/ med komponentens PascalCase-navn.",codingGuidelinesTitle:"Retningslinjer for koding",componentLogicTitle:"1. Komponentlogikk (MyNewComponent.tsx)",logicTypeScript:"TypeScript først: Alle komponenter må skrives i TypeScript. Definer et Props-interface for komponenten din, som utvider fra grunnleggende HTML-element eller Digdir-komponentprops hvis aktuelt.",logicForwardRef:"Forward Refs: Bruk alltid React.forwardRef for å tillate foreldrekomponenter å få en ref til det underliggende DOM-elementet.",logicA11y:"Tilgjengelighet er obligatorisk:",logicA11yItem1:"Bruk semantisk HTML (<button>, <label>, <nav>).",logicA11yItem2:"Sørg for at alle interaktive elementer kan fokuseres og betjenes med tastatur.",logicA11yItem3:"Gi aria-label for knapper som kun har ikon eller elementer hvor tekstetiketten ikke er synlig.",logicA11yItem4:"Bruk aria-invalid, aria-describedby, osv., for å kommunisere tilstand til hjelpemidler.",logicControlled:"Controlled vs. Uncontrolled: Hvis komponenten din har tilstand (som en input), bør den støtte både kontrollerte (value + onChange) og ukontrollerte (defaultValue) mønstre.",logicProps:"Props-navngiving: Bruk data-* attributter for stylingvarianter (f.eks. data-size, data-color) for å samkjøre med mønstrene i våre eksisterende komponenter.",stylingTitle:"2. Styling (styles.module.css)",stylingModules:"CSS Modules: For tilpassede komponenter må alle stiler plasseres i en styles.module.css-fil. Dette scoper klassenavn lokalt og forhindrer globale stilkonflikter.",stylingTokens:"Designtokens: Bruk alltid våre designtokens (var(--ds-...)) for farger, avstander, fonter, osv. Ikke bruk hardkodede verdier (f.eks. #FFF, 16px).",stylingOverride:"Overstyring av Wrapped Components: For wrapped components, bruk en standard CSS-fil. Bruk @layer og composes nøkkelord for å utvide grunnleggende Digdir-stiler uten å øke CSS-spesifisiteten unødvendig.",documentationTitle:"3. Dokumentasjon (MyNewComponent.stories.tsx)",docsStorybook:"Din Storybook-fil er den offisielle dokumentasjonen. Den må være tydelig og omfattende.",docsMeta:"meta Object: Definer komponentens tittel, komponentreferanse, og tags: ['autodocs'] for å aktivere automatisk dokumentasjon.",docsArgTypes:"argTypes: Dokumenter hver enkelt prop. Gi en beskrivelse, kontrolltype (f.eks. select, boolean, text), og alternativer hvis aktuelt. Dette driver de interaktive kontrollene i Storybook.",docsStories:"Lag flere Stories: Lag en egen story for hver nøkkeltilstand og variant av komponenten din (f.eks. Default, Disabled, WithError, WithIcon).",processTitle:"Bidragsprosess",processPRTitle:"Opprett en Pull Request (PR):",processBranch:"Opprett en Branch: Pull de siste endringene fra main-branchen og opprett en ny feature-branch: git checkout -b feat/min-nye-komponent.",processDraft:"Åpne en Draft PR: Så snart du starter, åpne en draft pull request på GitHub. Dette forhindrer dobbeltarbeid og lar andre se hva du jobber med.",processCommit:"Commit endringene dine: Mens du jobber, lag små, logiske commits.",processReview:'Klar for gjennomgang: Når utviklingen er ferdig og alle automatiserte sjekker passerer, merk PR-en som "Ready for review" og be om en gjennomgang fra designsystem-forvalterne.'},figmaMcp:{title:"Fra Figma til Kode med MCP",intro:"Vi bruker Model Context Protocol (MCP) for å koble Figma direkte til utviklingsmiljøet. Dette gjør det mulig å hente ut designspesifikasjoner, tokens og kodestrukturer automatisk.",processTitle:"Prosess",processItem1:"Identifiser komponenten i Figma: Finn `node-id` til komponenten eller seksjonen du vil implementere.",processItem2:'Kopier lenke: Høyreklikk på noden i Figma, velg "Copy link" for å få en URL som inneholder både fil-nøkkel og node-ID.',processItem2Caption:"Høyreklikk på en node i Figma og velg 'Copy link' for å få en direkte lenke.",processItem3:"Gi kontekst og lenke: Det anbefales å legge ved theme.css (for tokens) og metadata.json (for komponenter) som kontekst i chatten. Lim deretter inn Figma-lenken.",processItem3Caption:"Legg ved theme.css og metadata.json for bedre resultat.",processItem4:"Motta kodeforslag: Verktøyet genererer React-kode basert på designet, inkludert bruk av våre eksisterende komponenter (som Heading, Button, Paragraph).",processItem5:"Tilpass og implementer: Juster koden til å passe inn i prosjektstrukturen, og verifiser mot design-tokens.",benefitsTitle:"Fordeler",benefit1:"Raskere implementasjon av nye komponenter.",benefit2:"Sikrer at riktige tokens blir brukt automatisk.",benefit3:"Reduserer avstand mellom design og kode."},metadataFiles:{title:"Metadata-filer",intro:"For å holde oversikt over komponentene og deres kobling til Figma, bruker vi metadata-filer.",whatTitle:"Hva inneholder de?",whatText:"Metadata-filene (som `metadata.json`) er ryggraden i dokumentasjonen vår. De definerer nøyaktig hvilke props hver komponent støtter, datatyper, standardverdier og beskrivelser. Dette gjør at vi kan generere dokumentasjon automatisk og sikre konsistens mellom design og kode.",whatItem1:'componentName: Navnet på komponenten (f.eks. "Button").',whatItem2:'importPath: Hvor komponenten importeres fra (f.eks. "rk-designsystem").',whatItem3:"props: En liste over alle tilgjengelige props, inkludert:",whatItem3Sub1:'name: Navnet på proppen (f.eks. "variant", "disabled").',whatItem3Sub2:'type: Datatypen (f.eks. "boolean", "enum", "string").',whatItem3Sub3:"description: Forklaring av hva proppen gjør.",whatItem3Sub4:"defaultValue: Standardverdien hvis proppen ikke settes.",whatItem3Sub5:"required: Om proppen er påkrevd eller valgfri.",howTitle:"Hvordan bruke dem?",howText:"Når du oppretter en ny komponent, bør du også oppdatere metadata-filen slik at automatiske verktøy og dokumentasjonssider (som denne) kan finne og vise riktig informasjon."},componentCreation:{title:"Komponent Kreasjon med MCP og Design Tokens",intro:"Vi bruker Model Context Protocol (MCP) og AI-assistanse for å oversette Figma-design direkte til produksjonsklare React-komponenter. Denne flyten sikrer at nye komponenter følger designsystemet, bruker CSS Modules, og gjenbruker eksisterende kode.",processTitle:"Prosess",processText:'Når du sender en prompt (f.eks. "make a version where you can have 4 cards below [url]"), håndterer Figma MCP følgende steg automatisk i bakgrunnen:',step1Title:"1. Identifisering og Metadata",step1Item1:'Identifiser kilden: MCP leser URL-en og finner Node-ID for komponenten i Figma (f.eks. 1:3539 for "Hero 3").',step1Item2:"Hent dimensjoner: MCP henter automatisk informasjon om nodens størrelse, struktur og posisjonering for å sette rammeverket for layouten.",step2Title:"2. Henting av Design Context og Kodeutkast",step2Item1:"Generer utkast: MCP analyserer Figma-noden og genererer et førsteutkast til React-kode.",step2Item2:"Automatisk gjenkjenning: Verktøyet identifiserer om designet inneholder elementer som allerede finnes i biblioteket vårt.",step2Item3:'Eksempel: Hvis Figma-noden inneholder en knapp, vil MCP foreslå `import Button from "src/components/Button.tsx"` i stedet for å generere ny HTML for knappen.',step2Item4:"Rensing: Systemet filtrerer bort unødvendige wrappers og absolutte stier før koden presenteres.",step3Title:"3. Token-Mapping og Variabel-definisjoner",step3Item1:"Analyser tokens: MCP analyserer automatisk hvilke design-tokens som er brukt i Figma-filen (via `get_variable_defs` logikk i bakgrunnen).",step3Item2:"Mapping til CSS: Den oversetter Figma-verdier til våre definerte CSS-variabler.",step3Item3:'Figma: "color/main/base-default": "#d52b1e"',step3Item4:"CSS: Mappes til `var(--ds-color-primary-color-red-base-default)` (eller tilsvarende fra theme.css).",step3Item5:"Typografi: Font-definisjoner oversettes automatisk til korrekte typografi-klasser.",step4Title:"4. Automatisk Kobling mot Eksisterende Komponenter",step4Item1:"Verifisering: Figma MCP sjekker designet opp mot metadata.json og repositoryet vårt (via `get_code_connect_map` logikk i bakgrunnen).",step4Item2:"Implementasjon: Dette sikrer at koden som genereres automatisk tar i bruk rk-designsystem sine komponenter der det er mulig.",step4Item3:"Eksempel: Den ser at et element i Figma tilsvarer `src/components/Button.tsx` og genererer koden med korrekt komponent-import.",step5Title:"5. Struktur og Ferdigstilling",step5Text:"Resultat: Basert på analysen over, produserer AI-en de ferdige filene du trenger:",step5Item1:"`index.ts` (Eksport)",step5Item2:"`[KomponentNavn].tsx` (Logikk, prop-definisjoner fra metadata.json)",step5Item3:"`[KomponentNavn].module.css` (Styling basert på tokens)",step5Item4:"`[KomponentNavn].stories.tsx` (Dokumentasjon og varianter)",step5Variant:'Variant-håndtering: Logikk for varianter (f.eks. "stacked" vs "side-by-side") implementeres basert på din prompt og Figma-layouten.',automationTitle:"Automatisering vs. Manuell Kvalitetssikring",automationText1:"Selv om MCP-verktøyene automatiserer mye av kodingen ved å hente strukturer og tokens direkte fra Figma, er det ikke en 100% sømløs overføring. Den genererte koden fungerer som et solid fundament, men en utvikler må alltid se over, kvalitetssikre og tilpasse logikken.",automationText2:"Verktøyene fjerner det repetitive manuelle arbeidet med oppsett og styling, slik at utvikleren kan fokusere på funksjonalitet, tilgjengelighet og edge-cases. Det er en effektiviseringsprosess, ikke en erstatning for utviklerkompetanse.",benefitsTitle:"Fordeler med denne flyten",benefit1:'Presisjon: Automatisk uthenting av variabler forhindrer "magiske tall" og hardkodede hex-koder.',benefit2:"Gjenbruk: Automatisk sjekk mot eksisterende komponenter hindrer duplisering av kode.",benefit3:"Effektivitet: Du trenger kun å gi en URL og en intensjon; MCP håndterer de tekniske oppslagene.",benefit4:"Vedlikehold: Koblingen mot `theme.css` og `metadata.json` gjør at komponentene tåler oppdateringer i designsystemet."}},design:{sidebar:{forDesigners:"For Designere",getStarted:"Kom i gang",colors:"Farger",contribute:"Bidra med design",designElements:"Designelementer",designTokens:"Design Tokens",shadows:"Skygger",sizes:"Størrelse og avstander",typography:"Typografi",figmaConnect:"Figma tilkobling",startup:"Oppstart",newComponent:"Lage ett nytt komponent",examples:"Praktiske eksempler",tokenStudio:"Token Studio",colorSystem:"Sette opp ditt eget fargesystem",themeBuilder:"Designsystemets temagenerator",useColors:"Bruk fargene du har generert",proposeDesign:"Foreslå nytt design eller forbedringer",whatAreTokens:"Hva er design tokens",tokensInFigma:"Design tokens i Figma",colorStructure:"Navnestruktur",colorOverview:"Oversikt og forklaringer av farger",colorTokens:"Farge-tokens",shadowUsage:"Bruk av skygger i designet",shadowTokens:"Skygge-tokens",componentSizes:"Komponentstørrelser",sizeTokens:"Størrelse-tokens",fontFamily:"Font-family",typoTokens:"Typografi-tokens"},intro:{title:"Design i Røde Kors",welcome:"Velkommen til designdokumentasjonen.",getStarted:"Kom i gang",goToGuide:"Gå til guide",colors:"Farger",seeColors:"Se farger"},tokens:{whatIsTitle:"Hva er design tokens",whatIsText1:'"Design Tokens" styrer hvordan komponentene skal se ut i forhold til farger, typografi, størrelser, avstander, former osv. Design tokens sørger vi for at både designere og utviklere arbeider etter de samme reglene og retningslinjene.',whatIsText2:"Noen av variablene er lagt opp til å være tema-baserte, det vil si at de tar utgangspunkt i din merkevare med de fargene og preferansene du selv velger. Vi jobber med en tema-bygger som skal gjøre det enklere for deg å tilpasse stilene.",whatIsText3:"Design Tokens er fleksible variabler som kan benyttes uavhengig av teknologi eller designverktøy.",figmaTitle:"Design tokens i Figma",figmaText1:'Vi bruker Figma-pluginen "Tokens Studio", da denne lar oss administrere flere stiler og egenskaper enn Figma i seg selv kan.',figmaText2:"Pluginen har som mål å være W3C-kompatibel og retter seg etter standarden som etableres av W3C Design Tokens Community Group. Tokens-verdiene er dermed ikke låst til et verktøy - JSON-filen kan flyttes til andre verktøy dersom det skulle bli aktuelt.",themesTitle:"Flere sett og themes",themesText:"Bruk av variabler og tokens gjør det mulig å ha ett designsystem med ulike identiteter. Vi kan lage en komponent i Figma kun èn gang og style den mange ganger - Med et klikk kan vi slå på et annet theme som for eksempel aktiverer en annen fargepalett eller et annet sett med størrelser. Ved å dele tokens inn i både sets og themes, kan vi tilby avanserte former for gjenbruk.",themesCaption:'Videoen over viser at når settet for "Tilsynet" slås på, overstyres både fargene som er i bruk i filen og stilene som er tilgjengelig i høyremargen byttes ut.'},colorStructure:{title:"Navnestruktur",intro:"Fargesystemet består av globale farger som refererer til hva fargen er (eks. red-1) og et semantisk nivå som beskriver hva fargen skal brukes til (eks. Text.Danger).",structureTitle:"Navnestruktur",structureText1:"Fargene i Designsystemet er strukturert med en semantisk betydning. Dette betyr at de er definert etter funksjon og bruk, ikke bare etter hvordan de ser ut. Det gjør det lettere å velge riktig farge fordi du slipper å vurdere selve fargetonen og kan fokusere på hva fargen skal formidle i stedet.",structureText2:"Fargenavnene i Designsystemet er delt opp i 3 ledd: Navn på fargeskala, gruppe (bruksområde) og variant. Disse leddene beskriver hvordan fargene er bygget opp og hvordan de skal brukes.",structureCaption:"Viser oppdelingen av fargenavn i 3 ledd",nameLabel:"Navn:",nameText:"Det første leddet og navnet på fargeskalaen. Som standard kommer Designsystemet med fargeskalaene Success, Danger, Warning, Info og Neutral. Flere skalaer kan legges til ved hjelp av Temabyggeren.",groupLabel:"Gruppe:",groupText:"Hver fargeskala er delt inn i gruppene Background, Surface, Border, Text og Base. Disse gruppene beskriver bruksområdene til fargene. Text-gruppen skal for eksempel brukes på tekst og ikoner.",groupsCaption:"Viser en fargeskala og de 5 gruppene som fargene er delt inn i.",variantLabel:"Variant:",variantText:"Inne i hver gruppe finnes det varianter som beskriver hvordan fargene ser ut eller skal brukes. Tinted betyr for eksempel at fargen har et hint av farge i seg, mens Hover betyr at fargen er tenkt brukt for en interaktiv tilstand."},colorOverview:{title:"Oversikt og forklaring av farger",intro:"Hver fargeskala består av totalt 16 farger, utformet for å dekke ulike behov i designet. Nedenfor finner du en oversikt over de forskjellige fargene og deres tiltenkte bruksområder.",semanticCaption:"Viser hvordan de semantiske fargene kan brukes i designet. Eksempelet bruker fire forskjellige fargeskalaer: Danger, Neutral og to blåskalaer",tableName:"Navn",tableUsage:"Bruksområde",backgroundDefault:"Standard bakgrunnsfarge",backgroundTinted:"Bakgrunn med et hint av farge i seg",surfaceDefault:"Standardfarge for overflater / komponenter",surfaceTinted:"Overflater / komponenter med et hint av farge i seg",surfaceHover:"Hover-farge til overflater / komponenter",surfaceActive:"Active-farge til overflater / komponenter",borderSubtle:"Border-farge med lav kontrast til dekorativ bruk (skillelinjer)",borderDefault:"Standard border-farge til skjemakomponenter og meningsbærende elementer",borderStrong:"Border-farge med høy kontrast for ekstra synlighet",textSubtle:"Tekst- og ikonfarge med lavere kontrast",textDefault:"Tekst- og ikonfarge med høy kontrast og god synlighet",baseDefault:"Standardfarge for solide bakgrunner",baseHover:"Hover-farge for solide bakgrunner",baseActive:"Active-farge for solide bakgrunner",baseContrastSubtle:"Farge med god kontrast mot Base-default",baseContrastDefault:"Farge med god kontrast mot Base-default og Base-hover",backgroundTitle:"Background",backgroundText:"Background-fargene brukes for å fargelegge store flater og er ofte det bakerste laget på en nettside. Det er vanlig å bruke disse fargene på body-elementet.",backgroundDefaultDesc:"Background-default er den lyseste og mest nøytrale bakgrunnsfargen",backgroundTintedDesc:"Background-tinted får et hint av farge i seg og kan brukes for å skape variasjon i bakgrunnslaget",surfaceTitle:"Surface",surfaceText:"Surface-fargene brukes til å fargelegge elementer som ligger over background-fargene, som for eksempel paneler eller kort (cards). Disse fargene fungerer som forgrunnsfarger og bidrar til å skape dybde i designet ved å skille elementer fra bakgrunnen. I mørk modus blir disse fire fargene gradvis lysere, med Surface-active som den lyseste.",surfaceDefaultDesc:"Surface-default er helt hvit i lys modus og brukes som standard bakgrunnsfarge på elementer.",surfaceTintedDesc:"Surface-tinted får et hint av farge i seg og kan brukes for å skille elementer fra bakgrunnen.",surfaceHoverDesc:"Surface-hover kan brukes til hover-tilstander for elementer eller til å skape visuelle hierarkier i Surface-laget når den kombineres med Surface-tinted og Surface-active.",surfaceActiveDesc:"Surface-active kan brukes til active-tilstander for elementer eller til å forsterke hierarkiet i Surface-laget sammen med Surface-tinted og Surface-hover.",surfaceTintedCaption:"Viser hvordan Surface-tinted ser ut for 7 fargeskalaer generert med Temabyggeren.",borderTitle:"Border",borderText:"Border-fargene brukes for å fargelegge rammer (strokes) til elementer.",borderSubtleDesc:"Border-subtle har lav kontrast mot background- og surface-fargene og bør kun brukes til dekorative formål. Vanlige bruksområder er skillelinjer og dekorative rammer. Fargen bør ikke være den eneste visuelle indikatoren på at et element er interaktivt.",borderDefaultDesc:"Border-default brukes på skjemakomponenter eller på andre meningsbærende rammer. Fargen har god kontrast (over 3:1) mot alle background-fargene, Surface-default og Surface-tinted.",borderStrongDesc:"Border-strong har god kontrast (over 3:1) mot alle background- og surface-fargene og kan brukes på rammer for å gjøre elementer ekstra synlige.",bordersCaption:"Første rad viser farger med Border-subtle, mens den andre raden viser Border-default.",textTitle:"Text",textText:"Text-fargene brukes på tekst og ikoner.",textSubtleDesc:"Text-subtle er en lys tekstfarge som kan brukes for å skape variasjon i typografien eller for å indikere hierarkiske nivåer av viktighet. Den forsøker også å bevare mest mulig av fargemetningen fra den opprinnelige fargen valgt i Temabyggeren. Fargen har god kontrast (4.5:1) mot alle background-fargene, Surface-default og Surface-tinted.",textDefaultDesc:"Text-default er en tekstfarge med høy kontrast, optimal for lesbarhet. Den bør brukes på hovedinnholdet og den primære teksten på en side. Denne fargen i Neutral varianten kan være en fin farge å bruke på mesteparten av teksten. Fargen har god kontrast (4.5:1) mot alle background- og surface-fargene.",textColorsCaption:"Viser hvordan Text-default og Text-subtle ser ut for 8 forskjellige fargeskalaer generert med Temabyggeren.",baseTitle:"Base",baseText1:"Base-fargene brukes for å fargelegge solide bakgrunner, som for eksempel knapper og andre interaktive elementer. Fargene bidrar til å lede oppmerksomheten mot viktige designelementer og etablere et visuelt hierarki i forhold til mindre fremtredende elementer. Samtidig skaper de kontrast mot background- og surface-fargene, noe som forsterker lesbarhet og visuell tydelighet.",baseText2:"Base-hover og Base-active fargene genereres ut fra lysheten eller mørkheten til Base-default fargen fra samme fargeskala for å skape jevne visuelle overganger mellom tilstandene. Kontrastfargene blir enten hvite eller svarte avhengig av lysstyrken til Base-default fargen for å sikre god kontrast og lesbarhet.",baseDefaultDesc:"Base-default kan brukes for å fargelegge solide bakgrunner til elementer. Fargen (hex-koden) som blir valgt i temabyggeren blir plassert under Base-default.",baseHoverDesc:"Base-hover kan brukes til hover-tilstander for solide elementer eller til å skape visuelle hierarkier i Base-laget når den kombineres med Base-default og Base-active.",baseActiveDesc:"Base-active kan brukes til active-tilstander for solide elementer eller til å forsterke hierarkiet i Base-laget sammen med Base-default og Base-hover.",baseContrastSubtleDesc:"Base-contrast-subtle har god kontrast (4.5:1) mot Base-default fargen fra samme fargeskala og kan trygt brukes som tekst-farge mot denne.",baseContrastDefaultDesc:"Base-contrast-default har god kontrast (4.5:1) mot Base-default og Base-hover fargene fra samme fargeskala, og kan trygt brukes som en tekst-farge mot disse.",baseColorsCaption:"Viser bokser med Base-default som bakgrunn og Base-contrast-default som tekstfarge."},colorTokens:{title:"Farge-tokens",intro:"Fargene under er eksempler fra et tilfeldig tema. Bruk temabyggeren for å generere dine egne farger og navn.",lightCaption:"Et tilfeldig generert fargesystem fra Designsystemet.no",darkCaption:"Et tilfeldig generert fargesystem fra Designsystemet.no, mørkt modus"},shadowUsage:{title:"Bruk av skygger i designet",intro1:"Skygger bør brukes bevisst og konsistent da de uttrykker at noe ligger over noe annet i løsningen.",intro2:"Skygger kan hjelpe svaksynte til å identifisere komponenter. Bruk av skygger og konturer gjør det enklere og raskere å finne en komponent når du skanner sider. (Research: Material Design)",strengthsTitle:"Styrker",strengthsText:"Vi har ulike styrker på skyggene, fra xsmall til xlarge. De ulike styrkene brukes for å antyde høyden til overflaten. Overflater i høyere høyder har større skygger, mens de på lavere høyder bør ha mindre skygger. Skygger skal skape et hierarki slik at det som ligger over eller under noe annet kommer tydeligere frem."},shadowTokens:{title:"Skygge-tokens",tokensTitle:"Tokens",tokensText:"Pass på at du har lys modus aktivert for å se skyggene. Skygger er ikke ment for bruk i mørk modus, da de er basert på mørkere fargetoner. For å skape hierarki og kontrast i mørk modus er det bedre å benytte andre virkemidler som for eksempel lyse kanter.",exampleTitle:"Eksempel",exampleText:"Popover er en komponent som legger seg over annet innhold. Dette tydeliggjøres ved bruk av en medium skygge.",exampleCaption:"Popover komponentet dekker over the andre innholdet."},componentSizes:{title:"Komponentstørrelser",intro:"De fleste komponentene i designsystemet finnes i tre anbefalte størrelser: Small, Medium og Large (sm, md, lg). Disse er utviklet for å tilpasse seg ulike behov på tvers av skjermstørrelser og bruksområder.",sizesCaption:"Størrelser for komponenter i Designsystemet.",smallTitle:"Small",smallText:"Small er ideell for kompakte grensesnitt der plassutnyttelse er viktig, som på mobile enheter, ekspertverktøy eller administrasjonsgrensesnitt. Det er anbefalt å bruke denne størrelsen på nettsider med en basefont på 16px.",mediumTitle:"Medium",mediumText:"Medium fungerer som standard for de fleste vanlige bruksområder, og er anbefalt å bruke sammen med en basefont på 18px. Størrelsen gir en god balanse mellom lesbarhet og plassutnyttelse og egner seg spesielt godt for desktop-grensesnitt og større visningsflater.",largeTitle:"Large",largeText:"Large gir økt lesbarhet og tydelighet. Den kan brukes i desktop-grensesnitt eller når synlighet og tilgjengelighet er viktig. Den kan også brukes i en avgrenset kontekst på siden, for å fremheve sentrale elementer. Det er anbefalt å bruke størrelsen sammen med en basefont på 21px.",mediumSizeCaption:"Mange av medium-komponentene har en fast høyde på 48px.",harmonyText:"Komponenter innenfor en bestemt størrelse er designet for å fungere sammen. For eksempel har mange medium-komponenter en høyde på 48px og en basefont på 18px, noe som sikrer en harmonisk visuell balanse når de plasseres ved siden av hverandre.",combinedCaption:"Eksempel der Medium og Large komponenter er brukt sammen.",consistencyText:"For å opprettholde et helhetlig og oversiktlig design anbefales det å bruke faste størrelser innenfor en gitt nettside eller kontekst. Mange ulike kombinasjoner av størrelser kan føre til et rotete og uoversiktlig design.",combinationText:"I enkelte tilfeller kan komponenter i ulike størrelser kombineres for å skape bedre visuelle hierarkier og brukervennlighet. I eksempelet ovenfor er søkefeltseksjonen større og mer fremtredende enn komponentene i headeren, fordi søkefunksjonen er en sentral del av siden. Den økte størrelsen gjør den mer synlig og lett tilgjengelig for brukeren."},sizeTokens:{title:"Størrelse-tokens",tokensTitle:"Tokens",tokensText:"Pass på at du har lys modus aktivert for å se skyggene. Skygger er ikke ment for bruk i mørk modus, da de er basert på mørkere fargetoner. For å skape hierarki og kontrast i mørk modus er det bedre å benytte andre virkemidler som for eksempel lyse kanter.",exampleTitle:"Eksempel",exampleText:"Popover er en komponent som legger seg over annet innhold. Dette tydeliggjøres ved bruk av en medium skygge."},fontFamily:{title:"Font-family",intro:"For å presentere tekst på korrekt måte er det laget stiler som har ulike kombinasjoner av størrelse, fontvekt og linjehøyde. Det er også laget et sett med typografi-komponenter som innkapsler disse stilene, slik at de enkelt kan brukes i ulike sammenhenger. Beskrivelse av hvordan typografi-komponenter brukes finner du i komponentartikkelen Typography."},typoTokens:{title:"Typografi-tokens",comingSoon:"Innhold kommer snart."},figmaConnect:{title:"Kom i gang med designsystemet (Figma)",intro:"Denne veiledningen hjelper deg med å komme i gang med å designe ved hjelp av det delte designsystemet i Figma. Du får en innføring i hvordan du bruker komponenter, tokens og stiler fra det sentrale biblioteket.",prerequisites:"Forutsetninger",prerequisitesIntro:"Før du starter trenger du:",figmaAccount:"Figma - En aktiv Figma-konto (gratis eller betalt)",access:"Access - Tilgang til Røde Kors sitt Figma-bibliotek (kontakt teamansvarlig hvis du mangler tilgang)",createFile:"Opprett eller åpne en arbeidsfil",createFileText:"Opprett en ny Figma-fil, eller åpne en eksisterende prosjektfil hvor du skal ta i bruk designsystemet.",activateLibraries:"Aktiver designsystemets biblioteker",goToAssets:"Gå til Assets-panelet i Figma",openLibrary:"Klikk på bok-ikonet (📚) øverst til høyre for å åpne Team Library",enableLibraries:"Slå på følgende biblioteker:",libraryComponent:"Designsystem – komponenter",libraryIcons:"Aksel ikonbibliotek",libraryActivationCaption:"Viser aktivering av biblioteker i Figma",insertComponents:"Sett inn komponenter fra biblioteket",goToAssetsPanel:"Gå til Assets-panelet",useSearch:"Bruk søkefeltet for å finne komponenter raskt, f.eks.:",dragComponent:"Dra komponenten inn i artboardet",customizeComponent:"🔄 Tilpass komponentene ved å bruke props og varianter i høyrepanelet. Dette gir fleksibilitet uten å bryte koblingen til hovedkomponenten.",tips:"Tips og god praksis",tipsText:`Unngå å "detache" komponenter. For å sikre gjenbruk og fremtidige oppdateringer, skal du ikke detach'e komponenter. Bruk heller varianter og egenskaper (props) for å tilpasse utseende og funksjon.`},startup:{title:"Oppstart: Oppsett av arbeidsområde",step1Title:"Trinn 1: Start med en ny frame",step1Text1:"Opprett en ny frame i Figma med ønsket størrelse.",step1Text2:"I dette tilfellet bruker vi 1728px i bredde.",step2Title:"Trinn 2: Legg til autolayout",step2Text:"Legg til autolayout på framen.",step3Title:"Trinn 3: Legg til tokens på framen",step3Text:"Legg til følgende tokens:",step3Token1:"Spacing: 0",step3Token2:"Padding left right: 0",step3Token3:"Padding top bottom: 0",step3Token4:"Background color: color/main/background-default",step4Title:"Trinn 4: Legg til heading og footer",step4Text:"Legg til header og footer fra komponenter biblioteket. Sørg for at Auto Layout retning er satt til vertikal.",step5Title:"Trinn 5: Lage en seksjon",step5Text:'Lag en ny frame som du kaller "section".',step6Title:"Trinn 6: Legge til autolayout",step6Text:"Legg til autolayout på den nye seksjonen.",step7Title:"Trinn 7: Legge til seksjon i hovedframe",step7Text:'Legg til seksjonen i hovedframen og sørg for at seksjonen er satt til "fill container".',step8Title:"Trinn 8: Legge til tokens (side-marginer og bakgrunnsfarge)",step8Text:"Velg seksjonen og legg til følgende tokens:",step8Token1:"Spacing: size/6",step8Token2:"Padding left right: size/30",step8Token3:"Padding top bottom: size/22",step8Token4:"Background color: color/main/background-default",step8Note:"Dette sørger for at siden din er koblet mot tokensene i koden og gjør det lettere for utviklere å utvikle det du designer da disse er lenket via GitHub.",step9Title:"Trinn 9: Test seksjonen",step9Text:"Legg til ett komponent fra biblioteket. I vårt tilfelle bruker vi card komponenten.",step10Title:"Trinn 10: Lag en nested layout",step10Text:"Legg til flere kort og sett de sammen ved hjelp av en auto layout. For å gjøre dette enkelt velg alle kortene og trykk shift + a.",step11Title:"Trinn 11: Set opp nested layout",step11Text1:"Velg alle kortene i seksjonen og sørg for at disse er satt til fill container.",step11Text2:"Dette gjør vi for at kortene skal ta like mye plass og holde seg innen for rammene til den nestede layouten.",step12Title:"Trinn 12: Legg til spacing tokens",step12Text:"Gå ett hakk ut og velg containeren til kortene. Sørg for at spacing er satt til size/6.",step13Title:"Trinn 13: Legg til spacing i seksjon",step13Text:"Legg til spacing mellom kort containeren og headingen ved å velge seksjonen og tilføye en spacing på size/6.",step14Title:"Trinn 14: gjenbruk",step14Text:"Dupliser seksjonen og gjør deg kjent med hvordan auto-layout og tokensene fungerer. Under ser du hvordan jeg enkelt laget en tabell ved å erstatte kortene med en tablecolumn komponent og satte spacing til size/0."},newComponent:{title:"Lage nye komponenter",intro:"Denne siden forklarer hvordan man bygger nye komponenter i designsystemet. Målet er å sikre at komponentene er konsistente, skalerbare, tilgjengelige og enkle å bruke både i design og utvikling.",tokensTitle:"Tokens som grunnlag",tokensText:"Alle komponenter skal bygges med tokens. Tokens er de grunnleggende verdiene i systemet og gjør det mulig å oppdatere eller tilpasse design uten å endre hver enkelt komponent.",tokensAutolayout:"Autolayout: Bruk alltid Autolayout i Figma. Det gir produksjonsklare filer og speiler hvordan kode er strukturert.",tokensSize:"Størrelsestokens: Bruk tokens for spacing, padding og dimensjoner. Unngå manuelle verdier.",tokensSemantic:"Semantiske tokens: Benytt semantiske tokens for farger, typografi og spacing. Dette sikrer støtte for lys og mørk modus, ulike størrelser og temaer – og gjør komponentene direkte koblet til kode.",atomicTitle:"Bygging med atomisk design",atomicText:"Komponenter settes sammen hierarkisk etter atomisk design:",atomicAtoms:"Atomer: de minste byggeklossene (f.eks. knapp, ikon, inputfelt).",atomicMolecules:"Molekyler: sammensatte atomer (f.eks. søkefelt = input + knapp).",atomicOrganisms:"Organismer: større helheter laget av molekyler (f.eks. skjema eller navigasjon).",atomicPrinciple:"Dette prinsippet gjør komponentene modulære og gjenbrukbare.",calendarTitle:"Eksempel Kalender Modul",calendarStep1Title:"Trinn 1: Begynn på atomisk nivå",calendarStep1Text:"Se for deg atomene som trengs når du lager en kalender. Eksempelvis kan det være:",calendarStep1TextLabel:"Tekst:",calendarStep1TextItems:'Måned/år (f.eks. "August 2025"), Ukedagsnavn (man, tir, ons …), Dato-nummer (1, 2, 3 …)',calendarStep1IconLabel:"Ikoner:",calendarStep1IconItems:"Piltaster for navigasjon (forrige/neste måned), Eventuelt ikon for «dagens dato» eller «reset»",calendarStep1ButtonLabel:"Knapper:",calendarStep1ButtonItems:"Navigasjonsknapper (forrige/neste måned), Dato-knapp (hver dato er en interaktiv knapp)",calendarStep1Note:"Vi vet at vi allerede har icon-button så den kan vi enkelt hente ut fra komponent bibiloteket.",calendarStep2Title:"Trinn 2: Start med å bygge ut atomene dine",calendarStep2Text1:"I vårt tilfelle vil vi trenge ett celle komponent som viser ukedagene og dato-nummer i en mnd. Her kan vi bruke samme atom for ukedagsnavn og dato-nummer.",calendarStep2Text2:'Vi lager to elementer som vi kaller "cell" og legger til autolayout og appellerer token verdiene.',calendarStep3Title:"Trinn 3: Lag variantene du trenger",calendarStep3Text:"I vårt tilfelle vil vi trenge ett celle komponent som viser ukedagene og dagene i en mnd.",calendarStep4Title:"Trinn 4: Sett sammen molekylet",calendarStep5Title:"Trinn 5: Bygg ut organismen",calendarStep5Text:"Her legger vi sammen molekylene til en tabell.",calendarStep6Title:"Trinn 6: Legg til riktig states",calendarStep7Title:"Trinn 7: Gjør ferdig organismen med eksisterende elementer",calendarStep8Title:"Trinn 8: Bygg ut med flere varianter hvis det gir mening",variantsTitle:"Varianter og tilstander",variantsText:"Alle komponenter skal ha definerte varianter og interaksjonstilstander:",variantsFigma:"Bruk Figma Variants i stedet for duplisering.",variantsStates:"Minimumstilstander: default, hover, pressed, disabled, focus. Litt ut fra kontekst.",variantsNew:"Opprett en ny variant når det gjelder en tilpasning av samme komponent, og en ny komponent kun når funksjonen er unik.",accessibilityTitle:"Tilgjengelighet",accessibilityText:"Tilgjengelighet skal alltid ivaretas:",accessibilityWCAG:"Følg WCAG-kontrastkrav (minimum 4.5:1 for tekst).",accessibilityTouch:"Interaktive flater skal ha minst 44 × 44 px treffflate.",accessibilityFocus:"Fokustilstand skal alltid være synlig, også uten hover.",responsiveTitle:"Responsivitet",responsiveText:"Komponenter skal fungere på tvers av skjermstørrelser og layouts:",responsiveTokens:"Bruk størrelsestokens for spacing og dimensjoner.",responsiveSizes:"Støtt små, mellomstore og store layoutvarianter.",responsiveBreak:"Sørg for at komponenter brytes eller stackes logisk i mindre formater.",reuseTitle:"Gjenbruk i kontekst",reuseText:"En komponent skal alltid kunne brukes i ulike sammenhenger. Vis derfor eksempler i dokumentasjonen, som:",reuseExample1:"knapp i et skjema",reuseExample2:"kort i et grid",reuseExample3:"inputfelt i en dialogboks"},examples:{title:"Praktiske eksempler",example1Title:"Eksempel 1: Påmeldingsskjema",example1Step1Title:"Trinn 1: Start med en ny frame",example1Step1Text:"Opprett en ny frame i Figma med ønsket størrelse. Bruk design tokens for å sette framefargen hvis nødvendig (f.eks. background-default).",example1Step2Title:"Trinn 2: Legg til overskrift",example1Step2Text:'Bruk komponenten Heading for å legge til en overskrift, som "Meld deg på vårt arrangement". Juster størrelsen med size-modusen, om nødvendig.',example1Step3Title:"Trinn 3: Legg til tekstfelt for navn og e-post",example1Step3Text:'Sett inn to Text Input-komponenter. Den første for "Fullt navn" og den andre for "E-postadresse". Sørg for å bruke placeholder-modusen for instruksjoner i tekstfeltene.',example1Step4Title:"Trinn 4: Legg til en dropdown for valg av arrangement",example1Step4Text:"Bruk komponenten Multisuggestion for å la brukeren velge mellom forskjellige arrangementer. Legg til nødvendige alternativer i dropdown-menyen.",example1Step5Title:"Trinn 5: Legg til en send-knapp",example1Step5Text:"Sett inn en Button-komponent og tilpass fargen ved å bruke color-modusen hvis knappen skal skille seg ut. Legg til ikon hvis ønskelig.",example1NoteTitle:"Obs!",example1NoteText:"Bruk color og sizetokens i framems rundt komponentene for å sikre at alle moduser fungerer som de skal.",example2Title:"Eksempel 2: Artikkelside",example2Step1Title:"Trinn 1: Opprett en ny frame",example2Step1Text:"Start med å lage en ny vertikal frame i Figma med ønsket bredde (f.eks. 8- eller 12-kolonne grid). Sett bakgrunnsfarge ved hjelp av design tokens (f.eks. background-color: var(--color-background-light)).",example2Step2Title:"Trinn 2: Legg til en hovedoverskrift",example2Step2Text:"Bruk Heading-komponenten for å legge til tittelen på artikkelen. Juster størrelsen med size-modus (f.eks. heading-xleller heading-lg).",example2Step3Title:"Trinn 3: Legg til ingress",example2Step3Text:"Bruk Text-komponenten i body-large-stil for å skrive en kort ingress som oppsummerer artikkelen. Plasser denne rett under overskriften, med tilstrekkelig spacing.",example2Step4Title:"Trinn 4: Sett inn hovedinnhold med tekstblokker",example2Step4Text:"Bruk Text-komponenter i body-default eller body-large for å bygge ut brødteksten. Del opp teksten i tydelige avsnitt og legg inn mellomtitler med Heading-komponenten i mindre størrelse (heading-md eller heading-sm).",example2Step5Title:"Trinn 5: Legg til et bilde i artikkelen",example2Step5Text1:"Bruk Image-komponenten for å plassere et illustrasjons- eller artikkelbilde midtstilt i teksten. Bruk size-modusen hvis du trenger å endre størrelse (f.eks. medium eller full-width).",example2Step5Text2:"Foreløpig har vi ingen Image -komponent så vi bruker derfor en frame i steden",example2Step6Title:"Trinn 6: Legg til lenker i teksten",example2Step6Text:"Bruk Link-komponenten der det er behov for hyperkoblinger til relaterte artikler, dokumenter eller eksterne kilder.",example2Step7Title:"Trinn 7: Avslutt med relaterte artikler eller deling",example2Step7Text:'Bruk Card-komponenter i et grid-layout for å vise relaterte artikler. Hver kort bør inneholde bilde, tittel og en "Les mer"-lenke. Alternativt kan du legge til Share-komponenter for sosiale medier nederst.',example3Title:"Eksempel 3: Planleggings verktøy",example3Step1Title:"Trinn 1: Opprett en frame",example3Step1Text:"Start med å lage en ny vertikal frame i Figma, med den ønskede bredden som passer til layouten for aktivitetskalenderen din (f.eks. 12-kolonne grid). Sett bakgrunnsfargen ved hjelp av design tokens (f.eks. background-color: var(--color-background-light)).",example3Step2Title:"Trinn 2: Legg til en hovedoverskrift",example3Step2Text:'Bruk Heading-komponenten for å legge til tittelen "Aktivitetskalender". Juster størrelsen med size-modus som passer (f.eks. heading-xl eller heading-lg).',example3Step3Title:"Trinn 3: Legg til en kort beskrivelse",example3Step3Text:"Bruk Text-komponenten i body-large-stil for å skrive en kort beskrivelse som forklarer formålet med kalenderen. Plasser denne rett under hovedoverskriften, med tilstrekkelig spacing for å sikre lesbarhet.",example3Step4Title:"Trinn 4: Sett inn kalenderoversikt",example3Step4Text:"Bruk en Table-komponent for å lage en oversikt over månedens aktiviteter. Sørg for at hver rad representerer en dag og inkluderer kolonner for dato, aktivitet, tid og sted. Juster størrelsen på tabellen etter behov.",example3Step5Title:"Trinn 5: Legg til detaljerte aktivitetskort",example3Step5Text:'Bruk Card-komponenter for å vise detaljerte beskrivelser av hver aktivitet. Hvert kort bør inneholde aktivitetens navn, beskrivelse, tid, sted og en "Mer info"-knapp som kan føre til en detaljert side om aktiviteten.',example3Step6Title:"Trinn 6: Sett inn bilder for hver aktivitet",example3Step6Text:"Bruk Image-komponenten innenfor hvert aktivitetskort for å inkludere relevante bilder. Bruk size-modusen for å tilpasse bildene til kortene (f.eks. medium eller full-width).",example3Step7Title:"Trinn 7: Legg til et filter eller søkefunksjon",example3Step7Text:"Bruk Search-komponenten for å legge til en søkefunksjon øverst på siden, slik at brukere enkelt kan finne aktiviteter basert på navn, dato eller kategori.",example3Step8Title:'Trinn 8: Inkluder en "Legg til i kalender" funksjon',example3Step8Text:"Bruk Button-komponenter for å tilby en funksjon der brukere kan legge aktiviteter til sin personlige kalender. Plasser denne knappen i nærheten av aktivitetsdetaljene.",example3Step9Title:"Trinn 9: Legg til lenker og navigasjon",example3Step9Text:"Bruk Link-komponenter for å legge til hyperkoblinger til relaterte aktiviteter eller eksterne ressurser, som for eksempel billetter eller mer informasjon. Sørg for tydelig kontrast og understreking i henhold til designreglene.",example3Step10Title:"Trinn 10: Avslutt med sosiale delingsmuligheter",example3Step10Text:"Bruk Share-komponenter for sosiale medier nederst på siden, slik at brukere kan dele interessante aktiviteter med venner og familie.",example3Step11Title:"Trinn 11: Tilpass for mobilvisning",example3Step11Text:"Sørg for at layouten er responsiv. Bruk layout grid og auto layout for å sikre at tekst, bilder og kort flyter riktig på små skjermer. Test designet på forskjellige skjermstørrelser for å sikre optimal brukeropplevelse."},tokenStudio:{title:"Kom i gang med Token Studio og GitHub-synkronisering",intro:"Denne veiledningen viser hvordan du kobler Token Studio i Figma til et GitHub-repositorium for å holde design tokens synkronisert på tvers av teamet.",prerequisites:"Forutsetninger",prerequisitesIntro:"Før du setter opp synkronisering trenger du:",figmaAccount:"Figma - En Figma-konto med Professional-plan eller høyere",tokenStudioAccount:"Token Studio - En Token Studio-konto med Premium-abonnement",generateToken:"Generer en GitHub Fine-grained access token",goToGithub:"Gå til: Github → Settings → Developer settings → Personal access tokens → Tokens (fine-grained)",clickGenerate:"Klikk på Generate new token",fillOut:"Fyll ut følgende:",tokenName:"Navn:",tokenNameExample:"F.eks. Red Cross Token",expiration:"Utløpsdato:",expirationText:"sett som ønsket",generateAndCopy:"Klikk Generate token og kopier den trygt (lagres ikke av GitHub etterpå)",configureSync:"Konfigurer GitHub-sync i Token Studio",openPlugin:"Åpne Token Studio-pluginen i Figma",goToSettings:"Gå til: Settings → Sync providers → Add new → GitHub",fillIn:"Fyll inn følgende:",syncName:"Name:",syncNameExample:"f.eks. Red Cross Tokens",personalToken:"Personal Access Token:",personalTokenText:"lim inn tokenet fra GitHub",repository:"Repository:",repositoryText:"norwegianredcross/DesignSystem",branch:"Branch:",branchText:"main",storageLocation:"Token Storage Location:",storageLocationText:"design-tokens",repoAccess:"Repository access: velg All repositories eller spesifikt repo",repoPermissions:"Repository permissions → Contents: velg Read & Write",setupCaption:"Konfigurer GitHub-sync",performSync:"Utfør første synkronisering",afterSave:"Etter at du har lagret innstillingene, vil pluginen vise en modal:",ifEmpty:"Hvis repoet er tomt → velg Push",ifExists:"Hvis tokens allerede finnes → velg Pull",chooseAction:"Velg handling basert på situasjonen.",syncCaption:"Utfør første synkronisering",workflow:"Løpende arbeidsflyt: Push og Pull",pushText:"Push når du gjør endringer i tokens i Figma → skriv inn commit-melding og gjennomgå endringer før du evt. åpner en Pull Request.",pullText:"Pull for å hente oppdateringer fra GitHub til Figma → du får mulighet til å gjennomgå og godkjenne før endringer tas inn.",tips:"Tips og god praksis",tip1:"Oppbevar tokenen sikkert – ikke lim den inn i offentlige dokumenter.",tip2:"Dokumenter innstillingene dine (navn, branch, sti osv.) for enklere oppsett senere.",tip3:"Synk ofte for å sikre konsistens mellom design og utvikling."},colorSystem:{title:"Sette opp ditt eget fargesystem",intro1:"Med et gjennomtenkt fargesystem kan vi sikre at tekst alltid har god nok kontrast mot våre bakgrunnsfarger og at det finnes nok ulike farger for alle tilstander.",intro2:"En profilveileder inneholder ofte kun et sett med primærfarger og sekundærfarger i et par forskjellige fargetoner. Å lage et digitalt produkt kun med disse fargene alene er vanskelig. For å kunne sikre riktig kontrast og korrekte farger for ulike tilstander, er vi avhengig av å definere flere variasjoner av profilfargene. Bare button komponenten består av 6 ulike blåfarger:",buttonCaption:"Som du ser i eksemplet trenger vi 6 ulike fargevariasjoner bare for Button-komponentet",systemText:'Fargesystemet er strukturert for å støtte multibranding og ulike modes (darkmode, contrastmode, etc.), og samtidig ivareta kontrastkrav. Vi har latt oss inspirere av USWDS sine "magic numbers" for å sikre tilgjengelige fargekombinasjoner fra hvilken som helst fargepalett. Vi har også blitt inspirert av Radix sitt fargesystem med tydelige intensjoner for de ulike fargene. For å sikre at en organisasjon skal kunne bruke sin faktiske brandfarge, har vi valgt å kombinere to tilnærminger til et helt nytt system.'},themeBuilder:{title:"Designsystemets temagenerator",intro:"For å generere en skala som fungerer kan du bruke Designsystemets temagenerator. Det eneste du trenger å gjøre er å lime inn hex-koden til merkevarens accent-farge og øvrige profil-farger.",generatorLink:"https://theme.designsystemet.no/no",caption:"Fargesystemet bruker brand-fargen til å generere flere fargevarianter, slik at vi kan sikre god kontrast mellom tekst og bakgrunnsfarger.",systemText:"Temageneratoren er basert på et fargesystem sørger for at både brand-farger ivaretas og kontrastkrav sikres gjennom de lineære fargene som genereres ut fra brand-fargen. Farger beregnet for tekst vil dermed alltid ha god nok kontrast mot bakgrunnsfarger.",examplesTitle:"Eksempler",example1:"Text-default har alltid god nok kontrast mot alle background og surface farger.",example2:"Text-subtle har alltid god nok kontrast mot alle background-farger og surface-default.",appliesText:"Dette vil gjelde uansett hva du har valgt som base-farge.",baseText:"Base-default-fargen vil alltid være den samme som fargen du har valgt. Dette er for å ivareta brandet ditt best mulig. Du må derfor selv passe på at fargen du velger oppfyller kontrastkravene i forhold til hvor den skal bli brukt. Designsystemets temagenerator vil informere deg om eventuelle kontrastbrudd."},useColors:{title:"Bruk fargene du har generert",intro:"Når du har generert skalaene, kan du bruke de nye fargekodene i Designsystemet, slik at alle komponenter følger din profil."},proposeDesign:{title:"Foreslå nytt design eller forbedringer",intro:"Vi setter pris på at du hjelper oss å forbedre komponenter og design i Figma. De beste løsningene kommer gjennom samarbeid.",newComponent:"Ny Komponent",newComponentText1:"Ønsker du å foreslå en ny komponent setter vi pris på om den blir registrert i Github.",newComponentText2:"Når en ny komponent blir foreslått må vi vurdere om den er verdifull nok til å være en del av designsystemet. Vi ønsker ikke å ende opp med hundrevis av komponenter med små forskjeller, da vi kan risikere uønsket kompleksitet, vedlikehold, samt design- og teknologigjeld.",newComponentText3:"For nye komponenter som tas inn må vi:",consider1:"Identifisere og utforske liknende behov hos andre produktteam og virksomheter. Hvor mange produkter/etater vil ha bruk for den?",consider2:"Vurdere problemet komponenten skal løse og verdien dette gir.",consider3:"Tenke på om den kan lages fleksibel og gjenbrukbar nok.",consider4:"Tenke på om den er i tråd med designprinsippene og om den passer inn i helheten",reportTitle:"Registrere feil eller mangler på en komponent i Figma",reportText:"Har du funnet en svakhet med noen av de eksisterende komponentene i Figma, setter vi pris på om du enten legger igjen en kommentar i Figma sammen med den aktuelle komponenten, eller at du oppretter en bug-report i Github som forklarer feilen, eventuelt en feature-request som forklarer ønsket tilleggsfunksjonalitet.",githubLink:"https://github.com/norwegianredcross/DesignSystem",githubIssuesLink:"https://github.com/norwegianredcross/DesignSystem/issues"}},footer:{shortcuts:"Snarveier",shortcutsLinks:{services:"Tilbudene",volunteer:"Bli frivillig",ourWork:"Vårt arbeid",about:"Om Røde Kors",support:"Støtt arbeidet",contact:"Kontakt oss"},contact:{visitingAddress:"Besøks adresse",organizationNumber:"Organisasjonsnummer",email:"E-post"},copyright:"Rødekors",legal:{privacy:"Personvern",press:"For presse",procurement:"Regler for innkjøp",whistleblowing:"Varsling/Misconduct"}}},EN:{header:{darkMode:"Dark Mode",toggleTheme:"Toggle theme",language:"Language:",search:"Search",searchPlaceholder:"Search content...",closeSearch:"Close search",openSearch:"Open search",clearSearch:"Clear search",close:"Close",menu:"Menu",closeMenu:"Close menu",openMenu:"Open menu",login:"Log in",supportUs:"Support us",suggestions:"Search suggestions",viewAll:"View all results",noResults:"No results found for",selectLanguage:"Select language",homeAriaLabel:"Norwegian Red Cross Home",nav:{design:"Design",components:"Components",code:"Code",work:"Our Work",volunteer:"Volunteer",courses:"Courses & Training"}},home:{heroTitle:"Red Cross Design System",heroLead:"Common component library and guidelines for design and development of digital solutions in Red Cross.",searchComponents:"Search components",exploreSystem:"Explore the system",componentsDesc:"Library with ready-made React components.",designDesc:"Colors, typography, and principles.",codeDesc:"Documentation, workflow, and MCP.",universalDesign:"Universal Design",universalDesignText:"Built-in accessibility by default. We strictly follow WCAG 2.1 requirements.",readGuidelines:"Read guidelines",consistentBrand:"Consistent Brand",consistentBrandText:"Design tokens ensure the Red Cross visual profile is maintained across all surfaces.",seeColors:"See colors",efficientDev:"Efficient Development",efficientDevText:"Save time with ready-made components. Focus on functionality, not CSS.",exploreComponents:"Explore components",quickActionsTitle:"Jump in fast",quickActionCodeTitle:"Start in code",quickActionCodeText:"See setup, tokens, and examples.",quickActionDesignTitle:"Design guide",quickActionDesignText:"Colors, typography, and principles.",quickActionComponentsTitle:"Component library",quickActionComponentsText:"Explore and reuse ready-made components.",openCode:"Open code",openDesign:"Open design",openComponents:"Open components",featureStripTitle:"Useful right now",featureToken:"Updated design tokens",featureFont:"Source Sans 3 included",featureComponent:"New component variants",featureSeeAll:"See all updates",profile:"Profile",name:"Name Namerson",volunteer:"Volunteer",save:"Save",approved:"Approved",rejected:"Rejected",darkModeLabel:"Dark mode",importantMessage:"Important message",updateGuidelines:"Remember to update the guidelines...",all:"All",active:"Active",alerts:"Alerts",status:"Status"},components:{title:"Components",intro:"The design system contains fundamental components that can be combined in many different ways and in different patterns.",searchPlaceholder:"Search for component...",searchAriaLabel:"Search components",noResults:"No components found for"},code:{sidebar:{overview:"Overview",workflow:"Workflow",structure:"Structure",contribute:"Contribute",home:"Home",getStarted:"Get Started",designTokens:"Design Tokens",fonts:"Fonts",icons:"Using Icons",figmaMcp:"From Figma to Code (MCP)",componentCreation:"Component Creation",metadataFiles:"Metadata Files",developerGuide:"Developer Guide"},overview:{title:"Red Cross Design System",intro:"Welcome to Red Cross Design System! This repository contains a library of reusable UI components built with React, tailored for Norwegian Red Cross digital projects.",text1:"It is developed by leveraging the base components from Digdir's Design System. This approach ensures a cohesive and recognizable visual identity across all Red Cross applications. The system is pre-configured with the official Red Cross theme, delivered via a dedicated design token package.",text2:"The main goal is to ensure brand consistency, improve development efficiency, and maintain high standards for accessibility across all Red Cross applications.",text3:"Storybook serves as the interactive documentation and development environment to showcase and test these components.",getStartedCard:"Get Started",getStartedDesc:"Installation, setup, and guidelines for developers.",getStartedLink:"Get Started",designTokensCard:"Design Tokens",designTokensDesc:"Learn how to use design tokens and fonts.",designTokensLink:"Read more",workflowCard:"Workflow",workflowDesc:"Learn how to use MCP tools to fetch components directly from Figma.",workflowLink:"Read guide"},getStarted:{title:"Get Started",intro:"To use Red Cross Design System in your Next.js (or other React) application:",installationTitle:"1. Installation",installationText:"Install the necessary npm packages for your project. You need three packages: the component library itself (rk-designsystem), base styles from Digdir, and the Red Cross theme package (rk-design-tokens).",githubLink:"Go to GitHub Repository",npmTitle:"npm",yarnTitle:"yarn",pnpmTitle:"pnpm",note:"Note: You do not need to install @digdir/designsystemet-react separately, as all necessary components are included in the rk-designsystem package.",stylesTitle:"2. Including Styles (CSS)",stylesText1:"For components to be styled correctly, you must import the stylesheets at the top level of your application, for example in layout.tsx (for Next.js App Router) or _app.tsx (for Next.js Pages Router).",stylesText2:"Important order: It is crucial that the base stylesheet (@digdir/designsystemet-css) loads before the Red Cross theme file (rk-design-tokens). This ensures that our theme tokens correctly override the default values.",appRouterExample:"Example for Next.js (App Router - src/app/layout.tsx):",pagesRouterExample:"Example for Next.js (Pages Router - pages/_app.tsx):",usageTitle:"3. Using Components",usageText:"Once the stylesheets are included, you can start importing and using components in your project. All components you need are available directly from the rk-designsystem package.",importTitle:"3.1 Import and use Red Cross Design System components",nextjsExample:"3.2 Example usage in a Next.js page",updateText:"The appearance of all components is fully controlled by the rk-design-tokens package. To receive visual updates to the brand theme (such as a new primary color), simply update the package to the latest version:"},designTokens:{title:"Red Cross Design Tokens",intro:"This repository is the central source for all design tokens (colors, typography, spacing, etc.) for Norwegian Red Cross digital products. It functions as a single source of truth that automatically distributes style changes to all connected projects.",howToTitle:"How to use tokens",howToText:"To use design tokens in your project, you must install and configure the theme package.",installTitle:"1. Installation",importTitle:"2. Import CSS",importText:"In your application's root layout (e.g. layout.tsx), import the base stylesheet before the Red Cross theme file.",fontTitle:"How to add the font",fontText1:"Red Cross Design System uses the Source Sans 3 font. For typography to display correctly in your application, this font must be loaded.",fontText2:"You can include the font by adding the following lines to the <head> element in your HTML or in your root layout:",fontText3:"Once the font is loaded, CSS variables from rk-design-tokens will automatically use it (--ds-font-family).",workflowTitle:"Automated Workflow for Design Tokens (End-to-End)",workflowText:"This workflow establishes a fully automated pipeline that connects our design process directly to live production applications. When a designer updates the style in Figma, this system automatically builds, versions, and publishes a new style package to npm. Then our Vercel projects are notified, updating themselves and redeploying with the new styles.",phase1Title:"Phase 1: A Designer Makes a Change (Publisher)",phase1Item1:"Design in Figma: A designer makes a change to a color, font, or other design token.",phase1Item2:"Push to GitHub: Using the Token Studio plugin, the designer pushes the changes. This automatically commits the updated JSON files to the main branch.",phase1Item3:"Trigger Publisher Workflow: This push immediately triggers the GitHub Action defined in .github/workflows/publish.yml.",phase1Item4:"Build & Commit Artifacts: The workflow runs npm run build to generate CSS from JSON files and commits the results.",phase1Item5:"Versioning & Release: The workflow runs npm version patch to increment the version number, create a release commit, and tag it.",phase1Item6:"Publish to npm: Finally, the workflow publishes the new version of the package to the npm registry.",phase2Title:"Phase 2: Notifying Applications (Signal)",phase2Text:"Send a Dispatch signal: After a successful publication, the workflow sends a repository_dispatch signal to consumer projects like rk-designsystem to notify them of the new version.",phase3Title:"Phase 3: Automatic Update and Redeploy (Consumers)",phase3Item1:'Trigger Consumer Workflow: The dispatch signal starts an "Update" workflow in consumer projects.',phase3Item2:"Update Dependencies: The workflow runs npm update rk-design-tokens to fetch the latest version.",phase3Item3:"Commit & Push Update: The workflow commits the updated package-lock.json file.",phase3Item4:"Vercel Auto-Deploys: Vercel's Git integration detects the new commit and automatically starts a new deployment."},fonts:{title:"Fonts",intro:"Red Cross Design System uses the Source Sans 3 font. For typography to display correctly in your application, this font must be loaded.",howToTitle:"How to add the font",howToText:"You can include the font by adding the following lines to the <head> element in your HTML or in your root layout:",afterLoadTitle:"After loading",afterLoadText:"Once the font is loaded, CSS variables from rk-design-tokens will automatically use it (--ds-font-family).",nextjsTitle:"Example for Next.js",nextjsText:"For Next.js App Router, add the font in layout.tsx:",nextjsPagesText:"For Next.js Pages Router, add the font in _app.tsx or _document.tsx:",cssVariablesTitle:"CSS Variables",cssVariablesText:"After the font is loaded, the design system automatically uses the CSS variable --ds-font-family defined in the rk-design-tokens package. You don't need to specify the font manually in your components."},icons:{title:"Using Icons",intro:"This library is designed to work seamlessly with the official icon set from NAV/Aksel.",installTitle:"Installation",importTitle:"Import and use",importText:"Icons are exported as named React components. Import only the icons you need (tree‑shakable):",accessibilityTitle:"Accessibility Guide",accessibilityItem1:"Icon + visible text: set aria-hidden on the icon so screen readers don't read it twice.",accessibilityItem2:"Icon-only triggers (e.g. a button): add a descriptive aria-label to the trigger, keep the icon aria-hidden.",accessibilityItem3:"Color: icons inherit currentColor; use the component's variant/color to control it (e.g. button variants, tag colors).",accessibilityItem4:`Size: set fontSize (e.g. fontSize="1.25rem") or inline style (e.g. style="{ fontSize: '1.25rem' }").`,performanceTitle:"Performance",performanceText:"Use named imports from @navikt/aksel-icons to keep package size down – unused icons are removed (tree-shaken) by modern bundlers."},contributing:{title:"Contributing to the Library",intro:"This guide provides a set of standards and best practices for creating new components. Following these guidelines ensures our component library remains consistent, accessible, and easy to maintain.",getStartedTitle:"Get Started (for contributors)",getStartedText:"Follow these steps to run the local development environment. All commands should be run from the root of the project.",principlesTitle:"Core Principles",principlesText:"Each component we build should follow these core principles:",principlesA11y:"Accessibility (A11y): Components must be usable by everyone, including people with disabilities. This means correct ARIA attributes, keyboard navigation, and semantic HTML.",principlesReuse:"Reusability: Components should be generic enough to be used in multiple contexts without modification.",principlesConsistency:"Consistency: Components should follow our established design tokens (colors, spacing, typography) and have a consistent API and structure.",principlesDocs:"Documentation: Each component must be documented in Storybook to make it discoverable and easy to use for other developers.",whenTitle:"When to create a new component",whenText:"Before you start coding, determine what type of component you need. Most of our needs fall into one of three categories:",wrappedSimpleTitle:"Wrapped Component (Simple):",wrappedSimpleWhat:"What it is: A component that directly wraps and re-exports a component from @digdir/designsystemet-react without modifications.",wrappedSimpleWhen:"When to use: When the basic Digdir component perfectly covers our needs, but we want to include it in our own library for a consistent import source.",wrappedSimpleExample:"Example: The Buttons component is a perfect example of this.",wrappedStyledTitle:"Wrapped Component (with style overrides):",wrappedStyledWhat:"What it is: A wrapped Digdir component where we use custom CSS to adjust the appearance to better fit Red Cross's specific design language.",wrappedStyledWhen:"When to use: When a Digdir component is functionally correct but needs visual adjustments (e.g. different icons, border-radius, padding).",wrappedStyledExample:"Example: The Alert component, which uses composes in CSS to inherit base styles and then apply its own overrides.",customTitle:"Custom Component (from scratch):",customWhat:"What it is: A completely new component built when no existing Digdir component covers our requirements.",customWhen:"When to use: For unique UI patterns or functionality not covered by the base library.",customExample:"Example: The DateInput component is a custom component with its own state, logic, and styling.",fileStructureTitle:"File structure for components",fileStructureText:"To maintain consistency, each new component should follow this file structure. Create a new folder under src/components/ with the component's PascalCase name.",codingGuidelinesTitle:"Coding Guidelines",componentLogicTitle:"1. Component Logic (MyNewComponent.tsx)",logicTypeScript:"TypeScript first: All components must be written in TypeScript. Define a Props interface for your component, extending from basic HTML element or Digdir component props if applicable.",logicForwardRef:"Forward Refs: Always use React.forwardRef to allow parent components to get a ref to the underlying DOM element.",logicA11y:"Accessibility is mandatory:",logicA11yItem1:"Use semantic HTML (<button>, <label>, <nav>).",logicA11yItem2:"Ensure all interactive elements can be focused and operated with keyboard.",logicA11yItem3:"Provide aria-label for buttons that only have icons or elements where the text label is not visible.",logicA11yItem4:"Use aria-invalid, aria-describedby, etc., to communicate state to assistive technologies.",logicControlled:"Controlled vs. Uncontrolled: If your component has state (like an input), it should support both controlled (value + onChange) and uncontrolled (defaultValue) patterns.",logicProps:"Props naming: Use data-* attributes for styling variants (e.g. data-size, data-color) to align with patterns in our existing components.",stylingTitle:"2. Styling (styles.module.css)",stylingModules:"CSS Modules: For custom components, all styles must be placed in a styles.module.css file. This scopes class names locally and prevents global style conflicts.",stylingTokens:"Design tokens: Always use our design tokens (var(--ds-...)) for colors, spacing, fonts, etc. Do not use hardcoded values (e.g. #FFF, 16px).",stylingOverride:"Overriding Wrapped Components: For wrapped components, use a standard CSS file. Use @layer and composes keywords to extend basic Digdir styles without unnecessarily increasing CSS specificity.",documentationTitle:"3. Documentation (MyNewComponent.stories.tsx)",docsStorybook:"Your Storybook file is the official documentation. It must be clear and comprehensive.",docsMeta:"meta Object: Define the component's title, component reference, and tags: ['autodocs'] to enable automatic documentation.",docsArgTypes:"argTypes: Document each prop. Provide a description, control type (e.g. select, boolean, text), and options if applicable. This drives the interactive controls in Storybook.",docsStories:"Create multiple Stories: Create a separate story for each key state and variant of your component (e.g. Default, Disabled, WithError, WithIcon).",processTitle:"Contribution Process",processPRTitle:"Create a Pull Request (PR):",processBranch:"Create a Branch: Pull the latest changes from the main branch and create a new feature branch: git checkout -b feat/my-new-component.",processDraft:"Open a Draft PR: As soon as you start, open a draft pull request on GitHub. This prevents duplicate work and lets others see what you're working on.",processCommit:"Commit your changes: While working, make small, logical commits.",processReview:'Ready for review: When development is complete and all automated checks pass, mark the PR as "Ready for review" and request a review from the design system maintainers.'},figmaMcp:{title:"From Figma to Code with MCP",intro:"We use Model Context Protocol (MCP) to connect Figma directly to the development environment. This makes it possible to automatically fetch design specifications, tokens, and code structures.",processTitle:"Process",processItem1:"Identify the component in Figma: Find the `node-id` of the component or section you want to implement.",processItem2:'Copy link: Right-click on the node in Figma, select "Copy link" to get a URL containing both file key and node ID.',processItem2Caption:"Right-click on a node in Figma and select 'Copy link' to get a direct link.",processItem3:"Provide context and link: It is recommended to include theme.css (for tokens) and metadata.json (for components) as context in the chat. Then paste the Figma link.",processItem3Caption:"Include theme.css and metadata.json for better results.",processItem4:"Receive code suggestions: The tool generates React code based on the design, including use of our existing components (such as Heading, Button, Paragraph).",processItem5:"Adapt and implement: Adjust the code to fit into the project structure, and verify against design tokens.",benefitsTitle:"Benefits",benefit1:"Faster implementation of new components.",benefit2:"Ensures correct tokens are used automatically.",benefit3:"Reduces the gap between design and code."},metadataFiles:{title:"Metadata Files",intro:"To keep track of components and their connection to Figma, we use metadata files.",whatTitle:"What do they contain?",whatText:"Metadata files (such as `metadata.json`) are the backbone of our documentation. They define exactly which props each component supports, data types, default values, and descriptions. This allows us to automatically generate documentation and ensure consistency between design and code.",whatItem1:'componentName: The name of the component (e.g. "Button").',whatItem2:'importPath: Where the component is imported from (e.g. "rk-designsystem").',whatItem3:"props: A list of all available props, including:",whatItem3Sub1:'name: The name of the prop (e.g. "variant", "disabled").',whatItem3Sub2:'type: The data type (e.g. "boolean", "enum", "string").',whatItem3Sub3:"description: Explanation of what the prop does.",whatItem3Sub4:"defaultValue: The default value if the prop is not set.",whatItem3Sub5:"required: Whether the prop is required or optional.",howTitle:"How to use them?",howText:"When you create a new component, you should also update the metadata file so that automated tools and documentation pages (like this one) can find and display the correct information."},componentCreation:{title:"Component Creation with MCP and Design Tokens",intro:"We use Model Context Protocol (MCP) and AI assistance to translate Figma designs directly into production-ready React components. This flow ensures that new components follow the design system, use CSS Modules, and reuse existing code.",processTitle:"Process",processText:'When you send a prompt (e.g. "make a version where you can have 4 cards below [url]"), Figma MCP handles the following steps automatically in the background:',step1Title:"1. Identification and Metadata",step1Item1:'Identify source: MCP reads the URL and finds the Node ID for the component in Figma (e.g. 1:3539 for "Hero 3").',step1Item2:"Fetch dimensions: MCP automatically fetches information about the node's size, structure, and positioning to set the framework for the layout.",step2Title:"2. Fetching Design Context and Code Draft",step2Item1:"Generate draft: MCP analyzes the Figma node and generates a first draft of React code.",step2Item2:"Automatic recognition: The tool identifies whether the design contains elements that already exist in our library.",step2Item3:'Example: If the Figma node contains a button, MCP will suggest `import Button from "src/components/Button.tsx"` instead of generating new HTML for the button.',step2Item4:"Cleaning: The system filters out unnecessary wrappers and absolute paths before presenting the code.",step3Title:"3. Token Mapping and Variable Definitions",step3Item1:"Analyze tokens: MCP automatically analyzes which design tokens are used in the Figma file (via `get_variable_defs` logic in the background).",step3Item2:"Mapping to CSS: It translates Figma values to our defined CSS variables.",step3Item3:'Figma: "color/main/base-default": "#d52b1e"',step3Item4:"CSS: Mapped to `var(--ds-color-primary-color-red-base-default)` (or equivalent from theme.css).",step3Item5:"Typography: Font definitions are automatically translated to correct typography classes.",step4Title:"4. Automatic Connection to Existing Components",step4Item1:"Verification: Figma MCP checks the design against metadata.json and our repository (via `get_code_connect_map` logic in the background).",step4Item2:"Implementation: This ensures that the generated code automatically uses rk-designsystem components where possible.",step4Item3:"Example: It sees that an element in Figma corresponds to `src/components/Button.tsx` and generates the code with the correct component import.",step5Title:"5. Structure and Completion",step5Text:"Result: Based on the analysis above, the AI produces the finished files you need:",step5Item1:"`index.ts` (Export)",step5Item2:"`[ComponentName].tsx` (Logic, prop definitions from metadata.json)",step5Item3:"`[ComponentName].module.css` (Styling based on tokens)",step5Item4:"`[ComponentName].stories.tsx` (Documentation and variants)",step5Variant:'Variant handling: Logic for variants (e.g. "stacked" vs "side-by-side") is implemented based on your prompt and the Figma layout.',automationTitle:"Automation vs. Manual Quality Assurance",automationText1:"Although MCP tools automate much of the coding by fetching structures and tokens directly from Figma, it is not a 100% seamless transfer. The generated code serves as a solid foundation, but a developer must always review, quality-assure, and adapt the logic.",automationText2:"The tools remove the repetitive manual work of setup and styling, allowing the developer to focus on functionality, accessibility, and edge-cases. It is an efficiency process, not a replacement for developer expertise.",benefitsTitle:"Benefits of this flow",benefit1:'Precision: Automatic fetching of variables prevents "magic numbers" and hardcoded hex codes.',benefit2:"Reuse: Automatic check against existing components prevents code duplication.",benefit3:"Efficiency: You only need to provide a URL and an intention; MCP handles the technical lookups.",benefit4:"Maintenance: The connection to `theme.css` and `metadata.json` makes components resilient to updates in the design system."}},design:{sidebar:{forDesigners:"For Designers",getStarted:"Get Started",colors:"Colors",contribute:"Contribute Design",designElements:"Design Elements",designTokens:"Design Tokens",shadows:"Shadows",sizes:"Sizes and Spacing",typography:"Typography",figmaConnect:"Figma Connection",startup:"Startup",newComponent:"Create New Component",examples:"Practical Examples",tokenStudio:"Token Studio",colorSystem:"Setup Your Color System",themeBuilder:"Theme Generator",useColors:"Use Generated Colors",proposeDesign:"Propose New Design",whatAreTokens:"What are Design Tokens",tokensInFigma:"Design Tokens in Figma",colorStructure:"Naming Structure",colorOverview:"Overview and Explanation",colorTokens:"Color Tokens",shadowUsage:"Shadow Usage",shadowTokens:"Shadow Tokens",componentSizes:"Component Sizes",sizeTokens:"Size Tokens",fontFamily:"Font Family",typoTokens:"Typography Tokens"},intro:{title:"Design in Red Cross",welcome:"Welcome to the design documentation.",getStarted:"Get Started",goToGuide:"Go to guide",colors:"Colors",seeColors:"See colors"},tokens:{whatIsTitle:"What are Design Tokens",whatIsText1:'"Design Tokens" control how components look regarding colors, typography, sizes, spacing, shapes etc. Design tokens ensure both designers and developers work by the same rules and guidelines.',whatIsText2:"Some variables are theme-based, meaning they are based on your brand with your chosen colors and preferences. We are working on a theme builder to make it easier for you to customize styles.",whatIsText3:"Design Tokens are flexible variables that can be used independently of technology or design tools.",figmaTitle:"Design tokens in Figma",figmaText1:'We use the "Tokens Studio" Figma plugin as it allows us to manage more styles and properties than Figma natively can.',figmaText2:"The plugin aims to be W3C-compatible and follows the standard established by the W3C Design Tokens Community Group. Token values are thus not locked to a tool - the JSON file can be moved to other tools if needed.",themesTitle:"Multiple sets and themes",themesText:"Using variables and tokens makes it possible to have one design system with different identities. We can create a component in Figma once and style it many times - With one click we can switch themes to activate a different color palette or sizing set. By dividing tokens into sets and themes, we can offer advanced forms of reuse.",themesCaption:'The video above shows that when the "Tilsynet" set is enabled, both the colors used in the file and the available styles in the right panel are replaced.'},colorStructure:{title:"Naming Structure",intro:"The color system consists of global colors that refer to what the color is (e.g. red-1) and a semantic level that describes what the color should be used for (e.g. Text.Danger).",structureTitle:"Naming Structure",structureText1:"Colors in the Design System are structured with semantic meaning. This means they are defined by function and use, not just by how they look. This makes it easier to choose the right color because you don't have to evaluate the actual color tone and can focus on what the color should convey instead.",structureText2:"Color names in the Design System are divided into 3 parts: Color scale name, group (usage area) and variant. These parts describe how colors are built and how they should be used.",structureCaption:"Shows the division of color names into 3 parts",nameLabel:"Name:",nameText:"The first part and the name of the color scale. By default, the Design System comes with the color scales Success, Danger, Warning, Info and Neutral. More scales can be added using the Theme Builder.",groupLabel:"Group:",groupText:"Each color scale is divided into the groups Background, Surface, Border, Text and Base. These groups describe the usage areas of the colors. The Text group, for example, should be used on text and icons.",groupsCaption:"Shows a color scale and the 5 groups that colors are divided into.",variantLabel:"Variant:",variantText:"Within each group there are variants that describe how colors look or should be used. Tinted, for example, means the color has a hint of color in it, while Hover means the color is intended for an interactive state."},colorOverview:{title:"Overview and Explanation of Colors",intro:"Each color scale consists of a total of 16 colors, designed to cover different needs in the design. Below you will find an overview of the different colors and their intended uses.",semanticCaption:"Shows how semantic colors can be used in design. The example uses four different color scales: Danger, Neutral and two blue scales",tableName:"Name",tableUsage:"Usage",backgroundDefault:"Standard background color",backgroundTinted:"Background with a hint of color",surfaceDefault:"Standard color for surfaces / components",surfaceTinted:"Surfaces / components with a hint of color",surfaceHover:"Hover color for surfaces / components",surfaceActive:"Active color for surfaces / components",borderSubtle:"Border color with low contrast for decorative use (dividers)",borderDefault:"Standard border color for form components and meaningful elements",borderStrong:"Border color with high contrast for extra visibility",textSubtle:"Text and icon color with lower contrast",textDefault:"Text and icon color with high contrast and good visibility",baseDefault:"Standard color for solid backgrounds",baseHover:"Hover color for solid backgrounds",baseActive:"Active color for solid backgrounds",baseContrastSubtle:"Color with good contrast against Base-default",baseContrastDefault:"Color with good contrast against Base-default and Base-hover",backgroundTitle:"Background",backgroundText:"Background colors are used to color large surfaces and are often the bottommost layer on a website. It is common to use these colors on the body element.",backgroundDefaultDesc:"Background-default is the lightest and most neutral background color",backgroundTintedDesc:"Background-tinted gets a hint of color and can be used to create variation in the background layer",surfaceTitle:"Surface",surfaceText:"Surface colors are used to color elements that lie over background colors, such as panels or cards. These colors act as foreground colors and help create depth in the design by separating elements from the background. In dark mode, these four colors gradually become lighter, with Surface-active being the lightest.",surfaceDefaultDesc:"Surface-default is completely white in light mode and is used as the standard background color on elements.",surfaceTintedDesc:"Surface-tinted gets a hint of color and can be used to separate elements from the background.",surfaceHoverDesc:"Surface-hover can be used for hover states of elements or to create visual hierarchies in the Surface layer when combined with Surface-tinted and Surface-active.",surfaceActiveDesc:"Surface-active can be used for active states of elements or to enhance the hierarchy in the Surface layer together with Surface-tinted and Surface-hover.",surfaceTintedCaption:"Shows how Surface-tinted looks for 7 color scales generated with the Theme Builder.",borderTitle:"Border",borderText:"Border colors are used to color borders (strokes) of elements.",borderSubtleDesc:"Border-subtle has low contrast against background and surface colors and should only be used for decorative purposes. Common uses are dividers and decorative borders. The color should not be the only visual indicator that an element is interactive.",borderDefaultDesc:"Border-default is used on form components or on other meaningful borders. The color has good contrast (over 3:1) against all background colors, Surface-default and Surface-tinted.",borderStrongDesc:"Border-strong has good contrast (over 3:1) against all background and surface colors and can be used on borders to make elements extra visible.",bordersCaption:"First row shows colors with Border-subtle, while the second row shows Border-default.",textTitle:"Text",textText:"Text colors are used on text and icons.",textSubtleDesc:"Text-subtle is a light text color that can be used to create variation in typography or to indicate hierarchical levels of importance. It also tries to preserve as much of the color tone from the original color chosen in the Theme Builder. The color has good contrast (4.5:1) against all background colors, Surface-default and Surface-tinted.",textDefaultDesc:"Text-default is a high contrast text color, optimal for readability. It should be used on main content and primary text on a page. This color in the Neutral variant can be a good color to use on most of the text. The color has good contrast (4.5:1) against all background and surface colors.",textColorsCaption:"Shows how Text-default and Text-subtle look for 8 different color scales generated with the Theme Builder.",baseTitle:"Base",baseText1:"Base colors are used to color solid backgrounds, such as buttons and other interactive elements. The colors help direct attention to important design elements and establish a visual hierarchy relative to less prominent elements. At the same time, they create contrast against background and surface colors, which enhances readability and visual clarity.",baseText2:"Base-hover and Base-active colors are generated from the lightness or darkness of the Base-default color from the same color scale to create smooth visual transitions between states. Contrast colors become either white or black depending on the lightness of the Base-default color to ensure good contrast and readability.",baseDefaultDesc:"Base-default can be used to color solid backgrounds of elements. The color (hex code) chosen in the theme builder is placed under Base-default.",baseHoverDesc:"Base-hover can be used for hover states of solid elements or to create visual hierarchies in the Base layer when combined with Base-default and Base-active.",baseActiveDesc:"Base-active can be used for active states of solid elements or to enhance the hierarchy in the Base layer together with Base-default and Base-hover.",baseContrastSubtleDesc:"Base-contrast-subtle has good contrast (4.5:1) against the Base-default color from the same color scale and can safely be used as a text color against this.",baseContrastDefaultDesc:"Base-contrast-default has good contrast (4.5:1) against Base-default and Base-hover colors from the same color scale, and can safely be used as a text color against these.",baseColorsCaption:"Shows boxes with Base-default as background and Base-contrast-default as text color."},colorTokens:{title:"Color Tokens",intro:"The colors below are examples from a random theme. Use the theme builder to generate your own colors and names.",lightCaption:"A randomly generated color system from Designsystemet.no",darkCaption:"A randomly generated color system from Designsystemet.no, dark mode"},shadowUsage:{title:"Shadow Usage in Design",intro1:"Shadows should be used consciously and consistently as they express that something lies over something else in the solution.",intro2:"Shadows can help visually impaired users identify components. Using shadows and outlines makes it easier and faster to find a component when scanning pages. (Research: Material Design)",strengthsTitle:"Strengths",strengthsText:"We have different strengths on the shadows, from xsmall to xlarge. The different strengths are used to suggest the height of the surface. Surfaces at higher heights have larger shadows, while those at lower heights should have smaller shadows. Shadows should create a hierarchy so that what lies over or under something else stands out more clearly."},shadowTokens:{title:"Shadow Tokens",tokensTitle:"Tokens",tokensText:"Make sure you have light mode activated to see the shadows. Shadows are not intended for use in dark mode, as they are based on darker color tones. To create hierarchy and contrast in dark mode, it is better to use other means such as light borders.",exampleTitle:"Example",exampleText:"Popover is a component that overlays other content. This is made clear by using a medium shadow.",exampleCaption:"The Popover component covers over the other content."},componentSizes:{title:"Component Sizes",intro:"Most components in the design system are available in three recommended sizes: Small, Medium and Large (sm, md, lg). These are developed to adapt to different needs across screen sizes and use cases.",sizesCaption:"Sizes for components in the Design System.",smallTitle:"Small",smallText:"Small is ideal for compact interfaces where space utilization is important, such as on mobile devices, expert tools or administration interfaces. It is recommended to use this size on websites with a base font of 16px.",mediumTitle:"Medium",mediumText:"Medium works as standard for most common use cases, and is recommended to use together with a base font of 18px. The size provides a good balance between readability and space utilization and is particularly well suited for desktop interfaces and larger display surfaces.",largeTitle:"Large",largeText:"Large provides increased readability and clarity. It can be used in desktop interfaces or when visibility and accessibility are important. It can also be used in a limited context on the page to highlight central elements. It is recommended to use the size together with a base font of 21px.",mediumSizeCaption:"Many of the medium components have a fixed height of 48px.",harmonyText:"Components within a certain size are designed to work together. For example, many medium components have a height of 48px and a base font of 18px, which ensures a harmonious visual balance when placed next to each other.",combinedCaption:"Example where Medium and Large components are used together.",consistencyText:"To maintain a cohesive and clear design, it is recommended to use fixed sizes within a given website or context. Many different combinations of sizes can lead to a messy and unclear design.",combinationText:"In some cases, components in different sizes can be combined to create better visual hierarchies and usability. In the example above, the search field section is larger and more prominent than the components in the header, because the search function is a central part of the page. The increased size makes it more visible and easily accessible to the user."},sizeTokens:{title:"Size Tokens",tokensTitle:"Tokens",tokensText:"Make sure you have light mode activated to see the shadows. Shadows are not intended for use in dark mode, as they are based on darker color tones. To create hierarchy and contrast in dark mode, it is better to use other means such as light borders.",exampleTitle:"Example",exampleText:"Popover is a component that overlays other content. This is made clear by using a medium shadow."},fontFamily:{title:"Font Family",intro:"To present text correctly, styles have been created that have different combinations of size, font weight and line height. A set of typography components has also been created that encapsulate these styles, so they can easily be used in different contexts. Description of how typography components are used can be found in the component article Typography."},typoTokens:{title:"Typography Tokens",comingSoon:"Content coming soon."},figmaConnect:{title:"Get Started with Design System (Figma)",intro:"This guide helps you get started designing using the shared design system in Figma. You'll get an introduction to how to use components, tokens, and styles from the central library.",prerequisites:"Prerequisites",prerequisitesIntro:"Before you start, you need:",figmaAccount:"Figma - An active Figma account (free or paid)",access:"Access - Access to Red Cross's Figma library (contact team lead if you lack access)",createFile:"Create or open a working file",createFileText:"Create a new Figma file, or open an existing project file where you want to use the design system.",activateLibraries:"Activate design system libraries",goToAssets:"Go to the Assets panel in Figma",openLibrary:"Click the book icon (📚) at the top right to open Team Library",enableLibraries:"Enable the following libraries:",libraryComponent:"Design System – components",libraryIcons:"Aksel icon library",libraryActivationCaption:"Shows activation of libraries in Figma",insertComponents:"Insert components from the library",goToAssetsPanel:"Go to the Assets panel",useSearch:"Use the search field to quickly find components, e.g.:",dragComponent:"Drag the component into the artboard",customizeComponent:"🔄 Customize components by using props and variants in the right panel. This provides flexibility without breaking the connection to the main component.",tips:"Tips and best practices",tipsText:'Avoid "detaching" components. To ensure reuse and future updates, you should not detach components. Instead, use variants and properties (props) to customize appearance and function.'},startup:{title:"Startup: Workspace Setup",step1Title:"Step 1: Start with a new frame",step1Text1:"Create a new frame in Figma with the desired size.",step1Text2:"In this case, we use 1728px in width.",step2Title:"Step 2: Add autolayout",step2Text:"Add autolayout to the frame.",step3Title:"Step 3: Add tokens to the frame",step3Text:"Add the following tokens:",step3Token1:"Spacing: 0",step3Token2:"Padding left right: 0",step3Token3:"Padding top bottom: 0",step3Token4:"Background color: color/main/background-default",step4Title:"Step 4: Add heading and footer",step4Text:"Add header and footer from the components library. Make sure Auto Layout direction is set to vertical.",step5Title:"Step 5: Create a section",step5Text:'Create a new frame that you call "section".',step6Title:"Step 6: Add autolayout",step6Text:"Add autolayout to the new section.",step7Title:"Step 7: Add section to main frame",step7Text:'Add the section to the main frame and make sure the section is set to "fill container".',step8Title:"Step 8: Add tokens (side margins and background color)",step8Text:"Select the section and add the following tokens:",step8Token1:"Spacing: size/6",step8Token2:"Padding left right: size/30",step8Token3:"Padding top bottom: size/22",step8Token4:"Background color: color/main/background-default",step8Note:"This ensures that your page is connected to the tokens in the code and makes it easier for developers to develop what you design since these are linked via GitHub.",step9Title:"Step 9: Test the section",step9Text:"Add one component from the library. In our case, we use the card component.",step10Title:"Step 10: Create a nested layout",step10Text:"Add multiple cards and combine them using an auto layout. To do this easily, select all cards and press shift + a.",step11Title:"Step 11: Set up nested layout",step11Text1:"Select all cards in the section and make sure they are set to fill container.",step11Text2:"We do this so that the cards take equal space and stay within the boundaries of the nested layout.",step12Title:"Step 12: Add spacing tokens",step12Text:"Go one level out and select the container of the cards. Make sure spacing is set to size/6.",step13Title:"Step 13: Add spacing in section",step13Text:"Add spacing between the card container and the heading by selecting the section and adding a spacing of size/6.",step14Title:"Step 14: Reuse",step14Text:"Duplicate the section and familiarize yourself with how auto-layout and tokens work. Below you can see how I easily created a table by replacing the cards with a tablecolumn component and setting spacing to size/0."},newComponent:{title:"Create New Components",intro:"This page explains how to build new components in the design system. The goal is to ensure that components are consistent, scalable, accessible, and easy to use in both design and development.",tokensTitle:"Tokens as Foundation",tokensText:"All components should be built with tokens. Tokens are the fundamental values in the system and make it possible to update or customize design without changing each individual component.",tokensAutolayout:"Autolayout: Always use Autolayout in Figma. It provides production-ready files and mirrors how code is structured.",tokensSize:"Size tokens: Use tokens for spacing, padding, and dimensions. Avoid manual values.",tokensSemantic:"Semantic tokens: Use semantic tokens for colors, typography, and spacing. This ensures support for light and dark mode, different sizes and themes – and makes components directly connected to code.",atomicTitle:"Building with Atomic Design",atomicText:"Components are assembled hierarchically according to atomic design:",atomicAtoms:"Atoms: the smallest building blocks (e.g. button, icon, input field).",atomicMolecules:"Molecules: composite atoms (e.g. search field = input + button).",atomicOrganisms:"Organisms: larger wholes made of molecules (e.g. form or navigation).",atomicPrinciple:"This principle makes components modular and reusable.",calendarTitle:"Example Calendar Module",calendarStep1Title:"Step 1: Start at atomic level",calendarStep1Text:"Imagine the atoms needed when creating a calendar. For example, it could be:",calendarStep1TextLabel:"Text:",calendarStep1TextItems:'Month/year (e.g. "August 2025"), Day names (Mon, Tue, Wed …), Date number (1, 2, 3 …)',calendarStep1IconLabel:"Icons:",calendarStep1IconItems:`Arrow buttons for navigation (previous/next month), Possibly icon for "today's date" or "reset"`,calendarStep1ButtonLabel:"Buttons:",calendarStep1ButtonItems:"Navigation buttons (previous/next month), Date button (each date is an interactive button)",calendarStep1Note:"We know we already have icon-button so we can easily get it from the component library.",calendarStep2Title:"Step 2: Start building out your atoms",calendarStep2Text1:"In our case, we will need a cell component that shows the day names and date numbers in a month. Here we can use the same atom for day names and date numbers.",calendarStep2Text2:'We create two elements that we call "cell" and add autolayout and apply token values.',calendarStep3Title:"Step 3: Create the variants you need",calendarStep3Text:"In our case, we will need a cell component that shows the day names and days in a month.",calendarStep4Title:"Step 4: Assemble the molecule",calendarStep5Title:"Step 5: Build out the organism",calendarStep5Text:"Here we combine the molecules into a table.",calendarStep6Title:"Step 6: Add correct states",calendarStep7Title:"Step 7: Complete the organism with existing elements",calendarStep8Title:"Step 8: Build out with more variants if it makes sense",variantsTitle:"Variants and States",variantsText:"All components should have defined variants and interaction states:",variantsFigma:"Use Figma Variants instead of duplication.",variantsStates:"Minimum states: default, hover, pressed, disabled, focus. Varies by context.",variantsNew:"Create a new variant when it's a customization of the same component, and a new component only when the function is unique.",accessibilityTitle:"Accessibility",accessibilityText:"Accessibility should always be maintained:",accessibilityWCAG:"Follow WCAG contrast requirements (minimum 4.5:1 for text).",accessibilityTouch:"Interactive surfaces should have at least 44 × 44 px touch target.",accessibilityFocus:"Focus state should always be visible, even without hover.",responsiveTitle:"Responsiveness",responsiveText:"Components should work across screen sizes and layouts:",responsiveTokens:"Use size tokens for spacing and dimensions.",responsiveSizes:"Support small, medium, and large layout variants.",responsiveBreak:"Ensure components break or stack logically in smaller formats.",reuseTitle:"Reuse in Context",reuseText:"A component should always be usable in different contexts. Therefore show examples in the documentation, such as:",reuseExample1:"button in a form",reuseExample2:"card in a grid",reuseExample3:"input field in a dialog box"},examples:{title:"Practical Examples",example1Title:"Example 1: Registration Form",example1Step1Title:"Step 1: Start with a new frame",example1Step1Text:"Create a new frame in Figma with the desired size. Use design tokens to set the frame color if necessary (e.g. background-default).",example1Step2Title:"Step 2: Add heading",example1Step2Text:'Use the Heading component to add a heading, such as "Sign up for our event". Adjust the size with the size mode if necessary.',example1Step3Title:"Step 3: Add text fields for name and email",example1Step3Text:'Insert two Text Input components. The first for "Full name" and the second for "Email address". Make sure to use the placeholder mode for instructions in the text fields.',example1Step4Title:"Step 4: Add a dropdown for event selection",example1Step4Text:"Use the Multisuggestion component to let the user choose between different events. Add necessary options in the dropdown menu.",example1Step5Title:"Step 5: Add a send button",example1Step5Text:"Insert a Button component and customize the color by using the color mode if the button should stand out. Add icon if desired.",example1NoteTitle:"Note!",example1NoteText:"Use color and size tokens in frames around components to ensure all modes work as they should.",example2Title:"Example 2: Article Page",example2Step1Title:"Step 1: Create a new frame",example2Step1Text:"Start by creating a new vertical frame in Figma with the desired width (e.g. 8- or 12-column grid). Set background color using design tokens (e.g. background-color: var(--color-background-light)).",example2Step2Title:"Step 2: Add a main heading",example2Step2Text:"Use the Heading component to add the article title. Adjust the size with size mode (e.g. heading-xl or heading-lg).",example2Step3Title:"Step 3: Add lead",example2Step3Text:"Use the Text component in body-large style to write a short lead that summarizes the article. Place this right under the heading, with sufficient spacing.",example2Step4Title:"Step 4: Insert main content with text blocks",example2Step4Text:"Use Text components in body-default or body-large to build out the body text. Divide the text into clear paragraphs and add subheadings with the Heading component in smaller size (heading-md or heading-sm).",example2Step5Title:"Step 5: Add an image to the article",example2Step5Text1:"Use the Image component to place an illustration or article image centered in the text. Use the size mode if you need to change size (e.g. medium or full-width).",example2Step5Text2:"Currently we have no Image component so we use a frame instead",example2Step6Title:"Step 6: Add links in the text",example2Step6Text:"Use the Link component where there is a need for hyperlinks to related articles, documents, or external sources.",example2Step7Title:"Step 7: End with related articles or sharing",example2Step7Text:'Use Card components in a grid layout to show related articles. Each card should contain image, title, and a "Read more" link. Alternatively, you can add Share components for social media at the bottom.',example3Title:"Example 3: Planning Tool",example3Step1Title:"Step 1: Create a frame",example3Step1Text:"Start by creating a new vertical frame in Figma, with the desired width that fits the layout for your activity calendar (e.g. 12-column grid). Set the background color using design tokens (e.g. background-color: var(--color-background-light)).",example3Step2Title:"Step 2: Add a main heading",example3Step2Text:'Use the Heading component to add the title "Activity Calendar". Adjust the size with size mode that fits (e.g. heading-xl or heading-lg).',example3Step3Title:"Step 3: Add a short description",example3Step3Text:"Use the Text component in body-large style to write a short description that explains the purpose of the calendar. Place this right under the main heading, with sufficient spacing to ensure readability.",example3Step4Title:"Step 4: Insert calendar overview",example3Step4Text:"Use a Table component to create an overview of the month's activities. Make sure each row represents a day and includes columns for date, activity, time, and location. Adjust the table size as needed.",example3Step5Title:"Step 5: Add detailed activity cards",example3Step5Text:`Use Card components to show detailed descriptions of each activity. Each card should contain the activity's name, description, time, location, and a "More info" button that can lead to a detailed page about the activity.`,example3Step6Title:"Step 6: Insert images for each activity",example3Step6Text:"Use the Image component within each activity card to include relevant images. Use the size mode to adapt the images to the cards (e.g. medium or full-width).",example3Step7Title:"Step 7: Add a filter or search function",example3Step7Text:"Use the Search component to add a search function at the top of the page, so users can easily find activities based on name, date, or category.",example3Step8Title:'Step 8: Include an "Add to calendar" function',example3Step8Text:"Use Button components to offer a function where users can add activities to their personal calendar. Place this button near the activity details.",example3Step9Title:"Step 9: Add links and navigation",example3Step9Text:"Use Link components to add hyperlinks to related activities or external resources, such as tickets or more information. Ensure clear contrast and underlining according to design rules.",example3Step10Title:"Step 10: End with social sharing options",example3Step10Text:"Use Share components for social media at the bottom of the page, so users can share interesting activities with friends and family.",example3Step11Title:"Step 11: Adapt for mobile view",example3Step11Text:"Ensure the layout is responsive. Use layout grid and auto layout to ensure text, images, and cards flow correctly on small screens. Test the design on different screen sizes to ensure optimal user experience."},tokenStudio:{title:"Get Started with Token Studio and GitHub Sync",intro:"This guide shows how to connect Token Studio in Figma to a GitHub repository to keep design tokens synchronized across the team.",prerequisites:"Prerequisites",prerequisitesIntro:"Before setting up synchronization, you need:",figmaAccount:"Figma - A Figma account with Professional plan or higher",tokenStudioAccount:"Token Studio - A Token Studio account with Premium subscription",generateToken:"Generate a GitHub Fine-grained access token",goToGithub:"Go to: Github → Settings → Developer settings → Personal access tokens → Tokens (fine-grained)",clickGenerate:"Click Generate new token",fillOut:"Fill out the following:",tokenName:"Name:",tokenNameExample:"E.g. Red Cross Token",expiration:"Expiration date:",expirationText:"set as desired",generateAndCopy:"Click Generate token and copy it safely (not stored by GitHub afterwards)",configureSync:"Configure GitHub sync in Token Studio",openPlugin:"Open the Token Studio plugin in Figma",goToSettings:"Go to: Settings → Sync providers → Add new → GitHub",fillIn:"Fill in the following:",syncName:"Name:",syncNameExample:"e.g. Red Cross Tokens",personalToken:"Personal Access Token:",personalTokenText:"paste the token from GitHub",repository:"Repository:",repositoryText:"norwegianredcross/DesignSystem",branch:"Branch:",branchText:"main",storageLocation:"Token Storage Location:",storageLocationText:"design-tokens",repoAccess:"Repository access: choose All repositories or specific repo",repoPermissions:"Repository permissions → Contents: choose Read & Write",setupCaption:"Configure GitHub sync",performSync:"Perform first synchronization",afterSave:"After saving the settings, the plugin will show a modal:",ifEmpty:"If the repo is empty → choose Push",ifExists:"If tokens already exist → choose Pull",chooseAction:"Choose action based on the situation.",syncCaption:"Perform first synchronization",workflow:"Ongoing workflow: Push and Pull",pushText:"Push when you make changes to tokens in Figma → enter commit message and review changes before optionally opening a Pull Request.",pullText:"Pull to fetch updates from GitHub to Figma → you get the opportunity to review and approve before changes are imported.",tips:"Tips and best practices",tip1:"Store the token securely – do not paste it into public documents.",tip2:"Document your settings (name, branch, path etc.) for easier setup later.",tip3:"Sync often to ensure consistency between design and development."},colorSystem:{title:"Set Up Your Own Color System",intro1:"With a well-thought-out color system, we can ensure that text always has good enough contrast against our background colors and that there are enough different colors for all states.",intro2:"A brand guide often contains only a set of primary and secondary colors in a few different color tones. Creating a digital product with only these colors alone is difficult. To ensure correct contrast and correct colors for different states, we depend on defining more variations of the brand colors. Just the button component consists of 6 different blue colors:",buttonCaption:"As you can see in the example, we need 6 different color variations just for the Button component",systemText:`The color system is structured to support multi-branding and different modes (dark mode, contrast mode, etc.), while maintaining contrast requirements. We have been inspired by USWDS's "magic numbers" to ensure accessible color combinations from any color palette. We have also been inspired by Radix's color system with clear intentions for the different colors. To ensure that an organization can use its actual brand color, we have chosen to combine two approaches into a completely new system.`},themeBuilder:{title:"Design System Theme Generator",intro:"To generate a working scale, you can use the Design System's theme generator. All you need to do is paste the hex code of your brand's accent color and other profile colors.",generatorLink:"https://theme.designsystemet.no/no",caption:"The color system uses the brand color to generate multiple color variants, so we can ensure good contrast between text and background colors.",systemText:"The theme generator is based on a color system that ensures both brand colors are maintained and contrast requirements are met through the linear colors generated from the brand color. Colors calculated for text will therefore always have good enough contrast against background colors.",examplesTitle:"Examples",example1:"Text-default always has good enough contrast against all background and surface colors.",example2:"Text-subtle always has good enough contrast against all background colors and surface-default.",appliesText:"This will apply regardless of what you have chosen as the base color.",baseText:"The Base-default color will always be the same as the color you have chosen. This is to maintain your brand as best as possible. You must therefore ensure that the color you choose meets the contrast requirements in relation to where it will be used. The Design System's theme generator will inform you of any contrast violations."},useColors:{title:"Use Your Generated Colors",intro:"Once you have generated the scales, you can use the new color codes in the Design System, so that all components follow your profile."},proposeDesign:{title:"Propose New Design or Improvements",intro:"We appreciate your help in improving components and design in Figma. The best solutions come through collaboration.",newComponent:"New Component",newComponentText1:"If you want to propose a new component, we appreciate it being registered in Github.",newComponentText2:"When a new component is proposed, we must evaluate whether it is valuable enough to be part of the design system. We do not want to end up with hundreds of components with small differences, as we risk unwanted complexity, maintenance, and design and technical debt.",newComponentText3:"For new components that are included, we must:",consider1:"Identify and explore similar needs among other product teams and organizations. How many products/agencies will need it?",consider2:"Evaluate the problem the component should solve and the value this provides.",consider3:"Consider whether it can be made flexible and reusable enough.",consider4:"Consider whether it is in line with design principles and whether it fits into the whole",reportTitle:"Report errors or shortcomings in a component in Figma",reportText:"If you have found a weakness with any of the existing components in Figma, we appreciate if you either leave a comment in Figma together with the relevant component, or create a bug report in Github that explains the error, or a feature request that explains the desired additional functionality.",githubLink:"https://github.com/norwegianredcross/DesignSystem",githubIssuesLink:"https://github.com/norwegianredcross/DesignSystem/issues"}},footer:{shortcuts:"Shortcuts",shortcutsLinks:{services:"Services",volunteer:"Become a volunteer",ourWork:"Our Work",about:"About Red Cross",support:"Support the work",contact:"Contact us"},contact:{visitingAddress:"Visiting address",organizationNumber:"Organization number",email:"Email"},copyright:"Red Cross",legal:{privacy:"Privacy",press:"For press",procurement:"Procurement rules",whistleblowing:"Whistleblowing/Misconduct"}}}},Lt=w.createContext(void 0),No=({children:t})=>{const[e,n]=w.useState("NO"),s=i=>{const a=i.split(".");let o=Fo[e];for(const d of a){if(o[d]===void 0)return console.warn(`Translation missing for key: ${i} in language: ${e}`),i;o=o[d]}return o};return r.jsx(Lt.Provider,{value:{language:e,setLanguage:n,t:s},children:t})},At=()=>{const t=w.useContext(Lt);if(t===void 0)throw new Error("useLanguage must be used within a LanguageProvider");return t},S={header:"_header_3zql2_1",languageSwitch:"_languageSwitch_3zql2_36",searchOverlay:"_searchOverlay_3zql2_40",headerExtension:"_headerExtension_3zql2_45",extensionContentWrapper:"_extensionContentWrapper_3zql2_61",extensionContent:"_extensionContent_3zql2_61",extensionDivider:"_extensionDivider_3zql2_84",languageLabel:"_languageLabel_3zql2_98",languageLink:"_languageLink_3zql2_104",headerInner:"_headerInner_3zql2_129",logoWrapper:"_logoWrapper_3zql2_146",logo:"_logo_3zql2_146",secondaryLogoWrapper:"_secondaryLogoWrapper_3zql2_169",slotComponent:"_slotComponent_3zql2_178",slotContainer:"_slotContainer_3zql2_188",slotText:"_slotText_3zql2_196",secondaryLogo:"_secondaryLogo_3zql2_169",redCrossLogo:"_redCrossLogo_3zql2_223",primaryLogo:"_primaryLogo_3zql2_229",navItems:"_navItems_3zql2_233",navLink:"_navLink_3zql2_242",actions:"_actions_3zql2_255",ctaButton:"_ctaButton_3zql2_263",themeToggle:"_themeToggle_3zql2_268",userInfo:"_userInfo_3zql2_273",userName:"_userName_3zql2_279",loginLink:"_loginLink_3zql2_286",loginText:"_loginText_3zql2_295",underline:"_underline_3zql2_302",searchButtonWrapper:"_searchButtonWrapper_3zql2_308",buttonText:"_buttonText_3zql2_312",menuButton:"_menuButton_3zql2_317",menuOverlay:"_menuOverlay_3zql2_322",searchContent:"_searchContent_3zql2_356",menuContent:"_menuContent_3zql2_366",menuLeftColumn:"_menuLeftColumn_3zql2_375",menuRightColumn:"_menuRightColumn_3zql2_381",slotContent:"_slotContent_3zql2_395",navList:"_navList_3zql2_408",menuUtilities:"_menuUtilities_3zql2_415",menuBrand:"_menuBrand_3zql2_422",suggestionsSection:"_suggestionsSection_3zql2_426",suggestionsTitle:"_suggestionsTitle_3zql2_432",searchResults:"_searchResults_3zql2_441",resultList:"_resultList_3zql2_447",resultItem:"_resultItem_3zql2_453",resultLink:"_resultLink_3zql2_461",suggestionIcon:"_suggestionIcon_3zql2_475",suggestionText:"_suggestionText_3zql2_488",highlightedText:"_highlightedText_3zql2_495",remainingText:"_remainingText_3zql2_500",viewAllLink:"_viewAllLink_3zql2_513",noResults:"_noResults_3zql2_548"},Po=[{id:"home",title:"Hjem",category:"Page",path:"home",description:"Forsiden"},{id:"components",title:"Komponenter",category:"Page",path:"components",description:"Oversikt over alle komponenter"},{id:"design",title:"Design",category:"Page",path:"design",description:"Designretningslinjer og prinsipper"},{id:"code",title:"Kode",category:"Page",path:"code",description:"Utviklerdokumentasjon og oppsett"},{id:"alert",title:"Alert",category:"Component",path:"components",description:"Varselbokser for viktige meldinger"},{id:"avatar",title:"Avatar",category:"Component",path:"components",description:"Profilbilder og initialer"},{id:"badge",title:"Badge",category:"Component",path:"components",description:"Små merker for status eller antall"},{id:"button",title:"Button",category:"Component",path:"components",description:"Knapper for handlinger"},{id:"card",title:"Card",category:"Component",path:"components",description:"Kort for gruppering av innhold"},{id:"carousel",title:"Carousel",category:"Component",path:"components",description:"Bildekarusell"},{id:"checkbox",title:"Checkbox",category:"Component",path:"components",description:"Valg av flere alternativer"},{id:"dialog",title:"Dialog",category:"Component",path:"components",description:"Modale vinduer"},{id:"dropdown",title:"Dropdown",category:"Component",path:"components",description:"Nedtrekksmenyer"},{id:"header",title:"Header",category:"Component",path:"components",description:"Topptekst og navigasjon"},{id:"herosection",title:"HeroSection",category:"Component",path:"components",description:"Store introduksjonsseksjoner"},{id:"input",title:"Input",category:"Component",path:"components",description:"Tekstfelt for brukerinput"},{id:"link",title:"Link",category:"Component",path:"components",description:"Lenker til andre sider"},{id:"list",title:"List",category:"Component",path:"components",description:"Ordnede og uordnede lister"},{id:"pagination",title:"Pagination",category:"Component",path:"components",description:"Navigasjon mellom sider"},{id:"radio",title:"Radio",category:"Component",path:"components",description:"Valg av ett alternativ"},{id:"search",title:"Search",category:"Component",path:"components",description:"Søkefelter"},{id:"select",title:"Select",category:"Component",path:"components",description:"Valgmeny"},{id:"spinner",title:"Spinner",category:"Component",path:"components",description:"Lasteindikator"},{id:"switch",title:"Switch",category:"Component",path:"components",description:"Av/på bryter"},{id:"table",title:"Table",category:"Component",path:"components",description:"Tabeller for data"},{id:"tabs",title:"Tabs",category:"Component",path:"components",description:"Faner for inndeling av innhold"},{id:"tag",title:"Tag",category:"Component",path:"components",description:"Merkelapper og emneknagger"},{id:"textarea",title:"Textarea",category:"Component",path:"components",description:"Flerlinjers tekstfelt"},{id:"tooltip",title:"Tooltip",category:"Component",path:"components",description:"Hjelpetekster ved hover"},{id:"figma-oppkobling",title:"Figma tilkobling",category:"Design",path:"design/figma-oppkobling",description:"Hvordan koble til Figma-biblioteket"},{id:"oppstart",title:"Oppstart",category:"Design",path:"design/oppstart",description:"Oppsett av arbeidsområde"},{id:"lage-komponenter",title:"Lage ett nytt komponent",category:"Design",path:"design/lage-komponenter",description:"Veileder for komponentbygging"},{id:"praktiske-eksempler",title:"Praktiske eksempler",category:"Design",path:"design/praktiske-eksempler",description:"Eksempler på bruk av designsystemet"},{id:"token-studio",title:"Token Studio",category:"Design",path:"design/token-studio",description:"Bruk av Token Studio"},{id:"fargesystem",title:"Sette opp ditt eget fargesystem",category:"Design",path:"design/fargesystem",description:"Hvordan sette opp farger"},{id:"temabygger",title:"Temabygger",category:"Design",path:"design/temabygger",description:"Designsystemets temagenerator"},{id:"bruk-farger",title:"Bruk fargene",category:"Design",path:"design/bruk-farger",description:"Bruk genererte farger"},{id:"foresla-design",title:"Foreslå nytt design",category:"Design",path:"design/foresla-design",description:"Hvordan bidra med nytt design"},{id:"hva-er-design-tokens",title:"Hva er design tokens",category:"Design",path:"design/hva-er-design-tokens",description:"Introduksjon til design tokens"},{id:"design-tokens-i-figma",title:"Design tokens i Figma",category:"Design",path:"design/design-tokens-i-figma",description:"Bruke tokens i Figma"},{id:"farger-navnestruktur",title:"Farger: Navnestruktur",category:"Design",path:"design/farger-navnestruktur",description:"Navngiving av farger"},{id:"farger-oversikt",title:"Farger: Oversikt",category:"Design",path:"design/farger-oversikt",description:"Oversikt og forklaringer av farger"},{id:"farge-tokens",title:"Farge-tokens",category:"Design",path:"design/farge-tokens",description:"Tokens for farger"},{id:"skygger-bruk",title:"Bruk av skygger",category:"Design",path:"design/skygger-bruk",description:"Retningslinjer for skygger"},{id:"skygge-tokens",title:"Skygge-tokens",category:"Design",path:"design/skygge-tokens",description:"Tokens for skygger"},{id:"komponent-storrelser",title:"Komponentstørrelser",category:"Design",path:"design/komponent-storrelser",description:"Størrelsesguide for komponenter"},{id:"storrelse-tokens",title:"Størrelse-tokens",category:"Design",path:"design/storrelse-tokens",description:"Tokens for størrelser"},{id:"font-family",title:"Typografi: Font-family",category:"Design",path:"design/font-family",description:"Font-familier"},{id:"typografi-tokens",title:"Typografi-tokens",category:"Design",path:"design/typografi-tokens",description:"Tokens for typografi"},{id:"code-intro",title:"Oversikt (Kode)",category:"Code",path:"code/intro",description:"Startside for kode"},{id:"kom-i-gang",title:"Kom i gang (Kode)",category:"Code",path:"code/kom-i-gang",description:"Installasjon og oppsett"},{id:"figma-mcp",title:"Fra Figma til Kode (MCP)",category:"Code",path:"code/figma-mcp",description:"Automatisert arbeidsflyt med MCP"},{id:"komponent-kreasjon",title:"Komponent Kreasjon",category:"Code",path:"code/komponent-kreasjon",description:"Opprette nye komponenter"},{id:"progression",title:"Progresjon",category:"Code",path:"code/progression",description:"Fra design til ferdig komponent"},{id:"metadata-files",title:"Metadata filer",category:"Code",path:"code/metadata-files",description:"Struktur og bruk av metadata.json"}],Mo=({activePage:t,setPage:e,children:n,showUser:s=!0,showSearch:i=!0,showLogin:a=!0,showCta:o=!1,ctaLabel:d,ctaIcon:l=r.jsx(de.HeartIcon,{"aria-hidden":!0}),onCtaClick:u,showThemeToggle:y=!1,secondaryLogo:f=!1,secondaryLogoSrc:k,secondaryLogoSrcDark:g,secondaryLogoAlt:h="Secondary Logo",navItems:b,showNavItems:v=!0,showMenuButton:p=!0,showHeaderExtension:m=!1,showModeToggle:T=!1,showLanguageSwitch:N=!1})=>{const[F,P]=w.useState(!1),[I,B]=w.useState(!1),[M,G]=w.useState(""),[z,K]=w.useState("light"),{language:O,setLanguage:H,t:E}=At(),[Z,se]=w.useState(!1);w.useEffect(()=>{const x="rk-header-inline-styles";if(typeof document>"u"||document.getElementById(x))return;const A=zo(S),D=document.createElement("style");D.id=x,D.textContent=A,document.head.appendChild(D)},[]);const ee=()=>r.jsxs("svg",{width:"170",height:"119",viewBox:"24 0 170 119",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":!0,focusable:"false",className:S.redCrossLogo,children:[r.jsx("path",{d:"M76.1036 48.1397C77.8925 47.8781 79.6984 47.7525 81.5061 47.7639C84.1713 47.7639 86.0396 48.1669 87.3182 49.1857C87.8735 49.639 88.3149 50.2176 88.6067 50.8744C88.8984 51.5312 89.0323 52.2479 88.9974 52.9665C88.9839 53.9451 88.6724 54.896 88.1049 55.691C87.5373 56.4861 86.7411 57.087 85.8235 57.4129V57.4944C87.0796 58.006 87.7684 59.2104 88.2231 60.8722C88.7813 62.9097 89.3441 65.2688 89.6907 65.9661H85.5309C85.2382 65.4544 84.7835 63.9829 84.2793 61.7597C83.7751 59.5365 83.0097 58.8527 81.344 58.8527H80.1284V65.9661H76.1036V48.1397ZM80.1284 55.9141H81.7312C83.7526 55.9141 84.9546 54.8954 84.9546 53.3151C84.9546 51.6534 83.8336 50.8202 81.9698 50.7931C81.3532 50.7814 80.7368 50.8268 80.1284 50.9289V55.9141Z",fill:"#1E1E1E"}),r.jsx("path",{d:"M97.8528 52.5633C98.9439 52.5351 100.026 52.7744 101.004 53.2606L102.256 51.4087L103.669 52.4003L102.467 54.2115C103.188 54.8589 103.758 55.6585 104.137 56.5531C104.515 57.4478 104.692 58.4154 104.655 59.3869C104.655 64.0506 101.243 66.2738 97.8573 66.2738C96.7852 66.2984 95.7234 66.059 94.7644 65.5765L93.4543 67.4556L92.1037 66.387L93.2787 64.6438C91.8651 63.4892 91.0277 61.7233 91.0277 59.414C91.0277 55.2891 93.7965 52.5543 97.8213 52.5543L97.8528 52.5633ZM99.2934 55.9411C98.8798 55.6237 98.3731 55.4533 97.8528 55.4566C95.7458 55.4566 94.949 57.5757 94.949 59.4005C94.9265 60.126 95.0909 60.845 95.4262 61.4878L95.4802 61.515L99.2934 55.9411ZM96.4932 62.8552C96.8653 63.1843 97.3486 63.3576 97.8438 63.3397C99.6446 63.3397 100.748 61.7821 100.748 59.4774C100.76 58.7777 100.625 58.0833 100.351 57.4399L100.27 57.4127L96.4932 62.8552Z",fill:"#1E1E1E"}),r.jsx("path",{d:"M119.76 46.9351V62.0537C119.76 63.5253 119.814 65.0829 119.868 65.9659H116.266L116.077 64.037H116.01C115.593 64.7375 114.998 65.3131 114.285 65.7041C113.573 66.095 112.769 66.287 111.958 66.2602C108.865 66.2602 106.384 63.6068 106.384 59.5317C106.384 55.1079 109.085 52.5632 112.237 52.5632C113.835 52.5632 115.087 53.1247 115.676 54.0393H115.726V46.9351H119.76ZM115.708 58.4088C115.708 58.1914 115.681 57.8971 115.658 57.6843C115.556 57.1295 115.266 56.6274 114.838 56.2627C114.41 55.8981 113.869 55.6933 113.308 55.683C111.467 55.683 110.508 57.3447 110.508 59.4094C110.508 61.6327 111.602 63.0318 113.281 63.0318C113.838 63.0337 114.378 62.8389 114.807 62.4814C115.235 62.1239 115.526 61.6264 115.627 61.0757C115.702 60.7676 115.737 60.451 115.73 60.1339L115.708 58.4088Z",fill:"#1E1E1E"}),r.jsx("path",{d:"M126.13 60.6869C126.265 62.3758 127.931 63.1772 129.808 63.1772C131.029 63.1934 132.245 63.013 133.41 62.6429L133.946 65.4049C132.438 65.9752 130.838 66.2562 129.227 66.2335C124.802 66.2335 122.272 63.6345 122.272 59.5322C122.272 56.2088 124.325 52.5366 128.854 52.5366C133.063 52.5366 134.666 55.8329 134.666 59.0794C134.666 59.6271 134.62 60.1738 134.531 60.714L126.13 60.6869ZM130.902 57.8977C130.902 56.9061 130.475 55.2443 128.611 55.2443C126.904 55.2443 126.211 56.8246 126.103 57.8977H130.902Z",fill:"#1E1E1E"}),r.jsx("path",{d:"M142.603 47.8994H146.623V55.8866H146.7C147.1 55.1893 147.501 54.5283 147.929 53.9034L151.981 47.8994H156.978L151.035 55.5969L157.297 65.9703H152.57L148.172 58.1687L146.623 60.0704V65.9567H142.598L142.603 47.8994Z",fill:"#1E1E1E"}),r.jsx("path",{d:"M164.294 66.2599C160.485 66.2599 157.541 63.7424 157.541 59.5043C157.541 55.2662 160.309 52.563 164.496 52.563C168.494 52.563 171.159 55.325 171.159 59.2643C171.159 64.0639 167.774 66.2599 164.307 66.2599H164.294ZM164.375 63.3394C165.946 63.3394 166.959 61.7592 166.959 59.4001C166.959 57.4395 166.216 55.4563 164.375 55.4563C162.43 55.4563 161.709 57.4667 161.709 59.4001C161.709 61.6641 162.641 63.3394 164.348 63.3394H164.375Z",fill:"#1E1E1E"}),r.jsx("path",{d:"M173.676 57.1727C173.676 55.2438 173.622 54.0031 173.568 52.8576H177.062L177.197 55.271H177.3C177.535 54.507 178 53.8353 178.63 53.3486C179.261 52.8619 180.026 52.5843 180.821 52.5542C181.105 52.5425 181.391 52.5607 181.672 52.6086V56.4392C181.303 56.3736 180.93 56.3387 180.555 56.335C179.06 56.335 178.048 57.1365 177.782 58.3997C177.726 58.6983 177.699 59.0015 177.701 59.3053V65.9659H173.649L173.676 57.1727Z",fill:"#1E1E1E"}),r.jsx("path",{d:"M183.752 62.4023C184.824 62.9936 186.018 63.3283 187.241 63.3803C188.47 63.3803 188.974 62.9275 188.974 62.28C188.974 61.6325 188.573 61.2613 187.056 60.7768C184.355 59.8712 183.351 58.3951 183.351 56.8375C183.351 54.3969 185.404 52.5496 188.654 52.5496C189.92 52.5283 191.175 52.7848 192.332 53.3012L191.612 56.1357C190.741 55.6712 189.775 55.4155 188.789 55.3886C187.803 55.3886 187.241 55.787 187.241 56.4571C187.241 57.1273 187.749 57.4216 189.348 57.9604C191.828 58.8162 192.868 60.0795 192.891 62.0084C192.891 64.4444 190.973 66.2691 187.241 66.2691C185.784 66.2951 184.341 65.974 183.031 65.3318L183.752 62.4023Z",fill:"#1E1E1E"}),r.jsx("path",{d:"M50.1985 39.8037H37.1426V79.1965H50.1985V39.8037Z",fill:"#D52B1E"}),r.jsx("path",{d:"M63.2545 52.9331H24.0869V66.0625H63.2545V52.9331Z",fill:"#D52B1E"})]});w.useEffect(()=>{P(!1),B(!1),G("")},[t]),w.useEffect(()=>{if(!(typeof document>"u")&&F&&Z){const x=document.body.style.overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=x}}},[F,Z]),w.useEffect(()=>{if(typeof window>"u"||typeof window.matchMedia>"u")return;const x=window.matchMedia("(max-width: 850px)"),A=D=>se("matches"in D?D.matches:x.matches);return A(x),x.addEventListener?x.addEventListener("change",A):x.addListener(A),()=>{x.removeEventListener?x.removeEventListener("change",A):x.removeListener(A)}},[]),w.useEffect(()=>{if(typeof document>"u")return;const x=document.querySelector(`.${S.header}`);if(!x)return;const A=()=>{const U=x.offsetHeight;document.documentElement.style.setProperty("--header-height-mobile",`${U}px`)};A(),window.addEventListener("resize",A);const D=new ResizeObserver(()=>{A()});return D.observe(x),()=>{window.removeEventListener("resize",A),D.disconnect()}},[Z]),w.useEffect(()=>{if(typeof document>"u")return;const x=document.querySelector(`.${S.logoWrapper}`);if(!x)return;const A=()=>{const D=x.offsetWidth;document.documentElement.style.setProperty("--rk-logo-width",`${D}px`)};return A(),window.addEventListener("resize",A),()=>window.removeEventListener("resize",A)},[Z]),w.useEffect(()=>{if(typeof document>"u"||!I){document.documentElement.style.setProperty("--rk-search-overlay-height","0px");return}const x=document.querySelector(`.${S.searchOverlay}`);if(!x)return;const A=()=>{const U=x.offsetHeight;document.documentElement.style.setProperty("--rk-search-overlay-height",`${U}px`)};requestAnimationFrame(A),window.addEventListener("resize",A);const D=new ResizeObserver(A);return D.observe(x),()=>{window.removeEventListener("resize",A),D.disconnect()}},[I]);const X=()=>{const x=z==="light"?"dark":"light";K(x),document.documentElement.setAttribute("data-color-scheme",x)},ie=x=>{e&&(x.preventDefault(),e("home")),P(!1),B(!1)},c=()=>{P(!F),I&&B(!1),!F&&typeof document<"u"&&requestAnimationFrame(()=>{const x=document.querySelector(`.${S.header}`);if(x){const A=x.offsetHeight;document.documentElement.style.setProperty("--header-height-mobile",`${A}px`)}})},_=()=>{B(!I),F&&P(!1)},R=w.useMemo(()=>{if(!M.trim())return[];const x=M.toLowerCase();return Po.filter(A=>A.title.toLowerCase().startsWith(x))},[M]),W=x=>{e&&e(x),B(!1),G("")};return r.jsxs("header",{className:S.header,"data-open":F?"true":"false",children:[m&&r.jsx("div",{className:S.headerExtension,"data-color-scheme":"light",children:r.jsxs("div",{className:S.extensionContentWrapper,children:[T&&r.jsx("div",{className:S.extensionContent,children:r.jsx(Me,{"data-size":"sm",checked:z==="dark",onChange:X,label:E("header.darkMode"),color:"neutral","data-color-scheme":"light"})}),T&&N&&r.jsx("div",{className:S.extensionDivider}),N&&r.jsxs("div",{className:S.languageSwitch,children:[r.jsx("span",{className:S.languageLabel,children:E("header.language")}),r.jsxs(Q.TriggerContext,{children:[r.jsxs(Q.Trigger,{className:S.languageLink,"aria-label":E("header.selectLanguage"),style:{background:"transparent",border:"none",padding:0,cursor:"pointer",font:"inherit"},children:[O," ",r.jsx(de.ChevronDownIcon,{"aria-hidden":!0})]}),r.jsx(Q,{"data-color-scheme":z,placement:"bottom-end",children:r.jsxs(Q.List,{children:[r.jsx(Q.Item,{children:r.jsx(Q.Button,{onClick:()=>H("NO"),children:"Norsk (NO)"})}),r.jsx(Q.Item,{children:r.jsx(Q.Button,{onClick:()=>H("EN"),children:"English (EN)"})})]})})]})]})]})}),r.jsxs("div",{className:S.headerInner,children:[r.jsxs("div",{className:S.logoWrapper,children:[r.jsx(Ae,{href:"/",className:`${S.logo} ${S.primaryLogo}`,"aria-label":E("header.homeAriaLabel"),onClick:ie,children:r.jsx(ee,{})}),r.jsx("div",{className:S.secondaryLogoWrapper,children:f&&k?r.jsx("img",{src:z==="dark"&&g?g:k,alt:h,className:S.secondaryLogo}):f?r.jsx("div",{className:S.slotComponent,children:r.jsx("div",{className:S.slotContainer,children:r.jsx("p",{className:S.slotText,children:"SLOT"})})}):null})]}),v&&b&&b.length>0&&!Z&&r.jsx("nav",{className:S.navItems,children:b.map((x,A)=>r.jsx(Ae,{href:x.href,className:S.navLink,onClick:D=>{e&&(D.preventDefault(),e(x.href))},children:x.label},A))}),r.jsxs("div",{className:S.actions,children:[o&&r.jsxs(ge,{variant:"primary","data-color":"main","data-size":"md",className:S.ctaButton,onClick:u,children:[l,r.jsx("span",{className:S.buttonText,children:d||E("header.supportUs")})]}),!m&&y&&r.jsx("div",{className:S.themeToggle,children:r.jsx(Me,{checked:z==="dark",onChange:X,"aria-label":E("header.toggleTheme")})}),s&&r.jsxs("div",{className:S.userInfo,children:[r.jsx(Pe,{"data-size":"md",className:S.userName,children:"Frodo Baggins"}),r.jsx(Re,{"aria-label":"Frodo Baggins","data-color":"main",variant:"circle",initials:"FB"})]}),a&&r.jsxs("a",{href:"#",className:S.loginLink,children:[r.jsx("span",{className:S.loginText,children:E("header.login")}),r.jsx("div",{className:S.underline})]}),i&&r.jsx("div",{className:S.searchButtonWrapper,children:r.jsxs(ge,{variant:"secondary","data-color":"main","data-size":"md",onClick:_,"aria-expanded":I,"aria-label":E(I?"header.closeSearch":"header.openSearch"),children:[I?r.jsx(de.XMarkIcon,{"aria-hidden":!0}):r.jsx(de.MagnifyingGlassIcon,{"aria-hidden":!0}),r.jsx("span",{className:S.buttonText,children:E(I?"header.close":"header.search")})]})}),(p||Z)&&r.jsxs(ge,{variant:"primary","data-color":"main","data-size":"md",onClick:c,"aria-expanded":F,"aria-label":E(F?"header.closeMenu":"header.openMenu"),className:S.menuButton,children:[F?r.jsx(de.XMarkIcon,{"aria-hidden":!0}):r.jsx(de.MenuHamburgerIcon,{"aria-hidden":!0}),r.jsx("span",{className:S.buttonText,children:E(F?"header.close":"header.menu")})]})]})]}),F&&r.jsx("div",{className:S.menuOverlay,children:r.jsxs("div",{className:S.menuContent,children:[r.jsx("div",{className:S.menuLeftColumn}),r.jsxs("div",{className:S.menuRightColumn,children:[Z&&(N||T)&&r.jsxs("div",{className:S.menuUtilities,children:[N&&r.jsxs("div",{className:S.languageSwitch,children:[r.jsx("span",{className:S.languageLabel,children:E("header.language")}),r.jsxs(Q.TriggerContext,{children:[r.jsxs(Q.Trigger,{className:S.languageLink,"aria-label":E("header.selectLanguage"),style:{background:"transparent",border:"none",padding:0,cursor:"pointer",font:"inherit"},children:[O," ",r.jsx(de.ChevronDownIcon,{"aria-hidden":!0})]}),r.jsx(Q,{"data-color-scheme":z,placement:"bottom-start",children:r.jsxs(Q.List,{children:[r.jsx(Q.Item,{children:r.jsx(Q.Button,{onClick:()=>H("NO"),children:"Norsk (NO)"})}),r.jsx(Q.Item,{children:r.jsx(Q.Button,{onClick:()=>H("EN"),children:"English (EN)"})})]})})]})]}),T&&r.jsx("div",{className:S.extensionContent,children:r.jsx(Me,{"data-size":"sm",checked:z==="dark",onChange:X,label:E("header.darkMode"),color:"neutral","data-color-scheme":"light"})})]}),r.jsxs("div",{className:S.slotContent,children:[n,Z&&v&&b&&b.length>0&&r.jsx("nav",{className:S.navList,children:b.map((x,A)=>r.jsx(Ae,{href:x.href,className:S.navLink,onClick:D=>{e&&(D.preventDefault(),e(x.href))},children:x.label},A))})]}),Z&&r.jsx("div",{className:S.menuBrand,children:r.jsx(ee,{})})]})]})}),I&&r.jsx("div",{className:S.searchOverlay,children:r.jsxs("div",{className:S.searchContent,children:[r.jsxs(Ee,{children:[r.jsx(Ee.Input,{"aria-label":E("header.search"),placeholder:E("header.searchPlaceholder"),value:M,onChange:x=>G(x.target.value)}),r.jsx(Ee.Button,{"aria-label":E("header.search")}),r.jsx(Ee.ClearButton,{onClick:()=>G(""),"aria-label":E("header.clearSearch")})]}),M&&r.jsx("div",{className:S.searchResults,children:R.length>0?r.jsxs("div",{className:S.suggestionsSection,children:[r.jsx("h3",{className:S.suggestionsTitle,children:E("header.suggestions")}),r.jsx("ul",{className:S.resultList,children:R.slice(0,5).map(x=>r.jsx("li",{className:S.resultItem,children:r.jsxs("button",{className:S.resultLink,onClick:()=>W(x.path),children:[r.jsx("span",{className:S.suggestionIcon,children:r.jsx(de.MagnifyingGlassIcon,{"aria-hidden":!0})}),r.jsx("span",{className:S.suggestionText,children:(()=>{const A=x.title.toLowerCase().indexOf(M.toLowerCase());if(A===-1)return r.jsx("span",{className:S.remainingText,children:x.title});const D=x.title.slice(0,A),U=x.title.slice(A,A+M.length),te=x.title.slice(A+M.length);return r.jsxs(r.Fragment,{children:[r.jsx("span",{className:S.remainingText,children:D}),r.jsx("span",{className:S.highlightedText,children:U}),r.jsx("span",{className:S.remainingText,children:te})]})})()})]})},x.id))}),R.length>5&&r.jsxs(Ae,{href:"#","data-color":"neutral",className:S.viewAllLink,onClick:x=>{x.preventDefault(),e&&e(`search/${M}`),B(!1),G("")},children:[E("header.viewAll")," (",R.length,")"]})]}):r.jsx("div",{className:S.noResults,children:r.jsxs(Pe,{children:[E("header.noResults"),' "',M,'"']})})})]})})]})};function zo(t){const e=t;return`
+(function(x,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("react/jsx-runtime"),require("react"),require("@digdir/designsystemet-react"),require("date-fns"),require("@navikt/aksel-icons")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","@digdir/designsystemet-react","date-fns","@navikt/aksel-icons"],o):(x=typeof globalThis<"u"?globalThis:x||self,o(x.ComponentLibrary={},x.jsxRuntime,x.React,x.designsystemetReact,x.dateFns,x.akselIcons))})(this,(function(x,o,C,D,$,le){"use strict";const Je=C.forwardRef((t,e)=>o.jsx(D.Alert,{ref:e,...t}));Je.displayName="Alert";const Ee=C.forwardRef((t,e)=>o.jsx(D.Avatar,{ref:e,...t}));Ee.displayName="Avatar";const Qe=C.forwardRef((t,e)=>o.jsx(D.Badge,{ref:e,...t}));Qe.displayName="Badge";const Mt=D.BadgePosition,Pt=D.Breadcrumbs,Et=D.BreadcrumbsList,_t=D.BreadcrumbsItem,zt=D.BreadcrumbsLink,pe=D.Button;pe.displayName="Button";const Xe=D.Card,Ot=D.CardBlock;Xe.displayName="Card";const Re=D.Checkbox,Ht=D.Fieldset,Wt=D.useCheckboxGroup;Re.displayName="Checkbox",Ht.displayName="Fieldset";const Vt=D.Chip;function _e(t){return(e={})=>{const n=e.width?String(e.width):t.defaultWidth;return t.formats[n]||t.formats[t.defaultWidth]}}function ye(t){return(e,n)=>{const s=n!=null&&n.context?String(n.context):"standalone";let a;if(s==="formatting"&&t.formattingValues){const r=t.defaultFormattingWidth||t.defaultWidth,d=n!=null&&n.width?String(n.width):r;a=t.formattingValues[d]||t.formattingValues[r]}else{const r=t.defaultWidth,d=n!=null&&n.width?String(n.width):t.defaultWidth;a=t.values[d]||t.values[r]}const i=t.argumentCallback?t.argumentCallback(e):e;return a[i]}}function Te(t){return(e,n={})=>{const s=n.width,a=s&&t.matchPatterns[s]||t.matchPatterns[t.defaultMatchWidth],i=e.match(a);if(!i)return null;const r=i[0],d=s&&t.parsePatterns[s]||t.parsePatterns[t.defaultParseWidth],l=Array.isArray(d)?$t(d,m=>m.test(r)):Gt(d,m=>m.test(r));let c;c=t.valueCallback?t.valueCallback(l):l,c=n.valueCallback?n.valueCallback(c):c;const b=e.slice(r.length);return{value:c,rest:b}}}function Gt(t,e){for(const n in t)if(Object.prototype.hasOwnProperty.call(t,n)&&e(t[n]))return n}function $t(t,e){for(let n=0;n<t.length;n++)if(e(t[n]))return n}function qt(t){return(e,n={})=>{const s=e.match(t.matchPattern);if(!s)return null;const a=s[0],i=e.match(t.parsePattern);if(!i)return null;let r=t.valueCallback?t.valueCallback(i[0]):i[0];r=n.valueCallback?n.valueCallback(r):r;const d=e.slice(a.length);return{value:r,rest:d}}}const Ut={lessThanXSeconds:{one:"mindre enn ett sekund",other:"mindre enn {{count}} sekunder"},xSeconds:{one:"ett sekund",other:"{{count}} sekunder"},halfAMinute:"et halvt minutt",lessThanXMinutes:{one:"mindre enn ett minutt",other:"mindre enn {{count}} minutter"},xMinutes:{one:"ett minutt",other:"{{count}} minutter"},aboutXHours:{one:"omtrent en time",other:"omtrent {{count}} timer"},xHours:{one:"en time",other:"{{count}} timer"},xDays:{one:"en dag",other:"{{count}} dager"},aboutXWeeks:{one:"omtrent en uke",other:"omtrent {{count}} uker"},xWeeks:{one:"en uke",other:"{{count}} uker"},aboutXMonths:{one:"omtrent en måned",other:"omtrent {{count}} måneder"},xMonths:{one:"en måned",other:"{{count}} måneder"},aboutXYears:{one:"omtrent ett år",other:"omtrent {{count}} år"},xYears:{one:"ett år",other:"{{count}} år"},overXYears:{one:"over ett år",other:"over {{count}} år"},almostXYears:{one:"nesten ett år",other:"nesten {{count}} år"}},Kt=(t,e,n)=>{let s;const a=Ut[t];return typeof a=="string"?s=a:e===1?s=a.one:s=a.other.replace("{{count}}",String(e)),n!=null&&n.addSuffix?n.comparison&&n.comparison>0?"om "+s:s+" siden":s},Yt={full:"EEEE d. MMMM y",long:"d. MMMM y",medium:"d. MMM y",short:"dd.MM.y"},Zt={full:"'kl'. HH:mm:ss zzzz",long:"HH:mm:ss z",medium:"HH:mm:ss",short:"HH:mm"},Jt={full:"{{date}} 'kl.' {{time}}",long:"{{date}} 'kl.' {{time}}",medium:"{{date}} {{time}}",short:"{{date}} {{time}}"},Qt={date:_e({formats:Yt,defaultWidth:"full"}),time:_e({formats:Zt,defaultWidth:"full"}),dateTime:_e({formats:Jt,defaultWidth:"full"})},Xt={lastWeek:"'forrige' eeee 'kl.' p",yesterday:"'i går kl.' p",today:"'i dag kl.' p",tomorrow:"'i morgen kl.' p",nextWeek:"EEEE 'kl.' p",other:"P"},Rt=(t,e,n,s)=>Xt[t],en={narrow:["f.Kr.","e.Kr."],abbreviated:["f.Kr.","e.Kr."],wide:["før Kristus","etter Kristus"]},tn={narrow:["1","2","3","4"],abbreviated:["Q1","Q2","Q3","Q4"],wide:["1. kvartal","2. kvartal","3. kvartal","4. kvartal"]},nn={narrow:["J","F","M","A","M","J","J","A","S","O","N","D"],abbreviated:["jan.","feb.","mars","apr.","mai","juni","juli","aug.","sep.","okt.","nov.","des."],wide:["januar","februar","mars","april","mai","juni","juli","august","september","oktober","november","desember"]},on={narrow:["S","M","T","O","T","F","L"],short:["sø","ma","ti","on","to","fr","lø"],abbreviated:["søn","man","tir","ons","tor","fre","lør"],wide:["søndag","mandag","tirsdag","onsdag","torsdag","fredag","lørdag"]},rn={narrow:{am:"a",pm:"p",midnight:"midnatt",noon:"middag",morning:"på morg.",afternoon:"på etterm.",evening:"på kvelden",night:"på natten"},abbreviated:{am:"a.m.",pm:"p.m.",midnight:"midnatt",noon:"middag",morning:"på morg.",afternoon:"på etterm.",evening:"på kvelden",night:"på natten"},wide:{am:"a.m.",pm:"p.m.",midnight:"midnatt",noon:"middag",morning:"på morgenen",afternoon:"på ettermiddagen",evening:"på kvelden",night:"på natten"}},sn={ordinalNumber:(t,e)=>Number(t)+".",era:ye({values:en,defaultWidth:"wide"}),quarter:ye({values:tn,defaultWidth:"wide",argumentCallback:t=>t-1}),month:ye({values:nn,defaultWidth:"wide"}),day:ye({values:on,defaultWidth:"wide"}),dayPeriod:ye({values:rn,defaultWidth:"wide"})},an=/^(\d+)\.?/i,ln=/\d+/i,dn={narrow:/^(f\.? ?Kr\.?|fvt\.?|e\.? ?Kr\.?|evt\.?)/i,abbreviated:/^(f\.? ?Kr\.?|fvt\.?|e\.? ?Kr\.?|evt\.?)/i,wide:/^(før Kristus|før vår tid|etter Kristus|vår tid)/i},cn={any:[/^f/i,/^e/i]},un={narrow:/^[1234]/i,abbreviated:/^q[1234]/i,wide:/^[1234](\.)? kvartal/i},gn={any:[/1/i,/2/i,/3/i,/4/i]},pn={narrow:/^[jfmasond]/i,abbreviated:/^(jan|feb|mars?|apr|mai|juni?|juli?|aug|sep|okt|nov|des)\.?/i,wide:/^(januar|februar|mars|april|mai|juni|juli|august|september|oktober|november|desember)/i},mn={narrow:[/^j/i,/^f/i,/^m/i,/^a/i,/^m/i,/^j/i,/^j/i,/^a/i,/^s/i,/^o/i,/^n/i,/^d/i],any:[/^ja/i,/^f/i,/^mar/i,/^ap/i,/^mai/i,/^jun/i,/^jul/i,/^aug/i,/^s/i,/^o/i,/^n/i,/^d/i]},fn={narrow:/^[smtofl]/i,short:/^(sø|ma|ti|on|to|fr|lø)/i,abbreviated:/^(søn|man|tir|ons|tor|fre|lør)/i,wide:/^(søndag|mandag|tirsdag|onsdag|torsdag|fredag|lørdag)/i},hn={any:[/^s/i,/^m/i,/^ti/i,/^o/i,/^to/i,/^f/i,/^l/i]},kn={narrow:/^(midnatt|middag|(på) (morgenen|ettermiddagen|kvelden|natten)|[ap])/i,any:/^([ap]\.?\s?m\.?|midnatt|middag|(på) (morgenen|ettermiddagen|kvelden|natten))/i},vn={any:{am:/^a(\.?\s?m\.?)?$/i,pm:/^p(\.?\s?m\.?)?$/i,midnight:/^midn/i,noon:/^midd/i,morning:/morgen/i,afternoon:/ettermiddag/i,evening:/kveld/i,night:/natt/i}},bn={ordinalNumber:qt({matchPattern:an,parsePattern:ln,valueCallback:t=>parseInt(t,10)}),era:Te({matchPatterns:dn,defaultMatchWidth:"wide",parsePatterns:cn,defaultParseWidth:"any"}),quarter:Te({matchPatterns:un,defaultMatchWidth:"wide",parsePatterns:gn,defaultParseWidth:"any",valueCallback:t=>t+1}),month:Te({matchPatterns:pn,defaultMatchWidth:"wide",parsePatterns:mn,defaultParseWidth:"any"}),day:Te({matchPatterns:fn,defaultMatchWidth:"wide",parsePatterns:hn,defaultParseWidth:"any"}),dayPeriod:Te({matchPatterns:kn,defaultMatchWidth:"any",parsePatterns:vn,defaultParseWidth:"any"})},ve={code:"nb",formatDistance:Kt,formatLong:Qt,formatRelative:Rt,localize:sn,match:bn,options:{weekStartsOn:1,firstWeekContainsDate:4}},et=({title:t,...e})=>o.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 28 28",fill:"none","aria-hidden":t?void 0:!0,focusable:"false",...e,children:[t&&o.jsx("title",{children:t}),o.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M16.952 6.96459C16.6103 6.62289 16.0563 6.62289 15.7146 6.96459L9.2979 13.3813C8.95621 13.723 8.95621 14.277 9.2979 14.6187L15.7146 21.0354C16.0563 21.3771 16.6103 21.3771 16.952 21.0354C17.2937 20.6937 17.2937 20.1396 16.952 19.7979L11.1541 14L16.952 8.20203C17.2937 7.86032 17.2937 7.3063 16.952 6.96459Z",fill:"currentColor"})]});et.displayName="ChevronLeftIcon";const tt=({title:t,...e})=>o.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 28 28",fill:"none","aria-hidden":t?void 0:!0,focusable:"false",...e,children:[t&&o.jsx("title",{children:t}),o.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M11.048 6.96459C11.3897 6.62289 11.9437 6.62289 12.2854 6.96459L18.7021 13.3813C19.0438 13.723 19.0438 14.277 18.7021 14.6187L12.2854 21.0354C11.9437 21.3771 11.3897 21.3771 11.048 21.0354C10.7063 20.6937 10.7063 20.1396 11.048 19.7979L16.8459 14L11.048 8.20203C10.7063 7.86032 10.7063 7.3063 11.048 6.96459Z",fill:"currentColor"})]});tt.displayName="ChevronRightIcon";const re={calendarContainer:"_calendarContainer_10l5p_1",calendarHeader:"_calendarHeader_10l5p_14",monthYear:"_monthYear_10l5p_21",navigationButtons:"_navigationButtons_10l5p_32",grid:"_grid_10l5p_41",dayNameCell:"_dayNameCell_10l5p_48",dateCell:"_dateCell_10l5p_65",dateNumberContainer:"_dateNumberContainer_10l5p_90",otherMonth:"_otherMonth_10l5p_103",selectedDate:"_selectedDate_10l5p_129"},yn=t=>{const e=$.startOfMonth(t),n=$.startOfWeek(e,{locale:ve}),s=$.addDays(n,41);return $.eachDayOfInterval({start:n,end:s})},nt=t=>t&&t.charAt(0).toUpperCase()+t.slice(1),ot=({initialDate:t=new Date,selectedDate:e=null,onDateSelect:n,"data-color":s,"data-size":a})=>{const[i,r]=C.useState($.startOfMonth(e&&$.isValid(e)?e:t));C.useEffect(()=>{if(e&&$.isValid(e)){const u=$.startOfMonth(e);$.isSameMonth(u,i)||r(u)}},[e]);const d=C.useMemo(()=>$.startOfMonth(new Date),[]),l=C.useMemo(()=>!1,[i,d]),c=C.useMemo(()=>yn(i),[i]),b=C.useMemo(()=>{const u=$.startOfWeek(new Date,{locale:ve});return Array.from({length:7}).map((T,F)=>{const B=$.format($.addDays(u,F),"EEEEEE",{locale:ve});return nt(B)})},[]),m=C.useCallback(()=>{l||r(u=>$.startOfMonth($.subMonths(u,1)))},[l]),k=C.useCallback(()=>{r(u=>$.startOfMonth($.addMonths(u,1)))},[]),p=C.useCallback(u=>{n&&n(u)},[n]),f=C.useCallback((u,T)=>{(u.key==="Enter"||u.key===" ")&&(u.preventDefault(),p(T))},[p]),h=$.format(i,"MMMM",{locale:ve}),v=$.format(i,"yyyy",{locale:ve}),g=`${nt(h)} ${v}`;return o.jsxs("div",{className:re.calendarContainer,"data-color":s,"data-size":a,children:[o.jsxs("div",{className:re.calendarHeader,children:[o.jsx("span",{className:re.monthYear,children:g}),o.jsxs("div",{className:re.navigationButtons,children:[o.jsx(D.Button,{variant:"tertiary",icon:!0,onClick:m,"aria-label":"Forrige måned",disabled:l,children:o.jsx(et,{})}),o.jsx(D.Button,{variant:"tertiary",icon:!0,onClick:k,"aria-label":"Neste måned",children:o.jsx(tt,{})})]})]}),o.jsx("div",{className:re.grid,children:b.map(u=>o.jsx("div",{className:re.dayNameCell,children:u},u))}),o.jsx("div",{className:re.grid,children:c.map(u=>{const T=$.isSameMonth(u,i),F=e&&$.isValid(e)&&$.isSameDay(u,e),B=$.isToday(u),N=[re.dateCell,T?"":re.otherMonth,F?re.selectedDate:"",B&&!F?re.todayDate:""].filter(Boolean).join(" ");return o.jsx("div",{className:N,onClick:()=>p(u),onKeyDown:I=>f(I,u),role:"button",tabIndex:0,"aria-pressed":F??!1,"aria-label":$.format(u,"PPP",{locale:ve}),children:o.jsx("span",{className:re.dateNumberContainer,children:$.format(u,"d")})},u.toISOString())})})]})};ot.displayName="DatePicker";const me={fieldset:"_fieldset_16fx7_2",description:"_description_16fx7_14",error:"_error_16fx7_21",inputWrapper:"_inputWrapper_16fx7_30",inputWrapperError:"_inputWrapperError_16fx7_42",suffixButton:"_suffixButton_16fx7_80",suffixButtonInteractive:"_suffixButtonInteractive_16fx7_100"},rt=t=>{const e=t.slice(0,2),n=t.slice(2,4),s=t.slice(4,8);return t.length>4?`${e}.${n}.${s}`:t.length>2?`${e}.${n}`:t.length>0?e:""},st=t=>(t||"").replace(/\D/g,""),it=t=>{let e=t;if(e.length>=2){const n=parseInt(e.substring(0,2),10);!isNaN(n)&&n>31&&(e="31"+e.substring(2))}if(e.length>=4){const n=parseInt(e.substring(2,4),10);!isNaN(n)&&n>12&&(e=e.substring(0,2)+"12"+e.substring(4))}return e.slice(0,8)},at=C.forwardRef((t,e)=>{const{label:n,suffixIcon:s,onSuffixClick:a,className:i,inputWrapperClassName:r,inputClassName:d,value:l,defaultValue:c,onChange:b,readOnly:m,placeholder:k="dd.mm.åååå",id:p,name:f,required:h,disabled:v,onClick:g,onFocus:u,onBlur:T,autoComplete:F="off","aria-label":B,"aria-labelledby":N,description:I,error:j,"data-color":M,"data-size":H,...E}=t,W=l!==void 0,O=C.useRef(null);C.useImperativeHandle(e,()=>O.current);const _=C.useCallback(A=>{const P=st(A),q=it(P);return rt(q)},[]),[L,K]=C.useState(()=>_(l??c));C.useEffect(()=>{if(W){const A=_(l);A!==L&&(K(A),O.current&&O.current.value!==A&&(O.current.value=A))}},[l,W,L,_]);const se=C.useCallback(A=>{const P=A.target,q=P.value,oe=L,ne=st(q).slice(0,8),V=it(ne),w=rt(V);let z=0;const G=V.length;G<=2?z=G:G<=4?z=G+1:z=G+2,z=Math.min(z,w.length),requestAnimationFrame(()=>{if(O.current&&(K(w),O.current.value=w,O.current.setSelectionRange(z,z),(w!==oe||W)&&b)){const Z={...A,target:{...P,value:w}};b(Z,w)}})},[L,W,b,_]),X=[me.fieldset,i].filter(Boolean).join(" "),Q=[me.inputWrapper,r,j?me.inputWrapperError:""].filter(Boolean).join(" "),ce=[d].filter(Boolean).join(" "),R=[me.suffixButton,a?me.suffixButtonInteractive:""].filter(Boolean).join(" ");!n&&!B&&!N&&console.warn("Advarsel: DateInput-komponenten bør ha label, aria-label, eller aria-labelledby for tilgjengelighet.");const ae=n&&typeof n=="string"?N||`${p}-label`:void 0,ee=I?`${p}-desc`:void 0,te=j?`${p}-err`:void 0,S=[ee,te].filter(Boolean).join(" ")||void 0;return o.jsxs("div",{className:X,"data-color":M,"data-size":H,children:[n&&typeof n=="string"?o.jsx("label",{id:ae,htmlFor:p,children:n}):n,I&&o.jsx("p",{id:ee,className:me.description,children:I}),o.jsxs("div",{className:Q,children:[o.jsx("input",{ref:O,type:"text",inputMode:"numeric",pattern:"\\d{2}\\.\\d{2}\\.\\d{4}",maxLength:10,value:L,readOnly:m,placeholder:k,id:p,name:f,required:h,disabled:v,onClick:g,onChange:se,onFocus:u,onBlur:T,autoComplete:F,"aria-label":B,"aria-labelledby":ae,"aria-describedby":S,"aria-invalid":!!j,className:ce,...E}),s&&o.jsx("button",{type:"button",className:R,onClick:v?void 0:a,tabIndex:a&&!v?0:-1,"aria-hidden":!a,disabled:v,"aria-label":a?"Åpne datovelger":void 0,children:s})]}),j&&o.jsx("p",{id:te,className:me.error,role:"alert",children:j})]})});at.displayName="DateInput";function Tn(t){return Object.prototype.toString.call(t)==="[object Object]"}function lt(t){return Tn(t)||Array.isArray(t)}function xn(){return!!(typeof window<"u"&&window.document&&window.document.createElement)}function ze(t,e){const n=Object.keys(t),s=Object.keys(e);if(n.length!==s.length)return!1;const a=JSON.stringify(Object.keys(t.breakpoints||{})),i=JSON.stringify(Object.keys(e.breakpoints||{}));return a!==i?!1:n.every(r=>{const d=t[r],l=e[r];return typeof d=="function"?`${d}`==`${l}`:!lt(d)||!lt(l)?d===l:ze(d,l)})}function dt(t){return t.concat().sort((e,n)=>e.name>n.name?1:-1).map(e=>e.options)}function Sn(t,e){if(t.length!==e.length)return!1;const n=dt(t),s=dt(e);return n.every((a,i)=>{const r=s[i];return ze(a,r)})}function Oe(t){return typeof t=="number"}function He(t){return typeof t=="string"}function Be(t){return typeof t=="boolean"}function ct(t){return Object.prototype.toString.call(t)==="[object Object]"}function U(t){return Math.abs(t)}function We(t){return Math.sign(t)}function xe(t,e){return U(t-e)}function wn(t,e){if(t===0||e===0||U(t)<=U(e))return 0;const n=xe(U(t),U(e));return U(n/t)}function Cn(t){return Math.round(t*100)/100}function Se(t){return Ce(t).map(Number)}function ie(t){return t[we(t)]}function we(t){return Math.max(0,t.length-1)}function Ve(t,e){return e===we(t)}function ut(t,e=0){return Array.from(Array(t),(n,s)=>e+s)}function Ce(t){return Object.keys(t)}function gt(t,e){return[t,e].reduce((n,s)=>(Ce(s).forEach(a=>{const i=n[a],r=s[a],d=ct(i)&&ct(r);n[a]=d?gt(i,r):r}),n),{})}function Ge(t,e){return typeof e.MouseEvent<"u"&&t instanceof e.MouseEvent}function Dn(t,e){const n={start:s,center:a,end:i};function s(){return 0}function a(l){return i(l)/2}function i(l){return e-l}function r(l,c){return He(t)?n[t](l):t(e,l,c)}return{measure:r}}function De(){let t=[];function e(a,i,r,d={passive:!0}){let l;if("addEventListener"in a)a.addEventListener(i,r,d),l=()=>a.removeEventListener(i,r,d);else{const c=a;c.addListener(r),l=()=>c.removeListener(r)}return t.push(l),s}function n(){t=t.filter(a=>a())}const s={add:e,clear:n};return s}function In(t,e,n,s){const a=De(),i=1e3/60;let r=null,d=0,l=0;function c(){a.add(t,"visibilitychange",()=>{t.hidden&&f()})}function b(){p(),a.clear()}function m(v){if(!l)return;r||(r=v,n(),n());const g=v-r;for(r=v,d+=g;d>=i;)n(),d-=i;const u=d/i;s(u),l&&(l=e.requestAnimationFrame(m))}function k(){l||(l=e.requestAnimationFrame(m))}function p(){e.cancelAnimationFrame(l),r=null,d=0,l=0}function f(){r=null,d=0}return{init:c,destroy:b,start:k,stop:p,update:n,render:s}}function An(t,e){const n=e==="rtl",s=t==="y",a=s?"y":"x",i=s?"x":"y",r=!s&&n?-1:1,d=b(),l=m();function c(f){const{height:h,width:v}=f;return s?h:v}function b(){return s?"top":n?"right":"left"}function m(){return s?"bottom":n?"left":"right"}function k(f){return f*r}return{scroll:a,cross:i,startEdge:d,endEdge:l,measureSize:c,direction:k}}function fe(t=0,e=0){const n=U(t-e);function s(c){return c<t}function a(c){return c>e}function i(c){return s(c)||a(c)}function r(c){return i(c)?s(c)?t:e:c}function d(c){return n?c-n*Math.ceil((c-e)/n):c}return{length:n,max:e,min:t,constrain:r,reachedAny:i,reachedMax:a,reachedMin:s,removeOffset:d}}function pt(t,e,n){const{constrain:s}=fe(0,t),a=t+1;let i=r(e);function r(k){return n?U((a+k)%a):s(k)}function d(){return i}function l(k){return i=r(k),m}function c(k){return b().set(d()+k)}function b(){return pt(t,d(),n)}const m={get:d,set:l,add:c,clone:b};return m}function Ln(t,e,n,s,a,i,r,d,l,c,b,m,k,p,f,h,v,g,u){const{cross:T,direction:F}=t,B=["INPUT","SELECT","TEXTAREA"],N={passive:!1},I=De(),j=De(),M=fe(50,225).constrain(p.measure(20)),H={mouse:300,touch:400},E={mouse:500,touch:600},W=f?43:25;let O=!1,_=0,L=0,K=!1,se=!1,X=!1,Q=!1;function ce(w){if(!u)return;function z(Z){(Be(u)||u(w,Z))&&A(Z)}const G=e;I.add(G,"dragstart",Z=>Z.preventDefault(),N).add(G,"touchmove",()=>{},N).add(G,"touchend",()=>{}).add(G,"touchstart",z).add(G,"mousedown",z).add(G,"touchcancel",q).add(G,"contextmenu",q).add(G,"click",oe,!0)}function R(){I.clear(),j.clear()}function ae(){const w=Q?n:e;j.add(w,"touchmove",P,N).add(w,"touchend",q).add(w,"mousemove",P,N).add(w,"mouseup",q)}function ee(w){const z=w.nodeName||"";return B.includes(z)}function te(){return(f?E:H)[Q?"mouse":"touch"]}function S(w,z){const G=m.add(We(w)*-1),Z=b.byDistance(w,!f).distance;return f||U(w)<M?Z:v&&z?Z*.5:b.byIndex(G.get(),0).distance}function A(w){const z=Ge(w,s);Q=z,X=f&&z&&!w.buttons&&O,O=xe(a.get(),r.get())>=2,!(z&&w.button!==0)&&(ee(w.target)||(K=!0,i.pointerDown(w),c.useFriction(0).useDuration(0),a.set(r),ae(),_=i.readPoint(w),L=i.readPoint(w,T),k.emit("pointerDown")))}function P(w){if(!Ge(w,s)&&w.touches.length>=2)return q(w);const G=i.readPoint(w),Z=i.readPoint(w,T),de=xe(G,_),ue=xe(Z,L);if(!se&&!Q&&(!w.cancelable||(se=de>ue,!se)))return q(w);const he=i.pointerMove(w);de>h&&(X=!0),c.useFriction(.3).useDuration(.75),d.start(),a.add(F(he)),w.preventDefault()}function q(w){const G=b.byDistance(0,!1).index!==m.get(),Z=i.pointerUp(w)*te(),de=S(F(Z),G),ue=wn(Z,de),he=W-10*ue,ge=g+ue/50;se=!1,K=!1,j.clear(),c.useDuration(he).useFriction(ge),l.distance(de,!f),Q=!1,k.emit("pointerUp")}function oe(w){X&&(w.stopPropagation(),w.preventDefault(),X=!1)}function ne(){return K}return{init:ce,destroy:R,pointerDown:ne}}function jn(t,e){let s,a;function i(m){return m.timeStamp}function r(m,k){const f=`client${(k||t.scroll)==="x"?"X":"Y"}`;return(Ge(m,e)?m:m.touches[0])[f]}function d(m){return s=m,a=m,r(m)}function l(m){const k=r(m)-r(a),p=i(m)-i(s)>170;return a=m,p&&(s=m),k}function c(m){if(!s||!a)return 0;const k=r(a)-r(s),p=i(m)-i(s),f=i(m)-i(a)>170,h=k/p;return p&&!f&&U(h)>.1?h:0}return{pointerDown:d,pointerMove:l,pointerUp:c,readPoint:r}}function Bn(){function t(n){const{offsetTop:s,offsetLeft:a,offsetWidth:i,offsetHeight:r}=n;return{top:s,right:a+i,bottom:s+r,left:a,width:i,height:r}}return{measure:t}}function Fn(t){function e(s){return t*(s/100)}return{measure:e}}function Nn(t,e,n,s,a,i,r){const d=[t].concat(s);let l,c,b=[],m=!1;function k(v){return a.measureSize(r.measure(v))}function p(v){if(!i)return;c=k(t),b=s.map(k);function g(u){for(const T of u){if(m)return;const F=T.target===t,B=s.indexOf(T.target),N=F?c:b[B],I=k(F?t:s[B]);if(U(I-N)>=.5){v.reInit(),e.emit("resize");break}}}l=new ResizeObserver(u=>{(Be(i)||i(v,u))&&g(u)}),n.requestAnimationFrame(()=>{d.forEach(u=>l.observe(u))})}function f(){m=!0,l&&l.disconnect()}return{init:p,destroy:f}}function Mn(t,e,n,s,a,i){let r=0,d=0,l=a,c=i,b=t.get(),m=0;function k(){const N=s.get()-t.get(),I=!l;let j=0;return I?(r=0,n.set(s),t.set(s),j=N):(n.set(t),r+=N/l,r*=c,b+=r,t.add(r),j=b-m),d=We(j),m=b,B}function p(){const N=s.get()-e.get();return U(N)<.001}function f(){return l}function h(){return d}function v(){return r}function g(){return T(a)}function u(){return F(i)}function T(N){return l=N,B}function F(N){return c=N,B}const B={direction:h,duration:f,velocity:v,seek:k,settled:p,useBaseFriction:u,useBaseDuration:g,useFriction:F,useDuration:T};return B}function Pn(t,e,n,s,a){const i=a.measure(10),r=a.measure(50),d=fe(.1,.99);let l=!1;function c(){return!(l||!t.reachedAny(n.get())||!t.reachedAny(e.get()))}function b(p){if(!c())return;const f=t.reachedMin(e.get())?"min":"max",h=U(t[f]-e.get()),v=n.get()-e.get(),g=d.constrain(h/r);n.subtract(v*g),!p&&U(v)<i&&(n.set(t.constrain(n.get())),s.useDuration(25).useBaseFriction())}function m(p){l=!p}return{shouldConstrain:c,constrain:b,toggleActive:m}}function En(t,e,n,s,a){const i=fe(-e+t,0),r=m(),d=b(),l=k();function c(f,h){return xe(f,h)<=1}function b(){const f=r[0],h=ie(r),v=r.lastIndexOf(f),g=r.indexOf(h)+1;return fe(v,g)}function m(){return n.map((f,h)=>{const{min:v,max:g}=i,u=i.constrain(f),T=!h,F=Ve(n,h);return T?g:F||c(v,u)?v:c(g,u)?g:u}).map(f=>parseFloat(f.toFixed(3)))}function k(){if(e<=t+a)return[i.max];if(s==="keepSnaps")return r;const{min:f,max:h}=d;return r.slice(f,h)}return{snapsContained:l,scrollContainLimit:d}}function _n(t,e,n){const s=e[0],a=n?s-t:ie(e);return{limit:fe(a,s)}}function zn(t,e,n,s){const i=e.min+.1,r=e.max+.1,{reachedMin:d,reachedMax:l}=fe(i,r);function c(k){return k===1?l(n.get()):k===-1?d(n.get()):!1}function b(k){if(!c(k))return;const p=t*(k*-1);s.forEach(f=>f.add(p))}return{loop:b}}function On(t){const{max:e,length:n}=t;function s(i){const r=i-e;return n?r/-n:0}return{get:s}}function Hn(t,e,n,s,a){const{startEdge:i,endEdge:r}=t,{groupSlides:d}=a,l=m().map(e.measure),c=k(),b=p();function m(){return d(s).map(h=>ie(h)[r]-h[0][i]).map(U)}function k(){return s.map(h=>n[i]-h[i]).map(h=>-U(h))}function p(){return d(c).map(h=>h[0]).map((h,v)=>h+l[v])}return{snaps:c,snapsAligned:b}}function Wn(t,e,n,s,a,i){const{groupSlides:r}=a,{min:d,max:l}=s,c=b();function b(){const k=r(i),p=!t||e==="keepSnaps";return n.length===1?[i]:p?k:k.slice(d,l).map((f,h,v)=>{const g=!h,u=Ve(v,h);if(g){const T=ie(v[0])+1;return ut(T)}if(u){const T=we(i)-ie(v)[0]+1;return ut(T,ie(v)[0])}return f})}return{slideRegistry:c}}function Vn(t,e,n,s,a){const{reachedAny:i,removeOffset:r,constrain:d}=s;function l(f){return f.concat().sort((h,v)=>U(h)-U(v))[0]}function c(f){const h=t?r(f):d(f),v=e.map((u,T)=>({diff:b(u-h,0),index:T})).sort((u,T)=>U(u.diff)-U(T.diff)),{index:g}=v[0];return{index:g,distance:h}}function b(f,h){const v=[f,f+n,f-n];if(!t)return f;if(!h)return l(v);const g=v.filter(u=>We(u)===h);return g.length?l(g):ie(v)-n}function m(f,h){const v=e[f]-a.get(),g=b(v,h);return{index:f,distance:g}}function k(f,h){const v=a.get()+f,{index:g,distance:u}=c(v),T=!t&&i(v);if(!h||T)return{index:g,distance:f};const F=e[g]-u,B=f+b(F,0);return{index:g,distance:B}}return{byDistance:k,byIndex:m,shortcut:b}}function Gn(t,e,n,s,a,i,r){function d(m){const k=m.distance,p=m.index!==e.get();i.add(k),k&&(s.duration()?t.start():(t.update(),t.render(1),t.update())),p&&(n.set(e.get()),e.set(m.index),r.emit("select"))}function l(m,k){const p=a.byDistance(m,k);d(p)}function c(m,k){const p=e.clone().set(m),f=a.byIndex(p.get(),k);d(f)}return{distance:l,index:c}}function $n(t,e,n,s,a,i,r,d){const l={passive:!0,capture:!0};let c=0;function b(p){if(!d)return;function f(h){if(new Date().getTime()-c>10)return;r.emit("slideFocusStart"),t.scrollLeft=0;const u=n.findIndex(T=>T.includes(h));Oe(u)&&(a.useDuration(0),s.index(u,0),r.emit("slideFocus"))}i.add(document,"keydown",m,!1),e.forEach((h,v)=>{i.add(h,"focus",g=>{(Be(d)||d(p,g))&&f(v)},l)})}function m(p){p.code==="Tab"&&(c=new Date().getTime())}return{init:b}}function Ie(t){let e=t;function n(){return e}function s(l){e=r(l)}function a(l){e+=r(l)}function i(l){e-=r(l)}function r(l){return Oe(l)?l:l.get()}return{get:n,set:s,add:a,subtract:i}}function mt(t,e){const n=t.scroll==="x"?r:d,s=e.style;let a=null,i=!1;function r(k){return`translate3d(${k}px,0px,0px)`}function d(k){return`translate3d(0px,${k}px,0px)`}function l(k){if(i)return;const p=Cn(t.direction(k));p!==a&&(s.transform=n(p),a=p)}function c(k){i=!k}function b(){i||(s.transform="",e.getAttribute("style")||e.removeAttribute("style"))}return{clear:b,to:l,toggleActive:c}}function qn(t,e,n,s,a,i,r,d,l){const b=Se(a),m=Se(a).reverse(),k=g().concat(u());function p(I,j){return I.reduce((M,H)=>M-a[H],j)}function f(I,j){return I.reduce((M,H)=>p(M,j)>0?M.concat([H]):M,[])}function h(I){return i.map((j,M)=>({start:j-s[M]+.5+I,end:j+e-.5+I}))}function v(I,j,M){const H=h(j);return I.map(E=>{const W=M?0:-n,O=M?n:0,_=M?"end":"start",L=H[E][_];return{index:E,loopPoint:L,slideLocation:Ie(-1),translate:mt(t,l[E]),target:()=>d.get()>L?W:O}})}function g(){const I=r[0],j=f(m,I);return v(j,n,!1)}function u(){const I=e-r[0]-1,j=f(b,I);return v(j,-n,!0)}function T(){return k.every(({index:I})=>{const j=b.filter(M=>M!==I);return p(j,e)<=.1})}function F(){k.forEach(I=>{const{target:j,translate:M,slideLocation:H}=I,E=j();E!==H.get()&&(M.to(E),H.set(E))})}function B(){k.forEach(I=>I.translate.clear())}return{canLoop:T,clear:B,loop:F,loopPoints:k}}function Un(t,e,n){let s,a=!1;function i(l){if(!n)return;function c(b){for(const m of b)if(m.type==="childList"){l.reInit(),e.emit("slidesChanged");break}}s=new MutationObserver(b=>{a||(Be(n)||n(l,b))&&c(b)}),s.observe(t,{childList:!0})}function r(){s&&s.disconnect(),a=!0}return{init:i,destroy:r}}function Kn(t,e,n,s){const a={};let i=null,r=null,d,l=!1;function c(){d=new IntersectionObserver(f=>{l||(f.forEach(h=>{const v=e.indexOf(h.target);a[v]=h}),i=null,r=null,n.emit("slidesInView"))},{root:t.parentElement,threshold:s}),e.forEach(f=>d.observe(f))}function b(){d&&d.disconnect(),l=!0}function m(f){return Ce(a).reduce((h,v)=>{const g=parseInt(v),{isIntersecting:u}=a[g];return(f&&u||!f&&!u)&&h.push(g),h},[])}function k(f=!0){if(f&&i)return i;if(!f&&r)return r;const h=m(f);return f&&(i=h),f||(r=h),h}return{init:c,destroy:b,get:k}}function Yn(t,e,n,s,a,i){const{measureSize:r,startEdge:d,endEdge:l}=t,c=n[0]&&a,b=f(),m=h(),k=n.map(r),p=v();function f(){if(!c)return 0;const u=n[0];return U(e[d]-u[d])}function h(){if(!c)return 0;const u=i.getComputedStyle(ie(s));return parseFloat(u.getPropertyValue(`margin-${l}`))}function v(){return n.map((u,T,F)=>{const B=!T,N=Ve(F,T);return B?k[T]+b:N?k[T]+m:F[T+1][d]-u[d]}).map(U)}return{slideSizes:k,slideSizesWithGaps:p,startGap:b,endGap:m}}function Zn(t,e,n,s,a,i,r,d,l){const{startEdge:c,endEdge:b,direction:m}=t,k=Oe(n);function p(g,u){return Se(g).filter(T=>T%u===0).map(T=>g.slice(T,T+u))}function f(g){return g.length?Se(g).reduce((u,T,F)=>{const B=ie(u)||0,N=B===0,I=T===we(g),j=a[c]-i[B][c],M=a[c]-i[T][b],H=!s&&N?m(r):0,E=!s&&I?m(d):0,W=U(M-E-(j+H));return F&&W>e+l&&u.push(T),I&&u.push(g.length),u},[]).map((u,T,F)=>{const B=Math.max(F[T-1]||0);return g.slice(B,u)}):[]}function h(g){return k?p(g,n):f(g)}return{groupSlides:h}}function Jn(t,e,n,s,a,i,r){const{align:d,axis:l,direction:c,startIndex:b,loop:m,duration:k,dragFree:p,dragThreshold:f,inViewThreshold:h,slidesToScroll:v,skipSnaps:g,containScroll:u,watchResize:T,watchSlides:F,watchDrag:B,watchFocus:N}=i,I=2,j=Bn(),M=j.measure(e),H=n.map(j.measure),E=An(l,c),W=E.measureSize(M),O=Fn(W),_=Dn(d,W),L=!m&&!!u,K=m||!!u,{slideSizes:se,slideSizesWithGaps:X,startGap:Q,endGap:ce}=Yn(E,M,H,n,K,a),R=Zn(E,W,v,m,M,H,Q,ce,I),{snaps:ae,snapsAligned:ee}=Hn(E,_,M,H,R),te=-ie(ae)+ie(X),{snapsContained:S,scrollContainLimit:A}=En(W,te,ee,u,I),P=L?S:ee,{limit:q}=_n(te,P,m),oe=pt(we(P),b,m),ne=oe.clone(),V=Se(n),w=({dragHandler:be,scrollBody:Ye,scrollBounds:Ze,options:{loop:Pe}})=>{Pe||Ze.constrain(be.pointerDown()),Ye.seek()},z=({scrollBody:be,translate:Ye,location:Ze,offsetLocation:Pe,previousLocation:Fo,scrollLooper:No,slideLooper:Mo,dragHandler:Po,animation:Eo,eventHandler:At,scrollBounds:_o,options:{loop:Lt}},jt)=>{const Bt=be.settled(),zo=!_o.shouldConstrain(),Ft=Lt?Bt:Bt&&zo,Nt=Ft&&!Po.pointerDown();Nt&&Eo.stop();const Oo=Ze.get()*jt+Fo.get()*(1-jt);Pe.set(Oo),Lt&&(No.loop(be.direction()),Mo.loop()),Ye.to(Pe.get()),Nt&&At.emit("settle"),Ft||At.emit("scroll")},G=In(s,a,()=>w(Ke),be=>z(Ke,be)),Z=.68,de=P[oe.get()],ue=Ie(de),he=Ie(de),ge=Ie(de),ke=Ie(de),je=Mn(ue,ge,he,ke,k,Z),qe=Vn(m,P,te,q,ke),Ue=Gn(G,oe,ne,je,qe,ke,r),Ct=On(q),Dt=De(),jo=Kn(e,n,r,h),{slideRegistry:It}=Wn(L,u,P,A,R,V),Bo=$n(t,n,It,Ue,je,Dt,r,N),Ke={ownerDocument:s,ownerWindow:a,eventHandler:r,containerRect:M,slideRects:H,animation:G,axis:E,dragHandler:Ln(E,t,s,a,ke,jn(E,a),ue,G,Ue,je,qe,oe,r,O,p,f,g,Z,B),eventStore:Dt,percentOfView:O,index:oe,indexPrevious:ne,limit:q,location:ue,offsetLocation:ge,previousLocation:he,options:i,resizeHandler:Nn(e,r,a,n,E,T,j),scrollBody:je,scrollBounds:Pn(q,ge,ke,je,O),scrollLooper:zn(te,q,ge,[ue,ge,he,ke]),scrollProgress:Ct,scrollSnapList:P.map(Ct.get),scrollSnaps:P,scrollTarget:qe,scrollTo:Ue,slideLooper:qn(E,W,te,se,X,ae,P,ge,n),slideFocus:Bo,slidesHandler:Un(e,r,F),slidesInView:jo,slideIndexes:V,slideRegistry:It,slidesToScroll:R,target:ke,translate:mt(E,e)};return Ke}function Qn(){let t={},e;function n(c){e=c}function s(c){return t[c]||[]}function a(c){return s(c).forEach(b=>b(e,c)),l}function i(c,b){return t[c]=s(c).concat([b]),l}function r(c,b){return t[c]=s(c).filter(m=>m!==b),l}function d(){t={}}const l={init:n,emit:a,off:r,on:i,clear:d};return l}const Xn={align:"center",axis:"x",container:null,slides:null,containScroll:"trimSnaps",direction:"ltr",slidesToScroll:1,inViewThreshold:0,breakpoints:{},dragFree:!1,dragThreshold:10,loop:!1,skipSnaps:!1,duration:25,startIndex:0,active:!0,watchDrag:!0,watchResize:!0,watchSlides:!0,watchFocus:!0};function Rn(t){function e(i,r){return gt(i,r||{})}function n(i){const r=i.breakpoints||{},d=Ce(r).filter(l=>t.matchMedia(l).matches).map(l=>r[l]).reduce((l,c)=>e(l,c),{});return e(i,d)}function s(i){return i.map(r=>Ce(r.breakpoints||{})).reduce((r,d)=>r.concat(d),[]).map(t.matchMedia)}return{mergeOptions:e,optionsAtMedia:n,optionsMediaQueries:s}}function eo(t){let e=[];function n(i,r){return e=r.filter(({options:d})=>t.optionsAtMedia(d).active!==!1),e.forEach(d=>d.init(i,t)),r.reduce((d,l)=>Object.assign(d,{[l.name]:l}),{})}function s(){e=e.filter(i=>i.destroy())}return{init:n,destroy:s}}function Fe(t,e,n){const s=t.ownerDocument,a=s.defaultView,i=Rn(a),r=eo(i),d=De(),l=Qn(),{mergeOptions:c,optionsAtMedia:b,optionsMediaQueries:m}=i,{on:k,off:p,emit:f}=l,h=E;let v=!1,g,u=c(Xn,Fe.globalOptions),T=c(u),F=[],B,N,I;function j(){const{container:V,slides:w}=T;N=(He(V)?t.querySelector(V):V)||t.children[0];const G=He(w)?N.querySelectorAll(w):w;I=[].slice.call(G||N.children)}function M(V){const w=Jn(t,N,I,s,a,V,l);if(V.loop&&!w.slideLooper.canLoop()){const z=Object.assign({},V,{loop:!1});return M(z)}return w}function H(V,w){v||(u=c(u,V),T=b(u),F=w||F,j(),g=M(T),m([u,...F.map(({options:z})=>z)]).forEach(z=>d.add(z,"change",E)),T.active&&(g.translate.to(g.location.get()),g.animation.init(),g.slidesInView.init(),g.slideFocus.init(ne),g.eventHandler.init(ne),g.resizeHandler.init(ne),g.slidesHandler.init(ne),g.options.loop&&g.slideLooper.loop(),N.offsetParent&&I.length&&g.dragHandler.init(ne),B=r.init(ne,F)))}function E(V,w){const z=R();W(),H(c({startIndex:z},V),w),l.emit("reInit")}function W(){g.dragHandler.destroy(),g.eventStore.clear(),g.translate.clear(),g.slideLooper.clear(),g.resizeHandler.destroy(),g.slidesHandler.destroy(),g.slidesInView.destroy(),g.animation.destroy(),r.destroy(),d.clear()}function O(){v||(v=!0,d.clear(),W(),l.emit("destroy"),l.clear())}function _(V,w,z){!T.active||v||(g.scrollBody.useBaseFriction().useDuration(w===!0?0:T.duration),g.scrollTo.index(V,z||0))}function L(V){const w=g.index.add(1).get();_(w,V,-1)}function K(V){const w=g.index.add(-1).get();_(w,V,1)}function se(){return g.index.add(1).get()!==R()}function X(){return g.index.add(-1).get()!==R()}function Q(){return g.scrollSnapList}function ce(){return g.scrollProgress.get(g.offsetLocation.get())}function R(){return g.index.get()}function ae(){return g.indexPrevious.get()}function ee(){return g.slidesInView.get()}function te(){return g.slidesInView.get(!1)}function S(){return B}function A(){return g}function P(){return t}function q(){return N}function oe(){return I}const ne={canScrollNext:se,canScrollPrev:X,containerNode:q,internalEngine:A,destroy:O,off:p,on:k,emit:f,plugins:S,previousScrollSnap:ae,reInit:h,rootNode:P,scrollNext:L,scrollPrev:K,scrollProgress:ce,scrollSnapList:Q,scrollTo:_,selectedScrollSnap:R,slideNodes:oe,slidesInView:ee,slidesNotInView:te};return H(e,n),setTimeout(()=>l.emit("init"),0),ne}Fe.globalOptions=void 0;function $e(t={},e=[]){const n=C.useRef(t),s=C.useRef(e),[a,i]=C.useState(),[r,d]=C.useState(),l=C.useCallback(()=>{a&&a.reInit(n.current,s.current)},[a]);return C.useEffect(()=>{ze(n.current,t)||(n.current=t,l())},[t,l]),C.useEffect(()=>{Sn(s.current,e)||(s.current=e,l())},[e,l]),C.useEffect(()=>{if(xn()&&r){Fe.globalOptions=$e.globalOptions;const c=Fe(r,n.current,s.current);return i(c),()=>c.destroy()}else i(void 0)},[r,i]),[d,a]}$e.globalOptions=void 0;const J={carouselContainer:"_carouselContainer_1bu1s_1",viewport:"_viewport_1bu1s_11",slides:"_slides_1bu1s_17",slide:"_slide_1bu1s_17",slideInner:"_slideInner_1bu1s_37",loaderOverlay:"_loaderOverlay_1bu1s_45",image:"_image_1bu1s_55",loaded:"_loaded_1bu1s_66",empty:"_empty_1bu1s_78",controls:"_controls_1bu1s_84",arrows:"_arrows_1bu1s_94",dots:"_dots_1bu1s_104",dot:"_dot_1bu1s_104",dotActive:"_dotActive_1bu1s_130"},ft=D.Spinner,ht=({images:t,autoPlay:e=!1,autoDelay:n=5,showArrows:s=!0,showDots:a=!0,variant:i,slidesPerView:r=1,slideSpacing:d=16,cornerRadius:l=0,"data-color":c,"data-size":b})=>{const m={loop:!0,align:"start",containScroll:"trimSnaps",slidesToScroll:1},[k,p]=$e(m),[f,h]=C.useState(0),[v,g]=C.useState([]),[u,T]=C.useState([]);C.useEffect(()=>{T(new Array((t==null?void 0:t.length)||0).fill(!1))},[t]);const F=C.useCallback(O=>{T(_=>{const L=[..._];return L[O]=!0,L})},[]),B=C.useMemo(()=>n*1e3,[n]),N=C.useCallback(()=>{p&&h(p.selectedScrollSnap())},[p]),I=C.useCallback(O=>p&&p.scrollTo(O),[p]),j=C.useCallback(()=>p&&p.scrollPrev(),[p]),M=C.useCallback(()=>p&&p.scrollNext(),[p]);C.useEffect(()=>{if(p)return p.on("select",N),p.on("reInit",N),g(p.scrollSnapList()),()=>{p.off("select",N),p.off("reInit",N)}},[p,N]),C.useEffect(()=>{p&&(p.reInit(),g(p.scrollSnapList()))},[p,t,r,d]),C.useEffect(()=>{if(!e||!p||!t||t.length<=1)return;const O=window.setInterval(()=>{p.canScrollNext()&&p.scrollNext()},B);return()=>{window.clearInterval(O)}},[e,B,p,t]);const H=Math.max(1,r),E=`${100/H}%`,W=d/2;return o.jsxs("div",{className:J.carouselContainer,"data-color":c,"data-size":b,"data-variant":i,children:[o.jsx("div",{className:J.viewport,ref:k,children:o.jsx("div",{className:J.slides,style:{marginLeft:`-${W}px`,marginRight:`-${W}px`},children:t&&t.length>0?t.map((O,_)=>o.jsx("div",{className:J.slide,style:{flex:`0 0 ${E}`,paddingLeft:`${W}px`,paddingRight:`${W}px`,borderRadius:l>0?`${l}px`:void 0,overflow:"hidden"},children:o.jsxs("div",{className:J.slideInner,style:{borderRadius:`${l}px`,overflow:"hidden",position:"relative",width:"100%",height:"100%"},children:[!u[_]&&o.jsx("div",{className:J.loaderOverlay,children:o.jsx(ft,{"aria-label":"Laster bilde"})}),o.jsx("img",{className:`${J.image} ${u[_]?J.loaded:J.loadingImage}`,src:O.src,alt:O.alt,loading:_<H?"eager":"lazy",crossOrigin:"anonymous",onLoad:()=>F(_),onError:L=>{L.target.style.display="none",F(_)}})]})},`image-${_}-${O.src}`)):o.jsx("div",{className:J.slide,style:{flex:"0 0 100%"},children:o.jsx("div",{className:J.empty,children:"Ingen bilder"})})})}),(s||a&&t&&t.length>1)&&o.jsxs("div",{className:J.controls,"aria-hidden":"false",children:[s&&o.jsxs("div",{className:J.arrows,children:[o.jsx(pe,{variant:"primary",icon:!0,"aria-label":"Forrige bilde",onClick:j,disabled:!t||t.length<=1,children:o.jsx(le.ChevronLeftIcon,{"aria-hidden":!0})}),o.jsx(pe,{variant:"primary",icon:!0,"aria-label":"Neste bilde",onClick:M,disabled:!t||t.length<=1,children:o.jsx(le.ChevronRightIcon,{"aria-hidden":!0})})]}),a&&t&&t.length>1&&o.jsx("div",{className:J.dots,role:"tablist","aria-label":"Bildeposisjon",children:v.map((O,_)=>{const L=_===f;return o.jsx("button",{type:"button",className:`${J.dot} ${L?J.dotActive:""}`,onClick:()=>I(_),"aria-label":`Gå til bilde ${_+1}`,"aria-selected":L,role:"tab"},`dot-${_}`)})})]})]})};ht.displayName="Carousel";const to=D.Details,no=D.Dialog,oo=D.Divider,Y=D.Dropdown,ro=D.ErrorSummary,so=D.Field,kt=D.FieldDescription,vt=D.FieldCounter;kt.displayName="Field.Description",vt.displayName="Field.Counter";const io=D.Fieldset,bt=C.forwardRef((t,e)=>o.jsx(D.Heading,{ref:e,...t}));bt.displayName="Heading";const ao=D.Input,yt=C.forwardRef((t,e)=>o.jsx(D.Label,{ref:e,...t}));yt.displayName="Label";const Ae=D.Link,lo=D.List,co=D.Pagination,uo=D.usePagination,Ne=C.forwardRef((t,e)=>o.jsx(D.Paragraph,{ref:e,...t}));Ne.displayName="Paragraph";const go=D.Popover,po=D.Radio,mo=D.useRadioGroup,Le=Object.assign(D.Search,{Button:D.SearchButton,ClearButton:D.SearchClear,Input:D.SearchInput}),fo=D.Select,ho=D.Skeleton,ko=D.SkipLink,Tt=D.EXPERIMENTAL_Suggestion;Tt.displayName="Suggestion";const Me=D.Switch,vo=D.Table,bo=D.Tabs,yo=D.Tag,To=D.Textarea,xo=D.Textfield,So=D.ToggleGroup,wo=D.Tooltip,xt=C.forwardRef((t,e)=>o.jsx(D.ValidationMessage,{ref:e,...t}));xt.displayName="ValidationMessage";const Co={NO:{header:{darkMode:"Nattmodus",toggleTheme:"Bytt tema",language:"Språk:",search:"Søk",searchPlaceholder:"Søk etter innhold...",closeSearch:"Lukk søk",openSearch:"Åpne søk",clearSearch:"Tøm søk",close:"Lukk",menu:"Meny",closeMenu:"Lukk meny",openMenu:"Åpne meny",login:"Logg inn",supportUs:"Støtt oss",suggestions:"Forslag til søk",viewAll:"Vis alle resultater",noResults:"Ingen treff funnet for",selectLanguage:"Velg språk",homeAriaLabel:"Norges Røde Kors Hjem",nav:{design:"Design",components:"Komponenter",code:"Kode",tokens:"Tokens",work:"Vårt arbeid",volunteer:"Bli frivillig",courses:"Kurs og opplæring"}},home:{heroTitle:"Røde Kors Designsystem",heroLead:"Felles komponentbibliotek og retningslinjer for design og utvikling av digitale løsninger i Røde Kors.",searchComponents:"Søk i komponenter",exploreSystem:"Utforsk systemet",componentsDesc:"Bibliotek med ferdige React-komponenter.",designDesc:"Farger, typografi og prinsipper.",codeDesc:"Dokumentasjon, arbeidsflyt og MCP.",universalDesign:"Universell utforming",universalDesignText:"Innebygd tilgjengelighet som standard. Vi følger WCAG 2.1-kravene strengt.",readGuidelines:"Les retningslinjene",consistentBrand:"Konsistent merkevare",consistentBrandText:"Design tokens sikrer at Røde Kors sin visuelle profil ivaretas på alle flater.",seeColors:"Se farger",efficientDev:"Effektiv utvikling",efficientDevText:"Spar tid med ferdige komponenter. Fokuser på funksjonalitet, ikke CSS.",exploreComponents:"Utforsk komponenter",quickActionsTitle:"Hopp rett inn",quickActionCodeTitle:"Start i kode",quickActionCodeText:"Se oppsett, tokens og eksempler.",quickActionDesignTitle:"Designguiden",quickActionDesignText:"Farger, typografi og prinsipper.",quickActionComponentsTitle:"Komponentbibliotek",quickActionComponentsText:"Utforsk og gjenbruk ferdige komponenter.",openCode:"Åpne kode",openDesign:"Åpne design",openComponents:"Åpne komponenter",featureStripTitle:"Nyttig akkurat nå",featureToken:"Oppdaterte designtokens",featureFont:"Source Sans 3 inkludert",featureComponent:"Nye komponentvarianter",featureSeeAll:"Se alle oppdateringer",profile:"Profil",name:"Navn Navnesen",volunteer:"Frivillig",save:"Lagre",approved:"Godkjent",rejected:"Avvist",darkModeLabel:"Mørk modus",importantMessage:"Viktig melding",updateGuidelines:"Husk å oppdatere retningslinjene...",all:"Alle",active:"Aktive",alerts:"Varsler",status:"Status"},components:{title:"Komponenter",intro:"Designsystemet inneholder grunnleggende komponenter som kan settes sammen på mange ulike måter og i forskjellige mønstre.",searchPlaceholder:"Søk etter komponent...",searchAriaLabel:"Søk i komponenter",noResults:"Ingen komponenter funnet for"},code:{sidebar:{overview:"Oversikt",workflow:"Arbeidsflyt",structure:"Struktur",contribute:"Bidra",home:"Startside",getStarted:"Kom i gang",designTokens:"Designtokens",fonts:"Fonter",icons:"Bruk av ikoner",figmaMcp:"Fra Figma til Kode (MCP)",componentCreation:"Komponent Kreasjon",metadataFiles:"Metadata filer",developerGuide:"Utviklerguide"},overview:{title:"Røde Kors Designsystem",intro:"Velkommen til Røde Kors Designsystem! Dette repositoriet inneholder et bibliotek med gjenbrukbare UI-komponenter bygget med React, skreddersydd for Norges Røde Kors sine digitale prosjekter.",text1:"Det er utviklet ved å utnytte grunnkomponentene fra Digdirs Designsystemet. Denne tilnærmingen sikrer en helhetlig og gjenkjennelig visuell identitet på tvers av alle applikasjoner for Røde Kors. Systemet er forhåndskonfigurert med det offisielle Røde Kors-temaet, som leveres via en dedikert designtoken-pakke.",text2:"Hovedmålet er å sikre merkevarekonsistens, forbedre utviklingseffektiviteten og opprettholde høye standarder for tilgjengelighet i alle Røde Kors-applikasjoner.",text3:"Storybook fungerer som den interaktive dokumentasjonen og utviklingsmiljøet for å vise og teste disse komponentene.",getStartedCard:"Kom i gang",getStartedDesc:"Installasjon, oppsett og retningslinjer for utviklere.",getStartedLink:"Kom i gang",designTokensCard:"Designtokens",designTokensDesc:"Lær hvordan du bruker designtokens og fonter.",designTokensLink:"Les mer",workflowCard:"Arbeidsflyt",workflowDesc:"Lær hvordan du bruker MCP-verktøy for å hente komponenter direkte fra Figma.",workflowLink:"Les guide"},getStarted:{title:"Kom i gang",intro:"For å ta i bruk Røde Kors Designsystem i din Next.js (eller annen React) applikasjon:",installationTitle:"1. Installasjon",installationText:"Installer de nødvendige npm-pakkene for prosjektet ditt. Du trenger tre pakker: selve komponentbiblioteket (rk-designsystem), grunnstilene fra Digdir, og Røde Kors-temapakken (rk-design-tokens).",githubLink:"Gå til GitHub Repository",npmTitle:"npm",yarnTitle:"yarn",pnpmTitle:"pnpm",note:"Merk: Du trenger ikke å installere @digdir/designsystemet-react separat, da alle nødvendige komponenter er inkludert i rk-designsystem-pakken.",stylesTitle:"2. Inkludering av stiler (CSS)",stylesText1:"For at komponentene skal styles riktig, må du importere stilarkene på øverste nivå i applikasjonen din, for eksempel i layout.tsx (for Next.js App Router) eller _app.tsx (for Next.js Pages Router).",stylesText2:"Viktig rekkefølge: Det er avgjørende at grunnstilarket (@digdir/designsystemet-css) lastes før Røde Kors-temafilen (rk-design-tokens). Dette sikrer at vårt temas tokens overstyrer standardverdiene korrekt.",appRouterExample:"Eksempel for Next.js (App Router - src/app/layout.tsx):",pagesRouterExample:"Eksempel for Next.js (Pages Router - pages/_app.tsx):",usageTitle:"3. Bruk av komponenter",usageText:"Når stilarkene er inkludert, kan du begynne å importere og bruke komponenter i prosjektet ditt. Alle komponenter du trenger er tilgjengelige direkte fra rk-designsystem-pakken.",importTitle:"3.1 Importer og bruk Røde Kors Designsystem-komponenter",nextjsExample:"3.2 Eksempel på bruk i en Next.js-side",updateText:"Utseendet til alle komponenter styres fullt ut av pakken rk-design-tokens. For å motta visuelle oppdateringer til merkevaretemaet (som en ny primærfarge), oppdaterer du ganske enkelt pakken til siste versjon:"},designTokens:{title:"Røde Kors Designtokens",intro:"Dette repositoriet er den sentrale kilden for alle designtokens (farger, typografi, avstander osv.) for Norges Røde Kors sine digitale produkter. Det fungerer som en sannhetskilde (single source of truth) som automatisk distribuerer stilendringer til alle tilkoblede prosjekter.",howToTitle:"Hvordan ta i bruk tokens",howToText:"For å bruke designtokens i ditt prosjekt, må du installere og konfigurere temapakken.",installTitle:"1. Installasjon",importTitle:"2. Importer CSS",importText:"I din applikasjons rot-layout (f.eks. layout.tsx), importer grunnstilarket før Røde Kors-temafilen.",fontTitle:"Hvordan legge til fonten",workflowTitle:"Automatisert arbeidsflyt for Designtokens (End-to-End)",workflowText:"Denne arbeidsflyten etablerer en helautomatisert pipeline som kobler designprosessen vår direkte til live produksjonsapplikasjoner. Når en designer oppdaterer stilen i Figma, bygger, versjonerer og publiserer dette systemet automatisk en ny stilpakke til npm. Deretter varsles Vercel-prosjektene våre, som oppdaterer seg selv og redeployer med de nye stilene.",phase1Title:"Fase 1: En Designer gjør en endring (Publisist)",phase1Item1:"Design i Figma: En designer gjør en endring på en farge, font eller annen designtoken.",phase1Item2:"Push til GitHub: Ved bruk av Token Studio-pluginet pusher designeren endringene. Dette committer automatisk de oppdaterte JSON-filene til main-branchen.",phase1Item3:"Trigge Publisher Workflow: Denne pushen trigger umiddelbart GitHub Action definert i .github/workflows/publish.yml.",phase1Item4:"Bygg & Commit Artefakter: Workflowen kjører npm run build for å generere CSS fra JSON-filene og committer resultatene.",phase1Item5:"Versjonering & Release: Workflowen kjører npm version patch for å øke versjonsnummeret, lage en release-commit, og tagge den.",phase1Item6:"Publiser til npm: Til slutt publiserer workflowen den nye versjonen av pakken til npm-registeret.",phase2Title:"Fase 2: Varsling av applikasjoner (Signalet)",phase2Text:"Send et Dispatch-signal: Etter en vellykket publisering, sender workflowen et repository_dispatch-signal til konsumentprosjekter som rk-designsystem for å varsle om den nye versjonen.",phase3Title:"Fase 3: Automatisk oppdatering og redeploy (Konsumentene)",phase3Item1:'Trigge Consumer Workflow: Dispatch-signalet starter en "Update"-workflow i konsumentprosjektene.',phase3Item2:"Oppdater Avhengigheter: Workflowen kjører npm update rk-design-tokens for å hente den siste versjonen.",phase3Item3:"Commit & Push Oppdateringen: Workflowen committer den oppdaterte package-lock.json-filen.",phase3Item4:"Vercel Auto-Deploys: Vercels Git-integrasjon oppdager den nye commiten og starter automatisk en ny deployment."},fonts:{title:"Fonter",intro:"Røde Kors Designsystem bruker fonten Source Sans 3. For at typografien skal vises korrekt i applikasjonen din, må denne fonten lastes inn.",howToTitle:"Hvordan legge til fonten",howToText:"Du kan inkludere fonten ved å legge til følgende linjer i <head>-elementet i din HTML eller i rot-layouten din:",afterLoadTitle:"Etter lasting",afterLoadText:"Når fonten er lastet, vil CSS-variablene fra rk-design-tokens automatisk ta den i bruk (--ds-font-family).",nextjsTitle:"Eksempel for Next.js",nextjsText:"For Next.js App Router, legg til fonten i layout.tsx:",nextjsPagesText:"For Next.js Pages Router, legg til fonten i _app.tsx eller _document.tsx:",cssVariablesTitle:"CSS-variabler",cssVariablesText:"Etter at fonten er lastet, bruker designsystemet automatisk CSS-variabelen --ds-font-family som er definert i rk-design-tokens pakken. Du trenger ikke å spesifisere fonten manuelt i komponentene dine."},icons:{title:"Bruk av Ikoner",intro:"Dette biblioteket er designet for å fungere sømløst med det offisielle ikonsettet fra NAV/Aksel.",installTitle:"Installasjon",importTitle:"Import og bruk",importText:"Ikoner eksporteres som navngitte React-komponenter. Importer kun de ikonene du trenger (tree‑shakable):",accessibilityTitle:"Tilgjengelighetsguide",accessibilityItem1:"Ikon + synlig tekst: sett aria-hidden på ikonet slik at skjermlesere ikke leser det opp to ganger.",accessibilityItem2:"Ikon-kun triggere (f.eks. en knapp): legg til en beskrivende aria-label på triggeren, behold ikonet aria-hidden.",accessibilityItem3:"Farge: ikoner arver currentColor; bruk komponentens variant/farge for å styre det (f.eks. knappevarianter, tag-farger).",accessibilityItem4:`Størrelse: sett fontSize (f.eks. fontSize="1.25rem") eller inline style (f.eks. style="{ fontSize: '1.25rem' }").`,performanceTitle:"Ytelse",performanceText:"Bruk navngitte importer fra @navikt/aksel-icons for å holde pakkestørrelsen nede – ubrukte ikoner fjernes (tree-shaken) av moderne bundlere."},contributing:{title:"Bidra til Biblioteket",intro:"Denne guiden gir et sett med standarder og beste praksis for å lage nye komponenter. Å følge disse retningslinjene sikrer at komponentbiblioteket vårt forblir konsistent, tilgjengelig og enkelt å vedlikeholde.",getStartedTitle:"Kom i gang (for bidragsytere)",getStartedText:"Følg disse stegene for å kjøre det lokale utviklingsmiljøet. Alle kommandoer skal kjøres fra roten av prosjektet.",principlesTitle:"Kjerneprinsipper",principlesText:"Hver komponent vi bygger bør følge disse kjerneprinsippene:",principlesA11y:"Tilgjengelighet (A11y): Komponenter må kunne brukes av alle, inkludert personer med nedsatt funksjonsevne. Dette betyr korrekte ARIA-attributter, tastaturnavigasjon og semantisk HTML.",principlesReuse:"Gjenbrukbarhet: Komponenter bør være generiske nok til å brukes i flere kontekster uten modifikasjon.",principlesConsistency:"Konsistens: Komponenter skal følge våre etablerte designtokens (farger, avstander, typografi) og ha et konsistent API og struktur.",principlesDocs:"Dokumentasjon: Hver komponent må dokumenteres i Storybook for å gjøre den oppdagbar og enkel å bruke for andre utviklere.",whenTitle:"Når skal man lage en ny komponent",whenText:"Før du begynner å kode, avgjør hvilken type komponent du trenger. De fleste av våre behov faller inn i en av tre kategorier:",wrappedSimpleTitle:"Wrapped Component (Enkel):",wrappedSimpleWhat:"Hva det er: En komponent som direkte wrapper og re-eksporterer en komponent fra @digdir/designsystemet-react uten modifikasjoner.",wrappedSimpleWhen:"Når den skal brukes: Når den grunnleggende Digdir-komponenten dekker behovene våre perfekt, men vi ønsker å inkludere den i vårt eget bibliotek for en konsistent importkilde.",wrappedSimpleExample:"Eksempel: Buttons-komponenten er et perfekt eksempel på dette.",wrappedStyledTitle:"Wrapped Component (med stiloverstyringer):",wrappedStyledWhat:"Hva det er: En wrappet Digdir-komponent hvor vi bruker tilpasset CSS for å justere utseendet slik at det passer bedre til Røde Kors sitt spesifikke designspråk.",wrappedStyledWhen:"Når den skal brukes: Når en Digdir-komponent er funksjonelt korrekt, men trenger visuelle justeringer (f.eks. andre ikoner, border-radius, padding).",wrappedStyledExample:"Eksempel: Alert-komponenten, som bruker composes i CSS for å arve grunnstiler og deretter påføre egne overstyringer.",customTitle:"Custom Component (fra bunnen):",customWhat:"Hva det er: En helt ny komponent bygget når ingen eksisterende Digdir-komponent dekker kravene våre.",customWhen:"Når den skal brukes: For unike UI-mønstre eller funksjonalitet som ikke dekkes av grunnbiblioteket.",customExample:"Eksempel: DateInput-komponenten er en tilpasset komponent med egen tilstand, logikk og styling.",fileStructureTitle:"Filstruktur for komponenter",fileStructureText:"For å opprettholde konsistens, bør hver ny komponent følge denne filstrukturen. Lag en ny mappe under src/components/ med komponentens PascalCase-navn.",codingGuidelinesTitle:"Retningslinjer for koding",componentLogicTitle:"1. Komponentlogikk (MyNewComponent.tsx)",logicTypeScript:"TypeScript først: Alle komponenter må skrives i TypeScript. Definer et Props-interface for komponenten din, som utvider fra grunnleggende HTML-element eller Digdir-komponentprops hvis aktuelt.",logicForwardRef:"Forward Refs: Bruk alltid React.forwardRef for å tillate foreldrekomponenter å få en ref til det underliggende DOM-elementet.",logicA11y:"Tilgjengelighet er obligatorisk:",logicA11yItem1:"Bruk semantisk HTML (<button>, <label>, <nav>).",logicA11yItem2:"Sørg for at alle interaktive elementer kan fokuseres og betjenes med tastatur.",logicA11yItem3:"Gi aria-label for knapper som kun har ikon eller elementer hvor tekstetiketten ikke er synlig.",logicA11yItem4:"Bruk aria-invalid, aria-describedby, osv., for å kommunisere tilstand til hjelpemidler.",logicControlled:"Controlled vs. Uncontrolled: Hvis komponenten din har tilstand (som en input), bør den støtte både kontrollerte (value + onChange) og ukontrollerte (defaultValue) mønstre.",logicProps:"Props-navngiving: Bruk data-* attributter for stylingvarianter (f.eks. data-size, data-color) for å samkjøre med mønstrene i våre eksisterende komponenter.",stylingTitle:"2. Styling (styles.module.css)",stylingModules:"CSS Modules: For tilpassede komponenter må alle stiler plasseres i en styles.module.css-fil. Dette scoper klassenavn lokalt og forhindrer globale stilkonflikter.",stylingTokens:"Designtokens: Bruk alltid våre designtokens (var(--ds-...)) for farger, avstander, fonter, osv. Ikke bruk hardkodede verdier (f.eks. #FFF, 16px).",stylingOverride:"Overstyring av Wrapped Components: For wrapped components, bruk en standard CSS-fil. Bruk @layer og composes nøkkelord for å utvide grunnleggende Digdir-stiler uten å øke CSS-spesifisiteten unødvendig.",documentationTitle:"3. Dokumentasjon (MyNewComponent.stories.tsx)",docsStorybook:"Din Storybook-fil er den offisielle dokumentasjonen. Den må være tydelig og omfattende.",docsMeta:"meta Object: Definer komponentens tittel, komponentreferanse, og tags: ['autodocs'] for å aktivere automatisk dokumentasjon.",docsArgTypes:"argTypes: Dokumenter hver enkelt prop. Gi en beskrivelse, kontrolltype (f.eks. select, boolean, text), og alternativer hvis aktuelt. Dette driver de interaktive kontrollene i Storybook.",docsStories:"Lag flere Stories: Lag en egen story for hver nøkkeltilstand og variant av komponenten din (f.eks. Default, Disabled, WithError, WithIcon).",processTitle:"Bidragsprosess",processPRTitle:"Opprett en Pull Request (PR):",processBranch:"Opprett en Branch: Pull de siste endringene fra main-branchen og opprett en ny feature-branch: git checkout -b feat/min-nye-komponent.",processDraft:"Åpne en Draft PR: Så snart du starter, åpne en draft pull request på GitHub. Dette forhindrer dobbeltarbeid og lar andre se hva du jobber med.",processCommit:"Commit endringene dine: Mens du jobber, lag små, logiske commits.",processReview:'Klar for gjennomgang: Når utviklingen er ferdig og alle automatiserte sjekker passerer, merk PR-en som "Ready for review" og be om en gjennomgang fra designsystem-forvalterne.'},figmaMcp:{title:"Arbeidsflyt: Fra Figma til Kode med MCP",intro:"Denne guiden beskriver hvordan vi bruker Model Context Protocol (MCP) for å koble Figma direkte til utviklingsmiljøet. Dette gjør det mulig å hente designspesifikasjoner, tokens og strukturer automatisk, validert mot vårt designsystem.",part1Title:"Del 1: Oppsett av Figma MCP Server",part1Intro:"Dette gjøres kun én gang for å aktivere integrasjonen i Cursor/Windsurf.",part1Description:'For at AI-en skal kunne "lese" Figma-filene, må vi sette opp en lokal kobling.',setupStep1Title:"1. Hent Figma Access Token",setupStep1Item1:"Gå til Figma -> Settings -> Personal Access Tokens.",setupStep1Item2:"Klikk Generate new token.",setupStep1Item3:'Navn: F.eks. "Cursor MCP".',setupStep1Item4:"Scopes: Velg File content: Read og File metadata: Read.",setupStep1Item5:"Kopier tokenet (du får ikke se det igjen).",setupStep2Title:"2. Konfigurer i Cursor",setupStep2Item1:"Åpne innstillinger i Cursor (Ctrl/Cmd + ,).",setupStep2Item2:"Gå til Features -> MCP.",setupStep2Item3:"Klikk + Add New MCP Server.",setupStep2Item4:"Fyll inn følgende:",setupStep2Item5:"Type: command",setupStep2Item6:"Name: figma",setupStep2Item7:"Command: npx -y @modelcontextprotocol/server-figma",setupStep2Item8:"Legg til Environment Variable (viktig!):",setupStep2Item9:"Key: FIGMA_ACCESS_TOKEN",setupStep2Item10:"Value: [Lim inn tokenet du kopierte i steg 1]",setupStep2Item11:'Når lyset ved siden av "figma" blir grønt, er verktøyet klart til bruk.',part2Title:"Del 2: Daglig Arbeidsflyt",step0Title:"Steg 0: Indeksering av Dokumentasjon",step0Description:"Gjør dette én gang per prosjekt for å gi AI-en full oversikt over designsystemet.",step0Intro:"For at Cursor skal forstå våre spesifikke tokens, komponentnavn og retningslinjer, må vi la den lese gjennom dokumentasjonen på forhånd.",step0Item1:"Åpne Chat i Cursor (Cmd + L / Ctrl + L).",step0Item2:'Skriv @Docs i tekstfeltet og velg "Add new doc" fra menyen som dukker opp.',step0Item3:"Lim inn URL-en til hovedsiden for dokumentasjonen: https://norwegianredcross.github.io/DesignSystem/",step0Item4:"Gi den et navn som er lett å huske, f.eks. RødeKors.",step0Item5:"Trykk Confirm.",step0WhatHappensTitle:"Hva skjer nå?",step0WhatHappensText:'Cursor vil automatisk "crawle" (lese) gjennom hovedsiden og alle undersider. Den lagrer informasjonen i en lokal database. Dette gjør at du senere kan referere til @RødeKors i chatten, og AI-en vil umiddelbart vite alle fargekoder, spacing-variabler og komponent-regler uten at du trenger å lime inn tekst manuelt. NB: Dette gjelder når du refererer til @RødeKors i chatten. Hvis du bruker .cursorrules, trenger du ikke å legge ved @RødeKors manuelt.',step1Title:"Steg 1: Hent presis lenke i Figma",step1Description:"For best resultat bør du isolere seksjonen du jobber med.",step1Item1:"Marker rammen (Frame), komponenten eller gruppen du vil implementere.",step1Item2:"Høyreklikk og velg Copy link to selection (Snarvei: Ctrl + L).",step1Item3:"NB: Bruk denne funksjonen fremfor å kopiere URL-en fra nettleseren.",step1ImageCaption:"",step2Title:"Steg 2: Gi kontekst (To metoder)",step2Description:"For at AI-en skal følge designsystemet vårt, må den vite hvor reglene finnes. Du kan velge mellom manuell eller automatisert metode.",step2AltATitle:"Alternativ A: Manuell kontekst (Raskt og enkelt)",step2AltADescription:"Bruk dette for engangstilfeller eller hvis du tester nye dokumentasjonskilder. Dette må gjøres manuelt med hver eneste prompt.",step2AltAItem1:"I Composer (Chat): Skriv @ og lim inn URL-ene til dokumentasjonen. Du må inkludere:",step2AltAItem1Sub1:"@https://norwegianredcross.github.io/design-tokens/theme.css",step2AltAItem1Sub2:"@https://norwegianredcross.github.io/DesignSystem/storybook/metadata.json",step2AltAItem2:"Lim inn Figma-lenken: Lim inn lenken fra steg 1.",step2AltAImageCaption:"",step2AltBTitle:"Alternativ B: Automatisert med .cursorrules (Anbefalt)",step2AltBDescription:"Bruk dette for å slippe å legge ved dokumentasjon hver gang. Med en .cursorrules-fil i roten av prosjektet, vet AI-en alltid hvilke regler som gjelder.",step2AltBSetupTitle:"1. Oppsett (Gjøres én gang per prosjekt):",step2AltBSetupText:"Opprett en fil som heter .cursorrules i prosjektets rotmappe og gi kontekst ved å lime inn dette:",step2AltBCodeBlock:`You are an expert Frontend Developer implementing designs from Figma.
+
+ALWAYS follow these rules:
+1. **Documentation:** Refer to the indexed design system documentation (@RødeKors) for component usage, patterns, and guidelines.
+2. **Metadata:** Use component metadata from: https://norwegianredcross.github.io/DesignSystem/storybook/metadata.json
+3. **Tokens:** Always use CSS variables/tokens defined in: https://norwegianredcross.github.io/design-tokens/theme.css (e.g., var(--spacing-md)).
+4. **Figma MCP:** When a Figma link is provided, use the \`figma\` tool to inspect node properties.
+
+Note: Make sure you have indexed the documentation (Step 0) before using these rules. Reference @RødeKors in chat when you need design system context.`,step2AltBUsageTitle:"2. I daglig bruk:",step2AltBUsageText:"Nå trenger du kun å lime inn Figma-lenken i chatten. AI-en vil automatisk sjekke .cursorrules og forstå at den skal hente designreglene fra dokumentasjonen du definerte.",step3Title:"Steg 3: Prompt",step3Description:"Gi en instruks som kobler designet mot kodebasen. Bruk gjerne denne malen:",step3Prompt:`"Using the design at this Figma link and the context from the provided documentation/rules:
+
+Create a React component for this section.
+
+Strictly use tokens found in the documentation (colors, spacing) - no magic numbers.
+
+Map design elements to our existing components where possible (e.g. Buttons, Headings)."`,step4Title:"Steg 4: Generering og Review",step4Item1:"AI-en bruker nå MCP til å lese nodedataene og genererer et kodeforslag.",step4ReviewTitle:"Review:",step4ReviewItem1:'Sjekk "Diff View" i Cursor.',step4ReviewItem2:"Er tokens brukt riktig? (f.eks. var(--spacing-md)).",step4ReviewItem3:"Er semantikken god?",step4Apply:'Apply: Trykk "Apply" for å legge koden inn i filen din.',proTipsTitle:"Tips for suksess",proTip1:'Lagre Docs som favoritter: I Cursor under "Docs"-fanen kan du indekserere norwegianredcross.github.io/.... Da kan du bruke @RødeKors som en snarvei i chatten hvis du ikke bruker .cursorrules.',proTip2:'Missing Auto Layout? Hvis Figma-noden mangler Auto Layout, kan AI-en slite med posisjonering. Nevn gjerne i prompten: "Infer layout logic based on visual proximity if Auto Layout is missing."'},metadataFiles:{title:"Metadata-filer",intro:"For å holde oversikt over komponentene og deres kobling til Figma, bruker vi metadata-filer.",whatTitle:"Hva inneholder de?",whatText:"Metadata-filene (som `metadata.json`) er ryggraden i dokumentasjonen vår. De definerer nøyaktig hvilke props hver komponent støtter, datatyper, standardverdier og beskrivelser. Dette gjør at vi kan generere dokumentasjon automatisk og sikre konsistens mellom design og kode.",whatItem1:'componentName: Navnet på komponenten (f.eks. "Button").',whatItem2:'importPath: Hvor komponenten importeres fra (f.eks. "rk-designsystem").',whatItem3:"props: En liste over alle tilgjengelige props, inkludert:",whatItem3Sub1:'name: Navnet på proppen (f.eks. "variant", "disabled").',whatItem3Sub2:'type: Datatypen (f.eks. "boolean", "enum", "string").',whatItem3Sub3:"description: Forklaring av hva proppen gjør.",whatItem3Sub4:"defaultValue: Standardverdien hvis proppen ikke settes.",whatItem3Sub5:"required: Om proppen er påkrevd eller valgfri.",howTitle:"Hvordan bruke dem?",howText:"Når du oppretter en ny komponent, bør du også oppdatere metadata-filen slik at automatiske verktøy og dokumentasjonssider (som denne) kan finne og vise riktig informasjon."},componentCreation:{title:"Komponent Kreasjon med MCP og Design Tokens",intro:"Vi bruker Model Context Protocol (MCP) og AI-assistanse for å oversette Figma-design direkte til produksjonsklare React-komponenter. Denne flyten sikrer at nye komponenter følger designsystemet, bruker CSS Modules, og gjenbruker eksisterende kode.",processTitle:"Prosess",processText:'Når du sender en prompt (f.eks. "make a version where you can have 4 cards below [url]"), håndterer Figma MCP følgende steg automatisk i bakgrunnen:',step1Title:"1. Identifisering og Metadata",step1Item1:'Identifiser kilden: MCP leser URL-en og finner Node-ID for komponenten i Figma (f.eks. 1:3539 for "Hero 3").',step1Item2:"Hent dimensjoner: MCP henter automatisk informasjon om nodens størrelse, struktur og posisjonering for å sette rammeverket for layouten.",step2Title:"2. Henting av Design Context og Kodeutkast",step2Item1:"Generer utkast: MCP analyserer Figma-noden og genererer et førsteutkast til React-kode.",step2Item2:"Automatisk gjenkjenning: Verktøyet identifiserer om designet inneholder elementer som allerede finnes i biblioteket vårt.",step2Item3:'Eksempel: Hvis Figma-noden inneholder en knapp, vil MCP foreslå `import Button from "src/components/Button.tsx"` i stedet for å generere ny HTML for knappen.',step2Item4:"Rensing: Systemet filtrerer bort unødvendige wrappers og absolutte stier før koden presenteres.",step3Title:"3. Token-Mapping og Variabel-definisjoner",step3Item1:"Analyser tokens: MCP analyserer automatisk hvilke design-tokens som er brukt i Figma-filen (via `get_variable_defs` logikk i bakgrunnen).",step3Item2:"Mapping til CSS: Den oversetter Figma-verdier til våre definerte CSS-variabler.",step3Item3:'Figma: "color/main/base-default": "#d52b1e"',step3Item4:"CSS: Mappes til `var(--ds-color-primary-color-red-base-default)` (eller tilsvarende fra theme.css).",step3Item5:"Typografi: Font-definisjoner oversettes automatisk til korrekte typografi-klasser.",step4Title:"4. Automatisk Kobling mot Eksisterende Komponenter",step4Item1:"Verifisering: Figma MCP sjekker designet opp mot metadata.json og repositoryet vårt (via `get_code_connect_map` logikk i bakgrunnen).",step4Item2:"Implementasjon: Dette sikrer at koden som genereres automatisk tar i bruk rk-designsystem sine komponenter der det er mulig.",step4Item3:"Eksempel: Den ser at et element i Figma tilsvarer `src/components/Button.tsx` og genererer koden med korrekt komponent-import.",step5Title:"5. Struktur og Ferdigstilling",step5Text:"Resultat: Basert på analysen over, produserer AI-en de ferdige filene du trenger:",step5Item1:"`index.ts` (Eksport)",step5Item2:"`[KomponentNavn].tsx` (Logikk, prop-definisjoner fra metadata.json)",step5Item3:"`[KomponentNavn].module.css` (Styling basert på tokens)",step5Item4:"`[KomponentNavn].stories.tsx` (Dokumentasjon og varianter)",step5Variant:'Variant-håndtering: Logikk for varianter (f.eks. "stacked" vs "side-by-side") implementeres basert på din prompt og Figma-layouten.',automationTitle:"Automatisering vs. Manuell Kvalitetssikring",automationText1:"Selv om MCP-verktøyene automatiserer mye av kodingen ved å hente strukturer og tokens direkte fra Figma, er det ikke en 100% sømløs overføring. Den genererte koden fungerer som et solid fundament, men en utvikler må alltid se over, kvalitetssikre og tilpasse logikken.",automationText2:"Verktøyene fjerner det repetitive manuelle arbeidet med oppsett og styling, slik at utvikleren kan fokusere på funksjonalitet, tilgjengelighet og edge-cases. Det er en effektiviseringsprosess, ikke en erstatning for utviklerkompetanse.",benefitsTitle:"Fordeler med denne flyten",benefit1:'Presisjon: Automatisk uthenting av variabler forhindrer "magiske tall" og hardkodede hex-koder.',benefit2:"Gjenbruk: Automatisk sjekk mot eksisterende komponenter hindrer duplisering av kode.",benefit3:"Effektivitet: Du trenger kun å gi en URL og en intensjon; MCP håndterer de tekniske oppslagene.",benefit4:"Vedlikehold: Koblingen mot `theme.css` og `metadata.json` gjør at komponentene tåler oppdateringer i designsystemet."}},design:{sidebar:{forDesigners:"For Designere",getStarted:"Kom i gang",colors:"Farger",contribute:"Bidra med design",designElements:"Designelementer",designTokens:"Design Tokens",shadows:"Skygger",sizes:"Størrelse og avstander",typography:"Typografi",figmaConnect:"Figma tilkobling",startup:"Oppstart",newComponent:"Lage ett nytt komponent",examples:"Praktiske eksempler",tokenStudio:"Token Studio",colorSystem:"Sette opp ditt eget fargesystem",themeBuilder:"Designsystemets temagenerator",useColors:"Bruk fargene du har generert",proposeDesign:"Foreslå nytt design eller forbedringer",whatAreTokens:"Hva er design tokens",tokensInFigma:"Design tokens i Figma",colorStructure:"Navnestruktur",colorOverview:"Oversikt og forklaringer av farger",colorTokens:"Farge-tokens",shadowUsage:"Bruk av skygger i designet",shadowTokens:"Skygge-tokens",componentSizes:"Komponentstørrelser",sizeTokens:"Størrelse-tokens",fontFamily:"Font-family",typoTokens:"Typografi-tokens"},intro:{title:"Design i Røde Kors",welcome:"Velkommen til designdokumentasjonen.",getStarted:"Kom i gang",goToGuide:"Gå til guide",colors:"Farger",seeColors:"Se farger"},tokens:{whatIsTitle:"Hva er design tokens",whatIsText1:'"Design Tokens" styrer hvordan komponentene skal se ut i forhold til farger, typografi, størrelser, avstander, former osv. Design tokens sørger vi for at både designere og utviklere arbeider etter de samme reglene og retningslinjene.',whatIsText2:"Noen av variablene er lagt opp til å være tema-baserte, det vil si at de tar utgangspunkt i din merkevare med de fargene og preferansene du selv velger. Vi jobber med en tema-bygger som skal gjøre det enklere for deg å tilpasse stilene.",whatIsText3:"Design Tokens er fleksible variabler som kan benyttes uavhengig av teknologi eller designverktøy.",figmaTitle:"Design tokens i Figma",figmaText1:'Vi bruker Figma-pluginen "Tokens Studio", da denne lar oss administrere flere stiler og egenskaper enn Figma i seg selv kan.',figmaText2:"Pluginen har som mål å være W3C-kompatibel og retter seg etter standarden som etableres av W3C Design Tokens Community Group. Tokens-verdiene er dermed ikke låst til et verktøy - JSON-filen kan flyttes til andre verktøy dersom det skulle bli aktuelt.",themesTitle:"Flere sett og themes",themesText:"Bruk av variabler og tokens gjør det mulig å ha ett designsystem med ulike identiteter. Vi kan lage en komponent i Figma kun èn gang og style den mange ganger - Med et klikk kan vi slå på et annet theme som for eksempel aktiverer en annen fargepalett eller et annet sett med størrelser. Ved å dele tokens inn i både sets og themes, kan vi tilby avanserte former for gjenbruk.",themesCaption:'Videoen over viser at når settet for "Tilsynet" slås på, overstyres både fargene som er i bruk i filen og stilene som er tilgjengelig i høyremargen byttes ut.'},colorStructure:{title:"Navnestruktur",intro:"Fargesystemet består av globale farger som refererer til hva fargen er (eks. red-1) og et semantisk nivå som beskriver hva fargen skal brukes til (eks. Text.Danger).",structureTitle:"Navnestruktur",structureText1:"Fargene i Designsystemet er strukturert med en semantisk betydning. Dette betyr at de er definert etter funksjon og bruk, ikke bare etter hvordan de ser ut. Det gjør det lettere å velge riktig farge fordi du slipper å vurdere selve fargetonen og kan fokusere på hva fargen skal formidle i stedet.",structureText2:"Fargenavnene i Designsystemet er delt opp i 3 ledd: Navn på fargeskala, gruppe (bruksområde) og variant. Disse leddene beskriver hvordan fargene er bygget opp og hvordan de skal brukes.",structureCaption:"Viser oppdelingen av fargenavn i 3 ledd",nameLabel:"Navn:",nameText:"Det første leddet og navnet på fargeskalaen. Som standard kommer Designsystemet med fargeskalaene Success, Danger, Warning, Info og Neutral. Flere skalaer kan legges til ved hjelp av Temabyggeren.",groupLabel:"Gruppe:",groupText:"Hver fargeskala er delt inn i gruppene Background, Surface, Border, Text og Base. Disse gruppene beskriver bruksområdene til fargene. Text-gruppen skal for eksempel brukes på tekst og ikoner.",groupsCaption:"Viser en fargeskala og de 5 gruppene som fargene er delt inn i.",variantLabel:"Variant:",variantText:"Inne i hver gruppe finnes det varianter som beskriver hvordan fargene ser ut eller skal brukes. Tinted betyr for eksempel at fargen har et hint av farge i seg, mens Hover betyr at fargen er tenkt brukt for en interaktiv tilstand."},colorOverview:{title:"Oversikt og forklaring av farger",intro:"Hver fargeskala består av totalt 16 farger, utformet for å dekke ulike behov i designet. Nedenfor finner du en oversikt over de forskjellige fargene og deres tiltenkte bruksområder.",semanticCaption:"Viser hvordan de semantiske fargene kan brukes i designet. Eksempelet bruker fire forskjellige fargeskalaer: Danger, Neutral og to blåskalaer",tableName:"Navn",tableUsage:"Bruksområde",backgroundDefault:"Standard bakgrunnsfarge",backgroundTinted:"Bakgrunn med et hint av farge i seg",surfaceDefault:"Standardfarge for overflater / komponenter",surfaceTinted:"Overflater / komponenter med et hint av farge i seg",surfaceHover:"Hover-farge til overflater / komponenter",surfaceActive:"Active-farge til overflater / komponenter",borderSubtle:"Border-farge med lav kontrast til dekorativ bruk (skillelinjer)",borderDefault:"Standard border-farge til skjemakomponenter og meningsbærende elementer",borderStrong:"Border-farge med høy kontrast for ekstra synlighet",textSubtle:"Tekst- og ikonfarge med lavere kontrast",textDefault:"Tekst- og ikonfarge med høy kontrast og god synlighet",baseDefault:"Standardfarge for solide bakgrunner",baseHover:"Hover-farge for solide bakgrunner",baseActive:"Active-farge for solide bakgrunner",baseContrastSubtle:"Farge med god kontrast mot Base-default",baseContrastDefault:"Farge med god kontrast mot Base-default og Base-hover",backgroundTitle:"Background",backgroundText:"Background-fargene brukes for å fargelegge store flater og er ofte det bakerste laget på en nettside. Det er vanlig å bruke disse fargene på body-elementet.",backgroundDefaultDesc:"Background-default er den lyseste og mest nøytrale bakgrunnsfargen",backgroundTintedDesc:"Background-tinted får et hint av farge i seg og kan brukes for å skape variasjon i bakgrunnslaget",surfaceTitle:"Surface",surfaceText:"Surface-fargene brukes til å fargelegge elementer som ligger over background-fargene, som for eksempel paneler eller kort (cards). Disse fargene fungerer som forgrunnsfarger og bidrar til å skape dybde i designet ved å skille elementer fra bakgrunnen. I mørk modus blir disse fire fargene gradvis lysere, med Surface-active som den lyseste.",surfaceDefaultDesc:"Surface-default er helt hvit i lys modus og brukes som standard bakgrunnsfarge på elementer.",surfaceTintedDesc:"Surface-tinted får et hint av farge i seg og kan brukes for å skille elementer fra bakgrunnen.",surfaceHoverDesc:"Surface-hover kan brukes til hover-tilstander for elementer eller til å skape visuelle hierarkier i Surface-laget når den kombineres med Surface-tinted og Surface-active.",surfaceActiveDesc:"Surface-active kan brukes til active-tilstander for elementer eller til å forsterke hierarkiet i Surface-laget sammen med Surface-tinted og Surface-hover.",surfaceTintedCaption:"Viser hvordan Surface-tinted ser ut for 7 fargeskalaer generert med Temabyggeren.",borderTitle:"Border",borderText:"Border-fargene brukes for å fargelegge rammer (strokes) til elementer.",borderSubtleDesc:"Border-subtle har lav kontrast mot background- og surface-fargene og bør kun brukes til dekorative formål. Vanlige bruksområder er skillelinjer og dekorative rammer. Fargen bør ikke være den eneste visuelle indikatoren på at et element er interaktivt.",borderDefaultDesc:"Border-default brukes på skjemakomponenter eller på andre meningsbærende rammer. Fargen har god kontrast (over 3:1) mot alle background-fargene, Surface-default og Surface-tinted.",borderStrongDesc:"Border-strong har god kontrast (over 3:1) mot alle background- og surface-fargene og kan brukes på rammer for å gjøre elementer ekstra synlige.",bordersCaption:"Første rad viser farger med Border-subtle, mens den andre raden viser Border-default.",textTitle:"Text",textText:"Text-fargene brukes på tekst og ikoner.",textSubtleDesc:"Text-subtle er en lys tekstfarge som kan brukes for å skape variasjon i typografien eller for å indikere hierarkiske nivåer av viktighet. Den forsøker også å bevare mest mulig av fargemetningen fra den opprinnelige fargen valgt i Temabyggeren. Fargen har god kontrast (4.5:1) mot alle background-fargene, Surface-default og Surface-tinted.",textDefaultDesc:"Text-default er en tekstfarge med høy kontrast, optimal for lesbarhet. Den bør brukes på hovedinnholdet og den primære teksten på en side. Denne fargen i Neutral varianten kan være en fin farge å bruke på mesteparten av teksten. Fargen har god kontrast (4.5:1) mot alle background- og surface-fargene.",textColorsCaption:"Viser hvordan Text-default og Text-subtle ser ut for 8 forskjellige fargeskalaer generert med Temabyggeren.",baseTitle:"Base",baseText1:"Base-fargene brukes for å fargelegge solide bakgrunner, som for eksempel knapper og andre interaktive elementer. Fargene bidrar til å lede oppmerksomheten mot viktige designelementer og etablere et visuelt hierarki i forhold til mindre fremtredende elementer. Samtidig skaper de kontrast mot background- og surface-fargene, noe som forsterker lesbarhet og visuell tydelighet.",baseText2:"Base-hover og Base-active fargene genereres ut fra lysheten eller mørkheten til Base-default fargen fra samme fargeskala for å skape jevne visuelle overganger mellom tilstandene. Kontrastfargene blir enten hvite eller svarte avhengig av lysstyrken til Base-default fargen for å sikre god kontrast og lesbarhet.",baseDefaultDesc:"Base-default kan brukes for å fargelegge solide bakgrunner til elementer. Fargen (hex-koden) som blir valgt i temabyggeren blir plassert under Base-default.",baseHoverDesc:"Base-hover kan brukes til hover-tilstander for solide elementer eller til å skape visuelle hierarkier i Base-laget når den kombineres med Base-default og Base-active.",baseActiveDesc:"Base-active kan brukes til active-tilstander for solide elementer eller til å forsterke hierarkiet i Base-laget sammen med Base-default og Base-hover.",baseContrastSubtleDesc:"Base-contrast-subtle har god kontrast (4.5:1) mot Base-default fargen fra samme fargeskala og kan trygt brukes som tekst-farge mot denne.",baseContrastDefaultDesc:"Base-contrast-default har god kontrast (4.5:1) mot Base-default og Base-hover fargene fra samme fargeskala, og kan trygt brukes som en tekst-farge mot disse.",baseColorsCaption:"Viser bokser med Base-default som bakgrunn og Base-contrast-default som tekstfarge."},colorTokens:{title:"Farge-tokens",intro:"Fargene under er eksempler fra et tilfeldig tema. Bruk temabyggeren for å generere dine egne farger og navn.",lightCaption:"Et tilfeldig generert fargesystem fra Designsystemet.no",darkCaption:"Et tilfeldig generert fargesystem fra Designsystemet.no, mørkt modus"},shadowUsage:{title:"Bruk av skygger i designet",intro1:"Skygger bør brukes bevisst og konsistent da de uttrykker at noe ligger over noe annet i løsningen.",intro2:"Skygger kan hjelpe svaksynte til å identifisere komponenter. Bruk av skygger og konturer gjør det enklere og raskere å finne en komponent når du skanner sider. (Research: Material Design)",strengthsTitle:"Styrker",strengthsText:"Vi har ulike styrker på skyggene, fra xsmall til xlarge. De ulike styrkene brukes for å antyde høyden til overflaten. Overflater i høyere høyder har større skygger, mens de på lavere høyder bør ha mindre skygger. Skygger skal skape et hierarki slik at det som ligger over eller under noe annet kommer tydeligere frem."},shadowTokens:{title:"Skygge-tokens",tokensTitle:"Tokens",tokensText:"Pass på at du har lys modus aktivert for å se skyggene. Skygger er ikke ment for bruk i mørk modus, da de er basert på mørkere fargetoner. For å skape hierarki og kontrast i mørk modus er det bedre å benytte andre virkemidler som for eksempel lyse kanter.",exampleTitle:"Eksempel",exampleText:"Popover er en komponent som legger seg over annet innhold. Dette tydeliggjøres ved bruk av en medium skygge.",exampleCaption:"Popover komponentet dekker over the andre innholdet."},componentSizes:{title:"Komponentstørrelser",intro:"De fleste komponentene i designsystemet finnes i tre anbefalte størrelser: Small, Medium og Large (sm, md, lg). Disse er utviklet for å tilpasse seg ulike behov på tvers av skjermstørrelser og bruksområder.",sizesCaption:"Størrelser for komponenter i Designsystemet.",smallTitle:"Small",smallText:"Small er ideell for kompakte grensesnitt der plassutnyttelse er viktig, som på mobile enheter, ekspertverktøy eller administrasjonsgrensesnitt. Det er anbefalt å bruke denne størrelsen på nettsider med en basefont på 16px.",mediumTitle:"Medium",mediumText:"Medium fungerer som standard for de fleste vanlige bruksområder, og er anbefalt å bruke sammen med en basefont på 18px. Størrelsen gir en god balanse mellom lesbarhet og plassutnyttelse og egner seg spesielt godt for desktop-grensesnitt og større visningsflater.",largeTitle:"Large",largeText:"Large gir økt lesbarhet og tydelighet. Den kan brukes i desktop-grensesnitt eller når synlighet og tilgjengelighet er viktig. Den kan også brukes i en avgrenset kontekst på siden, for å fremheve sentrale elementer. Det er anbefalt å bruke størrelsen sammen med en basefont på 21px.",mediumSizeCaption:"Mange av medium-komponentene har en fast høyde på 48px.",harmonyText:"Komponenter innenfor en bestemt størrelse er designet for å fungere sammen. For eksempel har mange medium-komponenter en høyde på 48px og en basefont på 18px, noe som sikrer en harmonisk visuell balanse når de plasseres ved siden av hverandre.",combinedCaption:"Eksempel der Medium og Large komponenter er brukt sammen.",consistencyText:"For å opprettholde et helhetlig og oversiktlig design anbefales det å bruke faste størrelser innenfor en gitt nettside eller kontekst. Mange ulike kombinasjoner av størrelser kan føre til et rotete og uoversiktlig design.",combinationText:"I enkelte tilfeller kan komponenter i ulike størrelser kombineres for å skape bedre visuelle hierarkier og brukervennlighet. I eksempelet ovenfor er søkefeltseksjonen større og mer fremtredende enn komponentene i headeren, fordi søkefunksjonen er en sentral del av siden. Den økte størrelsen gjør den mer synlig og lett tilgjengelig for brukeren."},sizeTokens:{title:"Størrelse-tokens",tokensTitle:"Tokens",tokensText:"Pass på at du har lys modus aktivert for å se skyggene. Skygger er ikke ment for bruk i mørk modus, da de er basert på mørkere fargetoner. For å skape hierarki og kontrast i mørk modus er det bedre å benytte andre virkemidler som for eksempel lyse kanter.",exampleTitle:"Eksempel",exampleText:"Popover er en komponent som legger seg over annet innhold. Dette tydeliggjøres ved bruk av en medium skygge."},fontFamily:{title:"Font-family",intro:"For å presentere tekst på korrekt måte er det laget stiler som har ulike kombinasjoner av størrelse, fontvekt og linjehøyde. Det er også laget et sett med typografi-komponenter som innkapsler disse stilene, slik at de enkelt kan brukes i ulike sammenhenger. Beskrivelse av hvordan typografi-komponenter brukes finner du i komponentartikkelen Typography."},typoTokens:{title:"Typografi-tokens",comingSoon:"Innhold kommer snart."},figmaConnect:{title:"Kom i gang med designsystemet (Figma)",intro:"Denne veiledningen hjelper deg med å komme i gang med å designe ved hjelp av det delte designsystemet i Figma. Du får en innføring i hvordan du bruker komponenter, tokens og stiler fra det sentrale biblioteket.",prerequisites:"Forutsetninger",prerequisitesIntro:"Før du starter trenger du:",figmaAccount:"Figma - En aktiv Figma-konto (gratis eller betalt)",access:"Access - Tilgang til Røde Kors sitt Figma-bibliotek (kontakt teamansvarlig hvis du mangler tilgang)",createFile:"Opprett eller åpne en arbeidsfil",createFileText:"Opprett en ny Figma-fil, eller åpne en eksisterende prosjektfil hvor du skal ta i bruk designsystemet.",activateLibraries:"Aktiver designsystemets biblioteker",goToAssets:"Gå til Assets-panelet i Figma",openLibrary:"Klikk på bok-ikonet (📚) øverst til høyre for å åpne Team Library",enableLibraries:"Slå på følgende biblioteker:",libraryComponent:"Designsystem – komponenter",libraryIcons:"Aksel ikonbibliotek",libraryActivationCaption:"Viser aktivering av biblioteker i Figma",insertComponents:"Sett inn komponenter fra biblioteket",goToAssetsPanel:"Gå til Assets-panelet",useSearch:"Bruk søkefeltet for å finne komponenter raskt, f.eks.:",dragComponent:"Dra komponenten inn i artboardet",customizeComponent:"🔄 Tilpass komponentene ved å bruke props og varianter i høyrepanelet. Dette gir fleksibilitet uten å bryte koblingen til hovedkomponenten.",tips:"Tips og god praksis",tipsText:`Unngå å "detache" komponenter. For å sikre gjenbruk og fremtidige oppdateringer, skal du ikke detach'e komponenter. Bruk heller varianter og egenskaper (props) for å tilpasse utseende og funksjon.`},startup:{title:"Oppstart: Oppsett av arbeidsområde",step1Title:"Trinn 1: Start med en ny frame",step1Text1:"Opprett en ny frame i Figma med ønsket størrelse.",step1Text2:"I dette tilfellet bruker vi 1728px i bredde.",step2Title:"Trinn 2: Legg til autolayout",step2Text:"Legg til autolayout på framen.",step3Title:"Trinn 3: Legg til tokens på framen",step3Text:"Legg til følgende tokens:",step3Token1:"Spacing: 0",step3Token2:"Padding left right: 0",step3Token3:"Padding top bottom: 0",step3Token4:"Background color: color/main/background-default",step4Title:"Trinn 4: Legg til heading og footer",step4Text:"Legg til header og footer fra komponenter biblioteket. Sørg for at Auto Layout retning er satt til vertikal.",step5Title:"Trinn 5: Lage en seksjon",step5Text:'Lag en ny frame som du kaller "section".',step6Title:"Trinn 6: Legge til autolayout",step6Text:"Legg til autolayout på den nye seksjonen.",step7Title:"Trinn 7: Legge til seksjon i hovedframe",step7Text:'Legg til seksjonen i hovedframen og sørg for at seksjonen er satt til "fill container".',step8Title:"Trinn 8: Legge til tokens (side-marginer og bakgrunnsfarge)",step8Text:"Velg seksjonen og legg til følgende tokens:",step8Token1:"Spacing: size/6",step8Token2:"Padding left right: size/30",step8Token3:"Padding top bottom: size/22",step8Token4:"Background color: color/main/background-default",step8Note:"Dette sørger for at siden din er koblet mot tokensene i koden og gjør det lettere for utviklere å utvikle det du designer da disse er lenket via GitHub.",step9Title:"Trinn 9: Test seksjonen",step9Text:"Legg til ett komponent fra biblioteket. I vårt tilfelle bruker vi card komponenten.",step10Title:"Trinn 10: Lag en nested layout",step10Text:"Legg til flere kort og sett de sammen ved hjelp av en auto layout. For å gjøre dette enkelt velg alle kortene og trykk shift + a.",step11Title:"Trinn 11: Set opp nested layout",step11Text1:"Velg alle kortene i seksjonen og sørg for at disse er satt til fill container.",step11Text2:"Dette gjør vi for at kortene skal ta like mye plass og holde seg innen for rammene til den nestede layouten.",step12Title:"Trinn 12: Legg til spacing tokens",step12Text:"Gå ett hakk ut og velg containeren til kortene. Sørg for at spacing er satt til size/6.",step13Title:"Trinn 13: Legg til spacing i seksjon",step13Text:"Legg til spacing mellom kort containeren og headingen ved å velge seksjonen og tilføye en spacing på size/6.",step14Title:"Trinn 14: gjenbruk",step14Text:"Dupliser seksjonen og gjør deg kjent med hvordan auto-layout og tokensene fungerer. Under ser du hvordan jeg enkelt laget en tabell ved å erstatte kortene med en tablecolumn komponent og satte spacing til size/0."},newComponent:{title:"Lage nye komponenter",intro:"Denne siden forklarer hvordan man bygger nye komponenter i designsystemet. Målet er å sikre at komponentene er konsistente, skalerbare, tilgjengelige og enkle å bruke både i design og utvikling.",tokensTitle:"Tokens som grunnlag",tokensText:"Alle komponenter skal bygges med tokens. Tokens er de grunnleggende verdiene i systemet og gjør det mulig å oppdatere eller tilpasse design uten å endre hver enkelt komponent.",tokensAutolayout:"Autolayout: Bruk alltid Autolayout i Figma. Det gir produksjonsklare filer og speiler hvordan kode er strukturert.",tokensSize:"Størrelsestokens: Bruk tokens for spacing, padding og dimensjoner. Unngå manuelle verdier.",tokensSemantic:"Semantiske tokens: Benytt semantiske tokens for farger, typografi og spacing. Dette sikrer støtte for lys og mørk modus, ulike størrelser og temaer – og gjør komponentene direkte koblet til kode.",atomicTitle:"Bygging med atomisk design",atomicText:"Komponenter settes sammen hierarkisk etter atomisk design:",atomicAtoms:"Atomer: de minste byggeklossene (f.eks. knapp, ikon, inputfelt).",atomicMolecules:"Molekyler: sammensatte atomer (f.eks. søkefelt = input + knapp).",atomicOrganisms:"Organismer: større helheter laget av molekyler (f.eks. skjema eller navigasjon).",atomicPrinciple:"Dette prinsippet gjør komponentene modulære og gjenbrukbare.",calendarTitle:"Eksempel Kalender Modul",calendarStep1Title:"Trinn 1: Begynn på atomisk nivå",calendarStep1Text:"Se for deg atomene som trengs når du lager en kalender. Eksempelvis kan det være:",calendarStep1TextLabel:"Tekst:",calendarStep1TextItems:'Måned/år (f.eks. "August 2025"), Ukedagsnavn (man, tir, ons …), Dato-nummer (1, 2, 3 …)',calendarStep1IconLabel:"Ikoner:",calendarStep1IconItems:"Piltaster for navigasjon (forrige/neste måned), Eventuelt ikon for «dagens dato» eller «reset»",calendarStep1ButtonLabel:"Knapper:",calendarStep1ButtonItems:"Navigasjonsknapper (forrige/neste måned), Dato-knapp (hver dato er en interaktiv knapp)",calendarStep1Note:"Vi vet at vi allerede har icon-button så den kan vi enkelt hente ut fra komponent bibiloteket.",calendarStep2Title:"Trinn 2: Start med å bygge ut atomene dine",calendarStep2Text1:"I vårt tilfelle vil vi trenge ett celle komponent som viser ukedagene og dato-nummer i en mnd. Her kan vi bruke samme atom for ukedagsnavn og dato-nummer.",calendarStep2Text2:'Vi lager to elementer som vi kaller "cell" og legger til autolayout og appellerer token verdiene.',calendarStep3Title:"Trinn 3: Lag variantene du trenger",calendarStep3Text:"I vårt tilfelle vil vi trenge ett celle komponent som viser ukedagene og dagene i en mnd.",calendarStep4Title:"Trinn 4: Sett sammen molekylet",calendarStep5Title:"Trinn 5: Bygg ut organismen",calendarStep5Text:"Her legger vi sammen molekylene til en tabell.",calendarStep6Title:"Trinn 6: Legg til riktig states",calendarStep7Title:"Trinn 7: Gjør ferdig organismen med eksisterende elementer",calendarStep8Title:"Trinn 8: Bygg ut med flere varianter hvis det gir mening",variantsTitle:"Varianter og tilstander",variantsText:"Alle komponenter skal ha definerte varianter og interaksjonstilstander:",variantsFigma:"Bruk Figma Variants i stedet for duplisering.",variantsStates:"Minimumstilstander: default, hover, pressed, disabled, focus. Litt ut fra kontekst.",variantsNew:"Opprett en ny variant når det gjelder en tilpasning av samme komponent, og en ny komponent kun når funksjonen er unik.",accessibilityTitle:"Tilgjengelighet",accessibilityText:"Tilgjengelighet skal alltid ivaretas:",accessibilityWCAG:"Følg WCAG-kontrastkrav (minimum 4.5:1 for tekst).",accessibilityTouch:"Interaktive flater skal ha minst 44 × 44 px treffflate.",accessibilityFocus:"Fokustilstand skal alltid være synlig, også uten hover.",responsiveTitle:"Responsivitet",responsiveText:"Komponenter skal fungere på tvers av skjermstørrelser og layouts:",responsiveTokens:"Bruk størrelsestokens for spacing og dimensjoner.",responsiveSizes:"Støtt små, mellomstore og store layoutvarianter.",responsiveBreak:"Sørg for at komponenter brytes eller stackes logisk i mindre formater.",reuseTitle:"Gjenbruk i kontekst",reuseText:"En komponent skal alltid kunne brukes i ulike sammenhenger. Vis derfor eksempler i dokumentasjonen, som:",reuseExample1:"knapp i et skjema",reuseExample2:"kort i et grid",reuseExample3:"inputfelt i en dialogboks"},examples:{title:"Praktiske eksempler",example1Title:"Eksempel 1: Påmeldingsskjema",example1Step1Title:"Trinn 1: Start med en ny frame",example1Step1Text:"Opprett en ny frame i Figma med ønsket størrelse. Bruk design tokens for å sette framefargen hvis nødvendig (f.eks. background-default).",example1Step2Title:"Trinn 2: Legg til overskrift",example1Step2Text:'Bruk komponenten Heading for å legge til en overskrift, som "Meld deg på vårt arrangement". Juster størrelsen med size-modusen, om nødvendig.',example1Step3Title:"Trinn 3: Legg til tekstfelt for navn og e-post",example1Step3Text:'Sett inn to Text Input-komponenter. Den første for "Fullt navn" og den andre for "E-postadresse". Sørg for å bruke placeholder-modusen for instruksjoner i tekstfeltene.',example1Step4Title:"Trinn 4: Legg til en dropdown for valg av arrangement",example1Step4Text:"Bruk komponenten Multisuggestion for å la brukeren velge mellom forskjellige arrangementer. Legg til nødvendige alternativer i dropdown-menyen.",example1Step5Title:"Trinn 5: Legg til en send-knapp",example1Step5Text:"Sett inn en Button-komponent og tilpass fargen ved å bruke color-modusen hvis knappen skal skille seg ut. Legg til ikon hvis ønskelig.",example1NoteTitle:"Obs!",example1NoteText:"Bruk color og sizetokens i framems rundt komponentene for å sikre at alle moduser fungerer som de skal.",example2Title:"Eksempel 2: Artikkelside",example2Step1Title:"Trinn 1: Opprett en ny frame",example2Step1Text:"Start med å lage en ny vertikal frame i Figma med ønsket bredde (f.eks. 8- eller 12-kolonne grid). Sett bakgrunnsfarge ved hjelp av design tokens (f.eks. background-color: var(--color-background-light)).",example2Step2Title:"Trinn 2: Legg til en hovedoverskrift",example2Step2Text:"Bruk Heading-komponenten for å legge til tittelen på artikkelen. Juster størrelsen med size-modus (f.eks. heading-xleller heading-lg).",example2Step3Title:"Trinn 3: Legg til ingress",example2Step3Text:"Bruk Text-komponenten i body-large-stil for å skrive en kort ingress som oppsummerer artikkelen. Plasser denne rett under overskriften, med tilstrekkelig spacing.",example2Step4Title:"Trinn 4: Sett inn hovedinnhold med tekstblokker",example2Step4Text:"Bruk Text-komponenter i body-default eller body-large for å bygge ut brødteksten. Del opp teksten i tydelige avsnitt og legg inn mellomtitler med Heading-komponenten i mindre størrelse (heading-md eller heading-sm).",example2Step5Title:"Trinn 5: Legg til et bilde i artikkelen",example2Step5Text1:"Bruk Image-komponenten for å plassere et illustrasjons- eller artikkelbilde midtstilt i teksten. Bruk size-modusen hvis du trenger å endre størrelse (f.eks. medium eller full-width).",example2Step5Text2:"Foreløpig har vi ingen Image -komponent så vi bruker derfor en frame i steden",example2Step6Title:"Trinn 6: Legg til lenker i teksten",example2Step6Text:"Bruk Link-komponenten der det er behov for hyperkoblinger til relaterte artikler, dokumenter eller eksterne kilder.",example2Step7Title:"Trinn 7: Avslutt med relaterte artikler eller deling",example2Step7Text:'Bruk Card-komponenter i et grid-layout for å vise relaterte artikler. Hver kort bør inneholde bilde, tittel og en "Les mer"-lenke. Alternativt kan du legge til Share-komponenter for sosiale medier nederst.',example3Title:"Eksempel 3: Planleggings verktøy",example3Step1Title:"Trinn 1: Opprett en frame",example3Step1Text:"Start med å lage en ny vertikal frame i Figma, med den ønskede bredden som passer til layouten for aktivitetskalenderen din (f.eks. 12-kolonne grid). Sett bakgrunnsfargen ved hjelp av design tokens (f.eks. background-color: var(--color-background-light)).",example3Step2Title:"Trinn 2: Legg til en hovedoverskrift",example3Step2Text:'Bruk Heading-komponenten for å legge til tittelen "Aktivitetskalender". Juster størrelsen med size-modus som passer (f.eks. heading-xl eller heading-lg).',example3Step3Title:"Trinn 3: Legg til en kort beskrivelse",example3Step3Text:"Bruk Text-komponenten i body-large-stil for å skrive en kort beskrivelse som forklarer formålet med kalenderen. Plasser denne rett under hovedoverskriften, med tilstrekkelig spacing for å sikre lesbarhet.",example3Step4Title:"Trinn 4: Sett inn kalenderoversikt",example3Step4Text:"Bruk en Table-komponent for å lage en oversikt over månedens aktiviteter. Sørg for at hver rad representerer en dag og inkluderer kolonner for dato, aktivitet, tid og sted. Juster størrelsen på tabellen etter behov.",example3Step5Title:"Trinn 5: Legg til detaljerte aktivitetskort",example3Step5Text:'Bruk Card-komponenter for å vise detaljerte beskrivelser av hver aktivitet. Hvert kort bør inneholde aktivitetens navn, beskrivelse, tid, sted og en "Mer info"-knapp som kan føre til en detaljert side om aktiviteten.',example3Step6Title:"Trinn 6: Sett inn bilder for hver aktivitet",example3Step6Text:"Bruk Image-komponenten innenfor hvert aktivitetskort for å inkludere relevante bilder. Bruk size-modusen for å tilpasse bildene til kortene (f.eks. medium eller full-width).",example3Step7Title:"Trinn 7: Legg til et filter eller søkefunksjon",example3Step7Text:"Bruk Search-komponenten for å legge til en søkefunksjon øverst på siden, slik at brukere enkelt kan finne aktiviteter basert på navn, dato eller kategori.",example3Step8Title:'Trinn 8: Inkluder en "Legg til i kalender" funksjon',example3Step8Text:"Bruk Button-komponenter for å tilby en funksjon der brukere kan legge aktiviteter til sin personlige kalender. Plasser denne knappen i nærheten av aktivitetsdetaljene.",example3Step9Title:"Trinn 9: Legg til lenker og navigasjon",example3Step9Text:"Bruk Link-komponenter for å legge til hyperkoblinger til relaterte aktiviteter eller eksterne ressurser, som for eksempel billetter eller mer informasjon. Sørg for tydelig kontrast og understreking i henhold til designreglene.",example3Step10Title:"Trinn 10: Avslutt med sosiale delingsmuligheter",example3Step10Text:"Bruk Share-komponenter for sosiale medier nederst på siden, slik at brukere kan dele interessante aktiviteter med venner og familie.",example3Step11Title:"Trinn 11: Tilpass for mobilvisning",example3Step11Text:"Sørg for at layouten er responsiv. Bruk layout grid og auto layout for å sikre at tekst, bilder og kort flyter riktig på små skjermer. Test designet på forskjellige skjermstørrelser for å sikre optimal brukeropplevelse."},tokenStudio:{title:"Kom i gang med Token Studio og GitHub-synkronisering",intro:"Denne veiledningen viser hvordan du kobler Token Studio i Figma til et GitHub-repositorium for å holde design tokens synkronisert på tvers av teamet.",prerequisites:"Forutsetninger",prerequisitesIntro:"Før du setter opp synkronisering trenger du:",figmaAccount:"Figma - En Figma-konto med Professional-plan eller høyere",tokenStudioAccount:"Token Studio - En Token Studio-konto med Premium-abonnement",generateToken:"Generer en GitHub Fine-grained access token",goToGithub:"Gå til: Github → Settings → Developer settings → Personal access tokens → Tokens (fine-grained)",clickGenerate:"Klikk på Generate new token",fillOut:"Fyll ut følgende:",tokenName:"Navn:",tokenNameExample:"F.eks. Red Cross Token",expiration:"Utløpsdato:",expirationText:"sett som ønsket",generateAndCopy:"Klikk Generate token og kopier den trygt (lagres ikke av GitHub etterpå)",configureSync:"Konfigurer GitHub-sync i Token Studio",openPlugin:"Åpne Token Studio-pluginen i Figma",goToSettings:"Gå til: Settings → Sync providers → Add new → GitHub",fillIn:"Fyll inn følgende:",syncName:"Name:",syncNameExample:"f.eks. Red Cross Tokens",personalToken:"Personal Access Token:",personalTokenText:"lim inn tokenet fra GitHub",repository:"Repository:",repositoryText:"norwegianredcross/DesignSystem",branch:"Branch:",branchText:"main",storageLocation:"Token Storage Location:",storageLocationText:"design-tokens",repoAccess:"Repository access: velg All repositories eller spesifikt repo",repoPermissions:"Repository permissions → Contents: velg Read & Write",setupCaption:"Konfigurer GitHub-sync",performSync:"Utfør første synkronisering",afterSave:"Etter at du har lagret innstillingene, vil pluginen vise en modal:",ifEmpty:"Hvis repoet er tomt → velg Push",ifExists:"Hvis tokens allerede finnes → velg Pull",chooseAction:"Velg handling basert på situasjonen.",syncCaption:"Utfør første synkronisering",workflow:"Løpende arbeidsflyt: Push og Pull",pushText:"Push når du gjør endringer i tokens i Figma → skriv inn commit-melding og gjennomgå endringer før du evt. åpner en Pull Request.",pullText:"Pull for å hente oppdateringer fra GitHub til Figma → du får mulighet til å gjennomgå og godkjenne før endringer tas inn.",tips:"Tips og god praksis",tip1:"Oppbevar tokenen sikkert – ikke lim den inn i offentlige dokumenter.",tip2:"Dokumenter innstillingene dine (navn, branch, sti osv.) for enklere oppsett senere.",tip3:"Synk ofte for å sikre konsistens mellom design og utvikling."},colorSystem:{title:"Sette opp ditt eget fargesystem",intro1:"Med et gjennomtenkt fargesystem kan vi sikre at tekst alltid har god nok kontrast mot våre bakgrunnsfarger og at det finnes nok ulike farger for alle tilstander.",intro2:"En profilveileder inneholder ofte kun et sett med primærfarger og sekundærfarger i et par forskjellige fargetoner. Å lage et digitalt produkt kun med disse fargene alene er vanskelig. For å kunne sikre riktig kontrast og korrekte farger for ulike tilstander, er vi avhengig av å definere flere variasjoner av profilfargene. Bare button komponenten består av 6 ulike blåfarger:",buttonCaption:"Som du ser i eksemplet trenger vi 6 ulike fargevariasjoner bare for Button-komponentet",systemText:'Fargesystemet er strukturert for å støtte multibranding og ulike modes (darkmode, contrastmode, etc.), og samtidig ivareta kontrastkrav. Vi har latt oss inspirere av USWDS sine "magic numbers" for å sikre tilgjengelige fargekombinasjoner fra hvilken som helst fargepalett. Vi har også blitt inspirert av Radix sitt fargesystem med tydelige intensjoner for de ulike fargene. For å sikre at en organisasjon skal kunne bruke sin faktiske brandfarge, har vi valgt å kombinere to tilnærminger til et helt nytt system.'},themeBuilder:{title:"Designsystemets temagenerator",intro:"For å generere en skala som fungerer kan du bruke Designsystemets temagenerator. Det eneste du trenger å gjøre er å lime inn hex-koden til merkevarens accent-farge og øvrige profil-farger.",generatorLink:"https://theme.designsystemet.no/no",caption:"Fargesystemet bruker brand-fargen til å generere flere fargevarianter, slik at vi kan sikre god kontrast mellom tekst og bakgrunnsfarger.",systemText:"Temageneratoren er basert på et fargesystem sørger for at både brand-farger ivaretas og kontrastkrav sikres gjennom de lineære fargene som genereres ut fra brand-fargen. Farger beregnet for tekst vil dermed alltid ha god nok kontrast mot bakgrunnsfarger.",examplesTitle:"Eksempler",example1:"Text-default har alltid god nok kontrast mot alle background og surface farger.",example2:"Text-subtle har alltid god nok kontrast mot alle background-farger og surface-default.",appliesText:"Dette vil gjelde uansett hva du har valgt som base-farge.",baseText:"Base-default-fargen vil alltid være den samme som fargen du har valgt. Dette er for å ivareta brandet ditt best mulig. Du må derfor selv passe på at fargen du velger oppfyller kontrastkravene i forhold til hvor den skal bli brukt. Designsystemets temagenerator vil informere deg om eventuelle kontrastbrudd."},useColors:{title:"Bruk fargene du har generert",intro:"Når du har generert skalaene, kan du bruke de nye fargekodene i Designsystemet, slik at alle komponenter følger din profil."},proposeDesign:{title:"Foreslå nytt design eller forbedringer",intro:"Vi setter pris på at du hjelper oss å forbedre komponenter og design i Figma. De beste løsningene kommer gjennom samarbeid.",newComponent:"Ny Komponent",newComponentText1:"Ønsker du å foreslå en ny komponent setter vi pris på om den blir registrert i Github.",newComponentText2:"Når en ny komponent blir foreslått må vi vurdere om den er verdifull nok til å være en del av designsystemet. Vi ønsker ikke å ende opp med hundrevis av komponenter med små forskjeller, da vi kan risikere uønsket kompleksitet, vedlikehold, samt design- og teknologigjeld.",newComponentText3:"For nye komponenter som tas inn må vi:",consider1:"Identifisere og utforske liknende behov hos andre produktteam og virksomheter. Hvor mange produkter/etater vil ha bruk for den?",consider2:"Vurdere problemet komponenten skal løse og verdien dette gir.",consider3:"Tenke på om den kan lages fleksibel og gjenbrukbar nok.",consider4:"Tenke på om den er i tråd med designprinsippene og om den passer inn i helheten",reportTitle:"Registrere feil eller mangler på en komponent i Figma",reportText:"Har du funnet en svakhet med noen av de eksisterende komponentene i Figma, setter vi pris på om du enten legger igjen en kommentar i Figma sammen med den aktuelle komponenten, eller at du oppretter en bug-report i Github som forklarer feilen, eventuelt en feature-request som forklarer ønsket tilleggsfunksjonalitet.",githubLink:"https://github.com/norwegianredcross/DesignSystem",githubIssuesLink:"https://github.com/norwegianredcross/DesignSystem/issues"}},footer:{shortcuts:"Snarveier",shortcutsLinks:{services:"Tilbudene",volunteer:"Bli frivillig",ourWork:"Vårt arbeid",about:"Om Røde Kors",support:"Støtt arbeidet",contact:"Kontakt oss"},contact:{visitingAddress:"Besøks adresse",organizationNumber:"Organisasjonsnummer",email:"E-post"},copyright:"Rødekors",legal:{privacy:"Personvern",press:"For presse",procurement:"Regler for innkjøp",whistleblowing:"Varsling/Misconduct"}}},EN:{header:{darkMode:"Dark Mode",toggleTheme:"Toggle theme",language:"Language:",search:"Search",searchPlaceholder:"Search content...",closeSearch:"Close search",openSearch:"Open search",clearSearch:"Clear search",close:"Close",menu:"Menu",closeMenu:"Close menu",openMenu:"Open menu",login:"Log in",supportUs:"Support us",suggestions:"Search suggestions",viewAll:"View all results",noResults:"No results found for",selectLanguage:"Select language",homeAriaLabel:"Norwegian Red Cross Home",nav:{design:"Design",components:"Components",code:"Code",tokens:"Tokens",work:"Our Work",volunteer:"Volunteer",courses:"Courses & Training"}},home:{heroTitle:"Red Cross Design System",heroLead:"Common component library and guidelines for design and development of digital solutions in Red Cross.",searchComponents:"Search components",exploreSystem:"Explore the system",componentsDesc:"Library with ready-made React components.",designDesc:"Colors, typography, and principles.",codeDesc:"Documentation, workflow, and MCP.",universalDesign:"Universal Design",universalDesignText:"Built-in accessibility by default. We strictly follow WCAG 2.1 requirements.",readGuidelines:"Read guidelines",consistentBrand:"Consistent Brand",consistentBrandText:"Design tokens ensure the Red Cross visual profile is maintained across all surfaces.",seeColors:"See colors",efficientDev:"Efficient Development",efficientDevText:"Save time with ready-made components. Focus on functionality, not CSS.",exploreComponents:"Explore components",quickActionsTitle:"Jump in fast",quickActionCodeTitle:"Start in code",quickActionCodeText:"See setup, tokens, and examples.",quickActionDesignTitle:"Design guide",quickActionDesignText:"Colors, typography, and principles.",quickActionComponentsTitle:"Component library",quickActionComponentsText:"Explore and reuse ready-made components.",openCode:"Open code",openDesign:"Open design",openComponents:"Open components",featureStripTitle:"Useful right now",featureToken:"Updated design tokens",featureFont:"Source Sans 3 included",featureComponent:"New component variants",featureSeeAll:"See all updates",profile:"Profile",name:"Name Namerson",volunteer:"Volunteer",save:"Save",approved:"Approved",rejected:"Rejected",darkModeLabel:"Dark mode",importantMessage:"Important message",updateGuidelines:"Remember to update the guidelines...",all:"All",active:"Active",alerts:"Alerts",status:"Status"},components:{title:"Components",intro:"The design system contains fundamental components that can be combined in many different ways and in different patterns.",searchPlaceholder:"Search for component...",searchAriaLabel:"Search components",noResults:"No components found for"},code:{sidebar:{overview:"Overview",workflow:"Workflow",structure:"Structure",contribute:"Contribute",home:"Home",getStarted:"Get Started",designTokens:"Design Tokens",fonts:"Fonts",icons:"Using Icons",figmaMcp:"From Figma to Code (MCP)",componentCreation:"Component Creation",metadataFiles:"Metadata Files",developerGuide:"Developer Guide"},overview:{title:"Red Cross Design System",intro:"Welcome to Red Cross Design System! This repository contains a library of reusable UI components built with React, tailored for Norwegian Red Cross digital projects.",text1:"It is developed by leveraging the base components from Digdir's Design System. This approach ensures a cohesive and recognizable visual identity across all Red Cross applications. The system is pre-configured with the official Red Cross theme, delivered via a dedicated design token package.",text2:"The main goal is to ensure brand consistency, improve development efficiency, and maintain high standards for accessibility across all Red Cross applications.",text3:"Storybook serves as the interactive documentation and development environment to showcase and test these components.",getStartedCard:"Get Started",getStartedDesc:"Installation, setup, and guidelines for developers.",getStartedLink:"Get Started",designTokensCard:"Design Tokens",designTokensDesc:"Learn how to use design tokens and fonts.",designTokensLink:"Read more",workflowCard:"Workflow",workflowDesc:"Learn how to use MCP tools to fetch components directly from Figma.",workflowLink:"Read guide"},getStarted:{title:"Get Started",intro:"To use Red Cross Design System in your Next.js (or other React) application:",installationTitle:"1. Installation",installationText:"Install the necessary npm packages for your project. You need three packages: the component library itself (rk-designsystem), base styles from Digdir, and the Red Cross theme package (rk-design-tokens).",githubLink:"Go to GitHub Repository",npmTitle:"npm",yarnTitle:"yarn",pnpmTitle:"pnpm",note:"Note: You do not need to install @digdir/designsystemet-react separately, as all necessary components are included in the rk-designsystem package.",stylesTitle:"2. Including Styles (CSS)",stylesText1:"For components to be styled correctly, you must import the stylesheets at the top level of your application, for example in layout.tsx (for Next.js App Router) or _app.tsx (for Next.js Pages Router).",stylesText2:"Important order: It is crucial that the base stylesheet (@digdir/designsystemet-css) loads before the Red Cross theme file (rk-design-tokens). This ensures that our theme tokens correctly override the default values.",appRouterExample:"Example for Next.js (App Router - src/app/layout.tsx):",pagesRouterExample:"Example for Next.js (Pages Router - pages/_app.tsx):",usageTitle:"3. Using Components",usageText:"Once the stylesheets are included, you can start importing and using components in your project. All components you need are available directly from the rk-designsystem package.",importTitle:"3.1 Import and use Red Cross Design System components",nextjsExample:"3.2 Example usage in a Next.js page",updateText:"The appearance of all components is fully controlled by the rk-design-tokens package. To receive visual updates to the brand theme (such as a new primary color), simply update the package to the latest version:"},designTokens:{title:"Red Cross Design Tokens",intro:"This repository is the central source for all design tokens (colors, typography, spacing, etc.) for Norwegian Red Cross digital products. It functions as a single source of truth that automatically distributes style changes to all connected projects.",howToTitle:"How to use tokens",howToText:"To use design tokens in your project, you must install and configure the theme package.",installTitle:"1. Installation",importTitle:"2. Import CSS",importText:"In your application's root layout (e.g. layout.tsx), import the base stylesheet before the Red Cross theme file.",fontTitle:"How to add the font",fontText1:"Red Cross Design System uses the Source Sans 3 font. For typography to display correctly in your application, this font must be loaded.",fontText2:"You can include the font by adding the following lines to the <head> element in your HTML or in your root layout:",fontText3:"Once the font is loaded, CSS variables from rk-design-tokens will automatically use it (--ds-font-family).",workflowTitle:"Automated Workflow for Design Tokens (End-to-End)",workflowText:"This workflow establishes a fully automated pipeline that connects our design process directly to live production applications. When a designer updates the style in Figma, this system automatically builds, versions, and publishes a new style package to npm. Then our Vercel projects are notified, updating themselves and redeploying with the new styles.",phase1Title:"Phase 1: A Designer Makes a Change (Publisher)",phase1Item1:"Design in Figma: A designer makes a change to a color, font, or other design token.",phase1Item2:"Push to GitHub: Using the Token Studio plugin, the designer pushes the changes. This automatically commits the updated JSON files to the main branch.",phase1Item3:"Trigger Publisher Workflow: This push immediately triggers the GitHub Action defined in .github/workflows/publish.yml.",phase1Item4:"Build & Commit Artifacts: The workflow runs npm run build to generate CSS from JSON files and commits the results.",phase1Item5:"Versioning & Release: The workflow runs npm version patch to increment the version number, create a release commit, and tag it.",phase1Item6:"Publish to npm: Finally, the workflow publishes the new version of the package to the npm registry.",phase2Title:"Phase 2: Notifying Applications (Signal)",phase2Text:"Send a Dispatch signal: After a successful publication, the workflow sends a repository_dispatch signal to consumer projects like rk-designsystem to notify them of the new version.",phase3Title:"Phase 3: Automatic Update and Redeploy (Consumers)",phase3Item1:'Trigger Consumer Workflow: The dispatch signal starts an "Update" workflow in consumer projects.',phase3Item2:"Update Dependencies: The workflow runs npm update rk-design-tokens to fetch the latest version.",phase3Item3:"Commit & Push Update: The workflow commits the updated package-lock.json file.",phase3Item4:"Vercel Auto-Deploys: Vercel's Git integration detects the new commit and automatically starts a new deployment."},fonts:{title:"Fonts",intro:"Red Cross Design System uses the Source Sans 3 font. For typography to display correctly in your application, this font must be loaded.",howToTitle:"How to add the font",howToText:"You can include the font by adding the following lines to the <head> element in your HTML or in your root layout:",afterLoadTitle:"After loading",afterLoadText:"Once the font is loaded, CSS variables from rk-design-tokens will automatically use it (--ds-font-family).",nextjsTitle:"Example for Next.js",nextjsText:"For Next.js App Router, add the font in layout.tsx:",nextjsPagesText:"For Next.js Pages Router, add the font in _app.tsx or _document.tsx:",cssVariablesTitle:"CSS Variables",cssVariablesText:"After the font is loaded, the design system automatically uses the CSS variable --ds-font-family defined in the rk-design-tokens package. You don't need to specify the font manually in your components."},icons:{title:"Using Icons",intro:"This library is designed to work seamlessly with the official icon set from NAV/Aksel.",installTitle:"Installation",importTitle:"Import and use",importText:"Icons are exported as named React components. Import only the icons you need (tree‑shakable):",accessibilityTitle:"Accessibility Guide",accessibilityItem1:"Icon + visible text: set aria-hidden on the icon so screen readers don't read it twice.",accessibilityItem2:"Icon-only triggers (e.g. a button): add a descriptive aria-label to the trigger, keep the icon aria-hidden.",accessibilityItem3:"Color: icons inherit currentColor; use the component's variant/color to control it (e.g. button variants, tag colors).",accessibilityItem4:`Size: set fontSize (e.g. fontSize="1.25rem") or inline style (e.g. style="{ fontSize: '1.25rem' }").`,performanceTitle:"Performance",performanceText:"Use named imports from @navikt/aksel-icons to keep package size down – unused icons are removed (tree-shaken) by modern bundlers."},contributing:{title:"Contributing to the Library",intro:"This guide provides a set of standards and best practices for creating new components. Following these guidelines ensures our component library remains consistent, accessible, and easy to maintain.",getStartedTitle:"Get Started (for contributors)",getStartedText:"Follow these steps to run the local development environment. All commands should be run from the root of the project.",principlesTitle:"Core Principles",principlesText:"Each component we build should follow these core principles:",principlesA11y:"Accessibility (A11y): Components must be usable by everyone, including people with disabilities. This means correct ARIA attributes, keyboard navigation, and semantic HTML.",principlesReuse:"Reusability: Components should be generic enough to be used in multiple contexts without modification.",principlesConsistency:"Consistency: Components should follow our established design tokens (colors, spacing, typography) and have a consistent API and structure.",principlesDocs:"Documentation: Each component must be documented in Storybook to make it discoverable and easy to use for other developers.",whenTitle:"When to create a new component",whenText:"Before you start coding, determine what type of component you need. Most of our needs fall into one of three categories:",wrappedSimpleTitle:"Wrapped Component (Simple):",wrappedSimpleWhat:"What it is: A component that directly wraps and re-exports a component from @digdir/designsystemet-react without modifications.",wrappedSimpleWhen:"When to use: When the basic Digdir component perfectly covers our needs, but we want to include it in our own library for a consistent import source.",wrappedSimpleExample:"Example: The Buttons component is a perfect example of this.",wrappedStyledTitle:"Wrapped Component (with style overrides):",wrappedStyledWhat:"What it is: A wrapped Digdir component where we use custom CSS to adjust the appearance to better fit Red Cross's specific design language.",wrappedStyledWhen:"When to use: When a Digdir component is functionally correct but needs visual adjustments (e.g. different icons, border-radius, padding).",wrappedStyledExample:"Example: The Alert component, which uses composes in CSS to inherit base styles and then apply its own overrides.",customTitle:"Custom Component (from scratch):",customWhat:"What it is: A completely new component built when no existing Digdir component covers our requirements.",customWhen:"When to use: For unique UI patterns or functionality not covered by the base library.",customExample:"Example: The DateInput component is a custom component with its own state, logic, and styling.",fileStructureTitle:"File structure for components",fileStructureText:"To maintain consistency, each new component should follow this file structure. Create a new folder under src/components/ with the component's PascalCase name.",codingGuidelinesTitle:"Coding Guidelines",componentLogicTitle:"1. Component Logic (MyNewComponent.tsx)",logicTypeScript:"TypeScript first: All components must be written in TypeScript. Define a Props interface for your component, extending from basic HTML element or Digdir component props if applicable.",logicForwardRef:"Forward Refs: Always use React.forwardRef to allow parent components to get a ref to the underlying DOM element.",logicA11y:"Accessibility is mandatory:",logicA11yItem1:"Use semantic HTML (<button>, <label>, <nav>).",logicA11yItem2:"Ensure all interactive elements can be focused and operated with keyboard.",logicA11yItem3:"Provide aria-label for buttons that only have icons or elements where the text label is not visible.",logicA11yItem4:"Use aria-invalid, aria-describedby, etc., to communicate state to assistive technologies.",logicControlled:"Controlled vs. Uncontrolled: If your component has state (like an input), it should support both controlled (value + onChange) and uncontrolled (defaultValue) patterns.",logicProps:"Props naming: Use data-* attributes for styling variants (e.g. data-size, data-color) to align with patterns in our existing components.",stylingTitle:"2. Styling (styles.module.css)",stylingModules:"CSS Modules: For custom components, all styles must be placed in a styles.module.css file. This scopes class names locally and prevents global style conflicts.",stylingTokens:"Design tokens: Always use our design tokens (var(--ds-...)) for colors, spacing, fonts, etc. Do not use hardcoded values (e.g. #FFF, 16px).",stylingOverride:"Overriding Wrapped Components: For wrapped components, use a standard CSS file. Use @layer and composes keywords to extend basic Digdir styles without unnecessarily increasing CSS specificity.",documentationTitle:"3. Documentation (MyNewComponent.stories.tsx)",docsStorybook:"Your Storybook file is the official documentation. It must be clear and comprehensive.",docsMeta:"meta Object: Define the component's title, component reference, and tags: ['autodocs'] to enable automatic documentation.",docsArgTypes:"argTypes: Document each prop. Provide a description, control type (e.g. select, boolean, text), and options if applicable. This drives the interactive controls in Storybook.",docsStories:"Create multiple Stories: Create a separate story for each key state and variant of your component (e.g. Default, Disabled, WithError, WithIcon).",processTitle:"Contribution Process",processPRTitle:"Create a Pull Request (PR):",processBranch:"Create a Branch: Pull the latest changes from the main branch and create a new feature branch: git checkout -b feat/my-new-component.",processDraft:"Open a Draft PR: As soon as you start, open a draft pull request on GitHub. This prevents duplicate work and lets others see what you're working on.",processCommit:"Commit your changes: While working, make small, logical commits.",processReview:'Ready for review: When development is complete and all automated checks pass, mark the PR as "Ready for review" and request a review from the design system maintainers.'},figmaMcp:{title:"Workflow: From Figma to Code with MCP",intro:"This guide describes how we use Model Context Protocol (MCP) to connect Figma directly to the development environment. This makes it possible to fetch design specifications, tokens, and structures automatically, validated against our design system.",part1Title:"Part 1: Figma MCP Server Setup",part1Intro:"This is done only once to activate the integration in Cursor/Windsurf.",part1Description:'For the AI to be able to "read" Figma files, we need to set up a local connection.',setupStep1Title:"1. Get Figma Access Token",setupStep1Item1:"Go to Figma -> Settings -> Personal Access Tokens.",setupStep1Item2:"Click Generate new token.",setupStep1Item3:'Name: E.g. "Cursor MCP".',setupStep1Item4:"Scopes: Select File content: Read and File metadata: Read.",setupStep1Item5:"Copy the token (you won't see it again).",setupStep2Title:"2. Configure in Cursor",setupStep2Item1:"Open settings in Cursor (Ctrl/Cmd + ,).",setupStep2Item2:"Go to Features -> MCP.",setupStep2Item3:"Click + Add New MCP Server.",setupStep2Item4:"Fill in the following:",setupStep2Item5:"Type: command",setupStep2Item6:"Name: figma",setupStep2Item7:"Command: npx -y @modelcontextprotocol/server-figma",setupStep2Item8:"Add Environment Variable (important!):",setupStep2Item9:"Key: FIGMA_ACCESS_TOKEN",setupStep2Item10:"Value: [Paste the token you copied in step 1]",setupStep2Item11:'When the light next to "figma" turns green, the tool is ready to use.',part2Title:"Part 2: Daily Workflow",step0Title:"Step 0: Indexing Documentation",step0Description:"Do this once per project to give the AI a complete overview of the design system.",step0Intro:"For Cursor to understand our specific tokens, component names, and guidelines, we need to let it read through the documentation in advance.",step0Item1:"Open Chat in Cursor (Cmd + L / Ctrl + L).",step0Item2:'Type @Docs in the text field and select "Add new doc" from the menu that appears.',step0Item3:"Paste the URL to the main page of the documentation: https://norwegianredcross.github.io/DesignSystem/",step0Item4:"Give it a name that's easy to remember, e.g. RedCross.",step0Item5:"Click Confirm.",step0WhatHappensTitle:"What happens now?",step0WhatHappensText:'Cursor will automatically "crawl" (read) through the main page and all subpages. It stores the information in a local database. This means you can later refer to @RedCross in the chat, and the AI will immediately know all color codes, spacing variables, and component rules without you needing to paste text manually. Note: This applies when you reference @RedCross in chat. If you use .cursorrules, you don’t need to attach @RedCross manually.',step1Description:"For best results, you should isolate the section you're working with.",step1Item1:"Select the frame (Frame), component, or group you want to implement.",step1Item2:"Right-click and select Copy link to selection (Shortcut: Ctrl + L).",step1Item3:"NB: Use this function instead of copying the URL from the browser.",step1ImageCaption:"",step2Title:"Step 2: Provide context (Two methods)",step2Description:"For the AI to follow our design system, it needs to know where the rules are. You can choose between manual or automated method.",step2AltATitle:"Alternative A: Manual context (Quick and easy)",step2AltADescription:"Use this for one-time cases or if you're testing new documentation sources. This must be done manually with every single prompt.",step2AltAItem1:"In Composer (Chat): Type @ and paste the URLs to the documentation. You must include:",step2AltAItem1Sub1:"@https://norwegianredcross.github.io/design-tokens/theme.css",step2AltAItem1Sub2:"@https://norwegianredcross.github.io/DesignSystem/storybook/metadata.json",step2AltAItem2:"Paste Figma link: Paste the link from step 1.",step2AltAImageCaption:"",step2AltBTitle:"Alternative B: Automated with .cursorrules (Recommended)",step2AltBDescription:"Use this to avoid attaching documentation every time. With a .cursorrules file in the project root, the AI always knows which rules apply.",step2AltBSetupTitle:"1. Setup (Done once per project):",step2AltBSetupText:"Create a file named .cursorrules in the project root folder and give context by pasting this:",step2AltBCodeBlock:`You are an expert Frontend Developer implementing designs from Figma.
+
+ALWAYS follow these rules:
+1. **Documentation:** Refer to the indexed design system documentation (@RedCross) for component usage, patterns, and guidelines.
+2. **Metadata:** Use component metadata from: https://norwegianredcross.github.io/DesignSystem/storybook/metadata.json
+3. **Tokens:** Always use CSS variables/tokens defined in: https://norwegianredcross.github.io/design-tokens/theme.css (e.g., var(--spacing-md)).
+4. **Figma MCP:** When a Figma link is provided, use the \`figma\` tool to inspect node properties.
+
+Note: Make sure you have indexed the documentation (Step 0) before using these rules. Reference @RedCross in chat when you need design system context.`,step2AltBUsageTitle:"2. In daily use:",step2AltBUsageText:"Now you only need to paste the Figma link in the chat. The AI will automatically check .cursorrules and understand that it should fetch design rules from the documentation you defined.",step3Title:"Step 3: Prompt",step3Description:"Give an instruction that connects the design to the codebase. You can use this template:",step3Prompt:`"Using the design at this Figma link and the context from the provided documentation/rules:
+
+Create a React component for this section.
+
+Strictly use tokens found in the documentation (colors, spacing) - no magic numbers.
+
+Map design elements to our existing components where possible (e.g. Buttons, Headings)."`,step4Title:"Step 4: Generation and Review",step4Item1:"The AI now uses MCP to read the node data and generates a code proposal.",step4ReviewTitle:"Review:",step4ReviewItem1:'Check "Diff View" in Cursor.',step4ReviewItem2:"Are tokens used correctly? (e.g. var(--spacing-md)).",step4ReviewItem3:"Is the semantics good?",step4Apply:'Apply: Click "Apply" to insert the code into your file.',proTipsTitle:"Tips for success",proTip1:`Save Docs as favorites: In Cursor under the "Docs" tab, you can index norwegianredcross.github.io/.... Then you can use @RedCross as a shortcut in the chat if you don't use .cursorrules.`,proTip2:'Missing Auto Layout? If the Figma node is missing Auto Layout, the AI may struggle with positioning. Mention in the prompt: "Infer layout logic based on visual proximity if Auto Layout is missing."'},metadataFiles:{title:"Metadata Files",intro:"To keep track of components and their connection to Figma, we use metadata files.",whatTitle:"What do they contain?",whatText:"Metadata files (such as `metadata.json`) are the backbone of our documentation. They define exactly which props each component supports, data types, default values, and descriptions. This allows us to automatically generate documentation and ensure consistency between design and code.",whatItem1:'componentName: The name of the component (e.g. "Button").',whatItem2:'importPath: Where the component is imported from (e.g. "rk-designsystem").',whatItem3:"props: A list of all available props, including:",whatItem3Sub1:'name: The name of the prop (e.g. "variant", "disabled").',whatItem3Sub2:'type: The data type (e.g. "boolean", "enum", "string").',whatItem3Sub3:"description: Explanation of what the prop does.",whatItem3Sub4:"defaultValue: The default value if the prop is not set.",whatItem3Sub5:"required: Whether the prop is required or optional.",howTitle:"How to use them?",howText:"When you create a new component, you should also update the metadata file so that automated tools and documentation pages (like this one) can find and display the correct information."},componentCreation:{title:"Component Creation with MCP and Design Tokens",intro:"We use Model Context Protocol (MCP) and AI assistance to translate Figma designs directly into production-ready React components. This flow ensures that new components follow the design system, use CSS Modules, and reuse existing code.",processTitle:"Process",processText:'When you send a prompt (e.g. "make a version where you can have 4 cards below [url]"), Figma MCP handles the following steps automatically in the background:',step1Title:"1. Identification and Metadata",step1Item1:'Identify source: MCP reads the URL and finds the Node ID for the component in Figma (e.g. 1:3539 for "Hero 3").',step1Item2:"Fetch dimensions: MCP automatically fetches information about the node's size, structure, and positioning to set the framework for the layout.",step2Title:"2. Fetching Design Context and Code Draft",step2Item1:"Generate draft: MCP analyzes the Figma node and generates a first draft of React code.",step2Item2:"Automatic recognition: The tool identifies whether the design contains elements that already exist in our library.",step2Item3:'Example: If the Figma node contains a button, MCP will suggest `import Button from "src/components/Button.tsx"` instead of generating new HTML for the button.',step2Item4:"Cleaning: The system filters out unnecessary wrappers and absolute paths before presenting the code.",step3Title:"3. Token Mapping and Variable Definitions",step3Item1:"Analyze tokens: MCP automatically analyzes which design tokens are used in the Figma file (via `get_variable_defs` logic in the background).",step3Item2:"Mapping to CSS: It translates Figma values to our defined CSS variables.",step3Item3:'Figma: "color/main/base-default": "#d52b1e"',step3Item4:"CSS: Mapped to `var(--ds-color-primary-color-red-base-default)` (or equivalent from theme.css).",step3Item5:"Typography: Font definitions are automatically translated to correct typography classes.",step4Title:"4. Automatic Connection to Existing Components",step4Item1:"Verification: Figma MCP checks the design against metadata.json and our repository (via `get_code_connect_map` logic in the background).",step4Item2:"Implementation: This ensures that the generated code automatically uses rk-designsystem components where possible.",step4Item3:"Example: It sees that an element in Figma corresponds to `src/components/Button.tsx` and generates the code with the correct component import.",step5Title:"5. Structure and Completion",step5Text:"Result: Based on the analysis above, the AI produces the finished files you need:",step5Item1:"`index.ts` (Export)",step5Item2:"`[ComponentName].tsx` (Logic, prop definitions from metadata.json)",step5Item3:"`[ComponentName].module.css` (Styling based on tokens)",step5Item4:"`[ComponentName].stories.tsx` (Documentation and variants)",step5Variant:'Variant handling: Logic for variants (e.g. "stacked" vs "side-by-side") is implemented based on your prompt and the Figma layout.',automationTitle:"Automation vs. Manual Quality Assurance",automationText1:"Although MCP tools automate much of the coding by fetching structures and tokens directly from Figma, it is not a 100% seamless transfer. The generated code serves as a solid foundation, but a developer must always review, quality-assure, and adapt the logic.",automationText2:"The tools remove the repetitive manual work of setup and styling, allowing the developer to focus on functionality, accessibility, and edge-cases. It is an efficiency process, not a replacement for developer expertise.",benefitsTitle:"Benefits of this flow",benefit1:'Precision: Automatic fetching of variables prevents "magic numbers" and hardcoded hex codes.',benefit2:"Reuse: Automatic check against existing components prevents code duplication.",benefit3:"Efficiency: You only need to provide a URL and an intention; MCP handles the technical lookups.",benefit4:"Maintenance: The connection to `theme.css` and `metadata.json` makes components resilient to updates in the design system."}},design:{sidebar:{forDesigners:"For Designers",getStarted:"Get Started",colors:"Colors",contribute:"Contribute Design",designElements:"Design Elements",designTokens:"Design Tokens",shadows:"Shadows",sizes:"Sizes and Spacing",typography:"Typography",figmaConnect:"Figma Connection",startup:"Startup",newComponent:"Create New Component",examples:"Practical Examples",tokenStudio:"Token Studio",colorSystem:"Setup Your Color System",themeBuilder:"Theme Generator",useColors:"Use Generated Colors",proposeDesign:"Propose New Design",whatAreTokens:"What are Design Tokens",tokensInFigma:"Design Tokens in Figma",colorStructure:"Naming Structure",colorOverview:"Overview and Explanation",colorTokens:"Color Tokens",shadowUsage:"Shadow Usage",shadowTokens:"Shadow Tokens",componentSizes:"Component Sizes",sizeTokens:"Size Tokens",fontFamily:"Font Family",typoTokens:"Typography Tokens"},intro:{title:"Design in Red Cross",welcome:"Welcome to the design documentation.",getStarted:"Get Started",goToGuide:"Go to guide",colors:"Colors",seeColors:"See colors"},tokens:{whatIsTitle:"What are Design Tokens",whatIsText1:'"Design Tokens" control how components look regarding colors, typography, sizes, spacing, shapes etc. Design tokens ensure both designers and developers work by the same rules and guidelines.',whatIsText2:"Some variables are theme-based, meaning they are based on your brand with your chosen colors and preferences. We are working on a theme builder to make it easier for you to customize styles.",whatIsText3:"Design Tokens are flexible variables that can be used independently of technology or design tools.",figmaTitle:"Design tokens in Figma",figmaText1:'We use the "Tokens Studio" Figma plugin as it allows us to manage more styles and properties than Figma natively can.',figmaText2:"The plugin aims to be W3C-compatible and follows the standard established by the W3C Design Tokens Community Group. Token values are thus not locked to a tool - the JSON file can be moved to other tools if needed.",themesTitle:"Multiple sets and themes",themesText:"Using variables and tokens makes it possible to have one design system with different identities. We can create a component in Figma once and style it many times - With one click we can switch themes to activate a different color palette or sizing set. By dividing tokens into sets and themes, we can offer advanced forms of reuse.",themesCaption:'The video above shows that when the "Tilsynet" set is enabled, both the colors used in the file and the available styles in the right panel are replaced.'},colorStructure:{title:"Naming Structure",intro:"The color system consists of global colors that refer to what the color is (e.g. red-1) and a semantic level that describes what the color should be used for (e.g. Text.Danger).",structureTitle:"Naming Structure",structureText1:"Colors in the Design System are structured with semantic meaning. This means they are defined by function and use, not just by how they look. This makes it easier to choose the right color because you don't have to evaluate the actual color tone and can focus on what the color should convey instead.",structureText2:"Color names in the Design System are divided into 3 parts: Color scale name, group (usage area) and variant. These parts describe how colors are built and how they should be used.",structureCaption:"Shows the division of color names into 3 parts",nameLabel:"Name:",nameText:"The first part and the name of the color scale. By default, the Design System comes with the color scales Success, Danger, Warning, Info and Neutral. More scales can be added using the Theme Builder.",groupLabel:"Group:",groupText:"Each color scale is divided into the groups Background, Surface, Border, Text and Base. These groups describe the usage areas of the colors. The Text group, for example, should be used on text and icons.",groupsCaption:"Shows a color scale and the 5 groups that colors are divided into.",variantLabel:"Variant:",variantText:"Within each group there are variants that describe how colors look or should be used. Tinted, for example, means the color has a hint of color in it, while Hover means the color is intended for an interactive state."},colorOverview:{title:"Overview and Explanation of Colors",intro:"Each color scale consists of a total of 16 colors, designed to cover different needs in the design. Below you will find an overview of the different colors and their intended uses.",semanticCaption:"Shows how semantic colors can be used in design. The example uses four different color scales: Danger, Neutral and two blue scales",tableName:"Name",tableUsage:"Usage",backgroundDefault:"Standard background color",backgroundTinted:"Background with a hint of color",surfaceDefault:"Standard color for surfaces / components",surfaceTinted:"Surfaces / components with a hint of color",surfaceHover:"Hover color for surfaces / components",surfaceActive:"Active color for surfaces / components",borderSubtle:"Border color with low contrast for decorative use (dividers)",borderDefault:"Standard border color for form components and meaningful elements",borderStrong:"Border color with high contrast for extra visibility",textSubtle:"Text and icon color with lower contrast",textDefault:"Text and icon color with high contrast and good visibility",baseDefault:"Standard color for solid backgrounds",baseHover:"Hover color for solid backgrounds",baseActive:"Active color for solid backgrounds",baseContrastSubtle:"Color with good contrast against Base-default",baseContrastDefault:"Color with good contrast against Base-default and Base-hover",backgroundTitle:"Background",backgroundText:"Background colors are used to color large surfaces and are often the bottommost layer on a website. It is common to use these colors on the body element.",backgroundDefaultDesc:"Background-default is the lightest and most neutral background color",backgroundTintedDesc:"Background-tinted gets a hint of color and can be used to create variation in the background layer",surfaceTitle:"Surface",surfaceText:"Surface colors are used to color elements that lie over background colors, such as panels or cards. These colors act as foreground colors and help create depth in the design by separating elements from the background. In dark mode, these four colors gradually become lighter, with Surface-active being the lightest.",surfaceDefaultDesc:"Surface-default is completely white in light mode and is used as the standard background color on elements.",surfaceTintedDesc:"Surface-tinted gets a hint of color and can be used to separate elements from the background.",surfaceHoverDesc:"Surface-hover can be used for hover states of elements or to create visual hierarchies in the Surface layer when combined with Surface-tinted and Surface-active.",surfaceActiveDesc:"Surface-active can be used for active states of elements or to enhance the hierarchy in the Surface layer together with Surface-tinted and Surface-hover.",surfaceTintedCaption:"Shows how Surface-tinted looks for 7 color scales generated with the Theme Builder.",borderTitle:"Border",borderText:"Border colors are used to color borders (strokes) of elements.",borderSubtleDesc:"Border-subtle has low contrast against background and surface colors and should only be used for decorative purposes. Common uses are dividers and decorative borders. The color should not be the only visual indicator that an element is interactive.",borderDefaultDesc:"Border-default is used on form components or on other meaningful borders. The color has good contrast (over 3:1) against all background colors, Surface-default and Surface-tinted.",borderStrongDesc:"Border-strong has good contrast (over 3:1) against all background and surface colors and can be used on borders to make elements extra visible.",bordersCaption:"First row shows colors with Border-subtle, while the second row shows Border-default.",textTitle:"Text",textText:"Text colors are used on text and icons.",textSubtleDesc:"Text-subtle is a light text color that can be used to create variation in typography or to indicate hierarchical levels of importance. It also tries to preserve as much of the color tone from the original color chosen in the Theme Builder. The color has good contrast (4.5:1) against all background colors, Surface-default and Surface-tinted.",textDefaultDesc:"Text-default is a high contrast text color, optimal for readability. It should be used on main content and primary text on a page. This color in the Neutral variant can be a good color to use on most of the text. The color has good contrast (4.5:1) against all background and surface colors.",textColorsCaption:"Shows how Text-default and Text-subtle look for 8 different color scales generated with the Theme Builder.",baseTitle:"Base",baseText1:"Base colors are used to color solid backgrounds, such as buttons and other interactive elements. The colors help direct attention to important design elements and establish a visual hierarchy relative to less prominent elements. At the same time, they create contrast against background and surface colors, which enhances readability and visual clarity.",baseText2:"Base-hover and Base-active colors are generated from the lightness or darkness of the Base-default color from the same color scale to create smooth visual transitions between states. Contrast colors become either white or black depending on the lightness of the Base-default color to ensure good contrast and readability.",baseDefaultDesc:"Base-default can be used to color solid backgrounds of elements. The color (hex code) chosen in the theme builder is placed under Base-default.",baseHoverDesc:"Base-hover can be used for hover states of solid elements or to create visual hierarchies in the Base layer when combined with Base-default and Base-active.",baseActiveDesc:"Base-active can be used for active states of solid elements or to enhance the hierarchy in the Base layer together with Base-default and Base-hover.",baseContrastSubtleDesc:"Base-contrast-subtle has good contrast (4.5:1) against the Base-default color from the same color scale and can safely be used as a text color against this.",baseContrastDefaultDesc:"Base-contrast-default has good contrast (4.5:1) against Base-default and Base-hover colors from the same color scale, and can safely be used as a text color against these.",baseColorsCaption:"Shows boxes with Base-default as background and Base-contrast-default as text color."},colorTokens:{title:"Color Tokens",intro:"The colors below are examples from a random theme. Use the theme builder to generate your own colors and names.",lightCaption:"A randomly generated color system from Designsystemet.no",darkCaption:"A randomly generated color system from Designsystemet.no, dark mode"},shadowUsage:{title:"Shadow Usage in Design",intro1:"Shadows should be used consciously and consistently as they express that something lies over something else in the solution.",intro2:"Shadows can help visually impaired users identify components. Using shadows and outlines makes it easier and faster to find a component when scanning pages. (Research: Material Design)",strengthsTitle:"Strengths",strengthsText:"We have different strengths on the shadows, from xsmall to xlarge. The different strengths are used to suggest the height of the surface. Surfaces at higher heights have larger shadows, while those at lower heights should have smaller shadows. Shadows should create a hierarchy so that what lies over or under something else stands out more clearly."},shadowTokens:{title:"Shadow Tokens",tokensTitle:"Tokens",tokensText:"Make sure you have light mode activated to see the shadows. Shadows are not intended for use in dark mode, as they are based on darker color tones. To create hierarchy and contrast in dark mode, it is better to use other means such as light borders.",exampleTitle:"Example",exampleText:"Popover is a component that overlays other content. This is made clear by using a medium shadow.",exampleCaption:"The Popover component covers over the other content."},componentSizes:{title:"Component Sizes",intro:"Most components in the design system are available in three recommended sizes: Small, Medium and Large (sm, md, lg). These are developed to adapt to different needs across screen sizes and use cases.",sizesCaption:"Sizes for components in the Design System.",smallTitle:"Small",smallText:"Small is ideal for compact interfaces where space utilization is important, such as on mobile devices, expert tools or administration interfaces. It is recommended to use this size on websites with a base font of 16px.",mediumTitle:"Medium",mediumText:"Medium works as standard for most common use cases, and is recommended to use together with a base font of 18px. The size provides a good balance between readability and space utilization and is particularly well suited for desktop interfaces and larger display surfaces.",largeTitle:"Large",largeText:"Large provides increased readability and clarity. It can be used in desktop interfaces or when visibility and accessibility are important. It can also be used in a limited context on the page to highlight central elements. It is recommended to use the size together with a base font of 21px.",mediumSizeCaption:"Many of the medium components have a fixed height of 48px.",harmonyText:"Components within a certain size are designed to work together. For example, many medium components have a height of 48px and a base font of 18px, which ensures a harmonious visual balance when placed next to each other.",combinedCaption:"Example where Medium and Large components are used together.",consistencyText:"To maintain a cohesive and clear design, it is recommended to use fixed sizes within a given website or context. Many different combinations of sizes can lead to a messy and unclear design.",combinationText:"In some cases, components in different sizes can be combined to create better visual hierarchies and usability. In the example above, the search field section is larger and more prominent than the components in the header, because the search function is a central part of the page. The increased size makes it more visible and easily accessible to the user."},sizeTokens:{title:"Size Tokens",tokensTitle:"Tokens",tokensText:"Make sure you have light mode activated to see the shadows. Shadows are not intended for use in dark mode, as they are based on darker color tones. To create hierarchy and contrast in dark mode, it is better to use other means such as light borders.",exampleTitle:"Example",exampleText:"Popover is a component that overlays other content. This is made clear by using a medium shadow."},fontFamily:{title:"Font Family",intro:"To present text correctly, styles have been created that have different combinations of size, font weight and line height. A set of typography components has also been created that encapsulate these styles, so they can easily be used in different contexts. Description of how typography components are used can be found in the component article Typography."},typoTokens:{title:"Typography Tokens",comingSoon:"Content coming soon."},figmaConnect:{title:"Get Started with Design System (Figma)",intro:"This guide helps you get started designing using the shared design system in Figma. You'll get an introduction to how to use components, tokens, and styles from the central library.",prerequisites:"Prerequisites",prerequisitesIntro:"Before you start, you need:",figmaAccount:"Figma - An active Figma account (free or paid)",access:"Access - Access to Red Cross's Figma library (contact team lead if you lack access)",createFile:"Create or open a working file",createFileText:"Create a new Figma file, or open an existing project file where you want to use the design system.",activateLibraries:"Activate design system libraries",goToAssets:"Go to the Assets panel in Figma",openLibrary:"Click the book icon (📚) at the top right to open Team Library",enableLibraries:"Enable the following libraries:",libraryComponent:"Design System – components",libraryIcons:"Aksel icon library",libraryActivationCaption:"Shows activation of libraries in Figma",insertComponents:"Insert components from the library",goToAssetsPanel:"Go to the Assets panel",useSearch:"Use the search field to quickly find components, e.g.:",dragComponent:"Drag the component into the artboard",customizeComponent:"🔄 Customize components by using props and variants in the right panel. This provides flexibility without breaking the connection to the main component.",tips:"Tips and best practices",tipsText:'Avoid "detaching" components. To ensure reuse and future updates, you should not detach components. Instead, use variants and properties (props) to customize appearance and function.'},startup:{title:"Startup: Workspace Setup",step1Title:"Step 1: Start with a new frame",step1Text1:"Create a new frame in Figma with the desired size.",step1Text2:"In this case, we use 1728px in width.",step2Title:"Step 2: Add autolayout",step2Text:"Add autolayout to the frame.",step3Title:"Step 3: Add tokens to the frame",step3Text:"Add the following tokens:",step3Token1:"Spacing: 0",step3Token2:"Padding left right: 0",step3Token3:"Padding top bottom: 0",step3Token4:"Background color: color/main/background-default",step4Title:"Step 4: Add heading and footer",step4Text:"Add header and footer from the components library. Make sure Auto Layout direction is set to vertical.",step5Title:"Step 5: Create a section",step5Text:'Create a new frame that you call "section".',step6Title:"Step 6: Add autolayout",step6Text:"Add autolayout to the new section.",step7Title:"Step 7: Add section to main frame",step7Text:'Add the section to the main frame and make sure the section is set to "fill container".',step8Title:"Step 8: Add tokens (side margins and background color)",step8Text:"Select the section and add the following tokens:",step8Token1:"Spacing: size/6",step8Token2:"Padding left right: size/30",step8Token3:"Padding top bottom: size/22",step8Token4:"Background color: color/main/background-default",step8Note:"This ensures that your page is connected to the tokens in the code and makes it easier for developers to develop what you design since these are linked via GitHub.",step9Title:"Step 9: Test the section",step9Text:"Add one component from the library. In our case, we use the card component.",step10Title:"Step 10: Create a nested layout",step10Text:"Add multiple cards and combine them using an auto layout. To do this easily, select all cards and press shift + a.",step11Title:"Step 11: Set up nested layout",step11Text1:"Select all cards in the section and make sure they are set to fill container.",step11Text2:"We do this so that the cards take equal space and stay within the boundaries of the nested layout.",step12Title:"Step 12: Add spacing tokens",step12Text:"Go one level out and select the container of the cards. Make sure spacing is set to size/6.",step13Title:"Step 13: Add spacing in section",step13Text:"Add spacing between the card container and the heading by selecting the section and adding a spacing of size/6.",step14Title:"Step 14: Reuse",step14Text:"Duplicate the section and familiarize yourself with how auto-layout and tokens work. Below you can see how I easily created a table by replacing the cards with a tablecolumn component and setting spacing to size/0."},newComponent:{title:"Create New Components",intro:"This page explains how to build new components in the design system. The goal is to ensure that components are consistent, scalable, accessible, and easy to use in both design and development.",tokensTitle:"Tokens as Foundation",tokensText:"All components should be built with tokens. Tokens are the fundamental values in the system and make it possible to update or customize design without changing each individual component.",tokensAutolayout:"Autolayout: Always use Autolayout in Figma. It provides production-ready files and mirrors how code is structured.",tokensSize:"Size tokens: Use tokens for spacing, padding, and dimensions. Avoid manual values.",tokensSemantic:"Semantic tokens: Use semantic tokens for colors, typography, and spacing. This ensures support for light and dark mode, different sizes and themes – and makes components directly connected to code.",atomicTitle:"Building with Atomic Design",atomicText:"Components are assembled hierarchically according to atomic design:",atomicAtoms:"Atoms: the smallest building blocks (e.g. button, icon, input field).",atomicMolecules:"Molecules: composite atoms (e.g. search field = input + button).",atomicOrganisms:"Organisms: larger wholes made of molecules (e.g. form or navigation).",atomicPrinciple:"This principle makes components modular and reusable.",calendarTitle:"Example Calendar Module",calendarStep1Title:"Step 1: Start at atomic level",calendarStep1Text:"Imagine the atoms needed when creating a calendar. For example, it could be:",calendarStep1TextLabel:"Text:",calendarStep1TextItems:'Month/year (e.g. "August 2025"), Day names (Mon, Tue, Wed …), Date number (1, 2, 3 …)',calendarStep1IconLabel:"Icons:",calendarStep1IconItems:`Arrow buttons for navigation (previous/next month), Possibly icon for "today's date" or "reset"`,calendarStep1ButtonLabel:"Buttons:",calendarStep1ButtonItems:"Navigation buttons (previous/next month), Date button (each date is an interactive button)",calendarStep1Note:"We know we already have icon-button so we can easily get it from the component library.",calendarStep2Title:"Step 2: Start building out your atoms",calendarStep2Text1:"In our case, we will need a cell component that shows the day names and date numbers in a month. Here we can use the same atom for day names and date numbers.",calendarStep2Text2:'We create two elements that we call "cell" and add autolayout and apply token values.',calendarStep3Title:"Step 3: Create the variants you need",calendarStep3Text:"In our case, we will need a cell component that shows the day names and days in a month.",calendarStep4Title:"Step 4: Assemble the molecule",calendarStep5Title:"Step 5: Build out the organism",calendarStep5Text:"Here we combine the molecules into a table.",calendarStep6Title:"Step 6: Add correct states",calendarStep7Title:"Step 7: Complete the organism with existing elements",calendarStep8Title:"Step 8: Build out with more variants if it makes sense",variantsTitle:"Variants and States",variantsText:"All components should have defined variants and interaction states:",variantsFigma:"Use Figma Variants instead of duplication.",variantsStates:"Minimum states: default, hover, pressed, disabled, focus. Varies by context.",variantsNew:"Create a new variant when it's a customization of the same component, and a new component only when the function is unique.",accessibilityTitle:"Accessibility",accessibilityText:"Accessibility should always be maintained:",accessibilityWCAG:"Follow WCAG contrast requirements (minimum 4.5:1 for text).",accessibilityTouch:"Interactive surfaces should have at least 44 × 44 px touch target.",accessibilityFocus:"Focus state should always be visible, even without hover.",responsiveTitle:"Responsiveness",responsiveText:"Components should work across screen sizes and layouts:",responsiveTokens:"Use size tokens for spacing and dimensions.",responsiveSizes:"Support small, medium, and large layout variants.",responsiveBreak:"Ensure components break or stack logically in smaller formats.",reuseTitle:"Reuse in Context",reuseText:"A component should always be usable in different contexts. Therefore show examples in the documentation, such as:",reuseExample1:"button in a form",reuseExample2:"card in a grid",reuseExample3:"input field in a dialog box"},examples:{title:"Practical Examples",example1Title:"Example 1: Registration Form",example1Step1Title:"Step 1: Start with a new frame",example1Step1Text:"Create a new frame in Figma with the desired size. Use design tokens to set the frame color if necessary (e.g. background-default).",example1Step2Title:"Step 2: Add heading",example1Step2Text:'Use the Heading component to add a heading, such as "Sign up for our event". Adjust the size with the size mode if necessary.',example1Step3Title:"Step 3: Add text fields for name and email",example1Step3Text:'Insert two Text Input components. The first for "Full name" and the second for "Email address". Make sure to use the placeholder mode for instructions in the text fields.',example1Step4Title:"Step 4: Add a dropdown for event selection",example1Step4Text:"Use the Multisuggestion component to let the user choose between different events. Add necessary options in the dropdown menu.",example1Step5Title:"Step 5: Add a send button",example1Step5Text:"Insert a Button component and customize the color by using the color mode if the button should stand out. Add icon if desired.",example1NoteTitle:"Note!",example1NoteText:"Use color and size tokens in frames around components to ensure all modes work as they should.",example2Title:"Example 2: Article Page",example2Step1Title:"Step 1: Create a new frame",example2Step1Text:"Start by creating a new vertical frame in Figma with the desired width (e.g. 8- or 12-column grid). Set background color using design tokens (e.g. background-color: var(--color-background-light)).",example2Step2Title:"Step 2: Add a main heading",example2Step2Text:"Use the Heading component to add the article title. Adjust the size with size mode (e.g. heading-xl or heading-lg).",example2Step3Title:"Step 3: Add lead",example2Step3Text:"Use the Text component in body-large style to write a short lead that summarizes the article. Place this right under the heading, with sufficient spacing.",example2Step4Title:"Step 4: Insert main content with text blocks",example2Step4Text:"Use Text components in body-default or body-large to build out the body text. Divide the text into clear paragraphs and add subheadings with the Heading component in smaller size (heading-md or heading-sm).",example2Step5Title:"Step 5: Add an image to the article",example2Step5Text1:"Use the Image component to place an illustration or article image centered in the text. Use the size mode if you need to change size (e.g. medium or full-width).",example2Step5Text2:"Currently we have no Image component so we use a frame instead",example2Step6Title:"Step 6: Add links in the text",example2Step6Text:"Use the Link component where there is a need for hyperlinks to related articles, documents, or external sources.",example2Step7Title:"Step 7: End with related articles or sharing",example2Step7Text:'Use Card components in a grid layout to show related articles. Each card should contain image, title, and a "Read more" link. Alternatively, you can add Share components for social media at the bottom.',example3Title:"Example 3: Planning Tool",example3Step1Title:"Step 1: Create a frame",example3Step1Text:"Start by creating a new vertical frame in Figma, with the desired width that fits the layout for your activity calendar (e.g. 12-column grid). Set the background color using design tokens (e.g. background-color: var(--color-background-light)).",example3Step2Title:"Step 2: Add a main heading",example3Step2Text:'Use the Heading component to add the title "Activity Calendar". Adjust the size with size mode that fits (e.g. heading-xl or heading-lg).',example3Step3Title:"Step 3: Add a short description",example3Step3Text:"Use the Text component in body-large style to write a short description that explains the purpose of the calendar. Place this right under the main heading, with sufficient spacing to ensure readability.",example3Step4Title:"Step 4: Insert calendar overview",example3Step4Text:"Use a Table component to create an overview of the month's activities. Make sure each row represents a day and includes columns for date, activity, time, and location. Adjust the table size as needed.",example3Step5Title:"Step 5: Add detailed activity cards",example3Step5Text:`Use Card components to show detailed descriptions of each activity. Each card should contain the activity's name, description, time, location, and a "More info" button that can lead to a detailed page about the activity.`,example3Step6Title:"Step 6: Insert images for each activity",example3Step6Text:"Use the Image component within each activity card to include relevant images. Use the size mode to adapt the images to the cards (e.g. medium or full-width).",example3Step7Title:"Step 7: Add a filter or search function",example3Step7Text:"Use the Search component to add a search function at the top of the page, so users can easily find activities based on name, date, or category.",example3Step8Title:'Step 8: Include an "Add to calendar" function',example3Step8Text:"Use Button components to offer a function where users can add activities to their personal calendar. Place this button near the activity details.",example3Step9Title:"Step 9: Add links and navigation",example3Step9Text:"Use Link components to add hyperlinks to related activities or external resources, such as tickets or more information. Ensure clear contrast and underlining according to design rules.",example3Step10Title:"Step 10: End with social sharing options",example3Step10Text:"Use Share components for social media at the bottom of the page, so users can share interesting activities with friends and family.",example3Step11Title:"Step 11: Adapt for mobile view",example3Step11Text:"Ensure the layout is responsive. Use layout grid and auto layout to ensure text, images, and cards flow correctly on small screens. Test the design on different screen sizes to ensure optimal user experience."},tokenStudio:{title:"Get Started with Token Studio and GitHub Sync",intro:"This guide shows how to connect Token Studio in Figma to a GitHub repository to keep design tokens synchronized across the team.",prerequisites:"Prerequisites",prerequisitesIntro:"Before setting up synchronization, you need:",figmaAccount:"Figma - A Figma account with Professional plan or higher",tokenStudioAccount:"Token Studio - A Token Studio account with Premium subscription",generateToken:"Generate a GitHub Fine-grained access token",goToGithub:"Go to: Github → Settings → Developer settings → Personal access tokens → Tokens (fine-grained)",clickGenerate:"Click Generate new token",fillOut:"Fill out the following:",tokenName:"Name:",tokenNameExample:"E.g. Red Cross Token",expiration:"Expiration date:",expirationText:"set as desired",generateAndCopy:"Click Generate token and copy it safely (not stored by GitHub afterwards)",configureSync:"Configure GitHub sync in Token Studio",openPlugin:"Open the Token Studio plugin in Figma",goToSettings:"Go to: Settings → Sync providers → Add new → GitHub",fillIn:"Fill in the following:",syncName:"Name:",syncNameExample:"e.g. Red Cross Tokens",personalToken:"Personal Access Token:",personalTokenText:"paste the token from GitHub",repository:"Repository:",repositoryText:"norwegianredcross/DesignSystem",branch:"Branch:",branchText:"main",storageLocation:"Token Storage Location:",storageLocationText:"design-tokens",repoAccess:"Repository access: choose All repositories or specific repo",repoPermissions:"Repository permissions → Contents: choose Read & Write",setupCaption:"Configure GitHub sync",performSync:"Perform first synchronization",afterSave:"After saving the settings, the plugin will show a modal:",ifEmpty:"If the repo is empty → choose Push",ifExists:"If tokens already exist → choose Pull",chooseAction:"Choose action based on the situation.",syncCaption:"Perform first synchronization",workflow:"Ongoing workflow: Push and Pull",pushText:"Push when you make changes to tokens in Figma → enter commit message and review changes before optionally opening a Pull Request.",pullText:"Pull to fetch updates from GitHub to Figma → you get the opportunity to review and approve before changes are imported.",tips:"Tips and best practices",tip1:"Store the token securely – do not paste it into public documents.",tip2:"Document your settings (name, branch, path etc.) for easier setup later.",tip3:"Sync often to ensure consistency between design and development."},colorSystem:{title:"Set Up Your Own Color System",intro1:"With a well-thought-out color system, we can ensure that text always has good enough contrast against our background colors and that there are enough different colors for all states.",intro2:"A brand guide often contains only a set of primary and secondary colors in a few different color tones. Creating a digital product with only these colors alone is difficult. To ensure correct contrast and correct colors for different states, we depend on defining more variations of the brand colors. Just the button component consists of 6 different blue colors:",buttonCaption:"As you can see in the example, we need 6 different color variations just for the Button component",systemText:`The color system is structured to support multi-branding and different modes (dark mode, contrast mode, etc.), while maintaining contrast requirements. We have been inspired by USWDS's "magic numbers" to ensure accessible color combinations from any color palette. We have also been inspired by Radix's color system with clear intentions for the different colors. To ensure that an organization can use its actual brand color, we have chosen to combine two approaches into a completely new system.`},themeBuilder:{title:"Design System Theme Generator",intro:"To generate a working scale, you can use the Design System's theme generator. All you need to do is paste the hex code of your brand's accent color and other profile colors.",generatorLink:"https://theme.designsystemet.no/no",caption:"The color system uses the brand color to generate multiple color variants, so we can ensure good contrast between text and background colors.",systemText:"The theme generator is based on a color system that ensures both brand colors are maintained and contrast requirements are met through the linear colors generated from the brand color. Colors calculated for text will therefore always have good enough contrast against background colors.",examplesTitle:"Examples",example1:"Text-default always has good enough contrast against all background and surface colors.",example2:"Text-subtle always has good enough contrast against all background colors and surface-default.",appliesText:"This will apply regardless of what you have chosen as the base color.",baseText:"The Base-default color will always be the same as the color you have chosen. This is to maintain your brand as best as possible. You must therefore ensure that the color you choose meets the contrast requirements in relation to where it will be used. The Design System's theme generator will inform you of any contrast violations."},useColors:{title:"Use Your Generated Colors",intro:"Once you have generated the scales, you can use the new color codes in the Design System, so that all components follow your profile."},proposeDesign:{title:"Propose New Design or Improvements",intro:"We appreciate your help in improving components and design in Figma. The best solutions come through collaboration.",newComponent:"New Component",newComponentText1:"If you want to propose a new component, we appreciate it being registered in Github.",newComponentText2:"When a new component is proposed, we must evaluate whether it is valuable enough to be part of the design system. We do not want to end up with hundreds of components with small differences, as we risk unwanted complexity, maintenance, and design and technical debt.",newComponentText3:"For new components that are included, we must:",consider1:"Identify and explore similar needs among other product teams and organizations. How many products/agencies will need it?",consider2:"Evaluate the problem the component should solve and the value this provides.",consider3:"Consider whether it can be made flexible and reusable enough.",consider4:"Consider whether it is in line with design principles and whether it fits into the whole",reportTitle:"Report errors or shortcomings in a component in Figma",reportText:"If you have found a weakness with any of the existing components in Figma, we appreciate if you either leave a comment in Figma together with the relevant component, or create a bug report in Github that explains the error, or a feature request that explains the desired additional functionality.",githubLink:"https://github.com/norwegianredcross/DesignSystem",githubIssuesLink:"https://github.com/norwegianredcross/DesignSystem/issues"}},footer:{shortcuts:"Shortcuts",shortcutsLinks:{services:"Services",volunteer:"Become a volunteer",ourWork:"Our Work",about:"About Red Cross",support:"Support the work",contact:"Contact us"},contact:{visitingAddress:"Visiting address",organizationNumber:"Organization number",email:"Email"},copyright:"Red Cross",legal:{privacy:"Privacy",press:"For press",procurement:"Procurement rules",whistleblowing:"Whistleblowing/Misconduct"}}}},St=C.createContext(void 0),Do=({children:t})=>{const[e,n]=C.useState("NO"),s=a=>{const i=a.split(".");let r=Co[e];for(const d of i){if(r[d]===void 0)return console.warn(`Translation missing for key: ${a} in language: ${e}`),a;r=r[d]}return r};return o.jsx(St.Provider,{value:{language:e,setLanguage:n,t:s},children:t})},wt=()=>{const t=C.useContext(St);if(t===void 0)throw new Error("useLanguage must be used within a LanguageProvider");return t},y={header:"_header_3zql2_1",languageSwitch:"_languageSwitch_3zql2_36",searchOverlay:"_searchOverlay_3zql2_40",headerExtension:"_headerExtension_3zql2_45",extensionContentWrapper:"_extensionContentWrapper_3zql2_61",extensionContent:"_extensionContent_3zql2_61",extensionDivider:"_extensionDivider_3zql2_84",languageLabel:"_languageLabel_3zql2_98",languageLink:"_languageLink_3zql2_104",headerInner:"_headerInner_3zql2_129",logoWrapper:"_logoWrapper_3zql2_146",logo:"_logo_3zql2_146",secondaryLogoWrapper:"_secondaryLogoWrapper_3zql2_169",slotComponent:"_slotComponent_3zql2_178",slotContainer:"_slotContainer_3zql2_188",slotText:"_slotText_3zql2_196",secondaryLogo:"_secondaryLogo_3zql2_169",redCrossLogo:"_redCrossLogo_3zql2_223",primaryLogo:"_primaryLogo_3zql2_229",navItems:"_navItems_3zql2_233",navLink:"_navLink_3zql2_242",actions:"_actions_3zql2_255",ctaButton:"_ctaButton_3zql2_263",themeToggle:"_themeToggle_3zql2_268",userInfo:"_userInfo_3zql2_273",userName:"_userName_3zql2_279",loginLink:"_loginLink_3zql2_286",loginText:"_loginText_3zql2_295",underline:"_underline_3zql2_302",searchButtonWrapper:"_searchButtonWrapper_3zql2_308",buttonText:"_buttonText_3zql2_312",menuButton:"_menuButton_3zql2_317",menuOverlay:"_menuOverlay_3zql2_322",searchContent:"_searchContent_3zql2_356",menuContent:"_menuContent_3zql2_366",menuLeftColumn:"_menuLeftColumn_3zql2_375",menuRightColumn:"_menuRightColumn_3zql2_381",slotContent:"_slotContent_3zql2_395",navList:"_navList_3zql2_408",menuUtilities:"_menuUtilities_3zql2_415",menuBrand:"_menuBrand_3zql2_422",suggestionsSection:"_suggestionsSection_3zql2_426",suggestionsTitle:"_suggestionsTitle_3zql2_432",searchResults:"_searchResults_3zql2_441",resultList:"_resultList_3zql2_447",resultItem:"_resultItem_3zql2_453",resultLink:"_resultLink_3zql2_461",suggestionIcon:"_suggestionIcon_3zql2_475",suggestionText:"_suggestionText_3zql2_488",highlightedText:"_highlightedText_3zql2_495",remainingText:"_remainingText_3zql2_500",viewAllLink:"_viewAllLink_3zql2_513",noResults:"_noResults_3zql2_548"},Io=[{id:"home",title:"Hjem",category:"Page",path:"home",description:"Forsiden"},{id:"components",title:"Komponenter",category:"Page",path:"components",description:"Oversikt over alle komponenter"},{id:"design",title:"Design",category:"Page",path:"design",description:"Designretningslinjer og prinsipper"},{id:"code",title:"Kode",category:"Page",path:"code",description:"Utviklerdokumentasjon og oppsett"},{id:"alert",title:"Alert",category:"Component",path:"components",description:"Varselbokser for viktige meldinger"},{id:"avatar",title:"Avatar",category:"Component",path:"components",description:"Profilbilder og initialer"},{id:"badge",title:"Badge",category:"Component",path:"components",description:"Små merker for status eller antall"},{id:"button",title:"Button",category:"Component",path:"components",description:"Knapper for handlinger"},{id:"card",title:"Card",category:"Component",path:"components",description:"Kort for gruppering av innhold"},{id:"carousel",title:"Carousel",category:"Component",path:"components",description:"Bildekarusell"},{id:"checkbox",title:"Checkbox",category:"Component",path:"components",description:"Valg av flere alternativer"},{id:"dialog",title:"Dialog",category:"Component",path:"components",description:"Modale vinduer"},{id:"dropdown",title:"Dropdown",category:"Component",path:"components",description:"Nedtrekksmenyer"},{id:"header",title:"Header",category:"Component",path:"components",description:"Topptekst og navigasjon"},{id:"herosection",title:"HeroSection",category:"Component",path:"components",description:"Store introduksjonsseksjoner"},{id:"input",title:"Input",category:"Component",path:"components",description:"Tekstfelt for brukerinput"},{id:"link",title:"Link",category:"Component",path:"components",description:"Lenker til andre sider"},{id:"list",title:"List",category:"Component",path:"components",description:"Ordnede og uordnede lister"},{id:"pagination",title:"Pagination",category:"Component",path:"components",description:"Navigasjon mellom sider"},{id:"radio",title:"Radio",category:"Component",path:"components",description:"Valg av ett alternativ"},{id:"search",title:"Search",category:"Component",path:"components",description:"Søkefelter"},{id:"select",title:"Select",category:"Component",path:"components",description:"Valgmeny"},{id:"spinner",title:"Spinner",category:"Component",path:"components",description:"Lasteindikator"},{id:"switch",title:"Switch",category:"Component",path:"components",description:"Av/på bryter"},{id:"table",title:"Table",category:"Component",path:"components",description:"Tabeller for data"},{id:"tabs",title:"Tabs",category:"Component",path:"components",description:"Faner for inndeling av innhold"},{id:"tag",title:"Tag",category:"Component",path:"components",description:"Merkelapper og emneknagger"},{id:"textarea",title:"Textarea",category:"Component",path:"components",description:"Flerlinjers tekstfelt"},{id:"tooltip",title:"Tooltip",category:"Component",path:"components",description:"Hjelpetekster ved hover"},{id:"figma-oppkobling",title:"Figma tilkobling",category:"Design",path:"design/figma-oppkobling",description:"Hvordan koble til Figma-biblioteket"},{id:"oppstart",title:"Oppstart",category:"Design",path:"design/oppstart",description:"Oppsett av arbeidsområde"},{id:"lage-komponenter",title:"Lage ett nytt komponent",category:"Design",path:"design/lage-komponenter",description:"Veileder for komponentbygging"},{id:"praktiske-eksempler",title:"Praktiske eksempler",category:"Design",path:"design/praktiske-eksempler",description:"Eksempler på bruk av designsystemet"},{id:"token-studio",title:"Token Studio",category:"Design",path:"design/token-studio",description:"Bruk av Token Studio"},{id:"fargesystem",title:"Sette opp ditt eget fargesystem",category:"Design",path:"design/fargesystem",description:"Hvordan sette opp farger"},{id:"temabygger",title:"Temabygger",category:"Design",path:"design/temabygger",description:"Designsystemets temagenerator"},{id:"bruk-farger",title:"Bruk fargene",category:"Design",path:"design/bruk-farger",description:"Bruk genererte farger"},{id:"foresla-design",title:"Foreslå nytt design",category:"Design",path:"design/foresla-design",description:"Hvordan bidra med nytt design"},{id:"hva-er-design-tokens",title:"Hva er design tokens",category:"Design",path:"design/hva-er-design-tokens",description:"Introduksjon til design tokens"},{id:"design-tokens-i-figma",title:"Design tokens i Figma",category:"Design",path:"design/design-tokens-i-figma",description:"Bruke tokens i Figma"},{id:"farger-navnestruktur",title:"Farger: Navnestruktur",category:"Design",path:"design/farger-navnestruktur",description:"Navngiving av farger"},{id:"farger-oversikt",title:"Farger: Oversikt",category:"Design",path:"design/farger-oversikt",description:"Oversikt og forklaringer av farger"},{id:"farge-tokens",title:"Farge-tokens",category:"Design",path:"design/farge-tokens",description:"Tokens for farger"},{id:"skygger-bruk",title:"Bruk av skygger",category:"Design",path:"design/skygger-bruk",description:"Retningslinjer for skygger"},{id:"skygge-tokens",title:"Skygge-tokens",category:"Design",path:"design/skygge-tokens",description:"Tokens for skygger"},{id:"komponent-storrelser",title:"Komponentstørrelser",category:"Design",path:"design/komponent-storrelser",description:"Størrelsesguide for komponenter"},{id:"storrelse-tokens",title:"Størrelse-tokens",category:"Design",path:"design/storrelse-tokens",description:"Tokens for størrelser"},{id:"font-family",title:"Typografi: Font-family",category:"Design",path:"design/font-family",description:"Font-familier"},{id:"typografi-tokens",title:"Typografi-tokens",category:"Design",path:"design/typografi-tokens",description:"Tokens for typografi"},{id:"code-intro",title:"Oversikt (Kode)",category:"Code",path:"code/intro",description:"Startside for kode"},{id:"kom-i-gang",title:"Kom i gang (Kode)",category:"Code",path:"code/kom-i-gang",description:"Installasjon og oppsett"},{id:"figma-mcp",title:"Fra Figma til Kode (MCP)",category:"Code",path:"code/figma-mcp",description:"Automatisert arbeidsflyt med MCP"},{id:"komponent-kreasjon",title:"Komponent Kreasjon",category:"Code",path:"code/komponent-kreasjon",description:"Opprette nye komponenter"},{id:"progression",title:"Progresjon",category:"Code",path:"code/progression",description:"Fra design til ferdig komponent"},{id:"metadata-files",title:"Metadata filer",category:"Code",path:"code/metadata-files",description:"Struktur og bruk av metadata.json"}],Ao=({activePage:t,setPage:e,children:n,showUser:s=!0,showSearch:a=!0,showLogin:i=!0,showCta:r=!1,ctaLabel:d,ctaIcon:l=o.jsx(le.HeartIcon,{"aria-hidden":!0}),onCtaClick:c,showThemeToggle:b=!1,secondaryLogo:m=!1,secondaryLogoSrc:k,secondaryLogoSrcDark:p,secondaryLogoAlt:f="Secondary Logo",navItems:h,showNavItems:v=!0,showMenuButton:g=!0,showHeaderExtension:u=!1,showModeToggle:T=!1,showLanguageSwitch:F=!1})=>{const[B,N]=C.useState(!1),[I,j]=C.useState(!1),[M,H]=C.useState(""),[E,W]=C.useState("light"),{language:O,setLanguage:_,t:L}=wt(),[K,se]=C.useState(!1);C.useEffect(()=>{const S="rk-header-inline-styles";if(typeof document>"u"||document.getElementById(S))return;const A=Lo(y),P=document.createElement("style");P.id=S,P.textContent=A,document.head.appendChild(P)},[]);const X=()=>o.jsxs("svg",{width:"170",height:"119",viewBox:"24 0 170 119",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":!0,focusable:"false",className:y.redCrossLogo,children:[o.jsx("path",{d:"M76.1036 48.1397C77.8925 47.8781 79.6984 47.7525 81.5061 47.7639C84.1713 47.7639 86.0396 48.1669 87.3182 49.1857C87.8735 49.639 88.3149 50.2176 88.6067 50.8744C88.8984 51.5312 89.0323 52.2479 88.9974 52.9665C88.9839 53.9451 88.6724 54.896 88.1049 55.691C87.5373 56.4861 86.7411 57.087 85.8235 57.4129V57.4944C87.0796 58.006 87.7684 59.2104 88.2231 60.8722C88.7813 62.9097 89.3441 65.2688 89.6907 65.9661H85.5309C85.2382 65.4544 84.7835 63.9829 84.2793 61.7597C83.7751 59.5365 83.0097 58.8527 81.344 58.8527H80.1284V65.9661H76.1036V48.1397ZM80.1284 55.9141H81.7312C83.7526 55.9141 84.9546 54.8954 84.9546 53.3151C84.9546 51.6534 83.8336 50.8202 81.9698 50.7931C81.3532 50.7814 80.7368 50.8268 80.1284 50.9289V55.9141Z",fill:"#1E1E1E"}),o.jsx("path",{d:"M97.8528 52.5633C98.9439 52.5351 100.026 52.7744 101.004 53.2606L102.256 51.4087L103.669 52.4003L102.467 54.2115C103.188 54.8589 103.758 55.6585 104.137 56.5531C104.515 57.4478 104.692 58.4154 104.655 59.3869C104.655 64.0506 101.243 66.2738 97.8573 66.2738C96.7852 66.2984 95.7234 66.059 94.7644 65.5765L93.4543 67.4556L92.1037 66.387L93.2787 64.6438C91.8651 63.4892 91.0277 61.7233 91.0277 59.414C91.0277 55.2891 93.7965 52.5543 97.8213 52.5543L97.8528 52.5633ZM99.2934 55.9411C98.8798 55.6237 98.3731 55.4533 97.8528 55.4566C95.7458 55.4566 94.949 57.5757 94.949 59.4005C94.9265 60.126 95.0909 60.845 95.4262 61.4878L95.4802 61.515L99.2934 55.9411ZM96.4932 62.8552C96.8653 63.1843 97.3486 63.3576 97.8438 63.3397C99.6446 63.3397 100.748 61.7821 100.748 59.4774C100.76 58.7777 100.625 58.0833 100.351 57.4399L100.27 57.4127L96.4932 62.8552Z",fill:"#1E1E1E"}),o.jsx("path",{d:"M119.76 46.9351V62.0537C119.76 63.5253 119.814 65.0829 119.868 65.9659H116.266L116.077 64.037H116.01C115.593 64.7375 114.998 65.3131 114.285 65.7041C113.573 66.095 112.769 66.287 111.958 66.2602C108.865 66.2602 106.384 63.6068 106.384 59.5317C106.384 55.1079 109.085 52.5632 112.237 52.5632C113.835 52.5632 115.087 53.1247 115.676 54.0393H115.726V46.9351H119.76ZM115.708 58.4088C115.708 58.1914 115.681 57.8971 115.658 57.6843C115.556 57.1295 115.266 56.6274 114.838 56.2627C114.41 55.8981 113.869 55.6933 113.308 55.683C111.467 55.683 110.508 57.3447 110.508 59.4094C110.508 61.6327 111.602 63.0318 113.281 63.0318C113.838 63.0337 114.378 62.8389 114.807 62.4814C115.235 62.1239 115.526 61.6264 115.627 61.0757C115.702 60.7676 115.737 60.451 115.73 60.1339L115.708 58.4088Z",fill:"#1E1E1E"}),o.jsx("path",{d:"M126.13 60.6869C126.265 62.3758 127.931 63.1772 129.808 63.1772C131.029 63.1934 132.245 63.013 133.41 62.6429L133.946 65.4049C132.438 65.9752 130.838 66.2562 129.227 66.2335C124.802 66.2335 122.272 63.6345 122.272 59.5322C122.272 56.2088 124.325 52.5366 128.854 52.5366C133.063 52.5366 134.666 55.8329 134.666 59.0794C134.666 59.6271 134.62 60.1738 134.531 60.714L126.13 60.6869ZM130.902 57.8977C130.902 56.9061 130.475 55.2443 128.611 55.2443C126.904 55.2443 126.211 56.8246 126.103 57.8977H130.902Z",fill:"#1E1E1E"}),o.jsx("path",{d:"M142.603 47.8994H146.623V55.8866H146.7C147.1 55.1893 147.501 54.5283 147.929 53.9034L151.981 47.8994H156.978L151.035 55.5969L157.297 65.9703H152.57L148.172 58.1687L146.623 60.0704V65.9567H142.598L142.603 47.8994Z",fill:"#1E1E1E"}),o.jsx("path",{d:"M164.294 66.2599C160.485 66.2599 157.541 63.7424 157.541 59.5043C157.541 55.2662 160.309 52.563 164.496 52.563C168.494 52.563 171.159 55.325 171.159 59.2643C171.159 64.0639 167.774 66.2599 164.307 66.2599H164.294ZM164.375 63.3394C165.946 63.3394 166.959 61.7592 166.959 59.4001C166.959 57.4395 166.216 55.4563 164.375 55.4563C162.43 55.4563 161.709 57.4667 161.709 59.4001C161.709 61.6641 162.641 63.3394 164.348 63.3394H164.375Z",fill:"#1E1E1E"}),o.jsx("path",{d:"M173.676 57.1727C173.676 55.2438 173.622 54.0031 173.568 52.8576H177.062L177.197 55.271H177.3C177.535 54.507 178 53.8353 178.63 53.3486C179.261 52.8619 180.026 52.5843 180.821 52.5542C181.105 52.5425 181.391 52.5607 181.672 52.6086V56.4392C181.303 56.3736 180.93 56.3387 180.555 56.335C179.06 56.335 178.048 57.1365 177.782 58.3997C177.726 58.6983 177.699 59.0015 177.701 59.3053V65.9659H173.649L173.676 57.1727Z",fill:"#1E1E1E"}),o.jsx("path",{d:"M183.752 62.4023C184.824 62.9936 186.018 63.3283 187.241 63.3803C188.47 63.3803 188.974 62.9275 188.974 62.28C188.974 61.6325 188.573 61.2613 187.056 60.7768C184.355 59.8712 183.351 58.3951 183.351 56.8375C183.351 54.3969 185.404 52.5496 188.654 52.5496C189.92 52.5283 191.175 52.7848 192.332 53.3012L191.612 56.1357C190.741 55.6712 189.775 55.4155 188.789 55.3886C187.803 55.3886 187.241 55.787 187.241 56.4571C187.241 57.1273 187.749 57.4216 189.348 57.9604C191.828 58.8162 192.868 60.0795 192.891 62.0084C192.891 64.4444 190.973 66.2691 187.241 66.2691C185.784 66.2951 184.341 65.974 183.031 65.3318L183.752 62.4023Z",fill:"#1E1E1E"}),o.jsx("path",{d:"M50.1985 39.8037H37.1426V79.1965H50.1985V39.8037Z",fill:"#D52B1E"}),o.jsx("path",{d:"M63.2545 52.9331H24.0869V66.0625H63.2545V52.9331Z",fill:"#D52B1E"})]});C.useEffect(()=>{N(!1),j(!1),H("")},[t]),C.useEffect(()=>{if(!(typeof document>"u")&&B&&K){const S=document.body.style.overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=S}}},[B,K]),C.useEffect(()=>{if(typeof window>"u"||typeof window.matchMedia>"u")return;const S=window.matchMedia("(max-width: 850px)"),A=P=>se("matches"in P?P.matches:S.matches);return A(S),S.addEventListener?S.addEventListener("change",A):S.addListener(A),()=>{S.removeEventListener?S.removeEventListener("change",A):S.removeListener(A)}},[]),C.useEffect(()=>{if(typeof document>"u")return;const S=document.querySelector(`.${y.header}`);if(!S)return;const A=()=>{const q=S.offsetHeight;document.documentElement.style.setProperty("--header-height-mobile",`${q}px`)};A(),window.addEventListener("resize",A);const P=new ResizeObserver(()=>{A()});return P.observe(S),()=>{window.removeEventListener("resize",A),P.disconnect()}},[K]),C.useEffect(()=>{if(typeof document>"u")return;const S=document.querySelector(`.${y.logoWrapper}`);if(!S)return;const A=()=>{const P=S.offsetWidth;document.documentElement.style.setProperty("--rk-logo-width",`${P}px`)};return A(),window.addEventListener("resize",A),()=>window.removeEventListener("resize",A)},[K]),C.useEffect(()=>{if(typeof document>"u"||!I){document.documentElement.style.setProperty("--rk-search-overlay-height","0px");return}const S=document.querySelector(`.${y.searchOverlay}`);if(!S)return;const A=()=>{const q=S.offsetHeight;document.documentElement.style.setProperty("--rk-search-overlay-height",`${q}px`)};requestAnimationFrame(A),window.addEventListener("resize",A);const P=new ResizeObserver(A);return P.observe(S),()=>{window.removeEventListener("resize",A),P.disconnect()}},[I]);const Q=()=>{const S=E==="light"?"dark":"light";W(S),document.documentElement.setAttribute("data-color-scheme",S)},ce=S=>{e&&(S.preventDefault(),e("home")),N(!1),j(!1)},R=()=>{N(!B),I&&j(!1),!B&&typeof document<"u"&&requestAnimationFrame(()=>{const S=document.querySelector(`.${y.header}`);if(S){const A=S.offsetHeight;document.documentElement.style.setProperty("--header-height-mobile",`${A}px`)}})},ae=()=>{j(!I),B&&N(!1)},ee=C.useMemo(()=>{if(!M.trim())return[];const S=M.toLowerCase();return Io.filter(A=>A.title.toLowerCase().startsWith(S))},[M]),te=S=>{e&&e(S),j(!1),H("")};return o.jsxs("header",{className:y.header,"data-open":B?"true":"false",children:[u&&o.jsx("div",{className:y.headerExtension,"data-color-scheme":"light",children:o.jsxs("div",{className:y.extensionContentWrapper,children:[T&&o.jsx("div",{className:y.extensionContent,children:o.jsx(Me,{"data-size":"sm",checked:E==="dark",onChange:Q,label:L("header.darkMode"),color:"neutral","data-color-scheme":"light"})}),T&&F&&o.jsx("div",{className:y.extensionDivider}),F&&o.jsxs("div",{className:y.languageSwitch,children:[o.jsx("span",{className:y.languageLabel,children:L("header.language")}),o.jsxs(Y.TriggerContext,{children:[o.jsxs(Y.Trigger,{className:y.languageLink,"aria-label":L("header.selectLanguage"),style:{background:"transparent",border:"none",padding:0,cursor:"pointer",font:"inherit"},children:[O," ",o.jsx(le.ChevronDownIcon,{"aria-hidden":!0})]}),o.jsx(Y,{"data-color-scheme":E,placement:"bottom-end",children:o.jsxs(Y.List,{children:[o.jsx(Y.Item,{children:o.jsx(Y.Button,{onClick:()=>_("NO"),children:"Norsk (NO)"})}),o.jsx(Y.Item,{children:o.jsx(Y.Button,{onClick:()=>_("EN"),children:"English (EN)"})})]})})]})]})]})}),o.jsxs("div",{className:y.headerInner,children:[o.jsxs("div",{className:y.logoWrapper,children:[o.jsx(Ae,{href:"/",className:`${y.logo} ${y.primaryLogo}`,"aria-label":L("header.homeAriaLabel"),onClick:ce,children:o.jsx(X,{})}),o.jsx("div",{className:y.secondaryLogoWrapper,children:m&&k?o.jsx("img",{src:E==="dark"&&p?p:k,alt:f,className:y.secondaryLogo}):m?o.jsx("div",{className:y.slotComponent,children:o.jsx("div",{className:y.slotContainer,children:o.jsx("p",{className:y.slotText,children:"SLOT"})})}):null})]}),v&&h&&h.length>0&&!K&&o.jsx("nav",{className:y.navItems,children:h.map((S,A)=>o.jsx(Ae,{href:S.href,className:y.navLink,onClick:P=>{e&&(P.preventDefault(),e(S.href))},children:S.label},A))}),o.jsxs("div",{className:y.actions,children:[r&&o.jsxs(pe,{variant:"primary","data-color":"main","data-size":"md",className:y.ctaButton,onClick:c,children:[l,o.jsx("span",{className:y.buttonText,children:d||L("header.supportUs")})]}),!u&&b&&o.jsx("div",{className:y.themeToggle,children:o.jsx(Me,{checked:E==="dark",onChange:Q,"aria-label":L("header.toggleTheme")})}),s&&o.jsxs("div",{className:y.userInfo,children:[o.jsx(Ne,{"data-size":"md",className:y.userName,children:"Frodo Baggins"}),o.jsx(Ee,{"aria-label":"Frodo Baggins","data-color":"main",variant:"circle",initials:"FB"})]}),i&&o.jsxs("a",{href:"#",className:y.loginLink,children:[o.jsx("span",{className:y.loginText,children:L("header.login")}),o.jsx("div",{className:y.underline})]}),a&&o.jsx("div",{className:y.searchButtonWrapper,children:o.jsxs(pe,{variant:"secondary","data-color":"main","data-size":"md",onClick:ae,"aria-expanded":I,"aria-label":L(I?"header.closeSearch":"header.openSearch"),children:[I?o.jsx(le.XMarkIcon,{"aria-hidden":!0}):o.jsx(le.MagnifyingGlassIcon,{"aria-hidden":!0}),o.jsx("span",{className:y.buttonText,children:L(I?"header.close":"header.search")})]})}),(g||K)&&o.jsxs(pe,{variant:"primary","data-color":"main","data-size":"md",onClick:R,"aria-expanded":B,"aria-label":L(B?"header.closeMenu":"header.openMenu"),className:y.menuButton,children:[B?o.jsx(le.XMarkIcon,{"aria-hidden":!0}):o.jsx(le.MenuHamburgerIcon,{"aria-hidden":!0}),o.jsx("span",{className:y.buttonText,children:L(B?"header.close":"header.menu")})]})]})]}),B&&o.jsx("div",{className:y.menuOverlay,children:o.jsxs("div",{className:y.menuContent,children:[o.jsx("div",{className:y.menuLeftColumn}),o.jsxs("div",{className:y.menuRightColumn,children:[K&&(F||T)&&o.jsxs("div",{className:y.menuUtilities,children:[F&&o.jsxs("div",{className:y.languageSwitch,children:[o.jsx("span",{className:y.languageLabel,children:L("header.language")}),o.jsxs(Y.TriggerContext,{children:[o.jsxs(Y.Trigger,{className:y.languageLink,"aria-label":L("header.selectLanguage"),style:{background:"transparent",border:"none",padding:0,cursor:"pointer",font:"inherit"},children:[O," ",o.jsx(le.ChevronDownIcon,{"aria-hidden":!0})]}),o.jsx(Y,{"data-color-scheme":E,placement:"bottom-start",children:o.jsxs(Y.List,{children:[o.jsx(Y.Item,{children:o.jsx(Y.Button,{onClick:()=>_("NO"),children:"Norsk (NO)"})}),o.jsx(Y.Item,{children:o.jsx(Y.Button,{onClick:()=>_("EN"),children:"English (EN)"})})]})})]})]}),T&&o.jsx("div",{className:y.extensionContent,children:o.jsx(Me,{"data-size":"sm",checked:E==="dark",onChange:Q,label:L("header.darkMode"),color:"neutral","data-color-scheme":"light"})})]}),o.jsxs("div",{className:y.slotContent,children:[n,K&&v&&h&&h.length>0&&o.jsx("nav",{className:y.navList,children:h.map((S,A)=>o.jsx(Ae,{href:S.href,className:y.navLink,onClick:P=>{e&&(P.preventDefault(),e(S.href))},children:S.label},A))})]}),K&&o.jsx("div",{className:y.menuBrand,children:o.jsx(X,{})})]})]})}),I&&o.jsx("div",{className:y.searchOverlay,children:o.jsxs("div",{className:y.searchContent,children:[o.jsxs(Le,{children:[o.jsx(Le.Input,{"aria-label":L("header.search"),placeholder:L("header.searchPlaceholder"),value:M,onChange:S=>H(S.target.value)}),o.jsx(Le.Button,{"aria-label":L("header.search")}),o.jsx(Le.ClearButton,{onClick:()=>H(""),"aria-label":L("header.clearSearch")})]}),M&&o.jsx("div",{className:y.searchResults,children:ee.length>0?o.jsxs("div",{className:y.suggestionsSection,children:[o.jsx("h3",{className:y.suggestionsTitle,children:L("header.suggestions")}),o.jsx("ul",{className:y.resultList,children:ee.slice(0,5).map(S=>o.jsx("li",{className:y.resultItem,children:o.jsxs("button",{className:y.resultLink,onClick:()=>te(S.path),children:[o.jsx("span",{className:y.suggestionIcon,children:o.jsx(le.MagnifyingGlassIcon,{"aria-hidden":!0})}),o.jsx("span",{className:y.suggestionText,children:(()=>{const A=S.title.toLowerCase().indexOf(M.toLowerCase());if(A===-1)return o.jsx("span",{className:y.remainingText,children:S.title});const P=S.title.slice(0,A),q=S.title.slice(A,A+M.length),oe=S.title.slice(A+M.length);return o.jsxs(o.Fragment,{children:[o.jsx("span",{className:y.remainingText,children:P}),o.jsx("span",{className:y.highlightedText,children:q}),o.jsx("span",{className:y.remainingText,children:oe})]})})()})]})},S.id))}),ee.length>5&&o.jsxs(Ae,{href:"#","data-color":"neutral",className:y.viewAllLink,onClick:S=>{S.preventDefault(),e&&e(`search/${M}`),j(!1),H("")},children:[L("header.viewAll")," (",ee.length,")"]})]}):o.jsx("div",{className:y.noResults,children:o.jsxs(Ne,{children:[L("header.noResults"),' "',M,'"']})})})]})})]})};function Lo(t){const e=t;return`
 .${e.header} {
   width: 100%;
   background-color: var(--ds-color-neutral-background-default);
@@ -145,4 +152,4 @@ React keys must be passed directly to JSX without using spread:
   [data-color-scheme="light"] .${e.menuUtilities} .${e.languageLink} { color: var(--color-neutral-text-default, #2B2B2B) !important; }
   .${e.searchOverlay}::before { display: none; }
 }
-`}C.Alert=nt,C.Avatar=Re,C.Badge=ot,C.BadgePosition=Vt,C.Breadcrumbs=Gt,C.BreadcrumbsItem=Kt,C.BreadcrumbsLink=qt,C.BreadcrumbsList=Ut,C.Button=ge,C.Card=rt,C.CardBlock=Yt,C.Carousel=Tt,C.Checkbox=st,C.Chip=Zt,C.DateInput=gt,C.DatePicker=dt,C.Details=uo,C.Dialog=mo,C.Divider=go,C.Dropdown=Q,C.ErrorSummary=po,C.Field=fo,C.FieldCounter=wt,C.FieldDescription=St,C.Fieldset=ho,C.Header=Mo,C.Heading=Ct,C.Input=ko,C.Label=jt,C.LanguageProvider=No,C.Link=Ae,C.List=bo,C.Pagination=vo,C.Paragraph=Pe,C.Popover=xo,C.Radio=To,C.Search=Ee,C.Select=wo,C.SkeletonLoader=Co,C.SkipLink=jo,C.Spinner=xt,C.Suggestion=Dt,C.Switch=Me,C.Table=Do,C.Tabs=Io,C.Tag=Lo,C.Textarea=Ao,C.Textfield=Eo,C.ToggleGroup=Bo,C.Tooltip=_o,C.ValidationMessage=It,C.useCheckboxGroup=Jt,C.useLanguage=At,C.usePagination=yo,C.useRadioGroup=So,Object.defineProperty(C,Symbol.toStringTag,{value:"Module"})}));
+`}x.Alert=Je,x.Avatar=Ee,x.Badge=Qe,x.BadgePosition=Mt,x.Breadcrumbs=Pt,x.BreadcrumbsItem=_t,x.BreadcrumbsLink=zt,x.BreadcrumbsList=Et,x.Button=pe,x.Card=Xe,x.CardBlock=Ot,x.Carousel=ht,x.Checkbox=Re,x.Chip=Vt,x.DateInput=at,x.DatePicker=ot,x.Details=to,x.Dialog=no,x.Divider=oo,x.Dropdown=Y,x.ErrorSummary=ro,x.Field=so,x.FieldCounter=vt,x.FieldDescription=kt,x.Fieldset=io,x.Header=Ao,x.Heading=bt,x.Input=ao,x.Label=yt,x.LanguageProvider=Do,x.Link=Ae,x.List=lo,x.Pagination=co,x.Paragraph=Ne,x.Popover=go,x.Radio=po,x.Search=Le,x.Select=fo,x.SkeletonLoader=ho,x.SkipLink=ko,x.Spinner=ft,x.Suggestion=Tt,x.Switch=Me,x.Table=vo,x.Tabs=bo,x.Tag=yo,x.Textarea=To,x.Textfield=xo,x.ToggleGroup=So,x.Tooltip=wo,x.ValidationMessage=xt,x.useCheckboxGroup=Wt,x.useLanguage=wt,x.usePagination=uo,x.useRadioGroup=mo,Object.defineProperty(x,Symbol.toStringTag,{value:"Module"})}));