@alfalab/core-components 44.5.1-beta.4 → 44.6.0-beta.0

package/bottom-sheet/modern/components/footer/Component.js

@@ -2,10 +2,10 @@ import React, { useContext, useEffect } from 'react';
 import cn from 'classnames';
 import { BaseModalContext } from '../../../../base-modal/modern';
 
-const styles = {"footer":"bottom-sheet__footer_17wtd","sticky":"bottom-sheet__sticky_17wtd","highlighted":"bottom-sheet__highlighted_17wtd","background-accent":"bottom-sheet__background-accent_17wtd","background-info":"bottom-sheet__background-info_17wtd","background-attention-muted":"bottom-sheet__background-attention-muted_17wtd","background-positive-muted":"bottom-sheet__background-positive-muted_17wtd","background-negative-muted":"bottom-sheet__background-negative-muted_17wtd","background-primary":"bottom-sheet__background-primary_17wtd","background-primary-inverted":"bottom-sheet__background-primary-inverted_17wtd","background-secondary":"bottom-sheet__background-secondary_17wtd","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_17wtd","background-tertiary":"bottom-sheet__background-tertiary_17wtd","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_17wtd","background-quaternary":"bottom-sheet__background-quaternary_17wtd","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_17wtd","background-specialbg-component":"bottom-sheet__background-specialbg-component_17wtd","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_17wtd","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_17wtd","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_17wtd","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_17wtd","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_17wtd","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_17wtd","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_17wtd","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_17wtd"};
+const styles = {"footer":"bottom-sheet__footer_1iquq","sticky":"bottom-sheet__sticky_1iquq","highlighted":"bottom-sheet__highlighted_1iquq","background-accent":"bottom-sheet__background-accent_1iquq","background-info":"bottom-sheet__background-info_1iquq","background-attention-muted":"bottom-sheet__background-attention-muted_1iquq","background-positive-muted":"bottom-sheet__background-positive-muted_1iquq","background-negative-muted":"bottom-sheet__background-negative-muted_1iquq","background-primary":"bottom-sheet__background-primary_1iquq","background-primary-inverted":"bottom-sheet__background-primary-inverted_1iquq","background-secondary":"bottom-sheet__background-secondary_1iquq","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_1iquq","background-tertiary":"bottom-sheet__background-tertiary_1iquq","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_1iquq","background-quaternary":"bottom-sheet__background-quaternary_1iquq","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_1iquq","background-specialbg-component":"bottom-sheet__background-specialbg-component_1iquq","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_1iquq","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_1iquq","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_1iquq","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_1iquq","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_1iquq","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_1iquq","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_1iquq","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_1iquq"};
 require('./index.css');
 
-const Footer = ({ children, className, sticky }) => {
+const Footer = ({ children, className, sticky, dataTestId }) => {
     const { footerHighlighted, setHasFooter } = useContext(BaseModalContext);
     useEffect(() => {
         setHasFooter(true);
@@ -13,7 +13,7 @@ const Footer = ({ children, className, sticky }) => {
     return (React.createElement("div", { className: cn(styles.footer, className, {
             [styles.sticky]: sticky,
             [styles.highlighted]: footerHighlighted && sticky,
-        }) }, children));
+        }), "data-test-id": dataTestId }, children));
 };
 
 export { Footer };

package/bottom-sheet/modern/components/footer/index.css

@@ -1,4 +1,4 @@
-/* hash: 17kb9 */
+/* hash: 16a4h */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-accent: #ef3124;
@@ -46,58 +46,58 @@
     /* footer */
     --bottom-sheet-footer-border-top: 1px solid var(--color-light-neutral-300);
     --bottom-sheet-footer-background-color: var(--color-light-modal-bg-primary);
-} .bottom-sheet__footer_17wtd {
+} .bottom-sheet__footer_1iquq {
     padding: var(--gap-m) var(--gap-m);
     background-color: var(--color-light-modal-bg-primary);
-} .bottom-sheet__sticky_17wtd {
+} .bottom-sheet__sticky_1iquq {
     position: sticky;
     bottom: 0;
     z-index: 1;
-} .bottom-sheet__highlighted_17wtd {
+} .bottom-sheet__highlighted_1iquq {
     border-top: var(--bottom-sheet-footer-border-top);
     background-color: var(--bottom-sheet-footer-background-color);
-} .bottom-sheet__background-accent_17wtd {
+} .bottom-sheet__background-accent_1iquq {
             background-color: var(--color-light-bg-accent);
-        } .bottom-sheet__background-info_17wtd {
+        } .bottom-sheet__background-info_1iquq {
             background-color: var(--color-light-bg-info);
-        } .bottom-sheet__background-attention-muted_17wtd {
+        } .bottom-sheet__background-attention-muted_1iquq {
             background-color: var(--color-light-bg-attention-muted);
-        } .bottom-sheet__background-positive-muted_17wtd {
+        } .bottom-sheet__background-positive-muted_1iquq {
             background-color: var(--color-light-bg-positive-muted);
-        } .bottom-sheet__background-negative-muted_17wtd {
+        } .bottom-sheet__background-negative-muted_1iquq {
             background-color: var(--color-light-bg-negative-muted);
-        } .bottom-sheet__background-primary_17wtd {
+        } .bottom-sheet__background-primary_1iquq {
             background-color: var(--color-light-bg-primary);
-        } .bottom-sheet__background-primary-inverted_17wtd {
+        } .bottom-sheet__background-primary-inverted_1iquq {
             background-color: var(--color-light-bg-primary-inverted);
-        } .bottom-sheet__background-secondary_17wtd {
+        } .bottom-sheet__background-secondary_1iquq {
             background-color: var(--color-light-bg-secondary);
-        } .bottom-sheet__background-secondary-inverted_17wtd {
+        } .bottom-sheet__background-secondary-inverted_1iquq {
             background-color: var(--color-light-bg-secondary-inverted);
-        } .bottom-sheet__background-tertiary_17wtd {
+        } .bottom-sheet__background-tertiary_1iquq {
             background-color: var(--color-light-bg-tertiary);
-        } .bottom-sheet__background-tertiary-inverted_17wtd {
+        } .bottom-sheet__background-tertiary-inverted_1iquq {
             background-color: var(--color-light-bg-tertiary-inverted);
-        } .bottom-sheet__background-quaternary_17wtd {
+        } .bottom-sheet__background-quaternary_1iquq {
             background-color: var(--color-light-bg-quaternary);
-        } .bottom-sheet__background-quaternary-inverted_17wtd {
+        } .bottom-sheet__background-quaternary-inverted_1iquq {
             background-color: var(--color-light-bg-quaternary-inverted);
-        } .bottom-sheet__background-specialbg-component_17wtd {
+        } .bottom-sheet__background-specialbg-component_1iquq {
             background-color: var(--color-light-specialbg-component);
-        } .bottom-sheet__background-specialbg-component-inverted_17wtd {
+        } .bottom-sheet__background-specialbg-component-inverted_1iquq {
             background-color: var(--color-light-specialbg-component-inverted);
-        } .bottom-sheet__background-specialbg-primary-grouped_17wtd {
+        } .bottom-sheet__background-specialbg-primary-grouped_1iquq {
             background-color: var(--color-light-specialbg-primary-grouped);
-        } .bottom-sheet__background-specialbg-secondary-grouped_17wtd {
+        } .bottom-sheet__background-specialbg-secondary-grouped_1iquq {
             background-color: var(--color-light-specialbg-secondary-grouped);
-        } .bottom-sheet__background-specialbg-tertiary-grouped_17wtd {
+        } .bottom-sheet__background-specialbg-tertiary-grouped_1iquq {
             background-color: var(--color-light-specialbg-tertiary-grouped);
-        } .bottom-sheet__background-specialbg-secondary-transparent_17wtd {
+        } .bottom-sheet__background-specialbg-secondary-transparent_1iquq {
             background-color: var(--color-light-specialbg-secondary-transparent);
-        } .bottom-sheet__background-specialbg-secondary-transparent-inverted_17wtd {
+        } .bottom-sheet__background-specialbg-secondary-transparent-inverted_1iquq {
             background-color: var(--color-light-specialbg-secondary-transparent-inverted);
-        } .bottom-sheet__background-specialbg-tertiary-transparent_17wtd {
+        } .bottom-sheet__background-specialbg-tertiary-transparent_1iquq {
             background-color: var(--color-light-specialbg-tertiary-transparent);
-        } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_17wtd {
+        } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_1iquq {
             background-color: var(--color-light-specialbg-tertiary-transparent-inverted);
         }

package/bottom-sheet/modern/components/header/Component.js

@@ -3,7 +3,7 @@ import cn from 'classnames';
 import { BaseModalContext } from '../../../../base-modal/modern';
 import { NavigationBar } from '../../../../navigation-bar/modern';
 
-const styles = {"headerWrapper":"bottom-sheet__headerWrapper_1hvqa","hasContent":"bottom-sheet__hasContent_1hvqa","header":"bottom-sheet__header_1hvqa","sticky":"bottom-sheet__sticky_1hvqa","highlighted":"bottom-sheet__highlighted_1hvqa","justifyEnd":"bottom-sheet__justifyEnd_1hvqa","addon":"bottom-sheet__addon_1hvqa","addonFixed":"bottom-sheet__addonFixed_1hvqa","title":"bottom-sheet__title_1hvqa","titleCenter":"bottom-sheet__titleCenter_1hvqa","titleLeft":"bottom-sheet__titleLeft_1hvqa","trimTitle":"bottom-sheet__trimTitle_1hvqa"};
+const styles = {"headerWrapper":"bottom-sheet__headerWrapper_1g17q","hasContent":"bottom-sheet__hasContent_1g17q","header":"bottom-sheet__header_1g17q","sticky":"bottom-sheet__sticky_1g17q","highlighted":"bottom-sheet__highlighted_1g17q","justifyEnd":"bottom-sheet__justifyEnd_1g17q","addon":"bottom-sheet__addon_1g17q","addonFixed":"bottom-sheet__addonFixed_1g17q","title":"bottom-sheet__title_1g17q","titleCenter":"bottom-sheet__titleCenter_1g17q","titleLeft":"bottom-sheet__titleLeft_1g17q","trimTitle":"bottom-sheet__trimTitle_1g17q"};
 require('./index.css');
 
 const Header = ({ className, sticky, headerRef, headerOffset, title, children, ...restProps }) => {

package/bottom-sheet/modern/components/header/index.css

@@ -1,4 +1,4 @@
-/* hash: frex9 */
+/* hash: jnt55 */
 :root {
 } /* deprecated */ :root {
     --color-light-neutral-300: #e7e8eb; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -30,42 +30,42 @@
     --bottom-sheet-title-font-family: var(--font-family-system);
 
     /* footer */
-} .bottom-sheet__headerWrapper_1hvqa {
+} .bottom-sheet__headerWrapper_1g17q {
     padding: var(--gap-s) var(--gap-xs) var(--gap-2xs);
     border-top-left-radius: inherit;
     border-top-right-radius: inherit;
     z-index: 1;
-} .bottom-sheet__hasContent_1hvqa {
+} .bottom-sheet__hasContent_1g17q {
     background-color: inherit;
-} .bottom-sheet__header_1hvqa {
+} .bottom-sheet__header_1g17q {
     display: flex;
-} .bottom-sheet__sticky_1hvqa {
+} .bottom-sheet__sticky_1g17q {
     position: sticky;
     top: 0;
-} .bottom-sheet__highlighted_1hvqa {
+} .bottom-sheet__highlighted_1g17q {
     border-bottom: var(--bottom-sheet-header-border-bottom);
-} .bottom-sheet__justifyEnd_1hvqa {
+} .bottom-sheet__justifyEnd_1g17q {
     justify-content: flex-end;
-} .bottom-sheet__addon_1hvqa {
+} .bottom-sheet__addon_1g17q {
     display: flex;
     justify-content: center;
     align-items: center;
     min-width: 48px;
     height: 48px;
-} .bottom-sheet__addonFixed_1hvqa {
+} .bottom-sheet__addonFixed_1g17q {
     position: fixed;
-} .bottom-sheet__title_1hvqa {
+} .bottom-sheet__title_1g17q {
     padding: var(--gap-s) var(--gap-xs);
     width: 100%;
     font-size: var(--bottom-sheet-title-font-size);
     font-weight: var(--bottom-sheet-title-font-weight);
     line-height: var(--bottom-sheet-title-line-height);
     font-family: var(--bottom-sheet-title-font-family);
-} .bottom-sheet__titleCenter_1hvqa {
+} .bottom-sheet__titleCenter_1g17q {
     text-align: center;
-} .bottom-sheet__titleLeft_1hvqa {
+} .bottom-sheet__titleLeft_1g17q {
     text-align: left;
-} .bottom-sheet__trimTitle_1hvqa {
+} .bottom-sheet__trimTitle_1g17q {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;

package/bottom-sheet/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 1wwzy */
+/* hash: fv5ku */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-accent: #ef3124;
@@ -52,23 +52,25 @@
     /* header */
 
     /* footer */
-} .bottom-sheet__modal_6rf8a {
+} .bottom-sheet__modal_t57fr {
     bottom: 0;
     width: 100%;
     max-width: 600px;
     pointer-events: none;
-} .bottom-sheet__modal_6rf8a.bottom-sheet__modal_6rf8a {
+    touch-action: none;
+} .bottom-sheet__modal_t57fr.bottom-sheet__modal_t57fr {
     background-color: transparent;
     position: fixed;
-} .bottom-sheet__wrapper_6rf8a {
+} .bottom-sheet__wrapper_t57fr {
     transform: translateY(100%);
     pointer-events: none;
+    touch-action: none;
     border-top-right-radius: var(--bottom-sheet-top-radius);
     border-top-left-radius: var(--bottom-sheet-top-radius);
     transition: border-radius 0.3s ease;
-} .bottom-sheet__fullscreen_6rf8a {
+} .bottom-sheet__fullscreen_t57fr {
     border-radius: 0;
-} .bottom-sheet__component_6rf8a {
+} .bottom-sheet__component_t57fr {
     position: relative;
     display: flex;
     flex-direction: column;
@@ -76,9 +78,9 @@
     background-color: var(--color-light-modal-bg-primary);
     pointer-events: all;
     box-shadow: var(--bottom-sheet-shadow);
-} .bottom-sheet__withTransition_6rf8a {
+} .bottom-sheet__withTransition_t57fr {
     transition: var(--bottom-sheet-out-transition);
-} .bottom-sheet__scrollableContainer_6rf8a {
+} .bottom-sheet__scrollableContainer_t57fr {
     overflow: auto;
     display: flex;
     flex-direction: column;
@@ -86,7 +88,8 @@
     height: 100%;
     background-color: inherit;
     border-radius: inherit;
-} .bottom-sheet__marker_6rf8a {
+    overscroll-behavior: contain;
+} .bottom-sheet__marker_t57fr {
     position: fixed;
     top: var(--gap-2xs);
     right: 0;
@@ -94,11 +97,11 @@
     z-index: 1000;
     width: 36px;
     margin: 0 auto;
-} .bottom-sheet__defaultMarker_6rf8a {
+} .bottom-sheet__defaultMarker_t57fr {
     height: 4px;
     border-radius: var(--border-radius-xxl);
     background-color: var(--color-light-neutral-translucent-300);
-} .bottom-sheet__content_6rf8a {
+} .bottom-sheet__content_t57fr {
     position: relative;
     z-index: 0;
     display: flex;
@@ -108,73 +111,73 @@
     color: var(--color-light-text-primary);
     background-color: inherit;
     border-radius: inherit;
-} .bottom-sheet__noHeader_6rf8a {
+} .bottom-sheet__noHeader_t57fr {
     padding-top: var(--gap-m);
-} .bottom-sheet__noFooter_6rf8a {
+} .bottom-sheet__noFooter_t57fr {
     padding-bottom: var(--gap-m);
-} .bottom-sheet__scrollLocked_6rf8a {
+} .bottom-sheet__scrollLocked_t57fr {
     overflow: hidden;
-} .bottom-sheet__hiddenScrollbar_6rf8a {
+} .bottom-sheet__hiddenScrollbar_t57fr {
     scrollbar-width: none
-} .bottom-sheet__hiddenScrollbar_6rf8a::-webkit-scrollbar {
+} .bottom-sheet__hiddenScrollbar_t57fr::-webkit-scrollbar {
         width: 0;
         height: 0;
-    } .bottom-sheet__disabledPointerEvents_6rf8a {
+    } .bottom-sheet__disabledPointerEvents_t57fr {
     pointer-events: none;
-} .bottom-sheet__appear_6rf8a .bottom-sheet__wrapper_6rf8a, .bottom-sheet__enter_6rf8a .bottom-sheet__wrapper_6rf8a {
+} .bottom-sheet__appear_t57fr .bottom-sheet__wrapper_t57fr, .bottom-sheet__enter_t57fr .bottom-sheet__wrapper_t57fr {
         transition: none;
-    } .bottom-sheet__appearActive_6rf8a .bottom-sheet__wrapper_6rf8a, .bottom-sheet__enterActive_6rf8a .bottom-sheet__wrapper_6rf8a {
+    } .bottom-sheet__appearActive_t57fr .bottom-sheet__wrapper_t57fr, .bottom-sheet__enterActive_t57fr .bottom-sheet__wrapper_t57fr {
         transition: var(--bottom-sheet-in-transition);
         transform: translateY(0);
-    } .bottom-sheet__enterDone_6rf8a .bottom-sheet__wrapper_6rf8a, .bottom-sheet__appearDone_6rf8a .bottom-sheet__wrapper_6rf8a {
+    } .bottom-sheet__enterDone_t57fr .bottom-sheet__wrapper_t57fr, .bottom-sheet__appearDone_t57fr .bottom-sheet__wrapper_t57fr {
         transform: translateY(0);
-    } .bottom-sheet__exit_6rf8a .bottom-sheet__wrapper_6rf8a {
+    } .bottom-sheet__exit_t57fr .bottom-sheet__wrapper_t57fr {
         transform: translateY(0);
-    } .bottom-sheet__exitActive_6rf8a .bottom-sheet__wrapper_6rf8a {
+    } .bottom-sheet__exitActive_t57fr .bottom-sheet__wrapper_t57fr {
         transition: var(--bottom-sheet-out-transition);
         transform: translateY(100%);
-    } .bottom-sheet__background-accent_6rf8a {
+    } .bottom-sheet__background-accent_t57fr {
             background-color: var(--color-light-bg-accent);
-        } .bottom-sheet__background-info_6rf8a {
+        } .bottom-sheet__background-info_t57fr {
             background-color: var(--color-light-bg-info);
-        } .bottom-sheet__background-attention-muted_6rf8a {
+        } .bottom-sheet__background-attention-muted_t57fr {
             background-color: var(--color-light-bg-attention-muted);
-        } .bottom-sheet__background-positive-muted_6rf8a {
+        } .bottom-sheet__background-positive-muted_t57fr {
             background-color: var(--color-light-bg-positive-muted);
-        } .bottom-sheet__background-negative-muted_6rf8a {
+        } .bottom-sheet__background-negative-muted_t57fr {
             background-color: var(--color-light-bg-negative-muted);
-        } .bottom-sheet__background-primary_6rf8a {
+        } .bottom-sheet__background-primary_t57fr {
             background-color: var(--color-light-bg-primary);
-        } .bottom-sheet__background-primary-inverted_6rf8a {
+        } .bottom-sheet__background-primary-inverted_t57fr {
             background-color: var(--color-light-bg-primary-inverted);
-        } .bottom-sheet__background-secondary_6rf8a {
+        } .bottom-sheet__background-secondary_t57fr {
             background-color: var(--color-light-bg-secondary);
-        } .bottom-sheet__background-secondary-inverted_6rf8a {
+        } .bottom-sheet__background-secondary-inverted_t57fr {
             background-color: var(--color-light-bg-secondary-inverted);
-        } .bottom-sheet__background-tertiary_6rf8a {
+        } .bottom-sheet__background-tertiary_t57fr {
             background-color: var(--color-light-bg-tertiary);
-        } .bottom-sheet__background-tertiary-inverted_6rf8a {
+        } .bottom-sheet__background-tertiary-inverted_t57fr {
             background-color: var(--color-light-bg-tertiary-inverted);
-        } .bottom-sheet__background-quaternary_6rf8a {
+        } .bottom-sheet__background-quaternary_t57fr {
             background-color: var(--color-light-bg-quaternary);
-        } .bottom-sheet__background-quaternary-inverted_6rf8a {
+        } .bottom-sheet__background-quaternary-inverted_t57fr {
             background-color: var(--color-light-bg-quaternary-inverted);
-        } .bottom-sheet__background-specialbg-component_6rf8a {
+        } .bottom-sheet__background-specialbg-component_t57fr {
             background-color: var(--color-light-specialbg-component);
-        } .bottom-sheet__background-specialbg-component-inverted_6rf8a {
+        } .bottom-sheet__background-specialbg-component-inverted_t57fr {
             background-color: var(--color-light-specialbg-component-inverted);
-        } .bottom-sheet__background-specialbg-primary-grouped_6rf8a {
+        } .bottom-sheet__background-specialbg-primary-grouped_t57fr {
             background-color: var(--color-light-specialbg-primary-grouped);
-        } .bottom-sheet__background-specialbg-secondary-grouped_6rf8a {
+        } .bottom-sheet__background-specialbg-secondary-grouped_t57fr {
             background-color: var(--color-light-specialbg-secondary-grouped);
-        } .bottom-sheet__background-specialbg-tertiary-grouped_6rf8a {
+        } .bottom-sheet__background-specialbg-tertiary-grouped_t57fr {
             background-color: var(--color-light-specialbg-tertiary-grouped);
-        } .bottom-sheet__background-specialbg-secondary-transparent_6rf8a {
+        } .bottom-sheet__background-specialbg-secondary-transparent_t57fr {
             background-color: var(--color-light-specialbg-secondary-transparent);
-        } .bottom-sheet__background-specialbg-secondary-transparent-inverted_6rf8a {
+        } .bottom-sheet__background-specialbg-secondary-transparent-inverted_t57fr {
             background-color: var(--color-light-specialbg-secondary-transparent-inverted);
-        } .bottom-sheet__background-specialbg-tertiary-transparent_6rf8a {
+        } .bottom-sheet__background-specialbg-tertiary-transparent_t57fr {
             background-color: var(--color-light-specialbg-tertiary-transparent);
-        } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_6rf8a {
+        } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_t57fr {
             background-color: var(--color-light-specialbg-tertiary-transparent-inverted);
         }

package/bottom-sheet/modern/shared/index.d.ts

@@ -0,0 +1 @@
+export { getBottomSheetTestIds } from "../utils";

package/bottom-sheet/modern/shared/index.js

@@ -0,0 +1,2 @@
+export { getBottomSheetTestIds } from '../utils.js';
+import '../../../shared/modern';

package/bottom-sheet/modern/utils.d.ts

@@ -5,4 +5,13 @@ declare const CLOSE_OFFSET = 0.2;
 declare const SCROLL_OFFSET = 1;
 declare const HEADER_OFFSET = 24;
 declare const convertPercentToNumber: (value: string | number, fullHeight: number, headerOffset?: number) => number;
-export { TIMEOUT, SWIPE_VELOCITY, MARKER_HEIGHT, CLOSE_OFFSET, SCROLL_OFFSET, HEADER_OFFSET, convertPercentToNumber };
+declare function getBottomSheetTestIds(dataTestId: string): {
+    bottomSheet: string;
+    content: string;
+    footer: string;
+    header: string;
+    title: string;
+    closer: string;
+    backButton: string;
+};
+export { TIMEOUT, SWIPE_VELOCITY, MARKER_HEIGHT, CLOSE_OFFSET, SCROLL_OFFSET, HEADER_OFFSET, convertPercentToNumber, getBottomSheetTestIds };

package/bottom-sheet/modern/utils.js

@@ -1,3 +1,5 @@
+import { getDataTestId } from '../../shared/modern';
+
 const TIMEOUT = 500;
 const SWIPE_VELOCITY = 0.4;
 const MARKER_HEIGHT = 24;
@@ -18,5 +20,16 @@ const convertPercentToNumber = (value, fullHeight, headerOffset = HEADER_OFFSET)
     }
     return Math.min(maxHeight, value);
 };
+function getBottomSheetTestIds(dataTestId) {
+    return {
+        bottomSheet: dataTestId,
+        content: getDataTestId(dataTestId, 'content'),
+        footer: getDataTestId(dataTestId, 'footer'),
+        header: getDataTestId(dataTestId, 'header'),
+        title: getDataTestId(dataTestId, 'header-title'),
+        closer: getDataTestId(dataTestId, 'header-closer'),
+        backButton: getDataTestId(dataTestId, 'header-back-button'),
+    };
+}
 
-export { CLOSE_OFFSET, HEADER_OFFSET, MARKER_HEIGHT, SCROLL_OFFSET, SWIPE_VELOCITY, TIMEOUT, convertPercentToNumber };
+export { CLOSE_OFFSET, HEADER_OFFSET, MARKER_HEIGHT, SCROLL_OFFSET, SWIPE_VELOCITY, TIMEOUT, convertPercentToNumber, getBottomSheetTestIds };

package/bottom-sheet/shared/index.d.ts

@@ -0,0 +1 @@
+export { getBottomSheetTestIds } from "../utils";

package/bottom-sheet/shared/index.js

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utils = require('../utils.js');
+
+
+
+exports.getBottomSheetTestIds = utils.getBottomSheetTestIds;

package/bottom-sheet/shared/package.json

@@ -0,0 +1,3 @@
+{
+    "module": "../esm/shared/index.js"
+}

package/bottom-sheet/utils.d.ts

@@ -5,4 +5,13 @@ declare const CLOSE_OFFSET = 0.2;
 declare const SCROLL_OFFSET = 1;
 declare const HEADER_OFFSET = 24;
 declare const convertPercentToNumber: (value: string | number, fullHeight: number, headerOffset?: number) => number;
-export { TIMEOUT, SWIPE_VELOCITY, MARKER_HEIGHT, CLOSE_OFFSET, SCROLL_OFFSET, HEADER_OFFSET, convertPercentToNumber };
+declare function getBottomSheetTestIds(dataTestId: string): {
+    bottomSheet: string;
+    content: string;
+    footer: string;
+    header: string;
+    title: string;
+    closer: string;
+    backButton: string;
+};
+export { TIMEOUT, SWIPE_VELOCITY, MARKER_HEIGHT, CLOSE_OFFSET, SCROLL_OFFSET, HEADER_OFFSET, convertPercentToNumber, getBottomSheetTestIds };

package/bottom-sheet/utils.js

@@ -1,5 +1,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var coreComponentsShared = require('../shared');
+
 var TIMEOUT = 500;
 var SWIPE_VELOCITY = 0.4;
 var MARKER_HEIGHT = 24;
@@ -21,6 +23,17 @@ var convertPercentToNumber = function (value, fullHeight, headerOffset) {
     }
     return Math.min(maxHeight, value);
 };
+function getBottomSheetTestIds(dataTestId) {
+    return {
+        bottomSheet: dataTestId,
+        content: coreComponentsShared.getDataTestId(dataTestId, 'content'),
+        footer: coreComponentsShared.getDataTestId(dataTestId, 'footer'),
+        header: coreComponentsShared.getDataTestId(dataTestId, 'header'),
+        title: coreComponentsShared.getDataTestId(dataTestId, 'header-title'),
+        closer: coreComponentsShared.getDataTestId(dataTestId, 'header-closer'),
+        backButton: coreComponentsShared.getDataTestId(dataTestId, 'header-back-button'),
+    };
+}
 
 exports.CLOSE_OFFSET = CLOSE_OFFSET;
 exports.HEADER_OFFSET = HEADER_OFFSET;
@@ -29,3 +42,4 @@ exports.SCROLL_OFFSET = SCROLL_OFFSET;
 exports.SWIPE_VELOCITY = SWIPE_VELOCITY;
 exports.TIMEOUT = TIMEOUT;
 exports.convertPercentToNumber = convertPercentToNumber;
+exports.getBottomSheetTestIds = getBottomSheetTestIds;

package/button/components/base-button/Component.js

@@ -14,13 +14,13 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var defaultColors = {"accent":"button__accent_94zrs","loader":"button__loader_94zrs","primary":"button__primary_94zrs","secondary":"button__secondary_94zrs","outlined":"button__outlined_94zrs","tertiary":"button__tertiary_94zrs","filled":"button__filled_94zrs","transparent":"button__transparent_94zrs","link":"button__link_94zrs","ghost":"button__ghost_94zrs","component":"button__component_94zrs","loading":"button__loading_94zrs"};
+var defaultColors = {"accent":"button__accent_t86bw","loader":"button__loader_t86bw","primary":"button__primary_t86bw","secondary":"button__secondary_t86bw","outlined":"button__outlined_t86bw","tertiary":"button__tertiary_t86bw","filled":"button__filled_t86bw","transparent":"button__transparent_t86bw","link":"button__link_t86bw","ghost":"button__ghost_t86bw","component":"button__component_t86bw","loading":"button__loading_t86bw"};
 require('./default.css');
 
-var commonStyles = {"component":"button__component_cir0l","hug":"button__hug_cir0l","fill":"button__fill_cir0l","hint":"button__hint_cir0l","focused":"button__focused_cir0l","loading":"button__loading_cir0l","text":"button__text_cir0l","addons":"button__addons_cir0l","stretchText":"button__stretchText_cir0l","loader":"button__loader_cir0l","xxs":"button__xxs_cir0l","iconOnly":"button__iconOnly_cir0l","xs":"button__xs_cir0l","s":"button__s_cir0l","m":"button__m_cir0l","l":"button__l_cir0l","xl":"button__xl_cir0l","withRightAddons":"button__withRightAddons_cir0l","ghost":"button__ghost_cir0l","withLeftAddons":"button__withLeftAddons_cir0l","link":"button__link_cir0l","block":"button__block_cir0l","nowrap":"button__nowrap_cir0l","rounded":"button__rounded_cir0l"};
+var commonStyles = {"component":"button__component_1s3j8","hug":"button__hug_1s3j8","fill":"button__fill_1s3j8","hint":"button__hint_1s3j8","allowBackdropBlur":"button__allowBackdropBlur_1s3j8","secondary":"button__secondary_1s3j8","accent":"button__accent_1s3j8","primary":"button__primary_1s3j8","focused":"button__focused_1s3j8","loading":"button__loading_1s3j8","text":"button__text_1s3j8","addons":"button__addons_1s3j8","stretchText":"button__stretchText_1s3j8","loader":"button__loader_1s3j8","xxs":"button__xxs_1s3j8","iconOnly":"button__iconOnly_1s3j8","xs":"button__xs_1s3j8","s":"button__s_1s3j8","m":"button__m_1s3j8","l":"button__l_1s3j8","xl":"button__xl_1s3j8","withRightAddons":"button__withRightAddons_1s3j8","ghost":"button__ghost_1s3j8","withLeftAddons":"button__withLeftAddons_1s3j8","link":"button__link_1s3j8","block":"button__block_1s3j8","nowrap":"button__nowrap_1s3j8","rounded":"button__rounded_1s3j8"};
 require('./index.css');
 
-var invertedColors = {"accent":"button__accent_rjibc","loader":"button__loader_rjibc","primary":"button__primary_rjibc","secondary":"button__secondary_rjibc","outlined":"button__outlined_rjibc","tertiary":"button__tertiary_rjibc","filled":"button__filled_rjibc","transparent":"button__transparent_rjibc","link":"button__link_rjibc","ghost":"button__ghost_rjibc","component":"button__component_rjibc","loading":"button__loading_rjibc"};
+var invertedColors = {"accent":"button__accent_1bmov","loader":"button__loader_1bmov","primary":"button__primary_1bmov","secondary":"button__secondary_1bmov","outlined":"button__outlined_1bmov","tertiary":"button__tertiary_1bmov","filled":"button__filled_1bmov","transparent":"button__transparent_1bmov","link":"button__link_1bmov","ghost":"button__ghost_1bmov","component":"button__component_1bmov","loading":"button__loading_1bmov"};
 require('./inverted.css');
 
 var colorStyles = {
@@ -50,7 +50,7 @@ var logWarning = function (view) {
 };
 var BaseButton = React__default.default.forwardRef(function (_a, ref) {
     var _b, _c, _d;
-    var children = _a.children, _e = _a.view, view = _e === void 0 ? 'secondary' : _e, _f = _a.shape, shape = _f === void 0 ? 'rectangular' : _f, _g = _a.textResizing, textResizing = _g === void 0 ? 'hug' : _g, hint = _a.hint, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, _h = _a.size, size = _h === void 0 ? 'm' : _h, _j = _a.block, block = _j === void 0 ? false : _j, className = _a.className, spinnerClassName = _a.spinnerClassName, dataTestId = _a.dataTestId, href = _a.href, _k = _a.loading, loading = _k === void 0 ? false : _k, _l = _a.nowrap, nowrap = _l === void 0 ? false : _l, _m = _a.colors, colors = _m === void 0 ? 'default' : _m, _o = _a.Component, Component = _o === void 0 ? href ? 'a' : 'button' : _o, onClick = _a.onClick, _p = _a.styles, styles = _p === void 0 ? {} : _p, _q = _a.colorStylesMap, colorStylesMap = _q === void 0 ? { default: {}, inverted: {} } : _q, restProps = tslib.__rest(_a, ["children", "view", "shape", "textResizing", "hint", "leftAddons", "rightAddons", "size", "block", "className", "spinnerClassName", "dataTestId", "href", "loading", "nowrap", "colors", "Component", "onClick", "styles", "colorStylesMap"]);
+    var allowBackdropBlur = _a.allowBackdropBlur, children = _a.children, _e = _a.view, view = _e === void 0 ? 'secondary' : _e, _f = _a.shape, shape = _f === void 0 ? 'rectangular' : _f, _g = _a.textResizing, textResizing = _g === void 0 ? 'hug' : _g, hint = _a.hint, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, _h = _a.size, size = _h === void 0 ? 'm' : _h, _j = _a.block, block = _j === void 0 ? false : _j, className = _a.className, spinnerClassName = _a.spinnerClassName, dataTestId = _a.dataTestId, href = _a.href, _k = _a.loading, loading = _k === void 0 ? false : _k, _l = _a.nowrap, nowrap = _l === void 0 ? false : _l, _m = _a.colors, colors = _m === void 0 ? 'default' : _m, _o = _a.Component, Component = _o === void 0 ? href ? 'a' : 'button' : _o, onClick = _a.onClick, _p = _a.styles, styles = _p === void 0 ? {} : _p, _q = _a.colorStylesMap, colorStylesMap = _q === void 0 ? { default: {}, inverted: {} } : _q, restProps = tslib.__rest(_a, ["allowBackdropBlur", "children", "view", "shape", "textResizing", "hint", "leftAddons", "rightAddons", "size", "block", "className", "spinnerClassName", "dataTestId", "href", "loading", "nowrap", "colors", "Component", "onClick", "styles", "colorStylesMap"]);
     if (['outlined', 'filled', 'transparent'].includes(view)) {
         logWarning(view);
     }
@@ -63,6 +63,7 @@ var BaseButton = React__default.default.forwardRef(function (_a, ref) {
     var iconOnly = !children;
     var componentProps = {
         className: cn__default.default(commonStyles.component, commonStyles[view], commonStyles[size], commonStyles[textResizing], shape === 'rectangular' && styles[size], shape === 'rounded' && commonStyles[shape], colorStyles[colors].component, colorStyles[colors][view], colorStylesMap[colors].component, (_b = {},
+            _b[commonStyles.allowBackdropBlur] = allowBackdropBlur,
             _b[colorStylesMap[colors][view]] = Boolean(colorStylesMap[colors][view]),
             _b[commonStyles.focused] = focused,
             _b[commonStyles.block] = block,