npm - @anker-in/headless-ui - Versions diffs - 0.0.29 → 0.0.30 - Mend

@anker-in/headless-ui 0.0.29 → 0.0.30

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.

Files changed (60) hide show

package/dist/cjs/stories/button.stories.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/stories/button.stories.tsx"],
-  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport { SearchIcon } from '@storybook/icons'\n\nimport { Button } from '../components/index.js'\nimport React from 'react'\n\n// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export\nconst meta = {\n  // \u540C\u65F6\u5B9A\u4E49\u4E86\u9875\u9762\u5DE6\u4FA7\u83DC\u5355\n  title: 'Components/Button',\n  component: Button,\n  parameters: {\n    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout\n    layout: 'centered',\n    docs: {\n      description: {\n        component: `\u6309\u94AE\u7EC4\u4EF6, \u5206\u4E3A\u591A\u79CD\u53D8\u4F53\u548C\u5927\u5C0F, \u652F\u6301 loading \u72B6\u6001\u548C\u56FE\u6807`,\n      },\n    },\n  },\n  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs\n  tags: ['autodocs'],\n  // More on argTypes: https://storybook.js.org/docs/api/argtypes\n  argTypes: {\n    variant: {\n      control: {\n        type: 'select',\n      },\n      options: ['primary', 'secondary', 'link', 'ghost'],\n      description: '\u6309\u94AE\u7C7B\u578B, \u63A8\u8350\u4F7F\u7528 primary , secondary \u548C link ; ghost \u5C06\u4F1A\u5E9F\u5F03\uFF0C\u8BF7\u4F7F\u7528 secondary\uFF0C \u4EE3\u66FF',\n    },\n    size: {\n      control: {\n        type: 'select',\n      },\n      options: ['sm', 'base', 'lg', 'icon'],\n      description: '\u6309\u94AE\u5927\u5C0F \u9ED8\u8BA4\u662F base, \u53EF\u9009\u503C: sm, base, lg, icon',\n    },\n    hoverEffect: {\n      description: 'hover \u72B6\u6001\u4E0B\u7684\u52A8\u753B\u6548\u679C\uFF0C\u4EC5\u5728variant\u662Fprimary \u548C secondary \u65F6\u751F\u6548',\n      control: {\n        type: 'select',\n      },\n      options: ['none', 'slide'],\n    },\n  },\n  args: {\n    variant: 'primary',\n    size: 'base',\n    children: 'Button',\n    disabled: false,\n    loading: false,\n    hoverEffect: 'none',\n  },\n} satisfies Meta<typeof Button>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\n// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args\n// args \u4F1A\u4F5C\u4E3A props \u4F20\u9012\u7ED9\u7EC4\u4EF6\n// Story\u7684\u540D\u4F1A\u4F5C\u4E3A\u83DC\u5355\u7684\u540D\u79F0 \u81EA\u52A8\u9996\u5B57\u6BCD\u5927\u5199\u5E76\u6309\u7167\u5927\u5199\u5B57\u6BCD\u62C6\u5206 UseAsButton => Use As Button\n\nexport const Primary: Story = {\n  args: {\n    size: 'lg',\n    children: 'Primary',\n  },\n}\n\nexport const Secondary: Story = {\n  args: {\n    size: 'lg',\n    variant: 'secondary',\n    children: 'Secondary',\n  },\n}\n\nexport const Link: Story = {\n  args: {\n    size: 'lg',\n    variant: 'link',\n    children: 'Link',\n  },\n}\n\nexport const WithIcon: Story = {\n  args: {\n    size: 'lg',\n    children: (\n      <>\n        WithIcon <SearchIcon className=\"ml-2\" />\n      </>\n    ),\n  },\n}\n\nexport const Loading: Story = {\n  args: {\n    size: 'lg',\n    loading: true,\n  },\n}\n\nexport const Aschild: Story = {\n  args: {\n    size: 'lg',\n    asChild: true,\n    children: <a href=\"http://example.com\">as a a tag</a>,\n  },\n}\n\nexport const Spinner: Story = {\n  args: {\n    size: 'lg',\n    loading: true,\n    spinner: (\n      <div className=\"flex animate-pulse flex-row font-bold text-neutral-900\">\n        <svg\n          viewBox=\"0 0 1024 1024\"\n          version=\"1.1\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          p-id=\"2625\"\n          width=\"1rem\"\n          className=\"align-middle\"\n        >\n          <path\n            d=\"M511.882596 287.998081h-0.361244a31.998984 31.998984 0 0 1-31.659415-31.977309v-0.361244c0-0.104761 0.115598-11.722364 0.115598-63.658399V96.000564a31.998984 31.998984 0 1 1 64.001581 0V192.001129c0 52.586273-0.111986 63.88237-0.119211 64.337537a32.002596 32.002596 0 0 1-31.977309 31.659415zM511.998194 959.99842a31.998984 31.998984 0 0 1-31.998984-31.998984v-96.379871c0-51.610915-0.111986-63.174332-0.115598-63.286318s0-0.242033 0-0.361243a31.998984 31.998984 0 0 1 63.997968-0.314283c0 0.455167 0.11921 11.711527 0.11921 64.034093v96.307622a31.998984 31.998984 0 0 1-32.002596 31.998984zM330.899406 363.021212a31.897836 31.897836 0 0 1-22.866739-9.612699c-0.075861-0.075861-8.207461-8.370021-44.931515-45.094076L195.198137 240.429485a31.998984 31.998984 0 0 1 45.256635-45.253022L308.336112 263.057803c37.182834 37.182834 45.090463 45.253022 45.41197 45.578141A31.998984 31.998984 0 0 1 330.899406 363.021212zM806.137421 838.11473a31.901448 31.901448 0 0 1-22.628318-9.374279L715.624151 760.859111c-36.724054-36.724054-45.018214-44.859267-45.097687-44.93874a31.998984 31.998984 0 0 1 44.77618-45.729864c0.32512 0.317895 8.395308 8.229136 45.578142 45.411969l67.88134 67.88134a31.998984 31.998984 0 0 1-22.624705 54.630914zM224.000113 838.11473a31.901448 31.901448 0 0 0 22.628317-9.374279l67.88134-67.88134c36.724054-36.724054 45.021826-44.859267 45.097688-44.93874a31.998984 31.998984 0 0 0-44.776181-45.729864c-0.32512 0.317895-8.395308 8.229136-45.578142 45.411969l-67.88134 67.884953a31.998984 31.998984 0 0 0 22.628318 54.627301zM255.948523 544.058589h-0.361244c-0.104761 0-11.722364-0.115598-63.658399-0.115598H95.942765a31.998984 31.998984 0 1 1 0-64.00158h95.996952c52.586273 0 63.88237 0.111986 64.337538 0.11921a31.998984 31.998984 0 0 1 31.659414 31.97731v0.361244a32.002596 32.002596 0 0 1-31.988146 31.659414zM767.939492 544.058589a32.002596 32.002596 0 0 1-31.995372-31.666639v-0.361244a31.998984 31.998984 0 0 1 31.659415-31.970085c0.455167 0 11.754876-0.11921 64.34115-0.11921h96.000564a31.998984 31.998984 0 0 1 0 64.00158H831.944685c-51.936034 0-63.553638 0.111986-63.665624 0.115598h-0.335957zM692.999446 363.0176a31.998984 31.998984 0 0 1-22.863126-54.381656c0.317895-0.32512 8.229136-8.395308 45.41197-45.578141l67.88134-67.884953A31.998984 31.998984 0 1 1 828.693489 240.429485l-67.892177 67.88134c-31.020013 31.023625-41.644196 41.759794-44.241539 44.393262l-0.697201 0.722488a31.908673 31.908673 0 0 1-22.863126 9.591025z\"\n            fill=\"\"\n            p-id=\"2626\"\n          ></path>\n        </svg>\n        &nbsp;loading...\n      </div>\n    ),\n  },\n}\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,SAAAC,EAAA,YAAAC,EAAA,YAAAC,EAAA,cAAAC,EAAA,YAAAC,EAAA,aAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAV,GA0FM,IAAAW,EAAA,6BAzFNC,EAA2B,4BAE3BC,EAAuB,kCACvBC,EAAkB,iBAGlB,MAAMC,EAAO,CAEX,MAAO,oBACP,UAAW,SACX,WAAY,CAEV,OAAQ,WACR,KAAM,CACJ,YAAa,CACX,UAAW,uIACb,CACF,CACF,EAEA,KAAM,CAAC,UAAU,EAEjB,SAAU,CACR,QAAS,CACP,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,UAAW,YAAa,OAAQ,OAAO,EACjD,YAAa,0KACf,EACA,KAAM,CACJ,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,KAAM,OAAQ,KAAM,MAAM,EACpC,YAAa,0FACf,EACA,YAAa,CACX,YAAa,mIACb,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,OAAQ,OAAO,CAC3B,CACF,EACA,KAAM,CACJ,QAAS,UACT,KAAM,OACN,SAAU,SACV,SAAU,GACV,QAAS,GACT,YAAa,MACf,CACF,EAEA,IAAON,EAAQM,EAOR,MAAMV,EAAiB,CAC5B,KAAM,CACJ,KAAM,KACN,SAAU,SACZ,CACF,EAEaC,EAAmB,CAC9B,KAAM,CACJ,KAAM,KACN,QAAS,YACT,SAAU,WACZ,CACF,EAEaH,EAAc,CACzB,KAAM,CACJ,KAAM,KACN,QAAS,OACT,SAAU,MACZ,CACF,EAEaK,EAAkB,CAC7B,KAAM,CACJ,KAAM,KACN,YACE,oBAAE,yBACS,OAAC,cAAW,UAAU,OAAO,GACxC,CAEJ,CACF,EAEaJ,EAAiB,CAC5B,KAAM,CACJ,KAAM,KACN,QAAS,EACX,CACF,EAEaF,EAAiB,CAC5B,KAAM,CACJ,KAAM,KACN,QAAS,GACT,YAAU,OAAC,KAAE,KAAK,qBAAqB,sBAAU,CACnD,CACF,EAEaK,EAAiB,CAC5B,KAAM,CACJ,KAAM,KACN,QAAS,GACT,WACE,QAAC,OAAI,UAAU,yDACb,oBAAC,OACC,QAAQ,gBACR,QAAQ,MACR,MAAM,6BACN,OAAK,OACL,MAAM,OACN,UAAU,eAEV,mBAAC,QACC,EAAE,o5EACF,KAAK,GACL,OAAK,OACN,EACH,EAAM,kBAER,CAEJ,CACF",
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport { SearchIcon } from '@storybook/icons'\n\nimport { Button } from '../components/index.js'\nimport React from 'react'\n\n// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export\nconst meta = {\n  // \u540C\u65F6\u5B9A\u4E49\u4E86\u9875\u9762\u5DE6\u4FA7\u83DC\u5355\n  title: 'Components/Button',\n  component: Button,\n  parameters: {\n    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout\n    layout: 'centered',\n    docs: {\n      description: {\n        component: `\u6309\u94AE\u7EC4\u4EF6, \u5206\u4E3A\u591A\u79CD\u53D8\u4F53\u548C\u5927\u5C0F, \u652F\u6301 loading \u72B6\u6001\u548C\u56FE\u6807, \u9ED8\u8BA4\u5927\u5C0F\u662Flg, \u81EA\u5E26\u54CD\u5E94\u5F0F\u5C3A\u5BF8`,\n      },\n    },\n  },\n  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs\n  tags: ['autodocs'],\n  // More on argTypes: https://storybook.js.org/docs/api/argtypes\n  argTypes: {\n    variant: {\n      control: {\n        type: 'select',\n      },\n      options: ['primary', 'secondary', 'link', 'ghost'],\n      description: '\u6309\u94AE\u7C7B\u578B, \u63A8\u8350\u4F7F\u7528 primary , secondary \u548C link ; ghost \u5C06\u4F1A\u5E9F\u5F03\uFF0C\u8BF7\u4F7F\u7528 secondary\uFF0C \u4EE3\u66FF',\n    },\n    size: {\n      control: {\n        type: 'select',\n      },\n      options: ['sm', 'base', 'lg', 'icon'],\n      description: '\u6309\u94AE\u5927\u5C0F \u9ED8\u8BA4\u662F lg, \u53EF\u9009\u503C: sm, base, lg, icon',\n    },\n    hoverEffect: {\n      description: 'hover \u72B6\u6001\u4E0B\u7684\u52A8\u753B\u6548\u679C\uFF0C\u4EC5\u5728variant\u662Fprimary \u548C secondary \u65F6\u751F\u6548',\n      control: {\n        type: 'select',\n      },\n      options: ['none', 'slide'],\n    },\n  },\n  args: {\n    variant: 'primary',\n    size: 'base',\n    children: 'Button',\n    disabled: false,\n    loading: false,\n    hoverEffect: 'none',\n  },\n} satisfies Meta<typeof Button>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\n// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args\n// args \u4F1A\u4F5C\u4E3A props \u4F20\u9012\u7ED9\u7EC4\u4EF6\n// Story\u7684\u540D\u4F1A\u4F5C\u4E3A\u83DC\u5355\u7684\u540D\u79F0 \u81EA\u52A8\u9996\u5B57\u6BCD\u5927\u5199\u5E76\u6309\u7167\u5927\u5199\u5B57\u6BCD\u62C6\u5206 UseAsButton => Use As Button\n\nexport const Primary: Story = {\n  args: {\n    size: 'lg',\n    children: 'Primary',\n  },\n}\n\nexport const Secondary: Story = {\n  args: {\n    size: 'lg',\n    variant: 'secondary',\n    children: 'Secondary',\n  },\n}\n\nexport const Link: Story = {\n  args: {\n    size: 'lg',\n    variant: 'link',\n    children: 'Link',\n  },\n}\n\nexport const WithIcon: Story = {\n  args: {\n    size: 'lg',\n    children: (\n      <>\n        WithIcon <SearchIcon className=\"ml-2\" />\n      </>\n    ),\n  },\n}\n\nexport const Loading: Story = {\n  args: {\n    size: 'lg',\n    loading: true,\n  },\n}\n\nexport const Aschild: Story = {\n  args: {\n    size: 'lg',\n    asChild: true,\n    children: <a href=\"http://example.com\">as a a tag</a>,\n  },\n}\n\nexport const Spinner: Story = {\n  args: {\n    size: 'lg',\n    loading: true,\n    spinner: (\n      <div className=\"flex animate-pulse flex-row font-bold text-neutral-900\">\n        <svg\n          viewBox=\"0 0 1024 1024\"\n          version=\"1.1\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          p-id=\"2625\"\n          width=\"1rem\"\n          className=\"align-middle\"\n        >\n          <path\n            d=\"M511.882596 287.998081h-0.361244a31.998984 31.998984 0 0 1-31.659415-31.977309v-0.361244c0-0.104761 0.115598-11.722364 0.115598-63.658399V96.000564a31.998984 31.998984 0 1 1 64.001581 0V192.001129c0 52.586273-0.111986 63.88237-0.119211 64.337537a32.002596 32.002596 0 0 1-31.977309 31.659415zM511.998194 959.99842a31.998984 31.998984 0 0 1-31.998984-31.998984v-96.379871c0-51.610915-0.111986-63.174332-0.115598-63.286318s0-0.242033 0-0.361243a31.998984 31.998984 0 0 1 63.997968-0.314283c0 0.455167 0.11921 11.711527 0.11921 64.034093v96.307622a31.998984 31.998984 0 0 1-32.002596 31.998984zM330.899406 363.021212a31.897836 31.897836 0 0 1-22.866739-9.612699c-0.075861-0.075861-8.207461-8.370021-44.931515-45.094076L195.198137 240.429485a31.998984 31.998984 0 0 1 45.256635-45.253022L308.336112 263.057803c37.182834 37.182834 45.090463 45.253022 45.41197 45.578141A31.998984 31.998984 0 0 1 330.899406 363.021212zM806.137421 838.11473a31.901448 31.901448 0 0 1-22.628318-9.374279L715.624151 760.859111c-36.724054-36.724054-45.018214-44.859267-45.097687-44.93874a31.998984 31.998984 0 0 1 44.77618-45.729864c0.32512 0.317895 8.395308 8.229136 45.578142 45.411969l67.88134 67.88134a31.998984 31.998984 0 0 1-22.624705 54.630914zM224.000113 838.11473a31.901448 31.901448 0 0 0 22.628317-9.374279l67.88134-67.88134c36.724054-36.724054 45.021826-44.859267 45.097688-44.93874a31.998984 31.998984 0 0 0-44.776181-45.729864c-0.32512 0.317895-8.395308 8.229136-45.578142 45.411969l-67.88134 67.884953a31.998984 31.998984 0 0 0 22.628318 54.627301zM255.948523 544.058589h-0.361244c-0.104761 0-11.722364-0.115598-63.658399-0.115598H95.942765a31.998984 31.998984 0 1 1 0-64.00158h95.996952c52.586273 0 63.88237 0.111986 64.337538 0.11921a31.998984 31.998984 0 0 1 31.659414 31.97731v0.361244a32.002596 32.002596 0 0 1-31.988146 31.659414zM767.939492 544.058589a32.002596 32.002596 0 0 1-31.995372-31.666639v-0.361244a31.998984 31.998984 0 0 1 31.659415-31.970085c0.455167 0 11.754876-0.11921 64.34115-0.11921h96.000564a31.998984 31.998984 0 0 1 0 64.00158H831.944685c-51.936034 0-63.553638 0.111986-63.665624 0.115598h-0.335957zM692.999446 363.0176a31.998984 31.998984 0 0 1-22.863126-54.381656c0.317895-0.32512 8.229136-8.395308 45.41197-45.578141l67.88134-67.884953A31.998984 31.998984 0 1 1 828.693489 240.429485l-67.892177 67.88134c-31.020013 31.023625-41.644196 41.759794-44.241539 44.393262l-0.697201 0.722488a31.908673 31.908673 0 0 1-22.863126 9.591025z\"\n            fill=\"\"\n            p-id=\"2626\"\n          ></path>\n        </svg>\n        &nbsp;loading...\n      </div>\n    ),\n  },\n}\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,SAAAC,EAAA,YAAAC,EAAA,YAAAC,EAAA,cAAAC,EAAA,YAAAC,EAAA,aAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAV,GA0FM,IAAAW,EAAA,6BAzFNC,EAA2B,4BAE3BC,EAAuB,kCACvBC,EAAkB,iBAGlB,MAAMC,EAAO,CAEX,MAAO,oBACP,UAAW,SACX,WAAY,CAEV,OAAQ,WACR,KAAM,CACJ,YAAa,CACX,UAAW,qNACb,CACF,CACF,EAEA,KAAM,CAAC,UAAU,EAEjB,SAAU,CACR,QAAS,CACP,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,UAAW,YAAa,OAAQ,OAAO,EACjD,YAAa,0KACf,EACA,KAAM,CACJ,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,KAAM,OAAQ,KAAM,MAAM,EACpC,YAAa,wFACf,EACA,YAAa,CACX,YAAa,mIACb,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,OAAQ,OAAO,CAC3B,CACF,EACA,KAAM,CACJ,QAAS,UACT,KAAM,OACN,SAAU,SACV,SAAU,GACV,QAAS,GACT,YAAa,MACf,CACF,EAEA,IAAON,EAAQM,EAOR,MAAMV,EAAiB,CAC5B,KAAM,CACJ,KAAM,KACN,SAAU,SACZ,CACF,EAEaC,EAAmB,CAC9B,KAAM,CACJ,KAAM,KACN,QAAS,YACT,SAAU,WACZ,CACF,EAEaH,EAAc,CACzB,KAAM,CACJ,KAAM,KACN,QAAS,OACT,SAAU,MACZ,CACF,EAEaK,EAAkB,CAC7B,KAAM,CACJ,KAAM,KACN,YACE,oBAAE,yBACS,OAAC,cAAW,UAAU,OAAO,GACxC,CAEJ,CACF,EAEaJ,EAAiB,CAC5B,KAAM,CACJ,KAAM,KACN,QAAS,EACX,CACF,EAEaF,EAAiB,CAC5B,KAAM,CACJ,KAAM,KACN,QAAS,GACT,YAAU,OAAC,KAAE,KAAK,qBAAqB,sBAAU,CACnD,CACF,EAEaK,EAAiB,CAC5B,KAAM,CACJ,KAAM,KACN,QAAS,GACT,WACE,QAAC,OAAI,UAAU,yDACb,oBAAC,OACC,QAAQ,gBACR,QAAQ,MACR,MAAM,6BACN,OAAK,OACL,MAAM,OACN,UAAU,eAEV,mBAAC,QACC,EAAE,o5EACF,KAAK,GACL,OAAK,OACN,EACH,EAAM,kBAER,CAEJ,CACF",
   "names": ["button_stories_exports", "__export", "Aschild", "Link", "Loading", "Primary", "Secondary", "Spinner", "WithIcon", "button_stories_default", "__toCommonJS", "import_jsx_runtime", "import_icons", "import_components", "import_react", "meta"]
 }

package/dist/esm/biz-components/AccordionCards/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{Fragment as z,jsx as o,jsxs as s}from"react/jsx-runtime";import L from"../Title/index.js";import{cn as n}from"../../helpers/utils.js";import k from"../../components/picture.js";import g from"../../components/button.js";import I from"../SwiperBox/index.js";import{withStyles as R}from"../../shared/Styles.js";import A,{useState as w,useEffect as D,useRef as a,useCallback as P,useImperativeHandle as j}from"react";import{useExposure as V}from"../../hooks/useExposure.js";import{trackUrlRef as T}from"../../shared/trackUrlRef.js";import{gaTrack as $}from"../../shared/track.js";const m="image",c="scene_banner",q=A.forwardRef(({data:r,className:d="",event:f},N)=>{const[p,E]=w(0),[B,_]=w({0:!0}),v=a([]),b=a({0:!0}),l=a(!1),u=a(null);j(N,()=>u.current),V(u,{componentType:m,componentName:c,componentTitle:r?.title});const M=(e,t)=>{t&&(v.current[e]=t)},h=e=>{b.current?.[e]&&(l.current=!1,_({[e]:!0}))};D(()=>{const e=v.current;return e?.forEach((t,i)=>{i?(t.style.flex="1 1 0%",t.style.transition="all 0.6s"):(t.style.flex="8 1 0%",t.style.transition="all 0.6s"),t.addEventListener("transitionend",()=>{h(i)})}),()=>{e?.forEach((t,i)=>{t.removeEventListener("transitionend",()=>h(i))})}},[]);const C=({data:e,configuration:t})=>s("div",{className:n("bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid",t?.itemShape==="round"?"rounded-2xl":""),children:[o(k,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:e?.img?.url}),s("div",{className:n("absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4"),children:[s("div",{className:"tablet:mb-6 mb-4 flex-1 overflow-hidden",children:[o("p",{className:"text-info-primary text-2xl font-bold leading-[1.2]",children:e?.title}),o("h3",{className:"text-info-primary line-clamp-2 text-sm font-semibold",children:e?.subTitle})]}),o("a",{href:T(e.link,`${m}_${c}`),onClick:()=>t?.event?.primaryButton(e,t),children:o(g,{variant:"secondary",className:n("text-info-primary text-sm font-bold"),children:t?.primaryButton})})]})]}),y=P(e=>{p===e||l.current||(l.current=!0,b.current={[e]:!0},E(e),$({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:m,component_name:c,component_title:r?.products[e]?.title,component_description:r?.products[e]?.subTitle,position:e+1}}))},[p,l]);return s(z,{children:[r?.title&&o(L,{data:{title:r?.title}}),o("div",{ref:u,className:n("laptop:block hidden",{"aiui-dark":r?.theme==="dark"}),children:o("div",{className:n("lg-desktop:h-[560px] desktop:h-[448px] flex h-[336px] w-full gap-4 overflow-hidden",d),children:r?.products?.map((e,t)=>{const i=p===t,S=i?8:1,H=B?.[t]&&i;return s("div",{style:{flex:S},ref:x=>{x&&M(t,x)},className:n("relative cursor-pointer overflow-hidden",r?.itemShape==="round"?"rounded-2xl":""),onMouseEnter:()=>y(t),onMouseLeave:()=>{l.current=!1},onClick:()=>y(t),children:[o(k,{source:e?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover"}),s("div",{className:n("absolute inset-x-0 bottom-0 flex w-full translate-x-4 items-end justify-between overflow-hidden px-8 pb-8",H?"translate-x-0 opacity-100 transition-transform ease-out":"opacity-0"),children:[s("div",{className:"mr-16 flex-1 overflow-hidden",children:[o("p",{className:"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold",children:e?.title}),o("h3",{className:"desktop:text-lg text-info-primary line-clamp-2 text-sm font-semibold",children:e?.subTitle})]}),o("a",{href:T(e?.link,`${m}_${c}`),onClick:()=>f?.primaryButton?.(r,t),children:o(g,{variant:"secondary",className:n("desktop:text-base mb-1.5 text-sm font-bold"),children:r?.primaryButton})})]})]},t)})})}),o("div",{className:n("laptop:hidden block",{"aiui-dark":r?.theme==="dark"}),children:o(I,{className:n("h-[400px] !overflow-visible",d),id:"AccordionCards"+r?.key,data:{list:r?.products,configuration:{shape:r?.shape,itemShape:r?.itemShape,primaryButton:r?.primaryButton,event:f}},Slide:C,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3}}})})]})});var Z=R(q);export{Z as default};
+"use client";import{Fragment as z,jsx as o,jsxs as s}from"react/jsx-runtime";import L from"../Title/index.js";import{cn as n}from"../../helpers/utils.js";import k from"../../components/picture.js";import g from"../../components/button.js";import I from"../SwiperBox/index.js";import{withStyles as R}from"../../shared/Styles.js";import A,{useState as w,useEffect as D,useRef as a,useCallback as P,useImperativeHandle as j}from"react";import{useExposure as V}from"../../hooks/useExposure.js";import{trackUrlRef as T}from"../../shared/trackUrlRef.js";import{gaTrack as $}from"../../shared/track.js";const m="image",c="scene_banner",q=A.forwardRef(({data:r,className:d="",event:f},N)=>{const[p,E]=w(0),[B,_]=w({0:!0}),v=a([]),b=a({0:!0}),l=a(!1),u=a(null);j(N,()=>u.current),V(u,{componentType:m,componentName:c,componentTitle:r?.title});const M=(e,t)=>{t&&(v.current[e]=t)},h=e=>{b.current?.[e]&&(l.current=!1,_({[e]:!0}))};D(()=>{const e=v.current;return e?.forEach((t,i)=>{i?(t.style.flex="1 1 0%",t.style.transition="all 0.6s"):(t.style.flex="8 1 0%",t.style.transition="all 0.6s"),t.addEventListener("transitionend",()=>{h(i)})}),()=>{e?.forEach((t,i)=>{t.removeEventListener("transitionend",()=>h(i))})}},[]);const C=({data:e,configuration:t})=>s("div",{className:n("bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid",t?.itemShape==="round"?"rounded-2xl":""),children:[o(k,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:e?.img?.url}),s("div",{className:n("absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4"),children:[s("div",{className:"tablet:mb-6 mb-4 flex-1 overflow-hidden",children:[o("p",{className:"text-info-primary text-2xl font-bold leading-[1.2]",children:e?.title}),o("h3",{className:"text-info-primary line-clamp-2 text-sm font-semibold",children:e?.subTitle})]}),o("a",{href:T(e.link,`${m}_${c}`),onClick:()=>t?.event?.primaryButton(e,t),children:o(g,{variant:"secondary",className:n("text-info-primary text-sm font-bold"),children:t?.primaryButton})})]})]}),y=P(e=>{p===e||l.current||(l.current=!0,b.current={[e]:!0},E(e),$({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:m,component_name:c,component_title:r?.products[e]?.title,component_description:r?.products[e]?.subTitle,position:e+1}}))},[p,l]);return s(z,{children:[r?.title&&o(L,{data:{title:r?.title}}),o("div",{ref:u,className:n("laptop:block hidden",{"aiui-dark":r?.theme==="dark"}),children:o("div",{className:n("lg-desktop:h-[560px] desktop:h-[448px] flex h-[336px] w-full gap-4 overflow-hidden",d),children:r?.products?.map((e,t)=>{const i=p===t,S=i?8:1,H=B?.[t]&&i;return s("div",{style:{flex:S},ref:x=>{x&&M(t,x)},className:n("relative cursor-pointer overflow-hidden",r?.itemShape==="round"?"rounded-2xl":""),onMouseEnter:()=>y(t),onMouseLeave:()=>{l.current=!1},onClick:()=>y(t),children:[o(k,{source:e?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover"}),s("div",{className:n("absolute inset-x-0 bottom-0 flex w-full translate-x-4 items-end justify-between overflow-hidden px-8 pb-8",H?"translate-x-0 opacity-100 transition-transform ease-out":"opacity-0"),children:[s("div",{className:"mr-16 flex-1 overflow-hidden",children:[o("p",{className:"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold",children:e?.title}),o("h3",{className:"desktop:text-lg text-info-primary line-clamp-2 text-sm font-semibold",children:e?.subTitle})]}),o("a",{href:T(e?.link,`${m}_${c}`),onClick:()=>f?.primaryButton?.(r,t),children:o(g,{className:n("desktop:text-base mb-1.5 text-sm font-bold"),children:r?.primaryButton})})]})]},t)})})}),o("div",{className:n("laptop:hidden block",{"aiui-dark":r?.theme==="dark"}),children:o(I,{className:n("h-[400px] !overflow-visible",d),id:"AccordionCards"+r?.key,data:{list:r?.products,configuration:{shape:r?.shape,itemShape:r?.itemShape,primaryButton:r?.primaryButton,event:f}},Slide:C,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3}}})})]})});var Z=R(q);export{Z as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/AccordionCards/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/AccordionCards/index.tsx"],
-  "sourcesContent": ["'use client'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport React, { useState, useEffect, useRef, useCallback, useImperativeHandle } from 'react'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'scene_banner'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\ntype ItemType = {\n  /** \u6807\u9898\u6587\u672C */\n  title: string\n  /** \u56FE\u7247*/\n  img: {\n    url: string\n  }\n  /** \u5185\u5BB9\u8282\u70B9 */\n  subTitle: string\n  link?: string\n}\n\ntype AccordionCardsType = {\n  className?: string\n  data: {\n    key?: string\n    title?: string\n    products: Array<ItemType>\n    /** \u6309\u94AE\u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    /** \u5361\u7247\u5F62\u72B6 */\n    itemShape?: 'round' | 'square'\n    /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n    primaryButton?: string\n    theme?: 'light' | 'dark'\n  }\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: {\n    primaryButton?: (v: any, index: number) => void\n  }\n}\n\nconst AccordionCards = React.forwardRef<HTMLDivElement, AccordionCardsType>(({ data, className = '', event }, ref) => {\n  const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n  const [currentWidth, setCurrentWidth] = useState<{ [key: number]: boolean }>({ 0: true })\n\n  const accordionRef = useRef<HTMLDivElement[]>([])\n  const enterRef = useRef<{ [key: number]: boolean }>({ 0: true })\n  const isAnimation = useRef<boolean>(false)\n\n  const innerRef = useRef<HTMLDivElement>(null)\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n  })\n\n  const getRef = (index: number, el: HTMLDivElement) => {\n    if (el) {\n      accordionRef.current[index] = el\n    }\n  }\n\n  const handleTransitionEnd = (index: number) => {\n    if (enterRef.current?.[index]) {\n      isAnimation.current = false\n      setCurrentWidth({ [index]: true })\n    }\n  }\n\n  useEffect(() => {\n    const element = accordionRef.current\n    element?.forEach((item, index) => {\n      if (!index) {\n        item.style.flex = '8 1 0%'\n        item.style.transition = 'all 0.6s'\n      } else {\n        item.style.flex = '1 1 0%'\n        item.style.transition = 'all 0.6s'\n      }\n      item.addEventListener('transitionend', () => {\n        handleTransitionEnd(index)\n      })\n    })\n    return () => {\n      element?.forEach((item, index) => {\n        item.removeEventListener('transitionend', () => handleTransitionEnd(index))\n      })\n    }\n  }, [])\n\n  const MobileItem = ({ data, configuration }: { data: ItemType; configuration?: any }) => {\n    return (\n      <div\n        className={cn(\n          'bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid',\n          configuration?.itemShape === 'round' ? 'rounded-2xl' : ''\n        )}\n      >\n        <Picture className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\" source={data?.img?.url} />\n        <div className={cn('absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4')}>\n          <div className=\"tablet:mb-6 mb-4 flex-1 overflow-hidden\">\n            <p className=\"text-info-primary text-2xl font-bold leading-[1.2]\">{data?.title}</p>\n            <h3 className=\"text-info-primary line-clamp-2 text-sm font-semibold\">{data?.subTitle}</h3>\n          </div>\n          <a\n            href={trackUrlRef(data.link, `${componentType}_${componentName}`)}\n            onClick={() => configuration?.event?.primaryButton(data, configuration)}\n          >\n            <Button variant=\"secondary\" className={cn('text-info-primary text-sm font-bold')}>\n              {configuration?.primaryButton}\n            </Button>\n          </a>\n        </div>\n      </div>\n    )\n  }\n\n  const handleSwiperItemClick = useCallback(\n    (idx: number) => {\n      if (hoverIndex === idx || isAnimation.current) return\n      isAnimation.current = true\n      // \u66F4\u65B0 ref \u72B6\u6001\n      enterRef.current = { [idx]: true }\n      // \u66F4\u65B0\u5BBD\u5EA6\u76F8\u5173\u72B6\u6001\n      setHoverIndex(idx)\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'component_click',\n        event_parameters: {\n          page_group: 'Home Page',\n          component_type: componentType,\n          component_name: componentName,\n          component_title: data?.products[idx]?.title,\n          component_description: data?.products[idx]?.subTitle,\n          position: idx + 1,\n        },\n      })\n    },\n    [hoverIndex, isAnimation]\n  )\n\n  return (\n    <>\n      {data?.title && <Title data={{ title: data?.title }} />}\n      <div ref={innerRef} className={cn('laptop:block hidden', { 'aiui-dark': data?.theme === 'dark' })}>\n        <div\n          className={cn(\n            'lg-desktop:h-[560px] desktop:h-[448px] flex h-[336px] w-full gap-4 overflow-hidden',\n            className\n          )}\n        >\n          {data?.products?.map((item, idx) => {\n            const isExpanded = hoverIndex === idx\n            const flexValue = isExpanded ? 8 : 1\n            const isShowContent = currentWidth?.[idx] && isExpanded\n            return (\n              <div\n                key={idx}\n                style={{\n                  flex: flexValue,\n                }}\n                ref={(el: HTMLDivElement | null) => {\n                  if (el) getRef(idx, el)\n                }}\n                className={cn(\n                  'relative cursor-pointer overflow-hidden',\n                  data?.itemShape === 'round' ? 'rounded-2xl' : ''\n                )}\n                onMouseEnter={() => handleSwiperItemClick(idx)}\n                onMouseLeave={() => {\n                  isAnimation.current = false\n                }}\n                onClick={() => handleSwiperItemClick(idx)}\n              >\n                <Picture\n                  source={item?.img?.url}\n                  className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n                />\n                <div\n                  className={cn(\n                    'absolute inset-x-0 bottom-0 flex w-full translate-x-4 items-end justify-between overflow-hidden px-8 pb-8',\n                    isShowContent ? 'translate-x-0 opacity-100 transition-transform ease-out' : 'opacity-0'\n                  )}\n                >\n                  <div className=\"mr-16 flex-1 overflow-hidden\">\n                    <p className=\"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold\">\n                      {item?.title}\n                    </p>\n                    <h3 className=\"desktop:text-lg text-info-primary line-clamp-2 text-sm font-semibold\">\n                      {item?.subTitle}\n                    </h3>\n                  </div>\n                  <a\n                    href={trackUrlRef(item?.link, `${componentType}_${componentName}`)}\n                    onClick={() => event?.primaryButton?.(data, idx)}\n                  >\n                    <Button variant=\"secondary\" className={cn('desktop:text-base mb-1.5 text-sm font-bold')}>\n                      {data?.primaryButton}\n                    </Button>\n                  </a>\n                </div>\n              </div>\n            )\n          })}\n        </div>\n      </div>\n      <div className={cn('laptop:hidden block', { 'aiui-dark': data?.theme === 'dark' })}>\n        <SwiperBox\n          className={cn('h-[400px] !overflow-visible', className)}\n          id={'AccordionCards' + data?.key}\n          data={{\n            list: data?.products,\n            configuration: {\n              shape: data?.shape,\n              itemShape: data?.itemShape,\n              primaryButton: data?.primaryButton,\n              event: event,\n            },\n          }}\n          Slide={MobileItem}\n          breakpoints={{\n            0: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1,\n            },\n            374: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1.1,\n            },\n            768: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: 2.3,\n            },\n          }}\n        />\n      </div>\n    </>\n  )\n})\nexport default withStyles(AccordionCards)\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport React, { useState, useEffect, useRef, useCallback, useImperativeHandle } from 'react'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'scene_banner'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\ntype ItemType = {\n  /** \u6807\u9898\u6587\u672C */\n  title: string\n  /** \u56FE\u7247*/\n  img: {\n    url: string\n  }\n  /** \u5185\u5BB9\u8282\u70B9 */\n  subTitle: string\n  link?: string\n}\n\ntype AccordionCardsType = {\n  className?: string\n  data: {\n    key?: string\n    title?: string\n    products: Array<ItemType>\n    /** \u6309\u94AE\u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    /** \u5361\u7247\u5F62\u72B6 */\n    itemShape?: 'round' | 'square'\n    /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n    primaryButton?: string\n    theme?: 'light' | 'dark'\n  }\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: {\n    primaryButton?: (v: any, index: number) => void\n  }\n}\n\nconst AccordionCards = React.forwardRef<HTMLDivElement, AccordionCardsType>(({ data, className = '', event }, ref) => {\n  const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n  const [currentWidth, setCurrentWidth] = useState<{ [key: number]: boolean }>({ 0: true })\n\n  const accordionRef = useRef<HTMLDivElement[]>([])\n  const enterRef = useRef<{ [key: number]: boolean }>({ 0: true })\n  const isAnimation = useRef<boolean>(false)\n\n  const innerRef = useRef<HTMLDivElement>(null)\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n  })\n\n  const getRef = (index: number, el: HTMLDivElement) => {\n    if (el) {\n      accordionRef.current[index] = el\n    }\n  }\n\n  const handleTransitionEnd = (index: number) => {\n    if (enterRef.current?.[index]) {\n      isAnimation.current = false\n      setCurrentWidth({ [index]: true })\n    }\n  }\n\n  useEffect(() => {\n    const element = accordionRef.current\n    element?.forEach((item, index) => {\n      if (!index) {\n        item.style.flex = '8 1 0%'\n        item.style.transition = 'all 0.6s'\n      } else {\n        item.style.flex = '1 1 0%'\n        item.style.transition = 'all 0.6s'\n      }\n      item.addEventListener('transitionend', () => {\n        handleTransitionEnd(index)\n      })\n    })\n    return () => {\n      element?.forEach((item, index) => {\n        item.removeEventListener('transitionend', () => handleTransitionEnd(index))\n      })\n    }\n  }, [])\n\n  const MobileItem = ({ data, configuration }: { data: ItemType; configuration?: any }) => {\n    return (\n      <div\n        className={cn(\n          'bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid',\n          configuration?.itemShape === 'round' ? 'rounded-2xl' : ''\n        )}\n      >\n        <Picture className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\" source={data?.img?.url} />\n        <div className={cn('absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4')}>\n          <div className=\"tablet:mb-6 mb-4 flex-1 overflow-hidden\">\n            <p className=\"text-info-primary text-2xl font-bold leading-[1.2]\">{data?.title}</p>\n            <h3 className=\"text-info-primary line-clamp-2 text-sm font-semibold\">{data?.subTitle}</h3>\n          </div>\n          <a\n            href={trackUrlRef(data.link, `${componentType}_${componentName}`)}\n            onClick={() => configuration?.event?.primaryButton(data, configuration)}\n          >\n            <Button variant=\"secondary\" className={cn('text-info-primary text-sm font-bold')}>\n              {configuration?.primaryButton}\n            </Button>\n          </a>\n        </div>\n      </div>\n    )\n  }\n\n  const handleSwiperItemClick = useCallback(\n    (idx: number) => {\n      if (hoverIndex === idx || isAnimation.current) return\n      isAnimation.current = true\n      // \u66F4\u65B0 ref \u72B6\u6001\n      enterRef.current = { [idx]: true }\n      // \u66F4\u65B0\u5BBD\u5EA6\u76F8\u5173\u72B6\u6001\n      setHoverIndex(idx)\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'component_click',\n        event_parameters: {\n          page_group: 'Home Page',\n          component_type: componentType,\n          component_name: componentName,\n          component_title: data?.products[idx]?.title,\n          component_description: data?.products[idx]?.subTitle,\n          position: idx + 1,\n        },\n      })\n    },\n    [hoverIndex, isAnimation]\n  )\n\n  return (\n    <>\n      {data?.title && <Title data={{ title: data?.title }} />}\n      <div ref={innerRef} className={cn('laptop:block hidden', { 'aiui-dark': data?.theme === 'dark' })}>\n        <div\n          className={cn(\n            'lg-desktop:h-[560px] desktop:h-[448px] flex h-[336px] w-full gap-4 overflow-hidden',\n            className\n          )}\n        >\n          {data?.products?.map((item, idx) => {\n            const isExpanded = hoverIndex === idx\n            const flexValue = isExpanded ? 8 : 1\n            const isShowContent = currentWidth?.[idx] && isExpanded\n            return (\n              <div\n                key={idx}\n                style={{\n                  flex: flexValue,\n                }}\n                ref={(el: HTMLDivElement | null) => {\n                  if (el) getRef(idx, el)\n                }}\n                className={cn(\n                  'relative cursor-pointer overflow-hidden',\n                  data?.itemShape === 'round' ? 'rounded-2xl' : ''\n                )}\n                onMouseEnter={() => handleSwiperItemClick(idx)}\n                onMouseLeave={() => {\n                  isAnimation.current = false\n                }}\n                onClick={() => handleSwiperItemClick(idx)}\n              >\n                <Picture\n                  source={item?.img?.url}\n                  className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n                />\n                <div\n                  className={cn(\n                    'absolute inset-x-0 bottom-0 flex w-full translate-x-4 items-end justify-between overflow-hidden px-8 pb-8',\n                    isShowContent ? 'translate-x-0 opacity-100 transition-transform ease-out' : 'opacity-0'\n                  )}\n                >\n                  <div className=\"mr-16 flex-1 overflow-hidden\">\n                    <p className=\"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold\">\n                      {item?.title}\n                    </p>\n                    <h3 className=\"desktop:text-lg text-info-primary line-clamp-2 text-sm font-semibold\">\n                      {item?.subTitle}\n                    </h3>\n                  </div>\n                  <a\n                    href={trackUrlRef(item?.link, `${componentType}_${componentName}`)}\n                    onClick={() => event?.primaryButton?.(data, idx)}\n                  >\n                    <Button className={cn('desktop:text-base mb-1.5 text-sm font-bold')}>{data?.primaryButton}</Button>\n                  </a>\n                </div>\n              </div>\n            )\n          })}\n        </div>\n      </div>\n      <div className={cn('laptop:hidden block', { 'aiui-dark': data?.theme === 'dark' })}>\n        <SwiperBox\n          className={cn('h-[400px] !overflow-visible', className)}\n          id={'AccordionCards' + data?.key}\n          data={{\n            list: data?.products,\n            configuration: {\n              shape: data?.shape,\n              itemShape: data?.itemShape,\n              primaryButton: data?.primaryButton,\n              event: event,\n            },\n          }}\n          Slide={MobileItem}\n          breakpoints={{\n            0: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1,\n            },\n            374: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1.1,\n            },\n            768: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: 2.3,\n            },\n          }}\n        />\n      </div>\n    </>\n  )\n})\nexport default withStyles(AccordionCards)\n"],
+  "mappings": "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",
   "names": ["Fragment", "jsx", "jsxs", "Title", "cn", "Picture", "Button", "SwiperBox", "withStyles", "React", "useState", "useEffect", "useRef", "useCallback", "useImperativeHandle", "useExposure", "trackUrlRef", "gaTrack", "componentType", "componentName", "AccordionCards", "data", "className", "event", "ref", "hoverIndex", "setHoverIndex", "currentWidth", "setCurrentWidth", "accordionRef", "enterRef", "isAnimation", "innerRef", "getRef", "index", "el", "handleTransitionEnd", "element", "item", "MobileItem", "configuration", "handleSwiperItemClick", "idx", "isExpanded", "flexValue", "isShowContent", "AccordionCards_default"]
 }

package/dist/esm/biz-components/BrandEquity/BrandEquity.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{jsx as t,jsxs as d}from"react/jsx-runtime";import{forwardRef as k,useEffect as h,useRef as f,useState as w,useImperativeHandle as N}from"react";import{cn as i}from"../../helpers/utils.js";import x from"../../components/picture.js";import{withStyles as E}from"../../shared/Styles.js";import{useMediaQuery as S}from"react-responsive";import{useExposure as q}from"../../hooks/useExposure.js";import{Swiper as M,SwiperSlide as B}from"swiper/react";import{Pagination as D,FreeMode as I,Mousewheel as P}from"swiper/modules";const j="copy",T="store_benefits",A=(e,o)=>{const a=[];for(let r=0;r<e.length;r+=o)a.push(e.slice(r,r+o));return a},H=k(({data:{items:e=[],itemShape:o},className:a},r)=>{const[s,v]=w(!1),c=S({query:"(max-width: 768px)"}),m=f(null),n=f(null);N(r,()=>n.current),q(n,{componentType:j,componentName:T}),h(()=>{v(c)},[c]);const g=s?A(e,3):e;return t("div",{ref:n,className:i("brand-equity-wrapper w-full",a),children:s?d(M,{className:i(a),modules:[I,P,D],freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,el:m.current},breakpoints:{0:{spaceBetween:12}},children:[g?.map((l,p)=>t(B,{className:"!flex flex-col gap-3",children:Array.isArray(l)&&l?.map((b,u)=>t(y,{data:b,itemShape:o,index:u},u))},"SwiperSlide"+p)),t("div",{ref:m,className:"mt-3 flex justify-center"})]}):t("div",{className:i("grid grid-cols-1 gap-3","tablet:grid-cols-2","laptop:gap-4 laptop:grid-cols-10"),children:e.map((l,p)=>t(y,{data:l,itemShape:o,index:p},p))})})}),y=({data:e,itemShape:o,index:a})=>d("div",{className:i("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)},o==="round"?"rounded-2xl":"rounded-none"),children:[d("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:i("size-[30px] overflow-hidden rounded-full border-2 border-white","relative inline-block","lg-desktop:size-[36px]"),children:t(x,{source:r.avatar.url,alt:r.avatar?.alt,className:"size-full object-cover"})},s))}):t(x,{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 J=E(H);export{J as default};
+"use client";import{jsx as t,jsxs as d}from"react/jsx-runtime";import{forwardRef as k,useEffect as h,useRef as f,useState as w,useImperativeHandle as N}from"react";import{cn as i}from"../../helpers/utils.js";import x from"../../components/picture.js";import{withStyles as E}from"../../shared/Styles.js";import{useMediaQuery as S}from"react-responsive";import{useExposure as q}from"../../hooks/useExposure.js";import{Swiper as M,SwiperSlide as B}from"swiper/react";import{Pagination as D,FreeMode as I,Mousewheel as P}from"swiper/modules";const j="copy",T="store_benefits",A=(e,o)=>{const a=[];for(let r=0;r<e.length;r+=o)a.push(e.slice(r,r+o));return a},H=k(({data:{items:e=[],itemShape:o},className:a},r)=>{const[s,v]=w(!1),c=S({query:"(max-width: 768px)"}),m=f(null),n=f(null);N(r,()=>n.current),q(n,{componentType:j,componentName:T}),h(()=>{v(c)},[c]);const g=s?A(e,3):e;return t("div",{ref:n,className:i("brand-equity-wrapper w-full",a),children:s?d(M,{className:i(a),modules:[I,P,D],freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,el:m.current},breakpoints:{0:{spaceBetween:12}},children:[g?.map((l,p)=>t(B,{className:"!flex flex-col gap-3",children:Array.isArray(l)&&l?.map((b,u)=>t(y,{data:b,itemShape:o,index:u},u))},"SwiperSlide"+p)),t("div",{ref:m,className:"mt-3 flex justify-center"})]}):t("div",{className:i("grid grid-cols-1 gap-3","tablet:grid-cols-2","laptop:gap-4 laptop:grid-cols-10"),children:e.map((l,p)=>t(y,{data:l,itemShape:o,index:p},p))})})}),y=({data:e,itemShape:o,index:a})=>d("div",{className:i("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)},o==="round"?"rounded-2xl":"rounded-none"),children:[d("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-bold 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:i("size-[30px] overflow-hidden rounded-full border-2 border-white","relative inline-block","lg-desktop:size-[36px]"),children:t(x,{source:r.avatar.url,alt:r.avatar?.alt,className:"size-full object-cover"})},s))}):t(x,{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 J=E(H);export{J as default};
 //# sourceMappingURL=BrandEquity.js.map

package/dist/esm/biz-components/BrandEquity/BrandEquity.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/BrandEquity/BrandEquity.tsx"],
-  "sourcesContent": ["'use client'\nimport { forwardRef, useEffect, useRef, useState, useImperativeHandle } 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'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\n\nconst componentType = 'copy'\nconst componentName = 'store_benefits'\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    const innerRef = useRef<HTMLDivElement>(null)\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n    useExposure(innerRef, {\n      componentType,\n      componentName,\n    })\n\n    useEffect(() => {\n      setIsMobile(mediaQuery)\n    }, [mediaQuery])\n\n    const itemsArray = isMobile ? chunkArray(items, 3) : items\n    return (\n      <div ref={innerRef} 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"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport { forwardRef, useEffect, useRef, useState, useImperativeHandle } 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'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\n\nconst componentType = 'copy'\nconst componentName = 'store_benefits'\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    const innerRef = useRef<HTMLDivElement>(null)\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n    useExposure(innerRef, {\n      componentType,\n      componentName,\n    })\n\n    useEffect(() => {\n      setIsMobile(mediaQuery)\n    }, [mediaQuery])\n\n    const itemsArray = isMobile ? chunkArray(items, 3) : items\n    return (\n      <div ref={innerRef} 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-bold 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"],
+  "mappings": "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",
   "names": ["jsx", "jsxs", "forwardRef", "useEffect", "useRef", "useState", "useImperativeHandle", "cn", "Picture", "withStyles", "useMediaQuery", "useExposure", "Swiper", "SwiperSlide", "Pagination", "FreeMode", "Mousewheel", "componentType", "componentName", "chunkArray", "arr", "size", "chunks", "i", "BrandEquity", "items", "itemShape", "className", "ref", "isMobile", "setIsMobile", "mediaQuery", "paginationRef", "innerRef", "itemsArray", "item", "jIndex", "index", "BrandEquityItem", "data", "BrandEquity_default"]
 }

package/dist/esm/biz-components/Graphic/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{jsx as t,jsxs as i}from"react/jsx-runtime";import d,{useImperativeHandle as h,useRef as f}from"react";import{cn as a}from"../../helpers/utils.js";import{withStyles as w}from"../../shared/Styles.js";import u from"../SwiperBox/index.js";import{Heading as x}from"../../components/index.js";import{Picture as g,Text as k}from"../../components/index.js";import{Container as b}from"../../components/container.js";import v from"../Title/index.js";import{useMediaQuery as y}from"react-responsive";import{useExposure as N}from"../../hooks/useExposure.js";import{trackUrlRef as P}from"../../shared/trackUrlRef.js";const c="image",n="graphic",C=({data:e,configuration:s})=>{const l=y({query:"(max-width: 768px)"});return t("div",{className:a((()=>{switch(s.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[384] laptop:aspect-w-[440] laptop:aspect-h-[360] tablet:aspect-w-[346]  tablet:aspect-h-[360]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384] laptop:aspect-w-[288] laptop:aspect-h-[360] tablet:aspect-w-[296] tablet:aspect-h-[360]"}})(),{"h-[360px]":l},"flex-1 shrink-0 md:basis-[296px]"),children:t("div",{className:a("absolute inset-0",{"rounded-xl overflow-hidden laptop:rounded-2xl":s?.itemShape==="round"}),children:i("a",{href:P(e?.link,`${c}_${n}`),className:"relative block size-full cursor-pointer",children:[t(g,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url}),i("div",{className:"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4",children:[t(k,{style:{color:e?.textColor},html:e?.title,className:"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold leading-[1.2]"}),e?.description&&t(x,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]"})]})]})})})},m=d.forwardRef(({data:e,className:s,...l},r)=>{const p=e?.items?.length>2,o=f(null);return h(r,()=>o.current),N(o,{componentType:c,componentName:n,componentTitle:e?.title}),t("div",{className:s,ref:o,children:t("div",{className:"graphic-box",children:i(b,{...e?.containerProps||{},className:"overflow-hidden",children:[e?.title&&t(v,{data:{title:e?.title}}),t(u,{id:"Graphic",className:a("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0}},Slide:C,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:p?2.3:2},1024:{spaceBetween:16,freeMode:!1,slidesPerView:p?3:2},1440:{spaceBetween:16,freeMode:!1,slidesPerView:p?4:2}}})]})})})});m.displayName="Graphic";var L=w(m);export{L as default};
+"use client";import{jsx as t,jsxs as l}from"react/jsx-runtime";import d,{useImperativeHandle as h,useRef as f}from"react";import{cn as a}from"../../helpers/utils.js";import{withStyles as w}from"../../shared/Styles.js";import u from"../SwiperBox/index.js";import{Heading as x}from"../../components/index.js";import{Picture as g,Text as k}from"../../components/index.js";import{Container as b}from"../../components/container.js";import v from"../Title/index.js";import{useMediaQuery as y}from"react-responsive";import{useExposure as N}from"../../hooks/useExposure.js";import{trackUrlRef as P}from"../../shared/trackUrlRef.js";const c="image",n="graphic",C=({data:e,configuration:s})=>{const i=y({query:"(max-width: 768px)"});return t("div",{className:a((()=>{switch(s.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[384] laptop:aspect-w-[440] laptop:aspect-h-[360] tablet:aspect-w-[346]  tablet:aspect-h-[360]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384] laptop:aspect-w-[288] laptop:aspect-h-[360] tablet:aspect-w-[296] tablet:aspect-h-[360]"}})(),{"h-[360px]":i},"flex-1 shrink-0 md:basis-[296px]"),children:t("div",{className:a("absolute inset-0",{"rounded-xl overflow-hidden laptop:rounded-2xl":s?.itemShape==="round"}),children:l("a",{href:P(e?.link,`${c}_${n}`),className:"relative block size-full cursor-pointer",children:[t(g,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url}),l("div",{className:"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4",children:[t(k,{style:{color:e?.textColor},html:e?.title,className:"line-clamp-3 desktop:text-[18px] text-[14px] font-bold leading-[1.2]"}),e?.description&&t(x,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]"})]})]})})})},m=d.forwardRef(({data:e,className:s,...i},r)=>{const p=e?.items?.length>2,o=f(null);return h(r,()=>o.current),N(o,{componentType:c,componentName:n,componentTitle:e?.title}),t("div",{className:s,ref:o,children:t("div",{className:"graphic-box",children:l(b,{...e?.containerProps||{},className:"overflow-hidden",children:[e?.title&&t(v,{data:{title:e?.title}}),t(u,{id:"Graphic",className:a("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0}},Slide:C,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:p?2.3:2},1024:{spaceBetween:16,freeMode:!1,slidesPerView:p?3:2},1440:{spaceBetween:16,freeMode:!1,slidesPerView:p?4:2}}})]})})})});m.displayName="Graphic";var L=w(m);export{L as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/Graphic/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Graphic/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Heading } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { Container } from '../../components/container.js'\nimport Title from '../Title/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport type { ComponentCommonProps, ContainerProps, Img } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n  imgUrl: Img\n  title: string\n  description?: string\n  textColor?: string\n  link?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n  className?: string\n  data: {\n    title?: string\n    items?: GraphicType[]\n    itemShape?: 'round' | 'square'\n    containerProps?: ContainerProps\n  }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const handleAspect = () => {\n    switch (configuration.num) {\n      case 1:\n        return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n      case 2:\n        return 'lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[384] laptop:aspect-w-[440] laptop:aspect-h-[360] tablet:aspect-w-[346]  tablet:aspect-h-[360]'\n      case 3:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n      default:\n        return 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384] laptop:aspect-w-[288] laptop:aspect-h-[360] tablet:aspect-w-[296] tablet:aspect-h-[360]'\n    }\n  }\n\n  return (\n    <div\n      className={cn(\n        handleAspect(),\n        {\n          'h-[360px]': isMobile,\n        },\n        'flex-1 shrink-0 md:basis-[296px]'\n      )}\n    >\n      <div\n        className={cn('absolute inset-0', {\n          ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n        })}\n      >\n        <a\n          href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n          className=\"relative block size-full cursor-pointer\"\n        >\n          <Picture\n            className=\"h-full\"\n            imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n            source={data?.imgUrl?.url}\n          />\n          <div className=\"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4\">\n            <Text\n              style={{\n                color: data?.textColor,\n              }}\n              html={data?.title}\n              // eslint-disable-next-line tailwindcss/classnames-order\n              className=\"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold leading-[1.2]\"\n            />\n            {data?.description && (\n              <Heading\n                html={data?.description}\n                style={{\n                  color: data?.textColor,\n                }}\n                as=\"h3\"\n                className=\"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]\"\n              />\n            )}\n          </div>\n        </a>\n      </div>\n    </div>\n  )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, ...props }, ref) => {\n  const isShow = (data?.items as GraphicType[])?.length > 2\n  const innerRef = useRef<HTMLDivElement>(null)\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n  })\n\n  return (\n    <div className={className} ref={innerRef}>\n      <div className=\"graphic-box\">\n        <Container {...(data?.containerProps || {})} className=\"overflow-hidden\">\n          {data?.title && <Title data={{ title: data?.title }} />}\n          <SwiperBox\n            id=\"Graphic\"\n            className={cn('!overflow-visible')}\n            data={{\n              list: data?.items || [],\n              configuration: {\n                itemShape: data.itemShape,\n                num: data?.items?.length || 0,\n              },\n            }}\n            Slide={Item}\n            breakpoints={{\n              0: {\n                spaceBetween: 12,\n                freeMode: false,\n                slidesPerView: 1,\n              },\n              374: {\n                spaceBetween: 12,\n                freeMode: false,\n                slidesPerView: 1.1,\n              },\n              768: {\n                spaceBetween: 16,\n                freeMode: false,\n                slidesPerView: isShow ? 2.3 : 2,\n              },\n              1024: {\n                spaceBetween: 16,\n                freeMode: false,\n                slidesPerView: isShow ? 3 : 2,\n              },\n              1440: {\n                spaceBetween: 16,\n                freeMode: false,\n                slidesPerView: isShow ? 4 : 2,\n              },\n            }}\n          />\n        </Container>\n      </div>\n    </div>\n  )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
-  "mappings": "aAqEU,cAAAA,EAKA,QAAAC,MALA,oBApEV,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,MAAc,QACnD,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAe,wBACtB,OAAS,WAAAC,MAAe,4BACxB,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAS,aAAAC,MAAiB,gCAC1B,OAAOC,MAAW,oBAClB,OAAS,iBAAAC,MAAqB,mBAE9B,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,eAAAC,MAAmB,8BAE5B,MAAMC,EAAgB,QAChBC,EAAgB,UAmBhBC,EAAO,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAAkD,CACpF,MAAMC,EAAWR,EAAc,CAAE,MAAO,oBAAqB,CAAC,EAe9D,OACEb,EAAC,OACC,UAAWK,GAfM,IAAM,CACzB,OAAQe,EAAc,IAAK,CACzB,IAAK,GACH,MAAO,8LACT,IAAK,GACH,MAAO,6LACT,IAAK,GACH,MAAO,4LACT,QACE,MAAO,2LACX,CACF,GAKmB,EACb,CACE,YAAaC,CACf,EACA,kCACF,EAEA,SAAArB,EAAC,OACC,UAAWK,EAAG,mBAAoB,CAC/B,gDAAkDe,GAAe,YAAc,OAClF,CAAC,EAED,SAAAnB,EAAC,KACC,KAAMc,EAAYI,GAAM,KAAM,GAAGH,CAAa,IAAIC,CAAa,EAAE,EACjE,UAAU,0CAEV,UAAAjB,EAACS,EAAA,CACC,UAAU,SACV,aAAa,yEACb,OAAQU,GAAM,QAAQ,IACxB,EACAlB,EAAC,OAAI,UAAU,8DACb,UAAAD,EAACU,EAAA,CACC,MAAO,CACL,MAAOS,GAAM,SACf,EACA,KAAMA,GAAM,MAEZ,UAAU,2EACZ,EACCA,GAAM,aACLnB,EAACQ,EAAA,CACC,KAAMW,GAAM,YACZ,MAAO,CACL,MAAOA,GAAM,SACf,EACA,GAAG,KACH,UAAU,gHACZ,GAEJ,GACF,EACF,EACF,CAEJ,EAEMG,EAAUpB,EAAM,WAAyC,CAAC,CAAE,KAAAiB,EAAM,UAAAI,EAAW,GAAGC,CAAM,EAAGC,IAAQ,CACrG,MAAMC,EAAUP,GAAM,OAAyB,OAAS,EAClDQ,EAAWvB,EAAuB,IAAI,EAC5C,OAAAD,EAAoBsB,EAAK,IAAME,EAAS,OAAyB,EAEjEb,EAAYa,EAAU,CACpB,cAAAX,EACA,cAAAC,EACA,eAAgBE,GAAM,KACxB,CAAC,EAGCnB,EAAC,OAAI,UAAWuB,EAAW,IAAKI,EAC9B,SAAA3B,EAAC,OAAI,UAAU,cACb,SAAAC,EAACU,EAAA,CAAW,GAAIQ,GAAM,gBAAkB,CAAC,EAAI,UAAU,kBACpD,UAAAA,GAAM,OAASnB,EAACY,EAAA,CAAM,KAAM,CAAE,MAAOO,GAAM,KAAM,EAAG,EACrDnB,EAACO,EAAA,CACC,GAAG,UACH,UAAWF,EAAG,mBAAmB,EACjC,KAAM,CACJ,KAAMc,GAAM,OAAS,CAAC,EACtB,cAAe,CACb,UAAWA,EAAK,UAChB,IAAKA,GAAM,OAAO,QAAU,CAC9B,CACF,EACA,MAAOD,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAeQ,EAAS,IAAM,CAChC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAS,EAAI,CAC9B,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAS,EAAI,CAC9B,CACF,EACF,GACF,EACF,EACF,CAEJ,CAAC,EAEDJ,EAAQ,YAAc,UAEtB,IAAOM,EAAQtB,EAAWgB,CAAO",
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Heading } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { Container } from '../../components/container.js'\nimport Title from '../Title/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport type { ComponentCommonProps, ContainerProps, Img } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n  imgUrl: Img\n  title: string\n  description?: string\n  textColor?: string\n  link?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n  className?: string\n  data: {\n    title?: string\n    items?: GraphicType[]\n    itemShape?: 'round' | 'square'\n    containerProps?: ContainerProps\n  }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const handleAspect = () => {\n    switch (configuration.num) {\n      case 1:\n        return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n      case 2:\n        return 'lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[384] laptop:aspect-w-[440] laptop:aspect-h-[360] tablet:aspect-w-[346]  tablet:aspect-h-[360]'\n      case 3:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n      default:\n        return 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384] laptop:aspect-w-[288] laptop:aspect-h-[360] tablet:aspect-w-[296] tablet:aspect-h-[360]'\n    }\n  }\n\n  return (\n    <div\n      className={cn(\n        handleAspect(),\n        {\n          'h-[360px]': isMobile,\n        },\n        'flex-1 shrink-0 md:basis-[296px]'\n      )}\n    >\n      <div\n        className={cn('absolute inset-0', {\n          ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n        })}\n      >\n        <a\n          href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n          className=\"relative block size-full cursor-pointer\"\n        >\n          <Picture\n            className=\"h-full\"\n            imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n            source={data?.imgUrl?.url}\n          />\n          <div className=\"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4\">\n            <Text\n              style={{\n                color: data?.textColor,\n              }}\n              html={data?.title}\n              // eslint-disable-next-line tailwindcss/classnames-order\n              className=\"line-clamp-3 desktop:text-[18px] text-[14px] font-bold leading-[1.2]\"\n            />\n            {data?.description && (\n              <Heading\n                html={data?.description}\n                style={{\n                  color: data?.textColor,\n                }}\n                as=\"h3\"\n                className=\"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]\"\n              />\n            )}\n          </div>\n        </a>\n      </div>\n    </div>\n  )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, ...props }, ref) => {\n  const isShow = (data?.items as GraphicType[])?.length > 2\n  const innerRef = useRef<HTMLDivElement>(null)\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n  })\n\n  return (\n    <div className={className} ref={innerRef}>\n      <div className=\"graphic-box\">\n        <Container {...(data?.containerProps || {})} className=\"overflow-hidden\">\n          {data?.title && <Title data={{ title: data?.title }} />}\n          <SwiperBox\n            id=\"Graphic\"\n            className={cn('!overflow-visible')}\n            data={{\n              list: data?.items || [],\n              configuration: {\n                itemShape: data.itemShape,\n                num: data?.items?.length || 0,\n              },\n            }}\n            Slide={Item}\n            breakpoints={{\n              0: {\n                spaceBetween: 12,\n                freeMode: false,\n                slidesPerView: 1,\n              },\n              374: {\n                spaceBetween: 12,\n                freeMode: false,\n                slidesPerView: 1.1,\n              },\n              768: {\n                spaceBetween: 16,\n                freeMode: false,\n                slidesPerView: isShow ? 2.3 : 2,\n              },\n              1024: {\n                spaceBetween: 16,\n                freeMode: false,\n                slidesPerView: isShow ? 3 : 2,\n              },\n              1440: {\n                spaceBetween: 16,\n                freeMode: false,\n                slidesPerView: isShow ? 4 : 2,\n              },\n            }}\n          />\n        </Container>\n      </div>\n    </div>\n  )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
+  "mappings": "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",
   "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "cn", "withStyles", "SwiperBox", "Heading", "Picture", "Text", "Container", "Title", "useMediaQuery", "useExposure", "trackUrlRef", "componentType", "componentName", "Item", "data", "configuration", "isMobile", "Graphic", "className", "props", "ref", "isShow", "innerRef", "Graphic_default"]
 }

package/dist/esm/biz-components/HeroBanner/HeroBanner.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import v,{useImperativeHandle as $,useRef as y}from"react";import{useGSAP as D}from"@gsap/react";import c from"gsap";import{ScrollTrigger as s}from"gsap/dist/ScrollTrigger";import{Button as k,Heading as I,Picture as L,Text as H}from"../../components/index.js";import{cn as a}from"../../helpers/index.js";import{withStyles as M}from"../../shared/Styles.js";import{useExposure as U}from"../../hooks/useExposure.js";import{trackUrlRef as N}from"../../shared/trackUrlRef.js";const b="image",f="hero_banner",w=v.forwardRef(({data:B,className:P},z)=>{const{title:m,subtitle:g,pcImage:T,mobileImage:R,primaryButton:l,secondaryButton:i,theme:E="light",caption:u=[]}=B,o=y(null),t=y(null);return U(t,{componentType:b,componentName:f,componentTitle:m,componentDescription:g}),$(z,()=>t.current),D(()=>{if(c.registerPlugin(s),!o.current)return;const x=t.current?.clientHeight||100;return window.innerHeight<=x?s.create({trigger:t.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:r=>{const p=r.progress*40-20;c.set(o.current,{yPercent:p})}}):(s.create({trigger:t.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:r=>{const p=r.progress*20-20;c.set(o.current,{yPercent:p})}}),s.create({trigger:t.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:r=>{const p=r.progress*20;c.set(o.current,{yPercent:p})}})),()=>{s.getAll().forEach(r=>r.kill())}},[]),n("div",{ref:t,"data-ui-component-id":"HeroBanner",className:a(E==="dark"?"aiui-dark":"","lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",P),children:[e("div",{ref:o,className:a("absolute left-0 top-0 size-full"),children:e(L,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",source:`${T?.url||""} , ${R?.url||""} 767`})}),n("div",{className:"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]",children:[n("div",{className:"laptop:text-left max-w-[686px]",children:[m&&e(I,{as:"h1",size:5,className:a("hero-banner-title"),html:m}),g&&e(H,{as:"p",size:3,className:a("hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]"),html:g})]}),n("div",{className:"laptop:justify-start laptop:gap-3 flex items-center gap-2",children:[i&&i.text&&e("a",{href:N(i.link,`${b}_${f}`),children:e(k,{size:"lg",variant:"secondary",className:"hero-banner-secondary-button",children:i.text})}),l&&l.text&&e("a",{href:N(l.link,`${b}_${f}`),children:e(k,{size:"lg",variant:"primary",className:"hero-banner-primary-button",children:l.text})})]})]}),u.length>0&&e("div",{className:"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:u.map((x,d)=>n(v.Fragment,{children:[e(H,{size:3,className:a("hero-banner-product-text lg-desktop:text-[14px] tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] flex-1 text-[12px] leading-[1.2] tracking-[-0.02em]"),html:x.title}),d<u.length-1&&e("div",{className:a("bg-info-primary w-px")})]},d))})]})});w.displayName="HeroBanner";var K=M(w);export{K as default};
+"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import v,{useImperativeHandle as $,useRef as y}from"react";import{useGSAP as D}from"@gsap/react";import c from"gsap";import{ScrollTrigger as s}from"gsap/dist/ScrollTrigger";import{Button as k,Heading as I,Picture as L,Text as H}from"../../components/index.js";import{cn as a}from"../../helpers/index.js";import{withStyles as M}from"../../shared/Styles.js";import{useExposure as U}from"../../hooks/useExposure.js";import{trackUrlRef as N}from"../../shared/trackUrlRef.js";const b="image",f="hero_banner",w=v.forwardRef(({data:B,className:P},z)=>{const{title:m,subtitle:u,pcImage:T,mobileImage:R,primaryButton:l,secondaryButton:i,theme:E="light",caption:g=[]}=B,o=y(null),t=y(null);return U(t,{componentType:b,componentName:f,componentTitle:m,componentDescription:u}),$(z,()=>t.current),D(()=>{if(c.registerPlugin(s),!o.current)return;const x=t.current?.clientHeight||100;return window.innerHeight<=x?s.create({trigger:t.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:r=>{const p=r.progress*40-20;c.set(o.current,{yPercent:p})}}):(s.create({trigger:t.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:r=>{const p=r.progress*20-20;c.set(o.current,{yPercent:p})}}),s.create({trigger:t.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:r=>{const p=r.progress*20;c.set(o.current,{yPercent:p})}})),()=>{s.getAll().forEach(r=>r.kill())}},[]),n("div",{ref:t,"data-ui-component-id":"HeroBanner",className:a(E==="dark"?"aiui-dark":"","lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",P),children:[e("div",{ref:o,className:a("absolute left-0 top-0 size-full"),children:e(L,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",source:`${T?.url||""} , ${R?.url||""} 767`})}),n("div",{className:"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]",children:[n("div",{className:"laptop:text-left max-w-[686px]",children:[m&&e(I,{as:"h1",size:5,className:a("hero-banner-title"),html:m}),u&&e(H,{as:"p",size:3,className:a("hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]"),html:u})]}),n("div",{className:"laptop:justify-start lg-desktop:gap-3 flex items-center gap-2",children:[i&&i.text&&e("a",{href:N(i.link,`${b}_${f}`),children:e(k,{size:"lg",variant:"secondary",className:"hero-banner-secondary-button",children:i.text})}),l&&l.text&&e("a",{href:N(l.link,`${b}_${f}`),children:e(k,{size:"lg",variant:"primary",className:"hero-banner-primary-button",children:l.text})})]})]}),g.length>0&&e("div",{className:"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:g.map((x,d)=>n(v.Fragment,{children:[e(H,{size:2,className:a("hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] lg-desktop:text-[14px] flex-1 text-[12px]"),html:x.title}),d<g.length-1&&e("div",{className:a("bg-info-primary w-px")})]},d))})]})});w.displayName="HeroBanner";var K=M(w);export{K as default};
 //# sourceMappingURL=HeroBanner.js.map

package/dist/esm/biz-components/HeroBanner/HeroBanner.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n  const { title, subtitle, pcImage, mobileImage, primaryButton, secondaryButton, theme = 'light', caption = [] } = data\n\n  const bgRef = useRef<HTMLImageElement>(null)\n  const boxRef = useRef<HTMLDivElement>(null)\n\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  useGSAP(() => {\n    gsap.registerPlugin(ScrollTrigger)\n    if (!bgRef.current) return\n    const clientHeight = boxRef.current?.clientHeight || 100\n    const screenHeight = window.innerHeight\n\n    if (screenHeight <= clientHeight) {\n      ScrollTrigger.create({\n        trigger: boxRef.current,\n        start: 'top bottom',\n        end: 'bottom top',\n        scrub: true,\n        onUpdate: (self: any) => {\n          const base = 40\n          const value = self.progress * base - base / 2\n          gsap.set(bgRef.current, { yPercent: value })\n        },\n      })\n    } else {\n      ScrollTrigger.create({\n        trigger: boxRef.current,\n        start: 'top bottom',\n        end: 'bottom bottom',\n        scrub: true,\n        onUpdate: (self: any) => {\n          const base = 20\n          const value = self.progress * base - base\n          gsap.set(bgRef.current, { yPercent: value })\n        },\n      })\n      ScrollTrigger.create({\n        trigger: boxRef.current,\n        start: 'top top',\n        end: 'bottom top',\n        scrub: true,\n        onUpdate: (self: any) => {\n          const base = 20\n          const value = self.progress * base\n          gsap.set(bgRef.current, { yPercent: value })\n        },\n      })\n    }\n    return () => {\n      ScrollTrigger.getAll().forEach((t: any) => t.kill())\n    }\n  }, [])\n\n  return (\n    <div\n      ref={boxRef}\n      data-ui-component-id=\"HeroBanner\"\n      className={cn(\n        theme === 'dark' ? 'aiui-dark' : '',\n        'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n        className\n      )}\n    >\n      <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n        <Picture\n          className=\"laptop:w-full h-full\"\n          imgClassName=\"h-full object-cover\"\n          loading=\"eager\"\n          fetchPriority=\"high\"\n          source={`${pcImage?.url || ''} , ${mobileImage?.url || ''} 767`}\n        />\n      </div>\n\n      {/* \u5185\u5BB9\u533A\u57DF */}\n      <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n        <div className=\"laptop:text-left max-w-[686px]\">\n          {title && <Heading as=\"h1\" size={5} className={cn('hero-banner-title')} html={title} />}\n          {subtitle && (\n            <Text\n              as=\"p\"\n              size={3}\n              className={cn(\n                'hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]'\n              )}\n              html={subtitle}\n            />\n          )}\n        </div>\n        {/* \u6309\u94AE\u7EC4 */}\n        <div className=\"laptop:justify-start laptop:gap-3 flex items-center gap-2\">\n          {secondaryButton && secondaryButton.text && (\n            <a href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}>\n              <Button size=\"lg\" variant=\"secondary\" className=\"hero-banner-secondary-button\">\n                {secondaryButton.text}\n              </Button>\n            </a>\n          )}\n          {primaryButton && primaryButton.text && (\n            <a href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}>\n              <Button size=\"lg\" variant=\"primary\" className=\"hero-banner-primary-button\">\n                {primaryButton.text}\n              </Button>\n            </a>\n          )}\n        </div>\n      </div>\n\n      {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n      {caption.length > 0 && (\n        <div className=\"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n          {caption.map((c, index) => (\n            <React.Fragment key={index}>\n              <Text\n                size={3}\n                className={cn(\n                  'hero-banner-product-text lg-desktop:text-[14px] tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] flex-1 text-[12px] leading-[1.2] tracking-[-0.02em]'\n                )}\n                html={c.title}\n              />\n              {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n            </React.Fragment>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n  const { title, subtitle, pcImage, mobileImage, primaryButton, secondaryButton, theme = 'light', caption = [] } = data\n\n  const bgRef = useRef<HTMLImageElement>(null)\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  useGSAP(() => {\n    gsap.registerPlugin(ScrollTrigger)\n    if (!bgRef.current) return\n    const clientHeight = boxRef.current?.clientHeight || 100\n    const screenHeight = window.innerHeight\n\n    if (screenHeight <= clientHeight) {\n      ScrollTrigger.create({\n        trigger: boxRef.current,\n        start: 'top bottom',\n        end: 'bottom top',\n        scrub: true,\n        onUpdate: (self: any) => {\n          const base = 40\n          const value = self.progress * base - base / 2\n          gsap.set(bgRef.current, { yPercent: value })\n        },\n      })\n    } else {\n      ScrollTrigger.create({\n        trigger: boxRef.current,\n        start: 'top bottom',\n        end: 'bottom bottom',\n        scrub: true,\n        onUpdate: (self: any) => {\n          const base = 20\n          const value = self.progress * base - base\n          gsap.set(bgRef.current, { yPercent: value })\n        },\n      })\n      ScrollTrigger.create({\n        trigger: boxRef.current,\n        start: 'top top',\n        end: 'bottom top',\n        scrub: true,\n        onUpdate: (self: any) => {\n          const base = 20\n          const value = self.progress * base\n          gsap.set(bgRef.current, { yPercent: value })\n        },\n      })\n    }\n    return () => {\n      ScrollTrigger.getAll().forEach((t: any) => t.kill())\n    }\n  }, [])\n\n  return (\n    <div\n      ref={boxRef}\n      data-ui-component-id=\"HeroBanner\"\n      className={cn(\n        theme === 'dark' ? 'aiui-dark' : '',\n        'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n        className\n      )}\n    >\n      <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n        <Picture\n          className=\"laptop:w-full h-full\"\n          imgClassName=\"h-full object-cover\"\n          loading=\"eager\"\n          fetchPriority=\"high\"\n          source={`${pcImage?.url || ''} , ${mobileImage?.url || ''} 767`}\n        />\n      </div>\n\n      {/* \u5185\u5BB9\u533A\u57DF */}\n      <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n        <div className=\"laptop:text-left max-w-[686px]\">\n          {title && <Heading as=\"h1\" size={5} className={cn('hero-banner-title')} html={title} />}\n          {subtitle && (\n            <Text\n              as=\"p\"\n              size={3}\n              className={cn(\n                'hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]'\n              )}\n              html={subtitle}\n            />\n          )}\n        </div>\n        {/* \u6309\u94AE\u7EC4 */}\n        <div className=\"laptop:justify-start lg-desktop:gap-3 flex items-center gap-2\">\n          {secondaryButton && secondaryButton.text && (\n            <a href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}>\n              <Button size=\"lg\" variant=\"secondary\" className=\"hero-banner-secondary-button\">\n                {secondaryButton.text}\n              </Button>\n            </a>\n          )}\n          {primaryButton && primaryButton.text && (\n            <a href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}>\n              <Button size=\"lg\" variant=\"primary\" className=\"hero-banner-primary-button\">\n                {primaryButton.text}\n              </Button>\n            </a>\n          )}\n        </div>\n      </div>\n\n      {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n      {caption.length > 0 && (\n        <div className=\"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n          {caption.map((c, index) => (\n            <React.Fragment key={index}>\n              <Text\n                size={2}\n                className={cn(\n                  'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] lg-desktop:text-[14px] flex-1 text-[12px]'\n                )}\n                html={c.title}\n              />\n              {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n            </React.Fragment>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
+  "mappings": "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",
   "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useGSAP", "gsap", "ScrollTrigger", "Button", "Heading", "Picture", "Text", "cn", "withStyles", "useExposure", "trackUrlRef", "componentType", "componentName", "HeroBanner", "data", "className", "ref", "title", "subtitle", "pcImage", "mobileImage", "primaryButton", "secondaryButton", "theme", "caption", "bgRef", "boxRef", "clientHeight", "self", "value", "t", "c", "index", "HeroBanner_default"]
 }

package/dist/esm/biz-components/MediaPlayerBase/index.d.ts CHANGED Viewed

@@ -1,7 +1,6 @@
-import React from 'react';
 import type { MediaPlayerBaseProps } from './types.js';
-declare const _default: React.ForwardRefExoticComponent<Omit<Omit<MediaPlayerBaseProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
+declare const _default: import("react").ForwardRefExoticComponent<Omit<Omit<MediaPlayerBaseProps & import("react").RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
     className?: string;
     data?: Record<string, any>;
-}, "ref"> & React.RefAttributes<any>>;
+}, "ref"> & import("react").RefAttributes<any>>;
 export default _default;

package/dist/esm/biz-components/MediaPlayerBase/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{Fragment as G,jsx as e,jsxs as p}from"react/jsx-runtime";import{useState as x,useRef as h,useEffect as L,forwardRef as D,useImperativeHandle as F}from"react";import{debounce as Y}from"lodash";import{cn as d}from"../../helpers/utils.js";import{withStyles as j}from"../../shared/Styles.js";import"../../components/picture.js";import q from"../../components/button.js";import{convertLexicalToHTML as M}from"@payloadcms/richtext-lexical/html";import{useInView as O}from"react-intersection-observer";const T=({defaultConverters:m})=>({...m,text:s=>{const{node:t}=s;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),A=D(({className:m="",onBtnClick:s,data:{title:t,videoTitle:i,btnText:u,img:J,video:N,theme:P,shape:E,...R}},z)=>{const{sticky:r}=R,[a,l]=x(!1),[y,B]=x(0),[$,I]=x(0),n=h(null),_=h(null),o=h(null),{ref:C,inView:w}=O();F(z,()=>o.current);const H=typeof t=="string"?t:t&&M({data:t,converters:T}),b=typeof i=="string"?i:i&&M({data:i,converters:T});L(()=>{w&&!u?(n.current?.play(),l(!0)):(n.current?.pause(),l(!1))},[w]);const f=Y(()=>{if(o.current){const v=o.current.getBoundingClientRect(),c=window.innerHeight,S=window.scrollY||window.pageYOffset,V=v.bottom+S,k=document.documentElement.scrollHeight-V;B(k>c?c:k)}if(o.current){const v=o.current.clientHeight,c=window.innerHeight;I(v+c)}},600);L(()=>(f(),window.addEventListener("resize",f),()=>{window.removeEventListener("resize",f)}),[]);const g="lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]";return p(G,{children:[r&&e("div",{ref:o,className:d("relative z-10 ",g),children:e("div",{children:p("div",{ref:C,className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4",children:[H&&!a&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:H}}),b&&a&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:b}}),!a&&u&&e(q,{variant:"link",className:d("member-equity-button-secondary text-btn-primary-foreground"),onClick:()=>{a?(n.current&&n.current.pause(),l(!1)):(n.current&&n.current.play(),l(!0)),s&&s?.()},children:u})]})})}),p("div",{style:r?{marginBottom:`-${y}px`,marginTop:`-${$}px`}:{},className:"relative",children:[e("div",{className:"sticky top-0 ",children:e("div",{className:d("relative overflow-hidden",r?"h-screen w-full":g,m,{"aiui-dark":P==="dark","rounded-box":E==="rounded"}),children:e("div",{children:p("div",{ref:_,className:"media-cover left-0 top-0 h-screen w-screen",children:[e("video",{ref:n,className:"size-full object-cover",src:N?.url,muted:!0,loop:!0,playsInline:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e("div",{className:"absolute left-0 top-0 z-10 size-full"})]})})})}),e("div",{className:d(r&&"relative box-content block",g),style:r?{height:`${y}px`}:{}})]})]})});var se=j(A);export{se as default};
+"use client";import{Fragment as J,jsx as e,jsxs as d}from"react/jsx-runtime";import{useState as y,useRef as h,useEffect as L,forwardRef as D,useImperativeHandle as F}from"react";import{debounce as Y}from"lodash";import{cn as p}from"../../helpers/utils.js";import{withStyles as j}from"../../shared/Styles.js";import q from"../../components/button.js";import{convertLexicalToHTML as M}from"@payloadcms/richtext-lexical/html";import{useInView as O}from"react-intersection-observer";import{useExposure as A}from"../../hooks/useExposure.js";const N=({defaultConverters:m})=>({...m,text:r=>{const{node:t}=r;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),G=D(({className:m="",onBtnClick:r,data:{title:t,videoTitle:i,btnText:u,img:K,video:E,theme:P,shape:z,...B}},R)=>{const{sticky:s}=B,[a,l]=y(!1),[w,_]=y(0),[$,I]=y(0),n=h(null),b=h(null),o=h(null),{ref:C,inView:H}=O();F(R,()=>o.current);const T=typeof t=="string"?t:t&&M({data:t,converters:N}),f=typeof i=="string"?i:i&&M({data:i,converters:N});L(()=>{H&&!u?(n.current?.play(),l(!0)):(n.current?.pause(),l(!1))},[H]);const v=Y(()=>{if(o.current){const x=o.current.getBoundingClientRect(),c=window.innerHeight,S=window.scrollY||window.pageYOffset,V=x.bottom+S,k=document.documentElement.scrollHeight-V;_(k>c?c:k)}if(o.current){const x=o.current.clientHeight,c=window.innerHeight;I(x+c)}},600);L(()=>(v(),window.addEventListener("resize",v),()=>{window.removeEventListener("resize",v)}),[]),A(b,{componentType:"video",componentName:"mdia_player_base",componentTitle:f});const g="lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]";return d(J,{children:[s&&e("div",{ref:o,className:p("relative z-10 ",g),children:e("div",{children:d("div",{ref:C,className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4",children:[T&&!a&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:T}}),f&&a&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:f}}),!a&&u&&e(q,{variant:"link",className:p("member-equity-button-secondary text-btn-primary-foreground"),onClick:()=>{a?(n.current&&n.current.pause(),l(!1)):(n.current&&n.current.play(),l(!0)),r&&r?.()},children:u})]})})}),d("div",{style:s?{marginBottom:`-${w}px`,marginTop:`-${$}px`}:{},className:"relative",children:[e("div",{className:"sticky top-0 ",children:e("div",{className:p("relative overflow-hidden",s?"h-screen w-full":g,m,{"aiui-dark":P==="dark","rounded-box":z==="rounded"}),children:e("div",{children:d("div",{ref:b,className:"media-cover left-0 top-0 h-screen w-screen",children:[e("video",{ref:n,className:"size-full object-cover",src:E?.url,muted:!0,loop:!0,playsInline:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e("div",{className:"absolute left-0 top-0 z-10 size-full"})]})})})}),e("div",{className:p(s&&"relative box-content block",g),style:s?{height:`${w}px`}:{}})]})]})});var se=j(G);export{se as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/MediaPlayerBase/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaPlayerBase/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n  ...defaultConverters,\n  text: args => {\n    const { node } = args\n\n    // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n    if (node.$ && node.$.color) {\n      return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n    }\n    return node.text\n  },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n  ({ className = '', onBtnClick, data: { title, videoTitle, btnText, img, video, theme, shape, ...rest } }, ref) => {\n    const { sticky } = rest\n    const [isPlaying, setIsPlaying] = useState(false)\n    const [btb, setbtb] = useState(0)\n    const [titleHeight, setTitleHeight] = useState(0)\n\n    const videoRef = useRef<HTMLVideoElement>(null)\n    const bgRef = useRef<HTMLImageElement>(null)\n    const titleRef = useRef<HTMLDivElement>(null)\n\n    const { ref: inViewRef, inView } = useInView()\n\n    useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n    const title_html =\n      typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n    const videoTitle_html =\n      typeof videoTitle === 'string'\n        ? videoTitle\n        : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n    useEffect(() => {\n      if (inView && !btnText) {\n        videoRef.current?.play()\n        setIsPlaying(true)\n      } else {\n        videoRef.current?.pause()\n        setIsPlaying(false)\n      }\n    }, [inView])\n\n    const debouncedHandleResize = debounce(() => {\n      if (titleRef.current) {\n        const rect = titleRef.current.getBoundingClientRect()\n        const screenHeight = window.innerHeight\n        const scrollTop = window.scrollY || window.pageYOffset\n        const elementBottomToPageTop = rect.bottom + scrollTop\n        const pageHeight = document.documentElement.scrollHeight\n        const distanceToPageBottom = pageHeight - elementBottomToPageTop\n        setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n      }\n      if (titleRef.current) {\n        const titleHeight = titleRef.current.clientHeight\n        const screenHeight = window.innerHeight\n        setTitleHeight(titleHeight + screenHeight)\n      }\n    }, 600)\n\n    useEffect(() => {\n      debouncedHandleResize()\n      window.addEventListener('resize', debouncedHandleResize)\n      return () => {\n        window.removeEventListener('resize', debouncedHandleResize)\n      }\n    }, [])\n\n    const aspect =\n      'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n    return (\n      <>\n        {sticky && (\n          <div ref={titleRef} className={cn('relative z-10 ', aspect)}>\n            <div>\n              <div\n                ref={inViewRef}\n                className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4\"\n              >\n                {title_html && !isPlaying && (\n                  <div\n                    className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                    dangerouslySetInnerHTML={{ __html: title_html }}\n                  />\n                )}\n                {videoTitle_html && isPlaying && (\n                  <div\n                    className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                    dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n                  />\n                )}\n                {!isPlaying && btnText && (\n                  <Button\n                    variant=\"link\"\n                    className={cn('member-equity-button-secondary text-btn-primary-foreground')}\n                    onClick={() => {\n                      if (isPlaying) {\n                        if (videoRef.current) {\n                          videoRef.current.pause()\n                        }\n                        setIsPlaying(false)\n                      } else {\n                        if (videoRef.current) {\n                          videoRef.current.play()\n                        }\n                        setIsPlaying(true)\n                      }\n                      onBtnClick && onBtnClick?.()\n                    }}\n                  >\n                    {btnText}\n                    {/* <Right /> */}\n                  </Button>\n                )}\n              </div>\n            </div>\n          </div>\n        )}\n        <div style={sticky ? { marginBottom: `-${btb}px`, marginTop: `-${titleHeight}px` } : {}} className=\"relative\">\n          <div className=\"sticky top-0 \">\n            <div\n              className={cn('relative overflow-hidden', sticky ? 'h-screen w-full' : aspect, className, {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              })}\n            >\n              <div>\n                <div ref={bgRef} className=\"media-cover left-0 top-0 h-screen w-screen\">\n                  <video\n                    ref={videoRef}\n                    className=\"size-full object-cover\"\n                    src={video?.url}\n                    muted\n                    loop\n                    playsInline\n                    webkit-playsinline\n                    x5-playsinline\n                  />\n                  <div className=\"absolute left-0 top-0 z-10 size-full\" />\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className={cn(sticky && 'relative box-content block', aspect)}\n            style={sticky ? { height: `${btb}px` } : {}}\n          />\n        </div>\n      </>\n    )\n  }\n)\n\nexport default withStyles(MediaPlayerBase)\n"],
-  "mappings": "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",
-  "names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useEffect", "forwardRef", "useImperativeHandle", "debounce", "cn", "withStyles", "Button", "convertLexicalToHTML", "useInView", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "onBtnClick", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "videoRef", "bgRef", "titleRef", "inViewRef", "inView", "title_html", "videoTitle_html", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "aspect", "MediaPlayerBase_default"]
+  "sourcesContent": ["'use client'\nimport { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n  ...defaultConverters,\n  text: args => {\n    const { node } = args\n\n    // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n    if (node.$ && node.$.color) {\n      return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n    }\n    return node.text\n  },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n  ({ className = '', onBtnClick, data: { title, videoTitle, btnText, img, video, theme, shape, ...rest } }, ref) => {\n    const { sticky } = rest\n    const [isPlaying, setIsPlaying] = useState(false)\n    const [btb, setbtb] = useState(0)\n    const [titleHeight, setTitleHeight] = useState(0)\n\n    const videoRef = useRef<HTMLVideoElement>(null)\n    const bgRef = useRef<HTMLImageElement>(null)\n    const titleRef = useRef<HTMLDivElement>(null)\n\n    const { ref: inViewRef, inView } = useInView()\n\n    useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n    const title_html =\n      typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n    const videoTitle_html =\n      typeof videoTitle === 'string'\n        ? videoTitle\n        : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n    useEffect(() => {\n      if (inView && !btnText) {\n        videoRef.current?.play()\n        setIsPlaying(true)\n      } else {\n        videoRef.current?.pause()\n        setIsPlaying(false)\n      }\n    }, [inView])\n\n    const debouncedHandleResize = debounce(() => {\n      if (titleRef.current) {\n        const rect = titleRef.current.getBoundingClientRect()\n        const screenHeight = window.innerHeight\n        const scrollTop = window.scrollY || window.pageYOffset\n        const elementBottomToPageTop = rect.bottom + scrollTop\n        const pageHeight = document.documentElement.scrollHeight\n        const distanceToPageBottom = pageHeight - elementBottomToPageTop\n        setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n      }\n      if (titleRef.current) {\n        const titleHeight = titleRef.current.clientHeight\n        const screenHeight = window.innerHeight\n        setTitleHeight(titleHeight + screenHeight)\n      }\n    }, 600)\n\n    useEffect(() => {\n      debouncedHandleResize()\n      window.addEventListener('resize', debouncedHandleResize)\n      return () => {\n        window.removeEventListener('resize', debouncedHandleResize)\n      }\n    }, [])\n\n    useExposure(bgRef, {\n      componentType: 'video',\n      componentName: 'mdia_player_base',\n      componentTitle: videoTitle_html,\n    })\n\n    const aspect =\n      'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n    return (\n      <>\n        {sticky && (\n          <div ref={titleRef} className={cn('relative z-10 ', aspect)}>\n            <div>\n              <div\n                ref={inViewRef}\n                className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4\"\n              >\n                {title_html && !isPlaying && (\n                  <div\n                    className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                    dangerouslySetInnerHTML={{ __html: title_html }}\n                  />\n                )}\n                {videoTitle_html && isPlaying && (\n                  <div\n                    className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                    dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n                  />\n                )}\n                {!isPlaying && btnText && (\n                  <Button\n                    variant=\"link\"\n                    className={cn('member-equity-button-secondary text-btn-primary-foreground')}\n                    onClick={() => {\n                      if (isPlaying) {\n                        if (videoRef.current) {\n                          videoRef.current.pause()\n                        }\n                        setIsPlaying(false)\n                      } else {\n                        if (videoRef.current) {\n                          videoRef.current.play()\n                        }\n                        setIsPlaying(true)\n                      }\n                      onBtnClick && onBtnClick?.()\n                    }}\n                  >\n                    {btnText}\n                    {/* <Right /> */}\n                  </Button>\n                )}\n              </div>\n            </div>\n          </div>\n        )}\n        <div style={sticky ? { marginBottom: `-${btb}px`, marginTop: `-${titleHeight}px` } : {}} className=\"relative\">\n          <div className=\"sticky top-0 \">\n            <div\n              className={cn('relative overflow-hidden', sticky ? 'h-screen w-full' : aspect, className, {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              })}\n            >\n              <div>\n                <div ref={bgRef} className=\"media-cover left-0 top-0 h-screen w-screen\">\n                  <video\n                    ref={videoRef}\n                    className=\"size-full object-cover\"\n                    src={video?.url}\n                    muted\n                    loop\n                    playsInline\n                    webkit-playsinline\n                    x5-playsinline\n                  />\n                  <div className=\"absolute left-0 top-0 z-10 size-full\" />\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className={cn(sticky && 'relative box-content block', aspect)}\n            style={sticky ? { height: `${btb}px` } : {}}\n          />\n        </div>\n      </>\n    )\n  }\n)\n\nexport default withStyles(MediaPlayerBase)\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useEffect", "forwardRef", "useImperativeHandle", "debounce", "cn", "withStyles", "Button", "convertLexicalToHTML", "useInView", "useExposure", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "onBtnClick", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "videoRef", "bgRef", "titleRef", "inViewRef", "inView", "title_html", "videoTitle_html", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "aspect", "MediaPlayerBase_default"]
 }

package/dist/esm/biz-components/MediaPlayerMulti/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import{useState as d,forwardRef as x,useRef as g}from"react";import{cn as b}from"../../helpers/utils.js";import{withStyles as y}from"../../shared/Styles.js";import{Picture as M}from"../../components/index.js";import{Dialog as k,DialogContent as N}from"../../components/dialog.js";import P from"../Title/index.js";import C from"../SwiperBox/index.js";import{Container as B}from"../../components/container.js";import{convertLexicalToHTML as V}from"@payloadcms/richtext-lexical/html";import{useExposure as L}from"../../hooks/useExposure.js";const T="video",z="MediaPlayerMulti",D=({data:t,configuration:o})=>l("div",{className:b("laptop:max-w-full w-full overflow-hidden","laptop:flex-row flex shrink-0 flex-col","lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto",o.shape==="round"?"rounded-2xl":""),children:[l("div",{className:"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none",children:[e(M,{source:t.img?.url,alt:t.img?.alt||"",className:"size-full",imgClassName:"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300"}),e("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:t?.video?.url&&e("button",{onClick:()=>{o?.setVisible?.(!0),o?.setVideoUrl?.(t?.video?.url),o?.onVideoPlayBtnClick?.(o?.index||0)},className:"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:e("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),l("div",{className:"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col justify-between gap-4 overflow-hidden p-4",children:[l("div",{className:"flex flex-col",children:[e("h3",{className:"desktop:text-lg text-info-primary mb-2 text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:t.title}),t.quote&&e("p",{className:"desktop:text-lg text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:t.quote})]}),e("p",{className:"lg-desktop:text-2xl text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]",children:t.description})]})]}),j=x(({data:{items:t=[],shape:o="square",title:i,containerProps:m},className:r="",key:c,onVideoPlayBtnClick:f},u)=>{const[n,a]=d(!1),[v,s]=d(""),w=typeof i=="string"?i:i&&V({data:i}),p=g(null);return L(p,{componentType:T,componentName:z,componentTitle:i}),l("div",{className:r,ref:p,children:[e("div",{className:"mediaplayermulti-box",children:e(B,{...m||{},className:"overflow-hidden",children:l("div",{className:r,ref:u,children:[i&&e(P,{data:{title:w||""}}),e(C,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+c,data:{list:t,configuration:{shape:o,onVideoPlayBtnClick:f,setVisible:a,setVideoUrl:s}},Slide:D,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:1.5},1440:{spaceBetween:16,freeMode:!1,slidesPerView:2}}})]})})}),e(k,{open:n,onOpenChange:h=>{a(h),s("")},children:l(N,{className:"w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden",children:[n?e("video",{className:"size-full object-cover",src:v,muted:!0,loop:!0,autoPlay:!0,controls:!0}):null,e("div",{onClick:()=>{a(!1),s("")},className:"tablet:size-8 tablet:-right-10 tablet:-top-10 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white",children:e("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor","aria-hidden":"true","data-slot":"icon",className:"HomeCharger_closeWrap__Z7aBo",children:e("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M6 18 18 6M6 6l12 12"})})})]})})]})});var W=y(j);export{W as default};
+"use client";import{jsx as e,jsxs as o}from"react/jsx-runtime";import{useState as d,forwardRef as h,useRef as g}from"react";import{cn as b}from"../../helpers/utils.js";import{withStyles as y}from"../../shared/Styles.js";import{Picture as M}from"../../components/index.js";import{Dialog as N,DialogContent as k}from"../../components/dialog.js";import P from"../Title/index.js";import C from"../SwiperBox/index.js";import{Container as B}from"../../components/container.js";import{convertLexicalToHTML as V}from"@payloadcms/richtext-lexical/html";import{useExposure as L}from"../../hooks/useExposure.js";const T="video",z="MediaPlayerMulti",D=({data:t,configuration:l})=>o("div",{className:b("laptop:max-w-full w-full overflow-hidden","laptop:flex-row flex shrink-0 flex-col","lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto",l.shape==="round"?"rounded-2xl":""),children:[o("div",{className:"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none",children:[e(M,{source:t.img?.url,alt:t.img?.alt||"",className:"size-full",imgClassName:"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300"}),e("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:t?.video?.url&&e("button",{onClick:()=>{l?.setVisible?.(!0),l?.setVideoUrl?.(t?.video?.url),l?.onVideoPlayBtnClick?.(l?.index||0)},className:"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:e("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),o("div",{className:"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col justify-between gap-4 overflow-hidden p-4",children:[o("div",{className:"flex flex-col",children:[e("h3",{className:"desktop:text-lg text-info-primary mb-2 text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:t.title}),t.quote&&e("p",{className:"desktop:text-lg text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:t.quote})]}),e("p",{className:"lg-desktop:text-2xl text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]",children:t.description})]})]}),S=h(({data:{items:t=[],shape:l="square",title:i,containerProps:m},className:n="",key:c,onVideoPlayBtnClick:f},u)=>{const[p,a]=d(!1),[v,s]=d(""),w=typeof i=="string"?i:i&&V({data:i}),r=g(null);return L(r,{componentType:T,componentName:z,componentTitle:r?.current?.querySelector(".mediaplayermulti-title")?.textContent||""}),o("div",{className:n,ref:r,children:[e("div",{className:"mediaplayermulti-box",children:e(B,{...m||{},className:"overflow-hidden",children:o("div",{className:n,ref:u,children:[i&&e(P,{className:"mediaplayermulti-title",data:{title:w||""}}),e(C,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+c,data:{list:t,configuration:{shape:l,onVideoPlayBtnClick:f,setVisible:a,setVideoUrl:s}},Slide:D,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:1.5},1440:{spaceBetween:16,freeMode:!1,slidesPerView:2}}})]})})}),e(N,{open:p,onOpenChange:x=>{a(x),s("")},children:o(k,{className:"w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden",children:[p?e("video",{className:"size-full object-cover",src:v,muted:!0,loop:!0,autoPlay:!0,controls:!0}):null,e("div",{onClick:()=>{a(!1),s("")},className:"tablet:size-8 tablet:-right-10 tablet:-top-10 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white",children:e("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor","aria-hidden":"true","data-slot":"icon",className:"HomeCharger_closeWrap__Z7aBo",children:e("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M6 18 18 6M6 6l12 12"})})})]})})]})});var W=y(S);export{W as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/MediaPlayerMulti/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaPlayerMulti/index.tsx"],
-  "sourcesContent": ["'use client'\nimport { useState, forwardRef, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Picture } from '../../components/index.js'\nimport { Dialog, DialogContent } from '../../components/dialog.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Container } from '../../components/container.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nconst componentType = 'video'\nconst componentName = 'MediaPlayerMulti'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n  return (\n    <div\n      className={cn(\n        'laptop:max-w-full w-full overflow-hidden',\n        'laptop:flex-row flex shrink-0 flex-col',\n        'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n        configuration.shape === 'round' ? 'rounded-2xl' : ''\n      )}\n    >\n      <div className=\"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none\">\n        <Picture\n          source={data.img?.url}\n          alt={data.img?.alt || ''}\n          className=\"size-full\"\n          imgClassName=\"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n        />\n        <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n          {data?.video?.url && (\n            <button\n              onClick={() => {\n                configuration?.setVisible?.(true)\n                configuration?.setVideoUrl?.(data?.video?.url)\n                configuration?.onVideoPlayBtnClick?.(configuration?.index || 0)\n              }}\n              className=\"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n            >\n              <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n              </svg>\n            </button>\n          )}\n        </div>\n      </div>\n\n      <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col justify-between gap-4 overflow-hidden p-4\">\n        <div className=\"flex flex-col\">\n          <h3 className=\"desktop:text-lg text-info-primary mb-2 text-sm font-bold leading-[1.2] tracking-[-0.02em]\">\n            {data.title}\n          </h3>\n          {data.quote && (\n            <p className=\"desktop:text-lg text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]\">\n              {data.quote}\n            </p>\n          )}\n        </div>\n\n        <p className=\"lg-desktop:text-2xl text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]\">\n          {data.description}\n        </p>\n      </div>\n    </div>\n  )\n}\n\nconst MediaPlayerMulti = forwardRef<HTMLDivElement, MediaPlayerMultiProps>(\n  (\n    { data: { items = [], shape = 'square', title, containerProps }, className = '', key, onVideoPlayBtnClick },\n    ref\n  ) => {\n    const [visible, setVisible] = useState<boolean>(false)\n    const [videoUrl, setVideoUrl] = useState<string>('')\n    const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n    const wrapperRef = useRef<HTMLDivElement>(null)\n\n    useExposure(wrapperRef, {\n      componentType,\n      componentName,\n      componentTitle: title,\n    })\n\n    return (\n      <div className={className} ref={wrapperRef}>\n        <div className=\"mediaplayermulti-box\">\n          <Container {...(containerProps || {})} className=\"overflow-hidden\">\n            <div className={className} ref={ref}>\n              {title && <Title data={{ title: title_html || '' }} />}\n              <SwiperBox\n                className=\"!overflow-visible\"\n                id={'MediaPlayerMultiSwiper' + key}\n                data={{ list: items, configuration: { shape: shape, onVideoPlayBtnClick, setVisible, setVideoUrl } }}\n                Slide={MediaPlayerItem}\n                breakpoints={{\n                  0: {\n                    spaceBetween: 12,\n                    freeMode: false,\n                    slidesPerView: 1,\n                  },\n                  374: {\n                    spaceBetween: 12,\n                    freeMode: false,\n                    slidesPerView: 1.1,\n                  },\n                  768: {\n                    spaceBetween: 16,\n                    freeMode: false,\n                    slidesPerView: 2.3,\n                  },\n                  1024: {\n                    spaceBetween: 16,\n                    freeMode: false,\n                    slidesPerView: 1.5,\n                  },\n                  1440: {\n                    spaceBetween: 16,\n                    freeMode: false,\n                    slidesPerView: 2,\n                  },\n                }}\n              />\n            </div>\n          </Container>\n        </div>\n        <Dialog\n          open={visible}\n          onOpenChange={(flag: boolean) => {\n            setVisible(flag)\n            setVideoUrl('')\n          }}\n        >\n          <DialogContent className=\"w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden\">\n            {visible ? <video className=\"size-full object-cover\" src={videoUrl} muted loop autoPlay controls /> : null}\n            <div\n              onClick={() => {\n                setVisible(false)\n                setVideoUrl('')\n              }}\n              className=\"tablet:size-8 tablet:-right-10 tablet:-top-10 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white\"\n            >\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke-width=\"1.5\"\n                stroke=\"currentColor\"\n                aria-hidden=\"true\"\n                data-slot=\"icon\"\n                className=\"HomeCharger_closeWrap__Z7aBo\"\n              >\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"></path>\n              </svg>\n            </div>\n          </DialogContent>\n        </Dialog>\n      </div>\n    )\n  }\n)\n\nexport default withStyles(MediaPlayerMulti)\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport { useState, forwardRef, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Picture } from '../../components/index.js'\nimport { Dialog, DialogContent } from '../../components/dialog.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Container } from '../../components/container.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nconst componentType = 'video'\nconst componentName = 'MediaPlayerMulti'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n  return (\n    <div\n      className={cn(\n        'laptop:max-w-full w-full overflow-hidden',\n        'laptop:flex-row flex shrink-0 flex-col',\n        'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n        configuration.shape === 'round' ? 'rounded-2xl' : ''\n      )}\n    >\n      <div className=\"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none\">\n        <Picture\n          source={data.img?.url}\n          alt={data.img?.alt || ''}\n          className=\"size-full\"\n          imgClassName=\"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n        />\n        <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n          {data?.video?.url && (\n            <button\n              onClick={() => {\n                configuration?.setVisible?.(true)\n                configuration?.setVideoUrl?.(data?.video?.url)\n                configuration?.onVideoPlayBtnClick?.(configuration?.index || 0)\n              }}\n              className=\"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n            >\n              <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n              </svg>\n            </button>\n          )}\n        </div>\n      </div>\n\n      <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col justify-between gap-4 overflow-hidden p-4\">\n        <div className=\"flex flex-col\">\n          <h3 className=\"desktop:text-lg text-info-primary mb-2 text-sm font-bold leading-[1.2] tracking-[-0.02em]\">\n            {data.title}\n          </h3>\n          {data.quote && (\n            <p className=\"desktop:text-lg text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]\">\n              {data.quote}\n            </p>\n          )}\n        </div>\n\n        <p className=\"lg-desktop:text-2xl text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]\">\n          {data.description}\n        </p>\n      </div>\n    </div>\n  )\n}\n\nconst MediaPlayerMulti = forwardRef<HTMLDivElement, MediaPlayerMultiProps>(\n  (\n    { data: { items = [], shape = 'square', title, containerProps }, className = '', key, onVideoPlayBtnClick },\n    ref\n  ) => {\n    const [visible, setVisible] = useState<boolean>(false)\n    const [videoUrl, setVideoUrl] = useState<string>('')\n    const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n    const wrapperRef = useRef<HTMLDivElement>(null)\n\n    useExposure(wrapperRef, {\n      componentType,\n      componentName,\n      componentTitle: wrapperRef?.current?.querySelector('.mediaplayermulti-title')?.textContent || '',\n    })\n\n    return (\n      <div className={className} ref={wrapperRef}>\n        <div className=\"mediaplayermulti-box\">\n          <Container {...(containerProps || {})} className=\"overflow-hidden\">\n            <div className={className} ref={ref}>\n              {title && <Title className=\"mediaplayermulti-title\" data={{ title: title_html || '' }} />}\n              <SwiperBox\n                className=\"!overflow-visible\"\n                id={'MediaPlayerMultiSwiper' + key}\n                data={{ list: items, configuration: { shape: shape, onVideoPlayBtnClick, setVisible, setVideoUrl } }}\n                Slide={MediaPlayerItem}\n                breakpoints={{\n                  0: {\n                    spaceBetween: 12,\n                    freeMode: false,\n                    slidesPerView: 1,\n                  },\n                  374: {\n                    spaceBetween: 12,\n                    freeMode: false,\n                    slidesPerView: 1.1,\n                  },\n                  768: {\n                    spaceBetween: 16,\n                    freeMode: false,\n                    slidesPerView: 2.3,\n                  },\n                  1024: {\n                    spaceBetween: 16,\n                    freeMode: false,\n                    slidesPerView: 1.5,\n                  },\n                  1440: {\n                    spaceBetween: 16,\n                    freeMode: false,\n                    slidesPerView: 2,\n                  },\n                }}\n              />\n            </div>\n          </Container>\n        </div>\n        <Dialog\n          open={visible}\n          onOpenChange={(flag: boolean) => {\n            setVisible(flag)\n            setVideoUrl('')\n          }}\n        >\n          <DialogContent className=\"w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden\">\n            {visible ? <video className=\"size-full object-cover\" src={videoUrl} muted loop autoPlay controls /> : null}\n            <div\n              onClick={() => {\n                setVisible(false)\n                setVideoUrl('')\n              }}\n              className=\"tablet:size-8 tablet:-right-10 tablet:-top-10 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white\"\n            >\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke-width=\"1.5\"\n                stroke=\"currentColor\"\n                aria-hidden=\"true\"\n                data-slot=\"icon\"\n                className=\"HomeCharger_closeWrap__Z7aBo\"\n              >\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"></path>\n              </svg>\n            </div>\n          </DialogContent>\n        </Dialog>\n      </div>\n    )\n  }\n)\n\nexport default withStyles(MediaPlayerMulti)\n"],
+  "mappings": "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",
   "names": ["jsx", "jsxs", "useState", "forwardRef", "useRef", "cn", "withStyles", "Picture", "Dialog", "DialogContent", "Title", "SwiperBox", "Container", "convertLexicalToHTML", "useExposure", "componentType", "componentName", "MediaPlayerItem", "data", "configuration", "MediaPlayerMulti", "items", "shape", "title", "containerProps", "className", "key", "onVideoPlayBtnClick", "ref", "visible", "setVisible", "videoUrl", "setVideoUrl", "title_html", "wrapperRef", "flag", "MediaPlayerMulti_default"]
 }