@anker-in/headless-ui 1.1.16 → 1.1.17-alpha.1765854227659

package/dist/esm/components/picture.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/picture.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useCallback, useMemo } from 'react'\n\nconst APPEND_FILE_SUFFIX_MATCH_DOMAIN = ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com']\n\nconst MAX_SIZE = 3960\nconst FIXED_MAX_SIZE = 3980\n\nexport interface PictureProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n  /** picture \u5185\u90E8img \u6807\u7B7E\u7684\u7C7B\u540D */\n  imgClassName?: string\n  /** \u56FE\u7247url , \u652F\u6301\u4F20\u5165\u4E0D\u540C\u5206\u8FA8\u7387\u4E0B\u7684\u56FE\u7247\uFF0C\u6BD4\u5982\uFF0C\u683C\u5F0F \"url1 1920\uFF0C url2 1080, url3 767\" */\n  source?: string\n  /** \u56FE\u7247\u8D28\u91CF */\n  quality?: number\n  /** \u54CD\u5E94\u5F0F\u56FE\u7247\uFF0C\u5BF9\u5E94picture \u4E0Bsource \u7684max-width */\n  deviceSizes?: number[]\n  alt?: string\n}\nconst images = {\n  domains: ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com'],\n  deviceSizes: [375, 390, 768, 1024, 1280, 1440, 1540, 1920],\n}\n\nconst isMatchDomain = (srcDomain: string) => {\n  return APPEND_FILE_SUFFIX_MATCH_DOMAIN.some(domain => srcDomain == domain)\n}\nconst idMatchFileExtensions = (fileName: string = '') => /\\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(fileName)\n\n/**\n * \u4ECE URL \u4E2D\u89E3\u6790 alt \u53C2\u6570\n * @param url \u56FE\u7247 URL\n * @returns \u89E3\u6790\u51FA\u7684 alt \u503C\uFF0C\u5982\u679C\u6CA1\u6709\u5219\u8FD4\u56DE\u7A7A\u5B57\u7B26\u4E32\n */\nconst parseAltFromUrl = (url: string): string => {\n  try {\n    return new URL(url).searchParams.get('alt') || ''\n  } catch {\n    return ''\n  }\n}\n\n/**\n * \u79FB\u9664 URL \u4E2D\u7684 alt \u53C2\u6570\n * @param url \u56FE\u7247 URL\n * @returns \u79FB\u9664 alt \u53C2\u6570\u540E\u7684 URL\n */\nconst removeAltFromUrl = (url: string): string => {\n  try {\n    const urlObj = new URL(url)\n    urlObj.searchParams.delete('alt')\n    return urlObj.toString()\n  } catch {\n    return url\n  }\n}\n\n/**\n * Picture - \u56FE\u7247\n *\n * @description \u54CD\u5E94\u5F0F\u56FE\u7247\u7EC4\u4EF6\uFF0C\u652F\u6301\u591A\u79CD\u5206\u8FA8\u7387\u3001\u8D28\u91CF\u63A7\u5236\u548C\u81EA\u52A8alt\u6587\u672C\u89E3\u6790\u529F\u80FD\n */\nconst Picture = React.forwardRef<HTMLPictureElement, PictureProps>(\n  (\n    {\n      imgClassName = '',\n      source = '',\n      quality = 2,\n      deviceSizes = [390, 767, 1024, 1439, 1919],\n      className,\n      loading = 'lazy',\n      alt = '',\n      ...rest\n    }: PictureProps,\n    ref\n  ) => {\n    const isShopifycdn = (src: string | string[]) => {\n      const domains = images?.domains || []\n      return domains.some(domain => src.includes(domain))\n    }\n\n    const imgSrcSetsize = useCallback(({ src, width }: { src: string; width: number }) => {\n      const size = width\n      const cleanSrc = removeAltFromUrl(src)\n      try {\n        const parsedUrl = new URL(cleanSrc)\n        if (!isMatchDomain(parsedUrl.hostname)) {\n          return cleanSrc\n        }\n        const fileName = parsedUrl.pathname.split('/').pop() || ''\n        if (idMatchFileExtensions(fileName)) {\n          return cleanSrc\n            ?.split('/')\n            ?.map(item => {\n              if (\n                isShopifycdn(cleanSrc) &&\n                /\\.(png|apng|jpg|jpeg|gif|svg|webp|tif)(\\?.*)?/.test(item) &&\n                /_[0-9]{2,4}x/.test(cleanSrc) === false\n              ) {\n                const name = item.split('.')\n                return name\n                  .map((v, i) => {\n                    if (i === name.length - 2) {\n                      return `${v}_${size < 3960 ? size : 3980}x`\n                    }\n                    return v\n                  })\n                  .join('.')\n              }\n              return item\n            })\n            .join('/')\n        }\n      } catch (error) {\n        return cleanSrc\n      }\n    }, [])\n\n    const sourceSrcSet = useCallback(\n      ({ srcArr, width }: { srcArr: string[][]; width: number }) => {\n        const computedWidth = width * quality\n        const defaultSrc = imgSrcSetsize({ src: srcArr[0][0], width: computedWidth })\n\n        const matchingSrc = srcArr\n          .filter(([, breakpoint]) => breakpoint && parseInt(breakpoint, 10) >= width)\n          .map(([src]) => imgSrcSetsize({ src, width: computedWidth }))\n          .pop()\n\n        return <source key={width} srcSet={matchingSrc || defaultSrc} media={`(max-width: ${width}px)`} />\n      },\n      [imgSrcSetsize, quality]\n    )\n\n    const sourceList = useMemo(() => {\n      if (typeof source !== 'string' || !source) {\n        return { sources: [], defaultImg: undefined, parsedAlt: alt || '' }\n      }\n\n      const cleaned = source\n        .replace(/[\\r\\n]/g, '')\n        .replace(/\\s\\s+/g, ' ')\n        .trim()\n\n      // \u57FA\u4E8EHTTP\u534F\u8BAE\u8BC6\u522BURL\u8FB9\u754C\u7684\u89E3\u6790\u65B9\u6848\n      const parseSourceByHttpBoundary = (input: string): string[][] => {\n        const result: string[][] = []\n\n        // \u627E\u5230\u6240\u6709http://\u6216https://\u5F00\u5934\u7684\u4F4D\u7F6E\n        const httpPositions: number[] = []\n        const httpRegex = /https?:\\/\\//g\n        let match\n        while ((match = httpRegex.exec(input)) !== null) {\n          httpPositions.push(match.index)\n        }\n\n        // \u5982\u679C\u6CA1\u627E\u5230http\uFF0Cfallback\u5230\u539F\u903B\u8F91\uFF08\u517C\u5BB9\u76F8\u5BF9\u8DEF\u5F84\u7B49\uFF09\n        if (httpPositions.length === 0) {\n          const fallback = input.split(',').map(item => item.split(' ').filter(Boolean))\n          return fallback.filter(parts => parts.length > 0)\n        }\n\n        // \u5904\u7406\u6BCF\u4E2AURL\u6BB5\n        for (let i = 0; i < httpPositions.length; i++) {\n          const start = httpPositions[i]\n          const end = i < httpPositions.length - 1 ? httpPositions[i + 1] : input.length\n\n          let segment = input.slice(start, end).trim()\n\n          // \u79FB\u9664\u672B\u5C3E\u7684\u9017\u53F7\u548C\u7A7A\u683C\n          segment = segment.replace(/\\s*,\\s*$/, '').trim()\n\n          // \u4ECE\u53F3\u5F80\u5DE6\u67E5\u627E\u6700\u540E\u4E00\u4E2A\u7A7A\u683C+\u6570\u5B57\u7684\u6A21\u5F0F\uFF08\u5C3A\u5BF8\u53C2\u6570\uFF09\n          const sizeMatch = segment.match(/^(.+?)\\s+(\\d+)$/)\n\n          if (sizeMatch) {\n            // \u6709\u5C3A\u5BF8\u53C2\u6570\n            result.push([sizeMatch[1].trim(), sizeMatch[2]])\n          } else {\n            // \u6CA1\u6709\u5C3A\u5BF8\u53C2\u6570\n            if (segment) result.push([segment])\n          }\n        }\n\n        return result\n      }\n\n      const srcArr = parseSourceByHttpBoundary(cleaned)\n\n      // \u4ECE URL \u4E2D\u89E3\u6790 alt \u53C2\u6570\uFF0C\u4F18\u5148\u4F7F\u7528\u7B2C\u4E00\u4E2A\u6709 alt \u53C2\u6570\u7684 URL\n      const parsedAlt =\n        alt ||\n        srcArr\n          .map(item => item[0])\n          .filter(Boolean)\n          .map(parseAltFromUrl)\n          .find(Boolean) ||\n        ''\n\n      const sources = deviceSizes.map(width => sourceSrcSet({ srcArr, width }))\n      const defaultImg = imgSrcSetsize({ src: srcArr[0][0], width: 1920 * quality })\n\n      return { sources, defaultImg, parsedAlt }\n    }, [deviceSizes, imgSrcSetsize, quality, source, sourceSrcSet, alt])\n\n    const { sources, defaultImg, parsedAlt } = sourceList\n\n    return (\n      <picture ref={ref} className={`block overflow-hidden ${className}`}>\n        {sources}\n        {defaultImg && (\n          <img\n            key=\"default\"\n            src={defaultImg}\n            className={`w-full ${imgClassName}`}\n            loading={loading}\n            alt={parsedAlt}\n            {...rest}\n          />\n        )}\n        {rest.children}\n      </picture>\n    )\n  }\n)\nexport default Picture\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "React", "useCallback", "useMemo", "APPEND_FILE_SUFFIX_MATCH_DOMAIN", "MAX_SIZE", "FIXED_MAX_SIZE", "images", "isMatchDomain", "srcDomain", "domain", "idMatchFileExtensions", "fileName", "parseAltFromUrl", "url", "removeAltFromUrl", "urlObj", "Picture", "imgClassName", "source", "quality", "deviceSizes", "className", "loading", "alt", "rest", "ref", "isShopifycdn", "src", "imgSrcSetsize", "width", "size", "cleanSrc", "parsedUrl", "item", "name", "v", "i", "sourceSrcSet", "srcArr", "computedWidth", "defaultSrc", "matchingSrc", "breakpoint", "sourceList", "cleaned", "input", "result", "httpPositions", "httpRegex", "match", "parts", "start", "end", "segment", "sizeMatch", "parsedAlt", "sources", "defaultImg", "picture_default"]
+  "sourcesContent": ["'use client'\nimport React, { useCallback, useMemo } from 'react'\n\nconst APPEND_FILE_SUFFIX_MATCH_DOMAIN = ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com']\n\nconst MAX_SIZE = 3960\nconst FIXED_MAX_SIZE = 3980\n\nexport interface PictureProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n  /** picture \u5185\u90E8img \u6807\u7B7E\u7684\u7C7B\u540D */\n  imgClassName?: string\n  /** \u56FE\u7247url , \u652F\u6301\u4F20\u5165\u4E0D\u540C\u5206\u8FA8\u7387\u4E0B\u7684\u56FE\u7247\uFF0C\u6BD4\u5982\uFF0C\u683C\u5F0F \"url1 1920\uFF0C url2 1080, url3 767\" */\n  source?: string\n  /** \u56FE\u7247\u8D28\u91CF */\n  quality?: number\n  /** \u54CD\u5E94\u5F0F\u56FE\u7247\uFF0C\u5BF9\u5E94picture \u4E0Bsource \u7684max-width */\n  deviceSizes?: number[]\n  alt?: string\n}\nconst images = {\n  domains: ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com'],\n  deviceSizes: [375, 390, 768, 1024, 1280, 1440, 1540, 1920],\n}\n\nconst isMatchDomain = (srcDomain: string) => {\n  return APPEND_FILE_SUFFIX_MATCH_DOMAIN.some(domain => srcDomain == domain)\n}\nconst idMatchFileExtensions = (fileName: string = '') => /\\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(fileName)\n\n/**\n * \u4ECE URL \u4E2D\u89E3\u6790 alt \u53C2\u6570\n * @param url \u56FE\u7247 URL\n * @returns \u89E3\u6790\u51FA\u7684 alt \u503C\uFF0C\u5982\u679C\u6CA1\u6709\u5219\u8FD4\u56DE\u7A7A\u5B57\u7B26\u4E32\n */\nconst parseAltFromUrl = (url: string): string => {\n  try {\n    return new URL(url).searchParams.get('alt') || ''\n  } catch {\n    return ''\n  }\n}\n\n/**\n * \u79FB\u9664 URL \u4E2D\u7684 alt \u53C2\u6570\n * @param url \u56FE\u7247 URL\n * @returns \u79FB\u9664 alt \u53C2\u6570\u540E\u7684 URL\n */\nconst removeAltFromUrl = (url: string): string => {\n  try {\n    const urlObj = new URL(url)\n    urlObj.searchParams.delete('alt')\n    return urlObj.toString()\n  } catch {\n    return url\n  }\n}\n\n/**\n * Picture - \u56FE\u7247\n *\n * @description \u54CD\u5E94\u5F0F\u56FE\u7247\u7EC4\u4EF6\uFF0C\u652F\u6301\u591A\u79CD\u5206\u8FA8\u7387\u3001\u8D28\u91CF\u63A7\u5236\u548C\u81EA\u52A8alt\u6587\u672C\u89E3\u6790\u529F\u80FD\n */\nconst Picture = React.forwardRef<HTMLPictureElement, PictureProps>(\n  (\n    {\n      imgClassName = '',\n      source = '',\n      quality = 2,\n      deviceSizes = [375, 390, 767, 1023, 1024, 1279, 1440, 1439, 1539, 1919, 1920],\n      className,\n      loading = 'lazy',\n      alt = '',\n      ...rest\n    }: PictureProps,\n    ref\n  ) => {\n    const isShopifycdn = (src: string | string[]) => {\n      const domains = images?.domains || []\n      return domains.some(domain => src.includes(domain))\n    }\n\n    const imgSrcSetsize = useCallback(({ src, width }: { src: string; width: number }) => {\n      const size = width\n      const cleanSrc = removeAltFromUrl(src)\n      try {\n        const parsedUrl = new URL(cleanSrc)\n        if (!isMatchDomain(parsedUrl.hostname)) {\n          return cleanSrc\n        }\n        const fileName = parsedUrl.pathname.split('/').pop() || ''\n        if (idMatchFileExtensions(fileName)) {\n          return cleanSrc\n            ?.split('/')\n            ?.map(item => {\n              if (\n                isShopifycdn(cleanSrc) &&\n                /\\.(png|apng|jpg|jpeg|gif|svg|webp|tif)(\\?.*)?/.test(item) &&\n                /_[0-9]{2,4}x/.test(cleanSrc) === false\n              ) {\n                const name = item.split('.')\n                return name\n                  .map((v, i) => {\n                    if (i === name.length - 2) {\n                      return `${v}_${size < 3960 ? size : 3980}x`\n                    }\n                    return v\n                  })\n                  .join('.')\n              }\n              return item\n            })\n            .join('/')\n        }\n      } catch (error) {\n        return cleanSrc\n      }\n    }, [])\n\n    const sourceSrcSet = useCallback(\n      ({ srcArr, width }: { srcArr: string[][]; width: number }) => {\n        const computedWidth = width * quality\n        const defaultSrc = imgSrcSetsize({ src: srcArr[0][0], width: computedWidth })\n\n        const matchingSrc = srcArr\n          .filter(([, breakpoint]) => breakpoint && parseInt(breakpoint, 10) >= width)\n          .map(([src]) => imgSrcSetsize({ src, width: computedWidth }))\n          .pop()\n\n        return <source key={width} srcSet={matchingSrc || defaultSrc} media={`(max-width: ${width}px)`} />\n      },\n      [imgSrcSetsize, quality]\n    )\n\n    const sourceList = useMemo(() => {\n      if (typeof source !== 'string' || !source) return []\n\n      const srcArr = source\n        .replace(/[\\r\\n]/g, '')\n        .replace(/\\s\\s+/g, ' ')\n        .split(',')\n        .map(item => item.split(' ').filter(Boolean))\n\n      // \u4ECE URL \u4E2D\u89E3\u6790 alt \u53C2\u6570\uFF0C\u4F18\u5148\u4F7F\u7528\u7B2C\u4E00\u4E2A\u6709 alt \u53C2\u6570\u7684 URL\n      const parsedAlt =\n        alt ||\n        srcArr\n          .map(item => item[0])\n          .filter(Boolean)\n          .map(parseAltFromUrl)\n          .find(Boolean) ||\n        ''\n\n      const sources = deviceSizes.map(width => sourceSrcSet({ srcArr, width }))\n      const defaultImg = imgSrcSetsize({ src: srcArr[0][0], width: 1920 * quality })\n\n      return [\n        ...sources,\n        <img\n          key=\"default\"\n          src={defaultImg}\n          className={`w-full ${imgClassName}`}\n          loading={loading}\n          alt={parsedAlt}\n          {...rest}\n        />,\n      ]\n    }, [deviceSizes, imgClassName, imgSrcSetsize, quality, source, sourceSrcSet, alt, loading])\n\n    return (\n      <picture ref={ref} className={`block overflow-hidden ${className}`}>\n        {sourceList}\n        {rest.children}\n      </picture>\n    )\n  }\n)\nexport default Picture\n"],
+  "mappings": "aAgIe,cAAAA,EAyCT,QAAAC,MAzCS,oBA/Hf,OAAOC,GAAS,eAAAC,EAAa,WAAAC,MAAe,QAE5C,MAAMC,EAAkC,CAAC,kBAAmB,qBAAsB,kBAAkB,EAE9FC,EAAW,KACXC,EAAiB,KAajBC,EAAS,CACb,QAAS,CAAC,kBAAmB,qBAAsB,kBAAkB,EACrE,YAAa,CAAC,IAAK,IAAK,IAAK,KAAM,KAAM,KAAM,KAAM,IAAI,CAC3D,EAEMC,EAAiBC,GACdL,EAAgC,KAAKM,GAAUD,GAAaC,CAAM,EAErEC,EAAwB,CAACC,EAAmB,KAAO,yCAAyC,KAAKA,CAAQ,EAOzGC,EAAmBC,GAAwB,CAC/C,GAAI,CACF,OAAO,IAAI,IAAIA,CAAG,EAAE,aAAa,IAAI,KAAK,GAAK,EACjD,MAAQ,CACN,MAAO,EACT,CACF,EAOMC,EAAoBD,GAAwB,CAChD,GAAI,CACF,MAAME,EAAS,IAAI,IAAIF,CAAG,EAC1B,OAAAE,EAAO,aAAa,OAAO,KAAK,EACzBA,EAAO,SAAS,CACzB,MAAQ,CACN,OAAOF,CACT,CACF,EAOMG,EAAUhB,EAAM,WACpB,CACE,CACE,aAAAiB,EAAe,GACf,OAAAC,EAAS,GACT,QAAAC,EAAU,EACV,YAAAC,EAAc,CAAC,IAAK,IAAK,IAAK,KAAM,KAAM,KAAM,KAAM,KAAM,KAAM,KAAM,IAAI,EAC5E,UAAAC,EACA,QAAAC,EAAU,OACV,IAAAC,EAAM,GACN,GAAGC,CACL,EACAC,IACG,CACH,MAAMC,EAAgBC,IACJrB,GAAQ,SAAW,CAAC,GACrB,KAAKG,GAAUkB,EAAI,SAASlB,CAAM,CAAC,EAG9CmB,EAAgB3B,EAAY,CAAC,CAAE,IAAA0B,EAAK,MAAAE,CAAM,IAAsC,CACpF,MAAMC,EAAOD,EACPE,EAAWjB,EAAiBa,CAAG,EACrC,GAAI,CACF,MAAMK,EAAY,IAAI,IAAID,CAAQ,EAClC,GAAI,CAACxB,EAAcyB,EAAU,QAAQ,EACnC,OAAOD,EAET,MAAMpB,EAAWqB,EAAU,SAAS,MAAM,GAAG,EAAE,IAAI,GAAK,GACxD,GAAItB,EAAsBC,CAAQ,EAChC,OAAOoB,GACH,MAAM,GAAG,GACT,IAAIE,GAAQ,CACZ,GACEP,EAAaK,CAAQ,GACrB,gDAAgD,KAAKE,CAAI,GACzD,eAAe,KAAKF,CAAQ,IAAM,GAClC,CACA,MAAMG,EAAOD,EAAK,MAAM,GAAG,EAC3B,OAAOC,EACJ,IAAI,CAACC,EAAGC,IACHA,IAAMF,EAAK,OAAS,EACf,GAAGC,CAAC,IAAIL,EAAO,KAAOA,EAAO,IAAI,IAEnCK,CACR,EACA,KAAK,GAAG,CACb,CACA,OAAOF,CACT,CAAC,EACA,KAAK,GAAG,CAEf,MAAgB,CACd,OAAOF,CACT,CACF,EAAG,CAAC,CAAC,EAECM,EAAepC,EACnB,CAAC,CAAE,OAAAqC,EAAQ,MAAAT,CAAM,IAA6C,CAC5D,MAAMU,EAAgBV,EAAQV,EACxBqB,EAAaZ,EAAc,CAAE,IAAKU,EAAO,CAAC,EAAE,CAAC,EAAG,MAAOC,CAAc,CAAC,EAEtEE,EAAcH,EACjB,OAAO,CAAC,CAAC,CAAEI,CAAU,IAAMA,GAAc,SAASA,EAAY,EAAE,GAAKb,CAAK,EAC1E,IAAI,CAAC,CAACF,CAAG,IAAMC,EAAc,CAAE,IAAAD,EAAK,MAAOY,CAAc,CAAC,CAAC,EAC3D,IAAI,EAEP,OAAOzC,EAAC,UAAmB,OAAQ2C,GAAeD,EAAY,MAAO,eAAeX,CAAK,OAArEA,CAA4E,CAClG,EACA,CAACD,EAAeT,CAAO,CACzB,EAEMwB,EAAazC,EAAQ,IAAM,CAC/B,GAAI,OAAOgB,GAAW,UAAY,CAACA,EAAQ,MAAO,CAAC,EAEnD,MAAMoB,EAASpB,EACZ,QAAQ,UAAW,EAAE,EACrB,QAAQ,SAAU,GAAG,EACrB,MAAM,GAAG,EACT,IAAIe,GAAQA,EAAK,MAAM,GAAG,EAAE,OAAO,OAAO,CAAC,EAGxCW,EACJrB,GACAe,EACG,IAAIL,GAAQA,EAAK,CAAC,CAAC,EACnB,OAAO,OAAO,EACd,IAAIrB,CAAe,EACnB,KAAK,OAAO,GACf,GAEIiC,EAAUzB,EAAY,IAAIS,GAASQ,EAAa,CAAE,OAAAC,EAAQ,MAAAT,CAAM,CAAC,CAAC,EAClEiB,EAAalB,EAAc,CAAE,IAAKU,EAAO,CAAC,EAAE,CAAC,EAAG,MAAO,KAAOnB,CAAQ,CAAC,EAE7E,MAAO,CACL,GAAG0B,EACH/C,EAAC,OAEC,IAAKgD,EACL,UAAW,UAAU7B,CAAY,GACjC,QAASK,EACT,IAAKsB,EACJ,GAAGpB,GALA,SAMN,CACF,CACF,EAAG,CAACJ,EAAaH,EAAcW,EAAeT,EAASD,EAAQmB,EAAcd,EAAKD,CAAO,CAAC,EAE1F,OACEvB,EAAC,WAAQ,IAAK0B,EAAK,UAAW,yBAAyBJ,CAAS,GAC7D,UAAAsB,EACAnB,EAAK,UACR,CAEJ,CACF,EACA,IAAOuB,EAAQ/B",
+  "names": ["jsx", "jsxs", "React", "useCallback", "useMemo", "APPEND_FILE_SUFFIX_MATCH_DOMAIN", "MAX_SIZE", "FIXED_MAX_SIZE", "images", "isMatchDomain", "srcDomain", "domain", "idMatchFileExtensions", "fileName", "parseAltFromUrl", "url", "removeAltFromUrl", "urlObj", "Picture", "imgClassName", "source", "quality", "deviceSizes", "className", "loading", "alt", "rest", "ref", "isShopifycdn", "src", "imgSrcSetsize", "width", "size", "cleanSrc", "parsedUrl", "item", "name", "v", "i", "sourceSrcSet", "srcArr", "computedWidth", "defaultSrc", "matchingSrc", "breakpoint", "sourceList", "parsedAlt", "sources", "defaultImg", "picture_default"]
 }

package/dist/esm/components/tabs.d.ts

@@ -2,8 +2,8 @@ import * as React from 'react';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import type { Align, Shape } from '../types/props.js';
 declare const Tabs: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    align?: Align;
-    shape?: Shape;
+    align?: Align | undefined;
+    shape?: Shape | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/esm/components/tabs.js

@@ -1,2 +1,2 @@
-"use client";import{jsx as n}from"react/jsx-runtime";import*as o from"react";import{cn as m}from"../helpers/index.js";import*as s from"@radix-ui/react-tabs";import{cva as d}from"class-variance-authority";const c=o.createContext({align:"left",shape:"square"}),b=o.forwardRef(({children:t,align:e="left",shape:a="square",...i},r)=>n(s.Root,{ref:r,...i,children:n(c.Provider,{value:{align:e,shape:a},children:t})}));b.displayName="Tabs";const P=d("",{variants:{align:{left:"justify-left",center:"justify-center",right:"justify-end"},shape:{rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{align:"left",shape:"square"}}),C=d("",{variants:{shape:{rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{shape:"square"}}),g=o.forwardRef(({className:t,...e},a)=>{const{align:i,shape:r}=o.useContext(c);return n(s.List,{ref:a,className:m("bg-tabs-list-bg flex w-fit max-w-full overflow-x-auto p-1",P({align:i,shape:r}),t),style:{scrollbarWidth:"none",msOverflowStyle:"none"},...e})});g.displayName=s.List.displayName;const u=o.forwardRef(({className:t,onClick:e,...a},i)=>{const{shape:r}=o.useContext(c),T=p=>{e?.(p);const l=p?.currentTarget,f=p?.currentTarget?.parentElement;if(l&&f){const R=l.offsetLeft,y=l.offsetWidth,v=f.offsetWidth,x=R-v/2+y/2;f.scrollTo({left:x,behavior:"smooth"})}};return n(s.Trigger,{ref:i,className:m("text-info-primary lg-desktop:text-base disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-5 pb-2.5 pt-[11px] text-sm font-bold data-[state=active]:bg-white data-[state=active]:text-[#080A0F]",t,C({shape:r})),onClick:T,...a})});u.displayName=s.Trigger.displayName;const h=o.forwardRef(({className:t,...e},a)=>n(s.Content,{ref:a,className:m(t),...e}));h.displayName=s.Content.displayName;export{b as Tabs,h as TabsContent,g as TabsList,u as TabsTrigger};
+"use client";import{jsx as r}from"react/jsx-runtime";import*as s from"react";import{cn as m}from"../helpers/index.js";import*as o from"@radix-ui/react-tabs";import{cva as d}from"class-variance-authority";const c=s.createContext({align:"left",shape:"square"}),b=s.forwardRef(({children:t,align:e="left",shape:a="square",...n},i)=>r(o.Root,{ref:i,...n,children:r(c.Provider,{value:{align:e,shape:a},children:t})}));b.displayName="Tabs";const P=d("",{variants:{align:{left:"justify-left",center:"justify-center",right:"justify-end"},shape:{rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{align:"left",shape:"square"}}),C=d("",{variants:{shape:{rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{shape:"square"}}),g=s.forwardRef(({className:t,...e},a)=>{const{align:n,shape:i}=s.useContext(c);return r(o.List,{ref:a,className:m("bg-tabs-list-bg flex w-fit max-w-full overflow-x-auto p-1",P({align:n,shape:i}),t),style:{scrollbarWidth:"none",msOverflowStyle:"none"},...e})});g.displayName=o.List.displayName;const u=s.forwardRef(({className:t,onClick:e,...a},n)=>{const{shape:i}=s.useContext(c),T=p=>{e?.(p);const l=p?.currentTarget,f=p?.currentTarget?.parentElement;if(l&&f){const y=l.offsetLeft,R=l.offsetWidth,v=f.offsetWidth,x=y-v/2+R/2;f.scrollTo({left:x,behavior:"smooth"})}};return r(o.Trigger,{ref:n,className:m("text-info-primary lg-desktop:text-base disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-5 pb-2.5 pt-[11px] text-sm font-bold data-[state=active]:bg-white data-[state=active]:text-[#080A0F]",t,C({shape:i})),onClick:T,...a})});u.displayName=o.Trigger.displayName;const h=s.forwardRef(({className:t,...e},a)=>r(o.Content,{ref:a,className:m(t),...e}));h.displayName=o.Content.displayName;export{b as Tabs,h as TabsContent,g as TabsList,u as TabsTrigger};
 //# sourceMappingURL=tabs.js.map

package/dist/esm/components/tabs.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/tabs.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../helpers/index.js'\n\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport { cva } from 'class-variance-authority'\nimport type { Align, Shape } from '../types/props.js'\n\nconst TabListContext = React.createContext<{\n  align?: Align\n  shape: Shape\n}>({\n  align: 'left',\n  shape: 'square',\n})\n\nconst Tabs = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {\n    align?: Align\n    shape?: Shape\n  }\n>(({ children, align = 'left', shape = 'square', ...props }, ref) => (\n  <TabsPrimitive.Root ref={ref} {...props}>\n    <TabListContext.Provider value={{ align, shape }}>{children}</TabListContext.Provider>\n  </TabsPrimitive.Root>\n))\nTabs.displayName = 'Tabs'\n\nconst tabsListVariants = cva('', {\n  variants: {\n    align: {\n      left: 'justify-left',\n      center: 'justify-center',\n      right: 'justify-end',\n    },\n    shape: {\n      rounded: 'rounded-[28px]',\n      square: 'rounded-none',\n    },\n  },\n  defaultVariants: {\n    align: 'left',\n    shape: 'square',\n  },\n})\n\nconst tabsTriggerVariants = cva('', {\n  variants: {\n    shape: {\n      rounded: 'rounded-[28px]',\n      square: 'rounded-none',\n    },\n  },\n  defaultVariants: {\n    shape: 'square',\n  },\n})\nconst TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => {\n  const { align: alignFromParent, shape: shapeFromParent } = React.useContext(TabListContext)\n  return (\n    <TabsPrimitive.List\n      ref={ref}\n      className={cn(\n        'bg-tabs-list-bg flex w-fit max-w-full overflow-x-auto p-1',\n        tabsListVariants({\n          align: alignFromParent,\n          shape: shapeFromParent,\n        }),\n        className\n      )}\n      style={{\n        scrollbarWidth: 'none',\n        msOverflowStyle: 'none',\n      }}\n      {...props}\n    />\n  )\n})\nTabsList.displayName = TabsPrimitive.List.displayName\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, onClick, ...props }, ref) => {\n  const { shape: shapeFromParent } = React.useContext(TabListContext)\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    onClick?.(e)\n    const tabElement = e?.currentTarget\n    const container = e?.currentTarget?.parentElement\n    if (tabElement && container) {\n      const tabLeft = tabElement.offsetLeft\n      const tabWidth = tabElement.offsetWidth\n      const containerWidth = container.offsetWidth\n      const scrollTo = tabLeft - containerWidth / 2 + tabWidth / 2\n      container.scrollTo({\n        left: scrollTo,\n        behavior: 'smooth',\n      })\n    }\n    // e.currentTarget.scrollIntoView({\n    //   behavior: 'smooth',\n    //   inline: 'center',\n    //   block: 'nearest',\n    // })\n  }\n  return (\n    <TabsPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        'text-info-primary lg-desktop:text-base disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-5 pb-2.5 pt-[11px] text-sm font-bold data-[state=active]:bg-white data-[state=active]:text-[#080A0F]',\n        className,\n        tabsTriggerVariants({\n          shape: shapeFromParent,\n        })\n      )}\n      onClick={handleClick}\n      {...props}\n    />\n  )\n})\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\n\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => <TabsPrimitive.Content ref={ref} className={cn(className)} {...props} />)\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n"],
-  "mappings": "aAyBI,cAAAA,MAAA,oBAvBJ,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,sBAEnB,UAAYC,MAAmB,uBAC/B,OAAS,OAAAC,MAAW,2BAGpB,MAAMC,EAAiBJ,EAAM,cAG1B,CACD,MAAO,OACP,MAAO,QACT,CAAC,EAEKK,EAAOL,EAAM,WAMjB,CAAC,CAAE,SAAAM,EAAU,MAAAC,EAAQ,OAAQ,MAAAC,EAAQ,SAAU,GAAGC,CAAM,EAAGC,IAC3DX,EAACG,EAAc,KAAd,CAAmB,IAAKQ,EAAM,GAAGD,EAChC,SAAAV,EAACK,EAAe,SAAf,CAAwB,MAAO,CAAE,MAAAG,EAAO,MAAAC,CAAM,EAAI,SAAAF,EAAS,EAC9D,CACD,EACDD,EAAK,YAAc,OAEnB,MAAMM,EAAmBR,EAAI,GAAI,CAC/B,SAAU,CACR,MAAO,CACL,KAAM,eACN,OAAQ,iBACR,MAAO,aACT,EACA,MAAO,CACL,QAAS,iBACT,OAAQ,cACV,CACF,EACA,gBAAiB,CACf,MAAO,OACP,MAAO,QACT,CACF,CAAC,EAEKS,EAAsBT,EAAI,GAAI,CAClC,SAAU,CACR,MAAO,CACL,QAAS,iBACT,OAAQ,cACV,CACF,EACA,gBAAiB,CACf,MAAO,QACT,CACF,CAAC,EACKU,EAAWb,EAAM,WAGrB,CAAC,CAAE,UAAAc,EAAW,GAAGL,CAAM,EAAGC,IAAQ,CAClC,KAAM,CAAE,MAAOK,EAAiB,MAAOC,CAAgB,EAAIhB,EAAM,WAAWI,CAAc,EAC1F,OACEL,EAACG,EAAc,KAAd,CACC,IAAKQ,EACL,UAAWT,EACT,4DACAU,EAAiB,CACf,MAAOI,EACP,MAAOC,CACT,CAAC,EACDF,CACF,EACA,MAAO,CACL,eAAgB,OAChB,gBAAiB,MACnB,EACC,GAAGL,EACN,CAEJ,CAAC,EACDI,EAAS,YAAcX,EAAc,KAAK,YAE1C,MAAMe,EAAcjB,EAAM,WAGxB,CAAC,CAAE,UAAAc,EAAW,QAAAI,EAAS,GAAGT,CAAM,EAAGC,IAAQ,CAC3C,KAAM,CAAE,MAAOM,CAAgB,EAAIhB,EAAM,WAAWI,CAAc,EAC5De,EAAeC,GAA2C,CAC9DF,IAAUE,CAAC,EACX,MAAMC,EAAaD,GAAG,cAChBE,EAAYF,GAAG,eAAe,cACpC,GAAIC,GAAcC,EAAW,CAC3B,MAAMC,EAAUF,EAAW,WACrBG,EAAWH,EAAW,YACtBI,EAAiBH,EAAU,YAC3BI,EAAWH,EAAUE,EAAiB,EAAID,EAAW,EAC3DF,EAAU,SAAS,CACjB,KAAMI,EACN,SAAU,QACZ,CAAC,CACH,CAMF,EACA,OACE3B,EAACG,EAAc,QAAd,CACC,IAAKQ,EACL,UAAWT,EACT,8PACAa,EACAF,EAAoB,CAClB,MAAOI,CACT,CAAC,CACH,EACA,QAASG,EACR,GAAGV,EACN,CAEJ,CAAC,EACDQ,EAAY,YAAcf,EAAc,QAAQ,YAEhD,MAAMyB,EAAc3B,EAAM,WAGxB,CAAC,CAAE,UAAAc,EAAW,GAAGL,CAAM,EAAGC,IAAQX,EAACG,EAAc,QAAd,CAAsB,IAAKQ,EAAK,UAAWT,EAAGa,CAAS,EAAI,GAAGL,EAAO,CAAE,EAC5GkB,EAAY,YAAczB,EAAc,QAAQ",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../helpers/index.js'\n\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport { cva } from 'class-variance-authority'\nimport type { Align, Shape } from '../types/props.js'\n\nconst TabListContext = React.createContext<{\n  align?: Align\n  shape: Shape\n}>({\n  align: 'left',\n  shape: 'square',\n})\n\nconst Tabs = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {\n    align?: Align\n    shape?: Shape\n  }\n>(({ children, align = 'left', shape = 'square', ...props }, ref) => (\n  <TabsPrimitive.Root ref={ref} {...props}>\n    <TabListContext.Provider value={{ align, shape }}>{children}</TabListContext.Provider>\n  </TabsPrimitive.Root>\n))\nTabs.displayName = 'Tabs'\n\nconst tabsListVariants = cva('', {\n  variants: {\n    align: {\n      left: 'justify-left',\n      center: 'justify-center',\n      right: 'justify-end',\n    },\n    shape: {\n      rounded: 'rounded-[28px]',\n      square: 'rounded-none',\n    },\n  },\n  defaultVariants: {\n    align: 'left',\n    shape: 'square',\n  },\n})\n\nconst tabsTriggerVariants = cva('', {\n  variants: {\n    shape: {\n      rounded: 'rounded-[28px]',\n      square: 'rounded-none',\n    },\n  },\n  defaultVariants: {\n    shape: 'square',\n  },\n})\nconst TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => {\n  const { align: alignFromParent, shape: shapeFromParent } = React.useContext(TabListContext)\n  return (\n    <TabsPrimitive.List\n      ref={ref}\n      className={cn(\n        'bg-tabs-list-bg flex w-fit max-w-full overflow-x-auto p-1',\n        tabsListVariants({\n          align: alignFromParent,\n          shape: shapeFromParent,\n        }),\n        className\n      )}\n      style={{\n        scrollbarWidth: 'none',\n        msOverflowStyle: 'none',\n      }}\n      {...props}\n    />\n  )\n})\nTabsList.displayName = TabsPrimitive.List.displayName\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, onClick, ...props }, ref) => {\n  const { shape: shapeFromParent } = React.useContext(TabListContext)\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    onClick?.(e)\n    const tabElement = e?.currentTarget\n    const container = (e?.currentTarget as any)?.parentElement\n    if (tabElement && container) {\n      const tabLeft = (tabElement as any).offsetLeft\n      const tabWidth = (tabElement as any).offsetWidth\n      const containerWidth = container.offsetWidth\n      const scrollTo = tabLeft - containerWidth / 2 + tabWidth / 2\n      container.scrollTo({\n        left: scrollTo,\n        behavior: 'smooth',\n      })\n    }\n    // e.currentTarget.scrollIntoView({\n    //   behavior: 'smooth',\n    //   inline: 'center',\n    //   block: 'nearest',\n    // })\n  }\n  return (\n    <TabsPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        'text-info-primary lg-desktop:text-base disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-5 pb-2.5 pt-[11px] text-sm font-bold data-[state=active]:bg-white data-[state=active]:text-[#080A0F]',\n        className,\n        tabsTriggerVariants({\n          shape: shapeFromParent,\n        })\n      )}\n      onClick={handleClick}\n      {...props}\n    />\n  )\n})\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\n\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => <TabsPrimitive.Content ref={ref} className={cn(className)} {...props} />)\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n"],
+  "mappings": "aAyBI,cAAAA,MAAA,oBAvBJ,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,sBAEnB,UAAYC,MAAmB,uBAC/B,OAAS,OAAAC,MAAW,2BAGpB,MAAMC,EAAiBJ,EAAM,cAG1B,CACD,MAAO,OACP,MAAO,QACT,CAAC,EAEKK,EAAOL,EAAM,WAMjB,CAAC,CAAE,SAAAM,EAAU,MAAAC,EAAQ,OAAQ,MAAAC,EAAQ,SAAU,GAAGC,CAAM,EAAGC,IAC3DX,EAACG,EAAc,KAAd,CAAmB,IAAKQ,EAAM,GAAGD,EAChC,SAAAV,EAACK,EAAe,SAAf,CAAwB,MAAO,CAAE,MAAAG,EAAO,MAAAC,CAAM,EAAI,SAAAF,EAAS,EAC9D,CACD,EACDD,EAAK,YAAc,OAEnB,MAAMM,EAAmBR,EAAI,GAAI,CAC/B,SAAU,CACR,MAAO,CACL,KAAM,eACN,OAAQ,iBACR,MAAO,aACT,EACA,MAAO,CACL,QAAS,iBACT,OAAQ,cACV,CACF,EACA,gBAAiB,CACf,MAAO,OACP,MAAO,QACT,CACF,CAAC,EAEKS,EAAsBT,EAAI,GAAI,CAClC,SAAU,CACR,MAAO,CACL,QAAS,iBACT,OAAQ,cACV,CACF,EACA,gBAAiB,CACf,MAAO,QACT,CACF,CAAC,EACKU,EAAWb,EAAM,WAGrB,CAAC,CAAE,UAAAc,EAAW,GAAGL,CAAM,EAAGC,IAAQ,CAClC,KAAM,CAAE,MAAOK,EAAiB,MAAOC,CAAgB,EAAIhB,EAAM,WAAWI,CAAc,EAC1F,OACEL,EAACG,EAAc,KAAd,CACC,IAAKQ,EACL,UAAWT,EACT,4DACAU,EAAiB,CACf,MAAOI,EACP,MAAOC,CACT,CAAC,EACDF,CACF,EACA,MAAO,CACL,eAAgB,OAChB,gBAAiB,MACnB,EACC,GAAGL,EACN,CAEJ,CAAC,EACDI,EAAS,YAAcX,EAAc,KAAK,YAE1C,MAAMe,EAAcjB,EAAM,WAGxB,CAAC,CAAE,UAAAc,EAAW,QAAAI,EAAS,GAAGT,CAAM,EAAGC,IAAQ,CAC3C,KAAM,CAAE,MAAOM,CAAgB,EAAIhB,EAAM,WAAWI,CAAc,EAC5De,EAAeC,GAA2C,CAC9DF,IAAUE,CAAC,EACX,MAAMC,EAAaD,GAAG,cAChBE,EAAaF,GAAG,eAAuB,cAC7C,GAAIC,GAAcC,EAAW,CAC3B,MAAMC,EAAWF,EAAmB,WAC9BG,EAAYH,EAAmB,YAC/BI,EAAiBH,EAAU,YAC3BI,EAAWH,EAAUE,EAAiB,EAAID,EAAW,EAC3DF,EAAU,SAAS,CACjB,KAAMI,EACN,SAAU,QACZ,CAAC,CACH,CAMF,EACA,OACE3B,EAACG,EAAc,QAAd,CACC,IAAKQ,EACL,UAAWT,EACT,8PACAa,EACAF,EAAoB,CAClB,MAAOI,CACT,CAAC,CACH,EACA,QAASG,EACR,GAAGV,EACN,CAEJ,CAAC,EACDQ,EAAY,YAAcf,EAAc,QAAQ,YAEhD,MAAMyB,EAAc3B,EAAM,WAGxB,CAAC,CAAE,UAAAc,EAAW,GAAGL,CAAM,EAAGC,IAAQX,EAACG,EAAc,QAAd,CAAsB,IAAKQ,EAAK,UAAWT,EAAGa,CAAS,EAAI,GAAGL,EAAO,CAAE,EAC5GkB,EAAY,YAAczB,EAAc,QAAQ",
   "names": ["jsx", "React", "cn", "TabsPrimitive", "cva", "TabListContext", "Tabs", "children", "align", "shape", "props", "ref", "tabsListVariants", "tabsTriggerVariants", "TabsList", "className", "alignFromParent", "shapeFromParent", "TabsTrigger", "onClick", "handleClick", "e", "tabElement", "container", "tabLeft", "tabWidth", "containerWidth", "scrollTo", "TabsContent"]
 }

package/dist/esm/helpers/utils.d.ts

@@ -4,3 +4,4 @@ export declare function noop(): any;
 export declare function atobID(id: string): string | undefined;
 export declare const spaceToHyphen: (str: string) => string;
 export declare const highlightSearchWord: (text: string, searchText: string) => string;
+export declare const yotpoInstanceId: (locale?: string) => string;

package/dist/esm/helpers/utils.js

@@ -1,2 +1,2 @@
-import{clsx as o}from"clsx";import{extendTailwindMerge as i}from"tailwind-merge";const s=i({extend:{theme:{borderRadius:["btn"]},classGroups:{"font-size":["text-heading-1","text-heading-2","text-heading-3","text-heading-4","text-heading-5","text-text-3","text-text-2","text-text-1"],"text-color":["text-info-primary","text-info-secondary","text-info-tertiary","text-info-quaternary","text-info-white"],leading:["leading-tight","leading-normal","leading-loose"]}}});function g(...t){return s(o(t))}function p(){}function c(t){return t&&typeof t=="string"&&t.includes("/")?t.split("/").pop()?.split("?")?.shift():t}const x=t=>t?.replace(/\s+/g,"-"),d=(t,n)=>{try{const e=t?.search(new RegExp(n,"i"));if(n&&e!==-1){const r=t.slice(e,e+n.length);return t.replace(r,`<span class='text-brand-0 font-bold'>${r}</span>`)}else return t}catch(e){return console.log("e",e),t}};export{c as atobID,g as cn,d as highlightSearchWord,p as noop,x as spaceToHyphen};
+import{clsx as r}from"clsx";import{extendTailwindMerge as s}from"tailwind-merge";const i=s({extend:{theme:{borderRadius:["btn"]},classGroups:{"font-size":["text-heading-1","text-heading-2","text-heading-3","text-heading-4","text-heading-5","text-text-3","text-text-2","text-text-1"],"text-color":["text-info-primary","text-info-secondary","text-info-tertiary","text-info-quaternary","text-info-white"],leading:["leading-tight","leading-normal","leading-loose"]}}});function c(...t){return i(r(t))}function p(){}function g(t){return t&&typeof t=="string"&&t.includes("/")?t.split("/").pop()?.split("?")?.shift():t}const x=t=>t?.replace(/\s+/g,"-"),d=(t,n)=>{try{const e=t?.search(new RegExp(n,"i"));if(n&&e!==-1){const o=t.slice(e,e+n.length);return t.replace(o,`<span class='text-brand-0 font-bold'>${o}</span>`)}else return t}catch(e){return console.log("e",e),t}},u=(t="us")=>({us:"1126311",uk:"638361",ca:"638351"})[t]||"";export{g as atobID,c as cn,d as highlightSearchWord,p as noop,x as spaceToHyphen,u as yotpoInstanceId};
 //# sourceMappingURL=utils.js.map

package/dist/esm/helpers/utils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/utils.ts"],
-  "sourcesContent": ["import { clsx, type ClassValue } from 'clsx'\nimport { extendTailwindMerge } from 'tailwind-merge'\n\nconst twMerge = extendTailwindMerge({\n  extend: {\n    theme: {\n      borderRadius: ['btn'],\n    },\n    classGroups: {\n      'font-size': [\n        'text-heading-1',\n        'text-heading-2',\n        'text-heading-3',\n        'text-heading-4',\n        'text-heading-5',\n        'text-text-3',\n        'text-text-2',\n        'text-text-1',\n      ],\n      'text-color': [\n        'text-info-primary',\n        'text-info-secondary',\n        'text-info-tertiary',\n        'text-info-quaternary',\n        'text-info-white',\n      ],\n      leading: ['leading-tight', 'leading-normal', 'leading-loose'],\n    },\n  },\n})\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n\nexport function noop(): any {}\n\nexport function atobID(id: string) {\n  if (id && typeof id === 'string' && id.includes('/')) {\n    return id.split('/').pop()?.split('?')?.shift()\n  } else {\n    return id\n  }\n}\nexport const spaceToHyphen = (str: string) => str?.replace(/\\s+/g, '-')\n\nexport const highlightSearchWord = (text: string, searchText: string) => {\n  try {\n    const wordIndex = text?.search(new RegExp(searchText, 'i'))\n    if (searchText && wordIndex !== -1) {\n      const word = text.slice(wordIndex, wordIndex + searchText.length)\n      return text.replace(word, `<span class='text-brand-0 font-bold'>${word}</span>`)\n    } else {\n      return text\n    }\n  } catch (e) {\n    console.log('e', e)\n    return text\n  }\n}\n"],
-  "mappings": "AAAA,OAAS,QAAAA,MAA6B,OACtC,OAAS,uBAAAC,MAA2B,iBAEpC,MAAMC,EAAUD,EAAoB,CAClC,OAAQ,CACN,MAAO,CACL,aAAc,CAAC,KAAK,CACtB,EACA,YAAa,CACX,YAAa,CACX,iBACA,iBACA,iBACA,iBACA,iBACA,cACA,cACA,aACF,EACA,aAAc,CACZ,oBACA,sBACA,qBACA,uBACA,iBACF,EACA,QAAS,CAAC,gBAAiB,iBAAkB,eAAe,CAC9D,CACF,CACF,CAAC,EAEM,SAASE,KAAMC,EAAsB,CAC1C,OAAOF,EAAQF,EAAKI,CAAM,CAAC,CAC7B,CAEO,SAASC,GAAY,CAAC,CAEtB,SAASC,EAAOC,EAAY,CACjC,OAAIA,GAAM,OAAOA,GAAO,UAAYA,EAAG,SAAS,GAAG,EAC1CA,EAAG,MAAM,GAAG,EAAE,IAAI,GAAG,MAAM,GAAG,GAAG,MAAM,EAEvCA,CAEX,CACO,MAAMC,EAAiBC,GAAgBA,GAAK,QAAQ,OAAQ,GAAG,EAEzDC,EAAsB,CAACC,EAAcC,IAAuB,CACvE,GAAI,CACF,MAAMC,EAAYF,GAAM,OAAO,IAAI,OAAOC,EAAY,GAAG,CAAC,EAC1D,GAAIA,GAAcC,IAAc,GAAI,CAClC,MAAMC,EAAOH,EAAK,MAAME,EAAWA,EAAYD,EAAW,MAAM,EAChE,OAAOD,EAAK,QAAQG,EAAM,wCAAwCA,CAAI,SAAS,CACjF,KACE,QAAOH,CAEX,OAAS,EAAG,CACV,eAAQ,IAAI,IAAK,CAAC,EACXA,CACT,CACF",
-  "names": ["clsx", "extendTailwindMerge", "twMerge", "cn", "inputs", "noop", "atobID", "id", "spaceToHyphen", "str", "highlightSearchWord", "text", "searchText", "wordIndex", "word"]
+  "sourcesContent": ["import { clsx, type ClassValue } from 'clsx'\nimport { extendTailwindMerge } from 'tailwind-merge'\n\nconst twMerge = extendTailwindMerge({\n  extend: {\n    theme: {\n      borderRadius: ['btn'],\n    },\n    classGroups: {\n      'font-size': [\n        'text-heading-1',\n        'text-heading-2',\n        'text-heading-3',\n        'text-heading-4',\n        'text-heading-5',\n        'text-text-3',\n        'text-text-2',\n        'text-text-1',\n      ],\n      'text-color': [\n        'text-info-primary',\n        'text-info-secondary',\n        'text-info-tertiary',\n        'text-info-quaternary',\n        'text-info-white',\n      ],\n      leading: ['leading-tight', 'leading-normal', 'leading-loose'],\n    },\n  },\n})\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n\nexport function noop(): any {}\n\nexport function atobID(id: string) {\n  if (id && typeof id === 'string' && id.includes('/')) {\n    return id.split('/').pop()?.split('?')?.shift()\n  } else {\n    return id\n  }\n}\n\nexport const spaceToHyphen = (str: string) => str?.replace(/\\s+/g, '-')\n\nexport const highlightSearchWord = (text: string, searchText: string) => {\n  try {\n    const wordIndex = text?.search(new RegExp(searchText, 'i'))\n    if (searchText && wordIndex !== -1) {\n      const word = text.slice(wordIndex, wordIndex + searchText.length)\n      return text.replace(word, `<span class='text-brand-0 font-bold'>${word}</span>`)\n    } else {\n      return text\n    }\n  } catch (e) {\n    console.log('e', e)\n    return text\n  }\n}\n\nexport const yotpoInstanceId = (locale = 'us') =>\n  ({\n    us: '1126311',\n    uk: '638361',\n    ca: '638351',\n  })[locale] || ''\n"],
+  "mappings": "AAAA,OAAS,QAAAA,MAA6B,OACtC,OAAS,uBAAAC,MAA2B,iBAEpC,MAAMC,EAAUD,EAAoB,CAClC,OAAQ,CACN,MAAO,CACL,aAAc,CAAC,KAAK,CACtB,EACA,YAAa,CACX,YAAa,CACX,iBACA,iBACA,iBACA,iBACA,iBACA,cACA,cACA,aACF,EACA,aAAc,CACZ,oBACA,sBACA,qBACA,uBACA,iBACF,EACA,QAAS,CAAC,gBAAiB,iBAAkB,eAAe,CAC9D,CACF,CACF,CAAC,EAEM,SAASE,KAAMC,EAAsB,CAC1C,OAAOF,EAAQF,EAAKI,CAAM,CAAC,CAC7B,CAEO,SAASC,GAAY,CAAC,CAEtB,SAASC,EAAOC,EAAY,CACjC,OAAIA,GAAM,OAAOA,GAAO,UAAYA,EAAG,SAAS,GAAG,EAC1CA,EAAG,MAAM,GAAG,EAAE,IAAI,GAAG,MAAM,GAAG,GAAG,MAAM,EAEvCA,CAEX,CAEO,MAAMC,EAAiBC,GAAgBA,GAAK,QAAQ,OAAQ,GAAG,EAEzDC,EAAsB,CAACC,EAAcC,IAAuB,CACvE,GAAI,CACF,MAAMC,EAAYF,GAAM,OAAO,IAAI,OAAOC,EAAY,GAAG,CAAC,EAC1D,GAAIA,GAAcC,IAAc,GAAI,CAClC,MAAMC,EAAOH,EAAK,MAAME,EAAWA,EAAYD,EAAW,MAAM,EAChE,OAAOD,EAAK,QAAQG,EAAM,wCAAwCA,CAAI,SAAS,CACjF,KACE,QAAOH,CAEX,OAAS,EAAG,CACV,eAAQ,IAAI,IAAK,CAAC,EACXA,CACT,CACF,EAEaI,EAAkB,CAACC,EAAS,QACtC,CACC,GAAI,UACJ,GAAI,SACJ,GAAI,QACN,GAAGA,CAAM,GAAK",
+  "names": ["clsx", "extendTailwindMerge", "twMerge", "cn", "inputs", "noop", "atobID", "id", "spaceToHyphen", "str", "highlightSearchWord", "text", "searchText", "wordIndex", "word", "yotpoInstanceId", "locale"]
 }

package/dist/esm/hooks/useRollout.d.ts

@@ -1,2 +1,2 @@
-import { type MutableRefObject } from 'react';
-export declare function useRollout<T extends HTMLElement = HTMLElement>(options: any): [MutableRefObject<T | null>, boolean];
+/// <reference types="react" />
+export declare function useRollout<T extends Element>(options: any): (boolean | import("react").RefObject<T>)[];

package/dist/esm/hooks/useRollout.js

@@ -1,2 +1,2 @@
-import{useEffect as c,useRef as f,useState as i}from"react";function b(n){const r=f(null),[e,o]=i(!1);return c(()=>{if(e)return;const s=r.current;if(!s||typeof IntersectionObserver>"u")return;const t=new IntersectionObserver(([u])=>{u.isIntersecting&&(o(!0),t.disconnect())},n);return t.observe(s),()=>t.disconnect()},[e,n]),[r,e]}export{b as useRollout};
+import{useState as i,useEffect as u,useRef as f}from"react";function d(t){const r=f(null),[e,o]=i(!1);return u(()=>{if(e)return;const s=r.current;if(!s||typeof IntersectionObserver>"u")return;const n=new IntersectionObserver(([c])=>{c.isIntersecting&&(o(!0),n.disconnect())},t);return n.observe(s),()=>n.disconnect()},[e,t]),[r,e]}export{d as useRollout};
 //# sourceMappingURL=useRollout.js.map

package/dist/esm/hooks/useRollout.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useRollout.ts"],
-  "sourcesContent": ["import { useEffect, useRef, useState, type MutableRefObject } from 'react'\n\nexport function useRollout<T extends HTMLElement = HTMLElement>(options: any): [MutableRefObject<T | null>, boolean] {\n  const ref = useRef<T>(null)\n  const [inView, setInView] = useState(false)\n  useEffect(() => {\n    if (inView) return // \u5DF2\u8FDB\u5165\u8FC7\uFF0C\u5219\u4E0D\u518D\u89C2\u5BDF\n    const el = ref.current\n    if (!el || typeof IntersectionObserver === 'undefined') return\n    const observer = new IntersectionObserver(([entry]) => {\n      if (entry.isIntersecting) {\n        setInView(true)\n        observer.disconnect() // \u505C\u6B62\u89C2\u5BDF\n      }\n    }, options)\n    observer.observe(el)\n    return () => observer.disconnect()\n  }, [inView, options])\n  return [ref, inView]\n}\n"],
-  "mappings": "AAAA,OAAS,aAAAA,EAAW,UAAAC,EAAQ,YAAAC,MAAuC,QAE5D,SAASC,EAAgDC,EAAqD,CACnH,MAAMC,EAAMJ,EAAU,IAAI,EACpB,CAACK,EAAQC,CAAS,EAAIL,EAAS,EAAK,EAC1C,OAAAF,EAAU,IAAM,CACd,GAAIM,EAAQ,OACZ,MAAME,EAAKH,EAAI,QACf,GAAI,CAACG,GAAM,OAAO,qBAAyB,IAAa,OACxD,MAAMC,EAAW,IAAI,qBAAqB,CAAC,CAACC,CAAK,IAAM,CACjDA,EAAM,iBACRH,EAAU,EAAI,EACdE,EAAS,WAAW,EAExB,EAAGL,CAAO,EACV,OAAAK,EAAS,QAAQD,CAAE,EACZ,IAAMC,EAAS,WAAW,CACnC,EAAG,CAACH,EAAQF,CAAO,CAAC,EACb,CAACC,EAAKC,CAAM,CACrB",
-  "names": ["useEffect", "useRef", "useState", "useRollout", "options", "ref", "inView", "setInView", "el", "observer", "entry"]
+  "sourcesContent": ["import { useState, useEffect, useRef } from 'react'\n\nexport function useRollout<T extends Element>(options: any) {\n  const ref = useRef<T>(null)\n  const [inView, setInView] = useState(false)\n  useEffect(() => {\n    if (inView) return // \u5DF2\u8FDB\u5165\u8FC7\uFF0C\u5219\u4E0D\u518D\u89C2\u5BDF\n    const el = ref.current\n    if (!el || typeof IntersectionObserver === 'undefined') return\n    const observer = new IntersectionObserver(([entry]) => {\n      if (entry.isIntersecting) {\n        setInView(true)\n        observer.disconnect() // \u505C\u6B62\u89C2\u5BDF\n      }\n    }, options)\n\n    observer.observe(el)\n    return () => observer.disconnect()\n  }, [inView, options])\n\n  return [ref, inView]\n}\n"],
+  "mappings": "AAAA,OAAS,YAAAA,EAAU,aAAAC,EAAW,UAAAC,MAAc,QAErC,SAASC,EAA8BC,EAAc,CAC1D,MAAMC,EAAMH,EAAU,IAAI,EACpB,CAACI,EAAQC,CAAS,EAAIP,EAAS,EAAK,EAC1C,OAAAC,EAAU,IAAM,CACd,GAAIK,EAAQ,OACZ,MAAME,EAAKH,EAAI,QACf,GAAI,CAACG,GAAM,OAAO,qBAAyB,IAAa,OACxD,MAAMC,EAAW,IAAI,qBAAqB,CAAC,CAACC,CAAK,IAAM,CACjDA,EAAM,iBACRH,EAAU,EAAI,EACdE,EAAS,WAAW,EAExB,EAAGL,CAAO,EAEV,OAAAK,EAAS,QAAQD,CAAE,EACZ,IAAMC,EAAS,WAAW,CACnC,EAAG,CAACH,EAAQF,CAAO,CAAC,EAEb,CAACC,EAAKC,CAAM,CACrB",
+  "names": ["useState", "useEffect", "useRef", "useRollout", "options", "ref", "inView", "setInView", "el", "observer", "entry"]
 }

package/dist/esm/shared/ErrorBoundary.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+interface ErrorBoundaryProps {
+    children: ReactNode;
+    fallback?: ReactNode;
+}
+interface ErrorBoundaryState {
+    hasError: boolean;
+    error: Error | null;
+    errorInfo: React.ErrorInfo | null;
+}
+declare class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    render(): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<React.AwaitedReactNode> | null | undefined;
+}
+export default ErrorBoundary;

package/dist/esm/shared/ErrorBoundary.js

@@ -0,0 +1,2 @@
+import"react/jsx-runtime";import o from"react";class t extends o.Component{constructor(r){super(r),this.state={hasError:!1,error:null,errorInfo:null}}static getDerivedStateFromError(r){return{hasError:!0,error:r,errorInfo:null}}componentDidCatch(r,e){console.error("@anker-in/headless-ui biz component ErrorBoundary caught an error:",r,e),this.setState({errorInfo:e})}render(){return this.state.hasError?this.props.fallback?this.props.fallback:null:this.props.children}}var s=t;export{s as default};
+//# sourceMappingURL=ErrorBoundary.js.map

package/dist/esm/shared/ErrorBoundary.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/shared/ErrorBoundary.tsx"],
+  "sourcesContent": ["import React from 'react'\nimport type { ReactNode } from 'react'\n\ninterface ErrorBoundaryProps {\n  children: ReactNode\n  fallback?: ReactNode // \u53EF\u81EA\u5B9A\u4E49\u9519\u8BEFUI\n}\n\ninterface ErrorBoundaryState {\n  hasError: boolean\n  error: Error | null\n  errorInfo: React.ErrorInfo | null\n}\n\nclass ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {\n  constructor(props: ErrorBoundaryProps) {\n    super(props)\n    this.state = { hasError: false, error: null, errorInfo: null }\n  }\n\n  static getDerivedStateFromError(error: Error): ErrorBoundaryState {\n    return { hasError: true, error, errorInfo: null }\n  }\n\n  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {\n    console.error('@anker-in/headless-ui biz component ErrorBoundary caught an error:', error, errorInfo)\n    this.setState({ errorInfo })\n    // \u53EF\u4EE5\u5728\u8FD9\u91CC\u4E0A\u62A5\u9519\u8BEF\u65E5\u5FD7\n  }\n\n  render() {\n    if (this.state.hasError) {\n      // \u4F7F\u7528\u81EA\u5B9A\u4E49 fallback UI \u6216\u9ED8\u8BA4 UI\n      if (this.props.fallback) return this.props.fallback\n      // \u53EA\u5728\u5F00\u53D1\u6A21\u5F0F\u663E\u793A\u9519\u8BEF\n      return process.env.NODE_ENV === 'development' ? (\n        <div style={{ padding: 20, textAlign: 'center' }}>\n          <h1>something went wrong \uD83D\uDE22</h1>\n          <p>{this.state.error?.message}</p>\n          <details style={{ whiteSpace: 'pre-wrap' }}>{this.state.errorInfo?.componentStack}</details>\n        </div>\n      ) : null\n    }\n\n    return this.props.children\n  }\n}\n\nexport default ErrorBoundary\n"],
+  "mappings": "AAoCQ,0BApCR,OAAOA,MAAW,QAclB,MAAMC,UAAsBD,EAAM,SAAkD,CAClF,YAAYE,EAA2B,CACrC,MAAMA,CAAK,EACX,KAAK,MAAQ,CAAE,SAAU,GAAO,MAAO,KAAM,UAAW,IAAK,CAC/D,CAEA,OAAO,yBAAyBC,EAAkC,CAChE,MAAO,CAAE,SAAU,GAAM,MAAAA,EAAO,UAAW,IAAK,CAClD,CAEA,kBAAkBA,EAAcC,EAA4B,CAC1D,QAAQ,MAAM,qEAAsED,EAAOC,CAAS,EACpG,KAAK,SAAS,CAAE,UAAAA,CAAU,CAAC,CAE7B,CAEA,QAAS,CACP,OAAI,KAAK,MAAM,SAET,KAAK,MAAM,SAAiB,KAAK,MAAM,SAQvC,KAGC,KAAK,MAAM,QACpB,CACF,CAEA,IAAOC,EAAQJ",
+  "names": ["React", "ErrorBoundary", "props", "error", "errorInfo", "ErrorBoundary_default"]
+}

package/dist/esm/shared/Styles.d.ts

@@ -8,8 +8,8 @@ export interface ContainerProps {
     };
 }
 export interface StylesProps {
-    /** 自定义样式字符串 */
-    style?: string;
+    /** 自定义样式字符串或对象 */
+    style?: string | React.CSSProperties;
     /** 唯一标识符 */
     uid?: string;
     /** 是否禁用 */
@@ -34,6 +34,6 @@ export declare const useStyles: (styleProps: Partial<StylesProps>, data?: Record
  * @param defaultLayoutProps - 默认样式属性
  */
 export declare function withLayout<P extends object>(WrappedComponent: React.ComponentType<P>, defaultLayoutProps?: Partial<StylesProps & ContainerProps>): React.ForwardRefExoticComponent<React.PropsWithoutRef<Omit<P, keyof StylesProps> & Partial<StylesProps & ContainerProps> & {
-    className?: string;
-    data?: Record<string, any>;
+    className?: string | undefined;
+    data?: Record<string, any> | undefined;
 }> & React.RefAttributes<any>>;

package/dist/esm/shared/Styles.js

@@ -1,2 +1,2 @@
-import{Fragment as w,jsx as a,jsxs as h}from"react/jsx-runtime";import P,{useMemo as l}from"react";import{simpleHash as S}from"./simpleHash.js";import g from"./getKeyPropsString.js";import{Grid as f,GridItem as C}from"../components/grid.js";import{Container as $}from"../components/container.js";const c={12:"col-start-1 col-end-13",10:"col-start-2 col-end-12",8:"col-start-3 col-end-11",6:"col-start-4 col-end-10",4:"col-start-5 col-end-9"},y=t=>{const n=g(t);return`style_${S(n)}`},b=t=>{const{style:n,uid:e,disabled:s}=t;return{style:n,uid:e,disabled:s}},N=({style:t,uid:n=y({}),disabled:e=!1})=>!t||e?null:a("style",{suppressHydrationWarning:!0,"data-style-id":n,children:`.block-${n} { ${t} }`}),R=(t,n)=>{const e=l(()=>t?.uid||y({...t,data:n}),[n,t]),s=l(()=>a(N,{...t,uid:e}),[t,e]);return{className:`block-${e} `,StyleComponent:s,uid:e}},k=t=>{const{desktopSpan:n,mobileSpan:e}=t?.container||{};return`${e?`${c[e]}`:""} ${n?`${c[n].split(" ").map(s=>`tablet:${s}`).join(" ")}`:""}`};function K(t,n){const e=P.forwardRef((s,o)=>{const m={...n,...b(s)},{className:i,StyleComponent:d}=R(m,s?.data),u=r=>a($,{className:`${i} ${r?.className}`,children:a(f,{className:"container_grid",children:a(C,{className:k(r),children:a(t,{...r,ref:o})})})}),p=r=>a(t,{...r,className:`${i} ${r?.className}`,ref:o});return h(w,{children:[d,Reflect.ownKeys(s?.container||{})?.length>0?u(s):p(s)]})});return e.displayName=t.displayName||t.name||"Component",e}export{b as getStylesProps,R as useStyles,K as withLayout};
+import{Fragment as I,jsx as o,jsxs as B}from"react/jsx-runtime";import f,{useMemo as d}from"react";import{simpleHash as C}from"./simpleHash.js";import $ from"./getKeyPropsString.js";import{Grid as R,GridItem as N}from"../components/grid.js";import{Container as k}from"../components/container.js";import w from"./ErrorBoundary.js";const h={12:"col-start-1 col-end-13",10:"col-start-2 col-end-12",8:"col-start-3 col-end-11",6:"col-start-4 col-end-10",4:"col-start-5 col-end-9"},x={12:"tablet:col-start-1 tablet:col-end-13",10:"tablet:col-start-2 tablet:col-end-12",8:"tablet:col-start-3 tablet:col-end-11",6:"tablet:col-start-4 tablet:col-end-10",4:"tablet:col-start-5 tablet:col-end-9"},m=t=>{const n=$(t);return`style_${C(n)}`},T=t=>{const{style:n,uid:s,disabled:r}=t;return{style:n,uid:s,disabled:r}},G=({style:t,uid:n=m({}),disabled:s=!1})=>!t||s?null:o("style",{suppressHydrationWarning:!0,"data-style-id":n,children:`.block-${n} { ${t} }`}),K=(t,n)=>{const s=d(()=>t?.uid||m({...t,data:n}),[n,t]),r=d(()=>o(G,{...t,uid:s}),[t,s]);return{className:`block-${s} `,StyleComponent:r,uid:s}},j=t=>{const{desktopSpan:n,mobileSpan:s}=t?.container||{},r=s?h[s]:"",a=n?x[n]:"";return`${r} ${a}`.trim()};function D(t,n){const s=f.forwardRef((r,a)=>{const l=T(r),y=e=>e?typeof e=="string"?e:Object.entries(e).map(([g,P])=>`${g.replace(/([A-Z])/g,"-$1").toLowerCase()}: ${P}`).join("; ")+";":"",c=[n?.style,l?.style].map(y).filter(e=>!!e).map(e=>e.trim().endsWith(";")?e:`${e};`).join(" "),u={...n,...l,...c&&{style:c}},{className:i,StyleComponent:p}=K(u,r?.data),S=e=>o(k,{className:`${i} ${e?.className}`,children:o(R,{className:"container_grid",children:o(N,{className:j(e),children:o(t,{...e,ref:a})})})}),b=e=>o(t,{...e,className:`${i} ${e?.className}`,ref:a});return o(I,{children:B(w,{children:[p,Reflect.ownKeys(r?.container||{})?.length>0?S(r):b(r)]})})});return s.displayName=t.displayName||t.name||"Component",s}export{T as getStylesProps,K as useStyles,D as withLayout};
 //# sourceMappingURL=Styles.js.map

package/dist/esm/shared/Styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/shared/Styles.tsx"],
-  "sourcesContent": ["import React, { useMemo } from 'react'\nimport { simpleHash } from './simpleHash.js'\nimport getKeyPropsString from './getKeyPropsString.js'\nimport { Grid, GridItem } from '../components/grid.js'\nimport { Container } from '../components/container.js'\n\nconst colContentClasses: Record<number, string> = {\n  12: 'col-start-1 col-end-13',\n  10: 'col-start-2 col-end-12',\n  8: 'col-start-3 col-end-11',\n  6: 'col-start-4 col-end-10',\n  4: 'col-start-5 col-end-9',\n} as const\n\nexport interface ContainerProps {\n  container?: {\n    /** \u684C\u9762\u7AEF\u5217\u5185\u5BB9\u5BBD\u5EA6 */\n    desktopSpan: number\n    /** \u79FB\u52A8\u7AEF\u5217\u5185\u5BB9\u5BBD\u5EA6 */\n    mobileSpan: number\n  }\n}\n\nexport interface StylesProps {\n  /** \u81EA\u5B9A\u4E49\u6837\u5F0F\u5B57\u7B26\u4E32 */\n  style?: string\n  /** \u552F\u4E00\u6807\u8BC6\u7B26 */\n  uid?: string\n  /** \u662F\u5426\u7981\u7528 */\n  disabled?: boolean\n}\n\n/**\n * \u6839\u636E props \u751F\u6210\u786E\u5B9A\u6027 uid\n */\nconst generateUID = (props: Record<string, any>) => {\n  const keyString = getKeyPropsString(props)\n  return `style_${simpleHash(keyString)}`\n}\n\n/**\n * \u4ECE\u7EC4\u4EF6 props \u4E2D\u63D0\u53D6\u6837\u5F0F\u76F8\u5173\u5C5E\u6027\n */\nexport const getStylesProps = <T extends Record<string, unknown>>(props: T & StylesProps): StylesProps => {\n  const { style, uid, disabled } = props\n  return { style, uid, disabled }\n}\n\n/**\n * \u6837\u5F0F\u6CE8\u5165\u7EC4\u4EF6\n */\nconst Styles: React.FC<StylesProps> = ({ style, uid = generateUID({}), disabled = false }) => {\n  if (!style || disabled) {\n    return null\n  }\n\n  return <style suppressHydrationWarning data-style-id={uid}>{`.block-${uid} { ${style} }`}</style>\n}\n\n/**\n * \u6837\u5F0F Hook\uFF0C\u8FD4\u56DE\u6837\u5F0F\u7C7B\u540D\u548C\u6837\u5F0F\u7EC4\u4EF6\n * @param styleProps - \u6837\u5F0F\u5C5E\u6027\n */\nexport const useStyles = (styleProps: Partial<StylesProps>, data?: Record<string, any>) => {\n  const uid = useMemo(() => styleProps?.uid || generateUID({ ...styleProps, data }), [data, styleProps])\n\n  const StyleComponent = useMemo(() => <Styles {...styleProps} uid={uid} />, [styleProps, uid])\n\n  return {\n    className: `block-${uid} `,\n    StyleComponent,\n    uid,\n  } as const\n}\n\nconst getContainerClassName = (props?: Partial<StylesProps & ContainerProps>) => {\n  const { desktopSpan, mobileSpan } = props?.container || {}\n  return `${mobileSpan ? `${colContentClasses[mobileSpan]}` : ''} ${\n    desktopSpan\n      ? `${colContentClasses[desktopSpan]\n          .split(' ')\n          .map(item => `tablet:${item}`)\n          .join(' ')}`\n      : ''\n  }`\n}\n\n/**\n * \u9AD8\u9636\u7EC4\u4EF6\uFF0C \u7528\u4E8E\u7ED9\u7EC4\u4EF6\u7528style \u6807\u7B7E\u7684\u5F62\u5F0F\u8FFD\u52A0\u6837\u5F0F\n * @param WrappedComponent - \u9700\u8981\u5305\u88C5\u7684\u7EC4\u4EF6\n * @param defaultLayoutProps - \u9ED8\u8BA4\u6837\u5F0F\u5C5E\u6027\n */\nexport function withLayout<P extends object>(\n  WrappedComponent: React.ComponentType<P>,\n  defaultLayoutProps?: Partial<StylesProps & ContainerProps>\n) {\n  const withLayout = React.forwardRef<\n    any,\n    Omit<P, keyof StylesProps> &\n      Partial<StylesProps & ContainerProps> & { className?: string; data?: Record<string, any> }\n  >((props, ref) => {\n    const finalStyleProps = {\n      ...defaultLayoutProps,\n      ...getStylesProps(props),\n    }\n\n    const { className, StyleComponent } = useStyles(finalStyleProps, (props as any)?.data)\n\n    const WithContainerWrapper = (props: any) => {\n      return (\n        <Container className={`${className} ${(props as any)?.className}`}>\n          <Grid className=\"container_grid\">\n            <GridItem className={getContainerClassName(props)}>\n              <WrappedComponent {...(props as unknown as P)} ref={ref} />\n            </GridItem>\n          </Grid>\n        </Container>\n      )\n    }\n\n    const WithoutContainerWrapper = (props: any) => {\n      return (\n        <WrappedComponent\n          {...(props as unknown as P)}\n          className={`${className} ${(props as any)?.className}`}\n          ref={ref}\n        />\n      )\n    }\n\n    return (\n      <>\n        {StyleComponent}\n        {Reflect.ownKeys((props as any)?.container || {})?.length > 0\n          ? WithContainerWrapper(props)\n          : WithoutContainerWrapper(props)}\n      </>\n    )\n  })\n\n  // \u76F4\u63A5\u4F7F\u7528\u539F\u59CB\u7EC4\u4EF6\u7684\u540D\u79F0\n  withLayout.displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component'\n  return withLayout\n}\n"],
-  "mappings": "AAwDS,OA2EH,YAAAA,EA3EG,OAAAC,EA2EH,QAAAC,MA3EG,oBAxDT,OAAOC,GAAS,WAAAC,MAAe,QAC/B,OAAS,cAAAC,MAAkB,kBAC3B,OAAOC,MAAuB,yBAC9B,OAAS,QAAAC,EAAM,YAAAC,MAAgB,wBAC/B,OAAS,aAAAC,MAAiB,6BAE1B,MAAMC,EAA4C,CAChD,GAAI,yBACJ,GAAI,yBACJ,EAAG,yBACH,EAAG,yBACH,EAAG,uBACL,EAuBMC,EAAeC,GAA+B,CAClD,MAAMC,EAAYP,EAAkBM,CAAK,EACzC,MAAO,SAASP,EAAWQ,CAAS,CAAC,EACvC,EAKaC,EAAqDF,GAAwC,CACxG,KAAM,CAAE,MAAAG,EAAO,IAAAC,EAAK,SAAAC,CAAS,EAAIL,EACjC,MAAO,CAAE,MAAAG,EAAO,IAAAC,EAAK,SAAAC,CAAS,CAChC,EAKMC,EAAgC,CAAC,CAAE,MAAAH,EAAO,IAAAC,EAAML,EAAY,CAAC,CAAC,EAAG,SAAAM,EAAW,EAAM,IAClF,CAACF,GAASE,EACL,KAGFhB,EAAC,SAAM,yBAAwB,GAAC,gBAAee,EAAM,mBAAUA,CAAG,MAAMD,CAAK,KAAK,EAO9EI,EAAY,CAACC,EAAkCC,IAA+B,CACzF,MAAML,EAAMZ,EAAQ,IAAMgB,GAAY,KAAOT,EAAY,CAAE,GAAGS,EAAY,KAAAC,CAAK,CAAC,EAAG,CAACA,EAAMD,CAAU,CAAC,EAE/FE,EAAiBlB,EAAQ,IAAMH,EAACiB,EAAA,CAAQ,GAAGE,EAAY,IAAKJ,EAAK,EAAI,CAACI,EAAYJ,CAAG,CAAC,EAE5F,MAAO,CACL,UAAW,SAASA,CAAG,IACvB,eAAAM,EACA,IAAAN,CACF,CACF,EAEMO,EAAyBX,GAAkD,CAC/E,KAAM,CAAE,YAAAY,EAAa,WAAAC,CAAW,EAAIb,GAAO,WAAa,CAAC,EACzD,MAAO,GAAGa,EAAa,GAAGf,EAAkBe,CAAU,CAAC,GAAK,EAAE,IAC5DD,EACI,GAAGd,EAAkBc,CAAW,EAC7B,MAAM,GAAG,EACT,IAAIE,GAAQ,UAAUA,CAAI,EAAE,EAC5B,KAAK,GAAG,CAAC,GACZ,EACN,EACF,EAOO,SAASC,EACdC,EACAC,EACA,CACA,MAAMF,EAAaxB,EAAM,WAIvB,CAACS,EAAOkB,IAAQ,CAChB,MAAMC,EAAkB,CACtB,GAAGF,EACH,GAAGf,EAAeF,CAAK,CACzB,EAEM,CAAE,UAAAoB,EAAW,eAAAV,CAAe,EAAIH,EAAUY,EAAkBnB,GAAe,IAAI,EAE/EqB,EAAwBrB,GAE1BX,EAACQ,EAAA,CAAU,UAAW,GAAGuB,CAAS,IAAKpB,GAAe,SAAS,GAC7D,SAAAX,EAACM,EAAA,CAAK,UAAU,iBACd,SAAAN,EAACO,EAAA,CAAS,UAAWe,EAAsBX,CAAK,EAC9C,SAAAX,EAAC2B,EAAA,CAAkB,GAAIhB,EAAwB,IAAKkB,EAAK,EAC3D,EACF,EACF,EAIEI,EAA2BtB,GAE7BX,EAAC2B,EAAA,CACE,GAAIhB,EACL,UAAW,GAAGoB,CAAS,IAAKpB,GAAe,SAAS,GACpD,IAAKkB,EACP,EAIJ,OACE5B,EAAAF,EAAA,CACG,UAAAsB,EACA,QAAQ,QAASV,GAAe,WAAa,CAAC,CAAC,GAAG,OAAS,EACxDqB,EAAqBrB,CAAK,EAC1BsB,EAAwBtB,CAAK,GACnC,CAEJ,CAAC,EAGD,OAAAe,EAAW,YAAcC,EAAiB,aAAeA,EAAiB,MAAQ,YAC3ED,CACT",
-  "names": ["Fragment", "jsx", "jsxs", "React", "useMemo", "simpleHash", "getKeyPropsString", "Grid", "GridItem", "Container", "colContentClasses", "generateUID", "props", "keyString", "getStylesProps", "style", "uid", "disabled", "Styles", "useStyles", "styleProps", "data", "StyleComponent", "getContainerClassName", "desktopSpan", "mobileSpan", "item", "withLayout", "WrappedComponent", "defaultLayoutProps", "ref", "finalStyleProps", "className", "WithContainerWrapper", "WithoutContainerWrapper"]
+  "sourcesContent": ["import React, { useMemo } from 'react'\nimport { simpleHash } from './simpleHash.js'\nimport getKeyPropsString from './getKeyPropsString.js'\nimport { Grid, GridItem } from '../components/grid.js'\nimport { Container } from '../components/container.js'\nimport ErrorBoundary from './ErrorBoundary.js'\n\nconst colContentClasses: Record<number, string> = {\n  12: 'col-start-1 col-end-13',\n  10: 'col-start-2 col-end-12',\n  8: 'col-start-3 col-end-11',\n  6: 'col-start-4 col-end-10',\n  4: 'col-start-5 col-end-9',\n} as const\n\n// \u9884\u5B9A\u4E49\u5E26 tablet \u524D\u7F00\u7684\u7C7B\u540D\uFF0C\u786E\u4FDD Tailwind \u53EF\u4EE5\u8BC6\u522B\nconst colContentClassesTablet: Record<number, string> = {\n  12: 'tablet:col-start-1 tablet:col-end-13',\n  10: 'tablet:col-start-2 tablet:col-end-12',\n  8: 'tablet:col-start-3 tablet:col-end-11',\n  6: 'tablet:col-start-4 tablet:col-end-10',\n  4: 'tablet:col-start-5 tablet:col-end-9',\n} as const\n\nexport interface ContainerProps {\n  container?: {\n    /** \u684C\u9762\u7AEF\u5217\u5185\u5BB9\u5BBD\u5EA6 */\n    desktopSpan: number\n    /** \u79FB\u52A8\u7AEF\u5217\u5185\u5BB9\u5BBD\u5EA6 */\n    mobileSpan: number\n  }\n}\n\nexport interface StylesProps {\n  /** \u81EA\u5B9A\u4E49\u6837\u5F0F\u5B57\u7B26\u4E32\u6216\u5BF9\u8C61 */\n  style?: string | React.CSSProperties\n  /** \u552F\u4E00\u6807\u8BC6\u7B26 */\n  uid?: string\n  /** \u662F\u5426\u7981\u7528 */\n  disabled?: boolean\n}\n\n/**\n * \u6839\u636E props \u751F\u6210\u786E\u5B9A\u6027 uid\n */\nconst generateUID = (props: Record<string, any>) => {\n  const keyString = getKeyPropsString(props)\n  return `style_${simpleHash(keyString)}`\n}\n\n/**\n * \u4ECE\u7EC4\u4EF6 props \u4E2D\u63D0\u53D6\u6837\u5F0F\u76F8\u5173\u5C5E\u6027\n */\nexport const getStylesProps = <T extends Record<string, unknown>>(props: T & StylesProps): StylesProps => {\n  const { style, uid, disabled } = props\n  return { style, uid, disabled }\n}\n\n/**\n * \u6837\u5F0F\u6CE8\u5165\u7EC4\u4EF6\n */\nconst Styles: React.FC<StylesProps> = ({ style, uid = generateUID({}), disabled = false }) => {\n  if (!style || disabled) {\n    return null\n  }\n\n  return <style suppressHydrationWarning data-style-id={uid}>{`.block-${uid} { ${style} }`}</style>\n}\n\n/**\n * \u6837\u5F0F Hook\uFF0C\u8FD4\u56DE\u6837\u5F0F\u7C7B\u540D\u548C\u6837\u5F0F\u7EC4\u4EF6\n * @param styleProps - \u6837\u5F0F\u5C5E\u6027\n */\nexport const useStyles = (styleProps: Partial<StylesProps>, data?: Record<string, any>) => {\n  const uid = useMemo(() => styleProps?.uid || generateUID({ ...styleProps, data }), [data, styleProps])\n\n  const StyleComponent = useMemo(() => <Styles {...styleProps} uid={uid} />, [styleProps, uid])\n\n  return {\n    className: `block-${uid} `,\n    StyleComponent,\n    uid,\n  } as const\n}\n\nconst getContainerClassName = (props?: Partial<StylesProps & ContainerProps>) => {\n  const { desktopSpan, mobileSpan } = props?.container || {}\n  const mobileClasses = mobileSpan ? colContentClasses[mobileSpan] : ''\n  const desktopClasses = desktopSpan ? colContentClassesTablet[desktopSpan] : ''\n  return `${mobileClasses} ${desktopClasses}`.trim()\n}\n\n/**\n * \u9AD8\u9636\u7EC4\u4EF6\uFF0C \u7528\u4E8E\u7ED9\u7EC4\u4EF6\u7528style \u6807\u7B7E\u7684\u5F62\u5F0F\u8FFD\u52A0\u6837\u5F0F\n * @param WrappedComponent - \u9700\u8981\u5305\u88C5\u7684\u7EC4\u4EF6\n * @param defaultLayoutProps - \u9ED8\u8BA4\u6837\u5F0F\u5C5E\u6027\n */\nexport function withLayout<P extends object>(\n  WrappedComponent: React.ComponentType<P>,\n  defaultLayoutProps?: Partial<StylesProps & ContainerProps>\n) {\n  const withLayout = React.forwardRef<\n    any,\n    Omit<P, keyof StylesProps> &\n      Partial<StylesProps & ContainerProps> & { className?: string; data?: Record<string, any> }\n  >((props, ref) => {\n    const propsStyleProps = getStylesProps(props)\n\n    // \u5C06 style \u5BF9\u8C61\u8F6C\u6362\u4E3A\u5B57\u7B26\u4E32\n    const styleToString = (style: string | React.CSSProperties | undefined): string => {\n      if (!style) return ''\n      if (typeof style === 'string') return style\n      return (\n        Object.entries(style)\n          .map(([key, value]) => {\n            const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase()\n            return `${cssKey}: ${value}`\n          })\n          .join('; ') + ';'\n      )\n    }\n\n    // \u5408\u5E76 style \u5B57\u6BB5\uFF0C\u907F\u514D\u8986\u76D6\uFF0C\u786E\u4FDD\u6BCF\u4E2A\u6837\u5F0F\u90FD\u4EE5\u5206\u53F7\u7ED3\u5C3E\n    const mergedStyle = [defaultLayoutProps?.style, propsStyleProps?.style]\n      .map(styleToString)\n      .filter((style): style is string => Boolean(style))\n      .map(style => (style.trim().endsWith(';') ? style : `${style};`))\n      .join(' ')\n\n    const finalStyleProps = {\n      ...defaultLayoutProps,\n      ...propsStyleProps,\n      ...(mergedStyle && { style: mergedStyle }),\n    }\n\n    const { className, StyleComponent } = useStyles(finalStyleProps, (props as any)?.data)\n\n    const WithContainerWrapper = (props: any) => {\n      return (\n        <Container className={`${className} ${(props as any)?.className}`}>\n          <Grid className=\"container_grid\">\n            <GridItem className={getContainerClassName(props)}>\n              <WrappedComponent {...(props as unknown as P)} ref={ref} />\n            </GridItem>\n          </Grid>\n        </Container>\n      )\n    }\n\n    const WithoutContainerWrapper = (props: any) => {\n      return (\n        <WrappedComponent\n          {...(props as unknown as P)}\n          className={`${className} ${(props as any)?.className}`}\n          ref={ref}\n        />\n      )\n    }\n\n    return (\n      <>\n        <ErrorBoundary>\n          {StyleComponent}\n          {Reflect.ownKeys((props as any)?.container || {})?.length > 0\n            ? WithContainerWrapper(props)\n            : WithoutContainerWrapper(props)}\n        </ErrorBoundary>\n      </>\n    )\n  })\n\n  // \u76F4\u63A5\u4F7F\u7528\u539F\u59CB\u7EC4\u4EF6\u7684\u540D\u79F0\n  withLayout.displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component'\n  return withLayout\n}\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "React", "useMemo", "simpleHash", "getKeyPropsString", "Grid", "GridItem", "Container", "ErrorBoundary", "colContentClasses", "colContentClassesTablet", "generateUID", "props", "keyString", "getStylesProps", "style", "uid", "disabled", "Styles", "useStyles", "styleProps", "data", "StyleComponent", "getContainerClassName", "desktopSpan", "mobileSpan", "mobileClasses", "desktopClasses", "withLayout", "WrappedComponent", "defaultLayoutProps", "ref", "propsStyleProps", "styleToString", "key", "value", "mergedStyle", "finalStyleProps", "className", "WithContainerWrapper", "WithoutContainerWrapper"]
 }

package/dist/esm/stories/InlineVideo.stories.js

@@ -0,0 +1,164 @@
+import{jsx as i,jsxs as a}from"react/jsx-runtime";import"react";import t from"../biz-components/InlineVideo/index.js";const s={title:"Biz Components/InlineVideo",component:t,parameters:{layout:"padded",backgrounds:{default:"dark"},docs:{description:{component:`
+## InlineVideo - \u5185\u8054\u89C6\u9891\u7EC4\u4EF6
+
+\u7528\u4E8E\u4EA7\u54C1\u529F\u80FD\u5C55\u793A\u7684\u54CD\u5E94\u5F0F\u89C6\u9891\u7EC4\u4EF6\uFF0C\u652F\u6301\u81EA\u52A8\u64AD\u653E\u3001\u5FAA\u73AF\u64AD\u653E\u548C\u54CD\u5E94\u5F0F\u5E03\u5C40\u3002
+
+### \u6838\u5FC3\u529F\u80FD
+
+- **\u54CD\u5E94\u5F0F\u89C6\u9891\u6E90**: \u652F\u6301\u684C\u9762\u7AEF\u548C\u79FB\u52A8\u7AEF\u4F7F\u7528\u4E0D\u540C\u7684\u89C6\u9891\u6E90\u548C\u6D77\u62A5\u56FE
+- **\u81EA\u52A8\u64AD\u653E**: \u89C6\u9891\u81EA\u52A8\u64AD\u653E\u5E76\u5FAA\u73AF\uFF0C\u63D0\u4F9B\u6D41\u7545\u7684\u89C2\u770B\u4F53\u9A8C
+- **\u4E30\u5BCC\u7684\u5185\u5BB9\u5C55\u793A**: \u652F\u6301\u6807\u9898\u3001\u526F\u6807\u9898\u548C\u8BE6\u7EC6\u63CF\u8FF0
+- **\u54CD\u5E94\u5F0F\u5E03\u5C40**: \u6839\u636E\u5C4F\u5E55\u5C3A\u5BF8\u81EA\u52A8\u8C03\u6574\u89C6\u9891\u6BD4\u4F8B\u548C\u6587\u672C\u5E03\u5C40
+
+### \u4F7F\u7528\u573A\u666F
+
+- \u4EA7\u54C1\u7279\u6027\u4ECB\u7ECD
+- \u529F\u80FD\u6F14\u793A\u89C6\u9891
+- \u6280\u672F\u4EAE\u70B9\u5C55\u793A
+- \u4F7F\u7528\u6559\u7A0B\u8BF4\u660E
+
+### \u54CD\u5E94\u5F0F\u65AD\u70B9
+
+- **\u79FB\u52A8\u7AEF** (< 768px): 398:400 \u6BD4\u4F8B\uFF0C\u5782\u76F4\u5E03\u5C40
+- **\u5E73\u677F\u7AEF** (\u2265 768px): 3060:1180 \u6BD4\u4F8B\uFF0C\u5C45\u4E2D\u5E03\u5C40
+- **\u684C\u9762\u7AEF** (\u2265 1024px): \u56FA\u5B9A\u9AD8\u5EA6 360px\uFF0C\u5C45\u4E2D\u5BF9\u9F50
+
+### \u6570\u636E\u7ED3\u6784
+
+\`\`\`typescript
+{
+  title: string        // \u4E3B\u6807\u9898\uFF08\u5FC5\u586B\uFF09
+  subtitle?: string    // \u526F\u6807\u9898\uFF08\u53EF\u9009\uFF09
+  desc: string         // \u63CF\u8FF0\u6587\u672C\uFF08\u5FC5\u586B\uFF09
+  poster?: string      // \u684C\u9762\u7AEF\u6D77\u62A5\u56FE\uFF08\u53EF\u9009\uFF09
+  videoUrl: string     // \u684C\u9762\u7AEF\u89C6\u9891\u5730\u5740\uFF08\u5FC5\u586B\uFF09
+  mobPoster?: string   // \u79FB\u52A8\u7AEF\u6D77\u62A5\u56FE\uFF08\u53EF\u9009\uFF09
+  mobVideoUrl: string  // \u79FB\u52A8\u7AEF\u89C6\u9891\u5730\u5740\uFF08\u5FC5\u586B\uFF09
+  theme?: 'light' | 'dark'  // \u4E3B\u9898\u6A21\u5F0F\uFF08\u53EF\u9009\uFF0C\u9ED8\u8BA4 'light'\uFF09
+}
+\`\`\`
+
+### \u89C6\u9891\u7279\u6027
+
+- **\u9759\u97F3\u64AD\u653E**: \u9ED8\u8BA4\u9759\u97F3\uFF0C\u7B26\u5408\u7528\u6237\u4F53\u9A8C\u6700\u4F73\u5B9E\u8DF5
+- **\u5FAA\u73AF\u64AD\u653E**: \u89C6\u9891\u81EA\u52A8\u5FAA\u73AF\uFF0C\u6301\u7EED\u5C55\u793A\u4EA7\u54C1\u7279\u6027
+- **\u5185\u8054\u64AD\u653E**: \u4F7F\u7528 \`playsInline\` \u5C5E\u6027\uFF0C\u907F\u514D\u5168\u5C4F\u64AD\u653E
+- **\u5706\u89D2\u8BBE\u8BA1**: 16px \u5706\u89D2\uFF0C\u4E0E\u73B0\u4EE3\u8BBE\u8BA1\u98CE\u683C\u4E00\u81F4
+
+### \u4E3B\u9898\u6A21\u5F0F
+
+\u7EC4\u4EF6\u652F\u6301\u6D45\u8272\u548C\u6DF1\u8272\u4E24\u79CD\u4E3B\u9898\u6A21\u5F0F\uFF1A
+
+- **\u6D45\u8272\u6A21\u5F0F** (\`theme: 'light'\`): \u9ED8\u8BA4\u6A21\u5F0F\uFF0C\u9002\u7528\u4E8E\u6D45\u8272\u80CC\u666F
+- **\u6DF1\u8272\u6A21\u5F0F** (\`theme: 'dark'\`): \u6DF1\u8272\u6A21\u5F0F\uFF0C\u4F7F\u7528 \`aiui-dark\` \u7C7B\uFF0C\u6587\u672C\u989C\u8272\u81EA\u52A8\u9002\u914D
+
+\u6587\u672C\u989C\u8272\u4F7F\u7528 Tailwind CSS \u7684\u4E3B\u9898\u53D8\u91CF \`text-info-primary\`\uFF0C\u4F1A\u6839\u636E \`.aiui-dark\` \u7C7B\u81EA\u52A8\u5207\u6362\u4E3A\u6DF1\u8272\u6A21\u5F0F\u7684\u989C\u8272\u3002
+
+### \u81EA\u5B9A\u4E49\u6837\u5F0F\u7C7B\u540D
+
+\u7EC4\u4EF6\u5185\u90E8\u5173\u952E\u8282\u70B9\u90FD\u6709\u8BED\u4E49\u5316\u7684 className\uFF0C\u65B9\u4FBF\u901A\u8FC7 CSS \u81EA\u5B9A\u4E49\u6837\u5F0F\uFF1A
+
+| \u7C7B\u540D | \u8BF4\u660E | \u7528\u9014 |
+|------|------|------|
+| \`.inline-video-section\` | \u6839\u5BB9\u5668 | \u6574\u4F53\u5E03\u5C40\u3001\u80CC\u666F\u3001\u95F4\u8DDD |
+| \`.inline-video-content\` | \u5185\u5BB9\u533A\u57DF | \u6587\u672C\u5185\u5BB9\u7684\u5E03\u5C40\u5BB9\u5668 |
+| \`.inline-video-title\` | \u4E3B\u6807\u9898 | \u6807\u9898\u6837\u5F0F\u3001\u5B57\u4F53\u3001\u989C\u8272 |
+| \`.inline-video-subtitle\` | \u526F\u6807\u9898 | \u526F\u6807\u9898\u6837\u5F0F\u3001\u95F4\u8DDD |
+| \`.inline-video-text-wrapper\` | \u6587\u672C\u5305\u88C5\u5668 | \u526F\u6807\u9898\u548C\u63CF\u8FF0\u7684\u5BB9\u5668 |
+| \`.inline-video-description\` | \u63CF\u8FF0\u6587\u672C | \u63CF\u8FF0\u6837\u5F0F\u3001\u884C\u9AD8\u3001\u5BBD\u5EA6 |
+| \`.inline-video-container\` | \u89C6\u9891\u5BB9\u5668 | \u89C6\u9891\u5BBD\u9AD8\u6BD4\u3001\u5706\u89D2 |
+| \`.inline-video-desktop\` | \u684C\u9762\u7AEF\u89C6\u9891 | \u684C\u9762\u7AEF\u89C6\u9891\u6837\u5F0F |
+| \`.inline-video-mobile\` | \u79FB\u52A8\u7AEF\u89C6\u9891 | \u79FB\u52A8\u7AEF\u89C6\u9891\u6837\u5F0F |
+
+### \u81EA\u5B9A\u4E49\u6837\u5F0F\u793A\u4F8B
+
+\`\`\`css
+/* \u4FEE\u6539\u6807\u9898\u989C\u8272 */
+.inline-video-title {
+  color: #00d4ff;
+}
+
+/* \u4FEE\u6539\u89C6\u9891\u5BB9\u5668\u5706\u89D2 */
+.inline-video-container {
+}
+
+/* \u81EA\u5B9A\u4E49\u63CF\u8FF0\u6587\u672C\u6837\u5F0F */
+.inline-video-description {
+  line-height: 1.8;
+  opacity: 0.9;
+}
+
+/* \u6DFB\u52A0\u5BB9\u5668\u80CC\u666F */
+.inline-video-section {
+  background: linear-gradient(180deg, #1a1a1a 0%, #000000 100%);
+  padding: 32px;
+}
+\`\`\`
+        `}}},tags:["autodocs"],argTypes:{data:{description:"\u89C6\u9891\u7EC4\u4EF6\u7684\u6570\u636E\u914D\u7F6E\u5BF9\u8C61",control:"object"},className:{description:"\u81EA\u5B9A\u4E49 CSS \u7C7B\u540D",control:"text"}}};var c=s;const e={title:"DuoSpiral\u2122 \u9632\u7F20\u7ED5\u5237\u5934",subtitle:"\u521B\u65B0\u7684\u53CC\u87BA\u65CB\u8BBE\u8BA1",desc:"DuoSpiral\u2122 \u5237\u5934\u91C7\u7528\u72EC\u7279\u7684\u53CC\u87BA\u65CB\u8BBE\u8BA1\uFF0C\u6709\u6548\u9632\u6B62\u6BDB\u53D1\u7F20\u7ED5\uFF0C\u4E3A\u60A8\u63D0\u4F9B\u65E0\u5FE7\u7684\u6E05\u6D01\u4F53\u9A8C\u3002\u5148\u8FDB\u7684\u5DE5\u7A0B\u8BBE\u8BA1\u786E\u4FDD\u6BCF\u6B21\u4F7F\u7528\u90FD\u80FD\u83B7\u5F97\u6700\u4F73\u7684\u6E05\u6D01\u6548\u679C\u3002",poster:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",videoUrl:"https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4",mobPoster:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811",mobVideoUrl:"https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4"},p={name:"\u9ED8\u8BA4\u793A\u4F8B",args:{data:e},parameters:{docs:{description:{story:"\u5B8C\u6574\u914D\u7F6E\u7684\u89C6\u9891\u7EC4\u4EF6\u793A\u4F8B\uFF0C\u5305\u542B\u6807\u9898\u3001\u526F\u6807\u9898\u3001\u63CF\u8FF0\u6587\u672C\u3001\u6D77\u62A5\u56FE\u548C\u89C6\u9891\u6E90\u3002\u5C55\u793A\u4E86\u7EC4\u4EF6\u7684\u6240\u6709\u53EF\u7528\u529F\u80FD\u3002"}}}},l={name:"\u65E0\u526F\u6807\u9898",args:{data:{title:"\u9AD8\u6548\u6E05\u6D01\u6280\u672F",desc:"\u4F53\u9A8C\u6211\u4EEC\u6700\u65B0\u7684\u6E05\u6D01\u521B\u65B0\u6280\u672F\uFF0C\u4E3A\u60A8\u7684\u5BB6\u5C45\u6E05\u6D01\u5E26\u6765\u9769\u547D\u6027\u7684\u6539\u53D8\u3002",poster:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",videoUrl:"https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4",mobPoster:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811",mobVideoUrl:"https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4"}},parameters:{docs:{description:{story:"\u7701\u7565\u526F\u6807\u9898\u7684\u7B80\u5316\u7248\u672C\u3002\u9002\u7528\u4E8E\u5185\u5BB9\u8F83\u5C11\u6216\u5F3A\u8C03\u4E3B\u6807\u9898\u7684\u573A\u666F\uFF0C\u4FDD\u6301\u9875\u9762\u7B80\u6D01\u6E05\u6670\u3002"}}}},m={name:"\u65E0\u6D77\u62A5\u56FE",args:{data:{title:"\u65E0\u6D77\u62A5\u56FE\u7247",subtitle:"\u7EAF\u89C6\u9891\u5C55\u793A",desc:"\u4E0D\u4F7F\u7528\u6D77\u62A5\u56FE\u7247\u7684\u89C6\u9891\u5C55\u793A\uFF0C\u76F4\u63A5\u64AD\u653E\u89C6\u9891\u5185\u5BB9\u3002",videoUrl:"https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4",mobVideoUrl:"https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4"}},parameters:{docs:{description:{story:"\u4E0D\u4F7F\u7528\u6D77\u62A5\u56FE\u7684\u793A\u4F8B\u3002\u89C6\u9891\u4F1A\u76F4\u63A5\u663E\u793A\u7B2C\u4E00\u5E27\u5185\u5BB9\uFF0C\u9002\u7528\u4E8E\u4E0D\u9700\u8981\u81EA\u5B9A\u4E49\u6D77\u62A5\u56FE\u6216\u5E0C\u671B\u5FEB\u901F\u52A0\u8F7D\u7684\u573A\u666F\u3002"}}}},f={name:"\u957F\u63CF\u8FF0\u6587\u672C",args:{data:{title:"\u4EA7\u54C1\u529F\u80FD\u8BE6\u7EC6\u4ECB\u7ECD",subtitle:"\u5168\u9762\u4E86\u89E3\u4EA7\u54C1\u7279\u6027",desc:"\u6211\u4EEC\u7684\u4EA7\u54C1\u91C7\u7528\u6700\u5148\u8FDB\u7684\u6280\u672F\u548C\u6750\u6599\uFF0C\u7ECF\u8FC7\u4E25\u683C\u7684\u8D28\u91CF\u63A7\u5236\u548C\u6D4B\u8BD5\u3002\u6BCF\u4E2A\u7EC6\u8282\u90FD\u7ECF\u8FC7\u7CBE\u5FC3\u8BBE\u8BA1\uFF0C\u786E\u4FDD\u4E3A\u7528\u6237\u63D0\u4F9B\u6700\u4F73\u7684\u4F7F\u7528\u4F53\u9A8C\u3002\u4ECE\u5916\u89C2\u8BBE\u8BA1\u5230\u5185\u90E8\u7ED3\u6784\uFF0C\u4ECE\u529F\u80FD\u5B9E\u73B0\u5230\u7528\u6237\u754C\u9762\uFF0C\u6BCF\u4E00\u4E2A\u73AF\u8282\u90FD\u4F53\u73B0\u4E86\u6211\u4EEC\u5BF9\u54C1\u8D28\u7684\u8FFD\u6C42\u3002\u65E0\u8BBA\u60A8\u662F\u4E13\u4E1A\u7528\u6237\u8FD8\u662F\u666E\u901A\u6D88\u8D39\u8005\uFF0C\u90FD\u80FD\u5728\u6211\u4EEC\u7684\u4EA7\u54C1\u4E2D\u627E\u5230\u6EE1\u8DB3\u60A8\u9700\u6C42\u7684\u529F\u80FD\u548C\u7279\u6027\u3002",poster:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",videoUrl:"https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4",mobPoster:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811",mobVideoUrl:"https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4"}},parameters:{docs:{description:{story:"\u5C55\u793A\u8F83\u957F\u63CF\u8FF0\u6587\u672C\u7684\u6392\u7248\u6548\u679C\u3002\u7EC4\u4EF6\u4F1A\u6839\u636E\u4E0D\u540C\u5C4F\u5E55\u5C3A\u5BF8\u81EA\u52A8\u8C03\u6574\u6587\u672C\u5BBD\u5EA6\u548C\u884C\u9AD8\uFF0C\u786E\u4FDD\u957F\u6587\u672C\u7684\u53EF\u8BFB\u6027\u3002\u9002\u7528\u4E8E\u9700\u8981\u8BE6\u7EC6\u8BF4\u660E\u4EA7\u54C1\u529F\u80FD\u6216\u6280\u672F\u7EC6\u8282\u7684\u573A\u666F\u3002"}}}},b={name:"\u6DF1\u8272\u4E3B\u9898",args:{data:{...e,theme:"dark"}},parameters:{backgrounds:{default:"light"},docs:{description:{story:'\u6DF1\u8272\u4E3B\u9898\u6A21\u5F0F\u793A\u4F8B\u3002\u901A\u8FC7\u8BBE\u7F6E `theme: "dark"` \u542F\u7528\u6DF1\u8272\u6A21\u5F0F\uFF0C\u6587\u672C\u989C\u8272\u4F1A\u81EA\u52A8\u4F7F\u7528\u6DF1\u8272\u4E3B\u9898\u7684\u914D\u8272\u65B9\u6848\u3002\u9002\u7528\u4E8E\u6D45\u8272\u80CC\u666F\u4E0A\u5C55\u793A\u6DF1\u8272\u5185\u5BB9\u7684\u573A\u666F\u3002'}}}},v={name:"\u6D45\u8272\u4E3B\u9898",args:{data:{...e,theme:"light"}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:'\u6D45\u8272\u4E3B\u9898\u6A21\u5F0F\u793A\u4F8B\uFF08\u9ED8\u8BA4\uFF09\u3002\u901A\u8FC7\u8BBE\u7F6E `theme: "light"` \u6216\u4E0D\u8BBE\u7F6E\u4E3B\u9898\uFF08\u9ED8\u8BA4\u4E3A\u6D45\u8272\uFF09\uFF0C\u6587\u672C\u989C\u8272\u4F7F\u7528\u6D45\u8272\u4E3B\u9898\u914D\u8272\u3002\u9002\u7528\u4E8E\u6DF1\u8272\u80CC\u666F\u4E0A\u5C55\u793A\u6D45\u8272\u5185\u5BB9\u7684\u573A\u666F\u3002'}}}},h={name:"\u81EA\u5B9A\u4E49\u6837\u5F0F",args:{data:e,className:"custom-inline-video"},parameters:{docs:{description:{story:`
+\u901A\u8FC7 className \u5C5E\u6027\u548C\u5185\u7F6E\u7684\u8BED\u4E49\u5316\u7C7B\u540D\uFF0C\u53EF\u4EE5\u8F7B\u677E\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u6837\u5F0F\u3002
+
+### \u4F7F\u7528\u65B9\u5F0F
+
+1. **\u901A\u8FC7 className prop**: \u4F20\u5165\u81EA\u5B9A\u4E49\u7C7B\u540D
+2. **\u4F7F\u7528\u5185\u7F6E\u7C7B\u540D**: \u76F4\u63A5\u8986\u76D6\u5185\u7F6E\u7684\u8BED\u4E49\u5316\u7C7B\u540D
+
+### \u793A\u4F8B\u4EE3\u7801
+
+\`\`\`tsx
+<InlineVideo
+  data={data}
+  className="custom-inline-video"
+/>
+\`\`\`
+
+\`\`\`css
+/* \u81EA\u5B9A\u4E49\u6837\u5F0F */
+.custom-inline-video {
+  background: rgba(0, 0, 0, 0.5);
+  padding: 40px;
+  backdrop-filter: blur(10px);
+}
+
+.custom-inline-video .inline-video-title {
+  color: #00d4ff;
+  text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
+}
+
+.custom-inline-video .inline-video-subtitle {
+  color: #ffd700;
+}
+
+.custom-inline-video .inline-video-container {
+  border: 2px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+\`\`\`
+
+\u6B64\u793A\u4F8B\u5C55\u793A\u4E86\u5982\u4F55\u901A\u8FC7\u7EC4\u5408 className prop \u548C\u5185\u7F6E\u7C7B\u540D\u6765\u5B9E\u73B0\u5B8C\u5168\u81EA\u5B9A\u4E49\u7684\u89C6\u89C9\u6548\u679C\u3002
+        `}}},decorators:[o=>a("div",{children:[i("style",{children:`
+          .custom-inline-video {
+            background: rgba(0, 0, 0, 0.3);
+            padding: 40px;
+            backdrop-filter: blur(10px);
+          }
+
+          .custom-inline-video .inline-video-title {
+            color: #00d4ff !important;
+            text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
+          }
+
+          .custom-inline-video .inline-video-subtitle {
+            color: #ffd700 !important;
+          }
+
+          .custom-inline-video .inline-video-description {
+            opacity: 0.9;
+            line-height: 1.8;
+          }
+
+          .custom-inline-video .inline-video-container {
+            border: 2px solid rgba(255, 255, 255, 0.1);
+                      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+          }
+        `}),i(o,{})]})]};export{h as CustomStyled,b as DarkTheme,p as Default,v as LightTheme,f as LongDescription,m as WithoutPosters,l as WithoutSubtitle,c as default};
+//# sourceMappingURL=InlineVideo.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/stories/InlineVideo.stories.tsx"],
+  "sourcesContent": ["import React from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport InlineVideo from '../biz-components/InlineVideo/index.js'\n\nconst meta = {\n  title: 'Biz Components/InlineVideo',\n  component: InlineVideo,\n  parameters: {\n    layout: 'padded',\n    backgrounds: {\n      default: 'dark',\n    },\n    docs: {\n      description: {\n        component: `\n## InlineVideo - \u5185\u8054\u89C6\u9891\u7EC4\u4EF6\n\n\u7528\u4E8E\u4EA7\u54C1\u529F\u80FD\u5C55\u793A\u7684\u54CD\u5E94\u5F0F\u89C6\u9891\u7EC4\u4EF6\uFF0C\u652F\u6301\u81EA\u52A8\u64AD\u653E\u3001\u5FAA\u73AF\u64AD\u653E\u548C\u54CD\u5E94\u5F0F\u5E03\u5C40\u3002\n\n### \u6838\u5FC3\u529F\u80FD\n\n- **\u54CD\u5E94\u5F0F\u89C6\u9891\u6E90**: \u652F\u6301\u684C\u9762\u7AEF\u548C\u79FB\u52A8\u7AEF\u4F7F\u7528\u4E0D\u540C\u7684\u89C6\u9891\u6E90\u548C\u6D77\u62A5\u56FE\n- **\u81EA\u52A8\u64AD\u653E**: \u89C6\u9891\u81EA\u52A8\u64AD\u653E\u5E76\u5FAA\u73AF\uFF0C\u63D0\u4F9B\u6D41\u7545\u7684\u89C2\u770B\u4F53\u9A8C\n- **\u4E30\u5BCC\u7684\u5185\u5BB9\u5C55\u793A**: \u652F\u6301\u6807\u9898\u3001\u526F\u6807\u9898\u548C\u8BE6\u7EC6\u63CF\u8FF0\n- **\u54CD\u5E94\u5F0F\u5E03\u5C40**: \u6839\u636E\u5C4F\u5E55\u5C3A\u5BF8\u81EA\u52A8\u8C03\u6574\u89C6\u9891\u6BD4\u4F8B\u548C\u6587\u672C\u5E03\u5C40\n\n### \u4F7F\u7528\u573A\u666F\n\n- \u4EA7\u54C1\u7279\u6027\u4ECB\u7ECD\n- \u529F\u80FD\u6F14\u793A\u89C6\u9891\n- \u6280\u672F\u4EAE\u70B9\u5C55\u793A\n- \u4F7F\u7528\u6559\u7A0B\u8BF4\u660E\n\n### \u54CD\u5E94\u5F0F\u65AD\u70B9\n\n- **\u79FB\u52A8\u7AEF** (< 768px): 398:400 \u6BD4\u4F8B\uFF0C\u5782\u76F4\u5E03\u5C40\n- **\u5E73\u677F\u7AEF** (\u2265 768px): 3060:1180 \u6BD4\u4F8B\uFF0C\u5C45\u4E2D\u5E03\u5C40\n- **\u684C\u9762\u7AEF** (\u2265 1024px): \u56FA\u5B9A\u9AD8\u5EA6 360px\uFF0C\u5C45\u4E2D\u5BF9\u9F50\n\n### \u6570\u636E\u7ED3\u6784\n\n\\`\\`\\`typescript\n{\n  title: string        // \u4E3B\u6807\u9898\uFF08\u5FC5\u586B\uFF09\n  subtitle?: string    // \u526F\u6807\u9898\uFF08\u53EF\u9009\uFF09\n  desc: string         // \u63CF\u8FF0\u6587\u672C\uFF08\u5FC5\u586B\uFF09\n  poster?: string      // \u684C\u9762\u7AEF\u6D77\u62A5\u56FE\uFF08\u53EF\u9009\uFF09\n  videoUrl: string     // \u684C\u9762\u7AEF\u89C6\u9891\u5730\u5740\uFF08\u5FC5\u586B\uFF09\n  mobPoster?: string   // \u79FB\u52A8\u7AEF\u6D77\u62A5\u56FE\uFF08\u53EF\u9009\uFF09\n  mobVideoUrl: string  // \u79FB\u52A8\u7AEF\u89C6\u9891\u5730\u5740\uFF08\u5FC5\u586B\uFF09\n  theme?: 'light' | 'dark'  // \u4E3B\u9898\u6A21\u5F0F\uFF08\u53EF\u9009\uFF0C\u9ED8\u8BA4 'light'\uFF09\n}\n\\`\\`\\`\n\n### \u89C6\u9891\u7279\u6027\n\n- **\u9759\u97F3\u64AD\u653E**: \u9ED8\u8BA4\u9759\u97F3\uFF0C\u7B26\u5408\u7528\u6237\u4F53\u9A8C\u6700\u4F73\u5B9E\u8DF5\n- **\u5FAA\u73AF\u64AD\u653E**: \u89C6\u9891\u81EA\u52A8\u5FAA\u73AF\uFF0C\u6301\u7EED\u5C55\u793A\u4EA7\u54C1\u7279\u6027\n- **\u5185\u8054\u64AD\u653E**: \u4F7F\u7528 \\`playsInline\\` \u5C5E\u6027\uFF0C\u907F\u514D\u5168\u5C4F\u64AD\u653E\n- **\u5706\u89D2\u8BBE\u8BA1**: 16px \u5706\u89D2\uFF0C\u4E0E\u73B0\u4EE3\u8BBE\u8BA1\u98CE\u683C\u4E00\u81F4\n\n### \u4E3B\u9898\u6A21\u5F0F\n\n\u7EC4\u4EF6\u652F\u6301\u6D45\u8272\u548C\u6DF1\u8272\u4E24\u79CD\u4E3B\u9898\u6A21\u5F0F\uFF1A\n\n- **\u6D45\u8272\u6A21\u5F0F** (\\`theme: 'light'\\`): \u9ED8\u8BA4\u6A21\u5F0F\uFF0C\u9002\u7528\u4E8E\u6D45\u8272\u80CC\u666F\n- **\u6DF1\u8272\u6A21\u5F0F** (\\`theme: 'dark'\\`): \u6DF1\u8272\u6A21\u5F0F\uFF0C\u4F7F\u7528 \\`aiui-dark\\` \u7C7B\uFF0C\u6587\u672C\u989C\u8272\u81EA\u52A8\u9002\u914D\n\n\u6587\u672C\u989C\u8272\u4F7F\u7528 Tailwind CSS \u7684\u4E3B\u9898\u53D8\u91CF \\`text-info-primary\\`\uFF0C\u4F1A\u6839\u636E \\`.aiui-dark\\` \u7C7B\u81EA\u52A8\u5207\u6362\u4E3A\u6DF1\u8272\u6A21\u5F0F\u7684\u989C\u8272\u3002\n\n### \u81EA\u5B9A\u4E49\u6837\u5F0F\u7C7B\u540D\n\n\u7EC4\u4EF6\u5185\u90E8\u5173\u952E\u8282\u70B9\u90FD\u6709\u8BED\u4E49\u5316\u7684 className\uFF0C\u65B9\u4FBF\u901A\u8FC7 CSS \u81EA\u5B9A\u4E49\u6837\u5F0F\uFF1A\n\n| \u7C7B\u540D | \u8BF4\u660E | \u7528\u9014 |\n|------|------|------|\n| \\`.inline-video-section\\` | \u6839\u5BB9\u5668 | \u6574\u4F53\u5E03\u5C40\u3001\u80CC\u666F\u3001\u95F4\u8DDD |\n| \\`.inline-video-content\\` | \u5185\u5BB9\u533A\u57DF | \u6587\u672C\u5185\u5BB9\u7684\u5E03\u5C40\u5BB9\u5668 |\n| \\`.inline-video-title\\` | \u4E3B\u6807\u9898 | \u6807\u9898\u6837\u5F0F\u3001\u5B57\u4F53\u3001\u989C\u8272 |\n| \\`.inline-video-subtitle\\` | \u526F\u6807\u9898 | \u526F\u6807\u9898\u6837\u5F0F\u3001\u95F4\u8DDD |\n| \\`.inline-video-text-wrapper\\` | \u6587\u672C\u5305\u88C5\u5668 | \u526F\u6807\u9898\u548C\u63CF\u8FF0\u7684\u5BB9\u5668 |\n| \\`.inline-video-description\\` | \u63CF\u8FF0\u6587\u672C | \u63CF\u8FF0\u6837\u5F0F\u3001\u884C\u9AD8\u3001\u5BBD\u5EA6 |\n| \\`.inline-video-container\\` | \u89C6\u9891\u5BB9\u5668 | \u89C6\u9891\u5BBD\u9AD8\u6BD4\u3001\u5706\u89D2 |\n| \\`.inline-video-desktop\\` | \u684C\u9762\u7AEF\u89C6\u9891 | \u684C\u9762\u7AEF\u89C6\u9891\u6837\u5F0F |\n| \\`.inline-video-mobile\\` | \u79FB\u52A8\u7AEF\u89C6\u9891 | \u79FB\u52A8\u7AEF\u89C6\u9891\u6837\u5F0F |\n\n### \u81EA\u5B9A\u4E49\u6837\u5F0F\u793A\u4F8B\n\n\\`\\`\\`css\n/* \u4FEE\u6539\u6807\u9898\u989C\u8272 */\n.inline-video-title {\n  color: #00d4ff;\n}\n\n/* \u4FEE\u6539\u89C6\u9891\u5BB9\u5668\u5706\u89D2 */\n.inline-video-container {\n}\n\n/* \u81EA\u5B9A\u4E49\u63CF\u8FF0\u6587\u672C\u6837\u5F0F */\n.inline-video-description {\n  line-height: 1.8;\n  opacity: 0.9;\n}\n\n/* \u6DFB\u52A0\u5BB9\u5668\u80CC\u666F */\n.inline-video-section {\n  background: linear-gradient(180deg, #1a1a1a 0%, #000000 100%);\n  padding: 32px;\n}\n\\`\\`\\`\n        `,\n      },\n    },\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    data: {\n      description: '\u89C6\u9891\u7EC4\u4EF6\u7684\u6570\u636E\u914D\u7F6E\u5BF9\u8C61',\n      control: 'object',\n    },\n    className: {\n      description: '\u81EA\u5B9A\u4E49 CSS \u7C7B\u540D',\n      control: 'text',\n    },\n  },\n} satisfies Meta<typeof InlineVideo>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nconst defaultData = {\n  title: 'DuoSpiral\u2122 \u9632\u7F20\u7ED5\u5237\u5934',\n  subtitle: '\u521B\u65B0\u7684\u53CC\u87BA\u65CB\u8BBE\u8BA1',\n  desc: 'DuoSpiral\u2122 \u5237\u5934\u91C7\u7528\u72EC\u7279\u7684\u53CC\u87BA\u65CB\u8BBE\u8BA1\uFF0C\u6709\u6548\u9632\u6B62\u6BDB\u53D1\u7F20\u7ED5\uFF0C\u4E3A\u60A8\u63D0\u4F9B\u65E0\u5FE7\u7684\u6E05\u6D01\u4F53\u9A8C\u3002\u5148\u8FDB\u7684\u5DE5\u7A0B\u8BBE\u8BA1\u786E\u4FDD\u6BCF\u6B21\u4F7F\u7528\u90FD\u80FD\u83B7\u5F97\u6700\u4F73\u7684\u6E05\u6D01\u6548\u679C\u3002',\n  poster:\n    'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n  videoUrl: 'https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4',\n  mobPoster:\n    'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811',\n  mobVideoUrl: 'https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4',\n}\n\nexport const Default: Story = {\n  name: '\u9ED8\u8BA4\u793A\u4F8B',\n  args: {\n    data: defaultData,\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '\u5B8C\u6574\u914D\u7F6E\u7684\u89C6\u9891\u7EC4\u4EF6\u793A\u4F8B\uFF0C\u5305\u542B\u6807\u9898\u3001\u526F\u6807\u9898\u3001\u63CF\u8FF0\u6587\u672C\u3001\u6D77\u62A5\u56FE\u548C\u89C6\u9891\u6E90\u3002\u5C55\u793A\u4E86\u7EC4\u4EF6\u7684\u6240\u6709\u53EF\u7528\u529F\u80FD\u3002',\n      },\n    },\n  },\n}\n\nexport const WithoutSubtitle: Story = {\n  name: '\u65E0\u526F\u6807\u9898',\n  args: {\n    data: {\n      title: '\u9AD8\u6548\u6E05\u6D01\u6280\u672F',\n      desc: '\u4F53\u9A8C\u6211\u4EEC\u6700\u65B0\u7684\u6E05\u6D01\u521B\u65B0\u6280\u672F\uFF0C\u4E3A\u60A8\u7684\u5BB6\u5C45\u6E05\u6D01\u5E26\u6765\u9769\u547D\u6027\u7684\u6539\u53D8\u3002',\n      poster:\n        'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n      videoUrl: 'https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4',\n      mobPoster:\n        'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811',\n      mobVideoUrl: 'https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4',\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '\u7701\u7565\u526F\u6807\u9898\u7684\u7B80\u5316\u7248\u672C\u3002\u9002\u7528\u4E8E\u5185\u5BB9\u8F83\u5C11\u6216\u5F3A\u8C03\u4E3B\u6807\u9898\u7684\u573A\u666F\uFF0C\u4FDD\u6301\u9875\u9762\u7B80\u6D01\u6E05\u6670\u3002',\n      },\n    },\n  },\n}\n\nexport const WithoutPosters: Story = {\n  name: '\u65E0\u6D77\u62A5\u56FE',\n  args: {\n    data: {\n      title: '\u65E0\u6D77\u62A5\u56FE\u7247',\n      subtitle: '\u7EAF\u89C6\u9891\u5C55\u793A',\n      desc: '\u4E0D\u4F7F\u7528\u6D77\u62A5\u56FE\u7247\u7684\u89C6\u9891\u5C55\u793A\uFF0C\u76F4\u63A5\u64AD\u653E\u89C6\u9891\u5185\u5BB9\u3002',\n      videoUrl: 'https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4',\n      mobVideoUrl: 'https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4',\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '\u4E0D\u4F7F\u7528\u6D77\u62A5\u56FE\u7684\u793A\u4F8B\u3002\u89C6\u9891\u4F1A\u76F4\u63A5\u663E\u793A\u7B2C\u4E00\u5E27\u5185\u5BB9\uFF0C\u9002\u7528\u4E8E\u4E0D\u9700\u8981\u81EA\u5B9A\u4E49\u6D77\u62A5\u56FE\u6216\u5E0C\u671B\u5FEB\u901F\u52A0\u8F7D\u7684\u573A\u666F\u3002',\n      },\n    },\n  },\n}\n\nexport const LongDescription: Story = {\n  name: '\u957F\u63CF\u8FF0\u6587\u672C',\n  args: {\n    data: {\n      title: '\u4EA7\u54C1\u529F\u80FD\u8BE6\u7EC6\u4ECB\u7ECD',\n      subtitle: '\u5168\u9762\u4E86\u89E3\u4EA7\u54C1\u7279\u6027',\n      desc: '\u6211\u4EEC\u7684\u4EA7\u54C1\u91C7\u7528\u6700\u5148\u8FDB\u7684\u6280\u672F\u548C\u6750\u6599\uFF0C\u7ECF\u8FC7\u4E25\u683C\u7684\u8D28\u91CF\u63A7\u5236\u548C\u6D4B\u8BD5\u3002\u6BCF\u4E2A\u7EC6\u8282\u90FD\u7ECF\u8FC7\u7CBE\u5FC3\u8BBE\u8BA1\uFF0C\u786E\u4FDD\u4E3A\u7528\u6237\u63D0\u4F9B\u6700\u4F73\u7684\u4F7F\u7528\u4F53\u9A8C\u3002\u4ECE\u5916\u89C2\u8BBE\u8BA1\u5230\u5185\u90E8\u7ED3\u6784\uFF0C\u4ECE\u529F\u80FD\u5B9E\u73B0\u5230\u7528\u6237\u754C\u9762\uFF0C\u6BCF\u4E00\u4E2A\u73AF\u8282\u90FD\u4F53\u73B0\u4E86\u6211\u4EEC\u5BF9\u54C1\u8D28\u7684\u8FFD\u6C42\u3002\u65E0\u8BBA\u60A8\u662F\u4E13\u4E1A\u7528\u6237\u8FD8\u662F\u666E\u901A\u6D88\u8D39\u8005\uFF0C\u90FD\u80FD\u5728\u6211\u4EEC\u7684\u4EA7\u54C1\u4E2D\u627E\u5230\u6EE1\u8DB3\u60A8\u9700\u6C42\u7684\u529F\u80FD\u548C\u7279\u6027\u3002',\n      poster:\n        'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n      videoUrl: 'https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4',\n      mobPoster:\n        'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811',\n      mobVideoUrl: 'https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4',\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        story:\n          '\u5C55\u793A\u8F83\u957F\u63CF\u8FF0\u6587\u672C\u7684\u6392\u7248\u6548\u679C\u3002\u7EC4\u4EF6\u4F1A\u6839\u636E\u4E0D\u540C\u5C4F\u5E55\u5C3A\u5BF8\u81EA\u52A8\u8C03\u6574\u6587\u672C\u5BBD\u5EA6\u548C\u884C\u9AD8\uFF0C\u786E\u4FDD\u957F\u6587\u672C\u7684\u53EF\u8BFB\u6027\u3002\u9002\u7528\u4E8E\u9700\u8981\u8BE6\u7EC6\u8BF4\u660E\u4EA7\u54C1\u529F\u80FD\u6216\u6280\u672F\u7EC6\u8282\u7684\u573A\u666F\u3002',\n      },\n    },\n  },\n}\n\nexport const DarkTheme: Story = {\n  name: '\u6DF1\u8272\u4E3B\u9898',\n  args: {\n    data: {\n      ...defaultData,\n      theme: 'dark',\n    },\n  },\n  parameters: {\n    backgrounds: {\n      default: 'light',\n    },\n    docs: {\n      description: {\n        story:\n          '\u6DF1\u8272\u4E3B\u9898\u6A21\u5F0F\u793A\u4F8B\u3002\u901A\u8FC7\u8BBE\u7F6E `theme: \"dark\"` \u542F\u7528\u6DF1\u8272\u6A21\u5F0F\uFF0C\u6587\u672C\u989C\u8272\u4F1A\u81EA\u52A8\u4F7F\u7528\u6DF1\u8272\u4E3B\u9898\u7684\u914D\u8272\u65B9\u6848\u3002\u9002\u7528\u4E8E\u6D45\u8272\u80CC\u666F\u4E0A\u5C55\u793A\u6DF1\u8272\u5185\u5BB9\u7684\u573A\u666F\u3002',\n      },\n    },\n  },\n}\n\nexport const LightTheme: Story = {\n  name: '\u6D45\u8272\u4E3B\u9898',\n  args: {\n    data: {\n      ...defaultData,\n      theme: 'light',\n    },\n  },\n  parameters: {\n    backgrounds: {\n      default: 'dark',\n    },\n    docs: {\n      description: {\n        story:\n          '\u6D45\u8272\u4E3B\u9898\u6A21\u5F0F\u793A\u4F8B\uFF08\u9ED8\u8BA4\uFF09\u3002\u901A\u8FC7\u8BBE\u7F6E `theme: \"light\"` \u6216\u4E0D\u8BBE\u7F6E\u4E3B\u9898\uFF08\u9ED8\u8BA4\u4E3A\u6D45\u8272\uFF09\uFF0C\u6587\u672C\u989C\u8272\u4F7F\u7528\u6D45\u8272\u4E3B\u9898\u914D\u8272\u3002\u9002\u7528\u4E8E\u6DF1\u8272\u80CC\u666F\u4E0A\u5C55\u793A\u6D45\u8272\u5185\u5BB9\u7684\u573A\u666F\u3002',\n      },\n    },\n  },\n}\n\nexport const CustomStyled: Story = {\n  name: '\u81EA\u5B9A\u4E49\u6837\u5F0F',\n  args: {\n    data: defaultData,\n    className: 'custom-inline-video',\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: `\n\u901A\u8FC7 className \u5C5E\u6027\u548C\u5185\u7F6E\u7684\u8BED\u4E49\u5316\u7C7B\u540D\uFF0C\u53EF\u4EE5\u8F7B\u677E\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u6837\u5F0F\u3002\n\n### \u4F7F\u7528\u65B9\u5F0F\n\n1. **\u901A\u8FC7 className prop**: \u4F20\u5165\u81EA\u5B9A\u4E49\u7C7B\u540D\n2. **\u4F7F\u7528\u5185\u7F6E\u7C7B\u540D**: \u76F4\u63A5\u8986\u76D6\u5185\u7F6E\u7684\u8BED\u4E49\u5316\u7C7B\u540D\n\n### \u793A\u4F8B\u4EE3\u7801\n\n\\`\\`\\`tsx\n<InlineVideo\n  data={data}\n  className=\"custom-inline-video\"\n/>\n\\`\\`\\`\n\n\\`\\`\\`css\n/* \u81EA\u5B9A\u4E49\u6837\u5F0F */\n.custom-inline-video {\n  background: rgba(0, 0, 0, 0.5);\n  padding: 40px;\n  backdrop-filter: blur(10px);\n}\n\n.custom-inline-video .inline-video-title {\n  color: #00d4ff;\n  text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);\n}\n\n.custom-inline-video .inline-video-subtitle {\n  color: #ffd700;\n}\n\n.custom-inline-video .inline-video-container {\n  border: 2px solid rgba(255, 255, 255, 0.1);\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);\n}\n\\`\\`\\`\n\n\u6B64\u793A\u4F8B\u5C55\u793A\u4E86\u5982\u4F55\u901A\u8FC7\u7EC4\u5408 className prop \u548C\u5185\u7F6E\u7C7B\u540D\u6765\u5B9E\u73B0\u5B8C\u5168\u81EA\u5B9A\u4E49\u7684\u89C6\u89C9\u6548\u679C\u3002\n        `,\n      },\n    },\n  },\n  decorators: [\n    Story => (\n      <div>\n        <style>{`\n          .custom-inline-video {\n            background: rgba(0, 0, 0, 0.3);\n            padding: 40px;\n            backdrop-filter: blur(10px);\n          }\n\n          .custom-inline-video .inline-video-title {\n            color: #00d4ff !important;\n            text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);\n          }\n\n          .custom-inline-video .inline-video-subtitle {\n            color: #ffd700 !important;\n          }\n\n          .custom-inline-video .inline-video-description {\n            opacity: 0.9;\n            line-height: 1.8;\n          }\n\n          .custom-inline-video .inline-video-container {\n            border: 2px solid rgba(255, 255, 255, 0.1);\n                      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);\n          }\n        `}</style>\n        <Story />\n      </div>\n    ),\n  ],\n}\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "InlineVideo", "meta", "InlineVideo_stories_default", "defaultData", "Default", "WithoutSubtitle", "WithoutPosters", "LongDescription", "DarkTheme", "LightTheme", "CustomStyled", "Story"]
+}