@orangesk/orange-design-system 2.0.0-alpha.0 → 2.0.0-alpha.1

package/src/assets/icons/weighing-scales.svg

@@ -0,0 +1 @@
+<svg width="80" height="80" viewbox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M61.6 10.733H18.4a7.867 7.867 0 0 0-7.867 7.834v43.066a7.833 7.833 0 0 0 7.867 7.834h43.2a7.867 7.867 0 0 0 7.833-7.834V18.567a7.833 7.833 0 0 0-7.833-7.834Zm-1.267 19.6L51.8 35.267a1.966 1.966 0 0 1-2.533-.5 11.767 11.767 0 0 0-18.5-.034 1.966 1.966 0 0 1-2.534.5l-8.567-4.9a1.968 1.968 0 0 1-.633-2.8 25.467 25.467 0 0 1 32.8-8.033c3.667 1.9 6.8 4.667 9.134 8.067a1.966 1.966 0 0 1-.634 2.8v-.034Zm-20.333-2a13.733 13.733 0 0 1 9.8 4.1V20.5l-10 7.833h.2Z" /></svg>

package/src/assets/icons/widget.svg

@@ -0,0 +1 @@
+<svg width="80" height="80" viewbox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)" ><path d="M61.7 37.313A18.657 18.657 0 1 0 42.775 18.3v19.012H61.7ZM56.101 7.996l13.326 10.66-13.326 10.661V7.996ZM61.788 42.643H42.776v19.012a18.7 18.7 0 1 0 19.012-19.012Zm7.64 15.991a8.129 8.129 0 0 1-1.51 4.798c-.844 1.466-1.777 2.754-2.665 4.442-.889 1.688-2.532 4.442-3.82 6.885l-3.954-6.974c-.622-1.155-1.377-2.266-1.999-3.332l-.444-.888a9.818 9.818 0 0 1-1.599-4.93 7.996 7.996 0 0 1 15.991 0Z"/><path d="M61.432 53.304a5.33 5.33 0 1 0 0 10.66 5.33 5.33 0 0 0 0-10.66ZM18.434 42.643a18.657 18.657 0 1 0 19.012 19.012V42.643H18.434ZM29.45 61.3a10.66 10.66 0 1 1-10.66-10.661 10.615 10.615 0 0 1 10.66 10.66Z"/><path d="M18.745 63.965h5.33a1.333 1.333 0 0 0 0-2.665h-3.997v-6.663a1.334 1.334 0 0 0-1.332-1.333 1.288 1.288 0 0 0-1.333 1.333v7.995a1.288 1.288 0 0 0 1.332 1.333ZM18.656 0a18.656 18.656 0 1 0 0 37.313h18.79V18.3a18.701 18.701 0 0 0-18.79-18.3Zm-1.688 7.863a2.753 2.753 0 0 1 3.954 0 2.62 2.62 0 0 1 .8 1.954 2.71 2.71 0 0 1-2.8 2.754 2.754 2.754 0 0 1-1.954-.8 2.887 2.887 0 0 1-.8-1.954 2.621 2.621 0 0 1 .8-1.954Zm6.53 24.12h-8.884v-.667a2.134 2.134 0 0 0 1.644-.622c.307-.697.429-1.462.355-2.22v-9.817a4.131 4.131 0 0 0-.4-2.266 2.443 2.443 0 0 0-1.599-.533v-.71h6.84v13.325c-.067.777.07 1.559.4 2.266a2.398 2.398 0 0 0 1.644.533v.71Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h80v80H0z"/></clipPath></defs></svg>

package/src/assets/icons/wifi-home.svg

@@ -0,0 +1 @@
+<svg width="80" height="80" viewbox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><path d="M47.767 11.8a8.265 8.265 0 0 0-12.667 0l-4.066 4.067h-10.7v10.666L7.667 39.1h12.667v25.367a6.33 6.33 0 0 0 6.333 6.333h29.567a6.333 6.333 0 0 0 6.333-6.333V39.133h12.667L47.767 11.8Zm-6.433 43.967c-2.334 0-4.2-1.9-4.2-4.234 0-2.333 1.866-4.133 4.2-4.133 2.333 0 4.233 1.8 4.233 4.133a4.24 4.24 0 0 1-4.233 4.234Zm4.5-9a6.9 6.9 0 0 0-9 .1l-2-2.2a9.967 9.967 0 0 1 12.933-.134l-1.933 2.234Zm3.9-4.467a12.933 12.933 0 0 0-16.8.167l-2-2.234a15.966 15.966 0 0 1 20.766-.2L49.734 42.3Zm4.233-4.267a19.467 19.467 0 0 0-25.3.267l-2-2.233a22.467 22.467 0 0 1 29.267-.267l-1.967 2.233Z" /></svg>

package/src/assets/icons/wifi.svg

@@ -0,0 +1 @@
+<svg width="80" height="80" viewbox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M39.9 25.833A35.9 35.9 0 0 0 14.434 36.4l4.5 4.5a29.666 29.666 0 0 1 41.966 0l4.5-4.5a35.9 35.9 0 0 0-25.5-10.567ZM5.434 27.4l4.5 4.5a42.333 42.333 0 0 1 59.933 0l4.5-4.5a48.566 48.566 0 0 0-68.933 0Zm42.133 31.667a7.667 7.667 0 1 1-15.334 0 7.667 7.667 0 0 1 15.334 0ZM23.434 45.4l4.5 4.5a16.934 16.934 0 0 1 23.966 0l4.5-4.5a23.334 23.334 0 0 0-33 0h.034Z" /></svg>

package/src/assets/icons/x.svg

@@ -0,0 +1 @@
+<svg width="80" height="80" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M44.7567 36.0876L63.3708 14.4509H58.9583L42.7983 33.2376L29.8892 14.4509H15L34.5208 42.8601L15 65.5493H19.4108L36.4792 45.7101L50.1117 65.5493H65L44.7558 36.0884L44.7567 36.0876ZM38.715 43.1101L36.7375 40.2818L21 17.7718H27.775L40.475 35.9384L42.4525 38.7668L58.9608 62.3801H52.1858L38.715 43.1118V43.1101Z"/></svg>

package/src/assets/icons/your-balance.svg

@@ -0,0 +1 @@
+<svg width="80" height="80" viewbox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M55.317 13.818 35.455 35.331a6.546 6.546 0 1 0 10.927 6.31l8.935-27.823ZM40.044 2.91C19.56 2.91 2.954 19.517 2.954 40c0 20.484 16.606 37.091 37.09 37.091s37.09-16.607 37.09-37.09c0-20.484-16.606-37.092-37.09-37.092Zm29.818 43.738-6.025-3.494a23.91 23.91 0 0 0-1.997-13.207l5.691-3.284a30.742 30.742 0 0 1 2.335 19.989l-.004-.004Zm-57.96-18.534a30.57 30.57 0 0 1 53.455-5.23l-5.695 3.284a24.143 24.143 0 0 0-4.476-4.792l-6.717 20.909a8.728 8.728 0 1 1-14.607-8.437l14.946-16.196A24 24 0 0 0 16.25 43.153l-6.025 3.494a30.743 30.743 0 0 1 1.676-18.534Z" /></svg>

package/src/assets/icons/youtube.svg

@@ -0,0 +1 @@
+<svg width="80" height="80" viewbox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><path d="M63.275 30.05S62.8 26.625 61.4 25.1c-1.825-1.975-3.85-2-4.75-2.1-6.7-.5-16.65-.5-16.65-.5s-10 0-16.625.5c-.925.125-2.95.125-4.75 2.1-1.425 1.5-1.9 4.95-1.9 4.95s-.475 4.025-.475 8.05v3.775c0 4.025.475 8.05.475 8.05s.475 3.425 1.875 4.95c1.825 2 4.2 1.925 5.25 2.125 3.8.375 16.15.5 16.15.5s10 0 16.625-.5c.925-.15 2.95-.15 4.75-2.125 1.425-1.5 1.9-4.95 1.9-4.95s.475-4 .475-8.05v-3.75c0-4.05-.475-8.075-.475-8.075ZM36.25 47.5v-15l12.5 7.525-12.5 7.475Z" /></svg>

package/src/assets/icons/zoom-in.svg

@@ -0,0 +1 @@
+<svg width="80" height="80" viewbox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M77.66 70.66 55.996 49A29.984 29.984 0 1 0 49 56l21.664 21.66a2.405 2.405 0 0 0 3.392 0l3.608-3.608c.448-.45.7-1.06.7-1.696 0-.636-.256-1.245-.704-1.696ZM31.584 51.976a20.39 20.39 0 1 1 0-40.78 20.39 20.39 0 0 1 0 40.78ZM42.376 35.18H20.788a2.4 2.4 0 0 1-2.4-2.4v-2.4a2.4 2.4 0 0 1 2.4-2.396h21.588a2.4 2.4 0 0 1 2.4 2.4v2.4a2.396 2.396 0 0 1-2.4 2.396Z" /></svg>

package/src/assets/icons/zoom-out.svg

@@ -0,0 +1 @@
+<svg width="80" height="80" viewbox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M77.66 70.66 55.996 49A29.984 29.984 0 1 0 49 56l21.664 21.66a2.405 2.405 0 0 0 3.392 0l3.608-3.608c.448-.45.7-1.06.7-1.696 0-.636-.256-1.245-.704-1.696ZM31.584 51.976a20.39 20.39 0 1 1 0-40.78 20.39 20.39 0 0 1 0 40.78Zm13.192-21.592v2.4a2.4 2.4 0 0 1-2.4 2.4H35.18v7.192a2.4 2.4 0 0 1-2.4 2.4h-2.4a2.4 2.4 0 0 1-2.396-2.4V35.18h-7.196a2.4 2.4 0 0 1-2.4-2.4v-2.4a2.4 2.4 0 0 1 2.4-2.396h7.2v-7.196a2.4 2.4 0 0 1 2.396-2.4h2.4a2.4 2.4 0 0 1 2.4 2.4v7.2h7.192a2.4 2.4 0 0 1 2.4 2.396Z" /></svg>

package/src/assets/images/developers/hands-with-phones.svg

@@ -0,0 +1,90 @@
+<svg width="580" height="390" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M265.25 148.95c0 5.76 11.43 7.08 11.43 16.15 0 0-19.59 24.63-85.76 24.63-5.5 0-10.44-4.67-10.44-10.44v-40.81c0-5.77 4.67-10.44 10.44-10.44h50.47c5.77 0 10.44 4.67 10.44 10.44l13.42 10.47z" fill="#F2C9AB"/>
+  <path d="M197.06 128.41l-16.87-3.77v39.27c0 7.05 5.73 12.78 12.79 12.78h23.75a38.85 38.85 0 002.29-13.16 39.04 39.04 0 00-21.96-35.12z" fill="#F2C9AB"/>
+  <path d="M268.01 155.57c-.02 20.8-30.18 20.77-35.47 20.77-5.35 0-35.34-.74-35.66-20.85L197 48.05A15.07 15.07 0 01212.1 33l41 .05c8.32 0 15.05 6.76 15.05 15.08l-.12 107.44z" fill="#000"/>
+  <path d="M262.66 147.06l-60.7-.07.12-100.41 60.7.06-.12 100.42z" fill="#F47D2A"/>
+  <path d="M237.79 158.25a5.32 5.32 0 11-10.65 0 5.32 5.32 0 0110.65 0z" fill="#CDCFCF"/>
+  <path d="M188.64 133.62a8.45 8.45 0 010-16.9h23.95a8.45 8.45 0 018.45 8.45 8.45 8.45 0 01-8.45 8.45h-23.95zm71.06 34.07a7.95 7.95 0 110-15.9h11.6a7.95 7.95 0 010 15.9h-11.6zm0-16.97a7.95 7.95 0 01-7.95-7.95 7.95 7.95 0 017.95-7.95h11.6a7.95 7.95 0 017.95 7.95 7.94 7.94 0 01-7.95 7.95h-11.6zm0-18.1a7.94 7.94 0 110-15.9h11.6a7.95 7.95 0 010 15.9h-11.6z" fill="#F2C9AB"/>
+  <path d="M244.23 85.69l-22.3.02c-.93 0-1.68-.75-1.68-1.67a1.67 1.67 0 011.67-1.67l22.3-.03a1.67 1.67 0 110 3.35zm-22.31-9.15l22.3-.02a1.67 1.67 0 010 3.34l-22.3.03a1.67 1.67 0 010-3.35zm-.01-5.82l22.3-.03c.92 0 1.67.75 1.67 1.68a1.67 1.67 0 01-1.66 1.67l-22.3.02a1.67 1.67 0 11-.01-3.34zm31.8 7.78a20.64 20.64 0 10-20.62 20.66 20.84 20.84 0 004.1-.42c3.84 2.85 10.08 7.44 10.28 7.4v-.01c-.1-.25-2.02-6-3.4-10.15a20.61 20.61 0 009.63-17.48z" fill="#fff"/>
+  <path d="M262.76 120.12H258a3.42 3.42 0 00-3.42 3.42v4.1a3.42 3.42 0 003.42 3.42h4.76v-10.94zm-54.28 11.02h5.27a3.8 3.8 0 003.8-3.8v-4.56a3.8 3.8 0 00-3.8-3.8h-5.27v12.16zm54.28 5.95H258a3.42 3.42 0 00-3.42 3.42v4.1a3.42 3.42 0 003.42 3.42h4.76V137.1zm0 18.1H258a3.42 3.42 0 00-3.42 3.42v4.1a3.42 3.42 0 003.42 3.43h4.76v-10.95zm-71.4 55.97c10.25 1.04 17.28 5.3 27.9 4.67 6.1-.36 15.77-1.38 21.7-2.28l-2.16-35.73-49.27 2.96 1.83 30.38zm68.34-95.52a7.95 7.95 0 010-15.89h11.6a7.95 7.95 0 010 15.9h-11.6z" fill="#F2C9AB"/>
+  <path d="M262.76 102.02H258a3.42 3.42 0 00-3.42 3.41v4.11a3.42 3.42 0 003.42 3.42h4.76v-10.95z" fill="#F2C9AB"/>
+  <path d="M243.66 197.05h-55.83v16.55h55.83v-16.55z" fill="#453594"/>
+  <path d="M252.88 389.82v-170c0-4.46-6.25-8.06-13.97-8.06h-45.03c-7.72 0-13.97 3.6-13.97 8.05v170h72.97z" fill="#453594"/>
+  <path d="M128.46 179.72a7.95 7.95 0 01-4.54-15.23l11.13-3.3a7.94 7.94 0 019.88 5.34 7.94 7.94 0 01-5.35 9.88l-11.12 3.31zm0 19.24a7.95 7.95 0 01-9.88-5.35 7.95 7.95 0 015.34-9.88l11.13-3.32a7.95 7.95 0 019.88 5.35 7.94 7.94 0 01-5.35 9.88l-11.12 3.32zm0 18.1a7.95 7.95 0 11-4.54-15.23l11.13-3.32a7.94 7.94 0 014.53 15.24l-11.12 3.3zm0 18.1a7.95 7.95 0 01-4.54-15.23l11.13-3.31a7.94 7.94 0 019.88 5.35 7.94 7.94 0 01-5.35 9.88l-11.12 3.31z" fill="#F2C9AB"/>
+  <path d="M114.78 220.23c0 5.76 11.43 7.07 11.43 16.14 0 0-19.6 24.64-85.77 24.64-5.5 0-10.44-4.67-10.44-10.44v-40.81c0-5.77 4.68-10.44 10.44-10.44h50.48c5.76 0 10.43 4.67 10.43 10.44l13.43 10.47z" fill="#F2C9AB"/>
+  <path d="M46.86 199.69L30 195.92v39.26c0 7.06 5.72 12.78 12.78 12.78h23.75a38.85 38.85 0 002.29-13.15 39.03 39.03 0 00-21.96-35.12z" fill="#F2C9AB"/>
+  <path d="M46.9 200.64a8.45 8.45 0 01-8.45 8.44 8.45 8.45 0 01-8.45-8.44v-37a8.45 8.45 0 1116.9 0v37z" fill="#F2C9AB"/>
+  <path d="M44.42 167.66v-5.28c0-2.1-1.7-3.8-3.8-3.8h-4.56a3.8 3.8 0 00-3.8 3.8v5.28h12.16zm-3.26 114.78c10.25 1.04 17.28 5.3 27.9 4.67 6.1-.36 15.77-1.38 21.7-2.29L88.6 249.1l-49.28 2.96 1.83 30.38z" fill="#F2C9AB"/>
+  <path d="M93.19 268.33H37.36v121.49h55.83v-121.5z" fill="#F47D2A"/>
+  <path d="M130.07 100.88H46.7v140.87h83.38V100.88z" fill="#000"/>
+  <path d="M126.22 109.94H50.93v113.33h75.29V109.93z" fill="#fff"/>
+  <path d="M83.9 236.41h9.22v-9.22H83.9v9.22zm9.94.73H83.17v-10.67h10.67v10.67z" fill="#F47D2A"/>
+  <path d="M313.24 229.5a7.95 7.95 0 104.54-15.23l-11.12-3.3a7.95 7.95 0 00-4.54 15.22l11.12 3.32zm0 19.24a7.95 7.95 0 104.54-15.24l-11.12-3.3a7.94 7.94 0 00-9.88 5.34 7.94 7.94 0 005.34 9.88l11.12 3.32z" fill="#674944"/>
+  <path d="M315.11 243.16s.1 24.64 66.27 24.64c5.49 0 10.44-4.68 10.44-10.44v-40.81c0-5.77-4.68-10.45-10.44-10.45H330.9c-5.77 0-15.79 28-15.79 37.06z" fill="#674944"/>
+  <path d="M374.97 206.48l16.86-3.77v39.26c0 7.06-5.71 12.78-12.77 12.78H355.3a38.84 38.84 0 01-2.28-13.15 39.03 39.03 0 0121.95-35.12z" fill="#674944"/>
+  <path d="M374.79 207.42a8.45 8.45 0 008.44 8.45 8.45 8.45 0 008.45-8.45v-37a8.45 8.45 0 00-8.44-8.44 8.45 8.45 0 00-8.45 8.45v37z" fill="#674944"/>
+  <path d="M377.62 174.45v-5.28c0-2.1 1.7-3.8 3.8-3.8h4.56a3.8 3.8 0 013.8 3.8v5.28h-12.16zm2.93 114.78c-10.25 1.04-17.28 5.3-27.9 4.67-6.1-.36-15.77-1.38-21.7-2.29l2.15-35.73 49.28 2.97-1.83 30.38z" fill="#674944"/>
+  <path d="M384.24 273.99H328.4v115.83h55.83V273.99z" fill="#EDADCE"/>
+  <path d="M360.09 159.72h-35.93v9.27h35.93v-9.27z" fill="#505455"/>
+  <path d="M309.73 157.84a3.76 3.76 0 003.77 3.77h56.93a3.76 3.76 0 003.76-3.77V69.57a3.76 3.76 0 00-3.75-3.76H313.5a3.76 3.76 0 00-3.77 3.76v88.27z" fill="#000"/>
+  <path d="M369.72 74.86h-55.18v74.18h55.18V74.86z" fill="#fff"/>
+  <path d="M309.73 259.67a3.76 3.76 0 003.77 3.76h56.93a3.76 3.76 0 003.76-3.76V171.4a3.76 3.76 0 00-3.75-3.77H313.5a3.76 3.76 0 00-3.77 3.77v88.27z" fill="#000"/>
+  <path d="M368.2 175.56h-10.66v11.12h10.65v-11.12zm-13.86 0h-10.66v11.12h10.66v-11.12zm-14.15 0h-10.65v11.12h10.65v-11.12zm-13.86 0h-10.65v11.12h10.65v-11.12zm41.87 14.7h-10.66v11.13h10.65v-11.13zm-13.86 0h-10.66v11.13h10.66v-11.13zm-14.15 0h-10.65v11.13h10.65v-11.13zm-13.86 0h-10.65v11.13h10.65v-11.13zm41.87 14.71h-10.66v11.13h10.65v-11.13zm-13.86 0h-10.66v11.13h10.66v-11.13zm-14.15 0h-10.65v11.13h10.65v-11.13zm-13.86 0h-10.65v11.13h10.65v-11.13zm41.87 14.7h-10.66v11.14h10.65v-11.13zm-13.86 0h-10.66v11.14h10.66v-11.13zm-14.15 0h-10.65v11.14h10.65v-11.13zm-13.86 0h-10.65v11.14h10.65v-11.13zm41.87 14.72h-10.66v11.12h10.65V234.4zm-13.86 0h-10.66v11.12h10.66V234.4zm-14.15 0h-10.65v11.12h10.65V234.4zm-13.86 0h-10.65v11.12h10.65V234.4z" fill="#CDCFCF"/>
+  <path d="M317.15 193a7.95 7.95 0 004.54-15.23l-17.58-5.28a7.94 7.94 0 00-4.54 15.23l17.58 5.28z" fill="#674944"/>
+  <path d="M317.78 180.08l4.54 1.4a3.42 3.42 0 012.26 4.28l-1.22 3.93a3.42 3.42 0 01-4.28 2.25l-4.54-1.4 3.24-10.46zm-4.54 31.32a7.95 7.95 0 009.89-5.35 7.95 7.95 0 00-5.35-9.88l-11.12-3.31a7.95 7.95 0 00-9.88 5.35 7.94 7.94 0 005.34 9.88l11.12 3.31z" fill="#674944"/>
+  <path d="M314.1 198.18l4.55 1.4a3.42 3.42 0 012.26 4.29l-1.22 3.92a3.42 3.42 0 01-4.28 2.25l-4.54-1.4 3.24-10.46z" fill="#674944"/>
+  <path d="M97.95 172.43l.8-.1a12.94 12.94 0 00-12.88-11.48c-6.6 0-12.14 4.94-12.87 11.49l.79.09a12.14 12.14 0 0112.08-10.79c6.2 0 11.4 4.64 12.08 10.79z" fill="#838789"/>
+  <path d="M97.04 172.62a1.5 1.5 0 002.99-.19 1.5 1.5 0 10-2.99.19zm-22.19 0a1.5 1.5 0 01-2.99-.19 1.5 1.5 0 011.59-1.4 1.5 1.5 0 011.4 1.59z" fill="#838789"/>
+  <path d="M105.53 169.9h-38.2v43.27h38.2V169.9z" fill="#EDADCE"/>
+  <path d="M110.05 169.9h-38.2v43.27h38.2V169.9z" fill="#E38BBA"/>
+  <path d="M102.76 172.43l.79-.1a12.94 12.94 0 00-12.88-11.48c-6.6 0-12.13 4.94-12.87 11.49l.8.09a12.15 12.15 0 0112.08-10.79c6.2 0 11.39 4.64 12.08 10.79z" fill="#838789"/>
+  <path d="M101.56 172.62a1.5 1.5 0 001.59 1.4 1.5 1.5 0 10-1.59-1.4zm-21.9 0a1.5 1.5 0 11-2.99-.19 1.5 1.5 0 011.59-1.4 1.5 1.5 0 011.4 1.59z" fill="#838789"/>
+  <path d="M101.42 182.34H80.35v16.62h21.07v-16.62z" fill="#fff"/>
+  <path d="M99.94 183.47h-1.2v14.17h1.2v-14.16zm-5.65 0h-1.22v14.17h1.22v-14.16zm3.58 0h-.55v14.17h.56v-14.16zm-2.26 0h-.56v14.17h.56v-14.16zm-6.22 0h-.56v14.17h.56v-14.16zm-7.08 0h-.55v14.17h.55v-14.16zm5.85 0h-.74v14.17h.74v-14.16zm8.63 0h-.33v14.17h.33v-14.16zm-6.5 0h-.33v14.17h.32v-14.16zm-4.8 0h-.33v14.17h.32v-14.16zm1 0h-.2v14.17h.2v-14.16zm-2.26 0h-.2v14.17h.2v-14.16zm8.32 0h-.33v14.17h.33v-14.16zm-1.13 0h-.33v14.17h.33v-14.16zm-7.92 0h-.33v14.17h.33v-14.16z" fill="#000"/>
+  <path d="M360.92 100.03a18.38 18.38 0 00-36.76 0c0 7.12 8.74 13.2 8.74 21.05a9.63 9.63 0 009.63 9.64 9.63 9.63 0 009.64-9.64c0-7.85 8.74-13.93 8.74-21.05z" fill="#F47D2A"/>
+  <path d="M345.48 95.37c0-5.92-3.29-11.07-8.14-13.72a18.39 18.39 0 00-13.18 17.63c0 4.07 2.85 7.8 5.3 11.71h.4c8.62 0 15.62-6.99 15.62-15.62z" fill="#CDCFCF"/>
+  <path d="M339.8 123.94c-.09-15.9-6.24-22.66-6.3-22.73l.34-.33c.07.07 6.35 6.96 6.43 23.06h-.48zm5.49 0h-.48c.08-16.1 6.36-22.99 6.43-23.06l.34.33c-.06.07-6.21 6.84-6.3 22.73z" fill="#505455"/>
+  <path d="M335.83 102.85a1.86 1.86 0 01-1.49-.74l.38-.3c.27.36.68.56 1.1.56.79 0 1.42-.67 1.42-1.49h.48c0 1.09-.85 1.97-1.9 1.97z" fill="#505455"/>
+  <path d="M339.35 102.85c-1.04 0-1.9-.88-1.9-1.97h.48c0 .82.64 1.5 1.42 1.5.79 0 1.42-.68 1.42-1.5h.48c0 1.09-.85 1.97-1.9 1.97z" fill="#505455"/>
+  <path d="M342.75 102.85c-1.05 0-1.9-.88-1.9-1.97h.48c0 .82.63 1.5 1.42 1.5.78 0 1.42-.68 1.42-1.5h.47c0 1.09-.85 1.97-1.9 1.97z" fill="#505455"/>
+  <path d="M346.14 102.85c-1.05 0-1.9-.88-1.9-1.97h.48c0 .82.63 1.5 1.42 1.5.78 0 1.42-.68 1.42-1.5h.47c0 1.09-.85 1.97-1.9 1.97z" fill="#505455"/>
+  <path d="M349.54 102.85c-1.05 0-1.9-.88-1.9-1.97h.48c0 .82.63 1.5 1.42 1.5.45 0 .86-.23 1.13-.6l.4.27a1.88 1.88 0 01-1.53.8z" fill="#505455"/>
+  <path d="M346.68 140.31a1.85 1.85 0 01-1.85 1.85h-4.67a1.85 1.85 0 01-1.86-1.85v-2.5c0-1.02.83-1.85 1.86-1.85h4.67a1.85 1.85 0 011.85 1.85v2.5z" fill="#fff"/>
+  <path d="M332.93 122.38v12.2a4.62 4.62 0 004.66 4.57h9.99a4.62 4.62 0 004.65-4.57v-12.2h-19.3z" fill="#505455"/>
+  <path d="M352.23 122.38h-19.3v3.53h19.3v-3.53z" fill="#838789"/>
+  <path d="M337.12 91.1a2.66 2.66 0 11-5.33 0 2.67 2.67 0 115.33 0z" fill="#fff"/>
+  <path d="M41.32 129.17v11.47c0 6.06 5.32 10.98 11.89 10.98 6.56 0 11.88-4.92 11.88-10.98v-11.47H41.32z" fill="#EDADCE"/>
+  <path d="M64.8 129.17v11.47c0 6.06 5.32 10.98 11.88 10.98 6.57 0 11.89-4.92 11.89-10.98v-11.47H64.79z" fill="#E38BBA"/>
+  <path d="M88.27 129.17v11.47c0 6.06 5.32 10.98 11.88 10.98 6.57 0 11.9-4.92 11.9-10.98v-11.47H88.26z" fill="#EDADCE"/>
+  <path d="M111.75 129.17v11.47c0 6.06 5.31 10.98 11.88 10.98 6.57 0 11.9-4.92 11.9-10.98v-11.47h-23.78zm-46.63-.42l4.65-18.81h-19.1l-9.35 18.81h23.8z" fill="#E38BBA"/>
+  <path d="M88.6 128.75l-.04-18.81H69.48a31160.48 31160.48 0 01-4.69 18.81h23.8z" fill="#EDADCE"/>
+  <path d="M112.06 128.75l-4.68-18.81H88.3l-.03 18.81h23.79z" fill="#E38BBA"/>
+  <path d="M135.66 128.75l-9.36-18.81H107.2l4.65 18.81h23.8z" fill="#EDADCE"/>
+  <path d="M84.7 282.67a6.42 6.42 0 11-12.84 0 6.42 6.42 0 0112.83 0z" fill="#fff"/>
+  <path d="M524.58 222.31a7.95 7.95 0 01-4.54-15.23l11.13-3.3a7.94 7.94 0 019.88 5.34 7.94 7.94 0 01-5.35 9.88l-11.12 3.32zm0 19.24a7.95 7.95 0 01-9.88-5.35 7.95 7.95 0 015.34-9.88l11.13-3.31a7.95 7.95 0 019.88 5.35 7.94 7.94 0 01-5.35 9.88l-11.12 3.31zm0 18.1a7.95 7.95 0 01-4.54-15.23l11.13-3.31a7.95 7.95 0 019.88 5.35 7.95 7.95 0 01-5.35 9.88l-11.12 3.31zm0 18.1a7.95 7.95 0 01-4.54-15.23l11.13-3.3a7.94 7.94 0 019.88 5.34 7.94 7.94 0 01-5.35 9.88l-11.12 3.32z" fill="#F2C9AB"/>
+  <path d="M510.9 262.82c0 5.76 11.43 7.08 11.43 16.15 0 0-19.6 24.63-85.77 24.63-5.5 0-10.44-4.67-10.44-10.44v-40.81c0-5.77 4.67-10.44 10.44-10.44h50.47c5.77 0 10.44 4.67 10.44 10.44l13.43 10.47z" fill="#F2C9AB"/>
+  <path d="M442.98 242.28l-16.86-3.77v39.26c0 7.06 5.72 12.78 12.78 12.78h23.75a38.85 38.85 0 002.29-13.15 39.03 39.03 0 00-21.96-35.12z" fill="#F2C9AB"/>
+  <path d="M443.01 243.23a8.45 8.45 0 01-8.44 8.45 8.45 8.45 0 01-8.45-8.45v-37a8.45 8.45 0 1116.9 0v37z" fill="#F2C9AB"/>
+  <path d="M440.53 210.25v-5.27c0-2.1-1.7-3.8-3.8-3.8h-4.55a3.8 3.8 0 00-3.8 3.8v5.28h12.15zm-3.24 114.79c10.25 1.03 17.28 5.29 27.89 4.66 6.1-.36 15.78-1.38 21.7-2.28l-2.15-35.73-49.27 2.96 1.83 30.39z" fill="#F2C9AB"/>
+  <path d="M489.31 310.92h-55.83v78.9h55.83v-78.9z" fill="#4BB4E6"/>
+  <path d="M526.18 143.48H442.8v140.86h83.38V143.48z" fill="#000"/>
+  <path d="M522.33 152.53h-75.29v113.34h75.3V152.53z" fill="#fff"/>
+  <path d="M480.02 279h9.23v-9.22h-9.23v9.23zm9.95.73H479.3v-10.67h10.67v10.67z" fill="#F47D2A"/>
+  <path d="M494.07 215.02l.79-.09a12.94 12.94 0 00-12.88-11.49c-6.6 0-12.13 4.94-12.87 11.5l.8.08a12.14 12.14 0 0112.07-10.78c6.2 0 11.4 4.63 12.09 10.78z" fill="#838789"/>
+  <path d="M493.16 215.21a1.5 1.5 0 101.4-1.58 1.5 1.5 0 00-1.4 1.58zm-22.19 0a1.5 1.5 0 01-2.99-.18 1.5 1.5 0 011.59-1.4 1.5 1.5 0 011.4 1.58z" fill="#838789"/>
+  <path d="M501.65 212.5h-38.2v43.26h38.2V212.5z" fill="#EDADCE"/>
+  <path d="M506.17 212.5h-38.19v43.26h38.2V212.5z" fill="#E38BBA"/>
+  <path d="M498.87 215.02l.8-.09a12.94 12.94 0 00-12.88-11.49c-6.6 0-12.14 4.94-12.88 11.5l.8.08a12.14 12.14 0 0112.08-10.78c6.2 0 11.4 4.63 12.08 10.78z" fill="#838789"/>
+  <path d="M497.68 215.21a1.5 1.5 0 102.99-.18 1.5 1.5 0 00-2.99.18zm-21.9 0a1.5 1.5 0 01-1.6 1.4 1.5 1.5 0 01-1.4-1.58 1.5 1.5 0 011.6-1.4 1.5 1.5 0 011.4 1.58z" fill="#838789"/>
+  <path d="M497.54 224.94h-21.07v16.62h21.07v-16.62z" fill="#fff"/>
+  <path d="M496.07 226.07h-1.22v14.16h1.22v-14.16zm-5.66 0h-1.22v14.16h1.22v-14.16zm3.58 0h-.55v14.16h.55v-14.16zm-2.26 0h-.56v14.16h.56v-14.16zm-6.22 0h-.55v14.16h.55v-14.16zm-7.07 0h-.56v14.16h.56v-14.16zm5.84 0h-.74v14.16h.74v-14.16zm8.63 0h-.32v14.16h.32v-14.16zm-6.5 0h-.33v14.16h.33v-14.16zm-4.81 0h-.33v14.16h.33v-14.16zm1.01 0h-.2v14.16h.2v-14.16zm-2.26 0h-.2v14.16h.2v-14.16zm8.32 0h-.33v14.16h.33v-14.16zm-1.13 0h-.33v14.16h.33v-14.16zm-7.91 0h-.33v14.16h.33v-14.16z" fill="#000"/>
+  <path d="M437.43 171.76v11.48c0 6.06 5.32 10.97 11.89 10.97 6.56 0 11.89-4.91 11.89-10.97v-11.48h-23.78z" fill="#EDADCE"/>
+  <path d="M460.9 171.76v11.48c0 6.06 5.33 10.97 11.9 10.97 6.56 0 11.88-4.91 11.88-10.97v-11.48H460.9z" fill="#50BE87"/>
+  <path d="M484.39 171.76v11.48c0 6.06 5.32 10.97 11.88 10.97 6.57 0 11.9-4.91 11.9-10.97v-11.48h-23.78z" fill="#EDADCE"/>
+  <path d="M507.87 171.76v11.48c0 6.06 5.32 10.97 11.88 10.97 6.57 0 11.9-4.91 11.9-10.97v-11.48h-23.78zm-46.64-.42l4.65-18.81H446.8l-9.36 18.81h23.8z" fill="#50BE87"/>
+  <path d="M484.7 171.34l-.03-18.81H465.6a24625 24625 0 01-4.69 18.81h23.8z" fill="#EDADCE"/>
+  <path d="M508.18 171.34l-4.68-18.81h-19.08l-.03 18.81h23.79z" fill="#50BE87"/>
+  <path d="M531.79 171.34l-9.37-18.81h-19.08l4.64 18.81h23.8z" fill="#EDADCE"/>
+  <path d="M480.81 325.26a6.42 6.42 0 11-12.83 0 6.42 6.42 0 0112.83 0z" fill="#fff"/>
+  <path d="M344.74 287.67a3.5 3.5 0 11-7 0 3.5 3.5 0 117 0zm0 9.05a3.5 3.5 0 11-7 0 3.5 3.5 0 117 0zm0 10.18a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0z" fill="#E38BBA"/>
+</svg>

package/src/assets/logo/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"><path d="M0 0h50v50H0z" fill="#ff7900"/><g fill="#fff"><path d="M19.612 45.15c-.705.458-1.48.688-2.293.688-1.306 0-2.064-.864-2.064-2.028 0-1.553 1.428-2.38 4.374-2.717v-.388c0-.51-.388-.793-1.094-.793-.705 0-1.287.282-1.693.793L15.608 40c.653-.9 1.64-1.358 2.963-1.358 1.818 0 2.84.794 2.84 2.063v5.045H19.79l-.176-.6zm-2.575-1.464c0 .46.3.9.83.9.58 0 1.128-.247 1.692-.74v-1.64c-1.712.228-2.523.65-2.523 1.48zM22.84 38.995l1.516-.212.16.83c.863-.618 1.533-.953 2.398-.953 1.428 0 2.17.758 2.17 2.257v4.85h-1.835v-4.532c0-.847-.23-1.235-.883-1.235-.547 0-1.094.247-1.71.776v4.99H22.84v-6.77zM41.217 45.89c-2.046 0-3.28-1.322-3.28-3.615 0-2.31 1.234-3.633 3.245-3.633 2.01 0 3.21 1.27 3.21 3.545 0 .123-.018.247-.018.353h-4.64c.02 1.322.566 1.975 1.642 1.975.687 0 1.146-.282 1.57-.9l1.34.74c-.582 1.007-1.64 1.536-3.07 1.536zm1.376-4.532c0-.935-.53-1.48-1.394-1.48-.83 0-1.34.528-1.412 1.48h2.805zM6.155 45.96c-1.816 0-3.44-1.145-3.44-3.667s1.64-3.67 3.44-3.67c1.817 0 3.44 1.148 3.44 3.67 0 2.522-1.623 3.668-3.44 3.668zm0-5.8c-1.358 0-1.622 1.233-1.622 2.115 0 .9.247 2.117 1.622 2.117 1.376 0 1.623-1.235 1.623-2.117 0-.882-.265-2.116-1.623-2.116zM10.847 38.8h1.746v.812c.335-.44 1.146-.97 1.922-.97.07 0 .16 0 .23.018v1.71h-.09c-.793 0-1.674.124-1.94.74v4.622h-1.868v-6.93zM33.563 44.268c1.393-.018 1.5-1.428 1.5-2.346 0-1.093-.53-1.975-1.518-1.975-.653 0-1.393.476-1.393 2.046.017.864.07 2.275 1.41 2.275zm3.28-5.485v6.596c0 1.163-.088 3.068-3.404 3.103-1.377 0-2.63-.546-2.893-1.728l1.8-.282c.07.335.28.687 1.304.687.953 0 1.412-.458 1.412-1.534v-.81l-.018-.02c-.282.513-.74 1.006-1.8 1.006-1.62 0-2.89-1.128-2.89-3.474 0-2.328 1.32-3.633 2.803-3.633 1.393 0 1.905.635 2.028.97h-.017l.158-.83h1.517zM45.097 36.473h-.723v1.993h-.388v-1.993h-.723v-.3h1.816v.3zm2.998 1.993h-.388v-1.923h-.017l-.76 1.923h-.246l-.758-1.923h-.018v1.923h-.388v-2.293h.582l.688 1.746.67-1.747h.582v2.293z"/></g></svg>

package/src/components/Accordion/Accordion.mdx

@@ -0,0 +1,222 @@
+import { CodeBlock, ComponentDocs } from '@lighting-beetle/lighter-styleguide';
+import { loremIpsum } from 'lorem-ipsum';
+
+import { Preview } from '../../styleguide/';
+import BlockAction, {
+  BlockActionControl,
+  BlockActionIndicator,
+} from '../BlockAction';
+import Grid, { GridCol } from '../Grid';
+import Bar, { BarItem } from '../Bar';
+import Icon from '../Icon';
+import Card, { CardSection } from '../Card';
+
+import Accordion from './Accordion';
+import AccordionItem from './AccordionItem';
+
+export const AccordionHeader = ({ title, currentId, isActive }) => (
+  <BlockAction>
+    <Bar className="accordion__header">
+      <BarItem isFilling>
+        <Grid vAlign="middle">
+          <GridCol size={{ md: 6 }}>
+            <h3 className="mb-small" hasMdxLink={false}>
+              <BlockActionControl>
+                <button
+                  type="button"
+                  aria-expanded={isActive}
+                  className="accordion__button"
+                  aria-controls={`${currentId}-section`}
+                  id={currentId}
+                  data-accordion-toggle
+                >
+                  <span className="accordion__title">{title}</span>
+                </button>
+              </BlockActionControl>
+            </h3>
+            <p className="mb-none">{loremIpsum({ count: 1 })}</p>
+          </GridCol>
+          <GridCol size={{ md: 6 }}>
+            <p className="mb-none">{loremIpsum({ count: 1 })}</p>
+          </GridCol>
+        </Grid>
+      </BarItem>
+      <BarItem>
+        <BlockActionIndicator>
+          <Icon className="accordion__icon" name="chevron-down" size="medium" />
+        </BlockActionIndicator>
+      </BarItem>
+    </Bar>
+  </BlockAction>
+);
+
+# Accordion
+
+Accordion expands and collapses sections of content.
+
+<Preview>
+  <Accordion>
+    <AccordionItem title={loremIpsum({ count: 1 })}>
+      <p>{loremIpsum({ count: 3 })}</p>
+    </AccordionItem>
+    <AccordionItem title={loremIpsum({ count: 1 })}>
+      <p>{loremIpsum({ count: 3 })}</p>
+    </AccordionItem>
+    <AccordionItem title={loremIpsum({ count: 1 })}>
+      <p>{loremIpsum({ count: 3 })}</p>
+    </AccordionItem>
+  </Accordion>
+</Preview>
+
+## Custom heading level
+
+Accordion titles are rendered inside a `h3` element, which can be overriden.
+
+<Preview>
+  <Accordion headingLevel={2}>
+    <AccordionItem title={loremIpsum({ count: 1 })}>
+      <p>{loremIpsum({ count: 3 })}</p>
+    </AccordionItem>
+    <AccordionItem title={loremIpsum({ count: 1 })}>
+      <p>{loremIpsum({ count: 3 })}</p>
+    </AccordionItem>
+    <AccordionItem title={loremIpsum({ count: 1 })}>
+      <p>{loremIpsum({ count: 3 })}</p>
+    </AccordionItem>
+  </Accordion>
+</Preview>
+
+## Size
+
+### Default
+
+<Preview>
+  <Accordion>
+    <AccordionItem title={loremIpsum({ count: 1 })}>
+      <p>{loremIpsum({ count: 3 })}</p>
+    </AccordionItem>
+    <AccordionItem title={loremIpsum({ count: 1 })}>
+      <p>{loremIpsum({ count: 3 })}</p>
+    </AccordionItem>
+    <AccordionItem title={loremIpsum({ count: 1 })}>
+      <p>{loremIpsum({ count: 3 })}</p>
+    </AccordionItem>
+  </Accordion>
+</Preview>
+
+### Large
+
+<Preview>
+  <Accordion size="large">
+    <AccordionItem title={loremIpsum({ count: 1 })}>
+      <p>{loremIpsum({ count: 3 })}</p>
+    </AccordionItem>
+    <AccordionItem title={loremIpsum({ count: 1 })}>
+      <p>{loremIpsum({ count: 3 })}</p>
+    </AccordionItem>
+    <AccordionItem title={loremIpsum({ count: 1 })}>
+      <p>{loremIpsum({ count: 3 })}</p>
+    </AccordionItem>
+  </Accordion>
+</Preview>
+
+## Enclosed accordion
+
+Enclosed accordions are usually placed inside a [Card](/components/card)
+and labelled with a heading element in a separate CardSection.
+
+<Preview bgTheme="gray">
+  <Card>
+    <CardSection>
+      <h2>Enclosed accordion</h2>
+    </CardSection>
+    <Accordion isEnclosed>
+      <AccordionItem title={loremIpsum({ count: 1 })}>
+        <p>{loremIpsum({ count: 3 })}</p>
+      </AccordionItem>
+      <AccordionItem title={loremIpsum({ count: 1 })}>
+        <p>{loremIpsum({ count: 3 })}</p>
+      </AccordionItem>
+      <AccordionItem title={loremIpsum({ count: 1 })}>
+        <p>{loremIpsum({ count: 3 })}</p>
+      </AccordionItem>
+    </Accordion>
+  </Card>
+</Preview>
+
+## Advanced layout using [Block Action](/components/block-action)
+
+<Preview>
+  <Accordion size="large">
+    <AccordionItem
+      title={loremIpsum({ count: 1 })}
+      renderHeader={(title, currentId, isActive) => (
+        <AccordionHeader
+          title={title}
+          currentId={currentId}
+          isActive={isActive}
+        />
+      )}
+    >
+      <p>{loremIpsum({ count: 3 })}</p>
+    </AccordionItem>
+    <AccordionItem
+      title={loremIpsum({ count: 1 })}
+      renderHeader={(title, currentId, isActive) => (
+        <AccordionHeader
+          title={title}
+          currentId={currentId}
+          isActive={isActive}
+        />
+      )}
+    >
+      <p>{loremIpsum({ count: 3 })}</p>
+    </AccordionItem>
+    <AccordionItem
+      title={loremIpsum({ count: 1 })}
+      renderHeader={(title, currentId, isActive) => (
+        <AccordionHeader
+          title={title}
+          currentId={currentId}
+          isActive={isActive}
+        />
+      )}
+    >
+      <p>{loremIpsum({ count: 3 })}</p>
+    </AccordionItem>
+  </Accordion>
+</Preview>
+
+## Props
+
+<ComponentDocs title="<Accordion />" component={Accordion} />
+
+<ComponentDocs title="<AccordionItem />" component={AccordionItem} />
+
+## JS module reference
+
+All elements with `[data-accordion]` will be initialised automatically.
+
+### Custom initialization
+
+```javascript
+const myAccordion = new window.ODS.modules.Accordion(
+  document.getElementById('my-accordion'),
+  config
+);
+```
+
+#### Default config
+
+```javascript
+{
+  buttonSelector: '[data-accordion-toggle]', // element for activating/deactivating accordion sections. also enables roving tabindex navigation.
+}
+```
+
+## Accessibility
+
+Accordion is built according to [WAI-ARIA Authoring Practices 1.1](https://www.w3.org/TR/wai-aria-practices/#accordion).
+Current implementation differs in markup from WAI-ARIA Authoring Practices 1.1 recommended markup. We used unoredered list instead of description list. This shoud not have any implications on accessibility or semantics.
+
+Accordion.static.js provides keyboard navigation via roving tabindex.

package/src/components/Accordion/Accordion.static.ts

@@ -0,0 +1,104 @@
+import { RovingTabindex } from '../../utils/keyboard';
+import toggle from '../../scripts/modules/toggleUtil';
+
+interface AccordionConfig {
+  buttonSelector: string;
+}
+
+const defaultConfig: AccordionConfig = {
+  buttonSelector: '[data-accordion-toggle]',
+};
+
+export default class Accordion {
+  private element: HTMLElement;
+  private config: AccordionConfig;
+  private rovingTabindex!: RovingTabindex;
+  private buttons!: HTMLElement[];
+
+  constructor(element: HTMLElement, config?: Partial<AccordionConfig>) {
+    this.element = element;
+    this.config = { ...defaultConfig, ...config };
+
+    this.onFocus = this.onFocus.bind(this);
+    this.onClick = this.onClick.bind(this);
+
+    (this.element as any).ODS_Accordion = this;
+
+    this.init();
+
+    return this;
+  }
+
+  private onFocus(e: FocusEvent): void {
+    if (!this.rovingTabindex.isActive) {
+      this.rovingTabindex.init();
+    }
+
+    const button = e.currentTarget as HTMLElement;
+
+    if (
+      window.location.hash.substring(1) === button.getAttribute('id') &&
+      button.getAttribute('aria-expanded') === 'false'
+    ) {
+      button.click();
+    }
+  }
+
+  private init(): void {
+    this.buttons = Array.from(
+      this.element.querySelectorAll(this.config.buttonSelector)
+    );
+
+    if (!this.rovingTabindex) {
+      this.rovingTabindex = new RovingTabindex(this.buttons, {
+        direction: 'vertical',
+      });
+    } else {
+      this.rovingTabindex.update(this.buttons);
+    }
+
+    this.buttons.forEach(button => {
+      button.addEventListener('focus', this.onFocus);
+
+      // only add click events when there are no toggle actions defined
+      if (!button.getAttribute('data-toggle')) {
+        button.addEventListener('click', this.onClick);
+      }
+    });
+  }
+
+  private onClick(e: Event): void {
+    const button = e.currentTarget as HTMLElement;
+    const accordionSection = this.element.querySelector(
+      `#${button.getAttribute('aria-controls')}`
+    );
+
+    toggle({
+      element: button,
+      attribute: 'aria-expanded',
+    });
+
+    toggle({
+      element: accordionSection,
+      attribute: 'hidden',
+    });
+  }
+
+  destroy(): void {
+    this.rovingTabindex.destroy();
+
+    this.buttons.forEach(button => {
+      button.removeEventListener('focus', this.onFocus);
+      button.removeEventListener('click', this.onClick);
+    });
+  }
+
+  update(): void {
+    this.destroy();
+    this.init();
+  }
+
+  static getInstance(el: HTMLElement): Accordion | null {
+    return el && (el as any).ODS_Accordion ? (el as any).ODS_Accordion : null;
+  }
+}

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import React, { useEffect, useRef, ReactNode } from 'react';
+import cx from 'classnames';
+
+import AccordionStatic from './Accordion.static';
+import HeadingContext from './HeadingContext';
+
+const CLASS_ROOT = 'accordion';
+
+interface AccordionProps {
+  /** Heading level from 1 to 6 */
+  headingLevel?: number;
+  /** Accordion is enclosed in another component */
+  isEnclosed?: boolean;
+  /** Adjustable spacing */
+  size?: 'large';
+  /** Additional CSS classes */
+  className?: string;
+  /** Accordion content */
+  children: ReactNode;
+  /** Additional HTML attributes */
+  [key: string]: any;
+}
+
+const Accordion: React.FC<AccordionProps> = ({
+  className,
+  children,
+  headingLevel = 3,
+  size,
+  isEnclosed,
+  ...other
+}) => {
+  const accordionRef = useRef<HTMLUListElement>(null);
+
+  const classes = cx(
+    CLASS_ROOT,
+    {
+      [`${CLASS_ROOT}--${size}`]: size,
+      [`${CLASS_ROOT}--enclosed`]: isEnclosed,
+    },
+    className
+  );
+
+  useEffect(() => {
+    if (accordionRef.current) {
+      const accordion = new AccordionStatic(accordionRef.current);
+      return () => {
+        accordion.destroy();
+      };
+    }
+  }, []);
+
+  return (
+    <HeadingContext.Provider value={headingLevel}>
+      <ul
+        data-accordion
+        className={classes}
+        ref={accordionRef}
+        {...other}
+      >
+        {children}
+      </ul>
+    </HeadingContext.Provider>
+  );
+};
+
+Accordion.displayName = 'Accordion';
+
+export default Accordion;

package/src/components/Accordion/AccordionHeader.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import React from 'react';
+import cx from 'classnames';
+
+import { Icon } from '../Icon';
+
+import HeadingContext from './HeadingContext';
+
+const CLASS_ROOT = 'accordion';
+
+interface AccordionHeaderProps {
+  /** Header id */
+  id: string;
+  /** Active state */
+  isActive?: boolean;
+  /** Header title */
+  title: string;
+  /** Additional CSS classes */
+  className?: string;
+  /** Additional HTML attributes */
+  [key: string]: any;
+}
+
+const AccordionHeader: React.FC<AccordionHeaderProps> = ({ 
+  className, 
+  title, 
+  id, 
+  isActive, 
+  ...other 
+}) => {
+  const headingLevel = React.useContext(HeadingContext);
+  const Heading = `h${headingLevel || 3}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+  return (
+    <Heading className={cx(`${CLASS_ROOT}__header`, className)}>
+      <button
+        type="button"
+        aria-expanded={isActive}
+        className={`${CLASS_ROOT}__button`}
+        aria-controls={`${id}-section`}
+        id={id}
+        data-accordion-toggle
+        {...other}
+      >
+        <span className="accordion__title">{title}</span>
+        <Icon
+          className={`${CLASS_ROOT}__icon`}
+          name="chevron-down"
+          size="medium"
+        />
+      </button>
+    </Heading>
+  );
+};
+
+AccordionHeader.displayName = 'AccordionHeader';
+
+export default AccordionHeader;