[{"data":1,"prerenderedAt":3825},["ShallowReactive",2],{"reference":3,"content-query-lSP2MHLEu1":4,"sidebar-roots":3776,"$dNTcUNV7nV":3788},null,{"_path":5,"_dir":6,"_draft":7,"_partial":8,"_locale":9,"title":10,"description":9,"body":11,"_type":3770,"_id":3771,"_source":3772,"_file":3773,"_stem":3774,"_extension":3775,"layout":2477},"\u002F_components\u002Fthumbnail","_components",false,true,"","Thumbnail",{"type":12,"children":13,"toc":3758},"root",[14,22,3752],{"type":15,"tag":16,"props":17,"children":19},"element","h1",{"id":18},"thumbnail",[20],{"type":21,"value":10},"text",{"type":15,"tag":23,"props":24,"children":28},"tabs",{":titles":25,"className":26},"[\"Usage\", \"API\", \"Source Code\"]",[27],"mt-8",[29,2204,2483],{"type":15,"tag":30,"props":31,"children":32},"template",{"v-slot:tab-1":9},[33,55,62,69,111,805,811,824,1091,1097,1110,1376,1382,1390,1398,1790,1796,1804,1812,2193,2199],{"type":15,"tag":34,"props":35,"children":36},"p",{},[37,44,46,53],{"type":15,"tag":38,"props":39,"children":41},"code",{"className":40},[],[42],{"type":21,"value":43},"SfThumbnail",{"type":21,"value":45}," is a component that allows the user to display a color, gradient, icon, or image in a thumbnail style. One common use case from our ",{"type":15,"tag":47,"props":48,"children":50},"a",{"href":49},"..\u002Fblocks\u002FFilters.html",[51],{"type":21,"value":52},"blocks",{"type":21,"value":54}," is using this component as avatar or thumbnail for filters.",{"type":15,"tag":56,"props":57,"children":59},"h2",{"id":58},"examples",[60],{"type":21,"value":61},"Examples",{"type":15,"tag":63,"props":64,"children":66},"h3",{"id":65},"sizes",[67],{"type":21,"value":68},"Sizes",{"type":15,"tag":34,"props":70,"children":71},{},[72,74,80,82,88,90,96,97,103,105],{"type":21,"value":73},"Thumbnail supports various sizes that can be set with the ",{"type":15,"tag":38,"props":75,"children":77},{"className":76},[],[78],{"type":21,"value":79},"size",{"type":21,"value":81}," prop: ",{"type":15,"tag":38,"props":83,"children":85},{"className":84},[],[86],{"type":21,"value":87},"'sm'",{"type":21,"value":89},", ",{"type":15,"tag":38,"props":91,"children":93},{"className":92},[],[94],{"type":21,"value":95},"'base'",{"type":21,"value":89},{"type":15,"tag":38,"props":98,"children":100},{"className":99},[],[101],{"type":21,"value":102},"lg ",{"type":21,"value":104}," and ",{"type":15,"tag":38,"props":106,"children":108},{"className":107},[],[109],{"type":21,"value":110},"'xl'",{"type":15,"tag":112,"props":113,"children":115},"showcase",{"showcase-name":114},"Thumbnail\u002FSizes",[116,490],{"type":15,"tag":117,"props":118,"children":119},"vue-only",{},[120],{"type":15,"tag":121,"props":122,"children":126},"pre",{"className":123,"code":124,"language":125,"meta":9,"style":9},"language-vue shiki shiki-themes one-dark-pro","\u003Ctemplate>\n  \u003Cdiv class=\"flex items-center justify-around max-w-sm\">\n    \u003CSfThumbnail size=\"sm\" class=\"mr-2 bg-primary-500\" \u002F>\n    \u003CSfThumbnail size=\"base\" class=\"mr-2 bg-primary-500\" \u002F>\n    \u003CSfThumbnail size=\"lg\" class=\"mr-2 bg-primary-500\" \u002F>\n    \u003CSfThumbnail size=\"xl\" class=\"bg-primary-500\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript lang=\"ts\" setup>\nimport { SfThumbnail } from '@storefront-ui\u002Fvue';\n\u003C\u002Fscript>\n\n","vue",[127],{"type":15,"tag":38,"props":128,"children":129},{"__ignoreMap":9},[130,152,187,232,273,314,356,373,390,399,435,474],{"type":15,"tag":131,"props":132,"children":135},"span",{"class":133,"line":134},"line",1,[136,142,147],{"type":15,"tag":131,"props":137,"children":139},{"style":138},"--shiki-default:#ABB2BF",[140],{"type":21,"value":141},"\u003C",{"type":15,"tag":131,"props":143,"children":145},{"style":144},"--shiki-default:#E06C75",[146],{"type":21,"value":30},{"type":15,"tag":131,"props":148,"children":149},{"style":138},[150],{"type":21,"value":151},">\n",{"type":15,"tag":131,"props":153,"children":155},{"class":133,"line":154},2,[156,161,166,172,177,183],{"type":15,"tag":131,"props":157,"children":158},{"style":138},[159],{"type":21,"value":160},"  \u003C",{"type":15,"tag":131,"props":162,"children":163},{"style":144},[164],{"type":21,"value":165},"div",{"type":15,"tag":131,"props":167,"children":169},{"style":168},"--shiki-default:#D19A66",[170],{"type":21,"value":171}," class",{"type":15,"tag":131,"props":173,"children":174},{"style":138},[175],{"type":21,"value":176},"=",{"type":15,"tag":131,"props":178,"children":180},{"style":179},"--shiki-default:#98C379",[181],{"type":21,"value":182},"\"flex items-center justify-around max-w-sm\"",{"type":15,"tag":131,"props":184,"children":185},{"style":138},[186],{"type":21,"value":151},{"type":15,"tag":131,"props":188,"children":190},{"class":133,"line":189},3,[191,196,200,205,209,214,218,222,227],{"type":15,"tag":131,"props":192,"children":193},{"style":138},[194],{"type":21,"value":195},"    \u003C",{"type":15,"tag":131,"props":197,"children":198},{"style":144},[199],{"type":21,"value":43},{"type":15,"tag":131,"props":201,"children":202},{"style":168},[203],{"type":21,"value":204}," size",{"type":15,"tag":131,"props":206,"children":207},{"style":138},[208],{"type":21,"value":176},{"type":15,"tag":131,"props":210,"children":211},{"style":179},[212],{"type":21,"value":213},"\"sm\"",{"type":15,"tag":131,"props":215,"children":216},{"style":168},[217],{"type":21,"value":171},{"type":15,"tag":131,"props":219,"children":220},{"style":138},[221],{"type":21,"value":176},{"type":15,"tag":131,"props":223,"children":224},{"style":179},[225],{"type":21,"value":226},"\"mr-2 bg-primary-500\"",{"type":15,"tag":131,"props":228,"children":229},{"style":138},[230],{"type":21,"value":231}," \u002F>\n",{"type":15,"tag":131,"props":233,"children":235},{"class":133,"line":234},4,[236,240,244,248,252,257,261,265,269],{"type":15,"tag":131,"props":237,"children":238},{"style":138},[239],{"type":21,"value":195},{"type":15,"tag":131,"props":241,"children":242},{"style":144},[243],{"type":21,"value":43},{"type":15,"tag":131,"props":245,"children":246},{"style":168},[247],{"type":21,"value":204},{"type":15,"tag":131,"props":249,"children":250},{"style":138},[251],{"type":21,"value":176},{"type":15,"tag":131,"props":253,"children":254},{"style":179},[255],{"type":21,"value":256},"\"base\"",{"type":15,"tag":131,"props":258,"children":259},{"style":168},[260],{"type":21,"value":171},{"type":15,"tag":131,"props":262,"children":263},{"style":138},[264],{"type":21,"value":176},{"type":15,"tag":131,"props":266,"children":267},{"style":179},[268],{"type":21,"value":226},{"type":15,"tag":131,"props":270,"children":271},{"style":138},[272],{"type":21,"value":231},{"type":15,"tag":131,"props":274,"children":276},{"class":133,"line":275},5,[277,281,285,289,293,298,302,306,310],{"type":15,"tag":131,"props":278,"children":279},{"style":138},[280],{"type":21,"value":195},{"type":15,"tag":131,"props":282,"children":283},{"style":144},[284],{"type":21,"value":43},{"type":15,"tag":131,"props":286,"children":287},{"style":168},[288],{"type":21,"value":204},{"type":15,"tag":131,"props":290,"children":291},{"style":138},[292],{"type":21,"value":176},{"type":15,"tag":131,"props":294,"children":295},{"style":179},[296],{"type":21,"value":297},"\"lg\"",{"type":15,"tag":131,"props":299,"children":300},{"style":168},[301],{"type":21,"value":171},{"type":15,"tag":131,"props":303,"children":304},{"style":138},[305],{"type":21,"value":176},{"type":15,"tag":131,"props":307,"children":308},{"style":179},[309],{"type":21,"value":226},{"type":15,"tag":131,"props":311,"children":312},{"style":138},[313],{"type":21,"value":231},{"type":15,"tag":131,"props":315,"children":317},{"class":133,"line":316},6,[318,322,326,330,334,339,343,347,352],{"type":15,"tag":131,"props":319,"children":320},{"style":138},[321],{"type":21,"value":195},{"type":15,"tag":131,"props":323,"children":324},{"style":144},[325],{"type":21,"value":43},{"type":15,"tag":131,"props":327,"children":328},{"style":168},[329],{"type":21,"value":204},{"type":15,"tag":131,"props":331,"children":332},{"style":138},[333],{"type":21,"value":176},{"type":15,"tag":131,"props":335,"children":336},{"style":179},[337],{"type":21,"value":338},"\"xl\"",{"type":15,"tag":131,"props":340,"children":341},{"style":168},[342],{"type":21,"value":171},{"type":15,"tag":131,"props":344,"children":345},{"style":138},[346],{"type":21,"value":176},{"type":15,"tag":131,"props":348,"children":349},{"style":179},[350],{"type":21,"value":351},"\"bg-primary-500\"",{"type":15,"tag":131,"props":353,"children":354},{"style":138},[355],{"type":21,"value":231},{"type":15,"tag":131,"props":357,"children":359},{"class":133,"line":358},7,[360,365,369],{"type":15,"tag":131,"props":361,"children":362},{"style":138},[363],{"type":21,"value":364},"  \u003C\u002F",{"type":15,"tag":131,"props":366,"children":367},{"style":144},[368],{"type":21,"value":165},{"type":15,"tag":131,"props":370,"children":371},{"style":138},[372],{"type":21,"value":151},{"type":15,"tag":131,"props":374,"children":376},{"class":133,"line":375},8,[377,382,386],{"type":15,"tag":131,"props":378,"children":379},{"style":138},[380],{"type":21,"value":381},"\u003C\u002F",{"type":15,"tag":131,"props":383,"children":384},{"style":144},[385],{"type":21,"value":30},{"type":15,"tag":131,"props":387,"children":388},{"style":138},[389],{"type":21,"value":151},{"type":15,"tag":131,"props":391,"children":393},{"class":133,"line":392},9,[394],{"type":15,"tag":131,"props":395,"children":396},{"emptyLinePlaceholder":8},[397],{"type":21,"value":398},"\n",{"type":15,"tag":131,"props":400,"children":402},{"class":133,"line":401},10,[403,407,412,417,421,426,431],{"type":15,"tag":131,"props":404,"children":405},{"style":138},[406],{"type":21,"value":141},{"type":15,"tag":131,"props":408,"children":409},{"style":144},[410],{"type":21,"value":411},"script",{"type":15,"tag":131,"props":413,"children":414},{"style":168},[415],{"type":21,"value":416}," lang",{"type":15,"tag":131,"props":418,"children":419},{"style":138},[420],{"type":21,"value":176},{"type":15,"tag":131,"props":422,"children":423},{"style":179},[424],{"type":21,"value":425},"\"ts\"",{"type":15,"tag":131,"props":427,"children":428},{"style":168},[429],{"type":21,"value":430}," setup",{"type":15,"tag":131,"props":432,"children":433},{"style":138},[434],{"type":21,"value":151},{"type":15,"tag":131,"props":436,"children":438},{"class":133,"line":437},11,[439,445,450,454,459,464,469],{"type":15,"tag":131,"props":440,"children":442},{"style":441},"--shiki-default:#C678DD",[443],{"type":21,"value":444},"import",{"type":15,"tag":131,"props":446,"children":447},{"style":138},[448],{"type":21,"value":449}," { ",{"type":15,"tag":131,"props":451,"children":452},{"style":144},[453],{"type":21,"value":43},{"type":15,"tag":131,"props":455,"children":456},{"style":138},[457],{"type":21,"value":458}," } ",{"type":15,"tag":131,"props":460,"children":461},{"style":441},[462],{"type":21,"value":463},"from",{"type":15,"tag":131,"props":465,"children":466},{"style":179},[467],{"type":21,"value":468}," '@storefront-ui\u002Fvue'",{"type":15,"tag":131,"props":470,"children":471},{"style":138},[472],{"type":21,"value":473},";\n",{"type":15,"tag":131,"props":475,"children":477},{"class":133,"line":476},12,[478,482,486],{"type":15,"tag":131,"props":479,"children":480},{"style":138},[481],{"type":21,"value":381},{"type":15,"tag":131,"props":483,"children":484},{"style":144},[485],{"type":21,"value":411},{"type":15,"tag":131,"props":487,"children":488},{"style":138},[489],{"type":21,"value":151},{"type":15,"tag":491,"props":492,"children":493},"react-only",{},[494],{"type":15,"tag":121,"props":495,"children":499},{"className":496,"code":497,"language":498,"meta":9,"style":9},"language-tsx shiki shiki-themes one-dark-pro","import { SfThumbnail } from '@storefront-ui\u002Freact';\n\nexport default function ThumbnailSizes() {\n  return (\n    \u003Cdiv className=\"flex items-center justify-around max-w-sm\">\n      \u003CSfThumbnail size=\"sm\" className=\"bg-primary-500 mr-2\" \u002F>\n      \u003CSfThumbnail size=\"base\" className=\"bg-primary-500 mr-2\" \u002F>\n      \u003CSfThumbnail size=\"lg\" className=\"bg-primary-500 mr-2\" \u002F>\n      \u003CSfThumbnail size=\"xl\" className=\"bg-primary-500\" \u002F>\n    \u003C\u002Fdiv>\n  );\n}\n","tsx",[500],{"type":15,"tag":38,"props":501,"children":502},{"__ignoreMap":9},[503,535,542,571,584,614,656,695,734,773,789,797],{"type":15,"tag":131,"props":504,"children":505},{"class":133,"line":134},[506,510,514,518,522,526,531],{"type":15,"tag":131,"props":507,"children":508},{"style":441},[509],{"type":21,"value":444},{"type":15,"tag":131,"props":511,"children":512},{"style":138},[513],{"type":21,"value":449},{"type":15,"tag":131,"props":515,"children":516},{"style":144},[517],{"type":21,"value":43},{"type":15,"tag":131,"props":519,"children":520},{"style":138},[521],{"type":21,"value":458},{"type":15,"tag":131,"props":523,"children":524},{"style":441},[525],{"type":21,"value":463},{"type":15,"tag":131,"props":527,"children":528},{"style":179},[529],{"type":21,"value":530}," '@storefront-ui\u002Freact'",{"type":15,"tag":131,"props":532,"children":533},{"style":138},[534],{"type":21,"value":473},{"type":15,"tag":131,"props":536,"children":537},{"class":133,"line":154},[538],{"type":15,"tag":131,"props":539,"children":540},{"emptyLinePlaceholder":8},[541],{"type":21,"value":398},{"type":15,"tag":131,"props":543,"children":544},{"class":133,"line":189},[545,550,555,560,566],{"type":15,"tag":131,"props":546,"children":547},{"style":441},[548],{"type":21,"value":549},"export",{"type":15,"tag":131,"props":551,"children":552},{"style":441},[553],{"type":21,"value":554}," default",{"type":15,"tag":131,"props":556,"children":557},{"style":441},[558],{"type":21,"value":559}," function",{"type":15,"tag":131,"props":561,"children":563},{"style":562},"--shiki-default:#61AFEF",[564],{"type":21,"value":565}," ThumbnailSizes",{"type":15,"tag":131,"props":567,"children":568},{"style":138},[569],{"type":21,"value":570},"() {\n",{"type":15,"tag":131,"props":572,"children":573},{"class":133,"line":234},[574,579],{"type":15,"tag":131,"props":575,"children":576},{"style":441},[577],{"type":21,"value":578},"  return",{"type":15,"tag":131,"props":580,"children":581},{"style":138},[582],{"type":21,"value":583}," (\n",{"type":15,"tag":131,"props":585,"children":586},{"class":133,"line":275},[587,591,595,601,606,610],{"type":15,"tag":131,"props":588,"children":589},{"style":138},[590],{"type":21,"value":195},{"type":15,"tag":131,"props":592,"children":593},{"style":144},[594],{"type":21,"value":165},{"type":15,"tag":131,"props":596,"children":598},{"style":597},"--shiki-default:#D19A66;--shiki-default-font-style:italic",[599],{"type":21,"value":600}," className",{"type":15,"tag":131,"props":602,"children":604},{"style":603},"--shiki-default:#56B6C2",[605],{"type":21,"value":176},{"type":15,"tag":131,"props":607,"children":608},{"style":179},[609],{"type":21,"value":182},{"type":15,"tag":131,"props":611,"children":612},{"style":138},[613],{"type":21,"value":151},{"type":15,"tag":131,"props":615,"children":616},{"class":133,"line":316},[617,622,627,631,635,639,643,647,652],{"type":15,"tag":131,"props":618,"children":619},{"style":138},[620],{"type":21,"value":621},"      \u003C",{"type":15,"tag":131,"props":623,"children":625},{"style":624},"--shiki-default:#E5C07B",[626],{"type":21,"value":43},{"type":15,"tag":131,"props":628,"children":629},{"style":597},[630],{"type":21,"value":204},{"type":15,"tag":131,"props":632,"children":633},{"style":603},[634],{"type":21,"value":176},{"type":15,"tag":131,"props":636,"children":637},{"style":179},[638],{"type":21,"value":213},{"type":15,"tag":131,"props":640,"children":641},{"style":597},[642],{"type":21,"value":600},{"type":15,"tag":131,"props":644,"children":645},{"style":603},[646],{"type":21,"value":176},{"type":15,"tag":131,"props":648,"children":649},{"style":179},[650],{"type":21,"value":651},"\"bg-primary-500 mr-2\"",{"type":15,"tag":131,"props":653,"children":654},{"style":138},[655],{"type":21,"value":231},{"type":15,"tag":131,"props":657,"children":658},{"class":133,"line":358},[659,663,667,671,675,679,683,687,691],{"type":15,"tag":131,"props":660,"children":661},{"style":138},[662],{"type":21,"value":621},{"type":15,"tag":131,"props":664,"children":665},{"style":624},[666],{"type":21,"value":43},{"type":15,"tag":131,"props":668,"children":669},{"style":597},[670],{"type":21,"value":204},{"type":15,"tag":131,"props":672,"children":673},{"style":603},[674],{"type":21,"value":176},{"type":15,"tag":131,"props":676,"children":677},{"style":179},[678],{"type":21,"value":256},{"type":15,"tag":131,"props":680,"children":681},{"style":597},[682],{"type":21,"value":600},{"type":15,"tag":131,"props":684,"children":685},{"style":603},[686],{"type":21,"value":176},{"type":15,"tag":131,"props":688,"children":689},{"style":179},[690],{"type":21,"value":651},{"type":15,"tag":131,"props":692,"children":693},{"style":138},[694],{"type":21,"value":231},{"type":15,"tag":131,"props":696,"children":697},{"class":133,"line":375},[698,702,706,710,714,718,722,726,730],{"type":15,"tag":131,"props":699,"children":700},{"style":138},[701],{"type":21,"value":621},{"type":15,"tag":131,"props":703,"children":704},{"style":624},[705],{"type":21,"value":43},{"type":15,"tag":131,"props":707,"children":708},{"style":597},[709],{"type":21,"value":204},{"type":15,"tag":131,"props":711,"children":712},{"style":603},[713],{"type":21,"value":176},{"type":15,"tag":131,"props":715,"children":716},{"style":179},[717],{"type":21,"value":297},{"type":15,"tag":131,"props":719,"children":720},{"style":597},[721],{"type":21,"value":600},{"type":15,"tag":131,"props":723,"children":724},{"style":603},[725],{"type":21,"value":176},{"type":15,"tag":131,"props":727,"children":728},{"style":179},[729],{"type":21,"value":651},{"type":15,"tag":131,"props":731,"children":732},{"style":138},[733],{"type":21,"value":231},{"type":15,"tag":131,"props":735,"children":736},{"class":133,"line":392},[737,741,745,749,753,757,761,765,769],{"type":15,"tag":131,"props":738,"children":739},{"style":138},[740],{"type":21,"value":621},{"type":15,"tag":131,"props":742,"children":743},{"style":624},[744],{"type":21,"value":43},{"type":15,"tag":131,"props":746,"children":747},{"style":597},[748],{"type":21,"value":204},{"type":15,"tag":131,"props":750,"children":751},{"style":603},[752],{"type":21,"value":176},{"type":15,"tag":131,"props":754,"children":755},{"style":179},[756],{"type":21,"value":338},{"type":15,"tag":131,"props":758,"children":759},{"style":597},[760],{"type":21,"value":600},{"type":15,"tag":131,"props":762,"children":763},{"style":603},[764],{"type":21,"value":176},{"type":15,"tag":131,"props":766,"children":767},{"style":179},[768],{"type":21,"value":351},{"type":15,"tag":131,"props":770,"children":771},{"style":138},[772],{"type":21,"value":231},{"type":15,"tag":131,"props":774,"children":775},{"class":133,"line":401},[776,781,785],{"type":15,"tag":131,"props":777,"children":778},{"style":138},[779],{"type":21,"value":780},"    \u003C\u002F",{"type":15,"tag":131,"props":782,"children":783},{"style":144},[784],{"type":21,"value":165},{"type":15,"tag":131,"props":786,"children":787},{"style":138},[788],{"type":21,"value":151},{"type":15,"tag":131,"props":790,"children":791},{"class":133,"line":437},[792],{"type":15,"tag":131,"props":793,"children":794},{"style":138},[795],{"type":21,"value":796},"  );\n",{"type":15,"tag":131,"props":798,"children":799},{"class":133,"line":476},[800],{"type":15,"tag":131,"props":801,"children":802},{"style":138},[803],{"type":21,"value":804},"}\n",{"type":15,"tag":63,"props":806,"children":808},{"id":807},"single-color",[809],{"type":21,"value":810},"Single color",{"type":15,"tag":34,"props":812,"children":813},{},[814,816,822],{"type":21,"value":815},"The most simple use case of thumbnail can be achieved by seting a single color with any of Tailwind's background ",{"type":15,"tag":38,"props":817,"children":819},{"className":818},[],[820],{"type":21,"value":821},"bg-",{"type":21,"value":823}," property.",{"type":15,"tag":112,"props":825,"children":827},{"showcase-name":826},"Thumbnail\u002FColor",[828,979],{"type":15,"tag":117,"props":829,"children":830},{},[831],{"type":15,"tag":121,"props":832,"children":834},{"className":123,"code":833,"language":125,"meta":9,"style":9},"\u003Ctemplate>\n  \u003CSfThumbnail class=\"bg-primary-500\" \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cscript lang=\"ts\" setup>\nimport { SfThumbnail } from '@storefront-ui\u002Fvue';\n\u003C\u002Fscript>\n\n",[835],{"type":15,"tag":38,"props":836,"children":837},{"__ignoreMap":9},[838,853,880,895,902,933,964],{"type":15,"tag":131,"props":839,"children":840},{"class":133,"line":134},[841,845,849],{"type":15,"tag":131,"props":842,"children":843},{"style":138},[844],{"type":21,"value":141},{"type":15,"tag":131,"props":846,"children":847},{"style":144},[848],{"type":21,"value":30},{"type":15,"tag":131,"props":850,"children":851},{"style":138},[852],{"type":21,"value":151},{"type":15,"tag":131,"props":854,"children":855},{"class":133,"line":154},[856,860,864,868,872,876],{"type":15,"tag":131,"props":857,"children":858},{"style":138},[859],{"type":21,"value":160},{"type":15,"tag":131,"props":861,"children":862},{"style":144},[863],{"type":21,"value":43},{"type":15,"tag":131,"props":865,"children":866},{"style":168},[867],{"type":21,"value":171},{"type":15,"tag":131,"props":869,"children":870},{"style":138},[871],{"type":21,"value":176},{"type":15,"tag":131,"props":873,"children":874},{"style":179},[875],{"type":21,"value":351},{"type":15,"tag":131,"props":877,"children":878},{"style":138},[879],{"type":21,"value":231},{"type":15,"tag":131,"props":881,"children":882},{"class":133,"line":189},[883,887,891],{"type":15,"tag":131,"props":884,"children":885},{"style":138},[886],{"type":21,"value":381},{"type":15,"tag":131,"props":888,"children":889},{"style":144},[890],{"type":21,"value":30},{"type":15,"tag":131,"props":892,"children":893},{"style":138},[894],{"type":21,"value":151},{"type":15,"tag":131,"props":896,"children":897},{"class":133,"line":234},[898],{"type":15,"tag":131,"props":899,"children":900},{"emptyLinePlaceholder":8},[901],{"type":21,"value":398},{"type":15,"tag":131,"props":903,"children":904},{"class":133,"line":275},[905,909,913,917,921,925,929],{"type":15,"tag":131,"props":906,"children":907},{"style":138},[908],{"type":21,"value":141},{"type":15,"tag":131,"props":910,"children":911},{"style":144},[912],{"type":21,"value":411},{"type":15,"tag":131,"props":914,"children":915},{"style":168},[916],{"type":21,"value":416},{"type":15,"tag":131,"props":918,"children":919},{"style":138},[920],{"type":21,"value":176},{"type":15,"tag":131,"props":922,"children":923},{"style":179},[924],{"type":21,"value":425},{"type":15,"tag":131,"props":926,"children":927},{"style":168},[928],{"type":21,"value":430},{"type":15,"tag":131,"props":930,"children":931},{"style":138},[932],{"type":21,"value":151},{"type":15,"tag":131,"props":934,"children":935},{"class":133,"line":316},[936,940,944,948,952,956,960],{"type":15,"tag":131,"props":937,"children":938},{"style":441},[939],{"type":21,"value":444},{"type":15,"tag":131,"props":941,"children":942},{"style":138},[943],{"type":21,"value":449},{"type":15,"tag":131,"props":945,"children":946},{"style":144},[947],{"type":21,"value":43},{"type":15,"tag":131,"props":949,"children":950},{"style":138},[951],{"type":21,"value":458},{"type":15,"tag":131,"props":953,"children":954},{"style":441},[955],{"type":21,"value":463},{"type":15,"tag":131,"props":957,"children":958},{"style":179},[959],{"type":21,"value":468},{"type":15,"tag":131,"props":961,"children":962},{"style":138},[963],{"type":21,"value":473},{"type":15,"tag":131,"props":965,"children":966},{"class":133,"line":358},[967,971,975],{"type":15,"tag":131,"props":968,"children":969},{"style":138},[970],{"type":21,"value":381},{"type":15,"tag":131,"props":972,"children":973},{"style":144},[974],{"type":21,"value":411},{"type":15,"tag":131,"props":976,"children":977},{"style":138},[978],{"type":21,"value":151},{"type":15,"tag":491,"props":980,"children":981},{},[982],{"type":15,"tag":121,"props":983,"children":985},{"className":496,"code":984,"language":498,"meta":9,"style":9},"import { SfThumbnail } from '@storefront-ui\u002Freact';\n\nexport default function ThumbnailColor() {\n  return \u003CSfThumbnail className=\"bg-primary-500\" \u002F>;\n}\n",[986],{"type":15,"tag":38,"props":987,"children":988},{"__ignoreMap":9},[989,1020,1027,1051,1084],{"type":15,"tag":131,"props":990,"children":991},{"class":133,"line":134},[992,996,1000,1004,1008,1012,1016],{"type":15,"tag":131,"props":993,"children":994},{"style":441},[995],{"type":21,"value":444},{"type":15,"tag":131,"props":997,"children":998},{"style":138},[999],{"type":21,"value":449},{"type":15,"tag":131,"props":1001,"children":1002},{"style":144},[1003],{"type":21,"value":43},{"type":15,"tag":131,"props":1005,"children":1006},{"style":138},[1007],{"type":21,"value":458},{"type":15,"tag":131,"props":1009,"children":1010},{"style":441},[1011],{"type":21,"value":463},{"type":15,"tag":131,"props":1013,"children":1014},{"style":179},[1015],{"type":21,"value":530},{"type":15,"tag":131,"props":1017,"children":1018},{"style":138},[1019],{"type":21,"value":473},{"type":15,"tag":131,"props":1021,"children":1022},{"class":133,"line":154},[1023],{"type":15,"tag":131,"props":1024,"children":1025},{"emptyLinePlaceholder":8},[1026],{"type":21,"value":398},{"type":15,"tag":131,"props":1028,"children":1029},{"class":133,"line":189},[1030,1034,1038,1042,1047],{"type":15,"tag":131,"props":1031,"children":1032},{"style":441},[1033],{"type":21,"value":549},{"type":15,"tag":131,"props":1035,"children":1036},{"style":441},[1037],{"type":21,"value":554},{"type":15,"tag":131,"props":1039,"children":1040},{"style":441},[1041],{"type":21,"value":559},{"type":15,"tag":131,"props":1043,"children":1044},{"style":562},[1045],{"type":21,"value":1046}," ThumbnailColor",{"type":15,"tag":131,"props":1048,"children":1049},{"style":138},[1050],{"type":21,"value":570},{"type":15,"tag":131,"props":1052,"children":1053},{"class":133,"line":234},[1054,1058,1063,1067,1071,1075,1079],{"type":15,"tag":131,"props":1055,"children":1056},{"style":441},[1057],{"type":21,"value":578},{"type":15,"tag":131,"props":1059,"children":1060},{"style":138},[1061],{"type":21,"value":1062}," \u003C",{"type":15,"tag":131,"props":1064,"children":1065},{"style":624},[1066],{"type":21,"value":43},{"type":15,"tag":131,"props":1068,"children":1069},{"style":597},[1070],{"type":21,"value":600},{"type":15,"tag":131,"props":1072,"children":1073},{"style":603},[1074],{"type":21,"value":176},{"type":15,"tag":131,"props":1076,"children":1077},{"style":179},[1078],{"type":21,"value":351},{"type":15,"tag":131,"props":1080,"children":1081},{"style":138},[1082],{"type":21,"value":1083}," \u002F>;\n",{"type":15,"tag":131,"props":1085,"children":1086},{"class":133,"line":275},[1087],{"type":15,"tag":131,"props":1088,"children":1089},{"style":138},[1090],{"type":21,"value":804},{"type":15,"tag":63,"props":1092,"children":1094},{"id":1093},"gradient",[1095],{"type":21,"value":1096},"Gradient",{"type":15,"tag":34,"props":1098,"children":1099},{},[1100,1102,1108],{"type":21,"value":1101},"Gradients can be applied with any of Tailwind's ",{"type":15,"tag":38,"props":1103,"children":1105},{"className":1104},[],[1106],{"type":21,"value":1107},"bg-gradient-",{"type":21,"value":1109}," classes.",{"type":15,"tag":112,"props":1111,"children":1113},{"showcase-name":1112},"Thumbnail\u002FGradient",[1114,1266],{"type":15,"tag":117,"props":1115,"children":1116},{},[1117],{"type":15,"tag":121,"props":1118,"children":1120},{"className":123,"code":1119,"language":125,"meta":9,"style":9},"\u003Ctemplate>\n  \u003CSfThumbnail class=\"bg-gradient-to-tr from-[#4ADE80] to-[#A78BFA]\" \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cscript lang=\"ts\" setup>\nimport { SfThumbnail } from '@storefront-ui\u002Fvue';\n\u003C\u002Fscript>\n\n",[1121],{"type":15,"tag":38,"props":1122,"children":1123},{"__ignoreMap":9},[1124,1139,1167,1182,1189,1220,1251],{"type":15,"tag":131,"props":1125,"children":1126},{"class":133,"line":134},[1127,1131,1135],{"type":15,"tag":131,"props":1128,"children":1129},{"style":138},[1130],{"type":21,"value":141},{"type":15,"tag":131,"props":1132,"children":1133},{"style":144},[1134],{"type":21,"value":30},{"type":15,"tag":131,"props":1136,"children":1137},{"style":138},[1138],{"type":21,"value":151},{"type":15,"tag":131,"props":1140,"children":1141},{"class":133,"line":154},[1142,1146,1150,1154,1158,1163],{"type":15,"tag":131,"props":1143,"children":1144},{"style":138},[1145],{"type":21,"value":160},{"type":15,"tag":131,"props":1147,"children":1148},{"style":144},[1149],{"type":21,"value":43},{"type":15,"tag":131,"props":1151,"children":1152},{"style":168},[1153],{"type":21,"value":171},{"type":15,"tag":131,"props":1155,"children":1156},{"style":138},[1157],{"type":21,"value":176},{"type":15,"tag":131,"props":1159,"children":1160},{"style":179},[1161],{"type":21,"value":1162},"\"bg-gradient-to-tr from-[#4ADE80] to-[#A78BFA]\"",{"type":15,"tag":131,"props":1164,"children":1165},{"style":138},[1166],{"type":21,"value":231},{"type":15,"tag":131,"props":1168,"children":1169},{"class":133,"line":189},[1170,1174,1178],{"type":15,"tag":131,"props":1171,"children":1172},{"style":138},[1173],{"type":21,"value":381},{"type":15,"tag":131,"props":1175,"children":1176},{"style":144},[1177],{"type":21,"value":30},{"type":15,"tag":131,"props":1179,"children":1180},{"style":138},[1181],{"type":21,"value":151},{"type":15,"tag":131,"props":1183,"children":1184},{"class":133,"line":234},[1185],{"type":15,"tag":131,"props":1186,"children":1187},{"emptyLinePlaceholder":8},[1188],{"type":21,"value":398},{"type":15,"tag":131,"props":1190,"children":1191},{"class":133,"line":275},[1192,1196,1200,1204,1208,1212,1216],{"type":15,"tag":131,"props":1193,"children":1194},{"style":138},[1195],{"type":21,"value":141},{"type":15,"tag":131,"props":1197,"children":1198},{"style":144},[1199],{"type":21,"value":411},{"type":15,"tag":131,"props":1201,"children":1202},{"style":168},[1203],{"type":21,"value":416},{"type":15,"tag":131,"props":1205,"children":1206},{"style":138},[1207],{"type":21,"value":176},{"type":15,"tag":131,"props":1209,"children":1210},{"style":179},[1211],{"type":21,"value":425},{"type":15,"tag":131,"props":1213,"children":1214},{"style":168},[1215],{"type":21,"value":430},{"type":15,"tag":131,"props":1217,"children":1218},{"style":138},[1219],{"type":21,"value":151},{"type":15,"tag":131,"props":1221,"children":1222},{"class":133,"line":316},[1223,1227,1231,1235,1239,1243,1247],{"type":15,"tag":131,"props":1224,"children":1225},{"style":441},[1226],{"type":21,"value":444},{"type":15,"tag":131,"props":1228,"children":1229},{"style":138},[1230],{"type":21,"value":449},{"type":15,"tag":131,"props":1232,"children":1233},{"style":144},[1234],{"type":21,"value":43},{"type":15,"tag":131,"props":1236,"children":1237},{"style":138},[1238],{"type":21,"value":458},{"type":15,"tag":131,"props":1240,"children":1241},{"style":441},[1242],{"type":21,"value":463},{"type":15,"tag":131,"props":1244,"children":1245},{"style":179},[1246],{"type":21,"value":468},{"type":15,"tag":131,"props":1248,"children":1249},{"style":138},[1250],{"type":21,"value":473},{"type":15,"tag":131,"props":1252,"children":1253},{"class":133,"line":358},[1254,1258,1262],{"type":15,"tag":131,"props":1255,"children":1256},{"style":138},[1257],{"type":21,"value":381},{"type":15,"tag":131,"props":1259,"children":1260},{"style":144},[1261],{"type":21,"value":411},{"type":15,"tag":131,"props":1263,"children":1264},{"style":138},[1265],{"type":21,"value":151},{"type":15,"tag":491,"props":1267,"children":1268},{},[1269],{"type":15,"tag":121,"props":1270,"children":1272},{"className":496,"code":1271,"language":498,"meta":9,"style":9},"import { SfThumbnail } from '@storefront-ui\u002Freact';\n\nexport default function ThumbnailGradient() {\n  return \u003CSfThumbnail className=\"bg-gradient-to-tr from-[#4ADE80] to-[#A78BFA]\" \u002F>;\n}\n",[1273],{"type":15,"tag":38,"props":1274,"children":1275},{"__ignoreMap":9},[1276,1307,1314,1338,1369],{"type":15,"tag":131,"props":1277,"children":1278},{"class":133,"line":134},[1279,1283,1287,1291,1295,1299,1303],{"type":15,"tag":131,"props":1280,"children":1281},{"style":441},[1282],{"type":21,"value":444},{"type":15,"tag":131,"props":1284,"children":1285},{"style":138},[1286],{"type":21,"value":449},{"type":15,"tag":131,"props":1288,"children":1289},{"style":144},[1290],{"type":21,"value":43},{"type":15,"tag":131,"props":1292,"children":1293},{"style":138},[1294],{"type":21,"value":458},{"type":15,"tag":131,"props":1296,"children":1297},{"style":441},[1298],{"type":21,"value":463},{"type":15,"tag":131,"props":1300,"children":1301},{"style":179},[1302],{"type":21,"value":530},{"type":15,"tag":131,"props":1304,"children":1305},{"style":138},[1306],{"type":21,"value":473},{"type":15,"tag":131,"props":1308,"children":1309},{"class":133,"line":154},[1310],{"type":15,"tag":131,"props":1311,"children":1312},{"emptyLinePlaceholder":8},[1313],{"type":21,"value":398},{"type":15,"tag":131,"props":1315,"children":1316},{"class":133,"line":189},[1317,1321,1325,1329,1334],{"type":15,"tag":131,"props":1318,"children":1319},{"style":441},[1320],{"type":21,"value":549},{"type":15,"tag":131,"props":1322,"children":1323},{"style":441},[1324],{"type":21,"value":554},{"type":15,"tag":131,"props":1326,"children":1327},{"style":441},[1328],{"type":21,"value":559},{"type":15,"tag":131,"props":1330,"children":1331},{"style":562},[1332],{"type":21,"value":1333}," ThumbnailGradient",{"type":15,"tag":131,"props":1335,"children":1336},{"style":138},[1337],{"type":21,"value":570},{"type":15,"tag":131,"props":1339,"children":1340},{"class":133,"line":234},[1341,1345,1349,1353,1357,1361,1365],{"type":15,"tag":131,"props":1342,"children":1343},{"style":441},[1344],{"type":21,"value":578},{"type":15,"tag":131,"props":1346,"children":1347},{"style":138},[1348],{"type":21,"value":1062},{"type":15,"tag":131,"props":1350,"children":1351},{"style":624},[1352],{"type":21,"value":43},{"type":15,"tag":131,"props":1354,"children":1355},{"style":597},[1356],{"type":21,"value":600},{"type":15,"tag":131,"props":1358,"children":1359},{"style":603},[1360],{"type":21,"value":176},{"type":15,"tag":131,"props":1362,"children":1363},{"style":179},[1364],{"type":21,"value":1162},{"type":15,"tag":131,"props":1366,"children":1367},{"style":138},[1368],{"type":21,"value":1083},{"type":15,"tag":131,"props":1370,"children":1371},{"class":133,"line":275},[1372],{"type":15,"tag":131,"props":1373,"children":1374},{"style":138},[1375],{"type":21,"value":804},{"type":15,"tag":63,"props":1377,"children":1379},{"id":1378},"image",[1380],{"type":21,"value":1381},"Image",{"type":15,"tag":117,"props":1383,"children":1384},{},[1385],{"type":15,"tag":34,"props":1386,"children":1387},{},[1388],{"type":21,"value":1389},"You can pass an image into the default slot to achieve avatar-like look of thumbnail.",{"type":15,"tag":491,"props":1391,"children":1392},{},[1393],{"type":15,"tag":34,"props":1394,"children":1395},{},[1396],{"type":21,"value":1397},"You can pass an image as children to achieve avatar-like look of thumbnail.",{"type":15,"tag":112,"props":1399,"children":1401},{"showcase-name":1400},"Thumbnail\u002FImage",[1402,1612],{"type":15,"tag":117,"props":1403,"children":1404},{},[1405],{"type":15,"tag":121,"props":1406,"children":1408},{"className":123,"code":1407,"language":125,"meta":9,"style":9},"\u003Ctemplate>\n  \u003CSfThumbnail size=\"xl\">\n    \u003Cimg src=\"https:\u002F\u002Fstorage.googleapis.com\u002Fsfui_docs_artifacts_bucket_public\u002Fdevelop\u002Fcard.png\" alt=\"Thumbnail avatar\" \u002F>\n  \u003C\u002FSfThumbnail>\n\u003C\u002Ftemplate>\n\n\u003Cscript lang=\"ts\" setup>\nimport { SfThumbnail } from '@storefront-ui\u002Fvue';\n\u003C\u002Fscript>\n\n",[1409],{"type":15,"tag":38,"props":1410,"children":1411},{"__ignoreMap":9},[1412,1427,1454,1498,1513,1528,1535,1566,1597],{"type":15,"tag":131,"props":1413,"children":1414},{"class":133,"line":134},[1415,1419,1423],{"type":15,"tag":131,"props":1416,"children":1417},{"style":138},[1418],{"type":21,"value":141},{"type":15,"tag":131,"props":1420,"children":1421},{"style":144},[1422],{"type":21,"value":30},{"type":15,"tag":131,"props":1424,"children":1425},{"style":138},[1426],{"type":21,"value":151},{"type":15,"tag":131,"props":1428,"children":1429},{"class":133,"line":154},[1430,1434,1438,1442,1446,1450],{"type":15,"tag":131,"props":1431,"children":1432},{"style":138},[1433],{"type":21,"value":160},{"type":15,"tag":131,"props":1435,"children":1436},{"style":144},[1437],{"type":21,"value":43},{"type":15,"tag":131,"props":1439,"children":1440},{"style":168},[1441],{"type":21,"value":204},{"type":15,"tag":131,"props":1443,"children":1444},{"style":138},[1445],{"type":21,"value":176},{"type":15,"tag":131,"props":1447,"children":1448},{"style":179},[1449],{"type":21,"value":338},{"type":15,"tag":131,"props":1451,"children":1452},{"style":138},[1453],{"type":21,"value":151},{"type":15,"tag":131,"props":1455,"children":1456},{"class":133,"line":189},[1457,1461,1466,1471,1475,1480,1485,1489,1494],{"type":15,"tag":131,"props":1458,"children":1459},{"style":138},[1460],{"type":21,"value":195},{"type":15,"tag":131,"props":1462,"children":1463},{"style":144},[1464],{"type":21,"value":1465},"img",{"type":15,"tag":131,"props":1467,"children":1468},{"style":168},[1469],{"type":21,"value":1470}," src",{"type":15,"tag":131,"props":1472,"children":1473},{"style":138},[1474],{"type":21,"value":176},{"type":15,"tag":131,"props":1476,"children":1477},{"style":179},[1478],{"type":21,"value":1479},"\"https:\u002F\u002Fstorage.googleapis.com\u002Fsfui_docs_artifacts_bucket_public\u002Fdevelop\u002Fcard.png\"",{"type":15,"tag":131,"props":1481,"children":1482},{"style":168},[1483],{"type":21,"value":1484}," alt",{"type":15,"tag":131,"props":1486,"children":1487},{"style":138},[1488],{"type":21,"value":176},{"type":15,"tag":131,"props":1490,"children":1491},{"style":179},[1492],{"type":21,"value":1493},"\"Thumbnail avatar\"",{"type":15,"tag":131,"props":1495,"children":1496},{"style":138},[1497],{"type":21,"value":231},{"type":15,"tag":131,"props":1499,"children":1500},{"class":133,"line":234},[1501,1505,1509],{"type":15,"tag":131,"props":1502,"children":1503},{"style":138},[1504],{"type":21,"value":364},{"type":15,"tag":131,"props":1506,"children":1507},{"style":144},[1508],{"type":21,"value":43},{"type":15,"tag":131,"props":1510,"children":1511},{"style":138},[1512],{"type":21,"value":151},{"type":15,"tag":131,"props":1514,"children":1515},{"class":133,"line":275},[1516,1520,1524],{"type":15,"tag":131,"props":1517,"children":1518},{"style":138},[1519],{"type":21,"value":381},{"type":15,"tag":131,"props":1521,"children":1522},{"style":144},[1523],{"type":21,"value":30},{"type":15,"tag":131,"props":1525,"children":1526},{"style":138},[1527],{"type":21,"value":151},{"type":15,"tag":131,"props":1529,"children":1530},{"class":133,"line":316},[1531],{"type":15,"tag":131,"props":1532,"children":1533},{"emptyLinePlaceholder":8},[1534],{"type":21,"value":398},{"type":15,"tag":131,"props":1536,"children":1537},{"class":133,"line":358},[1538,1542,1546,1550,1554,1558,1562],{"type":15,"tag":131,"props":1539,"children":1540},{"style":138},[1541],{"type":21,"value":141},{"type":15,"tag":131,"props":1543,"children":1544},{"style":144},[1545],{"type":21,"value":411},{"type":15,"tag":131,"props":1547,"children":1548},{"style":168},[1549],{"type":21,"value":416},{"type":15,"tag":131,"props":1551,"children":1552},{"style":138},[1553],{"type":21,"value":176},{"type":15,"tag":131,"props":1555,"children":1556},{"style":179},[1557],{"type":21,"value":425},{"type":15,"tag":131,"props":1559,"children":1560},{"style":168},[1561],{"type":21,"value":430},{"type":15,"tag":131,"props":1563,"children":1564},{"style":138},[1565],{"type":21,"value":151},{"type":15,"tag":131,"props":1567,"children":1568},{"class":133,"line":375},[1569,1573,1577,1581,1585,1589,1593],{"type":15,"tag":131,"props":1570,"children":1571},{"style":441},[1572],{"type":21,"value":444},{"type":15,"tag":131,"props":1574,"children":1575},{"style":138},[1576],{"type":21,"value":449},{"type":15,"tag":131,"props":1578,"children":1579},{"style":144},[1580],{"type":21,"value":43},{"type":15,"tag":131,"props":1582,"children":1583},{"style":138},[1584],{"type":21,"value":458},{"type":15,"tag":131,"props":1586,"children":1587},{"style":441},[1588],{"type":21,"value":463},{"type":15,"tag":131,"props":1590,"children":1591},{"style":179},[1592],{"type":21,"value":468},{"type":15,"tag":131,"props":1594,"children":1595},{"style":138},[1596],{"type":21,"value":473},{"type":15,"tag":131,"props":1598,"children":1599},{"class":133,"line":392},[1600,1604,1608],{"type":15,"tag":131,"props":1601,"children":1602},{"style":138},[1603],{"type":21,"value":381},{"type":15,"tag":131,"props":1605,"children":1606},{"style":144},[1607],{"type":21,"value":411},{"type":15,"tag":131,"props":1609,"children":1610},{"style":138},[1611],{"type":21,"value":151},{"type":15,"tag":491,"props":1613,"children":1614},{},[1615],{"type":15,"tag":121,"props":1616,"children":1618},{"className":496,"code":1617,"language":498,"meta":9,"style":9},"import { SfThumbnail } from '@storefront-ui\u002Freact';\n\nexport default function ThumbnailImage() {\n  return (\n    \u003CSfThumbnail size=\"xl\">\n      \u003Cimg src=\"https:\u002F\u002Fstorage.googleapis.com\u002Fsfui_docs_artifacts_bucket_public\u002Fdevelop\u002Fcard.png\" alt=\"Thumbnail avatar\" \u002F>\n    \u003C\u002FSfThumbnail>\n  );\n}\n",[1619],{"type":15,"tag":38,"props":1620,"children":1621},{"__ignoreMap":9},[1622,1653,1660,1684,1695,1722,1761,1776,1783],{"type":15,"tag":131,"props":1623,"children":1624},{"class":133,"line":134},[1625,1629,1633,1637,1641,1645,1649],{"type":15,"tag":131,"props":1626,"children":1627},{"style":441},[1628],{"type":21,"value":444},{"type":15,"tag":131,"props":1630,"children":1631},{"style":138},[1632],{"type":21,"value":449},{"type":15,"tag":131,"props":1634,"children":1635},{"style":144},[1636],{"type":21,"value":43},{"type":15,"tag":131,"props":1638,"children":1639},{"style":138},[1640],{"type":21,"value":458},{"type":15,"tag":131,"props":1642,"children":1643},{"style":441},[1644],{"type":21,"value":463},{"type":15,"tag":131,"props":1646,"children":1647},{"style":179},[1648],{"type":21,"value":530},{"type":15,"tag":131,"props":1650,"children":1651},{"style":138},[1652],{"type":21,"value":473},{"type":15,"tag":131,"props":1654,"children":1655},{"class":133,"line":154},[1656],{"type":15,"tag":131,"props":1657,"children":1658},{"emptyLinePlaceholder":8},[1659],{"type":21,"value":398},{"type":15,"tag":131,"props":1661,"children":1662},{"class":133,"line":189},[1663,1667,1671,1675,1680],{"type":15,"tag":131,"props":1664,"children":1665},{"style":441},[1666],{"type":21,"value":549},{"type":15,"tag":131,"props":1668,"children":1669},{"style":441},[1670],{"type":21,"value":554},{"type":15,"tag":131,"props":1672,"children":1673},{"style":441},[1674],{"type":21,"value":559},{"type":15,"tag":131,"props":1676,"children":1677},{"style":562},[1678],{"type":21,"value":1679}," ThumbnailImage",{"type":15,"tag":131,"props":1681,"children":1682},{"style":138},[1683],{"type":21,"value":570},{"type":15,"tag":131,"props":1685,"children":1686},{"class":133,"line":234},[1687,1691],{"type":15,"tag":131,"props":1688,"children":1689},{"style":441},[1690],{"type":21,"value":578},{"type":15,"tag":131,"props":1692,"children":1693},{"style":138},[1694],{"type":21,"value":583},{"type":15,"tag":131,"props":1696,"children":1697},{"class":133,"line":275},[1698,1702,1706,1710,1714,1718],{"type":15,"tag":131,"props":1699,"children":1700},{"style":138},[1701],{"type":21,"value":195},{"type":15,"tag":131,"props":1703,"children":1704},{"style":624},[1705],{"type":21,"value":43},{"type":15,"tag":131,"props":1707,"children":1708},{"style":597},[1709],{"type":21,"value":204},{"type":15,"tag":131,"props":1711,"children":1712},{"style":603},[1713],{"type":21,"value":176},{"type":15,"tag":131,"props":1715,"children":1716},{"style":179},[1717],{"type":21,"value":338},{"type":15,"tag":131,"props":1719,"children":1720},{"style":138},[1721],{"type":21,"value":151},{"type":15,"tag":131,"props":1723,"children":1724},{"class":133,"line":316},[1725,1729,1733,1737,1741,1745,1749,1753,1757],{"type":15,"tag":131,"props":1726,"children":1727},{"style":138},[1728],{"type":21,"value":621},{"type":15,"tag":131,"props":1730,"children":1731},{"style":144},[1732],{"type":21,"value":1465},{"type":15,"tag":131,"props":1734,"children":1735},{"style":597},[1736],{"type":21,"value":1470},{"type":15,"tag":131,"props":1738,"children":1739},{"style":603},[1740],{"type":21,"value":176},{"type":15,"tag":131,"props":1742,"children":1743},{"style":179},[1744],{"type":21,"value":1479},{"type":15,"tag":131,"props":1746,"children":1747},{"style":597},[1748],{"type":21,"value":1484},{"type":15,"tag":131,"props":1750,"children":1751},{"style":603},[1752],{"type":21,"value":176},{"type":15,"tag":131,"props":1754,"children":1755},{"style":179},[1756],{"type":21,"value":1493},{"type":15,"tag":131,"props":1758,"children":1759},{"style":138},[1760],{"type":21,"value":231},{"type":15,"tag":131,"props":1762,"children":1763},{"class":133,"line":358},[1764,1768,1772],{"type":15,"tag":131,"props":1765,"children":1766},{"style":138},[1767],{"type":21,"value":780},{"type":15,"tag":131,"props":1769,"children":1770},{"style":624},[1771],{"type":21,"value":43},{"type":15,"tag":131,"props":1773,"children":1774},{"style":138},[1775],{"type":21,"value":151},{"type":15,"tag":131,"props":1777,"children":1778},{"class":133,"line":375},[1779],{"type":15,"tag":131,"props":1780,"children":1781},{"style":138},[1782],{"type":21,"value":796},{"type":15,"tag":131,"props":1784,"children":1785},{"class":133,"line":392},[1786],{"type":15,"tag":131,"props":1787,"children":1788},{"style":138},[1789],{"type":21,"value":804},{"type":15,"tag":63,"props":1791,"children":1793},{"id":1792},"icon",[1794],{"type":21,"value":1795},"Icon",{"type":15,"tag":117,"props":1797,"children":1798},{},[1799],{"type":15,"tag":34,"props":1800,"children":1801},{},[1802],{"type":21,"value":1803},"Similar to images, you can also pass an icon into the default slot.",{"type":15,"tag":491,"props":1805,"children":1806},{},[1807],{"type":15,"tag":34,"props":1808,"children":1809},{},[1810],{"type":21,"value":1811},"Similar to images, you can also pass an icon as children.",{"type":15,"tag":112,"props":1813,"children":1815},{"showcase-name":1814},"Thumbnail\u002FIcon",[1816,2019],{"type":15,"tag":117,"props":1817,"children":1818},{},[1819],{"type":15,"tag":121,"props":1820,"children":1822},{"className":123,"code":1821,"language":125,"meta":9,"style":9},"\u003Ctemplate>\n  \u003CSfThumbnail size=\"xl\" class=\"bg-gray-100 flex items-center justify-center\">\n    \u003CSfIconFavorite \u002F>\n  \u003C\u002FSfThumbnail>\n\u003C\u002Ftemplate>\n\n\u003Cscript lang=\"ts\" setup>\nimport { SfThumbnail, SfIconFavorite } from '@storefront-ui\u002Fvue';\n\u003C\u002Fscript>\n\n",[1823],{"type":15,"tag":38,"props":1824,"children":1825},{"__ignoreMap":9},[1826,1841,1881,1897,1912,1927,1934,1965,2004],{"type":15,"tag":131,"props":1827,"children":1828},{"class":133,"line":134},[1829,1833,1837],{"type":15,"tag":131,"props":1830,"children":1831},{"style":138},[1832],{"type":21,"value":141},{"type":15,"tag":131,"props":1834,"children":1835},{"style":144},[1836],{"type":21,"value":30},{"type":15,"tag":131,"props":1838,"children":1839},{"style":138},[1840],{"type":21,"value":151},{"type":15,"tag":131,"props":1842,"children":1843},{"class":133,"line":154},[1844,1848,1852,1856,1860,1864,1868,1872,1877],{"type":15,"tag":131,"props":1845,"children":1846},{"style":138},[1847],{"type":21,"value":160},{"type":15,"tag":131,"props":1849,"children":1850},{"style":144},[1851],{"type":21,"value":43},{"type":15,"tag":131,"props":1853,"children":1854},{"style":168},[1855],{"type":21,"value":204},{"type":15,"tag":131,"props":1857,"children":1858},{"style":138},[1859],{"type":21,"value":176},{"type":15,"tag":131,"props":1861,"children":1862},{"style":179},[1863],{"type":21,"value":338},{"type":15,"tag":131,"props":1865,"children":1866},{"style":168},[1867],{"type":21,"value":171},{"type":15,"tag":131,"props":1869,"children":1870},{"style":138},[1871],{"type":21,"value":176},{"type":15,"tag":131,"props":1873,"children":1874},{"style":179},[1875],{"type":21,"value":1876},"\"bg-gray-100 flex items-center justify-center\"",{"type":15,"tag":131,"props":1878,"children":1879},{"style":138},[1880],{"type":21,"value":151},{"type":15,"tag":131,"props":1882,"children":1883},{"class":133,"line":189},[1884,1888,1893],{"type":15,"tag":131,"props":1885,"children":1886},{"style":138},[1887],{"type":21,"value":195},{"type":15,"tag":131,"props":1889,"children":1890},{"style":144},[1891],{"type":21,"value":1892},"SfIconFavorite",{"type":15,"tag":131,"props":1894,"children":1895},{"style":138},[1896],{"type":21,"value":231},{"type":15,"tag":131,"props":1898,"children":1899},{"class":133,"line":234},[1900,1904,1908],{"type":15,"tag":131,"props":1901,"children":1902},{"style":138},[1903],{"type":21,"value":364},{"type":15,"tag":131,"props":1905,"children":1906},{"style":144},[1907],{"type":21,"value":43},{"type":15,"tag":131,"props":1909,"children":1910},{"style":138},[1911],{"type":21,"value":151},{"type":15,"tag":131,"props":1913,"children":1914},{"class":133,"line":275},[1915,1919,1923],{"type":15,"tag":131,"props":1916,"children":1917},{"style":138},[1918],{"type":21,"value":381},{"type":15,"tag":131,"props":1920,"children":1921},{"style":144},[1922],{"type":21,"value":30},{"type":15,"tag":131,"props":1924,"children":1925},{"style":138},[1926],{"type":21,"value":151},{"type":15,"tag":131,"props":1928,"children":1929},{"class":133,"line":316},[1930],{"type":15,"tag":131,"props":1931,"children":1932},{"emptyLinePlaceholder":8},[1933],{"type":21,"value":398},{"type":15,"tag":131,"props":1935,"children":1936},{"class":133,"line":358},[1937,1941,1945,1949,1953,1957,1961],{"type":15,"tag":131,"props":1938,"children":1939},{"style":138},[1940],{"type":21,"value":141},{"type":15,"tag":131,"props":1942,"children":1943},{"style":144},[1944],{"type":21,"value":411},{"type":15,"tag":131,"props":1946,"children":1947},{"style":168},[1948],{"type":21,"value":416},{"type":15,"tag":131,"props":1950,"children":1951},{"style":138},[1952],{"type":21,"value":176},{"type":15,"tag":131,"props":1954,"children":1955},{"style":179},[1956],{"type":21,"value":425},{"type":15,"tag":131,"props":1958,"children":1959},{"style":168},[1960],{"type":21,"value":430},{"type":15,"tag":131,"props":1962,"children":1963},{"style":138},[1964],{"type":21,"value":151},{"type":15,"tag":131,"props":1966,"children":1967},{"class":133,"line":375},[1968,1972,1976,1980,1984,1988,1992,1996,2000],{"type":15,"tag":131,"props":1969,"children":1970},{"style":441},[1971],{"type":21,"value":444},{"type":15,"tag":131,"props":1973,"children":1974},{"style":138},[1975],{"type":21,"value":449},{"type":15,"tag":131,"props":1977,"children":1978},{"style":144},[1979],{"type":21,"value":43},{"type":15,"tag":131,"props":1981,"children":1982},{"style":138},[1983],{"type":21,"value":89},{"type":15,"tag":131,"props":1985,"children":1986},{"style":144},[1987],{"type":21,"value":1892},{"type":15,"tag":131,"props":1989,"children":1990},{"style":138},[1991],{"type":21,"value":458},{"type":15,"tag":131,"props":1993,"children":1994},{"style":441},[1995],{"type":21,"value":463},{"type":15,"tag":131,"props":1997,"children":1998},{"style":179},[1999],{"type":21,"value":468},{"type":15,"tag":131,"props":2001,"children":2002},{"style":138},[2003],{"type":21,"value":473},{"type":15,"tag":131,"props":2005,"children":2006},{"class":133,"line":392},[2007,2011,2015],{"type":15,"tag":131,"props":2008,"children":2009},{"style":138},[2010],{"type":21,"value":381},{"type":15,"tag":131,"props":2012,"children":2013},{"style":144},[2014],{"type":21,"value":411},{"type":15,"tag":131,"props":2016,"children":2017},{"style":138},[2018],{"type":21,"value":151},{"type":15,"tag":491,"props":2020,"children":2021},{},[2022],{"type":15,"tag":121,"props":2023,"children":2025},{"className":496,"code":2024,"language":498,"meta":9,"style":9},"import { SfThumbnail, SfIconFavorite } from '@storefront-ui\u002Freact';\n\nexport default function ThumbnailIcon() {\n  return (\n    \u003CSfThumbnail size=\"xl\" className=\"bg-gray-100 flex items-center justify-center\">\n      \u003CSfIconFavorite \u002F>\n    \u003C\u002FSfThumbnail>\n  );\n}\n",[2026],{"type":15,"tag":38,"props":2027,"children":2028},{"__ignoreMap":9},[2029,2068,2075,2099,2110,2149,2164,2179,2186],{"type":15,"tag":131,"props":2030,"children":2031},{"class":133,"line":134},[2032,2036,2040,2044,2048,2052,2056,2060,2064],{"type":15,"tag":131,"props":2033,"children":2034},{"style":441},[2035],{"type":21,"value":444},{"type":15,"tag":131,"props":2037,"children":2038},{"style":138},[2039],{"type":21,"value":449},{"type":15,"tag":131,"props":2041,"children":2042},{"style":144},[2043],{"type":21,"value":43},{"type":15,"tag":131,"props":2045,"children":2046},{"style":138},[2047],{"type":21,"value":89},{"type":15,"tag":131,"props":2049,"children":2050},{"style":144},[2051],{"type":21,"value":1892},{"type":15,"tag":131,"props":2053,"children":2054},{"style":138},[2055],{"type":21,"value":458},{"type":15,"tag":131,"props":2057,"children":2058},{"style":441},[2059],{"type":21,"value":463},{"type":15,"tag":131,"props":2061,"children":2062},{"style":179},[2063],{"type":21,"value":530},{"type":15,"tag":131,"props":2065,"children":2066},{"style":138},[2067],{"type":21,"value":473},{"type":15,"tag":131,"props":2069,"children":2070},{"class":133,"line":154},[2071],{"type":15,"tag":131,"props":2072,"children":2073},{"emptyLinePlaceholder":8},[2074],{"type":21,"value":398},{"type":15,"tag":131,"props":2076,"children":2077},{"class":133,"line":189},[2078,2082,2086,2090,2095],{"type":15,"tag":131,"props":2079,"children":2080},{"style":441},[2081],{"type":21,"value":549},{"type":15,"tag":131,"props":2083,"children":2084},{"style":441},[2085],{"type":21,"value":554},{"type":15,"tag":131,"props":2087,"children":2088},{"style":441},[2089],{"type":21,"value":559},{"type":15,"tag":131,"props":2091,"children":2092},{"style":562},[2093],{"type":21,"value":2094}," ThumbnailIcon",{"type":15,"tag":131,"props":2096,"children":2097},{"style":138},[2098],{"type":21,"value":570},{"type":15,"tag":131,"props":2100,"children":2101},{"class":133,"line":234},[2102,2106],{"type":15,"tag":131,"props":2103,"children":2104},{"style":441},[2105],{"type":21,"value":578},{"type":15,"tag":131,"props":2107,"children":2108},{"style":138},[2109],{"type":21,"value":583},{"type":15,"tag":131,"props":2111,"children":2112},{"class":133,"line":275},[2113,2117,2121,2125,2129,2133,2137,2141,2145],{"type":15,"tag":131,"props":2114,"children":2115},{"style":138},[2116],{"type":21,"value":195},{"type":15,"tag":131,"props":2118,"children":2119},{"style":624},[2120],{"type":21,"value":43},{"type":15,"tag":131,"props":2122,"children":2123},{"style":597},[2124],{"type":21,"value":204},{"type":15,"tag":131,"props":2126,"children":2127},{"style":603},[2128],{"type":21,"value":176},{"type":15,"tag":131,"props":2130,"children":2131},{"style":179},[2132],{"type":21,"value":338},{"type":15,"tag":131,"props":2134,"children":2135},{"style":597},[2136],{"type":21,"value":600},{"type":15,"tag":131,"props":2138,"children":2139},{"style":603},[2140],{"type":21,"value":176},{"type":15,"tag":131,"props":2142,"children":2143},{"style":179},[2144],{"type":21,"value":1876},{"type":15,"tag":131,"props":2146,"children":2147},{"style":138},[2148],{"type":21,"value":151},{"type":15,"tag":131,"props":2150,"children":2151},{"class":133,"line":316},[2152,2156,2160],{"type":15,"tag":131,"props":2153,"children":2154},{"style":138},[2155],{"type":21,"value":621},{"type":15,"tag":131,"props":2157,"children":2158},{"style":624},[2159],{"type":21,"value":1892},{"type":15,"tag":131,"props":2161,"children":2162},{"style":138},[2163],{"type":21,"value":231},{"type":15,"tag":131,"props":2165,"children":2166},{"class":133,"line":358},[2167,2171,2175],{"type":15,"tag":131,"props":2168,"children":2169},{"style":138},[2170],{"type":21,"value":780},{"type":15,"tag":131,"props":2172,"children":2173},{"style":624},[2174],{"type":21,"value":43},{"type":15,"tag":131,"props":2176,"children":2177},{"style":138},[2178],{"type":21,"value":151},{"type":15,"tag":131,"props":2180,"children":2181},{"class":133,"line":375},[2182],{"type":15,"tag":131,"props":2183,"children":2184},{"style":138},[2185],{"type":21,"value":796},{"type":15,"tag":131,"props":2187,"children":2188},{"class":133,"line":392},[2189],{"type":15,"tag":131,"props":2190,"children":2191},{"style":138},[2192],{"type":21,"value":804},{"type":15,"tag":56,"props":2194,"children":2196},{"id":2195},"playground",[2197],{"type":21,"value":2198},"Playground",{"type":15,"tag":2200,"props":2201,"children":2203},"generate",{"style":2202},"height: 450px",[],{"type":15,"tag":30,"props":2205,"children":2206},{"v-slot:tab-2":9},[2207,2213,2303,2435],{"type":15,"tag":56,"props":2208,"children":2210},{"id":2209},"props",[2211],{"type":21,"value":2212},"Props",{"type":15,"tag":117,"props":2214,"children":2215},{},[2216],{"type":15,"tag":2217,"props":2218,"children":2219},"table",{},[2220,2249],{"type":15,"tag":2221,"props":2222,"children":2223},"thead",{},[2224],{"type":15,"tag":2225,"props":2226,"children":2227},"tr",{},[2228,2234,2239,2244],{"type":15,"tag":2229,"props":2230,"children":2231},"th",{},[2232],{"type":21,"value":2233},"Prop name",{"type":15,"tag":2229,"props":2235,"children":2236},{},[2237],{"type":21,"value":2238},"Type",{"type":15,"tag":2229,"props":2240,"children":2241},{},[2242],{"type":21,"value":2243},"Default value",{"type":15,"tag":2229,"props":2245,"children":2246},{},[2247],{"type":21,"value":2248},"Possible values",{"type":15,"tag":2250,"props":2251,"children":2252},"tbody",{},[2253],{"type":15,"tag":2225,"props":2254,"children":2255},{},[2256,2265,2274,2282],{"type":15,"tag":2257,"props":2258,"children":2259},"td",{},[2260],{"type":15,"tag":38,"props":2261,"children":2263},{"className":2262},[],[2264],{"type":21,"value":79},{"type":15,"tag":2257,"props":2266,"children":2267},{},[2268],{"type":15,"tag":38,"props":2269,"children":2271},{"className":2270},[],[2272],{"type":21,"value":2273},"SfChip",{"type":15,"tag":2257,"props":2275,"children":2276},{},[2277],{"type":15,"tag":38,"props":2278,"children":2280},{"className":2279},[],[2281],{"type":21,"value":95},{"type":15,"tag":2257,"props":2283,"children":2284},{},[2285,2290,2291,2296,2297],{"type":15,"tag":38,"props":2286,"children":2288},{"className":2287},[],[2289],{"type":21,"value":87},{"type":21,"value":89},{"type":15,"tag":38,"props":2292,"children":2294},{"className":2293},[],[2295],{"type":21,"value":95},{"type":21,"value":89},{"type":15,"tag":38,"props":2298,"children":2300},{"className":2299},[],[2301],{"type":21,"value":2302},"'lg'",{"type":15,"tag":491,"props":2304,"children":2305},{},[2306],{"type":15,"tag":2217,"props":2307,"children":2308},{},[2309,2331],{"type":15,"tag":2221,"props":2310,"children":2311},{},[2312],{"type":15,"tag":2225,"props":2313,"children":2314},{},[2315,2319,2323,2327],{"type":15,"tag":2229,"props":2316,"children":2317},{},[2318],{"type":21,"value":2233},{"type":15,"tag":2229,"props":2320,"children":2321},{},[2322],{"type":21,"value":2238},{"type":15,"tag":2229,"props":2324,"children":2325},{},[2326],{"type":21,"value":2243},{"type":15,"tag":2229,"props":2328,"children":2329},{},[2330],{"type":21,"value":2248},{"type":15,"tag":2250,"props":2332,"children":2333},{},[2334,2381,2408],{"type":15,"tag":2225,"props":2335,"children":2336},{},[2337,2345,2353,2361],{"type":15,"tag":2257,"props":2338,"children":2339},{},[2340],{"type":15,"tag":38,"props":2341,"children":2343},{"className":2342},[],[2344],{"type":21,"value":79},{"type":15,"tag":2257,"props":2346,"children":2347},{},[2348],{"type":15,"tag":38,"props":2349,"children":2351},{"className":2350},[],[2352],{"type":21,"value":2273},{"type":15,"tag":2257,"props":2354,"children":2355},{},[2356],{"type":15,"tag":38,"props":2357,"children":2359},{"className":2358},[],[2360],{"type":21,"value":95},{"type":15,"tag":2257,"props":2362,"children":2363},{},[2364,2369,2370,2375,2376],{"type":15,"tag":38,"props":2365,"children":2367},{"className":2366},[],[2368],{"type":21,"value":87},{"type":21,"value":89},{"type":15,"tag":38,"props":2371,"children":2373},{"className":2372},[],[2374],{"type":21,"value":95},{"type":21,"value":89},{"type":15,"tag":38,"props":2377,"children":2379},{"className":2378},[],[2380],{"type":21,"value":2302},{"type":15,"tag":2225,"props":2382,"children":2383},{},[2384,2393,2402,2405],{"type":15,"tag":2257,"props":2385,"children":2386},{},[2387],{"type":15,"tag":38,"props":2388,"children":2390},{"className":2389},[],[2391],{"type":21,"value":2392},"className",{"type":15,"tag":2257,"props":2394,"children":2395},{},[2396],{"type":15,"tag":38,"props":2397,"children":2399},{"className":2398},[],[2400],{"type":21,"value":2401},"string",{"type":15,"tag":2257,"props":2403,"children":2404},{},[],{"type":15,"tag":2257,"props":2406,"children":2407},{},[],{"type":15,"tag":2225,"props":2409,"children":2410},{},[2411,2420,2429,2432],{"type":15,"tag":2257,"props":2412,"children":2413},{},[2414],{"type":15,"tag":38,"props":2415,"children":2417},{"className":2416},[],[2418],{"type":21,"value":2419},"children",{"type":15,"tag":2257,"props":2421,"children":2422},{},[2423],{"type":15,"tag":38,"props":2424,"children":2426},{"className":2425},[],[2427],{"type":21,"value":2428},"ReactNode",{"type":15,"tag":2257,"props":2430,"children":2431},{},[],{"type":15,"tag":2257,"props":2433,"children":2434},{},[],{"type":15,"tag":117,"props":2436,"children":2437},{},[2438,2444],{"type":15,"tag":56,"props":2439,"children":2441},{"id":2440},"slots",[2442],{"type":21,"value":2443},"Slots",{"type":15,"tag":2217,"props":2445,"children":2446},{},[2447,2463],{"type":15,"tag":2221,"props":2448,"children":2449},{},[2450],{"type":15,"tag":2225,"props":2451,"children":2452},{},[2453,2458],{"type":15,"tag":2229,"props":2454,"children":2455},{},[2456],{"type":21,"value":2457},"Slot name",{"type":15,"tag":2229,"props":2459,"children":2460},{},[2461],{"type":21,"value":2462},"Description",{"type":15,"tag":2250,"props":2464,"children":2465},{},[2466],{"type":15,"tag":2225,"props":2467,"children":2468},{},[2469,2478],{"type":15,"tag":2257,"props":2470,"children":2471},{},[2472],{"type":15,"tag":38,"props":2473,"children":2475},{"className":2474},[],[2476],{"type":21,"value":2477},"default",{"type":15,"tag":2257,"props":2479,"children":2480},{},[2481],{"type":21,"value":2482},"allows to pass icon or image",{"type":15,"tag":30,"props":2484,"children":2485},{"v-slot:tab-3":9},[2486,2491,3206],{"type":15,"tag":2487,"props":2488,"children":2490},"partial",{"content":2489},"block-callout",[],{"type":15,"tag":117,"props":2492,"children":2493},{},[2494],{"type":15,"tag":121,"props":2495,"children":2497},{"className":123,"code":2496,"language":125,"meta":9,"style":9},"\u003Cscript lang=\"ts\">\nconst sizeClasses = {\n  [SfThumbnailSize.sm]: 'w-5 h-5',\n  [SfThumbnailSize.base]: 'w-6 h-6',\n  [SfThumbnailSize.lg]: 'w-10 h-10',\n  [SfThumbnailSize.xl]: 'w-14 h-14',\n};\n\u003C\u002Fscript>\n\u003Cscript lang=\"ts\" setup>\nimport type { PropType } from 'vue';\nimport { SfThumbnailSize, twMerge, useTwMergeRoot } from '@storefront-ui\u002Fvue';\n\ndefineProps({\n  size: {\n    type: String as PropType\u003C`${SfThumbnailSize}`>,\n    default: SfThumbnailSize.base,\n  },\n});\ndefineOptions({\n  inheritAttrs: false,\n});\nconst { attrsWithoutClass } = useTwMergeRoot();\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv\n    :class=\"twMerge('rounded-full overflow-hidden bg-clip-content p-0.5', sizeClasses[size], $attrs.class)\"\n    data-testid=\"chip-thumbnail\"\n    v-bind=\"attrsWithoutClass\"\n  >\n    \u003Cslot \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n",[2498],{"type":15,"tag":38,"props":2499,"children":2500},{"__ignoreMap":9},[2501,2528,2551,2584,2613,2642,2671,2679,2694,2725,2763,2812,2819,2833,2847,2908,2939,2948,2957,2970,2992,3000,3035,3051,3059,3075,3088,3106,3124,3142,3151,3174,3190],{"type":15,"tag":131,"props":2502,"children":2503},{"class":133,"line":134},[2504,2508,2512,2516,2520,2524],{"type":15,"tag":131,"props":2505,"children":2506},{"style":138},[2507],{"type":21,"value":141},{"type":15,"tag":131,"props":2509,"children":2510},{"style":144},[2511],{"type":21,"value":411},{"type":15,"tag":131,"props":2513,"children":2514},{"style":168},[2515],{"type":21,"value":416},{"type":15,"tag":131,"props":2517,"children":2518},{"style":138},[2519],{"type":21,"value":176},{"type":15,"tag":131,"props":2521,"children":2522},{"style":179},[2523],{"type":21,"value":425},{"type":15,"tag":131,"props":2525,"children":2526},{"style":138},[2527],{"type":21,"value":151},{"type":15,"tag":131,"props":2529,"children":2530},{"class":133,"line":154},[2531,2536,2541,2546],{"type":15,"tag":131,"props":2532,"children":2533},{"style":441},[2534],{"type":21,"value":2535},"const",{"type":15,"tag":131,"props":2537,"children":2538},{"style":624},[2539],{"type":21,"value":2540}," sizeClasses",{"type":15,"tag":131,"props":2542,"children":2543},{"style":603},[2544],{"type":21,"value":2545}," =",{"type":15,"tag":131,"props":2547,"children":2548},{"style":138},[2549],{"type":21,"value":2550}," {\n",{"type":15,"tag":131,"props":2552,"children":2553},{"class":133,"line":189},[2554,2559,2564,2569,2574,2579],{"type":15,"tag":131,"props":2555,"children":2556},{"style":138},[2557],{"type":21,"value":2558},"  [",{"type":15,"tag":131,"props":2560,"children":2561},{"style":624},[2562],{"type":21,"value":2563},"SfThumbnailSize",{"type":15,"tag":131,"props":2565,"children":2566},{"style":144},[2567],{"type":21,"value":2568},".sm",{"type":15,"tag":131,"props":2570,"children":2571},{"style":138},[2572],{"type":21,"value":2573},"]: ",{"type":15,"tag":131,"props":2575,"children":2576},{"style":179},[2577],{"type":21,"value":2578},"'w-5 h-5'",{"type":15,"tag":131,"props":2580,"children":2581},{"style":138},[2582],{"type":21,"value":2583},",\n",{"type":15,"tag":131,"props":2585,"children":2586},{"class":133,"line":234},[2587,2591,2595,2600,2604,2609],{"type":15,"tag":131,"props":2588,"children":2589},{"style":138},[2590],{"type":21,"value":2558},{"type":15,"tag":131,"props":2592,"children":2593},{"style":624},[2594],{"type":21,"value":2563},{"type":15,"tag":131,"props":2596,"children":2597},{"style":144},[2598],{"type":21,"value":2599},".base",{"type":15,"tag":131,"props":2601,"children":2602},{"style":138},[2603],{"type":21,"value":2573},{"type":15,"tag":131,"props":2605,"children":2606},{"style":179},[2607],{"type":21,"value":2608},"'w-6 h-6'",{"type":15,"tag":131,"props":2610,"children":2611},{"style":138},[2612],{"type":21,"value":2583},{"type":15,"tag":131,"props":2614,"children":2615},{"class":133,"line":275},[2616,2620,2624,2629,2633,2638],{"type":15,"tag":131,"props":2617,"children":2618},{"style":138},[2619],{"type":21,"value":2558},{"type":15,"tag":131,"props":2621,"children":2622},{"style":624},[2623],{"type":21,"value":2563},{"type":15,"tag":131,"props":2625,"children":2626},{"style":144},[2627],{"type":21,"value":2628},".lg",{"type":15,"tag":131,"props":2630,"children":2631},{"style":138},[2632],{"type":21,"value":2573},{"type":15,"tag":131,"props":2634,"children":2635},{"style":179},[2636],{"type":21,"value":2637},"'w-10 h-10'",{"type":15,"tag":131,"props":2639,"children":2640},{"style":138},[2641],{"type":21,"value":2583},{"type":15,"tag":131,"props":2643,"children":2644},{"class":133,"line":316},[2645,2649,2653,2658,2662,2667],{"type":15,"tag":131,"props":2646,"children":2647},{"style":138},[2648],{"type":21,"value":2558},{"type":15,"tag":131,"props":2650,"children":2651},{"style":624},[2652],{"type":21,"value":2563},{"type":15,"tag":131,"props":2654,"children":2655},{"style":144},[2656],{"type":21,"value":2657},".xl",{"type":15,"tag":131,"props":2659,"children":2660},{"style":138},[2661],{"type":21,"value":2573},{"type":15,"tag":131,"props":2663,"children":2664},{"style":179},[2665],{"type":21,"value":2666},"'w-14 h-14'",{"type":15,"tag":131,"props":2668,"children":2669},{"style":138},[2670],{"type":21,"value":2583},{"type":15,"tag":131,"props":2672,"children":2673},{"class":133,"line":358},[2674],{"type":15,"tag":131,"props":2675,"children":2676},{"style":138},[2677],{"type":21,"value":2678},"};\n",{"type":15,"tag":131,"props":2680,"children":2681},{"class":133,"line":375},[2682,2686,2690],{"type":15,"tag":131,"props":2683,"children":2684},{"style":138},[2685],{"type":21,"value":381},{"type":15,"tag":131,"props":2687,"children":2688},{"style":144},[2689],{"type":21,"value":411},{"type":15,"tag":131,"props":2691,"children":2692},{"style":138},[2693],{"type":21,"value":151},{"type":15,"tag":131,"props":2695,"children":2696},{"class":133,"line":392},[2697,2701,2705,2709,2713,2717,2721],{"type":15,"tag":131,"props":2698,"children":2699},{"style":138},[2700],{"type":21,"value":141},{"type":15,"tag":131,"props":2702,"children":2703},{"style":144},[2704],{"type":21,"value":411},{"type":15,"tag":131,"props":2706,"children":2707},{"style":168},[2708],{"type":21,"value":416},{"type":15,"tag":131,"props":2710,"children":2711},{"style":138},[2712],{"type":21,"value":176},{"type":15,"tag":131,"props":2714,"children":2715},{"style":179},[2716],{"type":21,"value":425},{"type":15,"tag":131,"props":2718,"children":2719},{"style":168},[2720],{"type":21,"value":430},{"type":15,"tag":131,"props":2722,"children":2723},{"style":138},[2724],{"type":21,"value":151},{"type":15,"tag":131,"props":2726,"children":2727},{"class":133,"line":401},[2728,2732,2737,2741,2746,2750,2754,2759],{"type":15,"tag":131,"props":2729,"children":2730},{"style":441},[2731],{"type":21,"value":444},{"type":15,"tag":131,"props":2733,"children":2734},{"style":441},[2735],{"type":21,"value":2736}," type",{"type":15,"tag":131,"props":2738,"children":2739},{"style":138},[2740],{"type":21,"value":449},{"type":15,"tag":131,"props":2742,"children":2743},{"style":144},[2744],{"type":21,"value":2745},"PropType",{"type":15,"tag":131,"props":2747,"children":2748},{"style":138},[2749],{"type":21,"value":458},{"type":15,"tag":131,"props":2751,"children":2752},{"style":441},[2753],{"type":21,"value":463},{"type":15,"tag":131,"props":2755,"children":2756},{"style":179},[2757],{"type":21,"value":2758}," 'vue'",{"type":15,"tag":131,"props":2760,"children":2761},{"style":138},[2762],{"type":21,"value":473},{"type":15,"tag":131,"props":2764,"children":2765},{"class":133,"line":437},[2766,2770,2774,2778,2782,2787,2791,2796,2800,2804,2808],{"type":15,"tag":131,"props":2767,"children":2768},{"style":441},[2769],{"type":21,"value":444},{"type":15,"tag":131,"props":2771,"children":2772},{"style":138},[2773],{"type":21,"value":449},{"type":15,"tag":131,"props":2775,"children":2776},{"style":144},[2777],{"type":21,"value":2563},{"type":15,"tag":131,"props":2779,"children":2780},{"style":138},[2781],{"type":21,"value":89},{"type":15,"tag":131,"props":2783,"children":2784},{"style":144},[2785],{"type":21,"value":2786},"twMerge",{"type":15,"tag":131,"props":2788,"children":2789},{"style":138},[2790],{"type":21,"value":89},{"type":15,"tag":131,"props":2792,"children":2793},{"style":144},[2794],{"type":21,"value":2795},"useTwMergeRoot",{"type":15,"tag":131,"props":2797,"children":2798},{"style":138},[2799],{"type":21,"value":458},{"type":15,"tag":131,"props":2801,"children":2802},{"style":441},[2803],{"type":21,"value":463},{"type":15,"tag":131,"props":2805,"children":2806},{"style":179},[2807],{"type":21,"value":468},{"type":15,"tag":131,"props":2809,"children":2810},{"style":138},[2811],{"type":21,"value":473},{"type":15,"tag":131,"props":2813,"children":2814},{"class":133,"line":476},[2815],{"type":15,"tag":131,"props":2816,"children":2817},{"emptyLinePlaceholder":8},[2818],{"type":21,"value":398},{"type":15,"tag":131,"props":2820,"children":2822},{"class":133,"line":2821},13,[2823,2828],{"type":15,"tag":131,"props":2824,"children":2825},{"style":562},[2826],{"type":21,"value":2827},"defineProps",{"type":15,"tag":131,"props":2829,"children":2830},{"style":138},[2831],{"type":21,"value":2832},"({\n",{"type":15,"tag":131,"props":2834,"children":2836},{"class":133,"line":2835},14,[2837,2842],{"type":15,"tag":131,"props":2838,"children":2839},{"style":144},[2840],{"type":21,"value":2841},"  size",{"type":15,"tag":131,"props":2843,"children":2844},{"style":138},[2845],{"type":21,"value":2846},": {\n",{"type":15,"tag":131,"props":2848,"children":2850},{"class":133,"line":2849},15,[2851,2856,2861,2866,2871,2876,2880,2885,2890,2894,2899,2903],{"type":15,"tag":131,"props":2852,"children":2853},{"style":144},[2854],{"type":21,"value":2855},"    type",{"type":15,"tag":131,"props":2857,"children":2858},{"style":138},[2859],{"type":21,"value":2860},": ",{"type":15,"tag":131,"props":2862,"children":2863},{"style":144},[2864],{"type":21,"value":2865},"String",{"type":15,"tag":131,"props":2867,"children":2868},{"style":441},[2869],{"type":21,"value":2870}," as",{"type":15,"tag":131,"props":2872,"children":2873},{"style":624},[2874],{"type":21,"value":2875}," PropType",{"type":15,"tag":131,"props":2877,"children":2878},{"style":138},[2879],{"type":21,"value":141},{"type":15,"tag":131,"props":2881,"children":2882},{"style":179},[2883],{"type":21,"value":2884},"`",{"type":15,"tag":131,"props":2886,"children":2887},{"style":441},[2888],{"type":21,"value":2889},"${",{"type":15,"tag":131,"props":2891,"children":2892},{"style":624},[2893],{"type":21,"value":2563},{"type":15,"tag":131,"props":2895,"children":2896},{"style":441},[2897],{"type":21,"value":2898},"}",{"type":15,"tag":131,"props":2900,"children":2901},{"style":179},[2902],{"type":21,"value":2884},{"type":15,"tag":131,"props":2904,"children":2905},{"style":138},[2906],{"type":21,"value":2907},">,\n",{"type":15,"tag":131,"props":2909,"children":2911},{"class":133,"line":2910},16,[2912,2917,2921,2925,2930,2935],{"type":15,"tag":131,"props":2913,"children":2914},{"style":144},[2915],{"type":21,"value":2916},"    default",{"type":15,"tag":131,"props":2918,"children":2919},{"style":138},[2920],{"type":21,"value":2860},{"type":15,"tag":131,"props":2922,"children":2923},{"style":624},[2924],{"type":21,"value":2563},{"type":15,"tag":131,"props":2926,"children":2927},{"style":138},[2928],{"type":21,"value":2929},".",{"type":15,"tag":131,"props":2931,"children":2932},{"style":144},[2933],{"type":21,"value":2934},"base",{"type":15,"tag":131,"props":2936,"children":2937},{"style":138},[2938],{"type":21,"value":2583},{"type":15,"tag":131,"props":2940,"children":2942},{"class":133,"line":2941},17,[2943],{"type":15,"tag":131,"props":2944,"children":2945},{"style":138},[2946],{"type":21,"value":2947},"  },\n",{"type":15,"tag":131,"props":2949,"children":2951},{"class":133,"line":2950},18,[2952],{"type":15,"tag":131,"props":2953,"children":2954},{"style":138},[2955],{"type":21,"value":2956},"});\n",{"type":15,"tag":131,"props":2958,"children":2960},{"class":133,"line":2959},19,[2961,2966],{"type":15,"tag":131,"props":2962,"children":2963},{"style":562},[2964],{"type":21,"value":2965},"defineOptions",{"type":15,"tag":131,"props":2967,"children":2968},{"style":138},[2969],{"type":21,"value":2832},{"type":15,"tag":131,"props":2971,"children":2973},{"class":133,"line":2972},20,[2974,2979,2983,2988],{"type":15,"tag":131,"props":2975,"children":2976},{"style":144},[2977],{"type":21,"value":2978},"  inheritAttrs",{"type":15,"tag":131,"props":2980,"children":2981},{"style":138},[2982],{"type":21,"value":2860},{"type":15,"tag":131,"props":2984,"children":2985},{"style":168},[2986],{"type":21,"value":2987},"false",{"type":15,"tag":131,"props":2989,"children":2990},{"style":138},[2991],{"type":21,"value":2583},{"type":15,"tag":131,"props":2993,"children":2995},{"class":133,"line":2994},21,[2996],{"type":15,"tag":131,"props":2997,"children":2998},{"style":138},[2999],{"type":21,"value":2956},{"type":15,"tag":131,"props":3001,"children":3003},{"class":133,"line":3002},22,[3004,3008,3012,3017,3021,3025,3030],{"type":15,"tag":131,"props":3005,"children":3006},{"style":441},[3007],{"type":21,"value":2535},{"type":15,"tag":131,"props":3009,"children":3010},{"style":138},[3011],{"type":21,"value":449},{"type":15,"tag":131,"props":3013,"children":3014},{"style":624},[3015],{"type":21,"value":3016},"attrsWithoutClass",{"type":15,"tag":131,"props":3018,"children":3019},{"style":138},[3020],{"type":21,"value":458},{"type":15,"tag":131,"props":3022,"children":3023},{"style":603},[3024],{"type":21,"value":176},{"type":15,"tag":131,"props":3026,"children":3027},{"style":562},[3028],{"type":21,"value":3029}," useTwMergeRoot",{"type":15,"tag":131,"props":3031,"children":3032},{"style":138},[3033],{"type":21,"value":3034},"();\n",{"type":15,"tag":131,"props":3036,"children":3038},{"class":133,"line":3037},23,[3039,3043,3047],{"type":15,"tag":131,"props":3040,"children":3041},{"style":138},[3042],{"type":21,"value":381},{"type":15,"tag":131,"props":3044,"children":3045},{"style":144},[3046],{"type":21,"value":411},{"type":15,"tag":131,"props":3048,"children":3049},{"style":138},[3050],{"type":21,"value":151},{"type":15,"tag":131,"props":3052,"children":3054},{"class":133,"line":3053},24,[3055],{"type":15,"tag":131,"props":3056,"children":3057},{"emptyLinePlaceholder":8},[3058],{"type":21,"value":398},{"type":15,"tag":131,"props":3060,"children":3062},{"class":133,"line":3061},25,[3063,3067,3071],{"type":15,"tag":131,"props":3064,"children":3065},{"style":138},[3066],{"type":21,"value":141},{"type":15,"tag":131,"props":3068,"children":3069},{"style":144},[3070],{"type":21,"value":30},{"type":15,"tag":131,"props":3072,"children":3073},{"style":138},[3074],{"type":21,"value":151},{"type":15,"tag":131,"props":3076,"children":3078},{"class":133,"line":3077},26,[3079,3083],{"type":15,"tag":131,"props":3080,"children":3081},{"style":138},[3082],{"type":21,"value":160},{"type":15,"tag":131,"props":3084,"children":3085},{"style":144},[3086],{"type":21,"value":3087},"div\n",{"type":15,"tag":131,"props":3089,"children":3091},{"class":133,"line":3090},27,[3092,3097,3101],{"type":15,"tag":131,"props":3093,"children":3094},{"style":168},[3095],{"type":21,"value":3096},"    :class",{"type":15,"tag":131,"props":3098,"children":3099},{"style":138},[3100],{"type":21,"value":176},{"type":15,"tag":131,"props":3102,"children":3103},{"style":179},[3104],{"type":21,"value":3105},"\"twMerge('rounded-full overflow-hidden bg-clip-content p-0.5', sizeClasses[size], $attrs.class)\"\n",{"type":15,"tag":131,"props":3107,"children":3109},{"class":133,"line":3108},28,[3110,3115,3119],{"type":15,"tag":131,"props":3111,"children":3112},{"style":168},[3113],{"type":21,"value":3114},"    data-testid",{"type":15,"tag":131,"props":3116,"children":3117},{"style":138},[3118],{"type":21,"value":176},{"type":15,"tag":131,"props":3120,"children":3121},{"style":179},[3122],{"type":21,"value":3123},"\"chip-thumbnail\"\n",{"type":15,"tag":131,"props":3125,"children":3127},{"class":133,"line":3126},29,[3128,3133,3137],{"type":15,"tag":131,"props":3129,"children":3130},{"style":168},[3131],{"type":21,"value":3132},"    v-bind",{"type":15,"tag":131,"props":3134,"children":3135},{"style":138},[3136],{"type":21,"value":176},{"type":15,"tag":131,"props":3138,"children":3139},{"style":179},[3140],{"type":21,"value":3141},"\"attrsWithoutClass\"\n",{"type":15,"tag":131,"props":3143,"children":3145},{"class":133,"line":3144},30,[3146],{"type":15,"tag":131,"props":3147,"children":3148},{"style":138},[3149],{"type":21,"value":3150},"  >\n",{"type":15,"tag":131,"props":3152,"children":3154},{"class":133,"line":3153},31,[3155,3159,3164,3170],{"type":15,"tag":131,"props":3156,"children":3157},{"style":138},[3158],{"type":21,"value":195},{"type":15,"tag":131,"props":3160,"children":3161},{"style":144},[3162],{"type":21,"value":3163},"slot",{"type":15,"tag":131,"props":3165,"children":3167},{"style":3166},"--shiki-default:#FFFFFF",[3168],{"type":21,"value":3169}," \u002F",{"type":15,"tag":131,"props":3171,"children":3172},{"style":138},[3173],{"type":21,"value":151},{"type":15,"tag":131,"props":3175,"children":3177},{"class":133,"line":3176},32,[3178,3182,3186],{"type":15,"tag":131,"props":3179,"children":3180},{"style":138},[3181],{"type":21,"value":364},{"type":15,"tag":131,"props":3183,"children":3184},{"style":144},[3185],{"type":21,"value":165},{"type":15,"tag":131,"props":3187,"children":3188},{"style":138},[3189],{"type":21,"value":151},{"type":15,"tag":131,"props":3191,"children":3193},{"class":133,"line":3192},33,[3194,3198,3202],{"type":15,"tag":131,"props":3195,"children":3196},{"style":138},[3197],{"type":21,"value":381},{"type":15,"tag":131,"props":3199,"children":3200},{"style":144},[3201],{"type":21,"value":30},{"type":15,"tag":131,"props":3203,"children":3204},{"style":138},[3205],{"type":21,"value":151},{"type":15,"tag":491,"props":3207,"children":3208},{},[3209],{"type":15,"tag":121,"props":3210,"children":3212},{"className":496,"code":3211,"language":498,"meta":9,"style":9},"import React from 'react';\nimport { SfThumbnailProps, SfThumbnailSize, twMerge } from '@storefront-ui\u002Freact';\n\nconst sizeClasses = {\n  [SfThumbnailSize.sm]: 'w-5 h-5',\n  [SfThumbnailSize.base]: 'w-6 h-6',\n  [SfThumbnailSize.lg]: 'w-10 h-10',\n  [SfThumbnailSize.xl]: 'w-14 h-14',\n};\n\nexport default function SfThumbnail({\n  size = SfThumbnailSize.base,\n  children,\n  className,\n  ...attributes\n}: SfThumbnailProps): React.JSX.Element {\n  return (\n    \u003Cdiv\n      className={twMerge('rounded-full overflow-hidden bg-clip-content p-0.5', sizeClasses[size], className)}\n      data-testid=\"thumbnail\"\n      {...attributes}\n    >\n      {children}\n    \u003C\u002Fdiv>\n  );\n}\n\n",[3213],{"type":15,"tag":38,"props":3214,"children":3215},{"__ignoreMap":9},[3216,3242,3290,3297,3316,3343,3370,3397,3424,3431,3438,3462,3491,3503,3515,3528,3572,3583,3594,3661,3678,3700,3708,3723,3738,3745],{"type":15,"tag":131,"props":3217,"children":3218},{"class":133,"line":134},[3219,3223,3228,3233,3238],{"type":15,"tag":131,"props":3220,"children":3221},{"style":441},[3222],{"type":21,"value":444},{"type":15,"tag":131,"props":3224,"children":3225},{"style":144},[3226],{"type":21,"value":3227}," React",{"type":15,"tag":131,"props":3229,"children":3230},{"style":441},[3231],{"type":21,"value":3232}," from",{"type":15,"tag":131,"props":3234,"children":3235},{"style":179},[3236],{"type":21,"value":3237}," 'react'",{"type":15,"tag":131,"props":3239,"children":3240},{"style":138},[3241],{"type":21,"value":473},{"type":15,"tag":131,"props":3243,"children":3244},{"class":133,"line":154},[3245,3249,3253,3258,3262,3266,3270,3274,3278,3282,3286],{"type":15,"tag":131,"props":3246,"children":3247},{"style":441},[3248],{"type":21,"value":444},{"type":15,"tag":131,"props":3250,"children":3251},{"style":138},[3252],{"type":21,"value":449},{"type":15,"tag":131,"props":3254,"children":3255},{"style":144},[3256],{"type":21,"value":3257},"SfThumbnailProps",{"type":15,"tag":131,"props":3259,"children":3260},{"style":138},[3261],{"type":21,"value":89},{"type":15,"tag":131,"props":3263,"children":3264},{"style":144},[3265],{"type":21,"value":2563},{"type":15,"tag":131,"props":3267,"children":3268},{"style":138},[3269],{"type":21,"value":89},{"type":15,"tag":131,"props":3271,"children":3272},{"style":144},[3273],{"type":21,"value":2786},{"type":15,"tag":131,"props":3275,"children":3276},{"style":138},[3277],{"type":21,"value":458},{"type":15,"tag":131,"props":3279,"children":3280},{"style":441},[3281],{"type":21,"value":463},{"type":15,"tag":131,"props":3283,"children":3284},{"style":179},[3285],{"type":21,"value":530},{"type":15,"tag":131,"props":3287,"children":3288},{"style":138},[3289],{"type":21,"value":473},{"type":15,"tag":131,"props":3291,"children":3292},{"class":133,"line":189},[3293],{"type":15,"tag":131,"props":3294,"children":3295},{"emptyLinePlaceholder":8},[3296],{"type":21,"value":398},{"type":15,"tag":131,"props":3298,"children":3299},{"class":133,"line":234},[3300,3304,3308,3312],{"type":15,"tag":131,"props":3301,"children":3302},{"style":441},[3303],{"type":21,"value":2535},{"type":15,"tag":131,"props":3305,"children":3306},{"style":624},[3307],{"type":21,"value":2540},{"type":15,"tag":131,"props":3309,"children":3310},{"style":603},[3311],{"type":21,"value":2545},{"type":15,"tag":131,"props":3313,"children":3314},{"style":138},[3315],{"type":21,"value":2550},{"type":15,"tag":131,"props":3317,"children":3318},{"class":133,"line":275},[3319,3323,3327,3331,3335,3339],{"type":15,"tag":131,"props":3320,"children":3321},{"style":138},[3322],{"type":21,"value":2558},{"type":15,"tag":131,"props":3324,"children":3325},{"style":624},[3326],{"type":21,"value":2563},{"type":15,"tag":131,"props":3328,"children":3329},{"style":144},[3330],{"type":21,"value":2568},{"type":15,"tag":131,"props":3332,"children":3333},{"style":138},[3334],{"type":21,"value":2573},{"type":15,"tag":131,"props":3336,"children":3337},{"style":179},[3338],{"type":21,"value":2578},{"type":15,"tag":131,"props":3340,"children":3341},{"style":138},[3342],{"type":21,"value":2583},{"type":15,"tag":131,"props":3344,"children":3345},{"class":133,"line":316},[3346,3350,3354,3358,3362,3366],{"type":15,"tag":131,"props":3347,"children":3348},{"style":138},[3349],{"type":21,"value":2558},{"type":15,"tag":131,"props":3351,"children":3352},{"style":624},[3353],{"type":21,"value":2563},{"type":15,"tag":131,"props":3355,"children":3356},{"style":144},[3357],{"type":21,"value":2599},{"type":15,"tag":131,"props":3359,"children":3360},{"style":138},[3361],{"type":21,"value":2573},{"type":15,"tag":131,"props":3363,"children":3364},{"style":179},[3365],{"type":21,"value":2608},{"type":15,"tag":131,"props":3367,"children":3368},{"style":138},[3369],{"type":21,"value":2583},{"type":15,"tag":131,"props":3371,"children":3372},{"class":133,"line":358},[3373,3377,3381,3385,3389,3393],{"type":15,"tag":131,"props":3374,"children":3375},{"style":138},[3376],{"type":21,"value":2558},{"type":15,"tag":131,"props":3378,"children":3379},{"style":624},[3380],{"type":21,"value":2563},{"type":15,"tag":131,"props":3382,"children":3383},{"style":144},[3384],{"type":21,"value":2628},{"type":15,"tag":131,"props":3386,"children":3387},{"style":138},[3388],{"type":21,"value":2573},{"type":15,"tag":131,"props":3390,"children":3391},{"style":179},[3392],{"type":21,"value":2637},{"type":15,"tag":131,"props":3394,"children":3395},{"style":138},[3396],{"type":21,"value":2583},{"type":15,"tag":131,"props":3398,"children":3399},{"class":133,"line":375},[3400,3404,3408,3412,3416,3420],{"type":15,"tag":131,"props":3401,"children":3402},{"style":138},[3403],{"type":21,"value":2558},{"type":15,"tag":131,"props":3405,"children":3406},{"style":624},[3407],{"type":21,"value":2563},{"type":15,"tag":131,"props":3409,"children":3410},{"style":144},[3411],{"type":21,"value":2657},{"type":15,"tag":131,"props":3413,"children":3414},{"style":138},[3415],{"type":21,"value":2573},{"type":15,"tag":131,"props":3417,"children":3418},{"style":179},[3419],{"type":21,"value":2666},{"type":15,"tag":131,"props":3421,"children":3422},{"style":138},[3423],{"type":21,"value":2583},{"type":15,"tag":131,"props":3425,"children":3426},{"class":133,"line":392},[3427],{"type":15,"tag":131,"props":3428,"children":3429},{"style":138},[3430],{"type":21,"value":2678},{"type":15,"tag":131,"props":3432,"children":3433},{"class":133,"line":401},[3434],{"type":15,"tag":131,"props":3435,"children":3436},{"emptyLinePlaceholder":8},[3437],{"type":21,"value":398},{"type":15,"tag":131,"props":3439,"children":3440},{"class":133,"line":437},[3441,3445,3449,3453,3458],{"type":15,"tag":131,"props":3442,"children":3443},{"style":441},[3444],{"type":21,"value":549},{"type":15,"tag":131,"props":3446,"children":3447},{"style":441},[3448],{"type":21,"value":554},{"type":15,"tag":131,"props":3450,"children":3451},{"style":441},[3452],{"type":21,"value":559},{"type":15,"tag":131,"props":3454,"children":3455},{"style":562},[3456],{"type":21,"value":3457}," SfThumbnail",{"type":15,"tag":131,"props":3459,"children":3460},{"style":138},[3461],{"type":21,"value":2832},{"type":15,"tag":131,"props":3463,"children":3464},{"class":133,"line":476},[3465,3470,3474,3479,3483,3487],{"type":15,"tag":131,"props":3466,"children":3468},{"style":3467},"--shiki-default:#E06C75;--shiki-default-font-style:italic",[3469],{"type":21,"value":2841},{"type":15,"tag":131,"props":3471,"children":3472},{"style":603},[3473],{"type":21,"value":2545},{"type":15,"tag":131,"props":3475,"children":3476},{"style":624},[3477],{"type":21,"value":3478}," SfThumbnailSize",{"type":15,"tag":131,"props":3480,"children":3481},{"style":138},[3482],{"type":21,"value":2929},{"type":15,"tag":131,"props":3484,"children":3485},{"style":144},[3486],{"type":21,"value":2934},{"type":15,"tag":131,"props":3488,"children":3489},{"style":138},[3490],{"type":21,"value":2583},{"type":15,"tag":131,"props":3492,"children":3493},{"class":133,"line":2821},[3494,3499],{"type":15,"tag":131,"props":3495,"children":3496},{"style":3467},[3497],{"type":21,"value":3498},"  children",{"type":15,"tag":131,"props":3500,"children":3501},{"style":138},[3502],{"type":21,"value":2583},{"type":15,"tag":131,"props":3504,"children":3505},{"class":133,"line":2835},[3506,3511],{"type":15,"tag":131,"props":3507,"children":3508},{"style":3467},[3509],{"type":21,"value":3510},"  className",{"type":15,"tag":131,"props":3512,"children":3513},{"style":138},[3514],{"type":21,"value":2583},{"type":15,"tag":131,"props":3516,"children":3517},{"class":133,"line":2849},[3518,3523],{"type":15,"tag":131,"props":3519,"children":3520},{"style":138},[3521],{"type":21,"value":3522},"  ...",{"type":15,"tag":131,"props":3524,"children":3525},{"style":3467},[3526],{"type":21,"value":3527},"attributes\n",{"type":15,"tag":131,"props":3529,"children":3530},{"class":133,"line":2910},[3531,3536,3540,3545,3550,3554,3559,3563,3568],{"type":15,"tag":131,"props":3532,"children":3533},{"style":138},[3534],{"type":21,"value":3535},"}: ",{"type":15,"tag":131,"props":3537,"children":3538},{"style":624},[3539],{"type":21,"value":3257},{"type":15,"tag":131,"props":3541,"children":3542},{"style":138},[3543],{"type":21,"value":3544},"): ",{"type":15,"tag":131,"props":3546,"children":3547},{"style":624},[3548],{"type":21,"value":3549},"React",{"type":15,"tag":131,"props":3551,"children":3552},{"style":138},[3553],{"type":21,"value":2929},{"type":15,"tag":131,"props":3555,"children":3556},{"style":624},[3557],{"type":21,"value":3558},"JSX",{"type":15,"tag":131,"props":3560,"children":3561},{"style":138},[3562],{"type":21,"value":2929},{"type":15,"tag":131,"props":3564,"children":3565},{"style":624},[3566],{"type":21,"value":3567},"Element",{"type":15,"tag":131,"props":3569,"children":3570},{"style":138},[3571],{"type":21,"value":2550},{"type":15,"tag":131,"props":3573,"children":3574},{"class":133,"line":2941},[3575,3579],{"type":15,"tag":131,"props":3576,"children":3577},{"style":441},[3578],{"type":21,"value":578},{"type":15,"tag":131,"props":3580,"children":3581},{"style":138},[3582],{"type":21,"value":583},{"type":15,"tag":131,"props":3584,"children":3585},{"class":133,"line":2950},[3586,3590],{"type":15,"tag":131,"props":3587,"children":3588},{"style":138},[3589],{"type":21,"value":195},{"type":15,"tag":131,"props":3591,"children":3592},{"style":144},[3593],{"type":21,"value":3087},{"type":15,"tag":131,"props":3595,"children":3596},{"class":133,"line":2959},[3597,3602,3606,3611,3615,3620,3625,3629,3634,3639,3643,3648,3652,3657],{"type":15,"tag":131,"props":3598,"children":3599},{"style":597},[3600],{"type":21,"value":3601},"      className",{"type":15,"tag":131,"props":3603,"children":3604},{"style":603},[3605],{"type":21,"value":176},{"type":15,"tag":131,"props":3607,"children":3608},{"style":441},[3609],{"type":21,"value":3610},"{",{"type":15,"tag":131,"props":3612,"children":3613},{"style":562},[3614],{"type":21,"value":2786},{"type":15,"tag":131,"props":3616,"children":3617},{"style":138},[3618],{"type":21,"value":3619},"(",{"type":15,"tag":131,"props":3621,"children":3622},{"style":179},[3623],{"type":21,"value":3624},"'rounded-full overflow-hidden bg-clip-content p-0.5'",{"type":15,"tag":131,"props":3626,"children":3627},{"style":138},[3628],{"type":21,"value":89},{"type":15,"tag":131,"props":3630,"children":3631},{"style":144},[3632],{"type":21,"value":3633},"sizeClasses",{"type":15,"tag":131,"props":3635,"children":3636},{"style":138},[3637],{"type":21,"value":3638},"[",{"type":15,"tag":131,"props":3640,"children":3641},{"style":144},[3642],{"type":21,"value":79},{"type":15,"tag":131,"props":3644,"children":3645},{"style":138},[3646],{"type":21,"value":3647},"], ",{"type":15,"tag":131,"props":3649,"children":3650},{"style":144},[3651],{"type":21,"value":2392},{"type":15,"tag":131,"props":3653,"children":3654},{"style":138},[3655],{"type":21,"value":3656},")",{"type":15,"tag":131,"props":3658,"children":3659},{"style":441},[3660],{"type":21,"value":804},{"type":15,"tag":131,"props":3662,"children":3663},{"class":133,"line":2972},[3664,3669,3673],{"type":15,"tag":131,"props":3665,"children":3666},{"style":597},[3667],{"type":21,"value":3668},"      data-testid",{"type":15,"tag":131,"props":3670,"children":3671},{"style":603},[3672],{"type":21,"value":176},{"type":15,"tag":131,"props":3674,"children":3675},{"style":179},[3676],{"type":21,"value":3677},"\"thumbnail\"\n",{"type":15,"tag":131,"props":3679,"children":3680},{"class":133,"line":2994},[3681,3686,3691,3696],{"type":15,"tag":131,"props":3682,"children":3683},{"style":441},[3684],{"type":21,"value":3685},"      {",{"type":15,"tag":131,"props":3687,"children":3688},{"style":138},[3689],{"type":21,"value":3690},"...",{"type":15,"tag":131,"props":3692,"children":3693},{"style":144},[3694],{"type":21,"value":3695},"attributes",{"type":15,"tag":131,"props":3697,"children":3698},{"style":441},[3699],{"type":21,"value":804},{"type":15,"tag":131,"props":3701,"children":3702},{"class":133,"line":3002},[3703],{"type":15,"tag":131,"props":3704,"children":3705},{"style":138},[3706],{"type":21,"value":3707},"    >\n",{"type":15,"tag":131,"props":3709,"children":3710},{"class":133,"line":3037},[3711,3715,3719],{"type":15,"tag":131,"props":3712,"children":3713},{"style":441},[3714],{"type":21,"value":3685},{"type":15,"tag":131,"props":3716,"children":3717},{"style":144},[3718],{"type":21,"value":2419},{"type":15,"tag":131,"props":3720,"children":3721},{"style":441},[3722],{"type":21,"value":804},{"type":15,"tag":131,"props":3724,"children":3725},{"class":133,"line":3053},[3726,3730,3734],{"type":15,"tag":131,"props":3727,"children":3728},{"style":138},[3729],{"type":21,"value":780},{"type":15,"tag":131,"props":3731,"children":3732},{"style":144},[3733],{"type":21,"value":165},{"type":15,"tag":131,"props":3735,"children":3736},{"style":138},[3737],{"type":21,"value":151},{"type":15,"tag":131,"props":3739,"children":3740},{"class":133,"line":3061},[3741],{"type":15,"tag":131,"props":3742,"children":3743},{"style":138},[3744],{"type":21,"value":796},{"type":15,"tag":131,"props":3746,"children":3747},{"class":133,"line":3077},[3748],{"type":15,"tag":131,"props":3749,"children":3750},{"style":138},[3751],{"type":21,"value":804},{"type":15,"tag":3753,"props":3754,"children":3755},"style",{},[3756],{"type":21,"value":3757},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":9,"searchDepth":275,"depth":154,"links":3759},[3760,3767,3768,3769],{"id":58,"depth":154,"text":61,"children":3761},[3762,3763,3764,3765,3766],{"id":65,"depth":189,"text":68},{"id":807,"depth":189,"text":810},{"id":1093,"depth":189,"text":1096},{"id":1378,"depth":189,"text":1381},{"id":1792,"depth":189,"text":1795},{"id":2195,"depth":154,"text":2198},{"id":2209,"depth":154,"text":2212},{"id":2440,"depth":154,"text":2443},"markdown","content:_components:thumbnail.md","content","_components\u002Fthumbnail.md","_components\u002Fthumbnail","md",[3777],{"_path":3778,"_dir":9,"_draft":7,"_partial":8,"_locale":9,"navigation":3779,"sidebarRoot":8,"_id":3782,"_type":3783,"title":3784,"_source":3772,"_file":3785,"_stem":3786,"_extension":3787},"\u002F_dir",{"title":3780,"icon":3781},"Storefront UI","IconStorefrontUi","content:_dir.yml","yaml","Dir","_dir.yml","_dir","yml",{"nav":3789,"sidebarRoot":3791},[3790,3793,3805],{"title":3780,"_path":3791,"_id":3782,"layout":3792,"sidebarRoot":8,"icon":3781},"\u002F","fullscreen",{"title":3794,"_path":3795,"children":3796,"_id":3804,"layout":2477},"Getting Started","\u002Fgetting-started",[3797,3800],{"title":3798,"_path":3795,"_id":3799,"layout":2477},"Installation","content:2.getting-started:1.index.md",{"title":3801,"_path":3802,"_id":3803,"layout":2477},"Browser support","\u002Fgetting-started\u002Fbrowser-support","content:2.getting-started:2.browser-support.md","content:2.getting-started:_dir.yml",{"title":3806,"_path":3807,"children":3808},"Customization","\u002Fcustomization",[3809,3813,3817,3821],{"title":3810,"_path":3811,"_id":3812,"layout":2477},"Overriding Default Styles","\u002Fcustomization\u002Foverriding-default-styles","content:3.customization:overriding-default-styles.md",{"title":3814,"_path":3815,"_id":3816,"layout":2477},"Prose styling","\u002Fcustomization\u002Fprose","content:3.customization:prose.md",{"title":3818,"_path":3819,"_id":3820,"layout":2477},"Theming","\u002Fcustomization\u002Ftheming","content:3.customization:theming.md",{"title":3822,"_path":3823,"_id":3824,"layout":2477},"Typography","\u002Fcustomization\u002Ftypography","content:3.customization:typography.md",1787574902178]