@aws-amplify/ui-react 2.19.1 → 3.0.1

package/dist/types/primitives/types/style.d.ts

@@ -1,11 +1,13 @@
 /// <reference types="react" />
 import { Property } from 'csstype';
 import { WebDesignToken } from '@aws-amplify/ui';
+import type { BoxShadowKeys, ColorKeys, FontFamilyKeys, FontSizeKeys, FontWeightKeys, LineHeightKeys, OpacityKeys, RadiiKeys, SpaceKeys, TransformKeys } from './theme';
 import { FlexItemStyleProps, FlexContainerStyleProps } from './flex';
 import { GridItemStyleProps, GridContainerStyleProps } from './grid';
 import { ImageStyleProps } from './image';
 import { TextAreaStyleProps } from './textArea';
 /**
+ * @description
  * Extract style compatible types (string literal | number | any string)
  */
 export declare type StyleProp<PropertyType> = (PropertyType extends number ? number : PropertyType extends string | WebDesignToken ? PropertyType : never) | (string & {});
@@ -18,89 +20,417 @@ export interface ResponsiveObject<PropertyType> {
     xxl?: PropertyType;
 }
 /**
+ * @description
  * Allows a style prop to be the property type
  * or a design token of that property type.
  */
 export declare type StyleToken<PropertyType> = PropertyType | WebDesignToken<PropertyType>;
 export declare type ResponsiveStyle<PropertyType> = StyleProp<PropertyType> | StyleProp<PropertyType>[] | ResponsiveObject<StyleProp<PropertyType>>;
 export interface BaseStyleProps extends FlexItemStyleProps, GridItemStyleProps {
+    /**
+     * @description
+     * Overrides a grid or flex item's align-items value.
+     * In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/align-self}
+     */
     alignSelf?: ResponsiveStyle<StyleToken<Property.AlignSelf>>;
-    backgroundColor?: ResponsiveStyle<StyleToken<Property.BackgroundColor>>;
+    /**
+     * @description
+     * Sets the background color of an element.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/background-color}
+     */
+    backgroundColor?: ResponsiveStyle<ColorKeys<StyleToken<Property.BackgroundColor>>>;
+    /**
+     * @description
+     * Sets one or more background images on an element.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/background-image}
+     */
     backgroundImage?: ResponsiveStyle<StyleToken<Property.BackgroundImage>>;
+    /**
+     * @description
+     * Shorthand CSS property that sets an element's border-width, border-style, and border-color.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/border}
+     */
     border?: ResponsiveStyle<StyleToken<Property.Border>>;
-    borderRadius?: ResponsiveStyle<StyleToken<Property.BorderRadius>>;
-    bottom?: ResponsiveStyle<StyleToken<Property.Bottom>>;
-    boxShadow?: ResponsiveStyle<StyleToken<Property.BoxShadow>>;
-    color?: ResponsiveStyle<StyleToken<Property.Color>>;
+    /**
+     * @description
+     * Rounds the corners of an element's outer border edge.
+     * You can set a single radius to make circular corners, or two radii to make elliptical corners.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius}
+     */
+    borderRadius?: ResponsiveStyle<RadiiKeys<StyleToken<Property.BorderRadius>>>;
+    /**
+     * @description
+     * Participates in setting the vertical position of a positioned element.
+     * It has no effect on non-positioned elements.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/bottom}
+     */
+    bottom?: ResponsiveStyle<SpaceKeys<StyleToken<Property.Bottom>>>;
+    /**
+     * @description
+     * Adds shadow effects around an element's frame. You can set multiple effects separated by commas.
+     * A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow}
+     */
+    boxShadow?: ResponsiveStyle<BoxShadowKeys<StyleToken<Property.BoxShadow>>>;
+    /**
+     * @description
+     * Sets the foreground color value of an element's text and text decorations, and sets the `currentcolor` value.
+     * `currentcolor` may be used as an indirect value on other properties and is the default for other color properties, such as border-color.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/color}
+     */
+    color?: ResponsiveStyle<ColorKeys<StyleToken<Property.Color>>>;
+    /**
+     * @description
+     * Sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/display}
+     */
     display?: ResponsiveStyle<StyleToken<Property.Display>>;
-    fontFamily?: ResponsiveStyle<StyleToken<Property.FontFamily>>;
-    fontSize?: ResponsiveStyle<StyleToken<Property.FontSize>>;
+    /**
+     * @description
+     * Specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/font-family}
+     */
+    fontFamily?: ResponsiveStyle<FontFamilyKeys<StyleToken<Property.FontFamily>>>;
+    /**
+     * @description
+     * Sets the size of the font. Changing the font size also updates the sizes of the font size-relative <length> units, such as em, ex, and so forth.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/font-size}
+     */
+    fontSize?: ResponsiveStyle<FontSizeKeys<StyleToken<Property.FontSize>>>;
+    /**
+     * @description
+     * Sets whether a font should be styled with a normal, italic, or oblique face from its font-family.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/font-style}
+     */
     fontStyle?: ResponsiveStyle<StyleToken<Property.FontStyle>>;
-    fontWeight?: ResponsiveStyle<StyleToken<Property.FontWeight>>;
-    height?: ResponsiveStyle<StyleToken<Property.Height>>;
-    left?: ResponsiveStyle<StyleToken<Property.Left>>;
-    letterSpacing?: ResponsiveStyle<StyleToken<Property.LetterSpacing>>;
-    lineHeight?: ResponsiveStyle<StyleToken<Property.LineHeight>>;
-    margin?: ResponsiveStyle<StyleToken<Property.Margin>>;
-    marginBlockEnd?: ResponsiveStyle<StyleToken<Property.MarginBlockEnd>>;
-    marginBlockStart?: ResponsiveStyle<StyleToken<Property.MarginBlockStart>>;
-    marginBottom?: ResponsiveStyle<StyleToken<Property.MarginBlockEnd>>;
-    marginInlineEnd?: ResponsiveStyle<StyleToken<Property.MarginInlineEnd>>;
-    marginInlineStart?: ResponsiveStyle<StyleToken<Property.MarginInlineStart>>;
-    marginLeft?: ResponsiveStyle<StyleToken<Property.MarginInlineStart>>;
-    marginRight?: ResponsiveStyle<StyleToken<Property.MarginInlineEnd>>;
-    marginTop?: ResponsiveStyle<StyleToken<Property.MarginBlockStart>>;
-    maxHeight?: ResponsiveStyle<StyleToken<Property.MaxHeight>>;
-    maxWidth?: ResponsiveStyle<StyleToken<Property.MaxWidth>>;
-    minHeight?: ResponsiveStyle<StyleToken<Property.MinHeight>>;
-    minWidth?: ResponsiveStyle<StyleToken<Property.MinWidth>>;
-    opacity?: ResponsiveStyle<StyleToken<Property.Opacity>>;
+    /**
+     * @description
+     * Sets the weight (or boldness) of the font. The weights available depend on the font-family that is currently set.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight}
+     */
+    fontWeight?: ResponsiveStyle<FontWeightKeys<StyleToken<Property.FontWeight>>>;
+    /**
+     * @description
+     * specifies the height of an element. By default, the property defines the height of the content area.
+     * If box-sizing is set to border-box, however, it instead determines the height of the border area.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/height}
+     */
+    height?: ResponsiveStyle<SpaceKeys<StyleToken<Property.Height>>>;
+    /**
+     * @description
+     * Participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/left}
+     */
+    left?: ResponsiveStyle<SpaceKeys<StyleToken<Property.Left>>>;
+    /**
+     * @description
+     * Sets the horizontal spacing behavior between text characters.
+     * This value is added to the natural spacing between characters while rendering the text.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing}
+     */
+    letterSpacing?: ResponsiveStyle<SpaceKeys<StyleToken<Property.LetterSpacing>>>;
+    /**
+     * @description
+     * Sets the height of a line box. It's commonly used to set the distance between lines of text.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/line-height}
+     */
+    lineHeight?: ResponsiveStyle<LineHeightKeys<StyleToken<Property.LineHeight>>>;
+    /**
+     * @description
+     * Shorthand CSS property that sets the margin area on all four sides of an element.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/margin}
+     */
+    margin?: ResponsiveStyle<SpaceKeys<StyleToken<Property.Margin>>>;
+    /**
+     * @description
+     * Shorthand CSS property that defines the logical block start and end margins of an element,
+     * which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block}
+     */
+    marginBlock?: ResponsiveStyle<SpaceKeys<StyleToken<Property.MarginBlock>>>;
+    /**
+     * @description
+     * Defines the logical block end margin of an element,
+     * which maps to a physical margin depending on the element's writing mode, directionality, and text orientation.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-end}
+     */
+    marginBlockEnd?: ResponsiveStyle<SpaceKeys<StyleToken<Property.MarginBlockEnd>>>;
+    /**
+     * @description
+     * Defines the logical block start margin of an element,
+     * which maps to a physical margin depending on the element's writing mode, directionality, and text orientation.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-start}
+     */
+    marginBlockStart?: ResponsiveStyle<SpaceKeys<StyleToken<Property.MarginBlockStart>>>;
+    /**
+     * @description
+     * Sets the margin area on the bottom of an element.
+     * A positive value places it farther from its neighbors, while a negative value places it closer.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom}
+     */
+    marginBottom?: ResponsiveStyle<SpaceKeys<StyleToken<Property.MarginBottom>>>;
+    /**
+     * @description
+     * Shorthand CSS property that defines both the logical inline start and end margins of an element,
+     * which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline}
+     */
+    marginInline?: ResponsiveStyle<SpaceKeys<StyleToken<Property.MarginInline>>>;
+    /**
+     * @description
+     * Defines the logical inline end margin of an element,
+     * which maps to a physical margin depending on the element's writing mode, directionality, and text orientation.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-end}
+     */
+    marginInlineEnd?: ResponsiveStyle<SpaceKeys<StyleToken<Property.MarginInlineEnd>>>;
+    /**
+     * @description
+     * Defines the logical inline start margin of an element,
+     * which maps to a physical margin depending on the element's writing mode, directionality, and text orientation.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-start}
+     */
+    marginInlineStart?: ResponsiveStyle<SpaceKeys<StyleToken<Property.MarginInlineStart>>>;
+    /**
+     * @description
+     * Sets the margin area on the left side of an element.
+     * A positive value places it farther from its neighbors, while a negative value places it closer.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left}
+     */
+    marginLeft?: ResponsiveStyle<SpaceKeys<StyleToken<Property.MarginLeft>>>;
+    /**
+     * @description
+     * Sets the margin area on the right side of an element.
+     * A positive value places it farther from its neighbors, while a negative value places it closer.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right}
+     */
+    marginRight?: ResponsiveStyle<SpaceKeys<StyleToken<Property.MarginRight>>>;
+    /**
+     * @description
+     * Sets the margin area on the top of an element.
+     * A positive value places it farther from its neighbors, while a negative value places it closer.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top}
+     */
+    marginTop?: ResponsiveStyle<SpaceKeys<StyleToken<Property.MarginTop>>>;
+    /**
+     * @description
+     * Sets the maximum height of an element.
+     * It prevents the used value of the height property from becoming larger than the value specified for max-height.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/max-height}
+     */
+    maxHeight?: ResponsiveStyle<SpaceKeys<StyleToken<Property.MaxHeight>>>;
+    /**
+     * @description
+     * Sets the maximum width of an element.
+     * It prevents the used value of the width property from becoming larger than the value specified by max-width.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/max-width}
+     */
+    maxWidth?: ResponsiveStyle<SpaceKeys<StyleToken<Property.MaxWidth>>>;
+    /**
+     * @description
+     * Sets the minimum height of an element.
+     * It prevents the used value of the height property from becoming smaller than the value specified for min-height.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/min-height}
+     */
+    minHeight?: ResponsiveStyle<SpaceKeys<StyleToken<Property.MinHeight>>>;
+    /**
+     * @description
+     * Sets the minimum width of an element.
+     * It prevents the used value of the width property from becoming smaller than the value specified for min-width.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/min-width}
+     */
+    minWidth?: ResponsiveStyle<SpaceKeys<StyleToken<Property.MinWidth>>>;
+    /**
+     * @description
+     * Sets the opacity of an element.
+     * Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/opacity}
+     */
+    opacity?: ResponsiveStyle<OpacityKeys<StyleToken<Property.Opacity>>>;
+    /**
+     * @description
+     * Shorthand CSS property that sets the desired behavior for an element's overflow
+     * — i.e. when an element's content is too big to fit in its block formatting context — in both directions.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/overflow}
+     */
     overflow?: ResponsiveStyle<StyleToken<Property.Overflow>>;
-    padding?: ResponsiveStyle<StyleToken<Property.Padding>>;
-    paddingBlockEnd?: ResponsiveStyle<StyleToken<Property.MarginBlockEnd>>;
-    paddingBlockStart?: ResponsiveStyle<StyleToken<Property.MarginBlockStart>>;
-    paddingBottom?: ResponsiveStyle<StyleToken<Property.PaddingBlockEnd>>;
-    paddingInlineEnd?: ResponsiveStyle<StyleToken<Property.MarginInlineEnd>>;
-    paddingInlineStart?: ResponsiveStyle<StyleToken<Property.MarginInlineStart>>;
-    paddingLeft?: ResponsiveStyle<StyleToken<Property.PaddingInlineStart>>;
-    paddingRight?: ResponsiveStyle<StyleToken<Property.PaddingInlineEnd>>;
-    paddingTop?: ResponsiveStyle<StyleToken<Property.PaddingBlockStart>>;
+    /**
+     * @description
+     * Shorthand CSS property that sets the padding area on all four sides of an element at once.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/padding}
+     */
+    padding?: ResponsiveStyle<SpaceKeys<StyleToken<Property.Padding>>>;
+    /**
+     * @description
+     * Shorthand CSS property that defines the logical block start and end padding of an element,
+     * which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block}
+     */
+    paddingBlock?: ResponsiveStyle<SpaceKeys<StyleToken<Property.PaddingBlock>>>;
+    /**
+     * @description
+     * Defines the logical block end padding of an element,
+     * which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block-end}
+     */
+    paddingBlockEnd?: ResponsiveStyle<SpaceKeys<StyleToken<Property.PaddingBlockEnd>>>;
+    /**
+     * @description
+     * Defines the logical block start padding of an element,
+     * which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block-start}
+     */
+    paddingBlockStart?: ResponsiveStyle<SpaceKeys<StyleToken<Property.PaddingBlockStart>>>;
+    /**
+     * @description
+     * Sets the height of the padding area on the bottom of an element.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom}
+     */
+    paddingBottom?: ResponsiveStyle<SpaceKeys<StyleToken<Property.PaddingBottom>>>;
+    /**
+     * @description
+     * Shorthand CSS property that defines the logical inline start and end padding of an element,
+     * which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline}
+     */
+    paddingInline?: ResponsiveStyle<SpaceKeys<StyleToken<Property.PaddingInline>>>;
+    /**
+     * @description
+     * Defines the logical inline end padding of an element,
+     * which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-end}
+     */
+    paddingInlineEnd?: ResponsiveStyle<SpaceKeys<StyleToken<Property.PaddingInlineEnd>>>;
+    /**
+     * @description
+     * Defines the logical inline start padding of an element,
+     * which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-start}
+     */
+    paddingInlineStart?: ResponsiveStyle<SpaceKeys<StyleToken<Property.PaddingInlineStart>>>;
+    /**
+     * @description
+     * Sets the width of the padding area to the left of an element.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left}
+     */
+    paddingLeft?: ResponsiveStyle<SpaceKeys<StyleToken<Property.PaddingLeft>>>;
+    /**
+     * @description
+     * Sets the width of the padding area on the right of an element.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right}
+     */
+    paddingRight?: ResponsiveStyle<SpaceKeys<StyleToken<Property.PaddingRight>>>;
+    /**
+     * @description
+     * Sets the height of the padding area on the top of an element.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top}
+     */
+    paddingTop?: ResponsiveStyle<SpaceKeys<StyleToken<Property.PaddingTop>>>;
+    /**
+     * @description
+     * Sets how an element is positioned in a document.
+     * The top, right, bottom, and left properties determine the final location of positioned elements.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/position}
+     */
     position?: ResponsiveStyle<StyleToken<Property.Position>>;
-    right?: ResponsiveStyle<StyleToken<Property.Right>>;
+    /**
+     * @description
+     * Participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/right}
+     */
+    right?: ResponsiveStyle<SpaceKeys<StyleToken<Property.Right>>>;
+    /**
+     * @description
+     * Sets the horizontal alignment of the content inside a block element or table-cell box.
+     * This means it works like vertical-align but in the horizontal direction.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/text-align}
+     */
     textAlign?: ResponsiveStyle<StyleToken<Property.TextAlign>>;
+    /**
+     * @description
+     * Shorthand CSS property that sets the appearance of decorative lines on text.
+     * It is a shorthand for text-decoration-line, text-decoration-color, text-decoration-style, and the newer text-decoration-thickness property.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration}
+     */
     textDecoration?: ResponsiveStyle<StyleToken<Property.TextDecoration>>;
+    /**
+     * @description
+     * Specifies how to capitalize an element's text. It can be used to make text
+     * appear in all-uppercase or all-lowercase, or with each word capitalized.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform}
+     */
     textTransform?: ResponsiveStyle<StyleToken<Property.TextTransform>>;
-    top?: ResponsiveStyle<StyleToken<Property.Top>>;
-    transform?: ResponsiveStyle<StyleToken<Property.Transform>>;
+    /**
+     * @description
+     * Participates in specifying the vertical position of a positioned element. It has no effect on non-positioned elements.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/top}
+     */
+    top?: ResponsiveStyle<SpaceKeys<StyleToken<Property.Top>>>;
+    /**
+     * @description
+     * Lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/transform}
+     */
+    transform?: ResponsiveStyle<TransformKeys<StyleToken<Property.Transform>>>;
+    /**
+     * @description
+     * Sets the origin for an element's transformations.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin}
+     */
     transformOrigin?: ResponsiveStyle<StyleToken<Property.TransformOrigin>>;
-    width?: ResponsiveStyle<StyleToken<Property.Width>>;
+    /**
+     * @description
+     * Sets an element's width. By default, it sets the width of the content area,
+     * but if box-sizing is set to border-box, it sets the width of the border area.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/width}
+     */
+    width?: ResponsiveStyle<SpaceKeys<StyleToken<Property.Width>>>;
+    /**
+     * @description
+     * Sets how white space inside an element is handled.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/white-space}
+     */
     whiteSpace?: ResponsiveStyle<StyleToken<Property.WhiteSpace>>;
 }
 export interface CSSLayoutStyleProps {
     /**
-     * Controls where the Flex/Grid items sit on the cross axis.
+     * @description
+     * Sets the align-self value on all direct children as a group.
+     * In Flexbox, it controls the alignment of items on the Cross Axis.
+     * In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/align-items}
      */
     alignItems?: ResponsiveStyle<Property.AlignItems>;
     /**
-     * Sets the distribution of space between and around content items
+     * @description
+     * Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/align-content}
      */
     alignContent?: ResponsiveStyle<Property.AlignContent>;
     /**
-     * Controls where the Flex/Grid items sit on the main axis.
+     * @description
+     * Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content}
      */
     justifyContent?: ResponsiveStyle<Property.JustifyContent>;
     /**
-     * Spacing between child components. Shorthand for rowGap and columnGap.
+     * @description
+     * Controls the spacing between child components. Shorthand for rowGap and columnGap.
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/gap}
      */
-    gap?: ResponsiveStyle<StyleToken<Property.Gap>>;
+    gap?: ResponsiveStyle<SpaceKeys<StyleToken<Property.Gap>>>;
     /**
-     * Spacing between Flex/Grid child columns
+     * @description
+     * Controls the spacing between Flex/Grid child columns
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap}
      */
-    columnGap?: ResponsiveStyle<StyleToken<Property.GridColumnGap>>;
+    columnGap?: ResponsiveStyle<SpaceKeys<StyleToken<Property.GridColumnGap>>>;
     /**
-     * Spacing between Flex/Grid child rows
+     * @description
+     * Controls the spacing between Flex/Grid child rows
+     * [MDN]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap}
      */
-    rowGap?: ResponsiveStyle<StyleToken<Property.RowGap>>;
+    rowGap?: ResponsiveStyle<SpaceKeys<StyleToken<Property.RowGap>>>;
 }
 export interface AllStyleProps extends BaseStyleProps, ImageStyleProps, FlexContainerStyleProps, GridContainerStyleProps, TextAreaStyleProps {
 }

package/dist/types/primitives/types/switchField.d.ts

@@ -6,55 +6,68 @@ import { InputProps } from './input';
 import { FieldProps, LabelPositions } from './field';
 export interface SwitchFieldProps extends InputProps, FieldProps, BaseStyleProps {
     /**
+     * @description
      * Use this to provide a default checked value for an uncontrolled SwitchField
      */
     defaultChecked?: boolean;
     /**
+     * @description
      * If isChecked is provided, this will be a controlled SwitchField
      */
     isChecked?: boolean;
     /**
+     * @description
      * This property will set the switch to disabled
      */
     isDisabled?: boolean;
     /**
+     * @description
      * Visually hide the label, but the associated label text will still be required for accessibility.
      * @default false
      */
     isLabelHidden?: boolean;
     /**
+     * @description
      * Label text for field (required)
      */
     label: React.ReactNode;
     /**
+     * @description
      * Position of label in relation to the switchfield
      */
     labelPosition?: LabelPositions;
     /**
+     * @description
      * This prop adds a name attribute to the input element
      */
     name?: string;
     /**
+     * @description
      * Assign an onChange event to the switch field
      */
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
     /**
+     * @description
      * This prop adjusts the size of the switch component
      */
     size?: Sizes;
     /**
+     * @description
      * This property will change the color of the thumb in the switch component
      */
     thumbColor?: StyleToken<Property.Color>;
     /**
+     * @description
      * This property will change the color of the track in the switch component
      */
     trackColor?: StyleToken<Property.Color>;
     /**
+     * @description
      * This property will change the color of the checked track in the switch component
      */
     trackCheckedColor?: StyleToken<Property.Color>;
     /**
+     * @description
      * This is the value of the switch input and will be submitted with a form submission
      */
     value?: string | number;

package/dist/types/primitives/types/table.d.ts

@@ -5,19 +5,23 @@ export declare type TableSize = Sizes;
 export declare type TableVariation = 'bordered' | 'striped';
 export interface TableProps extends ViewProps {
     /**
+     * @description
      * Optional caption which serves as an accessible title/caption for
      * the table.
      */
     caption?: React.ReactNode;
     /**
+     * @description
      * If set to true, will highlight a table row on hover. Default is false.
      */
     highlightOnHover?: boolean;
     /**
+     * @description
      * Affects font size and padding. Default is in between 'small' and 'large'.
      */
     size?: TableSize;
     /**
+     * @description
      * Sets a supported style variation. Default is no specific variation.
      */
     variation?: TableVariation;
@@ -27,7 +31,15 @@ export interface TableBodyProps extends ViewProps {
 export declare type TableCellElement = 'td' | 'th';
 export interface TableCellProps extends ViewProps {
     as?: TableCellElement;
+    /**
+     * @description
+     * Defines the number of columns spanned by a cell within a <table>
+     */
     colspan?: Pick<React.HTMLProps<HTMLTableCellElement>, 'colSpan'>;
+    /**
+     * @description
+     * Defines the number of rows spanned by a cell within a <table>
+     */
     rowspan?: Pick<React.HTMLProps<HTMLTableCellElement>, 'rowSpan'>;
 }
 export interface TableFootProps extends ViewProps {

package/dist/types/primitives/types/tabs.d.ts

@@ -5,40 +5,48 @@ import { FlexProps } from './flex';
 export declare type TabsSpacing = 'equal' | 'relative';
 export interface TabsProps extends FlexProps {
     /**
+     * @description
      * The Tabs component only accepts TabItem components as children.
      */
     children: React.ReactElement | React.ReactElement[];
     /**
+     * @description
      * Change which Tab content is initially displayed. Pass in the index of the Tab you wish to show. The default is index 0 (the first tab).
      */
     defaultIndex?: number | string;
     /**
+     * @description
      * The controlled index of the currently selected tab. This should be used with
      * `onChange` as well to make the component controlled.
      */
     currentIndex?: number | string;
     /**
+     * @description
      * For controlled usage, use the onChange event to listen to when a tab is clicked
      * and update the `currentIndex` accordingly. The index of the tab clicked is passed
      * to onChange.
      */
     onChange?: (value: number | string) => void;
     /**
+     * @description
      * Control how Tabs take up the remaining space. Pass `equal` to make each tab take up the same amount of space,
      * and `relative` to make each tab take up space relative to the size of its title.
      */
     spacing?: TabsSpacing;
     /**
+     * @description
      * Sets the border and indicator of the tabs to be the top or bottom.
      */
     indicatorPosition?: 'top' | 'bottom';
 }
 export interface TabItemProps extends BaseComponentProps, BaseStyleProps {
     /**
+     * @description
      * Change the title corresponding with each Tab's content panel.
      */
     title: React.ReactNode;
     /**
+     * @description
      * Make a Tab not clickable and its content not visible to the user. Defaults to false (i.e., visible).
      */
     isDisabled?: boolean;

package/dist/types/primitives/types/text.d.ts

@@ -2,16 +2,19 @@ import { ViewProps } from './view';
 export declare type TextVariation = 'primary' | 'secondary' | 'tertiary' | 'error' | 'warning' | 'info' | 'success';
 export interface TextProps extends ViewProps {
     /**
+     * @description
      * HTML allowed tags
      */
     as?: 'p' | 'span' | 'strong' | 'em';
     /**
+     * @description
      * This should be the primary way to handle different styles of text. Lower-level
      * text styling attributes like color can be set directly, that should be more of an
      * escape hatch.
      */
     variation?: TextVariation;
     /**
+     * @description
      * This attribute will be used to indicate if the text component should truncate text
      * that exceeds the width of the text element.  Truncated text will render an ellipsis.
      */