@hopper-ui/styled-system 0.2.1 → 0.2.2

package/dist/{styled-system-props-1c231c50.d.ts → tokens/token-mappings.d.ts}

@@ -1,22 +1,5 @@
 import { Globals, Property } from 'csstype';
-import { CSSProperties, JSXElementConstructor, ComponentProps } from 'react';
-
-declare const Breakpoints: {
-    readonly xs: 640;
-    readonly sm: 768;
-    readonly md: 1024;
-    readonly lg: 1280;
-    readonly xl: 1440;
-};
-type Breakpoint = keyof typeof Breakpoints | "base";
-
-type ResponsiveValue<T> = {
-    [K in Breakpoint]?: T;
-};
-type ResponsiveProp<T> = T | ResponsiveValue<T>;
-declare function isResponsiveObject(obj: unknown): obj is ResponsiveValue<unknown>;
-declare function parseResponsiveValue<T>(value: T | ResponsiveValue<T>, matchedBreakpoints: Breakpoint[]): T | undefined;
-declare function useResponsiveValue<T>(value: T | ResponsiveValue<T>): T | undefined;
+import { Breakpoint } from '../responsive/Breakpoints.js';
 
 declare const ColorExpressionTypes: readonly ["#", "rgb", "rgba", "hsl", "hsla"];
 declare const DefaultBorderWidthAndStyle = "1px solid";
@@ -2161,1243 +2144,4 @@ type GridRowSpanValue = number;
 declare function parseResponsiveSystemValue<TValue extends string | number>(value: TValue | undefined, systemValues: Record<TValue, string>, matchedBreakpoints: Breakpoint[]): TValue | Record<TValue, string>[TValue] | undefined;
 declare function getSystemValue<T extends string | number>(value: T, systemValues: Record<T, string>): Record<T, string>[T];
 
-declare const UnsafePrefix = "UNSAFE_";
-interface StyledSystemProps {
-    className?: string;
-    style?: CSSProperties;
-    /**
-   * Sets the `align-content` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/align-content}
-   */
-    alignContent?: ResponsiveProp<Property.AlignContent>;
-    /**
-   * Sets the `align-items` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/align-items}
-   */
-    alignItems?: ResponsiveProp<Property.AlignItems>;
-    /**
-   * Sets the `align-self` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/align-self}
-   */
-    alignSelf?: ResponsiveProp<Property.AlignSelf>;
-    /**
-   * Sets the `aspect-ratio` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/aspect-ratio}
-   */
-    aspectRatio?: ResponsiveProp<Property.AspectRatio>;
-    /**
-     * Sets the `background-color` property.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_backgroundColor`** property
-     */
-    backgroundColor?: ResponsiveProp<BackgroundColorValue>;
-    /**
-     * Sets the `background-color` property when active.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_backgroundColor`** property
-     */
-    backgroundColorActive?: ResponsiveProp<BackgroundColorValue>;
-    /**
-     * Sets the `background-color` property when focused.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_backgroundColor`** property
-     */
-    backgroundColorFocus?: ResponsiveProp<BackgroundColorValue>;
-    /**
-     * Sets the `background-color` property when hovered.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_backgroundColor`** property
-     */
-    backgroundColorHover?: ResponsiveProp<BackgroundColorValue>;
-    /**
-   * Sets the `background-image` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/background-image}
-   */
-    backgroundImage?: ResponsiveProp<Property.BackgroundImage>;
-    /**
-   * Sets the `background-position` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/background-position}
-   */
-    backgroundPosition?: ResponsiveProp<Property.BackgroundPosition>;
-    /**
-   * Sets the `background-repeat` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/background-repeat}
-   */
-    backgroundRepeat?: ResponsiveProp<Property.BackgroundRepeat>;
-    /**
-   * Sets the `background-size` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/background-size}
-   */
-    backgroundSize?: ResponsiveProp<Property.BackgroundSize>;
-    /**
-     * Sets the `border` property.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_border`** property
-     */
-    border?: ResponsiveProp<BorderValue>;
-    /**
-     * Sets the `border` property when active.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_border`** property
-     */
-    borderActive?: ResponsiveProp<BorderValue>;
-    /**
-     * Sets the `border-bottom` property.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_borderBottom`** property
-     */
-    borderBottom?: ResponsiveProp<BorderValue>;
-    /**
-     * Sets the `border-bottom` property when active.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_borderBottom`** property
-     */
-    borderBottomActive?: ResponsiveProp<BorderValue>;
-    /**
-     * Sets the `border-bottom` property when focused.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_borderBottom`** property
-     */
-    borderBottomFocus?: ResponsiveProp<BorderValue>;
-    /**
-     * Sets the `border-bottom` property when hovered.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_borderBottom`** property
-     */
-    borderBottomHover?: ResponsiveProp<BorderValue>;
-    /**
-     * Sets the `border-bottom-left-radius` property.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_borderBottomLeftRadius`** property
-     */
-    borderBottomLeftRadius?: ResponsiveProp<BorderRadiusValue>;
-    /**
-     * Sets the `border-bottom-right-radius` property.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_borderBottomRightRadius`** property
-     */
-    borderBottomRightRadius?: ResponsiveProp<BorderRadiusValue>;
-    /**
-     * Sets the `border` property when focused.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_border`** property
-     */
-    borderFocus?: ResponsiveProp<BorderValue>;
-    /**
-     * Sets the `border` property when hovered.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_border`** property
-     */
-    borderHover?: ResponsiveProp<BorderValue>;
-    /**
-     * Sets the `border-left` property.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_borderLeft`** property
-     */
-    borderLeft?: ResponsiveProp<BorderValue>;
-    /**
-     * Sets the `border-left` property when active.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_borderLeft`** property
-     */
-    borderLeftActive?: ResponsiveProp<BorderValue>;
-    /**
-     * Sets the `border-left` property when focused.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_borderLeft`** property
-     */
-    borderLeftFocus?: ResponsiveProp<BorderValue>;
-    /**
-     * Sets the `border-left` property when hovered.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_borderLeft`** property
-     */
-    borderLeftHover?: ResponsiveProp<BorderValue>;
-    /**
-     * Sets the `border-radius` property.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_borderRadius`** property
-     */
-    borderRadius?: ResponsiveProp<BorderRadiusValue>;
-    /**
-     * Sets the `border-right` property.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_borderRight`** property
-     */
-    borderRight?: ResponsiveProp<BorderValue>;
-    /**
-     * Sets the `border-right` property when active.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_borderRight`** property
-     */
-    borderRightActive?: ResponsiveProp<BorderValue>;
-    /**
-     * Sets the `border-right` property when focused.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_borderRight`** property
-     */
-    borderRightFocus?: ResponsiveProp<BorderValue>;
-    /**
-     * Sets the `border-right` property when hovered.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_borderRight`** property
-     */
-    borderRightHover?: ResponsiveProp<BorderValue>;
-    /**
-     * Sets the `border-top` property.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_borderTop`** property
-     */
-    borderTop?: ResponsiveProp<BorderValue>;
-    /**
-     * Sets the `border-top` property when active.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_borderTop`** property
-     */
-    borderTopActive?: ResponsiveProp<BorderValue>;
-    /**
-     * Sets the `border-top` property when focused.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_borderTop`** property
-     */
-    borderTopFocus?: ResponsiveProp<BorderValue>;
-    /**
-     * Sets the `border-top` property when hovered.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_borderTop`** property
-     */
-    borderTopHover?: ResponsiveProp<BorderValue>;
-    /**
-     * Sets the `border-top-left-radius` property.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_borderTopLeftRadius`** property
-     */
-    borderTopLeftRadius?: ResponsiveProp<BorderRadiusValue>;
-    /**
-     * Sets the `border-top-right-radius` property.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_borderTopRightRadius`** property
-     */
-    borderTopRightRadius?: ResponsiveProp<BorderRadiusValue>;
-    /**
-   * Sets the `bottom` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/bottom}
-   */
-    bottom?: ResponsiveProp<Property.Bottom>;
-    /**
-     * Sets the `box-shadow` property.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_boxShadow`** property
-     */
-    boxShadow?: ResponsiveProp<BoxShadowValue>;
-    /**
-     * Sets the `box-shadow` property when active.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_boxShadow`** property
-     */
-    boxShadowActive?: ResponsiveProp<BoxShadowValue>;
-    /**
-     * Sets the `box-shadow` property when focused.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_boxShadow`** property
-     */
-    boxShadowFocus?: ResponsiveProp<BoxShadowValue>;
-    /**
-     * Sets the `box-shadow` property when hovered.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_boxShadow`** property
-     */
-    boxShadowHover?: ResponsiveProp<BoxShadowValue>;
-    /**
-     * Sets the `color` property.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_color`** property
-     */
-    color?: ResponsiveProp<ColorValue>;
-    /**
-     * Sets the `color` property when active.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_color`** property
-     */
-    colorActive?: ResponsiveProp<ColorValue>;
-    /**
-     * Sets the `color` property when focused.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_color`** property
-     */
-    colorFocus?: ResponsiveProp<ColorValue>;
-    /**
-     * Sets the `color` property when hovered.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_color`** property
-     */
-    colorHover?: ResponsiveProp<ColorValue>;
-    /**
-     * Sets the `column-gap` property.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_columnGap`** property
-     */
-    columnGap?: ResponsiveProp<ColumnGapValue>;
-    /**
-   * Sets the `content` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/content}
-   */
-    content?: ResponsiveProp<Property.Content>;
-    /**
-   * Sets the `content-visibility` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/content-visibility}
-   */
-    contentVisibility?: ResponsiveProp<Property.ContentVisibility>;
-    /**
-   * Sets the `cursor` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/cursor}
-   */
-    cursor?: ResponsiveProp<Property.Cursor>;
-    /**
-   * Sets the `cursor` property when hovered.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/cursor}
-   */
-    cursorHover?: ResponsiveProp<Property.Cursor>;
-    /**
-   * Sets the `display` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/display}
-   */
-    display?: ResponsiveProp<Property.Display>;
-    /**
-     * Sets the `fill` property.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_fill`** property
-     */
-    fill?: ResponsiveProp<FillValue>;
-    /**
-     * Sets the `fill` property when focused.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_fill`** property
-     */
-    fillFocus?: ResponsiveProp<FillValue>;
-    /**
-     * Sets the `fill` property when hovered.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_fill`** property
-     */
-    fillHover?: ResponsiveProp<FillValue>;
-    /**
-   * Sets the `filter` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/filter}
-   */
-    filter?: ResponsiveProp<Property.Filter>;
-    /**
-   * Sets the `flex` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/flex}
-   */
-    flex?: ResponsiveProp<Property.Flex>;
-    /**
-   * Sets the `flex-basis` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/flex-basis}
-   */
-    flexBasis?: ResponsiveProp<Property.FlexBasis>;
-    /**
-   * Sets the `flex-direction` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/flex-direction}
-   */
-    flexDirection?: ResponsiveProp<Property.FlexDirection>;
-    /**
-   * Sets the `flex-flow` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/flex-flow}
-   */
-    flexFlow?: ResponsiveProp<Property.FlexFlow>;
-    /**
-   * Sets the `flex-grow` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/flex-grow}
-   */
-    flexGrow?: ResponsiveProp<Property.FlexGrow>;
-    /**
-   * Sets the `flex-shrink` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/flex-shrink}
-   */
-    flexShrink?: ResponsiveProp<Property.FlexShrink>;
-    /**
-   * Sets the `flex-wrap` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/flex-wrap}
-   */
-    flexWrap?: ResponsiveProp<Property.FlexWrap>;
-    /**
-     * Sets the `font-family` property.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_fontFamily`** property
-     */
-    fontFamily?: ResponsiveProp<FontFamilyValue>;
-    /**
-     * Sets the `font-size` property.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_fontSize`** property
-     */
-    fontSize?: ResponsiveProp<FontSizeValue>;
-    /**
-   * Sets the `font-style` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/font-style}
-   */
-    fontStyle?: ResponsiveProp<Property.FontStyle>;
-    /**
-     * Sets the `font-weight` property.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_fontWeight`** property
-     */
-    fontWeight?: ResponsiveProp<FontWeightValue>;
-    /**
-     * Sets the `gap` property.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_gap`** property
-     */
-    gap?: ResponsiveProp<GapValue>;
-    /**
-   * Sets the `grid` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/grid}
-   */
-    grid?: ResponsiveProp<Property.Grid>;
-    /**
-   * Sets the `grid-area` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/grid-area}
-   */
-    gridArea?: ResponsiveProp<Property.GridArea>;
-    /**
-     * Sets the `grid-auto-columns` property.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_gridAutoColumns`** property
-     */
-    gridAutoColumns?: ResponsiveProp<GridAutoColumnsValue>;
-    /**
-   * Sets the `grid-auto-flow` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/grid-auto-flow}
-   */
-    gridAutoFlow?: ResponsiveProp<Property.GridAutoFlow>;
-    /**
-     * Sets the `grid-auto-rows` property.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_gridAutoRows`** property
-     */
-    gridAutoRows?: ResponsiveProp<GridAutoRowsValue>;
-    /**
-   * Sets the `grid-column` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/grid-column}
-   */
-    gridColumn?: ResponsiveProp<Property.GridColumn>;
-    /**
-   * Sets the `grid-column-end` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/grid-column-end}
-   */
-    gridColumnEnd?: ResponsiveProp<Property.GridColumnEnd>;
-    /**
-     * Sets the `grid-column-span` property.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_gridColumnSpan`** property
-     */
-    gridColumnSpan?: ResponsiveProp<GridColumSpanValue>;
-    /**
-   * Sets the `grid-column-start` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/grid-column-start}
-   */
-    gridColumnStart?: ResponsiveProp<Property.GridColumnStart>;
-    /**
-   * Sets the `grid-row` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/grid-row}
-   */
-    gridRow?: ResponsiveProp<Property.GridRow>;
-    /**
-   * Sets the `grid-row-end` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/grid-row-end}
-   */
-    gridRowEnd?: ResponsiveProp<Property.GridRowEnd>;
-    /**
-     * Sets the `grid-row-span` property.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_gridRowSpan`** property
-     */
-    gridRowSpan?: ResponsiveProp<GridRowSpanValue>;
-    /**
-   * Sets the `grid-row-start` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/grid-row-start}
-   */
-    gridRowStart?: ResponsiveProp<Property.GridRowStart>;
-    /**
-   * Sets the `grid-template` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/grid-template}
-   */
-    gridTemplate?: ResponsiveProp<Property.GridTemplate>;
-    /**
-   * Sets the `grid-template-areas` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/grid-template-areas}
-   */
-    gridTemplateAreas?: ResponsiveProp<Property.GridTemplateAreas>;
-    /**
-     * Sets the `grid-template-columns` property.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_gridTemplateColumns`** property
-     */
-    gridTemplateColumns?: ResponsiveProp<GridTemplateColumnsValue>;
-    /**
-     * Sets the `grid-template-rows` property.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_gridTemplateRows`** property
-     */
-    gridTemplateRows?: ResponsiveProp<GridTemplateRowsValue>;
-    /**
-     * Sets the `height` property.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_height`** property
-     */
-    height?: ResponsiveProp<HeightValue>;
-    /**
-   * Sets the `justify-content` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/justify-content}
-   */
-    justifyContent?: ResponsiveProp<Property.JustifyContent>;
-    /**
-   * Sets the `justify-items` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/justify-items}
-   */
-    justifyItems?: ResponsiveProp<Property.JustifyItems>;
-    /**
-   * Sets the `justify-self` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/justify-self}
-   */
-    justifySelf?: ResponsiveProp<Property.JustifySelf>;
-    /**
-   * Sets the `left` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/left}
-   */
-    left?: ResponsiveProp<Property.Left>;
-    /**
-   * Sets the `letter-spacing` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/letter-spacing}
-   */
-    letterSpacing?: ResponsiveProp<Property.LetterSpacing>;
-    /**
-     * Sets the `line-height` property.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_lineHeight`** property
-     */
-    lineHeight?: ResponsiveProp<LineHeightValue>;
-    /**
-     * Sets the `margin` property.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_margin`** property
-     */
-    margin?: ResponsiveProp<ComplexMarginValue>;
-    /**
-     * Sets the `margin-bottom` property.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_marginBottom`** property
-     */
-    marginBottom?: ResponsiveProp<SimpleMarginValue>;
-    /**
-     * Sets the `margin-left` property.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_marginLeft`** property
-     */
-    marginLeft?: ResponsiveProp<SimpleMarginValue>;
-    /**
-     * Sets the `margin-right` property.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_marginRight`** property
-     */
-    marginRight?: ResponsiveProp<SimpleMarginValue>;
-    /**
-     * Sets the `margin-top` property.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_marginTop`** property
-     */
-    marginTop?: ResponsiveProp<SimpleMarginValue>;
-    /**
-     * Sets the horizontal margin properties (`margin-left` and `margin-right`).
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_marginX`** property
-     */
-    marginX?: ResponsiveProp<SimpleMarginValue>;
-    /**
-     * Sets the vertical margin properties (`margin-top` and `margin-bottom`).
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_marginY`** property
-     */
-    marginY?: ResponsiveProp<SimpleMarginValue>;
-    /**
-     * Sets the `max-height` property.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_maxHeight`** property
-     */
-    maxHeight?: ResponsiveProp<HeightValue>;
-    /**
-     * Sets the `max-width` property.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_maxWidth`** property
-     */
-    maxWidth?: ResponsiveProp<WidthValue>;
-    /**
-     * Sets the `min-height` property.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_minHeight`** property
-     */
-    minHeight?: ResponsiveProp<HeightValue>;
-    /**
-     * Sets the `min-width` property.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_minWidth`** property
-     */
-    minWidth?: ResponsiveProp<WidthValue>;
-    /**
-   * Sets the `object-fit` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/object-fit}
-   */
-    objectFit?: ResponsiveProp<Property.ObjectFit>;
-    /**
-   * Sets the `object-position` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/object-position}
-   */
-    objectPosition?: ResponsiveProp<Property.ObjectPosition>;
-    /**
-   * Sets the `opacity` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/opacity}
-   */
-    opacity?: ResponsiveProp<Property.Opacity>;
-    /**
-   * Sets the `opacity` property when active.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/opacity}
-   */
-    opacityActive?: ResponsiveProp<Property.Opacity>;
-    /**
-   * Sets the `opacity` property when focused.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/opacity}
-   */
-    opacityFocus?: ResponsiveProp<Property.Opacity>;
-    /**
-   * Sets the `opacity` property when hovered.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/opacity}
-   */
-    opacityHover?: ResponsiveProp<Property.Opacity>;
-    /**
-   * Sets the `order` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/order}
-   */
-    order?: ResponsiveProp<Property.Order>;
-    /**
-   * Sets the `outline` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/outline}
-   */
-    outline?: ResponsiveProp<Property.Outline>;
-    /**
-   * Sets the `outline` property when focused.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/outline}
-   */
-    outlineFocus?: ResponsiveProp<Property.Outline>;
-    /**
-   * Sets the `overflow` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/overflow}
-   */
-    overflow?: ResponsiveProp<Property.Overflow>;
-    /**
-   * Sets the `overflow-x` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/overflow-x}
-   */
-    overflowX?: ResponsiveProp<Property.OverflowX>;
-    /**
-   * Sets the `overflow-y` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/overflow-y}
-   */
-    overflowY?: ResponsiveProp<Property.OverflowY>;
-    /**
-     * Sets the `padding` property.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_padding`** property
-     */
-    padding?: ResponsiveProp<ComplexPaddingValue>;
-    /**
-     * Sets the `padding-bottom` property.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_paddingBottom`** property
-     */
-    paddingBottom?: ResponsiveProp<SimplePaddingValue>;
-    /**
-     * Sets the `padding-left` property.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_paddingLeft`** property
-     */
-    paddingLeft?: ResponsiveProp<SimplePaddingValue>;
-    /**
-     * Sets the `padding-right` property.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_paddingRight`** property
-     */
-    paddingRight?: ResponsiveProp<SimplePaddingValue>;
-    /**
-     * Sets the `padding-top` property.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_paddingTop`** property
-     */
-    paddingTop?: ResponsiveProp<SimplePaddingValue>;
-    /**
-     * Sets the horizontal padding properties (`padding-left` and `padding-right`).
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_paddingX`** property
-     */
-    paddingX?: ResponsiveProp<SimplePaddingValue>;
-    /**
-     * Sets the vertical padding properties (`padding-top` and `padding-bottom`).
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_paddingY`** property
-     */
-    paddingY?: ResponsiveProp<SimplePaddingValue>;
-    /**
-   * Sets the `pointer-events` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/pointer-events}
-   */
-    pointerEvents?: ResponsiveProp<Property.PointerEvents>;
-    /**
-   * Sets the `position` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/position}
-   */
-    position?: ResponsiveProp<Property.Position>;
-    /**
-   * Sets the `resize` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/resize}
-   */
-    resize?: ResponsiveProp<Property.Resize>;
-    /**
-   * Sets the `right` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/right}
-   */
-    right?: ResponsiveProp<Property.Right>;
-    /**
-     * Sets the `row-gap` property.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_rowGap`** property
-     */
-    rowGap?: ResponsiveProp<RowGapValue>;
-    /**
-     * Sets the `stroke` property.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_stroke`** property
-     */
-    stroke?: ResponsiveProp<StrokeValue>;
-    /**
-   * Sets the `text-align` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/text-align}
-   */
-    textAlign?: ResponsiveProp<Property.TextAlign | "justify-all">;
-    /**
-   * Sets the `text-decoration` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/text-decoration}
-   */
-    textDecoration?: ResponsiveProp<Property.TextDecoration>;
-    /**
-   * Sets the `text-overflow` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/text-overflow}
-   */
-    textOverflow?: ResponsiveProp<Property.TextOverflow>;
-    /**
-   * Sets the `text-transform` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/text-transform}
-   */
-    textTransform?: ResponsiveProp<Property.TextTransform>;
-    /**
-   * Sets the `top` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/top}
-   */
-    top?: ResponsiveProp<Property.Top>;
-    /**
-   * Sets the `transform` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/transform}
-   */
-    transform?: ResponsiveProp<Property.Transform>;
-    /**
-   * Sets the `transform-origin` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/transform-origin}
-   */
-    transformOrigin?: ResponsiveProp<Property.TransformOrigin>;
-    /**
-   * Sets the `transform-style` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/transform-style}
-   */
-    transformStyle?: ResponsiveProp<Property.TransformStyle>;
-    /**
-   * Sets the `transition` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/transition}
-   */
-    transition?: ResponsiveProp<Property.Transition>;
-    /**
-     * Sets the `background-color` property.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`backgroundColor`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_backgroundColor?: ResponsiveProp<UNSAFE_BackgroundColorValue>;
-    /**
-     * Sets the `background-color` property when active.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`backgroundColorActive`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_backgroundColorActive?: ResponsiveProp<UNSAFE_BackgroundColorValue>;
-    /**
-     * Sets the `background-color` property when focused.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`backgroundColorFocus`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_backgroundColorFocus?: ResponsiveProp<UNSAFE_BackgroundColorValue>;
-    /**
-     * Sets the `background-color` property when hovered.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`backgroundColorHover`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_backgroundColorHover?: ResponsiveProp<UNSAFE_BackgroundColorValue>;
-    /**
-     * Sets the `border` property.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`border`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_border?: ResponsiveProp<UNSAFE_BorderValue>;
-    /**
-     * Sets the `border` property when active.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`borderActive`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_borderActive?: ResponsiveProp<UNSAFE_BorderValue>;
-    /**
-     * Sets the `border-bottom` property.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`borderBottom`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_borderBottom?: ResponsiveProp<UNSAFE_BorderValue>;
-    /**
-     * Sets the `border-bottom` property when active.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`borderBottomActive`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_borderBottomActive?: ResponsiveProp<UNSAFE_BorderValue>;
-    /**
-     * Sets the `border-bottom` property when focused.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`borderBottomFocus`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_borderBottomFocus?: ResponsiveProp<UNSAFE_BorderValue>;
-    /**
-     * Sets the `border-bottom` property when hovered.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`borderBottomHover`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_borderBottomHover?: ResponsiveProp<UNSAFE_BorderValue>;
-    /**
-     * Sets the `border-bottom-left-radius` property.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`borderBottomLeftRadius`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_borderBottomLeftRadius?: ResponsiveProp<UNSAFE_BorderRadiusValue>;
-    /**
-     * Sets the `border-bottom-right-radius` property.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`borderBottomRightRadius`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_borderBottomRightRadius?: ResponsiveProp<UNSAFE_BorderRadiusValue>;
-    /**
-     * Sets the `border` property when focused.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`borderFocus`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_borderFocus?: ResponsiveProp<UNSAFE_BorderValue>;
-    /**
-     * Sets the `border` property when hovered.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`borderHover`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_borderHover?: ResponsiveProp<UNSAFE_BorderValue>;
-    /**
-     * Sets the `border-left` property.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`borderLeft`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_borderLeft?: ResponsiveProp<UNSAFE_BorderValue>;
-    /**
-     * Sets the `border-left` property when active.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`borderLeftActive`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_borderLeftActive?: ResponsiveProp<UNSAFE_BorderValue>;
-    /**
-     * Sets the `border-left` property when focused.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`borderLeftFocus`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_borderLeftFocus?: ResponsiveProp<UNSAFE_BorderValue>;
-    /**
-     * Sets the `border-left` property when hovered.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`borderLeftHover`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_borderLeftHover?: ResponsiveProp<UNSAFE_BorderValue>;
-    /**
-     * Sets the `border-radius` property.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`borderRadius`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_borderRadius?: ResponsiveProp<UNSAFE_BorderRadiusValue>;
-    /**
-     * Sets the `border-right` property.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`borderRight`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_borderRight?: ResponsiveProp<UNSAFE_BorderValue>;
-    /**
-     * Sets the `border-right` property when active.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`borderRightActive`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_borderRightActive?: ResponsiveProp<UNSAFE_BorderValue>;
-    /**
-     * Sets the `border-right` property when focused.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`borderRightFocus`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_borderRightFocus?: ResponsiveProp<UNSAFE_BorderValue>;
-    /**
-     * Sets the `border-right` property when hovered.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`borderRightHover`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_borderRightHover?: ResponsiveProp<UNSAFE_BorderValue>;
-    /**
-     * Sets the `border-top` property.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`borderTop`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_borderTop?: ResponsiveProp<UNSAFE_BorderValue>;
-    /**
-     * Sets the `border-top` property when active.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`borderTopActive`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_borderTopActive?: ResponsiveProp<UNSAFE_BorderValue>;
-    /**
-     * Sets the `border-top` property when focused.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`borderTopFocus`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_borderTopFocus?: ResponsiveProp<UNSAFE_BorderValue>;
-    /**
-     * Sets the `border-top` property when hovered.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`borderTopHover`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_borderTopHover?: ResponsiveProp<UNSAFE_BorderValue>;
-    /**
-     * Sets the `border-top-left-radius` property when hovered.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`borderTopLeftRadius`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_borderTopLeftRadius?: ResponsiveProp<UNSAFE_BorderRadiusValue>;
-    /**
-     * Sets the `border-top-right-radius` property when hovered.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`borderTopRightRadius`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_borderTopRightRadius?: ResponsiveProp<UNSAFE_BorderRadiusValue>;
-    /**
-     * Sets the `box-shadow` property.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`boxShadow`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_boxShadow?: ResponsiveProp<UNSAFE_BoxShadowValue>;
-    /**
-     * Sets the `color` property.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`color`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_color?: ResponsiveProp<UNSAFE_ColorValue>;
-    /**
-     * Sets the `column-gap` property.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`columnGap`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_columnGap?: ResponsiveProp<UNSAFE_GapValue>;
-    /**
-     * Sets the `fill` property.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`fill`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_fill?: ResponsiveProp<UNSAFE_FillValue>;
-    /**
-     * Sets the `font-family` property.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`fontFamily`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_fontFamily?: ResponsiveProp<UNSAFE_FontFamilyValue>;
-    /**
-     * Sets the `font-size` property.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`fontSize`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_fontSize?: ResponsiveProp<UNSAFE_FontSizeValue>;
-    /**
-     * Sets the `font-weight` property.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`fontWeight`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_fontWeight?: ResponsiveProp<UNSAFE_FontWeightValue>;
-    /**
-     * Sets the `gap` property.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`gap`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_gap?: ResponsiveProp<UNSAFE_GapValue>;
-    /**
-     * Sets the `grid-auto-columns` property.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`gridAutoColumns`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_gridAutoColumns?: ResponsiveProp<UNSAFE_GridAutoColumnsValue>;
-    /**
-     * Sets the `grid-auto-rows` property.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`gridAutoRows`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_gridAutoRows?: ResponsiveProp<UNSAFE_GridAutoRowsValue>;
-    /**
-     * Sets the `grid-template-columns` property.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`gridTemplateColumns`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_gridTemplateColumns?: ResponsiveProp<UNSAFE_GridTemplateColumnsValue>;
-    /**
-     * Sets the `grid-template-rows` property.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`gridTemplateRows`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_gridTemplateRows?: ResponsiveProp<UNSAFE_GridTemplateRowsValue>;
-    /**
-     * Sets the `height` property.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`height`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_height?: ResponsiveProp<UNSAFE_HeightValue>;
-    /**
-     * Sets the `line-height` property.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`lineHeight`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_lineHeight?: ResponsiveProp<UNSAFE_LineHeightValue>;
-    /**
-     * Sets the `margin` property.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`margin`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_margin?: ResponsiveProp<UNSAFE_ComplexMarginValue>;
-    /**
-     * Sets the `margin-bottom` property.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`marginBottom`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_marginBottom?: ResponsiveProp<UNSAFE_SimpleMarginValue>;
-    /**
-     * Sets the `margin-left` property.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`marginLeft`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_marginLeft?: ResponsiveProp<UNSAFE_SimpleMarginValue>;
-    /**
-     * Sets the `margin-right` property.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`marginRight`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_marginRight?: ResponsiveProp<UNSAFE_SimpleMarginValue>;
-    /**
-     * Sets the `margin-top` property.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`marginTop`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_marginTop?: ResponsiveProp<UNSAFE_SimpleMarginValue>;
-    /**
-     * Sets the horizontal margin (`margin-left` and `margin-right`) property.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`marginX`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_marginX?: ResponsiveProp<UNSAFE_SimpleMarginValue>;
-    /**
-     * Sets the vertical margin (`margin-top` and `margin-bottom`) property.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`marginY`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_marginY?: ResponsiveProp<UNSAFE_SimpleMarginValue>;
-    /**
-     * Sets the `max-height` property.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`maxHeight`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_maxHeight?: ResponsiveProp<UNSAFE_HeightValue>;
-    /**
-     * Sets the `max-width` property.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`maxWidth`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_maxWidth?: ResponsiveProp<UNSAFE_WidthValue>;
-    /**
-     * Sets the `min-height` property.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`minHeight`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_minHeight?: ResponsiveProp<UNSAFE_HeightValue>;
-    /**
-     * Sets the `min-width` property.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`minWidth`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_minWidth?: ResponsiveProp<UNSAFE_WidthValue>;
-    /**
-     * Sets the `padding` property.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`padding`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_padding?: ResponsiveProp<UNSAFE_ComplexPaddingValue>;
-    /**
-     * Sets the `padding-bottom` property.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`paddingBottom`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_paddingBottom?: ResponsiveProp<UNSAFE_SimplePaddingValue>;
-    /**
-     * Sets the `padding-left` property.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`paddingLeft`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_paddingLeft?: ResponsiveProp<UNSAFE_SimplePaddingValue>;
-    /**
-     * Sets the `padding-right` property.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`paddingRight`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_paddingRight?: ResponsiveProp<UNSAFE_SimplePaddingValue>;
-    /**
-     * Sets the `padding-top` property.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`paddingTop`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_paddingTop?: ResponsiveProp<UNSAFE_SimplePaddingValue>;
-    /**
-     * Sets the horizontal padding (`padding-left` and `padding-right`) property.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`paddingX`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_paddingX?: ResponsiveProp<UNSAFE_SimplePaddingValue>;
-    /**
-     * Sets the vertical padding (`padding-top` and `padding-bottom`) property.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`paddingY`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_paddingY?: ResponsiveProp<UNSAFE_SimplePaddingValue>;
-    /**
-     * Sets the `row-gap` property.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`rowGap`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_rowGap?: ResponsiveProp<UNSAFE_RowGapValue>;
-    /**
-     * Sets the `stroke` property.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`stroke`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_stroke?: ResponsiveProp<UNSAFE_StrokeValue>;
-    /**
-     * Sets the `width` property.
-     *
-     * If you want to use a **token value** from the **SCALE**, use the **`width`** property instead.
-     *
-     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
-     */
-    UNSAFE_width?: ResponsiveProp<UNSAFE_WidthValue>;
-    /**
-   * Sets the `vertical-align` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/vertical-align}
-   */
-    verticalAlign?: ResponsiveProp<Property.VerticalAlign>;
-    /**
-   * Sets the `visibility` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/visibility}
-   */
-    visibility?: ResponsiveProp<Property.Visibility>;
-    /**
-   * Sets the `white-space` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/white-space}
-   */
-    whiteSpace?: ResponsiveProp<Property.WhiteSpace>;
-    /**
-     * Sets the `width` property.
-     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_width`** property
-     */
-    width?: ResponsiveProp<WidthValue>;
-    /**
-   * Sets the `will-change` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/will-change}
-   */
-    willChange?: ResponsiveProp<Property.WillChange>;
-    /**
-   * Sets the `word-break` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/word-break}
-   */
-    wordBreak?: ResponsiveProp<Property.WordBreak>;
-    /**
-   * Sets the `z-index` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/z-index}
-   */
-    zIndex?: ResponsiveProp<Property.ZIndex>;
-}
-type StyledComponentProps<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<unknown>> = Omit<ComponentProps<T>, keyof StyledSystemProps> & StyledSystemProps;
-
-export { FontWeightValue as $, BackgroundColorValue as A, Breakpoint as B, ColorExpressionTypes as C, DefaultBorderWidthAndStyle as D, BorderValue as E, FontSizeMapping as F, UNSAFE_BorderValue as G, BorderRadiusValue as H, IconColorMapping as I, UNSAFE_BorderRadiusValue as J, BoxShadowValue as K, LineHeightMapping as L, UNSAFE_BoxShadowValue as M, ColorValue as N, UNSAFE_ColorValue as O, ColumnGapValue as P, UNSAFE_ColumnGapValue as Q, ResponsiveValue as R, SpaceMapping as S, TextColorMapping as T, UNSAFE_BackgroundColorValue as U, FillValue as V, UNSAFE_FillValue as W, FontSizeValue as X, UNSAFE_FontSizeValue as Y, FontFamilyValue as Z, UNSAFE_FontFamilyValue as _, Breakpoints as a, UNSAFE_FontWeightValue as a0, GapValue as a1, UNSAFE_GapValue as a2, GridAutoColumnsValue as a3, UNSAFE_GridAutoColumnsValue as a4, GridAutoRowsValue as a5, UNSAFE_GridAutoRowsValue as a6, GridTemplateColumnsValue as a7, UNSAFE_GridTemplateColumnsValue as a8, GridTemplateRowsValue as a9, StyledSystemProps as aA, StyledComponentProps as aB, UNSAFE_GridTemplateRowsValue as aa, HeightValue as ab, UNSAFE_HeightValue as ac, LineHeightValue as ad, UNSAFE_LineHeightValue as ae, SimpleMarginValue as af, UNSAFE_SimpleMarginValue as ag, ComplexMarginValue as ah, UNSAFE_ComplexMarginValue as ai, SimplePaddingValue as aj, UNSAFE_SimplePaddingValue as ak, ComplexPaddingValue as al, UNSAFE_ComplexPaddingValue as am, RowGapValue as an, UNSAFE_RowGapValue as ao, SizingValue as ap, UNSAFE_SizingValue as aq, StrokeValue as ar, UNSAFE_StrokeValue as as, WidthValue as at, UNSAFE_WidthValue as au, GridColumSpanValue as av, GridRowSpanValue as aw, parseResponsiveSystemValue as ax, getSystemValue as ay, UnsafePrefix as az, ResponsiveProp as b, ColorMapping as c, DataVizColorMapping as d, BackgroundColorMapping as e, BorderMapping as f, BoxShadowMapping as g, FontWeightMapping as h, isResponsiveObject as i, FontFamilyMapping as j, BorderRadiusMapping as k, SimplePaddingMapping as l, ComplexPaddingMapping as m, SimpleMarginMapping as n, ComplexMarginMapping as o, parseResponsiveValue as p, SizingMapping as q, CssColor as r, CssFill as s, CssGrid as t, useResponsiveValue as u, CssGridTemplate as v, CssBoxShadow as w, CssBorder as x, CssBorderRadius as y, CssGap as z };
+export { BackgroundColorMapping, BackgroundColorValue, BorderMapping, BorderRadiusMapping, BorderRadiusValue, BorderValue, BoxShadowMapping, BoxShadowValue, ColorExpressionTypes, ColorMapping, ColorValue, ColumnGapValue, ComplexMarginMapping, ComplexMarginValue, ComplexPaddingMapping, ComplexPaddingValue, CssBorder, CssBorderRadius, CssBoxShadow, CssColor, CssFill, CssGap, CssGrid, CssGridTemplate, DataVizColorMapping, DefaultBorderWidthAndStyle, FillValue, FontFamilyMapping, FontFamilyValue, FontSizeMapping, FontSizeValue, FontWeightMapping, FontWeightValue, GapValue, GridAutoColumnsValue, GridAutoRowsValue, GridColumSpanValue, GridRowSpanValue, GridTemplateColumnsValue, GridTemplateRowsValue, HeightValue, IconColorMapping, LineHeightMapping, LineHeightValue, RowGapValue, SimpleMarginMapping, SimpleMarginValue, SimplePaddingMapping, SimplePaddingValue, SizingMapping, SizingValue, SpaceMapping, StrokeValue, TextColorMapping, UNSAFE_BackgroundColorValue, UNSAFE_BorderRadiusValue, UNSAFE_BorderValue, UNSAFE_BoxShadowValue, UNSAFE_ColorValue, UNSAFE_ColumnGapValue, UNSAFE_ComplexMarginValue, UNSAFE_ComplexPaddingValue, UNSAFE_FillValue, UNSAFE_FontFamilyValue, UNSAFE_FontSizeValue, UNSAFE_FontWeightValue, UNSAFE_GapValue, UNSAFE_GridAutoColumnsValue, UNSAFE_GridAutoRowsValue, UNSAFE_GridTemplateColumnsValue, UNSAFE_GridTemplateRowsValue, UNSAFE_HeightValue, UNSAFE_LineHeightValue, UNSAFE_RowGapValue, UNSAFE_SimpleMarginValue, UNSAFE_SimplePaddingValue, UNSAFE_SizingValue, UNSAFE_StrokeValue, UNSAFE_WidthValue, WidthValue, getSystemValue, parseResponsiveSystemValue };