\n \n
']);return ib=function(){return e},e}ip.styles=(0,oS.iv)(ih()),(0,o_.u2)([(0,oK.Cb)({type:Boolean,reflect:!0})],ip.prototype,"show",2),ip=(0,o_.u2)([(0,oD.MD)("gds-backdrop")],ip);var im=(0,oS.iv)(ig()),iv=class extends oT.e{_handleTriggerRefChanged(){var e;null==(e=this.triggerRef)||e.then(e=>{e&&(this._trigger=e)})}_handleAnchorRefChanged(){var e;null==(e=this.anchorRef)||e.then(e=>{e&&(this._anchor=e)})}_handleTriggerChanged(){(0,o_.U9)(this,eg,eb).call(this),(0,o_.U9)(this,ef,ey).call(this)}_handleAnchorChanged(){(0,o_.U9)(this,ex,ek).call(this)}connectedCallback(){super.connectedCallback(),o4.instance.apply(this,"gds-popover"),(0,o_.U9)(this,eg,eb).call(this),this._handleOpenChange(),this.addEventListener("keydown",e=>{"Escape"===e.key&&this.open&&((0,o_.ac)(this,eu).call(this),e.stopPropagation(),e.preventDefault())}),this.addEventListener("focusin",e=>{let t=e.target;"INPUT"===t.tagName||"TEXTAREA"===t.tagName?this._isVirtKbVisible=!0:this._isVirtKbVisible=!1}),this.addEventListener("blurin",e=>{this._isVirtKbVisible=!1})}disconnectedCallback(){super.disconnectedCallback(),(0,o_.U9)(this,em,ev).call(this)}render(){return(0,oD.dy)(ib(),(0,o_.U9)(this,er,ea),!this.open,(0,o7.$)({"v-kb-visible":this._isVirtKbVisible,"use-modal-in-mobile":!this.disableMobileStyles,"has-backdrop":!!(this.backdrop&&"true"===this.backdrop)}),String(!this.open),()=>this.open&&(0,o_.ac)(this,eu).call(this),this.label,(0,o_.ac)(this,ep),(0,o3.WI)("Close"))}_handleOpenChange(){let e=(this.nonmodal?(0,o_.ac)(this,ec):this._elDialog)||document;this.updateComplete.then(()=>{var t,n,o,s;null==(t=this._trigger)||t.setAttribute("aria-expanded",String(this.open)),this.open?(this.nonmodal?null==(o=this._elDialog)||o.setAttribute("open","true"):null==(n=this._elDialog)||n.showModal(),this.autofocus&&((0,o_.ac)(this,eC).call(this),setTimeout(()=>(0,o_.ac)(this,eC).call(this),250)),requestAnimationFrame(()=>{(0,o_.ac)(this,ec)&&((0,o_.ac)(this,ec).show=!0)}),setTimeout(()=>e.addEventListener("click",(0,o_.ac)(this,eS)),0)):(null==(s=this._elDialog)||s.close(),e.removeEventListener("click",(0,o_.ac)(this,eS)),(0,o_.ac)(this,ec)&&((0,o_.ac)(this,ec).show=!1))})}_handleBackdropChange(){var e;let t=null==(e=this.parentElement)?void 0:e.getRootNode();this.backdrop&&t&&(0,o_.qx)(this,ec,t.querySelector(this.backdrop))}_handleMobileLayout(e){var t,n,o,s;(0,o_.qx)(this,ed,e),e&&!this.disableMobileStyles?(null==(t=(0,o_.ac)(this,el))||t.call(this),null==(n=this._elDialog)||n.style.removeProperty("left"),null==(o=this._elDialog)||o.style.removeProperty("top"),null==(s=this._elDialog)||s.style.removeProperty("minWidth"),this.updateComplete.then(()=>{var e;this.open&&(null==(e=this._elDialog)||e.showModal())})):this.updateComplete.then(()=>{(0,o_.U9)(this,ex,ek).call(this)})}constructor(){super(...arguments),(0,o_.Ko)(this,er),(0,o_.Ko)(this,eg),(0,o_.Ko)(this,em),(0,o_.Ko)(this,ef),(0,o_.Ko)(this,ex),this.open=!1,this.popupRole="dialog",this.label=void 0,this.placement="bottom-start",this.disableMobileStyles=!1,this.autofocus=!1,this.calcMinWidth=e=>"".concat(e.offsetWidth,"px"),this.calcMaxWidth=e=>"auto",this.calcMinHeight=e=>"auto",this.calcMaxHeight=e=>"500px",this.nonmodal=!1,this.floatingUIMiddleware=[(0,s$.cv)(8),(0,s$.RR)()],this._trigger=void 0,this._anchor=void 0,this._isVirtKbVisible=!1,(0,o_.Ko)(this,el,void 0),(0,o_.Ko)(this,ed,!1),(0,o_.Ko)(this,ec,void 0),(0,o_.Ko)(this,eu,()=>{this.open=!1,(0,o_.ac)(this,eh).call(this,"cancel")}),(0,o_.Ko)(this,eh,e=>{this.dispatchEvent(new CustomEvent("gds-ui-state",{detail:{open:this.open,reason:e},bubbles:!1,composed:!1}))}),(0,o_.Ko)(this,ep,e=>{e.stopPropagation(),e.preventDefault(),this.open=!1,(0,o_.ac)(this,eh).call(this,"close"),setTimeout(()=>{var e;return null==(e=this._trigger)?void 0:e.focus()},250)}),(0,o_.Ko)(this,ew,e=>{("ArrowDown"===e.key||"ArrowUp"===e.key)&&(e.preventDefault(),this.open=!0,(0,o_.ac)(this,eh).call(this,"show")),"Escape"===e.key&&this.open&&(0,o_.ac)(this,eu).call(this)}),(0,o_.Ko)(this,e_,e=>{e.preventDefault(),this.open=!this.open,(0,o_.ac)(this,eh).call(this,this.open?"show":"close")}),(0,o_.Ko)(this,eC,()=>{var e;let t=null==(e=this._elDefaultSlot)?void 0:e.assignedElements()[0];this.updateComplete.then(()=>{null==t||t.focus()})}),(0,o_.Ko)(this,eS,e=>{let t=this._elDialog;if((e.clientX>0||e.clientY>0)&&t&&this.open){let n=t.getBoundingClientRect();n.top<=e.clientY&&e.clientY<=n.top+n.height&&n.left<=e.clientX&&e.clientX<=n.left+n.width||(this.open=!1,(0,o_.ac)(this,eh).call(this,"close"))}})}};er=new WeakSet,ea=function(){this._elTriggerSlot&&this._elTriggerSlot.assignedElements()[0]&&(this._trigger=this._elTriggerSlot.assignedElements()[0],this._anchor=this._elTriggerSlot.assignedElements()[0])},el=new WeakMap,ed=new WeakMap,ec=new WeakMap,eu=new WeakMap,eh=new WeakMap,ep=new WeakMap,eg=new WeakSet,eb=function(){var e,t;null==(e=this._trigger)||e.addEventListener("keydown",(0,o_.ac)(this,ew)),null==(t=this._trigger)||t.addEventListener("click",(0,o_.ac)(this,e_))},em=new WeakSet,ev=function(){var e,t,n;null==(e=this._trigger)||e.removeEventListener("keydown",(0,o_.ac)(this,ew)),null==(t=this._trigger)||t.removeEventListener("click",(0,o_.ac)(this,e_)),null==(n=(0,o_.ac)(this,el))||n.call(this)},ef=new WeakSet,ey=function(){var e;if(this._trigger){null==(e=this._trigger)||e.setAttribute("aria-expanded",String(this.open)),this._trigger.nodeName.startsWith("GDS-")||["A","BUTTON","INPUT","TEXTAREA"].includes(this._trigger.nodeName)||(this._trigger.setAttribute("tabindex","0"),this._trigger.setAttribute("role","button"));let t=this._trigger.nodeName.startsWith("GDS-")?"gds-aria-haspopup":"aria-haspopup";null===this._trigger.getAttribute(t)&&this._trigger.setAttribute(t,this.popupRole)}},ex=new WeakSet,ek=function(){if(!this._anchor||!this._elDialog)return;let e=this._anchor,t=this._elDialog;!e||!t||(0,o_.ac)(this,ed)&&!this.disableMobileStyles||((0,o_.ac)(this,el)&&(0,o_.ac)(this,el).call(this),(0,o_.qx)(this,el,(0,s$.Me)(e,t,()=>{Object.assign(t.style,{minWidth:this.calcMinWidth(e),maxWidth:this.calcMaxWidth(e),minHeight:this.calcMinHeight(e),maxHeight:this.calcMaxHeight(e)}),(0,s$.oo)(e,t,{placement:this.placement,middleware:this.floatingUIMiddleware,strategy:"fixed"}).then(e=>{let{x:n,y:o}=e;return Object.assign(t.style,{left:"".concat(n,"px"),top:"".concat(o,"px")})})})))},ew=new WeakMap,e_=new WeakMap,eC=new WeakMap,eS=new WeakMap,iv.styles=(0,oS.$m)(im),(0,o_.u2)([(0,oK.Cb)({type:Boolean,reflect:!0})],iv.prototype,"open",2),(0,o_.u2)([(0,oK.Cb)({attribute:"popup-role"})],iv.prototype,"popupRole",2),(0,o_.u2)([(0,oK.Cb)({attribute:!1})],iv.prototype,"triggerRef",2),(0,o_.u2)([(0,oK.Cb)({attribute:!1})],iv.prototype,"anchorRef",2),(0,o_.u2)([(0,oK.Cb)()],iv.prototype,"label",2),(0,o_.u2)([(0,oK.Cb)()],iv.prototype,"placement",2),(0,o_.u2)([(0,oK.Cb)({type:Boolean})],iv.prototype,"disableMobileStyles",2),(0,o_.u2)([(0,oK.Cb)({type:Boolean})],iv.prototype,"autofocus",2),(0,o_.u2)([(0,oK.Cb)({attribute:!1})],iv.prototype,"calcMinWidth",2),(0,o_.u2)([(0,oK.Cb)({attribute:!1})],iv.prototype,"calcMaxWidth",2),(0,o_.u2)([(0,oK.Cb)({attribute:!1})],iv.prototype,"calcMinHeight",2),(0,o_.u2)([(0,oK.Cb)({attribute:!1})],iv.prototype,"calcMaxHeight",2),(0,o_.u2)([(0,oK.Cb)({type:Boolean})],iv.prototype,"nonmodal",2),(0,o_.u2)([(0,oK.Cb)()],iv.prototype,"backdrop",2),(0,o_.u2)([(0,oK.Cb)({attribute:!1})],iv.prototype,"floatingUIMiddleware",2),(0,o_.u2)([(0,oK.SB)()],iv.prototype,"_trigger",2),(0,o_.u2)([(0,oK.SB)()],iv.prototype,"_anchor",2),(0,o_.u2)([(0,oK.SB)()],iv.prototype,"_isVirtKbVisible",2),(0,o_.u2)([(0,oK.IO)("slot:not([name])")],iv.prototype,"_elDefaultSlot",2),(0,o_.u2)([(0,oK.IO)('slot[name="trigger"]')],iv.prototype,"_elTriggerSlot",2),(0,o_.u2)([(0,oK.IO)("dialog")],iv.prototype,"_elDialog",2),(0,o_.u2)([o1("triggerRef")],iv.prototype,"_handleTriggerRefChanged",1),(0,o_.u2)([o1("anchorRef")],iv.prototype,"_handleAnchorRefChanged",1),(0,o_.u2)([o1("_trigger")],iv.prototype,"_handleTriggerChanged",1),(0,o_.u2)([o1("_anchor")],iv.prototype,"_handleAnchorChanged",1),(0,o_.u2)([o1("open")],iv.prototype,"_handleOpenChange",1),(0,o_.u2)([o1("backdrop")],iv.prototype,"_handleBackdropChange",1),(0,o_.u2)([(s="(max-width: 576px)",(e,t,n)=>{let o=window.matchMedia(s),i=e.connectedCallback,r=e.disconnectedCallback;e.connectedCallback=function(){var e;null==i||i.call(this);let t=e=>{var t;null==(t=n.value)||t.call(this,e.matches)};o.addEventListener("change",t),this.disconnectedCallback=function(){null==r||r.call(this),o.removeEventListener("change",t)},null==(e=n.value)||e.call(this,o.matches)}})],iv.prototype,"_handleMobileLayout",1),iv=(0,o_.u2)([(0,oD.MD)("gds-popover"),(0,o3.kI)()],iv),n(5950),n(4584);let iy=(0,ox.Wi)("gds-context-menu");var ix=(0,oy.L)({tagName:iy,elementClass:ie,react:of,events:{onGdsMenuItemClick:"gds-menu-item-click",onGdsUiState:"gds-ui-state",onGdsElementDisconnected:"gds-element-disconnected"},displayName:"GdsContextMenu"}),ik={fromAttribute:e=>new Date(e),toAttribute:e=>e.toISOString()},iw=n(9563),i_=n(3597),iC=n(751),iS=n(8190);function iW(){let e=(0,ok._)(["\n @layer base, reset;\n\n @layer base {\n :host {\n display: flex;\n flex-direction: column;\n width: 100%;\n contain: layout;\n isolation: isolate;\n gap: var(--gds-space-xs);\n font-family: inherit;\n min-width: 200px;\n }\n\n ::part(_button) {\n outline-offset: -1px;\n }\n\n .spinners {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n inline-size: 11ch;\n gap: var(--gds-space-4xs);\n font-size: var(--gds-text-size-detail-s);\n font-weight: var(--gds-text-weight-regular);\n }\n\n .spinner {\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n height: 100%;\n box-sizing: border-box;\n /* border-radius: var(--gds-space-2xs); */\n outline: none;\n padding-block: var(--gds-space-3xs);\n text-transform: uppercase;\n line-height: 1;\n text-align: center;\n\n &:focus {\n background-color: var(--gds-color-l3-background-primary);\n color: var(--gds-color-l3-content-primary);\n }\n }\n }\n"]);return iW=function(){return e},e}function iE(){let e=(0,ok._)(['\n ',"\n "]);return iE=function(){return e},e}function iM(){let e=(0,ok._)(['\n ','\n
\n ","
"]);return i5=function(){return e},e}tg=new WeakMap,tb=new WeakMap,i2.styles=i0,(0,o_.u2)([(0,oK.Cb)({type:Boolean,reflect:!0,attribute:"aria-multiselectable",converter:{fromAttribute:Boolean,toAttribute:e=>e.toString()}})],i2.prototype,"multiple",2),(0,o_.u2)([(0,oK.Cb)()],i2.prototype,"compareWith",2),(0,o_.u2)([o1("multiple")],i2.prototype,"_rerenderOptions",1),i2=(0,o_.u2)([(0,oD.MD)("gds-listbox")],i2);var i9=class extends ia(oT.e){get hidden(){return(0,o_.ac)(this,tm)}set hidden(e){this.isPlaceholder||((0,o_.qx)(this,tm,"true"===e||!0===e),this.setAttribute("aria-hidden",e.toString()))}connectedCallback(){super.connectedCallback(),this.setAttribute("role","option"),this.isPlaceholder&&((0,o_.qx)(this,tm,!0),this.setAttribute("aria-hidden","true")),this.updateComplete.then(()=>o4.instance.apply(this,"gds-option"))}get parentElement(){return super.parentElement}_handlePlaceholderStatusChange(){this.isPlaceholder?((0,o_.qx)(this,tm,!0),this.setAttribute("aria-hidden","true")):((0,o_.qx)(this,tm,!1),this.setAttribute("aria-hidden","false"))}render(){var e;let t=null==(e=this.parentElement)?void 0:e.multiple,n=(0,oD.dy)(i3(),(0,o7.$)({checked:this.selected}),this.selected?(0,oD.dy)(i1()):"");return t||(this.selected?this.setAttribute("highlighted",""):this.removeAttribute("highlighted")),(0,oD.dy)(i5(),(0,o8.g)(t,()=>n))}constructor(){super(),(0,o_.Ko)(this,tv),(0,o_.Ko)(this,tm,!1),this.selected=!1,this.isPlaceholder=!1,this.addEventListener("click",(0,o_.U9)(this,tv,tf)),this.addEventListener("keydown",e=>{("Enter"===e.key||" "===e.key)&&(e.preventDefault(),(0,o_.U9)(this,tv,tf).call(this,e))})}};function i4(){let e=(0,ok._)(["\n @layer base, a11y;\n\n @layer a11y {\n @media (prefers-reduced-motion: reduce) {\n .field {\n transition: none;\n }\n }\n }\n\n @layer base {\n * {\n box-sizing: border-box;\n }\n\n .field {\n display: flex;\n position: relative;\n align-items: center;\n justify-content: space-between;\n gap: var(--gds-space-xs);\n padding-block: var(--gds-space-xs);\n padding-inline: var(--gds-space-m) var(--gds-space-s);\n min-block-size: var(--gds-space-3xl);\n block-size: var(--gds-space-3xl);\n outline-style: solid;\n outline-width: 0;\n border-radius: var(--gds-space-xs);\n background: var(--gds-color-l3-background-secondary);\n color: var(--gds-color-l3-content-tertiary);\n border: var(--gds-space-4xs) solid var(--gds-color-l3-border-secondary);\n cursor: text;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 368ms;\n transition-property: background-color;\n\n .right {\n display: flex;\n position: absolute;\n gap: var(--gds-space-xs);\n right: var(--gds-space-s);\n top: var(--gds-space-xs);\n block-size: max-content;\n }\n }\n\n .field.lead-slot-occupied {\n padding-inline-start: var(--gds-space-s);\n }\n\n .field.action-slot-occupied:not(.trail-slot-occupied) {\n padding-inline-end: var(--gds-space-s);\n\n &.small {\n padding-inline-end: var(--gds-space-xs);\n }\n }\n\n .field:focus-within {\n outline-width: var(--gds-space-3xs);\n outline-offset: var(--gds-space-3xs);\n outline-color: currentColor;\n border-color: currentColor;\n }\n\n .field.small {\n gap: var(--gds-space-2xs);\n padding: calc(var(--gds-space-xs) - 1px) var(--gds-space-xs);\n min-block-size: var(--gds-space-xl);\n block-size: var(--gds-space-xl);\n }\n\n .field.multiline {\n align-items: flex-start;\n padding: var(--gds-space-s);\n padding-inline-start: var(--gds-space-m);\n height: max-content;\n }\n\n .field.disabled {\n background: var(--gds-color-l3-background-disabled);\n color: var(--gds-color-l3-content-disabled);\n border-color: transparent;\n pointer-events: none;\n }\n\n .field.invalid {\n background: var(--gds-color-l3-background-negative-secondary);\n border-color: var(--gds-color-l3-border-negative);\n color: var(--gds-color-l3-content-negative);\n }\n\n slot:not([name])::slotted(*) {\n color: currentColor;\n }\n\n .main-slot-wrap {\n display: flex;\n gap: var(--gds-space-xs);\n flex: 1;\n }\n\n .main-slot-wrap.multiline {\n height: max-content;\n }\n\n @media (hover: hover) {\n .field:hover {\n background: color-mix(\n in srgb,\n var(--gds-color-l3-background-secondary),\n var(--gds-color-l3-states-light-hover)\n );\n }\n\n .field.invalid:hover {\n background: color-mix(\n in srgb,\n var(--gds-color-l3-background-negative-secondary),\n var(--gds-color-l3-states-negative-hover)\n );\n }\n }\n\n slot[name='lead']::slotted([gds-element^='gds-icon-']) {\n align-items: center;\n justify-content: center;\n display: flex;\n inline-size: var(--gds-space-l);\n block-size: var(--gds-space-l);\n }\n\n .multiline slot[name='action']::slotted([gds-element]) {\n margin-top: -4px;\n }\n }\n"]);return i4=function(){return e},e}function i7(){let e=(0,ok._)(['\n \n ',"\n
\n "]);return i7=function(){return e},e}function i6(){let e=(0,ok._)(["\n "," ",'\n \n '," ","\n
\n "]);return i6=function(){return e},e}function i8(){let e=(0,ok._)(["",""]);return i8=function(){return e},e}function re(){let e=(0,ok._)([' \n \n
"]);return rl=function(){return e},e}function rd(){let e=(0,ok._)(['\n ',"\n
\n \n
\n\n ","\n "]);return rp=function(){return e},e}function rg(){let e=(0,ok._)(['\n \n
\n ',"\n ','
\n\n
']);return ai=function(){return e},e}var ar=class extends oT.e{connectedCallback(){super.connectedCallback(),o4.instance.apply(this,"gds-grouped-list")}render(){return(0,oD.dy)(ai(),(0,o8.g)(this.label,()=>(0,oD.dy)(as(),this.label)))}constructor(){super(...arguments),this.label=""}};function aa(){let e=(0,ok._)(["\n \n \n
\n 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 a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=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)a(t,i,{get:e[i],enumerable:!0})},o=(t,e,i,r)=>{if(e&&typeof e==\\"object\\"||typeof e==\\"function\\")for(let s of m(e))!p.call(t,s)&&s!==i&&a(t,s,{get:()=>e[s],enumerable:!(r=u(e,s))||r.enumerable});return t};var b=(t,e,i)=>(i=t!=null?l(g(t)):{},o(e||!t||!t.__esModule?a(i,\\"default\\",{value:t,enumerable:!0}):i,t)),x=t=>o(a({},\\"__esModule\\",{value:!0}),t);var h=f((D,c)=>{c.exports=_jsx_runtime});var N={};w(N,{default:()=>v,frontmatter:()=>y});var n=b(h()),y={title:\\"v1.0.0-beta.1\\",version:\\"1.0.0-beta.1\\",date:new Date(17023392e5),summary:\\"We are proud to announce the first scaled down version of a new documentation site for Green Design System\\"};function d(t){let e=Object.assign({p:\\"p\\",h2:\\"h2\\",a:\\"a\\",span:\\"span\\",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.jsxs)(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:(0,n.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Features included in this first release\\"]}),`\\n`,(0,n.jsxs)(e.h3,{id:\\"component-pages\\",children:[(0,n.jsx)(e.a,{className:\\"anchor\\",href:\\"#component-pages\\",children:(0,n.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"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.jsxs)(e.h3,{id:\\"search\\",children:[(0,n.jsx)(e.a,{className:\\"anchor\\",href:\\"#search\\",children:(0,n.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"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.jsxs)(e.h3,{id:\\"lightdark-mode\\",children:[(0,n.jsx)(e.a,{className:\\"anchor\\",href:\\"#lightdark-mode\\",children:(0,n.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"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 k(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(d,t)})):d(t)}var v=k;return x(N);})();\\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":"2025-02-18T14:54:06.348Z"}]'),a=JSON.parse('[{"title":"Accessibility","date":"2024-10-16T00:00:00.000Z","body":{"raw":"\\n# Accessibility\\n\\nAccessibility\\n","code":"var Component=(()=>{var h=Object.create;var i=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var j=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),u=(t,n)=>{for(var s in n)i(t,s,{get:n[s],enumerable:!0})},r=(t,n,s,a)=>{if(n&&typeof n==\\"object\\"||typeof n==\\"function\\")for(let c of p(n))!b.call(t,c)&&c!==s&&i(t,c,{get:()=>n[c],enumerable:!(a=d(n,c))||a.enumerable});return t};var _=(t,n,s)=>(s=t!=null?h(x(t)):{},r(n||!t||!t.__esModule?i(s,\\"default\\",{value:t,enumerable:!0}):s,t)),f=t=>r(i({},\\"__esModule\\",{value:!0}),t);var l=j((w,o)=>{o.exports=_jsx_runtime});var D={};u(D,{default:()=>A,frontmatter:()=>y});var e=_(l()),y={title:\\"Accessibility\\",date:new Date(17290368e5)};function m(t){let n=Object.assign({h1:\\"h1\\",a:\\"a\\",span:\\"span\\",p:\\"p\\"},t.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(n.h1,{id:\\"accessibility\\",children:[(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#accessibility\\",children:(0,e.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Accessibility\\"]}),`\\n`,(0,e.jsx)(n.p,{children:\\"Accessibility\\"})]})}function g(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,Object.assign({},t,{children:(0,e.jsx)(m,t)})):m(t)}var A=g;return f(D);})();\\n;return Component;"},"_id":"component/badge/accessibility.mdx","_raw":{"sourceFilePath":"component/badge/accessibility.mdx","sourceFileName":"accessibility.mdx","sourceFileDir":"component/badge","contentType":"mdx","flattenedPath":"component/badge/accessibility"},"type":"Component","url_path":"/component/badge/accessibility","headings":[{"level":1,"text":"Accessibility","slug":"accessibility"}],"pathSegments":[{"order":0,"pathName":"badge"},{"order":0,"pathName":"accessibility"}],"last_edited":"2025-02-18T14:54:06.349Z"},{"title":"Code","date":"2024-10-16T00:00:00.000Z","body":{"raw":"\\nA badge is a small status or notification indicator that can be used to display a message or status.\\n\\nFeatures:\\n- **Variants**: The badge supports multiple variants including information, notice, positive, warning, and negative, allowing for different contextual uses.\\n- **Slots**: The badge includes a **lead** slot for adding leading content such as icons, enhancing the visual representation.\\n- **Disabled State**: The badge can be disabled, making it non-interactive and visually indicating its disabled state.\\n- **Size Control**: The badge size can be controlled via the **size** property, with options for **default** and **small**.\\n\\n\\n ### Desktop\\n The full path may not take up more than one row in the layout.\\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 ### 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 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## 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
\\n \\n
\\n \\n
\\n \\n
\\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### 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## 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**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\\nThe checkboxes are typically grouped with a theme label above and the possible options below.\\n\\n## Anatomy\\nThe checkbox (and other form controls) are divided in sections that are re-used between components. \\n- **Header**: Label, label support, contextual help, extended support.\\n- **Body**: the actual checkboxes.\\n- **Footer**: only used for error message.\\n\\n
\\n### Label\\n\\nAll individual checkboxes have a label.
\\nWhen checkboxes are grouped, the group have a header label.\\n\\n
\\n\\nWhen checkboxes are grouped, the group have a header label.\\n\\n
\\n### Optional field indicator\\nUsed only for the header label.
\\nWe 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\\nThe text \\"(optional)\\" is set in font-weight regular, to differentiate from the label.\\n\\n
\\n\\nWe 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\\nThe text \\"(optional)\\" is set in font-weight regular, to differentiate from the label.\\n\\n
\\nContained checkboxes do not have support text for the individual checkboxes.
\\nUse this to explain how to use the field. This may be an instruction of how to \\ncount or what to include. Limit the instructions to details that all or most users need.\\n\\n
\\nIf there is large amounts of text use a modal.\\n\\n
\\nUsed when the checkbox state is partially selected, often for parent-child relationships in nested checkboxes.\\n\\nBehaviour\\n- If some children are selected, the indeterminate state is visible on the parent.\\n- If all children are selected, the selected state is visual on the parent.\\n- If a parent checkbox is selected while unselected or in the indeterminate state, all children will be selected.\\n- If the parent is deselected all children will be deselected.\\n\\n
\\n### Do\\n- Use descriptive labels to clearly indicate the purpose of each checkbox.\\n- Keep the text as short as possible.\\n
\\n\\n### Don\'t\\n- Use checkboxes for mutually exclusive options; in such cases, use radio buttons instead.\\n- Overload users with too many checkboxes on a single page or form. If you have to present a lot of options, use a multiselect dropdown.\\n- Use it to toggle things on or off, use the switch component for that.\\nMix default and contained versions.\\n
\\n\\nYes please, I want priority access to exclusive offers and news by email. \\nJa tack, jag vill ha f\xf6rtur p\xe5 exklusiva erbjudanden och nyheter via mejl. \\n
\\n\\nDo you want priority access to exclusive offers and news by email? \\nVill du ha exklusiva erbjudanden och nyheter via mejl? \\n
\\n\\nYes, please, I do not want to miss out on exclusive offers and news by email. \\nJa tack, jag vill inte missa exklusiva erbjudanden och nyheter via mejl. \\n
\\n\\n Jag har l\xe4st informationen och granskat de uppgifter jag fyllt I. Jag f\xf6rs\xe4krar att de \xe4r riktiga. \\n I have read the information and reviewed what I entered in the form. I confirm that everything is correct. \\n
\\n \\n Har du l\xe4st informationen och granskat de uppgifter du fyllt i? F\xf6rs\xe4krar du att de \xe4r riktiga? \\n Have you read the information and reviewed what was entered in the form? Can you confirm that everything is correct? \\n
\\n \\n### Do\\nWrite option texts that are consistent. \\n\\n
\\n\\n\\n### Don\'t\\nInconsistent options (English)\\n\\n
\\n\\nThis page will be updated with information soon.\\n","code":"var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var g=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),j=(e,t)=>{for(var n in t)r(e,n,{get:t[n],enumerable:!0})},c=(e,t,n,s)=>{if(t&&typeof t==\\"object\\"||typeof t==\\"function\\")for(let i of l(t))!x.call(e,i)&&i!==n&&r(e,i,{get:()=>t[i],enumerable:!(s=f(t,i))||s.enumerable});return e};var _=(e,t,n)=>(n=e!=null?p(u(e)):{},c(t||!e||!e.__esModule?r(n,\\"default\\",{value:e,enumerable:!0}):n,e)),b=e=>c(r({},\\"__esModule\\",{value:!0}),e);var d=g((v,a)=>{a.exports=_jsx_runtime});var C={};j(C,{default:()=>y,frontmatter:()=>h});var o=_(d()),h={title:\\"Accessibility\\",date:new Date(17290368e5)};function m(e){let t=Object.assign({p:\\"p\\"},e.components),{Badge:n}=t;return n||M(\\"Badge\\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n,{variant:\\"notice\\",children:\\"Coming soon\\"}),`\\n`,(0,o.jsx)(\\"br\\",{}),`\\n`,(0,o.jsx)(t.p,{children:\\"This page will be updated with information soon.\\"})]})}function w(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,Object.assign({},e,{children:(0,o.jsx)(m,e)})):m(e)}var y=w;function M(e,t){throw new Error(\\"Expected \\"+(t?\\"component\\":\\"object\\")+\\" `\\"+e+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return b(C);})();\\n;return Component;"},"_id":"component/dropdown/accessibility.mdx","_raw":{"sourceFilePath":"component/dropdown/accessibility.mdx","sourceFileName":"accessibility.mdx","sourceFileDir":"component/dropdown","contentType":"mdx","flattenedPath":"component/dropdown/accessibility"},"type":"Component","url_path":"/component/dropdown/accessibility","headings":[],"pathSegments":[{"order":0,"pathName":"dropdown"},{"order":0,"pathName":"accessibility"}],"last_edited":"2025-02-18T14:54:06.350Z"},{"title":"Code","date":"2024-10-16T00:00:00.000Z","body":{"raw":"","code":"var Component=(()=>{var x=Object.create;var a=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),l=(t,e)=>{for(var n in e)a(t,n,{get:e[n],enumerable:!0})},c=(t,e,n,s)=>{if(e&&typeof e==\\"object\\"||typeof e==\\"function\\")for(let o of f(e))!j.call(t,o)&&o!==n&&a(t,o,{get:()=>e[o],enumerable:!(s=d(e,o))||s.enumerable});return t};var p=(t,e,n)=>(n=t!=null?x(_(t)):{},c(e||!t||!t.__esModule?a(n,\\"default\\",{value:t,enumerable:!0}):n,t)),C=t=>c(a({},\\"__esModule\\",{value:!0}),t);var m=g((b,i)=>{i.exports=_jsx_runtime});var F={};l(F,{default:()=>w,frontmatter:()=>D});var r=p(m()),D={title:\\"Code\\",date:new Date(17290368e5)};function u(t){return(0,r.jsx)(r.Fragment,{})}function M(t={}){let{wrapper:e}=t.components||{};return e?(0,r.jsx)(e,Object.assign({},t,{children:(0,r.jsx)(u,t)})):u(t)}var w=M;return C(F);})();\\n;return Component;"},"_id":"component/dropdown/code.mdx","_raw":{"sourceFilePath":"component/dropdown/code.mdx","sourceFileName":"code.mdx","sourceFileDir":"component/dropdown","contentType":"mdx","flattenedPath":"component/dropdown/code"},"type":"Component","url_path":"/component/dropdown/code","headings":[],"pathSegments":[{"order":0,"pathName":"dropdown"},{"order":0,"pathName":"code"}],"last_edited":"2025-02-18T14:54:06.350Z"},{"title":"Dropdown","summary":"A dropdown enables the user to choose one or multiple options from a list.","date":"2024-10-16T00:00:00.000Z","tags":"forms","status":"BETA","body":{"raw":"\\n## Usage \\nThe dropdown component is designed for single or multiple selections but with customizable features.\\n\\n
\\n## Sizes\\nThe dropdown field comes in two sizes.\\n- **Large**: default size.\\n- **Small**: used in tables and in some special cases where the space is very limited.
(Custom layout not supported)\\n
\\n(Custom layout not supported)\\n
\\n### Label\\nAll dropdown fields need a label. Keep the label short. \\n
\\n\\n### Optional field indicator\\n(Not available for Floating label variant)\\nWe 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\\nThe text \\"(optional)\\" is set in font-weight regular, to differentiate from the label.\\n\\n
\\n\\n### Support text\\nUse this to explain how to fill the field. This may be an instruction of how to \\ncount or what to include. Limit the instructions to details that all or most users need.\\n
\\n\\n### Leading icon\\nA leading icon visually reinforces the purpose of the field, helping users to understand what type of information is needed. \\n
\\n\\n### Combo box\\nThis type of field lets the user type in the field, just as an input field. By starting to type a list of options matching the entered text is displayed. If users enter an option that doesn\'t exist in the list, it\'s also accepted as a valid option.\\n
\\n\\n### Clearable\\nTo make it easy for users to clear a field an x-icon button may be added at the end of the field. \\nOften used in search/filter forms.\\n
\\n\\n### Field error\\nWhen a field contains an error the field is highlighted in red with an error text describing the error.\\n
\\n\\nThis page will be updated with information soon.\\n","code":"var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var g=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),j=(e,t)=>{for(var n in t)r(e,n,{get:t[n],enumerable:!0})},c=(e,t,n,s)=>{if(t&&typeof t==\\"object\\"||typeof t==\\"function\\")for(let i of l(t))!x.call(e,i)&&i!==n&&r(e,i,{get:()=>t[i],enumerable:!(s=f(t,i))||s.enumerable});return e};var _=(e,t,n)=>(n=e!=null?p(u(e)):{},c(t||!e||!e.__esModule?r(n,\\"default\\",{value:e,enumerable:!0}):n,e)),b=e=>c(r({},\\"__esModule\\",{value:!0}),e);var d=g((v,a)=>{a.exports=_jsx_runtime});var C={};j(C,{default:()=>y,frontmatter:()=>h});var o=_(d()),h={title:\\"Accessibility\\",date:new Date(17032032e5)};function m(e){let t=Object.assign({p:\\"p\\"},e.components),{Badge:n}=t;return n||M(\\"Badge\\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n,{variant:\\"notice\\",children:\\"Coming soon\\"}),`\\n`,(0,o.jsx)(\\"br\\",{}),`\\n`,(0,o.jsx)(t.p,{children:\\"This page will be updated with information soon.\\"})]})}function w(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,Object.assign({},e,{children:(0,o.jsx)(m,e)})):m(e)}var y=w;function M(e,t){throw new Error(\\"Expected \\"+(t?\\"component\\":\\"object\\")+\\" `\\"+e+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return b(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":[],"pathSegments":[{"order":0,"pathName":"input"},{"order":0,"pathName":"accessibility"}],"last_edited":"2025-02-18T14:54:06.351Z"},{"title":"Code","date":"2023-12-22T00:00:00.000Z","body":{"raw":"\\n## Size\\nWhen using the small variant of the input field in most cases you should visually hide the label. Do this by padding hide-label=\\"true\\".\\n\\n","code":"var Component=(()=>{var d=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var f=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),j=(n,e)=>{for(var s in e)i(n,s,{get:e[s],enumerable:!0})},r=(n,e,s,o)=>{if(e&&typeof e==\\"object\\"||typeof e==\\"function\\")for(let a of u(e))!x.call(n,a)&&a!==s&&i(n,a,{get:()=>e[a],enumerable:!(o=m(e,a))||o.enumerable});return n};var _=(n,e,s)=>(s=n!=null?d(p(n)):{},r(e||!n||!n.__esModule?i(s,\\"default\\",{value:n,enumerable:!0}):s,n)),g=n=>r(i({},\\"__esModule\\",{value:!0}),n);var l=f((M,c)=>{c.exports=_jsx_runtime});var z={};j(z,{default:()=>D,frontmatter:()=>b});var t=_(l()),b={title:\\"Code\\",date:new Date(17032032e5)};function h(n){let e=Object.assign({h2:\\"h2\\",a:\\"a\\",span:\\"span\\",p:\\"p\\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(e.h2,{id:\\"size\\",children:[(0,t.jsx)(e.a,{className:\\"anchor\\",href:\\"#size\\",children:(0,t.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Size\\"]}),`\\n`,(0,t.jsx)(e.p,{children:\'When using the small variant of the input field in most cases you should visually hide the label. Do this by padding hide-label=\\"true\\".\'})]})}function y(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(h,n)})):h(n)}var D=y;return g(z);})();\\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":"Size","slug":"size"}],"pathSegments":[{"order":0,"pathName":"input"},{"order":0,"pathName":"code"}],"last_edited":"2025-02-18T14:54:06.351Z"},{"title":"Design","date":"2023-12-22T00:00:00.000Z","body":{"raw":"\\n## Design\\n Forms are the cornerstone in most design systems. And our form fields are no different. Rounded corners to keep relations with checkboxes, radio buttons and buttons. The contained design version moves the support text within the form. This component is made to be prominent and clear, also with multiple form fields on a page. \\n\\n### Anatomy\\nGroup label is always on top follow by optional support text. Each checkbox has a label and optional support text. \\n\\n
\\n## Sizes\\nThe input field comes in two sizes.\\n\\n- **Large**: the default size and used in most cases.\\n- **Small**: used in tables and in some special cases where the space is very limited.\\n\\n
\\n\\n### Label\\nAll input fields need a label. Keep the label short. \\n
\\n\\n### Optional field indicator\\n(Not available for Floating label variant)\\nWe 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\\nThe text \\"(optional)\\" is set in font-weight regular, to differentiate from the label.\\n
\\n\\n### Support text\\n(Not available for Floating label variant)\\nUse this to explain how to fill the field. This may be an instruction of how to \\ncount or what to include. Limit the instructions to details that all or most users need.\\n
\\n\\n### Clearable\\nTo make it easy for users to clear a field an x-icon button may be added at the end of the field. \\nOften used in search/filter forms.\\n
\\n\\n### Badge\\nUse it to show what the unit input value is.\\n\\nFor example: kr\\n
\\n\\n### Field error\\nWhen a field contains an error the field is highlighted in red with an error text describing the error.\\n
\\n\\n### Character counter\\nFor fields that have a limit of characters allowed, a counter may be added to guide users how many characters are left to use. Indicator starts with the maximum characters allowed. \\n\\nAs the user starts typing the numbers decrease. \\n\\nWhen a limit is almost reached the indicator turns yellow. \\n\\nIf users write too many characters the counter becomes red. \\n\\nIf a user ignores this and tries to submit an error will be indicated on the field stating that the max has been reached.\\n
\\n\\n### Dynamic information\\n(Not available for Floating label variant)\\nUsed to perform comparative calculations next to the field.\\n
\\n\\n### Static data\\nUsed to display static data in a form or compilation.\\nCan be used instead of disabling fields (which is bad for accessibility).\\n\\nThis is a separate component in Figma used to replace an input field.\\n
\\n\\n### Placeholder\\nAVOID using placeholder text (also know as watermark). They tend to confuse users, thinking the field is already filled with data. Instructions should not be placed here, since they disappear as the field is filled with data. Use the support text instead to describe what\'s supposed to be entered.\\n\\n
\\n\\n\\n## Input field default \\n\\nOur default input field has the label outside the field. This input field includes all the features we need in complex forms, and therefore it’s the most common.\\n\\n
\\n\\n\\n### Label support text\\n\\nUse the label support text to explain the label more in detail. Use only if the label isn’t clear enough. Explain what the customer needs to know to fill in the field or understand the data displayed. Be brief.\\n\\n
\\n\\n\\n### Placeholder text\\n\\nDon’t use placeholder text. Since the placeholder text lies within the input field and disappears when the user starts entering text, it’s not very accessible. If the user needs information about how to fill in the field, use the label support text instead. \\n\\n
\\n\\n\\n#### No need to show kronor\\n\\nIf the customer can’t enter different currencies – we don’t show the currency in the field. \\n\\nThe currency is not necessary to be included in the label either. We specify if another currency is asked for instead.\\n\\n
\\n\\n\\n#### If you do write kr\\n\\nIf you, for some reason, still want to show kronor in the field and abbreviate it to kr, remember that it will be read out by a screen reader just as you write it. Make sure that your text kr is read out as ”kronor”.\\n\\n
\\n\\n\\n**Do**\\n- Use single words, complete sentences or the query format for the label. \\n- If needed, use the label support text to explain the field. \\n- The texts should be brief, clear, and informative. \\n
\\n\\n**Don\'t**\\n- Do not use verbs in the label. \\n- Do not use placeholder text. \\n- Do not use too many characters. \\n
\\n\\n**Do**\\n- Mobile number\\n
\\n\\n**Don\'t**\\n- How much do you want to save each month?\\n
\\n\\n**Remember – Don’t mix the two variants in the same context!**\\n
\\n","code":"var Component=(()=>{var u=Object.create;var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var x=(i,n)=>()=>(n||i((n={exports:{}}).exports,n),n.exports),w=(i,n)=>{for(var l in n)o(i,l,{get:n[l],enumerable:!0})},d=(i,n,l,t)=>{if(n&&typeof n==\\"object\\"||typeof n==\\"function\\")for(let r of f(n))!g.call(i,r)&&r!==l&&o(i,r,{get:()=>n[r],enumerable:!(t=m(n,r))||t.enumerable});return i};var y=(i,n,l)=>(l=i!=null?u(b(i)):{},d(n||!i||!i.__esModule?o(l,\\"default\\",{value:i,enumerable:!0}):l,i)),k=i=>d(o({},\\"__esModule\\",{value:!0}),i);var h=x((j,c)=>{c.exports=_jsx_runtime});var I={};w(I,{default:()=>D,frontmatter:()=>v});var e=y(h()),v={title:\\"UX text\\",date:new Date(17032032e5)};function p(i){let n=Object.assign({h2:\\"h2\\",a:\\"a\\",span:\\"span\\",p:\\"p\\",h3:\\"h3\\",h4:\\"h4\\",strong:\\"strong\\",ul:\\"ul\\",li:\\"li\\"},i.components),{Grid:l,Figma:t,GdsDivider:r,Inline:s}=n;return t||a(\\"Figma\\",!0),r||a(\\"GdsDivider\\",!0),l||a(\\"Grid\\",!0),s||a(\\"Inline\\",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(l,{columns:\\"2\\",children:(0,e.jsxs)(\\"div\\",{children:[(0,e.jsxs)(n.h2,{id:\\"input-field-default\\",children:[(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#input-field-default\\",children:(0,e.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Input field default\\"]}),(0,e.jsx)(n.p,{children:\\"Our default input field has the label outside the field. This input field includes all the features we need in complex forms, and therefore it\\\\u2019s the most common.\\"})]})}),`\\n`,(0,e.jsxs)(n.h3,{id:\\"labels\\",children:[(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#labels\\",children:(0,e.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Labels\\"]}),`\\n`,(0,e.jsx)(n.p,{children:\\"The same text principles can be used for labels, radio button texts, choices in drop-down menus, headings, page titles, navigation texts, link texts, and other short texts.\\"}),`\\n`,(0,e.jsxs)(n.h4,{id:\\"single-word-or-complete-sentence\\",children:[(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#single-word-or-complete-sentence\\",children:(0,e.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Single-word or complete sentence\\"]}),`\\n`,(0,e.jsx)(n.p,{children:\\"The texts should be as short as possible. Labels can contain single-words, complete sentences or query format.\\"}),`\\n`,(0,e.jsxs)(l,{columns:\\"2\\",gap:\\"s\\",children:[(0,e.jsx)(t,{id:\\"single-or-complete-1\\",caption:\\"Single-word example (Eng)\\"}),(0,e.jsx)(t,{id:\\"single-or-complete-2\\",caption:\\"Single-word example (Swe)\\"}),(0,e.jsx)(t,{id:\\"single-or-complete-3\\",caption:\\"Complete sentence example (Eng)\\"}),(0,e.jsx)(t,{id:\\"single-or-complete-4\\",caption:\\"Complete sentence example (Swe)\\"}),(0,e.jsx)(t,{id:\\"query-format-1\\",caption:\\"Query format example (Eng)\\"}),(0,e.jsx)(t,{id:\\"query-format-2\\",caption:\\"Query format example (Swe)\\"})]}),`\\n`,(0,e.jsxs)(n.h4,{id:\\"skip-the-verb-in-the-label\\",children:[(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#skip-the-verb-in-the-label\\",children:(0,e.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Skip the verb in the label\\"]}),`\\n`,(0,e.jsx)(n.p,{children:\\"You don\\\\u2019t need to use verbs such as Enter, Fill in, Write, or Choose in the label. For instance it\\\\u2019s shorter and easier to read Recipient\\\\u2019s name instead of Fill in the recipient\\\\u2019s name.\\"}),`\\n`,(0,e.jsxs)(l,{columns:\\"2\\",gap:\\"s\\",children:[(0,e.jsxs)(\\"div\\",{children:[(0,e.jsxs)(n.h3,{id:\\"label-support-text\\",children:[(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#label-support-text\\",children:(0,e.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Label support text\\"]}),(0,e.jsx)(n.p,{children:\\"Use the label support text to explain the label more in detail. Use only if the label isn\\\\u2019t clear enough. Explain what the customer needs to know to fill in the field or understand the data displayed. Be brief.\\"})]}),(0,e.jsx)(t,{id:\\"label-support-text\\",caption:\\"The label support text.\\"})]}),`\\n`,(0,e.jsxs)(l,{columns:\\"2\\",gap:\\"s\\",children:[(0,e.jsxs)(\\"div\\",{children:[(0,e.jsxs)(n.h3,{id:\\"placeholder-text\\",children:[(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#placeholder-text\\",children:(0,e.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Placeholder text\\"]}),(0,e.jsx)(n.p,{children:\\"Don\\\\u2019t use placeholder text. Since the placeholder text lies within the input field and disappears when the user starts entering text, it\\\\u2019s not very accessible. If the user needs information about how to fill in the field, use the label support text instead.\\"})]}),(0,e.jsx)(t,{type:\\"do\\",id:\\"periods-1\\"})]}),`\\n`,(0,e.jsxs)(n.h3,{id:\\"amounts-and-periods\\",children:[(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#amounts-and-periods\\",children:(0,e.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Amounts and periods\\"]}),`\\n`,(0,e.jsx)(n.p,{children:\\"It\\\\u2019s easier to read text in the label or label support text than text within the field.\\"}),`\\n`,(0,e.jsxs)(l,{columns:\\"2\\",gap:\\"s\\",children:[(0,e.jsxs)(\\"div\\",{children:[(0,e.jsxs)(n.h4,{id:\\"no-need-to-show-kronor\\",children:[(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#no-need-to-show-kronor\\",children:(0,e.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"No need to show kronor\\"]}),(0,e.jsx)(n.p,{children:\\"If the customer can\\\\u2019t enter different currencies \\\\u2013 we don\\\\u2019t show the currency in the field.\\"}),(0,e.jsx)(n.p,{children:\\"The currency is not necessary to be included in the label either. We specify if another currency is asked for instead.\\"})]}),(0,e.jsx)(t,{type:\\"do\\",id:\\"periods-1\\"}),(0,e.jsxs)(\\"div\\",{children:[(0,e.jsxs)(n.h4,{id:\\"if-you-do-write-kr\\",children:[(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#if-you-do-write-kr\\",children:(0,e.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"If you do write kr\\"]}),(0,e.jsx)(n.p,{children:\\"If you, for some reason, still want to show kronor in the field and abbreviate it to kr, remember that it will be read out by a screen reader just as you write it. Make sure that your text kr is read out as \\\\u201Dkronor\\\\u201D.\\"})]}),(0,e.jsx)(t,{type:\\"do\\",id:\\"periods-2\\"})]}),`\\n`,(0,e.jsxs)(n.h4,{id:\\"dont-write-periods-in-the-field\\",children:[(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#dont-write-periods-in-the-field\\",children:(0,e.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Don\\\\u2019t write periods in the field\\"]}),`\\n`,(0,e.jsx)(n.p,{children:\\"Don\'t write periods such as months or years in the field. Instead, write month or year in the label. This is more accessible.\\"}),`\\n`,(0,e.jsxs)(l,{columns:\\"2\\",gap:\\"s\\",children:[(0,e.jsx)(t,{type:\\"do\\",id:\\"floating-1\\"}),(0,e.jsx)(t,{type:\\"dont\\",id:\\"floating-2\\"})]}),`\\n`,(0,e.jsxs)(n.h3,{id:\\"labels-dos-and-donts\\",children:[(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#labels-dos-and-donts\\",children:(0,e.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Labels do\\\\u2019s and dont\\\\u2019s\\"]}),`\\n`,(0,e.jsxs)(l,{columns:\\"2\\",gap:\\"s\\",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 single words, complete sentences or the query format for the label.\\"}),`\\n`,(0,e.jsx)(n.li,{children:\\"If needed, use the label support text to explain the field.\\"}),`\\n`,(0,e.jsx)(n.li,{children:\\"The texts should be brief, clear, and informative.\\"}),`\\n`]})]}),(0,e.jsxs)(\\"div\\",{children:[(0,e.jsx)(n.p,{children:(0,e.jsx)(n.strong,{children:\\"Don\'t\\"})}),(0,e.jsxs)(n.ul,{children:[`\\n`,(0,e.jsx)(n.li,{children:\\"Do not use verbs in the label.\\"}),`\\n`,(0,e.jsx)(n.li,{children:\\"Do not use placeholder text.\\"}),`\\n`,(0,e.jsx)(n.li,{children:\\"Do not use too many characters.\\"}),`\\n`]})]})]}),`\\n`,(0,e.jsxs)(n.h3,{id:\\"error-handling\\",children:[(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#error-handling\\",children:(0,e.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Error handling\\"]}),`\\n`,(0,e.jsx)(n.p,{children:\\"There is not much space adjacent to the input field. Therefore, provide a constructive suggestion on how to solve the problem instead of telling what the customer has done wrong.\\"}),`\\n`,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(\\"u\\",{children:\\"More about validation errors\\"}),\\" (in the future)\\"]}),`\\n`,(0,e.jsx)(r,{size:\\"4xl\\",opacity:\\"0.2\\"}),`\\n`,(0,e.jsxs)(n.h2,{id:\\"input-field-contained\\",children:[(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#input-field-contained\\",children:(0,e.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Input field contained\\"]}),`\\n`,(0,e.jsxs)(n.p,{children:[\\"This variant of the input field, with the label inside the field and label support text below, should only be used when the label is a single word or kept in one line, such as \\",(0,e.jsx)(s,{children:\\"Email address\\"}),\\" or \\",(0,e.jsx)(s,{children:\\"Personal identity number\\"}),\\".\\"]}),`\\n`,(0,e.jsx)(n.p,{children:\\"If an error occurs, the label support text will be replaced with the error message. Therefore, it\\\\u2019s important that the error message includes the label text and the information in the label support text.\\"}),`\\n`,(0,e.jsxs)(l,{columns:\\"2\\",gap:\\"s\\",children:[(0,e.jsx)(t,{height:\\"260\\",id:\\"floating-1\\",caption:\\"Input field contained, enabled and filled.\\"}),(0,e.jsx)(t,{height:\\"260\\",id:\\"floating-2\\",caption:\\"Input field contained, enabled and filled in error state.\\"})]}),`\\n`,(0,e.jsxs)(n.h3,{id:\\"dos-and-donts-input-field-contained\\",children:[(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#dos-and-donts-input-field-contained\\",children:(0,e.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Do\\\\u2019s and dont\\\\u2019s input field contained\\"]}),`\\n`,(0,e.jsxs)(l,{columns:\\"2\\",gap:\\"s\\",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:\\"Mobile number\\"}),`\\n`]})]}),(0,e.jsxs)(\\"div\\",{children:[(0,e.jsx)(n.p,{children:(0,e.jsx)(n.strong,{children:\\"Don\'t\\"})}),(0,e.jsxs)(n.ul,{children:[`\\n`,(0,e.jsx)(n.li,{children:\\"How much do you want to save each month?\\"}),`\\n`]})]}),(0,e.jsx)(t,{type:\\"do\\",id:\\"floating-do\\"}),(0,e.jsx)(t,{type:\\"dont\\",id:\\"floating-dont\\"})]}),`\\n`,(0,e.jsxs)(n.h2,{id:\\"default-or-contained\\",children:[(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#default-or-contained\\",children:(0,e.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Default or contained?\\"]}),`\\n`,(0,e.jsx)(n.p,{children:\\"Since our forms mostly contain inputs with labels that need to be a sentence rather than only a single word, most contexts should use the regular input field. The label also often needs supporting text and this is much more user friendly in the default variant.\\"}),`\\n`,(0,e.jsx)(n.p,{children:\\"Before you choose think about this:\\"}),`\\n`,(0,e.jsxs)(n.ul,{children:[`\\n`,(0,e.jsx)(n.li,{children:\\"Will there be any fields with longer labels?\\"}),`\\n`,(0,e.jsx)(n.li,{children:\\"Will my labels need the supporting text in some cases?\\"}),`\\n`]}),`\\n`,(0,e.jsx)(n.p,{children:\\"or\\"}),`\\n`,(0,e.jsxs)(n.ul,{children:[`\\n`,(0,e.jsx)(n.li,{children:\\"Is my form only a short one with simple single word label inputs?\\"}),`\\n`,(0,e.jsx)(n.li,{children:\\"Do the labels talk for themselves and don\\\\u2019t need the supporting text? If an error occurs, the label support text will be replaced with the error text.\\"}),`\\n`]}),`\\n`,(0,e.jsx)(\\"div\\",{children:(0,e.jsx)(n.p,{children:(0,e.jsx)(n.strong,{children:\\"Remember \\\\u2013 Don\\\\u2019t mix the two variants in the same context!\\"})})})]})}function N(i={}){let{wrapper:n}=i.components||{};return n?(0,e.jsx)(n,Object.assign({},i,{children:(0,e.jsx)(p,i)})):p(i)}var D=N;function a(i,n){throw new Error(\\"Expected \\"+(n?\\"component\\":\\"object\\")+\\" `\\"+i+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return k(I);})();\\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":"Input field default ","slug":"input-field-default-"},{"level":3,"text":"Labels","slug":"labels"},{"level":4,"text":"Single-word or complete sentence","slug":"single-word-or-complete-sentence"},{"level":4,"text":"Skip the verb in the label","slug":"skip-the-verb-in-the-label"},{"level":3,"text":"Label support text","slug":"label-support-text"},{"level":3,"text":"Placeholder text","slug":"placeholder-text"},{"level":3,"text":"Amounts and periods","slug":"amounts-and-periods"},{"level":4,"text":"No need to show kronor","slug":"no-need-to-show-kronor"},{"level":4,"text":"If you do write kr","slug":"if-you-do-write-kr"},{"level":4,"text":"Don’t write periods in the field","slug":"dont-write-periods-in-the-field"},{"level":3,"text":"Labels do’s and dont’s","slug":"labels-dos-and-donts"},{"level":3,"text":"Error handling","slug":"error-handling"},{"level":2,"text":"Input field contained","slug":"input-field-contained"},{"level":3,"text":"Do’s and dont’s input field contained","slug":"dos-and-donts-input-field-contained"},{"level":2,"text":"Default or contained?","slug":"default-or-contained"}],"pathSegments":[{"order":0,"pathName":"input"},{"order":0,"pathName":"ux-text"}],"last_edited":"2025-02-18T14:54:06.352Z"},{"title":"Accessibility","date":"2024-10-16T00:00:00.000Z","body":{"raw":"\\n# Accessibility\\n\\nAccessibility","code":"var Component=(()=>{var h=Object.create;var i=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var j=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),u=(t,n)=>{for(var s in n)i(t,s,{get:n[s],enumerable:!0})},r=(t,n,s,a)=>{if(n&&typeof n==\\"object\\"||typeof n==\\"function\\")for(let c of p(n))!b.call(t,c)&&c!==s&&i(t,c,{get:()=>n[c],enumerable:!(a=d(n,c))||a.enumerable});return t};var _=(t,n,s)=>(s=t!=null?h(x(t)):{},r(n||!t||!t.__esModule?i(s,\\"default\\",{value:t,enumerable:!0}):s,t)),f=t=>r(i({},\\"__esModule\\",{value:!0}),t);var l=j((w,o)=>{o.exports=_jsx_runtime});var D={};u(D,{default:()=>A,frontmatter:()=>y});var e=_(l()),y={title:\\"Accessibility\\",date:new Date(17290368e5)};function m(t){let n=Object.assign({h1:\\"h1\\",a:\\"a\\",span:\\"span\\",p:\\"p\\"},t.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(n.h1,{id:\\"accessibility\\",children:[(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#accessibility\\",children:(0,e.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Accessibility\\"]}),`\\n`,(0,e.jsx)(n.p,{children:\\"Accessibility\\"})]})}function g(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,Object.assign({},t,{children:(0,e.jsx)(m,t)})):m(t)}var A=g;return f(D);})();\\n;return Component;"},"_id":"component/link/accessibility.mdx","_raw":{"sourceFilePath":"component/link/accessibility.mdx","sourceFileName":"accessibility.mdx","sourceFileDir":"component/link","contentType":"mdx","flattenedPath":"component/link/accessibility"},"type":"Component","url_path":"/component/link/accessibility","headings":[{"level":1,"text":"Accessibility","slug":"accessibility"}],"pathSegments":[{"order":0,"pathName":"link"},{"order":0,"pathName":"accessibility"}],"last_edited":"2025-02-18T14:54:06.352Z"},{"title":"Code","date":"2024-10-16T00:00:00.000Z","body":{"raw":"\\nLink Code content","code":"var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var _=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),l=(t,n)=>{for(var e in n)c(t,e,{get:n[e],enumerable:!0})},a=(t,n,e,s)=>{if(n&&typeof n==\\"object\\"||typeof n==\\"function\\")for(let o of p(n))!j.call(t,o)&&o!==e&&c(t,o,{get:()=>n[o],enumerable:!(s=x(n,o))||s.enumerable});return t};var C=(t,n,e)=>(e=t!=null?u(f(t)):{},a(n||!t||!t.__esModule?c(e,\\"default\\",{value:t,enumerable:!0}):e,t)),D=t=>a(c({},\\"__esModule\\",{value:!0}),t);var d=_((L,i)=>{i.exports=_jsx_runtime});var h={};l(h,{default:()=>g,frontmatter:()=>M});var r=C(d()),M={title:\\"Code\\",date:new Date(17290368e5)};function m(t){let n=Object.assign({p:\\"p\\"},t.components);return(0,r.jsx)(n.p,{children:\\"Link Code content\\"})}function b(t={}){let{wrapper:n}=t.components||{};return n?(0,r.jsx)(n,Object.assign({},t,{children:(0,r.jsx)(m,t)})):m(t)}var g=b;return D(h);})();\\n;return Component;"},"_id":"component/link/code.mdx","_raw":{"sourceFilePath":"component/link/code.mdx","sourceFileName":"code.mdx","sourceFileDir":"component/link","contentType":"mdx","flattenedPath":"component/link/code"},"type":"Component","url_path":"/component/link/code","headings":[],"pathSegments":[{"order":0,"pathName":"link"},{"order":0,"pathName":"code"}],"last_edited":"2025-02-18T14:54:06.352Z"},{"title":"Design","date":"2024-03-21T00:00:00.000Z","body":{"raw":" \\nComing soon...","code":"var Component=(()=>{var x=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var _=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),g=(t,n)=>{for(var e in n)r(t,e,{get:n[e],enumerable:!0})},i=(t,n,e,c)=>{if(n&&typeof n==\\"object\\"||typeof n==\\"function\\")for(let o of d(n))!j.call(t,o)&&o!==e&&r(t,o,{get:()=>n[o],enumerable:!(c=p(n,o))||c.enumerable});return t};var l=(t,n,e)=>(e=t!=null?x(f(t)):{},i(n||!t||!t.__esModule?r(e,\\"default\\",{value:t,enumerable:!0}):e,t)),D=t=>i(r({},\\"__esModule\\",{value:!0}),t);var m=_((O,a)=>{a.exports=_jsx_runtime});var h={};g(h,{default:()=>b,frontmatter:()=>C});var s=l(m()),C={title:\\"Design\\",date:new Date(17109792e5)};function u(t){let n=Object.assign({p:\\"p\\"},t.components);return(0,s.jsx)(n.p,{children:\\"Coming soon...\\"})}function M(t={}){let{wrapper:n}=t.components||{};return n?(0,s.jsx)(n,Object.assign({},t,{children:(0,s.jsx)(u,t)})):u(t)}var b=M;return D(h);})();\\n;return Component;"},"_id":"component/link/design.mdx","_raw":{"sourceFilePath":"component/link/design.mdx","sourceFileName":"design.mdx","sourceFileDir":"component/link","contentType":"mdx","flattenedPath":"component/link/design"},"type":"Component","url_path":"/component/link/design","headings":[],"pathSegments":[{"order":0,"pathName":"link"},{"order":0,"pathName":"design"}],"last_edited":"2025-02-18T14:54:06.352Z"},{"title":"Link","summary":"Link Summary","date":"2024-11-01T00:00:00.000Z","status":"BETA","private":true,"body":{"raw":"\\n# Link\\n\\nLink","code":"var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var d=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var j=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),k=(t,n)=>{for(var a in n)r(t,a,{get:n[a],enumerable:!0})},c=(t,n,a,i)=>{if(n&&typeof n==\\"object\\"||typeof n==\\"function\\")for(let s of p(n))!x.call(t,s)&&s!==a&&r(t,s,{get:()=>n[s],enumerable:!(i=h(n,s))||i.enumerable});return t};var _=(t,n,a)=>(a=t!=null?u(d(t)):{},c(n||!t||!t.__esModule?r(a,\\"default\\",{value:t,enumerable:!0}):a,t)),f=t=>c(r({},\\"__esModule\\",{value:!0}),t);var m=j((b,o)=>{o.exports=_jsx_runtime});var D={};k(D,{default:()=>y,frontmatter:()=>L});var e=_(m()),L={title:\\"Link\\",summary:\\"Link Summary\\",date:new Date(17304192e5),status:\\"BETA\\",private:!0};function l(t){let n=Object.assign({h1:\\"h1\\",a:\\"a\\",span:\\"span\\",p:\\"p\\"},t.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(n.h1,{id:\\"link\\",children:[(0,e.jsx)(n.a,{className:\\"anchor\\",href:\\"#link\\",children:(0,e.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Link\\"]}),`\\n`,(0,e.jsx)(n.p,{children:\\"Link\\"})]})}function g(t={}){let{wrapper:n}=t.components||{};return n?(0,e.jsx)(n,Object.assign({},t,{children:(0,e.jsx)(l,t)})):l(t)}var y=g;return f(D);})();\\n;return Component;"},"_id":"component/link/index.mdx","_raw":{"sourceFilePath":"component/link/index.mdx","sourceFileName":"index.mdx","sourceFileDir":"component/link","contentType":"mdx","flattenedPath":"component/link"},"type":"Component","url_path":"/component/link","headings":[{"level":1,"text":"Link","slug":"link"}],"pathSegments":[{"order":0,"pathName":"link"}],"last_edited":"2025-02-18T14:54:06.352Z"},{"title":"UX text","date":"2024-10-16T00:00:00.000Z","body":{"raw":"\\n# UX text\\n\\nUX Text","code":"var Component=(()=>{var h=Object.create;var c=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var j=(n,t)=>()=>(t||n((t={exports:{}}).exports,t),t.exports),_=(n,t)=>{for(var a in t)c(n,a,{get:t[a],enumerable:!0})},o=(n,t,a,r)=>{if(t&&typeof t==\\"object\\"||typeof t==\\"function\\")for(let s of d(t))!u.call(n,s)&&s!==a&&c(n,s,{get:()=>t[s],enumerable:!(r=l(t,s))||r.enumerable});return n};var f=(n,t,a)=>(a=n!=null?h(p(n)):{},o(t||!n||!n.__esModule?c(a,\\"default\\",{value:n,enumerable:!0}):a,n)),X=n=>o(c({},\\"__esModule\\",{value:!0}),n);var x=j((w,i)=>{i.exports=_jsx_runtime});var U={};_(U,{default:()=>M,frontmatter:()=>g});var e=f(x()),g={title:\\"UX text\\",date:new Date(17290368e5)};function m(n){let t=Object.assign({h1:\\"h1\\",a:\\"a\\",span:\\"span\\",p:\\"p\\"},n.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(t.h1,{id:\\"ux-text\\",children:[(0,e.jsx)(t.a,{className:\\"anchor\\",href:\\"#ux-text\\",children:(0,e.jsx)(t.span,{className:\\"icon icon-link\\"})}),\\"UX text\\"]}),`\\n`,(0,e.jsx)(t.p,{children:\\"UX Text\\"})]})}function D(n={}){let{wrapper:t}=n.components||{};return t?(0,e.jsx)(t,Object.assign({},n,{children:(0,e.jsx)(m,n)})):m(n)}var M=D;return X(U);})();\\n;return Component;"},"_id":"component/link/ux-text.mdx","_raw":{"sourceFilePath":"component/link/ux-text.mdx","sourceFileName":"ux-text.mdx","sourceFileDir":"component/link","contentType":"mdx","flattenedPath":"component/link/ux-text"},"type":"Component","url_path":"/component/link/ux-text","headings":[{"level":1,"text":"UX text","slug":"ux-text"}],"pathSegments":[{"order":0,"pathName":"link"},{"order":0,"pathName":"ux-text"}],"last_edited":"2025-02-18T14:54:06.352Z"},{"title":"Accessibility","date":"2024-10-16T00:00:00.000Z","body":{"raw":"","code":"var Component=(()=>{var x=Object.create;var a=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var d=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var l=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var n in e)a(t,n,{get:e[n],enumerable:!0})},c=(t,e,n,s)=>{if(e&&typeof e==\\"object\\"||typeof e==\\"function\\")for(let o of _(e))!j.call(t,o)&&o!==n&&a(t,o,{get:()=>e[o],enumerable:!(s=f(e,o))||s.enumerable});return t};var p=(t,e,n)=>(n=t!=null?x(d(t)):{},c(e||!t||!t.__esModule?a(n,\\"default\\",{value:t,enumerable:!0}):n,t)),D=t=>c(a({},\\"__esModule\\",{value:!0}),t);var m=l((F,i)=>{i.exports=_jsx_runtime});var y={};g(y,{default:()=>w,frontmatter:()=>M});var r=p(m()),M={title:\\"Accessibility\\",date:new Date(17290368e5)};function u(t){return(0,r.jsx)(r.Fragment,{})}function b(t={}){let{wrapper:e}=t.components||{};return e?(0,r.jsx)(e,Object.assign({},t,{children:(0,r.jsx)(u,t)})):u(t)}var w=b;return D(y);})();\\n;return Component;"},"_id":"component/mask/accessibility.mdx","_raw":{"sourceFilePath":"component/mask/accessibility.mdx","sourceFileName":"accessibility.mdx","sourceFileDir":"component/mask","contentType":"mdx","flattenedPath":"component/mask/accessibility"},"type":"Component","url_path":"/component/mask/accessibility","headings":[],"pathSegments":[{"order":0,"pathName":"mask"},{"order":0,"pathName":"accessibility"}],"last_edited":"2025-02-18T14:54:06.352Z"},{"title":"Code","date":"2024-10-16T00:00:00.000Z","body":{"raw":"","code":"var Component=(()=>{var x=Object.create;var a=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),l=(t,e)=>{for(var n in e)a(t,n,{get:e[n],enumerable:!0})},c=(t,e,n,s)=>{if(e&&typeof e==\\"object\\"||typeof e==\\"function\\")for(let o of f(e))!j.call(t,o)&&o!==n&&a(t,o,{get:()=>e[o],enumerable:!(s=d(e,o))||s.enumerable});return t};var p=(t,e,n)=>(n=t!=null?x(_(t)):{},c(e||!t||!t.__esModule?a(n,\\"default\\",{value:t,enumerable:!0}):n,t)),C=t=>c(a({},\\"__esModule\\",{value:!0}),t);var m=g((b,i)=>{i.exports=_jsx_runtime});var F={};l(F,{default:()=>w,frontmatter:()=>D});var r=p(m()),D={title:\\"Code\\",date:new Date(17290368e5)};function u(t){return(0,r.jsx)(r.Fragment,{})}function M(t={}){let{wrapper:e}=t.components||{};return e?(0,r.jsx)(e,Object.assign({},t,{children:(0,r.jsx)(u,t)})):u(t)}var w=M;return C(F);})();\\n;return Component;"},"_id":"component/mask/code.mdx","_raw":{"sourceFilePath":"component/mask/code.mdx","sourceFileName":"code.mdx","sourceFileDir":"component/mask","contentType":"mdx","flattenedPath":"component/mask/code"},"type":"Component","url_path":"/component/mask/code","headings":[],"pathSegments":[{"order":0,"pathName":"mask"},{"order":0,"pathName":"code"}],"last_edited":"2025-02-18T14:54:06.352Z"},{"title":"Mask","summary":"Mask Summary","date":"2024-10-16T00:00:00.000Z","status":"BETA","body":{"raw":"","code":"var Component=(()=>{var x=Object.create;var s=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,d=Object.prototype.hasOwnProperty;var j=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var n in e)s(t,n,{get:e[n],enumerable:!0})},m=(t,e,n,o)=>{if(e&&typeof e==\\"object\\"||typeof e==\\"function\\")for(let a of M(e))!d.call(t,a)&&a!==n&&s(t,a,{get:()=>e[a],enumerable:!(o=f(e,a))||o.enumerable});return t};var l=(t,e,n)=>(n=t!=null?x(_(t)):{},m(e||!t||!t.__esModule?s(n,\\"default\\",{value:t,enumerable:!0}):n,t)),p=t=>m(s({},\\"__esModule\\",{value:!0}),t);var c=j((F,u)=>{u.exports=_jsx_runtime});var w={};g(w,{default:()=>k,frontmatter:()=>y});var r=l(c()),y={title:\\"Mask\\",summary:\\"Mask Summary\\",date:new Date(17290368e5),status:\\"BETA\\"};function i(t){return(0,r.jsx)(r.Fragment,{})}function D(t={}){let{wrapper:e}=t.components||{};return e?(0,r.jsx)(e,Object.assign({},t,{children:(0,r.jsx)(i,t)})):i(t)}var k=D;return p(w);})();\\n;return Component;"},"_id":"component/mask/index.mdx","_raw":{"sourceFilePath":"component/mask/index.mdx","sourceFileName":"index.mdx","sourceFileDir":"component/mask","contentType":"mdx","flattenedPath":"component/mask"},"type":"Component","url_path":"/component/mask","headings":[],"pathSegments":[{"order":0,"pathName":"mask"}],"last_edited":"2025-02-18T14:54:06.352Z"},{"title":"UX text","date":"2024-10-16T00:00:00.000Z","body":{"raw":"","code":"var Component=(()=>{var u=Object.create;var a=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var d=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),l=(t,e)=>{for(var n in e)a(t,n,{get:e[n],enumerable:!0})},c=(t,e,n,s)=>{if(e&&typeof e==\\"object\\"||typeof e==\\"function\\")for(let o of _(e))!j.call(t,o)&&o!==n&&a(t,o,{get:()=>e[o],enumerable:!(s=f(e,o))||s.enumerable});return t};var p=(t,e,n)=>(n=t!=null?u(d(t)):{},c(e||!t||!t.__esModule?a(n,\\"default\\",{value:t,enumerable:!0}):n,t)),D=t=>c(a({},\\"__esModule\\",{value:!0}),t);var i=g((b,x)=>{x.exports=_jsx_runtime});var C={};l(C,{default:()=>w,frontmatter:()=>M});var r=p(i()),M={title:\\"UX text\\",date:new Date(17290368e5)};function m(t){return(0,r.jsx)(r.Fragment,{})}function X(t={}){let{wrapper:e}=t.components||{};return e?(0,r.jsx)(e,Object.assign({},t,{children:(0,r.jsx)(m,t)})):m(t)}var w=X;return D(C);})();\\n;return Component;"},"_id":"component/mask/ux-text.mdx","_raw":{"sourceFilePath":"component/mask/ux-text.mdx","sourceFileName":"ux-text.mdx","sourceFileDir":"component/mask","contentType":"mdx","flattenedPath":"component/mask/ux-text"},"type":"Component","url_path":"/component/mask/ux-text","headings":[],"pathSegments":[{"order":0,"pathName":"mask"},{"order":0,"pathName":"ux-text"}],"last_edited":"2025-02-18T14:54:06.352Z"},{"title":"Accessibility","date":"2024-10-16T00:00:00.000Z","body":{"raw":"","code":"var Component=(()=>{var x=Object.create;var a=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var d=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var l=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var n in e)a(t,n,{get:e[n],enumerable:!0})},c=(t,e,n,s)=>{if(e&&typeof e==\\"object\\"||typeof e==\\"function\\")for(let o of _(e))!j.call(t,o)&&o!==n&&a(t,o,{get:()=>e[o],enumerable:!(s=f(e,o))||s.enumerable});return t};var p=(t,e,n)=>(n=t!=null?x(d(t)):{},c(e||!t||!t.__esModule?a(n,\\"default\\",{value:t,enumerable:!0}):n,t)),D=t=>c(a({},\\"__esModule\\",{value:!0}),t);var m=l((F,i)=>{i.exports=_jsx_runtime});var y={};g(y,{default:()=>w,frontmatter:()=>M});var r=p(m()),M={title:\\"Accessibility\\",date:new Date(17290368e5)};function u(t){return(0,r.jsx)(r.Fragment,{})}function b(t={}){let{wrapper:e}=t.components||{};return e?(0,r.jsx)(e,Object.assign({},t,{children:(0,r.jsx)(u,t)})):u(t)}var w=b;return D(y);})();\\n;return Component;"},"_id":"component/menu-button/accessibility.mdx","_raw":{"sourceFilePath":"component/menu-button/accessibility.mdx","sourceFileName":"accessibility.mdx","sourceFileDir":"component/menu-button","contentType":"mdx","flattenedPath":"component/menu-button/accessibility"},"type":"Component","url_path":"/component/menu-button/accessibility","headings":[],"pathSegments":[{"order":0,"pathName":"menu-button"},{"order":0,"pathName":"accessibility"}],"last_edited":"2025-02-18T14:54:06.352Z"},{"title":"Code","date":"2024-10-16T00:00:00.000Z","body":{"raw":"","code":"var Component=(()=>{var x=Object.create;var a=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),l=(t,e)=>{for(var n in e)a(t,n,{get:e[n],enumerable:!0})},c=(t,e,n,s)=>{if(e&&typeof e==\\"object\\"||typeof e==\\"function\\")for(let o of f(e))!j.call(t,o)&&o!==n&&a(t,o,{get:()=>e[o],enumerable:!(s=d(e,o))||s.enumerable});return t};var p=(t,e,n)=>(n=t!=null?x(_(t)):{},c(e||!t||!t.__esModule?a(n,\\"default\\",{value:t,enumerable:!0}):n,t)),C=t=>c(a({},\\"__esModule\\",{value:!0}),t);var m=g((b,i)=>{i.exports=_jsx_runtime});var F={};l(F,{default:()=>w,frontmatter:()=>D});var r=p(m()),D={title:\\"Code\\",date:new Date(17290368e5)};function u(t){return(0,r.jsx)(r.Fragment,{})}function M(t={}){let{wrapper:e}=t.components||{};return e?(0,r.jsx)(e,Object.assign({},t,{children:(0,r.jsx)(u,t)})):u(t)}var w=M;return C(F);})();\\n;return Component;"},"_id":"component/menu-button/code.mdx","_raw":{"sourceFilePath":"component/menu-button/code.mdx","sourceFileName":"code.mdx","sourceFileDir":"component/menu-button","contentType":"mdx","flattenedPath":"component/menu-button/code"},"type":"Component","url_path":"/component/menu-button/code","headings":[],"pathSegments":[{"order":0,"pathName":"menu-button"},{"order":0,"pathName":"code"}],"last_edited":"2025-02-18T14:54:06.352Z"},{"title":"Menu Button","summary":"Menu Button Summary","date":"2024-10-16T00:00:00.000Z","private":true,"body":{"raw":"","code":"var Component=(()=>{var x=Object.create;var o=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,d=Object.prototype.hasOwnProperty;var j=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),p=(t,e)=>{for(var n in e)o(t,n,{get:e[n],enumerable:!0})},m=(t,e,n,u)=>{if(e&&typeof e==\\"object\\"||typeof e==\\"function\\")for(let a of M(e))!d.call(t,a)&&a!==n&&o(t,a,{get:()=>e[a],enumerable:!(u=f(e,a))||u.enumerable});return t};var g=(t,e,n)=>(n=t!=null?x(_(t)):{},m(e||!t||!t.__esModule?o(n,\\"default\\",{value:t,enumerable:!0}):n,t)),l=t=>m(o({},\\"__esModule\\",{value:!0}),t);var c=j((F,s)=>{s.exports=_jsx_runtime});var B={};p(B,{default:()=>w,frontmatter:()=>y});var r=g(c()),y={title:\\"Menu Button\\",summary:\\"Menu Button Summary\\",date:new Date(17290368e5),private:!0};function i(t){return(0,r.jsx)(r.Fragment,{})}function D(t={}){let{wrapper:e}=t.components||{};return e?(0,r.jsx)(e,Object.assign({},t,{children:(0,r.jsx)(i,t)})):i(t)}var w=D;return l(B);})();\\n;return Component;"},"_id":"component/menu-button/index.mdx","_raw":{"sourceFilePath":"component/menu-button/index.mdx","sourceFileName":"index.mdx","sourceFileDir":"component/menu-button","contentType":"mdx","flattenedPath":"component/menu-button"},"type":"Component","url_path":"/component/menu-button","headings":[],"pathSegments":[{"order":0,"pathName":"menu-button"}],"last_edited":"2025-02-18T14:54:06.352Z"},{"title":"UX text","date":"2024-10-16T00:00:00.000Z","body":{"raw":"","code":"var Component=(()=>{var u=Object.create;var a=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var d=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),l=(t,e)=>{for(var n in e)a(t,n,{get:e[n],enumerable:!0})},c=(t,e,n,s)=>{if(e&&typeof e==\\"object\\"||typeof e==\\"function\\")for(let o of _(e))!j.call(t,o)&&o!==n&&a(t,o,{get:()=>e[o],enumerable:!(s=f(e,o))||s.enumerable});return t};var p=(t,e,n)=>(n=t!=null?u(d(t)):{},c(e||!t||!t.__esModule?a(n,\\"default\\",{value:t,enumerable:!0}):n,t)),D=t=>c(a({},\\"__esModule\\",{value:!0}),t);var i=g((b,x)=>{x.exports=_jsx_runtime});var C={};l(C,{default:()=>w,frontmatter:()=>M});var r=p(i()),M={title:\\"UX text\\",date:new Date(17290368e5)};function m(t){return(0,r.jsx)(r.Fragment,{})}function X(t={}){let{wrapper:e}=t.components||{};return e?(0,r.jsx)(e,Object.assign({},t,{children:(0,r.jsx)(m,t)})):m(t)}var w=X;return D(C);})();\\n;return Component;"},"_id":"component/menu-button/ux-text.mdx","_raw":{"sourceFilePath":"component/menu-button/ux-text.mdx","sourceFileName":"ux-text.mdx","sourceFileDir":"component/menu-button","contentType":"mdx","flattenedPath":"component/menu-button/ux-text"},"type":"Component","url_path":"/component/menu-button/ux-text","headings":[],"pathSegments":[{"order":0,"pathName":"menu-button"},{"order":0,"pathName":"ux-text"}],"last_edited":"2025-02-18T14:54:06.352Z"},{"title":"Accessibility","date":"2024-10-16T00:00:00.000Z","body":{"raw":"","code":"var Component=(()=>{var x=Object.create;var a=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var d=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var l=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var n in e)a(t,n,{get:e[n],enumerable:!0})},c=(t,e,n,s)=>{if(e&&typeof e==\\"object\\"||typeof e==\\"function\\")for(let o of _(e))!j.call(t,o)&&o!==n&&a(t,o,{get:()=>e[o],enumerable:!(s=f(e,o))||s.enumerable});return t};var p=(t,e,n)=>(n=t!=null?x(d(t)):{},c(e||!t||!t.__esModule?a(n,\\"default\\",{value:t,enumerable:!0}):n,t)),D=t=>c(a({},\\"__esModule\\",{value:!0}),t);var m=l((F,i)=>{i.exports=_jsx_runtime});var y={};g(y,{default:()=>w,frontmatter:()=>M});var r=p(m()),M={title:\\"Accessibility\\",date:new Date(17290368e5)};function u(t){return(0,r.jsx)(r.Fragment,{})}function b(t={}){let{wrapper:e}=t.components||{};return e?(0,r.jsx)(e,Object.assign({},t,{children:(0,r.jsx)(u,t)})):u(t)}var w=b;return D(y);})();\\n;return Component;"},"_id":"component/popover/accessibility.mdx","_raw":{"sourceFilePath":"component/popover/accessibility.mdx","sourceFileName":"accessibility.mdx","sourceFileDir":"component/popover","contentType":"mdx","flattenedPath":"component/popover/accessibility"},"type":"Component","url_path":"/component/popover/accessibility","headings":[],"pathSegments":[{"order":0,"pathName":"popover"},{"order":0,"pathName":"accessibility"}],"last_edited":"2025-02-18T14:54:06.352Z"},{"title":"Code","date":"2024-10-16T00:00:00.000Z","body":{"raw":"","code":"var Component=(()=>{var x=Object.create;var a=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),l=(t,e)=>{for(var n in e)a(t,n,{get:e[n],enumerable:!0})},c=(t,e,n,s)=>{if(e&&typeof e==\\"object\\"||typeof e==\\"function\\")for(let o of f(e))!j.call(t,o)&&o!==n&&a(t,o,{get:()=>e[o],enumerable:!(s=d(e,o))||s.enumerable});return t};var p=(t,e,n)=>(n=t!=null?x(_(t)):{},c(e||!t||!t.__esModule?a(n,\\"default\\",{value:t,enumerable:!0}):n,t)),C=t=>c(a({},\\"__esModule\\",{value:!0}),t);var m=g((b,i)=>{i.exports=_jsx_runtime});var F={};l(F,{default:()=>w,frontmatter:()=>D});var r=p(m()),D={title:\\"Code\\",date:new Date(17290368e5)};function u(t){return(0,r.jsx)(r.Fragment,{})}function M(t={}){let{wrapper:e}=t.components||{};return e?(0,r.jsx)(e,Object.assign({},t,{children:(0,r.jsx)(u,t)})):u(t)}var w=M;return C(F);})();\\n;return Component;"},"_id":"component/popover/code.mdx","_raw":{"sourceFilePath":"component/popover/code.mdx","sourceFileName":"code.mdx","sourceFileDir":"component/popover","contentType":"mdx","flattenedPath":"component/popover/code"},"type":"Component","url_path":"/component/popover/code","headings":[],"pathSegments":[{"order":0,"pathName":"popover"},{"order":0,"pathName":"code"}],"last_edited":"2025-02-18T14:54:06.352Z"},{"title":"Popover","summary":"Popover Summary","date":"2024-10-16T00:00:00.000Z","private":true,"body":{"raw":"","code":"var Component=(()=>{var x=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,d=Object.prototype.hasOwnProperty;var j=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var r in e)a(t,r,{get:e[r],enumerable:!0})},s=(t,e,r,m)=>{if(e&&typeof e==\\"object\\"||typeof e==\\"function\\")for(let o of f(e))!d.call(t,o)&&o!==r&&a(t,o,{get:()=>e[o],enumerable:!(m=p(e,o))||m.enumerable});return t};var l=(t,e,r)=>(r=t!=null?x(_(t)):{},s(e||!t||!t.__esModule?a(r,\\"default\\",{value:t,enumerable:!0}):r,t)),v=t=>s(a({},\\"__esModule\\",{value:!0}),t);var c=j((F,u)=>{u.exports=_jsx_runtime});var w={};g(w,{default:()=>M,frontmatter:()=>y});var n=l(c()),y={title:\\"Popover\\",summary:\\"Popover Summary\\",date:new Date(17290368e5),private:!0};function i(t){return(0,n.jsx)(n.Fragment,{})}function D(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(i,t)})):i(t)}var M=D;return v(w);})();\\n;return Component;"},"_id":"component/popover/index.mdx","_raw":{"sourceFilePath":"component/popover/index.mdx","sourceFileName":"index.mdx","sourceFileDir":"component/popover","contentType":"mdx","flattenedPath":"component/popover"},"type":"Component","url_path":"/component/popover","headings":[],"pathSegments":[{"order":0,"pathName":"popover"}],"last_edited":"2025-02-18T14:54:06.352Z"},{"title":"UX text","date":"2024-10-16T00:00:00.000Z","body":{"raw":"","code":"var Component=(()=>{var u=Object.create;var a=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var d=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),l=(t,e)=>{for(var n in e)a(t,n,{get:e[n],enumerable:!0})},c=(t,e,n,s)=>{if(e&&typeof e==\\"object\\"||typeof e==\\"function\\")for(let o of _(e))!j.call(t,o)&&o!==n&&a(t,o,{get:()=>e[o],enumerable:!(s=f(e,o))||s.enumerable});return t};var p=(t,e,n)=>(n=t!=null?u(d(t)):{},c(e||!t||!t.__esModule?a(n,\\"default\\",{value:t,enumerable:!0}):n,t)),D=t=>c(a({},\\"__esModule\\",{value:!0}),t);var i=g((b,x)=>{x.exports=_jsx_runtime});var C={};l(C,{default:()=>w,frontmatter:()=>M});var r=p(i()),M={title:\\"UX text\\",date:new Date(17290368e5)};function m(t){return(0,r.jsx)(r.Fragment,{})}function X(t={}){let{wrapper:e}=t.components||{};return e?(0,r.jsx)(e,Object.assign({},t,{children:(0,r.jsx)(m,t)})):m(t)}var w=X;return D(C);})();\\n;return Component;"},"_id":"component/popover/ux-text.mdx","_raw":{"sourceFilePath":"component/popover/ux-text.mdx","sourceFileName":"ux-text.mdx","sourceFileDir":"component/popover","contentType":"mdx","flattenedPath":"component/popover/ux-text"},"type":"Component","url_path":"/component/popover/ux-text","headings":[],"pathSegments":[{"order":0,"pathName":"popover"},{"order":0,"pathName":"ux-text"}],"last_edited":"2025-02-18T14:54:06.352Z"},{"title":"Accessibility","date":"2024-04-10T00:00:00.000Z","body":{"raw":"\\n\\nThis page will be updated with information soon.\\n","code":"var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var g=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),j=(e,t)=>{for(var n in t)r(e,n,{get:t[n],enumerable:!0})},c=(e,t,n,s)=>{if(t&&typeof t==\\"object\\"||typeof t==\\"function\\")for(let i of l(t))!x.call(e,i)&&i!==n&&r(e,i,{get:()=>t[i],enumerable:!(s=f(t,i))||s.enumerable});return e};var _=(e,t,n)=>(n=e!=null?p(u(e)):{},c(t||!e||!e.__esModule?r(n,\\"default\\",{value:e,enumerable:!0}):n,e)),b=e=>c(r({},\\"__esModule\\",{value:!0}),e);var d=g((v,a)=>{a.exports=_jsx_runtime});var C={};j(C,{default:()=>y,frontmatter:()=>h});var o=_(d()),h={title:\\"Accessibility\\",date:new Date(17127072e5)};function m(e){let t=Object.assign({p:\\"p\\"},e.components),{Badge:n}=t;return n||M(\\"Badge\\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n,{variant:\\"notice\\",children:\\"Coming soon\\"}),`\\n`,(0,o.jsx)(\\"br\\",{}),`\\n`,(0,o.jsx)(t.p,{children:\\"This page will be updated with information soon.\\"})]})}function w(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,Object.assign({},e,{children:(0,o.jsx)(m,e)})):m(e)}var y=w;function M(e,t){throw new Error(\\"Expected \\"+(t?\\"component\\":\\"object\\")+\\" `\\"+e+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return b(C);})();\\n;return Component;"},"_id":"component/radio-button/accessibility.mdx","_raw":{"sourceFilePath":"component/radio-button/accessibility.mdx","sourceFileName":"accessibility.mdx","sourceFileDir":"component/radio-button","contentType":"mdx","flattenedPath":"component/radio-button/accessibility"},"type":"Component","url_path":"/component/radio-button/accessibility","headings":[],"pathSegments":[{"order":0,"pathName":"radio-button"},{"order":0,"pathName":"accessibility"}],"last_edited":"2025-02-18T14:54:06.352Z"},{"title":"Code","date":"2024-04-10T00:00:00.000Z","body":{"raw":"\\n## Code\\n\\n\\n","code":"var Component=(()=>{var x=Object.create;var a=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var f=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),p=(n,e)=>{for(var t in e)a(n,t,{get:e[t],enumerable:!0})},r=(n,e,t,c)=>{if(e&&typeof e==\\"object\\"||typeof e==\\"function\\")for(let s of l(e))!u.call(n,s)&&s!==t&&a(n,s,{get:()=>e[s],enumerable:!(c=h(e,s))||c.enumerable});return n};var _=(n,e,t)=>(t=n!=null?x(j(n)):{},r(e||!n||!n.__esModule?a(t,\\"default\\",{value:n,enumerable:!0}):t,n)),C=n=>r(a({},\\"__esModule\\",{value:!0}),n);var d=f((N,i)=>{i.exports=_jsx_runtime});var g={};p(g,{default:()=>b,frontmatter:()=>D});var o=_(d()),D={title:\\"Code\\",date:new Date(17127072e5)};function m(n){let e=Object.assign({h2:\\"h2\\",a:\\"a\\",span:\\"span\\"},n.components);return(0,o.jsxs)(e.h2,{id:\\"code\\",children:[(0,o.jsx)(e.a,{className:\\"anchor\\",href:\\"#code\\",children:(0,o.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Code\\"]})}function M(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,Object.assign({},n,{children:(0,o.jsx)(m,n)})):m(n)}var b=M;return C(g);})();\\n;return Component;"},"_id":"component/radio-button/code.mdx","_raw":{"sourceFilePath":"component/radio-button/code.mdx","sourceFileName":"code.mdx","sourceFileDir":"component/radio-button","contentType":"mdx","flattenedPath":"component/radio-button/code"},"type":"Component","url_path":"/component/radio-button/code","headings":[{"level":2,"text":"Code","slug":"code"}],"pathSegments":[{"order":0,"pathName":"radio-button"},{"order":0,"pathName":"code"}],"last_edited":"2025-02-18T14:54:06.352Z"},{"title":"Design","date":"2024-04-10T00:00:00.000Z","body":{"raw":"\\n## Design\\nSimple and recognizable design. Keep relations with form fields and buttons. The contained design version adds more visual punch and should be used then forms need more impact on the page. \\n\\n## Anatomy\\nThe radio button have a group label (for all of the options), this may also have an additional label support text. Each option in the list have a label and optional label support text.\\n\\n
\\nThe benefit of using radio buttons over select is that users may easily scan the available options and make a quick selection.\\n\\n## Anatomy \\nThe radio button (and other form controls) are divided in sections that are re-used between components. \\n- **Header**: Label, label support, contextual help, extended support.\\n- **Body**: the actual radiobuttons.\\n- **Footer**: error message.\\n\\n
\\n### Label\\nAll radio buttons need a label. The group needs a label too.\\n
\\n\\n### Label support \\n(Not available for contained variant)
\\nMay be used for both the group label and for each individual radio button in the group.\\n
\\n\\nMay be used for both the group label and for each individual radio button in the group.\\n
\\n### Do:\\n- Use descriptive labels to clearly indicate the purpose of each radio button.\\n- Keep the text as short as possible.\\n- At least two options.\\n- Sort the options in a logical order.\\n
\\n\\n### Don\'t:\\n- Use radio buttons for non-mutually exclusive options; consider checkboxes instead.\\n- Overload users with too many radio buttons in a question. If you have to present a lot of options, use a select.\\n- Mix default and contained versions.\\n
\\n\\nThe texts should be clear and informative. Avoid information-poor words such as information, important, welcome, and regarding.\\n\\nSingle words or complete sentences
\\nKeep the text as short as possible. Labels can be single words or full sentences. In some cases, questions are used to prompt the required information.\\n\\n## Upper and lower case\\nDon’t start each word in headings and labels with upper case. Only use upper case in:\\n- The first letter of the first word\\n- The first letter of proper names\\n- Abbreviations\\n\\n## Yes and no\\nMatch the radio button options to the field label. If the label is a yes or no question, the only options should be “Yes” and “No\\".\\n\\n
\\n ### Icons\\n The options may have an icon to accentuate the choices. Use icons sparsely but consistently.\\n
\\n \\n
\\n ### Overflow\\n When there isn\'t enough room for all items to be displayed the items will need to scroll. This is indicated by arrows indicating that there are more options available.\\n
\\n \\n**Do**\\n\\t- Use max 5 options, try to have as few as possible.\\n\\t- Keep option size consistent\\n
\\n\\n**Don\'ts**\\n\\t- Use it to collect data in a form, in that case use radio button or select.\\n\\t- Use to navigate in different areas, use tabs for that.\\n\\t- Mix items with and without icon\\n\\t- Use it for actions, use buttons instead.\\n
\\n\\nThis page will be updated with information soon.\\n","code":"var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var g=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),j=(e,t)=>{for(var n in t)r(e,n,{get:t[n],enumerable:!0})},c=(e,t,n,s)=>{if(t&&typeof t==\\"object\\"||typeof t==\\"function\\")for(let i of l(t))!x.call(e,i)&&i!==n&&r(e,i,{get:()=>t[i],enumerable:!(s=f(t,i))||s.enumerable});return e};var _=(e,t,n)=>(n=e!=null?p(u(e)):{},c(t||!e||!e.__esModule?r(n,\\"default\\",{value:e,enumerable:!0}):n,e)),b=e=>c(r({},\\"__esModule\\",{value:!0}),e);var d=g((v,a)=>{a.exports=_jsx_runtime});var C={};j(C,{default:()=>y,frontmatter:()=>h});var o=_(d()),h={title:\\"Accessibility\\",date:new Date(17394048e5)};function m(e){let t=Object.assign({p:\\"p\\"},e.components),{Badge:n}=t;return n||M(\\"Badge\\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n,{variant:\\"notice\\",children:\\"Coming soon\\"}),`\\n`,(0,o.jsx)(\\"br\\",{}),`\\n`,(0,o.jsx)(t.p,{children:\\"This page will be updated with information soon.\\"})]})}function w(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,Object.assign({},e,{children:(0,o.jsx)(m,e)})):m(e)}var y=w;function M(e,t){throw new Error(\\"Expected \\"+(t?\\"component\\":\\"object\\")+\\" `\\"+e+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return b(C);})();\\n;return Component;"},"_id":"component/select/accessibility.mdx","_raw":{"sourceFilePath":"component/select/accessibility.mdx","sourceFileName":"accessibility.mdx","sourceFileDir":"component/select","contentType":"mdx","flattenedPath":"component/select/accessibility"},"type":"Component","url_path":"/component/select/accessibility","headings":[],"pathSegments":[{"order":0,"pathName":"select"},{"order":0,"pathName":"accessibility"}],"last_edited":"2025-02-18T14:54:06.353Z"},{"title":"Code","date":"2025-02-13T00:00:00.000Z","body":{"raw":"","code":"var Component=(()=>{var x=Object.create;var a=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),l=(t,e)=>{for(var n in e)a(t,n,{get:e[n],enumerable:!0})},c=(t,e,n,s)=>{if(e&&typeof e==\\"object\\"||typeof e==\\"function\\")for(let o of f(e))!j.call(t,o)&&o!==n&&a(t,o,{get:()=>e[o],enumerable:!(s=d(e,o))||s.enumerable});return t};var p=(t,e,n)=>(n=t!=null?x(_(t)):{},c(e||!t||!t.__esModule?a(n,\\"default\\",{value:t,enumerable:!0}):n,t)),C=t=>c(a({},\\"__esModule\\",{value:!0}),t);var m=g((b,i)=>{i.exports=_jsx_runtime});var F={};l(F,{default:()=>w,frontmatter:()=>D});var r=p(m()),D={title:\\"Code\\",date:new Date(17394048e5)};function u(t){return(0,r.jsx)(r.Fragment,{})}function M(t={}){let{wrapper:e}=t.components||{};return e?(0,r.jsx)(e,Object.assign({},t,{children:(0,r.jsx)(u,t)})):u(t)}var w=M;return C(F);})();\\n;return Component;"},"_id":"component/select/code.mdx","_raw":{"sourceFilePath":"component/select/code.mdx","sourceFileName":"code.mdx","sourceFileDir":"component/select","contentType":"mdx","flattenedPath":"component/select/code"},"type":"Component","url_path":"/component/select/code","headings":[],"pathSegments":[{"order":0,"pathName":"select"},{"order":0,"pathName":"code"}],"last_edited":"2025-02-18T14:54:06.353Z"},{"title":"Select","summary":"The select component allows users to choose one option from a list of values, typically used in forms.","date":"2025-02-13T00:00:00.000Z","tags":"forms","status":"BETA","body":{"raw":"\\n## Usage\\nThe select component is designed for single-choice selections, offering native mobile functionality and enhanced accessibility. Best suited for simple option lists, while maintaining familiar dropdown behaviour across devices.\\n\\n
\\nThis page will be updated with information soon.\\n","code":"var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var g=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),j=(e,t)=>{for(var n in t)r(e,n,{get:t[n],enumerable:!0})},c=(e,t,n,s)=>{if(t&&typeof t==\\"object\\"||typeof t==\\"function\\")for(let i of l(t))!x.call(e,i)&&i!==n&&r(e,i,{get:()=>t[i],enumerable:!(s=f(t,i))||s.enumerable});return e};var _=(e,t,n)=>(n=e!=null?p(u(e)):{},c(t||!e||!e.__esModule?r(n,\\"default\\",{value:e,enumerable:!0}):n,e)),b=e=>c(r({},\\"__esModule\\",{value:!0}),e);var d=g((v,a)=>{a.exports=_jsx_runtime});var C={};j(C,{default:()=>y,frontmatter:()=>h});var o=_(d()),h={title:\\"Accessibility\\",date:new Date(17394048e5)};function m(e){let t=Object.assign({p:\\"p\\"},e.components),{Badge:n}=t;return n||M(\\"Badge\\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n,{variant:\\"notice\\",children:\\"Coming soon\\"}),`\\n`,(0,o.jsx)(\\"br\\",{}),`\\n`,(0,o.jsx)(t.p,{children:\\"This page will be updated with information soon.\\"})]})}function w(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,Object.assign({},e,{children:(0,o.jsx)(m,e)})):m(e)}var y=w;function M(e,t){throw new Error(\\"Expected \\"+(t?\\"component\\":\\"object\\")+\\" `\\"+e+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return b(C);})();\\n;return Component;"},"_id":"component/textarea/accessibility.mdx","_raw":{"sourceFilePath":"component/textarea/accessibility.mdx","sourceFileName":"accessibility.mdx","sourceFileDir":"component/textarea","contentType":"mdx","flattenedPath":"component/textarea/accessibility"},"type":"Component","url_path":"/component/textarea/accessibility","headings":[],"pathSegments":[{"order":0,"pathName":"textarea"},{"order":0,"pathName":"accessibility"}],"last_edited":"2025-02-18T14:54:06.353Z"},{"title":"Code","date":"2025-02-13T00:00:00.000Z","body":{"raw":"","code":"var Component=(()=>{var x=Object.create;var a=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),l=(t,e)=>{for(var n in e)a(t,n,{get:e[n],enumerable:!0})},c=(t,e,n,s)=>{if(e&&typeof e==\\"object\\"||typeof e==\\"function\\")for(let o of f(e))!j.call(t,o)&&o!==n&&a(t,o,{get:()=>e[o],enumerable:!(s=d(e,o))||s.enumerable});return t};var p=(t,e,n)=>(n=t!=null?x(_(t)):{},c(e||!t||!t.__esModule?a(n,\\"default\\",{value:t,enumerable:!0}):n,t)),C=t=>c(a({},\\"__esModule\\",{value:!0}),t);var m=g((b,i)=>{i.exports=_jsx_runtime});var F={};l(F,{default:()=>w,frontmatter:()=>D});var r=p(m()),D={title:\\"Code\\",date:new Date(17394048e5)};function u(t){return(0,r.jsx)(r.Fragment,{})}function M(t={}){let{wrapper:e}=t.components||{};return e?(0,r.jsx)(e,Object.assign({},t,{children:(0,r.jsx)(u,t)})):u(t)}var w=M;return C(F);})();\\n;return Component;"},"_id":"component/textarea/code.mdx","_raw":{"sourceFilePath":"component/textarea/code.mdx","sourceFileName":"code.mdx","sourceFileDir":"component/textarea","contentType":"mdx","flattenedPath":"component/textarea/code"},"type":"Component","url_path":"/component/textarea/code","headings":[],"pathSegments":[{"order":0,"pathName":"textarea"},{"order":0,"pathName":"code"}],"last_edited":"2025-02-18T14:54:06.353Z"},{"title":"Textarea","summary":"Textarea allow users to input text and digits on multiple lines.","date":"2025-02-13T00:00:00.000Z","tags":"forms","status":"BETA","body":{"raw":"\\n## Usage\\nTextarea is used for longer text inputs, featuring 4 default rows and possibility for automatic vertical resizing. Ideal for comments, descriptions, and other multiline content in forms and dialogs.\\n\\n## Anatomy \\nThe textarea (and other form controls) are divided in sections that are re-used between components. \\n- **Header**: Label, label support, contextual help, extended support.\\n- **Body**: the actual field with trailing slot.\\n- **Footer**: character counter and error message.\\n\\n
\\n### Label\\nAll textarea fields need a label. Keep the label short.\\n
\\n\\n### Optional field indicator\\n(Not available for Floating label variant)\\nWe 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\\nThe text \\"(optional)\\" is set in font-weight regular, to differentiate from the label.\\n
\\n\\n### Support text\\n(Not available for Floating label variant)\\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\\nWhen label and support text is not enough to explain a field, use the info-icon. \\n\\nWhen clicked the extended support is displayed between the label support and the field.\\n\\nIf there is limited space use a tooltip.
\\nIf there is large amounts of text use a modal.\\n\\n
\\n### Leading icon\\nA leading icon visually reinforces the purpose of the field, helping users to understand what type of information is needed. \\n
\\n\\n### Clearable\\nTo make it easy for users to clear a field an x-icon button may be added at the end of the field. \\n
\\n\\n### Field error\\nWhen a field contains an error the field is highlighted in red with an error text describing the error.\\n
\\n\\nAs the user starts typing the numbers decrease.
\\nWhen a limit is almost reached the indicator turns yellow.
\\nIf users write too many characters the counter becomes red. An error will be indicated on the field stating that the max has been reached.\\n\\n