@vectara/vectara-ui 11.2.1 → 12.0.0

package/lib/components/card/Card.d.ts

@@ -10,6 +10,7 @@ type Props = {
     highlight?: boolean;
     ungrouped?: boolean;
     fullHeight?: boolean;
+    isScrollable?: boolean;
 };
-export declare const VuiCard: ({ header, body, footer, align, interactive, href, className, padding, highlight, ungrouped, fullHeight, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiCard: ({ header, body, footer, align, interactive, href, className, padding, highlight, ungrouped, fullHeight, isScrollable, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/card/Card.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
 export const VuiCard = (_a) => {
-    var { header, body, footer, align = "left", interactive, href, className, padding = "s", highlight, ungrouped, fullHeight } = _a, rest = __rest(_a, ["header", "body", "footer", "align", "interactive", "href", "className", "padding", "highlight", "ungrouped", "fullHeight"]);
+    var { header, body, footer, align = "left", interactive, href, className, padding = "s", highlight, ungrouped, fullHeight, isScrollable } = _a, rest = __rest(_a, ["header", "body", "footer", "align", "interactive", "href", "className", "padding", "highlight", "ungrouped", "fullHeight", "isScrollable"]);
     const classes = classNames("vuiCard", `vuiCard--${align}`, `vuiCard--${padding}`, {
         "vuiCard--interactive": interactive && !href,
         "vuiCard--link": href,
@@ -20,8 +20,11 @@ export const VuiCard = (_a) => {
         "vuiCard--ungrouped": ungrouped,
         "vuiCard--fullHeight": fullHeight
     }, className);
+    const bodyClasses = classNames("vuiCard__body", {
+        "vuiCard__body--scrollable": isScrollable
+    });
     const headerContent = header && _jsx("div", Object.assign({ className: "vuiCard__header" }, { children: header }));
-    const bodyContent = body && _jsx("div", Object.assign({ className: "vuiCard__body" }, { children: body }));
+    const bodyContent = body && _jsx("div", Object.assign({ className: bodyClasses }, { children: body }));
     const footerContent = footer && _jsx("div", Object.assign({ className: "vuiCard__footer" }, { children: footer }));
     if (href) {
         return (_jsxs("a", Object.assign({ className: classes, href: href }, rest, { children: [headerContent, bodyContent, footerContent] })));

package/lib/components/card/_index.scss

@@ -64,6 +64,10 @@
   flex-grow: 1;
 }
 
+.vuiCard__body--scrollable {
+  overflow-y: auto;
+}
+
 .vuiCard__footer {
   display: flex;
   flex-direction: column;

package/lib/components/grid/Grid.d.ts

@@ -1,12 +1,29 @@
 import React from "react";
 import { FlexSpacing } from "../flex/types";
+import { ResponsiveGridValue } from "./types";
 export declare const COLUMNS: readonly [1, 2, 3, 4];
 export type Columns = (typeof COLUMNS)[number];
+declare const GRID_ALIGN_ITEMS: readonly ["start", "end", "center", "stretch", "baseline"];
+type GridAlignItems = (typeof GRID_ALIGN_ITEMS)[number];
+declare const GRID_JUSTIFY_ITEMS: readonly ["start", "end", "center", "stretch"];
+type GridJustifyItems = (typeof GRID_JUSTIFY_ITEMS)[number];
+declare const GRID_ALIGN_CONTENT: readonly ["start", "end", "center", "stretch", "spaceAround", "spaceBetween", "spaceEvenly"];
+type GridAlignContent = (typeof GRID_ALIGN_CONTENT)[number];
+declare const GRID_JUSTIFY_CONTENT: readonly ["start", "end", "center", "stretch", "spaceAround", "spaceBetween", "spaceEvenly"];
+type GridJustifyContent = (typeof GRID_JUSTIFY_CONTENT)[number];
 type Props = {
     children?: React.ReactNode;
     columns?: Columns;
     spacing?: FlexSpacing;
+    templateColumns?: ResponsiveGridValue<string>;
+    templateRows?: string;
+    alignItems?: GridAlignItems;
+    justifyItems?: GridJustifyItems;
+    alignContent?: GridAlignContent;
+    justifyContent?: GridJustifyContent;
+    inline?: boolean;
+    fullWidth?: boolean;
     className?: string;
 };
-export declare const VuiGrid: ({ children, columns, spacing, className, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiGrid: ({ children, columns, spacing, templateColumns, templateRows, alignItems, justifyItems, alignContent, justifyContent, inline, fullWidth, className, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/grid/Grid.js

@@ -12,9 +12,93 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from "classnames";
 export const COLUMNS = [1, 2, 3, 4];
+const GRID_ALIGN_ITEMS = ["start", "end", "center", "stretch", "baseline"];
+const GRID_JUSTIFY_ITEMS = ["start", "end", "center", "stretch"];
+const GRID_ALIGN_CONTENT = [
+    "start",
+    "end",
+    "center",
+    "stretch",
+    "spaceAround",
+    "spaceBetween",
+    "spaceEvenly"
+];
+const GRID_JUSTIFY_CONTENT = [
+    "start",
+    "end",
+    "center",
+    "stretch",
+    "spaceAround",
+    "spaceBetween",
+    "spaceEvenly"
+];
+const alignItemsClassMap = {
+    start: "vuiGrid--alignItemsStart",
+    end: "vuiGrid--alignItemsEnd",
+    center: "vuiGrid--alignItemsCenter",
+    stretch: "vuiGrid--alignItemsStretch",
+    baseline: "vuiGrid--alignItemsBaseline"
+};
+const justifyItemsClassMap = {
+    start: "vuiGrid--justifyItemsStart",
+    end: "vuiGrid--justifyItemsEnd",
+    center: "vuiGrid--justifyItemsCenter",
+    stretch: "vuiGrid--justifyItemsStretch"
+};
+const alignContentClassMap = {
+    start: "vuiGrid--alignContentStart",
+    end: "vuiGrid--alignContentEnd",
+    center: "vuiGrid--alignContentCenter",
+    stretch: "vuiGrid--alignContentStretch",
+    spaceAround: "vuiGrid--alignContentSpaceAround",
+    spaceBetween: "vuiGrid--alignContentSpaceBetween",
+    spaceEvenly: "vuiGrid--alignContentSpaceEvenly"
+};
+const justifyContentClassMap = {
+    start: "vuiGrid--justifyContentStart",
+    end: "vuiGrid--justifyContentEnd",
+    center: "vuiGrid--justifyContentCenter",
+    stretch: "vuiGrid--justifyContentStretch",
+    spaceAround: "vuiGrid--justifyContentSpaceAround",
+    spaceBetween: "vuiGrid--justifyContentSpaceBetween",
+    spaceEvenly: "vuiGrid--justifyContentSpaceEvenly"
+};
 export const VuiGrid = (_a) => {
-    var { children, columns = 2, spacing = "m", className } = _a, rest = __rest(_a, ["children", "columns", "spacing", "className"]);
+    var { children, columns = 2, spacing = "m", templateColumns, templateRows, alignItems, justifyItems, alignContent, justifyContent, inline, fullWidth, className } = _a, rest = __rest(_a, ["children", "columns", "spacing", "templateColumns", "templateRows", "alignItems", "justifyItems", "alignContent", "justifyContent", "inline", "fullWidth", "className"]);
     const classes = classNames("vuiGridContainer", className);
-    const contentClasses = classNames("vuiGrid", `vuiGrid--${spacing}`, `vuiGrid--columns${columns}`);
-    return (_jsx("div", Object.assign({ className: classes }, rest, { children: _jsx("div", Object.assign({ className: contentClasses }, { children: children })) })));
+    const isResponsiveTemplateColumns = templateColumns && typeof templateColumns === "object";
+    const contentClasses = classNames("vuiGrid", {
+        [`vuiGrid--${spacing}`]: spacing,
+        [`vuiGrid--columns${columns}`]: !templateColumns && columns,
+        "vuiGrid--inline": inline,
+        "vuiGrid--fullWidth": fullWidth,
+        "vuiGrid--responsive": isResponsiveTemplateColumns
+    }, alignItems && alignItemsClassMap[alignItems], justifyItems && justifyItemsClassMap[justifyItems], alignContent && alignContentClassMap[alignContent], justifyContent && justifyContentClassMap[justifyContent]);
+    const gridStyle = {};
+    if (templateColumns) {
+        if (typeof templateColumns === "string") {
+            gridStyle.gridTemplateColumns = templateColumns;
+        }
+        else {
+            // Implement cascading: each breakpoint inherits from the previous if not defined
+            // If 'default' is specified, use it as the base fallback value
+            const defaultValue = templateColumns.default;
+            const smValue = templateColumns.sm || defaultValue;
+            const mdValue = templateColumns.md || smValue;
+            const lgValue = templateColumns.lg || mdValue;
+            if (smValue) {
+                gridStyle["--grid-template-sm"] = smValue;
+            }
+            if (mdValue) {
+                gridStyle["--grid-template-md"] = mdValue;
+            }
+            if (lgValue) {
+                gridStyle["--grid-template-lg"] = lgValue;
+            }
+        }
+    }
+    if (templateRows) {
+        gridStyle.gridTemplateRows = templateRows;
+    }
+    return (_jsx("div", Object.assign({ className: classes }, rest, { children: _jsx("div", Object.assign({ className: contentClasses, style: Object.keys(gridStyle).length > 0 ? gridStyle : undefined }, { children: children })) })));
 };

package/lib/components/grid/GridItem.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import { ResponsiveGridValue } from "./types";
+declare const GRID_ALIGN_SELF: readonly ["start", "end", "center", "stretch", "baseline"];
+type GridAlignSelf = (typeof GRID_ALIGN_SELF)[number];
+declare const GRID_JUSTIFY_SELF: readonly ["start", "end", "center", "stretch"];
+type GridJustifySelf = (typeof GRID_JUSTIFY_SELF)[number];
+type GridSpan = number | "auto";
+type GridLine = number | "auto" | `span ${number}`;
+type GridItemProps = {
+    children?: React.ReactNode;
+    area?: string;
+    colSpan?: ResponsiveGridValue<GridSpan>;
+    rowSpan?: GridSpan;
+    colStart?: GridLine;
+    colEnd?: GridLine;
+    rowStart?: GridLine;
+    rowEnd?: GridLine;
+    alignSelf?: GridAlignSelf;
+    justifySelf?: GridJustifySelf;
+    className?: string;
+};
+export declare const VuiGridItem: ({ children, area, colSpan, rowSpan, colStart, colEnd, rowStart, rowEnd, alignSelf, justifySelf, className, ...rest }: GridItemProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/grid/GridItem.js

@@ -0,0 +1,103 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+const GRID_ALIGN_SELF = ["start", "end", "center", "stretch", "baseline"];
+const GRID_JUSTIFY_SELF = ["start", "end", "center", "stretch"];
+// Mapping objects for alignment properties
+const alignSelfClassMap = {
+    start: "vuiGridItem--alignSelfStart",
+    end: "vuiGridItem--alignSelfEnd",
+    center: "vuiGridItem--alignSelfCenter",
+    stretch: "vuiGridItem--alignSelfStretch",
+    baseline: "vuiGridItem--alignSelfBaseline"
+};
+const justifySelfClassMap = {
+    start: "vuiGridItem--justifySelfStart",
+    end: "vuiGridItem--justifySelfEnd",
+    center: "vuiGridItem--justifySelfCenter",
+    stretch: "vuiGridItem--justifySelfStretch"
+};
+const isResponsiveGridValue = (value) => {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+};
+const normalizeGridSpan = (value) => {
+    if (value === "auto")
+        return "auto";
+    return `span ${value}`;
+};
+// Helper to check if a grid value is a number within the valid range for CSS classes
+const isGridValueInRange = (value, maxValue = 12) => {
+    return typeof value === "number" && value >= 1 && value <= maxValue;
+};
+export const VuiGridItem = (_a) => {
+    var { children, area, colSpan, rowSpan, colStart, colEnd, rowStart, rowEnd, alignSelf, justifySelf, className } = _a, rest = __rest(_a, ["children", "area", "colSpan", "rowSpan", "colStart", "colEnd", "rowStart", "rowEnd", "alignSelf", "justifySelf", "className"]);
+    const isColSpanResponsive = isResponsiveGridValue(colSpan);
+    const classes = classNames("vuiGridItem", {
+        [`vuiGridItem--colSpan${colSpan}`]: !isColSpanResponsive && isGridValueInRange(colSpan),
+        [`vuiGridItem--rowSpan${rowSpan}`]: isGridValueInRange(rowSpan),
+        [`vuiGridItem--colStart${colStart}`]: isGridValueInRange(colStart),
+        [`vuiGridItem--colEnd${colEnd}`]: isGridValueInRange(colEnd),
+        [`vuiGridItem--rowStart${rowStart}`]: isGridValueInRange(rowStart),
+        [`vuiGridItem--rowEnd${rowEnd}`]: isGridValueInRange(rowEnd),
+        "vuiGridItem--responsive": isColSpanResponsive
+    }, alignSelf && alignSelfClassMap[alignSelf], justifySelf && justifySelfClassMap[justifySelf], className);
+    const style = {};
+    if (area) {
+        style.gridArea = area;
+    }
+    if (isColSpanResponsive) {
+        // Implement cascading: each breakpoint inherits from the previous if not defined
+        // If 'default' is specified, use it as the base fallback value
+        const defaultValue = colSpan.default;
+        const smValue = colSpan.sm !== undefined ? colSpan.sm : defaultValue;
+        const mdValue = colSpan.md !== undefined ? colSpan.md : smValue;
+        const lgValue = colSpan.lg !== undefined ? colSpan.lg : mdValue;
+        if (smValue !== undefined) {
+            style["--grid-item-colSpan-sm"] = normalizeGridSpan(smValue);
+        }
+        if (mdValue !== undefined) {
+            style["--grid-item-colSpan-md"] = normalizeGridSpan(mdValue);
+        }
+        if (lgValue !== undefined) {
+            style["--grid-item-colSpan-lg"] = normalizeGridSpan(lgValue);
+        }
+    }
+    else if (colSpan === "auto" || (typeof colSpan === "number" && colSpan > 12)) {
+        style.gridColumn = colSpan === "auto" ? "auto" : `span ${colSpan}`;
+    }
+    if (rowSpan === "auto" || (typeof rowSpan === "number" && rowSpan > 12)) {
+        style.gridRow = rowSpan === "auto" ? "auto" : `span ${rowSpan}`;
+    }
+    // Handle position values that are strings or > 12
+    if (colStart) {
+        if (typeof colStart === "string" || colStart > 12) {
+            style.gridColumnStart = colStart;
+        }
+    }
+    if (colEnd) {
+        if (typeof colEnd === "string" || colEnd > 12) {
+            style.gridColumnEnd = colEnd;
+        }
+    }
+    if (rowStart) {
+        if (typeof rowStart === "string" || rowStart > 12) {
+            style.gridRowStart = rowStart;
+        }
+    }
+    if (rowEnd) {
+        if (typeof rowEnd === "string" || rowEnd > 12) {
+            style.gridRowEnd = rowEnd;
+        }
+    }
+    return (_jsx("div", Object.assign({ className: classes, style: Object.keys(style).length > 0 ? style : undefined }, rest, { children: children })));
+};

package/lib/components/grid/SimpleGrid.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { FlexSpacing } from "../flex/types";
+type Props = {
+    children?: React.ReactNode;
+    columns?: number | Record<string, number>;
+    minChildWidth?: string;
+    spacing?: FlexSpacing;
+    className?: string;
+};
+export declare const VuiSimpleGrid: ({ children, columns, minChildWidth, spacing, className, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/grid/SimpleGrid.js

@@ -0,0 +1,33 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { VuiGrid } from "./Grid";
+export const VuiSimpleGrid = (_a) => {
+    var { children, columns, minChildWidth, spacing = "m", className } = _a, rest = __rest(_a, ["children", "columns", "minChildWidth", "spacing", "className"]);
+    let templateColumns;
+    if (minChildWidth) {
+        // Use auto-fit with minmax for responsive behavior
+        templateColumns = `repeat(auto-fit, minmax(${minChildWidth}, 1fr))`;
+    }
+    else if (typeof columns === "number") {
+        templateColumns = `repeat(${columns}, 1fr)`;
+    }
+    else if (columns && typeof columns === "object") {
+        // TODO: Responsive columns object - would need media queries or container queries
+        // For now, just use the first value as a fallback
+        const firstValue = Object.values(columns)[0];
+        templateColumns = `repeat(${firstValue}, 1fr)`;
+    }
+    const classes = classNames("vuiSimpleGrid", className);
+    return (_jsx(VuiGrid, Object.assign({ templateColumns: templateColumns, spacing: spacing, className: classes }, rest, { children: children })));
+};

package/lib/components/grid/_index.scss

@@ -67,3 +67,215 @@ $spacing: (
     grid-template-columns: 1fr;
   }
 }
+
+// Responsive grid template columns using CSS custom properties
+.vuiGrid--responsive {
+  // Small (applies from 0px up - default/mobile-first)
+  grid-template-columns: var(--grid-template-sm);
+
+  @container (width > 500px) {
+    grid-template-columns: var(--grid-template-md);
+  }
+
+  @container (width > 800px) {
+    grid-template-columns: var(--grid-template-lg);
+  }
+}
+
+// Alignment - align-items
+.vuiGrid--alignItemsStart {
+  align-items: start;
+}
+
+.vuiGrid--alignItemsEnd {
+  align-items: end;
+}
+
+.vuiGrid--alignItemsCenter {
+  align-items: center;
+}
+
+.vuiGrid--alignItemsStretch {
+  align-items: stretch;
+}
+
+.vuiGrid--alignItemsBaseline {
+  align-items: baseline;
+}
+
+// Alignment - justify-items
+.vuiGrid--justifyItemsStart {
+  justify-items: start;
+}
+
+.vuiGrid--justifyItemsEnd {
+  justify-items: end;
+}
+
+.vuiGrid--justifyItemsCenter {
+  justify-items: center;
+}
+
+.vuiGrid--justifyItemsStretch {
+  justify-items: stretch;
+}
+
+// Alignment - align-content
+.vuiGrid--alignContentStart {
+  align-content: start;
+}
+
+.vuiGrid--alignContentEnd {
+  align-content: end;
+}
+
+.vuiGrid--alignContentCenter {
+  align-content: center;
+}
+
+.vuiGrid--alignContentStretch {
+  align-content: stretch;
+}
+
+.vuiGrid--alignContentSpaceAround {
+  align-content: space-around;
+}
+
+.vuiGrid--alignContentSpaceBetween {
+  align-content: space-between;
+}
+
+.vuiGrid--alignContentSpaceEvenly {
+  align-content: space-evenly;
+}
+
+// Alignment - justify-content
+.vuiGrid--justifyContentStart {
+  justify-content: start;
+}
+
+.vuiGrid--justifyContentEnd {
+  justify-content: end;
+}
+
+.vuiGrid--justifyContentCenter {
+  justify-content: center;
+}
+
+.vuiGrid--justifyContentStretch {
+  justify-content: stretch;
+}
+
+.vuiGrid--justifyContentSpaceAround {
+  justify-content: space-around;
+}
+
+.vuiGrid--justifyContentSpaceBetween {
+  justify-content: space-between;
+}
+
+.vuiGrid--justifyContentSpaceEvenly {
+  justify-content: space-evenly;
+}
+
+// Display options
+.vuiGrid--inline {
+  display: inline-grid;
+}
+
+.vuiGrid--fullWidth {
+  width: 100%;
+}
+
+// GridItem styles
+.vuiGridItem {
+  // Base styles if needed
+}
+
+// GridItem column span helpers
+@for $i from 1 through 12 {
+  .vuiGridItem--colSpan#{$i} {
+    grid-column: span $i;
+  }
+}
+
+// GridItem row span helpers
+@for $i from 1 through 12 {
+  .vuiGridItem--rowSpan#{$i} {
+    grid-row: span $i;
+  }
+}
+
+// GridItem position helpers - column start/end
+@for $i from 1 through 12 {
+  .vuiGridItem--colStart#{$i} {
+    grid-column-start: $i;
+  }
+
+  .vuiGridItem--colEnd#{$i} {
+    grid-column-end: $i;
+  }
+}
+
+// GridItem position helpers - row start/end
+@for $i from 1 through 12 {
+  .vuiGridItem--rowStart#{$i} {
+    grid-row-start: $i;
+  }
+
+  .vuiGridItem--rowEnd#{$i} {
+    grid-row-end: $i;
+  }
+}
+
+// GridItem alignment - align-self
+.vuiGridItem--alignSelfStart {
+  align-self: start;
+}
+
+.vuiGridItem--alignSelfEnd {
+  align-self: end;
+}
+
+.vuiGridItem--alignSelfCenter {
+  align-self: center;
+}
+
+.vuiGridItem--alignSelfStretch {
+  align-self: stretch;
+}
+
+.vuiGridItem--alignSelfBaseline {
+  align-self: baseline;
+}
+
+// GridItem alignment - justify-self
+.vuiGridItem--justifySelfStart {
+  justify-self: start;
+}
+
+.vuiGridItem--justifySelfEnd {
+  justify-self: end;
+}
+
+.vuiGridItem--justifySelfCenter {
+  justify-self: center;
+}
+
+.vuiGridItem--justifySelfStretch {
+  justify-self: stretch;
+}
+
+// Responsive grid item column span using CSS custom properties
+.vuiGridItem--responsive {
+  // Small (applies from 0px up - default/mobile-first)
+  grid-column: var(--grid-item-colSpan-sm);
+
+  @container (width > 500px) {
+    grid-column: var(--grid-item-colSpan-md);
+  }
+
+  @container (width > 800px) {
+    grid-column: var(--grid-item-colSpan-lg);
+  }
+}

package/lib/components/grid/types.d.ts

@@ -0,0 +1,6 @@
+export type ResponsiveGridValue<T> = T | {
+    default?: T;
+    sm?: T;
+    md?: T;
+    lg?: T;
+};

package/lib/components/grid/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/index.d.ts

@@ -31,6 +31,8 @@ import { VuiFlexItem } from "./flex/FlexItem";
 import { RadioButtonConfig, VuiCheckbox, VuiItemsInput, VuiLabel, VuiNumberInput, VuiRadioButton, VuiSelect, VuiSuperRadioGroup, VuiTextInput, VuiTextArea, VuiPasswordInput } from "./form";
 import { VuiFormGroup } from "./formGroup/FormGroup";
 import { VuiGrid } from "./grid/Grid";
+import { VuiGridItem } from "./grid/GridItem";
+import { VuiSimpleGrid } from "./grid/SimpleGrid";
 import { VuiHorizontalRule } from "./horizontalRule/HorizontalRule";
 import { VuiIcon } from "./icon/Icon";
 import { ICON_COLOR, ICON_SIZE, ICON_TYPE } from "./icon/types";
@@ -90,4 +92,4 @@ import { VuiTopicButton } from "./topicButton/TopicButton";
 import { copyToClipboard } from "../utils/copyToClipboard";
 import { toRgb, toRgba } from "./context/Theme";
 export type { AnchorSide, AppContentPadding, ButtonColor, CalloutColor, ChatLanguage, ChatStyle, ChatTurn, CodeLanguage, InfoListType, InfoTableColumnAlign, InfoTableRow, InfoTableRowType, LinkProps, MenuItem, OptionListItem, Pagination, RadioButtonConfig, SearchResult, SearchSuggestion, Sections, SectionItem, Stat, StepStatus, StepSize, TabSize, Tree, TreeItem, VuiStepProps };
-export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, ICON_COLOR, ICON_SIZE, ICON_TYPE, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiBadge, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiCode, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoMenu, VuiInfoTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSpacer, VuiSpinner, VuiStatList, VuiStatus, VuiSteps, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };
+export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, ICON_COLOR, ICON_SIZE, ICON_TYPE, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiBadge, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiCode, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiSimpleGrid, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoMenu, VuiInfoTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSpacer, VuiSpinner, VuiStatList, VuiStatus, VuiSteps, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };

package/lib/components/index.js

@@ -27,6 +27,8 @@ import { VuiFlexItem } from "./flex/FlexItem";
 import { VuiCheckbox, VuiItemsInput, VuiLabel, VuiNumberInput, VuiRadioButton, VuiSelect, VuiSuperRadioGroup, VuiTextInput, VuiTextArea, VuiPasswordInput } from "./form";
 import { VuiFormGroup } from "./formGroup/FormGroup";
 import { VuiGrid } from "./grid/Grid";
+import { VuiGridItem } from "./grid/GridItem";
+import { VuiSimpleGrid } from "./grid/SimpleGrid";
 import { VuiHorizontalRule } from "./horizontalRule/HorizontalRule";
 import { VuiIcon } from "./icon/Icon";
 import { ICON_COLOR, ICON_SIZE, ICON_TYPE } from "./icon/types";
@@ -82,4 +84,4 @@ import { VuiTooltip } from "./tooltip/Tooltip";
 import { VuiTopicButton } from "./topicButton/TopicButton";
 import { copyToClipboard } from "../utils/copyToClipboard";
 import { toRgb, toRgba } from "./context/Theme";
-export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, ICON_COLOR, ICON_SIZE, ICON_TYPE, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiBadge, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiCode, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoMenu, VuiInfoTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSpacer, VuiSpinner, VuiStatList, VuiStatus, VuiSteps, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };
+export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, ICON_COLOR, ICON_SIZE, ICON_TYPE, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiBadge, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiCode, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiSimpleGrid, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoMenu, VuiInfoTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSpacer, VuiSpinner, VuiStatList, VuiStatus, VuiSteps, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };

package/lib/components/panel/Panel.d.ts

@@ -7,6 +7,8 @@ type Props = {
     background?: string;
     backgroundScale?: "width" | "height";
     backgroundMaxSize?: string;
+    fullHeight?: boolean;
+    fullWidth?: boolean;
 };
-export declare const VuiPanel: ({ icon, children, actions, background, backgroundScale, align, color, backgroundMaxSize }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiPanel: ({ icon, children, actions, background, backgroundScale, align, color, backgroundMaxSize, fullHeight, fullWidth, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/panel/Panel.js

@@ -1,12 +1,27 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
-export const VuiPanel = ({ icon, children, actions, background, backgroundScale = "height", align = "top", color = "default", backgroundMaxSize }) => {
-    const classes = classNames("vuiPanel", `vuiPanel--${color}`, `vuiPanel--align-${align}`);
+export const VuiPanel = (_a) => {
+    var { icon, children, actions, background, backgroundScale = "height", align = "top", color = "default", backgroundMaxSize, fullHeight, fullWidth } = _a, rest = __rest(_a, ["icon", "children", "actions", "background", "backgroundScale", "align", "color", "backgroundMaxSize", "fullHeight", "fullWidth"]);
+    const classes = classNames("vuiPanel", `vuiPanel--${color}`, `vuiPanel--align-${align}`, {
+        "vuiPanel--fullHeight": fullHeight,
+        "vuiPanel--fullWidth": fullWidth
+    });
     const style = backgroundMaxSize !== undefined
         ? {
             maxWidth: backgroundScale === "width" ? backgroundMaxSize : undefined,
             maxHeight: backgroundScale === "height" ? backgroundMaxSize : undefined
         }
         : {};
-    return (_jsxs("div", Object.assign({ className: classes }, { children: [background && (_jsx("img", { className: `vuiPanelBackground vuiBackgroundScale--${backgroundScale}`, src: background, style: style })), icon && _jsx("div", Object.assign({ className: "vuiPanelIcon" }, { children: icon })), children && _jsx("div", Object.assign({ className: "vuiPanelContent" }, { children: children })), actions && _jsx("div", Object.assign({ className: "vuiPanelActions" }, { children: actions }))] })));
+    return (_jsxs("div", Object.assign({ className: classes }, rest, { children: [background && (_jsx("img", { className: `vuiPanelBackground vuiBackgroundScale--${backgroundScale}`, src: background, style: style })), icon && _jsx("div", Object.assign({ className: "vuiPanelIcon" }, { children: icon })), children && _jsx("div", Object.assign({ className: "vuiPanelContent" }, { children: children })), actions && _jsx("div", Object.assign({ className: "vuiPanelActions" }, { children: actions }))] })));
 };

package/lib/components/panel/_index.scss

@@ -26,6 +26,14 @@
   background-color: transparent;
 }
 
+.vuiPanel--fullHeight {
+  height: 100%;
+}
+
+.vuiPanel--fullWidth {
+  width: 100%;
+}
+
 .vuiPanelIcon {
   margin-bottom: $sizeS;
 }

package/lib/styles/index.css

@@ -1139,6 +1139,10 @@ fieldset {
   flex-grow: 1;
 }
 
+.vuiCard__body--scrollable {
+  overflow-y: auto;
+}
+
 .vuiCard__footer {
   display: flex;
   flex-direction: column;
@@ -2806,6 +2810,458 @@ h2.react-datepicker__current-month {
     grid-template-columns: 1fr;
   }
 }
+.vuiGrid--responsive {
+  grid-template-columns: var(--grid-template-sm);
+}
+@container (width > 500px) {
+  .vuiGrid--responsive {
+    grid-template-columns: var(--grid-template-md);
+  }
+}
+@container (width > 800px) {
+  .vuiGrid--responsive {
+    grid-template-columns: var(--grid-template-lg);
+  }
+}
+
+.vuiGrid--alignItemsStart {
+  align-items: start;
+}
+
+.vuiGrid--alignItemsEnd {
+  align-items: end;
+}
+
+.vuiGrid--alignItemsCenter {
+  align-items: center;
+}
+
+.vuiGrid--alignItemsStretch {
+  align-items: stretch;
+}
+
+.vuiGrid--alignItemsBaseline {
+  align-items: baseline;
+}
+
+.vuiGrid--justifyItemsStart {
+  justify-items: start;
+}
+
+.vuiGrid--justifyItemsEnd {
+  justify-items: end;
+}
+
+.vuiGrid--justifyItemsCenter {
+  justify-items: center;
+}
+
+.vuiGrid--justifyItemsStretch {
+  justify-items: stretch;
+}
+
+.vuiGrid--alignContentStart {
+  align-content: start;
+}
+
+.vuiGrid--alignContentEnd {
+  align-content: end;
+}
+
+.vuiGrid--alignContentCenter {
+  align-content: center;
+}
+
+.vuiGrid--alignContentStretch {
+  align-content: stretch;
+}
+
+.vuiGrid--alignContentSpaceAround {
+  align-content: space-around;
+}
+
+.vuiGrid--alignContentSpaceBetween {
+  align-content: space-between;
+}
+
+.vuiGrid--alignContentSpaceEvenly {
+  align-content: space-evenly;
+}
+
+.vuiGrid--justifyContentStart {
+  justify-content: start;
+}
+
+.vuiGrid--justifyContentEnd {
+  justify-content: end;
+}
+
+.vuiGrid--justifyContentCenter {
+  justify-content: center;
+}
+
+.vuiGrid--justifyContentStretch {
+  justify-content: stretch;
+}
+
+.vuiGrid--justifyContentSpaceAround {
+  justify-content: space-around;
+}
+
+.vuiGrid--justifyContentSpaceBetween {
+  justify-content: space-between;
+}
+
+.vuiGrid--justifyContentSpaceEvenly {
+  justify-content: space-evenly;
+}
+
+.vuiGrid--inline {
+  display: inline-grid;
+}
+
+.vuiGrid--fullWidth {
+  width: 100%;
+}
+
+.vuiGridItem--colSpan1 {
+  grid-column: span 1;
+}
+
+.vuiGridItem--colSpan2 {
+  grid-column: span 2;
+}
+
+.vuiGridItem--colSpan3 {
+  grid-column: span 3;
+}
+
+.vuiGridItem--colSpan4 {
+  grid-column: span 4;
+}
+
+.vuiGridItem--colSpan5 {
+  grid-column: span 5;
+}
+
+.vuiGridItem--colSpan6 {
+  grid-column: span 6;
+}
+
+.vuiGridItem--colSpan7 {
+  grid-column: span 7;
+}
+
+.vuiGridItem--colSpan8 {
+  grid-column: span 8;
+}
+
+.vuiGridItem--colSpan9 {
+  grid-column: span 9;
+}
+
+.vuiGridItem--colSpan10 {
+  grid-column: span 10;
+}
+
+.vuiGridItem--colSpan11 {
+  grid-column: span 11;
+}
+
+.vuiGridItem--colSpan12 {
+  grid-column: span 12;
+}
+
+.vuiGridItem--rowSpan1 {
+  grid-row: span 1;
+}
+
+.vuiGridItem--rowSpan2 {
+  grid-row: span 2;
+}
+
+.vuiGridItem--rowSpan3 {
+  grid-row: span 3;
+}
+
+.vuiGridItem--rowSpan4 {
+  grid-row: span 4;
+}
+
+.vuiGridItem--rowSpan5 {
+  grid-row: span 5;
+}
+
+.vuiGridItem--rowSpan6 {
+  grid-row: span 6;
+}
+
+.vuiGridItem--rowSpan7 {
+  grid-row: span 7;
+}
+
+.vuiGridItem--rowSpan8 {
+  grid-row: span 8;
+}
+
+.vuiGridItem--rowSpan9 {
+  grid-row: span 9;
+}
+
+.vuiGridItem--rowSpan10 {
+  grid-row: span 10;
+}
+
+.vuiGridItem--rowSpan11 {
+  grid-row: span 11;
+}
+
+.vuiGridItem--rowSpan12 {
+  grid-row: span 12;
+}
+
+.vuiGridItem--colStart1 {
+  grid-column-start: 1;
+}
+
+.vuiGridItem--colEnd1 {
+  grid-column-end: 1;
+}
+
+.vuiGridItem--colStart2 {
+  grid-column-start: 2;
+}
+
+.vuiGridItem--colEnd2 {
+  grid-column-end: 2;
+}
+
+.vuiGridItem--colStart3 {
+  grid-column-start: 3;
+}
+
+.vuiGridItem--colEnd3 {
+  grid-column-end: 3;
+}
+
+.vuiGridItem--colStart4 {
+  grid-column-start: 4;
+}
+
+.vuiGridItem--colEnd4 {
+  grid-column-end: 4;
+}
+
+.vuiGridItem--colStart5 {
+  grid-column-start: 5;
+}
+
+.vuiGridItem--colEnd5 {
+  grid-column-end: 5;
+}
+
+.vuiGridItem--colStart6 {
+  grid-column-start: 6;
+}
+
+.vuiGridItem--colEnd6 {
+  grid-column-end: 6;
+}
+
+.vuiGridItem--colStart7 {
+  grid-column-start: 7;
+}
+
+.vuiGridItem--colEnd7 {
+  grid-column-end: 7;
+}
+
+.vuiGridItem--colStart8 {
+  grid-column-start: 8;
+}
+
+.vuiGridItem--colEnd8 {
+  grid-column-end: 8;
+}
+
+.vuiGridItem--colStart9 {
+  grid-column-start: 9;
+}
+
+.vuiGridItem--colEnd9 {
+  grid-column-end: 9;
+}
+
+.vuiGridItem--colStart10 {
+  grid-column-start: 10;
+}
+
+.vuiGridItem--colEnd10 {
+  grid-column-end: 10;
+}
+
+.vuiGridItem--colStart11 {
+  grid-column-start: 11;
+}
+
+.vuiGridItem--colEnd11 {
+  grid-column-end: 11;
+}
+
+.vuiGridItem--colStart12 {
+  grid-column-start: 12;
+}
+
+.vuiGridItem--colEnd12 {
+  grid-column-end: 12;
+}
+
+.vuiGridItem--rowStart1 {
+  grid-row-start: 1;
+}
+
+.vuiGridItem--rowEnd1 {
+  grid-row-end: 1;
+}
+
+.vuiGridItem--rowStart2 {
+  grid-row-start: 2;
+}
+
+.vuiGridItem--rowEnd2 {
+  grid-row-end: 2;
+}
+
+.vuiGridItem--rowStart3 {
+  grid-row-start: 3;
+}
+
+.vuiGridItem--rowEnd3 {
+  grid-row-end: 3;
+}
+
+.vuiGridItem--rowStart4 {
+  grid-row-start: 4;
+}
+
+.vuiGridItem--rowEnd4 {
+  grid-row-end: 4;
+}
+
+.vuiGridItem--rowStart5 {
+  grid-row-start: 5;
+}
+
+.vuiGridItem--rowEnd5 {
+  grid-row-end: 5;
+}
+
+.vuiGridItem--rowStart6 {
+  grid-row-start: 6;
+}
+
+.vuiGridItem--rowEnd6 {
+  grid-row-end: 6;
+}
+
+.vuiGridItem--rowStart7 {
+  grid-row-start: 7;
+}
+
+.vuiGridItem--rowEnd7 {
+  grid-row-end: 7;
+}
+
+.vuiGridItem--rowStart8 {
+  grid-row-start: 8;
+}
+
+.vuiGridItem--rowEnd8 {
+  grid-row-end: 8;
+}
+
+.vuiGridItem--rowStart9 {
+  grid-row-start: 9;
+}
+
+.vuiGridItem--rowEnd9 {
+  grid-row-end: 9;
+}
+
+.vuiGridItem--rowStart10 {
+  grid-row-start: 10;
+}
+
+.vuiGridItem--rowEnd10 {
+  grid-row-end: 10;
+}
+
+.vuiGridItem--rowStart11 {
+  grid-row-start: 11;
+}
+
+.vuiGridItem--rowEnd11 {
+  grid-row-end: 11;
+}
+
+.vuiGridItem--rowStart12 {
+  grid-row-start: 12;
+}
+
+.vuiGridItem--rowEnd12 {
+  grid-row-end: 12;
+}
+
+.vuiGridItem--alignSelfStart {
+  align-self: start;
+}
+
+.vuiGridItem--alignSelfEnd {
+  align-self: end;
+}
+
+.vuiGridItem--alignSelfCenter {
+  align-self: center;
+}
+
+.vuiGridItem--alignSelfStretch {
+  align-self: stretch;
+}
+
+.vuiGridItem--alignSelfBaseline {
+  align-self: baseline;
+}
+
+.vuiGridItem--justifySelfStart {
+  justify-self: start;
+}
+
+.vuiGridItem--justifySelfEnd {
+  justify-self: end;
+}
+
+.vuiGridItem--justifySelfCenter {
+  justify-self: center;
+}
+
+.vuiGridItem--justifySelfStretch {
+  justify-self: stretch;
+}
+
+.vuiGridItem--responsive {
+  grid-column: var(--grid-item-colSpan-sm);
+}
+@container (width > 500px) {
+  .vuiGridItem--responsive {
+    grid-column: var(--grid-item-colSpan-md);
+  }
+}
+@container (width > 800px) {
+  .vuiGridItem--responsive {
+    grid-column: var(--grid-item-colSpan-lg);
+  }
+}
+
 .vuiHorizontalRule {
   border-top: none;
   border-left: none;
@@ -3557,6 +4013,14 @@ h2.react-datepicker__current-month {
   background-color: transparent;
 }
 
+.vuiPanel--fullHeight {
+  height: 100%;
+}
+
+.vuiPanel--fullWidth {
+  width: 100%;
+}
+
 .vuiPanelIcon {
   margin-bottom: 12px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectara/vectara-ui",
-  "version": "11.2.1",
+  "version": "12.0.0",
   "homepage": "./",
   "description": "Vectara's design system, codified as a React and Sass component library",
   "author": "Vectara",