@anker-in/headless-ui 1.3.36 → 1.3.38
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/biz-components/FeaturedBlogPosts/index.js +1 -1
- package/dist/cjs/biz-components/FeaturedBlogPosts/index.js.map +2 -2
- package/dist/cjs/biz-components/Ksp/index.d.ts +2 -0
- package/dist/cjs/biz-components/Ksp/index.js +1 -1
- package/dist/cjs/biz-components/Ksp/index.js.map +3 -3
- package/dist/cjs/biz-components/ModalRegisterSubscribe/index.d.ts +2 -1
- package/dist/cjs/biz-components/ModalRegisterSubscribe/index.js +1 -1
- package/dist/cjs/biz-components/ModalRegisterSubscribe/index.js.map +3 -3
- package/dist/cjs/components/tabs.js +1 -1
- package/dist/cjs/components/tabs.js.map +2 -2
- package/dist/esm/biz-components/FeaturedBlogPosts/index.js +1 -1
- package/dist/esm/biz-components/FeaturedBlogPosts/index.js.map +2 -2
- package/dist/esm/biz-components/Ksp/index.d.ts +2 -0
- package/dist/esm/biz-components/Ksp/index.js +1 -1
- package/dist/esm/biz-components/Ksp/index.js.map +3 -3
- package/dist/esm/biz-components/ModalRegisterSubscribe/index.d.ts +2 -1
- package/dist/esm/biz-components/ModalRegisterSubscribe/index.js +1 -1
- package/dist/esm/biz-components/ModalRegisterSubscribe/index.js.map +3 -3
- package/dist/esm/components/tabs.js +1 -1
- package/dist/esm/components/tabs.js.map +2 -2
- package/package.json +1 -1
- package/style.css +63 -0
|
@@ -10,6 +10,7 @@ export interface ModalRegisterSubscribeProps {
|
|
|
10
10
|
open: boolean;
|
|
11
11
|
onOpenChange: (open: boolean) => void;
|
|
12
12
|
heroImage?: HeroImage;
|
|
13
|
+
heroImageMobile?: HeroImage;
|
|
13
14
|
heroTitle?: string;
|
|
14
15
|
rightsDetailsLabel?: string;
|
|
15
16
|
onRightsDetails?: () => void;
|
|
@@ -25,7 +26,7 @@ export interface ModalRegisterSubscribeProps {
|
|
|
25
26
|
onPasswordLogin?: () => void;
|
|
26
27
|
}
|
|
27
28
|
declare const ModalRegisterSubscribe: {
|
|
28
|
-
({ open, onOpenChange, heroImage, heroTitle, rightsDetailsLabel, onRightsDetails, benefitsSectionLabel, benefits, formTitle, copy, termsDefaultChecked, newsletterDefaultChecked, registerLabel, passwordLoginLabel, socialLogins, onRegister, onPasswordLogin, }: ModalRegisterSubscribeProps & {
|
|
29
|
+
({ open, onOpenChange, heroImage, heroImageMobile, heroTitle, rightsDetailsLabel, onRightsDetails, benefitsSectionLabel, benefits, formTitle, copy, termsDefaultChecked, newsletterDefaultChecked, registerLabel, passwordLoginLabel, socialLogins, onRegister, onPasswordLogin, }: ModalRegisterSubscribeProps & {
|
|
29
30
|
copy?: Record<string, any>;
|
|
30
31
|
}): import("react/jsx-runtime").JSX.Element;
|
|
31
32
|
displayName: string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as
|
|
1
|
+
"use client";import{Fragment as ne,jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{Dialog as D,DialogContent as _,Button as ee,Input as te,Checkbox as H,Heading as N,Text as a,Picture as T,Link as B}from"../../components/index.js";const F=/^[^\s@]+@[^\s@]+\.[^\s@]+$/,le=()=>e("svg",{width:"1",height:"16",viewBox:"0 0 1 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("line",{x1:"0.5",y1:"0",x2:"0.5",y2:"16",stroke:"#DADCE0"})}),ae=()=>t("svg",{viewBox:"0 0 24 24",width:"20",height:"20",xmlns:"http://www.w3.org/2000/svg",children:[e("path",{fill:"#4285F4",d:"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"}),e("path",{fill:"#34A853",d:"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"}),e("path",{fill:"#FBBC05",d:"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"}),e("path",{fill:"#EA4335",d:"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"})]}),se=()=>e("svg",{viewBox:"0 0 24 24",width:"20",height:"20",xmlns:"http://www.w3.org/2000/svg",fill:"none",children:e("path",{fill:"currentColor",d:"M16.365 12.408c.023 2.468 2.161 3.29 2.185 3.301-.018.058-.341 1.17-1.122 2.32-.675.993-1.375 1.982-2.478 2.002-1.084.02-1.433-.644-2.674-.644-1.24 0-1.629.624-2.654.664-1.067.04-1.88-1.07-2.56-2.059-1.39-2.01-2.452-5.68-1.027-8.155.707-1.23 1.973-2.01 3.347-2.03 1.045-.02 2.032.704 2.674.704.641 0 1.846-.87 3.112-.742.53.022 2.018.214 2.974 1.613-.077.048-1.776 1.035-1.757 3.026ZM14.972 4.858c.566-.686.947-1.64.843-2.59-.815.033-1.8.543-2.384 1.229-.525.606-.986 1.576-.862 2.507.908.07 1.838-.462 2.403-1.146Z"})}),ie=()=>e("svg",{viewBox:"0 0 24 24",width:"20",height:"20",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z",fill:"#1877F2"})}),re={google:{label:"Google",icon:e(ae,{})},apple:{label:"Apple",icon:e(se,{})},facebook:{label:"Facebook",icon:e(ie,{})}},oe=({open:g,onOpenChange:x,title:s,benefits:n})=>e(D,{open:g,onOpenChange:x,children:e(_,{className:"modal-rights-details-root tablet:max-w-[358px] !z-[1002] flex max-h-[80vh] w-full max-w-[calc(100vw_-_32px)] flex-col !gap-0 overflow-hidden rounded-[12px] !border-none bg-white !p-0 drop-shadow-[0px_2px_4px_rgba(0,0,0,0.12)]",overlayClassName:"!z-[1002] bg-black/60",children:t("div",{className:"rounded-[8px] px-[16px] pb-[24px] pt-[16px] backdrop-blur-sm",children:[s&&e(a,{as:"p",size:3,html:s,className:"text-info-primary mb-2"}),n&&n.length>0&&e("ul",{className:"flex flex-col gap-[4px]",children:n.map((o,c)=>e("li",{className:"ml-[21px] list-disc",children:e(a,{as:"span",size:3,html:o,className:"text-info-tertiary"})},c))})]})})}),O=({open:g,onOpenChange:x,heroImage:s,heroImageMobile:n,heroTitle:o,rightsDetailsLabel:c,onRightsDetails:P,benefitsSectionLabel:h,benefits:m,formTitle:k,copy:i,termsDefaultChecked:j,newsletterDefaultChecked:G,registerLabel:C,passwordLoginLabel:y,socialLogins:V,onRegister:q,onPasswordLogin:Z})=>{const z=i?.emailLabel,W=i?.emailPlaceholder,$=i?.emailEmptyErrorLabel,J=i?.emailInvalidErrorLabel,d=i?.termsLabel,L=i?.termsRequiredErrorLabel,E=i?.newsletterLabel,[R,K]=r.useState(""),[M,b]=r.useState(""),[p,Q]=r.useState(!!j),[I,U]=r.useState(!!G),[X,f]=r.useState(!1),[Y,S]=r.useState(!1),u=V?.map(l=>({id:l,...re[l]})),A=t("div",{className:"modal-register-subscribe-form tablet:p-8 tablet:pt-12 flex h-full flex-col justify-between gap-6 p-6 pt-8",children:[t("div",{className:"tablet:gap-8 flex flex-col gap-6",children:[k&&e(N,{as:"h3",size:2,html:k,className:"modal-register-subscribe-form-title text-info-primary tablet:text-[24px] text-[20px]"}),t("div",{className:"flex flex-col gap-4",children:[t("div",{className:"flex flex-col gap-2",children:[z&&e(a,{as:"label",size:3,html:z,className:"modal-register-subscribe-email-label text-info-primary tablet:text-[16px] text-[14px] [&_a]:underline"}),e(te,{type:"email",placeholder:W,value:R,onChange:l=>{K(l.target.value),b("")},className:"modal-register-subscribe-email-input tablet:h-[52px] border-lines-1 tablet:rounded-box-small tablet:px-4 h-[48px] bg-white px-3 font-[700] placeholder:font-[700]"}),M&&e(a,{as:"p",size:3,className:"text-error-0",children:M})]}),t("div",{className:"flex flex-col gap-2",children:[d&&t("div",{className:"flex items-start gap-2",children:[e(H,{id:"modal-register-terms",checked:p,onCheckedChange:l=>{Q(!!l),f(!1)},size:"base",className:"mt-0.5 shrink-0"}),e(a,{as:"label",htmlFor:"modal-register-terms",size:3,html:d,className:"modal-register-subscribe-terms-label text-info-tertiary tablet:text-[16px] cursor-pointer text-[14px] [&_a]:underline"})]}),X&&L&&e(a,{as:"p",size:3,className:"text-error-0",children:L}),E&&t("div",{className:"flex items-start gap-2",children:[e(H,{id:"modal-register-newsletter",checked:I,onCheckedChange:l=>U(!!l),size:"base",className:"mt-0.5 shrink-0"}),e(a,{as:"label",htmlFor:"modal-register-newsletter",size:3,html:E,className:"modal-register-subscribe-newsletter-label text-info-tertiary tablet:text-[16px] cursor-pointer text-[14px] [&_a]:underline"})]})]})]})]}),t("div",{className:"flex flex-col gap-4",children:[t("div",{className:"flex flex-col items-center gap-4",children:[C&&e(ee,{onClick:()=>{const l=R.trim();l?F.test(l)?b(""):b(J||""):b($||""),f(!!(d&&!p)),!(!l||!F.test(l)||d&&!p)&&q?.(l,p,I)},className:"modal-register-subscribe-register-btn tablet:text-[16px] w-full text-[14px]",children:C}),y&&e(B,{onClick:Z,className:"modal-register-subscribe-password-login tablet:text-[16px] text-[14px]",children:y})]}),u&&u.length>0&&e("div",{className:"modal-register-subscribe-social flex items-center justify-center gap-4",children:u.map((l,w)=>t(r.Fragment,{children:[w>0&&e(le,{}),t("div",{className:"modal-register-subscribe-social-btn rounded-box-small flex items-center gap-2",children:[e("span",{className:"desktop:size-6 size-5 shrink-0",children:l.icon}),e(a,{as:"span",size:3,html:l.label,className:"text-info-primary desktop::text-[16px] text-[14px] [&_a]:underline"})]})]},l.id))})]})]}),v=n??s;return t(ne,{children:[e(D,{open:g,onOpenChange:x,children:t(_,{className:"modal-register-subscribe-root tablet:!rounded-box tablet:!top-1/2 tablet:!left-1/2 tablet:!bottom-auto tablet:!right-auto tablet:!-translate-x-1/2 tablet:!-translate-y-1/2 rounded-t-box !inset-x-0 !bottom-0 !top-auto flex max-h-[90vh] w-full !translate-x-0 !translate-y-0 flex-col !gap-0 overflow-hidden rounded-b-none !border-none !p-0",style:{maxWidth:896},overlayClassName:"bg-black/60",children:[t("div",{className:"modal-register-subscribe-inner tablet:hidden flex size-full min-h-0 flex-col bg-white",children:[t("div",{className:"modal-register-subscribe-hero relative h-[310px] w-full shrink-0 overflow-hidden bg-[rgba(200,215,240,0.4)]",children:[v?.url&&t("div",{className:"pointer-events-none absolute inset-0",children:[e(T,{source:v.url,alt:v.alt||"",className:"absolute w-[99%]",imgClassName:"w-full h-full object-cover"}),e("div",{className:"absolute inset-0 bg-[rgba(121,160,223,0.2)]"})]}),t("div",{className:"relative z-10 flex flex-col gap-1 px-[24px] pb-[16px] pr-[44px] pt-[44px]",children:[o&&e(N,{as:"h2",size:2,html:o,className:"modal-register-subscribe-hero-heading text-info-primary text-[20px]"}),c&&e(B,{onClick:()=>{P?.(),S(!0)},className:"modal-register-subscribe-rights-details text-info-primary w-fit text-[14px] underline",children:c})]})]}),e("div",{className:"flex-1 overflow-y-auto",children:A})]}),t("div",{className:"modal-register-subscribe-inner tablet:flex hidden h-[640px] min-h-0 w-full flex-row bg-white",children:[t("div",{className:"modal-register-subscribe-left tablet:w-[448px] relative flex shrink-0 flex-col justify-between overflow-hidden px-4 pb-4 pt-12",children:[s?.url&&t("div",{className:"pointer-events-none absolute inset-0",children:[e(T,{source:s.url,alt:s.alt||"",className:"absolute left-0 size-full",imgClassName:"w-full h-full object-cover"}),e("div",{className:"absolute inset-0 bg-[rgba(121,160,223,0.2)]"})]}),e("div",{className:"modal-register-subscribe-hero-title relative px-4",children:o&&e(N,{as:"h2",size:2,html:o,className:"modal-register-subscribe-hero-heading text-info-primary desktop:text-[24px]"})}),t("div",{className:"modal-register-subscribe-benefits rounded-box-small relative flex flex-col gap-2 bg-white/90 p-6 backdrop-blur-sm",children:[h&&e(a,{as:"p",size:3,html:h,className:"modal-register-subscribe-benefits-label text-info-primary [&_a]:underline"}),m&&m.length>0&&e("ul",{className:"flex flex-col gap-1",children:m.map((l,w)=>e("li",{className:"modal-register-subscribe-benefit-item ml-6 list-disc",children:e(a,{as:"span",size:3,html:l.text,className:"text-info-tertiary [&_a]:underline"})},w))})]})]}),e("div",{className:"modal-register-subscribe-right flex min-w-0 flex-1 flex-col overflow-y-auto",children:A})]})]})}),e(oe,{open:Y,onOpenChange:S,title:h,benefits:m?.map(l=>l.text)})]})};O.displayName="ModalRegisterSubscribe";var me=O;export{me as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ModalRegisterSubscribe/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { Dialog, DialogContent, Button, Input, Checkbox, Heading, Text, Picture, Link } from '../../components/index.js'\n\nexport interface HeroImage {\n url: string\n alt?: string\n}\n\nexport interface BenefitItem {\n text: string\n}\n\nexport type SocialLoginType = 'google' | 'apple' | 'facebook'\n\nconst EMAIL_PATTERN = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/\n\nexport interface ModalRegisterSubscribeProps {\n open: boolean\n onOpenChange: (open: boolean) => void\n heroImage?: HeroImage\n heroTitle?: string\n rightsDetailsLabel?: string\n onRightsDetails?: () => void\n benefitsSectionLabel?: string\n benefits?: BenefitItem[]\n formTitle?: string\n termsDefaultChecked?: boolean\n newsletterDefaultChecked?: boolean\n registerLabel?: string\n passwordLoginLabel?: string\n socialLogins?: SocialLoginType[]\n onRegister?: (email: string, termsAccepted: boolean, newsletterAccepted: boolean) => void\n onPasswordLogin?: () => void\n}\n\nconst VerticalDivider = () => (\n <svg width=\"1\" height=\"16\" viewBox=\"0 0 1 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <line x1=\"0.5\" y1=\"0\" x2=\"0.5\" y2=\"16\" stroke=\"#DADCE0\" />\n </svg>\n)\n\nconst GoogleIcon = () => (\n <svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill=\"#4285F4\"\n d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z\"\n />\n <path\n fill=\"#34A853\"\n d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\"\n />\n <path\n fill=\"#FBBC05\"\n d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z\"\n />\n <path\n fill=\"#EA4335\"\n d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\"\n />\n </svg>\n)\n\nconst AppleIcon = () => (\n <svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\">\n <path\n fill=\"currentColor\"\n d=\"M16.365 12.408c.023 2.468 2.161 3.29 2.185 3.301-.018.058-.341 1.17-1.122 2.32-.675.993-1.375 1.982-2.478 2.002-1.084.02-1.433-.644-2.674-.644-1.24 0-1.629.624-2.654.664-1.067.04-1.88-1.07-2.56-2.059-1.39-2.01-2.452-5.68-1.027-8.155.707-1.23 1.973-2.01 3.347-2.03 1.045-.02 2.032.704 2.674.704.641 0 1.846-.87 3.112-.742.53.022 2.018.214 2.974 1.613-.077.048-1.776 1.035-1.757 3.026ZM14.972 4.858c.566-.686.947-1.64.843-2.59-.815.033-1.8.543-2.384 1.229-.525.606-.986 1.576-.862 2.507.908.07 1.838-.462 2.403-1.146Z\"\n />\n </svg>\n)\n\nconst FacebookIcon = () => (\n <svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z\"\n fill=\"#1877F2\"\n />\n </svg>\n)\n\nconst SOCIAL_LOGIN_META: Record<SocialLoginType, { label: string; icon: React.ReactNode }> = {\n google: {\n label: 'Google',\n icon: <GoogleIcon />,\n },\n apple: {\n label: 'Apple',\n icon: <AppleIcon />,\n },\n facebook: {\n label: 'Facebook',\n icon: <FacebookIcon />,\n },\n}\n\nconst ModalRightsDetails = ({\n open,\n onOpenChange,\n title,\n benefits,\n}: {\n open: boolean\n onOpenChange: (open: boolean) => void\n title?: string\n benefits?: string[]\n}) => (\n <Dialog open={open} onOpenChange={onOpenChange}>\n <DialogContent\n className=\"modal-rights-details-root tablet:max-w-[358px] !z-[1002] flex max-h-[80vh] w-full max-w-[calc(100vw_-_32px)] flex-col !gap-0 overflow-hidden rounded-[12px] !border-none bg-white !p-0 drop-shadow-[0px_2px_4px_rgba(0,0,0,0.12)]\"\n overlayClassName=\"!z-[1002] bg-black/60\"\n >\n <div className=\"rounded-[8px] px-[16px] pb-[24px] pt-[16px] backdrop-blur-sm\">\n {title && <Text as=\"p\" size={3} html={title} className=\"text-info-primary mb-2\" />}\n {benefits && benefits.length > 0 && (\n <ul className=\"flex flex-col gap-[4px]\">\n {benefits.map((b, i) => (\n <li key={i} className=\"ml-[21px] list-disc\">\n <Text as=\"span\" size={3} html={b} className=\"text-info-tertiary\" />\n </li>\n ))}\n </ul>\n )}\n </div>\n </DialogContent>\n </Dialog>\n)\n\nconst ModalRegisterSubscribe = ({\n open,\n onOpenChange,\n heroImage,\n heroTitle,\n rightsDetailsLabel,\n onRightsDetails,\n benefitsSectionLabel,\n benefits,\n formTitle,\n copy,\n termsDefaultChecked,\n newsletterDefaultChecked,\n registerLabel,\n passwordLoginLabel,\n socialLogins,\n onRegister,\n onPasswordLogin,\n}: ModalRegisterSubscribeProps & { copy?: Record<string, any> }) => {\n const emailLabel = copy?.emailLabel\n const emailPlaceholder = copy?.emailPlaceholder\n const emailEmptyErrorLabel = copy?.emailEmptyErrorLabel\n const emailInvalidErrorLabel = copy?.emailInvalidErrorLabel\n const termsLabel = copy?.termsLabel\n const termsRequiredErrorLabel = copy?.termsRequiredErrorLabel\n const newsletterLabel = copy?.newsletterLabel\n const [email, setEmail] = React.useState('')\n const [emailError, setEmailError] = React.useState('')\n const [termsAccepted, setTermsAccepted] = React.useState(!!termsDefaultChecked)\n const [newsletterAccepted, setNewsletterAccepted] = React.useState(!!newsletterDefaultChecked)\n const [showTermsError, setShowTermsError] = React.useState(false)\n const [showRightsDetails, setShowRightsDetails] = React.useState(false)\n const socialLoginItems = socialLogins?.map(type => ({\n id: type,\n ...SOCIAL_LOGIN_META[type],\n }))\n\n const formSection = (\n <div className=\"modal-register-subscribe-form tablet:p-8 tablet:pt-12 flex h-full flex-col justify-between gap-6 p-6 pt-8\">\n <div className=\"tablet:gap-8 flex flex-col gap-6\">\n {formTitle && (\n <Heading\n as=\"h3\"\n size={2}\n html={formTitle}\n className=\"modal-register-subscribe-form-title text-info-primary tablet:text-[24px] text-[20px]\"\n />\n )}\n\n <div className=\"flex flex-col gap-4\">\n <div className=\"flex flex-col gap-2\">\n {emailLabel && (\n <Text\n as=\"label\"\n size={3}\n html={emailLabel}\n className=\"modal-register-subscribe-email-label text-info-primary tablet:text-[16px] text-[14px] [&_a]:underline\"\n />\n )}\n <Input\n type=\"email\"\n placeholder={emailPlaceholder}\n value={email}\n onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n setEmail(e.target.value)\n setEmailError('')\n }}\n className=\"modal-register-subscribe-email-input tablet:h-[52px] border-lines-1 tablet:rounded-box-small tablet:px-4 h-[48px] bg-white px-3 font-[700] placeholder:font-[700]\"\n />\n {emailError && (\n <Text as=\"p\" size={3} className=\"text-error-0\">\n {emailError}\n </Text>\n )}\n </div>\n\n <div className=\"flex flex-col gap-2\">\n {termsLabel && (\n <div className=\"flex items-start gap-2\">\n <Checkbox\n id=\"modal-register-terms\"\n checked={termsAccepted}\n onCheckedChange={(v: boolean | 'indeterminate') => {\n setTermsAccepted(!!v)\n setShowTermsError(false)\n }}\n size=\"base\"\n className=\"mt-0.5 shrink-0\"\n />\n <Text\n as=\"label\"\n htmlFor=\"modal-register-terms\"\n size={3}\n html={termsLabel}\n className=\"modal-register-subscribe-terms-label text-info-tertiary tablet:text-[16px] cursor-pointer text-[14px] [&_a]:underline\"\n />\n </div>\n )}\n {showTermsError && termsRequiredErrorLabel && (\n <Text as=\"p\" size={3} className=\"text-error-0\">\n {termsRequiredErrorLabel}\n </Text>\n )}\n {newsletterLabel && (\n <div className=\"flex items-start gap-2\">\n <Checkbox\n id=\"modal-register-newsletter\"\n checked={newsletterAccepted}\n onCheckedChange={(v: boolean | 'indeterminate') => setNewsletterAccepted(!!v)}\n size=\"base\"\n className=\"mt-0.5 shrink-0\"\n />\n <Text\n as=\"label\"\n htmlFor=\"modal-register-newsletter\"\n size={3}\n html={newsletterLabel}\n className=\"modal-register-subscribe-newsletter-label text-info-tertiary tablet:text-[16px] cursor-pointer text-[14px] [&_a]:underline\"\n />\n </div>\n )}\n </div>\n </div>\n </div>\n\n <div className=\"flex flex-col gap-4\">\n <div className=\"flex flex-col items-center gap-4\">\n {registerLabel && (\n <Button\n onClick={() => {\n const trimmedEmail = email.trim()\n\n if (!trimmedEmail) {\n setEmailError(emailEmptyErrorLabel || '')\n } else if (!EMAIL_PATTERN.test(trimmedEmail)) {\n setEmailError(emailInvalidErrorLabel || '')\n } else {\n setEmailError('')\n }\n\n if (!!termsLabel && !termsAccepted) {\n setShowTermsError(true)\n } else {\n setShowTermsError(false)\n }\n\n if (!trimmedEmail || !EMAIL_PATTERN.test(trimmedEmail) || (!!termsLabel && !termsAccepted)) {\n return\n }\n\n onRegister?.(trimmedEmail, termsAccepted, newsletterAccepted)\n }}\n className=\"modal-register-subscribe-register-btn tablet:text-[16px] w-full text-[14px]\"\n >\n {registerLabel}\n </Button>\n )}\n\n {passwordLoginLabel && (\n <Link\n onClick={onPasswordLogin}\n className=\"modal-register-subscribe-password-login tablet:text-[16px] text-[14px]\"\n >\n {passwordLoginLabel}\n </Link>\n )}\n </div>\n\n {socialLoginItems && socialLoginItems.length > 0 && (\n <div className=\"modal-register-subscribe-social flex items-center justify-center gap-4\">\n {socialLoginItems.map((social, idx) => (\n <React.Fragment key={social.id}>\n {idx > 0 && <VerticalDivider />}\n <div className=\"modal-register-subscribe-social-btn rounded-box-small flex items-center gap-2\">\n <span className=\"desktop:size-6 size-5 shrink-0\">{social.icon}</span>\n <Text\n as=\"span\"\n size={3}\n html={social.label}\n className=\"text-info-primary desktop::text-[16px] text-[14px] [&_a]:underline\"\n />\n </div>\n </React.Fragment>\n ))}\n </div>\n )}\n </div>\n </div>\n )\n\n return (\n <>\n <Dialog open={open} onOpenChange={onOpenChange}>\n <DialogContent\n className=\"modal-register-subscribe-root tablet:!rounded-box tablet:!top-1/2 tablet:!left-1/2 tablet:!bottom-auto tablet:!right-auto tablet:!-translate-x-1/2 tablet:!-translate-y-1/2 rounded-t-box !inset-x-0 !bottom-0 !top-auto flex max-h-[90vh] w-full !translate-x-0 !translate-y-0 flex-col !gap-0 overflow-hidden rounded-b-none !border-none !p-0\"\n style={{ maxWidth: 896 }}\n overlayClassName=\"bg-black/60\"\n >\n {/* \u624B\u673A\u7AEF */}\n <div className=\"modal-register-subscribe-inner tablet:hidden flex size-full min-h-0 flex-col bg-white\">\n <div className=\"modal-register-subscribe-hero relative h-[310px] w-full shrink-0 overflow-hidden bg-[rgba(200,215,240,0.4)]\">\n {heroImage?.url && (\n <div className=\"pointer-events-none absolute inset-0\">\n <Picture\n source={heroImage.url}\n alt={heroImage.alt || ''}\n className=\"absolute w-[99%]\"\n imgClassName=\"w-full h-full object-cover\"\n />\n <div className=\"absolute inset-0 bg-[rgba(121,160,223,0.2)]\" />\n </div>\n )}\n\n <div className=\"relative z-10 flex flex-col gap-1 px-[24px] pb-[16px] pr-[44px] pt-[44px]\">\n {heroTitle && (\n <Heading\n as=\"h2\"\n size={2}\n html={heroTitle}\n className=\"modal-register-subscribe-hero-heading text-info-primary text-[20px]\"\n />\n )}\n {rightsDetailsLabel && (\n <Link\n onClick={() => {\n onRightsDetails?.()\n setShowRightsDetails(true)\n }}\n className=\"modal-register-subscribe-rights-details text-info-primary w-fit text-[14px] underline\"\n >\n {rightsDetailsLabel}\n </Link>\n )}\n </div>\n </div>\n\n <div className=\"flex-1 overflow-y-auto\">{formSection}</div>\n </div>\n {/* pc \u7AEF */}\n <div className=\"modal-register-subscribe-inner tablet:flex hidden h-[640px] min-h-0 w-full flex-row bg-white\">\n <div className=\"modal-register-subscribe-left tablet:w-[448px] relative flex shrink-0 flex-col justify-between overflow-hidden px-4 pb-4 pt-12\">\n {heroImage?.url && (\n <div className=\"pointer-events-none absolute inset-0\">\n <Picture\n source={heroImage.url}\n alt={heroImage.alt || ''}\n className=\"absolute left-0 size-full\"\n imgClassName=\"w-full h-full object-cover\"\n />\n <div className=\"absolute inset-0 bg-[rgba(121,160,223,0.2)]\" />\n </div>\n )}\n\n <div className=\"modal-register-subscribe-hero-title relative px-4\">\n {heroTitle && (\n <Heading\n as=\"h2\"\n size={2}\n html={heroTitle}\n className=\"modal-register-subscribe-hero-heading text-info-primary desktop:text-[24px]\"\n />\n )}\n </div>\n\n <div className=\"modal-register-subscribe-benefits rounded-box-small relative flex flex-col gap-2 bg-white/90 p-6 backdrop-blur-sm\">\n {benefitsSectionLabel && (\n <Text\n as=\"p\"\n size={3}\n html={benefitsSectionLabel}\n className=\"modal-register-subscribe-benefits-label text-info-primary [&_a]:underline\"\n />\n )}\n {benefits && benefits.length > 0 && (\n <ul className=\"flex flex-col gap-1\">\n {benefits.map((item, idx) => (\n <li key={idx} className=\"modal-register-subscribe-benefit-item ml-6 list-disc\">\n <Text as=\"span\" size={3} html={item.text} className=\"text-info-tertiary [&_a]:underline\" />\n </li>\n ))}\n </ul>\n )}\n </div>\n </div>\n\n <div className=\"modal-register-subscribe-right flex min-w-0 flex-1 flex-col overflow-y-auto\">\n {formSection}\n </div>\n </div>\n </DialogContent>\n </Dialog>\n\n <ModalRightsDetails\n open={showRightsDetails}\n onOpenChange={setShowRightsDetails}\n title={benefitsSectionLabel}\n benefits={benefits?.map(b => b.text)}\n />\n </>\n )\n}\n\nModalRegisterSubscribe.displayName = 'ModalRegisterSubscribe'\nexport default ModalRegisterSubscribe\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "React", "Dialog", "DialogContent", "Button", "Input", "Checkbox", "Heading", "Text", "Picture", "Link", "EMAIL_PATTERN", "VerticalDivider", "GoogleIcon", "AppleIcon", "FacebookIcon", "SOCIAL_LOGIN_META", "ModalRightsDetails", "open", "onOpenChange", "title", "benefits", "b", "i", "ModalRegisterSubscribe", "heroImage", "heroTitle", "rightsDetailsLabel", "onRightsDetails", "benefitsSectionLabel", "formTitle", "copy", "termsDefaultChecked", "newsletterDefaultChecked", "registerLabel", "passwordLoginLabel", "socialLogins", "onRegister", "onPasswordLogin", "emailLabel", "emailPlaceholder", "emailEmptyErrorLabel", "emailInvalidErrorLabel", "termsLabel", "termsRequiredErrorLabel", "newsletterLabel", "email", "setEmail", "emailError", "setEmailError", "termsAccepted", "setTermsAccepted", "newsletterAccepted", "setNewsletterAccepted", "showTermsError", "setShowTermsError", "showRightsDetails", "setShowRightsDetails", "socialLoginItems", "type", "formSection", "e", "v", "trimmedEmail", "social", "idx", "item", "ModalRegisterSubscribe_default"]
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { Dialog, DialogContent, Button, Input, Checkbox, Heading, Text, Picture, Link } from '../../components/index.js'\n\nexport interface HeroImage {\n url: string\n alt?: string\n}\n\nexport interface BenefitItem {\n text: string\n}\n\nexport type SocialLoginType = 'google' | 'apple' | 'facebook'\n\nconst EMAIL_PATTERN = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/\n\nexport interface ModalRegisterSubscribeProps {\n open: boolean\n onOpenChange: (open: boolean) => void\n heroImage?: HeroImage\n heroImageMobile?: HeroImage\n heroTitle?: string\n rightsDetailsLabel?: string\n onRightsDetails?: () => void\n benefitsSectionLabel?: string\n benefits?: BenefitItem[]\n formTitle?: string\n termsDefaultChecked?: boolean\n newsletterDefaultChecked?: boolean\n registerLabel?: string\n passwordLoginLabel?: string\n socialLogins?: SocialLoginType[]\n onRegister?: (email: string, termsAccepted: boolean, newsletterAccepted: boolean) => void\n onPasswordLogin?: () => void\n}\n\nconst VerticalDivider = () => (\n <svg width=\"1\" height=\"16\" viewBox=\"0 0 1 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <line x1=\"0.5\" y1=\"0\" x2=\"0.5\" y2=\"16\" stroke=\"#DADCE0\" />\n </svg>\n)\n\nconst GoogleIcon = () => (\n <svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill=\"#4285F4\"\n d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z\"\n />\n <path\n fill=\"#34A853\"\n d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\"\n />\n <path\n fill=\"#FBBC05\"\n d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z\"\n />\n <path\n fill=\"#EA4335\"\n d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\"\n />\n </svg>\n)\n\nconst AppleIcon = () => (\n <svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\">\n <path\n fill=\"currentColor\"\n d=\"M16.365 12.408c.023 2.468 2.161 3.29 2.185 3.301-.018.058-.341 1.17-1.122 2.32-.675.993-1.375 1.982-2.478 2.002-1.084.02-1.433-.644-2.674-.644-1.24 0-1.629.624-2.654.664-1.067.04-1.88-1.07-2.56-2.059-1.39-2.01-2.452-5.68-1.027-8.155.707-1.23 1.973-2.01 3.347-2.03 1.045-.02 2.032.704 2.674.704.641 0 1.846-.87 3.112-.742.53.022 2.018.214 2.974 1.613-.077.048-1.776 1.035-1.757 3.026ZM14.972 4.858c.566-.686.947-1.64.843-2.59-.815.033-1.8.543-2.384 1.229-.525.606-.986 1.576-.862 2.507.908.07 1.838-.462 2.403-1.146Z\"\n />\n </svg>\n)\n\nconst FacebookIcon = () => (\n <svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z\"\n fill=\"#1877F2\"\n />\n </svg>\n)\n\nconst SOCIAL_LOGIN_META: Record<SocialLoginType, { label: string; icon: React.ReactNode }> = {\n google: {\n label: 'Google',\n icon: <GoogleIcon />,\n },\n apple: {\n label: 'Apple',\n icon: <AppleIcon />,\n },\n facebook: {\n label: 'Facebook',\n icon: <FacebookIcon />,\n },\n}\n\nconst ModalRightsDetails = ({\n open,\n onOpenChange,\n title,\n benefits,\n}: {\n open: boolean\n onOpenChange: (open: boolean) => void\n title?: string\n benefits?: string[]\n}) => (\n <Dialog open={open} onOpenChange={onOpenChange}>\n <DialogContent\n className=\"modal-rights-details-root tablet:max-w-[358px] !z-[1002] flex max-h-[80vh] w-full max-w-[calc(100vw_-_32px)] flex-col !gap-0 overflow-hidden rounded-[12px] !border-none bg-white !p-0 drop-shadow-[0px_2px_4px_rgba(0,0,0,0.12)]\"\n overlayClassName=\"!z-[1002] bg-black/60\"\n >\n <div className=\"rounded-[8px] px-[16px] pb-[24px] pt-[16px] backdrop-blur-sm\">\n {title && <Text as=\"p\" size={3} html={title} className=\"text-info-primary mb-2\" />}\n {benefits && benefits.length > 0 && (\n <ul className=\"flex flex-col gap-[4px]\">\n {benefits.map((b, i) => (\n <li key={i} className=\"ml-[21px] list-disc\">\n <Text as=\"span\" size={3} html={b} className=\"text-info-tertiary\" />\n </li>\n ))}\n </ul>\n )}\n </div>\n </DialogContent>\n </Dialog>\n)\n\nconst ModalRegisterSubscribe = ({\n open,\n onOpenChange,\n heroImage,\n heroImageMobile,\n heroTitle,\n rightsDetailsLabel,\n onRightsDetails,\n benefitsSectionLabel,\n benefits,\n formTitle,\n copy,\n termsDefaultChecked,\n newsletterDefaultChecked,\n registerLabel,\n passwordLoginLabel,\n socialLogins,\n onRegister,\n onPasswordLogin,\n}: ModalRegisterSubscribeProps & { copy?: Record<string, any> }) => {\n const emailLabel = copy?.emailLabel\n const emailPlaceholder = copy?.emailPlaceholder\n const emailEmptyErrorLabel = copy?.emailEmptyErrorLabel\n const emailInvalidErrorLabel = copy?.emailInvalidErrorLabel\n const termsLabel = copy?.termsLabel\n const termsRequiredErrorLabel = copy?.termsRequiredErrorLabel\n const newsletterLabel = copy?.newsletterLabel\n const [email, setEmail] = React.useState('')\n const [emailError, setEmailError] = React.useState('')\n const [termsAccepted, setTermsAccepted] = React.useState(!!termsDefaultChecked)\n const [newsletterAccepted, setNewsletterAccepted] = React.useState(!!newsletterDefaultChecked)\n const [showTermsError, setShowTermsError] = React.useState(false)\n const [showRightsDetails, setShowRightsDetails] = React.useState(false)\n const socialLoginItems = socialLogins?.map(type => ({\n id: type,\n ...SOCIAL_LOGIN_META[type],\n }))\n\n const formSection = (\n <div className=\"modal-register-subscribe-form tablet:p-8 tablet:pt-12 flex h-full flex-col justify-between gap-6 p-6 pt-8\">\n <div className=\"tablet:gap-8 flex flex-col gap-6\">\n {formTitle && (\n <Heading\n as=\"h3\"\n size={2}\n html={formTitle}\n className=\"modal-register-subscribe-form-title text-info-primary tablet:text-[24px] text-[20px]\"\n />\n )}\n\n <div className=\"flex flex-col gap-4\">\n <div className=\"flex flex-col gap-2\">\n {emailLabel && (\n <Text\n as=\"label\"\n size={3}\n html={emailLabel}\n className=\"modal-register-subscribe-email-label text-info-primary tablet:text-[16px] text-[14px] [&_a]:underline\"\n />\n )}\n <Input\n type=\"email\"\n placeholder={emailPlaceholder}\n value={email}\n onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n setEmail(e.target.value)\n setEmailError('')\n }}\n className=\"modal-register-subscribe-email-input tablet:h-[52px] border-lines-1 tablet:rounded-box-small tablet:px-4 h-[48px] bg-white px-3 font-[700] placeholder:font-[700]\"\n />\n {emailError && (\n <Text as=\"p\" size={3} className=\"text-error-0\">\n {emailError}\n </Text>\n )}\n </div>\n\n <div className=\"flex flex-col gap-2\">\n {termsLabel && (\n <div className=\"flex items-start gap-2\">\n <Checkbox\n id=\"modal-register-terms\"\n checked={termsAccepted}\n onCheckedChange={(v: boolean | 'indeterminate') => {\n setTermsAccepted(!!v)\n setShowTermsError(false)\n }}\n size=\"base\"\n className=\"mt-0.5 shrink-0\"\n />\n <Text\n as=\"label\"\n htmlFor=\"modal-register-terms\"\n size={3}\n html={termsLabel}\n className=\"modal-register-subscribe-terms-label text-info-tertiary tablet:text-[16px] cursor-pointer text-[14px] [&_a]:underline\"\n />\n </div>\n )}\n {showTermsError && termsRequiredErrorLabel && (\n <Text as=\"p\" size={3} className=\"text-error-0\">\n {termsRequiredErrorLabel}\n </Text>\n )}\n {newsletterLabel && (\n <div className=\"flex items-start gap-2\">\n <Checkbox\n id=\"modal-register-newsletter\"\n checked={newsletterAccepted}\n onCheckedChange={(v: boolean | 'indeterminate') => setNewsletterAccepted(!!v)}\n size=\"base\"\n className=\"mt-0.5 shrink-0\"\n />\n <Text\n as=\"label\"\n htmlFor=\"modal-register-newsletter\"\n size={3}\n html={newsletterLabel}\n className=\"modal-register-subscribe-newsletter-label text-info-tertiary tablet:text-[16px] cursor-pointer text-[14px] [&_a]:underline\"\n />\n </div>\n )}\n </div>\n </div>\n </div>\n\n <div className=\"flex flex-col gap-4\">\n <div className=\"flex flex-col items-center gap-4\">\n {registerLabel && (\n <Button\n onClick={() => {\n const trimmedEmail = email.trim()\n\n if (!trimmedEmail) {\n setEmailError(emailEmptyErrorLabel || '')\n } else if (!EMAIL_PATTERN.test(trimmedEmail)) {\n setEmailError(emailInvalidErrorLabel || '')\n } else {\n setEmailError('')\n }\n\n if (!!termsLabel && !termsAccepted) {\n setShowTermsError(true)\n } else {\n setShowTermsError(false)\n }\n\n if (!trimmedEmail || !EMAIL_PATTERN.test(trimmedEmail) || (!!termsLabel && !termsAccepted)) {\n return\n }\n\n onRegister?.(trimmedEmail, termsAccepted, newsletterAccepted)\n }}\n className=\"modal-register-subscribe-register-btn tablet:text-[16px] w-full text-[14px]\"\n >\n {registerLabel}\n </Button>\n )}\n\n {passwordLoginLabel && (\n <Link\n onClick={onPasswordLogin}\n className=\"modal-register-subscribe-password-login tablet:text-[16px] text-[14px]\"\n >\n {passwordLoginLabel}\n </Link>\n )}\n </div>\n\n {socialLoginItems && socialLoginItems.length > 0 && (\n <div className=\"modal-register-subscribe-social flex items-center justify-center gap-4\">\n {socialLoginItems.map((social, idx) => (\n <React.Fragment key={social.id}>\n {idx > 0 && <VerticalDivider />}\n <div className=\"modal-register-subscribe-social-btn rounded-box-small flex items-center gap-2\">\n <span className=\"desktop:size-6 size-5 shrink-0\">{social.icon}</span>\n <Text\n as=\"span\"\n size={3}\n html={social.label}\n className=\"text-info-primary desktop::text-[16px] text-[14px] [&_a]:underline\"\n />\n </div>\n </React.Fragment>\n ))}\n </div>\n )}\n </div>\n </div>\n )\n\n const finalHeroImageMobile = heroImageMobile ?? heroImage\n\n return (\n <>\n <Dialog open={open} onOpenChange={onOpenChange}>\n <DialogContent\n className=\"modal-register-subscribe-root tablet:!rounded-box tablet:!top-1/2 tablet:!left-1/2 tablet:!bottom-auto tablet:!right-auto tablet:!-translate-x-1/2 tablet:!-translate-y-1/2 rounded-t-box !inset-x-0 !bottom-0 !top-auto flex max-h-[90vh] w-full !translate-x-0 !translate-y-0 flex-col !gap-0 overflow-hidden rounded-b-none !border-none !p-0\"\n style={{ maxWidth: 896 }}\n overlayClassName=\"bg-black/60\"\n >\n {/* \u624B\u673A\u7AEF */}\n <div className=\"modal-register-subscribe-inner tablet:hidden flex size-full min-h-0 flex-col bg-white\">\n <div className=\"modal-register-subscribe-hero relative h-[310px] w-full shrink-0 overflow-hidden bg-[rgba(200,215,240,0.4)]\">\n {finalHeroImageMobile?.url && (\n <div className=\"pointer-events-none absolute inset-0\">\n <Picture\n source={finalHeroImageMobile.url}\n alt={finalHeroImageMobile.alt || ''}\n className=\"absolute w-[99%]\"\n imgClassName=\"w-full h-full object-cover\"\n />\n <div className=\"absolute inset-0 bg-[rgba(121,160,223,0.2)]\" />\n </div>\n )}\n\n <div className=\"relative z-10 flex flex-col gap-1 px-[24px] pb-[16px] pr-[44px] pt-[44px]\">\n {heroTitle && (\n <Heading\n as=\"h2\"\n size={2}\n html={heroTitle}\n className=\"modal-register-subscribe-hero-heading text-info-primary text-[20px]\"\n />\n )}\n {rightsDetailsLabel && (\n <Link\n onClick={() => {\n onRightsDetails?.()\n setShowRightsDetails(true)\n }}\n className=\"modal-register-subscribe-rights-details text-info-primary w-fit text-[14px] underline\"\n >\n {rightsDetailsLabel}\n </Link>\n )}\n </div>\n </div>\n\n <div className=\"flex-1 overflow-y-auto\">{formSection}</div>\n </div>\n {/* pc \u7AEF */}\n <div className=\"modal-register-subscribe-inner tablet:flex hidden h-[640px] min-h-0 w-full flex-row bg-white\">\n <div className=\"modal-register-subscribe-left tablet:w-[448px] relative flex shrink-0 flex-col justify-between overflow-hidden px-4 pb-4 pt-12\">\n {heroImage?.url && (\n <div className=\"pointer-events-none absolute inset-0\">\n <Picture\n source={heroImage.url}\n alt={heroImage.alt || ''}\n className=\"absolute left-0 size-full\"\n imgClassName=\"w-full h-full object-cover\"\n />\n <div className=\"absolute inset-0 bg-[rgba(121,160,223,0.2)]\" />\n </div>\n )}\n\n <div className=\"modal-register-subscribe-hero-title relative px-4\">\n {heroTitle && (\n <Heading\n as=\"h2\"\n size={2}\n html={heroTitle}\n className=\"modal-register-subscribe-hero-heading text-info-primary desktop:text-[24px]\"\n />\n )}\n </div>\n\n <div className=\"modal-register-subscribe-benefits rounded-box-small relative flex flex-col gap-2 bg-white/90 p-6 backdrop-blur-sm\">\n {benefitsSectionLabel && (\n <Text\n as=\"p\"\n size={3}\n html={benefitsSectionLabel}\n className=\"modal-register-subscribe-benefits-label text-info-primary [&_a]:underline\"\n />\n )}\n {benefits && benefits.length > 0 && (\n <ul className=\"flex flex-col gap-1\">\n {benefits.map((item, idx) => (\n <li key={idx} className=\"modal-register-subscribe-benefit-item ml-6 list-disc\">\n <Text as=\"span\" size={3} html={item.text} className=\"text-info-tertiary [&_a]:underline\" />\n </li>\n ))}\n </ul>\n )}\n </div>\n </div>\n\n <div className=\"modal-register-subscribe-right flex min-w-0 flex-1 flex-col overflow-y-auto\">\n {formSection}\n </div>\n </div>\n </DialogContent>\n </Dialog>\n\n <ModalRightsDetails\n open={showRightsDetails}\n onOpenChange={setShowRightsDetails}\n title={benefitsSectionLabel}\n benefits={benefits?.map(b => b.text)}\n />\n </>\n )\n}\n\nModalRegisterSubscribe.displayName = 'ModalRegisterSubscribe'\nexport default ModalRegisterSubscribe\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "React", "Dialog", "DialogContent", "Button", "Input", "Checkbox", "Heading", "Text", "Picture", "Link", "EMAIL_PATTERN", "VerticalDivider", "GoogleIcon", "AppleIcon", "FacebookIcon", "SOCIAL_LOGIN_META", "ModalRightsDetails", "open", "onOpenChange", "title", "benefits", "b", "i", "ModalRegisterSubscribe", "heroImage", "heroImageMobile", "heroTitle", "rightsDetailsLabel", "onRightsDetails", "benefitsSectionLabel", "formTitle", "copy", "termsDefaultChecked", "newsletterDefaultChecked", "registerLabel", "passwordLoginLabel", "socialLogins", "onRegister", "onPasswordLogin", "emailLabel", "emailPlaceholder", "emailEmptyErrorLabel", "emailInvalidErrorLabel", "termsLabel", "termsRequiredErrorLabel", "newsletterLabel", "email", "setEmail", "emailError", "setEmailError", "termsAccepted", "setTermsAccepted", "newsletterAccepted", "setNewsletterAccepted", "showTermsError", "setShowTermsError", "showRightsDetails", "setShowRightsDetails", "socialLoginItems", "type", "formSection", "e", "v", "trimmedEmail", "social", "idx", "finalHeroImageMobile", "item", "ModalRegisterSubscribe_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as
|
|
1
|
+
"use client";import{jsx as r}from"react/jsx-runtime";import*as o from"react";import{cn as m}from"../helpers/index.js";import*as i from"@radix-ui/react-tabs";import{cva as g}from"class-variance-authority";function u(t){return t.trim().replace(/\s+/g,"-")}const b=o.createContext({align:"left",shape:"square"}),h=o.forwardRef(({children:t,align:s="left",shape:e="default",...a},n)=>r(i.Root,{ref:n,...a,children:r(b.Provider,{value:{align:s,shape:e},children:t})}));h.displayName="Tabs";const w=g("rounded-tabs",{variants:{shape:{default:"",rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{shape:"default"}}),L=g("rounded-tabs",{variants:{shape:{default:"",rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{shape:"default"}}),T=o.forwardRef(({className:t,...s},e)=>{const{align:a,shape:n}=o.useContext(b),l=a==="center"?"flex w-full justify-center":a==="right"?"flex w-full justify-end":null,p=r(i.List,{ref:e,className:m("bg-tabs-list-bg flex w-fit max-w-full overflow-x-auto p-1",w({shape:n}),t),style:{scrollbarWidth:"none",msOverflowStyle:"none"},...s});return l?r("div",{className:l,children:p}):p});T.displayName=i.List.displayName;const R=o.forwardRef(({className:t,onClick:s,value:e,...a},n)=>{const{shape:l}=o.useContext(b),p=f=>{s?.(f);const d=f?.currentTarget,c=f?.currentTarget?.parentElement;if(d&&c){const x=d.offsetLeft,y=d.offsetWidth,P=c.offsetWidth,C=x-P/2+y/2;c.scrollTo({left:C,behavior:"smooth"})}};return r(i.Trigger,{ref:n,className:m("text-info-primary lg-desktop:text-base disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-5 pb-2.5 pt-[11px] text-sm font-bold data-[state=active]:bg-white data-[state=active]:text-[#080A0F]",t,L({shape:l})),onClick:p,value:u(e),"data-radix-collection-item":u(e),...a})});R.displayName=i.Trigger.displayName;const v=o.forwardRef(({className:t,value:s,...e},a)=>r(i.Content,{ref:a,className:m(t),value:u(s),...e}));v.displayName=i.Content.displayName;export{h as Tabs,v as TabsContent,T as TabsList,R as TabsTrigger};
|
|
2
2
|
//# sourceMappingURL=tabs.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/tabs.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../helpers/index.js'\n\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport { cva } from 'class-variance-authority'\nimport type { Align, Shape } from '../types/props.js'\n\ntype tabShape = Shape | 'default'\n\n/**\n * Sanitize a tab value so it is safe to use as part of an HTML id attribute.\n *\n * HTML ids must not contain whitespace characters. Radix UI uses the value\n * directly in generated ids (e.g. `radix-:r0:-trigger-{value}`), so an\n * unsanitized value like \"best seller\" would produce an invalid id.\n *\n * This function replaces any sequence of whitespace with a single hyphen and\n * trims leading/trailing whitespace, leaving all other characters intact.\n */\nfunction sanitizeTabValue(value: string): string {\n return value.trim().replace(/\\s+/g, '-')\n}\n\nconst TabListContext = React.createContext<{\n align?: Align\n shape: tabShape\n}>({\n align: 'left',\n shape: 'square',\n})\n\nconst Tabs = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {\n align?: Align\n shape?: tabShape\n }\n>(({ children, align = 'left', shape = 'default', ...props }, ref) => (\n <TabsPrimitive.Root ref={ref} {...props}>\n <TabListContext.Provider value={{ align, shape }}>{children}</TabListContext.Provider>\n </TabsPrimitive.Root>\n))\nTabs.displayName = 'Tabs'\n\nconst tabsListVariants = cva('rounded-tabs', {\n variants: {\n shape: {\n default: '',\n rounded: 'rounded-[28px]',\n square: 'rounded-none',\n },\n },\n defaultVariants: {\n shape: 'default',\n },\n})\n\nconst tabsTriggerVariants = cva('rounded-tabs', {\n variants: {\n shape: {\n default: '',\n rounded: 'rounded-[28px]',\n square: 'rounded-none',\n },\n },\n defaultVariants: {\n shape: 'default',\n },\n})\nconst TabsList = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.List>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => {\n const { align: alignFromParent, shape: shapeFromParent } = React.useContext(TabListContext)\n\n const wrapperClass =\n alignFromParent === 'center'\n ? 'flex w-full justify-center'\n : alignFromParent === 'right'\n ? 'flex w-full justify-end'\n : null\n\n const list = (\n <TabsPrimitive.List\n ref={ref}\n className={cn(\n 'bg-tabs-list-bg flex w-fit max-w-full overflow-x-auto p-1',\n tabsListVariants({ shape: shapeFromParent }),\n className\n )}\n style={{\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n }}\n {...props}\n />\n )\n\n return wrapperClass ? <div className={wrapperClass}>{list}</div> : list\n})\nTabsList.displayName = TabsPrimitive.List.displayName\n\nconst TabsTrigger = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, onClick, value, ...props }, ref) => {\n const { shape: shapeFromParent } = React.useContext(TabListContext)\n const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n onClick?.(e)\n const tabElement = e?.currentTarget\n const container = e?.currentTarget?.parentElement\n if (tabElement && container) {\n const tabLeft = tabElement.offsetLeft\n const tabWidth = tabElement.offsetWidth\n const containerWidth = container.offsetWidth\n const scrollTo = tabLeft - containerWidth / 2 + tabWidth / 2\n container.scrollTo({\n left: scrollTo,\n behavior: 'smooth',\n })\n }\n }\n return (\n <TabsPrimitive.Trigger\n ref={ref}\n className={cn(\n 'text-info-primary lg-desktop:text-base disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-5 pb-2.5 pt-[11px] text-sm font-bold data-[state=active]:bg-white data-[state=active]:text-[#080A0F]',\n className,\n tabsTriggerVariants({\n shape: shapeFromParent,\n })\n )}\n onClick={handleClick}\n value={sanitizeTabValue(value)}\n {...props}\n />\n )\n})\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\n\nconst TabsContent = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, value, ...props }, ref) => (\n <TabsPrimitive.Content ref={ref} className={cn(className)} value={sanitizeTabValue(value)} {...props} />\n))\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n"],
|
|
5
|
-
"mappings": "aAyCI,cAAAA,MAAA,oBAvCJ,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,sBAEnB,UAAYC,MAAmB,uBAC/B,OAAS,OAAAC,MAAW,2BAepB,SAASC,EAAiBC,EAAuB,CAC/C,OAAOA,EAAM,KAAK,EAAE,QAAQ,OAAQ,GAAG,CACzC,CAEA,MAAMC,EAAiBN,EAAM,cAG1B,CACD,MAAO,OACP,MAAO,QACT,CAAC,EAEKO,EAAOP,EAAM,WAMjB,CAAC,CAAE,SAAAQ,EAAU,MAAAC,EAAQ,OAAQ,MAAAC,EAAQ,UAAW,GAAGC,CAAM,EAAGC,IAC5Db,EAACG,EAAc,KAAd,CAAmB,IAAKU,EAAM,GAAGD,EAChC,SAAAZ,EAACO,EAAe,SAAf,CAAwB,MAAO,CAAE,MAAAG,EAAO,MAAAC,CAAM,EAAI,SAAAF,EAAS,EAC9D,CACD,EACDD,EAAK,YAAc,OAEnB,MAAMM,EAAmBV,EAAI,eAAgB,CAC3C,SAAU,CACR,MAAO,CACL,QAAS,GACT,QAAS,iBACT,OAAQ,cACV,CACF,EACA,gBAAiB,CACf,MAAO,SACT,CACF,CAAC,EAEKW,EAAsBX,EAAI,eAAgB,CAC9C,SAAU,CACR,MAAO,CACL,QAAS,GACT,QAAS,iBACT,OAAQ,cACV,CACF,EACA,gBAAiB,CACf,MAAO,SACT,CACF,CAAC,EACKY,EAAWf,EAAM,WAGrB,CAAC,CAAE,UAAAgB,EAAW,GAAGL,CAAM,EAAGC,IAAQ,CAClC,KAAM,CAAE,MAAOK,EAAiB,MAAOC,CAAgB,EAAIlB,EAAM,WAAWM,CAAc,EAEpFa,EACJF,IAAoB,SAChB,6BACAA,IAAoB,QAClB,0BACA,KAEFG,EACJrB,EAACG,EAAc,KAAd,CACC,IAAKU,EACL,UAAWX,EACT,4DACAY,EAAiB,CAAE,MAAOK,CAAgB,CAAC,EAC3CF,CACF,EACA,MAAO,CACL,eAAgB,OAChB,gBAAiB,MACnB,EACC,GAAGL,EACN,EAGF,OAAOQ,EAAepB,EAAC,OAAI,UAAWoB,EAAe,SAAAC,EAAK,EAASA,CACrE,CAAC,EACDL,EAAS,YAAcb,EAAc,KAAK,YAE1C,MAAMmB,EAAcrB,EAAM,WAGxB,CAAC,CAAE,UAAAgB,EAAW,QAAAM,EAAS,MAAAjB,EAAO,GAAGM,CAAM,EAAGC,IAAQ,CAClD,KAAM,CAAE,MAAOM,CAAgB,EAAIlB,EAAM,WAAWM,CAAc,
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../helpers/index.js'\n\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport { cva } from 'class-variance-authority'\nimport type { Align, Shape } from '../types/props.js'\n\ntype tabShape = Shape | 'default'\n\n/**\n * Sanitize a tab value so it is safe to use as part of an HTML id attribute.\n *\n * HTML ids must not contain whitespace characters. Radix UI uses the value\n * directly in generated ids (e.g. `radix-:r0:-trigger-{value}`), so an\n * unsanitized value like \"best seller\" would produce an invalid id.\n *\n * This function replaces any sequence of whitespace with a single hyphen and\n * trims leading/trailing whitespace, leaving all other characters intact.\n */\nfunction sanitizeTabValue(value: string): string {\n return value.trim().replace(/\\s+/g, '-')\n}\n\nconst TabListContext = React.createContext<{\n align?: Align\n shape: tabShape\n}>({\n align: 'left',\n shape: 'square',\n})\n\nconst Tabs = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {\n align?: Align\n shape?: tabShape\n }\n>(({ children, align = 'left', shape = 'default', ...props }, ref) => (\n <TabsPrimitive.Root ref={ref} {...props}>\n <TabListContext.Provider value={{ align, shape }}>{children}</TabListContext.Provider>\n </TabsPrimitive.Root>\n))\nTabs.displayName = 'Tabs'\n\nconst tabsListVariants = cva('rounded-tabs', {\n variants: {\n shape: {\n default: '',\n rounded: 'rounded-[28px]',\n square: 'rounded-none',\n },\n },\n defaultVariants: {\n shape: 'default',\n },\n})\n\nconst tabsTriggerVariants = cva('rounded-tabs', {\n variants: {\n shape: {\n default: '',\n rounded: 'rounded-[28px]',\n square: 'rounded-none',\n },\n },\n defaultVariants: {\n shape: 'default',\n },\n})\nconst TabsList = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.List>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => {\n const { align: alignFromParent, shape: shapeFromParent } = React.useContext(TabListContext)\n\n const wrapperClass =\n alignFromParent === 'center'\n ? 'flex w-full justify-center'\n : alignFromParent === 'right'\n ? 'flex w-full justify-end'\n : null\n\n const list = (\n <TabsPrimitive.List\n ref={ref}\n className={cn(\n 'bg-tabs-list-bg flex w-fit max-w-full overflow-x-auto p-1',\n tabsListVariants({ shape: shapeFromParent }),\n className\n )}\n style={{\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n }}\n {...props}\n />\n )\n\n return wrapperClass ? <div className={wrapperClass}>{list}</div> : list\n})\nTabsList.displayName = TabsPrimitive.List.displayName\n\nconst TabsTrigger = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, onClick, value, ...props }, ref) => {\n const { shape: shapeFromParent } = React.useContext(TabListContext)\n\n const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n onClick?.(e)\n const tabElement = e?.currentTarget\n const container = e?.currentTarget?.parentElement\n if (tabElement && container) {\n const tabLeft = tabElement.offsetLeft\n const tabWidth = tabElement.offsetWidth\n const containerWidth = container.offsetWidth\n const scrollTo = tabLeft - containerWidth / 2 + tabWidth / 2\n container.scrollTo({\n left: scrollTo,\n behavior: 'smooth',\n })\n }\n }\n return (\n <TabsPrimitive.Trigger\n ref={ref}\n className={cn(\n 'text-info-primary lg-desktop:text-base disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-5 pb-2.5 pt-[11px] text-sm font-bold data-[state=active]:bg-white data-[state=active]:text-[#080A0F]',\n className,\n tabsTriggerVariants({\n shape: shapeFromParent,\n })\n )}\n onClick={handleClick}\n value={sanitizeTabValue(value)}\n data-radix-collection-item={sanitizeTabValue(value)}\n {...props}\n />\n )\n})\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\n\nconst TabsContent = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, value, ...props }, ref) => (\n <TabsPrimitive.Content ref={ref} className={cn(className)} value={sanitizeTabValue(value)} {...props} />\n))\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "React", "cn", "TabsPrimitive", "cva", "sanitizeTabValue", "value", "TabListContext", "Tabs", "children", "align", "shape", "props", "ref", "tabsListVariants", "tabsTriggerVariants", "TabsList", "className", "alignFromParent", "shapeFromParent", "wrapperClass", "list", "TabsTrigger", "onClick", "handleClick", "e", "tabElement", "container", "tabLeft", "tabWidth", "containerWidth", "scrollTo", "TabsContent"]
|
|
7
7
|
}
|
package/package.json
CHANGED
package/style.css
CHANGED
|
@@ -1180,6 +1180,9 @@ video {
|
|
|
1180
1180
|
.aspect-\[296\/320\] {
|
|
1181
1181
|
aspect-ratio: 296/320;
|
|
1182
1182
|
}
|
|
1183
|
+
.aspect-\[356\/200\] {
|
|
1184
|
+
aspect-ratio: 356/200;
|
|
1185
|
+
}
|
|
1183
1186
|
.aspect-\[358\/190\] {
|
|
1184
1187
|
aspect-ratio: 358/190;
|
|
1185
1188
|
}
|
|
@@ -5250,6 +5253,9 @@ video {
|
|
|
5250
5253
|
.tablet\:aspect-\[346\/240\] {
|
|
5251
5254
|
aspect-ratio: 346/240;
|
|
5252
5255
|
}
|
|
5256
|
+
.tablet\:aspect-\[704\/200\] {
|
|
5257
|
+
aspect-ratio: 704/200;
|
|
5258
|
+
}
|
|
5253
5259
|
.tablet\:aspect-\[704\/360\] {
|
|
5254
5260
|
aspect-ratio: 704/360;
|
|
5255
5261
|
}
|
|
@@ -5817,6 +5823,9 @@ video {
|
|
|
5817
5823
|
.laptop\:col-span-6 {
|
|
5818
5824
|
grid-column: span 6 / span 6;
|
|
5819
5825
|
}
|
|
5826
|
+
.laptop\:col-span-7 {
|
|
5827
|
+
grid-column: span 7 / span 7;
|
|
5828
|
+
}
|
|
5820
5829
|
.laptop\:col-start-1 {
|
|
5821
5830
|
grid-column-start: 1;
|
|
5822
5831
|
}
|
|
@@ -5904,6 +5913,9 @@ video {
|
|
|
5904
5913
|
.laptop\:hidden {
|
|
5905
5914
|
display: none;
|
|
5906
5915
|
}
|
|
5916
|
+
.laptop\:aspect-\[1\/1\] {
|
|
5917
|
+
aspect-ratio: 1/1;
|
|
5918
|
+
}
|
|
5907
5919
|
.laptop\:aspect-\[1024\/384\] {
|
|
5908
5920
|
aspect-ratio: 1024/384;
|
|
5909
5921
|
}
|
|
@@ -5922,6 +5934,12 @@ video {
|
|
|
5922
5934
|
.laptop\:aspect-\[1920\/930\] {
|
|
5923
5935
|
aspect-ratio: 1920/930;
|
|
5924
5936
|
}
|
|
5937
|
+
.laptop\:aspect-\[2\/1\] {
|
|
5938
|
+
aspect-ratio: 2/1;
|
|
5939
|
+
}
|
|
5940
|
+
.laptop\:aspect-\[256\/153\] {
|
|
5941
|
+
aspect-ratio: 256/153;
|
|
5942
|
+
}
|
|
5925
5943
|
.laptop\:aspect-\[288\/192\] {
|
|
5926
5944
|
aspect-ratio: 288/192;
|
|
5927
5945
|
}
|
|
@@ -6120,6 +6138,9 @@ video {
|
|
|
6120
6138
|
.laptop\:max-h-\[320px\] {
|
|
6121
6139
|
max-height: 320px;
|
|
6122
6140
|
}
|
|
6141
|
+
.laptop\:min-h-0 {
|
|
6142
|
+
min-height: 0px;
|
|
6143
|
+
}
|
|
6123
6144
|
.laptop\:min-h-\[280px\] {
|
|
6124
6145
|
min-height: 280px;
|
|
6125
6146
|
}
|
|
@@ -6192,6 +6213,9 @@ video {
|
|
|
6192
6213
|
.laptop\:w-\[calc\(50\%-6px\)\] {
|
|
6193
6214
|
width: calc(50% - 6px);
|
|
6194
6215
|
}
|
|
6216
|
+
.laptop\:w-\[unset\] {
|
|
6217
|
+
width: unset;
|
|
6218
|
+
}
|
|
6195
6219
|
.laptop\:w-auto {
|
|
6196
6220
|
width: auto;
|
|
6197
6221
|
}
|
|
@@ -6303,6 +6327,9 @@ video {
|
|
|
6303
6327
|
.laptop\:grid-cols-10 {
|
|
6304
6328
|
grid-template-columns: repeat(10, minmax(0, 1fr));
|
|
6305
6329
|
}
|
|
6330
|
+
.laptop\:grid-cols-12 {
|
|
6331
|
+
grid-template-columns: repeat(12, minmax(0, 1fr));
|
|
6332
|
+
}
|
|
6306
6333
|
.laptop\:grid-cols-2 {
|
|
6307
6334
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
6308
6335
|
}
|
|
@@ -6875,6 +6902,15 @@ video {
|
|
|
6875
6902
|
.desktop\:top-\[32px\] {
|
|
6876
6903
|
top: 32px;
|
|
6877
6904
|
}
|
|
6905
|
+
.desktop\:col-span-4 {
|
|
6906
|
+
grid-column: span 4 / span 4;
|
|
6907
|
+
}
|
|
6908
|
+
.desktop\:col-span-5 {
|
|
6909
|
+
grid-column: span 5 / span 5;
|
|
6910
|
+
}
|
|
6911
|
+
.desktop\:col-span-7 {
|
|
6912
|
+
grid-column: span 7 / span 7;
|
|
6913
|
+
}
|
|
6878
6914
|
.desktop\:my-\[112px\] {
|
|
6879
6915
|
margin-top: 112px;
|
|
6880
6916
|
margin-bottom: 112px;
|
|
@@ -6960,6 +6996,12 @@ video {
|
|
|
6960
6996
|
.desktop\:aspect-\[1440\/700\] {
|
|
6961
6997
|
aspect-ratio: 1440/700;
|
|
6962
6998
|
}
|
|
6999
|
+
.desktop\:aspect-\[16\/15\] {
|
|
7000
|
+
aspect-ratio: 16/15;
|
|
7001
|
+
}
|
|
7002
|
+
.desktop\:aspect-\[19\/9\] {
|
|
7003
|
+
aspect-ratio: 19/9;
|
|
7004
|
+
}
|
|
6963
7005
|
.desktop\:aspect-\[1920\/480\] {
|
|
6964
7006
|
aspect-ratio: 1920/480;
|
|
6965
7007
|
}
|
|
@@ -6969,6 +7011,9 @@ video {
|
|
|
6969
7011
|
.desktop\:aspect-\[1920\/930\] {
|
|
6970
7012
|
aspect-ratio: 1920/930;
|
|
6971
7013
|
}
|
|
7014
|
+
.desktop\:aspect-\[379\/192\] {
|
|
7015
|
+
aspect-ratio: 379/192;
|
|
7016
|
+
}
|
|
6972
7017
|
.desktop\:aspect-\[427\/256\] {
|
|
6973
7018
|
aspect-ratio: 427/256;
|
|
6974
7019
|
}
|
|
@@ -7557,6 +7602,15 @@ video {
|
|
|
7557
7602
|
.lg-desktop\:top-\[192px\] {
|
|
7558
7603
|
top: 192px;
|
|
7559
7604
|
}
|
|
7605
|
+
.lg-desktop\:col-span-4 {
|
|
7606
|
+
grid-column: span 4 / span 4;
|
|
7607
|
+
}
|
|
7608
|
+
.lg-desktop\:col-span-5 {
|
|
7609
|
+
grid-column: span 5 / span 5;
|
|
7610
|
+
}
|
|
7611
|
+
.lg-desktop\:col-span-7 {
|
|
7612
|
+
grid-column: span 7 / span 7;
|
|
7613
|
+
}
|
|
7560
7614
|
.lg-desktop\:my-\[128px\] {
|
|
7561
7615
|
margin-top: 128px;
|
|
7562
7616
|
margin-bottom: 128px;
|
|
@@ -7633,6 +7687,9 @@ video {
|
|
|
7633
7687
|
.lg-desktop\:aspect-\[1920\/930\] {
|
|
7634
7688
|
aspect-ratio: 1920/930;
|
|
7635
7689
|
}
|
|
7690
|
+
.lg-desktop\:aspect-\[480\/248\] {
|
|
7691
|
+
aspect-ratio: 480/248;
|
|
7692
|
+
}
|
|
7636
7693
|
.lg-desktop\:aspect-\[543\/320\] {
|
|
7637
7694
|
aspect-ratio: 543/320;
|
|
7638
7695
|
}
|
|
@@ -7642,6 +7699,12 @@ video {
|
|
|
7642
7699
|
.lg-desktop\:aspect-\[644\/320\] {
|
|
7643
7700
|
aspect-ratio: 644/320;
|
|
7644
7701
|
}
|
|
7702
|
+
.lg-desktop\:aspect-\[7\/3\] {
|
|
7703
|
+
aspect-ratio: 7/3;
|
|
7704
|
+
}
|
|
7705
|
+
.lg-desktop\:aspect-\[8\/7\] {
|
|
7706
|
+
aspect-ratio: 8/7;
|
|
7707
|
+
}
|
|
7645
7708
|
.lg-desktop\:aspect-\[824\/320\] {
|
|
7646
7709
|
aspect-ratio: 824/320;
|
|
7647
7710
|
}
|