@anker-in/campaign-ui 0.2.11-beta.2 → 0.2.11-beta.3

package/src/components/credits/creditsRedeemList/AddressForm/CountrySelect.tsx

@@ -2,7 +2,8 @@ import { Picture } from '@anker-in/headless-ui'
 import useClickOutside from '../../context/hooks/useClickOutside'
 import classNames from 'classnames'
 import { useEffect, useState } from 'react'
-import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+import { useHeadlessContext } from '@anker-in/lib'
+import { ROUNDED_BRANDS } from '../../../../constants'
 
 interface Country {
   id: string

package/src/components/credits/creditsRedeemList/AddressForm/StateSelect.tsx

@@ -2,7 +2,8 @@ import classNames from 'classnames'
 import { Picture } from '@anker-in/headless-ui'
 import { useEffect, useMemo, useState } from 'react'
 import useClickOutside from '../../context/hooks/useClickOutside'
-import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+import { useHeadlessContext } from '@anker-in/lib'
+import { ROUNDED_BRANDS } from '../../../../constants'
 
 interface StateSelectProps {
   states: { code: string; id: string; name: string }[]

package/src/components/credits/creditsRedeemList/AddressForm/index.tsx

@@ -7,8 +7,9 @@ import { Input } from './Input'
 import { StateSelect } from './StateSelect'
 import { ALPC_COUNTRY_MAP } from '../../context/const'
 import { useCreditsContext } from '../../context/provider'
-import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+import { useHeadlessContext } from '@anker-in/lib'
 import { AddressFormProps } from './type'
+import { ROUNDED_BRANDS } from '../../../../constants'
 
 export const AddressForm = ({ countries, countriesLoading, form, validate, errors, onChange }: AddressFormProps) => {
   const { profile, customer } = useCreditsContext()

package/src/components/credits/creditsRedeemList/CreditsRedeemList.tsx

@@ -7,9 +7,10 @@ import RedeemProductModal from './RedeemProductModal'
 import { useCreditsContext } from '../context/provider'
 import useRedeemableList from '../context/hooks/useRedeemableList'
 import { AlpcConsumeType, AlpcErrorCode } from '../context/const'
-import { useHeadlessContext, useProductsByHandles, gaTrack, ROUNDED_BRANDS } from '@anker-in/lib'
+import { useHeadlessContext, useProductsByHandles, gaTrack } from '@anker-in/lib'
 import type { RedeemableItem as RedeemableItemType } from '../type'
 import { RedeemableItem } from './RedeemableItem'
+import { ROUNDED_BRANDS } from '../../../constants'
 import RulesModal from '../modal/rulesModal'
 import { CreditsRedeemListCopy } from './type'
 import { useRegistration } from '../../../components/registration'

package/src/components/credits/creditsRedeemList/RedeemProductModal/Address.tsx

@@ -1,11 +1,12 @@
 import { Button, Text } from '@anker-in/headless-ui'
 import classNames from 'classnames'
 import { AddressForm } from '../AddressForm'
-import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+import { useHeadlessContext } from '@anker-in/lib'
 import type { RedeemableItem as RedeemableItemType } from '../../type'
 import { CreditsRedeemListCopy } from '../type'
 import { ProductInfo } from './ProductInfo'
 import useCountries from '../../context/hooks/useCountries'
+import { ROUNDED_BRANDS } from '../../../../constants'
 
 type AddressProps = {
   copy: CreditsRedeemListCopy

package/src/components/credits/creditsRedeemList/RedeemProductModal/Success.tsx

@@ -3,7 +3,8 @@ import classNames from 'classnames'
 import type { RedeemableItem as RedeemableItemType } from '../../type'
 import { CreditsRedeemListCopy } from '../type'
 import { ProductInfo } from './ProductInfo'
-import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+import { useHeadlessContext } from '@anker-in/lib'
+import { ROUNDED_BRANDS } from '../../../../constants'
 
 type SuccessProps = {
   copy: CreditsRedeemListCopy

package/src/components/credits/creditsRedeemList/RedeemableItem.tsx

@@ -8,8 +8,9 @@ import type { RedeemableItem as RedeemableItemType } from '../type'
 import { AlpcConsumeType, ConsumeType } from '../context/const'
 import { numberFormat } from '../context/utils'
 import type { CreditsRedeemListCopy } from './type'
-import { gaTrack, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+import { gaTrack, useHeadlessContext } from '@anker-in/lib'
 import { NoneProductValue } from './NonProductValue'
+import { ROUNDED_BRANDS } from '../../../constants'
 
 export function RedeemableItem({
   copy,

package/src/components/credits/creditsWaysToGetCredits/CreditsWaysToGetCredits.tsx

@@ -6,10 +6,11 @@ import { useMemo, useState } from 'react'
 import { TaskType, type CreditsWaysToGetCreditsProps } from './type'
 import { useActions } from './useActions'
 import { useCreditsContext } from '../context/provider'
-import { classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
 import { useRegistration } from '../../registration'
 import { CreditsUploadReceiptModal } from '../modal/creditsUploadReceiptModal'
 import { CreditsSubscribeModal } from '../modal/subscribeModal'
+import { ROUNDED_BRANDS } from '../../../constants'
 
 export const CreditsWaysToGetCredits = ({ copy, classNames, id }: CreditsWaysToGetCreditsProps & { id?: string }) => {
   const [showMore, setShowMore] = useState(false)
@@ -147,13 +148,23 @@ export const CreditsWaysToGetCredits = ({ copy, classNames, id }: CreditsWaysToG
                 )}
               >
                 <div>
-                  <Heading as="h4" html={item.title} size={2} className="text-pretty" />
+                  <Text
+                    as="p"
+                    html={item.title}
+                    size={2}
+                    className="text-pretty text-[24px] font-bold xl:text-[20px]"
+                  />
                   <div className="mt-[4px] flex items-center">
                     <Picture
                       className="size-[24px] xl:size-[18px] [&_path]:size-full"
                       source="https://cdn.shopify.com/s/files/1/0511/6346/3874/files/20250902-153351.png?v=1756798450"
                     />
-                    <Text as="p" html={item.credits} size={2} className="ml-[4px] mt-[6px] lg-desktop:text-[18px]" />
+                    <Text
+                      as="p"
+                      html={item.credits}
+                      size={2}
+                      className="ml-[4px] mt-[6px] text-[18px] l:text-[14px]"
+                    />
                   </div>
                 </div>
 

package/src/components/credits/modal/MyRewardsModal.tsx

@@ -9,7 +9,8 @@ import { CreditsModalContainer, type ModalContainerProps } from './modalContaine
 import Tip from './tip'
 import LoadingDots from './loadingDots'
 import useMyRewards from '../context/hooks/useMyRewards'
-import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+import { useHeadlessContext } from '@anker-in/lib'
+import { ROUNDED_BRANDS } from '../../../constants'
 
 export interface MyRewardsMetafields {
   title: string

package/src/components/credits/modal/activitiesModal.tsx

@@ -4,10 +4,11 @@ import { CreditType, DTC_TASK_TYPE, TaskSubType, TaskType } from '../context/con
 import useActivities from '../context/hooks/useActivities'
 import type { Task } from '../context/response'
 import { CreditsModalContainer, type ModalContainerProps } from './modalContainer'
-import { classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
 import { Tabs, TabsList, TabsTrigger } from '@anker-in/headless-ui'
 import LoadingDots from './loadingDots'
 import { Picture, Text } from '@anker-in/headless-ui'
+import { ROUNDED_BRANDS } from '../../../constants'
 import dayjs from 'dayjs'
 
 export interface MyActivitiesMetafields {

package/src/components/credits/modal/creditsUploadReceiptModal.tsx

@@ -2,8 +2,9 @@ import { Button, Heading, Text } from '@anker-in/headless-ui'
 import { useCallback, useState } from 'react'
 import { CreditsModalContainer } from './modalContainer'
 import { useUploadReceipt } from '../context/hooks/useUploadReceipt'
-import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+import { useHeadlessContext } from '@anker-in/lib'
 import classNames from 'classnames'
+import { ROUNDED_BRANDS } from '../../../constants'
 
 export type ReceiptCopy = {
   title: string

package/src/components/credits/modal/modalContainer.tsx

@@ -1,6 +1,7 @@
-import { classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
 import { useEffect, useState, type UIEvent } from 'react'
 import ReactModal from 'react-modal'
+import { ROUNDED_BRANDS } from '../../../constants'
 
 export type ModalContainerProps = {
   overlayClassName?: string

package/src/components/credits/modal/subscribeModal.tsx

@@ -1,11 +1,12 @@
 import { useCallback, useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 import { Button, Checkbox, Picture, Text } from '@anker-in/headless-ui'
-import { classNames, fetcher, gaTrack, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+import { classNames, fetcher, gaTrack, useHeadlessContext } from '@anker-in/lib'
 import Cookies from 'js-cookie'
 import { parse } from 'query-string'
 import sha256 from 'crypto-js/sha256'
 import { useCreditsContext } from '../context/provider'
+import { ROUNDED_BRANDS } from '../../../constants'
 import { emailValidate } from '../context/utils'
 import { CreditsModalContainer, type ModalContainerProps } from './modalContainer'
 

package/src/components/credits/modal/tip.tsx

@@ -1,6 +1,7 @@
-import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+import { useHeadlessContext } from '@anker-in/lib'
 import classNames from 'classnames'
 import { useState } from 'react'
+import { ROUNDED_BRANDS } from '../../../constants'
 
 function Tip({ info, index }: { info: string; index: number }) {
   const [show, setShow] = useState(false)

package/src/components/index.ts

@@ -9,6 +9,6 @@ export {
   useCopilotReadable,
 } from './chat/utils'
 
-export * from './credits/index'
+export * from './credits/index.js'
 
-export * from './registration/index'
+export * from './registration/index.js'

package/src/components/registration/authCodeActivate/index.tsx

@@ -6,13 +6,13 @@ import {
   useHeadlessContext,
   useEmailValidation,
   useCountDown,
-  ROUNDED_BRANDS,
 } from '@anker-in/lib'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { Message } from './Message'
 import { AuthCodeActivateProps } from './type'
 import { useRegistration } from '../context'
 import { RegistrationModalContainer } from '../modalContainer'
+import { ROUNDED_BRANDS } from '../../../constants'
 
 export const AuthCodeActivate: React.FC<AuthCodeActivateProps> = ({ copy }) => {
   const { locale, brand } = useHeadlessContext()

package/src/components/registration/modalContainer.tsx

@@ -1,6 +1,7 @@
-import { classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
 import { useEffect, useState, type UIEvent } from 'react'
 import ReactModal from 'react-modal'
+import { ROUNDED_BRANDS } from '../../constants'
 
 export type ModalContainerProps = {
   overlayClassName?: string

package/src/constants.ts

@@ -0,0 +1 @@
+export const ROUNDED_BRANDS = ['eufy', 'soundcore']

package/src/index.ts

@@ -1,2 +1,3 @@
-export * from './components'
-export * from './templates'
+export * from './components/index.js'
+export * from './templates/index.js'
+export * from './constants.js'

package/dist/cjs/components/credits/creditsBenefits/BenefitItem.js

@@ -1,2 +0,0 @@
-"use strict";var v=Object.create;var r=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var C=(e,o)=>{for(var n in o)r(e,n,{get:o[n],enumerable:!0})},b=(e,o,n,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of N(o))!D.call(e,l)&&l!==n&&r(e,l,{get:()=>o[l],enumerable:!(a=F(o,l))||a.enumerable});return e};var k=(e,o,n)=>(n=e!=null?v(h(e)):{},b(o||!e||!e.__esModule?r(n,"default",{value:e,enumerable:!0}):n,e)),y=e=>b(r({},"__esModule",{value:!0}),e);var w={};C(w,{default:()=>I});module.exports=y(w);var t=require("react/jsx-runtime"),s=require("@anker-in/headless-ui"),i=require("@anker-in/lib"),f=k(require("./IconInfo"));const z=({item:e,handleClick:o,isNoteActive:n,index:a,bigIcon:l,cardBgColor:x,cardBorderColor:c})=>{const{brand:u}=(0,i.useHeadlessContext)(),m=i.ROUNDED_BRANDS.includes(u),g=l?"mb-[16px] size-[64px] xl-xxl:size-[54px] xl:size-[48px] md:absolute md:bottom-[16px] md:right-[16px] md:mb-0":"mb-[16px] size-[31px] md:absolute md:bottom-[16px] md:right-[16px] md:mb-0";console.log("cardBgColor in BenefitItem",x);const d={};return x?d.background=x:d.background="linear-gradient(119.61deg, #FAFAFA 38.58%, #FFFFFF 63.73%, #F9FCFF 89.37%)",c&&(d.borderColor=c),(0,t.jsx)("div",{className:(0,i.classNames)("relative flex-1 flex flex-col rounded-[16px] border border-white px-[24px] pb-[26px] pt-[24px] md:min-h-[180px] md:p-[16px]",!m&&"rounded-none"),style:d,children:(0,t.jsxs)("div",{className:"flex flex-col",children:[(0,t.jsx)(s.Picture,{className:g,alt:e.icon?.alt,source:e.icon?.url}),(0,t.jsxs)("div",{className:"flex items-center",children:[(0,t.jsx)(s.Heading,{html:e.text,size:"2",className:"break-all"}),e.note&&(0,t.jsxs)("div",{role:"button",tabIndex:0,onKeyDown:p=>{(p.key==="Enter"||p.key===" ")&&p.preventDefault()},className:"relative mb-1 ml-[4px]",onClick:()=>o({item:e,index:a}),children:[(0,t.jsx)(f.default,{}),(0,t.jsx)("div",{className:(0,i.classNames)("absolute -bottom-[12px] left-[32px] z-10 w-[356px] -translate-x-full translate-y-full md:w-[276px]",n?"block":"hidden"),children:(0,t.jsxs)("div",{className:(0,i.classNames)("relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow",!m&&"rounded-none"),children:[(0,t.jsx)(s.Text,{as:"p",size:"2",html:e.note,className:"desktop:text-[18px]"}),(0,t.jsx)("div",{className:(0,i.classNames)("absolute -top-[10px] right-[9px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]",!m&&"rounded-none")})]})})]})]}),e.tag&&(0,t.jsx)(s.Text,{as:"div",html:e.tag,className:"mt-[2px] text-[16px] font-bold text-[#6D6D6F]"})]})})};var I=z;
-//# sourceMappingURL=BenefitItem.js.map

package/dist/cjs/components/credits/creditsBenefits/BenefitItem.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../src/components/credits/creditsBenefits/BenefitItem.tsx"],
-  "sourcesContent": ["import { Heading, Picture, Text } from '@anker-in/headless-ui'\nimport { classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'\nimport IconInfo from './IconInfo'\n\nexport interface BenefitItemCopy {\n  icon: {\n    alt: string\n    url: string\n  }\n  text: string\n  note?: string\n  tag?: string\n}\nconst BenefitItem = ({\n  item,\n  handleClick,\n  isNoteActive,\n  index,\n  bigIcon,\n  cardBgColor,\n  cardBorderColor,\n}: {\n  item: BenefitItemCopy\n  handleClick: ({ item, index }: { item: BenefitItemCopy; index: number }) => void\n  isNoteActive: boolean\n  index: number\n  bigIcon?: boolean\n  cardBgColor?: string\n  cardBorderColor?: string\n}) => {\n  const { brand } = useHeadlessContext()\n  const rounded = ROUNDED_BRANDS.includes(brand)\n\n  // \u6839\u636E bigIcon \u8BBE\u7F6E\u4E0D\u540C\u5C4F\u5E55\u4E0B\u7684\u56FE\u6807\u5927\u5C0F\n  // \u5C3A\u5BF8\uFF1A\u22651921px=64px, 1441-1920px=54px, \u22641440px=48px\n  const iconSizeClass = bigIcon\n    ? 'mb-[16px] size-[64px] xl-xxl:size-[54px] xl:size-[48px] md:absolute md:bottom-[16px] md:right-[16px] md:mb-0'\n    : 'mb-[16px] size-[31px] md:absolute md:bottom-[16px] md:right-[16px] md:mb-0'\n\n  console.log('cardBgColor in BenefitItem', cardBgColor)\n  // \u80CC\u666F\u8272\u548C\u8FB9\u6846\u8272\u5904\u7406\n  const cardStyle: React.CSSProperties = {}\n  if (cardBgColor) {\n    cardStyle.background = cardBgColor\n  } else {\n    cardStyle.background = 'linear-gradient(119.61deg, #FAFAFA 38.58%, #FFFFFF 63.73%, #F9FCFF 89.37%)'\n  }\n  if (cardBorderColor) {\n    cardStyle.borderColor = cardBorderColor\n  }\n\n  return (\n    <div\n      className={cn(\n        'relative flex-1 flex flex-col rounded-[16px] border border-white px-[24px] pb-[26px] pt-[24px] md:min-h-[180px] md:p-[16px]',\n        !rounded && 'rounded-none'\n      )}\n      style={cardStyle}\n    >\n      <div className=\"flex flex-col\">\n        <Picture className={iconSizeClass} alt={item.icon?.alt} source={item.icon?.url} />\n        <div className=\"flex items-center\">\n          <Heading html={item.text} size=\"2\" className=\"break-all\" />\n          {item.note && (\n            <div\n              role=\"button\"\n              tabIndex={0}\n              onKeyDown={e => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                  e.preventDefault()\n                }\n              }}\n              className=\"relative mb-1 ml-[4px]\"\n              onClick={() => handleClick({ item, index })}\n            >\n              <IconInfo />\n              <div\n                className={cn(\n                  'absolute -bottom-[12px] left-[32px] z-10 w-[356px] -translate-x-full translate-y-full md:w-[276px]',\n                  isNoteActive ? 'block' : 'hidden'\n                )}\n              >\n                <div\n                  className={cn(\n                    'relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow',\n                    !rounded && 'rounded-none'\n                  )}\n                >\n                  <Text as=\"p\" size=\"2\" html={item.note} className=\"desktop:text-[18px]\" />\n                  <div\n                    className={cn(\n                      'absolute -top-[10px] right-[9px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]',\n                      !rounded && 'rounded-none'\n                    )}\n                  />\n                </div>\n              </div>\n            </div>\n          )}\n        </div>\n        {item.tag && <Text as=\"div\" html={item.tag} className=\"mt-[2px] text-[16px] font-bold text-[#6D6D6F]\" />}\n      </div>\n    </div>\n  )\n}\n\nexport default BenefitItem\n"],
-  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA4DQ,IAAAI,EAAA,6BA5DRC,EAAuC,iCACvCC,EAAqE,yBACrEC,EAAqB,yBAWrB,MAAMC,EAAc,CAAC,CACnB,KAAAC,EACA,YAAAC,EACA,aAAAC,EACA,MAAAC,EACA,QAAAC,EACA,YAAAC,EACA,gBAAAC,CACF,IAQM,CACJ,KAAM,CAAE,MAAAC,CAAM,KAAI,sBAAmB,EAC/BC,EAAU,iBAAe,SAASD,CAAK,EAIvCE,EAAgBL,EAClB,+GACA,6EAEJ,QAAQ,IAAI,6BAA8BC,CAAW,EAErD,MAAMK,EAAiC,CAAC,EACxC,OAAIL,EACFK,EAAU,WAAaL,EAEvBK,EAAU,WAAa,6EAErBJ,IACFI,EAAU,YAAcJ,MAIxB,OAAC,OACC,aAAW,EAAAK,YACT,8HACA,CAACH,GAAW,cACd,EACA,MAAOE,EAEP,oBAAC,OAAI,UAAU,gBACb,oBAAC,WAAQ,UAAWD,EAAe,IAAKT,EAAK,MAAM,IAAK,OAAQA,EAAK,MAAM,IAAK,KAChF,QAAC,OAAI,UAAU,oBACb,oBAAC,WAAQ,KAAMA,EAAK,KAAM,KAAK,IAAI,UAAU,YAAY,EACxDA,EAAK,SACJ,QAAC,OACC,KAAK,SACL,SAAU,EACV,UAAWY,GAAK,EACVA,EAAE,MAAQ,SAAWA,EAAE,MAAQ,MACjCA,EAAE,eAAe,CAErB,EACA,UAAU,yBACV,QAAS,IAAMX,EAAY,CAAE,KAAAD,EAAM,MAAAG,CAAM,CAAC,EAE1C,oBAAC,EAAAU,QAAA,EAAS,KACV,OAAC,OACC,aAAW,EAAAF,YACT,qGACAT,EAAe,QAAU,QAC3B,EAEA,oBAAC,OACC,aAAW,EAAAS,YACT,0FACA,CAACH,GAAW,cACd,EAEA,oBAAC,QAAK,GAAG,IAAI,KAAK,IAAI,KAAMR,EAAK,KAAM,UAAU,sBAAsB,KACvE,OAAC,OACC,aAAW,EAAAW,YACT,mHACA,CAACH,GAAW,cACd,EACF,GACF,EACF,GACF,GAEJ,EACCR,EAAK,QAAO,OAAC,QAAK,GAAG,MAAM,KAAMA,EAAK,IAAK,UAAU,gDAAgD,GACxG,EACF,CAEJ,EAEA,IAAOP,EAAQM",
-  "names": ["BenefitItem_exports", "__export", "BenefitItem_default", "__toCommonJS", "import_jsx_runtime", "import_headless_ui", "import_lib", "import_IconInfo", "BenefitItem", "item", "handleClick", "isNoteActive", "index", "bigIcon", "cardBgColor", "cardBorderColor", "brand", "rounded", "iconSizeClass", "cardStyle", "cn", "e", "IconInfo"]
-}

package/dist/esm/components/credits/creditsBenefits/BenefitItem.js

@@ -1,2 +0,0 @@
-import{jsx as t,jsxs as i}from"react/jsx-runtime";import{Heading as u,Picture as g,Text as r}from"@anker-in/headless-ui";import{classNames as n,useHeadlessContext as v,ROUNDED_BRANDS as F}from"@anker-in/lib";import N from"./IconInfo";const h=({item:e,handleClick:x,isNoteActive:m,index:p,bigIcon:c,cardBgColor:l,cardBorderColor:d})=>{const{brand:b}=v(),s=F.includes(b),f=c?"mb-[16px] size-[64px] xl-xxl:size-[54px] xl:size-[48px] md:absolute md:bottom-[16px] md:right-[16px] md:mb-0":"mb-[16px] size-[31px] md:absolute md:bottom-[16px] md:right-[16px] md:mb-0";console.log("cardBgColor in BenefitItem",l);const o={};return l?o.background=l:o.background="linear-gradient(119.61deg, #FAFAFA 38.58%, #FFFFFF 63.73%, #F9FCFF 89.37%)",d&&(o.borderColor=d),t("div",{className:n("relative flex-1 flex flex-col rounded-[16px] border border-white px-[24px] pb-[26px] pt-[24px] md:min-h-[180px] md:p-[16px]",!s&&"rounded-none"),style:o,children:i("div",{className:"flex flex-col",children:[t(g,{className:f,alt:e.icon?.alt,source:e.icon?.url}),i("div",{className:"flex items-center",children:[t(u,{html:e.text,size:"2",className:"break-all"}),e.note&&i("div",{role:"button",tabIndex:0,onKeyDown:a=>{(a.key==="Enter"||a.key===" ")&&a.preventDefault()},className:"relative mb-1 ml-[4px]",onClick:()=>x({item:e,index:p}),children:[t(N,{}),t("div",{className:n("absolute -bottom-[12px] left-[32px] z-10 w-[356px] -translate-x-full translate-y-full md:w-[276px]",m?"block":"hidden"),children:i("div",{className:n("relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow",!s&&"rounded-none"),children:[t(r,{as:"p",size:"2",html:e.note,className:"desktop:text-[18px]"}),t("div",{className:n("absolute -top-[10px] right-[9px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]",!s&&"rounded-none")})]})})]})]}),e.tag&&t(r,{as:"div",html:e.tag,className:"mt-[2px] text-[16px] font-bold text-[#6D6D6F]"})]})})};var y=h;export{y as default};
-//# sourceMappingURL=BenefitItem.js.map

package/dist/esm/components/credits/creditsBenefits/BenefitItem.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../src/components/credits/creditsBenefits/BenefitItem.tsx"],
-  "sourcesContent": ["import { Heading, Picture, Text } from '@anker-in/headless-ui'\nimport { classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'\nimport IconInfo from './IconInfo'\n\nexport interface BenefitItemCopy {\n  icon: {\n    alt: string\n    url: string\n  }\n  text: string\n  note?: string\n  tag?: string\n}\nconst BenefitItem = ({\n  item,\n  handleClick,\n  isNoteActive,\n  index,\n  bigIcon,\n  cardBgColor,\n  cardBorderColor,\n}: {\n  item: BenefitItemCopy\n  handleClick: ({ item, index }: { item: BenefitItemCopy; index: number }) => void\n  isNoteActive: boolean\n  index: number\n  bigIcon?: boolean\n  cardBgColor?: string\n  cardBorderColor?: string\n}) => {\n  const { brand } = useHeadlessContext()\n  const rounded = ROUNDED_BRANDS.includes(brand)\n\n  // \u6839\u636E bigIcon \u8BBE\u7F6E\u4E0D\u540C\u5C4F\u5E55\u4E0B\u7684\u56FE\u6807\u5927\u5C0F\n  // \u5C3A\u5BF8\uFF1A\u22651921px=64px, 1441-1920px=54px, \u22641440px=48px\n  const iconSizeClass = bigIcon\n    ? 'mb-[16px] size-[64px] xl-xxl:size-[54px] xl:size-[48px] md:absolute md:bottom-[16px] md:right-[16px] md:mb-0'\n    : 'mb-[16px] size-[31px] md:absolute md:bottom-[16px] md:right-[16px] md:mb-0'\n\n  console.log('cardBgColor in BenefitItem', cardBgColor)\n  // \u80CC\u666F\u8272\u548C\u8FB9\u6846\u8272\u5904\u7406\n  const cardStyle: React.CSSProperties = {}\n  if (cardBgColor) {\n    cardStyle.background = cardBgColor\n  } else {\n    cardStyle.background = 'linear-gradient(119.61deg, #FAFAFA 38.58%, #FFFFFF 63.73%, #F9FCFF 89.37%)'\n  }\n  if (cardBorderColor) {\n    cardStyle.borderColor = cardBorderColor\n  }\n\n  return (\n    <div\n      className={cn(\n        'relative flex-1 flex flex-col rounded-[16px] border border-white px-[24px] pb-[26px] pt-[24px] md:min-h-[180px] md:p-[16px]',\n        !rounded && 'rounded-none'\n      )}\n      style={cardStyle}\n    >\n      <div className=\"flex flex-col\">\n        <Picture className={iconSizeClass} alt={item.icon?.alt} source={item.icon?.url} />\n        <div className=\"flex items-center\">\n          <Heading html={item.text} size=\"2\" className=\"break-all\" />\n          {item.note && (\n            <div\n              role=\"button\"\n              tabIndex={0}\n              onKeyDown={e => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                  e.preventDefault()\n                }\n              }}\n              className=\"relative mb-1 ml-[4px]\"\n              onClick={() => handleClick({ item, index })}\n            >\n              <IconInfo />\n              <div\n                className={cn(\n                  'absolute -bottom-[12px] left-[32px] z-10 w-[356px] -translate-x-full translate-y-full md:w-[276px]',\n                  isNoteActive ? 'block' : 'hidden'\n                )}\n              >\n                <div\n                  className={cn(\n                    'relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow',\n                    !rounded && 'rounded-none'\n                  )}\n                >\n                  <Text as=\"p\" size=\"2\" html={item.note} className=\"desktop:text-[18px]\" />\n                  <div\n                    className={cn(\n                      'absolute -top-[10px] right-[9px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]',\n                      !rounded && 'rounded-none'\n                    )}\n                  />\n                </div>\n              </div>\n            </div>\n          )}\n        </div>\n        {item.tag && <Text as=\"div\" html={item.tag} className=\"mt-[2px] text-[16px] font-bold text-[#6D6D6F]\" />}\n      </div>\n    </div>\n  )\n}\n\nexport default BenefitItem\n"],
-  "mappings": "AA4DQ,cAAAA,EAsBQ,QAAAC,MAtBR,oBA5DR,OAAS,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,wBACvC,OAAS,cAAcC,EAAI,sBAAAC,EAAoB,kBAAAC,MAAsB,gBACrE,OAAOC,MAAc,aAWrB,MAAMC,EAAc,CAAC,CACnB,KAAAC,EACA,YAAAC,EACA,aAAAC,EACA,MAAAC,EACA,QAAAC,EACA,YAAAC,EACA,gBAAAC,CACF,IAQM,CACJ,KAAM,CAAE,MAAAC,CAAM,EAAIX,EAAmB,EAC/BY,EAAUX,EAAe,SAASU,CAAK,EAIvCE,EAAgBL,EAClB,+GACA,6EAEJ,QAAQ,IAAI,6BAA8BC,CAAW,EAErD,MAAMK,EAAiC,CAAC,EACxC,OAAIL,EACFK,EAAU,WAAaL,EAEvBK,EAAU,WAAa,6EAErBJ,IACFI,EAAU,YAAcJ,GAIxBhB,EAAC,OACC,UAAWK,EACT,8HACA,CAACa,GAAW,cACd,EACA,MAAOE,EAEP,SAAAnB,EAAC,OAAI,UAAU,gBACb,UAAAD,EAACG,EAAA,CAAQ,UAAWgB,EAAe,IAAKT,EAAK,MAAM,IAAK,OAAQA,EAAK,MAAM,IAAK,EAChFT,EAAC,OAAI,UAAU,oBACb,UAAAD,EAACE,EAAA,CAAQ,KAAMQ,EAAK,KAAM,KAAK,IAAI,UAAU,YAAY,EACxDA,EAAK,MACJT,EAAC,OACC,KAAK,SACL,SAAU,EACV,UAAWoB,GAAK,EACVA,EAAE,MAAQ,SAAWA,EAAE,MAAQ,MACjCA,EAAE,eAAe,CAErB,EACA,UAAU,yBACV,QAAS,IAAMV,EAAY,CAAE,KAAAD,EAAM,MAAAG,CAAM,CAAC,EAE1C,UAAAb,EAACQ,EAAA,EAAS,EACVR,EAAC,OACC,UAAWK,EACT,qGACAO,EAAe,QAAU,QAC3B,EAEA,SAAAX,EAAC,OACC,UAAWI,EACT,0FACA,CAACa,GAAW,cACd,EAEA,UAAAlB,EAACI,EAAA,CAAK,GAAG,IAAI,KAAK,IAAI,KAAMM,EAAK,KAAM,UAAU,sBAAsB,EACvEV,EAAC,OACC,UAAWK,EACT,mHACA,CAACa,GAAW,cACd,EACF,GACF,EACF,GACF,GAEJ,EACCR,EAAK,KAAOV,EAACI,EAAA,CAAK,GAAG,MAAM,KAAMM,EAAK,IAAK,UAAU,gDAAgD,GACxG,EACF,CAEJ,EAEA,IAAOY,EAAQb",
-  "names": ["jsx", "jsxs", "Heading", "Picture", "Text", "cn", "useHeadlessContext", "ROUNDED_BRANDS", "IconInfo", "BenefitItem", "item", "handleClick", "isNoteActive", "index", "bigIcon", "cardBgColor", "cardBorderColor", "brand", "rounded", "iconSizeClass", "cardStyle", "e", "BenefitItem_default"]
-}