npm - @vibe/core - Versions diffs - 4.2.5 → 4.3.0-alpha-9bd83.0 - Mend

@vibe/core 4.2.5 → 4.3.0-alpha-9bd83.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (109) hide show

package/dist/metadata/accessibility/Accordion.md +10 -0
package/dist/metadata/accessibility/AlertBanner.md +9 -0
package/dist/metadata/accessibility/Avatar.md +12 -0
package/dist/metadata/accessibility/AvatarGroup.md +6 -0
package/dist/metadata/accessibility/BreadcrumbsBar.md +10 -0
package/dist/metadata/accessibility/Button.md +13 -0
package/dist/metadata/accessibility/ButtonGroup.md +9 -0
package/dist/metadata/accessibility/Checkbox.md +13 -0
package/dist/metadata/accessibility/Chips.md +10 -0
package/dist/metadata/accessibility/Combobox.md +6 -0
package/dist/metadata/accessibility/DropdownBasicDropdown.md +10 -0
package/dist/metadata/accessibility/IconButton.md +26 -0
package/dist/metadata/accessibility/Info.md +12 -0
package/dist/metadata/accessibility/Link.md +8 -0
package/dist/metadata/accessibility/List.md +11 -0
package/dist/metadata/accessibility/Menu.md +10 -0
package/dist/metadata/accessibility/MenuButton.md +6 -0
package/dist/metadata/accessibility/MenuItem.md +8 -0
package/dist/metadata/accessibility/Modal.md +35 -0
package/dist/metadata/accessibility/NumberField.md +9 -0
package/dist/metadata/accessibility/RadioButton.md +11 -0
package/dist/metadata/accessibility/Search.md +10 -0
package/dist/metadata/accessibility/Tabs.md +10 -0
package/dist/metadata/accessibility/TextArea.md +17 -0
package/dist/metadata/accessibility/TextField.md +16 -0
package/dist/metadata/accessibility/Toast.md +4 -0
package/dist/metadata/accessibility/Toggle.md +7 -0
package/dist/metadata/accessibility/Tooltip.md +11 -0
package/dist/metadata/components.json +20940 -0
package/dist/metadata/examples/Accordion.md +136 -0
package/dist/metadata/examples/AlertBanner.md +85 -0
package/dist/metadata/examples/AttentionBox.md +267 -0
package/dist/metadata/examples/Avatar.md +118 -0
package/dist/metadata/examples/AvatarGroup.md +390 -0
package/dist/metadata/examples/Badge.md +59 -0
package/dist/metadata/examples/BaseInput.md +2 -0
package/dist/metadata/examples/BaseList.md +342 -0
package/dist/metadata/examples/Box.md +208 -0
package/dist/metadata/examples/BreadcrumbItem.md +54 -0
package/dist/metadata/examples/BreadcrumbsBar.md +64 -0
package/dist/metadata/examples/Button.md +174 -0
package/dist/metadata/examples/ButtonGroup.md +180 -0
package/dist/metadata/examples/Checkbox.md +24 -0
package/dist/metadata/examples/Chips.md +192 -0
package/dist/metadata/examples/Clickable.md +31 -0
package/dist/metadata/examples/ColorPicker.md +2 -0
package/dist/metadata/examples/Combobox.md +438 -0
package/dist/metadata/examples/Counter.md +188 -0
package/dist/metadata/examples/DatePicker.md +43 -0
package/dist/metadata/examples/Dialog.md +521 -0
package/dist/metadata/examples/DialogContentContainer.md +18 -0
package/dist/metadata/examples/Divider.md +50 -0
package/dist/metadata/examples/DropdownBasicDropdown.md +479 -0
package/dist/metadata/examples/DropdownBoxMode.md +218 -0
package/dist/metadata/examples/EditableHeading.md +33 -0
package/dist/metadata/examples/EditableText.md +36 -0
package/dist/metadata/examples/EmptyState.md +192 -0
package/dist/metadata/examples/ExpandCollapse.md +77 -0
package/dist/metadata/examples/Flex.md +916 -0
package/dist/metadata/examples/Heading.md +124 -0
package/dist/metadata/examples/HiddenText.md +8 -0
package/dist/metadata/examples/Icon.md +67 -0
package/dist/metadata/examples/IconButton.md +141 -0
package/dist/metadata/examples/Info.md +80 -0
package/dist/metadata/examples/Label.md +109 -0
package/dist/metadata/examples/Link.md +52 -0
package/dist/metadata/examples/List.md +125 -0
package/dist/metadata/examples/ListItem.md +42 -0
package/dist/metadata/examples/Loader.md +148 -0
package/dist/metadata/examples/Menu.md +141 -0
package/dist/metadata/examples/MenuButton.md +127 -0
package/dist/metadata/examples/MenuDivider.md +35 -0
package/dist/metadata/examples/MenuGridItem.md +65 -0
package/dist/metadata/examples/MenuItem.md +98 -0
package/dist/metadata/examples/MenuItemButton.md +42 -0
package/dist/metadata/examples/MenuTitle.md +25 -0
package/dist/metadata/examples/ModalBasicLayout.md +400 -0
package/dist/metadata/examples/ModalMediaLayout.md +240 -0
package/dist/metadata/examples/ModalSideBySideLayout.md +313 -0
package/dist/metadata/examples/MultiStepIndicator.md +189 -0
package/dist/metadata/examples/NumberField.md +68 -0
package/dist/metadata/examples/ProgressBar.md +152 -0
package/dist/metadata/examples/RadioButton.md +41 -0
package/dist/metadata/examples/Search.md +24 -0
package/dist/metadata/examples/Skeleton.md +161 -0
package/dist/metadata/examples/Slider.md +109 -0
package/dist/metadata/examples/SplitButton.md +120 -0
package/dist/metadata/examples/Steps.md +106 -0
package/dist/metadata/examples/Table.md +449 -0
package/dist/metadata/examples/Tabs.md +241 -0
package/dist/metadata/examples/Text.md +188 -0
package/dist/metadata/examples/TextArea.md +28 -0
package/dist/metadata/examples/TextField.md +119 -0
package/dist/metadata/examples/TextWithHighlight.md +2 -0
package/dist/metadata/examples/ThemeProvider.md +47 -0
package/dist/metadata/examples/Tipseen.md +111 -0
package/dist/metadata/examples/Toast.md +127 -0
package/dist/metadata/examples/Toggle.md +38 -0
package/dist/metadata/examples/Tooltip.md +53 -0
package/dist/metadata/examples/VirtualizedGrid.md +54 -0
package/dist/metadata/examples/VirtualizedList.md +50 -0
package/dist/metadata/examples/useGridKeyboardNavigationContext.md +61 -0
package/dist/mocked_classnames/scripts/build-all-metadata.d.ts +1 -0
package/dist/mocked_classnames/scripts/extract-accessibility.d.ts +4 -0
package/dist/mocked_classnames/scripts/extract-examples.d.ts +3 -0
package/dist/scripts/build-all-metadata.d.ts +1 -0
package/dist/scripts/extract-accessibility.d.ts +4 -0
package/dist/scripts/extract-examples.d.ts +3 -0
package/package.json +12 -10

package/dist/metadata/examples/Flex.md ADDED Viewed

@@ -0,0 +1,916 @@
+# Storybook Code Examples
+## Overview
+```tsx
+const flexTemplate = (args: FlexProps) => {
+  return <Flex {...args}>
+      <Box padding="large" border />
+      <Box padding="large" border />
+      <Box padding="large" border />
+    </Flex>;
+}
+```
+## Directions
+```tsx
+<div style={{
+  display: "grid",
+  gridTemplateColumns: "1fr 1fr",
+  alignItems: "center",
+  gap: "var(--space-32)"
+}}>
+      <Text type="text1" weight="medium">
+        Horizontal
+      </Text>
+      <Flex>
+        <Box padding="large" border />
+        <Box padding="large" border />
+        <Box padding="large" border />
+      </Flex>
+      <Text type="text1" weight="medium">
+        Vertical
+      </Text>
+      <Flex direction="column">
+        <Box padding="large" border />
+        <Box padding="large" border />
+        <Box padding="large" border />
+      </Flex>
+    </div>
+```
+## HorizontalSpacingBetweenItems
+```tsx
+<div style={{
+  display: "grid",
+  gridTemplateColumns: "120px 1fr",
+  alignItems: "center",
+  gap: "var(--space-16) var(--space-24)"
+}}>
+      <Text type="text1" weight="medium" ellipsis={false}>
+        No spacing between items
+      </Text>
+      <Flex>
+        <Box padding="large" border />
+        <Box padding="large" border />
+        <Box padding="large" border />
+      </Flex>
+      <Text type="text1" weight="medium" ellipsis={false}>
+        Extra small spacing between items
+      </Text>
+      <Flex gap="xs">
+        <Box padding="large" border />
+        <Box padding="large" border />
+        <Box padding="large" border />
+      </Flex>
+      <Text type="text1" weight="medium" ellipsis={false}>
+        Small spacing between items
+      </Text>
+      <Flex gap="small">
+        <Box padding="large" border />
+        <Box padding="large" border />
+        <Box padding="large" border />
+      </Flex>
+      <Text type="text1" weight="medium" ellipsis={false}>
+        Medium spacing between items
+      </Text>
+      <Flex gap="medium">
+        <Box padding="large" border />
+        <Box padding="large" border />
+        <Box padding="large" border />
+      </Flex>
+      <Text type="text1" weight="medium" ellipsis={false}>
+        Large spacing between items
+      </Text>
+      <Flex gap="large">
+        <Box padding="large" border />
+        <Box padding="large" border />
+        <Box padding="large" border />
+      </Flex>
+      <Text type="text1" weight="medium" ellipsis={false}>
+        Custom spacing between items
+      </Text>
+      <Flex gap={32}>
+        <Box padding="large" border />
+        <Box padding="large" border />
+        <Box padding="large" border />
+      </Flex>
+    </div>
+```
+## Horizontal layout using flex
+```tsx
+<div style={{
+  display: "grid",
+  gridTemplateColumns: "120px 1fr",
+  alignItems: "center",
+  gap: "var(--space-24) var(--space-16)"
+}}>
+      <Text type="text1" weight="medium" ellipsis={false}>
+        Equal size
+      </Text>
+      <Flex style={{
+    width: 300
+  }}>
+        <Flex flex={{
+      grow: 1,
+      shrink: 1,
+      basis: "auto"
+    }}>
+          <Box padding="medium" style={{
+        width: "100%"
+      }} border>
+            First
+          </Box>
+        </Flex>
+        <Flex flex={{
+      grow: 1,
+      shrink: 1,
+      basis: "auto"
+    }}>
+          <Box padding="medium" style={{
+        width: "100%"
+      }} border>
+            Second
+          </Box>
+        </Flex>
+        <Flex flex={{
+      grow: 1,
+      shrink: 1,
+      basis: "auto"
+    }}>
+          <Box padding="medium" style={{
+        width: "100%"
+      }} border>
+            Third
+          </Box>
+        </Flex>
+      </Flex>
+      <Text type="text1" weight="medium" ellipsis={false}>
+        First item grows
+      </Text>
+      <Flex style={{
+    width: 300
+  }}>
+        <Flex flex={{
+      grow: 1,
+      shrink: 0,
+      basis: "auto"
+    }}>
+          <Box padding="medium" style={{
+        width: "100%"
+      }} border>
+            First
+          </Box>
+        </Flex>
+        <Flex flex={{
+      grow: 0,
+      shrink: 0,
+      basis: "auto"
+    }}>
+          <Box padding="medium" style={{
+        width: "100%"
+      }} border>
+            Second
+          </Box>
+        </Flex>
+        <Flex flex={{
+      grow: 0,
+      shrink: 0,
+      basis: "auto"
+    }}>
+          <Box padding="medium" style={{
+        width: "100%"
+      }} border>
+            Third
+          </Box>
+        </Flex>
+      </Flex>
+      <Text type="text1" weight="medium" ellipsis={false}>
+        Third item grows
+      </Text>
+      <Flex style={{
+    width: 300
+  }}>
+        <Flex flex={{
+      grow: 0,
+      shrink: 0,
+      basis: "auto"
+    }}>
+          <Box padding="medium" style={{
+        width: "100%"
+      }} border>
+            First
+          </Box>
+        </Flex>
+        <Flex flex={{
+      grow: 0,
+      shrink: 0,
+      basis: "auto"
+    }}>
+          <Box padding="medium" style={{
+        width: "100%"
+      }} border>
+            Second
+          </Box>
+        </Flex>
+        <Flex flex={{
+      grow: 1,
+      shrink: 0,
+      basis: "auto"
+    }}>
+          <Box padding="medium" style={{
+        width: "100%"
+      }} border>
+            Third
+          </Box>
+        </Flex>
+      </Flex>
+    </div>
+```
+## Horizontal layout using flex shorthand
+```tsx
+<div style={{
+  display: "grid",
+  gridTemplateColumns: "120px 1fr",
+  alignItems: "center",
+  gap: "var(--space-24) var(--space-16)"
+}}>
+      <Text type="text1" weight="medium" ellipsis={false}>
+        Equal size
+      </Text>
+      <Flex style={{
+    width: 300
+  }}>
+        <Flex flex="1 1 auto">
+          <Box style={{
+        width: "100%"
+      }} border>
+            First
+          </Box>
+        </Flex>
+        <Flex flex="1 1 auto">
+          <Box style={{
+        width: "100%"
+      }} border>
+            Second
+          </Box>
+        </Flex>
+        <Flex flex="1 1 auto">
+          <Box style={{
+        width: "100%"
+      }} border>
+            Third
+          </Box>
+        </Flex>
+      </Flex>
+      <Text type="text1" weight="medium" ellipsis={false}>
+        First item grows
+      </Text>
+      <Flex style={{
+    width: 300
+  }}>
+        <Flex flex="1 0 auto">
+          <Box style={{
+        width: "100%"
+      }} border>
+            First
+          </Box>
+        </Flex>
+        <Flex flex="0 0 auto">
+          <Box style={{
+        width: "100%"
+      }} border>
+            Second
+          </Box>
+        </Flex>
+        <Flex flex="0 0 auto">
+          <Box style={{
+        width: "100%"
+      }} border>
+            Third
+          </Box>
+        </Flex>
+      </Flex>
+      <Text type="text1" weight="medium" ellipsis={false}>
+        Third item grows
+      </Text>
+      <Flex style={{
+    width: 300
+  }}>
+        <Flex flex="0 0 auto">
+          <Box style={{
+        width: "100%"
+      }} border>
+            First
+          </Box>
+        </Flex>
+        <Flex flex="0 0 auto">
+          <Box style={{
+        width: "100%"
+      }} border>
+            Second
+          </Box>
+        </Flex>
+        <Flex flex="1 0 auto">
+          <Box style={{
+        width: "100%"
+      }} border>
+            Third
+          </Box>
+        </Flex>
+      </Flex>
+    </div>
+```
+## VerticalSpacingBetweenItems
+```tsx
+<div style={{
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-around",
+  width: "100%"
+}}>
+      <div style={{
+    display: "flex",
+    flexDirection: "column",
+    gap: "var(--space-16)",
+    width: "120px"
+  }}>
+        <Text align="center" type="text1" weight="medium" ellipsis={false}>
+          No spacing between items
+        </Text>
+        <Flex direction="column">
+          <Box padding="large" border />
+          <Box padding="large" border />
+          <Box padding="large" border />
+        </Flex>
+      </div>
+      <div style={{
+    display: "flex",
+    flexDirection: "column",
+    gap: "var(--space-16)",
+    width: "120px"
+  }}>
+        <Text align="center" type="text1" weight="medium" ellipsis={false}>
+          Extra small spacing between items
+        </Text>
+        <Flex gap="xs" direction="column">
+          <Box padding="large" border />
+          <Box padding="large" border />
+          <Box padding="large" border />
+        </Flex>
+      </div>
+      <div style={{
+    display: "flex",
+    flexDirection: "column",
+    gap: "var(--space-16)",
+    width: "120px"
+  }}>
+        <Text align="center" type="text1" weight="medium" ellipsis={false}>
+          Small spacing between items
+        </Text>
+        <Flex gap="small" direction="column">
+          <Box padding="large" border />
+          <Box padding="large" border />
+          <Box padding="large" border />
+        </Flex>
+      </div>
+      <div style={{
+    display: "flex",
+    flexDirection: "column",
+    gap: "var(--space-16)",
+    width: "120px"
+  }}>
+        <Text align="center" type="text1" weight="medium" ellipsis={false}>
+          Medium spacing between items
+        </Text>
+        <Flex gap="medium" direction="column">
+          <Box padding="large" border />
+          <Box padding="large" border />
+          <Box padding="large" border />
+        </Flex>
+      </div>
+      <div style={{
+    display: "flex",
+    flexDirection: "column",
+    gap: "var(--space-16)",
+    width: "120px"
+  }}>
+        <Text align="center" type="text1" weight="medium" ellipsis={false}>
+          Large spacing between items
+        </Text>
+        <Flex gap="large" direction="column">
+          <Box padding="large" border />
+          <Box padding="large" border />
+          <Box padding="large" border />
+        </Flex>
+      </div>
+      <div style={{
+    display: "flex",
+    flexDirection: "column",
+    gap: "var(--space-16)",
+    width: "120px"
+  }}>
+        <Text align="center" type="text1" weight="medium" ellipsis={false}>
+          Custom spacing between items
+        </Text>
+        <Flex gap={32} direction="column">
+          <Box padding="large" border />
+          <Box padding="large" border />
+          <Box padding="large" border />
+        </Flex>
+      </div>
+    </div>
+```
+## Vertical layout using flex
+```tsx
+<div style={{
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-around",
+  width: "100%"
+}}>
+      <div style={{
+    display: "flex",
+    flexDirection: "column",
+    gap: "var(--space-16)",
+    width: "120px"
+  }}>
+        <Text align="center" type="text1" weight="medium" ellipsis={false}>
+          Equal size
+        </Text>
+        <Flex direction="column" style={{
+      height: 300
+    }}>
+          <Flex flex={{
+        grow: 1,
+        shrink: 1,
+        basis: "auto"
+      }}>
+            <Box style={{
+          height: "100%",
+          width: "100%"
+        }} padding="medium" border>
+              First
+            </Box>
+          </Flex>
+          <Flex flex={{
+        grow: 1,
+        shrink: 1,
+        basis: "auto"
+      }}>
+            <Box style={{
+          height: "100%",
+          width: "100%"
+        }} padding="medium" border>
+              Second
+            </Box>
+          </Flex>
+          <Flex flex={{
+        grow: 1,
+        shrink: 1,
+        basis: "auto"
+      }}>
+            <Box style={{
+          height: "100%",
+          width: "100%"
+        }} padding="medium" border>
+              Third
+            </Box>
+          </Flex>
+        </Flex>
+      </div>
+      <div style={{
+    display: "flex",
+    flexDirection: "column",
+    gap: "var(--space-16)",
+    width: "120px"
+  }}>
+        <Text align="center" type="text1" weight="medium" ellipsis={false}>
+          First item grows
+        </Text>
+        <Flex direction="column" style={{
+      height: 300
+    }}>
+          <Flex flex={{
+        grow: 1,
+        shrink: 1,
+        basis: "auto"
+      }}>
+            <Box style={{
+          height: "100%",
+          width: "100%"
+        }} padding="medium" border>
+              First
+            </Box>
+          </Flex>
+          <Flex flex={{
+        grow: 0,
+        shrink: 1,
+        basis: "auto"
+      }}>
+            <Box style={{
+          height: "100%",
+          width: "100%"
+        }} padding="medium" border>
+              Second
+            </Box>
+          </Flex>
+          <Flex flex={{
+        grow: 0,
+        shrink: 1,
+        basis: "auto"
+      }}>
+            <Box style={{
+          height: "100%",
+          width: "100%"
+        }} padding="medium" border>
+              Third
+            </Box>
+          </Flex>
+        </Flex>
+      </div>
+      <div style={{
+    display: "flex",
+    flexDirection: "column",
+    gap: "var(--space-16)",
+    width: "120px"
+  }}>
+        <Text align="center" type="text1" weight="medium" ellipsis={false}>
+          Third item grows
+        </Text>
+        <Flex direction="column" style={{
+      height: 300
+    }}>
+          <Flex flex={{
+        grow: 0,
+        shrink: 1,
+        basis: "auto"
+      }}>
+            <Box style={{
+          height: "100%",
+          width: "100%"
+        }} padding="medium" border>
+              First
+            </Box>
+          </Flex>
+          <Flex flex={{
+        grow: 0,
+        shrink: 1,
+        basis: "auto"
+      }}>
+            <Box style={{
+          height: "100%",
+          width: "100%"
+        }} padding="medium" border>
+              Second
+            </Box>
+          </Flex>
+          <Flex flex={{
+        grow: 1,
+        shrink: 1,
+        basis: "auto"
+      }}>
+            <Box style={{
+          height: "100%",
+          width: "100%"
+        }} padding="medium" border>
+              Third
+            </Box>
+          </Flex>
+        </Flex>
+      </div>
+    </div>
+```
+## Vertical layout using flex shorthand
+```tsx
+<div style={{
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-around",
+  width: "100%"
+}}>
+      <div style={{
+    display: "flex",
+    flexDirection: "column",
+    gap: "var(--space-16)",
+    width: "120px"
+  }}>
+        <Text align="center" type="text1" weight="medium" ellipsis={false}>
+          Equal size
+        </Text>
+        <Flex direction="column" style={{
+      height: 300
+    }}>
+          <Flex flex="1 1 auto">
+            <Box style={{
+          height: "100%",
+          width: "100%"
+        }} border>
+              First
+            </Box>
+          </Flex>
+          <Flex flex="1 1 auto">
+            <Box style={{
+          height: "100%",
+          width: "100%"
+        }} border>
+              Second
+            </Box>
+          </Flex>
+          <Flex flex="1 1 auto">
+            <Box style={{
+          height: "100%",
+          width: "100%"
+        }} border>
+              Third
+            </Box>
+          </Flex>
+        </Flex>
+      </div>
+      <div style={{
+    display: "flex",
+    flexDirection: "column",
+    gap: "var(--space-16)",
+    width: "120px"
+  }}>
+        <Text align="center" type="text1" weight="medium" ellipsis={false}>
+          First item grows
+        </Text>
+        <Flex direction="column" style={{
+      height: 300
+    }}>
+          <Flex flex="1 0 auto">
+            <Box style={{
+          height: "100%",
+          width: "100%"
+        }} border>
+              First
+            </Box>
+          </Flex>
+          <Flex flex="0 1 auto">
+            <Box style={{
+          height: "100%",
+          width: "100%"
+        }} border>
+              Second
+            </Box>
+          </Flex>
+          <Flex flex="0 1 auto">
+            <Box style={{
+          height: "100%",
+          width: "100%"
+        }} border>
+              Third
+            </Box>
+          </Flex>
+        </Flex>
+      </div>
+      <div style={{
+    display: "flex",
+    flexDirection: "column",
+    gap: "var(--space-16)",
+    width: "120px"
+  }}>
+        <Text align="center" type="text1" weight="medium" ellipsis={false}>
+          Third item grows
+        </Text>
+        <Flex direction="column" style={{
+      height: 300
+    }}>
+          <Flex flex="0 1 auto">
+            <Box style={{
+          height: "100%",
+          width: "100%"
+        }} border>
+              First
+            </Box>
+          </Flex>
+          <Flex flex="0 1 auto">
+            <Box style={{
+          height: "100%",
+          width: "100%"
+        }} border>
+              Second
+            </Box>
+          </Flex>
+          <Flex flex="1 0 auto">
+            <Box style={{
+          height: "100%",
+          width: "100%"
+        }} border>
+              Third
+            </Box>
+          </Flex>
+        </Flex>
+      </div>
+    </div>
+```
+## HorizontalPositions
+```tsx
+<div style={{
+  display: "grid",
+  gridTemplateColumns: "120px 1fr",
+  alignItems: "center",
+  gap: "var(--space-24) var(--space-16)",
+  flex: 1
+}}>
+      <Text type="text1" weight="medium" ellipsis={false}>
+        Start position
+      </Text>
+      <Flex justify="start" style={{
+    width: "100%"
+  }}>
+        <Box padding="large" border />
+        <Box padding="large" border />
+        <Box padding="large" border />
+      </Flex>
+      <Text type="text1" weight="medium" ellipsis={false}>
+        Center position
+      </Text>
+      <Flex justify="center" style={{
+    width: "100%"
+  }}>
+        <Box padding="large" border />
+        <Box padding="large" border />
+        <Box padding="large" border />
+      </Flex>
+      <Text type="text1" weight="medium" ellipsis={false}>
+        End position
+      </Text>
+      <Flex justify="end" style={{
+    width: "100%"
+  }}>
+        <Box padding="large" border />
+        <Box padding="large" border />
+        <Box padding="large" border />
+      </Flex>
+      <Text type="text1" weight="medium" ellipsis={false}>
+        Space between position
+      </Text>
+      <Flex justify="space-between" style={{
+    width: "100%"
+  }}>
+        <Box padding="large" border />
+        <Box padding="large" border />
+        <Box padding="large" border />
+      </Flex>
+      <Text type="text1" weight="medium" ellipsis={false}>
+        Space around position
+      </Text>
+      <Flex justify="space-around" style={{
+    width: "100%"
+  }}>
+        <Box padding="large" border />
+        <Box padding="large" border />
+        <Box padding="large" border />
+      </Flex>
+    </div>
+```
+## VerticalPositions
+```tsx
+<div style={{
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-around",
+  width: "100%"
+}}>
+      <div style={{
+    display: "flex",
+    flexDirection: "column",
+    gap: "var(--space-16)",
+    width: "120px"
+  }}>
+        <Text align="center" type="text1" weight="medium" ellipsis={false}>
+          Start position
+        </Text>
+        <Flex justify="start" style={{
+      height: "300px"
+    }} direction="column">
+          <Box padding="large" border />
+          <Box padding="large" border />
+          <Box padding="large" border />
+        </Flex>
+      </div>
+      <div style={{
+    display: "flex",
+    flexDirection: "column",
+    gap: "var(--space-16)",
+    width: "120px"
+  }}>
+        <Text align="center" type="text1" weight="medium" ellipsis={false}>
+          Center position
+        </Text>
+        <Flex justify="center" style={{
+      height: "300px"
+    }} direction="column">
+          <Box padding="large" border />
+          <Box padding="large" border />
+          <Box padding="large" border />
+        </Flex>
+      </div>
+      <div style={{
+    display: "flex",
+    flexDirection: "column",
+    gap: "var(--space-16)",
+    width: "120px"
+  }}>
+        <Text align="center" type="text1" weight="medium" ellipsis={false}>
+          End position
+        </Text>
+        <Flex justify="end" style={{
+      height: "300px"
+    }} direction="column">
+          <Box padding="large" border />
+          <Box padding="large" border />
+          <Box padding="large" border />
+        </Flex>
+      </div>
+      <div style={{
+    display: "flex",
+    flexDirection: "column",
+    gap: "var(--space-16)",
+    width: "120px"
+  }}>
+        <Text align="center" type="text1" weight="medium" ellipsis={false}>
+          Space between position
+        </Text>
+        <Flex justify="space-between" style={{
+      height: "300px"
+    }} direction="column">
+          <Box padding="large" border />
+          <Box padding="large" border />
+          <Box padding="large" border />
+        </Flex>
+      </div>
+      <div style={{
+    display: "flex",
+    flexDirection: "column",
+    gap: "var(--space-16)",
+    width: "120px"
+  }}>
+        <Text align="center" type="text1" weight="medium" ellipsis={false}>
+          Space around position
+        </Text>
+        <Flex justify="space-around" style={{
+      height: "300px"
+    }} direction="column">
+          <Box padding="large" border />
+          <Box padding="large" border />
+          <Box padding="large" border />
+        </Flex>
+      </div>
+    </div>
+```
+## SupportMultiLinesLayout
+```tsx
+<Flex wrap style={{
+  width: "300px"
+}} gap="small">
+      <Chips noMargin label="Chip 1" />
+      <Chips noMargin label="Chip 2" />
+      <Chips noMargin label="Chip 3" />
+      <Chips noMargin label="Chip 4" />
+      <Chips noMargin label="Chip 5" />
+      <Chips noMargin label="Chip 6" />
+      <Chips noMargin label="Chip 7" />
+    </Flex>
+```
+## FlexAsToolbarContainer
+```tsx
+<Flex gap="small">
+      <Button leftIcon={Add}>Add</Button>
+      <Button kind="tertiary" leftIcon={Search}>
+        Search
+      </Button>
+      <Button kind="tertiary" leftIcon={Person}>
+        Person
+      </Button>
+      <Button kind="tertiary" leftIcon={Filter}>
+        Filter
+      </Button>
+      <Button kind="tertiary" leftIcon={Sort}>
+        Sort
+      </Button>
+    </Flex>
+```