@anker-in/headless-ui 0.0.27-alpha.24 → 0.0.27-alpha.25

package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js

@@ -1,2 +1,2 @@
-"use strict";var u=Object.create;var o=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var y=(r,i)=>{for(var t in i)o(r,t,{get:i[t],enumerable:!0})},n=(r,i,t,a)=>{if(i&&typeof i=="object"||typeof i=="function")for(let e of s(i))!p.call(r,e)&&e!==t&&o(r,e,{get:()=>i[e],enumerable:!(a=g(i,e))||a.enumerable});return r};var f=(r,i,t)=>(t=r!=null?u(l(r)):{},n(i||!r||!r.__esModule?o(t,"default",{value:r,enumerable:!0}):t,r)),m=r=>n(o({},"__esModule",{value:!0}),r);var L={};y(L,{default:()=>w});module.exports=m(L);var d=require("react/jsx-runtime"),c=f(require("react")),v=require("../../shared/Styles.js");const h=c.default.forwardRef((r,i)=>{const{layout:t}=r.data;return(0,d.jsx)("div",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:i,children:(()=>{switch(t){case"single-row":return(0,d.jsx)("div",{children:"single-row"});case"grid-2-1":return(0,d.jsx)("div",{children:"grid-2-1"});case"grid-1-2":return(0,d.jsx)("div",{children:"grid-1-2"});case"grid-3":return(0,d.jsx)("div",{children:"grid-3"});case"grid-2x2":return(0,d.jsx)("div",{children:"grid-2x2"});case"grid-1-3":return(0,d.jsx)("div",{children:"grid-1-3"});case"grid-1-2-2":return(0,d.jsx)("div",{children:"grid-1-2-2"});case"grid-2-2-1":return(0,d.jsx)("div",{children:"grid-2-2-1"});case"grid-1-4":return(0,d.jsx)("div",{children:"grid-1-4"})}})()})});var w=(0,v.withStyles)(h);
+"use strict";var k=Object.create;var p=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,G=Object.prototype.hasOwnProperty;var b=(e,a)=>{for(var i in a)p(e,i,{get:a[i],enumerable:!0})},d=(e,a,i,s)=>{if(a&&typeof a=="object"||typeof a=="function")for(let r of g(a))!G.call(e,r)&&r!==i&&p(e,r,{get:()=>a[r],enumerable:!(s=B(a,r))||s.enumerable});return e};var n=(e,a,i)=>(i=e!=null?k(C(e)):{},d(a||!e||!e.__esModule?p(i,"default",{value:e,enumerable:!0}):i,e)),w=e=>d(p({},"__esModule",{value:!0}),e);var M={};b(M,{default:()=>L});module.exports=w(M);var t=require("react/jsx-runtime"),h=n(require("react")),y=require("../../shared/Styles.js"),v=n(require("../../components/picture.js")),u=n(require("../../components/button.js")),x=require("../../components/heading.js"),N=require("../../components/text.js"),l=require("../../components/carousel.js"),c=require("../../components/gird.js");const f=({item:e})=>{const{theme:a,title:i,description:s,imageUrl:r,primaryBtn:o,secondaryBtn:m}=e;return(0,t.jsxs)("div",{className:`item-wrapper relative w-full border ${a==="dark"?"aiui-dark":"aiui-light"}`,children:[(0,t.jsx)(v.default,{source:r,className:"inset-0"}),(0,t.jsxs)("div",{className:"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3",children:[(0,t.jsxs)("div",{children:[(0,t.jsx)(x.Heading,{className:"item-title",children:i}),(0,t.jsx)(N.Text,{className:"item-description",children:s})]}),(0,t.jsxs)("div",{className:"flex gap-2",children:[(0,t.jsx)(u.default,{variant:"primary",children:o.text}),(0,t.jsx)(u.default,{variant:"secondary",children:m.text})]})]})]})},I=h.default.forwardRef((e,a)=>{const{items:i=[],carousel:s}=e.data,r=o=>{switch(o){case"full":return 12;case"half":return 6;case"one-third":return 4}};return(0,t.jsxs)("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:a,className:"",children:[(0,t.jsx)(c.Grid,{className:"w-full",children:i.map((o,m)=>(0,t.jsx)(c.GridItem,{span:r(o.width),children:(0,t.jsx)(f,{item:o})},m))}),s?.items.length>0?(0,t.jsx)(l.Carousel,{className:"laptop:mt-4 mt-3",children:(0,t.jsx)(l.CarouselContent,{className:"flex",children:s.items.map((o,m)=>(0,t.jsx)(l.CarouselItem,{className:"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5",children:(0,t.jsx)(f,{item:o})},m))})}):null]})});var L=(0,y.withStyles)(I);
 //# sourceMappingURL=MultiLayoutGraphicBlock.js.map

package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport type { MultiLayoutGraphicBlockProps } from './types'\nimport { withStyles } from '../../shared/Styles.js'\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n  const { layout } = props.data\n\n  const renderedContent = () => {\n    switch (layout) {\n      case 'single-row':\n        return <div>single-row</div>\n      case 'grid-2-1':\n        return <div>grid-2-1</div>\n      case 'grid-1-2':\n        return <div>grid-1-2</div>\n      case 'grid-3':\n        return <div>grid-3</div>\n      case 'grid-2x2':\n        return <div>grid-2x2</div>\n      case 'grid-1-3':\n        return <div>grid-1-3</div>\n      case 'grid-1-2-2':\n        return <div>grid-1-2-2</div>\n      case 'grid-2-2-1':\n        return <div>grid-2-2-1</div>\n      case 'grid-1-4':\n        return <div>grid-1-4</div>\n    }\n  }\n\n  return (\n    <div data-ui-component-id=\"MultiLayoutGraphicBlock\" ref={ref}>\n      {renderedContent()}\n    </div>\n  )\n})\n\nexport default withStyles(MultiLayoutGraphicBlock)\n"],
-  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAUe,IAAAI,EAAA,6BAVfC,EAAkB,oBAElBC,EAA2B,kCAE3B,MAAMC,EAA0B,EAAAC,QAAM,WAAyD,CAACC,EAAOC,IAAQ,CAC7G,KAAM,CAAE,OAAAC,CAAO,EAAIF,EAAM,KAyBzB,SACE,OAAC,OAAI,uBAAqB,0BAA0B,IAAKC,EACtD,UAzBmB,IAAM,CAC5B,OAAQC,EAAQ,CACd,IAAK,aACH,SAAO,OAAC,OAAI,sBAAU,EACxB,IAAK,WACH,SAAO,OAAC,OAAI,oBAAQ,EACtB,IAAK,WACH,SAAO,OAAC,OAAI,oBAAQ,EACtB,IAAK,SACH,SAAO,OAAC,OAAI,kBAAM,EACpB,IAAK,WACH,SAAO,OAAC,OAAI,oBAAQ,EACtB,IAAK,WACH,SAAO,OAAC,OAAI,oBAAQ,EACtB,IAAK,aACH,SAAO,OAAC,OAAI,sBAAU,EACxB,IAAK,aACH,SAAO,OAAC,OAAI,sBAAU,EACxB,IAAK,WACH,SAAO,OAAC,OAAI,oBAAQ,CACxB,CACF,GAIqB,EACnB,CAEJ,CAAC,EAED,IAAOT,KAAQ,cAAWK,CAAuB",
-  "names": ["MultiLayoutGraphicBlock_exports", "__export", "MultiLayoutGraphicBlock_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_Styles", "MultiLayoutGraphicBlock", "React", "props", "ref", "layout"]
+  "sourcesContent": ["import React from 'react'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport { Carousel, CarouselContent, CarouselItem } from '../../components/carousel.js'\nimport { Grid, GridItem } from '../../components/gird.js'\n\nconst ItemBlock = ({ item }: { item: Item }) => {\n  const { theme, title, description, imageUrl, primaryBtn, secondaryBtn } = item\n\n  return (\n    <div className={`item-wrapper relative w-full border ${theme === 'dark' ? 'aiui-dark' : 'aiui-light'}`}>\n      <Picture source={imageUrl} className=\"inset-0\" />\n      <div className=\"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3\">\n        <div>\n          <Heading className=\"item-title\">{title}</Heading>\n          <Text className=\"item-description\">{description}</Text>\n        </div>\n        <div className=\"flex gap-2\">\n          <Button variant=\"primary\">{primaryBtn.text}</Button>\n          <Button variant=\"secondary\">{secondaryBtn.text}</Button>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n  const { items = [], carousel } = props.data\n\n  const getSpan = (width: 'full' | 'half' | 'one-third') => {\n    switch (width) {\n      case 'full':\n        return 12\n      case 'half':\n        return 6\n      case 'one-third':\n        return 4\n    }\n  }\n\n  return (\n    <section data-ui-component-id=\"MultiLayoutGraphicBlock\" ref={ref} className=\"\">\n      <Grid className=\"w-full\">\n        {items.map((item, index) => (\n          <GridItem key={index} span={getSpan(item.width)}>\n            <ItemBlock item={item} />\n          </GridItem>\n        ))}\n      </Grid>\n      {carousel?.items.length > 0 ? (\n        <Carousel className=\"laptop:mt-4 mt-3\">\n          <CarouselContent className=\"flex\">\n            {carousel.items.map((item, index) => (\n              <CarouselItem key={index} className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\">\n                <ItemBlock item={item} />\n              </CarouselItem>\n            ))}\n          </CarouselContent>\n        </Carousel>\n      ) : null}\n    </section>\n  )\n})\n\nexport default withStyles(MultiLayoutGraphicBlock)\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAeM,IAAAI,EAAA,6BAfNC,EAAkB,oBAElBC,EAA2B,kCAC3BC,EAAoB,0CACpBC,EAAmB,yCACnBC,EAAwB,uCACxBC,EAAqB,oCACrBC,EAAwD,wCACxDC,EAA+B,oCAE/B,MAAMC,EAAY,CAAC,CAAE,KAAAC,CAAK,IAAsB,CAC9C,KAAM,CAAE,MAAAC,EAAO,MAAAC,EAAO,YAAAC,EAAa,SAAAC,EAAU,WAAAC,EAAY,aAAAC,CAAa,EAAIN,EAE1E,SACE,QAAC,OAAI,UAAW,uCAAuCC,IAAU,OAAS,YAAc,YAAY,GAClG,oBAAC,EAAAM,QAAA,CAAQ,OAAQH,EAAU,UAAU,UAAU,KAC/C,QAAC,OAAI,UAAU,kFACb,qBAAC,OACC,oBAAC,WAAQ,UAAU,aAAc,SAAAF,EAAM,KACvC,OAAC,QAAK,UAAU,mBAAoB,SAAAC,EAAY,GAClD,KACA,QAAC,OAAI,UAAU,aACb,oBAAC,EAAAK,QAAA,CAAO,QAAQ,UAAW,SAAAH,EAAW,KAAK,KAC3C,OAAC,EAAAG,QAAA,CAAO,QAAQ,YAAa,SAAAF,EAAa,KAAK,GACjD,GACF,GACF,CAEJ,EAEMG,EAA0B,EAAAC,QAAM,WAAyD,CAACC,EAAOC,IAAQ,CAC7G,KAAM,CAAE,MAAAC,EAAQ,CAAC,EAAG,SAAAC,CAAS,EAAIH,EAAM,KAEjCI,EAAWC,GAAyC,CACxD,OAAQA,EAAO,CACb,IAAK,OACH,MAAO,IACT,IAAK,OACH,MAAO,GACT,IAAK,YACH,MAAO,EACX,CACF,EAEA,SACE,QAAC,WAAQ,uBAAqB,0BAA0B,IAAKJ,EAAK,UAAU,GAC1E,oBAAC,QAAK,UAAU,SACb,SAAAC,EAAM,IAAI,CAACb,EAAMiB,OAChB,OAAC,YAAqB,KAAMF,EAAQf,EAAK,KAAK,EAC5C,mBAACD,EAAA,CAAU,KAAMC,EAAM,GADViB,CAEf,CACD,EACH,EACCH,GAAU,MAAM,OAAS,KACxB,OAAC,YAAS,UAAU,mBAClB,mBAAC,mBAAgB,UAAU,OACxB,SAAAA,EAAS,MAAM,IAAI,CAACd,EAAMiB,OACzB,OAAC,gBAAyB,UAAU,qDAClC,mBAAClB,EAAA,CAAU,KAAMC,EAAM,GADNiB,CAEnB,CACD,EACH,EACF,EACE,MACN,CAEJ,CAAC,EAED,IAAO7B,KAAQ,cAAWqB,CAAuB",
+  "names": ["MultiLayoutGraphicBlock_exports", "__export", "MultiLayoutGraphicBlock_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_Styles", "import_picture", "import_button", "import_heading", "import_text", "import_carousel", "import_gird", "ItemBlock", "item", "theme", "title", "description", "imageUrl", "primaryBtn", "secondaryBtn", "Picture", "Button", "MultiLayoutGraphicBlock", "React", "props", "ref", "items", "carousel", "getSpan", "width", "index"]
 }

package/dist/cjs/biz-components/MultiLayoutGraphicBlock/types.d.ts

@@ -1,20 +1,25 @@
 import type { Theme } from '../../types/props';
+export type Item = {
+    theme: Theme;
+    title: string;
+    description: string;
+    imageUrl: string;
+    primaryBtn: {
+        text: string;
+        link: string;
+    };
+    secondaryBtn: {
+        text: string;
+        link: string;
+    };
+};
 export type MultiLayoutGraphicBlockProps = {
     data: {
-        layout: 'single-row' | 'grid-2-1' | 'grid-1-2' | 'grid-3' | 'grid-2x2' | 'grid-1-3' | 'grid-1-2-2' | 'grid-2-2-1' | 'grid-1-4';
-        blocks: {
-            theme: Theme;
-            title: string;
-            description: string;
-            imageUrl: string;
-            primaryBtn: {
-                text: string;
-                link: string;
-            };
-            secondaryBtn: {
-                text: string;
-                link: string;
-            }[];
+        items: ({
+            width: 'full' | 'half' | 'one-third';
+        } & Item)[];
+        carousel: {
+            items: Item[];
         };
     };
     className?: string;

package/dist/cjs/biz-components/MultiLayoutGraphicBlock/types.js

@@ -1,2 +1,2 @@
-"use strict";var g=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var o=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var p=(i,r,s,e)=>{if(r&&typeof r=="object"||typeof r=="function")for(let t of o(r))!d.call(i,t)&&t!==s&&g(i,t,{get:()=>r[t],enumerable:!(e=n(r,t))||e.enumerable});return i};var a=i=>p(g({},"__esModule",{value:!0}),i);var l={};module.exports=a(l);
+"use strict";var s=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var o=Object.prototype.hasOwnProperty;var a=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of p(t))!o.call(e,i)&&i!==n&&s(e,i,{get:()=>t[i],enumerable:!(r=m(t,i))||r.enumerable});return e};var l=e=>a(s({},"__esModule",{value:!0}),e);var g={};module.exports=l(g);
 //# sourceMappingURL=types.js.map

package/dist/cjs/biz-components/MultiLayoutGraphicBlock/types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/types.tsx"],
-  "sourcesContent": ["import type { Theme } from '../../types/props'\n\nexport type MultiLayoutGraphicBlockProps = {\n  data: {\n    layout:\n      | 'single-row' // \u4E00\u884C\u4E00\u4E2A\uFF08\u9ED8\u8BA4\uFF09\n      | 'grid-2-1' // \u7B2C\u4E00\u884C2\u4E2A\uFF0C\u7B2C\u4E8C\u884C1\u4E2A\n      | 'grid-1-2' // \u7B2C\u4E00\u884C1\u4E2A\uFF0C\u7B2C\u4E8C\u884C2\u4E2A\n      | 'grid-3' // \u4E00\u884C3\u4E2A\n      | 'grid-2x2' // \u4E24\u884C\u54042\u4E2A\n      | 'grid-1-3' // \u7B2C\u4E00\u884C1\u4E2A\uFF0C\u7B2C\u4E8C\u884C3\u4E2A\n      | 'grid-1-2-2' // \u7B2C\u4E00\u884C1\u4E2A\uFF0C\u7B2C\u4E8C\u884C2\u4E2A\uFF0C\u7B2C\u4E09\u884C2\u4E2A\n      | 'grid-2-2-1' // \u7B2C\u4E00\u884C1\u4E2A\uFF0C\u7B2C\u4E8C\u884C2\u4E2A\uFF0C\u7B2C\u4E09\u884C1\u4E2A\n      | 'grid-1-4' // \u7B2C\u4E00\u884C1\u4E2A\uFF0C\u7B2C\u4E8C\u884C4\u4E2A\uFF0C \u540C\u65F6\u652F\u6301\u7B2C\u4E8C\u884C\u6EDA\u52A8\n    blocks: {\n      theme: Theme\n      title: string\n      description: string\n      imageUrl: string\n      primaryBtn: {\n        text: string\n        link: string\n      }\n      secondaryBtn: {\n        text: string\n        link: string\n      }[]\n    }\n  }\n  className?: string\n}\n"],
+  "sourcesContent": ["import type { Theme } from '../../types/props'\n\nexport type Item = {\n  theme: Theme\n  title: string\n  description: string\n  imageUrl: string\n  primaryBtn: {\n    text: string\n    link: string\n  }\n  secondaryBtn: {\n    text: string\n    link: string\n  }\n}\n\nexport type MultiLayoutGraphicBlockProps = {\n  data: {\n    items: ({\n      width: 'full' | 'half' | 'one-third'\n    } & Item)[]\n    carousel: {\n      items: Item[]\n    }\n  }\n  className?: string\n}\n"],
   "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
   "names": ["types_exports", "__toCommonJS"]
 }

package/dist/cjs/stories/MultiLayoutGraphicBlock.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import MultiLayoutGraphicBlock from '../biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js';
+declare const meta: Meta<typeof MultiLayoutGraphicBlock>;
+export default meta;
+type Story = StoryObj<typeof MultiLayoutGraphicBlock>;
+export declare const Default: Story;
+export declare const ThirdWidth: Story;
+export declare const WithCarousel: Story;

package/dist/cjs/stories/MultiLayoutGraphicBlock.stories.js

@@ -0,0 +1,2 @@
+"use strict";var c=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,d=Object.prototype.hasOwnProperty;var x=(t,e)=>{for(var i in e)l(t,i,{get:e[i],enumerable:!0})},r=(t,e,i,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of h(e))!d.call(t,o)&&o!==i&&l(t,o,{get:()=>e[o],enumerable:!(a=p(e,o))||a.enumerable});return t};var y=(t,e,i)=>(i=t!=null?c(m(t)):{},r(e||!t||!t.__esModule?l(i,"default",{value:t,enumerable:!0}):i,t)),k=t=>r(l({},"__esModule",{value:!0}),t);var G={};x(G,{Default:()=>f,ThirdWidth:()=>U,WithCarousel:()=>M,default:()=>B});module.exports=k(G);var L=require("react"),s=y(require("../biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js"));const u={title:"Biz-Components/MultiLayoutGraphicBlock",component:s.default,tags:["autodocs"],parameters:{layout:"fullscreen",docs:{description:{component:"\u591A\u5E03\u5C40\u56FE\u6587\u533A\u5757\uFF0C\u652F\u6301\u4E0D\u540C\u5BBD\u5EA6\u3001\u4E3B\u9898\u548C\u8F6E\u64AD\u3002"}}}};var B=u;const n=[{theme:"light",title:"\u6807\u98981",description:"\u8FD9\u662F\u7B2C\u4E00\u4E2A\u533A\u5757\u7684\u63CF\u8FF0",imageUrl:"https://placehold.co/1920x1080?text=Image1",primaryBtn:{text:"\u4E3B\u6309\u94AE",link:"#"},secondaryBtn:{text:"\u6B21\u6309\u94AE",link:"#"},width:"full"},{theme:"dark",title:"\u6807\u98982",description:"\u8FD9\u662F\u7B2C\u4E8C\u4E2A\u533A\u5757\u7684\u63CF\u8FF0",imageUrl:"https://placehold.co/200x240?text=Image2",primaryBtn:{text:"\u4E3B\u6309\u94AE",link:"#"},secondaryBtn:{text:"\u6B21\u6309\u94AE",link:"#"},width:"half"},{theme:"light",title:"\u6807\u98983",description:"\u8FD9\u662F\u7B2C\u4E09\u4E2A\u533A\u5757\u7684\u63CF\u8FF0",imageUrl:"https://placehold.co/200x240?text=Image3",primaryBtn:{text:"\u4E3B\u6309\u94AE",link:"#"},secondaryBtn:{text:"\u6B21\u6309\u94AE",link:"#"},width:"half"}],g=[{theme:"dark",title:"\u8F6E\u64AD1",description:"\u8F6E\u64AD\u533A\u57571",imageUrl:"https://placehold.co/200x240?text=Carousel1",primaryBtn:{text:"\u4E3B\u6309\u94AE",link:"#"},secondaryBtn:{text:"\u6B21\u6309\u94AE",link:"#"}},{theme:"light",title:"\u8F6E\u64AD2",description:"\u8F6E\u64AD\u533A\u57572",imageUrl:"https://placehold.co/200x240?text=Carousel2",primaryBtn:{text:"\u4E3B\u6309\u94AE",link:"#"},secondaryBtn:{text:"\u6B21\u6309\u94AE",link:"#"}},{theme:"light",title:"\u8F6E\u64AD3",description:"\u8F6E\u64AD\u533A\u57573",imageUrl:"https://placehold.co/200x240?text=Carousel2",primaryBtn:{text:"\u4E3B\u6309\u94AE",link:"#"},secondaryBtn:{text:"\u6B21\u6309\u94AE",link:"#"}},{theme:"light",title:"\u8F6E\u64AD4",description:"\u8F6E\u64AD\u533A\u57574",imageUrl:"https://placehold.co/200x240?text=Carousel2",primaryBtn:{text:"\u4E3B\u6309\u94AE",link:"#"},secondaryBtn:{text:"\u6B21\u6309\u94AE",link:"#"}},{theme:"light",title:"\u8F6E\u64AD5",description:"\u8F6E\u64AD\u533A\u57575",imageUrl:"https://placehold.co/200x240?text=Carousel2",primaryBtn:{text:"\u4E3B\u6309\u94AE",link:"#"},secondaryBtn:{text:"\u6B21\u6309\u94AE",link:"#"}}],f={args:{data:{items:n,carousel:{items:[]}}}},U={args:{data:{items:[{theme:"light",title:"\u6807\u98981",description:"\u8FD9\u662F\u7B2C\u4E00\u4E2A\u533A\u5757\u7684\u63CF\u8FF0",imageUrl:"https://placehold.co/1920x1080?text=Image1",primaryBtn:{text:"\u4E3B\u6309\u94AE",link:"#"},secondaryBtn:{text:"\u6B21\u6309\u94AE",link:"#"},width:"full"},{theme:"dark",title:"\u6807\u98982",description:"\u8FD9\u662F\u7B2C\u4E8C\u4E2A\u533A\u5757\u7684\u63CF\u8FF0",imageUrl:"https://placehold.co/200x240?text=Image2",primaryBtn:{text:"\u4E3B\u6309\u94AE",link:"#"},secondaryBtn:{text:"\u6B21\u6309\u94AE",link:"#"},width:"one-third"},{theme:"light",title:"\u6807\u98983",description:"\u8FD9\u662F\u7B2C\u4E09\u4E2A\u533A\u5757\u7684\u63CF\u8FF0",imageUrl:"https://placehold.co/200x240?text=Image3",primaryBtn:{text:"\u4E3B\u6309\u94AE",link:"#"},secondaryBtn:{text:"\u6B21\u6309\u94AE",link:"#"},width:"one-third"},{theme:"light",title:"\u6807\u98984",description:"\u8FD9\u662F\u7B2C4\u4E2A\u533A\u5757\u7684\u63CF\u8FF0",imageUrl:"https://placehold.co/200x240?text=Image3",primaryBtn:{text:"\u4E3B\u6309\u94AE",link:"#"},secondaryBtn:{text:"\u6B21\u6309\u94AE",link:"#"},width:"one-third"}]}}},M={args:{data:{items:n.slice(0,1),carousel:{items:g}}}};
+//# sourceMappingURL=MultiLayoutGraphicBlock.stories.js.map

package/dist/cjs/stories/MultiLayoutGraphicBlock.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/stories/MultiLayoutGraphicBlock.stories.tsx"],
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport React from 'react'\nimport MultiLayoutGraphicBlock from '../biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js'\nimport type { MultiLayoutGraphicBlockProps } from '../biz-components/MultiLayoutGraphicBlock/types.js'\n\nconst meta: Meta<typeof MultiLayoutGraphicBlock> = {\n  title: 'Biz-Components/MultiLayoutGraphicBlock',\n  component: MultiLayoutGraphicBlock,\n  tags: ['autodocs'],\n  parameters: {\n    layout: 'fullscreen',\n    docs: {\n      description: {\n        component: '\u591A\u5E03\u5C40\u56FE\u6587\u533A\u5757\uFF0C\u652F\u6301\u4E0D\u540C\u5BBD\u5EA6\u3001\u4E3B\u9898\u548C\u8F6E\u64AD\u3002',\n      },\n    },\n  },\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof MultiLayoutGraphicBlock>\n\nconst baseItems = [\n  {\n    theme: 'light',\n    title: '\u6807\u98981',\n    description: '\u8FD9\u662F\u7B2C\u4E00\u4E2A\u533A\u5757\u7684\u63CF\u8FF0',\n    imageUrl: 'https://placehold.co/1920x1080?text=Image1',\n    primaryBtn: { text: '\u4E3B\u6309\u94AE', link: '#' },\n    secondaryBtn: { text: '\u6B21\u6309\u94AE', link: '#' },\n    width: 'full' as const,\n  },\n  {\n    theme: 'dark',\n    title: '\u6807\u98982',\n    description: '\u8FD9\u662F\u7B2C\u4E8C\u4E2A\u533A\u5757\u7684\u63CF\u8FF0',\n    imageUrl: 'https://placehold.co/200x240?text=Image2',\n    primaryBtn: { text: '\u4E3B\u6309\u94AE', link: '#' },\n    secondaryBtn: { text: '\u6B21\u6309\u94AE', link: '#' },\n    width: 'half' as const,\n  },\n  {\n    theme: 'light',\n    title: '\u6807\u98983',\n    description: '\u8FD9\u662F\u7B2C\u4E09\u4E2A\u533A\u5757\u7684\u63CF\u8FF0',\n    imageUrl: 'https://placehold.co/200x240?text=Image3',\n    primaryBtn: { text: '\u4E3B\u6309\u94AE', link: '#' },\n    secondaryBtn: { text: '\u6B21\u6309\u94AE', link: '#' },\n    width: 'half' as const,\n  },\n]\n\nconst carouselItems = [\n  {\n    theme: 'dark',\n    title: '\u8F6E\u64AD1',\n    description: '\u8F6E\u64AD\u533A\u57571',\n    imageUrl: 'https://placehold.co/200x240?text=Carousel1',\n    primaryBtn: { text: '\u4E3B\u6309\u94AE', link: '#' },\n    secondaryBtn: { text: '\u6B21\u6309\u94AE', link: '#' },\n  },\n  {\n    theme: 'light',\n    title: '\u8F6E\u64AD2',\n    description: '\u8F6E\u64AD\u533A\u57572',\n    imageUrl: 'https://placehold.co/200x240?text=Carousel2',\n    primaryBtn: { text: '\u4E3B\u6309\u94AE', link: '#' },\n    secondaryBtn: { text: '\u6B21\u6309\u94AE', link: '#' },\n  },\n  {\n    theme: 'light',\n    title: '\u8F6E\u64AD3',\n    description: '\u8F6E\u64AD\u533A\u57573',\n    imageUrl: 'https://placehold.co/200x240?text=Carousel2',\n    primaryBtn: { text: '\u4E3B\u6309\u94AE', link: '#' },\n    secondaryBtn: { text: '\u6B21\u6309\u94AE', link: '#' },\n  },\n  {\n    theme: 'light',\n    title: '\u8F6E\u64AD4',\n    description: '\u8F6E\u64AD\u533A\u57574',\n    imageUrl: 'https://placehold.co/200x240?text=Carousel2',\n    primaryBtn: { text: '\u4E3B\u6309\u94AE', link: '#' },\n    secondaryBtn: { text: '\u6B21\u6309\u94AE', link: '#' },\n  },\n  {\n    theme: 'light',\n    title: '\u8F6E\u64AD5',\n    description: '\u8F6E\u64AD\u533A\u57575',\n    imageUrl: 'https://placehold.co/200x240?text=Carousel2',\n    primaryBtn: { text: '\u4E3B\u6309\u94AE', link: '#' },\n    secondaryBtn: { text: '\u6B21\u6309\u94AE', link: '#' },\n  },\n]\n\nexport const Default: Story = {\n  args: {\n    data: {\n      items: baseItems,\n      carousel: { items: [] },\n    },\n  } as MultiLayoutGraphicBlockProps,\n}\n\nexport const ThirdWidth: Story = {\n  args: {\n    data: {\n      items: [\n        {\n          theme: 'light',\n          title: '\u6807\u98981',\n          description: '\u8FD9\u662F\u7B2C\u4E00\u4E2A\u533A\u5757\u7684\u63CF\u8FF0',\n          imageUrl: 'https://placehold.co/1920x1080?text=Image1',\n          primaryBtn: { text: '\u4E3B\u6309\u94AE', link: '#' },\n          secondaryBtn: { text: '\u6B21\u6309\u94AE', link: '#' },\n          width: 'full' as const,\n        },\n        {\n          theme: 'dark',\n          title: '\u6807\u98982',\n          description: '\u8FD9\u662F\u7B2C\u4E8C\u4E2A\u533A\u5757\u7684\u63CF\u8FF0',\n          imageUrl: 'https://placehold.co/200x240?text=Image2',\n          primaryBtn: { text: '\u4E3B\u6309\u94AE', link: '#' },\n          secondaryBtn: { text: '\u6B21\u6309\u94AE', link: '#' },\n          width: 'one-third' as const,\n        },\n        {\n          theme: 'light',\n          title: '\u6807\u98983',\n          description: '\u8FD9\u662F\u7B2C\u4E09\u4E2A\u533A\u5757\u7684\u63CF\u8FF0',\n          imageUrl: 'https://placehold.co/200x240?text=Image3',\n          primaryBtn: { text: '\u4E3B\u6309\u94AE', link: '#' },\n          secondaryBtn: { text: '\u6B21\u6309\u94AE', link: '#' },\n          width: 'one-third' as const,\n        },\n        {\n          theme: 'light',\n          title: '\u6807\u98984',\n          description: '\u8FD9\u662F\u7B2C4\u4E2A\u533A\u5757\u7684\u63CF\u8FF0',\n          imageUrl: 'https://placehold.co/200x240?text=Image3',\n          primaryBtn: { text: '\u4E3B\u6309\u94AE', link: '#' },\n          secondaryBtn: { text: '\u6B21\u6309\u94AE', link: '#' },\n          width: 'one-third' as const,\n        },\n      ],\n    },\n  } as MultiLayoutGraphicBlockProps,\n}\n\nexport const WithCarousel: Story = {\n  args: {\n    data: {\n      items: baseItems.slice(0, 1),\n      carousel: { items: carouselItems },\n    },\n  } as MultiLayoutGraphicBlockProps,\n}\n"],
+  "mappings": "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",
+  "names": ["MultiLayoutGraphicBlock_stories_exports", "__export", "Default", "ThirdWidth", "WithCarousel", "MultiLayoutGraphicBlock_stories_default", "__toCommonJS", "import_react", "import_MultiLayoutGraphicBlock", "meta", "MultiLayoutGraphicBlock", "baseItems", "carouselItems"]
+}

package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js

@@ -1,2 +1,2 @@
-import{jsx as r}from"react/jsx-runtime";import e from"react";import{withStyles as o}from"../../shared/Styles.js";const a=e.forwardRef((i,d)=>{const{layout:t}=i.data;return r("div",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:d,children:(()=>{switch(t){case"single-row":return r("div",{children:"single-row"});case"grid-2-1":return r("div",{children:"grid-2-1"});case"grid-1-2":return r("div",{children:"grid-1-2"});case"grid-3":return r("div",{children:"grid-3"});case"grid-2x2":return r("div",{children:"grid-2x2"});case"grid-1-3":return r("div",{children:"grid-1-3"});case"grid-1-2-2":return r("div",{children:"grid-1-2-2"});case"grid-2-2-1":return r("div",{children:"grid-2-2-1"});case"grid-1-4":return r("div",{children:"grid-1-4"})}})()})});var u=o(a);export{u as default};
+import{jsx as t,jsxs as i}from"react/jsx-runtime";import n from"react";import{withStyles as u}from"../../shared/Styles.js";import d from"../../components/picture.js";import p from"../../components/button.js";import{Heading as f}from"../../components/heading.js";import{Text as h}from"../../components/text.js";import{Carousel as y,CarouselContent as v,CarouselItem as x}from"../../components/carousel.js";import{Grid as N,GridItem as k}from"../../components/gird.js";const c=({item:o})=>{const{theme:s,title:l,description:r,imageUrl:m,primaryBtn:e,secondaryBtn:a}=o;return i("div",{className:`item-wrapper relative w-full border ${s==="dark"?"aiui-dark":"aiui-light"}`,children:[t(d,{source:m,className:"inset-0"}),i("div",{className:"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3",children:[i("div",{children:[t(f,{className:"item-title",children:l}),t(h,{className:"item-description",children:r})]}),i("div",{className:"flex gap-2",children:[t(p,{variant:"primary",children:e.text}),t(p,{variant:"secondary",children:a.text})]})]})]})},B=n.forwardRef((o,s)=>{const{items:l=[],carousel:r}=o.data,m=e=>{switch(e){case"full":return 12;case"half":return 6;case"one-third":return 4}};return i("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:s,className:"",children:[t(N,{className:"w-full",children:l.map((e,a)=>t(k,{span:m(e.width),children:t(c,{item:e})},a))}),r?.items.length>0?t(y,{className:"laptop:mt-4 mt-3",children:t(v,{className:"flex",children:r.items.map((e,a)=>t(x,{className:"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5",children:t(c,{item:e})},a))})}):null]})});var H=u(B);export{H as default};
 //# sourceMappingURL=MultiLayoutGraphicBlock.js.map

package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport type { MultiLayoutGraphicBlockProps } from './types'\nimport { withStyles } from '../../shared/Styles.js'\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n  const { layout } = props.data\n\n  const renderedContent = () => {\n    switch (layout) {\n      case 'single-row':\n        return <div>single-row</div>\n      case 'grid-2-1':\n        return <div>grid-2-1</div>\n      case 'grid-1-2':\n        return <div>grid-1-2</div>\n      case 'grid-3':\n        return <div>grid-3</div>\n      case 'grid-2x2':\n        return <div>grid-2x2</div>\n      case 'grid-1-3':\n        return <div>grid-1-3</div>\n      case 'grid-1-2-2':\n        return <div>grid-1-2-2</div>\n      case 'grid-2-2-1':\n        return <div>grid-2-2-1</div>\n      case 'grid-1-4':\n        return <div>grid-1-4</div>\n    }\n  }\n\n  return (\n    <div data-ui-component-id=\"MultiLayoutGraphicBlock\" ref={ref}>\n      {renderedContent()}\n    </div>\n  )\n})\n\nexport default withStyles(MultiLayoutGraphicBlock)\n"],
-  "mappings": "AAUe,cAAAA,MAAA,oBAVf,OAAOC,MAAW,QAElB,OAAS,cAAAC,MAAkB,yBAE3B,MAAMC,EAA0BF,EAAM,WAAyD,CAACG,EAAOC,IAAQ,CAC7G,KAAM,CAAE,OAAAC,CAAO,EAAIF,EAAM,KAyBzB,OACEJ,EAAC,OAAI,uBAAqB,0BAA0B,IAAKK,EACtD,UAzBmB,IAAM,CAC5B,OAAQC,EAAQ,CACd,IAAK,aACH,OAAON,EAAC,OAAI,sBAAU,EACxB,IAAK,WACH,OAAOA,EAAC,OAAI,oBAAQ,EACtB,IAAK,WACH,OAAOA,EAAC,OAAI,oBAAQ,EACtB,IAAK,SACH,OAAOA,EAAC,OAAI,kBAAM,EACpB,IAAK,WACH,OAAOA,EAAC,OAAI,oBAAQ,EACtB,IAAK,WACH,OAAOA,EAAC,OAAI,oBAAQ,EACtB,IAAK,aACH,OAAOA,EAAC,OAAI,sBAAU,EACxB,IAAK,aACH,OAAOA,EAAC,OAAI,sBAAU,EACxB,IAAK,WACH,OAAOA,EAAC,OAAI,oBAAQ,CACxB,CACF,GAIqB,EACnB,CAEJ,CAAC,EAED,IAAOO,EAAQL,EAAWC,CAAuB",
-  "names": ["jsx", "React", "withStyles", "MultiLayoutGraphicBlock", "props", "ref", "layout", "MultiLayoutGraphicBlock_default"]
+  "sourcesContent": ["import React from 'react'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport { Carousel, CarouselContent, CarouselItem } from '../../components/carousel.js'\nimport { Grid, GridItem } from '../../components/gird.js'\n\nconst ItemBlock = ({ item }: { item: Item }) => {\n  const { theme, title, description, imageUrl, primaryBtn, secondaryBtn } = item\n\n  return (\n    <div className={`item-wrapper relative w-full border ${theme === 'dark' ? 'aiui-dark' : 'aiui-light'}`}>\n      <Picture source={imageUrl} className=\"inset-0\" />\n      <div className=\"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3\">\n        <div>\n          <Heading className=\"item-title\">{title}</Heading>\n          <Text className=\"item-description\">{description}</Text>\n        </div>\n        <div className=\"flex gap-2\">\n          <Button variant=\"primary\">{primaryBtn.text}</Button>\n          <Button variant=\"secondary\">{secondaryBtn.text}</Button>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n  const { items = [], carousel } = props.data\n\n  const getSpan = (width: 'full' | 'half' | 'one-third') => {\n    switch (width) {\n      case 'full':\n        return 12\n      case 'half':\n        return 6\n      case 'one-third':\n        return 4\n    }\n  }\n\n  return (\n    <section data-ui-component-id=\"MultiLayoutGraphicBlock\" ref={ref} className=\"\">\n      <Grid className=\"w-full\">\n        {items.map((item, index) => (\n          <GridItem key={index} span={getSpan(item.width)}>\n            <ItemBlock item={item} />\n          </GridItem>\n        ))}\n      </Grid>\n      {carousel?.items.length > 0 ? (\n        <Carousel className=\"laptop:mt-4 mt-3\">\n          <CarouselContent className=\"flex\">\n            {carousel.items.map((item, index) => (\n              <CarouselItem key={index} className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\">\n                <ItemBlock item={item} />\n              </CarouselItem>\n            ))}\n          </CarouselContent>\n        </Carousel>\n      ) : null}\n    </section>\n  )\n})\n\nexport default withStyles(MultiLayoutGraphicBlock)\n"],
+  "mappings": "AAeM,cAAAA,EAEE,QAAAC,MAFF,oBAfN,OAAOC,MAAW,QAElB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAa,8BACpB,OAAOC,MAAY,6BACnB,OAAS,WAAAC,MAAe,8BACxB,OAAS,QAAAC,MAAY,2BACrB,OAAS,YAAAC,EAAU,mBAAAC,EAAiB,gBAAAC,MAAoB,+BACxD,OAAS,QAAAC,EAAM,YAAAC,MAAgB,2BAE/B,MAAMC,EAAY,CAAC,CAAE,KAAAC,CAAK,IAAsB,CAC9C,KAAM,CAAE,MAAAC,EAAO,MAAAC,EAAO,YAAAC,EAAa,SAAAC,EAAU,WAAAC,EAAY,aAAAC,CAAa,EAAIN,EAE1E,OACEb,EAAC,OAAI,UAAW,uCAAuCc,IAAU,OAAS,YAAc,YAAY,GAClG,UAAAf,EAACI,EAAA,CAAQ,OAAQc,EAAU,UAAU,UAAU,EAC/CjB,EAAC,OAAI,UAAU,kFACb,UAAAA,EAAC,OACC,UAAAD,EAACM,EAAA,CAAQ,UAAU,aAAc,SAAAU,EAAM,EACvChB,EAACO,EAAA,CAAK,UAAU,mBAAoB,SAAAU,EAAY,GAClD,EACAhB,EAAC,OAAI,UAAU,aACb,UAAAD,EAACK,EAAA,CAAO,QAAQ,UAAW,SAAAc,EAAW,KAAK,EAC3CnB,EAACK,EAAA,CAAO,QAAQ,YAAa,SAAAe,EAAa,KAAK,GACjD,GACF,GACF,CAEJ,EAEMC,EAA0BnB,EAAM,WAAyD,CAACoB,EAAOC,IAAQ,CAC7G,KAAM,CAAE,MAAAC,EAAQ,CAAC,EAAG,SAAAC,CAAS,EAAIH,EAAM,KAEjCI,EAAWC,GAAyC,CACxD,OAAQA,EAAO,CACb,IAAK,OACH,MAAO,IACT,IAAK,OACH,MAAO,GACT,IAAK,YACH,MAAO,EACX,CACF,EAEA,OACE1B,EAAC,WAAQ,uBAAqB,0BAA0B,IAAKsB,EAAK,UAAU,GAC1E,UAAAvB,EAACW,EAAA,CAAK,UAAU,SACb,SAAAa,EAAM,IAAI,CAACV,EAAMc,IAChB5B,EAACY,EAAA,CAAqB,KAAMc,EAAQZ,EAAK,KAAK,EAC5C,SAAAd,EAACa,EAAA,CAAU,KAAMC,EAAM,GADVc,CAEf,CACD,EACH,EACCH,GAAU,MAAM,OAAS,EACxBzB,EAACQ,EAAA,CAAS,UAAU,mBAClB,SAAAR,EAACS,EAAA,CAAgB,UAAU,OACxB,SAAAgB,EAAS,MAAM,IAAI,CAACX,EAAMc,IACzB5B,EAACU,EAAA,CAAyB,UAAU,qDAClC,SAAAV,EAACa,EAAA,CAAU,KAAMC,EAAM,GADNc,CAEnB,CACD,EACH,EACF,EACE,MACN,CAEJ,CAAC,EAED,IAAOC,EAAQ1B,EAAWkB,CAAuB",
+  "names": ["jsx", "jsxs", "React", "withStyles", "Picture", "Button", "Heading", "Text", "Carousel", "CarouselContent", "CarouselItem", "Grid", "GridItem", "ItemBlock", "item", "theme", "title", "description", "imageUrl", "primaryBtn", "secondaryBtn", "MultiLayoutGraphicBlock", "props", "ref", "items", "carousel", "getSpan", "width", "index", "MultiLayoutGraphicBlock_default"]
 }

package/dist/esm/biz-components/MultiLayoutGraphicBlock/types.d.ts

@@ -1,20 +1,25 @@
 import type { Theme } from '../../types/props';
+export type Item = {
+    theme: Theme;
+    title: string;
+    description: string;
+    imageUrl: string;
+    primaryBtn: {
+        text: string;
+        link: string;
+    };
+    secondaryBtn: {
+        text: string;
+        link: string;
+    };
+};
 export type MultiLayoutGraphicBlockProps = {
     data: {
-        layout: 'single-row' | 'grid-2-1' | 'grid-1-2' | 'grid-3' | 'grid-2x2' | 'grid-1-3' | 'grid-1-2-2' | 'grid-2-2-1' | 'grid-1-4';
-        blocks: {
-            theme: Theme;
-            title: string;
-            description: string;
-            imageUrl: string;
-            primaryBtn: {
-                text: string;
-                link: string;
-            };
-            secondaryBtn: {
-                text: string;
-                link: string;
-            }[];
+        items: ({
+            width: 'full' | 'half' | 'one-third';
+        } & Item)[];
+        carousel: {
+            items: Item[];
         };
     };
     className?: string;

package/dist/esm/stories/MultiLayoutGraphicBlock.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import MultiLayoutGraphicBlock from '../biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js';
+declare const meta: Meta<typeof MultiLayoutGraphicBlock>;
+export default meta;
+type Story = StoryObj<typeof MultiLayoutGraphicBlock>;
+export declare const Default: Story;
+export declare const ThirdWidth: Story;
+export declare const WithCarousel: Story;

package/dist/esm/stories/MultiLayoutGraphicBlock.stories.js

@@ -0,0 +1,2 @@
+import"react";import e from"../biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js";const i={title:"Biz-Components/MultiLayoutGraphicBlock",component:e,tags:["autodocs"],parameters:{layout:"fullscreen",docs:{description:{component:"\u591A\u5E03\u5C40\u56FE\u6587\u533A\u5757\uFF0C\u652F\u6301\u4E0D\u540C\u5BBD\u5EA6\u3001\u4E3B\u9898\u548C\u8F6E\u64AD\u3002"}}}};var n=i;const t=[{theme:"light",title:"\u6807\u98981",description:"\u8FD9\u662F\u7B2C\u4E00\u4E2A\u533A\u5757\u7684\u63CF\u8FF0",imageUrl:"https://placehold.co/1920x1080?text=Image1",primaryBtn:{text:"\u4E3B\u6309\u94AE",link:"#"},secondaryBtn:{text:"\u6B21\u6309\u94AE",link:"#"},width:"full"},{theme:"dark",title:"\u6807\u98982",description:"\u8FD9\u662F\u7B2C\u4E8C\u4E2A\u533A\u5757\u7684\u63CF\u8FF0",imageUrl:"https://placehold.co/200x240?text=Image2",primaryBtn:{text:"\u4E3B\u6309\u94AE",link:"#"},secondaryBtn:{text:"\u6B21\u6309\u94AE",link:"#"},width:"half"},{theme:"light",title:"\u6807\u98983",description:"\u8FD9\u662F\u7B2C\u4E09\u4E2A\u533A\u5757\u7684\u63CF\u8FF0",imageUrl:"https://placehold.co/200x240?text=Image3",primaryBtn:{text:"\u4E3B\u6309\u94AE",link:"#"},secondaryBtn:{text:"\u6B21\u6309\u94AE",link:"#"},width:"half"}],o=[{theme:"dark",title:"\u8F6E\u64AD1",description:"\u8F6E\u64AD\u533A\u57571",imageUrl:"https://placehold.co/200x240?text=Carousel1",primaryBtn:{text:"\u4E3B\u6309\u94AE",link:"#"},secondaryBtn:{text:"\u6B21\u6309\u94AE",link:"#"}},{theme:"light",title:"\u8F6E\u64AD2",description:"\u8F6E\u64AD\u533A\u57572",imageUrl:"https://placehold.co/200x240?text=Carousel2",primaryBtn:{text:"\u4E3B\u6309\u94AE",link:"#"},secondaryBtn:{text:"\u6B21\u6309\u94AE",link:"#"}},{theme:"light",title:"\u8F6E\u64AD3",description:"\u8F6E\u64AD\u533A\u57573",imageUrl:"https://placehold.co/200x240?text=Carousel2",primaryBtn:{text:"\u4E3B\u6309\u94AE",link:"#"},secondaryBtn:{text:"\u6B21\u6309\u94AE",link:"#"}},{theme:"light",title:"\u8F6E\u64AD4",description:"\u8F6E\u64AD\u533A\u57574",imageUrl:"https://placehold.co/200x240?text=Carousel2",primaryBtn:{text:"\u4E3B\u6309\u94AE",link:"#"},secondaryBtn:{text:"\u6B21\u6309\u94AE",link:"#"}},{theme:"light",title:"\u8F6E\u64AD5",description:"\u8F6E\u64AD\u533A\u57575",imageUrl:"https://placehold.co/200x240?text=Carousel2",primaryBtn:{text:"\u4E3B\u6309\u94AE",link:"#"},secondaryBtn:{text:"\u6B21\u6309\u94AE",link:"#"}}],s={args:{data:{items:t,carousel:{items:[]}}}},c={args:{data:{items:[{theme:"light",title:"\u6807\u98981",description:"\u8FD9\u662F\u7B2C\u4E00\u4E2A\u533A\u5757\u7684\u63CF\u8FF0",imageUrl:"https://placehold.co/1920x1080?text=Image1",primaryBtn:{text:"\u4E3B\u6309\u94AE",link:"#"},secondaryBtn:{text:"\u6B21\u6309\u94AE",link:"#"},width:"full"},{theme:"dark",title:"\u6807\u98982",description:"\u8FD9\u662F\u7B2C\u4E8C\u4E2A\u533A\u5757\u7684\u63CF\u8FF0",imageUrl:"https://placehold.co/200x240?text=Image2",primaryBtn:{text:"\u4E3B\u6309\u94AE",link:"#"},secondaryBtn:{text:"\u6B21\u6309\u94AE",link:"#"},width:"one-third"},{theme:"light",title:"\u6807\u98983",description:"\u8FD9\u662F\u7B2C\u4E09\u4E2A\u533A\u5757\u7684\u63CF\u8FF0",imageUrl:"https://placehold.co/200x240?text=Image3",primaryBtn:{text:"\u4E3B\u6309\u94AE",link:"#"},secondaryBtn:{text:"\u6B21\u6309\u94AE",link:"#"},width:"one-third"},{theme:"light",title:"\u6807\u98984",description:"\u8FD9\u662F\u7B2C4\u4E2A\u533A\u5757\u7684\u63CF\u8FF0",imageUrl:"https://placehold.co/200x240?text=Image3",primaryBtn:{text:"\u4E3B\u6309\u94AE",link:"#"},secondaryBtn:{text:"\u6B21\u6309\u94AE",link:"#"},width:"one-third"}]}}},p={args:{data:{items:t.slice(0,1),carousel:{items:o}}}};export{s as Default,c as ThirdWidth,p as WithCarousel,n as default};
+//# sourceMappingURL=MultiLayoutGraphicBlock.stories.js.map

package/dist/esm/stories/MultiLayoutGraphicBlock.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/stories/MultiLayoutGraphicBlock.stories.tsx"],
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport React from 'react'\nimport MultiLayoutGraphicBlock from '../biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js'\nimport type { MultiLayoutGraphicBlockProps } from '../biz-components/MultiLayoutGraphicBlock/types.js'\n\nconst meta: Meta<typeof MultiLayoutGraphicBlock> = {\n  title: 'Biz-Components/MultiLayoutGraphicBlock',\n  component: MultiLayoutGraphicBlock,\n  tags: ['autodocs'],\n  parameters: {\n    layout: 'fullscreen',\n    docs: {\n      description: {\n        component: '\u591A\u5E03\u5C40\u56FE\u6587\u533A\u5757\uFF0C\u652F\u6301\u4E0D\u540C\u5BBD\u5EA6\u3001\u4E3B\u9898\u548C\u8F6E\u64AD\u3002',\n      },\n    },\n  },\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof MultiLayoutGraphicBlock>\n\nconst baseItems = [\n  {\n    theme: 'light',\n    title: '\u6807\u98981',\n    description: '\u8FD9\u662F\u7B2C\u4E00\u4E2A\u533A\u5757\u7684\u63CF\u8FF0',\n    imageUrl: 'https://placehold.co/1920x1080?text=Image1',\n    primaryBtn: { text: '\u4E3B\u6309\u94AE', link: '#' },\n    secondaryBtn: { text: '\u6B21\u6309\u94AE', link: '#' },\n    width: 'full' as const,\n  },\n  {\n    theme: 'dark',\n    title: '\u6807\u98982',\n    description: '\u8FD9\u662F\u7B2C\u4E8C\u4E2A\u533A\u5757\u7684\u63CF\u8FF0',\n    imageUrl: 'https://placehold.co/200x240?text=Image2',\n    primaryBtn: { text: '\u4E3B\u6309\u94AE', link: '#' },\n    secondaryBtn: { text: '\u6B21\u6309\u94AE', link: '#' },\n    width: 'half' as const,\n  },\n  {\n    theme: 'light',\n    title: '\u6807\u98983',\n    description: '\u8FD9\u662F\u7B2C\u4E09\u4E2A\u533A\u5757\u7684\u63CF\u8FF0',\n    imageUrl: 'https://placehold.co/200x240?text=Image3',\n    primaryBtn: { text: '\u4E3B\u6309\u94AE', link: '#' },\n    secondaryBtn: { text: '\u6B21\u6309\u94AE', link: '#' },\n    width: 'half' as const,\n  },\n]\n\nconst carouselItems = [\n  {\n    theme: 'dark',\n    title: '\u8F6E\u64AD1',\n    description: '\u8F6E\u64AD\u533A\u57571',\n    imageUrl: 'https://placehold.co/200x240?text=Carousel1',\n    primaryBtn: { text: '\u4E3B\u6309\u94AE', link: '#' },\n    secondaryBtn: { text: '\u6B21\u6309\u94AE', link: '#' },\n  },\n  {\n    theme: 'light',\n    title: '\u8F6E\u64AD2',\n    description: '\u8F6E\u64AD\u533A\u57572',\n    imageUrl: 'https://placehold.co/200x240?text=Carousel2',\n    primaryBtn: { text: '\u4E3B\u6309\u94AE', link: '#' },\n    secondaryBtn: { text: '\u6B21\u6309\u94AE', link: '#' },\n  },\n  {\n    theme: 'light',\n    title: '\u8F6E\u64AD3',\n    description: '\u8F6E\u64AD\u533A\u57573',\n    imageUrl: 'https://placehold.co/200x240?text=Carousel2',\n    primaryBtn: { text: '\u4E3B\u6309\u94AE', link: '#' },\n    secondaryBtn: { text: '\u6B21\u6309\u94AE', link: '#' },\n  },\n  {\n    theme: 'light',\n    title: '\u8F6E\u64AD4',\n    description: '\u8F6E\u64AD\u533A\u57574',\n    imageUrl: 'https://placehold.co/200x240?text=Carousel2',\n    primaryBtn: { text: '\u4E3B\u6309\u94AE', link: '#' },\n    secondaryBtn: { text: '\u6B21\u6309\u94AE', link: '#' },\n  },\n  {\n    theme: 'light',\n    title: '\u8F6E\u64AD5',\n    description: '\u8F6E\u64AD\u533A\u57575',\n    imageUrl: 'https://placehold.co/200x240?text=Carousel2',\n    primaryBtn: { text: '\u4E3B\u6309\u94AE', link: '#' },\n    secondaryBtn: { text: '\u6B21\u6309\u94AE', link: '#' },\n  },\n]\n\nexport const Default: Story = {\n  args: {\n    data: {\n      items: baseItems,\n      carousel: { items: [] },\n    },\n  } as MultiLayoutGraphicBlockProps,\n}\n\nexport const ThirdWidth: Story = {\n  args: {\n    data: {\n      items: [\n        {\n          theme: 'light',\n          title: '\u6807\u98981',\n          description: '\u8FD9\u662F\u7B2C\u4E00\u4E2A\u533A\u5757\u7684\u63CF\u8FF0',\n          imageUrl: 'https://placehold.co/1920x1080?text=Image1',\n          primaryBtn: { text: '\u4E3B\u6309\u94AE', link: '#' },\n          secondaryBtn: { text: '\u6B21\u6309\u94AE', link: '#' },\n          width: 'full' as const,\n        },\n        {\n          theme: 'dark',\n          title: '\u6807\u98982',\n          description: '\u8FD9\u662F\u7B2C\u4E8C\u4E2A\u533A\u5757\u7684\u63CF\u8FF0',\n          imageUrl: 'https://placehold.co/200x240?text=Image2',\n          primaryBtn: { text: '\u4E3B\u6309\u94AE', link: '#' },\n          secondaryBtn: { text: '\u6B21\u6309\u94AE', link: '#' },\n          width: 'one-third' as const,\n        },\n        {\n          theme: 'light',\n          title: '\u6807\u98983',\n          description: '\u8FD9\u662F\u7B2C\u4E09\u4E2A\u533A\u5757\u7684\u63CF\u8FF0',\n          imageUrl: 'https://placehold.co/200x240?text=Image3',\n          primaryBtn: { text: '\u4E3B\u6309\u94AE', link: '#' },\n          secondaryBtn: { text: '\u6B21\u6309\u94AE', link: '#' },\n          width: 'one-third' as const,\n        },\n        {\n          theme: 'light',\n          title: '\u6807\u98984',\n          description: '\u8FD9\u662F\u7B2C4\u4E2A\u533A\u5757\u7684\u63CF\u8FF0',\n          imageUrl: 'https://placehold.co/200x240?text=Image3',\n          primaryBtn: { text: '\u4E3B\u6309\u94AE', link: '#' },\n          secondaryBtn: { text: '\u6B21\u6309\u94AE', link: '#' },\n          width: 'one-third' as const,\n        },\n      ],\n    },\n  } as MultiLayoutGraphicBlockProps,\n}\n\nexport const WithCarousel: Story = {\n  args: {\n    data: {\n      items: baseItems.slice(0, 1),\n      carousel: { items: carouselItems },\n    },\n  } as MultiLayoutGraphicBlockProps,\n}\n"],
+  "mappings": "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",
+  "names": ["MultiLayoutGraphicBlock", "meta", "MultiLayoutGraphicBlock_stories_default", "baseItems", "carouselItems", "Default", "ThirdWidth", "WithCarousel"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anker-in/headless-ui",
-  "version": "0.0.27-alpha.24",
+  "version": "0.0.27-alpha.25",
   "type": "commonjs",
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",