rk-designsystem 1.1.58 → 1.1.60

package/dist/componentlibrary.umd.js

@@ -1,25 +1,4 @@
-(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,A,$,de){"use strict";var Ee={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 Te={};/**
- * @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 Wt(){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 b: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 v:return"Portal";case _:return c.displayName||"Context";case x:return(c._context.displayName||"Context")+".Consumer";case N:var E=c.render;return c=c.displayName,c||(c=E.displayName||E.name||"",c=c!==""?"ForwardRef("+c+")":"ForwardRef"),c;case F:return E=c.displayName||null,E!==null?E:t(c.type)||"Memo";case M:E=c._payload,c=c._init;try{return t(c(E))}catch{}}return null}function e(c){return""+c}function n(c){try{e(c);var E=!1}catch{E=!0}if(E){E=console;var R=E.error,H=typeof Symbol=="function"&&Symbol.toStringTag&&c[Symbol.toStringTag]||c.constructor.name||"Object";return R.call(E,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",H),e(c)}}function s(c){if(c===b)return"<>";if(typeof c=="object"&&c!==null&&c.$$typeof===M)return"<...>";try{var E=t(c);return E?"<"+E+">":"<...>"}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 E=Object.getOwnPropertyDescriptor(c,"key").get;if(E&&E.isReactWarning)return!1}return c.key!==void 0}function d(c,E){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)",E))}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,E,R,H,T,L){var D=R.ref;return c={$$typeof:h,type:c,key:E,props:R,_owner:H},(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:T}),Object.defineProperty(c,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:L}),Object.freeze&&(Object.freeze(c.props),Object.freeze(c)),c}function y(c,E,R,H,T,L){var D=E.children;if(D!==void 0)if(H)if(W(D)){for(H=0;H<D.length;H++)f(D[H]);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(E,"key")){D=t(c);var U=Object.keys(E).filter(function(re){return re!=="key"});H=0<U.length?"{key: someKey, "+U.join(": ..., ")+": ...}":"{key: someKey}",ie[D+H]||(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} />`,H,D,U,D),ie[D+H]=!0)}if(D=null,R!==void 0&&(n(R),D=""+R),o(E)&&(n(E.key),D=""+E.key),"key"in E){R={};for(var te in E)te!=="key"&&(R[te]=E[te])}else R=E;return D&&d(R,typeof c=="function"?c.displayName||c.name||"Unknown":c),u(c,D,R,i(),T,L)}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"),v=Symbol.for("react.portal"),b=Symbol.for("react.fragment"),p=Symbol.for("react.strict_mode"),m=Symbol.for("react.profiler"),x=Symbol.for("react.consumer"),_=Symbol.for("react.context"),N=Symbol.for("react.forward_ref"),P=Symbol.for("react.suspense"),I=Symbol.for("react.suspense_list"),F=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,W=Array.isArray,B=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=B(s(a)),ie={};Te.Fragment=b,Te.jsx=function(c,E,R){var H=1e4>K.recentlyCreatedOwnerStacks++;return y(c,E,R,!1,H?Error("react-stack-top-frame"):ee,H?B(s(c)):X)},Te.jsxs=function(c,E,R){var H=1e4>K.recentlyCreatedOwnerStacks++;return y(c,E,R,!0,H?Error("react-stack-top-frame"):ee,H?B(s(c)):X)}})()),Te}var tt;function Ht(){return tt||(tt=1,process.env.NODE_ENV==="production"?Ee.exports=Ot():Ee.exports=Wt()),Ee.exports}var r=Ht();const nt=w.forwardRef((t,e)=>r.jsx(A.Alert,{ref:e,...t}));nt.displayName="Alert";const Re=w.forwardRef((t,e)=>r.jsx(A.Avatar,{ref:e,...t}));Re.displayName="Avatar";const ot=w.forwardRef((t,e)=>r.jsx(A.Badge,{ref:e,...t}));ot.displayName="Badge";const Vt=A.BadgePosition,Gt=A.Breadcrumbs,Ut=A.BreadcrumbsList,Kt=A.BreadcrumbsItem,qt=A.BreadcrumbsLink,ge=A.Button;ge.displayName="Button";const rt=A.Card,Yt=A.CardBlock;rt.displayName="Card";const st=A.Checkbox,$t=A.Fieldset,Jt=A.useCheckboxGroup;st.displayName="Checkbox",$t.displayName="Fieldset";const Zt=A.Chip;function Oe(t){return(e={})=>{const n=e.width?String(e.width):t.defaultWidth;return t.formats[n]||t.formats[t.defaultWidth]}}function xe(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:xe({values:cn,defaultWidth:"wide"}),quarter:xe({values:un,defaultWidth:"wide",argumentCallback:t=>t-1}),month:xe({values:mn,defaultWidth:"wide"}),day:xe({values:gn,defaultWidth:"wide"}),dayPeriod:xe({values:pn,defaultWidth:"wide"})},hn=/^(\d+)\.?/i,kn=/\d+/i,vn={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},bn={any:[/^f/i,/^e/i]},yn={narrow:/^[1234]/i,abbreviated:/^q[1234]/i,wide:/^[1234](\.)? kvartal/i},Tn={any:[/1/i,/2/i,/3/i,/4/i]},xn={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:vn,defaultMatchWidth:"wide",parsePatterns:bn,defaultParseWidth:"any"}),quarter:Se({matchPatterns:yn,defaultMatchWidth:"wide",parsePatterns:Tn,defaultParseWidth:"any",valueCallback:t=>t+1}),month:Se({matchPatterns:xn,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"})},ve={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"},An=t=>{const e=$.startOfMonth(t),n=$.startOfWeek(e,{locale:ve}),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(()=>An(a),[a]),y=w.useMemo(()=>{const m=$.startOfWeek(new Date,{locale:ve});return Array.from({length:7}).map((x,_)=>{const N=$.format($.addDays(m,_),"EEEEEE",{locale:ve});return lt(N)})},[]),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,x)=>{(m.key==="Enter"||m.key===" ")&&(m.preventDefault(),g(x))},[g]),v=$.format(a,"MMMM",{locale:ve}),b=$.format(a,"yyyy",{locale:ve}),p=`${lt(v)} ${b}`;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(A.Button,{variant:"tertiary",icon:!0,onClick:f,"aria-label":"Forrige måned",disabled:l,children:r.jsx(at,{})}),r.jsx(A.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 x=$.isSameMonth(m,a),_=e&&$.isValid(e)&&$.isSameDay(m,e),N=$.isToday(m),P=[ae.dateCell,x?"":ae.otherMonth,_?ae.selectedDate:"",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":_??!1,"aria-label":$.format(m,"PPP",{locale:ve}),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:v,disabled:b,onClick:p,onFocus:m,onBlur:x,autoComplete:_="off","aria-label":N,"aria-labelledby":P,description:I,error:F,"data-color":M,"data-size":G,...z}=t,K=l!==void 0,O=w.useRef(null);w.useImperativeHandle(e,()=>O.current);const W=w.useCallback(L=>{const D=ut(L),U=mt(D);return ct(U)},[]),[B,Z]=w.useState(()=>W(l??u));w.useEffect(()=>{if(K){const L=W(l);L!==B&&(Z(L),O.current&&O.current.value!==L&&(O.current.value=L))}},[l,K,B,W]);const se=w.useCallback(L=>{const D=L.target,U=D.value,te=B,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={...L,target:{...D,value:j}};y(ne,j)}})},[B,K,y,W]),ee=[pe.fieldset,a].filter(Boolean).join(" "),X=[pe.inputWrapper,o,F?pe.inputWrapperError:""].filter(Boolean).join(" "),ie=[d].filter(Boolean).join(" "),c=[pe.suffixButton,i?pe.suffixButtonInteractive:""].filter(Boolean).join(" ");!n&&!N&&!P&&console.warn("Advarsel: DateInput-komponenten bør ha label, aria-label, eller aria-labelledby for tilgjengelighet.");const E=n&&typeof n=="string"?P||`${g}-label`:void 0,R=I?`${g}-desc`:void 0,H=F?`${g}-err`:void 0,T=[R,H].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:E,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:B,readOnly:f,placeholder:k,id:g,name:h,required:v,disabled:b,onClick:p,onChange:se,onFocus:m,onBlur:x,autoComplete:_,"aria-label":N,"aria-labelledby":E,"aria-describedby":T,"aria-invalid":!!F,className:ie,...z}),s&&r.jsx("button",{type:"button",className:c,onClick:b?void 0:i,tabIndex:i&&!b?0:-1,"aria-hidden":!i,disabled:b,"aria-label":i?"Åpne datovelger":void 0,children:s})]}),F&&r.jsx("p",{id:H,className:pe.error,role:"alert",children:F})]})});gt.displayName="DateInput";function Ln(t){return Object.prototype.toString.call(t)==="[object Object]"}function pt(t){return Ln(t)||Array.isArray(t)}function Bn(){return!!(typeof window<"u"&&window.document&&window.document.createElement)}function We(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:We(d,l)})}function ft(t){return t.concat().sort((e,n)=>e.name>n.name?1:-1).map(e=>e.options)}function Fn(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 We(i,o)})}function He(t){return typeof t=="number"}function Ve(t){return typeof t=="string"}function Ne(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 En(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 Nn(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 vt(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?vt(a,o):o}),n),{})}function Ke(t,e){return typeof e.MouseEvent<"u"&&t instanceof e.MouseEvent}function _n(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(b){if(!l)return;o||(o=b,n(),n());const p=b-o;for(o=b,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:v,width:b}=h;return s?v:b}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 bt(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 bt(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,v,b,p,m){const{cross:x,direction:_}=t,N=["INPUT","SELECT","TEXTAREA"],P={passive:!1},I=Ie(),F=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,W=0,B=0,Z=!1,se=!1,ee=!1,X=!1;function ie(j){if(!m)return;function V(ne){(Ne(m)||m(j,ne))&&L(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(),F.clear()}function E(){const j=X?n:e;F.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 N.includes(V)}function H(){return(h?z:G)[X?"mouse":"touch"]}function T(j,V){const Y=f.add(Ge(j)*-1),ne=y.byDistance(j,!h).distance;return h||J(j)<M?ne:b&&V?ne*.5:y.byIndex(Y.get(),0).distance}function L(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),E(),W=a.readPoint(j),B=a.readPoint(j,x),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,x),ce=we(Y,W),ue=we(ne,B);if(!se&&!X&&(!j.cancelable||(se=ce>ue,!se)))return U(j);const he=a.pointerMove(j);ce>v&&(ee=!0),u.useFriction(.3).useDuration(.75),d.start(),i.add(_(he)),j.preventDefault()}function U(j){const Y=y.byDistance(0,!1).index!==f.get(),ne=a.pointerUp(j)*H(),ce=T(_(ne),Y),ue=En(ne,ce),he=K-10*ue,me=p+ue/50;se=!1,Z=!1,F.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,v=k/g;return g&&!h&&J(v)>.1?v: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 Wn(t){function e(s){return t*(s/100)}return{measure:e}}function Hn(t,e,n,s,i,a,o){const d=[t].concat(s);let l,u,y=[],f=!1;function k(b){return i.measureSize(o.measure(b))}function g(b){if(!a)return;u=k(t),y=s.map(k);function p(m){for(const x of m){if(f)return;const _=x.target===t,N=s.indexOf(x.target),P=_?u:y[N],I=k(_?t:s[N]);if(J(I-P)>=.5){b.reInit(),e.emit("resize");break}}}l=new ResizeObserver(m=>{(Ne(a)||a(b,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 F=0;return I?(o=0,n.set(s),t.set(s),F=P):(n.set(t),o+=P/l,o*=u,y+=o,t.add(o),F=y-f),d=Ge(F),f=y,N}function g(){const P=s.get()-e.get();return J(P)<.001}function h(){return l}function v(){return d}function b(){return o}function p(){return x(i)}function m(){return _(a)}function x(P){return l=P,N}function _(P){return u=P,N}const N={direction:v,duration:h,velocity:b,seek:k,settled:g,useBaseFriction:m,useBaseDuration:p,useFriction:_,useDuration:x};return N}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",v=J(t[h]-e.get()),b=n.get()-e.get(),p=d.constrain(v/o);n.subtract(b*p),!g&&J(b)<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,v){return we(h,v)<=1}function y(){const h=o[0],v=le(o),b=o.lastIndexOf(h),p=o.indexOf(v)+1;return fe(b,p)}function f(){return n.map((h,v)=>{const{min:b,max:p}=a,m=a.constrain(h),x=!v,_=Ue(n,v);return x?p:_||u(b,m)?b: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:v}=d;return o.slice(h,v)}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(v=>le(v)[o]-v[0][a]).map(J)}function k(){return s.map(v=>n[a]-v[a]).map(v=>-J(v))}function g(){return d(u).map(v=>v[0]).map((v,b)=>v+l[b])}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,v,b)=>{const p=!v,m=Ue(b,v);if(p){const x=le(b[0])+1;return kt(x)}if(m){const x=je(a)-le(b)[0]+1;return kt(x,le(b)[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((v,b)=>J(v)-J(b))[0]}function u(h){const v=t?o(h):d(h),b=e.map((m,x)=>({diff:y(m-v,0),index:x})).sort((m,x)=>J(m.diff)-J(x.diff)),{index:p}=b[0];return{index:p,distance:v}}function y(h,v){const b=[h,h+n,h-n];if(!t)return h;if(!v)return l(b);const p=b.filter(m=>Ge(m)===v);return p.length?l(p):le(b)-n}function f(h,v){const b=e[h]-i.get(),p=y(b,v);return{index:h,distance:p}}function k(h,v){const b=i.get()+h,{index:p,distance:m}=u(b),x=!t&&a(b);if(!v||x)return{index:p,distance:h};const _=e[p]-m,N=h+y(_,0);return{index:p,distance:N}}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(v){if(new Date().getTime()-u>10)return;o.emit("slideFocusStart"),t.scrollLeft=0;const m=n.findIndex(x=>x.includes(v));He(m)&&(i.useDuration(0),s.index(m,0),o.emit("slideFocus"))}a.add(document,"keydown",f,!1),e.forEach((v,b)=>{a.add(v,"focus",p=>{(Ne(d)||d(g,p))&&h(b)},l)})}function f(g){g.code==="Tab"&&(u=new Date().getTime())}return{init:y}}function Ae(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 He(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=Nn(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,F){return I.reduce((M,G)=>M-i[G],F)}function h(I,F){return I.reduce((M,G)=>g(M,F)>0?M.concat([G]):M,[])}function v(I){return a.map((F,M)=>({start:F-s[M]+.5+I,end:F+e-.5+I}))}function b(I,F,M){const G=v(F);return I.map(z=>{const K=M?0:-n,O=M?n:0,W=M?"end":"start",B=G[z][W];return{index:z,loopPoint:B,slideLocation:Ae(-1),translate:yt(t,l[z]),target:()=>d.get()>B?K:O}})}function p(){const I=o[0],F=h(f,I);return b(F,n,!1)}function m(){const I=e-o[0]-1,F=h(y,I);return b(F,-n,!0)}function x(){return k.every(({index:I})=>{const F=y.filter(M=>M!==I);return g(F,e)<=.1})}function _(){k.forEach(I=>{const{target:F,translate:M,slideLocation:G}=I,z=F();z!==G.get()&&(M.to(z),G.set(z))})}function N(){k.forEach(I=>I.translate.clear())}return{canLoop:x,clear:N,loop:_,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||(Ne(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(v=>{const b=e.indexOf(v.target);i[b]=v}),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((v,b)=>{const p=parseInt(b),{isIntersecting:m}=i[p];return(h&&m||!h&&!m)&&v.push(p),v},[])}function k(h=!0){if(h&&a)return a;if(!h&&o)return o;const v=f(h);return h&&(a=v),h||(o=v),v}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=v(),k=n.map(o),g=b();function h(){if(!u)return 0;const m=n[0];return J(e[d]-m[d])}function v(){if(!u)return 0;const m=a.getComputedStyle(le(s));return parseFloat(m.getPropertyValue(`margin-${l}`))}function b(){return n.map((m,x,_)=>{const N=!x,P=Ue(_,x);return N?k[x]+y:P?k[x]+f:_[x+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=He(n);function g(p,m){return Ce(p).filter(x=>x%m===0).map(x=>p.slice(x,x+m))}function h(p){return p.length?Ce(p).reduce((m,x,_)=>{const N=le(m)||0,P=N===0,I=x===je(p),F=i[u]-a[N][u],M=i[u]-a[x][y],G=!s&&P?f(o):0,z=!s&&I?f(d):0,K=J(M-z-(F+G));return _&&K>e+l&&m.push(x),I&&m.push(p.length),m},[]).map((m,x,_)=>{const N=Math.max(_[x-1]||0);return p.slice(N,m)}):[]}function v(p){return k?g(p,n):h(p)}return{groupSlides:v}}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:v,slidesToScroll:b,skipSnaps:p,containScroll:m,watchResize:x,watchSlides:_,watchDrag:N,watchFocus:P}=a,I=2,F=On(),M=F.measure(e),G=n.map(F.measure),z=Mn(l,u),K=z.measureSize(M),O=Wn(K),W=_n(d,K),B=!f&&!!m,Z=f||!!m,{slideSizes:se,slideSizesWithGaps:ee,startGap:X,endGap:ie}=oo(z,M,G,n,Z,i),c=ro(z,K,b,f,M,G,X,ie,I),{snaps:E,snapsAligned:R}=$n(z,W,M,G,c),H=-le(E)+le(ee),{snapsContained:T,scrollContainLimit:L}=Un(K,H,R,m,I),D=B?T:R,{limit:U}=Kn(H,D,f),te=bt(je(D),y,f),re=te.clone(),q=Ce(n),j=({dragHandler:be,scrollBody:Ze,scrollBounds:Xe,options:{loop:ze}})=>{ze||Xe.constrain(be.pointerDown()),Ze.seek()},V=({scrollBody:be,translate:Ze,location:Xe,offsetLocation:ze,previousLocation:Wo,scrollLooper:Ho,slideLooper:Vo,dragHandler:Go,animation:Uo,eventHandler:Nt,scrollBounds:Ko,options:{loop:_t}},Pt)=>{const Mt=be.settled(),qo=!Ko.shouldConstrain(),zt=_t?Mt:Mt&&qo,Rt=zt&&!Go.pointerDown();Rt&&Uo.stop();const Yo=Xe.get()*Pt+Wo.get()*(1-Pt);ze.set(Yo),_t&&(Ho.loop(be.direction()),Vo.loop()),Ze.to(ze.get()),Rt&&Nt.emit("settle"),zt||Nt.emit("scroll")},Y=Pn(s,i,()=>j(Je),be=>V(Je,be)),ne=.68,ce=D[te.get()],ue=Ae(ce),he=Ae(ce),me=Ae(ce),ke=Ae(ce),Fe=Vn(ue,me,he,ke,k,ne),Ye=Zn(f,D,H,U,ke),$e=Xn(Y,te,re,Fe,Ye,ke,o),Bt=Yn(U),Ft=Ie(),Ro=no(e,n,o,v),{slideRegistry:Et}=Jn(B,m,D,L,c,q),Oo=Qn(t,n,Et,$e,Fe,Ft,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,Fe,Ye,te,o,O,g,h,p,ne,N),eventStore:Ft,percentOfView:O,index:te,indexPrevious:re,limit:U,location:ue,offsetLocation:me,previousLocation:he,options:a,resizeHandler:Hn(e,o,i,n,z,x,F),scrollBody:Fe,scrollBounds:Gn(U,me,ke,Fe,O),scrollLooper:qn(H,U,me,[ue,me,he,ke]),scrollProgress:Bt,scrollSnapList:D.map(Bt.get),scrollSnaps:D,scrollTarget:Ye,scrollTo:$e,slideLooper:eo(z,K,H,se,ee,E,D,me,n),slideFocus:Oo,slidesHandler:to(e,o,_),slidesInView:Ro,slideIndexes:q,slideRegistry:Et,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 vt(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 _e(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,v=z;let b=!1,p,m=u(io,_e.globalOptions),x=u(m),_=[],N,P,I;function F(){const{container:q,slides:j}=x;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){b||(m=u(m,q),x=y(m),_=j||_,F(),p=M(x),f([m,..._.map(({options:V})=>V)]).forEach(V=>d.add(V,"change",z)),x.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),N=o.init(re,_)))}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(){b||(b=!0,d.clear(),K(),l.emit("destroy"),l.clear())}function W(q,j,V){!x.active||b||(p.scrollBody.useBaseFriction().useDuration(j===!0?0:x.duration),p.scrollTo.index(q,V||0))}function B(q){const j=p.index.add(1).get();W(j,q,-1)}function Z(q){const j=p.index.add(-1).get();W(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 E(){return p.indexPrevious.get()}function R(){return p.slidesInView.get()}function H(){return p.slidesInView.get(!1)}function T(){return N}function L(){return p}function D(){return t}function U(){return P}function te(){return I}const re={canScrollNext:se,canScrollPrev:ee,containerNode:U,internalEngine:L,destroy:O,off:g,on:k,emit:h,plugins:T,previousScrollSnap:E,reInit:v,rootNode:D,scrollNext:B,scrollPrev:Z,scrollProgress:ie,scrollSnapList:X,scrollTo:W,selectedScrollSnap:c,slideNodes:te,slidesInView:R,slidesNotInView:H};return G(e,n),setTimeout(()=>l.emit("init"),0),re}_e.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(()=>{We(n.current,t)||(n.current=t,l())},[t,l]),w.useEffect(()=>{Fn(s.current,e)||(s.current=e,l())},[e,l]),w.useEffect(()=>{if(Bn()&&o){_e.globalOptions=qe.globalOptions;const u=_e(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"},Tt=A.Spinner,xt=({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,v]=w.useState(0),[b,p]=w.useState([]),[m,x]=w.useState([]);w.useEffect(()=>{x(new Array((t==null?void 0:t.length)||0).fill(!1))},[t]);const _=w.useCallback(O=>{x(W=>{const B=[...W];return B[O]=!0,B})},[]),N=w.useMemo(()=>n*1e3,[n]),P=w.useCallback(()=>{g&&v(g.selectedScrollSnap())},[g]),I=w.useCallback(O=>g&&g.scrollTo(O),[g]),F=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()},N);return()=>{window.clearInterval(O)}},[e,N,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,W)=>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[W]&&r.jsx("div",{className:oe.loaderOverlay,children:r.jsx(Tt,{"aria-label":"Laster bilde"})}),r.jsx("img",{className:`${oe.image} ${m[W]?oe.loaded:oe.loadingImage}`,src:O.src,alt:O.alt,loading:W<G?"eager":"lazy",crossOrigin:"anonymous",onLoad:()=>_(W),onError:B=>{B.target.style.display="none",_(W)}})]})},`image-${W}-${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:F,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:b.map((O,W)=>{const B=W===h;return r.jsx("button",{type:"button",className:`${oe.dot} ${B?oe.dotActive:""}`,onClick:()=>I(W),"aria-label":`Gå til bilde ${W+1}`,"aria-selected":B,role:"tab"},`dot-${W}`)})})]})]})};xt.displayName="Carousel";const uo=A.Details,mo=A.Dialog,go=A.Divider,Q=A.Dropdown,po=A.ErrorSummary,fo=A.Field,St=A.FieldDescription,wt=A.FieldCounter;St.displayName="Field.Description",wt.displayName="Field.Counter";const ho=A.Fieldset,Ct=w.forwardRef((t,e)=>r.jsx(A.Heading,{ref:e,...t}));Ct.displayName="Heading";const ko=A.Input,jt=w.forwardRef((t,e)=>r.jsx(A.Label,{ref:e,...t}));jt.displayName="Label";const Le=A.Link,vo=A.List,bo=A.Pagination,yo=A.usePagination,Pe=w.forwardRef((t,e)=>r.jsx(A.Paragraph,{ref:e,...t}));Pe.displayName="Paragraph";const To=A.Popover,xo=A.Radio,So=A.useRadioGroup,Be=Object.assign(A.Search,{Button:A.SearchButton,ClearButton:A.SearchClear,Input:A.SearchInput}),wo=A.Select,Co=A.Skeleton,jo=A.SkipLink,Dt=A.EXPERIMENTAL_Suggestion;Dt.displayName="Suggestion";const Me=A.Switch,Do=A.Table,Io=A.Tabs,Ao=A.Tag,Lo=A.Textarea,Bo=A.Textfield,Fo=A.ToggleGroup,Eo=A.Tooltip,It=w.forwardRef((t,e)=>r.jsx(A.ValidationMessage,{ref:e,...t}));It.displayName="ValidationMessage";const No={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.
+(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.
@@ -47,7 +26,7 @@ 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"}}}},At=w.createContext(void 0),_o=({children:t})=>{const[e,n]=w.useState("NO"),s=i=>{const a=i.split(".");let o=No[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(At.Provider,{value:{language:e,setLanguage:n,t:s},children:t})},Lt=()=>{const t=w.useContext(At);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:v,showNavItems:b=!0,showMenuButton:p=!0,showHeaderExtension:m=!1,showModeToggle:x=!1,showLanguageSwitch:_=!1})=>{const[N,P]=w.useState(!1),[I,F]=w.useState(!1),[M,G]=w.useState(""),[z,K]=w.useState("light"),{language:O,setLanguage:W,t:B}=Lt(),[Z,se]=w.useState(!1);w.useEffect(()=>{const T="rk-header-inline-styles";if(typeof document>"u"||document.getElementById(T))return;const L=zo(S),D=document.createElement("style");D.id=T,D.textContent=L,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),F(!1),G("")},[t]),w.useEffect(()=>{if(!(typeof document>"u")&&N&&Z){const T=document.body.style.overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=T}}},[N,Z]),w.useEffect(()=>{if(typeof window>"u"||typeof window.matchMedia>"u")return;const T=window.matchMedia("(max-width: 850px)"),L=D=>se("matches"in D?D.matches:T.matches);return L(T),T.addEventListener?T.addEventListener("change",L):T.addListener(L),()=>{T.removeEventListener?T.removeEventListener("change",L):T.removeListener(L)}},[]),w.useEffect(()=>{if(typeof document>"u")return;const T=document.querySelector(`.${S.header}`);if(!T)return;const L=()=>{const U=T.offsetHeight;document.documentElement.style.setProperty("--header-height-mobile",`${U}px`)};L(),window.addEventListener("resize",L);const D=new ResizeObserver(()=>{L()});return D.observe(T),()=>{window.removeEventListener("resize",L),D.disconnect()}},[Z]),w.useEffect(()=>{if(typeof document>"u")return;const T=document.querySelector(`.${S.logoWrapper}`);if(!T)return;const L=()=>{const D=T.offsetWidth;document.documentElement.style.setProperty("--rk-logo-width",`${D}px`)};return L(),window.addEventListener("resize",L),()=>window.removeEventListener("resize",L)},[Z]),w.useEffect(()=>{if(typeof document>"u"||!I){document.documentElement.style.setProperty("--rk-search-overlay-height","0px");return}const T=document.querySelector(`.${S.searchOverlay}`);if(!T)return;const L=()=>{const U=T.offsetHeight;document.documentElement.style.setProperty("--rk-search-overlay-height",`${U}px`)};requestAnimationFrame(L),window.addEventListener("resize",L);const D=new ResizeObserver(L);return D.observe(T),()=>{window.removeEventListener("resize",L),D.disconnect()}},[I]);const X=()=>{const T=z==="light"?"dark":"light";K(T),document.documentElement.setAttribute("data-color-scheme",T)},ie=T=>{e&&(T.preventDefault(),e("home")),P(!1),F(!1)},c=()=>{P(!N),I&&F(!1),!N&&typeof document<"u"&&requestAnimationFrame(()=>{const T=document.querySelector(`.${S.header}`);if(T){const L=T.offsetHeight;document.documentElement.style.setProperty("--header-height-mobile",`${L}px`)}})},E=()=>{F(!I),N&&P(!1)},R=w.useMemo(()=>{if(!M.trim())return[];const T=M.toLowerCase();return Po.filter(L=>L.title.toLowerCase().startsWith(T))},[M]),H=T=>{e&&e(T),F(!1),G("")};return r.jsxs("header",{className:S.header,"data-open":N?"true":"false",children:[m&&r.jsx("div",{className:S.headerExtension,"data-color-scheme":"light",children:r.jsxs("div",{className:S.extensionContentWrapper,children:[x&&r.jsx("div",{className:S.extensionContent,children:r.jsx(Me,{"data-size":"sm",checked:z==="dark",onChange:X,label:B("header.darkMode"),color:"neutral","data-color-scheme":"light"})}),x&&_&&r.jsx("div",{className:S.extensionDivider}),_&&r.jsxs("div",{className:S.languageSwitch,children:[r.jsx("span",{className:S.languageLabel,children:B("header.language")}),r.jsxs(Q.TriggerContext,{children:[r.jsxs(Q.Trigger,{className:S.languageLink,"aria-label":B("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:()=>W("NO"),children:"Norsk (NO)"})}),r.jsx(Q.Item,{children:r.jsx(Q.Button,{onClick:()=>W("EN"),children:"English (EN)"})})]})})]})]})]})}),r.jsxs("div",{className:S.headerInner,children:[r.jsxs("div",{className:S.logoWrapper,children:[r.jsx(Le,{href:"/",className:`${S.logo} ${S.primaryLogo}`,"aria-label":B("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})]}),b&&v&&v.length>0&&!Z&&r.jsx("nav",{className:S.navItems,children:v.map((T,L)=>r.jsx(Le,{href:T.href,className:S.navLink,onClick:D=>{e&&(D.preventDefault(),e(T.href))},children:T.label},L))}),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||B("header.supportUs")})]}),!m&&y&&r.jsx("div",{className:S.themeToggle,children:r.jsx(Me,{checked:z==="dark",onChange:X,"aria-label":B("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:B("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:E,"aria-expanded":I,"aria-label":B(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:B(I?"header.close":"header.search")})]})}),(p||Z)&&r.jsxs(ge,{variant:"primary","data-color":"main","data-size":"md",onClick:c,"aria-expanded":N,"aria-label":B(N?"header.closeMenu":"header.openMenu"),className:S.menuButton,children:[N?r.jsx(de.XMarkIcon,{"aria-hidden":!0}):r.jsx(de.MenuHamburgerIcon,{"aria-hidden":!0}),r.jsx("span",{className:S.buttonText,children:B(N?"header.close":"header.menu")})]})]})]}),N&&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&&(_||x)&&r.jsxs("div",{className:S.menuUtilities,children:[_&&r.jsxs("div",{className:S.languageSwitch,children:[r.jsx("span",{className:S.languageLabel,children:B("header.language")}),r.jsxs(Q.TriggerContext,{children:[r.jsxs(Q.Trigger,{className:S.languageLink,"aria-label":B("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:()=>W("NO"),children:"Norsk (NO)"})}),r.jsx(Q.Item,{children:r.jsx(Q.Button,{onClick:()=>W("EN"),children:"English (EN)"})})]})})]})]}),x&&r.jsx("div",{className:S.extensionContent,children:r.jsx(Me,{"data-size":"sm",checked:z==="dark",onChange:X,label:B("header.darkMode"),color:"neutral","data-color-scheme":"light"})})]}),r.jsxs("div",{className:S.slotContent,children:[n,Z&&b&&v&&v.length>0&&r.jsx("nav",{className:S.navList,children:v.map((T,L)=>r.jsx(Le,{href:T.href,className:S.navLink,onClick:D=>{e&&(D.preventDefault(),e(T.href))},children:T.label},L))})]}),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(Be,{children:[r.jsx(Be.Input,{"aria-label":B("header.search"),placeholder:B("header.searchPlaceholder"),value:M,onChange:T=>G(T.target.value)}),r.jsx(Be.Button,{"aria-label":B("header.search")}),r.jsx(Be.ClearButton,{onClick:()=>G(""),"aria-label":B("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:B("header.suggestions")}),r.jsx("ul",{className:S.resultList,children:R.slice(0,5).map(T=>r.jsx("li",{className:S.resultItem,children:r.jsxs("button",{className:S.resultLink,onClick:()=>H(T.path),children:[r.jsx("span",{className:S.suggestionIcon,children:r.jsx(de.MagnifyingGlassIcon,{"aria-hidden":!0})}),r.jsx("span",{className:S.suggestionText,children:(()=>{const L=T.title.toLowerCase().indexOf(M.toLowerCase());if(L===-1)return r.jsx("span",{className:S.remainingText,children:T.title});const D=T.title.slice(0,L),U=T.title.slice(L,L+M.length),te=T.title.slice(L+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})]})})()})]})},T.id))}),R.length>5&&r.jsxs(Le,{href:"#","data-color":"neutral",className:S.viewAllLink,onClick:T=>{T.preventDefault(),e&&e(`search/${M}`),F(!1),G("")},children:[B("header.viewAll")," (",R.length,")"]})]}):r.jsx("div",{className:S.noResults,children:r.jsxs(Pe,{children:[B("header.noResults"),' "',M,'"']})})})]})})]})};function zo(t){const e=t;return`
+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);
@@ -173,4 +152,4 @@ Map design elements to our existing components where possible (e.g. Buttons, Hea
   [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=xt,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=_o,C.Link=Le,C.List=vo,C.Pagination=bo,C.Paragraph=Pe,C.Popover=To,C.Radio=xo,C.Search=Be,C.Select=wo,C.SkeletonLoader=Co,C.SkipLink=jo,C.Spinner=Tt,C.Suggestion=Dt,C.Switch=Me,C.Table=Do,C.Tabs=Io,C.Tag=Ao,C.Textarea=Lo,C.Textfield=Bo,C.ToggleGroup=Fo,C.Tooltip=Eo,C.ValidationMessage=It,C.useCheckboxGroup=Jt,C.useLanguage=Lt,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"})}));