@hellobetterdigitalnz/selwynui 0.0.1-1

package/dist/selwynui.css

@@ -0,0 +1 @@
+._detailsCard_1ch4w_1{min-height:400px;border-radius:12px;border:1px solid var(--pathway-card-border);color:var(--pathway-card-text);background-color:var(--pathway-card-bg)}._detailsCard_1ch4w_1._detailsCardShort_1ch4w_8{min-height:274px}._detailsCardWithLink_1ch4w_12{color:var(--pathway-card-text);transition:all ease .3s}._detailsCardWithLink_1ch4w_12:hover{background-color:var(--pathway-card-hover-bg);color:var(--pathway-card-hover-text)}._cardImage_1ch4w_21{height:200px}._cardImage_1ch4w_21 img{width:100%;height:100%;object-fit:cover;object-position:center;border-radius:12px 12px 0 0}._detailsCardShort_1ch4w_8 ._cardImage_1ch4w_21{height:204px}._cardContent_1ch4w_35{padding:24px;flex:1}._cardDate_1ch4w_40{margin-bottom:var(--spacing-1-1\/2)}._cardDate_1ch4w_40 p{font-size:var(--font-size-body-sm);line-height:var(--line-height-body-regular);font-weight:var(--font-weight-bold)}._cardWrap_1ch4w_49{min-height:400px;display:flex;flex-direction:column}._detailsCardShort_1ch4w_8 ._cardWrap_1ch4w_49{min-height:274px}._cardWrap_1ch4w_49:hover{border-radius:12px}._cardContent_1ch4w_35{display:flex;flex-direction:column}._cardBody_1ch4w_66{flex:1}._cardTitle_1ch4w_70 h6{font-weight:var(--font-weight-body-regular)}._cardLink_1ch4w_74{max-height:18px;display:flex;justify-content:space-between;align-items:center;font-size:var(--font-size-body-sm);font-weight:var(--font-weight-bold)}._cardLink_1ch4w_74 span img{width:32px;height:32px}@media(min-width:760px){._detailsCard_1ch4w_1{min-height:590px}._detailsCard_1ch4w_1._detailsCardShort_1ch4w_8{min-height:474px}._cardImage_1ch4w_21{height:300px}._detailsCardShort_1ch4w_8 ._cardImage_1ch4w_21{height:304px}._cardWrap_1ch4w_49{min-height:590px}._detailsCardShort_1ch4w_8 ._cardWrap_1ch4w_49{min-height:474px}}._container_17dwz_1{padding:0 14px;margin:0 auto}._container_17dwz_1._default_17dwz_5{max-width:1428px}@media screen and (min-width:1748px){._container_17dwz_1{padding:0 14px}}._introBlock_1e53j_1 ._introBlockWrapper_1e53j_1{display:flex;flex-grow:1;margin:0 -72px}._introBlock_1e53j_1 ._introBlockWrapper_1e53j_1 ._introBlockLeft_1e53j_6{width:50%;padding:0 72px}._introBlock_1e53j_1 ._introBlockWrapper_1e53j_1 ._introBlockLeft_1e53j_6 h1{font-size:var(--font-size-h4);line-height:var(--line-height-h4);font-weight:var(--font-weight-h4)}._introBlock_1e53j_1 ._introBlockWrapper_1e53j_1 ._introBlockRight_1e53j_15{width:50%;padding:0 72px}._introBlock_1e53j_1 ._introBlockWrapper_1e53j_1 ._introBlockRight_1e53j_15 h1{font-size:var(--font-size-small);line-height:var(--line-height-label);font-weight:var(--font-weight-body-regular)}._introBlock_1e53j_1 ._introBlockWrapper_1e53j_1 ._introBlockVerticalLine_1e53j_24{background:var(--color-text);width:1px}._kpi_f5qkd_1{color:var(--bg-modal-color)}._kpi_f5qkd_1 ._kpiWrapper_f5qkd_4{display:flex;flex-direction:inherit;align-items:start}._kpi_f5qkd_1 ._kpiWrapper_f5qkd_4 ._header_f5qkd_9{flex:0 0 40%;margin-right:90px}._kpi_f5qkd_1 ._kpiWrapper_f5qkd_4 ._header_f5qkd_9 h2{font-size:var(--font-size-h4);font-weight:var(--font-weight-h5);letter-spacing:-1.92px;margin-bottom:72px;color:var(--color-business)}._kpi_f5qkd_1 ._kpiWrapper_f5qkd_4 ._header_f5qkd_9 p{font-size:var(--font-size-body-regular);line-height:var(--line-height-body-regular);font-weight:var(--font-weight-body-sm);color:var(--color-business)}._kpi_f5qkd_1 ._kpiWrapper_f5qkd_4 ._stats_f5qkd_26{flex:0 0 60%;display:flex;flex-direction:column;max-width:884px;gap:48px}._kpi_f5qkd_1 ._kpiWrapper_f5qkd_4 ._stats_f5qkd_26 ._statItem_f5qkd_33{display:flex;padding-bottom:48px;border-bottom:1px solid var(--color-business)}._kpi_f5qkd_1 ._kpiWrapper_f5qkd_4 ._stats_f5qkd_26 ._statItem_f5qkd_33:last-child{border-bottom:none;padding-bottom:0}._kpi_f5qkd_1 ._kpiWrapper_f5qkd_4 ._stats_f5qkd_26 ._statItem_f5qkd_33 ._value_f5qkd_42{flex:0 0 200px;font-size:var(--font-size-h3);line-height:var(--line-height-h3);font-weight:var(--font-weight-h5);color:var(--color-business);letter-spacing:-3.6px;min-width:230px}._kpi_f5qkd_1 ._kpiWrapper_f5qkd_4 ._stats_f5qkd_26 ._statItem_f5qkd_33 ._description_f5qkd_51{flex:1;font-size:var(--font-size-body-regular);line-height:var(--line-height-body-regular);font-weight:var(--font-weight-body-sm);color:var(--color-business);display:flex;align-items:center;padding-left:24px}._pathwayTitle_87u3o_1{margin-bottom:36px}._pathwayTitle_87u3o_1 h3{font-size:var(--font-size-h3);line-height:var(--line-height-h3);font-weight:var(--font-weight-bold)}._pathwayDescription_87u3o_10{margin-bottom:36px}._pathwayDescription_87u3o_10 p{font-size:var(--font-size-h5);line-height:1.2}._pathwayFilters_87u3o_18{margin-bottom:48px}._pathwayFilters_87u3o_18 ul{list-style:none;display:flex;margin:0 -8px}._pathwayFilters_87u3o_18 ul li{cursor:pointer;padding:0 8px}._pathwayFilters_87u3o_18 ul li._active_87u3o_30 span{color:var(--pathway-card-hover-text);background-color:var(--pathway-card-hover-bg)}._pathwayFilters_87u3o_18 ul li span{padding:20px 32px;border:1px solid var(--pathway-card-border);border-radius:48px;max-height:51px;display:inline-flex;align-items:center;font-weight:var(--font-weight-bold)}._pathwayCard_87u3o_44{margin-bottom:32px}._pathwayCard_87u3o_44:last-child{margin-bottom:0}._pathwayFilterDesktop_87u3o_51{display:none}._pathwayFilterMobile_87u3o_55{position:relative}._pathwayFilterMobile_87u3o_55 select{width:100%;min-height:51px;padding:16px;appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;border:1px solid var(--pathway-card-border);color:var(--pathway-card-text);font-size:var(--font-size-label)}._pathwayFilterMobile_87u3o_55 select:focus{outline:0}._pathwayFilterMobile_87u3o_55 svg{position:absolute;top:50%;right:0;transform:translate(-50%,-50%);width:24px;height:24px;pointer-events:none}@media(min-width:760px){._pathwayTitle_87u3o_1,._pathwayDescription_87u3o_10{margin-bottom:72px}._pathwayFilters_87u3o_18{margin-bottom:96px}._pathwayCardsWrap_87u3o_93{display:flex;flex-wrap:wrap;margin:0 -16px}._pathwayCard_87u3o_44{width:33.33%;padding:0 16px}._pathwayFilterDesktop_87u3o_51{display:block}._pathwayFilterMobile_87u3o_55{display:none}}._element_1ue3h_1{background-color:var(--color-block-bg);color:var(--color-block-text);position:relative}._elementInner_1ue3h_6{position:relative;z-index:1}._element--pt-none_1ue3h_10{padding-top:0}._element--pt-xsm_1ue3h_13{padding-top:72px}._element--pt-sm_1ue3h_16{padding-top:90px}._element--pt-md_1ue3h_19{padding-top:120px}._element--pt-lg_1ue3h_22{padding-top:144px}._element--pb-none_1ue3h_25{padding-bottom:0}._element--pb-xsm_1ue3h_28{padding-bottom:40px}._element--pb-sm_1ue3h_31{padding-bottom:48px}._element--pb-md_1ue3h_34{padding-bottom:90px}._element--pb-lg_1ue3h_37{padding-bottom:120px}._element--pb-xl_1ue3h_40{padding-bottom:144px}._element--mt-none_1ue3h_43{margin-top:0}._element--mt-xsm_1ue3h_46{margin-top:72px}._element--mt-sm_1ue3h_49{margin-top:90px}._element--mt-md_1ue3h_52{margin-top:120px}._element--mt-lg_1ue3h_55{margin-top:144px}._element--mb-none_1ue3h_58{margin-bottom:0}._element--mb-xsm_1ue3h_61{margin-bottom:72px}._element--mb-sm_1ue3h_64{margin-bottom:90px}._element--mb-md_1ue3h_67{margin-bottom:120px}._element--mb-lg_1ue3h_70{margin-bottom:144px}@media(max-width:992px){._element--pt-none_1ue3h_10{padding-top:0}._element--pt-xsm_1ue3h_13{padding-top:36px}._element--pt-sm_1ue3h_16{padding-top:45px}._element--pt-md_1ue3h_19{padding-top:60px}._element--pt-lg_1ue3h_22{padding-top:72px}._element--pb-none_1ue3h_25{padding-bottom:0}._element--pb-xsm_1ue3h_28{padding-bottom:20px}._element--pb-sm_1ue3h_31{padding-bottom:24px}._element--pb-md_1ue3h_34{padding-bottom:45px}._element--pb-lg_1ue3h_37{padding-bottom:60px}._element--pb-xl_1ue3h_40{padding-bottom:72px}._element--mt-none_1ue3h_43{margin-top:0}._element--mt-xsm_1ue3h_46{margin-top:36px}._element--mt-sm_1ue3h_49{margin-top:45px}._element--mt-md_1ue3h_52{margin-top:60px}._element--mt-lg_1ue3h_55{margin-top:72px}._element--mb-none_1ue3h_58{margin-bottom:0}._element--mb-xsm_1ue3h_61{margin-bottom:36px}._element--mb-sm_1ue3h_64{margin-bottom:45px}._element--mb-md_1ue3h_67{margin-bottom:60px}._element--mb-lg_1ue3h_70{margin-bottom:72px}}._promoBannerBlock_1q67e_1{overflow-x:hidden;padding:48px 16px}._promoBannerBlock_1q67e_1 ._promoBannerBlockContainer_1q67e_5 ._promoBannerTop_1q67e_5 ._promoBannerTopLeft_1q67e_5{padding:0 16px}._promoBannerBlock_1q67e_1 ._promoBannerBlockContainer_1q67e_5 ._promoBannerTop_1q67e_5 ._promoBannerTopLeft_1q67e_5 h1{font-size:var(--font-size-h5);line-height:var(--line-height-h5);font-weight:var(--font-weight-h4)}._promoBannerBlock_1q67e_1 ._promoBannerBlockContainer_1q67e_5 ._promoBannerTop_1q67e_5 ._promoBannerTopRight_1q67e_13{padding:48px 16px}._promoBannerBlock_1q67e_1 ._promoBannerBlockContainer_1q67e_5 ._promoBannerTop_1q67e_5 ._promoBannerTopRight_1q67e_13 h1{font-size:var(--font-size-regular);font-weight:var(--font-weight-body-regular);line-height:var(--line-height-label)}._promoBannerBlock_1q67e_1 ._promoBannerBlockContainer_1q67e_5 ._promoBannerTop_1q67e_5 ._promoBannerBgDesignContainer_1q67e_21{display:none}._promoBannerBlock_1q67e_1 ._promoBannerBlockContainer_1q67e_5 ._promoBannerBottom_1q67e_24{background-color:var(--pathway-card-bg);border-radius:16px 16px 100px 0;margin-bottom:-30px}._promoBannerBlock_1q67e_1 ._promoBannerBlockContainer_1q67e_5 ._promoBannerBottom_1q67e_24 ._promoBannerBottomLeft_1q67e_29{color:var(--pathway-card-text);padding:32px 16px}._promoBannerBlock_1q67e_1 ._promoBannerBlockContainer_1q67e_5 ._promoBannerBottom_1q67e_24 ._promoBannerBottomLeft_1q67e_29 ._promoBannerBrandPiller_1q67e_33{display:flex;align-items:center;gap:16px;margin:auto;font-size:var(--font-size-body-regular)}._promoBannerBlock_1q67e_1 ._promoBannerBlockContainer_1q67e_5 ._promoBannerBottom_1q67e_24 ._promoBannerBottomLeft_1q67e_29 ._promoBannerTitleContainer_1q67e_40{padding-block:32px}._promoBannerBlock_1q67e_1 ._promoBannerBlockContainer_1q67e_5 ._promoBannerBottom_1q67e_24 ._promoBannerBottomLeft_1q67e_29 ._promoBannerTitleContainer_1q67e_40 h1{font-size:var(--font-size-small);font-weight:var(--font-weight-body-sm);line-height:var(--line-height-h5)}._promoBannerBlock_1q67e_1 ._promoBannerBlockContainer_1q67e_5 ._promoBannerBottom_1q67e_24 ._promoBannerBottomLeft_1q67e_29 ._promoBannerTitleContainer_1q67e_40 h2{font-size:var(--font-size-small);font-weight:var(--font-weight-bold);line-height:var(--line-height-body-regular)}._promoBannerBlock_1q67e_1 ._promoBannerBlockContainer_1q67e_5 ._promoBannerBottom_1q67e_24 ._promoBannerBottomLeft_1q67e_29 p{font-size:var(--font-size-body-regular);font-weight:var(--font-weight-body-regular);line-height:var(--line-height-body-regular);padding-bottom:32px}._promoBannerBlock_1q67e_1 ._promoBannerBlockContainer_1q67e_5 ._promoBannerBottom_1q67e_24 ._promoBannerBottomRight_1q67e_59 img{height:100%;width:100%;object-fit:cover}@media screen and (min-width:992px){._promoBannerBlock_1q67e_1{padding:120px 0}._promoBannerBlock_1q67e_1 ._promoBannerBlockContainer_1q67e_5 ._promoBannerTop_1q67e_5{display:flex;flex-grow:1;margin:0 -72px;position:relative}._promoBannerBlock_1q67e_1 ._promoBannerBlockContainer_1q67e_5 ._promoBannerTop_1q67e_5 ._promoBannerTopLeft_1q67e_5{padding:0 72px;width:50%}._promoBannerBlock_1q67e_1 ._promoBannerBlockContainer_1q67e_5 ._promoBannerTop_1q67e_5 ._promoBannerTopLeft_1q67e_5 h1{font-size:var(--font-size-h4);line-height:var(--line-height-h4)}._promoBannerBlock_1q67e_1 ._promoBannerBlockContainer_1q67e_5 ._promoBannerTop_1q67e_5 ._promoBannerTopRight_1q67e_13{width:50%;padding:0 72px}._promoBannerBlock_1q67e_1 ._promoBannerBlockContainer_1q67e_5 ._promoBannerTop_1q67e_5 ._promoBannerTopRight_1q67e_13 h1{font-size:var(--font-size-small)}._promoBannerBlock_1q67e_1 ._promoBannerBlockContainer_1q67e_5 ._promoBannerTop_1q67e_5 ._promoBannerVerticalLine_1q67e_89{background:var(--color-text);width:1px}._promoBannerBlock_1q67e_1 ._promoBannerBlockContainer_1q67e_5 ._promoBannerTop_1q67e_5 ._promoBannerBgDesignContainer_1q67e_21{display:block;position:absolute;top:-120px;bottom:0;right:-120px}._promoBannerBlock_1q67e_1 ._promoBannerBlockContainer_1q67e_5 ._promoBannerBottom_1q67e_24{display:flex;padding-top:90px;background-color:transparent}._promoBannerBlock_1q67e_1 ._promoBannerBlockContainer_1q67e_5 ._promoBannerBottom_1q67e_24 ._promoBannerBottomLeft_1q67e_29{background-color:var(--pathway-card-bg);padding:72px 90px 72px 72px;border-radius:16px 0 0 16px;width:50%}._promoBannerBlock_1q67e_1 ._promoBannerBlockContainer_1q67e_5 ._promoBannerBottom_1q67e_24 ._promoBannerBottomLeft_1q67e_29 ._promoBannerTitleContainer_1q67e_40{padding-block:48px}._promoBannerBlock_1q67e_1 ._promoBannerBlockContainer_1q67e_5 ._promoBannerBottom_1q67e_24 ._promoBannerBottomLeft_1q67e_29 ._promoBannerTitleContainer_1q67e_40 h1{font-size:var(--font-size-h3);font-weight:var(--font-weight-h3);line-height:var(--line-height-h3)}._promoBannerBlock_1q67e_1 ._promoBannerBlockContainer_1q67e_5 ._promoBannerBottom_1q67e_24 ._promoBannerBottomLeft_1q67e_29 ._promoBannerTitleContainer_1q67e_40 h2{font-size:var(--font-size-h3);line-height:var(--line-height-h3)}._promoBannerBlock_1q67e_1 ._promoBannerBlockContainer_1q67e_5 ._promoBannerBottom_1q67e_24 ._promoBannerBottomLeft_1q67e_29 p{padding-bottom:48px}._promoBannerBlock_1q67e_1 ._promoBannerBlockContainer_1q67e_5 ._promoBannerBottom_1q67e_24 ._promoBannerBottomRight_1q67e_59{width:50%}._promoBannerBlock_1q67e_1 ._promoBannerBlockContainer_1q67e_5 ._promoBannerBottom_1q67e_24 ._promoBannerBottomRight_1q67e_59 img{border-radius:0 16px 96px 0}}._button_8soeq_1{position:relative;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:none;transition:linear all .3s;font-family:var(--font);border-radius:48px}._button_8soeq_1 span{font-size:var(--font-size-button);font-weight:var(--font-weight-button);line-height:var(--line-height-button)}._button_8soeq_1._noBorder_8soeq_17{border-color:transparent}._button_8soeq_1._noBorder_8soeq_17 span{text-decoration-line:underline;--font-weight-button: 400}._button_8soeq_1._noBorder_8soeq_17 ._text_8soeq_24 small{color:var(--color-gray-600)}._button_8soeq_1._default_8soeq_27{padding:var(--spacing-1\/2) var(--spacing-1-1\/4);min-height:40px}._button_8soeq_1._default_8soeq_27._noBorder_8soeq_17{padding:var(--spacing-1\/2) var(--spacing-3\/4)}._button_8soeq_1._large_8soeq_34{padding:var(--spacing-1\/2) var(--spacing-2);height:48px}._button_8soeq_1._large_8soeq_34._noBorder_8soeq_17{padding:var(--spacing-1\/2) var(--spacing-1)}._button_8soeq_1._small_8soeq_41{padding:var(--spacing-1\/4) var(--spacing-3\/4);min-height:32px}._button_8soeq_1._small_8soeq_41._noBorder_8soeq_17{padding:var(--spacing-1\/4) var(--spacing-1\/2)}._button_8soeq_1._solid-primary_8soeq_48{color:var(--color-text);background-color:var(--color-bg)}._button_8soeq_1._solid-primary_8soeq_48 ._text_8soeq_24 small{color:var(--color-lite)}._button_8soeq_1._solid-secondary_8soeq_55{color:var(--color-text);background-color:var(--color-bg)}._button_8soeq_1._solid-secondary_8soeq_55 ._text_8soeq_24 small{color:var(--color-lite)}._button_8soeq_1._solid-ux_8soeq_62{color:var(--color-text);background-color:var(--color-bg)}._button_8soeq_1._solid-ux_8soeq_62 ._text_8soeq_24 small{color:var(--color-lite)}._button_8soeq_1._hollow-primary_8soeq_69{background:transparent;border-color:var(--color-block-bg);color:var(--color-text);border-width:2px;border-style:solid}._button_8soeq_1._hollow-primary_8soeq_69 ._customLoader_8soeq_76{border-top-color:var(--color-primary-800)}._button_8soeq_1._hollow-primary_8soeq_69:active:enabled{background:var(--color-primary-100);border-width:2px}._button_8soeq_1._hollow-secondary_8soeq_83{background:transparent;border-color:var(--color-block-bg);color:var(--color-text);border-width:2px;border-style:solid}._button_8soeq_1._hollow-secondary_8soeq_83 ._customLoader_8soeq_76{border-top-color:var(--color-secondary-800)}._button_8soeq_1._hollow-secondary_8soeq_83:active:enabled{background:var(--color-secondary-100);border-width:2px}._button_8soeq_1._hollow-ux_8soeq_97{background:transparent;border-color:var(--color-block-bg);color:var(--color-text);border-width:2px;border-style:solid}._button_8soeq_1._hollow-ux_8soeq_97 ._customLoader_8soeq_76{border-top-color:var(--color-ux-800)}._button_8soeq_1._hollow-ux_8soeq_97:active:enabled{background:var(--color-ux-100);border-width:2px}._button_8soeq_1 ._labelContainer_8soeq_111{padding:10px 32px;border:none;gap:12px;position:relative;display:inline-flex;align-items:center;justify-content:center;font-weight:var(--font-weight-h6)}._button_8soeq_1 ._buttonIcon_8soeq_122{display:inline-flex}._button_8soeq_1 ._buttonLabel_8soeq_125{font-family:var(--font)}._footer_1ygoa_1{width:100%}._footer_1ygoa_1 ._container_1ygoa_4{max-width:1832px;margin:0 auto}._footer_1ygoa_1 ._footerTop_1ygoa_8{padding-top:72px;border-radius:12px 12px 0 0;background-color:var(--color-taste)}._footer_1ygoa_1 ._footerTop_1ygoa_8 ._footerTopWrapper_1ygoa_13{color:var(--color-visit)}._footer_1ygoa_1 ._footerTop_1ygoa_8 ._footerTopLeft_1ygoa_16{align-items:center}._footer_1ygoa_1 ._footerTop_1ygoa_8 ._footerTopLeft_1ygoa_16 h1{font-size:var(--font-size-h5);font-weight:var(--font-weight-h4)}._footer_1ygoa_1 ._footerTop_1ygoa_8 ._footerTopLeft_1ygoa_16 h2{font-size:var(--font-size-h5);font-weight:var(--font-weight-h5);padding-bottom:32px}._footer_1ygoa_1 ._footerTop_1ygoa_8 ._footerTopRight_1ygoa_28{font-size:var(--font-size-body-regular)}._footer_1ygoa_1 ._footerMiddle_1ygoa_31{background-color:var(--color-visit)}._footer_1ygoa_1 ._footerMiddle_1ygoa_31 ._footerMiddleWrapper_1ygoa_34 img{padding-bottom:72px}._footer_1ygoa_1 ._footerMiddle_1ygoa_31 ._footerMiddleWrapper_1ygoa_34 ._footerItem_1ygoa_37 h3{color:var(--color-taste);font-size:var(--font-size-small);font-weight:var(--font-weight-h4)}._footer_1ygoa_1 ._footerMiddle_1ygoa_31 ._footerMiddleWrapper_1ygoa_34 ._footerItem_1ygoa_37 ul{display:none}._footer_1ygoa_1 ._footerBottom_1ygoa_45{background-color:var(--color-visit)}._footer_1ygoa_1 ._footerBottom_1ygoa_45 ._footerBottomWrapper_1ygoa_48 ._footerBottomLeft_1ygoa_48 ._footerBottomLeftWrapper_1ygoa_48 ._footerBottomLeftLogo_1ygoa_48{color:var(--color-taste);font-size:var(--font-size-body-sm)}._footer_1ygoa_1 ._footerBottom_1ygoa_45 ._footerBottomWrapper_1ygoa_48 ._footerBottomLeft_1ygoa_48 ._footerBottomLeftWrapper_1ygoa_48 ._footerBottomLeftLogo_1ygoa_48 img{padding-bottom:24px}._footer_1ygoa_1 ._footerBottom_1ygoa_45 ._footerBottomWrapper_1ygoa_48 ._footerBottomLeft_1ygoa_48 ._footerBottomLeftWrapper_1ygoa_48 ._footerBottomLeftLinks_1ygoa_55{display:flex;align-items:flex-end}._footer_1ygoa_1 ._footerBottom_1ygoa_45 ._footerBottomWrapper_1ygoa_48 ._footerBottomLeft_1ygoa_48 ._footerBottomLeftWrapper_1ygoa_48 ._footerBottomLeftLinks_1ygoa_55 ul{display:flex;gap:24px;list-style:none;padding:0;margin:0}._footer_1ygoa_1 ._footerBottom_1ygoa_45 ._footerBottomWrapper_1ygoa_48 ._footerBottomLeft_1ygoa_48 ._footerBottomLeftWrapper_1ygoa_48 ._footerBottomLeftLinks_1ygoa_55 ul a{color:var(--color-taste);font-size:var(--font-size-body-sm)}._footer_1ygoa_1 ._footerBottom_1ygoa_45 ._footerBottomWrapper_1ygoa_48 ._footerBottomRight_1ygoa_70 ._footerBottomRightWrapper_1ygoa_70{display:flex;padding-top:72px;gap:16px}._footer_1ygoa_1 ._footerBottom_1ygoa_45 ._footerBottomWrapper_1ygoa_48 ._footerBottomRight_1ygoa_70 ._footerBottomRightWrapper_1ygoa_70 ._footerLogo_1ygoa_75{display:flex;background-color:var(--color-taste);border-radius:50%;height:40px;width:40px;align-items:center;justify-content:center}._footer_1ygoa_1 ._footerBottom_1ygoa_45 ._footerBottomWrapper_1ygoa_48 ._footerBottomRight_1ygoa_70 ._footerBottomRightWrapper_1ygoa_70 ._footerLogo_1ygoa_75 a{display:flex;color:var(--color-visit)}._footer_1ygoa_1 ._footerBottom_1ygoa_45 ._footerBottomWrapper_1ygoa_48 ._footerBottomRight_1ygoa_70 ._footerBottomRightWrapper_1ygoa_70 ._footerLogo_1ygoa_75 a svg{height:24px;width:24px}@media screen and (min-width:1440px){._footer_1ygoa_1 ._footerTop_1ygoa_8{position:relative}._footer_1ygoa_1 ._footerTop_1ygoa_8 ._footerTopWrapper_1ygoa_13{display:flex;gap:154px;justify-content:space-between}._footer_1ygoa_1 ._footerTop_1ygoa_8 ._footerTopWrapper_1ygoa_13 ._footerTopLeft_1ygoa_16{display:flex;flex-direction:column;justify-content:center;align-items:start}._footer_1ygoa_1 ._footerTop_1ygoa_8 ._footerTopWrapper_1ygoa_13 ._footerTopLeft_1ygoa_16 h1{font-size:var(--font-size-h3);font-weight:var(--font-weight-h1);line-height:var(--line-height-h3)}._footer_1ygoa_1 ._footerTop_1ygoa_8 ._footerTopWrapper_1ygoa_13 ._footerTopLeft_1ygoa_16 h2{font-size:var(--font-size-h3);font-weight:var(--font-weight-bold);line-height:var(--line-height-h3)}._footer_1ygoa_1 ._footerTop_1ygoa_8 ._footerTopWrapper_1ygoa_13 ._footerTopRight_1ygoa_28{display:flex;justify-content:center;align-items:center}._footer_1ygoa_1 ._footerTop_1ygoa_8 ._footerTopWrapper_1ygoa_13 ._footerTopRight_1ygoa_28 p{font-size:var(--font-size-small)}._footer_1ygoa_1 ._footerTop_1ygoa_8 ._footerBgDesignContainer_1ygoa_125{position:absolute;top:0;bottom:0;right:96px}._footer_1ygoa_1 ._footerTop_1ygoa_8 ._footerBgDesignContainer_1ygoa_125 svg{height:100%}._footer_1ygoa_1 ._footerMiddle_1ygoa_31 ._footerMiddleWrapper_1ygoa_34{display:flex;flex-wrap:wrap;padding-top:64px;padding-bottom:32px}._footer_1ygoa_1 ._footerMiddle_1ygoa_31 ._footerMiddleWrapper_1ygoa_34 ._footerLogoContainer_1ygoa_140{flex:1}._footer_1ygoa_1 ._footerMiddle_1ygoa_31 ._footerMiddleWrapper_1ygoa_34 ._socialMediaLinks_1ygoa_143{display:none}._footer_1ygoa_1 ._footerMiddle_1ygoa_31 ._footerMiddleLinks_1ygoa_146{display:flex;flex-grow:1;flex-wrap:wrap}._footer_1ygoa_1 ._footerMiddle_1ygoa_31 ._footerItem_1ygoa_37{width:20%}._footer_1ygoa_1 ._footerMiddle_1ygoa_31 ._footerItem_1ygoa_37 h3{padding-bottom:28px;font-weight:var(--font-weight-body-sm)}._footer_1ygoa_1 ._footerMiddle_1ygoa_31 ._footerItem_1ygoa_37 ul{display:block!important;gap:16px;list-style:none;padding:0;margin:0}._footer_1ygoa_1 ._footerMiddle_1ygoa_31 ._footerItem_1ygoa_37 a{color:var(--color-sand);font-size:var(--font-size-body-xsm)}._footer_1ygoa_1 ._footerBottom_1ygoa_45{padding-bottom:38px}._footer_1ygoa_1 ._footerBottom_1ygoa_45 ._footerBottomWrapper_1ygoa_48{display:flex;justify-content:space-between}._footer_1ygoa_1 ._footerBottom_1ygoa_45 ._footerBottomWrapper_1ygoa_48 ._footerBottomLeft_1ygoa_48 ._footerBottomLeftWrapper_1ygoa_48{display:flex;gap:166px}._footer_1ygoa_1 ._footerBottom_1ygoa_45 ._footerBottomWrapper_1ygoa_48 ._footerBottomRight_1ygoa_70 ._footerBottomRightWrapper_1ygoa_70{display:flex}._footer_1ygoa_1 ._footerBottom_1ygoa_45 ._footerBottomWrapper_1ygoa_48 ._footerBottomRight_1ygoa_70 ._footerBottomRightWrapper_1ygoa_70 ._footerLogoWrapper_1ygoa_183{padding:0 8px}._footer_1ygoa_1 ._footerBottom_1ygoa_45 ._footerBottomWrapper_1ygoa_48 ._footerBottomRight_1ygoa_70 ._footerBottomRightWrapper_1ygoa_70 ._footerLogoWrapper_1ygoa_183 ._footerLogo_1ygoa_75{display:flex;background-color:#92c134;border-radius:50%;height:40px;width:40px;align-items:center;justify-content:center}._footer_1ygoa_1 ._footerBottom_1ygoa_45 ._footerBottomWrapper_1ygoa_48 ._footerBottomRight_1ygoa_70 ._footerBottomRightWrapper_1ygoa_70 ._footerLogoWrapper_1ygoa_183 ._footerLogo_1ygoa_75 a{display:flex;color:var(--color-inverse-text)}._footer_1ygoa_1 ._footerBottom_1ygoa_45 ._footerBottomWrapper_1ygoa_48 ._footerBottomRight_1ygoa_70 ._footerBottomRightWrapper_1ygoa_70 ._footerLogoWrapper_1ygoa_183 ._footerLogo_1ygoa_75 a svg{height:24px;width:24px}}._header_i7gjd_1{background:var(--header-bg)}._header_i7gjd_1 ._headerWrapper_i7gjd_4{display:flex;align-items:center;justify-content:space-between;min-height:96px}._header_i7gjd_1 ._headerLogo_i7gjd_10,._header_i7gjd_1 ._headerLogo_i7gjd_10 a{display:flex}._header_i7gjd_1 ._logo_i7gjd_16{display:none}._header_i7gjd_1 ._logoSmall_i7gjd_19{display:block}._header_i7gjd_1 ._headerRightWrapper_i7gjd_22{display:flex;align-items:center;margin:0 -16px}._header_i7gjd_1 ._headerBottomItemHolder_i7gjd_27{padding:0 16px;transition:color .3s ease-in}._header_i7gjd_1 ._headerBottomItemHolder_i7gjd_27 a{display:flex;align-items:center;color:var(--header-color);font-size:24px;font-weight:400;line-height:1.5;cursor:pointer}._header_i7gjd_1 ._headerBottomItemHolder_i7gjd_27 a ._icon_i7gjd_40{display:flex}._header_i7gjd_1 ._headerBottomItemHolder_i7gjd_27 a ._icon_i7gjd_40 svg{width:24px;height:24px}._header_i7gjd_1 ._headerBottomItemHolder_i7gjd_27:hover a,._header_i7gjd_1 ._headerBottomItemHolder_i7gjd_27._active_i7gjd_47 a{color:var(--font-color)}@media screen and (min-width:1648px){._header_i7gjd_1 ._headerRightWrapper_i7gjd_22{display:flex;align-items:center;margin:0 -28px}._header_i7gjd_1 ._headerBottomItemHolder_i7gjd_27{padding:0 28px}}@media screen and (min-width:992px){._header_i7gjd_1 ._logo_i7gjd_16{display:block}._header_i7gjd_1 ._logoSmall_i7gjd_19{display:none}}._hero_ohgms_1{background:var(--color-bg)}._heroLarge_ohgms_4{position:relative;min-height:90vh}._heroLarge_ohgms_4 ._heroImg_ohgms_8{position:absolute;inset:0;border-radius:0 0 366px;overflow:hidden;background:linear-gradient(180deg,#00000080,#0000 41.35%),linear-gradient(0deg,#7c847b0d 0% 100%),#000}._heroLarge_ohgms_4 ._heroImg_ohgms_8 img{width:100%;height:100%;object-fit:cover;object-position:center}._heroLarge_ohgms_4 ._heroWrapper_ohgms_24{position:relative;z-index:10;width:100%;height:100%;padding-top:112px;color:var(--color-text)}._heroLarge_ohgms_4 ._heroWrapper_ohgms_24 h1{max-width:898px;font-size:var(--font-size-h1);line-height:1;font-weight:400;letter-spacing:-7.68px}._heroLarge_ohgms_4 ._heroWrapper_ohgms_24 h1 span{font-weight:700}._heroLarge_ohgms_4 ._heroSvg_ohgms_42{color:var(--color-text);position:absolute;z-index:5;left:0;bottom:0;height:340px}._heroMedium_ohgms_50{position:relative}._heroMedium_ohgms_50 ._heroWrapper_ohgms_24{display:flex;min-height:72vh;flex-wrap:wrap}._heroMedium_ohgms_50 ._heroWrapper_ohgms_24 ._content_ohgms_58{display:flex;flex-direction:column;justify-content:center;width:50%;padding:120px 0;color:var(--color-text)}._heroMedium_ohgms_50 ._heroWrapper_ohgms_24 ._content_ohgms_58 h1{max-width:604px;font-size:var(--font-size-h2);line-height:1;font-weight:400;letter-spacing:-5.6px}._heroMedium_ohgms_50 ._heroWrapper_ohgms_24 ._content_ohgms_58 h1 span{font-weight:700}._heroMedium_ohgms_50 ._heroWrapper_ohgms_24 ._content_ohgms_58 p{font-size:24px;line-height:1.3;font-weight:400;margin-top:90px;max-width:604px}._heroMedium_ohgms_50 ._heroWrapper_ohgms_24 ._heroImg_ohgms_8{position:absolute;right:0;width:50%;height:100%;border-radius:500px 0 0;overflow:hidden}._heroMedium_ohgms_50 ._heroWrapper_ohgms_24 ._heroImg_ohgms_8 img{width:100%;height:100%;object-fit:cover;object-position:center}._heroSmall_ohgms_97{position:relative}._heroSmall_ohgms_97 ._heroWrapper_ohgms_24{display:flex;min-height:50vh;flex-wrap:wrap}._heroSmall_ohgms_97 ._heroWrapper_ohgms_24 ._content_ohgms_58{display:flex;flex-direction:column;justify-content:center;width:50%;color:var(--color-text);padding:100px 0}._heroSmall_ohgms_97 ._heroWrapper_ohgms_24 ._content_ohgms_58 h1{max-width:604px;font-size:var(--font-size-h3);line-height:1;font-weight:400;letter-spacing:-3.6px}._heroSmall_ohgms_97 ._heroWrapper_ohgms_24 ._content_ohgms_58 h1 span{font-weight:700}._heroSmall_ohgms_97 ._heroWrapper_ohgms_24 ._content_ohgms_58 p{font-size:24px;line-height:1.3;font-weight:400;margin-top:90px;max-width:604px}._heroSmall_ohgms_97 ._heroWrapper_ohgms_24 ._heroImg_ohgms_8{position:absolute;right:0;width:50%;height:100%;border-radius:500px 0 0;overflow:hidden}._heroSmall_ohgms_97 ._heroWrapper_ohgms_24 ._heroImg_ohgms_8 img{width:100%;height:100%;object-fit:cover;object-position:center}

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@hellobetterdigitalnz/selwynui",
+  "version": "0.0.1-1",
+  "type": "module",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src/Components/**/*"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "dts": "^0.1.1",
+    "es6-slide-up-down": "^1.0.0",
+    "prop-types": "^15.8.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-icons": "^5.5.0",
+    "sass": "^1.94.1",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "peerDependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "4.1.2",
+    "@eslint/js": "^9.39.1",
+    "@storybook/addon-a11y": "10.0.7",
+    "@storybook/addon-docs": "10.0.7",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-vitest": "10.0.7",
+    "@storybook/react": "^10.0.7",
+    "@storybook/react-vite": "^10.0.7",
+    "@types/node": "^24.10.0",
+    "@types/prop-types": "^15.7.15",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "@vitejs/plugin-react": "^5.1.0",
+    "@vitest/browser-playwright": "^4.0.8",
+    "@vitest/coverage-v8": "^4.0.8",
+    "classnames": "^2.5.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "eslint-plugin-storybook": "10.0.7",
+    "globals": "^16.5.0",
+    "playwright": "^1.56.1",
+    "sass-embedded": "^1.93.3",
+    "storybook": "^10.0.7",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.3",
+    "vite": "^7.2.2",
+    "vitest": "^4.0.8",
+    "webpack": "^5.102.1",
+    "webpack-cli": "^6.0.1"
+  },
+  "customConfig": {
+    "featureEnabled": true
+  }
+}

package/src/Components/DataDisplay/Accordion/Accordion.stories.tsx

@@ -0,0 +1,90 @@
+import React, {useState} from "react";
+import {Meta, StoryObj} from '@storybook/react-vite';
+// @ts-ignore
+import Accordion from './Accordion.tsx';
+// @ts-ignore
+import AccordionItem from './AccordionItem.tsx';
+import Container from "../../Shared/Container/Container";
+import ElementHolder from "../../Shared/ElementHolder/ElementHolder";
+
+const meta: Meta = {
+  title: 'DataDisplay / Accordion',
+  component: Accordion,
+  parameters: {
+    layout: 'fullscreen', // remove default Storybook padding
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const AccordionTemplate: Story = {
+    render: ({ items, ...args }) => {
+        // keep track of open states by index
+        const [openItems, setOpenItems] = useState<Record<string, boolean>>({});
+
+        const handleToggle = (id: string, value: boolean) => {
+            setOpenItems((prev) => ({ ...prev, [id]: value }));
+        };
+
+        return (
+            <ElementHolder paddingBottom="md" paddingTop="sm" pillar="visit">
+                <Container>
+                    <Accordion {...args}>
+                        {items.map((item: any) => (
+                            <AccordionItem
+                                key={item.index}
+                                isOpen={!!openItems[item.index]}
+                                onToggle={(val) => handleToggle(item.index, val)}
+                                index={item.index}
+                                title={item.title}
+                            >
+                                {item.children}
+                            </AccordionItem>
+                        ))}
+                    </Accordion>
+                </Container>
+
+                {/* Buttons to trigger specific IDs */}
+            </ElementHolder>
+        );
+    },
+};
+
+export const Example = {
+  ...AccordionTemplate,
+  args: {
+    allowMultiple:true,
+    title: 'Insights lorem ipsum dolor sit amet',
+    content: 'Sed fringilla magna facilisis auctor venenatis. Duis ut vestibulum risus. Nunc a finibus dui. Donec hendrerit tristique odio, ac porta dui maximus et. Duis vestibulum velit eget erat fermentum, fermentum mollis tortor tincidunt. Integer lacinia lacinia urna scelerisque mattis. Fusce vestibulum felis eget magna placerat faucibus id et tellus. Sed rutrum mi sed leo viverra tempus. Nunc eu congue tellus, sed dapibus dui.',
+    // image: '/img/accordion-image.svg',
+    items: [
+      {
+        index:'1',
+        title: 'Lorem ipsum dolor',
+        children: 'Sed fringilla magna facilisis auctor venenatis. Duis ut vestibulum risus. Nunc a finibus dui. Donec hendrerit tristique odio, ac porta dui maximus et. Duis vestibulum velit eget erat fermentum, fermentum mollis tortor tincidunt. Integer lacinia lacinia urna scelerisque mattis. Fusce vestibulum felis eget magna placerat faucibus id et tellus. Sed rutrum mi sed leo viverra tempus. Nunc eu congue tellus, sed dapibus dui.'
+      },
+      {
+        index:'2',
+        title: 'Lorem ipsum dolor',
+        children: <>
+        <p>'Sed fringilla magna facilisis auctor venenatis. Duis ut vestibulum risus. Nunc a finibus dui. Donec hendrerit tristique odio, ac porta dui maximus et. Duis vestibulum velit eget erat fermentum, fermentum mollis tortor tincidunt. Integer lacinia lacinia urna scelerisque mattis. Fusce vestibulum felis eget magna placerat faucibus id et tellus. Sed rutrum mi sed leo viverra tempus. Nunc eu congue tellus, sed dapibus dui.'</p>
+        <img src="/img/accordion-image.svg" alt="" />
+        </>,
+      },
+      {
+        index:'3',
+        title: 'Lorem ipsum dolor',
+        children: 'Sed fringilla magna facilisis auctor venenatis. Duis ut vestibulum risus. Nunc a finibus dui. Donec hendrerit tristique odio, ac porta dui maximus et. Duis vestibulum velit eget erat fermentum, fermentum mollis tortor tincidunt. Integer lacinia lacinia urna scelerisque mattis. Fusce vestibulum felis eget magna placerat faucibus id et tellus. Sed rutrum mi sed leo viverra tempus. Nunc eu congue tellus, sed dapibus dui.'
+      },
+      {
+        index:'4',
+        title: 'Lorem ipsum dolor',
+        children: 'Sed fringilla magna facilisis auctor venenatis. Duis ut vestibulum risus. Nunc a finibus dui. Donec hendrerit tristique odio, ac porta dui maximus et. Duis vestibulum velit eget erat fermentum, fermentum mollis tortor tincidunt. Integer lacinia lacinia urna scelerisque mattis. Fusce vestibulum felis eget magna placerat faucibus id et tellus. Sed rutrum mi sed leo viverra tempus. Nunc eu congue tellus, sed dapibus dui.'
+      },
+    ],
+  },
+};
+

package/src/Components/DataDisplay/Accordion/Accordion.tsx

@@ -0,0 +1,57 @@
+import styles from "./Accordion.module.scss";
+import AccordionProvider from "./AccordionProvider";
+import AccordionProps from "./AccordionProps.tsx";
+import ScrollFadeIn from "../../Shared/ScrollFadeIn/ScrollFadeIn.tsx";
+import React, { Children, useEffect, useState } from "react";
+import AccordionBgDesign from "./accordion-bg-design.tsx";
+
+const Accordion = (props: AccordionProps) => {
+  const {
+    children,
+    allowMultiple,
+    title,
+    content,
+    image,
+    activeId,
+    onActiveIdChange
+  } = props;
+
+  const childrenArray = Children.toArray(children);
+
+  const [isTabletOrLarger, setIsTabletOrLarger] = useState(
+    typeof window !== "undefined" ? window.innerWidth >= 768 : false
+  );
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsTabletOrLarger(window.innerWidth >= 768);
+    };
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  return (
+    <AccordionProvider allowMultiple={allowMultiple ?? false} >
+      <div className={styles.accordionBlock}>
+        {title && (
+          <div className={styles.accordionHeading}>
+            <ScrollFadeIn>
+              <h2>{title}</h2>
+              <p>{content}</p>
+            </ScrollFadeIn>
+          </div>
+
+        )}
+        <div className={`${styles.accordionWrapper}`}>
+          <div className={styles.accordionBgDesignContainer}>
+            <AccordionBgDesign />
+          </div>
+          {children}
+        </div>
+      </div>
+    </AccordionProvider>
+  );
+};
+
+export default Accordion;

package/src/Components/DataDisplay/Accordion/AccordionContext.tsx

@@ -0,0 +1,11 @@
+import {createContext} from "react";
+import AccordionContextInterface from "./AccordionContextInterface.tsx";
+
+const AccordionContext = createContext<AccordionContextInterface>({
+  handleClick: (index: number) => { console.log(`Handling click for index ${index}`); },
+  isOpened: (index: number) => { console.log(`Handle index ${index} is opened`); return false; },
+  allowMultiple: false,
+  openedList: [],
+});
+
+export default AccordionContext;

package/src/Components/DataDisplay/Accordion/AccordionContextInterface.tsx

@@ -0,0 +1,8 @@
+interface AccordionContextInterface {
+  handleClick: (index: number) => void;
+  isOpened: (index: number) => boolean;
+  allowMultiple?: boolean;
+  openedList: any[];
+}
+
+export default AccordionContextInterface

package/src/Components/DataDisplay/Accordion/AccordionItem.tsx

@@ -0,0 +1,159 @@
+import { useContext, useEffect, useRef } from "react";
+import AccordionContext from "./AccordionContext";
+import AccordionItemProps from "./AccordionItemProps.tsx";
+import styles from "./accordion.module.scss";
+import CaretUp from "../../Icons/Arrows/CaretUp/CaretUp";
+import CaretDown from "../../Icons/Arrows/CaretDown/CaretDown";
+import { slideDown, slideUp } from "es6-slide-up-down";
+import useScrollFadeIn from "../../Shared/Hook/useScrollFadeIn/useScrollFadeIn.tsx";
+
+const ANIMATION_DURATION = 300;
+
+const AccordionItem = (props: AccordionItemProps) => {
+    const {
+        index,
+        title,
+        children,
+        onAfterOpened,
+        onAfterClosed,
+        onBeforeClosed,
+        extraClass = "",
+        accordionClass,
+        icon,
+        elementId,
+        isOpen,
+        onToggle,
+    } = props;
+
+    const { ref, className } = useScrollFadeIn();
+    const itemIndex = typeof index === "string" ? parseInt(index) : index;
+    const context = useContext(AccordionContext);
+    const bodyRef = useRef<HTMLDivElement>(null);
+
+    const isControlled = isOpen !== undefined;
+    const isOpened = isControlled ? !!isOpen : context.isOpened(itemIndex);
+
+    const closeHideTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    const clearCloseTimer = () => {
+        if (closeHideTimer.current) {
+            clearTimeout(closeHideTimer.current);
+            closeHideTimer.current = null;
+        }
+    };
+
+    const handleClick = () => {
+        if (isControlled) {
+            onToggle?.(!isOpened);
+            return;
+        }
+
+        if (isOpened) {
+            let canClose = true;
+            if (onBeforeClosed) canClose = onBeforeClosed();
+            if (canClose) {
+                if (bodyRef.current) {
+                    const el = bodyRef.current;
+                    clearCloseTimer();
+                    el.style.display = "block";
+                    slideUp(el, { duration: ANIMATION_DURATION });
+                    closeHideTimer.current = setTimeout(() => {
+                        el.style.display = "none";
+                        context.handleClick(itemIndex);
+                        onAfterClosed?.();
+                    }, ANIMATION_DURATION);
+                } else {
+                    context.handleClick(itemIndex);
+                    onAfterClosed?.();
+                }
+            }
+        } else {
+            context.handleClick(itemIndex);
+            if (bodyRef.current) {
+                const el = bodyRef.current;
+                clearCloseTimer();
+                el.style.display = "block";
+                slideDown(el, { duration: ANIMATION_DURATION });
+                setTimeout(() => onAfterOpened?.(), ANIMATION_DURATION);
+            } else {
+                onAfterOpened?.();
+            }
+        }
+    };
+
+    useEffect(() => {
+        if (!bodyRef.current) return;
+        bodyRef.current.style.display = isOpened ? "block" : "none";
+    }, []);
+
+    useEffect(() => {
+        if (!isControlled || !bodyRef.current) return;
+
+        const el = bodyRef.current;
+        clearCloseTimer();
+
+        if (isOpened) {
+
+            el.style.display = "block";
+            slideDown(el, { duration: ANIMATION_DURATION });
+            const t = setTimeout(() => onAfterOpened?.(), ANIMATION_DURATION);
+            return () => clearTimeout(t);
+        } else {
+            el.style.display = "block";
+            slideUp(el, { duration: ANIMATION_DURATION });
+            closeHideTimer.current = setTimeout(() => {
+                el.style.display = "none";
+                onAfterClosed?.();
+            }, ANIMATION_DURATION);
+        }
+    }, [isOpened, isControlled, onAfterClosed, onAfterOpened]);
+
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => clearCloseTimer();
+    }, []);
+
+    return (
+        <div
+            ref={ref as any}
+            id={elementId}
+            className={`scrollFadeIn ${className} ${styles.accordion} ${extraClass}`}
+        >
+            <div
+                onClick={handleClick}
+                className={`${styles.header} accordionHeader`}
+                aria-expanded={isOpened}
+                aria-controls={`accordion-body-${elementId}`}
+            >
+                <div className={styles.title}>
+                    {icon && (
+                        <div className={`${styles.accordionIcon} ${accordionClass}`}>{icon}</div>
+                    )}
+                    <h4>{title}</h4>
+                </div>
+                <div className={`${styles.icon} accordionIcon`}>
+                    {isOpened ? <CaretUp /> : <CaretDown />}
+                </div>
+            </div>
+
+            <div
+                className={`${styles.accordionBodyHolder} ${isOpened ? styles.accordionBodyHolderOpened : ""
+                    } accordionBodyHolder`}
+            >
+                <div
+                    ref={bodyRef}
+                    id={`accordion-body-${elementId}`}
+                    className={`accordionBody ${styles.accordionBody}`}
+                    style={{ overflow: "hidden" }}
+                >
+                    <div className={`${styles.bodyInner} accordionBodyInner`}>{children}</div>
+                </div>
+            </div>
+
+            <hr className={styles.accordionHorizontalLine}/>
+            
+        </div>
+    );
+};
+
+export default AccordionItem;

package/src/Components/DataDisplay/Accordion/AccordionItemProps.tsx

@@ -0,0 +1,20 @@
+import {ReactNode} from "react";
+
+interface AccordionItemProps {
+  index: string | number;
+  title: string;
+  children: string | ReactNode;
+  onAfterOpened?: () => void;
+  onAfterClosed?: () => void;
+  onBeforeClosed?: () => boolean;
+  extraClass?:string;
+  accordionClass?:string;
+  icon?:ReactNode;
+  column?: "one" | "two";
+  id?: any;
+  elementId?: string;
+  isOpen?: boolean;
+  onToggle?: (open: boolean) => void;
+}
+
+export default AccordionItemProps;

package/src/Components/DataDisplay/Accordion/AccordionProps.tsx

@@ -0,0 +1,13 @@
+import {ReactNode} from "react";
+
+interface AccordionProps {
+  allowMultiple?: boolean;
+  children: ReactNode;
+  title?: string;
+  content?: string;
+  image?: string;
+  activeId?: number | null;
+  onActiveIdChange?: (id: number | null) => void;
+}
+
+export default AccordionProps;

package/src/Components/DataDisplay/Accordion/AccordionProvider.tsx

@@ -0,0 +1,66 @@
+import {useState} from "react";
+import AccordionContext from "./AccordionContext";
+import AccordionProviderInterface from "./AccordionProviderInterface.tsx";
+
+const AccordionProvider = (props: AccordionProviderInterface) => {
+
+  const {
+    children,
+    allowMultiple
+  } = props;
+
+  const [openedList, setOpenedList] = useState<any[]>([]);
+  
+
+  const isOpened = (key: number|string) => {
+    return openedList.indexOf(key) >= 0;
+  }
+
+  const openItem = (key: number|string) => {
+    if (allowMultiple) {
+      const list = [...openedList];
+      list.push(key);
+      setOpenedList(list);
+    } else {
+      setOpenedList([key])
+    }
+  }
+
+  const closeItem = (key: number|string) => {
+    if (allowMultiple) {
+      const list = [...openedList];
+      list.splice(list.indexOf(key), 1)
+      setOpenedList(list);
+    } else {
+      setOpenedList([]);
+    }
+  }
+
+  const openCloseItem = (key: number|string) => {
+    if (allowMultiple) {
+      if (isOpened(key)) {
+        closeItem(key);
+      } else {
+        openItem(key)
+      }
+    } else {
+      if (!isOpened(key)) {
+        openItem(key);
+      } else {
+        closeItem(key);
+      }
+    }
+  }
+
+  return <AccordionContext.Provider value={{
+    handleClick: openCloseItem,
+    isOpened: isOpened,
+    allowMultiple: allowMultiple ? allowMultiple : false,
+    openedList: openedList
+  }}>
+    {children}
+  </AccordionContext.Provider>
+
+}
+
+export default AccordionProvider;

package/src/Components/DataDisplay/Accordion/AccordionProviderInterface.tsx

@@ -0,0 +1,9 @@
+import {ReactNode} from "react";
+
+interface AccordionProviderInterface {
+  children: ReactNode,
+  allowMultiple?: boolean,
+  activeId?:string
+}
+
+export default AccordionProviderInterface

package/src/Components/DataDisplay/Accordion/accordion-bg-design.tsx

@@ -0,0 +1,14 @@
+const AccordionBgDesign = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="543" height="490" viewBox="0 0 543 490" fill="none">
+            <g opacity="0.05">
+                <path d="M0 251.765C145.603 251.765 263.669 358.442 263.669 490H0V251.765Z" fill="#92C134" />
+                <path d="M0 0.0778264C145.603 0.0778264 263.669 106.755 263.669 238.313H0V0.0778264Z" fill="#92C134" />
+                <path d="M543 489.922C543 358.364 424.934 251.687 279.331 251.687V489.922H543Z" fill="#92C134" />
+                <path d="M543 238.235C543 106.677 424.934 0 279.331 0V238.235H543Z" fill="#92C134" />
+            </g>
+        </svg>
+    )
+}
+
+export default AccordionBgDesign;