[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":-7,"_8":9,"_10":11},"actionData","errors","root",{"_198":199,"_364":365,"_366":367},"layouts/root/layout","layouts/components/layout",{"_198":199,"_200":201,"_202":203},"components-page",{"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":29,"_30":31,"_32":33,"_34":35,"_36":37},"component","avatar-stack","stories",[171,172,173,174,175,176,177,178],"dodont",[],"mdxCode","var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var x=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),j=(t,e)=>{for(var n in e)s(t,n,{get:e[n],enumerable:!0})},d=(t,e,n,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of f(e))!g.call(t,r)&&r!==n&&s(t,r,{get:()=>e[r],enumerable:!(i=u(e,r))||i.enumerable});return t};var b=(t,e,n)=>(n=t!=null?p(h(t)):{},d(e||!t||!t.__esModule?s(n,\"default\",{value:t,enumerable:!0}):n,t)),_=t=>d(s({},\"__esModule\",{value:!0}),t);var l=x((A,c)=>{c.exports=_jsx_runtime});var w={};j(w,{default:()=>m,frontmatter:()=>k});var o=b(l()),k=void 0;function a(t){let e={a:\"a\",p:\"p\",...t.components},{Alert:n}=e;return n||y(\"Alert\",!0),(0,o.jsx)(n,{\"data-color\":\"info\",children:(0,o.jsxs)(e.p,{children:[\"Vi jobber med \\xE5 forbedre dokumentasjonen for tilgjengelighet p\\xE5 denne komponenten. Har du sp\\xF8rsm\\xE5l eller ser noe som b\\xF8r prioriteres, ta gjerne kontakt med oss p\\xE5 \",(0,o.jsx)(e.a,{href:\"https://github.com/digdir/designsystemet/issues/new?template=1bug_report.yml\",children:\"Github\"}),\" eller \",(0,o.jsx)(e.a,{href:\"https://designsystemet.no/slack\",children:\"Slack\"}),\".\"]})})}function m(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(a,{...t})}):a(t)}function y(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return _(w);})();\n;return Component;","metadata",{"_165":159,"_167":168,"_169":170},"linkMetadata",[140,141,142,143,144,145,146,147,148,149],"cssSource",".ds-avatar-stack{--dsc-avatar-stack-size:var(--ds-size-12);--dsc-avatar-stack-gap:2px;--dsc-avatar-stack-overlap:50;--dsc-avatar-count:initial;--_gap:var(--dsc-avatar-stack-gap);--_overlap:calc(((var(--dsc-avatar-stack-size)/100)*var(--dsc-avatar-stack-overlap))*-1);--_ds-captured-length:var(--_overlap);display:flex;align-items:center;isolation:isolate;padding-block:1px;width:-moz-max-content;width:max-content;margin:0;transition:--_ds-captured-length .2s ease}.ds-avatar-stack:focus-visible{box-shadow:var(--_ds--focus,var(--dsc-focus-boxShadow));outline:var(--_ds--focus,var(--dsc-focus-outline));outline-offset:var(--_ds--focus,var(--ds-border-width-focus))}.ds-avatar-stack:focus-visible *{--_ds--focus: }.ds-avatar-stack[data-expandable]:focus-visible,.ds-avatar-stack[data-expandable]:hover{--_ds-captured-length:var(--_gap)}.ds-avatar-stack[data-expandable=fixed]{width:calc(var(--dsc-avatar-stack-size)*var(--dsc-avatar-count) + var(--_overlap)*(var(--dsc-avatar-count) - 1))}.ds-avatar-stack:empty{display:none}.ds-avatar-stack[data-suffix]:after{content:attr(data-suffix);place-self:center;margin-left:1ch;font-size:max(1rem,calc(var(--dsc-avatar-stack-size)*.4))}.ds-avatar-stack .ds-avatar{--dsc-avatar-size:var(--dsc-avatar-stack-size);--_font-size:max(0.75rem,calc(var(--dsc-avatar-stack-size)*0.5));-webkit-mask:radial-gradient(50% 50% at calc(150% + var(--_ds-captured-length)),transparent calc(100% - 1px + var(--_gap)),#000 calc(100% + var(--_gap)));mask:radial-gradient(50% 50% at calc(150% + var(--_ds-captured-length)),transparent calc(100% - 1px + var(--_gap)),#000 calc(100% + var(--_gap)))}[data-variant=square]:is(.ds-avatar-stack .ds-avatar){-webkit-mask:linear-gradient(to right,#000 calc(100% + var(--_ds-captured-length) - var(--_gap)),transparent calc(100% + var(--_ds-captured-length) - var(--_gap)));mask:linear-gradient(to right,#000 calc(100% + var(--_ds-captured-length) - var(--_gap)),transparent calc(100% + var(--_ds-captured-length) - var(--_gap)))}:is(.ds-avatar-stack .ds-avatar):not(:first-child){margin-left:var(--_ds-captured-length)}:is(.ds-avatar-stack .ds-avatar):nth-last-child(1 of .ds-avatar){-webkit-mask:none;mask:none}@supports not selector(:nth-last-child(1 of .ds-avatar)){:is(.ds-avatar-stack .ds-avatar):not(:has(+.ds-avatar)){-webkit-mask:none;mask:none}}:is(.ds-avatar-stack .ds-avatar):not([data-size]){--dsc-avatar-font-size:var(--_font-size)}:is(.ds-avatar-stack .ds-avatar):focus-visible,:is(.ds-avatar-stack .ds-avatar):has(:focus-visible){-webkit-mask:none;mask:none;box-shadow:var(--_ds--focus,var(--dsc-focus-boxShadow));outline:var(--_ds--focus,var(--dsc-focus-outline));outline-offset:var(--_ds--focus,var(--ds-border-width-focus))}:is(:is(.ds-avatar-stack .ds-avatar):has(:focus-visible),:is(.ds-avatar-stack .ds-avatar):focus-visible) *{--_ds--focus: }:is(.ds-avatar-stack .ds-avatar):focus-visible,:is(.ds-avatar-stack .ds-avatar):has(:focus-visible){z-index:1}","cssVars",{"_130":131,"_132":123,"_133":107,"_134":135,"_136":137,"_138":139},"cssAttrs",{"_65":126,"_63":127,"_128":129},"toc",[],"componentDocs",[44],"navigation",{"_38":39,"_40":41,"_42":43},"githubLink","https://github.com/digdir/designsystemet/tree/main/apps/www/app/content/components/avatar-stack/no/accessibility.mdx","overviewLink","/no/components/docs/avatar-stack/overview","codeLink","/no/components/docs/avatar-stack/code","accessibilityLink","/no/components/docs/avatar-stack/accessibility",{"_45":46,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56},"tags",{"_124":125},"filePath","/usr/src/app/packages/react/src/components/avatar-stack/avatar-stack.tsx","description","Use `AvatarStack` to constrain Avatars into a stack.","displayName","EXPERIMENTAL_AvatarStack","methods",[],"props",{"_57":58,"_59":60,"_61":62,"_63":64,"_65":66},"gap",{"_67":116,"_49":117,"_70":57,"_71":-7,"_72":118,"_74":75,"_76":119},"avatarSize",{"_67":108,"_49":109,"_70":59,"_71":-7,"_72":110,"_74":75,"_76":111},"overlap",{"_67":99,"_49":100,"_70":61,"_71":-7,"_72":101,"_74":75,"_76":102},"suffix",{"_67":-5,"_49":92,"_70":63,"_71":-7,"_72":93,"_74":75,"_76":94},"expandable",{"_67":68,"_49":69,"_70":65,"_71":-7,"_72":73,"_74":75,"_76":77},"defaultValue",{"_81":91},"Expand on hover to show full avatars.\n'fixed': AvatarStack physical width does not change when avatars are expanded.","name","parent","declarations",[87],"required",false,"type",{"_70":78,"_79":80,"_81":82},"enum","raw","true | \"fixed\"","value",[83,84],{"_81":86},{"_81":85},"\"fixed\"","true",{"_88":89,"_70":90},"fileName","app/packages/react/src/components/avatar-stack/avatar-stack.tsx","TypeLiteral","undefined","Text to the right of the avatars to show a number representing additional avatars not shown such as '+5'\".",[98],{"_70":78,"_79":95,"_81":96},"string",[97],{"_81":95},{"_88":89,"_70":90},{"_81":107},"A number which represents the percentage value of how much avatars should overlap.",[106],{"_70":78,"_79":103,"_81":104},"number",[105],{"_81":103},{"_88":89,"_70":90},"50",{"_81":115},"Control the size of the avatars. Must be a valid css length value (px, em, rem, var(--ds-size-12) etc.)",[114],{"_70":78,"_79":95,"_81":112},[113],{"_81":95},{"_88":89,"_70":90},"'var(--ds-size-12)'",{"_81":123},"Adjusts gap-mask between avatars in the stack. Must be a valid css length value (px, em, rem, var(--ds-size-1) etc.)",[122],{"_70":78,"_79":95,"_81":120},[121],{"_81":95},{"_88":89,"_70":90},"2px","example","\n \n

\n \n \n \n \n \n","fixed","","variant","square","--dsc-avatar-stack-size","var(--ds-size-12)","--dsc-avatar-stack-gap","--dsc-avatar-stack-overlap","--dsc-avatar-count","initial","--dsc-avatar-size","var(--dsc-avatar-stack-size)","--dsc-avatar-font-size","var(--_font-size)",{"_165":166},{"_70":49,"_152":157},{"_150":164,"_152":153},{"_150":163,"_152":159},{"_150":162,"_152":157},{"_150":160,"_152":161},{"_150":158,"_152":159},{"_150":156,"_152":157},{"_150":154,"_152":155},{"_150":151,"_152":153},"property","twitter:image","content","/img/designsystemet-meta.png","twitter:card","summary_large_image","twitter:description","Avatar stack stabler en samling avatar-elementer","twitter:title","Avatar stack","og:url","https://designsystemet.no","og:description","og:title","og:image","title","Avatar stack - Designsystemet","subtitle","var Component=(()=>{var d=Object.create;var o=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var j=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),M=(t,n)=>{for(var e in n)o(t,e,{get:n[e],enumerable:!0})},s=(t,n,e,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of l(n))!_.call(t,r)&&r!==e&&o(t,r,{get:()=>n[r],enumerable:!(c=f(n,r))||c.enumerable});return t};var h=(t,n,e)=>(e=t!=null?d(p(t)):{},s(n||!t||!t.__esModule?o(e,\"default\",{value:t,enumerable:!0}):e,t)),v=t=>s(o({},\"__esModule\",{value:!0}),t);var i=j((b,m)=>{m.exports=_jsx_runtime});var D={};M(D,{default:()=>x,frontmatter:()=>C});var a=h(i()),C=void 0;function u(t){let n={p:\"p\",...t.components};return(0,a.jsx)(n.p,{children:\"Avatar stack stabler en samling avatar-elementer\"})}function x(t={}){let{wrapper:n}=t.components||{};return n?(0,a.jsx)(n,{...t,children:(0,a.jsx)(u,{...t})}):u(t)}return v(D);})();\n;return Component;","image","AvatarStack.svg",{"_70":196,"_180":197,"_182":183},{"_70":194,"_180":195,"_182":183},{"_70":192,"_180":193,"_182":183},{"_70":190,"_180":191,"_182":183},{"_70":188,"_180":189,"_182":183},{"_70":186,"_180":187,"_182":183},{"_70":184,"_180":185,"_182":183},{"_70":179,"_180":181,"_182":183},"WithTooltipAndLink","code","const WithTooltipAndLink = () => (\n

\n Link + Tooltip\n \n \n \n \n

\n \n \n \n \n \n \n

\n \n \n \n \n \n BR\n \n \n \n

\n Link + Tooltip expandable\n \n \n \n \n

\n \n \n \n \n \n \n

\n \n \n \n \n \n BR\n \n \n \n

\n);","file","avatar-stack.stories.tsx","AdditionalAvatars","const AdditionalAvatars = () => (\n <>\n \n \n

\n \n \n \n \n \n \n +14\n \n \n \n \n

\n \n \n \n \n \n \n \n \n);","Gap","const Gap = () => (\n

\n gap='2px'\n \n \n \n \n \n \n

\n gap='4px'\n \n \n \n \n \n \n

\n gap='6px'\n \n \n \n \n \n \n

\n);","DataSize","const DataSize = () => (\n

\n avatarSize='var(--ds-size-8)'\n \n \n

\n \n \n

\n avatarSize='3em'\n \n \n

\n \n \n

\n avatarSize='clamp(2rem, 1.5rem + 2vw, 4rem)'\n \n \n

\n \n \n

\n);","ShapeVariants","const ShapeVariants = () => (\n \n \n \n

\n \n \n

\n \n \n);","Expandable","const Expandable = () => (\n \n

\n expandable\n \n \n

\n \n \n

\n expandable=\"fixed\"\n \n \n

\n \n \n

\n \n);","Playground","const Playground = () => {\n const [expandable, setExpandable] = useState(undefined);\n const [square, setSquare] = useState(false);\n const [size, setSize] = useState(64);\n const [overlap, setOverlap] = useState(50);\n const [gap, setGap] = useState(2);\n const labelStyle = {\n display: 'flex',\n flexDirection: 'column',\n gap: 'var(--ds-size-2)',\n accentColor: 'var(--ds-color-base-default)',\n } as const;\n\n return (\n \n \n \n setExpandable((prev) => (prev ? undefined : true))}\n />\n setSquare((prev) => !prev)}\n />\n \n \n avatarSize {`${size}px`}\n \n setSize(Number((e.target as HTMLInputElement).value))\n }\n />\n \n \n Overlap {`${overlap}`}\n \n setOverlap(Number((e.target as HTMLInputElement).value))\n }\n />\n \n \n Gap {`${gap}px`}\n \n setGap(Number((e.target as HTMLInputElement).value))\n }\n />\n \n \n\n \n \n

\n \n \n

\n \n \n md\n \n \n

\n \n \n

\n \n \n \n );\n};","Preview","const Preview = () => (\n \n \n

\n \n \n \n \n \n md\n \n \n);","lang","no","cats",{"_207":208,"_204":209,"_206":210,"_211":212,"_213":214},"sidebarSuffix",{"_204":205,"_206":205},"components","/accessibility","typography"," ",[360],[253,254,255,256,257,258,259,260,261,262,263,264,265,266,267,268,269,270,271,272,273,274,275,276,277,278,279,280,281,282,283,284,285,286,287,288],[241,242,243,244],"utilities",[237],"utilitiesReact",[215,216,217,218,219],{"_165":234,"_221":235,"_223":236},{"_165":231,"_221":232,"_223":233},{"_165":228,"_221":229,"_223":230},{"_165":225,"_221":226,"_223":227},{"_165":220,"_221":222,"_223":224},"useSynchronizedAnimation","url","/no/components/utilities/use-synchronized-animation","order",50,"usePagination","/no/components/utilities/use-pagination",40,"useRadioGroup","/no/components/utilities/use-radio-group",30,"useCheckboxGroup","/no/components/utilities/use-checkbox-group",20,"RovingFocus","/no/components/utilities/roving-focus",10,{"_165":238,"_221":239,"_223":240},"clickdelegatefor","/no/components/utilities/clickdelegatefor",60,{"_165":251,"_221":252},{"_165":249,"_221":250},{"_165":247,"_221":248},{"_165":245,"_221":246},"Validation message","/no/components/docs/validation-message","Paragraph","/no/components/docs/paragraph","Label","/no/components/docs/label","Heading","/no/components/docs/heading",{"_165":358,"_221":359},{"_165":356,"_221":357},{"_165":159,"_221":355},{"_165":353,"_221":354},{"_165":351,"_221":352},{"_165":349,"_221":350},{"_165":347,"_221":348},{"_165":345,"_221":346},{"_165":343,"_221":344},{"_165":341,"_221":342},{"_165":339,"_221":340},{"_165":337,"_221":338},{"_165":335,"_221":336},{"_165":333,"_221":334},{"_165":331,"_221":332},{"_165":329,"_221":330},{"_165":327,"_221":328},{"_165":325,"_221":326},{"_165":323,"_221":324},{"_165":321,"_221":322},{"_165":319,"_221":320},{"_165":317,"_221":318},{"_165":315,"_221":316},{"_165":313,"_221":314},{"_165":311,"_221":312},{"_165":309,"_221":310},{"_165":307,"_221":308},{"_165":305,"_221":306},{"_165":303,"_221":304},{"_165":301,"_221":302},{"_165":299,"_221":300},{"_165":297,"_221":298},{"_165":295,"_221":296},{"_165":293,"_221":294},{"_165":291,"_221":292},{"_165":289,"_221":290},"Tooltip","/no/components/docs/tooltip","Toggle group","/no/components/docs/toggle-group","Textfield","/no/components/docs/textfield","Textarea","/no/components/docs/textarea","Tag","/no/components/docs/tag","Tabs","/no/components/docs/tabs","Table","/no/components/docs/table","Switch","/no/components/docs/switch","Suggestion","/no/components/docs/suggestion","Spinner","/no/components/docs/spinner","Skip link","/no/components/docs/skip-link","Skeleton","/no/components/docs/skeleton","Select","/no/components/docs/select","Search","/no/components/docs/search","Radio","/no/components/docs/radio","Popover","/no/components/docs/popover","Pagination","/no/components/docs/pagination","List","/no/components/docs/list","Link","/no/components/docs/link","Input","/no/components/docs/input","Fieldset","/no/components/docs/fieldset","Field","/no/components/docs/field","Error summary","/no/components/docs/error-summary","Dropdown","/no/components/docs/dropdown","Divider","/no/components/docs/divider","Dialog","/no/components/docs/dialog","Details","/no/components/docs/details","Chip","/no/components/docs/chip","Checkbox","/no/components/docs/checkbox","Card","/no/components/docs/card","Button","/no/components/docs/button","Breadcrumbs","/no/components/docs/breadcrumbs","Badge","/no/components/docs/badge","/no/components/docs/avatar-stack","Avatar","/no/components/docs/avatar","Alert","/no/components/docs/alert",{"_165":361,"_221":362,"_223":363},"Endringslogg","/no/components/changelog",1,"menu",[378,379,380,381,382,383,384],"centerLinks",[368,369,370],{"_371":376,"_221":377},{"_371":374,"_221":375},{"_371":372,"_221":373},"text","footer.accessibility","https://uustatus.no/nb/erklaringer/publisert/faeb324d-9b3f-40b0-b715-92cac356a916","footer.privacy","no/intro/privacy-policy","footer.about","no/intro/about-the-design-system",{"_70":398,"_386":399},{"_70":396,"_386":397},{"_70":394,"_386":395},{"_70":392,"_386":393},{"_70":390,"_386":391},{"_70":388,"_386":389},{"_70":385,"_386":387},"navigation.theme-builder","href","https://theme.designsystemet.no/no","navigation.blog","/no/blog","navigation.best-practices","/no/best-practices","navigation.patterns","/no/patterns","navigation.components","/no/components","navigation.fundamentals","/no/fundamentals","navigation.intro","/no/intro"]