### MUI ThemeProvider Setup with MUI Flexy Components

Source: https://context7.com/brandonscript/mui-flexy/llms.txt

Provides a complete example of setting up a React application with MUI's `ThemeProvider` and `CssBaseline`, demonstrating how to integrate MUI Flexy components like `FlexBox` and `FlexGrid` within a themed environment. This ensures consistent styling across the application.

```tsx
import { ThemeProvider, createTheme } from "@mui/material/styles";
import { CssBaseline, Typography } from "@mui/material";
import { FlexBox, FlexGrid } from "@mui-flexy/v7";

const theme = createTheme({
  palette: {
    mode: "light",
    primary: { main: "#1976d2" },
  },
});

const App = () => (
  <ThemeProvider theme={theme}>
    <CssBaseline />
    <FlexBox x="center" y="center" minHeight="100vh">
      <FlexGrid container spacing={3} maxWidth="lg">
        <FlexGrid size={{ xs: 12, md: 6 }} x="center" y="top">
          <Typography variant="h4">Welcome</Typography>
        </FlexGrid>
        <FlexGrid size={{ xs: 12, md: 6 }} x="center" y="center">
          <Typography>Content area</Typography>
        </FlexGrid>
      </FlexGrid>
    </FlexBox>
  </ThemeProvider>
);

export default App;
```

--------------------------------

### FlexGrid Migration Examples (v5, v6, v7+)

Source: https://github.com/brandonscript/mui-flexy/blob/main/README.md

Provides code examples for migrating from FlexGrid (v5) to FlexGrid2 (v6) and then to the updated FlexGrid (v7+) structure, highlighting changes in item props.

```jsx
// FlexGrid (v5), based on @mui/material/Grid
<FlexGrid container x="center" y="center">
  <FlexGrid item xs={12} sm={6} md={4} lg={3}>
    <Typography>Grids are cool</Typography>
  </FlexGrid>
</FlexGrid>

// FlexGrid2 (v6), based on @mui/material/Grid2
<FlexGrid2 container x="center" y="center">
  <FlexGrid2 size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
    <Typography>Grids are cool</Typography>
  </FlexGrid2>
</FlexGrid2>

// FlexGrid (v7+), based on @mui/material/Grid
<FlexGrid container x="center" y="center">
  <FlexGrid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
    <Typography>Grids are cool</Typography>
  </FlexGrid>
</FlexGrid>
```

--------------------------------

### Installing mui-flexy Packages

Source: https://github.com/brandonscript/mui-flexy/blob/main/README.md

Provides installation commands for mui-flexy, specifying different packages for Material UI v5, v6, and v7, as well as a core package for shared utilities.

```shell
# For @mui/material v7
npm install @mui-flexy/v7

# For @mui/material v6
npm install @mui-flexy/v6

# For @mui/material v5
npm install @mui-flexy/v5

# or using yarn
yarn add @mui-flexy/v{5,6,7}

# or using pnpm
pnpm add @mui-flexy/v{5,6,7}
```

--------------------------------

### Install MUI and Emotion Dependencies

Source: https://github.com/brandonscript/mui-flexy/blob/main/README.md

Installs the necessary Material-UI (MUI) and Emotion packages required for mui-flexy and other MUI-based projects. These are foundational dependencies for using MUI components.

```bash
npm install @mui/material @emotion/react @emotion/styled react react-dom
```

--------------------------------

### Install mui-flexy Packages

Source: https://context7.com/brandonscript/mui-flexy/llms.txt

Installs the appropriate mui-flexy package based on the installed Material UI version. This ensures compatibility and optimal bundle size.

```bash
# For @mui/material v7
npm install @mui-flexy/v7

# For @mui/material v6
npm install @mui-flexy/v6

# For @mui/material v5
npm install @mui-flexy/v5
```

--------------------------------

### React Initialization and Rendering with mui-flexy

Source: https://github.com/brandonscript/mui-flexy/blob/main/docs/index.template.html

This snippet demonstrates the setup required to run a React application using mui-flexy. It includes essential imports and a workaround for Babel/standalone issues by reassigning React and ReactDOM to the window object. The code then attempts to dynamically import an 'App' component and render it into the DOM.

```javascript
import * as React from "react";
import * as ReactDOM from "react-dom";
import { createRoot } from "react-dom/client";

/**
 * ! Without window reassignment the imported modules are
 * ! not available in the JSX transformed Babel script below.
 * ! This is a hacky workaround to deal with Babel/standalone issue.
 **/
window.React = React;
window.useContext = React.useContext;
window.useState = React.useState;
window.useEffect = React.useEffect;
window.useRef = React.useRef;
window.useMemo = React.useMemo;
window.useCallback = React.useCallback;
window.useReducer = React.useReducer;
window.forwardRef = React.forwardRef;
window.createContext = React.createContext;
window.createElement = React.createElement;
window.ReactDOM = ReactDOM;
window.createRoot = createRoot;

console.log('Page loaded, checking for basic objects');
console.log('React available:', typeof window.React);
console.log('ReactDOM available:', typeof window.ReactDOM);
console.log('createRoot available:', typeof window.createRoot);

try {
  const { default: App } = await import('__BASEPATH__/static/docs.js');
  window.createRoot(document.querySelector("#root")).render(window.React.createElement(App));
} catch (error) {
  console.error('Error loading app:', error);
}
```

--------------------------------

### Styled Inline Component with styled()

Source: https://github.com/brandonscript/mui-flexy/blob/main/README.md

Shows how to create a styled component from an inline component definition using styled(). This example defines a ResetBox that wraps a FlexBox, adding an onClick handler and specific max-width/max-height styles.

```jsx
const ResetBox = styled(
  ({ resetFn, ...props }: FlexBoxProps & { resetFn?: () => void }) => <FlexBox x="center" y="center" {...props} onClick={resetFn} />,
)(({ theme }) => ({
  maxWidth: 100,
  maxHeight: 100,
}));
```

--------------------------------

### FlexBox Component Override Examples

Source: https://github.com/brandonscript/mui-flexy/blob/main/README.md

Shows how to override the default HTML element rendered by FlexBox using the `component` prop, providing examples for 'span' and a custom 'Typography' component.

```jsx
const SpanFlex = <FlexBox component="span" x="center" y="center" />;
const TypographyFlex = <FlexBox component={Typography} x="center" y="center" variant="subtitle1" />;
```

--------------------------------

### SSR Setup with Emotion Cache (Next.js)

Source: https://context7.com/brandonscript/mui-flexy/llms.txt

Configures Emotion cache for server-side rendering frameworks like Next.js to prevent hydration errors. It initializes a cache, theme, and wraps the application with necessary providers.

```tsx
import { CacheProvider } from "@emotion/react";
import createCache from "@emotion/cache";
import { ThemeProvider, createTheme } from "@mui/material/styles";
import { CssBaseline } from "@mui/material";
import { FlexBox } from "@mui-flexy/v7";

const emotionCache = createCache({ key: "my-app-css" });
const theme = createTheme({ palette: { mode: "light" } });

const App = ({ Component, pageProps }) => (
  <CacheProvider value={emotionCache}>
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <FlexBox x="center" y="top" minHeight="100vh" padding={3}>
        <Component {...pageProps} />
      </FlexBox>
    </ThemeProvider>
  </CacheProvider>
);

export default App;
```

--------------------------------

### Create Centered Box with styled()

Source: https://github.com/brandonscript/mui-flexy/blob/main/README.md

Demonstrates creating a styled FlexBox component that centers its content both horizontally and vertically using the styled() function. This is a basic example of applying styles to a FlexBox.

```jsx
const CenterCenterBox = styled(FlexBox)({
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
});
```

--------------------------------

### Styled Component with theme.unstable_sx

Source: https://github.com/brandonscript/mui-flexy/blob/main/README.md

Demonstrates using `theme.unstable_sx` within a styled FlexBox component to apply theme-aware styles. This example sets background color, border-radius, and padding using values from the MUI theme.

```jsx
const SquircleishBox = styled(FlexBox)(({ theme }) =>
  theme.unstable_sx({
    backgroundColor: theme.palette.primary.light,
    borderRadius: 2, // use theme.unstable_sx to use theme values
    px: 1, // use theme.unstable_sx to use theme values
  }),
);
```

--------------------------------

### FlexGrid Component for MUI v7 (TSX)

Source: https://context7.com/brandonscript/mui-flexy/llms.txt

Details the FlexGrid component for MUI v7, which extends MUI's Grid (formerly Grid2) and incorporates the 'x' and 'y' alignment props. It utilizes the 'size' prop for defining grid item dimensions across breakpoints. Examples show basic grid setup, flexible sizing with 'grow', and nested grids.

```tsx
import { FlexGrid } from "@mui-flexy/v7";
import { Typography } from "@mui/material";

// Basic grid with alignment
<FlexGrid container x="center" y="center" spacing={2}>
  <FlexGrid size={{ xs: 12, sm: 6, md: 4 }}>
    <Typography>Grid Item 1</Typography>
  </FlexGrid>
  <FlexGrid size={{ xs: 12, sm: 6, md: 4 }}>
    <Typography>Grid Item 2</Typography>
  </FlexGrid>
  <FlexGrid size={{ xs: 12, sm: 6, md: 4 }}>
    <Typography>Grid Item 3</Typography>
  </FlexGrid>
</FlexGrid>

// Grid with size="grow" for flexible sizing
<FlexGrid container x="space-between" y="stretch">
  <FlexGrid size="grow">
    <Typography>Flexible width item</Typography>
  </FlexGrid>
  <FlexGrid size={{ xs: 4 }}>
    <Typography>Fixed 4-column item</Typography>
  </FlexGrid>
</FlexGrid>

// Nested grid with column alignment
<FlexGrid container spacing={3}>
  <FlexGrid size={{ xs: 12, md: 6 }} container column x="center" y="top">
    <Typography variant="h6">Left Column</Typography>
    <Typography>Centered content</Typography>
  </FlexGrid>
  <FlexGrid size={{ xs: 12, md: 6 }}>
    <Typography>Right Column</Typography>
  </FlexGrid>
</FlexGrid>
```

--------------------------------

### FlexGrid for MUI v5 (Legacy Grid) (TSX)

Source: https://context7.com/brandonscript/mui-flexy/llms.txt

Details the FlexGrid component for MUI v5, which is designed to work with the legacy Grid component. It requires the `item` prop for grid items and uses individual breakpoint props (xs, sm, md, lg, xl) for sizing, alongside the 'x' and 'y' props for alignment. Examples show basic setup and alignment on individual items.

```tsx
import { FlexGrid } from "@mui-flexy/v5";
import { Typography } from "@mui/material";

// v5 syntax with individual breakpoint props
<FlexGrid container x="center" y="center" spacing={2}>
  <FlexGrid item xs={12} sm={6} md={4} lg={3}>
    <Typography>Grid Item 1</Typography>
  </FlexGrid>
  <FlexGrid item xs={12} sm={6} md={4} lg={3}>
    <Typography>Grid Item 2</Typography>
  </FlexGrid>
</FlexGrid>

// With alignment on individual items
<FlexGrid container spacing={2}>
  <FlexGrid item xs={6} x="left" y="top">
    <Typography>Left-aligned item</Typography>
  </FlexGrid>
  <FlexGrid item xs={6} x="right" y="bottom">
    <Typography>Right-aligned item</Typography>
  </FlexGrid>
</FlexGrid>
```

--------------------------------

### FlexGrid2 for MUI v6 (TSX)

Source: https://context7.com/brandonscript/mui-flexy/llms.txt

Provides documentation for FlexGrid2, the component to use with MUI v6. It leverages MUI's Grid2 component and supports the same 'x', 'y', and 'size' prop syntax for alignment and responsive sizing. Examples demonstrate basic usage and equal item distribution using `size`.

```tsx
import { FlexGrid2 } from "@mui-flexy/v6";
import { Typography } from "@mui/material";

// v6 syntax with FlexGrid2
<FlexGrid2 container x="center" y="center" spacing={2}>
  <FlexGrid2 size={{ xs: 12, sm: 6, md: 4, lg: 3 }} x="center" y="center">
    <Typography>Centered grid item</Typography>
  </FlexGrid2>
  <FlexGrid2 size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
    <Typography>Another item</Typography>
  </FlexGrid2>
</FlexGrid2>

// size can be true for equal distribution
<FlexGrid2 container>
  <FlexGrid2 size>
    <Typography>Equal width</Typography>
  </FlexGrid2>
  <FlexGrid2 size>
    <Typography>Equal width</Typography>
  </FlexGrid2>
</FlexGrid2>
```

--------------------------------

### Set up MUI ThemeProvider

Source: https://github.com/brandonscript/mui-flexy/blob/main/README.md

Demonstrates how to wrap your application with MUI's ThemeProvider and CssBaseline. This is essential for applying global styles and theme configurations to your MUI components.

```jsx
import { ThemeProvider, createTheme } from "@mui/material/styles";
import { CssBaseline } from "@mui/material";

const theme = createTheme({
  palette: {
    mode: "light", // or "dark"
  },
});
const App = () => (
  <ThemeProvider theme={theme}>
    <CssBaseline />
    <YourApp />
  </ThemeProvider>
);
```

--------------------------------

### Initialize React DOM with MUI Flexy

Source: https://github.com/brandonscript/mui-flexy/blob/main/docs/index.html

This JavaScript snippet demonstrates how to initialize the React DOM with the createRoot API and render a root App component. It includes a workaround for Babel/standalone issues by assigning React and ReactDOM properties to the window object. It also dynamically imports an App component and handles potential errors during loading.

```javascript
import * as React from "react";
import * as ReactDOM from "react-dom";
import { createRoot } from "react-dom/client";

/**
 * ! Without window reassignment the imported modules are
 * ! not available in the JSX transformed Babel script below.
 * ! This is a hacky workaround to deal with Babel/standalone issue.
 **/
window.React = React;
window.useContext = React.useContext;
window.useState = React.useState;
window.useEffect = React.useEffect;
window.useRef = React.useRef;
window.useMemo = React.useMemo;
window.useCallback = React.useCallback;
window.useReducer = React.useReducer;
window.forwardRef = React.forwardRef;
window.createContext = React.createContext;
window.createElement = React.createElement;
window.ReactDOM = ReactDOM;
window.createRoot = createRoot;

console.log('Page loaded, checking for basic objects');
console.log('React available:', typeof window.React);
console.log('ReactDOM available:', typeof window.ReactDOM);
console.log('createRoot available:', typeof window.createRoot);

try {
  const { default: App } = await import('./static/docs.js');
  window.createRoot(document.querySelector("#root")).render(window.React.createElement(App));
} catch (error) {
  console.error('Error loading app:', error);
}
```

--------------------------------

### Basic FlexBox Usage with mui-flexy

Source: https://github.com/brandonscript/mui-flexy/blob/main/README.md

Demonstrates the simplified syntax of mui-flexy for centering content using 'x' and 'y' props, compared to standard Material UI Box component.

```jsx
import { FlexBox } from "@mui-flexy/v7";

// Standard Material UI Box
<Box
  sx={{
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    flexDirection: "row",
    width: "100vw",
    height: "100vh",
  }}
/>

// mui-flexy equivalent
<FlexBox x="center" y="center" width="100vw" height="100vh" />
```

--------------------------------

### Use FlexGrid with MUI v5 and v7 (Grid)

Source: https://github.com/brandonscript/mui-flexy/blob/main/README.md

Shows how to use FlexGrid for MUI v5 and v7, which are based on MUI's standard Grid component. It highlights the usage of container and item props along with alignment features.

```jsx
// For MUI v5
import { FlexBox, FlexGrid } from "@mui-flexy/v5";

<FlexGrid container x="center" y="center">
  <FlexGrid item xs={12} sm={6} md={4} lg={3}>
    <Typography>Grids are cool</Typography>
  </FlexGrid>
</FlexGrid>;
```

--------------------------------

### FlexBox Responsive Style Object Notation

Source: https://github.com/brandonscript/mui-flexy/blob/main/README.md

Illustrates using object notation for responsive styles in FlexBox's `x` and `y` props, mapping to MUI's breakpoint-specific style objects.

```jsx
<FlexBox
  x={{ xs: "left", sm: "center", md: "right" }}
  y={{ xs: "bottom", sm: "center", md: "top" }}
/>

// ...is equivalent to:

<Box sx={{
  display: "flex",
  justifyContent: { xs: "flex-start", sm: "center", md: "flex-end" },
  alignItems: { xs: "flex-end", sm: "center", md: "flex-start" },
  flexDirection: "row"
}} />
```

--------------------------------

### Import and Use FlexBox (MUI v5-v7)

Source: https://github.com/brandonscript/mui-flexy/blob/main/README.md

Shows how to import and use the FlexBox component from mui-flexy for different MUI versions. FlexBox offers enhanced alignment capabilities over MUI's standard Box component.

```jsx
import { Typography } from "@mui/material"; // or use a <p> if you don't like fun typography

// For MUI v5
import { FlexBox, FlexGrid } from "@mui-flexy/v5";

// For MUI v6
import { FlexBox, FlexGrid } from "@mui-flexy/v6";

// For MUI v7
import { FlexBox, FlexGrid } from "@mui-flexy/v7";

<FlexBox x="top" y="center">
  <Typography>Hello, Bajor</Typography>
</FlexBox>;
```

--------------------------------

### Alternative FlexBox Implementation with MUI Box

Source: https://github.com/brandonscript/mui-flexy/blob/main/README.md

Illustrates how to achieve similar flexbox alignment using MUI's built-in Box component with the `sx` prop or by creating a styled component. This serves as a comparison to mui-flexy's approach.

```jsx
// Use sx:
<Box sx={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
  <Typography>Hello, Bajor</Typography>
</Box>;

// Use a styled component (to prevent re-creating the flexbox styles for every instance):
const CenteredFlexBox = styled(Box)({
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
});

<CenteredFlexBox>
  <Typography>Hello, Bajor</Typography>
</CenteredFlexBox>;
```

--------------------------------

### FlexBox Responsive Style Array Notation

Source: https://github.com/brandonscript/mui-flexy/blob/main/README.md

Shows how FlexBox supports responsive styling using array notation for `x`, `y`, and `row` props, mapping to MUI's responsive style arrays.

```jsx
<FlexBox x={["left", "center", "right"]} y={["bottom", "center", "top"]} row />

// ...is equivalent to:

<Box sx={{
  display: "flex",
  justifyContent: ["flex-start", "center", "flex-end"],
  alignItems: ["flex-end", "center", "flex-start"],
  flexDirection: "row"
}} />
```

--------------------------------

### mui-flexy Alignment with Column Direction

Source: https://github.com/brandonscript/mui-flexy/blob/main/README.md

Shows how to use mui-flexy's 'column' prop along with 'x' and 'y' for alignment in a flex column layout.

```jsx
import { FlexBox } from "@mui-flexy/v7";

<FlexBox column x="left" y="bottom" />

<FlexBox column x="center" y="stretch" />
```

--------------------------------

### Use FlexGrid with MUI v6 (Grid2)

Source: https://github.com/brandonscript/mui-flexy/blob/main/README.md

Demonstrates the usage of FlexGrid (specifically FlexGrid2 for MUI v6) with its container and item props, including alignment options. This component enhances MUI's Grid2 with `x` and `y` alignment props.

```jsx
// For MUI v6 (uses Grid2)
import { FlexBox, FlexGrid2 } from "@mui/v6";

// Usage is the same across versions:
<FlexGrid2 container x="center" y="top">
  <FlexGrid2 item size={{ xs: 12, sm: 6, md: 4, lg: 3 }} x="center" y="center">
    <Typography>Grids are cool</Typography>
  </FlexGrid2>
</FlexGrid2>;
```

--------------------------------

### FlexBox with Forwarded Ref

Source: https://github.com/brandonscript/mui-flexy/blob/main/README.md

Demonstrates how to use `forwardRef` with FlexBox to access DOM elements or component instances, showing how to attach a ref and access its properties.

```jsx
import { forwardRef } from "react";

const boxRef = useRef(null);

<FlexBox ref={boxRef} id="my-flex-box">
  <Typography>{`I'm a FlexBox with id ${boxRef.current?.id}`}</Typography>
</FlexBox>;
```

--------------------------------

### Responsive FlexBox Alignment with mui-flexy

Source: https://github.com/brandonscript/mui-flexy/blob/main/README.md

Illustrates mui-flexy's capability to handle responsive changes in flexbox properties like alignment and direction using breakpoint-specific props.

```jsx
import { FlexBox } from "@mui-flexy/v7";
import Box from "@mui/material/Box";

// mui-flexy responsive usage
<FlexBox x={{ xs: "left", lg: "right" }} y="center" row={{ xs: true, md: false }} />

// Equivalent standard Material UI Box with responsive sx prop
<Box
  sx={{
    display: "flex",
    justifyContent: { xs: "flex-start", md: "center" },
    alignItems: { xs: "center", md: "flex-start", lg: "flex-end" },
    flexDirection: { xs: "row", md: "column" },
  }}
/>
```

--------------------------------

### Styling MUI Flexy Components with Styled Components

Source: https://context7.com/brandonscript/mui-flexy/llms.txt

Illustrates how to integrate MUI Flexy components with MUI's `styled()` function to create reusable, styled flex components. It covers basic styling, using `shouldForwardProp` for custom props, and the inline component pattern.

```tsx
import { styled } from "@mui/material/styles";
import { FlexBox, FlexBoxProps } from "@mui-flexy/v7";

// Basic styled FlexBox
const CenteredCard = styled(FlexBox)(({ theme }) => ({
  backgroundColor: theme.palette.background.paper,
  borderRadius: theme.shape.borderRadius,
  padding: theme.spacing(3),
  boxShadow: theme.shadows[2],
}));

<CenteredCard x="center" y="center">
  <Typography>Styled centered card</Typography>
</CenteredCard>

// With shouldForwardProp for custom props
interface CountBoxProps extends FlexBoxProps {
  count: number;
}

const CountBox = styled(FlexBox, {
  shouldForwardProp: (prop) => prop !== "count",
})<CountBoxProps>(({ theme, count }) =>
  theme.unstable_sx({
    color: count > 8 ? theme.palette.warning.main : theme.palette.primary.main,
    fontWeight: count > 5 ? "bold" : "normal",
    padding: 2,
  })
);

<CountBox x="center" y="center" count={10}>
  <Typography>Count: 10</Typography>
</CountBox>

// Inline component pattern with custom props
interface ResetBoxProps extends FlexBoxProps {
  resetFn?: () => void;
}

const ResetBox = styled(
  ({ resetFn, ...props }: ResetBoxProps) => (
    <FlexBox x="center" y="center" {...props} onClick={resetFn} />
  )
)(({ theme }) => ({
  maxWidth: 100,
  maxHeight: 100,
  cursor: "pointer",
  "&:hover": {
    backgroundColor: theme.palette.action.hover,
  },
}));

<ResetBox resetFn={() => console.log("Reset clicked")}>
  Reset
</ResetBox>
```

--------------------------------

### FlexBox Mixed Responsive Array and Object Notation

Source: https://github.com/brandonscript/mui-flexy/blob/main/README.md

Illustrates the flexibility of FlexBox in mixing array and object notations for responsive props like `x`, `y`, and `row`, showing the complex equivalent MUI Box styles.

```jsx
<FlexBox x="center" y={["center", "stretch"]} row={{ xs: true, md: false }} />

// ...is equivalent to:

<Box sx={{
  justifyContent: { xs: "center", md: "stretch" },
  alignItems: { xs: "center", sm: "stretch", md: "center" },
  flexDirection: { xs: "row", md: "column" }
}} />
```

--------------------------------

### FlexBox Responsive Row/Column Switching with Breakpoints

Source: https://github.com/brandonscript/mui-flexy/blob/main/README.md

Shows how FlexBox handles switching `flexDirection` between 'row' and 'column' at different breakpoints using responsive object notation for the `row` prop.

```jsx
<FlexBox
  x={{ xs: "left", lg: "right" }}
  y="center"
  row={{ xs: true, md: false }}
/>

// ...is equivalent to:

<Box sx={{
  display: "flex",
  justifyContent: { xs: "flex-start", md: "center" },
  alignItems: { xs: "center", md: "flex-start", lg: "flex-end" },
  flexDirection: { xs: "row", md: "column" }
}} />
```

--------------------------------

### FlexBox Flex Wrap Configuration

Source: https://github.com/brandonscript/mui-flexy/blob/main/README.md

Demonstrates how to set the `flexWrap` property in FlexBox to 'nowrap', with the corresponding MUI Box style.

```jsx
<FlexBox x="left" y="center" flexWrap="nowrap" />

// ...is equivalent to:

<Box sx={{
  display: "flex",
  justifyContent: "flex-start",
  alignItems: "center",
  flexDirection: "row",
  flexWrap: "nowrap"
}} />
```

--------------------------------

### Using Refs and Overriding Components with MUI Flexy

Source: https://context7.com/brandonscript/mui-flexy/llms.txt

Demonstrates how to use `useRef` to access FlexBox and FlexGrid DOM elements and how to override the default HTML element rendered by FlexBox using the `component` prop. It also shows how to use other MUI components as the base for FlexBox.

```tsx
import { useRef } from "react";
import { FlexBox, FlexGrid } from "@mui-flexy/v7";
import { Typography, Paper } from "@mui/material";

// Using refs
const MyComponent = () => {
  const boxRef = useRef<HTMLDivElement>(null);

  return (
    <FlexBox ref={boxRef} x="center" y="center" id="my-flex-box">
      <Typography>
        Box ID: {boxRef.current?.id}
      </Typography>
    </FlexBox>
  );
};

// Component override - render as different element
<FlexBox component="span" x="center" y="center">
  Inline flex span
</FlexBox>

<FlexBox component="nav" x="space-between" y="center" padding={2}>
  <a href="/">Home</a>
  <a href="/about">About</a>
</FlexBox>

// Using MUI components
<FlexBox component={Paper} elevation={3} x="center" y="center" padding={4}>
  <Typography>FlexBox rendered as Paper</Typography>
</FlexBox>

<FlexBox component={Typography} variant="h4" x="center" y="center">
  Typography with flex display
</FlexBox>
```

--------------------------------

### Responsive FlexBox Alignment with Object Notation

Source: https://context7.com/brandonscript/mui-flexy/llms.txt

Demonstrates how to use Material UI's responsive style object notation with the 'x', 'y', and 'row' props in FlexBox. This allows for different alignments and flex directions at various screen breakpoints.

```tsx
import { FlexBox } from "@mui-flexy/v7";
import { Typography } from "@mui/material";

// Responsive alignment using breakpoint object notation
<FlexBox
  x={{ xs: "left", sm: "center", md: "right" }}
  y={{ xs: "top", md: "center" }}
>
  <Typography>Responsive alignment</Typography>
</FlexBox>

// Responsive direction change with automatic alignment recalculation
// mui-flexy handles the complex CSS mapping when direction changes
<FlexBox
  x={{ xs: "left", lg: "right" }}
  y="center"
  row={{ xs: true, md: false }}>  {/* row on xs/sm, column on md+ */}
  <Typography>Direction-aware responsive layout</Typography>
</FlexBox>

// The above generates the complex CSS equivalent:
// <Box sx={{
//   display: "flex",
//   flexDirection: { xs: "row", md: "column" },
//   justifyContent: { xs: "flex-start", md: "center" },
//   alignItems: { xs: "center", md: "flex-start", lg: "flex-end" }
// }} />
```

--------------------------------

### Updating Imports for mui-flexy v2.0.0+

Source: https://github.com/brandonscript/mui-flexy/blob/main/README.md

Shows the change in import paths required after version 2.0.0 of mui-flexy, moving from a single package to version-specific packages.

```jsx
// Old import
import { FlexBox } from "mui-flexy";

// New import for v7
import { FlexBox } from "@mui-flexy/v7";

// New import for v6
import { FlexBox } from "@mui-flexy/v6";

// New import for v5
import { FlexBox } from "@mui-flexy/v5";
```

--------------------------------

### FlexBox Responsive Style Array for Flex Direction

Source: https://github.com/brandonscript/mui-flexy/blob/main/README.md

Demonstrates using array notation for `flexDirection` in FlexBox, allowing different directions at various breakpoints, with corresponding MUI Box styles.

```jsx
<FlexBox x={["left", "space-between"]} y={["top", "center"]} flexDirection={["row", "column"]} />

// ...is equivalent to:

<Box sx={{
  display: "flex",
  justifyContent: ["flex-start", "center"],
  alignItems: ["flex-start", "space-between"],
  flexDirection: ["row", "column"]
}} />
```

--------------------------------

### FlexBox Component Basic Usage and Column Layout

Source: https://context7.com/brandonscript/mui-flexy/llms.txt

Demonstrates the basic usage of the FlexBox component, including centering content and aligning items in a column layout. The 'x' and 'y' props automatically map to `justifyContent` and `alignItems` based on the flex direction.

```tsx
import { FlexBox } from "@mui-flexy/v7";
import { Typography } from "@mui/material";

// Basic centering - x="center" and y="center"
// automatically resolve to justifyContent and alignItems
<FlexBox x="center" y="center" width="100vw" height="100vh">
  <Typography>Centered Content</Typography>
</FlexBox>

// Column layout - x and y props swap their CSS mappings automatically
<FlexBox column x="left" y="bottom">
  <Typography>Bottom-left aligned in column</Typography>
</FlexBox>

// With reverse direction
<FlexBox row reverse x="right" y="center">
  <Typography>Row-reverse layout</Typography>
</FlexBox>

// Nowrap white-space handling
<FlexBox x="left" y="center" nowrap>
  <Typography>No text wrapping</Typography>
</FlexBox>
```

--------------------------------

### FlexBox Row vs. Column Orientation Switching

Source: https://github.com/brandonscript/mui-flexy/blob/main/README.md

Illustrates the difference in layout when switching between `row` and `column` props on FlexBox, showing the corresponding MUI Box styles.

```jsx
<>
  <FlexBox x="left" y="bottom" row />
  <FlexBox x="left" y="bottom" column />
</>

// ...is equivalent to:
<>
  <Box sx={{
    display: "flex",
    justifyContent: "flex-start",
    alignItems: "flex-end",
    flexDirection: "row"
  }} />
  <Box sx={{
    display: "flex",
    justifyContent: "flex-end",
    alignItems: "flex-start",
    flexDirection: "column"
  }} />
</>
```

--------------------------------

### FlexBox Row/Column Orientation Equivalent

Source: https://github.com/brandonscript/mui-flexy/blob/main/README.md

Demonstrates how the `row` prop on FlexBox is equivalent to setting `flexDirection: 'row'` in MUI's Box component, along with centering content.

```jsx
<FlexBox x="center" y="center" row />

// ...is equivalent to:

<Box sx={{
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  flexDirection: "row"
}} />
```

--------------------------------

### Theme Integration with unstable_sx in MUI Flexy

Source: https://context7.com/brandonscript/mui-flexy/llms.txt

Explains how to leverage `theme.unstable_sx` within styled MUI Flexy components for accessing theme properties like spacing, breakpoints, and palette colors. This allows for responsive design and conditional styling based on theme values.

```tsx
import { styled } from "@mui/material/styles";
import { FlexBox } from "@mui-flexy/v7";

const ThemedFlexBox = styled(FlexBox)(({ theme }) =>
  theme.unstable_sx({
    backgroundColor: "primary.light",
    borderRadius: 2,           // theme.shape.borderRadius * 2
    px: 3,                     // theme.spacing(3) horizontal padding
    py: 2,                     // theme.spacing(2) vertical padding
    gap: 2,                    // theme.spacing(2) gap between children
    minHeight: { xs: 100, md: 200 },  // responsive minHeight
    width: { xs: "100%", md: "50%" }, // responsive width
  })
);

<ThemedFlexBox x="space-between" y="center">
  <Typography>Left content</Typography>
  <Typography>Right content</Typography>
</ThemedFlexBox>

// Combining with theme palette conditionally
const StatusBox = styled(FlexBox)<{ status: "success" | "error" | "warning" }>(
  ({ theme, status }) =>
    theme.unstable_sx({
      backgroundColor: `${status}.light`,
      color: `${status}.contrastText`,
      borderLeft: 4,
      borderColor: `${status}.main`,
      p: 2,
    })
);

<StatusBox x="left" y="center" status="success">
  <Typography>Operation successful</Typography>
</StatusBox>
```

--------------------------------

### SSR Emotion Cache for MUI

Source: https://github.com/brandonscript/mui-flexy/blob/main/README.md

Provides a solution for avoiding hydration errors in SSR frameworks like Next.js by using an Emotion cache. This ensures consistent styling between server-rendered and client-rendered applications.

```jsx
import { CacheProvider } from "@emotion/react";
import createCache from "@emotion/cache";

const cache = createCache({ key: "my-app-css" });

const App = () => (
  <CacheProvider value={cache}>
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <YourApp />
    </ThemeProvider>
  </CacheProvider>
);
```

--------------------------------

### Responsive Alignment with Array Notation in FlexBox (TSX)

Source: https://context7.com/brandonscript/mui-flexy/llms.txt

Demonstrates using FlexBox with MUI's responsive array notation for alignment properties (x, y) and direction (flexDirection). Each index in the array corresponds to a breakpoint (xs, sm, md, lg, xl). This allows for dynamic alignment changes across different screen sizes.

```tsx
import { FlexBox } from "@mui-flexy/v7";

// Array notation: [xs, sm, md, lg, xl]
<FlexBox
  x={["left", "center", "right"]}
  y={["bottom", "center", "top"]}
  row
>
  <div>Content shifts alignment at breakpoints</div>
</FlexBox>

// Mixed direction with array alignment
<FlexBox
  x={["left", "space-between"]}
  y={["top", "center"]}
  flexDirection={["row", "column"]}
>
  <div>Item 1</div>
  <div>Item 2</div>
</FlexBox>

// Complex responsive with direction change
<FlexBox
  x="center"
  y={["center", "stretch"]}
  row={{ xs: true, md: false }}
>
  <div>Adapts alignment based on direction at each breakpoint</div>
</FlexBox>
```

--------------------------------

### FlexBox Reverse Row Direction

Source: https://github.com/brandonscript/mui-flexy/blob/main/README.md

Shows how to use the `reverse` prop with `row` in FlexBox to achieve a `flex-direction: 'row-reverse'`, with its MUI Box equivalent.

```jsx
<FlexBox x="left" y="center" reverse row />

// ...is equivalent to:

<Box sx={{
  display: "flex",
  justifyContent: "flex-start",
  alignItems: "center",
  flexDirection: "row-reverse"
}} />
```

--------------------------------

### FlexBox Row/Column Switch with Specific Breakpoints

Source: https://github.com/brandonscript/mui-flexy/blob/main/README.md

Demonstrates a FlexBox configuration where `flexDirection` switches from 'row' to 'column' at the 'md' breakpoint, with corresponding MUI Box styles.

```jsx
<FlexBox x="left" y="bottom" row={{ xs: true, md: false }} />

// ...is equivalent to:

<Box sx={{
  justifyContent: {
    xs: "flex-start",
    md: "flex-end"
  },
  alignItems: {
    xs: "flex-end",
    md: "flex-start"
  },
  flexDirection: { xs: "row", md: "column" }
}} />
```

--------------------------------

### FlexBox Alignment Props Mapping

Source: https://context7.com/brandonscript/mui-flexy/llms.txt

Illustrates how semantic alignment values for 'x' and 'y' props map to standard CSS flexbox properties. It also shows how these mappings change when the flex direction is set to 'column'.

```tsx
import { FlexBox } from "@mui-flexy/v7";

// Semantic alignment values
<FlexBox x="left" y="top">        {/* flex-start, flex-start */}
<FlexBox x="right" y="bottom">   {/* flex-end, flex-end */}
<FlexBox x="center" y="center">  {/* center, center */}
<FlexBox x="space-between" y="stretch">  {/* space-between, stretch */}

// Column mode - x controls alignItems, y controls justifyContent
<FlexBox column x="center" y="space-around">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</FlexBox>

// Equivalent vanilla MUI (column mode):
// <Box sx={{
//   display: "flex",
//   flexDirection: "column",
//   alignItems: "center",        // x maps to alignItems in column
//   justifyContent: "space-around" // y maps to justifyContent in column
// }} />
```

--------------------------------

### Styled Component with shouldForwardProp

Source: https://github.com/brandonscript/mui-flexy/blob/main/README.md

Illustrates creating a styled FlexBox component that conditionally forwards props. The `shouldForwardProp` option prevents the 'count' prop from being passed down to the DOM element, while still allowing it to be used for styling via TypeScript generics and theme injection.

```jsx
const CountBox =
  styled(FlexBox, {
    shouldForwardProp: (prop) => !["count"].includes(String(prop)),
  }) <
  { count: number } >
  (({ theme, count }) =>
    theme.unstable_sx({
      color: (theme) => (count > 8 ? theme.palette.primary.warning : theme.palette.primary.main),
    }));
```

--------------------------------

### FlexRowBox and FlexColumnBox Variants (TSX)

Source: https://context7.com/brandonscript/mui-flexy/llms.txt

Introduces FlexRowBox and FlexColumnBox as pre-configured FlexBox variants with fixed orientations. These components offer improved TypeScript inference and a simpler API when the layout orientation is known beforehand. They are equivalent to using FlexBox with explicit 'row' or 'column' props.

```tsx
import { FlexBox, FlexRowBox, FlexColumnBox } from "@mui-flexy/v7";

// FlexRowBox - always row orientation, x/y types are constrained
<FlexRowBox x="space-between" y="center">
  <button>Left</button>
  <button>Right</button>
</FlexRowBox>

// FlexColumnBox - always column orientation
<FlexColumnBox x="center" y="space-around" height="300px">
  <div>Top</div>
  <div>Middle</div>
  <div>Bottom</div>
</FlexColumnBox>

// Equivalent to FlexBox with explicit orientation
<FlexBox row x="space-between" y="center">...</FlexBox>
<FlexBox column x="center" y="space-around">...</FlexBox>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.