creactive 0.0.134 → 0.0.136

package/build/components/atoms/index.d.ts

@@ -1,2 +1,4 @@
 export { Text } from './text';
-export type { TextComponent, TextProperties, TextReference } from './text';
+export type { TextComponent, TextMeasureCallback, TextProperties, TextReference, } from './text';
+export { View } from './view';
+export type { ViewComponent, ViewLayoutEvent, ViewProperties } from './view';

package/build/components/atoms/text/index.d.ts

@@ -1,3 +1,3 @@
-import type { TextComponent, TextProperties, TextReference } from './text.types';
+import type { TextComponent } from './text.types';
 export declare const Text: TextComponent;
-export type { TextComponent, TextProperties, TextReference };
+export type { TextComponent, TextMeasureCallback, TextProperties, TextReference, } from './text.types';

package/build/components/atoms/text/text.types.d.ts

@@ -5,7 +5,7 @@ import type { TextAlign, TextColor, TextDecoration, TextFontFamily, TextFontSize
 /**
  * Provided by component reference object measure callback.
  * Allows to access component layout element position and size.
- * TODO: Comment arguments...
+ * TODO: Describe arguments...
  */
 export type TextMeasureCallback = (x: number, y: number, width: number, height: number) => void;
 /**
@@ -97,7 +97,7 @@ export type TextComponent = ForwardRefExoticComponent<PropsWithoutRef<TextProper
  * Used to render text component on web.
  */
 export type TextStyledProperties = {
-    css: {
+    values: {
         textAlign: 'left' | 'center' | 'right';
         textDecoration: 'none' | 'underline';
         fontFamily: string;

package/build/components/atoms/view/constants/border.d.ts

@@ -0,0 +1,40 @@
+/**
+ * View border color enumerated constants.
+ * Should be used to control view border color with property.
+ * @see View.BorderColor
+ */
+export declare enum ViewBorderColor {
+    BASE_100 = 0,
+    BASE_200 = 1,
+    BASE_300 = 2,
+    BASE_400 = 3,
+    BASE_500 = 4,
+    BASE_600 = 5,
+    BASE_700 = 6,
+    BASE_800 = 7,
+    BASE_900 = 8
+}
+/**
+ * Border width enumerated constants.
+ * Should be used to control themed border width.
+ * Includes matches for all theme base border width tokens.
+ * @see View.BorderWidth
+ */
+export declare enum ViewBorderWidth {
+    SM = 0,
+    MD = 1,
+    LG = 2
+}
+/**
+ * View component supported border radius enumerated constants.
+ * Includes matches for all theme base border radius tokens and maximum one.
+ * @see View.BorderRadius
+ */
+export declare enum ViewBorderRadius {
+    XS = 0,
+    SM = 1,
+    MD = 2,
+    LG = 3,
+    XL = 4,
+    MAX = 5
+}

package/build/components/atoms/view/constants/color.d.ts

@@ -0,0 +1,25 @@
+/**
+ * View themed background color enumerated constants.
+ * Allows to pass theme background colors as component property.
+ * @see View.BackgroundColor
+ */
+export declare enum ViewBackgroundColor {
+    BASE_100 = 0,
+    BASE_200 = 1,
+    BASE_300 = 2,
+    BASE_400 = 3,
+    BASE_500 = 4,
+    BASE_600 = 5,
+    BASE_700 = 6,
+    BASE_800 = 7,
+    BASE_900 = 8,
+    PRIMARY_100 = 9,
+    PRIMARY_200 = 10,
+    PRIMARY_300 = 11,
+    PRIMARY_400 = 12,
+    PRIMARY_500 = 13,
+    PRIMARY_600 = 14,
+    PRIMARY_700 = 15,
+    PRIMARY_800 = 16,
+    PRIMARY_900 = 17
+}

package/build/components/{view → atoms/view}/constants/flex.d.ts

@@ -1,6 +1,7 @@
 /**
  * View flex wrap enumerated constants.
- * Should be used to control how children are wrapped in the flex container.
+ * Controls how children are wrapped in the flex container.
+ * @see View.FlexWrap
  */
 export declare enum ViewFlexWrap {
     NONE = 0,
@@ -9,15 +10,19 @@ export declare enum ViewFlexWrap {
 /**
  * View flex direction enumerated constants.
  * Should be used to define flex container primary axis.
+ * @see View.FlexDirection
  */
 export declare enum ViewFlexDirection {
     COLUMN = 0,
-    ROW = 1
+    ROW = 1,
+    COLUMN_REVERSE = 2,
+    ROW_REVERSE = 3
 }
 /**
  * Supported justify content values.
  * Should be used to control spacing between and around items.
  * Allows to define how children are distributed along the main axis.
+ * @see Text.JustifyContent
  */
 export declare enum ViewJustifyContent {
     FLEX_START = 0,
@@ -31,6 +36,7 @@ export declare enum ViewJustifyContent {
  * View align items enumerated constants.
  * Should be used to control how children are aligned along the cross axis.
  * Affects the vertical alignment in a row and horizontal alignment in a column.
+ * @see View.AlignItems
  */
 export declare enum ViewAlignItems {
     FLEX_START = 0,
@@ -43,6 +49,7 @@ export declare enum ViewAlignItems {
  * View align self constants.
  * Should be used to override individual child alignment along the cross axis.
  * Takes precedence over the container's alignItems setting.
+ * @see View.AlignSelf
  */
 export declare enum ViewAlignSelf {
     FLEX_START = 0,
@@ -55,6 +62,7 @@ export declare enum ViewAlignSelf {
  * Supported align content enumerated values.
  * Should be used when there are multiple lines of items.
  * Controls how lines are distributed along the cross axis.
+ * @see View.AlignContent
  */
 export declare enum ViewAlignContent {
     FLEX_START = 0,
@@ -62,5 +70,6 @@ export declare enum ViewAlignContent {
     CENTER = 2,
     STRETCH = 3,
     SPACE_BETWEEN = 4,
-    SPACE_AROUND = 5
+    SPACE_AROUND = 5,
+    SPACE_EVENLY = 6
 }

package/build/components/atoms/view/constants/index.d.ts

@@ -0,0 +1,8 @@
+export { ViewBorderColor, ViewBorderRadius, ViewBorderWidth } from './border';
+export { ViewBackgroundColor } from './color';
+export { ViewAlignContent, ViewAlignItems, ViewAlignSelf, ViewFlexDirection, ViewFlexWrap, ViewJustifyContent, } from './flex';
+export { ViewOverflow } from './overflow';
+export { ViewPosition } from './position';
+export { ViewBoxShadow } from './shadow';
+export { ViewSpacing } from './spacing';
+export { ViewTag } from './tag';

package/build/components/{view → atoms/view}/constants/overflow.d.ts

@@ -1,6 +1,7 @@
 /**
  * View component supported overflow enumerated constants.
  * Allows to control how children are measured and displayed.
+ * @see View.Overflow
  */
 export declare enum ViewOverflow {
     VISIBLE = 0,

package/build/components/{view → atoms/view}/constants/position.d.ts

@@ -1,6 +1,7 @@
 /**
  * Supported view position enumerated constants.
  * Allows to controle how view is positioned in layout.
+ * @see View.Position
  */
 export declare enum ViewPosition {
     RELATIVE = 0,

package/build/components/{view → atoms/view}/constants/shadow.d.ts

@@ -1,6 +1,7 @@
 /**
  * Supported box shadow enumerated constants.
  * Should be used to control view component box shadow.
+ * @see View.BoxShadow
  */
 export declare enum ViewBoxShadow {
     SM = 0,

package/build/components/atoms/view/constants/spacing.d.ts

@@ -0,0 +1,22 @@
+/**
+ * View component spacing enumerated contstants.
+ * Allows to control view margin and padding with properties.
+ * @see View.Spacing
+ */
+export declare enum ViewSpacing {
+    X6S = 0,
+    X5S = 1,
+    X4S = 2,
+    X3S = 3,
+    X2S = 4,
+    XS = 5,
+    SM = 6,
+    MD = 7,
+    LG = 8,
+    XL = 9,
+    X2L = 10,
+    X3L = 11,
+    X4L = 12,
+    X5L = 13,
+    X6L = 14
+}

package/build/components/{view → atoms/view}/constants/tag.d.ts

@@ -1,6 +1,7 @@
 /**
- * Supported by view component tags.
+ * Supported by view component enumerated tag constants.
  * All possible layout tags should be listed here.
+ * @see View.Tag
  */
 export declare enum ViewTag {
     DIV = 0,
@@ -12,13 +13,3 @@ export declare enum ViewTag {
     MAIN = 6,
     FOOTER = 7
 }
-export declare const VIEW_HTML_TAG: {
-    0: "div";
-    1: "figure";
-    2: "figcaption";
-    3: "article";
-    4: "section";
-    5: "header";
-    6: "main";
-    7: "footer";
-};

package/build/components/atoms/view/index.d.ts

@@ -0,0 +1,3 @@
+import type { ViewComponent, ViewLayoutEvent, ViewProperties } from './view.types';
+export declare const View: ViewComponent;
+export type { ViewComponent, ViewLayoutEvent, ViewProperties };

package/build/components/{view → atoms/view}/view.types.d.ts

@@ -1,5 +1,5 @@
-import type { Fraction, Position, PositionValue, Size, SizeValue } from '../../helpers';
-import type { Color } from '../../types';
+import type { Dimension, DimensionValue, Fraction, FractionValue } from '../../../helpers';
+import type { Color } from '../../../types';
 import type { FunctionComponent, PropsWithChildren } from 'react';
 import type { ViewAlignContent, ViewAlignItems, ViewAlignSelf, ViewBackgroundColor, ViewBorderColor, ViewBorderRadius, ViewBorderWidth, ViewBoxShadow, ViewFlexDirection, ViewFlexWrap, ViewJustifyContent, ViewOverflow, ViewPosition, ViewSpacing, ViewTag } from './constants';
 /**
@@ -10,7 +10,7 @@ export interface ViewLayoutEvent {
     width: number;
     height: number;
 }
-export interface ViewProps extends PropsWithChildren {
+export interface ViewProperties extends PropsWithChildren {
     /**
      * Allows to select view in tests.
      * @default undefined
@@ -32,28 +32,28 @@ export interface ViewProps extends PropsWithChildren {
     position?: ViewPosition;
     /**
      * Top position.
-     * @see Position
+     * @see Dimension
      * @default undefined
      */
-    top?: Position;
+    top?: Dimension;
     /**
      * Left position.
-     * @see Position
+     * @see Dimension
      * @default undefined
      */
-    left?: Position;
+    left?: Dimension;
     /**
      * Right position.
-     * @see Position
+     * @see Dimension
      * @default undefined
      */
-    right?: Position;
+    right?: Dimension;
     /**
      * Bottom position.
-     * @see Position
+     * @see Dimension
      * @default undefined
      */
-    bottom?: Position;
+    bottom?: Dimension;
     /**
      * View opacity.
      * Controls the transparency of the view.
@@ -85,10 +85,10 @@ export interface ViewProps extends PropsWithChildren {
     /**
      * View flex basis property.
      * Controls the initial size of a component before space distribution.
-     * @see Size
+     * @see Dimension
      * @default undefined
      */
-    flexBasis?: Size;
+    flexBasis?: Dimension;
     /**
      * View flex wrap property.
      * Controls whether children should wrap onto multiple lines.
@@ -128,7 +128,7 @@ export interface ViewProps extends PropsWithChildren {
      * Only applies when there is wrapping in the container.
      * Defines how multiple lines are spaced along the cross axis.
      * @see View.AlignContent
-     * @default View.AlignContent.FLEX_START
+     * @default undefined
      */
     alignContent?: ViewAlignContent;
     /**
@@ -181,40 +181,40 @@ export interface ViewProps extends PropsWithChildren {
     paddingBottom?: ViewSpacing;
     /**
      * Minimum width of the component.
-     * @see Size
+     * @see Dimension
      * @default undefined
      */
-    minWidth?: Size;
+    minWidth?: Dimension;
     /**
      * Width of the component.
-     * @see Size
+     * @see Dimension
      * @default undefined
      */
-    width?: Size;
+    width?: Dimension;
     /**
      * Maximum width of the component.
      * @see Size
      * @default undefined
      */
-    maxWidth?: Size;
+    maxWidth?: Dimension;
     /**
      * Minimum height of the component.
-     * @see Size
+     * @see Dimension
      * @default undefined
      */
-    minHeight?: Size;
+    minHeight?: Dimension;
     /**
      * Height of the component.
-     * @see Size
+     * @see Dimension
      * @default undefined
      */
-    height?: Size;
+    height?: Dimension;
     /**
      * Maximum height of the component.
-     * @see Size
+     * @see Dimension
      * @default undefined
      */
-    maxHeight?: Size;
+    maxHeight?: Dimension;
     /**
      * View component box shadow.
      * React Native's "New Architecture" is required on native.
@@ -295,14 +295,14 @@ export interface ViewProps extends PropsWithChildren {
      * @see View.BackgroundColor
      * @default View.BackgroundColor.TRANSPARENT
      */
-    backgroundColor?: ViewBackgroundColor | Color;
+    backgroundColor?: ViewBackgroundColor;
     /**
      * Callback function that is called when the layout of the view changes.
      * @param event Event containing the width and height of the view.
      */
     onLayout?(event: ViewLayoutEvent): void;
 }
-export type ViewComponent = FunctionComponent<ViewProps> & {
+export type ViewComponent = FunctionComponent<ViewProperties> & {
     Tag: Record<keyof typeof ViewTag, ViewTag>;
     Position: Record<keyof typeof ViewPosition, ViewPosition>;
     Overflow: Record<keyof typeof ViewOverflow, ViewOverflow>;
@@ -319,40 +319,54 @@ export type ViewComponent = FunctionComponent<ViewProps> & {
     BorderRadius: Record<keyof typeof ViewBorderRadius, ViewBorderRadius>;
     BackgroundColor: Record<keyof typeof ViewBackgroundColor, ViewBackgroundColor>;
 };
-export type StyledViewProps = Pick<ViewProps, 'position' | 'overflow' | 'flexWrap' | 'flexDirection' | 'justifyContent' | 'alignItems' | 'alignSelf' | 'alignContent'> & {
-    top?: PositionValue;
-    left?: PositionValue;
-    right?: PositionValue;
-    bottom?: PositionValue;
-    flexGrow?: number;
-    flexShrink?: number;
-    flexBasis?: SizeValue;
-    opacity?: number;
-    marginTop?: string;
-    paddingTop?: string;
-    marginLeft?: string;
-    paddingLeft?: string;
-    marginRight?: string;
-    paddingRight?: string;
-    marginBottom?: string;
-    paddingBottom?: string;
-    minWidth?: SizeValue;
-    width?: SizeValue;
-    maxWidth?: SizeValue;
-    minHeight?: SizeValue;
-    height?: SizeValue;
-    maxHeight?: SizeValue;
-    boxShadow?: string;
-    borderColor?: Color;
-    borderWidth: string;
-    borderWidthTop?: string;
-    borderWidthLeft?: string;
-    borderWidthRight?: string;
-    borderWidthBottom?: string;
-    borderRadius?: `${number}px` | '50%';
-    borderRadiusTopLeft?: `${number}px` | '50%';
-    borderRadiusTopRight?: `${number}px` | '50%';
-    borderRadiusBottomLeft?: `${number}px` | '50%';
-    borderRadiusBottomRight?: `${number}px` | '50%';
-    backgroundColor?: Color;
+/**
+ * Styled view properties type.
+ * Used to render view component on web.
+ */
+export type ViewStyledProperties = {
+    values: {
+        position: 'relative' | 'absolute';
+        top?: DimensionValue;
+        left?: DimensionValue;
+        right?: DimensionValue;
+        bottom?: DimensionValue;
+        opacity?: FractionValue;
+        overflow: 'visible' | 'hidden';
+        flexGrow?: number;
+        flexShrink?: number;
+        flexBasis?: DimensionValue;
+        flexWrap: 'nowrap' | 'wrap';
+        flexDirection: 'column' | 'row' | 'column-reverse' | 'row-reverse';
+        justifyContent: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
+        alignItems: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+        alignSelf: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+        alignContent: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around' | 'space-evenly';
+        marginTop?: number;
+        paddingTop?: number;
+        marginLeft?: number;
+        paddingLeft?: number;
+        marginRight?: number;
+        paddingRight?: number;
+        marginBottom?: number;
+        paddingBottom?: number;
+        minWidth?: DimensionValue;
+        width?: DimensionValue;
+        maxWidth?: DimensionValue;
+        minHeight?: DimensionValue;
+        height?: DimensionValue;
+        maxHeight?: DimensionValue;
+        boxShadow?: string;
+        borderColor?: Color;
+        borderWidth: number;
+        borderWidthTop?: number;
+        borderWidthLeft?: number;
+        borderWidthRight?: number;
+        borderWidthBottom?: number;
+        borderRadius?: number | '50%';
+        borderRadiusTopLeft?: number | '50%';
+        borderRadiusTopRight?: number | '50%';
+        borderRadiusBottomLeft?: number | '50%';
+        borderRadiusBottomRight?: number | '50%';
+        backgroundColor?: Color;
+    };
 };

package/build/components/index.d.ts

@@ -2,7 +2,5 @@ export { Gradient } from '../components/gradient';
 export type { GradientLinearComponent, GradientLinearProps, GradientObject, GradientStopComponent, GradientStopProps, } from '../components/gradient';
 export { Overlay } from '../components/overlay';
 export type { OverlayComponent, OverlayProps } from '../components/overlay';
-export { View } from '../components/view';
-export type { ViewComponent, ViewLayoutEvent, ViewProps, } from '../components/view';
-export { Text } from './atoms';
-export type { TextComponent, TextProperties, TextReference } from './atoms';
+export { Text, View } from './atoms';
+export type { TextComponent, TextMeasureCallback, TextProperties, TextReference, ViewComponent, ViewLayoutEvent, ViewProperties, } from './atoms';

package/build/contexts/theme/constants/color.d.ts

@@ -1,30 +1,30 @@
-export declare const COLOR_BACKGROUND_BASE_100 = "rgb(198,198,202)";
-export declare const COLOR_BACKGROUND_BASE_200 = "rgb(212,212,216)";
-export declare const COLOR_BACKGROUND_BASE_300 = "rgb(226,224,228)";
-export declare const COLOR_BACKGROUND_BASE_400 = "rgb(234,232,236)";
-export declare const COLOR_BACKGROUND_BASE_500 = "rgb(238,236,240)";
-export declare const COLOR_BACKGROUND_BASE_600 = "rgb(244,244,245)";
-export declare const COLOR_BACKGROUND_BASE_700 = "rgb(247,247,249)";
-export declare const COLOR_BACKGROUND_BASE_800 = "rgb(249,249,250)";
-export declare const COLOR_BACKGROUND_BASE_900 = "rgb(254,254,255)";
-export declare const COLOR_BACKGROUND_PRIMARY_100 = "rgb(102,102,116)";
-export declare const COLOR_BACKGROUND_PRIMARY_200 = "rgb(82,82,92)";
-export declare const COLOR_BACKGROUND_PRIMARY_300 = "rgb(74,74,88)";
-export declare const COLOR_BACKGROUND_PRIMARY_400 = "rgb(63,63,70)";
-export declare const COLOR_BACKGROUND_PRIMARY_500 = "rgb(49,49,56)";
-export declare const COLOR_BACKGROUND_PRIMARY_600 = "rgb(39,39,42)";
-export declare const COLOR_BACKGROUND_PRIMARY_700 = "rgb(30,30,34)";
-export declare const COLOR_BACKGROUND_PRIMARY_800 = "rgb(24,24,27)";
-export declare const COLOR_BACKGROUND_PRIMARY_900 = "rgb(6,6,14)";
-export declare const COLOR_BORDER_BASE_100 = "rgb(253,252,254)";
-export declare const COLOR_BORDER_BASE_200 = "rgb(249,249,250)";
-export declare const COLOR_BORDER_BASE_300 = "rgb(247,247,249)";
-export declare const COLOR_BORDER_BASE_400 = "rgb(244,244,245)";
-export declare const COLOR_BORDER_BASE_500 = "rgb(224,224,238)";
-export declare const COLOR_BORDER_BASE_600 = "rgb(218,218,234)";
-export declare const COLOR_BORDER_BASE_700 = "rgb(216,216,228)";
-export declare const COLOR_BORDER_BASE_800 = "rgb(212,212,216)";
-export declare const COLOR_BORDER_BASE_900 = "rgb(198,198,202)";
+export declare const COLOR_BACKGROUND_BASE_100 = "rgb(215,215,220)";
+export declare const COLOR_BACKGROUND_BASE_200 = "rgb(220,220,225)";
+export declare const COLOR_BACKGROUND_BASE_300 = "rgb(225,225,230)";
+export declare const COLOR_BACKGROUND_BASE_400 = "rgb(230,230,235)";
+export declare const COLOR_BACKGROUND_BASE_500 = "rgb(235,235,240)";
+export declare const COLOR_BACKGROUND_BASE_600 = "rgb(240,240,245)";
+export declare const COLOR_BACKGROUND_BASE_700 = "rgb(245,245,250)";
+export declare const COLOR_BACKGROUND_BASE_800 = "rgb(250,250,255)";
+export declare const COLOR_BACKGROUND_BASE_900 = "rgb(255,255,255)";
+export declare const COLOR_BACKGROUND_PRIMARY_100 = "rgb(40,40,45)";
+export declare const COLOR_BACKGROUND_PRIMARY_200 = "rgb(35,35,40)";
+export declare const COLOR_BACKGROUND_PRIMARY_300 = "rgb(30,30,35)";
+export declare const COLOR_BACKGROUND_PRIMARY_400 = "rgb(25,25,30)";
+export declare const COLOR_BACKGROUND_PRIMARY_500 = "rgb(20,20,25)";
+export declare const COLOR_BACKGROUND_PRIMARY_600 = "rgb(15,15,20)";
+export declare const COLOR_BACKGROUND_PRIMARY_700 = "rgb(10,10,15)";
+export declare const COLOR_BACKGROUND_PRIMARY_800 = "rgb(5,5,10)";
+export declare const COLOR_BACKGROUND_PRIMARY_900 = "rgb(0,0,5)";
+export declare const COLOR_BORDER_BASE_100 = "rgb(235,235,240)";
+export declare const COLOR_BORDER_BASE_200 = "rgb(230,230,235)";
+export declare const COLOR_BORDER_BASE_300 = "rgb(225,225,230)";
+export declare const COLOR_BORDER_BASE_400 = "rgb(220,220,225)";
+export declare const COLOR_BORDER_BASE_500 = "rgb(215,215,220)";
+export declare const COLOR_BORDER_BASE_600 = "rgb(210,210,215)";
+export declare const COLOR_BORDER_BASE_700 = "rgb(205,205,210)";
+export declare const COLOR_BORDER_BASE_800 = "rgb(200,200,205)";
+export declare const COLOR_BORDER_BASE_900 = "rgb(195,195,200)";
 export declare const COLOR_FOREGROUND_BASE_100 = "rgb(200,200,205)";
 export declare const COLOR_FOREGROUND_BASE_200 = "rgb(175,175,180)";
 export declare const COLOR_FOREGROUND_BASE_300 = "rgb(150,150,155)";

package/build/contexts/theme/hooks/use-theme-style-sheet.d.ts

@@ -644,64 +644,64 @@ export declare const useThemeStyleSheet: () => {
     borderRadiusBaseXL: {
         borderRadius: number;
     };
-    borderRadiusTopLeftBaseXS: {
+    borderTopLeftRadiusBaseXS: {
         borderTopLeftRadius: number;
     };
-    borderRadiusTopLeftBaseSM: {
+    borderTopLeftRadiusBaseSM: {
         borderTopLeftRadius: number;
     };
-    borderRadiusTopLeftBaseMD: {
+    borderTopLeftRadiusBaseMD: {
         borderTopLeftRadius: number;
     };
-    borderRadiusTopLeftBaseLG: {
+    borderTopLeftRadiusBaseLG: {
         borderTopLeftRadius: number;
     };
-    borderRadiusTopLeftBaseXL: {
+    borderTopLeftRadiusBaseXL: {
         borderTopLeftRadius: number;
     };
-    borderRadiusTopRightBaseXS: {
+    borderTopRightRadiusBaseXS: {
         borderTopRightRadius: number;
     };
-    borderRadiusTopRightBaseSM: {
+    borderTopRightRadiusBaseSM: {
         borderTopRightRadius: number;
     };
-    borderRadiusTopRightBaseMD: {
+    borderTopRightRadiusBaseMD: {
         borderTopRightRadius: number;
     };
-    borderRadiusTopRightBaseLG: {
+    borderTopRightRadiusBaseLG: {
         borderTopRightRadius: number;
     };
-    borderRadiusTopRightBaseXL: {
+    borderTopRightRadiusBaseXL: {
         borderTopRightRadius: number;
     };
-    borderRadiusBottomLeftBaseXS: {
+    borderBottomLeftRadiusBaseXS: {
         borderBottomLeftRadius: number;
     };
-    borderRadiusBottomLeftBaseSM: {
+    borderBottomLeftRadiusBaseSM: {
         borderBottomLeftRadius: number;
     };
-    borderRadiusBottomLeftBaseMD: {
+    borderBottomLeftRadiusBaseMD: {
         borderBottomLeftRadius: number;
     };
-    borderRadiusBottomLeftBaseLG: {
+    borderBottomLeftRadiusBaseLG: {
         borderBottomLeftRadius: number;
     };
-    borderRadiusBottomLeftBaseXL: {
+    borderBottomLeftRadiusBaseXL: {
         borderBottomLeftRadius: number;
     };
-    borderRadiusBottomRightBaseXS: {
+    borderBottomRightRadiusBaseXS: {
         borderBottomRightRadius: number;
     };
-    borderRadiusBottomRightBaseSM: {
+    borderBottomRightRadiusBaseSM: {
         borderBottomRightRadius: number;
     };
-    borderRadiusBottomRightBaseMD: {
+    borderBottomRightRadiusBaseMD: {
         borderBottomRightRadius: number;
     };
-    borderRadiusBottomRightBaseLG: {
+    borderBottomRightRadiusBaseLG: {
         borderBottomRightRadius: number;
     };
-    borderRadiusBottomRightBaseXL: {
+    borderBottomRightRadiusBaseXL: {
         borderBottomRightRadius: number;
     };
 };