@oslokommune/punkt-react 11.10.1 → 11.11.0

package/CHANGELOG.md

@@ -5,6 +5,139 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [11.11.0](https://github.com/oslokommune/punkt/compare/11.10.1...11.11.0) (2024-04-25)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+*  Accordion 🪗 (#1624). * feat(react):  accordion✨  (#1596)
+  
+  * feat(react): Accordion WIP
+  
+  * ✨ feat(react,css): Accordion
+  
+  - Update component specs: Accordion and Accordionitem
+  - Make AccordionItem and Accordion accessible
+  - Add props: compact, skin, defaultOpen, onClick
+  - Add React display of component
+  - Add descriptions
+  
+  * 🧹 Clean up
+  
+  * 🔒 npm install and update lockfile
+  
+  * ♻️ Refactor  & add state example
+  
+  * ✅ Add Accordion test
+  
+  - Renders without errors
+  - Is Ref working correctly
+  - Is children rendered
+  - Props properly applied
+  - Accessibility
+  
+  * ♻️ Refactor hover & open style as discussed
+  
+  - Remove blue background & white text for opened acc item
+  - Add purple border when active acc item
+  - Add underline on summary text and arrow movement when hovering
+  
+  * ♻️ Jan roter rundt i CSS igjen!
+  - Fix hovering and active state
+  
+  * ♻️ Refactor AccordionItem: optional toggleFn & prop
+  
+  The toggle function is now optional with the "open" prop. This is so that the user will not have to provide the open state of each items if they want the accordion to allow multiple open items at once (which is the default). If they do want to restrict the number of open items, an example will be provided on how to locally in their own code.
+  
+  * feat(react): ✨ add optional overriding toggleProps
+  
+  - Add working example of handling toggleState to limit number of opened accordionItems.
+  - Styling and opening works as intended.
+  - Both when having automatic state handling (all items are expandable) and when using toggleProps to override it.
+  - Add description of why we have chosen to do it like this.
+  
+  
+  
+  ---------
+  
+  Co-authored-by: Jan Schjetne <jan.schjetne@origo.oslo.kommune.no>
+  
+  * feat(vue): accordion 🪗✨ (#1617)
+  
+  * feat(vue): ✨ we tried something
+  
+  * feat(vue): add Vue version of Accordion+fix test✨
+  
+  * Add routing
+  
+  * Update Accordion.vue
+  
+  * add trine as codeowner
+  
+  ---------
+  
+  Co-authored-by: Jan Schjetne <jan.schjetne@origo.oslo.kommune.no>
+  
+  * Feature accordion docs ✨ #1549 (#1619)
+  
+  
+  * feat(docs,react): add pure html/css example...
+  
+  ..  and edit react✨
+  
+  * fix(docs): legg til mer doc
+  
+  * fix(docs): Improve UU and code examples + text
+  
+  * fix(docs): Småendringer på acc docs
+  
+  * fix(docs): Endre tekst. pga E-preventDefault()
+  
+  * fix(docs): use CheckList component
+  
+  ---------
+  
+  Signed-off-by: dependabot[bot] <support@github.com>
+  Co-authored-by: julielyng <35265191+julielyng@users.noreply.github.com>
+  Co-authored-by: Jan Schjetne <jan.schjetne@origo.oslo.kommune.no>
+  Co-authored-by: omatrebym <97092636+omatrebym@users.noreply.github.com>
+  Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
+  
+  * fix(css): adjust borderless & compact border width
+  
+  * fix(docs): Update component-status.json 📄
+  
+  * feat(docs):#1550 Lagt til innhold (#1643)
+  
+  * docs:#1550 Lagt til innhold
+  
+  * docs:#1550 Oppdatert innhold
+  
+  * add svg photos
+  
+  ---------
+  
+  Co-authored-by: julielyng <35265191+julielyng@users.noreply.github.com>
+  
+  ---------
+  
+  Signed-off-by: dependabot[bot] <support@github.com>
+  Co-authored-by: Jan Schjetne <jan.schjetne@origo.oslo.kommune.no>
+  Co-authored-by: julielyng <35265191+julielyng@users.noreply.github.com>
+  Co-authored-by: omatrebym <97092636+omatrebym@users.noreply.github.com>
+  Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
+
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [11.11.0](https://github.com/oslokommune/punkt/compare/11.10.0...11.11.0) (2024-04-19)
 
 ### ⚠ BREAKING CHANGES

package/dist/components/accordion/Accordion.d.ts

@@ -0,0 +1,15 @@
+import React, { ReactNode } from 'react';
+export interface IPktAccordion {
+    ariaLabelledById?: string;
+    className?: string;
+    children: ReactNode | ReactNode[];
+    /**
+     * @default compact: "false"
+     */
+    compact?: boolean;
+    /**
+     * @default skin: "borderless"
+     */
+    skin?: 'borderless' | 'outlined' | 'beige' | 'blue';
+}
+export declare const PktAccordion: React.ForwardRefExoticComponent<IPktAccordion & React.RefAttributes<HTMLDivElement>>;

package/dist/components/accordion/AccordionItem.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+/**
+ * @param toggleProps
+ *
+ * @description Send in an "isOpen" boolean and "onToggleClick" function
+ * to override the automatic toggling
+ */
+export interface IPktAccordionToggleProps {
+    isOpen: boolean;
+    onToggleClick: (e: React.MouseEvent, id: string) => void;
+}
+export interface IPktAccordionItem {
+    children?: React.ReactNode | React.ReactNode[];
+    className?: string;
+    id: string;
+    defaultOpen?: boolean;
+    title: string | React.ReactNode;
+    toggleProps?: IPktAccordionToggleProps;
+}
+export declare const PktAccordionItem: React.ForwardRefExoticComponent<IPktAccordionItem & React.RefAttributes<HTMLDetailsElement>>;

package/dist/components/icon/DefaultIconFetcher.d.ts

@@ -1,4 +1,4 @@
 import { IconFetcher } from './IconContext';
-export declare const defaultSvgPath = "https://punkt-cdn.oslo.kommune.no/11.10/icons/";
+export declare const defaultSvgPath = "https://punkt-cdn.oslo.kommune.no/11.11/icons/";
 declare const defaultIconFetcher: IconFetcher;
 export default defaultIconFetcher;

package/dist/punkt-react.es.js

@@ -631,7 +631,7 @@ Check the top-level render call using <` + m + ">.");
 }
 process.env.NODE_ENV === "production" ? We.exports = hn() : We.exports = kn();
 var ze = We.exports;
-const X = ze.Fragment, i = ze.jsx, h = ze.jsxs, Fe = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"></svg>', vn = "https://punkt-cdn.oslo.kommune.no/11.10/icons/";
+const X = ze.Fragment, i = ze.jsx, h = ze.jsxs, Fe = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"></svg>', vn = "https://punkt-cdn.oslo.kommune.no/11.11/icons/";
 function _n(e) {
   return new Promise((n) => setTimeout(n, e));
 }
@@ -1505,7 +1505,7 @@ const br = W(
         {
           className: "pkt-btn__icon pkt-btn__spinner",
           name: "spinner-blue",
-          path: "https://punkt-cdn.oslo.kommune.no/11.10/animations/"
+          path: "https://punkt-cdn.oslo.kommune.no/11.11/animations/"
         }
       ),
       o !== "label-only" && /* @__PURE__ */ i(w, { className: "pkt-btn__icon", name: r }),
@@ -1812,7 +1812,7 @@ const Ut = /* @__PURE__ */ mn(pr), yr = W(
                 name: "oslologo",
                 className: "pkt-header__logo-svg",
                 "aria-hidden": "true",
-                path: "https://punkt-cdn.oslo.kommune.no/11.10/logos/"
+                path: "https://punkt-cdn.oslo.kommune.no/11.11/logos/"
               }
             ) }) : /* @__PURE__ */ i(
               "button",
@@ -1826,7 +1826,7 @@ const Ut = /* @__PURE__ */ mn(pr), yr = W(
                     name: "oslologo",
                     className: "pkt-header__logo-svg",
                     "aria-hidden": "true",
-                    path: "https://punkt-cdn.oslo.kommune.no/11.10/logos/"
+                    path: "https://punkt-cdn.oslo.kommune.no/11.11/logos/"
                   }
                 )
               }
@@ -2110,7 +2110,7 @@ const wr = W(
             {
               name: S(s),
               "aria-label": "loading",
-              path: "https://punkt-cdn.oslo.kommune.no/11.10/animations/",
+              path: "https://punkt-cdn.oslo.kommune.no/11.11/animations/",
               className: `pkt-loader__svg pkt-loader__${s}`
             }
           ),

package/dist/punkt-react.umd.js

@@ -24,7 +24,7 @@ Check the render method of \``+t+"`."}return""}}function _r(t){{if(t!==void 0){v
 
 Check your code at `+p+":"+m+"."}return""}}var Ft={};function br(t){{var p=Lt();if(!p){var m=typeof t=="string"?t:t.displayName||t.name;m&&(p=`
 
-Check the top-level render call using <`+m+">.")}return p}}function Ut(t,p){{if(!t._store||t._store.validated||t.key!=null)return;t._store.validated=!0;var m=br(p);if(Ft[m])return;Ft[m]=!0;var N="";t&&t._owner&&t._owner!==qe.current&&(N=" It was passed a child from "+b(t._owner.type)+"."),ie(t),C('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',m,N),ie(null)}}function At(t,p){{if(typeof t!="object")return;if(Je(t))for(var m=0;m<t.length;m++){var N=t[m];He(N)&&Ut(N,p)}else if(He(t))t._store&&(t._store.validated=!0);else if(t){var O=I(t);if(typeof O=="function"&&O!==t.entries)for(var j=O.call(t),S;!(S=j.next()).done;)He(S.value)&&Ut(S.value,p)}}}function gr(t){{var p=t.type;if(p==null||typeof p=="string")return;var m;if(typeof p=="function")m=p.propTypes;else if(typeof p=="object"&&(p.$$typeof===f||p.$$typeof===k))m=p.propTypes;else return;if(m){var N=b(p);ir(m,t.props,"prop",N,t)}else if(p.PropTypes!==void 0&&!Ge){Ge=!0;var O=b(p);C("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",O||"Unknown")}typeof p.getDefaultProps=="function"&&!p.getDefaultProps.isReactClassApproved&&C("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}function Nr(t){{for(var p=Object.keys(t.props),m=0;m<p.length;m++){var N=p[m];if(N!=="children"&&N!=="key"){ie(t),C("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",N),ie(null);break}}t.ref!==null&&(ie(t),C("Invalid attribute `ref` supplied to `React.Fragment`."),ie(null))}}function Vt(t,p,m,N,O,j){{var S=X(t);if(!S){var P="";(t===void 0||typeof t=="object"&&t!==null&&Object.keys(t).length===0)&&(P+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var K=_r(O);K?P+=K:P+=Lt();var F;t===null?F="null":Je(t)?F="array":t!==void 0&&t.$$typeof===n?(F="<"+(b(t.type)||"Unknown")+" />",P=" Did you accidentally export a JSX literal instead of a component?"):F=typeof t,C("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",F,P)}var V=vr(t,p,m,O,j);if(V==null)return V;if(S){var G=p.children;if(G!==void 0)if(N)if(Je(G)){for(var oe=0;oe<G.length;oe++)At(G[oe],t);Object.freeze&&Object.freeze(G)}else C("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 At(G,t)}return t===a?Nr(V):gr(V),V}}function yr(t,p,m){return Vt(t,p,m,!0)}function wr(t,p,m){return Vt(t,p,m,!1)}var Er=wr,Cr=yr;ce.Fragment=a,ce.jsx=Er,ce.jsxs=Cr}()),ce}process.env.NODE_ENV==="production"?Re.exports=Yt():Re.exports=Kt();var Te=Re.exports;const H=Te.Fragment,i=Te.jsx,h=Te.jsxs,Oe='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"></svg>',Jt="https://punkt-cdn.oslo.kommune.no/11.10/icons/";function zt(e){return new Promise(n=>setTimeout(n,e))}const $e={},qt=async(e,n)=>{let r=0;for(;$e[n+e+".svg"]==="fetching"&&(r++,!(r>50));)await zt(50);return localStorage.getItem(n+e+".svg")?Promise.resolve(localStorage.getItem(n+e+".svg")):typeof window.fetch=="function"?($e[n+e+".svg"]="fetching",Promise.resolve(fetch(n+e+".svg").then(a=>a.ok?a.text():(console.error("Missing icon: "+n+e+".svg"),Oe)).then(a=>(a!==Oe&&localStorage.setItem(n+e+".svg",a),$e[n+e+".svg"]="fetched",a)))):Promise.resolve(Oe)},Gt={fetchIcon:async(e,n)=>qt(e,n||Jt)},Qe=g.createContext(Gt),w=({name:e,path:n,className:r="",...a})=>{const[l,o]=g.useState(null),c=g.useContext(Qe);return g.useEffect(()=>{e?c.fetchIcon(e,n).then(o):o(null)},[e,n]),l?i("span",{className:`pkt-icon ${r}`,dangerouslySetInnerHTML:{__html:l},...a}):null},et=g.forwardRef(({children:e,className:n,skin:r="info",closeAlert:a=!1,onClose:l,title:o,date:c,ariaLive:s="polite",compact:f=!1,...u},d)=>{const k=[n,"pkt-alert",r&&`pkt-alert--${r}`,f&&"pkt-alert--compact"].filter(Boolean).join(" "),[v,R]=g.useState(!0),x=()=>{R(!1),l&&l()};return v?h("div",{...u,className:k,"aria-live":s,ref:d,children:[i(w,{className:"pkt-alert__icon",name:r==="info"?"alert-information":`alert-${r}`}),a&&i("div",{className:"pkt-alert__close",children:i("button",{type:"button",className:"pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only",tabIndex:0,"aria-label":"close",onClick:x,children:i(w,{name:"close",className:"pkt-btn__icon","aria-hidden":"true"})})}),o&&i("div",{className:"pkt-alert__title",children:o}),i("div",{className:"pkt-alert__text",children:e}),c&&h("div",{className:"pkt-alert__date",children:["Sist oppdatert: ",c]})]}):null}),Ht=g.forwardRef(({href:e,text:n,onClick:r,className:a,...l},o)=>{const c=[a,"pkt-back-link"].filter(Boolean).join(" ");return i("nav",{ref:o,className:c,"aria-label":"Gå tilbake et steg",children:h("a",{href:e||"/",className:"pkt-link pkt-link--icon-left",onClick:f=>{r&&r(f)},...l,children:[i(w,{className:"pkt-back-link__icon pkt-icon pkt-link__icon",name:"chevron-thin-left","aria-hidden":"true"}),i("span",{className:"pkt-back-link__text",children:n||"Forsiden"})]})})});/**
+Check the top-level render call using <`+m+">.")}return p}}function Ut(t,p){{if(!t._store||t._store.validated||t.key!=null)return;t._store.validated=!0;var m=br(p);if(Ft[m])return;Ft[m]=!0;var N="";t&&t._owner&&t._owner!==qe.current&&(N=" It was passed a child from "+b(t._owner.type)+"."),ie(t),C('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',m,N),ie(null)}}function At(t,p){{if(typeof t!="object")return;if(Je(t))for(var m=0;m<t.length;m++){var N=t[m];He(N)&&Ut(N,p)}else if(He(t))t._store&&(t._store.validated=!0);else if(t){var O=I(t);if(typeof O=="function"&&O!==t.entries)for(var j=O.call(t),S;!(S=j.next()).done;)He(S.value)&&Ut(S.value,p)}}}function gr(t){{var p=t.type;if(p==null||typeof p=="string")return;var m;if(typeof p=="function")m=p.propTypes;else if(typeof p=="object"&&(p.$$typeof===f||p.$$typeof===k))m=p.propTypes;else return;if(m){var N=b(p);ir(m,t.props,"prop",N,t)}else if(p.PropTypes!==void 0&&!Ge){Ge=!0;var O=b(p);C("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",O||"Unknown")}typeof p.getDefaultProps=="function"&&!p.getDefaultProps.isReactClassApproved&&C("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}function Nr(t){{for(var p=Object.keys(t.props),m=0;m<p.length;m++){var N=p[m];if(N!=="children"&&N!=="key"){ie(t),C("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",N),ie(null);break}}t.ref!==null&&(ie(t),C("Invalid attribute `ref` supplied to `React.Fragment`."),ie(null))}}function Vt(t,p,m,N,O,j){{var S=X(t);if(!S){var P="";(t===void 0||typeof t=="object"&&t!==null&&Object.keys(t).length===0)&&(P+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var K=_r(O);K?P+=K:P+=Lt();var F;t===null?F="null":Je(t)?F="array":t!==void 0&&t.$$typeof===n?(F="<"+(b(t.type)||"Unknown")+" />",P=" Did you accidentally export a JSX literal instead of a component?"):F=typeof t,C("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",F,P)}var V=vr(t,p,m,O,j);if(V==null)return V;if(S){var G=p.children;if(G!==void 0)if(N)if(Je(G)){for(var oe=0;oe<G.length;oe++)At(G[oe],t);Object.freeze&&Object.freeze(G)}else C("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 At(G,t)}return t===a?Nr(V):gr(V),V}}function yr(t,p,m){return Vt(t,p,m,!0)}function wr(t,p,m){return Vt(t,p,m,!1)}var Er=wr,Cr=yr;ce.Fragment=a,ce.jsx=Er,ce.jsxs=Cr}()),ce}process.env.NODE_ENV==="production"?Re.exports=Yt():Re.exports=Kt();var Te=Re.exports;const H=Te.Fragment,i=Te.jsx,h=Te.jsxs,Oe='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"></svg>',Jt="https://punkt-cdn.oslo.kommune.no/11.11/icons/";function zt(e){return new Promise(n=>setTimeout(n,e))}const $e={},qt=async(e,n)=>{let r=0;for(;$e[n+e+".svg"]==="fetching"&&(r++,!(r>50));)await zt(50);return localStorage.getItem(n+e+".svg")?Promise.resolve(localStorage.getItem(n+e+".svg")):typeof window.fetch=="function"?($e[n+e+".svg"]="fetching",Promise.resolve(fetch(n+e+".svg").then(a=>a.ok?a.text():(console.error("Missing icon: "+n+e+".svg"),Oe)).then(a=>(a!==Oe&&localStorage.setItem(n+e+".svg",a),$e[n+e+".svg"]="fetched",a)))):Promise.resolve(Oe)},Gt={fetchIcon:async(e,n)=>qt(e,n||Jt)},Qe=g.createContext(Gt),w=({name:e,path:n,className:r="",...a})=>{const[l,o]=g.useState(null),c=g.useContext(Qe);return g.useEffect(()=>{e?c.fetchIcon(e,n).then(o):o(null)},[e,n]),l?i("span",{className:`pkt-icon ${r}`,dangerouslySetInnerHTML:{__html:l},...a}):null},et=g.forwardRef(({children:e,className:n,skin:r="info",closeAlert:a=!1,onClose:l,title:o,date:c,ariaLive:s="polite",compact:f=!1,...u},d)=>{const k=[n,"pkt-alert",r&&`pkt-alert--${r}`,f&&"pkt-alert--compact"].filter(Boolean).join(" "),[v,R]=g.useState(!0),x=()=>{R(!1),l&&l()};return v?h("div",{...u,className:k,"aria-live":s,ref:d,children:[i(w,{className:"pkt-alert__icon",name:r==="info"?"alert-information":`alert-${r}`}),a&&i("div",{className:"pkt-alert__close",children:i("button",{type:"button",className:"pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only",tabIndex:0,"aria-label":"close",onClick:x,children:i(w,{name:"close",className:"pkt-btn__icon","aria-hidden":"true"})})}),o&&i("div",{className:"pkt-alert__title",children:o}),i("div",{className:"pkt-alert__text",children:e}),c&&h("div",{className:"pkt-alert__date",children:["Sist oppdatert: ",c]})]}):null}),Ht=g.forwardRef(({href:e,text:n,onClick:r,className:a,...l},o)=>{const c=[a,"pkt-back-link"].filter(Boolean).join(" ");return i("nav",{ref:o,className:c,"aria-label":"Gå tilbake et steg",children:h("a",{href:e||"/",className:"pkt-link pkt-link--icon-left",onClick:f=>{r&&r(f)},...l,children:[i(w,{className:"pkt-back-link__icon pkt-icon pkt-link__icon",name:"chevron-thin-left","aria-hidden":"true"}),i("span",{className:"pkt-back-link__text",children:n||"Forsiden"})]})})});/**
  * @remix-run/router v1.14.0
  *
  * Copyright (c) Remix Software Inc.
@@ -51,8 +51,8 @@ Check the top-level render call using <`+m+">.")}return p}}function Ut(t,p){{if(
  * LICENSE.md file in the root directory of this source tree.
  *
  * @license MIT
- */function ae(){return ae=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var a in r)Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a])}return e},ae.apply(this,arguments)}function We(e,n){if(e==null)return{};var r={},a=Object.keys(e),l,o;for(o=0;o<a.length;o++)l=a[o],!(n.indexOf(l)>=0)&&(r[l]=e[l]);return r}const ve="get",_e="application/x-www-form-urlencoded";function be(e){return e!=null&&typeof e.tagName=="string"}function hn(e){return be(e)&&e.tagName.toLowerCase()==="button"}function kn(e){return be(e)&&e.tagName.toLowerCase()==="form"}function vn(e){return be(e)&&e.tagName.toLowerCase()==="input"}function _n(e){return!!(e.metaKey||e.altKey||e.ctrlKey||e.shiftKey)}function bn(e,n){return e.button===0&&(!n||n==="_self")&&!_n(e)}let ge=null;function gn(){if(ge===null)try{new FormData(document.createElement("form"),0),ge=!1}catch{ge=!0}return ge}const Nn=new Set(["application/x-www-form-urlencoded","multipart/form-data","text/plain"]);function Be(e){return e!=null&&!Nn.has(e)?(process.env.NODE_ENV!=="production"&&ne(!1,'"'+e+'" is not a valid `encType` for `<Form>`/`<fetcher.Form>` '+('and will default to "'+_e+'"')),null):e}function yn(e,n){let r,a,l,o,c;if(kn(e)){let s=e.getAttribute("action");a=s?ue(s,n):null,r=e.getAttribute("method")||ve,l=Be(e.getAttribute("enctype"))||_e,o=new FormData(e)}else if(hn(e)||vn(e)&&(e.type==="submit"||e.type==="image")){let s=e.form;if(s==null)throw new Error('Cannot submit a <button> or <input type="submit"> without a <form>');let f=e.getAttribute("formaction")||s.getAttribute("action");if(a=f?ue(f,n):null,r=e.getAttribute("formmethod")||s.getAttribute("method")||ve,l=Be(e.getAttribute("formenctype"))||Be(s.getAttribute("enctype"))||_e,o=new FormData(s,e),!gn()){let{name:u,type:d,value:k}=e;if(d==="image"){let v=u?u+".":"";o.append(v+"x","0"),o.append(v+"y","0")}else u&&o.append(u,k)}}else{if(be(e))throw new Error('Cannot submit element that is not <form>, <button>, or <input type="submit|image">');r=ve,a=null,l=_e,c=e}return o&&l==="text/plain"&&(c=o,o=void 0),{action:a,method:r.toLowerCase(),encType:l,formData:o,body:c}}const wn=["onClick","relative","reloadDocument","replace","state","target","to","preventScrollReset","unstable_viewTransition"],En=["aria-current","caseSensitive","className","end","style","to","unstable_viewTransition","children"],Cn=["fetcherKey","navigate","reloadDocument","replace","state","method","action","onSubmit","relative","preventScrollReset","unstable_viewTransition"],mt=y.createContext({isTransitioning:!1});process.env.NODE_ENV!=="production"&&(mt.displayName="ViewTransition");const xn=y.createContext(new Map);process.env.NODE_ENV!=="production"&&(xn.displayName="Fetchers"),process.env.NODE_ENV;const Pn=typeof window<"u"&&typeof window.document<"u"&&typeof window.document.createElement<"u",Sn=/^(?:[a-z][a-z0-9+.-]*:|\/\/)/i,Ne=y.forwardRef(function(n,r){let{onClick:a,relative:l,reloadDocument:o,replace:c,state:s,target:f,to:u,preventScrollReset:d,unstable_viewTransition:k}=n,v=We(n,wn),{basename:R}=y.useContext(Z),x,$=!1;if(typeof u=="string"&&Sn.test(u)&&(x=u,Pn))try{let _=new URL(window.location.href),D=u.startsWith("//")?new URL(_.protocol+u):new URL(u),U=ue(D.pathname,R);D.origin===_.origin&&U!=null?u=U+D.search+D.hash:$=!0}catch{process.env.NODE_ENV!=="production"&&ne(!1,'<Link to="'+u+'"> contains an invalid URL which will probably break when clicked - please update to a valid URL path.')}let I=sn(u,{relative:l}),E=$n(u,{replace:c,state:s,target:f,preventScrollReset:d,relative:l,unstable_viewTransition:k});function C(_){a&&a(_),_.defaultPrevented||E(_)}return y.createElement("a",ae({},v,{href:x||I,onClick:$||o?a:C,ref:r,target:f}))});process.env.NODE_ENV!=="production"&&(Ne.displayName="Link");const Rn=y.forwardRef(function(n,r){let{"aria-current":a="page",caseSensitive:l=!1,className:o="",end:c=!1,style:s,to:f,unstable_viewTransition:u,children:d}=n,k=We(n,En),v=pe(f,{relative:k.relative}),R=fe(),x=y.useContext(st),{navigator:$}=y.useContext(Z),I=x!=null&&Un(v)&&u===!0,E=$.encodeLocation?$.encodeLocation(v).pathname:v.pathname,C=R.pathname,_=x&&x.navigation&&x.navigation.location?x.navigation.location.pathname:null;l||(C=C.toLowerCase(),_=_?_.toLowerCase():null,E=E.toLowerCase());const D=E!=="/"&&E.endsWith("/")?E.length-1:E.length;let U=C===E||!c&&C.startsWith(E)&&C.charAt(D)==="/",M=_!=null&&(_===E||!c&&_.startsWith(E)&&_.charAt(E.length)==="/"),W={isActive:U,isPending:M,isTransitioning:I},q=U?a:void 0,B;typeof o=="function"?B=o(W):B=[o,U?"active":null,M?"pending":null,I?"transitioning":null].filter(Boolean).join(" ");let X=typeof s=="function"?s(W):s;return y.createElement(Ne,ae({},k,{"aria-current":q,className:B,ref:r,style:X,to:f,unstable_viewTransition:u}),typeof d=="function"?d(W):d)});process.env.NODE_ENV!=="production"&&(Rn.displayName="NavLink");const Tn=y.forwardRef((e,n)=>{let{fetcherKey:r,navigate:a,reloadDocument:l,replace:o,state:c,method:s=ve,action:f,onSubmit:u,relative:d,preventScrollReset:k,unstable_viewTransition:v}=e,R=We(e,Cn),x=Ln(),$=Fn(f,{relative:d}),I=s.toLowerCase()==="get"?"get":"post",E=C=>{if(u&&u(C),C.defaultPrevented)return;C.preventDefault();let _=C.nativeEvent.submitter,D=(_==null?void 0:_.getAttribute("formmethod"))||s;x(_||C.currentTarget,{fetcherKey:r,method:D,navigate:a,replace:o,state:c,relative:d,preventScrollReset:k,unstable_viewTransition:v})};return y.createElement("form",ae({ref:n,method:I,action:$,onSubmit:l?u:E},R))});process.env.NODE_ENV!=="production"&&(Tn.displayName="Form"),process.env.NODE_ENV;var ye;(function(e){e.UseScrollRestoration="useScrollRestoration",e.UseSubmit="useSubmit",e.UseSubmitFetcher="useSubmitFetcher",e.UseFetcher="useFetcher",e.useViewTransitionState="useViewTransitionState"})(ye||(ye={}));var ht;(function(e){e.UseFetcher="useFetcher",e.UseFetchers="useFetchers",e.UseScrollRestoration="useScrollRestoration"})(ht||(ht={}));function On(e){return e+" must be used within a data router.  See https://reactrouter.com/routers/picking-a-router."}function kt(e){let n=y.useContext(ke);return n||(process.env.NODE_ENV!=="production"?L(!1,On(e)):L(!1)),n}function $n(e,n){let{target:r,replace:a,state:l,preventScrollReset:o,relative:c,unstable_viewTransition:s}=n===void 0?{}:n,f=cn(),u=fe(),d=pe(e,{relative:c});return y.useCallback(k=>{if(bn(k,r)){k.preventDefault();let v=a!==void 0?a:De(u)===De(d);f(e,{replace:v,state:l,preventScrollReset:o,relative:c,unstable_viewTransition:s})}},[u,f,d,a,l,r,e,o,c,s])}function jn(){if(typeof document>"u")throw new Error("You are calling submit during the server render. Try calling submit within a `useEffect` or callback instead.")}let Dn=0,In=()=>"__"+String(++Dn)+"__";function Ln(){let{router:e}=kt(ye.UseSubmit),{basename:n}=y.useContext(Z),r=dn();return y.useCallback(function(a,l){l===void 0&&(l={}),jn();let{action:o,method:c,encType:s,formData:f,body:u}=yn(a,n);if(l.navigate===!1){let d=l.fetcherKey||In();e.fetch(d,r,l.action||o,{preventScrollReset:l.preventScrollReset,formData:f,body:u,formMethod:l.method||c,formEncType:l.encType||s,unstable_flushSync:l.unstable_flushSync})}else e.navigate(l.action||o,{preventScrollReset:l.preventScrollReset,formData:f,body:u,formMethod:l.method||c,formEncType:l.encType||s,replace:l.replace,state:l.state,fromRouteId:r,unstable_flushSync:l.unstable_flushSync,unstable_viewTransition:l.unstable_viewTransition})},[e,n,r])}function Fn(e,n){let{relative:r}=n===void 0?{}:n,{basename:a}=y.useContext(Z),l=y.useContext(re);l||(process.env.NODE_ENV!=="production"?L(!1,"useFormAction must be used inside a RouteContext"):L(!1));let[o]=l.matches.slice(-1),c=ae({},pe(e||".",{relative:r})),s=fe();if(e==null){c.search=s.search;let f=new URLSearchParams(c.search);f.has("index")&&f.get("index")===""&&(f.delete("index"),c.search=f.toString()?"?"+f.toString():"")}return(!e||e===".")&&o.route.index&&(c.search=c.search?c.search.replace(/^\?/,"?index&"):"?index"),a!=="/"&&(c.pathname=c.pathname==="/"?a:Le([a,c.pathname])),De(c)}function Un(e,n){n===void 0&&(n={});let r=y.useContext(mt);r==null&&(process.env.NODE_ENV!=="production"?L(!1,"`unstable_useViewTransitionState` must be used within `react-router-dom`'s `RouterProvider`.  Did you accidentally import `RouterProvider` from `react-router`?"):L(!1));let{basename:a}=kt(ye.useViewTransitionState),l=pe(e,{relative:n.relative});if(!r.isTransitioning)return!1;let o=ue(r.currentLocation.pathname,a)||r.currentLocation.pathname,c=ue(r.nextLocation.pathname,a)||r.nextLocation.pathname;return at(l.pathname,c)!=null||at(l.pathname,o)!=null}const An=g.forwardRef(({breadcrumbs:e,navigationType:n,className:r,...a},l)=>{const o=e.slice(0,4),c=o[o.length-2],s=[r,"pkt-breadcrumbs"].filter(Boolean).join(" ");return h("nav",{ref:l,"aria-label":"brødsmulemeny",className:s,children:[i("ol",{className:"pkt-breadcrumbs__list pkt-breadcrumbs--desktop",children:o.map((f,u)=>i("li",{className:"pkt-breadcrumbs__item",children:u===o.length-1?i("span",{className:"pkt-breadcrumbs__label","aria-current":"true",children:i("span",{className:"pkt-breadcrumbs__text",children:f.text})}):n==="router"?h(Ne,{to:f.href,className:"pkt-link pkt-link--icon-right pkt-breadcrumbs__label pkt-breadcrumbs__link",...a,children:[i(w,{className:"pkt-icon pkt-breadcrumbs__icon pkt-link__icon",name:"chevron-thin-right"}),i("span",{className:"pkt-breadcrumbs__text",children:f.text})]}):h("a",{href:f.href,className:"pkt-link pkt-link--icon-right pkt-breadcrumbs__label pkt-breadcrumbs__link",...a,children:[i(w,{className:"pkt-icon pkt-breadcrumbs__icon pkt-link__icon",name:"chevron-thin-right"}),i("span",{className:"pkt-breadcrumbs__text",children:f.text})]})},`breadcrumb-${u}`))}),n==="router"?h(Ne,{to:c.href,className:"pkt-link pkt-link--icon-left pkt-breadcrumbs--mobile",...a,children:[i(w,{className:"pkt-back-link__icon pkt-icon pkt-link__icon",name:"chevron-thin-left"}),i("span",{className:"pkt-breadcrumbs__text",children:c.text})]}):h("a",{href:c.href,className:"pkt-link pkt-link--icon-left pkt-breadcrumbs--mobile",...a,children:[i(w,{className:"pkt-back-link__icon pkt-icon pkt-link__icon",name:"chevron-thin-left"}),i("span",{className:"pkt-breadcrumbs__text",children:c.text})]})]})}),le=g.forwardRef(({children:e,className:n,iconName:r="user",secondIconName:a="user",size:l="medium",skin:o="primary",type:c="button",variant:s="label-only",color:f,isLoading:u=!1,...d},k)=>{const v=[n,"pkt-btn",l&&`pkt-btn--${l}`,o&&`pkt-btn--${o}`,s&&`pkt-btn--${s}`,f&&`pkt-btn--${f}`,u&&"pkt-btn--active"].filter(Boolean).join(" ");return h("button",{...d,className:v,type:c,ref:k,children:[u&&i(w,{className:"pkt-btn__icon pkt-btn__spinner",name:"spinner-blue",path:"https://punkt-cdn.oslo.kommune.no/11.10/animations/"}),s!=="label-only"&&i(w,{className:"pkt-btn__icon",name:r}),i("span",{className:"pkt-btn__text",children:e}),s==="icons-right-and-left"&&i(w,{className:"pkt-btn__icon",name:a})]})});le.displayName="PktButton";const vt=g.forwardRef(({id:e,hasTile:n=!1,disabled:r=!1,label:a,labelPosition:l="right",hideLabel:o=!1,checkHelptext:c,hasError:s=!1,isSwitch:f=!1,className:u,...d},k)=>{const v=[u,"pkt-input-check"].filter(Boolean).join(" ");return i("div",{className:v,children:h("div",{className:`pkt-input-check__input ${n?"pkt-input-check__input--tile":""} ${r&&n?"pkt-input-check__input--tile-disabled":""}`,children:[a&&l==="left"&&h("label",{className:`pkt-input-check__input-label ${o?"pkt-sr-only":""}`,htmlFor:e,children:[a,c&&i("div",{className:"pkt-input-check__input-helptext",children:c})]}),i("input",{ref:k,className:`pkt-input-check__input-checkbox ${s?"pkt-input-check__input-checkbox--error":""}`,type:"checkbox",role:f?"switch":"checkbox",id:e,disabled:r,...d}),a&&l==="right"&&h("label",{className:`pkt-input-check__input-label ${o?"pkt-sr-only":""}`,htmlFor:e,children:[a,c&&i("div",{className:"pkt-input-check__input-helptext",children:c})]})]})})});vt.displayName="PktCheckbox";const Vn=({columnOne:e,columnTwo:n,socialLinks:r,className:a,personvernOgInfoLink:l="https://www.oslo.kommune.no/personvern-og-informasjonskapsler/",tilgjengelighetLink:o="https://www.oslo.kommune.no/tilgjengelighet/"})=>{var s,f;const c=[a,"pkt-footer"].filter(Boolean).join(" ");return i("footer",{className:c,"data-mode":"dark",children:h("div",{className:"pkt-footer__container",children:[h("div",{className:"pkt-grid pkt-grid--rowgap-size-32 pkt-grid--gap-size-16",children:[h("div",{className:"pkt-footer__column pkt-cell pkt-cell--span12 pkt-cell--span4-laptop-up",children:[i("h2",{className:"pkt-footer__title",children:e.title}),h("ul",{className:"pkt-footer__list",children:[e.text&&i("li",{className:"pkt-footer__text",children:e.text}),(s=e.links)==null?void 0:s.map((u,d)=>i("li",{className:"pkt-footer__list-item",children:h("a",{className:`pkt-footer__link ${u.external?"pkt-link--external":""}`,href:u.href,target:u.openInNewTab?"_blank":"_self",rel:u.openInNewTab?"noopener noreferrer":void 0,children:[i(w,{className:"pkt-footer__link-icon",name:"chevron-right"}),u.text]})},`links-${d}`))]})]}),h("div",{className:"pkt-footer__column pkt-cell pkt-cell--span12 pkt-cell--span4-laptop-up",children:[i("h2",{className:"pkt-footer__title",children:n.title}),h("ul",{className:"pkt-footer__list",children:[n.text&&i("li",{className:"pkt-footer__text",children:n.text}),(f=n.links)==null?void 0:f.map((u,d)=>i("li",{className:"pkt-footer__list-item",children:h("a",{className:`pkt-footer__link ${u.external?"pkt-link--external":""}`,href:u.href,target:u.openInNewTab?"_blank":"_self",rel:u.openInNewTab?"noopener noreferrer":void 0,children:[i(w,{className:"pkt-footer__link-icon",name:"chevron-right"}),u.text]})},`links-${d}`))]})]}),h("div",{className:"pkt-footer__column pkt-cell pkt-cell--span12 pkt-cell--span4-laptop-up",children:[i("h2",{className:"pkt-footer__title",children:"Om nettstedet"}),h("ul",{className:"pkt-footer__list",children:[i("li",{className:"pkt-footer__list-item",children:h("a",{className:"pkt-footer__link",href:l,children:[i(w,{className:"pkt-footer__link-icon",name:"chevron-right"}),"Personvern og informasjonskapsler"]})}),i("li",{className:"pkt-footer__list-item",children:h("a",{className:"pkt-footer__link",href:o,children:[i(w,{className:"pkt-footer__link-icon",name:"chevron-right"}),"Tilgjengelighet"]})})]})]})]}),r&&h("div",{className:"pkt-footer__social","aria-label":"standard lenker",children:[i("div",{className:"pkt-footer__social-languages",children:r.filter(u=>u.language).map((u,d)=>i("div",{className:"pkt-footer__social-language",children:i("a",{href:u.href,"aria-label":`til ${u.language} versjon av nettsiden`,target:u.openInNewTab?"_blank":"_self",rel:u.openInNewTab?"noopener noreferrer":void 0,children:u.language})},`sociallinks-language-${d}`))}),i("div",{className:"pkt-footer__social-icons",children:r.filter(u=>u.iconName).map((u,d)=>i(g.Fragment,{children:i("a",{href:u.href,"aria-label":`til ${u.iconName}`,className:"pkt-footer__social-icon-link",target:u.openInNewTab?"_blank":"_self",rel:u.openInNewTab?"noopener noreferrer":void 0,children:i(w,{className:"pkt-footer__social-icon",name:u.iconName})})},`sociallinks-${d}`))})]})]})})},Wn=({links:e=[],personvernOgInfoLink:n="https://www.oslo.kommune.no/personvern-og-informasjonskapsler/",tilgjengelighetLink:r="https://www.oslo.kommune.no/tilgjengelighet/",className:a})=>{const l=[a,"pkt-footer-simple"].filter(Boolean).join(" ");return i("footer",{className:l,"data-mode":"dark",children:i("div",{className:"pkt-footer-simple__container",children:h("ul",{className:"pkt-footer-simple__list",children:[e.map((o,c)=>i("li",{className:"pkt-footer-simple__list-item",children:h("a",{className:`pkt-footer-simple__link ${o.external?" pkt-link--external":""}`,href:o.href,target:o.openInNewTab?"_blank":"_self",rel:o.openInNewTab?"noopener noreferrer":void 0,children:[i(w,{className:"pkt-footer-simple__link-icon",name:"chevron-right"}),o.text]})},c)),i("li",{className:"pkt-footer-simple__list-item",children:h("a",{className:"pkt-footer-simple__link",href:n,children:[i(w,{className:"pkt-footer-simple__link-icon",name:"chevron-right"}),"Personvern og informasjonskapsler"]})}),i("li",{className:"pkt-footer-simple__list-item",children:h("a",{className:"pkt-footer-simple__link",href:r,children:[i(w,{className:"pkt-footer-simple__link-icon",name:"chevron-right"}),"Tilgjengelighet"]})})]})})})};var _t={exports:{}};/*!
+ */function ae(){return ae=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var a in r)Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a])}return e},ae.apply(this,arguments)}function We(e,n){if(e==null)return{};var r={},a=Object.keys(e),l,o;for(o=0;o<a.length;o++)l=a[o],!(n.indexOf(l)>=0)&&(r[l]=e[l]);return r}const ve="get",_e="application/x-www-form-urlencoded";function be(e){return e!=null&&typeof e.tagName=="string"}function hn(e){return be(e)&&e.tagName.toLowerCase()==="button"}function kn(e){return be(e)&&e.tagName.toLowerCase()==="form"}function vn(e){return be(e)&&e.tagName.toLowerCase()==="input"}function _n(e){return!!(e.metaKey||e.altKey||e.ctrlKey||e.shiftKey)}function bn(e,n){return e.button===0&&(!n||n==="_self")&&!_n(e)}let ge=null;function gn(){if(ge===null)try{new FormData(document.createElement("form"),0),ge=!1}catch{ge=!0}return ge}const Nn=new Set(["application/x-www-form-urlencoded","multipart/form-data","text/plain"]);function Be(e){return e!=null&&!Nn.has(e)?(process.env.NODE_ENV!=="production"&&ne(!1,'"'+e+'" is not a valid `encType` for `<Form>`/`<fetcher.Form>` '+('and will default to "'+_e+'"')),null):e}function yn(e,n){let r,a,l,o,c;if(kn(e)){let s=e.getAttribute("action");a=s?ue(s,n):null,r=e.getAttribute("method")||ve,l=Be(e.getAttribute("enctype"))||_e,o=new FormData(e)}else if(hn(e)||vn(e)&&(e.type==="submit"||e.type==="image")){let s=e.form;if(s==null)throw new Error('Cannot submit a <button> or <input type="submit"> without a <form>');let f=e.getAttribute("formaction")||s.getAttribute("action");if(a=f?ue(f,n):null,r=e.getAttribute("formmethod")||s.getAttribute("method")||ve,l=Be(e.getAttribute("formenctype"))||Be(s.getAttribute("enctype"))||_e,o=new FormData(s,e),!gn()){let{name:u,type:d,value:k}=e;if(d==="image"){let v=u?u+".":"";o.append(v+"x","0"),o.append(v+"y","0")}else u&&o.append(u,k)}}else{if(be(e))throw new Error('Cannot submit element that is not <form>, <button>, or <input type="submit|image">');r=ve,a=null,l=_e,c=e}return o&&l==="text/plain"&&(c=o,o=void 0),{action:a,method:r.toLowerCase(),encType:l,formData:o,body:c}}const wn=["onClick","relative","reloadDocument","replace","state","target","to","preventScrollReset","unstable_viewTransition"],En=["aria-current","caseSensitive","className","end","style","to","unstable_viewTransition","children"],Cn=["fetcherKey","navigate","reloadDocument","replace","state","method","action","onSubmit","relative","preventScrollReset","unstable_viewTransition"],mt=y.createContext({isTransitioning:!1});process.env.NODE_ENV!=="production"&&(mt.displayName="ViewTransition");const xn=y.createContext(new Map);process.env.NODE_ENV!=="production"&&(xn.displayName="Fetchers"),process.env.NODE_ENV;const Pn=typeof window<"u"&&typeof window.document<"u"&&typeof window.document.createElement<"u",Sn=/^(?:[a-z][a-z0-9+.-]*:|\/\/)/i,Ne=y.forwardRef(function(n,r){let{onClick:a,relative:l,reloadDocument:o,replace:c,state:s,target:f,to:u,preventScrollReset:d,unstable_viewTransition:k}=n,v=We(n,wn),{basename:R}=y.useContext(Z),x,$=!1;if(typeof u=="string"&&Sn.test(u)&&(x=u,Pn))try{let _=new URL(window.location.href),D=u.startsWith("//")?new URL(_.protocol+u):new URL(u),U=ue(D.pathname,R);D.origin===_.origin&&U!=null?u=U+D.search+D.hash:$=!0}catch{process.env.NODE_ENV!=="production"&&ne(!1,'<Link to="'+u+'"> contains an invalid URL which will probably break when clicked - please update to a valid URL path.')}let I=sn(u,{relative:l}),E=$n(u,{replace:c,state:s,target:f,preventScrollReset:d,relative:l,unstable_viewTransition:k});function C(_){a&&a(_),_.defaultPrevented||E(_)}return y.createElement("a",ae({},v,{href:x||I,onClick:$||o?a:C,ref:r,target:f}))});process.env.NODE_ENV!=="production"&&(Ne.displayName="Link");const Rn=y.forwardRef(function(n,r){let{"aria-current":a="page",caseSensitive:l=!1,className:o="",end:c=!1,style:s,to:f,unstable_viewTransition:u,children:d}=n,k=We(n,En),v=pe(f,{relative:k.relative}),R=fe(),x=y.useContext(st),{navigator:$}=y.useContext(Z),I=x!=null&&Un(v)&&u===!0,E=$.encodeLocation?$.encodeLocation(v).pathname:v.pathname,C=R.pathname,_=x&&x.navigation&&x.navigation.location?x.navigation.location.pathname:null;l||(C=C.toLowerCase(),_=_?_.toLowerCase():null,E=E.toLowerCase());const D=E!=="/"&&E.endsWith("/")?E.length-1:E.length;let U=C===E||!c&&C.startsWith(E)&&C.charAt(D)==="/",M=_!=null&&(_===E||!c&&_.startsWith(E)&&_.charAt(E.length)==="/"),W={isActive:U,isPending:M,isTransitioning:I},q=U?a:void 0,B;typeof o=="function"?B=o(W):B=[o,U?"active":null,M?"pending":null,I?"transitioning":null].filter(Boolean).join(" ");let X=typeof s=="function"?s(W):s;return y.createElement(Ne,ae({},k,{"aria-current":q,className:B,ref:r,style:X,to:f,unstable_viewTransition:u}),typeof d=="function"?d(W):d)});process.env.NODE_ENV!=="production"&&(Rn.displayName="NavLink");const Tn=y.forwardRef((e,n)=>{let{fetcherKey:r,navigate:a,reloadDocument:l,replace:o,state:c,method:s=ve,action:f,onSubmit:u,relative:d,preventScrollReset:k,unstable_viewTransition:v}=e,R=We(e,Cn),x=Ln(),$=Fn(f,{relative:d}),I=s.toLowerCase()==="get"?"get":"post",E=C=>{if(u&&u(C),C.defaultPrevented)return;C.preventDefault();let _=C.nativeEvent.submitter,D=(_==null?void 0:_.getAttribute("formmethod"))||s;x(_||C.currentTarget,{fetcherKey:r,method:D,navigate:a,replace:o,state:c,relative:d,preventScrollReset:k,unstable_viewTransition:v})};return y.createElement("form",ae({ref:n,method:I,action:$,onSubmit:l?u:E},R))});process.env.NODE_ENV!=="production"&&(Tn.displayName="Form"),process.env.NODE_ENV;var ye;(function(e){e.UseScrollRestoration="useScrollRestoration",e.UseSubmit="useSubmit",e.UseSubmitFetcher="useSubmitFetcher",e.UseFetcher="useFetcher",e.useViewTransitionState="useViewTransitionState"})(ye||(ye={}));var ht;(function(e){e.UseFetcher="useFetcher",e.UseFetchers="useFetchers",e.UseScrollRestoration="useScrollRestoration"})(ht||(ht={}));function On(e){return e+" must be used within a data router.  See https://reactrouter.com/routers/picking-a-router."}function kt(e){let n=y.useContext(ke);return n||(process.env.NODE_ENV!=="production"?L(!1,On(e)):L(!1)),n}function $n(e,n){let{target:r,replace:a,state:l,preventScrollReset:o,relative:c,unstable_viewTransition:s}=n===void 0?{}:n,f=cn(),u=fe(),d=pe(e,{relative:c});return y.useCallback(k=>{if(bn(k,r)){k.preventDefault();let v=a!==void 0?a:De(u)===De(d);f(e,{replace:v,state:l,preventScrollReset:o,relative:c,unstable_viewTransition:s})}},[u,f,d,a,l,r,e,o,c,s])}function jn(){if(typeof document>"u")throw new Error("You are calling submit during the server render. Try calling submit within a `useEffect` or callback instead.")}let Dn=0,In=()=>"__"+String(++Dn)+"__";function Ln(){let{router:e}=kt(ye.UseSubmit),{basename:n}=y.useContext(Z),r=dn();return y.useCallback(function(a,l){l===void 0&&(l={}),jn();let{action:o,method:c,encType:s,formData:f,body:u}=yn(a,n);if(l.navigate===!1){let d=l.fetcherKey||In();e.fetch(d,r,l.action||o,{preventScrollReset:l.preventScrollReset,formData:f,body:u,formMethod:l.method||c,formEncType:l.encType||s,unstable_flushSync:l.unstable_flushSync})}else e.navigate(l.action||o,{preventScrollReset:l.preventScrollReset,formData:f,body:u,formMethod:l.method||c,formEncType:l.encType||s,replace:l.replace,state:l.state,fromRouteId:r,unstable_flushSync:l.unstable_flushSync,unstable_viewTransition:l.unstable_viewTransition})},[e,n,r])}function Fn(e,n){let{relative:r}=n===void 0?{}:n,{basename:a}=y.useContext(Z),l=y.useContext(re);l||(process.env.NODE_ENV!=="production"?L(!1,"useFormAction must be used inside a RouteContext"):L(!1));let[o]=l.matches.slice(-1),c=ae({},pe(e||".",{relative:r})),s=fe();if(e==null){c.search=s.search;let f=new URLSearchParams(c.search);f.has("index")&&f.get("index")===""&&(f.delete("index"),c.search=f.toString()?"?"+f.toString():"")}return(!e||e===".")&&o.route.index&&(c.search=c.search?c.search.replace(/^\?/,"?index&"):"?index"),a!=="/"&&(c.pathname=c.pathname==="/"?a:Le([a,c.pathname])),De(c)}function Un(e,n){n===void 0&&(n={});let r=y.useContext(mt);r==null&&(process.env.NODE_ENV!=="production"?L(!1,"`unstable_useViewTransitionState` must be used within `react-router-dom`'s `RouterProvider`.  Did you accidentally import `RouterProvider` from `react-router`?"):L(!1));let{basename:a}=kt(ye.useViewTransitionState),l=pe(e,{relative:n.relative});if(!r.isTransitioning)return!1;let o=ue(r.currentLocation.pathname,a)||r.currentLocation.pathname,c=ue(r.nextLocation.pathname,a)||r.nextLocation.pathname;return at(l.pathname,c)!=null||at(l.pathname,o)!=null}const An=g.forwardRef(({breadcrumbs:e,navigationType:n,className:r,...a},l)=>{const o=e.slice(0,4),c=o[o.length-2],s=[r,"pkt-breadcrumbs"].filter(Boolean).join(" ");return h("nav",{ref:l,"aria-label":"brødsmulemeny",className:s,children:[i("ol",{className:"pkt-breadcrumbs__list pkt-breadcrumbs--desktop",children:o.map((f,u)=>i("li",{className:"pkt-breadcrumbs__item",children:u===o.length-1?i("span",{className:"pkt-breadcrumbs__label","aria-current":"true",children:i("span",{className:"pkt-breadcrumbs__text",children:f.text})}):n==="router"?h(Ne,{to:f.href,className:"pkt-link pkt-link--icon-right pkt-breadcrumbs__label pkt-breadcrumbs__link",...a,children:[i(w,{className:"pkt-icon pkt-breadcrumbs__icon pkt-link__icon",name:"chevron-thin-right"}),i("span",{className:"pkt-breadcrumbs__text",children:f.text})]}):h("a",{href:f.href,className:"pkt-link pkt-link--icon-right pkt-breadcrumbs__label pkt-breadcrumbs__link",...a,children:[i(w,{className:"pkt-icon pkt-breadcrumbs__icon pkt-link__icon",name:"chevron-thin-right"}),i("span",{className:"pkt-breadcrumbs__text",children:f.text})]})},`breadcrumb-${u}`))}),n==="router"?h(Ne,{to:c.href,className:"pkt-link pkt-link--icon-left pkt-breadcrumbs--mobile",...a,children:[i(w,{className:"pkt-back-link__icon pkt-icon pkt-link__icon",name:"chevron-thin-left"}),i("span",{className:"pkt-breadcrumbs__text",children:c.text})]}):h("a",{href:c.href,className:"pkt-link pkt-link--icon-left pkt-breadcrumbs--mobile",...a,children:[i(w,{className:"pkt-back-link__icon pkt-icon pkt-link__icon",name:"chevron-thin-left"}),i("span",{className:"pkt-breadcrumbs__text",children:c.text})]})]})}),le=g.forwardRef(({children:e,className:n,iconName:r="user",secondIconName:a="user",size:l="medium",skin:o="primary",type:c="button",variant:s="label-only",color:f,isLoading:u=!1,...d},k)=>{const v=[n,"pkt-btn",l&&`pkt-btn--${l}`,o&&`pkt-btn--${o}`,s&&`pkt-btn--${s}`,f&&`pkt-btn--${f}`,u&&"pkt-btn--active"].filter(Boolean).join(" ");return h("button",{...d,className:v,type:c,ref:k,children:[u&&i(w,{className:"pkt-btn__icon pkt-btn__spinner",name:"spinner-blue",path:"https://punkt-cdn.oslo.kommune.no/11.11/animations/"}),s!=="label-only"&&i(w,{className:"pkt-btn__icon",name:r}),i("span",{className:"pkt-btn__text",children:e}),s==="icons-right-and-left"&&i(w,{className:"pkt-btn__icon",name:a})]})});le.displayName="PktButton";const vt=g.forwardRef(({id:e,hasTile:n=!1,disabled:r=!1,label:a,labelPosition:l="right",hideLabel:o=!1,checkHelptext:c,hasError:s=!1,isSwitch:f=!1,className:u,...d},k)=>{const v=[u,"pkt-input-check"].filter(Boolean).join(" ");return i("div",{className:v,children:h("div",{className:`pkt-input-check__input ${n?"pkt-input-check__input--tile":""} ${r&&n?"pkt-input-check__input--tile-disabled":""}`,children:[a&&l==="left"&&h("label",{className:`pkt-input-check__input-label ${o?"pkt-sr-only":""}`,htmlFor:e,children:[a,c&&i("div",{className:"pkt-input-check__input-helptext",children:c})]}),i("input",{ref:k,className:`pkt-input-check__input-checkbox ${s?"pkt-input-check__input-checkbox--error":""}`,type:"checkbox",role:f?"switch":"checkbox",id:e,disabled:r,...d}),a&&l==="right"&&h("label",{className:`pkt-input-check__input-label ${o?"pkt-sr-only":""}`,htmlFor:e,children:[a,c&&i("div",{className:"pkt-input-check__input-helptext",children:c})]})]})})});vt.displayName="PktCheckbox";const Vn=({columnOne:e,columnTwo:n,socialLinks:r,className:a,personvernOgInfoLink:l="https://www.oslo.kommune.no/personvern-og-informasjonskapsler/",tilgjengelighetLink:o="https://www.oslo.kommune.no/tilgjengelighet/"})=>{var s,f;const c=[a,"pkt-footer"].filter(Boolean).join(" ");return i("footer",{className:c,"data-mode":"dark",children:h("div",{className:"pkt-footer__container",children:[h("div",{className:"pkt-grid pkt-grid--rowgap-size-32 pkt-grid--gap-size-16",children:[h("div",{className:"pkt-footer__column pkt-cell pkt-cell--span12 pkt-cell--span4-laptop-up",children:[i("h2",{className:"pkt-footer__title",children:e.title}),h("ul",{className:"pkt-footer__list",children:[e.text&&i("li",{className:"pkt-footer__text",children:e.text}),(s=e.links)==null?void 0:s.map((u,d)=>i("li",{className:"pkt-footer__list-item",children:h("a",{className:`pkt-footer__link ${u.external?"pkt-link--external":""}`,href:u.href,target:u.openInNewTab?"_blank":"_self",rel:u.openInNewTab?"noopener noreferrer":void 0,children:[i(w,{className:"pkt-footer__link-icon",name:"chevron-right"}),u.text]})},`links-${d}`))]})]}),h("div",{className:"pkt-footer__column pkt-cell pkt-cell--span12 pkt-cell--span4-laptop-up",children:[i("h2",{className:"pkt-footer__title",children:n.title}),h("ul",{className:"pkt-footer__list",children:[n.text&&i("li",{className:"pkt-footer__text",children:n.text}),(f=n.links)==null?void 0:f.map((u,d)=>i("li",{className:"pkt-footer__list-item",children:h("a",{className:`pkt-footer__link ${u.external?"pkt-link--external":""}`,href:u.href,target:u.openInNewTab?"_blank":"_self",rel:u.openInNewTab?"noopener noreferrer":void 0,children:[i(w,{className:"pkt-footer__link-icon",name:"chevron-right"}),u.text]})},`links-${d}`))]})]}),h("div",{className:"pkt-footer__column pkt-cell pkt-cell--span12 pkt-cell--span4-laptop-up",children:[i("h2",{className:"pkt-footer__title",children:"Om nettstedet"}),h("ul",{className:"pkt-footer__list",children:[i("li",{className:"pkt-footer__list-item",children:h("a",{className:"pkt-footer__link",href:l,children:[i(w,{className:"pkt-footer__link-icon",name:"chevron-right"}),"Personvern og informasjonskapsler"]})}),i("li",{className:"pkt-footer__list-item",children:h("a",{className:"pkt-footer__link",href:o,children:[i(w,{className:"pkt-footer__link-icon",name:"chevron-right"}),"Tilgjengelighet"]})})]})]})]}),r&&h("div",{className:"pkt-footer__social","aria-label":"standard lenker",children:[i("div",{className:"pkt-footer__social-languages",children:r.filter(u=>u.language).map((u,d)=>i("div",{className:"pkt-footer__social-language",children:i("a",{href:u.href,"aria-label":`til ${u.language} versjon av nettsiden`,target:u.openInNewTab?"_blank":"_self",rel:u.openInNewTab?"noopener noreferrer":void 0,children:u.language})},`sociallinks-language-${d}`))}),i("div",{className:"pkt-footer__social-icons",children:r.filter(u=>u.iconName).map((u,d)=>i(g.Fragment,{children:i("a",{href:u.href,"aria-label":`til ${u.iconName}`,className:"pkt-footer__social-icon-link",target:u.openInNewTab?"_blank":"_self",rel:u.openInNewTab?"noopener noreferrer":void 0,children:i(w,{className:"pkt-footer__social-icon",name:u.iconName})})},`sociallinks-${d}`))})]})]})})},Wn=({links:e=[],personvernOgInfoLink:n="https://www.oslo.kommune.no/personvern-og-informasjonskapsler/",tilgjengelighetLink:r="https://www.oslo.kommune.no/tilgjengelighet/",className:a})=>{const l=[a,"pkt-footer-simple"].filter(Boolean).join(" ");return i("footer",{className:l,"data-mode":"dark",children:i("div",{className:"pkt-footer-simple__container",children:h("ul",{className:"pkt-footer-simple__list",children:[e.map((o,c)=>i("li",{className:"pkt-footer-simple__list-item",children:h("a",{className:`pkt-footer-simple__link ${o.external?" pkt-link--external":""}`,href:o.href,target:o.openInNewTab?"_blank":"_self",rel:o.openInNewTab?"noopener noreferrer":void 0,children:[i(w,{className:"pkt-footer-simple__link-icon",name:"chevron-right"}),o.text]})},c)),i("li",{className:"pkt-footer-simple__list-item",children:h("a",{className:"pkt-footer-simple__link",href:n,children:[i(w,{className:"pkt-footer-simple__link-icon",name:"chevron-right"}),"Personvern og informasjonskapsler"]})}),i("li",{className:"pkt-footer-simple__list-item",children:h("a",{className:"pkt-footer-simple__link",href:r,children:[i(w,{className:"pkt-footer-simple__link-icon",name:"chevron-right"}),"Tilgjengelighet"]})})]})})})};var _t={exports:{}};/*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
 	http://jedwatson.github.io/classnames
-*/(function(e){(function(){var n={}.hasOwnProperty;function r(){for(var a=[],l=0;l<arguments.length;l++){var o=arguments[l];if(o){var c=typeof o;if(c==="string"||c==="number")a.push(o);else if(Array.isArray(o)){if(o.length){var s=r.apply(null,o);s&&a.push(s)}}else if(c==="object"){if(o.toString!==Object.prototype.toString&&!o.toString.toString().includes("[native code]")){a.push(o.toString());continue}for(var f in o)n.call(o,f)&&o[f]&&a.push(f)}}}return a.join(" ")}e.exports?(r.default=r,e.exports=r):window.classNames=r})()})(_t);var Bn=_t.exports;const bt=Mt(Bn),Mn=g.forwardRef(({className:e,logoLink:n="https://www.oslo.kommune.no/",serviceName:r,fixed:a=!0,scrollToHide:l=!0,user:o,userMenu:c,representing:s,userOptions:f,userMenuFooter:u,canChangeRepresentation:d=!0,showMenuButton:k=!1,showLogOutButton:v=!1,openMenu:R,logOut:x,changeRepresentation:$,...I},E)=>{const C=g.useMemo(()=>typeof(o==null?void 0:o.lastLoggedIn)=="string"?o.lastLoggedIn:o!=null&&o.lastLoggedIn?new Date(o.lastLoggedIn).toLocaleString("nb-NO",{year:"numeric",month:"long",day:"numeric"}):"",[o]),[_,D]=g.useState(!1),[U,M]=g.useState(0),[W,q]=g.useState(!1),B=g.useRef(null);g.useEffect(()=>(document.addEventListener("mouseup",J),window.addEventListener("scroll",Y),()=>{document.removeEventListener("mouseup",J),window.removeEventListener("scroll",Y)}));const X=()=>{q(!W)},J=b=>{B.current&&!B.current.contains(b.target)&&q(!1)},Y=()=>{if(l){const b=window.pageYOffset||document.documentElement.scrollTop;if(b<0||Math.abs(b-U)<60)return;D(b>U),M(b)}};return h("header",{...I,id:"pkt-header","data-testid":"pkt-header","aria-label":"Topp",className:bt(e,"pkt-header",{"pkt-header--fixed":a,"pkt-header--scroll-to-hide":l,"pkt-header--hidden":_}),ref:E,children:[h("div",{className:"pkt-header__logo",children:[typeof n=="string"?i("a",{"aria-label":"Tilbake til forside",className:"pkt-header__logo-link",href:n,children:i(w,{name:"oslologo",className:"pkt-header__logo-svg","aria-hidden":"true",path:"https://punkt-cdn.oslo.kommune.no/11.10/logos/"})}):i("button",{"aria-label":"Tilbake til forside",className:"pkt-link-button pkt-link pkt-header__logo-link",onClick:n,children:i(w,{name:"oslologo",className:"pkt-header__logo-svg","aria-hidden":"true",path:"https://punkt-cdn.oslo.kommune.no/11.10/logos/"})}),i("span",{className:"pkt-header__logo-service",children:r})]}),i("nav",{className:"pkt-header__actions",children:h("ul",{className:"pkt-header__actions-row",children:[k&&i("li",{children:i(le,{className:"pkt-header__menu-btn",skin:"secondary",variant:"icon-right",iconName:"menu",onClick:R,children:"Meny"})}),(o||s)&&h("li",{"data-testid":"usermenu",className:`pkt-header--has-dropdown ${W&&!_?"pkt-header--open-dropdown":""}`,ref:B,children:[h("button",{className:"pkt-header__user-btn pkt-btn pkt-btn--secondary pkt-btn--icons-right-and-left",type:"button",role:"button","aria-controls":"pktUserDropdown","aria-expanded":W,onClick:X,children:[i(w,{name:"user",className:"pkt-btn__icon"}),i("span",{className:"pkt-header__user-fullname",children:(s==null?void 0:s.name)||(o==null?void 0:o.name)}),i("span",{className:"pkt-header__user-shortname",children:(s==null?void 0:s.shortname)||(o==null?void 0:o.shortname)}),i(w,{name:"chevron-thin-down",className:"pkt-btn--closed"}),i(w,{name:"chevron-thin-up",className:"pkt-btn--open"})]}),h("ul",{id:"pktUserDropdown",className:"pkt-header__dropdown pkt-user-menu",children:[o&&h("li",{children:[i("div",{className:"pkt-user-menu__label",children:"Pålogget som"}),i("div",{className:"pkt-user-menu__name",children:o.name}),o.lastLoggedIn&&h("div",{className:"pkt-user-menu__last-logged-in",children:["Sist pålogget: ",i("time",{children:C})]})]}),c&&i("li",{children:i("ul",{className:"pkt-list",children:c.map((b,A)=>i("li",{children:typeof b.target=="string"?h("a",{href:b.target,className:"pkt-link",children:[b.iconName&&i(w,{name:b.iconName,className:"pkt-link__icon"}),b.title]}):h("button",{className:"pkt-link-button pkt-link",onClick:b.target,children:[b.iconName&&i(w,{name:b.iconName,className:"pkt-link__icon"}),b.title]})},`userMenu-${A}`))})}),(s||d)&&h("li",{children:[s&&h(H,{children:[i("div",{className:"pkt-user-menu__label",children:"Representerer"}),i("div",{className:"pkt-user-menu__name",children:s.name}),s.orgNumber&&h("div",{className:"pkt-user-menu__org-number",children:["Org.nr. ",s.orgNumber]})]}),i("ul",{className:"pkt-list mt-size-16",children:d&&i("li",{children:h("button",{className:"pkt-link-button pkt-link",onClick:$,children:[i(w,{name:"cogwheel",className:"pkt-link__icon"}),"Endre organisasjon"]})})})]}),i("li",{children:i("ul",{className:"pkt-list",children:(f||!v)&&h(H,{children:[f==null?void 0:f.map((b,A)=>i("li",{children:typeof b.target=="string"?h("a",{href:b.target,className:"pkt-link",children:[b.iconName&&i(w,{name:b.iconName,className:"pkt-link__icon"}),b.title]}):h("button",{className:"pkt-link-button pkt-link",onClick:b.target,children:[b.iconName&&i(w,{name:b.iconName,className:"pkt-link__icon"}),b.title]})},`userOptions-${A}`)),!v&&i("li",{children:h("button",{className:"pkt-link-button pkt-link",onClick:x,children:[i(w,{name:"exit",className:"pkt-link__icon"}),"Logg ut"]})})]})})}),u&&i("li",{className:"footer",children:i("ul",{className:"pkt-list-horizontal bordered",children:u.map((b,A)=>i("li",{children:typeof b.target=="string"?i("a",{href:b.target,className:"pkt-link",children:b.title}):i("button",{className:"pkt-link-button pkt-link",onClick:b.target,children:b.title})},`userMenuFooter-${A}`))})})]})]}),v&&i("li",{children:i(le,{className:"pkt-header__user-btn pkt-header__user-btn-logout",iconName:"exit",role:"button",onClick:x,skin:"secondary",variant:"icon-right",children:"Logg ut"})})]})})]})}),gt=g.forwardRef(({label:e,id:n,children:r,...a},l)=>h("div",{className:"pkt-form-group",children:[i("label",{htmlFor:n,className:"pkt-form-label",children:e}),i("input",{className:"pkt-form-input",id:n,...a,ref:l}),r]}));gt.displayName="PktInput";const de=g.forwardRef(({forId:e,label:n,helptext:r,helptextDropdown:a,helptextDropdownButton:l,optionalTag:o=!1,optionalText:c="Valgfritt",requiredTag:s=!1,requiredText:f="Må fylles ut",hasError:u,errorMessage:d,disabled:k,inline:v,ariaDescribedby:R,useWrapper:x=!0,children:$,className:I,hasFieldset:E=!1},C)=>{const[_,D]=g.useState(!1),U=()=>{D(!_)},M=()=>o?"pkt-tag pkt-tag--small pkt-tag--thin-text pkt-tag--blue-light":s?"pkt-tag pkt-tag--small pkt-tag--thin-text pkt-tag--beige":"",W=o?c:s?f:"",q=k?"pkt-inputwrapper--disabled":"",B=v?"pkt-inputwrapper--inline":"",X=u?"pkt-inputwrapper--error":"",J=!!a&&a!=="",Y=l||'Les mer <span class="pkt-sr-only">om inputfeltet</span>',b=E?"fieldset":J?"div":"label",A=E?"legend":J?"h2":"span",z=R||(r?`${e}-helptext`:void 0);return h("div",{className:["pkt-inputwrapper",I,q,B,X].join(" "),ref:C,children:[x?i(H,{children:h(b,{htmlFor:E?void 0:e,"aria-describedby":J?void 0:R,className:`pkt-inputwrapper__label${E?" pkt-inputwrapper__fieldset":""}`,children:[h(A,{id:`${e}-label`,className:`${E?" pkt-inputwrapper__legend":""}`,children:[n,W!==""&&i("span",{className:M(),children:W})]}),r&&i("div",{className:"pkt-inputwrapper__helptext",id:`${e}-helptext`,dangerouslySetInnerHTML:{__html:r}}),J&&a!==""&&h("div",{children:[i(le,{skin:"tertiary",size:"small",variant:"icon-right",iconName:_?"chevron-thin-up":"chevron-thin-down",className:"pkt-inputwrapper__helptext-expandable pkt-link pkt-link--icon-right",onClick:U,children:i("span",{dangerouslySetInnerHTML:{__html:Y}})}),i("div",{className:`pkt-inputwrapper__helptext ${_?"pkt-inputwrapper__helptext-expandable-open":"pkt-inputwrapper__helptext-expandable-closed"}`,children:i("span",{dangerouslySetInnerHTML:{__html:a}})}),!E&&i("label",{htmlFor:e,className:"pkt-sr-only","aria-describedby":z,children:n})]}),i(H,{children:$})]})}):h(H,{children:[!E&&i("label",{htmlFor:e,className:"pkt-sr-only","aria-describedby":z,id:`${e}-label`,children:n}),$]}),u&&d&&i("div",{children:i(et,{skin:"error","aria-live":"assertive",id:`${e}-error`,compact:!0,children:d})})]})});de.displayName="PktInputWrapper";const Nt=g.forwardRef(({children:e,className:n,iconName:r="user",openInNewTab:a=!1,skin:l="normal",href:o="#",external:c=!1,title:s,...f},u)=>{const d=[n,"pkt-linkcard",l&&`pkt-linkcard--${l}`].filter(Boolean).join(" ");return h("a",{...f,href:o,className:`pkt-linkcard pkt-link ${d}`,target:a?"_blank":"_self",rel:a?"noopener noreferrer":void 0,ref:u,children:[i(w,{className:"pkt-link__icon",name:r}),h("div",{className:"pkt-linkcard__content",children:[i("div",{className:`pkt-linkcard__title ${c?"pkt-link pkt-link--external":""}`,children:s}),i("div",{className:"pkt-linkcard__text",children:e})]})]})});Nt.displayName="PktLinkCard";const Yn=g.forwardRef(({className:e,message:n,size:r="medium",inline:a=!1,isLoading:l=!0,variant:o="rainbow",delay:c=0,children:s,...f},u)=>{const d=`pkt-loader pkt-loader--${r}`,[k,v]=g.useState(!(c>0));c>0&&setTimeout(()=>{v(!0)},c);const R=x=>x==="shapes"?"loader":x==="blue"?"spinner-blue":"spinner";return i("div",{role:"status","aria-live":"polite","aria-busy":l,className:`pkt-loader--${a?"inline":"box"}  ${e||""}`,children:l?i(H,{children:k?h("div",{className:d,"data-testid":"pkt-loader",ref:u,...f,children:[i(w,{name:R(o),"aria-label":"loading",path:"https://punkt-cdn.oslo.kommune.no/11.10/animations/",className:`pkt-loader__svg pkt-loader__${o}`}),n&&i("p",{children:n})]}):null}):s})}),Kn=({children:e,className:n,compact:r=!1,skin:a="beige",title:l,...o})=>{const c=[n,"pkt-messagebox",a&&`pkt-messagebox--${a}`,r&&"pkt-messagebox--compact"].filter(Boolean).join(" ");return h("div",{...o,className:c,children:[l&&i("div",{className:"pkt-messagebox__title",children:l}),i("div",{className:"pkt-messagebox__text",children:e})]})},yt=g.forwardRef(({id:e,name:n,label:r,className:a,hasTile:l=!1,disabled:o=!1,checkHelptext:c,hasError:s=!1,...f},u)=>{const d=[a,"pkt-input-check"].filter(Boolean).join(" ");return i("div",{className:d,children:h("div",{className:`pkt-input-check__input ${l?"pkt-input-check__input--tile":""} ${o&&l?"pkt-input-check__input--tile-disabled":""}`,children:[i("input",{ref:u,className:`pkt-input-check__input-checkbox ${s?"pkt-input-check__input-checkbox--error":""}`,type:"radio",id:e,disabled:o,name:n,...f}),h("label",{className:"pkt-input-check__input-label",htmlFor:e,children:[r,c&&i("div",{className:"pkt-input-check__input-helptext",children:c})]})]})})});yt.displayName="PktRadioButton";const Jn=g.forwardRef(({action:e,appearance:n="local",disabled:r=!1,fullwidth:a=!1,id:l,label:o,method:c="get",name:s,placeholder:f="Søk…",suggestions:u,value:d="",onSearch:k,onSuggestionClick:v,...R},x)=>{const $=(_,D)=>{_?_():v&&v(D)},I=`pkt-searchinput pkt-searchinput--${n} ${a?"pkt-searchinput--fullwidth":""}`;return h(e?"form":"div",{className:I,onSubmit:k&&(()=>k(d)),action:e||void 0,method:e?c:void 0,role:"search",ref:x,...R,children:[h(o?"label":"div",{htmlFor:o?l:void 0,className:o?"pkt-inputwrapper__label":"",children:[o&&i(H,{children:o}),h("div",{className:n==="local"?"pkt-input__container":"pkt-searchinput__field",children:[i("input",{className:`pkt-input ${a?"pkt-input--fullwidth":""}`,type:"search",name:s||l,id:l,placeholder:f,value:d,disabled:r,onInput:k&&(_=>k(_.currentTarget.value)),autoComplete:"off","aria-autocomplete":"list","aria-controls":`${l}-suggestions`}),i(le,{className:`pkt-searchinput__button ${n==="local"?"pkt-input-icon":""}`,variant:"icon-only",iconName:"magnifying-glass-big",skin:n==="local"?"tertiary":"primary",color:n==="global"?"yellow":void 0,type:"submit",disabled:r,onClick:k&&(()=>k(d)),onKeyUp:k&&(_=>_.key==="Enter"&&k(d)),children:o||f})]})]}),u&&i("ul",{id:`${l}-suggestions`,className:"pkt-searchinput__suggestions","aria-live":"assertive",children:u.map((_,D)=>i("li",{children:g.createElement(_.href?"a":_.onClick?"button":"div",{href:_.href,className:`pkt-searchinput__suggestion ${_.onClick?"pkt-link-button":""} ${_.href||_.onClick?"pkt-searchinput__suggestion--has-hover":""}`,type:_.onClick?"button":void 0,onClick:()=>$(_.onClick,D),onKeyUp:()=>$(_.onClick,D)},h(H,{children:[_.title&&i("h3",{className:"pkt-searchinput__suggestion-title",children:_.title}),_.text&&i("p",{className:"pkt-searchinput__suggestion-text",children:_.text})]}))},`search-suggestion-${D}`))})]})}),zn=g.forwardRef(({ariaDescribedby:e,ariaLabelledby:n,children:r,className:a,disabled:l=!1,errorMessage:o,hasError:c,helptext:s,helptextDropdown:f,helptextDropdownButton:u,id:d,inline:k=!1,fullwidth:v=!1,label:R,name:x,optionalTag:$=!1,optionalText:I,requiredTag:E=!1,requiredText:C,..._},D)=>{const U=[a,"pkt-select"].join(" ");return i(de,{className:U,forId:d,label:R,helptext:s,helptextDropdown:f,helptextDropdownButton:u,optionalTag:$,optionalText:I,requiredTag:E,requiredText:C,hasError:c,errorMessage:o,disabled:l,inline:k,ariaDescribedby:e,children:i("select",{ref:D,className:`pkt-input ${v?"pkt-input--fullwidth":""}`,"aria-invalid":c,"aria-errormessage":`${d}-error`,"aria-labelledby":n||`${d}-label`,disabled:l,id:d,name:x||d,..._,children:r})})}),qn=({isResponsive:e,children:n})=>e?i("div",{className:"pkt-table-container",children:n}):i(H,{children:n}),Gn=({isResponsive:e,modifiers:{info:n=!1,success:r=!1,strong:a=!1,shadow:l=!1}={},children:o})=>i(qn,{isResponsive:e,children:i("table",{className:bt("pkt-table",{"pkt-table--info":n,"pkt-table--success":r,"pkt-table--strong":a,"pkt-table--shadow":l}),children:o})}),Hn=({children:e})=>i("td",{className:"pkt-table__th",children:e}),Xn=({children:e})=>i("th",{className:"pkt-table__th",children:e}),we=g.forwardRef(({children:e,className:n,skin:r="blue",textStyle:a="normal-text",size:l="medium",closeTag:o=!1,iconName:c="",type:s="button",ariaLabel:f="close",onClick:u=()=>{}},d)=>{const[k,v]=g.useState(!1),R=E=>{v(!0),u(E)},x=["pkt-tag",l&&`pkt-tag--${l}`,r&&`pkt-tag--${r}`,a&&`pkt-tag--${a}`,n].filter(Boolean).join(" "),$=["pkt-tag","pkt-btn","pkt-btn--tertiary",l&&`pkt-tag--${l}`,r&&`pkt-tag--${r}`,a&&`pkt-tag--${a}`,c&&o?"pkt-btn--icons-right-and-left":null,o&&!c?"pkt-btn--icon-right":null,n].filter(Boolean).join(" "),I=!k;return o&&c?i(H,{children:I&&h("button",{className:$,type:s,"aria-label":f,onClick:R,ref:d,children:[i(w,{className:"pkt-tag__icon",name:c}),e,i(w,{className:"pkt-tag__close-btn",name:"close"})]})}):o?i(H,{children:I&&h("button",{className:$,type:s,"aria-label":f,onClick:R,ref:d,children:[i(w,{className:"pkt-tag__close-btn",name:"close"}),e]})}):c?h("span",{className:x,children:[i(w,{className:"pkt-tag__icon",name:c}),e]}):i("span",{className:x,children:e})});we.displayName="PktTag";const Zn=g.forwardRef(({arrowNav:e=!0,tabs:n,onTabSelected:r},a)=>{const l=g.useRef([]);g.useEffect(()=>{l.current=l.current.slice(0,n.length)},[n]);const o=(s,f)=>{f.action&&f.action(s),r&&r(s)},c=(s,f)=>{var u,d;e&&(f.code==="ArrowLeft"&&s!==0&&((u=l.current[s-1])==null||u.focus()),f.code==="ArrowRight"&&s<n.length-1&&((d=l.current[s+1])==null||d.focus()),(f.code==="ArrowDown"||f.code==="Space")&&o(s,n[s]))};return i("div",{className:"pkt-tabs",ref:a,children:i("div",{className:"pkt-tabs__list",role:e?"tablist":"navigation",children:n.map((s,f)=>i(g.Fragment,{children:s.href?h("a",{"aria-selected":!!s.active,role:e?"tab":void 0,href:s.href,"aria-controls":s.controls,className:`pkt-tabs__link ${s.active?"active":""}`,onKeyUp:u=>c(f,u),onClick:()=>o(f,s),tabIndex:s.active||!e?void 0:-1,ref:u=>{l.current[f]=u},children:[s.icon&&i(w,{name:s.icon,className:"pkt-icon--small"}),s.text,s.tag&&i(we,{skin:s.tag.skin,size:"small",children:s.tag.text})]}):h("button",{"aria-selected":!!s.active,role:e?"tab":void 0,type:"button","aria-controls":s.controls,className:`pkt-tabs__button pkt-link-button ${s.active?"active":""}`,onKeyUp:u=>c(f,u),onClick:()=>o(f,s),tabIndex:s.active||!e?void 0:-1,ref:u=>{l.current[f]=u},children:[s.icon&&i(w,{name:s.icon,className:"pkt-icon--small"}),s.text,s.tag&&i(we,{skin:s.tag.skin,size:"small",children:s.tag.text})]},"b-"+f)},f))})})}),Qn=g.forwardRef(({id:e,ariaDescribedby:n,ariaLabelledby:r,counter:a,counterMaxLength:l,className:o,disabled:c,errorMessage:s,hasError:f,helptext:u,helptextDropdown:d,helptextDropdownButton:k,inline:v,fullwidth:R=!1,label:x,name:$,optionalTag:I=!1,optionalText:E,requiredTag:C=!1,requiredText:_,placeholder:D,rows:U,useWrapper:M=!0,onChange:W,...q},B)=>{const X=[o,"pkt-textinput","pkt-textarea"].join(" "),J=r||`${e}-label`,Y=g.useRef(null),[b,A]=g.useState(0),z=ee=>{var te,me;if(a&&A(((me=(te=ee.currentTarget)==null?void 0:te.value)==null?void 0:me.length)||0),W)return W(ee)};return g.useEffect(()=>{var ee,te;typeof B=="function"&&B(Y.current),a&&A(((te=(ee=Y==null?void 0:Y.current)==null?void 0:ee.value)==null?void 0:te.length)||0)},[B]),h(de,{ariaDescribedby:n,className:X,disabled:c,errorMessage:s,forId:e,hasError:f,helptext:u,helptextDropdown:d,helptextDropdownButton:k,inline:v,label:x,optionalTag:I,optionalText:E,requiredTag:C,requiredText:_,useWrapper:M,children:[i("textarea",{ref:Y,className:`pkt-input ${R?"pkt-input--fullwidth":""} ${l&&b>l?"pkt-input--counter-error":""}`,name:$||e,id:e,placeholder:D,disabled:c,rows:U,"aria-labelledby":J,"aria-invalid":f,"aria-errormessage":`${e}-error`,...q,onChange:z}),a&&h("div",{className:"pkt-input__counter","aria-live":"polite","aria-atomic":!0,children:[b||0,l&&`/${l}`]})]})}),er=g.forwardRef(({id:e,ariaDescribedby:n,ariaLabelledby:r,autocomplete:a="off",className:l,disabled:o=!1,errorMessage:c,hasError:s=!1,helptext:f,helptextDropdown:u,helptextDropdownButton:d,iconNameRight:k,inline:v=!1,fullwidth:R=!1,label:x,name:$,optionalTag:I=!1,optionalText:E,requiredTag:C=!1,requiredText:_,placeholder:D,prefix:U,suffix:M,type:W="text",useWrapper:q=!0,omitSearchIcon:B=!1,value:X,...J},Y)=>{const b=[l,"pkt-textinput"].join(" "),A=r||`${e}-label`,z=W==="search"&&!k&&!B;return i(de,{ariaDescribedby:n,className:b,disabled:o,errorMessage:c,forId:e,hasError:s,helptext:f,helptextDropdown:u,helptextDropdownButton:d,inline:v,label:x,optionalTag:I,optionalText:E,requiredTag:C,requiredText:_,useWrapper:q,children:h("div",{className:"pkt-input__container",children:[U&&i("div",{className:"pkt-input-prefix",children:U}),i("input",{ref:Y,className:`pkt-input ${R?"pkt-input--fullwidth":""}`,type:W,name:$||e,id:e,placeholder:D,autoComplete:a,value:X,disabled:o,"aria-invalid":s,"aria-errormessage":`${e}-error`,"aria-labelledby":A,...J}),M&&h("p",{className:"pkt-input-suffix",children:[M,k&&i(w,{className:"pkt-input-suffix-icon",name:k}),z&&i(w,{className:"pkt-input-suffix-icon",name:"magnifying-glass-big"})]}),!M&&k&&i(w,{className:"pkt-input-icon",name:k}),!M&&z&&i(w,{className:"pkt-input-icon",name:"magnifying-glass-big"})]})})});T.PktAlert=et,T.PktBackLink=Ht,T.PktBreadcrumbs=An,T.PktButton=le,T.PktCheckbox=vt,T.PktFooter=Vn,T.PktFooterSimple=Wn,T.PktHeader=Mn,T.PktIcon=w,T.PktIconContext=Qe,T.PktInput=gt,T.PktInputWrapper=de,T.PktLinkCard=Nt,T.PktLoader=Yn,T.PktMessagebox=Kn,T.PktRadioButton=yt,T.PktSearchInput=Jn,T.PktSelect=zn,T.PktTable=Gn,T.PktTableData=Hn,T.PktTableHeader=Xn,T.PktTabs=Zn,T.PktTag=we,T.PktTextarea=Qn,T.PktTextinput=er,Object.defineProperty(T,Symbol.toStringTag,{value:"Module"})});
+*/(function(e){(function(){var n={}.hasOwnProperty;function r(){for(var a=[],l=0;l<arguments.length;l++){var o=arguments[l];if(o){var c=typeof o;if(c==="string"||c==="number")a.push(o);else if(Array.isArray(o)){if(o.length){var s=r.apply(null,o);s&&a.push(s)}}else if(c==="object"){if(o.toString!==Object.prototype.toString&&!o.toString.toString().includes("[native code]")){a.push(o.toString());continue}for(var f in o)n.call(o,f)&&o[f]&&a.push(f)}}}return a.join(" ")}e.exports?(r.default=r,e.exports=r):window.classNames=r})()})(_t);var Bn=_t.exports;const bt=Mt(Bn),Mn=g.forwardRef(({className:e,logoLink:n="https://www.oslo.kommune.no/",serviceName:r,fixed:a=!0,scrollToHide:l=!0,user:o,userMenu:c,representing:s,userOptions:f,userMenuFooter:u,canChangeRepresentation:d=!0,showMenuButton:k=!1,showLogOutButton:v=!1,openMenu:R,logOut:x,changeRepresentation:$,...I},E)=>{const C=g.useMemo(()=>typeof(o==null?void 0:o.lastLoggedIn)=="string"?o.lastLoggedIn:o!=null&&o.lastLoggedIn?new Date(o.lastLoggedIn).toLocaleString("nb-NO",{year:"numeric",month:"long",day:"numeric"}):"",[o]),[_,D]=g.useState(!1),[U,M]=g.useState(0),[W,q]=g.useState(!1),B=g.useRef(null);g.useEffect(()=>(document.addEventListener("mouseup",J),window.addEventListener("scroll",Y),()=>{document.removeEventListener("mouseup",J),window.removeEventListener("scroll",Y)}));const X=()=>{q(!W)},J=b=>{B.current&&!B.current.contains(b.target)&&q(!1)},Y=()=>{if(l){const b=window.pageYOffset||document.documentElement.scrollTop;if(b<0||Math.abs(b-U)<60)return;D(b>U),M(b)}};return h("header",{...I,id:"pkt-header","data-testid":"pkt-header","aria-label":"Topp",className:bt(e,"pkt-header",{"pkt-header--fixed":a,"pkt-header--scroll-to-hide":l,"pkt-header--hidden":_}),ref:E,children:[h("div",{className:"pkt-header__logo",children:[typeof n=="string"?i("a",{"aria-label":"Tilbake til forside",className:"pkt-header__logo-link",href:n,children:i(w,{name:"oslologo",className:"pkt-header__logo-svg","aria-hidden":"true",path:"https://punkt-cdn.oslo.kommune.no/11.11/logos/"})}):i("button",{"aria-label":"Tilbake til forside",className:"pkt-link-button pkt-link pkt-header__logo-link",onClick:n,children:i(w,{name:"oslologo",className:"pkt-header__logo-svg","aria-hidden":"true",path:"https://punkt-cdn.oslo.kommune.no/11.11/logos/"})}),i("span",{className:"pkt-header__logo-service",children:r})]}),i("nav",{className:"pkt-header__actions",children:h("ul",{className:"pkt-header__actions-row",children:[k&&i("li",{children:i(le,{className:"pkt-header__menu-btn",skin:"secondary",variant:"icon-right",iconName:"menu",onClick:R,children:"Meny"})}),(o||s)&&h("li",{"data-testid":"usermenu",className:`pkt-header--has-dropdown ${W&&!_?"pkt-header--open-dropdown":""}`,ref:B,children:[h("button",{className:"pkt-header__user-btn pkt-btn pkt-btn--secondary pkt-btn--icons-right-and-left",type:"button",role:"button","aria-controls":"pktUserDropdown","aria-expanded":W,onClick:X,children:[i(w,{name:"user",className:"pkt-btn__icon"}),i("span",{className:"pkt-header__user-fullname",children:(s==null?void 0:s.name)||(o==null?void 0:o.name)}),i("span",{className:"pkt-header__user-shortname",children:(s==null?void 0:s.shortname)||(o==null?void 0:o.shortname)}),i(w,{name:"chevron-thin-down",className:"pkt-btn--closed"}),i(w,{name:"chevron-thin-up",className:"pkt-btn--open"})]}),h("ul",{id:"pktUserDropdown",className:"pkt-header__dropdown pkt-user-menu",children:[o&&h("li",{children:[i("div",{className:"pkt-user-menu__label",children:"Pålogget som"}),i("div",{className:"pkt-user-menu__name",children:o.name}),o.lastLoggedIn&&h("div",{className:"pkt-user-menu__last-logged-in",children:["Sist pålogget: ",i("time",{children:C})]})]}),c&&i("li",{children:i("ul",{className:"pkt-list",children:c.map((b,A)=>i("li",{children:typeof b.target=="string"?h("a",{href:b.target,className:"pkt-link",children:[b.iconName&&i(w,{name:b.iconName,className:"pkt-link__icon"}),b.title]}):h("button",{className:"pkt-link-button pkt-link",onClick:b.target,children:[b.iconName&&i(w,{name:b.iconName,className:"pkt-link__icon"}),b.title]})},`userMenu-${A}`))})}),(s||d)&&h("li",{children:[s&&h(H,{children:[i("div",{className:"pkt-user-menu__label",children:"Representerer"}),i("div",{className:"pkt-user-menu__name",children:s.name}),s.orgNumber&&h("div",{className:"pkt-user-menu__org-number",children:["Org.nr. ",s.orgNumber]})]}),i("ul",{className:"pkt-list mt-size-16",children:d&&i("li",{children:h("button",{className:"pkt-link-button pkt-link",onClick:$,children:[i(w,{name:"cogwheel",className:"pkt-link__icon"}),"Endre organisasjon"]})})})]}),i("li",{children:i("ul",{className:"pkt-list",children:(f||!v)&&h(H,{children:[f==null?void 0:f.map((b,A)=>i("li",{children:typeof b.target=="string"?h("a",{href:b.target,className:"pkt-link",children:[b.iconName&&i(w,{name:b.iconName,className:"pkt-link__icon"}),b.title]}):h("button",{className:"pkt-link-button pkt-link",onClick:b.target,children:[b.iconName&&i(w,{name:b.iconName,className:"pkt-link__icon"}),b.title]})},`userOptions-${A}`)),!v&&i("li",{children:h("button",{className:"pkt-link-button pkt-link",onClick:x,children:[i(w,{name:"exit",className:"pkt-link__icon"}),"Logg ut"]})})]})})}),u&&i("li",{className:"footer",children:i("ul",{className:"pkt-list-horizontal bordered",children:u.map((b,A)=>i("li",{children:typeof b.target=="string"?i("a",{href:b.target,className:"pkt-link",children:b.title}):i("button",{className:"pkt-link-button pkt-link",onClick:b.target,children:b.title})},`userMenuFooter-${A}`))})})]})]}),v&&i("li",{children:i(le,{className:"pkt-header__user-btn pkt-header__user-btn-logout",iconName:"exit",role:"button",onClick:x,skin:"secondary",variant:"icon-right",children:"Logg ut"})})]})})]})}),gt=g.forwardRef(({label:e,id:n,children:r,...a},l)=>h("div",{className:"pkt-form-group",children:[i("label",{htmlFor:n,className:"pkt-form-label",children:e}),i("input",{className:"pkt-form-input",id:n,...a,ref:l}),r]}));gt.displayName="PktInput";const de=g.forwardRef(({forId:e,label:n,helptext:r,helptextDropdown:a,helptextDropdownButton:l,optionalTag:o=!1,optionalText:c="Valgfritt",requiredTag:s=!1,requiredText:f="Må fylles ut",hasError:u,errorMessage:d,disabled:k,inline:v,ariaDescribedby:R,useWrapper:x=!0,children:$,className:I,hasFieldset:E=!1},C)=>{const[_,D]=g.useState(!1),U=()=>{D(!_)},M=()=>o?"pkt-tag pkt-tag--small pkt-tag--thin-text pkt-tag--blue-light":s?"pkt-tag pkt-tag--small pkt-tag--thin-text pkt-tag--beige":"",W=o?c:s?f:"",q=k?"pkt-inputwrapper--disabled":"",B=v?"pkt-inputwrapper--inline":"",X=u?"pkt-inputwrapper--error":"",J=!!a&&a!=="",Y=l||'Les mer <span class="pkt-sr-only">om inputfeltet</span>',b=E?"fieldset":J?"div":"label",A=E?"legend":J?"h2":"span",z=R||(r?`${e}-helptext`:void 0);return h("div",{className:["pkt-inputwrapper",I,q,B,X].join(" "),ref:C,children:[x?i(H,{children:h(b,{htmlFor:E?void 0:e,"aria-describedby":J?void 0:R,className:`pkt-inputwrapper__label${E?" pkt-inputwrapper__fieldset":""}`,children:[h(A,{id:`${e}-label`,className:`${E?" pkt-inputwrapper__legend":""}`,children:[n,W!==""&&i("span",{className:M(),children:W})]}),r&&i("div",{className:"pkt-inputwrapper__helptext",id:`${e}-helptext`,dangerouslySetInnerHTML:{__html:r}}),J&&a!==""&&h("div",{children:[i(le,{skin:"tertiary",size:"small",variant:"icon-right",iconName:_?"chevron-thin-up":"chevron-thin-down",className:"pkt-inputwrapper__helptext-expandable pkt-link pkt-link--icon-right",onClick:U,children:i("span",{dangerouslySetInnerHTML:{__html:Y}})}),i("div",{className:`pkt-inputwrapper__helptext ${_?"pkt-inputwrapper__helptext-expandable-open":"pkt-inputwrapper__helptext-expandable-closed"}`,children:i("span",{dangerouslySetInnerHTML:{__html:a}})}),!E&&i("label",{htmlFor:e,className:"pkt-sr-only","aria-describedby":z,children:n})]}),i(H,{children:$})]})}):h(H,{children:[!E&&i("label",{htmlFor:e,className:"pkt-sr-only","aria-describedby":z,id:`${e}-label`,children:n}),$]}),u&&d&&i("div",{children:i(et,{skin:"error","aria-live":"assertive",id:`${e}-error`,compact:!0,children:d})})]})});de.displayName="PktInputWrapper";const Nt=g.forwardRef(({children:e,className:n,iconName:r="user",openInNewTab:a=!1,skin:l="normal",href:o="#",external:c=!1,title:s,...f},u)=>{const d=[n,"pkt-linkcard",l&&`pkt-linkcard--${l}`].filter(Boolean).join(" ");return h("a",{...f,href:o,className:`pkt-linkcard pkt-link ${d}`,target:a?"_blank":"_self",rel:a?"noopener noreferrer":void 0,ref:u,children:[i(w,{className:"pkt-link__icon",name:r}),h("div",{className:"pkt-linkcard__content",children:[i("div",{className:`pkt-linkcard__title ${c?"pkt-link pkt-link--external":""}`,children:s}),i("div",{className:"pkt-linkcard__text",children:e})]})]})});Nt.displayName="PktLinkCard";const Yn=g.forwardRef(({className:e,message:n,size:r="medium",inline:a=!1,isLoading:l=!0,variant:o="rainbow",delay:c=0,children:s,...f},u)=>{const d=`pkt-loader pkt-loader--${r}`,[k,v]=g.useState(!(c>0));c>0&&setTimeout(()=>{v(!0)},c);const R=x=>x==="shapes"?"loader":x==="blue"?"spinner-blue":"spinner";return i("div",{role:"status","aria-live":"polite","aria-busy":l,className:`pkt-loader--${a?"inline":"box"}  ${e||""}`,children:l?i(H,{children:k?h("div",{className:d,"data-testid":"pkt-loader",ref:u,...f,children:[i(w,{name:R(o),"aria-label":"loading",path:"https://punkt-cdn.oslo.kommune.no/11.11/animations/",className:`pkt-loader__svg pkt-loader__${o}`}),n&&i("p",{children:n})]}):null}):s})}),Kn=({children:e,className:n,compact:r=!1,skin:a="beige",title:l,...o})=>{const c=[n,"pkt-messagebox",a&&`pkt-messagebox--${a}`,r&&"pkt-messagebox--compact"].filter(Boolean).join(" ");return h("div",{...o,className:c,children:[l&&i("div",{className:"pkt-messagebox__title",children:l}),i("div",{className:"pkt-messagebox__text",children:e})]})},yt=g.forwardRef(({id:e,name:n,label:r,className:a,hasTile:l=!1,disabled:o=!1,checkHelptext:c,hasError:s=!1,...f},u)=>{const d=[a,"pkt-input-check"].filter(Boolean).join(" ");return i("div",{className:d,children:h("div",{className:`pkt-input-check__input ${l?"pkt-input-check__input--tile":""} ${o&&l?"pkt-input-check__input--tile-disabled":""}`,children:[i("input",{ref:u,className:`pkt-input-check__input-checkbox ${s?"pkt-input-check__input-checkbox--error":""}`,type:"radio",id:e,disabled:o,name:n,...f}),h("label",{className:"pkt-input-check__input-label",htmlFor:e,children:[r,c&&i("div",{className:"pkt-input-check__input-helptext",children:c})]})]})})});yt.displayName="PktRadioButton";const Jn=g.forwardRef(({action:e,appearance:n="local",disabled:r=!1,fullwidth:a=!1,id:l,label:o,method:c="get",name:s,placeholder:f="Søk…",suggestions:u,value:d="",onSearch:k,onSuggestionClick:v,...R},x)=>{const $=(_,D)=>{_?_():v&&v(D)},I=`pkt-searchinput pkt-searchinput--${n} ${a?"pkt-searchinput--fullwidth":""}`;return h(e?"form":"div",{className:I,onSubmit:k&&(()=>k(d)),action:e||void 0,method:e?c:void 0,role:"search",ref:x,...R,children:[h(o?"label":"div",{htmlFor:o?l:void 0,className:o?"pkt-inputwrapper__label":"",children:[o&&i(H,{children:o}),h("div",{className:n==="local"?"pkt-input__container":"pkt-searchinput__field",children:[i("input",{className:`pkt-input ${a?"pkt-input--fullwidth":""}`,type:"search",name:s||l,id:l,placeholder:f,value:d,disabled:r,onInput:k&&(_=>k(_.currentTarget.value)),autoComplete:"off","aria-autocomplete":"list","aria-controls":`${l}-suggestions`}),i(le,{className:`pkt-searchinput__button ${n==="local"?"pkt-input-icon":""}`,variant:"icon-only",iconName:"magnifying-glass-big",skin:n==="local"?"tertiary":"primary",color:n==="global"?"yellow":void 0,type:"submit",disabled:r,onClick:k&&(()=>k(d)),onKeyUp:k&&(_=>_.key==="Enter"&&k(d)),children:o||f})]})]}),u&&i("ul",{id:`${l}-suggestions`,className:"pkt-searchinput__suggestions","aria-live":"assertive",children:u.map((_,D)=>i("li",{children:g.createElement(_.href?"a":_.onClick?"button":"div",{href:_.href,className:`pkt-searchinput__suggestion ${_.onClick?"pkt-link-button":""} ${_.href||_.onClick?"pkt-searchinput__suggestion--has-hover":""}`,type:_.onClick?"button":void 0,onClick:()=>$(_.onClick,D),onKeyUp:()=>$(_.onClick,D)},h(H,{children:[_.title&&i("h3",{className:"pkt-searchinput__suggestion-title",children:_.title}),_.text&&i("p",{className:"pkt-searchinput__suggestion-text",children:_.text})]}))},`search-suggestion-${D}`))})]})}),zn=g.forwardRef(({ariaDescribedby:e,ariaLabelledby:n,children:r,className:a,disabled:l=!1,errorMessage:o,hasError:c,helptext:s,helptextDropdown:f,helptextDropdownButton:u,id:d,inline:k=!1,fullwidth:v=!1,label:R,name:x,optionalTag:$=!1,optionalText:I,requiredTag:E=!1,requiredText:C,..._},D)=>{const U=[a,"pkt-select"].join(" ");return i(de,{className:U,forId:d,label:R,helptext:s,helptextDropdown:f,helptextDropdownButton:u,optionalTag:$,optionalText:I,requiredTag:E,requiredText:C,hasError:c,errorMessage:o,disabled:l,inline:k,ariaDescribedby:e,children:i("select",{ref:D,className:`pkt-input ${v?"pkt-input--fullwidth":""}`,"aria-invalid":c,"aria-errormessage":`${d}-error`,"aria-labelledby":n||`${d}-label`,disabled:l,id:d,name:x||d,..._,children:r})})}),qn=({isResponsive:e,children:n})=>e?i("div",{className:"pkt-table-container",children:n}):i(H,{children:n}),Gn=({isResponsive:e,modifiers:{info:n=!1,success:r=!1,strong:a=!1,shadow:l=!1}={},children:o})=>i(qn,{isResponsive:e,children:i("table",{className:bt("pkt-table",{"pkt-table--info":n,"pkt-table--success":r,"pkt-table--strong":a,"pkt-table--shadow":l}),children:o})}),Hn=({children:e})=>i("td",{className:"pkt-table__th",children:e}),Xn=({children:e})=>i("th",{className:"pkt-table__th",children:e}),we=g.forwardRef(({children:e,className:n,skin:r="blue",textStyle:a="normal-text",size:l="medium",closeTag:o=!1,iconName:c="",type:s="button",ariaLabel:f="close",onClick:u=()=>{}},d)=>{const[k,v]=g.useState(!1),R=E=>{v(!0),u(E)},x=["pkt-tag",l&&`pkt-tag--${l}`,r&&`pkt-tag--${r}`,a&&`pkt-tag--${a}`,n].filter(Boolean).join(" "),$=["pkt-tag","pkt-btn","pkt-btn--tertiary",l&&`pkt-tag--${l}`,r&&`pkt-tag--${r}`,a&&`pkt-tag--${a}`,c&&o?"pkt-btn--icons-right-and-left":null,o&&!c?"pkt-btn--icon-right":null,n].filter(Boolean).join(" "),I=!k;return o&&c?i(H,{children:I&&h("button",{className:$,type:s,"aria-label":f,onClick:R,ref:d,children:[i(w,{className:"pkt-tag__icon",name:c}),e,i(w,{className:"pkt-tag__close-btn",name:"close"})]})}):o?i(H,{children:I&&h("button",{className:$,type:s,"aria-label":f,onClick:R,ref:d,children:[i(w,{className:"pkt-tag__close-btn",name:"close"}),e]})}):c?h("span",{className:x,children:[i(w,{className:"pkt-tag__icon",name:c}),e]}):i("span",{className:x,children:e})});we.displayName="PktTag";const Zn=g.forwardRef(({arrowNav:e=!0,tabs:n,onTabSelected:r},a)=>{const l=g.useRef([]);g.useEffect(()=>{l.current=l.current.slice(0,n.length)},[n]);const o=(s,f)=>{f.action&&f.action(s),r&&r(s)},c=(s,f)=>{var u,d;e&&(f.code==="ArrowLeft"&&s!==0&&((u=l.current[s-1])==null||u.focus()),f.code==="ArrowRight"&&s<n.length-1&&((d=l.current[s+1])==null||d.focus()),(f.code==="ArrowDown"||f.code==="Space")&&o(s,n[s]))};return i("div",{className:"pkt-tabs",ref:a,children:i("div",{className:"pkt-tabs__list",role:e?"tablist":"navigation",children:n.map((s,f)=>i(g.Fragment,{children:s.href?h("a",{"aria-selected":!!s.active,role:e?"tab":void 0,href:s.href,"aria-controls":s.controls,className:`pkt-tabs__link ${s.active?"active":""}`,onKeyUp:u=>c(f,u),onClick:()=>o(f,s),tabIndex:s.active||!e?void 0:-1,ref:u=>{l.current[f]=u},children:[s.icon&&i(w,{name:s.icon,className:"pkt-icon--small"}),s.text,s.tag&&i(we,{skin:s.tag.skin,size:"small",children:s.tag.text})]}):h("button",{"aria-selected":!!s.active,role:e?"tab":void 0,type:"button","aria-controls":s.controls,className:`pkt-tabs__button pkt-link-button ${s.active?"active":""}`,onKeyUp:u=>c(f,u),onClick:()=>o(f,s),tabIndex:s.active||!e?void 0:-1,ref:u=>{l.current[f]=u},children:[s.icon&&i(w,{name:s.icon,className:"pkt-icon--small"}),s.text,s.tag&&i(we,{skin:s.tag.skin,size:"small",children:s.tag.text})]},"b-"+f)},f))})})}),Qn=g.forwardRef(({id:e,ariaDescribedby:n,ariaLabelledby:r,counter:a,counterMaxLength:l,className:o,disabled:c,errorMessage:s,hasError:f,helptext:u,helptextDropdown:d,helptextDropdownButton:k,inline:v,fullwidth:R=!1,label:x,name:$,optionalTag:I=!1,optionalText:E,requiredTag:C=!1,requiredText:_,placeholder:D,rows:U,useWrapper:M=!0,onChange:W,...q},B)=>{const X=[o,"pkt-textinput","pkt-textarea"].join(" "),J=r||`${e}-label`,Y=g.useRef(null),[b,A]=g.useState(0),z=ee=>{var te,me;if(a&&A(((me=(te=ee.currentTarget)==null?void 0:te.value)==null?void 0:me.length)||0),W)return W(ee)};return g.useEffect(()=>{var ee,te;typeof B=="function"&&B(Y.current),a&&A(((te=(ee=Y==null?void 0:Y.current)==null?void 0:ee.value)==null?void 0:te.length)||0)},[B]),h(de,{ariaDescribedby:n,className:X,disabled:c,errorMessage:s,forId:e,hasError:f,helptext:u,helptextDropdown:d,helptextDropdownButton:k,inline:v,label:x,optionalTag:I,optionalText:E,requiredTag:C,requiredText:_,useWrapper:M,children:[i("textarea",{ref:Y,className:`pkt-input ${R?"pkt-input--fullwidth":""} ${l&&b>l?"pkt-input--counter-error":""}`,name:$||e,id:e,placeholder:D,disabled:c,rows:U,"aria-labelledby":J,"aria-invalid":f,"aria-errormessage":`${e}-error`,...q,onChange:z}),a&&h("div",{className:"pkt-input__counter","aria-live":"polite","aria-atomic":!0,children:[b||0,l&&`/${l}`]})]})}),er=g.forwardRef(({id:e,ariaDescribedby:n,ariaLabelledby:r,autocomplete:a="off",className:l,disabled:o=!1,errorMessage:c,hasError:s=!1,helptext:f,helptextDropdown:u,helptextDropdownButton:d,iconNameRight:k,inline:v=!1,fullwidth:R=!1,label:x,name:$,optionalTag:I=!1,optionalText:E,requiredTag:C=!1,requiredText:_,placeholder:D,prefix:U,suffix:M,type:W="text",useWrapper:q=!0,omitSearchIcon:B=!1,value:X,...J},Y)=>{const b=[l,"pkt-textinput"].join(" "),A=r||`${e}-label`,z=W==="search"&&!k&&!B;return i(de,{ariaDescribedby:n,className:b,disabled:o,errorMessage:c,forId:e,hasError:s,helptext:f,helptextDropdown:u,helptextDropdownButton:d,inline:v,label:x,optionalTag:I,optionalText:E,requiredTag:C,requiredText:_,useWrapper:q,children:h("div",{className:"pkt-input__container",children:[U&&i("div",{className:"pkt-input-prefix",children:U}),i("input",{ref:Y,className:`pkt-input ${R?"pkt-input--fullwidth":""}`,type:W,name:$||e,id:e,placeholder:D,autoComplete:a,value:X,disabled:o,"aria-invalid":s,"aria-errormessage":`${e}-error`,"aria-labelledby":A,...J}),M&&h("p",{className:"pkt-input-suffix",children:[M,k&&i(w,{className:"pkt-input-suffix-icon",name:k}),z&&i(w,{className:"pkt-input-suffix-icon",name:"magnifying-glass-big"})]}),!M&&k&&i(w,{className:"pkt-input-icon",name:k}),!M&&z&&i(w,{className:"pkt-input-icon",name:"magnifying-glass-big"})]})})});T.PktAlert=et,T.PktBackLink=Ht,T.PktBreadcrumbs=An,T.PktButton=le,T.PktCheckbox=vt,T.PktFooter=Vn,T.PktFooterSimple=Wn,T.PktHeader=Mn,T.PktIcon=w,T.PktIconContext=Qe,T.PktInput=gt,T.PktInputWrapper=de,T.PktLinkCard=Nt,T.PktLoader=Yn,T.PktMessagebox=Kn,T.PktRadioButton=yt,T.PktSearchInput=Jn,T.PktSelect=zn,T.PktTable=Gn,T.PktTableData=Hn,T.PktTableHeader=Xn,T.PktTabs=Zn,T.PktTag=we,T.PktTextarea=Qn,T.PktTextinput=er,Object.defineProperty(T,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "11.10.1",
+  "version": "11.11.0",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -33,7 +33,7 @@
   },
   "devDependencies": {
     "@oslokommune/punkt-assets": "^11.9.4",
-    "@oslokommune/punkt-css": "^11.10.1",
+    "@oslokommune/punkt-css": "^11.11.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
@@ -91,5 +91,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "2309609a0e76e913954fbf3f6042786e1fb5c2e1"
+  "gitHead": "91201c4a7cd0684df65f421b9868bd02c22a2ecf"
 }

package/src/components/accordion/Accordion.test.tsx

@@ -0,0 +1,87 @@
+import '@testing-library/jest-dom/extend-expect'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import { PktAccordion } from './Accordion'
+import { PktAccordionItem } from './AccordionItem'
+import { render, screen, fireEvent } from '@testing-library/react'
+import React, { createRef } from 'react'
+
+expect.extend(toHaveNoViolations)
+
+describe('PktAccordion', () => {
+  test('renders without errors', () => {
+    render(
+      <PktAccordion>
+        <PktAccordionItem id="render-id" title="test">
+          content
+        </PktAccordionItem>
+      </PktAccordion>,
+    )
+    // Assert that the Accordion component renders without throwing any errors
+  })
+
+  test('ref works correctly', () => {
+    const ref = createRef<HTMLDivElement>()
+    const { unmount } = render(<PktAccordion ref={ref}>Alert text</PktAccordion>)
+    expect(ref.current).toBeInstanceOf(HTMLDivElement)
+
+    unmount()
+    expect(ref.current).toBe(null)
+  })
+
+  test('renders children', () => {
+    const mockToggleOpen = jest.fn()
+    render(
+      <PktAccordion>
+        <PktAccordionItem title="Title 1" id="item1" toggleProps={{ isOpen: false, onToggleClick: mockToggleOpen }}>
+          Content 1
+        </PktAccordionItem>
+        <PktAccordionItem title="Title 2" id="item2" toggleProps={{ isOpen: false, onToggleClick: mockToggleOpen }}>
+          Content 2
+        </PktAccordionItem>
+      </PktAccordion>,
+    )
+
+    // Assert that the Accordion component renders its children correctly
+    expect(screen.getByText('Title 1')).toBeInTheDocument()
+    expect(screen.getByText('Content 1')).toBeInTheDocument()
+    expect(screen.getByText('Title 2')).toBeInTheDocument()
+    expect(screen.getByText('Content 2')).toBeInTheDocument()
+  })
+
+  test('applies compact, skin and ariaLabelledBy prop', () => {
+    const mockToggleOpen = jest.fn()
+
+    render(
+      <>
+        <h3 id="accordion-heading">Accordion Heading</h3>
+        <PktAccordion ariaLabelledById="accordion-heading" skin="outlined" compact>
+          <PktAccordionItem title="Title" id="item1">
+            Content
+          </PktAccordionItem>
+        </PktAccordion>
+      </>,
+    )
+    // Assert that the Accordion component applies the props correctly
+    expect(screen.getByTestId('pkt-accordion')).toHaveClass('pkt-accordion--compact')
+    expect(screen.getByTestId('pkt-accordion')).toHaveClass('pkt-accordion--outlined')
+    expect(screen.getByTestId('pkt-accordion')).toHaveAttribute('aria-labelledby', 'accordion-heading')
+  })
+
+  describe('accessibility', () => {
+    it('renders with no wcag errors with axe', async () => {
+      const mockToggleOpen = jest.fn()
+      const { container } = render(
+        <PktAccordion>
+          <PktAccordionItem title="Title 1" id="item1">
+            Content 1
+          </PktAccordionItem>
+          <PktAccordionItem title="Title 2" id="item2">
+            Content 2
+          </PktAccordionItem>
+        </PktAccordion>,
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

package/src/components/accordion/Accordion.tsx

@@ -0,0 +1,42 @@
+import React, { FC, ReactNode, Ref, forwardRef, useState } from 'react'
+import { PktAccordionItem } from './AccordionItem'
+
+export interface IPktAccordion {
+  ariaLabelledById?: string
+  className?: string
+  children: ReactNode | ReactNode[]
+  /**
+   * @default compact: "false"
+   */
+  compact?: boolean
+  /**
+   * @default skin: "borderless"
+   */
+  skin?: 'borderless' | 'outlined' | 'beige' | 'blue'
+  /**
+   * @description A unique identifier to connect the accordion with a heading
+   */
+
+}
+
+export const PktAccordion = forwardRef(
+  (
+    { compact = false, skin = 'borderless', className, ariaLabelledById, children }: IPktAccordion,
+    ref: Ref<HTMLDivElement>,
+  ) => {
+    const stylingClasses = [
+      className,
+      'pkt-accordion',
+      compact && `pkt-accordion--compact`,
+      skin && `pkt-accordion--${skin}`,
+    ]
+      .filter(Boolean)
+      .join(' ')
+
+    return (
+      <div data-testid="pkt-accordion" className={stylingClasses} aria-labelledby={ariaLabelledById} ref={ref}>
+        {children}
+      </div>
+    )
+  },
+)

package/src/components/accordion/AccordionItem.tsx

@@ -0,0 +1,86 @@
+import React, { LegacyRef, forwardRef, useState } from 'react'
+import PktIcon from '../icon/Icon'
+import classNames from 'classnames'
+
+/**
+ * @param toggleProps
+ *
+ * @description Send in an "isOpen" boolean and "onToggleClick" function
+ * to override the automatic toggling
+ */
+
+export interface IPktAccordionToggleProps {
+  isOpen: boolean
+  onToggleClick: (e: React.MouseEvent, id: string) => void
+}
+
+export interface IPktAccordionItem {
+  children?: React.ReactNode | React.ReactNode[]
+  className?: string
+  id: string
+  defaultOpen?: boolean
+  title: string | React.ReactNode
+  toggleProps?: IPktAccordionToggleProps
+}
+
+export const PktAccordionItem = forwardRef(
+  (
+    { title, className, children, toggleProps, defaultOpen = false, id }: IPktAccordionItem,
+    ref: LegacyRef<HTMLDetailsElement>,
+  ) => {
+    const [isOpen, setIsOpen] = useState<boolean>(defaultOpen)
+
+    const openToggleProp: boolean = toggleProps ? toggleProps.isOpen : isOpen
+
+    /**
+     *     To use the "open" attribute of <details> element correctly,
+     *     we need to return either "open=true" or "open=undefined" as setting "open=false"
+     *     will set the "open" attribute to true as "false" is still a boolean
+     */
+
+    const returnTrueIfOpen = (isOpen: boolean): boolean | undefined => {
+      return isOpen ?? undefined
+    }
+
+    const handleToggleClick = (e: React.MouseEvent, id: string) => {
+      /**
+       *   e.preventDefault() is important to prevent native default onToggle behavior
+       *   (that the event receives from being a <details> element) as it creates
+       *   inconsistent behaviour toggling the "open" attribute both locally
+       *   and through the React state.
+       *   Read more here: https://github.com/facebook/react/issues/15486#issuecomment-873516817
+       * */
+      e.preventDefault()
+
+      if (toggleProps !== undefined) {
+        toggleProps.onToggleClick(e, id)
+      }
+      setIsOpen(!openToggleProp) // use open if it exists, if not use isOpen
+    }
+    const accordionItemClass = classNames(className, 'pkt-accordion-item')
+
+    return (
+      <details
+        aria-controls={`pkt-accordion-item-content-${id}`}
+        aria-expanded={openToggleProp}
+        className={accordionItemClass}
+        ref={ref}
+        id={`pkt-accordion-item-header-${id}`}
+        open={toggleProps ? returnTrueIfOpen(toggleProps.isOpen) : returnTrueIfOpen(isOpen)}
+      >
+        <summary
+          aria-labelledby={`pkt-accordion-item-header-${id}`}
+          className="pkt-accordion-item__title"
+          id={`pkt-accordion-item-summary-${id}`}
+          onClick={(e) => handleToggleClick(e, id)}
+        >
+          {title}
+          <PktIcon name="chevron-thin-down" className="pkt-accordion-item__icon" aria-hidden="true" />
+        </summary>
+        <div id={`pkt-accordion-item-content-${id}`} role="region" className="pkt-accordion-item__content">
+          {children}
+        </div>
+      </details>
+    )
+  },
+)

package/src/components/tag/Tag.test.tsx

@@ -1,79 +1,85 @@
-import '@testing-library/jest-dom/extend-expect';
-
-import { fireEvent, render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/extend-expect'
 import { axe, toHaveNoViolations } from 'jest-axe'
-import React, { createRef } from 'react';
+import { fireEvent, render, screen } from '@testing-library/react'
+import React, { createRef } from 'react'
+import userEvent from '@testing-library/user-event'
 
 import { PktTag } from './Tag'
 
 expect.extend(toHaveNoViolations)
 
-
 jest.mock('../icon/Icon', () => ({
-    PktIcon: ({ className, ...props }: { className: string }) => (
-        <span className={`pkt-tag__icon ${className}`} {...props} data-testid="mocked-pkt-icon" />
-    ),
-}));
+  PktIcon: ({ className, ...props }: { className: string }) => (
+    <span className={`pkt-tag__icon ${className}`} {...props} data-testid="mocked-pkt-icon" />
+  ),
+}))
 
 describe('PktTag', () => {
+  describe('basic rendering', () => {
+    it('renders correctly without any props', () => {
+      const { getByText } = render(<PktTag>Hello</PktTag>)
+      expect(getByText('Hello')).toBeInTheDocument()
+    })
 
-    describe('basic rendering', () => {
-
-        it('renders correctly without any props', () => {
-            const { getByText } = render(<PktTag>Hello</PktTag>);
-            expect(getByText('Hello')).toBeInTheDocument();
-        });
-
-        it('renders an icon when iconName prop is provided', () => {
-            render(<PktTag iconName="user">Tag with Icon</PktTag>);
-            const iconElement = screen.getByTestId('mocked-pkt-icon');
-            expect(iconElement).toBeInTheDocument();
-        });
-
-        it('renders with the specified skin and size', () => {
-            const { container } = render(
-                <PktTag skin="red" size="small">
-                    Tag
-                </PktTag>
-            );
-            expect(container.firstChild).toHaveClass('pkt-tag--red');
-            expect(container.firstChild).toHaveClass('pkt-tag--small');
-        });
-
-        it('forwardRef works correctly', () => {
-            const ref = createRef<HTMLButtonElement>();
-            render(<PktTag closeTag={true} ref={ref}>Click me</PktTag>);
+    it('renders an icon when iconName prop is provided', () => {
+      render(<PktTag iconName="user">Tag with Icon</PktTag>)
+      const iconElement = screen.getByTestId('mocked-pkt-icon')
+      expect(iconElement).toBeInTheDocument()
+    })
 
-            // Simulate a click on the button
-            userEvent.click(screen.getByText('Click me'));
+    it('renders with the specified skin and size', () => {
+      const { container } = render(
+        <PktTag skin="red" size="small">
+          Tag
+        </PktTag>,
+      )
+      expect(container.firstChild).toHaveClass('pkt-tag--red')
+      expect(container.firstChild).toHaveClass('pkt-tag--small')
+    })
 
-            // Check that the ref actually points to the button element
-            expect(ref.current).toBe(screen.getByRole('button'));
-        });
+    it('forwardRef works correctly', () => {
+      const ref = createRef<HTMLButtonElement>()
+      render(
+        <PktTag closeTag={true} ref={ref}>
+          Click me
+        </PktTag>,
+      )
 
-        it('closes the tag when the close button is clicked', () => {
-            const { getByLabelText, queryByText } = render(
-                <PktTag closeTag={true}>Closeable Tag</PktTag>
-            );
-            expect(queryByText('Closeable Tag')).toBeInTheDocument();
-            fireEvent.click(getByLabelText('close'));
-            expect(queryByText('Closeable Tag')).not.toBeInTheDocument();
-        });
-    });
+      // Simulate a click on the button
+      userEvent.click(screen.getByText('Click me'))
 
-    describe('accessibility', () => {
-        it('renders with no wcag errors with axe', async () => {
-            const { container } = render(<PktTag skin="red" size="small" iconName="user" closeTag={true}>Tag</PktTag>);
-            const results = await axe(container);
-            expect(results).toHaveNoViolations();
-        })
-    });
+      // Check that the ref actually points to the button element
+      expect(ref.current).toBe(screen.getByRole('button'))
+    })
 
-    describe('snapshot', () => {
-        it('renders correctly with all props', () => {
-            const { container } = render(<PktTag skin="red" size="small" iconName="user" closeTag={true}>Tag</PktTag>);
-            expect(container).toMatchSnapshot();
-        })
+    it('closes the tag when the close button is clicked', () => {
+      const { getByLabelText, queryByText } = render(<PktTag closeTag={true}>Closeable Tag</PktTag>)
+      expect(queryByText('Closeable Tag')).toBeInTheDocument()
+      fireEvent.click(getByLabelText('close'))
+      expect(queryByText('Closeable Tag')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('accessibility', () => {
+    it('renders with no wcag errors with axe', async () => {
+      const { container } = render(
+        <PktTag skin="red" size="small" iconName="user" closeTag={true}>
+          Tag
+        </PktTag>,
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+
+  describe('snapshot', () => {
+    it('renders correctly with all props', () => {
+      const { container } = render(
+        <PktTag skin="red" size="small" iconName="user" closeTag={true}>
+          Tag
+        </PktTag>,
+      )
+      expect(container).toMatchSnapshot()
     })
-});
+  })
+})