About Canon
About Canon
Canon is a design system created specifically for Backstage, built with React, TypeScript, and vanilla CSS. This open-source library is hosted in the Backstage monorepo. While it can be used in other projects, Canon is designed to deliver a consistent, accessible, and extensible experience tailored to Backstage users.
@@ -19,4 +19,4 @@ contributing to Canon, please read our contributing guide and our code of conduct.License
Canon is licensed under the Apache 2.0 license. See the LICENSE file for more details.
Canon is licensed under the Apache 2.0 license. See the LICENSE file for more details.
Box
Box
Box is the lowest-level component in Canon. It provides a consistent API for styling and layout.
API reference
Box
This is the Box component, our lowest-level component. Here are all the @@ -21,4 +21,4 @@
padding={{ xs: 'sm', md: 'md' }} borderRadius={{ xs: 'sm', md: 'md' }}> Hello World -</Box>
<Box>\n <DecorativeBox />\n</Box>import { Box } from \"@backstage/canon\";\n\n<Box /><Box padding=\"md\" borderRadius=\"md\">Hello World</Box>Button
Button
A button component that can be used to trigger actions.
API reference
| Prop | Type | Responsive |
|---|---|---|
| size | smallmedium | Yes |
| variant | primarysecondarytertiary | Yes |
| disabled | boolean | No |
| children | ReactNode | No |
| className | string | No |
| style | CSSProperties | No |
Examples
variant={{ xs: 'primary', sm: 'secondary', md: 'tertiary' }} size={{ xs: 'small', sm: 'medium' }}> Button -</Button>
<Inline alignY="center">
<Button iconStart="cloud" variant="primary">
Button
@@ -72,3 +70,5 @@ d:["$","div",null,{"className":"styles_codeBlock__cJkhk","children":["$undefined
size={{ xs: 'small', sm: 'medium' }}>
Button
</Button>Checkbox
Checkbox
A checkbox component that can be used to trigger actions.
API reference
Base UI
This component is using Base UI under the hood. While most of the original props are available, we have made some changes to the API to fit our needs.
| Prop | Type | Responsive |
|---|---|---|
| label | string | No |
| defaultChecked | boolean'indeterminate' | No |
| checked | boolean'indeterminate' | No |
| onChange | (checked: boolean | 'indeterminate') => void | No |
| disabled | boolean | No |
| required | boolean | No |
| name | string | No |
| value | string | No |
| className | string | No |
| style | CSSProperties | No |
<Checkbox checked /> <Checkbox label="Checkbox" /> <Checkbox label="Checkbox" checked /> -</Inline>
<Checkbox label=\"Accept terms and conditions\" />Container
Container
The container component let you use our default max-width and center the content on the page.
API reference
| Prop | Type | Responsive |
|---|---|---|
| children | ReactNode | No |
| className | string | No |
| marginY | 2xsxssmmdlgxl2xl3xl4xl5xl | Yes |
| marginBottom | 2xsxssmmdlgxl2xl3xl4xl5xl | Yes |
| marginTop | 2xsxssmmdlgxl2xl3xl4xl5xl | Yes |
| paddingY | 2xsxssmmdlgxl2xl3xl4xl5xl | Yes |
| paddingBottom | 2xsxssmmdlgxl2xl3xl4xl5xl | Yes |
| paddingTop | 2xsxssmmdlgxl2xl3xl4xl5xl | Yes |
| style | CSSProperties | No |
Examples
<Box>Hello World</Box> <Box>Hello World</Box> <Box>Hello World</Box> -</Container>
<Container>\n <DecorativeBox />\n</Container>Field
Field
A wrapper around Input or Select component to add label, description and error messages..
Visible on your profile
API reference
Base UI
This component is using Base UI under the hood. While most of the original props are available, we have made some changes to the API to fit our needs.
Field.Root
@@ -23,4 +23,4 @@<Field.Label>Name</Field.Label> <Field.Description>Visible on your profile</Field.Description> <Input placeholder="Enter your name" /> -</Field>
"}]," element."]}],"\n",["$","div",null,{"className":"styles_wrapper__sBS6b","children":["$","table",null,{"className":"styles_table__ij6HO","children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Prop"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Type"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Responsive"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"name"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"string"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"disabled"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"boolean"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"invalid"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"boolean"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"validate"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"(value) => string | string[] | null | Promise"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"validationMode"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"onBlur"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"onChange"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"validationDebounceTime"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"number"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"className"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"string"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"style"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"CSSProperties"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}]]}]]}]}],"\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"Field.Label"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":["An accessible label that is automatically associated with the field control. Renders a ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"
\ No newline at end of file
diff --git a/components/grid.txt b/components/grid.txt
index 2001657..c10def2 100644
--- a/components/grid.txt
+++ b/components/grid.txt
@@ -21,7 +21,7 @@ b:I[7127,["3738","static/chunks/42437bae-f0d7b82f7021b572.js","6211","static/chu
1d:{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"}
1e:{"display":"inline-block"}
1f:{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0}
-0:["69ZxaUa_enBpiXozIfKES",[[["",{"children":["(docs)",{"children":["components",{"children":["grid",{"children":["__PAGE__",{}]}]}]}]},"$undefined","$undefined",true],["",{"children":["(docs)",{"children":["components",{"children":["grid",{"children":["__PAGE__",{},[["$L1",[["$","div",null,{"className":"canon-Box","style":{"marginTop":"4rem"},"children":["$","h1",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"3rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"4rem","marginBottom":"0.5rem"},"children":"Grid"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"A layout component that helps to create simple column-based layouts as well as\nmore complex ones."}],"\n",["$","$L2",null,{"className":"styles_container__T5X7T","defaultOpen":false,"children":[["$","div",null,{"className":"styles_preview__tlnTq","children":[["$","div",null,{"className":"styles_previewContent__ZqyBx undefined","style":{"padding":"4rem 2rem"},"children":["$","$L3",null,{}]}],["$","$L4",null,{"className":"styles_trigger__oILEp","children":["$","$L5",null,{"variant":"body","children":"View code"}]}]]}],["$","$L6",null,{"className":"styles_panel__rSJk7","children":"$L7"}]]}],"\n",["$","$L8",null,{"children":[["$","$L9",null,{"children":["$","$La",null,{"children":"Usage"}]}],["$","$Lb",null,{"children":"$Lc"}]]}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"API reference"}]}],"\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"Grid"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"This is the grid container component. It will help to define the number of\ncolumns that will be used in the grid. You can also define the gap between the\ncolumns. All values are responsive."}],"\n",["$","div",null,{"className":"styles_wrapper__sBS6b","children":["$","table",null,{"className":"styles_table__ij6HO","children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Prop"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Type"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Responsive"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"columns"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":1}],["$","span",null,{"className":"styles_chip__XPG78 ","children":2}],["$","span",null,{"className":"styles_chip__XPG78 ","children":3}],["$","span",null,{"className":"styles_chip__XPG78 ","children":4}],["$","span",null,{"className":"styles_chip__XPG78 ","children":5}],["$","span",null,{"className":"styles_chip__XPG78 ","children":6}],["$","span",null,{"className":"styles_chip__XPG78 ","children":7}],["$","span",null,{"className":"styles_chip__XPG78 ","children":8}],["$","span",null,{"className":"styles_chip__XPG78 ","children":9}],["$","span",null,{"className":"styles_chip__XPG78 ","children":10}],["$","span",null,{"className":"styles_chip__XPG78 ","children":11}],["$","span",null,{"className":"styles_chip__XPG78 ","children":12}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"auto"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"gap"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"children"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"ReactNode"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"className"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"string"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"style"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"CSSProperties"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}]]}]]}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"The grid component also accepts all the spacing props from the Box component."}],"\n",["$","div",null,{"className":"styles_wrapper__sBS6b","children":["$","table",null,{"className":"styles_table__ij6HO","children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Prop"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Type"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Responsive"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"margin"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"marginBottom"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"marginLeft"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"marginRight"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"marginTop"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"marginX"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"marginY"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"padding"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"paddingBottom"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"paddingLeft"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"paddingRight"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"paddingTop"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"paddingX"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"paddingY"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}]]}]]}]}],"\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"Grid.Item"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":["If you need more control over the columns, you can use the grid item\ncomponent. This will give you access to ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"rowSpan"}],", ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"colSpan"}],", ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"start"}]," and\n",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"end"}],". All values are responsive. This component is optional, you can use any\nelements directly if you prefer."]}],"\n",["$","div",null,{"className":"styles_wrapper__sBS6b","children":["$","table",null,{"className":"styles_table__ij6HO","children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Prop"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Type"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Responsive"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"colSpan"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":1}],["$","span",null,{"className":"styles_chip__XPG78 ","children":2}],["$","span",null,{"className":"styles_chip__XPG78 ","children":3}],["$","span",null,{"className":"styles_chip__XPG78 ","children":4}],["$","span",null,{"className":"styles_chip__XPG78 ","children":5}],["$","span",null,{"className":"styles_chip__XPG78 ","children":6}],["$","span",null,{"className":"styles_chip__XPG78 ","children":7}],["$","span",null,{"className":"styles_chip__XPG78 ","children":8}],["$","span",null,{"className":"styles_chip__XPG78 ","children":9}],["$","span",null,{"className":"styles_chip__XPG78 ","children":10}],["$","span",null,{"className":"styles_chip__XPG78 ","children":11}],["$","span",null,{"className":"styles_chip__XPG78 ","children":12}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"full"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"rowSpan"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":1}],["$","span",null,{"className":"styles_chip__XPG78 ","children":2}],["$","span",null,{"className":"styles_chip__XPG78 ","children":3}],["$","span",null,{"className":"styles_chip__XPG78 ","children":4}],["$","span",null,{"className":"styles_chip__XPG78 ","children":5}],["$","span",null,{"className":"styles_chip__XPG78 ","children":6}],["$","span",null,{"className":"styles_chip__XPG78 ","children":7}],["$","span",null,{"className":"styles_chip__XPG78 ","children":8}],["$","span",null,{"className":"styles_chip__XPG78 ","children":9}],["$","span",null,{"className":"styles_chip__XPG78 ","children":10}],["$","span",null,{"className":"styles_chip__XPG78 ","children":11}],["$","span",null,{"className":"styles_chip__XPG78 ","children":12}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"full"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"start"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":1}],["$","span",null,{"className":"styles_chip__XPG78 ","children":2}],["$","span",null,{"className":"styles_chip__XPG78 ","children":3}],["$","span",null,{"className":"styles_chip__XPG78 ","children":4}],["$","span",null,{"className":"styles_chip__XPG78 ","children":5}],["$","span",null,{"className":"styles_chip__XPG78 ","children":6}],["$","span",null,{"className":"styles_chip__XPG78 ","children":7}],["$","span",null,{"className":"styles_chip__XPG78 ","children":8}],["$","span",null,{"className":"styles_chip__XPG78 ","children":9}],["$","span",null,{"className":"styles_chip__XPG78 ","children":10}],["$","span",null,{"className":"styles_chip__XPG78 ","children":11}],["$","span",null,{"className":"styles_chip__XPG78 ","children":12}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"auto"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"end"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":1}],["$","span",null,{"className":"styles_chip__XPG78 ","children":2}],["$","span",null,{"className":"styles_chip__XPG78 ","children":3}],["$","span",null,{"className":"styles_chip__XPG78 ","children":4}],["$","span",null,{"className":"styles_chip__XPG78 ","children":5}],["$","span",null,{"className":"styles_chip__XPG78 ","children":6}],["$","span",null,{"className":"styles_chip__XPG78 ","children":7}],["$","span",null,{"className":"styles_chip__XPG78 ","children":8}],["$","span",null,{"className":"styles_chip__XPG78 ","children":9}],["$","span",null,{"className":"styles_chip__XPG78 ","children":10}],["$","span",null,{"className":"styles_chip__XPG78 ","children":11}],["$","span",null,{"className":"styles_chip__XPG78 ","children":12}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"auto"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"children"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"ReactNode"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"className"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"string"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"style"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"CSSProperties"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}]]}]]}]}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"Examples"}]}],"\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"Simple grid"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"A simple grid with 3 columns and a gap of md."}],"\n","$Ld","\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"Complex grid"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"You can also use the grid item to create more complex layouts. In this example\nthe first column will span 1 column and the second column will span 2 columns."}],"\n","$Le","\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"Mixing rows and columns"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":["The grid item component also supports the ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"rowSpan"}]," prop, which allows you to\nspan multiple rows within the grid layout. In this example, the first item\nwill span 2 rows to achieve a dynamic and flexible grid structure."]}],"\n","$Lf","\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"Responsive grid"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"The grid component also supports responsive values, making it easy to create\nresponsive designs."}],"\n","$L10","\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"Start and End"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"The start and end props can be used to position the item in the grid."}],"\n","$L11"],[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/0199d4a4f0fa1d14.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/css/ca9ae3edf20ccb56.css","precedence":"next","crossOrigin":"$undefined"}]]],null],null]},[null,["$","$L12",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","components","children","grid","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L13",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[null,["$","$L12",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","components","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L13",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/1196c23d52bc6240.css","precedence":"next","crossOrigin":"$undefined"}]],["$","div",null,{"className":"layout_pageContainer__Io_cr","children":["$","$L12",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L13",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]}]],null],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/d780293ffc4ef285.css","precedence":"next","crossOrigin":"$undefined"}]],["$","html",null,{"lang":"en","data-theme":"light","data-theme-name":"default","suppressHydrationWarning":true,"children":["$","body",null,{"children":["$","$L14",null,{"children":["$","div",null,{"className":"page_global__DlbOF","children":[["$","div",null,{"className":"Sidebar_sidebar__86IlD","children":[["$","div",null,{"className":"Sidebar_logoContainer__OcEVQ","children":["$","$L15",null,{"href":"/","children":["$","svg",null,{"width":"89","height":"27","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"Sidebar_logo__P79Og","children":[["$","path",null,{"d":"$16"}],["$","path",null,{"d":"M14.037 16.729a4.237 4.237 0 0 0 4.234-4.24 4.237 4.237 0 0 0-4.234-4.242 4.237 4.237 0 0 0-4.234 4.241 4.237 4.237 0 0 0 4.234 4.24Z"}]]}]}]}],["$","div",null,{"className":"Sidebar_menu__sTTeJ","children":[["$","$L17",null,{}],["$","$L18",null,{}]]}]]}],["$","div",null,{"className":"page_container__aoG4z","children":[["$","div",null,{"className":"styles_toolbar__Dfx8Q","children":[["$","div",null,{"children":["$","$L19",null,{}]}],["$","div",null,{"className":"styles_actions__hQrVs","children":[["$","$L1a",null,{}],["$","$L1b",null,{}]]}]]}],["$","$L12",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L13",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":"$1c","children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":"$1d","children":"404"}],["$","div",null,{"style":"$1e","children":["$","h2",null,{"style":"$1f","children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]]}],["$","$L20",null,{}]]}]}]}]}]],null],null],["$L21",null]]]]
+0:["_2li3SoTt_Arxf9uHWRG5",[[["",{"children":["(docs)",{"children":["components",{"children":["grid",{"children":["__PAGE__",{}]}]}]}]},"$undefined","$undefined",true],["",{"children":["(docs)",{"children":["components",{"children":["grid",{"children":["__PAGE__",{},[["$L1",[["$","div",null,{"className":"canon-Box","style":{"marginTop":"4rem"},"children":["$","h1",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"3rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"4rem","marginBottom":"0.5rem"},"children":"Grid"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"A layout component that helps to create simple column-based layouts as well as\nmore complex ones."}],"\n",["$","$L2",null,{"className":"styles_container__T5X7T","defaultOpen":false,"children":[["$","div",null,{"className":"styles_preview__tlnTq","children":[["$","div",null,{"className":"styles_previewContent__ZqyBx undefined","style":{"padding":"4rem 2rem"},"children":["$","$L3",null,{}]}],["$","$L4",null,{"className":"styles_trigger__oILEp","children":["$","$L5",null,{"variant":"body","children":"View code"}]}]]}],["$","$L6",null,{"className":"styles_panel__rSJk7","children":"$L7"}]]}],"\n",["$","$L8",null,{"children":[["$","$L9",null,{"children":["$","$La",null,{"children":"Usage"}]}],["$","$Lb",null,{"children":"$Lc"}]]}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"API reference"}]}],"\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"Grid"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"This is the grid container component. It will help to define the number of\ncolumns that will be used in the grid. You can also define the gap between the\ncolumns. All values are responsive."}],"\n",["$","div",null,{"className":"styles_wrapper__sBS6b","children":["$","table",null,{"className":"styles_table__ij6HO","children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Prop"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Type"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Responsive"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"columns"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":1}],["$","span",null,{"className":"styles_chip__XPG78 ","children":2}],["$","span",null,{"className":"styles_chip__XPG78 ","children":3}],["$","span",null,{"className":"styles_chip__XPG78 ","children":4}],["$","span",null,{"className":"styles_chip__XPG78 ","children":5}],["$","span",null,{"className":"styles_chip__XPG78 ","children":6}],["$","span",null,{"className":"styles_chip__XPG78 ","children":7}],["$","span",null,{"className":"styles_chip__XPG78 ","children":8}],["$","span",null,{"className":"styles_chip__XPG78 ","children":9}],["$","span",null,{"className":"styles_chip__XPG78 ","children":10}],["$","span",null,{"className":"styles_chip__XPG78 ","children":11}],["$","span",null,{"className":"styles_chip__XPG78 ","children":12}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"auto"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"gap"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"children"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"ReactNode"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"className"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"string"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"style"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"CSSProperties"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}]]}]]}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"The grid component also accepts all the spacing props from the Box component."}],"\n",["$","div",null,{"className":"styles_wrapper__sBS6b","children":["$","table",null,{"className":"styles_table__ij6HO","children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Prop"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Type"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Responsive"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"margin"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"marginBottom"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"marginLeft"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"marginRight"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"marginTop"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"marginX"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"marginY"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"padding"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"paddingBottom"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"paddingLeft"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"paddingRight"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"paddingTop"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"paddingX"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"paddingY"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}]]}]]}]}],"\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"Grid.Item"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":["If you need more control over the columns, you can use the grid item\ncomponent. This will give you access to ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"rowSpan"}],", ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"colSpan"}],", ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"start"}]," and\n",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"end"}],". All values are responsive. This component is optional, you can use any\nelements directly if you prefer."]}],"\n",["$","div",null,{"className":"styles_wrapper__sBS6b","children":["$","table",null,{"className":"styles_table__ij6HO","children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Prop"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Type"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Responsive"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"colSpan"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":1}],["$","span",null,{"className":"styles_chip__XPG78 ","children":2}],["$","span",null,{"className":"styles_chip__XPG78 ","children":3}],["$","span",null,{"className":"styles_chip__XPG78 ","children":4}],["$","span",null,{"className":"styles_chip__XPG78 ","children":5}],["$","span",null,{"className":"styles_chip__XPG78 ","children":6}],["$","span",null,{"className":"styles_chip__XPG78 ","children":7}],["$","span",null,{"className":"styles_chip__XPG78 ","children":8}],["$","span",null,{"className":"styles_chip__XPG78 ","children":9}],["$","span",null,{"className":"styles_chip__XPG78 ","children":10}],["$","span",null,{"className":"styles_chip__XPG78 ","children":11}],["$","span",null,{"className":"styles_chip__XPG78 ","children":12}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"full"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"rowSpan"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":1}],["$","span",null,{"className":"styles_chip__XPG78 ","children":2}],["$","span",null,{"className":"styles_chip__XPG78 ","children":3}],["$","span",null,{"className":"styles_chip__XPG78 ","children":4}],["$","span",null,{"className":"styles_chip__XPG78 ","children":5}],["$","span",null,{"className":"styles_chip__XPG78 ","children":6}],["$","span",null,{"className":"styles_chip__XPG78 ","children":7}],["$","span",null,{"className":"styles_chip__XPG78 ","children":8}],["$","span",null,{"className":"styles_chip__XPG78 ","children":9}],["$","span",null,{"className":"styles_chip__XPG78 ","children":10}],["$","span",null,{"className":"styles_chip__XPG78 ","children":11}],["$","span",null,{"className":"styles_chip__XPG78 ","children":12}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"full"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"start"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":1}],["$","span",null,{"className":"styles_chip__XPG78 ","children":2}],["$","span",null,{"className":"styles_chip__XPG78 ","children":3}],["$","span",null,{"className":"styles_chip__XPG78 ","children":4}],["$","span",null,{"className":"styles_chip__XPG78 ","children":5}],["$","span",null,{"className":"styles_chip__XPG78 ","children":6}],["$","span",null,{"className":"styles_chip__XPG78 ","children":7}],["$","span",null,{"className":"styles_chip__XPG78 ","children":8}],["$","span",null,{"className":"styles_chip__XPG78 ","children":9}],["$","span",null,{"className":"styles_chip__XPG78 ","children":10}],["$","span",null,{"className":"styles_chip__XPG78 ","children":11}],["$","span",null,{"className":"styles_chip__XPG78 ","children":12}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"auto"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"end"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":1}],["$","span",null,{"className":"styles_chip__XPG78 ","children":2}],["$","span",null,{"className":"styles_chip__XPG78 ","children":3}],["$","span",null,{"className":"styles_chip__XPG78 ","children":4}],["$","span",null,{"className":"styles_chip__XPG78 ","children":5}],["$","span",null,{"className":"styles_chip__XPG78 ","children":6}],["$","span",null,{"className":"styles_chip__XPG78 ","children":7}],["$","span",null,{"className":"styles_chip__XPG78 ","children":8}],["$","span",null,{"className":"styles_chip__XPG78 ","children":9}],["$","span",null,{"className":"styles_chip__XPG78 ","children":10}],["$","span",null,{"className":"styles_chip__XPG78 ","children":11}],["$","span",null,{"className":"styles_chip__XPG78 ","children":12}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"auto"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"children"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"ReactNode"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"className"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"string"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"style"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"CSSProperties"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}]]}]]}]}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"Examples"}]}],"\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"Simple grid"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"A simple grid with 3 columns and a gap of md."}],"\n","$Ld","\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"Complex grid"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"You can also use the grid item to create more complex layouts. In this example\nthe first column will span 1 column and the second column will span 2 columns."}],"\n","$Le","\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"Mixing rows and columns"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":["The grid item component also supports the ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"rowSpan"}]," prop, which allows you to\nspan multiple rows within the grid layout. In this example, the first item\nwill span 2 rows to achieve a dynamic and flexible grid structure."]}],"\n","$Lf","\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"Responsive grid"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"The grid component also supports responsive values, making it easy to create\nresponsive designs."}],"\n","$L10","\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"Start and End"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"The start and end props can be used to position the item in the grid."}],"\n","$L11"],[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/0199d4a4f0fa1d14.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/css/ca9ae3edf20ccb56.css","precedence":"next","crossOrigin":"$undefined"}]]],null],null]},[null,["$","$L12",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","components","children","grid","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L13",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[null,["$","$L12",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","components","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L13",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/1196c23d52bc6240.css","precedence":"next","crossOrigin":"$undefined"}]],["$","div",null,{"className":"layout_pageContainer__Io_cr","children":["$","$L12",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L13",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]}]],null],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/d780293ffc4ef285.css","precedence":"next","crossOrigin":"$undefined"}]],["$","html",null,{"lang":"en","data-theme":"light","data-theme-name":"default","suppressHydrationWarning":true,"children":["$","body",null,{"children":["$","$L14",null,{"children":["$","div",null,{"className":"page_global__DlbOF","children":[["$","div",null,{"className":"Sidebar_sidebar__86IlD","children":[["$","div",null,{"className":"Sidebar_logoContainer__OcEVQ","children":["$","$L15",null,{"href":"/","children":["$","svg",null,{"width":"89","height":"27","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"Sidebar_logo__P79Og","children":[["$","path",null,{"d":"$16"}],["$","path",null,{"d":"M14.037 16.729a4.237 4.237 0 0 0 4.234-4.24 4.237 4.237 0 0 0-4.234-4.242 4.237 4.237 0 0 0-4.234 4.241 4.237 4.237 0 0 0 4.234 4.24Z"}]]}]}]}],["$","div",null,{"className":"Sidebar_menu__sTTeJ","children":[["$","$L17",null,{}],["$","$L18",null,{}]]}]]}],["$","div",null,{"className":"page_container__aoG4z","children":[["$","div",null,{"className":"styles_toolbar__Dfx8Q","children":[["$","div",null,{"children":["$","$L19",null,{}]}],["$","div",null,{"className":"styles_actions__hQrVs","children":[["$","$L1a",null,{}],["$","$L1b",null,{}]]}]]}],["$","$L12",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L13",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":"$1c","children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":"$1d","children":"404"}],["$","div",null,{"style":"$1e","children":["$","h2",null,{"style":"$1f","children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]]}],["$","$L20",null,{}]]}]}]}]}]],null],null],["$L21",null]]]]
22:T4f2,<Grid>
<DecorativeBox />
<DecorativeBox />
diff --git a/components/heading.html b/components/heading.html
index 14e1114..1655ce3 100644
--- a/components/heading.html
+++ b/components/heading.html
@@ -1,7 +1,7 @@
-Canon Heading
+Canon Heading
Headings are used to structure the content of your page.
Look mum, no hands!
-
+
API reference
Prop Type Responsive variant displaytitle1title2title3title4title5 Yes children ReactNode No className string No style CSSProperties No
Examples
@@ -18,4 +18,4 @@ Responsive
You can also use the variant prop to change the appearance of the text based
on the screen size.
-<Heading variant={{ xs: 'title1', md: 'title2' }}>Responsive</Heading>
\ No newline at end of file
+<Heading variant={{ xs: 'title1', md: 'title2' }}>Responsive</Heading>
\ No newline at end of file
diff --git a/components/heading.txt b/components/heading.txt
index 0811b07..e5c6daf 100644
--- a/components/heading.txt
+++ b/components/heading.txt
@@ -23,7 +23,7 @@ e:I[8525,["3738","static/chunks/42437bae-f0d7b82f7021b572.js","6211","static/chu
1d:{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"}
1e:{"display":"inline-block"}
1f:{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0}
-0:["69ZxaUa_enBpiXozIfKES",[[["",{"children":["(docs)",{"children":["components",{"children":["heading",{"children":["__PAGE__",{}]}]}]}]},"$undefined","$undefined",true],["",{"children":["(docs)",{"children":["components",{"children":["heading",{"children":["__PAGE__",{},[["$L1",[["$","div",null,{"className":"canon-Box","style":{"marginTop":"4rem"},"children":["$","h1",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"3rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"4rem","marginBottom":"0.5rem"},"children":"Heading"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"Headings are used to structure the content of your page."}],"\n",["$","$L2",null,{"className":"styles_container__T5X7T","defaultOpen":false,"children":[["$","div",null,{"className":"styles_preview__tlnTq","children":[["$","div",null,{"className":"styles_previewContent__ZqyBx undefined","style":{"padding":"4rem 2rem"},"children":["$","$L3",null,{}]}],["$","$L4",null,{"className":"styles_trigger__oILEp","children":["$","$L5",null,{"variant":"body","children":"View code"}]}]]}],["$","$L6",null,{"className":"styles_panel__rSJk7","children":"$L7"}]]}],"\n",["$","$L8",null,{"children":[["$","$L9",null,{"children":[["$","$La",null,{"children":"Usage"}],["$","$La",null,{"children":"Theming"}]]}],["$","$Lb",null,{"children":"$Lc"}],["$","$Lb",null,{"children":[["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":["We recommend starting with our ",["$","a",null,{"href":"/theme/theming","style":{"color":"var(--canon-text-primary)"},"children":"global tokens"}]," to customize the library and align it with\nyour brand. For additional flexibility, you can use the provided class names for each element listed below."]}],"$Ld"]}]]}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"API reference"}]}],"\n",["$","div",null,{"className":"styles_wrapper__sBS6b","children":["$","table",null,{"className":"styles_table__ij6HO","children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Prop"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Type"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Responsive"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"variant"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"display"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"title1"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"title2"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"title3"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"title4"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"title5"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"children"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"ReactNode"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"className"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"string"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"style"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"CSSProperties"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}]]}]]}]}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"Examples"}]}],"\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"All variants"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":["The ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"Heading"}]," component has a ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"variant"}]," prop that can be used to change the\nappearance of the heading."]}],"\n",["$","$L2",null,{"className":"styles_container__T5X7T","defaultOpen":true,"children":[["$","div",null,{"className":"styles_preview__tlnTq","children":[["$","div",null,{"className":"styles_previewContent__ZqyBx undefined","style":{"padding":"2rem 2rem"},"children":["$","$Le",null,{}]}],["$","$L4",null,{"className":"styles_trigger__oILEp","children":["$","$L5",null,{"variant":"body","children":"View code"}]}]]}],["$","$L6",null,{"className":"styles_panel__rSJk7","children":"$Lf"}]]}],"\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"Responsive"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":["You can also use the ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"variant"}]," prop to change the appearance of the text based\non the screen size."]}],"\n",["$","$L2",null,{"className":"styles_container__T5X7T","defaultOpen":true,"children":[["$","div",null,{"className":"styles_preview__tlnTq","children":[["$","div",null,{"className":"styles_previewContent__ZqyBx undefined","style":{"padding":"4rem 2rem"},"children":["$","$L10",null,{}]}],["$","$L4",null,{"className":"styles_trigger__oILEp","children":["$","$L5",null,{"variant":"body","children":"View code"}]}]]}],["$","$L6",null,{"className":"styles_panel__rSJk7","children":"$L11"}]]}]],[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/0199d4a4f0fa1d14.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/css/ca9ae3edf20ccb56.css","precedence":"next","crossOrigin":"$undefined"}]]],null],null]},[null,["$","$L12",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","components","children","heading","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L13",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[null,["$","$L12",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","components","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L13",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/1196c23d52bc6240.css","precedence":"next","crossOrigin":"$undefined"}]],["$","div",null,{"className":"layout_pageContainer__Io_cr","children":["$","$L12",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L13",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]}]],null],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/d780293ffc4ef285.css","precedence":"next","crossOrigin":"$undefined"}]],["$","html",null,{"lang":"en","data-theme":"light","data-theme-name":"default","suppressHydrationWarning":true,"children":["$","body",null,{"children":["$","$L14",null,{"children":["$","div",null,{"className":"page_global__DlbOF","children":[["$","div",null,{"className":"Sidebar_sidebar__86IlD","children":[["$","div",null,{"className":"Sidebar_logoContainer__OcEVQ","children":["$","$L15",null,{"href":"/","children":["$","svg",null,{"width":"89","height":"27","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"Sidebar_logo__P79Og","children":[["$","path",null,{"d":"$16"}],["$","path",null,{"d":"M14.037 16.729a4.237 4.237 0 0 0 4.234-4.24 4.237 4.237 0 0 0-4.234-4.242 4.237 4.237 0 0 0-4.234 4.241 4.237 4.237 0 0 0 4.234 4.24Z"}]]}]}]}],["$","div",null,{"className":"Sidebar_menu__sTTeJ","children":[["$","$L17",null,{}],["$","$L18",null,{}]]}]]}],["$","div",null,{"className":"page_container__aoG4z","children":[["$","div",null,{"className":"styles_toolbar__Dfx8Q","children":[["$","div",null,{"children":["$","$L19",null,{}]}],["$","div",null,{"className":"styles_actions__hQrVs","children":[["$","$L1a",null,{}],["$","$L1b",null,{}]]}]]}],["$","$L12",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L13",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":"$1c","children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":"$1d","children":"404"}],["$","div",null,{"style":"$1e","children":["$","h2",null,{"style":"$1f","children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]]}],["$","$L20",null,{}]]}]}]}]}]],null],null],["$L21",null]]]]
+0:["_2li3SoTt_Arxf9uHWRG5",[[["",{"children":["(docs)",{"children":["components",{"children":["heading",{"children":["__PAGE__",{}]}]}]}]},"$undefined","$undefined",true],["",{"children":["(docs)",{"children":["components",{"children":["heading",{"children":["__PAGE__",{},[["$L1",[["$","div",null,{"className":"canon-Box","style":{"marginTop":"4rem"},"children":["$","h1",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"3rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"4rem","marginBottom":"0.5rem"},"children":"Heading"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"Headings are used to structure the content of your page."}],"\n",["$","$L2",null,{"className":"styles_container__T5X7T","defaultOpen":false,"children":[["$","div",null,{"className":"styles_preview__tlnTq","children":[["$","div",null,{"className":"styles_previewContent__ZqyBx undefined","style":{"padding":"4rem 2rem"},"children":["$","$L3",null,{}]}],["$","$L4",null,{"className":"styles_trigger__oILEp","children":["$","$L5",null,{"variant":"body","children":"View code"}]}]]}],["$","$L6",null,{"className":"styles_panel__rSJk7","children":"$L7"}]]}],"\n",["$","$L8",null,{"children":[["$","$L9",null,{"children":[["$","$La",null,{"children":"Usage"}],["$","$La",null,{"children":"Theming"}]]}],["$","$Lb",null,{"children":"$Lc"}],["$","$Lb",null,{"children":[["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":["We recommend starting with our ",["$","a",null,{"href":"/theme/theming","style":{"color":"var(--canon-text-primary)"},"children":"global tokens"}]," to customize the library and align it with\nyour brand. For additional flexibility, you can use the provided class names for each element listed below."]}],"$Ld"]}]]}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"API reference"}]}],"\n",["$","div",null,{"className":"styles_wrapper__sBS6b","children":["$","table",null,{"className":"styles_table__ij6HO","children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Prop"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Type"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Responsive"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"variant"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"display"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"title1"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"title2"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"title3"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"title4"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"title5"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"children"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"ReactNode"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"className"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"string"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"style"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"CSSProperties"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}]]}]]}]}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"Examples"}]}],"\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"All variants"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":["The ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"Heading"}]," component has a ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"variant"}]," prop that can be used to change the\nappearance of the heading."]}],"\n",["$","$L2",null,{"className":"styles_container__T5X7T","defaultOpen":true,"children":[["$","div",null,{"className":"styles_preview__tlnTq","children":[["$","div",null,{"className":"styles_previewContent__ZqyBx undefined","style":{"padding":"2rem 2rem"},"children":["$","$Le",null,{}]}],["$","$L4",null,{"className":"styles_trigger__oILEp","children":["$","$L5",null,{"variant":"body","children":"View code"}]}]]}],["$","$L6",null,{"className":"styles_panel__rSJk7","children":"$Lf"}]]}],"\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"Responsive"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":["You can also use the ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"variant"}]," prop to change the appearance of the text based\non the screen size."]}],"\n",["$","$L2",null,{"className":"styles_container__T5X7T","defaultOpen":true,"children":[["$","div",null,{"className":"styles_preview__tlnTq","children":[["$","div",null,{"className":"styles_previewContent__ZqyBx undefined","style":{"padding":"4rem 2rem"},"children":["$","$L10",null,{}]}],["$","$L4",null,{"className":"styles_trigger__oILEp","children":["$","$L5",null,{"variant":"body","children":"View code"}]}]]}],["$","$L6",null,{"className":"styles_panel__rSJk7","children":"$L11"}]]}]],[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/0199d4a4f0fa1d14.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/css/ca9ae3edf20ccb56.css","precedence":"next","crossOrigin":"$undefined"}]]],null],null]},[null,["$","$L12",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","components","children","heading","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L13",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[null,["$","$L12",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","components","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L13",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/1196c23d52bc6240.css","precedence":"next","crossOrigin":"$undefined"}]],["$","div",null,{"className":"layout_pageContainer__Io_cr","children":["$","$L12",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L13",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]}]],null],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/d780293ffc4ef285.css","precedence":"next","crossOrigin":"$undefined"}]],["$","html",null,{"lang":"en","data-theme":"light","data-theme-name":"default","suppressHydrationWarning":true,"children":["$","body",null,{"children":["$","$L14",null,{"children":["$","div",null,{"className":"page_global__DlbOF","children":[["$","div",null,{"className":"Sidebar_sidebar__86IlD","children":[["$","div",null,{"className":"Sidebar_logoContainer__OcEVQ","children":["$","$L15",null,{"href":"/","children":["$","svg",null,{"width":"89","height":"27","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"Sidebar_logo__P79Og","children":[["$","path",null,{"d":"$16"}],["$","path",null,{"d":"M14.037 16.729a4.237 4.237 0 0 0 4.234-4.24 4.237 4.237 0 0 0-4.234-4.242 4.237 4.237 0 0 0-4.234 4.241 4.237 4.237 0 0 0 4.234 4.24Z"}]]}]}]}],["$","div",null,{"className":"Sidebar_menu__sTTeJ","children":[["$","$L17",null,{}],["$","$L18",null,{}]]}]]}],["$","div",null,{"className":"page_container__aoG4z","children":[["$","div",null,{"className":"styles_toolbar__Dfx8Q","children":[["$","div",null,{"children":["$","$L19",null,{}]}],["$","div",null,{"className":"styles_actions__hQrVs","children":[["$","$L1a",null,{}],["$","$L1b",null,{}]]}]]}],["$","$L12",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L13",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":"$1c","children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":"$1d","children":"404"}],["$","div",null,{"style":"$1e","children":["$","h2",null,{"style":"$1f","children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]]}],["$","$L20",null,{}]]}]}]}]}]],null],null],["$L21",null]]]]
7:["$","div",null,{"className":"styles_codeBlock__cJkhk","children":["$undefined",["$","div",null,{"dangerouslySetInnerHTML":{"__html":"<Heading variant=\"title1\">Hello World!</Heading>
"},"className":"styles_code__W0N63"}]]}]
c:["$","div",null,{"className":"styles_codeBlock__cJkhk","children":["$undefined",["$","div",null,{"dangerouslySetInnerHTML":{"__html":"import { Heading } from '@backstage/canon';\n\n<Heading />\n
"},"className":"styles_code__W0N63"}]]}]
d:["$","div",null,{"className":"styles_codeBlock__cJkhk","children":["$undefined",["$","div",null,{"dangerouslySetInnerHTML":{"__html":"<Heading className=\"heading\" />
"},"className":"styles_code__W0N63"}]]}]
diff --git a/components/icon.html b/components/icon.html
index b9a601a..20871d0 100644
--- a/components/icon.html
+++ b/components/icon.html
@@ -1,6 +1,6 @@
-Canon Icon
+Canon Icon
Icons are used to represent an action or a state.
-
+
API reference
-Prop Type Responsive name arrowDownarrowLeftarrowRightarrowUparrowDownCirclearrowLeftCirclearrowRightCirclearrowUpCirclecheckchevronDownchevronUpchevronLeftchevronRightcloudexternalLinkheartmoonplussuntrash No size number No className string No style CSSProperties No
\ No newline at end of file
+Prop Type Responsive name arrowDownarrowLeftarrowRightarrowUparrowDownCirclearrowLeftCirclearrowRightCirclearrowUpCirclecheckchevronDownchevronUpchevronLeftchevronRightcloudexternalLinkheartmoonplussuntrash No size number No className string No style CSSProperties No
\ No newline at end of file
diff --git a/components/icon.txt b/components/icon.txt
index aa2fad6..3f2baf9 100644
--- a/components/icon.txt
+++ b/components/icon.txt
@@ -21,7 +21,7 @@ f:I[6423,[],""]
19:{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"}
1a:{"display":"inline-block"}
1b:{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0}
-0:["69ZxaUa_enBpiXozIfKES",[[["",{"children":["(docs)",{"children":["components",{"children":["icon",{"children":["__PAGE__",{}]}]}]}]},"$undefined","$undefined",true],["",{"children":["(docs)",{"children":["components",{"children":["icon",{"children":["__PAGE__",{},[["$L1",[["$","div",null,{"className":"canon-Box","style":{"marginTop":"4rem"},"children":["$","h1",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"3rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"4rem","marginBottom":"0.5rem"},"children":"Icon"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"Icons are used to represent an action or a state."}],"\n",["$","$L2",null,{"className":"styles_container__T5X7T","defaultOpen":false,"children":[["$","div",null,{"className":"styles_preview__tlnTq","children":[["$","div",null,{"className":"styles_previewContent__ZqyBx styles_center__xU0vc","style":{"padding":"4rem 2rem"},"children":["$","$L3",null,{}]}],["$","$L4",null,{"className":"styles_trigger__oILEp","children":["$","$L5",null,{"variant":"body","children":"View code"}]}]]}],["$","$L6",null,{"className":"styles_panel__rSJk7","children":"$L7"}]]}],"\n",["$","$L8",null,{"children":[["$","$L9",null,{"children":[["$","$La",null,{"children":"Usage"}],["$","$La",null,{"children":"Theming"}]]}],["$","$Lb",null,{"children":"$Lc"}],["$","$Lb",null,{"children":[["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":["We recommend starting with our ",["$","a",null,{"href":"/theme/theming","style":{"color":"var(--canon-text-primary)"},"children":"global tokens"}]," to customize the library and align it with\nyour brand. For additional flexibility, you can use the provided class names for each element listed below."]}],"$Ld"]}]]}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"API reference"}]}],"\n",["$","div",null,{"className":"styles_wrapper__sBS6b","children":["$","table",null,{"className":"styles_table__ij6HO","children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Prop"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Type"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Responsive"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"name"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"arrowDown"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"arrowLeft"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"arrowRight"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"arrowUp"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"arrowDownCircle"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"arrowLeftCircle"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"arrowRightCircle"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"arrowUpCircle"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"check"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"chevronDown"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"chevronUp"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"chevronLeft"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"chevronRight"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"cloud"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"externalLink"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"heart"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"moon"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"plus"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sun"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"trash"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"size"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"number"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"className"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"string"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"style"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"CSSProperties"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}]]}]]}]}]],[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/0199d4a4f0fa1d14.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/css/ca9ae3edf20ccb56.css","precedence":"next","crossOrigin":"$undefined"}]]],null],null]},[null,["$","$Le",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","components","children","icon","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$Lf",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[null,["$","$Le",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","components","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$Lf",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/1196c23d52bc6240.css","precedence":"next","crossOrigin":"$undefined"}]],["$","div",null,{"className":"layout_pageContainer__Io_cr","children":["$","$Le",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$Lf",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]}]],null],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/d780293ffc4ef285.css","precedence":"next","crossOrigin":"$undefined"}]],["$","html",null,{"lang":"en","data-theme":"light","data-theme-name":"default","suppressHydrationWarning":true,"children":["$","body",null,{"children":["$","$L10",null,{"children":["$","div",null,{"className":"page_global__DlbOF","children":[["$","div",null,{"className":"Sidebar_sidebar__86IlD","children":[["$","div",null,{"className":"Sidebar_logoContainer__OcEVQ","children":["$","$L11",null,{"href":"/","children":["$","svg",null,{"width":"89","height":"27","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"Sidebar_logo__P79Og","children":[["$","path",null,{"d":"$12"}],["$","path",null,{"d":"M14.037 16.729a4.237 4.237 0 0 0 4.234-4.24 4.237 4.237 0 0 0-4.234-4.242 4.237 4.237 0 0 0-4.234 4.241 4.237 4.237 0 0 0 4.234 4.24Z"}]]}]}]}],["$","div",null,{"className":"Sidebar_menu__sTTeJ","children":[["$","$L13",null,{}],["$","$L14",null,{}]]}]]}],["$","div",null,{"className":"page_container__aoG4z","children":[["$","div",null,{"className":"styles_toolbar__Dfx8Q","children":[["$","div",null,{"children":["$","$L15",null,{}]}],["$","div",null,{"className":"styles_actions__hQrVs","children":[["$","$L16",null,{}],["$","$L17",null,{}]]}]]}],["$","$Le",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$Lf",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":"$18","children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":"$19","children":"404"}],["$","div",null,{"style":"$1a","children":["$","h2",null,{"style":"$1b","children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]]}],["$","$L1c",null,{}]]}]}]}]}]],null],null],["$L1d",null]]]]
+0:["_2li3SoTt_Arxf9uHWRG5",[[["",{"children":["(docs)",{"children":["components",{"children":["icon",{"children":["__PAGE__",{}]}]}]}]},"$undefined","$undefined",true],["",{"children":["(docs)",{"children":["components",{"children":["icon",{"children":["__PAGE__",{},[["$L1",[["$","div",null,{"className":"canon-Box","style":{"marginTop":"4rem"},"children":["$","h1",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"3rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"4rem","marginBottom":"0.5rem"},"children":"Icon"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"Icons are used to represent an action or a state."}],"\n",["$","$L2",null,{"className":"styles_container__T5X7T","defaultOpen":false,"children":[["$","div",null,{"className":"styles_preview__tlnTq","children":[["$","div",null,{"className":"styles_previewContent__ZqyBx styles_center__xU0vc","style":{"padding":"4rem 2rem"},"children":["$","$L3",null,{}]}],["$","$L4",null,{"className":"styles_trigger__oILEp","children":["$","$L5",null,{"variant":"body","children":"View code"}]}]]}],["$","$L6",null,{"className":"styles_panel__rSJk7","children":"$L7"}]]}],"\n",["$","$L8",null,{"children":[["$","$L9",null,{"children":[["$","$La",null,{"children":"Usage"}],["$","$La",null,{"children":"Theming"}]]}],["$","$Lb",null,{"children":"$Lc"}],["$","$Lb",null,{"children":[["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":["We recommend starting with our ",["$","a",null,{"href":"/theme/theming","style":{"color":"var(--canon-text-primary)"},"children":"global tokens"}]," to customize the library and align it with\nyour brand. For additional flexibility, you can use the provided class names for each element listed below."]}],"$Ld"]}]]}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"API reference"}]}],"\n",["$","div",null,{"className":"styles_wrapper__sBS6b","children":["$","table",null,{"className":"styles_table__ij6HO","children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Prop"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Type"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Responsive"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"name"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"arrowDown"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"arrowLeft"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"arrowRight"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"arrowUp"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"arrowDownCircle"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"arrowLeftCircle"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"arrowRightCircle"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"arrowUpCircle"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"check"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"chevronDown"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"chevronUp"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"chevronLeft"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"chevronRight"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"cloud"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"externalLink"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"heart"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"moon"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"plus"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sun"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"trash"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"size"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"number"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"className"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"string"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"style"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"CSSProperties"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}]]}]]}]}]],[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/0199d4a4f0fa1d14.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/css/ca9ae3edf20ccb56.css","precedence":"next","crossOrigin":"$undefined"}]]],null],null]},[null,["$","$Le",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","components","children","icon","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$Lf",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[null,["$","$Le",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","components","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$Lf",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/1196c23d52bc6240.css","precedence":"next","crossOrigin":"$undefined"}]],["$","div",null,{"className":"layout_pageContainer__Io_cr","children":["$","$Le",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$Lf",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]}]],null],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/d780293ffc4ef285.css","precedence":"next","crossOrigin":"$undefined"}]],["$","html",null,{"lang":"en","data-theme":"light","data-theme-name":"default","suppressHydrationWarning":true,"children":["$","body",null,{"children":["$","$L10",null,{"children":["$","div",null,{"className":"page_global__DlbOF","children":[["$","div",null,{"className":"Sidebar_sidebar__86IlD","children":[["$","div",null,{"className":"Sidebar_logoContainer__OcEVQ","children":["$","$L11",null,{"href":"/","children":["$","svg",null,{"width":"89","height":"27","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"Sidebar_logo__P79Og","children":[["$","path",null,{"d":"$12"}],["$","path",null,{"d":"M14.037 16.729a4.237 4.237 0 0 0 4.234-4.24 4.237 4.237 0 0 0-4.234-4.242 4.237 4.237 0 0 0-4.234 4.241 4.237 4.237 0 0 0 4.234 4.24Z"}]]}]}]}],["$","div",null,{"className":"Sidebar_menu__sTTeJ","children":[["$","$L13",null,{}],["$","$L14",null,{}]]}]]}],["$","div",null,{"className":"page_container__aoG4z","children":[["$","div",null,{"className":"styles_toolbar__Dfx8Q","children":[["$","div",null,{"children":["$","$L15",null,{}]}],["$","div",null,{"className":"styles_actions__hQrVs","children":[["$","$L16",null,{}],["$","$L17",null,{}]]}]]}],["$","$Le",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$Lf",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":"$18","children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":"$19","children":"404"}],["$","div",null,{"style":"$1a","children":["$","h2",null,{"style":"$1b","children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]]}],["$","$L1c",null,{}]]}]}]}]}]],null],null],["$L1d",null]]]]
7:["$","div",null,{"className":"styles_codeBlock__cJkhk","children":["$undefined",["$","div",null,{"dangerouslySetInnerHTML":{"__html":"<Icon name=\"heart\" />
"},"className":"styles_code__W0N63"}]]}]
c:["$","div",null,{"className":"styles_codeBlock__cJkhk","children":["$undefined",["$","div",null,{"dangerouslySetInnerHTML":{"__html":"import { Icon } from '@backstage/canon';\n\n<Icon />\n
"},"className":"styles_code__W0N63"}]]}]
d:["$","div",null,{"className":"styles_codeBlock__cJkhk","children":["$undefined",["$","div",null,{"dangerouslySetInnerHTML":{"__html":"<Icon className=\"icon\" />
"},"className":"styles_code__W0N63"}]]}]
diff --git a/components/inline.html b/components/inline.html
index 78fb281..d2ee63a 100644
--- a/components/inline.html
+++ b/components/inline.html
@@ -1,7 +1,7 @@
-Canon Inline
+Canon Inline
The Inline component is used to create a horizontal layout of elements.
-
+
API reference
Prop Type Responsive align start | center | end Yes alignY start | center | end Yes children ReactNode No className string No style CSSProperties No
The grid component also accepts all the spacing props from the Box component.
@@ -37,4 +37,4 @@ <Box>Hello World</Box>
<Box>Hello World</Box>
<Box>Hello World</Box>
-</Inline>
\ No newline at end of file
+</Inline>
\ No newline at end of file
diff --git a/components/inline.txt b/components/inline.txt
index d8633f5..dc9311b 100644
--- a/components/inline.txt
+++ b/components/inline.txt
@@ -21,7 +21,7 @@ b:I[7127,["3738","static/chunks/42437bae-f0d7b82f7021b572.js","6211","static/chu
1c:{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"}
1d:{"display":"inline-block"}
1e:{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0}
-0:["69ZxaUa_enBpiXozIfKES",[[["",{"children":["(docs)",{"children":["components",{"children":["inline",{"children":["__PAGE__",{}]}]}]}]},"$undefined","$undefined",true],["",{"children":["(docs)",{"children":["components",{"children":["inline",{"children":["__PAGE__",{},[["$L1",[["$","div",null,{"className":"canon-Box","style":{"marginTop":"4rem"},"children":["$","h1",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"3rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"4rem","marginBottom":"0.5rem"},"children":"Inline"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"The Inline component is used to create a horizontal layout of elements."}],"\n",["$","$L2",null,{"className":"styles_container__T5X7T","defaultOpen":false,"children":[["$","div",null,{"className":"styles_preview__tlnTq","children":[["$","div",null,{"className":"styles_previewContent__ZqyBx undefined","style":{"padding":"4rem 2rem"},"children":["$","$L3",null,{}]}],["$","$L4",null,{"className":"styles_trigger__oILEp","children":["$","$L5",null,{"variant":"body","children":"View code"}]}]]}],["$","$L6",null,{"className":"styles_panel__rSJk7","children":"$L7"}]]}],"\n",["$","$L8",null,{"children":[["$","$L9",null,{"children":["$","$La",null,{"children":"Usage"}]}],["$","$Lb",null,{"children":"$Lc"}]]}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"API reference"}]}],"\n",["$","div",null,{"className":"styles_wrapper__sBS6b","children":["$","table",null,{"className":"styles_table__ij6HO","children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Prop"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Type"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Responsive"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"align"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"start | center | end"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"alignY"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"start | center | end"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"children"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"ReactNode"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"className"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"string"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"style"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"CSSProperties"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}]]}]]}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"The grid component also accepts all the spacing props from the Box component."}],"\n",["$","div",null,{"className":"styles_wrapper__sBS6b","children":["$","table",null,{"className":"styles_table__ij6HO","children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Prop"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Type"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Responsive"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"margin"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"marginBottom"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"marginLeft"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"marginRight"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"marginTop"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"marginX"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"marginY"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"padding"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"paddingBottom"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"paddingLeft"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"paddingRight"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"paddingTop"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"paddingX"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"paddingY"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}]]}]]}]}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"Examples"}]}],"\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"Simple"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"A simple example of how to use the Inline component."}],"\n","$Ld","\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"Responsive"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"The Inline component also supports responsive values, making it easy to create\nresponsive designs."}],"\n","$Le","\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"Align"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"The Inline component also supports responsive alignment, making it easy to\ncreate responsive designs."}],"\n","$Lf","\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"Align vertically"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"The Inline component also supports responsive vertical alignment, making it\neasy to create responsive designs."}],"\n","$L10"],[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/0199d4a4f0fa1d14.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/css/ca9ae3edf20ccb56.css","precedence":"next","crossOrigin":"$undefined"}]]],null],null]},[null,["$","$L11",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","components","children","inline","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L12",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[null,["$","$L11",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","components","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L12",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/1196c23d52bc6240.css","precedence":"next","crossOrigin":"$undefined"}]],["$","div",null,{"className":"layout_pageContainer__Io_cr","children":["$","$L11",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L12",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]}]],null],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/d780293ffc4ef285.css","precedence":"next","crossOrigin":"$undefined"}]],["$","html",null,{"lang":"en","data-theme":"light","data-theme-name":"default","suppressHydrationWarning":true,"children":["$","body",null,{"children":["$","$L13",null,{"children":["$","div",null,{"className":"page_global__DlbOF","children":[["$","div",null,{"className":"Sidebar_sidebar__86IlD","children":[["$","div",null,{"className":"Sidebar_logoContainer__OcEVQ","children":["$","$L14",null,{"href":"/","children":["$","svg",null,{"width":"89","height":"27","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"Sidebar_logo__P79Og","children":[["$","path",null,{"d":"$15"}],["$","path",null,{"d":"M14.037 16.729a4.237 4.237 0 0 0 4.234-4.24 4.237 4.237 0 0 0-4.234-4.242 4.237 4.237 0 0 0-4.234 4.241 4.237 4.237 0 0 0 4.234 4.24Z"}]]}]}]}],["$","div",null,{"className":"Sidebar_menu__sTTeJ","children":[["$","$L16",null,{}],["$","$L17",null,{}]]}]]}],["$","div",null,{"className":"page_container__aoG4z","children":[["$","div",null,{"className":"styles_toolbar__Dfx8Q","children":[["$","div",null,{"children":["$","$L18",null,{}]}],["$","div",null,{"className":"styles_actions__hQrVs","children":[["$","$L19",null,{}],["$","$L1a",null,{}]]}]]}],["$","$L11",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L12",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":"$1b","children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":"$1c","children":"404"}],["$","div",null,{"style":"$1d","children":["$","h2",null,{"style":"$1e","children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]]}],["$","$L1f",null,{}]]}]}]}]}]],null],null],["$L20",null]]]]
+0:["_2li3SoTt_Arxf9uHWRG5",[[["",{"children":["(docs)",{"children":["components",{"children":["inline",{"children":["__PAGE__",{}]}]}]}]},"$undefined","$undefined",true],["",{"children":["(docs)",{"children":["components",{"children":["inline",{"children":["__PAGE__",{},[["$L1",[["$","div",null,{"className":"canon-Box","style":{"marginTop":"4rem"},"children":["$","h1",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"3rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"4rem","marginBottom":"0.5rem"},"children":"Inline"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"The Inline component is used to create a horizontal layout of elements."}],"\n",["$","$L2",null,{"className":"styles_container__T5X7T","defaultOpen":false,"children":[["$","div",null,{"className":"styles_preview__tlnTq","children":[["$","div",null,{"className":"styles_previewContent__ZqyBx undefined","style":{"padding":"4rem 2rem"},"children":["$","$L3",null,{}]}],["$","$L4",null,{"className":"styles_trigger__oILEp","children":["$","$L5",null,{"variant":"body","children":"View code"}]}]]}],["$","$L6",null,{"className":"styles_panel__rSJk7","children":"$L7"}]]}],"\n",["$","$L8",null,{"children":[["$","$L9",null,{"children":["$","$La",null,{"children":"Usage"}]}],["$","$Lb",null,{"children":"$Lc"}]]}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"API reference"}]}],"\n",["$","div",null,{"className":"styles_wrapper__sBS6b","children":["$","table",null,{"className":"styles_table__ij6HO","children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Prop"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Type"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Responsive"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"align"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"start | center | end"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"alignY"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"start | center | end"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"children"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"ReactNode"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"className"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"string"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"style"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"CSSProperties"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}]]}]]}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"The grid component also accepts all the spacing props from the Box component."}],"\n",["$","div",null,{"className":"styles_wrapper__sBS6b","children":["$","table",null,{"className":"styles_table__ij6HO","children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Prop"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Type"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Responsive"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"margin"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"marginBottom"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"marginLeft"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"marginRight"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"marginTop"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"marginX"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"marginY"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"padding"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"paddingBottom"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"paddingLeft"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"paddingRight"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"paddingTop"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"paddingX"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"paddingY"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}]]}]]}]}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"Examples"}]}],"\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"Simple"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"A simple example of how to use the Inline component."}],"\n","$Ld","\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"Responsive"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"The Inline component also supports responsive values, making it easy to create\nresponsive designs."}],"\n","$Le","\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"Align"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"The Inline component also supports responsive alignment, making it easy to\ncreate responsive designs."}],"\n","$Lf","\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"Align vertically"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"The Inline component also supports responsive vertical alignment, making it\neasy to create responsive designs."}],"\n","$L10"],[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/0199d4a4f0fa1d14.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/css/ca9ae3edf20ccb56.css","precedence":"next","crossOrigin":"$undefined"}]]],null],null]},[null,["$","$L11",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","components","children","inline","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L12",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[null,["$","$L11",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","components","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L12",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/1196c23d52bc6240.css","precedence":"next","crossOrigin":"$undefined"}]],["$","div",null,{"className":"layout_pageContainer__Io_cr","children":["$","$L11",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L12",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]}]],null],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/d780293ffc4ef285.css","precedence":"next","crossOrigin":"$undefined"}]],["$","html",null,{"lang":"en","data-theme":"light","data-theme-name":"default","suppressHydrationWarning":true,"children":["$","body",null,{"children":["$","$L13",null,{"children":["$","div",null,{"className":"page_global__DlbOF","children":[["$","div",null,{"className":"Sidebar_sidebar__86IlD","children":[["$","div",null,{"className":"Sidebar_logoContainer__OcEVQ","children":["$","$L14",null,{"href":"/","children":["$","svg",null,{"width":"89","height":"27","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"Sidebar_logo__P79Og","children":[["$","path",null,{"d":"$15"}],["$","path",null,{"d":"M14.037 16.729a4.237 4.237 0 0 0 4.234-4.24 4.237 4.237 0 0 0-4.234-4.242 4.237 4.237 0 0 0-4.234 4.241 4.237 4.237 0 0 0 4.234 4.24Z"}]]}]}]}],["$","div",null,{"className":"Sidebar_menu__sTTeJ","children":[["$","$L16",null,{}],["$","$L17",null,{}]]}]]}],["$","div",null,{"className":"page_container__aoG4z","children":[["$","div",null,{"className":"styles_toolbar__Dfx8Q","children":[["$","div",null,{"children":["$","$L18",null,{}]}],["$","div",null,{"className":"styles_actions__hQrVs","children":[["$","$L19",null,{}],["$","$L1a",null,{}]]}]]}],["$","$L11",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L12",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":"$1b","children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":"$1c","children":"404"}],["$","div",null,{"style":"$1d","children":["$","h2",null,{"style":"$1e","children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]]}],["$","$L1f",null,{}]]}]}]}]}]],null],null],["$L20",null]]]]
21:T4f6,<Inline>
<DecorativeBox />
<DecorativeBox />
diff --git a/components/input.html b/components/input.html
index 0f41b6e..1b44556 100644
--- a/components/input.html
+++ b/components/input.html
@@ -1,7 +1,7 @@
-Canon Input
+Canon Input
A input component tfor your forms.
-
+
API reference
Base UI
This component is using Base UI under the hood. While most of the original props are available, we have made some changes to the API to fit our needs.
Discover more
Prop Type Responsive size smmd No className string No style CSSProperties No
@@ -11,4 +11,4 @@ <Grid>
<Input size="sm" placeholder="Small" />
<Input size="md" placeholder="Medium" />
-</Grid>
\ No newline at end of file
+</Grid>
\ No newline at end of file
diff --git a/components/input.txt b/components/input.txt
index 4e65593..5137338 100644
--- a/components/input.txt
+++ b/components/input.txt
@@ -22,7 +22,7 @@ e:I[6361,["3738","static/chunks/42437bae-f0d7b82f7021b572.js","6211","static/chu
1b:{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"}
1c:{"display":"inline-block"}
1d:{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0}
-0:["69ZxaUa_enBpiXozIfKES",[[["",{"children":["(docs)",{"children":["components",{"children":["input",{"children":["__PAGE__",{}]}]}]}]},"$undefined","$undefined",true],["",{"children":["(docs)",{"children":["components",{"children":["input",{"children":["__PAGE__",{},[["$L1",[["$","div",null,{"className":"canon-Box","style":{"marginTop":"4rem"},"children":["$","h1",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"3rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"4rem","marginBottom":"0.5rem"},"children":"Input"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"A input component tfor your forms."}],"\n",["$","$L2",null,{"className":"styles_container__T5X7T","defaultOpen":false,"children":[["$","div",null,{"className":"styles_preview__tlnTq","children":[["$","div",null,{"className":"styles_previewContent__ZqyBx styles_center__xU0vc","style":{"padding":"4rem 2rem"},"children":["$","div",null,{"style":{"width":"300px"},"children":["$","$L3",null,{"placeholder":"Enter your name"}]}]}],["$","$L4",null,{"className":"styles_trigger__oILEp","children":["$","$L5",null,{"variant":"body","children":"View code"}]}]]}],["$","$L6",null,{"className":"styles_panel__rSJk7","children":"$L7"}]]}],"\n",["$","$L8",null,{"children":[["$","$L9",null,{"children":[["$","$La",null,{"children":"Usage"}],["$","$La",null,{"children":"Theming"}]]}],["$","$Lb",null,{"children":"$Lc"}],["$","$Lb",null,{"children":[["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":["We recommend starting with our ",["$","a",null,{"href":"/theme/theming","style":{"color":"var(--canon-text-primary)"},"children":"global tokens"}]," to customize the library and align it with\nyour brand. For additional flexibility, you can use the provided class names for each element listed below."]}],"$Ld"]}]]}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"API reference"}]}],"\n",["$","div",null,{"className":"styles_container__QRSI3","children":[["$","svg",null,{"width":"17","height":"30","viewBox":"0 0 17 30","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"styles_icon__fXERG","children":[["$","path",null,{"d":"M8 12.8V15V26C3.58172 26 0 22.0601 0 17.2V15V4C4.41828 4 8 7.93989 8 12.8Z"}],["$","path",null,{"d":"M9.5001 10.0154C9.2245 9.99843 9 10.2239 9 10.5V26.0001C13.4183 26.0001 17 22.4184 17 18.0001C17 13.7498 13.6854 10.2736 9.5001 10.0154Z"}]]}],["$","div",null,{"className":"styles_content__j0Wt_","children":[["$","$L5",null,{"variant":"subtitle","weight":"bold","children":"Base UI"}],["$","div",null,{"className":"styles_description__vnxpI","children":["$","$L5",null,{"variant":"subtitle","children":"This component is using Base UI under the hood. While most of the original props are available, we have made some changes to the API to fit our needs."}]}],["$","a",null,{"className":"styles_button__kV03v","href":"https://base-ui.com/react/components/input","target":"_blank","children":["Discover more",["$","$Le",null,{"name":"externalLink"}]]}]]}]]}],"\n",["$","div",null,{"className":"styles_wrapper__sBS6b","children":["$","table",null,{"className":"styles_table__ij6HO","children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Prop"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Type"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Responsive"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"size"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"className"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"string"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"style"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"CSSProperties"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}]]}]]}]}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"Examples"}]}],"\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"Sizes"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"Here's a simple input with a label and description."}],"\n",["$","$L2",null,{"className":"styles_container__T5X7T","defaultOpen":true,"children":[["$","div",null,{"className":"styles_preview__tlnTq","children":[["$","div",null,{"className":"styles_previewContent__ZqyBx styles_center__xU0vc","style":{"padding":"4rem 2rem"},"children":["$","div",null,{"className":"canon-Grid cu-gap-xs cu-grid-cols-auto","style":{"width":"300px"},"children":[["$","$L3",null,{"size":"sm","placeholder":"Small"}],["$","$L3",null,{"size":"md","placeholder":"Medium"}]]}]}],["$","$L4",null,{"className":"styles_trigger__oILEp","children":["$","$L5",null,{"variant":"body","children":"View code"}]}]]}],["$","$L6",null,{"className":"styles_panel__rSJk7","children":"$Lf"}]]}]],[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/0199d4a4f0fa1d14.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/css/ca9ae3edf20ccb56.css","precedence":"next","crossOrigin":"$undefined"}]]],null],null]},[null,["$","$L10",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","components","children","input","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L11",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[null,["$","$L10",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","components","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L11",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/1196c23d52bc6240.css","precedence":"next","crossOrigin":"$undefined"}]],["$","div",null,{"className":"layout_pageContainer__Io_cr","children":["$","$L10",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L11",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]}]],null],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/d780293ffc4ef285.css","precedence":"next","crossOrigin":"$undefined"}]],["$","html",null,{"lang":"en","data-theme":"light","data-theme-name":"default","suppressHydrationWarning":true,"children":["$","body",null,{"children":["$","$L12",null,{"children":["$","div",null,{"className":"page_global__DlbOF","children":[["$","div",null,{"className":"Sidebar_sidebar__86IlD","children":[["$","div",null,{"className":"Sidebar_logoContainer__OcEVQ","children":["$","$L13",null,{"href":"/","children":["$","svg",null,{"width":"89","height":"27","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"Sidebar_logo__P79Og","children":[["$","path",null,{"d":"$14"}],["$","path",null,{"d":"M14.037 16.729a4.237 4.237 0 0 0 4.234-4.24 4.237 4.237 0 0 0-4.234-4.242 4.237 4.237 0 0 0-4.234 4.241 4.237 4.237 0 0 0 4.234 4.24Z"}]]}]}]}],["$","div",null,{"className":"Sidebar_menu__sTTeJ","children":[["$","$L15",null,{}],["$","$L16",null,{}]]}]]}],["$","div",null,{"className":"page_container__aoG4z","children":[["$","div",null,{"className":"styles_toolbar__Dfx8Q","children":[["$","div",null,{"children":["$","$L17",null,{}]}],["$","div",null,{"className":"styles_actions__hQrVs","children":[["$","$L18",null,{}],["$","$L19",null,{}]]}]]}],["$","$L10",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L11",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":"$1a","children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":"$1b","children":"404"}],["$","div",null,{"style":"$1c","children":["$","h2",null,{"style":"$1d","children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]]}],["$","$L1e",null,{}]]}]}]}]}]],null],null],["$L1f",null]]]]
+0:["_2li3SoTt_Arxf9uHWRG5",[[["",{"children":["(docs)",{"children":["components",{"children":["input",{"children":["__PAGE__",{}]}]}]}]},"$undefined","$undefined",true],["",{"children":["(docs)",{"children":["components",{"children":["input",{"children":["__PAGE__",{},[["$L1",[["$","div",null,{"className":"canon-Box","style":{"marginTop":"4rem"},"children":["$","h1",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"3rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"4rem","marginBottom":"0.5rem"},"children":"Input"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"A input component tfor your forms."}],"\n",["$","$L2",null,{"className":"styles_container__T5X7T","defaultOpen":false,"children":[["$","div",null,{"className":"styles_preview__tlnTq","children":[["$","div",null,{"className":"styles_previewContent__ZqyBx styles_center__xU0vc","style":{"padding":"4rem 2rem"},"children":["$","div",null,{"style":{"width":"300px"},"children":["$","$L3",null,{"placeholder":"Enter your name"}]}]}],["$","$L4",null,{"className":"styles_trigger__oILEp","children":["$","$L5",null,{"variant":"body","children":"View code"}]}]]}],["$","$L6",null,{"className":"styles_panel__rSJk7","children":"$L7"}]]}],"\n",["$","$L8",null,{"children":[["$","$L9",null,{"children":[["$","$La",null,{"children":"Usage"}],["$","$La",null,{"children":"Theming"}]]}],["$","$Lb",null,{"children":"$Lc"}],["$","$Lb",null,{"children":[["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":["We recommend starting with our ",["$","a",null,{"href":"/theme/theming","style":{"color":"var(--canon-text-primary)"},"children":"global tokens"}]," to customize the library and align it with\nyour brand. For additional flexibility, you can use the provided class names for each element listed below."]}],"$Ld"]}]]}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"API reference"}]}],"\n",["$","div",null,{"className":"styles_container__QRSI3","children":[["$","svg",null,{"width":"17","height":"30","viewBox":"0 0 17 30","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"styles_icon__fXERG","children":[["$","path",null,{"d":"M8 12.8V15V26C3.58172 26 0 22.0601 0 17.2V15V4C4.41828 4 8 7.93989 8 12.8Z"}],["$","path",null,{"d":"M9.5001 10.0154C9.2245 9.99843 9 10.2239 9 10.5V26.0001C13.4183 26.0001 17 22.4184 17 18.0001C17 13.7498 13.6854 10.2736 9.5001 10.0154Z"}]]}],["$","div",null,{"className":"styles_content__j0Wt_","children":[["$","$L5",null,{"variant":"subtitle","weight":"bold","children":"Base UI"}],["$","div",null,{"className":"styles_description__vnxpI","children":["$","$L5",null,{"variant":"subtitle","children":"This component is using Base UI under the hood. While most of the original props are available, we have made some changes to the API to fit our needs."}]}],["$","a",null,{"className":"styles_button__kV03v","href":"https://base-ui.com/react/components/input","target":"_blank","children":["Discover more",["$","$Le",null,{"name":"externalLink"}]]}]]}]]}],"\n",["$","div",null,{"className":"styles_wrapper__sBS6b","children":["$","table",null,{"className":"styles_table__ij6HO","children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Prop"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Type"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Responsive"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"size"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"className"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"string"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"style"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"CSSProperties"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}]]}]]}]}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"Examples"}]}],"\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"Sizes"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"Here's a simple input with a label and description."}],"\n",["$","$L2",null,{"className":"styles_container__T5X7T","defaultOpen":true,"children":[["$","div",null,{"className":"styles_preview__tlnTq","children":[["$","div",null,{"className":"styles_previewContent__ZqyBx styles_center__xU0vc","style":{"padding":"4rem 2rem"},"children":["$","div",null,{"className":"canon-Grid cu-gap-xs cu-grid-cols-auto","style":{"width":"300px"},"children":[["$","$L3",null,{"size":"sm","placeholder":"Small"}],["$","$L3",null,{"size":"md","placeholder":"Medium"}]]}]}],["$","$L4",null,{"className":"styles_trigger__oILEp","children":["$","$L5",null,{"variant":"body","children":"View code"}]}]]}],["$","$L6",null,{"className":"styles_panel__rSJk7","children":"$Lf"}]]}]],[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/0199d4a4f0fa1d14.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/css/ca9ae3edf20ccb56.css","precedence":"next","crossOrigin":"$undefined"}]]],null],null]},[null,["$","$L10",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","components","children","input","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L11",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[null,["$","$L10",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","components","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L11",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/1196c23d52bc6240.css","precedence":"next","crossOrigin":"$undefined"}]],["$","div",null,{"className":"layout_pageContainer__Io_cr","children":["$","$L10",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L11",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]}]],null],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/d780293ffc4ef285.css","precedence":"next","crossOrigin":"$undefined"}]],["$","html",null,{"lang":"en","data-theme":"light","data-theme-name":"default","suppressHydrationWarning":true,"children":["$","body",null,{"children":["$","$L12",null,{"children":["$","div",null,{"className":"page_global__DlbOF","children":[["$","div",null,{"className":"Sidebar_sidebar__86IlD","children":[["$","div",null,{"className":"Sidebar_logoContainer__OcEVQ","children":["$","$L13",null,{"href":"/","children":["$","svg",null,{"width":"89","height":"27","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"Sidebar_logo__P79Og","children":[["$","path",null,{"d":"$14"}],["$","path",null,{"d":"M14.037 16.729a4.237 4.237 0 0 0 4.234-4.24 4.237 4.237 0 0 0-4.234-4.242 4.237 4.237 0 0 0-4.234 4.241 4.237 4.237 0 0 0 4.234 4.24Z"}]]}]}]}],["$","div",null,{"className":"Sidebar_menu__sTTeJ","children":[["$","$L15",null,{}],["$","$L16",null,{}]]}]]}],["$","div",null,{"className":"page_container__aoG4z","children":[["$","div",null,{"className":"styles_toolbar__Dfx8Q","children":[["$","div",null,{"children":["$","$L17",null,{}]}],["$","div",null,{"className":"styles_actions__hQrVs","children":[["$","$L18",null,{}],["$","$L19",null,{}]]}]]}],["$","$L10",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L11",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":"$1a","children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":"$1b","children":"404"}],["$","div",null,{"style":"$1c","children":["$","h2",null,{"style":"$1d","children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]]}],["$","$L1e",null,{}]]}]}]}]}]],null],null],["$L1f",null]]]]
7:["$","div",null,{"className":"styles_codeBlock__cJkhk","children":["$undefined",["$","div",null,{"dangerouslySetInnerHTML":{"__html":"<Input label=\"Name\" placeholder=\"Enter your name\" />
"},"className":"styles_code__W0N63"}]]}]
c:["$","div",null,{"className":"styles_codeBlock__cJkhk","children":["$undefined",["$","div",null,{"dangerouslySetInnerHTML":{"__html":"import { Input } from '@backstage/canon';\n\n<Input />\n
"},"className":"styles_code__W0N63"}]]}]
d:["$","div",null,{"className":"styles_codeBlock__cJkhk","children":["$undefined",["$","div",null,{"dangerouslySetInnerHTML":{"__html":"<Input className=\"canon-Input\" />
"},"className":"styles_code__W0N63"}]]}]
diff --git a/components/stack.html b/components/stack.html
index 8733279..648b389 100644
--- a/components/stack.html
+++ b/components/stack.html
@@ -1,9 +1,9 @@
-Canon Stack
+Canon Stack
This is the stack container component. It will help to define the number of
columns that will be used in the grid. You can also define the gap between the
columns. All values are responsive.
-
+
API reference
Prop Type Responsive align startcenterend Yes children ReactNode No className string No style CSSProperties No
The grid component also accepts all the spacing props from the Box component.
@@ -40,4 +40,4 @@ <Box>Hello World</Box>
<Box>Hello World</Box>
<Box>Hello World</Box>
-</Stack>
\ No newline at end of file
+</Stack>
\ No newline at end of file
diff --git a/components/stack.txt b/components/stack.txt
index e0fa5b7..6e7220a 100644
--- a/components/stack.txt
+++ b/components/stack.txt
@@ -21,7 +21,7 @@ b:I[7127,["3738","static/chunks/42437bae-f0d7b82f7021b572.js","6211","static/chu
1c:{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"}
1d:{"display":"inline-block"}
1e:{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0}
-0:["69ZxaUa_enBpiXozIfKES",[[["",{"children":["(docs)",{"children":["components",{"children":["stack",{"children":["__PAGE__",{}]}]}]}]},"$undefined","$undefined",true],["",{"children":["(docs)",{"children":["components",{"children":["stack",{"children":["__PAGE__",{},[["$L1",[["$","div",null,{"className":"canon-Box","style":{"marginTop":"4rem"},"children":["$","h1",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"3rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"4rem","marginBottom":"0.5rem"},"children":"Stack"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"This is the stack container component. It will help to define the number of\ncolumns that will be used in the grid. You can also define the gap between the\ncolumns. All values are responsive."}],"\n",["$","$L2",null,{"className":"styles_container__T5X7T","defaultOpen":false,"children":[["$","div",null,{"className":"styles_preview__tlnTq","children":[["$","div",null,{"className":"styles_previewContent__ZqyBx styles_center__xU0vc","style":{"padding":"4rem 2rem"},"children":["$","$L3",null,{}]}],["$","$L4",null,{"className":"styles_trigger__oILEp","children":["$","$L5",null,{"variant":"body","children":"View code"}]}]]}],["$","$L6",null,{"className":"styles_panel__rSJk7","children":"$L7"}]]}],"\n",["$","$L8",null,{"children":[["$","$L9",null,{"children":["$","$La",null,{"children":"Usage"}]}],["$","$Lb",null,{"children":"$Lc"}]]}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"API reference"}]}],"\n",["$","div",null,{"className":"styles_wrapper__sBS6b","children":["$","table",null,{"className":"styles_table__ij6HO","children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Prop"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Type"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Responsive"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"align"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"start"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"center"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"end"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"children"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"ReactNode"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"className"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"string"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"style"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"CSSProperties"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}]]}]]}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"The grid component also accepts all the spacing props from the Box component."}],"\n",["$","div",null,{"className":"styles_wrapper__sBS6b","children":["$","table",null,{"className":"styles_table__ij6HO","children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Prop"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Type"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Responsive"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"margin"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"marginBottom"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"marginLeft"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"marginRight"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"marginTop"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"marginX"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"marginY"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"padding"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"paddingBottom"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"paddingLeft"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"paddingRight"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"paddingTop"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"paddingX"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"paddingY"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}]]}]]}]}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"Common questions"}]}],"\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"Can I stack horizontally?"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"The Stack component only allows for stacking elements vertically. If you want\nto create a column layout, please use the Grid component."}],"\n","$Ld","\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"Examples"}]}],"\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"Simple"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"A simple example of how to use the Stack component."}],"\n","$Le","\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"Responsive"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"The Stack component also supports responsive values, making it easy to create\nresponsive designs."}],"\n","$Lf","\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"Align"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"The Stack component also supports responsive alignment, making it easy to\ncreate responsive designs."}],"\n","$L10"],[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/0199d4a4f0fa1d14.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/css/ca9ae3edf20ccb56.css","precedence":"next","crossOrigin":"$undefined"}]]],null],null]},[null,["$","$L11",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","components","children","stack","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L12",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[null,["$","$L11",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","components","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L12",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/1196c23d52bc6240.css","precedence":"next","crossOrigin":"$undefined"}]],["$","div",null,{"className":"layout_pageContainer__Io_cr","children":["$","$L11",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L12",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]}]],null],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/d780293ffc4ef285.css","precedence":"next","crossOrigin":"$undefined"}]],["$","html",null,{"lang":"en","data-theme":"light","data-theme-name":"default","suppressHydrationWarning":true,"children":["$","body",null,{"children":["$","$L13",null,{"children":["$","div",null,{"className":"page_global__DlbOF","children":[["$","div",null,{"className":"Sidebar_sidebar__86IlD","children":[["$","div",null,{"className":"Sidebar_logoContainer__OcEVQ","children":["$","$L14",null,{"href":"/","children":["$","svg",null,{"width":"89","height":"27","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"Sidebar_logo__P79Og","children":[["$","path",null,{"d":"$15"}],["$","path",null,{"d":"M14.037 16.729a4.237 4.237 0 0 0 4.234-4.24 4.237 4.237 0 0 0-4.234-4.242 4.237 4.237 0 0 0-4.234 4.241 4.237 4.237 0 0 0 4.234 4.24Z"}]]}]}]}],["$","div",null,{"className":"Sidebar_menu__sTTeJ","children":[["$","$L16",null,{}],["$","$L17",null,{}]]}]]}],["$","div",null,{"className":"page_container__aoG4z","children":[["$","div",null,{"className":"styles_toolbar__Dfx8Q","children":[["$","div",null,{"children":["$","$L18",null,{}]}],["$","div",null,{"className":"styles_actions__hQrVs","children":[["$","$L19",null,{}],["$","$L1a",null,{}]]}]]}],["$","$L11",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L12",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":"$1b","children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":"$1c","children":"404"}],["$","div",null,{"style":"$1d","children":["$","h2",null,{"style":"$1e","children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]]}],["$","$L1f",null,{}]]}]}]}]}]],null],null],["$L20",null]]]]
+0:["_2li3SoTt_Arxf9uHWRG5",[[["",{"children":["(docs)",{"children":["components",{"children":["stack",{"children":["__PAGE__",{}]}]}]}]},"$undefined","$undefined",true],["",{"children":["(docs)",{"children":["components",{"children":["stack",{"children":["__PAGE__",{},[["$L1",[["$","div",null,{"className":"canon-Box","style":{"marginTop":"4rem"},"children":["$","h1",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"3rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"4rem","marginBottom":"0.5rem"},"children":"Stack"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"This is the stack container component. It will help to define the number of\ncolumns that will be used in the grid. You can also define the gap between the\ncolumns. All values are responsive."}],"\n",["$","$L2",null,{"className":"styles_container__T5X7T","defaultOpen":false,"children":[["$","div",null,{"className":"styles_preview__tlnTq","children":[["$","div",null,{"className":"styles_previewContent__ZqyBx styles_center__xU0vc","style":{"padding":"4rem 2rem"},"children":["$","$L3",null,{}]}],["$","$L4",null,{"className":"styles_trigger__oILEp","children":["$","$L5",null,{"variant":"body","children":"View code"}]}]]}],["$","$L6",null,{"className":"styles_panel__rSJk7","children":"$L7"}]]}],"\n",["$","$L8",null,{"children":[["$","$L9",null,{"children":["$","$La",null,{"children":"Usage"}]}],["$","$Lb",null,{"children":"$Lc"}]]}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"API reference"}]}],"\n",["$","div",null,{"className":"styles_wrapper__sBS6b","children":["$","table",null,{"className":"styles_table__ij6HO","children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Prop"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Type"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Responsive"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"align"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"start"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"center"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"end"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"children"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"ReactNode"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"className"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"string"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"style"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"CSSProperties"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}]]}]]}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"The grid component also accepts all the spacing props from the Box component."}],"\n",["$","div",null,{"className":"styles_wrapper__sBS6b","children":["$","table",null,{"className":"styles_table__ij6HO","children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Prop"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Type"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Responsive"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"margin"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"marginBottom"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"marginLeft"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"marginRight"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"marginTop"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"marginX"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"marginY"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"padding"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"paddingBottom"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"paddingLeft"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"paddingRight"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"paddingTop"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"paddingX"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"paddingY"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xs"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"sm"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"md"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"lg"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"2xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"3xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"4xl"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"5xl"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}]]}]]}]}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"Common questions"}]}],"\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"Can I stack horizontally?"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"The Stack component only allows for stacking elements vertically. If you want\nto create a column layout, please use the Grid component."}],"\n","$Ld","\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"Examples"}]}],"\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"Simple"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"A simple example of how to use the Stack component."}],"\n","$Le","\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"Responsive"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"The Stack component also supports responsive values, making it easy to create\nresponsive designs."}],"\n","$Lf","\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"Align"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"The Stack component also supports responsive alignment, making it easy to\ncreate responsive designs."}],"\n","$L10"],[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/0199d4a4f0fa1d14.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/css/ca9ae3edf20ccb56.css","precedence":"next","crossOrigin":"$undefined"}]]],null],null]},[null,["$","$L11",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","components","children","stack","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L12",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[null,["$","$L11",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","components","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L12",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/1196c23d52bc6240.css","precedence":"next","crossOrigin":"$undefined"}]],["$","div",null,{"className":"layout_pageContainer__Io_cr","children":["$","$L11",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L12",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]}]],null],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/d780293ffc4ef285.css","precedence":"next","crossOrigin":"$undefined"}]],["$","html",null,{"lang":"en","data-theme":"light","data-theme-name":"default","suppressHydrationWarning":true,"children":["$","body",null,{"children":["$","$L13",null,{"children":["$","div",null,{"className":"page_global__DlbOF","children":[["$","div",null,{"className":"Sidebar_sidebar__86IlD","children":[["$","div",null,{"className":"Sidebar_logoContainer__OcEVQ","children":["$","$L14",null,{"href":"/","children":["$","svg",null,{"width":"89","height":"27","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"Sidebar_logo__P79Og","children":[["$","path",null,{"d":"$15"}],["$","path",null,{"d":"M14.037 16.729a4.237 4.237 0 0 0 4.234-4.24 4.237 4.237 0 0 0-4.234-4.242 4.237 4.237 0 0 0-4.234 4.241 4.237 4.237 0 0 0 4.234 4.24Z"}]]}]}]}],["$","div",null,{"className":"Sidebar_menu__sTTeJ","children":[["$","$L16",null,{}],["$","$L17",null,{}]]}]]}],["$","div",null,{"className":"page_container__aoG4z","children":[["$","div",null,{"className":"styles_toolbar__Dfx8Q","children":[["$","div",null,{"children":["$","$L18",null,{}]}],["$","div",null,{"className":"styles_actions__hQrVs","children":[["$","$L19",null,{}],["$","$L1a",null,{}]]}]]}],["$","$L11",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L12",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":"$1b","children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":"$1c","children":"404"}],["$","div",null,{"style":"$1d","children":["$","h2",null,{"style":"$1e","children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]]}],["$","$L1f",null,{}]]}]}]}]}]],null],null],["$L20",null]]]]
21:T4f4,<Stack>
<DecorativeBox />
<DecorativeBox />
diff --git a/components/table.html b/components/table.html
index 3e9c2db..11c0354 100644
--- a/components/table.html
+++ b/components/table.html
@@ -1 +1 @@
-Canon Table
\ No newline at end of file
+Canon Table
\ No newline at end of file
diff --git a/components/table.txt b/components/table.txt
index bb962e9..893f536 100644
--- a/components/table.txt
+++ b/components/table.txt
@@ -12,6 +12,6 @@ b:I[3589,["3738","static/chunks/42437bae-f0d7b82f7021b572.js","2537","static/chu
d:{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"}
e:{"display":"inline-block"}
f:{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0}
-0:["69ZxaUa_enBpiXozIfKES",[[["",{"children":["(docs)",{"children":["components",{"children":["table",{"children":["__PAGE__",{}]}]}]}]},"$undefined","$undefined",true],["",{"children":["(docs)",{"children":["components",{"children":["table",{"children":["__PAGE__",{},[["$L1",["$","div",null,{"className":"canon-Box","style":{"marginTop":"4rem"},"children":["$","h1",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"3rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"4rem","marginBottom":"0.5rem"},"children":"Table"}]}],[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/0199d4a4f0fa1d14.css","precedence":"next","crossOrigin":"$undefined"}]]],null],null]},[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","components","children","table","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","components","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/1196c23d52bc6240.css","precedence":"next","crossOrigin":"$undefined"}]],["$","div",null,{"className":"layout_pageContainer__Io_cr","children":["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]}]],null],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/d780293ffc4ef285.css","precedence":"next","crossOrigin":"$undefined"}]],["$","html",null,{"lang":"en","data-theme":"light","data-theme-name":"default","suppressHydrationWarning":true,"children":["$","body",null,{"children":["$","$L4",null,{"children":["$","div",null,{"className":"page_global__DlbOF","children":[["$","div",null,{"className":"Sidebar_sidebar__86IlD","children":[["$","div",null,{"className":"Sidebar_logoContainer__OcEVQ","children":["$","$L5",null,{"href":"/","children":["$","svg",null,{"width":"89","height":"27","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"Sidebar_logo__P79Og","children":[["$","path",null,{"d":"$6"}],["$","path",null,{"d":"M14.037 16.729a4.237 4.237 0 0 0 4.234-4.24 4.237 4.237 0 0 0-4.234-4.242 4.237 4.237 0 0 0-4.234 4.241 4.237 4.237 0 0 0 4.234 4.24Z"}]]}]}]}],["$","div",null,{"className":"Sidebar_menu__sTTeJ","children":[["$","$L7",null,{}],["$","$L8",null,{}]]}]]}],["$","div",null,{"className":"page_container__aoG4z","children":[["$","div",null,{"className":"styles_toolbar__Dfx8Q","children":[["$","div",null,{"children":["$","$L9",null,{}]}],["$","div",null,{"className":"styles_actions__hQrVs","children":[["$","$La",null,{}],["$","$Lb",null,{}]]}]]}],["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":"$c","children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":"$d","children":"404"}],["$","div",null,{"style":"$e","children":["$","h2",null,{"style":"$f","children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]]}],["$","$L10",null,{}]]}]}]}]}]],null],null],["$L11",null]]]]
+0:["_2li3SoTt_Arxf9uHWRG5",[[["",{"children":["(docs)",{"children":["components",{"children":["table",{"children":["__PAGE__",{}]}]}]}]},"$undefined","$undefined",true],["",{"children":["(docs)",{"children":["components",{"children":["table",{"children":["__PAGE__",{},[["$L1",["$","div",null,{"className":"canon-Box","style":{"marginTop":"4rem"},"children":["$","h1",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"3rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"4rem","marginBottom":"0.5rem"},"children":"Table"}]}],[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/0199d4a4f0fa1d14.css","precedence":"next","crossOrigin":"$undefined"}]]],null],null]},[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","components","children","table","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","components","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/1196c23d52bc6240.css","precedence":"next","crossOrigin":"$undefined"}]],["$","div",null,{"className":"layout_pageContainer__Io_cr","children":["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]}]],null],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/d780293ffc4ef285.css","precedence":"next","crossOrigin":"$undefined"}]],["$","html",null,{"lang":"en","data-theme":"light","data-theme-name":"default","suppressHydrationWarning":true,"children":["$","body",null,{"children":["$","$L4",null,{"children":["$","div",null,{"className":"page_global__DlbOF","children":[["$","div",null,{"className":"Sidebar_sidebar__86IlD","children":[["$","div",null,{"className":"Sidebar_logoContainer__OcEVQ","children":["$","$L5",null,{"href":"/","children":["$","svg",null,{"width":"89","height":"27","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"Sidebar_logo__P79Og","children":[["$","path",null,{"d":"$6"}],["$","path",null,{"d":"M14.037 16.729a4.237 4.237 0 0 0 4.234-4.24 4.237 4.237 0 0 0-4.234-4.242 4.237 4.237 0 0 0-4.234 4.241 4.237 4.237 0 0 0 4.234 4.24Z"}]]}]}]}],["$","div",null,{"className":"Sidebar_menu__sTTeJ","children":[["$","$L7",null,{}],["$","$L8",null,{}]]}]]}],["$","div",null,{"className":"page_container__aoG4z","children":[["$","div",null,{"className":"styles_toolbar__Dfx8Q","children":[["$","div",null,{"children":["$","$L9",null,{}]}],["$","div",null,{"className":"styles_actions__hQrVs","children":[["$","$La",null,{}],["$","$Lb",null,{}]]}]]}],["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":"$c","children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":"$d","children":"404"}],["$","div",null,{"style":"$e","children":["$","h2",null,{"style":"$f","children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]]}],["$","$L10",null,{}]]}]}]}]}]],null],null],["$L11",null]]]]
11:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Canon"}],["$","meta","3",{"name":"description","content":"UI library for Backstage"}],["$","meta","4",{"property":"og:title","content":"Canon"}],["$","meta","5",{"property":"og:description","content":"UI library for Backstage"}],["$","meta","6",{"property":"og:image:type","content":"image/jpeg"}],["$","meta","7",{"property":"og:image:width","content":"1200"}],["$","meta","8",{"property":"og:image:height","content":"630"}],["$","meta","9",{"property":"og:image","content":"https://canon.backstage.io/opengraph-image.jpg?556e6c1ce23ce382"}],["$","meta","10",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","11",{"name":"twitter:title","content":"Canon"}],["$","meta","12",{"name":"twitter:description","content":"UI library for Backstage"}],["$","meta","13",{"name":"twitter:image:type","content":"image/jpeg"}],["$","meta","14",{"name":"twitter:image:width","content":"1200"}],["$","meta","15",{"name":"twitter:image:height","content":"630"}],["$","meta","16",{"name":"twitter:image","content":"https://canon.backstage.io/opengraph-image.jpg?556e6c1ce23ce382"}],["$","link","17",{"rel":"icon","href":"/icon.svg?27251f321bf90e71","type":"image/svg+xml","sizes":"any"}]]
1:null
diff --git a/components/text.html b/components/text.html
index d1b0b10..3c82c56 100644
--- a/components/text.html
+++ b/components/text.html
@@ -1,7 +1,7 @@
-Canon Text
+Canon Text
The Text component is used to display content on your page.
A man looks at a painting in a museum and says, “Brothers and sisters I have none, but that man's father is my father's son.” Who is in the painting?
-
+
API reference
Prop Type Responsive variant displaytitle1title2title3title4title5 Yes weight regularbold Yes children ReactNode No className string No style CSSProperties No
Examples
@@ -48,4 +48,4 @@ Responsive
You can also use the variant prop to change the appearance of the text based
on the screen size.
-<Text variant={{ xs: 'label', md: 'body' }}>Responsive</Text>
\ No newline at end of file
+<Text variant={{ xs: 'label', md: 'body' }}>Responsive</Text>
\ No newline at end of file
diff --git a/components/text.txt b/components/text.txt
index ce93699..5a82975 100644
--- a/components/text.txt
+++ b/components/text.txt
@@ -24,7 +24,7 @@ e:I[3734,["3738","static/chunks/42437bae-f0d7b82f7021b572.js","6211","static/chu
1f:{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"}
20:{"display":"inline-block"}
21:{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0}
-0:["69ZxaUa_enBpiXozIfKES",[[["",{"children":["(docs)",{"children":["components",{"children":["text",{"children":["__PAGE__",{}]}]}]}]},"$undefined","$undefined",true],["",{"children":["(docs)",{"children":["components",{"children":["text",{"children":["__PAGE__",{},[["$L1",[["$","div",null,{"className":"canon-Box","style":{"marginTop":"4rem"},"children":["$","h1",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"3rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"4rem","marginBottom":"0.5rem"},"children":"Text"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":["The ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"Text"}]," component is used to display content on your page."]}],"\n",["$","$L2",null,{"className":"styles_container__T5X7T","defaultOpen":false,"children":[["$","div",null,{"className":"styles_preview__tlnTq","children":[["$","div",null,{"className":"styles_previewContent__ZqyBx undefined","style":{"padding":"4rem 2rem"},"children":["$","$L3",null,{}]}],["$","$L4",null,{"className":"styles_trigger__oILEp","children":["$","$L5",null,{"variant":"body","children":"View code"}]}]]}],["$","$L6",null,{"className":"styles_panel__rSJk7","children":"$L7"}]]}],"\n",["$","$L8",null,{"children":[["$","$L9",null,{"children":[["$","$La",null,{"children":"Usage"}],["$","$La",null,{"children":"Theming"}]]}],["$","$Lb",null,{"children":"$Lc"}],["$","$Lb",null,{"children":[["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":["We recommend starting with our ",["$","a",null,{"href":"/theme/theming","style":{"color":"var(--canon-text-primary)"},"children":"global tokens"}]," to customize the library and align it with\nyour brand. For additional flexibility, you can use the provided class names for each element listed below."]}],"$Ld"]}]]}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"API reference"}]}],"\n",["$","div",null,{"className":"styles_wrapper__sBS6b","children":["$","table",null,{"className":"styles_table__ij6HO","children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Prop"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Type"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Responsive"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"variant"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"display"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"title1"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"title2"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"title3"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"title4"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"title5"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"weight"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"regular"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"bold"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"children"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"ReactNode"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"className"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"string"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"style"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"CSSProperties"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}]]}]]}]}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"Examples"}]}],"\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"All variants"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":["The ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"Text"}]," component has a ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"variant"}]," prop that can be used to change the\nappearance of the text."]}],"\n",["$","$L2",null,{"className":"styles_container__T5X7T","defaultOpen":true,"children":[["$","div",null,{"className":"styles_preview__tlnTq","children":[["$","div",null,{"className":"styles_previewContent__ZqyBx undefined","style":{"padding":"2rem 2rem"},"children":["$","$Le",null,{}]}],["$","$L4",null,{"className":"styles_trigger__oILEp","children":["$","$L5",null,{"variant":"body","children":"View code"}]}]]}],["$","$L6",null,{"className":"styles_panel__rSJk7","children":"$Lf"}]]}],"\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"All weights"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":["The ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"Text"}]," component has a ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"weight"}]," prop that can be used to change the\nappearance of the text."]}],"\n",["$","$L2",null,{"className":"styles_container__T5X7T","defaultOpen":true,"children":[["$","div",null,{"className":"styles_preview__tlnTq","children":[["$","div",null,{"className":"styles_previewContent__ZqyBx undefined","style":{"padding":"2rem 2rem"},"children":["$","$L10",null,{}]}],["$","$L4",null,{"className":"styles_trigger__oILEp","children":["$","$L5",null,{"variant":"body","children":"View code"}]}]]}],["$","$L6",null,{"className":"styles_panel__rSJk7","children":"$L11"}]]}],"\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"Responsive"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":["You can also use the ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"variant"}]," prop to change the appearance of the text based\non the screen size."]}],"\n",["$","$L2",null,{"className":"styles_container__T5X7T","defaultOpen":true,"children":[["$","div",null,{"className":"styles_preview__tlnTq","children":[["$","div",null,{"className":"styles_previewContent__ZqyBx undefined","style":{"padding":"2rem 2rem"},"children":["$","$L12",null,{}]}],["$","$L4",null,{"className":"styles_trigger__oILEp","children":["$","$L5",null,{"variant":"body","children":"View code"}]}]]}],["$","$L6",null,{"className":"styles_panel__rSJk7","children":"$L13"}]]}]],[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/0199d4a4f0fa1d14.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/css/ca9ae3edf20ccb56.css","precedence":"next","crossOrigin":"$undefined"}]]],null],null]},[null,["$","$L14",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","components","children","text","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L15",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[null,["$","$L14",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","components","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L15",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/1196c23d52bc6240.css","precedence":"next","crossOrigin":"$undefined"}]],["$","div",null,{"className":"layout_pageContainer__Io_cr","children":["$","$L14",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L15",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]}]],null],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/d780293ffc4ef285.css","precedence":"next","crossOrigin":"$undefined"}]],["$","html",null,{"lang":"en","data-theme":"light","data-theme-name":"default","suppressHydrationWarning":true,"children":["$","body",null,{"children":["$","$L16",null,{"children":["$","div",null,{"className":"page_global__DlbOF","children":[["$","div",null,{"className":"Sidebar_sidebar__86IlD","children":[["$","div",null,{"className":"Sidebar_logoContainer__OcEVQ","children":["$","$L17",null,{"href":"/","children":["$","svg",null,{"width":"89","height":"27","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"Sidebar_logo__P79Og","children":[["$","path",null,{"d":"$18"}],["$","path",null,{"d":"M14.037 16.729a4.237 4.237 0 0 0 4.234-4.24 4.237 4.237 0 0 0-4.234-4.242 4.237 4.237 0 0 0-4.234 4.241 4.237 4.237 0 0 0 4.234 4.24Z"}]]}]}]}],["$","div",null,{"className":"Sidebar_menu__sTTeJ","children":[["$","$L19",null,{}],["$","$L1a",null,{}]]}]]}],["$","div",null,{"className":"page_container__aoG4z","children":[["$","div",null,{"className":"styles_toolbar__Dfx8Q","children":[["$","div",null,{"children":["$","$L1b",null,{}]}],["$","div",null,{"className":"styles_actions__hQrVs","children":[["$","$L1c",null,{}],["$","$L1d",null,{}]]}]]}],["$","$L14",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L15",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":"$1e","children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":"$1f","children":"404"}],["$","div",null,{"style":"$20","children":["$","h2",null,{"style":"$21","children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]]}],["$","$L22",null,{}]]}]}]}]}]],null],null],["$L23",null]]]]
+0:["_2li3SoTt_Arxf9uHWRG5",[[["",{"children":["(docs)",{"children":["components",{"children":["text",{"children":["__PAGE__",{}]}]}]}]},"$undefined","$undefined",true],["",{"children":["(docs)",{"children":["components",{"children":["text",{"children":["__PAGE__",{},[["$L1",[["$","div",null,{"className":"canon-Box","style":{"marginTop":"4rem"},"children":["$","h1",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"3rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"4rem","marginBottom":"0.5rem"},"children":"Text"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":["The ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"Text"}]," component is used to display content on your page."]}],"\n",["$","$L2",null,{"className":"styles_container__T5X7T","defaultOpen":false,"children":[["$","div",null,{"className":"styles_preview__tlnTq","children":[["$","div",null,{"className":"styles_previewContent__ZqyBx undefined","style":{"padding":"4rem 2rem"},"children":["$","$L3",null,{}]}],["$","$L4",null,{"className":"styles_trigger__oILEp","children":["$","$L5",null,{"variant":"body","children":"View code"}]}]]}],["$","$L6",null,{"className":"styles_panel__rSJk7","children":"$L7"}]]}],"\n",["$","$L8",null,{"children":[["$","$L9",null,{"children":[["$","$La",null,{"children":"Usage"}],["$","$La",null,{"children":"Theming"}]]}],["$","$Lb",null,{"children":"$Lc"}],["$","$Lb",null,{"children":[["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":["We recommend starting with our ",["$","a",null,{"href":"/theme/theming","style":{"color":"var(--canon-text-primary)"},"children":"global tokens"}]," to customize the library and align it with\nyour brand. For additional flexibility, you can use the provided class names for each element listed below."]}],"$Ld"]}]]}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"API reference"}]}],"\n",["$","div",null,{"className":"styles_wrapper__sBS6b","children":["$","table",null,{"className":"styles_table__ij6HO","children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Prop"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Type"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Responsive"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"variant"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"display"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"title1"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"title2"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"title3"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"title4"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"title5"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"weight"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":[["$","span",null,{"className":"styles_chip__XPG78 ","children":"regular"}],["$","span",null,{"className":"styles_chip__XPG78 ","children":"bold"}]]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"Yes"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"children"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"ReactNode"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"className"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"string"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"style"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","div",null,{"style":{"display":"flex","flexWrap":"wrap","gap":"0.375rem"},"children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"CSSProperties"}]}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"No"}]}]]}]]}]]}]}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"Examples"}]}],"\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"All variants"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":["The ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"Text"}]," component has a ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"variant"}]," prop that can be used to change the\nappearance of the text."]}],"\n",["$","$L2",null,{"className":"styles_container__T5X7T","defaultOpen":true,"children":[["$","div",null,{"className":"styles_preview__tlnTq","children":[["$","div",null,{"className":"styles_previewContent__ZqyBx undefined","style":{"padding":"2rem 2rem"},"children":["$","$Le",null,{}]}],["$","$L4",null,{"className":"styles_trigger__oILEp","children":["$","$L5",null,{"variant":"body","children":"View code"}]}]]}],["$","$L6",null,{"className":"styles_panel__rSJk7","children":"$Lf"}]]}],"\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"All weights"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":["The ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"Text"}]," component has a ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"weight"}]," prop that can be used to change the\nappearance of the text."]}],"\n",["$","$L2",null,{"className":"styles_container__T5X7T","defaultOpen":true,"children":[["$","div",null,{"className":"styles_preview__tlnTq","children":[["$","div",null,{"className":"styles_previewContent__ZqyBx undefined","style":{"padding":"2rem 2rem"},"children":["$","$L10",null,{}]}],["$","$L4",null,{"className":"styles_trigger__oILEp","children":["$","$L5",null,{"variant":"body","children":"View code"}]}]]}],["$","$L6",null,{"className":"styles_panel__rSJk7","children":"$L11"}]]}],"\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"Responsive"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":["You can also use the ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"variant"}]," prop to change the appearance of the text based\non the screen size."]}],"\n",["$","$L2",null,{"className":"styles_container__T5X7T","defaultOpen":true,"children":[["$","div",null,{"className":"styles_preview__tlnTq","children":[["$","div",null,{"className":"styles_previewContent__ZqyBx undefined","style":{"padding":"2rem 2rem"},"children":["$","$L12",null,{}]}],["$","$L4",null,{"className":"styles_trigger__oILEp","children":["$","$L5",null,{"variant":"body","children":"View code"}]}]]}],["$","$L6",null,{"className":"styles_panel__rSJk7","children":"$L13"}]]}]],[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/0199d4a4f0fa1d14.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/css/ca9ae3edf20ccb56.css","precedence":"next","crossOrigin":"$undefined"}]]],null],null]},[null,["$","$L14",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","components","children","text","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L15",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[null,["$","$L14",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","components","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L15",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/1196c23d52bc6240.css","precedence":"next","crossOrigin":"$undefined"}]],["$","div",null,{"className":"layout_pageContainer__Io_cr","children":["$","$L14",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L15",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]}]],null],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/d780293ffc4ef285.css","precedence":"next","crossOrigin":"$undefined"}]],["$","html",null,{"lang":"en","data-theme":"light","data-theme-name":"default","suppressHydrationWarning":true,"children":["$","body",null,{"children":["$","$L16",null,{"children":["$","div",null,{"className":"page_global__DlbOF","children":[["$","div",null,{"className":"Sidebar_sidebar__86IlD","children":[["$","div",null,{"className":"Sidebar_logoContainer__OcEVQ","children":["$","$L17",null,{"href":"/","children":["$","svg",null,{"width":"89","height":"27","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"Sidebar_logo__P79Og","children":[["$","path",null,{"d":"$18"}],["$","path",null,{"d":"M14.037 16.729a4.237 4.237 0 0 0 4.234-4.24 4.237 4.237 0 0 0-4.234-4.242 4.237 4.237 0 0 0-4.234 4.241 4.237 4.237 0 0 0 4.234 4.24Z"}]]}]}]}],["$","div",null,{"className":"Sidebar_menu__sTTeJ","children":[["$","$L19",null,{}],["$","$L1a",null,{}]]}]]}],["$","div",null,{"className":"page_container__aoG4z","children":[["$","div",null,{"className":"styles_toolbar__Dfx8Q","children":[["$","div",null,{"children":["$","$L1b",null,{}]}],["$","div",null,{"className":"styles_actions__hQrVs","children":[["$","$L1c",null,{}],["$","$L1d",null,{}]]}]]}],["$","$L14",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L15",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":"$1e","children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":"$1f","children":"404"}],["$","div",null,{"style":"$20","children":["$","h2",null,{"style":"$21","children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]]}],["$","$L22",null,{}]]}]}]}]}]],null],null],["$L23",null]]]]
24:T53d,<Text style={{ maxWidth: '600px' }}>
A man looks at a painting in a museum and says, “Brothers and sisters I
have none, but that man's father is my father's son.” Who is in
diff --git a/index.html b/index.html
index 5d8ead5..f851a1d 100644
--- a/index.html
+++ b/index.html
@@ -1,4 +1,4 @@
-Canon 
+Canon
Welcome to the Canon, the new design library for Backstage plugins. This
project is still under active development but we will make sure to document
the API as we go. We are aiming to improve the general UI of Backstage and
@@ -35,4 +35,4 @@
Next steps
Now that you have the basics down, you can start building your plugin using the new design system.
Please familiarise yourself first with our theming principles. This will help you understand the core concepts of the design system.
-If you have any questions, please reach out to us on Discord.
\ No newline at end of file
+If you have any questions, please reach out to us on Discord.
\ No newline at end of file
diff --git a/index.txt b/index.txt
index aa97531..b3cc89d 100644
--- a/index.txt
+++ b/index.txt
@@ -12,7 +12,7 @@ a:Tb0f,M77.414 9.71h3.036v2.992l-.264-.022c.279-.88.748-1.65 1.408-2.31.675-.66
11:{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"}
12:{"display":"inline-block"}
13:{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0}
-0:["69ZxaUa_enBpiXozIfKES",[[["",{"children":["(docs)",{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",{"children":["(docs)",{"children":["__PAGE__",{},[["$L1",[["$","img",null,{"src":"header.png","style":{"width":"100%","marginBottom":"32px","marginTop":"64px"}}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"Welcome to the Canon, the new design library for Backstage plugins. This\nproject is still under active development but we will make sure to document\nthe API as we go. We are aiming to improve the general UI of Backstage and\nplugins across Backstage. This new library will take time to build but we are\nbuilding it incrementally with not conflict with the existing theming system."}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"Installation"}]}],"\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"1. Install canon"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"Install Canon using a package manager."}],"\n","$L2","\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"2. Import the css files"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"Import the global CSS file at the root of your application."}],"\n","$L3","\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"3. Add the theme provider"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"Add the theme provider to your application."}],"\n","$L4","\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"4. Start building ✨"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"Now you can start building your plugin using the new design system."}],"\n","$L5","\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"Roadmap"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":["You can check our roadmap ",["$","a",null,{"href":"https://github.com/orgs/backstage/projects/10","style":{"color":"var(--canon-text-primary)"},"children":"on GitHub"}],". We'll do our best to keep you updated on the progress."]}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"Next steps"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":["Now that you have the basics down, you can start building your plugin using the new design system.\nPlease familiarise yourself first with our theming principles. This will help you understand the core concepts of the design system.\nIf you have any questions, please reach out to us on ",["$","a",null,{"href":"https://discord.gg/MUpMjP2","style":{"color":"var(--canon-text-primary)"},"children":"Discord"}],"."]}]],[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/0199d4a4f0fa1d14.css","precedence":"next","crossOrigin":"$undefined"}]]],null],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/1196c23d52bc6240.css","precedence":"next","crossOrigin":"$undefined"}]],["$","div",null,{"className":"layout_pageContainer__Io_cr","children":["$","$L6",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L7",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]}]],null],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/d780293ffc4ef285.css","precedence":"next","crossOrigin":"$undefined"}]],["$","html",null,{"lang":"en","data-theme":"light","data-theme-name":"default","suppressHydrationWarning":true,"children":["$","body",null,{"children":["$","$L8",null,{"children":["$","div",null,{"className":"page_global__DlbOF","children":[["$","div",null,{"className":"Sidebar_sidebar__86IlD","children":[["$","div",null,{"className":"Sidebar_logoContainer__OcEVQ","children":["$","$L9",null,{"href":"/","children":["$","svg",null,{"width":"89","height":"27","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"Sidebar_logo__P79Og","children":[["$","path",null,{"d":"$a"}],["$","path",null,{"d":"M14.037 16.729a4.237 4.237 0 0 0 4.234-4.24 4.237 4.237 0 0 0-4.234-4.242 4.237 4.237 0 0 0-4.234 4.241 4.237 4.237 0 0 0 4.234 4.24Z"}]]}]}]}],["$","div",null,{"className":"Sidebar_menu__sTTeJ","children":[["$","$Lb",null,{}],["$","$Lc",null,{}]]}]]}],["$","div",null,{"className":"page_container__aoG4z","children":[["$","div",null,{"className":"styles_toolbar__Dfx8Q","children":[["$","div",null,{"children":["$","$Ld",null,{}]}],["$","div",null,{"className":"styles_actions__hQrVs","children":[["$","$Le",null,{}],["$","$Lf",null,{}]]}]]}],["$","$L6",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L7",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":"$10","children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":"$11","children":"404"}],["$","div",null,{"style":"$12","children":["$","h2",null,{"style":"$13","children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]]}],["$","$L14",null,{}]]}]}]}]}]],null],null],["$L15",null]]]]
+0:["_2li3SoTt_Arxf9uHWRG5",[[["",{"children":["(docs)",{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",{"children":["(docs)",{"children":["__PAGE__",{},[["$L1",[["$","img",null,{"src":"header.png","style":{"width":"100%","marginBottom":"32px","marginTop":"64px"}}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"Welcome to the Canon, the new design library for Backstage plugins. This\nproject is still under active development but we will make sure to document\nthe API as we go. We are aiming to improve the general UI of Backstage and\nplugins across Backstage. This new library will take time to build but we are\nbuilding it incrementally with not conflict with the existing theming system."}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"Installation"}]}],"\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"1. Install canon"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"Install Canon using a package manager."}],"\n","$L2","\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"2. Import the css files"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"Import the global CSS file at the root of your application."}],"\n","$L3","\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"3. Add the theme provider"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"Add the theme provider to your application."}],"\n","$L4","\n",["$","h3",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.25rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"2rem","marginBottom":"0.5rem"},"children":"4. Start building ✨"}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"Now you can start building your plugin using the new design system."}],"\n","$L5","\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"Roadmap"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":["You can check our roadmap ",["$","a",null,{"href":"https://github.com/orgs/backstage/projects/10","style":{"color":"var(--canon-text-primary)"},"children":"on GitHub"}],". We'll do our best to keep you updated on the progress."]}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"Next steps"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":["Now that you have the basics down, you can start building your plugin using the new design system.\nPlease familiarise yourself first with our theming principles. This will help you understand the core concepts of the design system.\nIf you have any questions, please reach out to us on ",["$","a",null,{"href":"https://discord.gg/MUpMjP2","style":{"color":"var(--canon-text-primary)"},"children":"Discord"}],"."]}]],[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/0199d4a4f0fa1d14.css","precedence":"next","crossOrigin":"$undefined"}]]],null],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/1196c23d52bc6240.css","precedence":"next","crossOrigin":"$undefined"}]],["$","div",null,{"className":"layout_pageContainer__Io_cr","children":["$","$L6",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L7",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]}]],null],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/d780293ffc4ef285.css","precedence":"next","crossOrigin":"$undefined"}]],["$","html",null,{"lang":"en","data-theme":"light","data-theme-name":"default","suppressHydrationWarning":true,"children":["$","body",null,{"children":["$","$L8",null,{"children":["$","div",null,{"className":"page_global__DlbOF","children":[["$","div",null,{"className":"Sidebar_sidebar__86IlD","children":[["$","div",null,{"className":"Sidebar_logoContainer__OcEVQ","children":["$","$L9",null,{"href":"/","children":["$","svg",null,{"width":"89","height":"27","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"Sidebar_logo__P79Og","children":[["$","path",null,{"d":"$a"}],["$","path",null,{"d":"M14.037 16.729a4.237 4.237 0 0 0 4.234-4.24 4.237 4.237 0 0 0-4.234-4.242 4.237 4.237 0 0 0-4.234 4.241 4.237 4.237 0 0 0 4.234 4.24Z"}]]}]}]}],["$","div",null,{"className":"Sidebar_menu__sTTeJ","children":[["$","$Lb",null,{}],["$","$Lc",null,{}]]}]]}],["$","div",null,{"className":"page_container__aoG4z","children":[["$","div",null,{"className":"styles_toolbar__Dfx8Q","children":[["$","div",null,{"children":["$","$Ld",null,{}]}],["$","div",null,{"className":"styles_actions__hQrVs","children":[["$","$Le",null,{}],["$","$Lf",null,{}]]}]]}],["$","$L6",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L7",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":"$10","children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":"$11","children":"404"}],["$","div",null,{"style":"$12","children":["$","h2",null,{"style":"$13","children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]]}],["$","$L14",null,{}]]}]}]}]}]],null],null],["$L15",null]]]]
3:["$","div",null,{"className":"styles_codeBlock__cJkhk","children":["$undefined",["$","div",null,{"dangerouslySetInnerHTML":{"__html":"import '@backstage/canon/css/core.css';\nimport '@backstage/canon/css/components.css';\n
"},"className":"styles_code__W0N63"}]]}]
16:T4db,import { ThemeProvider } from '@backstage/canon';
diff --git a/playground.html b/playground.html
index 0182595..7bad501 100644
--- a/playground.html
+++ b/playground.html
@@ -1 +1 @@
-Canon Button
primary
secondary
tertiary
Checkbox
All variants
Heading
All variants
Display
Title 1
Title 2
Title 3
Title 4
Text
Subtitle
A man looks at a painting in a museum and says, “Brothers and sisters I have none, but that man's father is my father's son.” Who is in the painting?
Body
A man looks at a painting in a museum and says, “Brothers and sisters I have none, but that man's father is my father's son.” Who is in the painting?
Caption
A man looks at a painting in a museum and says, “Brothers and sisters I have none, but that man's father is my father's son.” Who is in the painting?
Label
A man looks at a painting in a museum and says, “Brothers and sisters I have none, but that man's father is my father's son.” Who is in the painting?
\ No newline at end of file
+Canon Button
primary
secondary
tertiary
Checkbox
All variants
Heading
All variants
Display
Title 1
Title 2
Title 3
Title 4
Text
Subtitle
A man looks at a painting in a museum and says, “Brothers and sisters I have none, but that man's father is my father's son.” Who is in the painting?
Body
A man looks at a painting in a museum and says, “Brothers and sisters I have none, but that man's father is my father's son.” Who is in the painting?
Caption
A man looks at a painting in a museum and says, “Brothers and sisters I have none, but that man's father is my father's son.” Who is in the painting?
Label
A man looks at a painting in a museum and says, “Brothers and sisters I have none, but that man's father is my father's son.” Who is in the painting?
\ No newline at end of file
diff --git a/playground.txt b/playground.txt
index cfcff38..92239a8 100644
--- a/playground.txt
+++ b/playground.txt
@@ -14,6 +14,6 @@ d:I[3589,["3738","static/chunks/42437bae-f0d7b82f7021b572.js","2537","static/chu
f:{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"}
10:{"display":"inline-block"}
11:{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0}
-0:["69ZxaUa_enBpiXozIfKES",[[["",{"children":["(playground)",{"children":["playground",{"children":["__PAGE__",{}]}]}]},"$undefined","$undefined",true],["",{"children":["(playground)",{"children":["playground",{"children":["__PAGE__",{},[["$L1",["$","$L2",null,{"props":{"params":{},"searchParams":{}},"Component":"$3"}],[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/a468676a8a327df7.css","precedence":"next","crossOrigin":"$undefined"}]]],null],null]},[null,["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","(playground)","children","playground","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[null,["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","(playground)","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/d780293ffc4ef285.css","precedence":"next","crossOrigin":"$undefined"}]],["$","html",null,{"lang":"en","data-theme":"light","data-theme-name":"default","suppressHydrationWarning":true,"children":["$","body",null,{"children":["$","$L6",null,{"children":["$","div",null,{"className":"page_global__DlbOF","children":[["$","div",null,{"className":"Sidebar_sidebar__86IlD","children":[["$","div",null,{"className":"Sidebar_logoContainer__OcEVQ","children":["$","$L7",null,{"href":"/","children":["$","svg",null,{"width":"89","height":"27","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"Sidebar_logo__P79Og","children":[["$","path",null,{"d":"$8"}],["$","path",null,{"d":"M14.037 16.729a4.237 4.237 0 0 0 4.234-4.24 4.237 4.237 0 0 0-4.234-4.242 4.237 4.237 0 0 0-4.234 4.241 4.237 4.237 0 0 0 4.234 4.24Z"}]]}]}]}],["$","div",null,{"className":"Sidebar_menu__sTTeJ","children":[["$","$L9",null,{}],["$","$La",null,{}]]}]]}],["$","div",null,{"className":"page_container__aoG4z","children":[["$","div",null,{"className":"styles_toolbar__Dfx8Q","children":[["$","div",null,{"children":["$","$Lb",null,{}]}],["$","div",null,{"className":"styles_actions__hQrVs","children":[["$","$Lc",null,{}],["$","$Ld",null,{}]]}]]}],["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":"$e","children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":"$f","children":"404"}],["$","div",null,{"style":"$10","children":["$","h2",null,{"style":"$11","children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]]}],["$","$L12",null,{}]]}]}]}]}]],null],null],["$L13",null]]]]
+0:["_2li3SoTt_Arxf9uHWRG5",[[["",{"children":["(playground)",{"children":["playground",{"children":["__PAGE__",{}]}]}]},"$undefined","$undefined",true],["",{"children":["(playground)",{"children":["playground",{"children":["__PAGE__",{},[["$L1",["$","$L2",null,{"props":{"params":{},"searchParams":{}},"Component":"$3"}],[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/a468676a8a327df7.css","precedence":"next","crossOrigin":"$undefined"}]]],null],null]},[null,["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","(playground)","children","playground","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[null,["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","(playground)","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/d780293ffc4ef285.css","precedence":"next","crossOrigin":"$undefined"}]],["$","html",null,{"lang":"en","data-theme":"light","data-theme-name":"default","suppressHydrationWarning":true,"children":["$","body",null,{"children":["$","$L6",null,{"children":["$","div",null,{"className":"page_global__DlbOF","children":[["$","div",null,{"className":"Sidebar_sidebar__86IlD","children":[["$","div",null,{"className":"Sidebar_logoContainer__OcEVQ","children":["$","$L7",null,{"href":"/","children":["$","svg",null,{"width":"89","height":"27","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"Sidebar_logo__P79Og","children":[["$","path",null,{"d":"$8"}],["$","path",null,{"d":"M14.037 16.729a4.237 4.237 0 0 0 4.234-4.24 4.237 4.237 0 0 0-4.234-4.242 4.237 4.237 0 0 0-4.234 4.241 4.237 4.237 0 0 0 4.234 4.24Z"}]]}]}]}],["$","div",null,{"className":"Sidebar_menu__sTTeJ","children":[["$","$L9",null,{}],["$","$La",null,{}]]}]]}],["$","div",null,{"className":"page_container__aoG4z","children":[["$","div",null,{"className":"styles_toolbar__Dfx8Q","children":[["$","div",null,{"children":["$","$Lb",null,{}]}],["$","div",null,{"className":"styles_actions__hQrVs","children":[["$","$Lc",null,{}],["$","$Ld",null,{}]]}]]}],["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":"$e","children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":"$f","children":"404"}],["$","div",null,{"style":"$10","children":["$","h2",null,{"style":"$11","children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]]}],["$","$L12",null,{}]]}]}]}]}]],null],null],["$L13",null]]]]
13:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Canon"}],["$","meta","3",{"name":"description","content":"UI library for Backstage"}],["$","meta","4",{"property":"og:title","content":"Canon"}],["$","meta","5",{"property":"og:description","content":"UI library for Backstage"}],["$","meta","6",{"property":"og:image:type","content":"image/jpeg"}],["$","meta","7",{"property":"og:image:width","content":"1200"}],["$","meta","8",{"property":"og:image:height","content":"630"}],["$","meta","9",{"property":"og:image","content":"https://canon.backstage.io/opengraph-image.jpg?556e6c1ce23ce382"}],["$","meta","10",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","11",{"name":"twitter:title","content":"Canon"}],["$","meta","12",{"name":"twitter:description","content":"UI library for Backstage"}],["$","meta","13",{"name":"twitter:image:type","content":"image/jpeg"}],["$","meta","14",{"name":"twitter:image:width","content":"1200"}],["$","meta","15",{"name":"twitter:image:height","content":"630"}],["$","meta","16",{"name":"twitter:image","content":"https://canon.backstage.io/opengraph-image.jpg?556e6c1ce23ce382"}],["$","link","17",{"rel":"icon","href":"/icon.svg?27251f321bf90e71","type":"image/svg+xml","sizes":"any"}]]
1:null
diff --git a/theme/iconography.html b/theme/iconography.html
index 9e2a3e6..b6d60de 100644
--- a/theme/iconography.html
+++ b/theme/iconography.html
@@ -1,4 +1,4 @@
-Canon Iconography
+Canon Iconography
All our default icons are provided by Remix Icon. We
don't import all icons to reduce the bundle size but we cherry pick a nice
selection for you to use in your application. The list of names is set down
@@ -6,4 +6,4 @@
the icon you want to use.
Icon component
<Icon name="heart" />
Icon library
-arrowDown
arrowLeft
arrowRight
arrowUp
arrowDownCircle
arrowLeftCircle
arrowRightCircle
arrowUpCircle
check
chevronDown
chevronUp
chevronLeft
chevronRight
cloud
externalLink
heart
moon
plus
sun
trash
\ No newline at end of file
+arrowDown
arrowLeft
arrowRight
arrowUp
arrowDownCircle
arrowLeftCircle
arrowRightCircle
arrowUpCircle
check
chevronDown
chevronUp
chevronLeft
chevronRight
cloud
externalLink
heart
moon
plus
sun
trash
\ No newline at end of file
diff --git a/theme/iconography.txt b/theme/iconography.txt
index 867b5b5..cafd565 100644
--- a/theme/iconography.txt
+++ b/theme/iconography.txt
@@ -14,7 +14,7 @@ e:I[3589,["3738","static/chunks/42437bae-f0d7b82f7021b572.js","2537","static/chu
10:{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"}
11:{"display":"inline-block"}
12:{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0}
-0:["69ZxaUa_enBpiXozIfKES",[[["",{"children":["(docs)",{"children":["theme",{"children":["iconography",{"children":["__PAGE__",{}]}]}]}]},"$undefined","$undefined",true],["",{"children":["(docs)",{"children":["theme",{"children":["iconography",{"children":["__PAGE__",{},[["$L1",[["$","div",null,{"className":"canon-Box","style":{"marginTop":"4rem"},"children":["$","h1",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"3rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"4rem","marginBottom":"0.5rem"},"children":"Iconography"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":["All our default icons are provided by ",["$","a",null,{"href":"https://remixicon.com/","style":{"color":"var(--canon-text-primary)"},"children":"Remix Icon"}],". We\ndon't import all icons to reduce the bundle size but we cherry pick a nice\nselection for you to use in your application. The list of names is set down\nbelow. To use an icon, you can use the ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"Icon"}]," component and pass the name of\nthe icon you want to use."]}],"\n","$L2","\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"Icon library"}]}],"\n",["$","div",null,{"className":"styles_library__heYod","children":[["$","div","arrowDown",{"className":"styles_item__eX4d7","children":[["$","div",null,{"className":"styles_icon__qun8b","children":["$","$L3",null,{"name":"arrowDown"}]}],["$","$L4",null,{"variant":"body","children":"arrowDown"}]]}],["$","div","arrowLeft",{"className":"styles_item__eX4d7","children":[["$","div",null,{"className":"styles_icon__qun8b","children":["$","$L3",null,{"name":"arrowLeft"}]}],["$","$L4",null,{"variant":"body","children":"arrowLeft"}]]}],["$","div","arrowRight",{"className":"styles_item__eX4d7","children":[["$","div",null,{"className":"styles_icon__qun8b","children":["$","$L3",null,{"name":"arrowRight"}]}],["$","$L4",null,{"variant":"body","children":"arrowRight"}]]}],["$","div","arrowUp",{"className":"styles_item__eX4d7","children":[["$","div",null,{"className":"styles_icon__qun8b","children":["$","$L3",null,{"name":"arrowUp"}]}],["$","$L4",null,{"variant":"body","children":"arrowUp"}]]}],["$","div","arrowDownCircle",{"className":"styles_item__eX4d7","children":[["$","div",null,{"className":"styles_icon__qun8b","children":["$","$L3",null,{"name":"arrowDownCircle"}]}],["$","$L4",null,{"variant":"body","children":"arrowDownCircle"}]]}],["$","div","arrowLeftCircle",{"className":"styles_item__eX4d7","children":[["$","div",null,{"className":"styles_icon__qun8b","children":["$","$L3",null,{"name":"arrowLeftCircle"}]}],["$","$L4",null,{"variant":"body","children":"arrowLeftCircle"}]]}],["$","div","arrowRightCircle",{"className":"styles_item__eX4d7","children":[["$","div",null,{"className":"styles_icon__qun8b","children":["$","$L3",null,{"name":"arrowRightCircle"}]}],["$","$L4",null,{"variant":"body","children":"arrowRightCircle"}]]}],["$","div","arrowUpCircle",{"className":"styles_item__eX4d7","children":[["$","div",null,{"className":"styles_icon__qun8b","children":["$","$L3",null,{"name":"arrowUpCircle"}]}],["$","$L4",null,{"variant":"body","children":"arrowUpCircle"}]]}],["$","div","check",{"className":"styles_item__eX4d7","children":[["$","div",null,{"className":"styles_icon__qun8b","children":["$","$L3",null,{"name":"check"}]}],["$","$L4",null,{"variant":"body","children":"check"}]]}],["$","div","chevronDown",{"className":"styles_item__eX4d7","children":[["$","div",null,{"className":"styles_icon__qun8b","children":["$","$L3",null,{"name":"chevronDown"}]}],["$","$L4",null,{"variant":"body","children":"chevronDown"}]]}],["$","div","chevronUp",{"className":"styles_item__eX4d7","children":[["$","div",null,{"className":"styles_icon__qun8b","children":["$","$L3",null,{"name":"chevronUp"}]}],["$","$L4",null,{"variant":"body","children":"chevronUp"}]]}],["$","div","chevronLeft",{"className":"styles_item__eX4d7","children":[["$","div",null,{"className":"styles_icon__qun8b","children":["$","$L3",null,{"name":"chevronLeft"}]}],["$","$L4",null,{"variant":"body","children":"chevronLeft"}]]}],["$","div","chevronRight",{"className":"styles_item__eX4d7","children":[["$","div",null,{"className":"styles_icon__qun8b","children":["$","$L3",null,{"name":"chevronRight"}]}],["$","$L4",null,{"variant":"body","children":"chevronRight"}]]}],["$","div","cloud",{"className":"styles_item__eX4d7","children":[["$","div",null,{"className":"styles_icon__qun8b","children":["$","$L3",null,{"name":"cloud"}]}],["$","$L4",null,{"variant":"body","children":"cloud"}]]}],["$","div","externalLink",{"className":"styles_item__eX4d7","children":[["$","div",null,{"className":"styles_icon__qun8b","children":["$","$L3",null,{"name":"externalLink"}]}],["$","$L4",null,{"variant":"body","children":"externalLink"}]]}],["$","div","heart",{"className":"styles_item__eX4d7","children":[["$","div",null,{"className":"styles_icon__qun8b","children":["$","$L3",null,{"name":"heart"}]}],["$","$L4",null,{"variant":"body","children":"heart"}]]}],["$","div","moon",{"className":"styles_item__eX4d7","children":[["$","div",null,{"className":"styles_icon__qun8b","children":["$","$L3",null,{"name":"moon"}]}],["$","$L4",null,{"variant":"body","children":"moon"}]]}],["$","div","plus",{"className":"styles_item__eX4d7","children":[["$","div",null,{"className":"styles_icon__qun8b","children":["$","$L3",null,{"name":"plus"}]}],["$","$L4",null,{"variant":"body","children":"plus"}]]}],["$","div","sun",{"className":"styles_item__eX4d7","children":[["$","div",null,{"className":"styles_icon__qun8b","children":["$","$L3",null,{"name":"sun"}]}],["$","$L4",null,{"variant":"body","children":"sun"}]]}],["$","div","trash",{"className":"styles_item__eX4d7","children":[["$","div",null,{"className":"styles_icon__qun8b","children":["$","$L3",null,{"name":"trash"}]}],["$","$L4",null,{"variant":"body","children":"trash"}]]}]]}]],[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/0199d4a4f0fa1d14.css","precedence":"next","crossOrigin":"$undefined"}]]],null],null]},[null,["$","$L5",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","theme","children","iconography","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[null,["$","$L5",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","theme","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/1196c23d52bc6240.css","precedence":"next","crossOrigin":"$undefined"}]],["$","div",null,{"className":"layout_pageContainer__Io_cr","children":["$","$L5",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]}]],null],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/d780293ffc4ef285.css","precedence":"next","crossOrigin":"$undefined"}]],["$","html",null,{"lang":"en","data-theme":"light","data-theme-name":"default","suppressHydrationWarning":true,"children":["$","body",null,{"children":["$","$L7",null,{"children":["$","div",null,{"className":"page_global__DlbOF","children":[["$","div",null,{"className":"Sidebar_sidebar__86IlD","children":[["$","div",null,{"className":"Sidebar_logoContainer__OcEVQ","children":["$","$L8",null,{"href":"/","children":["$","svg",null,{"width":"89","height":"27","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"Sidebar_logo__P79Og","children":[["$","path",null,{"d":"$9"}],["$","path",null,{"d":"M14.037 16.729a4.237 4.237 0 0 0 4.234-4.24 4.237 4.237 0 0 0-4.234-4.242 4.237 4.237 0 0 0-4.234 4.241 4.237 4.237 0 0 0 4.234 4.24Z"}]]}]}]}],["$","div",null,{"className":"Sidebar_menu__sTTeJ","children":[["$","$La",null,{}],["$","$Lb",null,{}]]}]]}],["$","div",null,{"className":"page_container__aoG4z","children":[["$","div",null,{"className":"styles_toolbar__Dfx8Q","children":[["$","div",null,{"children":["$","$Lc",null,{}]}],["$","div",null,{"className":"styles_actions__hQrVs","children":[["$","$Ld",null,{}],["$","$Le",null,{}]]}]]}],["$","$L5",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":"$f","children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":"$10","children":"404"}],["$","div",null,{"style":"$11","children":["$","h2",null,{"style":"$12","children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]]}],["$","$L13",null,{}]]}]}]}]}]],null],null],["$L14",null]]]]
+0:["_2li3SoTt_Arxf9uHWRG5",[[["",{"children":["(docs)",{"children":["theme",{"children":["iconography",{"children":["__PAGE__",{}]}]}]}]},"$undefined","$undefined",true],["",{"children":["(docs)",{"children":["theme",{"children":["iconography",{"children":["__PAGE__",{},[["$L1",[["$","div",null,{"className":"canon-Box","style":{"marginTop":"4rem"},"children":["$","h1",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"3rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"4rem","marginBottom":"0.5rem"},"children":"Iconography"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":["All our default icons are provided by ",["$","a",null,{"href":"https://remixicon.com/","style":{"color":"var(--canon-text-primary)"},"children":"Remix Icon"}],". We\ndon't import all icons to reduce the bundle size but we cherry pick a nice\nselection for you to use in your application. The list of names is set down\nbelow. To use an icon, you can use the ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"Icon"}]," component and pass the name of\nthe icon you want to use."]}],"\n","$L2","\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"Icon library"}]}],"\n",["$","div",null,{"className":"styles_library__heYod","children":[["$","div","arrowDown",{"className":"styles_item__eX4d7","children":[["$","div",null,{"className":"styles_icon__qun8b","children":["$","$L3",null,{"name":"arrowDown"}]}],["$","$L4",null,{"variant":"body","children":"arrowDown"}]]}],["$","div","arrowLeft",{"className":"styles_item__eX4d7","children":[["$","div",null,{"className":"styles_icon__qun8b","children":["$","$L3",null,{"name":"arrowLeft"}]}],["$","$L4",null,{"variant":"body","children":"arrowLeft"}]]}],["$","div","arrowRight",{"className":"styles_item__eX4d7","children":[["$","div",null,{"className":"styles_icon__qun8b","children":["$","$L3",null,{"name":"arrowRight"}]}],["$","$L4",null,{"variant":"body","children":"arrowRight"}]]}],["$","div","arrowUp",{"className":"styles_item__eX4d7","children":[["$","div",null,{"className":"styles_icon__qun8b","children":["$","$L3",null,{"name":"arrowUp"}]}],["$","$L4",null,{"variant":"body","children":"arrowUp"}]]}],["$","div","arrowDownCircle",{"className":"styles_item__eX4d7","children":[["$","div",null,{"className":"styles_icon__qun8b","children":["$","$L3",null,{"name":"arrowDownCircle"}]}],["$","$L4",null,{"variant":"body","children":"arrowDownCircle"}]]}],["$","div","arrowLeftCircle",{"className":"styles_item__eX4d7","children":[["$","div",null,{"className":"styles_icon__qun8b","children":["$","$L3",null,{"name":"arrowLeftCircle"}]}],["$","$L4",null,{"variant":"body","children":"arrowLeftCircle"}]]}],["$","div","arrowRightCircle",{"className":"styles_item__eX4d7","children":[["$","div",null,{"className":"styles_icon__qun8b","children":["$","$L3",null,{"name":"arrowRightCircle"}]}],["$","$L4",null,{"variant":"body","children":"arrowRightCircle"}]]}],["$","div","arrowUpCircle",{"className":"styles_item__eX4d7","children":[["$","div",null,{"className":"styles_icon__qun8b","children":["$","$L3",null,{"name":"arrowUpCircle"}]}],["$","$L4",null,{"variant":"body","children":"arrowUpCircle"}]]}],["$","div","check",{"className":"styles_item__eX4d7","children":[["$","div",null,{"className":"styles_icon__qun8b","children":["$","$L3",null,{"name":"check"}]}],["$","$L4",null,{"variant":"body","children":"check"}]]}],["$","div","chevronDown",{"className":"styles_item__eX4d7","children":[["$","div",null,{"className":"styles_icon__qun8b","children":["$","$L3",null,{"name":"chevronDown"}]}],["$","$L4",null,{"variant":"body","children":"chevronDown"}]]}],["$","div","chevronUp",{"className":"styles_item__eX4d7","children":[["$","div",null,{"className":"styles_icon__qun8b","children":["$","$L3",null,{"name":"chevronUp"}]}],["$","$L4",null,{"variant":"body","children":"chevronUp"}]]}],["$","div","chevronLeft",{"className":"styles_item__eX4d7","children":[["$","div",null,{"className":"styles_icon__qun8b","children":["$","$L3",null,{"name":"chevronLeft"}]}],["$","$L4",null,{"variant":"body","children":"chevronLeft"}]]}],["$","div","chevronRight",{"className":"styles_item__eX4d7","children":[["$","div",null,{"className":"styles_icon__qun8b","children":["$","$L3",null,{"name":"chevronRight"}]}],["$","$L4",null,{"variant":"body","children":"chevronRight"}]]}],["$","div","cloud",{"className":"styles_item__eX4d7","children":[["$","div",null,{"className":"styles_icon__qun8b","children":["$","$L3",null,{"name":"cloud"}]}],["$","$L4",null,{"variant":"body","children":"cloud"}]]}],["$","div","externalLink",{"className":"styles_item__eX4d7","children":[["$","div",null,{"className":"styles_icon__qun8b","children":["$","$L3",null,{"name":"externalLink"}]}],["$","$L4",null,{"variant":"body","children":"externalLink"}]]}],["$","div","heart",{"className":"styles_item__eX4d7","children":[["$","div",null,{"className":"styles_icon__qun8b","children":["$","$L3",null,{"name":"heart"}]}],["$","$L4",null,{"variant":"body","children":"heart"}]]}],["$","div","moon",{"className":"styles_item__eX4d7","children":[["$","div",null,{"className":"styles_icon__qun8b","children":["$","$L3",null,{"name":"moon"}]}],["$","$L4",null,{"variant":"body","children":"moon"}]]}],["$","div","plus",{"className":"styles_item__eX4d7","children":[["$","div",null,{"className":"styles_icon__qun8b","children":["$","$L3",null,{"name":"plus"}]}],["$","$L4",null,{"variant":"body","children":"plus"}]]}],["$","div","sun",{"className":"styles_item__eX4d7","children":[["$","div",null,{"className":"styles_icon__qun8b","children":["$","$L3",null,{"name":"sun"}]}],["$","$L4",null,{"variant":"body","children":"sun"}]]}],["$","div","trash",{"className":"styles_item__eX4d7","children":[["$","div",null,{"className":"styles_icon__qun8b","children":["$","$L3",null,{"name":"trash"}]}],["$","$L4",null,{"variant":"body","children":"trash"}]]}]]}]],[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/0199d4a4f0fa1d14.css","precedence":"next","crossOrigin":"$undefined"}]]],null],null]},[null,["$","$L5",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","theme","children","iconography","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[null,["$","$L5",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","theme","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/1196c23d52bc6240.css","precedence":"next","crossOrigin":"$undefined"}]],["$","div",null,{"className":"layout_pageContainer__Io_cr","children":["$","$L5",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]}]],null],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/d780293ffc4ef285.css","precedence":"next","crossOrigin":"$undefined"}]],["$","html",null,{"lang":"en","data-theme":"light","data-theme-name":"default","suppressHydrationWarning":true,"children":["$","body",null,{"children":["$","$L7",null,{"children":["$","div",null,{"className":"page_global__DlbOF","children":[["$","div",null,{"className":"Sidebar_sidebar__86IlD","children":[["$","div",null,{"className":"Sidebar_logoContainer__OcEVQ","children":["$","$L8",null,{"href":"/","children":["$","svg",null,{"width":"89","height":"27","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"Sidebar_logo__P79Og","children":[["$","path",null,{"d":"$9"}],["$","path",null,{"d":"M14.037 16.729a4.237 4.237 0 0 0 4.234-4.24 4.237 4.237 0 0 0-4.234-4.242 4.237 4.237 0 0 0-4.234 4.241 4.237 4.237 0 0 0 4.234 4.24Z"}]]}]}]}],["$","div",null,{"className":"Sidebar_menu__sTTeJ","children":[["$","$La",null,{}],["$","$Lb",null,{}]]}]]}],["$","div",null,{"className":"page_container__aoG4z","children":[["$","div",null,{"className":"styles_toolbar__Dfx8Q","children":[["$","div",null,{"children":["$","$Lc",null,{}]}],["$","div",null,{"className":"styles_actions__hQrVs","children":[["$","$Ld",null,{}],["$","$Le",null,{}]]}]]}],["$","$L5",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":"$f","children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":"$10","children":"404"}],["$","div",null,{"style":"$11","children":["$","h2",null,{"style":"$12","children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]]}],["$","$L13",null,{}]]}]}]}]}]],null],null],["$L14",null]]]]
2:["$","div",null,{"className":"styles_codeBlock__cJkhk","children":[["$","div",null,{"className":"styles_title__LVFiR","children":["$","$L4",null,{"variant":"body","children":"Icon component"}]}],["$","div",null,{"dangerouslySetInnerHTML":{"__html":"<Icon name=\"heart\" />
"},"className":"styles_code__W0N63"}]]}]
14:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Canon"}],["$","meta","3",{"name":"description","content":"UI library for Backstage"}],["$","meta","4",{"property":"og:title","content":"Canon"}],["$","meta","5",{"property":"og:description","content":"UI library for Backstage"}],["$","meta","6",{"property":"og:image:type","content":"image/jpeg"}],["$","meta","7",{"property":"og:image:width","content":"1200"}],["$","meta","8",{"property":"og:image:height","content":"630"}],["$","meta","9",{"property":"og:image","content":"https://canon.backstage.io/opengraph-image.jpg?556e6c1ce23ce382"}],["$","meta","10",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","11",{"name":"twitter:title","content":"Canon"}],["$","meta","12",{"name":"twitter:description","content":"UI library for Backstage"}],["$","meta","13",{"name":"twitter:image:type","content":"image/jpeg"}],["$","meta","14",{"name":"twitter:image:width","content":"1200"}],["$","meta","15",{"name":"twitter:image:height","content":"630"}],["$","meta","16",{"name":"twitter:image","content":"https://canon.backstage.io/opengraph-image.jpg?556e6c1ce23ce382"}],["$","link","17",{"rel":"icon","href":"/icon.svg?27251f321bf90e71","type":"image/svg+xml","sizes":"any"}]]
1:null
diff --git a/theme/layout.html b/theme/layout.html
index 109a504..606e7b7 100644
--- a/theme/layout.html
+++ b/theme/layout.html
@@ -1,4 +1,4 @@
-Canon Layout
+Canon Layout
Canon is made for extensibility. We built this library to make it easy for any
Backstage plugin creator to be able to build their ideas at speed ensuring
consistency across the rest of your ecosystem. Each component is designed to
@@ -26,4 +26,4 @@
Sometimes you want to use global tokens dynamically outside of React
components. To help you with that we would like to provide a set of helpers
that you can use in your code. These helpers are not available just yet but we
-are working on it.
\ No newline at end of file
+are working on it.
\ No newline at end of file
diff --git a/theme/layout.txt b/theme/layout.txt
index d00ee18..4ea0a1f 100644
--- a/theme/layout.txt
+++ b/theme/layout.txt
@@ -12,7 +12,7 @@ c:I[3589,["3738","static/chunks/42437bae-f0d7b82f7021b572.js","2537","static/chu
e:{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"}
f:{"display":"inline-block"}
10:{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0}
-0:["69ZxaUa_enBpiXozIfKES",[[["",{"children":["(docs)",{"children":["theme",{"children":["layout",{"children":["__PAGE__",{}]}]}]}]},"$undefined","$undefined",true],["",{"children":["(docs)",{"children":["theme",{"children":["layout",{"children":["__PAGE__",{},[["$L1",[["$","div",null,{"className":"canon-Box","style":{"marginTop":"4rem"},"children":["$","h1",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"3rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"4rem","marginBottom":"0.5rem"},"children":"Layout"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"Canon is made for extensibility. We built this library to make it easy for any\nBackstage plugin creator to be able to build their ideas at speed ensuring\nconsistency across the rest of your ecosystem. Each component is designed to\nbe editable to match your need but sometimes you want to have more control\nover the layout of your page. To help you with that, we created a set of\nlayout components that you can use to build your own layouts. All of these\ncomponents are built to extend on our theming system, making it easy for you\nto build your own layouts. Sometimes these components are not enough so we\ncreated a set of helpers to be used with any CSS-in-JS library."}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"Layout Components"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"We built a couple of layout components to help you build responsive elements\nthat will be consistent with the rest of your Backstage instance. These\ncomponents are opinionated and use TypeScript to ensure that the props you\nprovide are the ones coming from the theme."}],"\n","$L2","\n",["$","div",null,{"className":"LayoutComponents_layoutComponents__D4OeQ","children":[["$","div",null,{"className":"LayoutComponents_box__h5hEW","children":[["$","$L3",null,{"className":"LayoutComponents_content__R2UDY","href":"/components/box","children":["$","svg",null,{"width":"100","height":"60","viewBox":"0 0 100 60","fill":"none","xmlns":"http://www.w3.org/2000/svg","children":[["$","rect",null,{"width":"100","height":"60","rx":"4","fill":"black","fillOpacity":"0.06"}],["$","path",null,{"d":"M94.5 0.5H96C97.933 0.5 99.5 2.067 99.5 4V5.5","stroke":"#4765FF","strokeLinecap":"round","strokeLinejoin":"round"}],["$","path",null,{"d":"M99.5 54.5L99.5 56C99.5 57.933 97.933 59.5 96 59.5L94.5 59.5","stroke":"#4765FF","strokeLinecap":"round","strokeLinejoin":"round"}],["$","path",null,{"d":"M5.5 59.5L4 59.5C2.067 59.5 0.5 57.933 0.5 56L0.5 54.5","stroke":"#4765FF","strokeLinecap":"round","strokeLinejoin":"round"}],["$","path",null,{"d":"M0.5 5.5L0.5 4C0.5 2.067 2.067 0.5 4 0.5L5.5 0.500001","stroke":"#4765FF","strokeLinecap":"round","strokeLinejoin":"round"}]]}]}],["$","div",null,{"className":"LayoutComponents_title__c1uLc","children":"Box"}],["$","div",null,{"className":"LayoutComponents_description__5mYZa","children":"The most basic layout component"}]]}],["$","div",null,{"className":"LayoutComponents_box__h5hEW","children":[["$","$L3",null,{"className":"LayoutComponents_content__R2UDY","href":"/components/stack","children":["$","svg",null,{"width":"100","height":"96","viewBox":"0 0 100 96","fill":"none","xmlns":"http://www.w3.org/2000/svg","children":[["$","rect",null,{"width":"100","height":"24","rx":"4","fill":"black","fillOpacity":"0.06"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M49.5 36L49.5 25L50.5 25L50.5 36L49.5 36Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M44 25C43.7239 25 43.5 24.7761 43.5 24.5V24.5C43.5 24.2239 43.7239 24 44 24L56 24C56.2761 24 56.5 24.2239 56.5 24.5V24.5C56.5 24.7761 56.2761 25 56 25L44 25Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M44 36C43.7239 36 43.5 35.7761 43.5 35.5V35.5C43.5 35.2239 43.7239 35 44 35L56 35C56.2761 35 56.5 35.2239 56.5 35.5V35.5C56.5 35.7761 56.2761 36 56 36L44 36Z","fill":"#4765FF"}],["$","rect",null,{"y":"36","width":"100","height":"24","rx":"4","fill":"black","fillOpacity":"0.06"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M49.5 72L49.5 61L50.5 61L50.5 72L49.5 72Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M44 61C43.7239 61 43.5 60.7761 43.5 60.5V60.5C43.5 60.2239 43.7239 60 44 60L56 60C56.2761 60 56.5 60.2239 56.5 60.5V60.5C56.5 60.7761 56.2761 61 56 61L44 61Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M44 72C43.7239 72 43.5 71.7761 43.5 71.5V71.5C43.5 71.2239 43.7239 71 44 71L56 71C56.2761 71 56.5 71.2239 56.5 71.5V71.5C56.5 71.7761 56.2761 72 56 72L44 72Z","fill":"#4765FF"}],["$","rect",null,{"y":"72","width":"100","height":"24","rx":"4","fill":"black","fillOpacity":"0.06"}]]}]}],["$","div",null,{"className":"LayoutComponents_title__c1uLc","children":"Stack"}],["$","div",null,{"className":"LayoutComponents_description__5mYZa","children":"Arrange your components vertically"}]]}],["$","div",null,{"className":"LayoutComponents_box__h5hEW","children":[["$","$L3",null,{"className":"LayoutComponents_content__R2UDY","href":"/components/grid","children":["$","svg",null,{"width":"166","height":"61","viewBox":"0 0 166 61","fill":"none","xmlns":"http://www.w3.org/2000/svg","children":[["$","rect",null,{"x":"0.5","width":"52","height":"61","rx":"4","fill":"black","fillOpacity":"0.06"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M53.5 30L64.5 30V31L53.5 31L53.5 30Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M64.5 24.5C64.5 24.2239 64.7239 24 65 24C65.2761 24 65.5 24.2239 65.5 24.5L65.5 36.5C65.5 36.7761 65.2761 37 65 37C64.7239 37 64.5 36.7761 64.5 36.5L64.5 24.5Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M52.5 24.5C52.5 24.2239 52.7239 24 53 24C53.2761 24 53.5 24.2239 53.5 24.5L53.5 36.5C53.5 36.7761 53.2761 37 53 37C52.7239 37 52.5 36.7761 52.5 36.5L52.5 24.5Z","fill":"#4765FF"}],["$","rect",null,{"x":"65.5","y":"0.5","width":"100","height":"24","rx":"4","fill":"black","fillOpacity":"0.06"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M115 36.5L115 25.5L116 25.5L116 36.5L115 36.5Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M109.5 25.5C109.224 25.5 109 25.2761 109 25V25C109 24.7239 109.224 24.5 109.5 24.5L121.5 24.5C121.776 24.5 122 24.7239 122 25V25C122 25.2761 121.776 25.5 121.5 25.5L109.5 25.5Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M109.5 36.5C109.224 36.5 109 36.2761 109 36V36C109 35.7239 109.224 35.5 109.5 35.5L121.5 35.5C121.776 35.5 122 35.7239 122 36V36C122 36.2761 121.776 36.5 121.5 36.5L109.5 36.5Z","fill":"#4765FF"}],["$","rect",null,{"x":"65.5","y":"36.5","width":"100","height":"24","rx":"4","fill":"black","fillOpacity":"0.06"}]]}]}],["$","div",null,{"className":"LayoutComponents_title__c1uLc","children":"Grid"}],["$","div",null,{"className":"LayoutComponents_description__5mYZa","children":"Arrange your components in a grid"}]]}],["$","div",null,{"className":"LayoutComponents_box__h5hEW","children":[["$","$L3",null,{"className":"LayoutComponents_content__R2UDY","href":"/components/inline","children":["$","svg",null,{"width":"159","height":"56","viewBox":"0 0 159 56","fill":"none","xmlns":"http://www.w3.org/2000/svg","children":[["$","rect",null,{"width":"24","height":"24","rx":"4","fill":"black","fillOpacity":"0.06"}],["$","rect",null,{"x":"32","width":"24","height":"24","rx":"4","fill":"black","fillOpacity":"0.06"}],["$","rect",null,{"x":"64","width":"24","height":"24","rx":"4","fill":"black","fillOpacity":"0.06"}],["$","rect",null,{"x":"96","width":"24","height":"24","rx":"4","fill":"black","fillOpacity":"0.06"}],["$","rect",null,{"x":"128","width":"24","height":"24","rx":"4","fill":"black","fillOpacity":"0.06"}],["$","rect",null,{"y":"32","width":"24","height":"24","rx":"4","fill":"black","fillOpacity":"0.06"}],["$","rect",null,{"x":"32","y":"32","width":"24","height":"24","rx":"4","fill":"black","fillOpacity":"0.06"}],["$","rect",null,{"x":"64","y":"32","width":"24","height":"24","rx":"4","fill":"black","fillOpacity":"0.06"}],["$","path",null,{"d":"M12 12H138.811C141.238 12 141.569 15.5106 139.185 15.9647L12.8145 40.0353C10.4306 40.4894 10.762 44 13.1888 44H77","stroke":"#4765FF"}]]}]}],["$","div",null,{"className":"LayoutComponents_title__c1uLc","children":"Inline"}],["$","div",null,{"className":"LayoutComponents_description__5mYZa","children":"Arrange your components in a row"}]]}],["$","div",null,{"className":"LayoutComponents_box__h5hEW","children":[["$","$L3",null,{"className":"LayoutComponents_content__R2UDY","href":"/components/container","children":["$","svg",null,{"width":"126","height":"111","viewBox":"0 0 126 111","fill":"none","xmlns":"http://www.w3.org/2000/svg","children":[["$","mask",null,{"id":"mask0_1922_1559","maskUnits":"userSpaceOnUse","x":"0","y":"0","width":"13","height":"111","children":["$","rect",null,{"width":"13","height":"111","fill":"url(#paint0_linear_1922_1559)"}]}],["$","g",null,{"mask":"url(#mask0_1922_1559)","children":[["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M1 44.7563L13.0259 51.6995L12.5259 52.5655L0.5 45.6224L1 44.7563Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M1 50.5655L13.0259 57.5087L12.5259 58.3747L0.5 51.4316L1 50.5655Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M1 56.3747L13.0259 63.3179L12.5259 64.1839L0.5 57.2408L1 56.3747Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M1 62.1839L13.0259 69.1271L12.5259 69.9931L0.5 63.05L1 62.1839Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M1 67.9931L13.0259 74.9363L12.5259 75.8023L0.5 68.8592L1 67.9931Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M1 73.8023L13.0259 80.7455L12.5259 81.6116L0.5 74.6684L1 73.8023Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M1 79.6115L13.0259 86.5547L12.5259 87.4208L0.5 80.4776L1 79.6115Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M1 85.4208L13.0259 92.3639L12.5259 93.23L0.5 86.2868L1 85.4208Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M1 91.23L13.0259 98.1731L12.5259 99.0392L0.5 92.096L1 91.23Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M1 97.0392L13.0259 103.982L12.5259 104.848L0.5 97.9052L1 97.0392Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M1 102.848L13.0259 109.792L12.5259 110.658L0.5 103.714L1 102.848Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M1 108.658L13.0259 115.601L12.5259 116.467L0.5 109.524L1 108.658Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M1 38.9471L13.0259 45.8903L12.5259 46.7563L0.5 39.8131L1 38.9471Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M1 33.1379L13.0259 40.0811L12.5259 40.9471L0.5 34.0039L1 33.1379Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M1 27.3287L13.0259 34.2719L12.5259 35.1379L0.5 28.1947L1 27.3287Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M1 21.5195L13.0259 28.4627L12.5259 29.3287L0.5 22.3855L1 21.5195Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M1 15.7103L13.0259 22.6535L12.5259 23.5195L0.5 16.5763L1 15.7103Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M1 9.90109L13.0259 16.8443L12.5259 17.7103L0.5 10.7671L1 9.90109Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M1 4.09188L13.0259 11.0351L12.5259 11.9011L0.5 4.95791L1 4.09188Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M1 -1.71732L13.0259 5.22586L12.5259 6.09188L0.5 -0.851298L1 -1.71732Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M1 -7.52653L13.0259 -0.583351L12.5259 0.282675L0.5 -6.66051L1 -7.52653Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M0 131L0 -17H1L1 131H0Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M12 131L12 -17H13L13 131H12Z","fill":"#4765FF"}]]}],["$","rect",null,{"x":"13","y":"25.5","width":"100","height":"60","rx":"4","fill":"black","fillOpacity":"0.06"}],["$","mask",null,{"id":"mask1_1922_1559","maskUnits":"userSpaceOnUse","x":"113","y":"0","width":"13","height":"111","children":["$","rect",null,{"x":"113","width":"13","height":"111","fill":"url(#paint1_linear_1922_1559)"}]}],["$","g",null,{"mask":"url(#mask1_1922_1559)","children":[["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M114 44.7563L126.026 51.6995L125.526 52.5655L113.5 45.6224L114 44.7563Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M114 50.5655L126.026 57.5087L125.526 58.3747L113.5 51.4316L114 50.5655Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M114 56.3747L126.026 63.3179L125.526 64.1839L113.5 57.2408L114 56.3747Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M114 62.1839L126.026 69.1271L125.526 69.9931L113.5 63.05L114 62.1839Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M114 67.9931L126.026 74.9363L125.526 75.8023L113.5 68.8592L114 67.9931Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M114 73.8023L126.026 80.7455L125.526 81.6116L113.5 74.6684L114 73.8023Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M114 79.6115L126.026 86.5547L125.526 87.4208L113.5 80.4776L114 79.6115Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M114 85.4208L126.026 92.3639L125.526 93.23L113.5 86.2868L114 85.4208Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M114 91.23L126.026 98.1731L125.526 99.0392L113.5 92.096L114 91.23Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M114 97.0392L126.026 103.982L125.526 104.848L113.5 97.9052L114 97.0392Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M114 102.848L126.026 109.792L125.526 110.658L113.5 103.714L114 102.848Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M114 108.658L126.026 115.601L125.526 116.467L113.5 109.524L114 108.658Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M114 38.9471L126.026 45.8903L125.526 46.7563L113.5 39.8131L114 38.9471Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M114 33.1379L126.026 40.0811L125.526 40.9471L113.5 34.0039L114 33.1379Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M114 27.3287L126.026 34.2719L125.526 35.1379L113.5 28.1947L114 27.3287Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M114 21.5195L126.026 28.4627L125.526 29.3287L113.5 22.3855L114 21.5195Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M114 15.7103L126.026 22.6535L125.526 23.5195L113.5 16.5763L114 15.7103Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M114 9.90109L126.026 16.8443L125.526 17.7103L113.5 10.7671L114 9.90109Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M114 4.09188L126.026 11.0351L125.526 11.9011L113.5 4.95791L114 4.09188Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M114 -1.71732L126.026 5.22586L125.526 6.09188L113.5 -0.851298L114 -1.71732Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M114 -7.52653L126.026 -0.583351L125.526 0.282675L113.5 -6.66051L114 -7.52653Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M113 131L113 -17H114L114 131H113Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M125 131L125 -17H126L126 131H125Z","fill":"#4765FF"}]]}],["$","defs",null,{"children":[["$","linearGradient",null,{"id":"paint0_linear_1922_1559","x1":"6.5","y1":"0","x2":"6.5","y2":"111","gradientUnits":"userSpaceOnUse","children":[["$","stop",null,{"offset":"0.05","stopColor":"white","stopOpacity":"0"}],["$","stop",null,{"offset":"0.2","stopColor":"white"}],["$","stop",null,{"offset":"0.8","stopColor":"white"}],["$","stop",null,{"offset":"1","stopColor":"white","stopOpacity":"0"}]]}],["$","linearGradient",null,{"id":"paint1_linear_1922_1559","x1":"119.5","y1":"0","x2":"119.5","y2":"111","gradientUnits":"userSpaceOnUse","children":[["$","stop",null,{"offset":"0.05","stopColor":"white","stopOpacity":"0"}],["$","stop",null,{"offset":"0.2","stopColor":"white"}],["$","stop",null,{"offset":"0.8","stopColor":"white"}],["$","stop",null,{"offset":"1","stopColor":"white","stopOpacity":"0"}]]}]]}]]}]}],["$","div",null,{"className":"LayoutComponents_title__c1uLc","children":"Container"}],["$","div",null,{"className":"LayoutComponents_description__5mYZa","children":"A container for your components"}]]}]]}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"Layout Helpers"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"Sometimes you want to use global tokens dynamically outside of React\ncomponents. To help you with that we would like to provide a set of helpers\nthat you can use in your code. These helpers are not available just yet but we\nare working on it."}]],[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/0199d4a4f0fa1d14.css","precedence":"next","crossOrigin":"$undefined"}]]],null],null]},[null,["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","theme","children","layout","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[null,["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","theme","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/1196c23d52bc6240.css","precedence":"next","crossOrigin":"$undefined"}]],["$","div",null,{"className":"layout_pageContainer__Io_cr","children":["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]}]],null],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/d780293ffc4ef285.css","precedence":"next","crossOrigin":"$undefined"}]],["$","html",null,{"lang":"en","data-theme":"light","data-theme-name":"default","suppressHydrationWarning":true,"children":["$","body",null,{"children":["$","$L6",null,{"children":["$","div",null,{"className":"page_global__DlbOF","children":[["$","div",null,{"className":"Sidebar_sidebar__86IlD","children":[["$","div",null,{"className":"Sidebar_logoContainer__OcEVQ","children":["$","$L3",null,{"href":"/","children":["$","svg",null,{"width":"89","height":"27","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"Sidebar_logo__P79Og","children":[["$","path",null,{"d":"$7"}],["$","path",null,{"d":"M14.037 16.729a4.237 4.237 0 0 0 4.234-4.24 4.237 4.237 0 0 0-4.234-4.242 4.237 4.237 0 0 0-4.234 4.241 4.237 4.237 0 0 0 4.234 4.24Z"}]]}]}]}],["$","div",null,{"className":"Sidebar_menu__sTTeJ","children":[["$","$L8",null,{}],["$","$L9",null,{}]]}]]}],["$","div",null,{"className":"page_container__aoG4z","children":[["$","div",null,{"className":"styles_toolbar__Dfx8Q","children":[["$","div",null,{"children":["$","$La",null,{}]}],["$","div",null,{"className":"styles_actions__hQrVs","children":[["$","$Lb",null,{}],["$","$Lc",null,{}]]}]]}],["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":"$d","children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":"$e","children":"404"}],["$","div",null,{"style":"$f","children":["$","h2",null,{"style":"$10","children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]]}],["$","$L11",null,{}]]}]}]}]}]],null],null],["$L12",null]]]]
+0:["_2li3SoTt_Arxf9uHWRG5",[[["",{"children":["(docs)",{"children":["theme",{"children":["layout",{"children":["__PAGE__",{}]}]}]}]},"$undefined","$undefined",true],["",{"children":["(docs)",{"children":["theme",{"children":["layout",{"children":["__PAGE__",{},[["$L1",[["$","div",null,{"className":"canon-Box","style":{"marginTop":"4rem"},"children":["$","h1",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"3rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"4rem","marginBottom":"0.5rem"},"children":"Layout"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"Canon is made for extensibility. We built this library to make it easy for any\nBackstage plugin creator to be able to build their ideas at speed ensuring\nconsistency across the rest of your ecosystem. Each component is designed to\nbe editable to match your need but sometimes you want to have more control\nover the layout of your page. To help you with that, we created a set of\nlayout components that you can use to build your own layouts. All of these\ncomponents are built to extend on our theming system, making it easy for you\nto build your own layouts. Sometimes these components are not enough so we\ncreated a set of helpers to be used with any CSS-in-JS library."}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"Layout Components"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"We built a couple of layout components to help you build responsive elements\nthat will be consistent with the rest of your Backstage instance. These\ncomponents are opinionated and use TypeScript to ensure that the props you\nprovide are the ones coming from the theme."}],"\n","$L2","\n",["$","div",null,{"className":"LayoutComponents_layoutComponents__D4OeQ","children":[["$","div",null,{"className":"LayoutComponents_box__h5hEW","children":[["$","$L3",null,{"className":"LayoutComponents_content__R2UDY","href":"/components/box","children":["$","svg",null,{"width":"100","height":"60","viewBox":"0 0 100 60","fill":"none","xmlns":"http://www.w3.org/2000/svg","children":[["$","rect",null,{"width":"100","height":"60","rx":"4","fill":"black","fillOpacity":"0.06"}],["$","path",null,{"d":"M94.5 0.5H96C97.933 0.5 99.5 2.067 99.5 4V5.5","stroke":"#4765FF","strokeLinecap":"round","strokeLinejoin":"round"}],["$","path",null,{"d":"M99.5 54.5L99.5 56C99.5 57.933 97.933 59.5 96 59.5L94.5 59.5","stroke":"#4765FF","strokeLinecap":"round","strokeLinejoin":"round"}],["$","path",null,{"d":"M5.5 59.5L4 59.5C2.067 59.5 0.5 57.933 0.5 56L0.5 54.5","stroke":"#4765FF","strokeLinecap":"round","strokeLinejoin":"round"}],["$","path",null,{"d":"M0.5 5.5L0.5 4C0.5 2.067 2.067 0.5 4 0.5L5.5 0.500001","stroke":"#4765FF","strokeLinecap":"round","strokeLinejoin":"round"}]]}]}],["$","div",null,{"className":"LayoutComponents_title__c1uLc","children":"Box"}],["$","div",null,{"className":"LayoutComponents_description__5mYZa","children":"The most basic layout component"}]]}],["$","div",null,{"className":"LayoutComponents_box__h5hEW","children":[["$","$L3",null,{"className":"LayoutComponents_content__R2UDY","href":"/components/stack","children":["$","svg",null,{"width":"100","height":"96","viewBox":"0 0 100 96","fill":"none","xmlns":"http://www.w3.org/2000/svg","children":[["$","rect",null,{"width":"100","height":"24","rx":"4","fill":"black","fillOpacity":"0.06"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M49.5 36L49.5 25L50.5 25L50.5 36L49.5 36Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M44 25C43.7239 25 43.5 24.7761 43.5 24.5V24.5C43.5 24.2239 43.7239 24 44 24L56 24C56.2761 24 56.5 24.2239 56.5 24.5V24.5C56.5 24.7761 56.2761 25 56 25L44 25Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M44 36C43.7239 36 43.5 35.7761 43.5 35.5V35.5C43.5 35.2239 43.7239 35 44 35L56 35C56.2761 35 56.5 35.2239 56.5 35.5V35.5C56.5 35.7761 56.2761 36 56 36L44 36Z","fill":"#4765FF"}],["$","rect",null,{"y":"36","width":"100","height":"24","rx":"4","fill":"black","fillOpacity":"0.06"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M49.5 72L49.5 61L50.5 61L50.5 72L49.5 72Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M44 61C43.7239 61 43.5 60.7761 43.5 60.5V60.5C43.5 60.2239 43.7239 60 44 60L56 60C56.2761 60 56.5 60.2239 56.5 60.5V60.5C56.5 60.7761 56.2761 61 56 61L44 61Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M44 72C43.7239 72 43.5 71.7761 43.5 71.5V71.5C43.5 71.2239 43.7239 71 44 71L56 71C56.2761 71 56.5 71.2239 56.5 71.5V71.5C56.5 71.7761 56.2761 72 56 72L44 72Z","fill":"#4765FF"}],["$","rect",null,{"y":"72","width":"100","height":"24","rx":"4","fill":"black","fillOpacity":"0.06"}]]}]}],["$","div",null,{"className":"LayoutComponents_title__c1uLc","children":"Stack"}],["$","div",null,{"className":"LayoutComponents_description__5mYZa","children":"Arrange your components vertically"}]]}],["$","div",null,{"className":"LayoutComponents_box__h5hEW","children":[["$","$L3",null,{"className":"LayoutComponents_content__R2UDY","href":"/components/grid","children":["$","svg",null,{"width":"166","height":"61","viewBox":"0 0 166 61","fill":"none","xmlns":"http://www.w3.org/2000/svg","children":[["$","rect",null,{"x":"0.5","width":"52","height":"61","rx":"4","fill":"black","fillOpacity":"0.06"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M53.5 30L64.5 30V31L53.5 31L53.5 30Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M64.5 24.5C64.5 24.2239 64.7239 24 65 24C65.2761 24 65.5 24.2239 65.5 24.5L65.5 36.5C65.5 36.7761 65.2761 37 65 37C64.7239 37 64.5 36.7761 64.5 36.5L64.5 24.5Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M52.5 24.5C52.5 24.2239 52.7239 24 53 24C53.2761 24 53.5 24.2239 53.5 24.5L53.5 36.5C53.5 36.7761 53.2761 37 53 37C52.7239 37 52.5 36.7761 52.5 36.5L52.5 24.5Z","fill":"#4765FF"}],["$","rect",null,{"x":"65.5","y":"0.5","width":"100","height":"24","rx":"4","fill":"black","fillOpacity":"0.06"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M115 36.5L115 25.5L116 25.5L116 36.5L115 36.5Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M109.5 25.5C109.224 25.5 109 25.2761 109 25V25C109 24.7239 109.224 24.5 109.5 24.5L121.5 24.5C121.776 24.5 122 24.7239 122 25V25C122 25.2761 121.776 25.5 121.5 25.5L109.5 25.5Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M109.5 36.5C109.224 36.5 109 36.2761 109 36V36C109 35.7239 109.224 35.5 109.5 35.5L121.5 35.5C121.776 35.5 122 35.7239 122 36V36C122 36.2761 121.776 36.5 121.5 36.5L109.5 36.5Z","fill":"#4765FF"}],["$","rect",null,{"x":"65.5","y":"36.5","width":"100","height":"24","rx":"4","fill":"black","fillOpacity":"0.06"}]]}]}],["$","div",null,{"className":"LayoutComponents_title__c1uLc","children":"Grid"}],["$","div",null,{"className":"LayoutComponents_description__5mYZa","children":"Arrange your components in a grid"}]]}],["$","div",null,{"className":"LayoutComponents_box__h5hEW","children":[["$","$L3",null,{"className":"LayoutComponents_content__R2UDY","href":"/components/inline","children":["$","svg",null,{"width":"159","height":"56","viewBox":"0 0 159 56","fill":"none","xmlns":"http://www.w3.org/2000/svg","children":[["$","rect",null,{"width":"24","height":"24","rx":"4","fill":"black","fillOpacity":"0.06"}],["$","rect",null,{"x":"32","width":"24","height":"24","rx":"4","fill":"black","fillOpacity":"0.06"}],["$","rect",null,{"x":"64","width":"24","height":"24","rx":"4","fill":"black","fillOpacity":"0.06"}],["$","rect",null,{"x":"96","width":"24","height":"24","rx":"4","fill":"black","fillOpacity":"0.06"}],["$","rect",null,{"x":"128","width":"24","height":"24","rx":"4","fill":"black","fillOpacity":"0.06"}],["$","rect",null,{"y":"32","width":"24","height":"24","rx":"4","fill":"black","fillOpacity":"0.06"}],["$","rect",null,{"x":"32","y":"32","width":"24","height":"24","rx":"4","fill":"black","fillOpacity":"0.06"}],["$","rect",null,{"x":"64","y":"32","width":"24","height":"24","rx":"4","fill":"black","fillOpacity":"0.06"}],["$","path",null,{"d":"M12 12H138.811C141.238 12 141.569 15.5106 139.185 15.9647L12.8145 40.0353C10.4306 40.4894 10.762 44 13.1888 44H77","stroke":"#4765FF"}]]}]}],["$","div",null,{"className":"LayoutComponents_title__c1uLc","children":"Inline"}],["$","div",null,{"className":"LayoutComponents_description__5mYZa","children":"Arrange your components in a row"}]]}],["$","div",null,{"className":"LayoutComponents_box__h5hEW","children":[["$","$L3",null,{"className":"LayoutComponents_content__R2UDY","href":"/components/container","children":["$","svg",null,{"width":"126","height":"111","viewBox":"0 0 126 111","fill":"none","xmlns":"http://www.w3.org/2000/svg","children":[["$","mask",null,{"id":"mask0_1922_1559","maskUnits":"userSpaceOnUse","x":"0","y":"0","width":"13","height":"111","children":["$","rect",null,{"width":"13","height":"111","fill":"url(#paint0_linear_1922_1559)"}]}],["$","g",null,{"mask":"url(#mask0_1922_1559)","children":[["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M1 44.7563L13.0259 51.6995L12.5259 52.5655L0.5 45.6224L1 44.7563Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M1 50.5655L13.0259 57.5087L12.5259 58.3747L0.5 51.4316L1 50.5655Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M1 56.3747L13.0259 63.3179L12.5259 64.1839L0.5 57.2408L1 56.3747Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M1 62.1839L13.0259 69.1271L12.5259 69.9931L0.5 63.05L1 62.1839Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M1 67.9931L13.0259 74.9363L12.5259 75.8023L0.5 68.8592L1 67.9931Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M1 73.8023L13.0259 80.7455L12.5259 81.6116L0.5 74.6684L1 73.8023Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M1 79.6115L13.0259 86.5547L12.5259 87.4208L0.5 80.4776L1 79.6115Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M1 85.4208L13.0259 92.3639L12.5259 93.23L0.5 86.2868L1 85.4208Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M1 91.23L13.0259 98.1731L12.5259 99.0392L0.5 92.096L1 91.23Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M1 97.0392L13.0259 103.982L12.5259 104.848L0.5 97.9052L1 97.0392Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M1 102.848L13.0259 109.792L12.5259 110.658L0.5 103.714L1 102.848Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M1 108.658L13.0259 115.601L12.5259 116.467L0.5 109.524L1 108.658Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M1 38.9471L13.0259 45.8903L12.5259 46.7563L0.5 39.8131L1 38.9471Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M1 33.1379L13.0259 40.0811L12.5259 40.9471L0.5 34.0039L1 33.1379Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M1 27.3287L13.0259 34.2719L12.5259 35.1379L0.5 28.1947L1 27.3287Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M1 21.5195L13.0259 28.4627L12.5259 29.3287L0.5 22.3855L1 21.5195Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M1 15.7103L13.0259 22.6535L12.5259 23.5195L0.5 16.5763L1 15.7103Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M1 9.90109L13.0259 16.8443L12.5259 17.7103L0.5 10.7671L1 9.90109Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M1 4.09188L13.0259 11.0351L12.5259 11.9011L0.5 4.95791L1 4.09188Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M1 -1.71732L13.0259 5.22586L12.5259 6.09188L0.5 -0.851298L1 -1.71732Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M1 -7.52653L13.0259 -0.583351L12.5259 0.282675L0.5 -6.66051L1 -7.52653Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M0 131L0 -17H1L1 131H0Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M12 131L12 -17H13L13 131H12Z","fill":"#4765FF"}]]}],["$","rect",null,{"x":"13","y":"25.5","width":"100","height":"60","rx":"4","fill":"black","fillOpacity":"0.06"}],["$","mask",null,{"id":"mask1_1922_1559","maskUnits":"userSpaceOnUse","x":"113","y":"0","width":"13","height":"111","children":["$","rect",null,{"x":"113","width":"13","height":"111","fill":"url(#paint1_linear_1922_1559)"}]}],["$","g",null,{"mask":"url(#mask1_1922_1559)","children":[["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M114 44.7563L126.026 51.6995L125.526 52.5655L113.5 45.6224L114 44.7563Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M114 50.5655L126.026 57.5087L125.526 58.3747L113.5 51.4316L114 50.5655Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M114 56.3747L126.026 63.3179L125.526 64.1839L113.5 57.2408L114 56.3747Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M114 62.1839L126.026 69.1271L125.526 69.9931L113.5 63.05L114 62.1839Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M114 67.9931L126.026 74.9363L125.526 75.8023L113.5 68.8592L114 67.9931Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M114 73.8023L126.026 80.7455L125.526 81.6116L113.5 74.6684L114 73.8023Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M114 79.6115L126.026 86.5547L125.526 87.4208L113.5 80.4776L114 79.6115Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M114 85.4208L126.026 92.3639L125.526 93.23L113.5 86.2868L114 85.4208Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M114 91.23L126.026 98.1731L125.526 99.0392L113.5 92.096L114 91.23Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M114 97.0392L126.026 103.982L125.526 104.848L113.5 97.9052L114 97.0392Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M114 102.848L126.026 109.792L125.526 110.658L113.5 103.714L114 102.848Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M114 108.658L126.026 115.601L125.526 116.467L113.5 109.524L114 108.658Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M114 38.9471L126.026 45.8903L125.526 46.7563L113.5 39.8131L114 38.9471Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M114 33.1379L126.026 40.0811L125.526 40.9471L113.5 34.0039L114 33.1379Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M114 27.3287L126.026 34.2719L125.526 35.1379L113.5 28.1947L114 27.3287Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M114 21.5195L126.026 28.4627L125.526 29.3287L113.5 22.3855L114 21.5195Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M114 15.7103L126.026 22.6535L125.526 23.5195L113.5 16.5763L114 15.7103Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M114 9.90109L126.026 16.8443L125.526 17.7103L113.5 10.7671L114 9.90109Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M114 4.09188L126.026 11.0351L125.526 11.9011L113.5 4.95791L114 4.09188Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M114 -1.71732L126.026 5.22586L125.526 6.09188L113.5 -0.851298L114 -1.71732Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M114 -7.52653L126.026 -0.583351L125.526 0.282675L113.5 -6.66051L114 -7.52653Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M113 131L113 -17H114L114 131H113Z","fill":"#4765FF"}],["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M125 131L125 -17H126L126 131H125Z","fill":"#4765FF"}]]}],["$","defs",null,{"children":[["$","linearGradient",null,{"id":"paint0_linear_1922_1559","x1":"6.5","y1":"0","x2":"6.5","y2":"111","gradientUnits":"userSpaceOnUse","children":[["$","stop",null,{"offset":"0.05","stopColor":"white","stopOpacity":"0"}],["$","stop",null,{"offset":"0.2","stopColor":"white"}],["$","stop",null,{"offset":"0.8","stopColor":"white"}],["$","stop",null,{"offset":"1","stopColor":"white","stopOpacity":"0"}]]}],["$","linearGradient",null,{"id":"paint1_linear_1922_1559","x1":"119.5","y1":"0","x2":"119.5","y2":"111","gradientUnits":"userSpaceOnUse","children":[["$","stop",null,{"offset":"0.05","stopColor":"white","stopOpacity":"0"}],["$","stop",null,{"offset":"0.2","stopColor":"white"}],["$","stop",null,{"offset":"0.8","stopColor":"white"}],["$","stop",null,{"offset":"1","stopColor":"white","stopOpacity":"0"}]]}]]}]]}]}],["$","div",null,{"className":"LayoutComponents_title__c1uLc","children":"Container"}],["$","div",null,{"className":"LayoutComponents_description__5mYZa","children":"A container for your components"}]]}]]}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"Layout Helpers"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"Sometimes you want to use global tokens dynamically outside of React\ncomponents. To help you with that we would like to provide a set of helpers\nthat you can use in your code. These helpers are not available just yet but we\nare working on it."}]],[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/0199d4a4f0fa1d14.css","precedence":"next","crossOrigin":"$undefined"}]]],null],null]},[null,["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","theme","children","layout","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[null,["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","theme","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/1196c23d52bc6240.css","precedence":"next","crossOrigin":"$undefined"}]],["$","div",null,{"className":"layout_pageContainer__Io_cr","children":["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]}]],null],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/d780293ffc4ef285.css","precedence":"next","crossOrigin":"$undefined"}]],["$","html",null,{"lang":"en","data-theme":"light","data-theme-name":"default","suppressHydrationWarning":true,"children":["$","body",null,{"children":["$","$L6",null,{"children":["$","div",null,{"className":"page_global__DlbOF","children":[["$","div",null,{"className":"Sidebar_sidebar__86IlD","children":[["$","div",null,{"className":"Sidebar_logoContainer__OcEVQ","children":["$","$L3",null,{"href":"/","children":["$","svg",null,{"width":"89","height":"27","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"Sidebar_logo__P79Og","children":[["$","path",null,{"d":"$7"}],["$","path",null,{"d":"M14.037 16.729a4.237 4.237 0 0 0 4.234-4.24 4.237 4.237 0 0 0-4.234-4.242 4.237 4.237 0 0 0-4.234 4.241 4.237 4.237 0 0 0 4.234 4.24Z"}]]}]}]}],["$","div",null,{"className":"Sidebar_menu__sTTeJ","children":[["$","$L8",null,{}],["$","$L9",null,{}]]}]]}],["$","div",null,{"className":"page_container__aoG4z","children":[["$","div",null,{"className":"styles_toolbar__Dfx8Q","children":[["$","div",null,{"children":["$","$La",null,{}]}],["$","div",null,{"className":"styles_actions__hQrVs","children":[["$","$Lb",null,{}],["$","$Lc",null,{}]]}]]}],["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":"$d","children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":"$e","children":"404"}],["$","div",null,{"style":"$f","children":["$","h2",null,{"style":"$10","children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]]}],["$","$L11",null,{}]]}]}]}]}]],null],null],["$L12",null]]]]
13:I[5832,["3738","static/chunks/42437bae-f0d7b82f7021b572.js","6211","static/chunks/6211-a88b4281519a87ad.js","2972","static/chunks/2972-9f00cb0867656923.js","5987","static/chunks/app/(docs)/theme/layout/page-e89e766b7a9aaf4e.js"],"Text"]
14:Ta4d,<Stack direction="column" gap="md">
<Box>Hello World</Box>
diff --git a/theme/responsive.html b/theme/responsive.html
index 722f911..baa9899 100644
--- a/theme/responsive.html
+++ b/theme/responsive.html
@@ -1,4 +1,4 @@
-Canon Responsive
+Canon Responsive
Canon is built on a responsive design system, meaning that the components are
designed to adapt to different screen sizes. By default we offer a set of
breakpoints that you can use to create responsive components.
@@ -27,4 +27,4 @@
lg: 1024,
xl: 1280,
'2xl': 1536,
-}} />
\ No newline at end of file
+}} />
\ No newline at end of file
diff --git a/theme/responsive.txt b/theme/responsive.txt
index be3d5ad..3873c2f 100644
--- a/theme/responsive.txt
+++ b/theme/responsive.txt
@@ -12,7 +12,7 @@ d:I[3589,["3738","static/chunks/42437bae-f0d7b82f7021b572.js","2537","static/chu
f:{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"}
10:{"display":"inline-block"}
11:{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0}
-0:["69ZxaUa_enBpiXozIfKES",[[["",{"children":["(docs)",{"children":["theme",{"children":["responsive",{"children":["__PAGE__",{}]}]}]}]},"$undefined","$undefined",true],["",{"children":["(docs)",{"children":["theme",{"children":["responsive",{"children":["__PAGE__",{},[["$L1",[["$","div",null,{"className":"canon-Box","style":{"marginTop":"4rem"},"children":["$","h1",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"3rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"4rem","marginBottom":"0.5rem"},"children":"Responsive"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"Canon is built on a responsive design system, meaning that the components are\ndesigned to adapt to different screen sizes. By default we offer a set of\nbreakpoints that you can use to create responsive components."}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"Breakpoints"}]}],"\n",["$","div",null,{"className":"styles_wrapper__sBS6b","children":["$","table",null,{"className":"styles_table__ij6HO","children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Breakpoint prefix"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Minimum width"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"CSS"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"xs"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"0px"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"{ ... }"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"sm"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"640px"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"@media (min-width: 640px) { ... }"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"md"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"768px"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"@media (min-width: 768px) { ... }"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"lg"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"1024px"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"@media (min-width: 1024px) { ... }"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"xl"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"1280px"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"@media (min-width: 1280px) { ... }"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"2xl"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"1536px"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"@media (min-width: 1536px) { ... }"}]}]]}]]}]]}]}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"Responsive components"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"Canon components are designed to be responsive, meaning that they will adapt\nto different screen sizes. Not every component is responsive, but the ones\nthat are will have a prop to control the responsive behavior."}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"The behaviour is the same for each component. For each prop, instead of adding\nthe value, you add an object with the value and the breakpoint prefix."}],"\n","$L2","\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"How to update breakpoints"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"The set of keys are not to be changed, but you can update the minimum width of\neach breakpoint in the theme provider."}],"\n","$L3"],[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/0199d4a4f0fa1d14.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/css/ca9ae3edf20ccb56.css","precedence":"next","crossOrigin":"$undefined"}]]],null],null]},[null,["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","theme","children","responsive","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[null,["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","theme","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/1196c23d52bc6240.css","precedence":"next","crossOrigin":"$undefined"}]],["$","div",null,{"className":"layout_pageContainer__Io_cr","children":["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]}]],null],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/d780293ffc4ef285.css","precedence":"next","crossOrigin":"$undefined"}]],["$","html",null,{"lang":"en","data-theme":"light","data-theme-name":"default","suppressHydrationWarning":true,"children":["$","body",null,{"children":["$","$L6",null,{"children":["$","div",null,{"className":"page_global__DlbOF","children":[["$","div",null,{"className":"Sidebar_sidebar__86IlD","children":[["$","div",null,{"className":"Sidebar_logoContainer__OcEVQ","children":["$","$L7",null,{"href":"/","children":["$","svg",null,{"width":"89","height":"27","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"Sidebar_logo__P79Og","children":[["$","path",null,{"d":"$8"}],["$","path",null,{"d":"M14.037 16.729a4.237 4.237 0 0 0 4.234-4.24 4.237 4.237 0 0 0-4.234-4.242 4.237 4.237 0 0 0-4.234 4.241 4.237 4.237 0 0 0 4.234 4.24Z"}]]}]}]}],["$","div",null,{"className":"Sidebar_menu__sTTeJ","children":[["$","$L9",null,{}],["$","$La",null,{}]]}]]}],["$","div",null,{"className":"page_container__aoG4z","children":[["$","div",null,{"className":"styles_toolbar__Dfx8Q","children":[["$","div",null,{"children":["$","$Lb",null,{}]}],["$","div",null,{"className":"styles_actions__hQrVs","children":[["$","$Lc",null,{}],["$","$Ld",null,{}]]}]]}],["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":"$e","children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":"$f","children":"404"}],["$","div",null,{"style":"$10","children":["$","h2",null,{"style":"$11","children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]]}],["$","$L12",null,{}]]}]}]}]}]],null],null],["$L13",null]]]]
+0:["_2li3SoTt_Arxf9uHWRG5",[[["",{"children":["(docs)",{"children":["theme",{"children":["responsive",{"children":["__PAGE__",{}]}]}]}]},"$undefined","$undefined",true],["",{"children":["(docs)",{"children":["theme",{"children":["responsive",{"children":["__PAGE__",{},[["$L1",[["$","div",null,{"className":"canon-Box","style":{"marginTop":"4rem"},"children":["$","h1",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"3rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"4rem","marginBottom":"0.5rem"},"children":"Responsive"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"Canon is built on a responsive design system, meaning that the components are\ndesigned to adapt to different screen sizes. By default we offer a set of\nbreakpoints that you can use to create responsive components."}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"Breakpoints"}]}],"\n",["$","div",null,{"className":"styles_wrapper__sBS6b","children":["$","table",null,{"className":"styles_table__ij6HO","children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Breakpoint prefix"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Minimum width"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"CSS"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"xs"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"0px"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"{ ... }"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"sm"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"640px"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"@media (min-width: 640px) { ... }"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"md"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"768px"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"@media (min-width: 768px) { ... }"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"lg"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"1024px"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"@media (min-width: 1024px) { ... }"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"xl"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"1280px"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"@media (min-width: 1280px) { ... }"}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"2xl"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"1536px"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 ","children":"@media (min-width: 1536px) { ... }"}]}]]}]]}]]}]}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"Responsive components"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"Canon components are designed to be responsive, meaning that they will adapt\nto different screen sizes. Not every component is responsive, but the ones\nthat are will have a prop to control the responsive behavior."}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"The behaviour is the same for each component. For each prop, instead of adding\nthe value, you add an object with the value and the breakpoint prefix."}],"\n","$L2","\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"How to update breakpoints"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"The set of keys are not to be changed, but you can update the minimum width of\neach breakpoint in the theme provider."}],"\n","$L3"],[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/0199d4a4f0fa1d14.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/css/ca9ae3edf20ccb56.css","precedence":"next","crossOrigin":"$undefined"}]]],null],null]},[null,["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","theme","children","responsive","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[null,["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","theme","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/1196c23d52bc6240.css","precedence":"next","crossOrigin":"$undefined"}]],["$","div",null,{"className":"layout_pageContainer__Io_cr","children":["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]}]],null],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/d780293ffc4ef285.css","precedence":"next","crossOrigin":"$undefined"}]],["$","html",null,{"lang":"en","data-theme":"light","data-theme-name":"default","suppressHydrationWarning":true,"children":["$","body",null,{"children":["$","$L6",null,{"children":["$","div",null,{"className":"page_global__DlbOF","children":[["$","div",null,{"className":"Sidebar_sidebar__86IlD","children":[["$","div",null,{"className":"Sidebar_logoContainer__OcEVQ","children":["$","$L7",null,{"href":"/","children":["$","svg",null,{"width":"89","height":"27","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"Sidebar_logo__P79Og","children":[["$","path",null,{"d":"$8"}],["$","path",null,{"d":"M14.037 16.729a4.237 4.237 0 0 0 4.234-4.24 4.237 4.237 0 0 0-4.234-4.242 4.237 4.237 0 0 0-4.234 4.241 4.237 4.237 0 0 0 4.234 4.24Z"}]]}]}]}],["$","div",null,{"className":"Sidebar_menu__sTTeJ","children":[["$","$L9",null,{}],["$","$La",null,{}]]}]]}],["$","div",null,{"className":"page_container__aoG4z","children":[["$","div",null,{"className":"styles_toolbar__Dfx8Q","children":[["$","div",null,{"children":["$","$Lb",null,{}]}],["$","div",null,{"className":"styles_actions__hQrVs","children":[["$","$Lc",null,{}],["$","$Ld",null,{}]]}]]}],["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":"$e","children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":"$f","children":"404"}],["$","div",null,{"style":"$10","children":["$","h2",null,{"style":"$11","children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]]}],["$","$L12",null,{}]]}]}]}]}]],null],null],["$L13",null]]]]
14:T752,// Fixed value
<Button size="small">Button</Button>
diff --git a/theme/theming.html b/theme/theming.html
index f024e3b..8b51d80 100644
--- a/theme/theming.html
+++ b/theme/theming.html
@@ -1,4 +1,4 @@
-Canon Theming
+Canon Theming
Backstage ships with a default theme with a light and dark mode variant. The
themes are provided as a part of the @backstage/canon package, which also
includes utilities for customizing the default theme, or creating completely
@@ -58,4 +58,4 @@
values from xxs to xxl. We use the values on padding and margin in our
layout components mostly. If you prefer to use a different spacing system, you
can do that by changing the values below.
-Prop Description --canon-space-unit The base unit for the spacing system. Default value is 1em
--canon-space-xxs Default value is 0.25 x space unit --canon-space-xs Default value is 0.5 x space unit --canon-space-sm Default value is 0.75 x space unit --canon-space-md Default value is 1.25 x space unit --canon-space-lg Default value is 2 x space unit --canon-space-xl Default value is 3.25 x space unit --canon-space-xxl Default value is 5.25 x space unit
\ No newline at end of file
+Prop Description --canon-space-unit The base unit for the spacing system. Default value is 1em
--canon-space-xxs Default value is 0.25 x space unit --canon-space-xs Default value is 0.5 x space unit --canon-space-sm Default value is 0.75 x space unit --canon-space-md Default value is 1.25 x space unit --canon-space-lg Default value is 2 x space unit --canon-space-xl Default value is 3.25 x space unit --canon-space-xxl Default value is 5.25 x space unit
\ No newline at end of file
diff --git a/theme/theming.txt b/theme/theming.txt
index 64b379f..ad71799 100644
--- a/theme/theming.txt
+++ b/theme/theming.txt
@@ -12,7 +12,7 @@ c:I[3589,["3738","static/chunks/42437bae-f0d7b82f7021b572.js","2537","static/chu
e:{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"}
f:{"display":"inline-block"}
10:{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0}
-0:["69ZxaUa_enBpiXozIfKES",[[["",{"children":["(docs)",{"children":["theme",{"children":["theming",{"children":["__PAGE__",{}]}]}]}]},"$undefined","$undefined",true],["",{"children":["(docs)",{"children":["theme",{"children":["theming",{"children":["__PAGE__",{},[["$L1",[["$","div",null,{"className":"canon-Box","style":{"marginTop":"4rem"},"children":["$","h1",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"3rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"4rem","marginBottom":"0.5rem"},"children":"Theming"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":["Backstage ships with a default theme with a light and dark mode variant. The\nthemes are provided as a part of the ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"@backstage/canon"}]," package, which also\nincludes utilities for customizing the default theme, or creating completely\nnew themes."]}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"Light & Dark modes"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"By default we are supporting both light and dark modes. Each user can opt to\nchoose what theme they want to use or to use their system decide what theme to\nuse. If you want to create your own theme, you will have to set both light and\ndark themes following the instructions below. If you only set one of them, the\nother mode will fallback to the default theme."}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"How to create your own theme"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"To create your own theme, you will have to define the variables below. To do\nthat, create a theme.css file and import it in your application. Here's an\nexample below on how to set your light and dark mode."}],"\n","$L2","\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"Colors"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"We provide a set of generic colours tokens that we use across Canon. By\nchanging these colours you can easily change the look and feel of your\napplication to match your brand."}],"\n",["$","div",null,{"className":"styles_wrapper__sBS6b","children":["$","table",null,{"className":"styles_table__ij6HO","children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Prop"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"--canon-bg-accent"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":"The accent color for the theme."}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"--canon-bg"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":"The background color for the theme."}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"--canon-bg-elevated"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":"The first surface color for the theme."}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"--canon-bg"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":"The second surface color for the theme."}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"--canon-outline"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":"The outline color for the theme."}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"--canon-outline-focus"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":"The outline focus color for the theme."}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"--canon-text-primary"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":"The primary text color for the theme."}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"--canon-text-secondary"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":"The secondary text color for the theme."}]]}]]}]]}]}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"Typography"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"We have two fonts that we use across Canon. The first one is the sans-serif\nfont that we use for the body of the application. The second one is the\nmonospace font that we use for code blocks and tables."}],"\n",["$","div",null,{"className":"styles_wrapper__sBS6b","children":["$","table",null,{"className":"styles_table__ij6HO","children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Prop"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"--canon-font-regular"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":"The sans-serif font for the theme."}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"--canon-font-mono"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":"The monospace font for the theme."}]]}]]}]]}]}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"Spacing"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":["Our default spacing system is made to work in most scenarios. We have 7 scale\nvalues from ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"xxs"}]," to ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"xxl"}],". We use the values on padding and margin in our\nlayout components mostly. If you prefer to use a different spacing system, you\ncan do that by changing the values below."]}],"\n",["$","div",null,{"className":"styles_wrapper__sBS6b","children":["$","table",null,{"className":"styles_table__ij6HO","children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Prop"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"--canon-space-unit"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":["The base unit for the spacing system. Default value is ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"1em"}]]}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"--canon-space-xxs"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["Default value is ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"0.25 x space unit"}]]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"--canon-space-xs"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["Default value is ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"0.5 x space unit"}]]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"--canon-space-sm"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["Default value is ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"0.75 x space unit"}]]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"--canon-space-md"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["Default value is ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"1.25 x space unit"}]]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"--canon-space-lg"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["Default value is ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"2 x space unit"}]]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"--canon-space-xl"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["Default value is ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"3.25 x space unit"}]]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"--canon-space-xxl"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["Default value is ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"5.25 x space unit"}]]}]]}]]}]]}]}]],[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/0199d4a4f0fa1d14.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/css/ca9ae3edf20ccb56.css","precedence":"next","crossOrigin":"$undefined"}]]],null],null]},[null,["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","theme","children","theming","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[null,["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","theme","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/1196c23d52bc6240.css","precedence":"next","crossOrigin":"$undefined"}]],["$","div",null,{"className":"layout_pageContainer__Io_cr","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]}]],null],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/d780293ffc4ef285.css","precedence":"next","crossOrigin":"$undefined"}]],["$","html",null,{"lang":"en","data-theme":"light","data-theme-name":"default","suppressHydrationWarning":true,"children":["$","body",null,{"children":["$","$L5",null,{"children":["$","div",null,{"className":"page_global__DlbOF","children":[["$","div",null,{"className":"Sidebar_sidebar__86IlD","children":[["$","div",null,{"className":"Sidebar_logoContainer__OcEVQ","children":["$","$L6",null,{"href":"/","children":["$","svg",null,{"width":"89","height":"27","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"Sidebar_logo__P79Og","children":[["$","path",null,{"d":"$7"}],["$","path",null,{"d":"M14.037 16.729a4.237 4.237 0 0 0 4.234-4.24 4.237 4.237 0 0 0-4.234-4.242 4.237 4.237 0 0 0-4.234 4.241 4.237 4.237 0 0 0 4.234 4.24Z"}]]}]}]}],["$","div",null,{"className":"Sidebar_menu__sTTeJ","children":[["$","$L8",null,{}],["$","$L9",null,{}]]}]]}],["$","div",null,{"className":"page_container__aoG4z","children":[["$","div",null,{"className":"styles_toolbar__Dfx8Q","children":[["$","div",null,{"children":["$","$La",null,{}]}],["$","div",null,{"className":"styles_actions__hQrVs","children":[["$","$Lb",null,{}],["$","$Lc",null,{}]]}]]}],["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":"$d","children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":"$e","children":"404"}],["$","div",null,{"style":"$f","children":["$","h2",null,{"style":"$10","children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]]}],["$","$L11",null,{}]]}]}]}]}]],null],null],["$L12",null]]]]
+0:["_2li3SoTt_Arxf9uHWRG5",[[["",{"children":["(docs)",{"children":["theme",{"children":["theming",{"children":["__PAGE__",{}]}]}]}]},"$undefined","$undefined",true],["",{"children":["(docs)",{"children":["theme",{"children":["theming",{"children":["__PAGE__",{},[["$L1",[["$","div",null,{"className":"canon-Box","style":{"marginTop":"4rem"},"children":["$","h1",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"3rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"4rem","marginBottom":"0.5rem"},"children":"Theming"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":["Backstage ships with a default theme with a light and dark mode variant. The\nthemes are provided as a part of the ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"@backstage/canon"}]," package, which also\nincludes utilities for customizing the default theme, or creating completely\nnew themes."]}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"Light & Dark modes"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"By default we are supporting both light and dark modes. Each user can opt to\nchoose what theme they want to use or to use their system decide what theme to\nuse. If you want to create your own theme, you will have to set both light and\ndark themes following the instructions below. If you only set one of them, the\nother mode will fallback to the default theme."}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"How to create your own theme"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"To create your own theme, you will have to define the variables below. To do\nthat, create a theme.css file and import it in your application. Here's an\nexample below on how to set your light and dark mode."}],"\n","$L2","\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"Colors"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"We provide a set of generic colours tokens that we use across Canon. By\nchanging these colours you can easily change the look and feel of your\napplication to match your brand."}],"\n",["$","div",null,{"className":"styles_wrapper__sBS6b","children":["$","table",null,{"className":"styles_table__ij6HO","children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Prop"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"--canon-bg-accent"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":"The accent color for the theme."}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"--canon-bg"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":"The background color for the theme."}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"--canon-bg-elevated"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":"The first surface color for the theme."}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"--canon-bg"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":"The second surface color for the theme."}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"--canon-outline"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":"The outline color for the theme."}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"--canon-outline-focus"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":"The outline focus color for the theme."}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"--canon-text-primary"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":"The primary text color for the theme."}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"--canon-text-secondary"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":"The secondary text color for the theme."}]]}]]}]]}]}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"Typography"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"We have two fonts that we use across Canon. The first one is the sans-serif\nfont that we use for the body of the application. The second one is the\nmonospace font that we use for code blocks and tables."}],"\n",["$","div",null,{"className":"styles_wrapper__sBS6b","children":["$","table",null,{"className":"styles_table__ij6HO","children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Prop"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"--canon-font-regular"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":"The sans-serif font for the theme."}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"--canon-font-mono"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":"The monospace font for the theme."}]]}]]}]]}]}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"Spacing"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":["Our default spacing system is made to work in most scenarios. We have 7 scale\nvalues from ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"xxs"}]," to ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"xxl"}],". We use the values on padding and margin in our\nlayout components mostly. If you prefer to use a different spacing system, you\ncan do that by changing the values below."]}],"\n",["$","div",null,{"className":"styles_wrapper__sBS6b","children":["$","table",null,{"className":"styles_table__ij6HO","children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Prop"}],["$","th",null,{"className":"styles_tableCell__kaS_H styles_tableHeaderCell__bWDvx","children":"Description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"--canon-space-unit"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":["The base unit for the spacing system. Default value is ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"1em"}]]}]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"--canon-space-xxs"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["Default value is ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"0.25 x space unit"}]]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"--canon-space-xs"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["Default value is ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"0.5 x space unit"}]]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"--canon-space-sm"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["Default value is ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"0.75 x space unit"}]]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"--canon-space-md"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["Default value is ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"1.25 x space unit"}]]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"--canon-space-lg"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["Default value is ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"2 x space unit"}]]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"--canon-space-xl"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["Default value is ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"3.25 x space unit"}]]}]]}],["$","tr",null,{"className":"styles_tableRow__LiOYk","children":[["$","td",null,{"className":"styles_tableCell__kaS_H","children":["$","span",null,{"className":"styles_chip__XPG78 styles_head__L8DiE","children":"--canon-space-xxl"}]}],["$","td",null,{"className":"styles_tableCell__kaS_H","children":["Default value is ",["$","code",null,{"style":{"fontFamily":"var(--canon-font-monospace)","backgroundColor":"var(--canon-bg-elevated)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--canon-text-secondary)","border":"1px solid var(--canon-border)","fontSize":"0.875rem"},"children":"5.25 x space unit"}]]}]]}]]}]]}]}]],[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/0199d4a4f0fa1d14.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/css/ca9ae3edf20ccb56.css","precedence":"next","crossOrigin":"$undefined"}]]],null],null]},[null,["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","theme","children","theming","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[null,["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","theme","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/1196c23d52bc6240.css","precedence":"next","crossOrigin":"$undefined"}]],["$","div",null,{"className":"layout_pageContainer__Io_cr","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]}]],null],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/d780293ffc4ef285.css","precedence":"next","crossOrigin":"$undefined"}]],["$","html",null,{"lang":"en","data-theme":"light","data-theme-name":"default","suppressHydrationWarning":true,"children":["$","body",null,{"children":["$","$L5",null,{"children":["$","div",null,{"className":"page_global__DlbOF","children":[["$","div",null,{"className":"Sidebar_sidebar__86IlD","children":[["$","div",null,{"className":"Sidebar_logoContainer__OcEVQ","children":["$","$L6",null,{"href":"/","children":["$","svg",null,{"width":"89","height":"27","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"Sidebar_logo__P79Og","children":[["$","path",null,{"d":"$7"}],["$","path",null,{"d":"M14.037 16.729a4.237 4.237 0 0 0 4.234-4.24 4.237 4.237 0 0 0-4.234-4.242 4.237 4.237 0 0 0-4.234 4.241 4.237 4.237 0 0 0 4.234 4.24Z"}]]}]}]}],["$","div",null,{"className":"Sidebar_menu__sTTeJ","children":[["$","$L8",null,{}],["$","$L9",null,{}]]}]]}],["$","div",null,{"className":"page_container__aoG4z","children":[["$","div",null,{"className":"styles_toolbar__Dfx8Q","children":[["$","div",null,{"children":["$","$La",null,{}]}],["$","div",null,{"className":"styles_actions__hQrVs","children":[["$","$Lb",null,{}],["$","$Lc",null,{}]]}]]}],["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":"$d","children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":"$e","children":"404"}],["$","div",null,{"style":"$f","children":["$","h2",null,{"style":"$10","children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]]}],["$","$L11",null,{}]]}]}]}]}]],null],null],["$L12",null]]]]
12:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Canon"}],["$","meta","3",{"name":"description","content":"UI library for Backstage"}],["$","meta","4",{"property":"og:title","content":"Canon"}],["$","meta","5",{"property":"og:description","content":"UI library for Backstage"}],["$","meta","6",{"property":"og:image:type","content":"image/jpeg"}],["$","meta","7",{"property":"og:image:width","content":"1200"}],["$","meta","8",{"property":"og:image:height","content":"630"}],["$","meta","9",{"property":"og:image","content":"https://canon.backstage.io/opengraph-image.jpg?556e6c1ce23ce382"}],["$","meta","10",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","11",{"name":"twitter:title","content":"Canon"}],["$","meta","12",{"name":"twitter:description","content":"UI library for Backstage"}],["$","meta","13",{"name":"twitter:image:type","content":"image/jpeg"}],["$","meta","14",{"name":"twitter:image:width","content":"1200"}],["$","meta","15",{"name":"twitter:image:height","content":"630"}],["$","meta","16",{"name":"twitter:image","content":"https://canon.backstage.io/opengraph-image.jpg?556e6c1ce23ce382"}],["$","link","17",{"rel":"icon","href":"/icon.svg?27251f321bf90e71","type":"image/svg+xml","sizes":"any"}]]
1:null
13:T1dc9,/** Light theme **/
diff --git a/theme/typography.html b/theme/typography.html
index 7126438..819c09d 100644
--- a/theme/typography.html
+++ b/theme/typography.html
@@ -1,4 +1,4 @@
-Canon Typography
+Canon Typography
Canon offers a suite of typography components designed to seamlessly align
with the rest of your Backstage instance. While you can customize their
appearance to match your brand, the underlying API remains consistent and
@@ -43,4 +43,4 @@
have none, but that man's father is my father's son.” Who is
in the painting?
</Text>
-</Stack>
\ No newline at end of file
+</Stack>
\ No newline at end of file
diff --git a/theme/typography.txt b/theme/typography.txt
index 5a5d338..2b865ad 100644
--- a/theme/typography.txt
+++ b/theme/typography.txt
@@ -18,7 +18,7 @@ e:Tb0f,M77.414 9.71h3.036v2.992l-.264-.022c.279-.88.748-1.65 1.408-2.31.675-.66
15:{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"}
16:{"display":"inline-block"}
17:{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0}
-0:["69ZxaUa_enBpiXozIfKES",[[["",{"children":["(docs)",{"children":["theme",{"children":["typography",{"children":["__PAGE__",{}]}]}]}]},"$undefined","$undefined",true],["",{"children":["(docs)",{"children":["theme",{"children":["typography",{"children":["__PAGE__",{},[["$L1",[["$","div",null,{"className":"canon-Box","style":{"marginTop":"4rem"},"children":["$","h1",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"3rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"4rem","marginBottom":"0.5rem"},"children":"Typography"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"Canon offers a suite of typography components designed to seamlessly align\nwith the rest of your Backstage instance. While you can customize their\nappearance to match your brand, the underlying API remains consistent and\nunchanged. Each component is built on a responsive structure, allowing you to\ndefine different typography values for various breakpoints."}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"Headings"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":["Headings are used to structure the content of your page. They are used to\ncreate a hierarchy of information and to make the content more readable. The\nbest way to use add these headings to your page is to import the ",["$","a",null,{"href":"?path=/docs/components-heading--docs","style":{"color":"var(--canon-text-primary)"},"children":"Heading\ncomponent"}],"."]}],"\n",["$","$L2",null,{"className":"styles_container__T5X7T","defaultOpen":true,"children":[["$","div",null,{"className":"styles_preview__tlnTq","children":[["$","div",null,{"className":"styles_previewContent__ZqyBx undefined","style":{"padding":"2rem 2rem"},"children":["$","$L3",null,{}]}],["$","$L4",null,{"className":"styles_trigger__oILEp","children":["$","$L5",null,{"variant":"body","children":"View code"}]}]]}],["$","$L6",null,{"className":"styles_panel__rSJk7","children":"$L7"}]]}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"Text"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":["Canon provides four distinct text variants, each offering different font sizes\ncarefully designed to cover the majority of use cases. These variants are\nversatile and can be paired with regular and bold of font weights. You can use\nthe ",["$","a",null,{"href":"?path=/docs/components-text--docs","style":{"color":"var(--canon-text-primary)"},"children":"Text component"}]," to add text to your\npage."]}],"\n",["$","$L2",null,{"className":"styles_container__T5X7T","defaultOpen":true,"children":[["$","div",null,{"className":"styles_preview__tlnTq","children":[["$","div",null,{"className":"styles_previewContent__ZqyBx undefined","style":{"padding":"2rem 2rem"},"children":["$","$L8",null,{}]}],["$","$L4",null,{"className":"styles_trigger__oILEp","children":["$","$L5",null,{"variant":"body","children":"View code"}]}]]}],["$","$L6",null,{"className":"styles_panel__rSJk7","children":"$L9"}]]}]],[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/0199d4a4f0fa1d14.css","precedence":"next","crossOrigin":"$undefined"}]]],null],null]},[null,["$","$La",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","theme","children","typography","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$Lb",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[null,["$","$La",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","theme","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$Lb",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/1196c23d52bc6240.css","precedence":"next","crossOrigin":"$undefined"}]],["$","div",null,{"className":"layout_pageContainer__Io_cr","children":["$","$La",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$Lb",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]}]],null],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/d780293ffc4ef285.css","precedence":"next","crossOrigin":"$undefined"}]],["$","html",null,{"lang":"en","data-theme":"light","data-theme-name":"default","suppressHydrationWarning":true,"children":["$","body",null,{"children":["$","$Lc",null,{"children":["$","div",null,{"className":"page_global__DlbOF","children":[["$","div",null,{"className":"Sidebar_sidebar__86IlD","children":[["$","div",null,{"className":"Sidebar_logoContainer__OcEVQ","children":["$","$Ld",null,{"href":"/","children":["$","svg",null,{"width":"89","height":"27","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"Sidebar_logo__P79Og","children":[["$","path",null,{"d":"$e"}],["$","path",null,{"d":"M14.037 16.729a4.237 4.237 0 0 0 4.234-4.24 4.237 4.237 0 0 0-4.234-4.242 4.237 4.237 0 0 0-4.234 4.241 4.237 4.237 0 0 0 4.234 4.24Z"}]]}]}]}],["$","div",null,{"className":"Sidebar_menu__sTTeJ","children":[["$","$Lf",null,{}],["$","$L10",null,{}]]}]]}],["$","div",null,{"className":"page_container__aoG4z","children":[["$","div",null,{"className":"styles_toolbar__Dfx8Q","children":[["$","div",null,{"children":["$","$L11",null,{}]}],["$","div",null,{"className":"styles_actions__hQrVs","children":[["$","$L12",null,{}],["$","$L13",null,{}]]}]]}],["$","$La",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$Lb",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":"$14","children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":"$15","children":"404"}],["$","div",null,{"style":"$16","children":["$","h2",null,{"style":"$17","children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]]}],["$","$L18",null,{}]]}]}]}]}]],null],null],["$L19",null]]]]
+0:["_2li3SoTt_Arxf9uHWRG5",[[["",{"children":["(docs)",{"children":["theme",{"children":["typography",{"children":["__PAGE__",{}]}]}]}]},"$undefined","$undefined",true],["",{"children":["(docs)",{"children":["theme",{"children":["typography",{"children":["__PAGE__",{},[["$L1",[["$","div",null,{"className":"canon-Box","style":{"marginTop":"4rem"},"children":["$","h1",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"3rem","fontWeight":"var(--canon-font-weight-bold)","marginTop":"4rem","marginBottom":"0.5rem"},"children":"Typography"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":"Canon offers a suite of typography components designed to seamlessly align\nwith the rest of your Backstage instance. While you can customize their\nappearance to match your brand, the underlying API remains consistent and\nunchanged. Each component is built on a responsive structure, allowing you to\ndefine different typography values for various breakpoints."}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"Headings"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":["Headings are used to structure the content of your page. They are used to\ncreate a hierarchy of information and to make the content more readable. The\nbest way to use add these headings to your page is to import the ",["$","a",null,{"href":"?path=/docs/components-heading--docs","style":{"color":"var(--canon-text-primary)"},"children":"Heading\ncomponent"}],"."]}],"\n",["$","$L2",null,{"className":"styles_container__T5X7T","defaultOpen":true,"children":[["$","div",null,{"className":"styles_preview__tlnTq","children":[["$","div",null,{"className":"styles_previewContent__ZqyBx undefined","style":{"padding":"2rem 2rem"},"children":["$","$L3",null,{}]}],["$","$L4",null,{"className":"styles_trigger__oILEp","children":["$","$L5",null,{"variant":"body","children":"View code"}]}]]}],["$","$L6",null,{"className":"styles_panel__rSJk7","children":"$L7"}]]}],"\n",["$","div",null,{"className":"canon-Box cu-mt-2xl cu-mb-md","style":"$undefined","children":["$","h2",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1.5rem","fontWeight":"var(--canon-font-weight-bold)"},"children":"Text"}]}],"\n",["$","p",null,{"style":{"fontFamily":"var(--docs-font)","fontSize":"1rem","lineHeight":"1.5","marginTop":"0","marginBottom":"1rem"},"children":["Canon provides four distinct text variants, each offering different font sizes\ncarefully designed to cover the majority of use cases. These variants are\nversatile and can be paired with regular and bold of font weights. You can use\nthe ",["$","a",null,{"href":"?path=/docs/components-text--docs","style":{"color":"var(--canon-text-primary)"},"children":"Text component"}]," to add text to your\npage."]}],"\n",["$","$L2",null,{"className":"styles_container__T5X7T","defaultOpen":true,"children":[["$","div",null,{"className":"styles_preview__tlnTq","children":[["$","div",null,{"className":"styles_previewContent__ZqyBx undefined","style":{"padding":"2rem 2rem"},"children":["$","$L8",null,{}]}],["$","$L4",null,{"className":"styles_trigger__oILEp","children":["$","$L5",null,{"variant":"body","children":"View code"}]}]]}],["$","$L6",null,{"className":"styles_panel__rSJk7","children":"$L9"}]]}]],[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/0199d4a4f0fa1d14.css","precedence":"next","crossOrigin":"$undefined"}]]],null],null]},[null,["$","$La",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","theme","children","typography","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$Lb",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[null,["$","$La",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children","theme","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$Lb",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/1196c23d52bc6240.css","precedence":"next","crossOrigin":"$undefined"}]],["$","div",null,{"className":"layout_pageContainer__Io_cr","children":["$","$La",null,{"parallelRouterKey":"children","segmentPath":["children","(docs)","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$Lb",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]}]],null],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/d780293ffc4ef285.css","precedence":"next","crossOrigin":"$undefined"}]],["$","html",null,{"lang":"en","data-theme":"light","data-theme-name":"default","suppressHydrationWarning":true,"children":["$","body",null,{"children":["$","$Lc",null,{"children":["$","div",null,{"className":"page_global__DlbOF","children":[["$","div",null,{"className":"Sidebar_sidebar__86IlD","children":[["$","div",null,{"className":"Sidebar_logoContainer__OcEVQ","children":["$","$Ld",null,{"href":"/","children":["$","svg",null,{"width":"89","height":"27","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"Sidebar_logo__P79Og","children":[["$","path",null,{"d":"$e"}],["$","path",null,{"d":"M14.037 16.729a4.237 4.237 0 0 0 4.234-4.24 4.237 4.237 0 0 0-4.234-4.242 4.237 4.237 0 0 0-4.234 4.241 4.237 4.237 0 0 0 4.234 4.24Z"}]]}]}]}],["$","div",null,{"className":"Sidebar_menu__sTTeJ","children":[["$","$Lf",null,{}],["$","$L10",null,{}]]}]]}],["$","div",null,{"className":"page_container__aoG4z","children":[["$","div",null,{"className":"styles_toolbar__Dfx8Q","children":[["$","div",null,{"children":["$","$L11",null,{}]}],["$","div",null,{"className":"styles_actions__hQrVs","children":[["$","$L12",null,{}],["$","$L13",null,{}]]}]]}],["$","$La",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$Lb",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":"$14","children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":"$15","children":"404"}],["$","div",null,{"style":"$16","children":["$","h2",null,{"style":"$17","children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]]}],["$","$L18",null,{}]]}]}]}]}]],null],null],["$L19",null]]]]
1a:Td81,<Stack gap="md">
<Heading variant="display">Display</Heading>
<Heading variant="title1">Title 1</Heading>