@alto-avios/alto-ui 2.3.3 → 2.4.0

package/dist/components/Badge/Badge.js

@@ -2,17 +2,17 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { c as cva } from "../../index-Bi3v_EjJ.js";
 import { Icon } from "../Icon/Icon.js";
 import { focusStyleVariants } from "../../utils/focus/focusStyles.js";
-import '../../assets/Badge.css';const badge$1 = "_badge_g5nmg_1";
-const md = "_md_g5nmg_16";
-const sm = "_sm_g5nmg_25";
-const neutral = "_neutral_g5nmg_33";
-const critical = "_critical_g5nmg_37";
-const warning = "_warning_g5nmg_41";
-const caution = "_caution_g5nmg_45";
-const success = "_success_g5nmg_49";
-const info = "_info_g5nmg_53";
-const brand = "_brand_g5nmg_57";
-const sale = "_sale_g5nmg_61";
+import '../../assets/Badge.css';const badge$1 = "_badge_6jwot_1";
+const md = "_md_6jwot_16";
+const sm = "_sm_6jwot_25";
+const neutral = "_neutral_6jwot_33";
+const critical = "_critical_6jwot_37";
+const warning = "_warning_6jwot_41";
+const caution = "_caution_6jwot_45";
+const success = "_success_6jwot_49";
+const info = "_info_6jwot_53";
+const brand = "_brand_6jwot_57";
+const sale = "_sale_6jwot_61";
 const styles = {
   badge: badge$1,
   md,

package/dist/components/Box/Box.d.ts

@@ -8,12 +8,12 @@ export interface BoxProps extends BackgroundVariants, FlexVariants, BorderVarian
     /**
      * The HTML element to render the Box as.
      */
-    as?: "div" | "article";
+    as?: 'div' | 'article';
     /**
      * The width of the Box.
      * Accepts any valid CSS unit or "full"
      */
-    width?: "full" | string;
+    width?: 'full' | string;
     /**
      * The maximum width of the Box.
      * Accepts any valid CSS unit.

package/dist/components/Button/Button.js

@@ -5,33 +5,33 @@ import { Button as Button$1 } from "react-aria-components";
 import { Icon } from "../Icon/Icon.js";
 import LoadingSpinner from "../LoadingSpinner/LoadingSpinner.js";
 import { focusStyleVariants } from "../../utils/focus/focusStyles.js";
-import '../../assets/Button.css';const button$1 = "_button_1fapr_1";
-const sm = "_sm_1fapr_25";
-const md = "_md_1fapr_30";
-const lg = "_lg_1fapr_35";
-const accentPrimary = "_accentPrimary_1fapr_44";
-const accentSecondary = "_accentSecondary_1fapr_67";
-const accentTertiary = "_accentTertiary_1fapr_98";
-const accentQuaternary = "_accentQuaternary_1fapr_127";
-const criticalPrimary = "_criticalPrimary_1fapr_155";
-const criticalSecondary = "_criticalSecondary_1fapr_183";
-const criticalTertiary = "_criticalTertiary_1fapr_214";
-const criticalQuaternary = "_criticalQuaternary_1fapr_243";
-const neutralPrimary = "_neutralPrimary_1fapr_272";
-const neutralSecondary = "_neutralSecondary_1fapr_300";
-const neutralTertiary = "_neutralTertiary_1fapr_329";
-const neutralQuaternary = "_neutralQuaternary_1fapr_358";
-const whitePrimary = "_whitePrimary_1fapr_388";
-const whiteSecondary = "_whiteSecondary_1fapr_417";
-const whiteTertiary = "_whiteTertiary_1fapr_447";
-const whiteQuaternary = "_whiteQuaternary_1fapr_476";
+import '../../assets/Button.css';const button$1 = "_button_fkkc6_1";
+const sm = "_sm_fkkc6_25";
+const md = "_md_fkkc6_30";
+const lg = "_lg_fkkc6_35";
+const accentPrimary = "_accentPrimary_fkkc6_44";
+const accentSecondary = "_accentSecondary_fkkc6_67";
+const accentTertiary = "_accentTertiary_fkkc6_100";
+const accentQuaternary = "_accentQuaternary_fkkc6_129";
+const criticalPrimary = "_criticalPrimary_fkkc6_157";
+const criticalSecondary = "_criticalSecondary_fkkc6_185";
+const criticalTertiary = "_criticalTertiary_fkkc6_218";
+const criticalQuaternary = "_criticalQuaternary_fkkc6_247";
+const neutralPrimary = "_neutralPrimary_fkkc6_276";
+const neutralSecondary = "_neutralSecondary_fkkc6_304";
+const neutralTertiary = "_neutralTertiary_fkkc6_335";
+const neutralQuaternary = "_neutralQuaternary_fkkc6_364";
+const whitePrimary = "_whitePrimary_fkkc6_394";
+const whiteSecondary = "_whiteSecondary_fkkc6_423";
+const whiteTertiary = "_whiteTertiary_fkkc6_454";
+const whiteQuaternary = "_whiteQuaternary_fkkc6_483";
 const styles = {
   button: button$1,
   sm,
   md,
   lg,
   accentPrimary,
-  "local-class": "_local-class_1fapr_61",
+  "local-class": "_local-class_fkkc6_61",
   accentSecondary,
   accentTertiary,
   accentQuaternary,
@@ -47,8 +47,8 @@ const styles = {
   whiteSecondary,
   whiteTertiary,
   whiteQuaternary,
-  "fa-spinner-third": "_fa-spinner-third_1fapr_507",
-  "icon-wrapper": "_icon-wrapper_1fapr_512"
+  "fa-spinner-third": "_fa-spinner-third_fkkc6_514",
+  "icon-wrapper": "_icon-wrapper_fkkc6_519"
 };
 const button = cva(styles.button, {
   variants: {

package/dist/components/ButtonGroup/ButtonGroup.js

@@ -1,14 +1,14 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
 import { c as cva } from "../../index-Bi3v_EjJ.js";
-import '../../assets/ButtonGroup.css';const buttonGroup = "_buttonGroup_1tzc6_2";
-const alignStart = "_alignStart_1tzc6_11";
-const alignCenter = "_alignCenter_1tzc6_15";
-const alignEnd = "_alignEnd_1tzc6_19";
-const alignJustify = "_alignJustify_1tzc6_23";
-const alignSplit = "_alignSplit_1tzc6_28";
-const alignStack = "_alignStack_1tzc6_41";
-const alignStackFlip = "_alignStackFlip_1tzc6_46";
+import '../../assets/ButtonGroup.css';const buttonGroup = "_buttonGroup_zcnod_2";
+const alignStart = "_alignStart_zcnod_10";
+const alignCenter = "_alignCenter_zcnod_14";
+const alignEnd = "_alignEnd_zcnod_18";
+const alignJustify = "_alignJustify_zcnod_22";
+const alignSplit = "_alignSplit_zcnod_26";
+const alignStack = "_alignStack_zcnod_39";
+const alignStackFlip = "_alignStackFlip_zcnod_44";
 const styles = {
   buttonGroup,
   alignStart,

package/dist/components/CardSection/CardSection.js

@@ -1,13 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import { c as cva } from "../../index-Bi3v_EjJ.js";
 import { forwardRef } from "react";
-import '../../assets/CardSection.css';const cardSection$1 = "_cardSection_97jhf_1";
-const cardContainer = "_cardContainer_97jhf_11";
-const cardGrid = "_cardGrid_97jhf_23";
-const contentCell = "_contentCell_97jhf_33";
-const contentBox = "_contentBox_97jhf_40";
-const mediaCell = "_mediaCell_97jhf_51";
-const isReversed = "_isReversed_97jhf_65";
+import '../../assets/CardSection.css';const cardSection$1 = "_cardSection_1qtaq_1";
+const cardContainer = "_cardContainer_1qtaq_12";
+const cardGrid = "_cardGrid_1qtaq_24";
+const contentCell = "_contentCell_1qtaq_33";
+const contentBox = "_contentBox_1qtaq_40";
+const mediaCell = "_mediaCell_1qtaq_51";
+const isReversed = "_isReversed_1qtaq_65";
 const styles = {
   cardSection: cardSection$1,
   cardContainer,

package/dist/components/Checkbox/Checkbox.d.ts

@@ -30,7 +30,7 @@ export interface CheckboxProps extends AriaCheckboxProps {
      * or invalid via ARIA.
      * @default 'aria'
      */
-    validationBehavior?: "native" | "aria";
+    validationBehavior?: 'native' | 'aria';
     description?: string;
     children?: React.ReactNode;
     focusStyle?: 'default' | 'white';

package/dist/components/Checkbox/Checkbox.js

@@ -1,16 +1,18 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { Checkbox as Checkbox$1 } from "react-aria-components";
 import { c as cva } from "../../index-Bi3v_EjJ.js";
 import FieldDescription from "../FieldDescription/FieldDescription.js";
-import '../../assets/Checkbox.css';const checkbox$1 = "_checkbox_1xmgx_2";
-const checkboxLabel = "_checkboxLabel_1xmgx_19";
-const checkboxDescription = "_checkboxDescription_1xmgx_23";
-const checkboxSvgWrapper = "_checkboxSvgWrapper_1xmgx_27";
-const svg = "_svg_1xmgx_41";
-const defaultFocus = "_defaultFocus_1xmgx_69";
-const whiteFocus = "_whiteFocus_1xmgx_73";
+import '../../assets/Checkbox.css';const checkbox$1 = "_checkbox_1twm2_2";
+const checkboxContainer = "_checkboxContainer_1twm2_19";
+const checkboxLabel = "_checkboxLabel_1twm2_24";
+const checkboxDescription = "_checkboxDescription_1twm2_28";
+const checkboxSvgWrapper = "_checkboxSvgWrapper_1twm2_32";
+const svg = "_svg_1twm2_46";
+const defaultFocus = "_defaultFocus_1twm2_74";
+const whiteFocus = "_whiteFocus_1twm2_78";
 const styles = {
   checkbox: checkbox$1,
+  checkboxContainer,
   checkboxLabel,
   checkboxDescription,
   checkboxSvgWrapper,
@@ -48,7 +50,7 @@ const Checkbox = ({
   focusStyle = "default",
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs("div", { className: styles.checkboxContainer, children: [
     /* @__PURE__ */ jsx(Checkbox$1, { className: checkbox({
       focusStyle
     }), isIndeterminate, defaultSelected, isSelected, value, isDisabled, isReadOnly, isRequired, isInvalid, validate, autoFocus, name, validationBehavior, ...props, children: ({

package/dist/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Checkbox.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/CheckboxGroup/CheckboxGroup.d.ts

@@ -2,28 +2,28 @@ import { default as React } from 'react';
 import { CheckboxGroupProps as AriaCheckboxGroupProps, ValidationResult } from 'react-aria-components';
 export interface CheckboxGroupProps extends AriaCheckboxGroupProps {
     /**
-    * The field label.
-    */
+     * The field label.
+     */
     label?: string;
     /**
-    * The children to render.
-    */
+     * The children to render.
+     */
     children: React.ReactNode;
     /**
-    * The descriptive text located underneath the checkbox group.
-    */
+     * The descriptive text located underneath the checkbox group.
+     */
     description?: string;
     /**
-    * The error message to display when the input value is invalid.
-    */
+     * The error message to display when the input value is invalid.
+     */
     errorMessage?: string | ((validation: ValidationResult) => string);
     /**
-    * Whether the input is disabled.
-    */
+     * Whether the input is disabled.
+     */
     isDisabled?: boolean;
     /**
-    * Whether the input value is invalid.
-    */
+     * Whether the input value is invalid.
+     */
     isInvalid?: boolean;
 }
 export declare const CheckboxGroup: ({ label, children, description, errorMessage, isDisabled, isInvalid, ...props }: CheckboxGroupProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/CheckboxGroup/CheckboxGroup.js

@@ -1,9 +1,9 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { CheckboxGroup as CheckboxGroup$1 } from "react-aria-components";
 import { FieldHeader } from "../FieldHeader/FieldHeader.js";
-import '../../assets/CheckboxGroup.css';const checkboxGroup = "_checkboxGroup_cykce_1";
-const errorMessage = "_errorMessage_cykce_8";
-const description = "_description_cykce_13";
+import '../../assets/CheckboxGroup.css';const checkboxGroup = "_checkboxGroup_1vs5o_1";
+const errorMessage = "_errorMessage_1vs5o_8";
+const description = "_description_1vs5o_13";
 const styles = {
   checkboxGroup,
   errorMessage,

package/dist/components/ClearFieldButton/ClearFieldButton.d.ts

@@ -1,7 +1,7 @@
 import { ButtonProps } from '../Button/Button';
 import { IconSize } from '../Icon/Icon';
 export type ClearFieldButtonButtonSize = 'lg' | 'md' | 'sm';
-export interface ClearFieldButtonProps extends Omit<ButtonProps, "$styleText"> {
+export interface ClearFieldButtonProps extends Omit<ButtonProps, '$styleText'> {
     slot?: string;
     iconSize?: IconSize;
     className?: string;

package/dist/components/ClearFieldButton/ClearFieldButton.js

@@ -3,10 +3,10 @@ import { c as cva } from "../../index-Bi3v_EjJ.js";
 import { Button } from "react-aria-components";
 import { Icon } from "../Icon/Icon.js";
 import { focusStyleVariants } from "../../utils/focus/focusStyles.js";
-import '../../assets/ClearFieldButton.css';const clearFieldButton$1 = "_clearFieldButton_1wxbm_1";
-const sm = "_sm_1wxbm_18";
-const md = "_md_1wxbm_23";
-const lg = "_lg_1wxbm_28";
+import '../../assets/ClearFieldButton.css';const clearFieldButton$1 = "_clearFieldButton_hkevp_1";
+const sm = "_sm_hkevp_18";
+const md = "_md_hkevp_23";
+const lg = "_lg_hkevp_28";
 const styles = {
   clearFieldButton: clearFieldButton$1,
   sm,

package/dist/components/DateField/DateField.js

@@ -1,9 +1,9 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { DateField as DateField$1, DateInput, DateSegment } from "react-aria-components";
 import { FieldHeader } from "../FieldHeader/FieldHeader.js";
-import '../../assets/DateField.css';const dateField = "_dateField_197xm_1";
-const dateInput = "_dateInput_197xm_5";
-const dateSegment = "_dateSegment_197xm_48";
+import '../../assets/DateField.css';const dateField = "_dateField_1mc0h_1";
+const dateInput = "_dateInput_1mc0h_5";
+const dateSegment = "_dateSegment_1mc0h_48";
 const styles = {
   dateField,
   dateInput,

package/dist/components/DestinationHeading/DestinationHeading.d.ts

@@ -1,5 +1,5 @@
 import { HeadingProps } from '../Heading/Heading';
-export interface DestinationHeadingProps extends Omit<HeadingProps, "children"> {
+export interface DestinationHeadingProps extends Omit<HeadingProps, 'children'> {
     from: string;
     to: string;
     /**

package/dist/components/Eyebrow/Eyebrow.js

@@ -1,10 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import { c as cva } from "../../index-Bi3v_EjJ.js";
-import '../../assets/Eyebrow.css';const eyebrow$1 = "_eyebrow_c96e1_1";
-const inspiration = "_inspiration_c96e1_15";
-const collect = "_collect_c96e1_19";
-const spend = "_spend_c96e1_23";
-const activate = "_activate_c96e1_28";
+import '../../assets/Eyebrow.css';const eyebrow$1 = "_eyebrow_rc11b_1";
+const inspiration = "_inspiration_rc11b_16";
+const collect = "_collect_rc11b_20";
+const spend = "_spend_rc11b_24";
+const activate = "_activate_rc11b_29";
 const styles = {
   eyebrow: eyebrow$1,
   inspiration,

package/dist/components/FieldDescription/FieldDescription.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { Text } from "react-aria-components";
-import '../../assets/FieldDescription.css';const fieldDescription = "_fieldDescription_2cs9c_1";
+import '../../assets/FieldDescription.css';const fieldDescription = "_fieldDescription_18783_1";
 const styles = {
   fieldDescription
 };

package/dist/components/FieldError/FieldError.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { FieldError as FieldError$1 } from "react-aria-components";
 import { Icon } from "../Icon/Icon.js";
-import '../../assets/FieldError.css';const fieldError = "_fieldError_c0ugd_1";
+import '../../assets/FieldError.css';const fieldError = "_fieldError_1tsix_1";
 const styles = {
   fieldError
 };

package/dist/components/FieldHeader/FieldHeader.d.ts

@@ -5,6 +5,7 @@ export interface FieldHeaderProps {
     errorMessage?: string | ((validation: ValidationResult) => string);
     isInvalid?: boolean;
     isRequired?: boolean;
+    labelFor?: string;
 }
-export declare const FieldHeader: ({ label, description, isInvalid, isRequired, errorMessage, }: FieldHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FieldHeader: ({ label, description, isInvalid, isRequired, errorMessage, labelFor, }: FieldHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export default FieldHeader;

package/dist/components/FieldHeader/FieldHeader.js

@@ -2,21 +2,22 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import FieldDescription from "../FieldDescription/FieldDescription.js";
 import { FieldError } from "../FieldError/FieldError.js";
 import { FieldLabel } from "../FieldLabel/FieldLabel.js";
-import '../../assets/FieldHeader.css';const fieldHeader = "_fieldHeader_t60vq_1";
+import '../../assets/FieldHeader.css';const fieldHeader = "_fieldHeader_3rjlj_1";
 const styles = {
   fieldHeader,
-  "label-container": "_label-container_t60vq_12"
+  "label-container": "_label-container_3rjlj_12"
 };
 const FieldHeader = ({
   label,
   description,
   isInvalid,
   isRequired,
-  errorMessage
+  errorMessage,
+  labelFor
 }) => {
   return /* @__PURE__ */ jsxs("div", { className: styles.fieldHeader, "data-invalid": isInvalid ? true : void 0, children: [
     /* @__PURE__ */ jsxs("div", { className: styles["label-container"], children: [
-      label && /* @__PURE__ */ jsx(FieldLabel, { required: isRequired ? true : void 0, children: label }),
+      label && /* @__PURE__ */ jsx(FieldLabel, { required: isRequired ? true : void 0, htmlFor: labelFor, children: label }),
       !isRequired && /* @__PURE__ */ jsx("span", { children: "Optional" })
     ] }),
     description && /* @__PURE__ */ jsx(FieldDescription, { children: description }),

package/dist/components/FieldHeader/FieldHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldHeader.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"FieldHeader.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/FieldLabel/FieldLabel.d.ts

@@ -2,5 +2,5 @@ import { LabelProps as AriaLabelProps } from 'react-aria-components';
 export interface FieldLabelProps extends AriaLabelProps {
     required?: boolean;
 }
-export declare const FieldLabel: ({ children, required, ...props }: FieldLabelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FieldLabel: ({ children, ...props }: FieldLabelProps) => import("react/jsx-runtime").JSX.Element;
 export default FieldLabel;

package/dist/components/FieldLabel/FieldLabel.js

@@ -1,12 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import { Label } from "react-aria-components";
-import '../../assets/FieldLabel.css';const fieldLabel = "_fieldLabel_7i7ld_1";
+import '../../assets/FieldLabel.css';const fieldLabel = "_fieldLabel_1jqml_1";
 const styles = {
   fieldLabel
 };
 const FieldLabel = ({
   children,
-  required,
   ...props
 }) => {
   return /* @__PURE__ */ jsx(Label, { className: styles.fieldLabel, ...props, children });

package/dist/components/FieldLabel/FieldLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldLabel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
+{"version":3,"file":"FieldLabel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/dist/components/Grid/Grid.d.ts

@@ -1,30 +1,46 @@
 import { default as React } from 'react';
-type SpaceToken = 'default' | '5xs' | '4xs' | '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
+import { SpaceToken } from '../../utils/spaceToken/spaceToken';
 type AutoFlowValue = 'row' | 'column' | 'dense' | 'row dense' | 'column dense';
 type AlignContentValue = 'start' | 'end' | 'center' | 'stretch' | 'space-around' | 'space-between' | 'space-evenly';
-export interface GridCellProps extends React.HTMLAttributes<HTMLDivElement> {
+type ValidElements = 'div' | 'span';
+type PolymorphicProps<E extends ValidElements> = {
+    as?: E;
+} & Omit<React.ComponentPropsWithRef<E>, 'as'>;
+export interface GridCellBaseProps {
     /**
-     * Number of columns this cell should span
+     * Number of columns/rows this cell should span
+     * Can be a single number for column span or an object for both
      */
-    colSpan?: number;
+    span?: number | {
+        column?: number;
+        row?: number;
+    };
     /**
-     * Number of rows this cell should span
+     * Named grid area for placing the cell
      */
-    rowSpan?: number;
+    area?: string;
     /**
-     * The starting column for this cell
+     * Column number where the cell will be placed
      */
-    colStart?: number;
+    column?: string | number;
     /**
-     * The starting row for this cell
+     * Starting column for the cell
      */
-    rowStart?: number;
+    columnStart?: number;
+    /**
+     * Ending column for spanning multiple columns
+     */
+    columnEnd?: number;
     /**
-     * The ending column for this cell
+     * Row number where the cell will be placed
      */
-    colEnd?: number;
+    row?: string | number;
     /**
-     * The ending row for this cell
+     * Starting row for the cell
+     */
+    rowStart?: number;
+    /**
+     * Ending row for spanning multiple rows
      */
     rowEnd?: number;
     /**
@@ -37,7 +53,8 @@ export interface GridCellProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     style?: React.CSSProperties;
 }
-export declare const GridCell: ({ colSpan, rowSpan, colStart, colEnd, rowStart, rowEnd, children, style, ...rest }: GridCellProps) => import("react/jsx-runtime").JSX.Element;
+export type GridCellProps<E extends ValidElements = 'div'> = GridCellBaseProps & PolymorphicProps<E>;
+export declare const GridCell: <E extends ValidElements = "div">({ as, span, area, column, columnStart, columnEnd, row, rowStart, rowEnd, children, style, ...rest }: GridCellProps<E>) => import("react/jsx-runtime").JSX.Element;
 export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Optional unique identifier for the grid
@@ -99,7 +116,7 @@ export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * The content of the grid
      */
-    children: React.ReactNode;
+    children?: React.ReactNode;
     /**
      * @internal
      * Additional CSS properties to apply to the grid
@@ -108,6 +125,8 @@ export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 export declare const Grid: {
     ({ id, isInline, alignContent, autoColumns, autoFlow, columns, rows, templateColumns, templateRows, gap, rowGap, columnGap, children, style, ...rest }: GridProps): import("react/jsx-runtime").JSX.Element;
-    Cell: ({ colSpan, rowSpan, colStart, colEnd, rowStart, rowEnd, children, style, ...rest }: GridCellProps) => import("react/jsx-runtime").JSX.Element;
+    Cell: <E extends ValidElements = "div">({ as, span, area, column, columnStart, columnEnd, row, rowStart, rowEnd, children, style, ...rest }: GridCellProps<E>) => import("react/jsx-runtime").JSX.Element;
 };
+declare const isValidElement: (value: unknown) => value is ValidElements;
+export { isValidElement };
 export default Grid;

package/dist/components/Grid/Grid.js

@@ -1,46 +1,74 @@
 import { jsx } from "react/jsx-runtime";
-import '../../assets/Grid.css';const grid = "_grid_f3f0m_1";
-const gridItem = "_gridItem_f3f0m_6";
+import { getSpaceValue } from "../../utils/spaceToken/spaceToken.js";
+import '../../assets/Grid.css';const grid = "_grid_agdpw_1";
+const gridItem = "_gridItem_agdpw_6";
 const styles = {
   grid,
   gridItem
 };
-const getGapValue = (token) => {
-  return token === "default" ? "var(--alto-grid-gutter-default)" : `var(--alto-sem-space-${token})`;
-};
 const GridCell = ({
-  colSpan,
-  rowSpan,
-  colStart,
-  colEnd,
+  as,
+  span,
+  area,
+  column,
+  columnStart,
+  columnEnd,
+  row,
   rowStart,
   rowEnd,
   children,
   style,
   ...rest
 }) => {
+  const Component = as || "div";
+  const getSpanStyles = () => {
+    if (!span) return {};
+    if (typeof span === "number") {
+      return {
+        gridColumn: `span ${span}`
+      };
+    }
+    return {
+      ...span.column && {
+        gridColumn: `span ${span.column}`
+      },
+      ...span.row && {
+        gridRow: `span ${span.row}`
+      }
+    };
+  };
   const gridCellStyle = {
-    ...colSpan && {
-      gridColumn: `span ${colSpan}`
-    },
-    ...rowSpan && {
-      gridRow: `span ${rowSpan}`
-    },
-    ...colStart && {
-      gridColumnStart: colStart
+    // Grid area takes precedence over individual positioning
+    ...area && {
+      gridArea: area
     },
-    ...colEnd && {
-      gridColumnEnd: colEnd
-    },
-    ...rowStart && {
-      gridRowStart: rowStart
-    },
-    ...rowEnd && {
-      gridRowEnd: rowEnd
+    // If no area is specified, use individual positioning props
+    ...!area && {
+      ...column && {
+        gridColumn: column
+      },
+      ...columnStart && {
+        gridColumnStart: columnStart
+      },
+      ...columnEnd && {
+        gridColumnEnd: columnEnd
+      },
+      ...row && {
+        gridRow: row
+      },
+      ...rowStart && {
+        gridRowStart: rowStart
+      },
+      ...rowEnd && {
+        gridRowEnd: rowEnd
+      }
     },
+    // Apply span styles
+    ...getSpanStyles(),
+    // Apply any custom styles
     ...style
   };
-  return /* @__PURE__ */ jsx("div", { className: styles.gridCell, style: gridCellStyle, ...rest, children });
+  return /* @__PURE__ */ jsx(Component, { className: styles.gridCell, style: gridCellStyle, ...rest, children });
 };
 const Grid = ({
   id,
@@ -69,19 +97,24 @@ const Grid = ({
     gridAutoFlow: autoFlow,
     alignContent,
     ...rowGap || columnGap ? {
-      rowGap: getGapValue(rowGap || "default"),
-      columnGap: getGapValue(columnGap || "default")
+      rowGap: rowGap ? getSpaceValue(rowGap) : void 0,
+      columnGap: columnGap ? getSpaceValue(columnGap) : void 0
     } : {
-      gap: getGapValue(gap || "default")
+      gap: getSpaceValue(gap || "default")
     },
     ...style
   };
   return /* @__PURE__ */ jsx("div", { id, className: styles.grid, style: gridStyle, ...rest, children });
 };
+const isValidElement = (value) => {
+  const validElements = ["div", "span"];
+  return typeof value === "string" && validElements.includes(value);
+};
 Grid.Cell = GridCell;
 export {
   Grid,
   GridCell,
-  Grid as default
+  Grid as default,
+  isValidElement
 };
 //# sourceMappingURL=Grid.js.map