\ No newline at end of file
diff --git a/_next/static/chunks/746-d043ffdc3efe63aa.js b/_next/static/chunks/746-d043ffdc3efe63aa.js
new file mode 100644
index 00000000..6d03d457
--- /dev/null
+++ b/_next/static/chunks/746-d043ffdc3efe63aa.js
@@ -0,0 +1 @@
+(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[746],{3311:function(A,C,e){"use strict";e.d(C,{_R:function(){return V},DD:function(){return n},cx:function(){return l},t7:function(){return t},fd:function(){return i}}),e(7561);var V=JSON.parse('[{"global_id":"log20","version":"1.0.0-beta.1","title":"v1.0.0-beta.1","summary":"We are proud to announce the first scaled down version of a new documentation site for Green Design System","date":"2023-12-12T00:00:00.000Z","body":{"raw":"\\nWe are proud to announce the first version of a new documentation site for Green Design System. We\'ve been working hard on getting this out the door and we couldn\'t wait to show what we\'ve been working on.\\n\\nIt\'s still early in the development of design and code in Green Design System and most is a subject to change but we wanted to show where this is heading and where we are right now.\\n\\nThe site is built using Next.JS as a static site to be blazingly fast.\\n\\n## Features included in this first release\\n\\n### Component pages\\n\\n- [Button](/component/button)\\n- [Input](/component/input)\\n\\nComponents pages contains general guidelines, design guidelines, code guidelines, ux text guidelines and accessibility guidelines. In this first release not all guidelines are written.\\n\\n### Search\\n\\nA search functionality to search through the content on the site. It can be accessed in the top right of the navbar or by pressing CMD+K on mac\\n\\n### Light/Dark mode\\n\\nThe site support both light mode and dark mode and listens to the users preference. It can be toggled on the site and this override the system preference if wanted.\\n","code":"var Component=(()=>{var l=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),w=(t,e)=>{for(var i in e)r(t,i,{get:e[i],enumerable:!0})},o=(t,e,i,a)=>{if(e&&typeof e==\\"object\\"||typeof e==\\"function\\")for(let s of g(e))!p.call(t,s)&&s!==i&&r(t,s,{get:()=>e[s],enumerable:!(a=u(e,s))||a.enumerable});return t};var b=(t,e,i)=>(i=t!=null?l(m(t)):{},o(e||!t||!t.__esModule?r(i,\\"default\\",{value:t,enumerable:!0}):i,t)),x=t=>o(r({},\\"__esModule\\",{value:!0}),t);var d=f((k,h)=>{h.exports=_jsx_runtime});var D={};w(D,{default:()=>j,frontmatter:()=>y});var n=b(d()),y={title:\\"v1.0.0-beta.1\\",version:\\"1.0.0-beta.1\\",date:new Date(17023392e5),global_id:\\"log20\\",summary:\\"We are proud to announce the first scaled down version of a new documentation site for Green Design System\\"};function c(t){let e=Object.assign({p:\\"p\\",h2:\\"h2\\",a:\\"a\\",h3:\\"h3\\",ul:\\"ul\\",li:\\"li\\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\\"We are proud to announce the first version of a new documentation site for Green Design System. We\'ve been working hard on getting this out the door and we couldn\'t wait to show what we\'ve been working on.\\"}),`\\n`,(0,n.jsx)(e.p,{children:\\"It\'s still early in the development of design and code in Green Design System and most is a subject to change but we wanted to show where this is heading and where we are right now.\\"}),`\\n`,(0,n.jsx)(e.p,{children:\\"The site is built using Next.JS as a static site to be blazingly fast.\\"}),`\\n`,(0,n.jsx)(e.h2,{id:\\"features-included-in-this-first-release\\",children:(0,n.jsx)(e.a,{className:\\"anchor\\",href:\\"#features-included-in-this-first-release\\",children:\\"Features included in this first release\\"})}),`\\n`,(0,n.jsx)(e.h3,{id:\\"component-pages\\",children:(0,n.jsx)(e.a,{className:\\"anchor\\",href:\\"#component-pages\\",children:\\"Component pages\\"})}),`\\n`,(0,n.jsxs)(e.ul,{children:[`\\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\\"/component/button\\",children:\\"Button\\"})}),`\\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\\"/component/input\\",children:\\"Input\\"})}),`\\n`]}),`\\n`,(0,n.jsx)(e.p,{children:\\"Components pages contains general guidelines, design guidelines, code guidelines, ux text guidelines and accessibility guidelines. In this first release not all guidelines are written.\\"}),`\\n`,(0,n.jsx)(e.h3,{id:\\"search\\",children:(0,n.jsx)(e.a,{className:\\"anchor\\",href:\\"#search\\",children:\\"Search\\"})}),`\\n`,(0,n.jsxs)(e.p,{children:[\\"A search functionality to search through the content on the site. It can be accessed in the top right of the navbar or by pressing \\",(0,n.jsx)(\\"code\\",{children:\\"CMD+K\\"}),\\" on mac\\"]}),`\\n`,(0,n.jsx)(e.h3,{id:\\"lightdark-mode\\",children:(0,n.jsx)(e.a,{className:\\"anchor\\",href:\\"#lightdark-mode\\",children:\\"Light/Dark mode\\"})}),`\\n`,(0,n.jsx)(e.p,{children:\\"The site support both light mode and dark mode and listens to the users preference. It can be toggled on the site and this override the system preference if wanted.\\"})]})}function v(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(c,t)})):c(t)}var j=v;return x(D);})();\\n;return Component;"},"_id":"changelog/1.0.0-beta.1.mdx","_raw":{"sourceFilePath":"changelog/1.0.0-beta.1.mdx","sourceFileName":"1.0.0-beta.1.mdx","sourceFileDir":"changelog","contentType":"mdx","flattenedPath":"changelog/1.0.0-beta.1"},"type":"Changelog","url_path":"/changelog/1.0.0-beta.1","pathSegments":[{"order":0,"pathName":"1.0.0-beta.1"}],"last_edited":"2024-04-02T07:58:11.717Z"}]'),n=JSON.parse('[{"global_id":"breadcrumb","title":"Accessibility","date":"2024-03-21T00:00:00.000Z","body":{"raw":"\\n## Accessibility\\n","code":"var Component=(()=>{var d=Object.create;var s=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),_=(t,e)=>{for(var n in e)s(t,n,{get:e[n],enumerable:!0})},o=(t,e,n,a)=>{if(e&&typeof e==\\"object\\"||typeof e==\\"function\\")for(let c of h(e))!x.call(t,c)&&c!==n&&s(t,c,{get:()=>e[c],enumerable:!(a=m(e,c))||a.enumerable});return t};var j=(t,e,n)=>(n=t!=null?d(u(t)):{},o(e||!t||!t.__esModule?s(n,\\"default\\",{value:t,enumerable:!0}):n,t)),y=t=>o(s({},\\"__esModule\\",{value:!0}),t);var l=f((A,r)=>{r.exports=_jsx_runtime});var M={};_(M,{default:()=>D,frontmatter:()=>g});var i=j(l()),g={title:\\"Accessibility\\",global_id:\\"breadcrumb\\",date:new Date(17109792e5)};function b(t){let e=Object.assign({h2:\\"h2\\",a:\\"a\\"},t.components);return(0,i.jsx)(e.h2,{id:\\"accessibility\\",children:(0,i.jsx)(e.a,{className:\\"anchor\\",href:\\"#accessibility\\",children:\\"Accessibility\\"})})}function p(t={}){let{wrapper:e}=t.components||{};return e?(0,i.jsx)(e,Object.assign({},t,{children:(0,i.jsx)(b,t)})):b(t)}var D=p;return y(M);})();\\n;return Component;"},"_id":"component/breadcrumb/accessibility.mdx","_raw":{"sourceFilePath":"component/breadcrumb/accessibility.mdx","sourceFileName":"accessibility.mdx","sourceFileDir":"component/breadcrumb","contentType":"mdx","flattenedPath":"component/breadcrumb/accessibility"},"type":"Component","url_path":"/component/breadcrumb/accessibility","headings":[{"level":2,"text":"Accessibility","slug":"accessibility"}],"pathSegments":[{"order":0,"pathName":"breadcrumb"},{"order":0,"pathName":"accessibility"}],"last_edited":"2024-04-02T07:58:11.717Z","figma_hero_svg":{"svg":""},"figma_svgs":[]},{"global_id":"breadcrumb","title":"Code","date":"2024-03-21T00:00:00.000Z","body":{"raw":"\\n## Code\\n","code":"var Component=(()=>{var h=Object.create;var r=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var _=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),b=(e,t)=>{for(var n in t)r(e,n,{get:t[n],enumerable:!0})},s=(e,t,n,a)=>{if(t&&typeof t==\\"object\\"||typeof t==\\"function\\")for(let o of u(t))!f.call(e,o)&&o!==n&&r(e,o,{get:()=>t[o],enumerable:!(a=l(t,o))||a.enumerable});return e};var j=(e,t,n)=>(n=e!=null?h(x(e)):{},s(t||!e||!e.__esModule?r(n,\\"default\\",{value:e,enumerable:!0}):n,e)),C=e=>s(r({},\\"__esModule\\",{value:!0}),e);var i=_((O,d)=>{d.exports=_jsx_runtime});var M={};b(M,{default:()=>D,frontmatter:()=>g});var c=j(i()),g={title:\\"Code\\",global_id:\\"breadcrumb\\",date:new Date(17109792e5)};function m(e){let t=Object.assign({h2:\\"h2\\",a:\\"a\\"},e.components);return(0,c.jsx)(t.h2,{id:\\"code\\",children:(0,c.jsx)(t.a,{className:\\"anchor\\",href:\\"#code\\",children:\\"Code\\"})})}function p(e={}){let{wrapper:t}=e.components||{};return t?(0,c.jsx)(t,Object.assign({},e,{children:(0,c.jsx)(m,e)})):m(e)}var D=p;return C(M);})();\\n;return Component;"},"_id":"component/breadcrumb/code.mdx","_raw":{"sourceFilePath":"component/breadcrumb/code.mdx","sourceFileName":"code.mdx","sourceFileDir":"component/breadcrumb","contentType":"mdx","flattenedPath":"component/breadcrumb/code"},"type":"Component","url_path":"/component/breadcrumb/code","headings":[{"level":2,"text":"Code","slug":"code"}],"pathSegments":[{"order":0,"pathName":"breadcrumb"},{"order":0,"pathName":"code"}],"last_edited":"2024-04-02T07:58:11.717Z","figma_hero_svg":{"svg":""},"figma_svgs":[]},{"global_id":"breadcrumb","title":"Design","date":"2024-03-21T00:00:00.000Z","body":{"raw":"\\n## Design\\n\\n### Anatomy\\n\\n","code":"var Component=(()=>{var h=Object.create;var r=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var x=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),b=(n,e)=>{for(var o in e)r(n,o,{get:e[o],enumerable:!0})},s=(n,e,o,i)=>{if(e&&typeof e==\\"object\\"||typeof e==\\"function\\")for(let a of f(e))!u.call(n,a)&&a!==o&&r(n,a,{get:()=>e[a],enumerable:!(i=l(e,a))||i.enumerable});return n};var p=(n,e,o)=>(o=n!=null?h(g(n)):{},s(e||!n||!n.__esModule?r(o,\\"default\\",{value:n,enumerable:!0}):o,n)),_=n=>s(r({},\\"__esModule\\",{value:!0}),n);var d=x((C,c)=>{c.exports=_jsx_runtime});var F={};b(F,{default:()=>D,frontmatter:()=>j});var t=p(d()),j={title:\\"Design\\",global_id:\\"breadcrumb\\",date:new Date(17109792e5)};function m(n){let e=Object.assign({h2:\\"h2\\",a:\\"a\\",h3:\\"h3\\"},n.components),{Figma:o}=e;return o||w(\\"Figma\\",!0),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{id:\\"design\\",children:(0,t.jsx)(e.a,{className:\\"anchor\\",href:\\"#design\\",children:\\"Design\\"})}),`\\n`,(0,t.jsx)(e.h3,{id:\\"anatomy\\",children:(0,t.jsx)(e.a,{className:\\"anchor\\",href:\\"#anatomy\\",children:\\"Anatomy\\"})}),`\\n`,(0,t.jsx)(o,{node:\\"1140-3582\\",caption:\\"The anatomy of breadcrumbs\\"})]})}function y(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(m,n)})):m(n)}var D=y;function w(n,e){throw new Error(\\"Expected \\"+(e?\\"component\\":\\"object\\")+\\" `\\"+n+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return _(F);})();\\n;return Component;"},"_id":"component/breadcrumb/design.mdx","_raw":{"sourceFilePath":"component/breadcrumb/design.mdx","sourceFileName":"design.mdx","sourceFileDir":"component/breadcrumb","contentType":"mdx","flattenedPath":"component/breadcrumb/design"},"type":"Component","url_path":"/component/breadcrumb/design","headings":[{"level":2,"text":"Design","slug":"design"},{"level":3,"text":"Anatomy","slug":"anatomy"}],"pathSegments":[{"order":0,"pathName":"breadcrumb"},{"order":0,"pathName":"design"}],"last_edited":"2024-04-02T07:58:11.717Z","figma_hero_svg":{"svg":""},"figma_svgs":[{"node":"1140-3582","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/07623891-eee8-4bdd-a06e-04e13ff329c7"}]},{"global_id":"breadcrumb","title":"Breadcrumb","summary":"A breadcrumb is a secondary navigation showing the website hierarchy.","date":"2024-03-21T00:00:00.000Z","tags":"navigation","status":"work in progress","node":"782-3342","body":{"raw":"\\n## Overview\\nWe use breadcrumbs to display site hierarchy (rather than navigation path) and to increase findability of parent pages.\\n\\nBreadcrumbs help users navigate upward in the hierarchy and typically help with back-movement also. They also help with context when navigation is otherwise out of sight (for example in a mobile view).\\n\\nBreadcrumbs have been proven to reduce bounce rates for search-users, when they are able to quickly find related pages.\\n\\n## When and how to use it\\nUse for sites/applications that have a substantial amount of pages present deeper down in site structures.\\n\\n## Versions\\n\\n
\\n ### Desktop\\n The full path may not take up more than one row in the layout.\\n
\\n \\n\\n\\n
\\n ### Truncated desktop\\n If the path is too long the path is truncated after the root element\\n
\\n \\n\\n\\n
\\n ### Mobile or simple\\n For mobile views we only display the link to the parent page, as the full path tends to take too much space.\\n\\n The same version may be used in shallow hierarchies where there still is a need to easily move one step up, or back to the page from where you came.\\n\\n
\\n \\n\\n\\n\\n","code":"var Component=(()=>{var p=Object.create;var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var w=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),g=(a,e)=>{for(var r in e)o(a,r,{get:e[r],enumerable:!0})},s=(a,e,r,t)=>{if(e&&typeof e==\\"object\\"||typeof e==\\"function\\")for(let i of u(e))!f.call(a,i)&&i!==r&&o(a,i,{get:()=>e[i],enumerable:!(t=m(e,i))||t.enumerable});return a};var v=(a,e,r)=>(r=a!=null?p(b(a)):{},s(e||!a||!a.__esModule?o(r,\\"default\\",{value:a,enumerable:!0}):r,a)),y=a=>s(o({},\\"__esModule\\",{value:!0}),a);var c=w((F,h)=>{h.exports=_jsx_runtime});var j={};g(j,{default:()=>_,frontmatter:()=>k});var n=v(c()),k={title:\\"Breadcrumb\\",summary:\\"A breadcrumb is a secondary navigation showing the website hierarchy.\\",date:new Date(17109792e5),global_id:\\"breadcrumb\\",status:\\"work in progress\\",tags:\\"navigation\\",node:\\"782-3342\\"};function d(a){let e=Object.assign({h2:\\"h2\\",a:\\"a\\",p:\\"p\\",h3:\\"h3\\"},a.components),{Grid:r,Figma:t}=e;return t||l(\\"Figma\\",!0),r||l(\\"Grid\\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{id:\\"overview\\",children:(0,n.jsx)(e.a,{className:\\"anchor\\",href:\\"#overview\\",children:\\"Overview\\"})}),`\\n`,(0,n.jsx)(e.p,{children:\\"We use breadcrumbs to display site hierarchy (rather than navigation path) and to increase findability of parent pages.\\"}),`\\n`,(0,n.jsx)(e.p,{children:\\"Breadcrumbs help users navigate upward in the hierarchy and typically help with back-movement also. They also help with context when navigation is otherwise out of sight (for example in a mobile view).\\"}),`\\n`,(0,n.jsx)(e.p,{children:\\"Breadcrumbs have been proven to reduce bounce rates for search-users, when they are able to quickly find related pages.\\"}),`\\n`,(0,n.jsx)(e.h2,{id:\\"when-and-how-to-use-it\\",children:(0,n.jsx)(e.a,{className:\\"anchor\\",href:\\"#when-and-how-to-use-it\\",children:\\"When and how to use it\\"})}),`\\n`,(0,n.jsx)(e.p,{children:\\"Use for sites/applications that have a substantial amount of pages present deeper down in site structures.\\"}),`\\n`,(0,n.jsx)(e.h2,{id:\\"versions\\",children:(0,n.jsx)(e.a,{className:\\"anchor\\",href:\\"#versions\\",children:\\"Versions\\"})}),`\\n`,(0,n.jsxs)(r,{columns:2,gapInline:\\"small\\",children:[(0,n.jsxs)(\\"div\\",{children:[(0,n.jsx)(e.h3,{id:\\"desktop\\",children:(0,n.jsx)(e.a,{className:\\"anchor\\",href:\\"#desktop\\",children:\\"Desktop\\"})}),(0,n.jsx)(e.p,{children:\\"The full path may not take up more than one row in the layout.\\"})]}),(0,n.jsx)(t,{node:\\"1140-242\\",caption:\\"Breadcrumb in desktop\\"})]}),`\\n`,(0,n.jsxs)(r,{columns:2,gapInline:\\"small\\",children:[(0,n.jsxs)(\\"div\\",{children:[(0,n.jsx)(e.h3,{id:\\"truncated-desktop\\",children:(0,n.jsx)(e.a,{className:\\"anchor\\",href:\\"#truncated-desktop\\",children:\\"Truncated desktop\\"})}),(0,n.jsx)(e.p,{children:\\"If the path is too long the path is truncated after the root element\\"})]}),(0,n.jsx)(t,{node:\\"1147-17379\\",caption:\\"Truncated breadcrumbs\\"})]}),`\\n`,(0,n.jsxs)(r,{columns:2,gapInline:\\"small\\",children:[(0,n.jsxs)(\\"div\\",{children:[(0,n.jsx)(e.h3,{id:\\"mobile-or-simple\\",children:(0,n.jsx)(e.a,{className:\\"anchor\\",href:\\"#mobile-or-simple\\",children:\\"Mobile or simple\\"})}),(0,n.jsx)(e.p,{children:\\"For mobile views we only display the link to the parent page, as the full path tends to take too much space.\\"}),(0,n.jsx)(e.p,{children:\\"The same version may be used in shallow hierarchies where there still is a need to easily move one step up, or back to the page from where you came.\\"})]}),(0,n.jsx)(t,{node:\\"1140-274\\",caption:\\"Simplified breadcrumbs\\"})]})]})}function x(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,Object.assign({},a,{children:(0,n.jsx)(d,a)})):d(a)}var _=x;function l(a,e){throw new Error(\\"Expected \\"+(e?\\"component\\":\\"object\\")+\\" `\\"+a+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return y(j);})();\\n;return Component;"},"_id":"component/breadcrumb/index.mdx","_raw":{"sourceFilePath":"component/breadcrumb/index.mdx","sourceFileName":"index.mdx","sourceFileDir":"component/breadcrumb","contentType":"mdx","flattenedPath":"component/breadcrumb"},"type":"Component","url_path":"/component/breadcrumb","headings":[{"level":2,"text":"Overview","slug":"overview"},{"level":2,"text":"When and how to use it","slug":"when-and-how-to-use-it"},{"level":2,"text":"Versions","slug":"versions"}],"pathSegments":[{"order":0,"pathName":"breadcrumb"}],"last_edited":"2024-04-02T07:58:11.717Z","figma_hero_svg":{"node":"782-3342","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/d7b4230d-083c-46c9-9740-31143e9cb5fa"},"figma_svgs":[{"node":"1140-242","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/8736eab4-c58d-405b-8e47-22c7ef7a364e"},{"node":"1147-17379","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/91dc8d90-23a2-49b1-91f0-fb7d36541a6f"},{"node":"1140-274","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/858b316b-40f5-4619-bf30-56d7d8e9f6f9"}]},{"global_id":"breadcrumb","title":"UX Text","date":"2024-03-21T00:00:00.000Z","body":{"raw":"\\n## UX text\\n\\n","code":"var Component=(()=>{var d=Object.create;var a=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var _=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),b=(t,e)=>{for(var n in e)a(t,n,{get:e[n],enumerable:!0})},s=(t,e,n,c)=>{if(e&&typeof e==\\"object\\"||typeof e==\\"function\\")for(let o of h(e))!f.call(t,o)&&o!==n&&a(t,o,{get:()=>e[o],enumerable:!(c=m(e,o))||c.enumerable});return t};var j=(t,e,n)=>(n=t!=null?d(l(t)):{},s(e||!t||!t.__esModule?a(n,\\"default\\",{value:t,enumerable:!0}):n,t)),X=t=>s(a({},\\"__esModule\\",{value:!0}),t);var i=_((C,x)=>{x.exports=_jsx_runtime});var M={};b(M,{default:()=>D,frontmatter:()=>g});var r=j(i()),g={title:\\"UX Text\\",global_id:\\"breadcrumb\\",date:new Date(17109792e5)};function u(t){let e=Object.assign({h2:\\"h2\\",a:\\"a\\"},t.components);return(0,r.jsx)(e.h2,{id:\\"ux-text\\",children:(0,r.jsx)(e.a,{className:\\"anchor\\",href:\\"#ux-text\\",children:\\"UX text\\"})})}function p(t={}){let{wrapper:e}=t.components||{};return e?(0,r.jsx)(e,Object.assign({},t,{children:(0,r.jsx)(u,t)})):u(t)}var D=p;return X(M);})();\\n;return Component;"},"_id":"component/breadcrumb/ux-text.mdx","_raw":{"sourceFilePath":"component/breadcrumb/ux-text.mdx","sourceFileName":"ux-text.mdx","sourceFileDir":"component/breadcrumb","contentType":"mdx","flattenedPath":"component/breadcrumb/ux-text"},"type":"Component","url_path":"/component/breadcrumb/ux-text","headings":[{"level":2,"text":"UX text","slug":"ux-text"}],"pathSegments":[{"order":0,"pathName":"breadcrumb"},{"order":0,"pathName":"ux-text"}],"last_edited":"2024-04-02T07:58:11.717Z","figma_hero_svg":{"svg":""},"figma_svgs":[]},{"global_id":"buttonaccessibility","title":"Accessibility","date":"2024-02-08T00:00:00.000Z","body":{"raw":"\\n## Accessibility\\nAll values we measure need to pass in order to give a check on the accessibility on all our components.\\n\\n### Review\\n**Review button, webcomponent 2023-12-11 - FAILED**\\n- Contrast: Passed\\n- Aria-label: Passed\\n- Keyboard navigation: **Failed** Enter key doesn’t trigger the visual pressed-state.\\n- Darkmode: Passed\\n- Focus: Passed\\n- Screen reader: Passed\\n\\n{ /* To be done: \\n=======\\n| Values to measure | Status |\\n| ---------------------- | ------------ |\\n| Contrast | Passed |\\n| Aria-label | Passed |\\n| Keyboard navigation | Failed |\\n| Darkmode | Passed |\\n| Focus | Passed |\\n| Screen reader | Passed |\\n*/}\\n\\n### Important considerations\\n\\n#### Maintain semantic consistency\\nDo not use links (a tag) instead of buttons (button tag). Buttons are intended for actions or operations (e.g. submitting forms, triggering actions), while links are intended for navigation to other pages or resources. Avoid using links for triggering actions, or buttons for navigation purposes.\\n\\n### Keyboard navigation\\nUses default navigation: trigger on key-up with space, trigger on key-down with enter.\\n\\n### Labelling\\n- Ensure buttons have discernible label text. If the button has no visible text, the label attribute must be used to provide an accessible label.\\n- If there are multiple buttons with the same text, such as *Apply*, the label attribute can be used to give each button a distinct label, such as *Apply for A, Apply for B*, etc.\\n\\n\\n \\n \\n\\n\\n#### Code examples for labelling\\n\\n``` html\\n\\nLabel text\\n\\n\\nApply\\n\\n\\n\\n```\\n## Resources\\n\\n- [Accessibility / Design Library](https://designlibrary.sebank.se/foundation/accessibility/accessibility-at-seb/)\\n- [Accessibility / SEB overall accessibility guidelines - todo](/foundation/accessibility)\\n- [MDN Webdocs / Learn more about labeling elements](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Text_labels_and_names)","code":"var Component=(()=>{var p=Object.create;var a=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var m=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),B=(l,e)=>{for(var i in e)a(l,i,{get:e[i],enumerable:!0})},r=(l,e,i,s)=>{if(e&&typeof e==\\"object\\"||typeof e==\\"function\\")for(let t of u(e))!g.call(l,t)&&t!==i&&a(l,t,{get:()=>e[t],enumerable:!(s=b(e,t))||s.enumerable});return l};var f=(l,e,i)=>(i=l!=null?p(y(l)):{},r(e||!l||!l.__esModule?a(i,\\"default\\",{value:l,enumerable:!0}):i,l)),A=l=>r(a({},\\"__esModule\\",{value:!0}),l);var o=m((C,c)=>{c.exports=_jsx_runtime});var w={};B(w,{default:()=>x,frontmatter:()=>v});var n=f(o()),v={title:\\"Accessibility\\",global_id:\\"buttonaccessibility\\",date:new Date(17073504e5)};function d(l){let e=Object.assign({h2:\\"h2\\",a:\\"a\\",p:\\"p\\",h3:\\"h3\\",strong:\\"strong\\",ul:\\"ul\\",li:\\"li\\",h4:\\"h4\\",em:\\"em\\",div:\\"div\\",pre:\\"pre\\",code:\\"code\\",span:\\"span\\"},l.components),{Grid:i,Figma:s}=e;return s||h(\\"Figma\\",!0),i||h(\\"Grid\\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{id:\\"accessibility\\",children:(0,n.jsx)(e.a,{className:\\"anchor\\",href:\\"#accessibility\\",children:\\"Accessibility\\"})}),`\\n`,(0,n.jsx)(e.p,{children:\\"All values we measure need to pass in order to give a check on the accessibility on all our components.\\"}),`\\n`,(0,n.jsx)(e.h3,{id:\\"review\\",children:(0,n.jsx)(e.a,{className:\\"anchor\\",href:\\"#review\\",children:\\"Review\\"})}),`\\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\\"Review button, webcomponent 2023-12-11 - FAILED\\"})}),`\\n`,(0,n.jsxs)(e.ul,{children:[`\\n`,(0,n.jsx)(e.li,{children:\\"Contrast: Passed\\"}),`\\n`,(0,n.jsx)(e.li,{children:\\"Aria-label: Passed\\"}),`\\n`,(0,n.jsxs)(e.li,{children:[\\"Keyboard navigation: \\",(0,n.jsx)(e.strong,{children:\\"Failed\\"}),\\" \\",(0,n.jsx)(\\"br\\",{}),\\"Enter key doesn\\\\u2019t trigger the visual pressed-state.\\"]}),`\\n`,(0,n.jsx)(e.li,{children:\\"Darkmode: Passed\\"}),`\\n`,(0,n.jsx)(e.li,{children:\\"Focus: Passed\\"}),`\\n`,(0,n.jsx)(e.li,{children:\\"Screen reader: Passed\\"}),`\\n`]}),`\\n`,`\\n`,(0,n.jsx)(e.h3,{id:\\"important-considerations\\",children:(0,n.jsx)(e.a,{className:\\"anchor\\",href:\\"#important-considerations\\",children:\\"Important considerations\\"})}),`\\n`,(0,n.jsx)(e.h4,{id:\\"maintain-semantic-consistency\\",children:(0,n.jsx)(e.a,{className:\\"anchor\\",href:\\"#maintain-semantic-consistency\\",children:\\"Maintain semantic consistency\\"})}),`\\n`,(0,n.jsx)(e.p,{children:\\"Do not use links (a tag) instead of buttons (button tag). Buttons are intended for actions or operations (e.g. submitting forms, triggering actions), while links are intended for navigation to other pages or resources. Avoid using links for triggering actions, or buttons for navigation purposes.\\"}),`\\n`,(0,n.jsx)(e.h3,{id:\\"keyboard-navigation\\",children:(0,n.jsx)(e.a,{className:\\"anchor\\",href:\\"#keyboard-navigation\\",children:\\"Keyboard navigation\\"})}),`\\n`,(0,n.jsx)(e.p,{children:\\"Uses default navigation: trigger on key-up with space, trigger on key-down with enter.\\"}),`\\n`,(0,n.jsx)(e.h3,{id:\\"labelling\\",children:(0,n.jsx)(e.a,{className:\\"anchor\\",href:\\"#labelling\\",children:\\"Labelling\\"})}),`\\n`,(0,n.jsxs)(e.ul,{children:[`\\n`,(0,n.jsx)(e.li,{children:\\"Ensure buttons have discernible label text. If the button has no visible text, the label attribute must be used to provide an accessible label.\\"}),`\\n`,(0,n.jsxs)(e.li,{children:[\\"If there are multiple buttons with the same text, such as \\",(0,n.jsx)(e.em,{children:\\"Apply\\"}),\\", the label attribute can be used to give each button a distinct label, such as \\",(0,n.jsx)(e.em,{children:\\"Apply for A, Apply for B\\"}),\\", etc.\\"]}),`\\n`]}),`\\n`,(0,n.jsxs)(i,{columns:2,children:[(0,n.jsx)(s,{node:\\"259-4131\\",caption:\\"Buttons with accessible labels.\\"}),(0,n.jsx)(s,{node:\\"259-4140\\",caption:\\"Icon buttons with accessible labels, label attributes.\\"})]}),`\\n`,(0,n.jsx)(e.h4,{id:\\"code-examples-for-labelling\\",children:(0,n.jsx)(e.a,{className:\\"anchor\\",href:\\"#code-examples-for-labelling\\",children:\\"Code examples for labelling\\"})}),`\\n`,(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{className:\\"one-dark-pro\\",style:{backgroundColor:\\"#282c34\\"},tabIndex:\\"0\\",\\"data-language\\":\\"html\\",\\"data-theme\\":\\"default\\",children:(0,n.jsxs)(e.code,{\\"data-language\\":\\"html\\",\\"data-theme\\":\\"default\\",style:{display:\\"grid\\"},children:[(0,n.jsx)(e.span,{className:\\"\\",\\"data-line\\":\\"\\",children:(0,n.jsx)(e.span,{style:{color:\\"#7F848E\\",fontStyle:\\"italic\\"},children:\\"\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"\\",\\"data-line\\":\\"\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"<\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,n.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">Label text\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,n.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"\\",\\"data-line\\":\\"\\",children:\\" \\"}),`\\n`,(0,n.jsx)(e.span,{className:\\"\\",\\"data-line\\":\\"\\",children:(0,n.jsx)(e.span,{style:{color:\\"#7F848E\\",fontStyle:\\"italic\\"},children:\\"\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"\\",\\"data-line\\":\\"\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"<\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,n.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" \\"}),(0,n.jsx)(e.span,{style:{color:\\"#D19A66\\"},children:\\"label\\"}),(0,n.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#98C379\\"},children:\'\\"Apply for A\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">Apply\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,n.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"\\",\\"data-line\\":\\"\\",children:\\" \\"}),`\\n`,(0,n.jsx)(e.span,{className:\\"\\",\\"data-line\\":\\"\\",children:(0,n.jsx)(e.span,{style:{color:\\"#7F848E\\",fontStyle:\\"italic\\"},children:\\"\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"\\",\\"data-line\\":\\"\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"<\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,n.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" \\"}),(0,n.jsx)(e.span,{style:{color:\\"#D19A66\\"},children:\\"label\\"}),(0,n.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#98C379\\"},children:\'\\"Close menu\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"> <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-icon\\"}),(0,n.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" \\"}),(0,n.jsx)(e.span,{style:{color:\\"#D19A66\\"},children:\\"name\\"}),(0,n.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#98C379\\"},children:\'\\"x\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-icon\\"}),(0,n.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,n.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">\\"})]})]})})}),`\\n`,(0,n.jsx)(e.h2,{id:\\"resources\\",children:(0,n.jsx)(e.a,{className:\\"anchor\\",href:\\"#resources\\",children:\\"Resources\\"})}),`\\n`,(0,n.jsxs)(e.ul,{children:[`\\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\\"https://designlibrary.sebank.se/foundation/accessibility/accessibility-at-seb/\\",children:\\"Accessibility / Design Library\\"})}),`\\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\\"/foundation/accessibility\\",children:\\"Accessibility / SEB overall accessibility guidelines - todo\\"})}),`\\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\\"https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Text_labels_and_names\\",children:\\"MDN Webdocs / Learn more about labeling elements\\"})}),`\\n`]})]})}function F(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,Object.assign({},l,{children:(0,n.jsx)(d,l)})):d(l)}var x=F;function h(l,e){throw new Error(\\"Expected \\"+(e?\\"component\\":\\"object\\")+\\" `\\"+l+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return A(w);})();\\n;return Component;"},"_id":"component/button/accessibility.mdx","_raw":{"sourceFilePath":"component/button/accessibility.mdx","sourceFileName":"accessibility.mdx","sourceFileDir":"component/button","contentType":"mdx","flattenedPath":"component/button/accessibility"},"type":"Component","url_path":"/component/button/accessibility","headings":[{"level":2,"text":"Accessibility","slug":"accessibility"},{"level":3,"text":"Review","slug":"review"},{"level":3,"text":"Important considerations","slug":"important-considerations"},{"level":4,"text":"Maintain semantic consistency","slug":"maintain-semantic-consistency"},{"level":3,"text":"Keyboard navigation","slug":"keyboard-navigation"},{"level":3,"text":"Labelling","slug":"labelling"},{"level":4,"text":"Code examples for labelling","slug":"code-examples-for-labelling"},{"level":2,"text":"Resources","slug":"resources"}],"pathSegments":[{"order":0,"pathName":"button"},{"order":0,"pathName":"accessibility"}],"last_edited":"2024-04-02T07:58:11.717Z","figma_hero_svg":{"svg":""},"figma_svgs":[{"node":"259-4131","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/a94d56f5-3796-4d01-a01e-f9c6cc64d52b"},{"node":"259-4140","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/e93ece30-292b-464f-80a3-93744bc49a98"}]},{"global_id":"buttoncode","title":"Code","date":"2023-12-22T00:00:00.000Z","body":{"raw":"\\n## Code\\n\\n### Examples\\n\\n#### Default button\\n\\nThe defaut button har the prio primary and is the variant normal.\\n\\n\\n Send payment\\n\\n\\n```html\\nSend payment\\n```\\n\\n#### Prio\\n\\nButtons exist in three different prios, Primary, Secondary and Tertiary\\n\\n\\n \\n Send payment\\n Cancel\\n More\\n \\n\\n\\n```html\\nSend payment\\nCancel\\nMore\\n```\\n\\n#### Variants\\n\\nEach prio button can be one of the following variants: Neutral, Positive and Negative\\n\\n\\n \\n \\n Submit\\n Approve\\n Revoke\\n \\n \\n Submit\\n Approve\\n Revoke\\n \\n \\n Submit\\n Approve\\n Revoke\\n \\n \\n\\n```html showLineNumbers {1-4}\\n\\nSubmit\\nApprove\\nRevoke\\n\\n\\n\\nSubmit\\nApprove\\nRevoke\\n\\n\\n\\nSubmit\\nApprove\\nRevoke\\n\\n````\\n\\n#### Icons\\n\\nButtons exist in three different prios, Primary, Secondary and Tertiary\\n\\n\\n\\n \\n Send payment\\n Upload\\n Download\\n \\n\\n\\n```html\\nSend payment\\nUpload\\nDownload\\n````\\n\\n#### Sizes\\n\\nButtons can be small, medium or large. The default size is medium.\\n\\n\\n \\n Small\\n Medium\\n Large\\n \\n\\n\\n```html\\nSmall\\nMedium\\nLarge\\n```\\n\\n#### Icon button\\n\\nIf a single gds-icon is the only child of a button, it will render as a circular icon button.\\n\\n\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n\\n\\n```html\\n\\n\\n\\n```\\n\\n#### Disabled\\n\\nWe don\'t encourage to use components with a disabled state but the button can be disabled if needed\\n\\n\\n \\n Send payment\\n Cancel\\n More\\n \\n\\n\\n```html\\nSend payment\\nCancel\\nMore\\n```\\n","code":"var Component=(()=>{var B=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var g=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),m=(n,e)=>{for(var r in e)a(n,r,{get:e[r],enumerable:!0})},c=(n,e,r,s)=>{if(e&&typeof e==\\"object\\"||typeof e==\\"function\\")for(let o of y(e))!u.call(n,o)&&o!==r&&a(n,o,{get:()=>e[o],enumerable:!(s=p(e,o))||s.enumerable});return n};var F=(n,e,r)=>(r=n!=null?B(A(n)):{},c(e||!n||!n.__esModule?a(r,\\"default\\",{value:n,enumerable:!0}):r,n)),b=n=>c(a({},\\"__esModule\\",{value:!0}),n);var d=g((D,t)=>{t.exports=_jsx_runtime});var E={};m(E,{default:()=>v,frontmatter:()=>C});var l=F(d()),C={title:\\"Code\\",global_id:\\"buttoncode\\",date:new Date(17032032e5)};function i(n){let e=Object.assign({h2:\\"h2\\",a:\\"a\\",h3:\\"h3\\",h4:\\"h4\\",p:\\"p\\",div:\\"div\\",pre:\\"pre\\",code:\\"code\\",span:\\"span\\"},n.components),{Pattern:r,Grid:s}=e;return s||h(\\"Grid\\",!0),r||h(\\"Pattern\\",!0),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(e.h2,{id:\\"code\\",children:(0,l.jsx)(e.a,{className:\\"anchor\\",href:\\"#code\\",children:\\"Code\\"})}),`\\n`,(0,l.jsx)(e.h3,{id:\\"examples\\",children:(0,l.jsx)(e.a,{className:\\"anchor\\",href:\\"#examples\\",children:\\"Examples\\"})}),`\\n`,(0,l.jsx)(e.h4,{id:\\"default-button\\",children:(0,l.jsx)(e.a,{className:\\"anchor\\",href:\\"#default-button\\",children:\\"Default button\\"})}),`\\n`,(0,l.jsx)(e.p,{children:\\"The defaut button har the prio primary and is the variant normal.\\"}),`\\n`,(0,l.jsx)(r,{height:\\"250\\",children:(0,l.jsx)(\\"gds-button\\",{children:\\"Send payment\\"})}),`\\n`,(0,l.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(e.pre,{className:\\"one-dark-pro\\",style:{backgroundColor:\\"#282c34\\"},tabIndex:\\"0\\",\\"data-language\\":\\"html\\",\\"data-theme\\":\\"default\\",children:(0,l.jsx)(e.code,{\\"data-language\\":\\"html\\",\\"data-theme\\":\\"default\\",style:{display:\\"grid\\"},children:(0,l.jsxs)(e.span,{className:\\"\\",\\"data-line\\":\\"\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">Send payment\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">\\"})]})})})}),`\\n`,(0,l.jsx)(e.h4,{id:\\"prio\\",children:(0,l.jsx)(e.a,{className:\\"anchor\\",href:\\"#prio\\",children:\\"Prio\\"})}),`\\n`,(0,l.jsx)(e.p,{children:\\"Buttons exist in three different prios, Primary, Secondary and Tertiary\\"}),`\\n`,(0,l.jsx)(r,{height:\\"250\\",children:(0,l.jsxs)(s,{columns:\\"3\\",contentInline:\\"auto\\",justify:\\"center\\",children:[(0,l.jsx)(\\"gds-button\\",{variant:\\"primary\\",children:\\"Send payment\\"}),(0,l.jsx)(\\"gds-button\\",{variant:\\"secondary\\",children:\\"Cancel\\"}),(0,l.jsx)(\\"gds-button\\",{variant:\\"tertiary\\",children:\\"More\\"})]})}),`\\n`,(0,l.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(e.pre,{className:\\"one-dark-pro\\",style:{backgroundColor:\\"#282c34\\"},tabIndex:\\"0\\",\\"data-language\\":\\"html\\",\\"data-theme\\":\\"default\\",children:(0,l.jsxs)(e.code,{\\"data-language\\":\\"html\\",\\"data-theme\\":\\"default\\",style:{display:\\"grid\\"},children:[(0,l.jsxs)(e.span,{className:\\"\\",\\"data-line\\":\\"\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" \\"}),(0,l.jsx)(e.span,{style:{color:\\"#D19A66\\"},children:\\"prio\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#98C379\\"},children:\'\\"primary\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">Send payment\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"\\",\\"data-line\\":\\"\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" \\"}),(0,l.jsx)(e.span,{style:{color:\\"#D19A66\\"},children:\\"prio\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#98C379\\"},children:\'\\"secondary\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">Cancel\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"\\",\\"data-line\\":\\"\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" \\"}),(0,l.jsx)(e.span,{style:{color:\\"#D19A66\\"},children:\\"prio\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#98C379\\"},children:\'\\"tertiary\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">More\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">\\"})]})]})})}),`\\n`,(0,l.jsx)(e.h4,{id:\\"variants\\",children:(0,l.jsx)(e.a,{className:\\"anchor\\",href:\\"#variants\\",children:\\"Variants\\"})}),`\\n`,(0,l.jsx)(e.p,{children:\\"Each prio button can be one of the following variants: Neutral, Positive and Negative\\"}),`\\n`,(0,l.jsx)(r,{height:\\"240\\",children:(0,l.jsxs)(s,{columns:1,gapBlock:\\"small\\",children:[(0,l.jsxs)(s,{columns:3,contentInline:\\"auto\\",justify:\\"center\\",children:[(0,l.jsx)(\\"gds-button\\",{set:\\"neutral\\",children:\\"Submit\\"}),(0,l.jsx)(\\"gds-button\\",{set:\\"positive\\",children:\\"Approve\\"}),(0,l.jsx)(\\"gds-button\\",{set:\\"negative\\",children:\\"Revoke\\"})]}),(0,l.jsxs)(s,{columns:3,contentInline:\\"auto\\",justify:\\"center\\",children:[(0,l.jsx)(\\"gds-button\\",{variant:\\"secondary\\",set:\\"neutral\\",children:\\"Submit\\"}),(0,l.jsx)(\\"gds-button\\",{variant:\\"secondary\\",set:\\"positive\\",children:\\"Approve\\"}),(0,l.jsx)(\\"gds-button\\",{variant:\\"secondary\\",set:\\"negative\\",children:\\"Revoke\\"})]}),(0,l.jsxs)(s,{columns:3,contentInline:\\"auto\\",justify:\\"center\\",children:[(0,l.jsx)(\\"gds-button\\",{variant:\\"tertiary\\",set:\\"neutral\\",children:\\"Submit\\"}),(0,l.jsx)(\\"gds-button\\",{variant:\\"tertiary\\",set:\\"positive\\",children:\\"Approve\\"}),(0,l.jsx)(\\"gds-button\\",{variant:\\"tertiary\\",set:\\"negative\\",children:\\"Revoke\\"})]})]})}),`\\n`,(0,l.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(e.pre,{className:\\"one-dark-pro\\",style:{backgroundColor:\\"#282c34\\"},tabIndex:\\"0\\",\\"data-language\\":\\"html\\",\\"data-theme\\":\\"default\\",children:(0,l.jsxs)(e.code,{\\"data-line-numbers\\":\\"\\",\\"data-language\\":\\"html\\",\\"data-theme\\":\\"default\\",style:{display:\\"grid\\"},\\"data-line-numbers-max-digits\\":\\"2\\",children:[(0,l.jsx)(e.span,{className:\\"\\",\\"data-line\\":\\"\\",\\"data-highlighted-line\\":\\"\\",children:(0,l.jsx)(e.span,{style:{color:\\"#7F848E\\",fontStyle:\\"italic\\"},children:\\"\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"\\",\\"data-line\\":\\"\\",\\"data-highlighted-line\\":\\"\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" \\"}),(0,l.jsx)(e.span,{style:{color:\\"#D19A66\\"},children:\\"variant\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#98C379\\"},children:\'\\"neutral\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">Submit\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"\\",\\"data-line\\":\\"\\",\\"data-highlighted-line\\":\\"\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" \\"}),(0,l.jsx)(e.span,{style:{color:\\"#D19A66\\"},children:\\"variant\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#98C379\\"},children:\'\\"positive\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">Approve\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"\\",\\"data-line\\":\\"\\",\\"data-highlighted-line\\":\\"\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" \\"}),(0,l.jsx)(e.span,{style:{color:\\"#D19A66\\"},children:\\"variant\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#98C379\\"},children:\'\\"negative\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">Revoke\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"\\",\\"data-line\\":\\"\\",children:\\" \\"}),`\\n`,(0,l.jsx)(e.span,{className:\\"\\",\\"data-line\\":\\"\\",children:(0,l.jsx)(e.span,{style:{color:\\"#7F848E\\",fontStyle:\\"italic\\"},children:\\"\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"\\",\\"data-line\\":\\"\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"\\",\\"data-line\\":\\"\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" \\"}),(0,l.jsx)(e.span,{style:{color:\\"#D19A66\\"},children:\\"prio\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#98C379\\"},children:\'\\"secondary\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" \\"}),(0,l.jsx)(e.span,{style:{color:\\"#D19A66\\"},children:\\"variant\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#98C379\\"},children:\'\\"neutral\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">Submit\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"\\",\\"data-line\\":\\"\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" \\"}),(0,l.jsx)(e.span,{style:{color:\\"#D19A66\\"},children:\\"prio\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#98C379\\"},children:\'\\"secondary\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" \\"}),(0,l.jsx)(e.span,{style:{color:\\"#D19A66\\"},children:\\"variant\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#98C379\\"},children:\'\\"positive\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">Approve\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"\\",\\"data-line\\":\\"\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" \\"}),(0,l.jsx)(e.span,{style:{color:\\"#D19A66\\"},children:\\"prio\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#98C379\\"},children:\'\\"secondary\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" \\"}),(0,l.jsx)(e.span,{style:{color:\\"#D19A66\\"},children:\\"variant\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#98C379\\"},children:\'\\"negative\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">Revoke\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"\\",\\"data-line\\":\\"\\",children:\\" \\"}),`\\n`,(0,l.jsx)(e.span,{className:\\"\\",\\"data-line\\":\\"\\",children:(0,l.jsx)(e.span,{style:{color:\\"#7F848E\\",fontStyle:\\"italic\\"},children:\\"\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"\\",\\"data-line\\":\\"\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"\\",\\"data-line\\":\\"\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" \\"}),(0,l.jsx)(e.span,{style:{color:\\"#D19A66\\"},children:\\"prio\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#98C379\\"},children:\'\\"tertiary\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" \\"}),(0,l.jsx)(e.span,{style:{color:\\"#D19A66\\"},children:\\"variant\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#98C379\\"},children:\'\\"neutral\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">Submit\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"\\",\\"data-line\\":\\"\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" \\"}),(0,l.jsx)(e.span,{style:{color:\\"#D19A66\\"},children:\\"prio\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#98C379\\"},children:\'\\"tertiary\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" \\"}),(0,l.jsx)(e.span,{style:{color:\\"#D19A66\\"},children:\\"variant\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#98C379\\"},children:\'\\"positive\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">Approve\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"\\",\\"data-line\\":\\"\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" \\"}),(0,l.jsx)(e.span,{style:{color:\\"#D19A66\\"},children:\\"prio\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#98C379\\"},children:\'\\"tertiary\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" \\"}),(0,l.jsx)(e.span,{style:{color:\\"#D19A66\\"},children:\\"variant\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#98C379\\"},children:\'\\"negative\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">Revoke\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"\\",\\"data-line\\":\\"\\",children:\\" \\"})]})})}),`\\n`,(0,l.jsx)(e.h4,{id:\\"icons\\",children:(0,l.jsx)(e.a,{className:\\"anchor\\",href:\\"#icons\\",children:\\"Icons\\"})}),`\\n`,(0,l.jsx)(e.p,{children:\\"Buttons exist in three different prios, Primary, Secondary and Tertiary\\"}),`\\n`,(0,l.jsx)(r,{height:\\"240\\",children:(0,l.jsxs)(s,{columns:3,contentInline:\\"auto\\",justify:\\"center\\",children:[(0,l.jsxs)(\\"gds-button\\",{variant:\\"primary\\",children:[(0,l.jsx)(\\"gds-icon\\",{slot:\\"lead\\",name:\\"send\\"}),\\"Send payment\\"]}),(0,l.jsxs)(\\"gds-button\\",{variant:\\"secondary\\",children:[(0,l.jsx)(\\"gds-icon\\",{slot:\\"trail\\",name:\\"arrow-up\\"}),\\"Upload\\"]}),(0,l.jsxs)(\\"gds-button\\",{variant:\\"tertiary\\",children:[(0,l.jsx)(\\"gds-icon\\",{slot:\\"lead\\",name:\\"arrow-down\\"}),\\"Download\\"]})]})}),`\\n`,(0,l.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(e.pre,{className:\\"one-dark-pro\\",style:{backgroundColor:\\"#282c34\\"},tabIndex:\\"0\\",\\"data-language\\":\\"html\\",\\"data-theme\\":\\"default\\",children:(0,l.jsxs)(e.code,{\\"data-language\\":\\"html\\",\\"data-theme\\":\\"default\\",style:{display:\\"grid\\"},children:[(0,l.jsxs)(e.span,{className:\\"\\",\\"data-line\\":\\"\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" \\"}),(0,l.jsx)(e.span,{style:{color:\\"#D19A66\\"},children:\\"prio\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#98C379\\"},children:\'\\"primary\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"><\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-icon\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" \\"}),(0,l.jsx)(e.span,{style:{color:\\"#D19A66\\"},children:\\"slot\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#98C379\\"},children:\'\\"lead\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" \\"}),(0,l.jsx)(e.span,{style:{color:\\"#D19A66\\"},children:\\"name\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#98C379\\"},children:\'\\"send\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" />Send payment\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"\\",\\"data-line\\":\\"\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" \\"}),(0,l.jsx)(e.span,{style:{color:\\"#D19A66\\"},children:\\"prio\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#98C379\\"},children:\'\\"secondary\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"><\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-icon\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" \\"}),(0,l.jsx)(e.span,{style:{color:\\"#D19A66\\"},children:\\"slot\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#98C379\\"},children:\'\\"trail\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" \\"}),(0,l.jsx)(e.span,{style:{color:\\"#D19A66\\"},children:\\"name\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#98C379\\"},children:\'\\"arrow-up\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" />Upload\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"\\",\\"data-line\\":\\"\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" \\"}),(0,l.jsx)(e.span,{style:{color:\\"#D19A66\\"},children:\\"prio\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#98C379\\"},children:\'\\"primary\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"><\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-icon\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" \\"}),(0,l.jsx)(e.span,{style:{color:\\"#D19A66\\"},children:\\"slot\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#98C379\\"},children:\'\\"lead\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" \\"}),(0,l.jsx)(e.span,{style:{color:\\"#D19A66\\"},children:\\"name\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#98C379\\"},children:\'\\"arrow-down\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" />Download\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">\\"})]})]})})}),`\\n`,(0,l.jsx)(e.h4,{id:\\"sizes\\",children:(0,l.jsx)(e.a,{className:\\"anchor\\",href:\\"#sizes\\",children:\\"Sizes\\"})}),`\\n`,(0,l.jsx)(e.p,{children:\\"Buttons can be small, medium or large. The default size is medium.\\"}),`\\n`,(0,l.jsx)(r,{height:\\"240\\",children:(0,l.jsxs)(s,{columns:3,contentInline:\\"auto\\",justify:\\"center\\",children:[(0,l.jsx)(\\"gds-button\\",{size:\\"small\\",children:\\"Small\\"}),(0,l.jsx)(\\"gds-button\\",{children:\\"Medium\\"}),(0,l.jsx)(\\"gds-button\\",{size:\\"large\\",children:\\"Large\\"})]})}),`\\n`,(0,l.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(e.pre,{className:\\"one-dark-pro\\",style:{backgroundColor:\\"#282c34\\"},tabIndex:\\"0\\",\\"data-language\\":\\"html\\",\\"data-theme\\":\\"default\\",children:(0,l.jsxs)(e.code,{\\"data-language\\":\\"html\\",\\"data-theme\\":\\"default\\",style:{display:\\"grid\\"},children:[(0,l.jsxs)(e.span,{className:\\"\\",\\"data-line\\":\\"\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" \\"}),(0,l.jsx)(e.span,{style:{color:\\"#D19A66\\"},children:\\"size\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#98C379\\"},children:\'\\"small\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">Small\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"\\",\\"data-line\\":\\"\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">Medium\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"\\",\\"data-line\\":\\"\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" \\"}),(0,l.jsx)(e.span,{style:{color:\\"#D19A66\\"},children:\\"size\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#98C379\\"},children:\'\\"large\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">Large\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">\\"})]})]})})}),`\\n`,(0,l.jsx)(e.h4,{id:\\"icon-button\\",children:(0,l.jsx)(e.a,{className:\\"anchor\\",href:\\"#icon-button\\",children:\\"Icon button\\"})}),`\\n`,(0,l.jsx)(e.p,{children:\\"If a single gds-icon is the only child of a button, it will render as a circular icon button.\\"}),`\\n`,(0,l.jsx)(r,{height:\\"240\\",children:(0,l.jsxs)(s,{columns:3,contentInline:\\"auto\\",justify:\\"center\\",children:[(0,l.jsx)(\\"gds-button\\",{size:\\"small\\",children:(0,l.jsx)(\\"gds-icon\\",{name:\\"arrow\\"})}),(0,l.jsx)(\\"gds-button\\",{children:(0,l.jsx)(\\"gds-icon\\",{name:\\"arrow\\"})}),(0,l.jsx)(\\"gds-button\\",{size:\\"large\\",children:(0,l.jsx)(\\"gds-icon\\",{name:\\"arrow\\"})})]})}),`\\n`,(0,l.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(e.pre,{className:\\"one-dark-pro\\",style:{backgroundColor:\\"#282c34\\"},tabIndex:\\"0\\",\\"data-language\\":\\"html\\",\\"data-theme\\":\\"default\\",children:(0,l.jsxs)(e.code,{\\"data-language\\":\\"html\\",\\"data-theme\\":\\"default\\",style:{display:\\"grid\\"},children:[(0,l.jsxs)(e.span,{className:\\"\\",\\"data-line\\":\\"\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" \\"}),(0,l.jsx)(e.span,{style:{color:\\"#D19A66\\"},children:\\"size\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#98C379\\"},children:\'\\"small\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"><\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-icon\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" \\"}),(0,l.jsx)(e.span,{style:{color:\\"#D19A66\\"},children:\\"name\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#98C379\\"},children:\'\\"arrow\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" />\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"\\",\\"data-line\\":\\"\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"><\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-icon\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" \\"}),(0,l.jsx)(e.span,{style:{color:\\"#D19A66\\"},children:\\"name\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#98C379\\"},children:\'\\"arrow\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" />\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"\\",\\"data-line\\":\\"\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" \\"}),(0,l.jsx)(e.span,{style:{color:\\"#D19A66\\"},children:\\"size\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#98C379\\"},children:\'\\"large\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"><\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-icon\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" \\"}),(0,l.jsx)(e.span,{style:{color:\\"#D19A66\\"},children:\\"name\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#98C379\\"},children:\'\\"arrow\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" />\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">\\"})]})]})})}),`\\n`,(0,l.jsx)(e.h4,{id:\\"disabled\\",children:(0,l.jsx)(e.a,{className:\\"anchor\\",href:\\"#disabled\\",children:\\"Disabled\\"})}),`\\n`,(0,l.jsx)(e.p,{children:\\"We don\'t encourage to use components with a disabled state but the button can be disabled if needed\\"}),`\\n`,(0,l.jsx)(r,{height:\\"240\\",children:(0,l.jsxs)(s,{columns:3,contentInline:\\"auto\\",justify:\\"center\\",children:[(0,l.jsx)(\\"gds-button\\",{variant:\\"primary\\",disabled:!0,children:\\"Send payment\\"}),(0,l.jsx)(\\"gds-button\\",{variant:\\"secondary\\",disabled:!0,children:\\"Cancel\\"}),(0,l.jsx)(\\"gds-button\\",{variant:\\"tertiary\\",disabled:!0,children:\\"More\\"})]})}),`\\n`,(0,l.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(e.pre,{className:\\"one-dark-pro\\",style:{backgroundColor:\\"#282c34\\"},tabIndex:\\"0\\",\\"data-language\\":\\"html\\",\\"data-theme\\":\\"default\\",children:(0,l.jsxs)(e.code,{\\"data-language\\":\\"html\\",\\"data-theme\\":\\"default\\",style:{display:\\"grid\\"},children:[(0,l.jsxs)(e.span,{className:\\"\\",\\"data-line\\":\\"\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" \\"}),(0,l.jsx)(e.span,{style:{color:\\"#D19A66\\"},children:\\"prio\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#98C379\\"},children:\'\\"primary\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" \\"}),(0,l.jsx)(e.span,{style:{color:\\"#D19A66\\"},children:\\"disabled\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">Send payment\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"\\",\\"data-line\\":\\"\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" \\"}),(0,l.jsx)(e.span,{style:{color:\\"#D19A66\\"},children:\\"prio\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#98C379\\"},children:\'\\"secondary\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" \\"}),(0,l.jsx)(e.span,{style:{color:\\"#D19A66\\"},children:\\"disabled\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">Cancel\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"\\",\\"data-line\\":\\"\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" \\"}),(0,l.jsx)(e.span,{style:{color:\\"#D19A66\\"},children:\\"prio\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#98C379\\"},children:\'\\"tertiary\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\" \\"}),(0,l.jsx)(e.span,{style:{color:\\"#D19A66\\"},children:\\"disabled\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">More\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E06C75\\"},children:\\"gds-button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#ABB2BF\\"},children:\\">\\"})]})]})})})]})}function f(n={}){let{wrapper:e}=n.components||{};return e?(0,l.jsx)(e,Object.assign({},n,{children:(0,l.jsx)(i,n)})):i(n)}var v=f;function h(n,e){throw new Error(\\"Expected \\"+(e?\\"component\\":\\"object\\")+\\" `\\"+n+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return b(E);})();\\n;return Component;"},"_id":"component/button/code.mdx","_raw":{"sourceFilePath":"component/button/code.mdx","sourceFileName":"code.mdx","sourceFileDir":"component/button","contentType":"mdx","flattenedPath":"component/button/code"},"type":"Component","url_path":"/component/button/code","headings":[{"level":2,"text":"Code","slug":"code"},{"level":3,"text":"Examples","slug":"examples"},{"level":4,"text":"Default button","slug":"default-button"},{"level":4,"text":"Prio","slug":"prio"},{"level":4,"text":"Variants","slug":"variants"},{"level":4,"text":"Icons","slug":"icons"},{"level":4,"text":"Sizes","slug":"sizes"},{"level":4,"text":"Icon button","slug":"icon-button"},{"level":4,"text":"Disabled","slug":"disabled"}],"pathSegments":[{"order":0,"pathName":"button"},{"order":0,"pathName":"code"}],"last_edited":"2024-04-02T07:58:11.717Z","figma_hero_svg":{"svg":""},"figma_svgs":[]},{"global_id":"buttondesign","title":"Design","date":"2023-12-22T00:00:00.000Z","body":{"raw":"\\n## Design\\n\\nEach button type has fully rounded corners. This creates a cohesive and consistent visual language within our design system. The differentiation in colour, border, and background helps users to easily distinguish between primary, secondary, and tertiary actions, contributing to a more intuitive and user-friendly interface.\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n
\\n## Anatomy\\n\\nA button consists of a container, a text, and an optional leading or trailing element (icon). The anatomy of a button in our design system includes various visual and functional elements that work together to create a cohesive and user-friendly interface. Here is a breakdown of the key components:\\n
\\n\\n\\n\\n\\n\\n\\n
\\n \\n\\n *Purpose*\\n\\n Displays the primary action or information associated with the button.\\n\\n *Attributes*\\n\\n Font size, colour, and style are essential for readability and visual hierarchy.\\n
\\n
\\n \\n\\n *Purpose*\\n\\n Forms the overall shape of the button and contains its elements.\\n\\n *Attributes*\\n\\n Background colour or style, border-radius and dimensions.\\n
\\n
\\n \\n\\n *Purpose*\\n\\n Defines the outer edge of the button, providing a visual separation from the surrounding elements.\\n\\n *Attributes*\\n\\n Thickness, colour, and style.\\n
\\n
\\n \\n \\n *Purpose*\\n\\n Provides additional context or visual cues to users before they interact with the button.\\n\\n *Attributes*\\n\\n Size, colour, and alignment within the button.\\n
\\n
\\n \\n\\n *Purpose*\\n\\n Serves a similar purpose to a leading element but is positioned on the right side of the button.\\n\\n *Attributes*\\n\\n Size, colour, and alignment within the button.\\n
\\n
\\n \\n\\n *Purpose*\\n\\n Determines the distance between the button\'s content (text, icon) and its container\'s edges.\\n\\n *Attributes*\\n\\n Ensure adequate padding for touch targets and visual balance.\\n
\\n
\\n \\n\\n *Purpose*\\n\\n Communicate the button\'s current state (e.g. hovered, pressed).\\n\\n *Attributes*\\n\\n Colour changes, subtle animations, or other visual cues.\\n
\\n
\\n \\n\\n *Purpose*\\n\\n Ensures the button is usable by everyone, including those with disabilities.\\n\\n *Attributes*\\n\\n ARIA attributes, focus styles, and sufficient colour contrast.\\n
\\n\\n\\n\\n\\n## Leading and trailing elements\\n\\nAn icon positioned at the beginning is known as a leading element, the one at the end of the text is referred to as a trailing element. Both types of elements share common purposes, offering visual cues and improving the user interface. \\n\\n\\n
\\n### Leading element\\n\\nUse leading elements to support the button text. \\nSome examples could be a trash can icon + text *Delete*, \\na search icon + text *Search* and arrow to bottom icon + text *Download*. \\n
\\n\\n\\n\\n\\n\\n\\n
\\n### Trailing element\\n\\nUse trailing element as an affordance of what will happen when you interact with the button. For example, a button that leads the user forward in a flow, an arrow icon is a good choice.\\n
\\n\\n\\n\\n\\n","code":"var Component=(()=>{var u=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var f=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),y=(t,n)=>{for(var r in n)o(t,r,{get:n[r],enumerable:!0})},c=(t,n,r,i)=>{if(n&&typeof n==\\"object\\"||typeof n==\\"function\\")for(let a of m(n))!b.call(t,a)&&a!==r&&o(t,a,{get:()=>n[a],enumerable:!(i=p(n,a))||i.enumerable});return t};var v=(t,n,r)=>(r=t!=null?u(g(t)):{},c(n||!t||!t.__esModule?o(r,\\"default\\",{value:t,enumerable:!0}):r,t)),w=t=>c(o({},\\"__esModule\\",{value:!0}),t);var l=f((S,s)=>{s.exports=_jsx_runtime});var P={};y(P,{default:()=>D,frontmatter:()=>x});var e=v(l()),x={title:\\"Design\\",global_id:\\"buttondesign\\",date:new Date(17032032e5)};function h(t){let n=Object.assign({h2:\\"h2\\",a:\\"a\\",p:\\"p\\",em:\\"em\\",h3:\\"h3\\"},t.components),{Grid:r,Figma:i,Spacer:a}=n;return i||d(\\"Figma\\",!0),r||d(\\"Grid\\",!0),a||d(\\"Spacer\\",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{id:\\"design\\",children:(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#design\\",children:\\"Design\\"})}),`\\n`,(0,e.jsx)(n.p,{children:\\"Each button type has fully rounded corners. This creates a cohesive and consistent visual language within our design system. The differentiation in colour, border, and background helps users to easily distinguish between primary, secondary, and tertiary actions, contributing to a more intuitive and user-friendly interface.\\"}),`\\n`,(0,e.jsxs)(r,{columns:3,children:[(0,e.jsx)(i,{node:\\"258-2977\\",caption:\\"A primary button has a solid container.\\"}),(0,e.jsx)(i,{node:\\"258-2986\\",caption:\\"A secondary button has a transparent container and 1 px border.\\"}),(0,e.jsx)(i,{node:\\"258-2989\\",caption:\\"A tertiary button has transparent container and no border.\\"})]}),`\\n`,(0,e.jsx)(a,{size:\\"medium\\",decorated:!0}),`\\n`,(0,e.jsxs)(r,{columns:2,children:[(0,e.jsxs)(\\"div\\",{children:[(0,e.jsx)(n.h2,{id:\\"anatomy\\",children:(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#anatomy\\",children:\\"Anatomy\\"})}),(0,e.jsx)(n.p,{children:\\"A button consists of a container, a text, and an optional leading or trailing element (icon). The anatomy of a button in our design system includes various visual and functional elements that work together to create a cohesive and user-friendly interface. Here is a breakdown of the key components:\\"})]}),(0,e.jsx)(i,{node:\\"258-3056\\",caption:\\"Container, text, leading and trailing element.\\"})]}),`\\n`,(0,e.jsxs)(r,{columns:3,children:[(0,e.jsxs)(\\"div\\",{children:[(0,e.jsx)(i,{node:\\"264-6654\\",caption:\\"Text\\"}),(0,e.jsx)(n.p,{children:(0,e.jsx)(n.em,{children:\\"Purpose\\"})}),(0,e.jsx)(n.p,{children:\\"Displays the primary action or information associated with the button.\\"}),(0,e.jsx)(n.p,{children:(0,e.jsx)(n.em,{children:\\"Attributes\\"})}),(0,e.jsx)(n.p,{children:\\"Font size, colour, and style are essential for readability and visual hierarchy.\\"})]}),(0,e.jsxs)(\\"div\\",{children:[(0,e.jsx)(i,{node:\\"264-6656\\",caption:\\"Container\\"}),(0,e.jsx)(n.p,{children:(0,e.jsx)(n.em,{children:\\"Purpose\\"})}),(0,e.jsx)(n.p,{children:\\"Forms the overall shape of the button and contains its elements.\\"}),(0,e.jsx)(n.p,{children:(0,e.jsx)(n.em,{children:\\"Attributes\\"})}),(0,e.jsx)(n.p,{children:\\"Background colour or style, border-radius and dimensions.\\"})]}),(0,e.jsxs)(\\"div\\",{children:[(0,e.jsx)(i,{node:\\"264-6658\\",caption:\\"Border\\"}),(0,e.jsx)(n.p,{children:(0,e.jsx)(n.em,{children:\\"Purpose\\"})}),(0,e.jsx)(n.p,{children:\\"Defines the outer edge of the button, providing a visual separation from the surrounding elements.\\"}),(0,e.jsx)(n.p,{children:(0,e.jsx)(n.em,{children:\\"Attributes\\"})}),(0,e.jsx)(n.p,{children:\\"Thickness, colour, and style.\\"})]}),(0,e.jsxs)(\\"div\\",{children:[(0,e.jsx)(i,{node:\\"264-7238\\",caption:\\"Leading element\\"}),(0,e.jsx)(n.p,{children:(0,e.jsx)(n.em,{children:\\"Purpose\\"})}),(0,e.jsx)(n.p,{children:\\"Provides additional context or visual cues to users before they interact with the button.\\"}),(0,e.jsx)(n.p,{children:(0,e.jsx)(n.em,{children:\\"Attributes\\"})}),(0,e.jsx)(n.p,{children:\\"Size, colour, and alignment within the button.\\"})]}),(0,e.jsxs)(\\"div\\",{children:[(0,e.jsx)(i,{node:\\"264-7241\\",caption:\\"Trailing element\\"}),(0,e.jsx)(n.p,{children:(0,e.jsx)(n.em,{children:\\"Purpose\\"})}),(0,e.jsx)(n.p,{children:\\"Serves a similar purpose to a leading element but is positioned on the right side of the button.\\"}),(0,e.jsx)(n.p,{children:(0,e.jsx)(n.em,{children:\\"Attributes\\"})}),(0,e.jsx)(n.p,{children:\\"Size, colour, and alignment within the button.\\"})]}),(0,e.jsxs)(\\"div\\",{children:[(0,e.jsx)(i,{node:\\"264-7245\\",caption:\\"Spacing/Padding\\"}),(0,e.jsx)(n.p,{children:(0,e.jsx)(n.em,{children:\\"Purpose\\"})}),(0,e.jsx)(n.p,{children:\\"Determines the distance between the button\'s content (text, icon) and its container\'s edges.\\"}),(0,e.jsx)(n.p,{children:(0,e.jsx)(n.em,{children:\\"Attributes\\"})}),(0,e.jsx)(n.p,{children:\\"Ensure adequate padding for touch targets and visual balance.\\"})]}),(0,e.jsxs)(\\"div\\",{children:[(0,e.jsx)(i,{node:\\"264-7314\\",caption:\\"State indicators\\"}),(0,e.jsx)(n.p,{children:(0,e.jsx)(n.em,{children:\\"Purpose\\"})}),(0,e.jsx)(n.p,{children:\\"Communicate the button\'s current state (e.g. hovered, pressed).\\"}),(0,e.jsx)(n.p,{children:(0,e.jsx)(n.em,{children:\\"Attributes\\"})}),(0,e.jsx)(n.p,{children:\\"Colour changes, subtle animations, or other visual cues.\\"})]}),(0,e.jsxs)(\\"div\\",{children:[(0,e.jsx)(i,{node:\\"264-7319\\",caption:\\"Accessibility features\\"}),(0,e.jsx)(n.p,{children:(0,e.jsx)(n.em,{children:\\"Purpose\\"})}),(0,e.jsx)(n.p,{children:\\"Ensures the button is usable by everyone, including those with disabilities.\\"}),(0,e.jsx)(n.p,{children:(0,e.jsx)(n.em,{children:\\"Attributes\\"})}),(0,e.jsx)(n.p,{children:\\"ARIA attributes, focus styles, and sufficient colour contrast.\\"})]})]}),`\\n`,(0,e.jsx)(a,{size:\\"medium\\",decorated:!0}),`\\n`,(0,e.jsx)(n.h2,{id:\\"leading-and-trailing-elements\\",children:(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#leading-and-trailing-elements\\",children:\\"Leading and trailing elements\\"})}),`\\n`,(0,e.jsx)(n.p,{children:\\"An icon positioned at the beginning is known as a leading element, the one at the end of the text is referred to as a trailing element. Both types of elements share common purposes, offering visual cues and improving the user interface.\\"}),`\\n`,(0,e.jsxs)(r,{columns:2,children:[(0,e.jsxs)(\\"div\\",{children:[(0,e.jsx)(n.h3,{id:\\"leading-element\\",children:(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#leading-element\\",children:\\"Leading element\\"})}),(0,e.jsxs)(n.p,{children:[`Use leading elements to support the button text.\\nSome examples could be a trash can icon + text `,(0,e.jsx)(n.em,{children:\\"Delete\\"}),`,\\na search icon + text `,(0,e.jsx)(n.em,{children:\\"Search\\"}),\\" and arrow to bottom icon + text \\",(0,e.jsx)(n.em,{children:\\"Download\\"}),\\".\\"]})]}),(0,e.jsx)(i,{node:\\"266-7387\\",caption:\\"Leading elements that support the button text.\\"})]}),`\\n`,(0,e.jsxs)(r,{columns:2,children:[(0,e.jsxs)(\\"div\\",{children:[(0,e.jsx)(n.h3,{id:\\"trailing-element\\",children:(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#trailing-element\\",children:\\"Trailing element\\"})}),(0,e.jsx)(n.p,{children:\\"Use trailing element as an affordance of what will happen when you interact with the button. For example, a button that leads the user forward in a flow, an arrow icon is a good choice.\\"})]}),(0,e.jsx)(i,{node:\\"266-7448\\",caption:\\"The trailing element gives a hint on what is about to happen on click.\\"})]})]})}function A(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,Object.assign({},t,{children:(0,e.jsx)(h,t)})):h(t)}var D=A;function d(t,n){throw new Error(\\"Expected \\"+(n?\\"component\\":\\"object\\")+\\" `\\"+t+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return w(P);})();\\n;return Component;"},"_id":"component/button/design.mdx","_raw":{"sourceFilePath":"component/button/design.mdx","sourceFileName":"design.mdx","sourceFileDir":"component/button","contentType":"mdx","flattenedPath":"component/button/design"},"type":"Component","url_path":"/component/button/design","headings":[{"level":2,"text":"Design","slug":"design"},{"level":2,"text":"Anatomy","slug":"anatomy"},{"level":2,"text":"Leading and trailing elements","slug":"leading-and-trailing-elements"},{"level":3,"text":"Leading element","slug":"leading-element"},{"level":3,"text":"Trailing element","slug":"trailing-element"}],"pathSegments":[{"order":0,"pathName":"button"},{"order":0,"pathName":"design"}],"last_edited":"2024-04-02T07:58:11.717Z","figma_hero_svg":{"svg":""},"figma_svgs":[{"node":"258-2977","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/6a2151f9-2421-4ed0-831d-0b6ed23f6a32"},{"node":"258-2986","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/f297931e-c25c-44f4-8c5d-4b75c707a32c"},{"node":"258-2989","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/8c42943a-94bb-4cc4-994f-ff5f8cee9b39"},{"node":"258-3056","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/97dfaccd-94d6-4a5c-9fa2-f1d125d0a47d"},{"node":"264-6654","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/8d03e4ec-6cbb-4cb3-8ac9-02dabd6b9c39"},{"node":"264-6656","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/b256b90f-fa94-4d5e-b329-982b0b1c137d"},{"node":"264-6658","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/4ce94e37-1528-4a75-b4be-8ad7e286cd26"},{"node":"264-7238","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/52b34e37-4fe4-4a1f-9ca5-59ffc225627f"},{"node":"264-7241","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/8d8683a1-d169-48d9-8d9b-b7134ab2d3ab"},{"node":"264-7245","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/c72d997a-425d-4f0a-ac50-8fb2e842617b"},{"node":"264-7314","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/c23a0964-b98d-4def-91c5-2fe521e9e267"},{"node":"264-7319","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/e9e4bf9d-9617-4ade-a2da-c0cdb13411fa"},{"node":"266-7387","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/95486d46-7307-4017-97dd-269273865990"},{"node":"266-7448","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/4c0ab95e-c873-460b-90ad-59102ced5f01"}]},{"global_id":"buttonbutton","title":"Button","summary":"Buttons are an essential element of interaction design. Their primary role is to help people take actions quickly.","date":"2023-12-22T00:00:00.000Z","tags":"form, button group","status":"work in progress","preview":"Primary default button","body":{"raw":"\\n## Overview\\n\\nA button serve as an interactive element that enables users to perform an action or make a choice with a simple click or tap. To decide which kind of button/buttons and putting them in the right order is key to make sure users know how to take the right action. A good rule of thumb is to use only one primary action in each context. \\n\\n## Buttons\\n\\nWe have a group of different buttons used for specific purposes.\\n\\n\\n \\n \\n \\n \\n \\n\\n\\n### Default button\\n\\nThe default button is our most used button. It comes in primary, secondary and tertiary, and the sizes small, medium and large.\\n\\nThe default button can be used as the positive, negative and inverted type. \\n\\n \\n \\n\\n\\n\\n\\n### Icon button\\n\\nWhen there is space, the icon button should always be grouped with a text label. This text provides additional context for users who may not understand the icon alone. If space is not available the icon need to be self explanatory, and have a tooltip function explaining the action.\\n\\nThe icon button comes in primary, secondary, and tertiary. In the sizes small, medium, and large. The icon button also comes as a tonal in two sets. One tonal in grey, used mostly on our container colour. And a few custom tonal combinations, used on custom combination cards. For example our alert ribbons.\\n\\nThe icon button can be used as the positive, negative and inverted type also when the context needs it. \\n\\n\\n \\n \\n \\n\\n\\n\\n\\n\\n
\\n### Floating action button\\n\\nOnly used for functions central to the user experience, such as support and help features that needs to be accessible at all times.\\n\\nThe button is always floating visible in the users viewport, typically in the lower right corner. This button can be used with an icon only.\\n\\nUsed only as primary.\\n
\\n\\n\\n\\n\\n\\n### Split button\\n\\nThe split button always has a primary action. This action is most likely to be used by the customer as the default action.When users click on the primary action, it triggers this action directly, such as submitting a form, confirming a selection, or initiating a process.\\n\\nThe users can click on the dropdown arrow to reveal a dropdown menu providing secondary or additional options.\\n\\nThe split button comes in both primary and secondary.\\n\\n\\n \\n \\n\\n\\n### Next and back button\\n\\nUsed inside flows to signal the direction forward or backward.\\n\\nBack button comes in both primary and secondary state depending on what suits the content. The next button comes as primary only.\\n\\n \\n \\n \\n\\n\\n\\n\\n## Variants\\n\\n- **Default**: The preferred choice of button in most contexts.\\n- **Positive**: To be decided.\\n- **Negative**: Use for the actions that may be harmful or destructive. A good example is deleting\\n- **Tonal**: Only used internal in other components (to match a background).\\n- **Inverted**: Used to place on other than the normal backgrounds (typically darker tones).\\n\\n\\n\\n\\n\\n\\n## Hierarchy\\n\\nIt\'s critical to find the right balance of what buttons to use. It\'s up to us as designers to guide and inform the users to take the right action.\\n\\n- **Primary buttons** require the most attention from your users.\\n- **Secondary buttons**, as the name says, is the second most likely choice.\\n- **Tertiary buttons** are used for less used or unwanted actions that is still relevant to find.\\n\\n\\n\\n\\n\\n\\n## Button sizes\\n\\nThe default button and icon button comes in a few different sizes. 32, 40 and 48 px. \\n\\n\\n \\n \\n \\n\\n\\n\\n\\n## Placements, right, left or stacked?\\n\\nA general rule is to always strive to place buttons in connection to the items they control. \\n\\n### Desktop placements\\n\\n- **Left:** In overviews and widgets, the user tends to read from top to bottom, therefore the buttons are kept to the left.\\n- **Right:** Modals and flows move the user from left to right, therefore the buttons are placed to the right. \\n\\n\\n \\n \\n\\n\\n### In a mobile device\\n\\n- **One button**, use the full width of the content area.\\n- **Two buttons**, aim to place them side by side. It is allowed to stack them if needed.\\n- **Three buttons**, consider the need for all of them. \\"cancel or close\\" might be x in the top right corner. Worst case scenario: place two buttons side by side and one tertiary button under.\\n\\n\\n \\n \\n\\n\\n\\n\\n## Wait-time after button pressed.\\n\\nTo be explored.\\n\\n\\n\\n## Do’s and don’ts\\n\\n**Do**\\n\\n- Only use one primary action in the same context of several actions.\\n\\n\\n \\n \\n \\n","code":"var Component=(()=>{var m=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var y=(o,n)=>()=>(n||o((n={exports:{}}).exports,n),n.exports),v=(o,n)=>{for(var i in n)r(o,i,{get:n[i],enumerable:!0})},l=(o,n,i,t)=>{if(n&&typeof n==\\"object\\"||typeof n==\\"function\\")for(let a of b(n))!g.call(o,a)&&a!==i&&r(o,a,{get:()=>n[a],enumerable:!(t=p(n,a))||t.enumerable});return o};var w=(o,n,i)=>(i=o!=null?m(f(o)):{},l(n||!o||!o.__esModule?r(i,\\"default\\",{value:o,enumerable:!0}):i,o)),k=o=>l(r({},\\"__esModule\\",{value:!0}),o);var h=y((D,d)=>{d.exports=_jsx_runtime});var N={};v(N,{default:()=>I,frontmatter:()=>x});var e=w(h()),x={title:\\"Button\\",summary:\\"Buttons are an essential element of interaction design. Their primary role is to help people take actions quickly.\\",date:new Date(17032032e5),global_id:\\"buttonbutton\\",status:\\"work in progress\\",tags:\\"form, button group\\",preview:\'Primary default button\'};function u(o){let n=Object.assign({h2:\\"h2\\",a:\\"a\\",p:\\"p\\",h3:\\"h3\\",ul:\\"ul\\",li:\\"li\\",strong:\\"strong\\"},o.components),{Grid:i,Figma:t,Spacer:a,Do:c}=n;return c||s(\\"Do\\",!0),t||s(\\"Figma\\",!0),i||s(\\"Grid\\",!0),a||s(\\"Spacer\\",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{id:\\"overview\\",children:(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#overview\\",children:\\"Overview\\"})}),`\\n`,(0,e.jsx)(n.p,{children:\\"A button serve as an interactive element that enables users to perform an action or make a choice with a simple click or tap. To decide which kind of button/buttons and putting them in the right order is key to make sure users know how to take the right action. A good rule of thumb is to use only one primary action in each context.\\"}),`\\n`,(0,e.jsx)(n.h2,{id:\\"buttons\\",children:(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#buttons\\",children:\\"Buttons\\"})}),`\\n`,(0,e.jsx)(n.p,{children:\\"We have a group of different buttons used for specific purposes.\\"}),`\\n`,(0,e.jsxs)(i,{columns:\\"3\\",gapInline:\\"small\\",children:[(0,e.jsx)(t,{node:\\"227-1446\\",caption:\\"Default button\\"}),(0,e.jsx)(t,{node:\\"227-1455\\",caption:\\"Icon button\\"}),(0,e.jsx)(t,{node:\\"227-1458\\",caption:\\"Floating action button\\"}),(0,e.jsx)(t,{node:\\"227-9028\\",caption:\\"Split button\\"}),(0,e.jsx)(t,{node:\\"227-9030\\",caption:\\"Next and back button\\"})]}),`\\n`,(0,e.jsx)(n.h3,{id:\\"default-button\\",children:(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#default-button\\",children:\\"Default button\\"})}),`\\n`,(0,e.jsx)(n.p,{children:\\"The default button is our most used button. It comes in primary, secondary and tertiary, and the sizes small, medium and large.\\"}),`\\n`,(0,e.jsx)(n.p,{children:\\"The default button can be used as the positive, negative and inverted type.\\"}),`\\n`,(0,e.jsxs)(i,{columns:\\"2\\",gapInline:\\"small\\",children:[(0,e.jsx)(t,{node:\\"227-15292\\",caption:\\"Primary, secondary and tertiary\\"}),(0,e.jsx)(t,{node:\\"227-15605\\",caption:\\"Positive and negative\\"})]}),`\\n`,(0,e.jsx)(a,{size:\\"medium\\",decorated:!0}),`\\n`,(0,e.jsx)(n.h3,{id:\\"icon-button\\",children:(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#icon-button\\",children:\\"Icon button\\"})}),`\\n`,(0,e.jsx)(n.p,{children:\\"When there is space, the icon button should always be grouped with a text label. This text provides additional context for users who may not understand the icon alone. If space is not available the icon need to be self explanatory, and have a tooltip function explaining the action.\\"}),`\\n`,(0,e.jsx)(n.p,{children:\\"The icon button comes in primary, secondary, and tertiary. In the sizes small, medium, and large. The icon button also comes as a tonal in two sets. One tonal in grey, used mostly on our container colour. And a few custom tonal combinations, used on custom combination cards. For example our alert ribbons.\\"}),`\\n`,(0,e.jsx)(n.p,{children:\\"The icon button can be used as the positive, negative and inverted type also when the context needs it.\\"}),`\\n`,(0,e.jsxs)(i,{columns:3,gapInline:\\"small\\",children:[(0,e.jsx)(t,{node:\\"227-1363\\",caption:\\"Icon button \\\\u2013 default and positive\\"}),(0,e.jsx)(t,{node:\\"227-1372\\",caption:\\"Tonal and custom tonal\\"}),(0,e.jsx)(t,{node:\\"227-1375\\",caption:\\"Tonal custom combinations on alert ribbon\\"})]}),`\\n`,(0,e.jsx)(a,{size:\\"medium\\"}),`\\n`,(0,e.jsxs)(i,{columns:2,gapInline:\\"small\\",children:[(0,e.jsxs)(\\"div\\",{children:[(0,e.jsx)(n.h3,{id:\\"floating-action-button\\",children:(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#floating-action-button\\",children:\\"Floating action button\\"})}),(0,e.jsx)(n.p,{children:\\"Only used for functions central to the user experience, such as support and help features that needs to be accessible at all times.\\"}),(0,e.jsx)(n.p,{children:\\"The button is always floating visible in the users viewport, typically in the lower right corner. This button can be used with an icon only.\\"}),(0,e.jsx)(n.p,{children:\\"Used only as primary.\\"})]}),(0,e.jsx)(t,{node:\\"227-17491\\",caption:\\"Floating action button\\"})]}),`\\n`,(0,e.jsx)(a,{size:\\"medium\\"}),`\\n`,(0,e.jsx)(n.h3,{id:\\"split-button\\",children:(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#split-button\\",children:\\"Split button\\"})}),`\\n`,(0,e.jsx)(n.p,{children:\\"The split button always has a primary action. This action is most likely to be used by the customer as the default action.When users click on the primary action, it triggers this action directly, such as submitting a form, confirming a selection, or initiating a process.\\"}),`\\n`,(0,e.jsx)(n.p,{children:\\"The users can click on the dropdown arrow to reveal a dropdown menu providing secondary or additional options.\\"}),`\\n`,(0,e.jsx)(n.p,{children:\\"The split button comes in both primary and secondary.\\"}),`\\n`,(0,e.jsxs)(i,{columns:2,gapInline:\\"small\\",children:[(0,e.jsx)(t,{node:\\"227-18284\\",caption:\\"Split button \\\\u2013 primary and secondary\\"}),(0,e.jsx)(t,{node:\\"574-5488\\",caption:\\"Split button \\\\u2013 active with dropdown\\"})]}),`\\n`,(0,e.jsx)(n.h3,{id:\\"next-and-back-button\\",children:(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#next-and-back-button\\",children:\\"Next and back button\\"})}),`\\n`,(0,e.jsx)(n.p,{children:\\"Used inside flows to signal the direction forward or backward.\\"}),`\\n`,(0,e.jsx)(n.p,{children:\\"Back button comes in both primary and secondary state depending on what suits the content. The next button comes as primary only.\\"}),`\\n`,(0,e.jsxs)(i,{columns:3,gapInline:\\"small\\",children:[(0,e.jsx)(t,{node:\\"227-18340\\",caption:\\"Next button\\"}),(0,e.jsx)(t,{node:\\"227-18349\\",caption:\\"Back button \\\\u2013 primary\\"}),(0,e.jsx)(t,{node:\\"227-18352\\",caption:\\"Back button \\\\u2013 secondary\\"})]}),`\\n`,(0,e.jsx)(a,{size:\\"medium\\",decorated:!0}),`\\n`,(0,e.jsx)(n.h2,{id:\\"variants\\",children:(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#variants\\",children:\\"Variants\\"})}),`\\n`,(0,e.jsxs)(n.ul,{children:[`\\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\\"Default\\"}),\\": The preferred choice of button in most contexts.\\"]}),`\\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\\"Positive\\"}),\\": To be decided.\\"]}),`\\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\\"Negative\\"}),\\": Use for the actions that may be harmful or destructive. A good example is deleting\\"]}),`\\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\\"Tonal\\"}),\\": Only used internal in other components (to match a background).\\"]}),`\\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\\"Inverted\\"}),\\": Used to place on other than the normal backgrounds (typically darker tones).\\"]}),`\\n`]}),`\\n`,(0,e.jsx)(t,{node:\\"232-2274\\",caption:\\"Button variants\\",height:\\"300\\"}),`\\n`,(0,e.jsx)(a,{size:\\"medium\\",decorated:!0}),`\\n`,(0,e.jsxs)(i,{columns:\\"2\\",gapInline:\\"small\\",children:[(0,e.jsx)(n.h2,{id:\\"hierarchy\\",children:(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#hierarchy\\",children:\\"Hierarchy\\"})}),(0,e.jsx)(n.p,{children:\\"It\'s critical to find the right balance of what buttons to use. It\'s up to us as designers to guide and inform the users to take the right action.\\"}),(0,e.jsxs)(n.ul,{children:[`\\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\\"Primary buttons\\"}),\\" require the most attention from your users.\\"]}),`\\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\\"Secondary buttons\\"}),\\", as the name says, is the second most likely choice.\\"]}),`\\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\\"Tertiary buttons\\"}),\\" are used for less used or unwanted actions that is still relevant to find.\\"]}),`\\n`]}),(0,e.jsx)(t,{node:\\"232-3072\\",caption:\\"From the top \\\\u2013 primary, secondary, tertiary\\"})]}),`\\n`,(0,e.jsx)(a,{size:\\"medium\\",decorated:!0}),`\\n`,(0,e.jsx)(n.h2,{id:\\"button-sizes\\",children:(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#button-sizes\\",children:\\"Button sizes\\"})}),`\\n`,(0,e.jsx)(n.p,{children:\\"The default button and icon button comes in a few different sizes. 32, 40 and 48 px.\\"}),`\\n`,(0,e.jsxs)(i,{columns:3,gapInline:\\"small\\",children:[(0,e.jsx)(t,{node:\\"232-3342\\",caption:\\"Small \\\\u2013 used in confined spaces, like tables.\\"}),(0,e.jsx)(t,{node:\\"232-3344\\",caption:\\"Medium \\\\u2013 the default size. When in doubt, go for medium.\\"}),(0,e.jsx)(t,{node:\\"232-3346\\",caption:\\"Large \\\\u2013 only used in large areas like a hero.\\"})]}),`\\n`,(0,e.jsx)(a,{size:\\"medium\\",decorated:!0}),`\\n`,(0,e.jsx)(n.h2,{id:\\"placements-right-left-or-stacked\\",children:(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#placements-right-left-or-stacked\\",children:\\"Placements, right, left or stacked?\\"})}),`\\n`,(0,e.jsx)(n.p,{children:\\"A general rule is to always strive to place buttons in connection to the items they control.\\"}),`\\n`,(0,e.jsx)(n.h3,{id:\\"desktop-placements\\",children:(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#desktop-placements\\",children:\\"Desktop placements\\"})}),`\\n`,(0,e.jsxs)(n.ul,{children:[`\\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\\"Left:\\"}),\\" In overviews and widgets, the user tends to read from top to bottom, therefore the buttons are kept to the left.\\"]}),`\\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\\"Right:\\"}),\\" Modals and flows move the user from left to right, therefore the buttons are placed to the right.\\"]}),`\\n`]}),`\\n`,(0,e.jsxs)(i,{columns:2,gapInline:\\"small\\",children:[(0,e.jsx)(t,{node:\\"489-7502\\",caption:\\"Placement left\\"}),(0,e.jsx)(t,{node:\\"232-3505\\",caption:\\"Placement right\\"})]}),`\\n`,(0,e.jsx)(n.h3,{id:\\"in-a-mobile-device\\",children:(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#in-a-mobile-device\\",children:\\"In a mobile device\\"})}),`\\n`,(0,e.jsxs)(n.ul,{children:[`\\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\\"One button\\"}),\\", use the full width of the content area.\\"]}),`\\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\\"Two buttons\\"}),\\", aim to place them side by side. It is allowed to stack them if needed.\\"]}),`\\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\\"Three buttons\\"}),\', consider the need for all of them. \\"cancel or close\\" might be x in the top right corner. Worst case scenario: place two buttons side by side and one tertiary button under.\']}),`\\n`]}),`\\n`,(0,e.jsxs)(i,{columns:2,gapInline:\\"small\\",children:[(0,e.jsx)(t,{node:\\"489-7723\\",caption:\\"One button in mobile\\"}),(0,e.jsx)(t,{node:\\"489-7651\\",caption:\\"Side by side in mobile\\"})]}),`\\n`,(0,e.jsx)(a,{size:\\"medium\\",decorated:!0}),`\\n`,(0,e.jsx)(n.h2,{id:\\"wait-time-after-button-pressed\\",children:(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#wait-time-after-button-pressed\\",children:\\"Wait-time after button pressed.\\"})}),`\\n`,(0,e.jsx)(n.p,{children:\\"To be explored.\\"}),`\\n`,(0,e.jsx)(a,{size:\\"medium\\",decorated:!0}),`\\n`,(0,e.jsx)(n.h2,{id:\\"dos-and-donts\\",children:(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#dos-and-donts\\",children:\\"Do\\\\u2019s and don\\\\u2019ts\\"})}),`\\n`,(0,e.jsx)(n.p,{children:(0,e.jsx)(n.strong,{children:\\"Do\\"})}),`\\n`,(0,e.jsxs)(n.ul,{children:[`\\n`,(0,e.jsx)(n.li,{children:\\"Only use one primary action in the same context of several actions.\\"}),`\\n`]}),`\\n`,(0,e.jsx)(i,{columns:2,gapInline:\\"small\\",children:(0,e.jsx)(c,{children:(0,e.jsx)(t,{node:\\"312-3091\\"})})})]})}function T(o={}){let{wrapper:n}=o.components||{};return n?(0,e.jsx)(n,Object.assign({},o,{children:(0,e.jsx)(u,o)})):u(o)}var I=T;function s(o,n){throw new Error(\\"Expected \\"+(n?\\"component\\":\\"object\\")+\\" `\\"+o+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return k(N);})();\\n;return Component;"},"_id":"component/button/index.mdx","_raw":{"sourceFilePath":"component/button/index.mdx","sourceFileName":"index.mdx","sourceFileDir":"component/button","contentType":"mdx","flattenedPath":"component/button"},"type":"Component","url_path":"/component/button","headings":[{"level":2,"text":"Overview","slug":"overview"},{"level":2,"text":"Buttons","slug":"buttons"},{"level":3,"text":"Default button","slug":"default-button"},{"level":3,"text":"Icon button","slug":"icon-button"},{"level":3,"text":"Floating action button","slug":"floating-action-button"},{"level":3,"text":"Split button","slug":"split-button"},{"level":3,"text":"Next and back button","slug":"next-and-back-button"},{"level":2,"text":"Variants","slug":"variants"},{"level":2,"text":"Hierarchy","slug":"hierarchy"},{"level":2,"text":"Button sizes","slug":"button-sizes"},{"level":2,"text":"Placements, right, left or stacked?","slug":"placements-right-left-or-stacked"},{"level":3,"text":"Desktop placements","slug":"desktop-placements"},{"level":3,"text":"In a mobile device","slug":"in-a-mobile-device"},{"level":2,"text":"Wait-time after button pressed.","slug":"wait-time-after-button-pressed"},{"level":2,"text":"Do’s and don’ts","slug":"dos-and-donts"}],"pathSegments":[{"order":0,"pathName":"button"}],"last_edited":"2024-04-02T07:58:11.717Z","figma_hero_svg":{"svg":""},"figma_svgs":[{"node":"227-1446","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/b2e75e48-ba2b-45c6-ad0c-f0ad0baaffbb"},{"node":"227-1455","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/d85baca4-731f-4e7d-9296-dc6fced16ac6"},{"node":"227-1458","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/039cc3ce-6f2a-405e-bd2f-cef6fcceea73"},{"node":"227-9028","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/299f1664-2870-4c85-9694-66d137d45c83"},{"node":"227-9030","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/5f9c0530-c916-4daa-ba87-557b71e467b5"},{"node":"227-15292","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/68b44e60-77bd-4640-a7ec-34d3df6a10a9"},{"node":"227-15605","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/b8ce8a37-ff12-4c8f-86ba-14cbece358d0"},{"node":"227-1363","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/c435e4c3-0c2f-4e99-9979-4c4e9abda042"},{"node":"227-1372","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/eda71714-cbbb-4677-a969-e7fe9d9339ac"},{"node":"227-1375","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/33a6db6a-c3e2-41fc-9af5-c9a62642c2db"},{"node":"227-17491","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/eee7ef6a-dfad-4a7f-97d3-63dd4da88f8b"},{"node":"227-18284","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/c6997e5d-8fda-489f-882f-0b5d82c6bdc9"},{"node":"574-5488","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/b65f5ef3-6a30-43d8-a0ca-da57b660e74a"},{"node":"227-18340","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/55a72263-b151-49c0-83d8-722ce5436f88"},{"node":"227-18349","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/37024235-8885-4865-b4ef-45cc7b140c2e"},{"node":"227-18352","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/2a8cb541-ea3e-4493-8539-beacfdbbe705"},{"node":"232-2274","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/5da38ea7-4884-4543-927c-d074eca7b776"},{"node":"232-3072","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/7853b54d-86c5-419a-9e94-4affe9123ecf"},{"node":"232-3342","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/7f6af765-00c1-4321-848d-360e34859fa1"},{"node":"232-3344","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/e7bf77d8-edc0-4e35-b93b-edf30cad8f55"},{"node":"232-3346","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/16bf5096-0cdb-4089-9b19-bd22b04ad90d"},{"node":"489-7502","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/72132fcc-4642-40a5-97cb-7bc29090f6db"},{"node":"232-3505","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/c625623b-b3d9-4fbd-b0b5-68e7efbc49b9"},{"node":"489-7723","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/3a11e578-313b-4868-9912-fed1cf9e1d0f"},{"node":"489-7651","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/7b73bd69-8244-402c-be6d-9a5f661fd4fc"},{"node":"312-3091","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/90c85bfc-18c4-44f3-9f0e-f92878e02ccf"}]},{"global_id":"buttonuxtext","title":"UX Text","date":"2023-12-22T00:00:00.000Z","body":{"raw":"\\n## UX text\\n\\nThe button text should answer the question \\"What is happening?\\" when the user clicks it, but if the purpose of the button is to convert, it should answer the question \\"What do I get?\\".\\n\\n### Use commands and requests in the button\\n\\nYou should primarily use verbs in the imperative mood, which is the form of the verb \\nthat conveys commands or requests, for example, *Order, Apply, Submit and Sign.* \\nIf needed, you can add what happens, for example, *Write a new message* or *Add a row*. \\nIn special cases, the button may consist of another type of text, for example, *This solution suits me.*\\n\\n### Avoid Perform and Okay\\n\\nAvoid using words like *Perform (Utf\xf6r) and Okay (Okej)* in buttons. \\nPerform is too formal and Okay is too vague and doesn’t answer the question “What is happening?” when the user clicks the button.\\n\\n### Standard button texts\\n\\nStandard text for our most commonly used buttons.\\n\\n\\n(N\xe4sta)\\" />\\n(Tillbaka)\\" />\\n(Avbryt)\\" />\\n(Ta bort)\\" />\\n(\xc4ndra) – takes the user to edit mode.\\" />\\n(Spara)\\" />\\n(St\xe4ng) – closing a dialog, modal, slide-out etc.\\" />\\n(Signera) – signing with BankID.\\" />\\n(Identifiera dig) – identifying with BankID.\\" />\\n\\n\\n\\n\\n\\n\\n\\n
\\n## Cancel and close\\n\\nIt is important to avoid confusion for the user which button to click. The combination *Cancel* and *Close* is very similar. Instead, use *Back* as the secondary action when primary action is *Cancel*.\\n
\\n\\n\\n\\n\\n\\n\\n## Do’s and don’ts\\n\\n\\n\\n
\\n**Do**\\n\\n- Answer the question “What is happening?” or “What do I get?”.\\n- Use commands or requests in the button.\\n- Use *Back* as secondary action in modals where primary actions is *Cancel*.\\n
\\n\\n
\\n**Don’t**\\n\\n- Avoid the formal *Perform (Utf\xf6r)* and the vague *Okay (Okej)*.\\n- Do not use primary and secondary button text that is too similar to each other.\\n
\\n\\n\\n\\n\\n\\n\\n\\n","code":"var Component=(()=>{var f=Object.create;var d=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var y=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),E=(t,n)=>{for(var i in n)d(t,i,{get:n[i],enumerable:!0})},l=(t,n,i,r)=>{if(n&&typeof n==\\"object\\"||typeof n==\\"function\\")for(let o of x(n))!b.call(t,o)&&o!==i&&d(t,o,{get:()=>n[o],enumerable:!(r=g(n,o))||r.enumerable});return t};var v=(t,n,i)=>(i=t!=null?f(S(t)):{},l(n||!t||!t.__esModule?d(i,\\"default\\",{value:t,enumerable:!0}):i,t)),k=t=>l(d({},\\"__esModule\\",{value:!0}),t);var u=y((q,m)=>{m.exports=_jsx_runtime});var C={};E(C,{default:()=>j,frontmatter:()=>w});var e=v(u()),w={title:\\"UX Text\\",global_id:\\"buttonuxtext\\",date:new Date(17032032e5)};function p(t){let n=Object.assign({h2:\\"h2\\",a:\\"a\\",p:\\"p\\",h3:\\"h3\\",em:\\"em\\",strong:\\"strong\\",ul:\\"ul\\",li:\\"li\\"},t.components),{SE:i,Grid:r,Figma:o,Spacer:s,Do:c,Dont:h}=n;return c||a(\\"Do\\",!0),h||a(\\"Dont\\",!0),o||a(\\"Figma\\",!0),r||a(\\"Grid\\",!0),i||a(\\"SE\\",!0),s||a(\\"Spacer\\",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{id:\\"ux-text\\",children:(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#ux-text\\",children:\\"UX text\\"})}),`\\n`,(0,e.jsx)(n.p,{children:\'The button text should answer the question \\"What is happening?\\" when the user clicks it, but if the purpose of the button is to convert, it should answer the question \\"What do I get?\\".\'}),`\\n`,(0,e.jsx)(n.h3,{id:\\"use-commands-and-requests-in-the-button\\",children:(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#use-commands-and-requests-in-the-button\\",children:\\"Use commands and requests in the button\\"})}),`\\n`,(0,e.jsxs)(n.p,{children:[`You should primarily use verbs in the imperative mood, which is the form of the verb\\nthat conveys commands or requests, for example, `,(0,e.jsx)(n.em,{children:\\"Order, Apply, Submit and Sign.\\"}),`\\nIf needed, you can add what happens, for example, `,(0,e.jsx)(n.em,{children:\\"Write a new message\\"}),\\" or \\",(0,e.jsx)(n.em,{children:\\"Add a row\\"}),`.\\nIn special cases, the button may consist of another type of text, for example, `,(0,e.jsx)(n.em,{children:\\"This solution suits me.\\"})]}),`\\n`,(0,e.jsx)(n.h3,{id:\\"avoid-perform-and-okay\\",children:(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#avoid-perform-and-okay\\",children:\\"Avoid Perform and Okay\\"})}),`\\n`,(0,e.jsxs)(n.p,{children:[\\"Avoid using words like \\",(0,e.jsxs)(n.em,{children:[\\"Perform \\",(0,e.jsx)(i,{children:\\"(Utf\\\\xF6r)\\"}),\\" and Okay \\",(0,e.jsx)(i,{children:\\"(Okej)\\"})]}),` in buttons.\\nPerform is too formal and Okay is too vague and doesn\\\\u2019t answer the question \\\\u201CWhat is happening?\\\\u201D when the user clicks the button.`]}),`\\n`,(0,e.jsx)(n.h3,{id:\\"standard-button-texts\\",children:(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#standard-button-texts\\",children:\\"Standard button texts\\"})}),`\\n`,(0,e.jsx)(n.p,{children:\\"Standard text for our most commonly used buttons.\\"}),`\\n`,(0,e.jsxs)(r,{columns:3,children:[(0,e.jsx)(o,{node:\\"258-3237\\",caption:\\"Next (N\\\\xE4sta)\\"}),(0,e.jsx)(o,{node:\\"258-3242\\",caption:\\"Back (Tillbaka)\\"}),(0,e.jsx)(o,{node:\\"258-3247\\",caption:\\"Cancel (Avbryt)\\"}),(0,e.jsx)(o,{node:\\"258-3280\\",caption:\\"Delete (Ta bort)\\"}),(0,e.jsx)(o,{node:\\"258-3285\\",caption:\\"Change (\\\\xC4ndra) \\\\u2013 takes the user to edit mode.\\"}),(0,e.jsx)(o,{node:\\"258-3290\\",caption:\\"Save (Spara)\\"}),(0,e.jsx)(o,{node:\\"258-3908\\",caption:\\"Close (St\\\\xE4ng) \\\\u2013 closing a dialog, modal, slide-out etc.\\"}),(0,e.jsx)(o,{node:\\"258-3911\\",caption:\\"Sign (Signera) \\\\u2013 signing with BankID.\\"}),(0,e.jsx)(o,{node:\\"258-3913\\",caption:\\"Identify yourself (Identifiera dig) \\\\u2013 identifying with BankID.\\"})]}),`\\n`,(0,e.jsx)(s,{size:\\"medium\\",decorated:!0}),`\\n`,(0,e.jsxs)(r,{columns:2,children:[(0,e.jsxs)(\\"div\\",{children:[(0,e.jsx)(n.h2,{id:\\"cancel-and-close\\",children:(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#cancel-and-close\\",children:\\"Cancel and close\\"})}),(0,e.jsxs)(n.p,{children:[\\"It is important to avoid confusion for the user which button to click. The combination \\",(0,e.jsx)(n.em,{children:\\"Cancel\\"}),\\" and \\",(0,e.jsx)(n.em,{children:\\"Close\\"}),\\" is very similar. Instead, use \\",(0,e.jsx)(n.em,{children:\\"Back\\"}),\\" as the secondary action when primary action is \\",(0,e.jsx)(n.em,{children:\\"Cancel\\"}),\\".\\"]})]}),(0,e.jsx)(o,{node:\\"259-4049\\",caption:\\"This is a good example of avoiding confusion for the customer.\\"})]}),`\\n`,(0,e.jsx)(s,{size:\\"medium\\",decorated:!0}),`\\n`,(0,e.jsx)(n.h2,{id:\\"dos-and-donts\\",children:(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#dos-and-donts\\",children:\\"Do\\\\u2019s and don\\\\u2019ts\\"})}),`\\n`,(0,e.jsxs)(r,{columns:2,children:[(0,e.jsxs)(\\"div\\",{children:[(0,e.jsx)(n.p,{children:(0,e.jsx)(n.strong,{children:\\"Do\\"})}),(0,e.jsxs)(n.ul,{children:[`\\n`,(0,e.jsx)(n.li,{children:\\"Answer the question \\\\u201CWhat is happening?\\\\u201D or \\\\u201CWhat do I get?\\\\u201D.\\"}),`\\n`,(0,e.jsx)(n.li,{children:\\"Use commands or requests in the button.\\"}),`\\n`,(0,e.jsxs)(n.li,{children:[\\"Use \\",(0,e.jsx)(n.em,{children:\\"Back\\"}),\\" as secondary action in modals where primary actions is \\",(0,e.jsx)(n.em,{children:\\"Cancel\\"}),\\".\\"]}),`\\n`]})]}),(0,e.jsxs)(\\"div\\",{children:[(0,e.jsx)(n.p,{children:(0,e.jsx)(n.strong,{children:\\"Don\\\\u2019t\\"})}),(0,e.jsxs)(n.ul,{children:[`\\n`,(0,e.jsxs)(n.li,{children:[\\"Avoid the formal \\",(0,e.jsxs)(n.em,{children:[\\"Perform \\",(0,e.jsx)(i,{children:\\"(Utf\\\\xF6r)\\"})]}),\\" and the vague \\",(0,e.jsxs)(n.em,{children:[\\"Okay \\",(0,e.jsx)(i,{children:\\"(Okej)\\"})]}),\\".\\"]}),`\\n`,(0,e.jsx)(n.li,{children:\\"Do not use primary and secondary button text that is too similar to each other.\\"}),`\\n`]})]})]}),`\\n`,(0,e.jsxs)(r,{columns:2,children:[(0,e.jsx)(c,{children:(0,e.jsx)(o,{node:\\"258-3354\\"})}),(0,e.jsx)(h,{children:(0,e.jsx)(o,{node:\\"258-3385\\"})})]})]})}function D(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,Object.assign({},t,{children:(0,e.jsx)(p,t)})):p(t)}var j=D;function a(t,n){throw new Error(\\"Expected \\"+(n?\\"component\\":\\"object\\")+\\" `\\"+t+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return k(C);})();\\n;return Component;"},"_id":"component/button/ux-text.mdx","_raw":{"sourceFilePath":"component/button/ux-text.mdx","sourceFileName":"ux-text.mdx","sourceFileDir":"component/button","contentType":"mdx","flattenedPath":"component/button/ux-text"},"type":"Component","url_path":"/component/button/ux-text","headings":[{"level":2,"text":"UX text","slug":"ux-text"},{"level":3,"text":"Use commands and requests in the button","slug":"use-commands-and-requests-in-the-button"},{"level":3,"text":"Avoid Perform and Okay","slug":"avoid-perform-and-okay"},{"level":3,"text":"Standard button texts","slug":"standard-button-texts"},{"level":2,"text":"Cancel and close","slug":"cancel-and-close"},{"level":2,"text":"Do’s and don’ts","slug":"dos-and-donts"}],"pathSegments":[{"order":0,"pathName":"button"},{"order":0,"pathName":"ux-text"}],"last_edited":"2024-04-02T07:58:11.717Z","figma_hero_svg":{"svg":""},"figma_svgs":[{"node":"258-3237","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/dfbb62c2-d3bc-4fda-b395-4a45dcd1d54a"},{"node":"258-3242","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/0a9f534c-26fc-443d-8a50-9a11765ff85c"},{"node":"258-3247","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/8c84d3cf-bb56-4e08-8df2-3f50f085b11f"},{"node":"258-3280","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/f88fdf1e-2706-4a1b-b319-537b6d28962a"},{"node":"258-3285","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/e202e075-76fe-4ca2-9851-c401a1153816"},{"node":"258-3290","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/89bf2f28-7ccf-4c4f-bd9c-19d5a730aa8c"},{"node":"258-3908","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/72c9da95-5528-4534-9188-a6286fbf1079"},{"node":"258-3911","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/de379326-9e10-4cbe-a26b-6d29b0c3a1fc"},{"node":"258-3913","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/7636dc5c-7ff4-42fd-93eb-0ca463bdca84"},{"node":"259-4049","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/c264e447-0342-4c10-bd52-15b7afbf5092"},{"node":"258-3354","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/17a576ab-8054-4722-b717-03eae6a71300"},{"node":"258-3385","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/f5151b2e-0aee-4cc9-9c4c-811e4946bfcc"}]},{"global_id":"inputaccessibility","title":"Accessibility","date":"2023-12-22T00:00:00.000Z","body":{"raw":"\\n## Coming soon\\nThis page will be updated with information soon.","code":"var Component=(()=>{var d=Object.create;var s=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var x=(n,t)=>()=>(t||n((t={exports:{}}).exports,t),t.exports),_=(n,t)=>{for(var o in t)s(n,o,{get:t[o],enumerable:!0})},c=(n,t,o,a)=>{if(t&&typeof t==\\"object\\"||typeof t==\\"function\\")for(let i of g(t))!u.call(n,i)&&i!==o&&s(n,i,{get:()=>t[i],enumerable:!(a=h(t,i))||a.enumerable});return n};var f=(n,t,o)=>(o=n!=null?d(p(n)):{},c(t||!n||!n.__esModule?s(o,\\"default\\",{value:n,enumerable:!0}):o,n)),j=n=>c(s({},\\"__esModule\\",{value:!0}),n);var l=x((M,r)=>{r.exports=_jsx_runtime});var C={};_(C,{default:()=>y,frontmatter:()=>b});var e=f(l()),b={title:\\"Accessibility\\",global_id:\\"inputaccessibility\\",date:new Date(17032032e5)};function m(n){let t=Object.assign({h2:\\"h2\\",a:\\"a\\",p:\\"p\\"},n.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(t.h2,{id:\\"coming-soon\\",children:(0,e.jsx)(t.a,{className:\\"anchor\\",href:\\"#coming-soon\\",children:\\"Coming soon\\"})}),`\\n`,(0,e.jsx)(t.p,{children:\\"This page will be updated with information soon.\\"})]})}function w(n={}){let{wrapper:t}=n.components||{};return t?(0,e.jsx)(t,Object.assign({},n,{children:(0,e.jsx)(m,n)})):m(n)}var y=w;return j(C);})();\\n;return Component;"},"_id":"component/input/accessibility.mdx","_raw":{"sourceFilePath":"component/input/accessibility.mdx","sourceFileName":"accessibility.mdx","sourceFileDir":"component/input","contentType":"mdx","flattenedPath":"component/input/accessibility"},"type":"Component","url_path":"/component/input/accessibility","headings":[{"level":2,"text":"Coming soon","slug":"coming-soon"}],"pathSegments":[{"order":0,"pathName":"input"},{"order":0,"pathName":"accessibility"}],"last_edited":"2024-04-02T07:58:11.717Z","figma_hero_svg":{"svg":""},"figma_svgs":[]},{"global_id":"inputcode","title":"Code","date":"2023-12-22T00:00:00.000Z","body":{"raw":"\\n## Coming soon\\nThis page will be updated with information soon.\\n","code":"var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var x=(n,t)=>()=>(t||n((t={exports:{}}).exports,t),t.exports),_=(n,t)=>{for(var o in t)a(n,o,{get:t[o],enumerable:!0})},r=(n,t,o,i)=>{if(t&&typeof t==\\"object\\"||typeof t==\\"function\\")for(let s of g(t))!u.call(n,s)&&s!==o&&a(n,s,{get:()=>t[s],enumerable:!(i=l(t,s))||i.enumerable});return n};var f=(n,t,o)=>(o=n!=null?h(p(n)):{},r(t||!n||!n.__esModule?a(o,\\"default\\",{value:n,enumerable:!0}):o,n)),j=n=>r(a({},\\"__esModule\\",{value:!0}),n);var d=x((F,c)=>{c.exports=_jsx_runtime});var D={};_(D,{default:()=>C,frontmatter:()=>b});var e=f(d()),b={title:\\"Code\\",global_id:\\"inputcode\\",date:new Date(17032032e5)};function m(n){let t=Object.assign({h2:\\"h2\\",a:\\"a\\",p:\\"p\\"},n.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(t.h2,{id:\\"coming-soon\\",children:(0,e.jsx)(t.a,{className:\\"anchor\\",href:\\"#coming-soon\\",children:\\"Coming soon\\"})}),`\\n`,(0,e.jsx)(t.p,{children:\\"This page will be updated with information soon.\\"})]})}function w(n={}){let{wrapper:t}=n.components||{};return t?(0,e.jsx)(t,Object.assign({},n,{children:(0,e.jsx)(m,n)})):m(n)}var C=w;return j(D);})();\\n;return Component;"},"_id":"component/input/code.mdx","_raw":{"sourceFilePath":"component/input/code.mdx","sourceFileName":"code.mdx","sourceFileDir":"component/input","contentType":"mdx","flattenedPath":"component/input/code"},"type":"Component","url_path":"/component/input/code","headings":[{"level":2,"text":"Coming soon","slug":"coming-soon"}],"pathSegments":[{"order":0,"pathName":"input"},{"order":0,"pathName":"code"}],"last_edited":"2024-04-02T07:58:11.717Z","figma_hero_svg":{"svg":""},"figma_svgs":[]},{"global_id":"inputdesign","title":"Design","date":"2023-12-22T00:00:00.000Z","body":{"raw":"\\n## Coming soon\\nThis page will be updated with information soon.","code":"var Component=(()=>{var h=Object.create;var i=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var x=(n,t)=>()=>(t||n((t={exports:{}}).exports,t),t.exports),_=(n,t)=>{for(var o in t)i(n,o,{get:t[o],enumerable:!0})},r=(n,t,o,a)=>{if(t&&typeof t==\\"object\\"||typeof t==\\"function\\")for(let s of g(t))!u.call(n,s)&&s!==o&&i(n,s,{get:()=>t[s],enumerable:!(a=l(t,s))||a.enumerable});return n};var f=(n,t,o)=>(o=n!=null?h(p(n)):{},r(t||!n||!n.__esModule?i(o,\\"default\\",{value:n,enumerable:!0}):o,n)),j=n=>r(i({},\\"__esModule\\",{value:!0}),n);var m=x((F,c)=>{c.exports=_jsx_runtime});var C={};_(C,{default:()=>D,frontmatter:()=>b});var e=f(m()),b={title:\\"Design\\",global_id:\\"inputdesign\\",date:new Date(17032032e5)};function d(n){let t=Object.assign({h2:\\"h2\\",a:\\"a\\",p:\\"p\\"},n.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(t.h2,{id:\\"coming-soon\\",children:(0,e.jsx)(t.a,{className:\\"anchor\\",href:\\"#coming-soon\\",children:\\"Coming soon\\"})}),`\\n`,(0,e.jsx)(t.p,{children:\\"This page will be updated with information soon.\\"})]})}function w(n={}){let{wrapper:t}=n.components||{};return t?(0,e.jsx)(t,Object.assign({},n,{children:(0,e.jsx)(d,n)})):d(n)}var D=w;return j(C);})();\\n;return Component;"},"_id":"component/input/design.mdx","_raw":{"sourceFilePath":"component/input/design.mdx","sourceFileName":"design.mdx","sourceFileDir":"component/input","contentType":"mdx","flattenedPath":"component/input/design"},"type":"Component","url_path":"/component/input/design","headings":[{"level":2,"text":"Coming soon","slug":"coming-soon"}],"pathSegments":[{"order":0,"pathName":"input"},{"order":0,"pathName":"design"}],"last_edited":"2024-04-02T07:58:11.717Z","figma_hero_svg":{"svg":""},"figma_svgs":[]},{"global_id":"inputinput","title":"Input","summary":"Text fields allow users to enter text into a UI. They typically appear in forms and dialogs.","date":"2023-12-22T00:00:00.000Z","tags":"form","status":"work in progress","node":"606-6849","body":{"raw":"\\n## Overview \\n\\nInput are used to let the user enter text or numbers in a form.Optional field indicator. We always strive to only ask for mandatory information, so we want to inform users if some fields are optional. We do this by adding a parenthesis with the words \\"optional\\" next to the label with the field.\\n\\n\\n\\n\\n### Variants\\nTo be able to use forms in all context\'s we provide 2 versions of input fields.\\n\\n- **Label outside** (default): Includes all the features we need in complex forms.\\n- **Label inside**: gives a more clean look but doesn\'t work for longer labels and can only be used in specific contexts.\\n\\n\\n \\n \\n\\n\\n\\n\\n\\n### Sets\\nTo be able to use forms in all context\'s we provide 2 versions of input fields.\\n\\n- Regular text field\\n- Multi lined text field, Multiple lines. Some text fields require a lot more text to be entered. A simple example would be description of a payment. For this we use the multi-line version of the input-field. This is often known as a text area or free text. Counter. For some fields it\'s critical that users know the limitations. Counters start at the max and count down to zero. When the counter comes close to zero the appearance shifts to red to warn the user before the fields stops accepting input.\\n\\n\\n \\n \\n\\n\\n\\n\\n\\n\\n
\\n### Sizes\\nThe input fields come in two sizes.\\n\\n- **Normal**: used in most cases.\\n- **Small**: used in tables and in some special cases where the space is very limited.\\n
\\n\\n\\n\\n\\n\\n## Features\\n\\n\\n\\n
\\n### Label\\nAll input fields need a label. Keep the label short and to the point.\\n
\\n\\n\\n\\n\\n\\n
\\n### Label support text\\nUse this to explain how to fill the field. This may be an instruction of how to count or what to include. Limit the instructions to details that all or most users need.\\n
\\n\\n\\n\\n\\n
\\n### Field help\\nWe can provide three types of help in relation to input fields\\n- Instruction text: Additional instruction of how to think, what we expect, or what format is required.\\n- Contextual help: Either as a tooltip, extended help that increase the size of the field with more instructions, or a slide-out with helptext.\\n- Error text: If users fail in filling the field with correct information, the last help is the error text that can guide to a solution based on the entered information.\\n
\\n\\n\\n\\n\\n
\\n### Field error\\nErrors that are related to a field are displayed right next to the field. The field is highlighted with a error message about the problem underneath. \\nThe field validation should be done as soon as possible, but not while still editing the information.\\n
\\n\\n\\n\\n\\n
\\n### Field counter\\nText missing...\\n
\\n\\n\\n\\n\\n
\\n### Dynamic information\\n\\nUsed to perform comparative calculations next to the field. For example if users fill out salary after taxes, the dynamic information may show the salary before taxes.\\n
\\n\\n\\n\\n\\n\\n
\\n### Static data\\n\\nSometimes you may want to output data from the system inside a form, but it\'s hard from the system an may not be changed. Then we output that data in plain text, formatted the same way as the form in general. Don\'t use disabled fields.\\n
\\n\\n\\n\\n\\n
\\n### Auto complete\\nInput text can be used with auto complete to help users who have limited literacy or who write in a foreign language.Sometimes you may want to output data from the system inside a form, but it\'s hard from the system an may not be changed. Then we output that data in plain text, formatted the same way as the form in general. Don\'t use disabled fields.\\n
\\n\\n\\n\\n\\n\\n## Do’s and dont’s\\n\\n\\n
\\n**Do**\\n\\n- Use \\"optional\\" to mark optional fields.\\n
\\n\\n
\\n**Don’t**\\n\\n- Use asterix for indicate mandatory fields.\\n- Avoid using watermarks or placeholders. \\n
\\n\\n\\n\\n \\n \\n \\n","code":"var Component=(()=>{var f=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var g=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),y=(t,n)=>{for(var r in n)l(t,r,{get:n[r],enumerable:!0})},h=(t,n,r,o)=>{if(n&&typeof n==\\"object\\"||typeof n==\\"function\\")for(let i of x(n))!b.call(t,i)&&i!==r&&l(t,i,{get:()=>n[i],enumerable:!(o=p(n,i))||o.enumerable});return t};var v=(t,n,r)=>(r=t!=null?f(w(t)):{},h(n||!t||!t.__esModule?l(r,\\"default\\",{value:t,enumerable:!0}):r,t)),N=t=>h(l({},\\"__esModule\\",{value:!0}),t);var u=g((S,c)=>{c.exports=_jsx_runtime});var T={};y(T,{default:()=>z,frontmatter:()=>F});var e=v(u()),F={title:\\"Input\\",summary:\\"Text fields allow users to enter text into a UI. They typically appear in forms and dialogs.\\",date:new Date(17032032e5),global_id:\\"inputinput\\",status:\\"work in progress\\",tags:\\"form\\",node:\\"606-6849\\"};function m(t){let n=Object.assign({h2:\\"h2\\",a:\\"a\\",p:\\"p\\",h3:\\"h3\\",ul:\\"ul\\",li:\\"li\\",strong:\\"strong\\"},t.components),{Spacer:r,Grid:o,Figma:i,Do:s,Dont:d}=n;return s||a(\\"Do\\",!0),d||a(\\"Dont\\",!0),i||a(\\"Figma\\",!0),o||a(\\"Grid\\",!0),r||a(\\"Spacer\\",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{id:\\"overview\\",children:(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#overview\\",children:\\"Overview\\"})}),`\\n`,(0,e.jsx)(n.p,{children:\'Input are used to let the user enter text or numbers in a form.Optional field indicator. We always strive to only ask for mandatory information, so we want to inform users if some fields are optional. We do this by adding a parenthesis with the words \\"optional\\" next to the label with the field.\'}),`\\n`,(0,e.jsx)(r,{size:\\"medium\\",decorated:!0}),`\\n`,(0,e.jsx)(n.h3,{id:\\"variants\\",children:(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#variants\\",children:\\"Variants\\"})}),`\\n`,(0,e.jsx)(n.p,{children:\\"To be able to use forms in all context\'s we provide 2 versions of input fields.\\"}),`\\n`,(0,e.jsxs)(n.ul,{children:[`\\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\\"Label outside\\"}),\\" (default): Includes all the features we need in complex forms.\\"]}),`\\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\\"Label inside\\"}),\\": gives a more clean look but doesn\'t work for longer labels and can only be used in specific contexts.\\"]}),`\\n`]}),`\\n`,(0,e.jsxs)(o,{columns:2,children:[(0,e.jsx)(i,{node:\\"606-10125\\",caption:\\"Default, label outside.\\"}),(0,e.jsx)(i,{node:\\"606-10127\\",caption:\\"Option number 2 used only in specific contexts.\\"})]}),`\\n`,(0,e.jsx)(r,{size:\\"medium\\",decorated:!0}),`\\n`,(0,e.jsx)(n.h3,{id:\\"sets\\",children:(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#sets\\",children:\\"Sets\\"})}),`\\n`,(0,e.jsx)(n.p,{children:\\"To be able to use forms in all context\'s we provide 2 versions of input fields.\\"}),`\\n`,(0,e.jsxs)(n.ul,{children:[`\\n`,(0,e.jsx)(n.li,{children:\\"Regular text field\\"}),`\\n`,(0,e.jsx)(n.li,{children:\\"Multi lined text field, Multiple lines. Some text fields require a lot more text to be entered. A simple example would be description of a payment. For this we use the multi-line version of the input-field. This is often known as a text area or free text. Counter. For some fields it\'s critical that users know the limitations. Counters start at the max and count down to zero. When the counter comes close to zero the appearance shifts to red to warn the user before the fields stops accepting input.\\"}),`\\n`]}),`\\n`,(0,e.jsxs)(o,{columns:2,children:[(0,e.jsx)(i,{node:\\"606-10336\\",caption:\\"Regular and search field.\\"}),(0,e.jsx)(i,{node:\\"606-10338\\",caption:\\"Free text field.\\"})]}),`\\n`,(0,e.jsx)(r,{size:\\"medium\\",decorated:!0}),`\\n`,(0,e.jsxs)(o,{columns:2,children:[(0,e.jsxs)(\\"div\\",{children:[(0,e.jsx)(n.h3,{id:\\"sizes\\",children:(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#sizes\\",children:\\"Sizes\\"})}),(0,e.jsx)(n.p,{children:\\"The input fields come in two sizes.\\"}),(0,e.jsxs)(n.ul,{children:[`\\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\\"Normal\\"}),\\": used in most cases.\\"]}),`\\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\\"Small\\"}),\\": used in tables and in some special cases where the space is very limited.\\"]}),`\\n`]})]}),(0,e.jsx)(i,{node:\\"606-10448\\",caption:\\"Normal and small\\"})]}),`\\n`,(0,e.jsx)(r,{size:\\"medium\\",decorated:!0}),`\\n`,(0,e.jsx)(n.h2,{id:\\"features\\",children:(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#features\\",children:\\"Features\\"})}),`\\n`,(0,e.jsxs)(o,{columns:2,children:[(0,e.jsxs)(\\"div\\",{children:[(0,e.jsx)(n.h3,{id:\\"label\\",children:(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#label\\",children:\\"Label\\"})}),(0,e.jsx)(n.p,{children:\\"All input fields need a label. Keep the label short and to the point.\\"})]}),(0,e.jsx)(i,{node:\\"607-10627\\"})]}),`\\n`,(0,e.jsxs)(o,{columns:2,children:[(0,e.jsxs)(\\"div\\",{children:[(0,e.jsx)(n.h3,{id:\\"label-support-text\\",children:(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#label-support-text\\",children:\\"Label support text\\"})}),(0,e.jsx)(n.p,{children:\\"Use this to explain how to fill the field. This may be an instruction of how to count or what to include. Limit the instructions to details that all or most users need.\\"})]}),(0,e.jsx)(i,{node:\\"607-10706\\",caption:\\"Label support text visible.\\"})]}),`\\n`,(0,e.jsxs)(o,{columns:2,children:[(0,e.jsxs)(\\"div\\",{children:[(0,e.jsx)(n.h3,{id:\\"field-help\\",children:(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#field-help\\",children:\\"Field help\\"})}),(0,e.jsx)(n.p,{children:\\"We can provide three types of help in relation to input fields\\"}),(0,e.jsxs)(n.ul,{children:[`\\n`,(0,e.jsx)(n.li,{children:\\"Instruction text: Additional instruction of how to think, what we expect, or what format is required.\\"}),`\\n`,(0,e.jsx)(n.li,{children:\\"Contextual help: Either as a tooltip, extended help that increase the size of the field with more instructions, or a slide-out with helptext.\\"}),`\\n`,(0,e.jsx)(n.li,{children:\\"Error text: If users fail in filling the field with correct information, the last help is the error text that can guide to a solution based on the entered information.\\"}),`\\n`]})]}),(0,e.jsx)(i,{node:\\"609-10726\\",caption:\\"Field instruction visible.\\"})]}),`\\n`,(0,e.jsxs)(o,{columns:2,children:[(0,e.jsxs)(\\"div\\",{children:[(0,e.jsx)(n.h3,{id:\\"field-error\\",children:(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#field-error\\",children:\\"Field error\\"})}),(0,e.jsx)(n.p,{children:`Errors that are related to a field are displayed right next to the field. The field is highlighted with a error message about the problem underneath.\\nThe field validation should be done as soon as possible, but not while still editing the information.`})]}),(0,e.jsx)(i,{node:\\"768-6848\\",caption:\\"Field error\\"})]}),`\\n`,(0,e.jsxs)(o,{columns:2,children:[(0,e.jsxs)(\\"div\\",{children:[(0,e.jsx)(n.h3,{id:\\"field-counter\\",children:(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#field-counter\\",children:\\"Field counter\\"})}),(0,e.jsx)(n.p,{children:\\"Text missing...\\"})]}),(0,e.jsx)(i,{node:\\"609-10804\\",caption:\\"Field counter\\"})]}),`\\n`,(0,e.jsxs)(o,{columns:2,children:[(0,e.jsxs)(\\"div\\",{children:[(0,e.jsx)(n.h3,{id:\\"dynamic-information\\",children:(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#dynamic-information\\",children:\\"Dynamic information\\"})}),(0,e.jsx)(n.p,{children:\\"Used to perform comparative calculations next to the field. For example if users fill out salary after taxes, the dynamic information may show the salary before taxes.\\"})]}),(0,e.jsx)(i,{node:\\"619-6291\\",caption:\\"Example on dynamic information\\"})]}),`\\n`,(0,e.jsxs)(o,{columns:2,children:[(0,e.jsxs)(\\"div\\",{children:[(0,e.jsx)(n.h3,{id:\\"static-data\\",children:(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#static-data\\",children:\\"Static data\\"})}),(0,e.jsx)(n.p,{children:\\"Sometimes you may want to output data from the system inside a form, but it\'s hard from the system an may not be changed. Then we output that data in plain text, formatted the same way as the form in general. Don\'t use disabled fields.\\"})]}),(0,e.jsx)(i,{node:\\"619-6359\\",caption:\\"Example on static data\\"})]}),`\\n`,(0,e.jsxs)(o,{columns:2,children:[(0,e.jsxs)(\\"div\\",{children:[(0,e.jsx)(n.h3,{id:\\"auto-complete\\",children:(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#auto-complete\\",children:\\"Auto complete\\"})}),(0,e.jsx)(n.p,{children:\\"Input text can be used with auto complete to help users who have limited literacy or who write in a foreign language.Sometimes you may want to output data from the system inside a form, but it\'s hard from the system an may not be changed. Then we output that data in plain text, formatted the same way as the form in general. Don\'t use disabled fields.\\"})]}),(0,e.jsx)(i,{node:\\"619-6406\\",caption:\\"Example on autocomplete\\"})]}),`\\n`,(0,e.jsx)(r,{size:\\"medium\\",decorated:!0}),`\\n`,(0,e.jsx)(n.h2,{id:\\"dos-and-donts\\",children:(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#dos-and-donts\\",children:\\"Do\\\\u2019s and dont\\\\u2019s\\"})}),`\\n`,(0,e.jsxs)(o,{columns:2,children:[(0,e.jsxs)(\\"div\\",{children:[(0,e.jsx)(n.p,{children:(0,e.jsx)(n.strong,{children:\\"Do\\"})}),(0,e.jsxs)(n.ul,{children:[`\\n`,(0,e.jsx)(n.li,{children:\'Use \\"optional\\" to mark optional fields.\'}),`\\n`]})]}),(0,e.jsxs)(\\"div\\",{children:[(0,e.jsx)(n.p,{children:(0,e.jsx)(n.strong,{children:\\"Don\\\\u2019t\\"})}),(0,e.jsxs)(n.ul,{children:[`\\n`,(0,e.jsx)(n.li,{children:\\"Use asterix for indicate mandatory fields.\\"}),`\\n`,(0,e.jsx)(n.li,{children:\\"Avoid using watermarks or placeholders.\\"}),`\\n`]})]})]}),`\\n`,(0,e.jsxs)(o,{columns:2,children:[(0,e.jsx)(s,{children:(0,e.jsx)(i,{node:\\"647-6126\\"})}),(0,e.jsx)(d,{children:(0,e.jsx)(i,{node:\\"647-6129\\"})}),(0,e.jsx)(d,{children:(0,e.jsx)(i,{node:\\"619-6615\\"})})]})]})}function D(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,Object.assign({},t,{children:(0,e.jsx)(m,t)})):m(t)}var z=D;function a(t,n){throw new Error(\\"Expected \\"+(n?\\"component\\":\\"object\\")+\\" `\\"+t+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return N(T);})();\\n;return Component;"},"_id":"component/input/index.mdx","_raw":{"sourceFilePath":"component/input/index.mdx","sourceFileName":"index.mdx","sourceFileDir":"component/input","contentType":"mdx","flattenedPath":"component/input"},"type":"Component","url_path":"/component/input","headings":[{"level":2,"text":"Overview ","slug":"overview-"},{"level":3,"text":"Variants","slug":"variants"},{"level":3,"text":"Sets","slug":"sets"},{"level":3,"text":"Sizes","slug":"sizes"},{"level":2,"text":"Features","slug":"features"},{"level":3,"text":"Label","slug":"label"},{"level":3,"text":"Label support text","slug":"label-support-text"},{"level":3,"text":"Field help","slug":"field-help"},{"level":3,"text":"Field error","slug":"field-error"},{"level":3,"text":"Field counter","slug":"field-counter"},{"level":3,"text":"Dynamic information","slug":"dynamic-information"},{"level":3,"text":"Static data","slug":"static-data"},{"level":3,"text":"Auto complete","slug":"auto-complete"},{"level":2,"text":"Do’s and dont’s","slug":"dos-and-donts"}],"pathSegments":[{"order":0,"pathName":"input"}],"last_edited":"2024-04-02T07:58:11.717Z","figma_hero_svg":{"node":"606-6849","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/2804d780-80f4-4c74-b316-eb8a1a7e3373"},"figma_svgs":[{"node":"606-10125","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/abd8653f-b985-45a9-a30d-4c068558417a"},{"node":"606-10127","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/186208dc-63ec-4d1b-932d-78cb406c5414"},{"node":"606-10336","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/07a7d31d-a76d-4b4c-9ffa-97d910c0b9a6"},{"node":"606-10338","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/66692fd2-964b-43eb-8f09-4f523ad9ddb4"},{"node":"606-10448","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/5c3ee678-1cd6-489b-8dda-3b4b1964c7f4"},{"node":"607-10627","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/deb161ea-c08a-498f-8e5f-e3b5c43f0c19"},{"node":"607-10706","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/fb994753-6b2a-4230-89ac-d33f27ac527c"},{"node":"609-10726","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/9df796bb-10f0-4b8b-89fd-063a97c94e94"},{"node":"768-6848","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/6fce2ae8-b986-41ec-9718-ec5014c660db"},{"node":"609-10804","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/8eebeb9d-33ad-49dc-81b4-86f4337237c7"},{"node":"619-6291","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/4bbc3512-5f28-45a3-a5ec-a7d9069b2890"},{"node":"619-6359","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/7df7ef0d-dbeb-4cd0-81f1-679dd5ae49fa"},{"node":"619-6406","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/88f06452-0c46-43dd-871d-c54851a53dc4"},{"node":"647-6126","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/dce65cfb-3bd7-4073-9571-d29f5f42db03"},{"node":"647-6129","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/a5cb0a3f-d3c1-4997-890d-c6bbb82340ad"},{"node":"619-6615","svg":"\\n","url":"https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/55430c89-622b-4007-a7f9-a4ad8c0f57e4"}]},{"global_id":"uxtextinput","title":"UX text","date":"2023-12-22T00:00:00.000Z","body":{"raw":"\\n## Coming soon\\nThis page will be updated with information soon.","code":"var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var p=(n,t)=>()=>(t||n((t={exports:{}}).exports,t),t.exports),_=(n,t)=>{for(var o in t)a(n,o,{get:t[o],enumerable:!0})},r=(n,t,o,i)=>{if(t&&typeof t==\\"object\\"||typeof t==\\"function\\")for(let s of x(t))!g.call(n,s)&&s!==o&&a(n,s,{get:()=>t[s],enumerable:!(i=l(t,s))||i.enumerable});return n};var f=(n,t,o)=>(o=n!=null?h(u(n)):{},r(t||!n||!n.__esModule?a(o,\\"default\\",{value:n,enumerable:!0}):o,n)),j=n=>r(a({},\\"__esModule\\",{value:!0}),n);var m=p((X,c)=>{c.exports=_jsx_runtime});var D={};_(D,{default:()=>C,frontmatter:()=>b});var e=f(m()),b={title:\\"UX text\\",global_id:\\"uxtextinput\\",date:new Date(17032032e5)};function d(n){let t=Object.assign({h2:\\"h2\\",a:\\"a\\",p:\\"p\\"},n.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(t.h2,{id:\\"coming-soon\\",children:(0,e.jsx)(t.a,{className:\\"anchor\\",href:\\"#coming-soon\\",children:\\"Coming soon\\"})}),`\\n`,(0,e.jsx)(t.p,{children:\\"This page will be updated with information soon.\\"})]})}function w(n={}){let{wrapper:t}=n.components||{};return t?(0,e.jsx)(t,Object.assign({},n,{children:(0,e.jsx)(d,n)})):d(n)}var C=w;return j(D);})();\\n;return Component;"},"_id":"component/input/ux-text.mdx","_raw":{"sourceFilePath":"component/input/ux-text.mdx","sourceFileName":"ux-text.mdx","sourceFileDir":"component/input","contentType":"mdx","flattenedPath":"component/input/ux-text"},"type":"Component","url_path":"/component/input/ux-text","headings":[{"level":2,"text":"Coming soon","slug":"coming-soon"}],"pathSegments":[{"order":0,"pathName":"input"},{"order":0,"pathName":"ux-text"}],"last_edited":"2024-04-02T07:58:11.717Z","figma_hero_svg":{"svg":""},"figma_svgs":[]}]'),t=JSON.parse('[{"global_id":"astrit","name":"Astrit Malsija","handle":"astrit","email":"am@astrit.co","title":"Design Engineer","location":"Stockholm","department":"Code","body":{"raw":"\\nUllamco et nostrud magna commodo nostrud ...\\n","code":"var Component=(()=>{var d=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var j=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),_=(t,n)=>{for(var e in n)a(t,e,{get:n[e],enumerable:!0})},i=(t,n,e,s)=>{if(n&&typeof n==\\"object\\"||typeof n==\\"function\\")for(let o of p(n))!g.call(t,o)&&o!==e&&a(t,o,{get:()=>n[o],enumerable:!(s=u(n,o))||s.enumerable});return t};var f=(t,n,e)=>(e=t!=null?d(x(t)):{},i(n||!t||!t.__esModule?a(e,\\"default\\",{value:t,enumerable:!0}):e,t)),h=t=>i(a({},\\"__esModule\\",{value:!0}),t);var m=j((X,c)=>{c.exports=_jsx_runtime});var D={};_(D,{default:()=>C,frontmatter:()=>M});var r=f(m()),M={name:\\"Astrit Malsija\\",global_id:\\"astrit\\",handle:\\"astrit\\",email:\\"am@astrit.co\\",title:\\"Design Engineer\\",location:\\"Stockholm\\",department:\\"Code\\"};function l(t){let n=Object.assign({p:\\"p\\"},t.components);return(0,r.jsx)(n.p,{children:\\"Ullamco et nostrud magna commodo nostrud ...\\"})}function b(t={}){let{wrapper:n}=t.components||{};return n?(0,r.jsx)(n,Object.assign({},t,{children:(0,r.jsx)(l,t)})):l(t)}var C=b;return h(D);})();\\n;return Component;"},"_id":"team/astrit.mdx","_raw":{"sourceFilePath":"team/astrit.mdx","sourceFileName":"astrit.mdx","sourceFileDir":"team","contentType":"mdx","flattenedPath":"team/astrit"},"type":"Member","url_path":"/team/astrit","pathSegments":[{"order":0,"pathName":"astrit"}],"last_edited":"2024-04-02T07:58:11.717Z"},{"global_id":"hemmahosjessi","name":"Jessi Nygren Walhed","handle":"hemmahosjessi","email":"hemmahosjessi@gmail.com","title":"Designer","location":"Stockholm","department":"Design","body":{"raw":"\\nUllamco et nostrud magna commodo nostrud ...\\n","code":"var Component=(()=>{var d=Object.create;var s=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var p=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),x=(e,t)=>{for(var n in t)s(e,n,{get:t[n],enumerable:!0})},i=(e,t,n,a)=>{if(t&&typeof t==\\"object\\"||typeof t==\\"function\\")for(let o of u(t))!j.call(e,o)&&o!==n&&s(e,o,{get:()=>t[o],enumerable:!(a=h(t,o))||a.enumerable});return e};var _=(e,t,n)=>(n=e!=null?d(g(e)):{},i(t||!e||!e.__esModule?s(n,\\"default\\",{value:e,enumerable:!0}):n,e)),f=e=>i(s({},\\"__esModule\\",{value:!0}),e);var c=p((O,r)=>{r.exports=_jsx_runtime});var y={};x(y,{default:()=>M,frontmatter:()=>D});var m=_(c()),D={name:\\"Jessi Nygren Walhed\\",global_id:\\"hemmahosjessi\\",handle:\\"hemmahosjessi\\",email:\\"hemmahosjessi@gmail.com\\",title:\\"Designer\\",location:\\"Stockholm\\",department:\\"Design\\"};function l(e){let t=Object.assign({p:\\"p\\"},e.components);return(0,m.jsx)(t.p,{children:\\"Ullamco et nostrud magna commodo nostrud ...\\"})}function b(e={}){let{wrapper:t}=e.components||{};return t?(0,m.jsx)(t,Object.assign({},e,{children:(0,m.jsx)(l,e)})):l(e)}var M=b;return f(y);})();\\n;return Component;"},"_id":"team/jessi.mdx","_raw":{"sourceFilePath":"team/jessi.mdx","sourceFileName":"jessi.mdx","sourceFileDir":"team","contentType":"mdx","flattenedPath":"team/jessi"},"type":"Member","url_path":"/team/jessi","pathSegments":[{"order":0,"pathName":"jessi"}],"last_edited":"2024-04-02T07:58:11.717Z"},{"global_id":"Joacim","name":"Joacim Magnusson","handle":"splashdust","email":"jocke@jocke.se","title":"Software Engineer","location":"Stockholm","department":"Code","body":{"raw":"\\nUllamco et nostrud magna commodo nostrud ...\\n","code":"var Component=(()=>{var d=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var f=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),g=(t,n)=>{for(var o in n)a(t,o,{get:n[o],enumerable:!0})},r=(t,n,o,s)=>{if(n&&typeof n==\\"object\\"||typeof n==\\"function\\")for(let e of p(n))!x.call(t,e)&&e!==o&&a(t,e,{get:()=>n[e],enumerable:!(s=u(n,e))||s.enumerable});return t};var _=(t,n,o)=>(o=t!=null?d(j(t)):{},r(n||!t||!t.__esModule?a(o,\\"default\\",{value:t,enumerable:!0}):o,t)),h=t=>r(a({},\\"__esModule\\",{value:!0}),t);var i=f((D,m)=>{m.exports=_jsx_runtime});var C={};g(C,{default:()=>k,frontmatter:()=>M});var c=_(i()),M={name:\\"Joacim Magnusson\\",global_id:\\"Joacim\\",handle:\\"splashdust\\",email:\\"jocke@jocke.se\\",title:\\"Software Engineer\\",location:\\"Stockholm\\",department:\\"Code\\"};function l(t){let n=Object.assign({p:\\"p\\"},t.components);return(0,c.jsx)(n.p,{children:\\"Ullamco et nostrud magna commodo nostrud ...\\"})}function b(t={}){let{wrapper:n}=t.components||{};return n?(0,c.jsx)(n,Object.assign({},t,{children:(0,c.jsx)(l,t)})):l(t)}var k=b;return h(C);})();\\n;return Component;"},"_id":"team/joacim.mdx","_raw":{"sourceFilePath":"team/joacim.mdx","sourceFileName":"joacim.mdx","sourceFileDir":"team","contentType":"mdx","flattenedPath":"team/joacim"},"type":"Member","url_path":"/team/joacim","pathSegments":[{"order":0,"pathName":"joacim"}],"last_edited":"2024-04-02T07:58:11.717Z"},{"global_id":"hognelid","name":"Jonathan H","handle":"hognelid","email":"jonathan@seb.se","title":"Designer","location":"Stockholm","department":"Design","body":{"raw":"\\nUllamco et nostrud magna commodo nostrud ...\\n","code":"var Component=(()=>{var d=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var x=(n,t)=>()=>(t||n((t={exports:{}}).exports,t),t.exports),j=(n,t)=>{for(var e in t)a(n,e,{get:t[e],enumerable:!0})},c=(n,t,e,s)=>{if(t&&typeof t==\\"object\\"||typeof t==\\"function\\")for(let o of g(t))!p.call(n,o)&&o!==e&&a(n,o,{get:()=>t[o],enumerable:!(s=u(t,o))||s.enumerable});return n};var _=(n,t,e)=>(e=n!=null?d(h(n)):{},c(t||!n||!n.__esModule?a(e,\\"default\\",{value:n,enumerable:!0}):e,n)),f=n=>c(a({},\\"__esModule\\",{value:!0}),n);var m=x((X,i)=>{i.exports=_jsx_runtime});var C={};j(C,{default:()=>M,frontmatter:()=>b});var r=_(m()),b={name:\\"Jonathan H\\",global_id:\\"hognelid\\",handle:\\"hognelid\\",email:\\"jonathan@seb.se\\",title:\\"Designer\\",location:\\"Stockholm\\",department:\\"Design\\"};function l(n){let t=Object.assign({p:\\"p\\"},n.components);return(0,r.jsx)(t.p,{children:\\"Ullamco et nostrud magna commodo nostrud ...\\"})}function D(n={}){let{wrapper:t}=n.components||{};return t?(0,r.jsx)(t,Object.assign({},n,{children:(0,r.jsx)(l,n)})):l(n)}var M=D;return f(C);})();\\n;return Component;"},"_id":"team/jonathan.mdx","_raw":{"sourceFilePath":"team/jonathan.mdx","sourceFileName":"jonathan.mdx","sourceFileDir":"team","contentType":"mdx","flattenedPath":"team/jonathan"},"type":"Member","url_path":"/team/jonathan","pathSegments":[{"order":0,"pathName":"jonathan"}],"last_edited":"2024-04-02T07:58:11.717Z"},{"global_id":"LeopoldRoos","name":"Leopold Roos","handle":"EldRoos","email":"mrr00s@hotmail.com","title":"Developer","location":"Stockholm","department":"Docs","body":{"raw":"\\nUllamco et nostrud magna commodo nostrud ...\\n","code":"var Component=(()=>{var i=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var f=(o,t)=>()=>(t||o((t={exports:{}}).exports,t),t.exports),h=(o,t)=>{for(var e in t)r(o,e,{get:t[e],enumerable:!0})},a=(o,t,e,s)=>{if(t&&typeof t==\\"object\\"||typeof t==\\"function\\")for(let n of u(t))!_.call(o,n)&&n!==e&&r(o,n,{get:()=>t[n],enumerable:!(s=p(t,n))||s.enumerable});return o};var j=(o,t,e)=>(e=o!=null?i(x(o)):{},a(t||!o||!o.__esModule?r(e,\\"default\\",{value:o,enumerable:!0}):e,o)),g=o=>a(r({},\\"__esModule\\",{value:!0}),o);var l=f((C,m)=>{m.exports=_jsx_runtime});var M={};h(M,{default:()=>L,frontmatter:()=>D});var c=j(l()),D={name:\\"Leopold Roos\\",global_id:\\"LeopoldRoos\\",handle:\\"EldRoos\\",email:\\"mrr00s@hotmail.com\\",title:\\"Developer\\",location:\\"Stockholm\\",department:\\"Docs\\"};function d(o){let t=Object.assign({p:\\"p\\"},o.components);return(0,c.jsx)(t.p,{children:\\"Ullamco et nostrud magna commodo nostrud ...\\"})}function b(o={}){let{wrapper:t}=o.components||{};return t?(0,c.jsx)(t,Object.assign({},o,{children:(0,c.jsx)(d,o)})):d(o)}var L=b;return g(M);})();\\n;return Component;"},"_id":"team/leo.mdx","_raw":{"sourceFilePath":"team/leo.mdx","sourceFileName":"leo.mdx","sourceFileDir":"team","contentType":"mdx","flattenedPath":"team/leo"},"type":"Member","url_path":"/team/leo","pathSegments":[{"order":0,"pathName":"leo"}],"last_edited":"2024-04-02T07:58:11.717Z"},{"global_id":"ulde01","name":"Ulrika","handle":"ulde01","email":"ulrika@seb.se","title":null,"location":"Stockholm","department":"Docs","body":{"raw":"\\nUllamco et nostrud magna commodo nostrud ...\\n","code":"var Component=(()=>{var u=Object.create;var a=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var f=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),j=(t,n)=>{for(var e in n)a(t,e,{get:n[e],enumerable:!0})},l=(t,n,e,c)=>{if(n&&typeof n==\\"object\\"||typeof n==\\"function\\")for(let o of p(n))!_.call(t,o)&&o!==e&&a(t,o,{get:()=>n[o],enumerable:!(c=d(n,o))||c.enumerable});return t};var b=(t,n,e)=>(e=t!=null?u(x(t)):{},l(n||!t||!t.__esModule?a(e,\\"default\\",{value:t,enumerable:!0}):e,t)),g=t=>l(a({},\\"__esModule\\",{value:!0}),t);var m=f((O,s)=>{s.exports=_jsx_runtime});var M={};j(M,{default:()=>D,frontmatter:()=>h});var r=b(m()),h={name:\\"Ulrika\\",global_id:\\"ulde01\\",handle:\\"ulde01\\",email:\\"ulrika@seb.se\\",title:null,location:\\"Stockholm\\",department:\\"Docs\\"};function i(t){let n=Object.assign({p:\\"p\\"},t.components);return(0,r.jsx)(n.p,{children:\\"Ullamco et nostrud magna commodo nostrud ...\\"})}function k(t={}){let{wrapper:n}=t.components||{};return n?(0,r.jsx)(n,Object.assign({},t,{children:(0,r.jsx)(i,t)})):i(t)}var D=k;return g(M);})();\\n;return Component;"},"_id":"team/ulrika.mdx","_raw":{"sourceFilePath":"team/ulrika.mdx","sourceFileName":"ulrika.mdx","sourceFileDir":"team","contentType":"mdx","flattenedPath":"team/ulrika"},"type":"Member","url_path":"/team/ulrika","pathSegments":[{"order":0,"pathName":"ulrika"}],"last_edited":"2024-04-02T07:58:11.717Z"},{"global_id":"VilhelmSjolander","name":"Vilhelm Sj\xf6lander","handle":"vsjolander","email":"vilhelm.sjolander@gmail.com","title":"Software Engineer","location":"Stockholm","department":"Code","body":{"raw":"\\nUllamco et nostrud magna commodo nostrud ...\\n","code":"var Component=(()=>{var d=Object.create;var a=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var x=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),f=(e,n)=>{for(var t in n)a(e,t,{get:n[t],enumerable:!0})},m=(e,n,t,r)=>{if(n&&typeof n==\\"object\\"||typeof n==\\"function\\")for(let o of u(n))!p.call(e,o)&&o!==t&&a(e,o,{get:()=>n[o],enumerable:!(r=j(n,o))||r.enumerable});return e};var g=(e,n,t)=>(t=e!=null?d(h(e)):{},m(n||!e||!e.__esModule?a(t,\\"default\\",{value:e,enumerable:!0}):t,e)),_=e=>m(a({},\\"__esModule\\",{value:!0}),e);var i=x((w,c)=>{c.exports=_jsx_runtime});var M={};f(M,{default:()=>C,frontmatter:()=>S});var l=g(i()),S={name:\\"Vilhelm Sj\\\\xF6lander\\",global_id:\\"VilhelmSjolander\\",handle:\\"vsjolander\\",email:\\"vilhelm.sjolander@gmail.com\\",title:\\"Software Engineer\\",location:\\"Stockholm\\",department:\\"Code\\"};function s(e){let n=Object.assign({p:\\"p\\"},e.components);return(0,l.jsx)(n.p,{children:\\"Ullamco et nostrud magna commodo nostrud ...\\"})}function b(e={}){let{wrapper:n}=e.components||{};return n?(0,l.jsx)(n,Object.assign({},e,{children:(0,l.jsx)(s,e)})):s(e)}var C=b;return _(M);})();\\n;return Component;"},"_id":"team/vilhelm.mdx","_raw":{"sourceFilePath":"team/vilhelm.mdx","sourceFileName":"vilhelm.mdx","sourceFileDir":"team","contentType":"mdx","flattenedPath":"team/vilhelm"},"type":"Member","url_path":"/team/vilhelm","pathSegments":[{"order":0,"pathName":"vilhelm"}],"last_edited":"2024-04-02T07:58:11.717Z"}]'),i=JSON.parse('[{"global_id":"webcomponents","title":"News generation of web components","date":"2021-12-24T00:00:00.000Z","author":"astrit","body":{"raw":"\\nUllamco et nostrud magna commodo nostrud ...\\n","code":"var Component=(()=>{var d=Object.create;var r=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var _=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),b=(t,n)=>{for(var e in n)r(t,e,{get:n[e],enumerable:!0})},c=(t,n,e,a)=>{if(n&&typeof n==\\"object\\"||typeof n==\\"function\\")for(let o of p(n))!f.call(t,o)&&o!==e&&r(t,o,{get:()=>n[o],enumerable:!(a=l(n,o))||a.enumerable});return t};var g=(t,n,e)=>(e=t!=null?d(x(t)):{},c(n||!t||!t.__esModule?r(e,\\"default\\",{value:t,enumerable:!0}):e,t)),j=t=>c(r({},\\"__esModule\\",{value:!0}),t);var i=_((O,m)=>{m.exports=_jsx_runtime});var M={};b(M,{default:()=>D,frontmatter:()=>w});var s=g(i()),w={title:\\"News generation of web components\\",date:new Date(1640304e6),global_id:\\"webcomponents\\",author:\\"astrit\\"};function u(t){let n=Object.assign({p:\\"p\\"},t.components);return(0,s.jsx)(n.p,{children:\\"Ullamco et nostrud magna commodo nostrud ...\\"})}function h(t={}){let{wrapper:n}=t.components||{};return n?(0,s.jsx)(n,Object.assign({},t,{children:(0,s.jsx)(u,t)})):u(t)}var D=h;return j(M);})();\\n;return Component;"},"_id":"blog/next-gen-webcomp.mdx","_raw":{"sourceFilePath":"blog/next-gen-webcomp.mdx","sourceFileName":"next-gen-webcomp.mdx","sourceFileDir":"blog","contentType":"mdx","flattenedPath":"blog/next-gen-webcomp"},"type":"Post","url_path":"/blog/next-gen-webcomp","pathSegments":[{"order":0,"pathName":"next-gen-webcomp"}],"last_edited":"2024-04-02T07:58:11.717Z"},{"global_id":"css-motion","title":"Using Reduced Motion","date":"2021-12-24T00:00:00.000Z","author":"splashdust","body":{"raw":"\\nUllamco et nostrud magna commodo nostrud ...\\n","code":"var Component=(()=>{var u=Object.create;var s=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var f=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),g=(t,n)=>{for(var o in n)s(t,o,{get:n[o],enumerable:!0})},a=(t,n,o,r)=>{if(n&&typeof n==\\"object\\"||typeof n==\\"function\\")for(let e of p(n))!_.call(t,e)&&e!==o&&s(t,e,{get:()=>n[e],enumerable:!(r=l(n,e))||r.enumerable});return t};var j=(t,n,o)=>(o=t!=null?u(x(t)):{},a(n||!t||!t.__esModule?s(o,\\"default\\",{value:t,enumerable:!0}):o,t)),h=t=>a(s({},\\"__esModule\\",{value:!0}),t);var d=f((O,i)=>{i.exports=_jsx_runtime});var w={};g(w,{default:()=>D,frontmatter:()=>M});var c=j(d()),M={title:\\"Using Reduced Motion\\",date:new Date(1640304e6),global_id:\\"css-motion\\",author:\\"splashdust\\"};function m(t){let n=Object.assign({p:\\"p\\"},t.components);return(0,c.jsx)(n.p,{children:\\"Ullamco et nostrud magna commodo nostrud ...\\"})}function b(t={}){let{wrapper:n}=t.components||{};return n?(0,c.jsx)(n,Object.assign({},t,{children:(0,c.jsx)(m,t)})):m(t)}var D=b;return h(w);})();\\n;return Component;"},"_id":"blog/using-reduced-motion.mdx","_raw":{"sourceFilePath":"blog/using-reduced-motion.mdx","sourceFileName":"using-reduced-motion.mdx","sourceFileDir":"blog","contentType":"mdx","flattenedPath":"blog/using-reduced-motion"},"type":"Post","url_path":"/blog/using-reduced-motion","pathSegments":[{"order":0,"pathName":"using-reduced-motion"}],"last_edited":"2024-04-02T07:58:11.717Z"}]');let l=[...V,...n,...t,...i]},1433:function(A,C,e){"use strict";e.r(C),e.d(C,{default:function(){return t}});var V=e(7437),n=e(2265);function t(A){let{children:C,gapBlock:e,gapInline:t,paddingBlock:i,paddingInline:l,mobile:r,contentInline:s,tablet:H,columns:d=12,fluid:a,justify:c,align:v,inlineSize:Z}=A;if(d<1||d>24)throw Error("The columns prop must be between 1 and 24.");let o=function(){let[A,C]=(0,n.useState)(!1);return(0,n.useEffect)(()=>{let A=A=>{"Alt"===A.key&&C(!0)},e=A=>{"Alt"===A.key&&C(!1)};return window.addEventListener("keydown",A),window.addEventListener("keyup",e),()=>{window.removeEventListener("keydown",A),window.removeEventListener("keyup",e)}},[]),A}();return(0,V.jsx)("gds-grid",{...o?{debug:!0}:{},"gap-block":e,"gap-inline":t,"padding-block":i,"padding-inline":l,"content-inline":s,columns:d.toString(),...void 0!==r?{mobile:r.toString()}:{},...void 0!==H?{tablet:H.toString()}:{},fluid:a,justify:c,align:v,"inline-size":Z,children:C})}e(5575),e(6976),e(1193),e(5834),e(8835),e(2893)},8835:function(){},2893:function(){},5575:function(){},6976:function(){},5834:function(){},1193:function(){}}]);
\ No newline at end of file
diff --git a/_next/static/chunks/app/component/[slug]/accessibility/page-008e0e3d6f1df281.js b/_next/static/chunks/app/component/[slug]/accessibility/page-008e0e3d6f1df281.js
new file mode 100644
index 00000000..e443d8c1
--- /dev/null
+++ b/_next/static/chunks/app/component/[slug]/accessibility/page-008e0e3d6f1df281.js
@@ -0,0 +1 @@
+(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[102,564,550,826],{7561:function(){},6435:function(e,t,n){"use strict";n.d(t,{F:function(){return l},f:function(){return u}});var r=n(2265);let s=["light","dark"],o="(prefers-color-scheme: dark)",c="undefined"==typeof window,i=(0,r.createContext)(void 0),a={setTheme:e=>{},themes:[]},l=()=>{var e;return null!==(e=(0,r.useContext)(i))&&void 0!==e?e:a},u=e=>(0,r.useContext)(i)?r.createElement(r.Fragment,null,e.children):r.createElement(m,e),d=["light","dark"],m=({forcedTheme:e,disableTransitionOnChange:t=!1,enableSystem:n=!0,enableColorScheme:c=!0,storageKey:a="theme",themes:l=d,defaultTheme:u=n?"system":"light",attribute:m="data-theme",value:v,children:y,nonce:x})=>{let[j,w]=(0,r.useState)(()=>h(a,u)),[_,S]=(0,r.useState)(()=>h(a)),b=v?Object.values(v):l,$=(0,r.useCallback)(e=>{let r=e;if(!r)return;"system"===e&&n&&(r=g());let o=v?v[r]:r,i=t?p():null,a=document.documentElement;if("class"===m?(a.classList.remove(...b),o&&a.classList.add(o)):o?a.setAttribute(m,o):a.removeAttribute(m),c){let e=s.includes(u)?u:null,t=s.includes(r)?r:e;a.style.colorScheme=t}null==i||i()},[]),E=(0,r.useCallback)(e=>{w(e);try{localStorage.setItem(a,e)}catch(e){}},[e]),k=(0,r.useCallback)(t=>{S(g(t)),"system"===j&&n&&!e&&$("system")},[j,e]);(0,r.useEffect)(()=>{let e=window.matchMedia(o);return e.addListener(k),k(e),()=>e.removeListener(k)},[k]),(0,r.useEffect)(()=>{let e=e=>{e.key===a&&E(e.newValue||u)};return window.addEventListener("storage",e),()=>window.removeEventListener("storage",e)},[E]),(0,r.useEffect)(()=>{$(null!=e?e:j)},[e,j]);let T=(0,r.useMemo)(()=>({theme:j,setTheme:E,forcedTheme:e,resolvedTheme:"system"===j?_:j,themes:n?[...l,"system"]:l,systemTheme:n?_:void 0}),[j,E,e,_,n,l]);return r.createElement(i.Provider,{value:T},r.createElement(f,{forcedTheme:e,disableTransitionOnChange:t,enableSystem:n,enableColorScheme:c,storageKey:a,themes:l,defaultTheme:u,attribute:m,value:v,children:y,attrs:b,nonce:x}),y)},f=(0,r.memo)(({forcedTheme:e,storageKey:t,attribute:n,enableSystem:c,enableColorScheme:i,defaultTheme:a,value:l,attrs:u,nonce:d})=>{let m="system"===a,f="class"===n?`var d=document.documentElement,c=d.classList;c.remove(${u.map(e=>`'${e}'`).join(",")});`:`var d=document.documentElement,n='${n}',s='setAttribute';`,h=i?s.includes(a)&&a?`if(e==='light'||e==='dark'||!e)d.style.colorScheme=e||'${a}'`:"if(e==='light'||e==='dark')d.style.colorScheme=e":"",p=(e,t=!1,r=!0)=>{let o=l?l[e]:e,c=t?e+"|| ''":`'${o}'`,a="";return i&&r&&!t&&s.includes(e)&&(a+=`d.style.colorScheme = '${e}';`),"class"===n?a+=t||o?`c.add(${c})`:"null":o&&(a+=`d[s](n,${c})`),a},g=e?`!function(){${f}${p(e)}}()`:c?`!function(){try{${f}var e=localStorage.getItem('${t}');if('system'===e||(!e&&${m})){var t='${o}',m=window.matchMedia(t);if(m.media!==t||m.matches){${p("dark")}}else{${p("light")}}}else if(e){${l?`var x=${JSON.stringify(l)};`:""}${p(l?"x[e]":"e",!0)}}${m?"":"else{"+p(a,!1,!1)+"}"}${h}}catch(e){}}()`:`!function(){try{${f}var e=localStorage.getItem('${t}');if(e){${l?`var x=${JSON.stringify(l)};`:""}${p(l?"x[e]":"e",!0)}}else{${p(a,!1,!1)};}${h}}catch(t){}}();`;return r.createElement("script",{nonce:d,dangerouslySetInnerHTML:{__html:g}})},()=>!0),h=(e,t)=>{let n;if(!c){try{n=localStorage.getItem(e)||void 0}catch(e){}return n||t}},p=()=>{let e=document.createElement("style");return e.appendChild(document.createTextNode("*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}")),document.head.appendChild(e),()=>{window.getComputedStyle(document.body),setTimeout(()=>{document.head.removeChild(e)},1)}},g=e=>(e||(e=window.matchMedia(o)),e.matches?"dark":"light")},8826:function(e,t,n){Promise.resolve().then(n.bind(n,9038))},9038:function(e,t,n){"use strict";n.r(t),n.d(t,{Mdx:function(){return g}});var r=n(7437),s=n(2265),o=n(1433),c=n(6173),i=n(4887),a=n(4472);let l=(e,t={})=>{let n={React:s,ReactDOM:i,_jsx_runtime:a.i,...t};return Function(...Object.keys(n),e)(...Object.values(n)).default},u=(e,t={})=>s.useMemo(()=>l(e,t),[e,t]);var d=n(290);n(6958),n(2981);var m=n(4033),f=n(3311),h=n(6435);n(6502),n(177);let p={Figma:function(e){let{caption:t,node:n,height:s}=e,o=(0,m.usePathname)(),c=f.DD.find(e=>e.url_path===o),i=null==c?void 0:c.figma_svgs.find(e=>e.node===n);return(0,r.jsx)(d.Z,{caption:t,height:s,content:null==i?void 0:i.svg})},FigmaProto:function(e){let{file:t,caption:n,node:o,scale:c,height:i}=e,[a,l]=(0,s.useState)(!0);return(0,r.jsxs)("figure",{className:a?"loading":"",children:[(0,r.jsx)("iframe",{src:"https://www.figma.com/embed?embed_host=share&url=https://www.figma.com/proto/".concat(t,"/Embed?type=design&scaling=min-zoom&node-id=").concat(o,"&mode=design&hide-ui=1"),onLoad:()=>{l(!1)},height:i}),(0,r.jsx)("figcaption",{children:n})]})},Image:function(e){let{alt:t,dark:n,caption:o,...c}=e,{theme:i}=(0,h.F)(),[a,l]=(0,s.useState)(!1);return((0,s.useEffect)(()=>{l(!0)},[]),a)?(0,r.jsxs)("figure",{children:[(0,r.jsxs)("picture",{children:["dark"===i&&(0,r.jsx)("source",{srcSet:n,media:"(prefers-color-scheme: dark)"}),(0,r.jsx)("img",{alt:t,...c})]}),o&&(0,r.jsx)("figcaption",{dangerouslySetInnerHTML:{__html:o}})]}):null},Playground:function(e){let t=(0,s.useRef)(null),n=(0,s.useRef)(null);return(0,s.useEffect)(()=>{n.current&&t.current&&(n.current.project=t.current)},[]),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("playground-project",{id:"story-project",ref:t,"project-src":"/stories/".concat(e.component,"/project.json")}),(0,r.jsx)("playground-preview",{ref:n})]})},Row:function(e){let{children:t}=e;return(0,r.jsx)("div",{className:"row",children:t})},Col:function(e){let{children:t}=e;return(0,r.jsx)("div",{className:"col",children:t})},Do:function(e){let{children:t}=e;return(0,r.jsxs)("div",{className:"card do",children:[t,(0,r.jsxs)("span",{children:[(0,r.jsx)("svg",{viewBox:"0 0 24 24",children:(0,r.jsx)("polyline",{points:"20 6 9 17 4 12"})}),"DO"]})]})},Dont:function(e){let{children:t}=e;return(0,r.jsxs)("div",{className:"card dont",children:[t,(0,r.jsxs)("span",{children:[(0,r.jsxs)("svg",{viewBox:"0 0 24 24",children:[(0,r.jsx)("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),(0,r.jsx)("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]}),"DON'T"]})]})},Refs:function(){return(0,r.jsx)("div",{children:"Refs"})},SE:function(e){let{children:t}=e;return(0,r.jsx)("span",{lang:"se",children:t})},Pattern:d.Z,Spacer:c.Z,Grid:o.default};function g(e){let{code:t,globals:n}=e,s=u(t,n);return(0,r.jsx)(s,{components:p})}},290:function(e,t,n){"use strict";n.d(t,{Z:function(){return o}});var r=n(7437),s=n(2265);function o(e){let{children:t,caption:n,height:o,content:c}=e,i=o?{"--gds-pattern-max-height":"".concat(o,"px")}:{},a=(0,s.useRef)(null);return(0,s.useEffect)(()=>{o&&a.current&&a.current.classList.add("custom")},[o]),(0,r.jsxs)("div",{children:[c?(0,r.jsx)("figure",{ref:a,className:"preview","data-caption":n,style:i,dangerouslySetInnerHTML:{__html:c}}):(0,r.jsx)("figure",{ref:a,className:"preview","data-caption":n,style:i,children:t}),n&&(0,r.jsx)("span",{dangerouslySetInnerHTML:{__html:n}})]})}n(9027)},6173:function(e,t,n){"use strict";n.d(t,{Z:function(){return s}});var r=n(7437);function s(e){let{size:t,decorated:n}=e,s="gds-spacer";return t&&(s+=" gds-spacer-".concat(t)),n&&(s+=" gds-spacer-decorator"),(0,r.jsx)("div",{className:s,children:n&&(0,r.jsx)("hr",{})})}n(1873)},6958:function(){},2981:function(){},6502:function(){},177:function(){},9027:function(){},1873:function(){},622:function(e,t,n){"use strict";var r=n(2265),s=Symbol.for("react.element"),o=Symbol.for("react.fragment"),c=Object.prototype.hasOwnProperty,i=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,a={key:!0,ref:!0,__self:!0,__source:!0};function l(e,t,n){var r,o={},l=null,u=null;for(r in void 0!==n&&(l=""+n),void 0!==t.key&&(l=""+t.key),void 0!==t.ref&&(u=t.ref),t)c.call(t,r)&&!a.hasOwnProperty(r)&&(o[r]=t[r]);if(e&&e.defaultProps)for(r in t=e.defaultProps)void 0===o[r]&&(o[r]=t[r]);return{$$typeof:s,type:e,key:l,ref:u,props:o,_owner:i.current}}t.Fragment=o,t.jsx=l,t.jsxs=l},7437:function(e,t,n){"use strict";e.exports=n(622)},4033:function(e,t,n){e.exports=n(5313)},4472:function(e,t,n){let r=n(7437);e.exports.i=r}},function(e){e.O(0,[746,971,938,744],function(){return e(e.s=8826)}),_N_E=e.O()}]);
\ No newline at end of file
diff --git a/_next/static/chunks/app/component/[slug]/code/page-f0b810a892a8c413.js b/_next/static/chunks/app/component/[slug]/code/page-f0b810a892a8c413.js
new file mode 100644
index 00000000..a33be954
--- /dev/null
+++ b/_next/static/chunks/app/component/[slug]/code/page-f0b810a892a8c413.js
@@ -0,0 +1 @@
+(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[826,564,550,102],{7561:function(){},6435:function(e,t,n){"use strict";n.d(t,{F:function(){return l},f:function(){return u}});var r=n(2265);let s=["light","dark"],o="(prefers-color-scheme: dark)",c="undefined"==typeof window,i=(0,r.createContext)(void 0),a={setTheme:e=>{},themes:[]},l=()=>{var e;return null!==(e=(0,r.useContext)(i))&&void 0!==e?e:a},u=e=>(0,r.useContext)(i)?r.createElement(r.Fragment,null,e.children):r.createElement(m,e),d=["light","dark"],m=({forcedTheme:e,disableTransitionOnChange:t=!1,enableSystem:n=!0,enableColorScheme:c=!0,storageKey:a="theme",themes:l=d,defaultTheme:u=n?"system":"light",attribute:m="data-theme",value:v,children:y,nonce:x})=>{let[j,w]=(0,r.useState)(()=>h(a,u)),[_,S]=(0,r.useState)(()=>h(a)),b=v?Object.values(v):l,$=(0,r.useCallback)(e=>{let r=e;if(!r)return;"system"===e&&n&&(r=g());let o=v?v[r]:r,i=t?p():null,a=document.documentElement;if("class"===m?(a.classList.remove(...b),o&&a.classList.add(o)):o?a.setAttribute(m,o):a.removeAttribute(m),c){let e=s.includes(u)?u:null,t=s.includes(r)?r:e;a.style.colorScheme=t}null==i||i()},[]),E=(0,r.useCallback)(e=>{w(e);try{localStorage.setItem(a,e)}catch(e){}},[e]),k=(0,r.useCallback)(t=>{S(g(t)),"system"===j&&n&&!e&&$("system")},[j,e]);(0,r.useEffect)(()=>{let e=window.matchMedia(o);return e.addListener(k),k(e),()=>e.removeListener(k)},[k]),(0,r.useEffect)(()=>{let e=e=>{e.key===a&&E(e.newValue||u)};return window.addEventListener("storage",e),()=>window.removeEventListener("storage",e)},[E]),(0,r.useEffect)(()=>{$(null!=e?e:j)},[e,j]);let T=(0,r.useMemo)(()=>({theme:j,setTheme:E,forcedTheme:e,resolvedTheme:"system"===j?_:j,themes:n?[...l,"system"]:l,systemTheme:n?_:void 0}),[j,E,e,_,n,l]);return r.createElement(i.Provider,{value:T},r.createElement(f,{forcedTheme:e,disableTransitionOnChange:t,enableSystem:n,enableColorScheme:c,storageKey:a,themes:l,defaultTheme:u,attribute:m,value:v,children:y,attrs:b,nonce:x}),y)},f=(0,r.memo)(({forcedTheme:e,storageKey:t,attribute:n,enableSystem:c,enableColorScheme:i,defaultTheme:a,value:l,attrs:u,nonce:d})=>{let m="system"===a,f="class"===n?`var d=document.documentElement,c=d.classList;c.remove(${u.map(e=>`'${e}'`).join(",")});`:`var d=document.documentElement,n='${n}',s='setAttribute';`,h=i?s.includes(a)&&a?`if(e==='light'||e==='dark'||!e)d.style.colorScheme=e||'${a}'`:"if(e==='light'||e==='dark')d.style.colorScheme=e":"",p=(e,t=!1,r=!0)=>{let o=l?l[e]:e,c=t?e+"|| ''":`'${o}'`,a="";return i&&r&&!t&&s.includes(e)&&(a+=`d.style.colorScheme = '${e}';`),"class"===n?a+=t||o?`c.add(${c})`:"null":o&&(a+=`d[s](n,${c})`),a},g=e?`!function(){${f}${p(e)}}()`:c?`!function(){try{${f}var e=localStorage.getItem('${t}');if('system'===e||(!e&&${m})){var t='${o}',m=window.matchMedia(t);if(m.media!==t||m.matches){${p("dark")}}else{${p("light")}}}else if(e){${l?`var x=${JSON.stringify(l)};`:""}${p(l?"x[e]":"e",!0)}}${m?"":"else{"+p(a,!1,!1)+"}"}${h}}catch(e){}}()`:`!function(){try{${f}var e=localStorage.getItem('${t}');if(e){${l?`var x=${JSON.stringify(l)};`:""}${p(l?"x[e]":"e",!0)}}else{${p(a,!1,!1)};}${h}}catch(t){}}();`;return r.createElement("script",{nonce:d,dangerouslySetInnerHTML:{__html:g}})},()=>!0),h=(e,t)=>{let n;if(!c){try{n=localStorage.getItem(e)||void 0}catch(e){}return n||t}},p=()=>{let e=document.createElement("style");return e.appendChild(document.createTextNode("*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}")),document.head.appendChild(e),()=>{window.getComputedStyle(document.body),setTimeout(()=>{document.head.removeChild(e)},1)}},g=e=>(e||(e=window.matchMedia(o)),e.matches?"dark":"light")},8826:function(e,t,n){Promise.resolve().then(n.bind(n,9038))},9038:function(e,t,n){"use strict";n.r(t),n.d(t,{Mdx:function(){return g}});var r=n(7437),s=n(2265),o=n(1433),c=n(6173),i=n(4887),a=n(4472);let l=(e,t={})=>{let n={React:s,ReactDOM:i,_jsx_runtime:a.i,...t};return Function(...Object.keys(n),e)(...Object.values(n)).default},u=(e,t={})=>s.useMemo(()=>l(e,t),[e,t]);var d=n(290);n(6958),n(2981);var m=n(4033),f=n(3311),h=n(6435);n(6502),n(177);let p={Figma:function(e){let{caption:t,node:n,height:s}=e,o=(0,m.usePathname)(),c=f.DD.find(e=>e.url_path===o),i=null==c?void 0:c.figma_svgs.find(e=>e.node===n);return(0,r.jsx)(d.Z,{caption:t,height:s,content:null==i?void 0:i.svg})},FigmaProto:function(e){let{file:t,caption:n,node:o,scale:c,height:i}=e,[a,l]=(0,s.useState)(!0);return(0,r.jsxs)("figure",{className:a?"loading":"",children:[(0,r.jsx)("iframe",{src:"https://www.figma.com/embed?embed_host=share&url=https://www.figma.com/proto/".concat(t,"/Embed?type=design&scaling=min-zoom&node-id=").concat(o,"&mode=design&hide-ui=1"),onLoad:()=>{l(!1)},height:i}),(0,r.jsx)("figcaption",{children:n})]})},Image:function(e){let{alt:t,dark:n,caption:o,...c}=e,{theme:i}=(0,h.F)(),[a,l]=(0,s.useState)(!1);return((0,s.useEffect)(()=>{l(!0)},[]),a)?(0,r.jsxs)("figure",{children:[(0,r.jsxs)("picture",{children:["dark"===i&&(0,r.jsx)("source",{srcSet:n,media:"(prefers-color-scheme: dark)"}),(0,r.jsx)("img",{alt:t,...c})]}),o&&(0,r.jsx)("figcaption",{dangerouslySetInnerHTML:{__html:o}})]}):null},Playground:function(e){let t=(0,s.useRef)(null),n=(0,s.useRef)(null);return(0,s.useEffect)(()=>{n.current&&t.current&&(n.current.project=t.current)},[]),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("playground-project",{id:"story-project",ref:t,"project-src":"/stories/".concat(e.component,"/project.json")}),(0,r.jsx)("playground-preview",{ref:n})]})},Row:function(e){let{children:t}=e;return(0,r.jsx)("div",{className:"row",children:t})},Col:function(e){let{children:t}=e;return(0,r.jsx)("div",{className:"col",children:t})},Do:function(e){let{children:t}=e;return(0,r.jsxs)("div",{className:"card do",children:[t,(0,r.jsxs)("span",{children:[(0,r.jsx)("svg",{viewBox:"0 0 24 24",children:(0,r.jsx)("polyline",{points:"20 6 9 17 4 12"})}),"DO"]})]})},Dont:function(e){let{children:t}=e;return(0,r.jsxs)("div",{className:"card dont",children:[t,(0,r.jsxs)("span",{children:[(0,r.jsxs)("svg",{viewBox:"0 0 24 24",children:[(0,r.jsx)("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),(0,r.jsx)("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]}),"DON'T"]})]})},Refs:function(){return(0,r.jsx)("div",{children:"Refs"})},SE:function(e){let{children:t}=e;return(0,r.jsx)("span",{lang:"se",children:t})},Pattern:d.Z,Spacer:c.Z,Grid:o.default};function g(e){let{code:t,globals:n}=e,s=u(t,n);return(0,r.jsx)(s,{components:p})}},290:function(e,t,n){"use strict";n.d(t,{Z:function(){return o}});var r=n(7437),s=n(2265);function o(e){let{children:t,caption:n,height:o,content:c}=e,i=o?{"--gds-pattern-max-height":"".concat(o,"px")}:{},a=(0,s.useRef)(null);return(0,s.useEffect)(()=>{o&&a.current&&a.current.classList.add("custom")},[o]),(0,r.jsxs)("div",{children:[c?(0,r.jsx)("figure",{ref:a,className:"preview","data-caption":n,style:i,dangerouslySetInnerHTML:{__html:c}}):(0,r.jsx)("figure",{ref:a,className:"preview","data-caption":n,style:i,children:t}),n&&(0,r.jsx)("span",{dangerouslySetInnerHTML:{__html:n}})]})}n(9027)},6173:function(e,t,n){"use strict";n.d(t,{Z:function(){return s}});var r=n(7437);function s(e){let{size:t,decorated:n}=e,s="gds-spacer";return t&&(s+=" gds-spacer-".concat(t)),n&&(s+=" gds-spacer-decorator"),(0,r.jsx)("div",{className:s,children:n&&(0,r.jsx)("hr",{})})}n(1873)},6958:function(){},2981:function(){},6502:function(){},177:function(){},9027:function(){},1873:function(){},622:function(e,t,n){"use strict";var r=n(2265),s=Symbol.for("react.element"),o=Symbol.for("react.fragment"),c=Object.prototype.hasOwnProperty,i=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,a={key:!0,ref:!0,__self:!0,__source:!0};function l(e,t,n){var r,o={},l=null,u=null;for(r in void 0!==n&&(l=""+n),void 0!==t.key&&(l=""+t.key),void 0!==t.ref&&(u=t.ref),t)c.call(t,r)&&!a.hasOwnProperty(r)&&(o[r]=t[r]);if(e&&e.defaultProps)for(r in t=e.defaultProps)void 0===o[r]&&(o[r]=t[r]);return{$$typeof:s,type:e,key:l,ref:u,props:o,_owner:i.current}}t.Fragment=o,t.jsx=l,t.jsxs=l},7437:function(e,t,n){"use strict";e.exports=n(622)},4033:function(e,t,n){e.exports=n(5313)},4472:function(e,t,n){let r=n(7437);e.exports.i=r}},function(e){e.O(0,[746,971,938,744],function(){return e(e.s=8826)}),_N_E=e.O()}]);
\ No newline at end of file
diff --git a/_next/static/chunks/app/component/[slug]/design/page-31f294e3b29447fb.js b/_next/static/chunks/app/component/[slug]/design/page-31f294e3b29447fb.js
new file mode 100644
index 00000000..531c2805
--- /dev/null
+++ b/_next/static/chunks/app/component/[slug]/design/page-31f294e3b29447fb.js
@@ -0,0 +1 @@
+(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[564,550,826,102],{7561:function(){},6435:function(e,t,n){"use strict";n.d(t,{F:function(){return l},f:function(){return u}});var r=n(2265);let s=["light","dark"],o="(prefers-color-scheme: dark)",c="undefined"==typeof window,i=(0,r.createContext)(void 0),a={setTheme:e=>{},themes:[]},l=()=>{var e;return null!==(e=(0,r.useContext)(i))&&void 0!==e?e:a},u=e=>(0,r.useContext)(i)?r.createElement(r.Fragment,null,e.children):r.createElement(m,e),d=["light","dark"],m=({forcedTheme:e,disableTransitionOnChange:t=!1,enableSystem:n=!0,enableColorScheme:c=!0,storageKey:a="theme",themes:l=d,defaultTheme:u=n?"system":"light",attribute:m="data-theme",value:v,children:y,nonce:x})=>{let[j,w]=(0,r.useState)(()=>h(a,u)),[_,S]=(0,r.useState)(()=>h(a)),b=v?Object.values(v):l,$=(0,r.useCallback)(e=>{let r=e;if(!r)return;"system"===e&&n&&(r=g());let o=v?v[r]:r,i=t?p():null,a=document.documentElement;if("class"===m?(a.classList.remove(...b),o&&a.classList.add(o)):o?a.setAttribute(m,o):a.removeAttribute(m),c){let e=s.includes(u)?u:null,t=s.includes(r)?r:e;a.style.colorScheme=t}null==i||i()},[]),E=(0,r.useCallback)(e=>{w(e);try{localStorage.setItem(a,e)}catch(e){}},[e]),k=(0,r.useCallback)(t=>{S(g(t)),"system"===j&&n&&!e&&$("system")},[j,e]);(0,r.useEffect)(()=>{let e=window.matchMedia(o);return e.addListener(k),k(e),()=>e.removeListener(k)},[k]),(0,r.useEffect)(()=>{let e=e=>{e.key===a&&E(e.newValue||u)};return window.addEventListener("storage",e),()=>window.removeEventListener("storage",e)},[E]),(0,r.useEffect)(()=>{$(null!=e?e:j)},[e,j]);let T=(0,r.useMemo)(()=>({theme:j,setTheme:E,forcedTheme:e,resolvedTheme:"system"===j?_:j,themes:n?[...l,"system"]:l,systemTheme:n?_:void 0}),[j,E,e,_,n,l]);return r.createElement(i.Provider,{value:T},r.createElement(f,{forcedTheme:e,disableTransitionOnChange:t,enableSystem:n,enableColorScheme:c,storageKey:a,themes:l,defaultTheme:u,attribute:m,value:v,children:y,attrs:b,nonce:x}),y)},f=(0,r.memo)(({forcedTheme:e,storageKey:t,attribute:n,enableSystem:c,enableColorScheme:i,defaultTheme:a,value:l,attrs:u,nonce:d})=>{let m="system"===a,f="class"===n?`var d=document.documentElement,c=d.classList;c.remove(${u.map(e=>`'${e}'`).join(",")});`:`var d=document.documentElement,n='${n}',s='setAttribute';`,h=i?s.includes(a)&&a?`if(e==='light'||e==='dark'||!e)d.style.colorScheme=e||'${a}'`:"if(e==='light'||e==='dark')d.style.colorScheme=e":"",p=(e,t=!1,r=!0)=>{let o=l?l[e]:e,c=t?e+"|| ''":`'${o}'`,a="";return i&&r&&!t&&s.includes(e)&&(a+=`d.style.colorScheme = '${e}';`),"class"===n?a+=t||o?`c.add(${c})`:"null":o&&(a+=`d[s](n,${c})`),a},g=e?`!function(){${f}${p(e)}}()`:c?`!function(){try{${f}var e=localStorage.getItem('${t}');if('system'===e||(!e&&${m})){var t='${o}',m=window.matchMedia(t);if(m.media!==t||m.matches){${p("dark")}}else{${p("light")}}}else if(e){${l?`var x=${JSON.stringify(l)};`:""}${p(l?"x[e]":"e",!0)}}${m?"":"else{"+p(a,!1,!1)+"}"}${h}}catch(e){}}()`:`!function(){try{${f}var e=localStorage.getItem('${t}');if(e){${l?`var x=${JSON.stringify(l)};`:""}${p(l?"x[e]":"e",!0)}}else{${p(a,!1,!1)};}${h}}catch(t){}}();`;return r.createElement("script",{nonce:d,dangerouslySetInnerHTML:{__html:g}})},()=>!0),h=(e,t)=>{let n;if(!c){try{n=localStorage.getItem(e)||void 0}catch(e){}return n||t}},p=()=>{let e=document.createElement("style");return e.appendChild(document.createTextNode("*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}")),document.head.appendChild(e),()=>{window.getComputedStyle(document.body),setTimeout(()=>{document.head.removeChild(e)},1)}},g=e=>(e||(e=window.matchMedia(o)),e.matches?"dark":"light")},8826:function(e,t,n){Promise.resolve().then(n.bind(n,9038))},9038:function(e,t,n){"use strict";n.r(t),n.d(t,{Mdx:function(){return g}});var r=n(7437),s=n(2265),o=n(1433),c=n(6173),i=n(4887),a=n(4472);let l=(e,t={})=>{let n={React:s,ReactDOM:i,_jsx_runtime:a.i,...t};return Function(...Object.keys(n),e)(...Object.values(n)).default},u=(e,t={})=>s.useMemo(()=>l(e,t),[e,t]);var d=n(290);n(6958),n(2981);var m=n(4033),f=n(3311),h=n(6435);n(6502),n(177);let p={Figma:function(e){let{caption:t,node:n,height:s}=e,o=(0,m.usePathname)(),c=f.DD.find(e=>e.url_path===o),i=null==c?void 0:c.figma_svgs.find(e=>e.node===n);return(0,r.jsx)(d.Z,{caption:t,height:s,content:null==i?void 0:i.svg})},FigmaProto:function(e){let{file:t,caption:n,node:o,scale:c,height:i}=e,[a,l]=(0,s.useState)(!0);return(0,r.jsxs)("figure",{className:a?"loading":"",children:[(0,r.jsx)("iframe",{src:"https://www.figma.com/embed?embed_host=share&url=https://www.figma.com/proto/".concat(t,"/Embed?type=design&scaling=min-zoom&node-id=").concat(o,"&mode=design&hide-ui=1"),onLoad:()=>{l(!1)},height:i}),(0,r.jsx)("figcaption",{children:n})]})},Image:function(e){let{alt:t,dark:n,caption:o,...c}=e,{theme:i}=(0,h.F)(),[a,l]=(0,s.useState)(!1);return((0,s.useEffect)(()=>{l(!0)},[]),a)?(0,r.jsxs)("figure",{children:[(0,r.jsxs)("picture",{children:["dark"===i&&(0,r.jsx)("source",{srcSet:n,media:"(prefers-color-scheme: dark)"}),(0,r.jsx)("img",{alt:t,...c})]}),o&&(0,r.jsx)("figcaption",{dangerouslySetInnerHTML:{__html:o}})]}):null},Playground:function(e){let t=(0,s.useRef)(null),n=(0,s.useRef)(null);return(0,s.useEffect)(()=>{n.current&&t.current&&(n.current.project=t.current)},[]),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("playground-project",{id:"story-project",ref:t,"project-src":"/stories/".concat(e.component,"/project.json")}),(0,r.jsx)("playground-preview",{ref:n})]})},Row:function(e){let{children:t}=e;return(0,r.jsx)("div",{className:"row",children:t})},Col:function(e){let{children:t}=e;return(0,r.jsx)("div",{className:"col",children:t})},Do:function(e){let{children:t}=e;return(0,r.jsxs)("div",{className:"card do",children:[t,(0,r.jsxs)("span",{children:[(0,r.jsx)("svg",{viewBox:"0 0 24 24",children:(0,r.jsx)("polyline",{points:"20 6 9 17 4 12"})}),"DO"]})]})},Dont:function(e){let{children:t}=e;return(0,r.jsxs)("div",{className:"card dont",children:[t,(0,r.jsxs)("span",{children:[(0,r.jsxs)("svg",{viewBox:"0 0 24 24",children:[(0,r.jsx)("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),(0,r.jsx)("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]}),"DON'T"]})]})},Refs:function(){return(0,r.jsx)("div",{children:"Refs"})},SE:function(e){let{children:t}=e;return(0,r.jsx)("span",{lang:"se",children:t})},Pattern:d.Z,Spacer:c.Z,Grid:o.default};function g(e){let{code:t,globals:n}=e,s=u(t,n);return(0,r.jsx)(s,{components:p})}},290:function(e,t,n){"use strict";n.d(t,{Z:function(){return o}});var r=n(7437),s=n(2265);function o(e){let{children:t,caption:n,height:o,content:c}=e,i=o?{"--gds-pattern-max-height":"".concat(o,"px")}:{},a=(0,s.useRef)(null);return(0,s.useEffect)(()=>{o&&a.current&&a.current.classList.add("custom")},[o]),(0,r.jsxs)("div",{children:[c?(0,r.jsx)("figure",{ref:a,className:"preview","data-caption":n,style:i,dangerouslySetInnerHTML:{__html:c}}):(0,r.jsx)("figure",{ref:a,className:"preview","data-caption":n,style:i,children:t}),n&&(0,r.jsx)("span",{dangerouslySetInnerHTML:{__html:n}})]})}n(9027)},6173:function(e,t,n){"use strict";n.d(t,{Z:function(){return s}});var r=n(7437);function s(e){let{size:t,decorated:n}=e,s="gds-spacer";return t&&(s+=" gds-spacer-".concat(t)),n&&(s+=" gds-spacer-decorator"),(0,r.jsx)("div",{className:s,children:n&&(0,r.jsx)("hr",{})})}n(1873)},6958:function(){},2981:function(){},6502:function(){},177:function(){},9027:function(){},1873:function(){},622:function(e,t,n){"use strict";var r=n(2265),s=Symbol.for("react.element"),o=Symbol.for("react.fragment"),c=Object.prototype.hasOwnProperty,i=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,a={key:!0,ref:!0,__self:!0,__source:!0};function l(e,t,n){var r,o={},l=null,u=null;for(r in void 0!==n&&(l=""+n),void 0!==t.key&&(l=""+t.key),void 0!==t.ref&&(u=t.ref),t)c.call(t,r)&&!a.hasOwnProperty(r)&&(o[r]=t[r]);if(e&&e.defaultProps)for(r in t=e.defaultProps)void 0===o[r]&&(o[r]=t[r]);return{$$typeof:s,type:e,key:l,ref:u,props:o,_owner:i.current}}t.Fragment=o,t.jsx=l,t.jsxs=l},7437:function(e,t,n){"use strict";e.exports=n(622)},4033:function(e,t,n){e.exports=n(5313)},4472:function(e,t,n){let r=n(7437);e.exports.i=r}},function(e){e.O(0,[746,971,938,744],function(){return e(e.s=8826)}),_N_E=e.O()}]);
\ No newline at end of file
diff --git a/_next/static/chunks/app/component/[slug]/layout-fe88189729dfe5a6.js b/_next/static/chunks/app/component/[slug]/layout-fe88189729dfe5a6.js
new file mode 100644
index 00000000..0f560961
--- /dev/null
+++ b/_next/static/chunks/app/component/[slug]/layout-fe88189729dfe5a6.js
@@ -0,0 +1 @@
+(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[162],{1097:function(e,s,l){Promise.resolve().then(l.bind(l,5006))},5006:function(e,s,l){"use strict";l.r(s),l.d(s,{default:function(){return N}});var n=l(7437),t=l(4033);function a(e){let{label:s="Label",title:l}=e;return(0,n.jsxs)("div",{className:"gds-badge",children:[(0,n.jsx)("div",{className:"gds-badge-title",children:l}),(0,n.jsx)("span",{className:"gds-badge-label",children:s})]})}l(1271);var c=l(8098),i=l(1683),r=l(1433),d=l(290);l(9472);var o=l(2265),u=l(1396),h=l.n(u);function x(e){let{component:s}=e,l=(0,t.usePathname)();return(0,n.jsx)("div",{className:"taber",children:[{path:"",label:"Overview"},{path:"/design",label:"Design"},{path:"/ux-text",label:"UX text"},{path:"/code",label:"Code"},{path:"/accessibility",label:"Accessibility"}].map(e=>{let{path:t,label:a}=e;return(0,n.jsx)(h(),{href:s+t,className:l===s+t?"active":"",children:a},t)})})}function g(){return(0,n.jsx)("div",{className:"gds-tag gds-tags-more",children:(0,n.jsxs)("svg",{viewBox:"0 0 24 24",children:[(0,n.jsx)("circle",{cx:"12",cy:"12",r:"1"}),(0,n.jsx)("circle",{cx:"19",cy:"12",r:"1"}),(0,n.jsx)("circle",{cx:"5",cy:"12",r:"1"})]})})}l(4590);var f=e=>{let{tags:s,title:l,max:t=3}=e,a=Math.max(0,s.length-t);return(0,n.jsxs)("menu",{className:"gds-tags",children:[(0,n.jsx)("div",{className:"tags-title",children:l}),(0,n.jsxs)("ul",{children:[s.slice(0,t).map((e,s)=>(0,n.jsx)("div",{className:"gds-tag",children:e},e)),a>0&&(0,n.jsx)(g,{})]})]})},p=l(9162);l(7038);var m=e=>{let{home:s,separator:l,activeClass:a}=e,c=(0,t.usePathname)(),i=c.split("/").filter(e=>e);return(0,n.jsx)("div",{className:"trail",children:(0,n.jsxs)("ul",{children:[(0,n.jsx)("li",{children:(0,n.jsx)(h(),{href:"/",children:s})}),i.length>0&&l,i.map((e,s)=>{let t="/".concat(i.slice(0,s+1).join("/")),r=c===t?" ".concat(a):e[0].toUpperCase()+e.slice(1,e.length);return(0,n.jsxs)(o.Fragment,{children:[(0,n.jsx)("li",{className:r,children:(0,n.jsx)(h(),{href:t,children:e})}),i.length!==s+1&&l]},s)})]})})},j=l(9323),v=l(3311),b=l(8022),y=l(4493);function N(e){var s;let{children:l,params:o}=e,{slug:u}=o,h=(0,t.usePathname)(),g=e=>v.DD.find(s=>s.url_path==="/component/".concat(u).concat(e)),N=g(""),k=g("/accessibility"),w=g("/code"),_=g("/design"),L=g("/ux-text");N||(0,t.notFound)();let{title:Z,url_path:H,tags:E,status:C,global_id:I,last_edited:B,summary:T,figma_hero_svg:O,preview:S}=N,A=(0,n.jsx)(p.Z,{headings:null==N?void 0:N.headings,component:Z});for(let{path:e,component:s}of[{path:"/accessibility",component:k},{path:"/code",component:w},{path:"/design",component:_},{path:"/ux-text",component:L}])if(h.includes(e)){A=(0,n.jsx)(p.Z,{headings:null==s?void 0:s.headings,component:Z});break}let M=E?E.split(", "):[];return(0,n.jsx)(j.default,{layout:"component",children:(0,n.jsxs)(r.default,{columns:1,paddingBlock:"small",paddingInline:"small",children:[(0,n.jsx)(m,{home:"Home",separator:(0,n.jsx)("span",{children:" / "}),activeClass:"active"}),(0,n.jsxs)(r.default,{columns:6,tablet:2,mobile:1,gapBlock:"small",children:[(0,n.jsx)("gds-cell",{span:"4",className:"content",children:(0,n.jsxs)(r.default,{columns:1,gapBlock:"small",children:[(0,n.jsxs)("div",{children:[(0,n.jsx)("h1",{className:"gds-fs-headline-large",children:Z}),(0,n.jsx)("p",{children:T})]}),(0,n.jsxs)(c.Z,{wrap:"wrap",gap:"small",children:[(0,n.jsx)(a,{title:"Status",label:C}),(0,n.jsx)(f,{title:"Tags",tags:M,max:3})]})]})}),(0,n.jsx)("gds-cell",{span:"2",children:(0,n.jsx)(d.Z,{children:(null!==(s=null==S?void 0:S.trim())&&void 0!==s?s:"")?(0,n.jsx)("div",{dangerouslySetInnerHTML:{__html:"".concat(S)}}):(0,n.jsx)("div",{dangerouslySetInnerHTML:{__html:O.svg}})})})]}),(0,n.jsx)(x,{component:H}),(0,n.jsxs)(r.default,{columns:12,gapInline:"small",paddingBlock:"small",children:[(0,n.jsx)(i.Z,{span:"10",children:(0,n.jsx)("div",{className:"gds-prose",children:l})}),(0,n.jsx)(i.Z,{span:"2",children:A})]}),(0,n.jsxs)("footer",{children:["Last updated: ",(0,n.jsx)("br",{}),(0,n.jsx)("time",{dateTime:B,title:"Last updated",children:(0,b.Z)((0,y.Z)(B),"d LLL, yyyy '/' HH:mm")})]})]})},I)}},8098:function(e,s,l){"use strict";l.d(s,{Z:function(){return t}});var n=l(7437);function t(e){let{children:s,justify:l,align:t,wrap:a,direction:c,directionTablet:i,directionMobile:r,gap:d}=e,o="gds-flex";return l&&(o+=" gds-flex-justify-".concat(l)),t&&(o+=" gds-flex-align-".concat(t)),a&&(o+=" gds-flex-wrap-".concat(a)),c&&(o+=" gds-flex-direction-".concat(c)),d&&(o+=" gds-flex-gap-".concat(d)),(0,n.jsx)("div",{className:o,children:s})}l(2265),l(5445)},1683:function(e,s,l){"use strict";l.d(s,{Z:function(){return t}});var n=l(7437);function t(e){let{children:s,...l}=e;return(0,n.jsx)("gds-cell",{...l,children:s})}l(2265)},290:function(e,s,l){"use strict";l.d(s,{Z:function(){return a}});var n=l(7437),t=l(2265);function a(e){let{children:s,caption:l,height:a,content:c}=e,i=a?{"--gds-pattern-max-height":"".concat(a,"px")}:{},r=(0,t.useRef)(null);return(0,t.useEffect)(()=>{a&&r.current&&r.current.classList.add("custom")},[a]),(0,n.jsxs)("div",{children:[c?(0,n.jsx)("figure",{ref:r,className:"preview","data-caption":l,style:i,dangerouslySetInnerHTML:{__html:c}}):(0,n.jsx)("figure",{ref:r,className:"preview","data-caption":l,style:i,children:s}),l&&(0,n.jsx)("span",{dangerouslySetInnerHTML:{__html:l}})]})}l(9027)},9162:function(e,s,l){"use strict";var n=l(7437),t=l(2265),a=l(1396),c=l.n(a);l(5e3);let i=()=>(0,n.jsx)("div",{className:"disclosure","aria-label":"Expand",tabIndex:0,children:(0,n.jsx)("svg",{viewBox:"0 0 24 24",children:(0,n.jsx)("polyline",{points:"6 9 12 15 18 9"})})});s.Z=e=>{let{headings:s,component:l}=e,[a,r]=(0,t.useState)("");(0,t.useRef)(null),(0,t.useEffect)(()=>{let e=()=>{let e=window.scrollY;for(let l=s.length-1;l>=0;l--){let n=s[l],t=document.getElementById(n.slug);if(t&&t.offsetTop<=e+161){r(n.slug);break}}};return window.addEventListener("scroll",e),()=>window.removeEventListener("scroll",e)},[s]);let d=e=>{r(e)},o=s.reduce((e,l)=>{if(l.level>2){let s=e[e.length-1];if(Array.isArray(s))s.push(l);else throw Error("Level 3 and 4 headings should be after a level 2 heading.")}else if(2===l.level){let n=s.indexOf(l)+1;s[n]&&s[n].level>2?e.push([l]):e.push(l)}else e.push(l);return e},[]);return(0,n.jsxs)("aside",{className:"toc",children:[(0,n.jsx)("span",{children:"On this page"}),(0,n.jsxs)("nav",{"data-name":s.length>0?"On this page":"",children:[(0,n.jsx)(c(),{href:"#top","data-id":"top","data-level":"1",onClick:()=>d("top"),passHref:!0,children:l},"#top"),o.map((e,s)=>Array.isArray(e)?(0,n.jsxs)("details",{open:e.some(e=>e.slug===a),children:[(0,n.jsxs)("summary",{children:[(0,n.jsx)(c(),{href:"#".concat(e[0].slug),className:"toc-link ".concat(a===e[0].slug?"active":""),"data-id":e[0].slug,"data-level":e[0].level,onClick:()=>d(e[0].slug),passHref:!0,children:e[0].text},"#".concat(e[0].slug)),(0,n.jsx)(i,{})]}),e.slice(1).map(e=>(0,n.jsx)(c(),{href:"#".concat(e.slug),className:"toc-link ".concat(a===e.slug?"active":""),"data-id":e.slug,"data-level":e.level,onClick:()=>d(e.slug),passHref:!0,children:e.text},"#".concat(e.slug)))]},s):(0,n.jsx)(c(),{href:"#".concat(e.slug),className:"toc-link ".concat(a===e.slug?"active":""),"data-id":e.slug,"data-level":e.level,onClick:()=>d(e.slug),passHref:!0,children:e.text},"#".concat(e.slug)))]})]})}},9323:function(e,s,l){"use strict";l.r(s),l.d(s,{default:function(){return t}});var n=l(7437);function t(e){let{children:s,layout:l}=e;return(0,n.jsx)("section",{className:"layout-content ".concat("page-"+l),children:s})}l(5679)},1271:function(){},5445:function(){},9027:function(){},9472:function(){},4590:function(){},5e3:function(){},7038:function(){},5679:function(){}},function(e){e.O(0,[250,474,746,971,938,744],function(){return e(e.s=1097)}),_N_E=e.O()}]);
\ No newline at end of file
diff --git a/_next/static/chunks/app/component/[slug]/page-658edaca3febe46f.js b/_next/static/chunks/app/component/[slug]/page-658edaca3febe46f.js
new file mode 100644
index 00000000..42d95fb3
--- /dev/null
+++ b/_next/static/chunks/app/component/[slug]/page-658edaca3febe46f.js
@@ -0,0 +1 @@
+(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[985],{2195:function(e,n,t){Promise.resolve().then(t.t.bind(t,2946,23)),Promise.resolve().then(t.bind(t,9038)),Promise.resolve().then(t.t.bind(t,5935,23))},9038:function(e,n,t){"use strict";t.r(n),t.d(n,{Mdx:function(){return x}});var r=t(7437),s=t(2265),c=t(1433),i=t(6173),o=t(4887),u=t(4472);let l=(e,n={})=>{let t={React:s,ReactDOM:o,_jsx_runtime:u.i,...n};return Function(...Object.keys(t),e)(...Object.values(t)).default},a=(e,n={})=>s.useMemo(()=>l(e,n),[e,n]);var f=t(290);t(6958),t(2981);var d=t(4033),p=t(3311),m=t(6435);t(6502),t(177);let j={Figma:function(e){let{caption:n,node:t,height:s}=e,c=(0,d.usePathname)(),i=p.DD.find(e=>e.url_path===c),o=null==i?void 0:i.figma_svgs.find(e=>e.node===t);return(0,r.jsx)(f.Z,{caption:n,height:s,content:null==o?void 0:o.svg})},FigmaProto:function(e){let{file:n,caption:t,node:c,scale:i,height:o}=e,[u,l]=(0,s.useState)(!0);return(0,r.jsxs)("figure",{className:u?"loading":"",children:[(0,r.jsx)("iframe",{src:"https://www.figma.com/embed?embed_host=share&url=https://www.figma.com/proto/".concat(n,"/Embed?type=design&scaling=min-zoom&node-id=").concat(c,"&mode=design&hide-ui=1"),onLoad:()=>{l(!1)},height:o}),(0,r.jsx)("figcaption",{children:t})]})},Image:function(e){let{alt:n,dark:t,caption:c,...i}=e,{theme:o}=(0,m.F)(),[u,l]=(0,s.useState)(!1);return((0,s.useEffect)(()=>{l(!0)},[]),u)?(0,r.jsxs)("figure",{children:[(0,r.jsxs)("picture",{children:["dark"===o&&(0,r.jsx)("source",{srcSet:t,media:"(prefers-color-scheme: dark)"}),(0,r.jsx)("img",{alt:n,...i})]}),c&&(0,r.jsx)("figcaption",{dangerouslySetInnerHTML:{__html:c}})]}):null},Playground:function(e){let n=(0,s.useRef)(null),t=(0,s.useRef)(null);return(0,s.useEffect)(()=>{t.current&&n.current&&(t.current.project=n.current)},[]),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("playground-project",{id:"story-project",ref:n,"project-src":"/stories/".concat(e.component,"/project.json")}),(0,r.jsx)("playground-preview",{ref:t})]})},Row:function(e){let{children:n}=e;return(0,r.jsx)("div",{className:"row",children:n})},Col:function(e){let{children:n}=e;return(0,r.jsx)("div",{className:"col",children:n})},Do:function(e){let{children:n}=e;return(0,r.jsxs)("div",{className:"card do",children:[n,(0,r.jsxs)("span",{children:[(0,r.jsx)("svg",{viewBox:"0 0 24 24",children:(0,r.jsx)("polyline",{points:"20 6 9 17 4 12"})}),"DO"]})]})},Dont:function(e){let{children:n}=e;return(0,r.jsxs)("div",{className:"card dont",children:[n,(0,r.jsxs)("span",{children:[(0,r.jsxs)("svg",{viewBox:"0 0 24 24",children:[(0,r.jsx)("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),(0,r.jsx)("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]}),"DON'T"]})]})},Refs:function(){return(0,r.jsx)("div",{children:"Refs"})},SE:function(e){let{children:n}=e;return(0,r.jsx)("span",{lang:"se",children:n})},Pattern:f.Z,Spacer:i.Z,Grid:c.default};function x(e){let{code:n,globals:t}=e,s=a(n,t);return(0,r.jsx)(s,{components:j})}},290:function(e,n,t){"use strict";t.d(n,{Z:function(){return c}});var r=t(7437),s=t(2265);function c(e){let{children:n,caption:t,height:c,content:i}=e,o=c?{"--gds-pattern-max-height":"".concat(c,"px")}:{},u=(0,s.useRef)(null);return(0,s.useEffect)(()=>{c&&u.current&&u.current.classList.add("custom")},[c]),(0,r.jsxs)("div",{children:[i?(0,r.jsx)("figure",{ref:u,className:"preview","data-caption":t,style:o,dangerouslySetInnerHTML:{__html:i}}):(0,r.jsx)("figure",{ref:u,className:"preview","data-caption":t,style:o,children:n}),t&&(0,r.jsx)("span",{dangerouslySetInnerHTML:{__html:t}})]})}t(9027)},6173:function(e,n,t){"use strict";t.d(n,{Z:function(){return s}});var r=t(7437);function s(e){let{size:n,decorated:t}=e,s="gds-spacer";return n&&(s+=" gds-spacer-".concat(n)),t&&(s+=" gds-spacer-decorator"),(0,r.jsx)("div",{className:s,children:t&&(0,r.jsx)("hr",{})})}t(1873)},2185:function(e,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),function(e,n){for(var t in n)Object.defineProperty(e,t,{enumerable:!0,get:n[t]})}(n,{requestIdleCallback:function(){return t},cancelIdleCallback:function(){return r}});let t="undefined"!=typeof self&&self.requestIdleCallback&&self.requestIdleCallback.bind(window)||function(e){let n=Date.now();return self.setTimeout(function(){e({didTimeout:!1,timeRemaining:function(){return Math.max(0,50-(Date.now()-n))}})},1)},r="undefined"!=typeof self&&self.cancelIdleCallback&&self.cancelIdleCallback.bind(window)||function(e){return clearTimeout(e)};("function"==typeof n.default||"object"==typeof n.default&&null!==n.default)&&void 0===n.default.__esModule&&(Object.defineProperty(n.default,"__esModule",{value:!0}),Object.assign(n.default,n),e.exports=n.default)},2946:function(){},6958:function(){},2981:function(){},6502:function(){},177:function(){},9027:function(){},1873:function(){},622:function(e,n,t){"use strict";var r=t(2265),s=Symbol.for("react.element"),c=Symbol.for("react.fragment"),i=Object.prototype.hasOwnProperty,o=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,u={key:!0,ref:!0,__self:!0,__source:!0};function l(e,n,t){var r,c={},l=null,a=null;for(r in void 0!==t&&(l=""+t),void 0!==n.key&&(l=""+n.key),void 0!==n.ref&&(a=n.ref),n)i.call(n,r)&&!u.hasOwnProperty(r)&&(c[r]=n[r]);if(e&&e.defaultProps)for(r in n=e.defaultProps)void 0===c[r]&&(c[r]=n[r]);return{$$typeof:s,type:e,key:l,ref:a,props:c,_owner:o.current}}n.Fragment=c,n.jsx=l,n.jsxs=l},7437:function(e,n,t){"use strict";e.exports=t(622)},4472:function(e,n,t){let r=t(7437);e.exports.i=r}},function(e){e.O(0,[214,746,971,938,744],function(){return e(e.s=2195)}),_N_E=e.O()}]);
\ No newline at end of file
diff --git a/_next/static/chunks/app/component/[slug]/ux-text/page-5e9d2b6ba94f2c37.js b/_next/static/chunks/app/component/[slug]/ux-text/page-5e9d2b6ba94f2c37.js
new file mode 100644
index 00000000..5c0d1fe9
--- /dev/null
+++ b/_next/static/chunks/app/component/[slug]/ux-text/page-5e9d2b6ba94f2c37.js
@@ -0,0 +1 @@
+(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[550,564,826,102],{7561:function(){},6435:function(e,t,n){"use strict";n.d(t,{F:function(){return l},f:function(){return u}});var r=n(2265);let s=["light","dark"],o="(prefers-color-scheme: dark)",c="undefined"==typeof window,i=(0,r.createContext)(void 0),a={setTheme:e=>{},themes:[]},l=()=>{var e;return null!==(e=(0,r.useContext)(i))&&void 0!==e?e:a},u=e=>(0,r.useContext)(i)?r.createElement(r.Fragment,null,e.children):r.createElement(m,e),d=["light","dark"],m=({forcedTheme:e,disableTransitionOnChange:t=!1,enableSystem:n=!0,enableColorScheme:c=!0,storageKey:a="theme",themes:l=d,defaultTheme:u=n?"system":"light",attribute:m="data-theme",value:v,children:y,nonce:x})=>{let[j,w]=(0,r.useState)(()=>h(a,u)),[_,S]=(0,r.useState)(()=>h(a)),b=v?Object.values(v):l,$=(0,r.useCallback)(e=>{let r=e;if(!r)return;"system"===e&&n&&(r=g());let o=v?v[r]:r,i=t?p():null,a=document.documentElement;if("class"===m?(a.classList.remove(...b),o&&a.classList.add(o)):o?a.setAttribute(m,o):a.removeAttribute(m),c){let e=s.includes(u)?u:null,t=s.includes(r)?r:e;a.style.colorScheme=t}null==i||i()},[]),E=(0,r.useCallback)(e=>{w(e);try{localStorage.setItem(a,e)}catch(e){}},[e]),k=(0,r.useCallback)(t=>{S(g(t)),"system"===j&&n&&!e&&$("system")},[j,e]);(0,r.useEffect)(()=>{let e=window.matchMedia(o);return e.addListener(k),k(e),()=>e.removeListener(k)},[k]),(0,r.useEffect)(()=>{let e=e=>{e.key===a&&E(e.newValue||u)};return window.addEventListener("storage",e),()=>window.removeEventListener("storage",e)},[E]),(0,r.useEffect)(()=>{$(null!=e?e:j)},[e,j]);let T=(0,r.useMemo)(()=>({theme:j,setTheme:E,forcedTheme:e,resolvedTheme:"system"===j?_:j,themes:n?[...l,"system"]:l,systemTheme:n?_:void 0}),[j,E,e,_,n,l]);return r.createElement(i.Provider,{value:T},r.createElement(f,{forcedTheme:e,disableTransitionOnChange:t,enableSystem:n,enableColorScheme:c,storageKey:a,themes:l,defaultTheme:u,attribute:m,value:v,children:y,attrs:b,nonce:x}),y)},f=(0,r.memo)(({forcedTheme:e,storageKey:t,attribute:n,enableSystem:c,enableColorScheme:i,defaultTheme:a,value:l,attrs:u,nonce:d})=>{let m="system"===a,f="class"===n?`var d=document.documentElement,c=d.classList;c.remove(${u.map(e=>`'${e}'`).join(",")});`:`var d=document.documentElement,n='${n}',s='setAttribute';`,h=i?s.includes(a)&&a?`if(e==='light'||e==='dark'||!e)d.style.colorScheme=e||'${a}'`:"if(e==='light'||e==='dark')d.style.colorScheme=e":"",p=(e,t=!1,r=!0)=>{let o=l?l[e]:e,c=t?e+"|| ''":`'${o}'`,a="";return i&&r&&!t&&s.includes(e)&&(a+=`d.style.colorScheme = '${e}';`),"class"===n?a+=t||o?`c.add(${c})`:"null":o&&(a+=`d[s](n,${c})`),a},g=e?`!function(){${f}${p(e)}}()`:c?`!function(){try{${f}var e=localStorage.getItem('${t}');if('system'===e||(!e&&${m})){var t='${o}',m=window.matchMedia(t);if(m.media!==t||m.matches){${p("dark")}}else{${p("light")}}}else if(e){${l?`var x=${JSON.stringify(l)};`:""}${p(l?"x[e]":"e",!0)}}${m?"":"else{"+p(a,!1,!1)+"}"}${h}}catch(e){}}()`:`!function(){try{${f}var e=localStorage.getItem('${t}');if(e){${l?`var x=${JSON.stringify(l)};`:""}${p(l?"x[e]":"e",!0)}}else{${p(a,!1,!1)};}${h}}catch(t){}}();`;return r.createElement("script",{nonce:d,dangerouslySetInnerHTML:{__html:g}})},()=>!0),h=(e,t)=>{let n;if(!c){try{n=localStorage.getItem(e)||void 0}catch(e){}return n||t}},p=()=>{let e=document.createElement("style");return e.appendChild(document.createTextNode("*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}")),document.head.appendChild(e),()=>{window.getComputedStyle(document.body),setTimeout(()=>{document.head.removeChild(e)},1)}},g=e=>(e||(e=window.matchMedia(o)),e.matches?"dark":"light")},8826:function(e,t,n){Promise.resolve().then(n.bind(n,9038))},9038:function(e,t,n){"use strict";n.r(t),n.d(t,{Mdx:function(){return g}});var r=n(7437),s=n(2265),o=n(1433),c=n(6173),i=n(4887),a=n(4472);let l=(e,t={})=>{let n={React:s,ReactDOM:i,_jsx_runtime:a.i,...t};return Function(...Object.keys(n),e)(...Object.values(n)).default},u=(e,t={})=>s.useMemo(()=>l(e,t),[e,t]);var d=n(290);n(6958),n(2981);var m=n(4033),f=n(3311),h=n(6435);n(6502),n(177);let p={Figma:function(e){let{caption:t,node:n,height:s}=e,o=(0,m.usePathname)(),c=f.DD.find(e=>e.url_path===o),i=null==c?void 0:c.figma_svgs.find(e=>e.node===n);return(0,r.jsx)(d.Z,{caption:t,height:s,content:null==i?void 0:i.svg})},FigmaProto:function(e){let{file:t,caption:n,node:o,scale:c,height:i}=e,[a,l]=(0,s.useState)(!0);return(0,r.jsxs)("figure",{className:a?"loading":"",children:[(0,r.jsx)("iframe",{src:"https://www.figma.com/embed?embed_host=share&url=https://www.figma.com/proto/".concat(t,"/Embed?type=design&scaling=min-zoom&node-id=").concat(o,"&mode=design&hide-ui=1"),onLoad:()=>{l(!1)},height:i}),(0,r.jsx)("figcaption",{children:n})]})},Image:function(e){let{alt:t,dark:n,caption:o,...c}=e,{theme:i}=(0,h.F)(),[a,l]=(0,s.useState)(!1);return((0,s.useEffect)(()=>{l(!0)},[]),a)?(0,r.jsxs)("figure",{children:[(0,r.jsxs)("picture",{children:["dark"===i&&(0,r.jsx)("source",{srcSet:n,media:"(prefers-color-scheme: dark)"}),(0,r.jsx)("img",{alt:t,...c})]}),o&&(0,r.jsx)("figcaption",{dangerouslySetInnerHTML:{__html:o}})]}):null},Playground:function(e){let t=(0,s.useRef)(null),n=(0,s.useRef)(null);return(0,s.useEffect)(()=>{n.current&&t.current&&(n.current.project=t.current)},[]),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("playground-project",{id:"story-project",ref:t,"project-src":"/stories/".concat(e.component,"/project.json")}),(0,r.jsx)("playground-preview",{ref:n})]})},Row:function(e){let{children:t}=e;return(0,r.jsx)("div",{className:"row",children:t})},Col:function(e){let{children:t}=e;return(0,r.jsx)("div",{className:"col",children:t})},Do:function(e){let{children:t}=e;return(0,r.jsxs)("div",{className:"card do",children:[t,(0,r.jsxs)("span",{children:[(0,r.jsx)("svg",{viewBox:"0 0 24 24",children:(0,r.jsx)("polyline",{points:"20 6 9 17 4 12"})}),"DO"]})]})},Dont:function(e){let{children:t}=e;return(0,r.jsxs)("div",{className:"card dont",children:[t,(0,r.jsxs)("span",{children:[(0,r.jsxs)("svg",{viewBox:"0 0 24 24",children:[(0,r.jsx)("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),(0,r.jsx)("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]}),"DON'T"]})]})},Refs:function(){return(0,r.jsx)("div",{children:"Refs"})},SE:function(e){let{children:t}=e;return(0,r.jsx)("span",{lang:"se",children:t})},Pattern:d.Z,Spacer:c.Z,Grid:o.default};function g(e){let{code:t,globals:n}=e,s=u(t,n);return(0,r.jsx)(s,{components:p})}},290:function(e,t,n){"use strict";n.d(t,{Z:function(){return o}});var r=n(7437),s=n(2265);function o(e){let{children:t,caption:n,height:o,content:c}=e,i=o?{"--gds-pattern-max-height":"".concat(o,"px")}:{},a=(0,s.useRef)(null);return(0,s.useEffect)(()=>{o&&a.current&&a.current.classList.add("custom")},[o]),(0,r.jsxs)("div",{children:[c?(0,r.jsx)("figure",{ref:a,className:"preview","data-caption":n,style:i,dangerouslySetInnerHTML:{__html:c}}):(0,r.jsx)("figure",{ref:a,className:"preview","data-caption":n,style:i,children:t}),n&&(0,r.jsx)("span",{dangerouslySetInnerHTML:{__html:n}})]})}n(9027)},6173:function(e,t,n){"use strict";n.d(t,{Z:function(){return s}});var r=n(7437);function s(e){let{size:t,decorated:n}=e,s="gds-spacer";return t&&(s+=" gds-spacer-".concat(t)),n&&(s+=" gds-spacer-decorator"),(0,r.jsx)("div",{className:s,children:n&&(0,r.jsx)("hr",{})})}n(1873)},6958:function(){},2981:function(){},6502:function(){},177:function(){},9027:function(){},1873:function(){},622:function(e,t,n){"use strict";var r=n(2265),s=Symbol.for("react.element"),o=Symbol.for("react.fragment"),c=Object.prototype.hasOwnProperty,i=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,a={key:!0,ref:!0,__self:!0,__source:!0};function l(e,t,n){var r,o={},l=null,u=null;for(r in void 0!==n&&(l=""+n),void 0!==t.key&&(l=""+t.key),void 0!==t.ref&&(u=t.ref),t)c.call(t,r)&&!a.hasOwnProperty(r)&&(o[r]=t[r]);if(e&&e.defaultProps)for(r in t=e.defaultProps)void 0===o[r]&&(o[r]=t[r]);return{$$typeof:s,type:e,key:l,ref:u,props:o,_owner:i.current}}t.Fragment=o,t.jsx=l,t.jsxs=l},7437:function(e,t,n){"use strict";e.exports=n(622)},4033:function(e,t,n){e.exports=n(5313)},4472:function(e,t,n){let r=n(7437);e.exports.i=r}},function(e){e.O(0,[746,971,938,744],function(){return e(e.s=8826)}),_N_E=e.O()}]);
\ No newline at end of file
diff --git a/_next/static/chunks/app/layout-86853f93f1fd61ce.js b/_next/static/chunks/app/layout-86853f93f1fd61ce.js
new file mode 100644
index 00000000..e6b3131b
--- /dev/null
+++ b/_next/static/chunks/app/layout-86853f93f1fd61ce.js
@@ -0,0 +1 @@
+(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[185],{1313:function(e,n,s){Promise.resolve().then(s.bind(s,8980))},8980:function(e,n,s){"use strict";s.r(n),s.d(n,{default:function(){return D}});var t=s(7437),i=s(2265),l=s(8475),c=s.n(l);function a(){return(0,t.jsxs)("div",{className:"alert",children:[(0,t.jsxs)("svg",{viewBox:"0 0 24 24",children:[(0,t.jsx)("circle",{cx:"12",cy:"12",r:"10"}),(0,t.jsx)("line",{x1:"12",y1:"16",x2:"12",y2:"12"}),(0,t.jsx)("line",{x1:"12",y1:"8",x2:"12.01",y2:"8"})]}),(0,t.jsx)("span",{children:"This is the staging site of seb.io, The Green Design System is work in progress and not ready to use, but feel free to explore!"})]})}s(1806);var r={current_lang:"en",autoclear_cookies:!0,page_scripts:!0,cookie_name:"GDS Cookie Consent",remove_cookie_tables:!0,onFirstAction:function(e,n){window.CookieConsentApi.allowedCategory("analytics")},onAccept:function(e){window.CookieConsentApi.allowedCategory("analytics")},onChange:function(e,n){},languages:{en:{consent_modal:{title:"We use cookies!",description:'Hi, this website uses essential cookies to ensure its proper operation and tracking cookies to understand how you interact with it. The latter will be set only after consent. ',primary_btn:{text:"Accept all",role:"accept_all"},secondary_btn:{text:"Reject all",role:"accept_necessary"}},settings_modal:{title:"Cookie Settings",save_settings_btn:"Save settings",accept_all_btn:"Accept all",reject_all_btn:"Reject all",close_btn_label:"Close",cookie_table_headers:[{col1:"Name"},{col2:"Domain"},{col3:"Expiration"},{col4:"Description"}],blocks:[{title:"Cookie usage \uD83D\uDCE2",description:"Our website utilizes analytics solely for testing purposes and to track page views. These analytics cookies are crucial for ensuring the smooth functioning of our site. Please be assured that the data collected is not used for marketing or any other purposes beyond website optimization."},{title:"Basic cookies",description:"Tracking page views and other essential functions",toggle:{value:"necessary",enabled:!0,readonly:!0}}]}}}};s(8290),s(6662);var o=()=>((0,i.useEffect)(()=>{document.getElementById("cc--main")||(window.CookieConsentApi=window.initCookieConsent(),window.CookieConsentApi.run(r))},[]),null),d=s(1396),h=s.n(d),x=s(8098),u=s(1433);function m(){let e=new Date().getFullYear(),n="".concat("\xa9"," ").concat(e," Green Design System");return(0,t.jsx)("footer",{className:"main-footer","padding-block":"large",children:(0,t.jsxs)(u.default,{columns:1,mobile:2,tablet:3,gapBlock:"large",paddingInline:"medium",children:[(0,t.jsx)("h2",{children:"Green Design System"}),(0,t.jsxs)(u.default,{columns:5,justify:"start",fluid:!0,children:[(0,t.jsx)("nav",{children:(0,t.jsx)("ul",{children:(0,t.jsxs)(u.default,{columns:1,gapBlock:"small",children:[(0,t.jsx)("li",{children:(0,t.jsx)(h(),{href:"/about",children:"About"})}),(0,t.jsx)("li",{children:(0,t.jsx)(h(),{href:"/foundation",children:"Foundation"})}),(0,t.jsx)("li",{children:(0,t.jsx)(h(),{href:"/components",children:"Components"})})]})})}),(0,t.jsx)("nav",{children:(0,t.jsx)("ul",{children:(0,t.jsxs)(u.default,{columns:1,gapBlock:"small",children:[(0,t.jsx)("li",{children:(0,t.jsx)(h(),{href:"https://github.com/sebgroup/green",children:"Github"})}),(0,t.jsx)("li",{children:(0,t.jsx)(h(),{href:"/changelog",children:"Changelog"})}),(0,t.jsx)("li",{children:(0,t.jsx)(h(),{href:"/status",children:"Status"})})]})})}),(0,t.jsx)("nav",{children:(0,t.jsx)("ul",{children:(0,t.jsxs)(u.default,{columns:1,gapBlock:"small",children:[(0,t.jsx)("li",{children:(0,t.jsx)(h(),{href:"https://sebgroup.com/",children:"SEB Group"})}),(0,t.jsx)("li",{children:(0,t.jsx)(h(),{href:"https://seb.se/",children:"SEB.se"})})]})})})]}),(0,t.jsxs)(x.Z,{justify:"between",wrap:"wrap",directionMobile:"column",children:[(0,t.jsx)("span",{children:n}),(0,t.jsx)("button",{type:"button","data-cc":"c-settings",className:"cookie-preferences",children:"Cookie preferences"})]})]})})}s(1054),s(1191);var j=s(3311),p=s(8248);s(8420);var g=s(6691),f=s.n(g);function v(e){let{isOpen:n,toggleCmd:s}=e,[l,c]=(0,i.useState)(!1),[a,r]=(0,i.useState)(j.cx),[o,d]=(0,i.useState)(-1),x=a.map(()=>i.createRef());(0,i.useEffect)(()=>{if(x[o]&&x[o].current){var e;null===(e=x[o].current)||void 0===e||e.focus()}},[o]);let u=(0,i.useRef)(null);(0,i.useEffect)(()=>{if(n){var e;null===(e=u.current)||void 0===e||e.focus()}},[n]);let m=(e,n,i)=>{let l=i?"focused":"";return"Changelog"===e.type?(0,t.jsx)(h(),{href:e.url_path,onClick:s,className:l,children:(0,t.jsxs)("div",{className:"cmdk-item-name",children:[(0,t.jsx)("span",{className:"cmdk-item-char",children:e.title.charAt(0)}),(0,t.jsx)("span",{children:e.version})]})},e.title+e.url_path):"Component"===e.type?(0,t.jsxs)(h(),{href:e.url_path,onClick:s,className:l,children:[(0,t.jsxs)("div",{className:"cmdk-item-name",children:[(0,t.jsx)("span",{className:"cmdk-item-char",children:e.title.charAt(0)}),(0,t.jsx)("span",{children:e.title})]}),(0,t.jsxs)("div",{className:"cmdk-options",children:[(0,t.jsx)("span",{children:(0,t.jsxs)("svg",{viewBox:"0 0 24 24",children:[(0,t.jsx)("path",{d:"M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z"}),(0,t.jsx)("path",{d:"M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z"}),(0,t.jsx)("path",{d:"M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z"}),(0,t.jsx)("path",{d:"M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z"}),(0,t.jsx)("path",{d:"M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z"})]})}),(0,t.jsx)("span",{children:(0,t.jsxs)("svg",{viewBox:"0 0 24 24",children:[(0,t.jsx)("polyline",{points:"16 18 22 12 16 6"}),(0,t.jsx)("polyline",{points:"8 6 2 12 8 18"})]})})]})]},e.title+e.url_path):"Post"===e.type?(0,t.jsx)(h(),{href:e.url_path,onClick:s,className:l,children:(0,t.jsxs)("div",{className:"cmdk-item-name",children:[(0,t.jsx)("span",{className:"cmdk-item-char",children:e.title.charAt(0)}),(0,t.jsx)("span",{children:e.title})]})},e.title+e.url_path):"Member"===e.type?(0,t.jsx)(h(),{href:"about"+e.url_path,onClick:s,className:l,children:(0,t.jsxs)("div",{className:"cmdk-item-name",children:[(0,t.jsx)(f(),{width:"16",height:"16",className:"cmdk-item-img",src:"https://github.com/"+e.handle.toString()+".png",alt:"Member"}),(0,t.jsx)("span",{children:e.name})]})},e.title+e.url_path):null};return(0,i.useEffect)(()=>{let e=e=>{let t=e.target,i=Array.from(document.querySelectorAll("input, textarea"));"/"===e.key&&!1===i.includes(t)||(191===e.keyCode||75===e.keyCode)&&(e.metaKey||e.ctrlKey)?(e.stopPropagation(),s()):"Escape"===e.key&&n&&(s(),r(j.cx),d(-1))},t=e=>{let t=e.target;n&&null===t.closest(".cmd main")&&s()};return document.addEventListener("keydown",e),document.addEventListener("click",t),()=>{document.removeEventListener("keydown",e),document.removeEventListener("click",t)}},[s]),(0,i.useEffect)(()=>{let e=setTimeout(()=>{n&&u.current&&u.current.focus()},300);return()=>clearTimeout(e)},[n]),(0,i.useEffect)(()=>{c(-1!==window.navigator.userAgent.indexOf("Windows"))},[]),(0,t.jsx)("div",{className:"cmd ".concat(n?"open":""),role:"dialog",children:(0,t.jsxs)("main",{children:[(0,t.jsxs)("form",{children:[(0,t.jsx)("label",{htmlFor:"search",children:(0,t.jsxs)("svg",{viewBox:"0 0 24 24",children:[(0,t.jsx)("circle",{cx:"11",cy:"11",r:"8"}),(0,t.jsx)("line",{x1:"21",y1:"21",x2:"16.65",y2:"16.65"})]})}),(0,t.jsx)("input",{ref:u,id:"search",type:"text",placeholder:l?"/ — Search components & pages":"⌘K — Search components & pages",onChange:e=>{let{value:n}=e.target;if(0===n.length){r(j.cx),d(-1);return}let s=[],t=new p.Z(j._R,{keys:["title","version"]}).search(n).map(e=>e.item);s.push(...t);let i=new p.Z(j.DD,{keys:["title","keywords"]}).search(n).map(e=>e.item).filter(e=>"index.mdx"===e._raw.sourceFileName);s.push(...i);let l=new p.Z(j.fd,{keys:["title","keywords"]}).search(n).map(e=>e.item);s.push(...l);let c=new p.Z(j.t7,{keys:["name","department"]}).search(n).map(e=>e.item);s.push(...c),r(s)}}),(0,t.jsx)("button",{type:"reset",children:(0,t.jsxs)("svg",{viewBox:"0 0 24 24",children:[(0,t.jsx)("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),(0,t.jsx)("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]})})]}),(0,t.jsx)("section",{children:a.length>0?(0,t.jsx)(t.Fragment,{children:Object.entries(a.reduce((e,n)=>(e[n.type]?e[n.type].push(n):e[n.type]=[n],e),{})).filter(e=>{let[n,s]=e;return"Post"!==n&&"Member"!==n}).map(e=>{let[n,s]=e;return(0,t.jsxs)("div",{children:[(0,t.jsx)("div",{className:"category",tabIndex:-1,children:n}),(0,t.jsx)("div",{className:"list",children:s.filter(e=>"Component"!==n||e._id.endsWith("index.mdx")).map((e,n)=>m(e,n,n===o))})]},n)})}):(0,t.jsxs)("div",{className:"no-results",children:[(0,t.jsx)("div",{className:"category",children:"Error"}),(0,t.jsx)("div",{className:"list",children:(0,t.jsx)(h(),{href:"/search",children:"No results found."})})]})}),(0,t.jsxs)("footer",{children:[(0,t.jsx)("svg",{width:"14",height:"14",viewBox:"0 0 25 25",children:(0,t.jsx)("path",{d:"M24.1819 7.19041C19.6399 7.19041 15.6799 9.77498 13.6419 13.5785C13.2849 11.1715 12.3789 8.88337 10.9969 6.89791C9.20875 4.31037 6.69322 2.3358 3.78189 1.23449L3.15489 0.998047L2.80189 1.57692C1.72967 3.3372 1.11407 5.34635 1.01291 7.41566C0.911744 9.48497 1.32833 11.5465 2.22355 13.4067C3.11876 15.2669 4.46323 16.8646 6.13066 18.0499C7.79809 19.2352 9.73377 19.969 11.7559 20.1826C11.3979 21.9752 10.8799 24.412 10.8799 24.412C10.8623 24.4813 10.8606 24.5537 10.8747 24.6237C10.8889 24.6938 10.9186 24.7596 10.9615 24.8162C11.0044 24.8727 11.0595 24.9185 11.1225 24.95C11.1855 24.9816 11.2547 24.998 11.3249 24.998H12.7829C12.8914 24.9982 12.9964 24.9591 13.0793 24.8879C13.1622 24.8166 13.2177 24.7177 13.2359 24.6087C13.2359 24.6087 13.4399 21.7816 13.5609 20.2396C19.9179 19.94 24.9999 14.5752 24.9999 8.02408V7.18939L24.1819 7.19041ZM2.63589 8.02408C2.63488 6.29308 3.05217 4.58847 3.85089 3.06081C8.86089 5.25912 12.1809 10.3539 12.1809 15.9541C12.1809 16.8183 12.1039 17.6805 11.9499 18.5305C9.39638 18.2657 7.03015 17.0446 5.30946 15.1036C3.58877 13.1626 2.63608 10.6399 2.63589 8.02408ZM13.8519 18.5519C14.2649 13.4184 18.2919 9.3133 23.3279 8.89443C22.9179 14.0259 18.8889 18.131 13.8519 18.5519Z",fill:"currentColor"})}),(0,t.jsxs)("div",{className:"cmd-options",children:[(0,t.jsxs)("div",{children:["Select",(0,t.jsx)("kbd",{children:(0,t.jsxs)("svg",{viewBox:"0 0 24 24",children:[(0,t.jsx)("polyline",{points:"9 10 4 15 9 20"}),(0,t.jsx)("path",{d:"M20 4v7a4 4 0 0 1-4 4H4"})]})})]}),(0,t.jsxs)("div",{children:["Escape",(0,t.jsx)("kbd",{children:"⎋"})]})]})]})]})})}var y=s(6435);function w(){let{resolvedTheme:e}=(0,y.F)(),n="dark"===e?"#fff":"#000",s='\n \n '),i="data:image/svg+xml,".concat(encodeURIComponent(s));return(0,t.jsx)(t.Fragment,{children:(0,t.jsx)("link",{rel:"icon",type:"image/svg+xml",href:i})})}var k=s(962);let b=(0,i.createContext)({isOpen:!1,isNavOpen:!1,toggleCmd:()=>{},toggleNav:()=>{}});function C(e){let{children:n,...s}=e,[l,c]=(0,i.useState)(!1),[a,r]=(0,i.useState)(!1),o=()=>{c(e=>!e)},d=()=>{r(e=>{let n=!e;return localStorage.setItem("navOpen",n?"true":"false"),n})};return(0,i.useEffect)(()=>{r("true"===localStorage.getItem("navOpen"));let e=e=>{let n=e.target,s=Array.from(document.querySelectorAll("input, textarea"));"m"===e.key&&!1===s.includes(n)&&(e.stopPropagation(),d())};return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)}},[]),(0,t.jsx)(y.f,{...s,children:(0,t.jsxs)(b.Provider,{value:{isOpen:l,isNavOpen:a,toggleCmd:o,toggleNav:d},children:[(0,t.jsx)(w,{}),n,(0,t.jsx)(k.x,{richColors:!0,theme:"dark",position:"bottom-right",expand:!1,closeButton:!0,duration:4428}),(0,t.jsx)(v,{isOpen:l,toggleCmd:o})]})})}function N(){let[e,n]=(0,i.useState)(!1),{theme:s,setTheme:l}=(0,y.F)(),c=()=>(0,t.jsxs)("svg",{viewBox:"0 0 24 24",children:[(0,t.jsx)("circle",{cx:"12",cy:"12",r:"5"}),(0,t.jsx)("line",{x1:"12",y1:"1",x2:"12",y2:"3"}),(0,t.jsx)("line",{x1:"12",y1:"21",x2:"12",y2:"23"}),(0,t.jsx)("line",{x1:"4.22",y1:"4.22",x2:"5.64",y2:"5.64"}),(0,t.jsx)("line",{x1:"18.36",y1:"18.36",x2:"19.78",y2:"19.78"}),(0,t.jsx)("line",{x1:"1",y1:"12",x2:"3",y2:"12"}),(0,t.jsx)("line",{x1:"21",y1:"12",x2:"23",y2:"12"}),(0,t.jsx)("line",{x1:"4.22",y1:"19.78",x2:"5.64",y2:"18.36"}),(0,t.jsx)("line",{x1:"18.36",y1:"5.64",x2:"19.78",y2:"4.22"})]});return(i.useEffect(()=>{let e=e=>{"\\"===e.key&&e.target instanceof HTMLElement&&"INPUT"!==e.target.tagName&&"TEXTAREA"!==e.target.tagName&&l("light"===s?"dark":"light")};return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)}},[l,s]),(0,i.useEffect)(()=>{n(!0)},[]),e)?(0,t.jsx)("button",{className:"theme",onClick:()=>l("light"===s?"dark":"light"),"aria-label":"Toggle ".concat("dark"===s?"Light":"Dark"," Theme"),children:"dark"===s?(0,t.jsx)(c,{}):(0,t.jsx)(()=>(0,t.jsx)("svg",{viewBox:"0 0 24 24",children:(0,t.jsx)("path",{d:"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"})}),{})}):(0,t.jsx)("button",{className:"theme","aria-label":"Toggle Light Theme",children:(0,t.jsx)(c,{})})}let S=(0,i.forwardRef)((e,n)=>{let{...s}=e,{toggleCmd:l}=(0,i.useContext)(b),{toggleNav:c,isNavOpen:a}=(0,i.useContext)(b),[r,o]=(0,i.useState)(!1);return(0,i.useEffect)(()=>{o(-1!==window.navigator.userAgent.indexOf("Windows"))},[]),(0,t.jsxs)("header",{className:"main",children:[(0,t.jsx)("nav",{children:(0,t.jsxs)("button",{className:"hamburger ".concat(a?"active":""),onClick:c,children:[!0===a?(0,t.jsxs)("svg",{viewBox:"0 0 24 24",children:[(0,t.jsx)("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),(0,t.jsx)("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]}):(0,t.jsxs)("svg",{viewBox:"0 0 24 24",children:[(0,t.jsx)("line",{x1:"3",y1:"12",x2:"21",y2:"12"}),(0,t.jsx)("line",{x1:"3",y1:"6",x2:"21",y2:"6"}),(0,t.jsx)("line",{x1:"3",y1:"18",x2:"21",y2:"18"})]}),"Menu"]})}),(0,t.jsx)(h(),{href:"/",className:"logo","aria-label":"SEB",children:(0,t.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 55 24",children:(0,t.jsx)("path",{fill:"currentColor",d:"M14.87 6.123 11.92 8.32c-1.387-1.2-3.187-1.43-4.178-1.43-.997 0-2.046.288-2.205 1.004-.159.694.492 1.236 1.605 1.54 1.272.34 2.422.643 4.207 1.15 2.646.758 4.46 1.9 4.46 4.553 0 3.665-3.252 5.56-7.604 5.56S.889 18.433 0 17.377l3.116-2.327c2.19 1.908 3.708 2.176 4.98 2.176 1.46 0 2.827-.311 3-1.135.145-.665-.404-1.193-1.648-1.482-1.402-.326-2.595-.586-3.918-.933C1.937 12.737.925 10.648.925 8.77c0-2.581 2.4-5.234 6.803-5.234 4.503 0 7.142 2.58 7.142 2.588Zm18.788-2.328H20.516v16.417h13.38v-3.788h-8.768v-2.646h6.036v-3.621h-6.036V7.54h8.523V3.795h.007ZM17.118 24h1.02V0h-1.02v24Zm18.506 0h1.02V0h-1.02v24Zm3.398-3.788h10.554c2.82 0 5.11-1.699 5.11-4.424 0-2.125-1.387-3.535-3.339-4.157a.837.837 0 0 0-.188-.021c.065-.008.13-.015.188-.037 1.12-.44 2.35-1.619 2.35-3.621 0-2.545-2.249-4.164-5.025-4.164h-9.657l.007 16.424Zm4.633-13.005h3.687c.846 0 1.533.673 1.533 1.439s-.687 1.446-1.533 1.446h-3.687V7.207Zm4.504 9.362h-4.51v-2.993h4.51c.795 0 1.446.643 1.446 1.496 0 .846-.644 1.497-1.446 1.497Z"})})}),(0,t.jsxs)("nav",{children:[(0,t.jsxs)("button",{onClick:l,className:"shortcut",children:[(0,t.jsxs)("svg",{width:"10",height:"10",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,t.jsx)("circle",{cx:"11",cy:"11",r:"8"}),(0,t.jsx)("line",{x1:"21",y1:"21",x2:"16.65",y2:"16.65"})]}),(0,t.jsx)("span",{children:r?"/":"⌘K"})]}),(0,t.jsx)(h(),{className:"github",href:"https://github.com/sebgroup/green",target:"_blank","aria-label":"GitHub",children:(0,t.jsx)("svg",{viewBox:"0 0 24 24",children:(0,t.jsx)("path",{d:"M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"})})}),(0,t.jsx)(N,{})]})]})});S.displayName="Header";var _=s(4033),E=e=>{let{children:n}=e;return n};function A(e){let{isNavOpen:n,toggleNav:s}=e,l=(0,_.usePathname)();function c(e){return(0,t.jsx)(h(),{className:l==e.url_path?"active":"",href:e.url_path,onClick:d,children:e.title})}let a=j.DD.filter(e=>"index.mdx"===e._raw.sourceFileName).sort((e,n)=>e.title.localeCompare(n.title)),r=()=>(0,t.jsx)("span",{"aria-label":"Expand",tabIndex:0,children:(0,t.jsx)("svg",{viewBox:"0 0 24 24",children:(0,t.jsx)("polyline",{points:"6 9 12 15 18 9"})})}),o=(0,i.useRef)(null),d=e=>{let{current:n}=o;n&&window.innerWidth<992&&!n.classList.contains("hidden")&&s()};return(0,t.jsxs)("aside",{className:"nav ".concat(n?"":"hidden"),ref:o,children:[(0,t.jsxs)("details",{open:l.includes("/component"),children:[(0,t.jsxs)("summary",{children:[(0,t.jsx)(h(),{className:"/components"===l?"active":"",href:"/components",onClick:d,children:"Components"}),(0,t.jsx)(r,{})]}),(0,t.jsx)("nav",{children:a.map((e,n)=>(0,t.jsx)(c,{...e},n))})]}),(0,t.jsxs)("details",{open:l.includes("/foundation"),children:[(0,t.jsxs)("summary",{children:[(0,t.jsx)(h(),{className:"/foundation"===l?"active":"",href:"/foundation",onClick:d,children:"Foundation"}),(0,t.jsx)(E,{children:(0,t.jsx)(r,{})})]}),(0,t.jsx)(E,{children:(0,t.jsx)("nav",{children:(0,t.jsx)(h(),{className:"/foundation/accessibility"==l?"active":"",href:"/foundation/accessibility",onClick:d,children:"Accessibility"})})})]}),(0,t.jsxs)("details",{open:l.includes("/ux-writing"),children:[(0,t.jsxs)("summary",{children:[(0,t.jsx)(h(),{className:"/ux-writing"==l?"active":"",href:"/ux-writing",onClick:d,children:"UX writing"}),(0,t.jsx)(E,{children:(0,t.jsx)(r,{})})]}),(0,t.jsx)(E,{children:(0,t.jsxs)("nav",{children:[(0,t.jsx)(h(),{className:"/ux-writing/general"==l?"active":"",href:"/ux-writing/general",children:"General"}),(0,t.jsx)(h(),{className:"/ux-writing/english"==l?"active":"",href:"/ux-writing/english",children:"English"}),(0,t.jsx)(h(),{className:"/ux-writing/swedish"==l?"active":"",href:"/ux-writing/swedish",onClick:d,children:"Swedish"})]})})]}),(0,t.jsxs)("details",{open:l.includes("/about")||l.includes("/changelog")||l.includes("/status"),children:[(0,t.jsxs)("summary",{children:[(0,t.jsx)(h(),{className:"/about"==l?"active":"",href:"/about",onClick:d,children:"About"}),(0,t.jsx)(r,{})]}),(0,t.jsxs)("nav",{children:[(0,t.jsx)(h(),{className:"/changelog"==l?"active":"",href:"/changelog",children:"Changelog"}),(0,t.jsx)(h(),{className:"/status"==l?"active":"",href:"/status",onClick:d,children:"Status"})]})]}),(0,t.jsxs)(h(),{className:"pill",href:"https://designlibrary.sebgroup.com/",target:"_blank",style:{marginTop:"auto"},children:["Design Library",(0,t.jsxs)("svg",{viewBox:"0 0 24 24",children:[(0,t.jsx)("path",{d:"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"}),(0,t.jsx)("polyline",{points:"15 3 21 3 21 9"}),(0,t.jsx)("line",{x1:"10",y1:"14",x2:"21",y2:"3"})]})]})]})}function B(e){let{children:n}=e,{toggleNav:s,isNavOpen:l}=(0,i.useContext)(b);return(0,t.jsxs)("section",{className:"layout-article",children:[l&&(0,t.jsx)(A,{toggleNav:s,isNavOpen:l}),n]})}function Z(e){let{children:n}=e;return(0,t.jsx)("main",{className:"layout-main",children:n})}s(9196),s(1251),s(6944),s(123);var L=s(6364),M=s.n(L);M().variable;var T=M();function D(e){let{children:n}=e;return(0,i.useEffect)(()=>{let e=()=>{var e;try{e=window.initCookieConsent()}catch(e){console.error(e)}e&&e.run({})};if("seb.io"===location.hostname&&document.cookie.split("; ").find(e=>e.startsWith("GDS Cookie Consent"))){let n=document.createElement("script");n.src="https://content.seb.se/dsc/da/launch/public/30e54a9d6c99/f9d07ef22744/launch-89d260357525.min.js",n.type="application/javascript",document.head.appendChild(n);let s=setTimeout(()=>{e()},1e3);return()=>{clearTimeout(s)}}!function(){if("adoptedStyleSheets"in document){let e=new CSSStyleSheet;e.replaceSync(":root { --gds-font-family: ".concat(T.style.fontFamily,"; }")),document.adoptedStyleSheets=[...document.adoptedStyleSheets,e]}}()},[]),(0,t.jsx)("html",{lang:"en",suppressHydrationWarning:!0,children:(0,t.jsxs)("body",{children:[(0,t.jsx)(C,{attribute:"theme",defaultTheme:"system",enableColorScheme:!1,enableSystem:!0,children:(0,t.jsxs)(Z,{children:[(0,t.jsx)(a,{}),(0,t.jsx)(S,{}),(0,t.jsx)(B,{children:n}),(0,t.jsx)(o,{}),(0,t.jsx)(m,{})]})}),(0,t.jsx)(c(),{id:"data-layer",children:'window["dataLayer"] = {\n "pageName":"seb.io",\n "pagetype":"StandardPage",\n "language":"en",\n "environment":"prod",\n "project":"green",\n "website":"seb.io",\n };'}),(0,t.jsx)(c(),{id:"show-banner",children:"globalThis.GDS_DISABLE_VERSIONED_ELEMENTS = true"}),(0,t.jsx)(c(),{src:"/core-out.js"})]})})}},8098:function(e,n,s){"use strict";s.d(n,{Z:function(){return i}});var t=s(7437);function i(e){let{children:n,justify:s,align:i,wrap:l,direction:c,directionTablet:a,directionMobile:r,gap:o}=e,d="gds-flex";return s&&(d+=" gds-flex-justify-".concat(s)),i&&(d+=" gds-flex-align-".concat(i)),l&&(d+=" gds-flex-wrap-".concat(l)),c&&(d+=" gds-flex-direction-".concat(c)),o&&(d+=" gds-flex-gap-".concat(o)),(0,t.jsx)("div",{className:d,children:n})}s(2265),s(5445)},1806:function(){},8420:function(){},6662:function(){},5445:function(){},1054:function(){},1191:function(){},9196:function(){},1251:function(){},123:function(){},6944:function(){}},function(e){e.O(0,[250,165,214,640,746,971,938,744],function(){return e(e.s=1313)}),_N_E=e.O()}]);
\ No newline at end of file
diff --git a/_next/static/chunks/app/ux-writing/page-ff607ab7e8766dfe.js b/_next/static/chunks/app/ux-writing/page-ff607ab7e8766dfe.js
new file mode 100644
index 00000000..d72d8c24
--- /dev/null
+++ b/_next/static/chunks/app/ux-writing/page-ff607ab7e8766dfe.js
@@ -0,0 +1 @@
+(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[832],{5888:function(e,t,n){Promise.resolve().then(n.bind(n,5248))},5248:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return d}});var s=n(7437),i=n(9162);n(2462);var r=n(1683),a=n(1433),o=n(6173),l=n(9323);let c=[{slug:"ux-writing",text:"UX writing",level:1},{slug:"written-id",text:"Written ID",level:2},{slug:"ux-writing-in-seb",text:"UX writing in SEB",level:2},{slug:"what-is-ux-writing",text:"What is UX writing",level:3},{slug:"ux-writing-in-seb-is",text:"UX writing in SEB is",level:3},{slug:"a-few-examples",text:"A few examples",level:3},{slug:"translate-texts",text:"Translate texts",level:3}];function d(){return(0,s.jsx)(l.default,{layout:"content",children:(0,s.jsxs)(a.default,{columns:12,paddingBlock:"medium",paddingInline:"medium",gapInline:"medium",align:"start",children:[(0,s.jsx)(r.Z,{span:"10",children:(0,s.jsx)(a.default,{columns:12,gapBlock:"large",children:(0,s.jsx)(r.Z,{span:"9",children:(0,s.jsxs)("div",{className:"gds-prose",children:[(0,s.jsx)("h1",{children:"UX writing and our guidelines"}),(0,s.jsx)("p",{children:"Regardless of where, when or how the customer meets us, the experience of SEB must be the same because each meeting contributes to how we are perceived. A positive customer experience opens the door to new business."}),(0,s.jsx)("p",{children:"This is particularly important in texts aimed at customers. Mistakes affect the reader's concentration on the content and understanding of the text. Because our texts are correct, our credibility with customers and other visitors (=potential customers) increases."}),(0,s.jsx)(o.Z,{size:"medium",decorated:!0}),(0,s.jsx)("h2",{id:"written-id",children:"Written ID – our tone of voice"}),(0,s.jsx)("p",{children:"SEB's Written ID is our guiding light, and it forms the basis for all our communication, including UX writing. Our communication must show that we live and operate according to our language keys:"}),(0,s.jsxs)("ul",{children:[(0,s.jsxs)("li",{children:[(0,s.jsx)("strong",{children:"Open and personal:"})," We are people speaking to people. That’s why we prefer using an informal, personal voice rather than an official one."]}),(0,s.jsxs)("li",{children:[(0,s.jsx)("strong",{children:"Relevant and clear:"})," Our texts are clear and easy to grasp, and we start with what’s most important."]}),(0,s.jsxs)("li",{children:[(0,s.jsx)("strong",{children:"Driven and engaged:"})," We have the engagement and energy; we share our drive with our customers. Linguistically that means our language is alert and modern."]})]}),(0,s.jsx)("p",{children:"The voice the customers encounter when they use a service on the internet banking services or the mobile apps must be the same in guides, sales, error messages, etc. But UX writing should, to a greater degree than other non-fiction texts, be consistent. Therefore, we have special principles for different design components."}),(0,s.jsx)("h2",{children:"UX writing in SEB"}),(0,s.jsx)("h3",{children:"What is UX writing and how will good UX texts help our customers?"}),(0,s.jsx)("p",{children:"The UX texts help the user, or customer, to navigate apps, websites, and other digital products. They are one part of many in a final design. UX texts focus on accessibility, they are short and to the point without losing any important information. They are user-friendly, contextually appropriate and with the right tone of voice. The UX texts should solve a user problem and meet the business goals."}),(0,s.jsx)("p",{children:"These are many requirements to take into account and which do not always go hand in hand with each other. Therefore, people with the right knowledge and skills must write the UX texts."}),(0,s.jsx)("p",{children:"Good UX writing is like a personal guide that acts in the background and helps customers understand how to act and navigate. It ensures that customers do not end up in situations where they feel stupid or underestimated. Really good UX writing will rather make them feel satisfied because they succeed in finishing a task without unnecessary thresholds."}),(0,s.jsx)("h3",{children:"UX writing in SEB is:"}),(0,s.jsxs)("ul",{children:[(0,s.jsx)("li",{children:"Consistent – we strive to use the same word for the same item, action, or object."}),(0,s.jsx)("li",{children:"Educational – we make an effort to be brief and pedagogic."}),(0,s.jsx)("li",{children:"Distinct – we avoid bank or tech jargon."}),(0,s.jsx)("li",{children:"Helpful – we prevent mistakes and setbacks."})]}),(0,s.jsx)("h3",{children:"Few examples of UX texts:"}),(0,s.jsxs)("ul",{children:[(0,s.jsx)("li",{children:"Labels and headings"}),(0,s.jsx)("li",{children:"Menus"}),(0,s.jsx)("li",{children:"Buttons, links, and navigation texts"}),(0,s.jsx)("li",{children:"Error messages"}),(0,s.jsx)("li",{children:"Help texts and instructions"}),(0,s.jsx)("li",{children:"Onboardings"}),(0,s.jsx)("li",{children:"Empty states"}),(0,s.jsx)("li",{children:"Loading screen messages"}),(0,s.jsx)("li",{children:"Success messages"}),(0,s.jsx)("li",{children:"Disclaimer texts "})]}),(0,s.jsx)("h3",{children:"Translate texts from Swedish to English"}),(0,s.jsx)("p",{children:"If you need to translate Swedish texts into English, the bank has agreements with, among others, Spr\xe5kkonsulterna and Lionbridge. Contact them directly to order a translation."}),(0,s.jsx)("p",{children:"When you contact them to ask if they are available to take on the assignment, they want to know approximately how many words are to be translated. They also need to know the name of who will pay the invoice before you send the translation document."}),(0,s.jsxs)("ul",{children:[(0,s.jsxs)("li",{children:["Spr\xe5kkonsulterna:",(0,s.jsx)("a",{href:"mailto:info@sprakkonsulterna.se",children:"info@sprakkonsulterna.se"})]}),(0,s.jsxs)("li",{children:["Lionbridge:",(0,s.jsx)("a",{href:"mailto:jakob.nordby@lionbridge.com",children:"jakob.nordby@lionbridge.com"})]})]}),(0,s.jsx)("p",{children:"When you need help with tone-of-voice, instructions, vocabulary or a UX writer to work with, please don’t hesitate to contact the UX writing team. Reach out in the Teams channels UX writing in Green Design System or UX writing in CX Community, or if you already have a contact or dedicated writer for your team or product, simply contact that person."})]})})})}),(0,s.jsx)(r.Z,{span:"2",children:(0,s.jsx)(i.Z,{headings:c,component:""})})]})})}},1683:function(e,t,n){"use strict";n.d(t,{Z:function(){return i}});var s=n(7437);function i(e){let{children:t,...n}=e;return(0,s.jsx)("gds-cell",{...n,children:t})}n(2265)},1433:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return r}});var s=n(7437),i=n(2265);function r(e){let{children:t,gapBlock:n,gapInline:r,paddingBlock:a,paddingInline:o,mobile:l,contentInline:c,tablet:d,columns:u=12,fluid:h,justify:g,align:p,inlineSize:f}=e;if(u<1||u>24)throw Error("The columns prop must be between 1 and 24.");let m=function(){let[e,t]=(0,i.useState)(!1);return(0,i.useEffect)(()=>{let e=e=>{"Alt"===e.key&&t(!0)},n=e=>{"Alt"===e.key&&t(!1)};return window.addEventListener("keydown",e),window.addEventListener("keyup",n),()=>{window.removeEventListener("keydown",e),window.removeEventListener("keyup",n)}},[]),e}();return(0,s.jsx)("gds-grid",{...m?{debug:!0}:{},"gap-block":n,"gap-inline":r,"padding-block":a,"padding-inline":o,"content-inline":c,columns:u.toString(),...void 0!==l?{mobile:l.toString()}:{},...void 0!==d?{tablet:d.toString()}:{},fluid:h,justify:g,align:p,"inline-size":f,children:t})}n(5575),n(6976),n(1193),n(5834),n(8835),n(2893)},6173:function(e,t,n){"use strict";n.d(t,{Z:function(){return i}});var s=n(7437);function i(e){let{size:t,decorated:n}=e,i="gds-spacer";return t&&(i+=" gds-spacer-".concat(t)),n&&(i+=" gds-spacer-decorator"),(0,s.jsx)("div",{className:i,children:n&&(0,s.jsx)("hr",{})})}n(1873)},9162:function(e,t,n){"use strict";var s=n(7437),i=n(2265),r=n(1396),a=n.n(r);n(5e3);let o=()=>(0,s.jsx)("div",{className:"disclosure","aria-label":"Expand",tabIndex:0,children:(0,s.jsx)("svg",{viewBox:"0 0 24 24",children:(0,s.jsx)("polyline",{points:"6 9 12 15 18 9"})})});t.Z=e=>{let{headings:t,component:n}=e,[r,l]=(0,i.useState)("");(0,i.useRef)(null),(0,i.useEffect)(()=>{let e=()=>{let e=window.scrollY;for(let n=t.length-1;n>=0;n--){let s=t[n],i=document.getElementById(s.slug);if(i&&i.offsetTop<=e+161){l(s.slug);break}}};return window.addEventListener("scroll",e),()=>window.removeEventListener("scroll",e)},[t]);let c=e=>{l(e)},d=t.reduce((e,n)=>{if(n.level>2){let t=e[e.length-1];if(Array.isArray(t))t.push(n);else throw Error("Level 3 and 4 headings should be after a level 2 heading.")}else if(2===n.level){let s=t.indexOf(n)+1;t[s]&&t[s].level>2?e.push([n]):e.push(n)}else e.push(n);return e},[]);return(0,s.jsxs)("aside",{className:"toc",children:[(0,s.jsx)("span",{children:"On this page"}),(0,s.jsxs)("nav",{"data-name":t.length>0?"On this page":"",children:[(0,s.jsx)(a(),{href:"#top","data-id":"top","data-level":"1",onClick:()=>c("top"),passHref:!0,children:n},"#top"),d.map((e,t)=>Array.isArray(e)?(0,s.jsxs)("details",{open:e.some(e=>e.slug===r),children:[(0,s.jsxs)("summary",{children:[(0,s.jsx)(a(),{href:"#".concat(e[0].slug),className:"toc-link ".concat(r===e[0].slug?"active":""),"data-id":e[0].slug,"data-level":e[0].level,onClick:()=>c(e[0].slug),passHref:!0,children:e[0].text},"#".concat(e[0].slug)),(0,s.jsx)(o,{})]}),e.slice(1).map(e=>(0,s.jsx)(a(),{href:"#".concat(e.slug),className:"toc-link ".concat(r===e.slug?"active":""),"data-id":e.slug,"data-level":e.level,onClick:()=>c(e.slug),passHref:!0,children:e.text},"#".concat(e.slug)))]},t):(0,s.jsx)(a(),{href:"#".concat(e.slug),className:"toc-link ".concat(r===e.slug?"active":""),"data-id":e.slug,"data-level":e.level,onClick:()=>c(e.slug),passHref:!0,children:e.text},"#".concat(e.slug)))]})]})}},9323:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return i}});var s=n(7437);function i(e){let{children:t,layout:n}=e;return(0,s.jsx)("section",{className:"layout-content ".concat("page-"+n),children:t})}n(5679)},2462:function(){},8835:function(){},2893:function(){},5575:function(){},6976:function(){},5834:function(){},1193:function(){},1873:function(){},5e3:function(){},5679:function(){},622:function(e,t,n){"use strict";var s=n(2265),i=Symbol.for("react.element"),r=Symbol.for("react.fragment"),a=Object.prototype.hasOwnProperty,o=s.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,l={key:!0,ref:!0,__self:!0,__source:!0};function c(e,t,n){var s,r={},c=null,d=null;for(s in void 0!==n&&(c=""+n),void 0!==t.key&&(c=""+t.key),void 0!==t.ref&&(d=t.ref),t)a.call(t,s)&&!l.hasOwnProperty(s)&&(r[s]=t[s]);if(e&&e.defaultProps)for(s in t=e.defaultProps)void 0===r[s]&&(r[s]=t[s]);return{$$typeof:i,type:e,key:c,ref:d,props:r,_owner:o.current}}t.Fragment=r,t.jsx=c,t.jsxs=c},7437:function(e,t,n){"use strict";e.exports=n(622)},1396:function(e,t,n){e.exports=n(5250)}},function(e){e.O(0,[250,971,938,744],function(){return e(e.s=5888)}),_N_E=e.O()}]);
\ No newline at end of file
diff --git a/_next/static/chunks/webpack-4935194aecdde5aa.js b/_next/static/chunks/webpack-4935194aecdde5aa.js
new file mode 100644
index 00000000..b167adf7
--- /dev/null
+++ b/_next/static/chunks/webpack-4935194aecdde5aa.js
@@ -0,0 +1 @@
+!function(){"use strict";var e,t,n,r,o,u,c,f,i,a={},d={};function l(e){var t=d[e];if(void 0!==t)return t.exports;var n=d[e]={exports:{}},r=!0;try{a[e](n,n.exports,l),r=!1}finally{r&&delete d[e]}return n.exports}l.m=a,e=[],l.O=function(t,n,r,o){if(n){o=o||0;for(var u=e.length;u>0&&e[u-1][2]>o;u--)e[u]=e[u-1];e[u]=[n,r,o];return}for(var c=1/0,u=0;u=o&&Object.keys(l.O).every(function(e){return l.O[e](n[i])})?n.splice(i--,1):(f=!1,ogds-cell{height:100%}gds-grid[fluid]{--gds-grid-col-count:var(--gds-c);--gds-grid-col-width:200px;--gap-count:calc(var(--gds-grid-col-count) - 1);--total-gap-width:calc(var(--gap-count) * var(--gds-grid-col-gap));--gds-grid-col-width-max:calc((100% - var(--total-gap-width)) / var(--gds-grid-col-count));grid-template-columns:repeat(auto-fill,minmax(max(var(--gds-grid-col-width),var(--gds-grid-col-width-max)),1fr));text-wrap:balance}gds-grid[content-inline=auto]{display:grid;grid-auto-columns:auto;grid-auto-flow:column;grid-template-columns:none}gds-grid[inline-size=max-content]{max-width:-moz-max-content;max-width:max-content}}@layer grid.desktop{gds-grid[columns="1"]{--gds-c:1;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="2"]{--gds-c:2;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="3"]{--gds-c:3;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="4"]{--gds-c:4;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="5"]{--gds-c:5;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="6"]{--gds-c:6;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="7"]{--gds-c:7;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="8"]{--gds-c:8;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="9"]{--gds-c:9;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="10"]{--gds-c:10;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="11"]{--gds-c:11;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="12"]{--gds-c:12;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="13"]{--gds-c:13;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="14"]{--gds-c:14;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="15"]{--gds-c:15;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="16"]{--gds-c:16;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="17"]{--gds-c:17;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="18"]{--gds-c:18;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="19"]{--gds-c:19;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="20"]{--gds-c:20;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="21"]{--gds-c:21;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="22"]{--gds-c:22;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="23"]{--gds-c:23;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="24"]{--gds-c:24;--gds-grid-col:repeat(var(--gds-c),1fr)}}@layer grid.tablet{@media only screen and (max-width:768px){gds-grid[tablet="1"]{--gds-c:1}gds-grid[tablet="2"]{--gds-c:2}gds-grid[tablet="3"]{--gds-c:3}gds-grid[tablet="4"]{--gds-c:4}gds-grid[tablet="5"]{--gds-c:5}gds-grid[tablet="6"]{--gds-c:6}gds-grid[tablet="7"]{--gds-c:7}gds-grid[tablet="8"]{--gds-c:8}gds-grid[tablet="9"]{--gds-c:9}gds-grid[tablet="10"]{--gds-c:10}gds-grid[tablet="11"]{--gds-c:11}gds-grid[tablet="12"]{--gds-c:12}gds-grid[tablet="13"]{--gds-c:13}gds-grid[tablet="14"]{--gds-c:14}gds-grid[tablet="15"]{--gds-c:15}gds-grid[tablet="16"]{--gds-c:16}gds-grid[tablet="17"]{--gds-c:17}gds-grid[tablet="18"]{--gds-c:18}gds-grid[tablet="19"]{--gds-c:19}gds-grid[tablet="20"]{--gds-c:20}gds-grid[tablet="21"]{--gds-c:21}gds-grid[tablet="22"]{--gds-c:22}gds-grid[tablet="23"]{--gds-c:23}gds-grid[tablet="24"]{--gds-c:24}}}@layer grid.mobile{@media only screen and (max-width:425px){gds-grid[mobile="1"]{--gds-c:1}gds-grid[mobile="2"]{--gds-c:2}gds-grid[mobile="3"]{--gds-c:3}gds-grid[mobile="4"]{--gds-c:4}gds-grid[mobile="5"]{--gds-c:5}gds-grid[mobile="6"]{--gds-c:6}gds-grid[mobile="7"]{--gds-c:7}gds-grid[mobile="8"]{--gds-c:8}gds-grid[mobile="9"]{--gds-c:9}gds-grid[mobile="10"]{--gds-c:10}gds-grid[mobile="11"]{--gds-c:11}gds-grid[mobile="12"]{--gds-c:12}gds-grid[mobile="13"]{--gds-c:13}gds-grid[mobile="14"]{--gds-c:14}gds-grid[mobile="15"]{--gds-c:15}gds-grid[mobile="16"]{--gds-c:16}gds-grid[mobile="17"]{--gds-c:17}gds-grid[mobile="18"]{--gds-c:18}gds-grid[mobile="19"]{--gds-c:19}gds-grid[mobile="20"]{--gds-c:20}gds-grid[mobile="21"]{--gds-c:21}gds-grid[mobile="22"]{--gds-c:22}gds-grid[mobile="23"]{--gds-c:23}gds-grid[mobile="24"]{--gds-c:24}}}@layer grid.span{gds-grid>gds-cell[span^="1"]{--gds-grid-col-start:1}gds-grid>gds-cell[span^="2"]{--gds-grid-col-start:2}gds-grid>gds-cell[span^="3"]{--gds-grid-col-start:3}gds-grid>gds-cell[span^="4"]{--gds-grid-col-start:4}gds-grid>gds-cell[span^="5"]{--gds-grid-col-start:5}gds-grid>gds-cell[span^="6"]{--gds-grid-col-start:6}gds-grid>gds-cell[span^="7"]{--gds-grid-col-start:7}gds-grid>gds-cell[span^="8"]{--gds-grid-col-start:8}gds-grid>gds-cell[span^="9"]{--gds-grid-col-start:9}gds-grid>gds-cell[span^="10"]{--gds-grid-col-start:10}gds-grid>gds-cell[span^="11"]{--gds-grid-col-start:11}gds-grid>gds-cell[span^="12"]{--gds-grid-col-start:12}gds-grid>gds-cell[span^="13"]{--gds-grid-col-start:13}gds-grid>gds-cell[span^="14"]{--gds-grid-col-start:14}gds-grid>gds-cell[span^="15"]{--gds-grid-col-start:15}gds-grid>gds-cell[span^="16"]{--gds-grid-col-start:16}gds-grid>gds-cell[span^="17"]{--gds-grid-col-start:17}gds-grid>gds-cell[span^="18"]{--gds-grid-col-start:18}gds-grid>gds-cell[span^="19"]{--gds-grid-col-start:19}gds-grid>gds-cell[span^="20"]{--gds-grid-col-start:20}gds-grid>gds-cell[span^="21"]{--gds-grid-col-start:21}gds-grid>gds-cell[span^="22"]{--gds-grid-col-start:22}gds-grid>gds-cell[span^="23"]{--gds-grid-col-start:23}gds-grid>gds-cell[span^="24"]{--gds-grid-col-start:24}gds-grid>gds-cell[span$="+1"],gds-grid>gds-cell[span="1"]{--gds-grid-col-end:1}gds-grid>gds-cell[span$="+2"],gds-grid>gds-cell[span$="-1"],gds-grid>gds-cell[span="2"]{--gds-grid-col-end:2}gds-grid>gds-cell[span$="+3"],gds-grid>gds-cell[span$="-2"],gds-grid>gds-cell[span="3"]{--gds-grid-col-end:3}gds-grid>gds-cell[span$="+4"],gds-grid>gds-cell[span$="-3"],gds-grid>gds-cell[span="4"]{--gds-grid-col-end:4}gds-grid>gds-cell[span$="+5"],gds-grid>gds-cell[span$="-4"],gds-grid>gds-cell[span="5"]{--gds-grid-col-end:5}gds-grid>gds-cell[span$="+6"],gds-grid>gds-cell[span$="-5"],gds-grid>gds-cell[span="6"]{--gds-grid-col-end:6}gds-grid>gds-cell[span$="+7"],gds-grid>gds-cell[span$="-6"],gds-grid>gds-cell[span="7"]{--gds-grid-col-end:7}gds-grid>gds-cell[span$="+8"],gds-grid>gds-cell[span$="-7"],gds-grid>gds-cell[span="8"]{--gds-grid-col-end:8}gds-grid>gds-cell[span$="+9"],gds-grid>gds-cell[span$="-8"],gds-grid>gds-cell[span="9"]{--gds-grid-col-end:9}gds-grid>gds-cell[span$="+10"],gds-grid>gds-cell[span$="-9"],gds-grid>gds-cell[span="10"]{--gds-grid-col-end:10}gds-grid>gds-cell[span$="+11"],gds-grid>gds-cell[span$="-10"],gds-grid>gds-cell[span="11"]{--gds-grid-col-end:11}gds-grid>gds-cell[span$="+12"],gds-grid>gds-cell[span$="-11"],gds-grid>gds-cell[span="12"]{--gds-grid-col-end:12}gds-grid>gds-cell[span$="+13"],gds-grid>gds-cell[span$="-12"],gds-grid>gds-cell[span="13"]{--gds-grid-col-end:13}gds-grid>gds-cell[span$="+14"],gds-grid>gds-cell[span$="-13"],gds-grid>gds-cell[span="14"]{--gds-grid-col-end:14}gds-grid>gds-cell[span$="+15"],gds-grid>gds-cell[span$="-14"],gds-grid>gds-cell[span="15"]{--gds-grid-col-end:15}gds-grid>gds-cell[span$="+16"],gds-grid>gds-cell[span$="-15"],gds-grid>gds-cell[span="16"]{--gds-grid-col-end:16}gds-grid>gds-cell[span$="+17"],gds-grid>gds-cell[span$="-16"],gds-grid>gds-cell[span="17"]{--gds-grid-col-end:17}gds-grid>gds-cell[span$="+18"],gds-grid>gds-cell[span$="-17"],gds-grid>gds-cell[span="18"]{--gds-grid-col-end:18}gds-grid>gds-cell[span$="+19"],gds-grid>gds-cell[span$="-18"],gds-grid>gds-cell[span="19"]{--gds-grid-col-end:19}gds-grid>gds-cell[span$="+20"],gds-grid>gds-cell[span$="-19"],gds-grid>gds-cell[span="20"]{--gds-grid-col-end:20}gds-grid>gds-cell[span$="+21"],gds-grid>gds-cell[span$="-20"],gds-grid>gds-cell[span="21"]{--gds-grid-col-end:21}gds-grid>gds-cell[span$="+22"],gds-grid>gds-cell[span$="-21"],gds-grid>gds-cell[span="22"]{--gds-grid-col-end:22}gds-grid>gds-cell[span$="+23"],gds-grid>gds-cell[span$="-22"],gds-grid>gds-cell[span="23"]{--gds-grid-col-end:23}gds-grid>gds-cell[span$="+24"],gds-grid>gds-cell[span$="-23"],gds-grid>gds-cell[span="24"]{--gds-grid-col-end:24}gds-grid>gds-cell[span]{grid-column-end:span var(--gds-grid-col-end)}gds-grid>gds-cell[span*="+"],gds-grid>gds-cell[span*="-"],gds-grid>gds-cell[span*=".."]{grid-column-start:var(--gds-grid-col-start)}gds-grid>gds-cell[span*="-"],gds-grid>gds-cell[span*=".."]{grid-column-end:var(--gds-grid-col-end)}gds-grid>gds-cell[span=row]{grid-column:1/-1}}@layer grid.debug{gds-grid[gap-inline=small]{--gds-grid-col-gap:var(--gds-gap-l)}gds-grid[gap-inline=medium]{--gds-grid-col-gap:var(--gds-gap-xxl)}gds-grid[gap-inline=large]{--gds-grid-col-gap:var(--gds-gap-xxxl)}gds-grid[gap-block=small]{--gds-grid-row-gap:var(--gds-gap-l)}gds-grid[gap-block=medium]{--gds-grid-row-gap:var(--gds-gap-xxl)}gds-grid[gap-block=large]{--gds-grid-row-gap:var(--gds-gap-xxxl)}gds-grid[padding-block=small]{padding-block:var(--gds-gap-l)}gds-grid[padding-block=medium]{padding-block:var(--gds-gap-xxl)}gds-grid[padding-block=large]{padding-block:var(--gds-gap-xxxl)}gds-grid[padding-inline=small]{padding-inline:var(--gds-gap-l)}gds-grid[padding-inline=medium]{padding-inline:var(--gds-gap-xxl)}gds-grid[padding-inline=large]{padding-inline:var(--gds-gap-xxxl)}}@layer grid.align{gds-grid[justify=start]{justify-content:start}gds-grid[justify=end]{justify-content:end}gds-grid[justify=center]{justify-content:center}gds-grid[justify=between]{justify-content:space-between}gds-grid[justify=around]{justify-content:space-around}gds-grid[justify=evenly]{justify-content:space-evenly}gds-grid[align=start]{align-items:start}gds-grid[align=end]{align-items:end}gds-grid[align=center]{align-items:center}gds-grid[align=between]{align-items:space-between}gds-grid[align=around]{align-items:space-around}gds-grid[align=evenly]{align-items:space-evenly}}@layer grid.debug{gds-grid[debug]{counter-set:gds-cell;outline:1px solid var(--gds-debug-color-container)}gds-grid[debug]>*{outline:1px dashed var(--gds-debug-color);position:relative}gds-grid[debug]>:before{color:#fff;font-weight:700;display:flex;padding:2px 4px;border-radius:2px;align-items:center;justify-content:center;background-color:var(--gds-debug-color);counter-increment:gds-cell;position:absolute;top:4px;right:4px;font-size:10px;text-align:right;width:2ch}gds-grid[debug]>:before,gds-grid[debug]>:nth-child(n+10):before{content:counter(gds-cell)}}.gds-spacer{display:flex;align-items:center}.gds-spacer.gds-spacer-large{block-size:var(--gds-gap-xxxl)}.gds-spacer.gds-spacer-medium{block-size:var(--gds-gap-xxl)}.gds-spacer.gds-spacer-small{block-size:var(--gds-gap-l)}.gds-spacer hr{width:100%;border:none;height:1px;background-color:var(--gds-sys-color-stroke-stroke-variant2);border-radius:200px}figure.preview{--color:#1b1b18;--cell-lg:56px;--cell-lg-cl:color-mix(in srgb,var(--color),transparent 99%);--cell-sm:8px;--cell-sm-cl:color-mix(in srgb,var(--color),transparent 99%);display:flex;border-radius:12px;align-items:center;justify-content:center;flex-direction:column;aspect-ratio:16/9;position:relative;background-color:#fff;background-image:linear-gradient(to right,transparent calc(var(--cell-lg) - 1px),var(--cell-lg-cl) 1px),linear-gradient(to bottom,transparent calc(var(--cell-lg) - 1px),var(--cell-lg-cl) 1px),linear-gradient(to right,transparent calc(var(--cell-sm) - 1px),var(--cell-sm-cl) 1px),linear-gradient(to bottom,transparent calc(var(--cell-sm) - 1px),var(--cell-sm-cl) 1px);background-repeat:repeat-x,repeat-y,repeat-x,repeat-y;background-size:var(--cell-lg) 100%,100% var(--cell-lg),var(--cell-sm) 100%,100% var(--cell-sm);background-position:50%;border:1px solid color-mix(in srgb,var(--color-black),transparent 94%)}figure.preview p{margin:0;font-size:14px}figure.preview.custom{aspect-ratio:16/9;max-height:var(--gds-pattern-max-height);width:100%;max-width:100%}figure.preview button{display:flex;padding:12px 28px;border-radius:200px;border:1px solid color-mix(in srgb,var(--color-black),transparent 90%);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:var(--color-black);background-color:transparent;cursor:pointer;transition:var(--transition)}figure.preview button:hover{background-color:color-mix(in srgb,var(--color-black),transparent 90%);transform:scale(1.4)}figure.preview~span{content:attr(data-caption);font-size:14px;margin-top:2ex}.do{--_cl:var(--gds-sys-color-accent-accent-green);--_bg:var(--gds-sys-color-custom-custom-green-bright);--_br:var(--gds-sys-color-accent-accent-green);--_fs:14px;--_gp:8px;--_pd:8px;display:flex;border:1px solid var(--_br);border-radius:8px;flex-direction:column;overflow:hidden}.do span{display:flex;width:100%;align-items:center;justify-content:flex-start;background:var(--_bg);color:var(--_cl);gap:var(--_gp);font-size:var(--_fs);padding:var(--_pd);margin-block-start:0!important;border-top:1px solid var(--_br);font-weight:600;opacity:1!important}.do span svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.do figure.preview{border-radius:0;margin:0;margin-inline-end:0}.dont{--_cl:var(--gds-sys-color-container-container-negative);--_bg:var(--gds-sys-color-status-negative-negative-bright);--_br:var(--gds-sys-color-container-container-negative);--_fs:14px;--_gp:8px;--_pd:8px;display:flex;border:1px solid var(--_br);border-radius:8px;flex-direction:column;overflow:hidden}.dont span{display:flex;width:100%;align-items:center;justify-content:flex-start;background:var(--_bg);color:var(--_cl);gap:var(--_gp);font-size:var(--_fs);padding:var(--_pd);margin-block-start:0!important;border-top:1px solid var(--_br);font-weight:600;opacity:1!important}.dont span svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.dont figure.preview{border-radius:0;margin:0;margin-inline-end:0}playground-preview{border-radius:inherit;border-top-left-radius:0;border-bottom-left-radius:0;margin-block-start:1rem;border-radius:8px;overflow:hidden;border:1px solid color-mix(in srgb,var(--color-white),transparent 10%)}playground-preview::part(preview-toolbar){display:none}.row{display:flex;gap:24px;flex-direction:row;margin-block-start:2lh}.row .col{display:flex;flex:1;flex-direction:column}
\ No newline at end of file
diff --git a/_next/static/css/52d73d3459c06a42.css b/_next/static/css/52d73d3459c06a42.css
new file mode 100644
index 00000000..f15059da
--- /dev/null
+++ b/_next/static/css/52d73d3459c06a42.css
@@ -0,0 +1 @@
+.alert{background-color:#ebf1ff;color:#005fad;padding:16px var(--gds-gap-l);font-size:14px;line-height:1.1;letter-spacing:.1px;font-weight:400;display:flex;justify-content:space-between;align-items:center;gap:var(--gds-gap-l);grid-area:alert}.alert span{margin-inline:auto}.alert svg{min-width:1lh;min-height:1lh}:root{--cc-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--cc-font-size:16px;--cc-bg:#fff;--cc-z-index:2147483647;--cc-text:#2d4156;--cc-border-radius:0.45rem;--cc-btn-primary-bg:#2d4156;--cc-btn-primary-text:var(--cc-bg);--cc-btn-primary-hover-bg:#1d2e38;--cc-btn-primary-hover-text:var(--cc-btn-primary-text);--cc-btn-secondary-bg:#eaeff2;--cc-btn-secondary-text:var(--cc-text);--cc-btn-secondary-hover-bg:#d8e0e6;--cc-btn-secondary-hover-text:var(--cc-btn-secondary-text);--cc-btn-border-radius:0.375rem;--cc-toggle-bg-off:#919ea6;--cc-toggle-bg-on:var(--cc-btn-primary-bg);--cc-toggle-bg-readonly:#d5dee2;--cc-toggle-knob-bg:#fff;--cc-toggle-knob-icon-color:#ecf2fa;--cc-block-text:var(--cc-text);--cc-cookie-category-block-bg:#f0f4f7;--cc-cookie-category-block-bg-hover:#e9eff4;--cc-section-border:#f1f3f5;--cc-cookie-table-border:#e9edf2;--cc-overlay-bg:#040608;--cc-overlay-opacity:0.85;--cc-consent-modal-box-shadow:0 0.625rem 1.875rem rgba(2,2,3,.28);--cc-webkit-scrollbar-bg:#cfd5db;--cc-webkit-scrollbar-bg-hover:#9199a0}.c_darkmode{--cc-bg:#181b1d;--cc-text:#d8e5ea;--cc-btn-primary-bg:#a6c4dd;--cc-btn-primary-text:#000;--cc-btn-primary-hover-bg:#c2dff7;--cc-btn-primary-hover-text:var(--cc-btn-primary-text);--cc-btn-secondary-bg:#33383c;--cc-btn-secondary-text:var(--cc-text);--cc-btn-secondary-hover-bg:#3e454a;--cc-btn-secondary-hover-text:var(--cc-btn-secondary-text);--cc-toggle-bg-off:#667481;--cc-toggle-bg-on:var(--cc-btn-primary-bg);--cc-toggle-bg-readonly:#454c54;--cc-toggle-knob-bg:var(--cc-cookie-category-block-bg);--cc-toggle-knob-icon-color:var(--cc-bg);--cc-block-text:#b3bfc5;--cc-cookie-category-block-bg:#23272a;--cc-cookie-category-block-bg-hover:#2b3035;--cc-section-border:#292d31;--cc-cookie-table-border:#2b3035;--cc-webkit-scrollbar-bg:#667481;--cc-webkit-scrollbar-bg-hover:#9199a0}#cc--main{z-index:2147483647;z-index:var(--cc-z-index)}.cc_div *,.cc_div :after,.cc_div :before,.cc_div :hover{animation:none;background:none;border:none;border-radius:unset;box-shadow:none;box-sizing:border-box;color:inherit;float:none;font-family:inherit;font-size:1em;font-style:inherit;font-variant:normal;font-weight:inherit;height:auto;letter-spacing:unset;line-height:1.2;margin:0;padding:0;text-align:left;text-decoration:none;text-transform:none;transition:none;vertical-align:baseline;visibility:unset}.cc_div{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#2d4156;color:var(--cc-text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-family:var(--cc-font-family);font-size:16px;font-size:var(--cc-font-size);font-weight:400;text-rendering:optimizeLegibility}#c-ttl,#s-bl td:before,#s-ttl,.cc_div .b-tl,.cc_div .c-bn{font-weight:600}#cm,#s-bl .act .b-acc,#s-inr,.cc_div .b-tl,.cc_div .c-bl{border-radius:.45rem;border-radius:var(--cc-border-radius)}#s-bl .act .b-acc{border-top-left-radius:0;border-top-right-radius:0}.cc_div a,.cc_div button,.cc_div input{-webkit-appearance:none;-moz-appearance:none;appearance:none;overflow:hidden}.cc_div a{border-bottom:1px solid}.cc_div a:hover{border-color:transparent;text-decoration:none}.cc_div .c-bn>span{pointer-events:none}#cm-ov,#cs-ov,.c--anim #cm,.c--anim #s-cnt,.c--anim #s-inr{transition:visibility .25s linear,opacity .25s ease,transform .25s ease!important}.c--anim .c-bn{transition:background-color .25s ease!important}.c--anim #cm.bar.slide,.c--anim #cm.bar.slide+#cm-ov,.c--anim .bar.slide #s-inr,.c--anim .bar.slide+#cs-ov{transition:visibility .4s ease,opacity .4s ease,transform .4s ease!important}#cm.bar.slide,.cc_div .bar.slide #s-inr{opacity:1;transform:translateX(100%)}#cm.bar.top.slide,.cc_div .bar.left.slide #s-inr{opacity:1;transform:translateX(-100%)}#cm.slide,.cc_div .slide #s-inr{transform:translateY(1.6em)}#cm.top.slide{transform:translateY(-1.6em)}#cm.bar.slide{transform:translateY(100%)}#cm.bar.top.slide{transform:translateY(-100%)}.show--consent .c--anim #cm,.show--consent .c--anim #cm.bar,.show--settings .c--anim #s-inr,.show--settings .c--anim .bar.slide #s-inr{opacity:1;transform:scale(1);visibility:visible!important}.show--consent .c--anim #cm.box.middle,.show--consent .c--anim #cm.cloud.middle{transform:scale(1) translateY(-50%)}.show--settings .c--anim #s-cnt{visibility:visible!important}.force--consent.show--consent .c--anim #cm-ov,.show--settings .c--anim #cs-ov{opacity:.85!important;opacity:var(--cc-overlay-opacity)!important;visibility:visible!important}#cm{background:#fff;background:var(--cc-bg);bottom:1.25em;box-shadow:0 .625em 1.875em #000;box-shadow:0 .625rem 1.875rem rgba(2,2,3,.28);box-shadow:var(--cc-consent-modal-box-shadow);font-family:inherit;line-height:normal;max-width:24.2em;opacity:0;padding:1em 1.4em 1.3em;position:fixed;right:1.25em;transform:scale(.95);visibility:hidden;width:100%;z-index:1}#cc_div #cm{display:block!important}#c-ttl{font-size:1.05em;margin-bottom:.7em}.cloud #c-ttl{margin-top:-.15em}#c-txt{font-size:.9em;line-height:1.5em}.cc_div #c-bns{display:flex;justify-content:space-between;margin-top:1.4em}.cc_div .c-bn{background:#eaeff2;background:var(--cc-btn-secondary-bg);border-radius:.375rem;border-radius:var(--cc-btn-border-radius);color:#2d4156;color:var(--cc-btn-secondary-text);cursor:pointer;display:inline-block;flex:1;font-size:.82em;padding:1em 1.7em;text-align:center;-moz-user-select:none;-webkit-user-select:none;-o-user-select:none;user-select:none}#c-bns button+button,#s-c-bn,#s-cnt button+button{float:right;margin-left:.5rem}#s-cnt #s-rall-bn{float:none}#cm .c_link:active,#cm .c_link:hover,#s-c-bn:active,#s-c-bn:hover,#s-cnt button+button:active,#s-cnt button+button:hover{background:#d8e0e6;background:var(--cc-btn-secondary-hover-bg);color:#2d4156;color:var(--cc-btn-secondary-hover-text)}#s-cnt{display:table;height:100%;left:0;position:fixed;top:0;visibility:hidden;width:100%;z-index:101}#s-bl{outline:none;scrollbar-width:thin}#s-bl .title{margin-top:1.4em}#s-bl .b-bn,#s-bl .title:first-child{margin-top:0}#s-bl .b-acc .p{margin-top:0;padding:1em}#s-cnt .b-bn .b-tl{background:none;display:block;font-family:inherit;font-size:.95em;padding:1.3em 6.4em 1.3em 2.7em;position:relative;transition:background-color .25s ease;width:100%}#s-cnt .b-bn .b-tl.exp{cursor:pointer}#s-cnt .act .b-bn .b-tl{border-bottom-left-radius:0;border-bottom-right-radius:0}#s-cnt .b-bn .b-tl:active,#s-cnt .b-bn .b-tl:hover{background:#e9eff4;background:var(--cc-cookie-category-block-bg-hover)}#s-bl .b-bn{position:relative}#s-bl .c-bl{border:1px solid #f1f3f5;border:1px solid var(--cc-section-border);margin-bottom:.4rem;padding:1em;transition:background-color .25s ease}#s-bl .c-bl:hover{background:#f0f4f7;background:var(--cc-cookie-category-block-bg)}#s-bl .c-bl:last-child{margin-bottom:.5em}#s-bl .c-bl:first-child{border:none;margin-bottom:2em;margin-top:0;padding:0;transition:none}#s-bl .c-bl:not(.b-ex):first-child:hover{background:transparent;background:unset}#s-bl .c-bl.b-ex{background:#f0f4f7;background:var(--cc-cookie-category-block-bg);border:none;padding:0;transition:none}#s-bl .c-bl.b-ex+.c-bl{margin-top:2em}#s-bl .c-bl.b-ex+.c-bl.b-ex{margin-top:0}#s-bl .c-bl.b-ex:first-child{margin-bottom:.5em}#s-bl .b-acc{display:none;margin-bottom:0;max-height:0;overflow:hidden;padding-top:0}#s-bl .act .b-acc{display:block;max-height:100%;overflow:hidden}#s-cnt .p{color:#2d4156;color:var(--cc-block-text);font-size:.9em;line-height:1.5em;margin-top:.85em}.cc_div .b-tg .c-tgl:disabled{cursor:not-allowed}#c-vln{display:table-cell;position:relative;vertical-align:middle}#cs{bottom:0;left:0;padding:0 1.7em;position:fixed;right:0;top:0;width:100%}#cs,#s-inr{height:100%}#s-inr{box-shadow:0 13px 27px -5px rgba(3,6,9,.26);margin:0 auto;max-width:45em;opacity:0;overflow:hidden;padding-bottom:4.75em;padding-top:4.75em;position:relative;transform:scale(.96);visibility:hidden}#s-bns,#s-hdr,#s-inr{background:#fff;background:var(--cc-bg)}#s-bl{display:block;height:100%;overflow-x:hidden;overflow-y:auto;overflow-y:overlay;padding:1.3em 1.6em;width:100%}#s-bns{border-top:1px solid #f1f3f5;border-top:1px solid var(--cc-section-border);bottom:0;height:4.75em;left:0;padding:1em 1.8em;position:absolute;right:0}.cc_div .cc-link{border-bottom:1px solid #2d4156;border-bottom:1px solid var(--cc-btn-primary-bg);color:#2d4156;color:var(--cc-btn-primary-bg);cursor:pointer;display:inline;font-weight:600;padding-bottom:0;text-decoration:none}.cc_div .cc-link:active,.cc_div .cc-link:hover{border-color:transparent}#c-bns button:first-child,#s-bns button:first-child{background:#2d4156;background:var(--cc-btn-primary-bg);color:#fff;color:var(--cc-btn-primary-text)}#c-bns.swap button:first-child{background:#eaeff2;background:var(--cc-btn-secondary-bg);color:#2d4156;color:var(--cc-btn-secondary-text)}#c-bns.swap button:last-child{background:#2d4156;background:var(--cc-btn-primary-bg);color:#fff;color:var(--cc-btn-primary-text)}.cc_div .b-tg .c-tgl:checked~.c-tg{background:#2d4156;background:var(--cc-toggle-bg-on)}#c-bns button:first-child:active,#c-bns button:first-child:hover,#c-bns.swap button:last-child:active,#c-bns.swap button:last-child:hover,#s-bns button:first-child:active,#s-bns button:first-child:hover{background:#1d2e38;background:var(--cc-btn-primary-hover-bg);color:#fff;color:var(--cc-btn-primary-hover-text)}#c-bns.swap button:first-child:active,#c-bns.swap button:first-child:hover{background:#d8e0e6;background:var(--cc-btn-secondary-hover-bg);color:#2d4156;color:var(--cc-btn-secondary-hover-text)}#s-hdr{border-bottom:1px solid #f1f3f5;border-bottom:1px solid var(--cc-section-border);display:table;height:4.75em;padding:0 1.8em;position:absolute;top:0;width:100%;z-index:2}#s-hdr,#s-ttl{vertical-align:middle}#s-ttl{display:table-cell;font-size:1em}#s-c-bn{font-size:1.45em;font-weight:400;height:1.7em;margin:0;overflow:hidden;padding:0;position:relative;width:1.7em}#s-c-bnc{display:table-cell;vertical-align:middle}.cc_div span.t-lb{opacity:0;overflow:hidden;pointer-events:none;position:absolute;top:0;z-index:-1}#c_policy__text{height:31.25em;margin-top:1.25em;overflow-y:auto}#c-s-in{height:100%;height:calc(100% - 2.5em);max-height:37.5em;position:relative;top:50%;transform:translateY(-50%)}@media screen and (min-width:688px){#s-bl::-webkit-scrollbar{background:transparent;border-radius:0 .25em .25em 0;height:100%;width:.8em}#s-bl::-webkit-scrollbar-thumb{background:#cfd5db;background:var(--cc-webkit-scrollbar-bg);border:.25em solid #fff;border:.25em solid var(--cc-bg);border-radius:100em}#s-bl::-webkit-scrollbar-thumb:hover{background:#9199a0;background:var(--cc-webkit-scrollbar-bg-hover)}#s-bl::-webkit-scrollbar-button{height:5px;width:10px}}.cc_div .b-tg{bottom:0;display:inline-block;margin:auto;right:0;right:1.2em;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle}.cc_div .b-tg,.cc_div .b-tg .c-tgl{cursor:pointer;position:absolute;top:0}.cc_div .b-tg .c-tgl{border:0;display:block;left:0;margin:0}.cc_div .b-tg .c-tg{background:#919ea6;background:var(--cc-toggle-bg-off);pointer-events:none;position:absolute;transition:background-color .25s ease,box-shadow .25s ease}.cc_div .b-tg,.cc_div .b-tg .c-tg,.cc_div .b-tg .c-tgl,.cc_div span.t-lb{border-radius:4em;height:1.5em;width:3.4em}.cc_div .b-tg .c-tg.c-ro{cursor:not-allowed}.cc_div .b-tg .c-tgl~.c-tg.c-ro{background:#d5dee2;background:var(--cc-toggle-bg-readonly)}.cc_div .b-tg .c-tgl~.c-tg.c-ro:after{box-shadow:none}.cc_div .b-tg .c-tg:after{background:#fff;background:var(--cc-toggle-knob-bg);border:none;border-radius:100%;box-shadow:0 1px 2px rgba(24,32,35,.36);box-sizing:content-box;content:"";display:block;height:1.25em;left:.125em;position:relative;top:.125em;transition:transform .25s ease;width:1.25em}.cc_div .b-tg .c-tgl:checked~.c-tg:after{transform:translateX(1.9em)}#s-bl table,#s-bl td,#s-bl th{border:none}#s-bl tbody tr{transition:background-color .25s ease}#s-bl tbody tr:hover{background:#e9eff4;background:var(--cc-cookie-category-block-bg-hover)}#s-bl table{border-collapse:collapse;margin:0;overflow:hidden;padding:0;text-align:left;width:100%}#s-bl caption{border-bottom:1px solid #e9edf2;border-bottom:1px solid var(--cc-cookie-table-border);font-size:.9em;font-weight:600;padding:.5rem 1rem}#s-bl td,#s-bl th{font-size:.8em;padding:.8em .625em .8em 1.2em;text-align:left;vertical-align:top}#s-bl th{font-family:inherit;font-weight:600;padding:1em 1rem}#s-bl thead tr:first-child{border-bottom:1px solid #e9edf2;border-bottom:1px solid var(--cc-cookie-table-border)}.force--consent #cs,.force--consent #s-cnt{width:100vw}#cm-ov,#cs-ov{background:#040608;background:var(--cc-overlay-bg);bottom:0;display:none;left:0;opacity:0;position:fixed;right:0;top:0;transition:none;visibility:hidden}.c--anim #cs-ov,.force--consent .c--anim #cm-ov,.force--consent.show--consent #cm-ov,.show--settings #cs-ov{display:block}#cs-ov{z-index:2}.force--consent .cc_div{bottom:0;left:0;position:fixed;top:0;transition:visibility .25s linear;visibility:hidden;width:100%;width:100vw}.force--consent.show--consent .c--anim .cc_div,.force--consent.show--settings .c--anim .cc_div{visibility:visible}.force--consent #cm{position:absolute}.force--consent #cm.bar{max-width:100vw;width:100vw}html.force--consent.show--consent{overflow-y:hidden!important}html.force--consent.show--consent,html.force--consent.show--consent body{height:auto!important;overflow-x:hidden!important}.cc_div .act .b-bn .exp:before,.cc_div .b-bn .exp:before{border:solid #2d4156;border:solid var(--cc-btn-secondary-text);border-width:0 2px 2px 0;content:"";display:inline-block;left:1.2em;margin-right:15px;padding:.2em;position:absolute;top:50%;transform:translateY(-50%) rotate(45deg)}.cc_div .act .b-bn .b-tl:before{transform:translateY(-20%) rotate(225deg)}.cc_div .on-i:before{border:solid #ecf2fa;border:solid var(--cc-toggle-knob-icon-color);border-width:0 2px 2px 0;display:inline-block;left:.75em;padding:.1em .1em .45em;top:.37em}#s-c-bn:after,#s-c-bn:before,.cc_div .on-i:before{content:"";margin:0 auto;position:absolute;transform:rotate(45deg)}#s-c-bn:after,#s-c-bn:before{background:#2d4156;background:var(--cc-btn-secondary-text);border-radius:1em;height:.6em;left:.82em;top:.58em;width:1.5px}#s-c-bn:after{transform:rotate(-45deg)}.cc_div .off-i,.cc_div .on-i{display:block;height:100%;position:absolute;right:0;text-align:center;transition:opacity .15s ease;width:50%}.cc_div .on-i{left:0;opacity:0}.cc_div .off-i:after,.cc_div .off-i:before{background:#ecf2fa;background:var(--cc-toggle-knob-icon-color);content:" ";display:block;height:.7em;margin:0 auto;position:absolute;right:.8em;top:.42em;transform-origin:center;width:.09375em}.cc_div .off-i:before{transform:rotate(45deg)}.cc_div .off-i:after{transform:rotate(-45deg)}.cc_div .b-tg .c-tgl:checked~.c-tg .on-i{opacity:1}.cc_div .b-tg .c-tgl:checked~.c-tg .off-i{opacity:0}#cm.box.middle,#cm.cloud.middle{bottom:auto;top:50%;transform:translateY(-37%)}#cm.box.middle.zoom,#cm.cloud.middle.zoom{transform:scale(.95) translateY(-50%)}#cm.box.center,#cm.cloud{left:1em;margin:0 auto;right:1em}#cm.cloud{max-width:50em;overflow:hidden;padding:1.2em 1.7em;text-align:center;width:unset}.cc_div .cloud #c-inr{display:table;width:100%}.cc_div .cloud #c-inr-i{display:table-cell;padding-right:2.4em;vertical-align:top;width:70%}.cc_div .cloud #c-txt{font-size:.85em}.cc_div .cloud #c-bns{display:table-cell;min-width:170px;vertical-align:middle}#cm.cloud .c-bn{margin:.5rem 0 0;width:100%}#cm.cloud .c-bn:first-child{margin:0}#cm.cloud.left{margin-right:1.25em}#cm.cloud.right{margin-left:1.25em}#cm.bar{border-radius:0;bottom:0;left:0;max-width:100%;padding:2em;position:fixed;right:0;width:100%}#cm.bar #c-inr{margin:0 auto;max-width:32em}#cm.bar #c-bns{max-width:33.75em}#cm.bar #cs{padding:0}.cc_div .bar #c-s-in{height:100%;max-height:100%;top:0;transform:none}.cc_div .bar #s-bl,.cc_div .bar #s-bns,.cc_div .bar #s-hdr{padding-left:1.4em;padding-right:1.4em}.cc_div .bar #cs{padding:0}.cc_div .bar #s-inr{border-radius:0;margin:0 0 0 auto;max-width:32em}.cc_div .bar.left #s-inr{margin-left:0;margin-right:auto}.cc_div .bar #s-bl table,.cc_div .bar #s-bl tbody,.cc_div .bar #s-bl td,.cc_div .bar #s-bl th,.cc_div .bar #s-bl thead,.cc_div .bar #s-bl tr,.cc_div .bar #s-cnt{display:block}.cc_div .bar #s-bl caption{border-bottom:1px solid #e9edf2;border-bottom:1px solid var(--cc-cookie-table-border);border-top:0;display:block}.cc_div .bar #s-bl thead tr{left:-9999px;position:absolute;top:-9999px}.cc_div .bar #s-bl tr{border-top:1px solid #e9edf2;border-top:1px solid var(--cc-cookie-table-border)}.cc_div .bar #s-bl td{border:none;padding-left:35%;position:relative}.cc_div .bar #s-bl td:before{color:#2d4156;color:var(--cc-text);content:attr(data-column);left:1rem;overflow:hidden;padding-right:.625em;position:absolute;text-overflow:ellipsis;white-space:nowrap}#cm.top{bottom:auto;top:1.25em}#cm.left{left:1.25em;right:auto}#cm.right{left:auto;right:1.25em}#cm.bar.left,#cm.bar.right{left:0;right:0}#cm.bar.top{top:0}@media (prefers-reduced-motion){#cc--main #cm,#cc--main #s-cnt,#cc--main #s-inr{transition:none!important}}@media screen and (max-width:688px){#cm,#cm.cloud,#cm.left,#cm.right{bottom:1em;display:block;left:1em;margin:0;max-width:100%;padding:1.2em!important;right:1em;width:auto}.force--consent #cm,.force--consent #cm.cloud{max-width:100vw;width:auto}#cm.top{bottom:auto;top:1em}#cm.bottom{bottom:1em;top:auto}#cm.bar.bottom{bottom:0}#cm.cloud .c-bn{font-size:.85em}#s-bns,.cc_div .bar #s-bns{padding:1em 1.3em}.cc_div .bar #s-inr{max-width:100%;width:100%}.cc_div .cloud #c-inr-i{padding-right:0}#cs{border-radius:0;padding:0}#c-s-in{height:100%;max-height:100%;top:0;transform:none}.cc_div .b-tg{right:1.1em;transform:scale(1.1)}#s-inr{border-radius:0;margin:0;padding-bottom:7.9em}#s-bns{height:7.9em}#s-bl,.cc_div .bar #s-bl{padding:1.2em}#s-hdr,.cc_div .bar #s-hdr{padding:0 1.2em}#s-bl table{width:100%}#s-inr.bns-t{padding-bottom:10.5em}.bns-t #s-bns{height:10.5em}.cc_div .bns-t .c-bn{font-size:.83em;padding:.9em 1.6em}#s-cnt .b-bn .b-tl{padding-bottom:1.2em;padding-top:1.2em}#s-bl table,#s-bl tbody,#s-bl td,#s-bl th,#s-bl thead,#s-bl tr,#s-cnt{display:block}#s-bl caption{border-bottom:0;display:block}#s-bl thead tr{left:-9999px;position:absolute;top:-9999px}#s-bl tr{border-top:1px solid #e9edf2;border-top:1px solid var(--cc-cookie-table-border)}#s-bl td{border:none;padding-left:35%;position:relative}#s-bl td:before{color:#2d4156;color:var(--cc-text);content:attr(data-column);left:1rem;overflow:hidden;padding-right:.625em;position:absolute;text-overflow:ellipsis;white-space:nowrap}#cm .c-bn,.cc_div .c-bn{margin-right:0;width:100%}#s-cnt #s-rall-bn{margin-left:0}.cc_div #c-bns{flex-direction:column}#c-bns button+button,#s-cnt button+button{float:unset;margin-left:0;margin-top:.625em}#cm.box,#cm.cloud{left:1em;right:1em;width:auto}#cm.cloud.left,#cm.cloud.right{margin:0}.cc_div .cloud #c-bns,.cc_div .cloud #c-inr,.cc_div .cloud #c-inr-i{display:block;min-width:unset;width:auto}.cc_div .cloud #c-txt{font-size:.9em}.cc_div .cloud #c-bns{margin-top:1.625em}}.gds-flex{display:flex;gap:var(--gds-gap-none)}.gds-flex-justify-start{justify-content:flex-start}.gds-flex-justify-end{justify-content:flex-end}.gds-flex-justify-center{justify-content:center}.gds-flex-justify-between{justify-content:space-between}.gds-flex-justify-around{justify-content:space-around}.gds-flex-justify-evenly{justify-content:space-evenly}.gds-flex-align-start{align-items:flex-start}.gds-flex-align-end{align-items:flex-end}.gds-flex-align-center{align-items:center}.gds-flex-wrap-nowrap{flex-wrap:nowrap}.gds-flex-wrap-wrap{flex-wrap:wrap}.gds-flex-wrap-wrap-reverse{flex-wrap:wrap-reverse}.gds-flex-direction-row{flex-direction:row}.gds-flex-direction-row-reverse{flex-direction:row-reverse}.gds-flex-direction-column{flex-direction:column}.gds-flex-direction-column-reverse{flex-direction:column-reverse}.gds-flex-gap-small{gap:var(--gds-gap-l)}.gds-flex-gap-medium{gap:var(--gds-gap-xxl)}.gds-flex-gap-large{gap:var(--gds-gap-xxxl)}@layer grid, grid.desktop, grid.tablet, grid.mobile, grid.span, grid.space, grid.align, grid.debug;@layer grid{:root{--gds-grid-col:repeat(4,1fr);--gds-grid-col-start:1;--gds-grid-col-end:-1;--gds-debug-color:rgba(84,82,255,.4);--gds-debug-color-container:rgba(255,82,197,.4);--gds-grid-col-gap:0px}gds-grid{display:grid;width:100%;grid-template-columns:var(--gds-grid-col);grid-column-gap:var(--gds-grid-col-gap);grid-row-gap:var(--gds-grid-row-gap);text-wrap:balance}gds-grid>gds-cell{height:100%}gds-grid[fluid]{--gds-grid-col-count:var(--gds-c);--gds-grid-col-width:200px;--gap-count:calc(var(--gds-grid-col-count) - 1);--total-gap-width:calc(var(--gap-count) * var(--gds-grid-col-gap));--gds-grid-col-width-max:calc((100% - var(--total-gap-width)) / var(--gds-grid-col-count));grid-template-columns:repeat(auto-fill,minmax(max(var(--gds-grid-col-width),var(--gds-grid-col-width-max)),1fr));text-wrap:balance}gds-grid[content-inline=auto]{display:grid;grid-auto-columns:auto;grid-auto-flow:column;grid-template-columns:none}gds-grid[inline-size=max-content]{max-width:-moz-max-content;max-width:max-content}}@layer grid.desktop{gds-grid[columns="1"]{--gds-c:1;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="2"]{--gds-c:2;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="3"]{--gds-c:3;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="4"]{--gds-c:4;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="5"]{--gds-c:5;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="6"]{--gds-c:6;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="7"]{--gds-c:7;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="8"]{--gds-c:8;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="9"]{--gds-c:9;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="10"]{--gds-c:10;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="11"]{--gds-c:11;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="12"]{--gds-c:12;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="13"]{--gds-c:13;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="14"]{--gds-c:14;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="15"]{--gds-c:15;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="16"]{--gds-c:16;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="17"]{--gds-c:17;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="18"]{--gds-c:18;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="19"]{--gds-c:19;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="20"]{--gds-c:20;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="21"]{--gds-c:21;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="22"]{--gds-c:22;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="23"]{--gds-c:23;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="24"]{--gds-c:24;--gds-grid-col:repeat(var(--gds-c),1fr)}}@layer grid.tablet{@media only screen and (max-width:768px){gds-grid[tablet="1"]{--gds-c:1}gds-grid[tablet="2"]{--gds-c:2}gds-grid[tablet="3"]{--gds-c:3}gds-grid[tablet="4"]{--gds-c:4}gds-grid[tablet="5"]{--gds-c:5}gds-grid[tablet="6"]{--gds-c:6}gds-grid[tablet="7"]{--gds-c:7}gds-grid[tablet="8"]{--gds-c:8}gds-grid[tablet="9"]{--gds-c:9}gds-grid[tablet="10"]{--gds-c:10}gds-grid[tablet="11"]{--gds-c:11}gds-grid[tablet="12"]{--gds-c:12}gds-grid[tablet="13"]{--gds-c:13}gds-grid[tablet="14"]{--gds-c:14}gds-grid[tablet="15"]{--gds-c:15}gds-grid[tablet="16"]{--gds-c:16}gds-grid[tablet="17"]{--gds-c:17}gds-grid[tablet="18"]{--gds-c:18}gds-grid[tablet="19"]{--gds-c:19}gds-grid[tablet="20"]{--gds-c:20}gds-grid[tablet="21"]{--gds-c:21}gds-grid[tablet="22"]{--gds-c:22}gds-grid[tablet="23"]{--gds-c:23}gds-grid[tablet="24"]{--gds-c:24}}}@layer grid.mobile{@media only screen and (max-width:425px){gds-grid[mobile="1"]{--gds-c:1}gds-grid[mobile="2"]{--gds-c:2}gds-grid[mobile="3"]{--gds-c:3}gds-grid[mobile="4"]{--gds-c:4}gds-grid[mobile="5"]{--gds-c:5}gds-grid[mobile="6"]{--gds-c:6}gds-grid[mobile="7"]{--gds-c:7}gds-grid[mobile="8"]{--gds-c:8}gds-grid[mobile="9"]{--gds-c:9}gds-grid[mobile="10"]{--gds-c:10}gds-grid[mobile="11"]{--gds-c:11}gds-grid[mobile="12"]{--gds-c:12}gds-grid[mobile="13"]{--gds-c:13}gds-grid[mobile="14"]{--gds-c:14}gds-grid[mobile="15"]{--gds-c:15}gds-grid[mobile="16"]{--gds-c:16}gds-grid[mobile="17"]{--gds-c:17}gds-grid[mobile="18"]{--gds-c:18}gds-grid[mobile="19"]{--gds-c:19}gds-grid[mobile="20"]{--gds-c:20}gds-grid[mobile="21"]{--gds-c:21}gds-grid[mobile="22"]{--gds-c:22}gds-grid[mobile="23"]{--gds-c:23}gds-grid[mobile="24"]{--gds-c:24}}}@layer grid.span{gds-grid>gds-cell[span^="1"]{--gds-grid-col-start:1}gds-grid>gds-cell[span^="2"]{--gds-grid-col-start:2}gds-grid>gds-cell[span^="3"]{--gds-grid-col-start:3}gds-grid>gds-cell[span^="4"]{--gds-grid-col-start:4}gds-grid>gds-cell[span^="5"]{--gds-grid-col-start:5}gds-grid>gds-cell[span^="6"]{--gds-grid-col-start:6}gds-grid>gds-cell[span^="7"]{--gds-grid-col-start:7}gds-grid>gds-cell[span^="8"]{--gds-grid-col-start:8}gds-grid>gds-cell[span^="9"]{--gds-grid-col-start:9}gds-grid>gds-cell[span^="10"]{--gds-grid-col-start:10}gds-grid>gds-cell[span^="11"]{--gds-grid-col-start:11}gds-grid>gds-cell[span^="12"]{--gds-grid-col-start:12}gds-grid>gds-cell[span^="13"]{--gds-grid-col-start:13}gds-grid>gds-cell[span^="14"]{--gds-grid-col-start:14}gds-grid>gds-cell[span^="15"]{--gds-grid-col-start:15}gds-grid>gds-cell[span^="16"]{--gds-grid-col-start:16}gds-grid>gds-cell[span^="17"]{--gds-grid-col-start:17}gds-grid>gds-cell[span^="18"]{--gds-grid-col-start:18}gds-grid>gds-cell[span^="19"]{--gds-grid-col-start:19}gds-grid>gds-cell[span^="20"]{--gds-grid-col-start:20}gds-grid>gds-cell[span^="21"]{--gds-grid-col-start:21}gds-grid>gds-cell[span^="22"]{--gds-grid-col-start:22}gds-grid>gds-cell[span^="23"]{--gds-grid-col-start:23}gds-grid>gds-cell[span^="24"]{--gds-grid-col-start:24}gds-grid>gds-cell[span$="+1"],gds-grid>gds-cell[span="1"]{--gds-grid-col-end:1}gds-grid>gds-cell[span$="+2"],gds-grid>gds-cell[span$="-1"],gds-grid>gds-cell[span="2"]{--gds-grid-col-end:2}gds-grid>gds-cell[span$="+3"],gds-grid>gds-cell[span$="-2"],gds-grid>gds-cell[span="3"]{--gds-grid-col-end:3}gds-grid>gds-cell[span$="+4"],gds-grid>gds-cell[span$="-3"],gds-grid>gds-cell[span="4"]{--gds-grid-col-end:4}gds-grid>gds-cell[span$="+5"],gds-grid>gds-cell[span$="-4"],gds-grid>gds-cell[span="5"]{--gds-grid-col-end:5}gds-grid>gds-cell[span$="+6"],gds-grid>gds-cell[span$="-5"],gds-grid>gds-cell[span="6"]{--gds-grid-col-end:6}gds-grid>gds-cell[span$="+7"],gds-grid>gds-cell[span$="-6"],gds-grid>gds-cell[span="7"]{--gds-grid-col-end:7}gds-grid>gds-cell[span$="+8"],gds-grid>gds-cell[span$="-7"],gds-grid>gds-cell[span="8"]{--gds-grid-col-end:8}gds-grid>gds-cell[span$="+9"],gds-grid>gds-cell[span$="-8"],gds-grid>gds-cell[span="9"]{--gds-grid-col-end:9}gds-grid>gds-cell[span$="+10"],gds-grid>gds-cell[span$="-9"],gds-grid>gds-cell[span="10"]{--gds-grid-col-end:10}gds-grid>gds-cell[span$="+11"],gds-grid>gds-cell[span$="-10"],gds-grid>gds-cell[span="11"]{--gds-grid-col-end:11}gds-grid>gds-cell[span$="+12"],gds-grid>gds-cell[span$="-11"],gds-grid>gds-cell[span="12"]{--gds-grid-col-end:12}gds-grid>gds-cell[span$="+13"],gds-grid>gds-cell[span$="-12"],gds-grid>gds-cell[span="13"]{--gds-grid-col-end:13}gds-grid>gds-cell[span$="+14"],gds-grid>gds-cell[span$="-13"],gds-grid>gds-cell[span="14"]{--gds-grid-col-end:14}gds-grid>gds-cell[span$="+15"],gds-grid>gds-cell[span$="-14"],gds-grid>gds-cell[span="15"]{--gds-grid-col-end:15}gds-grid>gds-cell[span$="+16"],gds-grid>gds-cell[span$="-15"],gds-grid>gds-cell[span="16"]{--gds-grid-col-end:16}gds-grid>gds-cell[span$="+17"],gds-grid>gds-cell[span$="-16"],gds-grid>gds-cell[span="17"]{--gds-grid-col-end:17}gds-grid>gds-cell[span$="+18"],gds-grid>gds-cell[span$="-17"],gds-grid>gds-cell[span="18"]{--gds-grid-col-end:18}gds-grid>gds-cell[span$="+19"],gds-grid>gds-cell[span$="-18"],gds-grid>gds-cell[span="19"]{--gds-grid-col-end:19}gds-grid>gds-cell[span$="+20"],gds-grid>gds-cell[span$="-19"],gds-grid>gds-cell[span="20"]{--gds-grid-col-end:20}gds-grid>gds-cell[span$="+21"],gds-grid>gds-cell[span$="-20"],gds-grid>gds-cell[span="21"]{--gds-grid-col-end:21}gds-grid>gds-cell[span$="+22"],gds-grid>gds-cell[span$="-21"],gds-grid>gds-cell[span="22"]{--gds-grid-col-end:22}gds-grid>gds-cell[span$="+23"],gds-grid>gds-cell[span$="-22"],gds-grid>gds-cell[span="23"]{--gds-grid-col-end:23}gds-grid>gds-cell[span$="+24"],gds-grid>gds-cell[span$="-23"],gds-grid>gds-cell[span="24"]{--gds-grid-col-end:24}gds-grid>gds-cell[span]{grid-column-end:span var(--gds-grid-col-end)}gds-grid>gds-cell[span*="+"],gds-grid>gds-cell[span*="-"],gds-grid>gds-cell[span*=".."]{grid-column-start:var(--gds-grid-col-start)}gds-grid>gds-cell[span*="-"],gds-grid>gds-cell[span*=".."]{grid-column-end:var(--gds-grid-col-end)}gds-grid>gds-cell[span=row]{grid-column:1/-1}}@layer grid.debug{gds-grid[gap-inline=small]{--gds-grid-col-gap:var(--gds-gap-l)}gds-grid[gap-inline=medium]{--gds-grid-col-gap:var(--gds-gap-xxl)}gds-grid[gap-inline=large]{--gds-grid-col-gap:var(--gds-gap-xxxl)}gds-grid[gap-block=small]{--gds-grid-row-gap:var(--gds-gap-l)}gds-grid[gap-block=medium]{--gds-grid-row-gap:var(--gds-gap-xxl)}gds-grid[gap-block=large]{--gds-grid-row-gap:var(--gds-gap-xxxl)}gds-grid[padding-block=small]{padding-block:var(--gds-gap-l)}gds-grid[padding-block=medium]{padding-block:var(--gds-gap-xxl)}gds-grid[padding-block=large]{padding-block:var(--gds-gap-xxxl)}gds-grid[padding-inline=small]{padding-inline:var(--gds-gap-l)}gds-grid[padding-inline=medium]{padding-inline:var(--gds-gap-xxl)}gds-grid[padding-inline=large]{padding-inline:var(--gds-gap-xxxl)}}@layer grid.align{gds-grid[justify=start]{justify-content:start}gds-grid[justify=end]{justify-content:end}gds-grid[justify=center]{justify-content:center}gds-grid[justify=between]{justify-content:space-between}gds-grid[justify=around]{justify-content:space-around}gds-grid[justify=evenly]{justify-content:space-evenly}gds-grid[align=start]{align-items:start}gds-grid[align=end]{align-items:end}gds-grid[align=center]{align-items:center}gds-grid[align=between]{align-items:space-between}gds-grid[align=around]{align-items:space-around}gds-grid[align=evenly]{align-items:space-evenly}}@layer grid.debug{gds-grid[debug]{counter-set:gds-cell;outline:1px solid var(--gds-debug-color-container)}gds-grid[debug]>*{outline:1px dashed var(--gds-debug-color);position:relative}gds-grid[debug]>:before{color:#fff;font-weight:700;display:flex;padding:2px 4px;border-radius:2px;align-items:center;justify-content:center;background-color:var(--gds-debug-color);counter-increment:gds-cell;position:absolute;top:4px;right:4px;font-size:10px;text-align:right;width:2ch}gds-grid[debug]>:before,gds-grid[debug]>:nth-child(n+10):before{content:counter(gds-cell)}}footer.main-footer{grid-area:footer;border-top:1px solid var(--gds-sys-color-stroke-stroke-variant2)}footer.main-footer button.cookie-preferences{background:none;border:none;cursor:pointer;color:currentColor;max-width:-moz-max-content;max-width:max-content}header.main{display:flex;align-items:center;justify-content:space-between;color:var(--gds-sys-color-content-content);background-color:color-mix(in srgb,var(--gds-sys-color-background-background),transparent 4%);font-size:16px;letter-spacing:.1px;line-height:1.25;border-bottom:1px solid var(--gds-sys-color-stroke-stroke-variant2);position:sticky;top:0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:5;max-block-size:var(--header-height);block-size:var(--header-height);padding-inline:var(--gds-gap-l);grid-area:header}header.main .logo{display:flex;position:absolute;inset:auto 0;margin-inline:auto;max-inline-size:-moz-max-content;max-inline-size:max-content}header.main .logo svg{height:24px;width:auto;fill:none;stroke:none}header.main nav{display:flex;align-items:center;height:100%;gap:10px}header.main nav svg{height:16px}header.main .hamburger{min-inline-size:64px;display:flex;gap:10px;border:none;border-bottom:1px solid transparent;background:none;cursor:pointer;align-items:center;gap:1ch;min-block-size:100%;padding:0 16px;transition:var(--transition);color:currentColor}header.main .hamburger.active{border-color:color-mix(in srgb,var(--color-black),transparent 60%)}header.main .hamburger:hover{border-color:color-mix(in srgb,var(--color-black),transparent 80%)}header.main .shortcut{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;font-weight:600;font-size:12px;align-items:center;border-radius:100px;border:1px solid var(--gds-sys-color-stroke-stroke-variant2);background-color:transparent;color:currentColor;display:flex;gap:14px;font-size-adjust:.5rem;margin-inline-end:.4rem;padding:10px 20px 10px 16px;line-height:1;min-block-size:-moz-max-content;min-block-size:max-content;cursor:pointer;transition:all 286ms var(--transition)}@media screen and (max-width:calc(36rem - 1px)){header.main .shortcut{display:none}}header.main .shortcut svg{width:14px;height:14px}header.main .shortcut:hover{background-color:color-mix(in srgb,var(--color-black),transparent 90%)}header.main .github,header.main .theme{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border-radius:200px;transition:var(--transition);text-decoration:none;background-color:transparent;border:none;cursor:pointer;color:currentColor}header.main .github:hover,header.main .theme:hover{background-color:color-mix(in srgb,var(--color-black),transparent 90%)}.cmd{display:flex;position:fixed;inset:0;width:100vw;height:100vh;place-content:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden scroll;z-index:10000;overscroll-behavior:contain;background-color:color-mix(in srgb,#000,transparent 10%);opacity:0;visibility:hidden;transition:var(--transition);pointer-events:none;letter-spacing:.04ch}.cmd.open{opacity:1;visibility:visible;pointer-events:all}.cmd.open main{transform:scale(1)}.cmd main{width:640px;background-color:#0e0f11;border:1px solid #121416;border-radius:8px;min-height:440px;max-height:440px;flex-direction:column;z-index:7;transform-origin:center;transform:scale(.98);transition:var(--transition)}.cmd main,.cmd main form{display:flex;overflow:hidden}.cmd main form{width:100%;align-items:center;background-color:#101114;border-bottom:1px solid #17191c;position:relative;min-height:70px}.cmd main form svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.cmd main form button,.cmd main form label{position:absolute}.cmd main form label{left:24px}.cmd main form button{right:24px}.cmd main form input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;display:flex;width:100%;padding:24px 58px;outline:none;background-color:transparent;font-size:16px;color:#fff}.cmd main form input::-moz-placeholder{color:color-mix(in srgb,#fff,transparent 60%)}.cmd main form input::placeholder{color:color-mix(in srgb,#fff,transparent 60%)}.cmd main form input:-moz-placeholder-shown~button{opacity:0;transform:scale(.8)}.cmd main form input:placeholder-shown~button{opacity:0;transform:scale(.8)}.cmd main form button{border:1px solid #191b1f;background-color:#191b1f;padding:8px;margin:0;aspect-ratio:1/1;border-radius:100px;transition:all .4s;-moz-appearance:none;appearance:none;-webkit-appearance:none;box-sizing:border-box;line-height:0;cursor:pointer}.cmd main form button svg{width:14px;height:14px}.cmd main section{flex:1;overflow-y:auto;padding:24px 14px;gap:12px;overscroll-behavior:contain}.cmd main section,.cmd main section>div{display:flex;flex-direction:column}.cmd main section .category{font-size:12px;padding-inline:12px;color:color-mix(in srgb,#fff,transparent 60%);letter-spacing:.01ch;font-weight:400;pointer-events:none}.cmd main section .list{display:flex;flex-direction:column;font-size:14px;padding-block:10px}.cmd main section .list img{border-radius:100px}.cmd main section .list a{color:#a1a1aa;border-radius:8px;padding:8px 12px;transition:all .2s;justify-content:space-between;outline:none}.cmd main section .list a,.cmd main section .list a .cmdk-item-name{display:flex;align-items:center}.cmd main section .list a .cmdk-item-char{content:attr(data-char);display:flex;width:24px;height:24px;background-color:rgba(240,248,255,.051);border-radius:4px;font-size:10px;font-weight:700;place-content:center;align-items:center;margin-right:8px}.cmd main section .list a .cmdk-item-img{border-radius:100px;margin-right:8px;width:20px;height:auto}.cmd main section .list a:hover .cmdk-options{opacity:1}.cmd main section .list a .cmdk-options{display:flex;gap:8px;opacity:0;transition:all .4s}.cmd main section .list a .cmdk-options svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.cmd main section .list a mark{background-color:hsla(0,0%,100%,0);color:#fff;text-decoration:underline}.cmd main section .list a.focused,.cmd main section .list a:focus,.cmd main section .list a:hover{color:#fff;border-color:#fff;background-color:hsla(0,0%,100%,.04)}.cmd main section .doc-nav-collapse{font-size:14px;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between}.cmd main section .doc-nav-collapse div{display:flex;aspect-ratio:1/1;align-items:center;width:24px;height:24px;border-radius:100px;color:#fff;font-size:18px;justify-content:center;line-height:1}.cmd main section .doc-nav-collapse div svg{width:18px;height:18px;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.cmd main footer{border-top:1px solid #17191c;padding:12px 24px;background-color:#0e0f11;display:flex;justify-content:space-between;align-items:center;color:color-mix(in srgb,#fff,transparent 60%)}.cmd main footer .cmd-options{display:flex;align-items:center;gap:24px;font-size:12px}.cmd main footer .cmd-options div{display:flex;align-items:center;gap:8px}.cmd main footer .cmd-options kbd{border-radius:4px;background-color:#17191c;display:flex;flex:1;width:24px;height:24px;align-items:center;justify-content:center;font-size:18px;color:#fff}.cmd main footer .cmd-options svg{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;width:12px;height:12px}aside.nav{--border-color:var(--gds-sys-color-stroke-stroke-variant2);display:flex;position:fixed;height:100%;z-index:4;background:var(--gds-sys-color-background-background);flex-direction:column;top:var(--header-height);gap:12px;padding:24px;border-right:1px solid var(--border-color);width:320px;min-width:320px;grid-area:sidebar}@media screen and (min-width:62rem){aside.nav{position:sticky;max-height:calc(100vh - var(--header-height));block-size:100vh}}aside.nav details[open] summary svg{transform:scaleY(-1)}aside.nav details summary{list-style:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;transition:var(--transition)}aside.nav details summary::-webkit-details-marker{display:none!important}aside.nav details summary:hover span{background-color:var(--gds-sys-color-state-layers-state-black)}aside.nav details summary a{width:100%;flex:1;transition:var(--transition);text-underline-offset:6px}aside.nav details summary a:hover{-webkit-text-decoration:underline solid 1px;text-decoration:underline solid 1px}aside.nav details summary span{display:flex;min-width:42px;height:42px;align-items:center;justify-content:center;border-radius:200px;transition:var(--transition)}aside.nav details summary span:hover{background-color:var(--gds-sys-color-state-layers-state-black)}aside.nav details summary svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}aside.nav details nav{padding-inline-start:1rem;padding-block-start:4px}aside.nav .pill,aside.nav details a{width:100%;padding:12px 16px;transition:var(--transition);display:flex;justify-content:space-between;align-items:center}aside.nav .pill.active,aside.nav .pill:hover,aside.nav details a.active,aside.nav details a:hover{-webkit-text-decoration:underline solid 1px;text-decoration:underline solid 1px}aside.nav nav{display:flex;flex-direction:column;gap:4px;font-size:16px}aside.nav nav a{width:100%;padding:12px 16px;transition:var(--transition);color:var(--gds-sys-color-content-content);text-underline-offset:6px}aside.nav nav a.active,aside.nav nav a:hover{-webkit-text-decoration:underline solid 1px;text-decoration:underline solid 1px}@layer core{@layer layout.article{.layout-article{grid-area:article;display:grid;grid-template-areas:"sidebar content";grid-template-columns:max-content;grid-template-rows:max-content}}}@layer core{@layer layout.reset{*{box-sizing:border-box;padding:0;margin:0}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}::-moz-selection{background-color:#292929;color:#fefefe}::selection{background-color:#292929;color:#fefefe}li,menu,ol,ul{list-style:none}canvas,img,picture,svg,video{display:block;max-width:100%;height:auto}button,input,select,textarea{font:inherit;color:currentColor}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:currentColor}input::placeholder,textarea::placeholder{opacity:1;color:currentColor}a{color:inherit;text-decoration:inherit}[clamp]{text-overflow:"ellipsis";overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal}[hidden]{display:none}svg:not(.preview svg){height:1lh;width:auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}}}[theme=light]{color-scheme:light;--gds-sys-color-accent-accent-green:#006d31;--gds-sys-color-accent-accent-orange:#ffba30;--gds-sys-color-background-background:#fff;--gds-sys-color-background-background-dim:#f3f3f2;--gds-sys-color-container-container:#f3f3f2;--gds-sys-color-container-container-dim1:#e7e7e4;--gds-sys-color-container-container-dim2:#dadad7;--gds-sys-color-container-container-bright:#fff;--gds-sys-color-container-container-shade1:#353531;--gds-sys-color-container-container-shade2:#1b1b18;--gds-sys-color-container-container-disabled:#f9f9f9;--gds-sys-color-container-container-positive:#006d31;--gds-sys-color-container-container-negative:#ba1d00;--gds-sys-color-content-content:#353531;--gds-sys-color-content-content-inverse:#fff;--gds-sys-color-content-content-secondary:#6a6a62;--gds-sys-color-content-content-positive:#006d31;--gds-sys-color-content-content-negative:#ba1d00;--gds-sys-color-content-content-negative-bright:#fff8f6;--gds-sys-color-content-content-custom-blue-bright:#f8f9ff;--gds-sys-color-content-content-disabled:#9d9d95;--gds-sys-color-custom-custom-blue:#005fac;--gds-sys-color-custom-on-custom-blue:#d4e3ff;--gds-sys-color-custom-custom-blue-bright:#d4e3ff;--gds-sys-color-custom-on-custom-blue-bright:#00315d;--gds-sys-color-custom-custom-green:#003916;--gds-sys-color-custom-on-custom-green:#eaffe8;--gds-sys-color-custom-custom-green-bright:#eaffe8;--gds-sys-color-custom-on-custom-green-bright:#003916;--gds-sys-color-custom-custom-grey:#353531;--gds-sys-color-custom-on-custom-grey:#e7e7e4;--gds-sys-color-custom-custom-grey-bright:#e7e7e4;--gds-sys-color-custom-on-custom-grey-bright:#353531;--gds-sys-color-primary-primary:#353531;--gds-sys-color-state-layers-state-black:rgba(0,0,0,.1);--gds-sys-color-state-layers-state-black-dim1:rgba(0,0,0,.2);--gds-sys-color-state-layers-state-black-dim2:rgba(0,0,0,.4);--gds-sys-color-state-layers-state-black-shade:rgba(0,0,0,.6);--gds-sys-color-state-layers-state-positive:rgba(0,109,49,.1);--gds-sys-color-state-layers-state-positive-dim:rgba(0,109,49,.2);--gds-sys-color-state-layers-state-negative:rgba(186,29,0,.1);--gds-sys-color-state-layers-state-negative-dim:rgba(186,29,0,.2);--gds-sys-color-state-layers-state-custom-blue:rgba(0,95,172,.2);--gds-sys-color-status-information-information:#353531;--gds-sys-color-status-information-on-information:#fff;--gds-sys-color-status-information-information-bright:#f3f3f2;--gds-sys-color-status-information-on-information-bright:#353531;--gds-sys-color-status-negative-negative:#ba1d00;--gds-sys-color-status-negative-on-negative:#fff;--gds-sys-color-status-negative-negative-bright:#ffede9;--gds-sys-color-status-negative-on-negative-bright:#ba1d00;--gds-sys-color-status-warning-warning:#9d6e00;--gds-sys-color-status-warning-on-warning:#fff;--gds-sys-color-status-warning-warning-bright:#ffeed9;--gds-sys-color-status-warning-on-warning-bright:#7d5700;--gds-sys-color-status-positive-positive:#006d31;--gds-sys-color-status-positive-on-positive:#fff;--gds-sys-color-status-positive-positive-bright:#eaffe8;--gds-sys-color-status-positive-on-positive-bright:#006d31;--gds-sys-color-status-notice-notice:#005fac;--gds-sys-color-status-notice-on-notice:#fff;--gds-sys-color-status-notice-notice-bright:#ebf1ff;--gds-sys-color-status-notice-on-notice-bright:#005fac;--gds-sys-color-stroke-stroke:#353531;--gds-sys-color-stroke-stroke-variant1:#85857a;--gds-sys-color-stroke-stroke-variant2:#cececa;--gds-sys-color-stroke-stroke-disabled:#9d9d95;--gds-sys-color-stroke-stroke-notice:#005fac;--gds-sys-color-stroke-stroke-positive:#006d31;--gds-sys-color-stroke-stroke-warning:#7d5700;--gds-sys-color-stroke-stroke-negative:#ba1d00;--gds-sys-color-stroke-stroke-custom-blue:#ba1d00}[theme=dark]{color-scheme:dark;--gds-sys-color-accent-accent-green:#006d31;--gds-sys-color-accent-accent-orange:#ffba30;--gds-sys-color-background-background:#282825;--gds-sys-color-background-background-dim:#353531;--gds-sys-color-container-container:#1b1b18;--gds-sys-color-container-container-dim1:#353531;--gds-sys-color-container-container-dim2:#505049;--gds-sys-color-container-container-bright:#1b1b18;--gds-sys-color-container-container-shade1:#dadad7;--gds-sys-color-container-container-shade2:#353531;--gds-sys-color-container-container-disabled:#42423d;--gds-sys-color-container-container-positive:#006d31;--gds-sys-color-container-container-negative:#d02200;--gds-sys-color-content-content:#e7e7e4;--gds-sys-color-content-content-inverse:#282825;--gds-sys-color-content-content-secondary:#a9a9a2;--gds-sys-color-content-content-positive:#48b265;--gds-sys-color-content-content-negative:#ff7257;--gds-sys-color-content-content-negative-bright:#fff8f6;--gds-sys-color-content-content-custom-blue-bright:#f8f9ff;--gds-sys-color-content-content-disabled:#cececa;--gds-sys-color-custom-custom-blue:#006cc1;--gds-sys-color-custom-on-custom-blue:#bcd6ff;--gds-sys-color-custom-custom-blue-bright:#1992ff;--gds-sys-color-custom-on-custom-blue-bright:#d4e3ff;--gds-sys-color-custom-custom-green:#003916;--gds-sys-color-custom-on-custom-green:#eaffe8;--gds-sys-color-custom-custom-green-bright:#eaffe8;--gds-sys-color-custom-on-custom-green-bright:#003916;--gds-sys-color-custom-custom-grey:#353531;--gds-sys-color-custom-on-custom-grey:#e7e7e4;--gds-sys-color-custom-custom-grey-bright:#e7e7e4;--gds-sys-color-custom-on-custom-grey-bright:#353531;--gds-sys-color-primary-primary:#353531;--gds-sys-color-state-layers-state-black:rgba(0,0,0,.1);--gds-sys-color-state-layers-state-black-dim1:rgba(0,0,0,.2);--gds-sys-color-state-layers-state-black-dim2:rgba(0,0,0,.4);--gds-sys-color-state-layers-state-black-shade:rgba(0,0,0,.6);--gds-sys-color-state-layers-state-positive:rgba(0,109,49,.1);--gds-sys-color-state-layers-state-positive-dim:rgba(0,109,49,.2);--gds-sys-color-state-layers-state-negative:rgba(186,29,0,.1);--gds-sys-color-state-layers-state-negative-dim:rgba(186,29,0,.2);--gds-sys-color-state-layers-state-custom-blue:rgba(0,95,172,.2);--gds-sys-color-status-information-information:#cececa;--gds-sys-color-status-information-on-information:#353531;--gds-sys-color-status-information-information-bright:#353531;--gds-sys-color-status-information-on-information-bright:#f3f3f2;--gds-sys-color-status-negative-negative:#ff8a73;--gds-sys-color-status-negative-on-negative:#ffede9;--gds-sys-color-status-negative-negative-bright:#650b00;--gds-sys-color-status-negative-on-negative-bright:#ffede9;--gds-sys-color-status-warning-warning:#8d6300;--gds-sys-color-status-warning-on-warning:#fff8f3;--gds-sys-color-status-warning-warning-bright:#422c00;--gds-sys-color-status-warning-on-warning-bright:#ffeed9;--gds-sys-color-status-positive-positive:#007b38;--gds-sys-color-status-positive-on-positive:#eaffe8;--gds-sys-color-status-positive-positive-bright:#003916;--gds-sys-color-status-positive-on-positive-bright:#eaffe8;--gds-sys-color-status-notice-notice:#1992ff;--gds-sys-color-status-notice-on-notice:#00264b;--gds-sys-color-status-notice-notice-bright:#00264b;--gds-sys-color-status-notice-on-notice-bright:#ebf1ff;--gds-sys-color-stroke-stroke:#cececa;--gds-sys-color-stroke-stroke-variant1:#505049;--gds-sys-color-stroke-stroke-variant2:#353531;--gds-sys-color-stroke-stroke-disabled:#9d9d95;--gds-sys-color-stroke-stroke-notice:#1992ff;--gds-sys-color-stroke-stroke-positive:#48b265;--gds-sys-color-stroke-stroke-warning:#ae7a00;--gds-sys-color-stroke-stroke-negative:#ff7257;--gds-sys-color-stroke-stroke-custom-blue:#ff5636}@layer core{@layer tokens{:root{--color-white:#fff;--color-black:#1b1b18;--color-alpha:90%;--color-mix:color-mix(in srgb,var(--color-black),transparent var(--color-alpha));--transition:all 248ms cubic-bezier(0.175,0.885,0.32,1.275);--header-height:72px;--gds-fs-base:100%;--gds-fs-display-large:5.125rem;--gds-fs-display-medium:4rem;--gds-fs-display-small:2.5rem;--gds-fs-headline-large:2rem;--gds-fs-headline-medium:1.75rem;--gds-fs-headline-small:1.5rem;--gds-fs-title-large:1.375rem;--gds-fs-title-medium:1rem;--gds-fs-title-small:0.875rem;--gds-fs-body-large:1rem;--gds-fs-body-medium:0.875rem;--gds-fs-body-small:0.75rem;--gds-fs-label-large:1rem;--gds-fs-label-medium:0.875rem;--gds-fs-label-small:0.75rem;--gds-fs-label-information-large:1rem;--gds-fs-label-information-medium:0.875rem;--gds-fs-label-input-large:1rem;--gds-fs-label-input-medium:0.875rem;--gds-fs-label-overline:0.875rem;--gds-lh-display-large:1.0976;--gds-lh-display-medium:1.25;--gds-lh-display-small:1.3077;--gds-lh-headline-large:1.25;--gds-lh-headline-medium:1.125;--gds-lh-headline-small:1.2;--gds-lh-title-large:1.1071;--gds-lh-title-medium:1.5;--gds-lh-title-small:1.4286;--gds-lh-body-large:1.5;--gds-lh-body-medium:1.4286;--gds-lh-body-small:1.3333;--gds-lh-label-large:1.25;--gds-lh-label-medium:1.4286;--gds-lh-label-small:1.3333;--gds-lh-label-information-large:1.25;--gds-lh-label-information-medium:1.4286;--gds-lh-label-input-large:1.25;--gds-lh-label-input-medium:1.4286;--gds-lh-label-overline:1.1667;--gds-fw-light:300;--gds-fw-regular:400;--gds-fw-book:450;--gds-fw-medium:500;--gds-fw-bold:700;--gds-ls-normal:normal;--gds-ls-narrow:-0.04ch;--gds-bp-mobile:425px;--gds-bp-tablet:768px;--gds-bp-desktop-sm:1024px;--gds-bp-desktop-md:1440px;--gds-bp-desktop-lg:2560px;--gds-gap-none:0px;--gds-gap-xs:4px;--gds-gap-s:8px;--gds-gap-m:16px;--gds-gap-l:24px;--gds-gap-xl:32px;--gds-gap-xxl:48px;--gds-gap-xxxl:96px;--gds-paragraph-max:80ch}@media (prefers-color-scheme:dark){[theme=dark]{--color-white:#1b1b18;--color-black:#fff}}@media (prefers-reduced-motion:reduce){:root{--transition:none}}}}@layer core{@layer motion{@layer views{::view-transition-old(root){animation:fade-out 14s ease-in-out 1 forwards}::view-transition-new(root){animation:fade-in 1s ease-in-out 1 forwards}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}}}}@layer core{@layer typography{h1{font-size:var(--gds-fs-display-large);line-height:var(--gds-lh-display-large)}h1,h2{font-weight:450}h2{font-size:var(--gds-fs-headline-medium);line-height:var(--gds-lh-headline-medium)}h3{font-size:var(--gds-fs-title-large);line-height:var(--gds-lh-title-large);font-weight:450}ul{margin-block-end:var(--gds-gap-m)}li+li{margin-block-start:var(--gds-gap-s)}p{font-size:var(--gds-fs-body-large);line-height:var(--gds-lh-body-large);margin-block-end:1rem}p.color-secondary{color:var(--gds-sys-color-content-content-secondary)}strong{font-weight:500}.heading-medium{font-size:1.75rem;font-style:normal;font-weight:400;line-height:2.25rem}.paragraph-medium{font-size:1.5rem;font-style:normal;font-weight:400}.paragraph-medium,.paragraph-medium li{line-height:1.875rem}.paragraph-medium+.paragraph-medium{margin-top:1.875rem}p{font-size:1rem;font-style:normal;font-weight:400;letter-spacing:.0125rem}li,p{line-height:1.5rem}}}.gds-fs-display-large{font-size:var(--gds-fs-display-large);line-height:var(--gds-lh-display-large)}.gds-fs-display-medium{font-size:var(--gds-fs-display-medium);line-height:var(--gds-lh-display-medium)}.gds-fs-display-small{font-size:var(--gds-fs-display-small);line-height:var(--gds-lh-display-small)}.gds-fs-headline-large{font-size:var(--gds-fs-headline-large);line-height:var(--gds-lh-headline-large)}.gds-fs-headline-medium{font-size:var(--gds-fs-headline-medium);line-height:var(--gds-lh-headline-medium)}.gds-fs-headline-small{font-size:var(--gds-fs-headline-small);line-height:var(--gds-lh-headline-small)}.gds-fs-title-large{font-size:var(--gds-fs-title-large);line-height:var(--gds-lh-title-large)}.gds-fs-title-medium{font-size:var(--gds-fs-title-medium);line-height:var(--gds-lh-title-medium)}.gds-fs-title-small{font-size:var(--gds-fs-title-small);line-height:var(--gds-lh-title-small)}.gds-fs-body-large,.gds-fs-body-large-italic{font-size:var(--gds-fs-body-large);line-height:var(--gds-lh-body-large)}.gds-fs-body-medium,.gds-fs-body-medium-italic{font-size:var(--gds-fs-body-medium);line-height:var(--gds-lh-body-medium)}.gds-fs-body-small,.gds-fs-body-small-italic{font-size:var(--gds-fs-body-small);line-height:var(--gds-lh-body-small)}.gds-fs-label-large{font-size:var(--gds-fs-label-large);line-height:var(--gds-lh-label-large)}.gds-fs-label-medium{font-size:var(--gds-fs-label-medium);line-height:var(--gds-lh-label-medium)}.gds-fs-label-small{font-size:var(--gds-fs-label-small);line-height:var(--gds-lh-label-small)}.gds-fs-label-information-large{font-size:var(--gds-fs-label-information-large);line-height:var(--gds-lh-label-information-large)}.gds-fs-label-information-medium{font-size:var(--gds-fs-label-information-medium);line-height:var(--gds-lh-label-information-medium)}.gds-fs-label-input-large{font-size:var(--gds-fs-label-input-large);line-height:var(--gds-lh-label-input-large)}.gds-fs-label-input-medium{font-size:var(--gds-fs-label-input-medium);line-height:var(--gds-lh-label-input-medium)}.gds-fs-label-input-overline{font-size:var(--gds-fs-label-input-overline);line-height:var(--gds-lh-label-input-overline)}.gds-clamp{font-size:clamp(1rem,2.5vw,2rem)}.gds-prose h1{font-size:var(--gds-fs-display-large);line-height:var(--gds-lh-display-large);font-weight:450;margin-block-end:var(--gds-gap-xxl)}.gds-prose h2{font-size:var(--gds-fs-headline-medium);line-height:var(--gds-lh-headline-medium);font-weight:450;margin-block-start:var(--gds-gap-xxxl);margin-block-end:var(--gds-gap-l)}.gds-prose h3{font-size:var(--gds-fs-title-large);line-height:var(--gds-lh-title-large);font-weight:450;margin-block-start:var(--gds-gap-xxl)}.gds-prose h3,.gds-prose ul{margin-block-end:var(--gds-gap-m)}.gds-prose li+li{margin-block-start:var(--gds-gap-s)}.gds-prose p{font-size:var(--gds-fs-body-large);line-height:var(--gds-lh-body-large);margin-block-end:1rem}.gds-prose p.color-secondary{color:var(--gds-sys-color-content-content-secondary)}.gds-prose strong{font-weight:500}@layer core{@layer utility{.text-secondary{color:var(--gds-sys-color-content-content-secondary)}[padding-block]{padding-block:var(--gds-padding-block)}[padding-block][padding-block=small]{--gds-padding-block:var(--gds-gap-l)}[padding-block][padding-block=medium]{--gds-padding-block:var(--gds-gap-xxl)}[padding-block][padding-block=large]{--gds-padding-block:var(--gds-gap-xxxl)}[padding-inline]{padding-inline:var(--gds-padding-inline)}[padding-inline][padding-inline=small]{--gds-padding-inline:var(--gds-gap-l)}[padding-inline][padding-inline=medium]{--gds-padding-inline:var(--gds-gap-xxl)}[padding-inline][padding-inline=large]{--gds-padding-inline:var(--gds-gap-xxxl)}[gap-block]{row-gap:var(--gds-gap-block)}[gap-block][gap-block=small]{--gds-gap-block:var(--gds-gap-l)}[gap-block][gap-block=medium]{--gds-gap-block:var(--gds-gap-xxl)}[gap-block][gap-block=large]{--gds-gap-block:var(--gds-gap-xxxl)}[gap-inline]{-moz-column-gap:var(--gds-gap-inline);column-gap:var(--gds-gap-inline)}[gap-inline][gap-inline=small]{--gds-gap-inline:var(--gds-gap-l)}[gap-inline][gap-inline=medium]{--gds-gap-inline:var(--gds-gap-xxl)}[gap-inline][gap-inline=large]{--gds-gap-inline:var(--gds-gap-xxxl)}[packed]{max-width:-moz-max-content;max-width:max-content}}}@layer core{@layer layout.component{[data-rehype-pretty-code-fragment]{margin-top:1lh}[data-rehype-pretty-code-fragment] pre{border-radius:8px;padding:1lh;overflow-x:scroll;border:1px solid #363b44!important}[data-rehype-pretty-code-fragment] pre:has([data-line-numbers]){padding:1lh 0}[data-line]{padding-block:.2lh}[data-highlighted-line]{background-color:#2d3139;box-shadow:inset 4px 0 0 0 #7f848e}code{display:grid;font-size:16px}code[data-line-numbers]>span{padding-left:2ch;counter-increment:line;gap:1ch}code[data-line-numbers]>span:before{display:inline-block;text-align:right;content:counter(line);color:#fff;font-variant-numeric:tabular-nums;opacity:.2;margin-right:2ch;width:2ch}}}@layer core{html{scroll-behavior:smooth;scroll-snap-type:y mandatory;scroll-snap-stop:always;scroll-padding-top:160px}body{background-color:var(--gds-sys-color-background-background);color:var(--gds-sys-color-content-content);letter-spacing:.1px;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-text-size-adjust:100%;font-family:var(--gds-font-family)}li>a,p>a{text-decoration:underline}:focus-visible{outline-offset:2px;outline-color:currentColor;outline-width:2px;outline-style:solid}@layer blocks}@layer core{@layer layout.main{.layout-main{display:grid;grid-template-areas:"alert alert alert" "header header header" "article article article" "footer footer footer";grid-template-columns:auto 1fr auto;grid-template-rows:max-content;max-width:var(--max-width)}}}@font-face{font-family:"__SEBSansSerif_ac1f9b";src:url(/_next/static/media/ce05ea4eccaa7865-s.p.woff2) format("woff2");font-display:swap;font-weight:700;font-style:normal}@font-face{font-family:"__SEBSansSerif_ac1f9b";src:url(/_next/static/media/364091edb3b3d89a-s.p.woff2) format("woff2");font-display:swap;font-weight:700;font-style:italic}@font-face{font-family:"__SEBSansSerif_ac1f9b";src:url(/_next/static/media/c5c10b6c79e7c8d3-s.p.woff2) format("woff2");font-display:swap;font-weight:450;font-style:normal}@font-face{font-family:"__SEBSansSerif_ac1f9b";src:url(/_next/static/media/16d983cf168ba446-s.p.woff2) format("woff2");font-display:swap;font-weight:450;font-style:italic}@font-face{font-family:"__SEBSansSerif_ac1f9b";src:url(/_next/static/media/a24f32beb6e7a786-s.p.woff2) format("woff2");font-display:swap;font-weight:300;font-style:normal}@font-face{font-family:"__SEBSansSerif_ac1f9b";src:url(/_next/static/media/3fb144034c194814-s.p.woff2) format("woff2");font-display:swap;font-weight:300;font-style:italic}@font-face{font-family:"__SEBSansSerif_ac1f9b";src:url(/_next/static/media/48447be3ff22dbe5-s.p.woff2) format("woff2");font-display:swap;font-weight:500;font-style:normal}@font-face{font-family:"__SEBSansSerif_ac1f9b";src:url(/_next/static/media/682dafca9fbeb220-s.p.woff2) format("woff2");font-display:swap;font-weight:500;font-style:italic}@font-face{font-family:"__SEBSansSerif_ac1f9b";src:url(/_next/static/media/dce4e2eda8daaefa-s.p.woff2) format("woff2");font-display:swap;font-weight:400;font-style:normal}@font-face{font-family:"__SEBSansSerif_ac1f9b";src:url(/_next/static/media/4dd1ca8167407b73-s.p.woff2) format("woff2");font-display:swap;font-weight:400;font-style:italic}@font-face{font-family:"__SEBSansSerif_Fallback_ac1f9b";src:local("Arial");ascent-override:102.29%;descent-override:26.92%;line-gap-override:0.00%;size-adjust:92.88%}.__className_ac1f9b{font-family:"__SEBSansSerif_ac1f9b","__SEBSansSerif_Fallback_ac1f9b"}.__variable_ac1f9b{--gds-font-family:"__SEBSansSerif_ac1f9b","__SEBSansSerif_Fallback_ac1f9b"}
\ No newline at end of file
diff --git a/_next/static/css/b28e6f1c8750624d.css b/_next/static/css/b28e6f1c8750624d.css
new file mode 100644
index 00000000..f48790a9
--- /dev/null
+++ b/_next/static/css/b28e6f1c8750624d.css
@@ -0,0 +1 @@
+.gds-badge{display:flex;flex-direction:column;gap:1ex}.gds-badge .gds-badge-title{font-size:12px;line-height:1.25}.gds-badge .gds-badge-label{text-transform:uppercase;padding:4px 8px;border-radius:4px;background-color:#ebf1ff;color:#005fad;white-space:nowrap;max-width:-moz-max-content;max-width:max-content}.gds-flex{display:flex;gap:var(--gds-gap-none)}.gds-flex-justify-start{justify-content:flex-start}.gds-flex-justify-end{justify-content:flex-end}.gds-flex-justify-center{justify-content:center}.gds-flex-justify-between{justify-content:space-between}.gds-flex-justify-around{justify-content:space-around}.gds-flex-justify-evenly{justify-content:space-evenly}.gds-flex-align-start{align-items:flex-start}.gds-flex-align-end{align-items:flex-end}.gds-flex-align-center{align-items:center}.gds-flex-wrap-nowrap{flex-wrap:nowrap}.gds-flex-wrap-wrap{flex-wrap:wrap}.gds-flex-wrap-wrap-reverse{flex-wrap:wrap-reverse}.gds-flex-direction-row{flex-direction:row}.gds-flex-direction-row-reverse{flex-direction:row-reverse}.gds-flex-direction-column{flex-direction:column}.gds-flex-direction-column-reverse{flex-direction:column-reverse}.gds-flex-gap-small{gap:var(--gds-gap-l)}.gds-flex-gap-medium{gap:var(--gds-gap-xxl)}.gds-flex-gap-large{gap:var(--gds-gap-xxxl)}@layer grid, grid.desktop, grid.tablet, grid.mobile, grid.span, grid.space, grid.align, grid.debug;@layer grid{:root{--gds-grid-col:repeat(4,1fr);--gds-grid-col-start:1;--gds-grid-col-end:-1;--gds-debug-color:rgba(84,82,255,.4);--gds-debug-color-container:rgba(255,82,197,.4);--gds-grid-col-gap:0px}gds-grid{display:grid;width:100%;grid-template-columns:var(--gds-grid-col);grid-column-gap:var(--gds-grid-col-gap);grid-row-gap:var(--gds-grid-row-gap);text-wrap:balance}gds-grid>gds-cell{height:100%}gds-grid[fluid]{--gds-grid-col-count:var(--gds-c);--gds-grid-col-width:200px;--gap-count:calc(var(--gds-grid-col-count) - 1);--total-gap-width:calc(var(--gap-count) * var(--gds-grid-col-gap));--gds-grid-col-width-max:calc((100% - var(--total-gap-width)) / var(--gds-grid-col-count));grid-template-columns:repeat(auto-fill,minmax(max(var(--gds-grid-col-width),var(--gds-grid-col-width-max)),1fr));text-wrap:balance}gds-grid[content-inline=auto]{display:grid;grid-auto-columns:auto;grid-auto-flow:column;grid-template-columns:none}gds-grid[inline-size=max-content]{max-width:-moz-max-content;max-width:max-content}}@layer grid.desktop{gds-grid[columns="1"]{--gds-c:1;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="2"]{--gds-c:2;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="3"]{--gds-c:3;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="4"]{--gds-c:4;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="5"]{--gds-c:5;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="6"]{--gds-c:6;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="7"]{--gds-c:7;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="8"]{--gds-c:8;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="9"]{--gds-c:9;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="10"]{--gds-c:10;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="11"]{--gds-c:11;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="12"]{--gds-c:12;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="13"]{--gds-c:13;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="14"]{--gds-c:14;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="15"]{--gds-c:15;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="16"]{--gds-c:16;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="17"]{--gds-c:17;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="18"]{--gds-c:18;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="19"]{--gds-c:19;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="20"]{--gds-c:20;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="21"]{--gds-c:21;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="22"]{--gds-c:22;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="23"]{--gds-c:23;--gds-grid-col:repeat(var(--gds-c),1fr)}gds-grid[columns="24"]{--gds-c:24;--gds-grid-col:repeat(var(--gds-c),1fr)}}@layer grid.tablet{@media only screen and (max-width:768px){gds-grid[tablet="1"]{--gds-c:1}gds-grid[tablet="2"]{--gds-c:2}gds-grid[tablet="3"]{--gds-c:3}gds-grid[tablet="4"]{--gds-c:4}gds-grid[tablet="5"]{--gds-c:5}gds-grid[tablet="6"]{--gds-c:6}gds-grid[tablet="7"]{--gds-c:7}gds-grid[tablet="8"]{--gds-c:8}gds-grid[tablet="9"]{--gds-c:9}gds-grid[tablet="10"]{--gds-c:10}gds-grid[tablet="11"]{--gds-c:11}gds-grid[tablet="12"]{--gds-c:12}gds-grid[tablet="13"]{--gds-c:13}gds-grid[tablet="14"]{--gds-c:14}gds-grid[tablet="15"]{--gds-c:15}gds-grid[tablet="16"]{--gds-c:16}gds-grid[tablet="17"]{--gds-c:17}gds-grid[tablet="18"]{--gds-c:18}gds-grid[tablet="19"]{--gds-c:19}gds-grid[tablet="20"]{--gds-c:20}gds-grid[tablet="21"]{--gds-c:21}gds-grid[tablet="22"]{--gds-c:22}gds-grid[tablet="23"]{--gds-c:23}gds-grid[tablet="24"]{--gds-c:24}}}@layer grid.mobile{@media only screen and (max-width:425px){gds-grid[mobile="1"]{--gds-c:1}gds-grid[mobile="2"]{--gds-c:2}gds-grid[mobile="3"]{--gds-c:3}gds-grid[mobile="4"]{--gds-c:4}gds-grid[mobile="5"]{--gds-c:5}gds-grid[mobile="6"]{--gds-c:6}gds-grid[mobile="7"]{--gds-c:7}gds-grid[mobile="8"]{--gds-c:8}gds-grid[mobile="9"]{--gds-c:9}gds-grid[mobile="10"]{--gds-c:10}gds-grid[mobile="11"]{--gds-c:11}gds-grid[mobile="12"]{--gds-c:12}gds-grid[mobile="13"]{--gds-c:13}gds-grid[mobile="14"]{--gds-c:14}gds-grid[mobile="15"]{--gds-c:15}gds-grid[mobile="16"]{--gds-c:16}gds-grid[mobile="17"]{--gds-c:17}gds-grid[mobile="18"]{--gds-c:18}gds-grid[mobile="19"]{--gds-c:19}gds-grid[mobile="20"]{--gds-c:20}gds-grid[mobile="21"]{--gds-c:21}gds-grid[mobile="22"]{--gds-c:22}gds-grid[mobile="23"]{--gds-c:23}gds-grid[mobile="24"]{--gds-c:24}}}@layer grid.span{gds-grid>gds-cell[span^="1"]{--gds-grid-col-start:1}gds-grid>gds-cell[span^="2"]{--gds-grid-col-start:2}gds-grid>gds-cell[span^="3"]{--gds-grid-col-start:3}gds-grid>gds-cell[span^="4"]{--gds-grid-col-start:4}gds-grid>gds-cell[span^="5"]{--gds-grid-col-start:5}gds-grid>gds-cell[span^="6"]{--gds-grid-col-start:6}gds-grid>gds-cell[span^="7"]{--gds-grid-col-start:7}gds-grid>gds-cell[span^="8"]{--gds-grid-col-start:8}gds-grid>gds-cell[span^="9"]{--gds-grid-col-start:9}gds-grid>gds-cell[span^="10"]{--gds-grid-col-start:10}gds-grid>gds-cell[span^="11"]{--gds-grid-col-start:11}gds-grid>gds-cell[span^="12"]{--gds-grid-col-start:12}gds-grid>gds-cell[span^="13"]{--gds-grid-col-start:13}gds-grid>gds-cell[span^="14"]{--gds-grid-col-start:14}gds-grid>gds-cell[span^="15"]{--gds-grid-col-start:15}gds-grid>gds-cell[span^="16"]{--gds-grid-col-start:16}gds-grid>gds-cell[span^="17"]{--gds-grid-col-start:17}gds-grid>gds-cell[span^="18"]{--gds-grid-col-start:18}gds-grid>gds-cell[span^="19"]{--gds-grid-col-start:19}gds-grid>gds-cell[span^="20"]{--gds-grid-col-start:20}gds-grid>gds-cell[span^="21"]{--gds-grid-col-start:21}gds-grid>gds-cell[span^="22"]{--gds-grid-col-start:22}gds-grid>gds-cell[span^="23"]{--gds-grid-col-start:23}gds-grid>gds-cell[span^="24"]{--gds-grid-col-start:24}gds-grid>gds-cell[span$="+1"],gds-grid>gds-cell[span="1"]{--gds-grid-col-end:1}gds-grid>gds-cell[span$="+2"],gds-grid>gds-cell[span$="-1"],gds-grid>gds-cell[span="2"]{--gds-grid-col-end:2}gds-grid>gds-cell[span$="+3"],gds-grid>gds-cell[span$="-2"],gds-grid>gds-cell[span="3"]{--gds-grid-col-end:3}gds-grid>gds-cell[span$="+4"],gds-grid>gds-cell[span$="-3"],gds-grid>gds-cell[span="4"]{--gds-grid-col-end:4}gds-grid>gds-cell[span$="+5"],gds-grid>gds-cell[span$="-4"],gds-grid>gds-cell[span="5"]{--gds-grid-col-end:5}gds-grid>gds-cell[span$="+6"],gds-grid>gds-cell[span$="-5"],gds-grid>gds-cell[span="6"]{--gds-grid-col-end:6}gds-grid>gds-cell[span$="+7"],gds-grid>gds-cell[span$="-6"],gds-grid>gds-cell[span="7"]{--gds-grid-col-end:7}gds-grid>gds-cell[span$="+8"],gds-grid>gds-cell[span$="-7"],gds-grid>gds-cell[span="8"]{--gds-grid-col-end:8}gds-grid>gds-cell[span$="+9"],gds-grid>gds-cell[span$="-8"],gds-grid>gds-cell[span="9"]{--gds-grid-col-end:9}gds-grid>gds-cell[span$="+10"],gds-grid>gds-cell[span$="-9"],gds-grid>gds-cell[span="10"]{--gds-grid-col-end:10}gds-grid>gds-cell[span$="+11"],gds-grid>gds-cell[span$="-10"],gds-grid>gds-cell[span="11"]{--gds-grid-col-end:11}gds-grid>gds-cell[span$="+12"],gds-grid>gds-cell[span$="-11"],gds-grid>gds-cell[span="12"]{--gds-grid-col-end:12}gds-grid>gds-cell[span$="+13"],gds-grid>gds-cell[span$="-12"],gds-grid>gds-cell[span="13"]{--gds-grid-col-end:13}gds-grid>gds-cell[span$="+14"],gds-grid>gds-cell[span$="-13"],gds-grid>gds-cell[span="14"]{--gds-grid-col-end:14}gds-grid>gds-cell[span$="+15"],gds-grid>gds-cell[span$="-14"],gds-grid>gds-cell[span="15"]{--gds-grid-col-end:15}gds-grid>gds-cell[span$="+16"],gds-grid>gds-cell[span$="-15"],gds-grid>gds-cell[span="16"]{--gds-grid-col-end:16}gds-grid>gds-cell[span$="+17"],gds-grid>gds-cell[span$="-16"],gds-grid>gds-cell[span="17"]{--gds-grid-col-end:17}gds-grid>gds-cell[span$="+18"],gds-grid>gds-cell[span$="-17"],gds-grid>gds-cell[span="18"]{--gds-grid-col-end:18}gds-grid>gds-cell[span$="+19"],gds-grid>gds-cell[span$="-18"],gds-grid>gds-cell[span="19"]{--gds-grid-col-end:19}gds-grid>gds-cell[span$="+20"],gds-grid>gds-cell[span$="-19"],gds-grid>gds-cell[span="20"]{--gds-grid-col-end:20}gds-grid>gds-cell[span$="+21"],gds-grid>gds-cell[span$="-20"],gds-grid>gds-cell[span="21"]{--gds-grid-col-end:21}gds-grid>gds-cell[span$="+22"],gds-grid>gds-cell[span$="-21"],gds-grid>gds-cell[span="22"]{--gds-grid-col-end:22}gds-grid>gds-cell[span$="+23"],gds-grid>gds-cell[span$="-22"],gds-grid>gds-cell[span="23"]{--gds-grid-col-end:23}gds-grid>gds-cell[span$="+24"],gds-grid>gds-cell[span$="-23"],gds-grid>gds-cell[span="24"]{--gds-grid-col-end:24}gds-grid>gds-cell[span]{grid-column-end:span var(--gds-grid-col-end)}gds-grid>gds-cell[span*="+"],gds-grid>gds-cell[span*="-"],gds-grid>gds-cell[span*=".."]{grid-column-start:var(--gds-grid-col-start)}gds-grid>gds-cell[span*="-"],gds-grid>gds-cell[span*=".."]{grid-column-end:var(--gds-grid-col-end)}gds-grid>gds-cell[span=row]{grid-column:1/-1}}@layer grid.debug{gds-grid[gap-inline=small]{--gds-grid-col-gap:var(--gds-gap-l)}gds-grid[gap-inline=medium]{--gds-grid-col-gap:var(--gds-gap-xxl)}gds-grid[gap-inline=large]{--gds-grid-col-gap:var(--gds-gap-xxxl)}gds-grid[gap-block=small]{--gds-grid-row-gap:var(--gds-gap-l)}gds-grid[gap-block=medium]{--gds-grid-row-gap:var(--gds-gap-xxl)}gds-grid[gap-block=large]{--gds-grid-row-gap:var(--gds-gap-xxxl)}gds-grid[padding-block=small]{padding-block:var(--gds-gap-l)}gds-grid[padding-block=medium]{padding-block:var(--gds-gap-xxl)}gds-grid[padding-block=large]{padding-block:var(--gds-gap-xxxl)}gds-grid[padding-inline=small]{padding-inline:var(--gds-gap-l)}gds-grid[padding-inline=medium]{padding-inline:var(--gds-gap-xxl)}gds-grid[padding-inline=large]{padding-inline:var(--gds-gap-xxxl)}}@layer grid.align{gds-grid[justify=start]{justify-content:start}gds-grid[justify=end]{justify-content:end}gds-grid[justify=center]{justify-content:center}gds-grid[justify=between]{justify-content:space-between}gds-grid[justify=around]{justify-content:space-around}gds-grid[justify=evenly]{justify-content:space-evenly}gds-grid[align=start]{align-items:start}gds-grid[align=end]{align-items:end}gds-grid[align=center]{align-items:center}gds-grid[align=between]{align-items:space-between}gds-grid[align=around]{align-items:space-around}gds-grid[align=evenly]{align-items:space-evenly}}@layer grid.debug{gds-grid[debug]{counter-set:gds-cell;outline:1px solid var(--gds-debug-color-container)}gds-grid[debug]>*{outline:1px dashed var(--gds-debug-color);position:relative}gds-grid[debug]>:before{color:#fff;font-weight:700;display:flex;padding:2px 4px;border-radius:2px;align-items:center;justify-content:center;background-color:var(--gds-debug-color);counter-increment:gds-cell;position:absolute;top:4px;right:4px;font-size:10px;text-align:right;width:2ch}gds-grid[debug]>:before,gds-grid[debug]>:nth-child(n+10):before{content:counter(gds-cell)}}figure.preview{--color:#1b1b18;--cell-lg:56px;--cell-lg-cl:color-mix(in srgb,var(--color),transparent 99%);--cell-sm:8px;--cell-sm-cl:color-mix(in srgb,var(--color),transparent 99%);display:flex;border-radius:12px;align-items:center;justify-content:center;flex-direction:column;aspect-ratio:16/9;position:relative;background-color:#fff;background-image:linear-gradient(to right,transparent calc(var(--cell-lg) - 1px),var(--cell-lg-cl) 1px),linear-gradient(to bottom,transparent calc(var(--cell-lg) - 1px),var(--cell-lg-cl) 1px),linear-gradient(to right,transparent calc(var(--cell-sm) - 1px),var(--cell-sm-cl) 1px),linear-gradient(to bottom,transparent calc(var(--cell-sm) - 1px),var(--cell-sm-cl) 1px);background-repeat:repeat-x,repeat-y,repeat-x,repeat-y;background-size:var(--cell-lg) 100%,100% var(--cell-lg),var(--cell-sm) 100%,100% var(--cell-sm);background-position:50%;border:1px solid color-mix(in srgb,var(--color-black),transparent 94%)}figure.preview p{margin:0;font-size:14px}figure.preview.custom{aspect-ratio:16/9;max-height:var(--gds-pattern-max-height);width:100%;max-width:100%}figure.preview button{display:flex;padding:12px 28px;border-radius:200px;border:1px solid color-mix(in srgb,var(--color-black),transparent 90%);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:var(--color-black);background-color:transparent;cursor:pointer;transition:var(--transition)}figure.preview button:hover{background-color:color-mix(in srgb,var(--color-black),transparent 90%);transform:scale(1.4)}figure.preview~span{content:attr(data-caption);font-size:14px;margin-top:2ex}.taber{--gds-taber-height:56px;position:sticky;margin-top:40px;margin-inline:auto;left:0;right:0;top:var(--header-height);border-radius:0;background-color:color-mix(in srgb,var(--gds-sys-color-background-background),transparent 10%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:4;font-size:16px;width:100%;height:var(--gds-taber-height);justify-content:flex-start;border-bottom:1px solid var(--gds-sys-color-stroke-stroke-variant2)}.taber,.taber a{display:flex;align-items:center}.taber a{color:var(--gds-sys-color-content-content);margin-bottom:-1px;padding:0 24px;height:100%;justify-content:center;border-bottom:2px solid transparent}.taber a.active,.taber a:hover{border-bottom-color:var(--gds-sys-color-primary-primary)}.taber a:hover{background-color:var(--gds-sys-color-container-container-dim1)}.taber a svg{width:14px;height:14px;color:var(--color-black);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.taber a svg path{stroke:currentColor}.gds-tags{display:flex;flex-direction:column;font-size:14px;position:relative;gap:.5lh}.gds-tags .tags-title{font-size:12px;line-height:1.25}.gds-tags ul{display:flex;gap:1ch;padding:0}.gds-tags .gds-tag{display:flex;align-items:center;padding:6px 12px;border-radius:200px;border:1px solid var(--gds-sys-color-stroke-stroke);white-space:nowrap;word-break:normal;max-width:-moz-max-content;max-width:max-content}aside.toc{display:flex;flex-direction:column;overflow:hidden;max-height:100vh;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;position:sticky;top:calc(var(--header-height) + var(--gds-gap-xxl))}aside.toc::-webkit-scrollbar{display:none}aside.toc span{font-size:14px;line-height:1.2;margin-bottom:1ex;color:var(--gds-sys-color-content-content)}aside.toc nav{display:flex;flex-direction:column;font-size:14px;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}aside.toc nav details{margin-top:2ex;margin-bottom:1ex}aside.toc nav details summary{-webkit-appearance:none;-moz-appearance:none;appearance:none;list-style:none;display:flex;align-items:center;justify-content:space-between}aside.toc nav details summary a[data-level="2"]{margin:0}aside.toc nav details summary .disclosure{min-width:24px;min-height:24px;aspect-ratio:1/1;border-radius:200px;display:flex;align-items:center;justify-content:center;cursor:pointer}aside.toc nav details summary .disclosure:hover{background-color:var(--gds-sys-color-state-layers-state-black)}aside.toc nav details[open] summary svg{transform:scaleY(-1)}aside.toc nav a{--_inline-padding:2ch;align-items:center;display:flex;border-left:1px solid transparent;margin-left:-1px;color:var(--gds-sys-color-content-content-secondary)}aside.toc nav a:hover{text-decoration:underline}aside.toc nav a[data-level="1"]{margin-bottom:1ex}aside.toc nav a[data-level="2"]{margin-top:2ex;margin-bottom:1ex;gap:1ch}aside.toc nav a[data-level="2"]:before{content:" ";display:flex;width:6px;height:6px;border-radius:200px;background-color:currentColor}aside.toc nav a[data-level="3"],aside.toc nav a[data-level="4"]{margin-left:2.5px;padding-left:var(--_inline-padding);border-left:1px solid color-mix(in srgb,currentColor,transparent 80%);padding-block:8px}aside.toc nav a.active{color:var(--gds-sys-color-content-content)}aside.toc nav a.active:not([data-level="2"]){border-left-color:var(--gds-sys-color-content-content)}@media only screen and (max-width:993px){.layout.core .toc-sidebar{display:none}}main:has(.taber) .toc{margin-block-start:var(--gds-gap-xxl);top:calc(var(--header-height) + var(--gds-gap-xxl) + var(--gds-gap-xxl))}.trail{display:flex;margin-block-end:40px;font-size:14px;line-height:1.25}.trail ul{display:flex;flex-direction:row;align-items:center;gap:10px;padding:0}.trail ul li{text-transform:capitalize;list-style:none;text-underline-offset:3px}.trail ul li.active a{pointer-events:none;text-decoration:none}@layer core{@layer layout.content{.layout-content{grid-area:content;inline-size:100%;max-inline-size:var(--gds-bp-desktop-md);margin-inline:auto}.layout-content ul{margin-block:0;margin-inline:0;padding-left:2ch}.layout-content ul li{list-style:disc}}}
\ No newline at end of file
diff --git a/_next/static/hpoRLZpwKnQAWkWoQzoO1/_buildManifest.js b/_next/static/hpoRLZpwKnQAWkWoQzoO1/_buildManifest.js
new file mode 100644
index 00000000..72250943
--- /dev/null
+++ b/_next/static/hpoRLZpwKnQAWkWoQzoO1/_buildManifest.js
@@ -0,0 +1 @@
+self.__BUILD_MANIFEST={__rewrites:{afterFiles:[],beforeFiles:[],fallback:[]},"/_error":["static/chunks/pages/_error-e87e5963ec1b8011.js"],sortedPages:["/_app","/_error"]},self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();
\ No newline at end of file
diff --git a/_next/static/hpoRLZpwKnQAWkWoQzoO1/_ssgManifest.js b/_next/static/hpoRLZpwKnQAWkWoQzoO1/_ssgManifest.js
new file mode 100644
index 00000000..a51848a6
--- /dev/null
+++ b/_next/static/hpoRLZpwKnQAWkWoQzoO1/_ssgManifest.js
@@ -0,0 +1 @@
+self.__SSG_MANIFEST=new Set(["\u002Fchangelog\u002F[slug]","\u002Fcomponent\u002F[slug]","\u002Fcomponent\u002F[slug]\u002Faccessibility","\u002Fcomponent\u002F[slug]\u002Fcode","\u002Fcomponent\u002F[slug]\u002Fdesign","\u002Fcomponent\u002F[slug]\u002Fux-text"]);self.__SSG_MANIFEST_CB&&self.__SSG_MANIFEST_CB()
\ No newline at end of file
diff --git a/about.html b/about.html
index 8607e17a..c4215942 100644
--- a/about.html
+++ b/about.html
@@ -1,5 +1,5 @@
-About — Green
This is the staging site of seb.io, The Green Design System is work in progress and not ready to use, but feel free to explore!
About
Green Design System is the design system for Skandinaviska Enskilda Banken to make it easier and faster to build beautiful digital products and experiences under the SEB brand.
What is Green?
Green Design System is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels.
In order to have velocity when building digital products and keep a cohesive user experience cross channels and platforms designers and developers should use the Green Design System.
By using pre-built components for design tools and front-end frameworks the time teams spend designing and building is minimized. Instead of spending time on building and re-building the same components in multiple teams, teams can spend that time on addressing specific user needs to improve user experience.
The design system is called Green as an homage to SEB being viewed as the green bank with green as a primary colour for the brand and the bank. The bank also plays a great role in the transition to a net zero society and has a focus on sustainability and helpingit's clients to become more sustainable. The design system initative was also seen as a Greenfieldproject.
How Green works
The Green Design System is a federated design system where the Green Design System Team is the central team who is dedicated to maintain the design system and other team at SEB or external contributors contribute to the design system with insights, design andcode.
Maintaining and educating
Navigating the world of Green Design System involves more than just design and code. Delve into our Figma libraries, explore diverse code implementations, and leverage our comprehensive documentation. We're committed to supporting your journey with coaching sessions tailored for both design intricacies and development challenges.
Figma is our go to design tool and we maintain multiple Figma libraries, components and variables.
Green supports both Angular and React but the core is built with Webcomponents using Lit.
We use this site to document how to use our design kits and coded components as well as our design patterns and general user interface guidelines.
We know that learing and using a new system can be hard and we are here to help and make your journey in the design system a more pleasant one.
Some problems that you run into can be too large to use your keyboard to explain so we have ongoing coaching sessions at your disposal. We have two different coaching session regarding design and development at SEB: Green Coaching and CX Coaching. Both of these meetings are slot based meeting where you bring your questions and problems and discuss them with members from the Green Design System team.
Green Design System is built on contributions from
+
About — Green
This is the staging site of seb.io, The Green Design System is work in progress and not ready to use, but feel free to explore!
About
Green Design System is the design system for Skandinaviska Enskilda Banken to make it easier and faster to build beautiful digital products and experiences under the SEB brand.
What is Green?
Green Design System is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels.
In order to have velocity when building digital products and keep a cohesive user experience cross channels and platforms designers and developers should use the Green Design System.
By using pre-built components for design tools and front-end frameworks the time teams spend designing and building is minimized. Instead of spending time on building and re-building the same components in multiple teams, teams can spend that time on addressing specific user needs to improve user experience.
The design system is called Green as an homage to SEB being viewed as the green bank with green as a primary colour for the brand and the bank. The bank also plays a great role in the transition to a net zero society and has a focus on sustainability and helpingit's clients to become more sustainable. The design system initative was also seen as a Greenfieldproject.
How Green works
The Green Design System is a federated design system where the Green Design System Team is the central team who is dedicated to maintain the design system and other team at SEB or external contributors contribute to the design system with insights, design andcode.
Maintaining and educating
Navigating the world of Green Design System involves more than just design and code. Delve into our Figma libraries, explore diverse code implementations, and leverage our comprehensive documentation. We're committed to supporting your journey with coaching sessions tailored for both design intricacies and development challenges.
Figma is our go to design tool and we maintain multiple Figma libraries, components and variables.
Green supports both Angular and React but the core is built with Webcomponents using Lit.
We use this site to document how to use our design kits and coded components as well as our design patterns and general user interface guidelines.
We know that learing and using a new system can be hard and we are here to help and make your journey in the design system a more pleasant one.
Some problems that you run into can be too large to use your keyboard to explain so we have ongoing coaching sessions at your disposal. We have two different coaching session regarding design and development at SEB: Green Coaching and CX Coaching. Both of these meetings are slot based meeting where you bring your questions and problems and discuss them with members from the Green Design System team.
Green Design System is built on contributions from
everyone. Product teams at SEB have the best knowledge what their product's end user needs. That's why it's vital that everyone contributes with what's
possible. That can be everything from insights regarding a specific component or pull requests with a complete feature
or a design updates in a Figma branch.
Contact us
We want to hear from you so don't be a stranger. You can
- always reach out to us in the following ways:
\ No newline at end of file
diff --git a/changelog.txt b/changelog.txt
index 0c659866..ade39703 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,7 +1,7 @@
2:I[5250,["250","static/chunks/250-3a85ee001665a1f0.js","141","static/chunks/app/changelog/page-f4defbeba4bc0923.js"],""]
3:I[5613,[],""]
4:I[1778,[],""]
-5:I[8980,["250","static/chunks/250-3a85ee001665a1f0.js","165","static/chunks/165-84104a2c8d589bb7.js","214","static/chunks/214-c874259fc4bbccff.js","640","static/chunks/640-55646cae222024ea.js","746","static/chunks/746-cd3122adf025bc8d.js","185","static/chunks/app/layout-6f632244c77869b4.js"],""]
-0:["NsMNV3vy3XTVnkoNDrSIL",[[["",{"children":["changelog",{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",{"children":["changelog",{"children":["__PAGE__",{},["$L1",["$","section",null,{"className":"layout changelog","children":[["$","h1",null,{"className":"heading-medium","children":"Changelogs"}],["$","section",null,{"children":[["$","article",null,{"id":"1.0.0-beta.1","className":"log","children":[["$","aside",null,{"children":[["$","div",null,{"children":"1.0.0-beta.1"}],["$","time",null,{"dateTime":"2023-12-12T00:00:00.000Z","children":"12.12.23"}]]}],["$","div",null,{"children":[["$","h2",null,{"children":["$","$L2",null,{"href":"/changelog/1.0.0-beta.1","children":"v1.0.0-beta.1"}]}],["$","p",null,{"children":"We are proud to announce the first scaled down version of a new documentation site for Green Design System"}]]}]]}]]}]]}],null]]},[null,["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","changelog","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/6b9386ed8b99cf89.css","precedence":"next","crossOrigin":""}]]}],null]]},[null,["$","$L5",null,{"children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"className":"layout core 404","children":[["$","h1",null,{"className":"heading-medium","children":"404 - Page Not Found"}],["$","$L2",null,{"href":"/components","children":"Go to components"}]]}],"notFoundStyles":[],"styles":null}],"params":{}}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/809f5ed4c43f9231.css","precedence":"next","crossOrigin":""}]],"$L6"]]]]
+5:I[8980,["250","static/chunks/250-3a85ee001665a1f0.js","165","static/chunks/165-84104a2c8d589bb7.js","214","static/chunks/214-c874259fc4bbccff.js","640","static/chunks/640-55646cae222024ea.js","746","static/chunks/746-d043ffdc3efe63aa.js","185","static/chunks/app/layout-86853f93f1fd61ce.js"],""]
+0:["hpoRLZpwKnQAWkWoQzoO1",[[["",{"children":["changelog",{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",{"children":["changelog",{"children":["__PAGE__",{},["$L1",["$","section",null,{"className":"layout changelog","children":[["$","h1",null,{"className":"heading-medium","children":"Changelogs"}],["$","section",null,{"children":[["$","article",null,{"id":"1.0.0-beta.1","className":"log","children":[["$","aside",null,{"children":[["$","div",null,{"children":"1.0.0-beta.1"}],["$","time",null,{"dateTime":"2023-12-12T00:00:00.000Z","children":"12.12.23"}]]}],["$","div",null,{"children":[["$","h2",null,{"children":["$","$L2",null,{"href":"/changelog/1.0.0-beta.1","children":"v1.0.0-beta.1"}]}],["$","p",null,{"children":"We are proud to announce the first scaled down version of a new documentation site for Green Design System"}]]}]]}]]}]]}],null]]},[null,["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","changelog","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/6b9386ed8b99cf89.css","precedence":"next","crossOrigin":""}]]}],null]]},[null,["$","$L5",null,{"children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"className":"layout core 404","children":[["$","h1",null,{"className":"heading-medium","children":"404 - Page Not Found"}],["$","$L2",null,{"href":"/components","children":"Go to components"}]]}],"notFoundStyles":[],"styles":null}],"params":{}}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/52d73d3459c06a42.css","precedence":"next","crossOrigin":""}]],"$L6"]]]]
6:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Changelog — Green "}],["$","meta","3",{"name":"description","content":"Green Design System"}],["$","link","4",{"rel":"canonical","href":"https://seb.io/changelog/changelog"}],["$","meta","5",{"property":"og:title","content":"Changelog — Green "}],["$","meta","6",{"property":"og:description","content":"Green Design System"}],["$","meta","7",{"property":"og:image","content":"https://seb.io/changelog/og?title=Changelog"}],["$","meta","8",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","9",{"name":"twitter:title","content":"Changelog — Green "}],["$","meta","10",{"name":"twitter:description","content":"Green Design System"}],["$","meta","11",{"name":"twitter:image","content":"https://seb.io/changelog/og?title=Changelog"}],["$","meta","12",{"name":"next-size-adjust"}]]
1:null
diff --git a/changelog/1.0.0-beta.1.html b/changelog/1.0.0-beta.1.html
index fec477bc..85b0af51 100644
--- a/changelog/1.0.0-beta.1.html
+++ b/changelog/1.0.0-beta.1.html
@@ -1,4 +1,4 @@
-Changelog — Green
This is the staging site of seb.io, The Green Design System is work in progress and not ready to use, but feel free to explore!
v1.0.0-beta.1
We are proud to announce the first version of a new documentation site for Green Design System. We've been working hard on getting this out the door and we couldn't wait to show what we've been working on.
+Changelog — Green
This is the staging site of seb.io, The Green Design System is work in progress and not ready to use, but feel free to explore!
v1.0.0-beta.1
We are proud to announce the first version of a new documentation site for Green Design System. We've been working hard on getting this out the door and we couldn't wait to show what we've been working on.
It's still early in the development of design and code in Green Design System and most is a subject to change but we wanted to show where this is heading and where we are right now.
The site is built using Next.JS as a static site to be blazingly fast.
The site support both light mode and dark mode and listens to the users preference. It can be toggled on the site and this override the system preference if wanted.
The site support both light mode and dark mode and listens to the users preference. It can be toggled on the site and this override the system preference if wanted.
\ No newline at end of file
diff --git a/changelog/1.0.0-beta.1.txt b/changelog/1.0.0-beta.1.txt
index 8dc4167b..eb7b59fd 100644
--- a/changelog/1.0.0-beta.1.txt
+++ b/changelog/1.0.0-beta.1.txt
@@ -1,7 +1,7 @@
-2:I[9038,["746","static/chunks/746-cd3122adf025bc8d.js","64","static/chunks/app/changelog/%5Bslug%5D/page-f638b69dc30f8d98.js"],"Mdx"]
+2:I[9038,["746","static/chunks/746-d043ffdc3efe63aa.js","64","static/chunks/app/changelog/%5Bslug%5D/page-f638b69dc30f8d98.js"],"Mdx"]
4:I[5613,[],""]
6:I[1778,[],""]
-7:I[8980,["250","static/chunks/250-3a85ee001665a1f0.js","165","static/chunks/165-84104a2c8d589bb7.js","214","static/chunks/214-c874259fc4bbccff.js","640","static/chunks/640-55646cae222024ea.js","746","static/chunks/746-cd3122adf025bc8d.js","185","static/chunks/app/layout-6f632244c77869b4.js"],""]
+7:I[8980,["250","static/chunks/250-3a85ee001665a1f0.js","165","static/chunks/165-84104a2c8d589bb7.js","214","static/chunks/214-c874259fc4bbccff.js","640","static/chunks/640-55646cae222024ea.js","746","static/chunks/746-d043ffdc3efe63aa.js","185","static/chunks/app/layout-86853f93f1fd61ce.js"],""]
8:I[5250,["250","static/chunks/250-3a85ee001665a1f0.js","141","static/chunks/app/changelog/page-f4defbeba4bc0923.js"],""]
3:Tcad,var Component=(()=>{var l=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),w=(t,e)=>{for(var i in e)r(t,i,{get:e[i],enumerable:!0})},o=(t,e,i,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of g(e))!p.call(t,s)&&s!==i&&r(t,s,{get:()=>e[s],enumerable:!(a=u(e,s))||a.enumerable});return t};var b=(t,e,i)=>(i=t!=null?l(m(t)):{},o(e||!t||!t.__esModule?r(i,"default",{value:t,enumerable:!0}):i,t)),x=t=>o(r({},"__esModule",{value:!0}),t);var d=f((k,h)=>{h.exports=_jsx_runtime});var D={};w(D,{default:()=>j,frontmatter:()=>y});var n=b(d()),y={title:"v1.0.0-beta.1",version:"1.0.0-beta.1",date:new Date(17023392e5),global_id:"log20",summary:"We are proud to announce the first scaled down version of a new documentation site for Green Design System"};function c(t){let e=Object.assign({p:"p",h2:"h2",a:"a",h3:"h3",ul:"ul",li:"li"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:"We are proud to announce the first version of a new documentation site for Green Design System. We've been working hard on getting this out the door and we couldn't wait to show what we've been working on."}),`
`,(0,n.jsx)(e.p,{children:"It's still early in the development of design and code in Green Design System and most is a subject to change but we wanted to show where this is heading and where we are right now."}),`
@@ -18,6 +18,6 @@
`,(0,n.jsx)(e.h3,{id:"lightdark-mode",children:(0,n.jsx)(e.a,{className:"anchor",href:"#lightdark-mode",children:"Light/Dark mode"})}),`
`,(0,n.jsx)(e.p,{children:"The site support both light mode and dark mode and listens to the users preference. It can be toggled on the site and this override the system preference if wanted."})]})}function v(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(c,t)})):c(t)}var j=v;return x(D);})();
;return Component;5:["slug","1.0.0-beta.1","d"]
-0:["NsMNV3vy3XTVnkoNDrSIL",[[["",{"children":["changelog",{"children":[["slug","1.0.0-beta.1","d"],{"children":["__PAGE__?{\"slug\":\"1.0.0-beta.1\"}",{}]}]}]},"$undefined","$undefined",true],["",{"children":["changelog",{"children":[["slug","1.0.0-beta.1","d"],{"children":["__PAGE__",{},["$L1",["$","section",null,{"className":"layout changelog","children":["$","section",null,{"children":["$","article",null,{"id":"1.0.0-beta.1","className":"log","children":["$","main",null,{"children":[["$","h1",null,{"children":"v1.0.0-beta.1"}],["$","$L2",null,{"code":"$3","globals":{"slug":"1.0.0-beta.1"}}]]}]}]}]}],null]]},[null,["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","changelog","children","$5","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/48adc22cbd10dcbd.css","precedence":"next","crossOrigin":""}]]}],null]]},[null,["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","changelog","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],null]]},[null,["$","$L7",null,{"children":["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"className":"layout core 404","children":[["$","h1",null,{"className":"heading-medium","children":"404 - Page Not Found"}],["$","$L8",null,{"href":"/components","children":"Go to components"}]]}],"notFoundStyles":[],"styles":null}],"params":{}}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/809f5ed4c43f9231.css","precedence":"next","crossOrigin":""}]],"$L9"]]]]
+0:["hpoRLZpwKnQAWkWoQzoO1",[[["",{"children":["changelog",{"children":[["slug","1.0.0-beta.1","d"],{"children":["__PAGE__?{\"slug\":\"1.0.0-beta.1\"}",{}]}]}]},"$undefined","$undefined",true],["",{"children":["changelog",{"children":[["slug","1.0.0-beta.1","d"],{"children":["__PAGE__",{},["$L1",["$","section",null,{"className":"layout changelog","children":["$","section",null,{"children":["$","article",null,{"id":"1.0.0-beta.1","className":"log","children":["$","main",null,{"children":[["$","h1",null,{"children":"v1.0.0-beta.1"}],["$","$L2",null,{"code":"$3","globals":{"slug":"1.0.0-beta.1"}}]]}]}]}]}],null]]},[null,["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","changelog","children","$5","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/48adc22cbd10dcbd.css","precedence":"next","crossOrigin":""}]]}],null]]},[null,["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","changelog","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],null]]},[null,["$","$L7",null,{"children":["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"className":"layout core 404","children":[["$","h1",null,{"className":"heading-medium","children":"404 - Page Not Found"}],["$","$L8",null,{"href":"/components","children":"Go to components"}]]}],"notFoundStyles":[],"styles":null}],"params":{}}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/52d73d3459c06a42.css","precedence":"next","crossOrigin":""}]],"$L9"]]]]
9:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Changelog — Green "}],["$","meta","3",{"name":"description","content":"Green Design System"}],["$","link","4",{"rel":"canonical","href":"https://seb.io/changelog/changelog"}],["$","meta","5",{"property":"og:title","content":"Changelog — Green "}],["$","meta","6",{"property":"og:description","content":"Green Design System"}],["$","meta","7",{"property":"og:image","content":"https://seb.io/changelog/og?title=Changelog"}],["$","meta","8",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","9",{"name":"twitter:title","content":"Changelog — Green "}],["$","meta","10",{"name":"twitter:description","content":"Green Design System"}],["$","meta","11",{"name":"twitter:image","content":"https://seb.io/changelog/og?title=Changelog"}],["$","meta","12",{"name":"next-size-adjust"}]]
1:null
diff --git a/component.html b/component.html
index 90a17111..26f83d06 100644
--- a/component.html
+++ b/component.html
@@ -1 +1 @@
-
This is the staging site of seb.io, The Green Design System is work in progress and not ready to use, but feel free to explore!
We use breadcrumbs to display site hierarchy (rather than navigation path) and to increase findability of parent pages.
Breadcrumbs help users navigate upward in the hierarchy and typically help with back-movement also. They also help with context when navigation is otherwise out of sight (for example in a mobile view).
Breadcrumbs have been proven to reduce bounce rates for search-users, when they are able to quickly find related pages.
\ No newline at end of file
diff --git a/component/breadcrumb.txt b/component/breadcrumb.txt
index 2ecf136c..d6dbfd0b 100644
--- a/component/breadcrumb.txt
+++ b/component/breadcrumb.txt
@@ -1,9 +1,9 @@
-2:I[9038,["214","static/chunks/214-c874259fc4bbccff.js","746","static/chunks/746-cd3122adf025bc8d.js","985","static/chunks/app/component/%5Bslug%5D/page-872403ce6a41d739.js"],"Mdx"]
-4:I[5935,["214","static/chunks/214-c874259fc4bbccff.js","746","static/chunks/746-cd3122adf025bc8d.js","985","static/chunks/app/component/%5Bslug%5D/page-872403ce6a41d739.js"],""]
-5:I[5006,["250","static/chunks/250-3a85ee001665a1f0.js","474","static/chunks/474-624fdc4faaf3c42b.js","746","static/chunks/746-cd3122adf025bc8d.js","162","static/chunks/app/component/%5Bslug%5D/layout-de930432df895ddb.js"],""]
+2:I[9038,["214","static/chunks/214-c874259fc4bbccff.js","746","static/chunks/746-d043ffdc3efe63aa.js","985","static/chunks/app/component/%5Bslug%5D/page-658edaca3febe46f.js"],"Mdx"]
+4:I[5935,["214","static/chunks/214-c874259fc4bbccff.js","746","static/chunks/746-d043ffdc3efe63aa.js","985","static/chunks/app/component/%5Bslug%5D/page-658edaca3febe46f.js"],""]
+5:I[5006,["250","static/chunks/250-3a85ee001665a1f0.js","474","static/chunks/474-624fdc4faaf3c42b.js","746","static/chunks/746-d043ffdc3efe63aa.js","162","static/chunks/app/component/%5Bslug%5D/layout-fe88189729dfe5a6.js"],""]
6:I[5613,[],""]
8:I[1778,[],""]
-9:I[8980,["250","static/chunks/250-3a85ee001665a1f0.js","165","static/chunks/165-84104a2c8d589bb7.js","214","static/chunks/214-c874259fc4bbccff.js","640","static/chunks/640-55646cae222024ea.js","746","static/chunks/746-cd3122adf025bc8d.js","185","static/chunks/app/layout-6f632244c77869b4.js"],""]
+9:I[8980,["250","static/chunks/250-3a85ee001665a1f0.js","165","static/chunks/165-84104a2c8d589bb7.js","214","static/chunks/214-c874259fc4bbccff.js","640","static/chunks/640-55646cae222024ea.js","746","static/chunks/746-d043ffdc3efe63aa.js","185","static/chunks/app/layout-86853f93f1fd61ce.js"],""]
a:I[5250,["250","static/chunks/250-3a85ee001665a1f0.js","160","static/chunks/app/not-found-4d0ae7f5c5b2c975.js"],""]
3:Tf11,var Component=(()=>{var p=Object.create;var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var w=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),g=(a,e)=>{for(var r in e)o(a,r,{get:e[r],enumerable:!0})},s=(a,e,r,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of u(e))!f.call(a,i)&&i!==r&&o(a,i,{get:()=>e[i],enumerable:!(t=m(e,i))||t.enumerable});return a};var v=(a,e,r)=>(r=a!=null?p(b(a)):{},s(e||!a||!a.__esModule?o(r,"default",{value:a,enumerable:!0}):r,a)),y=a=>s(o({},"__esModule",{value:!0}),a);var c=w((F,h)=>{h.exports=_jsx_runtime});var j={};g(j,{default:()=>_,frontmatter:()=>k});var n=v(c()),k={title:"Breadcrumb",summary:"A breadcrumb is a secondary navigation showing the website hierarchy.",date:new Date(17109792e5),global_id:"breadcrumb",status:"work in progress",tags:"navigation",node:"782-3342"};function d(a){let e=Object.assign({h2:"h2",a:"a",p:"p",h3:"h3"},a.components),{Grid:r,Figma:t}=e;return t||l("Figma",!0),r||l("Grid",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{id:"overview",children:(0,n.jsx)(e.a,{className:"anchor",href:"#overview",children:"Overview"})}),`
`,(0,n.jsx)(e.p,{children:"We use breadcrumbs to display site hierarchy (rather than navigation path) and to increase findability of parent pages."}),`
@@ -16,6 +16,6 @@ a:I[5250,["250","static/chunks/250-3a85ee001665a1f0.js","160","static/chunks/app
`,(0,n.jsxs)(r,{columns:2,gapInline:"small",children:[(0,n.jsxs)("div",{children:[(0,n.jsx)(e.h3,{id:"truncated-desktop",children:(0,n.jsx)(e.a,{className:"anchor",href:"#truncated-desktop",children:"Truncated desktop"})}),(0,n.jsx)(e.p,{children:"If the path is too long the path is truncated after the root element"})]}),(0,n.jsx)(t,{node:"1147-17379",caption:"Truncated breadcrumbs"})]}),`
`,(0,n.jsxs)(r,{columns:2,gapInline:"small",children:[(0,n.jsxs)("div",{children:[(0,n.jsx)(e.h3,{id:"mobile-or-simple",children:(0,n.jsx)(e.a,{className:"anchor",href:"#mobile-or-simple",children:"Mobile or simple"})}),(0,n.jsx)(e.p,{children:"For mobile views we only display the link to the parent page, as the full path tends to take too much space."}),(0,n.jsx)(e.p,{children:"The same version may be used in shallow hierarchies where there still is a need to easily move one step up, or back to the page from where you came."})]}),(0,n.jsx)(t,{node:"1140-274",caption:"Simplified breadcrumbs"})]})]})}function x(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,Object.assign({},a,{children:(0,n.jsx)(d,a)})):d(a)}var _=x;function l(a,e){throw new Error("Expected "+(e?"component":"object")+" `"+a+"` to be defined: you likely forgot to import, pass, or provide it.")}return y(j);})();
;return Component;7:["slug","breadcrumb","d"]
-0:["NsMNV3vy3XTVnkoNDrSIL",[[["",{"children":["component",{"children":[["slug","breadcrumb","d"],{"children":["__PAGE__?{\"slug\":\"breadcrumb\"}",{}]}]}]},"$undefined","$undefined",true],["",{"children":["component",{"children":[["slug","breadcrumb","d"],{"children":["__PAGE__",{},["$L1",[["$","script",null,{"type":"application/ld+json","suppressHydrationWarning":true,"dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"Thing\",\"description\":\"A breadcrumb is a secondary navigation showing the website hierarchy.\",\"url\":\"https://seb.io/component/breadcrumb\",\"author\":{\"@type\":\"Company\",\"name\":\"SEB\"}}"}}],null,["$","$L2",null,{"code":"$3","globals":{"slug":"breadcrumb"}}],["$","$L4",null,{"src":"/playground-elements/playground-elements.mjs","type":"module","crossOrigin":"anonymous"}]],null]]},[null,["$","$L5",null,{"children":["$","$L6",null,{"parallelRouterKey":"children","segmentPath":["children","component","children","$7","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L8",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/5c7d85c5f5443c6f.css","precedence":"next","crossOrigin":""}]]}],"params":{"slug":"breadcrumb"}}],null]]},["$","$L6",null,{"parallelRouterKey":"children","segmentPath":["children","component","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L8",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/2ee8f8b530395c6c.css","precedence":"next","crossOrigin":""}]]}]]},[null,["$","$L9",null,{"children":["$","$L6",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L8",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"className":"layout core 404","children":[["$","h1",null,{"className":"heading-medium","children":"404 - Page Not Found"}],["$","$La",null,{"href":"/components","children":"Go to components"}]]}],"notFoundStyles":[],"styles":null}],"params":{}}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/809f5ed4c43f9231.css","precedence":"next","crossOrigin":""}]],"$Lb"]]]]
+0:["hpoRLZpwKnQAWkWoQzoO1",[[["",{"children":["component",{"children":[["slug","breadcrumb","d"],{"children":["__PAGE__?{\"slug\":\"breadcrumb\"}",{}]}]}]},"$undefined","$undefined",true],["",{"children":["component",{"children":[["slug","breadcrumb","d"],{"children":["__PAGE__",{},["$L1",[["$","script",null,{"type":"application/ld+json","suppressHydrationWarning":true,"dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"Thing\",\"description\":\"A breadcrumb is a secondary navigation showing the website hierarchy.\",\"url\":\"https://seb.io/component/breadcrumb\",\"author\":{\"@type\":\"Company\",\"name\":\"SEB\"}}"}}],null,["$","$L2",null,{"code":"$3","globals":{"slug":"breadcrumb"}}],["$","$L4",null,{"src":"/playground-elements/playground-elements.mjs","type":"module","crossOrigin":"anonymous"}]],null]]},[null,["$","$L5",null,{"children":["$","$L6",null,{"parallelRouterKey":"children","segmentPath":["children","component","children","$7","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L8",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/3c8f414cd00d02fa.css","precedence":"next","crossOrigin":""}]]}],"params":{"slug":"breadcrumb"}}],null]]},["$","$L6",null,{"parallelRouterKey":"children","segmentPath":["children","component","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L8",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/b28e6f1c8750624d.css","precedence":"next","crossOrigin":""}]]}]]},[null,["$","$L9",null,{"children":["$","$L6",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L8",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"className":"layout core 404","children":[["$","h1",null,{"className":"heading-medium","children":"404 - Page Not Found"}],["$","$La",null,{"href":"/components","children":"Go to components"}]]}],"notFoundStyles":[],"styles":null}],"params":{}}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/52d73d3459c06a42.css","precedence":"next","crossOrigin":""}]],"$Lb"]]]]
b:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Breadcrumb — Green Design System"}],["$","meta","3",{"name":"description","content":"A breadcrumb is a secondary navigation showing the website hierarchy."}],["$","meta","4",{"name":"next-size-adjust"}]]
1:null
diff --git a/component/breadcrumb/accessibility.html b/component/breadcrumb/accessibility.html
index bbe7b28b..52cd3443 100644
--- a/component/breadcrumb/accessibility.html
+++ b/component/breadcrumb/accessibility.html
@@ -1,4 +1,4 @@
-Accessibility - Breadcrumb — Green Design System
This is the staging site of seb.io, The Green Design System is work in progress and not ready to use, but feel free to explore!
\ No newline at end of file
diff --git a/component/breadcrumb/design.txt b/component/breadcrumb/design.txt
index dbbd4d96..1ce7e2ca 100644
--- a/component/breadcrumb/design.txt
+++ b/component/breadcrumb/design.txt
@@ -1,13 +1,13 @@
-2:I[9038,["746","static/chunks/746-cd3122adf025bc8d.js","564","static/chunks/app/component/%5Bslug%5D/design/page-6c736a4ee94fba87.js"],"Mdx"]
+2:I[9038,["746","static/chunks/746-d043ffdc3efe63aa.js","564","static/chunks/app/component/%5Bslug%5D/design/page-31f294e3b29447fb.js"],"Mdx"]
4:I[5613,[],""]
6:I[1778,[],""]
-7:I[5006,["250","static/chunks/250-3a85ee001665a1f0.js","474","static/chunks/474-624fdc4faaf3c42b.js","746","static/chunks/746-cd3122adf025bc8d.js","162","static/chunks/app/component/%5Bslug%5D/layout-de930432df895ddb.js"],""]
-8:I[8980,["250","static/chunks/250-3a85ee001665a1f0.js","165","static/chunks/165-84104a2c8d589bb7.js","214","static/chunks/214-c874259fc4bbccff.js","640","static/chunks/640-55646cae222024ea.js","746","static/chunks/746-cd3122adf025bc8d.js","185","static/chunks/app/layout-6f632244c77869b4.js"],""]
+7:I[5006,["250","static/chunks/250-3a85ee001665a1f0.js","474","static/chunks/474-624fdc4faaf3c42b.js","746","static/chunks/746-d043ffdc3efe63aa.js","162","static/chunks/app/component/%5Bslug%5D/layout-fe88189729dfe5a6.js"],""]
+8:I[8980,["250","static/chunks/250-3a85ee001665a1f0.js","165","static/chunks/165-84104a2c8d589bb7.js","214","static/chunks/214-c874259fc4bbccff.js","640","static/chunks/640-55646cae222024ea.js","746","static/chunks/746-d043ffdc3efe63aa.js","185","static/chunks/app/layout-86853f93f1fd61ce.js"],""]
9:I[5250,["250","static/chunks/250-3a85ee001665a1f0.js","160","static/chunks/app/not-found-4d0ae7f5c5b2c975.js"],""]
3:T615,var Component=(()=>{var h=Object.create;var r=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var x=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),b=(n,e)=>{for(var o in e)r(n,o,{get:e[o],enumerable:!0})},s=(n,e,o,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of f(e))!u.call(n,a)&&a!==o&&r(n,a,{get:()=>e[a],enumerable:!(i=l(e,a))||i.enumerable});return n};var p=(n,e,o)=>(o=n!=null?h(g(n)):{},s(e||!n||!n.__esModule?r(o,"default",{value:n,enumerable:!0}):o,n)),_=n=>s(r({},"__esModule",{value:!0}),n);var d=x((C,c)=>{c.exports=_jsx_runtime});var F={};b(F,{default:()=>D,frontmatter:()=>j});var t=p(d()),j={title:"Design",global_id:"breadcrumb",date:new Date(17109792e5)};function m(n){let e=Object.assign({h2:"h2",a:"a",h3:"h3"},n.components),{Figma:o}=e;return o||w("Figma",!0),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{id:"design",children:(0,t.jsx)(e.a,{className:"anchor",href:"#design",children:"Design"})}),`
`,(0,t.jsx)(e.h3,{id:"anatomy",children:(0,t.jsx)(e.a,{className:"anchor",href:"#anatomy",children:"Anatomy"})}),`
`,(0,t.jsx)(o,{node:"1140-3582",caption:"The anatomy of breadcrumbs"})]})}function y(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(m,n)})):m(n)}var D=y;function w(n,e){throw new Error("Expected "+(e?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return _(F);})();
;return Component;5:["slug","breadcrumb","d"]
-0:["NsMNV3vy3XTVnkoNDrSIL",[[["",{"children":["component",{"children":[["slug","breadcrumb","d"],{"children":["design",{"children":["__PAGE__?{\"slug\":\"breadcrumb\"}",{}]}]}]}]},"$undefined","$undefined",true],["",{"children":["component",{"children":[["slug","breadcrumb","d"],{"children":["design",{"children":["__PAGE__",{},["$L1",["$","$L2",null,{"code":"$3","globals":{}}],null]]},["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children","$5","children","design","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/5c7d85c5f5443c6f.css","precedence":"next","crossOrigin":""}]]}]]},[null,["$","$L7",null,{"children":["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children","$5","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],"params":{"slug":"breadcrumb"}}],null]]},["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/2ee8f8b530395c6c.css","precedence":"next","crossOrigin":""}]]}]]},[null,["$","$L8",null,{"children":["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"className":"layout core 404","children":[["$","h1",null,{"className":"heading-medium","children":"404 - Page Not Found"}],["$","$L9",null,{"href":"/components","children":"Go to components"}]]}],"notFoundStyles":[],"styles":null}],"params":{}}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/809f5ed4c43f9231.css","precedence":"next","crossOrigin":""}]],"$La"]]]]
+0:["hpoRLZpwKnQAWkWoQzoO1",[[["",{"children":["component",{"children":[["slug","breadcrumb","d"],{"children":["design",{"children":["__PAGE__?{\"slug\":\"breadcrumb\"}",{}]}]}]}]},"$undefined","$undefined",true],["",{"children":["component",{"children":[["slug","breadcrumb","d"],{"children":["design",{"children":["__PAGE__",{},["$L1",["$","$L2",null,{"code":"$3","globals":{}}],null]]},["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children","$5","children","design","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/5c7d85c5f5443c6f.css","precedence":"next","crossOrigin":""}]]}]]},[null,["$","$L7",null,{"children":["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children","$5","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],"params":{"slug":"breadcrumb"}}],null]]},["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/b28e6f1c8750624d.css","precedence":"next","crossOrigin":""}]]}]]},[null,["$","$L8",null,{"children":["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"className":"layout core 404","children":[["$","h1",null,{"className":"heading-medium","children":"404 - Page Not Found"}],["$","$L9",null,{"href":"/components","children":"Go to components"}]]}],"notFoundStyles":[],"styles":null}],"params":{}}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/52d73d3459c06a42.css","precedence":"next","crossOrigin":""}]],"$La"]]]]
a:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Design - Breadcrumb — Green Design System"}],["$","meta","3",{"name":"description","content":"A breadcrumb is a secondary navigation showing the website hierarchy."}],["$","meta","4",{"name":"next-size-adjust"}]]
1:null
diff --git a/component/breadcrumb/ux-text.html b/component/breadcrumb/ux-text.html
index 84f9c4b0..bb5a405f 100644
--- a/component/breadcrumb/ux-text.html
+++ b/component/breadcrumb/ux-text.html
@@ -1,4 +1,4 @@
-UX text - Breadcrumb — Green Design System
This is the staging site of seb.io, The Green Design System is work in progress and not ready to use, but feel free to explore!
A button serve as an interactive element that enables users to perform an action or make a choice with a simple click or tap. To decide which kind of button/buttons and putting them in the right order is key to make sure users know how to take the right action. A good rule of thumb is to use only one primary action in each context.
\ No newline at end of file
diff --git a/component/button.txt b/component/button.txt
index 15c05fdf..dd0977fb 100644
--- a/component/button.txt
+++ b/component/button.txt
@@ -1,9 +1,9 @@
-2:I[9038,["214","static/chunks/214-c874259fc4bbccff.js","746","static/chunks/746-cd3122adf025bc8d.js","985","static/chunks/app/component/%5Bslug%5D/page-872403ce6a41d739.js"],"Mdx"]
-4:I[5935,["214","static/chunks/214-c874259fc4bbccff.js","746","static/chunks/746-cd3122adf025bc8d.js","985","static/chunks/app/component/%5Bslug%5D/page-872403ce6a41d739.js"],""]
-5:I[5006,["250","static/chunks/250-3a85ee001665a1f0.js","474","static/chunks/474-624fdc4faaf3c42b.js","746","static/chunks/746-cd3122adf025bc8d.js","162","static/chunks/app/component/%5Bslug%5D/layout-de930432df895ddb.js"],""]
+2:I[9038,["214","static/chunks/214-c874259fc4bbccff.js","746","static/chunks/746-d043ffdc3efe63aa.js","985","static/chunks/app/component/%5Bslug%5D/page-658edaca3febe46f.js"],"Mdx"]
+4:I[5935,["214","static/chunks/214-c874259fc4bbccff.js","746","static/chunks/746-d043ffdc3efe63aa.js","985","static/chunks/app/component/%5Bslug%5D/page-658edaca3febe46f.js"],""]
+5:I[5006,["250","static/chunks/250-3a85ee001665a1f0.js","474","static/chunks/474-624fdc4faaf3c42b.js","746","static/chunks/746-d043ffdc3efe63aa.js","162","static/chunks/app/component/%5Bslug%5D/layout-fe88189729dfe5a6.js"],""]
6:I[5613,[],""]
8:I[1778,[],""]
-9:I[8980,["250","static/chunks/250-3a85ee001665a1f0.js","165","static/chunks/165-84104a2c8d589bb7.js","214","static/chunks/214-c874259fc4bbccff.js","640","static/chunks/640-55646cae222024ea.js","746","static/chunks/746-cd3122adf025bc8d.js","185","static/chunks/app/layout-6f632244c77869b4.js"],""]
+9:I[8980,["250","static/chunks/250-3a85ee001665a1f0.js","165","static/chunks/165-84104a2c8d589bb7.js","214","static/chunks/214-c874259fc4bbccff.js","640","static/chunks/640-55646cae222024ea.js","746","static/chunks/746-d043ffdc3efe63aa.js","185","static/chunks/app/layout-86853f93f1fd61ce.js"],""]
a:I[5250,["250","static/chunks/250-3a85ee001665a1f0.js","160","static/chunks/app/not-found-4d0ae7f5c5b2c975.js"],""]
3:T2f7e,var Component=(()=>{var m=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var y=(o,n)=>()=>(n||o((n={exports:{}}).exports,n),n.exports),v=(o,n)=>{for(var i in n)r(o,i,{get:n[i],enumerable:!0})},l=(o,n,i,t)=>{if(n&&typeof n=="object"||typeof n=="function")for(let a of b(n))!g.call(o,a)&&a!==i&&r(o,a,{get:()=>n[a],enumerable:!(t=p(n,a))||t.enumerable});return o};var w=(o,n,i)=>(i=o!=null?m(f(o)):{},l(n||!o||!o.__esModule?r(i,"default",{value:o,enumerable:!0}):i,o)),k=o=>l(r({},"__esModule",{value:!0}),o);var h=y((D,d)=>{d.exports=_jsx_runtime});var N={};v(N,{default:()=>I,frontmatter:()=>x});var e=w(h()),x={title:"Button",summary:"Buttons are an essential element of interaction design. Their primary role is to help people take actions quickly.",date:new Date(17032032e5),global_id:"buttonbutton",status:"work in progress",tags:"form, button group",preview:'Primary default button'};function u(o){let n=Object.assign({h2:"h2",a:"a",p:"p",h3:"h3",ul:"ul",li:"li",strong:"strong"},o.components),{Grid:i,Figma:t,Spacer:a,Do:c}=n;return c||s("Do",!0),t||s("Figma",!0),i||s("Grid",!0),a||s("Spacer",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{id:"overview",children:(0,e.jsx)(n.a,{className:"anchor",href:"#overview",children:"Overview"})}),`
`,(0,e.jsx)(n.p,{children:"A button serve as an interactive element that enables users to perform an action or make a choice with a simple click or tap. To decide which kind of button/buttons and putting them in the right order is key to make sure users know how to take the right action. A good rule of thumb is to use only one primary action in each context."}),`
@@ -79,6 +79,6 @@ a:I[5250,["250","static/chunks/250-3a85ee001665a1f0.js","160","static/chunks/app
`]}),`
`,(0,e.jsx)(i,{columns:2,gapInline:"small",children:(0,e.jsx)(c,{children:(0,e.jsx)(t,{node:"312-3091"})})})]})}function T(o={}){let{wrapper:n}=o.components||{};return n?(0,e.jsx)(n,Object.assign({},o,{children:(0,e.jsx)(u,o)})):u(o)}var I=T;function s(o,n){throw new Error("Expected "+(n?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}return k(N);})();
;return Component;7:["slug","button","d"]
-0:["NsMNV3vy3XTVnkoNDrSIL",[[["",{"children":["component",{"children":[["slug","button","d"],{"children":["__PAGE__?{\"slug\":\"button\"}",{}]}]}]},"$undefined","$undefined",true],["",{"children":["component",{"children":[["slug","button","d"],{"children":["__PAGE__",{},["$L1",[["$","script",null,{"type":"application/ld+json","suppressHydrationWarning":true,"dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"Thing\",\"description\":\"Buttons are an essential element of interaction design. Their primary role is to help people take actions quickly.\",\"url\":\"https://seb.io/component/button\",\"author\":{\"@type\":\"Company\",\"name\":\"SEB\"}}"}}],null,["$","$L2",null,{"code":"$3","globals":{"slug":"button"}}],["$","$L4",null,{"src":"/playground-elements/playground-elements.mjs","type":"module","crossOrigin":"anonymous"}]],null]]},[null,["$","$L5",null,{"children":["$","$L6",null,{"parallelRouterKey":"children","segmentPath":["children","component","children","$7","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L8",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/5c7d85c5f5443c6f.css","precedence":"next","crossOrigin":""}]]}],"params":{"slug":"button"}}],null]]},["$","$L6",null,{"parallelRouterKey":"children","segmentPath":["children","component","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L8",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/2ee8f8b530395c6c.css","precedence":"next","crossOrigin":""}]]}]]},[null,["$","$L9",null,{"children":["$","$L6",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L8",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"className":"layout core 404","children":[["$","h1",null,{"className":"heading-medium","children":"404 - Page Not Found"}],["$","$La",null,{"href":"/components","children":"Go to components"}]]}],"notFoundStyles":[],"styles":null}],"params":{}}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/809f5ed4c43f9231.css","precedence":"next","crossOrigin":""}]],"$Lb"]]]]
+0:["hpoRLZpwKnQAWkWoQzoO1",[[["",{"children":["component",{"children":[["slug","button","d"],{"children":["__PAGE__?{\"slug\":\"button\"}",{}]}]}]},"$undefined","$undefined",true],["",{"children":["component",{"children":[["slug","button","d"],{"children":["__PAGE__",{},["$L1",[["$","script",null,{"type":"application/ld+json","suppressHydrationWarning":true,"dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"Thing\",\"description\":\"Buttons are an essential element of interaction design. Their primary role is to help people take actions quickly.\",\"url\":\"https://seb.io/component/button\",\"author\":{\"@type\":\"Company\",\"name\":\"SEB\"}}"}}],null,["$","$L2",null,{"code":"$3","globals":{"slug":"button"}}],["$","$L4",null,{"src":"/playground-elements/playground-elements.mjs","type":"module","crossOrigin":"anonymous"}]],null]]},[null,["$","$L5",null,{"children":["$","$L6",null,{"parallelRouterKey":"children","segmentPath":["children","component","children","$7","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L8",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/3c8f414cd00d02fa.css","precedence":"next","crossOrigin":""}]]}],"params":{"slug":"button"}}],null]]},["$","$L6",null,{"parallelRouterKey":"children","segmentPath":["children","component","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L8",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/b28e6f1c8750624d.css","precedence":"next","crossOrigin":""}]]}]]},[null,["$","$L9",null,{"children":["$","$L6",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L8",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"className":"layout core 404","children":[["$","h1",null,{"className":"heading-medium","children":"404 - Page Not Found"}],["$","$La",null,{"href":"/components","children":"Go to components"}]]}],"notFoundStyles":[],"styles":null}],"params":{}}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/52d73d3459c06a42.css","precedence":"next","crossOrigin":""}]],"$Lb"]]]]
b:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Button — Green Design System"}],["$","meta","3",{"name":"description","content":"Buttons are an essential element of interaction design. Their primary role is to help people take actions quickly."}],["$","meta","4",{"name":"next-size-adjust"}]]
1:null
diff --git a/component/button/accessibility.html b/component/button/accessibility.html
index ba7b6daa..7fc96648 100644
--- a/component/button/accessibility.html
+++ b/component/button/accessibility.html
@@ -1,4 +1,4 @@
-Accessibility - Button — Green Design System
This is the staging site of seb.io, The Green Design System is work in progress and not ready to use, but feel free to explore!
\ No newline at end of file
diff --git a/component/button/accessibility.txt b/component/button/accessibility.txt
index dd0626b6..124e2722 100644
--- a/component/button/accessibility.txt
+++ b/component/button/accessibility.txt
@@ -1,8 +1,8 @@
-2:I[9038,["746","static/chunks/746-cd3122adf025bc8d.js","102","static/chunks/app/component/%5Bslug%5D/accessibility/page-c173384fdb81eca9.js"],"Mdx"]
+2:I[9038,["746","static/chunks/746-d043ffdc3efe63aa.js","102","static/chunks/app/component/%5Bslug%5D/accessibility/page-008e0e3d6f1df281.js"],"Mdx"]
4:I[5613,[],""]
6:I[1778,[],""]
-7:I[5006,["250","static/chunks/250-3a85ee001665a1f0.js","474","static/chunks/474-624fdc4faaf3c42b.js","746","static/chunks/746-cd3122adf025bc8d.js","162","static/chunks/app/component/%5Bslug%5D/layout-de930432df895ddb.js"],""]
-8:I[8980,["250","static/chunks/250-3a85ee001665a1f0.js","165","static/chunks/165-84104a2c8d589bb7.js","214","static/chunks/214-c874259fc4bbccff.js","640","static/chunks/640-55646cae222024ea.js","746","static/chunks/746-cd3122adf025bc8d.js","185","static/chunks/app/layout-6f632244c77869b4.js"],""]
+7:I[5006,["250","static/chunks/250-3a85ee001665a1f0.js","474","static/chunks/474-624fdc4faaf3c42b.js","746","static/chunks/746-d043ffdc3efe63aa.js","162","static/chunks/app/component/%5Bslug%5D/layout-fe88189729dfe5a6.js"],""]
+8:I[8980,["250","static/chunks/250-3a85ee001665a1f0.js","165","static/chunks/165-84104a2c8d589bb7.js","214","static/chunks/214-c874259fc4bbccff.js","640","static/chunks/640-55646cae222024ea.js","746","static/chunks/746-d043ffdc3efe63aa.js","185","static/chunks/app/layout-86853f93f1fd61ce.js"],""]
9:I[5250,["250","static/chunks/250-3a85ee001665a1f0.js","160","static/chunks/app/not-found-4d0ae7f5c5b2c975.js"],""]
3:T209f,var Component=(()=>{var p=Object.create;var a=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var m=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),B=(l,e)=>{for(var i in e)a(l,i,{get:e[i],enumerable:!0})},r=(l,e,i,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of u(e))!g.call(l,t)&&t!==i&&a(l,t,{get:()=>e[t],enumerable:!(s=b(e,t))||s.enumerable});return l};var f=(l,e,i)=>(i=l!=null?p(y(l)):{},r(e||!l||!l.__esModule?a(i,"default",{value:l,enumerable:!0}):i,l)),A=l=>r(a({},"__esModule",{value:!0}),l);var o=m((C,c)=>{c.exports=_jsx_runtime});var w={};B(w,{default:()=>x,frontmatter:()=>v});var n=f(o()),v={title:"Accessibility",global_id:"buttonaccessibility",date:new Date(17073504e5)};function d(l){let e=Object.assign({h2:"h2",a:"a",p:"p",h3:"h3",strong:"strong",ul:"ul",li:"li",h4:"h4",em:"em",div:"div",pre:"pre",code:"code",span:"span"},l.components),{Grid:i,Figma:s}=e;return s||h("Figma",!0),i||h("Grid",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{id:"accessibility",children:(0,n.jsx)(e.a,{className:"anchor",href:"#accessibility",children:"Accessibility"})}),`
`,(0,n.jsx)(e.p,{children:"All values we measure need to pass in order to give a check on the accessibility on all our components."}),`
@@ -45,6 +45,6 @@
`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:"https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Text_labels_and_names",children:"MDN Webdocs / Learn more about labeling elements"})}),`
`]})]})}function F(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,Object.assign({},l,{children:(0,n.jsx)(d,l)})):d(l)}var x=F;function h(l,e){throw new Error("Expected "+(e?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}return A(w);})();
;return Component;5:["slug","button","d"]
-0:["NsMNV3vy3XTVnkoNDrSIL",[[["",{"children":["component",{"children":[["slug","button","d"],{"children":["accessibility",{"children":["__PAGE__?{\"slug\":\"button\"}",{}]}]}]}]},"$undefined","$undefined",true],["",{"children":["component",{"children":[["slug","button","d"],{"children":["accessibility",{"children":["__PAGE__",{},["$L1",["$","$L2",null,{"code":"$3","globals":{}}],null]]},["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children","$5","children","accessibility","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/5c7d85c5f5443c6f.css","precedence":"next","crossOrigin":""}]]}]]},[null,["$","$L7",null,{"children":["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children","$5","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],"params":{"slug":"button"}}],null]]},["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/2ee8f8b530395c6c.css","precedence":"next","crossOrigin":""}]]}]]},[null,["$","$L8",null,{"children":["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"className":"layout core 404","children":[["$","h1",null,{"className":"heading-medium","children":"404 - Page Not Found"}],["$","$L9",null,{"href":"/components","children":"Go to components"}]]}],"notFoundStyles":[],"styles":null}],"params":{}}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/809f5ed4c43f9231.css","precedence":"next","crossOrigin":""}]],"$La"]]]]
+0:["hpoRLZpwKnQAWkWoQzoO1",[[["",{"children":["component",{"children":[["slug","button","d"],{"children":["accessibility",{"children":["__PAGE__?{\"slug\":\"button\"}",{}]}]}]}]},"$undefined","$undefined",true],["",{"children":["component",{"children":[["slug","button","d"],{"children":["accessibility",{"children":["__PAGE__",{},["$L1",["$","$L2",null,{"code":"$3","globals":{}}],null]]},["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children","$5","children","accessibility","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/5c7d85c5f5443c6f.css","precedence":"next","crossOrigin":""}]]}]]},[null,["$","$L7",null,{"children":["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children","$5","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],"params":{"slug":"button"}}],null]]},["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/b28e6f1c8750624d.css","precedence":"next","crossOrigin":""}]]}]]},[null,["$","$L8",null,{"children":["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"className":"layout core 404","children":[["$","h1",null,{"className":"heading-medium","children":"404 - Page Not Found"}],["$","$L9",null,{"href":"/components","children":"Go to components"}]]}],"notFoundStyles":[],"styles":null}],"params":{}}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/52d73d3459c06a42.css","precedence":"next","crossOrigin":""}]],"$La"]]]]
a:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Accessibility - Button — Green Design System"}],["$","meta","3",{"name":"description","content":"Buttons are an essential element of interaction design. Their primary role is to help people take actions quickly."}],["$","meta","4",{"name":"next-size-adjust"}]]
1:null
diff --git a/component/button/code.html b/component/button/code.html
index 22b7f6a3..94082055 100644
--- a/component/button/code.html
+++ b/component/button/code.html
@@ -1,4 +1,4 @@
-Code - Button — Green Design System
This is the staging site of seb.io, The Green Design System is work in progress and not ready to use, but feel free to explore!
\ No newline at end of file
diff --git a/component/button/code.txt b/component/button/code.txt
index a76adef3..780beac0 100644
--- a/component/button/code.txt
+++ b/component/button/code.txt
@@ -1,8 +1,8 @@
-2:I[9038,["746","static/chunks/746-cd3122adf025bc8d.js","826","static/chunks/app/component/%5Bslug%5D/code/page-d763beb902a8024f.js"],"Mdx"]
+2:I[9038,["746","static/chunks/746-d043ffdc3efe63aa.js","826","static/chunks/app/component/%5Bslug%5D/code/page-f0b810a892a8c413.js"],"Mdx"]
4:I[5613,[],""]
6:I[1778,[],""]
-7:I[5006,["250","static/chunks/250-3a85ee001665a1f0.js","474","static/chunks/474-624fdc4faaf3c42b.js","746","static/chunks/746-cd3122adf025bc8d.js","162","static/chunks/app/component/%5Bslug%5D/layout-de930432df895ddb.js"],""]
-8:I[8980,["250","static/chunks/250-3a85ee001665a1f0.js","165","static/chunks/165-84104a2c8d589bb7.js","214","static/chunks/214-c874259fc4bbccff.js","640","static/chunks/640-55646cae222024ea.js","746","static/chunks/746-cd3122adf025bc8d.js","185","static/chunks/app/layout-6f632244c77869b4.js"],""]
+7:I[5006,["250","static/chunks/250-3a85ee001665a1f0.js","474","static/chunks/474-624fdc4faaf3c42b.js","746","static/chunks/746-d043ffdc3efe63aa.js","162","static/chunks/app/component/%5Bslug%5D/layout-fe88189729dfe5a6.js"],""]
+8:I[8980,["250","static/chunks/250-3a85ee001665a1f0.js","165","static/chunks/165-84104a2c8d589bb7.js","214","static/chunks/214-c874259fc4bbccff.js","640","static/chunks/640-55646cae222024ea.js","746","static/chunks/746-d043ffdc3efe63aa.js","185","static/chunks/app/layout-86853f93f1fd61ce.js"],""]
9:I[5250,["250","static/chunks/250-3a85ee001665a1f0.js","160","static/chunks/app/not-found-4d0ae7f5c5b2c975.js"],""]
3:T6f47,var Component=(()=>{var B=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var g=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),m=(n,e)=>{for(var r in e)a(n,r,{get:e[r],enumerable:!0})},c=(n,e,r,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of y(e))!u.call(n,o)&&o!==r&&a(n,o,{get:()=>e[o],enumerable:!(s=p(e,o))||s.enumerable});return n};var F=(n,e,r)=>(r=n!=null?B(A(n)):{},c(e||!n||!n.__esModule?a(r,"default",{value:n,enumerable:!0}):r,n)),b=n=>c(a({},"__esModule",{value:!0}),n);var d=g((D,t)=>{t.exports=_jsx_runtime});var E={};m(E,{default:()=>v,frontmatter:()=>C});var l=F(d()),C={title:"Code",global_id:"buttoncode",date:new Date(17032032e5)};function i(n){let e=Object.assign({h2:"h2",a:"a",h3:"h3",h4:"h4",p:"p",div:"div",pre:"pre",code:"code",span:"span"},n.components),{Pattern:r,Grid:s}=e;return s||h("Grid",!0),r||h("Pattern",!0),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(e.h2,{id:"code",children:(0,l.jsx)(e.a,{className:"anchor",href:"#code",children:"Code"})}),`
`,(0,l.jsx)(e.h3,{id:"examples",children:(0,l.jsx)(e.a,{className:"anchor",href:"#examples",children:"Examples"})}),`
@@ -61,6 +61,6 @@
`,(0,l.jsxs)(e.span,{className:"","data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#ABB2BF"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#E06C75"},children:"gds-button"}),(0,l.jsx)(e.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#D19A66"},children:"prio"}),(0,l.jsx)(e.span,{style:{color:"#ABB2BF"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#98C379"},children:'"secondary"'}),(0,l.jsx)(e.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#D19A66"},children:"disabled"}),(0,l.jsx)(e.span,{style:{color:"#ABB2BF"},children:">Cancel"}),(0,l.jsx)(e.span,{style:{color:"#E06C75"},children:"gds-button"}),(0,l.jsx)(e.span,{style:{color:"#ABB2BF"},children:">"})]}),`
`,(0,l.jsxs)(e.span,{className:"","data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#ABB2BF"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#E06C75"},children:"gds-button"}),(0,l.jsx)(e.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#D19A66"},children:"prio"}),(0,l.jsx)(e.span,{style:{color:"#ABB2BF"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#98C379"},children:'"tertiary"'}),(0,l.jsx)(e.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#D19A66"},children:"disabled"}),(0,l.jsx)(e.span,{style:{color:"#ABB2BF"},children:">More"}),(0,l.jsx)(e.span,{style:{color:"#E06C75"},children:"gds-button"}),(0,l.jsx)(e.span,{style:{color:"#ABB2BF"},children:">"})]})]})})})]})}function f(n={}){let{wrapper:e}=n.components||{};return e?(0,l.jsx)(e,Object.assign({},n,{children:(0,l.jsx)(i,n)})):i(n)}var v=f;function h(n,e){throw new Error("Expected "+(e?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return b(E);})();
;return Component;5:["slug","button","d"]
-0:["NsMNV3vy3XTVnkoNDrSIL",[[["",{"children":["component",{"children":[["slug","button","d"],{"children":["code",{"children":["__PAGE__?{\"slug\":\"button\"}",{}]}]}]}]},"$undefined","$undefined",true],["",{"children":["component",{"children":[["slug","button","d"],{"children":["code",{"children":["__PAGE__",{},["$L1",["$","$L2",null,{"code":"$3","globals":{}}],null]]},["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children","$5","children","code","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/5c7d85c5f5443c6f.css","precedence":"next","crossOrigin":""}]]}]]},[null,["$","$L7",null,{"children":["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children","$5","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],"params":{"slug":"button"}}],null]]},["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/2ee8f8b530395c6c.css","precedence":"next","crossOrigin":""}]]}]]},[null,["$","$L8",null,{"children":["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"className":"layout core 404","children":[["$","h1",null,{"className":"heading-medium","children":"404 - Page Not Found"}],["$","$L9",null,{"href":"/components","children":"Go to components"}]]}],"notFoundStyles":[],"styles":null}],"params":{}}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/809f5ed4c43f9231.css","precedence":"next","crossOrigin":""}]],"$La"]]]]
+0:["hpoRLZpwKnQAWkWoQzoO1",[[["",{"children":["component",{"children":[["slug","button","d"],{"children":["code",{"children":["__PAGE__?{\"slug\":\"button\"}",{}]}]}]}]},"$undefined","$undefined",true],["",{"children":["component",{"children":[["slug","button","d"],{"children":["code",{"children":["__PAGE__",{},["$L1",["$","$L2",null,{"code":"$3","globals":{}}],null]]},["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children","$5","children","code","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/5c7d85c5f5443c6f.css","precedence":"next","crossOrigin":""}]]}]]},[null,["$","$L7",null,{"children":["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children","$5","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],"params":{"slug":"button"}}],null]]},["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/b28e6f1c8750624d.css","precedence":"next","crossOrigin":""}]]}]]},[null,["$","$L8",null,{"children":["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"className":"layout core 404","children":[["$","h1",null,{"className":"heading-medium","children":"404 - Page Not Found"}],["$","$L9",null,{"href":"/components","children":"Go to components"}]]}],"notFoundStyles":[],"styles":null}],"params":{}}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/52d73d3459c06a42.css","precedence":"next","crossOrigin":""}]],"$La"]]]]
a:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Code - Button — Green Design System"}],["$","meta","3",{"name":"description","content":"Buttons are an essential element of interaction design. Their primary role is to help people take actions quickly."}],["$","meta","4",{"name":"next-size-adjust"}]]
1:null
diff --git a/component/button/design.html b/component/button/design.html
index ef40df78..309ec79d 100644
--- a/component/button/design.html
+++ b/component/button/design.html
@@ -1,4 +1,4 @@
-Design - Button — Green Design System
This is the staging site of seb.io, The Green Design System is work in progress and not ready to use, but feel free to explore!
Each button type has fully rounded corners. This creates a cohesive and consistent visual language within our design system. The differentiation in colour, border, and background helps users to easily distinguish between primary, secondary, and tertiary actions, contributing to a more intuitive and user-friendly interface.
\ No newline at end of file
diff --git a/component/button/design.txt b/component/button/design.txt
index 5f535c66..0db3cd72 100644
--- a/component/button/design.txt
+++ b/component/button/design.txt
@@ -1,8 +1,8 @@
-2:I[9038,["746","static/chunks/746-cd3122adf025bc8d.js","564","static/chunks/app/component/%5Bslug%5D/design/page-6c736a4ee94fba87.js"],"Mdx"]
+2:I[9038,["746","static/chunks/746-d043ffdc3efe63aa.js","564","static/chunks/app/component/%5Bslug%5D/design/page-31f294e3b29447fb.js"],"Mdx"]
4:I[5613,[],""]
6:I[1778,[],""]
-7:I[5006,["250","static/chunks/250-3a85ee001665a1f0.js","474","static/chunks/474-624fdc4faaf3c42b.js","746","static/chunks/746-cd3122adf025bc8d.js","162","static/chunks/app/component/%5Bslug%5D/layout-de930432df895ddb.js"],""]
-8:I[8980,["250","static/chunks/250-3a85ee001665a1f0.js","165","static/chunks/165-84104a2c8d589bb7.js","214","static/chunks/214-c874259fc4bbccff.js","640","static/chunks/640-55646cae222024ea.js","746","static/chunks/746-cd3122adf025bc8d.js","185","static/chunks/app/layout-6f632244c77869b4.js"],""]
+7:I[5006,["250","static/chunks/250-3a85ee001665a1f0.js","474","static/chunks/474-624fdc4faaf3c42b.js","746","static/chunks/746-d043ffdc3efe63aa.js","162","static/chunks/app/component/%5Bslug%5D/layout-fe88189729dfe5a6.js"],""]
+8:I[8980,["250","static/chunks/250-3a85ee001665a1f0.js","165","static/chunks/165-84104a2c8d589bb7.js","214","static/chunks/214-c874259fc4bbccff.js","640","static/chunks/640-55646cae222024ea.js","746","static/chunks/746-d043ffdc3efe63aa.js","185","static/chunks/app/layout-86853f93f1fd61ce.js"],""]
9:I[5250,["250","static/chunks/250-3a85ee001665a1f0.js","160","static/chunks/app/not-found-4d0ae7f5c5b2c975.js"],""]
3:T1e17,var Component=(()=>{var u=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var f=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),y=(t,n)=>{for(var r in n)o(t,r,{get:n[r],enumerable:!0})},c=(t,n,r,i)=>{if(n&&typeof n=="object"||typeof n=="function")for(let a of m(n))!b.call(t,a)&&a!==r&&o(t,a,{get:()=>n[a],enumerable:!(i=p(n,a))||i.enumerable});return t};var v=(t,n,r)=>(r=t!=null?u(g(t)):{},c(n||!t||!t.__esModule?o(r,"default",{value:t,enumerable:!0}):r,t)),w=t=>c(o({},"__esModule",{value:!0}),t);var l=f((S,s)=>{s.exports=_jsx_runtime});var P={};y(P,{default:()=>D,frontmatter:()=>x});var e=v(l()),x={title:"Design",global_id:"buttondesign",date:new Date(17032032e5)};function h(t){let n=Object.assign({h2:"h2",a:"a",p:"p",em:"em",h3:"h3"},t.components),{Grid:r,Figma:i,Spacer:a}=n;return i||d("Figma",!0),r||d("Grid",!0),a||d("Spacer",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{id:"design",children:(0,e.jsx)(n.a,{className:"anchor",href:"#design",children:"Design"})}),`
`,(0,e.jsx)(n.p,{children:"Each button type has fully rounded corners. This creates a cohesive and consistent visual language within our design system. The differentiation in colour, border, and background helps users to easily distinguish between primary, secondary, and tertiary actions, contributing to a more intuitive and user-friendly interface."}),`
@@ -18,6 +18,6 @@ Some examples could be a trash can icon + text `,(0,e.jsx)(n.em,{children:"Delet
a search icon + text `,(0,e.jsx)(n.em,{children:"Search"})," and arrow to bottom icon + text ",(0,e.jsx)(n.em,{children:"Download"}),"."]})]}),(0,e.jsx)(i,{node:"266-7387",caption:"Leading elements that support the button text."})]}),`
`,(0,e.jsxs)(r,{columns:2,children:[(0,e.jsxs)("div",{children:[(0,e.jsx)(n.h3,{id:"trailing-element",children:(0,e.jsx)(n.a,{className:"anchor",href:"#trailing-element",children:"Trailing element"})}),(0,e.jsx)(n.p,{children:"Use trailing element as an affordance of what will happen when you interact with the button. For example, a button that leads the user forward in a flow, an arrow icon is a good choice."})]}),(0,e.jsx)(i,{node:"266-7448",caption:"The trailing element gives a hint on what is about to happen on click."})]})]})}function A(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,Object.assign({},t,{children:(0,e.jsx)(h,t)})):h(t)}var D=A;function d(t,n){throw new Error("Expected "+(n?"component":"object")+" `"+t+"` to be defined: you likely forgot to import, pass, or provide it.")}return w(P);})();
;return Component;5:["slug","button","d"]
-0:["NsMNV3vy3XTVnkoNDrSIL",[[["",{"children":["component",{"children":[["slug","button","d"],{"children":["design",{"children":["__PAGE__?{\"slug\":\"button\"}",{}]}]}]}]},"$undefined","$undefined",true],["",{"children":["component",{"children":[["slug","button","d"],{"children":["design",{"children":["__PAGE__",{},["$L1",["$","$L2",null,{"code":"$3","globals":{}}],null]]},["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children","$5","children","design","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/5c7d85c5f5443c6f.css","precedence":"next","crossOrigin":""}]]}]]},[null,["$","$L7",null,{"children":["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children","$5","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],"params":{"slug":"button"}}],null]]},["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/2ee8f8b530395c6c.css","precedence":"next","crossOrigin":""}]]}]]},[null,["$","$L8",null,{"children":["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"className":"layout core 404","children":[["$","h1",null,{"className":"heading-medium","children":"404 - Page Not Found"}],["$","$L9",null,{"href":"/components","children":"Go to components"}]]}],"notFoundStyles":[],"styles":null}],"params":{}}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/809f5ed4c43f9231.css","precedence":"next","crossOrigin":""}]],"$La"]]]]
+0:["hpoRLZpwKnQAWkWoQzoO1",[[["",{"children":["component",{"children":[["slug","button","d"],{"children":["design",{"children":["__PAGE__?{\"slug\":\"button\"}",{}]}]}]}]},"$undefined","$undefined",true],["",{"children":["component",{"children":[["slug","button","d"],{"children":["design",{"children":["__PAGE__",{},["$L1",["$","$L2",null,{"code":"$3","globals":{}}],null]]},["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children","$5","children","design","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/5c7d85c5f5443c6f.css","precedence":"next","crossOrigin":""}]]}]]},[null,["$","$L7",null,{"children":["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children","$5","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],"params":{"slug":"button"}}],null]]},["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/b28e6f1c8750624d.css","precedence":"next","crossOrigin":""}]]}]]},[null,["$","$L8",null,{"children":["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"className":"layout core 404","children":[["$","h1",null,{"className":"heading-medium","children":"404 - Page Not Found"}],["$","$L9",null,{"href":"/components","children":"Go to components"}]]}],"notFoundStyles":[],"styles":null}],"params":{}}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/52d73d3459c06a42.css","precedence":"next","crossOrigin":""}]],"$La"]]]]
a:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Design - Button — Green Design System"}],["$","meta","3",{"name":"description","content":"Buttons are an essential element of interaction design. Their primary role is to help people take actions quickly."}],["$","meta","4",{"name":"next-size-adjust"}]]
1:null
diff --git a/component/button/ux-text.html b/component/button/ux-text.html
index 0fd10fca..e8fe57c9 100644
--- a/component/button/ux-text.html
+++ b/component/button/ux-text.html
@@ -1,4 +1,4 @@
-UX text - Button — Green Design System
This is the staging site of seb.io, The Green Design System is work in progress and not ready to use, but feel free to explore!
The button text should answer the question "What is happening?" when the user clicks it, but if the purpose of the button is to convert, it should answer the question "What do I get?".
Input are used to let the user enter text or numbers in a form.Optional field indicator. We always strive to only ask for mandatory information, so we want to inform users if some fields are optional. We do this by adding a parenthesis with the words "optional" next to the label with the field.
\ No newline at end of file
diff --git a/component/input.txt b/component/input.txt
index ffe2024c..c2829d0d 100644
--- a/component/input.txt
+++ b/component/input.txt
@@ -1,9 +1,9 @@
-2:I[9038,["214","static/chunks/214-c874259fc4bbccff.js","746","static/chunks/746-cd3122adf025bc8d.js","985","static/chunks/app/component/%5Bslug%5D/page-872403ce6a41d739.js"],"Mdx"]
-4:I[5935,["214","static/chunks/214-c874259fc4bbccff.js","746","static/chunks/746-cd3122adf025bc8d.js","985","static/chunks/app/component/%5Bslug%5D/page-872403ce6a41d739.js"],""]
-5:I[5006,["250","static/chunks/250-3a85ee001665a1f0.js","474","static/chunks/474-624fdc4faaf3c42b.js","746","static/chunks/746-cd3122adf025bc8d.js","162","static/chunks/app/component/%5Bslug%5D/layout-de930432df895ddb.js"],""]
+2:I[9038,["214","static/chunks/214-c874259fc4bbccff.js","746","static/chunks/746-d043ffdc3efe63aa.js","985","static/chunks/app/component/%5Bslug%5D/page-658edaca3febe46f.js"],"Mdx"]
+4:I[5935,["214","static/chunks/214-c874259fc4bbccff.js","746","static/chunks/746-d043ffdc3efe63aa.js","985","static/chunks/app/component/%5Bslug%5D/page-658edaca3febe46f.js"],""]
+5:I[5006,["250","static/chunks/250-3a85ee001665a1f0.js","474","static/chunks/474-624fdc4faaf3c42b.js","746","static/chunks/746-d043ffdc3efe63aa.js","162","static/chunks/app/component/%5Bslug%5D/layout-fe88189729dfe5a6.js"],""]
6:I[5613,[],""]
8:I[1778,[],""]
-9:I[8980,["250","static/chunks/250-3a85ee001665a1f0.js","165","static/chunks/165-84104a2c8d589bb7.js","214","static/chunks/214-c874259fc4bbccff.js","640","static/chunks/640-55646cae222024ea.js","746","static/chunks/746-cd3122adf025bc8d.js","185","static/chunks/app/layout-6f632244c77869b4.js"],""]
+9:I[8980,["250","static/chunks/250-3a85ee001665a1f0.js","165","static/chunks/165-84104a2c8d589bb7.js","214","static/chunks/214-c874259fc4bbccff.js","640","static/chunks/640-55646cae222024ea.js","746","static/chunks/746-d043ffdc3efe63aa.js","185","static/chunks/app/layout-86853f93f1fd61ce.js"],""]
a:I[5250,["250","static/chunks/250-3a85ee001665a1f0.js","160","static/chunks/app/not-found-4d0ae7f5c5b2c975.js"],""]
3:T2633,var Component=(()=>{var f=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var g=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),y=(t,n)=>{for(var r in n)l(t,r,{get:n[r],enumerable:!0})},h=(t,n,r,o)=>{if(n&&typeof n=="object"||typeof n=="function")for(let i of x(n))!b.call(t,i)&&i!==r&&l(t,i,{get:()=>n[i],enumerable:!(o=p(n,i))||o.enumerable});return t};var v=(t,n,r)=>(r=t!=null?f(w(t)):{},h(n||!t||!t.__esModule?l(r,"default",{value:t,enumerable:!0}):r,t)),N=t=>h(l({},"__esModule",{value:!0}),t);var u=g((S,c)=>{c.exports=_jsx_runtime});var T={};y(T,{default:()=>z,frontmatter:()=>F});var e=v(u()),F={title:"Input",summary:"Text fields allow users to enter text into a UI. They typically appear in forms and dialogs.",date:new Date(17032032e5),global_id:"inputinput",status:"work in progress",tags:"form",node:"606-6849"};function m(t){let n=Object.assign({h2:"h2",a:"a",p:"p",h3:"h3",ul:"ul",li:"li",strong:"strong"},t.components),{Spacer:r,Grid:o,Figma:i,Do:s,Dont:d}=n;return s||a("Do",!0),d||a("Dont",!0),i||a("Figma",!0),o||a("Grid",!0),r||a("Spacer",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{id:"overview",children:(0,e.jsx)(n.a,{className:"anchor",href:"#overview",children:"Overview"})}),`
`,(0,e.jsx)(n.p,{children:'Input are used to let the user enter text or numbers in a form.Optional field indicator. We always strive to only ask for mandatory information, so we want to inform users if some fields are optional. We do this by adding a parenthesis with the words "optional" next to the label with the field.'}),`
@@ -53,6 +53,6 @@ The field validation should be done as soon as possible, but not while still edi
`]})]})]}),`
`,(0,e.jsxs)(o,{columns:2,children:[(0,e.jsx)(s,{children:(0,e.jsx)(i,{node:"647-6126"})}),(0,e.jsx)(d,{children:(0,e.jsx)(i,{node:"647-6129"})}),(0,e.jsx)(d,{children:(0,e.jsx)(i,{node:"619-6615"})})]})]})}function D(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,Object.assign({},t,{children:(0,e.jsx)(m,t)})):m(t)}var z=D;function a(t,n){throw new Error("Expected "+(n?"component":"object")+" `"+t+"` to be defined: you likely forgot to import, pass, or provide it.")}return N(T);})();
;return Component;7:["slug","input","d"]
-0:["NsMNV3vy3XTVnkoNDrSIL",[[["",{"children":["component",{"children":[["slug","input","d"],{"children":["__PAGE__?{\"slug\":\"input\"}",{}]}]}]},"$undefined","$undefined",true],["",{"children":["component",{"children":[["slug","input","d"],{"children":["__PAGE__",{},["$L1",[["$","script",null,{"type":"application/ld+json","suppressHydrationWarning":true,"dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"Thing\",\"description\":\"Text fields allow users to enter text into a UI. They typically appear in forms and dialogs.\",\"url\":\"https://seb.io/component/input\",\"author\":{\"@type\":\"Company\",\"name\":\"SEB\"}}"}}],null,["$","$L2",null,{"code":"$3","globals":{"slug":"input"}}],["$","$L4",null,{"src":"/playground-elements/playground-elements.mjs","type":"module","crossOrigin":"anonymous"}]],null]]},[null,["$","$L5",null,{"children":["$","$L6",null,{"parallelRouterKey":"children","segmentPath":["children","component","children","$7","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L8",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/5c7d85c5f5443c6f.css","precedence":"next","crossOrigin":""}]]}],"params":{"slug":"input"}}],null]]},["$","$L6",null,{"parallelRouterKey":"children","segmentPath":["children","component","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L8",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/2ee8f8b530395c6c.css","precedence":"next","crossOrigin":""}]]}]]},[null,["$","$L9",null,{"children":["$","$L6",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L8",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"className":"layout core 404","children":[["$","h1",null,{"className":"heading-medium","children":"404 - Page Not Found"}],["$","$La",null,{"href":"/components","children":"Go to components"}]]}],"notFoundStyles":[],"styles":null}],"params":{}}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/809f5ed4c43f9231.css","precedence":"next","crossOrigin":""}]],"$Lb"]]]]
+0:["hpoRLZpwKnQAWkWoQzoO1",[[["",{"children":["component",{"children":[["slug","input","d"],{"children":["__PAGE__?{\"slug\":\"input\"}",{}]}]}]},"$undefined","$undefined",true],["",{"children":["component",{"children":[["slug","input","d"],{"children":["__PAGE__",{},["$L1",[["$","script",null,{"type":"application/ld+json","suppressHydrationWarning":true,"dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"Thing\",\"description\":\"Text fields allow users to enter text into a UI. They typically appear in forms and dialogs.\",\"url\":\"https://seb.io/component/input\",\"author\":{\"@type\":\"Company\",\"name\":\"SEB\"}}"}}],null,["$","$L2",null,{"code":"$3","globals":{"slug":"input"}}],["$","$L4",null,{"src":"/playground-elements/playground-elements.mjs","type":"module","crossOrigin":"anonymous"}]],null]]},[null,["$","$L5",null,{"children":["$","$L6",null,{"parallelRouterKey":"children","segmentPath":["children","component","children","$7","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L8",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/3c8f414cd00d02fa.css","precedence":"next","crossOrigin":""}]]}],"params":{"slug":"input"}}],null]]},["$","$L6",null,{"parallelRouterKey":"children","segmentPath":["children","component","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L8",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/b28e6f1c8750624d.css","precedence":"next","crossOrigin":""}]]}]]},[null,["$","$L9",null,{"children":["$","$L6",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L8",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"className":"layout core 404","children":[["$","h1",null,{"className":"heading-medium","children":"404 - Page Not Found"}],["$","$La",null,{"href":"/components","children":"Go to components"}]]}],"notFoundStyles":[],"styles":null}],"params":{}}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/52d73d3459c06a42.css","precedence":"next","crossOrigin":""}]],"$Lb"]]]]
b:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Input — Green Design System"}],["$","meta","3",{"name":"description","content":"Text fields allow users to enter text into a UI. They typically appear in forms and dialogs."}],["$","meta","4",{"name":"next-size-adjust"}]]
1:null
diff --git a/component/input/accessibility.html b/component/input/accessibility.html
index b44f9363..a3f73383 100644
--- a/component/input/accessibility.html
+++ b/component/input/accessibility.html
@@ -1,4 +1,4 @@
-Accessibility - Input — Green Design System
This is the staging site of seb.io, The Green Design System is work in progress and not ready to use, but feel free to explore!
\ No newline at end of file
diff --git a/component/input/accessibility.txt b/component/input/accessibility.txt
index e7d1b505..8f570ad8 100644
--- a/component/input/accessibility.txt
+++ b/component/input/accessibility.txt
@@ -1,12 +1,12 @@
-2:I[9038,["746","static/chunks/746-cd3122adf025bc8d.js","102","static/chunks/app/component/%5Bslug%5D/accessibility/page-c173384fdb81eca9.js"],"Mdx"]
+2:I[9038,["746","static/chunks/746-d043ffdc3efe63aa.js","102","static/chunks/app/component/%5Bslug%5D/accessibility/page-008e0e3d6f1df281.js"],"Mdx"]
4:I[5613,[],""]
6:I[1778,[],""]
-7:I[5006,["250","static/chunks/250-3a85ee001665a1f0.js","474","static/chunks/474-624fdc4faaf3c42b.js","746","static/chunks/746-cd3122adf025bc8d.js","162","static/chunks/app/component/%5Bslug%5D/layout-de930432df895ddb.js"],""]
-8:I[8980,["250","static/chunks/250-3a85ee001665a1f0.js","165","static/chunks/165-84104a2c8d589bb7.js","214","static/chunks/214-c874259fc4bbccff.js","640","static/chunks/640-55646cae222024ea.js","746","static/chunks/746-cd3122adf025bc8d.js","185","static/chunks/app/layout-6f632244c77869b4.js"],""]
+7:I[5006,["250","static/chunks/250-3a85ee001665a1f0.js","474","static/chunks/474-624fdc4faaf3c42b.js","746","static/chunks/746-d043ffdc3efe63aa.js","162","static/chunks/app/component/%5Bslug%5D/layout-fe88189729dfe5a6.js"],""]
+8:I[8980,["250","static/chunks/250-3a85ee001665a1f0.js","165","static/chunks/165-84104a2c8d589bb7.js","214","static/chunks/214-c874259fc4bbccff.js","640","static/chunks/640-55646cae222024ea.js","746","static/chunks/746-d043ffdc3efe63aa.js","185","static/chunks/app/layout-86853f93f1fd61ce.js"],""]
9:I[5250,["250","static/chunks/250-3a85ee001665a1f0.js","160","static/chunks/app/not-found-4d0ae7f5c5b2c975.js"],""]
3:T516,var Component=(()=>{var d=Object.create;var s=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var x=(n,t)=>()=>(t||n((t={exports:{}}).exports,t),t.exports),_=(n,t)=>{for(var o in t)s(n,o,{get:t[o],enumerable:!0})},c=(n,t,o,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of g(t))!u.call(n,i)&&i!==o&&s(n,i,{get:()=>t[i],enumerable:!(a=h(t,i))||a.enumerable});return n};var f=(n,t,o)=>(o=n!=null?d(p(n)):{},c(t||!n||!n.__esModule?s(o,"default",{value:n,enumerable:!0}):o,n)),j=n=>c(s({},"__esModule",{value:!0}),n);var l=x((M,r)=>{r.exports=_jsx_runtime});var C={};_(C,{default:()=>y,frontmatter:()=>b});var e=f(l()),b={title:"Accessibility",global_id:"inputaccessibility",date:new Date(17032032e5)};function m(n){let t=Object.assign({h2:"h2",a:"a",p:"p"},n.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(t.h2,{id:"coming-soon",children:(0,e.jsx)(t.a,{className:"anchor",href:"#coming-soon",children:"Coming soon"})}),`
`,(0,e.jsx)(t.p,{children:"This page will be updated with information soon."})]})}function w(n={}){let{wrapper:t}=n.components||{};return t?(0,e.jsx)(t,Object.assign({},n,{children:(0,e.jsx)(m,n)})):m(n)}var y=w;return j(C);})();
;return Component;5:["slug","input","d"]
-0:["NsMNV3vy3XTVnkoNDrSIL",[[["",{"children":["component",{"children":[["slug","input","d"],{"children":["accessibility",{"children":["__PAGE__?{\"slug\":\"input\"}",{}]}]}]}]},"$undefined","$undefined",true],["",{"children":["component",{"children":[["slug","input","d"],{"children":["accessibility",{"children":["__PAGE__",{},["$L1",["$","$L2",null,{"code":"$3","globals":{}}],null]]},["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children","$5","children","accessibility","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/5c7d85c5f5443c6f.css","precedence":"next","crossOrigin":""}]]}]]},[null,["$","$L7",null,{"children":["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children","$5","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],"params":{"slug":"input"}}],null]]},["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/2ee8f8b530395c6c.css","precedence":"next","crossOrigin":""}]]}]]},[null,["$","$L8",null,{"children":["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"className":"layout core 404","children":[["$","h1",null,{"className":"heading-medium","children":"404 - Page Not Found"}],["$","$L9",null,{"href":"/components","children":"Go to components"}]]}],"notFoundStyles":[],"styles":null}],"params":{}}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/809f5ed4c43f9231.css","precedence":"next","crossOrigin":""}]],"$La"]]]]
+0:["hpoRLZpwKnQAWkWoQzoO1",[[["",{"children":["component",{"children":[["slug","input","d"],{"children":["accessibility",{"children":["__PAGE__?{\"slug\":\"input\"}",{}]}]}]}]},"$undefined","$undefined",true],["",{"children":["component",{"children":[["slug","input","d"],{"children":["accessibility",{"children":["__PAGE__",{},["$L1",["$","$L2",null,{"code":"$3","globals":{}}],null]]},["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children","$5","children","accessibility","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/5c7d85c5f5443c6f.css","precedence":"next","crossOrigin":""}]]}]]},[null,["$","$L7",null,{"children":["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children","$5","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],"params":{"slug":"input"}}],null]]},["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/b28e6f1c8750624d.css","precedence":"next","crossOrigin":""}]]}]]},[null,["$","$L8",null,{"children":["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"className":"layout core 404","children":[["$","h1",null,{"className":"heading-medium","children":"404 - Page Not Found"}],["$","$L9",null,{"href":"/components","children":"Go to components"}]]}],"notFoundStyles":[],"styles":null}],"params":{}}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/52d73d3459c06a42.css","precedence":"next","crossOrigin":""}]],"$La"]]]]
a:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Accessibility - Input — Green Design System"}],["$","meta","3",{"name":"description","content":"Text fields allow users to enter text into a UI. They typically appear in forms and dialogs."}],["$","meta","4",{"name":"next-size-adjust"}]]
1:null
diff --git a/component/input/code.html b/component/input/code.html
index c1c77398..5aa8035c 100644
--- a/component/input/code.html
+++ b/component/input/code.html
@@ -1,4 +1,4 @@
-Code - Input — Green Design System
This is the staging site of seb.io, The Green Design System is work in progress and not ready to use, but feel free to explore!
\ No newline at end of file
diff --git a/component/input/code.txt b/component/input/code.txt
index 497f9be6..3117c726 100644
--- a/component/input/code.txt
+++ b/component/input/code.txt
@@ -1,12 +1,12 @@
-2:I[9038,["746","static/chunks/746-cd3122adf025bc8d.js","826","static/chunks/app/component/%5Bslug%5D/code/page-d763beb902a8024f.js"],"Mdx"]
+2:I[9038,["746","static/chunks/746-d043ffdc3efe63aa.js","826","static/chunks/app/component/%5Bslug%5D/code/page-f0b810a892a8c413.js"],"Mdx"]
4:I[5613,[],""]
6:I[1778,[],""]
-7:I[5006,["250","static/chunks/250-3a85ee001665a1f0.js","474","static/chunks/474-624fdc4faaf3c42b.js","746","static/chunks/746-cd3122adf025bc8d.js","162","static/chunks/app/component/%5Bslug%5D/layout-de930432df895ddb.js"],""]
-8:I[8980,["250","static/chunks/250-3a85ee001665a1f0.js","165","static/chunks/165-84104a2c8d589bb7.js","214","static/chunks/214-c874259fc4bbccff.js","640","static/chunks/640-55646cae222024ea.js","746","static/chunks/746-cd3122adf025bc8d.js","185","static/chunks/app/layout-6f632244c77869b4.js"],""]
+7:I[5006,["250","static/chunks/250-3a85ee001665a1f0.js","474","static/chunks/474-624fdc4faaf3c42b.js","746","static/chunks/746-d043ffdc3efe63aa.js","162","static/chunks/app/component/%5Bslug%5D/layout-fe88189729dfe5a6.js"],""]
+8:I[8980,["250","static/chunks/250-3a85ee001665a1f0.js","165","static/chunks/165-84104a2c8d589bb7.js","214","static/chunks/214-c874259fc4bbccff.js","640","static/chunks/640-55646cae222024ea.js","746","static/chunks/746-d043ffdc3efe63aa.js","185","static/chunks/app/layout-86853f93f1fd61ce.js"],""]
9:I[5250,["250","static/chunks/250-3a85ee001665a1f0.js","160","static/chunks/app/not-found-4d0ae7f5c5b2c975.js"],""]
3:T504,var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var x=(n,t)=>()=>(t||n((t={exports:{}}).exports,t),t.exports),_=(n,t)=>{for(var o in t)a(n,o,{get:t[o],enumerable:!0})},r=(n,t,o,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of g(t))!u.call(n,s)&&s!==o&&a(n,s,{get:()=>t[s],enumerable:!(i=l(t,s))||i.enumerable});return n};var f=(n,t,o)=>(o=n!=null?h(p(n)):{},r(t||!n||!n.__esModule?a(o,"default",{value:n,enumerable:!0}):o,n)),j=n=>r(a({},"__esModule",{value:!0}),n);var d=x((F,c)=>{c.exports=_jsx_runtime});var D={};_(D,{default:()=>C,frontmatter:()=>b});var e=f(d()),b={title:"Code",global_id:"inputcode",date:new Date(17032032e5)};function m(n){let t=Object.assign({h2:"h2",a:"a",p:"p"},n.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(t.h2,{id:"coming-soon",children:(0,e.jsx)(t.a,{className:"anchor",href:"#coming-soon",children:"Coming soon"})}),`
`,(0,e.jsx)(t.p,{children:"This page will be updated with information soon."})]})}function w(n={}){let{wrapper:t}=n.components||{};return t?(0,e.jsx)(t,Object.assign({},n,{children:(0,e.jsx)(m,n)})):m(n)}var C=w;return j(D);})();
;return Component;5:["slug","input","d"]
-0:["NsMNV3vy3XTVnkoNDrSIL",[[["",{"children":["component",{"children":[["slug","input","d"],{"children":["code",{"children":["__PAGE__?{\"slug\":\"input\"}",{}]}]}]}]},"$undefined","$undefined",true],["",{"children":["component",{"children":[["slug","input","d"],{"children":["code",{"children":["__PAGE__",{},["$L1",["$","$L2",null,{"code":"$3","globals":{}}],null]]},["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children","$5","children","code","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/5c7d85c5f5443c6f.css","precedence":"next","crossOrigin":""}]]}]]},[null,["$","$L7",null,{"children":["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children","$5","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],"params":{"slug":"input"}}],null]]},["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/2ee8f8b530395c6c.css","precedence":"next","crossOrigin":""}]]}]]},[null,["$","$L8",null,{"children":["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"className":"layout core 404","children":[["$","h1",null,{"className":"heading-medium","children":"404 - Page Not Found"}],["$","$L9",null,{"href":"/components","children":"Go to components"}]]}],"notFoundStyles":[],"styles":null}],"params":{}}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/809f5ed4c43f9231.css","precedence":"next","crossOrigin":""}]],"$La"]]]]
+0:["hpoRLZpwKnQAWkWoQzoO1",[[["",{"children":["component",{"children":[["slug","input","d"],{"children":["code",{"children":["__PAGE__?{\"slug\":\"input\"}",{}]}]}]}]},"$undefined","$undefined",true],["",{"children":["component",{"children":[["slug","input","d"],{"children":["code",{"children":["__PAGE__",{},["$L1",["$","$L2",null,{"code":"$3","globals":{}}],null]]},["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children","$5","children","code","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/5c7d85c5f5443c6f.css","precedence":"next","crossOrigin":""}]]}]]},[null,["$","$L7",null,{"children":["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children","$5","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],"params":{"slug":"input"}}],null]]},["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/b28e6f1c8750624d.css","precedence":"next","crossOrigin":""}]]}]]},[null,["$","$L8",null,{"children":["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"className":"layout core 404","children":[["$","h1",null,{"className":"heading-medium","children":"404 - Page Not Found"}],["$","$L9",null,{"href":"/components","children":"Go to components"}]]}],"notFoundStyles":[],"styles":null}],"params":{}}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/52d73d3459c06a42.css","precedence":"next","crossOrigin":""}]],"$La"]]]]
a:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Code - Input — Green Design System"}],["$","meta","3",{"name":"description","content":"Text fields allow users to enter text into a UI. They typically appear in forms and dialogs."}],["$","meta","4",{"name":"next-size-adjust"}]]
1:null
diff --git a/component/input/design.html b/component/input/design.html
index ce41831b..7bd13adb 100644
--- a/component/input/design.html
+++ b/component/input/design.html
@@ -1,4 +1,4 @@
-Design - Input — Green Design System
This is the staging site of seb.io, The Green Design System is work in progress and not ready to use, but feel free to explore!
\ No newline at end of file
diff --git a/component/input/design.txt b/component/input/design.txt
index cd4d8aca..401a451f 100644
--- a/component/input/design.txt
+++ b/component/input/design.txt
@@ -1,12 +1,12 @@
-2:I[9038,["746","static/chunks/746-cd3122adf025bc8d.js","564","static/chunks/app/component/%5Bslug%5D/design/page-6c736a4ee94fba87.js"],"Mdx"]
+2:I[9038,["746","static/chunks/746-d043ffdc3efe63aa.js","564","static/chunks/app/component/%5Bslug%5D/design/page-31f294e3b29447fb.js"],"Mdx"]
4:I[5613,[],""]
6:I[1778,[],""]
-7:I[5006,["250","static/chunks/250-3a85ee001665a1f0.js","474","static/chunks/474-624fdc4faaf3c42b.js","746","static/chunks/746-cd3122adf025bc8d.js","162","static/chunks/app/component/%5Bslug%5D/layout-de930432df895ddb.js"],""]
-8:I[8980,["250","static/chunks/250-3a85ee001665a1f0.js","165","static/chunks/165-84104a2c8d589bb7.js","214","static/chunks/214-c874259fc4bbccff.js","640","static/chunks/640-55646cae222024ea.js","746","static/chunks/746-cd3122adf025bc8d.js","185","static/chunks/app/layout-6f632244c77869b4.js"],""]
+7:I[5006,["250","static/chunks/250-3a85ee001665a1f0.js","474","static/chunks/474-624fdc4faaf3c42b.js","746","static/chunks/746-d043ffdc3efe63aa.js","162","static/chunks/app/component/%5Bslug%5D/layout-fe88189729dfe5a6.js"],""]
+8:I[8980,["250","static/chunks/250-3a85ee001665a1f0.js","165","static/chunks/165-84104a2c8d589bb7.js","214","static/chunks/214-c874259fc4bbccff.js","640","static/chunks/640-55646cae222024ea.js","746","static/chunks/746-d043ffdc3efe63aa.js","185","static/chunks/app/layout-86853f93f1fd61ce.js"],""]
9:I[5250,["250","static/chunks/250-3a85ee001665a1f0.js","160","static/chunks/app/not-found-4d0ae7f5c5b2c975.js"],""]
3:T508,var Component=(()=>{var h=Object.create;var i=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var x=(n,t)=>()=>(t||n((t={exports:{}}).exports,t),t.exports),_=(n,t)=>{for(var o in t)i(n,o,{get:t[o],enumerable:!0})},r=(n,t,o,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of g(t))!u.call(n,s)&&s!==o&&i(n,s,{get:()=>t[s],enumerable:!(a=l(t,s))||a.enumerable});return n};var f=(n,t,o)=>(o=n!=null?h(p(n)):{},r(t||!n||!n.__esModule?i(o,"default",{value:n,enumerable:!0}):o,n)),j=n=>r(i({},"__esModule",{value:!0}),n);var m=x((F,c)=>{c.exports=_jsx_runtime});var C={};_(C,{default:()=>D,frontmatter:()=>b});var e=f(m()),b={title:"Design",global_id:"inputdesign",date:new Date(17032032e5)};function d(n){let t=Object.assign({h2:"h2",a:"a",p:"p"},n.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(t.h2,{id:"coming-soon",children:(0,e.jsx)(t.a,{className:"anchor",href:"#coming-soon",children:"Coming soon"})}),`
`,(0,e.jsx)(t.p,{children:"This page will be updated with information soon."})]})}function w(n={}){let{wrapper:t}=n.components||{};return t?(0,e.jsx)(t,Object.assign({},n,{children:(0,e.jsx)(d,n)})):d(n)}var D=w;return j(C);})();
;return Component;5:["slug","input","d"]
-0:["NsMNV3vy3XTVnkoNDrSIL",[[["",{"children":["component",{"children":[["slug","input","d"],{"children":["design",{"children":["__PAGE__?{\"slug\":\"input\"}",{}]}]}]}]},"$undefined","$undefined",true],["",{"children":["component",{"children":[["slug","input","d"],{"children":["design",{"children":["__PAGE__",{},["$L1",["$","$L2",null,{"code":"$3","globals":{}}],null]]},["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children","$5","children","design","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/5c7d85c5f5443c6f.css","precedence":"next","crossOrigin":""}]]}]]},[null,["$","$L7",null,{"children":["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children","$5","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],"params":{"slug":"input"}}],null]]},["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/2ee8f8b530395c6c.css","precedence":"next","crossOrigin":""}]]}]]},[null,["$","$L8",null,{"children":["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"className":"layout core 404","children":[["$","h1",null,{"className":"heading-medium","children":"404 - Page Not Found"}],["$","$L9",null,{"href":"/components","children":"Go to components"}]]}],"notFoundStyles":[],"styles":null}],"params":{}}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/809f5ed4c43f9231.css","precedence":"next","crossOrigin":""}]],"$La"]]]]
+0:["hpoRLZpwKnQAWkWoQzoO1",[[["",{"children":["component",{"children":[["slug","input","d"],{"children":["design",{"children":["__PAGE__?{\"slug\":\"input\"}",{}]}]}]}]},"$undefined","$undefined",true],["",{"children":["component",{"children":[["slug","input","d"],{"children":["design",{"children":["__PAGE__",{},["$L1",["$","$L2",null,{"code":"$3","globals":{}}],null]]},["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children","$5","children","design","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/5c7d85c5f5443c6f.css","precedence":"next","crossOrigin":""}]]}]]},[null,["$","$L7",null,{"children":["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children","$5","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],"params":{"slug":"input"}}],null]]},["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/b28e6f1c8750624d.css","precedence":"next","crossOrigin":""}]]}]]},[null,["$","$L8",null,{"children":["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"className":"layout core 404","children":[["$","h1",null,{"className":"heading-medium","children":"404 - Page Not Found"}],["$","$L9",null,{"href":"/components","children":"Go to components"}]]}],"notFoundStyles":[],"styles":null}],"params":{}}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/52d73d3459c06a42.css","precedence":"next","crossOrigin":""}]],"$La"]]]]
a:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Design - Input — Green Design System"}],["$","meta","3",{"name":"description","content":"Text fields allow users to enter text into a UI. They typically appear in forms and dialogs."}],["$","meta","4",{"name":"next-size-adjust"}]]
1:null
diff --git a/component/input/ux-text.html b/component/input/ux-text.html
index 5a0e354b..27283f44 100644
--- a/component/input/ux-text.html
+++ b/component/input/ux-text.html
@@ -1,4 +1,4 @@
-UX text - Input — Green Design System
This is the staging site of seb.io, The Green Design System is work in progress and not ready to use, but feel free to explore!
\ No newline at end of file
diff --git a/component/input/ux-text.txt b/component/input/ux-text.txt
index 885397de..130267a0 100644
--- a/component/input/ux-text.txt
+++ b/component/input/ux-text.txt
@@ -1,12 +1,12 @@
-2:I[9038,["746","static/chunks/746-cd3122adf025bc8d.js","550","static/chunks/app/component/%5Bslug%5D/ux-text/page-4e0adf5e4e6e54bb.js"],"Mdx"]
+2:I[9038,["746","static/chunks/746-d043ffdc3efe63aa.js","550","static/chunks/app/component/%5Bslug%5D/ux-text/page-5e9d2b6ba94f2c37.js"],"Mdx"]
4:I[5613,[],""]
6:I[1778,[],""]
-7:I[5006,["250","static/chunks/250-3a85ee001665a1f0.js","474","static/chunks/474-624fdc4faaf3c42b.js","746","static/chunks/746-cd3122adf025bc8d.js","162","static/chunks/app/component/%5Bslug%5D/layout-de930432df895ddb.js"],""]
-8:I[8980,["250","static/chunks/250-3a85ee001665a1f0.js","165","static/chunks/165-84104a2c8d589bb7.js","214","static/chunks/214-c874259fc4bbccff.js","640","static/chunks/640-55646cae222024ea.js","746","static/chunks/746-cd3122adf025bc8d.js","185","static/chunks/app/layout-6f632244c77869b4.js"],""]
+7:I[5006,["250","static/chunks/250-3a85ee001665a1f0.js","474","static/chunks/474-624fdc4faaf3c42b.js","746","static/chunks/746-d043ffdc3efe63aa.js","162","static/chunks/app/component/%5Bslug%5D/layout-fe88189729dfe5a6.js"],""]
+8:I[8980,["250","static/chunks/250-3a85ee001665a1f0.js","165","static/chunks/165-84104a2c8d589bb7.js","214","static/chunks/214-c874259fc4bbccff.js","640","static/chunks/640-55646cae222024ea.js","746","static/chunks/746-d043ffdc3efe63aa.js","185","static/chunks/app/layout-86853f93f1fd61ce.js"],""]
9:I[5250,["250","static/chunks/250-3a85ee001665a1f0.js","160","static/chunks/app/not-found-4d0ae7f5c5b2c975.js"],""]
3:T509,var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var p=(n,t)=>()=>(t||n((t={exports:{}}).exports,t),t.exports),_=(n,t)=>{for(var o in t)a(n,o,{get:t[o],enumerable:!0})},r=(n,t,o,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of x(t))!g.call(n,s)&&s!==o&&a(n,s,{get:()=>t[s],enumerable:!(i=l(t,s))||i.enumerable});return n};var f=(n,t,o)=>(o=n!=null?h(u(n)):{},r(t||!n||!n.__esModule?a(o,"default",{value:n,enumerable:!0}):o,n)),j=n=>r(a({},"__esModule",{value:!0}),n);var m=p((X,c)=>{c.exports=_jsx_runtime});var D={};_(D,{default:()=>C,frontmatter:()=>b});var e=f(m()),b={title:"UX text",global_id:"uxtextinput",date:new Date(17032032e5)};function d(n){let t=Object.assign({h2:"h2",a:"a",p:"p"},n.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(t.h2,{id:"coming-soon",children:(0,e.jsx)(t.a,{className:"anchor",href:"#coming-soon",children:"Coming soon"})}),`
`,(0,e.jsx)(t.p,{children:"This page will be updated with information soon."})]})}function w(n={}){let{wrapper:t}=n.components||{};return t?(0,e.jsx)(t,Object.assign({},n,{children:(0,e.jsx)(d,n)})):d(n)}var C=w;return j(D);})();
;return Component;5:["slug","input","d"]
-0:["NsMNV3vy3XTVnkoNDrSIL",[[["",{"children":["component",{"children":[["slug","input","d"],{"children":["ux-text",{"children":["__PAGE__?{\"slug\":\"input\"}",{}]}]}]}]},"$undefined","$undefined",true],["",{"children":["component",{"children":[["slug","input","d"],{"children":["ux-text",{"children":["__PAGE__",{},["$L1",["$","$L2",null,{"code":"$3","globals":{}}],null]]},["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children","$5","children","ux-text","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/5c7d85c5f5443c6f.css","precedence":"next","crossOrigin":""}]]}]]},[null,["$","$L7",null,{"children":["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children","$5","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],"params":{"slug":"input"}}],null]]},["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/2ee8f8b530395c6c.css","precedence":"next","crossOrigin":""}]]}]]},[null,["$","$L8",null,{"children":["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"className":"layout core 404","children":[["$","h1",null,{"className":"heading-medium","children":"404 - Page Not Found"}],["$","$L9",null,{"href":"/components","children":"Go to components"}]]}],"notFoundStyles":[],"styles":null}],"params":{}}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/809f5ed4c43f9231.css","precedence":"next","crossOrigin":""}]],"$La"]]]]
+0:["hpoRLZpwKnQAWkWoQzoO1",[[["",{"children":["component",{"children":[["slug","input","d"],{"children":["ux-text",{"children":["__PAGE__?{\"slug\":\"input\"}",{}]}]}]}]},"$undefined","$undefined",true],["",{"children":["component",{"children":[["slug","input","d"],{"children":["ux-text",{"children":["__PAGE__",{},["$L1",["$","$L2",null,{"code":"$3","globals":{}}],null]]},["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children","$5","children","ux-text","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/5c7d85c5f5443c6f.css","precedence":"next","crossOrigin":""}]]}]]},[null,["$","$L7",null,{"children":["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children","$5","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],"params":{"slug":"input"}}],null]]},["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","component","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/b28e6f1c8750624d.css","precedence":"next","crossOrigin":""}]]}]]},[null,["$","$L8",null,{"children":["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"className":"layout core 404","children":[["$","h1",null,{"className":"heading-medium","children":"404 - Page Not Found"}],["$","$L9",null,{"href":"/components","children":"Go to components"}]]}],"notFoundStyles":[],"styles":null}],"params":{}}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/52d73d3459c06a42.css","precedence":"next","crossOrigin":""}]],"$La"]]]]
a:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"UX text - Input — Green Design System"}],["$","meta","3",{"name":"description","content":"Text fields allow users to enter text into a UI. They typically appear in forms and dialogs."}],["$","meta","4",{"name":"next-size-adjust"}]]
1:null
diff --git a/components.html b/components.html
index 4d8e3995..df0e6505 100644
--- a/components.html
+++ b/components.html
@@ -1,4 +1,4 @@
-Components — Green
This is the staging site of seb.io, The Green Design System is work in progress and not ready to use, but feel free to explore!
\ No newline at end of file
diff --git a/demo/grid-fluid.txt b/demo/grid-fluid.txt
index fdb6d14b..6863abeb 100644
--- a/demo/grid-fluid.txt
+++ b/demo/grid-fluid.txt
@@ -2,8 +2,8 @@
3:I[1433,["353","static/chunks/app/demo/grid-fluid/page-84dd09af5e4d2add.js"],""]
4:I[5613,[],""]
5:I[1778,[],""]
-6:I[8980,["250","static/chunks/250-3a85ee001665a1f0.js","165","static/chunks/165-84104a2c8d589bb7.js","214","static/chunks/214-c874259fc4bbccff.js","640","static/chunks/640-55646cae222024ea.js","746","static/chunks/746-cd3122adf025bc8d.js","185","static/chunks/app/layout-6f632244c77869b4.js"],""]
+6:I[8980,["250","static/chunks/250-3a85ee001665a1f0.js","165","static/chunks/165-84104a2c8d589bb7.js","214","static/chunks/214-c874259fc4bbccff.js","640","static/chunks/640-55646cae222024ea.js","746","static/chunks/746-d043ffdc3efe63aa.js","185","static/chunks/app/layout-86853f93f1fd61ce.js"],""]
7:I[5250,["250","static/chunks/250-3a85ee001665a1f0.js","160","static/chunks/app/not-found-4d0ae7f5c5b2c975.js"],""]
-0:["NsMNV3vy3XTVnkoNDrSIL",[[["",{"children":["demo",{"children":["grid-fluid",{"children":["__PAGE__",{}]}]}]},"$undefined","$undefined",true],["",{"children":["demo",{"children":["grid-fluid",{"children":["__PAGE__",{},["$L1",["$","$L2",null,{"layout":"content","children":["$","$L3",null,{"columns":4,"gapInline":"large","gapBlock":"large","paddingInline":"large","paddingBlock":"large","fluid":true,"children":[["$","div",null,{"children":[["$","h2",null,{"children":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."}],["$","p",null,{"children":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."}]]}],["$","div",null,{"children":[["$","h2",null,{"children":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."}],["$","p",null,{"children":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."}]]}],["$","div",null,{"children":[["$","h2",null,{"children":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."}],["$","p",null,{"children":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."}]]}],["$","div",null,{"children":[["$","h2",null,{"children":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."}],["$","p",null,{"children":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."}]]}]]}]}],null]]},["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","demo","children","grid-fluid","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/3feeb3e68cd34d83.css","precedence":"next","crossOrigin":""}]]}]]},["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","demo","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}]]},[null,["$","$L6",null,{"children":["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"className":"layout core 404","children":[["$","h1",null,{"className":"heading-medium","children":"404 - Page Not Found"}],["$","$L7",null,{"href":"/components","children":"Go to components"}]]}],"notFoundStyles":[],"styles":null}],"params":{}}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/809f5ed4c43f9231.css","precedence":"next","crossOrigin":""}]],"$L8"]]]]
+0:["hpoRLZpwKnQAWkWoQzoO1",[[["",{"children":["demo",{"children":["grid-fluid",{"children":["__PAGE__",{}]}]}]},"$undefined","$undefined",true],["",{"children":["demo",{"children":["grid-fluid",{"children":["__PAGE__",{},["$L1",["$","$L2",null,{"layout":"content","children":["$","$L3",null,{"columns":4,"gapInline":"large","gapBlock":"large","paddingInline":"large","paddingBlock":"large","fluid":true,"children":[["$","div",null,{"children":[["$","h2",null,{"children":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."}],["$","p",null,{"children":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."}]]}],["$","div",null,{"children":[["$","h2",null,{"children":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."}],["$","p",null,{"children":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."}]]}],["$","div",null,{"children":[["$","h2",null,{"children":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."}],["$","p",null,{"children":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."}]]}],["$","div",null,{"children":[["$","h2",null,{"children":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."}],["$","p",null,{"children":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."}]]}]]}]}],null]]},["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","demo","children","grid-fluid","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/3feeb3e68cd34d83.css","precedence":"next","crossOrigin":""}]]}]]},["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","demo","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}]]},[null,["$","$L6",null,{"children":["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"className":"layout core 404","children":[["$","h1",null,{"className":"heading-medium","children":"404 - Page Not Found"}],["$","$L7",null,{"href":"/components","children":"Go to components"}]]}],"notFoundStyles":[],"styles":null}],"params":{}}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/52d73d3459c06a42.css","precedence":"next","crossOrigin":""}]],"$L8"]]]]
8:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Demo Grid Fluid — Green Design System"}],["$","meta","3",{"name":"next-size-adjust"}]]
1:null
diff --git a/demo/grid.html b/demo/grid.html
index ded9e03a..4a60f66d 100644
--- a/demo/grid.html
+++ b/demo/grid.html
@@ -1,8 +1,8 @@
-Demo Grid — Green Design System
This is the staging site of seb.io, The Green Design System is work in progress and not ready to use, but feel free to explore!
COL:1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
COL:2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
COL:3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
COL:4
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+Demo Grid — Green Design System
This is the staging site of seb.io, The Green Design System is work in progress and not ready to use, but feel free to explore!
COL:1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
COL:2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
COL:3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
COL:4
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
\ No newline at end of file
diff --git a/demo/typography.txt b/demo/typography.txt
index b99357da..61af0787 100644
--- a/demo/typography.txt
+++ b/demo/typography.txt
@@ -1,8 +1,8 @@
2:I[9323,["123","static/chunks/app/demo/typography/page-ccde7445c1b7fce2.js"],""]
3:I[5613,[],""]
4:I[1778,[],""]
-5:I[8980,["250","static/chunks/250-3a85ee001665a1f0.js","165","static/chunks/165-84104a2c8d589bb7.js","214","static/chunks/214-c874259fc4bbccff.js","640","static/chunks/640-55646cae222024ea.js","746","static/chunks/746-cd3122adf025bc8d.js","185","static/chunks/app/layout-6f632244c77869b4.js"],""]
+5:I[8980,["250","static/chunks/250-3a85ee001665a1f0.js","165","static/chunks/165-84104a2c8d589bb7.js","214","static/chunks/214-c874259fc4bbccff.js","640","static/chunks/640-55646cae222024ea.js","746","static/chunks/746-d043ffdc3efe63aa.js","185","static/chunks/app/layout-86853f93f1fd61ce.js"],""]
6:I[5250,["250","static/chunks/250-3a85ee001665a1f0.js","160","static/chunks/app/not-found-4d0ae7f5c5b2c975.js"],""]
-0:["NsMNV3vy3XTVnkoNDrSIL",[[["",{"children":["demo",{"children":["typography",{"children":["__PAGE__",{}]}]}]},"$undefined","$undefined",true],["",{"children":["demo",{"children":["typography",{"children":["__PAGE__",{},["$L1",["$","$L2",null,{"layout":"content","children":["$","div",null,{"className":"typo","children":[["$","div",null,{"className":"gds-fs-display-large","children":"Display Large"}],["$","div",null,{"className":"gds-fs-display-medium","children":"Display Medium"}],["$","div",null,{"className":"gds-fs-display-small","children":"Display Small"}],["$","div",null,{"className":"gds-fs-headline-large","children":"Headline Large"}],["$","div",null,{"className":"gds-fs-headline-medium","children":"Headline Medium"}],["$","div",null,{"className":"gds-fs-headline-small","children":"Headline Small"}],["$","div",null,{"className":"gds-fs-title-large","children":"Title Large"}],["$","div",null,{"className":"gds-fs-title-medium","children":"Title Medium"}],["$","div",null,{"className":"gds-fs-title-small","children":"Title Small"}],["$","div",null,{"className":"gds-fs-body-large","children":"Body Large"}],["$","div",null,{"className":"gds-fs-body-large-italic","children":"Body Large Italic"}],["$","div",null,{"className":"gds-fs-body-medium","children":"Body Medium"}],["$","div",null,{"className":"gds-fs-body-medium-italic","children":"Body Medium Italic"}],["$","div",null,{"className":"gds-fs-body-small","children":"Body Small"}],["$","div",null,{"className":"gds-fs-body-small-italic","children":"Body Small Italic"}],["$","div",null,{"className":"gds-fs-label-large","children":"Label Large"}],["$","div",null,{"className":"gds-fs-label-medium","children":"Label Medium"}],["$","div",null,{"className":"gds-fs-label-small","children":"Label Small"}],["$","div",null,{"className":"gds-fs-label-information-large","children":"Label Information Large"}],["$","div",null,{"className":"gds-fs-label-information-medium","children":"Label Information Medium"}],["$","div",null,{"className":"gds-fs-label-input-large","children":"Label Input Large"}],["$","div",null,{"className":"gds-fs-label-input-medium","children":"Label Input Medium"}],["$","div",null,{"className":"gds-fs-label-input-overline","children":"Label Input Overline"}]]}]}],null]]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","demo","children","typography","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/f0b2fd8478d38cc8.css","precedence":"next","crossOrigin":""}]]}]]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","demo","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}]]},[null,["$","$L5",null,{"children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"className":"layout core 404","children":[["$","h1",null,{"className":"heading-medium","children":"404 - Page Not Found"}],["$","$L6",null,{"href":"/components","children":"Go to components"}]]}],"notFoundStyles":[],"styles":null}],"params":{}}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/809f5ed4c43f9231.css","precedence":"next","crossOrigin":""}]],"$L7"]]]]
+0:["hpoRLZpwKnQAWkWoQzoO1",[[["",{"children":["demo",{"children":["typography",{"children":["__PAGE__",{}]}]}]},"$undefined","$undefined",true],["",{"children":["demo",{"children":["typography",{"children":["__PAGE__",{},["$L1",["$","$L2",null,{"layout":"content","children":["$","div",null,{"className":"typo","children":[["$","div",null,{"className":"gds-fs-display-large","children":"Display Large"}],["$","div",null,{"className":"gds-fs-display-medium","children":"Display Medium"}],["$","div",null,{"className":"gds-fs-display-small","children":"Display Small"}],["$","div",null,{"className":"gds-fs-headline-large","children":"Headline Large"}],["$","div",null,{"className":"gds-fs-headline-medium","children":"Headline Medium"}],["$","div",null,{"className":"gds-fs-headline-small","children":"Headline Small"}],["$","div",null,{"className":"gds-fs-title-large","children":"Title Large"}],["$","div",null,{"className":"gds-fs-title-medium","children":"Title Medium"}],["$","div",null,{"className":"gds-fs-title-small","children":"Title Small"}],["$","div",null,{"className":"gds-fs-body-large","children":"Body Large"}],["$","div",null,{"className":"gds-fs-body-large-italic","children":"Body Large Italic"}],["$","div",null,{"className":"gds-fs-body-medium","children":"Body Medium"}],["$","div",null,{"className":"gds-fs-body-medium-italic","children":"Body Medium Italic"}],["$","div",null,{"className":"gds-fs-body-small","children":"Body Small"}],["$","div",null,{"className":"gds-fs-body-small-italic","children":"Body Small Italic"}],["$","div",null,{"className":"gds-fs-label-large","children":"Label Large"}],["$","div",null,{"className":"gds-fs-label-medium","children":"Label Medium"}],["$","div",null,{"className":"gds-fs-label-small","children":"Label Small"}],["$","div",null,{"className":"gds-fs-label-information-large","children":"Label Information Large"}],["$","div",null,{"className":"gds-fs-label-information-medium","children":"Label Information Medium"}],["$","div",null,{"className":"gds-fs-label-input-large","children":"Label Input Large"}],["$","div",null,{"className":"gds-fs-label-input-medium","children":"Label Input Medium"}],["$","div",null,{"className":"gds-fs-label-input-overline","children":"Label Input Overline"}]]}]}],null]]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","demo","children","typography","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/f0b2fd8478d38cc8.css","precedence":"next","crossOrigin":""}]]}]]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","demo","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}]]},[null,["$","$L5",null,{"children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"className":"layout core 404","children":[["$","h1",null,{"className":"heading-medium","children":"404 - Page Not Found"}],["$","$L6",null,{"href":"/components","children":"Go to components"}]]}],"notFoundStyles":[],"styles":null}],"params":{}}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/52d73d3459c06a42.css","precedence":"next","crossOrigin":""}]],"$L7"]]]]
7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","meta","2",{"name":"next-size-adjust"}]]
1:null
diff --git a/foundation.html b/foundation.html
index 13499671..84570ae8 100644
--- a/foundation.html
+++ b/foundation.html
@@ -1,5 +1,5 @@
-Foundation — Green Design System
This is the staging site of seb.io, The Green Design System is work in progress and not ready to use, but feel free to explore!
Foundation
Green Design System, a framework designed to bring unity, efficiency, and coherent perspective to our digital experiences. Over time it will grow and evolve but always reflect our design philosophy. User needs first, being forefront and with confidence.
Our purpose
Green Design System, a framework designed to bring unity, efficiency, and coherent perspective to our digital experiences. Over time it will grow and evolve but always reflect our design philosophy. User needs first, being forefront and with confidence.
Tonality
Our tonality is a voice that speaks to the user, we do not scream, but when needed we raise our voice to be heard. The balance in volume allows us to point the user in the right direction, wave to get noticed or whisper when needed.
Visual style
This design language is a direct descendant and part of the global brand identity. It caters to designers and developers with design assets and code. Together we can focus on the user and the experience we want to build, and swiftly make changes as needed.
Embracing a modern aesthetic, the Green Design System radiates elegance. Its visual elements are a harmonious blend of contemporary design principles, ensuring a fresh and relevant appearance that stands the test of time.
Elegance is found in simplicity. The Green Design System champions an uncluttered approach, where every visual element serves a purpose. The result is an interface that feels effortless, allowing users to navigate seamlessly without unnecessary distractions.
In the world of design, confidence shines through
+
Foundation — Green Design System
This is the staging site of seb.io, The Green Design System is work in progress and not ready to use, but feel free to explore!
Foundation
Green Design System, a framework designed to bring unity, efficiency, and coherent perspective to our digital experiences. Over time it will grow and evolve but always reflect our design philosophy. User needs first, being forefront and with confidence.
Our purpose
Green Design System, a framework designed to bring unity, efficiency, and coherent perspective to our digital experiences. Over time it will grow and evolve but always reflect our design philosophy. User needs first, being forefront and with confidence.
Tonality
Our tonality is a voice that speaks to the user, we do not scream, but when needed we raise our voice to be heard. The balance in volume allows us to point the user in the right direction, wave to get noticed or whisper when needed.
Visual style
This design language is a direct descendant and part of the global brand identity. It caters to designers and developers with design assets and code. Together we can focus on the user and the experience we want to build, and swiftly make changes as needed.
Embracing a modern aesthetic, the Green Design System radiates elegance. Its visual elements are a harmonious blend of contemporary design principles, ensuring a fresh and relevant appearance that stands the test of time.
Elegance is found in simplicity. The Green Design System champions an uncluttered approach, where every visual element serves a purpose. The result is an interface that feels effortless, allowing users to navigate seamlessly without unnecessary distractions.
In the world of design, confidence shines through
simplicity. The Green Design System adheres to the
philosophy that "less is more." By stripping away the
superfluous, it exudes confidence, allowing the core essence
- of the design to take center stage.
Just as in our business operations, the Green Design System is meticulous in its attention to detail. Every pixel, every color, and every interaction is carefully considered, contributing to a visually polished and refined user interface.
The visual style of the Green Design System is not just about aesthetics; it's about creating an effortless harmony. The components seamlessly interact, the color palette is carefully curated, and the typography flows with purpose. It's a visual symphony that enhances the user experience.
Features
The Green Design System ensures a unified visual experience. Empowering designers and developers with versatile, accessible and coherent components.
The Green Design System ensures a seamless and consistent visual experience across our entire product suite. Every element, from buttons to typography, is meticulously crafted, creating a cohesive and polished user interface.
With an extensive library of reusable components, Green Design System empowers our teams to design and develop with speed and precision. This efficiency allows for more time spent on creative innovation and less on repetitive tasks, ultimately reducing time-to-market.
Green Design System adapts to the ever-changing landscape of our product needs. Whether it's a minor enhancement or a major overhaul, the system flexibly scales to maintain a user-centric and intuitive experience.
Rooted in user-centric design principles, our Design System places the user at the forefront. From accessible color choices to responsive design elements, we prioritize inclusivity and user satisfaction, ensuring that our products are both functional and enjoyable.
Explore a palette inspired by the versatility and vibrancy of our brand promise, typography and iconography are carefully chosen for both style and functionality. Our library of components is a playground of possibilities, designed to create interfaces that are not only visually appealing but also accessible and highly UX centered.
Integrating the Green Design System into your projects is as effortless as a seamless user experience. Whether you're a designer seeking inspiration or a developer looking for efficient code snippets, our documentation provides clear guidance. Let's embark on this journey together, creating digital experiences that reflect the innovation and precision of SEB.
\ No newline at end of file
+ of the design to take center stage.
Just as in our business operations, the Green Design System is meticulous in its attention to detail. Every pixel, every color, and every interaction is carefully considered, contributing to a visually polished and refined user interface.
The visual style of the Green Design System is not just about aesthetics; it's about creating an effortless harmony. The components seamlessly interact, the color palette is carefully curated, and the typography flows with purpose. It's a visual symphony that enhances the user experience.
Features
The Green Design System ensures a unified visual experience. Empowering designers and developers with versatile, accessible and coherent components.
The Green Design System ensures a seamless and consistent visual experience across our entire product suite. Every element, from buttons to typography, is meticulously crafted, creating a cohesive and polished user interface.
With an extensive library of reusable components, Green Design System empowers our teams to design and develop with speed and precision. This efficiency allows for more time spent on creative innovation and less on repetitive tasks, ultimately reducing time-to-market.
Green Design System adapts to the ever-changing landscape of our product needs. Whether it's a minor enhancement or a major overhaul, the system flexibly scales to maintain a user-centric and intuitive experience.
Rooted in user-centric design principles, our Design System places the user at the forefront. From accessible color choices to responsive design elements, we prioritize inclusivity and user satisfaction, ensuring that our products are both functional and enjoyable.
Explore a palette inspired by the versatility and vibrancy of our brand promise, typography and iconography are carefully chosen for both style and functionality. Our library of components is a playground of possibilities, designed to create interfaces that are not only visually appealing but also accessible and highly UX centered.
Integrating the Green Design System into your projects is as effortless as a seamless user experience. Whether you're a designer seeking inspiration or a developer looking for efficient code snippets, our documentation provides clear guidance. Let's embark on this journey together, creating digital experiences that reflect the innovation and precision of SEB.
\ No newline at end of file
diff --git a/foundation.txt b/foundation.txt
index 70547c1f..14609d61 100644
--- a/foundation.txt
+++ b/foundation.txt
@@ -2,9 +2,9 @@
3:I[6988,["250","static/chunks/250-3a85ee001665a1f0.js","165","static/chunks/165-84104a2c8d589bb7.js","310","static/chunks/app/foundation/page-24e90a814ef779a9.js"],""]
4:I[5613,[],""]
5:I[1778,[],""]
-6:I[8980,["250","static/chunks/250-3a85ee001665a1f0.js","165","static/chunks/165-84104a2c8d589bb7.js","214","static/chunks/214-c874259fc4bbccff.js","640","static/chunks/640-55646cae222024ea.js","746","static/chunks/746-cd3122adf025bc8d.js","185","static/chunks/app/layout-6f632244c77869b4.js"],""]
+6:I[8980,["250","static/chunks/250-3a85ee001665a1f0.js","165","static/chunks/165-84104a2c8d589bb7.js","214","static/chunks/214-c874259fc4bbccff.js","640","static/chunks/640-55646cae222024ea.js","746","static/chunks/746-d043ffdc3efe63aa.js","185","static/chunks/app/layout-86853f93f1fd61ce.js"],""]
7:I[5250,["250","static/chunks/250-3a85ee001665a1f0.js","160","static/chunks/app/not-found-4d0ae7f5c5b2c975.js"],""]
8:{}
-0:["NsMNV3vy3XTVnkoNDrSIL",[[["",{"children":["foundation",{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",{"children":["foundation",{"children":["__PAGE__",{},["$L1",["$","$L2",null,{"propsForComponent":{"params":{}},"Component":"$3","isStaticGeneration":true}],null]]},[null,["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","foundation","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/481ecaa8a430b74b.css","precedence":"next","crossOrigin":""}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/css/7e3e5dda362ad485.css","precedence":"next","crossOrigin":""}]]}],null]]},[null,["$","$L6",null,{"children":["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"className":"layout core 404","children":[["$","h1",null,{"className":"heading-medium","children":"404 - Page Not Found"}],["$","$L7",null,{"href":"/components","children":"Go to components"}]]}],"notFoundStyles":[],"styles":null}],"params":"$8"}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/809f5ed4c43f9231.css","precedence":"next","crossOrigin":""}]],"$L9"]]]]
+0:["hpoRLZpwKnQAWkWoQzoO1",[[["",{"children":["foundation",{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",{"children":["foundation",{"children":["__PAGE__",{},["$L1",["$","$L2",null,{"propsForComponent":{"params":{}},"Component":"$3","isStaticGeneration":true}],null]]},[null,["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","foundation","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/481ecaa8a430b74b.css","precedence":"next","crossOrigin":""}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/css/7e3e5dda362ad485.css","precedence":"next","crossOrigin":""}]]}],null]]},[null,["$","$L6",null,{"children":["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"className":"layout core 404","children":[["$","h1",null,{"className":"heading-medium","children":"404 - Page Not Found"}],["$","$L7",null,{"href":"/components","children":"Go to components"}]]}],"notFoundStyles":[],"styles":null}],"params":"$8"}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/52d73d3459c06a42.css","precedence":"next","crossOrigin":""}]],"$L9"]]]]
9:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Foundation — Green Design System"}],["$","meta","3",{"name":"description","content":"Green Design System, a framework designed to bring unity, efficiency, and coherent perspective to our digital experiences. Over time it will grow and evolve but always reflect our design philosophy. User needs first, being forefront and with confidence."}],["$","link","4",{"rel":"canonical","href":"https://seb.io/foundation/foundation"}],["$","meta","5",{"property":"og:title","content":"Foundation — Green Design System"}],["$","meta","6",{"property":"og:description","content":"Green Design System, a framework designed to bring unity, efficiency, and coherent perspective to our digital experiences. Over time it will grow and evolve but always reflect our design philosophy. User needs first, being forefront and with confidence."}],["$","meta","7",{"property":"og:image","content":"https://seb.io/foundation/og?title=Foundation"}],["$","meta","8",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","9",{"name":"twitter:title","content":"Foundation — Green Design System"}],["$","meta","10",{"name":"twitter:description","content":"Green Design System, a framework designed to bring unity, efficiency, and coherent perspective to our digital experiences. Over time it will grow and evolve but always reflect our design philosophy. User needs first, being forefront and with confidence."}],["$","meta","11",{"name":"twitter:image","content":"https://seb.io/foundation/og?title=Foundation"}],["$","meta","12",{"name":"next-size-adjust"}]]
1:null
diff --git a/foundation/accessibility.html b/foundation/accessibility.html
index e783709e..3959fb2a 100644
--- a/foundation/accessibility.html
+++ b/foundation/accessibility.html
@@ -1 +1 @@
-Foundation — Green Design System
This is the staging site of seb.io, The Green Design System is work in progress and not ready to use, but feel free to explore!
\ No newline at end of file
diff --git a/foundation/accessibility.txt b/foundation/accessibility.txt
index 6a6c3d41..5ed5bd1e 100644
--- a/foundation/accessibility.txt
+++ b/foundation/accessibility.txt
@@ -1,7 +1,7 @@
2:I[5613,[],""]
3:I[1778,[],""]
-4:I[8980,["250","static/chunks/250-3a85ee001665a1f0.js","165","static/chunks/165-84104a2c8d589bb7.js","214","static/chunks/214-c874259fc4bbccff.js","640","static/chunks/640-55646cae222024ea.js","746","static/chunks/746-cd3122adf025bc8d.js","185","static/chunks/app/layout-6f632244c77869b4.js"],""]
+4:I[8980,["250","static/chunks/250-3a85ee001665a1f0.js","165","static/chunks/165-84104a2c8d589bb7.js","214","static/chunks/214-c874259fc4bbccff.js","640","static/chunks/640-55646cae222024ea.js","746","static/chunks/746-d043ffdc3efe63aa.js","185","static/chunks/app/layout-86853f93f1fd61ce.js"],""]
5:I[5250,["250","static/chunks/250-3a85ee001665a1f0.js","160","static/chunks/app/not-found-4d0ae7f5c5b2c975.js"],""]
-0:["NsMNV3vy3XTVnkoNDrSIL",[[["",{"children":["foundation",{"children":["accessibility",{"children":["__PAGE__",{}]}]}]},"$undefined","$undefined",true],["",{"children":["foundation",{"children":["accessibility",{"children":["__PAGE__",{},["$L1",["$","div",null,{"className":"layout core","children":["$","section",null,{"children":[["$","h1",null,{"children":"Accessibility"}],["$","p",null,{"children":"Work in progress."}]]}]}],null]]},["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","foundation","children","accessibility","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}]]},[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","foundation","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],null]]},[null,["$","$L4",null,{"children":["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"className":"layout core 404","children":[["$","h1",null,{"className":"heading-medium","children":"404 - Page Not Found"}],["$","$L5",null,{"href":"/components","children":"Go to components"}]]}],"notFoundStyles":[],"styles":null}],"params":{}}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/809f5ed4c43f9231.css","precedence":"next","crossOrigin":""}]],"$L6"]]]]
+0:["hpoRLZpwKnQAWkWoQzoO1",[[["",{"children":["foundation",{"children":["accessibility",{"children":["__PAGE__",{}]}]}]},"$undefined","$undefined",true],["",{"children":["foundation",{"children":["accessibility",{"children":["__PAGE__",{},["$L1",["$","div",null,{"className":"layout core","children":["$","section",null,{"children":[["$","h1",null,{"children":"Accessibility"}],["$","p",null,{"children":"Work in progress."}]]}]}],null]]},["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","foundation","children","accessibility","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}]]},[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","foundation","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],null]]},[null,["$","$L4",null,{"children":["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"className":"layout core 404","children":[["$","h1",null,{"className":"heading-medium","children":"404 - Page Not Found"}],["$","$L5",null,{"href":"/components","children":"Go to components"}]]}],"notFoundStyles":[],"styles":null}],"params":{}}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/52d73d3459c06a42.css","precedence":"next","crossOrigin":""}]],"$L6"]]]]
6:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Foundation — Green Design System"}],["$","meta","3",{"name":"description","content":"Green Design System, a framework designed to bring unity, efficiency, and coherent perspective to our digital experiences. Over time it will grow and evolve but always reflect our design philosophy. User needs first, being forefront and with confidence."}],["$","link","4",{"rel":"canonical","href":"https://seb.io/foundation/foundation"}],["$","meta","5",{"property":"og:title","content":"Foundation — Green Design System"}],["$","meta","6",{"property":"og:description","content":"Green Design System, a framework designed to bring unity, efficiency, and coherent perspective to our digital experiences. Over time it will grow and evolve but always reflect our design philosophy. User needs first, being forefront and with confidence."}],["$","meta","7",{"property":"og:image","content":"https://seb.io/foundation/og?title=Foundation"}],["$","meta","8",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","9",{"name":"twitter:title","content":"Foundation — Green Design System"}],["$","meta","10",{"name":"twitter:description","content":"Green Design System, a framework designed to bring unity, efficiency, and coherent perspective to our digital experiences. Over time it will grow and evolve but always reflect our design philosophy. User needs first, being forefront and with confidence."}],["$","meta","11",{"name":"twitter:image","content":"https://seb.io/foundation/og?title=Foundation"}],["$","meta","12",{"name":"next-size-adjust"}]]
1:null
diff --git a/index.html b/index.html
index 5072da34..9d6562cf 100644
--- a/index.html
+++ b/index.html
@@ -1,4 +1,4 @@
-Green Design System
This is the staging site of seb.io, The Green Design System is work in progress and not ready to use, but feel free to explore!
Designed to bring unity to our digital experiences.
Green Design System is more than a polished user interface, its places the user at the very forefront of design, usability and accessibility.
A framework with accessibility and usability rooted at its core, Green Design System empowers designers and developers to create with speed and precision. It ensures a seamless and consistent visual experience across our entire product suite.
A framework with accessibility and usability rooted at its core, Green Design System empowers designers and developers to create with speed and precision. It ensures a seamless and consistent visual experience across our entire product suite.
\ No newline at end of file
diff --git a/index.txt b/index.txt
index 15020960..99bc4fe9 100644
--- a/index.txt
+++ b/index.txt
@@ -1,12 +1,12 @@
-2:I[9323,["250","static/chunks/250-3a85ee001665a1f0.js","746","static/chunks/746-cd3122adf025bc8d.js","931","static/chunks/app/page-7ea32f2df082fa76.js"],""]
-3:I[1433,["250","static/chunks/250-3a85ee001665a1f0.js","746","static/chunks/746-cd3122adf025bc8d.js","931","static/chunks/app/page-7ea32f2df082fa76.js"],""]
-4:I[3991,["250","static/chunks/250-3a85ee001665a1f0.js","746","static/chunks/746-cd3122adf025bc8d.js","931","static/chunks/app/page-7ea32f2df082fa76.js"],""]
-5:I[6441,["250","static/chunks/250-3a85ee001665a1f0.js","746","static/chunks/746-cd3122adf025bc8d.js","931","static/chunks/app/page-7ea32f2df082fa76.js"],""]
-6:I[8393,["250","static/chunks/250-3a85ee001665a1f0.js","746","static/chunks/746-cd3122adf025bc8d.js","931","static/chunks/app/page-7ea32f2df082fa76.js"],""]
-7:I[8980,["250","static/chunks/250-3a85ee001665a1f0.js","165","static/chunks/165-84104a2c8d589bb7.js","214","static/chunks/214-c874259fc4bbccff.js","640","static/chunks/640-55646cae222024ea.js","746","static/chunks/746-cd3122adf025bc8d.js","185","static/chunks/app/layout-6f632244c77869b4.js"],""]
+2:I[9323,["250","static/chunks/250-3a85ee001665a1f0.js","746","static/chunks/746-d043ffdc3efe63aa.js","931","static/chunks/app/page-7ea32f2df082fa76.js"],""]
+3:I[1433,["250","static/chunks/250-3a85ee001665a1f0.js","746","static/chunks/746-d043ffdc3efe63aa.js","931","static/chunks/app/page-7ea32f2df082fa76.js"],""]
+4:I[3991,["250","static/chunks/250-3a85ee001665a1f0.js","746","static/chunks/746-d043ffdc3efe63aa.js","931","static/chunks/app/page-7ea32f2df082fa76.js"],""]
+5:I[6441,["250","static/chunks/250-3a85ee001665a1f0.js","746","static/chunks/746-d043ffdc3efe63aa.js","931","static/chunks/app/page-7ea32f2df082fa76.js"],""]
+6:I[8393,["250","static/chunks/250-3a85ee001665a1f0.js","746","static/chunks/746-d043ffdc3efe63aa.js","931","static/chunks/app/page-7ea32f2df082fa76.js"],""]
+7:I[8980,["250","static/chunks/250-3a85ee001665a1f0.js","165","static/chunks/165-84104a2c8d589bb7.js","214","static/chunks/214-c874259fc4bbccff.js","640","static/chunks/640-55646cae222024ea.js","746","static/chunks/746-d043ffdc3efe63aa.js","185","static/chunks/app/layout-86853f93f1fd61ce.js"],""]
8:I[5613,[],""]
9:I[1778,[],""]
a:I[5250,["250","static/chunks/250-3a85ee001665a1f0.js","160","static/chunks/app/not-found-4d0ae7f5c5b2c975.js"],""]
-0:["NsMNV3vy3XTVnkoNDrSIL",[[["",{"children":["__PAGE__",{}]},"$undefined","$undefined",true],["",{"children":["__PAGE__",{},["$L1",["$","$L2",null,{"layout":"home","children":["$","$L3",null,{"columns":1,"gapBlock":"large","paddingInline":"large","paddingBlock":"large","children":[["$","$L4",null,{"heading":"Designed to bring unity to our digital experiences.","preamble":"Green Design System is more than a polished user interface, its places the user at the very forefront of design, usability and accessibility."}],["$","$L5",null,{"title":"Components"}],["$","$L6",null,{"title":"Resources"}],["$","$L3",null,{"columns":2,"tablet":1,"mobile":1,"gapBlock":"small","children":[["$","h2",null,{"children":"Empowering designers and developers"}],["$","p",null,{"className":"gds-fs-headline-small color-secondary","children":"A framework with accessibility and usability rooted at its core, Green Design System empowers designers and developers to create with speed and precision. It ensures a seamless and consistent visual experience across our entire product suite."}]]}]]}]}],null]]},[null,["$","$L7",null,{"children":["$","$L8",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L9",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"className":"layout core 404","children":[["$","h1",null,{"className":"heading-medium","children":"404 - Page Not Found"}],["$","$La",null,{"href":"/components","children":"Go to components"}]]}],"notFoundStyles":[],"styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/dccc81b9e3aea779.css","precedence":"next","crossOrigin":""}]]}],"params":{}}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/809f5ed4c43f9231.css","precedence":"next","crossOrigin":""}]],"$Lb"]]]]
+0:["hpoRLZpwKnQAWkWoQzoO1",[[["",{"children":["__PAGE__",{}]},"$undefined","$undefined",true],["",{"children":["__PAGE__",{},["$L1",["$","$L2",null,{"layout":"home","children":["$","$L3",null,{"columns":1,"gapBlock":"large","paddingInline":"large","paddingBlock":"large","children":[["$","$L4",null,{"heading":"Designed to bring unity to our digital experiences.","preamble":"Green Design System is more than a polished user interface, its places the user at the very forefront of design, usability and accessibility."}],["$","$L5",null,{"title":"Components"}],["$","$L6",null,{"title":"Resources"}],["$","$L3",null,{"columns":2,"tablet":1,"mobile":1,"gapBlock":"small","children":[["$","h2",null,{"children":"Empowering designers and developers"}],["$","p",null,{"className":"gds-fs-headline-small color-secondary","children":"A framework with accessibility and usability rooted at its core, Green Design System empowers designers and developers to create with speed and precision. It ensures a seamless and consistent visual experience across our entire product suite."}]]}]]}]}],null]]},[null,["$","$L7",null,{"children":["$","$L8",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L9",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"className":"layout core 404","children":[["$","h1",null,{"className":"heading-medium","children":"404 - Page Not Found"}],["$","$La",null,{"href":"/components","children":"Go to components"}]]}],"notFoundStyles":[],"styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/dccc81b9e3aea779.css","precedence":"next","crossOrigin":""}]]}],"params":{}}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/52d73d3459c06a42.css","precedence":"next","crossOrigin":""}]],"$Lb"]]]]
b:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Green Design System"}],["$","meta","3",{"name":"description","content":"Green Design System is more than a polished user interface, its places the user at the very forefront of design, usability and accessibility."}],["$","link","4",{"rel":"canonical","href":"https://seb.io/"}],["$","meta","5",{"name":"google-site-verification","content":"vhAE3wh75Jg9hnVBtCn30CPNnXyzEw-JAcS9Q1LwewY"}],["$","meta","6",{"name":"next-size-adjust"}]]
1:null
diff --git a/sitemap.xml b/sitemap.xml
index c1604ab9..33bd7495 100644
--- a/sitemap.xml
+++ b/sitemap.xml
@@ -2,55 +2,55 @@
https://seb.io
-2024-03-28T09:59:22.309Z
+2024-04-02T07:59:35.231Zyearly1https://seb.io/components
-2024-03-28T09:59:22.309Z
+2024-04-02T07:59:35.231Zmonthly0.8https://seb.io/component/button
-2024-03-28T09:59:22.309Z
+2024-04-02T07:59:35.231Zmonthly0.8https://seb.io/component/input
-2024-03-28T09:59:22.309Z
+2024-04-02T07:59:35.231Zmonthly0.8https://seb.io/foundation
-2024-03-28T09:59:22.309Z
+2024-04-02T07:59:35.231Zweekly0.5https://seb.io/foundation/accessibility
-2024-03-28T09:59:22.309Z
+2024-04-02T07:59:35.231Zweekly0.5https://seb.io/about
-2024-03-28T09:59:22.309Z
+2024-04-02T07:59:35.231Zweekly0.5https://seb.io/changelog
-2024-03-28T09:59:22.309Z
+2024-04-02T07:59:35.231Zweekly0.5https://seb.io/status
-2024-03-28T09:59:22.309Z
+2024-04-02T07:59:35.231Zweekly0.5
diff --git a/status.html b/status.html
index 5fe8d500..ba2bb6e3 100644
--- a/status.html
+++ b/status.html
@@ -1 +1 @@
-Status — Green
This is the staging site of seb.io, The Green Design System is work in progress and not ready to use, but feel free to explore!
\ No newline at end of file
diff --git a/status.txt b/status.txt
index 621200e0..8ec05845 100644
--- a/status.txt
+++ b/status.txt
@@ -1,7 +1,7 @@
2:I[5250,["250","static/chunks/250-3a85ee001665a1f0.js","357","static/chunks/app/status/page-3bda147db6bfa13f.js"],""]
3:I[5613,[],""]
4:I[1778,[],""]
-5:I[8980,["250","static/chunks/250-3a85ee001665a1f0.js","165","static/chunks/165-84104a2c8d589bb7.js","214","static/chunks/214-c874259fc4bbccff.js","640","static/chunks/640-55646cae222024ea.js","746","static/chunks/746-cd3122adf025bc8d.js","185","static/chunks/app/layout-6f632244c77869b4.js"],""]
-0:["NsMNV3vy3XTVnkoNDrSIL",[[["",{"children":["status",{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",{"children":["status",{"children":["__PAGE__",{},["$L1",["$","section",null,{"className":"layout status","children":[["$","header",null,{"children":[["$","div",null,{"children":"Component"}],["$","div",null,{"children":"Status"}],["$","div",null,{"children":"Last update"}]]}],["$","ul",null,{"children":[["$","li",null,{"children":[["$","$L2",null,{"href":"/component/breadcrumb","title":"Component","children":"Breadcrumb"}],["$","div",null,{"title":"Status","children":"work in progress"}],["$","time",null,{"dateTime":"2024-03-21T00:00:00.000Z","children":"March 21, 2024"}]]}],["$","li",null,{"children":[["$","$L2",null,{"href":"/component/button","title":"Component","children":"Button"}],["$","div",null,{"title":"Status","children":"work in progress"}],["$","time",null,{"dateTime":"2023-12-22T00:00:00.000Z","children":"December 22, 2023"}]]}],["$","li",null,{"children":[["$","$L2",null,{"href":"/component/input","title":"Component","children":"Input"}],["$","div",null,{"title":"Status","children":"work in progress"}],["$","time",null,{"dateTime":"2023-12-22T00:00:00.000Z","children":"December 22, 2023"}]]}]]}]]}],null]]},[null,["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","status","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/0e9056fb09f18a1e.css","precedence":"next","crossOrigin":""}]]}],null]]},[null,["$","$L5",null,{"children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"className":"layout core 404","children":[["$","h1",null,{"className":"heading-medium","children":"404 - Page Not Found"}],["$","$L2",null,{"href":"/components","children":"Go to components"}]]}],"notFoundStyles":[],"styles":null}],"params":{}}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/809f5ed4c43f9231.css","precedence":"next","crossOrigin":""}]],"$L6"]]]]
+5:I[8980,["250","static/chunks/250-3a85ee001665a1f0.js","165","static/chunks/165-84104a2c8d589bb7.js","214","static/chunks/214-c874259fc4bbccff.js","640","static/chunks/640-55646cae222024ea.js","746","static/chunks/746-d043ffdc3efe63aa.js","185","static/chunks/app/layout-86853f93f1fd61ce.js"],""]
+0:["hpoRLZpwKnQAWkWoQzoO1",[[["",{"children":["status",{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",{"children":["status",{"children":["__PAGE__",{},["$L1",["$","section",null,{"className":"layout status","children":[["$","header",null,{"children":[["$","div",null,{"children":"Component"}],["$","div",null,{"children":"Status"}],["$","div",null,{"children":"Last update"}]]}],["$","ul",null,{"children":[["$","li",null,{"children":[["$","$L2",null,{"href":"/component/breadcrumb","title":"Component","children":"Breadcrumb"}],["$","div",null,{"title":"Status","children":"work in progress"}],["$","time",null,{"dateTime":"2024-03-21T00:00:00.000Z","children":"March 21, 2024"}]]}],["$","li",null,{"children":[["$","$L2",null,{"href":"/component/button","title":"Component","children":"Button"}],["$","div",null,{"title":"Status","children":"work in progress"}],["$","time",null,{"dateTime":"2023-12-22T00:00:00.000Z","children":"December 22, 2023"}]]}],["$","li",null,{"children":[["$","$L2",null,{"href":"/component/input","title":"Component","children":"Input"}],["$","div",null,{"title":"Status","children":"work in progress"}],["$","time",null,{"dateTime":"2023-12-22T00:00:00.000Z","children":"December 22, 2023"}]]}]]}]]}],null]]},[null,["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","status","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/0e9056fb09f18a1e.css","precedence":"next","crossOrigin":""}]]}],null]]},[null,["$","$L5",null,{"children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"className":"layout core 404","children":[["$","h1",null,{"className":"heading-medium","children":"404 - Page Not Found"}],["$","$L2",null,{"href":"/components","children":"Go to components"}]]}],"notFoundStyles":[],"styles":null}],"params":{}}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/52d73d3459c06a42.css","precedence":"next","crossOrigin":""}]],"$L6"]]]]
6:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Status — Green "}],["$","meta","3",{"name":"description","content":"Green Design System"}],["$","link","4",{"rel":"canonical","href":"https://seb.io/status/status"}],["$","meta","5",{"property":"og:title","content":"Status — Green "}],["$","meta","6",{"property":"og:description","content":"Green Design System"}],["$","meta","7",{"property":"og:image","content":"https://seb.io/status/og?title=Status"}],["$","meta","8",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","9",{"name":"twitter:title","content":"Status — Green "}],["$","meta","10",{"name":"twitter:description","content":"Green Design System"}],["$","meta","11",{"name":"twitter:image","content":"https://seb.io/status/og?title=Status"}],["$","meta","12",{"name":"next-size-adjust"}]]
1:null
diff --git a/ux-writing.html b/ux-writing.html
index 87b59b38..043c6082 100644
--- a/ux-writing.html
+++ b/ux-writing.html
@@ -1 +1 @@
-UX writing — Green
This is the staging site of seb.io, The Green Design System is work in progress and not ready to use, but feel free to explore!
UX writing and our guidelines
Regardless of where, when or how the customer meets us, the experience of SEB must be the same because each meeting contributes to how we are perceived. A positive customer experience opens the door to new business.
This is particularly important in texts aimed at customers. Mistakes affect the reader's concentration on the content and understanding of the text. Because our texts are correct, our credibility with customers and other visitors (=potential customers) increases.
Written ID – our tone of voice
SEB's Written ID is our guiding light, and it forms the basis for all our communication, including UX writing. Our communication must show that we live and operate according to our language keys:
Open and personal: We are people speaking to people. That’s why we prefer using an informal, personal voice rather than an official one.
Relevant and clear: Our texts are clear and easy to grasp, and we start with what’s most important.
Driven and engaged: We have the engagement and energy; we share our drive with our customers. Linguistically that means our language is alert and modern.
The voice the customers encounter when they use a service on the internet banking services or the mobile apps must be the same in guides, sales, error messages, etc. But UX writing should, to a greater degree than other non-fiction texts, be consistent. Therefore, we have special principles for different design components.
UX writing in SEB
What is UX writing and how will good UX texts help our customers?
The UX texts help the user, or customer, to navigate apps, websites, and other digital products. They are one part of many in a final design. UX texts focus on accessibility, they are short and to the point without losing any important information. They are user-friendly, contextually appropriate and with the right tone of voice. The UX texts should solve a user problem and meet the business goals.
These are many requirements to take into account and which do not always go hand in hand with each other. Therefore, people with the right knowledge and skills must write the UX texts.
Good UX writing is like a personal guide that acts in the background and helps customers understand how to act and navigate. It ensures that customers do not end up in situations where they feel stupid or underestimated. Really good UX writing will rather make them feel satisfied because they succeed in finishing a task without unnecessary thresholds.
UX writing in SEB is:
Consistent – we strive to use the same word for the same item, action, or object.
Educational – we make an effort to be brief and pedagogic.
Distinct – we avoid bank or tech jargon.
Helpful – we prevent mistakes and setbacks.
Few examples of UX texts:
Labels and headings
Menus
Buttons, links, and navigation texts
Error messages
Help texts and instructions
Onboardings
Empty states
Loading screen messages
Success messages
Disclaimer texts
Translate texts from Swedish to English
If you need to translate Swedish texts into English, the bank has agreements with, among others, Språkkonsulterna and Lionbridge. Contact them directly to order a translation.
When you contact them to ask if they are available to take on the assignment, they want to know approximately how many words are to be translated. They also need to know the name of who will pay the invoice before you send the translation document.
Språkkonsulterna: info@sprakkonsulterna.se
Lionbridge:jakob.nordby@lionbridge.com
When you need help with tone-of-voice, instructions, vocabulary or a UX writer to work with, please don’t hesitate to contact the UX writing team. Reach out in the Teams channels UX writing in Green Design System or UX writing in CX Community, or if you already have a contact or dedicated writer for your team or product, simply contact that person.
This is the staging site of seb.io, The Green Design System is work in progress and not ready to use, but feel free to explore!
UX writing and our guidelines
Regardless of where, when or how the customer meets us, the experience of SEB must be the same because each meeting contributes to how we are perceived. A positive customer experience opens the door to new business.
This is particularly important in texts aimed at customers. Mistakes affect the reader's concentration on the content and understanding of the text. Because our texts are correct, our credibility with customers and other visitors (=potential customers) increases.
Written ID – our tone of voice
SEB's Written ID is our guiding light, and it forms the basis for all our communication, including UX writing. Our communication must show that we live and operate according to our language keys:
Open and personal: We are people speaking to people. That’s why we prefer using an informal, personal voice rather than an official one.
Relevant and clear: Our texts are clear and easy to grasp, and we start with what’s most important.
Driven and engaged: We have the engagement and energy; we share our drive with our customers. Linguistically that means our language is alert and modern.
The voice the customers encounter when they use a service on the internet banking services or the mobile apps must be the same in guides, sales, error messages, etc. But UX writing should, to a greater degree than other non-fiction texts, be consistent. Therefore, we have special principles for different design components.
UX writing in SEB
What is UX writing and how will good UX texts help our customers?
The UX texts help the user, or customer, to navigate apps, websites, and other digital products. They are one part of many in a final design. UX texts focus on accessibility, they are short and to the point without losing any important information. They are user-friendly, contextually appropriate and with the right tone of voice. The UX texts should solve a user problem and meet the business goals.
These are many requirements to take into account and which do not always go hand in hand with each other. Therefore, people with the right knowledge and skills must write the UX texts.
Good UX writing is like a personal guide that acts in the background and helps customers understand how to act and navigate. It ensures that customers do not end up in situations where they feel stupid or underestimated. Really good UX writing will rather make them feel satisfied because they succeed in finishing a task without unnecessary thresholds.
UX writing in SEB is:
Consistent – we strive to use the same word for the same item, action, or object.
Educational – we make an effort to be brief and pedagogic.
Distinct – we avoid bank or tech jargon.
Helpful – we prevent mistakes and setbacks.
Few examples of UX texts:
Labels and headings
Menus
Buttons, links, and navigation texts
Error messages
Help texts and instructions
Onboardings
Empty states
Loading screen messages
Success messages
Disclaimer texts
Translate texts from Swedish to English
If you need to translate Swedish texts into English, the bank has agreements with, among others, Språkkonsulterna and Lionbridge. Contact them directly to order a translation.
When you contact them to ask if they are available to take on the assignment, they want to know approximately how many words are to be translated. They also need to know the name of who will pay the invoice before you send the translation document.
When you need help with tone-of-voice, instructions, vocabulary or a UX writer to work with, please don’t hesitate to contact the UX writing team. Reach out in the Teams channels UX writing in Green Design System or UX writing in CX Community, or if you already have a contact or dedicated writer for your team or product, simply contact that person.