@hhgtech/hhg-components 1.28.91 → 1.29.1

package/build/esm/{index-cf628b96.js → index-b9ab0f30.js}

@@ -1,66 +1,68 @@
 import React__default, { useState, useEffect, useRef, useMemo, Fragment, memo, useCallback, useImperativeHandle, forwardRef, createContext, useContext } from 'react';
-import { T as Text } from './index-e3f847ab.js';
-import { b as StyledAvatar, c as StyledBadge$1, d as StyledBorderHeading, e as StyledDropdown, f as StyledDropdownName, g as StyledDropdownList, h as StyledDropdownOption, i as StyledIcon$1, j as StyledGrid, k as StyledPagination, l as StyledPageBlock, m as StyledPaginationBlock, n as StyledTag, o as StyledToggle, p as StyledToggleIcon, q as StyledToggleLabel, r as StyledCheckbox, s as StyledRateStars, u as useStyles$4, T as TextArea, t as getDefaultClassWrapper, P as PureInput } from './index.styles-8f85a751.js';
-import { f as formatUrlWithPageParam, M as MediaQueries } from './utils-8d2a0656.js';
-import { I as ImageWrap, R as Radio$1, u as useScreenSize, A as Anchor, a as Avatar$1, b as AspectRatio, B as Button$1, c as Input$1, d as Checkbox$1, e as ChipButton, t as themeColors } from './index-d8548d2e.js';
-import { T as Text$1 } from './index-b06204d8.js';
-import { _ as __rest, a as __awaiter } from './tslib.es6-d03cb889.js';
-import { C as CommonGAssets } from './index-9f716e64.js';
-import { H as Heading } from './index-5d4d91c1.js';
-import { t as theme } from './theme-bc0a16d6.js';
+import { T as Text } from './index-b5f84e24.js';
+import { b as StyledAvatar, c as StyledBadge$1, d as StyledBorderHeading, e as StyledDropdown, f as StyledDropdownName, g as StyledDropdownList, h as StyledDropdownOption, i as StyledIcon$1, j as StyledGrid, k as StyledPagination, l as StyledPageBlock, m as StyledPaginationBlock, n as StyledTag, o as StyledToggle, p as StyledToggleIcon, q as StyledToggleLabel, r as StyledCheckbox, s as StyledRateStars, u as useStyles$4, T as TextArea, P as PureInput } from './index.styles-51d80c5c.js';
+import { f as formatUrlWithPageParam, M as MediaQueries } from './utils-75630fc7.js';
+import { I as ImageWrap, R as Radio$1, u as useScreenSize, A as Anchor, a as Avatar$1, b as AspectRatio, B as Button$1, c as Input$1, d as Checkbox$1, e as ChipButton, t as themeColors } from './index-2edb2e27.js';
+import { T as Text$1 } from './index-07fad580.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-6c353490.js';
+import { C as CommonGAssets } from './index-8cf272e7.js';
+import { H as Heading } from './index-f7d9c75d.js';
+import { t as theme } from './theme-42cb371b.js';
 import { Box, Radio as Radio$2, Flex, rem, Card, Group, createStyles, Stack, getStylesRef, useMantineTheme, Container as Container$1, AspectRatio as AspectRatio$1, ScrollArea, Chip, Badge as Badge$1, MultiSelect, Stepper } from '@mantine/core';
 import innertext from 'innertext';
 import '@mantine/dates';
-import { d as domainLocales, L as LOCALE_SPECS, F as FAVICONS, Q as QUERY_HEALTH_TOOL, R as RISK_SCREENER_NAME, a as RISK_SCREENER_SLUG, G as GA_TOKEN_COOKIE } from './index-2dbb70cc.js';
-import { G as Gender, L as LOCALE } from './Subot-77659a36.js';
-import './translationsContext-80d7ee69.js';
+import { d as domainLocales, L as LOCALE_SPECS, F as FAVICONS, Q as QUERY_HEALTH_TOOL, R as RISK_SCREENER_NAME, a as RISK_SCREENER_SLUG, G as GA_TOKEN_COOKIE } from './index-cb59b5e6.js';
+import { G as Gender, L as LOCALE } from './Subot-81261e12.js';
+import './useMantineLocale-29b90721.js';
+import './translationsContext-d8f0f15b.js';
 import 'string-format';
 import { useViewportSize } from '@mantine/hooks';
-import { i as isInternalLink, d as getTogetherUserPostsApiPath } from './index-01fe65ac.js';
-import styled, { keyframes, css } from 'styled-components';
+import { i as isInternalLink, d as getTogetherUserPostsApiPath } from './index-1ef35560.js';
+import styled from '@emotion/styled';
 import throttle from 'lodash/throttle';
-import { L as Logo } from './index-f2c9c44e.js';
-import { B as Button } from './index-078532eb.js';
-import { I as Input } from './index-0419dfd9.js';
+import { L as Logo } from './index-6e7245c3.js';
+import { B as Button } from './index-383f163a.js';
+import { I as Input } from './index-257a14b5.js';
+import { keyframes, css } from '@emotion/react';
 import parse from 'html-react-parser';
-import { i as isProduction } from './isProduction-a01e577e.js';
-import { u as useTranslations } from './useTranslations-f40da32c.js';
+import { i as isProduction } from './isProduction-0dd05199.js';
+import { u as useTranslations } from './useTranslations-eceb2845.js';
 import { CalendarMB, Calendar } from '@hhgtech/icons/other';
 import { format, addDays, isBefore, startOfMonth, addMonths, subMonths, getDaysInMonth, isToday, isSameDay, isWithinInterval, isAfter, isPast } from 'date-fns';
 import dayjs from 'dayjs';
-import { D as DATE_FORMAT } from './types-1eb3b0e7.js';
-import { Z as Z_INDEX, b as DUE_DATE_FORMAT, H as HEALTH_TOOL_TYPE$1, d as callApiWithAuth, g as getApiPath, P as PATHS$2, T as TogetherComponentGlobalContext, e as getPremiumApiPath, f as getWebsiteUrlApi, h as getSsoApiPath } from './utils-c5cdb4b1.js';
-import { D as DatePicker } from './index-92e6ffd0.js';
-import { M as MarryBabyText } from './index-08431eb8.js';
-import { S as Slider } from './index-50656d19.js';
-import { D as Dropdown } from './index-d931676e.js';
-import { C as Container } from './index-3356d63f.js';
+import { D as DATE_FORMAT } from './types-e55fe348.js';
+import { s as setDefaultClass, Z as Z_INDEX, b as DUE_DATE_FORMAT, H as HEALTH_TOOL_TYPE$1, d as callApiWithAuth, g as getApiPath, P as PATHS$2, T as TogetherComponentGlobalContext, e as getPremiumApiPath, f as getWebsiteUrlApi, h as getSsoApiPath } from './utils-2eeac181.js';
+import { D as DatePicker } from './index-37726222.js';
+import { M as MarryBabyText } from './index-1687bb55.js';
+import { S as Slider } from './index-4eeb1d75.js';
+import { D as Dropdown } from './index-4126e3e8.js';
+import { C as Container } from './index-c3c7be25.js';
 import { useForm, Controller } from 'react-hook-form';
-import { u as useHealthToolsCache } from './useHealthToolCache-0bae40e5.js';
+import { u as useHealthToolsCache } from './useHealthToolCache-c9535fac.js';
 import { yupResolver } from '@hookform/resolvers/yup';
-import { B as BabyGrowthGender, D as Drawer } from './index-6a83527e.js';
-import { L as Label } from './constants-bde36016.js';
-import { f as formatUserProfileUrl } from './index-d4cd8b4e.js';
-import './utils-ed6f1dcc.js';
-import './index.styled-1e5e4c0d.js';
-import './index-e7bffddc.js';
-import { a as useOutsideClick } from './useOutsideClick-d9873825.js';
+import { B as BabyGrowthGender, D as Drawer } from './index-edf2ebc8.js';
+import { L as Label } from './constants-5458df08.js';
+import { f as formatUserProfileUrl } from './index-36f504a7.js';
+import './utils-fd352517.js';
+import './index.styled-615cecea.js';
+import './index-bd8f57c2.js';
+import { a as useOutsideClick } from './useOutsideClick-b142b45a.js';
 import enUS from 'date-fns/locale/en-US';
 import id from 'date-fns/locale/id';
 import vi from 'date-fns/locale/vi';
 import zhTW from 'date-fns/locale/zh-TW';
-import { g as getSocialList } from './getSocialList-b061b92d.js';
+import { g as getSocialList } from './getSocialList-7653bb8f.js';
 import { v4 } from 'uuid';
-import { g as getCurrentBaseUrl, a as getCurrentSsoUrl } from './routing-1e4b619e.js';
+import { g as getCurrentBaseUrl, a as getCurrentSsoUrl } from './routing-7892a6d0.js';
 import { useForm as useForm$1, isNotEmpty } from '@mantine/form';
-import { I as Icon } from './index-f833b395.js';
+import { I as Icon } from './index-bc070b43.js';
 import { Close, Plus } from '@hhgtech/icons/core';
-import { M as Modal } from './index-621ada25.js';
+import { M as Modal } from './index-e548ff7c.js';
 import Cookies from 'js-cookie';
 import flatten from 'lodash/flatten';
 import uniqBy from 'lodash/uniqBy';
-import { g as getCookie } from './cookieHelper-42ccc8ba.js';
-import { n as normalizeLinkSlash, a as normalizeLink } from './normalizeLink-d9c76838.js';
+import { g as getCookie } from './cookieHelper-778b8de6.js';
+import { n as normalizeLinkSlash, a as normalizeLink } from './normalizeLink-e599ba1f.js';
 
 var styles$7 = {"alert":"CHw-fZZ","content":"_03U6VRS","close":"EO828Vv"};
 
@@ -3017,25 +3019,23 @@ const SeoHead = ({ SEOData = {}, locale = 'vi-VN', routerPathname: pathname, rou
 
 const StyledIconContainerClass = 'hhgcomp-toolbanner-iconcontainer';
 const StyledInnerClass = 'hhgcomp-toolbanner-inner';
-const _StyledWrapper = styled.div `
-  position: relative;
-  width: 100%;
-  height: 100%;
-  background: ${(props) => props.bgColor};
-  background-color: inherit;
+const StyledWrapper$1 = setDefaultClass(styled.div `
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background: ${(props) => props.bgColor};
+    background-color: inherit;
 
-  &[data-site='marryBaby'] {
-    background-color: ${(props) => props['data-banner-color'] || '#5EC08F'};
-    background-image: none;
-    padding-bottom: 0;
-    &[data-is-embedded='true'] {
-      border-top-left-radius: 16px;
-      border-top-right-radius: 16px;
+    &[data-site='marryBaby'] {
+      background-color: ${(props) => props['data-banner-color'] || '#5EC08F'};
+      background-image: none;
+      padding-bottom: 0;
+      &[data-is-embedded='true'] {
+        border-top-left-radius: 16px;
+        border-top-right-radius: 16px;
+      }
     }
-  }
-`;
-const StyledWrapperClass = 'hhgcomp-toolbanner-wrapper';
-const StyledWrapper$1 = getDefaultClassWrapper(_StyledWrapper, StyledWrapperClass);
+  `, 'hhgcomp-toolbanner-wrapper');
 const StyledContainer$4 = styled.div `
   width: 100%;
   ${MediaQueries.mbDown} {
@@ -3058,7 +3058,7 @@ const StyledContainer$4 = styled.div `
 
   ${MediaQueries.tdDown} {
     height: auto;
-    .${StyledWrapperClass} {
+    ${StyledWrapper$1.classSelector} {
       .${StyledInnerClass} {
         display: flex;
         align-items: center;
@@ -3782,96 +3782,94 @@ const DueDateCalculator = ({ onSubmitDueDate, locale, isSide, siteType, }) => {
         calculatorType === DueDateCalculatorType.IVF ? (React__default.createElement(DueDateFormIVF, { locale: locale, onClick: onSubmitDueDate, isSide: isSide, siteType: siteType, pageUrl: currentUrl })) : null));
 };
 
-const _StyledContent = styled.form `
-  margin: auto;
-  ${MediaQueries.mbUp} {
-    width: 100%;
-    padding: 20px;
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-  }
-  ${MediaQueries.mbDown} {
-    padding: 16px;
-  }
-  .due-date-calculate-button {
-    width: 100%;
-    margin: 12px auto 0;
+const StyledContent = setDefaultClass(styled.form `
+    margin: auto;
     ${MediaQueries.mbUp} {
-      max-width: 200px;
+      width: 100%;
+      padding: 20px;
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
     }
-  }
-  &[data-is-side='true'] {
-    ${MediaQueries.mbUp} {
-      padding: 24px 40px 0px 40px;
+    ${MediaQueries.mbDown} {
+      padding: 16px;
     }
-  }
-  .input-weight-form {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    padding: 0 16px;
-  }
-  .input-form {
-    display: flex;
-
-    ${MediaQueries.mbUp} {
-      margin-bottom: 24px;
-      width: calc(50% - 8px);
+    .due-date-calculate-button {
+      width: 100%;
+      margin: 12px auto 0;
+      ${MediaQueries.mbUp} {
+        max-width: 200px;
+      }
     }
     &[data-is-side='true'] {
       ${MediaQueries.mbUp} {
-        margin-bottom: 8px;
-        width: 100%;
+        padding: 24px 40px 0px 40px;
       }
     }
-    ${MediaQueries.mbDown} {
-      margin-bottom: 8px;
-    }
-    .label-text {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      -webkit-line-clamp: 2;
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
+    .input-weight-form {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      padding: 0 16px;
     }
-  }
-  .input-form-pwg {
-    display: flex;
-    width: calc(50% - 8px);
+    .input-form {
+      display: flex;
 
-    ${MediaQueries.mbUp} {
-      margin-bottom: 24px;
-    }
-    &[data-is-side='true'] {
       ${MediaQueries.mbUp} {
+        margin-bottom: 24px;
+        width: calc(50% - 8px);
+      }
+      &[data-is-side='true'] {
+        ${MediaQueries.mbUp} {
+          margin-bottom: 8px;
+          width: 100%;
+        }
+      }
+      ${MediaQueries.mbDown} {
         margin-bottom: 8px;
       }
+      .label-text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        -webkit-line-clamp: 2;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+      }
     }
-    ${MediaQueries.mbDown} {
-      margin-bottom: 8px;
-      width: 100%;
-    }
-    .label-text {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      -webkit-line-clamp: 2;
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-    }
-  }
-  .day-slider {
-    width: 100%;
-    ${MediaQueries.mbUp} {
+    .input-form-pwg {
+      display: flex;
       width: calc(50% - 8px);
+
+      ${MediaQueries.mbUp} {
+        margin-bottom: 24px;
+      }
       &[data-is-side='true'] {
+        ${MediaQueries.mbUp} {
+          margin-bottom: 8px;
+        }
+      }
+      ${MediaQueries.mbDown} {
+        margin-bottom: 8px;
         width: 100%;
       }
+      .label-text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        -webkit-line-clamp: 2;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+      }
     }
-  }
-`;
-const StyledContentClass = 'hhgcomp-embedtoolcard-content';
-const StyledContent = getDefaultClassWrapper(_StyledContent, StyledContentClass);
+    .day-slider {
+      width: 100%;
+      ${MediaQueries.mbUp} {
+        width: calc(50% - 8px);
+        &[data-is-side='true'] {
+          width: 100%;
+        }
+      }
+    }
+  `, 'hhgcomp-embedtoolcard-content');
 const StyledContainer$3 = styled.div `
   padding: 0;
   background-color: white;
@@ -3883,7 +3881,7 @@ const StyledContainer$3 = styled.div `
     border-radius: 16px;
   }
   .due-date-cal {
-    .${StyledContentClass} {
+    ${StyledContent.classSelector} {
       ${MediaQueries.mbUp} {
         padding: 24px;
       }

package/build/esm/{index-f833b395.js → index-bc070b43.js}

@@ -1,7 +1,7 @@
-import { _ as __rest } from './tslib.es6-d03cb889.js';
+import { _ as __rest } from './tslib.es6-6c353490.js';
 import React__default from 'react';
-import { t as theme } from './theme-bc0a16d6.js';
-import { S as Share, E as Eye, W as WhatsApp, k as Spinner } from './utils-c5cdb4b1.js';
+import { t as theme } from './theme-42cb371b.js';
+import { S as Share, E as Eye, W as WhatsApp, k as Spinner } from './utils-2eeac181.js';
 
 const ArrowRightTail = (_a) => {
     var { size = 24, color: colorInit = theme.colors.gray600, useCurrentColor, isActive, activeColor = theme.colors.primaryBase } = _a, rest = __rest(_a, ["size", "color", "useCurrentColor", "isActive", "activeColor"]);

package/build/esm/{index-2dbb70cc.js → index-cb59b5e6.js}

@@ -1,6 +1,6 @@
 import { enUS, vi, km, hi, id, ms, th, zhTW } from 'date-fns/locale';
-import { L as LOCALE } from './Subot-77659a36.js';
-import { i as isProduction } from './isProduction-a01e577e.js';
+import { L as LOCALE } from './Subot-81261e12.js';
+import { i as isProduction } from './isProduction-0dd05199.js';
 
 const siteHost = {
     HELLO_HEALTH_GROUP: 'hellohealthgroup.com',

package/build/esm/{index-ae8cf7cb.js → index-dae36eed.js}

@@ -1,7 +1,7 @@
-import { _ as __rest } from './tslib.es6-d03cb889.js';
+import { _ as __rest } from './tslib.es6-6c353490.js';
 import React__default from 'react';
 import { Indicator as Indicator$1 } from '@mantine/core';
-import { t as theme } from './theme-bc0a16d6.js';
+import { t as theme } from './theme-42cb371b.js';
 
 const Indicator = (_a) => {
     var { styles, color = theme.colors.red700 } = _a, props = __rest(_a, ["styles", "color"]);

package/build/esm/{index-621ada25.js → index-e548ff7c.js}

@@ -1,9 +1,9 @@
-import { _ as __rest } from './tslib.es6-d03cb889.js';
+import { _ as __rest } from './tslib.es6-6c353490.js';
 import React__default from 'react';
 import { Modal as Modal$1, CloseButton } from '@mantine/core';
-import { C as CommonGAssets } from './index-9f716e64.js';
-import { i as useStyles } from './index-d8548d2e.js';
-import { T as Text } from './index-e3f847ab.js';
+import { C as CommonGAssets } from './index-8cf272e7.js';
+import { i as useStyles } from './index-2edb2e27.js';
+import { T as Text } from './index-b5f84e24.js';
 
 const Modal = (_a) => {
     var { title, styles } = _a, rest = __rest(_a, ["title", "styles"]);

package/build/esm/{index-6a83527e.js → index-edf2ebc8.js}

@@ -1,17 +1,18 @@
 import React__default, { useRef, useEffect, useState } from 'react';
 import { Portal } from '@mantine/core';
-import { t as toggleNoScroll, M as MediaQueries } from './utils-8d2a0656.js';
-import { x as StyledBackdrop, y as StyledDrawer, z as StyledDrawerPanel, A as StyledDrawerContent, B as StyledRadioImageGroup, C as StyledRadioImageItem, t as getDefaultClassWrapper } from './index.styles-8f85a751.js';
-import { T as Text } from './index-e3f847ab.js';
-import { u as useScrollbarSize } from './useScrollbarSize-0f356554.js';
+import { t as toggleNoScroll, M as MediaQueries } from './utils-75630fc7.js';
+import { x as StyledBackdrop, y as StyledDrawer, z as StyledDrawerPanel, A as StyledDrawerContent, B as StyledRadioImageGroup, C as StyledRadioImageItem } from './index.styles-51d80c5c.js';
+import { T as Text } from './index-b5f84e24.js';
+import { u as useScrollbarSize } from './useScrollbarSize-57dc7083.js';
 import { createPortal } from 'react-dom';
-import styled from 'styled-components';
-import { t as theme } from './theme-bc0a16d6.js';
+import styled from '@emotion/styled';
+import { s as setDefaultClass } from './utils-2eeac181.js';
+import { t as theme } from './theme-42cb371b.js';
 import { BabyBoyMB, GenderChooseBoy, BabyGirlMB, GenderChooseGirl } from '@hhgtech/icons/other';
-import { u as useTranslations } from './useTranslations-f40da32c.js';
-import { G as Gender } from './Subot-77659a36.js';
-import { M as MarryBabyText, a as MarryBabyHeading } from './index-08431eb8.js';
-import { T as Text$1 } from './index-b06204d8.js';
+import { u as useTranslations } from './useTranslations-eceb2845.js';
+import { G as Gender } from './Subot-81261e12.js';
+import { M as MarryBabyText, a as MarryBabyHeading } from './index-1687bb55.js';
+import { T as Text$1 } from './index-07fad580.js';
 
 const Backdrop = ({ open = false, onClickOutside, }) => {
     return (React__default.createElement(StyledBackdrop, { "data-open": open, onClick: onClickOutside }));
@@ -76,38 +77,36 @@ const RadioImageGroup = ({ value, options, className, direction = 'horizontal',
                     : theme.mbColors.midGray }, option.label)) : (React__default.createElement(Text$1, { type: "bold", color: (value || check) === option.value ? '#2D87F3' : 'black', className: "radio-group-item-heading", size: "label1" }, option.label))))))))));
 };
 
-const _StyledModal = styled.div `
-  position: relative;
-  z-index: 200;
-  background-color: ${theme.colors.white};
-  border-radius: ${theme.borderRadius};
-  box-shadow: 0px 4px 8px ${theme.colors.gray200};
-  &[data-site-type='marryBaby'] {
-    border-radius: 16px;
+const StyledModal = setDefaultClass(styled.div `
+    position: relative;
+    z-index: 200;
+    background-color: ${theme.colors.white};
+    border-radius: ${theme.borderRadius};
+    box-shadow: 0px 4px 8px ${theme.colors.gray200};
+    &[data-site-type='marryBaby'] {
+      border-radius: 16px;
+      .hhg-modal__content {
+        position: relative;
+        z-index: 111;
+        height: 100%;
+
+        padding: 24px;
+      }
+    }
     .hhg-modal__content {
       position: relative;
       z-index: 111;
       height: 100%;
-
-      padding: 24px;
+      padding: 16px;
     }
-  }
-  .hhg-modal__content {
-    position: relative;
-    z-index: 111;
-    height: 100%;
-    padding: 16px;
-  }
-  .hhg-modal__video {
-    position: relative;
-    z-index: 111;
-    height: 100%;
-    background-color: none;
-    box-shadow: none;
-  }
-`;
-const StyledModalClass = 'hhgcomp-modal-modal';
-const StyledModal = getDefaultClassWrapper(_StyledModal, StyledModalClass);
+    .hhg-modal__video {
+      position: relative;
+      z-index: 111;
+      height: 100%;
+      background-color: none;
+      box-shadow: none;
+    }
+  `, 'hhgcomp-modal-modal');
 const StyledModalWrapper = styled.div `
   position: fixed;
   top: 0;
@@ -143,25 +142,25 @@ const StyledModalWrapper = styled.div `
   }
 
   &.slideTop {
-    .${StyledModalClass} {
+    ${StyledModal.classSelector} {
       transform: translate(0, -100vh);
       transition: all 0.5s ease;
     }
 
     &[data-open='true'] {
-      .${StyledModalClass} {
+      ${StyledModal.classSelector} {
         transform: translate(0);
       }
     }
   }
 
   &.scaleUp {
-    .${StyledModalClass} {
+    ${StyledModal.classSelector} {
       transform: scale(0.9);
     }
 
     &[data-open='true'] {
-      .${StyledModalClass} {
+      ${StyledModal.classSelector} {
         transition: all 0.3s ease-out;
         transform: scale(1);
       }
@@ -170,7 +169,7 @@ const StyledModalWrapper = styled.div `
 
   &[data-type='tail'] {
     justify-content: flex-end;
-    .${StyledModalClass} {
+    ${StyledModal.classSelector} {
       width: 420px;
       height: 100%;
       border-radius: 0;
@@ -178,7 +177,7 @@ const StyledModalWrapper = styled.div `
     }
   }
   &[data-type='form'] {
-    .${StyledModalClass} {
+    ${StyledModal.classSelector} {
       width: 496px;
       height: 548px;
       max-height: 100%;
@@ -189,7 +188,7 @@ const StyledModalWrapper = styled.div `
     }
   }
   &[data-type='video'] {
-    .${StyledModalClass} {
+    ${StyledModal.classSelector} {
       height: 100%;
       max-height: 539px;
       ${MediaQueries.mbDown} {
@@ -202,7 +201,7 @@ const StyledModalWrapper = styled.div `
     }
   }
   &[data-type='confirm'] {
-    .${StyledModalClass} {
+    ${StyledModal.classSelector} {
       width: 100%;
       max-width: 407px;
       ${MediaQueries.mbDown} {

package/build/esm/{index-5d4d91c1.js → index-f7d9c75d.js}

@@ -1,7 +1,7 @@
-import { _ as __rest } from './tslib.es6-d03cb889.js';
+import { _ as __rest } from './tslib.es6-6c353490.js';
 import React__default from 'react';
 import { useMantineTheme } from '@mantine/core';
-import { T as Text } from './index-e3f847ab.js';
+import { T as Text } from './index-b5f84e24.js';
 
 /**
  * @deprecated Consider to use import { Title } from '@mantine/core'