From b476941dfef3d0da624686ca7f5ce868bb653993 Mon Sep 17 00:00:00 2001 From: mikkojamG Date: Wed, 18 Oct 2023 09:23:05 +0300 Subject: [PATCH] Update hds-1909 demo --- .../{static/css/main.829f7692.css => css/main.60178a80.css} | 4 ++-- docs/hds-1909-react/css/main.60178a80.css.map | 1 + docs/hds-1909-react/iframe.html | 4 ++-- ...43d23b.iframe.bundle.js => main.b42062d7.iframe.bundle.js} | 2 +- docs/hds-1909-react/static/css/main.829f7692.css.map | 1 - 5 files changed, 6 insertions(+), 6 deletions(-) rename docs/hds-1909-react/{static/css/main.829f7692.css => css/main.60178a80.css} (99%) create mode 100644 docs/hds-1909-react/css/main.60178a80.css.map rename docs/hds-1909-react/{main.5543d23b.iframe.bundle.js => main.b42062d7.iframe.bundle.js} (79%) delete mode 100644 docs/hds-1909-react/static/css/main.829f7692.css.map diff --git a/docs/hds-1909-react/static/css/main.829f7692.css b/docs/hds-1909-react/css/main.60178a80.css similarity index 99% rename from docs/hds-1909-react/static/css/main.829f7692.css rename to docs/hds-1909-react/css/main.60178a80.css index 228da686169..ff7bda4aeb1 100644 --- a/docs/hds-1909-react/static/css/main.829f7692.css +++ b/docs/hds-1909-react/css/main.60178a80.css @@ -788,7 +788,7 @@ html { .Header_header__QJfsy{--header-background-color: var(--color-white);--header-color: var(--color-black-90);--header-height: var(--spacing-4-xl);--header-focus-outline-width: 3px;--header-focus-outline-border-radius: 0;--header-focus-outline-color: var(--color-coat-of-arms);--header-divider-color: var(--color-black-20);--header-z-index: 10;--header-margin: var(--spacing-m);--header-max-width: 1440px;--header-item-border-color: var(--color-black-20);--header-item-hover-color: var(--color-black-20);--actionbar-background-color: var(--color-white);--action-bar-container-height: 88px;--action-bar-section-gutter: var(--spacing-s);--action-bar-dropdown-menu-caret-width: 64px;--action-bar-dropdown-menu-primary-item-height: 64px;--action-bar-dropdown-menu-secondary-item-height: 48px;--action-bar-button-size: 64px;--action-bar-item-gutter: 12px;--action-bar-item-title-font-size: var(--fontsize-body-s);--action-bar-item-title-font-color: var(--header-color);--lang-selector-mobile-background-color: var(--color-silver-light);--lang-selector-item-font-color: var(--header-color);--lang-selector-dropdown-background-color: var(--color-white);--nav-link-font-color: var(--header-color);--nav-border-color: var(--color-black-20);--nav-link-hover-color: var(--color-black-90);--nav-link-dropdown-background-color: var(--color-white);--nav-button-background-color: var(--color-black-5);--nav-button-hover-background-color: var(--color-black-5);--nav-search-color: var(--header-color);--nav-mobile-menu-background-color: var(--color-white);--nav-mobile-menu-bottom-background-color: var(--color-silver-light);--nav-mobile-margin-left: var(--spacing-s);--universal-bar-background-color: var(--color-black-5);--logo-height: 56px;--icon-size: 24px;--nav-drop-down-icon-color: var(--color-black);--nav-background-color:var(--color-white);background-color:var(--header-background-color);color:var(--header-color);position:relative;width:100%}@media only screen and (max-width: 991px){.Header_header__QJfsy{--action-bar-container-height: 74px;--logo-height: 48px}}@media only screen and (max-width: 767px){.Header_header__QJfsy{--header-margin: var(--spacing-s);--action-bar-container-height: 64px;--logo-height: 32px}}@media only screen and (max-width: 575px){.Header_header__QJfsy{--header-margin: var(--spacing-xs);--action-bar-container-height: 64px;--logo-height: 32px}}.Header_header__QJfsy.Header_theme-dark__H5GH1{--color-focus-outline: var(--color-white);--header-color: var(--color-white);--header-focus-outline-color: var(--color-white);--header-background-color: var(--color-black-80);--nav-border-color: var(--color-white);--nav-link-hover-color: var(--color-white);--universal-bar-background-color: var(--color-black-60);--navigation-link-button-background-color: var(--color-black-60);--nav-link-dropdown-background-color: var(--color-black-80);--lang-selector-mobile-background-color: var(--color-black-80);--lang-selector-dropdown-background-color: var(--color-black-60);--nav-button-background-color: var(--color-black-60);--nav-button-hover-background-color: var(--color-black-60);--nav-drop-down-icon-color: var(--color-white);--actionbar-background-color: var(--color-black-80);--nav-background-color: var(--color-black-80);--nav-mobile-menu-background-color: var(--color-black-80);--nav-mobile-menu-bottom-background-color: var(--color-black-60)}.Header_headerBackgroundWrapper__E\+oFj{position:relative;z-index:var(--header-z-index)} .HeaderUniversalBar_headerUniversalBar__5yFHV{align-items:center;box-sizing:border-box;display:flex;margin:0 auto;max-width:var(--header-max-width);min-height:48px;padding:0 var(--header-margin);width:100%}.HeaderUniversalBar_headerUniversalBarContainer__Rz4zN{background:var(--universal-bar-background-color);width:100%}.HeaderUniversalBar_headerUniversalBarList__Wv4g\+{display:flex;gap:0 var(--spacing-l);list-style:none;margin:0;padding:0;width:100%}.HeaderUniversalBar_universalBarMainLinkContainer__cmBG5{display:flex;flex:1 1;justify-self:start}.HeaderUniversalBar_universalBarSecondaryLinkContainer__gfhCe{display:flex;justify-self:end}.HeaderUniversalBar_universalBarSecondaryLinkContainer__gfhCe:last-child{margin-right:0}.HeaderUniversalBar_universalBarLink__fCvdQ.HeaderUniversalBar_universalBarLink__fCvdQ{font-size:var(--fontsize-body-m)}@media only screen and (max-width: 767.98px){.HeaderUniversalBar_headerUniversalBarList__Wv4g\+{gap:0 var(--spacing-m)}}@media only screen and (max-width: 575.98px){.HeaderUniversalBar_universalBarLink__fCvdQ.HeaderUniversalBar_universalBarLink__fCvdQ{font-size:var(--fontsize-body-s)}} .HeaderLink_header__HS1GF{--header-background-color: var(--color-white);--header-color: var(--color-black-90);--header-height: var(--spacing-4-xl);--header-focus-outline-width: 3px;--header-focus-outline-border-radius: 0;--header-focus-outline-color: var(--color-coat-of-arms);--header-divider-color: var(--color-black-20);--header-z-index: 10;--header-margin: var(--spacing-m);--header-max-width: 1440px;--header-item-border-color: var(--color-black-20);--header-item-hover-color: var(--color-black-20);--actionbar-background-color: var(--color-white);--action-bar-container-height: 88px;--action-bar-section-gutter: var(--spacing-s);--action-bar-dropdown-menu-caret-width: 64px;--action-bar-dropdown-menu-primary-item-height: 64px;--action-bar-dropdown-menu-secondary-item-height: 48px;--action-bar-button-size: 64px;--action-bar-item-gutter: 12px;--action-bar-item-title-font-size: var(--fontsize-body-s);--action-bar-item-title-font-color: var(--header-color);--lang-selector-mobile-background-color: var(--color-silver-light);--lang-selector-item-font-color: var(--header-color);--lang-selector-dropdown-background-color: var(--color-white);--nav-link-font-color: var(--header-color);--nav-border-color: var(--color-black-20);--nav-link-hover-color: var(--color-black-90);--nav-link-dropdown-background-color: var(--color-white);--nav-button-background-color: var(--color-black-5);--nav-button-hover-background-color: var(--color-black-5);--nav-search-color: var(--header-color);--nav-mobile-menu-background-color: var(--color-white);--nav-mobile-menu-bottom-background-color: var(--color-silver-light);--nav-mobile-margin-left: var(--spacing-s);--universal-bar-background-color: var(--color-black-5);--logo-height: 56px;--icon-size: 24px;--nav-drop-down-icon-color: var(--color-black);--nav-background-color:var(--color-white);background-color:var(--header-background-color);color:var(--header-color);position:relative;width:100%}@media only screen and (max-width: 991px){.HeaderLink_header__HS1GF{--action-bar-container-height: 74px;--logo-height: 48px}}@media only screen and (max-width: 767px){.HeaderLink_header__HS1GF{--header-margin: var(--spacing-s);--action-bar-container-height: 64px;--logo-height: 32px}}@media only screen and (max-width: 575px){.HeaderLink_header__HS1GF{--header-margin: var(--spacing-xs);--action-bar-container-height: 64px;--logo-height: 32px}}.HeaderLink_header__HS1GF.HeaderLink_theme-dark__UI0vQ{--color-focus-outline: var(--color-white);--header-color: var(--color-white);--header-focus-outline-color: var(--color-white);--header-background-color: var(--color-black-80);--nav-border-color: var(--color-white);--nav-link-hover-color: var(--color-white);--universal-bar-background-color: var(--color-black-60);--navigation-link-button-background-color: var(--color-black-60);--nav-link-dropdown-background-color: var(--color-black-80);--lang-selector-mobile-background-color: var(--color-black-80);--lang-selector-dropdown-background-color: var(--color-black-60);--nav-button-background-color: var(--color-black-60);--nav-button-hover-background-color: var(--color-black-60);--nav-drop-down-icon-color: var(--color-white);--actionbar-background-color: var(--color-black-80);--nav-background-color: var(--color-black-80);--nav-mobile-menu-background-color: var(--color-black-80);--nav-mobile-menu-bottom-background-color: var(--color-black-60)}.HeaderLink_headerBackgroundWrapper__V\+bMi{position:relative;z-index:var(--header-z-index)}.HeaderLink_headerLink__Q\+CZQ.HeaderLink_headerLink__Q\+CZQ{--link-color: var(--color-black-90);--link-font-size: var(--fontsize-body-s);--link-visited-color: none;border:0;color:var(--nav-link-font-color);display:flex;line-height:var(--lineheight-l);margin:0;text-decoration:none;word-wrap:break-word}.HeaderLink_headerLink__Q\+CZQ.HeaderLink_headerLink__Q\+CZQ:hover{text-decoration:underline;text-decoration-color:var(--nav-link-hover-color)}.HeaderLink_headerLink__Q\+CZQ.HeaderLink_headerLink__Q\+CZQ:focus-visible{border:none;outline:var(--header-focus-outline-width) solid var(--header-focus-outline-color);outline-offset:var(--header-focus-outline-width)}.HeaderLink_active__8Jw\+7{font-weight:700;padding-left:var(--header-focus-outline-width)}.HeaderLink_navigationLinkWrapper__XhsWz{align-items:center;display:flex;height:100%;justify-content:space-between;position:relative}.HeaderLink_navigationLinkWrapper__XhsWz.HeaderLink_isNotLargeScreen__WOoeU{width:100%}.HeaderLink_navigationLinkWrapper__XhsWz.HeaderLink_isNotLargeScreen__WOoeU,.HeaderLink_navigationLinkWrapper__XhsWz.HeaderLink_isNotLargeScreen__WOoeU:focus{border-top-width:1px}.HeaderLink_navigationLinkWrapper__XhsWz.HeaderLink_isNotLargeScreen__WOoeU ul{border:none}.HeaderLink_headerLink__Q\+CZQ.HeaderLink_isNotLargeScreen__WOoeU{align-self:center;border:none;box-sizing:border-box;color:var(--nav-link-font-color);font-size:var(--fontsize-body-xl);margin-left:var(--nav-mobile-margin-left);padding:0;word-wrap:break-word}.HeaderLink_headerLink__Q\+CZQ.HeaderLink_isNotLargeScreen__WOoeU:focus{border:none} -.HeaderLinkDropdown_header__9AwcE{--header-background-color: var(--color-white);--header-color: var(--color-black-90);--header-height: var(--spacing-4-xl);--header-focus-outline-width: 3px;--header-focus-outline-border-radius: 0;--header-focus-outline-color: var(--color-coat-of-arms);--header-divider-color: var(--color-black-20);--header-z-index: 10;--header-margin: var(--spacing-m);--header-max-width: 1440px;--header-item-border-color: var(--color-black-20);--header-item-hover-color: var(--color-black-20);--actionbar-background-color: var(--color-white);--action-bar-container-height: 88px;--action-bar-section-gutter: var(--spacing-s);--action-bar-dropdown-menu-caret-width: 64px;--action-bar-dropdown-menu-primary-item-height: 64px;--action-bar-dropdown-menu-secondary-item-height: 48px;--action-bar-button-size: 64px;--action-bar-item-gutter: 12px;--action-bar-item-title-font-size: var(--fontsize-body-s);--action-bar-item-title-font-color: var(--header-color);--lang-selector-mobile-background-color: var(--color-silver-light);--lang-selector-item-font-color: var(--header-color);--lang-selector-dropdown-background-color: var(--color-white);--nav-link-font-color: var(--header-color);--nav-border-color: var(--color-black-20);--nav-link-hover-color: var(--color-black-90);--nav-link-dropdown-background-color: var(--color-white);--nav-button-background-color: var(--color-black-5);--nav-button-hover-background-color: var(--color-black-5);--nav-search-color: var(--header-color);--nav-mobile-menu-background-color: var(--color-white);--nav-mobile-menu-bottom-background-color: var(--color-silver-light);--nav-mobile-margin-left: var(--spacing-s);--universal-bar-background-color: var(--color-black-5);--logo-height: 56px;--icon-size: 24px;--nav-drop-down-icon-color: var(--color-black);--nav-background-color:var(--color-white);background-color:var(--header-background-color);color:var(--header-color);position:relative;width:100%}@media only screen and (max-width: 991px){.HeaderLinkDropdown_header__9AwcE{--action-bar-container-height: 74px;--logo-height: 48px}}@media only screen and (max-width: 767px){.HeaderLinkDropdown_header__9AwcE{--header-margin: var(--spacing-s);--action-bar-container-height: 64px;--logo-height: 32px}}@media only screen and (max-width: 575px){.HeaderLinkDropdown_header__9AwcE{--header-margin: var(--spacing-xs);--action-bar-container-height: 64px;--logo-height: 32px}}.HeaderLinkDropdown_header__9AwcE.HeaderLinkDropdown_theme-dark__wUr1f{--color-focus-outline: var(--color-white);--header-color: var(--color-white);--header-focus-outline-color: var(--color-white);--header-background-color: var(--color-black-80);--nav-border-color: var(--color-white);--nav-link-hover-color: var(--color-white);--universal-bar-background-color: var(--color-black-60);--navigation-link-button-background-color: var(--color-black-60);--nav-link-dropdown-background-color: var(--color-black-80);--lang-selector-mobile-background-color: var(--color-black-80);--lang-selector-dropdown-background-color: var(--color-black-60);--nav-button-background-color: var(--color-black-60);--nav-button-hover-background-color: var(--color-black-60);--nav-drop-down-icon-color: var(--color-white);--actionbar-background-color: var(--color-black-80);--nav-background-color: var(--color-black-80);--nav-mobile-menu-background-color: var(--color-black-80);--nav-mobile-menu-bottom-background-color: var(--color-black-60)}.HeaderLinkDropdown_headerBackgroundWrapper__X5Fks{position:relative;z-index:var(--header-z-index)}button.HeaderLinkDropdown_button__ClWrt{background-color:var(--nav-button-background-color);border:none;box-sizing:content-box;color:var(--nav-drop-down-icon-color);display:block;height:24px;margin:0 0 0 var(--spacing-s);padding:0;width:24px}button.HeaderLinkDropdown_button__ClWrt.HeaderLinkDropdown_isNotLargeScreen__9sZf2{background:transparent;border-left:1px solid var(--nav-button-background-color);box-sizing:border-box;flex:0 0 var(--action-bar-dropdown-menu-caret-width);height:var(--action-bar-dropdown-menu-secondary-item-height);width:auto;width:initial}button.HeaderLinkDropdown_button__ClWrt.HeaderLinkDropdown_isNotLargeScreen__9sZf2.HeaderLinkDropdown_depth-0__Eckuc{height:var(--action-bar-dropdown-menu-primary-item-height)}button.HeaderLinkDropdown_button__ClWrt:hover{background-color:var(--nav-button-hover-background-color);cursor:pointer}button.HeaderLinkDropdown_button__ClWrt:focus-visible{outline:3px solid var(--header-focus-outline-color);outline-offset:var(--header-focus-outline-width)}.HeaderLinkDropdown_chevron__JNMi9{transition:transform .2s ease-in}.HeaderLinkDropdown_chevronOpen__Znpsv{transform:rotate(180deg)}.HeaderLinkDropdown_hidden__-\+n71{display:none}.HeaderLinkDropdown_dropdownMenu__ppesK{background-color:var(--nav-link-dropdown-background-color);border:1px solid var(--nav-border-color);display:flex;flex-direction:column;left:calc(-1 * var(--header-margin));list-style:none;min-width:calc(100% + var(--header-margin));padding:0;position:absolute;top:100%;z-index:calc(var(--header-z-index) + 1)}.HeaderLinkDropdown_dropdownMenu__ppesK .HeaderLinkDropdown_dropdownLink__Jc0Kf{font-size:var(--fontsize-body-m);margin:var(--spacing-xs) var(--spacing-m) var(--spacing-xs) var(--header-margin);padding:0}.HeaderLinkDropdown_dropdownMenu__ppesK .HeaderLinkDropdown_dropdownLink__Jc0Kf:focus{border:0}.HeaderLinkDropdown_dropdownMenu__ppesK .HeaderLinkDropdown_dropdownLink__Jc0Kf:focus-visible{outline:3px solid var(--header-focus-outline-color);outline-offset:var(--header-focus-outline-width)}.HeaderLinkDropdown_dropdownMenu__ppesK .HeaderLinkDropdown_dropdownLink__Jc0Kf:before{bottom:0;content:"";height:100%;left:0;margin:0;position:absolute;width:0}.HeaderLinkDropdown_dropdownMenu__ppesK .HeaderLinkDropdown_dropdownLink__Jc0Kf:hover:before{border-left:4px solid var(--color-black);transition:border-left 100ms ease-in}.HeaderLinkDropdown_dropdownMenu__ppesK .HeaderLinkDropdown_activeLink__sIRUp:before{border-left:4px solid var(--color-black);padding-left:var(--spacing-xs)}.HeaderLinkDropdown_dropdownMenu__ppesK .HeaderLinkDropdown_button__ClWrt{margin:0 var(--spacing-xs) 0 var(--spacing-s)}.HeaderLinkDropdown_left__6e3eu{left:auto;right:calc(100%);top:-1px}.HeaderLinkDropdown_right__46eju{left:calc(100%);right:auto;top:-1px} +.HeaderLinkDropdown_header__9AwcE{--header-background-color: var(--color-white);--header-color: var(--color-black-90);--header-height: var(--spacing-4-xl);--header-focus-outline-width: 3px;--header-focus-outline-border-radius: 0;--header-focus-outline-color: var(--color-coat-of-arms);--header-divider-color: var(--color-black-20);--header-z-index: 10;--header-margin: var(--spacing-m);--header-max-width: 1440px;--header-item-border-color: var(--color-black-20);--header-item-hover-color: var(--color-black-20);--actionbar-background-color: var(--color-white);--action-bar-container-height: 88px;--action-bar-section-gutter: var(--spacing-s);--action-bar-dropdown-menu-caret-width: 64px;--action-bar-dropdown-menu-primary-item-height: 64px;--action-bar-dropdown-menu-secondary-item-height: 48px;--action-bar-button-size: 64px;--action-bar-item-gutter: 12px;--action-bar-item-title-font-size: var(--fontsize-body-s);--action-bar-item-title-font-color: var(--header-color);--lang-selector-mobile-background-color: var(--color-silver-light);--lang-selector-item-font-color: var(--header-color);--lang-selector-dropdown-background-color: var(--color-white);--nav-link-font-color: var(--header-color);--nav-border-color: var(--color-black-20);--nav-link-hover-color: var(--color-black-90);--nav-link-dropdown-background-color: var(--color-white);--nav-button-background-color: var(--color-black-5);--nav-button-hover-background-color: var(--color-black-5);--nav-search-color: var(--header-color);--nav-mobile-menu-background-color: var(--color-white);--nav-mobile-menu-bottom-background-color: var(--color-silver-light);--nav-mobile-margin-left: var(--spacing-s);--universal-bar-background-color: var(--color-black-5);--logo-height: 56px;--icon-size: 24px;--nav-drop-down-icon-color: var(--color-black);--nav-background-color:var(--color-white);background-color:var(--header-background-color);color:var(--header-color);position:relative;width:100%}@media only screen and (max-width: 991px){.HeaderLinkDropdown_header__9AwcE{--action-bar-container-height: 74px;--logo-height: 48px}}@media only screen and (max-width: 767px){.HeaderLinkDropdown_header__9AwcE{--header-margin: var(--spacing-s);--action-bar-container-height: 64px;--logo-height: 32px}}@media only screen and (max-width: 575px){.HeaderLinkDropdown_header__9AwcE{--header-margin: var(--spacing-xs);--action-bar-container-height: 64px;--logo-height: 32px}}.HeaderLinkDropdown_header__9AwcE.HeaderLinkDropdown_theme-dark__wUr1f{--color-focus-outline: var(--color-white);--header-color: var(--color-white);--header-focus-outline-color: var(--color-white);--header-background-color: var(--color-black-80);--nav-border-color: var(--color-white);--nav-link-hover-color: var(--color-white);--universal-bar-background-color: var(--color-black-60);--navigation-link-button-background-color: var(--color-black-60);--nav-link-dropdown-background-color: var(--color-black-80);--lang-selector-mobile-background-color: var(--color-black-80);--lang-selector-dropdown-background-color: var(--color-black-60);--nav-button-background-color: var(--color-black-60);--nav-button-hover-background-color: var(--color-black-60);--nav-drop-down-icon-color: var(--color-white);--actionbar-background-color: var(--color-black-80);--nav-background-color: var(--color-black-80);--nav-mobile-menu-background-color: var(--color-black-80);--nav-mobile-menu-bottom-background-color: var(--color-black-60)}.HeaderLinkDropdown_headerBackgroundWrapper__X5Fks{position:relative;z-index:var(--header-z-index)}button.HeaderLinkDropdown_button__ClWrt{background-color:var(--nav-button-background-color);border:none;box-sizing:content-box;color:var(--nav-drop-down-icon-color);display:block;height:24px;margin:0 0 0 var(--spacing-s);padding:0;width:24px}button.HeaderLinkDropdown_button__ClWrt.HeaderLinkDropdown_isNotLargeScreen__9sZf2{background:transparent;border-left:1px solid var(--nav-button-background-color);box-sizing:border-box;flex:0 0 var(--action-bar-dropdown-menu-caret-width);height:var(--action-bar-dropdown-menu-secondary-item-height);width:auto;width:initial}button.HeaderLinkDropdown_button__ClWrt.HeaderLinkDropdown_isNotLargeScreen__9sZf2.HeaderLinkDropdown_depth-0__Eckuc{height:var(--action-bar-dropdown-menu-primary-item-height)}button.HeaderLinkDropdown_button__ClWrt:hover{background-color:var(--nav-button-hover-background-color);cursor:pointer}button.HeaderLinkDropdown_button__ClWrt:focus-visible{outline:3px solid var(--header-focus-outline-color);outline-offset:var(--header-focus-outline-width)}.HeaderLinkDropdown_chevron__JNMi9{transition:transform .2s ease-in}.HeaderLinkDropdown_chevronOpen__Znpsv{transform:rotate(180deg)}.HeaderLinkDropdown_hidden__-\+n71{display:none}.HeaderLinkDropdown_dropdownMenu__ppesK{background-color:var(--nav-link-dropdown-background-color);border:1px solid var(--nav-border-color);display:flex;flex-direction:column;list-style:none;min-width:280px;padding:0;position:absolute;top:100%;z-index:calc(var(--header-z-index) + 1)}.HeaderLinkDropdown_dropdownMenu__ppesK .HeaderLinkDropdown_dropdownLink__Jc0Kf{font-size:var(--fontsize-body-m);margin:var(--spacing-xs) var(--spacing-m) var(--spacing-xs) var(--header-margin);padding:0}.HeaderLinkDropdown_dropdownMenu__ppesK .HeaderLinkDropdown_dropdownLink__Jc0Kf:focus{border:0}.HeaderLinkDropdown_dropdownMenu__ppesK .HeaderLinkDropdown_dropdownLink__Jc0Kf:focus-visible{outline:3px solid var(--header-focus-outline-color);outline-offset:var(--header-focus-outline-width)}.HeaderLinkDropdown_dropdownMenu__ppesK .HeaderLinkDropdown_dropdownLink__Jc0Kf:before{bottom:0;content:"";height:100%;left:0;margin:0;position:absolute;width:0}.HeaderLinkDropdown_dropdownMenu__ppesK .HeaderLinkDropdown_dropdownLink__Jc0Kf:hover:before{border-left:4px solid var(--color-black);transition:border-left 100ms ease-in}.HeaderLinkDropdown_dropdownMenu__ppesK .HeaderLinkDropdown_activeLink__sIRUp:before{border-left:4px solid var(--color-black);padding-left:var(--spacing-xs)}.HeaderLinkDropdown_dropdownMenu__ppesK .HeaderLinkDropdown_button__ClWrt{margin:0 var(--spacing-xs) 0 var(--spacing-s)}.HeaderLinkDropdown_left__6e3eu{left:auto;right:calc(100%);top:-1px}.HeaderLinkDropdown_right__46eju{left:calc(100%);right:auto;top:-1px} .HeaderActionBar_header__\+ARfd{--header-background-color: var(--color-white);--header-color: var(--color-black-90);--header-height: var(--spacing-4-xl);--header-focus-outline-width: 3px;--header-focus-outline-border-radius: 0;--header-focus-outline-color: var(--color-coat-of-arms);--header-divider-color: var(--color-black-20);--header-z-index: 10;--header-margin: var(--spacing-m);--header-max-width: 1440px;--header-item-border-color: var(--color-black-20);--header-item-hover-color: var(--color-black-20);--actionbar-background-color: var(--color-white);--action-bar-container-height: 88px;--action-bar-section-gutter: var(--spacing-s);--action-bar-dropdown-menu-caret-width: 64px;--action-bar-dropdown-menu-primary-item-height: 64px;--action-bar-dropdown-menu-secondary-item-height: 48px;--action-bar-button-size: 64px;--action-bar-item-gutter: 12px;--action-bar-item-title-font-size: var(--fontsize-body-s);--action-bar-item-title-font-color: var(--header-color);--lang-selector-mobile-background-color: var(--color-silver-light);--lang-selector-item-font-color: var(--header-color);--lang-selector-dropdown-background-color: var(--color-white);--nav-link-font-color: var(--header-color);--nav-border-color: var(--color-black-20);--nav-link-hover-color: var(--color-black-90);--nav-link-dropdown-background-color: var(--color-white);--nav-button-background-color: var(--color-black-5);--nav-button-hover-background-color: var(--color-black-5);--nav-search-color: var(--header-color);--nav-mobile-menu-background-color: var(--color-white);--nav-mobile-menu-bottom-background-color: var(--color-silver-light);--nav-mobile-margin-left: var(--spacing-s);--universal-bar-background-color: var(--color-black-5);--logo-height: 56px;--icon-size: 24px;--nav-drop-down-icon-color: var(--color-black);--nav-background-color:var(--color-white);background-color:var(--header-background-color);color:var(--header-color);position:relative;width:100%}@media only screen and (max-width: 991px){.HeaderActionBar_header__\+ARfd{--action-bar-container-height: 74px;--logo-height: 48px}}@media only screen and (max-width: 767px){.HeaderActionBar_header__\+ARfd{--header-margin: var(--spacing-s);--action-bar-container-height: 64px;--logo-height: 32px}}@media only screen and (max-width: 575px){.HeaderActionBar_header__\+ARfd{--header-margin: var(--spacing-xs);--action-bar-container-height: 64px;--logo-height: 32px}}.HeaderActionBar_header__\+ARfd.HeaderActionBar_theme-dark__5qOpQ{--color-focus-outline: var(--color-white);--header-color: var(--color-white);--header-focus-outline-color: var(--color-white);--header-background-color: var(--color-black-80);--nav-border-color: var(--color-white);--nav-link-hover-color: var(--color-white);--universal-bar-background-color: var(--color-black-60);--navigation-link-button-background-color: var(--color-black-60);--nav-link-dropdown-background-color: var(--color-black-80);--lang-selector-mobile-background-color: var(--color-black-80);--lang-selector-dropdown-background-color: var(--color-black-60);--nav-button-background-color: var(--color-black-60);--nav-button-hover-background-color: var(--color-black-60);--nav-drop-down-icon-color: var(--color-white);--actionbar-background-color: var(--color-black-80);--nav-background-color: var(--color-black-80);--nav-mobile-menu-background-color: var(--color-black-80);--nav-mobile-menu-bottom-background-color: var(--color-black-60)}.HeaderActionBar_headerBackgroundWrapper__NKEiY{position:relative;z-index:var(--header-z-index)}.HeaderActionBar_headerActionBar__04z3n{align-items:stretch;box-sizing:border-box;color:var(--header-color);display:flex;gap:calc(var(--header-margin) / 2);height:var(--action-bar-container-height);justify-content:space-between;margin:0 auto;max-width:var(--header-max-width);padding-left:var(--header-margin);padding-right:var(--header-margin);position:relative}.HeaderActionBar_headerActionBar__04z3n hr{border:0;border-left:1px solid var(--color-black-20);display:inline-block;height:100%;margin:0 5px;width:0}.HeaderActionBar_headerActionBarContainer__Qy-WL{background-color:var(--actionbar-background-color);border-bottom:1px solid var(--header-divider-color);width:100%}.HeaderActionBar_headerActions__OQ9D5{align-items:stretch;display:flex;flex-grow:1;gap:var(--action-bar-item-gutter);justify-content:flex-end}.HeaderActionBar_titleAndLogoContainer__UNUXl{align-items:center;color:inherit;cursor:pointer;display:flex;flex:0 0 auto;outline:none;position:relative;text-decoration:none;white-space:nowrap}.HeaderActionBar_titleAndLogoContainer__UNUXl:focus-visible{border:none;outline:var(--header-focus-outline-width) solid var(--header-focus-outline-color);outline-offset:var(--header-focus-outline-width)}.HeaderActionBar_titleAndLogoContainer__UNUXl:not([href]):not([tabindex="0"]){cursor:auto}.HeaderActionBar_title__HR\+eI{align-self:center;margin-top:-2px;padding:1px}.HeaderActionBar_normal__FN63e>.HeaderActionBar_title__HR\+eI{font-family:var(--font-default);font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-0.2px;line-height:var(--lineheight-s)}@media only screen and (max-width: 991px){.HeaderActionBar_normal__FN63e>.HeaderActionBar_title__HR\+eI{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:-0.2px;line-height:var(--lineheight-s)}}@media only screen and (max-width: 767px){.HeaderActionBar_normal__FN63e>.HeaderActionBar_title__HR\+eI{font-size:var(--fontsize-body-s);font-weight:500;letter-spacing:-0.1px;line-height:var(--lineheight-s)}}.HeaderActionBar_bold__ovvxq>.HeaderActionBar_title__HR\+eI{font-family:var(--font-default);font-size:var(--fontsize-heading-m);font-weight:700;letter-spacing:-0.2px;line-height:var(--lineheight-s)}@media only screen and (max-width: 991px){.HeaderActionBar_bold__ovvxq>.HeaderActionBar_title__HR\+eI{font-size:var(--fontsize-heading-s);font-weight:700;letter-spacing:-0.2px;line-height:var(--lineheight-s)}}@media only screen and (max-width: 767px){.HeaderActionBar_bold__ovvxq>.HeaderActionBar_title__HR\+eI{font-size:var(--fontsize-body-s);font-weight:700;letter-spacing:-0.1px;line-height:var(--lineheight-s)}}.HeaderActionBar_black__FoYNm>.HeaderActionBar_title__HR\+eI{font-family:var(--font-default);font-size:var(--fontsize-heading-l);font-weight:900;letter-spacing:-0.2px;line-height:var(--lineheight-s)}@media only screen and (max-width: 991px){.HeaderActionBar_black__FoYNm>.HeaderActionBar_title__HR\+eI{font-size:var(--fontsize-heading-m);font-weight:900;letter-spacing:-0.2px;line-height:var(--lineheight-s)}}@media only screen and (max-width: 767px){.HeaderActionBar_black__FoYNm>.HeaderActionBar_title__HR\+eI{font-size:var(--fontsize-heading-xxs);font-weight:900;letter-spacing:-0.1px;line-height:var(--lineheight-s)}}.HeaderActionBar_logo__jkhie{align-self:center;box-sizing:content-box;height:var(--logo-height)} .HeaderLanguageSelector_header__dDIh7{--header-background-color: var(--color-white);--header-color: var(--color-black-90);--header-height: var(--spacing-4-xl);--header-focus-outline-width: 3px;--header-focus-outline-border-radius: 0;--header-focus-outline-color: var(--color-coat-of-arms);--header-divider-color: var(--color-black-20);--header-z-index: 10;--header-margin: var(--spacing-m);--header-max-width: 1440px;--header-item-border-color: var(--color-black-20);--header-item-hover-color: var(--color-black-20);--actionbar-background-color: var(--color-white);--action-bar-container-height: 88px;--action-bar-section-gutter: var(--spacing-s);--action-bar-dropdown-menu-caret-width: 64px;--action-bar-dropdown-menu-primary-item-height: 64px;--action-bar-dropdown-menu-secondary-item-height: 48px;--action-bar-button-size: 64px;--action-bar-item-gutter: 12px;--action-bar-item-title-font-size: var(--fontsize-body-s);--action-bar-item-title-font-color: var(--header-color);--lang-selector-mobile-background-color: var(--color-silver-light);--lang-selector-item-font-color: var(--header-color);--lang-selector-dropdown-background-color: var(--color-white);--nav-link-font-color: var(--header-color);--nav-border-color: var(--color-black-20);--nav-link-hover-color: var(--color-black-90);--nav-link-dropdown-background-color: var(--color-white);--nav-button-background-color: var(--color-black-5);--nav-button-hover-background-color: var(--color-black-5);--nav-search-color: var(--header-color);--nav-mobile-menu-background-color: var(--color-white);--nav-mobile-menu-bottom-background-color: var(--color-silver-light);--nav-mobile-margin-left: var(--spacing-s);--universal-bar-background-color: var(--color-black-5);--logo-height: 56px;--icon-size: 24px;--nav-drop-down-icon-color: var(--color-black);--nav-background-color:var(--color-white);background-color:var(--header-background-color);color:var(--header-color);position:relative;width:100%}@media only screen and (max-width: 991px){.HeaderLanguageSelector_header__dDIh7{--action-bar-container-height: 74px;--logo-height: 48px}}@media only screen and (max-width: 767px){.HeaderLanguageSelector_header__dDIh7{--header-margin: var(--spacing-s);--action-bar-container-height: 64px;--logo-height: 32px}}@media only screen and (max-width: 575px){.HeaderLanguageSelector_header__dDIh7{--header-margin: var(--spacing-xs);--action-bar-container-height: 64px;--logo-height: 32px}}.HeaderLanguageSelector_header__dDIh7.HeaderLanguageSelector_theme-dark__3lzAc{--color-focus-outline: var(--color-white);--header-color: var(--color-white);--header-focus-outline-color: var(--color-white);--header-background-color: var(--color-black-80);--nav-border-color: var(--color-white);--nav-link-hover-color: var(--color-white);--universal-bar-background-color: var(--color-black-60);--navigation-link-button-background-color: var(--color-black-60);--nav-link-dropdown-background-color: var(--color-black-80);--lang-selector-mobile-background-color: var(--color-black-80);--lang-selector-dropdown-background-color: var(--color-black-60);--nav-button-background-color: var(--color-black-60);--nav-button-hover-background-color: var(--color-black-60);--nav-drop-down-icon-color: var(--color-white);--actionbar-background-color: var(--color-black-80);--nav-background-color: var(--color-black-80);--nav-mobile-menu-background-color: var(--color-black-80);--nav-mobile-menu-bottom-background-color: var(--color-black-60)}.HeaderLanguageSelector_headerBackgroundWrapper__tJRDa{position:relative;z-index:var(--header-z-index)}.HeaderLanguageSelector_languageSelector__K5jvz{display:flex;gap:var(--spacing-s);justify-content:space-between}.HeaderLanguageSelector_languageSelectorDropdownIcon__JjYrv{align-items:center;margin-top:1px;padding-top:3px}.HeaderLanguageSelector_languageSelectorDropdownIcon__JjYrv:focus-visible{outline-offset:0}.HeaderLanguageSelector_languageSelectorDropdown__yfzJl{align-items:flex-start;background-color:var(--lang-selector-dropdown-background-color);display:flex;flex-flow:column nowrap}.HeaderLanguageSelector_languageSelectorDropdown__yfzJl>*{align-items:center;display:flex;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin:0}.HeaderLanguageSelector_languageSelectorDropdown__yfzJl>h3{border-bottom:solid 1px var(--header-divider-color)}.HeaderLanguageSelector_languageSelectorDropdown__yfzJl>h3:not(:first-of-type){border-top:solid 1px var(--header-divider-color)}.HeaderLanguageSelector_languageSelectorDropdown__yfzJl>a{color:var(--lang-selector-item-font-color);text-decoration:none}.HeaderLanguageSelector_languageSelectorDropdown__yfzJl>button{border:var(--header-focus-outline-width) solid transparent}button.HeaderLanguageSelector_item__20oWT,[type=button].HeaderLanguageSelector_item__20oWT{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;color:var(--lang-selector-item-font-color);cursor:pointer;line-height:var(--lineheight-l);outline:0;white-space:nowrap}button.HeaderLanguageSelector_item__20oWT:focus-visible,[type=button].HeaderLanguageSelector_item__20oWT:focus-visible{border:var(--header-focus-outline-width) solid var(--header-focus-outline-color)}.HeaderLanguageSelector_activeItem__-wlYS{font-weight:700}.HeaderLanguageSelector_activeItem__-wlYS span{border-bottom:2px solid}.HeaderLanguageSelector_languageNodes__LfQt-{display:flex;gap:var(--spacing-s)}.HeaderLanguageSelector_languageNodes__LfQt- button.HeaderLanguageSelector_item__20oWT,.HeaderLanguageSelector_languageNodes__LfQt- [type=button].HeaderLanguageSelector_item__20oWT{align-self:center;border:none;padding:0}.HeaderLanguageSelector_languageNodes__LfQt- button.HeaderLanguageSelector_item__20oWT:focus-visible,.HeaderLanguageSelector_languageNodes__LfQt- [type=button].HeaderLanguageSelector_item__20oWT:focus-visible{border:none;outline:var(--header-focus-outline-width) solid var(--header-focus-outline-color);outline-offset:var(--header-focus-outline-width)}.HeaderLanguageSelector_simpleLanguageNodes__v9iSd{gap:var(--action-bar-item-gutter)}.HeaderLanguageSelector_fullWidthForMobile__eEJS4{background-color:var(--lang-selector-mobile-background-color);border-bottom:1px solid var(--color-black-20);box-sizing:border-box;display:flex;height:var(--spacing-layout-m);padding:0 var(--header-margin);width:100%}.HeaderLanguageSelector_fullWidthForMobile__eEJS4 .HeaderLanguageSelector_languageSelectorDropdownIcon__JjYrv:focus-visible{outline-offset:0} @layer actionBar{.HeaderActionBarItemWithDropdown_dropdownWrapper__67yXE{bottom:0;overflow:hidden;position:absolute;right:0;transform:translateY(100%) translateY(1px);transition-duration:0ms;transition-property:max-height,padding-bottom;z-index:20}.HeaderActionBarItemWithDropdown_container__Tz0nf{display:flex}.HeaderActionBarItemWithDropdown_container__Tz0nf .HeaderActionBarItemWithDropdown_dropdownWrapper__67yXE{max-height:0;min-width:300px;padding-bottom:0;transition-delay:400ms}.HeaderActionBarItemWithDropdown_container__Tz0nf.HeaderActionBarItemWithDropdown_visible__eSKCG .HeaderActionBarItemWithDropdown_dropdownWrapper__67yXE{max-height:1000vh;padding-bottom:20px;transition-delay:0ms}.HeaderActionBarItemWithDropdown_container__Tz0nf:not(.HeaderActionBarItemWithDropdown_hasContent__hTaRq){display:none}.HeaderActionBarItemWithDropdown_container__Tz0nf:not(.HeaderActionBarItemWithDropdown_fullWidth__amhk4){display:flex;position:relative}.HeaderActionBarItemWithDropdown_container__Tz0nf.HeaderActionBarItemWithDropdown_fullWidth__amhk4>.HeaderActionBarItemWithDropdown_dropdownWrapper__67yXE{left:0}.HeaderActionBarItemWithDropdown_icon__aOwHX{display:block}.HeaderActionBarItemWithDropdown_dropdown__eeq6d{background:#fff;border:1px solid var(--color-black-10);margin-top:-1px;position:relative;right:0;transform:translateY(-100%);transition:250ms transform 150ms,0ms visibility 400ms;visibility:hidden}.HeaderActionBarItemWithDropdown_dropdown__eeq6d.HeaderActionBarItemWithDropdown_fullWidth__amhk4{left:0}.HeaderActionBarItemWithDropdown_dropdown__eeq6d.HeaderActionBarItemWithDropdown_visible__eSKCG{transform:translateY(0%);transition:250ms transform 0ms,0ms visibility 0ms;visibility:visible}.HeaderActionBarItemWithDropdown_dropdown__eeq6d>*{padding:var(--spacing-xs) var(--spacing-s);width:100%}} @@ -2219,4 +2219,4 @@ html { .ToggleButton_toggleButton__CRyVA{font-family:inherit;font-size:100%;line-height:1.15;margin:0}.ToggleButton_label__-Is8B{color:var(--color-black-90);color:var(--label-color-default, var(--color-black-90));display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.ToggleButton_toggleButtonContainer__o0GvA{--toggle-button-color: var(--color-bus);--toggle-button-hover-color: var(--color-bus-dark);--toggle-button-unselected-color: var(--color-black-90)}.ToggleButton_onIcon__D71Pa{color:#fff;opacity:0}.ToggleButton_offIcon__6wQWI{color:var(--toggle-button-unselected-color);opacity:1}.ToggleButton_toggleButton__CRyVA{background:#fff;border:2px solid var(--toggle-button-unselected-color);border-radius:20px;cursor:pointer;display:inline-block;height:32px;inset:0;position:relative;transition:all 200ms;width:56px}.ToggleButton_toggleButton__CRyVA:after{border-radius:25px;content:"";display:block;inset:-7px;position:absolute}.ToggleButton_toggleButton__CRyVA:focus{outline:none}.ToggleButton_toggleButton__CRyVA:focus:after{border:3px solid var(--color-coat-of-arms);box-sizing:content-box}.ToggleButton_toggleButton__CRyVA[aria-pressed=true]{background-color:var(--toggle-button-color);border-color:var(--toggle-button-color)}.ToggleButton_toggleButton__CRyVA[aria-pressed=true]:hover{background-color:var(--toggle-button-hover-color);border-color:var(--toggle-button-hover-color)}.ToggleButton_toggleButton__CRyVA[aria-pressed=true][disabled],.ToggleButton_toggleButton__CRyVA[aria-pressed=true][disabled]:hover{background-color:var(--color-black-10);border-color:var(--color-black-10)}.ToggleButton_toggleButton__CRyVA[aria-pressed=true] .ToggleButton_onIcon__D71Pa{margin-left:24px !important;opacity:1}.ToggleButton_toggleButton__CRyVA[aria-pressed=true] .ToggleButton_offIcon__6wQWI{margin-left:24px !important;opacity:0}.ToggleButton_toggleButton__CRyVA[disabled],.ToggleButton_toggleButton__CRyVA[disabled]:hover{border-color:var(--color-black-20);cursor:not-allowed}.ToggleButton_toggleButton__CRyVA[disabled] .ToggleButton_offIcon__6wQWI,.ToggleButton_toggleButton__CRyVA[disabled]:hover .ToggleButton_offIcon__6wQWI{color:var(--color-black-10)}.ToggleButton_toggleButtonContainerInlineVariant__CAPGb{align-items:center;display:flex;flex-wrap:wrap}.ToggleButton_toggleButtonContainerInlineVariant__CAPGb .ToggleButton_label__-Is8B{margin-bottom:0}.ToggleButton_toggleButtonContainerInlineVariant__CAPGb .ToggleButton_toggleButton__CRyVA{margin-left:auto}.ToggleButton_labelContainer__B7X0a{align-items:flex-start;display:flex}.ToggleButton_tooltipButton__hDA-0{display:block;margin-left:var(--spacing-2-xs)}.ToggleButton_toggleButtonIcon__5EjAE{cursor:pointer;left:-2px;position:absolute;top:-2px;transition:all 200ms} .hds-example-form{margin:0 auto;max-width:792px}.hds-example-form__main-title{composes:heading-xl from "hds-core/lib/utils/helpers.css";margin:0 0 var(--spacing-m) 0}.hds-example-form__title{font-size:var(--fontsize-heading-l);font-weight:400;letter-spacing:-0.4px;line-height:var(--lineheight-s);margin:0 0 var(--spacing-m) 0}.hds-example-form__required-info{font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin:0 0 var(--spacing-l) 0}.hds-example-form__error-summary{margin-bottom:var(--spacing-m)}.hds-example-form__section{margin-bottom:var(--spacing-xl)}.hds-example-form__section-title{composes:heading-s from "hds-core/lib/utils/helpers.css";margin:0 0 var(--spacing-m)}.hds-example-form__item{margin-bottom:var(--spacing-m)}.hds-example-form__terms{margin-left:var(--spacing-l);margin-top:var(--spacing-2-xs)}.hds-example-form__terms span{color:var(--color-bus);cursor:pointer;text-decoration:underline}@media(min-width: 576px){.hds-example-form__grid-6-6{display:grid;grid-gap:var(--spacing-m);gap:var(--spacing-m);grid-template-columns:1fr 1fr}.hds-example-form__grid-8-4{display:grid;grid-gap:var(--spacing-m);gap:var(--spacing-m);grid-template-columns:2fr 1fr}.hds-example-form__grid-6-6:last-child,.hds-example-form__grid-8-4:last-child{margin-bottom:calc(-1 * var(--spacing-m))}} -/*# sourceMappingURL=main.829f7692.css.map*/ \ No newline at end of file +/*# sourceMappingURL=main.60178a80.css.map*/ \ No newline at end of file diff --git a/docs/hds-1909-react/css/main.60178a80.css.map b/docs/hds-1909-react/css/main.60178a80.css.map new file mode 100644 index 00000000000..d0aac5362c9 --- /dev/null +++ b/docs/hds-1909-react/css/main.60178a80.css.map @@ -0,0 +1 @@ +{"version":3,"file":"static/css/main.60178a80.css","mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AAAA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AClIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AC3HA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;ACRA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;ACtHA;;;AAGA;;AAEA;AACA;AACA;;ACXA;ACAA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;ACjCA;AACA;AAEA;;AAEA;AAEA;;AAEA;AAEA;;AAEA;AAEA;;AAEA;AAEA;;AAEA;AAEA;;ACvBA;ACAA;AEyBA;AEzBA;ACAA;AHIA;AAqBA;AOzBA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;;AAGA;AACA;AACA;AACA;AACA;;AAEA;;;AAGA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;;AAGA;AACA;AACA;;AAEA;;;AAGA;AACA;AACA;;AAEA;;;AAGA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;ACtTA;AAEA;;AREA;AUJA;ACAA;AXIA;AaJA;ACAA;;ACAA;ACEA;ACCA;AEDA;AFCA;AAAA;AAAA;AAAA;AQAA;ARAA;AUHA;ACEA;ACFA;ACEA;ACFA;A/ByBA;AAAA;AkCzBA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AChBA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;;;;AAIA;AACA;;AAEA;AACA;AACA;;AAEA;;;AAGA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;;;;AAIA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;;;AAGA;AACA;AACA;AACA;AACA;;AAEA;;;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;;AAEA;;AAEA;AACA;;AAEA;;AAEA;;AAEA;AACA;;AAEA;;AAEA;;;;AAIA;AACA;AACA;;AAEA;;AAEA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;;A3CzPA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;A4C1HA;AAEA;;AAEA;AAEA;;AAEA;AAEA;;AAEA;AAEA;;AAEA;AAEA;;AAEA;AACA;AACA;AACA;;ACvBA;A7CAA;A8CAA;ACAA;ACAA;AxCaA;AATA;A2CHA;A3CGA;A6CJA;A7CaA;A+CbA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;;AAEA;;;;;;AAMA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AC3PA;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AAEA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAEA;;AAEA;AACA;AAEA;;AAEA;AAEA;;AAEA;AAEA;;AAEA;AAEA;;AAEA;AAEA;;AAEA;AAEA;;AAEA;AAEA;;AAEA;AAEA;;AAEA;AAEA;;AAEA;AAEA;;AAEA;AAEA;;AAEA;AAEA;;AAEA;AAEA;;AAEA;AAEA;;AAEA;AAEA;;AC1FA;ACAA;AAEA;AACA;;AAEA;AAEA;;AAEA;AAEA;;AAEA;AACA;AACA;;AAEA;AAEA;;AAEA;AAEA;;AAEA;AAEA;;AAEA;AAEA;;AAEA;AAEA;;AAEA;AAEA;;AAEA;AAEA;;AAEA;AAEA;;AAEA;AAEA;;AAEA;AAEA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AlDtCA;AoDtBA;ApDCA;AuDDA;ACCA;AxDAA;A0DJA;ACAA;A3DyCA;A6DzCA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;;;;AAIA;AACA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;;AAEA;;AAEA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;;;AAGA;AACA;AACA;AACA;AACA;;AAEA;;;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;;AAEA;AACA;AACA;;AAEA;;AAEA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;;AC3MA;AAEA;;AAEA;AAEA;;AAEA;AAEA;;AAEA;AAEA;;A9DWA;AgEfA;ACVA;AACA;AACA;AACA;;AAEA;AACA;AACA;;ACLA;ACAA;AnEEA;AAAA;AoEEA;AIJA;AxEEA;AoEEA;AONA;ACEA;ACFA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AClHA;ACAA;ACAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;;AAEA;AACA;;AAEA;;AAEA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;ACpKA;ACAA;ACAA;ACAA;ACAA;ACEA;AvFEA;AAAA;A2FJA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AC7CA;AAEA;;AAEA;AAEA;;AAEA;AAEA;;AAEA;AAEA;;AAEA;AAEA;;AAEA;AAEA;;AAEA;AAEA;;AC1BA;ACAA;A9FIA;AAAA;AASA;AAAA;AmGbA","sources":["webpack://hds-react/./.storybook/index.css","webpack://hds-react/../design-tokens/lib/all.css","webpack://hds-react/../core/lib/utils/animations.css","webpack://hds-react/../core/lib/utils/helpers.css","webpack://hds-react/./src/styles/base.css","webpack://hds-react/./src/components/accordion/Accordion.module.scss","webpack://hds-react/../core/lib/icons/icon.css","webpack://hds-react/./src/icons/Icon.module.css","webpack://hds-react/../core/lib/components/button/button.css","webpack://hds-react/./src/components/button/_button.common.scss","webpack://hds-react/./src/components/button/Button.module.scss","webpack://hds-react/./src/styles/_common.scss","webpack://hds-react/./src/components/loadingSpinner/LoadingSpinner.module.scss","webpack://hds-react/../core/lib/components/card/card.css","webpack://hds-react/./src/components/card/Card.module.scss","webpack://hds-react/./src/components/dropdown/_dropdown.common.scss","webpack://hds-react/./src/components/dropdown/select/Select.module.scss","webpack://hds-react/./src/internal/field-label/FieldLabel.module.scss","webpack://hds-react/../core/lib/components/text-input/text-input.css","webpack://hds-react/./src/internal/required-indicator/RequiredIndicator.module.css","webpack://hds-react/./src/components/tooltip/Tooltip.module.scss","webpack://hds-react/./src/internal/selectedItems/SelectedItems.module.scss","webpack://hds-react/../core/lib/components/tag/tag.css","webpack://hds-react/./src/components/tag/Tag.module.scss","webpack://hds-react/../core/lib/components/link/link.css","webpack://hds-react/./src/components/link/Link.module.scss","webpack://hds-react/../core/lib/components/breadcrumb/breadcrumb.css","webpack://hds-react/./src/components/breadcrumb/Breadcrumb.module.scss","webpack://hds-react/./src/components/header/Header.module.scss","webpack://hds-react/./src/styles/layout.scss","webpack://hds-react/./src/components/header/components/headerUniversalBar/HeaderUniversalBar.module.scss","webpack://hds-react/./src/components/header/components/headerLink/HeaderLink.module.scss","webpack://hds-react/./src/components/header/components/headerLink/headerLinkDropdown/HeaderLinkDropdown.module.scss","webpack://hds-react/./src/components/header/components/headerActionBar/HeaderActionBar.module.scss","webpack://hds-react/./src/components/header/components/headerActionBar/_typography.scss","webpack://hds-react/./src/components/header/components/headerLanguageSelector/HeaderLanguageSelector.module.scss","webpack://hds-react/./src/components/header/components/headerActionBarItem/HeaderActionBarItemWithDropdown.module.scss","webpack://hds-react/./src/components/header/components/headerActionBarItem/HeaderActionBarItem.module.scss","webpack://hds-react/./src/components/header/components/headerActionBar/HeaderActionBarLogo.module.scss","webpack://hds-react/./src/components/header/components/headerActionBar/HeaderActionBarNavigationMenu.module.scss","webpack://hds-react/./src/components/header/components/headerNavigationMenu/HeaderNavigationMenu.module.scss","webpack://hds-react/./src/components/header/components/headerSearch/HeaderSearch.module.scss","webpack://hds-react/../core/lib/components/search-input/search-input.css","webpack://hds-react/./src/components/searchInput/SearchInput.module.scss","webpack://hds-react/./src/internal/skipLink/SkipLink.module.scss","webpack://hds-react/./src/components/logo/Logo.module.css","webpack://hds-react/../core/lib/components/checkbox/checkbox.css","webpack://hds-react/./src/components/checkbox/Checkbox.module.css","webpack://hds-react/../core/lib/components/fieldset/fieldset.css","webpack://hds-react/./src/components/fieldset/Fieldset.module.scss","webpack://hds-react/../core/lib/components/container/container.css","webpack://hds-react/./src/components/container/Container.module.scss","webpack://hds-react/./src/components/cookieConsent/CookieConsent.module.scss","webpack://hds-react/./src/internal/menuButton/MenuButton.module.scss","webpack://hds-react/./src/internal/menuButton/menu/Menu.module.scss","webpack://hds-react/./src/components/cookieConsent/languageSwitcher/LanguageSwitcherItem/LanguageSwitcherItem.module.scss","webpack://hds-react/../core/lib/components/table/table.css","webpack://hds-react/./src/components/table/Table.module.scss","webpack://hds-react/../core/lib/components/notification/notification.css","webpack://hds-react/./src/components/notification/Notification.module.css","webpack://hds-react/./src/components/dateInput/DateInput.module.scss","webpack://hds-react/./src/components/textInput/TextInput.module.css","webpack://hds-react/./src/components/dateInput/components/datePicker/DatePicker.module.scss","webpack://hds-react/./src/components/dialog/Dialog.module.scss","webpack://hds-react/./src/components/dialog/dialogHeader/DialogHeader.module.scss","webpack://hds-react/./src/components/dialog/_dialog.common.scss","webpack://hds-react/./src/components/dialog/dialogContent/DialogContent.module.scss","webpack://hds-react/./src/components/dialog/dialogActionButtons/DialogActionButtons.module.scss","webpack://hds-react/./src/components/dropdown/combobox/Combobox.module.scss","webpack://hds-react/./src/components/errorSummary/ErrorSummary.module.scss","webpack://hds-react/../core/lib/components/selection-group/selection-group.css","webpack://hds-react/./src/components/selectionGroup/SelectionGroup.module.scss","webpack://hds-react/../core/lib/components/radio-button/radio-button.css","webpack://hds-react/./src/components/radioButton/RadioButton.module.css","webpack://hds-react/./src/components/fileInput/FileInput.module.scss","webpack://hds-react/./src/components/footer/Footer.module.scss","webpack://hds-react/./src/components/koros/Koros.module.css","webpack://hds-react/./src/components/footer/components/footerNavigation/FooterNavigation.module.scss","webpack://hds-react/./src/components/footer/components/footerNavigationGroup/FooterNavigationGroup.module.scss","webpack://hds-react/./src/components/footer/_common.scss","webpack://hds-react/./src/components/footer/components/footerGroupHeading/FooterGroupHeading.module.scss","webpack://hds-react/./src/components/footer/components/footerLink/FooterLink.module.scss","webpack://hds-react/./src/components/footer/components/footerUtilities/FooterUtilities.module.scss","webpack://hds-react/./src/components/footer/components/footerUtilityGroup/FooterUtilityGroup.module.scss","webpack://hds-react/./src/components/footer/components/footerBase/FooterBase.module.scss","webpack://hds-react/./src/components/footer/components/footerCustom/FooterCustom.module.scss","webpack://hds-react/../core/lib/components/hero/hero.css","webpack://hds-react/./src/components/hero/Hero.module.scss","webpack://hds-react/./src/components/section/Section.module.css","webpack://hds-react/../core/lib/base.min.css","webpack://hds-react/../core/lib/components/highlight/highlight.css","webpack://hds-react/./src/components/highlight/Highlight.module.scss","webpack://hds-react/./src/components/imageWithCard/ImageWithCard.module.css","webpack://hds-react/./src/components/linkbox/Linkbox.module.scss","webpack://hds-react/./src/components/numberInput/NumberInput.module.scss","webpack://hds-react/../core/lib/components/pagination/pagination.css","webpack://hds-react/./src/components/pagination/Pagination.module.scss","webpack://hds-react/./src/components/passwordInput/PasswordInput.module.scss","webpack://hds-react/./src/components/sideNavigation/SideNavigation.module.scss","webpack://hds-react/./src/components/sideNavigation/_sideNavigation.common.scss","webpack://hds-react/./src/components/sideNavigation/mainLevel/MainLevel.module.scss","webpack://hds-react/./src/components/sideNavigation/subLevel/SubLevel.module.scss","webpack://hds-react/../core/lib/components/status-label/status-label.css","webpack://hds-react/./src/components/statusLabel/StatusLabel.module.css","webpack://hds-react/../core/lib/components/step-by-step/step-by-step.css","webpack://hds-react/./src/components/stepByStep/StepByStep.module.scss","webpack://hds-react/./src/components/stepper/Stepper.module.scss","webpack://hds-react/./src/components/tabs/Tabs.module.scss","webpack://hds-react/./src/components/timeInput/TimeInput.module.scss","webpack://hds-react/./src/components/toggleButton/ToggleButton.module.scss","webpack://hds-react/./src/examples/forms/validation.scss"],"sourcesContent":["@font-face {\n font-family: 'HelsinkiGrotesk';\n src: url('../src/fonts/565d73a693abe0776c801607ac28f0bf.woff') format('woff');\n font-display: swap;\n font-weight: 400;\n font-style: normal;\n text-rendering: optimizeLegibility;\n}\n\n@font-face {\n font-family: 'HelsinkiGrotesk';\n src: url('../src/fonts/5bb29e3b7b1d3ef30121229bbe67c3e1.woff') format('woff');\n font-display: swap;\n font-weight: 400;\n font-style: italic;\n text-rendering: optimizeLegibility;\n}\n\n@font-face {\n font-family: 'HelsinkiGrotesk';\n src: url('../src/fonts/7c46f288e8133b87e6b12b45dac71865.woff') format('woff');\n font-display: swap;\n font-weight: 500;\n font-style: normal;\n text-rendering: optimizeLegibility;\n}\n\n@font-face {\n font-family: 'HelsinkiGrotesk';\n src: url('../src/fonts/e62dc97e83a385e4d8cdc939cf1e4213.woff') format('woff');\n font-display: swap;\n font-weight: 500;\n font-style: italic;\n text-rendering: optimizeLegibility;\n}\n\n@font-face {\n font-family: 'HelsinkiGrotesk';\n src: url('../src/fonts/533af26cf28d7660f24c2884d3c27eac.woff') format('woff');\n font-display: swap;\n font-weight: 700;\n font-style: normal;\n text-rendering: optimizeLegibility;\n}\n\n@font-face {\n font-family: 'HelsinkiGrotesk';\n src: url('../src/fonts/20d494430c87e15e194932b729d48270.woff') format('woff');\n font-display: swap;\n font-weight: 700;\n font-style: italic;\n text-rendering: optimizeLegibility;\n}\n\n@font-face {\n font-family: 'HelsinkiGrotesk';\n src: url('../src/fonts/a50a1bd245ce63abcc0d1da80ff790d2.woff') format('woff');\n font-display: swap;\n font-weight: 900;\n font-style: normal;\n text-rendering: optimizeLegibility;\n}\n\n@font-face {\n font-family: 'HelsinkiGrotesk';\n src: url('../src/fonts/62a1781d8b396fbb025b0552cf6304d2.woff') format('woff');\n font-display: swap;\n font-weight: 900;\n font-style: italic;\n text-rendering: optimizeLegibility;\n}\n\nbody {\n font-family: var(--font-default);\n font-size: var(--fontsize-body-m);\n color: var(--color-black-90);\n line-height: var(--lineheight-l);\n}\n\n.password-input--external-show-password-button,\n.date-input--external-clear-value-button {\n display: grid;\n grid-template-columns: 400px 200px;\n gap: 20px;\n align-items: center;\n}\n\n@media only screen and (max-width: 768px) {\n .password-input--external-show-password-button,\n .date-input--external-clear-value-button {\n grid-template-columns: 300px;\n }\n}\n\n@media only screen and (max-width: 575.98px) {\n .table-custom-action {\n width: 100%;\n }\n}\n\n/* STEPPER */\n\n.stepper-small {\n max-width: 300px;\n}\n\n@media only screen and (max-width: 575.98px) {\n .stepper-small {\n max-width: 100%;\n }\n}\n\n.stepper-margin {\n margin-left: -35px;\n}\n\n.stepper-heading {\n margin-left: 10px;\n}\n\n.stepper-form-validation {\n margin-left: -18px;\n}\n\n.stepper-card > div:first-child {\n margin-bottom: var(--spacing-m) !important;\n}\n\n#focused-element-after-cookie-consent-closed:focus {\n outline: 2px black solid;\n}\n",":root {\n --breakpoint-xs: 320px;\n --breakpoint-s: 576px;\n --breakpoint-m: 768px;\n --breakpoint-l: 992px;\n --breakpoint-xl: 1248px;\n --container-width-xs: 288px;\n --container-width-s: 544px;\n --container-width-m: 720px;\n --container-width-l: 944px;\n --container-width-xl: 1200px;\n --color-brick: #bd2719;\n --color-brick-light: #ffeeed;\n --color-brick-medium-light: #facbc8;\n --color-brick-dark: #800e04;\n --color-bus: #0000bf;\n --color-bus-light: #f0f0ff;\n --color-bus-medium-light: #ccccff;\n --color-bus-dark: #00005e;\n --color-coat-of-arms: #0072c6;\n --color-coat-of-arms-light: #e6f4ff;\n --color-coat-of-arms-medium-light: #b5daf7;\n --color-coat-of-arms-dark: #005799;\n --color-copper: #00d7a7;\n --color-copper-light: #cffaf1;\n --color-copper-medium-light: #9ef0de;\n --color-copper-dark: #00a17d;\n --color-engel: #ffe977;\n --color-engel-light: #fff9db;\n --color-engel-medium-light: #fff3b8;\n --color-engel-dark: #dbc030;\n --color-fog: #9fc9eb;\n --color-fog-light: #e8f3fc;\n --color-fog-medium-light: #d0e6f7;\n --color-fog-dark: #72a5cf;\n --color-gold: #c2a251;\n --color-gold-light: #f7f2e4;\n --color-gold-medium-light: #e8d7a7;\n --color-gold-dark: #9e823c;\n --color-metro: #fd4f00;\n --color-metro-light: #ffeee6;\n --color-metro-medium-light: #ffcab3;\n --color-metro-dark: #bd2f00;\n --color-silver: #dedfe1;\n --color-silver-light: #f7f7f8;\n --color-silver-medium-light: #efeff0;\n --color-silver-dark: #b0b8bf;\n --color-summer: #ffc61e;\n --color-summer-light: #fff4d4;\n --color-summer-medium-light: #ffe49c;\n --color-summer-dark: #cc9200;\n --color-suomenlinna: #f5a3c7;\n --color-suomenlinna-light: #fff0f7;\n --color-suomenlinna-medium-light: #ffdbeb;\n --color-suomenlinna-dark: #e673a5;\n --color-tram: #008741;\n --color-tram-light: #dff7eb;\n --color-tram-medium-light: #a3e3c2;\n --color-tram-dark: #006631;\n --color-focus-outline: #0072c6;\n --color-black: #000000;\n --color-white: #ffffff;\n --color-black-5: #f2f2f2;\n --color-black-10: #e6e6e6;\n --color-black-20: #cccccc;\n --color-black-30: #b3b3b3;\n --color-black-40: #999999;\n --color-black-50: #808080;\n --color-black-60: #666666;\n --color-black-70: #4d4d4d;\n --color-black-80: #333333;\n --color-black-90: #1a1a1a;\n --color-error: #b01038;\n --color-error-light: #f6e2e6;\n --color-error-dark: #8d0d2d;\n --color-success: #007a64;\n --color-success-light: #e2f5f3;\n --color-success-dark: #006250;\n --color-alert: #ffda07;\n --color-alert-light: #fff4b4;\n --color-alert-dark: #d18200;\n --color-info: #0062b9;\n --color-info-light: #e5eff8;\n --color-info-dark: #004f94;\n --box-shadow-s: 0px 2px 10px 0px rgba(0, 0, 0, 0.07);\n --box-shadow-m: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);\n --box-shadow-l: 0px 2px 20px 0px rgba(0, 0, 0, 0.2);\n --spacing-layout-2-xs: 1rem; /* 16px */\n --spacing-layout-xs: 1.5rem; /* 24px */\n --spacing-layout-s: 2rem; /* 32px */\n --spacing-layout-m: 3rem; /* 48px */\n --spacing-layout-l: 4rem; /* 64px */\n --spacing-layout-xl: 6rem; /* 96px */\n --spacing-layout-2-xl: 8rem; /* 128px */\n --spacing-4-xs: 0.125rem; /* 2px */\n --spacing-3-xs: 0.25rem; /* 4px */\n --spacing-2-xs: 0.5rem; /* 8px */\n --spacing-xs: 0.75rem; /* 12px */\n --spacing-s: 1rem; /* 16px */\n --spacing-m: 1.5rem; /* 24px */\n --spacing-l: 2rem; /* 32px */\n --spacing-xl: 2.5rem; /* 40px */\n --spacing-2-xl: 3.0rem; /* 48px */\n --spacing-3-xl: 3.5rem; /* 56px */\n --spacing-4-xl: 4rem; /* 64px */\n --spacing-5-xl: 4.5rem; /* 72px */\n --fontsize-heading-xxl: 4rem; /* 64px */\n --fontsize-heading-xl: 3rem; /* 48px */\n --fontsize-heading-xl-mobile: 2.5rem; /* 40px */\n --fontsize-heading-l: 2rem; /* 32px */\n --fontsize-heading-m: 1.5rem; /* 24px */\n --fontsize-heading-s: 1.25rem; /* 20px */\n --fontsize-heading-xs: 1.125rem; /* 18px */\n --fontsize-heading-xxs: 1rem; /* 16px */\n --fontsize-body-s: 0.875rem; /* 14px */\n --fontsize-body-m: 1rem; /* 16px */\n --fontsize-body-l: 1.125rem; /* 18px */\n --fontsize-body-xl: 1.25rem; /* 20px */\n --font-default: HelsinkiGrotesk, Arial, sans-serif;\n --lineheight-s: 1;\n --lineheight-m: 1.2;\n --lineheight-l: 1.5;\n --lineheight-xl: 1.75;\n}\n","@keyframes fadeIn {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n",".visually-hidden {\n border: 0;\n clip: \"rect(0 0 0 0)\";\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n\n.button-reset {\n background: none;\n border: none;\n color: inherit;\n cursor: pointer;\n font: inherit;\n padding: 0;\n}\n\n.text-body {\n color: var(--color-black-90);\n font-family: var(--font-default);\n font-size: var(--fontsize-body-m);\n line-height: var(--lineheight-l);\n}\n\n.text-medium {\n font-family: var(--font-default);\n font-weight: 500;\n}\n\n.text-bold {\n font-family: var(--font-default);\n font-weight: bold;\n}\n\n.text-xl {\n font-size: var(--fontsize-heading-m);\n}\n\n.text-lg {\n font-size: var(--fontsize-heading-s);\n}\n\n.text-md {\n font-size: var(--fontsize-heading-xs);\n}\n\n.subtitle {\n font-size: var(--fontsize-body-m);\n}\n\n.text-sm {\n font-size: var(--fontsize-body-s);\n line-height: var(--lineheight-xl);\n}\n\n/* HEADINGS */\n\n.heading-xxl {\n font-size: var(--fontsize-heading-xxl);\n font-weight: 400;\n letter-spacing: -1.2px;\n line-height: var(--lineheight-s);\n}\n\n.heading-xl {\n font-size: var(--fontsize-heading-xl);\n font-weight: 400;\n letter-spacing: -1.0px;\n line-height: var(--lineheight-s);\n}\n\n.heading-xl-mobile {\n font-size: var(--fontsize-heading-xl-mobile);\n font-weight: 400;\n letter-spacing: -0.8px;\n line-height: var(--lineheight-s);\n}\n\n.heading-l {\n font-size: var(--fontsize-heading-l);\n font-weight: 400;\n letter-spacing: -0.4px;\n line-height: var(--lineheight-s);\n}\n\n.heading-m {\n font-size: var(--fontsize-heading-m);\n font-weight: 500;\n letter-spacing: -0.2px;\n line-height: 32px;\n}\n\n.heading-s {\n font-size: var(--fontsize-heading-s);\n font-weight: 500;\n letter-spacing: 0.2px;\n line-height: 1.4;\n}\n\n.heading-xs {\n font-size: var(--fontsize-heading-xs);\n font-weight: 700;\n letter-spacing: 0.4px;\n line-height: 1.33;\n}\n\n.heading-xxs {\n font-size: var(--fontsize-heading-xxs);\n font-weight: 700;\n letter-spacing: 0.4px;\n line-height: var(--lineheight-l);\n}\n\n.helper-text {\n color: var(--color-black-60);\n display: block;\n flex-basis: 100%;\n font-size: var(--fontsize-body-m);\n margin-top: var(--spacing-2-xs);\n}\n","@import 'hds-design-tokens/lib/all.css';\n@import 'hds-core/lib/utils/animations.css';\n@import 'hds-core/lib/utils/helpers.css';\n\n/*\n * Normalize.css rule\n * 1. Prevent adjustments of font size after orientation changes in iOS.\n */\n\nhtml {\n -webkit-text-size-adjust: 100%; /* 1 */\n}\n",".accordion {\n --background-color: var(--color-white);\n --border-color: var(--color-black-60);\n --header-font-color: var(--color-black-90);\n --header-focus-outline-color: var(--color-coat-of-arms);\n --content-font-color: var(--color-black-90);\n --content-font-size: var(--fontsize-body-m);\n --content-line-height: var(--lineheight-l);\n\n &:not(.card) {\n border-bottom: 1px solid var(--border-color);\n }\n\n &.card {\n background-color: var(--background-color);\n padding-left: var(--padding-horizontal);\n padding-right: var(--padding-horizontal);\n }\n\n &.border {\n border: 2px solid var(--border-color);\n }\n}\n\n.accordionHeader {\n align-items: center;\n color: var(--header-font-color);\n display: flex;\n font-size: var(--header-font-size);\n font-weight: var(--header-font-weight);\n justify-content: space-between;\n letter-spacing: var(--header-letter-spacing);\n line-height: var(--header-line-height);\n padding-bottom: var(--padding-vertical);\n padding-top: var(--padding-vertical);\n position: relative;\n\n & > div {\n flex: 1 1 auto;\n }\n}\n\n.s {\n --header-font-size: var(--fontsize-heading-s);\n --padding-vertical: var(--spacing-s);\n --header-font-weight: 700;\n --header-letter-spacing: 0.2px;\n --header-line-height: 1.4;\n --button-size: 28px;\n --padding-horizontal: var(--spacing-2-xs);\n\n & .closeButton div {\n margin-right: var(--spacing-4-xs);\n }\n}\n\n.m {\n --header-font-size: var(--fontsize-heading-m);\n --padding-vertical: var(--spacing-m);\n --header-font-weight: 500;\n --header-letter-spacing: -0.2px;\n --header-line-height: 32px;\n --button-size: 36px;\n --padding-horizontal: var(--spacing-m);\n\n & .closeButton div {\n margin-right: 6px;\n }\n}\n\n.l {\n --header-font-size: var(--fontsize-heading-l);\n --padding-vertical: var(--spacing-l);\n --header-font-weight: 400;\n --header-letter-spacing: -0.4px;\n --header-line-height: var(--lineheight-s);\n --button-size: 52px;\n --padding-horizontal: var(--spacing-l);\n\n & .closeButton div {\n margin-right: var(--spacing-xs);\n }\n}\n\n.accordionContent {\n color: var(--content-font-color);\n font-size: var(--content-font-size);\n line-height: var(--content-line-height);\n padding-bottom: var(--spacing-m);\n position: relative;\n\n .closeButton {\n bottom: 0;\n color: var(--content-font-color);\n position: absolute;\n right: 0;\n }\n}\n\n.contentWithCloseButton {\n padding-bottom: 44px;\n}\n\n.headingContainer {\n align-items: center;\n box-sizing: border-box;\n cursor: pointer;\n display: grid;\n grid-template-columns: auto calc(var(--button-size));\n width: 100%;\n\n &:focus {\n outline: 2px solid var(--header-focus-outline-color, transparent);\n }\n}\n\n.accordionButtonIcon {\n border: 2px solid transparent;\n box-sizing: border-box;\n height: var(--button-size) !important;\n margin: auto;\n width: var(--button-size) !important;\n}\n",".hds-icon {\n --icon-size: 100%;\n\n background-color: currentcolor;\n display: inline-block;\n height: var(--icon-size);\n -webkit-mask-position: center;\n mask-position: center;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-size: auto;\n mask-size: auto;\n width: var(--icon-size);\n}\n\n.hds-icon.hds-icon--size-xs {\n --icon-size: var(--spacing-layout-2-xs);\n}\n\n.hds-icon.hds-icon--size-s {\n --icon-size: var(--spacing-layout-xs);\n}\n\n.hds-icon.hds-icon--size-m {\n --icon-size: var(--spacing-layout-s);\n}\n\n.hds-icon.hds-icon--size-l {\n --icon-size: var(--spacing-layout-m);\n}\n\n.hds-icon.hds-icon--size-xl {\n --icon-size: var(--spacing-layout-l);\n}\n",".icon {\n background-color: transparent;\n composes: hds-icon from 'hds-core/lib/icons/icon.css';\n}\n\n.xs {\n composes: hds-icon--size-xs from 'hds-core/lib/icons/icon.css';\n}\n\n.s {\n composes: hds-icon--size-s from 'hds-core/lib/icons/icon.css';\n}\n\n.m {\n composes: hds-icon--size-m from 'hds-core/lib/icons/icon.css';\n}\n\n.l {\n composes: hds-icon--size-l from 'hds-core/lib/icons/icon.css';\n}\n\n.xl {\n composes: hds-icon--size-xl from 'hds-core/lib/icons/icon.css';\n}\n",".hds-button {\n --border-width: 2px;\n --color: inherit;\n --min-size: 44px;\n --outline-gutter: 2px;\n --outline-width: 3px;\n\n align-content: flex-start;\n align-items: center;\n\n /*\n * Normalize.css rules\n * Correct the inability to style clickable types in iOS and Safari.\n */\n -webkit-appearance: button;\n background-color: var(--background-color, transparent);\n border: var(--border-width) solid var(--border-color, transparent);\n border-radius: 0;\n color: var(--color);\n cursor: pointer;\n display: inline-flex;\n\n /*\n * Normalize.css rules\n * 1. Change the font styles in all browsers.\n */\n font-family: inherit; /* 1 */\n font-size: 100%; /* 1 */\n font-weight: 500;\n justify-content: center;\n\n /*\n * Normalize.css rules\n * 1. Change the font styles in all browsers.\n * 2. Remove the margin in Firefox and Safari.\n */\n line-height: 1.15; /* 1 */\n margin: 0; /* 2 */\n min-height: var(--min-size);\n min-width: var(--min-size);\n padding: 0 var(--spacing-2-xs);\n position: relative;\n text-decoration: none;\n\n /*\n * Normalize.css rule\n * Remove the inheritance of text transform in Edge, Firefox, and IE.\n */\n text-transform: none;\n vertical-align: top;\n}\n\n.hds-button,\n.hds-button:before,\n.hds-button:after,\n.hds-button *,\n.hds-button *:before,\n.hds-button *:after {\n box-sizing: border-box;\n}\n\n/*\n * Normalize.css rules\n * Correct the inability to style clickable types in iOS and Safari.\n */\n\n.hds-button[type=\"button\"], .hds-button[type=\"reset\"], .hds-button[type=\"submit\"] {\n -webkit-appearance: button;\n}\n\n/*\n * Normalize.css rules\n * Remove the inner border and padding in Firefox.\n */\n\n.hds-button::-moz-focus-inner, .hds-button[type=\"button\"]::-moz-focus-inner, .hds-button[type=\"reset\"]::-moz-focus-inner, .hds-button[type=\"submit\"]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\n/*\n * Normalize.css rules\n * Restore the focus styles unset by the previous rule.\n */\n\n.hds-button:-moz-focusring, .hds-button[type=\"button\"]:-moz-focusring, .hds-button[type=\"reset\"]:-moz-focusring, .hds-button[type=\"submit\"]:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\n/* button transitions */\n\n.hds-button:hover,\n.hds-button.focus-visible {\n transition-duration: 85ms;\n transition-property: background-color, border-color, color;\n transition-timing-function: ease-out;\n}\n\n.hds-button:hover,\n.hds-button:focus-visible {\n transition-duration: 85ms;\n transition-property: background-color, border-color, color;\n transition-timing-function: ease-out;\n}\n\n.hds-button:hover {\n background-color: var(--background-color-hover, transparent);\n color: var(--color-hover);\n}\n\n.hds-button.focus-visible {\n background-color: var(--background-color-focus, transparent);\n color: var(--color-focus);\n outline: none;\n}\n\n.hds-button:focus-visible {\n background-color: var(--background-color-focus, transparent);\n color: var(--color-focus);\n outline: none;\n}\n\n.hds-button:active {\n background-color: var(--background-color-focus, transparent);\n color: var(--color-focus);\n outline: none;\n}\n\n.hds-button:not(:disabled) {\n border-color: var(--border-color, transparent);\n}\n\n.hds-button:disabled {\n background-color: var(--background-color-disabled, transparent);\n border-color: var(--border-color-disabled, transparent);\n color: var(--color-disabled);\n cursor: not-allowed;\n}\n\n.hds-button.focus-visible:hover {\n background-color: var(--background-color-hover-focus, transparent);\n}\n\n.hds-button:focus-visible:hover {\n background-color: var(--background-color-hover-focus, transparent);\n}\n\n.hds-button:active:hover {\n background-color: var(--background-color-hover-focus, transparent);\n}\n\n.hds-button:not(:disabled):hover {\n border-color: var(--border-color-hover, transparent);\n}\n\n.hds-button:not(:disabled).focus-visible {\n border-color: var(--border-color-focus, transparent);\n}\n\n.hds-button:not(:disabled):focus-visible {\n border-color: var(--border-color-focus, transparent);\n}\n\n.hds-button:not(:disabled):active {\n border-color: var(--border-color-focus, transparent);\n}\n\n.hds-button:not(:disabled).focus-visible:hover {\n border-color: var(--border-color-hover-focus, transparent);\n color: var(--color-hover-focus);\n}\n\n.hds-button:not(:disabled):focus-visible:hover {\n border-color: var(--border-color-hover-focus, transparent);\n color: var(--color-hover-focus);\n}\n\n.hds-button:not(:disabled):active:hover {\n border-color: var(--border-color-hover-focus, transparent);\n color: var(--color-hover-focus);\n}\n\n/* FOCUS OUTLINE */\n\n.hds-button:after {\n --size: 100%;\n\n border: var(--outline-width) solid transparent;\n content: '';\n height: var(--size);\n position: absolute;\n width: var(--size);\n}\n\n.hds-button.focus-visible:after {\n --size: calc(100% + calc(var(--outline-width) * 2 + var(--border-width) * 2 + var(--outline-gutter) * 2));\n\n border-color: var(--focus-outline-color);\n}\n\n.hds-button:focus-visible:after {\n --size: calc(100% + calc(var(--outline-width) * 2 + var(--border-width) * 2 + var(--outline-gutter) * 2));\n\n border-color: var(--focus-outline-color);\n}\n\n.hds-button:active:after {\n --size: calc(100% + calc(var(--outline-width) * 2 + var(--border-width) * 2 + var(--outline-gutter) * 2));\n\n border-color: var(--focus-outline-color);\n}\n\ninput[type=\"submit\"].hds-button,\n.hds-button__label {\n font-weight: inherit;\n line-height: 1.25em;\n padding: var(--spacing-s);\n}\n\ninput[type=\"submit\"].hds-button {\n cursor: pointer;\n padding: var(--spacing-s) var(--spacing-l);\n}\n\n/* submit input */\n\ninput[type=\"submit\"].hds-button.focus-visible {\n box-shadow: 0 0 0 var(--outline-gutter) var(--submit-input-focus-gutter-color), 0 0 0 calc(var(--outline-gutter) + var(--outline-width)) var(--focus-outline-color);\n}\n\ninput[type=\"submit\"].hds-button:focus-visible {\n box-shadow: 0 0 0 var(--outline-gutter) var(--submit-input-focus-gutter-color), 0 0 0 calc(var(--outline-gutter) + var(--outline-width)) var(--focus-outline-color);\n}\n\n/* no icons */\n\n.hds-button__label:only-child {\n margin: 0 var(--spacing-2-xs);\n}\n\ninput[type=\"submit\"].hds-button--small,\n.hds-button--small .hds-button__label {\n line-height: var(--lineheight-s);\n padding: var(--spacing-2-xs) var(--spacing-xs);\n}\n\n/* supplementary with right icon */\n\n.hds-button--supplementary .hds-button__label:first-child {\n padding-right: var(--spacing-2-xs);\n}\n\n/* no icons */\n\n.hds-button--small .hds-button__label:only-child {\n margin: 0 var(--spacing-xs);\n}\n\n/* supplementary with left icon */\n\n.hds-button--supplementary .hds-icon + .hds-button__label:last-child {\n padding-left: var(--spacing-2-xs);\n}\n\n/* supplementary with both icons */\n\n.hds-button--supplementary .hds-icon + .hds-button__label:not(:last-child) {\n padding-left: var(--spacing-2-xs);\n padding-right: var(--spacing-2-xs);\n}\n\n/* SMALL */\n\n.hds-button--small {\n padding: 0;\n}\n\ninput[type=\"submit\"].hds-button--small {\n padding: var(--spacing-2-xs) var(--spacing-m);\n}\n\n/* both icons */\n\n.hds-button--small .hds-button__label:not(:first-of-type):not(:last-of-type) {\n padding: var(--spacing-2-xs) var(--spacing-2-xs);\n}\n\n/* FULL WIDTH */\n\n.hds-button--fullwidth {\n width: 100%;\n}\n\n/* ICONS */\n\n/* left */\n\n.hds-button .hds-icon {\n height: var(--spacing-m);\n margin-left: var(--spacing-s);\n width: var(--spacing-m);\n}\n\n/* right */\n\n.hds-button__label ~ .hds-icon {\n margin: 0 var(--spacing-s) 0 0;\n}\n\n/* left - small */\n\n.hds-button--small .hds-icon {\n margin-left: var(--spacing-2-xs);\n}\n\n/* right - small */\n\n.hds-button .hds-button--small .hds-button__label ~ .hds-icon {\n margin: 0 var(--spacing-2-xs) 0 0;\n}\n\n/* both icons - left */\n\n.hds-button .hds-icon:first-of-type:not(:last-of-type) {\n margin: 0 0 0 var(--spacing-2-xs);\n}\n\n/* both icons - right */\n\n.hds-button .hds-icon:last-of-type:not(:first-of-type) {\n margin: 0 var(--spacing-2-xs) 0 0;\n}\n\n/* both icons - left - small */\n\n.hds-button--small .hds-icon:first-child:not(:last-of-type) {\n margin: 0 0 0 var(--spacing-2-xs);\n}\n\n/* both icons - right - small */\n\n.hds-button--small .hds-icon:last-child:not(:first-of-type) {\n margin: 0 var(--spacing-2-xs) 0 0;\n}\n\n/* PRIMARY */\n\n/* default (bus) */\n\n.hds-button--primary {\n --background-color: var(--color-bus);\n --background-color-hover: var(--color-bus-dark);\n --background-color-focus: var(--color-bus);\n --background-color-hover-focus: var(--color-bus-dark);\n --background-color-disabled: var(--color-black-20);\n --border-color: var(--color-bus);\n --border-color-hover: var(--color-bus-dark);\n --border-color-focus: var(--color-bus);\n --border-color-hover-focus: var(--color-bus-dark);\n --border-color-disabled: var(--color-black-20);\n --color: var(--color-white);\n --color-hover: var(--color-white);\n --color-focus: var(--color-white);\n --color-hover-focus: var(--color-white);\n --color-disabled: var(--color-white);\n --focus-outline-color: var(--color-focus-outline);\n --submit-input-focus-gutter-color: var(--color-white);\n}\n\n/* SECONDARY */\n\n/* default (bus) */\n\n.hds-button--secondary {\n --background-color: transparent;\n --background-color-hover: var(--color-bus-light);\n --background-color-focus: transparent;\n --background-color-hover-focus: var(--color-bus-light);\n --background-color-disabled: transparent;\n --border-color: var(--color-bus);\n --border-color-hover: var(--color-bus-dark);\n --border-color-focus: var(--color-bus);\n --border-color-hover-focus: var(--color-bus-dark);\n --border-color-disabled: var(--color-black-50);\n --color: var(--color-bus);\n --color-hover: var(--color-bus-dark);\n --color-focus: var(--color-bus);\n --color-hover-focus: var(--color-bus-dark);\n --color-disabled: var(--color-black-40);\n --focus-outline-color: var(--color-focus-outline);\n --submit-input-focus-gutter-color: var(--color-white);\n}\n\n/* SUPPLEMENTARY */\n\n.hds-button--supplementary {\n --background-color: transparent;\n --background-color-hover: var(--color-bus-light);\n --background-color-focus: transparent;\n --background-color-hover-focus: var(--color-bus-light);\n --background-color-disabled: transparent;\n --border-color: transparent;\n --border-color-hover: transparent;\n --border-color-focus: var(--color-focus-outline);\n --border-color-hover-focus: var(--color-focus-outline);\n --border-color-disabled: transparent;\n --color: var(--color-bus);\n --color-hover: var(--color-bus-dark);\n --color-focus: var(--color-bus);\n --color-hover-focus: var(--color-bus-dark);\n --color-disabled: var(--color-black-40);\n --focus-outline-color: transparent;\n --submit-input-focus-gutter-color: transparent;\n}\n\n/* LOADING */\n\n.hds-button--loading {\n --background-color: transparent;\n --background-color-hover: transparent;\n --background-color-focus: transparent;\n --background-color-hover-focus: transparent;\n --background-color-disabled: transparent;\n --border-color: transparent;\n --border-color-hover: transparent;\n --border-color-focus: transparent;\n --border-color-hover-focus: transparent;\n --border-color-disabled: transparent;\n --color: var(--color-black-90);\n --color-hover: var(--color-black-90);\n --color-focus: var(--color-black-90);\n --color-hover-focus: var(--color-black-90);\n --color-disabled: var(--color-black-90);\n\n cursor: wait;\n}\n\n/* UTILITY */\n\n/* success */\n\n.hds-button--success {\n --background-color: var(--color-success);\n --background-color-hover: var(--color-success-dark);\n --background-color-focus: var(--color-success);\n --background-color-hover-focus: var(--color-success-dark);\n --border-color: var(--color-success);\n --border-color-hover: var(--color-success-dark);\n --border-color-focus: var(--color-success);\n --border-color-hover-focus: var(--color-success-dark);\n --color: var(--color-white);\n --color-hover: var(--color-white);\n --color-focus: var(--color-white);\n --color-hover-focus: var(--color-white);\n --focus-outline-color: var(--color-focus-outline);\n}\n\n/* danger */\n\n.hds-button--danger {\n --background-color: var(--color-error);\n --background-color-hover: var(--color-error-dark);\n --background-color-focus: var(--color-error);\n --background-color-hover-focus: var(--color-error-dark);\n --border-color: var(--color-error);\n --border-color-hover: var(--color-error-dark);\n --border-color-focus: var(--color-error);\n --border-color-hover-focus: var(--color-error-dark);\n --color: var(--color-white);\n --color-hover: var(--color-white);\n --color-focus: var(--color-white);\n --color-hover-focus: var(--color-white);\n --focus-outline-color: var(--color-focus-outline);\n}\n\n/* THEMES */\n\n/* coat */\n\n.hds-button--primary.hds-button--theme-coat {\n --background-color: var(--color-coat-of-arms);\n --background-color-hover: var(--color-coat-of-arms-dark);\n --background-color-focus: var(--color-coat-of-arms);\n --background-color-hover-focus: var(--color-coat-of-arms-dark);\n --border-color: var(--color-coat-of-arms);\n --border-color-hover: var(--color-coat-of-arms-dark);\n --border-color-focus: var(--color-coat-of-arms);\n --border-color-hover-focus: var(--color-coat-of-arms-dark);\n --color: var(--color-white);\n --color-hover: var(--color-white);\n --color-focus: var(--color-white);\n --color-hover-focus: var(--color-white);\n}\n\n.hds-button--secondary.hds-button--theme-coat {\n --background-color: transparent;\n --background-color-hover: var(--color-coat-of-arms-light);\n --background-color-focus: transparent;\n --background-color-hover-focus: var(--color-coat-of-arms-light);\n --border-color: var(--color-coat-of-arms);\n --border-color-hover: var(--color-coat-of-arms-dark);\n --border-color-focus: var(--color-coat-of-arms);\n --border-color-hover-focus: var(--color-coat-of-arms-dark);\n --color: var(--color-coat-of-arms);\n --color-hover: var(--color-coat-of-arms);\n --color-focus: var(--color-coat-of-arms);\n --color-hover-focus: var(--color-coat-of-arms);\n}\n\n.hds-button--supplementary.hds-button--theme-coat {\n --background-color: transparent;\n --background-color-hover: var(--color-coat-of-arms-light);\n --background-color-focus: transparent;\n --background-color-hover-focus: var(--color-coat-of-arms-light);\n --border-color: transparent;\n --border-color-hover: transparent;\n --border-color-focus: var(--color-focus-outline);\n --border-color-hover-focus: var(--color-focus-outline);\n --color: var(--color-coat-of-arms);\n --color-hover: var(--color-coat-of-arms);\n --color-focus: var(--color-coat-of-arms);\n --color-hover-focus: var(--color-coat-of-arms);\n}\n\n/* black */\n\n.hds-button--primary.hds-button--theme-black {\n --background-color: var(--color-black);\n --background-color-hover: var(--color-black);\n --background-color-focus: var(--color-black);\n --background-color-hover-focus: var(--color-black);\n --border-color: var(--color-black);\n --border-color-hover: var(--color-black);\n --border-color-focus: var(--color-black);\n --border-color-hover-focus: var(--color-black);\n --color: var(--color-white);\n --color-hover: var(--color-white);\n --color-focus: var(--color-white);\n --color-hover-focus: var(--color-white);\n}\n\n.hds-button--secondary.hds-button--theme-black {\n --background-color: transparent;\n --background-color-hover: var(--color-black-5);\n --background-color-focus: transparent;\n --background-color-hover-focus: var(--color-black-5);\n --border-color: var(--color-black);\n --border-color-hover: var(--color-black);\n --border-color-focus: var(--color-black);\n --border-color-hover-focus: var(--color-black);\n --color: var(--color-black);\n --color-hover: var(--color-black);\n --color-focus: var(--color-black);\n --color-hover-focus: var(--color-black);\n}\n\n.hds-button--supplementary.hds-button--theme-black {\n --background-color: transparent;\n --background-color-hover: var(--color-black-5);\n --background-color-focus: transparent;\n --background-color-hover-focus: var(--color-black-5);\n --border-color: transparent;\n --border-color-hover: transparent;\n --border-color-focus: var(--color-focus-outline);\n --border-color-hover-focus: var(--color-focus-outline);\n --color: var(--color-black);\n --color-hover: var(--color-black);\n --color-focus: var(--color-black);\n --color-hover-focus: var(--color-black);\n}\n","%button {\n composes: hds-button from 'hds-core/lib/components/button/button.css';\n}\n\n%label {\n composes: hds-button__label from 'hds-core/lib/components/button/button.css';\n}\n\n%fullWidth {\n composes: hds-button--fullwidth from 'hds-core/lib/components/button/button.css';\n}\n\n%size-small {\n composes: hds-button--small from 'hds-core/lib/components/button/button.css';\n}\n\n%icon {\n composes: hds-icon from 'hds-core/lib/components/button/button.css';\n}\n\n%primary {\n composes: hds-button--primary from 'hds-core/lib/components/button/button.css';\n}\n\n%secondary {\n composes: hds-button--secondary from 'hds-core/lib/components/button/button.css';\n}\n\n%supplementary {\n composes: hds-button--supplementary from 'hds-core/lib/components/button/button.css';\n}\n\n%loading {\n composes: hds-button--loading from 'hds-core/lib/components/button/button.css';\n}\n\n%success {\n composes: hds-button--success from 'hds-core/lib/components/button/button.css';\n}\n\n%danger {\n composes: hds-button--danger from 'hds-core/lib/components/button/button.css';\n}\n\n%theme-coat {\n composes: hds-button--theme-coat from 'hds-core/lib/components/button/button.css';\n}\n\n%theme-black {\n composes: hds-button--theme-black from 'hds-core/lib/components/button/button.css';\n}\n","@import \"button.common\";\n\n.button {\n @extend %button;\n}\n\n.label {\n @extend %label;\n}\n\n.fullWidth {\n @extend %fullWidth;\n}\n\n.size-small {\n @extend %size-small;\n}\n\n.icon {\n @extend %icon;\n\n svg {\n max-height: 100%;\n max-width: 100%;\n }\n}\n\n.primary {\n @extend %primary;\n}\n\n.secondary {\n @extend %secondary;\n}\n\n.supplementary {\n @extend %supplementary;\n}\n\n.isLoading {\n @extend %loading;\n}\n\n.success {\n @extend %success;\n}\n\n.danger {\n @extend %danger;\n}\n\n.theme-coat {\n @extend %theme-coat;\n}\n\n.theme-black {\n @extend %theme-black;\n}\n","/**\n * COMMON HELPER CLASSES\n */\n\n%buttonReset {\n background: none;\n border: none;\n color: inherit;\n cursor: pointer;\n font: inherit;\n padding: 0;\n}\n\n%normalizedInput {\n /*\n * Normalize.css rules\n * 1. Change the font styles in all browsers.\n * 2. Remove the margin in Firefox and Safari.\n */\n font-family: inherit; /* 1 */\n font-size: 100%; /* 1 */\n line-height: 1.15; /* 1 */\n margin: 0; /* 2 */\n}\n\n%visuallyHidden {\n border: 0;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n margin: 0 -1px -1px 0;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n/**\n * COMMON INPUT LABEL STYLES\n */\n%inputLabel {\n color: var(--label-color-default, var(--color-black-90));\n display: block;\n font-size: var(--fontsize-body-m);\n font-weight: 500;\n margin-bottom: var(--spacing-3-xs);\n}\n\n\n/**\n * Mixins\n */\n\n@mixin withFocus($selector: focus, $color: var(--color-coat-of-arms), $width: 3px, $radius: false, $offset: false) {\n &:#{selector} {\n @if $radius {\n border-radius: $radius;\n }\n \n @if $offset {\n outline-offset: $offset;\n }\n\n outline: $width solid $color;\n }\n}\n\n/*\n * Add an outline attribute for element's &:focus pseudo class\n */\n@mixin focusOutline($color: var(--focus-outline-color), $width: var(--outline-width), $radius: false, $offset: false) {\n @include withFocus(focus, $color, $width, $offset, $radius)\n}\n\n/*\n * Add an outline attribute for element's &:focus-visible pseudo class\n */\n@mixin focusVisible($color: var(--focus-outline-color), $width: var(--outline-width), $radius: false, $offset: false) {\n &:focus-visible {\n @if $radius {\n border-radius: $radius;\n }\n \n @if $offset {\n outline-offset: $offset;\n }\n\n > * {\n outline: $width solid $color;\n outline-offset: 4px;\n }\n\n outline: 0 solid $color;\n }\n}\n","@import \"../../styles/common.scss\";\n\n.loadingSpinner {\n --spinner-size: 4rem;\n --spinner-color: var(--color-coat-of-arms);\n --spinner-thickness: 0.5rem;\n --spinner-rotation-animation-duration: 1.5s;\n --spinner-color-animation-duration: 4.5s;\n --spinner-color-stage1: var(--color-coat-of-arms);\n --spinner-color-stage2: var(--color-copper);\n --spinner-color-stage3: var(--color-suomenlinna);\n\n border-top-color: var(--spinner-color);\n height: var(--spinner-size);\n position: relative;\n width: var(--spinner-size);\n}\n\n.loadingSpinner div {\n animation: spinner-rotation-animation var(--spinner-rotation-animation-duration) cubic-bezier(0.6, 0.2, 0.4, 0.8) infinite;\n border: var(--spinner-thickness) solid transparent;\n border-radius: 50%;\n border-top-color: inherit;\n box-sizing: border-box;\n height: 100%;\n position: absolute;\n width: 100%;\n}\n\n.loadingSpinner div:nth-child(2) {\n animation-delay: -0.15s;\n}\n\n.loadingSpinner div:nth-child(3) {\n animation-delay: -0.3s;\n}\n\n.small {\n --spinner-size: 1.5rem;\n --spinner-thickness: 0.1875rem;\n}\n\n.multicolor {\n animation: spinner-color-animation var(--spinner-color-animation-duration) cubic-bezier(0.6, 0.2, 0.4, 0.9) infinite;\n border-top-color: var(--spinner-color-stage1);\n}\n\n.notificationArea {\n @extend %visuallyHidden;\n}\n\n@keyframes spinner-rotation-animation {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n\n@keyframes spinner-color-animation {\n 0% { /* empty */ }\n 33.3% { border-top-color: var(--spinner-color-stage2) }\n 66.6% { border-top-color: var(--spinner-color-stage3) }\n 100% { /* empty */ }\n}\n",".hds-card {\n --background-color: var(--color-white);\n --border-color: var(--color-black-90);\n --color: var(--color-black-90);\n --border-width: 2px;\n --padding-horizontal: var(--spacing-l);\n --padding-vertical: var(--spacing-m);\n\n background-color: var(--background-color);\n color: var(--color);\n padding: var(--padding-vertical) var(--padding-horizontal);\n}\n\n/* WITH BORDER */\n\n.hds-card--border {\n border: var(--border-width) solid var(--border-color);\n}\n\n/* WITH BOX-SHADOW */\n\n.hds-card--box-shadow {\n box-shadow: var(--box-shadow-m);\n}\n\n/* BODY */\n\n.hds-card__body {\n display: grid;\n grid-gap: var(--spacing-s);\n gap: var(--spacing-s);\n margin-bottom: var(--spacing-l);\n}\n\n.hds-card__body:last-child {\n margin-bottom: 0;\n}\n\n/* BODY TEXT */\n\n.hds-card__text {\n font-size: var(--fontsize-body-m);\n line-height: var(--lineheight-l);\n}\n",".card {\n --background-color: var(--color-white);\n --border-color: var(--color-black-90);\n --color: var(--color-black-90);\n --border-width: 2px;\n --padding-horizontal: var(--spacing-l);\n --padding-vertical: var(--spacing-m);\n\n background-color: var(--background-color);\n color: var(--color);\n padding: var(--padding-vertical) var(--padding-horizontal);\n}\n\n.boxShadow {\n composes: hds-card--box-shadow from 'hds-core/lib/components/card/card.css';\n}\n\n.border {\n composes: hds-card--border from 'hds-core/lib/components/card/card.css';\n}\n\n.body {\n composes: hds-card__body from 'hds-core/lib/components/card/card.css';\n}\n\n.text {\n composes: hds-card__text from 'hds-core/lib/components/card/card.css';\n}\n","// focus outline\n%dropdownFocusOutline {\n box-shadow: 0 0 0 var(--focus-outline-width) var(--focus-outline-color);\n}\n\n/**\n * ROOT\n */\n%dropdownRoot {\n --border-width: 2px;\n --divider-width: 1px;\n --focus-outline-width: 3px;\n --dropdown-height: var(--spacing-3-xl);\n --menu-item-height: calc(var(--dropdown-height) - var(--border-width) * 2);\n --icon-size: var(--spacing-m);\n --menu-z-index: 10;\n --dropdown-background-default: var(--color-white);\n --dropdown-background-disabled: var(--color-black-10);\n --dropdown-border-color-default: var(--color-black-50);\n --dropdown-border-color-hover: var(--color-black-90);\n --dropdown-border-color-hover-invalid: var(--color-error-dark);\n --dropdown-border-color-focus: var(--color-black-90);\n --dropdown-border-color-invalid: var(--color-error);\n --dropdown-border-color-disabled: var(--color-black-10);\n --dropdown-color-default: var(--color-black-90);\n --dropdown-color-disabled: var(--color-black-40);\n --focus-outline-color: var(--color-coat-of-arms);\n --helper-color-default: var(--color-black-60);\n --helper-color-invalid: var(--color-error);\n --menu-divider-color: var(--color-black-20);\n --menu-item-background-default: var(--color-white);\n --menu-item-background-hover: var(--color-bus);\n --menu-item-background-selected: var(--color-white);\n --menu-item-background-selected-hover: var(--color-bus);\n --menu-item-background-disabled: var(--color-white);\n --menu-item-color-default: var(--color-black-90);\n --menu-item-color-hover: var(--color-white);\n --menu-item-color-selected: var(--color-black-90);\n --menu-item-color-selected-hover: var(--color-white);\n --menu-item-color-disabled: var(--color-black-40);\n --menu-item-icon-color-selected: var(--color-white);\n --menu-item-icon-color-disabled: var(--color-black-40);\n --multiselect-checkbox-background-selected: var(--color-bus);\n --multiselect-checkbox-background-disabled: var(--color-black-10);\n --multiselect-checkbox-border-default: var(--color-black-50);\n --multiselect-checkbox-border-hover: var(--color-black-90);\n --multiselect-checkbox-border-disabled: var(--color-black-10);\n --multiselect-checkbox-color-default: transparent;\n --multiselect-checkbox-color-selected: var(--color-white);\n --multiselect-checkbox-color-selected-disabled: var(--color-white);\n --placeholder-color: var(--color-black-60);\n\n position: relative;\n\n &.open {\n .angleIcon {\n transform: rotateX(180deg);\n }\n\n .menu {\n display: block;\n }\n }\n\n input {\n /*\n * Normalize.css rule\n * 1. Change the font styles in all browsers.\n * 2. Remove the margin in Firefox and Safari.\n */\n font-family: inherit; /* 1 */\n margin: 0; /* 2 */\n\n /*\n * Normalize.css rule\n * Remove the default vertical scrollbar in IE 10+.\n */\n overflow: auto;\n }\n}\n\n/**\n * WRAPPER\n */\n\n%dropdownWrapper {\n background-color: var(--dropdown-background-default);\n border: var(--border-width) solid var(--dropdown-border-color-default);\n box-sizing: border-box;\n min-height: var(--dropdown-height);\n position: relative;\n width: 100%;\n\n &:focus-within {\n @extend %dropdownFocusOutline;\n\n border-color: var(--dropdown-border-color-focus);\n }\n\n &:hover {\n border-color: var(--dropdown-border-color-hover);\n }\n\n &:hover,\n &:focus-within {\n transition: border-color 85ms ease-out;\n }\n}\n\n/**\n * ICON\n */\n\n%dropdownIcon {\n color: var(--dropdown-color-default);\n display: flex;\n margin-right: var(--spacing-2-xs);\n}\n\n/**\n * ANGLE ICON\n */\n\n%dropdownAngleIcon {\n color: var(--dropdown-color-default);\n position: absolute;\n right: var(--spacing-s);\n top: var(--spacing-xs);\n transform: translateY(2px);\n}\n\n/**\n * MENU\n */\n\n%dropdownMenu {\n border: solid var(--dropdown-border-color-focus);\n border-top-color: var(--menu-divider-color);\n border-width: var(--divider-width) var(--border-width) var(--border-width);\n bottom: 0;\n display: none;\n left: 0;\n list-style: none;\n margin: 0;\n outline: none;\n overflow-y: auto;\n padding: 0;\n position: absolute;\n transform: translate(calc(var(--border-width) * -1), 100%);\n width: 100%;\n z-index: var(--menu-z-index);\n}\n\n/**\n * MENU ITEM\n */\n\n%dropdownMenuItem {\n align-items: center;\n background-color: var(--menu-item-background-default);\n box-sizing: border-box;\n color: var(--menu-item-color-default);\n cursor: pointer;\n display: flex;\n font-size: var(--fontsize-body-l);\n justify-content: space-between;\n line-height: var(--lineheight-m);\n min-height: var(--menu-item-height);\n padding: var(--spacing-xs) var(--spacing-s);\n\n &.highlighted {\n background-color: var(--menu-item-background-hover);\n color: var(--menu-item-color-hover);\n }\n\n &.selected {\n background-color: var(--menu-item-background-selected);\n color: var(--menu-item-color-selected);\n }\n\n &.highlighted.selected {\n background-color: var(--menu-item-background-selected-hover);\n color: var(--menu-item-color-selected-hover);\n }\n\n &.disabled,\n &.disabled.highlighted {\n background-color: var(--menu-item-background-disabled);\n color: var(--menu-item-color-disabled);\n cursor: not-allowed;\n }\n\n &.virtualized {\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n }\n}\n\n/**\n * HELPER TEXT\n */\n\n%dropdownHelperText {\n color: var(--helper-color-default);\n margin-top: var(--spacing-3-xs);\n}\n\n/**\n * DISABLED\n */\n\n%dropdownDisabled {\n .wrapper {\n background-color: var(--dropdown-background-disabled);\n border-color: var(--dropdown-border-color-disabled);\n color: var(--dropdown-color-disabled);\n\n &,\n > * {\n cursor: not-allowed;\n }\n }\n\n .icon,\n .angleIcon {\n color: var(--dropdown-color-disabled);\n }\n}\n\n/**\n * INVALID\n */\n\n%dropdownInvalid {\n .wrapper {\n border-color: var(--dropdown-border-color-invalid);\n\n &:hover {\n border-color: var(--dropdown-border-color-hover-invalid);\n }\n }\n\n .errorText {\n align-items: center;\n color: var(--helper-color-invalid);\n display: flex;\n margin-top: var(--spacing-3-xs);\n }\n\n .invalidIcon {\n margin-right: var(--spacing-2-xs);\n }\n}\n\n/**\n * MULTISELECT\n */\n\n%dropdownMultiselect {\n .menuItem {\n justify-content: flex-start;\n\n &.highlighted,\n &.selected,\n &.highlighted.selected {\n background-color: var(--menu-item-background-default);\n color: var(--menu-item-color-default);\n }\n\n .checkbox {\n border: var(--spacing-4-xs) solid var(--multiselect-checkbox-border-default);\n box-sizing: border-box;\n color: var(--multiselect-checkbox-color-default);\n height: var(--icon-size);\n margin-right: var(--spacing-xs);\n width: var(--icon-size);\n }\n\n &.highlighted .checkbox,\n &.disabled .checkbox {\n transition: border-color 85ms ease-out;\n }\n\n &.highlighted .checkbox {\n @extend %dropdownFocusOutline;\n\n border-color: var(--multiselect-checkbox-border-hover);\n }\n\n &.selected .checkbox {\n background-color: var(--multiselect-checkbox-background-selected);\n border: 0;\n color: var(--multiselect-checkbox-color-selected);\n }\n\n &.highlighted.selected .checkbox {\n @extend %dropdownFocusOutline;\n }\n\n &.disabled .checkbox {\n background-color: var(--multiselect-checkbox-background-disabled);\n border-color: var(--multiselect-checkbox-border-disabled);\n }\n\n &.disabled.selected .checkbox {\n color: var(--multiselect-checkbox-color-selected-disabled);\n }\n }\n}\n","@import \"../../../styles/common.scss\";\n@import \"../dropdown.common.scss\";\n\n/**\n * WRAPPER\n */\n\n.wrapper {\n @extend %dropdownWrapper;\n}\n\n/**\n * TOGGLE BUTTON\n */\n\n.button {\n @extend %buttonReset;\n\n align-items: center;\n color: var(--dropdown-color-default);\n display: flex;\n font-size: var(--fontsize-body-l);\n min-height: var(--menu-item-height);\n outline: none;\n padding: calc(var(--spacing-s) - var(--border-width) * 2) var(--spacing-s);\n width: 100%;\n\n &.placeholder {\n color: var(--placeholder-color);\n }\n\n &.placeholder:disabled {\n color: var(--dropdown-color-disabled);\n }\n}\n\n/**\n * THE BUTTON LABEL (SELECTED VALUE OR PLACEHOLDER)\n */\n.buttonLabel {\n padding-right: var(--spacing-layout-xs);\n}\n\n.buttonLabel.buttonLabelWithClearButton {\n padding-right: var(--spacing-3-xl);\n}\n\n/**\n * ICON\n */\n\n.icon {\n @extend %dropdownIcon;\n}\n\n/**\n * ANGLE ICON\n */\n\n.angleIcon {\n @extend %dropdownAngleIcon;\n}\n\n.root {\n @extend %dropdownRoot;\n\n &.open {\n .angleIcon {\n transform: translateY(2px) rotateX(180deg);\n }\n }\n}\n\n/**\n * MENU\n */\n\n.menu {\n @extend %dropdownMenu;\n}\n\n/**\n * MENU ITEM\n */\n\n.menuItem {\n @extend %dropdownMenuItem;\n}\n\n/**\n * HELPER TEXT\n */\n\n.helperText {\n @extend %dropdownHelperText;\n}\n\n/**\n * DISABLED\n */\n\n.disabled {\n @extend %dropdownDisabled;\n}\n\n/**\n * INVALID\n */\n\n.invalid {\n @extend %dropdownInvalid;\n}\n\n/**\n * MULTISELECT\n */\n\n.multiselect {\n @extend %dropdownMultiselect;\n\n .button {\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n z-index: 0;\n\n &:focus:not(:active) .angleIcon {\n @extend %dropdownFocusOutline;\n }\n }\n}","@import \"../../styles/common.scss\";\n\n.label {\n @extend %inputLabel;\n}\n\n.hidden {\n @extend %visuallyHidden;\n}\n\n.tooltipButton {\n position: absolute;\n right: 0;\n top: 0;\n}\n","@keyframes fadeIn {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n.hds-text-input {\n --border-width: 2px;\n --outline-width: 3px;\n --input-height: 56px;\n --textarea-height: 149px;\n --icon-size: var(--spacing-m);\n --helper-color-default: var(--color-black-60);\n --helper-color-invalid: var(--color-error);\n --helper-color-success: var(--color-success);\n --helper-color-info: var(--color-black-90);\n --helper-color-info-icon: var(--color-coat-of-arms);\n --icon-color-invalid: var(--color-error);\n --input-background-default: var(--color-white);\n --input-background-disabled: var(--color-black-10);\n --input-border-color-default: var(--color-black-50);\n --input-border-color-hover : var(--color-black-90);\n --input-border-color-focus: var(--color-black-90);\n --input-border-color-invalid: var(--color-error);\n --input-border-color-disabled: var(--color-black-10);\n --input-border-color-success: var(--color-success);\n --input-color-default: var(--color-black-90);\n --input-color-disabled: var(--color-black-40);\n --label-color-default: var(--color-black-90);\n --label-color-invalid: var(--color-black-90);\n --placeholder-color: var(--color-black-60);\n}\n\n.hds-text-input .hds-text-input__input {\n /* removes the input shadow on iOS */\n -webkit-appearance: none;\n background-color: var(--input-background-default);\n border: var(--border-width) solid var(--input-border-color-default);\n\n /* removes the border radius on iOS */\n border-radius: 0;\n box-sizing: border-box;\n color: var(--input-color-default);\n\n /*\n * Normalize.css rules\n * 1. Change the font styles in all browsers.\n */\n font-family: inherit; /* 1 */\n font-size: 1.125em;\n height: var(--input-height);\n line-height: normal;\n\n /*\n * Normalize.css rules\n * 2. Remove the margin in Firefox and Safari.\n */\n margin: 0; /* 2 */\n padding: 0 var(--spacing-s);\n width: 100%;\n will-change: transform, box-shadow;\n}\n\n/* text-input transitions */\n\n.hds-text-input .hds-text-input__input:hover {\n border-color: var(--input-border-color-hover);\n transition: border-color 85ms ease-out;\n}\n\n.hds-text-input__input-wrapper:focus-within .hds-text-input__input {\n border-color: var(--input-border-color-focus);\n outline: none;\n}\n\n.hds-text-input.hds-text-input--invalid .hds-text-input__input {\n border-color: var(--input-border-color-invalid);\n}\n\n.hds-text-input.hds-text-input--success .hds-text-input__input {\n border-color: var(--input-border-color-success);\n}\n\n.hds-text-input__input-wrapper:focus-within .hds-text-input__input:not([readonly]) {\n box-shadow: 0 0 0 var(--outline-width) var(--color-focus-outline);\n transform: translate3d(0, 0, 0);\n transition: 85ms ease-out;\n transition-property: box-shadow, transform;\n}\n\n.hds-text-input__label {\n color: var(--label-color-default);\n display: block;\n font-size: var(--fontsize-body-m);\n font-weight: 500;\n margin-bottom: var(--spacing-3-xs);\n}\n\n.hds-text-input--invalid .hds-text-input__label {\n color: var(--label-color-invalid);\n transition: color 85ms linear;\n}\n\n/* REQUIRED */\n\n.hds-text-input__required {\n color: var(--color-black-90);\n display: inline-block;\n font-size: var(--fontsize-body-xl);\n line-height: 1;\n margin-left: var(--spacing-2-xs);\n transform: translateY(var(--spacing-3-xs));\n}\n\n/* INPUT */\n\n.hds-text-input__input-wrapper {\n display: flex;\n position: relative;\n}\n\n.hds-text-input textarea.hds-text-input__input {\n /*\n * Normalize.css rules\n * 1. Change the font styles in all browsers.\n */\n font-family: inherit; /* 1 */\n height: var(--textarea-height);\n\n /*\n * Normalize.css rules\n * 2. Remove the margin in Firefox and Safari.\n */\n margin: 0; /* 2 */\n min-height: var(--input-height);\n\n /*\n * Normalize.css rule\n * 1. Remove the default vertical scrollbar in IE 10+.\n */\n overflow: auto; /* 1 */\n padding: var(--spacing-s);\n resize: vertical;\n}\n\n.hds-text-input .hds-text-input__input::-moz-placeholder {\n color: var(--placeholder-color);\n opacity: 1;\n}\n\n.hds-text-input .hds-text-input__input::placeholder {\n color: var(--placeholder-color);\n opacity: 1;\n}\n\n/* HELPER TEXT */\n\n.hds-text-input__helper-text {\n color: var(--helper-color-default);\n display: block;\n font-size: var(--fontsize-body-m);\n line-height: var(--lineheight-l);\n margin-top: var(--spacing-3-xs);\n white-space: pre-line;\n}\n\n/* ERROR TEXT */\n\n.hds-text-input__error-text {\n color: var(--helper-color-invalid);\n display: block;\n font-size: var(--fontsize-body-m);\n line-height: var(--lineheight-l);\n margin-top: var(--spacing-3-xs);\n padding-left: calc(var(--icon-size) + var(--spacing-2-xs));\n position: relative;\n white-space: pre-line;\n}\n\n.hds-text-input__error-text:not(:last-child) {\n margin-bottom: var(--spacing-2-xs);\n}\n\n.hds-text-input__error-text:before {\n animation: fadeIn 85ms ease-out;\n background: var(--icon-color-invalid);\n content: '';\n height: var(--icon-size);\n left: 0;\n -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 Z M13,16 L13,18 L11,18 L11,16 L13,16 Z M13,6 L13,14 L11,14 L11,6 L13,6 Z'/%3E %3C/g%3E %3C/svg%3E\");\n mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 Z M13,16 L13,18 L11,18 L11,16 L13,16 Z M13,6 L13,14 L11,14 L11,6 L13,6 Z'/%3E %3C/g%3E %3C/svg%3E\");\n pointer-events: none;\n position: absolute;\n top: 0;\n width: var(--icon-size);\n}\n\n.hds-text-input__success-text {\n color: var(--helper-color-success);\n display: block;\n font-size: var(--fontsize-body-m);\n line-height: var(--lineheight-l);\n margin-top: var(--spacing-3-xs);\n padding-left: calc(var(--icon-size) + var(--spacing-2-xs));\n position: relative;\n white-space: pre-wrap;\n}\n\n.hds-text-input__success-text:not(:last-child) {\n margin-bottom: var(--spacing-2-xs);\n}\n\n.hds-text-input__success-text:before {\n animation: fadeIn 85ms ease-out;\n background: var(--helper-color-success);\n content: '';\n height: var(--icon-size);\n left: 0;\n -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C7.02943725,3 3,7.02943725 3,12 C3,16.9705627 7.02943725,21 12,21 C16.9705627,21 21,16.9705627 21,12 C21,7.02943725 16.9705627,3 12,3 Z M16.5,8 L18,9.5 L10.5,17 L6,12.5 L7.5,11 L10.5,14 L16.5,8 Z'/%3E %3C/g%3E %3C/svg%3E\");\n mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C7.02943725,3 3,7.02943725 3,12 C3,16.9705627 7.02943725,21 12,21 C16.9705627,21 21,16.9705627 21,12 C21,7.02943725 16.9705627,3 12,3 Z M16.5,8 L18,9.5 L10.5,17 L6,12.5 L7.5,11 L10.5,14 L16.5,8 Z'/%3E %3C/g%3E %3C/svg%3E\");\n pointer-events: none;\n position: absolute;\n top: 0;\n width: var(--icon-size);\n}\n\n/* INFO TEXT */\n\n.hds-text-input__info-text {\n color: var(--helper-color-info);\n display: block;\n font-size: var(--fontsize-body-m);\n line-height: var(--lineheight-l);\n margin-top: var(--spacing-3-xs);\n padding-left: calc(var(--icon-size) + var(--spacing-2-xs));\n position: relative;\n}\n\n.hds-text-input__info-text:not(:last-child) {\n margin-bottom: var(--spacing-2-xs);\n}\n\n.hds-text-input__info-text:before {\n animation: fadeIn 85ms ease-out;\n background: var(--helper-color-info-icon);\n content: '';\n height: var(--icon-size);\n left: 0;\n -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 Z M13,16 L13,18 L11,18 L11,16 L13,16 Z M13,6 L13,14 L11,14 L11,6 L13,6 Z'/%3E %3C/g%3E %3C/svg%3E\");\n mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 Z M13,16 L13,18 L11,18 L11,16 L13,16 Z M13,6 L13,14 L11,14 L11,6 L13,6 Z'/%3E %3C/g%3E %3C/svg%3E\");\n pointer-events: none;\n position: absolute;\n top: 0;\n width: var(--icon-size);\n}\n\n/* DISABLED */\n\n.hds-text-input .hds-text-input__input[disabled] {\n background-color: var(--input-background-disabled);\n border-color: var(--input-border-color-disabled);\n color: var(--input-color-disabled);\n cursor: not-allowed;\n}\n\n/* READ-ONLY */\n\n.hds-text-input .hds-text-input__input[readonly] {\n background-color: transparent;\n border: 0;\n color: var(--input-color-default);\n padding: 0;\n\n /* fixes faded text color on Safari */\n -webkit-text-fill-color: var(--input-color-default);\n}\n\n/* BUTTON */\n\n.hds-text-input__buttons {\n align-items: center;\n bottom: 0;\n display: flex;\n font-size: 1rem;\n justify-content: center;\n margin-right: calc(var(--spacing-s) - var(--spacing-xs) / 2);\n position: absolute;\n right: 0;\n top: 0;\n}\n\n.hds-text-input__button {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background: none;\n border: none;\n cursor: pointer;\n display: flex;\n font: inherit;\n outline: none;\n padding: var(--spacing-xs) calc(var(--spacing-xs) / 2);\n}\n\n.hds-text-input__button:focus {\n outline: var(--outline-width) solid var(--color-focus-outline);\n}\n",".indicator {\n composes: hds-text-input__required from 'hds-core/lib/components/text-input/text-input.css';\n}\n","@import \"../../styles/common.scss\";\n\n.root {\n --button-focus-outline-width: 3px;\n --button-focus-outline-color: var(--color-coat-of-arms);\n --tooltip-arrow-size: 8px;\n --tooltip-background: var(--color-coat-of-arms-light);\n --tooltip-border-color: var(--color-coat-of-arms);\n --tooltip-spacing-default: var(--spacing-s);\n --tooltip-spacing-small: var(--spacing-3-xs) var(--spacing-2-xs);\n}\n\n.tooltip {\n background-color: var(--tooltip-background);\n font-size: var(--fontsize-body-s);\n font-weight: normal;\n line-height: 24px;\n max-width: 21.875rem;\n padding: var(--tooltip-spacing-default);\n z-index: 1000;\n}\n\n.boxShadow {\n box-shadow: var(--box-shadow-s);\n}\n\n/* SMALL VARIATION */\n.small {\n padding: var(--tooltip-spacing-small);\n}\n\n/* TOGGLE BUTTON */\n.button {\n @extend %buttonReset;\n\n > span {\n display: flex;\n }\n\n &:focus {\n box-shadow: 0 0 0 var(--button-focus-outline-width) var(--button-focus-outline-color);\n outline: none;\n }\n}\n\n/* BORDER */\n.tooltip[data-popper-placement^=\"bottom\"] {\n border-top: 8px solid var(--tooltip-border-color);\n}\n\n.tooltip[data-popper-placement^=\"top\"] {\n border-bottom: 8px solid var(--tooltip-border-color);\n}\n\n.tooltip[data-popper-placement^=\"left\"] {\n border-right: 8px solid var(--tooltip-border-color);\n}\n\n.tooltip[data-popper-placement^=\"right\"] {\n border-left: 8px solid var(--tooltip-border-color);\n}\n\n/* ARROW */\n.tooltip .arrow {\n position: absolute;\n}\n\n.tooltip[data-popper-placement^=\"bottom\"] .arrow {\n border-bottom: var(--tooltip-arrow-size) solid var(--tooltip-border-color);\n border-left: var(--tooltip-arrow-size) solid transparent;\n border-right: var(--tooltip-arrow-size) solid transparent;\n border-top: var(--tooltip-arrow-size) solid transparent;\n top: calc(-1 * var(--tooltip-spacing-default) - var(--tooltip-arrow-size));\n}\n\n.tooltip[data-popper-placement^=\"top\"] .arrow {\n border-bottom: var(--tooltip-arrow-size) solid transparent;\n border-left: var(--tooltip-arrow-size) solid transparent;\n border-right: var(--tooltip-arrow-size) solid transparent;\n border-top: var(--tooltip-arrow-size) solid var(--tooltip-border-color);\n bottom: calc(-1 * var(--tooltip-spacing-default) - var(--tooltip-arrow-size));\n}\n\n.tooltip[data-popper-placement^=\"left\"] .arrow {\n border-bottom: var(--tooltip-arrow-size) solid transparent;\n border-left: var(--tooltip-arrow-size) solid var(--tooltip-border-color);\n border-right: var(--tooltip-arrow-size) solid transparent;\n border-top: var(--tooltip-arrow-size) solid transparent;\n right: calc(-1 * var(--tooltip-spacing-default) - var(--tooltip-arrow-size));\n}\n\n.tooltip[data-popper-placement^=\"right\"] .arrow {\n border-bottom: var(--tooltip-arrow-size) solid transparent;\n border-left: var(--tooltip-arrow-size) solid transparent;\n border-right: var(--tooltip-arrow-size) solid var(--tooltip-border-color);\n border-top: var(--tooltip-arrow-size) solid transparent;\n left: calc(-1 * var(--tooltip-spacing-default) - var(--tooltip-arrow-size));\n}\n","%hidden {\n left: -9999px;\n position: absolute;\n top: -9999px;\n visibility: hidden;\n}\n\n.selectedItems {\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n padding: var(--spacing-4-xs) calc((var(--spacing-s) - var(--border-width)) * 2 + (var(--icon-size) * 2))\n calc(var(--spacing-2-xs) + var(--border-width)) var(--spacing-4-xs);\n\n &.itemsHidden {\n box-sizing: border-box;\n height: var(--menu-item-height);\n overflow: hidden;\n }\n\n &.noToggle {\n padding-right: calc((var(--spacing-s) - var(--border-width)) * 2 + (var(--icon-size)));\n }\n\n .tag {\n margin: var(--spacing-2-xs) 0 0 var(--spacing-2-xs);\n position: relative;\n z-index: 1;\n\n &.hidden {\n @extend %hidden;\n }\n }\n\n &.truncateFirstChild {\n flex-wrap: nowrap;\n\n & > .tag:first-child {\n justify-content: flex-end;\n overflow: hidden;\n\n .tagLabel {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n }\n }\n\n .hiddenItemsCount {\n font-weight: bold;\n margin: var(--spacing-xs) 0 0 var(--spacing-xs);\n opacity: 1;\n pointer-events: none;\n transition: 50ms cubic-bezier(0.47, 0, 0.75, 0.72);\n user-select: none;\n\n &.hidden {\n @extend %hidden;\n\n opacity: 0;\n }\n }\n}\n\n.clearButton {\n background: none;\n border: none;\n color: inherit;\n cursor: pointer;\n display: flex;\n font: inherit;\n outline: none;\n padding: 0;\n position: absolute;\n right: calc(var(--border-width) * -1);\n top: 0;\n transform: translate(calc(var(--spacing-2-xl) * -1), calc(var(--menu-item-height) / 2 - 50%));\n z-index: 1;\n\n &:focus {\n box-shadow: 0 0 0 var(--focus-outline-width) var(--focus-outline-color);\n }\n\n &.noToggle {\n transform: translate(calc(var(--spacing-s) * -1), calc(var(--menu-item-height) / 2 - 50%));\n }\n}\n",".hds-icon {\n --icon-size: 100%;\n\n background-color: currentcolor;\n display: inline-block;\n height: var(--icon-size);\n -webkit-mask-position: center;\n mask-position: center;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-size: auto;\n mask-size: auto;\n width: var(--icon-size);\n}\n\n.hds-icon.hds-icon--size-xs {\n --icon-size: var(--spacing-layout-2-xs);\n}\n\n.hds-icon.hds-icon--size-s {\n --icon-size: var(--spacing-layout-xs);\n}\n\n.hds-icon.hds-icon--size-m {\n --icon-size: var(--spacing-layout-s);\n}\n\n.hds-icon.hds-icon--size-l {\n --icon-size: var(--spacing-layout-m);\n}\n\n.hds-icon.hds-icon--size-xl {\n --icon-size: var(--spacing-layout-l);\n}\n\n.hds-icon--cross {\n -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18 7.5L13.5 12L18 16.5L16.5 18L12 13.5L7.5 18L6 16.5L10.5 12L6 7.5L7.5 6L12 10.5L16.5 6L18 7.5Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18 7.5L13.5 12L18 16.5L16.5 18L12 13.5L7.5 18L6 16.5L10.5 12L6 7.5L7.5 6L12 10.5L16.5 6L18 7.5Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n}\n\n.hds-tag {\n --tag-background: var(--color-black-10);\n --tag-color: var(--color-black-90);\n --tag-font-size: var(--fontsize-body-s);\n --tag-spacing: var(--spacing-2-xs);\n --tag-height: 32px;\n\n align-items: center;\n background-color: var(--tag-background);\n border-radius: 20px;\n color: var(--tag-color);\n display: inline-flex;\n flex-direction: row;\n font-size: var(--tag-font-size);\n line-height: var(--tag-height);\n min-height: var(--tag-height);\n outline: none;\n}\n\n.hds-tag--large {\n --tag-font-size: var(--fontsize-body-m);\n --tag-spacing: var(--spacing-s);\n --tag-height: 48px;\n\n border-radius: 24px;\n flex-direction: row;\n}\n\n.hds-tag:focus,\n.hds-tag:focus-within {\n box-shadow: 0 0 0 3px var(--color-focus-outline);\n}\n\n.hds-tag[tabindex='0'] {\n cursor: pointer;\n}\n\n.hds-tag__label {\n line-height: var(--lineheight-m);\n padding: 0 var(--tag-spacing);\n}\n\n.hds-tag__label:not(:only-child) {\n padding: 0 0 0 var(--tag-spacing);\n}\n\n.hds-tag__delete-button {\n display: flex;\n margin-right: calc(var(--tag-spacing) / 2);\n outline: none;\n }\n\n.hds-tag__delete-button .hds-icon {\n height: var(--spacing-m);\n width: var(--spacing-m);\n}\n","@import \"../../styles/common.scss\";\n\n.tag {\n composes: hds-tag from 'hds-core/lib/components/tag/tag.css';\n}\n\n// Child nodes\n.label {\n composes: hds-tag__label from 'hds-core/lib/components/tag/tag.css';\n}\n\n// Large size variant\n.large {\n composes: hds-tag--large from 'hds-core/lib/components/tag/tag.css';\n}\n\n.deleteButton {\n @extend %buttonReset;\n\n composes: hds-tag__delete-button from 'hds-core/lib/components/tag/tag.css';\n}\n\n.visuallyHidden {\n @extend %visuallyHidden;\n}\n",".hds-icon {\n --icon-size: 100%;\n\n background-color: currentcolor;\n display: inline-block;\n height: var(--icon-size);\n -webkit-mask-position: center;\n mask-position: center;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-size: auto;\n mask-size: auto;\n width: var(--icon-size);\n}\n\n.hds-icon.hds-icon--size-xs {\n --icon-size: var(--spacing-layout-2-xs);\n}\n\n.hds-icon.hds-icon--size-s {\n --icon-size: var(--spacing-layout-xs);\n}\n\n.hds-icon.hds-icon--size-m {\n --icon-size: var(--spacing-layout-s);\n}\n\n.hds-icon.hds-icon--size-l {\n --icon-size: var(--spacing-layout-m);\n}\n\n.hds-icon.hds-icon--size-xl {\n --icon-size: var(--spacing-layout-l);\n}\n\n.hds-icon--link-external {\n -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 3V19H21V21H3V3H5ZM21 3V12H19V6.413L9.91421 15.5L8.5 14.0858L17.585 5H12V3H21Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n}\n\n.hds-link {\n --link-visited-color: #551a8b;\n --link-color: var(--color-bus);\n\n border: 3px solid transparent;\n box-sizing: border-box;\n color: var(--link-color);\n text-decoration: underline;\n}\n\n.hds-link:visited {\n color: var(--link-visited-color);\n}\n\n.hds-link:visited svg g path { /* Fixes external link icon visited color for Safari */\n fill: var(--link-visited-color);\n}\n\n.hds-link:focus {\n border: 3px solid var(--color-focus-outline);\n outline: none;\n}\n\n.hds-link.focus-visible {\n outline: none;\n}\n\n.hds-link:focus-visible {\n outline: none;\n}\n\n.hds-link .vertical-align-medium-icon {\n vertical-align: sub;\n}\n\n.hds-link .vertical-align-big-icon {\n vertical-align: middle;\n}\n\n.hds-link .vertical-align-small-icon {\n vertical-align: text-top;\n}\n\n.hds-link--disable-visited-styles:visited {\n color: var(--color-bus);\n}\n\n.hds-link--small {\n font-size: 14px;\n}\n\n.hds-link--medium {\n font-size: 16px;\n}\n\n.hds-link--large {\n display: block;\n font-size: 18px;\n width: -moz-fit-content;\n width: fit-content;\n}\n\n/* ICONS */\n\n.hds-link--small .icon {\n margin-left: 7px;\n}\n\n.hds-link--medium .icon {\n margin-left: var(--spacing-2-xs);\n margin-top: -3px; /* Fixes lineheight problem for external inline link */\n}\n\n.hds-link--large .icon {\n margin-left: var(--spacing-s);\n}\n\n.hds-link--small .hds-icon-left {\n margin-right: 4px;\n vertical-align: text-top;\n}\n\n.hds-link--medium .hds-icon-left {\n margin-right: 8px;\n vertical-align: sub;\n}\n\n.hds-link--large .hds-icon-left {\n margin-right: 16px;\n vertical-align: middle;\n}\n",".link {\n composes: hds-link from 'hds-core/lib/components/link/link.css';\n}\n\n.icon {\n composes: icon from 'hds-core/lib/components/link/link.css';\n}\n\n.iconLeft {\n composes: hds-icon-left from 'hds-core/lib/components/link/link.css';\n}\n\n.verticalAlignMediumIcon {\n composes: vertical-align-medium-icon from 'hds-core/lib/components/link/link.css';\n}\n\n.verticalAlignBigIcon {\n composes: vertical-align-big-icon from 'hds-core/lib/components/link/link.css';\n}\n\n.verticalAlignSmallIcon {\n composes: vertical-align-small-icon from 'hds-core/lib/components/link/link.css';\n}\n\n.disableVisitedStyles {\n composes: hds-link--disable-visited-styles from 'hds-core/lib/components/link/link.css';\n}\n\n.linkS {\n composes: hds-link--small from 'hds-core/lib/components/link/link.css';\n}\n\n.linkM {\n composes: hds-link--medium from 'hds-core/lib/components/link/link.css';\n}\n\n.linkL {\n composes: hds-link--large from 'hds-core/lib/components/link/link.css';\n}\n",".hds-breadcrumb {\n --horizontal-margin-small: var(--spacing-layout-2-xs);\n --horizontal-margin-medium: var(--spacing-layout-xs);\n --horizontal-margin-large: var(--spacing-layout-xs);\n --horizontal-margin-x-large: var(--spacing-layout-s);\n --horizontal-margin: var(--horizontal-margin-small);\n\n display: flex;\n margin: 0 var(--horizontal-margin);\n padding: var(--spacing-s) 0;\n}\n\n.hds-breadcrumb__list {\n align-items: center;\n flex-direction: row;\n word-wrap: break-word;\n}\n\n.hds-breadcrumb__list--mobile {\n display: flex;\n}\n\n.hds-breadcrumb__list--desktop {\n display: none;\n}\n\n.hds-breadcrumb__list-item {\n align-items: center;\n display: flex;\n line-height: var(--lineheight-l);\n}\n\n.hds-breadcrumb__list-item--active {\n font-weight: 700;\n\n /* to match 3px border around links */\n padding: 3px;\n}\n\n.hds-breadcrumb__link.hds-breadcrumb__link {\n --link-visited-color: none;\n --link-color: var(--color-black-90);\n}\n\n.hds-breadcrumb__link:hover,\n.hds-breadcrumb__link:focus {\n -webkit-text-decoration-color: var(--color-black-90);\n text-decoration-color: var(--color-black-90);\n}\n\n.hds-breadcrumb__list--mobile .hds-breadcrumb__link {\n font-size: var(--fontsize-body-l);\n}\n\n.hds-breadcrumb__back-arrow.hds-breadcrumb__back-arrow {\n display: inline-flex;\n\n /* compensate the white space in the icon */\n margin-left: -5px;\n margin-right: -3px;\n\n --icon-size: var(--spacing-m);\n}\n\n.hds-breadcrumb__separator.hds-breadcrumb__separator {\n display: inline-flex;\n padding-left: var(--spacing-3-xs);\n\n --icon-size: var(--spacing-s);\n}\n\n@media (min-width: 768px) {\n .hds-breadcrumb {\n --horizontal-margin: var(--horizontal-margin-medium);\n }\n\n .hds-breadcrumb__list--mobile {\n display: none;\n }\n\n .hds-breadcrumb__list--desktop {\n display: flex;\n flex-wrap: wrap;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n}\n\n@media (min-width: 992px) {\n .hds-breadcrumb {\n --horizontal-margin: var(--horizontal-margin-large);\n }\n}\n\n@media (min-width: 1248px) {\n .hds-breadcrumb {\n --horizontal-margin: var(--horizontal-margin-x-large);\n }\n}\n","@value medium-up from \"../../styles/breakpoints.scss\";\n\n.breadcrumb {\n composes: hds-breadcrumb from 'hds-core/lib/components/breadcrumb/breadcrumb.css';\n}\n\n.list {\n composes: hds-breadcrumb__list from 'hds-core/lib/components/breadcrumb/breadcrumb.css';\n}\n\n.mobileList {\n composes: hds-breadcrumb__list--mobile from 'hds-core/lib/components/breadcrumb/breadcrumb.css';\n}\n\n.desktopList {\n composes: hds-breadcrumb__list--desktop from 'hds-core/lib/components/breadcrumb/breadcrumb.css';\n}\n\n.listItem {\n composes: hds-breadcrumb__list-item from 'hds-core/lib/components/breadcrumb/breadcrumb.css';\n}\n\n.activeListItem {\n composes: hds-breadcrumb__list-item--active from 'hds-core/lib/components/breadcrumb/breadcrumb.css';\n}\n\n.link {\n composes: hds-breadcrumb__link from 'hds-core/lib/components/breadcrumb/breadcrumb.css';\n}\n\n.backArrow {\n composes: hds-breadcrumb__back-arrow from 'hds-core/lib/components/breadcrumb/breadcrumb.css';\n}\n\n.separator {\n composes: hds-breadcrumb__separator from 'hds-core/lib/components/breadcrumb/breadcrumb.css';\n}\n\n/* icon is aligned differently in the svg itself */\n.separator.separator {\n padding-left: 2px;\n padding-right: 2px;\n}\n","@use \"../../styles/common.scss\";\n@use \"../../styles/layout.scss\";\n\n.header {\n --header-background-color: var(--color-white);\n --header-color: var(--color-black-90);\n --header-height: var(--spacing-4-xl);\n --header-focus-outline-width: 3px;\n --header-focus-outline-border-radius: 0;\n --header-focus-outline-color: var(--color-coat-of-arms);\n --header-divider-color: var(--color-black-20);\n --header-z-index: 10;\n --header-margin: var(--spacing-m);\n --header-max-width: 1440px;\n --header-item-border-color: var(--color-black-20);\n --header-item-hover-color: var(--color-black-20);\n --actionbar-background-color: var(--color-white);\n --action-bar-container-height: 88px;\n --action-bar-section-gutter: var(--spacing-s);\n --action-bar-dropdown-menu-caret-width: 64px;\n --action-bar-dropdown-menu-primary-item-height: 64px;\n --action-bar-dropdown-menu-secondary-item-height: 48px;\n --action-bar-button-size: 64px;\n --action-bar-item-gutter: 12px;\n --action-bar-item-title-font-size: var(--fontsize-body-s);\n --action-bar-item-title-font-color: var(--header-color);\n --lang-selector-mobile-background-color: var(--color-silver-light);\n --lang-selector-item-font-color: var(--header-color);\n --lang-selector-dropdown-background-color: var(--color-white);\n --nav-link-font-color: var(--header-color);\n --nav-border-color: var(--color-black-20);\n --nav-link-hover-color: var(--color-black-90);\n --nav-link-dropdown-background-color: var(--color-white);\n --nav-button-background-color: var(--color-black-5);\n --nav-button-hover-background-color: var(--color-black-5);\n --nav-search-color: var(--header-color);\n --nav-mobile-menu-background-color: var(--color-white);\n --nav-mobile-menu-bottom-background-color: var(--color-silver-light);\n --nav-mobile-margin-left: var(--spacing-s);\n --universal-bar-background-color: var(--color-black-5);\n --logo-height: 56px;\n --icon-size: 24px;\n --nav-drop-down-icon-color: var(--color-black);\n --nav-background-color:var(--color-white);\n\n @include layout.below-large {\n --action-bar-container-height: 74px;\n --logo-height: 48px;\n }\n\n @include layout.below-medium {\n --header-margin: var(--spacing-s);\n --action-bar-container-height: 64px;\n --logo-height: 32px;\n }\n\n @include layout.below-small {\n --header-margin: var(--spacing-xs);\n --action-bar-container-height: 64px;\n --logo-height: 32px;\n }\n\n &.theme-dark {\n --color-focus-outline: var(--color-white);\n --header-color: var(--color-white); \n --header-focus-outline-color: var(--color-white);\n --header-background-color: var(--color-black-80);\n --nav-border-color: var(--color-white);\n --nav-link-hover-color: var(--color-white);\n --universal-bar-background-color: var(--color-black-60);\n --navigation-link-button-background-color: var(--color-black-60);\n --nav-link-dropdown-background-color: var(--color-black-80);\n --lang-selector-mobile-background-color: var(--color-black-80);\n --lang-selector-dropdown-background-color: var(--color-black-60);\n --nav-button-background-color: var(--color-black-60);\n --nav-button-hover-background-color: var(--color-black-60);\n --nav-drop-down-icon-color: var(--color-white);\n --actionbar-background-color: var(--color-black-80);\n --nav-background-color: var(--color-black-80);\n --nav-mobile-menu-background-color: var(--color-black-80);\n --nav-mobile-menu-bottom-background-color: var(--color-black-60);\n }\n\n background-color: var(--header-background-color);\n color: var(--header-color);\n position: relative;\n width: 100%;\n\n}\n\n/* BACKGROUND WRAPPER */\n\n.headerBackgroundWrapper {\n position: relative;\n z-index: var(--header-z-index);\n}\n","@import '~hds-design-tokens/lib/all.scss';\n\n// MEDIA QUERIES\n\n// A list of breakpoints.\n$breakpoints: (\n $breakpoint-xs,\n $breakpoint-s,\n $breakpoint-m,\n $breakpoint-l,\n $breakpoint-xl,\n);\n\n// RESPOND ABOVE\n\n// @include respond-above($breakpoint.s) {}\n@mixin respond-above($breakpoint) {\n @if not index($breakpoints, $breakpoint) {\n // If the breakpoint doesn't exist in the list.\n // Log a warning.\n @warn 'Invalid breakpoint: #{$breakpoint}.';\n } @else {\n // If the breakpoint exists in the list.\n // Write the media query.\n @media only screen and (min-width: $breakpoint) {\n @content;\n }\n }\n}\n\n// RESPOND BELOW\n\n// @include respond-below($breakpoint.s) {}\n@mixin respond-below($breakpoint) {\n @if not index($breakpoints, $breakpoint) {\n // If the breakpoint doesn't exist in the list.\n // Log a warning.\n @warn 'Invalid breakpoint: #{$breakpoint}.';\n } @else {\n // Write the media query.\n @media only screen and (max-width: ($breakpoint - 1)) {\n @content;\n }\n }\n}\n\n@mixin below-small() { @include respond-below($breakpoint-s) { @content; }}\n\n@mixin below-medium() { @include respond-below($breakpoint-m) { @content; }}\n\n@mixin below-large() { @include respond-below($breakpoint-l) { @content; }}\n","@value x-small-down, small-down from \"../../../../styles/breakpoints.scss\";\n\n.headerUniversalBar {\n align-items: center;\n box-sizing: border-box;\n display: flex;\n margin: 0 auto;\n max-width: var(--header-max-width);\n min-height: 48px;\n padding: 0 var(--header-margin);\n width: 100%;\n}\n\n.headerUniversalBarContainer {\n background: var(--universal-bar-background-color);\n width: 100%;\n}\n\n.headerUniversalBarList {\n display: flex;\n gap: 0 var(--spacing-l);\n list-style: none;\n margin: 0;\n padding: 0;\n width: 100%;\n}\n\n.universalBarMainLinkContainer {\n display: flex;\n flex: 1;\n justify-self: start;\n}\n\n.universalBarSecondaryLinkContainer {\n display: flex;\n justify-self: end;\n}\n\n.universalBarSecondaryLinkContainer:last-child {\n margin-right: 0;\n}\n\n.universalBarLink.universalBarLink {\n font-size: var(--fontsize-body-m);\n}\n\n/* MEDIA */\n@media small-down {\n .headerUniversalBarList {\n gap: 0 var(--spacing-m);\n }\n}\n\n@media x-small-down {\n .universalBarLink.universalBarLink {\n font-size: var(--fontsize-body-s);\n }\n}\n","@use \"../../Header.module.scss\";\n@import \"../../../../styles/common.scss\";\n\n.headerLink.headerLink {\n --link-color: var(--color-black-90);\n --link-font-size: var(--fontsize-body-s);\n --link-visited-color: none;\n\n border: 0;\n color: var(--nav-link-font-color);\n display: flex;\n line-height: var(--lineheight-l);\n margin: 0;\n text-decoration: none;\n word-wrap: break-word;\n\n &:hover {\n text-decoration: underline;\n text-decoration-color: var(--nav-link-hover-color);\n }\n\n &:focus-visible {\n border: none;\n outline: var(--header-focus-outline-width) solid var(--header-focus-outline-color);\n outline-offset: var(--header-focus-outline-width);\n }\n}\n\n.active {\n font-weight: 700;\n padding-left: var(--header-focus-outline-width);\n}\n\n\n.navigationLinkWrapper {\n align-items: center;\n display: flex;\n height: 100%;\n justify-content: space-between;\n position: relative;\n\n &.isNotLargeScreen {\n width: 100%;\n\n &,\n &:focus {\n border-top-width: 1px;\n }\n\n ul {\n border: none;\n }\n }\n}\n\n.headerLink.isNotLargeScreen{\n align-self: center;\n border: none;\n box-sizing: border-box;\n color: var(--nav-link-font-color);\n font-size: var(--fontsize-body-xl);\n margin-left: var(--nav-mobile-margin-left);\n padding: 0;\n word-wrap: break-word;\n\n &:focus { border: none }\n}\n","@use \"../../../Header.module.scss\";\n\nbutton.button {\n background-color: var(--nav-button-background-color);\n border: none;\n box-sizing: content-box;\n color: var(--nav-drop-down-icon-color);\n display: block;\n height: 24px;\n margin: 0 0 0 var(--spacing-s);\n padding: 0;\n width: 24px;\n\n &.isNotLargeScreen {\n background: transparent;\n border-left: 1px solid var(--nav-button-background-color);\n box-sizing: border-box;\n flex: 0 0 var(--action-bar-dropdown-menu-caret-width);\n height: var(--action-bar-dropdown-menu-secondary-item-height);\n width: unset;\n\n &.depth-0 {\n height: var(--action-bar-dropdown-menu-primary-item-height);\n }\n }\n\n &:hover {\n background-color: var(--nav-button-hover-background-color);\n cursor: pointer;\n }\n\n &:focus-visible {\n outline: 3px solid var(--header-focus-outline-color);\n outline-offset: var(--header-focus-outline-width);\n }\n}\n\n.chevron {\n transition: transform 0.2s ease-in;\n}\n\n.chevronOpen {\n transform: rotate(180deg);\n}\n\n.hidden {\n display: none;\n}\n\n.dropdownMenu {\n background-color: var(--nav-link-dropdown-background-color);\n border: 1px solid var(--nav-border-color);\n display: flex;\n flex-direction: column;\n list-style: none;\n min-width: 280px;\n padding: 0;\n position: absolute;\n top: 100%;\n z-index: calc(var(--header-z-index) + 1);\n\n .dropdownLink {\n font-size: var(--fontsize-body-m);\n margin: var(--spacing-xs) var(--spacing-m) var(--spacing-xs) var(--header-margin);\n padding: 0;\n\n &:focus {\n border: 0;\n }\n\n &:focus-visible {\n outline: 3px solid var(--header-focus-outline-color);\n outline-offset: var(--header-focus-outline-width);\n }\n\n &:before {\n bottom: 0;\n content: '';\n height: 100%;\n left: 0;\n margin: 0;\n position: absolute;\n width: 0;\n }\n\n &:hover:before {\n border-left: 4px solid var(--color-black);\n transition: border-left 100ms ease-in;\n }\n }\n\n .activeLink:before {\n border-left: 4px solid var(--color-black);\n padding-left: var(--spacing-xs);\n }\n\n .button {\n margin: 0 var(--spacing-xs) 0 var(--spacing-s);\n }\n}\n\n.left {\n left: auto;\n right: calc(100%);\n top: -1px;\n}\n\n.right {\n left: calc(100%);\n right: auto;\n top: -1px;\n}\n","@use \"../../Header.module.scss\";\n@use \"../../../../styles/common.scss\";\n@use \"./_typography.scss\";\n\n.headerActionBar {\n align-items: stretch;\n box-sizing: border-box;\n color: var(--header-color);\n display: flex;\n gap: calc(var(--header-margin) / 2);\n height: var(--action-bar-container-height);\n justify-content: space-between;\n margin: 0 auto;\n max-width: var(--header-max-width);\n padding-left: var(--header-margin);\n padding-right: var(--header-margin);\n position: relative;\n\n hr {\n border: 0;\n border-left: 1px solid var(--color-black-20);\n display: inline-block;\n height: 100%;\n margin: 0 5px;\n width: 0;\n }\n}\n\n.headerActionBarContainer {\n background-color: var(--actionbar-background-color);\n border-bottom: 1px solid var(--header-divider-color);\n width: 100%;\n}\n\n.headerActions {\n align-items: stretch;\n display: flex;\n flex-grow: 1;\n gap: var(--action-bar-item-gutter);\n justify-content: flex-end;\n}\n\n.titleAndLogoContainer {\n align-items: center;\n color: inherit;\n cursor: pointer;\n display: flex;\n flex: 0 0 auto;\n outline: none;\n position: relative;\n text-decoration: none;\n white-space: nowrap;\n\n &:focus-visible {\n border: none;\n outline: var(--header-focus-outline-width) solid var(--header-focus-outline-color);\n outline-offset: var(--header-focus-outline-width);\n }\n\n &:not([href]):not([tabindex='0']) {\n cursor: auto;\n }\n}\n\n.title {\n align-self: center;\n margin-top: -2px;\n padding: 1px;\n\n .normal > & {\n @include typography.title-normal;\n }\n\n .bold > & {\n @include typography.title-bold;\n }\n\n .black > & {\n @include typography.title-black;\n }\n}\n\n.logo {\n align-self: center;\n box-sizing: content-box;\n height: var(--logo-height);\n}\n","@use '../../../../styles/layout.scss';\n\n@mixin title-base {\n font-family: var(--font-default);\n}\n\n@mixin title-large-normal {\n font-size: var(--fontsize-heading-m);\n font-weight: 500;\n letter-spacing: -0.2px;\n line-height: var(--lineheight-s);\n}\n\n@mixin title-large-bold {\n font-size: var(--fontsize-heading-m);\n font-weight: 700;\n letter-spacing: -0.2px;\n line-height: var(--lineheight-s);\n}\n\n@mixin title-large-black {\n font-size: var(--fontsize-heading-l);\n font-weight: 900;\n letter-spacing: -0.2px;\n line-height: var(--lineheight-s);\n}\n\n@mixin title-medium-normal {\n font-size: var(--fontsize-heading-s);\n font-weight: 500;\n letter-spacing: -0.2px;\n line-height: var(--lineheight-s);\n}\n\n@mixin title-medium-bold {\n font-size: var(--fontsize-heading-s);\n font-weight: 700;\n letter-spacing: -0.2px;\n line-height: var(--lineheight-s);\n}\n\n@mixin title-medium-black {\n font-size: var(--fontsize-heading-m);\n font-weight: 900;\n letter-spacing: -0.2px;\n line-height: var(--lineheight-s);\n}\n\n@mixin title-small-normal {\n font-size: var(--fontsize-body-s);\n font-weight: 500;\n letter-spacing: -0.1px;\n line-height: var(--lineheight-s);\n}\n\n@mixin title-small-bold {\n font-size: var(--fontsize-body-s);\n font-weight: 700;\n letter-spacing: -0.1px;\n line-height: var(--lineheight-s);\n}\n\n@mixin title-small-black {\n font-size: var(--fontsize-heading-xxs);\n font-weight: 900;\n letter-spacing: -0.1px;\n line-height: var(--lineheight-s);\n}\n\n@mixin title-normal {\n @include title-base;\n @include title-large-normal;\n\n @include layout.below-large { @include title-medium-normal }\n\n @include layout.below-medium { @include title-small-normal }\n}\n\n@mixin title-bold {\n @include title-base;\n @include title-large-bold;\n\n @include layout.below-large { @include title-medium-bold }\n\n @include layout.below-medium { @include title-small-bold }\n}\n\n@mixin title-black {\n @include title-base;\n @include title-large-black;\n\n @include layout.below-large { @include title-medium-black }\n\n @include layout.below-medium { @include title-small-black }\n}\n","@use \"../../Header.module.scss\";\n@import '../../../../styles/common.scss';\n\n.languageSelector {\n display: flex;\n gap: var(--spacing-s);\n justify-content: space-between;\n}\n\n.languageSelectorDropdownIcon {\n align-items: center;\n margin-top: 1px;\n padding-top: 3px;\n\n &:focus-visible {\n outline-offset: 0;\n }\n}\n\n.languageSelectorDropdown {\n align-items: flex-start;\n background-color: var(--lang-selector-dropdown-background-color);\n display: flex;\n flex-flow: column nowrap;\n\n > * {\n align-items: center;\n display: flex;\n font-size: var(--fontsize-body-m);\n line-height: var(--lineheight-l);\n margin: 0;\n }\n\n > h3 {\n border-bottom: solid 1px var(--header-divider-color);\n\n &:not(:first-of-type) {\n border-top: solid 1px var(--header-divider-color);\n }\n }\n\n > a {\n color: var(--lang-selector-item-font-color);\n text-decoration: none;\n }\n\n > button {\n border: var(--header-focus-outline-width) solid transparent;\n }\n}\n\nbutton.item,\n[type='button'].item {\n appearance: none;\n background: transparent;\n color: var(--lang-selector-item-font-color);\n cursor: pointer;\n line-height: var(--lineheight-l);\n outline: 0;\n white-space: nowrap;\n\n &:focus-visible {\n border: var(--header-focus-outline-width) solid var(--header-focus-outline-color);\n }\n}\n\n.activeItem {\n font-weight: 700;\n\n span {\n border-bottom: 2px solid;\n }\n}\n\n.languageNodes {\n display: flex;\n gap: var(--spacing-s);\n\n button.item,\n [type='button'].item {\n align-self: center;\n border: none;\n padding: 0;\n\n &:focus-visible {\n border: none;\n outline: var(--header-focus-outline-width) solid var(--header-focus-outline-color);\n outline-offset: var(--header-focus-outline-width);\n }\n }\n}\n\n.simpleLanguageNodes {\n gap: var(--action-bar-item-gutter);\n}\n\n.fullWidthForMobile {\n background-color: var(--lang-selector-mobile-background-color);\n border-bottom: 1px solid var(--color-black-20);\n box-sizing: border-box;\n display: flex;\n height: var(--spacing-layout-m);\n padding: 0 var(--header-margin);\n width: 100%;\n}\n\n.fullWidthForMobile .languageSelectorDropdownIcon:focus-visible {\n outline-offset: 0;\n}\n","$animation-duration: 250ms;\n$animation-close-delay: 150ms;\n\n@layer actionBar {\n .dropdownWrapper {\n bottom: 0;\n overflow: hidden;\n position: absolute;\n right: 0;\n transform: translateY(100%) translateY(1px);\n transition-duration: 0ms;\n transition-property: max-height, padding-bottom;\n z-index: 20;\n }\n\n .container {\n display: flex;\n\n .dropdownWrapper {\n max-height: 0;\n min-width: 300px;\n padding-bottom: 0;\n transition-delay: $animation-duration + $animation-close-delay;\n }\n\n &.visible .dropdownWrapper {\n max-height: 1000vh;\n padding-bottom: 20px;\n transition-delay: 0ms;\n }\n\n &:not(.hasContent) {\n display: none;\n }\n\n &:not(.fullWidth) {\n display: flex;\n position: relative;\n }\n\n &.fullWidth > .dropdownWrapper {\n left: 0;\n }\n }\n\n .icon {\n display: block;\n }\n\n .dropdown {\n background: white;\n border: 1px solid var(--color-black-10);\n margin-top: -1px;\n position: relative;\n right: 0;\n transform: translateY(-100%);\n transition: $animation-duration transform $animation-close-delay,\n 0ms visibility ($animation-duration + $animation-close-delay);\n visibility: hidden;\n\n &.fullWidth {\n left: 0;\n }\n\n &.visible {\n transform: translateY(0%);\n transition: $animation-duration transform 0ms, 0ms visibility 0ms;\n visibility: visible;\n }\n\n > * {\n padding: var(--spacing-xs) var(--spacing-s);\n width: 100%;\n }\n }\n}\n","@use \"../../Header.module.scss\";\n@use \"../../../../styles/common.scss\";\n\nbutton.actionBarItem {\n align-self: center;\n appearance: none;\n background: transparent;\n border: none;\n color: var(--header-color);\n cursor: pointer;\n padding: 0;\n\n &:focus-visible {\n border: none;\n outline: var(--header-focus-outline-width) solid var(--header-focus-outline-color);\n outline-offset: var(--header-focus-outline-width);\n }\n}\n\n.actionBarItemIcon {\n display: block;\n height: var(--icon-size);\n margin: 0 auto;\n padding: 3px 0 0;\n width: var(--icon-size);\n\n & > svg {\n display: block;\n height: 100%;\n width: auto;\n }\n}\n\n.actionBarItemLabel {\n color: var(--action-bar-item-title-font-color);\n display: block;\n font-size: var(--action-bar-item-title-font-size);\n margin: 0 auto;\n white-space: nowrap;\n\n & > svg {\n display: block;\n }\n}\n\n.labelOnRight {\n display: inline-block;\n}\n\n.fixedRightPosition {\n display: block;\n}\n",".logoWrapper {\n align-items: center;\n display: flex;\n height: 100%;\n max-height: 100%;\n max-width: 100%;\n}\n","@import '../../../../styles/common.scss';\n\n.activeLinkWrapper {\n align-items: center;\n background-color: transparent;\n border: none;\n cursor: pointer;\n display: flex;\n width: 100%;\n}\n\n.previousLinkWrapper {\n align-items: center;\n background-color: transparent;\n border: none;\n cursor: pointer;\n display: flex;\n padding: 0;\n width: 100%;\n\n &:hover,\n &:focus-visible {\n .backIcon {\n transform: translateX(-3px);\n transition: transform 0.2s linear;\n }\n }\n\n &:not(:hover),\n &:focus-visible {\n .backIcon {\n transition: transform 0.2s linear;\n }\n }\n}\n\n.previousLinkWrapper:focus-visible,\n.activeLinkWrapper:focus-visible {\n border: none;\n outline: var(--header-focus-outline-width) solid var(--header-focus-outline-color);\n outline-offset: var(--header-focus-outline-width);\n}\n\n.headerNavigationMenu {\n background-color: var(--nav-mobile-menu-bottom-background-color);\n max-height: 0;\n overflow: hidden;\n position: absolute;\n transition: 0.3s max-height;\n width: 100%;\n}\n\n.menu {\n display: flex;\n flex-flow: column nowrap;\n height: min-content;\n list-style: none;\n margin: 0;\n margin-top: -1px;\n overscroll-behavior: contain;\n padding: 0;\n width: 100vw;\n\n .activeListItem {\n border-top: none;\n min-height: 72px;\n }\n\n .activeMobileLink.activeMobileLink {\n font-size: var(--fontsize-heading-m);\n margin: var(--spacing-m) var(--spacing-s);\n text-decoration: underline;\n\n &:hover {\n text-decoration: none;\n }\n\n &:focus-visible {\n border: none;\n outline: var(--header-focus-outline-width) solid var(--header-focus-outline-color);\n outline-offset: var(--header-focus-outline-width);\n }\n }\n\n .hideDropdownButton {\n display: none;\n }\n\n .previousListItem {\n align-items: center;\n display: flex;\n min-height: auto;\n padding: var(--spacing-m) calc(var(--header-focus-outline-width) * 2) 0;\n\n .previousButton {\n align-items: center;\n background-color: var(--nav-button-background-color);\n border: none;\n color: var(--nav-link-font-color);\n display: flex;\n height: 32px;\n justify-content: center;\n width: 32px;\n margin-left: var(--nav-mobile-margin-left);\n }\n }\n\n .previousMobileLink.previousMobileLink {\n color: var(--nav-link-font-color);\n font-size: var(--fontsize-body-m);\n font-weight: 500;\n margin-left: var(--spacing-xs);\n }\n}\n\n.mobileDropdownLink {\n position: relative;\n}\n\n.mobileLinkDropdown {\n display: block;\n left: 0;\n position: relative;\n right: 0;\n top: auto;\n width: 100%;\n}\n\n.mobileLinkDropdownButton.mobileLinkDropdownButton {\n background-color: transparent;\n margin: 0;\n padding: 20px;\n transform: rotate(-90deg);\n\n &:hover {\n background-color: transparent;\n }\n\n svg:hover {\n transform: translateY(4px);\n transition: transform 0.2s linear;\n }\n\n &:focus-visible {\n border: none;\n outline: var(--header-focus-outline-width) solid var(--header-focus-outline-color);\n outline-offset: calc(var(--header-focus-outline-width) - (var(--header-focus-outline-width) * 2));\n\n svg {\n transform: translateY(4px);\n transition: transform 0.2s linear;\n }\n }\n}\n\n.mobileLinkWrapper {\n box-sizing: border-box;\n\n .mobileLink.mobileLink {\n border-right: 1px solid var(--color-black-20);\n box-sizing: border-box;\n flex-grow: 1;\n margin: 0;\n margin-left: 0;\n padding: 17px 16px;\n position: relative;\n\n &:focus-visible {\n border: none;\n outline: var(--header-focus-outline-width) solid var(--header-focus-outline-color);\n outline-offset: -3px;\n }\n }\n}\n\n.mobileMenuOpen {\n display: flex;\n flex-direction: column;\n height: 100vh;\n max-height: 100vh;\n}\n\n.mobileNavigationLink {\n border-top: 1px solid var(--color-black-20);\n display: flex;\n min-height: var(--action-bar-dropdown-menu-primary-item-height);\n position: relative;\n width: 100%;\n}\n\n.navigation {\n background-color: var(--nav-mobile-menu-background-color);\n border-bottom: 1px solid var(--color-black-20);\n display: flex;\n}\n\n.navigationWrapper {\n display: flex;\n overflow: hidden;\n overscroll-behavior: contain;\n width: 300%;\n\n &.left0 {\n transform: translateX(0);\n transition: transform 0.3s ease;\n }\n\n &.left100 {\n transform: translateX(-100vw);\n transition: transform 0.3s ease;\n }\n\n &.left200 {\n transform: translateX(-200vw);\n transition: transform 0.3s ease;\n }\n}\n\n.universalList {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-xs) 0;\n list-style: none;\n margin: 0;\n padding: var(--spacing-l) 0 var(--spacing-m) 0;\n\n .universalLink.universalLink {\n font-size: var(--fontsize-body-m);\n }\n}\n\n.logoLink {\n height: calc(var(--logo-height) * 1.5) !important;\n justify-content: center;\n margin-bottom: var(--spacing-m);\n}\n\n.visible {\n visibility: visible;\n}\n\n.hidden {\n visibility: hidden;\n}\n",".headerNavigationMenu {\n background-color: var(--nav-background-color);\n box-sizing: border-box;\n display: flex;\n min-height: var(--spacing-layout-l);\n margin: 0 auto;\n max-width: var(--header-max-width);\n padding: 0 var(--header-margin);\n width: 100%;\n}\n\n.headerNavigationMenuContainer {\n border-bottom: 1px solid var(--header-divider-color);\n}\n\n.headerNavigationMenuList {\n display: flex;\n flex-wrap: wrap;\n column-gap: var(--spacing-l);\n list-style: none;\n margin: 0;\n padding: 0;\n width: 100%;\n}\n\n.headerNavigationMenuLinkContent {\n align-items: center;\n display: flex;\n height: 100%;\n}\n\n.headerNavigationMenuLinkContentActive {\n box-shadow: inset 0 -4px 0 0 var(--nav-link-hover-color);\n\n .headerNavigationMenuLink {\n font-weight: bold;\n }\n}\n\n.headerNavigationMenuLink.headerNavigationMenuLink {\n border: 0;\n color: var(--nav-link-font-color);\n font-size: var(--fontsize-body-l);\n margin: var(--spacing-s) 0;\n padding: 0;\n}\n","@import \"../../../../styles/common.scss\";\n\n.searchContainer {\n align-items: center;\n border-radius: 0;\n color: var(--nav-search-color);\n display: flex;\n position: relative;\n width: 100%;\n}\n",".hds-icon {\n --icon-size: 100%;\n\n background-color: currentcolor;\n display: inline-block;\n height: var(--icon-size);\n -webkit-mask-position: center;\n mask-position: center;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-size: auto;\n mask-size: auto;\n width: var(--icon-size);\n}\n\n.hds-icon.hds-icon--size-xs {\n --icon-size: var(--spacing-layout-2-xs);\n}\n\n.hds-icon.hds-icon--size-s {\n --icon-size: var(--spacing-layout-xs);\n}\n\n.hds-icon.hds-icon--size-m {\n --icon-size: var(--spacing-layout-s);\n}\n\n.hds-icon.hds-icon--size-l {\n --icon-size: var(--spacing-layout-m);\n}\n\n.hds-icon.hds-icon--size-xl {\n --icon-size: var(--spacing-layout-l);\n}\n\n.hds-icon--search {\n -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1C19.4183 1 23 4.58172 23 9C23 13.4183 19.4183 17 15 17C13.2001 17 11.539 16.4056 10.2023 15.4023L3.80101 21.8021L2.21002 20.2111L8.60822 13.8117C7.59861 12.4726 7.00002 10.8062 7.00002 9C7.00002 4.58172 10.5817 1 15 1ZM15 3C11.6863 3 9.00002 5.68629 9.00002 9C9.00002 12.3137 11.6863 15 15 15C18.3137 15 21 12.3137 21 9C21 5.68629 18.3137 3 15 3Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1C19.4183 1 23 4.58172 23 9C23 13.4183 19.4183 17 15 17C13.2001 17 11.539 16.4056 10.2023 15.4023L3.80101 21.8021L2.21002 20.2111L8.60822 13.8117C7.59861 12.4726 7.00002 10.8062 7.00002 9C7.00002 4.58172 10.5817 1 15 1ZM15 3C11.6863 3 9.00002 5.68629 9.00002 9C9.00002 12.3137 11.6863 15 15 15C18.3137 15 21 12.3137 21 9C21 5.68629 18.3137 3 15 3Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n}\n\n.hds-search-input {\n --border-width: 2px;\n --outline-width: 3px;\n --input-height: 56px;\n --helper-color-default: var(--color-black-60);\n --input-background-default: var(--color-white);\n --input-border-color-default: var(--color-black-50);\n --input-border-color-hover : var(--color-black-90);\n --input-border-color-focus: var(--color-black-90);\n --input-color-default: var(--color-black-90);\n --label-color-default: var(--color-black-90);\n}\n\n/* LABEL */\n\n.hds-search-input__label {\n color: var(--label-color-default);\n display: block;\n font-size: var(--fontsize-body-m);\n font-weight: 500;\n margin-bottom: var(--spacing-3-xs);\n}\n\n/* INPUT */\n\n.hds-search-input__input-wrapper {\n display: flex;\n height: 100%;\n position: relative;\n}\n\n.hds-search-input .hds-search-input__input {\n -webkit-appearance: none;\n background-color: var(--input-background-default);\n border: var(--border-width) solid var(--input-border-color-default);\n box-sizing: border-box;\n color: var(--input-color-default);\n font-size: 1.125em;\n height: var(--input-height);\n line-height: normal;\n padding: 0 var(--spacing-s);\n width: 100%;\n}\n\n.hds-search-input .hds-search-input__input:hover {\n border-color: var(--input-border-color-hover);\n transition: border-color 85ms ease-out;\n}\n\n.hds-search-input .hds-search-input__input:focus {\n border-color: var(--input-border-color-focus);\n outline: none;\n}\n\n/* FOCUS OUTLINE */\n\n.hds-search-input .hds-search-input__input:not([readonly]):focus {\n outline: var(--outline-width) solid var(--color-focus-outline);\n transform: translate3d(0, 0, 0);\n}\n\n/* BUTTON */\n\n.hds-search-input__buttons {\n align-items: center;\n bottom: 0;\n display: flex;\n font-size: 1rem;\n justify-content: center;\n margin-right: calc(var(--spacing-s) - var(--spacing-xs) / 2);\n position: absolute;\n right: 0;\n top: 0;\n}\n\n.hds-search-input__button {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background: none;\n border: none;\n color: inherit;\n color: var(--dropdown-color-default);\n cursor: pointer;\n display: flex;\n font: inherit;\n outline: none;\n padding: var(--spacing-xs) calc(var(--spacing-xs) / 2);\n}\n\n.hds-search-input__buttons .hds-search-input__button:focus {\n outline: var(--outline-width) solid var(--color-focus-outline);\n}\n\n/* HELPER TEXT */\n\n.hds-search-input__helper-text {\n color: var(--helper-color-default);\n display: block;\n font-size: var(--fontsize-body-m);\n margin-top: var(--spacing-3-xs);\n}\n","@import \"../../styles/common.scss\";\n@import \"../dropdown/dropdown.common.scss\";\n\n\n.root {\n @extend %dropdownRoot;\n\n --helper-color-default: var(--color-black-60);\n}\n\n/**\n * WRAPPER\n */\n .wrapper {\n @extend %dropdownWrapper;\n\n align-items: center;\n display: flex;\n}\n\n.buttons {\n composes: hds-search-input__buttons from 'hds-core/lib/components/search-input/search-input.css';\n}\n\n.button {\n color: var(--dropdown-color-default);\n composes: hds-search-input__button from 'hds-core/lib/components/search-input/search-input.css';\n\n &.hidden {\n @extend %visuallyHidden;\n }\n\n &:focus {\n outline: var(--focus-outline-width) solid var(--focus-outline-color);\n }\n}\n\n.searchIcon {\n color: var(--dropdown-color-default);\n display: flex;\n}\n\n.input {\n align-self: stretch;\n\n // Removes the input shadow on iOS\n appearance: none;\n background-color: var(--input-background-default);\n border: none;\n box-sizing: border-box;\n color: var(--input-color-default);\n font-size: var(--fontsize-body-l);\n height: var(--menu-item-height);\n\n // The focus is given to the wrapping element instead of this input\n // so we can hide the outline.\n outline: none;\n padding: 0 calc(var(--spacing-l) + var(--icon-size)) 0 0;\n width: 100%;\n\n // add left padding when there is no icon\n &:first-child {\n padding-left: var(--spacing-s);\n }\n\n &:not(:focus).hidden {\n @extend %visuallyHidden;\n }\n\n // don't add additional right padding if toggle button is hidden\n &.noToggle {\n padding-right: var(--spacing-s);\n }\n\n &::placeholder {\n color: var(--placeholder-color);\n line-height: normal;\n }\n\n &:disabled::placeholder {\n color: var(--dropdown-color-disabled);\n }\n}\n\n/**\n * MENU\n */\n.menu {\n @extend %dropdownMenu;\n}\n\n/**\n * MENU ITEM\n */\n.menuItem {\n @extend %dropdownMenuItem;\n\n .highlighted {\n font-weight: bold;\n\n mark {\n background: none;\n color: inherit;\n font-weight: normal;\n }\n }\n}\n\n.helperText {\n color: var(--helper-color-default);\n display: block;\n font-size: var(--fontsize-body-m);\n margin-top: var(--spacing-3-xs);\n}\n\n.loadingSpinnerContainer {\n @extend %dropdownMenu;\n\n align-items: center;\n background-color: var(--menu-item-background-default);\n display: flex;\n flex-direction: column;\n padding: var(--spacing-m) 0;\n text-align: center;\n}\n\n.loadingSpinner {\n margin-bottom: var(--spacing-2-xs);\n}\n","@use \"../../styles/layout.scss\";\n@import \"../../styles/common.scss\";\n\n.skipLink {\n --background-color: var(--color-white);\n --height: 66px;\n --inner-outer-spacing: 6px;\n --outline-color: var(--color-focus-outline);\n --outline-inner-color: var(--color-black-90);\n --outline-width: 3px;\n --text-color: var(--color-black-90);\n --top: 10px;\n --left: 15px;\n --width: 213px;\n\n @include layout.below-large {\n --top: 2px;\n }\n \n @include layout.below-medium {\n --height: 60px;\n }\n\n display: flex;\n height: 1px;\n position: absolute;\n top: calc(-1 * (var(--height) + var(--top)));\n width: 1px;\n\n &:not(:focus) {\n @extend %visuallyHidden;\n }\n \n &:focus-visible {\n outline-offset: 0;\n }\n\n &:focus {\n align-items: center;\n background-color: var(--background-color);\n font-family: var(--font-default);\n font-weight: 500;\n height: var(--height);\n justify-content: center;\n left: var(--left);\n outline: var(--outline-color) solid var(--outline-width);\n text-decoration: none;\n top: var(--top);\n transition: all 0.15s ease-in;\n width: var(--width);\n z-index: 99; \n \n & > .skipLinkLabel {\n align-items: center;\n color: var(--text-color);\n display: flex;\n height: calc(var(--height) - 2 * var(--inner-outer-spacing));\n justify-content: center;\n outline: var(--outline-inner-color) solid var(--outline-width);\n width: calc(var(--width) - 2 * var(--inner-outer-spacing)); \n }\n }\n\n}\n",".logo {\n height: 100%;\n max-height: 100%;\n max-width: 100%;\n}\n\n.small {\n height: var(--spacing-l)\n}\n\n.medium {\n height: var(--spacing-xl)\n}\n\n.large {\n height: var(--spacing-2-xl)\n}\n",".hds-checkbox {\n --size: 24px;\n\n /* icon size relative to the checkbox size (--size) */\n --icon-scale: 1;\n --border-width: 2px;\n --outline-width: 3px;\n --label-font-size: var(--fontsize-body-m);\n --label-padding: var(--spacing-2-xs);\n --background-unselected: transparent;\n --background-selected: var(--color-bus);\n --background-hover: var(--color-bus-dark);\n --background-disabled: var(--color-black-10);\n --border-color-selected: var(--color-bus);\n --border-color-selected-hover: var(--color-bus-dark);\n --border-color-selected-focus: var(--color-bus);\n --border-color-unselected: var(--color-black-50);\n --border-color-unselected-hover: var(--color-black-90);\n --border-color-unselected-focus: var(--color-black-90);\n --border-color-disabled: var(--color-black-10);\n --icon-color-unselected: transparent;\n --icon-color-selected: var(--color-white);\n --icon-color-disabled: var(--color-white);\n --label-color: var(--color-black-90);\n --label-color-disabled: var(--color-black-40);\n --icon-size: var(--spacing-m);\n\n display: flex;\n flex-wrap: wrap;\n min-height: var(--size);\n position: relative;\n}\n\n.hds-checkbox,\n.hds-checkbox *,\n.hds-checkbox *:before,\n.hds-checkbox *:after {\n box-sizing: border-box;\n}\n\n.hds-checkbox:not(:first-of-type) {\n margin-top: var(--spacing-2-xs);\n}\n\n.hds-checkbox .hds-checkbox__input:before,\n.hds-checkbox .hds-checkbox__label:before,\n.hds-checkbox .hds-checkbox__label:after {\n content: \"\";\n left: 0;\n position: absolute;\n top: 0;\n}\n\n/* checkbox icon */\n\n.hds-checkbox .hds-checkbox__input:before {\n background-color: var(--icon-color-unselected);\n height: var(--size);\n -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpolygon fill='currentColor' points='21 7 10 18 4.5 12.5 6 11 10 15 19.5 5.5'/%3E %3C/g%3E %3C/svg%3E\");\n mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpolygon fill='currentColor' points='21 7 10 18 4.5 12.5 6 11 10 15 19.5 5.5'/%3E %3C/g%3E %3C/svg%3E\");\n -webkit-mask-position: center;\n mask-position: center;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-size: calc(var(--size) * var(--icon-scale));\n mask-size: calc(var(--size) * var(--icon-scale));\n transform: scale(0.6);\n width: var(--size);\n z-index: 1;\n}\n\n/* focus outline */\n\n.hds-checkbox .hds-checkbox__label:before {\n height: var(--size);\n width: var(--size);\n}\n\n/* background */\n\n.hds-checkbox .hds-checkbox__label:after {\n background-color: var(--background-unselected);\n border: var(--border-width) solid var(--border-color-unselected);\n height: var(--size);\n width: var(--size);\n}\n\n/* checkbox transitions */\n\n.hds-checkbox .hds-checkbox__input:hover:before,\n.hds-checkbox .hds-checkbox__input:focus:before,\n.hds-checkbox .hds-checkbox__input:hover + .hds-checkbox__label:after,\n.hds-checkbox .hds-checkbox__input:focus + .hds-checkbox__label:after {\n transition: 85ms ease-out;\n transition-property: background-color, border-color, transform;\n}\n\n.hds-checkbox .hds-checkbox__input:focus + .hds-checkbox__label:before {\n box-shadow: 0 0 0 var(--outline-width) var(--color-focus-outline);\n transform: translate3d(0, 0, 0);\n transition: 85ms ease-out;\n transition-property: box-shadow, transform;\n}\n\n.hds-checkbox .hds-checkbox__input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n cursor: pointer;\n\n /*\n * Normalize.css rules\n * 1. Change the font styles in all browsers.\n */\n font-family: inherit; /* 1 */\n font-size: 100%; /* 1 */\n height: var(--size);\n left: 0;\n\n /*\n * Normalize.css rules\n * 1. Change the font styles in all browsers.\n * 2. Remove the margin in Firefox and Safari.\n */\n line-height: 1.15; /* 1 */\n margin: 0; /* 2 */\n outline: none;\n position: absolute;\n top: 0;\n width: var(--size);\n}\n\n/* LABEL */\n\n.hds-checkbox .hds-checkbox__label {\n color: var(--label-color);\n cursor: pointer;\n font-size: var(--label-font-size);\n line-height: var(--lineheight-m);\n padding-left: calc(var(--size) + var(--label-padding));\n padding-top: calc((var(--size) - (var(--label-font-size) * var(--lineheight-m))) / 2);\n position: relative;\n}\n\n/* ERROR */\n\n.hds-checkbox__error-text {\n color: var(--color-error);\n display: block;\n flex-basis: 100%;\n font-size: var(--fontsize-body-m);\n margin-top: var(--spacing-2-xs);\n padding-left: calc(var(--icon-size) + var(--spacing-2-xs));\n position: relative;\n}\n\n.hds-checkbox__error-text:before {\n background: var(--color-error);\n content: '';\n height: var(--icon-size);\n left: 0;\n -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 Z M13,16 L13,18 L11,18 L11,16 L13,16 Z M13,6 L13,14 L11,14 L11,6 L13,6 Z'/%3E %3C/g%3E %3C/svg%3E\");\n mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 Z M13,16 L13,18 L11,18 L11,16 L13,16 Z M13,6 L13,14 L11,14 L11,6 L13,6 Z'/%3E %3C/g%3E %3C/svg%3E\");\n pointer-events: none;\n position: absolute;\n top: 0;\n width: var(--icon-size);\n}\n\n/* CUSTOM CHECKBOX */\n\n/* checkbox icon - selected */\n\n.hds-checkbox .hds-checkbox__input:checked:before {\n background-color: var(--icon-color-selected);\n transform: scale(1);\n}\n\n/* checkbox icon - indeterminated */\n\n.hds-checkbox .hds-checkbox__input:not(:checked):indeterminate:before {\n background-color: var(--icon-color-selected);\n -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M6 11h12v2H6z'/%3E%3C/g%3E%3C/svg%3E\");\n mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M6 11h12v2H6z'/%3E%3C/g%3E%3C/svg%3E\");\n transform: scale(1);\n}\n\n/* background - selected or indeterminated */\n\n.hds-checkbox .hds-checkbox__input:checked + .hds-checkbox__label:after,\n.hds-checkbox .hds-checkbox__input:indeterminate + .hds-checkbox__label:after {\n background-color: var(--background-selected);\n border-color: var(--border-color-selected);\n}\n\n/* background */\n\n.hds-checkbox .hds-checkbox__input:disabled + .hds-checkbox__label:after {\n background-color: var(--background-disabled);\n border-color: var(--border-color-disabled);\n}\n\n/* background - unselected - focus */\n\n.hds-checkbox .hds-checkbox__input:not(:disabled):focus + .hds-checkbox__label:after {\n border-color: var(--border-color-unselected-focus);\n}\n\n/* background - unselected - hover */\n\n.hds-checkbox .hds-checkbox__input:not(:disabled):hover + .hds-checkbox__label:after,\n.hds-checkbox .hds-checkbox__input:not(:disabled):hover:focus + .hds-checkbox__label:after {\n border-color: var(--border-color-unselected-hover);\n}\n\n/* background - selected - focus */\n\n.hds-checkbox .hds-checkbox__input:not(:disabled):checked:focus + .hds-checkbox__label:after,\n.hds-checkbox .hds-checkbox__input:not(:disabled):indeterminate:focus + .hds-checkbox__label:after {\n border-color: var(--border-color-selected-focus);\n}\n\n/* background - selected - hover */\n\n.hds-checkbox .hds-checkbox__input:not(:disabled):checked:hover + .hds-checkbox__label:after,\n.hds-checkbox .hds-checkbox__input:not(:disabled):indeterminate:hover + .hds-checkbox__label:after,\n.hds-checkbox .hds-checkbox__input:not(:disabled):checked:hover:focus + .hds-checkbox__label:after,\n.hds-checkbox .hds-checkbox__input:not(:disabled):indeterminate:hover:focus + .hds-checkbox__label:after {\n background-color: var(--background-hover);\n border-color: var(--border-color-selected-hover);\n}\n\n/* DISABLED */\n\n/* label */\n\n.hds-checkbox .hds-checkbox__input:disabled + .hds-checkbox__label {\n color: var(--label-color-disabled);\n}\n\n/* checkbox icon - disabled */\n\n.hds-checkbox .hds-checkbox__input:checked:disabled:before {\n background-color: var(--icon-color-disabled);\n}\n\n.hds-checkbox .hds-checkbox__input:disabled,\n.hds-checkbox .hds-checkbox__input:disabled + .hds-checkbox__label {\n cursor: not-allowed;\n}\n",".checkbox {\n composes: hds-checkbox from 'hds-core/lib/components/checkbox/checkbox.css';\n}\n\n.input {\n composes: hds-checkbox__input from 'hds-core/lib/components/checkbox/checkbox.css';\n}\n\n.label {\n composes: hds-checkbox__label from 'hds-core/lib/components/checkbox/checkbox.css';\n}\n\n.errorText {\n composes: hds-checkbox__error-text from 'hds-core/lib/components/checkbox/checkbox.css';\n}\n\n.helperText {\n composes: helper-text from 'hds-core/lib/utils/helpers.css';\n}\n\n.tooltipButton {\n display: inline-block;\n margin-left: var(--spacing-2-xs);\n}\n",".hds-fieldset {\n --border-style: 0 none;\n --padding-top: 4px;\n --padding-sides: 0;\n --padding-bottom: var(--spacing-s);\n\n border: var(--border-style);\n box-sizing: border-box;\n padding: var(--padding-top) var(--padding-sides) var(--padding-bottom);\n}\n\n.hds-fieldset-legend {\n font-weight: bold;\n\n /* Normalize.css rule\n * Remove the padding so developers are not caught out when they zero out\n * `fieldset` elements in all browsers.\n */\n padding: 0;\n}\n\n.hds-fieldset--border {\n --border-style: 2px inset var(--color-black-90);\n --padding-top: 2px;\n --padding-sides: 12px;\n}\n\n.hds-fieldset--border > .hds-fieldset-legend {\n margin-left: calc(var(--padding-sides) / -2);\n padding: 0 6px;\n}\n",".fieldset {\n composes: hds-fieldset from 'hds-core/lib/components/fieldset/fieldset.css';\n}\n\n.border {\n composes: hds-fieldset--border from 'hds-core/lib/components/fieldset/fieldset.css';\n}\n\n.legend {\n composes: hds-fieldset-legend from 'hds-core/lib/components/fieldset/fieldset.css';\n}\n\n.helperText {\n composes: helper-text from 'hds-core/lib/utils/helpers.css';\n}\n\n.legendWithTooltip {\n align-items: center;\n composes: hds-fieldset-legend from 'hds-core/lib/components/fieldset/fieldset.css';\n display: flex;\n grid-column-gap: var(--spacing-2-xs);\n justify-content: flex-start;\n}\n\n.tooltipButton {\n align-items: center;\n display: flex;\n}\n",".hds-container {\n box-sizing: border-box;\n padding-left: var(--spacing-layout-2-xs);\n padding-right: var(--spacing-layout-2-xs);\n}\n\n@media(min-width: 768px) {\n .hds-container {\n padding-left: var(--spacing-layout-xs);\n padding-right: var(--spacing-layout-xs);\n }\n}\n\n@media (min-width: 1248px) {\n .hds-container {\n max-width: var(--container-width-xl);\n padding-left: 0;\n padding-right: 0;\n }\n}\n",".container {\n composes: hds-container from 'hds-core/lib/components/container/container.css';\n}\n","@import '../../styles/common.scss';\n\n.container {\n bottom: 0;\n left: 0;\n position: fixed;\n width: 100vw;\n z-index: 999;\n\n --common-spacing: var(--spacing-s);\n --focus-outline-color: var(--color-coat-of-arms);\n --outline-width: 3px;\n}\n\n.aligner {\n background: var(--color-white);\n border-top: 8px solid var(--color-bus);\n bottom: 0;\n max-height: 80vh;\n overflow-y: auto;\n position: absolute;\n width: 100%;\n z-index: 2;\n}\n\n.container .aligner {\n transform: translateY(100%);\n transition: transform 1s;\n}\n\n.container.animateIn .aligner {\n transform: translateY(0%);\n}\n\n.page {\n --common-spacing: var(--spacing-s);\n}\n\n.buttons {\n display: flex;\n flex-direction: column;\n width: 100%;\n\n & > :first-child {\n margin-right: var(--common-spacing);\n }\n}\n\n.buttons > * {\n margin: 0 0 var(--common-spacing) 0;\n width: 100%;\n}\n\n.emulatedH1 {\n composes: heading-l from 'hds-core/lib/utils/helpers.css';\n display: block;\n outline: none;\n padding: 0;\n\n &:focus {\n box-shadow: 0 0 0 var(--outline-width) var(--focus-outline-color);\n transform: translate3d(0, 0, 0);\n }\n}\n\n.emulatedH2 {\n composes: heading-m from 'hds-core/lib/utils/helpers.css';\n display: block;\n padding: 1.2em 0 0.5em;\n}\n\n.content {\n box-sizing: border-box;\n margin: 0 auto;\n padding-left: var(--spacing-layout-2-xs);\n padding-right: var(--spacing-layout-2-xs);\n padding-top: var(--common-spacing);\n position: relative;\n width: 100%;\n\n p,\n .emulatedH1,\n .emulatedH2 {\n max-width: 860px;\n }\n\n @media (min-width: 768px) {\n padding-left: var(--spacing-layout-xs);\n padding-right: var(--spacing-layout-xs);\n }\n\n @media (min-width: 1248px) {\n max-width: var(--container-width-xl);\n padding-left: 0;\n padding-right: 0;\n }\n}\n\n.page .content {\n padding-bottom: 0;\n padding-top: 0;\n}\n\n.languageSwitcher {\n left: calc(var(--common-spacing) - var(--spacing-3-xs));\n position: absolute;\n top: var(--common-spacing);\n}\n\n.languageDropdown {\n position: relative;\n right: unset;\n\n button {\n padding-top: 0;\n }\n\n &#{&} {\n --menu-button-focus-outline-color: var(--color-coat-of-arms);\n\n > div {\n left: 0;\n right: unset;\n }\n }\n}\n\n@media (max-width: 768px) {\n .languageDropdown {\n position: absolute;\n }\n}\n\n.mainContent,\n.textContent {\n padding: 0;\n}\n\n.textContent > p {\n padding-bottom: var(--spacing-l);\n}\n\n.mainContent {\n padding-top: calc(var(--common-spacing) * 2);\n}\n\n.emulatedH2 + p {\n margin: 0;\n}\n\n.list {\n list-style: none;\n margin: 0;\n padding-left: 0;\n}\n\n.accordionButton {\n @extend %normalizedInput;\n\n align-items: center;\n background: transparent;\n border: none;\n color: var(--color-bus);\n color: var(--color-black-90);\n cursor: pointer;\n display: flex;\n outline: none;\n text-decoration: underline;\n text-decoration: none;\n\n &:focus {\n box-shadow: 0 0 0 var(--outline-width) var(--focus-outline-color);\n transform: translate3d(0, 0, 0);\n }\n}\n\n.detailsAccordionButton {\n margin-left: 3px;\n padding: var(--spacing-xs);\n padding-left: 0;\n}\n\n.detailsAccordionButton span {\n padding-left: var(--spacing-3-xs);\n}\n\n.accordionButtonSettingsClosed {\n margin-bottom: var(--common-spacing);\n}\n\n.consentCategory {\n display: flex;\n flex-direction: column;\n padding-bottom: var(--spacing-l);\n\n > p {\n margin-bottom: 0;\n }\n}\n\n.consentGroup {\n border-bottom: 1px solid var(--color-black);\n display: flex;\n flex-direction: column;\n margin-left: 0;\n padding: var(--spacing-m) 0;\n position: relative;\n}\n\n.consentGroupContent {\n display: flex;\n flex-direction: column;\n padding: 0;\n\n p {\n margin: 0;\n padding: var(--spacing-m) 0 0;\n }\n\n button {\n outline: none;\n padding: var(--spacing-3-xs);\n position: absolute;\n right: 0;\n top: var(--spacing-m);\n\n &:focus {\n box-shadow: 0 0 0 var(--outline-width) var(--focus-outline-color);\n transform: translate3d(0, 0, 0);\n }\n }\n}\n\n.titleWithCheckbox {\n display: flex;\n margin-right: var(--spacing-2-xl);\n}\n\n.page .content .consentCategory .titleWithCheckbox label,\n.container .content .consentCategory .titleWithCheckbox label {\n color: var(--color-black);\n font-weight: 500;\n}\n\n.dataTableContainer {\n border-left: 1px solid var(--color-black);\n border-right: 1px solid var(--color-black);\n margin: var(--spacing-l) 0 var(--spacing-xs);\n}\n\n.dataTableContainer table tbody tr > * {\n min-width: 120px;\n vertical-align: top;\n width: 20%;\n word-break: break-word;\n}\n\n.dataTableContainer table tbody tr > *:nth-child(3) {\n width: 40%;\n}\n\n.saveNotification {\n margin-bottom: var(--spacing-xl);\n}\n\n.readMoreButton {\n display: none;\n}\n\n.shrinkOnBlur:not(:focus-within) {\n --common-spacing: var(--spacing-xs);\n\n outline: none;\n padding-bottom: var(--common-spacing);\n padding-top: var(--common-spacing);\n\n .visuallyHiddenWithoutFocus {\n clip-path: inset(0 0 0 0);\n display: block;\n height: 1px;\n left: -1000px;\n line-height: 0;\n opacity: 0;\n overflow: hidden;\n position: absolute;\n width: 1px;\n }\n\n .hiddenWithoutFocus {\n display: none;\n }\n\n .mainContent {\n align-items: flex-start;\n display: flex;\n flex-direction: column;\n padding-top: 0;\n\n .emulatedH1 {\n font-size: var(--fontsize-heading-xs);\n margin-right: 0;\n }\n\n .readMoreButton {\n display: flex;\n padding: var(--common-spacing) 0 0;\n\n span {\n padding-right: var(--spacing-xs);\n }\n }\n }\n\n @media (min-width: 768px) {\n --common-spacing: var(--spacing-l);\n\n .mainContent {\n align-items: center;\n flex-direction: row;\n justify-content: space-between;\n\n .emulatedH1 {\n font-size: var(--fontsize-heading-s);\n }\n\n .readMoreButton {\n line-height: var(--fontsize-heading-s);\n padding: 0 var(--spacing-xs);\n }\n }\n }\n}\n\n@media (min-width: 768px) {\n .container,\n .page {\n --common-spacing: var(--spacing-l);\n }\n\n .languageSwitcher {\n left: unset;\n padding-top: 15px;\n right: var(--common-spacing);\n top: calc(var(--common-spacing) + 4px);\n }\n\n .mainContent {\n padding-top: 0;\n }\n\n .textContent > p {\n padding-bottom: var(--spacing-2-xl);\n }\n\n .content .emulatedH1 {\n margin-right: 200px;\n }\n\n .consentCategory {\n padding-bottom: var(--spacing-2-xl);\n }\n\n .consentGroup {\n margin-left: var(--spacing-s);\n padding: var(--spacing-l) 0;\n }\n\n .consentGroupContent {\n p {\n padding: var(--spacing-l) 0 0;\n }\n }\n\n .buttons {\n flex-direction: row;\n }\n\n .buttons > * {\n width: auto;\n }\n}\n","@import \"../../styles/common.scss\";\n@value x-large-up from \"../../styles/breakpoints.scss\";\n\n.menuButton {\n --menu-border-width: 1px;\n --menu-max-width: 20rem;\n --menu-top-margin: 0;\n --menu-item-min-height: var(--spacing-xl);\n --menu-button-focus-outline-color: var(--color-coat-of-arms);\n --menu-border-color: var(--color-black-90);\n --menu-item-background-color: var(--color-white);\n --menu-item-background-color-highlighted: var(--color-bus);\n --menu-item-color: var(--color-black-90);\n --menu-item-color-highlighted: var(--color-white);\n\n border-radius: 0;\n position: relative;\n\n &:focus-within {\n box-shadow: 0 0 0 3px var(--menu-button-focus-outline-color);\n }\n}\n\n.toggleButton {\n @extend %buttonReset;\n\n align-items: center;\n display: flex;\n line-height: var(--lineheight-s);\n outline: none;\n padding: var(--spacing-3-xs) 0;\n\n > * {\n pointer-events: none;\n }\n}\n\n.toggleButtonLabel {\n margin: 0 var(--spacing-3-xs);\n}\n\n@media x-large-up {\n .toggleButtonLabel {\n margin: 0 var(--spacing-2-xs);\n }\n}\n",".menu {\n &:not(.open) {\n display: none;\n }\n\n &.open {\n background-color: var(--menu-item-background-color);\n border: var(--menu-border-width) solid var(--menu-border-color);\n left: 0;\n margin: var(--menu-top-margin) 0 0;\n max-width: var(--menu-max-width);\n padding: var(--spacing-3-xs) 0;\n position: absolute;\n width: max-content;\n }\n}\n\n.item {\n align-items: center;\n box-sizing: border-box;\n color: var(--menu-item-color);\n display: flex;\n flex: 1;\n line-height: var(--lineheight-m);\n min-height: var(--menu-item-min-height);\n outline: none;\n padding: var(--spacing-2-xs) var(--spacing-s);\n text-decoration: none;\n\n &:hover,\n &:focus {\n background-color: var(--menu-item-background-color-highlighted);\n color: var(--menu-item-color-highlighted);\n }\n}\n","@import '../../../../styles/common.scss';\n@import '../../../button/button.common.scss';\n@value x-small-down, small-down, small-only, medium-only, medium-up, large-only, large-up, x-large-only, x-large-up from \"../../../../styles/breakpoints.scss\";\n\n%item {\n @extend %button;\n @extend %size-small;\n @extend %fullWidth;\n\n text-decoration: none;\n}\n\n.item {\n @extend %item;\n\n &:focus {\n transition: none;\n }\n}\n\n.primary {\n @extend %item;\n @extend %primary;\n}\n\n.secondary {\n @extend %item;\n @extend %secondary;\n}\n\n.supplementary {\n @extend %item;\n @extend %supplementary;\n\n --border-width: 3px;\n}\n\n.primary:focus,\n.secondary:focus,\n.supplementary:focus {\n transition: none;\n}\n\n.icon {\n @extend %icon;\n\n &#{&} {\n display: flex;\n height: unset;\n width: unset;\n }\n}\n\n.label {\n @extend %label;\n\n padding: 0;\n}\n\n.rowItem,\n.dropdownItem,\n.dropdownLinkItem {\n align-items: center;\n box-sizing: border-box;\n color: inherit;\n display: flex;\n font-weight: 500;\n outline: none;\n text-decoration: none;\n}\n\n.rowItem {\n @extend %buttonReset;\n\n .icon {\n margin: 0 var(--spacing-2-xs) 0 calc(var(--spacing-3-xs) * -1);\n }\n\n .label {\n line-height: var(--lineheight-s);\n margin: 0;\n }\n}\n\n@media small-down {\n .rowItem {\n height: var(--spacing-xl);\n padding: var(--spacing-2-xs);\n\n &:focus {\n box-shadow: 0 0 0 3px var(--color-coat-of-arms);\n }\n\n &:not(:first-child) {\n margin-top: var(--spacing-2-xs);\n }\n }\n\n .dropdownItem,\n .dropdownLinkItem {\n &:not(:first-child) {\n margin-top: var(--spacing-2-xs);\n }\n }\n\n .icon.icon {\n align-self: center;\n }\n}\n\n@media medium-up {\n .rowItem {\n padding: var(--spacing-3-xs);\n position: relative;\n }\n\n // focus outline\n .rowItem:focus:before,\n .dropdownItem:focus-within:before,\n .dropdownLinkItem a:focus-within:before,\n .dropdownLinkItem button:focus-within:before {\n border-radius: 0;\n box-shadow: 0 0 0 3px var(--color-coat-of-arms);\n content: '';\n height: calc(100% - 3px * 2);\n left: 0;\n pointer-events: none;\n position: absolute;\n top: 0;\n transform: translateY(calc(3px));\n width: 100%;\n z-index: 1;\n }\n\n .dropdownLinkItem a,\n .dropdownLinkItem button {\n position: relative;\n }\n\n // focus outline - active\n .rowItem:active:before,\n .rowItem.active:before,\n .dropdownItem.active:before,\n .dropdownLinkItem.active:before {\n height: calc(100% - 3px);\n }\n\n // active + hover styles\n .rowItem:active:after,\n .rowItem:hover:not(:focus):after,\n .rowItem.active:after,\n .dropdownItem:hover:not(:focus-within):after,\n .dropdownItem.active:after,\n .dropdownLinkItem:hover:not(:focus-within):after,\n .dropdownLinkItem.active:after {\n background-color: var(--color-black-90);\n bottom: 0;\n content: '';\n height: var(--spacing-3-xs);\n left: 0;\n pointer-events: none;\n position: absolute;\n width: 100%;\n }\n\n .dropdownItem:not(.icon) {\n width: max-content;\n }\n}\n",".hds-table-container {\n overflow-x: auto;\n}\n\n.hds-table-container:focus {\n outline: var(--color-focus-outline) 3px solid;\n}\n\n.hds-table {\n --content-background-color: var(--color-white);\n\n border-collapse: collapse;\n line-height: 1.5;\n width: 100%;\n}\n\n.hds-table th {\n border-bottom: 1px solid var(--color-black-20);\n font-size: var(--fontsize-body-m);\n font-weight: 500;\n line-height: var(--lineheight-l);\n padding: var(--spacing-xs) var(--spacing-m);\n text-align: left;\n white-space: nowrap;\n}\n\n.hds-table__content--text-align-td-right td {\n text-align: right;\n}\n\n.hds-table__content tr td {\n background-color: var(--content-background-color);\n border-bottom: 1px solid var(--color-black-50);\n color: var(--color-black-90);\n font-size: var(--fontsize-body-m);\n font-weight: 400;\n line-height: 24px;\n padding: var(--spacing-xs) var(--spacing-m);\n}\n\n.hds-table__header-row {\n background-color: var(--header-background-color);\n}\n\n.hds-table__caption {\n font-size: var(--fontsize-body-l);\n font-weight: normal;\n line-height: var(--lineheight-l);\n margin-bottom: var(--spacing-s);\n text-align: left;\n}\n\n/* DARK VARIANT */\n\n.hds-table--dark {\n --header-background-color: var(--color-bus);\n}\n\n.hds-table.hds-table--dark th {\n color: var(--color-white);\n}\n\n/* LIGHT VARIANT */\n\n.hds-table--light {\n --header-background-color: var(--color-silver);\n}\n\n.hds-table.hds-table--light th {\n color: var(--color-black-90);\n}\n\n.hds-table--with-vertical-lines .hds-table__content td {\n border-right: 1px solid var(--color-black-50);\n}\n\n/* DENSE VARIANT */\n\n.hds-table--dense.hds-table th {\n font-size: var(--fontsize-body-s);\n font-weight: bold;\n padding: 9px var(--spacing-s);\n}\n\n.hds-table--dense .hds-table__content tr td {\n font-size: var(--fontsize-body-s);\n padding: 9px var(--spacing-s);\n}\n\n.hds-table--dense .hds-table__caption {\n font-size: var(--fontsize-body-m);\n line-height: var(--lineheight-l);\n margin-bottom: var(--spacing-xs);\n}\n\n/* ZEBRA VARIANT */\n\n.hds-table--zebra .hds-table__content tr td {\n border-bottom: none;\n}\n\n.hds-table--zebra .hds-table__content tr:nth-child(even) td {\n background-color: var(--color-black-10);\n}\n\n/* VERTICAL LINES VARIANT */\n\n.hds-table--with-vertical-lines .hds-table__content {\n border-left: 1px solid var(--color-black-50);\n}\n\n.hds-table--with-vertical-lines .hds-table__header-row {\n border-left: 1px solid var(--header-background-color);\n border-right: 1px solid var(--header-background-color);\n}\n\n/* VERTICAL HEADER VARIANT */\n\n.hds-table__vertical-header-column {\n background-color: var(--header-background-color);\n}\n\n.hds-table--with-vertical-header.hds-table--with-vertical-lines .hds-table__content {\n border-left: none;\n}\n\n.hds-table--with-vertical-lines.hds-table--with-vertical-header .hds-table__header-row {\n border-left: none;\n}\n\n/* MOBILE STYLES */\n\n@media (max-width: 767px) {\n .hds-table th {\n font-size: var(--fontsize-body-s);\n font-weight: bold;\n padding: 9px var(--spacing-s);\n }\n\n .hds-table__content tr td {\n font-size: var(--fontsize-body-s);\n padding: 9px var(--spacing-s);\n }\n\n .hds-table__caption {\n font-size: var(--fontsize-heading-xxs);\n line-height: var(--lineheight-l);\n margin-bottom: var(--spacing-xs);\n }\n}\n\n/* UTILITY */\n\n.hds-table--text-align-right {\n text-align: right;\n}","@import \"../../styles/common.scss\";\n@value x-small-down, small-down from \"../../styles/breakpoints.scss\";\n\n.table {\n --content-background-color: var(--color-white);\n\n composes: hds-table from 'hds-core/lib/components/table/table.css';\n\n &.dark th {\n color: var(--color-white);\n }\n\n &.light th {\n color: var(--color-black-90);\n }\n\n .checkbox {\n label {\n padding-left: 0;\n }\n }\n}\n\n.caption {\n composes: hds-table__caption from 'hds-core/lib/components/table/table.css';\n}\n\n.container {\n composes: hds-table-container from 'hds-core/lib/components/table/table.css';\n height: inherit;\n}\n\n.headerRow {\n composes: hds-table__header-row from 'hds-core/lib/components/table/table.css';\n}\n\n.content {\n composes: hds-table__content from 'hds-core/lib/components/table/table.css';\n}\n\n.sortButton {\n @extend %normalizedInput;\n\n align-items: center;\n appearance: none;\n background: transparent;\n border: 0;\n cursor: pointer;\n display: flex;\n font-weight: 500;\n height: 100%;\n justify-content: center;\n overflow: hidden;\n padding: 0;\n\n .sortIcon {\n margin-left: 10px;\n }\n\n &:focus {\n outline: 3px solid var(--color-white);\n }\n\n .dark & {\n color: var(--color-white);\n }\n\n .light & {\n color: var(--color-black-90);\n }\n\n .dense & {\n font-size: var(--fontsize-body-s);\n font-weight: bold;\n }\n\n .dark &:focus {\n outline: 3px solid var(--color-white);\n }\n\n .light &:focus {\n outline: 3px solid var(--color-coat-of-arms);\n }\n}\n\n.dark {\n --header-background-color: var(--color-bus);\n}\n\n.light {\n --header-background-color: var(--color-silver);\n}\n\n.dense {\n composes: hds-table--dense from 'hds-core/lib/components/table/table.css';\n\n .headerRow {\n .sortingHeader {\n padding-bottom: 7.5px !important;\n padding-top: 7.5px !important;\n }\n }\n}\n\n.zebra {\n composes: hds-table--zebra from 'hds-core/lib/components/table/table.css';\n}\n\n.verticalLines {\n composes: hds-table--with-vertical-lines from 'hds-core/lib/components/table/table.css';\n}\n\n.verticalHeaderColumn {\n composes: hds-table__vertical-header-column from 'hds-core/lib/components/table/table.css';\n}\n\n.textAlignRight {\n composes: hds-table--text-align-right from 'hds-core/lib/components/table/table.css';\n}\n\n.textAlignContentRight {\n composes: hds-table__content--text-align-td-right from 'hds-core/lib/components/table/table.css';\n}\n\n/* MOBILE STYLES */\n\n@media small-down {\n .sortButton {\n font-size: var(--fontsize-body-s);\n font-weight: bold;\n }\n\n .table {\n .headerRow {\n .sortingHeader {\n padding-bottom: 7.5px;\n padding-top: 7.5px;\n }\n }\n }\n}\n\n.sortColumnCell {\n align-items: center;\n display: flex;\n}\n\n.checkboxHeader {\n border-bottom: 1px solid var(--color-black-20);\n}\n\n.checkboxData {\n width: 24px;\n}\n\n.actionContainer {\n align-items: flex-end;\n display: flex;\n flex-flow: row wrap;\n gap: var(--spacing-xs);\n justify-content: space-between;\n margin-bottom: var(--spacing-xs);\n\n .heading {\n font-size: 24px;\n font-weight: bold;\n line-height: 29px;\n }\n\n .actionButtonContainer {\n display: flex;\n flex-wrap: wrap;\n gap: var(--spacing-2-xs);\n }\n\n .actionButton {\n flex-grow: 0;\n }\n}\n\n@media x-small-down {\n .actionContainer {\n .heading {\n width: 100%;\n }\n\n .actionButtonContainer {\n width: 100%;\n }\n\n .actionButton {\n width: 100%;\n }\n }\n}\n",".hds-icon {\n --icon-size: 100%;\n\n background-color: currentcolor;\n display: inline-block;\n height: var(--icon-size);\n -webkit-mask-position: center;\n mask-position: center;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-size: auto;\n mask-size: auto;\n width: var(--icon-size);\n}\n\n.hds-icon.hds-icon--size-xs {\n --icon-size: var(--spacing-layout-2-xs);\n}\n\n.hds-icon.hds-icon--size-s {\n --icon-size: var(--spacing-layout-xs);\n}\n\n.hds-icon.hds-icon--size-m {\n --icon-size: var(--spacing-layout-s);\n}\n\n.hds-icon.hds-icon--size-l {\n --icon-size: var(--spacing-layout-m);\n}\n\n.hds-icon.hds-icon--size-xl {\n --icon-size: var(--spacing-layout-l);\n}\n\n.hds-icon--alert-circle-fill {\n -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3ZM13 16V18H11V16H13ZM13 6V14H11V6H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3ZM13 16V18H11V16H13ZM13 6V14H11V6H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n}\n\n.hds-icon--check-circle-fill {\n -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM16.5 8L18 9.5L10.5 17L6 12.5L7.5 11L10.5 14L16.5 8Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM16.5 8L18 9.5L10.5 17L6 12.5L7.5 11L10.5 14L16.5 8Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n}\n\n.hds-icon--error-fill {\n -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n}\n\n.hds-icon--info-circle-fill {\n -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM13 10V16.5H15V18H9V16.5H11V11.5H9V10H13ZM11.8125 6C12.5374 6 13.125 6.5876 13.125 7.3125C13.125 8.03735 12.5374 8.625 11.8125 8.625C11.0876 8.625 10.5 8.03735 10.5 7.3125C10.5 6.5876 11.0876 6 11.8125 6Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM13 10V16.5H15V18H9V16.5H11V11.5H9V10H13ZM11.8125 6C12.5374 6 13.125 6.5876 13.125 7.3125C13.125 8.03735 12.5374 8.625 11.8125 8.625C11.0876 8.625 10.5 8.03735 10.5 7.3125C10.5 6.5876 11.0876 6 11.8125 6Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n}\n\n.hds-notification {\n --notification-background-color: var(--color-info-light);\n --notification-border-color: var(--color-info);\n --notification-border-width: var(--spacing-2-xs);\n --notification-icon-color: var(--color-info);\n --notification-color: var(--color-black-90);\n --notification-max-width-inline: none;\n --notification-max-width-toast: 21rem;\n --notification-z-index-inline: auto;\n --notification-z-index-toast: 99;\n --notification-offset: var(--spacing-layout-s);\n --notification-padding: var(--spacing-s);\n\n background-color: var(--notification-background-color);\n border: solid var(--notification-border-color);\n border-width: 0 0 0 var(--notification-border-width);\n box-sizing: border-box;\n color: var(--notification-color);\n max-width: var(--notification-max-width-inline);\n padding: var(--notification-padding);\n position: relative;\n width: 100%;\n z-index: var(--notification-z-index-inline);\n}\n\n/* CONTENT */\n\n.hds-notification__content {\n display: grid;\n grid-gap: var(--spacing-s);\n gap: var(--spacing-s);\n}\n\n/* LABEL */\n\n.hds-notification__label {\n align-items: flex-start;\n display: flex;\n font-size: var(--fontsize-heading-xs);\n font-weight: bold;\n letter-spacing: 0.4px;\n line-height: 24px;\n margin-right: var(--spacing-l);\n}\n\n.hds-notification__label > .hds-icon {\n color: var(--notification-icon-color);\n flex: none;\n margin-right: var(--spacing-2-xs);\n}\n\n/* BODY */\n\n.hds-notification__body {\n font-size: var(--fontsize-body-s);\n line-height: 24px;\n}\n\n/* SMALL */\n\n.hds-notification--small {\n --notification-padding: var(--spacing-2-xs);\n}\n\n.hds-notification--small .hds-notification__content {\n display: flex;\n grid-gap: 0;\n gap: 0;\n}\n\n.hds-notification--small .hds-notification__label {\n margin-right: 0;\n}\n\n.hds-notification--small .hds-notification__body {\n margin-right: var(--spacing-l);\n}\n\n/* LARGE */\n\n.hds-notification--large {\n --notification-padding: var(--spacing-l);\n}\n\n.hds-notification--large .hds-notification__label {\n margin-right: 0;\n}\n\n/* ICON */\n\n.hds-notification .hds-icon {\n --icon-size: var(--spacing-layout-xs);\n}\n\n/* CLOSE BUTTON */\n\n.hds-notification__close-button {\n --notification-close-button-offset: var(--spacing-s);\n\n background: none;\n border: none;\n cursor: pointer;\n display: flex;\n outline: none;\n padding: 0;\n position: absolute;\n right: var(--notification-close-button-offset);\n top: var(--notification-close-button-offset);\n}\n\n.hds-notification--small .hds-notification__close-button,\n.hds-notification--large .hds-notification__close-button {\n --notification-close-button-offset: var(--spacing-2-xs);\n}\n\n.hds-notification__close-button:focus {\n box-shadow: 0 0 0 3px var(--color-focus-outline);\n}\n\n/* TOAST POSITIONS */\n\n.hds-notification--top-left,\n.hds-notification--top-center,\n.hds-notification--top-right,\n.hds-notification--bottom-left,\n.hds-notification--bottom-center,\n.hds-notification--bottom-right {\n border-width: var(--notification-border-width) 0 0;\n max-width: var(--notification-max-width-toast);\n position: fixed;\n width: calc(100% - var(--spacing-l));\n z-index: var(--notification-z-index-toast);\n}\n\n.hds-notification--top-left {\n left: var(--notification-offset);\n top: var(--notification-offset);\n}\n\n.hds-notification--top-center {\n left: 50%;\n top: var(--notification-offset);\n transform: translateX(-50%);\n}\n\n.hds-notification--top-right {\n right: var(--notification-offset);\n top: var(--notification-offset);\n}\n\n.hds-notification--bottom-left {\n bottom: var(--notification-offset);\n left: var(--notification-offset);\n}\n\n.hds-notification--bottom-center {\n bottom: var(--notification-offset);\n left: 50%;\n transform: translateX(-50%);\n}\n\n.hds-notification--bottom-right {\n bottom: var(--notification-offset);\n right: var(--notification-offset);\n}\n\n@media only screen and (max-width: 765.98px) {\n .hds-notification {\n --notification-offset: var(--spacing-s);\n }\n}\n\n/* TYPES */\n\n.hds-notification--success {\n --notification-background-color: var(--color-success-light);\n --notification-border-color: var(--color-success);\n --notification-icon-color: var(--color-success);\n}\n\n.hds-notification--alert {\n --notification-background-color: var(--color-alert-light);\n --notification-border-color: var(--color-alert-dark);\n --notification-icon-color: var(--color-alert-dark);\n}\n\n.hds-notification--error {\n --notification-background-color: var(--color-error-light);\n --notification-border-color: var(--color-error);\n --notification-icon-color: var(--color-error);\n}\n\n/* BOX SHADOW */\n\n.hds-notification--box-shadow {\n box-shadow: var(--box-shadow-l);\n}\n",".notification {\n composes: hds-notification from 'hds-core/lib/components/notification/notification.css';\n overflow: hidden;\n}\n\n.notification.noBorder {\n border: 0;\n padding-top: calc(var(--notification-padding) + var(--notification-border-width));\n}\n\n.close {\n composes: hds-notification__close-button from 'hds-core/lib/components/notification/notification.css';\n}\n\n.notification.noBorder .close {\n top: calc(var(--notification-close-button-offset) + var(--notification-border-width));\n}\n\n.autoClose {\n background-color: var(--notification-border-color);\n height: var(--notification-border-width);\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n}\n\n.content {\n composes: hds-notification__content from 'hds-core/lib/components/notification/notification.css';\n}\n\n.icon {\n background-color: transparent;\n composes: hds-icon from 'hds-core/lib/components/notification/notification.css';\n}\n\n.label {\n composes: hds-notification__label from 'hds-core/lib/components/notification/notification.css';\n}\n\n.body {\n composes: hds-notification__body from 'hds-core/lib/components/notification/notification.css';\n}\n\n.small {\n composes: hds-notification--small from 'hds-core/lib/components/notification/notification.css';\n}\n\n.large {\n composes: hds-notification--large from 'hds-core/lib/components/notification/notification.css';\n}\n\n.top-left {\n composes: hds-notification--top-left from 'hds-core/lib/components/notification/notification.css';\n}\n\n.top-center {\n composes: hds-notification--top-center from 'hds-core/lib/components/notification/notification.css';\n}\n\n.top-right {\n composes: hds-notification--top-right from 'hds-core/lib/components/notification/notification.css';\n}\n\n.bottom-left {\n composes: hds-notification--bottom-left from 'hds-core/lib/components/notification/notification.css';\n}\n\n.bottom-center {\n composes: hds-notification--bottom-center from 'hds-core/lib/components/notification/notification.css';\n}\n\n.bottom-right {\n composes: hds-notification--bottom-right from 'hds-core/lib/components/notification/notification.css';\n}\n\n.success {\n composes: hds-notification--success from 'hds-core/lib/components/notification/notification.css';\n}\n\n.alert {\n composes: hds-notification--alert from 'hds-core/lib/components/notification/notification.css';\n}\n\n.error {\n composes: hds-notification--error from 'hds-core/lib/components/notification/notification.css';\n}\n\n.boxShadow {\n composes: hds-notification--box-shadow from 'hds-core/lib/components/notification/notification.css';\n}\n",".wrapper {\n position: relative;\n}\n",".root {\n composes: hds-text-input from 'hds-core/lib/components/text-input/text-input.css';\n position: relative;\n}\n\n.inputWrapper {\n composes: hds-text-input__input-wrapper from 'hds-core/lib/components/text-input/text-input.css';\n}\n\n.input {\n composes: hds-text-input__input from 'hds-core/lib/components/text-input/text-input.css';\n}\n\n.input.hasButton {\n padding-right: calc(2 * var(--spacing-s) + 1.5rem);\n}\n\n.errorText {\n composes: hds-text-input__error-text from 'hds-core/lib/components/text-input/text-input.css';\n}\n\n.helperText {\n composes: hds-text-input__helper-text from 'hds-core/lib/components/text-input/text-input.css';\n}\n\n.invalidText {\n composes: hds-text-input__helper-text from 'hds-core/lib/components/text-input/text-input.css';\n}\n\n.successText {\n composes: hds-text-input__success-text from 'hds-core/lib/components/text-input/text-input.css';\n}\n\n.infoText {\n composes: hds-text-input__info-text from 'hds-core/lib/components/text-input/text-input.css';\n}\n\n.invalid {\n composes: hds-text-input--invalid from 'hds-core/lib/components/text-input/text-input.css';\n}\n\n.success {\n composes: hds-text-input--success from 'hds-core/lib/components/text-input/text-input.css';\n}\n\n.readOnly {\n composes: hds-text-input--read-only from 'hds-core/lib/components/text-input/text-input.css';\n}\n\n.buttonWrapper {\n composes: hds-text-input__buttons from 'hds-core/lib/components/text-input/text-input.css'\n}\n\n.button {\n composes: hds-text-input__button from 'hds-core/lib/components/text-input/text-input.css'\n}\n\n.button:disabled {\n cursor: not-allowed;\n}\n\n.button:focus {\n outline: var(--outline-width) solid var(--focus-outline-color);\n}\n","@import \"../../../../styles/common.scss\";\n@value small-up from \"../../../../styles/breakpoints.scss\";\n\n:root {\n --date-background: transparent;\n --date-color: var(--color-black-90);\n --outside-date-background: transparent;\n --outside-date-color: var(--color-black-40);\n --selected-date-background: var(--color-bus);\n --selected-date-color: #fff;\n --table-width: 100%;\n --horizontal-spacing: var(--spacing-s);\n --vertical-spacing: var(--spacing-s);\n\n @media only screen and (min-width: 576px) {\n --table-width: 308px;\n }\n}\n\n.pickerWrapper {\n display: flex;\n justify-content: flex-end;\n opacity: 0;\n pointer-events: none;\n transition: opacity 150ms;\n visibility: hidden;\n will-change: opacity, visibility;\n z-index: 900;\n\n &.isVisible {\n opacity: 1;\n visibility: visible;\n }\n\n > * {\n pointer-events: auto;\n }\n\n}\n\n.hds-datepicker {\n background: #fff;\n box-shadow: 0 2px 4px 0 rgb(0 0 0 / 0.5);\n box-sizing: border-box;\n display: inline-block;\n min-width: calc(100vw - 2 * var(--spacing-s));\n padding: var(--vertical-spacing) var(--horizontal-spacing);\n position: relative;\n width: 100%;\n\n @media small-up {\n min-width: calc(var(--table-width) + 2 * var(--spacing-s));\n }\n}\n\n.hds-datepicker__month-table {\n border-collapse: collapse;\n border-spacing: 2px;\n max-width: var(--table-width);\n width: 100%;\n}\n\n.hds-datepicker__head {\n &__weekday {\n font-size: var(--fontsize-body-m);\n font-weight: bold;\n padding-bottom: 6px;\n text-transform: uppercase;\n\n &-vhidden {\n @extend %visuallyHidden;\n }\n }\n}\n\n.hds-datepicker__day-cell {\n line-height: 0;\n margin: 0 4px 0 0;\n padding: 3px;\n width: calc(100% / 7);\n}\n\n.hds-datepicker__day {\n align-items: center;\n appearance: none;\n background: transparent;\n border: 0;\n box-sizing: border-box;\n display: inline-flex;\n line-height: 1;\n margin: 0;\n overflow: hidden;\n padding: 0 0 100%;\n position: relative;\n vertical-align: middle;\n width: 100%;\n\n --background-color: var(--date-background);\n --color: var(--date-color);\n\n &--selected {\n --background-color: var(--selected-date-background);\n --color: var(--selected-date-color);\n }\n\n &--outside {\n pointer-events: none;\n\n --background-color: var(--outside-date-background);\n --color: var(--outside-date-color);\n }\n\n &--today {\n &:after {\n background: var(--color);\n bottom: 7px;\n content: '';\n height: 2px;\n left: 8px;\n position: absolute;\n right: 8px;\n }\n }\n\n &:focus {\n box-shadow: 0 0 0 3px var(--color-coat-of-arms);\n outline: none;\n }\n\n &__wrapper {\n align-items: center;\n background: var(--background-color);\n color: var(--color);\n display: flex;\n font-size: 1rem;\n inset: 2px;\n justify-content: center;\n line-height: 1rem;\n position: absolute;\n\n &-vhidden {\n @extend %visuallyHidden;\n }\n }\n}\n\n.hds-datepicker__navigation {\n align-items: center;\n display: flex;\n margin-bottom: var(--spacing-s);\n\n &__select {\n --icon-size: 24px;\n\n margin-right: var(--spacing-s);\n position: relative;\n\n select {\n height: 100%;\n left: 0;\n opacity: 0;\n position: absolute;\n text-transform: capitalize;\n top: 0;\n width: 100%;\n }\n\n &-label {\n --label-spacing: 0.3rem;\n\n font-size: var(--fontsize-body-xl);\n font-weight: bold;\n padding: 0.15rem calc(var(--icon-size)) 0.15rem 0.3rem;\n pointer-events: none;\n position: relative;\n text-transform: capitalize;\n }\n\n select:focus + &-label {\n box-shadow: 0 0 0 3px var(--color-coat-of-arms);\n }\n\n &-icon {\n align-items: center;\n bottom: 0;\n display: flex;\n justify-content: center;\n pointer-events: none;\n position: absolute;\n right: 0;\n top: 0;\n width: var(--icon-size);\n\n svg {\n height: var(--icon-size);\n width: var(--icon-size);\n }\n }\n }\n\n &__buttons {\n display: flex;\n flex-grow: 1;\n justify-content: flex-end;\n transform: translateY(-3px);\n\n [aria-disabled=\"true\"] {\n color: var(--color-black-30);\n cursor: not-allowed;\n }\n\n button {\n align-items: center;\n background: transparent;\n border: 0;\n cursor: pointer;\n display: inline-flex;\n height: calc(25px + 0.15rem);\n justify-content: center;\n padding: 0.15rem;\n width: calc(25px + 0.15rem);\n\n &:focus {\n box-shadow: 0 0 0 3px var(--color-coat-of-arms);\n outline: none;\n }\n }\n }\n}\n\n.hds-datepicker__bottom-buttons {\n display: flex;\n flex-direction: row;\n justify-content: center;\n margin: var(--spacing-s);\n\n button:nth-child(2) {\n margin-left: var(--spacing-s);\n }\n}\n","@import '../../styles/common.scss';\n@value medium-up from \"../../styles/breakpoints.scss\";\n\n.dialogVisibleBodyWithHiddenScrollbars {\n overflow: hidden !important;\n}\n\n.dialogBackdrop {\n inset: 0;\n position: fixed;\n}\n\n.dialog {\n background: white;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n margin: auto var(--spacing-s);\n max-width: 100%;\n position: relative;\n visibility: hidden;\n z-index: 900;\n}\n\n.dialogContainer {\n --accent-line-color: var(--color-bus);\n --overlay-color: rgb(0 0 0 / 0.3);\n\n align-items: center;\n display: flex;\n inset: 0;\n justify-content: center;\n overflow: auto;\n -webkit-overflow-scrolling: unset;\n overscroll-behavior: none;\n position: fixed;\n touch-action: none;\n z-index: 800;\n\n .dialogBackdrop {\n background: var(--overlay-color);\n }\n\n .dialog {\n border-top: 10px solid var(--accent-line-color);\n width: 558px;\n }\n\n .dialog.danger {\n border-top-color: var(--color-error);\n }\n}\n\n.dialogVisible {\n visibility: visible !important;\n}\n\n.dialogScrollable {\n max-height: calc(100% - 4rem);\n overflow: hidden;\n}\n\n@media medium-up {\n .dialog {\n margin: auto;\n }\n}\n\n.boxShadow {\n box-shadow: var(--box-shadow-l);\n}\n","@import '../../../styles/common.scss';\n@import '../dialog.common.scss';\n@value medium-up from \"../../../styles/breakpoints.scss\";\n\n.dialogHeader {\n @include dialogComponentSidePaddings;\n\n display: block;\n padding-bottom: 0;\n padding-top: var(--spacing-m);\n}\n\n.dialogHeaderContent {\n align-items: flex-start;\n display: flex;\n justify-content: space-between;\n min-height: 36px;\n}\n\n.dialogTitle {\n --outline-x-gutter: 4px;\n --outline-y-gutter: 2px;\n --outline-width: 3px;\n\n align-items: flex-start;\n box-sizing: border-box;\n display: flex;\n font-size: var(--fontsize-heading-xs);\n font-weight: 700;\n letter-spacing: 0.4px;\n line-height: 24px;\n margin: 0;\n order: 0;\n outline: none;\n padding-right: var(--spacing-3-xs);\n position: relative;\n\n &:after {\n border: var(--outline-width) solid transparent;\n box-sizing: border-box;\n content: '';\n display: block;\n height: 100%;\n left: calc((var(--outline-width) + var(--outline-x-gutter)) * -1);\n position: absolute;\n top: calc((var(--outline-width) + var(--outline-y-gutter)) * -1);;\n width: 100%;\n }\n\n &:focus:after {\n border-color: var(--color-coat-of-arms);\n height: calc(100% + calc((var(--outline-width) + var(--outline-y-gutter)) * 2));\n width: calc(100% + calc((var(--outline-width) + var(--outline-x-gutter)) * 2));\n }\n\n .dialogTitleLeftIcon {\n display: inline-flex;\n margin-right: var(--spacing-2-xs);\n }\n}\n\n.dialogHeaderClose {\n @extend %buttonReset;\n\n color: var(--dialog-close-button-color);\n display: block;\n font-size: 0;\n height: 44px;\n line-height: 1;\n margin-left: var(--spacing-2-xs);\n margin-top: calc(-1 * var(--spacing-2-xs));\n min-width: 44px;\n order: 1;\n padding: 0;\n vertical-align: middle;\n\n &:focus {\n box-shadow: 0 0 0 3px var(--color-coat-of-arms);\n outline: none;\n text-decoration: none;\n }\n}\n\n@media medium-up {\n .dialogHeader {\n padding-bottom: var(--spacing-3-xs);\n }\n}\n","// common styles for dialog components\n@value medium-up from \"../../../styles/breakpoints.scss\";\n\n@mixin dialogComponentSidePaddings {\n padding-left: var(--spacing-m);\n padding-right: var(--spacing-m);\n\n @media medium-up {\n padding-left: var(--spacing-l);\n padding-right: var(--spacing-l);\n }\n}\n","@import '../../../styles/common.scss';\n@import '../dialog.common.scss';\n\n.dialogContent {\n @include dialogComponentSidePaddings;\n\n padding-bottom: var(--spacing-2-xs);\n}\n\n.dialogContentScrollable {\n border-bottom: 1px solid;\n border-top: 1px solid;\n overflow-y: auto;\n}\n","@import '../../../styles/common.scss';\n@import '../dialog.common.scss';\n@value medium-up from \"../../../styles/breakpoints.scss\";\n\n.dialogActionButtons {\n @include dialogComponentSidePaddings;\n\n display: block;\n padding-bottom: var(--spacing-m);\n padding-top: var(--spacing-s);\n\n > * {\n width: 100%;\n }\n\n > * + * {\n margin-top: var(--spacing-s);\n }\n}\n\n@media medium-up {\n .dialogActionButtons {\n display: flex;\n flex-wrap: wrap;\n gap: var(--spacing-s);\n\n > * {\n width: auto;\n }\n\n > * + * {\n margin-top: 0;\n }\n }\n}\n","@import \"../../../styles/common.scss\";\n@import \"../dropdown.common.scss\";\n\n.root {\n @extend %dropdownRoot;\n}\n\n/**\n * WRAPPER\n */\n\n.wrapper {\n @extend %dropdownWrapper;\n\n align-items: center;\n display: flex;\n}\n\n.wrapper.wrapperWithMultiSelectAndIcon {\n align-items: flex-start;\n}\n\n/**\n * TOGGLE BUTTON\n */\n\n.button {\n @extend %buttonReset;\n @extend %dropdownAngleIcon;\n\n color: var(--dropdown-color-default);\n display: flex;\n outline: none;\n\n &.hidden {\n @extend %visuallyHidden;\n }\n}\n\n.icon {\n @extend %dropdownIcon;\n\n margin-left: var(--spacing-s);\n}\n\n.input {\n align-self: stretch;\n\n // Removes the input shadow on iOS\n appearance: none;\n background-color: var(--input-background-default);\n border: none;\n box-sizing: border-box;\n color: var(--input-color-default);\n font-size: var(--fontsize-body-l);\n height: var(--menu-item-height);\n\n // The focus is given to the wrapping element instead of this input\n // so we can hide the outline.\n outline: none;\n padding: 0 calc(var(--spacing-l) + var(--icon-size)) 0 0;\n width: 100%;\n\n // add left padding when there is no icon\n &:first-child {\n padding-left: var(--spacing-s);\n }\n\n &:not(:focus).hidden {\n @extend %visuallyHidden;\n }\n\n // don't add additional right padding if toggle button is hidden\n &.noToggle {\n padding-right: var(--spacing-s);\n\n &.withClearButton {\n padding-right: calc(var(--spacing-l) + var(--icon-size));\n }\n }\n\n &.withClearButton {\n padding-right: calc(var(--spacing-2-xl) + var(--icon-size));\n }\n\n &::placeholder {\n color: var(--placeholder-color);\n opacity: 1;\n }\n\n &:disabled::placeholder {\n color: var(--dropdown-color-disabled);\n }\n}\n\n/**\n * MENU\n */\n\n.menu {\n @extend %dropdownMenu;\n}\n\n/**\n * MENU ITEM\n */\n\n.menuItem {\n @extend %dropdownMenuItem;\n}\n\n/**\n * HELPER TEXT\n */\n\n.helperText {\n @extend %dropdownHelperText;\n}\n\n/**\n * DISABLED\n */\n\n.disabled {\n @extend %dropdownDisabled;\n}\n\n/**\n * INVALID\n */\n\n.invalid {\n @extend %dropdownInvalid;\n}\n\n/**\n * MULTISELECT\n */\n\n.multiselect {\n @extend %dropdownMultiselect;\n\n .wrapper {\n flex-direction: column;\n }\n\n .selectedItems {\n align-self: stretch;\n }\n\n .input {\n align-self: unset;\n padding: 0 calc(var(--spacing-l) + var(--icon-size)) 0 var(--spacing-s);\n\n // don't add additional right padding if toggle button is hidden\n &.noToggle {\n padding-right: var(--spacing-s);\n }\n\n // move input closer to selected items and remove right spacing that accounted for the toggle button\n &.adjustSpacing {\n margin-top: calc(var(--spacing-2-xs) * -1);\n padding: 0 var(--spacing-s);\n }\n }\n\n .inputWithIcon.inputWithIcon {\n padding-left: 0;\n }\n\n .multiselectIconAndInputWrapper {\n align-items: center;\n display: flex;\n flex-direction: row;\n\n &:not(:focus-within).hidden {\n @extend %visuallyHidden;\n }\n\n .icon.adjustSpacingForIcon {\n margin-top: calc(var(--spacing-2-xs) * -1);\n }\n }\n}\n",".errorSummaryBody {\n font-size: var(--fontsize-body-s);\n line-height: 24px;\n\n ul {\n margin: 0;\n padding: 0 0 0 var(--spacing-s);\n }\n\n li {\n margin-bottom: 0.125rem;\n }\n\n a {\n color: var(--color-bus);\n }\n}\n\n.label {\n &:focus {\n outline: 3px solid var(--color-coat-of-arms);\n }\n}\n",".hds-selection-group {\n --spacing-col: 1.25rem;\n --spacing-row: var(--spacing-s);\n --label-color-default: var(--color-black-90);\n --icon-size: var(--spacing-m);\n\n border: 0;\n padding: 0;\n}\n\n.hds-selection-group > *:not(.hds-selection-group__items) {\n float: left;\n}\n\n.hds-selection-group__legend {\n /*\n * Normalized rules\n * 1. Correct the text wrapping in Edge and IE.\n * `fieldset` elements in all browsers.\n */\n box-sizing: border-box; /* 1 */\n color: var(--label-color-default);\n display: block;\n font-size: var(--fontsize-body-m);\n font-weight: 500;\n margin-bottom: var(--spacing-row);\n\n /*\n * Normalized rules\n * 1. Correct the text wrapping in Edge and IE.\n * 2. Remove the padding so developers are not caught out when they zero out\n * `fieldset` elements in all browsers.\n */\n max-width: 100%; /* 1 */\n padding: 0; /* 2 */\n white-space: normal; /* 1 */\n}\n\n.hds-selection-group__required {\n color: var(--label-color-default);\n display: inline-block;\n font-size: var(--fontsize-body-xl);\n line-height: 1;\n margin-left: var(--spacing-2-xs);\n transform: translateY(var(--spacing-3-xs));\n}\n\n.hds-selection-group__items {\n clear: left;\n display: grid;\n grid-gap: var(--spacing-row) var(--spacing-col);\n gap: var(--spacing-row) var(--spacing-col);\n justify-content: start;\n}\n\n.hds-selection-group__items--vertical {\n grid-auto-flow: row;\n}\n\n.hds-selection-group__items--horizontal {\n grid-auto-flow: column;\n}\n\n.hds-selection-group__error-text {\n color: var(--color-error);\n display: block;\n font-size: var(--fontsize-body-m);\n margin-top: var(--spacing-xs);\n padding-left: calc(var(--icon-size) + var(--spacing-2-xs));\n position: relative;\n}\n\n.hds-selection-group__error-text:before {\n background: var(--color-error);\n content: '';\n height: var(--icon-size);\n left: 0;\n -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 Z M13,16 L13,18 L11,18 L11,16 L13,16 Z M13,6 L13,14 L11,14 L11,6 L13,6 Z'/%3E %3C/g%3E %3C/svg%3E\");\n mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 Z M13,16 L13,18 L11,18 L11,16 L13,16 Z M13,6 L13,14 L11,14 L11,6 L13,6 Z'/%3E %3C/g%3E %3C/svg%3E\");\n pointer-events: none;\n position: absolute;\n top: 0;\n width: var(--icon-size);\n}\n","@import \"../../styles/common.scss\";\n\n.selectionGroup {\n --spacing-col: 1.25rem;\n --spacing-row: var(--spacing-s);\n --label-color-default: var(--color-black-90);\n --icon-size: var(--spacing-m);\n\n border: 0;\n padding: 0;\n}\n\n.selectionGroup > *:not(.items) {\n float: left;\n}\n\n.label {\n /* Normalize.css rule\n * Remove the padding so developers are not caught out when they zero out\n * `fieldset` elements in all browsers.\n */\n\n @extend %inputLabel;\n\n margin-bottom: var(--spacing-row);\n padding: 0;\n}\n\n.items {\n clear: left;\n display: grid;\n gap: var(--spacing-row) var(--spacing-col);\n justify-content: start;\n\n &.vertical {\n grid-auto-flow: row;\n }\n\n &.horizontal {\n grid-auto-flow: column;\n }\n}\n\n.tooltipButton {\n margin-left: var(--spacing-2-xs);\n}\n\n.errorText {\n composes: hds-selection-group__error-text from 'hds-core/lib/components/selection-group/selection-group.css';\n}\n\n.helperText {\n composes: helper-text from 'hds-core/lib/utils/helpers.css';\n}\n",".hds-radio-button {\n --size: 24px;\n\n /* icon (circle) size relative to the radio button size (--size) */\n --icon-scale: 0.5;\n --border-width: 2px;\n --outline-width: 3px;\n --label-font-size: var(--fontsize-body-m);\n --label-padding: var(--spacing-2-xs);\n --background: var(--color-white);\n --background-hover: var(--color-white);\n --background-focus: var(--color-white);\n --background-unselected-disabled: var(--color-black-10);\n --background-selected-disabled: var(--color-white);\n --border-color-focus: var(--color-black-90);\n --border-color-selected: var(--color-bus);\n --border-color-selected-hover: var(--color-bus-dark);\n --border-color-selected-disabled: var(--color-black-20);\n --border-color-unselected: var(--color-black-50);\n --border-color-unselected-hover: var(--color-black-90);\n --border-color-unselected-disabled: var(--color-black-10);\n --icon-color-selected: var(--color-bus);\n --icon-color-unselected: transparent;\n --icon-color-hover: var(--color-bus-dark);\n --icon-color-disabled: var(--color-black-10);\n --label-color: var(--color-black-90);\n --label-color-disabled: var(--color-black-40);\n\n display: flex;\n flex-wrap: wrap;\n min-height: var(--size);\n position: relative;\n}\n\n.hds-radio-button,\n.hds-radio-button *,\n.hds-radio-button *:before,\n.hds-radio-button *:after {\n box-sizing: border-box;\n}\n\n.hds-radio-button:not(:first-of-type) {\n margin-top: var(--spacing-2-xs);\n}\n\n.hds-radio-button .hds-radio-button__label:before,\n.hds-radio-button .hds-radio-button__label:after {\n border-radius: 50%;\n content: \"\";\n left: 0;\n position: absolute;\n top: 0;\n}\n\n/* inner circle */\n\n.hds-radio-button .hds-radio-button__label:after {\n background-clip: content-box;\n background-color: var(--icon-color-unselected);\n border: var(--border-width) solid var(--border-color-unselected);\n height: var(--size);\n padding: calc((var(--size) / 2 - var(--border-width) * 2) * (1 - var(--icon-scale)));\n width: var(--size);\n}\n\n/* inner circle - selected */\n\n.hds-radio-button .hds-radio-button__input:checked + .hds-radio-button__label:after {\n background-color: var(--icon-color-selected);\n border-color: var(--border-color-selected);\n}\n\n/* radio button transitions */\n\n.hds-radio-button .hds-radio-button__input:hover + .hds-radio-button__label:after,\n.hds-radio-button .hds-radio-button__input:focus + .hds-radio-button__label:after {\n transition: 85ms ease-out;\n transition-property: background-color, border-color;\n}\n\n/* inner circle - disabled */\n\n.hds-radio-button .hds-radio-button__input:disabled + .hds-radio-button__label:after {\n border-color: var(--border-color-unselected-disabled);\n}\n\n/* inner circle - selected - disabled */\n\n.hds-radio-button .hds-radio-button__input:checked:disabled + .hds-radio-button__label:after {\n background-color: var(--icon-color-disabled);\n border-color: var(--border-color-selected-disabled);\n}\n\n/* inner circle - focus */\n\n.hds-radio-button .hds-radio-button__input:not(:disabled):focus + .hds-radio-button__label:after {\n border-color: var(--border-color-focus);\n}\n\n/* inner circle - unselected - hover */\n\n.hds-radio-button .hds-radio-button__input:not(:disabled):hover + .hds-radio-button__label:after,\n.hds-radio-button .hds-radio-button__input:not(:disabled):hover:focus + .hds-radio-button__label:after {\n border-color: var(--border-color-unselected-hover);\n}\n\n/* background & focus outline */\n\n.hds-radio-button .hds-radio-button__label:before {\n background-color: var(--background);\n height: var(--size);\n width: var(--size);\n}\n\n.hds-radio-button .hds-radio-button__input:hover + .hds-radio-button__label:before,\n.hds-radio-button .hds-radio-button__input:focus + .hds-radio-button__label:before {\n transition: 85ms ease-out;\n transition-property: background-color, box-shadow, transform;\n}\n\n/* NATIVE INPUT */\n\n.hds-radio-button .hds-radio-button__input {\n /*\n * Normalize.css rules\n * 1. Change the font styles in all browsers.\n */\n font-family: inherit; /* 1 */\n font-size: 100%; /* 1 */\n height: var(--size);\n left: 0;\n\n /*\n * Normalize.css rules\n * 1. Change the font styles in all browsers.\n * 2. Remove the margin in Firefox and Safari.\n */\n line-height: 1.15; /* 1 */\n margin: 0; /* 2 */\n opacity: 0;\n position: absolute;\n top: 0;\n width: var(--size);\n}\n\n/* LABEL */\n\n.hds-radio-button .hds-radio-button__label {\n color: var(--label-color);\n cursor: pointer;\n font-size: var(--label-font-size);\n line-height: var(--lineheight-m);\n padding-left: calc(var(--size) + var(--label-padding));\n padding-top: calc((var(--size) - (var(--label-font-size) * var(--lineheight-m))) / 2);\n position: relative;\n}\n\n/* CUSTOM RADIO BUTTON */\n\n/* background - hover */\n\n.hds-radio-button .hds-radio-button__input:hover + .hds-radio-button__label:before {\n background-color: var(--background-hover);\n}\n\n/* background - focus */\n\n.hds-radio-button .hds-radio-button__input:focus + .hds-radio-button__label:before {\n box-shadow: 0 0 0 var(--outline-width) var(--color-focus-outline);\n transform: translate3d(0, 0, 0);\n}\n\n/* inner circle - selected - hover */\n\n.hds-radio-button .hds-radio-button__input:not(:disabled):checked:hover + .hds-radio-button__label:after,\n.hds-radio-button .hds-radio-button__input:not(:disabled):checked:hover:focus + .hds-radio-button__label:after {\n background-color: var(--icon-color-hover);\n border-color: var(--border-color-selected-hover);\n}\n\n/* DISABLED */\n\n/* label */\n\n.hds-radio-button .hds-radio-button__input:disabled + .hds-radio-button__label {\n color: var(--label-color-disabled);\n}\n\n/* background */\n\n.hds-radio-button .hds-radio-button__input:disabled + .hds-radio-button__label:before {\n background-color: var(--background-unselected-disabled);\n}\n\n/* background - selected */\n\n.hds-radio-button .hds-radio-button__input:checked:disabled + .hds-radio-button__label:before {\n background-color: var(--background-selected-disabled);\n}\n\n.hds-radio-button .hds-radio-button__input:disabled,\n.hds-radio-button .hds-radio-button__input:disabled + .hds-radio-button__label {\n cursor: not-allowed;\n}\n",".radioButton {\n composes: hds-radio-button from 'hds-core/lib/components/radio-button/radio-button.css';\n}\n\n.input {\n composes: hds-radio-button__input from 'hds-core/lib/components/radio-button/radio-button.css';\n}\n\n.label {\n composes: hds-radio-button__label from 'hds-core/lib/components/radio-button/radio-button.css';\n}\n\n.helperText {\n composes: helper-text from 'hds-core/lib/utils/helpers.css';\n}\n","@import \"../../styles/common.scss\";\n\n$componentMaxWidth: 500px;\n\n.dragAndDrop {\n align-items: center;\n border: 2px dotted var(--color-coat-of-arms);\n box-sizing: border-box;\n color: var(--color-coat-of-arms);\n cursor: pointer;\n display: flex;\n justify-content: center;\n margin-top: var(--spacing-xs);\n max-width: $componentMaxWidth;\n padding: var(--spacing-s);\n width: 100%;\n}\n\n.dragAndDropActive {\n background-color: var(--color-silver-light);\n border-color: var(--color-coat-of-arms-dark);\n color: var(--color-coat-of-arms-dark);\n}\n\n.dragAndDropDisabled {\n border-color: var(--color-black-50);\n color: var(--color-black-50);\n cursor: not-allowed;\n}\n\n.dragAndDropLabel {\n align-items: center;\n display: flex;\n}\n\n.dragAndDropLabelText {\n margin-left: var(--spacing-s);\n}\n\n.dragAndDropHelperText {\n @extend %inputLabel;\n\n margin: var(--spacing-s) 0 var(--spacing-2-xs);\n}\n\n.fileInputContainer {\n flex: 1;\n}\n\n.fileInputWrapper {\n display: inline-block;\n margin: var(--spacing-2-xs) 0;\n position: relative;\n\n // We need to manually add focus styles to the button when the input has focus.\n &:focus-within > button:after {\n --size: calc(100% + calc(var(--outline-width) * 2 + var(--border-width) * 2 + var(--outline-gutter) * 2));\n\n border-color: var(--focus-outline-color);\n }\n}\n\n.fileInput {\n @extend %visuallyHidden;\n}\n\n.fileList {\n list-style: none;\n margin: var(--spacing-s) 0 0;\n padding: 0;\n}\n\n.fileListItem {\n align-items: flex-start;\n background-color: var(--color-info-light);\n border-bottom: 2px dotted var(--color-coat-of-arms);\n box-sizing: border-box;\n display: flex;\n max-width: 100%;\n padding: var(--spacing-s) var(--spacing-2-xs);\n width: $componentMaxWidth;\n\n & + & {\n margin-top: var(--spacing-s);\n }\n}\n\n.fileListItemTitle {\n align-items: flex-start;\n display: flex;\n flex: 1;\n flex-wrap: nowrap;\n font-size: var(--fontsize-body-s);\n margin: 2px var(--spacing-xs) 0 var(--spacing-2-xs);\n}\n\n.fileListItemName {\n hyphens: auto;\n word-break: break-word;\n}\n\n.fileListItemSize {\n margin-left:var(--spacing-2-xs);\n text-align: right;\n white-space: nowrap;\n}\n\n.fileListItemButton {\n --file-list-item-button-y-offset: calc(-1 * var(--spacing-2-xs) - 2px);\n\n display: flex;\n margin: var(--file-list-item-button-y-offset) auto var(--file-list-item-button-y-offset) 0;\n}\n\n.fileListItemButtonLabel {\n margin-left: var(--spacing-3-xs);\n}\n","@value small-down, x-small-down, x-large-up from \"../../styles/breakpoints.scss\";\n\n$koros-heights: (\n 'basic': 15px,\n 'beat': 70px,\n 'pulse': 34px,\n 'wave': 35px,\n 'vibration': 54px,\n);\n\n.footer {\n --footer-background: var(--color-black-5);\n --footer-color: var(--color-black-90);\n --footer-divider-color: var(--color-black-20);\n --footer-focus-outline-border-radius: 0px;\n --footer-focus-outline-color: var(--color-coat-of-arms);\n --footer-focus-outline-width: 3px;\n --footer-padding: var(--spacing-l) var(--spacing-m) 0;\n\n color: var(--footer-color);\n\n // black theme overrides\n &.theme-dark {\n --footer-background: var(--color-black-80);\n --footer-color: var(--color-white);\n --footer-focus-outline-color: var(--color-white);\n }\n}\n\n.koros {\n fill: var(--footer-background, transparent);\n overflow: hidden;\n\n svg {\n left: 50%;\n position: relative;\n transform: translateX(-50%);\n width: 4028px; /* can't use relative units here, as we want to have the koro waves always centered */\n }\n\n @each $type, $height in $koros-heights {\n &.#{$type} {\n height: #{$height};\n }\n }\n}\n\n.footerContent {\n background-color: var(--footer-background);\n}\n\n.footerSections {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n padding: var(--footer-padding);\n}\n\n.title {\n font-size: var(--fontsize-heading-m);\n font-weight: bold;\n letter-spacing: 0.4px;\n line-height: var(--lineheight-l);\n}\n\n@media x-small-down {\n .footer {\n --footer-padding: var(--spacing-m) var(--spacing-s) 0;\n }\n\n .footerSections {\n padding: var(--footer-padding);\n }\n}\n\n@media small-down {\n .titleWrapper {\n flex-direction: column;\n }\n\n .title {\n font-size: var(--fontsize-heading-s);\n }\n}\n\n@media x-large-up {\n .footerSections {\n margin: 0 auto;\n max-width: var(--container-width-xl);\n }\n}\n",".koros {\n line-height: 0;\n width: 100%;\n}\n\n.rotate {\n will-change: transform;\n}\n","@import '../../common.scss';\n\n.navigation {\n display: flex;\n flex-wrap: wrap;\n gap: var(--spacing-xs) var(--spacing-m);\n padding-bottom: var(--spacing-m);\n}\n","@value x-large-up from \"../../../../styles/breakpoints.scss\";\n\n.navigationGroup {\n display: flex;\n}\n\n.navigationGroupList {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-3-xs);\n justify-items: start;\n list-style: none;\n margin: 0;\n padding: 0;\n width: 137px;\n}\n\n@media x-large-up {\n .navigationGroupList {\n width: 180px;\n }\n}\n","// COMMON FOOTER STYLES AND UTILS\n@import \"../../styles/common.scss\";\n\n/**\n * footer section divider\n */\n%divider {\n background-color: var(--footer-divider-color);\n border: 0;\n height: 1px;\n margin: 0 0 var(--spacing-xs);\n width: 100%;\n}\n\n/**\n * footer item\n */\n%footerItem {\n @extend %buttonReset;\n \n --outline-offset: 2px;\n --outline-offset-small: 1px;\n \n align-items: center;\n align-self: start;\n color: inherit;\n display: flex;\n font-size: var(--fontsize-body-l);\n line-height: var(--lineheight-l);\n outline: none;\n position: relative;\n text-decoration: none;\n\n &:hover:not(:focus) {\n text-decoration: underline;\n }\n\n &:focus {\n border: 0;\n border-radius: var(--footer-focus-outline-border-radius);\n outline: var(--footer-focus-outline-width) solid var(--footer-focus-outline-color);\n outline-offset: var(--outline-offset);\n }\n}\n\n/**\n * Creates grid columns based on the given value. Centers all \"orphan\" items on the last row.\n */\n@mixin gridColumns($columns) {\n $centeringOptions: (\n 5: (1: 7, 2: 6, 3: 5, 4: 4),\n 4: (1: 6, 2: 5, 3: 4),\n 3: (1: 5, 2: 4),\n 2: (1: 4)\n );\n\n grid-template-columns: repeat(#{$columns * 2}, auto);\n\n & > * {\n grid-column: span 2;\n\n // center orphan items\n @each $orphans, $columnEnd in map-get($centeringOptions, $columns) {\n &:nth-last-child(#{$orphans}):nth-child(#{$columns}n + 1) {\n grid-column-end: $columnEnd;\n }\n }\n }\n}\n","@import '../../common.scss';\n@value medium-down from \"../../../../styles/breakpoints.scss\";\n\n.heading {\n @extend %footerItem;\n\n font-weight: bold;\n line-height: var(--lineheight-l);\n}\n\n.navigation {\n font-size: var(--fontsize-body-m);\n}\n\n.utility {\n font-size: var(--fontsize-heading-m);\n}\n\n@media medium-down {\n .heading.navigation {\n font-weight: normal;\n }\n}\n","@import \"../../common.scss\";\n@value medium-down, large-down from \"../../../../styles/breakpoints.scss\";\n\n.item {\n @extend %footerItem;\n \n --link-color: var(--footer-color);\n --link-visited-color: none;\n \n color: var(--link-color);\n font-weight: normal;\n line-height: var(--lineheight-l);\n text-decoration: none;\n}\n\n.base {\n align-self: unset;\n font-size: var(--fontsize-body-s);\n font-weight: 500;\n margin: 0;\n text-decoration: underline;\n}\n\n.icon {\n composes: icon from 'hds-core/lib/components/link/link.css';\n margin-left: var(--spacing-3-xs);\n}\n\n.navigation {\n align-items: center;\n font-size: var(--fontsize-body-l);\n}\n\n.utility {\n align-items: center;\n font-size: var(--fontsize-body-l);\n}\n\n.subItem.subItem {\n font-size: var(--fontsize-body-s);\n line-height: var(--lineheight-l);\n outline-offset: var(--outline-offset-small);\n}\n\n.subItemIcon {\n align-self: start;\n height: var(--spacing-xs);\n min-width: var(--spacing-xs);\n transform: translateY(4px);\n width: var(--spacing-xs);\n}\n\n@media medium-down {\n .item {\n outline-offset: var(--outline-offset-small);\n }\n\n .utility, .navigation {\n font-size: var(--fontsize-body-m)\n }\n}\n\n@media large-down {\n .item:not(.base):not(.navigation):not(.utility) {\n font-size: var(--fontsize-body-m);\n }\n}\n","@import '../../common.scss';\n@value x-small-down, small-down, medium-down, large-up from \"../../../../styles/breakpoints.scss\";\n\n.divider {\n @extend %divider;\n}\n\n.groups {\n display: flex;\n flex-wrap: wrap;\n row-gap: var(--spacing-m);\n}\n\n.links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--spacing-xs) var(--spacing-m);\n max-width: 60%;\n}\n\n.soMe {\n display: grid;\n gap: var(--spacing-xs);\n grid-auto-flow: column;\n\n > * {\n align-self: center;\n }\n}\n\n.utilities {\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n padding-bottom: var(--spacing-m);\n}\n\n.utilityLinks {\n display: grid;\n grid-auto-flow: column;\n position: relative;\n}\n\n.widerLinks {\n max-width: none;\n}\n\n@media x-small-down {\n .links {\n flex-direction: column;\n gap: var(--spacing-xs);\n justify-items: flex-start;\n }\n\n .utilities {\n align-items: flex-start;\n flex-direction: column;\n }\n}\n\n@media small-down {\n .divider {\n margin: 0 0 var(--spacing-xs);\n }\n\n .utilities {\n justify-items: flex-start;\n }\n}\n\n@media medium-down {\n .link {\n gap: var(--spacing-xs);\n }\n\n .utilities {\n gap: var(--spacing-xs);\n }\n}\n\n@media large-up {\n .divider {\n margin: 0 0 var(--spacing-m);\n }\n}\n","@value x-small-down, small-only, medium-up, large-up, x-large-up from \"../../../../styles/breakpoints.scss\";\n\n.utilityGroup {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-xs);\n justify-items: start;\n list-style: none;\n margin-bottom: var(--spacing-xs);\n padding: 0;\n width: 248px;\n}\n\n@media x-small-down {\n .utilityGroup:nth-last-child(-n+1) {\n margin-bottom: 0;\n }\n}\n\n@media small-only {\n .utilityGroup:nth-last-child(-n+2) {\n margin-bottom: 0;\n }\n}\n\n@media medium-up {\n .utilityGroup {\n width: 214px\n }\n\n .utilityGroup:nth-last-child(-n+1) {\n margin-bottom: 0;\n }\n}\n\n@media large-up {\n .utilityGroup {\n margin-bottom: 0;\n width: 204px;\n }\n}\n\n@media x-large-up {\n .utilityGroup {\n width: 268px\n }\n}\n","@import '../../common.scss';\n@value x-small-down, small-down, small-up, medium-down, medium-up, large-up from \"../../../../styles/breakpoints.scss\";\n\n.backToTopButton {\n @extend %footerItem;\n\n align-self: unset;\n font-size: 20px;\n font-weight: bold;\n line-height: 30px;\n margin-left: auto;\n}\n\n.base {\n display: flex;\n flex-direction: column;\n padding-bottom: var(--spacing-m);\n}\n\n.baseActions {\n display: flex;\n flex-grow: 1;\n}\n\n.copyright {\n display: flex;\n font-size: var(--fontsize-body-s);\n gap: var(--spacing-3-xs);\n justify-content: flex-start;\n line-height: var(--lineheight-l);\n margin-right: var(--spacing-2-xs);\n}\n\n.divider {\n @extend %divider;\n}\n\n.links {\n align-items: center;\n display: flex;\n gap: var(--spacing-xs);\n}\n\n.logoWrapper {\n display: flex;\n}\n\n.separator {\n font-size: var(--fontsize-body-s);\n font-weight: 500;\n line-height: var(--lineheight-l);\n}\n\n@media x-small-down {\n .links {\n align-items: flex-start;\n flex-direction: column;\n }\n \n .copyright {\n &Dot {\n display: none;\n }\n }\n \n .separator {\n display: none;\n }\n}\n\n@media small-down {\n .baseActions {\n flex-direction: column;\n }\n\n .backToTopButton {\n margin-top: var(--spacing-m);\n }\n}\n\n@media medium-down {\n .copyright {\n margin-bottom: var(--spacing-xs);\n margin-top: var(--spacing-s);\n }\n\n .divider {\n margin: 0 0 var(--spacing-m);\n }\n \n .separator:first-of-type {\n display: none;\n }\n}\n\n@media large-up {\n .base {\n align-items: center;\n flex-flow: row wrap;\n }\n\n .copyright {\n margin-left: var(--spacing-s);\n }\n}\n","@import '../../common.scss';\n\n.custom {\n padding-bottom: var(--spacing-m);\n}\n\n.divider {\n @extend %divider;\n \n margin: 0 0 var(--spacing-m);\n}\n",".hds-hero {\n --background-color: var(--color-white);\n --color: var(--color-black-90);\n --image-position: bottom right;\n --koros-color: var(--color-white);\n --koros-height: 85px;\n --diagonal-koros-position: 45%;\n --horizontal-padding-small: var(--spacing-layout-2-xs);\n --horizontal-padding-medium: var(--spacing-layout-xs);\n --horizontal-padding-large: var(--spacing-layout-xs);\n --horizontal-padding-x-large: var(--spacing-layout-xs);\n --padding-horizontal: var(--horizontal-padding-small);\n --padding-vertical: var(--spacing-xl);\n\n background-color: var(--background-color);\n color: var(--color);\n display: flex;\n flex-direction: column;\n position: relative;\n z-index: 1;\n}\n\n.hds-hero__title {\n font-size: var(--fontsize-heading-xl);\n font-weight: normal;\n letter-spacing: -1px;\n line-height: 1em;\n margin-top: 0;\n}\n\n.hds-hero__text {\n font-size: var(--fontsize-body-l);\n}\n\n.hds-hero__container {\n margin-left: auto;\n margin-right: auto;\n max-width: var(--container-width-xl);\n}\n\n.hds-hero__content {\n display: flex;\n padding: var(--padding-vertical) var(--padding-horizontal);\n}\n\n.hds-hero__content--single-column,\n.hds-hero__content--two-columns {\n display: flex;\n flex-direction: column;\n}\n\n.hds-hero__content--two-columns {\n align-items: center;\n}\n\n.hds-hero__content--two-columns__image-container {\n display: none;\n}\n\n.hds-hero__card {\n display: block;\n max-width: var(--container-width-xl);\n}\n\n.hds-hero__koros-container,\n.hds-hero__koros-container--overflow-bottom,\n.hds-hero__koros-container--inward-koros {\n height: var(--koros-height);\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n overflow: hidden;\n position: absolute;\n z-index: 1;\n}\n\n.hds-hero__koros-container--inward-koros {\n position: relative;\n}\n\n.hds-hero__koros-container--overflow-bottom {\n bottom: calc(-1 * var(--koros-height));\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n top: auto;\n}\n\n.hds-hero__koros-container > div {\n bottom: 0;\n height: 100%;\n position: absolute;\n width: 100%;\n}\n\n.hds-hero__card--centered-content {\n text-align: center;\n width: 100%;\n}\n\n.hds-hero__image {\n display: block;\n width: 100%;\n}\n\n.hds-hero__koros-and-image-container {\n display: block;\n position: relative;\n}\n\n.hds-hero__image-below-koros {\n display: block;\n}\n\n.hds-hero__image-below-koros .hds-hero__image {\n height: 100%;\n -o-object-fit: cover;\n object-fit: cover;\n -o-object-position: var(--image-position);\n object-position: var(--image-position);\n}\n\n.hds-hero--with-background__container {\n position: relative;\n}\n\n.hds-hero--with-background__background {\n position: relative;\n width: 100%;\n}\n\n.hds-hero--with-background__background .hds-hero__image {\n height: 100%;\n -o-object-fit: cover;\n object-fit: cover;\n -o-object-position: var(--image-position);\n object-position: var(--image-position);\n}\n\n.hds-hero--with-background__content-columns {\n display: flex;\n margin: 0 auto;\n max-width: var(--container-width-xl);\n}\n\n.hds-hero--with-background__empty-column {\n display: none;\n}\n\n.hds-hero--background-image .hds-hero__content {\n padding: 0;\n}\n\n.hds-hero--background-image .hds-hero__card {\n background-color: var(--background-color);\n padding: var(--padding-vertical) var(--padding-horizontal);\n}\n\n.hds-hero--background-image__koros {\n bottom: 0;\n height: var(--koros-height);\n overflow: hidden;\n position: absolute;\n width: 100%;\n\n --koros-color: var(--top-koros-color);\n}\n\n.hds-hero--diagonal-koros .hds-hero--with-background__container {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n position: relative;\n z-index: 1;\n}\n\n.hds-hero--diagonal-koros .hds-hero__content {\n box-sizing: border-box;\n display: block;\n padding: 0;\n width: 100%;\n z-index: 2;\n}\n\n.hds-hero--diagonal-koros .hds-hero__card {\n background-color: var(--background-color);\n padding: var(--padding-vertical) var(--padding-horizontal);\n}\n\n.hds-hero--diagonal-koros__koros-and-background {\n height: var(--koros-height);\n position: absolute;\n transform: rotate(180deg);\n width: 100%;\n}\n\n.hds-hero--diagonal-koros__koros-aligner {\n position: relative;\n z-index: 1;\n}\n\n.hds-hero--diagonal-koros__koros-and-background .hds-hero__koros-container {\n height: 100%;\n overflow: hidden;\n position: absolute;\n top: 0;\n width: 100%;\n}\n\n.hds-hero--with-background__background,\n.hds-hero__image-below-koros {\n height: 300px;\n}\n\n@media only screen and (min-width: 768px) {\n .hds-hero {\n --padding-horizontal: var(--horizontal-padding-medium);\n --padding-vertical: var(--spacing-layout-m);\n }\n\n .hds-hero--with-background__background,\n .hds-hero__image-below-koros {\n height: 400px;\n }\n}\n\n@media only screen and (min-width: 992px) {\n .hds-hero {\n --padding-horizontal: var(--horizontal-padding-large);\n --padding-vertical: var(--spacing-layout-xl);\n }\n\n .hds-hero__text {\n font-size: var(--fontsize-body-xl);\n }\n\n .hds-hero--image-left .hds-hero__image-below-koros,\n .hds-hero--image-right .hds-hero__image-below-koros {\n display: none;\n }\n\n .hds-hero__content--two-columns {\n flex-direction: row;\n }\n\n .hds-hero__content--two-columns > * {\n width: 50%;\n }\n\n .hds-hero__content--two-columns > *:first-child {\n margin-right: var(--spacing-xl);\n }\n\n .hds-hero__content--two-columns > *:last-child {\n margin-left: var(--spacing-xl);\n }\n\n .hds-hero__content--two-columns__image-container {\n display: block;\n }\n\n .hds-hero--background-image .hds-hero--with-background__container {\n padding: var(--padding-vertical) var(--padding-horizontal);\n }\n\n .hds-hero--background-image .hds-hero__content {\n --padding-vertical: var(--spacing-2-xl);\n\n display: flex;\n flex-direction: row;\n margin: 0 auto;\n max-width: var(--container-width-xl);\n }\n\n .hds-hero--background-image .hds-hero__card {\n width: 50%;\n }\n\n .hds-hero--with-background__background {\n height: auto;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n position: absolute;\n width: auto;\n z-index: -1;\n }\n\n .hds-hero--with-background__empty-column {\n display: block;\n width: 45%;\n }\n\n .hds-hero--diagonal-koros .hds-hero__content {\n background-color: transparent;\n padding: var(--padding-vertical) 0;\n }\n\n .hds-hero--diagonal-koros .hds-hero__card {\n background: none;\n padding: 0 var(--padding-horizontal);\n width: 55%;\n }\n\n .hds-hero--diagonal-koros__koros-aligner {\n bottom: 0;\n max-width: var(--container-width-xl);\n position: absolute;\n right: var(--diagonal-koros-position);\n top: 0;\n width: 100%;\n z-index: 1;\n }\n\n .hds-hero--diagonal-koros__koros-and-background {\n display: block;\n height: 100%;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n overflow: visible;\n position: absolute;\n transform: rotate(135deg);\n transform-origin: center;\n width: 150%;\n }\n\n .hds-hero--diagonal-koros__koros-and-background:after {\n background-color: var(--koros-color);\n content: '';\n display: block;\n height: 1500px;\n left: 0;\n position: absolute;\n top: 50px;\n width: 150%;\n }\n\n .hds-hero--diagonal-koros__koros-and-background .hds-hero__koros-container {\n height: 100%;\n overflow: hidden;\n position: absolute;\n top: 0;\n width: 100%;\n z-index: 1;\n }\n\n .hds-hero--background-image__koros {\n --koros-color: var(--bottom-koros-color);\n }\n}\n\n@media only screen and (min-width: 1248px) {\n .hds-hero {\n --padding-horizontal: var(--horizontal-padding-x-large);\n }\n\n .hds-hero__title {\n font-size: var(--fontsize-heading-xxl);\n letter-spacing: -1.2px;\n }\n\n .hds-hero--diagonal-koros .hds-hero__text {\n padding-right: var(--spacing-l);\n }\n\n .hds-hero__content--two-columns > *:first-child {\n margin-right: var(--spacing-2-xl);\n }\n\n .hds-hero__content--two-columns > *:last-child {\n margin-left: var(--spacing-2-xl);\n }\n}\n","@value large-up from \"../../styles/breakpoints.scss\";\n\n.hero {\n composes: hds-hero from 'hds-core/lib/components/hero/hero.css';\n}\n\n.title {\n composes: hds-hero__title from 'hds-core/lib/components/hero/hero.css';\n}\n\n.text {\n composes: hds-hero__text from 'hds-core/lib/components/hero/hero.css';\n}\n\n.container {\n composes: hds-hero__container from 'hds-core/lib/components/hero/hero.css';\n}\n\n.content {\n composes: hds-hero__content from 'hds-core/lib/components/hero/hero.css';\n}\n\n.singleColumn {\n composes: hds-hero__content--single-column from 'hds-core/lib/components/hero/hero.css';\n}\n\n.twoColumns {\n composes: hds-hero__content--two-columns from 'hds-core/lib/components/hero/hero.css';\n}\n\n.twoColumnsImageContainer {\n composes: hds-hero__content--two-columns__image-container from 'hds-core/lib/components/hero/hero.css';\n}\n\n.card {\n composes: hds-hero__card from 'hds-core/lib/components/hero/hero.css';\n}\n\n.centeredContent {\n composes: hds-hero__card--centered-content from 'hds-core/lib/components/hero/hero.css';\n}\n\n.image {\n composes: hds-hero__image from 'hds-core/lib/components/hero/hero.css';\n}\n\n.imageBelowKoros {\n composes: hds-hero__image-below-koros from 'hds-core/lib/components/hero/hero.css';\n}\n\n.withBackgroundContainer {\n composes: hds-hero--with-background__container from 'hds-core/lib/components/hero/hero.css';\n}\n\n.withBackgroundBackground {\n composes: hds-hero--with-background__background from 'hds-core/lib/components/hero/hero.css';\n}\n\n/* backgroundImage specific styles */\n\n.backgroundImage {\n composes: hds-hero--background-image from 'hds-core/lib/components/hero/hero.css';\n}\n\n.backgroundImageKoros {\n composes: hds-hero--background-image__koros from 'hds-core/lib/components/hero/hero.css';\n}\n\n/* diagonalKoros specific styles */\n\n.diagonalKoros {\n composes: hds-hero--diagonal-koros from 'hds-core/lib/components/hero/hero.css';\n}\n\n.diagonalKorosWithBackgroundContainer {\n composes: hds-hero--diagonal-koros hds-hero--with-background__container from 'hds-core/lib/components/hero/hero.css';\n}\n\n.diagonalKorosAndBackground {\n composes: hds-hero--diagonal-koros__koros-and-background from 'hds-core/lib/components/hero/hero.css';\n}\n\n.contentColums {\n composes: hds-hero--with-background__content-columns from 'hds-core/lib/components/hero/hero.css';\n}\n\n.emptyColumn {\n composes: hds-hero--with-background__empty-column from 'hds-core/lib/components/hero/hero.css';\n}\n\n/* imageLeft/Right specific styles */\n\n.imageLeft {\n composes: hds-hero--image-left from 'hds-core/lib/components/hero/hero.css';\n}\n\n.imageRight {\n composes: hds-hero--image-right from 'hds-core/lib/components/hero/hero.css';\n}\n\n.korosContainer {\n composes: hds-hero__koros-container from 'hds-core/lib/components/hero/hero.css';\n}\n\n.korosContainerInwardKoros {\n composes: hds-hero__koros-container--inward-koros from 'hds-core/lib/components/hero/hero.css';\n}\n\n.korosContainerOverflowBottom {\n composes: hds-hero__koros-container--overflow-bottom from 'hds-core/lib/components/hero/hero.css';\n}\n\n.korosAndImageContainer {\n composes: hds-hero__koros-and-image-container from 'hds-core/lib/components/hero/hero.css';\n}\n\n.korosAligner {\n composes: hds-hero--diagonal-koros__koros-aligner from 'hds-core/lib/components/hero/hero.css';\n}\n",".section {\n --section-background-plain: var(--color-white);\n --section-background-primary: var(--color-coat-of-arms);\n --section-background-secondary: var(--color-fog);\n --section-background-tertiary: var(--color-suomenlinna);\n --section-color-plain: var(--color-black-90);\n --section-color-primary: var(--color-white);\n --section-color-secondary: var(--color-black-90);\n --section-color-tertiary: var(--color-white);\n\n position: relative;\n}\n\n.section.withKoros {\n padding: 2em 0;\n z-index: 1;\n}\n\n.section:not(.withKoros) {\n padding: 4em 0;\n}\n\n.content {\n margin: 0 auto;\n max-width: 72em;\n padding: var(--spacing-layout-s) var(--spacing-layout-xl);\n position: relative;\n z-index: 1;\n}\n\n.section.plain {\n background-color: var(--section-background-plain);\n color: var(--section-color-plain);\n}\n\n.section.primary {\n background-color: var(--section-background-primary);\n color: var(--section-color-primary);\n}\n\n.section.secondary {\n background-color: var(--section-background-secondary);\n color: var(--section-color-secondary);\n}\n\n.section.tertiary {\n background-color: var(--section-background-tertiary);\n color: var(--section-color-tertiary);\n}\n\n.koros {\n position: absolute;\n}\n\n.section.plain .koros {\n fill: var(--section-background-plain);\n}\n\n.section.primary .koros {\n fill: var(--section-background-primary);\n}\n\n.section.secondary .koros {\n fill: var(--section-background-secondary);\n}\n\n.section.tertiary .koros {\n fill: var(--section-background-tertiary);\n}\n\n.koros.basic.topKoros {\n top: -1em;\n}\n\n.koros.beat.topKoros {\n top: -4.5em;\n}\n\n.koros.pulse.topKoros {\n top: -2.2em;\n}\n\n.koros.wave.topKoros {\n top: -2.3em;\n}\n\n.koros.vibration.topKoros {\n top: -3.4em;\n}\n\n.koros.basic.bottomKoros {\n bottom: -1em;\n}\n\n.koros.beat.bottomKoros {\n bottom: -4.5em;\n}\n\n.koros.pulse.bottomKoros {\n bottom: -2.2em;\n}\n\n.koros.wave.bottomKoros {\n bottom: -2.3em;\n}\n\n.koros.vibration.bottomKoros {\n bottom: -3.4em;\n}\n\n@media all and (max-width: 768px) {\n .content {\n padding: 0.5em 1em;\n }\n}\n","/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--breakpoint-xs:320px;--breakpoint-s:576px;--breakpoint-m:768px;--breakpoint-l:992px;--breakpoint-xl:1248px;--container-width-xs:288px;--container-width-s:544px;--container-width-m:720px;--container-width-l:944px;--container-width-xl:1200px;--color-brick:#bd2719;--color-brick-light:#ffeeed;--color-brick-medium-light:#facbc8;--color-brick-dark:#800e04;--color-bus:#0000bf;--color-bus-light:#f0f0ff;--color-bus-medium-light:#ccf;--color-bus-dark:#00005e;--color-coat-of-arms:#0072c6;--color-coat-of-arms-light:#e6f4ff;--color-coat-of-arms-medium-light:#b5daf7;--color-coat-of-arms-dark:#005799;--color-copper:#00d7a7;--color-copper-light:#cffaf1;--color-copper-medium-light:#9ef0de;--color-copper-dark:#00a17d;--color-engel:#ffe977;--color-engel-light:#fff9db;--color-engel-medium-light:#fff3b8;--color-engel-dark:#dbc030;--color-fog:#9fc9eb;--color-fog-light:#e8f3fc;--color-fog-medium-light:#d0e6f7;--color-fog-dark:#72a5cf;--color-gold:#c2a251;--color-gold-light:#f7f2e4;--color-gold-medium-light:#e8d7a7;--color-gold-dark:#9e823c;--color-metro:#fd4f00;--color-metro-light:#ffeee6;--color-metro-medium-light:#ffcab3;--color-metro-dark:#bd2f00;--color-silver:#dedfe1;--color-silver-light:#f7f7f8;--color-silver-medium-light:#efeff0;--color-silver-dark:#b0b8bf;--color-summer:#ffc61e;--color-summer-light:#fff4d4;--color-summer-medium-light:#ffe49c;--color-summer-dark:#cc9200;--color-suomenlinna:#f5a3c7;--color-suomenlinna-light:#fff0f7;--color-suomenlinna-medium-light:#ffdbeb;--color-suomenlinna-dark:#e673a5;--color-tram:#008741;--color-tram-light:#dff7eb;--color-tram-medium-light:#a3e3c2;--color-tram-dark:#006631;--color-focus-outline:#0072c6;--color-black:#000;--color-white:#fff;--color-black-5:#f2f2f2;--color-black-10:#e6e6e6;--color-black-20:#ccc;--color-black-30:#b3b3b3;--color-black-40:#999;--color-black-50:grey;--color-black-60:#666;--color-black-70:#4d4d4d;--color-black-80:#333;--color-black-90:#1a1a1a;--color-error:#b01038;--color-error-light:#f6e2e6;--color-error-dark:#8d0d2d;--color-success:#007a64;--color-success-light:#e2f5f3;--color-success-dark:#006250;--color-alert:#ffda07;--color-alert-light:#fff4b4;--color-alert-dark:#d18200;--color-info:#0062b9;--color-info-light:#e5eff8;--color-info-dark:#004f94;--box-shadow-s:0px 2px 10px 0px rgba(0,0,0,0.07);--box-shadow-m:0px 2px 10px 0px rgba(0,0,0,0.1);--box-shadow-l:0px 2px 20px 0px rgba(0,0,0,0.2);--spacing-layout-2-xs:1rem;--spacing-layout-xs:1.5rem;--spacing-layout-s:2rem;--spacing-layout-m:3rem;--spacing-layout-l:4rem;--spacing-layout-xl:6rem;--spacing-layout-2-xl:8rem;--spacing-4-xs:0.125rem;--spacing-3-xs:0.25rem;--spacing-2-xs:0.5rem;--spacing-xs:0.75rem;--spacing-s:1rem;--spacing-m:1.5rem;--spacing-l:2rem;--spacing-xl:2.5rem;--spacing-2-xl:3.0rem;--spacing-3-xl:3.5rem;--spacing-4-xl:4rem;--spacing-5-xl:4.5rem;--fontsize-heading-xxl:4rem;--fontsize-heading-xl:3rem;--fontsize-heading-xl-mobile:2.5rem;--fontsize-heading-l:2rem;--fontsize-heading-m:1.5rem;--fontsize-heading-s:1.25rem;--fontsize-heading-xs:1.125rem;--fontsize-heading-xxs:1rem;--fontsize-body-s:0.875rem;--fontsize-body-m:1rem;--fontsize-body-l:1.125rem;--fontsize-body-xl:1.25rem;--font-default:HelsinkiGrotesk,Arial,sans-serif;--lineheight-s:1;--lineheight-m:1.2;--lineheight-l:1.5;--lineheight-xl:1.75}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.visually-hidden{border:0;clip:\"rect(0 0 0 0)\";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.button-reset{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.text-body{color:var(--color-black-90);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.text-body,.text-medium{font-family:var(--font-default)}.text-medium{font-weight:500}.text-bold{font-family:var(--font-default);font-weight:700}.text-xl{font-size:var(--fontsize-heading-m)}.text-lg{font-size:var(--fontsize-heading-s)}.text-md{font-size:var(--fontsize-heading-xs)}.subtitle{font-size:var(--fontsize-body-m)}.text-sm{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.heading-xxl{font-size:var(--fontsize-heading-xxl);letter-spacing:-1.2px}.heading-xl,.heading-xxl{font-weight:400;line-height:var(--lineheight-s)}.heading-xl{font-size:var(--fontsize-heading-xl);letter-spacing:-1px}.heading-xl-mobile{font-size:var(--fontsize-heading-xl-mobile);letter-spacing:-.8px}.heading-l,.heading-xl-mobile{font-weight:400;line-height:var(--lineheight-s)}.heading-l{font-size:var(--fontsize-heading-l);letter-spacing:-.4px}.heading-m{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px;line-height:32px}.heading-s{font-size:var(--fontsize-heading-s);font-weight:500;letter-spacing:.2px;line-height:1.4}.heading-xs{font-size:var(--fontsize-heading-xs);line-height:1.33}.heading-xs,.heading-xxs{font-weight:700;letter-spacing:.4px}.heading-xxs{font-size:var(--fontsize-heading-xxs);line-height:var(--lineheight-l)}.helper-text{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}",".hds-highlight {\n --accent-line-color: var(--color-bus);\n --text-color: var(--color-black-90);\n --size-width-s: 264px;\n --size-width-m: 536px;\n --size-width-l: 680px;\n --width: var(--size-width-m);\n --margin: var(--spacing-m) 0;\n\n border-left: 8px solid var(--accent-line-color);\n color: var(--text-color);\n display: flex;\n flex-direction: column; \n justify-content: center;\n margin: var(--margin);\n max-width: 100%;\n padding: 0;\n padding-left: var(--spacing-s);\n grid-row-gap: var(--spacing-m);\n row-gap: var(--spacing-m);\n width: var(--width);\n}\n\n.hds-blockquote {\n margin: 0;\n padding: 0;\n}\n\n.hds-highlight__text {\n color: var(--text-color);\n font-size: var(--fontsize-heading-m);\n line-height: var(--lineheight-m);\n margin: 0;\n padding: 0;\n}\n\n.hds-highlight--small {\n --margin: var(--spacing-s) 0;\n --width: var(--size-width-s);\n}\n\n.hds-highlight--large {\n --margin: var(--spacing-l) 0;\n --width: var(--size-width-l);\n}\n\n.hds-highlight--large .hds-highlight__text {\n font-size: var(--fontsize-heading-l);\n line-height: var(--lineheight-l);\n}\n\n.hds-highlight__quote:before,\n.hds-highlight__quote:after {\n content: '\"';\n display: inline; \n}\n\n.hds-highlight__reference {\n font-size: var(--fontsize-heading-xs);\n line-height: var(--lineheight-m);\n}",".highlight {\n composes: hds-highlight from 'hds-core/lib/components/highlight/highlight.css';\n}\n\n.highlightBlockquote {\n composes: hds-blockquote from 'hds-core/lib/components/highlight/highlight.css';\n}\n\n.text {\n composes: hds-highlight__text from 'hds-core/lib/components/highlight/highlight.css';\n}\n\n.size-s {\n composes: hds-highlight--small from 'hds-core/lib/components/highlight/highlight.css';\n}\n\n.size-l {\n composes: hds-highlight--large from 'hds-core/lib/components/highlight/highlight.css';\n}\n\n.quote {\n composes: hds-highlight__quote from 'hds-core/lib/components/highlight/highlight.css';\n}\n\n.reference {\n composes: hds-highlight__reference from 'hds-core/lib/components/highlight/highlight.css';\n}\n",".wrapper {\n --card-background-primary: var(--color-coat-of-arms);\n --card-background-secondary: var(--color-fog);\n --card-background-tertiary: var(--color-suomenlinna);\n --card-color-primary: var(--color-white);\n --card-color-secondary: var(--color-black-90);\n --card-color-tertiary: var(--color-white);\n\n height: 34.375em;\n margin: 0 auto;\n top: 0;\n width: 72em;\n}\n\n.image {\n background-position: 50% 50%;\n background-size: cover;\n height: 100%;\n width: 100%;\n}\n\n.cardContainer {\n height: 100%;\n margin: 0 auto;\n max-width: 72em;\n padding: 3.625em;\n position: relative;\n top: -100%;\n}\n\n.card {\n background: white;\n composes: text-body from 'hds-core/lib/utils/helpers.css';\n min-height: 100%;\n padding: 1em 3em;\n width: 45%;\n}\n\n.rightAlignment .card {\n margin-left: auto;\n margin-right: 0;\n}\n\n.leftAlignment .image {\n margin-left: auto;\n margin-right: 0;\n}\n\n/* SPLIT LAYOUT */\n\n.splitLayout {\n height: 40.625em;\n}\n\n.splitLayout .cardContainer {\n padding: 0;\n}\n\n@media all and (min-width: 769px) {\n .splitLayout .image {\n width: 57.5%;\n }\n\n .splitLayout .card {\n width: 42.5%;\n }\n}\n\n/* HOVER LAYOUT */\n\n.hoverLayout .cardContainer {\n padding-left: 0;\n padding-right: 0;\n}\n\n@media all and (min-width: 769px) {\n .hoverLayout .image {\n width: 70%;\n }\n\n .hoverLayout .card {\n width: 38.5%;\n }\n}\n\n/* FULL WIDTH */\n\n.fullWidth:not(.splitLayout) .image,\n.fullWidth {\n width: 100%;\n}\n\n/* COLOR THEMES */\n\n.fullWidth.primary,\n.primary .card {\n background-color: var(--card-background-primary);\n color: var(--card-color-primary);\n}\n\n.fullWidth.secondary,\n.secondary .card {\n background-color: var(--card-background-secondary);\n color: var(--card-color-secondary);\n}\n\n.fullWidth.tertiary,\n.tertiary .card {\n background-color: var(--card-background-tertiary);\n color: var(--card-color-tertiary);\n}\n\n/* SMALL SCREEN DEFAULT & SPLIT */\n\n@media all and (max-width: 768px) {\n .wrapper {\n height: auto;\n width: auto;\n }\n\n .wrapper.fullWidth {\n background: none;\n }\n\n .image {\n height: 26.25em;\n width: auto;\n }\n\n .cardContainer {\n height: auto;\n margin: -4.625em 1em 0;\n padding: 0;\n width: auto;\n }\n\n .card {\n padding: 1em;\n width: auto;\n }\n}\n\n/* SMALL SCREEN HOVER */\n\n@media all and (max-width: 768px) {\n .hoverLayout.leftAlignment .image {\n margin-left: 2.5em;\n }\n\n .hoverLayout.leftAlignment .card {\n margin-right: 2.25em;\n }\n\n .hoverLayout.rightAlignment .image {\n margin-right: 2.5em;\n }\n\n .hoverLayout.rightAlignment .card {\n margin-left: 2.25em;\n }\n\n .hoverLayout .cardContainer {\n margin: -2.875em 0 0;\n }\n}\n",".linkbox {\n cursor: pointer;\n position: relative;\n\n &:focus-within {\n outline: var(--color-coat-of-arms) 3px solid;\n }\n}\n\n.withBackground {\n background-color: var(--color-white);\n}\n\n.withoutBackground {\n background: transparent;\n padding-bottom: var(--spacing-2-xl) !important;\n padding-left: 0 !important;\n padding-right: 0 !important;\n}\n\n.paddingWithoutImageAndWithBackground {\n padding-top: var(--spacing-m);\n}\n\n.paddingWithoutImageAndWithoutBackground {\n padding: 0;\n}\n\n.withSmallImage {\n padding-top: var(--spacing-s);\n}\n\n.withMediumImage {\n padding-top: var(--spacing-s);\n}\n\n.withLargeImage {\n padding-top: var(--spacing-m);\n}\n\n.contentSmall {\n padding-bottom: var(--spacing-4-xl);\n padding-left: var(--spacing-s);\n padding-right: var(--spacing-s);\n}\n\n.contentMedium {\n padding-bottom: var(--spacing-4-xl);\n padding-left: var(--spacing-s);\n padding-right: var(--spacing-s);\n}\n\n.contentLarge {\n padding-bottom: var(--spacing-5-xl);\n padding-left: var(--spacing-m);\n padding-right: var(--spacing-m);\n}\n\n.icon {\n bottom: var(--spacing-s);\n left: var(--spacing-s);\n position: absolute;\n vertical-align: bottom;\n}\n\n.border {\n border: solid 2px var(--color-black-90);\n\n &:focus-within {\n border: var(--color-black-90) 2px solid !important;\n outline: var(--color-coat-of-arms) 3px solid;\n }\n\n .contentSmall {\n padding-bottom: 62px;\n padding-left: 14px;\n padding-right: 14px;\n }\n\n .contentMedium {\n padding-bottom: 62px;\n padding-left: 14px;\n padding-right: 14px;\n }\n\n .contentLarge {\n padding-bottom: 70px;\n padding-left: 22px;\n padding-right: 22px;\n }\n\n .icon {\n bottom: 14px;\n left: 14px;\n }\n\n .paddingWithoutImageAndWithBackground {\n padding-top: 22px;\n }\n}\n\n.text {\n color: var(--color-black-90);\n font-family: var(--font-default);\n font-size: var(--fontsize-body-m);\n line-height: var(--lineheight-l);\n margin-bottom: var(--spacing-s);\n margin-top: var(--spacing-2-xs);\n}\n\n.contentLarge .text {\n margin-bottom: var(--spacing-m);\n}\n\n.headingSmall {\n composes: heading-s from 'hds-core/lib/utils/helpers.css';\n padding-bottom: 0;\n}\n\n.headingMedium {\n composes: heading-m from 'hds-core/lib/utils/helpers.css';\n}\n\n.headingLarge {\n composes: heading-l from 'hds-core/lib/utils/helpers.css';\n padding-bottom: var(--spacing-2-xs);\n}\n\n.link {\n color: var(--color-black-90);\n display: inline-block;\n height:100%;\n left: 0;\n line-height: var(--lineheight-l);\n position: absolute;\n top: 0;\n width: 100%;\n \n &:focus {\n border: none;\n outline: none;\n }\n}\n\n.iconWhenNoBackground {\n bottom: 0;\n left: 0;\n}\n\n.iconPositionForLinkboxLargeVariant {\n bottom: 22px;\n left: 22px;\n}\n\n.image {\n display: block;\n height: auto;\n object-fit: contain;\n width: 100%;\n}\n",".numberInputContainer {\n /* Chrome, Safari, Edge, Opera */\n input::-webkit-outer-spin-button,\n input::-webkit-inner-spin-button {\n /**\n * Normalize.css rule\n * Correct the cursor style of increment and decrement buttons in Chrome.\n */\n appearance: none !important;\n height: auto; \n margin: 0 !important;\n }\n\n /* Firefox */\n input[type=\"number\"] {\n appearance: textfield !important;\n }\n\n width: 100%;\n}\n\n.numberInputWithSteps {\n padding-left: 68px !important;\n padding-right: 68px !important;\n text-align: center;\n}\n\n@mixin stepButton {\n align-items: center;\n bottom: 0;\n display: flex;\n font-size: 1rem;\n justify-content: center;\n margin: 2px;\n position: absolute;\n top: 0;\n width: 52px;\n z-index: 1;\n}\n\n.minusButtonWrapper {\n @include stepButton;\n\n border-right: solid 1px #ccc;\n left: 0;\n}\n\n.minusButtonWrapperWithoutBorder {\n @include stepButton;\n\n left: 0;\n}\n\n.plusButtonWrapper {\n @include stepButton;\n\n border-left: solid 1px #ccc;\n right: 0;\n}\n\n.plusButtonWrapperWithoutBorder {\n @include stepButton;\n\n right: 0;\n}\n\n.button {\n align-items: center;\n appearance: none;\n background: transparent;\n border: 0;\n cursor: pointer;\n display: flex;\n font-size: 1rem;\n height: 100%;\n justify-content: center;\n overflow: hidden;\n padding: 0;\n width: 100%;\n\n &:disabled {\n cursor: not-allowed;\n }\n\n &:focus {\n outline: 3px solid var(--focus-outline-color);\n outline-offset: -5px;\n }\n}\n",".hds-button {\n --border-width: 2px;\n --color: inherit;\n --min-size: 44px;\n --outline-gutter: 2px;\n --outline-width: 3px;\n\n align-content: flex-start;\n align-items: center;\n\n /*\n * Normalize.css rules\n * Correct the inability to style clickable types in iOS and Safari.\n */\n -webkit-appearance: button;\n background-color: var(--background-color, transparent);\n border: var(--border-width) solid var(--border-color, transparent);\n border-radius: 0;\n color: var(--color);\n cursor: pointer;\n display: inline-flex;\n\n /*\n * Normalize.css rules\n * 1. Change the font styles in all browsers.\n */\n font-family: inherit; /* 1 */\n font-size: 100%; /* 1 */\n font-weight: 500;\n justify-content: center;\n\n /*\n * Normalize.css rules\n * 1. Change the font styles in all browsers.\n * 2. Remove the margin in Firefox and Safari.\n */\n line-height: 1.15; /* 1 */\n margin: 0; /* 2 */\n min-height: var(--min-size);\n min-width: var(--min-size);\n padding: 0 var(--spacing-2-xs);\n position: relative;\n text-decoration: none;\n\n /*\n * Normalize.css rule\n * Remove the inheritance of text transform in Edge, Firefox, and IE.\n */\n text-transform: none;\n vertical-align: top;\n}\n\n.hds-button,\n.hds-button:before,\n.hds-button:after,\n.hds-button *,\n.hds-button *:before,\n.hds-button *:after {\n box-sizing: border-box;\n}\n\n/*\n * Normalize.css rules\n * Correct the inability to style clickable types in iOS and Safari.\n */\n\n.hds-button[type=\"button\"], .hds-button[type=\"reset\"], .hds-button[type=\"submit\"] {\n -webkit-appearance: button;\n}\n\n/*\n * Normalize.css rules\n * Remove the inner border and padding in Firefox.\n */\n\n.hds-button::-moz-focus-inner, .hds-button[type=\"button\"]::-moz-focus-inner, .hds-button[type=\"reset\"]::-moz-focus-inner, .hds-button[type=\"submit\"]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\n/*\n * Normalize.css rules\n * Restore the focus styles unset by the previous rule.\n */\n\n.hds-button:-moz-focusring, .hds-button[type=\"button\"]:-moz-focusring, .hds-button[type=\"reset\"]:-moz-focusring, .hds-button[type=\"submit\"]:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\n/* button transitions */\n\n.hds-button:hover,\n.hds-button.focus-visible {\n transition-duration: 85ms;\n transition-property: background-color, border-color, color;\n transition-timing-function: ease-out;\n}\n\n.hds-button:hover,\n.hds-button:focus-visible {\n transition-duration: 85ms;\n transition-property: background-color, border-color, color;\n transition-timing-function: ease-out;\n}\n\n.hds-button:hover {\n background-color: var(--background-color-hover, transparent);\n color: var(--color-hover);\n}\n\n.hds-button.focus-visible {\n background-color: var(--background-color-focus, transparent);\n color: var(--color-focus);\n outline: none;\n}\n\n.hds-button:focus-visible {\n background-color: var(--background-color-focus, transparent);\n color: var(--color-focus);\n outline: none;\n}\n\n.hds-button:active {\n background-color: var(--background-color-focus, transparent);\n color: var(--color-focus);\n outline: none;\n}\n\n.hds-button:not(:disabled) {\n border-color: var(--border-color, transparent);\n}\n\n.hds-button:disabled {\n background-color: var(--background-color-disabled, transparent);\n border-color: var(--border-color-disabled, transparent);\n color: var(--color-disabled);\n cursor: not-allowed;\n}\n\n.hds-button.focus-visible:hover {\n background-color: var(--background-color-hover-focus, transparent);\n}\n\n.hds-button:focus-visible:hover {\n background-color: var(--background-color-hover-focus, transparent);\n}\n\n.hds-button:active:hover {\n background-color: var(--background-color-hover-focus, transparent);\n}\n\n.hds-button:not(:disabled):hover {\n border-color: var(--border-color-hover, transparent);\n}\n\n.hds-button:not(:disabled).focus-visible {\n border-color: var(--border-color-focus, transparent);\n}\n\n.hds-button:not(:disabled):focus-visible {\n border-color: var(--border-color-focus, transparent);\n}\n\n.hds-button:not(:disabled):active {\n border-color: var(--border-color-focus, transparent);\n}\n\n.hds-button:not(:disabled).focus-visible:hover {\n border-color: var(--border-color-hover-focus, transparent);\n color: var(--color-hover-focus);\n}\n\n.hds-button:not(:disabled):focus-visible:hover {\n border-color: var(--border-color-hover-focus, transparent);\n color: var(--color-hover-focus);\n}\n\n.hds-button:not(:disabled):active:hover {\n border-color: var(--border-color-hover-focus, transparent);\n color: var(--color-hover-focus);\n}\n\n/* FOCUS OUTLINE */\n\n.hds-button:after {\n --size: 100%;\n\n border: var(--outline-width) solid transparent;\n content: '';\n height: var(--size);\n position: absolute;\n width: var(--size);\n}\n\n.hds-button.focus-visible:after {\n --size: calc(100% + calc(var(--outline-width) * 2 + var(--border-width) * 2 + var(--outline-gutter) * 2));\n\n border-color: var(--focus-outline-color);\n}\n\n.hds-button:focus-visible:after {\n --size: calc(100% + calc(var(--outline-width) * 2 + var(--border-width) * 2 + var(--outline-gutter) * 2));\n\n border-color: var(--focus-outline-color);\n}\n\n.hds-button:active:after {\n --size: calc(100% + calc(var(--outline-width) * 2 + var(--border-width) * 2 + var(--outline-gutter) * 2));\n\n border-color: var(--focus-outline-color);\n}\n\ninput[type=\"submit\"].hds-button,\n.hds-button__label {\n font-weight: inherit;\n line-height: 1.25em;\n padding: var(--spacing-s);\n}\n\ninput[type=\"submit\"].hds-button {\n cursor: pointer;\n padding: var(--spacing-s) var(--spacing-l);\n}\n\n/* submit input */\n\ninput[type=\"submit\"].hds-button.focus-visible {\n box-shadow: 0 0 0 var(--outline-gutter) var(--submit-input-focus-gutter-color), 0 0 0 calc(var(--outline-gutter) + var(--outline-width)) var(--focus-outline-color);\n}\n\ninput[type=\"submit\"].hds-button:focus-visible {\n box-shadow: 0 0 0 var(--outline-gutter) var(--submit-input-focus-gutter-color), 0 0 0 calc(var(--outline-gutter) + var(--outline-width)) var(--focus-outline-color);\n}\n\n/* no icons */\n\n.hds-button__label:only-child {\n margin: 0 var(--spacing-2-xs);\n}\n\ninput[type=\"submit\"].hds-button--small,\n.hds-button--small .hds-button__label {\n line-height: var(--lineheight-s);\n padding: var(--spacing-2-xs) var(--spacing-xs);\n}\n\n/* supplementary with right icon */\n\n.hds-button--supplementary .hds-button__label:first-child {\n padding-right: var(--spacing-2-xs);\n}\n\n/* no icons */\n\n.hds-button--small .hds-button__label:only-child {\n margin: 0 var(--spacing-xs);\n}\n\n/* supplementary with left icon */\n\n.hds-button--supplementary .hds-icon + .hds-button__label:last-child {\n padding-left: var(--spacing-2-xs);\n}\n\n/* supplementary with both icons */\n\n.hds-button--supplementary .hds-icon + .hds-button__label:not(:last-child) {\n padding-left: var(--spacing-2-xs);\n padding-right: var(--spacing-2-xs);\n}\n\n/* SMALL */\n\n.hds-button--small {\n padding: 0;\n}\n\ninput[type=\"submit\"].hds-button--small {\n padding: var(--spacing-2-xs) var(--spacing-m);\n}\n\n/* both icons */\n\n.hds-button--small .hds-button__label:not(:first-of-type):not(:last-of-type) {\n padding: var(--spacing-2-xs) var(--spacing-2-xs);\n}\n\n/* FULL WIDTH */\n\n.hds-button--fullwidth {\n width: 100%;\n}\n\n/* ICONS */\n\n/* left */\n\n.hds-button .hds-icon {\n height: var(--spacing-m);\n margin-left: var(--spacing-s);\n width: var(--spacing-m);\n}\n\n/* right */\n\n.hds-button__label ~ .hds-icon {\n margin: 0 var(--spacing-s) 0 0;\n}\n\n/* left - small */\n\n.hds-button--small .hds-icon {\n margin-left: var(--spacing-2-xs);\n}\n\n/* right - small */\n\n.hds-button .hds-button--small .hds-button__label ~ .hds-icon {\n margin: 0 var(--spacing-2-xs) 0 0;\n}\n\n/* both icons - left */\n\n.hds-button .hds-icon:first-of-type:not(:last-of-type) {\n margin: 0 0 0 var(--spacing-2-xs);\n}\n\n/* both icons - right */\n\n.hds-button .hds-icon:last-of-type:not(:first-of-type) {\n margin: 0 var(--spacing-2-xs) 0 0;\n}\n\n/* both icons - left - small */\n\n.hds-button--small .hds-icon:first-child:not(:last-of-type) {\n margin: 0 0 0 var(--spacing-2-xs);\n}\n\n/* both icons - right - small */\n\n.hds-button--small .hds-icon:last-child:not(:first-of-type) {\n margin: 0 var(--spacing-2-xs) 0 0;\n}\n\n/* PRIMARY */\n\n/* default (bus) */\n\n.hds-button--primary {\n --background-color: var(--color-bus);\n --background-color-hover: var(--color-bus-dark);\n --background-color-focus: var(--color-bus);\n --background-color-hover-focus: var(--color-bus-dark);\n --background-color-disabled: var(--color-black-20);\n --border-color: var(--color-bus);\n --border-color-hover: var(--color-bus-dark);\n --border-color-focus: var(--color-bus);\n --border-color-hover-focus: var(--color-bus-dark);\n --border-color-disabled: var(--color-black-20);\n --color: var(--color-white);\n --color-hover: var(--color-white);\n --color-focus: var(--color-white);\n --color-hover-focus: var(--color-white);\n --color-disabled: var(--color-white);\n --focus-outline-color: var(--color-focus-outline);\n --submit-input-focus-gutter-color: var(--color-white);\n}\n\n/* SECONDARY */\n\n/* default (bus) */\n\n.hds-button--secondary {\n --background-color: transparent;\n --background-color-hover: var(--color-bus-light);\n --background-color-focus: transparent;\n --background-color-hover-focus: var(--color-bus-light);\n --background-color-disabled: transparent;\n --border-color: var(--color-bus);\n --border-color-hover: var(--color-bus-dark);\n --border-color-focus: var(--color-bus);\n --border-color-hover-focus: var(--color-bus-dark);\n --border-color-disabled: var(--color-black-50);\n --color: var(--color-bus);\n --color-hover: var(--color-bus-dark);\n --color-focus: var(--color-bus);\n --color-hover-focus: var(--color-bus-dark);\n --color-disabled: var(--color-black-40);\n --focus-outline-color: var(--color-focus-outline);\n --submit-input-focus-gutter-color: var(--color-white);\n}\n\n/* SUPPLEMENTARY */\n\n.hds-button--supplementary {\n --background-color: transparent;\n --background-color-hover: var(--color-bus-light);\n --background-color-focus: transparent;\n --background-color-hover-focus: var(--color-bus-light);\n --background-color-disabled: transparent;\n --border-color: transparent;\n --border-color-hover: transparent;\n --border-color-focus: var(--color-focus-outline);\n --border-color-hover-focus: var(--color-focus-outline);\n --border-color-disabled: transparent;\n --color: var(--color-bus);\n --color-hover: var(--color-bus-dark);\n --color-focus: var(--color-bus);\n --color-hover-focus: var(--color-bus-dark);\n --color-disabled: var(--color-black-40);\n --focus-outline-color: transparent;\n --submit-input-focus-gutter-color: transparent;\n}\n\n/* LOADING */\n\n.hds-button--loading {\n --background-color: transparent;\n --background-color-hover: transparent;\n --background-color-focus: transparent;\n --background-color-hover-focus: transparent;\n --background-color-disabled: transparent;\n --border-color: transparent;\n --border-color-hover: transparent;\n --border-color-focus: transparent;\n --border-color-hover-focus: transparent;\n --border-color-disabled: transparent;\n --color: var(--color-black-90);\n --color-hover: var(--color-black-90);\n --color-focus: var(--color-black-90);\n --color-hover-focus: var(--color-black-90);\n --color-disabled: var(--color-black-90);\n\n cursor: wait;\n}\n\n/* UTILITY */\n\n/* success */\n\n.hds-button--success {\n --background-color: var(--color-success);\n --background-color-hover: var(--color-success-dark);\n --background-color-focus: var(--color-success);\n --background-color-hover-focus: var(--color-success-dark);\n --border-color: var(--color-success);\n --border-color-hover: var(--color-success-dark);\n --border-color-focus: var(--color-success);\n --border-color-hover-focus: var(--color-success-dark);\n --color: var(--color-white);\n --color-hover: var(--color-white);\n --color-focus: var(--color-white);\n --color-hover-focus: var(--color-white);\n --focus-outline-color: var(--color-focus-outline);\n}\n\n/* danger */\n\n.hds-button--danger {\n --background-color: var(--color-error);\n --background-color-hover: var(--color-error-dark);\n --background-color-focus: var(--color-error);\n --background-color-hover-focus: var(--color-error-dark);\n --border-color: var(--color-error);\n --border-color-hover: var(--color-error-dark);\n --border-color-focus: var(--color-error);\n --border-color-hover-focus: var(--color-error-dark);\n --color: var(--color-white);\n --color-hover: var(--color-white);\n --color-focus: var(--color-white);\n --color-hover-focus: var(--color-white);\n --focus-outline-color: var(--color-focus-outline);\n}\n\n/* THEMES */\n\n/* coat */\n\n.hds-button--primary.hds-button--theme-coat {\n --background-color: var(--color-coat-of-arms);\n --background-color-hover: var(--color-coat-of-arms-dark);\n --background-color-focus: var(--color-coat-of-arms);\n --background-color-hover-focus: var(--color-coat-of-arms-dark);\n --border-color: var(--color-coat-of-arms);\n --border-color-hover: var(--color-coat-of-arms-dark);\n --border-color-focus: var(--color-coat-of-arms);\n --border-color-hover-focus: var(--color-coat-of-arms-dark);\n --color: var(--color-white);\n --color-hover: var(--color-white);\n --color-focus: var(--color-white);\n --color-hover-focus: var(--color-white);\n}\n\n.hds-button--secondary.hds-button--theme-coat {\n --background-color: transparent;\n --background-color-hover: var(--color-coat-of-arms-light);\n --background-color-focus: transparent;\n --background-color-hover-focus: var(--color-coat-of-arms-light);\n --border-color: var(--color-coat-of-arms);\n --border-color-hover: var(--color-coat-of-arms-dark);\n --border-color-focus: var(--color-coat-of-arms);\n --border-color-hover-focus: var(--color-coat-of-arms-dark);\n --color: var(--color-coat-of-arms);\n --color-hover: var(--color-coat-of-arms);\n --color-focus: var(--color-coat-of-arms);\n --color-hover-focus: var(--color-coat-of-arms);\n}\n\n.hds-button--supplementary.hds-button--theme-coat {\n --background-color: transparent;\n --background-color-hover: var(--color-coat-of-arms-light);\n --background-color-focus: transparent;\n --background-color-hover-focus: var(--color-coat-of-arms-light);\n --border-color: transparent;\n --border-color-hover: transparent;\n --border-color-focus: var(--color-focus-outline);\n --border-color-hover-focus: var(--color-focus-outline);\n --color: var(--color-coat-of-arms);\n --color-hover: var(--color-coat-of-arms);\n --color-focus: var(--color-coat-of-arms);\n --color-hover-focus: var(--color-coat-of-arms);\n}\n\n/* black */\n\n.hds-button--primary.hds-button--theme-black {\n --background-color: var(--color-black);\n --background-color-hover: var(--color-black);\n --background-color-focus: var(--color-black);\n --background-color-hover-focus: var(--color-black);\n --border-color: var(--color-black);\n --border-color-hover: var(--color-black);\n --border-color-focus: var(--color-black);\n --border-color-hover-focus: var(--color-black);\n --color: var(--color-white);\n --color-hover: var(--color-white);\n --color-focus: var(--color-white);\n --color-hover-focus: var(--color-white);\n}\n\n.hds-button--secondary.hds-button--theme-black {\n --background-color: transparent;\n --background-color-hover: var(--color-black-5);\n --background-color-focus: transparent;\n --background-color-hover-focus: var(--color-black-5);\n --border-color: var(--color-black);\n --border-color-hover: var(--color-black);\n --border-color-focus: var(--color-black);\n --border-color-hover-focus: var(--color-black);\n --color: var(--color-black);\n --color-hover: var(--color-black);\n --color-focus: var(--color-black);\n --color-hover-focus: var(--color-black);\n}\n\n.hds-button--supplementary.hds-button--theme-black {\n --background-color: transparent;\n --background-color-hover: var(--color-black-5);\n --background-color-focus: transparent;\n --background-color-hover-focus: var(--color-black-5);\n --border-color: transparent;\n --border-color-hover: transparent;\n --border-color-focus: var(--color-focus-outline);\n --border-color-hover-focus: var(--color-focus-outline);\n --color: var(--color-black);\n --color-hover: var(--color-black);\n --color-focus: var(--color-black);\n --color-hover-focus: var(--color-black);\n}\n\n.hds-icon {\n --icon-size: 100%;\n\n background-color: currentcolor;\n display: inline-block;\n height: var(--icon-size);\n -webkit-mask-position: center;\n mask-position: center;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-size: auto;\n mask-size: auto;\n width: var(--icon-size);\n}\n\n.hds-icon.hds-icon--size-xs {\n --icon-size: var(--spacing-layout-2-xs);\n}\n\n.hds-icon.hds-icon--size-s {\n --icon-size: var(--spacing-layout-xs);\n}\n\n.hds-icon.hds-icon--size-m {\n --icon-size: var(--spacing-layout-s);\n}\n\n.hds-icon.hds-icon--size-l {\n --icon-size: var(--spacing-layout-m);\n}\n\n.hds-icon.hds-icon--size-xl {\n --icon-size: var(--spacing-layout-l);\n}\n\n.hds-icon--angle-right {\n -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n}\n\n.hds-icon--angle-left {\n -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n}\n\n.hds-pagination-container {\n text-align: center;\n}\n\n.hds-pagination {\n display: inline-block; /* Allows centering */\n font-size: var(--fontsize-body-m);\n font-weight: bold;\n line-height: var(--lineheight-l);\n position: relative; /* Enables position absolute for btn--next */\n transform: scaleY(-1); /* Trick for flipping the list float direction from bottom to up */\n\n --active-page-background-color: var(--color-black);\n --link-height: 40px;\n}\n\n/* Invisible, floated pseudo-element for reserving space for the hds-pagination__button-next,\nwe can not use this position for the actual button as it's in incorrect source order for tabbing */\n\n.hds-pagination:before {\n content: attr(data-next); /* Trick to keep floating element same size as btn--next */\n content: attr(data-next) / ''; /* Removes this pseudo-element from screen readers where supported */\n display: block;\n float: right; /* Floated pseudo-element wraps the inline ul around it */\n line-height: 56px;\n padding-left: 80px;\n speak: never; /* Removes this pseudo-element from screen readers where supported */\n visibility: hidden;\n}\n\n.hds-pagination .hds-pagination__button-prev {\n float: left;\n margin-right: 8px;\n transform: scaleY(-1); /* Flip the element back from upside down */\n white-space: nowrap;\n}\n\n.hds-pagination .hds-pagination__button-next {\n position: absolute;\n right: 0;\n top: 0; /* Remember that the position is flipped upside down, so this means actually bottom */\n transform: scaleY(-1); /* Flip the element back from upside down */\n white-space: nowrap;\n}\n\n.hds-pagination__pages {\n display: inline-flex; /* inline-flex allows floating it based on floated buttons when there is no more space */\n flex-wrap: wrap; /* Allow wrapping of the li-elements */\n grid-gap: var(--spacing-2-xs);\n gap: var(--spacing-2-xs);\n justify-content: center; /* Center the li-elements */\n list-style: none;\n margin-bottom: 0;\n margin-top: 8px;\n padding: 0;\n transform: scaleY(-1); /* Flip the element back from upside down */\n}\n\n.hds-pagination__item-link {\n align-items: center;\n border-radius: 21px;\n color: var(--color-black-90);\n display: flex;\n height: var(--link-height);\n justify-content: center;\n min-width: 32px;\n padding-left: var(--spacing-3-xs);\n padding-right: var(--spacing-3-xs);\n text-decoration: none;\n}\n\n.hds-pagination__item-link:hover {\n text-decoration: underline;\n}\n\n.hds-pagination__item-link:focus, .hds-pagination__item-link:active {\n outline: solid var(--color-focus-outline) 3px;\n outline-offset: 1px;\n}\n\n.hds-pagination__item-link.hds-pagination__item-link--active {\n background-color: var(--active-page-background-color);\n color: var(--color-white);\n}\n\n.hds-pagination__item-link.hds-pagination__item-link--active:hover {\n text-decoration: none;\n}\n\n.hds-pagination__item-ellipsis {\n align-items: center;\n color: var(--color-black-90);\n display: flex;\n height: var(--link-height);\n justify-content: center;\n width: 40px;\n}\n",".container {\n composes: hds-pagination-container from 'hds-core/lib/components/pagination/pagination.css';\n\n .hideNextButton {\n &:before {\n content: '';\n line-height: 0;\n padding-left: 0;\n }\n }\n}\n\n.buttonPrevious {\n composes: hds-pagination__button-prev from 'hds-core/lib/components/pagination/pagination.css';\n}\n\n.buttonNext {\n composes: hds-pagination__button-next from 'hds-core/lib/components/pagination/pagination.css';\n}\n\n.pagination {\n composes: hds-pagination from 'hds-core/lib/components/pagination/pagination.css';\n\n .buttonNext {\n div {\n margin-right: var(--spacing-2-xs);\n }\n }\n\n .buttonPrevious {\n div {\n margin-left: var(--spacing-2-xs);\n }\n }\n}\n\n.pages {\n composes: hds-pagination__pages from 'hds-core/lib/components/pagination/pagination.css';\n}\n\n.itemEllipsis {\n composes: hds-pagination__item-ellipsis from 'hds-core/lib/components/pagination/pagination.css';\n}\n\n.itemLink {\n composes: hds-pagination__item-link from 'hds-core/lib/components/pagination/pagination.css';\n}\n\n.itemLinkActive {\n composes: hds-pagination__item-link--active from 'hds-core/lib/components/pagination/pagination.css';\n}\n",".disabledShowPasswordButton {\n color: var(--color-black-40);\n}\n","@value small-down, medium-up from \"../../styles/breakpoints.scss\";\n\n.sideNavigation {\n --side-navigation-background-color: var(--color-white);\n --side-navigation-active-indicator-background-color: var(--color-bus);\n --side-navigation-icon-size: var(--spacing-m);\n --side-navigation-level-border-color: var(--color-white);\n --side-navigation-level-border-color-focus: var(--color-coat-of-arms);\n --side-navigation-level-border-color-hover: var(--color-black-5);\n --side-navigation-level-border-width: 2px;\n --side-navigation-level-background-color: var(--color-white);\n --side-navigation-level-background-color-active: var(--color-black-5);\n --side-navigation-level-background-color-hover: var(--color-black-5);\n --side-navigation-level-color: var(--color-black);\n --side-navigation-level-color-active: var(--color-black);\n --side-navigation-level-color-hover: var(--color-black);\n --side-navigation-level-inset: var(--spacing-s);\n --side-navigation-mobile-menu-border-color: var(--color-black);\n --side-navigation-mobile-menu-border-width: 2px;\n --side-navigation-mobile-menu-z-index: 100;\n\n background-color: var(--side-navigation-background-color);\n box-sizing: border-box;\n position: relative;\n\n @media medium-up {\n height: 100%;\n }\n}\n\n.toggleButton {\n @media medium-up {\n display: none;\n }\n}\n\n.mainLevelList {\n list-style: none;\n margin: 0;\n padding: 0;\n\n @media small-down {\n max-height: 0;\n overflow: hidden;\n\n &.open {\n background-color: var(--side-navigation-background-color);\n border: var(--side-navigation-mobile-menu-border-width) solid var(--side-navigation-mobile-menu-border-color);\n max-height: none;\n will-change: max-height;\n }\n }\n\n @media medium-up {\n display: block;\n }\n}\n","@import '../../styles/common.scss';\n\n%level {\n & > button {\n @extend %buttonReset;\n }\n\n & > a,\n & > button {\n align-items: center;\n background-color: var(--side-navigation-level-background-color);\n border: var(--side-navigation-level-border-width) solid var(--side-navigation-level-border-color);\n box-sizing: border-box;\n color: var(--side-navigation-level-color);\n display: flex;\n margin: 0;\n min-height: var(--spacing-2-xl);\n outline: none;\n padding: var(--spacing-2-xs) var(--side-navigation-level-inset);\n text-align: left;\n text-decoration: none;\n width: 100%;\n\n &:hover {\n background-color: var(--side-navigation-level-background-color-hover);\n border-color: var(--side-navigation-level-border-color-hover);\n color: var(--side-navigation-level-color-hover);\n }\n\n &:focus {\n border-color: var(--side-navigation-level-border-color-focus) !important;\n }\n\n span {\n display: flex;\n }\n }\n}\n\n%activeLevel {\n & > a,\n & > button {\n background-color: var(--side-navigation-level-background-color-active);\n border-color: var(--side-navigation-level-background-color-active);\n color: var(--side-navigation-level-color-active);\n font-weight: 600;\n position: relative;\n\n &:before {\n background: var(--side-navigation-active-indicator-background-color);\n bottom: calc(0px - var(--side-navigation-level-border-width));\n content: '';\n display: block;\n left: calc(0px - var(--side-navigation-level-border-width));\n position: absolute;\n top: calc(0px - var(--side-navigation-level-border-width));\n width: var(--spacing-3-xs);\n }\n }\n}\n","@import \"../sideNavigation.common\";\n\n\n.mainLevel {\n @extend %level;\n\n font-size: var(--fontsize-body-m);\n\n & > a,\n & > button {\n font-weight: 500;\n }\n}\n\n.active {\n @extend %activeLevel;\n}\n\n.mainLevelListMenu {\n display: none;\n}\n\n.mainLevelWithDivider {\n &:before {\n border-top: 1px solid var(--color-black-20);\n content: \"\";\n display: block;\n height: 1px;\n margin: var(--spacing-xs) var(--side-navigation-level-inset);\n }\n}\n\n.leftIcon,\n.label {\n margin-right: var(--spacing-xs);\n}\n\n.leftIcon,\n.rightIcon {\n width: var(--side-navigation-icon-size);\n}\n\n.rightIcon {\n margin-left: auto;\n}\n\n.mainLevel.open {\n .mainLevelListMenu {\n display: block;\n list-style: none;\n padding: 0;\n }\n}\n","@import \"../sideNavigation.common\";\n\n.subLevel {\n @extend %level;\n\n font-size: var(--fontsize-body-s);\n\n & > a,\n & > button {\n min-height: var(--spacing-xl);\n padding-bottom: var(--spacing-3-xs);\n padding-left: calc(var(--side-navigation-level-inset) + var(--spacing-2-xs));\n padding-top: var(--spacing-3-xs);\n }\n}\n\n.active {\n @extend %activeLevel;\n}\n",".hds-status-label {\n --status-label-background: var(--color-black-10);\n --status-label-color: var(--color-black-90);\n --status-label-height: 32px;\n\n background-color: var(--status-label-background);\n border-radius: 20px;\n color: var(--status-label-color);\n display: inline-block;\n font-size: var(--fontsize-body-s);\n line-height: var(--status-label-height);\n min-height: var(--status-label-height);\n padding: 0 var(--spacing-2-xs);\n vertical-align: middle;\n}\n\n.hds-status-label--with-icon {\n align-items: center;\n display: inline-flex;\n padding-left: var(--spacing-3-xs);\n}\n\n.hds-status-label-icon {\n height: var(--spacing-m);\n margin-right: var(--spacing-3-xs);\n width: var(--spacing-m);\n}\n\n.hds-status-label--info {\n --status-label-background: var(--color-info);\n --status-label-color: var(--color-white);\n}\n\n.hds-status-label--success {\n --status-label-background: var(--color-success);\n --status-label-color: var(--color-white);\n}\n\n.hds-status-label--alert {\n --status-label-background: var(--color-alert);\n}\n\n.hds-status-label--error {\n --status-label-background: var(--color-error);\n --status-label-color: var(--color-white);\n}\n",".statusLabel {\n composes: hds-status-label from 'hds-core/lib/components/status-label/status-label.css';\n}\n\n.statusLabelWithIcon {\n composes: hds-status-label--with-icon from 'hds-core/lib/components/status-label/status-label.css';\n}\n\n.statusLabelIcon {\n composes: hds-status-label-icon from 'hds-core/lib/components/status-label/status-label.css';\n}\n\n.info {\n composes: hds-status-label--info from 'hds-core/lib/components/status-label/status-label.css';\n}\n\n.success {\n composes: hds-status-label--success from 'hds-core/lib/components/status-label/status-label.css';\n}\n\n.alert {\n composes: hds-status-label--alert from 'hds-core/lib/components/status-label/status-label.css';\n}\n\n.error {\n composes: hds-status-label--error from 'hds-core/lib/components/status-label/status-label.css';\n}\n",".hds-step-by-step__container {\n position: relative;\n}\n\n/**\n * Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Firefox, and Safari.\n */\n\n.hds-step-by-step__container h1 {\n font-size: 2em;\n margin: 0.67em 0;\n}\n\n.hds-step-by-step__steps-container {\n --title-font-size: var(--fontsize-heading-m);\n --title-line-height: var(--lineheight-xl);\n\n counter-reset: item;\n margin: 0;\n padding: 0;\n}\n\nol.hds-step-by-step__steps-container {\n --circle-size: 48px;\n --step-left-padding: 96px;\n}\n\n.hds-step-by-step__step-item:before,\n.hds-step-by-step__step-item:after {\n box-sizing: border-box;\n content: '';\n display: block;\n left: calc(var(--circle-size) / 2 + var(--step-left-padding) / 2);\n position: absolute;\n top: calc(var(--spacing-l) + (var(--title-font-size) * var(--title-line-height) / 2) - (var(--circle-size) / 2));\n}\n\n.hds-step-by-step__step-item:after {\n background-color: #fff;\n border: 3px solid #000;\n border-radius: 50%;\n height: var(--circle-size);\n transform: translateX(-100%);\n width: var(--circle-size);\n z-index: 2;\n}\n\nol.hds-step-by-step__steps-container .hds-step-by-step__step-item:after {\n --line-height: 1.3;\n\n align-items: center;\n content: counter(item);\n counter-increment: item;\n display: flex;\n font-size: 1.25rem;\n font-weight: 500;\n justify-content: center;\n line-height: var(--line-height);\n}\n\n.hds-step-by-step__step-item {\n background-color: var(--color-coat-of-arms-light);\n list-style: none;\n margin: var(--spacing-l) 0;\n padding: var(--spacing-l) var(--spacing-l) var(--spacing-l) var(--step-left-padding);\n position: relative;\n}\n\nol.hds-step-by-step__steps-container .hds-step-by-step__step-item {\n padding: var(--spacing-l) var(--spacing-l) var(--spacing-l) var(--step-left-padding);\n}\n\nul.hds-step-by-step__steps-container {\n --circle-size: 18px;\n --step-left-padding: var(--spacing-5-xl);\n}\n\n.hds-step-by-step__step-item-title {\n font-size: var(--title-font-size);\n font-weight: 500;\n line-height: var(--title-line-height);\n margin: 0 0 16px;\n}\n\n.hds-step-by-step__step-item:before {\n background-color: #000;\n height: calc(100% + var(--spacing-l));\n transform: translateX(-50%) translateX(calc(-0.5 * var(--circle-size)));\n width: 2px;\n z-index: 1;\n}\n\n.hds-step-by-step__step-item:last-of-type:before {\n display: none;\n}\n",".container {\n position: relative;\n}\n\n.stepsContainer {\n composes: hds-step-by-step__steps-container from 'hds-core/lib/components/step-by-step/step-by-step.css';\n}\n\n.stepItem {\n composes: hds-step-by-step__step-item from 'hds-core/lib/components/step-by-step/step-by-step.css';\n}\n\n.stepItemTitle {\n composes: hds-step-by-step__step-item-title from 'hds-core/lib/components/step-by-step/step-by-step.css';\n}\n","@import \"../../styles/common.scss\";\n\n.stepperContainer {\n background-color: var(--hds-stepper-background-color);\n position: relative;\n\n --hds-stepper-color: var(--color-bus);\n --hds-stepper-background-color: var(--color-white);\n --hds-stepper-disabled-color: var(--color-black-20);\n --hds-selected-step-label-color: var(--color-black-90);\n --hds-not-selected-step-label-color: var(--color-bus);\n --hds-step-background-color: var(--color-white);\n --hds-step-content-color: var(--color-bus);\n --hds-stepper-focus-border-color: var(--color-coat-of-arms);\n --hds-step-width: 120px;\n --circle-container-size: 36px;\n --progress-line-height: 2px;\n}\n\n.stepper {\n align-items: flex-start;\n display: flex;\n justify-content: space-between;\n overflow: scroll;\n\n // Hide horizontal scrollbar on overflow\n -ms-overflow-style: none; /* IE and Edge */\n position: relative;\n scroll-behavior: smooth;\n scrollbar-width: none; /* Firefox */\n width: 100%;\n\n &:focus {\n outline: var(--hds-stepper-focus-border-color) 3px solid;\n }\n}\n\n.stepper::-webkit-scrollbar {\n display: none; // Hide horizontal scrollbar on overflow\n}\n\n.stepper.small {\n --hds-step-width: 44px;\n}\n\n.stepContainer {\n background-color: var(--hds-stepper-background-color);\n box-sizing: border-box;\n display: flex;\n flex-shrink: 0;\n justify-content: center;\n padding: 3px;\n width: var(--hds-step-width);\n}\n\n.label {\n color: var(--hds-not-selected-step-label-color);\n font-size: var(--fontsize-body-m);\n font-weight: 500;\n line-height: var(--lineheight-l);\n margin-bottom: 0;\n margin-top: 6px;\n padding-left: var(--spacing-4-xs);\n padding-right: var(--spacing-4-xs);\n text-decoration: underline;\n}\n\n.disabled .label {\n color: var(--hds-stepper-disabled-color);\n text-decoration: none;\n}\n\n.circle {\n align-items: center;\n background-color: var(--hds-step-background-color);\n border: 2px solid var(--hds-stepper-color);\n border-radius: 16px;\n color: var(--hds-step-content-color);\n display: flex;\n height: 28px;\n justify-content: center;\n outline: 2px solid var(--hds-stepper-background-color);\n text-align: center;\n width: 28px;\n}\n\n.disabled .circle {\n background-color: var(--hds-stepper-background-color);\n border: 2px solid var(--hds-stepper-disabled-color);\n color: var(--hds-stepper-disabled-color);\n}\n\n.selected .circle {\n border: 4px solid var(--hds-stepper-color);\n border-radius: 18px;\n outline: none;\n}\n\n.selected .label {\n color: var(--hds-selected-step-label-color);\n font-weight: bold;\n text-decoration: none;\n}\n\n.completedContainer {\n background-color: var(--hds-stepper-color);\n border-radius: 16px;\n outline: 2px solid var(--hds-stepper-background-color);\n padding: 4px;\n\n .completedIcon {\n color: var(--hds-step-background-color);\n vertical-align: middle;\n }\n}\n\n.step {\n @extend %normalizedInput;\n\n align-items: center;\n appearance: none;\n background: transparent;\n border: 0;\n color: var(--hds-stepper-color);\n cursor: pointer;\n display: flex;\n flex-direction: column;\n height: 100%;\n justify-content: center;\n outline: none;\n overflow: visible;\n padding: 0;\n position: relative;\n\n &:focus {\n .circle {\n outline: 2px solid var(--hds-stepper-focus-border-color);\n }\n\n .label {\n outline: 2px solid var(--hds-stepper-focus-border-color);\n }\n\n .completedContainer {\n outline: 2px solid var(--hds-stepper-focus-border-color);\n }\n }\n\n &:focus-visible {\n outline: none; // Revert firefox user agent focus styles\n }\n}\n\n.step.disabled {\n color: var(--hds-stepper-disabled-color);\n cursor: not-allowed;\n}\n\n.number {\n font-size: var(--fontsize-body-m);\n font-weight: 500;\n line-height: 1.15;\n}\n\n.circleContainer {\n align-items: center;\n display: flex;\n height: var(--circle-container-size);\n justify-content: center;\n width: var(--circle-container-size);\n z-index: 2;\n}\n\n.line {\n display: inline;\n height: var(--progress-line-height);\n left: calc(var(--hds-step-width) / 2.0);\n line-height: var(--lineheight-l);\n position: absolute;\n transform: translateY(calc((var(--circle-container-size) / 2) + (var(--progress-line-height) / 2)));\n z-index: 1;\n\n\n @mixin lineStep {\n display: inline-block;\n height: 100%;\n position: relative;\n top: -15px;\n }\n\n .disabledLine {\n @include lineStep;\n\n background-color: var(--hds-stepper-disabled-color);\n }\n\n .enabledLine {\n @include lineStep;\n\n background-color: var(--hds-stepper-color);\n }\n}\n\n.heading {\n composes: heading-l from 'hds-core/lib/utils/helpers.css';\n margin-top: 26px;\n width: fit-content;\n\n &:focus {\n border: none;\n outline: 3px solid var(--hds-stepper-focus-border-color);\n }\n}\n\n.scrollButton {\n background-color: var(--hds-stepper-background-color);\n color: var(--hds-stepper-color);\n position: absolute;\n top: 3px;\n z-index: 10;\n\n button {\n @extend %buttonReset;\n\n align-items: center;\n border: 2px solid transparent;\n border-radius: unset;\n box-sizing: border-box;\n display: inline-flex;\n justify-content: center;\n overflow: hidden;\n width: 100%;\n\n &:focus {\n border: 2px solid var(--hds-stepper-focus-border-color);\n outline: none;\n }\n }\n}\n\n.scrollButton.scrollButtonPrevious {\n left: 0;\n}\n\n.scrollButton.scrollButtonNext {\n right: 0;\n}\n\n","@import \"../../styles/common.scss\";\n\n.tabs {\n --tablist-border-color: var(--color-black-20);\n --tablist-border-size: 1px;\n --tab-color: var(--color-bus);\n --tab-font-size: var(--fontsize-body-m);\n --tab-height: 48px;\n --tab-min-width: 148px;\n --tab-spacing: var(--spacing-s);\n --tab-active-border-size: 5px;\n --tab-active-border-color: var(--color-bus);\n --tab-focus-outline-size: 2px;\n --tab-focus-outline-color: var(--color-coat-of-arms);\n}\n\n.tabs.small {\n --tab-min-width: 0;\n --tab-font-size: var(--fontsize-body-s);\n --tab-active-border-size: 3px;\n}\n\n.tablistBar {\n display: flex;\n flex-direction: row;\n}\n\n.scrollButton {\n align-items: center;\n color: var(--tab-color);\n display: flex;\n justify-content: center;\n margin-bottom: var(--tablist-border-size);\n position: relative;\n width: 26px;\n\n &:before {\n background: var(--tablist-border-color);\n bottom: 0;\n content: '';\n height: var(--tablist-border-size);\n position: absolute;\n width: 100%;\n z-index: 100;\n }\n\n button {\n @extend %buttonReset;\n\n align-items: center;\n border: var(--tab-focus-outline-size) solid transparent;\n border-radius: unset;\n box-sizing: border-box;\n display: inline-flex;\n height: 26px;\n justify-content: center;\n overflow: hidden;\n width: 100%;\n\n &:focus {\n border: var(--tab-focus-outline-size) solid var(--tab-focus-outline-color);\n outline: none;\n }\n }\n}\n\n.tablist {\n box-sizing: border-box;\n flex-grow: 1;\n margin-bottom: -1px;\n overflow-x: hidden;\n position: relative;\n\n ul {\n box-sizing: border-box;\n list-style: none;\n margin: 0;\n padding: 0;\n padding: var(--tab-focus-outline-size) 0;\n white-space: nowrap;\n }\n}\n\n.tab {\n display: inline-block;\n margin: 0;\n outline: none;\n padding: 0;\n\n span {\n align-items: center;\n box-sizing: border-box;\n color: var(--tab-color);\n cursor: pointer;\n display: flex;\n font-size: var(--tab-font-size);\n height: var(--tab-height);\n justify-content: center;\n margin: 0;\n min-width: var(--tab-min-width);\n padding: 0;\n padding-left: var(--tab-spacing);\n padding-right: var(--tab-spacing);\n position: relative;\n\n &:before {\n background: var(--tablist-border-color);\n bottom: 0;\n content: '';\n height: var(--tablist-border-size);\n position: absolute;\n width: 100%;\n z-index: 100;\n }\n }\n\n &:focus span {\n outline: none;\n\n &:after {\n --size: calc(100% + var(--tab-focus-outline-size) * 2);\n\n border: var(--tab-focus-outline-size) solid var(--tab-focus-outline-color);\n box-sizing: border-box;\n content: '';\n height: var(--size);\n left: 0;\n outline: none;\n position: absolute;\n top: calc(-1 * var(--tab-focus-outline-size));\n width: 100%;\n z-index: 200;\n }\n }\n\n &.active {\n span:before {\n background-color: var(--tab-active-border-color);\n bottom: 0;\n content: '';\n height: var(--tab-active-border-size);\n position: absolute;\n width: 100%;\n z-index: 100;\n }\n }\n}\n","@import \"../../styles/common.scss\";\n\n.timeInputFrame {\n align-items: center;\n display: inline-flex;\n padding: 0 calc(var(--spacing-s) - 3px);\n\n &.disabled {\n background-color: var(--input-background-disabled);\n border-color: var(--input-border-color-disabled);\n color: var(--input-color-disabled);\n cursor: not-allowed;\n\n &:hover {\n border-color: var(--input-border-color-disabled);\n }\n }\n}\n\n.fullInput {\n height: 0;\n opacity: 0;\n overflow: hidden;\n pointer-events: none;\n position: absolute;\n width: 0;\n}\n\n.fullInput, .partialInput {\n @extend %normalizedInput;\n}\n\n.partialInputLabel {\n @extend %visuallyHidden;\n}\n\n.partialInput, .divider {\n appearance: none;\n background: transparent;\n border: 0;\n box-sizing: border-box;\n color: var(--input-color-default);\n font-size: 1.125rem;\n line-height: normal;\n padding: 0;\n}\n\n.partialInput {\n overflow: visible;\n padding: 0;\n text-align: center;\n width: 1.40rem;\n will-change: transform, box-shadow;\n\n &:focus {\n box-shadow: 0 0 0 var(--outline-width) var(--focus-outline-color);\n outline: none;\n transform: translate3d(0, 0, 0);\n\n &::placeholder {\n opacity: 0;\n }\n }\n}\n\n.divider {\n display: inline-block;\n margin: 0 5px;\n pointer-events: none;\n width: auto;\n}\n\n.input.disabled {\n .partialInput, .divider {\n background-color: var(--input-background-disabled);\n border-color: var(--input-border-color-disabled);\n color: var(--input-color-disabled);\n cursor: not-allowed;\n }\n}\n","@import '../../styles/common.scss';\n\n.toggleButtonContainer {\n --toggle-button-color: var(--color-bus);\n --toggle-button-hover-color: var(--color-bus-dark);\n --toggle-button-unselected-color: var(--color-black-90);\n}\n\n.label {\n @extend %inputLabel;\n}\n\n.onIcon {\n color: white;\n opacity: 0;\n}\n\n.offIcon {\n color: var(--toggle-button-unselected-color);\n opacity: 1;\n}\n\n.toggleButton {\n $toggle-button-height: 32px;\n $toggle-button-width: 56px;\n $toggle-button-border-width: 2px;\n $toggle-button-border-radius: 20px;\n $toggle-button-icon-width: 24px;\n $toggle-button-outline-width: 3px;\n $toggle-button-outline-offset: 2px;\n $toggle-button-checked-icon-margin: $toggle-button-width - ($toggle-button-icon-width + 8px);\n\n @extend %normalizedInput;\n \n background: #fff;\n border: $toggle-button-border-width solid var(--toggle-button-unselected-color);\n border-radius: $toggle-button-border-radius;\n cursor: pointer;\n display: inline-block;\n height: $toggle-button-height;\n inset: 0;\n position: relative;\n transition: all 200ms;\n width: $toggle-button-width;\n\n\n &:after {\n $calculated-offset: ($toggle-button-border-width + $toggle-button-outline-width + $toggle-button-outline-offset) * -1;\n\n border-radius: $toggle-button-border-radius + 5px;\n content: '';\n display: block;\n inset: $calculated-offset;\n position: absolute;\n }\n\n &:focus {\n outline: none;\n\n &:after {\n border: $toggle-button-outline-width solid var(--color-coat-of-arms);\n box-sizing: content-box;\n }\n }\n\n &[aria-pressed='true'] {\n background-color: var(--toggle-button-color);\n border-color: var(--toggle-button-color);\n\n &:hover {\n background-color: var(--toggle-button-hover-color);\n border-color: var(--toggle-button-hover-color);\n }\n\n &[disabled],\n &[disabled]:hover {\n background-color: var(--color-black-10);\n border-color: var(--color-black-10);\n }\n\n & .onIcon {\n margin-left: $toggle-button-checked-icon-margin !important;\n opacity: 1;\n }\n\n & .offIcon {\n margin-left: $toggle-button-checked-icon-margin !important;\n opacity: 0;\n }\n }\n\n &[disabled],\n &[disabled]:hover {\n border-color: var(--color-black-20);\n cursor: not-allowed;\n\n & .offIcon {\n color: var(--color-black-10);\n }\n }\n}\n\n.toggleButtonContainerInlineVariant {\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n\n .label {\n margin-bottom: 0;\n }\n\n .toggleButton {\n margin-left: auto;\n }\n}\n\n.labelContainer {\n align-items: flex-start;\n display: flex;\n}\n\n.tooltipButton {\n display: block; // Remove the impact of the label's line-height on the tooltip button height. Usually, the tooltip is an element with an absolute position.\n margin-left: var(--spacing-2-xs);\n}\n\n.toggleButtonIcon {\n cursor: pointer;\n left: -2px;\n position: absolute;\n top: -2px;\n transition: all 200ms;\n}",".hds-example-form {\n margin: 0 auto;\n max-width: 792px;\n\n &__main-title {\n composes: heading-xl from 'hds-core/lib/utils/helpers.css';\n margin: 0 0 var(--spacing-m) 0;\n }\n\n &__title {\n font-size: var(--fontsize-heading-l);\n font-weight: 400;\n letter-spacing: -0.4px;\n line-height: var(--lineheight-s);\n margin: 0 0 var(--spacing-m) 0;\n }\n\n &__required-info {\n font-size: var(--fontsize-body-m);\n line-height: var(--lineheight-l);\n margin: 0 0 var(--spacing-l) 0;\n }\n\n &__error-summary {\n margin-bottom: var(--spacing-m);\n }\n\n &__section {\n margin-bottom: var(--spacing-xl);\n\n &-title {\n composes: heading-s from 'hds-core/lib/utils/helpers.css';\n margin: 0 0 var(--spacing-m);\n }\n }\n\n &__item {\n margin-bottom: var(--spacing-m);\n }\n\n &__terms {\n margin-left: var(--spacing-l);\n margin-top: var(--spacing-2-xs);\n\n span {\n color: var(--color-bus);\n cursor: pointer;\n text-decoration: underline;\n }\n }\n\n @media (min-width: 576px) {\n &__grid {\n &-6-6 {\n display: grid;\n gap: var(--spacing-m);\n grid-template-columns: 1fr 1fr;\n }\n\n &-8-4 {\n display: grid;\n gap: var(--spacing-m);\n grid-template-columns: 2fr 1fr;\n }\n\n &-6-6:last-child,\n &-8-4:last-child {\n margin-bottom: calc(-1 * var(--spacing-m));\n }\n }\n }\n}"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/docs/hds-1909-react/iframe.html b/docs/hds-1909-react/iframe.html index 34a5c93a02f..fab5c7b56e6 100644 --- a/docs/hds-1909-react/iframe.html +++ b/docs/hds-1909-react/iframe.html @@ -324,7 +324,7 @@ /* eslint-enable object-shorthand */ }) ); - };\n \n \n \n
\n

Applied theme:

\n 
{JSON.stringify(heroProps.theme, null, 2)}
\n
\n
\n

Applied koros:

\n 
{JSON.stringify(heroProps.koros, null, 2)}
\n
\n \n );\n};\n\nPlaygroundForKoros.argTypes = {\n ...getDisabledControl('centeredContent'),\n ...getDisabledControl('imageSrc'),\n type: {\n defaultValue: 'basic',\n description: 'Koros type',\n control: {\n type: 'select',\n options: ['basic', 'beat', 'pulse', 'storm', 'wave', 'calm'],\n },\n ...getKorosPropertyDescriptionAsSummary(),\n },\n color: {\n control: { type: 'color' },\n description: 'Koros color. Default is \"--background-color\"',\n ...getThemePropertyDescriptionAsSummary('--koros-color'),\n },\n hide: {\n control: 'boolean',\n description: 'Hide koros. Most variants override this setting.',\n ...getKorosPropertyDescriptionAsSummary(),\n },\n dense: {\n control: 'boolean',\n description: 'Use dense koros version or not',\n ...getKorosPropertyDescriptionAsSummary(),\n },\n diagonalKorosPosition: {\n ...korosPosition,\n ...getThemePropertyDescriptionAsSummary('--diagonal-koros-position'),\n },\n flipVertical: {\n control: 'boolean',\n description: 'Flip koros vertically. Most variants override this setting.',\n ...getKorosPropertyDescriptionAsSummary(),\n },\n ...createVariantArg('diagonalKoros'),\n};\n\nexport const EmbeddedToPage = (args) => {\n const { preset, variant } = args;\n const props = getDefaultArgs(variant, preset);\n const NoImage = () => {\n if (preset === noImageOptions[1]) {\n return ;\n }\n if (preset === noImageOptions[2]) {\n return ;\n }\n return ;\n };\n return (\n
\n \n {variant === 'imageRight' && }\n {variant === 'imageLeft' && }\n {variant === 'backgroundImage' && (\n \n )}\n {variant === 'diagonalKoros' && }\n {variant === 'noImage' && }\n {variant === 'imageBottom' && }\n
\n

Component after hero

\n This component shows padding after hero\n
\n
\n );\n};\n\nEmbeddedToPage.argTypes = {\n ...getDisabledControl('koros'),\n ...getDisabledControl('theme'),\n ...getDisabledControl('imageSrc'),\n ...getDisabledControl('centeredContent'),\n ...createVariantArg('noImage'),\n preset: {\n defaultValue: noImageOptions[1],\n control: {\n type: 'select',\n options: noImageOptions,\n },\n table: {\n type: {\n summary:\n 'Changes to another version of the \"noImage\" variant. Storybook control, not an actual component property',\n },\n },\n },\n};\n\nconst demoPadding = '55px';\nconst demoBgColor = '#f5a3c7';\n\nexport const PlaygroundForTheme = (args) => {\n const argsAsTheme = {\n '--background-color': args.backgroundColor,\n '--color': args.color,\n '--image-position': args.imagePosition,\n '--koros-color': args.korosColor,\n '--diagonal-koros-position': args.diagonalKorosPosition,\n '--horizontal-padding-small': args.horizontalPaddingSmall,\n '--horizontal-padding-medium': args.horizontalPaddingMedium,\n '--horizontal-padding-large': args.horizontalPaddingLarge,\n '--horizontal-padding-x-large': args.horizontalPaddingXLarge,\n ...args.theme,\n };\n\n const theme = Object.fromEntries(Object.entries(argsAsTheme).filter(([, value]) => !!value));\n const heroProps: HeroProps = {\n koros: args.koros,\n theme,\n imageSrc: imageFile,\n variant: args.variant,\n };\n return (\n
\n \n \n \n \n
\n

This text should align with the hero content box on all screen sizes

\n
\n
\n

Applied theme:

\n 
{JSON.stringify(theme, null, 2)}
\n
\n
\n );\n};\n\nPlaygroundForTheme.argTypes = {\n ...getDisabledControl('centeredContent'),\n ...getDisabledControl('imageSrc'),\n backgroundColor: {\n defaultValue: demoBgColor,\n control: 'color',\n description: 'Background color. Also koros color, if not set.',\n ...getThemePropertyDescriptionAsSummary('--background-color'),\n },\n color: {\n defaultValue: '',\n control: 'color',\n description: 'Text color.',\n ...getThemePropertyDescriptionAsSummary('--color'),\n },\n korosColor: {\n defaultValue: '',\n control: 'color',\n description: 'Optional koros color. Default is \"--background-color\"',\n ...getThemePropertyDescriptionAsSummary('--koros-color'),\n },\n imagePosition: {\n defaultValue: '',\n description:\n 'How image is aligned to its container when image is larger than the container. Value can be any valid value for css rule \"object-fit\"',\n control: {\n type: 'select',\n options: [\n 'top left',\n 'top center',\n 'top right',\n 'center left',\n 'center center',\n 'center right',\n 'bottom left',\n 'bottom center',\n 'bottom right',\n '',\n ],\n },\n ...getThemePropertyDescriptionAsSummary('--image-position'),\n },\n diagonalKorosPosition: {\n ...korosPosition,\n ...getThemePropertyDescriptionAsSummary('--diagonal-koros-position'),\n },\n horizontalPaddingSmall: {\n defaultValue: demoPadding,\n control: 'text',\n description: 'Horizontal padding on small screens <768px.',\n ...getThemePropertyDescriptionAsSummary('--horizontal-padding-small'),\n },\n horizontalPaddingMedium: {\n defaultValue: demoPadding,\n control: 'text',\n description: 'Horizontal padding on medium screens >=768px.',\n ...getThemePropertyDescriptionAsSummary('--horizontal-padding-medium'),\n },\n horizontalPaddingLarge: {\n defaultValue: demoPadding,\n control: 'text',\n description: 'Horizontal padding on large screens >=992px.',\n ...getThemePropertyDescriptionAsSummary('--horizontal-padding-large'),\n },\n horizontalPaddingXLarge: {\n defaultValue: demoPadding,\n control: 'text',\n description: 'Horizontal padding on x-large screens >=1248px.',\n ...getThemePropertyDescriptionAsSummary('--horizontal-padding-x-large'),\n },\n ...createVariantArg('backgroundImage'),\n};\n\nexport const AllHeroes = () => {\n const Divider = () => {\n return
;\n };\n\n return (\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n );\n};\n\nAllHeroes.argTypes = {\n ...getDisabledControl('koros'),\n ...getDisabledControl('theme'),\n ...getDisabledControl('imageSrc'),\n ...getDisabledControl('centeredContent'),\n ...getDisabledControl('variant'),\n};\n",locationsMap:{"image-left":{startLoc:{col:25,line:234},endLoc:{col:1,line:240},startBody:{col:25,line:234},endBody:{col:1,line:240}},"image-right":{startLoc:{col:26,line:247},endLoc:{col:1,line:253},startBody:{col:26,line:247},endBody:{col:1,line:253}},"without-image":{startLoc:{col:28,line:261},endLoc:{col:1,line:267},startBody:{col:28,line:261},endBody:{col:1,line:267}},"without-image-koros-overlay":{startLoc:{col:40,line:282},endLoc:{col:1,line:288},startBody:{col:40,line:282},endBody:{col:1,line:288}},"without-image-and-koros":{startLoc:{col:36,line:302},endLoc:{col:1,line:308},startBody:{col:36,line:302},endBody:{col:1,line:308}},"background-image":{startLoc:{col:31,line:321},endLoc:{col:1,line:327},startBody:{col:31,line:321},endBody:{col:1,line:327}},"diagonal-koros":{startLoc:{col:29,line:337},endLoc:{col:1,line:343},startBody:{col:29,line:337},endBody:{col:1,line:343}},"image-bottom":{startLoc:{col:27,line:354},endLoc:{col:1,line:360},startBody:{col:27,line:354},endBody:{col:1,line:360}},"playground-for-koros":{startLoc:{col:34,line:371},endLoc:{col:1,line:411},startBody:{col:34,line:371},endBody:{col:1,line:411}},"embedded-to-page":{startLoc:{col:30,line:452},endLoc:{col:1,line:481},startBody:{col:30,line:452},endBody:{col:1,line:481}},"playground-for-theme":{startLoc:{col:34,line:507},endLoc:{col:1,line:558},startBody:{col:34,line:507},endBody:{col:1,line:558}},"all-heroes":{startLoc:{col:25,line:633},endLoc:{col:1,line:659},startBody:{col:25,line:633},endBody:{col:1,line:659}}}},controls:{expanded:!0}},args:{}};var variantSelection={defaultValue:"noImage",control:{type:"select",options:["imageLeft","imageRight","backgroundImage","imageBottom","diagonalKoros","noImage"]}},korosPosition={defaultValue:"45%",control:"text",description:'Position of the koros in the variant "diagonalKoros".'},imageLeftOrRightTheme={"--background-color":"#c2a251","--color":"#000"},noImageOptions=["","Without image","Without image II","Without image and koros"],getThemePropertyDescriptionAsSummary=function getThemePropertyDescriptionAsSummary(themeVariable){return{table:{type:{summary:'Storybook control for a theme variable, not an actual component property. Given value is set to theme property as "'.concat(themeVariable,'".')}}}},getDisabledControl=function getDisabledControl(control,notUsed){var description="*** ".concat(control,notUsed?" is not used in this variant ***":" is not passed to the component in this story ***");return(0,defineProperty.Z)({},control,{description,control:!1,table:{type:{summary:"Disabled"}}})},getDefaultArgs=function getDefaultArgs(variant,preset){var defaultValuePicker=function defaultValuePicker(args){return Object.entries(args).reduce((function(currentObject,_ref2){var _ref3=(0,slicedToArray.Z)(_ref2,2),prop=_ref3[0],value=_ref3[1];return value.defaultValue?(0,objectSpread2.Z)((0,objectSpread2.Z)({},currentObject),{},(0,defineProperty.Z)({},prop,value.defaultValue)):currentObject}),{})};if("noImage"===variant)return defaultValuePicker(preset===noImageOptions[1]?WithoutImage.argTypes:preset===noImageOptions[2]?WithoutImageKorosOverlay.argTypes:WithoutImageAndKoros.argTypes);switch(variant){case"backgroundImage":return defaultValuePicker(BackgroundImage.argTypes);case"imageLeft":return defaultValuePicker(ImageLeft.argTypes);case"imageRight":return defaultValuePicker(ImageRight.argTypes);case"imageBottom":return defaultValuePicker(ImageBottom.argTypes);case"diagonalKoros":return defaultValuePicker(DiagonalKoros.argTypes);default:return{}}},defaultImageSrcArg={imageSrc:{defaultValue:placeholder_1920x1080,control:"text"}},createCenteredContentArg=function createCenteredContentArg(defaultValue){return{centeredContent:{defaultValue,control:"boolean"}}},createThemeArg=function createThemeArg(themeProps){return{theme:{defaultValue:(0,objectSpread2.Z)({},themeProps),control:"object"}}},createKorosArg=function createKorosArg(korosProps){return{koros:{defaultValue:(0,objectSpread2.Z)({},korosProps),control:"object"}}},createVariantArg=function createVariantArg(defaultValue){return{variant:(0,objectSpread2.Z)((0,objectSpread2.Z)({},variantSelection),{},{defaultValue})}},DefaultContent=function DefaultContent(props){var title=props.title,text=props.text,buttonTheme=props.buttonTheme,h1Text=title||"Welcome to the hero story",paragraphText=text||"Nullam ut nunc consectetur, accumsan nunc sed, luctus nisl. Curabitur lacinia tristique est, sit amet egestas velit elementum sit amet. Nam lacinia volutpat erat vel faucibus.",buttonStyle="black"!==buttonTheme?{"--background-color":"#fff","--color":"#000","--border-color":"#fff","--color-focus":"#000","--color-hover":"#fff","--color-hover-focus":"#fff","--background-color-focus":"#fff","--background-color-hover":"#000","--border-color-hover":"#fff","--background-color-hover-focus":"#000"}:{"--background-color":"#000","--color":"#fff","--border-color":"#000","--color-focus":"#fff","--background-color-focus":"#000","--background-color-hover":"#fff","--background-color-hover-focus":"#fff"};return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(Hero.Title,{children:h1Text}),(0,jsx_runtime.jsx)(Hero.Text,{children:paragraphText}),(0,jsx_runtime.jsx)(Button.z,{variant:"secondary",role:"link",style:buttonTheme?buttonStyle:{},children:"Click me"})]})},languages=[{label:"Suomi",value:"fi"},{label:"Svenska",value:"sv"},{label:"English",value:"en"}],NavigationComponent=function NavigationComponent(){return(0,jsx_runtime.jsxs)(Header.h,{languages,children:[(0,jsx_runtime.jsx)(Header.h.SkipLink,{skipTo:"#content",label:"Skip to main content"}),(0,jsx_runtime.jsx)(Header.h.ActionBar,{title:"Helsingin kaupunki",titleAriaLabel:"Helsingin kaupunki",titleHref:"https://hel.fi",logoAriaLabel:"Service logo",logoHref:"https://hel.fi",menuButtonAriaLabel:"Menu",logo:(0,jsx_runtime.jsx)(Logo.TR,{src:Logo.Cv,alt:"Helsingin kaupunki"}),children:(0,jsx_runtime.jsx)(Header.h.LanguageSelector,{ariaLabel:"Kielen valinta"})}),(0,jsx_runtime.jsxs)(Header.h.NavigationMenu,{children:[(0,jsx_runtime.jsx)(Header.h.Link,{href:"#",label:"Link",active:!0,onClick:function onClick(e){return e.preventDefault()}}),(0,jsx_runtime.jsx)(Header.h.Link,{href:"#",label:"Link",onClick:function onClick(e){return e.preventDefault()}}),(0,jsx_runtime.jsx)(Header.h.Link,{href:"#",label:"Link",onClick:function onClick(e){return e.preventDefault()}}),(0,jsx_runtime.jsx)(Header.h.Link,{href:"#",label:"Link",onClick:function onClick(e){return e.preventDefault()}}),(0,jsx_runtime.jsx)(Header.h.Link,{href:"#",label:"Dropdown",onClick:function onClick(e){return e.preventDefault()},dropdownLinks:[(0,jsx_runtime.jsx)(Header.h.Link,{href:"#",label:"Link",onClick:function onClick(e){return e.preventDefault()}}),(0,jsx_runtime.jsx)(Header.h.Link,{href:"#",label:"Link",onClick:function onClick(e){return e.preventDefault()}}),(0,jsx_runtime.jsx)(Header.h.Link,{href:"#",label:"Link",onClick:function onClick(e){return e.preventDefault()}}),(0,jsx_runtime.jsx)(Header.h.Link,{href:"#",label:"Link",onClick:function onClick(e){return e.preventDefault()}})]})]})]})},ImageLeft=function ImageLeft(args){return(0,jsx_runtime.jsx)(Hero,(0,objectSpread2.Z)((0,objectSpread2.Z)({},args),{},{children:(0,jsx_runtime.jsx)(DefaultContent,{buttonTheme:"black"})}))};ImageLeft.argTypes=(0,objectSpread2.Z)((0,objectSpread2.Z)((0,objectSpread2.Z)({},defaultImageSrcArg),createThemeArg(imageLeftOrRightTheme)),createVariantArg("imageLeft"));var ImageRight=function ImageRight(args){return(0,jsx_runtime.jsx)(Hero,(0,objectSpread2.Z)((0,objectSpread2.Z)({},args),{},{children:(0,jsx_runtime.jsx)(DefaultContent,{buttonTheme:"black"})}))};ImageRight.argTypes=(0,objectSpread2.Z)((0,objectSpread2.Z)((0,objectSpread2.Z)((0,objectSpread2.Z)({},getDisabledControl("variant")),defaultImageSrcArg),createThemeArg(imageLeftOrRightTheme)),createVariantArg("imageRight"));var WithoutImage=function WithoutImage(args){return(0,jsx_runtime.jsx)(Hero,(0,objectSpread2.Z)((0,objectSpread2.Z)({},args),{},{children:(0,jsx_runtime.jsx)(DefaultContent,{})}))};WithoutImage.argTypes=(0,objectSpread2.Z)((0,objectSpread2.Z)((0,objectSpread2.Z)((0,objectSpread2.Z)((0,objectSpread2.Z)({},getDisabledControl("imageSrc",!0)),createThemeArg({"--background-color":"#9fc9eb","--color":"#000","--koros-color":"#009246","--koros-height":"82px"})),createKorosArg({type:"pulse"})),createVariantArg("noImage")),createCenteredContentArg(!0));var WithoutImageKorosOverlay=function WithoutImageKorosOverlay(args){return(0,jsx_runtime.jsx)(Hero,(0,objectSpread2.Z)((0,objectSpread2.Z)({},args),{},{children:(0,jsx_runtime.jsx)(DefaultContent,{buttonTheme:"white"})}))};WithoutImageKorosOverlay.argTypes=(0,objectSpread2.Z)((0,objectSpread2.Z)((0,objectSpread2.Z)((0,objectSpread2.Z)((0,objectSpread2.Z)({},getDisabledControl("imageSrc",!0)),createThemeArg({"--background-color":"#000","--color":"#fff","--koros-color":"#000"})),createKorosArg({flipVertical:!0})),createVariantArg("noImage")),createCenteredContentArg(!1));var WithoutImageAndKoros=function WithoutImageAndKoros(args){return(0,jsx_runtime.jsx)(Hero,(0,objectSpread2.Z)((0,objectSpread2.Z)({},args),{},{children:(0,jsx_runtime.jsx)(DefaultContent,{})}))};WithoutImageAndKoros.argTypes=(0,objectSpread2.Z)((0,objectSpread2.Z)((0,objectSpread2.Z)((0,objectSpread2.Z)((0,objectSpread2.Z)({},getDisabledControl("imageSrc",!0)),createThemeArg({"--background-color":"#fff","--color":"#000"})),createKorosArg({hide:!0})),createVariantArg("noImage")),createCenteredContentArg(!1));var BackgroundImage=function BackgroundImage(args){return(0,jsx_runtime.jsx)(Hero,(0,objectSpread2.Z)((0,objectSpread2.Z)({},args),{},{children:(0,jsx_runtime.jsx)(DefaultContent,{buttonTheme:"black"})}))};BackgroundImage.argTypes=(0,objectSpread2.Z)((0,objectSpread2.Z)((0,objectSpread2.Z)({},defaultImageSrcArg),createThemeArg({"--background-color":"#fff"})),createVariantArg("backgroundImage"));var DiagonalKoros=function DiagonalKoros(args){return(0,jsx_runtime.jsx)(Hero,(0,objectSpread2.Z)((0,objectSpread2.Z)({},args),{},{children:(0,jsx_runtime.jsx)(DefaultContent,{buttonTheme:"black"})}))};DiagonalKoros.argTypes=(0,objectSpread2.Z)((0,objectSpread2.Z)((0,objectSpread2.Z)({},defaultImageSrcArg),createThemeArg({"--background-color":"#f5a3c7","--color":"#000"})),createVariantArg("diagonalKoros"));var ImageBottom=function ImageBottom(args){return(0,jsx_runtime.jsx)(Hero,(0,objectSpread2.Z)((0,objectSpread2.Z)({},args),{},{children:(0,jsx_runtime.jsx)(DefaultContent,{})}))};ImageBottom.storyName="Bottom image",ImageBottom.argTypes=(0,objectSpread2.Z)((0,objectSpread2.Z)((0,objectSpread2.Z)({},defaultImageSrcArg),createThemeArg({"--background-color":"#fff","--image-position":"bottom left"})),createVariantArg("imageBottom"));var PlaygroundForKoros=function PlaygroundForKoros(args){var heroProps={koros:(0,objectSpread2.Z)({type:args.type,dense:!!args.dense,hide:!!args.hide},args.koros),theme:(0,objectSpread2.Z)({"--background-color":"#9fc9eb","--koros-color":args.color||"#9fc9eb","--diagonal-koros-position":args.diagonalKorosPosition},args.theme),imageSrc:placeholder_1920x1080,variant:args.variant};return(0,jsx_runtime.jsxs)("div",{children:[(0,jsx_runtime.jsx)("style",{children:"\n .theme {\n padding: 20px;\n font-size:10px;\n }\n "}),(0,jsx_runtime.jsx)(Hero,(0,objectSpread2.Z)((0,objectSpread2.Z)({},heroProps),{},{children:(0,jsx_runtime.jsx)(DefaultContent,{})})),(0,jsx_runtime.jsxs)("div",{className:"theme",children:[(0,jsx_runtime.jsx)("p",{children:"Applied theme:"}),(0,jsx_runtime.jsx)("pre",{children:JSON.stringify(heroProps.theme,null,2)})]}),(0,jsx_runtime.jsxs)("div",{className:"theme",children:[(0,jsx_runtime.jsx)("p",{children:"Applied koros:"}),(0,jsx_runtime.jsx)("pre",{children:JSON.stringify(heroProps.koros,null,2)})]})]})};PlaygroundForKoros.argTypes=(0,objectSpread2.Z)((0,objectSpread2.Z)((0,objectSpread2.Z)({},getDisabledControl("centeredContent")),getDisabledControl("imageSrc")),{},{type:(0,objectSpread2.Z)({defaultValue:"basic",description:"Koros type",control:{type:"select",options:["basic","beat","pulse","storm","wave","calm"]}},{table:{type:{summary:'Storybook control for a koros property, not an actual component property. Given value is set to the "koros" property of the component.'}}}),color:(0,objectSpread2.Z)({control:{type:"color"},description:'Koros color. Default is "--background-color"'},getThemePropertyDescriptionAsSummary("--koros-color")),hide:(0,objectSpread2.Z)({control:"boolean",description:"Hide koros. Most variants override this setting."},{table:{type:{summary:'Storybook control for a koros property, not an actual component property. Given value is set to the "koros" property of the component.'}}}),dense:(0,objectSpread2.Z)({control:"boolean",description:"Use dense koros version or not"},{table:{type:{summary:'Storybook control for a koros property, not an actual component property. Given value is set to the "koros" property of the component.'}}}),diagonalKorosPosition:(0,objectSpread2.Z)((0,objectSpread2.Z)({},korosPosition),getThemePropertyDescriptionAsSummary("--diagonal-koros-position")),flipVertical:(0,objectSpread2.Z)({control:"boolean",description:"Flip koros vertically. Most variants override this setting."},{table:{type:{summary:'Storybook control for a koros property, not an actual component property. Given value is set to the "koros" property of the component.'}}})},createVariantArg("diagonalKoros"));var EmbeddedToPage=function EmbeddedToPage(args){var preset=args.preset,variant=args.variant,props=getDefaultArgs(variant,preset),NoImage=function NoImage(){return preset===noImageOptions[1]?(0,jsx_runtime.jsx)(WithoutImage,(0,objectSpread2.Z)({},props)):preset===noImageOptions[2]?(0,jsx_runtime.jsx)(WithoutImageKorosOverlay,(0,objectSpread2.Z)({},props)):(0,jsx_runtime.jsx)(WithoutImageAndKoros,(0,objectSpread2.Z)({},props))};return(0,jsx_runtime.jsxs)("div",{style:{display:"flex",flexDirection:"column"},children:[(0,jsx_runtime.jsx)(NavigationComponent,{}),"imageRight"===variant&&(0,jsx_runtime.jsx)(ImageRight,(0,objectSpread2.Z)({},props)),"imageLeft"===variant&&(0,jsx_runtime.jsx)(ImageLeft,(0,objectSpread2.Z)({},props)),"backgroundImage"===variant&&(0,jsx_runtime.jsx)(BackgroundImage,(0,objectSpread2.Z)({},(0,objectSpread2.Z)((0,objectSpread2.Z)({},props),{},{theme:{"--koros-color":"var(--color-fog)"}}))),"diagonalKoros"===variant&&(0,jsx_runtime.jsx)(DiagonalKoros,(0,objectSpread2.Z)({},props)),"noImage"===variant&&(0,jsx_runtime.jsx)(NoImage,(0,objectSpread2.Z)({},props)),"imageBottom"===variant&&(0,jsx_runtime.jsx)(ImageBottom,(0,objectSpread2.Z)({},props)),(0,jsx_runtime.jsxs)(Section.$,{color:"secondary",children:[(0,jsx_runtime.jsx)("h1",{className:"heading-xl",children:"Component after hero"}),"This component shows padding after hero"]})]})};EmbeddedToPage.argTypes=(0,objectSpread2.Z)((0,objectSpread2.Z)((0,objectSpread2.Z)((0,objectSpread2.Z)((0,objectSpread2.Z)((0,objectSpread2.Z)({},getDisabledControl("koros")),getDisabledControl("theme")),getDisabledControl("imageSrc")),getDisabledControl("centeredContent")),createVariantArg("noImage")),{},{preset:{defaultValue:noImageOptions[1],control:{type:"select",options:noImageOptions},table:{type:{summary:'Changes to another version of the "noImage" variant. Storybook control, not an actual component property'}}}});var PlaygroundForTheme=function PlaygroundForTheme(args){var argsAsTheme=(0,objectSpread2.Z)({"--background-color":args.backgroundColor,"--color":args.color,"--image-position":args.imagePosition,"--koros-color":args.korosColor,"--diagonal-koros-position":args.diagonalKorosPosition,"--horizontal-padding-small":args.horizontalPaddingSmall,"--horizontal-padding-medium":args.horizontalPaddingMedium,"--horizontal-padding-large":args.horizontalPaddingLarge,"--horizontal-padding-x-large":args.horizontalPaddingXLarge},args.theme),theme=Object.fromEntries(Object.entries(argsAsTheme).filter((function(_ref4){return!!(0,slicedToArray.Z)(_ref4,2)[1]}))),heroProps={koros:args.koros,theme,imageSrc:placeholder_1920x1080,variant:args.variant};return(0,jsx_runtime.jsxs)("div",{children:[(0,jsx_runtime.jsx)("style",{children:"\n .oddly-padded {\n padding: 20px ".concat("55px",";\n background:").concat("#f5a3c7",";\n }\n .oddly-padded p{\n max-width: var(--container-width-xl);\n margin: 0 auto;\n }\n .theme {\n padding: 20px 20px 20px ").concat("55px",";\n font-size:10px;\n }\n ")}),(0,jsx_runtime.jsx)(Hero,(0,objectSpread2.Z)((0,objectSpread2.Z)({},heroProps),{},{children:(0,jsx_runtime.jsx)(DefaultContent,{})})),(0,jsx_runtime.jsx)("div",{className:"oddly-padded",children:(0,jsx_runtime.jsx)("p",{children:"This text should align with the hero content box on all screen sizes"})}),(0,jsx_runtime.jsxs)("div",{className:"theme",children:[(0,jsx_runtime.jsx)("p",{children:"Applied theme:"}),(0,jsx_runtime.jsx)("pre",{children:JSON.stringify(theme,null,2)})]})]})};PlaygroundForTheme.argTypes=(0,objectSpread2.Z)((0,objectSpread2.Z)((0,objectSpread2.Z)({},getDisabledControl("centeredContent")),getDisabledControl("imageSrc")),{},{backgroundColor:(0,objectSpread2.Z)({defaultValue:"#f5a3c7",control:"color",description:"Background color. Also koros color, if not set."},getThemePropertyDescriptionAsSummary("--background-color")),color:(0,objectSpread2.Z)({defaultValue:"",control:"color",description:"Text color."},getThemePropertyDescriptionAsSummary("--color")),korosColor:(0,objectSpread2.Z)({defaultValue:"",control:"color",description:'Optional koros color. Default is "--background-color"'},getThemePropertyDescriptionAsSummary("--koros-color")),imagePosition:(0,objectSpread2.Z)({defaultValue:"",description:'How image is aligned to its container when image is larger than the container. Value can be any valid value for css rule "object-fit"',control:{type:"select",options:["top left","top center","top right","center left","center center","center right","bottom left","bottom center","bottom right",""]}},getThemePropertyDescriptionAsSummary("--image-position")),diagonalKorosPosition:(0,objectSpread2.Z)((0,objectSpread2.Z)({},korosPosition),getThemePropertyDescriptionAsSummary("--diagonal-koros-position")),horizontalPaddingSmall:(0,objectSpread2.Z)({defaultValue:"55px",control:"text",description:"Horizontal padding on small screens <768px."},getThemePropertyDescriptionAsSummary("--horizontal-padding-small")),horizontalPaddingMedium:(0,objectSpread2.Z)({defaultValue:"55px",control:"text",description:"Horizontal padding on medium screens >=768px."},getThemePropertyDescriptionAsSummary("--horizontal-padding-medium")),horizontalPaddingLarge:(0,objectSpread2.Z)({defaultValue:"55px",control:"text",description:"Horizontal padding on large screens >=992px."},getThemePropertyDescriptionAsSummary("--horizontal-padding-large")),horizontalPaddingXLarge:(0,objectSpread2.Z)({defaultValue:"55px",control:"text",description:"Horizontal padding on x-large screens >=1248px."},getThemePropertyDescriptionAsSummary("--horizontal-padding-x-large"))},createVariantArg("backgroundImage"));var AllHeroes=function AllHeroes(){var Divider=function Divider(){return(0,jsx_runtime.jsx)("div",{style:{height:"50px"}})};return(0,jsx_runtime.jsxs)("div",{style:{display:"flex",flexDirection:"column",backgroundColor:"#eafad4"},children:[(0,jsx_runtime.jsx)(NavigationComponent,{}),(0,jsx_runtime.jsx)(ImageLeft,(0,objectSpread2.Z)({},getDefaultArgs("imageLeft"))),(0,jsx_runtime.jsx)(Divider,{}),(0,jsx_runtime.jsx)(BackgroundImage,(0,objectSpread2.Z)({},(0,objectSpread2.Z)((0,objectSpread2.Z)({},getDefaultArgs("backgroundImage")),{},{theme:{"--koros-color":"#eafad4"}}))),(0,jsx_runtime.jsx)(Divider,{}),(0,jsx_runtime.jsx)(ImageRight,(0,objectSpread2.Z)({},getDefaultArgs("imageRight"))),(0,jsx_runtime.jsx)(Divider,{}),(0,jsx_runtime.jsx)(WithoutImage,(0,objectSpread2.Z)({},getDefaultArgs("noImage",noImageOptions[1]))),(0,jsx_runtime.jsx)(Divider,{}),(0,jsx_runtime.jsx)(DiagonalKoros,(0,objectSpread2.Z)({},getDefaultArgs("diagonalKoros"))),(0,jsx_runtime.jsx)(Divider,{}),(0,jsx_runtime.jsx)(WithoutImageKorosOverlay,(0,objectSpread2.Z)({},getDefaultArgs("noImage",noImageOptions[2]))),(0,jsx_runtime.jsx)(Divider,{}),(0,jsx_runtime.jsx)(ImageBottom,(0,objectSpread2.Z)({},getDefaultArgs("imageBottom"))),(0,jsx_runtime.jsx)(Divider,{}),(0,jsx_runtime.jsx)(WithoutImageAndKoros,(0,objectSpread2.Z)({},getDefaultArgs("noImage",noImageOptions[3]))),(0,jsx_runtime.jsx)(Divider,{})]})};AllHeroes.argTypes=(0,objectSpread2.Z)((0,objectSpread2.Z)((0,objectSpread2.Z)((0,objectSpread2.Z)((0,objectSpread2.Z)({},getDisabledControl("koros")),getDisabledControl("theme")),getDisabledControl("imageSrc")),getDisabledControl("centeredContent")),getDisabledControl("variant")),ImageLeft.parameters=(0,objectSpread2.Z)({storySource:{source:'(args) => {\n return (\n \n \n \n );\n}'}},ImageLeft.parameters),ImageRight.parameters=(0,objectSpread2.Z)({storySource:{source:'(args) => {\n return (\n \n \n \n );\n}'}},ImageRight.parameters),WithoutImage.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => {\n return (\n \n \n \n );\n}"}},WithoutImage.parameters),WithoutImageKorosOverlay.parameters=(0,objectSpread2.Z)({storySource:{source:'(args) => {\n return (\n \n \n \n );\n}'}},WithoutImageKorosOverlay.parameters),WithoutImageAndKoros.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => {\n return (\n \n \n \n );\n}"}},WithoutImageAndKoros.parameters),BackgroundImage.parameters=(0,objectSpread2.Z)({storySource:{source:'(args) => {\n return (\n \n \n \n );\n}'}},BackgroundImage.parameters),DiagonalKoros.parameters=(0,objectSpread2.Z)({storySource:{source:'(args) => {\n return (\n \n \n \n );\n}'}},DiagonalKoros.parameters),ImageBottom.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => {\n return (\n \n \n \n );\n}"}},ImageBottom.parameters),PlaygroundForKoros.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => {\n const heroProps: HeroProps = {\n koros: {\n type: args.type,\n dense: !!args.dense,\n hide: !!args.hide,\n ...args.koros,\n },\n theme: {\n '--background-color': '#9fc9eb',\n '--koros-color': args.color || '#9fc9eb',\n '--diagonal-koros-position': args.diagonalKorosPosition,\n ...args.theme,\n },\n imageSrc: imageFile,\n variant: args.variant,\n };\n return (\n
\n \n \n \n \n
\n

Applied theme:

\n 
{JSON.stringify(heroProps.theme, null, 2)}
\n
\n
\n

Applied koros:

\n 
{JSON.stringify(heroProps.koros, null, 2)}
\n
\n
\n );\n}"}},PlaygroundForKoros.parameters),EmbeddedToPage.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => {\n const { preset, variant } = args;\n const props = getDefaultArgs(variant, preset);\n const NoImage = () => {\n if (preset === noImageOptions[1]) {\n return ;\n }\n if (preset === noImageOptions[2]) {\n return ;\n }\n return ;\n };\n return (\n
\n \n {variant === 'imageRight' && }\n {variant === 'imageLeft' && }\n {variant === 'backgroundImage' && (\n \n )}\n {variant === 'diagonalKoros' && }\n {variant === 'noImage' && }\n {variant === 'imageBottom' && }\n
\n

Component after hero

\n This component shows padding after hero\n
\n
\n );\n}"}},EmbeddedToPage.parameters),PlaygroundForTheme.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => {\n const argsAsTheme = {\n '--background-color': args.backgroundColor,\n '--color': args.color,\n '--image-position': args.imagePosition,\n '--koros-color': args.korosColor,\n '--diagonal-koros-position': args.diagonalKorosPosition,\n '--horizontal-padding-small': args.horizontalPaddingSmall,\n '--horizontal-padding-medium': args.horizontalPaddingMedium,\n '--horizontal-padding-large': args.horizontalPaddingLarge,\n '--horizontal-padding-x-large': args.horizontalPaddingXLarge,\n ...args.theme,\n };\n\n const theme = Object.fromEntries(Object.entries(argsAsTheme).filter(([, value]) => !!value));\n const heroProps: HeroProps = {\n koros: args.koros,\n theme,\n imageSrc: imageFile,\n variant: args.variant,\n };\n return (\n
\n \n \n \n \n
\n

This text should align with the hero content box on all screen sizes

\n
\n
\n

Applied theme:

\n 
{JSON.stringify(theme, null, 2)}
\n
\n
\n );\n}"}},PlaygroundForTheme.parameters),AllHeroes.parameters=(0,objectSpread2.Z)({storySource:{source:"() => {\n const Divider = () => {\n return
;\n };\n\n return (\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n );\n}"}},AllHeroes.parameters);try{ImageLeft.displayName="ImageLeft",ImageLeft.__docgenInfo={description:"",displayName:"ImageLeft",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/hero/Hero.stories.tsx#ImageLeft"]={docgenInfo:ImageLeft.__docgenInfo,name:"ImageLeft",path:"src/components/hero/Hero.stories.tsx#ImageLeft"})}catch(__react_docgen_typescript_loader_error){}try{ImageRight.displayName="ImageRight",ImageRight.__docgenInfo={description:"",displayName:"ImageRight",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/hero/Hero.stories.tsx#ImageRight"]={docgenInfo:ImageRight.__docgenInfo,name:"ImageRight",path:"src/components/hero/Hero.stories.tsx#ImageRight"})}catch(__react_docgen_typescript_loader_error){}try{WithoutImage.displayName="WithoutImage",WithoutImage.__docgenInfo={description:"",displayName:"WithoutImage",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/hero/Hero.stories.tsx#WithoutImage"]={docgenInfo:WithoutImage.__docgenInfo,name:"WithoutImage",path:"src/components/hero/Hero.stories.tsx#WithoutImage"})}catch(__react_docgen_typescript_loader_error){}try{WithoutImageKorosOverlay.displayName="WithoutImageKorosOverlay",WithoutImageKorosOverlay.__docgenInfo={description:"",displayName:"WithoutImageKorosOverlay",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/hero/Hero.stories.tsx#WithoutImageKorosOverlay"]={docgenInfo:WithoutImageKorosOverlay.__docgenInfo,name:"WithoutImageKorosOverlay",path:"src/components/hero/Hero.stories.tsx#WithoutImageKorosOverlay"})}catch(__react_docgen_typescript_loader_error){}try{WithoutImageAndKoros.displayName="WithoutImageAndKoros",WithoutImageAndKoros.__docgenInfo={description:"",displayName:"WithoutImageAndKoros",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/hero/Hero.stories.tsx#WithoutImageAndKoros"]={docgenInfo:WithoutImageAndKoros.__docgenInfo,name:"WithoutImageAndKoros",path:"src/components/hero/Hero.stories.tsx#WithoutImageAndKoros"})}catch(__react_docgen_typescript_loader_error){}try{BackgroundImage.displayName="BackgroundImage",BackgroundImage.__docgenInfo={description:"",displayName:"BackgroundImage",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/hero/Hero.stories.tsx#BackgroundImage"]={docgenInfo:BackgroundImage.__docgenInfo,name:"BackgroundImage",path:"src/components/hero/Hero.stories.tsx#BackgroundImage"})}catch(__react_docgen_typescript_loader_error){}try{DiagonalKoros.displayName="DiagonalKoros",DiagonalKoros.__docgenInfo={description:"",displayName:"DiagonalKoros",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/hero/Hero.stories.tsx#DiagonalKoros"]={docgenInfo:DiagonalKoros.__docgenInfo,name:"DiagonalKoros",path:"src/components/hero/Hero.stories.tsx#DiagonalKoros"})}catch(__react_docgen_typescript_loader_error){}try{ImageBottom.displayName="ImageBottom",ImageBottom.__docgenInfo={description:"",displayName:"ImageBottom",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/hero/Hero.stories.tsx#ImageBottom"]={docgenInfo:ImageBottom.__docgenInfo,name:"ImageBottom",path:"src/components/hero/Hero.stories.tsx#ImageBottom"})}catch(__react_docgen_typescript_loader_error){}try{PlaygroundForKoros.displayName="PlaygroundForKoros",PlaygroundForKoros.__docgenInfo={description:"",displayName:"PlaygroundForKoros",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/hero/Hero.stories.tsx#PlaygroundForKoros"]={docgenInfo:PlaygroundForKoros.__docgenInfo,name:"PlaygroundForKoros",path:"src/components/hero/Hero.stories.tsx#PlaygroundForKoros"})}catch(__react_docgen_typescript_loader_error){}try{EmbeddedToPage.displayName="EmbeddedToPage",EmbeddedToPage.__docgenInfo={description:"",displayName:"EmbeddedToPage",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/hero/Hero.stories.tsx#EmbeddedToPage"]={docgenInfo:EmbeddedToPage.__docgenInfo,name:"EmbeddedToPage",path:"src/components/hero/Hero.stories.tsx#EmbeddedToPage"})}catch(__react_docgen_typescript_loader_error){}try{PlaygroundForTheme.displayName="PlaygroundForTheme",PlaygroundForTheme.__docgenInfo={description:"",displayName:"PlaygroundForTheme",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/hero/Hero.stories.tsx#PlaygroundForTheme"]={docgenInfo:PlaygroundForTheme.__docgenInfo,name:"PlaygroundForTheme",path:"src/components/hero/Hero.stories.tsx#PlaygroundForTheme"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/highlight/Highlight.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{DefaultHighlight:()=>DefaultHighlight,DefaultQuote:()=>DefaultQuote,HighlightCustomAccentColor:()=>HighlightCustomAccentColor,HighlightCustomTextColor:()=>HighlightCustomTextColor,HighlightLarge:()=>HighlightLarge,HighlightSmall:()=>HighlightSmall,QuoteCustomAccentColor:()=>QuoteCustomAccentColor,QuoteCustomTextColor:()=>QuoteCustomTextColor,QuoteLarge:()=>QuoteLarge,QuoteSmall:()=>QuoteSmall,default:()=>Highlight_stories});var objectSpread2=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),classNames=(__webpack_require__("../../node_modules/react/index.js"),__webpack_require__("./src/utils/classNames.ts")),useTheme=__webpack_require__("./src/hooks/useTheme.tsx");const Highlight_module={highlight:"Highlight_highlight__oDH8D highlight_hds-highlight__9de8e",highlightBlockquote:"Highlight_highlightBlockquote__n9dcE highlight_hds-blockquote__JvIxQ",text:"Highlight_text__IaHD9 highlight_hds-highlight__text__oEkQ7","size-s":"Highlight_size-s__hz2Ki highlight_hds-highlight--small__fbqUC","size-l":"Highlight_size-l__Eam1p highlight_hds-highlight--large__I-3J8",quote:"Highlight_quote__uPH4p highlight_hds-highlight__quote__Onvbj",reference:"Highlight_reference__kp6Rg highlight_hds-highlight__reference__EaWzI"};var jsx_runtime=__webpack_require__("../../node_modules/react/jsx-runtime.js"),Highlight=function Highlight(_ref){var theme=_ref.theme,size=_ref.size,type=_ref.type,text=_ref.text,reference=_ref.reference,customThemeClass=(0,useTheme.F)(Highlight_module.highlight,theme||{}),isQuote=type&&"quote"===type;return(0,jsx_runtime.jsxs)("figure",{className:(0,classNames.Z)(Highlight_module.highlight,size&&Highlight_module["size-".concat(size)],customThemeClass),children:[(0,jsx_runtime.jsx)("blockquote",{className:Highlight_module.highlightBlockquote,children:(0,jsx_runtime.jsx)("p",{className:(0,classNames.Z)(Highlight_module.text,isQuote&&Highlight_module.quote),children:text})}),reference&&(0,jsx_runtime.jsxs)("figcaption",{className:Highlight_module.reference,children:["—⁠",reference]})]})};try{Highlight.displayName="Highlight",Highlight.__docgenInfo={description:"",displayName:"Highlight",props:{theme:{defaultValue:null,description:"Highlight Theme",name:"theme",required:!1,type:{name:"HighlightTheme"}},size:{defaultValue:null,description:"Highlight size. Currently highlight comes in three sizes",name:"size",required:!1,type:{name:"enum",value:[{value:'"s"'},{value:'"m"'},{value:'"l"'}]}},type:{defaultValue:null,description:"Highlight type",name:"type",required:!1,type:{name:"enum",value:[{value:'"highlight"'},{value:'"quote"'}]}},text:{defaultValue:null,description:"Highlight or Quote text",name:"text",required:!0,type:{name:"string"}},reference:{defaultValue:null,description:"Reference text. Used with quote",name:"reference",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/highlight/Highlight.tsx#Highlight"]={docgenInfo:Highlight.__docgenInfo,name:"Highlight",path:"src/components/highlight/Highlight.tsx#Highlight"})}catch(__react_docgen_typescript_loader_error){}const Highlight_stories={component:Highlight,title:"Components/Highlight",parameters:{storySource:{source:"import React from 'react';\n\nimport { Highlight } from './Highlight';\n\nexport default {\n component: Highlight,\n title: 'Components/Highlight',\n parameters: {\n controls: { expanded: true },\n },\n};\n\nconst customColor = '#00005e';\n\nconst quoteArgs = { text: 'Add an interesting quote here', type: 'quote', reference: 'First name Last name. Title.' };\n\nconst highlightArgs = {\n text:\n 'You may select an highlight from the article to be displayed here. Select an excerpt that you want the user to pay attention to.',\n};\n\nexport const DefaultHighlight = (args) => ;\nDefaultHighlight.args = {\n ...highlightArgs,\n};\n\nexport const HighlightSmall = (args) => ;\nHighlightSmall.args = {\n ...highlightArgs,\n size: 'small',\n};\n\nexport const HighlightLarge = (args) => ;\nHighlightLarge.args = {\n ...highlightArgs,\n size: 'l',\n};\n\nexport const HighlightCustomAccentColor = (args) => ;\nHighlightCustomAccentColor.args = {\n ...highlightArgs,\n theme: {\n '--accent-line-color': customColor,\n },\n};\n\nexport const HighlightCustomTextColor = (args) => ;\nHighlightCustomTextColor.args = {\n ...highlightArgs,\n theme: {\n '--text-color': customColor,\n },\n};\n\nexport const DefaultQuote = (args) => ;\nDefaultQuote.args = {\n ...quoteArgs,\n};\n\nexport const QuoteLarge = (args) => ;\nQuoteLarge.args = {\n ...quoteArgs,\n size: 'l',\n};\n\nexport const QuoteSmall = (args) => ;\nQuoteSmall.args = {\n ...quoteArgs,\n size: 's',\n};\n\nexport const QuoteCustomAccentColor = (args) => ;\nQuoteCustomAccentColor.args = {\n ...quoteArgs,\n theme: {\n '--accent-line-color': customColor,\n },\n};\n\nexport const QuoteCustomTextColor = (args) => ;\nQuoteCustomTextColor.args = {\n ...quoteArgs,\n theme: {\n '--text-color': customColor,\n },\n};\n",locationsMap:{"default-highlight":{startLoc:{col:32,line:22},endLoc:{col:65,line:22},startBody:{col:32,line:22},endBody:{col:65,line:22}},"highlight-small":{startLoc:{col:30,line:27},endLoc:{col:63,line:27},startBody:{col:30,line:27},endBody:{col:63,line:27}},"highlight-large":{startLoc:{col:30,line:33},endLoc:{col:63,line:33},startBody:{col:30,line:33},endBody:{col:63,line:33}},"highlight-custom-accent-color":{startLoc:{col:42,line:39},endLoc:{col:75,line:39},startBody:{col:42,line:39},endBody:{col:75,line:39}},"highlight-custom-text-color":{startLoc:{col:40,line:47},endLoc:{col:73,line:47},startBody:{col:40,line:47},endBody:{col:73,line:47}},"default-quote":{startLoc:{col:28,line:55},endLoc:{col:61,line:55},startBody:{col:28,line:55},endBody:{col:61,line:55}},"quote-large":{startLoc:{col:26,line:60},endLoc:{col:59,line:60},startBody:{col:26,line:60},endBody:{col:59,line:60}},"quote-small":{startLoc:{col:26,line:66},endLoc:{col:59,line:66},startBody:{col:26,line:66},endBody:{col:59,line:66}},"quote-custom-accent-color":{startLoc:{col:38,line:72},endLoc:{col:71,line:72},startBody:{col:38,line:72},endBody:{col:71,line:72}},"quote-custom-text-color":{startLoc:{col:36,line:80},endLoc:{col:69,line:80},startBody:{col:36,line:80},endBody:{col:69,line:80}}}},controls:{expanded:!0}}};var quoteArgs={text:"Add an interesting quote here",type:"quote",reference:"First name Last name. Title."},highlightArgs={text:"You may select an highlight from the article to be displayed here. Select an excerpt that you want the user to pay attention to."},DefaultHighlight=function DefaultHighlight(args){return(0,jsx_runtime.jsx)(Highlight,(0,objectSpread2.Z)({},args))};DefaultHighlight.args=(0,objectSpread2.Z)({},highlightArgs);var HighlightSmall=function HighlightSmall(args){return(0,jsx_runtime.jsx)(Highlight,(0,objectSpread2.Z)({},args))};HighlightSmall.args=(0,objectSpread2.Z)((0,objectSpread2.Z)({},highlightArgs),{},{size:"small"});var HighlightLarge=function HighlightLarge(args){return(0,jsx_runtime.jsx)(Highlight,(0,objectSpread2.Z)({},args))};HighlightLarge.args=(0,objectSpread2.Z)((0,objectSpread2.Z)({},highlightArgs),{},{size:"l"});var HighlightCustomAccentColor=function HighlightCustomAccentColor(args){return(0,jsx_runtime.jsx)(Highlight,(0,objectSpread2.Z)({},args))};HighlightCustomAccentColor.args=(0,objectSpread2.Z)((0,objectSpread2.Z)({},highlightArgs),{},{theme:{"--accent-line-color":"#00005e"}});var HighlightCustomTextColor=function HighlightCustomTextColor(args){return(0,jsx_runtime.jsx)(Highlight,(0,objectSpread2.Z)({},args))};HighlightCustomTextColor.args=(0,objectSpread2.Z)((0,objectSpread2.Z)({},highlightArgs),{},{theme:{"--text-color":"#00005e"}});var DefaultQuote=function DefaultQuote(args){return(0,jsx_runtime.jsx)(Highlight,(0,objectSpread2.Z)({},args))};DefaultQuote.args=(0,objectSpread2.Z)({},quoteArgs);var QuoteLarge=function QuoteLarge(args){return(0,jsx_runtime.jsx)(Highlight,(0,objectSpread2.Z)({},args))};QuoteLarge.args=(0,objectSpread2.Z)((0,objectSpread2.Z)({},quoteArgs),{},{size:"l"});var QuoteSmall=function QuoteSmall(args){return(0,jsx_runtime.jsx)(Highlight,(0,objectSpread2.Z)({},args))};QuoteSmall.args=(0,objectSpread2.Z)((0,objectSpread2.Z)({},quoteArgs),{},{size:"s"});var QuoteCustomAccentColor=function QuoteCustomAccentColor(args){return(0,jsx_runtime.jsx)(Highlight,(0,objectSpread2.Z)({},args))};QuoteCustomAccentColor.args=(0,objectSpread2.Z)((0,objectSpread2.Z)({},quoteArgs),{},{theme:{"--accent-line-color":"#00005e"}});var QuoteCustomTextColor=function QuoteCustomTextColor(args){return(0,jsx_runtime.jsx)(Highlight,(0,objectSpread2.Z)({},args))};QuoteCustomTextColor.args=(0,objectSpread2.Z)((0,objectSpread2.Z)({},quoteArgs),{},{theme:{"--text-color":"#00005e"}}),DefaultHighlight.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => "}},DefaultHighlight.parameters),HighlightSmall.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => "}},HighlightSmall.parameters),HighlightLarge.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => "}},HighlightLarge.parameters),HighlightCustomAccentColor.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => "}},HighlightCustomAccentColor.parameters),HighlightCustomTextColor.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => "}},HighlightCustomTextColor.parameters),DefaultQuote.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => "}},DefaultQuote.parameters),QuoteLarge.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => "}},QuoteLarge.parameters),QuoteSmall.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => "}},QuoteSmall.parameters),QuoteCustomAccentColor.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => "}},QuoteCustomAccentColor.parameters),QuoteCustomTextColor.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => "}},QuoteCustomTextColor.parameters);try{DefaultHighlight.displayName="DefaultHighlight",DefaultHighlight.__docgenInfo={description:"",displayName:"DefaultHighlight",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/highlight/Highlight.stories.tsx#DefaultHighlight"]={docgenInfo:DefaultHighlight.__docgenInfo,name:"DefaultHighlight",path:"src/components/highlight/Highlight.stories.tsx#DefaultHighlight"})}catch(__react_docgen_typescript_loader_error){}try{HighlightSmall.displayName="HighlightSmall",HighlightSmall.__docgenInfo={description:"",displayName:"HighlightSmall",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/highlight/Highlight.stories.tsx#HighlightSmall"]={docgenInfo:HighlightSmall.__docgenInfo,name:"HighlightSmall",path:"src/components/highlight/Highlight.stories.tsx#HighlightSmall"})}catch(__react_docgen_typescript_loader_error){}try{HighlightLarge.displayName="HighlightLarge",HighlightLarge.__docgenInfo={description:"",displayName:"HighlightLarge",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/highlight/Highlight.stories.tsx#HighlightLarge"]={docgenInfo:HighlightLarge.__docgenInfo,name:"HighlightLarge",path:"src/components/highlight/Highlight.stories.tsx#HighlightLarge"})}catch(__react_docgen_typescript_loader_error){}try{HighlightCustomAccentColor.displayName="HighlightCustomAccentColor",HighlightCustomAccentColor.__docgenInfo={description:"",displayName:"HighlightCustomAccentColor",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/highlight/Highlight.stories.tsx#HighlightCustomAccentColor"]={docgenInfo:HighlightCustomAccentColor.__docgenInfo,name:"HighlightCustomAccentColor",path:"src/components/highlight/Highlight.stories.tsx#HighlightCustomAccentColor"})}catch(__react_docgen_typescript_loader_error){}try{HighlightCustomTextColor.displayName="HighlightCustomTextColor",HighlightCustomTextColor.__docgenInfo={description:"",displayName:"HighlightCustomTextColor",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/highlight/Highlight.stories.tsx#HighlightCustomTextColor"]={docgenInfo:HighlightCustomTextColor.__docgenInfo,name:"HighlightCustomTextColor",path:"src/components/highlight/Highlight.stories.tsx#HighlightCustomTextColor"})}catch(__react_docgen_typescript_loader_error){}try{DefaultQuote.displayName="DefaultQuote",DefaultQuote.__docgenInfo={description:"",displayName:"DefaultQuote",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/highlight/Highlight.stories.tsx#DefaultQuote"]={docgenInfo:DefaultQuote.__docgenInfo,name:"DefaultQuote",path:"src/components/highlight/Highlight.stories.tsx#DefaultQuote"})}catch(__react_docgen_typescript_loader_error){}try{QuoteLarge.displayName="QuoteLarge",QuoteLarge.__docgenInfo={description:"",displayName:"QuoteLarge",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/highlight/Highlight.stories.tsx#QuoteLarge"]={docgenInfo:QuoteLarge.__docgenInfo,name:"QuoteLarge",path:"src/components/highlight/Highlight.stories.tsx#QuoteLarge"})}catch(__react_docgen_typescript_loader_error){}try{QuoteSmall.displayName="QuoteSmall",QuoteSmall.__docgenInfo={description:"",displayName:"QuoteSmall",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/highlight/Highlight.stories.tsx#QuoteSmall"]={docgenInfo:QuoteSmall.__docgenInfo,name:"QuoteSmall",path:"src/components/highlight/Highlight.stories.tsx#QuoteSmall"})}catch(__react_docgen_typescript_loader_error){}try{QuoteCustomAccentColor.displayName="QuoteCustomAccentColor",QuoteCustomAccentColor.__docgenInfo={description:"",displayName:"QuoteCustomAccentColor",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/highlight/Highlight.stories.tsx#QuoteCustomAccentColor"]={docgenInfo:QuoteCustomAccentColor.__docgenInfo,name:"QuoteCustomAccentColor",path:"src/components/highlight/Highlight.stories.tsx#QuoteCustomAccentColor"})}catch(__react_docgen_typescript_loader_error){}try{QuoteCustomTextColor.displayName="QuoteCustomTextColor",QuoteCustomTextColor.__docgenInfo={description:"",displayName:"QuoteCustomTextColor",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/highlight/Highlight.stories.tsx#QuoteCustomTextColor"]={docgenInfo:QuoteCustomTextColor.__docgenInfo,name:"QuoteCustomTextColor",path:"src/components/highlight/Highlight.stories.tsx#QuoteCustomTextColor"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/imageWithCard/ImageWithCard.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,Hover:()=>Hover,HoverFullWidth:()=>HoverFullWidth,Playground:()=>Playground,Split:()=>Split,SplitFullWidth:()=>SplitFullWidth,default:()=>ImageWithCard_stories});var objectSpread2=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),blocks=(__webpack_require__("../../node_modules/react/index.js"),__webpack_require__("./node_modules/@storybook/addon-docs/blocks.js")),classNames=(__webpack_require__("./src/styles/base.css"),__webpack_require__("./src/utils/classNames.ts"));const ImageWithCard_module={wrapper:"ImageWithCard_wrapper__nLwcq",image:"ImageWithCard_image__Zbe9i",cardContainer:"ImageWithCard_cardContainer__XrK+a",card:"ImageWithCard_card__DHQyY helpers_text-body__t2yVb",rightAlignment:"ImageWithCard_rightAlignment__vwITo",leftAlignment:"ImageWithCard_leftAlignment__+x+LS",splitLayout:"ImageWithCard_splitLayout__XBkte",hoverLayout:"ImageWithCard_hoverLayout__zSkEn",fullWidth:"ImageWithCard_fullWidth__rIndJ",primary:"ImageWithCard_primary__AHsiC",secondary:"ImageWithCard_secondary__sMFDp",tertiary:"ImageWithCard_tertiary__nYixT"};var jsx_runtime=__webpack_require__("../../node_modules/react/jsx-runtime.js"),ImageWithCard=function ImageWithCard(_ref){var src=_ref.src,_ref$fullWidth=_ref.fullWidth,fullWidth=void 0!==_ref$fullWidth&&_ref$fullWidth,children=_ref.children,_ref$cardAlignment=_ref.cardAlignment,cardAlignment=void 0===_ref$cardAlignment?"left":_ref$cardAlignment,_ref$color=_ref.color,color=void 0===_ref$color?"plain":_ref$color,_ref$cardLayout=_ref.cardLayout,cardLayout=void 0===_ref$cardLayout?null:_ref$cardLayout,_ref$className=_ref.className,className=void 0===_ref$className?null:_ref$className;return(0,jsx_runtime.jsxs)("div",{className:(0,classNames.Z)(ImageWithCard_module.wrapper,ImageWithCard_module["".concat(cardAlignment,"Alignment")],cardLayout&&ImageWithCard_module["".concat(cardLayout,"Layout")],ImageWithCard_module[color],fullWidth&&ImageWithCard_module.fullWidth,className),children:[(0,jsx_runtime.jsx)("div",{className:ImageWithCard_module.image,style:{backgroundImage:"url(".concat(src,")")}}),children&&(0,jsx_runtime.jsx)("div",{className:ImageWithCard_module.cardContainer,children:(0,jsx_runtime.jsx)("div",{className:ImageWithCard_module.card,children})})]})};try{ImageWithCard.displayName="ImageWithCard",ImageWithCard.__docgenInfo={description:"",displayName:"ImageWithCard",props:{src:{defaultValue:null,description:"",name:"src",required:!0,type:{name:"string"}},fullWidth:{defaultValue:{value:"false"},description:"",name:"fullWidth",required:!1,type:{name:"boolean"}},cardAlignment:{defaultValue:{value:"left"},description:"",name:"cardAlignment",required:!1,type:{name:"enum",value:[{value:'"left"'},{value:'"right"'}]}},cardLayout:{defaultValue:{value:"null"},description:"",name:"cardLayout",required:!1,type:{name:"enum",value:[{value:'"split"'},{value:'"hover"'}]}},color:{defaultValue:{value:"plain"},description:"",name:"color",required:!1,type:{name:"enum",value:[{value:'"primary"'},{value:'"secondary"'},{value:'"tertiary"'},{value:'"plain"'}]}},className:{defaultValue:{value:"null"},description:"",name:"className",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/imageWithCard/ImageWithCard.tsx#ImageWithCard"]={docgenInfo:ImageWithCard.__docgenInfo,name:"ImageWithCard",path:"src/components/imageWithCard/ImageWithCard.tsx#ImageWithCard"})}catch(__react_docgen_typescript_loader_error){}var placeholder_1920x1080=__webpack_require__("./src/assets/img/placeholder_1920x1080.jpg"),contentText="Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident.",content=(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)("h2",{className:"heading-l",children:"Lorem ipsum"}),(0,jsx_runtime.jsx)("p",{style:{margin:"var(--spacing-l) 0"},children:contentText})]});const ImageWithCard_stories={component:ImageWithCard,title:"Components/ImageWithCard",parameters:{storySource:{source:"import React from 'react';\nimport { ArgsTable, Title } from '@storybook/addon-docs/blocks';\n\nimport { ImageWithCard } from './ImageWithCard';\nimport imageFile from '../../assets/img/placeholder_1920x1080.jpg';\n\nconst contentTitle = 'Lorem ipsum';\nconst contentText =\n 'Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident.';\n\nconst content = (\n <>\n

{contentTitle}

\n

{contentText}

\n \n);\n\nexport default {\n component: ImageWithCard,\n title: 'Components/ImageWithCard',\n parameters: {\n controls: { hideNoControlsWarning: true },\n layout: 'fullscreen',\n docs: {\n page: () => (\n <>\n Props\n \n \n ),\n },\n },\n};\n\nexport const Default = () => {content};\n\nexport const Hover = () => (\n \n {content}\n \n);\n\nexport const HoverFullWidth = () => (\n \n {content}\n \n);\nHoverFullWidth.storyName = 'Hover full width';\n\nexport const Split = () => (\n \n {content}\n \n);\n\nexport const SplitFullWidth = () => (\n \n {content}\n \n);\nSplitFullWidth.storyName = 'Split full width';\n\nexport const Playground = (args) => (\n \n

{args.title}

\n

{args.text}

\n \n);\n\nPlayground.parameters = {\n previewTabs: {\n 'storybook/docs/panel': {\n hidden: true,\n },\n },\n docs: {\n disable: true,\n },\n};\n\nPlayground.args = {\n title: contentTitle,\n text: contentText,\n color: 'plain',\n fullWidth: false,\n cardAlignment: 'left',\n cardLayout: null,\n};\n\nPlayground.argTypes = {\n color: {\n options: ['plain', 'primary', 'secondary', 'tertiary'],\n control: { type: 'radio' },\n },\n cardAlignment: {\n options: ['left', 'right'],\n control: { type: 'radio' },\n },\n cardLayout: {\n options: ['hover', 'split', null],\n control: { type: 'radio' },\n },\n};\n",locationsMap:{default:{startLoc:{col:23,line:35},endLoc:{col:85,line:35},startBody:{col:23,line:35},endBody:{col:85,line:35}},hover:{startLoc:{col:21,line:37},endLoc:{col:1,line:41},startBody:{col:21,line:37},endBody:{col:1,line:41}},"hover-full-width":{startLoc:{col:30,line:43},endLoc:{col:1,line:47},startBody:{col:30,line:43},endBody:{col:1,line:47}},split:{startLoc:{col:21,line:50},endLoc:{col:1,line:54},startBody:{col:21,line:50},endBody:{col:1,line:54}},"split-full-width":{startLoc:{col:30,line:56},endLoc:{col:1,line:60},startBody:{col:30,line:56},endBody:{col:1,line:60}},playground:{startLoc:{col:26,line:63},endLoc:{col:1,line:74},startBody:{col:26,line:63},endBody:{col:1,line:74}}}},controls:{hideNoControlsWarning:!0},layout:"fullscreen",docs:{page:function page(){return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(blocks.Dx,{children:"Props"}),(0,jsx_runtime.jsx)(blocks.$4,{})]})}}}};var Default=function Default(){return(0,jsx_runtime.jsx)(ImageWithCard,{src:placeholder_1920x1080,children:content})},Hover=function Hover(){return(0,jsx_runtime.jsx)(ImageWithCard,{cardLayout:"hover",src:placeholder_1920x1080,children:content})},HoverFullWidth=function HoverFullWidth(){return(0,jsx_runtime.jsx)(ImageWithCard,{cardLayout:"hover",fullWidth:!0,src:placeholder_1920x1080,children:content})};HoverFullWidth.storyName="Hover full width";var Split=function Split(){return(0,jsx_runtime.jsx)(ImageWithCard,{cardLayout:"split",src:placeholder_1920x1080,children:content})},SplitFullWidth=function SplitFullWidth(){return(0,jsx_runtime.jsx)(ImageWithCard,{cardLayout:"split",fullWidth:!0,src:placeholder_1920x1080,children:content})};SplitFullWidth.storyName="Split full width";var Playground=function Playground(args){return(0,jsx_runtime.jsxs)(ImageWithCard,{color:args.color,cardAlignment:args.cardAlignment,fullWidth:args.fullWidth,cardLayout:args.cardLayout,src:placeholder_1920x1080,children:[(0,jsx_runtime.jsx)("h2",{style:{fontSize:"var(--fontsize-heading-l)"},children:args.title}),(0,jsx_runtime.jsx)("p",{style:{margin:"var(--spacing-l) 0"},children:args.text})]})};Playground.parameters={previewTabs:{"storybook/docs/panel":{hidden:!0}},docs:{disable:!0}},Playground.args={title:"Lorem ipsum",text:contentText,color:"plain",fullWidth:!1,cardAlignment:"left",cardLayout:null},Playground.argTypes={color:{options:["plain","primary","secondary","tertiary"],control:{type:"radio"}},cardAlignment:{options:["left","right"],control:{type:"radio"}},cardLayout:{options:["hover","split",null],control:{type:"radio"}}},Default.parameters=(0,objectSpread2.Z)({storySource:{source:"() => {content}"}},Default.parameters),Hover.parameters=(0,objectSpread2.Z)({storySource:{source:'() => (\n \n {content}\n \n)'}},Hover.parameters),HoverFullWidth.parameters=(0,objectSpread2.Z)({storySource:{source:'() => (\n \n {content}\n \n)'}},HoverFullWidth.parameters),Split.parameters=(0,objectSpread2.Z)({storySource:{source:'() => (\n \n {content}\n \n)'}},Split.parameters),SplitFullWidth.parameters=(0,objectSpread2.Z)({storySource:{source:'() => (\n \n {content}\n \n)'}},SplitFullWidth.parameters),Playground.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => (\n \n

{args.title}

\n

{args.text}

\n \n)"}},Playground.parameters);try{Playground.displayName="Playground",Playground.__docgenInfo={description:"",displayName:"Playground",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/imageWithCard/ImageWithCard.stories.tsx#Playground"]={docgenInfo:Playground.__docgenInfo,name:"Playground",path:"src/components/imageWithCard/ImageWithCard.stories.tsx#Playground"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/koros/Koros.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Basic:()=>Basic,Beat:()=>Beat,Calm:()=>Calm,CustomColor:()=>CustomColor,Dense:()=>Dense,ExactFit:()=>ExactFit,Flipped:()=>Flipped,Playground:()=>Playground,Pulse:()=>Pulse,Rotated:()=>Rotated,RotatedInContainer:()=>RotatedInContainer,Vibration:()=>Vibration,Wave:()=>Wave,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_1__=(__webpack_require__("../../node_modules/react/index.js"),__webpack_require__("./node_modules/@storybook/addon-docs/blocks.js")),_Koros__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/components/koros/Koros.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/react/jsx-runtime.js");const __WEBPACK_DEFAULT_EXPORT__={component:_Koros__WEBPACK_IMPORTED_MODULE_3__.N,title:"Components/Koros",parameters:{storySource:{source:"import React from 'react';\nimport { ArgsTable, Stories, Title } from '@storybook/addon-docs/blocks';\n\nimport { getShapeHeight, Koros } from './Koros';\n\nexport default {\n component: Koros,\n title: 'Components/Koros',\n parameters: {\n controls: { hideNoControlsWarning: true },\n docs: {\n page: () => (\n <>\n Props\n \n \n \n ),\n },\n },\n};\n\nexport const Basic = () => ;\n\nexport const Beat = () => ;\n\nexport const Pulse = () => ;\n\nexport const Vibration = () => ;\n\nexport const Wave = () => ;\n\nexport const Calm = () => ;\n\nexport const Dense = () => (\n <>\n \n
\n \n
\n \n
\n \n
\n \n \n);\n\nexport const Flipped = (args) => (\n <>\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n \n);\n\nFlipped.args = {\n flipVertical: true,\n};\n\nexport const Rotated = (args) => ;\n\nRotated.args = {\n type: 'basic',\n flipVertical: false,\n rotate: '45deg',\n};\n\nexport const RotatedInContainer = () => {\n const rootStyle = { '--koros-height': '85px', '--hero-height': '300px', '--hero-width': '500px' };\n\n return (\n \n \n \n
\n );\n};\n\nexport const CustomColor = () => ;\n\nexport const ExactFit = (args) => {\n const korosProps = {\n style: { fill: 'var(--color-coat-of-arms)' },\n ...args,\n };\n\n const containerStyle = {\n height: `${getShapeHeight(korosProps)}px`,\n overflow: 'hidden',\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'flex-end',\n } as React.CSSProperties;\n\n return (\n
\n \n
\n );\n};\n\nexport const Playground = (args) => ;\n\nPlayground.parameters = {\n previewTabs: {\n 'storybook/docs/panel': {\n hidden: true,\n },\n },\n docs: {\n disable: true,\n },\n};\n\nPlayground.args = {\n type: 'basic',\n flipVertical: false,\n rotate: '',\n};\n\nPlayground.argTypes = {\n type: {\n options: ['basic', 'beat', 'pulse', 'vibration', 'wave'],\n control: { type: 'radio' },\n },\n};\n",locationsMap:{basic:{startLoc:{col:21,line:23},endLoc:{col:36,line:23},startBody:{col:21,line:23},endBody:{col:36,line:23}},beat:{startLoc:{col:20,line:25},endLoc:{col:47,line:25},startBody:{col:20,line:25},endBody:{col:47,line:25}},pulse:{startLoc:{col:21,line:27},endLoc:{col:49,line:27},startBody:{col:21,line:27},endBody:{col:49,line:27}},vibration:{startLoc:{col:25,line:29},endLoc:{col:57,line:29},startBody:{col:25,line:29},endBody:{col:57,line:29}},wave:{startLoc:{col:20,line:31},endLoc:{col:47,line:31},startBody:{col:20,line:31},endBody:{col:47,line:31}},calm:{startLoc:{col:20,line:33},endLoc:{col:47,line:33},startBody:{col:20,line:33},endBody:{col:47,line:33}},dense:{startLoc:{col:21,line:35},endLoc:{col:1,line:47},startBody:{col:21,line:35},endBody:{col:1,line:47}},flipped:{startLoc:{col:23,line:49},endLoc:{col:1,line:65},startBody:{col:23,line:49},endBody:{col:1,line:65}},rotated:{startLoc:{col:23,line:71},endLoc:{col:113,line:71},startBody:{col:23,line:71},endBody:{col:113,line:71}},"rotated-in-container":{startLoc:{col:34,line:79},endLoc:{col:1,line:114},startBody:{col:34,line:79},endBody:{col:1,line:114}},"custom-color":{startLoc:{col:27,line:116},endLoc:{col:88,line:116},startBody:{col:27,line:116},endBody:{col:88,line:116}},"exact-fit":{startLoc:{col:24,line:118},endLoc:{col:1,line:137},startBody:{col:24,line:118},endBody:{col:1,line:137}},playground:{startLoc:{col:26,line:139},endLoc:{col:116,line:139},startBody:{col:26,line:139},endBody:{col:116,line:139}}}},controls:{hideNoControlsWarning:!0},docs:{page:function page(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_1__.Dx,{children:"Props"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_1__.$4,{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_1__.fQ,{title:"Examples",includePrimary:!0})]})}}}};var Basic=function Basic(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Koros__WEBPACK_IMPORTED_MODULE_3__.N,{})},Beat=function Beat(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Koros__WEBPACK_IMPORTED_MODULE_3__.N,{type:"beat"})},Pulse=function Pulse(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Koros__WEBPACK_IMPORTED_MODULE_3__.N,{type:"pulse"})},Vibration=function Vibration(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Koros__WEBPACK_IMPORTED_MODULE_3__.N,{type:"vibration"})},Wave=function Wave(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Koros__WEBPACK_IMPORTED_MODULE_3__.N,{type:"wave"})},Calm=function Calm(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Koros__WEBPACK_IMPORTED_MODULE_3__.N,{type:"calm"})},Dense=function Dense(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Koros__WEBPACK_IMPORTED_MODULE_3__.N,{dense:!0}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Koros__WEBPACK_IMPORTED_MODULE_3__.N,{dense:!0,type:"beat"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Koros__WEBPACK_IMPORTED_MODULE_3__.N,{dense:!0,type:"pulse"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Koros__WEBPACK_IMPORTED_MODULE_3__.N,{dense:!0,type:"vibration"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Koros__WEBPACK_IMPORTED_MODULE_3__.N,{dense:!0,type:"wave"})]})},Flipped=function Flipped(args){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Koros__WEBPACK_IMPORTED_MODULE_3__.N,{flipVertical:args.flipVertical}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Koros__WEBPACK_IMPORTED_MODULE_3__.N,{type:"beat",flipVertical:args.flipVertical}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Koros__WEBPACK_IMPORTED_MODULE_3__.N,{type:"pulse",flipVertical:args.flipVertical}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Koros__WEBPACK_IMPORTED_MODULE_3__.N,{type:"vibration",flipVertical:args.flipVertical}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Koros__WEBPACK_IMPORTED_MODULE_3__.N,{type:"wave",flipVertical:args.flipVertical})]})};Flipped.args={flipVertical:!0};var Rotated=function Rotated(args){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Koros__WEBPACK_IMPORTED_MODULE_3__.N,{type:args.type,flipVertical:args.flipVertical,rotate:args.rotate})};Rotated.args={type:"basic",flipVertical:!1,rotate:"45deg"};var RotatedInContainer=function RotatedInContainer(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("div",{style:(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({},{"--koros-height":"85px","--hero-height":"300px","--hero-width":"500px"}),{},{backgroundColor:"var(--color-silver-light)",height:"var(--hero-height)",maxWidth:"100%",overflow:"hidden",position:"relative",width:"var(--hero-width)"}),children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div",{style:{backgroundColor:"var(--color-coat-of-arms)",clipPath:"polygon(0 0, var(--hero-height) 0, 0 100%, 0% 100%)",height:"100%"}}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Koros__WEBPACK_IMPORTED_MODULE_3__.N,{style:{fill:"var(--color-coat-of-arms)",left:"calc(-1 * var(--koros-height))",position:"absolute",top:"var(--koros-height)",transformOrigin:"center",width:"calc(2 * var(--hero-height))"},rotate:"135deg"})]})},CustomColor=function CustomColor(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Koros__WEBPACK_IMPORTED_MODULE_3__.N,{style:{fill:"var(--color-coat-of-arms)"}})},ExactFit=function ExactFit(args){var korosProps=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({style:{fill:"var(--color-coat-of-arms)"}},args),containerStyle={height:"".concat((0,_Koros__WEBPACK_IMPORTED_MODULE_3__.X)(korosProps),"px"),overflow:"hidden",display:"flex",flexDirection:"row",justifyContent:"flex-end"};return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div",{style:containerStyle,children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Koros__WEBPACK_IMPORTED_MODULE_3__.N,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({},korosProps))})},Playground=function Playground(args){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Koros__WEBPACK_IMPORTED_MODULE_3__.N,{type:args.type,flipVertical:args.flipVertical,rotate:args.rotate})};Playground.parameters={previewTabs:{"storybook/docs/panel":{hidden:!0}},docs:{disable:!0}},Playground.args={type:"basic",flipVertical:!1,rotate:""},Playground.argTypes={type:{options:["basic","beat","pulse","vibration","wave"],control:{type:"radio"}}},Basic.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({storySource:{source:"() => "}},Basic.parameters),Beat.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({storySource:{source:'() => '}},Beat.parameters),Pulse.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({storySource:{source:'() => '}},Pulse.parameters),Vibration.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({storySource:{source:'() => '}},Vibration.parameters),Wave.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({storySource:{source:'() => '}},Wave.parameters),Calm.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({storySource:{source:'() => '}},Calm.parameters),Dense.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({storySource:{source:'() => (\n <>\n \n
\n \n
\n \n
\n \n
\n \n \n)'}},Dense.parameters),Flipped.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({storySource:{source:'(args) => (\n <>\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n \n)'}},Flipped.parameters),Rotated.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({storySource:{source:"(args) => "}},Rotated.parameters),RotatedInContainer.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({storySource:{source:"() => {\n const rootStyle = { '--koros-height': '85px', '--hero-height': '300px', '--hero-width': '500px' };\n\n return (\n \n \n \n
\n );\n}"}},RotatedInContainer.parameters),CustomColor.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({storySource:{source:"() => "}},CustomColor.parameters),ExactFit.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({storySource:{source:"(args) => {\n const korosProps = {\n style: { fill: 'var(--color-coat-of-arms)' },\n ...args,\n };\n\n const containerStyle = {\n height: `${getShapeHeight(korosProps)}px`,\n overflow: 'hidden',\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'flex-end',\n } as React.CSSProperties;\n\n return (\n
\n \n
\n );\n}"}},ExactFit.parameters),Playground.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({storySource:{source:"(args) => "}},Playground.parameters);try{Flipped.displayName="Flipped",Flipped.__docgenInfo={description:"",displayName:"Flipped",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/koros/Koros.stories.tsx#Flipped"]={docgenInfo:Flipped.__docgenInfo,name:"Flipped",path:"src/components/koros/Koros.stories.tsx#Flipped"})}catch(__react_docgen_typescript_loader_error){}try{Rotated.displayName="Rotated",Rotated.__docgenInfo={description:"",displayName:"Rotated",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/koros/Koros.stories.tsx#Rotated"]={docgenInfo:Rotated.__docgenInfo,name:"Rotated",path:"src/components/koros/Koros.stories.tsx#Rotated"})}catch(__react_docgen_typescript_loader_error){}try{ExactFit.displayName="ExactFit",ExactFit.__docgenInfo={description:"",displayName:"ExactFit",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/koros/Koros.stories.tsx#ExactFit"]={docgenInfo:ExactFit.__docgenInfo,name:"ExactFit",path:"src/components/koros/Koros.stories.tsx#ExactFit"})}catch(__react_docgen_typescript_loader_error){}try{Playground.displayName="Playground",Playground.__docgenInfo={description:"",displayName:"Playground",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/koros/Koros.stories.tsx#Playground"]={docgenInfo:Playground.__docgenInfo,name:"Playground",path:"src/components/koros/Koros.stories.tsx#Playground"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/link/Link.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,ExternalLinks:()=>ExternalLinks,InternalLinks:()=>InternalLinks,OpenInNewTabLink:()=>OpenInNewTabLink,default:()=>__WEBPACK_DEFAULT_EXPORT__,inlineLinks:()=>inlineLinks,standaloneLink:()=>standaloneLink,visitedStylesDisabled:()=>visitedStylesDisabled,withCustomIcon:()=>withCustomIcon});var _Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),_Link__WEBPACK_IMPORTED_MODULE_2__=(__webpack_require__("../../node_modules/react/index.js"),__webpack_require__("./src/components/link/Link.tsx")),_icons__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/icons/IconDocument.tsx"),_icons__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./src/icons/IconPhone.tsx"),_icons__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./src/icons/IconEnvelope.tsx"),_icons__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./src/icons/IconPhoto.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/react/jsx-runtime.js");const __WEBPACK_DEFAULT_EXPORT__={component:_Link__WEBPACK_IMPORTED_MODULE_2__.r,title:"Components/Link",decorators:[function(storyFn){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div",{style:{maxWidth:"600px"},children:storyFn()})}],parameters:{storySource:{source:'import React from \'react\';\n\nimport { Link } from \'./Link\';\nimport { IconDocument, IconEnvelope, IconPhone, IconPhoto } from \'../../icons\';\n\nexport default {\n component: Link,\n title: \'Components/Link\',\n decorators: [(storyFn) =>
{storyFn()}
],\n parameters: {\n controls: { expanded: true },\n },\n args: {\n href: \'/?path=/docs/components-link--internal-links\',\n },\n};\n\nexport const Default = (args) => Default link;\n\nexport const InternalLinks = (args) => {\n return (\n <>\n \n Internal link size S\n \n
\n
\n \n Internal link size M\n \n
\n
\n \n Internal link size L\n \n \n );\n};\nInternalLinks.storyName = \'Internal links\';\nInternalLinks.argTypes = {\n size: {\n control: false,\n },\n external: {\n control: false,\n },\n};\n\nexport const ExternalLinks = (args) => {\n return (\n <>\n \n External link size S\n \n
\n
\n \n External link size M\n \n
\n
\n \n External link size L\n \n \n );\n};\n\nExternalLinks.storyName = \'External links\';\nExternalLinks.argTypes = {\n size: {\n control: false,\n },\n external: {\n control: false,\n },\n};\n\nexport const OpenInNewTabLink = (args) => (\n \n Link that opens in a new tab\n \n);\nOpenInNewTabLink.storyName = \'Link that opens in a new tab\';\nOpenInNewTabLink.args = {\n openInNewTabAriaLabel: \'Opens in a new tab.\',\n openInExternalDomainAriaLabel: \'Opens a different website\',\n openInNewTab: true,\n external: true,\n};\n\nexport const visitedStylesDisabled = (args) => (\n \n Link without visited styles\n \n);\nvisitedStylesDisabled.storyName = \'Link without visited styles\';\nvisitedStylesDisabled.args = {\n disableVisitedStyles: true,\n};\n\nexport const inlineLinks = (args) => {\n return (\n <>\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n \n Inline link\n \n consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est\n laborum.\n

\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n \n Inline link\n \n consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est\n laborum.\n

\n \n );\n};\n\ninlineLinks.storyName = \'Inline links\';\ninlineLinks.argTypes = {\n size: {\n control: false,\n },\n};\n\nexport const standaloneLink = (args) => {\n return (\n \n Standalone link\n \n );\n};\n\nstandaloneLink.storyName = \'Standalone link\';\n\nexport const withCustomIcon = (args) => {\n return (\n
\n
\n

Small

\n } size="S" href="/#">\n Document link\n \n
\n
\n } size="S" href="/#">\n Phone link\n \n
\n
\n } size="S" href="/#">\n Envelope link\n \n
\n
\n } size="S" href="/#">\n Photo link\n \n
\n
\n

Medium

\n } size="M" href="/#">\n Document link\n \n
\n
\n } size="M" href="/#">\n Phone link\n \n
\n
\n } size="M" href="/#">\n Envelope link\n \n
\n
\n } size="M" href="/#">\n Photo link\n \n
\n
\n

Large

\n } size="L" href="/#">\n Document link\n \n
\n
\n } size="L" href="/#">\n Phone Link\n \n
\n
\n } size="L" href="/#">\n Envelope Link\n \n
\n
\n } size="L" href="/#">\n Photo Link\n \n
\n
\n );\n};\n\nwithCustomIcon.storyName = \'With a custom icon\';\nwithCustomIcon.argTypes = {\n size: {\n control: false,\n },\n};\n',locationsMap:{default:{startLoc:{col:23,line:18},endLoc:{col:68,line:18},startBody:{col:23,line:18},endBody:{col:68,line:18}},"internal-links":{startLoc:{col:29,line:20},endLoc:{col:1,line:38},startBody:{col:29,line:20},endBody:{col:1,line:38}},"external-links":{startLoc:{col:29,line:49},endLoc:{col:1,line:85},startBody:{col:29,line:49},endBody:{col:1,line:85}},"open-in-new-tab-link":{startLoc:{col:32,line:97},endLoc:{col:1,line:108},startBody:{col:32,line:97},endBody:{col:1,line:108}},"visited-styles-disabled":{startLoc:{col:37,line:117},endLoc:{col:1,line:121},startBody:{col:37,line:117},endBody:{col:1,line:121}},"inline-links":{startLoc:{col:27,line:127},endLoc:{col:1,line:152},startBody:{col:27,line:127},endBody:{col:1,line:152}},"standalone-link":{startLoc:{col:30,line:161},endLoc:{col:1,line:167},startBody:{col:30,line:161},endBody:{col:1,line:167}},"with-custom-icon":{startLoc:{col:30,line:171},endLoc:{col:1,line:239},startBody:{col:30,line:171},endBody:{col:1,line:239}}}},controls:{expanded:!0}},args:{href:"/?path=/docs/components-link--internal-links"}};var Default=function Default(args){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Link__WEBPACK_IMPORTED_MODULE_2__.r,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},args),{},{children:"Default link"}))},InternalLinks=function InternalLinks(args){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Link__WEBPACK_IMPORTED_MODULE_2__.r,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},args),{},{href:args.href,size:"S",children:"Internal link size S"})),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Link__WEBPACK_IMPORTED_MODULE_2__.r,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},args),{},{href:args.href,size:"M",children:"Internal link size M"})),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Link__WEBPACK_IMPORTED_MODULE_2__.r,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},args),{},{href:args.href,size:"L",children:"Internal link size L"}))]})};InternalLinks.storyName="Internal links",InternalLinks.argTypes={size:{control:!1},external:{control:!1}};var ExternalLinks=function ExternalLinks(args){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Link__WEBPACK_IMPORTED_MODULE_2__.r,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},args),{},{external:!0,openInExternalDomainAriaLabel:"Opens a different website",size:"S",href:"https://hds.hel.fi",children:"External link size S"})),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Link__WEBPACK_IMPORTED_MODULE_2__.r,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},args),{},{external:!0,openInExternalDomainAriaLabel:"Opens a different website",size:"M",href:"https://hds.hel.fi",children:"External link size M"})),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Link__WEBPACK_IMPORTED_MODULE_2__.r,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},args),{},{external:!0,openInExternalDomainAriaLabel:"Opens a different website",size:"L",href:"https://hds.hel.fi",children:"External link size L"}))]})};ExternalLinks.storyName="External links",ExternalLinks.argTypes={size:{control:!1},external:{control:!1}};var OpenInNewTabLink=function OpenInNewTabLink(args){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Link__WEBPACK_IMPORTED_MODULE_2__.r,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},args),{},{href:"https://hds.hel.fi",external:args.external,openInExternalDomainAriaLabel:args.openInExternalDomainAriaLabel,openInNewTabAriaLabel:args.openInNewTabAriaLabel,openInNewTab:args.openInNewTab,children:"Link that opens in a new tab"}))};OpenInNewTabLink.storyName="Link that opens in a new tab",OpenInNewTabLink.args={openInNewTabAriaLabel:"Opens in a new tab.",openInExternalDomainAriaLabel:"Opens a different website",openInNewTab:!0,external:!0};var visitedStylesDisabled=function visitedStylesDisabled(args){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Link__WEBPACK_IMPORTED_MODULE_2__.r,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},args),{},{href:args.href,disableVisitedStyles:args.disableVisitedStyles,children:"Link without visited styles"}))};visitedStylesDisabled.storyName="Link without visited styles",visitedStylesDisabled.args={disableVisitedStyles:!0};var inlineLinks=function inlineLinks(args){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)("p",{style:{fontSize:"14px"},children:["Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Link__WEBPACK_IMPORTED_MODULE_2__.r,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({size:"S"},args),{},{external:!0,openInExternalDomainAriaLabel:"Opens a different website",children:"Inline link"})),"consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)("p",{style:{fontSize:"16px"},children:["Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Link__WEBPACK_IMPORTED_MODULE_2__.r,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},args),{},{external:!0,openInExternalDomainAriaLabel:"Opens a different website",children:"Inline link"})),"consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."]})]})};inlineLinks.storyName="Inline links",inlineLinks.argTypes={size:{control:!1}};var standaloneLink=function standaloneLink(args){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Link__WEBPACK_IMPORTED_MODULE_2__.r,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},args),{},{size:"L",style:{display:"block",marginBottom:"20px",width:"fit-content"},children:"Standalone link"}))};standaloneLink.storyName="Standalone link";var withCustomIcon=function withCustomIcon(args){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)("div",{style:{display:"grid",columnGap:"10px",gridTemplateColumns:"1fr 1fr 1fr"},children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)("div",{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("p",{children:"Small"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Link__WEBPACK_IMPORTED_MODULE_2__.r,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},args),{},{iconLeft:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_icons__WEBPACK_IMPORTED_MODULE_4__.IconDocument,{size:"xs","aria-hidden":!0}),size:"S",href:"/#",children:"Document link"})),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Link__WEBPACK_IMPORTED_MODULE_2__.r,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},args),{},{iconLeft:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_icons__WEBPACK_IMPORTED_MODULE_5__.IconPhone,{size:"xs","aria-hidden":!0}),size:"S",href:"/#",children:"Phone link"})),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Link__WEBPACK_IMPORTED_MODULE_2__.r,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},args),{},{iconLeft:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_icons__WEBPACK_IMPORTED_MODULE_6__.IconEnvelope,{size:"xs","aria-hidden":!0}),size:"S",href:"/#",children:"Envelope link"})),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Link__WEBPACK_IMPORTED_MODULE_2__.r,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},args),{},{iconLeft:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_icons__WEBPACK_IMPORTED_MODULE_7__.IconPhoto,{size:"xs","aria-hidden":!0}),size:"S",href:"/#",children:"Photo link"}))]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)("div",{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("p",{children:"Medium"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Link__WEBPACK_IMPORTED_MODULE_2__.r,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},args),{},{iconLeft:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_icons__WEBPACK_IMPORTED_MODULE_4__.IconDocument,{size:"s","aria-hidden":!0}),size:"M",href:"/#",children:"Document link"})),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Link__WEBPACK_IMPORTED_MODULE_2__.r,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},args),{},{iconLeft:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_icons__WEBPACK_IMPORTED_MODULE_5__.IconPhone,{size:"s","aria-hidden":!0}),size:"M",href:"/#",children:"Phone link"})),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Link__WEBPACK_IMPORTED_MODULE_2__.r,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},args),{},{iconLeft:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_icons__WEBPACK_IMPORTED_MODULE_6__.IconEnvelope,{size:"s","aria-hidden":!0}),size:"M",href:"/#",children:"Envelope link"})),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Link__WEBPACK_IMPORTED_MODULE_2__.r,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},args),{},{iconLeft:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_icons__WEBPACK_IMPORTED_MODULE_7__.IconPhoto,{size:"s","aria-hidden":!0}),size:"M",href:"/#",children:"Photo link"}))]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)("div",{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("p",{children:"Large"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Link__WEBPACK_IMPORTED_MODULE_2__.r,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},args),{},{iconLeft:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_icons__WEBPACK_IMPORTED_MODULE_4__.IconDocument,{size:"l","aria-hidden":!0}),size:"L",href:"/#",children:"Document link"})),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Link__WEBPACK_IMPORTED_MODULE_2__.r,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},args),{},{iconLeft:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_icons__WEBPACK_IMPORTED_MODULE_5__.IconPhone,{size:"l","aria-hidden":!0}),size:"L",href:"/#",children:"Phone Link"})),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Link__WEBPACK_IMPORTED_MODULE_2__.r,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},args),{},{iconLeft:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_icons__WEBPACK_IMPORTED_MODULE_6__.IconEnvelope,{size:"l","aria-hidden":!0}),size:"L",href:"/#",children:"Envelope Link"})),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Link__WEBPACK_IMPORTED_MODULE_2__.r,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},args),{},{iconLeft:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_icons__WEBPACK_IMPORTED_MODULE_7__.IconPhoto,{size:"l","aria-hidden":!0}),size:"L",href:"/#",children:"Photo Link"}))]})]})};withCustomIcon.storyName="With a custom icon",withCustomIcon.argTypes={size:{control:!1}},Default.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:"(args) => Default link"}},Default.parameters),InternalLinks.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:'(args) => {\n return (\n <>\n \n Internal link size S\n \n
\n
\n \n Internal link size M\n \n
\n
\n \n Internal link size L\n \n \n );\n}'}},InternalLinks.parameters),ExternalLinks.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:'(args) => {\n return (\n <>\n \n External link size S\n \n
\n
\n \n External link size M\n \n
\n
\n \n External link size L\n \n \n );\n}'}},ExternalLinks.parameters),OpenInNewTabLink.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:'(args) => (\n \n Link that opens in a new tab\n \n)'}},OpenInNewTabLink.parameters),visitedStylesDisabled.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:"(args) => (\n \n Link without visited styles\n \n)"}},visitedStylesDisabled.parameters),inlineLinks.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:'(args) => {\n return (\n <>\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n \n Inline link\n \n consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est\n laborum.\n

\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n \n Inline link\n \n consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est\n laborum.\n

\n \n );\n}'}},inlineLinks.parameters),standaloneLink.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:"(args) => {\n return (\n \n Standalone link\n \n );\n}"}},standaloneLink.parameters),withCustomIcon.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:'(args) => {\n return (\n
\n
\n

Small

\n } size="S" href="/#">\n Document link\n \n
\n
\n } size="S" href="/#">\n Phone link\n \n
\n
\n } size="S" href="/#">\n Envelope link\n \n
\n
\n } size="S" href="/#">\n Photo link\n \n
\n
\n

Medium

\n } size="M" href="/#">\n Document link\n \n
\n
\n } size="M" href="/#">\n Phone link\n \n
\n
\n } size="M" href="/#">\n Envelope link\n \n
\n
\n } size="M" href="/#">\n Photo link\n \n
\n
\n

Large

\n } size="L" href="/#">\n Document link\n \n
\n
\n } size="L" href="/#">\n Phone Link\n \n
\n
\n } size="L" href="/#">\n Envelope Link\n \n
\n
\n } size="L" href="/#">\n Photo Link\n \n
\n
\n );\n}'}},withCustomIcon.parameters);try{Default.displayName="Default",Default.__docgenInfo={description:"",displayName:"Default",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/link/Link.stories.tsx#Default"]={docgenInfo:Default.__docgenInfo,name:"Default",path:"src/components/link/Link.stories.tsx#Default"})}catch(__react_docgen_typescript_loader_error){}try{InternalLinks.displayName="InternalLinks",InternalLinks.__docgenInfo={description:"",displayName:"InternalLinks",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/link/Link.stories.tsx#InternalLinks"]={docgenInfo:InternalLinks.__docgenInfo,name:"InternalLinks",path:"src/components/link/Link.stories.tsx#InternalLinks"})}catch(__react_docgen_typescript_loader_error){}try{ExternalLinks.displayName="ExternalLinks",ExternalLinks.__docgenInfo={description:"",displayName:"ExternalLinks",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/link/Link.stories.tsx#ExternalLinks"]={docgenInfo:ExternalLinks.__docgenInfo,name:"ExternalLinks",path:"src/components/link/Link.stories.tsx#ExternalLinks"})}catch(__react_docgen_typescript_loader_error){}try{OpenInNewTabLink.displayName="OpenInNewTabLink",OpenInNewTabLink.__docgenInfo={description:"",displayName:"OpenInNewTabLink",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/link/Link.stories.tsx#OpenInNewTabLink"]={docgenInfo:OpenInNewTabLink.__docgenInfo,name:"OpenInNewTabLink",path:"src/components/link/Link.stories.tsx#OpenInNewTabLink"})}catch(__react_docgen_typescript_loader_error){}try{visitedStylesDisabled.displayName="visitedStylesDisabled",visitedStylesDisabled.__docgenInfo={description:"",displayName:"visitedStylesDisabled",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/link/Link.stories.tsx#visitedStylesDisabled"]={docgenInfo:visitedStylesDisabled.__docgenInfo,name:"visitedStylesDisabled",path:"src/components/link/Link.stories.tsx#visitedStylesDisabled"})}catch(__react_docgen_typescript_loader_error){}try{inlineLinks.displayName="inlineLinks",inlineLinks.__docgenInfo={description:"",displayName:"inlineLinks",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/link/Link.stories.tsx#inlineLinks"]={docgenInfo:inlineLinks.__docgenInfo,name:"inlineLinks",path:"src/components/link/Link.stories.tsx#inlineLinks"})}catch(__react_docgen_typescript_loader_error){}try{standaloneLink.displayName="standaloneLink",standaloneLink.__docgenInfo={description:"",displayName:"standaloneLink",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/link/Link.stories.tsx#standaloneLink"]={docgenInfo:standaloneLink.__docgenInfo,name:"standaloneLink",path:"src/components/link/Link.stories.tsx#standaloneLink"})}catch(__react_docgen_typescript_loader_error){}try{withCustomIcon.displayName="withCustomIcon",withCustomIcon.__docgenInfo={description:"",displayName:"withCustomIcon",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/link/Link.stories.tsx#withCustomIcon"]={docgenInfo:withCustomIcon.__docgenInfo,name:"withCustomIcon",path:"src/components/link/Link.stories.tsx#withCustomIcon"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/linkbox/LinkboxEmpty.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,External:()=>External,LargeSize:()=>LargeSize,MediumSize:()=>MediumSize,SmallSize:()=>SmallSize,WithBorder:()=>WithBorder,WithoutBackground:()=>WithoutBackground,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),_Linkbox__WEBPACK_IMPORTED_MODULE_2__=(__webpack_require__("../../node_modules/react/index.js"),__webpack_require__("./src/components/linkbox/Linkbox.tsx")),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/react/jsx-runtime.js");const __WEBPACK_DEFAULT_EXPORT__={component:_Linkbox__WEBPACK_IMPORTED_MODULE_2__.R,title:"Components/Linkbox/Empty for custom content",decorators:[function(storyFn){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div",{style:{maxWidth:"400px"},children:storyFn()})}],parameters:{storySource:{source:'import React from \'react\';\n\nimport { Linkbox } from \'./Linkbox\';\n\nexport default {\n component: Linkbox,\n title: \'Components/Linkbox/Empty for custom content\',\n decorators: [(storyFn) =>
{storyFn()}
],\n parameters: {\n backgrounds: {\n default: \'gray\',\n values: [{ name: \'gray\', value: \'#efefef\' }],\n },\n controls: { expanded: true },\n },\n};\n\nexport const Default = () => (\n
\n \n
\n \n
\n);\n\nexport const WithBorder = () => (\n
\n \n
\n \n
\n);\n\nexport const WithoutBackground = () => (\n
\n \n
\n \n
\n);\n\nexport const External = () => (\n
\n \n
\n \n
\n);\n\nexport const SmallSize = () => (\n
\n \n
\n \n
\n);\n\nexport const MediumSize = () => (\n
\n \n
\n \n
\n);\n\nexport const LargeSize = () => (\n
\n \n
\n \n
\n);\n',locationsMap:{default:{startLoc:{col:23,line:18},endLoc:{col:1,line:24},startBody:{col:23,line:18},endBody:{col:1,line:24}},"with-border":{startLoc:{col:26,line:26},endLoc:{col:1,line:32},startBody:{col:26,line:26},endBody:{col:1,line:32}},"without-background":{startLoc:{col:33,line:34},endLoc:{col:1,line:40},startBody:{col:33,line:34},endBody:{col:1,line:40}},external:{startLoc:{col:24,line:42},endLoc:{col:1,line:48},startBody:{col:24,line:42},endBody:{col:1,line:48}},"small-size":{startLoc:{col:25,line:50},endLoc:{col:1,line:56},startBody:{col:25,line:50},endBody:{col:1,line:56}},"medium-size":{startLoc:{col:26,line:58},endLoc:{col:1,line:64},startBody:{col:26,line:58},endBody:{col:1,line:64}},"large-size":{startLoc:{col:25,line:66},endLoc:{col:1,line:72},startBody:{col:25,line:66},endBody:{col:1,line:72}}}},backgrounds:{default:"gray",values:[{name:"gray",value:"#efefef"}]},controls:{expanded:!0}}};var Default=function Default(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div",{style:{width:"320px"},children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Linkbox__WEBPACK_IMPORTED_MODULE_2__.R,{linkboxAriaLabel:"Linkbox: HDS",linkAriaLabel:"HDS",href:"https://hds.hel.fi",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div",{style:{height:"224px"}})})})},WithBorder=function WithBorder(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div",{style:{width:"320px"},children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Linkbox__WEBPACK_IMPORTED_MODULE_2__.R,{linkboxAriaLabel:"Linkbox: HDS",linkAriaLabel:"HDS",href:"https://hds.hel.fi",border:!0,children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div",{style:{height:"224px"}})})})},WithoutBackground=function WithoutBackground(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div",{style:{width:"320px"},children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Linkbox__WEBPACK_IMPORTED_MODULE_2__.R,{linkboxAriaLabel:"Linkbox: HDS",linkAriaLabel:"HDS",href:"https://hds.hel.fi",noBackground:!0,children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div",{style:{height:"224px"}})})})},External=function External(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div",{style:{width:"320px"},children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Linkbox__WEBPACK_IMPORTED_MODULE_2__.R,{linkboxAriaLabel:"Linkbox: HDS",linkAriaLabel:"HDS",href:"https://hds.hel.fi",external:!0,openInNewTab:!0,children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div",{style:{height:"224px"}})})})},SmallSize=function SmallSize(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div",{style:{width:"288px"},children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Linkbox__WEBPACK_IMPORTED_MODULE_2__.R,{linkboxAriaLabel:"Linkbox: HDS",linkAriaLabel:"HDS",href:"https://hds.hel.fi",size:"small",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div",{style:{height:"192px"}})})})},MediumSize=function MediumSize(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div",{style:{width:"320px"},children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Linkbox__WEBPACK_IMPORTED_MODULE_2__.R,{linkboxAriaLabel:"Linkbox: HDS",linkAriaLabel:"HDS",href:"https://hds.hel.fi",size:"medium",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div",{style:{height:"224px"}})})})},LargeSize=function LargeSize(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div",{style:{width:"400px"},children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Linkbox__WEBPACK_IMPORTED_MODULE_2__.R,{linkboxAriaLabel:"Linkbox: HDS",linkAriaLabel:"HDS",href:"https://hds.hel.fi",size:"large",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div",{style:{height:"296px"}})})})};Default.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:'() => (\n
\n \n
\n \n
\n)'}},Default.parameters),WithBorder.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:'() => (\n
\n \n
\n \n
\n)'}},WithBorder.parameters),WithoutBackground.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:'() => (\n
\n \n
\n \n
\n)'}},WithoutBackground.parameters),External.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:'() => (\n
\n \n
\n \n
\n)'}},External.parameters),SmallSize.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:'() => (\n
\n \n
\n \n
\n)'}},SmallSize.parameters),MediumSize.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:'() => (\n
\n \n
\n \n
\n)'}},MediumSize.parameters),LargeSize.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:'() => (\n
\n \n
\n \n
\n)'}},LargeSize.parameters)},"./src/components/linkbox/LinkboxWithHeadingAndTitle.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,External:()=>External,LargeSize:()=>LargeSize,MediumSize:()=>MediumSize,SmallSize:()=>SmallSize,WithBorder:()=>WithBorder,WithoutBackground:()=>WithoutBackground,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),_Linkbox__WEBPACK_IMPORTED_MODULE_2__=(__webpack_require__("../../node_modules/react/index.js"),__webpack_require__("./src/components/linkbox/Linkbox.tsx")),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/react/jsx-runtime.js");const __WEBPACK_DEFAULT_EXPORT__={component:_Linkbox__WEBPACK_IMPORTED_MODULE_2__.R,title:"Components/Linkbox/With text and heading",decorators:[function(storyFn){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div",{style:{maxWidth:"400px"},children:storyFn()})}],parameters:{storySource:{source:'import React from \'react\';\n\nimport { Linkbox } from \'./Linkbox\';\n\nexport default {\n component: Linkbox,\n title: \'Components/Linkbox/With text and heading\',\n decorators: [(storyFn) =>
{storyFn()}
],\n parameters: {\n backgrounds: {\n default: \'gray\',\n values: [{ name: \'gray\', value: \'#efefef\' }],\n },\n controls: { expanded: true },\n },\n};\n\nexport const Default = () => (\n
\n \n
\n);\n\nexport const WithBorder = () => (\n
\n \n
\n);\n\nexport const WithoutBackground = () => (\n
\n \n
\n);\n\nexport const External = () => (\n
\n \n
\n);\n\nexport const SmallSize = () => (\n
\n \n
\n);\n\nexport const MediumSize = () => (\n
\n \n
\n);\n\nexport const LargeSize = () => (\n \n);\n',locationsMap:{default:{startLoc:{col:23,line:18},endLoc:{col:1,line:28},startBody:{col:23,line:18},endBody:{col:1,line:28}},"with-border":{startLoc:{col:26,line:30},endLoc:{col:1,line:41},startBody:{col:26,line:30},endBody:{col:1,line:41}},"without-background":{startLoc:{col:33,line:43},endLoc:{col:1,line:54},startBody:{col:33,line:43},endBody:{col:1,line:54}},external:{startLoc:{col:24,line:56},endLoc:{col:1,line:68},startBody:{col:24,line:56},endBody:{col:1,line:68}},"small-size":{startLoc:{col:25,line:70},endLoc:{col:1,line:81},startBody:{col:25,line:70},endBody:{col:1,line:81}},"medium-size":{startLoc:{col:26,line:83},endLoc:{col:1,line:94},startBody:{col:26,line:83},endBody:{col:1,line:94}},"large-size":{startLoc:{col:25,line:96},endLoc:{col:1,line:105},startBody:{col:25,line:96},endBody:{col:1,line:105}}}},backgrounds:{default:"gray",values:[{name:"gray",value:"#efefef"}]},controls:{expanded:!0}}};var Default=function Default(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div",{style:{width:"320px"},children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Linkbox__WEBPACK_IMPORTED_MODULE_2__.R,{linkboxAriaLabel:"Linkbox: HDS",linkAriaLabel:"HDS",href:"https://hds.hel.fi",heading:"Linkbox title",text:"Linkbox text"})})},WithBorder=function WithBorder(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div",{style:{width:"320px"},children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Linkbox__WEBPACK_IMPORTED_MODULE_2__.R,{linkboxAriaLabel:"Linkbox: HDS",linkAriaLabel:"HDS",href:"https://hds.hel.fi",heading:"Linkbox title",text:"Linkbox text",border:!0})})},WithoutBackground=function WithoutBackground(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div",{style:{width:"320px"},children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Linkbox__WEBPACK_IMPORTED_MODULE_2__.R,{linkboxAriaLabel:"Linkbox: HDS",linkAriaLabel:"HDS",href:"https://hds.hel.fi",heading:"Linkbox title",text:"Linkbox text",noBackground:!0})})},External=function External(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div",{style:{width:"320px"},children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Linkbox__WEBPACK_IMPORTED_MODULE_2__.R,{linkboxAriaLabel:"Linkbox: HDS",linkAriaLabel:"HDS",href:"https://hds.hel.fi",heading:"Linkbox title",text:"Linkbox text",external:!0,openInNewTab:!0})})},SmallSize=function SmallSize(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div",{style:{width:"288px"},children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Linkbox__WEBPACK_IMPORTED_MODULE_2__.R,{linkboxAriaLabel:"Linkbox: HDS",linkAriaLabel:"HDS",href:"https://hds.hel.fi",heading:"Linkbox title",text:"Linkbox text",size:"small"})})},MediumSize=function MediumSize(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div",{style:{width:"320px"},children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Linkbox__WEBPACK_IMPORTED_MODULE_2__.R,{linkboxAriaLabel:"Linkbox: HDS",linkAriaLabel:"HDS",href:"https://hds.hel.fi",heading:"Linkbox title",text:"Linkbox text",size:"medium"})})},LargeSize=function LargeSize(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Linkbox__WEBPACK_IMPORTED_MODULE_2__.R,{linkboxAriaLabel:"Linkbox: HDS",linkAriaLabel:"HDS",href:"https://hds.hel.fi",heading:"Linkbox title",text:"Linkbox text",size:"large"})};Default.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:'() => (\n
\n \n
\n)'}},Default.parameters),WithBorder.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:'() => (\n
\n \n
\n)'}},WithBorder.parameters),WithoutBackground.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:'() => (\n
\n \n
\n)'}},WithoutBackground.parameters),External.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:'() => (\n
\n \n
\n)'}},External.parameters),SmallSize.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:'() => (\n
\n \n
\n)'}},SmallSize.parameters),MediumSize.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:'() => (\n
\n \n
\n)'}},MediumSize.parameters),LargeSize.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:'() => (\n \n)'}},LargeSize.parameters)},"./src/components/linkbox/LinkboxWithImage.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,External:()=>External,LargeSize:()=>LargeSize,MediumSize:()=>MediumSize,SmallSize:()=>SmallSize,WithBorder:()=>WithBorder,WithoutBackground:()=>WithoutBackground,default:()=>LinkboxWithImage_stories});var objectSpread2=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),Linkbox=(__webpack_require__("../../node_modules/react/index.js"),__webpack_require__("./src/components/linkbox/Linkbox.tsx"));const placeholder_medium_namespaceObject=__webpack_require__.p+"f3b374ad3ff135c4f79b.png",placeholder_large_namespaceObject=__webpack_require__.p+"ac06baf0acb35bb93c0b.png";var jsx_runtime=__webpack_require__("../../node_modules/react/jsx-runtime.js");const LinkboxWithImage_stories={component:Linkbox.R,title:"Components/Linkbox/With image",decorators:[function(storyFn){return(0,jsx_runtime.jsx)("div",{style:{maxWidth:"567px"},children:storyFn()})}],parameters:{storySource:{source:'import React from \'react\';\n\nimport { Linkbox } from \'./Linkbox\';\n\n// @ts-ignore\nimport smallImage from \'../../assets/img/linkbox/placeholder-small.png\';\n// @ts-ignore\nimport mediumImage from \'../../assets/img/linkbox/placeholder-medium.png\';\n// @ts-ignore\nimport largeImage from \'../../assets/img/linkbox/placeholder-large.png\';\n\n\nexport default {\n component: Linkbox,\n title: \'Components/Linkbox/With image\',\n decorators: [(storyFn) =>
{storyFn()}
],\n parameters: {\n backgrounds: {\n default: \'gray\',\n values: [{ name: \'gray\', value: \'#efefef\' }],\n },\n controls: { expanded: true },\n },\n};\n\nexport const Default = () => (\n
\n \n
\n);\n\nexport const WithBorder = () => (\n
\n \n
\n);\n\nexport const WithoutBackground = () => (\n
\n \n
\n);\n\nexport const External = () => (\n
\n \n
\n);\n\nexport const SmallSize = () => (\n
\n \n
\n);\n\nexport const MediumSize = () => (\n
\n \n
\n);\n\nexport const LargeSize = () => (\n
\n \n
\n);\n',locationsMap:{default:{startLoc:{col:23,line:26},endLoc:{col:1,line:37},startBody:{col:23,line:26},endBody:{col:1,line:37}},"with-border":{startLoc:{col:26,line:39},endLoc:{col:1,line:51},startBody:{col:26,line:39},endBody:{col:1,line:51}},"without-background":{startLoc:{col:33,line:53},endLoc:{col:1,line:65},startBody:{col:33,line:53},endBody:{col:1,line:65}},external:{startLoc:{col:24,line:67},endLoc:{col:1,line:80},startBody:{col:24,line:67},endBody:{col:1,line:80}},"small-size":{startLoc:{col:25,line:82},endLoc:{col:1,line:94},startBody:{col:25,line:82},endBody:{col:1,line:94}},"medium-size":{startLoc:{col:26,line:96},endLoc:{col:1,line:108},startBody:{col:26,line:96},endBody:{col:1,line:108}},"large-size":{startLoc:{col:25,line:110},endLoc:{col:1,line:122},startBody:{col:25,line:110},endBody:{col:1,line:122}}}},backgrounds:{default:"gray",values:[{name:"gray",value:"#efefef"}]},controls:{expanded:!0}}};var Default=function Default(){return(0,jsx_runtime.jsx)("div",{style:{maxWidth:"384px"},children:(0,jsx_runtime.jsx)(Linkbox.R,{linkboxAriaLabel:"Linkbox: HDS",linkAriaLabel:"HDS",href:"https://hds.hel.fi",heading:"Linkbox title",text:"Linkbox text",imgProps:{src:placeholder_medium_namespaceObject,width:384,height:245}})})},WithBorder=function WithBorder(){return(0,jsx_runtime.jsx)("div",{style:{maxWidth:"384px"},children:(0,jsx_runtime.jsx)(Linkbox.R,{linkboxAriaLabel:"Linkbox: HDS",linkAriaLabel:"HDS",href:"https://hds.hel.fi",heading:"Linkbox title",text:"Linkbox text",border:!0,imgProps:{src:placeholder_medium_namespaceObject,width:384,height:245}})})},WithoutBackground=function WithoutBackground(){return(0,jsx_runtime.jsx)("div",{style:{maxWidth:"384px"},children:(0,jsx_runtime.jsx)(Linkbox.R,{linkboxAriaLabel:"Linkbox: HDS",linkAriaLabel:"HDS",href:"https://hds.hel.fi",heading:"Linkbox title",text:"Linkbox text",noBackground:!0,imgProps:{src:placeholder_medium_namespaceObject,width:384,height:245}})})},External=function External(){return(0,jsx_runtime.jsx)("div",{style:{maxWidth:"384px"},children:(0,jsx_runtime.jsx)(Linkbox.R,{linkboxAriaLabel:"Linkbox: HDS",linkAriaLabel:"HDS",href:"https://hds.hel.fi",heading:"Linkbox title",text:"Linkbox text",external:!0,openInNewTab:!0,imgProps:{src:placeholder_medium_namespaceObject,width:384,height:245}})})},SmallSize=function SmallSize(){return(0,jsx_runtime.jsx)("div",{style:{maxWidth:"284px"},children:(0,jsx_runtime.jsx)(Linkbox.R,{linkboxAriaLabel:"Linkbox: HDS",linkAriaLabel:"HDS",href:"https://hds.hel.fi",heading:"Linkbox title",text:"Linkbox text",imgProps:{src:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlgAAAHCCAYAAAAzc7dkAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAACWKADAAQAAAABAAABwgAAAACRdu29AAAc8klEQVR4Ae3dS4uc1RYG4N0mIEGNQkwcaSSCE02UoCMRFceKmQUkEgj+DsnvEEGcmIGIoJmIouhIRMEbIYoJUYPE28ALGWjMYZd00+lUPFXlWl1ff+spELs7VW/VetYevNSle+X8+fOXmwsBAgQIECBAgECYwHVhSYIIECBAgAABAgQmAgqWg0CAAAECBAgQCBZQsIJBxREgQIAAAQIEFCxngAABAgQIECAQLKBgBYOKI0CAAAECBAgoWM4AAQIECBAgQCBYQMEKBhVHgAABAgQIEFCwnAECBAgQIECAQLCAghUMKo4AAQIECBAgoGA5AwQIECBAgACBYAEFKxhUHAECBAgQIEBAwXIGCBAgQIAAAQLBAgpWMKg4AgQIECBAgICC5QwQIECAAAECBIIFFKxgUHEECBAgQIAAAQXLGSBAgAABAgQIBAsoWMGg4ggQIECAAAECCpYzQIAAAQIECBAIFlCwgkHFESBAgAABAgQULGeAAAECBAgQIBAsoGAFg4ojQIAAAQIECChYzgABAgQIECBAIFhAwQoGFUeAAAECBAgQULCcAQIECBAgQIBAsICCFQwqjgABAgQIECCgYDkDBAgQIECAAIFgAQUrGFQcAQIECBAgQEDBcgYIECBAgAABAsECClYwqDgCBAgQIECAgILlDBAgQIAAAQIEggUUrGBQcQQIECBAgAABBcsZIECAAAECBAgECyhYwaDiCBAgQIAAAQIKljNAgAABAgQIEAgWULCCQcURIECAAAECBBQsZ4AAAQIECBAgECygYAWDiiNAgAABAgQIKFjOAAECBAgQIEAgWEDBCgYVR4AAAQIECBBQsJwBAgQIECBAgECwgIIVDCqOAAECBAgQIKBgOQMECBAgQIAAgWABBSsYVBwBAgQIECBAQMFyBggQIECAAAECwQIKVjCoOAIECBAgQICAguUMECBAgAABAgSCBRSsYFBxBAgQIECAAAEFyxkgQIAAAQIECAQLKFjBoOIIECBAgAABAgqWM0CAAAECBAgQCBZQsIJBxREgQIAAAQIEFCxngAABAgQIECAQLKBgBYOKI0CAAAECBAgoWM4AAQIECBAgQCBYQMEKBhVHgAABAgQIEFCwnAECBAgQIECAQLCAghUMKo4AAQIECBAgoGA5AwQIECBAgACBYAEFKxhUHAECBAgQIEBAwXIGCBAgQIAAAQLBAgpWMKg4AgQIECBAgICC5QwQIECAAAECBIIFFKxgUHEECBAgQIAAAQXLGSBAgAABAgQIBAsoWMGg4ggQIECAAAECCpYzQIAAAQIECBAIFlCwgkHFESBAgAABAgQULGeAAAECBAgQIBAsoGAFg4ojQIAAAQIECChYzgABAgQIECBAIFhAwQoGFUeAAAECBAgQULCcAQIECBAgQIBAsICCFQwqjgABAgQIECCgYDkDBAgQIECAAIFgAQUrGFQcAQIECBAgQEDBcgYIECBAgAABAsECClYwqDgCBAgQIECAgILlDBAgQIAAAQIEggUUrGBQcQQIECBAgAABBcsZIECAAAECBAgECyhYwaDiCBAgQIAAAQIKljNAgAABAgQIEAgWULCCQcURIECAAAECBBQsZ4AAAQIECBAgECygYAWDiiNAgAABAgQIKFjOAAECBAgQIEAgWEDBCgYVR4AAAQIECBBQsJwBAgQIECBAgECwgIIVDCqOAAECBAgQIKBgOQMECBAgQIAAgWABBSsYVBwBAgQIECBAQMFyBggQIECAAAECwQIKVjCoOAIECBAgQICAguUMECBAgAABAgSCBRSsYFBxBAgQIECAAAEFyxkgQIAAAQIECAQLKFjBoOIIECBAgAABAgqWM0CAAAECBAgQCBZQsIJBxREgQIAAAQIEFCxngAABAgQIECAQLKBgBYOKI0CAAAECBAgoWM4AAQIECBAgQCBYQMEKBhVHgAABAgQIEFCwnAECBAgQIECAQLCAghUMKo4AAQIECBAgoGA5AwQIECBAgACBYAEFKxhUHAECBAgQIEBAwXIGCBAgQIAAAQLBAgpWMKg4AgQIECBAgICC5QwQIECAAAECBIIFFKxgUHEECBAgQIAAAQXLGSBAgAABAgQIBAsoWMGg4ggQIECAAAECCpYzQIAAAQIECBAIFlCwgkHFESBAgAABAgQULGeAAAECBAgQIBAsoGAFg4ojQIAAAQIECChYzgABAgQIECBAIFhAwQoGFUeAAAECBAgQULCcAQIECBAgQIBAsICCFQwqjgABAgQIECCgYDkDBAgQIECAAIFgAQUrGFQcAQIECBAgQEDBcgYIECBAgAABAsECClYwqDgCBAgQIECAgILlDBAgQIAAAQIEggUUrGBQcQQIECBAgAABBcsZIECAAAECBAgECyhYwaDiCBAgQIAAAQIKljNAgAABAgQIEAgWULCCQcURIECAAAECBBQsZ4AAAQIECBAgECygYAWDiiNAgAABAgQIKFjOAAECBAgQIEAgWEDBCgYVR4AAAQIECBBQsJwBAgQIECBAgECwgIIVDCqOAAECBAgQIKBgOQMECBAgQIAAgWABBSsYVBwBAgQIECBAQMFyBggQIECAAAECwQIKVjCoOAIECBAgQICAguUMECBAgAABAgSCBRSsYFBxBAgQIECAAAEFyxkgQIAAAQIECAQLKFjBoOIIECBAgAABAgqWM0CAAAECBAgQCBZQsIJBxREgQIAAAQIEFCxngAABAgQIECAQLKBgBYOKI0CAAAECBAgoWM4AAQIECBAgQCBYQMEKBhVHgAABAgQIEFCwnAECBAgQIECAQLCAghUMKo4AAQIECBAgoGA5AwQIECBAgACBYAEFKxhUHAECBAgQIEBAwXIGCBAgQIAAAQLBAgpWMKg4AgQIECBAgICC5QwQIECAAAECBIIFFKxgUHEECBAgQIAAAQXLGSBAgAABAgQIBAsoWMGg4ggQIECAAAECCpYzQIAAAQIECBAIFlCwgkHFESBAgAABAgQULGeAAAECBAgQIBAsoGAFg4ojQIAAAQIECChYzgABAgQIECBAIFhAwQoGFUeAAAECBAgQULCcAQIECBAgQIBAsICCFQwqjgABAgQIECCgYDkDBAgQIECAAIFgAQUrGFQcAQIECBAgQEDBcgYIECBAgAABAsECClYwqDgCBAgQIECAgILlDBAgQIAAAQIEggUUrGBQcQQIECBAgAABBcsZIECAAAECBAgECyhYwaDiCBAgQIAAAQIKljNAgAABAgQIEAgWULCCQcURIECAAAECBBQsZ4AAAQIECBAgECygYAWDiiNAgAABAgQIKFjOAAECBAgQIEAgWEDBCgYVR4AAAQIECBBQsJwBAgQIECBAgECwgIIVDCqOAAECBAgQIKBgOQMECBAgQIAAgWABBSsYVBwBAgQIECBAQMFyBggQIECAAAECwQIKVjCoOAIECBAgQICAguUMECBAgAABAgSCBRSsYFBxBAgQIECAAAEFyxkgQIAAAQIECAQLKFjBoOIIECBAgAABAgqWM0CAAAECBAgQCBbYHpwnjgCBwgLHjx/f0tM/99xzW/rxe/AECAxHwDNYw9mFR0KAAAECBAiMREDBGskijUGAAAECBAgMR0DBGs4uPBICBAgQIEBgJAIK1kgWaQwCBAgQIEBgOAIK1nB24ZEQIECAAAECIxHwKcKRLNIYBIYsMLRP5231TzsOedceGwEC/wh4BstJIECAAAECBAgECyhYwaDiCBAgQIAAAQIKljNAgAABAgQIEAgWULCCQcURIECAAAECBBQsZ4AAAQIECBAgECzgU4TBoOIIEJhf4MyZM+2LL75o33zzTfv1118nATt37mx33HFHu+eee9q+ffvmD3ULAgQILFFAwVoivrsmUF3g559/bq+//no7d+7cVRQ//fRT6/99/PHHbe/eve2JJ55ou3btuup6fkCAAIEhCniJcIhb8ZgIFBDoz1a98MILU8vVxvF7AevX7bdxIUCAwFYQULC2wpY8RgIjE+jPXJ04caJdvHhx5sn6dftt+m1dCBAgMHQBBWvoG/L4CIxQoL8sOE+5WiXot+m3dSFAgMDQBRSsoW/I4yMwMoH+hvZp77madcx+257hQoAAgSELeJP7kLfjsREYoUD/tOC0y7Zt29pjjz3WDhw4MPnnTz/9tL3zzjvt0qVLV129Z/hk4VUsfkCAwIAEFKwBLcNDIVBB4FpvVO/l6qGHHlojWP36rbfeWvvZ6hfXylj9d/8nQIDAsgW8RLjsDbh/AsUEVn/P1caxV5+5Wv/zaT/r/36tjPW39TUBAgSWKaBgLVPffRMgQIAAAQKjFFCwRrlWQxEYrkD/De3TLv09Vxsv037Wr3OtjI239z0BAgSWJeA9WMuSd78Eigr0P3/Tf0P7xkt/Q3u/rL4suPom943X69/3DBcCBAgMWUDBGvJ2PDYCIxTof1uw//mbjZf+acH+hvZpb2rfeN2e4UKAAIEhC3iJcMjb8dgIjFCg/3qF/rcFF7302/oVDYvquR0BApsloGBtlrT7IUBgTaD/4eYdO3asfT/rF/02/bYuBAgQGLqAgjX0DXl8BEYosGvXrnb48OG5SlYvV/02/bYuBAgQGLqAgjX0DXl8BEYq0N+ofuzYsZleLuwvC/brenP7SA+DsQiMUMCb3Ee4VCMR2CoC/dmoo0ePTv62YP/zN/03tK/+EtH+qxh6oepvaPeeq62yUY+TAIFVAQVrVcL/CRBYmkAvUErU0vjdMQECCQJeIkxAFUmAAAECBAjUFlCwau/f9AQIECBAgECCgJcIE1BFEiCwuQKXL19u586da59//nn74Ycf2u+//z75b2Vlpd14443thhtuaHv27Gn79++f6U31m/vo3RsBAmMUULDGuFUzERiYwCeffNLuu+++lEfV/6TO22+/vfbm+I138ssvv7T+37fffts++ugjf8dwI5DvCRBIEVCwUliFEiCwXuC1115rvQg9+eST7eabb17/Twt//dtvv7U33nijffnll3NlrH5Kca4buTIBAgTmFPAerDnBXJ0AgcUEzpw5055//vn23XffLRaw7lb9ZcCeNW+5WhfhSwIECKQKKFipvMIJEFgv8Mcff7SXXnpp8nuv1v98nq/7S30vvvhi689guRAgQGCoAgrWUDfjcREYqcCff/7ZXn755fbVV1/NPeHXX389KWgXL16c+7ZuQIAAgc0U8B6szdR2XwQITAT++uuvduLEiXbo0KF27733zqTSPyHY38t16dKla17/tttuaw8++ODkl5b2Tw/2S3/WrL88+cEHH0w+YXjNG/sHAgQIBAooWIGYoggQmF3g77//bq+++mr78ccf2yOPPNKuu276E+r9eu+//3579913/zX80UcfbQ8//PBVObfccks7ePBgu//++2fK+dc78Y8ECBCYUUDBmhHK1QgQWFxg+/btrT9rtfHSf3/Ve++9106fPt0eeOCByTNPN9100+Rq/Zmn/pLghx9+2C5cuLDxpmvfb9u2rT311FP/95mwXuB6kbv11lvbK6+8snZ7XxAgQCBDQMHKUJVJgMAVAocPH568JDitZPUr9gJ18uTJK24zyze9uPXsu+66a5arT67T/3i0gjUzlysSILCgwPTn5BcMczMCBAhME+gF6Omnn27XX3/9tH9e6Gc7duxozzzzzFzlaqE7ciMCBAgsIKBgLYDmJgQIzC9w5513tmPHjoX8otH+MuLRo0fb7bffPv8DcQsCBAhsgoCCtQnI7oIAgX8Edu/ePSlZ+/btW5jk7rvvbs8+++zkbwsuHOKGBAgQSBbwHqxkYPEECFwp0J99OnLkSPvss8/am2++OfmjzFdeY/p3O3fubI8//ng7cODA9Cv4KQECBAYkoGANaBkeCoFKAvv375988u/s2bPt1KlT7fvvv5/8zqr+6cF+6b/Hqv+3Z8+eyfX27t3bVlZWKhGZlQCBLSygYG3h5XnoBLa6QC9M/eXC//KS4VY38PgJEBingPdgjXOvpiJAgAABAgSWKKBgLRHfXRMgQIAAAQLjFFCwxrlXUxEgQIAAAQJLFFCwlojvrgkQIECAAIFxCihY49yrqQgQIECAAIElCvgU4RLx3TWBKgLHjx+vMqo5CRAgMBHwDJaDQIAAAQIECBAIFlCwgkHFESBAgAABAgQULGeAAAECBAgQIBAsoGAFg4ojQIAAAQIECChYzgABAgQIECBAIFhg5fz585eDM8URIECAAAECBEoLeAar9PoNT4AAAQIECGQIKFgZqjIJECBAgACB0gIKVun1G54AAQIECBDIEFCwMlRlEiBAgAABAqUFFKzS6zc8AQIECBAgkCGgYGWoyiRAgAABAgRKCyhYpddveAIECBAgQCBDQMHKUJVJgAABAgQIlBZQsEqv3/AECBAgQIBAhoCClaEqkwABAgQIECgtoGCVXr/hCRAgQIAAgQwBBStDVSYBAgQIECBQWkDBKr1+wxMgQIAAAQIZAgpWhqpMAgQIECBAoLSAglV6/YYnQIAAAQIEMgQUrAxVmQQIECBAgEBpAQWr9PoNT4AAAQIECGQIKFgZqjIJECBAgACB0gIKVun1G54AAQIECBDIEFCwMlRlEiBAgAABAqUFFKzS6zc8AQIECBAgkCGgYGWoyiRAgAABAgRKCyhYpddveAIECBAgQCBDQMHKUJVJgAABAgQIlBZQsEqv3/AECBAgQIBAhoCClaEqkwABAgQIECgtoGCVXr/hCRAgQIAAgQwBBStDVSYBAgQIECBQWkDBKr1+wxMgQIAAAQIZAgpWhqpMAgQIECBAoLSAglV6/YYnQIAAAQIEMgQUrAxVmQQIECBAgEBpAQWr9PoNT4AAAQIECGQIKFgZqjIJECBAgACB0gIKVun1G54AAQIECBDIEFCwMlRlEiBAgAABAqUFFKzS6zc8AQIECBAgkCGgYGWoyiRAgAABAgRKCyhYpddveAIECBAgQCBDQMHKUJVJgAABAgQIlBZQsEqv3/AECBAgQIBAhoCClaEqkwABAgQIECgtoGCVXr/hCRAgQIAAgQwBBStDVSYBAgQIECBQWkDBKr1+wxMgQIAAAQIZAgpWhqpMAgQIECBAoLSAglV6/YYnQIAAAQIEMgQUrAxVmQQIECBAgEBpAQWr9PoNT4AAAQIECGQIKFgZqjIJECBAgACB0gIKVun1G54AAQIECBDIEFCwMlRlEiBAgAABAqUFFKzS6zc8AQIECBAgkCGgYGWoyiRAgAABAgRKCyhYpddveAIECBAgQCBDQMHKUJVJgAABAgQIlBZQsEqv3/AECBAgQIBAhoCClaEqkwABAgQIECgtoGCVXr/hCRAgQIAAgQwBBStDVSYBAgQIECBQWkDBKr1+wxMgQIAAAQIZAgpWhqpMAgQIECBAoLSAglV6/YYnQIAAAQIEMgQUrAxVmQQIECBAgEBpAQWr9PoNT4AAAQIECGQIKFgZqjIJECBAgACB0gIKVun1G54AAQIECBDIEFCwMlRlEiBAgAABAqUFFKzS6zc8AQIECBAgkCGgYGWoyiRAgAABAgRKCyhYpddveAIECBAgQCBDQMHKUJVJgAABAgQIlBZQsEqv3/AECBAgQIBAhoCClaEqkwABAgQIECgtoGCVXr/hCRAgQIAAgQwBBStDVSYBAgQIECBQWkDBKr1+wxMgQIAAAQIZAgpWhqpMAgQIECBAoLSAglV6/YYnQIAAAQIEMgQUrAxVmQQIECBAgEBpAQWr9PoNT4AAAQIECGQIKFgZqjIJECBAgACB0gIKVun1G54AAQIECBDIEFCwMlRlEiBAgAABAqUFFKzS6zc8AQIECBAgkCGgYGWoyiRAgAABAgRKCyhYpddveAIECBAgQCBDQMHKUJVJgAABAgQIlBZQsEqv3/AECBAgQIBAhoCClaEqkwABAgQIECgtoGCVXr/hCRAgQIAAgQwBBStDVSYBAgQIECBQWkDBKr1+wxMgQIAAAQIZAgpWhqpMAgQIECBAoLSAglV6/YYnQIAAAQIEMgQUrAxVmQQIECBAgEBpAQWr9PoNT4AAAQIECGQIKFgZqjIJECBAgACB0gIKVun1G54AAQIECBDIEFCwMlRlEiBAgAABAqUFFKzS6zc8AQIECBAgkCGgYGWoyiRAgAABAgRKCyhYpddveAIECBAgQCBDQMHKUJVJgAABAgQIlBZQsEqv3/AECBAgQIBAhoCClaEqkwABAgQIECgtoGCVXr/hCRAgQIAAgQwBBStDVSYBAgQIECBQWkDBKr1+wxMgQIAAAQIZAgpWhqpMAgQIECBAoLSAglV6/YYnQIAAAQIEMgQUrAxVmQQIECBAgEBpAQWr9PoNT4AAAQIECGQIKFgZqjIJECBAgACB0gIKVun1G54AAQIECBDIEFCwMlRlEiBAgAABAqUFFKzS6zc8AQIECBAgkCGgYGWoyiRAgAABAgRKCyhYpddveAIECBAgQCBDQMHKUJVJgAABAgQIlBZQsEqv3/AECBAgQIBAhoCClaEqkwABAgQIECgtoGCVXr/hCRAgQIAAgQwBBStDVSYBAgQIECBQWkDBKr1+wxMgQIAAAQIZAgpWhqpMAgQIECBAoLSAglV6/YYnQIAAAQIEMgQUrAxVmQQIECBAgEBpAQWr9PoNT4AAAQIECGQIKFgZqjIJECBAgACB0gIKVun1G54AAQIECBDIEFCwMlRlEiBAgAABAqUFFKzS6zc8AQIECBAgkCGgYGWoyiRAgAABAgRKCyhYpddveAIECBAgQCBDQMHKUJVJgAABAgQIlBZQsEqv3/AECBAgQIBAhoCClaEqkwABAgQIECgtoGCVXr/hCRAgQIAAgQwBBStDVSYBAgQIECBQWkDBKr1+wxMgQIAAAQIZAgpWhqpMAgQIECBAoLSAglV6/YYnQIAAAQIEMgQUrAxVmQQIECBAgEBpAQWr9PoNT4AAAQIECGQIKFgZqjIJECBAgACB0gIKVun1G54AAQIECBDIEFCwMlRlEiBAgAABAqUFFKzS6zc8AQIECBAgkCGgYGWoyiRAgAABAgRKCyhYpddveAIECBAgQCBDQMHKUJVJgAABAgQIlBZQsEqv3/AECBAgQIBAhoCClaEqkwABAgQIECgtoGCVXr/hCRAgQIAAgQwBBStDVSYBAgQIECBQWkDBKr1+wxMgQIAAAQIZAgpWhqpMAgQIECBAoLSAglV6/YYnQIAAAQIEMgQUrAxVmQQIECBAgEBpAQWr9PoNT4AAAQIECGQIKFgZqjIJECBAgACB0gIKVun1G54AAQIECBDIEFCwMlRlEiBAgAABAqUFFKzS6zc8AQIECBAgkCGgYGWoyiRAgAABAgRKCyhYpddveAIECBAgQCBDQMHKUJVJgAABAgQIlBZQsEqv3/AECBAgQIBAhoCClaEqkwABAgQIECgtoGCVXr/hCRAgQIAAgQwBBStDVSYBAgQIECBQWkDBKr1+wxMgQIAAAQIZAgpWhqpMAgQIECBAoLSAglV6/YYnQIAAAQIEMgQUrAxVmQQIECBAgEBpAQWr9PoNT4AAAQIECGQIKFgZqjIJECBAgACB0gIKVun1G54AAQIECBDIEFCwMlRlEiBAgAABAqUFFKzS6zc8AQIECBAgkCGgYGWoyiRAgAABAgRKCyhYpddveAIECBAgQCBDQMHKUJVJgAABAgQIlBZQsEqv3/AECBAgQIBAhoCClaEqkwABAgQIECgtoGCVXr/hCRAgQIAAgQwBBStDVSYBAgQIECBQWkDBKr1+wxMgQIAAAQIZAgpWhqpMAgQIECBAoLSAglV6/YYnQIAAAQIEMgQUrAxVmQQIECBAgEBpAQWr9PoNT4AAAQIECGQIKFgZqjIJECBAgACB0gL/A4w4lwCgj36GAAAAAElFTkSuQmCC",width:284,height:181},size:"small"})})},MediumSize=function MediumSize(){return(0,jsx_runtime.jsx)("div",{style:{maxWidth:"384px"},children:(0,jsx_runtime.jsx)(Linkbox.R,{linkboxAriaLabel:"Linkbox: HDS",linkAriaLabel:"HDS",href:"https://hds.hel.fi",heading:"Linkbox title",text:"Linkbox text",imgProps:{src:placeholder_medium_namespaceObject,width:384,height:245},size:"medium"})})},LargeSize=function LargeSize(){return(0,jsx_runtime.jsx)("div",{style:{maxWidth:"567px"},children:(0,jsx_runtime.jsx)(Linkbox.R,{linkboxAriaLabel:"Linkbox: HDS",linkAriaLabel:"HDS",href:"https://hds.hel.fi",heading:"Linkbox title",text:"Linkbox text",imgProps:{src:placeholder_large_namespaceObject,width:567,height:363},size:"large"})})};Default.parameters=(0,objectSpread2.Z)({storySource:{source:'() => (\n
\n \n
\n)'}},Default.parameters),WithBorder.parameters=(0,objectSpread2.Z)({storySource:{source:'() => (\n
\n \n
\n)'}},WithBorder.parameters),WithoutBackground.parameters=(0,objectSpread2.Z)({storySource:{source:'() => (\n
\n \n
\n)'}},WithoutBackground.parameters),External.parameters=(0,objectSpread2.Z)({storySource:{source:'() => (\n
\n \n
\n)'}},External.parameters),SmallSize.parameters=(0,objectSpread2.Z)({storySource:{source:'() => (\n
\n \n
\n)'}},SmallSize.parameters),MediumSize.parameters=(0,objectSpread2.Z)({storySource:{source:'() => (\n
\n \n
\n)'}},MediumSize.parameters),LargeSize.parameters=(0,objectSpread2.Z)({storySource:{source:'() => (\n
\n \n
\n)'}},LargeSize.parameters)},"./src/components/loadingSpinner/LoadingSpinner.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{CustomTheme:()=>CustomTheme,Default:()=>Default,MultipleSpinners:()=>MultipleSpinners,Small:()=>Small,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/react/index.js"),_LoadingSpinner__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/components/loadingSpinner/LoadingSpinner.tsx"),_button__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./src/components/button/Button.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/react/jsx-runtime.js");const __WEBPACK_DEFAULT_EXPORT__={parameters:{storySource:{source:"import React, { useState } from 'react';\n\nimport { LoadingSpinner } from './LoadingSpinner';\nimport { Button } from '../button';\n\nexport default {\n component: LoadingSpinner,\n title: 'Components/LoadingSpinner',\n};\n\nexport const Default = (args) => ;\n\nexport const Small = (args) => ;\nSmall.args = {\n small: true,\n};\n\nexport const CustomTheme = (args) => (\n <>\n \n
\n \n \n);\nCustomTheme.storyName = 'Custom theme';\nCustomTheme.args = {\n theme: {\n '--spinner-color': 'var(--color-tram)',\n '--spinner-color-stage1': 'var(--color-coat-of-arms)',\n '--spinner-color-stage2': 'var(--color-tram)',\n '--spinner-color-stage3': 'var(--color-metro)',\n },\n};\n\nexport const MultipleSpinners = (args) => {\n const [showSpinner1, setShowSpinner1] = useState(false);\n const [showSpinner2, setShowSpinner2] = useState(false);\n const [showSpinner3, setShowSpinner3] = useState(false);\n\n return (\n <>\n
\n \n
\n
\n \n
\n
\n \n
\n {showSpinner1 && }\n {showSpinner2 && }\n {showSpinner3 && }\n \n );\n};\nMultipleSpinners.storyName = 'Multiple spinners';\n",locationsMap:{default:{startLoc:{col:23,line:11},endLoc:{col:61,line:11},startBody:{col:23,line:11},endBody:{col:61,line:11}},small:{startLoc:{col:21,line:13},endLoc:{col:59,line:13},startBody:{col:21,line:13},endBody:{col:59,line:13}},"custom-theme":{startLoc:{col:27,line:18},endLoc:{col:1,line:24},startBody:{col:27,line:18},endBody:{col:1,line:24}},"multiple-spinners":{startLoc:{col:32,line:35},endLoc:{col:1,line:62},startBody:{col:32,line:35},endBody:{col:1,line:62}}}}},component:_LoadingSpinner__WEBPACK_IMPORTED_MODULE_2__.T,title:"Components/LoadingSpinner"};var Default=function Default(args){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_LoadingSpinner__WEBPACK_IMPORTED_MODULE_2__.T,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},args))},Small=function Small(args){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_LoadingSpinner__WEBPACK_IMPORTED_MODULE_2__.T,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},args))};Small.args={small:!0};var CustomTheme=function CustomTheme(args){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_LoadingSpinner__WEBPACK_IMPORTED_MODULE_2__.T,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},args),{},{multicolor:!1})),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_LoadingSpinner__WEBPACK_IMPORTED_MODULE_2__.T,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},args),{},{multicolor:!0}))]})};CustomTheme.storyName="Custom theme",CustomTheme.args={theme:{"--spinner-color":"var(--color-tram)","--spinner-color-stage1":"var(--color-coat-of-arms)","--spinner-color-stage2":"var(--color-tram)","--spinner-color-stage3":"var(--color-metro)"}};var MultipleSpinners=function MultipleSpinners(args){var _useState=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(!1),_useState2=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_4__.Z)(_useState,2),showSpinner1=_useState2[0],setShowSpinner1=_useState2[1],_useState3=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(!1),_useState4=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_4__.Z)(_useState3,2),showSpinner2=_useState4[0],setShowSpinner2=_useState4[1],_useState5=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(!1),_useState6=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_4__.Z)(_useState5,2),showSpinner3=_useState6[0],setShowSpinner3=_useState6[1];return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div",{style:{marginBottom:"var(--spacing-s)"},children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(_button__WEBPACK_IMPORTED_MODULE_5__.z,{onClick:function onClick(){return setShowSpinner1(!showSpinner1)},children:[showSpinner1?"Remove":"Add"," loading spinner #1"]})}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div",{style:{marginBottom:"var(--spacing-s)"},children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(_button__WEBPACK_IMPORTED_MODULE_5__.z,{onClick:function onClick(){return setShowSpinner2(!showSpinner2)},children:[showSpinner2?"Remove":"Add"," loading spinner #2"]})}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div",{style:{marginBottom:"var(--spacing-s)"},children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(_button__WEBPACK_IMPORTED_MODULE_5__.z,{onClick:function onClick(){return setShowSpinner3(!showSpinner3)},children:[showSpinner3?"Remove":"Add"," loading spinner #3"]})}),showSpinner1&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_LoadingSpinner__WEBPACK_IMPORTED_MODULE_2__.T,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},args)),showSpinner2&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_LoadingSpinner__WEBPACK_IMPORTED_MODULE_2__.T,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},args)),showSpinner3&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_LoadingSpinner__WEBPACK_IMPORTED_MODULE_2__.T,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},args))]})};MultipleSpinners.storyName="Multiple spinners",Default.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:"(args) => "}},Default.parameters),Small.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:"(args) => "}},Small.parameters),CustomTheme.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:"(args) => (\n <>\n \n
\n \n \n)"}},CustomTheme.parameters),MultipleSpinners.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:"(args) => {\n const [showSpinner1, setShowSpinner1] = useState(false);\n const [showSpinner2, setShowSpinner2] = useState(false);\n const [showSpinner3, setShowSpinner3] = useState(false);\n\n return (\n <>\n
\n \n
\n
\n \n
\n
\n \n
\n {showSpinner1 && }\n {showSpinner2 && }\n {showSpinner3 && }\n \n );\n}"}},MultipleSpinners.parameters);try{Default.displayName="Default",Default.__docgenInfo={description:"",displayName:"Default",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/loadingSpinner/LoadingSpinner.stories.tsx#Default"]={docgenInfo:Default.__docgenInfo,name:"Default",path:"src/components/loadingSpinner/LoadingSpinner.stories.tsx#Default"})}catch(__react_docgen_typescript_loader_error){}try{Small.displayName="Small",Small.__docgenInfo={description:"",displayName:"Small",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/loadingSpinner/LoadingSpinner.stories.tsx#Small"]={docgenInfo:Small.__docgenInfo,name:"Small",path:"src/components/loadingSpinner/LoadingSpinner.stories.tsx#Small"})}catch(__react_docgen_typescript_loader_error){}try{CustomTheme.displayName="CustomTheme",CustomTheme.__docgenInfo={description:"",displayName:"CustomTheme",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/loadingSpinner/LoadingSpinner.stories.tsx#CustomTheme"]={docgenInfo:CustomTheme.__docgenInfo,name:"CustomTheme",path:"src/components/loadingSpinner/LoadingSpinner.stories.tsx#CustomTheme"})}catch(__react_docgen_typescript_loader_error){}try{MultipleSpinners.displayName="MultipleSpinners",MultipleSpinners.__docgenInfo={description:"",displayName:"MultipleSpinners",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/loadingSpinner/LoadingSpinner.stories.tsx#MultipleSpinners"]={docgenInfo:MultipleSpinners.__docgenInfo,name:"MultipleSpinners",path:"src/components/loadingSpinner/LoadingSpinner.stories.tsx#MultipleSpinners"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/logo/Logo.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Playground:()=>Playground,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),_Logo__WEBPACK_IMPORTED_MODULE_2__=(__webpack_require__("../../node_modules/react/index.js"),__webpack_require__("./src/components/logo/Logo.tsx")),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/react/jsx-runtime.js");const __WEBPACK_DEFAULT_EXPORT__={component:_Logo__WEBPACK_IMPORTED_MODULE_2__.TR,title:"Components/Logo",parameters:{storySource:{source:"import React from 'react';\n\nimport { Logo, logoFi, logoSv, logoRu } from './Logo';\n\nexport default {\n component: Logo,\n title: 'Components/Logo',\n parameters: {\n controls: { hideNoControlsWarning: true },\n },\n};\n\nexport const Playground = (args) => ;\n\nPlayground.args = {\n size: 'full',\n src: logoFi,\n alt: 'Helsingin kaupunki',\n 'aria-hidden': false,\n};\n\nPlayground.argTypes = {\n size: {\n options: ['full', 'small', 'medium', 'large'],\n control: { type: 'radio' },\n },\n src: {\n options: [logoFi, logoSv, logoRu],\n control: { type: 'radio' },\n },\n 'aria-hidden': {\n options: [true, false],\n control: { type: 'radio' },\n },\n};\n",locationsMap:{playground:{startLoc:{col:26,line:13},endLoc:{col:54,line:13},startBody:{col:26,line:13},endBody:{col:54,line:13}}}},controls:{hideNoControlsWarning:!0}}};var Playground=function Playground(args){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Logo__WEBPACK_IMPORTED_MODULE_2__.TR,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},args))};Playground.args={size:"full",src:_Logo__WEBPACK_IMPORTED_MODULE_2__.Cv,alt:"Helsingin kaupunki","aria-hidden":!1},Playground.argTypes={size:{options:["full","small","medium","large"],control:{type:"radio"}},src:{options:[_Logo__WEBPACK_IMPORTED_MODULE_2__.Cv,_Logo__WEBPACK_IMPORTED_MODULE_2__.Vb,_Logo__WEBPACK_IMPORTED_MODULE_2__.eT],control:{type:"radio"}},"aria-hidden":{options:[!0,!1],control:{type:"radio"}}},Playground.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:"(args) => "}},Playground.parameters);try{Playground.displayName="Playground",Playground.__docgenInfo={description:"",displayName:"Playground",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/logo/Logo.stories.tsx#Playground"]={docgenInfo:Playground.__docgenInfo,name:"Playground",path:"src/components/logo/Logo.stories.tsx#Playground"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/notification/Notification.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Alert:()=>Alert,AutoClose:()=>AutoClose,Default:()=>Default,Dismissible:()=>Dismissible,Error:()=>Error,Invisible:()=>Invisible,Large:()=>Large,Playground:()=>Playground,Small:()=>Small,Success:()=>Success,WithBoxShadow:()=>WithBoxShadow,WithCustomAriaLabel:()=>WithCustomAriaLabel,WithCustomHeadingLevel:()=>WithCustomHeadingLevel,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/react/index.js"),_Notification__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/components/notification/Notification.tsx"),_button__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./src/components/button/Button.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/react/jsx-runtime.js"),props={label:"Label"},content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.";const __WEBPACK_DEFAULT_EXPORT__={component:_Notification__WEBPACK_IMPORTED_MODULE_2__.P,title:"Components/Notification",parameters:{storySource:{source:"import React, { useEffect, useRef, useState } from 'react';\n\nimport { Notification, NotificationSizeInline, NotificationSizeToast } from './Notification';\nimport { Button } from '../button';\n\nconst props = {\n label: 'Label',\n};\nconst content =\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.';\n\nexport default {\n component: Notification,\n title: 'Components/Notification',\n parameters: {\n controls: { hideNoControlsWarning: true },\n },\n decorators: [(storyFn) =>
{storyFn()}
],\n};\n\nexport const Default = () => {content};\n\nexport const Alert = () => (\n \n {content}\n \n);\n\nexport const Error = () => (\n \n {content}\n \n);\n\nexport const Success = () => (\n \n {content}\n \n);\n\nexport const Small = () => (\n \n Message\n \n);\n\nexport const Large = () => (\n \n {content}\n \n);\n\nexport const WithBoxShadow = () => (\n \n {content}\n \n);\n\nWithBoxShadow.storyName = 'With box shadow';\n\nexport const Invisible = () => {\n const [open, setOpen] = useState(false);\n return (\n <>\n \n {open && (\n \n I'm only seen by screen readers\n \n )}\n \n );\n};\n\nexport const Dismissible = () => {\n const [open, setOpen] = useState(true);\n const showButtonRef = useRef(null);\n const onClose = () => {\n setOpen(false);\n if (showButtonRef.current) {\n showButtonRef.current.focus();\n }\n };\n\n return (\n <>\n {!open && (\n \n )}\n {open && (\n onClose()} closeButtonLabelText=\"Close notification\">\n {content}\n \n )}\n \n );\n};\n\nexport const AutoClose = () => {\n const [open, setOpen] = useState(false);\n const [openProgress, setOpenProgress] = useState(false);\n const showButtonRef = useRef(null);\n const showProgressButtonRef = useRef(null);\n const onClose = () => {\n setOpen(false);\n setOpenProgress(false);\n if (showButtonRef.current) {\n showButtonRef.current.focus();\n }\n if (showProgressButtonRef.current) {\n showProgressButtonRef.current.focus();\n }\n };\n\n return (\n <>\n \n
\n
\n \n {open && (\n onClose()}\n >\n {content}\n \n )}\n {openProgress && (\n onClose()}\n >\n {content}\n \n )}\n \n );\n};\n\nexport const WithCustomAriaLabel = () => (\n \n {content}\n \n);\n\nWithCustomAriaLabel.parameters = {\n loki: { skip: true },\n};\n\nWithCustomAriaLabel.storyName = 'With a custom aria-label';\n\nexport const WithCustomHeadingLevel = () => (\n \n {content}\n \n);\n\nWithCustomHeadingLevel.parameters = {\n loki: { skip: true },\n};\n\nWithCustomHeadingLevel.storyName = 'With a custom aria-level';\n\nexport const Playground = (args) => {\n const [open, setOpen] = useState(true);\n\n useEffect(() => {\n if (args.position === 'inline') setOpen(true);\n }, [args.position]);\n\n let typedSize;\n args.position === 'inline'\n ? (typedSize = args.size as NotificationSizeInline)\n : (typedSize = args.size as NotificationSizeToast);\n\n return (\n <>\n setOpen(!open)}\n >\n Toggle notification\n \n {open && (\n setOpen(false)}\n position={args.position}\n size={typedSize}\n dismissible={args.dismissible}\n closeButtonLabelText={args.closeButtonLabelText}\n headingLevel={args.headingLevel}\n >\n {args.body}\n \n )}\n \n );\n};\n\nPlayground.parameters = {\n previewTabs: {\n 'storybook/docs/panel': {\n hidden: true,\n },\n },\n docs: {\n disable: true,\n },\n};\n\nPlayground.args = {\n label: 'Label',\n body: content,\n closeButtonLabelText: 'Close notification',\n type: 'info',\n size: 'default',\n position: 'inline',\n invisible: false,\n dismissible: false,\n autoClose: false,\n displayAutoCloseProgress: true,\n autoCloseDuration: 6000,\n headingLevel: 2,\n};\n\nPlayground.argTypes = {\n type: {\n options: ['info', 'success', 'alert', 'error'],\n control: { type: 'radio' },\n },\n size: {\n options: ['default', 'small', 'large'],\n control: { type: 'radio' },\n },\n position: {\n options: ['inline', 'top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'],\n control: { type: 'radio' },\n },\n};\n",locationsMap:{default:{startLoc:{col:23,line:21},endLoc:{col:78,line:21},startBody:{col:23,line:21},endBody:{col:78,line:21}},alert:{startLoc:{col:21,line:23},endLoc:{col:1,line:27},startBody:{col:21,line:23},endBody:{col:1,line:27}},error:{startLoc:{col:21,line:29},endLoc:{col:1,line:33},startBody:{col:21,line:29},endBody:{col:1,line:33}},success:{startLoc:{col:23,line:35},endLoc:{col:1,line:39},startBody:{col:23,line:35},endBody:{col:1,line:39}},small:{startLoc:{col:21,line:41},endLoc:{col:1,line:45},startBody:{col:21,line:41},endBody:{col:1,line:45}},large:{startLoc:{col:21,line:47},endLoc:{col:1,line:51},startBody:{col:21,line:47},endBody:{col:1,line:51}},"with-box-shadow":{startLoc:{col:29,line:53},endLoc:{col:1,line:57},startBody:{col:29,line:53},endBody:{col:1,line:57}},invisible:{startLoc:{col:25,line:61},endLoc:{col:1,line:73},startBody:{col:25,line:61},endBody:{col:1,line:73}},dismissible:{startLoc:{col:27,line:75},endLoc:{col:1,line:99},startBody:{col:27,line:75},endBody:{col:1,line:99}},"auto-close":{startLoc:{col:25,line:101},endLoc:{col:1,line:152},startBody:{col:25,line:101},endBody:{col:1,line:152}},"with-custom-aria-label":{startLoc:{col:35,line:154},endLoc:{col:1,line:158},startBody:{col:35,line:154},endBody:{col:1,line:158}},"with-custom-heading-level":{startLoc:{col:38,line:166},endLoc:{col:1,line:170},startBody:{col:38,line:166},endBody:{col:1,line:170}},playground:{startLoc:{col:26,line:178},endLoc:{col:1,line:223},startBody:{col:26,line:178},endBody:{col:1,line:223}}}},controls:{hideNoControlsWarning:!0}},decorators:[function(storyFn){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div",{style:{maxWidth:"400px"},children:storyFn()})}]};var Default=function Default(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Notification__WEBPACK_IMPORTED_MODULE_2__.P,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},props),{},{children:content}))},Alert=function Alert(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Notification__WEBPACK_IMPORTED_MODULE_2__.P,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},props),{},{type:"alert",children:content}))},Error=function Error(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Notification__WEBPACK_IMPORTED_MODULE_2__.P,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},props),{},{type:"error",children:content}))},Success=function Success(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Notification__WEBPACK_IMPORTED_MODULE_2__.P,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},props),{},{type:"success",children:content}))},Small=function Small(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Notification__WEBPACK_IMPORTED_MODULE_2__.P,{label:"Only visible for screen readers",size:"small",children:"Message"})},Large=function Large(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Notification__WEBPACK_IMPORTED_MODULE_2__.P,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},props),{},{size:"large",children:content}))},WithBoxShadow=function WithBoxShadow(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Notification__WEBPACK_IMPORTED_MODULE_2__.P,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},props),{},{boxShadow:!0,children:content}))};WithBoxShadow.storyName="With box shadow";var Invisible=function Invisible(){var _useState=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(!1),_useState2=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_4__.Z)(_useState,2),open=_useState2[0],setOpen=_useState2[1];return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_button__WEBPACK_IMPORTED_MODULE_5__.z,{onClick:function onClick(){return setOpen(!open)},children:"Toggle notification"}),open&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Notification__WEBPACK_IMPORTED_MODULE_2__.P,{label:"Invisible notification",invisible:!0,children:"I'm only seen by screen readers"})]})},Dismissible=function Dismissible(){var _useState3=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(!0),_useState4=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_4__.Z)(_useState3,2),open=_useState4[0],setOpen=_useState4[1],showButtonRef=(0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.Fragment,{children:[!open&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_button__WEBPACK_IMPORTED_MODULE_5__.z,{ref:showButtonRef,onClick:function onClick(){return setOpen(!0)},children:"Open notification"}),open&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Notification__WEBPACK_IMPORTED_MODULE_2__.P,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},props),{},{dismissible:!0,onClose:function onClose(){return function onClose(){setOpen(!1),showButtonRef.current&&showButtonRef.current.focus()}()},closeButtonLabelText:"Close notification",children:content}))]})},AutoClose=function AutoClose(){var _useState5=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(!1),_useState6=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_4__.Z)(_useState5,2),open=_useState6[0],setOpen=_useState6[1],_useState7=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(!1),_useState8=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_4__.Z)(_useState7,2),openProgress=_useState8[0],setOpenProgress=_useState8[1],showButtonRef=(0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null),showProgressButtonRef=(0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null),_onClose2=function onClose(){setOpen(!1),setOpenProgress(!1),showButtonRef.current&&showButtonRef.current.focus(),showProgressButtonRef.current&&showProgressButtonRef.current.focus()};return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_button__WEBPACK_IMPORTED_MODULE_5__.z,{disabled:open||openProgress,ref:showButtonRef,onClick:function onClick(){return setOpen(!0)},children:"Show without progress bar"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_button__WEBPACK_IMPORTED_MODULE_5__.z,{disabled:open||openProgress,ref:showProgressButtonRef,onClick:function onClick(){return setOpenProgress(!0)},children:"Show with progress bar"}),open&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Notification__WEBPACK_IMPORTED_MODULE_2__.P,{label:"Without progress bar",position:"top-left",autoClose:!0,autoCloseDuration:3e3,displayAutoCloseProgress:!1,onClose:function onClose(){return _onClose2()},children:content}),openProgress&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Notification__WEBPACK_IMPORTED_MODULE_2__.P,{label:"With progress bar",position:"top-left",autoClose:!0,autoCloseDuration:3e3,onClose:function onClose(){return _onClose2()},children:content})]})},WithCustomAriaLabel=function WithCustomAriaLabel(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Notification__WEBPACK_IMPORTED_MODULE_2__.P,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},props),{},{notificationAriaLabel:"Custom aria label",children:content}))};WithCustomAriaLabel.parameters={loki:{skip:!0}},WithCustomAriaLabel.storyName="With a custom aria-label";var WithCustomHeadingLevel=function WithCustomHeadingLevel(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Notification__WEBPACK_IMPORTED_MODULE_2__.P,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},props),{},{headingLevel:3,children:content}))};WithCustomHeadingLevel.parameters={loki:{skip:!0}},WithCustomHeadingLevel.storyName="With a custom aria-level";var Playground=function Playground(args){var typedSize,_useState9=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(!0),_useState10=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_4__.Z)(_useState9,2),open=_useState10[0],setOpen=_useState10[1];return(0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)((function(){"inline"===args.position&&setOpen(!0)}),[args.position]),typedSize=(args.position,args.size),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_button__WEBPACK_IMPORTED_MODULE_5__.z,{style:{position:"fixed",left:"50%",top:"50%",transform:"translate(-50%, -50%)"},onClick:function onClick(){return setOpen(!open)},children:"Toggle notification"}),open&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_Notification__WEBPACK_IMPORTED_MODULE_2__.P,{autoClose:args.autoClose,autoCloseDuration:args.autoCloseDuration,displayAutoCloseProgress:args.displayAutoCloseProgress,invisible:args.invisible,label:args.label,type:args.type,onClose:function onClose(){return setOpen(!1)},position:args.position,size:typedSize,dismissible:args.dismissible,closeButtonLabelText:args.closeButtonLabelText,headingLevel:args.headingLevel,children:args.body})]})};Playground.parameters={previewTabs:{"storybook/docs/panel":{hidden:!0}},docs:{disable:!0}},Playground.args={label:"Label",body:content,closeButtonLabelText:"Close notification",type:"info",size:"default",position:"inline",invisible:!1,dismissible:!1,autoClose:!1,displayAutoCloseProgress:!0,autoCloseDuration:6e3,headingLevel:2},Playground.argTypes={type:{options:["info","success","alert","error"],control:{type:"radio"}},size:{options:["default","small","large"],control:{type:"radio"}},position:{options:["inline","top-left","top-center","top-right","bottom-left","bottom-center","bottom-right"],control:{type:"radio"}}},Default.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:"() => {content}"}},Default.parameters),Alert.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:'() => (\n \n {content}\n \n)'}},Alert.parameters),Error.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:'() => (\n \n {content}\n \n)'}},Error.parameters),Success.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:'() => (\n \n {content}\n \n)'}},Success.parameters),Small.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:'() => (\n \n Message\n \n)'}},Small.parameters),Large.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:'() => (\n \n {content}\n \n)'}},Large.parameters),WithBoxShadow.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:"() => (\n \n {content}\n \n)"}},WithBoxShadow.parameters),Invisible.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:'() => {\n const [open, setOpen] = useState(false);\n return (\n <>\n \n {open && (\n \n I'm only seen by screen readers\n \n )}\n \n );\n}'}},Invisible.parameters),Dismissible.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:'() => {\n const [open, setOpen] = useState(true);\n const showButtonRef = useRef(null);\n const onClose = () => {\n setOpen(false);\n if (showButtonRef.current) {\n showButtonRef.current.focus();\n }\n };\n\n return (\n <>\n {!open && (\n \n )}\n {open && (\n onClose()} closeButtonLabelText="Close notification">\n {content}\n \n )}\n \n );\n}'}},Dismissible.parameters),AutoClose.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:'() => {\n const [open, setOpen] = useState(false);\n const [openProgress, setOpenProgress] = useState(false);\n const showButtonRef = useRef(null);\n const showProgressButtonRef = useRef(null);\n const onClose = () => {\n setOpen(false);\n setOpenProgress(false);\n if (showButtonRef.current) {\n showButtonRef.current.focus();\n }\n if (showProgressButtonRef.current) {\n showProgressButtonRef.current.focus();\n }\n };\n\n return (\n <>\n \n
\n
\n \n {open && (\n onClose()}\n >\n {content}\n \n )}\n {openProgress && (\n onClose()}\n >\n {content}\n \n )}\n \n );\n}'}},AutoClose.parameters),WithCustomAriaLabel.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:'() => (\n \n {content}\n \n)'}},WithCustomAriaLabel.parameters),WithCustomHeadingLevel.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:"() => (\n \n {content}\n \n)"}},WithCustomHeadingLevel.parameters),Playground.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:"(args) => {\n const [open, setOpen] = useState(true);\n\n useEffect(() => {\n if (args.position === 'inline') setOpen(true);\n }, [args.position]);\n\n let typedSize;\n args.position === 'inline'\n ? (typedSize = args.size as NotificationSizeInline)\n : (typedSize = args.size as NotificationSizeToast);\n\n return (\n <>\n setOpen(!open)}\n >\n Toggle notification\n \n {open && (\n setOpen(false)}\n position={args.position}\n size={typedSize}\n dismissible={args.dismissible}\n closeButtonLabelText={args.closeButtonLabelText}\n headingLevel={args.headingLevel}\n >\n {args.body}\n \n )}\n \n );\n}"}},Playground.parameters);try{Playground.displayName="Playground",Playground.__docgenInfo={description:"",displayName:"Playground",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/notification/Notification.stories.tsx#Playground"]={docgenInfo:Playground.__docgenInfo,name:"Playground",path:"src/components/notification/Notification.stories.tsx#Playground"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/numberInput/NumberInput.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{CustomStep:()=>CustomStep,Default:()=>Default,Disabled:()=>Disabled,WithDefaultValue:()=>WithDefaultValue,WithMinAndMax:()=>WithMinAndMax,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),_NumberInput__WEBPACK_IMPORTED_MODULE_2__=(__webpack_require__("../../node_modules/react/index.js"),__webpack_require__("./src/components/numberInput/NumberInput.tsx")),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/react/jsx-runtime.js");const __WEBPACK_DEFAULT_EXPORT__={component:_NumberInput__WEBPACK_IMPORTED_MODULE_2__.Y,title:"Components/NumberInput",decorators:[function(storyFn){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div",{style:{maxWidth:"300px"},children:storyFn()})}],parameters:{storySource:{source:"import React from 'react';\n\nimport { NumberInput } from './NumberInput';\n\nexport default {\n component: NumberInput,\n title: 'Components/NumberInput',\n decorators: [(storyFn) =>
{storyFn()}
],\n parameters: {\n controls: { expanded: true },\n },\n};\n\nexport const Default = (args) => ;\nDefault.args = {\n id: 'Default',\n helperText: 'Assistive text',\n label: 'Label',\n minusStepButtonAriaLabel: 'Decrease by one',\n plusStepButtonAriaLabel: 'Increase by one',\n unit: '€',\n};\n\nexport const CustomStep = (args) => ;\nCustomStep.storyName = 'With a custom step value';\nCustomStep.args = {\n id: 'CustomStep',\n step: 10,\n helperText: 'Assistive text for input with steps of 10',\n label: 'Label for step test',\n minusStepButtonAriaLabel: 'Decrease by ten',\n plusStepButtonAriaLabel: 'Increase by ten',\n unit: '€',\n};\n\nexport const Disabled = (args) => ;\nDisabled.storyName = 'Disabled';\nDisabled.args = {\n id: 'Disabled',\n step: 10,\n helperText: 'Assistive text',\n label: 'Label for disabled',\n minusStepButtonAriaLabel: 'Decrease by ten',\n plusStepButtonAriaLabel: 'Increase by ten',\n unit: '€',\n disabled: true,\n};\n\nexport const WithMinAndMax = (args) => ;\nWithMinAndMax.storyName = 'With min and max value';\nWithMinAndMax.args = {\n id: 'WithMinAndMax',\n step: 1,\n min: 15,\n max: 40,\n helperText: 'Assistive text',\n label: 'Label for min 15 max 40',\n minusStepButtonAriaLabel: 'Decrease by one',\n plusStepButtonAriaLabel: 'Increase by one',\n unit: '€',\n};\n\nexport const WithDefaultValue = (args) => ;\nWithDefaultValue.storyName = 'With a default value';\nWithDefaultValue.args = {\n id: 'WithDefaultValue',\n step: 10,\n defaultValue: 20,\n helperText: 'Assistive text',\n label: 'Label for default 20, step 10',\n minusStepButtonAriaLabel: 'Decrease by ten',\n plusStepButtonAriaLabel: 'Increase by ten',\n unit: '€',\n};\n",locationsMap:{default:{startLoc:{col:23,line:14},endLoc:{col:58,line:14},startBody:{col:23,line:14},endBody:{col:58,line:14}},"custom-step":{startLoc:{col:26,line:24},endLoc:{col:61,line:24},startBody:{col:26,line:24},endBody:{col:61,line:24}},disabled:{startLoc:{col:24,line:36},endLoc:{col:59,line:36},startBody:{col:24,line:36},endBody:{col:59,line:36}},"with-min-and-max":{startLoc:{col:29,line:49},endLoc:{col:64,line:49},startBody:{col:29,line:49},endBody:{col:64,line:49}},"with-default-value":{startLoc:{col:32,line:63},endLoc:{col:67,line:63},startBody:{col:32,line:63},endBody:{col:67,line:63}}}},controls:{expanded:!0}}};var Default=function Default(args){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_NumberInput__WEBPACK_IMPORTED_MODULE_2__.Y,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},args))};Default.args={id:"Default",helperText:"Assistive text",label:"Label",minusStepButtonAriaLabel:"Decrease by one",plusStepButtonAriaLabel:"Increase by one",unit:"€"};var CustomStep=function CustomStep(args){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_NumberInput__WEBPACK_IMPORTED_MODULE_2__.Y,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},args))};CustomStep.storyName="With a custom step value",CustomStep.args={id:"CustomStep",step:10,helperText:"Assistive text for input with steps of 10",label:"Label for step test",minusStepButtonAriaLabel:"Decrease by ten",plusStepButtonAriaLabel:"Increase by ten",unit:"€"};var Disabled=function Disabled(args){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_NumberInput__WEBPACK_IMPORTED_MODULE_2__.Y,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},args))};Disabled.storyName="Disabled",Disabled.args={id:"Disabled",step:10,helperText:"Assistive text",label:"Label for disabled",minusStepButtonAriaLabel:"Decrease by ten",plusStepButtonAriaLabel:"Increase by ten",unit:"€",disabled:!0};var WithMinAndMax=function WithMinAndMax(args){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_NumberInput__WEBPACK_IMPORTED_MODULE_2__.Y,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},args))};WithMinAndMax.storyName="With min and max value",WithMinAndMax.args={id:"WithMinAndMax",step:1,min:15,max:40,helperText:"Assistive text",label:"Label for min 15 max 40",minusStepButtonAriaLabel:"Decrease by one",plusStepButtonAriaLabel:"Increase by one",unit:"€"};var WithDefaultValue=function WithDefaultValue(args){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_NumberInput__WEBPACK_IMPORTED_MODULE_2__.Y,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},args))};WithDefaultValue.storyName="With a default value",WithDefaultValue.args={id:"WithDefaultValue",step:10,defaultValue:20,helperText:"Assistive text",label:"Label for default 20, step 10",minusStepButtonAriaLabel:"Decrease by ten",plusStepButtonAriaLabel:"Increase by ten",unit:"€"},Default.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:"(args) => "}},Default.parameters),CustomStep.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:"(args) => "}},CustomStep.parameters),Disabled.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:"(args) => "}},Disabled.parameters),WithMinAndMax.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:"(args) => "}},WithMinAndMax.parameters),WithDefaultValue.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:"(args) => "}},WithDefaultValue.parameters);try{Default.displayName="Default",Default.__docgenInfo={description:"",displayName:"Default",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/numberInput/NumberInput.stories.tsx#Default"]={docgenInfo:Default.__docgenInfo,name:"Default",path:"src/components/numberInput/NumberInput.stories.tsx#Default"})}catch(__react_docgen_typescript_loader_error){}try{CustomStep.displayName="CustomStep",CustomStep.__docgenInfo={description:"",displayName:"CustomStep",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/numberInput/NumberInput.stories.tsx#CustomStep"]={docgenInfo:CustomStep.__docgenInfo,name:"CustomStep",path:"src/components/numberInput/NumberInput.stories.tsx#CustomStep"})}catch(__react_docgen_typescript_loader_error){}try{Disabled.displayName="Disabled",Disabled.__docgenInfo={description:"",displayName:"Disabled",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/numberInput/NumberInput.stories.tsx#Disabled"]={docgenInfo:Disabled.__docgenInfo,name:"Disabled",path:"src/components/numberInput/NumberInput.stories.tsx#Disabled"})}catch(__react_docgen_typescript_loader_error){}try{WithMinAndMax.displayName="WithMinAndMax",WithMinAndMax.__docgenInfo={description:"",displayName:"WithMinAndMax",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/numberInput/NumberInput.stories.tsx#WithMinAndMax"]={docgenInfo:WithMinAndMax.__docgenInfo,name:"WithMinAndMax",path:"src/components/numberInput/NumberInput.stories.tsx#WithMinAndMax"})}catch(__react_docgen_typescript_loader_error){}try{WithDefaultValue.displayName="WithDefaultValue",WithDefaultValue.__docgenInfo={description:"",displayName:"WithDefaultValue",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/numberInput/NumberInput.stories.tsx#WithDefaultValue"]={docgenInfo:WithDefaultValue.__docgenInfo,name:"WithDefaultValue",path:"src/components/numberInput/NumberInput.stories.tsx#WithDefaultValue"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/pagination/Pagination.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Basic:()=>Basic,CustomTheme:()=>CustomTheme,Playground:()=>Playground,WithTruncation:()=>WithTruncation,WithoutPrevAndNextButtons:()=>WithoutPrevAndNextButtons,default:()=>Pagination_stories});var objectSpread2=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),slicedToArray=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),react=__webpack_require__("../../node_modules/react/index.js"),toConsumableArray=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/toConsumableArray.js"),dist_import=__webpack_require__("../../node_modules/@react-aria/visually-hidden/dist/import.mjs");__webpack_require__("./src/styles/base.css");const Pagination_module={container:"Pagination_container__foAKJ pagination_hds-pagination-container__RDEe-",hideNextButton:"Pagination_hideNextButton__yC6Bn",buttonPrevious:"Pagination_buttonPrevious__TgCuR pagination_hds-pagination__button-prev__zx8i-",buttonNext:"Pagination_buttonNext__l2UKM pagination_hds-pagination__button-next__b5ZQ5",pagination:"Pagination_pagination__hDKaT pagination_hds-pagination__dbixm",pages:"Pagination_pages__Q5UsW pagination_hds-pagination__pages__VbDcc",itemEllipsis:"Pagination_itemEllipsis__KrXD8 pagination_hds-pagination__item-ellipsis__38wXN",itemLink:"Pagination_itemLink__MV-kF pagination_hds-pagination__item-link__XnfJ7",itemLinkActive:"Pagination_itemLinkActive__8nHXW pagination_hds-pagination__item-link--active__dHGJr"};var classNames=__webpack_require__("./src/utils/classNames.ts"),Button=__webpack_require__("./src/components/button/Button.tsx"),IconAngleLeft=__webpack_require__("./src/icons/IconAngleLeft.tsx"),IconAngleRight=__webpack_require__("./src/icons/IconAngleRight.tsx"),useTheme=__webpack_require__("./src/hooks/useTheme.tsx"),jsx_runtime=__webpack_require__("../../node_modules/react/jsx-runtime.js"),mapLangToNext=function mapLangToNext(language){return{fi:"Seuraava",sv:"Nästa",en:"Next"}[language]},mapLangToPrevious=function mapLangToPrevious(language){return{fi:"Edellinen",sv:"Föregående",en:"Previous"}[language]},mapLangToPageAriaLabel=function mapLangToPageAriaLabel(pageNumber,language){return{fi:"Sivu ".concat(pageNumber),sv:"Sida ".concat(pageNumber),en:"Page ".concat(pageNumber)}[language]},mapLangToPageTitle=function mapLangToPageTitle(pageNumber,language,currentPage){return currentPage?{fi:"Nykyinen sivu",sv:"Nuvarande sida",en:"Current page"}[language]:{fi:"Sivu ".concat(pageNumber),sv:"Sida ".concat(pageNumber),en:"Page ".concat(pageNumber)}[language]},mapLangToOpenedPage=function mapLangToOpenedPage(pageNumber,language){return{fi:"Avattu sivu ".concat(pageNumber),sv:"Öppnad sida ".concat(pageNumber),en:"Opened page ".concat(pageNumber)}[language]},range=function range(start,end){var length=end-start+1;return Array.from({length},(function(_,i){return start+i}))},Ellipsis=function(Ellipsis){return Ellipsis.start="start-ellipsis",Ellipsis.end="end-ellipsis",Ellipsis}(Ellipsis||{}),Pagination=function Pagination(_ref2){var _ref2$dataTestId=_ref2.dataTestId,dataTestId=void 0===_ref2$dataTestId?"hds-pagination":_ref2$dataTestId,_ref2$hideNextButton=_ref2.hideNextButton,hideNextButton=void 0!==_ref2$hideNextButton&&_ref2$hideNextButton,_ref2$hidePrevButton=_ref2.hidePrevButton,hidePrevButton=void 0!==_ref2$hidePrevButton&&_ref2$hidePrevButton,_ref2$language=_ref2.language,language=void 0===_ref2$language?"fi":_ref2$language,onChange=_ref2.onChange,pageCount=_ref2.pageCount,pageHref=_ref2.pageHref,pageIndex=_ref2.pageIndex,paginationAriaLabel=_ref2.paginationAriaLabel,_ref2$siblingCount=_ref2.siblingCount,siblingCount=void 0===_ref2$siblingCount?1:_ref2$siblingCount,theme=_ref2.theme,initialPageIndex=(0,react.useRef)(pageIndex),_useState=(0,react.useState)(!1),_useState2=(0,slicedToArray.Z)(_useState,2),hasUserChangedPage=_useState2[0],setHasUserChangedPage=_useState2[1];(0,react.useEffect)((function(){!1===hasUserChangedPage&&pageIndex!==initialPageIndex.current&&setHasUserChangedPage(!0)}),[pageIndex,hasUserChangedPage]);var itemList=(0,react.useMemo)((function(){return function createPaginationItemList(_ref){var pageCount=_ref.pageCount,pageIndex=_ref.pageIndex,siblingCount=_ref.siblingCount,endPages=range(Math.max(pageCount,2),pageCount),startPages=range(1,Math.min(1,pageCount)),siblingsStart=Math.max(Math.min(pageIndex+1-siblingCount,pageCount-1-2*siblingCount-1),3),siblingsEnd=Math.min(Math.max(pageIndex+1+siblingCount,1+2*siblingCount+2),endPages.length>0?endPages[0]-2:pageCount-1);return[].concat((0,toConsumableArray.Z)(startPages),(0,toConsumableArray.Z)(siblingsStart>3?["start-ellipsis"]:pageCount-1>2?[2]:[]),(0,toConsumableArray.Z)(range(siblingsStart,siblingsEnd)),(0,toConsumableArray.Z)(siblingsEnd1?[pageCount-1]:[]),(0,toConsumableArray.Z)(endPages))}({pageCount,pageIndex,siblingCount})}),[pageCount,pageIndex,siblingCount]),customThemeClass=(0,useTheme.F)(Pagination_module.pagination,theme);return pageCount<=0?null:(0,jsx_runtime.jsx)("div",{className:Pagination_module.container,children:(0,jsx_runtime.jsxs)("nav",{className:(0,classNames.Z)(Pagination_module.pagination,customThemeClass,hideNextButton?Pagination_module.hideNextButton:""),role:"navigation","aria-label":paginationAriaLabel,"data-next":mapLangToNext(language),"data-testid":dataTestId,children:[(0,jsx_runtime.jsx)(dist_import.T,{children:(0,jsx_runtime.jsx)("span",{"aria-atomic":!0,"aria-live":"polite",children:hasUserChangedPage?mapLangToOpenedPage(pageIndex+1,language):""})}),!hidePrevButton&&(0,jsx_runtime.jsx)(Button.z,{className:Pagination_module.buttonPrevious,"data-testid":"".concat(dataTestId,"-previous-button"),disabled:0===pageIndex||1===pageCount,onClick:function onClick(event){return onChange(event,pageIndex-1)},variant:"supplementary",theme:"black",iconLeft:(0,jsx_runtime.jsx)(IconAngleLeft.IconAngleLeft,{}),children:mapLangToPrevious(language)}),(0,jsx_runtime.jsx)("ul",{className:Pagination_module.pages,children:itemList.map((function(pageItem){return pageItem===Ellipsis.start||pageItem===Ellipsis.end?(0,jsx_runtime.jsx)("li",{children:(0,jsx_runtime.jsx)("span",{className:Pagination_module.itemEllipsis,children:"..."})},pageItem):(0,jsx_runtime.jsx)("li",{children:(0,jsx_runtime.jsx)("a",{className:(0,classNames.Z)(Pagination_module.itemLink,pageIndex+1===pageItem?Pagination_module.itemLinkActive:""),"data-testid":"".concat(dataTestId,"-page-").concat(pageItem),href:pageHref(pageItem),onClick:onChange?function(event){return onChange(event,pageItem-1)}:void 0,title:mapLangToPageTitle(pageItem,language,pageItem===pageIndex+1),"aria-label":mapLangToPageAriaLabel(pageItem,language),"aria-current":pageIndex+1===pageItem&&"page",children:pageItem})},pageItem)}))}),!hideNextButton&&(0,jsx_runtime.jsx)(Button.z,{className:Pagination_module.buttonNext,"data-testid":"".concat(dataTestId,"-next-button"),disabled:pageIndex===pageCount-1||1===pageCount,onClick:function onClick(event){return onChange(event,pageIndex+1)},variant:"supplementary",theme:"black",iconRight:(0,jsx_runtime.jsx)(IconAngleRight.IconAngleRight,{className:Pagination_module.angleRightIcon}),children:mapLangToNext(language)})]})})};try{Pagination.displayName="Pagination",Pagination.__docgenInfo={description:"",displayName:"Pagination",props:{dataTestId:{defaultValue:{value:"hds-pagination"},description:"Data test id of pagination",name:"dataTestId",required:!1,type:{name:"string"}},hideNextButton:{defaultValue:{value:"false"},description:"If true, hide the next-page button",name:"hideNextButton",required:!1,type:{name:"boolean"}},hidePrevButton:{defaultValue:{value:"false"},description:"If true, hide the previous-page button",name:"hidePrevButton",required:!1,type:{name:"boolean"}},language:{defaultValue:{value:"fi"},description:"The language of the pagination component.",name:"language",required:!1,type:{name:"enum",value:[{value:'"en"'},{value:'"fi"'},{value:'"sv"'}]}},onChange:{defaultValue:null,description:"Callback fired when the page is changed",name:"onChange",required:!1,type:{name:"(event: MouseEvent | MouseEvent, index: number) => void"}},pageCount:{defaultValue:null,description:"The total number of pages",name:"pageCount",required:!0,type:{name:"number"}},pageHref:{defaultValue:null,description:"A function for generating the href of pages",name:"pageHref",required:!0,type:{name:"(index: number) => string"}},pageIndex:{defaultValue:null,description:"The active page index",name:"pageIndex",required:!0,type:{name:"number"}},paginationAriaLabel:{defaultValue:null,description:"Aria-label for the pagination nav element",name:"paginationAriaLabel",required:!0,type:{name:"string"}},siblingCount:{defaultValue:{value:"1"},description:"Number of always visible pages before and after the current page",name:"siblingCount",required:!1,type:{name:"number"}},theme:{defaultValue:null,description:"Theme prop for customisation of the Pagination component",name:"theme",required:!1,type:{name:"PaginationCustomTheme"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/pagination/Pagination.tsx#Pagination"]={docgenInfo:Pagination.__docgenInfo,name:"Pagination",path:"src/components/pagination/Pagination.tsx#Pagination"})}catch(__react_docgen_typescript_loader_error){}const Pagination_stories={component:Pagination,title:"Components/Pagination",parameters:{storySource:{source:"import React, { useState } from 'react';\n\nimport { Pagination } from './Pagination';\n\nexport default {\n component: Pagination,\n title: 'Components/Pagination',\n parameters: {\n controls: { expanded: true },\n },\n args: {},\n};\n\n// args is required for docs tab to show source code\n\nexport const Basic = (args) => {\n const [pageIndex, setPageIndex] = useState(0);\n return (\n {\n event.preventDefault();\n setPageIndex(index);\n }}\n pageCount={5}\n pageHref={() => '#'}\n pageIndex={pageIndex}\n paginationAriaLabel=\"Pagination\"\n />\n );\n};\n\n// args is required for docs tab to show source code\n\nexport const WithTruncation = (args) => {\n const [pageIndexPagination1, setPageIndexPagination1] = useState(7);\n const [pageIndexPagination2, setPageIndexPagination2] = useState(7);\n const [pageIndexPagination3, setPageIndexPagination3] = useState(7);\n\n return (\n <>\n {\n event.preventDefault();\n setPageIndexPagination1(index);\n }}\n pageCount={68}\n pageHref={() => '#'}\n pageIndex={pageIndexPagination1}\n paginationAriaLabel=\"Pagination 1\"\n siblingCount={0}\n />\n {\n event.preventDefault();\n setPageIndexPagination2(index);\n }}\n pageCount={68}\n pageHref={() => '#'}\n pageIndex={pageIndexPagination2}\n paginationAriaLabel=\"Pagination 2\"\n />\n {\n event.preventDefault();\n setPageIndexPagination3(index);\n }}\n pageCount={68}\n pageHref={() => '#'}\n pageIndex={pageIndexPagination3}\n paginationAriaLabel=\"Pagination 3\"\n siblingCount={2}\n />\n \n );\n};\n\nWithTruncation.storyName = 'With truncation';\n\n// args is required for docs tab to show source code\n\nexport const WithoutPrevAndNextButtons = (args) => {\n const [pageIndex, setPageIndex] = useState(7);\n\n return (\n {\n event.preventDefault();\n setPageIndex(index);\n }}\n pageCount={68}\n pageHref={() => '#'}\n pageIndex={pageIndex}\n paginationAriaLabel=\"Pagination\"\n />\n );\n};\n\nWithoutPrevAndNextButtons.storyName = 'Without prev and next buttons';\n\n// args is required for docs tab to show source code\n\nexport const CustomTheme = (args) => {\n const theme = {\n '--active-page-background-color': 'var(--color-bus)',\n };\n\n const [pageIndex, setPageIndex] = useState(0);\n\n return (\n {\n event.preventDefault();\n setPageIndex(index);\n }}\n pageCount={5}\n pageHref={() => '#'}\n pageIndex={pageIndex}\n paginationAriaLabel=\"Pagination\"\n theme={theme}\n />\n );\n};\n\nCustomTheme.storyName = 'Custom theme';\n\nexport const Playground = (args) => {\n const [pageIndex, setPageIndex] = useState(7);\n\n return (\n {\n event.preventDefault();\n setPageIndex(index);\n }}\n pageCount={args.pageCount}\n pageHref={() => '#'}\n pageIndex={pageIndex}\n paginationAriaLabel={args.paginationAriaLabel}\n siblingCount={args.siblingCount}\n theme={args.theme}\n />\n );\n};\n\nPlayground.parameters = {\n previewTabs: {\n 'storybook/docs/panel': {\n hidden: true,\n },\n },\n docs: {\n disable: true,\n },\n loki: { skip: true },\n};\n\nPlayground.args = {\n dataTestId: 'hds-pagination',\n hideNextButton: false,\n hidePrevButton: false,\n language: 'en',\n pageCount: 68,\n siblingCount: 2,\n paginationAriaLabel: 'Pagination',\n theme: {\n '--active-page-background-color': 'var(--color-bus)',\n },\n};\n\nPlayground.argTypes = {\n language: {\n options: ['fi', 'en', 'sv'],\n control: { type: 'radio' },\n },\n};\n",locationsMap:{basic:{startLoc:{col:21,line:16},endLoc:{col:1,line:31},startBody:{col:21,line:16},endBody:{col:1,line:31}},"with-truncation":{startLoc:{col:30,line:35},endLoc:{col:1,line:79},startBody:{col:30,line:35},endBody:{col:1,line:79}},"without-prev-and-next-buttons":{startLoc:{col:41,line:85},endLoc:{col:1,line:103},startBody:{col:41,line:85},endBody:{col:1,line:103}},"custom-theme":{startLoc:{col:27,line:109},endLoc:{col:1,line:130},startBody:{col:27,line:109},endBody:{col:1,line:130}},playground:{startLoc:{col:26,line:134},endLoc:{col:1,line:155},startBody:{col:26,line:134},endBody:{col:1,line:155}}}},controls:{expanded:!0}},args:{}};var Basic=function Basic(args){var _useState=(0,react.useState)(0),_useState2=(0,slicedToArray.Z)(_useState,2),pageIndex=_useState2[0],setPageIndex=_useState2[1];return(0,jsx_runtime.jsx)(Pagination,{language:"en",onChange:function onChange(event,index){event.preventDefault(),setPageIndex(index)},pageCount:5,pageHref:function pageHref(){return"#"},pageIndex,paginationAriaLabel:"Pagination"})},WithTruncation=function WithTruncation(args){var _useState3=(0,react.useState)(7),_useState4=(0,slicedToArray.Z)(_useState3,2),pageIndexPagination1=_useState4[0],setPageIndexPagination1=_useState4[1],_useState5=(0,react.useState)(7),_useState6=(0,slicedToArray.Z)(_useState5,2),pageIndexPagination2=_useState6[0],setPageIndexPagination2=_useState6[1],_useState7=(0,react.useState)(7),_useState8=(0,slicedToArray.Z)(_useState7,2),pageIndexPagination3=_useState8[0],setPageIndexPagination3=_useState8[1];return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(Pagination,{language:"en",onChange:function onChange(event,index){event.preventDefault(),setPageIndexPagination1(index)},pageCount:68,pageHref:function pageHref(){return"#"},pageIndex:pageIndexPagination1,paginationAriaLabel:"Pagination 1",siblingCount:0}),(0,jsx_runtime.jsx)(Pagination,{language:"en",onChange:function onChange(event,index){event.preventDefault(),setPageIndexPagination2(index)},pageCount:68,pageHref:function pageHref(){return"#"},pageIndex:pageIndexPagination2,paginationAriaLabel:"Pagination 2"}),(0,jsx_runtime.jsx)(Pagination,{language:"en",onChange:function onChange(event,index){event.preventDefault(),setPageIndexPagination3(index)},pageCount:68,pageHref:function pageHref(){return"#"},pageIndex:pageIndexPagination3,paginationAriaLabel:"Pagination 3",siblingCount:2})]})};WithTruncation.storyName="With truncation";var WithoutPrevAndNextButtons=function WithoutPrevAndNextButtons(args){var _useState9=(0,react.useState)(7),_useState10=(0,slicedToArray.Z)(_useState9,2),pageIndex=_useState10[0],setPageIndex=_useState10[1];return(0,jsx_runtime.jsx)(Pagination,{hideNextButton:!0,hidePrevButton:!0,language:"en",onChange:function onChange(event,index){event.preventDefault(),setPageIndex(index)},pageCount:68,pageHref:function pageHref(){return"#"},pageIndex,paginationAriaLabel:"Pagination"})};WithoutPrevAndNextButtons.storyName="Without prev and next buttons";var CustomTheme=function CustomTheme(args){var _useState11=(0,react.useState)(0),_useState12=(0,slicedToArray.Z)(_useState11,2),pageIndex=_useState12[0],setPageIndex=_useState12[1];return(0,jsx_runtime.jsx)(Pagination,{language:"en",onChange:function onChange(event,index){event.preventDefault(),setPageIndex(index)},pageCount:5,pageHref:function pageHref(){return"#"},pageIndex,paginationAriaLabel:"Pagination",theme:{"--active-page-background-color":"var(--color-bus)"}})};CustomTheme.storyName="Custom theme";var Playground=function Playground(args){var _useState13=(0,react.useState)(7),_useState14=(0,slicedToArray.Z)(_useState13,2),pageIndex=_useState14[0],setPageIndex=_useState14[1];return(0,jsx_runtime.jsx)(Pagination,{dataTestId:args.dataTestId,hideNextButton:args.hideNextButton,hidePrevButton:args.hidePrevButton,language:args.language,onChange:function onChange(event,index){event.preventDefault(),setPageIndex(index)},pageCount:args.pageCount,pageHref:function pageHref(){return"#"},pageIndex,paginationAriaLabel:args.paginationAriaLabel,siblingCount:args.siblingCount,theme:args.theme})};Playground.parameters={previewTabs:{"storybook/docs/panel":{hidden:!0}},docs:{disable:!0},loki:{skip:!0}},Playground.args={dataTestId:"hds-pagination",hideNextButton:!1,hidePrevButton:!1,language:"en",pageCount:68,siblingCount:2,paginationAriaLabel:"Pagination",theme:{"--active-page-background-color":"var(--color-bus)"}},Playground.argTypes={language:{options:["fi","en","sv"],control:{type:"radio"}}},Basic.parameters=(0,objectSpread2.Z)({storySource:{source:'(args) => {\n const [pageIndex, setPageIndex] = useState(0);\n return (\n {\n event.preventDefault();\n setPageIndex(index);\n }}\n pageCount={5}\n pageHref={() => \'#\'}\n pageIndex={pageIndex}\n paginationAriaLabel="Pagination"\n />\n );\n}'}},Basic.parameters),WithTruncation.parameters=(0,objectSpread2.Z)({storySource:{source:'(args) => {\n const [pageIndexPagination1, setPageIndexPagination1] = useState(7);\n const [pageIndexPagination2, setPageIndexPagination2] = useState(7);\n const [pageIndexPagination3, setPageIndexPagination3] = useState(7);\n\n return (\n <>\n {\n event.preventDefault();\n setPageIndexPagination1(index);\n }}\n pageCount={68}\n pageHref={() => \'#\'}\n pageIndex={pageIndexPagination1}\n paginationAriaLabel="Pagination 1"\n siblingCount={0}\n />\n {\n event.preventDefault();\n setPageIndexPagination2(index);\n }}\n pageCount={68}\n pageHref={() => \'#\'}\n pageIndex={pageIndexPagination2}\n paginationAriaLabel="Pagination 2"\n />\n {\n event.preventDefault();\n setPageIndexPagination3(index);\n }}\n pageCount={68}\n pageHref={() => \'#\'}\n pageIndex={pageIndexPagination3}\n paginationAriaLabel="Pagination 3"\n siblingCount={2}\n />\n \n );\n}'}},WithTruncation.parameters),WithoutPrevAndNextButtons.parameters=(0,objectSpread2.Z)({storySource:{source:'(args) => {\n const [pageIndex, setPageIndex] = useState(7);\n\n return (\n {\n event.preventDefault();\n setPageIndex(index);\n }}\n pageCount={68}\n pageHref={() => \'#\'}\n pageIndex={pageIndex}\n paginationAriaLabel="Pagination"\n />\n );\n}'}},WithoutPrevAndNextButtons.parameters),CustomTheme.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => {\n const theme = {\n '--active-page-background-color': 'var(--color-bus)',\n };\n\n const [pageIndex, setPageIndex] = useState(0);\n\n return (\n {\n event.preventDefault();\n setPageIndex(index);\n }}\n pageCount={5}\n pageHref={() => '#'}\n pageIndex={pageIndex}\n paginationAriaLabel=\"Pagination\"\n theme={theme}\n />\n );\n}"}},CustomTheme.parameters),Playground.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => {\n const [pageIndex, setPageIndex] = useState(7);\n\n return (\n {\n event.preventDefault();\n setPageIndex(index);\n }}\n pageCount={args.pageCount}\n pageHref={() => '#'}\n pageIndex={pageIndex}\n paginationAriaLabel={args.paginationAriaLabel}\n siblingCount={args.siblingCount}\n theme={args.theme}\n />\n );\n}"}},Playground.parameters);try{Basic.displayName="Basic",Basic.__docgenInfo={description:"",displayName:"Basic",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/pagination/Pagination.stories.tsx#Basic"]={docgenInfo:Basic.__docgenInfo,name:"Basic",path:"src/components/pagination/Pagination.stories.tsx#Basic"})}catch(__react_docgen_typescript_loader_error){}try{WithTruncation.displayName="WithTruncation",WithTruncation.__docgenInfo={description:"",displayName:"WithTruncation",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/pagination/Pagination.stories.tsx#WithTruncation"]={docgenInfo:WithTruncation.__docgenInfo,name:"WithTruncation",path:"src/components/pagination/Pagination.stories.tsx#WithTruncation"})}catch(__react_docgen_typescript_loader_error){}try{WithoutPrevAndNextButtons.displayName="WithoutPrevAndNextButtons",WithoutPrevAndNextButtons.__docgenInfo={description:"",displayName:"WithoutPrevAndNextButtons",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/pagination/Pagination.stories.tsx#WithoutPrevAndNextButtons"]={docgenInfo:WithoutPrevAndNextButtons.__docgenInfo,name:"WithoutPrevAndNextButtons",path:"src/components/pagination/Pagination.stories.tsx#WithoutPrevAndNextButtons"})}catch(__react_docgen_typescript_loader_error){}try{CustomTheme.displayName="CustomTheme",CustomTheme.__docgenInfo={description:"",displayName:"CustomTheme",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/pagination/Pagination.stories.tsx#CustomTheme"]={docgenInfo:CustomTheme.__docgenInfo,name:"CustomTheme",path:"src/components/pagination/Pagination.stories.tsx#CustomTheme"})}catch(__react_docgen_typescript_loader_error){}try{Playground.displayName="Playground",Playground.__docgenInfo={description:"",displayName:"Playground",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/pagination/Pagination.stories.tsx#Playground"]={docgenInfo:Playground.__docgenInfo,name:"Playground",path:"src/components/pagination/Pagination.stories.tsx#Playground"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/passwordInput/PasswordInput.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{AutoCompleteOn:()=>AutoCompleteOn,Default:()=>Default,Disabled:()=>Disabled,InitiallyRevealed:()=>InitiallyRevealed,Invalid:()=>Invalid,Success:()=>Success,WithDefaultValue:()=>WithDefaultValue,WithExternalShowPasswordButton:()=>WithExternalShowPasswordButton,default:()=>PasswordInput_stories});var slicedToArray=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),objectSpread2=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),react=__webpack_require__("../../node_modules/react/index.js"),objectWithoutProperties=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js");__webpack_require__("./src/styles/base.css");const PasswordInput_module_disabledShowPasswordButton="PasswordInput_disabledShowPasswordButton__5nnnF";var IconEyeCrossed=__webpack_require__("./src/icons/IconEyeCrossed.tsx"),IconEye=__webpack_require__("./src/icons/IconEye.tsx"),InputWrapper=__webpack_require__("./src/internal/input-wrapper/InputWrapper.tsx"),classNames=__webpack_require__("./src/utils/classNames.ts"),TextInput_module=__webpack_require__("./src/components/textInput/TextInput.module.css"),composeAriaDescribedBy=__webpack_require__("./src/utils/composeAriaDescribedBy.ts"),jsx_runtime=__webpack_require__("../../node_modules/react/jsx-runtime.js"),_excluded=["className","errorText","helperText","hideLabel","id","invalid","label","required","style","successText","infoText","tooltipLabel","tooltipText","tooltipButtonLabel","concealPasswordButtonAriaLabel","disabled","includeShowPasswordButton","initiallyRevealed","onBlur","revealPasswordButtonAriaLabel","type"],PasswordInput=react.forwardRef((function(_ref,ref){var revealPassword,setRevealPassword,className=_ref.className,errorText=_ref.errorText,helperText=_ref.helperText,hideLabel=_ref.hideLabel,id=_ref.id,invalid=_ref.invalid,label=_ref.label,required=_ref.required,style=_ref.style,successText=_ref.successText,infoText=_ref.infoText,tooltipLabel=_ref.tooltipLabel,tooltipText=_ref.tooltipText,tooltipButtonLabel=_ref.tooltipButtonLabel,concealPasswordButtonAriaLabel=_ref.concealPasswordButtonAriaLabel,_ref$disabled=_ref.disabled,disabled=void 0!==_ref$disabled&&_ref$disabled,_ref$includeShowPassw=_ref.includeShowPasswordButton,includeShowPasswordButton=void 0===_ref$includeShowPassw||_ref$includeShowPassw,_ref$initiallyReveale=_ref.initiallyRevealed,initiallyRevealed=void 0!==_ref$initiallyReveale&&_ref$initiallyReveale,onBlur=_ref.onBlur,revealPasswordButtonAriaLabel=_ref.revealPasswordButtonAriaLabel,type=_ref.type,passwordInputProps=(0,objectWithoutProperties.Z)(_ref,_excluded),wrapperProps={className,errorText,helperText,hideLabel,id,invalid,label,required,style,successText,infoText,tooltipLabel,tooltipText,tooltipButtonLabel};if(includeShowPasswordButton){var _useState=(0,react.useState)(initiallyRevealed),_useState2=(0,slicedToArray.Z)(_useState,2);revealPassword=_useState2[0],setRevealPassword=_useState2[1]}var ariaDescribedBy=(0,composeAriaDescribedBy.Z)(id,helperText,errorText,successText,infoText);return(0,jsx_runtime.jsxs)(InputWrapper.S,(0,objectSpread2.Z)((0,objectSpread2.Z)({onBlur:function handleOnBlur(event){event.currentTarget.contains(event.relatedTarget)||includeShowPasswordButton&&revealPassword&&setRevealPassword(!1),"function"==typeof onBlur&&onBlur(event)}},wrapperProps),{},{children:[(0,jsx_runtime.jsx)("input",(0,objectSpread2.Z)({className:(0,classNames.Z)(TextInput_module.Z.input,includeShowPasswordButton&&TextInput_module.Z.hasButton),disabled,id,ref,required,type:function resolveType(){return includeShowPasswordButton?revealPassword?"text":"password":type||"password"}(),"aria-describedby":ariaDescribedBy.length>0?ariaDescribedBy:null},passwordInputProps)),includeShowPasswordButton&&(0,jsx_runtime.jsx)("div",{className:TextInput_module.Z.buttonWrapper,children:(0,jsx_runtime.jsxs)("button",(0,objectSpread2.Z)((0,objectSpread2.Z)({className:TextInput_module.Z.button,type:"button",disabled},function getButtonProps(){return revealPassword?{"aria-label":concealPasswordButtonAriaLabel,onClick:function onClick(){return setRevealPassword(!1)}}:{"aria-label":revealPasswordButtonAriaLabel,onClick:function onClick(){return setRevealPassword(!0)}}}()),{},{children:[revealPassword&&(0,jsx_runtime.jsx)(IconEyeCrossed.IconEyeCrossed,{"aria-hidden":!0,className:disabled?PasswordInput_module_disabledShowPasswordButton:""}),!revealPassword&&(0,jsx_runtime.jsx)(IconEye.IconEye,{"aria-hidden":!0,className:disabled?PasswordInput_module_disabledShowPasswordButton:""})]}))})]}))}));try{PasswordInput.displayName="PasswordInput",PasswordInput.__docgenInfo={description:"",displayName:"PasswordInput",props:{className:{defaultValue:null,description:"Additional class names to apply to the text input",name:"className",required:!1,type:{name:"string"}},id:{defaultValue:null,description:"The id of the input element",name:"id",required:!1,type:{name:"string"}},style:{defaultValue:null,description:"Override or extend the styles applied to the component",name:"style",required:!1,type:{name:"CSSProperties"}},label:{defaultValue:null,description:"The label for the input",name:"label",required:!0,type:{name:"string"}},disabled:{defaultValue:{value:"false"},description:"If `true`, the input will be disabled",name:"disabled",required:!1,type:{name:"boolean"}},type:{defaultValue:null,description:"Type of the password input. Only applied when includeShowPasswordButton is false.\nUse this if you wish to not have show password button, or you wish to apply external show password button.",name:"type",required:!1,type:{name:"string"}},value:{defaultValue:null,description:"The value of the input element, required for a controlled component",name:"value",required:!1,type:{name:"string & (string | number | readonly string[])"}},defaultValue:{defaultValue:null,description:"The default input element value. Use when the component is not controlled",name:"defaultValue",required:!1,type:{name:"string & (string | number | readonly string[])"}},placeholder:{defaultValue:null,description:"Short hint displayed in the input before the user enters a value",name:"placeholder",required:!1,type:{name:"string"}},onChange:{defaultValue:null,description:"Callback fired when the state is changed",name:"onChange",required:!1,type:{name:"ChangeEventHandler"}},readOnly:{defaultValue:null,description:"If `true`, prevents the user from changing the value of the field (not from interacting with the field)",name:"readOnly",required:!1,type:{name:"boolean"}},required:{defaultValue:null,description:"If `true`, the label is displayed as required and the `input` element will be required",name:"required",required:!1,type:{name:"boolean"}},errorText:{defaultValue:null,description:"The error text content that will be shown below the input",name:"errorText",required:!1,type:{name:"string"}},helperText:{defaultValue:null,description:"The helper text content that will be shown below the input",name:"helperText",required:!1,type:{name:"string"}},tooltipText:{defaultValue:null,description:"The text content of the tooltip",name:"tooltipText",required:!1,type:{name:"string"}},tooltipLabel:{defaultValue:null,description:"Aria-label text for the tooltip",name:"tooltipLabel",required:!1,type:{name:"string"}},tooltipButtonLabel:{defaultValue:null,description:"Aria-label text for the tooltip trigger button",name:"tooltipButtonLabel",required:!1,type:{name:"string"}},hideLabel:{defaultValue:null,description:"Hides the label above the input",name:"hideLabel",required:!1,type:{name:"boolean"}},invalid:{defaultValue:null,description:"If `true`, the input will be displayed in an invalid state.",name:"invalid",required:!1,type:{name:"boolean"}},successText:{defaultValue:null,description:"The success text content that will be shown below the input",name:"successText",required:!1,type:{name:"string"}},infoText:{defaultValue:null,description:"The info text content that will be shown below the input",name:"infoText",required:!1,type:{name:"string"}},concealPasswordButtonAriaLabel:{defaultValue:null,description:"The aria-label for conceal password button",name:"concealPasswordButtonAriaLabel",required:!1,type:{name:"string"}},includeShowPasswordButton:{defaultValue:{value:"true"},description:"Boolean value for whether the component will include show / hide password button. Defaults to true.",name:"includeShowPasswordButton",required:!1,type:{name:"boolean"}},initiallyRevealed:{defaultValue:{value:"false"},description:"Boolean value for whether the component will initially reveal the password or not.\nOnly applied when includeShowPasswordButton is true. Defaults to false.",name:"initiallyRevealed",required:!1,type:{name:"boolean"}},revealPasswordButtonAriaLabel:{defaultValue:null,description:"The aria-label for reveal password button",name:"revealPasswordButtonAriaLabel",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/passwordInput/PasswordInput.tsx#PasswordInput"]={docgenInfo:PasswordInput.__docgenInfo,name:"PasswordInput",path:"src/components/passwordInput/PasswordInput.tsx#PasswordInput"})}catch(__react_docgen_typescript_loader_error){}var Button=__webpack_require__("./src/components/button/Button.tsx");const PasswordInput_stories={component:PasswordInput,title:"Components/PasswordInput",decorators:[function(storyFn){return(0,jsx_runtime.jsx)("div",{style:{maxWidth:"400px"},children:storyFn()})}],parameters:{storySource:{source:"import React, { useState } from 'react';\n\nimport { PasswordInput } from './PasswordInput';\nimport { Button } from '../button';\nimport { IconEye, IconEyeCrossed } from '../../icons';\n\nexport default {\n component: PasswordInput,\n title: 'Components/PasswordInput',\n decorators: [(storyFn) =>
{storyFn()}
],\n parameters: {\n controls: { expanded: true },\n },\n args: {},\n};\n\nexport const Default = (args) => ;\nDefault.args = {\n id: 'Default',\n helperText: 'Assistive text',\n label: 'Label',\n revealPasswordButtonAriaLabel: 'Show password',\n concealPasswordButtonAriaLabel: 'Hide password',\n};\n\nexport const Disabled = (args) => ;\nDisabled.storyName = 'Disabled';\nDisabled.args = {\n id: 'Disabled',\n helperText: 'Assistive text',\n defaultValue: '0451234567',\n label: 'Label for disabled',\n disabled: true,\n revealPasswordButtonAriaLabel: 'Show password',\n concealPasswordButtonAriaLabel: 'Hide password',\n};\n\nexport const WithDefaultValue = (args) => ;\nWithDefaultValue.storyName = 'WithDefaultValue';\nWithDefaultValue.args = {\n id: 'WithDefaultValue',\n helperText: 'Assistive text',\n defaultValue: '0451234567',\n label: 'Label for with default value',\n revealPasswordButtonAriaLabel: 'Show password',\n concealPasswordButtonAriaLabel: 'Hide password',\n};\n\nexport const InitiallyRevealed = (args) => ;\nInitiallyRevealed.storyName = 'InitiallyRevealed';\nInitiallyRevealed.args = {\n id: 'InitiallyRevealed',\n helperText: 'Assistive text',\n defaultValue: '0451234567',\n label: 'Label for initially revealed',\n initiallyRevealed: true,\n revealPasswordButtonAriaLabel: 'Show password',\n concealPasswordButtonAriaLabel: 'Hide password',\n};\nexport const AutoCompleteOn = (args) => ;\nAutoCompleteOn.storyName = 'Autocomplete on';\nAutoCompleteOn.args = {\n id: 'Autocomplete on',\n helperText: 'Assistive text',\n label: 'Label for autocomplete on',\n autoComplete: 'on',\n revealPasswordButtonAriaLabel: 'Show password',\n concealPasswordButtonAriaLabel: 'Hide password',\n};\n\nexport const Success = (args) => ;\nSuccess.storyName = 'Success';\nSuccess.args = {\n id: 'Success',\n helperText: 'Assistive text',\n label: 'Label for success input',\n successText: 'Success text',\n revealPasswordButtonAriaLabel: 'Show password',\n concealPasswordButtonAriaLabel: 'Hide password',\n};\n\nexport const Invalid = (args) => ;\nInvalid.storyName = 'Invalid';\nInvalid.args = {\n id: 'Error',\n invalid: true,\n helperText: 'Assistive text',\n label: 'Label for invalid input',\n errorText: 'Error text',\n revealPasswordButtonAriaLabel: 'Show password',\n concealPasswordButtonAriaLabel: 'Hide password',\n};\n\nexport const WithExternalShowPasswordButton = () => {\n const [revealPassword, setRevealPassword] = useState(false);\n return (\n
\n \n setRevealPassword(!revealPassword)}\n iconLeft={revealPassword ? : }\n >\n {revealPassword ? 'Hide password' : 'Show password'}\n \n
\n );\n};\n\nWithExternalShowPasswordButton.storyName = 'With external show password button';\n",locationsMap:{default:{startLoc:{col:23,line:17},endLoc:{col:60,line:17},startBody:{col:23,line:17},endBody:{col:60,line:17}},disabled:{startLoc:{col:24,line:26},endLoc:{col:61,line:26},startBody:{col:24,line:26},endBody:{col:61,line:26}},"with-default-value":{startLoc:{col:32,line:38},endLoc:{col:69,line:38},startBody:{col:32,line:38},endBody:{col:69,line:38}},"initially-revealed":{startLoc:{col:33,line:49},endLoc:{col:70,line:49},startBody:{col:33,line:49},endBody:{col:70,line:49}},"auto-complete-on":{startLoc:{col:30,line:60},endLoc:{col:67,line:60},startBody:{col:30,line:60},endBody:{col:67,line:60}},success:{startLoc:{col:23,line:71},endLoc:{col:60,line:71},startBody:{col:23,line:71},endBody:{col:60,line:71}},invalid:{startLoc:{col:23,line:82},endLoc:{col:60,line:82},startBody:{col:23,line:82},endBody:{col:60,line:82}},"with-external-show-password-button":{startLoc:{col:46,line:94},endLoc:{col:1,line:114},startBody:{col:46,line:94},endBody:{col:1,line:114}}}},controls:{expanded:!0}},args:{}};var Default=function Default(args){return(0,jsx_runtime.jsx)(PasswordInput,(0,objectSpread2.Z)({},args))};Default.args={id:"Default",helperText:"Assistive text",label:"Label",revealPasswordButtonAriaLabel:"Show password",concealPasswordButtonAriaLabel:"Hide password"};var Disabled=function Disabled(args){return(0,jsx_runtime.jsx)(PasswordInput,(0,objectSpread2.Z)({},args))};Disabled.storyName="Disabled",Disabled.args={id:"Disabled",helperText:"Assistive text",defaultValue:"0451234567",label:"Label for disabled",disabled:!0,revealPasswordButtonAriaLabel:"Show password",concealPasswordButtonAriaLabel:"Hide password"};var WithDefaultValue=function WithDefaultValue(args){return(0,jsx_runtime.jsx)(PasswordInput,(0,objectSpread2.Z)({},args))};WithDefaultValue.storyName="WithDefaultValue",WithDefaultValue.args={id:"WithDefaultValue",helperText:"Assistive text",defaultValue:"0451234567",label:"Label for with default value",revealPasswordButtonAriaLabel:"Show password",concealPasswordButtonAriaLabel:"Hide password"};var InitiallyRevealed=function InitiallyRevealed(args){return(0,jsx_runtime.jsx)(PasswordInput,(0,objectSpread2.Z)({},args))};InitiallyRevealed.storyName="InitiallyRevealed",InitiallyRevealed.args={id:"InitiallyRevealed",helperText:"Assistive text",defaultValue:"0451234567",label:"Label for initially revealed",initiallyRevealed:!0,revealPasswordButtonAriaLabel:"Show password",concealPasswordButtonAriaLabel:"Hide password"};var AutoCompleteOn=function AutoCompleteOn(args){return(0,jsx_runtime.jsx)(PasswordInput,(0,objectSpread2.Z)({},args))};AutoCompleteOn.storyName="Autocomplete on",AutoCompleteOn.args={id:"Autocomplete on",helperText:"Assistive text",label:"Label for autocomplete on",autoComplete:"on",revealPasswordButtonAriaLabel:"Show password",concealPasswordButtonAriaLabel:"Hide password"};var Success=function Success(args){return(0,jsx_runtime.jsx)(PasswordInput,(0,objectSpread2.Z)({},args))};Success.storyName="Success",Success.args={id:"Success",helperText:"Assistive text",label:"Label for success input",successText:"Success text",revealPasswordButtonAriaLabel:"Show password",concealPasswordButtonAriaLabel:"Hide password"};var Invalid=function Invalid(args){return(0,jsx_runtime.jsx)(PasswordInput,(0,objectSpread2.Z)({},args))};Invalid.storyName="Invalid",Invalid.args={id:"Error",invalid:!0,helperText:"Assistive text",label:"Label for invalid input",errorText:"Error text",revealPasswordButtonAriaLabel:"Show password",concealPasswordButtonAriaLabel:"Hide password"};var WithExternalShowPasswordButton=function WithExternalShowPasswordButton(){var _useState=(0,react.useState)(!1),_useState2=(0,slicedToArray.Z)(_useState,2),revealPassword=_useState2[0],setRevealPassword=_useState2[1];return(0,jsx_runtime.jsxs)("div",{className:"password-input--external-show-password-button",children:[(0,jsx_runtime.jsx)(PasswordInput,{label:"Label for external show password button",id:"external-password-button",includeShowPasswordButton:!1,helperText:"Assistive text",type:revealPassword?"text":"password"}),(0,jsx_runtime.jsx)(Button.z,{variant:"supplementary",onClick:function onClick(){return setRevealPassword(!revealPassword)},iconLeft:revealPassword?(0,jsx_runtime.jsx)(IconEyeCrossed.IconEyeCrossed,{"aria-hidden":!0}):(0,jsx_runtime.jsx)(IconEye.IconEye,{"aria-hidden":!0}),children:revealPassword?"Hide password":"Show password"})]})};WithExternalShowPasswordButton.storyName="With external show password button",Default.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => "}},Default.parameters),Disabled.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => "}},Disabled.parameters),WithDefaultValue.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => "}},WithDefaultValue.parameters),InitiallyRevealed.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => "}},InitiallyRevealed.parameters),AutoCompleteOn.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => "}},AutoCompleteOn.parameters),Success.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => "}},Success.parameters),Invalid.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => "}},Invalid.parameters),WithExternalShowPasswordButton.parameters=(0,objectSpread2.Z)({storySource:{source:'() => {\n const [revealPassword, setRevealPassword] = useState(false);\n return (\n
\n \n setRevealPassword(!revealPassword)}\n iconLeft={revealPassword ? : }\n >\n {revealPassword ? \'Hide password\' : \'Show password\'}\n \n
\n );\n}'}},WithExternalShowPasswordButton.parameters);try{Default.displayName="Default",Default.__docgenInfo={description:"",displayName:"Default",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/passwordInput/PasswordInput.stories.tsx#Default"]={docgenInfo:Default.__docgenInfo,name:"Default",path:"src/components/passwordInput/PasswordInput.stories.tsx#Default"})}catch(__react_docgen_typescript_loader_error){}try{Disabled.displayName="Disabled",Disabled.__docgenInfo={description:"",displayName:"Disabled",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/passwordInput/PasswordInput.stories.tsx#Disabled"]={docgenInfo:Disabled.__docgenInfo,name:"Disabled",path:"src/components/passwordInput/PasswordInput.stories.tsx#Disabled"})}catch(__react_docgen_typescript_loader_error){}try{WithDefaultValue.displayName="WithDefaultValue",WithDefaultValue.__docgenInfo={description:"",displayName:"WithDefaultValue",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/passwordInput/PasswordInput.stories.tsx#WithDefaultValue"]={docgenInfo:WithDefaultValue.__docgenInfo,name:"WithDefaultValue",path:"src/components/passwordInput/PasswordInput.stories.tsx#WithDefaultValue"})}catch(__react_docgen_typescript_loader_error){}try{InitiallyRevealed.displayName="InitiallyRevealed",InitiallyRevealed.__docgenInfo={description:"",displayName:"InitiallyRevealed",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/passwordInput/PasswordInput.stories.tsx#InitiallyRevealed"]={docgenInfo:InitiallyRevealed.__docgenInfo,name:"InitiallyRevealed",path:"src/components/passwordInput/PasswordInput.stories.tsx#InitiallyRevealed"})}catch(__react_docgen_typescript_loader_error){}try{AutoCompleteOn.displayName="AutoCompleteOn",AutoCompleteOn.__docgenInfo={description:"",displayName:"AutoCompleteOn",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/passwordInput/PasswordInput.stories.tsx#AutoCompleteOn"]={docgenInfo:AutoCompleteOn.__docgenInfo,name:"AutoCompleteOn",path:"src/components/passwordInput/PasswordInput.stories.tsx#AutoCompleteOn"})}catch(__react_docgen_typescript_loader_error){}try{Success.displayName="Success",Success.__docgenInfo={description:"",displayName:"Success",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/passwordInput/PasswordInput.stories.tsx#Success"]={docgenInfo:Success.__docgenInfo,name:"Success",path:"src/components/passwordInput/PasswordInput.stories.tsx#Success"})}catch(__react_docgen_typescript_loader_error){}try{Invalid.displayName="Invalid",Invalid.__docgenInfo={description:"",displayName:"Invalid",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/passwordInput/PasswordInput.stories.tsx#Invalid"]={docgenInfo:Invalid.__docgenInfo,name:"Invalid",path:"src/components/passwordInput/PasswordInput.stories.tsx#Invalid"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/phoneInput/PhoneInput.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,Disabled:()=>Disabled,WithCountryCode:()=>WithCountryCode,WithDefaultValue:()=>WithDefaultValue,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),_storybook_addon_actions__WEBPACK_IMPORTED_MODULE_1__=(__webpack_require__("../../node_modules/react/index.js"),__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js")),_PhoneInput__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/components/phoneInput/PhoneInput.tsx"),_dropdown_combobox__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./src/components/dropdown/combobox/Combobox.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/react/jsx-runtime.js");const __WEBPACK_DEFAULT_EXPORT__={component:_PhoneInput__WEBPACK_IMPORTED_MODULE_3__.s,title:"Components/PhoneInput",decorators:[function(storyFn){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div",{style:{maxWidth:"300px"},children:storyFn()})}],parameters:{storySource:{source:"import React from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport { PhoneInput } from './PhoneInput';\nimport { Combobox } from '../dropdown/combobox';\n\nexport default {\n component: PhoneInput,\n title: 'Components/PhoneInput',\n decorators: [(storyFn) =>
{storyFn()}
],\n parameters: {\n controls: { expanded: true },\n },\n args: {},\n};\n\nexport const Default = (args) => ;\nDefault.args = {\n id: 'Default',\n helperText: 'Assistive text',\n label: 'Label',\n};\n\nexport const Disabled = (args) => ;\nDisabled.storyName = 'Disabled';\nDisabled.args = {\n id: 'Disabled',\n helperText: 'Assistive text',\n defaultValue: '0451234567',\n label: 'Label for disabled',\n disabled: true,\n};\n\nexport const WithDefaultValue = (args) => ;\nWithDefaultValue.storyName = 'With a default value';\nWithDefaultValue.args = {\n id: 'WithDefaultValue',\n defaultValue: '0451234567',\n helperText: 'Assistive text',\n label: 'Label for default value',\n};\n\nexport const WithCountryCode = (args) => {\n const options = [{ label: 'Finland (+358)' }, { label: 'UK (+46)' }];\n return (\n <>\n

\n Work phone\n

\n
\n action('onBlur')}\n onChange={(change) => action('onChange')(change)}\n onFocus={() => action('onFocus')}\n required\n toggleButtonAriaLabel=\"Choose country code\"\n />\n \n
\n \n );\n};\n\nWithCountryCode.storyName = 'With select countrycode';\nWithCountryCode.args = {\n id: 'WithCountryCode',\n defaultValue: '0451234567',\n 'aria-describedby': 'work-phone',\n label: 'Phone number',\n required: true,\n};\nWithCountryCode.decorators = [(storyFn) =>
{storyFn()}
];\n",locationsMap:{default:{startLoc:{col:23,line:17},endLoc:{col:57,line:17},startBody:{col:23,line:17},endBody:{col:57,line:17}},disabled:{startLoc:{col:24,line:24},endLoc:{col:58,line:24},startBody:{col:24,line:24},endBody:{col:58,line:24}},"with-default-value":{startLoc:{col:32,line:34},endLoc:{col:66,line:34},startBody:{col:32,line:34},endBody:{col:66,line:34}},"with-country-code":{startLoc:{col:31,line:43},endLoc:{col:1,line:68},startBody:{col:31,line:43},endBody:{col:1,line:68}}}},controls:{expanded:!0}},args:{}};var Default=function Default(args){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_PhoneInput__WEBPACK_IMPORTED_MODULE_3__.s,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({},args))};Default.args={id:"Default",helperText:"Assistive text",label:"Label"};var Disabled=function Disabled(args){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_PhoneInput__WEBPACK_IMPORTED_MODULE_3__.s,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({},args))};Disabled.storyName="Disabled",Disabled.args={id:"Disabled",helperText:"Assistive text",defaultValue:"0451234567",label:"Label for disabled",disabled:!0};var WithDefaultValue=function WithDefaultValue(args){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_PhoneInput__WEBPACK_IMPORTED_MODULE_3__.s,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({},args))};WithDefaultValue.storyName="With a default value",WithDefaultValue.args={id:"WithDefaultValue",defaultValue:"0451234567",helperText:"Assistive text",label:"Label for default value"};var WithCountryCode=function WithCountryCode(args){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("p",{id:"work-phone",style:{fontSize:"18px",fontWeight:"bold"},children:"Work phone"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("div",{style:{display:"grid",gridTemplateColumns:"200px 300px",columnGap:"16px"},children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_dropdown_combobox__WEBPACK_IMPORTED_MODULE_5__.h,{id:"hds-select-1",label:"Country code",helper:"Assistive text","aria-describedby":"work-phone",options:[{label:"Finland (+358)"},{label:"UK (+46)"}],defaultValue:{label:"Finland (+358)"},onBlur:function onBlur(){return(0,_storybook_addon_actions__WEBPACK_IMPORTED_MODULE_1__.action)("onBlur")},onChange:function onChange(change){return(0,_storybook_addon_actions__WEBPACK_IMPORTED_MODULE_1__.action)("onChange")(change)},onFocus:function onFocus(){return(0,_storybook_addon_actions__WEBPACK_IMPORTED_MODULE_1__.action)("onFocus")},required:!0,toggleButtonAriaLabel:"Choose country code"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_PhoneInput__WEBPACK_IMPORTED_MODULE_3__.s,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({},args))]})]})};WithCountryCode.storyName="With select countrycode",WithCountryCode.args={id:"WithCountryCode",defaultValue:"0451234567","aria-describedby":"work-phone",label:"Phone number",required:!0},WithCountryCode.decorators=[function(storyFn){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div",{style:{maxWidth:"516px"},children:storyFn()})}],Default.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({storySource:{source:"(args) => "}},Default.parameters),Disabled.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({storySource:{source:"(args) => "}},Disabled.parameters),WithDefaultValue.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({storySource:{source:"(args) => "}},WithDefaultValue.parameters),WithCountryCode.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({storySource:{source:"(args) => {\n const options = [{ label: 'Finland (+358)' }, { label: 'UK (+46)' }];\n return (\n <>\n

\n Work phone\n

\n
\n action('onBlur')}\n onChange={(change) => action('onChange')(change)}\n onFocus={() => action('onFocus')}\n required\n toggleButtonAriaLabel=\"Choose country code\"\n />\n \n
\n \n );\n}"}},WithCountryCode.parameters);try{Default.displayName="Default",Default.__docgenInfo={description:"",displayName:"Default",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/phoneInput/PhoneInput.stories.tsx#Default"]={docgenInfo:Default.__docgenInfo,name:"Default",path:"src/components/phoneInput/PhoneInput.stories.tsx#Default"})}catch(__react_docgen_typescript_loader_error){}try{Disabled.displayName="Disabled",Disabled.__docgenInfo={description:"",displayName:"Disabled",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/phoneInput/PhoneInput.stories.tsx#Disabled"]={docgenInfo:Disabled.__docgenInfo,name:"Disabled",path:"src/components/phoneInput/PhoneInput.stories.tsx#Disabled"})}catch(__react_docgen_typescript_loader_error){}try{WithDefaultValue.displayName="WithDefaultValue",WithDefaultValue.__docgenInfo={description:"",displayName:"WithDefaultValue",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/phoneInput/PhoneInput.stories.tsx#WithDefaultValue"]={docgenInfo:WithDefaultValue.__docgenInfo,name:"WithDefaultValue",path:"src/components/phoneInput/PhoneInput.stories.tsx#WithDefaultValue"})}catch(__react_docgen_typescript_loader_error){}try{WithCountryCode.displayName="WithCountryCode",WithCountryCode.__docgenInfo={description:"",displayName:"WithCountryCode",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/phoneInput/PhoneInput.stories.tsx#WithCountryCode"]={docgenInfo:WithCountryCode.__docgenInfo,name:"WithCountryCode",path:"src/components/phoneInput/PhoneInput.stories.tsx#WithCountryCode"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/radioButton/RadioButton.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Custom:()=>Custom,Default:()=>Default,Disabled:()=>Disabled,Playground:()=>Playground,Selected:()=>Selected,SelectedDisabled:()=>SelectedDisabled,WithHelperText:()=>WithHelperText,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/react/index.js"),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@storybook/addon-docs/blocks.js"),_RadioButton__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/components/radioButton/RadioButton.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/react/jsx-runtime.js");const __WEBPACK_DEFAULT_EXPORT__={component:_RadioButton__WEBPACK_IMPORTED_MODULE_3__.E,title:"Components/RadioButton",parameters:{storySource:{source:"import React, { useState } from 'react';\nimport { ArgsTable, Stories, Title } from '@storybook/addon-docs/blocks';\n\nimport { RadioButton } from './RadioButton';\n\nexport default {\n component: RadioButton,\n title: 'Components/RadioButton',\n parameters: {\n controls: { hideNoControlsWarning: true },\n docs: {\n page: () => (\n <>\n Props\n \n \n \n ),\n },\n },\n};\n\nexport const Default = () => ;\n\nexport const Selected = () => ;\n\nexport const Disabled = () => ;\n\nexport const SelectedDisabled = () => ;\nSelectedDisabled.storyName = 'Selected & disabled';\n\nexport const Custom = () => {\n const [radioValue, setRadioValue] = useState('');\n const options = ['foo', 'bar'];\n\n const customStyles = {\n '--size': '36px',\n '--icon-scale': 0.65,\n '--border-width': '3px',\n '--outline-width': '4px',\n '--border-color-selected': 'var(--color-success)',\n '--border-color-selected-hover': 'var(--color-success-dark)',\n '--border-color-selected-focus': 'var(--color-success)',\n '--icon-color-selected': 'var(--color-success)',\n '--icon-color-hover': 'var(--color-success-dark)',\n '--focus-outline-color': 'var(--color-black-20)',\n } as React.CSSProperties;\n\n return (\n <>\n {options.map((option) => (\n setRadioValue((event.target as HTMLInputElement).value)}\n />\n ))}\n \n );\n};\nCustom.storyName = 'With custom styles';\n\nexport const WithHelperText = () => ;\n\nexport const Playground = (args) => {\n const [radioValue, setRadioValue] = useState('');\n const options = ['foo', 'bar', 'baz'];\n\n const styles = {\n '--size': `${args.size}px`,\n '--icon-scale': args.iconScale,\n '--border-width': `${args.borderWidth}px`,\n '--outline-width': `${args.outlineWidth}px`,\n '--label-font-size': `${args.labelFontSize}px`,\n '--label-padding': `${args.labelPadding}px`,\n '--background': args.background,\n '--background-hover': args.backgroundHover,\n '--background-focus': args.backgroundFocus,\n '--background-unselected-disabled': args.backgroundUnselectedDisabled,\n '--background-selected-disabled': args.backgroundSelectedDisabled,\n '--border-color-focus': args.borderColorFocus,\n '--border-color-selected': args.borderColorSelected,\n '--border-color-selected-hover': args.borderColorSelectedHover,\n '--border-color-selected-disabled': args.borderColorSelectedDisabled,\n '--border-color-unselected': args.borderColorUnselected,\n '--border-color-unselected-hover': args.borderColorUnselectedHover,\n '--border-color-unselected-disabled': args.borderColorUnselectedDisabled,\n '--focus-outline-color': args.focusOutlineColor,\n '--icon-color-unselected': args.iconColorUnselected,\n '--icon-color-selected': args.iconColorSelected,\n '--icon-color-disabled': args.iconColorDisabled,\n '--label-color': args.labelColorDefault,\n '--label-color-disabled': args.labelColorDisabled,\n } as React.CSSProperties;\n\n return (\n <>\n {options.map((option) => (\n setRadioValue((event.target as HTMLInputElement).value)}\n />\n ))}\n \n \n \n );\n};\nPlayground.parameters = {\n previewTabs: {\n 'storybook/docs/panel': {\n hidden: true,\n },\n },\n docs: {\n disable: true,\n },\n};\n\nPlayground.args = {\n size: 24,\n iconScale: 0.5,\n borderWidth: 2,\n outlineWidth: 3,\n labelFontSize: 16,\n labelPadding: 8,\n background: '#ffffff',\n backgroundHover: '#ffffff',\n backgroundFocus: '#ffffff',\n backgroundUnselectedDisabled: '#e5e5e5',\n backgroundSelectedDisabled: '#ffffff',\n borderColorFocus: '#1a1a1a',\n borderColorSelected: '#0000bf',\n borderColorSelectedHover: '#000098',\n borderColorSelectedDisabled: '#cccccc',\n borderColorUnselected: '#808080',\n borderColorUnselectedHover: '#1a1a1a',\n borderColorUnselectedDisabled: '#e5e5e5',\n focusOutlineColor: '#0072c6',\n iconColorUnselected: 'rgba(0, 0, 0, 0)',\n iconColorSelected: '#0000bf',\n iconColorDisabled: '#e5e5e5',\n labelColorDefault: '#1a1a1a',\n labelColorDisabled: '#999898',\n};\n\nPlayground.argTypes = {\n size: {\n control: {\n type: 'range',\n min: 10,\n max: 100,\n step: 1,\n },\n },\n iconScale: {\n control: {\n type: 'range',\n min: 0.1,\n max: 0.9,\n step: 0.05,\n },\n },\n borderWidth: {\n control: {\n type: 'range',\n min: 1,\n max: 10,\n step: 1,\n },\n },\n outlineWidth: {\n control: {\n type: 'range',\n min: 1,\n max: 10,\n step: 1,\n },\n },\n labelFontSize: {\n control: {\n type: 'range',\n min: 12,\n max: 32,\n step: 1,\n },\n },\n labelPadding: {\n control: {\n type: 'range',\n min: 4,\n max: 32,\n step: 2,\n },\n },\n background: { control: { type: 'color' } },\n backgroundHover: { control: { type: 'color' } },\n backgroundFocus: { control: { type: 'color' } },\n backgroundUnselectedDisabled: { control: { type: 'color' } },\n backgroundSelectedDisabled: { control: { type: 'color' } },\n borderColorFocus: { control: { type: 'color' } },\n borderColorSelected: { control: { type: 'color' } },\n borderColorSelectedHover: { control: { type: 'color' } },\n borderColorSelectedDisabled: { control: { type: 'color' } },\n borderColorUnselected: { control: { type: 'color' } },\n borderColorUnselectedHover: { control: { type: 'color' } },\n borderColorUnselectedDisabled: { control: { type: 'color' } },\n focusOutlineColor: { control: { type: 'color' } },\n iconColorUnselected: { control: { type: 'color' } },\n iconColorSelected: { control: { type: 'color' } },\n iconColorDisabled: { control: { type: 'color' } },\n labelColorDefault: { control: { type: 'color' } },\n labelColorDisabled: { control: { type: 'color' } },\n};\n",locationsMap:{default:{startLoc:{col:23,line:23},endLoc:{col:69,line:23},startBody:{col:23,line:23},endBody:{col:69,line:23}},selected:{startLoc:{col:24,line:25},endLoc:{col:79,line:25},startBody:{col:24,line:25},endBody:{col:79,line:25}},disabled:{startLoc:{col:24,line:27},endLoc:{col:80,line:27},startBody:{col:24,line:27},endBody:{col:80,line:27}},"selected-disabled":{startLoc:{col:32,line:29},endLoc:{col:96,line:29},startBody:{col:32,line:29},endBody:{col:96,line:29}},custom:{startLoc:{col:22,line:32},endLoc:{col:1,line:64},startBody:{col:22,line:32},endBody:{col:1,line:64}},"with-helper-text":{startLoc:{col:30,line:67},endLoc:{col:116,line:67},startBody:{col:30,line:67},endBody:{col:116,line:67}},playground:{startLoc:{col:26,line:69},endLoc:{col:1,line:117},startBody:{col:26,line:69},endBody:{col:1,line:117}}}},controls:{hideNoControlsWarning:!0},docs:{page:function page(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_1__.Dx,{children:"Props"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_1__.$4,{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_1__.fQ,{title:"Examples",includePrimary:!0})]})}}}};var Default=function Default(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_RadioButton__WEBPACK_IMPORTED_MODULE_3__.E,{id:"radio",label:"Label"})},Selected=function Selected(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_RadioButton__WEBPACK_IMPORTED_MODULE_3__.E,{id:"radio2",label:"Label",checked:!0})},Disabled=function Disabled(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_RadioButton__WEBPACK_IMPORTED_MODULE_3__.E,{id:"radio3",label:"Label",disabled:!0})},SelectedDisabled=function SelectedDisabled(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_RadioButton__WEBPACK_IMPORTED_MODULE_3__.E,{id:"radio4",label:"Label",checked:!0,disabled:!0})};SelectedDisabled.storyName="Selected & disabled";var Custom=function Custom(){var _useState=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(""),_useState2=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_4__.Z)(_useState,2),radioValue=_useState2[0],setRadioValue=_useState2[1],customStyles={"--size":"36px","--icon-scale":.65,"--border-width":"3px","--outline-width":"4px","--border-color-selected":"var(--color-success)","--border-color-selected-hover":"var(--color-success-dark)","--border-color-selected-focus":"var(--color-success)","--icon-color-selected":"var(--color-success)","--icon-color-hover":"var(--color-success-dark)","--focus-outline-color":"var(--color-black-20)"};return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.Fragment,{children:["foo","bar"].map((function(option){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_RadioButton__WEBPACK_IMPORTED_MODULE_3__.E,{id:"radio-".concat(option),value:option,label:"Label",style:customStyles,checked:radioValue===option,onChange:function onChange(event){return setRadioValue(event.target.value)}},"radio-".concat(option))}))})};Custom.storyName="With custom styles";var WithHelperText=function WithHelperText(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_RadioButton__WEBPACK_IMPORTED_MODULE_3__.E,{id:"radio-with-helper",label:"Label",helperText:"Assistive text"})},Playground=function Playground(args){var _useState3=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(""),_useState4=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_4__.Z)(_useState3,2),radioValue=_useState4[0],setRadioValue=_useState4[1],styles={"--size":"".concat(args.size,"px"),"--icon-scale":args.iconScale,"--border-width":"".concat(args.borderWidth,"px"),"--outline-width":"".concat(args.outlineWidth,"px"),"--label-font-size":"".concat(args.labelFontSize,"px"),"--label-padding":"".concat(args.labelPadding,"px"),"--background":args.background,"--background-hover":args.backgroundHover,"--background-focus":args.backgroundFocus,"--background-unselected-disabled":args.backgroundUnselectedDisabled,"--background-selected-disabled":args.backgroundSelectedDisabled,"--border-color-focus":args.borderColorFocus,"--border-color-selected":args.borderColorSelected,"--border-color-selected-hover":args.borderColorSelectedHover,"--border-color-selected-disabled":args.borderColorSelectedDisabled,"--border-color-unselected":args.borderColorUnselected,"--border-color-unselected-hover":args.borderColorUnselectedHover,"--border-color-unselected-disabled":args.borderColorUnselectedDisabled,"--focus-outline-color":args.focusOutlineColor,"--icon-color-unselected":args.iconColorUnselected,"--icon-color-selected":args.iconColorSelected,"--icon-color-disabled":args.iconColorDisabled,"--label-color":args.labelColorDefault,"--label-color-disabled":args.labelColorDisabled};return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.Fragment,{children:[["foo","bar","baz"].map((function(option){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_RadioButton__WEBPACK_IMPORTED_MODULE_3__.E,{id:"radio-".concat(option),value:option,label:"Label",style:styles,checked:radioValue===option,onChange:function onChange(event){return setRadioValue(event.target.value)}},"radio-".concat(option))})),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_RadioButton__WEBPACK_IMPORTED_MODULE_3__.E,{id:"radio4",label:"Label",style:styles,disabled:!0}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_RadioButton__WEBPACK_IMPORTED_MODULE_3__.E,{id:"radio5",label:"Label",style:styles,disabled:!0,checked:!0})]})};Playground.parameters={previewTabs:{"storybook/docs/panel":{hidden:!0}},docs:{disable:!0}},Playground.args={size:24,iconScale:.5,borderWidth:2,outlineWidth:3,labelFontSize:16,labelPadding:8,background:"#ffffff",backgroundHover:"#ffffff",backgroundFocus:"#ffffff",backgroundUnselectedDisabled:"#e5e5e5",backgroundSelectedDisabled:"#ffffff",borderColorFocus:"#1a1a1a",borderColorSelected:"#0000bf",borderColorSelectedHover:"#000098",borderColorSelectedDisabled:"#cccccc",borderColorUnselected:"#808080",borderColorUnselectedHover:"#1a1a1a",borderColorUnselectedDisabled:"#e5e5e5",focusOutlineColor:"#0072c6",iconColorUnselected:"rgba(0, 0, 0, 0)",iconColorSelected:"#0000bf",iconColorDisabled:"#e5e5e5",labelColorDefault:"#1a1a1a",labelColorDisabled:"#999898"},Playground.argTypes={size:{control:{type:"range",min:10,max:100,step:1}},iconScale:{control:{type:"range",min:.1,max:.9,step:.05}},borderWidth:{control:{type:"range",min:1,max:10,step:1}},outlineWidth:{control:{type:"range",min:1,max:10,step:1}},labelFontSize:{control:{type:"range",min:12,max:32,step:1}},labelPadding:{control:{type:"range",min:4,max:32,step:2}},background:{control:{type:"color"}},backgroundHover:{control:{type:"color"}},backgroundFocus:{control:{type:"color"}},backgroundUnselectedDisabled:{control:{type:"color"}},backgroundSelectedDisabled:{control:{type:"color"}},borderColorFocus:{control:{type:"color"}},borderColorSelected:{control:{type:"color"}},borderColorSelectedHover:{control:{type:"color"}},borderColorSelectedDisabled:{control:{type:"color"}},borderColorUnselected:{control:{type:"color"}},borderColorUnselectedHover:{control:{type:"color"}},borderColorUnselectedDisabled:{control:{type:"color"}},focusOutlineColor:{control:{type:"color"}},iconColorUnselected:{control:{type:"color"}},iconColorSelected:{control:{type:"color"}},iconColorDisabled:{control:{type:"color"}},labelColorDefault:{control:{type:"color"}},labelColorDisabled:{control:{type:"color"}}},Default.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__.Z)({storySource:{source:'() => '}},Default.parameters),Selected.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__.Z)({storySource:{source:'() => '}},Selected.parameters),Disabled.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__.Z)({storySource:{source:'() => '}},Disabled.parameters),SelectedDisabled.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__.Z)({storySource:{source:'() => '}},SelectedDisabled.parameters),Custom.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__.Z)({storySource:{source:"() => {\n const [radioValue, setRadioValue] = useState('');\n const options = ['foo', 'bar'];\n\n const customStyles = {\n '--size': '36px',\n '--icon-scale': 0.65,\n '--border-width': '3px',\n '--outline-width': '4px',\n '--border-color-selected': 'var(--color-success)',\n '--border-color-selected-hover': 'var(--color-success-dark)',\n '--border-color-selected-focus': 'var(--color-success)',\n '--icon-color-selected': 'var(--color-success)',\n '--icon-color-hover': 'var(--color-success-dark)',\n '--focus-outline-color': 'var(--color-black-20)',\n } as React.CSSProperties;\n\n return (\n <>\n {options.map((option) => (\n setRadioValue((event.target as HTMLInputElement).value)}\n />\n ))}\n \n );\n}"}},Custom.parameters),WithHelperText.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__.Z)({storySource:{source:'() => '}},WithHelperText.parameters),Playground.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__.Z)({storySource:{source:"(args) => {\n const [radioValue, setRadioValue] = useState('');\n const options = ['foo', 'bar', 'baz'];\n\n const styles = {\n '--size': `${args.size}px`,\n '--icon-scale': args.iconScale,\n '--border-width': `${args.borderWidth}px`,\n '--outline-width': `${args.outlineWidth}px`,\n '--label-font-size': `${args.labelFontSize}px`,\n '--label-padding': `${args.labelPadding}px`,\n '--background': args.background,\n '--background-hover': args.backgroundHover,\n '--background-focus': args.backgroundFocus,\n '--background-unselected-disabled': args.backgroundUnselectedDisabled,\n '--background-selected-disabled': args.backgroundSelectedDisabled,\n '--border-color-focus': args.borderColorFocus,\n '--border-color-selected': args.borderColorSelected,\n '--border-color-selected-hover': args.borderColorSelectedHover,\n '--border-color-selected-disabled': args.borderColorSelectedDisabled,\n '--border-color-unselected': args.borderColorUnselected,\n '--border-color-unselected-hover': args.borderColorUnselectedHover,\n '--border-color-unselected-disabled': args.borderColorUnselectedDisabled,\n '--focus-outline-color': args.focusOutlineColor,\n '--icon-color-unselected': args.iconColorUnselected,\n '--icon-color-selected': args.iconColorSelected,\n '--icon-color-disabled': args.iconColorDisabled,\n '--label-color': args.labelColorDefault,\n '--label-color-disabled': args.labelColorDisabled,\n } as React.CSSProperties;\n\n return (\n <>\n {options.map((option) => (\n setRadioValue((event.target as HTMLInputElement).value)}\n />\n ))}\n \n \n \n );\n}"}},Playground.parameters);try{Playground.displayName="Playground",Playground.__docgenInfo={description:"",displayName:"Playground",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/radioButton/RadioButton.stories.tsx#Playground"]={docgenInfo:Playground.__docgenInfo,name:"Playground",path:"src/components/radioButton/RadioButton.stories.tsx#Playground"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/searchInput/SearchInput.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,WithCustomSearchButton:()=>WithCustomSearchButton,WithDefaultValue:()=>WithDefaultValue,WithSuggestions:()=>WithSuggestions,WithSuggestionsAndHighlighting:()=>WithSuggestionsAndHighlighting,WithSuggestionsSpinner:()=>WithSuggestionsSpinner,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_regeneratorRuntime_js__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/regeneratorRuntime.js"),_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js"),_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/react/index.js"),_SearchInput__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/components/searchInput/SearchInput.tsx"),_button__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/components/button/Button.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/react/jsx-runtime.js");const __WEBPACK_DEFAULT_EXPORT__={component:_SearchInput__WEBPACK_IMPORTED_MODULE_2__.M,title:"Components/SearchInput",decorators:[function(storyFn){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div",{style:{maxWidth:"420px"},children:storyFn()})}],parameters:{storySource:{source:"\n\nimport React, { useRef, useState } from 'react';\n\nimport { SearchInput } from './SearchInput';\nimport { Button } from '../button';\n\nexport default {\n component: SearchInput,\n title: 'Components/SearchInput',\n decorators: [(storyFn) =>
{storyFn()}
],\n parameters: {\n controls: { expanded: true },\n },\n};\n\nconst fruits = [\n 'Apple',\n 'Apricot',\n 'Avocado',\n 'Banana',\n 'Blackberry',\n 'Blueberry',\n 'Cherry',\n 'Coconut',\n 'Cranberry',\n 'Date',\n 'Dragonfruit',\n 'Fig',\n 'Gooseberry',\n 'Grape',\n 'Honeyberry',\n 'Jackfruit',\n 'Kiwifruit',\n 'Lemon',\n 'Lime',\n 'Mango',\n 'Melon',\n 'Nectarine',\n 'Orange',\n 'Papaya',\n 'Passionfruit',\n 'Peach',\n 'Pear',\n 'Pineapple',\n 'Raspberry',\n 'Satsuma',\n 'Start fruit',\n 'Strawberry',\n 'Tangelo',\n 'Tomato',\n].map((fruit) => ({ value: fruit }));\n\nconst asynchronousSearchOperation = (inputValue: string, timeout = 0) => {\n return new Promise>((resolve) => {\n const filteredItems = fruits.filter((fruit) => {\n return fruit.value.toLowerCase().indexOf(inputValue.toLowerCase()) > -1;\n });\n setTimeout(() => {\n resolve(filteredItems);\n }, timeout);\n });\n};\n\nconst longLastingAsynchronousSearchOperation = (inputValue: string) => asynchronousSearchOperation(inputValue, 5000);\n\nexport const Default = (args) => {\n const onSubmit = (value: string) => {\n console.log('Search for:', value);\n };\n return ;\n};\nDefault.args = {\n label: 'Search',\n helperText: 'Assistive text',\n placeholder: 'Placeholder',\n};\n\nexport const WithCustomSearchButton = (args) => {\n const currentValue = useRef('');\n\n const onChange = (value: string) => {\n console.log('Input value changed:', value);\n currentValue.current = value;\n };\n\n const onSubmit = (string) => {\n console.log('Search for:', string);\n };\n\n const doSearch = () => {\n if (currentValue.current) console.log('Search:', currentValue.current);\n };\n\n return (\n
\n \n \n \n
\n );\n};\n\nexport const WithSuggestions = (args) => {\n type SuggestionItemType = {\n value: string;\n };\n\n const getSuggestions = async (inputValue: string): Promise => {\n const suggestions = await asynchronousSearchOperation(inputValue);\n return suggestions;\n };\n\n const onSubmit = (value: string) => {\n console.log('Submitted value:', value);\n };\n\n return (\n \n {...args}\n suggestionLabelField=\"value\"\n getSuggestions={getSuggestions}\n onSubmit={onSubmit}\n />\n );\n};\nWithSuggestions.storyName = 'With suggestions';\nWithSuggestions.args = {\n label: 'Search for a fruit',\n helperText: 'Assistive text',\n placeholder: 'Placeholder',\n};\n\nexport const WithSuggestionsAndHighlighting = (args) => {\n type SuggestionItemType = {\n value: string;\n };\n\n const getSuggestions = async (inputValue: string): Promise => {\n const suggestions = await asynchronousSearchOperation(inputValue);\n return suggestions;\n };\n\n const onSubmit = (value: string) => {\n console.log('Submitted value:', value);\n };\n\n return (\n \n {...args}\n suggestionLabelField=\"value\"\n getSuggestions={getSuggestions}\n onSubmit={onSubmit}\n />\n );\n};\nWithSuggestionsAndHighlighting.storyName = 'With suggestions and highlighting';\nWithSuggestionsAndHighlighting.args = {\n label: 'Search for a fruit',\n helperText: 'Assistive text',\n highlightSuggestions: true,\n placeholder: 'Placeholder',\n};\n\nexport const WithSuggestionsSpinner = (args) => {\n type SuggestionItemType = {\n value: string;\n };\n\n const getSuggestions = async (inputValue: string): Promise => {\n const suggestions = await longLastingAsynchronousSearchOperation(inputValue);\n return suggestions;\n };\n\n const onChange = (value: string) => {\n console.log('input value changed:', value);\n };\n\n const onSubmit = (value: string) => {\n console.log('Submitted value:', value);\n };\n\n return (\n \n {...args}\n suggestionLabelField=\"value\"\n getSuggestions={getSuggestions}\n onSubmit={onSubmit}\n onChange={onChange}\n />\n );\n};\nWithSuggestionsSpinner.storyName = 'With suggestions & spinner';\nWithSuggestionsSpinner.args = {\n label: 'Search for a fruit',\n helperText: 'Assistive text',\n placeholder: 'Placeholder',\n};\n\nexport const WithDefaultValue = (args) => {\n type SuggestionItemType = {\n value: string;\n };\n const [searchValue, setSearchValue] = useState(args.value);\n\n const getSuggestions = async (inputValue: string): Promise => {\n const suggestions = await asynchronousSearchOperation(inputValue);\n return suggestions;\n };\n\n const onSubmit = (value: string) => {\n console.log('Submitted value:', value);\n };\n\n const onChange = (value: string) => {\n console.log('Changed value: ', value);\n setSearchValue(value);\n };\n\n return (\n \n {...args}\n suggestionLabelField=\"value\"\n getSuggestions={getSuggestions}\n onSubmit={onSubmit}\n value={searchValue}\n onChange={onChange}\n />\n );\n};\nWithDefaultValue.storyName = 'With default value';\nWithDefaultValue.args = {\n label: 'Search for a fruit',\n helperText: 'Assistive text',\n placeholder: 'Placeholder',\n value: 'Banana',\n};\n",locationsMap:{default:{startLoc:{col:23,line:67},endLoc:{col:1,line:72},startBody:{col:23,line:67},endBody:{col:1,line:72}},"with-custom-search-button":{startLoc:{col:38,line:79},endLoc:{col:1,line:131},startBody:{col:38,line:79},endBody:{col:1,line:131}},"with-suggestions":{startLoc:{col:31,line:133},endLoc:{col:1,line:155},startBody:{col:31,line:133},endBody:{col:1,line:155}},"with-suggestions-and-highlighting":{startLoc:{col:46,line:163},endLoc:{col:1,line:185},startBody:{col:46,line:163},endBody:{col:1,line:185}},"with-suggestions-spinner":{startLoc:{col:38,line:194},endLoc:{col:1,line:221},startBody:{col:38,line:194},endBody:{col:1,line:221}},"with-default-value":{startLoc:{col:32,line:229},endLoc:{col:1,line:259},startBody:{col:32,line:229},endBody:{col:1,line:259}}}},controls:{expanded:!0}}};var fruits=["Apple","Apricot","Avocado","Banana","Blackberry","Blueberry","Cherry","Coconut","Cranberry","Date","Dragonfruit","Fig","Gooseberry","Grape","Honeyberry","Jackfruit","Kiwifruit","Lemon","Lime","Mango","Melon","Nectarine","Orange","Papaya","Passionfruit","Peach","Pear","Pineapple","Raspberry","Satsuma","Start fruit","Strawberry","Tangelo","Tomato"].map((function(fruit){return{value:fruit}})),asynchronousSearchOperation=function asynchronousSearchOperation(inputValue){var timeout=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;return new Promise((function(resolve){var filteredItems=fruits.filter((function(fruit){return fruit.value.toLowerCase().indexOf(inputValue.toLowerCase())>-1}));setTimeout((function(){resolve(filteredItems)}),timeout)}))},longLastingAsynchronousSearchOperation=function longLastingAsynchronousSearchOperation(inputValue){return asynchronousSearchOperation(inputValue,5e3)},Default=function Default(args){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_SearchInput__WEBPACK_IMPORTED_MODULE_2__.M,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},args),{},{onSubmit:function onSubmit(value){console.log("Search for:",value)}}))};Default.args={label:"Search",helperText:"Assistive text",placeholder:"Placeholder"};var WithCustomSearchButton=function WithCustomSearchButton(args){var currentValue=(0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)("");return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)("div",{style:{display:"flex",flexWrap:"wrap"},children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("style",{children:"\n .search-button {\n margin-left: 10px;\n }\n\n @media only screen and (max-width: ".concat(getComputedStyle(document.documentElement).getPropertyValue("--breakpoint-m"),") {\n .search-input,\n .search-button {\n width: 100%;\n }\n\n .search-button {\n margin-left: 0;\n margin-top: 10px;\n }\n }\n ")}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_SearchInput__WEBPACK_IMPORTED_MODULE_2__.M,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({className:"search-input"},args),{},{hideSearchButton:!0,onSubmit:function onSubmit(string){console.log("Search for:",string)},onChange:function onChange(value){console.log("Input value changed:",value),currentValue.current=value},placeholder:"Placeholder"})),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_button__WEBPACK_IMPORTED_MODULE_4__.z,{className:"search-button",onClick:function doSearch(){currentValue.current&&console.log("Search:",currentValue.current)},children:"Search"})]})},WithSuggestions=function WithSuggestions(args){var getSuggestions=function(){var _ref=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_5__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_regeneratorRuntime_js__WEBPACK_IMPORTED_MODULE_6__.Z)().mark((function _callee(inputValue){var suggestions;return(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_regeneratorRuntime_js__WEBPACK_IMPORTED_MODULE_6__.Z)().wrap((function _callee$(_context){for(;;)switch(_context.prev=_context.next){case 0:return _context.next=2,asynchronousSearchOperation(inputValue);case 2:return suggestions=_context.sent,_context.abrupt("return",suggestions);case 4:case"end":return _context.stop()}}),_callee)})));return function getSuggestions(_x){return _ref.apply(this,arguments)}}();return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_SearchInput__WEBPACK_IMPORTED_MODULE_2__.M,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},args),{},{suggestionLabelField:"value",getSuggestions,onSubmit:function onSubmit(value){console.log("Submitted value:",value)}}))};WithSuggestions.storyName="With suggestions",WithSuggestions.args={label:"Search for a fruit",helperText:"Assistive text",placeholder:"Placeholder"};var WithSuggestionsAndHighlighting=function WithSuggestionsAndHighlighting(args){var getSuggestions=function(){var _ref2=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_5__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_regeneratorRuntime_js__WEBPACK_IMPORTED_MODULE_6__.Z)().mark((function _callee2(inputValue){var suggestions;return(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_regeneratorRuntime_js__WEBPACK_IMPORTED_MODULE_6__.Z)().wrap((function _callee2$(_context2){for(;;)switch(_context2.prev=_context2.next){case 0:return _context2.next=2,asynchronousSearchOperation(inputValue);case 2:return suggestions=_context2.sent,_context2.abrupt("return",suggestions);case 4:case"end":return _context2.stop()}}),_callee2)})));return function getSuggestions(_x2){return _ref2.apply(this,arguments)}}();return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_SearchInput__WEBPACK_IMPORTED_MODULE_2__.M,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},args),{},{suggestionLabelField:"value",getSuggestions,onSubmit:function onSubmit(value){console.log("Submitted value:",value)}}))};WithSuggestionsAndHighlighting.storyName="With suggestions and highlighting",WithSuggestionsAndHighlighting.args={label:"Search for a fruit",helperText:"Assistive text",highlightSuggestions:!0,placeholder:"Placeholder"};var WithSuggestionsSpinner=function WithSuggestionsSpinner(args){var getSuggestions=function(){var _ref3=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_5__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_regeneratorRuntime_js__WEBPACK_IMPORTED_MODULE_6__.Z)().mark((function _callee3(inputValue){var suggestions;return(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_regeneratorRuntime_js__WEBPACK_IMPORTED_MODULE_6__.Z)().wrap((function _callee3$(_context3){for(;;)switch(_context3.prev=_context3.next){case 0:return _context3.next=2,longLastingAsynchronousSearchOperation(inputValue);case 2:return suggestions=_context3.sent,_context3.abrupt("return",suggestions);case 4:case"end":return _context3.stop()}}),_callee3)})));return function getSuggestions(_x3){return _ref3.apply(this,arguments)}}();return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_SearchInput__WEBPACK_IMPORTED_MODULE_2__.M,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},args),{},{suggestionLabelField:"value",getSuggestions,onSubmit:function onSubmit(value){console.log("Submitted value:",value)},onChange:function onChange(value){console.log("input value changed:",value)}}))};WithSuggestionsSpinner.storyName="With suggestions & spinner",WithSuggestionsSpinner.args={label:"Search for a fruit",helperText:"Assistive text",placeholder:"Placeholder"};var WithDefaultValue=function WithDefaultValue(args){var _useState=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(args.value),_useState2=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_7__.Z)(_useState,2),searchValue=_useState2[0],setSearchValue=_useState2[1],getSuggestions=function(){var _ref4=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_5__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_regeneratorRuntime_js__WEBPACK_IMPORTED_MODULE_6__.Z)().mark((function _callee4(inputValue){var suggestions;return(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_regeneratorRuntime_js__WEBPACK_IMPORTED_MODULE_6__.Z)().wrap((function _callee4$(_context4){for(;;)switch(_context4.prev=_context4.next){case 0:return _context4.next=2,asynchronousSearchOperation(inputValue);case 2:return suggestions=_context4.sent,_context4.abrupt("return",suggestions);case 4:case"end":return _context4.stop()}}),_callee4)})));return function getSuggestions(_x4){return _ref4.apply(this,arguments)}}();return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_SearchInput__WEBPACK_IMPORTED_MODULE_2__.M,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({},args),{},{suggestionLabelField:"value",getSuggestions,onSubmit:function onSubmit(value){console.log("Submitted value:",value)},value:searchValue,onChange:function onChange(value){console.log("Changed value: ",value),setSearchValue(value)}}))};WithDefaultValue.storyName="With default value",WithDefaultValue.args={label:"Search for a fruit",helperText:"Assistive text",placeholder:"Placeholder",value:"Banana"},Default.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:"(args) => {\n const onSubmit = (value: string) => {\n console.log('Search for:', value);\n };\n return ;\n}"}},Default.parameters),WithCustomSearchButton.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:"(args) => {\n const currentValue = useRef('');\n\n const onChange = (value: string) => {\n console.log('Input value changed:', value);\n currentValue.current = value;\n };\n\n const onSubmit = (string) => {\n console.log('Search for:', string);\n };\n\n const doSearch = () => {\n if (currentValue.current) console.log('Search:', currentValue.current);\n };\n\n return (\n
\n \n \n \n
\n );\n}"}},WithCustomSearchButton.parameters),WithSuggestions.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:"(args) => {\n type SuggestionItemType = {\n value: string;\n };\n\n const getSuggestions = async (inputValue: string): Promise => {\n const suggestions = await asynchronousSearchOperation(inputValue);\n return suggestions;\n };\n\n const onSubmit = (value: string) => {\n console.log('Submitted value:', value);\n };\n\n return (\n \n {...args}\n suggestionLabelField=\"value\"\n getSuggestions={getSuggestions}\n onSubmit={onSubmit}\n />\n );\n}"}},WithSuggestions.parameters),WithSuggestionsAndHighlighting.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:"(args) => {\n type SuggestionItemType = {\n value: string;\n };\n\n const getSuggestions = async (inputValue: string): Promise => {\n const suggestions = await asynchronousSearchOperation(inputValue);\n return suggestions;\n };\n\n const onSubmit = (value: string) => {\n console.log('Submitted value:', value);\n };\n\n return (\n \n {...args}\n suggestionLabelField=\"value\"\n getSuggestions={getSuggestions}\n onSubmit={onSubmit}\n />\n );\n}"}},WithSuggestionsAndHighlighting.parameters),WithSuggestionsSpinner.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:"(args) => {\n type SuggestionItemType = {\n value: string;\n };\n\n const getSuggestions = async (inputValue: string): Promise => {\n const suggestions = await longLastingAsynchronousSearchOperation(inputValue);\n return suggestions;\n };\n\n const onChange = (value: string) => {\n console.log('input value changed:', value);\n };\n\n const onSubmit = (value: string) => {\n console.log('Submitted value:', value);\n };\n\n return (\n \n {...args}\n suggestionLabelField=\"value\"\n getSuggestions={getSuggestions}\n onSubmit={onSubmit}\n onChange={onChange}\n />\n );\n}"}},WithSuggestionsSpinner.parameters),WithDefaultValue.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_3__.Z)({storySource:{source:"(args) => {\n type SuggestionItemType = {\n value: string;\n };\n const [searchValue, setSearchValue] = useState(args.value);\n\n const getSuggestions = async (inputValue: string): Promise => {\n const suggestions = await asynchronousSearchOperation(inputValue);\n return suggestions;\n };\n\n const onSubmit = (value: string) => {\n console.log('Submitted value:', value);\n };\n\n const onChange = (value: string) => {\n console.log('Changed value: ', value);\n setSearchValue(value);\n };\n\n return (\n \n {...args}\n suggestionLabelField=\"value\"\n getSuggestions={getSuggestions}\n onSubmit={onSubmit}\n value={searchValue}\n onChange={onChange}\n />\n );\n}"}},WithDefaultValue.parameters);try{Default.displayName="Default",Default.__docgenInfo={description:"",displayName:"Default",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/searchInput/SearchInput.stories.tsx#Default"]={docgenInfo:Default.__docgenInfo,name:"Default",path:"src/components/searchInput/SearchInput.stories.tsx#Default"})}catch(__react_docgen_typescript_loader_error){}try{WithCustomSearchButton.displayName="WithCustomSearchButton",WithCustomSearchButton.__docgenInfo={description:"",displayName:"WithCustomSearchButton",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/searchInput/SearchInput.stories.tsx#WithCustomSearchButton"]={docgenInfo:WithCustomSearchButton.__docgenInfo,name:"WithCustomSearchButton",path:"src/components/searchInput/SearchInput.stories.tsx#WithCustomSearchButton"})}catch(__react_docgen_typescript_loader_error){}try{WithSuggestions.displayName="WithSuggestions",WithSuggestions.__docgenInfo={description:"",displayName:"WithSuggestions",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/searchInput/SearchInput.stories.tsx#WithSuggestions"]={docgenInfo:WithSuggestions.__docgenInfo,name:"WithSuggestions",path:"src/components/searchInput/SearchInput.stories.tsx#WithSuggestions"})}catch(__react_docgen_typescript_loader_error){}try{WithSuggestionsAndHighlighting.displayName="WithSuggestionsAndHighlighting",WithSuggestionsAndHighlighting.__docgenInfo={description:"",displayName:"WithSuggestionsAndHighlighting",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/searchInput/SearchInput.stories.tsx#WithSuggestionsAndHighlighting"]={docgenInfo:WithSuggestionsAndHighlighting.__docgenInfo,name:"WithSuggestionsAndHighlighting",path:"src/components/searchInput/SearchInput.stories.tsx#WithSuggestionsAndHighlighting"})}catch(__react_docgen_typescript_loader_error){}try{WithSuggestionsSpinner.displayName="WithSuggestionsSpinner",WithSuggestionsSpinner.__docgenInfo={description:"",displayName:"WithSuggestionsSpinner",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/searchInput/SearchInput.stories.tsx#WithSuggestionsSpinner"]={docgenInfo:WithSuggestionsSpinner.__docgenInfo,name:"WithSuggestionsSpinner",path:"src/components/searchInput/SearchInput.stories.tsx#WithSuggestionsSpinner"})}catch(__react_docgen_typescript_loader_error){}try{WithDefaultValue.displayName="WithDefaultValue",WithDefaultValue.__docgenInfo={description:"",displayName:"WithDefaultValue",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/searchInput/SearchInput.stories.tsx#WithDefaultValue"]={docgenInfo:WithDefaultValue.__docgenInfo,name:"WithDefaultValue",path:"src/components/searchInput/SearchInput.stories.tsx#WithDefaultValue"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/section/Section.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Multiple:()=>Multiple,Plain:()=>Plain,Playground:()=>Playground,Primary:()=>Primary,Secondary:()=>Secondary,Tertiary:()=>Tertiary,WithKoros:()=>WithKoros,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_1__=(__webpack_require__("../../node_modules/react/index.js"),__webpack_require__("./node_modules/@storybook/addon-docs/blocks.js")),_Section__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/components/section/Section.tsx"),_assets_img_placeholder_1920x1080_jpg__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/assets/img/placeholder_1920x1080.jpg"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/react/jsx-runtime.js"),placeholderText="Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.",placeholderImg=(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("img",{src:_assets_img_placeholder_1920x1080_jpg__WEBPACK_IMPORTED_MODULE_3__,alt:"",style:{display:"block",width:"100%"}});const __WEBPACK_DEFAULT_EXPORT__={component:_Section__WEBPACK_IMPORTED_MODULE_4__.$,title:"Components/Section",parameters:{storySource:{source:'import React from \'react\';\nimport { ArgsTable, Title } from \'@storybook/addon-docs/blocks\';\n\nimport { Section } from \'./Section\';\nimport imageFile from \'../../assets/img/placeholder_1920x1080.jpg\';\n\nconst placeholderTitle = \'Lorem ipsum\';\nconst placeholderText =\n \'Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.\';\nconst placeholderImg = ;\n\nexport default {\n component: Section,\n title: \'Components/Section\',\n parameters: {\n controls: { hideNoControlsWarning: true },\n layout: \'fullscreen\',\n docs: {\n page: () => (\n <>\n Props\n \n \n ),\n },\n },\n};\n\nexport const Plain = () => (\n
\n

{placeholderTitle}

\n {placeholderText}\n
\n);\n\nexport const Primary = () => (\n
\n

{placeholderTitle}

\n {placeholderText}\n
\n);\n\nexport const Secondary = () => (\n
\n

{placeholderTitle}

\n {placeholderText}\n
\n);\n\nexport const Tertiary = () => (\n
\n

{placeholderTitle}

\n {placeholderText}\n
\n);\n\nexport const WithKoros = () => (\n
\n

{placeholderTitle}

\n {placeholderText}\n
\n);\nWithKoros.storyName = \'With koros\';\n\nexport const Multiple = () => (\n <>\n
\n

{placeholderTitle}

\n {placeholderText}\n
\n {placeholderImg}\n
\n

No Koros

\n This section does not have any koros.\n
\n
\n

Pulse

\n {placeholderText}\n
\n
Secondary non-koros section
\n
\n

secondary Beat

\n {placeholderText}\n
\n
\n
\n

Vibration

\n {placeholderText}\n
\n
\n
\n

primary Beat

\n {placeholderText}\n
\n
\n
\n

Wave

\n {placeholderText}\n
\n
This section has neither a heading or a koros.
\n \n);\nMultiple.storyName = \'Multiple sections\';\n\nexport const Playground = (args) => (\n
\n

{args.sectionTitle}

\n {args.sectionText}\n
\n);\n\nPlayground.parameters = {\n previewTabs: {\n \'storybook/docs/panel\': {\n hidden: true,\n },\n },\n docs: {\n disable: true,\n },\n};\n\nPlayground.args = {\n sectionTitle: placeholderTitle,\n sectionText: placeholderText,\n korosType: null,\n color: \'plain\',\n};\n\nPlayground.argTypes = {\n korosType: {\n options: [null, \'basic\', \'beat\', \'pulse\', \'vibration\', \'wave\'],\n control: { type: \'radio\' },\n },\n color: {\n options: [\'plain\', \'primary\', \'secondary\', \'tertiary\'],\n },\n};\n',locationsMap:{plain:{startLoc:{col:21,line:29},endLoc:{col:1,line:34},startBody:{col:21,line:29},endBody:{col:1,line:34}},primary:{startLoc:{col:23,line:36},endLoc:{col:1,line:41},startBody:{col:23,line:36},endBody:{col:1,line:41}},secondary:{startLoc:{col:25,line:43},endLoc:{col:1,line:48},startBody:{col:25,line:43},endBody:{col:1,line:48}},tertiary:{startLoc:{col:24,line:50},endLoc:{col:1,line:55},startBody:{col:24,line:50},endBody:{col:1,line:55}},"with-koros":{startLoc:{col:25,line:57},endLoc:{col:1,line:62},startBody:{col:25,line:57},endBody:{col:1,line:62}},multiple:{startLoc:{col:24,line:65},endLoc:{col:1,line:102},startBody:{col:24,line:65},endBody:{col:1,line:102}},playground:{startLoc:{col:26,line:105},endLoc:{col:1,line:110},startBody:{col:26,line:105},endBody:{col:1,line:110}}}},controls:{hideNoControlsWarning:!0},layout:"fullscreen",docs:{page:function page(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_1__.Dx,{children:"Props"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_1__.$4,{})]})}}}};var Plain=function Plain(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_Section__WEBPACK_IMPORTED_MODULE_4__.$,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("h1",{className:"heading-xl",children:"Lorem ipsum"}),placeholderText]})},Primary=function Primary(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_Section__WEBPACK_IMPORTED_MODULE_4__.$,{color:"primary",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("h1",{className:"heading-xl",children:"Lorem ipsum"}),placeholderText]})},Secondary=function Secondary(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_Section__WEBPACK_IMPORTED_MODULE_4__.$,{color:"secondary",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("h1",{className:"heading-xl",children:"Lorem ipsum"}),placeholderText]})},Tertiary=function Tertiary(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_Section__WEBPACK_IMPORTED_MODULE_4__.$,{color:"tertiary",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("h1",{className:"heading-xl",children:"Lorem ipsum"}),placeholderText]})},WithKoros=function WithKoros(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_Section__WEBPACK_IMPORTED_MODULE_4__.$,{color:"primary",korosType:"basic",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("h1",{className:"heading-xl",children:"Lorem ipsum"}),placeholderText]})};WithKoros.storyName="With koros";var Multiple=function Multiple(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_Section__WEBPACK_IMPORTED_MODULE_4__.$,{color:"secondary",korosType:"basic",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("h1",{className:"heading-xl",children:"Lorem ipsum"}),placeholderText]}),placeholderImg,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_Section__WEBPACK_IMPORTED_MODULE_4__.$,{color:"primary",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("h2",{className:"heading-l",children:"No Koros"}),"This section does not have any koros."]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_Section__WEBPACK_IMPORTED_MODULE_4__.$,{korosType:"pulse",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("h2",{className:"heading-l",children:"Pulse"}),placeholderText]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Section__WEBPACK_IMPORTED_MODULE_4__.$,{color:"secondary",children:"Secondary non-koros section"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_Section__WEBPACK_IMPORTED_MODULE_4__.$,{color:"tertiary",korosType:"beat",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("h2",{className:"heading-l",children:"secondary Beat"}),placeholderText]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Section__WEBPACK_IMPORTED_MODULE_4__.$,{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_Section__WEBPACK_IMPORTED_MODULE_4__.$,{color:"secondary",korosType:"vibration",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("h2",{className:"heading-l",children:"Vibration"}),placeholderText]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Section__WEBPACK_IMPORTED_MODULE_4__.$,{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_Section__WEBPACK_IMPORTED_MODULE_4__.$,{color:"primary",korosType:"beat",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("h2",{className:"heading-l",children:"primary Beat"}),placeholderText]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Section__WEBPACK_IMPORTED_MODULE_4__.$,{color:"tertiary"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_Section__WEBPACK_IMPORTED_MODULE_4__.$,{color:"secondary",korosType:"wave",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("h2",{className:"heading-l",children:"Wave"}),placeholderText]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Section__WEBPACK_IMPORTED_MODULE_4__.$,{children:"This section has neither a heading or a koros."})]})};Multiple.storyName="Multiple sections";var Playground=function Playground(args){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_Section__WEBPACK_IMPORTED_MODULE_4__.$,{color:args.color,korosType:args.korosType,children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("h1",{className:"heading-xl",children:args.sectionTitle}),args.sectionText]})};Playground.parameters={previewTabs:{"storybook/docs/panel":{hidden:!0}},docs:{disable:!0}},Playground.args={sectionTitle:"Lorem ipsum",sectionText:placeholderText,korosType:null,color:"plain"},Playground.argTypes={korosType:{options:[null,"basic","beat","pulse","vibration","wave"],control:{type:"radio"}},color:{options:["plain","primary","secondary","tertiary"]}},Plain.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__.Z)({storySource:{source:'() => (\n
\n

{placeholderTitle}

\n {placeholderText}\n
\n)'}},Plain.parameters),Primary.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__.Z)({storySource:{source:'() => (\n
\n

{placeholderTitle}

\n {placeholderText}\n
\n)'}},Primary.parameters),Secondary.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__.Z)({storySource:{source:'() => (\n
\n

{placeholderTitle}

\n {placeholderText}\n
\n)'}},Secondary.parameters),Tertiary.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__.Z)({storySource:{source:'() => (\n
\n

{placeholderTitle}

\n {placeholderText}\n
\n)'}},Tertiary.parameters),WithKoros.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__.Z)({storySource:{source:'() => (\n
\n

{placeholderTitle}

\n {placeholderText}\n
\n)'}},WithKoros.parameters),Multiple.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__.Z)({storySource:{source:'() => (\n <>\n
\n

{placeholderTitle}

\n {placeholderText}\n
\n {placeholderImg}\n
\n

No Koros

\n This section does not have any koros.\n
\n
\n

Pulse

\n {placeholderText}\n
\n
Secondary non-koros section
\n
\n

secondary Beat

\n {placeholderText}\n
\n
\n
\n

Vibration

\n {placeholderText}\n
\n
\n
\n

primary Beat

\n {placeholderText}\n
\n
\n
\n

Wave

\n {placeholderText}\n
\n
This section has neither a heading or a koros.
\n \n)'}},Multiple.parameters),Playground.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__.Z)({storySource:{source:'(args) => (\n
\n

{args.sectionTitle}

\n {args.sectionText}\n
\n)'}},Playground.parameters);try{Playground.displayName="Playground",Playground.__docgenInfo={description:"",displayName:"Playground",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/section/Section.stories.tsx#Playground"]={docgenInfo:Playground.__docgenInfo,name:"Playground",path:"src/components/section/Section.stories.tsx#Playground"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/selectionGroup/SelectionGroup.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,Horizontal:()=>Horizontal,Invalid:()=>Invalid,Required:()=>Required,WithHelperText:()=>WithHelperText,WithParent:()=>WithParent,WithTooltip:()=>WithTooltip,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_defineProperty_js__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/defineProperty.js"),_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_toConsumableArray_js__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/toConsumableArray.js"),react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/react/index.js"),_SelectionGroup__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/components/selectionGroup/SelectionGroup.tsx"),_checkbox__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/components/checkbox/Checkbox.tsx"),_radioButton__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./src/components/radioButton/RadioButton.tsx"),_fieldset__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__("./src/components/fieldset/Fieldset.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/react/jsx-runtime.js"),_excluded=["numberOfItems"],_excluded2=["numberOfItems"],_excluded3=["numberOfItems"],_excluded4=["numberOfItems"],_excluded5=["numberOfItems"],_excluded6=["numberOfItems"];const __WEBPACK_DEFAULT_EXPORT__={component:_SelectionGroup__WEBPACK_IMPORTED_MODULE_2__.M,title:"Components/SelectionGroup",decorators:[function(storyFn){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div",{style:{maxWidth:"400px"},children:storyFn()})}],parameters:{storySource:{source:"import React, { ChangeEvent, useReducer, useState } from 'react';\n\nimport { SelectionGroup } from './SelectionGroup';\nimport { Checkbox } from '../checkbox';\nimport { RadioButton } from '../radioButton';\nimport { Fieldset } from '../fieldset';\n\nexport default {\n component: SelectionGroup,\n title: 'Components/SelectionGroup',\n decorators: [(storyFn) =>
{storyFn()}
],\n parameters: {\n controls: { expanded: true, hideNoControlsWarning: true },\n },\n args: {\n numberOfItems: 3,\n label: 'Label',\n direction: 'vertical',\n },\n};\n\nconst getCheckboxItems = (\n numberOfItems: number,\n checked: { [key: string]: boolean },\n handleChange: (e: ChangeEvent) => void,\n) =>\n [...Array(numberOfItems)].map((_, i) => (\n \n ));\n\nconst getRadioButtonItems = (\n numberOfItems: number,\n radioValue: string,\n handleChange: (e: ChangeEvent) => void,\n) =>\n [...Array(numberOfItems)].map((_, i) => (\n \n ));\n\nexport const Default = ({ numberOfItems, ...args }) => {\n const [checkedItems, setCheckedItems] = useState({});\n const [radioValue, setRadioValue] = useState('radio0');\n const handleCheckboxChange = (e: ChangeEvent) => {\n const item = e.target.name;\n const isChecked = e.target.checked;\n setCheckedItems({ ...checkedItems, [item]: isChecked });\n };\n const handleRadioChange = (e: ChangeEvent) => {\n setRadioValue(e.target.value);\n };\n const checkboxes = getCheckboxItems(numberOfItems, checkedItems, handleCheckboxChange);\n const radiobuttons = getRadioButtonItems(numberOfItems, radioValue, handleRadioChange);\n return (\n <>\n {checkboxes}\n
\n
\n {radiobuttons}\n \n );\n};\n\nexport const Horizontal = ({ numberOfItems, ...args }) => {\n const [checkedItems, setCheckedItems] = useState({});\n const [radioValue, setRadioValue] = useState('radio0');\n const handleCheckboxChange = (e: ChangeEvent) => {\n const item = e.target.name;\n const isChecked = e.target.checked;\n setCheckedItems({ ...checkedItems, [item]: isChecked });\n };\n const handleRadioChange = (e: ChangeEvent) => {\n setRadioValue(e.target.value);\n };\n const checkboxes = getCheckboxItems(numberOfItems, checkedItems, handleCheckboxChange);\n const radiobuttons = getRadioButtonItems(numberOfItems, radioValue, handleRadioChange);\n return (\n <>\n {checkboxes}\n
\n
\n {radiobuttons}\n \n );\n};\nHorizontal.args = {\n direction: 'horizontal',\n};\n\nexport const Required = ({ numberOfItems, ...args }) => {\n const [checkedItems, setCheckedItems] = useState({});\n const [radioValue, setRadioValue] = useState('radio0');\n const handleCheckboxChange = (e: ChangeEvent) => {\n const item = e.target.name;\n const isChecked = e.target.checked;\n setCheckedItems({ ...checkedItems, [item]: isChecked });\n };\n const handleRadioChange = (e: ChangeEvent) => {\n setRadioValue(e.target.value);\n };\n const checkboxes = getCheckboxItems(numberOfItems, checkedItems, handleCheckboxChange);\n const radiobuttons = getRadioButtonItems(numberOfItems, radioValue, handleRadioChange);\n return (\n <>\n {checkboxes}\n
\n
\n {radiobuttons}\n \n );\n};\nRequired.args = {\n required: true,\n};\n\nexport const Invalid = ({ numberOfItems, ...args }) => {\n const [checkedItems, setCheckedItems] = useState({});\n const [radioValue, setRadioValue] = useState('radio0');\n const handleCheckboxChange = (e: ChangeEvent) => {\n const item = e.target.name;\n const isChecked = e.target.checked;\n setCheckedItems({ ...checkedItems, [item]: isChecked });\n };\n const handleRadioChange = (e: ChangeEvent) => {\n setRadioValue(e.target.value);\n };\n const checkboxes = getCheckboxItems(numberOfItems, checkedItems, handleCheckboxChange);\n const radiobuttons = getRadioButtonItems(numberOfItems, radioValue, handleRadioChange);\n return (\n <>\n {checkboxes}\n
\n
\n {radiobuttons}\n \n );\n};\nInvalid.args = {\n required: true,\n errorText: 'Error text',\n};\n\nexport const WithTooltip = ({ numberOfItems, ...args }) => {\n const [checkedItems, setCheckedItems] = useState({});\n const [radioValue, setRadioValue] = useState('radio0');\n const handleCheckboxChange = (e: ChangeEvent) => {\n const item = e.target.name;\n const isChecked = e.target.checked;\n setCheckedItems({ ...checkedItems, [item]: isChecked });\n };\n const handleRadioChange = (e: ChangeEvent) => {\n setRadioValue(e.target.value);\n };\n const checkboxes = getCheckboxItems(numberOfItems, checkedItems, handleCheckboxChange);\n const radiobuttons = getRadioButtonItems(numberOfItems, radioValue, handleRadioChange);\n return (\n <>\n {checkboxes}\n
\n
\n {radiobuttons}\n \n );\n};\nWithTooltip.args = {\n tooltipLabel: 'Tooltip',\n tooltipButtonLabel: 'Tooltip',\n tooltipText:\n 'Tooltips contain \"nice to have\" information. Default Tooltip contents should not be longer than two to three sentences. For longer descriptions, provide a link to a separate page.',\n};\nWithTooltip.storyName = 'With tooltip';\n\nexport const WithParent = () => {\n enum CheckboxState {\n checked,\n unchecked,\n indeterminate,\n }\n\n const areAllChecked = (state) => {\n let checkedCount = 0;\n Object.keys(state).forEach((key) => {\n if (key === 'controllerCheckbox') {\n return;\n }\n if (state[key] === CheckboxState.checked) {\n checkedCount += 1;\n }\n });\n\n return checkedCount === 4;\n };\n\n const areAllUnchecked = (state) => {\n let checkedCount = 0;\n Object.keys(state).forEach((key) => {\n if (key === 'controllerCheckbox') {\n return;\n }\n if (state[key] === CheckboxState.checked) {\n checkedCount += 1;\n }\n });\n\n return checkedCount === 1;\n };\n\n const reducer = (state, action) => {\n switch (action.type) {\n case 'check': {\n if (action.payload === 'controllerCheckbox') {\n return {\n controllerCheckbox: CheckboxState.checked,\n checkbox1: CheckboxState.checked,\n checkbox2: CheckboxState.checked,\n checkbox3: CheckboxState.checked,\n checkbox4: CheckboxState.checked,\n checkbox5: CheckboxState.checked,\n };\n }\n return {\n ...state,\n [action.payload]: CheckboxState.checked,\n controllerCheckbox: areAllChecked(state) ? CheckboxState.checked : CheckboxState.indeterminate,\n };\n }\n case 'uncheck': {\n if (action.payload === 'controllerCheckbox') {\n return {\n controllerCheckbox: CheckboxState.unchecked,\n checkbox1: CheckboxState.unchecked,\n checkbox2: CheckboxState.unchecked,\n checkbox3: CheckboxState.unchecked,\n checkbox4: CheckboxState.unchecked,\n checkbox5: CheckboxState.unchecked,\n };\n }\n return {\n ...state,\n [action.payload]: CheckboxState.unchecked,\n controllerCheckbox: areAllUnchecked(state) ? CheckboxState.unchecked : CheckboxState.indeterminate,\n };\n }\n default:\n throw new Error();\n }\n };\n\n const initialState = {\n controllerCheckbox: CheckboxState.unchecked,\n checkbox1: CheckboxState.unchecked,\n checkbox2: CheckboxState.unchecked,\n checkbox3: CheckboxState.unchecked,\n checkbox4: CheckboxState.unchecked,\n checkbox5: CheckboxState.unchecked,\n };\n\n const [state, dispatch] = useReducer(reducer, initialState);\n\n return (\n
\n {\n if (\n state.controllerCheckbox === CheckboxState.unchecked ||\n state.controllerCheckbox === CheckboxState.indeterminate\n ) {\n dispatch({ type: 'check', payload: 'controllerCheckbox' });\n } else {\n dispatch({ type: 'uncheck', payload: 'controllerCheckbox' });\n }\n }}\n />\n
    \n {Object.entries(state).map((entry) => {\n if (entry[0] === 'controllerCheckbox') {\n return null;\n }\n return (\n
  • \n {\n if (entry[1] === CheckboxState.unchecked) {\n dispatch({ type: 'check', payload: entry[0] });\n } else {\n dispatch({ type: 'uncheck', payload: entry[0] });\n }\n }}\n />\n
    • \n );\n })}\n
\n
\n );\n};\n\nWithParent.storyName = 'With a parent';\nWithParent.parameters = {\n loki: { skip: true }, // There is an identical story in checkbox\n};\nexport const WithHelperText = ({ numberOfItems, ...args }) => {\n const [checkedItems, setCheckedItems] = useState({});\n const [radioValue, setRadioValue] = useState('radio0');\n const handleCheckboxChange = (e: ChangeEvent) => {\n const item = e.target.name;\n const isChecked = e.target.checked;\n setCheckedItems({ ...checkedItems, [item]: isChecked });\n };\n const handleRadioChange = (e: ChangeEvent) => {\n setRadioValue(e.target.value);\n };\n const checkboxes = getCheckboxItems(numberOfItems, checkedItems, handleCheckboxChange);\n const radiobuttons = getRadioButtonItems(numberOfItems, radioValue, handleRadioChange);\n return (\n <>\n {checkboxes}\n
\n
\n {radiobuttons}\n \n );\n};\nWithHelperText.args = {\n helperText: 'Assistive text',\n};\n",locationsMap:{default:{startLoc:{col:23,line:55},endLoc:{col:1,line:76},startBody:{col:23,line:55},endBody:{col:1,line:76}},horizontal:{startLoc:{col:26,line:78},endLoc:{col:1,line:99},startBody:{col:26,line:78},endBody:{col:1,line:99}},required:{startLoc:{col:24,line:104},endLoc:{col:1,line:125},startBody:{col:24,line:104},endBody:{col:1,line:125}},invalid:{startLoc:{col:23,line:130},endLoc:{col:1,line:151},startBody:{col:23,line:130},endBody:{col:1,line:151}},"with-tooltip":{startLoc:{col:27,line:157},endLoc:{col:1,line:178},startBody:{col:27,line:157},endBody:{col:1,line:178}},"with-parent":{startLoc:{col:26,line:187},endLoc:{col:1,line:320},startBody:{col:26,line:187},endBody:{col:1,line:320}},"with-helper-text":{startLoc:{col:30,line:326},endLoc:{col:1,line:347},startBody:{col:30,line:326},endBody:{col:1,line:347}}}},controls:{expanded:!0,hideNoControlsWarning:!0}},args:{numberOfItems:3,label:"Label",direction:"vertical"}};var getCheckboxItems=function getCheckboxItems(numberOfItems,checked,handleChange){return(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_toConsumableArray_js__WEBPACK_IMPORTED_MODULE_3__.Z)(Array(numberOfItems)).map((function(_,i){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_checkbox__WEBPACK_IMPORTED_MODULE_4__.X,{id:"checkbox".concat(i),label:"Option ".concat(i+1),name:"checkbox".concat(i),checked:checked["checkbox".concat(i)],onChange:handleChange},"checkbox".concat(i))}))},getRadioButtonItems=function getRadioButtonItems(numberOfItems,radioValue,handleChange){return(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_toConsumableArray_js__WEBPACK_IMPORTED_MODULE_3__.Z)(Array(numberOfItems)).map((function(_,i){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_radioButton__WEBPACK_IMPORTED_MODULE_5__.E,{id:"radio".concat(i),label:"Option ".concat(i+1),value:"radio".concat(i),name:"radio",checked:radioValue==="radio".concat(i),onChange:handleChange},"radio".concat(i))}))},Default=function Default(_ref){var numberOfItems=_ref.numberOfItems,args=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_6__.Z)(_ref,_excluded),_useState=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)({}),_useState2=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_7__.Z)(_useState,2),checkedItems=_useState2[0],setCheckedItems=_useState2[1],_useState3=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)("radio0"),_useState4=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_7__.Z)(_useState3,2),radioValue=_useState4[0],setRadioValue=_useState4[1],checkboxes=getCheckboxItems(numberOfItems,checkedItems,(function handleCheckboxChange(e){var item=e.target.name,isChecked=e.target.checked;setCheckedItems((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)({},checkedItems),{},(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_defineProperty_js__WEBPACK_IMPORTED_MODULE_9__.Z)({},item,isChecked)))})),radiobuttons=getRadioButtonItems(numberOfItems,radioValue,(function handleRadioChange(e){setRadioValue(e.target.value)}));return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_SelectionGroup__WEBPACK_IMPORTED_MODULE_2__.M,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)({},args),{},{children:checkboxes})),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_SelectionGroup__WEBPACK_IMPORTED_MODULE_2__.M,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)({},args),{},{children:radiobuttons}))]})},Horizontal=function Horizontal(_ref2){var numberOfItems=_ref2.numberOfItems,args=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_6__.Z)(_ref2,_excluded2),_useState5=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)({}),_useState6=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_7__.Z)(_useState5,2),checkedItems=_useState6[0],setCheckedItems=_useState6[1],_useState7=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)("radio0"),_useState8=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_7__.Z)(_useState7,2),radioValue=_useState8[0],setRadioValue=_useState8[1],checkboxes=getCheckboxItems(numberOfItems,checkedItems,(function handleCheckboxChange(e){var item=e.target.name,isChecked=e.target.checked;setCheckedItems((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)({},checkedItems),{},(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_defineProperty_js__WEBPACK_IMPORTED_MODULE_9__.Z)({},item,isChecked)))})),radiobuttons=getRadioButtonItems(numberOfItems,radioValue,(function handleRadioChange(e){setRadioValue(e.target.value)}));return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_SelectionGroup__WEBPACK_IMPORTED_MODULE_2__.M,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)({},args),{},{children:checkboxes})),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_SelectionGroup__WEBPACK_IMPORTED_MODULE_2__.M,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)({},args),{},{children:radiobuttons}))]})};Horizontal.args={direction:"horizontal"};var Required=function Required(_ref3){var numberOfItems=_ref3.numberOfItems,args=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_6__.Z)(_ref3,_excluded3),_useState9=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)({}),_useState10=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_7__.Z)(_useState9,2),checkedItems=_useState10[0],setCheckedItems=_useState10[1],_useState11=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)("radio0"),_useState12=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_7__.Z)(_useState11,2),radioValue=_useState12[0],setRadioValue=_useState12[1],checkboxes=getCheckboxItems(numberOfItems,checkedItems,(function handleCheckboxChange(e){var item=e.target.name,isChecked=e.target.checked;setCheckedItems((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)({},checkedItems),{},(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_defineProperty_js__WEBPACK_IMPORTED_MODULE_9__.Z)({},item,isChecked)))})),radiobuttons=getRadioButtonItems(numberOfItems,radioValue,(function handleRadioChange(e){setRadioValue(e.target.value)}));return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_SelectionGroup__WEBPACK_IMPORTED_MODULE_2__.M,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)({},args),{},{children:checkboxes})),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_SelectionGroup__WEBPACK_IMPORTED_MODULE_2__.M,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)({},args),{},{children:radiobuttons}))]})};Required.args={required:!0};var Invalid=function Invalid(_ref4){var numberOfItems=_ref4.numberOfItems,args=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_6__.Z)(_ref4,_excluded4),_useState13=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)({}),_useState14=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_7__.Z)(_useState13,2),checkedItems=_useState14[0],setCheckedItems=_useState14[1],_useState15=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)("radio0"),_useState16=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_7__.Z)(_useState15,2),radioValue=_useState16[0],setRadioValue=_useState16[1],checkboxes=getCheckboxItems(numberOfItems,checkedItems,(function handleCheckboxChange(e){var item=e.target.name,isChecked=e.target.checked;setCheckedItems((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)({},checkedItems),{},(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_defineProperty_js__WEBPACK_IMPORTED_MODULE_9__.Z)({},item,isChecked)))})),radiobuttons=getRadioButtonItems(numberOfItems,radioValue,(function handleRadioChange(e){setRadioValue(e.target.value)}));return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_SelectionGroup__WEBPACK_IMPORTED_MODULE_2__.M,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)({},args),{},{children:checkboxes})),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_SelectionGroup__WEBPACK_IMPORTED_MODULE_2__.M,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)({},args),{},{children:radiobuttons}))]})};Invalid.args={required:!0,errorText:"Error text"};var WithTooltip=function WithTooltip(_ref5){var numberOfItems=_ref5.numberOfItems,args=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_6__.Z)(_ref5,_excluded5),_useState17=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)({}),_useState18=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_7__.Z)(_useState17,2),checkedItems=_useState18[0],setCheckedItems=_useState18[1],_useState19=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)("radio0"),_useState20=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_7__.Z)(_useState19,2),radioValue=_useState20[0],setRadioValue=_useState20[1],checkboxes=getCheckboxItems(numberOfItems,checkedItems,(function handleCheckboxChange(e){var item=e.target.name,isChecked=e.target.checked;setCheckedItems((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)({},checkedItems),{},(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_defineProperty_js__WEBPACK_IMPORTED_MODULE_9__.Z)({},item,isChecked)))})),radiobuttons=getRadioButtonItems(numberOfItems,radioValue,(function handleRadioChange(e){setRadioValue(e.target.value)}));return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_SelectionGroup__WEBPACK_IMPORTED_MODULE_2__.M,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)({},args),{},{children:checkboxes})),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_SelectionGroup__WEBPACK_IMPORTED_MODULE_2__.M,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)({},args),{},{children:radiobuttons}))]})};WithTooltip.args={tooltipLabel:"Tooltip",tooltipButtonLabel:"Tooltip",tooltipText:'Tooltips contain "nice to have" information. Default Tooltip contents should not be longer than two to three sentences. For longer descriptions, provide a link to a separate page.'},WithTooltip.storyName="With tooltip";var WithParent=function WithParent(){var CheckboxState=function(CheckboxState){return CheckboxState[CheckboxState.checked=0]="checked",CheckboxState[CheckboxState.unchecked=1]="unchecked",CheckboxState[CheckboxState.indeterminate=2]="indeterminate",CheckboxState}({}),initialState={controllerCheckbox:CheckboxState.unchecked,checkbox1:CheckboxState.unchecked,checkbox2:CheckboxState.unchecked,checkbox3:CheckboxState.unchecked,checkbox4:CheckboxState.unchecked,checkbox5:CheckboxState.unchecked},_useReducer=(0,react__WEBPACK_IMPORTED_MODULE_0__.useReducer)((function reducer(state,action){switch(action.type){case"check":var _objectSpread7;return"controllerCheckbox"===action.payload?{controllerCheckbox:CheckboxState.checked,checkbox1:CheckboxState.checked,checkbox2:CheckboxState.checked,checkbox3:CheckboxState.checked,checkbox4:CheckboxState.checked,checkbox5:CheckboxState.checked}:(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)({},state),{},(_objectSpread7={},(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_defineProperty_js__WEBPACK_IMPORTED_MODULE_9__.Z)(_objectSpread7,action.payload,CheckboxState.checked),(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_defineProperty_js__WEBPACK_IMPORTED_MODULE_9__.Z)(_objectSpread7,"controllerCheckbox",function areAllChecked(state){var checkedCount=0;return Object.keys(state).forEach((function(key){"controllerCheckbox"!==key&&state[key]===CheckboxState.checked&&(checkedCount+=1)})),4===checkedCount}(state)?CheckboxState.checked:CheckboxState.indeterminate),_objectSpread7));case"uncheck":var _objectSpread8;return"controllerCheckbox"===action.payload?{controllerCheckbox:CheckboxState.unchecked,checkbox1:CheckboxState.unchecked,checkbox2:CheckboxState.unchecked,checkbox3:CheckboxState.unchecked,checkbox4:CheckboxState.unchecked,checkbox5:CheckboxState.unchecked}:(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)({},state),{},(_objectSpread8={},(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_defineProperty_js__WEBPACK_IMPORTED_MODULE_9__.Z)(_objectSpread8,action.payload,CheckboxState.unchecked),(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_defineProperty_js__WEBPACK_IMPORTED_MODULE_9__.Z)(_objectSpread8,"controllerCheckbox",function areAllUnchecked(state){var checkedCount=0;return Object.keys(state).forEach((function(key){"controllerCheckbox"!==key&&state[key]===CheckboxState.checked&&(checkedCount+=1)})),1===checkedCount}(state)?CheckboxState.unchecked:CheckboxState.indeterminate),_objectSpread8));default:throw new Error}}),initialState),_useReducer2=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_7__.Z)(_useReducer,2),state=_useReducer2[0],dispatch=_useReducer2[1];return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(_fieldset__WEBPACK_IMPORTED_MODULE_10__.p,{heading:"Group label *",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_checkbox__WEBPACK_IMPORTED_MODULE_4__.X,{"aria-controls":"checkbox1 checkbox2 checkbox3 checkbox4 checkbox5",id:"controllerCheckbox",label:"Label",indeterminate:state.controllerCheckbox===CheckboxState.indeterminate,checked:state.controllerCheckbox===CheckboxState.checked,style:{marginTop:"var(--spacing-xs)"},onChange:function onChange(){state.controllerCheckbox===CheckboxState.unchecked||state.controllerCheckbox===CheckboxState.indeterminate?dispatch({type:"check",payload:"controllerCheckbox"}):dispatch({type:"uncheck",payload:"controllerCheckbox"})}}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("ul",{style:{marginLeft:"var(--spacing-s)",paddingInlineStart:"0"},children:Object.entries(state).map((function(entry){return"controllerCheckbox"===entry[0]?null:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("li",{style:{marginTop:"var(--spacing-s)",listStyle:"none"},children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_checkbox__WEBPACK_IMPORTED_MODULE_4__.X,{id:entry[0],label:"Label",checked:entry[1]===CheckboxState.checked,onChange:function onChange(){entry[1]===CheckboxState.unchecked?dispatch({type:"check",payload:entry[0]}):dispatch({type:"uncheck",payload:entry[0]})}},entry[0])},entry[0])}))})]})};WithParent.storyName="With a parent",WithParent.parameters={loki:{skip:!0}};var WithHelperText=function WithHelperText(_ref6){var numberOfItems=_ref6.numberOfItems,args=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_6__.Z)(_ref6,_excluded6),_useState21=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)({}),_useState22=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_7__.Z)(_useState21,2),checkedItems=_useState22[0],setCheckedItems=_useState22[1],_useState23=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)("radio0"),_useState24=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_slicedToArray_js__WEBPACK_IMPORTED_MODULE_7__.Z)(_useState23,2),radioValue=_useState24[0],setRadioValue=_useState24[1],checkboxes=getCheckboxItems(numberOfItems,checkedItems,(function handleCheckboxChange(e){var item=e.target.name,isChecked=e.target.checked;setCheckedItems((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)({},checkedItems),{},(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_defineProperty_js__WEBPACK_IMPORTED_MODULE_9__.Z)({},item,isChecked)))})),radiobuttons=getRadioButtonItems(numberOfItems,radioValue,(function handleRadioChange(e){setRadioValue(e.target.value)}));return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_SelectionGroup__WEBPACK_IMPORTED_MODULE_2__.M,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)({},args),{},{children:checkboxes})),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_SelectionGroup__WEBPACK_IMPORTED_MODULE_2__.M,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)({},args),{},{children:radiobuttons}))]})};WithHelperText.args={helperText:"Assistive text"},Default.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)({storySource:{source:"({ numberOfItems, ...args }) => {\n const [checkedItems, setCheckedItems] = useState({});\n const [radioValue, setRadioValue] = useState('radio0');\n const handleCheckboxChange = (e: ChangeEvent) => {\n const item = e.target.name;\n const isChecked = e.target.checked;\n setCheckedItems({ ...checkedItems, [item]: isChecked });\n };\n const handleRadioChange = (e: ChangeEvent) => {\n setRadioValue(e.target.value);\n };\n const checkboxes = getCheckboxItems(numberOfItems, checkedItems, handleCheckboxChange);\n const radiobuttons = getRadioButtonItems(numberOfItems, radioValue, handleRadioChange);\n return (\n <>\n {checkboxes}\n
\n
\n {radiobuttons}\n \n );\n}"}},Default.parameters),Horizontal.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)({storySource:{source:"({ numberOfItems, ...args }) => {\n const [checkedItems, setCheckedItems] = useState({});\n const [radioValue, setRadioValue] = useState('radio0');\n const handleCheckboxChange = (e: ChangeEvent) => {\n const item = e.target.name;\n const isChecked = e.target.checked;\n setCheckedItems({ ...checkedItems, [item]: isChecked });\n };\n const handleRadioChange = (e: ChangeEvent) => {\n setRadioValue(e.target.value);\n };\n const checkboxes = getCheckboxItems(numberOfItems, checkedItems, handleCheckboxChange);\n const radiobuttons = getRadioButtonItems(numberOfItems, radioValue, handleRadioChange);\n return (\n <>\n {checkboxes}\n
\n
\n {radiobuttons}\n \n );\n}"}},Horizontal.parameters),Required.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)({storySource:{source:"({ numberOfItems, ...args }) => {\n const [checkedItems, setCheckedItems] = useState({});\n const [radioValue, setRadioValue] = useState('radio0');\n const handleCheckboxChange = (e: ChangeEvent) => {\n const item = e.target.name;\n const isChecked = e.target.checked;\n setCheckedItems({ ...checkedItems, [item]: isChecked });\n };\n const handleRadioChange = (e: ChangeEvent) => {\n setRadioValue(e.target.value);\n };\n const checkboxes = getCheckboxItems(numberOfItems, checkedItems, handleCheckboxChange);\n const radiobuttons = getRadioButtonItems(numberOfItems, radioValue, handleRadioChange);\n return (\n <>\n {checkboxes}\n
\n
\n {radiobuttons}\n \n );\n}"}},Required.parameters),Invalid.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)({storySource:{source:"({ numberOfItems, ...args }) => {\n const [checkedItems, setCheckedItems] = useState({});\n const [radioValue, setRadioValue] = useState('radio0');\n const handleCheckboxChange = (e: ChangeEvent) => {\n const item = e.target.name;\n const isChecked = e.target.checked;\n setCheckedItems({ ...checkedItems, [item]: isChecked });\n };\n const handleRadioChange = (e: ChangeEvent) => {\n setRadioValue(e.target.value);\n };\n const checkboxes = getCheckboxItems(numberOfItems, checkedItems, handleCheckboxChange);\n const radiobuttons = getRadioButtonItems(numberOfItems, radioValue, handleRadioChange);\n return (\n <>\n {checkboxes}\n
\n
\n {radiobuttons}\n \n );\n}"}},Invalid.parameters),WithTooltip.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)({storySource:{source:"({ numberOfItems, ...args }) => {\n const [checkedItems, setCheckedItems] = useState({});\n const [radioValue, setRadioValue] = useState('radio0');\n const handleCheckboxChange = (e: ChangeEvent) => {\n const item = e.target.name;\n const isChecked = e.target.checked;\n setCheckedItems({ ...checkedItems, [item]: isChecked });\n };\n const handleRadioChange = (e: ChangeEvent) => {\n setRadioValue(e.target.value);\n };\n const checkboxes = getCheckboxItems(numberOfItems, checkedItems, handleCheckboxChange);\n const radiobuttons = getRadioButtonItems(numberOfItems, radioValue, handleRadioChange);\n return (\n <>\n {checkboxes}\n
\n
\n {radiobuttons}\n \n );\n}"}},WithTooltip.parameters),WithParent.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)({storySource:{source:"() => {\n enum CheckboxState {\n checked,\n unchecked,\n indeterminate,\n }\n\n const areAllChecked = (state) => {\n let checkedCount = 0;\n Object.keys(state).forEach((key) => {\n if (key === 'controllerCheckbox') {\n return;\n }\n if (state[key] === CheckboxState.checked) {\n checkedCount += 1;\n }\n });\n\n return checkedCount === 4;\n };\n\n const areAllUnchecked = (state) => {\n let checkedCount = 0;\n Object.keys(state).forEach((key) => {\n if (key === 'controllerCheckbox') {\n return;\n }\n if (state[key] === CheckboxState.checked) {\n checkedCount += 1;\n }\n });\n\n return checkedCount === 1;\n };\n\n const reducer = (state, action) => {\n switch (action.type) {\n case 'check': {\n if (action.payload === 'controllerCheckbox') {\n return {\n controllerCheckbox: CheckboxState.checked,\n checkbox1: CheckboxState.checked,\n checkbox2: CheckboxState.checked,\n checkbox3: CheckboxState.checked,\n checkbox4: CheckboxState.checked,\n checkbox5: CheckboxState.checked,\n };\n }\n return {\n ...state,\n [action.payload]: CheckboxState.checked,\n controllerCheckbox: areAllChecked(state) ? CheckboxState.checked : CheckboxState.indeterminate,\n };\n }\n case 'uncheck': {\n if (action.payload === 'controllerCheckbox') {\n return {\n controllerCheckbox: CheckboxState.unchecked,\n checkbox1: CheckboxState.unchecked,\n checkbox2: CheckboxState.unchecked,\n checkbox3: CheckboxState.unchecked,\n checkbox4: CheckboxState.unchecked,\n checkbox5: CheckboxState.unchecked,\n };\n }\n return {\n ...state,\n [action.payload]: CheckboxState.unchecked,\n controllerCheckbox: areAllUnchecked(state) ? CheckboxState.unchecked : CheckboxState.indeterminate,\n };\n }\n default:\n throw new Error();\n }\n };\n\n const initialState = {\n controllerCheckbox: CheckboxState.unchecked,\n checkbox1: CheckboxState.unchecked,\n checkbox2: CheckboxState.unchecked,\n checkbox3: CheckboxState.unchecked,\n checkbox4: CheckboxState.unchecked,\n checkbox5: CheckboxState.unchecked,\n };\n\n const [state, dispatch] = useReducer(reducer, initialState);\n\n return (\n
\n {\n if (\n state.controllerCheckbox === CheckboxState.unchecked ||\n state.controllerCheckbox === CheckboxState.indeterminate\n ) {\n dispatch({ type: 'check', payload: 'controllerCheckbox' });\n } else {\n dispatch({ type: 'uncheck', payload: 'controllerCheckbox' });\n }\n }}\n />\n
    \n {Object.entries(state).map((entry) => {\n if (entry[0] === 'controllerCheckbox') {\n return null;\n }\n return (\n
  • \n {\n if (entry[1] === CheckboxState.unchecked) {\n dispatch({ type: 'check', payload: entry[0] });\n } else {\n dispatch({ type: 'uncheck', payload: entry[0] });\n }\n }}\n />\n
    • \n );\n })}\n
\n
\n );\n}"}},WithParent.parameters),WithHelperText.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_8__.Z)({storySource:{source:"({ numberOfItems, ...args }) => {\n const [checkedItems, setCheckedItems] = useState({});\n const [radioValue, setRadioValue] = useState('radio0');\n const handleCheckboxChange = (e: ChangeEvent) => {\n const item = e.target.name;\n const isChecked = e.target.checked;\n setCheckedItems({ ...checkedItems, [item]: isChecked });\n };\n const handleRadioChange = (e: ChangeEvent) => {\n setRadioValue(e.target.value);\n };\n const checkboxes = getCheckboxItems(numberOfItems, checkedItems, handleCheckboxChange);\n const radiobuttons = getRadioButtonItems(numberOfItems, radioValue, handleRadioChange);\n return (\n <>\n {checkboxes}\n
\n
\n {radiobuttons}\n \n );\n}"}},WithHelperText.parameters);try{Default.displayName="Default",Default.__docgenInfo={description:"",displayName:"Default",props:{numberOfItems:{defaultValue:null,description:"",name:"numberOfItems",required:!0,type:{name:"any"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/selectionGroup/SelectionGroup.stories.tsx#Default"]={docgenInfo:Default.__docgenInfo,name:"Default",path:"src/components/selectionGroup/SelectionGroup.stories.tsx#Default"})}catch(__react_docgen_typescript_loader_error){}try{Horizontal.displayName="Horizontal",Horizontal.__docgenInfo={description:"",displayName:"Horizontal",props:{numberOfItems:{defaultValue:null,description:"",name:"numberOfItems",required:!0,type:{name:"any"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/selectionGroup/SelectionGroup.stories.tsx#Horizontal"]={docgenInfo:Horizontal.__docgenInfo,name:"Horizontal",path:"src/components/selectionGroup/SelectionGroup.stories.tsx#Horizontal"})}catch(__react_docgen_typescript_loader_error){}try{Required.displayName="Required",Required.__docgenInfo={description:"",displayName:"Required",props:{numberOfItems:{defaultValue:null,description:"",name:"numberOfItems",required:!0,type:{name:"any"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/selectionGroup/SelectionGroup.stories.tsx#Required"]={docgenInfo:Required.__docgenInfo,name:"Required",path:"src/components/selectionGroup/SelectionGroup.stories.tsx#Required"})}catch(__react_docgen_typescript_loader_error){}try{Invalid.displayName="Invalid",Invalid.__docgenInfo={description:"",displayName:"Invalid",props:{numberOfItems:{defaultValue:null,description:"",name:"numberOfItems",required:!0,type:{name:"any"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/selectionGroup/SelectionGroup.stories.tsx#Invalid"]={docgenInfo:Invalid.__docgenInfo,name:"Invalid",path:"src/components/selectionGroup/SelectionGroup.stories.tsx#Invalid"})}catch(__react_docgen_typescript_loader_error){}try{WithTooltip.displayName="WithTooltip",WithTooltip.__docgenInfo={description:"",displayName:"WithTooltip",props:{numberOfItems:{defaultValue:null,description:"",name:"numberOfItems",required:!0,type:{name:"any"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/selectionGroup/SelectionGroup.stories.tsx#WithTooltip"]={docgenInfo:WithTooltip.__docgenInfo,name:"WithTooltip",path:"src/components/selectionGroup/SelectionGroup.stories.tsx#WithTooltip"})}catch(__react_docgen_typescript_loader_error){}try{WithHelperText.displayName="WithHelperText",WithHelperText.__docgenInfo={description:"",displayName:"WithHelperText",props:{numberOfItems:{defaultValue:null,description:"",name:"numberOfItems",required:!0,type:{name:"any"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/selectionGroup/SelectionGroup.stories.tsx#WithHelperText"]={docgenInfo:WithHelperText.__docgenInfo,name:"WithHelperText",path:"src/components/selectionGroup/SelectionGroup.stories.tsx#WithHelperText"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/sideNavigation/SideNavigation.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{CustomTheme:()=>CustomTheme,Default:()=>Default,WithIcons:()=>WithIcons,WithSkipLink:()=>WithSkipLink,default:()=>SideNavigation_stories});var objectSpread2=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),slicedToArray=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),react=__webpack_require__("../../node_modules/react/index.js");__webpack_require__("./src/styles/base.css");const SideNavigation_module_sideNavigation="SideNavigation_sideNavigation__-d8cy",SideNavigation_module_toggleButton="SideNavigation_toggleButton__zltxh",SideNavigation_module_mainLevelList="SideNavigation_mainLevelList__bxPfD",SideNavigation_module_open="SideNavigation_open__sicrw";const sideNavigation_SideNavigationContext=react.createContext({mobileMenuOpen:!1,defaultOpenMainLevels:void 0,activeParentLevel:void 0,setMobileMenuOpen:function setMobileMenuOpen(){},setActiveParentLevel:function setActiveParentLevel(){}});var classNames=__webpack_require__("./src/utils/classNames.ts"),useMobile=__webpack_require__("./src/hooks/useMobile.tsx"),Button=__webpack_require__("./src/components/button/Button.tsx"),SkipLink=__webpack_require__("./src/internal/skipLink/SkipLink.tsx"),IconAngleUp=__webpack_require__("./src/icons/IconAngleUp.tsx"),IconAngleDown=__webpack_require__("./src/icons/IconAngleDown.tsx"),objectWithoutProperties=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js");const MainLevel_module_mainLevel="MainLevel_mainLevel__E++Lv",MainLevel_module_active="MainLevel_active__mOeCc",MainLevel_module_mainLevelListMenu="MainLevel_mainLevelListMenu__2XG25",MainLevel_module_mainLevelWithDivider="MainLevel_mainLevelWithDivider__aNBoF",MainLevel_module_leftIcon="MainLevel_leftIcon__gdLvJ",MainLevel_module_label="MainLevel_label__NI7f0",MainLevel_module_rightIcon="MainLevel_rightIcon__4inED",MainLevel_module_open="MainLevel_open__HvOkd";var IconLinkExternal=__webpack_require__("./src/icons/IconLinkExternal.tsx"),getChildren=__webpack_require__("./src/utils/getChildren.ts"),jsx_runtime=__webpack_require__("../../node_modules/react/jsx-runtime.js"),_excluded=["active","children","className","href","icon","id","index","label","withDivider","external","openInNewTab","openInNewTabAriaLabel","openInExternalDomainAriaLabel","onClick","style"],composeAriaLabel=function composeAriaLabel(_ref){var openInNewTab=_ref.openInNewTab,openInNewTabAriaLabel=_ref.openInNewTabAriaLabel,openInExternalDomainAriaLabel=_ref.openInExternalDomainAriaLabel,label=_ref.label,newTabText=openInNewTab?openInNewTabAriaLabel||"Avautuu uudessa välilehdessä.":"",externalText=openInExternalDomainAriaLabel||"Siirtyy toiseen sivustoon.";return["."!==label.slice(-1)?"".concat(label,"."):label,newTabText,externalText].filter((function(text){return text})).join(" ")},LeftIcon=function LeftIcon(_ref2){var icon=_ref2.icon;return(0,jsx_runtime.jsx)("span",{className:MainLevel_module_leftIcon,"aria-hidden":!0,children:icon})},RightIcon=function RightIcon(_ref3){var icon=_ref3.icon,_ref3$className=_ref3.className,className=void 0===_ref3$className?"":_ref3$className;return(0,jsx_runtime.jsx)("span",{className:(0,classNames.Z)(MainLevel_module_rightIcon,className),"aria-hidden":!0,children:icon})},Label=function Label(_ref4){var label=_ref4.label;return(0,jsx_runtime.jsx)("span",{className:MainLevel_module_label,children:label})},MainLevel=function MainLevel(_ref5){var active=_ref5.active,children=_ref5.children,className=_ref5.className,href=_ref5.href,icon=_ref5.icon,id=_ref5.id,index=_ref5.index,label=_ref5.label,withDivider=_ref5.withDivider,external=_ref5.external,openInNewTab=_ref5.openInNewTab,openInNewTabAriaLabel=_ref5.openInNewTabAriaLabel,openInExternalDomainAriaLabel=_ref5.openInExternalDomainAriaLabel,onClick=_ref5.onClick,style=_ref5.style,rest=(0,objectWithoutProperties.Z)(_ref5,_excluded),menuId="".concat(id,"-menu"),_useContext=(0,react.useContext)(sideNavigation_SideNavigationContext),defaultOpenMainLevels=_useContext.defaultOpenMainLevels,activeParentLevel=_useContext.activeParentLevel,setActiveParentLevel=_useContext.setActiveParentLevel,setMobileMenuOpen=_useContext.setMobileMenuOpen,_useState=(0,react.useState)(defaultOpenMainLevels.includes(index)),_useState2=(0,slicedToArray.Z)(_useState,2),isOpen=_useState2[0],setIsOpen=_useState2[1],_useState3=(0,react.useState)(!1),_useState4=(0,slicedToArray.Z)(_useState3,2),isActiveParent=_useState4[0],setIsActiveParent=_useState4[1],subLevels=(0,getChildren.AU)(children).map((function(child,childIndex){return(0,react.isValidElement)(child)&&"SubLevel"===child.type.componentName?(0,react.cloneElement)(child,{mainLevelIndex:index,key:childIndex}):null})),hasSubLevels=Boolean(null==subLevels?void 0:subLevels.length),handleMainLevelClick=function handleMainLevelClick(ev){hasSubLevels?setIsOpen(!isOpen):(setActiveParentLevel(void 0),setMobileMenuOpen(!1)),onClick&&onClick(ev)};return(0,react.useEffect)((function(){var isActive=activeParentLevel===index;isActive&&setIsOpen(!0),setIsActiveParent(isActive)}),[activeParentLevel,index,setIsOpen,setIsActiveParent]),(0,jsx_runtime.jsx)("li",{className:(0,classNames.Z)(MainLevel_module_mainLevel,withDivider&&MainLevel_module_mainLevelWithDivider,active&&MainLevel_module_active,isOpen&&MainLevel_module_open,className),style,children:hasSubLevels?(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsxs)("button",{type:"button","aria-label":label,"aria-current":isActiveParent,"aria-expanded":isOpen,id,onClick:handleMainLevelClick,children:[icon&&(0,jsx_runtime.jsx)(LeftIcon,{icon}),(0,jsx_runtime.jsx)(Label,{label}),hasSubLevels&&(0,jsx_runtime.jsx)(RightIcon,{icon:isOpen?(0,jsx_runtime.jsx)(IconAngleUp.IconAngleUp,{"aria-hidden":!0}):(0,jsx_runtime.jsx)(IconAngleDown.IconAngleDown,{"aria-hidden":!0})})]}),(0,jsx_runtime.jsx)("ul",{className:MainLevel_module_mainLevelListMenu,id:menuId,"aria-hidden":!isOpen,"aria-labelledby":id,children:subLevels})]}):(0,jsx_runtime.jsxs)("a",(0,objectSpread2.Z)((0,objectSpread2.Z)((0,objectSpread2.Z)({},rest),{},{"aria-current":active?"page":"false","aria-label":external?"".concat(label," ").concat(openInExternalDomainAriaLabel||"Siirtyy toiseen sivustoon"):label,id,onClick:handleMainLevelClick,href},external&&openInNewTab&&{target:"_blank",rel:"noopener","aria-label":composeAriaLabel({label,openInNewTab,openInNewTabAriaLabel,openInExternalDomainAriaLabel})}),{},{children:[icon&&(0,jsx_runtime.jsx)(LeftIcon,{icon}),(0,jsx_runtime.jsx)(Label,{label}),external&&(0,jsx_runtime.jsx)(RightIcon,{icon:(0,jsx_runtime.jsx)(IconLinkExternal.IconLinkExternal,{"aria-hidden":!0})})]}))},id)};MainLevel.componentName="MainLevel";try{MainLevel.displayName="MainLevel",MainLevel.__docgenInfo={description:"",displayName:"MainLevel",props:{id:{defaultValue:null,description:"The id of the side navigation main level",name:"id",required:!0,type:{name:"string"}},href:{defaultValue:null,description:"href attribute of the side navigation main level",name:"href",required:!1,type:{name:"string"}},icon:{defaultValue:null,description:"Optional icon of the side navigation main level",name:"icon",required:!1,type:{name:"ReactNode"}},index:{defaultValue:null,description:"Index of the side navigation main level. The parent SideNavigation component uses this property to index main levels",name:"index",required:!1,type:{name:"number"}},label:{defaultValue:null,description:"Label of the side navigation main level",name:"label",required:!0,type:{name:"string"}},withDivider:{defaultValue:null,description:"A border that distinguishes the main level from the previous item",name:"withDivider",required:!1,type:{name:"boolean"}},className:{defaultValue:{value:""},description:"Additional class names to apply to the side navigation main level",name:"className",required:!1,type:{name:"string"}},style:{defaultValue:null,description:"Override or extend the styles applied to the component",name:"style",required:!1,type:{name:"CSSProperties"}},children:{defaultValue:null,description:"Children components for the main level. Usually subLevels",name:"children",required:!1,type:{name:"ReactNode"}},onClick:{defaultValue:null,description:"Callback function fired when the main level is clicked",name:"onClick",required:!1,type:{name:"(event: KeyboardEvent | MouseEvent | KeyboardEvent | MouseEvent<...>) => void"}},active:{defaultValue:null,description:"",name:"active",required:!1,type:{name:"boolean"}},external:{defaultValue:null,description:"Boolean indicating whether the main level link will lead user to external domain.",name:"external",required:!1,type:{name:"boolean"}},openInNewTab:{defaultValue:null,description:"Boolean indicating whether the main level link will open in new tab or not.",name:"openInNewTab",required:!1,type:{name:"boolean"}},openInNewTabAriaLabel:{defaultValue:null,description:"The aria-label for opening main level link in a new tab",name:"openInNewTabAriaLabel",required:!1,type:{name:"string"}},openInExternalDomainAriaLabel:{defaultValue:null,description:"The aria-label for opening main level link in an external domain",name:"openInExternalDomainAriaLabel",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/sideNavigation/mainLevel/MainLevel.tsx#MainLevel"]={docgenInfo:MainLevel.__docgenInfo,name:"MainLevel",path:"src/components/sideNavigation/mainLevel/MainLevel.tsx#MainLevel"})}catch(__react_docgen_typescript_loader_error){}const SubLevel_module_subLevel="SubLevel_subLevel__cALpt",SubLevel_module_active="SubLevel_active__3gtTZ";var SubLevel=function SubLevel(_ref){var active=_ref.active,className=_ref.className,href=_ref.href,id=_ref.id,label=_ref.label,mainLevelIndex=_ref.mainLevelIndex,_onClick=_ref.onClick,style=_ref.style,_useContext=(0,react.useContext)(sideNavigation_SideNavigationContext),setActiveParentLevel=_useContext.setActiveParentLevel,setMobileMenuOpen=_useContext.setMobileMenuOpen;return(0,react.useEffect)((function(){active&&setActiveParentLevel(mainLevelIndex)}),[active,mainLevelIndex,setActiveParentLevel]),(0,jsx_runtime.jsx)("li",{className:(0,classNames.Z)(SubLevel_module_subLevel,active&&SubLevel_module_active,className),style,children:(0,jsx_runtime.jsx)("a",{id,"aria-current":active?"page":"false",onClick:function onClick(ev){setMobileMenuOpen(!1),_onClick&&_onClick(ev)},href,children:label})})};SubLevel.componentName="SubLevel";try{SubLevel.displayName="SubLevel",SubLevel.__docgenInfo={description:"",displayName:"SubLevel",props:{active:{defaultValue:null,description:"If `true`, the item will be marked as active",name:"active",required:!1,type:{name:"boolean"}},id:{defaultValue:null,description:"The id of the side navigation sub level",name:"id",required:!1,type:{name:"string"}},href:{defaultValue:null,description:"href attribute of the side navigation sub level",name:"href",required:!1,type:{name:"string"}},label:{defaultValue:null,description:"Label of the side navigation sub level",name:"label",required:!0,type:{name:"string"}},mainLevelIndex:{defaultValue:null,description:"Index of the containing main level. The parent MainLevel component uses this property to index sub levels",name:"mainLevelIndex",required:!1,type:{name:"number"}},className:{defaultValue:null,description:"Additional class names to apply to the side navigation sub level",name:"className",required:!1,type:{name:"string"}},style:{defaultValue:null,description:"Override or extend the styles applied to the component",name:"style",required:!1,type:{name:"CSSProperties"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/sideNavigation/subLevel/SubLevel.tsx#SubLevel"]={docgenInfo:SubLevel.__docgenInfo,name:"SubLevel",path:"src/components/sideNavigation/subLevel/SubLevel.tsx#SubLevel"})}catch(__react_docgen_typescript_loader_error){}var useTheme=__webpack_require__("./src/hooks/useTheme.tsx"),SideNavigation=function SideNavigation(_ref){var children=_ref.children,className=_ref.className,_ref$defaultOpenMainL=_ref.defaultOpenMainLevels,defaultOpenMainLevels=void 0===_ref$defaultOpenMainL?[]:_ref$defaultOpenMainL,id=_ref.id,ariaLabel=_ref.ariaLabel,style=_ref.style,theme=_ref.theme,toggleButtonLabel=_ref.toggleButtonLabel,container=react.useRef(null),customThemeClass=(0,useTheme.F)(SideNavigation_module_sideNavigation,theme),menuId="".concat(id,"-menu"),_React$useState=react.useState(),_React$useState2=(0,slicedToArray.Z)(_React$useState,2),activeParentLevel=_React$useState2[0],setActiveParentLevel=_React$useState2[1],_React$useState3=react.useState(!1),_React$useState4=(0,slicedToArray.Z)(_React$useState3,2),mobileMenuOpen=_React$useState4[0],setMobileMenuOpen=_React$useState4[1],shouldRenderMenu=!((0,useMobile.X)()&&!mobileMenuOpen),childElements=(0,getChildren.AU)(children),mainLevels=childElements.map((function(child,index){return(0,react.isValidElement)(child)&&"MainLevel"===child.type.componentName?(0,react.cloneElement)(child,{key:index,index}):null})),skipLink=childElements.find((function(child){return(0,react.isValidElement)(child)&&"SkipLink"===child.type.componentName}));return(0,react.useEffect)((function(){var handleEscKey=function handleEscKey(event){var key=event.key||event.keyCode;!mobileMenuOpen||"Escape"!==key&&"Esc"!==key&&27!==key||setMobileMenuOpen(!1)},handleOutsideClickOrFocusin=function handleOutsideClickOrFocusin(event){var target=event.target;mobileMenuOpen&&!container.current.contains(target)&&setMobileMenuOpen(!1)};return document.addEventListener("click",handleOutsideClickOrFocusin),document.addEventListener("focusin",handleOutsideClickOrFocusin),document.addEventListener("keyup",handleEscKey),function(){document.removeEventListener("click",handleOutsideClickOrFocusin),document.removeEventListener("focusin",handleOutsideClickOrFocusin),document.removeEventListener("keyup",handleEscKey)}})),(0,jsx_runtime.jsx)(sideNavigation_SideNavigationContext.Provider,{value:{mobileMenuOpen,defaultOpenMainLevels,activeParentLevel,setMobileMenuOpen,setActiveParentLevel},children:(0,jsx_runtime.jsxs)("nav",{className:(0,classNames.Z)(SideNavigation_module_sideNavigation,customThemeClass,className),id,"aria-label":ariaLabel,ref:container,style,children:[skipLink&&skipLink,(0,jsx_runtime.jsx)(Button.z,{"aria-controls":menuId,"aria-expanded":mobileMenuOpen,"aria-haspopup":!0,className:SideNavigation_module_toggleButton,fullWidth:!0,iconRight:mobileMenuOpen?(0,jsx_runtime.jsx)(IconAngleUp.IconAngleUp,{"aria-hidden":!0}):(0,jsx_runtime.jsx)(IconAngleDown.IconAngleDown,{"aria-hidden":!0}),onClick:function toggleMobileMenu(){setMobileMenuOpen(!mobileMenuOpen)},variant:"secondary",type:"button",children:toggleButtonLabel}),shouldRenderMenu&&(0,jsx_runtime.jsx)("ul",{className:(0,classNames.Z)(SideNavigation_module_mainLevelList,mobileMenuOpen&&SideNavigation_module_open),"aria-label":toggleButtonLabel,id:menuId,children:mainLevels})]})})};SideNavigation.MainLevel=MainLevel,SideNavigation.SubLevel=SubLevel,SideNavigation.SkipLink=SkipLink.G;try{SideNavigation.displayName="SideNavigation",SideNavigation.__docgenInfo={description:"",displayName:"SideNavigation",props:{className:{defaultValue:null,description:"Additional class names to apply to the side navigation",name:"className",required:!1,type:{name:"string"}},defaultOpenMainLevels:{defaultValue:{value:"[]"},description:"Default value for open main levels",name:"defaultOpenMainLevels",required:!1,type:{name:"number[]"}},id:{defaultValue:null,description:"The id of the side navigation.",name:"id",required:!0,type:{name:"string"}},ariaLabel:{defaultValue:null,description:"aria-label for helping screen reader users to distinguish SideNavigation from other navigational components",name:"ariaLabel",required:!1,type:{name:"string"}},style:{defaultValue:null,description:"Override or extend the styles applied to the component",name:"style",required:!1,type:{name:"CSSProperties"}},theme:{defaultValue:null,description:"Custom theme styles",name:"theme",required:!1,type:{name:"SideNavigationCustomTheme"}},toggleButtonLabel:{defaultValue:null,description:"label for the mobile menu toggle button",name:"toggleButtonLabel",required:!0,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/sideNavigation/SideNavigation.tsx#SideNavigation"]={docgenInfo:SideNavigation.__docgenInfo,name:"SideNavigation",path:"src/components/sideNavigation/SideNavigation.tsx#SideNavigation"})}catch(__react_docgen_typescript_loader_error){}try{SideNavigation.MainLevel.displayName="SideNavigation.MainLevel",SideNavigation.MainLevel.__docgenInfo={description:"",displayName:"SideNavigation.MainLevel",props:{id:{defaultValue:null,description:"The id of the side navigation main level",name:"id",required:!0,type:{name:"string"}},href:{defaultValue:null,description:"href attribute of the side navigation main level",name:"href",required:!1,type:{name:"string"}},icon:{defaultValue:null,description:"Optional icon of the side navigation main level",name:"icon",required:!1,type:{name:"ReactNode"}},index:{defaultValue:null,description:"Index of the side navigation main level. The parent SideNavigation component uses this property to index main levels",name:"index",required:!1,type:{name:"number"}},label:{defaultValue:null,description:"Label of the side navigation main level",name:"label",required:!0,type:{name:"string"}},withDivider:{defaultValue:null,description:"A border that distinguishes the main level from the previous item",name:"withDivider",required:!1,type:{name:"boolean"}},className:{defaultValue:{value:""},description:"Additional class names to apply to the side navigation main level",name:"className",required:!1,type:{name:"string"}},style:{defaultValue:null,description:"Override or extend the styles applied to the component",name:"style",required:!1,type:{name:"CSSProperties"}},children:{defaultValue:null,description:"Children components for the main level. Usually subLevels",name:"children",required:!1,type:{name:"ReactNode"}},onClick:{defaultValue:null,description:"Callback function fired when the main level is clicked",name:"onClick",required:!1,type:{name:"(event: KeyboardEvent | MouseEvent | KeyboardEvent | MouseEvent<...>) => void"}},active:{defaultValue:null,description:"",name:"active",required:!1,type:{name:"boolean"}},external:{defaultValue:null,description:"Boolean indicating whether the main level link will lead user to external domain.",name:"external",required:!1,type:{name:"boolean"}},openInNewTab:{defaultValue:null,description:"Boolean indicating whether the main level link will open in new tab or not.",name:"openInNewTab",required:!1,type:{name:"boolean"}},openInNewTabAriaLabel:{defaultValue:null,description:"The aria-label for opening main level link in a new tab",name:"openInNewTabAriaLabel",required:!1,type:{name:"string"}},openInExternalDomainAriaLabel:{defaultValue:null,description:"The aria-label for opening main level link in an external domain",name:"openInExternalDomainAriaLabel",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/sideNavigation/SideNavigation.tsx#SideNavigation.MainLevel"]={docgenInfo:SideNavigation.MainLevel.__docgenInfo,name:"SideNavigation.MainLevel",path:"src/components/sideNavigation/SideNavigation.tsx#SideNavigation.MainLevel"})}catch(__react_docgen_typescript_loader_error){}try{SideNavigation.SubLevel.displayName="SideNavigation.SubLevel",SideNavigation.SubLevel.__docgenInfo={description:"",displayName:"SideNavigation.SubLevel",props:{active:{defaultValue:null,description:"If `true`, the item will be marked as active",name:"active",required:!1,type:{name:"boolean"}},id:{defaultValue:null,description:"The id of the side navigation sub level",name:"id",required:!1,type:{name:"string"}},href:{defaultValue:null,description:"href attribute of the side navigation sub level",name:"href",required:!1,type:{name:"string"}},label:{defaultValue:null,description:"Label of the side navigation sub level",name:"label",required:!0,type:{name:"string"}},mainLevelIndex:{defaultValue:null,description:"Index of the containing main level. The parent MainLevel component uses this property to index sub levels",name:"mainLevelIndex",required:!1,type:{name:"number"}},className:{defaultValue:null,description:"Additional class names to apply to the side navigation sub level",name:"className",required:!1,type:{name:"string"}},style:{defaultValue:null,description:"Override or extend the styles applied to the component",name:"style",required:!1,type:{name:"CSSProperties"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/sideNavigation/SideNavigation.tsx#SideNavigation.SubLevel"]={docgenInfo:SideNavigation.SubLevel.__docgenInfo,name:"SideNavigation.SubLevel",path:"src/components/sideNavigation/SideNavigation.tsx#SideNavigation.SubLevel"})}catch(__react_docgen_typescript_loader_error){}try{SideNavigation.SkipLink.displayName="SideNavigation.SkipLink",SideNavigation.SkipLink.__docgenInfo={description:"",displayName:"SideNavigation.SkipLink",props:{ariaLabel:{defaultValue:null,description:"aria-label for describing SkipLink for screen readers.",name:"ariaLabel",required:!1,type:{name:"string"}},label:{defaultValue:null,description:"Label for the SkipLink.",name:"label",required:!0,type:{name:"string"}},skipTo:{defaultValue:null,description:"ID of the element where the SkipLink jumps to.",name:"skipTo",required:!0,type:{name:"string"}},theme:{defaultValue:null,description:"Custom styling for SkipLink.",name:"theme",required:!1,type:{name:"SkipLinkTheme"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/sideNavigation/SideNavigation.tsx#SideNavigation.SkipLink"]={docgenInfo:SideNavigation.SkipLink.__docgenInfo,name:"SideNavigation.SkipLink",path:"src/components/sideNavigation/SideNavigation.tsx#SideNavigation.SkipLink"})}catch(__react_docgen_typescript_loader_error){}var IconHome=__webpack_require__("./src/icons/IconHome.tsx");const SideNavigation_stories={component:SideNavigation,decorators:[function(storyFn){return(0,jsx_runtime.jsx)("div",{style:{backgroundColor:"#f5f5f5",display:"grid",minHeight:"100vh"},children:(0,jsx_runtime.jsx)("div",{style:{height:"100%"},children:storyFn()})})}],title:"Components/SideNavigation",parameters:{storySource:{source:'import React from \'react\';\n\nimport { SideNavigation } from \'./SideNavigation\';\nimport { IconHome } from \'../../icons\';\n\nexport default {\n component: SideNavigation,\n decorators: [\n (storyFn) => (\n
\n
{storyFn()}
\n
\n ),\n ],\n title: \'Components/SideNavigation\',\n parameters: {\n controls: { expanded: true },\n },\n args: { defaultOpenMainLevels: [], toggleButtonLabel: \'Navigate to page\', id: \'side-navigation\' },\n};\n\nconst handleClick = (setActive) => (ev) => {\n ev.preventDefault();\n setActive(ev.currentTarget.getAttribute(\'href\'));\n};\n\nexport const Default = (args) => {\n const [active, setActive] = React.useState(\'/sub-level-1\');\n\n return (\n <>\n \n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n
Page Content
\n
\n \n );\n};\n\nexport const WithIcons = (args) => {\n const [active, setActive] = React.useState(\'/sub-level-2\');\n\n return (\n <>\n \n
\n
\n \n }\n >\n \n \n \n }\n >\n \n \n \n }\n />\n \n \n
\n
Page Content
\n
\n \n );\n};\n\nconst skipLinkTheme = {\n \'--left\': \'0px\',\n \'--top\': \'0px\',\n};\n\nexport const WithSkipLink = (args) => {\n const [active, setActive] = React.useState(\'/sub-level-1\');\n\n return (\n <>\n \n\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
Page Content
\n
\n \n );\n};\n\nexport const CustomTheme = (args) => Default(args);\nCustomTheme.args = {\n theme: {\n \'--side-navigation-background-color\': \'var(--color-white)\',\n \'--side-navigation-active-indicator-background-color\': \'var(--color-gold)\',\n \'--side-navigation-icon-size\': \'var(--spacing-m)\',\n \'--side-navigation-level-border-color\': \'var(--color-white)\',\n \'--side-navigation-level-border-color-focus\': \'var(--color-coat-of-arms)\',\n \'--side-navigation-level-border-color-hover\': \'var(--color-fog-light)\',\n \'--side-navigation-level-background-color\': \'var(--color-white)\',\n \'--side-navigation-level-background-color-active\': \'var(--color-fog-light)\',\n \'--side-navigation-level-background-color-hover\': \'var(--color-fog-light)\',\n \'--side-navigation-level-color\': \'var(--color-black)\',\n \'--side-navigation-level-color-active\': \'var(--color-black)\',\n \'--side-navigation-level-color-hover\': \'var(--color-black)\',\n \'--side-navigation-mobile-menu-border-color\': \'var(--color-black)\',\n \'--side-navigation-mobile-menu-z-index\': 100,\n },\n};\n',locationsMap:{default:{startLoc:{col:23,line:27},endLoc:{col:1,line:108},startBody:{col:23,line:27},endBody:{col:1,line:108}},"with-icons":{startLoc:{col:25,line:110},endLoc:{col:1,line:200},startBody:{col:25,line:110},endBody:{col:1,line:200}},"with-skip-link":{startLoc:{col:28,line:207},endLoc:{col:1,line:290},startBody:{col:28,line:207},endBody:{col:1,line:290}},"custom-theme":{startLoc:{col:27,line:292},endLoc:{col:50,line:292},startBody:{col:27,line:292},endBody:{col:50,line:292}}}},controls:{expanded:!0}},args:{defaultOpenMainLevels:[],toggleButtonLabel:"Navigate to page",id:"side-navigation"}};var handleClick=function handleClick(setActive){return function(ev){ev.preventDefault(),setActive(ev.currentTarget.getAttribute("href"))}},Default=function Default(args){var _React$useState=react.useState("/sub-level-1"),_React$useState2=(0,slicedToArray.Z)(_React$useState,2),active=_React$useState2[0],setActive=_React$useState2[1];return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)("style",{children:"\n @media only screen and (min-width: ".concat(getComputedStyle(document.documentElement).getPropertyValue("--breakpoint-m"),") {\n .example-page {\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n grid-gap: 1rem;\n }\n\n .example-page-side-navigation {\n grid-column: 1/4;\n }\n }\n ")}),(0,jsx_runtime.jsxs)("div",{className:"example-page",children:[(0,jsx_runtime.jsx)("div",{className:"example-page-side-navigation",children:(0,jsx_runtime.jsxs)(SideNavigation,(0,objectSpread2.Z)((0,objectSpread2.Z)({ariaLabel:"Getting started"},args),{},{children:[(0,jsx_runtime.jsxs)(SideNavigation.MainLevel,{id:"main-level-link-1",label:"Main level accordion",children:[(0,jsx_runtime.jsx)(SideNavigation.SubLevel,{active:"/sub-level-1"===active,id:"sub-level-link-1",href:"/sub-level-1",label:"Sub level link",onClick:handleClick(setActive)}),(0,jsx_runtime.jsx)(SideNavigation.SubLevel,{active:"/sub-level-2"===active,id:"sub-level-link-2",href:"/sub-level-2",label:"Sub level link",onClick:handleClick(setActive)})]}),(0,jsx_runtime.jsxs)(SideNavigation.MainLevel,{id:"main-level-link-2",label:"Main level accordion",children:[(0,jsx_runtime.jsx)(SideNavigation.SubLevel,{active:"/sub-level-3"===active,id:"sub-level-link-3",href:"/sub-level-3",label:"Sub level link",onClick:handleClick(setActive)}),(0,jsx_runtime.jsx)(SideNavigation.SubLevel,{active:"/sub-level-4"===active,id:"sub-level-link-4",href:"/sub-level-4",label:"Sub level link",onClick:handleClick(setActive)})]}),(0,jsx_runtime.jsx)(SideNavigation.MainLevel,{active:"/main-level-3"===active,id:"main-level-link-3",href:"/main-level-3",label:"Main level link",onClick:handleClick(setActive)}),(0,jsx_runtime.jsx)(SideNavigation.MainLevel,{id:"main-level-link-4",href:"external-address",label:"Main level external link",external:!0,openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab.",openInExternalDomainAriaLabel:"Opens a different website.",onClick:handleClick(setActive),withDivider:!0})]}))}),(0,jsx_runtime.jsx)("main",{children:"Page Content"})]})]})},WithIcons=function WithIcons(args){var _React$useState3=react.useState("/sub-level-2"),_React$useState4=(0,slicedToArray.Z)(_React$useState3,2),active=_React$useState4[0],setActive=_React$useState4[1];return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)("style",{children:"\n @media only screen and (min-width: ".concat(getComputedStyle(document.documentElement).getPropertyValue("--breakpoint-m"),") {\n .example-page {\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n grid-gap: 1rem;\n }\n\n .example-page-side-navigation {\n grid-column: 1/4;\n }\n }\n ")}),(0,jsx_runtime.jsxs)("div",{className:"example-page",children:[(0,jsx_runtime.jsx)("div",{className:"example-page-side-navigation",children:(0,jsx_runtime.jsxs)(SideNavigation,(0,objectSpread2.Z)((0,objectSpread2.Z)({},args),{},{children:[(0,jsx_runtime.jsxs)(SideNavigation.MainLevel,{id:"main-level-link-1",label:"Main level accordion",icon:(0,jsx_runtime.jsx)(IconHome.IconHome,{"aria-hidden":!0}),children:[(0,jsx_runtime.jsx)(SideNavigation.SubLevel,{active:"/sub-level-1"===active,id:"sub-level-link-1",href:"/sub-level-1",label:"Sub level link",onClick:handleClick(setActive)}),(0,jsx_runtime.jsx)(SideNavigation.SubLevel,{active:"/sub-level-2"===active,id:"sub-level-link-2",href:"/sub-level-2",label:"Sub level link",onClick:handleClick(setActive)})]}),(0,jsx_runtime.jsxs)(SideNavigation.MainLevel,{id:"main-level-link-2",label:"Main level accordion",icon:(0,jsx_runtime.jsx)(IconHome.IconHome,{"aria-hidden":!0}),children:[(0,jsx_runtime.jsx)(SideNavigation.SubLevel,{active:"/sub-level-3"===active,id:"sub-level-link-3",href:"/sub-level-3",label:"Sub level link",onClick:handleClick(setActive)}),(0,jsx_runtime.jsx)(SideNavigation.SubLevel,{active:"/sub-level-4"===active,id:"sub-level-link-4",href:"/sub-level-4",label:"Sub level link",onClick:handleClick(setActive)})]}),(0,jsx_runtime.jsx)(SideNavigation.MainLevel,{active:"/main-level-3"===active,id:"main-level-link-3",href:"/main-level-3",label:"Main level link",onClick:handleClick(setActive),icon:(0,jsx_runtime.jsx)(IconHome.IconHome,{"aria-hidden":!0})}),(0,jsx_runtime.jsx)(SideNavigation.MainLevel,{id:"main-level-link-4",href:"external-address",label:"Main level external link",external:!0,openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab.",openInExternalDomainAriaLabel:"Opens a different website.",onClick:handleClick(setActive),withDivider:!0})]}))}),(0,jsx_runtime.jsx)("main",{children:"Page Content"})]})]})},skipLinkTheme={"--left":"0px","--top":"0px"},WithSkipLink=function WithSkipLink(args){var _React$useState5=react.useState("/sub-level-1"),_React$useState6=(0,slicedToArray.Z)(_React$useState5,2),active=_React$useState6[0],setActive=_React$useState6[1];return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)("style",{children:"\n @media only screen and (min-width: ".concat(getComputedStyle(document.documentElement).getPropertyValue("--breakpoint-m"),") {\n .example-page {\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n grid-gap: 1rem;\n }\n\n .example-page-side-navigation {\n grid-column: 1/4;\n }\n }\n ")}),(0,jsx_runtime.jsxs)("div",{className:"example-page",children:[(0,jsx_runtime.jsx)("div",{className:"example-page-side-navigation",children:(0,jsx_runtime.jsxs)(SideNavigation,(0,objectSpread2.Z)((0,objectSpread2.Z)({ariaLabel:"Getting started"},args),{},{children:[(0,jsx_runtime.jsx)(SideNavigation.SkipLink,{skipTo:"#content",label:"Skip Navigation",theme:skipLinkTheme}),(0,jsx_runtime.jsxs)(SideNavigation.MainLevel,{id:"main-level-link-1",label:"Main level accordion",children:[(0,jsx_runtime.jsx)(SideNavigation.SubLevel,{active:"/sub-level-1"===active,id:"sub-level-link-1",href:"/sub-level-1",label:"Sub level link",onClick:handleClick(setActive)}),(0,jsx_runtime.jsx)(SideNavigation.SubLevel,{active:"/sub-level-2"===active,id:"sub-level-link-2",href:"/sub-level-2",label:"Sub level link",onClick:handleClick(setActive)})]}),(0,jsx_runtime.jsxs)(SideNavigation.MainLevel,{id:"main-level-link-2",label:"Main level accordion",children:[(0,jsx_runtime.jsx)(SideNavigation.SubLevel,{active:"/sub-level-3"===active,id:"sub-level-link-3",href:"/sub-level-3",label:"Sub level link",onClick:handleClick(setActive)}),(0,jsx_runtime.jsx)(SideNavigation.SubLevel,{active:"/sub-level-4"===active,id:"sub-level-link-4",href:"/sub-level-4",label:"Sub level link",onClick:handleClick(setActive)})]}),(0,jsx_runtime.jsx)(SideNavigation.MainLevel,{active:"/main-level-3"===active,id:"main-level-link-3",href:"/main-level-3",label:"Main level link",onClick:handleClick(setActive)}),(0,jsx_runtime.jsx)(SideNavigation.MainLevel,{id:"main-level-link-4",href:"external-address",label:"Main level external link",external:!0,openInNewTab:!0,openInNewTabAriaLabel:"Opens in a new tab.",openInExternalDomainAriaLabel:"Opens a different website.",onClick:handleClick(setActive),withDivider:!0})]}))}),(0,jsx_runtime.jsx)("main",{children:"Page Content"})]})]})},CustomTheme=function CustomTheme(args){return Default(args)};CustomTheme.args={theme:{"--side-navigation-background-color":"var(--color-white)","--side-navigation-active-indicator-background-color":"var(--color-gold)","--side-navigation-icon-size":"var(--spacing-m)","--side-navigation-level-border-color":"var(--color-white)","--side-navigation-level-border-color-focus":"var(--color-coat-of-arms)","--side-navigation-level-border-color-hover":"var(--color-fog-light)","--side-navigation-level-background-color":"var(--color-white)","--side-navigation-level-background-color-active":"var(--color-fog-light)","--side-navigation-level-background-color-hover":"var(--color-fog-light)","--side-navigation-level-color":"var(--color-black)","--side-navigation-level-color-active":"var(--color-black)","--side-navigation-level-color-hover":"var(--color-black)","--side-navigation-mobile-menu-border-color":"var(--color-black)","--side-navigation-mobile-menu-z-index":100}},Default.parameters=(0,objectSpread2.Z)({storySource:{source:'(args) => {\n const [active, setActive] = React.useState(\'/sub-level-1\');\n\n return (\n <>\n \n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n
Page Content
\n
\n \n );\n}'}},Default.parameters),WithIcons.parameters=(0,objectSpread2.Z)({storySource:{source:'(args) => {\n const [active, setActive] = React.useState(\'/sub-level-2\');\n\n return (\n <>\n \n
\n
\n \n }\n >\n \n \n \n }\n >\n \n \n \n }\n />\n \n \n
\n
Page Content
\n
\n \n );\n}'}},WithIcons.parameters),WithSkipLink.parameters=(0,objectSpread2.Z)({storySource:{source:'(args) => {\n const [active, setActive] = React.useState(\'/sub-level-1\');\n\n return (\n <>\n \n\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
Page Content
\n
\n \n );\n}'}},WithSkipLink.parameters),CustomTheme.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => Default(args)"}},CustomTheme.parameters);try{Default.displayName="Default",Default.__docgenInfo={description:"",displayName:"Default",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/sideNavigation/SideNavigation.stories.tsx#Default"]={docgenInfo:Default.__docgenInfo,name:"Default",path:"src/components/sideNavigation/SideNavigation.stories.tsx#Default"})}catch(__react_docgen_typescript_loader_error){}try{WithIcons.displayName="WithIcons",WithIcons.__docgenInfo={description:"",displayName:"WithIcons",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/sideNavigation/SideNavigation.stories.tsx#WithIcons"]={docgenInfo:WithIcons.__docgenInfo,name:"WithIcons",path:"src/components/sideNavigation/SideNavigation.stories.tsx#WithIcons"})}catch(__react_docgen_typescript_loader_error){}try{WithSkipLink.displayName="WithSkipLink",WithSkipLink.__docgenInfo={description:"",displayName:"WithSkipLink",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/sideNavigation/SideNavigation.stories.tsx#WithSkipLink"]={docgenInfo:WithSkipLink.__docgenInfo,name:"WithSkipLink",path:"src/components/sideNavigation/SideNavigation.stories.tsx#WithSkipLink"})}catch(__react_docgen_typescript_loader_error){}try{CustomTheme.displayName="CustomTheme",CustomTheme.__docgenInfo={description:"",displayName:"CustomTheme",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/sideNavigation/SideNavigation.stories.tsx#CustomTheme"]={docgenInfo:CustomTheme.__docgenInfo,name:"CustomTheme",path:"src/components/sideNavigation/SideNavigation.stories.tsx#CustomTheme"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/statusLabel/StatusLabel.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Alert:()=>Alert,Error:()=>Error,Icons:()=>Icons,Info:()=>Info,Neutral:()=>Neutral,Playground:()=>Playground,Success:()=>Success,default:()=>StatusLabel_stories});var objectSpread2=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),objectWithoutProperties=(__webpack_require__("../../node_modules/react/index.js"),__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"));__webpack_require__("./src/styles/base.css");const StatusLabel_module={statusLabel:"StatusLabel_statusLabel__PRZAr status-label_hds-status-label__cKOCR",statusLabelWithIcon:"StatusLabel_statusLabelWithIcon__D0x6W status-label_hds-status-label--with-icon__B29VM",statusLabelIcon:"StatusLabel_statusLabelIcon__l1++J status-label_hds-status-label-icon__ZwmPf",info:"StatusLabel_info__G9AuR status-label_hds-status-label--info__skSDp",success:"StatusLabel_success__wUjTj status-label_hds-status-label--success__ECfam",alert:"StatusLabel_alert__qGIX0 status-label_hds-status-label--alert__qPQaE",error:"StatusLabel_error__N4X2p status-label_hds-status-label--error__hyan6"};var classNames=__webpack_require__("./src/utils/classNames.ts"),jsx_runtime=__webpack_require__("../../node_modules/react/jsx-runtime.js"),_excluded=["children","className","dataTestId","type","iconLeft"],IconElement=function IconElement(_ref){var icon=_ref.icon;return(0,jsx_runtime.jsx)("span",{className:StatusLabel_module.statusLabelIcon,"aria-hidden":"true",children:icon})},StatusLabel=function StatusLabel(_ref2){var children=_ref2.children,className=_ref2.className,dataTestId=_ref2.dataTestId,_ref2$type=_ref2.type,type=void 0===_ref2$type?"neutral":_ref2$type,iconLeft=_ref2.iconLeft,rest=(0,objectWithoutProperties.Z)(_ref2,_excluded);return(0,jsx_runtime.jsxs)("span",(0,objectSpread2.Z)((0,objectSpread2.Z)({className:(0,classNames.Z)(StatusLabel_module.statusLabel,StatusLabel_module[type],iconLeft&&StatusLabel_module.statusLabelWithIcon,className),"data-testid":dataTestId},rest),{},{children:[iconLeft&&(0,jsx_runtime.jsx)(IconElement,{icon:iconLeft}),children]}))};try{StatusLabel.displayName="StatusLabel",StatusLabel.__docgenInfo={description:"",displayName:"StatusLabel",props:{className:{defaultValue:null,description:"Additional class names to apply to the status label",name:"className",required:!1,type:{name:"string"}},dataTestId:{defaultValue:null,description:"Adds a data-testid attribute to the root element with the given value",name:"dataTestId",required:!1,type:{name:"string"}},type:{defaultValue:{value:"neutral"},description:"The type of the status label",name:"type",required:!1,type:{name:"enum",value:[{value:'"success"'},{value:'"info"'},{value:'"error"'},{value:'"alert"'},{value:'"neutral"'}]}},iconLeft:{defaultValue:null,description:"Element placed on the left side of the status label",name:"iconLeft",required:!1,type:{name:"ReactNode"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/statusLabel/StatusLabel.tsx#StatusLabel"]={docgenInfo:StatusLabel.__docgenInfo,name:"StatusLabel",path:"src/components/statusLabel/StatusLabel.tsx#StatusLabel"})}catch(__react_docgen_typescript_loader_error){}var IconInfoCircle=__webpack_require__("./src/icons/IconInfoCircle.tsx"),IconCheckCircle=__webpack_require__("./src/icons/IconCheckCircle.tsx"),IconAlertCircle=__webpack_require__("./src/icons/IconAlertCircle.tsx"),IconError=__webpack_require__("./src/icons/IconError.tsx");const StatusLabel_stories={component:StatusLabel,title:"Components/StatusLabel",parameters:{storySource:{source:"import React from 'react';\n\nimport { StatusLabel } from './StatusLabel';\nimport { IconCheckCircle, IconInfoCircle, IconAlertCircle, IconError } from '../../icons';\n\nexport default {\n component: StatusLabel,\n title: 'Components/StatusLabel',\n parameters: {\n controls: { hideNoControlsWarning: true },\n },\n};\n\nexport const Neutral = () => Neutral;\n\nexport const Info = () => Info;\n\nexport const Success = () => Success;\n\nexport const Alert = () => Alert;\n\nexport const Error = () => Error;\n\nexport const Icons = () => (\n <>\n }>Default\n
\n
\n }>\n Info\n \n
\n
\n }>\n Success\n \n
\n
\n }>\n Alert\n \n
\n
\n }>\n Error\n \n \n);\n\nexport const Playground = (args) => {args.label};\n\nPlayground.parameters = {\n previewTabs: {\n 'storybook/docs/panel': {\n hidden: true,\n },\n },\n docs: {\n disable: true,\n },\n};\n\nPlayground.args = {\n label: 'Status',\n type: 'neutral',\n};\n\nPlayground.argTypes = {\n type: {\n options: ['neutral', 'info', 'success', 'alert', 'error'],\n control: { type: 'radio' },\n },\n};\n",locationsMap:{neutral:{startLoc:{col:23,line:14},endLoc:{col:63,line:14},startBody:{col:23,line:14},endBody:{col:63,line:14}},info:{startLoc:{col:20,line:16},endLoc:{col:69,line:16},startBody:{col:20,line:16},endBody:{col:69,line:16}},success:{startLoc:{col:23,line:18},endLoc:{col:78,line:18},startBody:{col:23,line:18},endBody:{col:78,line:18}},alert:{startLoc:{col:21,line:20},endLoc:{col:72,line:20},startBody:{col:21,line:20},endBody:{col:72,line:20}},error:{startLoc:{col:21,line:22},endLoc:{col:72,line:22},startBody:{col:21,line:22},endBody:{col:72,line:22}},icons:{startLoc:{col:21,line:24},endLoc:{col:1,line:48},startBody:{col:21,line:24},endBody:{col:1,line:48}},playground:{startLoc:{col:26,line:50},endLoc:{col:92,line:50},startBody:{col:26,line:50},endBody:{col:92,line:50}}}},controls:{hideNoControlsWarning:!0}}};var Neutral=function Neutral(){return(0,jsx_runtime.jsx)(StatusLabel,{children:"Neutral"})},Info=function Info(){return(0,jsx_runtime.jsx)(StatusLabel,{type:"info",children:"Info"})},Success=function Success(){return(0,jsx_runtime.jsx)(StatusLabel,{type:"success",children:"Success"})},Alert=function Alert(){return(0,jsx_runtime.jsx)(StatusLabel,{type:"alert",children:"Alert"})},Error=function Error(){return(0,jsx_runtime.jsx)(StatusLabel,{type:"error",children:"Error"})},Icons=function Icons(){return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(StatusLabel,{iconLeft:(0,jsx_runtime.jsx)(IconInfoCircle.IconInfoCircle,{}),children:"Default"}),(0,jsx_runtime.jsx)("br",{}),(0,jsx_runtime.jsx)("br",{}),(0,jsx_runtime.jsx)(StatusLabel,{type:"info",iconLeft:(0,jsx_runtime.jsx)(IconInfoCircle.IconInfoCircle,{}),children:"Info"}),(0,jsx_runtime.jsx)("br",{}),(0,jsx_runtime.jsx)("br",{}),(0,jsx_runtime.jsx)(StatusLabel,{type:"success",iconLeft:(0,jsx_runtime.jsx)(IconCheckCircle.IconCheckCircle,{}),children:"Success"}),(0,jsx_runtime.jsx)("br",{}),(0,jsx_runtime.jsx)("br",{}),(0,jsx_runtime.jsx)(StatusLabel,{type:"alert",iconLeft:(0,jsx_runtime.jsx)(IconAlertCircle.IconAlertCircle,{}),children:"Alert"}),(0,jsx_runtime.jsx)("br",{}),(0,jsx_runtime.jsx)("br",{}),(0,jsx_runtime.jsx)(StatusLabel,{type:"error",iconLeft:(0,jsx_runtime.jsx)(IconError.IconError,{}),children:"Error"})]})},Playground=function Playground(args){return(0,jsx_runtime.jsx)(StatusLabel,{type:args.type,children:args.label})};Playground.parameters={previewTabs:{"storybook/docs/panel":{hidden:!0}},docs:{disable:!0}},Playground.args={label:"Status",type:"neutral"},Playground.argTypes={type:{options:["neutral","info","success","alert","error"],control:{type:"radio"}}},Neutral.parameters=(0,objectSpread2.Z)({storySource:{source:"() => Neutral"}},Neutral.parameters),Info.parameters=(0,objectSpread2.Z)({storySource:{source:'() => Info'}},Info.parameters),Success.parameters=(0,objectSpread2.Z)({storySource:{source:'() => Success'}},Success.parameters),Alert.parameters=(0,objectSpread2.Z)({storySource:{source:'() => Alert'}},Alert.parameters),Error.parameters=(0,objectSpread2.Z)({storySource:{source:'() => Error'}},Error.parameters),Icons.parameters=(0,objectSpread2.Z)({storySource:{source:'() => (\n <>\n }>Default\n
\n
\n }>\n Info\n \n
\n
\n }>\n Success\n \n
\n
\n }>\n Alert\n \n
\n
\n }>\n Error\n \n \n)'}},Icons.parameters),Playground.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => {args.label}"}},Playground.parameters);try{Playground.displayName="Playground",Playground.__docgenInfo={description:"",displayName:"Playground",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/statusLabel/StatusLabel.stories.tsx#Playground"]={docgenInfo:Playground.__docgenInfo,name:"Playground",path:"src/components/statusLabel/StatusLabel.stories.tsx#Playground"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/stepByStep/StepByStep.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{NumberedStepByStep:()=>NumberedStepByStep,RegularStepByStep:()=>RegularStepByStep,default:()=>StepByStep_stories});var objectSpread2=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),react=__webpack_require__("../../node_modules/react/index.js"),objectWithoutProperties=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),Button=(__webpack_require__("./src/styles/base.css"),__webpack_require__("./src/components/button/Button.tsx")),classNames=__webpack_require__("./src/utils/classNames.ts"),Link=__webpack_require__("./src/components/link/Link.tsx");const StepByStep_module={container:"StepByStep_container__rZ-v9",stepsContainer:"StepByStep_stepsContainer__wESCk step-by-step_hds-step-by-step__steps-container__CP8BU",stepItem:"StepByStep_stepItem__Q+z7C step-by-step_hds-step-by-step__step-item__vI8lg",stepItemTitle:"StepByStep_stepItemTitle__CffwI step-by-step_hds-step-by-step__step-item-title__lCmCB"};var jsx_runtime=__webpack_require__("../../node_modules/react/jsx-runtime.js"),_excluded=["children"],getButtonOrLinkRenderer=function getButtonOrLinkRenderer(Tag){return function(_ref){var children=_ref.children,props=(0,objectWithoutProperties.Z)(_ref,_excluded);return(0,jsx_runtime.jsx)("p",{children:(0,jsx_runtime.jsx)(Tag,(0,objectSpread2.Z)((0,objectSpread2.Z)({},props),{},{children}))})}},renderLink=getButtonOrLinkRenderer(Link.r),renderButton=getButtonOrLinkRenderer(Button.z),StepComponent=function StepComponent(_ref2){var title=_ref2.title,description=_ref2.description,_ref2$buttons=_ref2.buttons,buttons=void 0===_ref2$buttons?[]:_ref2$buttons,_ref2$links=_ref2.links,links=void 0===_ref2$links?[]:_ref2$links;return(0,jsx_runtime.jsxs)("li",{className:StepByStep_module.stepItem,children:[(0,jsx_runtime.jsx)("p",{className:StepByStep_module.stepItemTitle,children:title}),(0,jsx_runtime.jsxs)("div",{children:[description&&(0,jsx_runtime.jsx)("p",{children:description}),buttons.map(renderButton),links.map(renderLink)]})]})},StepByStep=function StepByStep(_ref3){var className=_ref3.className,title=_ref3.title,helpText=_ref3.helpText,_ref3$steps=_ref3.steps,steps=void 0===_ref3$steps?[]:_ref3$steps,_ref3$numberedList=_ref3.numberedList,numberedList=void 0!==_ref3$numberedList&&_ref3$numberedList,headerClassName=_ref3.headerClassName,_ref3$headerLevel=_ref3.headerLevel,headerLevel=void 0===_ref3$headerLevel?2:_ref3$headerLevel,wrapperClassName=(0,classNames.Z)(StepByStep_module.container,className),titleComponent=title&&react.createElement("h".concat(headerLevel),{className:(0,classNames.Z)(StepByStep_module.title,headerClassName)},title);return(0,jsx_runtime.jsxs)("div",{className:wrapperClassName,children:[(0,jsx_runtime.jsxs)("div",{children:[titleComponent,(0,jsx_runtime.jsx)("p",{className:StepByStep_module.description,children:helpText})]}),react.createElement(numberedList?"ol":"ul",{className:StepByStep_module.stepsContainer},steps.map((function(step){return(0,jsx_runtime.jsx)(StepComponent,(0,objectSpread2.Z)({},step))})))]})};try{StepByStep.displayName="StepByStep",StepByStep.__docgenInfo={description:"",displayName:"StepByStep",props:{className:{defaultValue:null,description:"Additional class names to apply to the container element.",name:"className",required:!1,type:{name:"string"}},headerClassName:{defaultValue:null,description:"Class name for the main heading.",name:"headerClassName",required:!1,type:{name:"string"}},headerLevel:{defaultValue:{value:"2"},description:"Header level for the main heading.",name:"headerLevel",required:!1,type:{name:"number"}},helpText:{defaultValue:null,description:"Help text for the step by step component. Displayed under the `title` property.",name:"helpText",required:!1,type:{name:"string"}},numberedList:{defaultValue:{value:"false"},description:"Boolean indicating whether the steps are numbered.",name:"numberedList",required:!1,type:{name:"boolean"}},steps:{defaultValue:{value:"[]"},description:"Steps for the step by step component.",name:"steps",required:!1,type:{name:"StepType[]"}},title:{defaultValue:null,description:"Title text for the step by step component.",name:"title",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/stepByStep/StepByStep.tsx#StepByStep"]={docgenInfo:StepByStep.__docgenInfo,name:"StepByStep",path:"src/components/stepByStep/StepByStep.tsx#StepByStep"})}catch(__react_docgen_typescript_loader_error){}const StepByStep_stories={parameters:{storySource:{source:"import React from 'react';\n\nimport { StepByStep } from './StepByStep';\n\nexport default {\n component: StepByStep,\n title: 'Components/StepByStep',\n args: {\n steps: [\n {\n title: 'Step title',\n description:\n 'Here you can describe the step in detail. Keep the text compact so the user gets the big picture of the whole process and its steps easily.',\n buttons: [\n {\n children: 'Example button',\n href: 'https://hel.fi',\n },\n ],\n },\n {\n title: 'Step title',\n description: 'You can put text here.',\n links: [\n {\n children: 'Example link',\n href: 'https://hel.fi',\n },\n ],\n },\n {\n title: 'Step title',\n description: 'You can put text here.',\n },\n {\n title: 'Step title',\n description: 'You can put text here.',\n },\n {\n title: 'Step title',\n description: 'You can put text here.',\n },\n ],\n },\n argTypes: {\n title: { control: { type: 'string' } },\n steps: { control: { type: 'string' } },\n helpText: { control: { type: 'string' } },\n },\n};\n\nexport const NumberedStepByStep = (args) => ;\n\nNumberedStepByStep.args = {\n title: 'Numbered step by step component',\n helpText: 'Numbered component is suitable for cases where the order of the steps is important.',\n};\n\nexport const RegularStepByStep = (args) => ;\n\nRegularStepByStep.args = {\n title: 'Numbered step by step component',\n helpText: 'Use the unnumbered list when the order of the steps is less important and they form more of a guideline.',\n};\n",locationsMap:{"numbered-step-by-step":{startLoc:{col:34,line:52},endLoc:{col:81,line:52},startBody:{col:34,line:52},endBody:{col:81,line:52}},"regular-step-by-step":{startLoc:{col:33,line:59},endLoc:{col:67,line:59},startBody:{col:33,line:59},endBody:{col:67,line:59}}}}},component:StepByStep,title:"Components/StepByStep",args:{steps:[{title:"Step title",description:"Here you can describe the step in detail. Keep the text compact so the user gets the big picture of the whole process and its steps easily.",buttons:[{children:"Example button",href:"https://hel.fi"}]},{title:"Step title",description:"You can put text here.",links:[{children:"Example link",href:"https://hel.fi"}]},{title:"Step title",description:"You can put text here."},{title:"Step title",description:"You can put text here."},{title:"Step title",description:"You can put text here."}]},argTypes:{title:{control:{type:"string"}},steps:{control:{type:"string"}},helpText:{control:{type:"string"}}}};var NumberedStepByStep=function NumberedStepByStep(args){return(0,jsx_runtime.jsx)(StepByStep,(0,objectSpread2.Z)({numberedList:!0},args))};NumberedStepByStep.args={title:"Numbered step by step component",helpText:"Numbered component is suitable for cases where the order of the steps is important."};var RegularStepByStep=function RegularStepByStep(args){return(0,jsx_runtime.jsx)(StepByStep,(0,objectSpread2.Z)({},args))};RegularStepByStep.args={title:"Numbered step by step component",helpText:"Use the unnumbered list when the order of the steps is less important and they form more of a guideline."},NumberedStepByStep.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => "}},NumberedStepByStep.parameters),RegularStepByStep.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => "}},RegularStepByStep.parameters);try{NumberedStepByStep.displayName="NumberedStepByStep",NumberedStepByStep.__docgenInfo={description:"",displayName:"NumberedStepByStep",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/stepByStep/StepByStep.stories.tsx#NumberedStepByStep"]={docgenInfo:NumberedStepByStep.__docgenInfo,name:"NumberedStepByStep",path:"src/components/stepByStep/StepByStep.stories.tsx#NumberedStepByStep"})}catch(__react_docgen_typescript_loader_error){}try{RegularStepByStep.displayName="RegularStepByStep",RegularStepByStep.__docgenInfo={description:"",displayName:"RegularStepByStep",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/stepByStep/StepByStep.stories.tsx#RegularStepByStep"]={docgenInfo:RegularStepByStep.__docgenInfo,name:"RegularStepByStep",path:"src/components/stepByStep/StepByStep.stories.tsx#RegularStepByStep"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/stepper/Stepper.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,Overflow:()=>Overflow,Playground:()=>Playground,SimpleFormExample:()=>SimpleFormExample,Small:()=>Small,States:()=>States,WithCustomTheme:()=>WithCustomTheme,WithStepHeading:()=>WithStepHeading,default:()=>Stepper_stories});var defineProperty=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/defineProperty.js"),objectSpread2=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),slicedToArray=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),react=__webpack_require__("../../node_modules/react/index.js");__webpack_require__("./src/styles/base.css");const Stepper_module_scrollButton="Stepper_scrollButton__R5+Vd",Stepper_module_step="Stepper_step__aaImD",Stepper_module_stepperContainer="Stepper_stepperContainer__Vib9w",Stepper_module_stepper="Stepper_stepper__6PjVh",Stepper_module_small="Stepper_small__URzJT",Stepper_module_stepContainer="Stepper_stepContainer__KBCl1",Stepper_module_label="Stepper_label__vlPbJ",Stepper_module_disabled="Stepper_disabled__FutYN",Stepper_module_circle="Stepper_circle__DrdoP",Stepper_module_selected="Stepper_selected__ydRxc",Stepper_module_completedContainer="Stepper_completedContainer__B0hu+",Stepper_module_completedIcon="Stepper_completedIcon__aaXAh",Stepper_module_number="Stepper_number__+nw6j",Stepper_module_circleContainer="Stepper_circleContainer__9kuPp",Stepper_module_line="Stepper_line__Bs+Y9",Stepper_module_disabledLine="Stepper_disabledLine__kt7YZ",Stepper_module_enabledLine="Stepper_enabledLine__uHDOS",Stepper_module_heading="Stepper_heading__TTXb1 helpers_heading-l__ZCbCh",Stepper_module_scrollButtonPrevious="Stepper_scrollButtonPrevious__QYWLi",Stepper_module_scrollButtonNext="Stepper_scrollButtonNext__EZSBx";var objectWithoutProperties=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),IconCheck=__webpack_require__("./src/icons/IconCheck.tsx"),IconError=__webpack_require__("./src/icons/IconError.tsx"),IconPlaybackPause=__webpack_require__("./src/icons/IconPlaybackPause.tsx"),classNames=__webpack_require__("./src/utils/classNames.ts"),jsx_runtime=__webpack_require__("../../node_modules/react/jsx-runtime.js"),_excluded=["label","language","index","renderCustomStepCountLabel","small","state","selected","stepsTotal","renderCustomStateAriaLabel","onStepClick","dataTestId"],StepState=function(StepState){return StepState[StepState.available=0]="available",StepState[StepState.completed=1]="completed",StepState[StepState.disabled=2]="disabled",StepState[StepState.attention=3]="attention",StepState[StepState.paused=4]="paused",StepState}({}),states={available:{fi:"Valittavissa.",en:"Available.",sv:"Valbar."},completed:{fi:"Valmis.",en:"Completed.",sv:"Komplett."},attention:{fi:"Vaatii huomiota.",en:"Needs attention.",sv:"Behöver uppmärksamhet."},paused:{fi:"Keskeytetty.",en:"Paused.",sv:"Pausad."}},Step=react.forwardRef((function(_ref,ref){var label=_ref.label,_ref$language=_ref.language,language=void 0===_ref$language?"fi":_ref$language,index=_ref.index,renderCustomStepCountLabel=_ref.renderCustomStepCountLabel,_ref$small=_ref.small,small=void 0!==_ref$small&&_ref$small,state=_ref.state,selected=_ref.selected,stepsTotal=_ref.stepsTotal,renderCustomStateAriaLabel=_ref.renderCustomStateAriaLabel,onStepClick=_ref.onStepClick,dataTestId=_ref.dataTestId,rest=(0,objectWithoutProperties.Z)(_ref,_excluded);return(0,jsx_runtime.jsx)("div",{className:Stepper_module_stepContainer,children:(0,jsx_runtime.jsxs)("button",(0,objectSpread2.Z)((0,objectSpread2.Z)({ref,type:"button",disabled:state===StepState.disabled,className:(0,classNames.Z)(Stepper_module_step,selected&&Stepper_module_selected,state===StepState.disabled&&Stepper_module_disabled),"aria-current":!!selected&&"step","aria-label":function composeAriaLabel(){var stepCountLabel=renderCustomStepCountLabel?renderCustomStepCountLabel(index,stepsTotal):function getStepCountLabel(language,stepIndex,totalNumberOfSteps){return{en:"Step ".concat(stepIndex+1,"/").concat(totalNumberOfSteps,"."),fi:"Vaihe ".concat(stepIndex+1,"/").concat(totalNumberOfSteps,"."),sv:"Steg ".concat(stepIndex+1,"/").concat(totalNumberOfSteps,".")}[language]}(language,index,stepsTotal),stateAriaLabel=renderCustomStateAriaLabel?renderCustomStateAriaLabel(index,state):function getStepState(language,state){return state===StepState.disabled?"":states[StepState[state]][language]}(language,state);selected&&state===StepState.available&&(stateAriaLabel="");var labelWithPeriod=label;return"."!==labelWithPeriod.slice(-1)&&(labelWithPeriod+="."),[labelWithPeriod,stepCountLabel,stateAriaLabel].filter((function(lbl){return lbl})).join(" ")}(),onClick:function onClick(e){return onStepClick&&onStepClick(e,index)},"data-testid":dataTestId},rest),{},{children:[(0,jsx_runtime.jsx)("div",{className:Stepper_module_circleContainer,children:state!==StepState.completed||selected?(0,jsx_runtime.jsxs)("div",{className:(0,classNames.Z)(Stepper_module_circle),children:[state===StepState.attention&&(0,jsx_runtime.jsx)(IconError.IconError,{size:"xs","aria-hidden":!0}),state===StepState.paused&&(0,jsx_runtime.jsx)(IconPlaybackPause.IconPlaybackPause,{size:"xs","aria-hidden":!0}),(state===StepState.available||state===StepState.disabled||state===StepState.completed&&selected)&&(0,jsx_runtime.jsx)("span",{className:Stepper_module_number,children:index+1})]}):(0,jsx_runtime.jsx)("div",{className:Stepper_module_completedContainer,children:(0,jsx_runtime.jsx)(IconCheck.IconCheck,{className:Stepper_module_completedIcon,"aria-hidden":!0})})}),!small&&(0,jsx_runtime.jsx)("p",{className:Stepper_module_label,children:label})]}))})}));try{Step.displayName="Step",Step.__docgenInfo={description:"",displayName:"Step",props:{dataTestId:{defaultValue:null,description:"Data test id of step",name:"dataTestId",required:!1,type:{name:"string"}},label:{defaultValue:null,description:"The label of the step",name:"label",required:!0,type:{name:"string"}},language:{defaultValue:{value:"fi"},description:"The language of the step",name:"language",required:!1,type:{name:"string"}},index:{defaultValue:null,description:"The index of the step",name:"index",required:!0,type:{name:"number"}},onStepClick:{defaultValue:null,description:"A callback function for custom action on step click",name:"onStepClick",required:!1,type:{name:"(event: MouseEvent, stepIndex: number) => void"}},renderCustomStateAriaLabel:{defaultValue:null,description:"A function for rendering a custom aria-label for step's state",name:"renderCustomStateAriaLabel",required:!1,type:{name:"(stepIndex: number, state: StepState) => string"}},renderCustomStepCountLabel:{defaultValue:null,description:"A function for rendering a custom step count label",name:"renderCustomStepCountLabel",required:!1,type:{name:"(stepIndex: number, totalNumberOfSteps: number) => string"}},selected:{defaultValue:null,description:"A boolean indicating whether step is in selected state",name:"selected",required:!1,type:{name:"boolean"}},small:{defaultValue:{value:"false"},description:"A boolean indicating whether small variant is used",name:"small",required:!1,type:{name:"boolean"}},state:{defaultValue:null,description:"The state of the step",name:"state",required:!0,type:{name:"enum",value:[{value:"0"},{value:"1"},{value:"2"},{value:"3"},{value:"4"}]}},stepsTotal:{defaultValue:null,description:"The total number of steps",name:"stepsTotal",required:!0,type:{name:"number"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/stepper/Step.tsx#Step"]={docgenInfo:Step.__docgenInfo,name:"Step",path:"src/components/stepper/Step.tsx#Step"})}catch(__react_docgen_typescript_loader_error){}var IconAngleLeft=__webpack_require__("./src/icons/IconAngleLeft.tsx"),IconAngleRight=__webpack_require__("./src/icons/IconAngleRight.tsx"),useTheme=__webpack_require__("./src/hooks/useTheme.tsx"),getStepHeading=function getStepHeading(language,stepIndex,totalNumberOfSteps,label){return{en:"Step ".concat(stepIndex+1,"/").concat(totalNumberOfSteps,": ").concat(label),fi:"Vaihe ".concat(stepIndex+1,"/").concat(totalNumberOfSteps,": ").concat(label),sv:"Steg ".concat(stepIndex+1,"/").concat(totalNumberOfSteps,": ").concat(label)}[language]},Stepper=function Stepper(_ref){var className=_ref.className,_ref$language=_ref.language,language=void 0===_ref$language?"fi":_ref$language,selectedStep=_ref.selectedStep,_ref$small=_ref.small,small=void 0!==_ref$small&&_ref$small,renderCustomStepCountLabel=_ref.renderCustomStepCountLabel,renderCustomStateAriaLabel=_ref.renderCustomStateAriaLabel,_onStepClick=_ref.onStepClick,stepHeading=_ref.stepHeading,_ref$stepHeadingAriaL=_ref.stepHeadingAriaLevel,stepHeadingAriaLevel=void 0===_ref$stepHeadingAriaL?2:_ref$stepHeadingAriaL,headingClassName=_ref.headingClassName,_ref$dataTestId=_ref.dataTestId,dataTestId=void 0===_ref$dataTestId?"hds-stepper":_ref$dataTestId,renderCustomStepHeading=_ref.renderCustomStepHeading,steps=_ref.steps,theme=_ref.theme,stepsTotal=steps.length,initialRender=(0,react.useRef)(!0),stepHeadingRef=(0,react.useRef)(null),stepperRef=(0,react.useRef)(null),stepRefs=(0,react.useRef)([]),arrLength=steps.length,_useState=(0,react.useState)(!1),_useState2=(0,slicedToArray.Z)(_useState,2),showPreviousButton=_useState2[0],setShowPreviousButton=_useState2[1],_useState3=(0,react.useState)(!1),_useState4=(0,slicedToArray.Z)(_useState3,2),showNextButton=_useState4[0],setShowNextButton=_useState4[1],customThemeClass=(0,useTheme.F)(Stepper_module_stepperContainer,theme);return stepRefs.current.length!==arrLength&&(stepRefs.current=Array(arrLength).fill(0).map((function(_,index){return stepRefs.current[index]||(0,react.createRef)()}))),(0,react.useEffect)((function(){if(!initialRender.current){stepHeadingRef.current&&stepHeadingRef.current.focus();var hdsStepWidth=stepperRef.current.scrollWidth/stepsTotal;stepperRef.current.scrollLeft=hdsStepWidth*(selectedStep+1)-hdsStepWidth/2-stepperRef.current.parentNode.clientWidth/2}initialRender.current=!1,stepperRef.current.scrollLeft>5?setShowPreviousButton(!0):setShowPreviousButton(!1),stepperRef.current.scrollWidth-(stepperRef.current.parentNode.clientWidth+stepperRef.current.scrollLeft)>5?setShowNextButton(!0):setShowNextButton(!1)}),[selectedStep]),(0,jsx_runtime.jsxs)("div",{lang:language,className:(0,classNames.Z)(Stepper_module_stepperContainer,customThemeClass),"data-testid":dataTestId,children:[showPreviousButton&&(0,jsx_runtime.jsx)("div",{className:(0,classNames.Z)(Stepper_module_scrollButton,Stepper_module_scrollButtonPrevious),"aria-hidden":"true",children:(0,jsx_runtime.jsx)("button",{type:"button",onClick:function onClick(){var amountToScroll=stepperRef.current.scrollWidth/stepsTotal;stepperRef.current.scrollLeft-=amountToScroll},tabIndex:-1,children:(0,jsx_runtime.jsx)(IconAngleLeft.IconAngleLeft,{size:"m"})})}),showNextButton&&(0,jsx_runtime.jsx)("div",{className:(0,classNames.Z)(Stepper_module_scrollButton,Stepper_module_scrollButtonNext),"aria-hidden":"true",children:(0,jsx_runtime.jsx)("button",{type:"button",onClick:function onClick(){var amountToScroll=stepperRef.current.scrollWidth/stepsTotal;stepperRef.current.scrollLeft+=amountToScroll},tabIndex:-1,children:(0,jsx_runtime.jsx)(IconAngleRight.IconAngleRight,{size:"m"})})}),(0,jsx_runtime.jsxs)("div",{onScroll:function onScroll(e){e.target.scrollLeft&&e.target.scrollLeft>5?setShowPreviousButton(!0):setShowPreviousButton(!1),e.target.scrollWidth-(e.target.parentNode.clientWidth+e.target.scrollLeft)>5?setShowNextButton(!0):setShowNextButton(!1)},ref:stepperRef,className:(0,classNames.Z)(className,Stepper_module_stepper,small&&Stepper_module_small),children:[(0,jsx_runtime.jsx)("div",{className:Stepper_module_line,"aria-hidden":!0,style:{width:"max( calc(100% - var(--hds-step-width)), calc(".concat(stepsTotal," * var(--hds-step-width) - var(--hds-step-width) ))")},children:steps.map((function(step,index){return index===steps.length-1?null:(0,jsx_runtime.jsx)("div",{style:{width:"calc( 100% / ".concat(stepsTotal-1,")")},className:steps[index+1].state===StepState.disabled?Stepper_module_disabledLine:Stepper_module_enabledLine},"".concat(step.label,"-").concat(index))}))}),steps.map((function(step,index){return(0,jsx_runtime.jsx)(Step,{ref:stepRefs.current[index],label:step.label,language,index,small,stepsTotal,selected:selectedStep===index,state:step.state,onStepClick:function onStepClick(event,stepIndex){stepIndex===selectedStep&&stepHeading&&stepHeadingRef.current.focus(),_onStepClick(event,stepIndex)},renderCustomStepCountLabel,renderCustomStateAriaLabel,dataTestId:"".concat(dataTestId,"-step-").concat(index)},"".concat(index,"-").concat(step.label))}))]}),stepHeading&&(0,jsx_runtime.jsx)("div",{tabIndex:-1,ref:stepHeadingRef,role:"heading","aria-level":stepHeadingAriaLevel,className:(0,classNames.Z)(Stepper_module_heading,headingClassName),children:renderCustomStepHeading?renderCustomStepHeading(selectedStep,stepsTotal,steps[selectedStep].label):getStepHeading(language,selectedStep,stepsTotal,steps[selectedStep].label)})]})};try{Stepper.displayName="Stepper",Stepper.__docgenInfo={description:"",displayName:"Stepper",props:{className:{defaultValue:null,description:"A custom className passed to stepper",name:"className",required:!1,type:{name:"string"}},dataTestId:{defaultValue:{value:"hds-stepper"},description:"Data test id of stepper",name:"dataTestId",required:!1,type:{name:"string"}},headingClassName:{defaultValue:null,description:"A custom class name for step heading",name:"headingClassName",required:!1,type:{name:"string"}},language:{defaultValue:{value:"fi"},description:"The language of the stepper",name:"language",required:!1,type:{name:"string"}},onStepClick:{defaultValue:null,description:"A callback function for custom action on step click",name:"onStepClick",required:!1,type:{name:"(event: MouseEvent, stepIndex: number) => void"}},renderCustomStateAriaLabel:{defaultValue:null,description:"A function for rendering a custom aria-label for step's state",name:"renderCustomStateAriaLabel",required:!1,type:{name:"(stepIndex: number, state: StepState) => string"}},renderCustomStepCountLabel:{defaultValue:null,description:"A function for rendering a custom step count label",name:"renderCustomStepCountLabel",required:!1,type:{name:"(stepIndex: number, totalNumberOfSteps: number) => string"}},renderCustomStepHeading:{defaultValue:null,description:"A function for rendering a custom step heading",name:"renderCustomStepHeading",required:!1,type:{name:"(stepIndex: number, totalNumberOfSteps: number, label: string) => string"}},selectedStep:{defaultValue:null,description:'The index of the selected step. Used to set the aria-current="step" attribute to the active step',name:"selectedStep",required:!1,type:{name:"number"}},small:{defaultValue:{value:"false"},description:"Boolean indicating small variant usage",name:"small",required:!1,type:{name:"boolean"}},stepHeading:{defaultValue:null,description:"A boolean indicating step heading variant usage",name:"stepHeading",required:!1,type:{name:"boolean"}},stepHeadingAriaLevel:{defaultValue:{value:"2"},description:"Step heading aria level",name:"stepHeadingAriaLevel",required:!1,type:{name:"number"}},steps:{defaultValue:null,description:"The steps of the stepper",name:"steps",required:!0,type:{name:"Steps"}},theme:{defaultValue:null,description:"Custom theme",name:"theme",required:!1,type:{name:"StepperCustomTheme"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/stepper/Stepper.tsx#Stepper"]={docgenInfo:Stepper.__docgenInfo,name:"Stepper",path:"src/components/stepper/Stepper.tsx#Stepper"})}catch(__react_docgen_typescript_loader_error){}var Button=__webpack_require__("./src/components/button/Button.tsx"),IconArrowLeft=__webpack_require__("./src/icons/IconArrowLeft.tsx"),IconArrowRight=__webpack_require__("./src/icons/IconArrowRight.tsx"),TextInput=__webpack_require__("./src/components/textInput/TextInput.tsx"),NumberInput=__webpack_require__("./src/components/numberInput/NumberInput.tsx"),Card=__webpack_require__("./src/components/card/Card.tsx"),ErrorSummary=__webpack_require__("./src/components/errorSummary/ErrorSummary.tsx"),FileInput=__webpack_require__("./src/components/fileInput/FileInput.tsx");const Stepper_stories={component:Stepper,title:"Components/Stepper",decorators:[function(storyFn){return(0,jsx_runtime.jsx)("div",{style:{maxWidth:"700px"},children:storyFn()})}],parameters:{storySource:{source:"import React, { useReducer, useRef } from 'react';\n\nimport { Stepper } from './Stepper';\nimport styles from './Stepper.module.scss';\nimport { Step, StepState } from './Step';\nimport { Button } from '../button';\nimport { IconArrowLeft, IconArrowRight } from '../../icons';\nimport { TextInput } from '../textInput';\nimport { NumberInput } from '../numberInput';\nimport { Card } from '../card';\nimport { ErrorSummary } from '../errorSummary';\nimport { FileInput } from '../fileInput/FileInput';\n\nexport default {\n component: Stepper,\n title: 'Components/Stepper',\n decorators: [(storyFn) =>
{storyFn()}
],\n parameters: {\n controls: { expanded: true },\n backgrounds: {\n default: 'white',\n values: [\n {\n name: 'white',\n value: 'white',\n },\n {\n name: 'gray',\n value: '#e5e5e5',\n },\n ],\n },\n },\n args: {},\n};\n\nconst commonReducer = (stepsTotal) => (state, action) => {\n switch (action.type) {\n case 'completeStep': {\n const activeStepIndex = action.payload === stepsTotal - 1 ? stepsTotal - 1 : action.payload + 1;\n return {\n activeStepIndex,\n steps: state.steps.map((step, index) => {\n if (index === action.payload && index !== stepsTotal - 1) {\n // current one but not last one\n return {\n state: StepState.completed,\n label: step.label,\n };\n }\n if (index === action.payload + 1) {\n // next one\n return {\n state: StepState.available,\n label: step.label,\n };\n }\n return step;\n }),\n };\n }\n case 'setActive': {\n return {\n activeStepIndex: action.payload,\n steps: state.steps.map((step, index) => {\n if (index === action.payload) {\n return {\n state: StepState.available,\n label: step.label,\n };\n }\n return step;\n }),\n };\n }\n default:\n throw new Error();\n }\n};\n\n// args is required for docs tab to show source code\n\nexport const Default = (args) => {\n const reducer = commonReducer(5);\n\n const initialState = {\n activeStepIndex: 0,\n steps: [\n {\n label: 'Step 1',\n state: StepState.available,\n },\n {\n label: 'Step 2',\n state: StepState.disabled,\n },\n {\n label: 'Step 3',\n state: StepState.disabled,\n },\n {\n label: 'Step 4 - longer text',\n state: StepState.disabled,\n },\n {\n label: 'Step 5',\n state: StepState.disabled,\n },\n ],\n };\n\n const [state, dispatch] = useReducer(reducer, initialState);\n\n const lastStep = state.activeStepIndex === state.steps.length - 1;\n\n return (\n
\n dispatch({ type: 'setActive', payload: stepIndex })}\n />\n\n \n dispatch({ type: 'setActive', payload: state.activeStepIndex - 1 })}\n style={{ height: 'fit-content', width: 'fit-content' }}\n iconLeft={}\n >\n Previous\n \n dispatch({ type: 'completeStep', payload: state.activeStepIndex })}\n style={{ height: 'fit-content', width: 'fit-content' }}\n iconRight={lastStep ? undefined : }\n >\n {lastStep ? 'Send' : 'Next'}\n \n
\n
\n );\n};\n\nDefault.parameters = {\n docs: {\n source: { type: 'dynamic' },\n },\n};\n\n// args is required for docs tab to show source code\n\nexport const Small = (args) => {\n const reducer = commonReducer(5);\n\n const initialState = {\n activeStepIndex: 0,\n steps: [\n {\n label: 'Step 1',\n state: StepState.available,\n },\n {\n label: 'Step 2',\n state: StepState.disabled,\n },\n {\n label: 'Step 3',\n state: StepState.disabled,\n },\n {\n label: 'Step 4 - longer text',\n state: StepState.disabled,\n },\n {\n label: 'Step 5',\n state: StepState.disabled,\n },\n ],\n };\n\n const [state, dispatch] = useReducer(reducer, initialState);\n\n const lastStep = state.activeStepIndex === state.steps.length - 1;\n\n return (\n
\n dispatch({ type: 'setActive', payload: stepIndex })}\n />\n\n \n dispatch({ type: 'setActive', payload: state.activeStepIndex - 1 })}\n style={{ height: 'fit-content', width: 'fit-content' }}\n iconLeft={}\n >\n Previous\n \n dispatch({ type: 'completeStep', payload: state.activeStepIndex })}\n style={{ height: 'fit-content', width: 'fit-content' }}\n iconRight={lastStep ? undefined : }\n >\n {lastStep ? 'Send' : 'Next'}\n \n
\n
\n );\n};\n\n// args is required for docs tab to show source code\n\nexport const WithStepHeading = (args) => {\n const reducer = commonReducer(5);\n\n const initialState = {\n activeStepIndex: 0,\n steps: [\n {\n label: 'Step 1 - longer text',\n state: StepState.available,\n },\n {\n label: 'Step 2',\n state: StepState.disabled,\n },\n {\n label: 'Step 3',\n state: StepState.disabled,\n },\n {\n label: 'Step 4',\n state: StepState.disabled,\n },\n {\n label: 'Step 5',\n state: StepState.disabled,\n },\n ],\n };\n\n const [state, dispatch] = useReducer(reducer, initialState);\n\n const lastStep = state.activeStepIndex === state.steps.length - 1;\n\n return (\n
\n dispatch({ type: 'setActive', payload: stepIndex })}\n />\n\n \n dispatch({ type: 'setActive', payload: state.activeStepIndex - 1 })}\n style={{ height: 'fit-content', width: 'fit-content' }}\n iconLeft={}\n >\n Previous\n \n dispatch({ type: 'completeStep', payload: state.activeStepIndex })}\n style={{ height: 'fit-content', width: 'fit-content' }}\n iconRight={lastStep ? undefined : }\n >\n {lastStep ? 'Send' : 'Next'}\n \n
\n
\n );\n};\n\n// args is required for docs tab to show source code\n\nexport const Overflow = (args) => {\n const reducer = commonReducer(12);\n\n const initialState = {\n activeStepIndex: 0,\n steps: [\n {\n state: StepState.available,\n label: 'Step 1 - longer text',\n },\n {\n state: StepState.disabled,\n label: 'Step 2',\n },\n {\n state: StepState.disabled,\n label: 'Step 3',\n },\n {\n state: StepState.disabled,\n label: 'Step 4',\n },\n {\n state: StepState.disabled,\n label: 'Step 5',\n },\n {\n state: StepState.disabled,\n label: 'Step 6',\n },\n {\n state: StepState.disabled,\n label: 'Step 7',\n },\n {\n state: StepState.disabled,\n label: 'Step 8',\n },\n {\n state: StepState.disabled,\n label: 'Step 9',\n },\n {\n state: StepState.disabled,\n label: 'Step 10',\n },\n {\n state: StepState.disabled,\n label: 'Step 11',\n },\n {\n state: StepState.disabled,\n label: 'Step 12',\n },\n ],\n };\n\n const [state, dispatch] = useReducer(reducer, initialState);\n\n const lastStep = state.activeStepIndex === state.steps.length - 1;\n\n return (\n
\n dispatch({ type: 'setActive', payload: stepIndex })}\n />\n \n dispatch({ type: 'setActive', payload: state.activeStepIndex - 1 })}\n style={{ height: 'fit-content', width: 'fit-content' }}\n iconLeft={}\n >\n Previous\n \n dispatch({ type: 'completeStep', payload: state.activeStepIndex })}\n style={{ height: 'fit-content', width: 'fit-content' }}\n iconRight={lastStep ? undefined : }\n >\n {lastStep ? 'Send' : 'Next'}\n \n
\n
\n );\n};\n\n// args is required for docs tab to show source code\n\nexport const WithCustomTheme = (args) => {\n const reducer = commonReducer(5);\n\n const initialState = {\n activeStepIndex: 0,\n steps: [\n {\n label: 'Step 1 - longer text',\n state: StepState.available,\n },\n {\n label: 'Step 2',\n state: StepState.disabled,\n },\n {\n label: 'Step 3',\n state: StepState.disabled,\n },\n {\n label: 'Step 4',\n state: StepState.disabled,\n },\n {\n label: 'Step 5',\n state: StepState.disabled,\n },\n ],\n };\n\n const [state, dispatch] = useReducer(reducer, initialState);\n\n const lastStep = state.activeStepIndex === state.steps.length - 1;\n\n const theme = {\n '--hds-stepper-color': 'var(--color-black-90)',\n '--hds-step-content-color': 'var(--color-black-90)',\n '--hds-stepper-background-color': 'var(--color-black-10)',\n '--hds-step-background-color': 'var(--color-black-5)',\n '--hds-stepper-focus-border-color': 'var(--color-black-90)',\n '--hds-stepper-disabled-color': 'var(--color-black-30)',\n '--hds-not-selected-step-label-color': 'var(--color-black-90)',\n };\n\n return (\n
\n dispatch({ type: 'setActive', payload: stepIndex })}\n />\n \n dispatch({ type: 'setActive', payload: state.activeStepIndex - 1 })}\n style={{ height: 'fit-content', width: 'fit-content' }}\n iconLeft={}\n >\n Previous\n \n dispatch({ type: 'completeStep', payload: state.activeStepIndex })}\n style={{ height: 'fit-content', width: 'fit-content' }}\n iconRight={lastStep ? undefined : }\n >\n {lastStep ? 'Send' : 'Next'}\n \n
\n
\n );\n};\n\nWithCustomTheme.parameters = {\n backgrounds: { default: 'gray' },\n};\n\n// args is required for docs tab to show source code\n\nexport const SimpleFormExample = (args) => {\n const initialState = {\n showErrorSummary: false,\n activeStepIndex: 0,\n steps: [\n {\n state: StepState.available,\n label: 'First name',\n },\n {\n state: StepState.disabled,\n label: 'Last name',\n },\n {\n state: StepState.disabled,\n label: 'Age',\n },\n {\n state: StepState.disabled,\n label: 'Files',\n },\n {\n state: StepState.disabled,\n label: 'Review and send',\n },\n ],\n fields: {\n firstName: {\n value: '',\n visited: false,\n },\n lastName: {\n value: '',\n visited: false,\n },\n age: {\n value: undefined,\n visited: false,\n },\n files: {\n value: null,\n visited: false,\n },\n },\n };\n const lastStep = initialState.steps.length - 1;\n\n const activeStepIsValid = (state) => {\n if (state.activeStepIndex === 0) {\n // first name\n return state.fields.firstName.value && state.fields.firstName.value.length > 0;\n }\n if (state.activeStepIndex === 1) {\n // last name\n return state.fields.lastName.value && state.fields.lastName.value.length > 0;\n }\n\n if (state.activeStepIndex === 2) {\n // age\n return state.fields.age.value && state.fields.age.value.length > 0;\n }\n\n if (state.activeStepIndex === 3) {\n // files\n return state.fields.files.value && state.fields.files.value.length > 0;\n }\n\n return state.activeStepIndex === 4;\n };\n\n const weAreInLastAvailableStep = (state) => {\n let indexOfLastNonDisabledStep = 0;\n state.steps.forEach((step, index) => {\n if (step.state !== StepState.disabled && index > indexOfLastNonDisabledStep) {\n indexOfLastNonDisabledStep = index;\n }\n });\n\n return state.activeStepIndex === indexOfLastNonDisabledStep;\n };\n\n const reducer = (state, action) => {\n switch (action.type) {\n case 'changeField': {\n if (action.newValue.length === 0) {\n return {\n showErrorSummary: state.showErrorSummary,\n activeStepIndex: state.activeStepIndex,\n steps: state.steps,\n fields: {\n ...state.fields,\n [action.fieldName]: {\n value: action.newValue,\n visited: true,\n },\n },\n };\n }\n\n return {\n showErrorSummary: false,\n activeStepIndex: state.activeStepIndex,\n steps: state.steps.map((step, index) => {\n if (index === state.activeStepIndex) {\n return {\n state: StepState.completed,\n label: step.label,\n };\n }\n return step;\n }),\n fields: {\n ...state.fields,\n [action.fieldName]: {\n value: action.newValue,\n visited: true,\n },\n },\n };\n }\n case 'completeStep': {\n if (!activeStepIsValid(state)) {\n return {\n showErrorSummary: true,\n activeStepIndex: state.activeStepIndex,\n steps: state.steps,\n fields: {\n ...state.fields,\n },\n };\n }\n const activeStepIndex = action.payload === lastStep ? lastStep : action.payload + 1;\n return {\n showErrorSummary: state.showErrorSummary,\n activeStepIndex,\n steps: state.steps.map((step, index) => {\n if (index === action.payload && index !== lastStep) {\n // current one but not last one\n return {\n state: StepState.completed,\n label: step.label,\n };\n }\n if (index === action.payload + 1) {\n // next one\n return {\n state: StepState.available,\n label: step.label,\n };\n }\n return step;\n }),\n fields: {\n ...state.fields,\n },\n };\n }\n case 'setActive': {\n if (!activeStepIsValid(state) && !weAreInLastAvailableStep(state)) {\n return {\n showErrorSummary: true,\n activeStepIndex: state.activeStepIndex,\n steps: state.steps,\n fields: {\n ...state.fields,\n },\n };\n }\n\n return {\n showErrorSummary: false,\n activeStepIndex: action.payload,\n steps: state.steps.map((step, index) => {\n if (index === action.payload) {\n return {\n state: StepState.available,\n label: step.label,\n };\n }\n if (index === state.activeStepIndex && activeStepIsValid(state)) {\n return {\n state: StepState.completed,\n label: step.label,\n };\n }\n return step;\n }),\n fields: {\n ...state.fields,\n },\n };\n }\n default:\n throw new Error();\n }\n };\n\n const [state, dispatch] = useReducer(reducer, initialState);\n\n const isLastStep = state.activeStepIndex === state.steps.length - 1;\n const errorRef = useRef(null);\n\n return (\n
\n

Simple form example

\n {\n if (state.showErrorSummary && stepIndex !== state.activeStepIndex) {\n // focus to error summary label\n errorRef.current.children[0].children[0].focus();\n }\n dispatch({ type: 'setActive', payload: stepIndex });\n }}\n />\n {state.showErrorSummary && (\n
\n \n \n \n
\n )}\n {[0, 1, 2, 3].includes(state.activeStepIndex) && (\n
\n {state.activeStepIndex === 0 && (\n \n dispatch({ type: 'changeField', fieldName: 'firstName', newValue: event.target.value })\n }\n />\n )}\n {state.activeStepIndex === 1 && (\n \n dispatch({ type: 'changeField', fieldName: 'lastName', newValue: event.target.value })\n }\n />\n )}\n {state.activeStepIndex === 2 && (\n dispatch({ type: 'changeField', fieldName: 'age', newValue: event.target.value })}\n />\n )}\n {state.activeStepIndex === 3 && (\n dispatch({ type: 'changeField', fieldName: 'files', newValue: event })}\n />\n )}\n
\n )}\n {state.activeStepIndex === 4 && (\n
\n \n

First name: {state.fields.firstName.value}

\n

Last name: {state.fields.lastName.value}

\n

Age: {state.fields.age.value}

\n

Files: {state.fields.files.value.map((file) => file.name).join(', ')}

\n \n
\n )}\n\n \n {\n if (state.showErrorSummary) {\n // focus to error summary label\n errorRef.current.children[0].children[0].focus();\n }\n dispatch({ type: 'setActive', payload: state.activeStepIndex - 1 });\n }}\n style={{ height: 'fit-content', width: 'fit-content' }}\n iconLeft={}\n >\n Previous\n \n {\n if (state.showErrorSummary) {\n // focus to error summary label\n errorRef.current.children[0].children[0].focus();\n }\n dispatch({ type: 'completeStep', payload: state.activeStepIndex });\n }}\n style={{ height: 'fit-content', width: 'fit-content' }}\n iconRight={isLastStep ? undefined : }\n >\n {isLastStep ? 'Send' : 'Next'}\n \n
\n \n );\n};\n\n// args is required for docs tab to show source code\n\nexport const States = (args) => {\n return (\n
\n \n \n \n \n \n \n \n \n \n
\n

Small variant:

\n \n
\n
\n
\n );\n};\n\nexport const Playground = (args) => {\n const reducer = commonReducer(5);\n\n const [state, dispatch] = useReducer(reducer, {\n activeStepIndex: args.activeStepIndex,\n steps: [\n {\n label: 'Step 1',\n state: StepState.available,\n },\n {\n label: 'Step 2',\n state: StepState.disabled,\n },\n {\n label: 'Step 3',\n state: StepState.disabled,\n },\n {\n label: 'Step 4',\n state: StepState.disabled,\n },\n {\n label: 'Step 5',\n state: StepState.disabled,\n },\n ],\n });\n\n const lastStep = state.activeStepIndex === state.steps.length - 1;\n\n const theme = {\n '--hds-stepper-color': args.stepperColor,\n '--hds-step-content-color': args.stepperContentColor,\n '--hds-stepper-background-color': args.stepperBackgroundColor,\n '--hds-stepper-focus-border-color': args.stepperFocusBorderColor,\n '--hds-stepper-disabled-color': args.stepperDisabledColor,\n '--hds-step-background-color': args.stepBackgroundColor,\n '--hds-not-selected-step-label-color': args.notSelectedStepLabelColor,\n };\n\n return (\n
\n dispatch({ type: 'setActive', payload: stepIndex })}\n />\n \n dispatch({ type: 'setActive', payload: state.activeStepIndex - 1 })}\n style={{ height: 'fit-content', width: 'fit-content' }}\n iconLeft={}\n >\n Previous\n \n dispatch({ type: 'completeStep', payload: state.activeStepIndex })}\n style={{ height: 'fit-content', width: 'fit-content' }}\n iconRight={lastStep ? undefined : }\n >\n {lastStep ? 'Send' : 'Next'}\n \n
\n
\n );\n};\n\nPlayground.parameters = {\n loki: { skip: true },\n};\n\nPlayground.args = {\n stepperColor: '#0000bf',\n stepperContentColor: '#0000bf',\n stepperBackgroundColor: '#ffffff',\n stepperFocusBorderColor: '#0072c6',\n stepperDisabledColor: '#cccccc',\n stepBackgroundColor: '#ffffff',\n notSelectedStepLabelColor: '#0000bf',\n small: false,\n stepHeading: false,\n activeStepIndex: 0,\n};\n\nPlayground.argTypes = {\n stepperColor: { control: { type: 'color' } },\n stepperContentColor: { control: { type: 'color' } },\n stepperBackgroundColor: { control: { type: 'color' } },\n stepperFocusBorderColor: { control: { type: 'color' } },\n stepperDisabledColor: { control: { type: 'color' } },\n stepBackgroundColor: { control: { type: 'color' } },\n notSelectedStepLabelColor: { control: { type: 'color' } },\n activeStepIndex: { control: { type: 'number', min: 0, max: 4, step: 1 } },\n};\n",locationsMap:{default:{startLoc:{col:23,line:83},endLoc:{col:1,line:155},startBody:{col:23,line:83},endBody:{col:1,line:155}},small:{startLoc:{col:21,line:165},endLoc:{col:1,line:237},startBody:{col:21,line:165},endBody:{col:1,line:237}},"with-step-heading":{startLoc:{col:31,line:241},endLoc:{col:1,line:315},startBody:{col:31,line:241},endBody:{col:1,line:315}},overflow:{startLoc:{col:24,line:319},endLoc:{col:1,line:418},startBody:{col:24,line:319},endBody:{col:1,line:418}},"with-custom-theme":{startLoc:{col:31,line:422},endLoc:{col:1,line:506},startBody:{col:31,line:422},endBody:{col:1,line:506}},"simple-form-example":{startLoc:{col:33,line:514},endLoc:{col:1,line:891},startBody:{col:33,line:514},endBody:{col:1,line:891}},states:{startLoc:{col:22,line:895},endLoc:{col:1,line:938},startBody:{col:22,line:895},endBody:{col:1,line:938}},playground:{startLoc:{col:26,line:940},endLoc:{col:1,line:1024},startBody:{col:26,line:940},endBody:{col:1,line:1024}}}},controls:{expanded:!0},backgrounds:{default:"white",values:[{name:"white",value:"white"},{name:"gray",value:"#e5e5e5"}]}},args:{}};var commonReducer=function commonReducer(stepsTotal){return function(state,action){switch(action.type){case"completeStep":return{activeStepIndex:action.payload===stepsTotal-1?stepsTotal-1:action.payload+1,steps:state.steps.map((function(step,index){return index===action.payload&&index!==stepsTotal-1?{state:StepState.completed,label:step.label}:index===action.payload+1?{state:StepState.available,label:step.label}:step}))};case"setActive":return{activeStepIndex:action.payload,steps:state.steps.map((function(step,index){return index===action.payload?{state:StepState.available,label:step.label}:step}))};default:throw new Error}}},Default=function Default(args){var reducer=commonReducer(5),initialState={activeStepIndex:0,steps:[{label:"Step 1",state:StepState.available},{label:"Step 2",state:StepState.disabled},{label:"Step 3",state:StepState.disabled},{label:"Step 4 - longer text",state:StepState.disabled},{label:"Step 5",state:StepState.disabled}]},_useReducer=(0,react.useReducer)(reducer,initialState),_useReducer2=(0,slicedToArray.Z)(_useReducer,2),state=_useReducer2[0],dispatch=_useReducer2[1],lastStep=state.activeStepIndex===state.steps.length-1;return(0,jsx_runtime.jsxs)("div",{children:[(0,jsx_runtime.jsx)(Stepper,{className:"stepper-margin",steps:state.steps,language:"en",selectedStep:state.activeStepIndex,onStepClick:function onStepClick(event,stepIndex){return dispatch({type:"setActive",payload:stepIndex})}}),(0,jsx_runtime.jsxs)("div",{style:{height:"300px",display:"flex",justifyContent:"flex-start",alignItems:"flex-end",gap:"24px"},children:[(0,jsx_runtime.jsx)(Button.z,{disabled:0===state.activeStepIndex,variant:"secondary",onClick:function onClick(){return dispatch({type:"setActive",payload:state.activeStepIndex-1})},style:{height:"fit-content",width:"fit-content"},iconLeft:(0,jsx_runtime.jsx)(IconArrowLeft.IconArrowLeft,{}),children:"Previous"}),(0,jsx_runtime.jsx)(Button.z,{variant:lastStep?"primary":"secondary",onClick:function onClick(){return dispatch({type:"completeStep",payload:state.activeStepIndex})},style:{height:"fit-content",width:"fit-content"},iconRight:lastStep?void 0:(0,jsx_runtime.jsx)(IconArrowRight.IconArrowRight,{}),children:lastStep?"Send":"Next"})]})]})};Default.parameters={docs:{source:{type:"dynamic"}}};var Small=function Small(args){var reducer=commonReducer(5),initialState={activeStepIndex:0,steps:[{label:"Step 1",state:StepState.available},{label:"Step 2",state:StepState.disabled},{label:"Step 3",state:StepState.disabled},{label:"Step 4 - longer text",state:StepState.disabled},{label:"Step 5",state:StepState.disabled}]},_useReducer3=(0,react.useReducer)(reducer,initialState),_useReducer4=(0,slicedToArray.Z)(_useReducer3,2),state=_useReducer4[0],dispatch=_useReducer4[1],lastStep=state.activeStepIndex===state.steps.length-1;return(0,jsx_runtime.jsxs)("div",{className:"stepper-small",children:[(0,jsx_runtime.jsx)(Stepper,{steps:state.steps,language:"en",small:!0,selectedStep:state.activeStepIndex,onStepClick:function onStepClick(event,stepIndex){return dispatch({type:"setActive",payload:stepIndex})}}),(0,jsx_runtime.jsxs)("div",{style:{height:"300px",display:"flex",justifyContent:"flex-start",alignItems:"flex-end",gap:"24px"},children:[(0,jsx_runtime.jsx)(Button.z,{disabled:0===state.activeStepIndex,variant:"secondary",onClick:function onClick(){return dispatch({type:"setActive",payload:state.activeStepIndex-1})},style:{height:"fit-content",width:"fit-content"},iconLeft:(0,jsx_runtime.jsx)(IconArrowLeft.IconArrowLeft,{}),children:"Previous"}),(0,jsx_runtime.jsx)(Button.z,{variant:lastStep?"primary":"secondary",onClick:function onClick(){return dispatch({type:"completeStep",payload:state.activeStepIndex})},style:{height:"fit-content",width:"fit-content"},iconRight:lastStep?void 0:(0,jsx_runtime.jsx)(IconArrowRight.IconArrowRight,{}),children:lastStep?"Send":"Next"})]})]})},WithStepHeading=function WithStepHeading(args){var reducer=commonReducer(5),initialState={activeStepIndex:0,steps:[{label:"Step 1 - longer text",state:StepState.available},{label:"Step 2",state:StepState.disabled},{label:"Step 3",state:StepState.disabled},{label:"Step 4",state:StepState.disabled},{label:"Step 5",state:StepState.disabled}]},_useReducer5=(0,react.useReducer)(reducer,initialState),_useReducer6=(0,slicedToArray.Z)(_useReducer5,2),state=_useReducer6[0],dispatch=_useReducer6[1],lastStep=state.activeStepIndex===state.steps.length-1;return(0,jsx_runtime.jsxs)("div",{children:[(0,jsx_runtime.jsx)(Stepper,{headingClassName:"stepper-heading",steps:state.steps,language:"en",stepHeading:!0,selectedStep:state.activeStepIndex,onStepClick:function onStepClick(event,stepIndex){return dispatch({type:"setActive",payload:stepIndex})}}),(0,jsx_runtime.jsxs)("div",{style:{height:"300px",display:"flex",justifyContent:"flex-start",alignItems:"flex-end",gap:"24px",marginLeft:"10px"},children:[(0,jsx_runtime.jsx)(Button.z,{disabled:0===state.activeStepIndex,variant:"secondary",onClick:function onClick(){return dispatch({type:"setActive",payload:state.activeStepIndex-1})},style:{height:"fit-content",width:"fit-content"},iconLeft:(0,jsx_runtime.jsx)(IconArrowLeft.IconArrowLeft,{}),children:"Previous"}),(0,jsx_runtime.jsx)(Button.z,{variant:lastStep?"primary":"secondary",onClick:function onClick(){return dispatch({type:"completeStep",payload:state.activeStepIndex})},style:{height:"fit-content",width:"fit-content"},iconRight:lastStep?void 0:(0,jsx_runtime.jsx)(IconArrowRight.IconArrowRight,{}),children:lastStep?"Send":"Next"})]})]})},Overflow=function Overflow(args){var reducer=commonReducer(12),initialState={activeStepIndex:0,steps:[{state:StepState.available,label:"Step 1 - longer text"},{state:StepState.disabled,label:"Step 2"},{state:StepState.disabled,label:"Step 3"},{state:StepState.disabled,label:"Step 4"},{state:StepState.disabled,label:"Step 5"},{state:StepState.disabled,label:"Step 6"},{state:StepState.disabled,label:"Step 7"},{state:StepState.disabled,label:"Step 8"},{state:StepState.disabled,label:"Step 9"},{state:StepState.disabled,label:"Step 10"},{state:StepState.disabled,label:"Step 11"},{state:StepState.disabled,label:"Step 12"}]},_useReducer7=(0,react.useReducer)(reducer,initialState),_useReducer8=(0,slicedToArray.Z)(_useReducer7,2),state=_useReducer8[0],dispatch=_useReducer8[1],lastStep=state.activeStepIndex===state.steps.length-1;return(0,jsx_runtime.jsxs)("div",{style:{maxWidth:"400px"},children:[(0,jsx_runtime.jsx)(Stepper,{steps:state.steps,language:"en",selectedStep:state.activeStepIndex,onStepClick:function onStepClick(event,stepIndex){return dispatch({type:"setActive",payload:stepIndex})}}),(0,jsx_runtime.jsxs)("div",{style:{height:"300px",display:"flex",justifyContent:"flex-start",alignItems:"flex-end",gap:"24px",marginLeft:"10px"},children:[(0,jsx_runtime.jsx)(Button.z,{disabled:0===state.activeStepIndex,variant:"secondary",onClick:function onClick(){return dispatch({type:"setActive",payload:state.activeStepIndex-1})},style:{height:"fit-content",width:"fit-content"},iconLeft:(0,jsx_runtime.jsx)(IconArrowLeft.IconArrowLeft,{}),children:"Previous"}),(0,jsx_runtime.jsx)(Button.z,{variant:lastStep?"primary":"secondary",onClick:function onClick(){return dispatch({type:"completeStep",payload:state.activeStepIndex})},style:{height:"fit-content",width:"fit-content"},iconRight:lastStep?void 0:(0,jsx_runtime.jsx)(IconArrowRight.IconArrowRight,{}),children:lastStep?"Send":"Next"})]})]})},WithCustomTheme=function WithCustomTheme(args){var reducer=commonReducer(5),initialState={activeStepIndex:0,steps:[{label:"Step 1 - longer text",state:StepState.available},{label:"Step 2",state:StepState.disabled},{label:"Step 3",state:StepState.disabled},{label:"Step 4",state:StepState.disabled},{label:"Step 5",state:StepState.disabled}]},_useReducer9=(0,react.useReducer)(reducer,initialState),_useReducer10=(0,slicedToArray.Z)(_useReducer9,2),state=_useReducer10[0],dispatch=_useReducer10[1],lastStep=state.activeStepIndex===state.steps.length-1;return(0,jsx_runtime.jsxs)("div",{style:{backgroundColor:"var(--color-black-10)"},children:[(0,jsx_runtime.jsx)(Stepper,{theme:{"--hds-stepper-color":"var(--color-black-90)","--hds-step-content-color":"var(--color-black-90)","--hds-stepper-background-color":"var(--color-black-10)","--hds-step-background-color":"var(--color-black-5)","--hds-stepper-focus-border-color":"var(--color-black-90)","--hds-stepper-disabled-color":"var(--color-black-30)","--hds-not-selected-step-label-color":"var(--color-black-90)"},steps:state.steps,language:"en",selectedStep:state.activeStepIndex,onStepClick:function onStepClick(event,stepIndex){return dispatch({type:"setActive",payload:stepIndex})}}),(0,jsx_runtime.jsxs)("div",{style:{height:"300px",display:"flex",justifyContent:"flex-start",alignItems:"flex-end",gap:"24px",marginLeft:"10px"},children:[(0,jsx_runtime.jsx)(Button.z,{theme:"black",disabled:0===state.activeStepIndex,variant:"secondary",onClick:function onClick(){return dispatch({type:"setActive",payload:state.activeStepIndex-1})},style:{height:"fit-content",width:"fit-content"},iconLeft:(0,jsx_runtime.jsx)(IconArrowLeft.IconArrowLeft,{}),children:"Previous"}),(0,jsx_runtime.jsx)(Button.z,{theme:"black",variant:lastStep?"primary":"secondary",onClick:function onClick(){return dispatch({type:"completeStep",payload:state.activeStepIndex})},style:{height:"fit-content",width:"fit-content"},iconRight:lastStep?void 0:(0,jsx_runtime.jsx)(IconArrowRight.IconArrowRight,{}),children:lastStep?"Send":"Next"})]})]})};WithCustomTheme.parameters={backgrounds:{default:"gray"}};var SimpleFormExample=function SimpleFormExample(args){var initialState={showErrorSummary:!1,activeStepIndex:0,steps:[{state:StepState.available,label:"First name"},{state:StepState.disabled,label:"Last name"},{state:StepState.disabled,label:"Age"},{state:StepState.disabled,label:"Files"},{state:StepState.disabled,label:"Review and send"}],fields:{firstName:{value:"",visited:!1},lastName:{value:"",visited:!1},age:{value:void 0,visited:!1},files:{value:null,visited:!1}}},lastStep=initialState.steps.length-1,activeStepIsValid=function activeStepIsValid(state){return 0===state.activeStepIndex?state.fields.firstName.value&&state.fields.firstName.value.length>0:1===state.activeStepIndex?state.fields.lastName.value&&state.fields.lastName.value.length>0:2===state.activeStepIndex?state.fields.age.value&&state.fields.age.value.length>0:3===state.activeStepIndex?state.fields.files.value&&state.fields.files.value.length>0:4===state.activeStepIndex},_useReducer11=(0,react.useReducer)((function reducer(state,action){switch(action.type){case"changeField":return 0===action.newValue.length?{showErrorSummary:state.showErrorSummary,activeStepIndex:state.activeStepIndex,steps:state.steps,fields:(0,objectSpread2.Z)((0,objectSpread2.Z)({},state.fields),{},(0,defineProperty.Z)({},action.fieldName,{value:action.newValue,visited:!0}))}:{showErrorSummary:!1,activeStepIndex:state.activeStepIndex,steps:state.steps.map((function(step,index){return index===state.activeStepIndex?{state:StepState.completed,label:step.label}:step})),fields:(0,objectSpread2.Z)((0,objectSpread2.Z)({},state.fields),{},(0,defineProperty.Z)({},action.fieldName,{value:action.newValue,visited:!0}))};case"completeStep":if(!activeStepIsValid(state))return{showErrorSummary:!0,activeStepIndex:state.activeStepIndex,steps:state.steps,fields:(0,objectSpread2.Z)({},state.fields)};var activeStepIndex=action.payload===lastStep?lastStep:action.payload+1;return{showErrorSummary:state.showErrorSummary,activeStepIndex,steps:state.steps.map((function(step,index){return index===action.payload&&index!==lastStep?{state:StepState.completed,label:step.label}:index===action.payload+1?{state:StepState.available,label:step.label}:step})),fields:(0,objectSpread2.Z)({},state.fields)};case"setActive":return activeStepIsValid(state)||function weAreInLastAvailableStep(state){var indexOfLastNonDisabledStep=0;return state.steps.forEach((function(step,index){step.state!==StepState.disabled&&index>indexOfLastNonDisabledStep&&(indexOfLastNonDisabledStep=index)})),state.activeStepIndex===indexOfLastNonDisabledStep}(state)?{showErrorSummary:!1,activeStepIndex:action.payload,steps:state.steps.map((function(step,index){return index===action.payload?{state:StepState.available,label:step.label}:index===state.activeStepIndex&&activeStepIsValid(state)?{state:StepState.completed,label:step.label}:step})),fields:(0,objectSpread2.Z)({},state.fields)}:{showErrorSummary:!0,activeStepIndex:state.activeStepIndex,steps:state.steps,fields:(0,objectSpread2.Z)({},state.fields)};default:throw new Error}}),initialState),_useReducer12=(0,slicedToArray.Z)(_useReducer11,2),state=_useReducer12[0],dispatch=_useReducer12[1],isLastStep=state.activeStepIndex===state.steps.length-1,errorRef=(0,react.useRef)(null);return(0,jsx_runtime.jsxs)("form",{children:[(0,jsx_runtime.jsx)("h1",{style:{marginTop:"0",fontSize:"52px",lineHeight:"62px"},children:"Simple form example"}),(0,jsx_runtime.jsx)(Stepper,{className:"stepper-form-validation",steps:state.steps,language:"en",stepHeading:!0,selectedStep:state.activeStepIndex,onStepClick:function onStepClick(event,stepIndex){state.showErrorSummary&&stepIndex!==state.activeStepIndex&&errorRef.current.children[0].children[0].focus(),dispatch({type:"setActive",payload:stepIndex})}}),state.showErrorSummary&&(0,jsx_runtime.jsx)("div",{style:{marginTop:"var(--spacing-l)"},children:(0,jsx_runtime.jsx)(ErrorSummary.X,{ref:errorRef,autofocus:!0,label:"Form contains following errors",children:(0,jsx_runtime.jsxs)("ul",{children:[0===state.activeStepIndex&&(0,jsx_runtime.jsxs)("li",{children:["Error 1: ",(0,jsx_runtime.jsx)("a",{href:"#firstName",children:"Please enter your first name"})]}),1===state.activeStepIndex&&(0,jsx_runtime.jsxs)("li",{children:["Error 1: ",(0,jsx_runtime.jsx)("a",{href:"#lastName",children:"Please enter your last name"})]}),2===state.activeStepIndex&&(0,jsx_runtime.jsxs)("li",{children:["Error 1: ",(0,jsx_runtime.jsx)("a",{href:"#age",children:"Please enter your age"})]}),3===state.activeStepIndex&&(0,jsx_runtime.jsxs)("li",{children:["Error 1: ",(0,jsx_runtime.jsx)("a",{href:"#files",children:"Please enter a file or files"})]})]})})}),[0,1,2,3].includes(state.activeStepIndex)&&(0,jsx_runtime.jsxs)("div",{children:[0===state.activeStepIndex&&(0,jsx_runtime.jsx)(TextInput.o,{style:{width:"300px",paddingTop:"var(--spacing-l)"},required:!0,id:"firstName",label:"First name",invalid:0===state.fields.firstName.value.length&&!0===state.fields.firstName.visited,errorText:0===state.fields.firstName.value.length&&!0===state.fields.firstName.visited&&"Please enter your first name",value:state.fields.firstName.value,onChange:function onChange(event){return dispatch({type:"changeField",fieldName:"firstName",newValue:event.target.value})}}),1===state.activeStepIndex&&(0,jsx_runtime.jsx)(TextInput.o,{style:{width:"300px",paddingTop:"var(--spacing-l)"},required:!0,id:"lastName",label:"Last name",invalid:0===state.fields.lastName.value.length&&!0===state.fields.lastName.visited,errorText:0===state.fields.lastName.value.length&&!0===state.fields.lastName.visited&&"Please enter your last name",value:state.fields.lastName.value,onChange:function onChange(event){return dispatch({type:"changeField",fieldName:"lastName",newValue:event.target.value})}}),2===state.activeStepIndex&&(0,jsx_runtime.jsx)(NumberInput.Y,{style:{width:"300px",paddingTop:"var(--spacing-l)"},required:!0,id:"age",label:"Age",invalid:(!state.fields.age.value||0===state.fields.age.value.length)&&!0===state.fields.age.visited,errorText:(!state.fields.age.value||0===state.fields.age.value.length)&&!0===state.fields.age.visited&&"Please enter your age",value:state.fields.age.value,onChange:function onChange(event){return dispatch({type:"changeField",fieldName:"age",newValue:event.target.value})}}),3===state.activeStepIndex&&(0,jsx_runtime.jsx)(FileInput.S,{multiple:!0,label:"Select file(s)",accept:".png,.jpg",defaultValue:state.fields.files.value||null,language:"en",invalid:(!state.fields.files.value||0===state.fields.files.value.length)&&!0===state.fields.files.visited,errorText:(!state.fields.age.value||0===state.fields.age.value.length)&&!0===state.fields.age.visited&&"Please enter your age",onChange:function onChange(event){return dispatch({type:"changeField",fieldName:"files",newValue:event})}})]}),4===state.activeStepIndex&&(0,jsx_runtime.jsx)("div",{style:{marginTop:"var(--spacing-l)",marginBottom:"var(--spacing-2-xl)"},children:(0,jsx_runtime.jsxs)(Card.Z,{className:"stepper-card",border:!0,heading:"Review your basic information",headingAriaLevel:3,children:[(0,jsx_runtime.jsxs)("p",{style:{margin:0},children:["First name: ",state.fields.firstName.value]}),(0,jsx_runtime.jsxs)("p",{style:{margin:0},children:["Last name: ",state.fields.lastName.value]}),(0,jsx_runtime.jsxs)("p",{style:{margin:0},children:["Age: ",state.fields.age.value]}),(0,jsx_runtime.jsxs)("p",{style:{margin:0},children:["Files: ",state.fields.files.value.map((function(file){return file.name})).join(", ")]})]})}),(0,jsx_runtime.jsxs)("div",{style:{height:"140px",display:"flex",justifyContent:"flex-start",alignItems:"flex-start",gap:"24px",marginTop:"var(--spacing-xl"},children:[(0,jsx_runtime.jsx)(Button.z,{disabled:0===state.activeStepIndex,variant:"secondary",onClick:function onClick(){state.showErrorSummary&&errorRef.current.children[0].children[0].focus(),dispatch({type:"setActive",payload:state.activeStepIndex-1})},style:{height:"fit-content",width:"fit-content"},iconLeft:(0,jsx_runtime.jsx)(IconArrowLeft.IconArrowLeft,{}),children:"Previous"}),(0,jsx_runtime.jsx)(Button.z,{variant:isLastStep?"primary":"secondary",onClick:function onClick(){state.showErrorSummary&&errorRef.current.children[0].children[0].focus(),dispatch({type:"completeStep",payload:state.activeStepIndex})},style:{height:"fit-content",width:"fit-content"},iconRight:isLastStep?void 0:(0,jsx_runtime.jsx)(IconArrowRight.IconArrowRight,{}),children:isLastStep?"Send":"Next"})]})]})},States=function States(args){return(0,jsx_runtime.jsx)("div",{className:Stepper_module_stepperContainer,children:(0,jsx_runtime.jsxs)("div",{className:Stepper_module_stepper,style:{display:"grid",columnGap:"10px !important",gap:"32px",justifyItems:"center",gridTemplateColumns:"1fr 1fr 1fr 1fr"},children:[(0,jsx_runtime.jsx)(Step,{label:"Available",language:"en",index:0,stepsTotal:9,state:StepState.available}),(0,jsx_runtime.jsx)(Step,{label:"Selected",language:"en",index:1,stepsTotal:9,selected:!0,state:StepState.available}),(0,jsx_runtime.jsx)(Step,{label:"Completed",language:"en",index:2,stepsTotal:9,state:StepState.completed}),(0,jsx_runtime.jsx)(Step,{label:"Disabled",language:"en",index:3,stepsTotal:9,state:StepState.disabled}),(0,jsx_runtime.jsx)(Step,{label:"Needs attention",language:"en",index:4,stepsTotal:9,state:StepState.attention}),(0,jsx_runtime.jsx)(Step,{label:"Attention + selected",language:"en",selected:!0,index:5,stepsTotal:9,state:StepState.attention}),(0,jsx_runtime.jsx)(Step,{label:"Paused",language:"en",index:6,stepsTotal:9,state:StepState.paused}),(0,jsx_runtime.jsx)(Step,{label:"Paused + selected",language:"en",selected:!0,index:7,stepsTotal:9,state:StepState.paused}),(0,jsx_runtime.jsxs)("div",{className:Stepper_module_step,children:[(0,jsx_runtime.jsx)("p",{style:{fontSize:"var(--fontsize-body-m)",lineHeight:"var(--lineheight-l)"},children:"Small variant:"}),(0,jsx_runtime.jsx)(Step,{label:"Available",language:"en",index:8,stepsTotal:9,small:!0,state:StepState.available,style:{justifySelf:"center"}})]})]})})},Playground=function Playground(args){var reducer=commonReducer(5),_useReducer13=(0,react.useReducer)(reducer,{activeStepIndex:args.activeStepIndex,steps:[{label:"Step 1",state:StepState.available},{label:"Step 2",state:StepState.disabled},{label:"Step 3",state:StepState.disabled},{label:"Step 4",state:StepState.disabled},{label:"Step 5",state:StepState.disabled}]}),_useReducer14=(0,slicedToArray.Z)(_useReducer13,2),state=_useReducer14[0],dispatch=_useReducer14[1],lastStep=state.activeStepIndex===state.steps.length-1,theme={"--hds-stepper-color":args.stepperColor,"--hds-step-content-color":args.stepperContentColor,"--hds-stepper-background-color":args.stepperBackgroundColor,"--hds-stepper-focus-border-color":args.stepperFocusBorderColor,"--hds-stepper-disabled-color":args.stepperDisabledColor,"--hds-step-background-color":args.stepBackgroundColor,"--hds-not-selected-step-label-color":args.notSelectedStepLabelColor};return(0,jsx_runtime.jsxs)("div",{children:[(0,jsx_runtime.jsx)(Stepper,{theme,small:args.small,stepHeading:args.stepHeading,steps:state.steps,language:"en",selectedStep:args.activeStepIndex,onStepClick:function onStepClick(event,stepIndex){return dispatch({type:"setActive",payload:stepIndex})}}),(0,jsx_runtime.jsxs)("div",{style:{height:"300px",display:"flex",justifyContent:"flex-start",alignItems:"flex-end",gap:"24px",marginLeft:"10px"},children:[(0,jsx_runtime.jsx)(Button.z,{theme:"black",disabled:0===state.activeStepIndex,variant:"secondary",onClick:function onClick(){return dispatch({type:"setActive",payload:state.activeStepIndex-1})},style:{height:"fit-content",width:"fit-content"},iconLeft:(0,jsx_runtime.jsx)(IconArrowLeft.IconArrowLeft,{}),children:"Previous"}),(0,jsx_runtime.jsx)(Button.z,{theme:"black",variant:lastStep?"primary":"secondary",onClick:function onClick(){return dispatch({type:"completeStep",payload:state.activeStepIndex})},style:{height:"fit-content",width:"fit-content"},iconRight:lastStep?void 0:(0,jsx_runtime.jsx)(IconArrowRight.IconArrowRight,{}),children:lastStep?"Send":"Next"})]})]})};Playground.parameters={loki:{skip:!0}},Playground.args={stepperColor:"#0000bf",stepperContentColor:"#0000bf",stepperBackgroundColor:"#ffffff",stepperFocusBorderColor:"#0072c6",stepperDisabledColor:"#cccccc",stepBackgroundColor:"#ffffff",notSelectedStepLabelColor:"#0000bf",small:!1,stepHeading:!1,activeStepIndex:0},Playground.argTypes={stepperColor:{control:{type:"color"}},stepperContentColor:{control:{type:"color"}},stepperBackgroundColor:{control:{type:"color"}},stepperFocusBorderColor:{control:{type:"color"}},stepperDisabledColor:{control:{type:"color"}},stepBackgroundColor:{control:{type:"color"}},notSelectedStepLabelColor:{control:{type:"color"}},activeStepIndex:{control:{type:"number",min:0,max:4,step:1}}},Default.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => {\n const reducer = commonReducer(5);\n\n const initialState = {\n activeStepIndex: 0,\n steps: [\n {\n label: 'Step 1',\n state: StepState.available,\n },\n {\n label: 'Step 2',\n state: StepState.disabled,\n },\n {\n label: 'Step 3',\n state: StepState.disabled,\n },\n {\n label: 'Step 4 - longer text',\n state: StepState.disabled,\n },\n {\n label: 'Step 5',\n state: StepState.disabled,\n },\n ],\n };\n\n const [state, dispatch] = useReducer(reducer, initialState);\n\n const lastStep = state.activeStepIndex === state.steps.length - 1;\n\n return (\n
\n dispatch({ type: 'setActive', payload: stepIndex })}\n />\n\n \n dispatch({ type: 'setActive', payload: state.activeStepIndex - 1 })}\n style={{ height: 'fit-content', width: 'fit-content' }}\n iconLeft={}\n >\n Previous\n \n dispatch({ type: 'completeStep', payload: state.activeStepIndex })}\n style={{ height: 'fit-content', width: 'fit-content' }}\n iconRight={lastStep ? undefined : }\n >\n {lastStep ? 'Send' : 'Next'}\n \n
\n
\n );\n}"}},Default.parameters),Small.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => {\n const reducer = commonReducer(5);\n\n const initialState = {\n activeStepIndex: 0,\n steps: [\n {\n label: 'Step 1',\n state: StepState.available,\n },\n {\n label: 'Step 2',\n state: StepState.disabled,\n },\n {\n label: 'Step 3',\n state: StepState.disabled,\n },\n {\n label: 'Step 4 - longer text',\n state: StepState.disabled,\n },\n {\n label: 'Step 5',\n state: StepState.disabled,\n },\n ],\n };\n\n const [state, dispatch] = useReducer(reducer, initialState);\n\n const lastStep = state.activeStepIndex === state.steps.length - 1;\n\n return (\n
\n dispatch({ type: 'setActive', payload: stepIndex })}\n />\n\n \n dispatch({ type: 'setActive', payload: state.activeStepIndex - 1 })}\n style={{ height: 'fit-content', width: 'fit-content' }}\n iconLeft={}\n >\n Previous\n \n dispatch({ type: 'completeStep', payload: state.activeStepIndex })}\n style={{ height: 'fit-content', width: 'fit-content' }}\n iconRight={lastStep ? undefined : }\n >\n {lastStep ? 'Send' : 'Next'}\n \n
\n
\n );\n}"}},Small.parameters),WithStepHeading.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => {\n const reducer = commonReducer(5);\n\n const initialState = {\n activeStepIndex: 0,\n steps: [\n {\n label: 'Step 1 - longer text',\n state: StepState.available,\n },\n {\n label: 'Step 2',\n state: StepState.disabled,\n },\n {\n label: 'Step 3',\n state: StepState.disabled,\n },\n {\n label: 'Step 4',\n state: StepState.disabled,\n },\n {\n label: 'Step 5',\n state: StepState.disabled,\n },\n ],\n };\n\n const [state, dispatch] = useReducer(reducer, initialState);\n\n const lastStep = state.activeStepIndex === state.steps.length - 1;\n\n return (\n
\n dispatch({ type: 'setActive', payload: stepIndex })}\n />\n\n \n dispatch({ type: 'setActive', payload: state.activeStepIndex - 1 })}\n style={{ height: 'fit-content', width: 'fit-content' }}\n iconLeft={}\n >\n Previous\n \n dispatch({ type: 'completeStep', payload: state.activeStepIndex })}\n style={{ height: 'fit-content', width: 'fit-content' }}\n iconRight={lastStep ? undefined : }\n >\n {lastStep ? 'Send' : 'Next'}\n \n
\n
\n );\n}"}},WithStepHeading.parameters),Overflow.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => {\n const reducer = commonReducer(12);\n\n const initialState = {\n activeStepIndex: 0,\n steps: [\n {\n state: StepState.available,\n label: 'Step 1 - longer text',\n },\n {\n state: StepState.disabled,\n label: 'Step 2',\n },\n {\n state: StepState.disabled,\n label: 'Step 3',\n },\n {\n state: StepState.disabled,\n label: 'Step 4',\n },\n {\n state: StepState.disabled,\n label: 'Step 5',\n },\n {\n state: StepState.disabled,\n label: 'Step 6',\n },\n {\n state: StepState.disabled,\n label: 'Step 7',\n },\n {\n state: StepState.disabled,\n label: 'Step 8',\n },\n {\n state: StepState.disabled,\n label: 'Step 9',\n },\n {\n state: StepState.disabled,\n label: 'Step 10',\n },\n {\n state: StepState.disabled,\n label: 'Step 11',\n },\n {\n state: StepState.disabled,\n label: 'Step 12',\n },\n ],\n };\n\n const [state, dispatch] = useReducer(reducer, initialState);\n\n const lastStep = state.activeStepIndex === state.steps.length - 1;\n\n return (\n
\n dispatch({ type: 'setActive', payload: stepIndex })}\n />\n \n dispatch({ type: 'setActive', payload: state.activeStepIndex - 1 })}\n style={{ height: 'fit-content', width: 'fit-content' }}\n iconLeft={}\n >\n Previous\n \n dispatch({ type: 'completeStep', payload: state.activeStepIndex })}\n style={{ height: 'fit-content', width: 'fit-content' }}\n iconRight={lastStep ? undefined : }\n >\n {lastStep ? 'Send' : 'Next'}\n \n
\n
\n );\n}"}},Overflow.parameters),WithCustomTheme.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => {\n const reducer = commonReducer(5);\n\n const initialState = {\n activeStepIndex: 0,\n steps: [\n {\n label: 'Step 1 - longer text',\n state: StepState.available,\n },\n {\n label: 'Step 2',\n state: StepState.disabled,\n },\n {\n label: 'Step 3',\n state: StepState.disabled,\n },\n {\n label: 'Step 4',\n state: StepState.disabled,\n },\n {\n label: 'Step 5',\n state: StepState.disabled,\n },\n ],\n };\n\n const [state, dispatch] = useReducer(reducer, initialState);\n\n const lastStep = state.activeStepIndex === state.steps.length - 1;\n\n const theme = {\n '--hds-stepper-color': 'var(--color-black-90)',\n '--hds-step-content-color': 'var(--color-black-90)',\n '--hds-stepper-background-color': 'var(--color-black-10)',\n '--hds-step-background-color': 'var(--color-black-5)',\n '--hds-stepper-focus-border-color': 'var(--color-black-90)',\n '--hds-stepper-disabled-color': 'var(--color-black-30)',\n '--hds-not-selected-step-label-color': 'var(--color-black-90)',\n };\n\n return (\n
\n dispatch({ type: 'setActive', payload: stepIndex })}\n />\n \n dispatch({ type: 'setActive', payload: state.activeStepIndex - 1 })}\n style={{ height: 'fit-content', width: 'fit-content' }}\n iconLeft={}\n >\n Previous\n \n dispatch({ type: 'completeStep', payload: state.activeStepIndex })}\n style={{ height: 'fit-content', width: 'fit-content' }}\n iconRight={lastStep ? undefined : }\n >\n {lastStep ? 'Send' : 'Next'}\n \n
\n
\n );\n}"}},WithCustomTheme.parameters),SimpleFormExample.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => {\n const initialState = {\n showErrorSummary: false,\n activeStepIndex: 0,\n steps: [\n {\n state: StepState.available,\n label: 'First name',\n },\n {\n state: StepState.disabled,\n label: 'Last name',\n },\n {\n state: StepState.disabled,\n label: 'Age',\n },\n {\n state: StepState.disabled,\n label: 'Files',\n },\n {\n state: StepState.disabled,\n label: 'Review and send',\n },\n ],\n fields: {\n firstName: {\n value: '',\n visited: false,\n },\n lastName: {\n value: '',\n visited: false,\n },\n age: {\n value: undefined,\n visited: false,\n },\n files: {\n value: null,\n visited: false,\n },\n },\n };\n const lastStep = initialState.steps.length - 1;\n\n const activeStepIsValid = (state) => {\n if (state.activeStepIndex === 0) {\n // first name\n return state.fields.firstName.value && state.fields.firstName.value.length > 0;\n }\n if (state.activeStepIndex === 1) {\n // last name\n return state.fields.lastName.value && state.fields.lastName.value.length > 0;\n }\n\n if (state.activeStepIndex === 2) {\n // age\n return state.fields.age.value && state.fields.age.value.length > 0;\n }\n\n if (state.activeStepIndex === 3) {\n // files\n return state.fields.files.value && state.fields.files.value.length > 0;\n }\n\n return state.activeStepIndex === 4;\n };\n\n const weAreInLastAvailableStep = (state) => {\n let indexOfLastNonDisabledStep = 0;\n state.steps.forEach((step, index) => {\n if (step.state !== StepState.disabled && index > indexOfLastNonDisabledStep) {\n indexOfLastNonDisabledStep = index;\n }\n });\n\n return state.activeStepIndex === indexOfLastNonDisabledStep;\n };\n\n const reducer = (state, action) => {\n switch (action.type) {\n case 'changeField': {\n if (action.newValue.length === 0) {\n return {\n showErrorSummary: state.showErrorSummary,\n activeStepIndex: state.activeStepIndex,\n steps: state.steps,\n fields: {\n ...state.fields,\n [action.fieldName]: {\n value: action.newValue,\n visited: true,\n },\n },\n };\n }\n\n return {\n showErrorSummary: false,\n activeStepIndex: state.activeStepIndex,\n steps: state.steps.map((step, index) => {\n if (index === state.activeStepIndex) {\n return {\n state: StepState.completed,\n label: step.label,\n };\n }\n return step;\n }),\n fields: {\n ...state.fields,\n [action.fieldName]: {\n value: action.newValue,\n visited: true,\n },\n },\n };\n }\n case 'completeStep': {\n if (!activeStepIsValid(state)) {\n return {\n showErrorSummary: true,\n activeStepIndex: state.activeStepIndex,\n steps: state.steps,\n fields: {\n ...state.fields,\n },\n };\n }\n const activeStepIndex = action.payload === lastStep ? lastStep : action.payload + 1;\n return {\n showErrorSummary: state.showErrorSummary,\n activeStepIndex,\n steps: state.steps.map((step, index) => {\n if (index === action.payload && index !== lastStep) {\n // current one but not last one\n return {\n state: StepState.completed,\n label: step.label,\n };\n }\n if (index === action.payload + 1) {\n // next one\n return {\n state: StepState.available,\n label: step.label,\n };\n }\n return step;\n }),\n fields: {\n ...state.fields,\n },\n };\n }\n case 'setActive': {\n if (!activeStepIsValid(state) && !weAreInLastAvailableStep(state)) {\n return {\n showErrorSummary: true,\n activeStepIndex: state.activeStepIndex,\n steps: state.steps,\n fields: {\n ...state.fields,\n },\n };\n }\n\n return {\n showErrorSummary: false,\n activeStepIndex: action.payload,\n steps: state.steps.map((step, index) => {\n if (index === action.payload) {\n return {\n state: StepState.available,\n label: step.label,\n };\n }\n if (index === state.activeStepIndex && activeStepIsValid(state)) {\n return {\n state: StepState.completed,\n label: step.label,\n };\n }\n return step;\n }),\n fields: {\n ...state.fields,\n },\n };\n }\n default:\n throw new Error();\n }\n };\n\n const [state, dispatch] = useReducer(reducer, initialState);\n\n const isLastStep = state.activeStepIndex === state.steps.length - 1;\n const errorRef = useRef(null);\n\n return (\n
\n

Simple form example

\n {\n if (state.showErrorSummary && stepIndex !== state.activeStepIndex) {\n // focus to error summary label\n errorRef.current.children[0].children[0].focus();\n }\n dispatch({ type: 'setActive', payload: stepIndex });\n }}\n />\n {state.showErrorSummary && (\n
\n \n \n \n
\n )}\n {[0, 1, 2, 3].includes(state.activeStepIndex) && (\n
\n {state.activeStepIndex === 0 && (\n \n dispatch({ type: 'changeField', fieldName: 'firstName', newValue: event.target.value })\n }\n />\n )}\n {state.activeStepIndex === 1 && (\n \n dispatch({ type: 'changeField', fieldName: 'lastName', newValue: event.target.value })\n }\n />\n )}\n {state.activeStepIndex === 2 && (\n dispatch({ type: 'changeField', fieldName: 'age', newValue: event.target.value })}\n />\n )}\n {state.activeStepIndex === 3 && (\n dispatch({ type: 'changeField', fieldName: 'files', newValue: event })}\n />\n )}\n
\n )}\n {state.activeStepIndex === 4 && (\n
\n \n

First name: {state.fields.firstName.value}

\n

Last name: {state.fields.lastName.value}

\n

Age: {state.fields.age.value}

\n

Files: {state.fields.files.value.map((file) => file.name).join(', ')}

\n \n
\n )}\n\n \n {\n if (state.showErrorSummary) {\n // focus to error summary label\n errorRef.current.children[0].children[0].focus();\n }\n dispatch({ type: 'setActive', payload: state.activeStepIndex - 1 });\n }}\n style={{ height: 'fit-content', width: 'fit-content' }}\n iconLeft={}\n >\n Previous\n \n {\n if (state.showErrorSummary) {\n // focus to error summary label\n errorRef.current.children[0].children[0].focus();\n }\n dispatch({ type: 'completeStep', payload: state.activeStepIndex });\n }}\n style={{ height: 'fit-content', width: 'fit-content' }}\n iconRight={isLastStep ? undefined : }\n >\n {isLastStep ? 'Send' : 'Next'}\n \n
\n \n );\n}"}},SimpleFormExample.parameters),States.parameters=(0,objectSpread2.Z)({storySource:{source:'(args) => {\n return (\n
\n \n \n \n \n \n \n \n \n \n
\n

Small variant:

\n \n
\n
\n \n );\n}'}},States.parameters),Playground.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => {\n const reducer = commonReducer(5);\n\n const [state, dispatch] = useReducer(reducer, {\n activeStepIndex: args.activeStepIndex,\n steps: [\n {\n label: 'Step 1',\n state: StepState.available,\n },\n {\n label: 'Step 2',\n state: StepState.disabled,\n },\n {\n label: 'Step 3',\n state: StepState.disabled,\n },\n {\n label: 'Step 4',\n state: StepState.disabled,\n },\n {\n label: 'Step 5',\n state: StepState.disabled,\n },\n ],\n });\n\n const lastStep = state.activeStepIndex === state.steps.length - 1;\n\n const theme = {\n '--hds-stepper-color': args.stepperColor,\n '--hds-step-content-color': args.stepperContentColor,\n '--hds-stepper-background-color': args.stepperBackgroundColor,\n '--hds-stepper-focus-border-color': args.stepperFocusBorderColor,\n '--hds-stepper-disabled-color': args.stepperDisabledColor,\n '--hds-step-background-color': args.stepBackgroundColor,\n '--hds-not-selected-step-label-color': args.notSelectedStepLabelColor,\n };\n\n return (\n
\n dispatch({ type: 'setActive', payload: stepIndex })}\n />\n \n dispatch({ type: 'setActive', payload: state.activeStepIndex - 1 })}\n style={{ height: 'fit-content', width: 'fit-content' }}\n iconLeft={}\n >\n Previous\n \n dispatch({ type: 'completeStep', payload: state.activeStepIndex })}\n style={{ height: 'fit-content', width: 'fit-content' }}\n iconRight={lastStep ? undefined : }\n >\n {lastStep ? 'Send' : 'Next'}\n \n
\n \n );\n}"}},Playground.parameters);try{Default.displayName="Default",Default.__docgenInfo={description:"",displayName:"Default",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/stepper/Stepper.stories.tsx#Default"]={docgenInfo:Default.__docgenInfo,name:"Default",path:"src/components/stepper/Stepper.stories.tsx#Default"})}catch(__react_docgen_typescript_loader_error){}try{Small.displayName="Small",Small.__docgenInfo={description:"",displayName:"Small",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/stepper/Stepper.stories.tsx#Small"]={docgenInfo:Small.__docgenInfo,name:"Small",path:"src/components/stepper/Stepper.stories.tsx#Small"})}catch(__react_docgen_typescript_loader_error){}try{WithStepHeading.displayName="WithStepHeading",WithStepHeading.__docgenInfo={description:"",displayName:"WithStepHeading",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/stepper/Stepper.stories.tsx#WithStepHeading"]={docgenInfo:WithStepHeading.__docgenInfo,name:"WithStepHeading",path:"src/components/stepper/Stepper.stories.tsx#WithStepHeading"})}catch(__react_docgen_typescript_loader_error){}try{Overflow.displayName="Overflow",Overflow.__docgenInfo={description:"",displayName:"Overflow",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/stepper/Stepper.stories.tsx#Overflow"]={docgenInfo:Overflow.__docgenInfo,name:"Overflow",path:"src/components/stepper/Stepper.stories.tsx#Overflow"})}catch(__react_docgen_typescript_loader_error){}try{WithCustomTheme.displayName="WithCustomTheme",WithCustomTheme.__docgenInfo={description:"",displayName:"WithCustomTheme",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/stepper/Stepper.stories.tsx#WithCustomTheme"]={docgenInfo:WithCustomTheme.__docgenInfo,name:"WithCustomTheme",path:"src/components/stepper/Stepper.stories.tsx#WithCustomTheme"})}catch(__react_docgen_typescript_loader_error){}try{SimpleFormExample.displayName="SimpleFormExample",SimpleFormExample.__docgenInfo={description:"",displayName:"SimpleFormExample",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/stepper/Stepper.stories.tsx#SimpleFormExample"]={docgenInfo:SimpleFormExample.__docgenInfo,name:"SimpleFormExample",path:"src/components/stepper/Stepper.stories.tsx#SimpleFormExample"})}catch(__react_docgen_typescript_loader_error){}try{States.displayName="States",States.__docgenInfo={description:"",displayName:"States",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/stepper/Stepper.stories.tsx#States"]={docgenInfo:States.__docgenInfo,name:"States",path:"src/components/stepper/Stepper.stories.tsx#States"})}catch(__react_docgen_typescript_loader_error){}try{Playground.displayName="Playground",Playground.__docgenInfo={description:"",displayName:"Playground",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/stepper/Stepper.stories.tsx#Playground"]={docgenInfo:Playground.__docgenInfo,name:"Playground",path:"src/components/stepper/Stepper.stories.tsx#Playground"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/table/Table.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{CheckboxSelection:()=>CheckboxSelection,CheckboxSelectionDense:()=>CheckboxSelectionDense,CheckboxSelectionWithSorting:()=>CheckboxSelectionWithSorting,CustomBackgroundColorsForDarkVariant:()=>CustomBackgroundColorsForDarkVariant,CustomBackgroundColorsForLightVariant:()=>CustomBackgroundColorsForLightVariant,CustomSortFunction:()=>CustomSortFunction,Default:()=>Default,Dense:()=>Dense,InitiallySelectedRows:()=>InitiallySelectedRows,InitiallySortedBy:()=>InitiallySortedBy,Light:()=>Light,Sorting:()=>Sorting,SortingLightVariant:()=>SortingLightVariant,SortingSideEffects:()=>SortingSideEffects,VerticalHeaders:()=>VerticalHeaders,VerticalLines:()=>VerticalLines,WithCustomActions:()=>WithCustomActions,Zebra:()=>Zebra,default:()=>Table_stories});var objectSpread2=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),slicedToArray=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),react=__webpack_require__("../../node_modules/react/index.js"),parse=__webpack_require__("../../node_modules/date-fns/esm/parse/index.js"),isSameDay=__webpack_require__("../../node_modules/date-fns/esm/isSameDay/index.js"),isBefore=__webpack_require__("../../node_modules/date-fns/esm/isBefore/index.js"),Table=__webpack_require__("./src/components/table/Table.tsx");const story_example_work_trial_namespaceObject=JSON.parse('[{"Paikka-ID":"33740","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Harjoittelija","Ilmoitus vanhenee":"31.12.2021","Toimiala/liikelaitos":"Kasvatus ja koulutus","Työpaikka":"TYÖKOKEILU Snellu Cafe´ lounaskahvila","Postinumero":"00900","Paikkoja":36,"Haastatteluun halutaan":40},{"Paikka-ID":"33741","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Harjoittelija","Ilmoitus vanhenee":"31.12.2021","Toimiala/liikelaitos":"Kasvatus ja koulutus","Työpaikka":"Maunulatalon kahvila (Månsas Deli)","Postinumero":"00630","Paikkoja":39,"Haastatteluun halutaan":50},{"Paikka-ID":"33823","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Viestintäalan harjoittelija","Ilmoitus vanhenee":"31.12.2021","Toimiala/liikelaitos":"Kasvatus ja koulutus","Työpaikka":"Tarinapaja","Postinumero":"00610","Paikkoja":12,"Haastatteluun halutaan":30},{"Paikka-ID":"33739","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Kahvila-apulainen","Ilmoitus vanhenee":"31.12.2021","Toimiala/liikelaitos":"Kasvatus ja koulutus","Työpaikka":"Kahvilapalvelut","Postinumero":"00610","Paikkoja":12,"Haastatteluun halutaan":20},{"Paikka-ID":"33918","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Teknisen alan harjoittelija","Ilmoitus vanhenee":"31.12.2021","Toimiala/liikelaitos":"Kasvatus ja koulutus","Työpaikka":"WooDoo-verstas","Postinumero":"00880","Paikkoja":45,"Haastatteluun halutaan":50},{"Paikka-ID":"34825","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Hoitoapulainen","Ilmoitus vanhenee":"31.12.2021","Toimiala/liikelaitos":"Sosiaali- ja terveystoimiala","Työpaikka":"Sinikello","Postinumero":"00420","Paikkoja":3,"Haastatteluun halutaan":5},{"Paikka-ID":"35212","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Teknisen alan harjoittelija","Ilmoitus vanhenee":"31.12.2021","Toimiala/liikelaitos":"Kasvatus ja koulutus","Työpaikka":"Metalliverstas","Postinumero":"00880","Paikkoja":37,"Haastatteluun halutaan":40},{"Paikka-ID":"35213","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Teknisen alan harjoittelija","Ilmoitus vanhenee":"30.06.2022","Toimiala/liikelaitos":"Kasvatus ja koulutus","Työpaikka":"Moottoripaja Pitäjänmäki","Postinumero":"00370","Paikkoja":18,"Haastatteluun halutaan":21},{"Paikka-ID":"35294","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Erityisavustaja","Ilmoitus vanhenee":"29.11.2021","Toimiala/liikelaitos":"Kasvatus ja koulutus","Työpaikka":"Pk Savela","Postinumero":"00720","Paikkoja":1,"Haastatteluun halutaan":10},{"Paikka-ID":"35295","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Erityisavustaja","Ilmoitus vanhenee":"29.11.2021","Toimiala/liikelaitos":"Kasvatus ja koulutus","Työpaikka":"Pk Sinivuori","Postinumero":"00720","Paikkoja":1,"Haastatteluun halutaan":10},{"Paikka-ID":"35296","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Päiväkodin harjoittelija","Ilmoitus vanhenee":"29.11.2021","Toimiala/liikelaitos":"Kasvatus ja koulutus","Työpaikka":"Varhaiskasvatusyksikkö Siilitie","Postinumero":"00800","Paikkoja":2,"Haastatteluun halutaan":2},{"Paikka-ID":"35283","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Liikunnanohjaaja","Ilmoitus vanhenee":"27.11.2021","Toimiala/liikelaitos":"Sosiaali- ja terveystoimiala","Työpaikka":"Palvelukeskus","Postinumero":"00420","Paikkoja":1,"Haastatteluun halutaan":2},{"Paikka-ID":"34165","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"ICT-alan harjoittelija","Ilmoitus vanhenee":"27.02.2022","Toimiala/liikelaitos":"Kasvatus ja koulutus","Työpaikka":"Digitalents Helsinki","Postinumero":"00270","Paikkoja":51,"Haastatteluun halutaan":70},{"Paikka-ID":"35096","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Erityisavustaja","Ilmoitus vanhenee":"25.10.2021","Toimiala/liikelaitos":"Kasvatus ja koulutus","Työpaikka":"Varhaiskasvatusyksikkö Herttoniemi","Postinumero":"00800","Paikkoja":1,"Haastatteluun halutaan":1},{"Paikka-ID":"35088","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Päiväkodin harjoittelija","Ilmoitus vanhenee":"24.10.2021","Toimiala/liikelaitos":"Kasvatus ja koulutus","Työpaikka":"Päiväkoti Lapinmäki","Postinumero":"00350","Paikkoja":3,"Haastatteluun halutaan":4},{"Paikka-ID":"34549","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Teknisen alan harjoittelija","Ilmoitus vanhenee":"19.07.2023","Toimiala/liikelaitos":"Kasvatus ja koulutus","Työpaikka":"WooDoo-verstas","Postinumero":"00880","Paikkoja":29,"Haastatteluun halutaan":50},{"Paikka-ID":"35050","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Erityisavustaja","Ilmoitus vanhenee":"18.10.2021","Toimiala/liikelaitos":"Kasvatus ja koulutus","Työpaikka":"Päiväkoti Neulanen","Postinumero":"00920","Paikkoja":7,"Haastatteluun halutaan":20},{"Paikka-ID":"35237","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Ohjaaja","Ilmoitus vanhenee":"17.11.2021","Toimiala/liikelaitos":"Sosiaali- ja terveystoimiala","Työpaikka":"Stadin asukastalo Pihlajamäki","Postinumero":"00710","Paikkoja":1,"Haastatteluun halutaan":4},{"Paikka-ID":"35230","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Erityisavustaja","Ilmoitus vanhenee":"16.11.2021","Toimiala/liikelaitos":"Kasvatus ja koulutus","Työpaikka":"Kuninkaantammi","Postinumero":"00430","Paikkoja":2,"Haastatteluun halutaan":3},{"Paikka-ID":"35224","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Erityisavustaja","Ilmoitus vanhenee":"15.11.2021","Toimiala/liikelaitos":"Kasvatus ja koulutus","Työpaikka":"Päiväkoti Loimi","Postinumero":"00940","Paikkoja":1,"Haastatteluun halutaan":2},{"Paikka-ID":"35223","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Päiväkodin harjoittelija","Ilmoitus vanhenee":"15.11.2021","Toimiala/liikelaitos":"Kasvatus ja koulutus","Työpaikka":"Pk Pihapirtti","Postinumero":"00940","Paikkoja":2,"Haastatteluun halutaan":3},{"Paikka-ID":"35221","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Hoiva-avustaja","Ilmoitus vanhenee":"14.11.2021","Toimiala/liikelaitos":"Sosiaali- ja terveystoimiala","Työpaikka":"Usva-tiimi","Postinumero":"00770","Paikkoja":1,"Haastatteluun halutaan":2},{"Paikka-ID":"35222","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Hoiva-avustaja","Ilmoitus vanhenee":"14.11.2021","Toimiala/liikelaitos":"Sosiaali- ja terveystoimiala","Työpaikka":"Ruska-tiimi","Postinumero":"00770","Paikkoja":1,"Haastatteluun halutaan":3},{"Paikka-ID":"35218","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Hoitoapulainen","Ilmoitus vanhenee":"14.11.2021","Toimiala/liikelaitos":"Sosiaali- ja terveystoimiala","Työpaikka":"Tuulensuu","Postinumero":"00500","Paikkoja":1,"Haastatteluun halutaan":3},{"Paikka-ID":"35018","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Avustaja","Ilmoitus vanhenee":"12.10.2021","Toimiala/liikelaitos":"Kasvatus ja koulutus","Työpaikka":"Päiväkoti Tapanila","Postinumero":"00730","Paikkoja":1,"Haastatteluun halutaan":1},{"Paikka-ID":"35003","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Päiväkotiapulainen","Ilmoitus vanhenee":"12.10.2021","Toimiala/liikelaitos":"Kasvatus ja koulutus","Työpaikka":"Päiväkoti Neulanen","Postinumero":"00920","Paikkoja":2,"Haastatteluun halutaan":5},{"Paikka-ID":"35002","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Päiväkodin harjoittelija","Ilmoitus vanhenee":"11.10.2021","Toimiala/liikelaitos":"Kasvatus ja koulutus","Työpaikka":"Päiväkoti Terhi","Postinumero":"00530","Paikkoja":2,"Haastatteluun halutaan":2},{"Paikka-ID":"34998","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Erityisavustaja","Ilmoitus vanhenee":"11.10.2021","Toimiala/liikelaitos":"Kasvatus ja koulutus","Työpaikka":"Päiväkoti Ruuti","Postinumero":"00940","Paikkoja":2,"Haastatteluun halutaan":2},{"Paikka-ID":"34999","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Erityisavustaja","Ilmoitus vanhenee":"11.10.2021","Toimiala/liikelaitos":"Kasvatus ja koulutus","Työpaikka":"Päiväkoti Haikara","Postinumero":"00940","Paikkoja":2,"Haastatteluun halutaan":2},{"Paikka-ID":"34986","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Hoitoavustaja","Ilmoitus vanhenee":"10.10.2021","Toimiala/liikelaitos":"Sosiaali- ja terveystoimiala","Työpaikka":"Kannelmäen palvelutalo","Postinumero":"00420","Paikkoja":1,"Haastatteluun halutaan":2},{"Paikka-ID":"34987","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Hoitoavustaja","Ilmoitus vanhenee":"10.10.2021","Toimiala/liikelaitos":"Sosiaali- ja terveystoimiala","Työpaikka":"Kannelmäen palvelutalo","Postinumero":"00420","Paikkoja":1,"Haastatteluun halutaan":2},{"Paikka-ID":"34988","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Hoitoavustaja","Ilmoitus vanhenee":"10.10.2021","Toimiala/liikelaitos":"Sosiaali- ja terveystoimiala","Työpaikka":"Kannelmäen palvelutalo","Postinumero":"00420","Paikkoja":1,"Haastatteluun halutaan":3},{"Paikka-ID":"35202","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Erityisavustaja","Ilmoitus vanhenee":"08.11.2021","Toimiala/liikelaitos":"Kasvatus ja koulutus","Työpaikka":"Pk Lassi ja Pk Niitty","Postinumero":"00440","Paikkoja":2,"Haastatteluun halutaan":5},{"Paikka-ID":"35176","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Päiväkotiapulainen","Ilmoitus vanhenee":"07.11.2021","Toimiala/liikelaitos":"Kasvatus ja koulutus","Työpaikka":"Päiväkoti Suomenlinna","Postinumero":"00190","Paikkoja":1,"Haastatteluun halutaan":3},{"Paikka-ID":"35193","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Hoitoavustaja","Ilmoitus vanhenee":"07.11.2021","Toimiala/liikelaitos":"Sosiaali- ja terveystoimiala","Työpaikka":"Ryhmäkoti Kantola tai Pohjantähti","Postinumero":"00940","Paikkoja":1,"Haastatteluun halutaan":3},{"Paikka-ID":"35194","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Hoitoavustaja","Ilmoitus vanhenee":"07.11.2021","Toimiala/liikelaitos":"Sosiaali- ja terveystoimiala","Työpaikka":"Ryhmäkoti Apila, Orvokki tai Vanamo","Postinumero":"00940","Paikkoja":1,"Haastatteluun halutaan":3},{"Paikka-ID":"35195","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Hoitoavustaja","Ilmoitus vanhenee":"07.11.2021","Toimiala/liikelaitos":"Sosiaali- ja terveystoimiala","Työpaikka":"Ryhmäkoti Puolukka, Karpalo tai Mansikka","Postinumero":"00940","Paikkoja":1,"Haastatteluun halutaan":3},{"Paikka-ID":"35179","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Leikkipuistoavustaja","Ilmoitus vanhenee":"07.11.2021","Toimiala/liikelaitos":"Kasvatus ja koulutus","Työpaikka":"Leikkipuisto Intia","Postinumero":"00560","Paikkoja":1,"Haastatteluun halutaan":3},{"Paikka-ID":"35189","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Leikkipuistoavustaja","Ilmoitus vanhenee":"07.11.2021","Toimiala/liikelaitos":"Kasvatus ja koulutus","Työpaikka":"Leikkipuisto Lehdokki","Postinumero":"00520","Paikkoja":2,"Haastatteluun halutaan":3},{"Paikka-ID":"35190","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Leikkipuistoavustaja","Ilmoitus vanhenee":"07.11.2021","Toimiala/liikelaitos":"Kasvatus ja koulutus","Työpaikka":"Leikkipuisto Linja","Postinumero":"00530","Paikkoja":3,"Haastatteluun halutaan":3},{"Paikka-ID":"35191","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Leikkipuistoavustaja","Ilmoitus vanhenee":"07.11.2021","Toimiala/liikelaitos":"Kasvatus ja koulutus","Työpaikka":"Leikkipuisto Sanna","Postinumero":"00240","Paikkoja":3,"Haastatteluun halutaan":3},{"Paikka-ID":"35192","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Leikkipuistoavustaja","Ilmoitus vanhenee":"07.11.2021","Toimiala/liikelaitos":"Kasvatus ja koulutus","Työpaikka":"Leikkipuisto Vallila","Postinumero":"00550","Paikkoja":3,"Haastatteluun halutaan":3},{"Paikka-ID":"35196","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Hoitoavustaja","Ilmoitus vanhenee":"07.11.2021","Toimiala/liikelaitos":"Sosiaali- ja terveystoimiala","Työpaikka":"Ryhmäkoti Vadelma tai Mustikka","Postinumero":"00940","Paikkoja":1,"Haastatteluun halutaan":3},{"Paikka-ID":"35197","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Kuntoutusavustaja","Ilmoitus vanhenee":"07.11.2021","Toimiala/liikelaitos":"Sosiaali- ja terveystoimiala","Työpaikka":"Ryhmäkoti Kantola","Postinumero":"00940","Paikkoja":1,"Haastatteluun halutaan":5},{"Paikka-ID":"35201","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Erityisavustaja","Ilmoitus vanhenee":"07.11.2021","Toimiala/liikelaitos":"Kasvatus ja koulutus","Työpaikka":"Pk Jousi","Postinumero":"00940","Paikkoja":2,"Haastatteluun halutaan":4},{"Paikka-ID":"34969","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Erityisavustaja","Ilmoitus vanhenee":"06.10.2021","Toimiala/liikelaitos":"Kasvatus ja koulutus","Työpaikka":"Pk Haaga","Postinumero":"00320","Paikkoja":1,"Haastatteluun halutaan":3},{"Paikka-ID":"34970","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Erityisavustaja","Ilmoitus vanhenee":"06.10.2021","Toimiala/liikelaitos":"Kasvatus ja koulutus","Työpaikka":"Pk Kylätie","Postinumero":"00320","Paikkoja":1,"Haastatteluun halutaan":3},{"Paikka-ID":"34957","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Apuohjaaja","Ilmoitus vanhenee":"05.10.2021","Toimiala/liikelaitos":"Sosiaali- ja terveystoimiala","Työpaikka":"Sisustusompelimo","Postinumero":"00500","Paikkoja":1,"Haastatteluun halutaan":6},{"Paikka-ID":"34960","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Apuohjaaja","Ilmoitus vanhenee":"05.10.2021","Toimiala/liikelaitos":"Sosiaali- ja terveystoimiala","Työpaikka":"Muusix-ruokala","Postinumero":"00500","Paikkoja":1,"Haastatteluun halutaan":4},{"Paikka-ID":"34961","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Päiväkodin harjoittelija","Ilmoitus vanhenee":"05.10.2021","Toimiala/liikelaitos":"Kasvatus ja koulutus","Työpaikka":"Varhaiskasvatusyksikkö Siilitie","Postinumero":"00800","Paikkoja":3,"Haastatteluun halutaan":3},{"Paikka-ID":"34952","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Päiväkodin harjoittelija","Ilmoitus vanhenee":"04.10.2021","Toimiala/liikelaitos":"Kasvatus ja koulutus","Työpaikka":"Myrskyluoto","Postinumero":"00980","Paikkoja":1,"Haastatteluun halutaan":2},{"Paikka-ID":"34953","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Päiväkodin harjoittelija","Ilmoitus vanhenee":"04.10.2021","Toimiala/liikelaitos":"Kasvatus ja koulutus","Työpaikka":"Hippaheikki","Postinumero":"0980","Paikkoja":2,"Haastatteluun halutaan":2},{"Paikka-ID":"34954","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Päiväkodin harjoittelija","Ilmoitus vanhenee":"04.10.2021","Toimiala/liikelaitos":"Kasvatus ja koulutus","Työpaikka":"Kajuutta","Postinumero":"00980","Paikkoja":2,"Haastatteluun halutaan":2},{"Paikka-ID":"34948","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Erityisavustaja","Ilmoitus vanhenee":"03.10.2021","Toimiala/liikelaitos":"Kasvatus ja koulutus","Työpaikka":"Päiväkoti Vanhainen","Postinumero":"00420","Paikkoja":2,"Haastatteluun halutaan":2},{"Paikka-ID":"35138","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Apuohjaaja","Ilmoitus vanhenee":"02.11.2021","Toimiala/liikelaitos":"Sosiaali- ja terveystoimiala","Työpaikka":"Keramiikka","Postinumero":"00580","Paikkoja":1,"Haastatteluun halutaan":5},{"Paikka-ID":"34550","Paikan tyyppi":"Työkokeilupaikka","Tehtävänimike":"Kahvila-apulainen","Ilmoitus vanhenee":"01.07.2023","Toimiala/liikelaitos":"Kasvatus ja koulutus","Työpaikka":"Kahvila Villa Ullas","Postinumero":"00980","Paikkoja":78,"Haastatteluun halutaan":99}]');var Button=__webpack_require__("./src/components/button/Button.tsx"),IconTrash=__webpack_require__("./src/icons/IconTrash.tsx"),LoadingSpinner=__webpack_require__("./src/components/loadingSpinner/LoadingSpinner.tsx"),jsx_runtime=__webpack_require__("../../node_modules/react/jsx-runtime.js");const Table_stories={component:Table.i,title:"Components/Table",parameters:{storySource:{source:"import React, { useEffect, useState } from 'react';\nimport { parse, isBefore, isSameDay } from 'date-fns';\n\nimport { Table } from './Table';\nimport workTrial from './story-example-work-trial.json';\nimport { Button } from '../button';\nimport { IconTrash } from '../../icons';\nimport { LoadingSpinner } from '../loadingSpinner';\n\nexport default {\n component: Table,\n title: 'Components/Table',\n parameters: {\n controls: { expanded: true },\n },\n args: {},\n};\n\n// args is required for docs tab to show source code\n\nexport const Default = (args) => {\n const cols = [\n { key: 'id', headerName: 'Not rendered' },\n { key: 'firstName', headerName: 'First name' },\n { key: 'surname', headerName: 'Surname' },\n {\n key: 'age',\n headerName: 'Age',\n transform: ({ age }) => {\n return
{age}
;\n },\n },\n { key: 'profession', headerName: 'Profession' },\n ];\n\n const rows: Array = [\n { id: 1000, firstName: 'Lauri', surname: 'Kekkonen', age: 39, profession: 'Engineer' },\n { id: 1001, firstName: 'Maria', surname: 'Sarasoja', age: 62, profession: 'Designer' },\n { id: 1002, firstName: 'Anneli', surname: 'Routa', age: 50, profession: 'Meteorologist' },\n { id: 1003, firstName: 'Osku', surname: 'Rausku', age: 18, profession: 'Mail Carrier' },\n ];\n\n const caption = (\n \n Table 1: Table description\n \n );\n\n return (\n
\n \n \n );\n};\n\n// args is required for docs tab to show source code\n\nexport const Light = (args) => {\n const cols = [\n { key: 'id', headerName: 'Not rendered' },\n { key: 'firstName', headerName: 'First name' },\n { key: 'surname', headerName: 'Surname' },\n {\n key: 'age',\n headerName: 'Age',\n transform: ({ age }) => {\n return
{age}
;\n },\n },\n { key: 'profession', headerName: 'Profession' },\n ];\n\n const rows: Array = [\n { id: 1000, firstName: 'Lauri', surname: 'Kekkonen', age: 39, profession: 'Engineer' },\n { id: 1001, firstName: 'Maria', surname: 'Sarasoja', age: 62, profession: 'Designer' },\n { id: 1002, firstName: 'Anneli', surname: 'Routa', age: 50, profession: 'Meteorologist' },\n { id: 1003, firstName: 'Osku', surname: 'Rausku', age: 18, profession: 'Mail Carrier' },\n ];\n\n const caption = (\n \n Table 1: Table description\n \n );\n\n return (\n
\n
\n \n );\n};\n\n// args is required for docs tab to show source code\n\nexport const Dense = (args) => {\n const cols = [\n { key: 'id', headerName: 'Not rendered' },\n { key: 'firstName', headerName: 'First name' },\n { key: 'surname', headerName: 'Surname' },\n {\n key: 'age',\n headerName: 'Age',\n transform: ({ age }) => {\n return
{age}
;\n },\n },\n { key: 'profession', headerName: 'Profession' },\n ];\n\n const rows: Array = [\n { id: 1000, firstName: 'Lauri', surname: 'Kekkonen', age: 39, profession: 'Engineer' },\n { id: 1001, firstName: 'Maria', surname: 'Sarasoja', age: 62, profession: 'Designer' },\n { id: 1002, firstName: 'Anneli', surname: 'Routa', age: 50, profession: 'Meteorologist' },\n { id: 1003, firstName: 'Osku', surname: 'Rausku', age: 18, profession: 'Mail Carrier' },\n ];\n\n const caption = (\n \n Table 1: Table description\n \n );\n\n return (\n
\n
\n \n );\n};\n\n// args is required for docs tab to show source code\n\nexport const Zebra = (args) => {\n const cols = [\n { key: 'id', headerName: 'Not rendered' },\n { key: 'firstName', headerName: 'First name' },\n { key: 'surname', headerName: 'Surname' },\n {\n key: 'age',\n headerName: 'Age',\n transform: ({ age }) => {\n return
{age}
;\n },\n },\n { key: 'city', headerName: 'City' },\n { key: 'profession', headerName: 'Profession' },\n {\n key: 'experience',\n headerName: 'Experience (years)',\n transform: ({ experience }) => {\n return
{experience}
;\n },\n },\n ];\n\n const rows: Array = [\n {\n id: 1000,\n firstName: 'Lauri',\n surname: 'Kekkonen',\n age: 39,\n city: 'Helsinki',\n profession: 'Engineer',\n experience: 10,\n },\n {\n id: 1001,\n firstName: 'Maria',\n surname: 'Sarasoja',\n age: 62,\n city: 'Tampere',\n profession: 'Designer',\n experience: 39,\n },\n {\n id: 1002,\n firstName: 'Anneli',\n surname: 'Routa',\n age: 50,\n city: 'Turku',\n profession: 'Meteorologist',\n experience: 25,\n },\n {\n id: 1003,\n firstName: 'Osku',\n surname: 'Rausku',\n age: 18,\n city: 'Oulu',\n profession: 'Mail Carrier',\n experience: 1,\n },\n ];\n\n const caption = (\n \n Table 1: Table description\n \n );\n\n return (\n
\n
\n \n );\n};\n\n// args is required for docs tab to show source code\n\nexport const VerticalLines = (args) => {\n const cols = [\n { key: 'id', headerName: 'Not rendered' },\n { key: 'firstName', headerName: 'First name' },\n { key: 'surname', headerName: 'Surname' },\n {\n key: 'age',\n headerName: 'Age',\n transform: ({ age }) => {\n return
{age}
;\n },\n },\n { key: 'profession', headerName: 'Profession' },\n ];\n\n const rows: Array = [\n { id: 1000, firstName: 'Lauri', surname: 'Kekkonen', age: 39, profession: 'Engineer' },\n { id: 1001, firstName: 'Maria', surname: 'Sarasoja', age: 62, profession: 'Designer' },\n { id: 1002, firstName: 'Anneli', surname: 'Routa', age: 50, profession: 'Meteorologist' },\n { id: 1003, firstName: 'Osku', surname: 'Rausku', age: 18, profession: 'Mail Carrier' },\n ];\n\n const caption = (\n \n Table 1: Table description\n \n );\n\n return (\n
\n
\n \n );\n};\n\n// args is required for docs tab to show source code\n\nexport const VerticalHeaders = (args) => {\n const cols = [\n { key: 'id', headerName: 'Not rendered' },\n { key: '8-12', headerName: '8-12' },\n { key: '12-14', headerName: '12-14' },\n { key: '14-16', headerName: '14-16' },\n { key: '16-18', headerName: '16-18' },\n ];\n\n const unitRows: Array = [\n { id: 'monday', '8-12': 324, '12-14': 562, '14-16': 280, '16-18': 94 },\n { id: 'tuesday', '8-12': 341, '12-14': 688, '14-16': 425, '16-18': 113 },\n { id: 'wednesday', '8-12': 294, '12-14': 492, '14-16': 280, '16-18': 67 },\n { id: 'thursday', '8-12': 312, '12-14': 501, '14-16': 455, '16-18': 112 },\n { id: 'friday', '8-12': 150, '12-14': 142, '14-16': 362, '16-18': 455 },\n ];\n\n const verticalHeaders = [\n { key: 'monday', headerName: 'Monday' },\n { key: 'tuesday', headerName: 'Tuesday' },\n { key: 'wednesday', headerName: 'Wednesday' },\n { key: 'thursday', headerName: 'Thursday' },\n { key: 'friday', headerName: 'Friday' },\n ];\n\n const caption = (\n \n Table 1: Table description\n \n );\n\n return (\n
\n \n
\n );\n};\n\n// args is required for docs tab to show source code\n\nexport const Sorting = (args) => {\n const cols = [\n { key: 'id', headerName: 'Not rendered' },\n { key: 'firstName', headerName: 'First name', isSortable: true },\n { key: 'surname', headerName: 'Surname', isSortable: true },\n {\n key: 'age',\n headerName: 'Age',\n sortIconType: 'other' as const,\n transform: ({ age }) => {\n return
{age}
;\n },\n isSortable: true,\n },\n { key: 'profession', headerName: 'Profession', isSortable: true },\n ];\n\n const rows: Array = [\n { id: 1000, firstName: 'Lauri', surname: 'Kekkonen', age: 39, profession: 'Engineer' },\n { id: 1001, firstName: 'Maria', surname: 'Sarasoja', age: 62, profession: 'Designer' },\n { id: 1002, firstName: 'Anneli', surname: 'Routa', age: 50, profession: 'Meteorologist' },\n { id: 1003, firstName: 'Osku', surname: 'Rausku', age: 18, profession: 'Mail Carrier' },\n { id: 1004, firstName: 'Linda', surname: 'Koululainen', age: 8, profession: 'School student' },\n ];\n\n const caption = (\n \n Table 1: Table description\n \n );\n\n return (\n
\n \n
\n );\n};\n\n// args is required for docs tab to show source code\n\nexport const SortingLightVariant = (args) => {\n const cols = [\n { key: 'id', headerName: 'Not rendered' },\n { key: 'firstName', headerName: 'First name', isSortable: true },\n { key: 'surname', headerName: 'Surname', isSortable: true },\n {\n key: 'age',\n headerName: 'Age',\n sortIconType: 'other' as const,\n transform: ({ age }) => {\n return
{age}
;\n },\n isSortable: true,\n },\n { key: 'profession', headerName: 'Profession', isSortable: true },\n ];\n\n const rows: Array = [\n { id: 1000, firstName: 'Lauri', surname: 'Kekkonen', age: 39, profession: 'Engineer' },\n { id: 1001, firstName: 'Maria', surname: 'Sarasoja', age: 62, profession: 'Designer' },\n { id: 1002, firstName: 'Anneli', surname: 'Routa', age: 50, profession: 'Meteorologist' },\n { id: 1003, firstName: 'Osku', surname: 'Rausku', age: 18, profession: 'Mail Carrier' },\n { id: 1004, firstName: 'Linda', surname: 'Koululainen', age: 8, profession: 'School student' },\n ];\n\n const caption = (\n \n Table 1: Table description\n \n );\n\n return (\n
\n \n
\n );\n};\n\n// args is required for docs tab to show source code\n\nexport const InitiallySortedBy = (args) => {\n const cols = [\n { key: 'id', headerName: 'Not rendered' },\n { key: 'firstName', headerName: 'First name', isSortable: true },\n { key: 'surname', headerName: 'Surname', isSortable: true },\n {\n key: 'age',\n headerName: 'Age',\n sortIconType: 'other' as const,\n transform: ({ age }) => {\n return
{age}
;\n },\n isSortable: true,\n },\n { key: 'profession', headerName: 'Profession', isSortable: true },\n ];\n\n const rows: Array = [\n { id: 1000, firstName: 'Lauri', surname: 'Kekkonen', age: 39, profession: 'Engineer' },\n { id: 1001, firstName: 'Maria', surname: 'Sarasoja', age: 62, profession: 'Designer' },\n { id: 1002, firstName: 'Anneli', surname: 'Routa', age: 50, profession: 'Meteorologist' },\n { id: 1003, firstName: 'Osku', surname: 'Rausku', age: 18, profession: 'Mail Carrier' },\n { id: 1004, firstName: 'Linda', surname: 'Koululainen', age: 8, profession: 'School student' },\n ];\n\n const caption = (\n \n Table 1: Table description\n \n );\n\n return (\n
\n \n
\n );\n};\n\n// args is required for docs tab to show source code\n\nexport const CustomSortFunction = (args) => {\n const cols = [\n { key: 'Paikka-ID', headerName: 'Paikka-ID', isSortable: true },\n { key: 'Paikan tyyppi', headerName: 'Paikan tyyppi', isSortable: false },\n { key: 'Tehtävänimike', headerName: 'Tehtävänimike', isSortable: true },\n {\n key: 'Ilmoitus vanhenee',\n headerName: 'Ilmoitus vanhenee',\n sortIconType: 'other' as const,\n customSortCompareFunction: (a, b) => {\n const aDate = parse(a, 'dd.MM.yyyy', new Date());\n const bDate = parse(b, 'dd.MM.yyyy', new Date());\n\n if (isSameDay(aDate, bDate)) {\n return 0;\n }\n\n if (isBefore(aDate, bDate)) {\n return -1;\n }\n\n return 1;\n },\n isSortable: true,\n },\n { key: 'Toimiala/liikelaitos', headerName: 'Toimiala/liikelaitos', isSortable: true },\n { key: 'Työpaikka', headerName: 'Työpaikka', isSortable: true },\n { key: 'Postinumero', headerName: 'Postinumero', isSortable: true },\n {\n key: 'Paikkoja',\n headerName: 'Paikkoja',\n sortIconType: 'other' as const,\n transform: ({ Paikkoja }) => {\n return
{Paikkoja}
;\n },\n isSortable: true,\n },\n {\n key: 'Haastatteluun halutaan',\n headerName: 'Haastatteluun halutaan',\n sortIconType: 'other' as const,\n transform: (row) => {\n return
{row['Haastatteluun halutaan']}
;\n },\n isSortable: true,\n },\n ];\n\n const rows: Array = workTrial;\n\n const caption = (\n \n Table 1: Table description\n \n );\n\n return (\n
\n \n
\n );\n};\n\n// args is required for docs tab to show source code\n\nexport const SortingSideEffects = (args) => {\n const cols = [\n { key: 'id', headerName: 'Not rendered' },\n { key: 'firstName', headerName: 'First name', isSortable: true },\n { key: 'surname', headerName: 'Surname', isSortable: true },\n {\n key: 'age',\n headerName: 'Age',\n sortIconType: 'other' as const,\n transform: ({ age }) => {\n return
{age}
;\n },\n isSortable: true,\n },\n { key: 'profession', headerName: 'Profession', isSortable: true },\n ];\n\n const data: Array = [\n { id: 1000, firstName: 'Lauri', surname: 'Kekkonen', age: 39, profession: 'Engineer' },\n { id: 1001, firstName: 'Maria', surname: 'Sarasoja', age: 62, profession: 'Designer' },\n { id: 1002, firstName: 'Anneli', surname: 'Routa', age: 50, profession: 'Meteorologist' },\n { id: 1003, firstName: 'Osku', surname: 'Rausku', age: 18, profession: 'Mail Carrier' },\n { id: 1004, firstName: 'Linda', surname: 'Koululainen', age: 8, profession: 'School student' },\n ];\n const [loading, toggleLoading] = useState(false);\n const [rows, setRows] = useState(data);\n\n useEffect(() => {\n if (loading) {\n setTimeout(() => {\n toggleLoading((currentValue) => !currentValue);\n setRows(data);\n }, 1000);\n }\n }, [loading]);\n\n const caption = (\n \n Table 1: Table with loading spinner\n \n );\n\n return (\n
\n {\n // Side effects\n setRows([]);\n toggleLoading((currentValue) => !currentValue);\n // Call table's own sorting function\n handleSort();\n }}\n />\n {loading && }\n
\n );\n};\n\nSortingSideEffects.parameters = {\n loki: { skip: true }, // The starting point is exactly the same as for other tables\n};\n\n// args is required for docs tab to show source code\n\nexport const CheckboxSelection = (args) => {\n const cols = [\n { key: 'id', headerName: 'Not rendered' },\n { key: 'firstName', headerName: 'First name' },\n { key: 'surname', headerName: 'Surname' },\n {\n key: 'age',\n headerName: 'Age',\n transform: ({ age }) => {\n return
{age}
;\n },\n },\n { key: 'profession', headerName: 'Profession' },\n ];\n\n const rows: Array = [\n { id: 1000, firstName: 'Lauri', surname: 'Kekkonen', age: 39, profession: 'Engineer' },\n { id: 1001, firstName: 'Maria', surname: 'Sarasoja', age: 62, profession: 'Designer' },\n { id: 1002, firstName: 'Anneli', surname: 'Routa', age: 50, profession: 'Meteorologist' },\n { id: 1003, firstName: 'Osku', surname: 'Rausku', age: 18, profession: 'Mail Carrier' },\n ];\n\n const [selectedRows, setSelectedRows] = useState([]);\n\n return (\n
\n \n
\n );\n};\n\n// args is required for docs tab to show source code\n\nexport const CheckboxSelectionDense = (args) => {\n const cols = [\n { key: 'id', headerName: 'Not rendered' },\n { key: 'firstName', headerName: 'First name' },\n { key: 'surname', headerName: 'Surname' },\n {\n key: 'age',\n headerName: 'Age',\n transform: ({ age }) => {\n return
{age}
;\n },\n },\n { key: 'profession', headerName: 'Profession' },\n ];\n\n const rows: Array = [\n { id: 1000, firstName: 'Lauri', surname: 'Kekkonen', age: 39, profession: 'Engineer' },\n { id: 1001, firstName: 'Maria', surname: 'Sarasoja', age: 62, profession: 'Designer' },\n { id: 1002, firstName: 'Anneli', surname: 'Routa', age: 50, profession: 'Meteorologist' },\n { id: 1003, firstName: 'Osku', surname: 'Rausku', age: 18, profession: 'Mail Carrier' },\n ];\n\n const [selectedRows, setSelectedRows] = useState([]);\n\n return (\n
\n \n
\n );\n};\n\n// args is required for docs tab to show source code\n\nexport const InitiallySelectedRows = (args) => {\n const cols = [\n { key: 'id', headerName: 'Not rendered' },\n { key: 'firstName', headerName: 'First name' },\n { key: 'surname', headerName: 'Surname' },\n {\n key: 'age',\n headerName: 'Age',\n transform: ({ age }) => {\n return
{age}
;\n },\n },\n { key: 'profession', headerName: 'Profession' },\n ];\n\n const rows: Array = [\n { id: 1000, firstName: 'Lauri', surname: 'Kekkonen', age: 39, profession: 'Engineer' },\n { id: 1001, firstName: 'Maria', surname: 'Sarasoja', age: 62, profession: 'Designer' },\n { id: 1002, firstName: 'Anneli', surname: 'Routa', age: 50, profession: 'Meteorologist' },\n { id: 1003, firstName: 'Osku', surname: 'Rausku', age: 18, profession: 'Mail Carrier' },\n ];\n\n const [selectedRows, setSelectedRows] = useState([1002, 1003]);\n\n return (\n
\n \n
\n );\n};\n\n// args is required for docs tab to show source code\n\nexport const WithCustomActions = (args) => {\n const cols = [\n { key: 'id', headerName: 'Not rendered' },\n { key: 'firstName', headerName: 'First name' },\n { key: 'surname', headerName: 'Surname' },\n {\n key: 'age',\n headerName: 'Age',\n transform: ({ age }) => {\n return
{age}
;\n },\n },\n { key: 'profession', headerName: 'Profession' },\n ];\n\n const indexKey = 'id';\n\n const rows: Array = [\n { id: 1000, firstName: 'Lauri', surname: 'Kekkonen', age: 39, profession: 'Engineer' },\n { id: 1001, firstName: 'Maria', surname: 'Sarasoja', age: 62, profession: 'Designer' },\n { id: 1002, firstName: 'Anneli', surname: 'Routa', age: 50, profession: 'Meteorologist' },\n { id: 1003, firstName: 'Osku', surname: 'Rausku', age: 18, profession: 'Mail Carrier' },\n ];\n\n const [tableRows, setTableRows] = useState(rows);\n const [selectedRows, setSelectedRows] = useState([]);\n\n const deleteSelectedButton = (\n {\n setTableRows(\n tableRows.filter((row) => {\n const rowId = row[indexKey];\n\n return (\n selectedRows.some((selectedRow) => {\n return selectedRow === rowId;\n }) === false\n );\n }),\n );\n setSelectedRows([]);\n }}\n style={{\n flexGrow: 0,\n }}\n className=\"table-custom-action\"\n variant=\"secondary\"\n size=\"small\"\n iconLeft={}\n disabled={selectedRows.length === 0}\n >\n Delete selected\n \n );\n\n const copySelected = (\n {\n \n console.log('Copy clicked!');\n }}\n style={{\n flexGrow: 0,\n }}\n className=\"table-custom-action\"\n variant=\"secondary\"\n size=\"small\"\n disabled={selectedRows.length === 0}\n >\n Copy selected\n \n );\n\n return (\n
\n \n
\n );\n};\n\n// args is required for docs tab to show source code\n\nexport const CheckboxSelectionWithSorting = (args) => {\n const cols = [\n { key: 'id', headerName: 'Not rendered' },\n { key: 'firstName', headerName: 'First name', isSortable: true },\n { key: 'surname', headerName: 'Surname', isSortable: true },\n {\n key: 'age',\n headerName: 'Age',\n sortIconType: 'other' as const,\n transform: ({ age }) => {\n return
{age}
;\n },\n isSortable: true,\n },\n { key: 'profession', headerName: 'Profession', isSortable: true },\n ];\n\n const rows: Array = [\n { id: 1000, firstName: 'Lauri', surname: 'Kekkonen', age: 39, profession: 'Engineer' },\n { id: 1001, firstName: 'Maria', surname: 'Sarasoja', age: 62, profession: 'Designer' },\n { id: 1002, firstName: 'Anneli', surname: 'Routa', age: 50, profession: 'Meteorologist' },\n { id: 1003, firstName: 'Osku', surname: 'Rausku', age: 18, profession: 'Mail Carrier' },\n { id: 1004, firstName: 'Linda', surname: 'Koululainen', age: 8, profession: 'School student' },\n ];\n\n const [selectedRows, setSelectedRows] = useState([]);\n\n return (\n
\n \n
\n );\n};\n\n// args is required for docs tab to show source code\n\nexport const CustomBackgroundColorsForDarkVariant = (args) => {\n const cols = [\n { key: 'id', headerName: 'Not rendered' },\n { key: 'firstName', headerName: 'First name' },\n { key: 'surname', headerName: 'Surname' },\n {\n key: 'age',\n headerName: 'Age',\n transform: ({ age }) => {\n return
{age}
;\n },\n },\n { key: 'profession', headerName: 'Profession' },\n ];\n\n const rows: Array = [\n { id: 1000, firstName: 'Lauri', surname: 'Kekkonen', age: 39, profession: 'Engineer' },\n { id: 1001, firstName: 'Maria', surname: 'Sarasoja', age: 62, profession: 'Designer' },\n { id: 1002, firstName: 'Anneli', surname: 'Routa', age: 50, profession: 'Meteorologist' },\n { id: 1003, firstName: 'Osku', surname: 'Rausku', age: 18, profession: 'Mail Carrier' },\n ];\n\n const caption = (\n \n Table 1: Table description\n \n );\n\n const theme = {\n '--header-background-color': 'var(--color-tram)',\n '--content-background-color': 'var(--color-black-5)',\n };\n\n return (\n
\n \n
\n );\n};\n\n// args is required for docs tab to show source code\n\nexport const CustomBackgroundColorsForLightVariant = (args) => {\n const cols = [\n { key: 'id', headerName: 'Not rendered' },\n { key: 'firstName', headerName: 'First name' },\n { key: 'surname', headerName: 'Surname' },\n {\n key: 'age',\n headerName: 'Age',\n transform: ({ age }) => {\n return
{age}
;\n },\n },\n { key: 'profession', headerName: 'Profession' },\n ];\n\n const rows: Array = [\n { id: 1000, firstName: 'Lauri', surname: 'Kekkonen', age: 39, profession: 'Engineer' },\n { id: 1001, firstName: 'Maria', surname: 'Sarasoja', age: 62, profession: 'Designer' },\n { id: 1002, firstName: 'Anneli', surname: 'Routa', age: 50, profession: 'Meteorologist' },\n { id: 1003, firstName: 'Osku', surname: 'Rausku', age: 18, profession: 'Mail Carrier' },\n ];\n\n const caption = (\n \n Table 1: Table description\n \n );\n\n const theme = {\n '--header-background-color': 'var(--color-suomenlinna)',\n '--content-background-color': 'var(--color-black-5)',\n };\n\n return (\n
\n \n
\n );\n};\n",locationsMap:{default:{startLoc:{col:23,line:21},endLoc:{col:1,line:54},startBody:{col:23,line:21},endBody:{col:1,line:54}},light:{startLoc:{col:21,line:58},endLoc:{col:1,line:91},startBody:{col:21,line:58},endBody:{col:1,line:91}},dense:{startLoc:{col:21,line:95},endLoc:{col:1,line:128},startBody:{col:21,line:95},endBody:{col:1,line:128}},zebra:{startLoc:{col:21,line:132},endLoc:{col:1,line:205},startBody:{col:21,line:132},endBody:{col:1,line:205}},"vertical-lines":{startLoc:{col:29,line:209},endLoc:{col:1,line:242},startBody:{col:29,line:209},endBody:{col:1,line:242}},"vertical-headers":{startLoc:{col:31,line:246},endLoc:{col:1,line:290},startBody:{col:31,line:246},endBody:{col:1,line:290}},sorting:{startLoc:{col:23,line:294},endLoc:{col:1,line:339},startBody:{col:23,line:294},endBody:{col:1,line:339}},"sorting-light-variant":{startLoc:{col:35,line:343},endLoc:{col:1,line:389},startBody:{col:35,line:343},endBody:{col:1,line:389}},"initially-sorted-by":{startLoc:{col:33,line:393},endLoc:{col:1,line:440},startBody:{col:33,line:393},endBody:{col:1,line:440}},"custom-sort-function":{startLoc:{col:34,line:444},endLoc:{col:1,line:516},startBody:{col:34,line:444},endBody:{col:1,line:516}},"sorting-side-effects":{startLoc:{col:34,line:520},endLoc:{col:1,line:584},startBody:{col:34,line:520},endBody:{col:1,line:584}},"checkbox-selection":{startLoc:{col:33,line:592},endLoc:{col:1,line:634},startBody:{col:33,line:592},endBody:{col:1,line:634}},"checkbox-selection-dense":{startLoc:{col:38,line:638},endLoc:{col:1,line:681},startBody:{col:38,line:638},endBody:{col:1,line:681}},"initially-selected-rows":{startLoc:{col:37,line:685},endLoc:{col:1,line:728},startBody:{col:37,line:685},endBody:{col:1,line:728}},"with-custom-actions":{startLoc:{col:33,line:732},endLoc:{col:1,line:828},startBody:{col:33,line:732},endBody:{col:1,line:828}},"checkbox-selection-with-sorting":{startLoc:{col:44,line:832},endLoc:{col:1,line:880},startBody:{col:44,line:832},endBody:{col:1,line:880}},"custom-background-colors-for-dark-variant":{startLoc:{col:52,line:884},endLoc:{col:1,line:930},startBody:{col:52,line:884},endBody:{col:1,line:930}},"custom-background-colors-for-light-variant":{startLoc:{col:53,line:934},endLoc:{col:1,line:980},startBody:{col:53,line:934},endBody:{col:1,line:980}}}},controls:{expanded:!0}},args:{}};var Default=function Default(args){var cols=[{key:"id",headerName:"Not rendered"},{key:"firstName",headerName:"First name"},{key:"surname",headerName:"Surname"},{key:"age",headerName:"Age",transform:function transform(_ref){var age=_ref.age;return(0,jsx_runtime.jsx)("div",{style:{textAlign:"right"},children:age})}},{key:"profession",headerName:"Profession"}],caption=(0,jsx_runtime.jsxs)("span",{children:[(0,jsx_runtime.jsx)("b",{children:"Table 1"}),": Table description"]});return(0,jsx_runtime.jsx)("div",{style:{maxWidth:"640px"},children:(0,jsx_runtime.jsx)(Table.i,{cols,rows:[{id:1e3,firstName:"Lauri",surname:"Kekkonen",age:39,profession:"Engineer"},{id:1001,firstName:"Maria",surname:"Sarasoja",age:62,profession:"Designer"},{id:1002,firstName:"Anneli",surname:"Routa",age:50,profession:"Meteorologist"},{id:1003,firstName:"Osku",surname:"Rausku",age:18,profession:"Mail Carrier"}],caption,indexKey:"id",renderIndexCol:!1})})},Light=function Light(args){var cols=[{key:"id",headerName:"Not rendered"},{key:"firstName",headerName:"First name"},{key:"surname",headerName:"Surname"},{key:"age",headerName:"Age",transform:function transform(_ref2){var age=_ref2.age;return(0,jsx_runtime.jsx)("div",{style:{textAlign:"right"},children:age})}},{key:"profession",headerName:"Profession"}],caption=(0,jsx_runtime.jsxs)("span",{children:[(0,jsx_runtime.jsx)("b",{children:"Table 1"}),": Table description"]});return(0,jsx_runtime.jsx)("div",{style:{maxWidth:"640px"},children:(0,jsx_runtime.jsx)(Table.i,{caption,cols,variant:"light",indexKey:"id",renderIndexCol:!1,rows:[{id:1e3,firstName:"Lauri",surname:"Kekkonen",age:39,profession:"Engineer"},{id:1001,firstName:"Maria",surname:"Sarasoja",age:62,profession:"Designer"},{id:1002,firstName:"Anneli",surname:"Routa",age:50,profession:"Meteorologist"},{id:1003,firstName:"Osku",surname:"Rausku",age:18,profession:"Mail Carrier"}]})})},Dense=function Dense(args){var cols=[{key:"id",headerName:"Not rendered"},{key:"firstName",headerName:"First name"},{key:"surname",headerName:"Surname"},{key:"age",headerName:"Age",transform:function transform(_ref3){var age=_ref3.age;return(0,jsx_runtime.jsx)("div",{style:{textAlign:"right"},children:age})}},{key:"profession",headerName:"Profession"}],caption=(0,jsx_runtime.jsxs)("span",{children:[(0,jsx_runtime.jsx)("b",{children:"Table 1"}),": Table description"]});return(0,jsx_runtime.jsx)("div",{style:{maxWidth:"500px"},children:(0,jsx_runtime.jsx)(Table.i,{cols,rows:[{id:1e3,firstName:"Lauri",surname:"Kekkonen",age:39,profession:"Engineer"},{id:1001,firstName:"Maria",surname:"Sarasoja",age:62,profession:"Designer"},{id:1002,firstName:"Anneli",surname:"Routa",age:50,profession:"Meteorologist"},{id:1003,firstName:"Osku",surname:"Rausku",age:18,profession:"Mail Carrier"}],dense:!0,caption,indexKey:"id",renderIndexCol:!1})})},Zebra=function Zebra(args){var cols=[{key:"id",headerName:"Not rendered"},{key:"firstName",headerName:"First name"},{key:"surname",headerName:"Surname"},{key:"age",headerName:"Age",transform:function transform(_ref4){var age=_ref4.age;return(0,jsx_runtime.jsx)("div",{style:{textAlign:"right"},children:age})}},{key:"city",headerName:"City"},{key:"profession",headerName:"Profession"},{key:"experience",headerName:"Experience (years)",transform:function transform(_ref5){var experience=_ref5.experience;return(0,jsx_runtime.jsx)("div",{style:{textAlign:"right"},children:experience})}}],caption=(0,jsx_runtime.jsxs)("span",{children:[(0,jsx_runtime.jsx)("b",{children:"Table 1"}),": Table description"]});return(0,jsx_runtime.jsx)("div",{style:{maxWidth:"800px"},children:(0,jsx_runtime.jsx)(Table.i,{rows:[{id:1e3,firstName:"Lauri",surname:"Kekkonen",age:39,city:"Helsinki",profession:"Engineer",experience:10},{id:1001,firstName:"Maria",surname:"Sarasoja",age:62,city:"Tampere",profession:"Designer",experience:39},{id:1002,firstName:"Anneli",surname:"Routa",age:50,city:"Turku",profession:"Meteorologist",experience:25},{id:1003,firstName:"Osku",surname:"Rausku",age:18,city:"Oulu",profession:"Mail Carrier",experience:1}],cols,caption,zebra:!0,indexKey:"id",renderIndexCol:!1})})},VerticalLines=function VerticalLines(args){var cols=[{key:"id",headerName:"Not rendered"},{key:"firstName",headerName:"First name"},{key:"surname",headerName:"Surname"},{key:"age",headerName:"Age",transform:function transform(_ref6){var age=_ref6.age;return(0,jsx_runtime.jsx)("div",{style:{textAlign:"right"},children:age})}},{key:"profession",headerName:"Profession"}],caption=(0,jsx_runtime.jsxs)("span",{children:[(0,jsx_runtime.jsx)("b",{children:"Table 1"}),": Table description"]});return(0,jsx_runtime.jsx)("div",{style:{maxWidth:"640px"},children:(0,jsx_runtime.jsx)(Table.i,{verticalLines:!0,cols,rows:[{id:1e3,firstName:"Lauri",surname:"Kekkonen",age:39,profession:"Engineer"},{id:1001,firstName:"Maria",surname:"Sarasoja",age:62,profession:"Designer"},{id:1002,firstName:"Anneli",surname:"Routa",age:50,profession:"Meteorologist"},{id:1003,firstName:"Osku",surname:"Rausku",age:18,profession:"Mail Carrier"}],caption,indexKey:"id",renderIndexCol:!1})})},VerticalHeaders=function VerticalHeaders(args){var caption=(0,jsx_runtime.jsxs)("span",{children:[(0,jsx_runtime.jsx)("b",{children:"Table 1"}),": Table description"]});return(0,jsx_runtime.jsx)("div",{style:{maxWidth:"486px"},children:(0,jsx_runtime.jsx)(Table.i,{verticalHeaders:[{key:"monday",headerName:"Monday"},{key:"tuesday",headerName:"Tuesday"},{key:"wednesday",headerName:"Wednesday"},{key:"thursday",headerName:"Thursday"},{key:"friday",headerName:"Friday"}],cols:[{key:"id",headerName:"Not rendered"},{key:"8-12",headerName:"8-12"},{key:"12-14",headerName:"12-14"},{key:"14-16",headerName:"14-16"},{key:"16-18",headerName:"16-18"}],rows:[{id:"monday","8-12":324,"12-14":562,"14-16":280,"16-18":94},{id:"tuesday","8-12":341,"12-14":688,"14-16":425,"16-18":113},{id:"wednesday","8-12":294,"12-14":492,"14-16":280,"16-18":67},{id:"thursday","8-12":312,"12-14":501,"14-16":455,"16-18":112},{id:"friday","8-12":150,"12-14":142,"14-16":362,"16-18":455}],caption,textAlignContentRight:!0,indexKey:"id",renderIndexCol:!1})})},Sorting=function Sorting(args){var cols=[{key:"id",headerName:"Not rendered"},{key:"firstName",headerName:"First name",isSortable:!0},{key:"surname",headerName:"Surname",isSortable:!0},{key:"age",headerName:"Age",sortIconType:"other",transform:function transform(_ref7){var age=_ref7.age;return(0,jsx_runtime.jsx)("div",{style:{textAlign:"right"},children:age})},isSortable:!0},{key:"profession",headerName:"Profession",isSortable:!0}],caption=(0,jsx_runtime.jsxs)("span",{children:[(0,jsx_runtime.jsx)("b",{children:"Table 1"}),": Table description"]});return(0,jsx_runtime.jsx)("div",{style:{maxWidth:"640px"},children:(0,jsx_runtime.jsx)(Table.i,{ariaLabelSortButtonUnset:"Not sorted",ariaLabelSortButtonAscending:"Sorted in ascending order",ariaLabelSortButtonDescending:"Sorted in descending order",indexKey:"id",renderIndexCol:!1,cols,rows:[{id:1e3,firstName:"Lauri",surname:"Kekkonen",age:39,profession:"Engineer"},{id:1001,firstName:"Maria",surname:"Sarasoja",age:62,profession:"Designer"},{id:1002,firstName:"Anneli",surname:"Routa",age:50,profession:"Meteorologist"},{id:1003,firstName:"Osku",surname:"Rausku",age:18,profession:"Mail Carrier"},{id:1004,firstName:"Linda",surname:"Koululainen",age:8,profession:"School student"}],caption})})},SortingLightVariant=function SortingLightVariant(args){var cols=[{key:"id",headerName:"Not rendered"},{key:"firstName",headerName:"First name",isSortable:!0},{key:"surname",headerName:"Surname",isSortable:!0},{key:"age",headerName:"Age",sortIconType:"other",transform:function transform(_ref8){var age=_ref8.age;return(0,jsx_runtime.jsx)("div",{style:{textAlign:"right"},children:age})},isSortable:!0},{key:"profession",headerName:"Profession",isSortable:!0}],caption=(0,jsx_runtime.jsxs)("span",{children:[(0,jsx_runtime.jsx)("b",{children:"Table 1"}),": Table description"]});return(0,jsx_runtime.jsx)("div",{style:{maxWidth:"640px"},children:(0,jsx_runtime.jsx)(Table.i,{variant:"light",ariaLabelSortButtonUnset:"Not sorted",ariaLabelSortButtonAscending:"Sorted in ascending order",ariaLabelSortButtonDescending:"Sorted in descending order",indexKey:"id",renderIndexCol:!1,cols,rows:[{id:1e3,firstName:"Lauri",surname:"Kekkonen",age:39,profession:"Engineer"},{id:1001,firstName:"Maria",surname:"Sarasoja",age:62,profession:"Designer"},{id:1002,firstName:"Anneli",surname:"Routa",age:50,profession:"Meteorologist"},{id:1003,firstName:"Osku",surname:"Rausku",age:18,profession:"Mail Carrier"},{id:1004,firstName:"Linda",surname:"Koululainen",age:8,profession:"School student"}],caption})})},InitiallySortedBy=function InitiallySortedBy(args){var cols=[{key:"id",headerName:"Not rendered"},{key:"firstName",headerName:"First name",isSortable:!0},{key:"surname",headerName:"Surname",isSortable:!0},{key:"age",headerName:"Age",sortIconType:"other",transform:function transform(_ref9){var age=_ref9.age;return(0,jsx_runtime.jsx)("div",{style:{textAlign:"right"},children:age})},isSortable:!0},{key:"profession",headerName:"Profession",isSortable:!0}],caption=(0,jsx_runtime.jsxs)("span",{children:[(0,jsx_runtime.jsx)("b",{children:"Table 1"}),": Table description"]});return(0,jsx_runtime.jsx)("div",{style:{maxWidth:"640px"},children:(0,jsx_runtime.jsx)(Table.i,{initialSortingColumnKey:"age",initialSortingOrder:"desc",ariaLabelSortButtonUnset:"Not sorted",ariaLabelSortButtonAscending:"Sorted in ascending order",ariaLabelSortButtonDescending:"Sorted in descending order",rows:[{id:1e3,firstName:"Lauri",surname:"Kekkonen",age:39,profession:"Engineer"},{id:1001,firstName:"Maria",surname:"Sarasoja",age:62,profession:"Designer"},{id:1002,firstName:"Anneli",surname:"Routa",age:50,profession:"Meteorologist"},{id:1003,firstName:"Osku",surname:"Rausku",age:18,profession:"Mail Carrier"},{id:1004,firstName:"Linda",surname:"Koululainen",age:8,profession:"School student"}],cols,indexKey:"id",renderIndexCol:!1,caption})})},CustomSortFunction=function CustomSortFunction(args){var cols=[{key:"Paikka-ID",headerName:"Paikka-ID",isSortable:!0},{key:"Paikan tyyppi",headerName:"Paikan tyyppi",isSortable:!1},{key:"Tehtävänimike",headerName:"Tehtävänimike",isSortable:!0},{key:"Ilmoitus vanhenee",headerName:"Ilmoitus vanhenee",sortIconType:"other",customSortCompareFunction:function customSortCompareFunction(a,b){var aDate=(0,parse.Z)(a,"dd.MM.yyyy",new Date),bDate=(0,parse.Z)(b,"dd.MM.yyyy",new Date);return(0,isSameDay.Z)(aDate,bDate)?0:(0,isBefore.Z)(aDate,bDate)?-1:1},isSortable:!0},{key:"Toimiala/liikelaitos",headerName:"Toimiala/liikelaitos",isSortable:!0},{key:"Työpaikka",headerName:"Työpaikka",isSortable:!0},{key:"Postinumero",headerName:"Postinumero",isSortable:!0},{key:"Paikkoja",headerName:"Paikkoja",sortIconType:"other",transform:function transform(_ref10){var Paikkoja=_ref10.Paikkoja;return(0,jsx_runtime.jsx)("div",{style:{textAlign:"right"},children:Paikkoja})},isSortable:!0},{key:"Haastatteluun halutaan",headerName:"Haastatteluun halutaan",sortIconType:"other",transform:function transform(row){return(0,jsx_runtime.jsx)("div",{style:{textAlign:"right"},children:row["Haastatteluun halutaan"]})},isSortable:!0}],rows=story_example_work_trial_namespaceObject,caption=(0,jsx_runtime.jsxs)("span",{children:[(0,jsx_runtime.jsx)("b",{children:"Table 1"}),": Table description"]});return(0,jsx_runtime.jsx)("div",{style:{maxWidth:"1200px",height:"600px"},children:(0,jsx_runtime.jsx)(Table.i,{initialSortingColumnKey:"Ilmoitus vanhenee",initialSortingOrder:"asc",ariaLabelSortButtonUnset:"Not sorted",ariaLabelSortButtonAscending:"Sorted in ascending order",ariaLabelSortButtonDescending:"Sorted in descending order",cols,rows,indexKey:"Paikka-ID",caption,dense:!0})})},SortingSideEffects=function SortingSideEffects(args){var cols=[{key:"id",headerName:"Not rendered"},{key:"firstName",headerName:"First name",isSortable:!0},{key:"surname",headerName:"Surname",isSortable:!0},{key:"age",headerName:"Age",sortIconType:"other",transform:function transform(_ref11){var age=_ref11.age;return(0,jsx_runtime.jsx)("div",{style:{textAlign:"right"},children:age})},isSortable:!0},{key:"profession",headerName:"Profession",isSortable:!0}],data=[{id:1e3,firstName:"Lauri",surname:"Kekkonen",age:39,profession:"Engineer"},{id:1001,firstName:"Maria",surname:"Sarasoja",age:62,profession:"Designer"},{id:1002,firstName:"Anneli",surname:"Routa",age:50,profession:"Meteorologist"},{id:1003,firstName:"Osku",surname:"Rausku",age:18,profession:"Mail Carrier"},{id:1004,firstName:"Linda",surname:"Koululainen",age:8,profession:"School student"}],_useState=(0,react.useState)(!1),_useState2=(0,slicedToArray.Z)(_useState,2),loading=_useState2[0],toggleLoading=_useState2[1],_useState3=(0,react.useState)(data),_useState4=(0,slicedToArray.Z)(_useState3,2),rows=_useState4[0],setRows=_useState4[1];(0,react.useEffect)((function(){loading&&setTimeout((function(){toggleLoading((function(currentValue){return!currentValue})),setRows(data)}),1e3)}),[loading]);var caption=(0,jsx_runtime.jsxs)("span",{children:[(0,jsx_runtime.jsx)("b",{children:"Table 1"}),": Table with loading spinner"]});return(0,jsx_runtime.jsxs)("div",{style:{maxWidth:"640px",display:"flex",flexDirection:"column",alignItems:"center"},children:[(0,jsx_runtime.jsx)(Table.i,{ariaLabelSortButtonUnset:"Not sorted",ariaLabelSortButtonAscending:"Sorted in ascending order",ariaLabelSortButtonDescending:"Sorted in descending order",indexKey:"id",renderIndexCol:!1,cols,rows,caption,onSort:function onSort(order,colKey,handleSort){setRows([]),toggleLoading((function(currentValue){return!currentValue})),handleSort()}}),loading&&(0,jsx_runtime.jsx)(LoadingSpinner.T,{style:{marginTop:"var(--spacing-l)"}})]})};SortingSideEffects.parameters={loki:{skip:!0}};var CheckboxSelection=function CheckboxSelection(args){var cols=[{key:"id",headerName:"Not rendered"},{key:"firstName",headerName:"First name"},{key:"surname",headerName:"Surname"},{key:"age",headerName:"Age",transform:function transform(_ref12){var age=_ref12.age;return(0,jsx_runtime.jsx)("div",{style:{textAlign:"right"},children:age})}},{key:"profession",headerName:"Profession"}],_useState5=(0,react.useState)([]),_useState6=(0,slicedToArray.Z)(_useState5,2),selectedRows=_useState6[0],setSelectedRows=_useState6[1];return(0,jsx_runtime.jsx)("div",{style:{maxWidth:"640px"},children:(0,jsx_runtime.jsx)(Table.i,{checkboxSelection:!0,selectedRows,setSelectedRows,heading:"Employees",id:"checkbox-selection",indexKey:"id",renderIndexCol:!1,cols,rows:[{id:1e3,firstName:"Lauri",surname:"Kekkonen",age:39,profession:"Engineer"},{id:1001,firstName:"Maria",surname:"Sarasoja",age:62,profession:"Designer"},{id:1002,firstName:"Anneli",surname:"Routa",age:50,profession:"Meteorologist"},{id:1003,firstName:"Osku",surname:"Rausku",age:18,profession:"Mail Carrier"}],selectAllRowsText:"Select all rows",clearSelectionsText:"Clear selections",ariaLabelCheckboxSelection:"Row selection"})})},CheckboxSelectionDense=function CheckboxSelectionDense(args){var cols=[{key:"id",headerName:"Not rendered"},{key:"firstName",headerName:"First name"},{key:"surname",headerName:"Surname"},{key:"age",headerName:"Age",transform:function transform(_ref13){var age=_ref13.age;return(0,jsx_runtime.jsx)("div",{style:{textAlign:"right"},children:age})}},{key:"profession",headerName:"Profession"}],_useState7=(0,react.useState)([]),_useState8=(0,slicedToArray.Z)(_useState7,2),selectedRows=_useState8[0],setSelectedRows=_useState8[1];return(0,jsx_runtime.jsx)("div",{style:{maxWidth:"500px"},children:(0,jsx_runtime.jsx)(Table.i,{dense:!0,checkboxSelection:!0,selectedRows,setSelectedRows,heading:"Employees",id:"checkbox-selection-dense",cols,rows:[{id:1e3,firstName:"Lauri",surname:"Kekkonen",age:39,profession:"Engineer"},{id:1001,firstName:"Maria",surname:"Sarasoja",age:62,profession:"Designer"},{id:1002,firstName:"Anneli",surname:"Routa",age:50,profession:"Meteorologist"},{id:1003,firstName:"Osku",surname:"Rausku",age:18,profession:"Mail Carrier"}],indexKey:"id",renderIndexCol:!1,selectAllRowsText:"Select all rows",clearSelectionsText:"Clear selections",ariaLabelCheckboxSelection:"Row selection"})})},InitiallySelectedRows=function InitiallySelectedRows(args){var cols=[{key:"id",headerName:"Not rendered"},{key:"firstName",headerName:"First name"},{key:"surname",headerName:"Surname"},{key:"age",headerName:"Age",transform:function transform(_ref14){var age=_ref14.age;return(0,jsx_runtime.jsx)("div",{style:{textAlign:"right"},children:age})}},{key:"profession",headerName:"Profession"}],_useState9=(0,react.useState)([1002,1003]),_useState10=(0,slicedToArray.Z)(_useState9,2),selectedRows=_useState10[0],setSelectedRows=_useState10[1];return(0,jsx_runtime.jsx)("div",{style:{maxWidth:"640px"},children:(0,jsx_runtime.jsx)(Table.i,{heading:"Employees",id:"initially-selected",checkboxSelection:!0,selectedRows,setSelectedRows,variant:"dark",cols,rows:[{id:1e3,firstName:"Lauri",surname:"Kekkonen",age:39,profession:"Engineer"},{id:1001,firstName:"Maria",surname:"Sarasoja",age:62,profession:"Designer"},{id:1002,firstName:"Anneli",surname:"Routa",age:50,profession:"Meteorologist"},{id:1003,firstName:"Osku",surname:"Rausku",age:18,profession:"Mail Carrier"}],indexKey:"id",renderIndexCol:!1,selectAllRowsText:"Select all rows",clearSelectionsText:"Clear selections",ariaLabelCheckboxSelection:"Row selection"})})},WithCustomActions=function WithCustomActions(args){var cols=[{key:"id",headerName:"Not rendered"},{key:"firstName",headerName:"First name"},{key:"surname",headerName:"Surname"},{key:"age",headerName:"Age",transform:function transform(_ref15){var age=_ref15.age;return(0,jsx_runtime.jsx)("div",{style:{textAlign:"right"},children:age})}},{key:"profession",headerName:"Profession"}],_useState11=(0,react.useState)([{id:1e3,firstName:"Lauri",surname:"Kekkonen",age:39,profession:"Engineer"},{id:1001,firstName:"Maria",surname:"Sarasoja",age:62,profession:"Designer"},{id:1002,firstName:"Anneli",surname:"Routa",age:50,profession:"Meteorologist"},{id:1003,firstName:"Osku",surname:"Rausku",age:18,profession:"Mail Carrier"}]),_useState12=(0,slicedToArray.Z)(_useState11,2),tableRows=_useState12[0],setTableRows=_useState12[1],_useState13=(0,react.useState)([]),_useState14=(0,slicedToArray.Z)(_useState13,2),selectedRows=_useState14[0],setSelectedRows=_useState14[1],deleteSelectedButton=(0,jsx_runtime.jsx)(Button.z,{onClick:function onClick(){setTableRows(tableRows.filter((function(row){var rowId=row.id;return!1===selectedRows.some((function(selectedRow){return selectedRow===rowId}))}))),setSelectedRows([])},style:{flexGrow:0},className:"table-custom-action",variant:"secondary",size:"small",iconLeft:(0,jsx_runtime.jsx)(IconTrash.IconTrash,{}),disabled:0===selectedRows.length,children:"Delete selected"},1),copySelected=(0,jsx_runtime.jsx)(Button.z,{onClick:function onClick(){console.log("Copy clicked!")},style:{flexGrow:0},className:"table-custom-action",variant:"secondary",size:"small",disabled:0===selectedRows.length,children:"Copy selected"},2);return(0,jsx_runtime.jsx)("div",{style:{maxWidth:"640px"},children:(0,jsx_runtime.jsx)(Table.i,{customActionButtons:[deleteSelectedButton,copySelected],selectedRows,setSelectedRows,checkboxSelection:!0,cols,rows:tableRows,heading:"Employees",id:"custom-actions",indexKey:"id",renderIndexCol:!1,variant:"dark",selectAllRowsText:"Select all rows",clearSelectionsText:"Clear selections",ariaLabelCheckboxSelection:"Row selection"})})},CheckboxSelectionWithSorting=function CheckboxSelectionWithSorting(args){var cols=[{key:"id",headerName:"Not rendered"},{key:"firstName",headerName:"First name",isSortable:!0},{key:"surname",headerName:"Surname",isSortable:!0},{key:"age",headerName:"Age",sortIconType:"other",transform:function transform(_ref16){var age=_ref16.age;return(0,jsx_runtime.jsx)("div",{style:{textAlign:"right"},children:age})},isSortable:!0},{key:"profession",headerName:"Profession",isSortable:!0}],_useState15=(0,react.useState)([]),_useState16=(0,slicedToArray.Z)(_useState15,2),selectedRows=_useState16[0],setSelectedRows=_useState16[1];return(0,jsx_runtime.jsx)("div",{style:{maxWidth:"640px"},children:(0,jsx_runtime.jsx)(Table.i,{ariaLabelSortButtonUnset:"Not sorted",ariaLabelSortButtonAscending:"Sorted in ascending order",ariaLabelSortButtonDescending:"Sorted in descending order",selectAllRowsText:"Select all rows",clearSelectionsText:"Clear selections",ariaLabelCheckboxSelection:"Row selection",checkboxSelection:!0,selectedRows,setSelectedRows,cols,rows:[{id:1e3,firstName:"Lauri",surname:"Kekkonen",age:39,profession:"Engineer"},{id:1001,firstName:"Maria",surname:"Sarasoja",age:62,profession:"Designer"},{id:1002,firstName:"Anneli",surname:"Routa",age:50,profession:"Meteorologist"},{id:1003,firstName:"Osku",surname:"Rausku",age:18,profession:"Mail Carrier"},{id:1004,firstName:"Linda",surname:"Koululainen",age:8,profession:"School student"}],indexKey:"id",renderIndexCol:!1,heading:"Employees",id:"selection-with-sorting"})})},CustomBackgroundColorsForDarkVariant=function CustomBackgroundColorsForDarkVariant(args){var cols=[{key:"id",headerName:"Not rendered"},{key:"firstName",headerName:"First name"},{key:"surname",headerName:"Surname"},{key:"age",headerName:"Age",transform:function transform(_ref17){var age=_ref17.age;return(0,jsx_runtime.jsx)("div",{style:{textAlign:"right"},children:age})}},{key:"profession",headerName:"Profession"}],caption=(0,jsx_runtime.jsxs)("span",{children:[(0,jsx_runtime.jsx)("b",{children:"Table 1"}),": Table description"]});return(0,jsx_runtime.jsx)("div",{style:{maxWidth:"640px"},children:(0,jsx_runtime.jsx)(Table.i,{theme:{"--header-background-color":"var(--color-tram)","--content-background-color":"var(--color-black-5)"},caption,variant:"dark",indexKey:"id",renderIndexCol:!1,rows:[{id:1e3,firstName:"Lauri",surname:"Kekkonen",age:39,profession:"Engineer"},{id:1001,firstName:"Maria",surname:"Sarasoja",age:62,profession:"Designer"},{id:1002,firstName:"Anneli",surname:"Routa",age:50,profession:"Meteorologist"},{id:1003,firstName:"Osku",surname:"Rausku",age:18,profession:"Mail Carrier"}],cols})})},CustomBackgroundColorsForLightVariant=function CustomBackgroundColorsForLightVariant(args){var cols=[{key:"id",headerName:"Not rendered"},{key:"firstName",headerName:"First name"},{key:"surname",headerName:"Surname"},{key:"age",headerName:"Age",transform:function transform(_ref18){var age=_ref18.age;return(0,jsx_runtime.jsx)("div",{style:{textAlign:"right"},children:age})}},{key:"profession",headerName:"Profession"}],caption=(0,jsx_runtime.jsxs)("span",{children:[(0,jsx_runtime.jsx)("b",{children:"Table 1"}),": Table description"]});return(0,jsx_runtime.jsx)("div",{style:{maxWidth:"640px"},children:(0,jsx_runtime.jsx)(Table.i,{theme:{"--header-background-color":"var(--color-suomenlinna)","--content-background-color":"var(--color-black-5)"},caption,variant:"light",indexKey:"id",renderIndexCol:!1,rows:[{id:1e3,firstName:"Lauri",surname:"Kekkonen",age:39,profession:"Engineer"},{id:1001,firstName:"Maria",surname:"Sarasoja",age:62,profession:"Designer"},{id:1002,firstName:"Anneli",surname:"Routa",age:50,profession:"Meteorologist"},{id:1003,firstName:"Osku",surname:"Rausku",age:18,profession:"Mail Carrier"}],cols})})};Default.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => {\n const cols = [\n { key: 'id', headerName: 'Not rendered' },\n { key: 'firstName', headerName: 'First name' },\n { key: 'surname', headerName: 'Surname' },\n {\n key: 'age',\n headerName: 'Age',\n transform: ({ age }) => {\n return
{age}
;\n },\n },\n { key: 'profession', headerName: 'Profession' },\n ];\n\n const rows: Array = [\n { id: 1000, firstName: 'Lauri', surname: 'Kekkonen', age: 39, profession: 'Engineer' },\n { id: 1001, firstName: 'Maria', surname: 'Sarasoja', age: 62, profession: 'Designer' },\n { id: 1002, firstName: 'Anneli', surname: 'Routa', age: 50, profession: 'Meteorologist' },\n { id: 1003, firstName: 'Osku', surname: 'Rausku', age: 18, profession: 'Mail Carrier' },\n ];\n\n const caption = (\n \n Table 1: Table description\n \n );\n\n return (\n
\n
\n \n );\n}"}},Default.parameters),Light.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => {\n const cols = [\n { key: 'id', headerName: 'Not rendered' },\n { key: 'firstName', headerName: 'First name' },\n { key: 'surname', headerName: 'Surname' },\n {\n key: 'age',\n headerName: 'Age',\n transform: ({ age }) => {\n return
{age}
;\n },\n },\n { key: 'profession', headerName: 'Profession' },\n ];\n\n const rows: Array = [\n { id: 1000, firstName: 'Lauri', surname: 'Kekkonen', age: 39, profession: 'Engineer' },\n { id: 1001, firstName: 'Maria', surname: 'Sarasoja', age: 62, profession: 'Designer' },\n { id: 1002, firstName: 'Anneli', surname: 'Routa', age: 50, profession: 'Meteorologist' },\n { id: 1003, firstName: 'Osku', surname: 'Rausku', age: 18, profession: 'Mail Carrier' },\n ];\n\n const caption = (\n \n Table 1: Table description\n \n );\n\n return (\n
\n
\n \n );\n}"}},Light.parameters),Dense.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => {\n const cols = [\n { key: 'id', headerName: 'Not rendered' },\n { key: 'firstName', headerName: 'First name' },\n { key: 'surname', headerName: 'Surname' },\n {\n key: 'age',\n headerName: 'Age',\n transform: ({ age }) => {\n return
{age}
;\n },\n },\n { key: 'profession', headerName: 'Profession' },\n ];\n\n const rows: Array = [\n { id: 1000, firstName: 'Lauri', surname: 'Kekkonen', age: 39, profession: 'Engineer' },\n { id: 1001, firstName: 'Maria', surname: 'Sarasoja', age: 62, profession: 'Designer' },\n { id: 1002, firstName: 'Anneli', surname: 'Routa', age: 50, profession: 'Meteorologist' },\n { id: 1003, firstName: 'Osku', surname: 'Rausku', age: 18, profession: 'Mail Carrier' },\n ];\n\n const caption = (\n \n Table 1: Table description\n \n );\n\n return (\n
\n
\n \n );\n}"}},Dense.parameters),Zebra.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => {\n const cols = [\n { key: 'id', headerName: 'Not rendered' },\n { key: 'firstName', headerName: 'First name' },\n { key: 'surname', headerName: 'Surname' },\n {\n key: 'age',\n headerName: 'Age',\n transform: ({ age }) => {\n return
{age}
;\n },\n },\n { key: 'city', headerName: 'City' },\n { key: 'profession', headerName: 'Profession' },\n {\n key: 'experience',\n headerName: 'Experience (years)',\n transform: ({ experience }) => {\n return
{experience}
;\n },\n },\n ];\n\n const rows: Array = [\n {\n id: 1000,\n firstName: 'Lauri',\n surname: 'Kekkonen',\n age: 39,\n city: 'Helsinki',\n profession: 'Engineer',\n experience: 10,\n },\n {\n id: 1001,\n firstName: 'Maria',\n surname: 'Sarasoja',\n age: 62,\n city: 'Tampere',\n profession: 'Designer',\n experience: 39,\n },\n {\n id: 1002,\n firstName: 'Anneli',\n surname: 'Routa',\n age: 50,\n city: 'Turku',\n profession: 'Meteorologist',\n experience: 25,\n },\n {\n id: 1003,\n firstName: 'Osku',\n surname: 'Rausku',\n age: 18,\n city: 'Oulu',\n profession: 'Mail Carrier',\n experience: 1,\n },\n ];\n\n const caption = (\n \n Table 1: Table description\n \n );\n\n return (\n
\n
\n \n );\n}"}},Zebra.parameters),VerticalLines.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => {\n const cols = [\n { key: 'id', headerName: 'Not rendered' },\n { key: 'firstName', headerName: 'First name' },\n { key: 'surname', headerName: 'Surname' },\n {\n key: 'age',\n headerName: 'Age',\n transform: ({ age }) => {\n return
{age}
;\n },\n },\n { key: 'profession', headerName: 'Profession' },\n ];\n\n const rows: Array = [\n { id: 1000, firstName: 'Lauri', surname: 'Kekkonen', age: 39, profession: 'Engineer' },\n { id: 1001, firstName: 'Maria', surname: 'Sarasoja', age: 62, profession: 'Designer' },\n { id: 1002, firstName: 'Anneli', surname: 'Routa', age: 50, profession: 'Meteorologist' },\n { id: 1003, firstName: 'Osku', surname: 'Rausku', age: 18, profession: 'Mail Carrier' },\n ];\n\n const caption = (\n \n Table 1: Table description\n \n );\n\n return (\n
\n
\n \n );\n}"}},VerticalLines.parameters),VerticalHeaders.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => {\n const cols = [\n { key: 'id', headerName: 'Not rendered' },\n { key: '8-12', headerName: '8-12' },\n { key: '12-14', headerName: '12-14' },\n { key: '14-16', headerName: '14-16' },\n { key: '16-18', headerName: '16-18' },\n ];\n\n const unitRows: Array = [\n { id: 'monday', '8-12': 324, '12-14': 562, '14-16': 280, '16-18': 94 },\n { id: 'tuesday', '8-12': 341, '12-14': 688, '14-16': 425, '16-18': 113 },\n { id: 'wednesday', '8-12': 294, '12-14': 492, '14-16': 280, '16-18': 67 },\n { id: 'thursday', '8-12': 312, '12-14': 501, '14-16': 455, '16-18': 112 },\n { id: 'friday', '8-12': 150, '12-14': 142, '14-16': 362, '16-18': 455 },\n ];\n\n const verticalHeaders = [\n { key: 'monday', headerName: 'Monday' },\n { key: 'tuesday', headerName: 'Tuesday' },\n { key: 'wednesday', headerName: 'Wednesday' },\n { key: 'thursday', headerName: 'Thursday' },\n { key: 'friday', headerName: 'Friday' },\n ];\n\n const caption = (\n \n Table 1: Table description\n \n );\n\n return (\n
\n \n
\n );\n}"}},VerticalHeaders.parameters),Sorting.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => {\n const cols = [\n { key: 'id', headerName: 'Not rendered' },\n { key: 'firstName', headerName: 'First name', isSortable: true },\n { key: 'surname', headerName: 'Surname', isSortable: true },\n {\n key: 'age',\n headerName: 'Age',\n sortIconType: 'other' as const,\n transform: ({ age }) => {\n return
{age}
;\n },\n isSortable: true,\n },\n { key: 'profession', headerName: 'Profession', isSortable: true },\n ];\n\n const rows: Array = [\n { id: 1000, firstName: 'Lauri', surname: 'Kekkonen', age: 39, profession: 'Engineer' },\n { id: 1001, firstName: 'Maria', surname: 'Sarasoja', age: 62, profession: 'Designer' },\n { id: 1002, firstName: 'Anneli', surname: 'Routa', age: 50, profession: 'Meteorologist' },\n { id: 1003, firstName: 'Osku', surname: 'Rausku', age: 18, profession: 'Mail Carrier' },\n { id: 1004, firstName: 'Linda', surname: 'Koululainen', age: 8, profession: 'School student' },\n ];\n\n const caption = (\n \n Table 1: Table description\n \n );\n\n return (\n
\n \n
\n );\n}"}},Sorting.parameters),SortingLightVariant.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => {\n const cols = [\n { key: 'id', headerName: 'Not rendered' },\n { key: 'firstName', headerName: 'First name', isSortable: true },\n { key: 'surname', headerName: 'Surname', isSortable: true },\n {\n key: 'age',\n headerName: 'Age',\n sortIconType: 'other' as const,\n transform: ({ age }) => {\n return
{age}
;\n },\n isSortable: true,\n },\n { key: 'profession', headerName: 'Profession', isSortable: true },\n ];\n\n const rows: Array = [\n { id: 1000, firstName: 'Lauri', surname: 'Kekkonen', age: 39, profession: 'Engineer' },\n { id: 1001, firstName: 'Maria', surname: 'Sarasoja', age: 62, profession: 'Designer' },\n { id: 1002, firstName: 'Anneli', surname: 'Routa', age: 50, profession: 'Meteorologist' },\n { id: 1003, firstName: 'Osku', surname: 'Rausku', age: 18, profession: 'Mail Carrier' },\n { id: 1004, firstName: 'Linda', surname: 'Koululainen', age: 8, profession: 'School student' },\n ];\n\n const caption = (\n \n Table 1: Table description\n \n );\n\n return (\n
\n \n
\n );\n}"}},SortingLightVariant.parameters),InitiallySortedBy.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => {\n const cols = [\n { key: 'id', headerName: 'Not rendered' },\n { key: 'firstName', headerName: 'First name', isSortable: true },\n { key: 'surname', headerName: 'Surname', isSortable: true },\n {\n key: 'age',\n headerName: 'Age',\n sortIconType: 'other' as const,\n transform: ({ age }) => {\n return
{age}
;\n },\n isSortable: true,\n },\n { key: 'profession', headerName: 'Profession', isSortable: true },\n ];\n\n const rows: Array = [\n { id: 1000, firstName: 'Lauri', surname: 'Kekkonen', age: 39, profession: 'Engineer' },\n { id: 1001, firstName: 'Maria', surname: 'Sarasoja', age: 62, profession: 'Designer' },\n { id: 1002, firstName: 'Anneli', surname: 'Routa', age: 50, profession: 'Meteorologist' },\n { id: 1003, firstName: 'Osku', surname: 'Rausku', age: 18, profession: 'Mail Carrier' },\n { id: 1004, firstName: 'Linda', surname: 'Koululainen', age: 8, profession: 'School student' },\n ];\n\n const caption = (\n \n Table 1: Table description\n \n );\n\n return (\n
\n \n
\n );\n}"}},InitiallySortedBy.parameters),CustomSortFunction.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => {\n const cols = [\n { key: 'Paikka-ID', headerName: 'Paikka-ID', isSortable: true },\n { key: 'Paikan tyyppi', headerName: 'Paikan tyyppi', isSortable: false },\n { key: 'Tehtävänimike', headerName: 'Tehtävänimike', isSortable: true },\n {\n key: 'Ilmoitus vanhenee',\n headerName: 'Ilmoitus vanhenee',\n sortIconType: 'other' as const,\n customSortCompareFunction: (a, b) => {\n const aDate = parse(a, 'dd.MM.yyyy', new Date());\n const bDate = parse(b, 'dd.MM.yyyy', new Date());\n\n if (isSameDay(aDate, bDate)) {\n return 0;\n }\n\n if (isBefore(aDate, bDate)) {\n return -1;\n }\n\n return 1;\n },\n isSortable: true,\n },\n { key: 'Toimiala/liikelaitos', headerName: 'Toimiala/liikelaitos', isSortable: true },\n { key: 'Työpaikka', headerName: 'Työpaikka', isSortable: true },\n { key: 'Postinumero', headerName: 'Postinumero', isSortable: true },\n {\n key: 'Paikkoja',\n headerName: 'Paikkoja',\n sortIconType: 'other' as const,\n transform: ({ Paikkoja }) => {\n return
{Paikkoja}
;\n },\n isSortable: true,\n },\n {\n key: 'Haastatteluun halutaan',\n headerName: 'Haastatteluun halutaan',\n sortIconType: 'other' as const,\n transform: (row) => {\n return
{row['Haastatteluun halutaan']}
;\n },\n isSortable: true,\n },\n ];\n\n const rows: Array = workTrial;\n\n const caption = (\n \n Table 1: Table description\n \n );\n\n return (\n
\n \n
\n );\n}"}},CustomSortFunction.parameters),SortingSideEffects.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => {\n const cols = [\n { key: 'id', headerName: 'Not rendered' },\n { key: 'firstName', headerName: 'First name', isSortable: true },\n { key: 'surname', headerName: 'Surname', isSortable: true },\n {\n key: 'age',\n headerName: 'Age',\n sortIconType: 'other' as const,\n transform: ({ age }) => {\n return
{age}
;\n },\n isSortable: true,\n },\n { key: 'profession', headerName: 'Profession', isSortable: true },\n ];\n\n const data: Array = [\n { id: 1000, firstName: 'Lauri', surname: 'Kekkonen', age: 39, profession: 'Engineer' },\n { id: 1001, firstName: 'Maria', surname: 'Sarasoja', age: 62, profession: 'Designer' },\n { id: 1002, firstName: 'Anneli', surname: 'Routa', age: 50, profession: 'Meteorologist' },\n { id: 1003, firstName: 'Osku', surname: 'Rausku', age: 18, profession: 'Mail Carrier' },\n { id: 1004, firstName: 'Linda', surname: 'Koululainen', age: 8, profession: 'School student' },\n ];\n const [loading, toggleLoading] = useState(false);\n const [rows, setRows] = useState(data);\n\n useEffect(() => {\n if (loading) {\n setTimeout(() => {\n toggleLoading((currentValue) => !currentValue);\n setRows(data);\n }, 1000);\n }\n }, [loading]);\n\n const caption = (\n \n Table 1: Table with loading spinner\n \n );\n\n return (\n
\n {\n // Side effects\n setRows([]);\n toggleLoading((currentValue) => !currentValue);\n // Call table's own sorting function\n handleSort();\n }}\n />\n {loading && }\n
\n );\n}"}},SortingSideEffects.parameters),CheckboxSelection.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => {\n const cols = [\n { key: 'id', headerName: 'Not rendered' },\n { key: 'firstName', headerName: 'First name' },\n { key: 'surname', headerName: 'Surname' },\n {\n key: 'age',\n headerName: 'Age',\n transform: ({ age }) => {\n return
{age}
;\n },\n },\n { key: 'profession', headerName: 'Profession' },\n ];\n\n const rows: Array = [\n { id: 1000, firstName: 'Lauri', surname: 'Kekkonen', age: 39, profession: 'Engineer' },\n { id: 1001, firstName: 'Maria', surname: 'Sarasoja', age: 62, profession: 'Designer' },\n { id: 1002, firstName: 'Anneli', surname: 'Routa', age: 50, profession: 'Meteorologist' },\n { id: 1003, firstName: 'Osku', surname: 'Rausku', age: 18, profession: 'Mail Carrier' },\n ];\n\n const [selectedRows, setSelectedRows] = useState([]);\n\n return (\n
\n \n
\n );\n}"}},CheckboxSelection.parameters),CheckboxSelectionDense.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => {\n const cols = [\n { key: 'id', headerName: 'Not rendered' },\n { key: 'firstName', headerName: 'First name' },\n { key: 'surname', headerName: 'Surname' },\n {\n key: 'age',\n headerName: 'Age',\n transform: ({ age }) => {\n return
{age}
;\n },\n },\n { key: 'profession', headerName: 'Profession' },\n ];\n\n const rows: Array = [\n { id: 1000, firstName: 'Lauri', surname: 'Kekkonen', age: 39, profession: 'Engineer' },\n { id: 1001, firstName: 'Maria', surname: 'Sarasoja', age: 62, profession: 'Designer' },\n { id: 1002, firstName: 'Anneli', surname: 'Routa', age: 50, profession: 'Meteorologist' },\n { id: 1003, firstName: 'Osku', surname: 'Rausku', age: 18, profession: 'Mail Carrier' },\n ];\n\n const [selectedRows, setSelectedRows] = useState([]);\n\n return (\n
\n \n
\n );\n}"}},CheckboxSelectionDense.parameters),InitiallySelectedRows.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => {\n const cols = [\n { key: 'id', headerName: 'Not rendered' },\n { key: 'firstName', headerName: 'First name' },\n { key: 'surname', headerName: 'Surname' },\n {\n key: 'age',\n headerName: 'Age',\n transform: ({ age }) => {\n return
{age}
;\n },\n },\n { key: 'profession', headerName: 'Profession' },\n ];\n\n const rows: Array = [\n { id: 1000, firstName: 'Lauri', surname: 'Kekkonen', age: 39, profession: 'Engineer' },\n { id: 1001, firstName: 'Maria', surname: 'Sarasoja', age: 62, profession: 'Designer' },\n { id: 1002, firstName: 'Anneli', surname: 'Routa', age: 50, profession: 'Meteorologist' },\n { id: 1003, firstName: 'Osku', surname: 'Rausku', age: 18, profession: 'Mail Carrier' },\n ];\n\n const [selectedRows, setSelectedRows] = useState([1002, 1003]);\n\n return (\n
\n \n
\n );\n}"}},InitiallySelectedRows.parameters),WithCustomActions.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => {\n const cols = [\n { key: 'id', headerName: 'Not rendered' },\n { key: 'firstName', headerName: 'First name' },\n { key: 'surname', headerName: 'Surname' },\n {\n key: 'age',\n headerName: 'Age',\n transform: ({ age }) => {\n return
{age}
;\n },\n },\n { key: 'profession', headerName: 'Profession' },\n ];\n\n const indexKey = 'id';\n\n const rows: Array = [\n { id: 1000, firstName: 'Lauri', surname: 'Kekkonen', age: 39, profession: 'Engineer' },\n { id: 1001, firstName: 'Maria', surname: 'Sarasoja', age: 62, profession: 'Designer' },\n { id: 1002, firstName: 'Anneli', surname: 'Routa', age: 50, profession: 'Meteorologist' },\n { id: 1003, firstName: 'Osku', surname: 'Rausku', age: 18, profession: 'Mail Carrier' },\n ];\n\n const [tableRows, setTableRows] = useState(rows);\n const [selectedRows, setSelectedRows] = useState([]);\n\n const deleteSelectedButton = (\n {\n setTableRows(\n tableRows.filter((row) => {\n const rowId = row[indexKey];\n\n return (\n selectedRows.some((selectedRow) => {\n return selectedRow === rowId;\n }) === false\n );\n }),\n );\n setSelectedRows([]);\n }}\n style={{\n flexGrow: 0,\n }}\n className=\"table-custom-action\"\n variant=\"secondary\"\n size=\"small\"\n iconLeft={}\n disabled={selectedRows.length === 0}\n >\n Delete selected\n \n );\n\n const copySelected = (\n {\n \n console.log('Copy clicked!');\n }}\n style={{\n flexGrow: 0,\n }}\n className=\"table-custom-action\"\n variant=\"secondary\"\n size=\"small\"\n disabled={selectedRows.length === 0}\n >\n Copy selected\n \n );\n\n return (\n
\n \n
\n );\n}"}},WithCustomActions.parameters),CheckboxSelectionWithSorting.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => {\n const cols = [\n { key: 'id', headerName: 'Not rendered' },\n { key: 'firstName', headerName: 'First name', isSortable: true },\n { key: 'surname', headerName: 'Surname', isSortable: true },\n {\n key: 'age',\n headerName: 'Age',\n sortIconType: 'other' as const,\n transform: ({ age }) => {\n return
{age}
;\n },\n isSortable: true,\n },\n { key: 'profession', headerName: 'Profession', isSortable: true },\n ];\n\n const rows: Array = [\n { id: 1000, firstName: 'Lauri', surname: 'Kekkonen', age: 39, profession: 'Engineer' },\n { id: 1001, firstName: 'Maria', surname: 'Sarasoja', age: 62, profession: 'Designer' },\n { id: 1002, firstName: 'Anneli', surname: 'Routa', age: 50, profession: 'Meteorologist' },\n { id: 1003, firstName: 'Osku', surname: 'Rausku', age: 18, profession: 'Mail Carrier' },\n { id: 1004, firstName: 'Linda', surname: 'Koululainen', age: 8, profession: 'School student' },\n ];\n\n const [selectedRows, setSelectedRows] = useState([]);\n\n return (\n
\n \n
\n );\n}"}},CheckboxSelectionWithSorting.parameters),CustomBackgroundColorsForDarkVariant.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => {\n const cols = [\n { key: 'id', headerName: 'Not rendered' },\n { key: 'firstName', headerName: 'First name' },\n { key: 'surname', headerName: 'Surname' },\n {\n key: 'age',\n headerName: 'Age',\n transform: ({ age }) => {\n return
{age}
;\n },\n },\n { key: 'profession', headerName: 'Profession' },\n ];\n\n const rows: Array = [\n { id: 1000, firstName: 'Lauri', surname: 'Kekkonen', age: 39, profession: 'Engineer' },\n { id: 1001, firstName: 'Maria', surname: 'Sarasoja', age: 62, profession: 'Designer' },\n { id: 1002, firstName: 'Anneli', surname: 'Routa', age: 50, profession: 'Meteorologist' },\n { id: 1003, firstName: 'Osku', surname: 'Rausku', age: 18, profession: 'Mail Carrier' },\n ];\n\n const caption = (\n \n Table 1: Table description\n \n );\n\n const theme = {\n '--header-background-color': 'var(--color-tram)',\n '--content-background-color': 'var(--color-black-5)',\n };\n\n return (\n
\n \n
\n );\n}"}},CustomBackgroundColorsForDarkVariant.parameters),CustomBackgroundColorsForLightVariant.parameters=(0,objectSpread2.Z)({storySource:{source:"(args) => {\n const cols = [\n { key: 'id', headerName: 'Not rendered' },\n { key: 'firstName', headerName: 'First name' },\n { key: 'surname', headerName: 'Surname' },\n {\n key: 'age',\n headerName: 'Age',\n transform: ({ age }) => {\n return
{age}
;\n },\n },\n { key: 'profession', headerName: 'Profession' },\n ];\n\n const rows: Array = [\n { id: 1000, firstName: 'Lauri', surname: 'Kekkonen', age: 39, profession: 'Engineer' },\n { id: 1001, firstName: 'Maria', surname: 'Sarasoja', age: 62, profession: 'Designer' },\n { id: 1002, firstName: 'Anneli', surname: 'Routa', age: 50, profession: 'Meteorologist' },\n { id: 1003, firstName: 'Osku', surname: 'Rausku', age: 18, profession: 'Mail Carrier' },\n ];\n\n const caption = (\n \n Table 1: Table description\n \n );\n\n const theme = {\n '--header-background-color': 'var(--color-suomenlinna)',\n '--content-background-color': 'var(--color-black-5)',\n };\n\n return (\n
\n \n
\n );\n}"}},CustomBackgroundColorsForLightVariant.parameters);try{Default.displayName="Default",Default.__docgenInfo={description:"",displayName:"Default",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/table/Table.stories.tsx#Default"]={docgenInfo:Default.__docgenInfo,name:"Default",path:"src/components/table/Table.stories.tsx#Default"})}catch(__react_docgen_typescript_loader_error){}try{Light.displayName="Light",Light.__docgenInfo={description:"",displayName:"Light",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/table/Table.stories.tsx#Light"]={docgenInfo:Light.__docgenInfo,name:"Light",path:"src/components/table/Table.stories.tsx#Light"})}catch(__react_docgen_typescript_loader_error){}try{Dense.displayName="Dense",Dense.__docgenInfo={description:"",displayName:"Dense",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/table/Table.stories.tsx#Dense"]={docgenInfo:Dense.__docgenInfo,name:"Dense",path:"src/components/table/Table.stories.tsx#Dense"})}catch(__react_docgen_typescript_loader_error){}try{Zebra.displayName="Zebra",Zebra.__docgenInfo={description:"",displayName:"Zebra",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/table/Table.stories.tsx#Zebra"]={docgenInfo:Zebra.__docgenInfo,name:"Zebra",path:"src/components/table/Table.stories.tsx#Zebra"})}catch(__react_docgen_typescript_loader_error){}try{VerticalLines.displayName="VerticalLines",VerticalLines.__docgenInfo={description:"",displayName:"VerticalLines",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/table/Table.stories.tsx#VerticalLines"]={docgenInfo:VerticalLines.__docgenInfo,name:"VerticalLines",path:"src/components/table/Table.stories.tsx#VerticalLines"})}catch(__react_docgen_typescript_loader_error){}try{VerticalHeaders.displayName="VerticalHeaders",VerticalHeaders.__docgenInfo={description:"",displayName:"VerticalHeaders",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/table/Table.stories.tsx#VerticalHeaders"]={docgenInfo:VerticalHeaders.__docgenInfo,name:"VerticalHeaders",path:"src/components/table/Table.stories.tsx#VerticalHeaders"})}catch(__react_docgen_typescript_loader_error){}try{Sorting.displayName="Sorting",Sorting.__docgenInfo={description:"",displayName:"Sorting",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/table/Table.stories.tsx#Sorting"]={docgenInfo:Sorting.__docgenInfo,name:"Sorting",path:"src/components/table/Table.stories.tsx#Sorting"})}catch(__react_docgen_typescript_loader_error){}try{SortingLightVariant.displayName="SortingLightVariant",SortingLightVariant.__docgenInfo={description:"",displayName:"SortingLightVariant",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/table/Table.stories.tsx#SortingLightVariant"]={docgenInfo:SortingLightVariant.__docgenInfo,name:"SortingLightVariant",path:"src/components/table/Table.stories.tsx#SortingLightVariant"})}catch(__react_docgen_typescript_loader_error){}try{InitiallySortedBy.displayName="InitiallySortedBy",InitiallySortedBy.__docgenInfo={description:"",displayName:"InitiallySortedBy",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/table/Table.stories.tsx#InitiallySortedBy"]={docgenInfo:InitiallySortedBy.__docgenInfo,name:"InitiallySortedBy",path:"src/components/table/Table.stories.tsx#InitiallySortedBy"})}catch(__react_docgen_typescript_loader_error){}try{CustomSortFunction.displayName="CustomSortFunction",CustomSortFunction.__docgenInfo={description:"",displayName:"CustomSortFunction",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/table/Table.stories.tsx#CustomSortFunction"]={docgenInfo:CustomSortFunction.__docgenInfo,name:"CustomSortFunction",path:"src/components/table/Table.stories.tsx#CustomSortFunction"})}catch(__react_docgen_typescript_loader_error){}try{SortingSideEffects.displayName="SortingSideEffects",SortingSideEffects.__docgenInfo={description:"",displayName:"SortingSideEffects",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/table/Table.stories.tsx#SortingSideEffects"]={docgenInfo:SortingSideEffects.__docgenInfo,name:"SortingSideEffects",path:"src/components/table/Table.stories.tsx#SortingSideEffects"})}catch(__react_docgen_typescript_loader_error){}try{CheckboxSelection.displayName="CheckboxSelection",CheckboxSelection.__docgenInfo={description:"",displayName:"CheckboxSelection",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/table/Table.stories.tsx#CheckboxSelection"]={docgenInfo:CheckboxSelection.__docgenInfo,name:"CheckboxSelection",path:"src/components/table/Table.stories.tsx#CheckboxSelection"})}catch(__react_docgen_typescript_loader_error){}try{CheckboxSelectionDense.displayName="CheckboxSelectionDense",CheckboxSelectionDense.__docgenInfo={description:"",displayName:"CheckboxSelectionDense",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/table/Table.stories.tsx#CheckboxSelectionDense"]={docgenInfo:CheckboxSelectionDense.__docgenInfo,name:"CheckboxSelectionDense",path:"src/components/table/Table.stories.tsx#CheckboxSelectionDense"})}catch(__react_docgen_typescript_loader_error){}try{InitiallySelectedRows.displayName="InitiallySelectedRows",InitiallySelectedRows.__docgenInfo={description:"",displayName:"InitiallySelectedRows",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/table/Table.stories.tsx#InitiallySelectedRows"]={docgenInfo:InitiallySelectedRows.__docgenInfo,name:"InitiallySelectedRows",path:"src/components/table/Table.stories.tsx#InitiallySelectedRows"})}catch(__react_docgen_typescript_loader_error){}try{WithCustomActions.displayName="WithCustomActions",WithCustomActions.__docgenInfo={description:"",displayName:"WithCustomActions",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/table/Table.stories.tsx#WithCustomActions"]={docgenInfo:WithCustomActions.__docgenInfo,name:"WithCustomActions",path:"src/components/table/Table.stories.tsx#WithCustomActions"})}catch(__react_docgen_typescript_loader_error){}try{CheckboxSelectionWithSorting.displayName="CheckboxSelectionWithSorting",CheckboxSelectionWithSorting.__docgenInfo={description:"",displayName:"CheckboxSelectionWithSorting",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/table/Table.stories.tsx#CheckboxSelectionWithSorting"]={docgenInfo:CheckboxSelectionWithSorting.__docgenInfo,name:"CheckboxSelectionWithSorting",path:"src/components/table/Table.stories.tsx#CheckboxSelectionWithSorting"})}catch(__react_docgen_typescript_loader_error){}try{CustomBackgroundColorsForDarkVariant.displayName="CustomBackgroundColorsForDarkVariant",CustomBackgroundColorsForDarkVariant.__docgenInfo={description:"",displayName:"CustomBackgroundColorsForDarkVariant",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/table/Table.stories.tsx#CustomBackgroundColorsForDarkVariant"]={docgenInfo:CustomBackgroundColorsForDarkVariant.__docgenInfo,name:"CustomBackgroundColorsForDarkVariant",path:"src/components/table/Table.stories.tsx#CustomBackgroundColorsForDarkVariant"})}catch(__react_docgen_typescript_loader_error){}try{CustomBackgroundColorsForLightVariant.displayName="CustomBackgroundColorsForLightVariant",CustomBackgroundColorsForLightVariant.__docgenInfo={description:"",displayName:"CustomBackgroundColorsForLightVariant",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/table/Table.stories.tsx#CustomBackgroundColorsForLightVariant"]={docgenInfo:CustomBackgroundColorsForLightVariant.__docgenInfo,name:"CustomBackgroundColorsForLightVariant",path:"src/components/table/Table.stories.tsx#CustomBackgroundColorsForLightVariant"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/tabs/Tabs.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,Small:()=>Small,WithCustomOnClickAction:()=>WithCustomOnClickAction,WithCustomTheme:()=>WithCustomTheme,default:()=>Tabs_stories});var objectSpread2=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),slicedToArray=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),react=__webpack_require__("../../node_modules/react/index.js"),LoadingSpinner=__webpack_require__("./src/components/loadingSpinner/LoadingSpinner.tsx");__webpack_require__("./src/styles/base.css");const Tabs_module_scrollButton="Tabs_scrollButton__IVOLh",Tabs_module_tabs="Tabs_tabs__yE6Zk",Tabs_module_small="Tabs_small__en-fO",Tabs_module_tablistBar="Tabs_tablistBar__FWUNP",Tabs_module_tablist="Tabs_tablist__afK+U",Tabs_module_tab="Tabs_tab__mtOp2",Tabs_module_active="Tabs_active__0EWQH";var classNames=__webpack_require__("./src/utils/classNames.ts"),TabsContext=react.createContext({activeTab:0,setActiveTab:function setActiveTab(){},focusedTab:null,setFocusedTab:function setFocusedTab(){}}),useTheme=__webpack_require__("./src/hooks/useTheme.tsx"),IconAngleLeft=__webpack_require__("./src/icons/IconAngleLeft.tsx"),IconAngleRight=__webpack_require__("./src/icons/IconAngleRight.tsx"),getChildren=__webpack_require__("./src/utils/getChildren.ts"),jsx_runtime=__webpack_require__("../../node_modules/react/jsx-runtime.js"),TabList=function TabList(_ref){var children=_ref.children,className=_ref.className,_ref$style=_ref.style,style=void 0===_ref$style?{}:_ref$style,tablistElementRef=(0,react.useRef)(null),tablistContainerRef=(0,react.useRef)(null),_useContext=(0,react.useContext)(TabsContext),focusedTab=_useContext.focusedTab,setFocusedTab=_useContext.setFocusedTab,_useState=(0,react.useState)(0),_useState2=(0,slicedToArray.Z)(_useState,2),tablistWidth=_useState2[0],setTablistWidth=_useState2[1],_useState3=(0,react.useState)(null),_useState4=(0,slicedToArray.Z)(_useState3,2),scrollIndex=_useState4[0],setScrollIndex=_useState4[1],_useState5=(0,react.useState)(!0),_useState6=(0,slicedToArray.Z)(_useState5,2),showPreviousButton=_useState6[0],setShowPreviousButton=_useState6[1],_useState7=(0,react.useState)(!0),_useState8=(0,slicedToArray.Z)(_useState7,2),showNextButton=_useState8[0],setShowNextButton=_useState8[1],_useState9=(0,react.useState)(0),_useState10=(0,slicedToArray.Z)(_useState9,2),scrollValue=_useState10[0],setScrollValue=_useState10[1],tabs=(0,getChildren.AU)(children).map((function(child,index){return react.isValidElement(child)&&"Tab"===child.type.componentName?react.cloneElement(child,{index,key:index}):null})),updateScrollPosition=(0,react.useCallback)((function(){var tabElement=function getChildByIndex(index,parent){if(null!==index){var element=parent.children[index];if(null!==element&&element instanceof HTMLElement)return element}return null}(scrollIndex,tablistElementRef.current);if(null!==tabElement){var tabRightEdgeDistance=tabElement.offsetLeft+tabElement.offsetWidth,tabLeftEdgeDistance=tabElement.offsetLeft,tabRightEdgeOffset=tabRightEdgeDistance-tablistContainerRef.current.offsetWidth;tabRightEdgeOffset>0&&(scrollValuecontainerElement.offsetWidth+offset}(element,tablistContainerRef.current,scrollValue)}))}),[scrollValue]),findNextElementOutsideLeftEdge=(0,react.useCallback)((function(){var tabListElement=tablistElementRef.current,tabIndex=Array.from(tabListElement.children).reverse().findIndex((function(element){return function isElementOutsideLeftEdge(tab,offset){return tab.offsetLeft-1?tabListElement.children.length-tabIndex-1:-1}),[scrollValue]),updateScrollButtons=(0,react.useCallback)((function(){setShowPreviousButton(-1!==findNextElementOutsideLeftEdge()),setShowNextButton(-1!==findNextElementOutsideRightEdge())}),[findNextElementOutsideLeftEdge,findNextElementOutsideRightEdge]);(0,react.useEffect)((function(){var totalWidth=Array.from(tablistElementRef.current.children).reduce((function(total,el){return total+el.offsetWidth}),0);setTablistWidth(totalWidth)}),[children]),(0,react.useEffect)((function(){setScrollIndex(focusedTab)}),[focusedTab]),(0,react.useEffect)((function(){return updateScrollButtons(),window.addEventListener("resize",updateScrollButtons),function(){window.removeEventListener("resize",updateScrollButtons)}}),[updateScrollButtons]),(0,react.useEffect)((function(){updateScrollPosition()}),[updateScrollPosition,scrollIndex,showPreviousButton,showNextButton]);return(0,jsx_runtime.jsxs)("div",{className:(0,classNames.Z)(Tabs_module_tablistBar,className),style,children:[showPreviousButton&&(0,jsx_runtime.jsx)("div",{className:Tabs_module_scrollButton,"aria-hidden":"true",children:(0,jsx_runtime.jsx)("button",{type:"button",onClick:function onPreviousButtonClick(){var nextTabIndex=findNextElementOutsideLeftEdge();nextTabIndex>-1&&setScrollIndex(nextTabIndex)},tabIndex:-1,children:(0,jsx_runtime.jsx)(IconAngleLeft.IconAngleLeft,{})})}),(0,jsx_runtime.jsx)("div",{className:Tabs_module_tablist,ref:tablistContainerRef,children:(0,jsx_runtime.jsx)("ul",{role:"tablist",ref:tablistElementRef,onKeyDown:function onKeyDown(event){var nextIndex=null;"ArrowRight"===event.key&&(nextIndex=Math.min(focusedTab+1,tabs.length-1)),"ArrowLeft"===event.key&&(nextIndex=Math.max(focusedTab-1,0)),null!==nextIndex&&setFocusedTab(nextIndex)},style:{width:"".concat(tablistWidth,"px"),transform:scrollValue?"translateX(".concat(-1*scrollValue,"px)"):void 0},children:tabs})}),showNextButton&&(0,jsx_runtime.jsx)("div",{className:Tabs_module_scrollButton,"aria-hidden":"true",children:(0,jsx_runtime.jsx)("button",{type:"button",onClick:function onNextButtonClick(){var nextTabIndex=findNextElementOutsideRightEdge();nextTabIndex>-1&&setScrollIndex(nextTabIndex)},tabIndex:-1,children:(0,jsx_runtime.jsx)(IconAngleRight.IconAngleRight,{})})})]})};TabList.componentName="TabList";try{TabList.displayName="TabList",TabList.__docgenInfo={description:"",displayName:"TabList",props:{className:{defaultValue:null,description:"Additional class names to apply to the Tablist",name:"className",required:!1,type:{name:"string"}},style:{defaultValue:{value:"{}"},description:"Additional styles to apply to the Tablist",name:"style",required:!1,type:{name:"CSSProperties"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/tabs/TabList.tsx#TabList"]={docgenInfo:TabList.__docgenInfo,name:"TabList",path:"src/components/tabs/TabList.tsx#TabList"})}catch(__react_docgen_typescript_loader_error){}var TabPanel=function TabPanel(_ref){var children=_ref.children,className=_ref.className,index=_ref.index,style=_ref.style;return(0,react.useContext)(TabsContext).activeTab===index?(0,jsx_runtime.jsx)("div",{id:"tab-".concat(index,"-panel"),role:"tabpanel","aria-labelledby":"tab-".concat(index,"-button"),className,style,children}):null};TabPanel.componentName="TabPanel";try{TabPanel.displayName="TabPanel",TabPanel.__docgenInfo={description:"",displayName:"TabPanel",props:{className:{defaultValue:null,description:"Additional class names to apply to the Tab",name:"className",required:!1,type:{name:"string"}},style:{defaultValue:null,description:"Additional styles to apply to the Tab",name:"style",required:!1,type:{name:"CSSProperties"}},index:{defaultValue:null,description:"",name:"index",required:!1,type:{name:"number"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/tabs/TabPanel.tsx#TabPanel"]={docgenInfo:TabPanel.__docgenInfo,name:"TabPanel",path:"src/components/tabs/TabPanel.tsx#TabPanel"})}catch(__react_docgen_typescript_loader_error){}var Tab=function Tab(_ref){var children=_ref.children,className=_ref.className,index=_ref.index,onClick=_ref.onClick,style=_ref.style,ref=(0,react.useRef)(null),_useContext=(0,react.useContext)(TabsContext),activeTab=_useContext.activeTab,focusedTab=_useContext.focusedTab,setFocusedTab=_useContext.setFocusedTab,setActiveTab=_useContext.setActiveTab,isActive=activeTab===index;(0,react.useEffect)((function(){focusedTab===index&&ref.current.focus({preventScroll:!0})}),[focusedTab,index]);return(0,jsx_runtime.jsx)("li",{role:"tab","aria-selected":isActive,"aria-controls":"tab-".concat(index,"-panel"),tabIndex:isActive?0:-1,id:"tab-".concat(index,"-button"),className:(0,classNames.Z)(Tabs_module_tab,isActive&&Tabs_module_active,className),style,onClick:function onTabClick(){onClick&&onClick(),setActiveTab(index),setFocusedTab(index)},onKeyDown:function onKeyDown(event){var isEnter="Enter"===event.key||13===event.keyCode,isSpace=" "===event.key||32===event.keyCode;(isEnter||isSpace)&&(onClick&&onClick(),setActiveTab(index))},onFocus:function onFocus(event){event.preventDefault(),focusedTab!==index&&setFocusedTab(index)},ref,children:(0,jsx_runtime.jsx)("span",{children})})};Tab.componentName="Tab";try{Tab.displayName="Tab",Tab.__docgenInfo={description:"",displayName:"Tab",props:{onClick:{defaultValue:null,description:"Custom function callback for on tab click",name:"onClick",required:!1,type:{name:"() => void"}},className:{defaultValue:null,description:"Additional class names to apply to the Tab",name:"className",required:!1,type:{name:"string"}},style:{defaultValue:null,description:"Additional styles to apply to the Tab",name:"style",required:!1,type:{name:"CSSProperties"}},index:{defaultValue:null,description:"",name:"index",required:!1,type:{name:"number"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/tabs/Tab.tsx#Tab"]={docgenInfo:Tab.__docgenInfo,name:"Tab",path:"src/components/tabs/Tab.tsx#Tab"})}catch(__react_docgen_typescript_loader_error){}var Tabs=function Tabs(_ref){var children=_ref.children,_ref$initiallyActiveT=_ref.initiallyActiveTab,initiallyActiveTab=void 0===_ref$initiallyActiveT?0:_ref$initiallyActiveT,_ref$small=_ref.small,small=void 0!==_ref$small&&_ref$small,theme=_ref.theme,_useState=(0,react.useState)(initiallyActiveTab),_useState2=(0,slicedToArray.Z)(_useState,2),activeTab=_useState2[0],setActiveTab=_useState2[1],_useState3=(0,react.useState)(null),_useState4=(0,slicedToArray.Z)(_useState3,2),focusedTab=_useState4[0],setFocusedTab=_useState4[1],customThemeClass=(0,useTheme.F)(Tabs_module_tabs,theme),childElements=(0,getChildren.fL)(children),tabList=childElements.filter((function(child){return react.isValidElement(child)&&"TabList"===child.type.componentName})),tabPanels=childElements.filter((function(child){return react.isValidElement(child)&&"TabPanel"===child.type.componentName})).map((function(child,index){return react.isValidElement(child)?react.cloneElement(child,{index,key:index}):child}));return(0,jsx_runtime.jsx)(TabsContext.Provider,{value:{activeTab,setActiveTab,focusedTab,setFocusedTab},children:(0,jsx_runtime.jsxs)("div",{className:(0,classNames.Z)(Tabs_module_tabs,small&&Tabs_module_small,theme&&customThemeClass),children:[tabList,tabPanels]})})};Tabs.TabList=TabList,Tabs.TabPanel=TabPanel,Tabs.Tab=Tab;try{Tabs.displayName="Tabs",Tabs.__docgenInfo={description:"",displayName:"Tabs",props:{initiallyActiveTab:{defaultValue:{value:"0"},description:"The initially active tab",name:"initiallyActiveTab",required:!1,type:{name:"number"}},small:{defaultValue:{value:"false"},description:"Use the small variant",name:"small",required:!1,type:{name:"boolean"}},theme:{defaultValue:null,description:"Defines the tabs theme",name:"theme",required:!1,type:{name:"TabsCustomTheme"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/tabs/Tabs.tsx#Tabs"]={docgenInfo:Tabs.__docgenInfo,name:"Tabs",path:"src/components/tabs/Tabs.tsx#Tabs"})}catch(__react_docgen_typescript_loader_error){}try{Tabs.TabList.displayName="Tabs.TabList",Tabs.TabList.__docgenInfo={description:"",displayName:"Tabs.TabList",props:{className:{defaultValue:null,description:"Additional class names to apply to the Tablist",name:"className",required:!1,type:{name:"string"}},style:{defaultValue:{value:"{}"},description:"Additional styles to apply to the Tablist",name:"style",required:!1,type:{name:"CSSProperties"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/tabs/Tabs.tsx#Tabs.TabList"]={docgenInfo:Tabs.TabList.__docgenInfo,name:"Tabs.TabList",path:"src/components/tabs/Tabs.tsx#Tabs.TabList"})}catch(__react_docgen_typescript_loader_error){}try{Tabs.TabPanel.displayName="Tabs.TabPanel",Tabs.TabPanel.__docgenInfo={description:"",displayName:"Tabs.TabPanel",props:{className:{defaultValue:null,description:"Additional class names to apply to the Tab",name:"className",required:!1,type:{name:"string"}},style:{defaultValue:null,description:"Additional styles to apply to the Tab",name:"style",required:!1,type:{name:"CSSProperties"}},index:{defaultValue:null,description:"",name:"index",required:!1,type:{name:"number"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/tabs/Tabs.tsx#Tabs.TabPanel"]={docgenInfo:Tabs.TabPanel.__docgenInfo,name:"Tabs.TabPanel",path:"src/components/tabs/Tabs.tsx#Tabs.TabPanel"})}catch(__react_docgen_typescript_loader_error){}try{Tabs.Tab.displayName="Tabs.Tab",Tabs.Tab.__docgenInfo={description:"",displayName:"Tabs.Tab",props:{onClick:{defaultValue:null,description:"Custom function callback for on tab click",name:"onClick",required:!1,type:{name:"() => void"}},className:{defaultValue:null,description:"Additional class names to apply to the Tab",name:"className",required:!1,type:{name:"string"}},style:{defaultValue:null,description:"Additional styles to apply to the Tab",name:"style",required:!1,type:{name:"CSSProperties"}},index:{defaultValue:null,description:"",name:"index",required:!1,type:{name:"number"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/tabs/Tabs.tsx#Tabs.Tab"]={docgenInfo:Tabs.Tab.__docgenInfo,name:"Tabs.Tab",path:"src/components/tabs/Tabs.tsx#Tabs.Tab"})}catch(__react_docgen_typescript_loader_error){}const Tabs_stories={component:Tabs,title:"Components/Tabs",decorators:[function(storyFn){return(0,jsx_runtime.jsxs)("div",{children:[(0,jsx_runtime.jsx)("style",{children:".example-tablist { margin-bottom: var(--spacing-m); }"}),storyFn()]})}],parameters:{storySource:{source:"import React from 'react';\n\nimport { LoadingSpinner } from '../loadingSpinner';\nimport { Tabs } from './Tabs';\n\nexport default {\n component: Tabs,\n title: 'Components/Tabs',\n decorators: [\n (storyFn) => (\n
\n \n {storyFn()}\n
\n ),\n ],\n parameters: {\n controls: { hideNoControlsWarning: true },\n },\n};\n\nexport const Default = () => (\n \n \n Daycare\n Pre-school\n Basic education\n Upper secondary\n University\n \n \n Daytime care for people who cannot be fully independent, such as children or elderly people.\n \n \n A pre-school is an educational establishment offering early childhood education to children before they begin\n compulsory education at primary school.\n \n \n The objective of basic education in Finland is to support pupils' growth towards humanity and ethically\n responsible membership of society.\n \n \n Upper secondary school studies last three to four years, preparing the students for the matriculation examination.\n \n \n A high-level educational institution in which students study for degrees and academic research is done.\n \n \n);\n\nexport const Small = () => (\n \n \n Daycare\n Pre-school\n Basic education\n Upper secondary\n University\n \n \n Daytime care for people who cannot be fully independent, such as children or elderly people.\n \n \n A pre-school is an educational establishment offering early childhood education to children before they begin\n compulsory education at primary school.\n \n \n The objective of basic education in Finland is to support pupils' growth towards humanity and ethically\n responsible membership of society.\n \n \n Upper secondary school studies last three to four years, preparing the students for the matriculation examination.\n \n \n A high-level educational institution in which students study for degrees and academic research is done.\n \n \n);\n\nexport const WithCustomTheme = () => {\n const theme = {\n '--tab-color': 'var(--color-black-90)',\n '--tab-active-border-color': 'var(--color-metro)',\n };\n\n return (\n \n \n Daycare\n Pre-school\n Basic education\n Upper secondary\n University\n \n \n Daytime care for people who cannot be fully independent, such as children or elderly people.\n \n \n A pre-school is an educational establishment offering early childhood education to children before they begin\n compulsory education at primary school.\n \n \n The objective of basic education in Finland is to support pupils' growth towards humanity and ethically\n responsible membership of society.\n \n \n Upper secondary school studies last three to four years, preparing the students for the matriculation\n examination.\n \n \n A high-level educational institution in which students study for degrees and academic research is done.\n \n \n );\n};\n\nexport const WithCustomOnClickAction = () => {\n const [isLoading, setIsLoading] = React.useState(false);\n const content = {\n education: 'Daytime care for people who cannot be fully independent, such as children or elderly people.',\n university:\n 'The objective of basic education in Finland is to support pupils' growth towards humanity and ethically responsible membership of society.',\n };\n\n const LoadingIndicator = () => (\n
\n \n Tab content is loading\n
\n );\n\n const mockLoading = () => {\n setIsLoading(true);\n setTimeout(() => {\n setIsLoading(false);\n }, 500);\n };\n\n const onTabClick = () => {\n mockLoading();\n };\n\n React.useEffect(() => {\n mockLoading();\n }, []);\n\n return (\n \n \n onTabClick()}>Basic education\n onTabClick()}>University\n \n {isLoading ? : content.education}\n {isLoading ? : content.university}\n \n );\n};\n\nWithCustomOnClickAction.parameters = { loki: { skip: true } };\n",locationsMap:{default:{startLoc:{col:23,line:22},endLoc:{col:1,line:49},startBody:{col:23,line:22},endBody:{col:1,line:49}},small:{startLoc:{col:21,line:51},endLoc:{col:1,line:78},startBody:{col:21,line:51},endBody:{col:1,line:78}},"with-custom-theme":{startLoc:{col:31,line:80},endLoc:{col:1,line:115},startBody:{col:31,line:80},endBody:{col:1,line:115}},"with-custom-on-click-action":{startLoc:{col:39,line:117},endLoc:{col:1,line:161},startBody:{col:39,line:117},endBody:{col:1,line:161}}}},controls:{hideNoControlsWarning:!0}}};var Default=function Default(){return(0,jsx_runtime.jsxs)(Tabs,{children:[(0,jsx_runtime.jsxs)(Tabs.TabList,{className:"example-tablist",children:[(0,jsx_runtime.jsx)(Tabs.Tab,{children:"Daycare"}),(0,jsx_runtime.jsx)(Tabs.Tab,{children:"Pre-school"}),(0,jsx_runtime.jsx)(Tabs.Tab,{children:"Basic education"}),(0,jsx_runtime.jsx)(Tabs.Tab,{children:"Upper secondary"}),(0,jsx_runtime.jsx)(Tabs.Tab,{children:"University"})]}),(0,jsx_runtime.jsx)(Tabs.TabPanel,{children:"Daytime care for people who cannot be fully independent, such as children or elderly people."}),(0,jsx_runtime.jsx)(Tabs.TabPanel,{children:"A pre-school is an educational establishment offering early childhood education to children before they begin compulsory education at primary school."}),(0,jsx_runtime.jsx)(Tabs.TabPanel,{children:"The objective of basic education in Finland is to support pupils' growth towards humanity and ethically responsible membership of society."}),(0,jsx_runtime.jsx)(Tabs.TabPanel,{children:"Upper secondary school studies last three to four years, preparing the students for the matriculation examination."}),(0,jsx_runtime.jsx)(Tabs.TabPanel,{children:"A high-level educational institution in which students study for degrees and academic research is done."})]})},Small=function Small(){return(0,jsx_runtime.jsxs)(Tabs,{small:!0,children:[(0,jsx_runtime.jsxs)(Tabs.TabList,{className:"example-tablist",children:[(0,jsx_runtime.jsx)(Tabs.Tab,{children:"Daycare"}),(0,jsx_runtime.jsx)(Tabs.Tab,{children:"Pre-school"}),(0,jsx_runtime.jsx)(Tabs.Tab,{children:"Basic education"}),(0,jsx_runtime.jsx)(Tabs.Tab,{children:"Upper secondary"}),(0,jsx_runtime.jsx)(Tabs.Tab,{children:"University"})]}),(0,jsx_runtime.jsx)(Tabs.TabPanel,{children:"Daytime care for people who cannot be fully independent, such as children or elderly people."}),(0,jsx_runtime.jsx)(Tabs.TabPanel,{children:"A pre-school is an educational establishment offering early childhood education to children before they begin compulsory education at primary school."}),(0,jsx_runtime.jsx)(Tabs.TabPanel,{children:"The objective of basic education in Finland is to support pupils' growth towards humanity and ethically responsible membership of society."}),(0,jsx_runtime.jsx)(Tabs.TabPanel,{children:"Upper secondary school studies last three to four years, preparing the students for the matriculation examination."}),(0,jsx_runtime.jsx)(Tabs.TabPanel,{children:"A high-level educational institution in which students study for degrees and academic research is done."})]})},WithCustomTheme=function WithCustomTheme(){return(0,jsx_runtime.jsxs)(Tabs,{theme:{"--tab-color":"var(--color-black-90)","--tab-active-border-color":"var(--color-metro)"},children:[(0,jsx_runtime.jsxs)(Tabs.TabList,{className:"example-tablist",children:[(0,jsx_runtime.jsx)(Tabs.Tab,{children:"Daycare"}),(0,jsx_runtime.jsx)(Tabs.Tab,{children:"Pre-school"}),(0,jsx_runtime.jsx)(Tabs.Tab,{children:"Basic education"}),(0,jsx_runtime.jsx)(Tabs.Tab,{children:"Upper secondary"}),(0,jsx_runtime.jsx)(Tabs.Tab,{children:"University"})]}),(0,jsx_runtime.jsx)(Tabs.TabPanel,{children:"Daytime care for people who cannot be fully independent, such as children or elderly people."}),(0,jsx_runtime.jsx)(Tabs.TabPanel,{children:"A pre-school is an educational establishment offering early childhood education to children before they begin compulsory education at primary school."}),(0,jsx_runtime.jsx)(Tabs.TabPanel,{children:"The objective of basic education in Finland is to support pupils' growth towards humanity and ethically responsible membership of society."}),(0,jsx_runtime.jsx)(Tabs.TabPanel,{children:"Upper secondary school studies last three to four years, preparing the students for the matriculation examination."}),(0,jsx_runtime.jsx)(Tabs.TabPanel,{children:"A high-level educational institution in which students study for degrees and academic research is done."})]})},WithCustomOnClickAction=function WithCustomOnClickAction(){var _React$useState=react.useState(!1),_React$useState2=(0,slicedToArray.Z)(_React$useState,2),isLoading=_React$useState2[0],setIsLoading=_React$useState2[1],content_education="Daytime care for people who cannot be fully independent, such as children or elderly people.",content_university="The objective of basic education in Finland is to support pupils' growth towards humanity and ethically responsible membership of society.",LoadingIndicator=function LoadingIndicator(){return(0,jsx_runtime.jsxs)("div",{style:{alignItems:"center",display:"flex",gap:"1rem"},children:[(0,jsx_runtime.jsx)(LoadingSpinner.T,{loadingText:"Tab content is loading",loadingFinishedText:"The tab content loading was finished",small:!0}),(0,jsx_runtime.jsx)("span",{children:"Tab content is loading"})]})},mockLoading=function mockLoading(){setIsLoading(!0),setTimeout((function(){setIsLoading(!1)}),500)},onTabClick=function onTabClick(){mockLoading()};return react.useEffect((function(){mockLoading()}),[]),(0,jsx_runtime.jsxs)(Tabs,{initiallyActiveTab:0,children:[(0,jsx_runtime.jsxs)(Tabs.TabList,{className:"example-tablist",children:[(0,jsx_runtime.jsx)(Tabs.Tab,{onClick:function onClick(){return onTabClick()},children:"Basic education"}),(0,jsx_runtime.jsx)(Tabs.Tab,{onClick:function onClick(){return onTabClick()},children:"University"})]}),(0,jsx_runtime.jsx)(Tabs.TabPanel,{children:isLoading?(0,jsx_runtime.jsx)(LoadingIndicator,{}):content_education}),(0,jsx_runtime.jsx)(Tabs.TabPanel,{children:isLoading?(0,jsx_runtime.jsx)(LoadingIndicator,{}):content_university})]})};WithCustomOnClickAction.parameters={loki:{skip:!0}},Default.parameters=(0,objectSpread2.Z)({storySource:{source:'() => (\n \n \n Daycare\n Pre-school\n Basic education\n Upper secondary\n University\n \n \n Daytime care for people who cannot be fully independent, such as children or elderly people.\n \n \n A pre-school is an educational establishment offering early childhood education to children before they begin\n compulsory education at primary school.\n \n \n The objective of basic education in Finland is to support pupils' growth towards humanity and ethically\n responsible membership of society.\n \n \n Upper secondary school studies last three to four years, preparing the students for the matriculation examination.\n \n \n A high-level educational institution in which students study for degrees and academic research is done.\n \n \n)'}},Default.parameters),Small.parameters=(0,objectSpread2.Z)({storySource:{source:'() => (\n \n \n Daycare\n Pre-school\n Basic education\n Upper secondary\n University\n \n \n Daytime care for people who cannot be fully independent, such as children or elderly people.\n \n \n A pre-school is an educational establishment offering early childhood education to children before they begin\n compulsory education at primary school.\n \n \n The objective of basic education in Finland is to support pupils' growth towards humanity and ethically\n responsible membership of society.\n \n \n Upper secondary school studies last three to four years, preparing the students for the matriculation examination.\n \n \n A high-level educational institution in which students study for degrees and academic research is done.\n \n \n)'}},Small.parameters),WithCustomTheme.parameters=(0,objectSpread2.Z)({storySource:{source:"() => {\n const theme = {\n '--tab-color': 'var(--color-black-90)',\n '--tab-active-border-color': 'var(--color-metro)',\n };\n\n return (\n \n \n Daycare\n Pre-school\n Basic education\n Upper secondary\n University\n \n \n Daytime care for people who cannot be fully independent, such as children or elderly people.\n \n \n A pre-school is an educational establishment offering early childhood education to children before they begin\n compulsory education at primary school.\n \n \n The objective of basic education in Finland is to support pupils' growth towards humanity and ethically\n responsible membership of society.\n \n \n Upper secondary school studies last three to four years, preparing the students for the matriculation\n examination.\n \n \n A high-level educational institution in which students study for degrees and academic research is done.\n \n \n );\n}"}},WithCustomTheme.parameters),WithCustomOnClickAction.parameters=(0,objectSpread2.Z)({storySource:{source:"() => {\n const [isLoading, setIsLoading] = React.useState(false);\n const content = {\n education: 'Daytime care for people who cannot be fully independent, such as children or elderly people.',\n university:\n 'The objective of basic education in Finland is to support pupils' growth towards humanity and ethically responsible membership of society.',\n };\n\n const LoadingIndicator = () => (\n
\n \n Tab content is loading\n
\n );\n\n const mockLoading = () => {\n setIsLoading(true);\n setTimeout(() => {\n setIsLoading(false);\n }, 500);\n };\n\n const onTabClick = () => {\n mockLoading();\n };\n\n React.useEffect(() => {\n mockLoading();\n }, []);\n\n return (\n \n \n onTabClick()}>Basic education\n onTabClick()}>University\n \n {isLoading ? : content.education}\n {isLoading ? : content.university}\n \n );\n}"}},WithCustomOnClickAction.parameters)},"./src/components/tag/Tag.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{ClickableTag:()=>ClickableTag,CustomTheme:()=>CustomTheme,Default:()=>Default,DeletableTag:()=>DeletableTag,LargeDeletableTag:()=>LargeDeletableTag,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),_storybook_addon_actions__WEBPACK_IMPORTED_MODULE_1__=(__webpack_require__("../../node_modules/react/index.js"),__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js")),_Tag__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/components/tag/Tag.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/react/jsx-runtime.js");const __WEBPACK_DEFAULT_EXPORT__={component:_Tag__WEBPACK_IMPORTED_MODULE_3__.V,title:"Components/Tag",parameters:{storySource:{source:"import React from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport { Tag } from './Tag';\n\nexport default {\n component: Tag,\n title: 'Components/Tag',\n parameters: {\n controls: { expanded: true },\n },\n args: {\n children: 'Americum',\n },\n};\n\nexport const Default = (args) => ;\n\nexport const ClickableTag = (args) => (\n <>\n action(`Click: ${args.children}`)()}>\n {args.children}\n \n action(`Click: ${args.children}`)()}\n >\n {args.children}\n \n \n);\n\nexport const DeletableTag = (args) => {\n return (\n action(`Delete item: ${args.children}`)()}\n >\n {args.children}\n \n );\n};\n\nexport const CustomTheme = (args) => (\n action(`Click: ${args.children}`)()}>\n {args.children}\n \n);\n\nCustomTheme.args = {\n theme: {\n '--tag-background': 'var(--color-engel)',\n '--tag-color': 'var(--color-black-90)',\n '--tag-focus-outline-color': 'var(--color-black-90)',\n },\n};\n\nexport const LargeDeletableTag = (args) => {\n return (\n action(`Delete item: ${args.children}`)()}\n >\n {args.children}\n \n );\n};\n",locationsMap:{default:{startLoc:{col:23,line:17},endLoc:{col:50,line:17},startBody:{col:23,line:17},endBody:{col:50,line:17}},"clickable-tag":{startLoc:{col:28,line:19},endLoc:{col:1,line:35},startBody:{col:28,line:19},endBody:{col:1,line:35}},"deletable-tag":{startLoc:{col:28,line:37},endLoc:{col:1,line:48},startBody:{col:28,line:37},endBody:{col:1,line:48}},"custom-theme":{startLoc:{col:27,line:50},endLoc:{col:1,line:54},startBody:{col:27,line:50},endBody:{col:1,line:54}},"large-deletable-tag":{startLoc:{col:33,line:64},endLoc:{col:1,line:75},startBody:{col:33,line:64},endBody:{col:1,line:75}}}},controls:{expanded:!0}},args:{children:"Americum"}};var Default=function Default(args){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Tag__WEBPACK_IMPORTED_MODULE_3__.V,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({},args))},ClickableTag=function ClickableTag(args){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Tag__WEBPACK_IMPORTED_MODULE_3__.V,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({},args),{},{label:"Link",role:"link",id:"link",onClick:function onClick(){return(0,_storybook_addon_actions__WEBPACK_IMPORTED_MODULE_1__.action)("Click: ".concat(args.children))()},children:args.children})),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Tag__WEBPACK_IMPORTED_MODULE_3__.V,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({},args),{},{label:"Button",role:"button",id:"button",style:{marginLeft:"var(--spacing-s)"},onClick:function onClick(){return(0,_storybook_addon_actions__WEBPACK_IMPORTED_MODULE_1__.action)("Click: ".concat(args.children))()},children:args.children}))]})},DeletableTag=function DeletableTag(args){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Tag__WEBPACK_IMPORTED_MODULE_3__.V,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({},args),{},{deleteButtonAriaLabel:"Delete item: ".concat(args.children),srOnlyLabel:!0,onDelete:function onDelete(){return(0,_storybook_addon_actions__WEBPACK_IMPORTED_MODULE_1__.action)("Delete item: ".concat(args.children))()},children:args.children}))},CustomTheme=function CustomTheme(args){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Tag__WEBPACK_IMPORTED_MODULE_3__.V,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({},args),{},{onClick:function onClick(){return(0,_storybook_addon_actions__WEBPACK_IMPORTED_MODULE_1__.action)("Click: ".concat(args.children))()},children:args.children}))};CustomTheme.args={theme:{"--tag-background":"var(--color-engel)","--tag-color":"var(--color-black-90)","--tag-focus-outline-color":"var(--color-black-90)"}};var LargeDeletableTag=function LargeDeletableTag(args){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Tag__WEBPACK_IMPORTED_MODULE_3__.V,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({},args),{},{size:"large",deleteButtonAriaLabel:"Delete item",onDelete:function onDelete(){return(0,_storybook_addon_actions__WEBPACK_IMPORTED_MODULE_1__.action)("Delete item: ".concat(args.children))()},children:args.children}))};Default.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({storySource:{source:"(args) => "}},Default.parameters),ClickableTag.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({storySource:{source:'(args) => (\n <>\n action(`Click: ${args.children}`)()}>\n {args.children}\n \n action(`Click: ${args.children}`)()}\n >\n {args.children}\n \n \n)'}},ClickableTag.parameters),DeletableTag.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({storySource:{source:"(args) => {\n return (\n action(`Delete item: ${args.children}`)()}\n >\n {args.children}\n \n );\n}"}},DeletableTag.parameters),CustomTheme.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({storySource:{source:"(args) => (\n action(`Click: ${args.children}`)()}>\n {args.children}\n \n)"}},CustomTheme.parameters),LargeDeletableTag.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({storySource:{source:'(args) => {\n return (\n action(`Delete item: ${args.children}`)()}\n >\n {args.children}\n \n );\n}'}},LargeDeletableTag.parameters);try{Default.displayName="Default",Default.__docgenInfo={description:"",displayName:"Default",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/tag/Tag.stories.tsx#Default"]={docgenInfo:Default.__docgenInfo,name:"Default",path:"src/components/tag/Tag.stories.tsx#Default"})}catch(__react_docgen_typescript_loader_error){}try{ClickableTag.displayName="ClickableTag",ClickableTag.__docgenInfo={description:"",displayName:"ClickableTag",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/tag/Tag.stories.tsx#ClickableTag"]={docgenInfo:ClickableTag.__docgenInfo,name:"ClickableTag",path:"src/components/tag/Tag.stories.tsx#ClickableTag"})}catch(__react_docgen_typescript_loader_error){}try{DeletableTag.displayName="DeletableTag",DeletableTag.__docgenInfo={description:"",displayName:"DeletableTag",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/tag/Tag.stories.tsx#DeletableTag"]={docgenInfo:DeletableTag.__docgenInfo,name:"DeletableTag",path:"src/components/tag/Tag.stories.tsx#DeletableTag"})}catch(__react_docgen_typescript_loader_error){}try{CustomTheme.displayName="CustomTheme",CustomTheme.__docgenInfo={description:"",displayName:"CustomTheme",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/tag/Tag.stories.tsx#CustomTheme"]={docgenInfo:CustomTheme.__docgenInfo,name:"CustomTheme",path:"src/components/tag/Tag.stories.tsx#CustomTheme"})}catch(__react_docgen_typescript_loader_error){}try{LargeDeletableTag.displayName="LargeDeletableTag",LargeDeletableTag.__docgenInfo={description:"",displayName:"LargeDeletableTag",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/tag/Tag.stories.tsx#LargeDeletableTag"]={docgenInfo:LargeDeletableTag.__docgenInfo,name:"LargeDeletableTag",path:"src/components/tag/Tag.stories.tsx#LargeDeletableTag"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/textInput/TextInput.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,Disabled:()=>Disabled,Info:()=>Info,Invalid:()=>Invalid,NumberInput:()=>NumberInput,Playground:()=>Playground,ReadOnly:()=>ReadOnly,Success:()=>Success,UsingRef:()=>UsingRef,WithLabelHidden:()=>WithLabelHidden,WithTooltip:()=>WithTooltip,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/react/index.js"),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@storybook/addon-docs/blocks.js"),_TextInput__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/components/textInput/TextInput.tsx"),_button__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./src/components/button/Button.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/react/jsx-runtime.js"),textInputProps={helperText:"Assistive text",id:"hdsInput",label:"Label",placeholder:"Placeholder"};const __WEBPACK_DEFAULT_EXPORT__={component:_TextInput__WEBPACK_IMPORTED_MODULE_3__.o,title:"Components/TextInput",decorators:[function(storyFn){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div",{style:{maxWidth:"400px"},children:storyFn()})}],parameters:{storySource:{source:"import React, { useRef } from 'react';\nimport { ArgsTable, Stories, Title } from '@storybook/addon-docs/blocks';\n\nimport { TextInput } from './TextInput';\nimport { Button } from '../button';\n\nconst textInputProps = {\n helperText: 'Assistive text',\n id: 'hdsInput',\n label: 'Label',\n placeholder: 'Placeholder',\n};\n\nexport default {\n component: TextInput,\n title: 'Components/TextInput',\n decorators: [(storyFn) =>
{storyFn()}
],\n parameters: {\n controls: { hideNoControlsWarning: true },\n docs: {\n page: () => (\n <>\n Props\n \n \n \n ),\n },\n },\n};\n\nexport const Default = () => ;\n\nexport const ReadOnly = () => ;\nReadOnly.storyName = 'Read-only';\n\nexport const Disabled = () => ;\n\nexport const Invalid = () => ;\n\nexport const Success = () => ;\n\nexport const Info = () => ;\n\nexport const WithLabelHidden = () => ;\nWithLabelHidden.storyName = 'With label hidden';\n\nexport const WithTooltip = () => (\n \n);\nWithTooltip.storyName = 'With tooltip';\n\nexport const NumberInput = () => ;\n\nexport const UsingRef = () => {\n const ref = useRef(null);\n\n return (\n <>\n \n \n \n );\n};\nUsingRef.storyName = 'Using ref';\n\nexport const Playground = (args) => (\n \n);\n\nPlayground.parameters = {\n previewTabs: {\n 'storybook/docs/panel': {\n hidden: true,\n },\n },\n docs: {\n disable: true,\n },\n};\n\nPlayground.args = {\n ...textInputProps,\n type: 'text',\n disabled: false,\n required: false,\n readOnly: false,\n invalid: false,\n errorText: undefined,\n hideLabel: false,\n tooltipAriaLabel: 'Tooltip',\n tooltipText:\n 'Tooltips contain \"nice to have\" information. Default Tooltip contents should not be longer than two to three sentences. For longer descriptions, provide a link to a separate page.',\n tooltipButtonAriaLabelText: 'Tooltip',\n};\n",locationsMap:{default:{startLoc:{col:23,line:32},endLoc:{col:62,line:32},startBody:{col:23,line:32},endBody:{col:62,line:32}},"read-only":{startLoc:{col:24,line:34},endLoc:{col:104,line:34},startBody:{col:24,line:34},endBody:{col:104,line:34}},disabled:{startLoc:{col:24,line:37},endLoc:{col:104,line:37},startBody:{col:24,line:37},endBody:{col:104,line:37}},invalid:{startLoc:{col:23,line:39},endLoc:{col:93,line:39},startBody:{col:23,line:39},endBody:{col:93,line:39}},success:{startLoc:{col:23,line:41},endLoc:{col:89,line:41},startBody:{col:23,line:41},endBody:{col:89,line:41}},info:{startLoc:{col:20,line:43},endLoc:{col:80,line:43},startBody:{col:20,line:43},endBody:{col:80,line:43}},"with-label-hidden":{startLoc:{col:31,line:45},endLoc:{col:80,line:45},startBody:{col:31,line:45},endBody:{col:80,line:45}},"with-tooltip":{startLoc:{col:27,line:48},endLoc:{col:1,line:55},startBody:{col:27,line:48},endBody:{col:1,line:55}},"number-input":{startLoc:{col:27,line:58},endLoc:{col:80,line:58},startBody:{col:27,line:58},endBody:{col:80,line:58}},"using-ref":{startLoc:{col:24,line:60},endLoc:{col:1,line:71},startBody:{col:24,line:60},endBody:{col:1,line:71}},playground:{startLoc:{col:26,line:74},endLoc:{col:1,line:91},startBody:{col:26,line:74},endBody:{col:1,line:91}}}},controls:{hideNoControlsWarning:!0},docs:{page:function page(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_1__.Dx,{children:"Props"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_1__.$4,{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_1__.fQ,{title:"Examples",includePrimary:!0})]})}}}};var Default=function Default(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_TextInput__WEBPACK_IMPORTED_MODULE_3__.o,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({},textInputProps))},ReadOnly=function ReadOnly(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_TextInput__WEBPACK_IMPORTED_MODULE_3__.o,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({},textInputProps),{},{readOnly:!0,defaultValue:"Text input value"}))};ReadOnly.storyName="Read-only";var Disabled=function Disabled(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_TextInput__WEBPACK_IMPORTED_MODULE_3__.o,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({},textInputProps),{},{disabled:!0,defaultValue:"Text input value"}))},Invalid=function Invalid(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_TextInput__WEBPACK_IMPORTED_MODULE_3__.o,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({},textInputProps),{},{invalid:!0,errorText:"Error text"}))},Success=function Success(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_TextInput__WEBPACK_IMPORTED_MODULE_3__.o,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({},textInputProps),{},{successText:"Success text"}))},Info=function Info(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_TextInput__WEBPACK_IMPORTED_MODULE_3__.o,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({},textInputProps),{},{infoText:"Info text"}))},WithLabelHidden=function WithLabelHidden(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_TextInput__WEBPACK_IMPORTED_MODULE_3__.o,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({},textInputProps),{},{hideLabel:!0}))};WithLabelHidden.storyName="With label hidden";var WithTooltip=function WithTooltip(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_TextInput__WEBPACK_IMPORTED_MODULE_3__.o,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({},textInputProps),{},{tooltipLabel:"Tooltip",tooltipButtonLabel:"Tooltip",tooltipText:'Tooltips contain "nice to have" information. Default Tooltip contents should not be longer than two to three sentences. For longer descriptions, provide a link to a separate page.'}))};WithTooltip.storyName="With tooltip";var NumberInput=function NumberInput(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_TextInput__WEBPACK_IMPORTED_MODULE_3__.o,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({},textInputProps),{},{type:"number"}))},UsingRef=function UsingRef(){var ref=(0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_button__WEBPACK_IMPORTED_MODULE_5__.z,{onClick:function onClick(){var _ref$current;return null==ref||null===(_ref$current=ref.current)||void 0===_ref$current?void 0:_ref$current.focus()},style:{marginBottom:"1rem"},theme:"black",size:"small",children:"Focus input"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_TextInput__WEBPACK_IMPORTED_MODULE_3__.o,(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({},textInputProps),{},{ref}))]})};UsingRef.storyName="Using ref";var Playground=function Playground(args){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_TextInput__WEBPACK_IMPORTED_MODULE_3__.o,{id:args.id,label:args.label,helperText:args.helperText,placeholder:args.placeholder,readOnly:args.readOnly,type:args.type,disabled:args.disabled,invalid:args.invalid,errorText:args.errorText,hideLabel:args.hideLabel,required:args.required,tooltipLabel:args.tooltipLabel,tooltipText:args.tooltipText,tooltipButtonLabel:args.tooltipButtonAriaLabelText})};Playground.parameters={previewTabs:{"storybook/docs/panel":{hidden:!0}},docs:{disable:!0}},Playground.args=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)((0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({},textInputProps),{},{type:"text",disabled:!1,required:!1,readOnly:!1,invalid:!1,errorText:void 0,hideLabel:!1,tooltipAriaLabel:"Tooltip",tooltipText:'Tooltips contain "nice to have" information. Default Tooltip contents should not be longer than two to three sentences. For longer descriptions, provide a link to a separate page.',tooltipButtonAriaLabelText:"Tooltip"}),Default.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({storySource:{source:"() => "}},Default.parameters),ReadOnly.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({storySource:{source:'() => '}},ReadOnly.parameters),Disabled.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({storySource:{source:'() => '}},Disabled.parameters),Invalid.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({storySource:{source:'() => '}},Invalid.parameters),Success.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({storySource:{source:'() => '}},Success.parameters),Info.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({storySource:{source:'() => '}},Info.parameters),WithLabelHidden.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({storySource:{source:"() => "}},WithLabelHidden.parameters),WithTooltip.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({storySource:{source:'() => (\n \n)'}},WithTooltip.parameters),NumberInput.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({storySource:{source:'() => '}},NumberInput.parameters),UsingRef.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({storySource:{source:'() => {\n const ref = useRef(null);\n\n return (\n <>\n \n \n \n );\n}'}},UsingRef.parameters),Playground.parameters=(0,_Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__.Z)({storySource:{source:"(args) => (\n \n)"}},Playground.parameters);try{Playground.displayName="Playground",Playground.__docgenInfo={description:"",displayName:"Playground",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/textInput/TextInput.stories.tsx#Playground"]={docgenInfo:Playground.__docgenInfo,name:"Playground",path:"src/components/textInput/TextInput.stories.tsx#Playground"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/textarea/TextArea.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,Disabled:()=>Disabled,Info:()=>Info,Invalid:()=>Invalid,Playground:()=>Playground,Success:()=>Success,WithLabelHidden:()=>WithLabelHidden,WithTooltip:()=>WithTooltip,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _Users_mikko_jamia_git_helsinki_helsinki_design_system_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("../../node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_1__=(__webpack_require__("../../node_modules/react/index.js"),__webpack_require__("./node_modules/@storybook/addon-docs/blocks.js")),_TextArea__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/components/textarea/TextArea.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/react/jsx-runtime.js"),textAreaProps={helperText:"Assistive text",id:"textArea",label:"Label",placeholder:"Placeholder"},value="Lorem ipsum dolor sit amet, consectetur adipiscing elit.";const __WEBPACK_DEFAULT_EXPORT__={component:_TextArea__WEBPACK_IMPORTED_MODULE_3__.K,title:"Components/TextArea",decorators:[function(storyFn){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div",{style:{maxWidth:"400px"},children:storyFn()})}],parameters:{storySource:{source:"import React from 'react';\nimport { ArgsTable, Stories, Title } from '@storybook/addon-docs/blocks';\n\nimport { TextArea } from './TextArea';\n\nconst textAreaProps = {\n helperText: 'Assistive text',\n id: 'textArea',\n label: 'Label',\n placeholder: 'Placeholder',\n};\nconst value = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';\n\nexport default {\n component: TextArea,\n title: 'Components/TextArea',\n decorators: [(storyFn) =>
{storyFn()}
],\n parameters: {\n controls: { hideNoControlsWarning: true },\n docs: {\n page: () => (\n <>\n Props\n \n \n \n ),\n },\n },\n};\n\nexport const Default = () =>