@windstream/react-shared-components 0.0.1

package/dist/styles.css

@@ -0,0 +1,3 @@
+*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*
+! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
+*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:var(--win-site-font),ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}*{box-sizing:border-box}html{font-family:var(--win-site-font)}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1200px){.container{max-width:1200px}}@media (min-width:1280px){.container{max-width:1280px}}.heading1{font-size:3rem;font-weight:400;line-height:3rem}.heading2{font-size:2.25rem;font-weight:400;line-height:2.5rem}.heading3{font-size:1.875rem;font-weight:400;line-height:2.375rem}.heading4{font-size:1.5rem;font-weight:400;line-height:1.75rem}.heading5{font-family:Figtree,sans-serif;font-size:1.875rem;font-weight:600;line-height:2.25rem}.heading6{font-weight:600}.heading6,.subheading1{font-family:Figtree,sans-serif;font-size:1.5rem;line-height:2rem}.subheading1{font-weight:400}.subheading2{font-family:Figtree,sans-serif;font-size:1.5rem;font-weight:700;line-height:2rem}.subheading3{font-weight:400}.subheading3,.subheading4{font-family:Figtree,sans-serif;font-size:1.125rem;line-height:1.75rem}.subheading4{font-weight:700}.subheading5{font-size:3.75rem;line-height:3.75rem}.subheading5,.subheading6{font-family:Figtree,sans-serif;font-weight:300}.subheading6{font-size:3rem;line-height:3rem}.body1{font-size:1.25rem}.body1,.body2{font-family:Figtree,sans-serif;font-weight:400;line-height:1.75rem}.body2{font-size:1.125rem}.body3{font-size:1rem;line-height:1.5rem}.body3,.footnote{font-family:Figtree,sans-serif;font-weight:400}.footnote{font-size:.875rem;line-height:1.25rem}.micro{font-family:Figtree,sans-serif;font-size:.75rem;font-weight:400;line-height:1rem}.label1{font-size:1.25rem}.label1,.label2{font-family:Figtree,sans-serif;font-weight:600;line-height:1.75rem}.label2{font-size:1.125rem}.label3{font-size:1rem;line-height:1.5rem}.label3,.label4{font-family:Figtree,sans-serif;font-weight:600}.label4{font-size:.875rem;line-height:1.25rem}.label5{font-size:1.25rem}.btn-small,.label5{font-weight:700;line-height:1.75rem}.btn-small{font-size:1.125rem;height:3rem}.btn-medium{height:3.5rem}.btn-large,.btn-medium{font-size:1.25rem;font-weight:700;line-height:1.75rem}.btn-large{height:4rem}.btn-x-large{font-size:1.875rem;font-weight:400;height:5.5rem;line-height:2.375rem}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:.3}}.animate-blink{animation:blink 1.5s ease-in-out infinite}.sr-only{clip:rect(0,0,0,0)!important;border-width:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.pointer-events-none{pointer-events:none!important}.pointer-events-auto{pointer-events:auto!important}.visible{visibility:visible!important}.collapse{visibility:collapse!important}.fixed{position:fixed!important}.absolute{position:absolute!important}.relative{position:relative!important}.inset-0{inset:0!important}.inset-\[10\%\]{inset:10%!important}.inset-\[15\%\]{inset:15%!important}.inset-\[5\%\]{inset:5%!important}.-left-4{left:-1rem!important}.-left-6{left:-1.5rem!important}.-left-8{left:-2rem!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.right-0{right:0!important}.top-0{top:0!important}.top-1\/2{top:50%!important}.top-\[18\%\]{top:18%!important}.top-auto{top:auto!important}.top-full{top:100%!important}.z-20{z-index:20!important}.z-80{z-index:80!important}.float-right{float:right!important}.m-0{margin:0!important}.mx-1{margin-left:.25rem!important;margin-right:.25rem!important}.mx-auto{margin-left:auto!important;margin-right:auto!important}.-mb-1{margin-bottom:-.25rem!important}.mb-1{margin-bottom:.25rem!important}.mb-2{margin-bottom:.5rem!important}.mb-3{margin-bottom:.75rem!important}.mb-4{margin-bottom:1rem!important}.ml-2{margin-left:.5rem!important}.mr-1{margin-right:.25rem!important}.mr-2{margin-right:.5rem!important}.mr-3{margin-right:.75rem!important}.mt-0\.5{margin-top:.125rem!important}.mt-1{margin-top:.25rem!important}.mt-2{margin-top:.5rem!important}.mt-3{margin-top:.75rem!important}.mt-4{margin-top:1rem!important}.block{display:block!important}.inline-block{display:inline-block!important}.inline{display:inline!important}.flex{display:flex!important}.inline-flex{display:inline-flex!important}.grid{display:grid!important}.contents{display:contents!important}.list-item{display:list-item!important}.hidden{display:none!important}.h-0\.5{height:.125rem!important}.h-1{height:.25rem!important}.h-10{height:2.5rem!important}.h-12{height:3rem!important}.h-14{height:3.5rem!important}.h-2{height:.5rem!important}.h-3{height:.75rem!important}.h-32{height:8rem!important}.h-4{height:1rem!important}.h-5{height:1.25rem!important}.h-6{height:1.5rem!important}.h-8{height:2rem!important}.h-\[0\.875rem\]{height:.875rem!important}.h-\[1px\]{height:1px!important}.h-\[48px\]{height:48px!important}.h-\[56px\]{height:56px!important}.h-\[60px\]{height:60px!important}.h-full{height:100%!important}.min-h-\[40px\]{min-height:40px!important}.min-h-fit{min-height:-moz-fit-content!important;min-height:fit-content!important}.w-1\/2{width:50%!important}.w-12{width:3rem!important}.w-2{width:.5rem!important}.w-3{width:.75rem!important}.w-3\/4{width:75%!important}.w-4{width:1rem!important}.w-5{width:1.25rem!important}.w-6{width:1.5rem!important}.w-64{width:16rem!important}.w-8{width:2rem!important}.w-80{width:20rem!important}.w-\[0\.875rem\]{width:.875rem!important}.w-\[640px\]{width:640px!important}.w-\[calc\(100\%-30px\)\]{width:calc(100% - 30px)!important}.w-full{width:100%!important}.min-w-\[150px\]{min-width:150px!important}.max-w-\[calc\(100vw-30px\)\]{max-width:calc(100vw - 30px)!important}.max-w-none{max-width:none!important}.flex-1{flex:1 1 0%!important}.flex-shrink-0{flex-shrink:0!important}.grow{flex-grow:1!important}.-translate-y-1\/2{--tw-translate-y:-50%!important}.-translate-y-1\/2,.translate-y-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.translate-y-0{--tw-translate-y:0px!important}.translate-y-\[-18px\]{--tw-translate-y:-18px!important}.translate-y-\[-18px\],.translate-y-\[calc\(50vh-50\%\)\]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.translate-y-\[calc\(50vh-50\%\)\]{--tw-translate-y:calc(50vh - 50%)!important}.translate-y-full{--tw-translate-y:100%!important}.rotate-0,.translate-y-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-180{--tw-rotate:180deg!important}.rotate-180,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite!important}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite!important}.cursor-help{cursor:help!important}.cursor-not-allowed{cursor:not-allowed!important}.cursor-pointer{cursor:pointer!important}.list-decimal{list-style-type:decimal!important}.list-disc{list-style-type:disc!important}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))!important}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))!important}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))!important}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))!important}.flex-row{flex-direction:row!important}.flex-col{flex-direction:column!important}.flex-wrap{flex-wrap:wrap!important}.items-start{align-items:flex-start!important}.items-center{align-items:center!important}.justify-end{justify-content:flex-end!important}.justify-center{justify-content:center!important}.justify-between{justify-content:space-between!important}.gap-10{gap:2.5rem!important}.gap-2{gap:.5rem!important}.gap-3{gap:.75rem!important}.gap-4{gap:1rem!important}.gap-5{gap:1.25rem!important}.gap-6{gap:1.5rem!important}.gap-8{gap:2rem!important}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0!important;margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))!important;margin-right:calc(.5rem*var(--tw-space-x-reverse))!important}.space-y-0>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0!important;margin-bottom:calc(0px*var(--tw-space-y-reverse))!important;margin-top:calc(0px*(1 - var(--tw-space-y-reverse)))!important}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0!important;margin-bottom:calc(.25rem*var(--tw-space-y-reverse))!important;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)))!important}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0!important;margin-bottom:calc(.5rem*var(--tw-space-y-reverse))!important;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)))!important}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0!important;margin-bottom:calc(.75rem*var(--tw-space-y-reverse))!important;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)))!important}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0!important;margin-bottom:calc(1rem*var(--tw-space-y-reverse))!important;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)))!important}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0!important;margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))!important;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)))!important}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0!important;margin-bottom:calc(2rem*var(--tw-space-y-reverse))!important;margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)))!important}.overflow-auto{overflow:auto!important}.overflow-hidden{overflow:hidden!important}.whitespace-normal{white-space:normal!important}.rounded{border-radius:.25rem!important}.rounded-2xl{border-radius:1rem!important}.rounded-3xl{border-radius:1.5rem!important}.rounded-\[4px\]{border-radius:4px!important}.rounded-full{border-radius:9999px!important}.rounded-lg{border-radius:.5rem!important}.rounded-none{border-radius:0!important}.rounded-xl{border-radius:.75rem!important}.rounded-t-lg{border-top-left-radius:.5rem!important;border-top-right-radius:.5rem!important}.border{border-width:1px!important}.border-2{border-width:2px!important}.border-\[0\.727px\]{border-width:.727px!important}.border-\[1px\]{border-width:1px!important}.border-b{border-bottom-width:1px!important}.border-t-0{border-top-width:0!important}.border-solid{border-style:solid!important}.border-border{--tw-border-opacity:1!important;border-color:rgb(230 230 230/var(--tw-border-opacity,1))!important}.border-border-brand{--tw-border-opacity:1!important;border-color:rgb(36 167 106/var(--tw-border-opacity,1))!important}.border-border-critical-secondary{--tw-border-opacity:1!important;border-color:rgb(240 167 167/var(--tw-border-opacity,1))!important}.border-border-secondary-on-bg-fill{--tw-border-opacity:1!important;border-color:rgb(148 148 148/var(--tw-border-opacity,1))!important}.border-gray-200{--tw-border-opacity:1!important;border-color:rgb(229 231 235/var(--tw-border-opacity,1))!important}.border-input-border{--tw-border-opacity:1!important;border-color:rgb(206 206 206/var(--tw-border-opacity,1))!important}.border-input-border-critical{--tw-border-opacity:1!important;border-color:rgb(212 0 0/var(--tw-border-opacity,1))!important}.border-input-border-hover{--tw-border-opacity:1!important;border-color:rgb(0 0 45/var(--tw-border-opacity,1))!important}.border-input-border-selected{--tw-border-opacity:1!important;border-color:rgb(36 167 106/var(--tw-border-opacity,1))!important}.bg-bg{background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.bg-bg,.bg-bg-fill-brand{--tw-bg-opacity:1!important}.bg-bg-fill-brand{background-color:rgb(36 167 106/var(--tw-bg-opacity,1))!important}.bg-bg-fill-brand-disabled{--tw-bg-opacity:1!important;background-color:rgb(206 206 206/var(--tw-bg-opacity,1))!important}.bg-bg-fill-critical-secondary{--tw-bg-opacity:1!important;background-color:rgb(253 245 245/var(--tw-bg-opacity,1))!important}.bg-bg-surface-hover{--tw-bg-opacity:1!important;background-color:rgb(247 247 248/var(--tw-bg-opacity,1))!important}.bg-bg-surface-inverse{--tw-bg-opacity:1!important;background-color:rgb(25 26 84/var(--tw-bg-opacity,1))!important}.bg-bg-surface-tertiary-active{--tw-bg-opacity:1!important;background-color:rgb(230 230 230/var(--tw-bg-opacity,1))!important}.bg-black\/50{background-color:rgba(0,0,0,.5)!important}.bg-blue-500{background-color:rgb(59 130 246/var(--tw-bg-opacity,1))!important}.bg-blue-500,.bg-blue-600{--tw-bg-opacity:1!important}.bg-blue-600{background-color:rgb(37 99 235/var(--tw-bg-opacity,1))!important}.bg-border-brand{--tw-bg-opacity:1!important;background-color:rgb(36 167 106/var(--tw-bg-opacity,1))!important}.bg-gray-100{background-color:rgb(243 244 246/var(--tw-bg-opacity,1))!important}.bg-gray-100,.bg-gray-200{--tw-bg-opacity:1!important}.bg-gray-200{background-color:rgb(229 231 235/var(--tw-bg-opacity,1))!important}.bg-gray-50{background-color:rgb(249 250 251/var(--tw-bg-opacity,1))!important}.bg-gray-50,.bg-gray-600{--tw-bg-opacity:1!important}.bg-gray-600{background-color:rgb(75 85 99/var(--tw-bg-opacity,1))!important}.bg-green-100{--tw-bg-opacity:1!important;background-color:rgb(220 252 231/var(--tw-bg-opacity,1))!important}.bg-green-500{--tw-bg-opacity:1!important;background-color:rgb(34 197 94/var(--tw-bg-opacity,1))!important}.bg-green-600{--tw-bg-opacity:1!important;background-color:rgb(22 163 74/var(--tw-bg-opacity,1))!important}.bg-icon-brand{--tw-bg-opacity:1!important;background-color:rgb(36 167 106/var(--tw-bg-opacity,1))!important}.bg-input-bg-surface{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.bg-purple-500{--tw-bg-opacity:1!important;background-color:rgb(168 85 247/var(--tw-bg-opacity,1))!important}.bg-skeleton-bg-end{--tw-bg-opacity:1!important;background-color:rgb(230 230 230/var(--tw-bg-opacity,1))!important}.bg-skeleton-bg-start{--tw-bg-opacity:1!important;background-color:rgb(206 206 206/var(--tw-bg-opacity,1))!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.fill-bg-fill-brand{fill:#24a76a!important}.fill-checkbox-bg-surface-disabled{fill:#f7f7f8!important}.fill-checkbox-bg-surface-selected-disabled{fill:#e6e6e6!important}.fill-white{fill:#fff!important}.p-0{padding:0!important}.p-2{padding:.5rem!important}.p-3{padding:.75rem!important}.p-4{padding:1rem!important}.p-5{padding:1.25rem!important}.p-6{padding:1.5rem!important}.px-0{padding-left:0!important;padding-right:0!important}.px-1{padding-left:.25rem!important;padding-right:.25rem!important}.px-3{padding-left:.75rem!important;padding-right:.75rem!important}.px-4{padding-left:1rem!important;padding-right:1rem!important}.px-\[7px\]{padding-left:7px!important;padding-right:7px!important}.py-2{padding-bottom:.5rem!important;padding-top:.5rem!important}.py-3{padding-bottom:.75rem!important;padding-top:.75rem!important}.py-4{padding-bottom:1rem!important;padding-top:1rem!important}.py-6{padding-bottom:1.5rem!important;padding-top:1.5rem!important}.py-\[7px\]{padding-bottom:7px!important;padding-top:7px!important}.pb-1{padding-bottom:.25rem!important}.pb-\[300px\]{padding-bottom:300px!important}.pl-1{padding-left:.25rem!important}.pl-15{padding-left:3.75rem!important}.pl-2{padding-left:.5rem!important}.pl-5{padding-left:1.25rem!important}.pl-6{padding-left:1.5rem!important}.pl-7{padding-left:1.75rem!important}.pr-15{padding-right:3.75rem!important}.pr-2{padding-right:.5rem!important}.pr-3{padding-right:.75rem!important}.pr-4{padding-right:1rem!important}.pr-5{padding-right:1.25rem!important}.pt-1{padding-top:.25rem!important}.text-left{text-align:left!important}.text-center{text-align:center!important}.align-top{vertical-align:top!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-body1{font-size:1.25rem!important}.text-body2{font-size:1.125rem!important}.text-body3{font-size:1rem!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.font-bold{font-weight:700!important}.font-medium{font-weight:500!important}.font-normal{font-weight:400!important}.font-semibold{font-weight:600!important}.leading-6{line-height:1.5rem!important}.tracking-wide{letter-spacing:.025em!important}.text-blue-500{--tw-text-opacity:1!important;color:rgb(59 130 246/var(--tw-text-opacity,1))!important}.text-blue-600{--tw-text-opacity:1!important;color:rgb(37 99 235/var(--tw-text-opacity,1))!important}.text-gray-500{--tw-text-opacity:1!important;color:rgb(107 114 128/var(--tw-text-opacity,1))!important}.text-gray-600{--tw-text-opacity:1!important;color:rgb(75 85 99/var(--tw-text-opacity,1))!important}.text-gray-700{--tw-text-opacity:1!important;color:rgb(55 65 81/var(--tw-text-opacity,1))!important}.text-gray-900{--tw-text-opacity:1!important;color:rgb(17 24 39/var(--tw-text-opacity,1))!important}.text-green-500{--tw-text-opacity:1!important;color:rgb(34 197 94/var(--tw-text-opacity,1))!important}.text-green-600{--tw-text-opacity:1!important;color:rgb(22 163 74/var(--tw-text-opacity,1))!important}.text-icon-brand{--tw-text-opacity:1!important;color:rgb(36 167 106/var(--tw-text-opacity,1))!important}.text-icon-critical{--tw-text-opacity:1!important;color:rgb(212 0 0/var(--tw-text-opacity,1))!important}.text-icon-default{--tw-text-opacity:1!important;color:rgb(0 0 45/var(--tw-text-opacity,1))!important}.text-icon-info{--tw-text-opacity:1!important;color:rgb(117 117 117/var(--tw-text-opacity,1))!important}.text-input-text-placeholder{--tw-text-opacity:1!important;color:rgb(94 94 94/var(--tw-text-opacity,1))!important}.text-purple-600{--tw-text-opacity:1!important;color:rgb(147 51 234/var(--tw-text-opacity,1))!important}.text-red-500{color:rgb(239 68 68/var(--tw-text-opacity,1))!important}.text-red-500,.text-red-600{--tw-text-opacity:1!important}.text-red-600{color:rgb(220 38 38/var(--tw-text-opacity,1))!important}.text-text{color:rgb(0 0 45/var(--tw-text-opacity,1))!important}.text-text,.text-text-brand{--tw-text-opacity:1!important}.text-text-brand{color:rgb(36 167 106/var(--tw-text-opacity,1))!important}.text-text-brand-on-bg-fill{--tw-text-opacity:1!important;color:rgb(255 255 255/var(--tw-text-opacity,1))!important}.text-text-critical{--tw-text-opacity:1!important;color:rgb(212 0 0/var(--tw-text-opacity,1))!important}.text-text-info{--tw-text-opacity:1!important;color:rgb(70 70 70/var(--tw-text-opacity,1))!important}.text-text-inverse{--tw-text-opacity:1!important;color:rgb(255 255 255/var(--tw-text-opacity,1))!important}.text-text-secondary{--tw-text-opacity:1!important;color:rgb(70 70 70/var(--tw-text-opacity,1))!important}.text-transparent{color:transparent!important}.text-white{color:rgb(255 255 255/var(--tw-text-opacity,1))!important}.text-white,.text-yellow-500{--tw-text-opacity:1!important}.text-yellow-500{color:rgb(234 179 8/var(--tw-text-opacity,1))!important}.text-yellow-600{--tw-text-opacity:1!important;color:rgb(202 138 4/var(--tw-text-opacity,1))!important}.underline{text-decoration-line:underline!important}.caret-bg-inverse{caret-color:#00002d!important}.opacity-0{opacity:0!important}.opacity-100{opacity:1!important}.opacity-50{opacity:.5!important}.opacity-60{opacity:.6!important}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)!important;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)!important}.shadow-lg,.shadow-none{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}.shadow-none{--tw-shadow:0 0 #0000!important;--tw-shadow-colored:0 0 #0000!important}.outline-none{outline:2px solid transparent!important;outline-offset:2px!important}.outline{outline-style:solid!important}.outline-1{outline-width:1px!important}.outline-2{outline-width:2px!important}.outline-offset-2{outline-offset:2px!important}.outline-offset-4{outline-offset:4px!important}.outline-input-border-critical{outline-color:#d40000!important}.outline-input-border-selected{outline-color:#24a76a!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.transition{transition-duration:.15s!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}.transition-all{transition-duration:.15s!important;transition-property:all!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}.transition-colors{transition-duration:.15s!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}.transition-transform{transition-duration:.15s!important;transition-property:transform!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}.duration-200{transition-duration:.2s!important}.duration-300{transition-duration:.3s!important}.duration-\[180ms\]{transition-duration:.18s!important}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)!important}@font-face{font-display:swap;font-family:Material Symbols Rounded;font-style:normal;font-weight:100 700;src:url(/material_symbols/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2) format("woff2")}:root{--win-site-font:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif}@media (min-width:640px){.sm\:body3{font-family:Figtree,sans-serif;font-size:1rem;font-weight:400;line-height:1.5rem}}@media (min-width:768px){.md\:body1{font-family:Figtree,sans-serif;font-size:1.25rem;font-weight:400;line-height:1.75rem}.md\:label3{font-size:1rem;line-height:1.5rem}.md\:label3,.md\:label4{font-family:Figtree,sans-serif;font-weight:600}.md\:label4{font-size:.875rem;line-height:1.25rem}.md\:btn-small{font-size:1.125rem;font-weight:700;height:3rem;line-height:1.75rem}.md\:btn-medium{height:3.5rem}.md\:btn-large,.md\:btn-medium{font-size:1.25rem;font-weight:700;line-height:1.75rem}.md\:btn-large{height:4rem}.md\:btn-x-large{font-size:1.875rem;font-weight:400;height:5.5rem;line-height:2.375rem}}@media (min-width:1024px){.lg\:label3{font-size:1rem;line-height:1.5rem}.lg\:label3,.lg\:label4{font-family:Figtree,sans-serif;font-weight:600}.lg\:label4{font-size:.875rem;line-height:1.25rem}}.placeholder\:text-input-text-placeholder::-moz-placeholder{--tw-text-opacity:1!important;color:rgb(94 94 94/var(--tw-text-opacity,1))!important}.placeholder\:text-input-text-placeholder::placeholder{--tw-text-opacity:1!important;color:rgb(94 94 94/var(--tw-text-opacity,1))!important}.hover\:bg-bg-surface-hover:hover{--tw-bg-opacity:1!important;background-color:rgb(247 247 248/var(--tw-bg-opacity,1))!important}.hover\:bg-blue-700:hover{--tw-bg-opacity:1!important;background-color:rgb(29 78 216/var(--tw-bg-opacity,1))!important}.hover\:bg-gray-100:hover{--tw-bg-opacity:1!important;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))!important}.hover\:bg-gray-50:hover{--tw-bg-opacity:1!important;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))!important}.hover\:bg-gray-700:hover{--tw-bg-opacity:1!important;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))!important}.hover\:bg-green-700:hover{--tw-bg-opacity:1!important;background-color:rgb(21 128 61/var(--tw-bg-opacity,1))!important}.hover\:bg-red-50:hover{--tw-bg-opacity:1!important;background-color:rgb(254 242 242/var(--tw-bg-opacity,1))!important}.hover\:text-gray-800:hover{--tw-text-opacity:1!important;color:rgb(31 41 55/var(--tw-text-opacity,1))!important}.hover\:text-text-brand-hover:hover{--tw-text-opacity:1!important;color:rgb(27 131 82/var(--tw-text-opacity,1))!important}.focus\:border-none:focus{border-style:none!important}.focus\:outline-none:focus{outline:2px solid transparent!important;outline-offset:2px!important}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.focus\:ring-bg-fill-brand:focus{--tw-ring-opacity:1!important;--tw-ring-color:rgb(36 167 106/var(--tw-ring-opacity,1))!important}.focus\:ring-bg-surface-inverse:focus{--tw-ring-opacity:1!important;--tw-ring-color:rgb(25 26 84/var(--tw-ring-opacity,1))!important}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px!important}.enabled\:hover\:bg-bg-fill-brand-hover:hover:enabled{--tw-bg-opacity:1!important;background-color:rgb(69 193 135/var(--tw-bg-opacity,1))!important}.enabled\:hover\:bg-bg-fill-inverse-hover:hover:enabled{--tw-bg-opacity:1!important;background-color:rgb(25 26 84/var(--tw-bg-opacity,1))!important}.disabled\:opacity-50:disabled{opacity:.5!important}.peer:focus~.peer-focus\:outline{outline-style:solid!important}@media (min-width:768px){.md\:w-\[22\.125rem\]{width:22.125rem!important}.md\:max-w-\[48\.375rem\]{max-width:48.375rem!important}.md\:flex-row{flex-direction:row!important}.md\:gap-16{gap:4rem!important}.md\:px-0{padding-left:0!important;padding-right:0!important}.md\:py-4{padding-bottom:1rem!important;padding-top:1rem!important}}

package/dist/utils/index.d.ts

@@ -0,0 +1,11 @@
+import { ClassValue } from 'clsx';
+export { ClassValue, clsx } from 'clsx';
+
+/**
+ * Utility function to combine class names using clsx
+ * @param inputs - Class values to combine
+ * @returns Combined class string
+ */
+declare const cx: (...val: ClassValue[]) => string;
+
+export { cx };

package/dist/utils/index.esm.js

@@ -0,0 +1,2 @@
+import{clsx as e}from"clsx";export{clsx}from"clsx";import{extendTailwindMerge as a}from"tailwind-merge";const n=a({extend:{classGroups:{"font-variants":["heading1","heading2","heading3","heading4","heading5","heading6","subheading1","subheading2","subheading3","subheading4","subheading5","subheading6","body1","body2","body3","footnote","micro","label1","label2","label3","label4"],"button-sizes":["btn-small","btn-medium","btn-large","btn-x-large"]}}}),i=(...a)=>n(e(...a));export{i as cx};
+//# sourceMappingURL=index.esm.js.map

package/dist/utils/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../src/utils/index.ts"],"sourcesContent":[null],"names":["twMerge","extendTailwindMerge","extend","classGroups","cx","val","clsx"],"mappings":"wGAGA,MAAMA,EAAUC,EAAoB,CAEhCC,OAAQ,CACNC,YAAa,CACX,gBAA0B,CACxB,WACA,WACA,WACA,WACA,WACA,WACA,cACA,cACA,cACA,cACA,cACA,cACA,QACA,QACA,QACA,WACA,QACA,SACA,SACA,SACA,UAEF,eAAyB,CACvB,YACA,aACA,YACA,mBAWGC,EAAK,IAAIC,IAAsBL,EAAQM,KAAQD"}

package/dist/utils/index.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("clsx");const n=require("tailwind-merge").extendTailwindMerge({extend:{classGroups:{"font-variants":["heading1","heading2","heading3","heading4","heading5","heading6","subheading1","subheading2","subheading3","subheading4","subheading5","subheading6","body1","body2","body3","footnote","micro","label1","label2","label3","label4"],"button-sizes":["btn-small","btn-medium","btn-large","btn-x-large"]}}});Object.defineProperty(exports,"clsx",{enumerable:!0,get:function(){return e.clsx}}),exports.cx=(...a)=>n(e.clsx(...a));
+//# sourceMappingURL=index.js.map

package/dist/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/utils/index.ts"],"sourcesContent":[null],"names":["twMerge","extendTailwindMerge","extend","classGroups","val","clsx"],"mappings":"mCAGA,MAAMA,4BAAUC,oBAAoB,CAEhCC,OAAQ,CACNC,YAAa,CACX,gBAA0B,CACxB,WACA,WACA,WACA,WACA,WACA,WACA,cACA,cACA,cACA,cACA,cACA,cACA,QACA,QACA,QACA,WACA,QACA,SACA,SACA,SACA,UAEF,eAAyB,CACvB,YACA,aACA,YACA,kHAWQ,IAAIC,IAAsBJ,EAAQK,EAAAA,QAAQD"}

package/package.json

@@ -0,0 +1,151 @@
+{
+  "name": "@windstream/react-shared-components",
+  "version": "0.0.1",
+  "type": "module",
+  "description": "Shared React components for Kinetic applications",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "core": [
+        "./dist/core.d.ts"
+      ],
+      "utils": [
+        "./dist/utils/index.d.ts"
+      ]
+    }
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.js"
+    },
+    "./core": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.js"
+    },
+    "./utils": {
+      "types": "./dist/utils/index.d.ts",
+      "import": "./dist/utils/index.esm.js",
+      "require": "./dist/utils/index.js"
+    },
+    "./tailwind.config": {
+      "types": "./tailwind.config.cjs",
+      "require": "./tailwind.config.cjs",
+      "import": "./tailwind.config.cjs",
+      "default": "./tailwind.config.cjs"
+    },
+    "./tailwind.config.cjs": {
+      "require": "./tailwind.config.cjs",
+      "import": "./tailwind.config.cjs",
+      "default": "./tailwind.config.cjs"
+    },
+    "./styles": {
+      "default": "./dist/styles.css"
+    },
+    "./styles.css": {
+      "default": "./dist/styles.css"
+    },
+    "./src/*": {
+      "default": "./src/*"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "tailwind.config.cjs"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "clean": "rimraf dist",
+    "prebuild": "npm run clean",
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint:fix": "eslint src --ext .ts,.tsx --fix",
+    "format": "prettier --write \"src/**/*.(js|jsx|ts|tsx|css)\" | grep -v \"changed\" || true",
+    "format:check": "prettier --check .",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "type-check": "tsc --noEmit",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "@types/react-modal": "3.16.3",
+    "@types/react-transition-group": "4.4.12",
+    "clsx": "2.1.1",
+    "react-modal": "3.16.3",
+    "react-select": "5.10.2",
+    "react-transition-group": "4.4.5"
+  },
+  "devDependencies": {
+    "@ianvs/prettier-plugin-sort-imports": "4.7.0",
+    "@rollup/plugin-commonjs": "28.0.6",
+    "@rollup/plugin-node-resolve": "16.0.1",
+    "@rollup/plugin-terser": "0.4.4",
+    "@rollup/plugin-typescript": "12.1.4",
+    "@storybook/addon-docs": "9.1.3",
+    "@storybook/addon-onboarding": "9.1.3",
+    "@storybook/blocks": "^9.0.0-alpha.17",
+    "@storybook/react": "9.1.3",
+    "@storybook/react-vite": "9.1.3",
+    "@tailwindcss/typography": "^0.5.19",
+    "@testing-library/jest-dom": "6.6.4",
+    "@testing-library/react": "16.3.0",
+    "@types/react": "18.3.23",
+    "@types/react-dom": "18.3.7",
+    "@types/react-select": "5.0.1",
+    "@typescript-eslint/eslint-plugin": "8.39.0",
+    "@typescript-eslint/parser": "8.39.0",
+    "autoprefixer": "10.4.21",
+    "eslint": "8.57.1",
+    "eslint-config-prettier": "10.1.8",
+    "eslint-plugin-jsx-a11y": "6.10.2",
+    "eslint-plugin-prettier": "5.5.4",
+    "eslint-plugin-react": "7.37.5",
+    "eslint-plugin-react-hooks": "5.2.0",
+    "eslint-plugin-storybook": "9.1.3",
+    "jest": "30.0.5",
+    "jest-environment-jsdom": "30.0.5",
+    "postcss": "8.5.6",
+    "postcss-loader": "8.1.1",
+    "prettier": "3.6.2",
+    "prettier-plugin-tailwindcss": "0.6.14",
+    "rimraf": "^6.1.2",
+    "rollup": "4.49.0",
+    "rollup-plugin-dts": "6.2.3",
+    "rollup-plugin-peer-deps-external": "2.2.4",
+    "rollup-plugin-postcss": "4.0.2",
+    "storybook": "9.1.3",
+    "tailwind-merge": "3.3.1",
+    "tailwindcss": "3.4.17",
+    "tailwindcss-radix": "^4.0.2",
+    "typescript": "5.3.3"
+  },
+  "keywords": [
+    "react",
+    "components",
+    "ui",
+    "kinetic",
+    "windstream",
+    "typescript"
+  ],
+  "author": "Kinetic Team",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kinetic/react-shared-components.git"
+  },
+  "bugs": {
+    "url": "https://github.com/kinetic/react-shared-components/issues"
+  },
+  "homepage": "https://github.com/kinetic/react-shared-components#readme"
+}

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

@@ -0,0 +1,225 @@
+import { Accordion } from "./index";
+import { DocsPage } from "@shared/stories/DocsTemplate";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Accordion> = {
+  title: "Components/Accordion",
+  component: Accordion,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "A collapsible accordion component that can expand and collapse content sections with smooth animations.",
+      },
+    },
+  },
+  argTypes: {
+    title: {
+      control: { type: "text" },
+      description: "Title text displayed in the accordion header",
+    },
+    defaultOpen: {
+      control: { type: "boolean" },
+      description: "Whether the accordion is open by default",
+    },
+    containerClassName: {
+      control: { type: "text" },
+      description: "Additional CSS classes for the container",
+    },
+    titleClassName: {
+      control: { type: "text" },
+      description: "Additional CSS classes for the title",
+    },
+    className: {
+      control: { type: "text" },
+      description: "Additional CSS classes for the content area",
+    },
+    buttonClassName: {
+      control: { type: "text" },
+      description: "Additional CSS classes for the button",
+    },
+  },
+  args: {
+    title: "Accordion Title",
+    defaultOpen: false,
+    children: "This is the accordion content that can be expanded or collapsed.",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default accordion
+export const Default: Story = {
+  args: {},
+};
+
+// Accordion with content
+export const WithContent: Story = {
+  args: {
+    title: "Frequently Asked Questions",
+    children: (
+      <div className="space-y-2">
+        <p className="body2 text-text">
+          This accordion contains detailed information that can be expanded or
+          collapsed by clicking the header.
+        </p>
+        <p className="body3 text-text-secondary">
+          You can include any content here, such as text, images, forms, or
+          other components.
+        </p>
+      </div>
+    ),
+  },
+};
+
+// Default open accordion
+export const DefaultOpen: Story = {
+  args: {
+    title: "Open by Default",
+    defaultOpen: true,
+    children: (
+      <div className="space-y-2">
+        <p className="body2 text-text">
+          This accordion is open by default when the page loads.
+        </p>
+        <p className="body3 text-text-secondary">
+          Use the defaultOpen prop to control the initial state.
+        </p>
+      </div>
+    ),
+  },
+};
+
+// Multiple accordions
+export const Multiple: Story = {
+  render: () => (
+    <div className="w-full max-w-2xl space-y-4">
+      <Accordion title="First Section">
+        <p className="body2 text-text">
+          Content for the first accordion section.
+        </p>
+      </Accordion>
+      <Accordion title="Second Section" defaultOpen>
+        <p className="body2 text-text">
+          Content for the second accordion section. This one is open by default.
+        </p>
+      </Accordion>
+      <Accordion title="Third Section">
+        <p className="body2 text-text">
+          Content for the third accordion section.
+        </p>
+      </Accordion>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Multiple accordions used together to create an FAQ or content section.",
+      },
+    },
+  },
+};
+
+// Custom styling
+export const CustomStyling: Story = {
+  args: {
+    title: "Custom Styled Accordion",
+    containerClassName: "border-2 border-border-brand",
+    titleClassName: "text-text-brand font-bold",
+    buttonClassName: "bg-surface-secondary",
+    className: "bg-surface-tertiary",
+    children: (
+      <div className="space-y-2">
+        <p className="body2 text-text">
+          This accordion has custom styling applied to different parts.
+        </p>
+        <ul className="list-disc pl-5 space-y-1">
+          <li className="body3 text-text-secondary">Custom container border</li>
+          <li className="body3 text-text-secondary">Custom title styling</li>
+          <li className="body3 text-text-secondary">Custom button background</li>
+          <li className="body3 text-text-secondary">Custom content background</li>
+        </ul>
+      </div>
+    ),
+  },
+};
+
+// Long content
+export const LongContent: Story = {
+  args: {
+    title: "Accordion with Long Content",
+    children: (
+      <div className="space-y-4">
+        <p className="body2 text-text">
+          This accordion demonstrates how it handles longer content sections.
+          The content area will expand to accommodate all the content, and
+          scrolling will be handled naturally within the page.
+        </p>
+        <div className="space-y-2">
+          <h4 className="subheading2 text-text">Subsection 1</h4>
+          <p className="body3 text-text-secondary">
+            Additional details and information can be placed here.
+          </p>
+        </div>
+        <div className="space-y-2">
+          <h4 className="subheading2 text-text">Subsection 2</h4>
+          <p className="body3 text-text-secondary">
+            More content to demonstrate scrolling behavior.
+          </p>
+        </div>
+        <div className="space-y-2">
+          <h4 className="subheading2 text-text">Subsection 3</h4>
+          <p className="body3 text-text-secondary">
+            Even more content to show how the accordion handles extended
+            content areas.
+          </p>
+        </div>
+      </div>
+    ),
+  },
+};
+
+// All variants showcase
+export const AllVariants: Story = {
+  render: () => (
+    <div className="w-full max-w-2xl space-y-4">
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Default State</h3>
+        <Accordion title="Closed Accordion">
+          <p className="body2 text-text">This accordion starts closed.</p>
+        </Accordion>
+      </div>
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Open by Default</h3>
+        <Accordion title="Open Accordion" defaultOpen>
+          <p className="body2 text-text">This accordion starts open.</p>
+        </Accordion>
+      </div>
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Custom Styled</h3>
+        <Accordion
+          title="Styled Accordion"
+          containerClassName="border-2 border-border-brand"
+          titleClassName="text-text-brand"
+        >
+          <p className="body2 text-text">
+            This accordion has custom styling applied.
+          </p>
+        </Accordion>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Showcase of all accordion variants and states.",
+      },
+    },
+  },
+};
+

package/src/components/accordion/index.tsx

@@ -0,0 +1,36 @@
+import { useState } from "react";
+import { AccordionProps } from "@shared/components/accordion/types";
+import { Collapse } from "@shared/components/collapse";
+import { MaterialIcon } from "@shared/components/material-icon";
+import { cx } from "@shared/utils";
+import { Button } from "@shared/components/button";
+import { BrandButton } from "../brand-button";
+
+export const Accordion:React.FC<AccordionProps> = props => {
+  const { title, defaultOpen, children, containerClassName, titleClassName, className, buttonClassName } = props;
+  const [open, setOpen] = useState<boolean>(Boolean(defaultOpen));
+
+  return (
+    <div className={cx("rounded-lg border", containerClassName)}>
+      <Button
+        type="button"
+        className={cx("flex w-full items-center justify-between gap-4 rounded-t-lg px-4 py-3 text-left", buttonClassName)}
+        onClick={() => setOpen(v => !v)}
+      >
+        <span className={cx("label5", titleClassName)}>{title}</span>
+        <MaterialIcon 
+          name={open ? 'keyboard_arrow_down': 'keyboard_arrow_up'}
+          fill={1}
+          size={24}
+        />
+      </Button>
+      <Collapse open={open}>
+        <div className={cx("px-4 py-4", className)}>{children}</div>
+      </Collapse>
+    </div>
+  );
+}
+
+Accordion.displayName = "Accordion";
+
+export type { AccordionProps };

package/src/components/accordion/types.ts

@@ -0,0 +1,10 @@
+export type AccordionProps = {
+    title: string;
+    defaultOpen?: boolean;
+    containerClassName?: string;
+    children: React.ReactNode;
+    titleClassName?: string;
+    className?: string;
+    buttonClassName?: string;
+  };
+