diff --git a/src/components/Panel/Panel.stories.tsx b/src/components/Panel/Panel.stories.tsx
index e7a185ca..a7ef35e1 100644
--- a/src/components/Panel/Panel.stories.tsx
+++ b/src/components/Panel/Panel.stories.tsx
@@ -25,6 +25,7 @@ export const Playground = {
height: "",
fillHeight: false,
width: "50%",
+ alignItems: "start",
children: (
<>
Example panel title
diff --git a/src/components/Panel/Panel.tsx b/src/components/Panel/Panel.tsx
index 9ff2ba7e..480efc1a 100644
--- a/src/components/Panel/Panel.tsx
+++ b/src/components/Panel/Panel.tsx
@@ -4,6 +4,7 @@ import styled from "styled-components";
export type PanelPadding = "none" | "xs" | "sm" | "md" | "lg" | "xl";
export type PanelColor = "default" | "muted" | "transparent";
+type AlignItemsOption = "start" | "center" | "end";
export interface PanelProps extends HTMLAttributes {
hasBorder?: boolean;
@@ -16,6 +17,7 @@ export interface PanelProps extends HTMLAttributes {
fillWidth?: boolean;
height?: string;
fillHeight?: boolean;
+ alignItems?: AlignItemsOption;
}
export const Panel = ({
@@ -29,6 +31,7 @@ export const Panel = ({
fillWidth,
height,
fillHeight,
+ alignItems = "center",
...props
}: PanelProps) => (
{children}
@@ -57,11 +61,13 @@ const Wrapper = styled.div<{
$height?: string;
$fillHeight?: boolean;
$orientation?: Orientation;
+ $alignItems?: AlignItemsOption;
}>`
display: flex;
flex-flow: ${({ $orientation = "horizontal" }) =>
$orientation === "horizontal" ? "row wrap" : "column"};
- align-items: flex-start;
+ align-items: ${({ $alignItems = "center" }) =>
+ $alignItems === "center" ? "center" : `flex-${$alignItems}`};
width: ${({ $width, $fillWidth }) => ($fillWidth ? "100%" : $width)};
height: ${({ $height, $fillHeight }) => ($fillHeight ? "100%" : $height)};
background-color: ${({ $color = "default", theme }) =>