<%= pb_rails("title", props: {size: 4, text: "S", padding_top: "sm"}) %>

<%= pb_rails("flex") do %>
  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>

    <%= pb_rails("multiple_users_stacked", props: {
      variant: "bubble",
      size: "sm",
      users: [
        {
          name: "Patrick Welch",
          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
        }
      ]
    }) %>

  <% end %>
  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
    <%= pb_rails("multiple_users_stacked", props: {
      size: "sm",
      variant: "bubble",
      users: [
        {
          name: "Patrick Welch",
          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
        },
        {
          name: "Lucille Sanchez",
          image_url: "https://randomuser.me/api/portraits/women/6.jpg",
        }
      ]
    }) %>
  <% end %>
  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
    <%= pb_rails("multiple_users_stacked", props: {
        size: "sm",
        variant: "bubble",
        users: [
          {
            name: "Patrick Welch",
            image_url: "https://randomuser.me/api/portraits/men/9.jpg",
          },
          {
            name: "Lucille Sanchez",
            image_url: "https://randomuser.me/api/portraits/women/6.jpg",
          },
          {
            name: "Beverly Reyes",
            image_url: "https://randomuser.me/api/portraits/women/74.jpg",
          },
        ]
      }) %>
  <% end %>
  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
    <%= pb_rails("multiple_users_stacked", props: { 
      size: "sm",
      variant: "bubble",
      users: [
        {
          name: "Patrick Welch",
          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
        },
        {
          name: "Lucille Sanchez",
          image_url: "https://randomuser.me/api/portraits/women/6.jpg",
        },
        {
          name: "Beverly Reyes",
          image_url: "https://randomuser.me/api/portraits/women/74.jpg",
        },
        {
          name: "Keith Craig",
          image_url: "https://randomuser.me/api/portraits/men/40.jpg",
        },
        {
          name: "Alicia Cooper",
          image_url: "https://randomuser.me/api/portraits/women/46.jpg",
        }
      ]
    }) %>
  <% end %>
<% end %>


<%= pb_rails("title", props: {size: 4, text: "M", padding_top: "sm"}) %>

<%= pb_rails("flex") do %>
  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>

    <%= pb_rails("multiple_users_stacked", props: {
      size: "md",
      variant: "bubble",
      users: [
        {
          name: "Patrick Welch",
          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
        }
      ]
    }) %>

  <% end %>
  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
    <%= pb_rails("multiple_users_stacked", props: {
      size: "md",
      variant: "bubble",
      users: [
        {
          name: "Patrick Welch",
          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
        },
        {
          name: "Lucille Sanchez",
          image_url: "https://randomuser.me/api/portraits/women/6.jpg",
        }
      ]
    }) %>
    <% end %>
  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
      <%= pb_rails("multiple_users_stacked", props: {
        size: "md",
        variant: "bubble",
        users: [
          {
            name: "Patrick Welch",
            image_url: "https://randomuser.me/api/portraits/men/9.jpg",
          },
          {
            name: "Lucille Sanchez",
            image_url: "https://randomuser.me/api/portraits/women/6.jpg",
          },
          {
            name: "Beverly Reyes",
            image_url: "https://randomuser.me/api/portraits/women/74.jpg",
          },
        ]
      }) %>
  <% end %>
  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
    <%= pb_rails("multiple_users_stacked", props: {
      size: "md",
      variant: "bubble",
      users: [
        {
          name: "Patrick Welch",
          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
        },
        {
          name: "Lucille Sanchez",
          image_url: "https://randomuser.me/api/portraits/women/6.jpg",
        },
        {
          name: "Beverly Reyes",
          image_url: "https://randomuser.me/api/portraits/women/74.jpg",
        },
        {
          name: "Keith Craig",
          image_url: "https://randomuser.me/api/portraits/men/40.jpg",
        },
        {
          name: "Alicia Cooper",
          image_url: "https://randomuser.me/api/portraits/women/46.jpg",
        }
      ]
    }) %>
  <% end %>
<% end %>


<%= pb_rails("title", props: {size: 4, text: "L", padding_top: "sm"}) %>

<%= pb_rails("flex") do %>
  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>

    <%= pb_rails("multiple_users_stacked", props: {
      size: "lg",
      variant: "bubble",
      users: [
        {
          name: "Patrick Welch",
          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
        }
      ]
    }) %>

  <% end %>
  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
    <%= pb_rails("multiple_users_stacked", props: {
      size: "lg",
      variant: "bubble",
      users: [
        {
          name: "Patrick Welch",
          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
        },
        {
          name: "Lucille Sanchez",
          image_url: "https://randomuser.me/api/portraits/women/6.jpg",
        }
      ]
    }) %>
  <% end %>
  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
      <%= pb_rails("multiple_users_stacked", props: {
        size: "lg",
        variant: "bubble",
        users: [
          {
            name: "Patrick Welch",
            image_url: "https://randomuser.me/api/portraits/men/9.jpg",
          },
          {
            name: "Lucille Sanchez",
            image_url: "https://randomuser.me/api/portraits/women/6.jpg",
          },
          {
            name: "Beverly Reyes",
            image_url: "https://randomuser.me/api/portraits/women/74.jpg",
          },
        ]
      }) %>
  <% end %>
  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
    <%= pb_rails("multiple_users_stacked", props: {
      size: "lg",
      variant: "bubble",
      users: [
        {
          name: "Patrick Welch",
          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
        },
        {
          name: "Lucille Sanchez",
          image_url: "https://randomuser.me/api/portraits/women/6.jpg",
        },
        {
          name: "Beverly Reyes",
          image_url: "https://randomuser.me/api/portraits/women/74.jpg",
        },
        {
          name: "Keith Craig",
          image_url: "https://randomuser.me/api/portraits/men/40.jpg",
        },
        {
          name: "Alicia Cooper",
          image_url: "https://randomuser.me/api/portraits/women/46.jpg",
        }
      ]
    }) %>
  <% end %>
<% end %>


<%= pb_rails("title", props: {size: 4, text: "XL", padding_top: "sm"}) %>

<%= pb_rails("flex") do %>
  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>

    <%= pb_rails("multiple_users_stacked", props: {
      size: "xl",
      variant: "bubble",
      users: [
        {
          name: "Patrick Welch",
          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
        }
      ]
    }) %>

  <% end %>
  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
    <%= pb_rails("multiple_users_stacked", props: {
      size: "xl",
      variant: "bubble",
      users: [
        {
          name: "Patrick Welch",
          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
        },
        {
          name: "Lucille Sanchez",
          image_url: "https://randomuser.me/api/portraits/women/6.jpg",
        }
      ]
    }) %>
  <% end %>
  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
      <%= pb_rails("multiple_users_stacked", props: {
        size: "xl",
        variant: "bubble",
        users: [
          {
            name: "Patrick Welch",
            image_url: "https://randomuser.me/api/portraits/men/9.jpg",
          },
          {
            name: "Lucille Sanchez",
            image_url: "https://randomuser.me/api/portraits/women/6.jpg",
          },
          {
            name: "Beverly Reyes",
            image_url: "https://randomuser.me/api/portraits/women/74.jpg",
          },
        ]
      }) %>
  <% end %>
  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
    <%= pb_rails("multiple_users_stacked", props: {
      size: "xl",
      variant: "bubble",
      users: [
        {
          name: "Patrick Welch",
          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
        },
        {
          name: "Lucille Sanchez",
          image_url: "https://randomuser.me/api/portraits/women/6.jpg",
        },
        {
          name: "Beverly Reyes",
          image_url: "https://randomuser.me/api/portraits/women/74.jpg",
        },
        {
          name: "Keith Craig",
          image_url: "https://randomuser.me/api/portraits/men/40.jpg",
        },
        {
          name: "Alicia Cooper",
          image_url: "https://randomuser.me/api/portraits/women/46.jpg",
        }
      ]
    }) %>
  <% end %>
<% end %>