@bikdotai/bik-component-library 0.0.756-beta.0 → 0.0.756-beta.10

package/dist/esm/components/banner/Banner.styled.d.ts

@@ -1,87 +1,87 @@
 /// <reference types="react" />
 export declare const CardBannerWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const CardBannerContent: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const CardBannerIconsWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const CardBannerButtonWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const CompanyImageWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ButtonWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ImageWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const CardWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const CardFooterWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const CardImageWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 export declare const CardButtonWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 export declare const BannerContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const MainContentWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const TextWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const TagWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const BottomButtonWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const BannerWithImageContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ContentWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const BannerImageWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const BannerWithImageButtonWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/dist/esm/components/bik-layout/CommonStyles.d.ts

@@ -1,43 +1,43 @@
 /// <reference types="react" />
 export declare const GlobalContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const LoaderWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const LoadingMessageWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const BikLayoutContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     type?: "overflow-within" | "overflow-body" | undefined;
     backgroundColor?: string | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const BikHeaderWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const BikHeaderContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const MenuInnerContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ProfileDropdownToggleContainer: import("@emotion/styled").StyledComponent<import("react-bootstrap/esm/helpers").Omit<any, import("react-bootstrap/esm/helpers").BsPrefixProps<import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements>> & import("react-bootstrap/esm/DropdownToggle").DropdownToggleProps> & import("react-bootstrap/esm/helpers").BsPrefixProps<import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements>> & import("react-bootstrap/esm/DropdownToggle").DropdownToggleProps & {
+export declare const ProfileDropdownToggleContainer: import("@emotion/styled").StyledComponent<import("react-bootstrap/esm/helpers").Omit<any, import("react-bootstrap/esm/helpers").BsPrefixProps<import("react").ElementType<any>> & import("react-bootstrap/esm/DropdownToggle").DropdownToggleProps> & import("react-bootstrap/esm/helpers").BsPrefixProps<import("react").ElementType<any>> & import("react-bootstrap/esm/DropdownToggle").DropdownToggleProps & {
     children?: import("react").ReactNode;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 export declare const ProfileDropdownInnerContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     isDropdownOpen: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -55,24 +55,24 @@ export declare const UserNameTitleSmall: import("@emotion/styled").StyledCompone
 }, {}, {}>;
 export declare const UserAvatarContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledTooltip: import("@emotion/styled").StyledComponent<import("react-bootstrap").TooltipProps & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 export declare const UserInfoContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StatusContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     isAvailable: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const UserStatusContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledBodyCaption: import("@emotion/styled").StyledComponent<{
     [x: string]: any;
@@ -90,7 +90,7 @@ export declare const StyledBodyCaption: import("@emotion/styled").StyledComponen
 }, {}, {}>;
 export declare const FeatureModalContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     zIndex?: number | undefined;
     resetHeight?: boolean | undefined;
@@ -98,13 +98,13 @@ export declare const FeatureModalContainer: import("@emotion/styled").StyledComp
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const InnerModalContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const RelativeModalContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const FeatureModalV2Container: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/bik-layout/MockMenus.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const Menus: ({
     displayName: string;
     key: number;

package/dist/esm/components/button/Button.styled.d.ts

@@ -2,7 +2,7 @@
 import { Size, Type } from './model';
 export declare const Button: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     size: Size;
     buttonType: Type;

package/dist/esm/components/card-selection-modal/CardSelectionModal.styled.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 export declare const StyledCardContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledCard: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/carousel-secondary/CarouselSecondary.style.d.ts

@@ -2,35 +2,35 @@
 import { CarouselVersion } from './model';
 export declare const CarouselContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     version?: CarouselVersion | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const CarouselBody: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     textAlign: string | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const CarouselPage: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     isActive: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const CarouselFooter: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     version?: CarouselVersion | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const PageIndicator: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Indicator: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     isActive: boolean;
     version?: CarouselVersion | undefined;

package/dist/esm/components/checkList/CheckList.styled.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 export declare const CheckListStyled: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/colourInput/ColourInput.styled.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 export declare const ColorInputContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledColorInput: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;

package/dist/esm/components/country-code-picker/CountryCodePicker.styled.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
 export declare const StyledCountryPickerOption: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledCountryPickerWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     height?: string | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/country-code-picker/CountryPicker.styled.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
 export declare const StyledCountryOption: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledCountryPickerContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     height?: string | undefined;
     disabled?: boolean | undefined;

package/dist/esm/components/custom-date-time/CustomDateTime.styled.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 export declare const CustomDateTimeStyle: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/dashboard-review-popup/DashboardReviewPopUp.styled.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 export declare const Container: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const CrossIconHolder: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/dashboard-review-popup/components/FiveStar.styled.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 export declare const Container: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Button: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/dashboard-review-popup/components/Form.styled.d.ts

@@ -1,27 +1,27 @@
 /// <reference types="react" />
 export declare const Container: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StarWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Chip: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     selected?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Wrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const TextArea: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, {}>;
 export declare const Button: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/datePicker/DatePicker.styled.d.ts

@@ -1,19 +1,19 @@
 /// <reference types="react" />
 export declare const PickerContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     selectRange: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const TimePickerContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const TimeInputWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const TimeLabel: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/discount-modal/DiscountModal.styled.d.ts

@@ -1,23 +1,23 @@
 /// <reference types="react" />
 export declare const CouponTypeContainerStyled: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     selectedDiv: number;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StaticCouponContainerStyled: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const DynamicCouponContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledDiscountDialogueContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const VariablePickerContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/feature-announcements/FeatureAnnouncementProvider.js

@@ -1 +1 @@
-import{__awaiter as t}from"../../_virtual/_tslib.js";import{jsx as e,jsxs as o,Fragment as n}from"react/jsx-runtime";import{useState as r,useEffect as a,useCallback as i}from"react";import s,{ACTIONS as d}from"react-joyride";import"./constants/animations.js";import{SELECTORS as l}from"./constants/selectors.js";import{useFeatureAnnouncements as u}from"./hooks/useFeatureAnnouncements.js";import c from"./MajorUpdatePopup.js";import p from"./MinorUpdatePopup.js";import{VideoModal as f}from"./VideoModal.js";const m=m=>{let{children:b,fetchVisibleFeatures:g,getStoreFeatureProgress:h,fetchFeatureById:y,markFeatureAsViewedForStore:x,isFeatureApplicableToCurrentPage:k,module:S,router:C,storeId:T,onAnnouncementShown:v,onAnnouncementInteracted:w}=m;var I;const{majorUpdateFeatures:B,minorUpdateFeatures:F,isLoading:E,markFeatureAsViewed:N}=u({fetchVisibleFeatures:g,getStoreFeatureProgress:h,fetchFeatureById:y,markFeatureAsViewedForStore:x,isFeatureApplicableToCurrentPage:k,module:S,router:C}),[j,P]=r(null),[U,W]=r(null),[V,M]=r(!1),[O,q]=r([]),[_,A]=r(!1),[L,R]=r([]),[$,z]=r(!1),[H,Z]=r(!1),[D,G]=r([]),[J,K]=r(!1),[Q,X]=r(!1),[Y,tt]=r(!1),[et,ot]=r(""),[nt,rt]=r(!1),[at,it]=r(!1),[st,dt]=r(!1),[lt,ut]=r(0),[ct,pt]=r(0),[ft,mt]=r(new Set);a((()=>{const t="minor-spotlight-cutout-style";let e=document.getElementById(t);return e||(e=document.createElement("style"),e.id=t,document.head.appendChild(e)),e.textContent="\n\t\t\t.react-joyride__spotlight {\n\t\t\t\ttransition: box-shadow 0.3s ease-in-out !important;\n\t\t\t\twill-change: box-shadow, transform;\n\t\t\t\ttransform: translateZ(0);\n\t\t\t}\n\t\t\t.react-joyride__tooltip {\n\t\t\t\twill-change: transform, opacity;\n\t\t\t\ttransform: translateZ(0);\n\t\t\t}\n\t\t\t.react-joyride__floater {\n\t\t\t\tright: 12px !important;\n\t\t\t\tleft: auto !important;\n\t\t\t}\n\t\t",()=>{const e=document.getElementById(t);e&&e.remove()}}),[]),a((()=>{ut((t=>t+1)),pt((t=>t+1)),it(!1),dt(!1),mt(new Set)}),[null==C?void 0:C.pathname]),a((()=>{if(!(B.length>0)||j||E||$||nt)0!==B.length||E||X(!0);else{X(!1),K(!1),M(!1),q([]),W(null),G([]);let t=0;const e=10,o=()=>{t++;document.querySelector('[data-testid="whats-new-button"]')?bt(B[0]):t<e?setTimeout(o,1e3):X(!0)};o()}}),[B,j,E,$,nt]),a((()=>{var t;const e=null===(t=null==C?void 0:C.query)||void 0===t?void 0:t.featureId;if(!e||E||0===F.length)return;const o=F.find((t=>t.id===e));if(!o||!o.featureTag)return;K(!0),Z(!0);let n=0;const r=setInterval((()=>{n++;const t=o.featureTag.startsWith("#")||o.featureTag.startsWith(".")||o.featureTag.startsWith("[")?o.featureTag:`#${o.featureTag}`;if(document.querySelector(t)){const t=[o];G(t),Tt(o,t),clearInterval(r)}else n>=25&&(Z(!1),clearInterval(r))}),200);return()=>{clearInterval(r)}}),[F,null===(I=null==C?void 0:C.query)||void 0===I?void 0:I.featureId,E]),a((()=>{var t;if(F.length>0&&!E&&!V&&!H&&!U&&!J&&Q&&!nt){let t=null,e=null,o=null,n=!1;const r=()=>{if(n||H||U||J||!Q)return;const r=F.filter((t=>{if(!t.featureTag||""===t.featureTag.trim())return!1;if(ft.has(t.id))return!1;const e=t.featureTag.startsWith("#")||t.featureTag.startsWith(".")||t.featureTag.startsWith("[")?t.featureTag:`#${t.featureTag}`;return null!==document.querySelector(e)}));r.length>0&&(G(r),Tt(r[0],r),t&&(t.disconnect(),t=null),e&&(window.removeEventListener("scroll",e),e=null),o&&(clearTimeout(o),o=null))};return t=new MutationObserver((t=>{let e=!1;for(const o of t){if("childList"===o.type&&o.addedNodes.length>0)for(let t=0;t<o.addedNodes.length;t++){const n=o.addedNodes[t];if(n.nodeType===Node.ELEMENT_NODE){const t=n;if(t.id||t.querySelector("[id]")){e=!0;break}}}if(e)break}V||n||H||U||J||!Q||!e||(o&&clearTimeout(o),o=setTimeout((()=>{n||H||U||J||!Q||r()}),200))})),e=()=>{V||n||H||U||J||!Q||(o&&clearTimeout(o),requestAnimationFrame((()=>{o=setTimeout((()=>{n||H||U||J||!Q||r()}),300)})))},t&&t.observe(document.body,{childList:!0,subtree:!0}),e&&window.addEventListener("scroll",e,{passive:!0}),r(),setTimeout((()=>{n||H||U||J||!Q||r()}),100),setTimeout((()=>{n||H||U||J||!Q||r()}),1e3),setTimeout((()=>{n||H||U||J||!Q||r()}),500),()=>{n=!0,t&&t.disconnect(),e&&window.removeEventListener("scroll",e),o&&clearTimeout(o)}}if(0===F.length||E){(null===(t=null==C?void 0:C.query)||void 0===t?void 0:t.featureId)&&U||(M(!1),q([]),W(null),G([]),K(!1))}}),[F,E,V,H,U,J,Q,N,nt]);const bt=t=>{P(t);const o=B.findIndex((e=>e.id===t.id)),n=B.length,r=[{target:l.WHATS_NEW_BUTTON,content:e(c,{feature:t,currentIndex:o,totalFeatures:n,onSkip:()=>gt(t),onExplore:()=>ht(t),onPrevious:()=>yt(t),onNext:()=>xt(t),setIsClosing:it}),placement:"bottom-start",placementBeacon:"top-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:t,isMajor:!0},styles:{tooltip:{padding:0,backgroundColor:"transparent",borderRadius:"16px",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}}}];R(r),A(!0),v&&T&&v({storeId:T,announcementId:t.id,announcementTitle:t.title,imageUrl:t.displayImage||t.image,videoUrl:t.productVideo})},gt=i((t=>{const e=t||j;e&&(z(!0),B.forEach((t=>{N(t.id)})),A(!1),P(null),R([]),X(!0),w&&T&&w({storeId:T,announcementId:e.id,announcementTitle:e.title,imageUrl:e.displayImage||e.image,videoUrl:e.productVideo,buttonClicked:"Skip",buttonName:"Skip",buttonUrl:void 0}),setTimeout((()=>{z(!1)}),500))}),[j,B,N]),ht=i((t=>{z(!0),N(t.id),t.productVideo&&(ot(t.productVideo),tt(!0),rt(!0)),A(!1),P(null),R([]);B.findIndex((e=>e.id===t.id))===B.length-1&&X(!0),w&&T&&w({storeId:T,announcementId:t.id,announcementTitle:t.title,imageUrl:t.displayImage||t.image,videoUrl:t.productVideo,buttonClicked:"Primary",buttonName:t.buttonText||"Explore",buttonUrl:t.redirectUrl||t.productVideo}),setTimeout((()=>{z(!1)}),500)}),[B,N]),yt=i((t=>{const o=t||j;if(!o)return;const n=B.findIndex((t=>t.id===o.id));if(n>0){const t=B[n-1];P(t);const o=n-1,r=B.length,a=[{target:'[data-testid="whats-new-button"]',content:e(c,{feature:t,currentIndex:o,totalFeatures:r,onSkip:()=>gt(t),onExplore:()=>ht(t),onPrevious:()=>yt(t),onNext:()=>xt(t),setIsClosing:it}),placement:"bottom-start",placementBeacon:"top-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:t,isMajor:!0},styles:{tooltip:{padding:0,backgroundColor:"transparent",borderRadius:"16px",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}}}];R(a)}}),[j,B]),xt=i((t=>{const o=t||j;if(!o)return;const n=B.findIndex((t=>t.id===o.id));if(n<B.length-1){const t=B[n+1];P(t);const o=n+1,r=B.length,a=[{target:'[data-testid="whats-new-button"]',content:e(c,{feature:t,currentIndex:o,totalFeatures:r,onSkip:()=>gt(t),onExplore:()=>ht(t),onPrevious:()=>yt(t),onNext:()=>xt(t),setIsClosing:it}),placement:"bottom-start",placementBeacon:"top-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:t,isMajor:!0},styles:{tooltip:{padding:0,backgroundColor:"transparent",borderRadius:"16px",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}}}];R(a)}else z(!0),N(o.id),A(!1),P(null),R([]),X(!0),setTimeout((()=>{z(!1)}),500)}),[j,B,N]),kt=()=>{if(B.length>0&&!j){document.querySelector('[data-testid="whats-new-button"]')&&bt(B[0])}};a((()=>(window.showMajorUpdatePopup=kt,()=>{delete window.showMajorUpdatePopup})),[B,j]);const St=i((t=>{const{action:e}=t;e===d.CLOSE&&(j&&(z(!0),B.forEach((t=>{N(t.id)})),X(!0),setTimeout((()=>{z(!1)}),500)),A(!1),P(null),R([]))}),[j,B,N]),Ct=i((t=>{const{action:e}=t;if(e===d.CLOSE){if(U){Z(!0),N(U.id);D.findIndex((t=>t.id===U.id))===D.length-1&&K(!0),setTimeout((()=>{Z(!1)}),500)}M(!1),W(null),q([])}}),[U,D,N]),Tt=(o,n)=>t(void 0,void 0,void 0,(function*(){W(o);const t=n||D,r=t.findIndex((t=>t.id===o.id)),a=t.length,i=o.featureTag.startsWith("#")||o.featureTag.startsWith(".")||o.featureTag.startsWith("[")?o.featureTag:`#${o.featureTag}`,s=document.querySelector(i);if(s)try{const{scrollToElementSmooth:t}=yield import("./utils/elementHelpers.js");yield t(s,120)}catch(t){}const d=[{target:i,content:e(p,{feature:o,currentIndex:r,totalFeatures:a,onSkip:()=>vt(o),onExplore:()=>wt(o),onPrevious:()=>It(o),onNext:()=>Bt(o),setIsClosing:dt}),placement:"bottom",placementBeacon:"bottom-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:o,isMinor:!0},styles:{tooltip:{padding:0,backgroundColor:"transparent",borderRadius:"4px",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}}}];q(d),M(!0)})),vt=i((t=>{const e=t||U;if(e){Z(!0),N(e.id),mt((t=>new Set(t).add(e.id))),M(!1),W(null),q([]);const t=D.find((t=>t.id!==e.id&&!ft.has(t.id)));setTimeout((()=>{Z(!1),t?Tt(t,D):K(!0)}),500)}}),[U,D,N,ft]),wt=i((t=>{Z(!0),N(t.id),mt((e=>new Set(e).add(t.id))),t.productVideo&&(ot(t.productVideo),tt(!0),rt(!0)),M(!1),W(null),q([]);const e=D.find((e=>e.id!==t.id&&!ft.has(e.id)));setTimeout((()=>{Z(!1),e&&!t.productVideo?Tt(e,D):e||K(!0)}),500)}),[D,N,ft]),It=i((o=>t(void 0,void 0,void 0,(function*(){const t=o||U;if(!t)return;const n=D.findIndex((e=>e.id===t.id));if(n>0){const t=D[n-1];W(t);const o=t.featureTag.startsWith("#")||t.featureTag.startsWith(".")||t.featureTag.startsWith("[")?t.featureTag:`#${t.featureTag}`,r=document.querySelector(o);if(r)try{const{scrollToElementSmooth:t}=yield import("./utils/elementHelpers.js");yield t(r,120)}catch(t){}const a=n-1,i=D.length,s=[{target:o,content:e(p,{feature:t,currentIndex:a,totalFeatures:i,onSkip:()=>vt(t),onExplore:()=>wt(t),onPrevious:()=>It(t),onNext:()=>Bt(t),setIsClosing:dt}),placement:"bottom",placementBeacon:"bottom-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:t,isMinor:!0},styles:{tooltip:{padding:0,backgroundColor:"transparent",borderRadius:"4px",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}}}];q(s)}}))),[U,D]),Bt=i((o=>t(void 0,void 0,void 0,(function*(){const t=o||U;if(!t)return;const n=D.findIndex((e=>e.id===t.id));if(n<D.length-1){const t=D[n+1];W(t);const o=t.featureTag.startsWith("#")||t.featureTag.startsWith(".")||t.featureTag.startsWith("[")?t.featureTag:`#${t.featureTag}`,r=document.querySelector(o);if(r)try{const{scrollToElementSmooth:t}=yield import("./utils/elementHelpers.js");yield t(r,120)}catch(t){}const a=n+1,i=D.length,s=[{target:o,content:e(p,{feature:t,currentIndex:a,totalFeatures:i,onSkip:()=>vt(t),onExplore:()=>wt(t),onPrevious:()=>It(t),onNext:()=>Bt(t),setIsClosing:dt}),placement:"bottom",placementBeacon:"bottom-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:t,isMinor:!0},styles:{tooltip:{padding:0,backgroundColor:"transparent",borderRadius:"4px",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}}}];q(s)}else Z(!0),K(!0),N(t.id),M(!1),W(null),q([]),setTimeout((()=>{Z(!1)}),500)}))),[U,D,N]);return o(n,{children:[b,L.length>0&&e(s,{steps:L,run:_,continuous:!1,showProgress:!1,showSkipButton:!1,callback:St,disableOverlayClose:!0,disableCloseOnEsc:!1,disableOverlay:!1,spotlightClicks:!1,styles:{options:{primaryColor:"#007bff",zIndex:1e4,width:"auto",arrowColor:at?"transparent":"#212121"},overlay:{backgroundColor:"transparent"},spotlight:{backgroundColor:"transparent",border:"none",boxShadow:"none"},tooltip:{borderRadius:"16px",fontSize:"14px",padding:0,backgroundColor:"transparent",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}},locale:{back:"Back",close:"Close",last:"Close",next:"Next",skip:"Skip"}},`major-joyride-${lt}`),O.length>0&&e(s,{steps:O,run:V,continuous:!1,showProgress:!1,showSkipButton:!1,callback:Ct,disableOverlayClose:!0,disableCloseOnEsc:!1,disableOverlay:!1,scrollToFirstStep:!0,scrollOffset:120,disableScrolling:!1,styles:{options:{primaryColor:"#007bff",zIndex:1e4,width:"auto",arrowColor:st?"transparent":"#ffffff"},overlay:{backgroundColor:"transparent"},spotlight:{backgroundColor:"transparent",borderRadius:"8px",boxShadow:st?"none":"0 0 0 9999px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(255, 255, 255, 0.8), 0 0 20px 8px rgba(255, 255, 255, 0.4)"},tooltip:{borderRadius:"4px",fontSize:"14px",padding:0,backgroundColor:"transparent",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonSkip:{display:"none"},buttonClose:{display:"none"}},locale:{back:"Back",close:"Close",last:"Close",next:"Next",skip:"Skip"}},`minor-joyride-${ct}`),e(f,{isOpen:Y,videoUrl:et,onClose:()=>{tt(!1),ot(""),rt(!1);const t=D.find((t=>!ft.has(t.id)));t?setTimeout((()=>{Tt(t,D)}),300):K(!0)}})]})};export{m as default};
+import{__awaiter as t}from"../../_virtual/_tslib.js";import{jsx as e,jsxs as o,Fragment as n}from"react/jsx-runtime";import{useState as r,useEffect as a,useCallback as i}from"react";import s,{ACTIONS as d}from"react-joyride";import"./constants/animations.js";import{SELECTORS as l}from"./constants/selectors.js";import{useFeatureAnnouncements as u}from"./hooks/useFeatureAnnouncements.js";import c from"./MajorUpdatePopup.js";import p from"./MinorUpdatePopup.js";import{VideoModal as f}from"./VideoModal.js";const b=b=>{let{children:m,fetchVisibleFeatures:g,getStoreFeatureProgress:h,fetchFeatureById:y,markFeatureAsViewedForStore:x,isFeatureApplicableToCurrentPage:C,module:S,router:k}=b;var T;const{majorUpdateFeatures:w,minorUpdateFeatures:v,isLoading:B,markFeatureAsViewed:I}=u({fetchVisibleFeatures:g,getStoreFeatureProgress:h,fetchFeatureById:y,markFeatureAsViewedForStore:x,isFeatureApplicableToCurrentPage:C,module:S,router:k}),[F,E]=r(null),[j,N]=r(null),[W,P]=r(!1),[M,O]=r([]),[q,V]=r(!1),[L,R]=r([]),[_,A]=r(!1),[U,$]=r(!1),[z,H]=r([]),[Z,D]=r(!1),[G,J]=r(!1),[K,Q]=r(!1),[X,Y]=r(""),[tt,et]=r(!1),[ot,nt]=r(!1),[rt,at]=r(!1),[it,st]=r(0),[dt,lt]=r(0),[ut,ct]=r(new Set);a((()=>{const t="minor-spotlight-cutout-style";let e=document.getElementById(t);return e||(e=document.createElement("style"),e.id=t,document.head.appendChild(e)),e.textContent="\n\t\t\t.react-joyride__spotlight {\n\t\t\t\ttransition: box-shadow 0.3s ease-in-out !important;\n\t\t\t\twill-change: box-shadow, transform;\n\t\t\t\ttransform: translateZ(0);\n\t\t\t}\n\t\t\t.react-joyride__tooltip {\n\t\t\t\twill-change: transform, opacity;\n\t\t\t\ttransform: translateZ(0);\n\t\t\t}\n\t\t",()=>{const e=document.getElementById(t);e&&e.remove()}}),[]),a((()=>{st((t=>t+1)),lt((t=>t+1)),nt(!1),at(!1),ct(new Set)}),[null==k?void 0:k.pathname]),a((()=>{if(!(w.length>0)||F||B||_||tt)0!==w.length||B||J(!0);else{J(!1),D(!1),P(!1),O([]),N(null),H([]);let t=0;const e=10,o=()=>{t++;document.querySelector('[data-testid="whats-new-button"]')?pt(w[0]):t<e?setTimeout(o,1e3):J(!0)};o()}}),[w,F,B,_,tt]),a((()=>{var t;const e=null===(t=null==k?void 0:k.query)||void 0===t?void 0:t.featureId;if(!e||B||0===v.length)return;const o=v.find((t=>t.id===e));if(!o||!o.featureTag)return;D(!0),$(!0);let n=0;const r=setInterval((()=>{n++;const t=o.featureTag.startsWith("#")||o.featureTag.startsWith(".")||o.featureTag.startsWith("[")?o.featureTag:`#${o.featureTag}`;if(document.querySelector(t)){const t=[o];H(t),Ct(o,t),clearInterval(r)}else n>=25&&($(!1),clearInterval(r))}),200);return()=>{clearInterval(r)}}),[v,null===(T=null==k?void 0:k.query)||void 0===T?void 0:T.featureId,B]),a((()=>{var t;if(v.length>0&&!B&&!W&&!U&&!j&&!Z&&G&&!tt){let t=null,e=null,o=null,n=!1;const r=()=>{if(n||U||j||Z||!G)return;const r=v.filter((t=>{if(!t.featureTag||""===t.featureTag.trim())return!1;if(ut.has(t.id))return!1;const e=t.featureTag.startsWith("#")||t.featureTag.startsWith(".")||t.featureTag.startsWith("[")?t.featureTag:`#${t.featureTag}`;return null!==document.querySelector(e)}));r.length>0&&(H(r),Ct(r[0],r),t&&(t.disconnect(),t=null),e&&(window.removeEventListener("scroll",e),e=null),o&&(clearTimeout(o),o=null))};return t=new MutationObserver((t=>{let e=!1;for(const o of t){if("childList"===o.type&&o.addedNodes.length>0)for(let t=0;t<o.addedNodes.length;t++){const n=o.addedNodes[t];if(n.nodeType===Node.ELEMENT_NODE){const t=n;if(t.id||t.querySelector("[id]")){e=!0;break}}}if(e)break}W||n||U||j||Z||!G||!e||(o&&clearTimeout(o),o=setTimeout((()=>{n||U||j||Z||!G||r()}),200))})),e=()=>{W||n||U||j||Z||!G||(o&&clearTimeout(o),requestAnimationFrame((()=>{o=setTimeout((()=>{n||U||j||Z||!G||r()}),300)})))},t&&t.observe(document.body,{childList:!0,subtree:!0}),e&&window.addEventListener("scroll",e,{passive:!0}),r(),setTimeout((()=>{n||U||j||Z||!G||r()}),100),setTimeout((()=>{n||U||j||Z||!G||r()}),1e3),setTimeout((()=>{n||U||j||Z||!G||r()}),500),()=>{n=!0,t&&t.disconnect(),e&&window.removeEventListener("scroll",e),o&&clearTimeout(o)}}if(0===v.length||B){(null===(t=null==k?void 0:k.query)||void 0===t?void 0:t.featureId)&&j||(P(!1),O([]),N(null),H([]),D(!1))}}),[v,B,W,U,j,Z,G,I,tt]);const pt=t=>{E(t);const o=w.findIndex((e=>e.id===t.id)),n=w.length,r=[{target:l.WHATS_NEW_BUTTON,content:e(c,{feature:t,currentIndex:o,totalFeatures:n,onSkip:()=>ft(t),onExplore:()=>bt(t),onPrevious:()=>mt(t),onNext:()=>gt(t),setIsClosing:nt}),placement:"bottom-start",placementBeacon:"top-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:t,isMajor:!0},styles:{tooltip:{padding:0,backgroundColor:"transparent",borderRadius:"16px",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}}}];R(r),V(!0)},ft=i((t=>{(t||F)&&(A(!0),w.forEach((t=>{I(t.id)})),V(!1),E(null),R([]),J(!0),setTimeout((()=>{A(!1)}),500))}),[F,w,I]),bt=i((t=>{A(!0),I(t.id),t.productVideo&&(Y(t.productVideo),Q(!0),et(!0)),V(!1),E(null),R([]);w.findIndex((e=>e.id===t.id))===w.length-1&&J(!0),setTimeout((()=>{A(!1)}),500)}),[w,I]),mt=i((t=>{const o=t||F;if(!o)return;const n=w.findIndex((t=>t.id===o.id));if(n>0){const t=w[n-1];E(t);const o=n-1,r=w.length,a=[{target:'[data-testid="whats-new-button"]',content:e(c,{feature:t,currentIndex:o,totalFeatures:r,onSkip:()=>ft(t),onExplore:()=>bt(t),onPrevious:()=>mt(t),onNext:()=>gt(t),setIsClosing:nt}),placement:"bottom-start",placementBeacon:"top-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:t,isMajor:!0},styles:{tooltip:{padding:0,backgroundColor:"transparent",borderRadius:"16px",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}}}];R(a)}}),[F,w]),gt=i((t=>{const o=t||F;if(!o)return;const n=w.findIndex((t=>t.id===o.id));if(n<w.length-1){const t=w[n+1];E(t);const o=n+1,r=w.length,a=[{target:'[data-testid="whats-new-button"]',content:e(c,{feature:t,currentIndex:o,totalFeatures:r,onSkip:()=>ft(t),onExplore:()=>bt(t),onPrevious:()=>mt(t),onNext:()=>gt(t),setIsClosing:nt}),placement:"bottom-start",placementBeacon:"top-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:t,isMajor:!0},styles:{tooltip:{padding:0,backgroundColor:"transparent",borderRadius:"16px",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}}}];R(a)}else A(!0),I(o.id),V(!1),E(null),R([]),J(!0),setTimeout((()=>{A(!1)}),500)}),[F,w,I]),ht=()=>{if(w.length>0&&!F){document.querySelector('[data-testid="whats-new-button"]')&&pt(w[0])}};a((()=>(window.showMajorUpdatePopup=ht,()=>{delete window.showMajorUpdatePopup})),[w,F]);const yt=i((t=>{const{action:e}=t;e===d.CLOSE&&(F&&(A(!0),w.forEach((t=>{I(t.id)})),J(!0),setTimeout((()=>{A(!1)}),500)),V(!1),E(null),R([]))}),[F,w,I]),xt=i((t=>{const{action:e}=t;if(e===d.CLOSE){if(j){$(!0),I(j.id);z.findIndex((t=>t.id===j.id))===z.length-1&&D(!0),setTimeout((()=>{$(!1)}),500)}P(!1),N(null),O([])}}),[j,z,I]),Ct=(o,n)=>t(void 0,void 0,void 0,(function*(){N(o);const t=n||z,r=t.findIndex((t=>t.id===o.id)),a=t.length,i=o.featureTag.startsWith("#")||o.featureTag.startsWith(".")||o.featureTag.startsWith("[")?o.featureTag:`#${o.featureTag}`,s=document.querySelector(i);if(s)try{const{scrollToElementSmooth:t}=yield import("./utils/elementHelpers.js");yield t(s,120)}catch(t){}const d=[{target:i,content:e(p,{feature:o,currentIndex:r,totalFeatures:a,onSkip:()=>St(o),onExplore:()=>kt(o),onPrevious:()=>Tt(o),onNext:()=>wt(o),setIsClosing:at}),placement:"bottom",placementBeacon:"bottom-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:o,isMinor:!0},styles:{tooltip:{padding:0,backgroundColor:"transparent",borderRadius:"4px",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}}}];O(d),P(!0)})),St=i((t=>{const e=t||j;if(e){$(!0),I(e.id),ct((t=>new Set(t).add(e.id))),P(!1),N(null),O([]);const t=z.find((t=>t.id!==e.id&&!ut.has(t.id)));setTimeout((()=>{$(!1),t?Ct(t,z):D(!0)}),500)}}),[j,z,I,ut]),kt=i((t=>{$(!0),I(t.id),ct((e=>new Set(e).add(t.id))),t.productVideo&&(Y(t.productVideo),Q(!0),et(!0)),P(!1),N(null),O([]);const e=z.find((e=>e.id!==t.id&&!ut.has(e.id)));setTimeout((()=>{$(!1),e&&!t.productVideo?Ct(e,z):e||D(!0)}),500)}),[z,I,ut]),Tt=i((o=>t(void 0,void 0,void 0,(function*(){const t=o||j;if(!t)return;const n=z.findIndex((e=>e.id===t.id));if(n>0){const t=z[n-1];N(t);const o=t.featureTag.startsWith("#")||t.featureTag.startsWith(".")||t.featureTag.startsWith("[")?t.featureTag:`#${t.featureTag}`,r=document.querySelector(o);if(r)try{const{scrollToElementSmooth:t}=yield import("./utils/elementHelpers.js");yield t(r,120)}catch(t){}const a=n-1,i=z.length,s=[{target:o,content:e(p,{feature:t,currentIndex:a,totalFeatures:i,onSkip:()=>St(t),onExplore:()=>kt(t),onPrevious:()=>Tt(t),onNext:()=>wt(t),setIsClosing:at}),placement:"bottom",placementBeacon:"bottom-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:t,isMinor:!0},styles:{tooltip:{padding:0,backgroundColor:"transparent",borderRadius:"4px",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}}}];O(s)}}))),[j,z]),wt=i((o=>t(void 0,void 0,void 0,(function*(){const t=o||j;if(!t)return;const n=z.findIndex((e=>e.id===t.id));if(n<z.length-1){const t=z[n+1];N(t);const o=t.featureTag.startsWith("#")||t.featureTag.startsWith(".")||t.featureTag.startsWith("[")?t.featureTag:`#${t.featureTag}`,r=document.querySelector(o);if(r)try{const{scrollToElementSmooth:t}=yield import("./utils/elementHelpers.js");yield t(r,120)}catch(t){}const a=n+1,i=z.length,s=[{target:o,content:e(p,{feature:t,currentIndex:a,totalFeatures:i,onSkip:()=>St(t),onExplore:()=>kt(t),onPrevious:()=>Tt(t),onNext:()=>wt(t),setIsClosing:at}),placement:"bottom",placementBeacon:"bottom-end",disableBeacon:!0,hideCloseButton:!0,hideSkipButton:!0,hideFooter:!0,offset:0,data:{feature:t,isMinor:!0},styles:{tooltip:{padding:0,backgroundColor:"transparent",borderRadius:"4px",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}}}];O(s)}else $(!0),D(!0),I(t.id),P(!1),N(null),O([]),setTimeout((()=>{$(!1)}),500)}))),[j,z,I]);return o(n,{children:[m,L.length>0&&e(s,{steps:L,run:q,continuous:!1,showProgress:!1,showSkipButton:!1,callback:yt,disableOverlayClose:!0,disableCloseOnEsc:!1,disableOverlay:!1,spotlightClicks:!1,styles:{options:{primaryColor:"#007bff",zIndex:1e4,width:"auto",arrowColor:ot?"transparent":"#212121"},overlay:{backgroundColor:"transparent"},spotlight:{backgroundColor:"transparent",border:"none",boxShadow:"none"},tooltip:{borderRadius:"16px",fontSize:"14px",padding:0,backgroundColor:"transparent",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonClose:{display:"none"},buttonSkip:{display:"none"}},locale:{back:"Back",close:"Close",last:"Close",next:"Next",skip:"Skip"}},`major-joyride-${it}`),M.length>0&&e(s,{steps:M,run:W,continuous:!1,showProgress:!1,showSkipButton:!1,callback:xt,disableOverlayClose:!0,disableCloseOnEsc:!1,disableOverlay:!1,scrollToFirstStep:!0,scrollOffset:120,disableScrolling:!1,styles:{options:{primaryColor:"#007bff",zIndex:1e4,width:"auto",arrowColor:rt?"transparent":"#ffffff"},overlay:{backgroundColor:"transparent"},spotlight:{backgroundColor:"transparent",borderRadius:"8px",boxShadow:rt?"none":"0 0 0 9999px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(255, 255, 255, 0.8), 0 0 20px 8px rgba(255, 255, 255, 0.4)"},tooltip:{borderRadius:"4px",fontSize:"14px",padding:0,backgroundColor:"transparent",border:"none",filter:"none",boxShadow:"none"},tooltipContent:{padding:0},buttonNext:{display:"none"},buttonBack:{display:"none"},buttonSkip:{display:"none"},buttonClose:{display:"none"}},locale:{back:"Back",close:"Close",last:"Close",next:"Next",skip:"Skip"}},`minor-joyride-${dt}`),e(f,{isOpen:K,videoUrl:X,onClose:()=>{Q(!1),Y(""),et(!1);const t=z.find((t=>!ut.has(t.id)));t?setTimeout((()=>{Ct(t,z)}),300):D(!0)}})]})};export{b as default};

package/dist/esm/components/feature-announcements/MajorUpdatePopup.js

@@ -1 +1 @@
-import{jsx as t,jsxs as e,Fragment as n}from"react/jsx-runtime";import{useState as o,useRef as r,useEffect as s}from"react";import a from"../../assets/icons/chevronRight2.svg.js";import i from"../../assets/icons/play.svg.js";import{TEXT as l}from"./constants/index.js";import{getMajorPopupStyles as c}from"./styles/majorPopup.styles.js";import"../../constants/Theme.js";import"./constants/animations.js";import{decodeHTMLEntities as u}from"./utils/htmlHelpers.js";import{hideJoyrideArrow as d,calculateCloseTransform as p,executeAfterAnimation as g}from"./utils/animationHelpers.js";import{findWhatsNewButton as y}from"./utils/elementHelpers.js";const b=b=>{let{feature:v,currentIndex:h,totalFeatures:m,onSkip:f,onExplore:j,onPrevious:O,onNext:B,setIsClosing:T,onSecondaryAction:k,ratio:x="16:9",padding:M}=b;var E,P,C,L,w;const[U,W]=o(!1),[_,I]=o(!1),[D,H]=o(""),S=r(null),[A,R]=o(!1),[V,F]=o(!0),N=r(null),[z,G]=o(x),K=r(null);s((()=>{U&&I(!0)}),[U]);const X=t=>{var e,n;t.preventDefault(),t.stopPropagation();const o=null===(e=v.secondaryButton)||void 0===e?void 0:e.action;if("Open link"===o){const t=null===(n=v.secondaryButton)||void 0===n?void 0:n.redirectionUrl;if(t){t.startsWith("http")?window.open(t,"_blank","noopener,noreferrer"):window.location.href=t}}else"Close popup"!==o&&""!==o||k&&k();d(S.current);const r=y();if(r&&S.current){const t=p(S.current,r);H(t)}else H("scale(0)");null==T||T(!0),W(!0)},$=c(_,D,z,M||v.padding,null===(E=v.primaryButton)||void 0===E?void 0:E.style,null===(P=v.secondaryButton)||void 0===P?void 0:P.style);return t("div",Object.assign({style:$.outerWrapper},{children:e("div",Object.assign({ref:S,style:Object.assign(Object.assign({},$.container),{opacity:_?0:1,transition:"opacity 0.2s ease-in-out, transform 0.3s ease"})},{children:[t("style",{children:"\n\t\t\t\t[data-popup-content] ul {\n\t\t\t\t\tmargin: 0;\n\t\t\t\t\tpadding-left: 20px;\n\t\t\t\t\tlist-style-type: disc;\n\t\t\t\t}\n\t\t\t\t[data-popup-content] ul li {\n\t\t\t\t\tmargin-bottom: 8px;\n\t\t\t\t\tcolor: rgba(255, 255, 255, 0.8);\n\t\t\t\t\tfont-size: 12px;\n\t\t\t\t\tline-height: 16px;\n\t\t\t\t\tfont-family: Inter, sans-serif;\n\t\t\t\t}\n\t\t\t"}),e("div",Object.assign({style:$.contentWrapper},{children:[t("div",Object.assign({style:$.imageContainer},{children:v.productVideo?e(n,{children:[t("video",{ref:N,src:v.productVideo,style:$.image,autoPlay:!0,muted:!0,loop:!0,playsInline:!0,controls:!0,"aria-label":`Product video for ${v.title}`,onLoadedMetadata:t=>{const e=t.currentTarget,n=e.videoWidth,o=e.videoHeight;if(n&&o){const t=n/o;Math.abs(t-16/9)<.1?G("16:9"):Math.abs(t-1)<.1?G("1:1"):Math.abs(t-4/3)<.1?G("4:3"):G(t>1.5?"16:9":t<.9?"4:3":"1:1")}}}),(A||V)&&t("div",Object.assign({style:$.videoOverlay,onClick:t=>{t.stopPropagation(),N.current&&(N.current.paused?(N.current.play(),R(!1),F(!1)):(N.current.pause(),R(!0),F(!0)))},role:"button",tabIndex:0,"aria-label":A?"Play video":"Pause video",onKeyDown:t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),t.stopPropagation(),N.current&&(N.current.paused?(N.current.play(),R(!1),F(!1)):(N.current.pause(),R(!0),F(!0))))}},{children:t(i,{width:20,height:20})}))]}):v.displayImage?t("img",{ref:K,src:v.displayImage,alt:v.title,style:$.image,onLoad:t=>{const e=t.currentTarget,n=e.naturalWidth,o=e.naturalHeight;if(n&&o){const t=n/o;Math.abs(t-16/9)<.1?G("16:9"):Math.abs(t-1)<.1?G("1:1"):Math.abs(t-4/3)<.1?G("4:3"):G(t>1.5?"16:9":t<.9?"4:3":"1:1")}},onError:t=>{v.image&&(t.target.src=v.image)}}):t("div",Object.assign({style:$.imagePlaceholder},{children:l.FEATURE_PREVIEW_PLACEHOLDER}))})),e("div",Object.assign({style:$.contentContainer},{children:[t("div",Object.assign({style:$.skipButtonContainer},{children:t("button",Object.assign({onClick:t=>{t.preventDefault(),t.stopPropagation(),(t=>{d(S.current);const e=y();if(e&&S.current){const t=p(S.current,e);H(t)}else H("scale(0)");null==T||T(!0),W(!0),g(t)})(f)},style:$.skipButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,$.skipButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,$.skipButton.base),"aria-label":"Skip feature announcement"},{children:"Skip"}))})),t("h3",Object.assign({style:$.title},{children:v.title})),t("div",{"data-popup-content":!0,style:$.content,dangerouslySetInnerHTML:{__html:u(v.content||v.body||"")}}),e("div",Object.assign({style:$.actionsWrapper},{children:[e("div",Object.assign({style:$.buttonsGroup},{children:[t("button",Object.assign({onClick:()=>{var t,e;const n=null===(t=v.primaryButton)||void 0===t?void 0:t.action;if("Play Video"===n)j();else if("Open link"===n){const t=(null===(e=v.primaryButton)||void 0===e?void 0:e.redirectionUrl)||v.redirectUrl;if(t){t.startsWith("http")?window.open(t,"_blank","noopener,noreferrer"):window.location.href=t}}else j();d(S.current);const o=y();if(o&&S.current){const t=p(S.current,o);H(t)}else H("scale(0)");null==T||T(!0),W(!0)},style:$.exploreButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,$.exploreButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,$.exploreButton.base)},{children:(null===(C=v.primaryButton)||void 0===C?void 0:C.text)||v.buttonText||l.DEFAULT_BUTTON_TEXT})),(null===(L=v.secondaryButton)||void 0===L?void 0:L.text)&&((null===(w=v.secondaryButton)||void 0===w?void 0:w.redirectionUrl)?t("a",Object.assign({href:v.secondaryButton.redirectionUrl,target:v.secondaryButton.redirectionUrl.startsWith("http")?"_blank":"_self",rel:v.secondaryButton.redirectionUrl.startsWith("http")?"noopener noreferrer":void 0,onClick:X,style:$.secondaryButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,$.secondaryButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,$.secondaryButton.base)},{children:v.secondaryButton.text})):t("button",Object.assign({onClick:X,style:$.secondaryButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,$.secondaryButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,$.secondaryButton.base)},{children:v.secondaryButton.text})))]})),m>1&&e("div",Object.assign({style:$.navigationContainer},{children:[t("button",Object.assign({onClick:t=>{t.preventDefault(),t.stopPropagation(),O()},disabled:0===h,style:$.navigationButton(0===h).base,onMouseEnter:t=>{0!==h&&Object.assign(t.currentTarget.style,$.navigationButton(!1).hover)},onMouseLeave:t=>{0!==h&&Object.assign(t.currentTarget.style,$.navigationButton(!1).base)},"aria-label":"Previous feature"},{children:t(a,{style:{transform:"rotate(180deg)"}})})),t("button",Object.assign({onClick:t=>{t.preventDefault(),t.stopPropagation(),B()},disabled:h===m-1,style:$.navigationButton(h===m-1).base,onMouseEnter:t=>{h!==m-1&&Object.assign(t.currentTarget.style,$.navigationButton(!1).hover)},onMouseLeave:t=>{h!==m-1&&Object.assign(t.currentTarget.style,$.navigationButton(h===m-1).base)},"aria-label":"Next feature"},{children:t(a,{})}))]}))]}))]}))]}))]}))}))};export{b as default};
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import{useState as n,useRef as s,useEffect as o}from"react";import{TEXT as r}from"./constants/index.js";import{getMajorPopupStyles as i}from"./styles/majorPopup.styles.js";import"../../constants/Theme.js";import"./constants/animations.js";import{decodeHTMLEntities as a}from"./utils/htmlHelpers.js";import{hideJoyrideArrow as l,calculateCloseTransform as c,executeAfterAnimation as u}from"./utils/animationHelpers.js";import{findWhatsNewButton as g}from"./utils/elementHelpers.js";const b=b=>{let{feature:p,currentIndex:m,totalFeatures:d,onSkip:j,onExplore:v,onPrevious:y,onNext:O,setIsClosing:T}=b;const[h,E]=n(!1),[f,B]=n(!1),[I,x]=n(""),P=s(null);o((()=>{h&&B(!0)}),[h]);const C=i(f,I);return t("div",Object.assign({ref:P,style:C.container},{children:[e("button",Object.assign({onClick:t=>{t.preventDefault(),t.stopPropagation(),(t=>{l(P.current);const e=g();if(e&&P.current){const t=c(P.current,e);x(t)}else x("scale(0)");null==T||T(!0),E(!0),u(t)})(j)},style:C.skipButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,C.skipButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,C.skipButton.base)},{children:r.SKIP_BUTTON})),e("div",Object.assign({style:C.imageContainer},{children:p.displayImage?e("img",{src:p.displayImage,alt:p.title,style:C.image,onError:t=>{p.image&&(t.target.src=p.image)}}):e("div",Object.assign({style:C.imagePlaceholder},{children:r.FEATURE_PREVIEW_PLACEHOLDER}))})),t("div",Object.assign({style:C.contentContainer},{children:[t("div",{children:[e("h3",Object.assign({style:C.title},{children:p.title})),e("div",{style:C.content,dangerouslySetInnerHTML:{__html:a(p.content||p.body||"")}}),e("button",Object.assign({onClick:()=>{v(),l(P.current);const t=g();if(t&&P.current){const e=c(P.current,t);x(e)}else x("scale(0)");null==T||T(!0),E(!0)},style:C.exploreButton.base,onMouseEnter:t=>Object.assign(t.currentTarget.style,C.exploreButton.hover),onMouseLeave:t=>Object.assign(t.currentTarget.style,C.exploreButton.base)},{children:p.buttonText||r.DEFAULT_BUTTON_TEXT}))]}),d>1&&t("div",Object.assign({style:C.navigationContainer},{children:[e("button",Object.assign({onClick:t=>{t.preventDefault(),t.stopPropagation(),y()},disabled:0===m,style:C.navigationButton(0===m).base,onMouseEnter:t=>{0!==m&&Object.assign(t.currentTarget.style,C.navigationButton(!1).hover)},onMouseLeave:t=>{0!==m&&Object.assign(t.currentTarget.style,C.navigationButton(!1).base)}},{children:r.NAVIGATION_PREVIOUS})),e("button",Object.assign({onClick:t=>{t.preventDefault(),t.stopPropagation(),O()},disabled:m===d-1,style:C.navigationButton(m===d-1).base,onMouseEnter:t=>{m!==d-1&&Object.assign(t.currentTarget.style,C.navigationButton(!1).hover)},onMouseLeave:t=>{m!==d-1&&Object.assign(t.currentTarget.style,C.navigationButton(m===d-1).base)}},{children:r.NAVIGATION_NEXT}))]}))]}))]}))};export{b as default};