4a:I[76747,["/_next/static/immutable/chunks/35km478usng7k.js","/_next/static/immutable/chunks/18dj0gofn5_vu.js","/_next/static/immutable/chunks/1vemirphsh0eb.js","/_next/static/immutable/chunks/3b7622dnlbkgb.js","/_next/static/immutable/chunks/1srttt7glf0m4.js","/_next/static/immutable/chunks/2zichxhybgxnp.js","/_next/static/immutable/chunks/1ed1ta-n9_9n1.js","/_next/static/immutable/chunks/0q70c7f1uahon.js","/_next/static/immutable/chunks/1a23ztz80wggp.js","/_next/static/immutable/chunks/37bzleaptmvqe.js","/_next/static/immutable/chunks/44_8k37d3eqrh.js","/_next/static/immutable/chunks/0pw0h06e-7vhc.js","/_next/static/immutable/chunks/32hur0w2o7qao.js","/_next/static/immutable/chunks/3savctg96h6ye.js","/_next/static/immutable/chunks/1n3wz5pd7ps-_.js","/_next/static/immutable/chunks/1c-zp2pq-a8yl.js","/_next/static/immutable/chunks/16k5rkjlogttz.js","/_next/static/immutable/chunks/2wuwfx2x_2pfp.js","/_next/static/immutable/chunks/1k298fo7ixvmu.js","/_next/static/immutable/chunks/2gsfx4ptldnac.js","/_next/static/immutable/chunks/0p4bn-x8nrvb7.js","/_next/static/immutable/chunks/3b5xa4lv3j8k0.js","/_next/static/immutable/chunks/06_f_uqrnu_vu.js","/_next/static/immutable/chunks/2blz901koutyh.js","/_next/static/immutable/chunks/21yjkyiiv-hn8.js","/_next/static/immutable/chunks/0h5qkv9ncig8d.js","/_next/static/immutable/chunks/32ezenbwp1g06.js","/_next/static/immutable/chunks/29r-bqzzhoroh.js","/_next/static/immutable/chunks/3cef87_qm52cl.js","/_next/static/immutable/chunks/230n-f-p2sct9.js","/_next/static/immutable/chunks/2zpwv00bg176z.js","/_next/static/immutable/chunks/28kv1a2ci9rdx.js","/_next/static/immutable/chunks/30co-08nilszl.js","/_next/static/immutable/chunks/300n9xtsavhmo.js","/_next/static/immutable/chunks/0ap0ou1z5ytr8.js","/_next/static/immutable/chunks/03-wfm4vrimvz.js","/_next/static/immutable/chunks/2ky2c02y4t1-l.js","/_next/static/immutable/chunks/3e_0fgqz5217e.js"],"CollapsibleProvider"] 4b:I[724247,["/_next/static/immutable/chunks/35km478usng7k.js","/_next/static/immutable/chunks/18dj0gofn5_vu.js","/_next/static/immutable/chunks/1vemirphsh0eb.js","/_next/static/immutable/chunks/3b7622dnlbkgb.js","/_next/static/immutable/chunks/1srttt7glf0m4.js","/_next/static/immutable/chunks/2zichxhybgxnp.js","/_next/static/immutable/chunks/1ed1ta-n9_9n1.js","/_next/static/immutable/chunks/0q70c7f1uahon.js","/_next/static/immutable/chunks/1a23ztz80wggp.js","/_next/static/immutable/chunks/37bzleaptmvqe.js","/_next/static/immutable/chunks/44_8k37d3eqrh.js","/_next/static/immutable/chunks/0pw0h06e-7vhc.js","/_next/static/immutable/chunks/32hur0w2o7qao.js","/_next/static/immutable/chunks/3savctg96h6ye.js","/_next/static/immutable/chunks/1n3wz5pd7ps-_.js","/_next/static/immutable/chunks/1c-zp2pq-a8yl.js","/_next/static/immutable/chunks/16k5rkjlogttz.js","/_next/static/immutable/chunks/2wuwfx2x_2pfp.js","/_next/static/immutable/chunks/1k298fo7ixvmu.js","/_next/static/immutable/chunks/2gsfx4ptldnac.js","/_next/static/immutable/chunks/0p4bn-x8nrvb7.js","/_next/static/immutable/chunks/3b5xa4lv3j8k0.js","/_next/static/immutable/chunks/06_f_uqrnu_vu.js","/_next/static/immutable/chunks/2blz901koutyh.js","/_next/static/immutable/chunks/21yjkyiiv-hn8.js","/_next/static/immutable/chunks/0h5qkv9ncig8d.js","/_next/static/immutable/chunks/32ezenbwp1g06.js","/_next/static/immutable/chunks/29r-bqzzhoroh.js","/_next/static/immutable/chunks/3cef87_qm52cl.js","/_next/static/immutable/chunks/230n-f-p2sct9.js","/_next/static/immutable/chunks/2zpwv00bg176z.js","/_next/static/immutable/chunks/28kv1a2ci9rdx.js","/_next/static/immutable/chunks/30co-08nilszl.js","/_next/static/immutable/chunks/300n9xtsavhmo.js","/_next/static/immutable/chunks/0ap0ou1z5ytr8.js","/_next/static/immutable/chunks/03-wfm4vrimvz.js","/_next/static/immutable/chunks/2ky2c02y4t1-l.js","/_next/static/immutable/chunks/3e_0fgqz5217e.js"],"CollapsibleContent"] 4c:I[946480,["/_next/static/immutable/chunks/35km478usng7k.js","/_next/static/immutable/chunks/18dj0gofn5_vu.js","/_next/static/immutable/chunks/1vemirphsh0eb.js","/_next/static/immutable/chunks/3b7622dnlbkgb.js","/_next/static/immutable/chunks/1srttt7glf0m4.js","/_next/static/immutable/chunks/2zichxhybgxnp.js","/_next/static/immutable/chunks/1ed1ta-n9_9n1.js","/_next/static/immutable/chunks/0q70c7f1uahon.js","/_next/static/immutable/chunks/1a23ztz80wggp.js","/_next/static/immutable/chunks/37bzleaptmvqe.js","/_next/static/immutable/chunks/44_8k37d3eqrh.js","/_next/static/immutable/chunks/0pw0h06e-7vhc.js","/_next/static/immutable/chunks/32hur0w2o7qao.js","/_next/static/immutable/chunks/3savctg96h6ye.js","/_next/static/immutable/chunks/1n3wz5pd7ps-_.js","/_next/static/immutable/chunks/1c-zp2pq-a8yl.js","/_next/static/immutable/chunks/16k5rkjlogttz.js","/_next/static/immutable/chunks/2wuwfx2x_2pfp.js","/_next/static/immutable/chunks/1k298fo7ixvmu.js","/_next/static/immutable/chunks/2gsfx4ptldnac.js","/_next/static/immutable/chunks/0p4bn-x8nrvb7.js","/_next/static/immutable/chunks/3b5xa4lv3j8k0.js","/_next/static/immutable/chunks/06_f_uqrnu_vu.js","/_next/static/immutable/chunks/2blz901koutyh.js","/_next/static/immutable/chunks/21yjkyiiv-hn8.js","/_next/static/immutable/chunks/0h5qkv9ncig8d.js","/_next/static/immutable/chunks/32ezenbwp1g06.js","/_next/static/immutable/chunks/29r-bqzzhoroh.js","/_next/static/immutable/chunks/3cef87_qm52cl.js","/_next/static/immutable/chunks/230n-f-p2sct9.js","/_next/static/immutable/chunks/2zpwv00bg176z.js","/_next/static/immutable/chunks/28kv1a2ci9rdx.js","/_next/static/immutable/chunks/30co-08nilszl.js","/_next/static/immutable/chunks/300n9xtsavhmo.js","/_next/static/immutable/chunks/0ap0ou1z5ytr8.js","/_next/static/immutable/chunks/03-wfm4vrimvz.js","/_next/static/immutable/chunks/2ky2c02y4t1-l.js","/_next/static/immutable/chunks/3e_0fgqz5217e.js"],"CopyButton"] 4d:T16af,

import { Stack } from '@/styled-system/jsx'
import { For, Text } from '@cerberus/react/react'

export function BasicDemo() {
  const data = ['Cerberus', 'Design', 'System', 'Roolz', 'D00dz']
  return (
    <Stack gap="md">
      <For each={data}>
        {(item, index) => (
          <Text key={item} textStyle="body-lg">
            {index}. {item}
          </Text>
        )}
      </For>
    </Stack>
  )
}

40:["$","div",null,{"ref":"$undefined","data-slot":"example:root","className":"cerberus-d_flex cerberus-ai_center cerberus-gap_0 cerberus-flex-d_column cerberus-bg-c_page.surface.initial/20 cerberus-bkdp_auto cerberus-bkdp-blur_16px cerberus-bkdp-saturate_180% cerberus-bd_1px_solid cerberus-bd-c_page.border.initial/30 cerberus-bx-sh_0_4px_30px_rgba(0,_0,_0,_0.1),_inset_0_1px_0_rgba(255,_255,_255,_0.2) cerberus-bdr_lg cerberus-w_full","children":[["$","div",null,{"ref":"$undefined","data-slot":"example:preview","className":"cerberus-d_flex cerberus-ai_center cerberus-jc_center cerberus-gap_8px cerberus-flex-d_row cerberus-py_md cerberus-w_full","children":["$","div",null,{"ref":"$undefined","className":"cerberus-d_flex cerberus-flex-d_column cerberus-gap_md","children":[["$","p","Cerberus",{"ref":"$undefined","className":"cerberus-textStyle_body-lg","children":[0,". ","Cerberus"]}],["$","p","Design",{"ref":"$undefined","className":"cerberus-textStyle_body-lg","children":[1,". ","Design"]}],["$","p","System",{"ref":"$undefined","className":"cerberus-textStyle_body-lg","children":[2,". ","System"]}],["$","p","Roolz",{"ref":"$undefined","className":"cerberus-textStyle_body-lg","children":[3,". ","Roolz"]}],["$","p","D00dz",{"ref":"$undefined","className":"cerberus-textStyle_body-lg","children":[4,". ","D00dz"]}]]}]}],["$","$L4a",null,{"children":["$","$L4b",null,{"ref":"$undefined","className":"cerberus-pos_relative cerberus-collapsible__content cerberus-collapsible__content--effect_expandIn","children":[["$","div",null,{"ref":"$undefined","className":"cerberus-d_inline-flex cerberus-jc_center cerberus-ai_center cerberus-pos_absolute cerberus-inset-bs_6 cerberus-inset-be_auto cerberus-inset-s_auto cerberus-inset-e_6 cerberus-translate_50%_-50% cerberus-z_decorator","children":["$","$L4c",null,{"content":"import { Stack } from '@/styled-system/jsx'\nimport { For, Text } from '@cerberus/react/react'\n\nexport function BasicDemo() {\n const data = ['Cerberus', 'Design', 'System', 'Roolz', 'D00dz']\n return (\n \n \n {(item, index) => (\n \n {index}. {item}\n \n )}\n \n \n )\n}\n"}]}],["$","div",null,{"ref":"$undefined","className":"cerberus-ov_auto cerberus-h_auto cerberus-w_100% cerberus-scr-bhv_smooth cerberus-scr-bar-g_stable [&::-webkit-scrollbar]:cerberus-d_none [&::-webkit-scrollbar]:cerberus-w_0.5em [&::-webkit-scrollbar-track]:cerberus-bg_transparent [&::-webkit-scrollbar-track]:cerberus-ring_none [&::-webkit-scrollbar-thumb]:cerberus-bg-c_page.border.100 [&::-webkit-scrollbar-thumb]:cerberus-bdr_5px [&::-webkit-scrollbar-thumb]:cerberus-ring_none [&:hover::-webkit-scrollbar-thumb]:cerberus-bg-c_page.border.100 cerberus-bg-c_var(--shiki-background) cerberus-max-h_xl cerberus-max-w_full cerberus-pos_relative","children":["$","div",null,{"ref":"$undefined","dangerouslySetInnerHTML":{"__html":"$4d"},"suppressHydrationWarning":true,"className":"","children":"$undefined"}]}]]}]}]]}]

Prop	Type	Required	Description
`each`	`Array`	Yes	The list of data you wish to loop through.
`fallback`	`ReactNode`	No	Content to render when `each` is empty.

Prop	Type	Required	Description
`each`	`Array`	Yes	The list of data you wish to loop through.
`fallback`	`ReactNode`	No	Content to render when `each` is empty.

For

Import

Usage

API

Props

For

Import

Usage

API

Props