@anker-in/headless-ui 0.0.27-alpha.124 → 0.0.27-alpha.126
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/BrandEquity/BrandEquity.js +1 -1
- package/dist/cjs/biz-components/BrandEquity/BrandEquity.js.map +3 -3
- package/dist/cjs/biz-components/BrandEquity/types.d.ts +2 -2
- package/dist/cjs/biz-components/BrandEquity/types.js +1 -1
- package/dist/cjs/biz-components/BrandEquity/types.js.map +1 -1
- package/dist/cjs/stories/brandEquity.stories.js +1 -1
- package/dist/cjs/stories/brandEquity.stories.js.map +1 -1
- package/dist/esm/biz-components/BrandEquity/BrandEquity.js +1 -1
- package/dist/esm/biz-components/BrandEquity/BrandEquity.js.map +3 -3
- package/dist/esm/biz-components/BrandEquity/types.d.ts +2 -2
- package/dist/esm/stories/brandEquity.stories.js +1 -1
- package/dist/esm/stories/brandEquity.stories.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var S=Object.create;var c=Object.defineProperty;var q=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,M=Object.prototype.hasOwnProperty;var I=(e,t)=>{for(var a in t)c(e,a,{get:t[a],enumerable:!0})},y=(e,t,a,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of E(t))!M.call(e,o)&&o!==a&&c(e,o,{get:()=>t[o],enumerable:!(i=q(t,o))||i.enumerable});return e};var P=(e,t,a)=>(a=e!=null?S(B(e)):{},y(t||!e||!e.__esModule?c(a,"default",{value:e,enumerable:!0}):a,e)),j=e=>y(c({},"__esModule",{value:!0}),e);var R={};I(R,{default:()=>z});module.exports=j(R);var r=require("react/jsx-runtime"),s=require("react"),l=require("../../helpers/utils.js"),u=P(require("../../components/picture.js")),b=require("../../shared/Styles.js"),k=require("react-responsive"),m=require("swiper/react"),p=require("swiper/modules");const D=(e,t)=>{const a=[];for(let i=0;i<e.length;i+=t)a.push(e.slice(i,i+t));return a},A=(0,s.forwardRef)(({data:{items:e=[],itemShape:t},className:a},i)=>{const[o,h]=(0,s.useState)(!1),f=(0,k.useMediaQuery)({query:"(max-width: 768px)"}),x=(0,s.useRef)(null);(0,s.useEffect)(()=>{h(f)},[f]);const w=o?D(e,3):e;return(0,r.jsx)("div",{ref:i,className:(0,l.cn)("brand-equity-wrapper w-full",a),children:o?(0,r.jsxs)(m.Swiper,{className:(0,l.cn)(a),modules:[p.FreeMode,p.Mousewheel,p.Pagination],freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,el:x.current},breakpoints:{0:{spaceBetween:12}},children:[w?.map((n,d)=>(0,r.jsx)(m.SwiperSlide,{className:"!flex flex-col gap-3",children:Array.isArray(n)&&n?.map((N,g)=>(0,r.jsx)(v,{data:N,itemShape:t,index:g},g))},"SwiperSlide"+d)),(0,r.jsx)("div",{ref:x,className:"mt-3 flex justify-center"})]}):(0,r.jsx)("div",{className:(0,l.cn)("grid grid-cols-1 gap-3","tablet:grid-cols-2","laptop:gap-4 laptop:grid-cols-10"),children:e.map((n,d)=>(0,r.jsx)(v,{data:n,itemShape:t,index:d},d))})})}),v=({data:e,itemShape:t,index:a})=>(0,r.jsxs)("div",{className:(0,l.cn)("brand-equity-item","flex w-full flex-col bg-white p-4","desktop:p-6 desktop:gap-16 gap-12","laptop:col-span-3 lg-desktop:p-8",{"laptop:col-span-4":[0,5,6,11].includes(a)},t==="round"?"rounded-2xl":"rounded-none"),children:[(0,r.jsxs)("div",{className:"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3",children:[(0,r.jsx)("h3",{className:"lg-desktop:text-[18px] text-[14px] font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]",children:e.title}),e.type==="avatar"?(0,r.jsx)("div",{className:"flex -space-x-2",children:e?.avatarList?.map((i,o)=>(0,r.jsx)("div",{className:(0,l.cn)("size-[30px] overflow-hidden rounded-full border-2 border-white","relative inline-block","lg-desktop:size-[36px]"),children:(0,r.jsx)(u.default,{source:i.avatar.url,alt:i.avatar?.alt,className:"size-full object-cover"})},o))}):(0,r.jsx)(u.default,{className:"lg-desktop:size-[36px] size-[30px] shrink-0 object-cover",source:e.icon?.url,alt:e.icon?.alt,imgClassName:"w-full h-full object-cover"})]}),(0,r.jsx)("p",{className:"lg-desktop:text-[24px] text-[20px] font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]",children:e.description})]});var z=(0,b.withStyles)(A);
|
|
2
2
|
//# sourceMappingURL=BrandEquity.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/BrandEquity/BrandEquity.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { forwardRef } from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { BrandEquityProps } from './types.js'\n\nimport type { Img } from '../../types/props.js'\n\nconst BrandEquity = forwardRef<HTMLDivElement, BrandEquityProps>(\n ({ data: { items = [], itemShape }, className }, ref) => {\n return (\n <div ref={ref} className={cn('brand-equity-wrapper w-full', className)}>\n <div className={cn('grid grid-cols-1 gap-3', 'tablet:grid-cols-2', 'laptop:gap-4 laptop:grid-cols-10')}>\n
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["BrandEquity_exports", "__export", "BrandEquity_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_Styles", "BrandEquity", "items", "itemShape", "className", "ref", "item", "index", "Picture"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { forwardRef, useEffect, useRef, useState } from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { BrandEquityProps, BrandEquityItemProps } from './types.js'\n\nimport type { Img } from '../../types/props.js'\nimport { useMediaQuery } from 'react-responsive'\n\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\n\nconst chunkArray = (arr: BrandEquityItemProps[], size: number) => {\n const chunks = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\nconst BrandEquity = forwardRef<HTMLDivElement, BrandEquityProps>(\n ({ data: { items = [], itemShape }, className }, ref) => {\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n const paginationRef = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const itemsArray = isMobile ? chunkArray(items, 3) : items\n return (\n <div ref={ref} className={cn('brand-equity-wrapper w-full', className)}>\n {isMobile ? (\n <Swiper\n className={cn(className)}\n modules={[FreeMode, Mousewheel, Pagination]}\n freeMode={true}\n mousewheel={{\n forceToAxis: true,\n }}\n pagination={{\n clickable: true,\n el: paginationRef.current,\n }}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n },\n }}\n >\n {itemsArray?.map((item, jIndex) => (\n <SwiperSlide key={'SwiperSlide' + jIndex} className=\"!flex flex-col gap-3\">\n {Array.isArray(item) &&\n item?.map((item, index) => (\n <BrandEquityItem key={index} data={item} itemShape={itemShape} index={index} />\n ))}\n </SwiperSlide>\n ))}\n <div ref={paginationRef} className=\"mt-3 flex justify-center\"></div>\n </Swiper>\n ) : (\n <div className={cn('grid grid-cols-1 gap-3', 'tablet:grid-cols-2', 'laptop:gap-4 laptop:grid-cols-10')}>\n {items.map((item, index) => (\n <BrandEquityItem key={index} data={item} itemShape={itemShape} index={index} />\n ))}\n </div>\n )}\n </div>\n )\n }\n)\n\nconst BrandEquityItem = ({\n data,\n itemShape,\n index,\n}: {\n data: BrandEquityItemProps\n itemShape?: 'round' | 'square'\n index: number\n}) => {\n return (\n <div\n className={cn(\n 'brand-equity-item',\n 'flex w-full flex-col bg-white p-4',\n 'desktop:p-6 desktop:gap-16 gap-12',\n 'laptop:col-span-3 lg-desktop:p-8',\n {\n ['laptop:col-span-4']: [0, 5, 6, 11].includes(index),\n },\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className=\"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3\">\n <h3 className=\"lg-desktop:text-[18px] text-[14px] font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]\">\n {data.title}\n </h3>\n {data.type === 'avatar' ? (\n <div className=\"flex -space-x-2\">\n {data?.avatarList?.map((item: { avatar: Img }, index: number) => (\n <div\n key={index}\n className={cn(\n 'size-[30px] overflow-hidden rounded-full border-2 border-white',\n 'relative inline-block',\n 'lg-desktop:size-[36px]'\n )}\n >\n <Picture source={item.avatar.url} alt={item.avatar?.alt} className=\"size-full object-cover\" />\n </div>\n ))}\n </div>\n ) : (\n <Picture\n className=\"lg-desktop:size-[36px] size-[30px] shrink-0 object-cover\"\n source={data.icon?.url}\n alt={data.icon?.alt}\n imgClassName=\"w-full h-full object-cover\"\n />\n )}\n </div>\n <p className=\"lg-desktop:text-[24px] text-[20px] font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]\">\n {data.description}\n </p>\n </div>\n )\n}\n\nexport default withStyles(BrandEquity)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAoCU,IAAAI,EAAA,6BAnCVC,EAA+D,iBAE/DC,EAAmB,kCACnBC,EAAoB,0CACpBC,EAA2B,kCAI3BC,EAA8B,4BAE9BJ,EAAoC,wBACpCK,EAAiD,0BAEjD,MAAMC,EAAa,CAACC,EAA6BC,IAAiB,CAChE,MAAMC,EAAS,CAAC,EAChB,QAAS,EAAI,EAAG,EAAIF,EAAI,OAAQ,GAAKC,EACnCC,EAAO,KAAKF,EAAI,MAAM,EAAG,EAAIC,CAAI,CAAC,EAEpC,OAAOC,CACT,EAEMC,KAAc,cAClB,CAAC,CAAE,KAAM,CAAE,MAAAC,EAAQ,CAAC,EAAG,UAAAC,CAAU,EAAG,UAAAC,CAAU,EAAGC,IAAQ,CACvD,KAAM,CAACC,EAAUC,CAAW,KAAI,YAAS,EAAK,EACxCC,KAAa,iBAAc,CAAE,MAAO,oBAAqB,CAAC,EAC1DC,KAAgB,UAAuB,IAAI,KAEjD,aAAU,IAAM,CACdF,EAAYC,CAAU,CACxB,EAAG,CAACA,CAAU,CAAC,EAEf,MAAME,EAAaJ,EAAWT,EAAWK,EAAO,CAAC,EAAIA,EACrD,SACE,OAAC,OAAI,IAAKG,EAAK,aAAW,MAAG,8BAA+BD,CAAS,EAClE,SAAAE,KACC,QAAC,UACC,aAAW,MAAGF,CAAS,EACvB,QAAS,CAAC,WAAU,aAAY,YAAU,EAC1C,SAAU,GACV,WAAY,CACV,YAAa,EACf,EACA,WAAY,CACV,UAAW,GACX,GAAIK,EAAc,OACpB,EACA,YAAa,CACX,EAAG,CACD,aAAc,EAChB,CACF,EAEC,UAAAC,GAAY,IAAI,CAACC,EAAMC,OACtB,OAAC,eAAyC,UAAU,uBACjD,eAAM,QAAQD,CAAI,GACjBA,GAAM,IAAI,CAACA,EAAME,OACf,OAACC,EAAA,CAA4B,KAAMH,EAAM,UAAWR,EAAW,MAAOU,GAAhDA,CAAuD,CAC9E,GAJa,cAAgBD,CAKlC,CACD,KACD,OAAC,OAAI,IAAKH,EAAe,UAAU,2BAA2B,GAChE,KAEA,OAAC,OAAI,aAAW,MAAG,yBAA0B,qBAAsB,kCAAkC,EAClG,SAAAP,EAAM,IAAI,CAACS,EAAME,OAChB,OAACC,EAAA,CAA4B,KAAMH,EAAM,UAAWR,EAAW,MAAOU,GAAhDA,CAAuD,CAC9E,EACH,EAEJ,CAEJ,CACF,EAEMC,EAAkB,CAAC,CACvB,KAAAC,EACA,UAAAZ,EACA,MAAAU,CACF,OAMI,QAAC,OACC,aAAW,MACT,oBACA,oCACA,oCACA,mCACA,CACG,oBAAsB,CAAC,EAAG,EAAG,EAAG,EAAE,EAAE,SAASA,CAAK,CACrD,EACAV,IAAc,QAAU,cAAgB,cAC1C,EAEA,qBAAC,OAAI,UAAU,uEACb,oBAAC,MAAG,UAAU,mGACX,SAAAY,EAAK,MACR,EACCA,EAAK,OAAS,YACb,OAAC,OAAI,UAAU,kBACZ,SAAAA,GAAM,YAAY,IAAI,CAACJ,EAAuBE,OAC7C,OAAC,OAEC,aAAW,MACT,iEACA,wBACA,wBACF,EAEA,mBAAC,EAAAG,QAAA,CAAQ,OAAQL,EAAK,OAAO,IAAK,IAAKA,EAAK,QAAQ,IAAK,UAAU,yBAAyB,GAPvFE,CAQP,CACD,EACH,KAEA,OAAC,EAAAG,QAAA,CACC,UAAU,2DACV,OAAQD,EAAK,MAAM,IACnB,IAAKA,EAAK,MAAM,IAChB,aAAa,6BACf,GAEJ,KACA,OAAC,KAAE,UAAU,+FACV,SAAAA,EAAK,YACR,GACF,EAIJ,IAAO3B,KAAQ,cAAWa,CAAW",
|
|
6
|
+
"names": ["BrandEquity_exports", "__export", "BrandEquity_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_Styles", "import_react_responsive", "import_modules", "chunkArray", "arr", "size", "chunks", "BrandEquity", "items", "itemShape", "className", "ref", "isMobile", "setIsMobile", "mediaQuery", "paginationRef", "itemsArray", "item", "jIndex", "index", "BrandEquityItem", "data", "Picture"]
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { ComponentCommonProps, Img } from '../../types/props.js';
|
|
2
|
-
export interface
|
|
2
|
+
export interface BrandEquityItemProps {
|
|
3
3
|
icon?: Img;
|
|
4
4
|
type?: 'icon' | 'avatar';
|
|
5
5
|
title: string;
|
|
@@ -10,7 +10,7 @@ export interface BrandEquityItem {
|
|
|
10
10
|
}
|
|
11
11
|
export interface BrandEquityProps extends ComponentCommonProps {
|
|
12
12
|
data: {
|
|
13
|
-
items:
|
|
13
|
+
items: BrandEquityItemProps[];
|
|
14
14
|
itemShape?: 'round' | 'square';
|
|
15
15
|
};
|
|
16
16
|
className?: string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var a=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var i=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var m=(r,t,n,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of i(t))!p.call(r,e)&&e!==n&&a(r,e,{get:()=>t[e],enumerable:!(o=s(t,e))||o.enumerable});return r};var d=r=>m(a({},"__esModule",{value:!0}),r);var c={};module.exports=d(c);
|
|
2
2
|
//# sourceMappingURL=types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/BrandEquity/types.ts"],
|
|
4
|
-
"sourcesContent": ["import type { ComponentCommonProps, Img } from '../../types/props.js'\n\nexport interface
|
|
4
|
+
"sourcesContent": ["import type { ComponentCommonProps, Img } from '../../types/props.js'\n\nexport interface BrandEquityItemProps {\n icon?: Img\n type?: 'icon' | 'avatar'\n title: string\n description: string\n avatarList?: {\n avatar: Img\n }[]\n}\n\nexport interface BrandEquityProps extends ComponentCommonProps {\n data: {\n items: BrandEquityItemProps[]\n itemShape?: 'round' | 'square'\n }\n className?: string\n}\n"],
|
|
5
5
|
"mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
|
|
6
6
|
"names": ["types_exports", "__toCommonJS"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var f=Object.create;var
|
|
1
|
+
"use strict";var f=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var d=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var m=(e,t)=>{for(var a in t)r(e,a,{get:t[a],enumerable:!0})},o=(e,t,a,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of l(t))!b.call(e,s)&&s!==a&&r(e,s,{get:()=>t[s],enumerable:!(i=p(t,s))||i.enumerable});return e};var y=(e,t,a)=>(a=e!=null?f(d(e)):{},o(t||!e||!e.__esModule?r(a,"default",{value:e,enumerable:!0}):a,e)),u=e=>o(r({},"__esModule",{value:!0}),e);var B={};m(B,{CustomBackground:()=>w,Default:()=>g,default:()=>v});module.exports=u(B);var n=y(require("../biz-components/BrandEquity/BrandEquity.js"));const h={title:"Biz-Components/BrandEquity",component:n.default,parameters:{layout:"fullscreen"},tags:["autodocs"]};var v=h;const c=[{icon:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/c3269421a5343c0e59065b53bd81c8f5_ba2fc271-206e-4480-b815-9eb76b45f691.png?v=1744612102",alt:"Hassle-Free Warranty"},title:"Hassle-Free Warranty",description:"Comprehensive warranty protection on all purchases."},{icon:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/c3269421a5343c0e59065b53bd81c8f5_ba2fc271-206e-4480-b815-9eb76b45f691.png?v=1744612102",alt:"Our Happy Customers"},title:"Our Happy Customers",description:"Join millions of satisfied Anker users worldwide."},{icon:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/c3269421a5343c0e59065b53bd81c8f5_ba2fc271-206e-4480-b815-9eb76b45f691.png?v=1744612102",alt:"Anker credits rewards"},title:"Anker credits rewards",description:"Buy more, save more, and earn more."},{icon:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/c3269421a5343c0e59065b53bd81c8f5_ba2fc271-206e-4480-b815-9eb76b45f691.png?v=1744612102",alt:"Pay with Ease"},title:"Pay with Ease",description:"Pay immediately or in installments with Affirm."},{icon:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/c3269421a5343c0e59065b53bd81c8f5_ba2fc271-206e-4480-b815-9eb76b45f691.png?v=1744612102",alt:"30-day money-back guarantee"},title:"30-day money-back guarantee",description:"Return within 30 days for a full refund."},{avatarList:[{avatar:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/25954496272e3aad27d750494d4748ca_c591cb1a-5f47-42d9-b356-0acd9e87fed0.png?v=1744612103"}},{avatar:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ee5edd6de20a7af2f30f2fa976d779c9_6ddc29a7-c287-4afc-909c-383fe1f1a74b.png?v=1744612102"}},{avatar:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/b0b7c87fb0819b6cd109bf4b0d865006_e0f7c15a-7d1a-45e7-aee3-783e681a3864.png?v=1744612102"}},{avatar:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/85087c9c0ec8c86b481eaea247812c3e.png?v=1744612102"}}],type:"avatar",title:"We are Here to Help",description:"Contact our expert team via email or live chat for assistance."}],g={args:{data:{items:c},className:"bg-[#eeeeee] p-4"}},w={args:{data:{items:c,itemShape:"round"},className:"bg-gray-900 p-4"}};
|
|
2
2
|
//# sourceMappingURL=brandEquity.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/brandEquity.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport BrandEquity from '../biz-components/BrandEquity/BrandEquity.js'\nimport type {
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport BrandEquity from '../biz-components/BrandEquity/BrandEquity.js'\nimport type { BrandEquityItemProps } from '../biz-components/BrandEquity/types.js'\n\nconst meta = {\n title: 'Biz-Components/BrandEquity',\n component: BrandEquity,\n parameters: {\n layout: 'fullscreen',\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof BrandEquity>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nconst mockItems = [\n {\n icon: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/c3269421a5343c0e59065b53bd81c8f5_ba2fc271-206e-4480-b815-9eb76b45f691.png?v=1744612102',\n alt: 'Hassle-Free Warranty',\n },\n title: 'Hassle-Free Warranty',\n description: 'Comprehensive warranty protection on all purchases.',\n },\n {\n icon: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/c3269421a5343c0e59065b53bd81c8f5_ba2fc271-206e-4480-b815-9eb76b45f691.png?v=1744612102',\n alt: 'Our Happy Customers',\n },\n title: 'Our Happy Customers',\n description: 'Join millions of satisfied Anker users worldwide.',\n },\n {\n icon: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/c3269421a5343c0e59065b53bd81c8f5_ba2fc271-206e-4480-b815-9eb76b45f691.png?v=1744612102',\n alt: 'Anker credits rewards',\n },\n title: 'Anker credits rewards',\n description: 'Buy more, save more, and earn more.',\n },\n {\n icon: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/c3269421a5343c0e59065b53bd81c8f5_ba2fc271-206e-4480-b815-9eb76b45f691.png?v=1744612102',\n alt: 'Pay with Ease',\n },\n title: 'Pay with Ease',\n description: 'Pay immediately or in installments with Affirm.',\n },\n {\n icon: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/c3269421a5343c0e59065b53bd81c8f5_ba2fc271-206e-4480-b815-9eb76b45f691.png?v=1744612102',\n alt: '30-day money-back guarantee',\n },\n title: '30-day money-back guarantee',\n description: 'Return within 30 days for a full refund.',\n },\n {\n avatarList: [\n {\n avatar: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/25954496272e3aad27d750494d4748ca_c591cb1a-5f47-42d9-b356-0acd9e87fed0.png?v=1744612103',\n },\n },\n {\n avatar: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ee5edd6de20a7af2f30f2fa976d779c9_6ddc29a7-c287-4afc-909c-383fe1f1a74b.png?v=1744612102',\n },\n },\n {\n avatar: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/b0b7c87fb0819b6cd109bf4b0d865006_e0f7c15a-7d1a-45e7-aee3-783e681a3864.png?v=1744612102',\n },\n },\n {\n avatar: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/85087c9c0ec8c86b481eaea247812c3e.png?v=1744612102',\n },\n },\n ],\n type: 'avatar',\n title: 'We are Here to Help',\n description: 'Contact our expert team via email or live chat for assistance.',\n },\n] satisfies BrandEquityItemProps[]\n\nexport const Default: Story = {\n args: {\n data: {\n items: mockItems,\n },\n className: 'bg-[#eeeeee] p-4',\n },\n}\n\nexport const CustomBackground: Story = {\n args: {\n data: {\n items: mockItems,\n itemShape: 'round',\n },\n className: 'bg-gray-900 p-4',\n },\n}\n"],
|
|
5
5
|
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,sBAAAE,EAAA,YAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAL,GACA,IAAAM,EAAwB,2DAGxB,MAAMC,EAAO,CACX,MAAO,6BACP,UAAW,EAAAC,QACX,WAAY,CACV,OAAQ,YACV,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOJ,EAAQG,EAGf,MAAME,EAAY,CAChB,CACE,KAAM,CACJ,IAAK,gJACL,IAAK,sBACP,EACA,MAAO,uBACP,YAAa,qDACf,EACA,CACE,KAAM,CACJ,IAAK,gJACL,IAAK,qBACP,EACA,MAAO,sBACP,YAAa,mDACf,EACA,CACE,KAAM,CACJ,IAAK,gJACL,IAAK,uBACP,EACA,MAAO,wBACP,YAAa,qCACf,EACA,CACE,KAAM,CACJ,IAAK,gJACL,IAAK,eACP,EACA,MAAO,gBACP,YAAa,iDACf,EACA,CACE,KAAM,CACJ,IAAK,gJACL,IAAK,6BACP,EACA,MAAO,8BACP,YAAa,0CACf,EACA,CACE,WAAY,CACV,CACE,OAAQ,CACN,IAAK,+IACP,CACF,EACA,CACE,OAAQ,CACN,IAAK,+IACP,CACF,EACA,CACE,OAAQ,CACN,IAAK,+IACP,CACF,EACA,CACE,OAAQ,CACN,IAAK,0GACP,CACF,CACF,EACA,KAAM,SACN,MAAO,sBACP,YAAa,gEACf,CACF,EAEaN,EAAiB,CAC5B,KAAM,CACJ,KAAM,CACJ,MAAOM,CACT,EACA,UAAW,kBACb,CACF,EAEaP,EAA0B,CACrC,KAAM,CACJ,KAAM,CACJ,MAAOO,EACP,UAAW,OACb,EACA,UAAW,iBACb,CACF",
|
|
6
6
|
"names": ["brandEquity_stories_exports", "__export", "CustomBackground", "Default", "brandEquity_stories_default", "__toCommonJS", "import_BrandEquity", "meta", "BrandEquity", "mockItems"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as
|
|
1
|
+
"use client";import{jsx as t,jsxs as n}from"react/jsx-runtime";import{forwardRef as v,useEffect as b,useRef as k,useState as h}from"react";import{cn as o}from"../../helpers/utils.js";import u from"../../components/picture.js";import{withStyles as w}from"../../shared/Styles.js";import{useMediaQuery as N}from"react-responsive";import{Swiper as S,SwiperSlide as q}from"swiper/react";import{Pagination as E,FreeMode as B,Mousewheel as M}from"swiper/modules";const I=(e,a)=>{const i=[];for(let r=0;r<e.length;r+=a)i.push(e.slice(r,r+a));return i},P=v(({data:{items:e=[],itemShape:a},className:i},r)=>{const[s,x]=h(!1),d=N({query:"(max-width: 768px)"}),c=k(null);b(()=>{x(d)},[d]);const g=s?I(e,3):e;return t("div",{ref:r,className:o("brand-equity-wrapper w-full",i),children:s?n(S,{className:o(i),modules:[B,M,E],freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,el:c.current},breakpoints:{0:{spaceBetween:12}},children:[g?.map((l,p)=>t(q,{className:"!flex flex-col gap-3",children:Array.isArray(l)&&l?.map((y,m)=>t(f,{data:y,itemShape:a,index:m},m))},"SwiperSlide"+p)),t("div",{ref:c,className:"mt-3 flex justify-center"})]}):t("div",{className:o("grid grid-cols-1 gap-3","tablet:grid-cols-2","laptop:gap-4 laptop:grid-cols-10"),children:e.map((l,p)=>t(f,{data:l,itemShape:a,index:p},p))})})}),f=({data:e,itemShape:a,index:i})=>n("div",{className:o("brand-equity-item","flex w-full flex-col bg-white p-4","desktop:p-6 desktop:gap-16 gap-12","laptop:col-span-3 lg-desktop:p-8",{"laptop:col-span-4":[0,5,6,11].includes(i)},a==="round"?"rounded-2xl":"rounded-none"),children:[n("div",{className:"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3",children:[t("h3",{className:"lg-desktop:text-[18px] text-[14px] font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]",children:e.title}),e.type==="avatar"?t("div",{className:"flex -space-x-2",children:e?.avatarList?.map((r,s)=>t("div",{className:o("size-[30px] overflow-hidden rounded-full border-2 border-white","relative inline-block","lg-desktop:size-[36px]"),children:t(u,{source:r.avatar.url,alt:r.avatar?.alt,className:"size-full object-cover"})},s))}):t(u,{className:"lg-desktop:size-[36px] size-[30px] shrink-0 object-cover",source:e.icon?.url,alt:e.icon?.alt,imgClassName:"w-full h-full object-cover"})]}),t("p",{className:"lg-desktop:text-[24px] text-[20px] font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]",children:e.description})]});var H=w(P);export{H as default};
|
|
2
2
|
//# sourceMappingURL=BrandEquity.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/BrandEquity/BrandEquity.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { forwardRef } from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { BrandEquityProps } from './types.js'\n\nimport type { Img } from '../../types/props.js'\n\nconst BrandEquity = forwardRef<HTMLDivElement, BrandEquityProps>(\n ({ data: { items = [], itemShape }, className }, ref) => {\n return (\n <div ref={ref} className={cn('brand-equity-wrapper w-full', className)}>\n <div className={cn('grid grid-cols-1 gap-3', 'tablet:grid-cols-2', 'laptop:gap-4 laptop:grid-cols-10')}>\n
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "jsxs", "forwardRef", "cn", "Picture", "withStyles", "BrandEquity", "items", "itemShape", "className", "ref", "item", "index", "BrandEquity_default"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { forwardRef, useEffect, useRef, useState } from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { BrandEquityProps, BrandEquityItemProps } from './types.js'\n\nimport type { Img } from '../../types/props.js'\nimport { useMediaQuery } from 'react-responsive'\n\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\n\nconst chunkArray = (arr: BrandEquityItemProps[], size: number) => {\n const chunks = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\nconst BrandEquity = forwardRef<HTMLDivElement, BrandEquityProps>(\n ({ data: { items = [], itemShape }, className }, ref) => {\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n const paginationRef = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const itemsArray = isMobile ? chunkArray(items, 3) : items\n return (\n <div ref={ref} className={cn('brand-equity-wrapper w-full', className)}>\n {isMobile ? (\n <Swiper\n className={cn(className)}\n modules={[FreeMode, Mousewheel, Pagination]}\n freeMode={true}\n mousewheel={{\n forceToAxis: true,\n }}\n pagination={{\n clickable: true,\n el: paginationRef.current,\n }}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n },\n }}\n >\n {itemsArray?.map((item, jIndex) => (\n <SwiperSlide key={'SwiperSlide' + jIndex} className=\"!flex flex-col gap-3\">\n {Array.isArray(item) &&\n item?.map((item, index) => (\n <BrandEquityItem key={index} data={item} itemShape={itemShape} index={index} />\n ))}\n </SwiperSlide>\n ))}\n <div ref={paginationRef} className=\"mt-3 flex justify-center\"></div>\n </Swiper>\n ) : (\n <div className={cn('grid grid-cols-1 gap-3', 'tablet:grid-cols-2', 'laptop:gap-4 laptop:grid-cols-10')}>\n {items.map((item, index) => (\n <BrandEquityItem key={index} data={item} itemShape={itemShape} index={index} />\n ))}\n </div>\n )}\n </div>\n )\n }\n)\n\nconst BrandEquityItem = ({\n data,\n itemShape,\n index,\n}: {\n data: BrandEquityItemProps\n itemShape?: 'round' | 'square'\n index: number\n}) => {\n return (\n <div\n className={cn(\n 'brand-equity-item',\n 'flex w-full flex-col bg-white p-4',\n 'desktop:p-6 desktop:gap-16 gap-12',\n 'laptop:col-span-3 lg-desktop:p-8',\n {\n ['laptop:col-span-4']: [0, 5, 6, 11].includes(index),\n },\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className=\"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3\">\n <h3 className=\"lg-desktop:text-[18px] text-[14px] font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]\">\n {data.title}\n </h3>\n {data.type === 'avatar' ? (\n <div className=\"flex -space-x-2\">\n {data?.avatarList?.map((item: { avatar: Img }, index: number) => (\n <div\n key={index}\n className={cn(\n 'size-[30px] overflow-hidden rounded-full border-2 border-white',\n 'relative inline-block',\n 'lg-desktop:size-[36px]'\n )}\n >\n <Picture source={item.avatar.url} alt={item.avatar?.alt} className=\"size-full object-cover\" />\n </div>\n ))}\n </div>\n ) : (\n <Picture\n className=\"lg-desktop:size-[36px] size-[30px] shrink-0 object-cover\"\n source={data.icon?.url}\n alt={data.icon?.alt}\n imgClassName=\"w-full h-full object-cover\"\n />\n )}\n </div>\n <p className=\"lg-desktop:text-[24px] text-[20px] font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]\">\n {data.description}\n </p>\n </div>\n )\n}\n\nexport default withStyles(BrandEquity)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "jsxs", "forwardRef", "useEffect", "useRef", "useState", "cn", "Picture", "withStyles", "useMediaQuery", "Swiper", "SwiperSlide", "Pagination", "FreeMode", "Mousewheel", "chunkArray", "arr", "size", "chunks", "i", "BrandEquity", "items", "itemShape", "className", "ref", "isMobile", "setIsMobile", "mediaQuery", "paginationRef", "itemsArray", "item", "jIndex", "index", "BrandEquityItem", "data", "BrandEquity_default"]
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { ComponentCommonProps, Img } from '../../types/props.js';
|
|
2
|
-
export interface
|
|
2
|
+
export interface BrandEquityItemProps {
|
|
3
3
|
icon?: Img;
|
|
4
4
|
type?: 'icon' | 'avatar';
|
|
5
5
|
title: string;
|
|
@@ -10,7 +10,7 @@ export interface BrandEquityItem {
|
|
|
10
10
|
}
|
|
11
11
|
export interface BrandEquityProps extends ComponentCommonProps {
|
|
12
12
|
data: {
|
|
13
|
-
items:
|
|
13
|
+
items: BrandEquityItemProps[];
|
|
14
14
|
itemShape?: 'round' | 'square';
|
|
15
15
|
};
|
|
16
16
|
className?: string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import t from"../biz-components/BrandEquity/BrandEquity.js";const a={title:"Biz-Components/BrandEquity",component:t,parameters:{layout:"fullscreen"},tags:["autodocs"]};var
|
|
1
|
+
import t from"../biz-components/BrandEquity/BrandEquity.js";const a={title:"Biz-Components/BrandEquity",component:t,parameters:{layout:"fullscreen"},tags:["autodocs"]};var r=a;const e=[{icon:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/c3269421a5343c0e59065b53bd81c8f5_ba2fc271-206e-4480-b815-9eb76b45f691.png?v=1744612102",alt:"Hassle-Free Warranty"},title:"Hassle-Free Warranty",description:"Comprehensive warranty protection on all purchases."},{icon:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/c3269421a5343c0e59065b53bd81c8f5_ba2fc271-206e-4480-b815-9eb76b45f691.png?v=1744612102",alt:"Our Happy Customers"},title:"Our Happy Customers",description:"Join millions of satisfied Anker users worldwide."},{icon:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/c3269421a5343c0e59065b53bd81c8f5_ba2fc271-206e-4480-b815-9eb76b45f691.png?v=1744612102",alt:"Anker credits rewards"},title:"Anker credits rewards",description:"Buy more, save more, and earn more."},{icon:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/c3269421a5343c0e59065b53bd81c8f5_ba2fc271-206e-4480-b815-9eb76b45f691.png?v=1744612102",alt:"Pay with Ease"},title:"Pay with Ease",description:"Pay immediately or in installments with Affirm."},{icon:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/c3269421a5343c0e59065b53bd81c8f5_ba2fc271-206e-4480-b815-9eb76b45f691.png?v=1744612102",alt:"30-day money-back guarantee"},title:"30-day money-back guarantee",description:"Return within 30 days for a full refund."},{avatarList:[{avatar:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/25954496272e3aad27d750494d4748ca_c591cb1a-5f47-42d9-b356-0acd9e87fed0.png?v=1744612103"}},{avatar:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ee5edd6de20a7af2f30f2fa976d779c9_6ddc29a7-c287-4afc-909c-383fe1f1a74b.png?v=1744612102"}},{avatar:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/b0b7c87fb0819b6cd109bf4b0d865006_e0f7c15a-7d1a-45e7-aee3-783e681a3864.png?v=1744612102"}},{avatar:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/85087c9c0ec8c86b481eaea247812c3e.png?v=1744612102"}}],type:"avatar",title:"We are Here to Help",description:"Contact our expert team via email or live chat for assistance."}],i={args:{data:{items:e},className:"bg-[#eeeeee] p-4"}},o={args:{data:{items:e,itemShape:"round"},className:"bg-gray-900 p-4"}};export{o as CustomBackground,i as Default,r as default};
|
|
2
2
|
//# sourceMappingURL=brandEquity.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/brandEquity.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport BrandEquity from '../biz-components/BrandEquity/BrandEquity.js'\nimport type {
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport BrandEquity from '../biz-components/BrandEquity/BrandEquity.js'\nimport type { BrandEquityItemProps } from '../biz-components/BrandEquity/types.js'\n\nconst meta = {\n title: 'Biz-Components/BrandEquity',\n component: BrandEquity,\n parameters: {\n layout: 'fullscreen',\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof BrandEquity>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nconst mockItems = [\n {\n icon: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/c3269421a5343c0e59065b53bd81c8f5_ba2fc271-206e-4480-b815-9eb76b45f691.png?v=1744612102',\n alt: 'Hassle-Free Warranty',\n },\n title: 'Hassle-Free Warranty',\n description: 'Comprehensive warranty protection on all purchases.',\n },\n {\n icon: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/c3269421a5343c0e59065b53bd81c8f5_ba2fc271-206e-4480-b815-9eb76b45f691.png?v=1744612102',\n alt: 'Our Happy Customers',\n },\n title: 'Our Happy Customers',\n description: 'Join millions of satisfied Anker users worldwide.',\n },\n {\n icon: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/c3269421a5343c0e59065b53bd81c8f5_ba2fc271-206e-4480-b815-9eb76b45f691.png?v=1744612102',\n alt: 'Anker credits rewards',\n },\n title: 'Anker credits rewards',\n description: 'Buy more, save more, and earn more.',\n },\n {\n icon: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/c3269421a5343c0e59065b53bd81c8f5_ba2fc271-206e-4480-b815-9eb76b45f691.png?v=1744612102',\n alt: 'Pay with Ease',\n },\n title: 'Pay with Ease',\n description: 'Pay immediately or in installments with Affirm.',\n },\n {\n icon: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/c3269421a5343c0e59065b53bd81c8f5_ba2fc271-206e-4480-b815-9eb76b45f691.png?v=1744612102',\n alt: '30-day money-back guarantee',\n },\n title: '30-day money-back guarantee',\n description: 'Return within 30 days for a full refund.',\n },\n {\n avatarList: [\n {\n avatar: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/25954496272e3aad27d750494d4748ca_c591cb1a-5f47-42d9-b356-0acd9e87fed0.png?v=1744612103',\n },\n },\n {\n avatar: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ee5edd6de20a7af2f30f2fa976d779c9_6ddc29a7-c287-4afc-909c-383fe1f1a74b.png?v=1744612102',\n },\n },\n {\n avatar: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/b0b7c87fb0819b6cd109bf4b0d865006_e0f7c15a-7d1a-45e7-aee3-783e681a3864.png?v=1744612102',\n },\n },\n {\n avatar: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/85087c9c0ec8c86b481eaea247812c3e.png?v=1744612102',\n },\n },\n ],\n type: 'avatar',\n title: 'We are Here to Help',\n description: 'Contact our expert team via email or live chat for assistance.',\n },\n] satisfies BrandEquityItemProps[]\n\nexport const Default: Story = {\n args: {\n data: {\n items: mockItems,\n },\n className: 'bg-[#eeeeee] p-4',\n },\n}\n\nexport const CustomBackground: Story = {\n args: {\n data: {\n items: mockItems,\n itemShape: 'round',\n },\n className: 'bg-gray-900 p-4',\n },\n}\n"],
|
|
5
5
|
"mappings": "AACA,OAAOA,MAAiB,+CAGxB,MAAMC,EAAO,CACX,MAAO,6BACP,UAAWD,EACX,WAAY,CACV,OAAQ,YACV,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOE,EAAQD,EAGf,MAAME,EAAY,CAChB,CACE,KAAM,CACJ,IAAK,gJACL,IAAK,sBACP,EACA,MAAO,uBACP,YAAa,qDACf,EACA,CACE,KAAM,CACJ,IAAK,gJACL,IAAK,qBACP,EACA,MAAO,sBACP,YAAa,mDACf,EACA,CACE,KAAM,CACJ,IAAK,gJACL,IAAK,uBACP,EACA,MAAO,wBACP,YAAa,qCACf,EACA,CACE,KAAM,CACJ,IAAK,gJACL,IAAK,eACP,EACA,MAAO,gBACP,YAAa,iDACf,EACA,CACE,KAAM,CACJ,IAAK,gJACL,IAAK,6BACP,EACA,MAAO,8BACP,YAAa,0CACf,EACA,CACE,WAAY,CACV,CACE,OAAQ,CACN,IAAK,+IACP,CACF,EACA,CACE,OAAQ,CACN,IAAK,+IACP,CACF,EACA,CACE,OAAQ,CACN,IAAK,+IACP,CACF,EACA,CACE,OAAQ,CACN,IAAK,0GACP,CACF,CACF,EACA,KAAM,SACN,MAAO,sBACP,YAAa,gEACf,CACF,EAEaC,EAAiB,CAC5B,KAAM,CACJ,KAAM,CACJ,MAAOD,CACT,EACA,UAAW,kBACb,CACF,EAEaE,EAA0B,CACrC,KAAM,CACJ,KAAM,CACJ,MAAOF,EACP,UAAW,OACb,EACA,UAAW,iBACb,CACF",
|
|
6
6
|
"names": ["BrandEquity", "meta", "brandEquity_stories_default", "mockItems", "Default", "CustomBackground"]
|
|
7
7
|
}
|