@bloomreach/react-banana-ui 1.27.0 → 1.27.1

package/dist/utils/filter-style-props.d.ts

@@ -1,45 +1,45 @@
 /**
  * Filters out style-related props from the given props object based on the provided style handlers.
  */
-export default function filterStyleProps<T extends Record<string, any>>(props: Record<string, any>, styleHandlers?: {
+export default function filterStyleProps<T extends Record<string, unknown>>(props: Record<string, unknown>, styleHandlers?: {
     display: [string, (value: any) => string];
+    backgroundColor: [string, (value: any) => string];
+    borderEndEndRadius: [string, (value: any) => string];
+    borderEndStartRadius: [string, (value: any) => string];
+    borderRadius: [string, (value: any) => string];
+    borderStartEndRadius: [string, (value: any) => string];
+    borderStartStartRadius: [string, (value: any) => string];
+    alignSelf: [string, (value: any) => string];
     flex: [string, (value: any) => string];
+    flexBasis: [string, (value: any) => string];
     flexGrow: [string, (value: any) => string];
     flexShrink: [string, (value: any) => string];
-    flexBasis: [string, (value: any) => string];
-    order: [string, (value: any) => string];
-    alignSelf: [string, (value: any) => string];
     justifySelf: [string, (value: any) => string];
+    order: [string, (value: any) => string];
     overflow: [string, (value: any) => string];
+    bottom: [string, (value: any) => string];
+    insetInlineEnd: [string, (value: any) => string];
+    insetInlineStart: [string, (value: any) => string];
+    position: [string, (value: any) => string];
+    top: [string, (value: any) => string];
+    height: [string, (value: any) => string];
+    maxHeight: [string, (value: any) => string];
+    maxWidth: [string, (value: any) => string];
+    minHeight: [string, (value: any) => string];
+    minWidth: [string, (value: any) => string];
+    width: [string, (value: any) => string];
     margin: [string, (value: any) => string];
-    marginBlockStart: [string, (value: any) => string];
-    marginBlockEnd: [string, (value: any) => string];
     marginBlock: [string, (value: any) => string];
-    marginInlineStart: [string, (value: any) => string];
-    marginInlineEnd: [string, (value: any) => string];
+    marginBlockEnd: [string, (value: any) => string];
+    marginBlockStart: [string, (value: any) => string];
     marginInline: [string, (value: any) => string];
+    marginInlineEnd: [string, (value: any) => string];
+    marginInlineStart: [string, (value: any) => string];
     padding: [string, (value: any) => string];
-    paddingBlockStart: [string, (value: any) => string];
-    paddingBlockEnd: [string, (value: any) => string];
     paddingBlock: [string, (value: any) => string];
-    paddingInlineStart: [string, (value: any) => string];
-    paddingInlineEnd: [string, (value: any) => string];
+    paddingBlockEnd: [string, (value: any) => string];
+    paddingBlockStart: [string, (value: any) => string];
     paddingInline: [string, (value: any) => string];
-    width: [string, (value: any) => string];
-    minWidth: [string, (value: any) => string];
-    maxWidth: [string, (value: any) => string];
-    height: [string, (value: any) => string];
-    minHeight: [string, (value: any) => string];
-    maxHeight: [string, (value: any) => string];
-    backgroundColor: [string, (value: any) => string];
-    borderRadius: [string, (value: any) => string];
-    borderStartStartRadius: [string, (value: any) => string];
-    borderStartEndRadius: [string, (value: any) => string];
-    borderEndStartRadius: [string, (value: any) => string];
-    borderEndEndRadius: [string, (value: any) => string];
-    position: [string, (value: any) => string];
-    top: [string, (value: any) => string];
-    bottom: [string, (value: any) => string];
-    insetInlineStart: [string, (value: any) => string];
-    insetInlineEnd: [string, (value: any) => string];
+    paddingInlineEnd: [string, (value: any) => string];
+    paddingInlineStart: [string, (value: any) => string];
 }): T;

package/dist/utils/hooks/index.d.ts

@@ -1,4 +1,4 @@
+export { default as useElementWidth } from './use-element-width';
 export { default as useHover } from './use-hover';
 export { default as useStyleProps } from './use-style-props';
-export { default as useElementWidth } from './use-element-width';
 export * from './use-style-props';

package/dist/utils/hooks/use-controlled-value.d.ts

@@ -17,5 +17,5 @@ export interface UseControlledProps<Value> {
      */
     state?: string;
 }
-declare const useControlledValue: <Value>(props: UseControlledProps<Value>) => [Value | undefined, (newValue: Value) => void];
+declare const useControlledValue: <Value>(props: UseControlledProps<Value>) => [undefined | Value, (newValue: Value) => void];
 export default useControlledValue;

package/dist/utils/hooks/use-hover.d.ts

@@ -1,11 +1,11 @@
 import { MouseEventHandler } from 'react';
-export default function useHover<T = Element>({ onEnter, onLeave, }?: {
+export default function useHover<T = Element>({ onEnter, onLeave, }?: undefined | {
     onEnter?: MouseEventHandler<T>;
     onLeave?: MouseEventHandler<T>;
-} | undefined): {
-    hovered: boolean;
+}): {
     handlers: {
         onMouseEnter: MouseEventHandler<T>;
         onMouseLeave: MouseEventHandler<T>;
     };
+    hovered: boolean;
 };

package/dist/utils/types/index.d.ts

@@ -1,3 +1,3 @@
-export * from './styles.types';
-export type { Simplify } from './simplify';
 export type * from './polymorphic-prop.types';
+export type { Simplify } from './simplify';
+export type * from './styles.types';

package/dist/utils/types/polymorphic-prop.types.d.ts

@@ -1,12 +1,12 @@
-export type AsProp<RootComponent extends React.ElementType> = {
+export interface AsProp<RootComponent extends React.ElementType> {
     as?: RootComponent;
-};
-export type VariantMapping<DefaultComponent extends React.ElementType = React.ElementType> = {
-    default: DefaultComponent;
-};
-export type ResolveRoot<RootElement extends React.ElementType | undefined, Variant extends keyof VariantMap | undefined, VariantMap extends VariantMapping> = RootElement extends React.ElementType ? RootElement : Variant extends keyof VariantMap ? VariantMap[Variant] : VariantMap['default'];
-export type PolymorphicComponentPropsWithoutRef<RootComponent extends React.ElementType, Props = Record<string, never>> = React.PropsWithChildren<Props & AsProp<RootComponent>> & Omit<React.ComponentPropsWithoutRef<RootComponent>, keyof (AsProp<RootComponent> & Props)>;
+}
+export type PolymorphicComponentPropsWithoutRef<RootComponent extends React.ElementType, Props = Record<string, never>> = Omit<React.ComponentPropsWithoutRef<RootComponent>, keyof (AsProp<RootComponent> & Props)> & React.PropsWithChildren<AsProp<RootComponent> & Props>;
 export type PolymorphicComponentPropsWithRef<RootComponent extends React.ElementType, Props = Record<string, never>> = PolymorphicComponentPropsWithoutRef<RootComponent, Props> & {
     ref?: PolymorphicRef<RootComponent>;
 };
 export type PolymorphicRef<RootComponent extends React.ElementType> = React.ComponentPropsWithRef<RootComponent>['ref'];
+export type ResolveRoot<RootElement extends React.ElementType | undefined, Variant extends keyof VariantMap | undefined, VariantMap extends VariantMapping> = RootElement extends React.ElementType ? RootElement : Variant extends keyof VariantMap ? VariantMap[Variant] : VariantMap['default'];
+export interface VariantMapping<DefaultComponent extends React.ElementType = React.ElementType> {
+    default: DefaultComponent;
+}

package/dist/utils/types/slots.types.d.ts

@@ -1,21 +1,21 @@
-type SlotNames = 'Description' | 'ActionsContainer';
-type Slots = {
-    [key in SlotNames]?: React.ReactNode;
-};
-type SlotContextProps = {
+interface SlotContextProps {
+    context?: Record<string, unknown>;
     registerSlot: (name: SlotNames, contents: React.ReactNode) => void;
     unregisterSlot: (name: SlotNames) => void;
-    context?: Record<string, unknown>;
+}
+type SlotNames = 'ActionsContainer' | 'Description';
+interface SlotProps {
+    children: ((context: SlotContextProps['context']) => React.ReactNode) | React.ReactNode;
+    name: SlotNames;
+}
+type Slots = {
+    [key in SlotNames]?: React.ReactNode;
 };
-type UseSlotsProps = {
+interface UseSlotsProps {
     slotNames: SlotNames[];
-};
-type UseSlotsPropsReturn = {
-    slots: Slots;
+}
+interface UseSlotsPropsReturn {
     contextValue: SlotContextProps;
-};
-type SlotProps = {
-    name: SlotNames;
-    children: React.ReactNode | ((context: SlotContextProps['context']) => React.ReactNode);
-};
-export type { SlotNames, Slots, SlotContextProps, UseSlotsProps, UseSlotsPropsReturn, SlotProps };
+    slots: Slots;
+}
+export type { SlotContextProps, SlotNames, SlotProps, Slots, UseSlotsProps, UseSlotsPropsReturn };

package/dist/utils/types/styles.types.d.ts

@@ -1,13 +1,65 @@
 import { CSSProperties } from 'react';
-export type CSSSpacingValue = 'space-0x' | 'space-1x' | 'space-2x' | 'space-3x' | 'space-4x' | 'space-5x' | 'space-6x' | 'space-7x' | 'space-8x' | 'space-9x' | 'space-10x';
-export type CSSColorValue = 'accent-100' | 'accent-150' | 'accent-200' | 'accent-250' | 'accent-300' | 'accent-350' | 'accent-400' | 'accent-450' | 'accent-500' | 'accent-550' | 'accent-600' | 'accent-650' | 'accent-700' | 'accent-750' | 'accent-800' | 'accent-850' | 'blue-50' | 'blue-100' | 'blue-200' | 'blue-300' | 'blue-400' | 'blue-500' | 'blue-600' | 'blue-700' | 'gold-50' | 'gold-100' | 'gold-200' | 'gold-300' | 'gold-400' | 'gold-500' | 'gold-600' | 'gold-700' | 'green-50' | 'green-100' | 'green-200' | 'green-300' | 'green-400' | 'green-500' | 'green-600' | 'green-700' | 'neutral-000' | 'neutral-100' | 'neutral-200' | 'neutral-300' | 'neutral-400' | 'neutral-500' | 'neutral-600' | 'neutral-700' | 'orange-50' | 'orange-100' | 'orange-200' | 'orange-300' | 'orange-400' | 'orange-500' | 'orange-600' | 'orange-700' | 'red-50' | 'red-100' | 'red-200' | 'red-300' | 'red-400' | 'red-500' | 'red-600' | 'red-700';
+export interface BaseStyleProps extends CSSBackgroundProps, CSSBorderProps, CSSLayoutProps, CSSPositioningProps, CSSSizingProps, CSSSpacingProps {
+}
+export interface BoxStyleProps extends BaseStyleProps {
+    /**
+     * Display of the container.
+     * Use `Flex` component for flex related display.
+     */
+    display?: 'block' | 'inline' | 'inline-block' | 'none';
+}
+export interface CSSBackgroundProps {
+    /**
+     * The background color for the element.
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/background-color}
+     */
+    backgroundColor?: CSSColorValue;
+}
+export interface CSSBorderProps {
+    /**
+     * The border radius for the bottom end corner of the element, depending on the layout direction.
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-end-radius}
+     */
+    borderEndEndRadius?: CSSBorderValue;
+    /**
+     * The border radius for the bottom start corner of the element, depending on the layout direction.
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-start-radius}
+     */
+    borderEndStartRadius?: CSSBorderValue;
+    /**
+     * The border radius on all four sides of the element.
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius}
+     */
+    borderRadius?: CSSBorderValue;
+    /**
+     * The border radius for the top end corner of the element, depending on the layout direction.
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-end-radius}
+     */
+    borderStartEndRadius?: CSSBorderValue;
+    /**
+     * The border radius for the top start corner of the element, depending on the layout direction.
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-start-radius}
+     */
+    borderStartStartRadius?: CSSBorderValue;
+}
 export type CSSBorderValue = 'radius-0x' | 'radius-1x' | 'radius-2x' | 'radius-full' | 'radius-non';
+export type CSSColorValue = 'accent-100' | 'accent-150' | 'accent-200' | 'accent-250' | 'accent-300' | 'accent-350' | 'accent-400' | 'accent-450' | 'accent-500' | 'accent-550' | 'accent-600' | 'accent-650' | 'accent-700' | 'accent-750' | 'accent-800' | 'accent-850' | 'blue-50' | 'blue-100' | 'blue-200' | 'blue-300' | 'blue-400' | 'blue-500' | 'blue-600' | 'blue-700' | 'gold-50' | 'gold-100' | 'gold-200' | 'gold-300' | 'gold-400' | 'gold-500' | 'gold-600' | 'gold-700' | 'green-50' | 'green-100' | 'green-200' | 'green-300' | 'green-400' | 'green-500' | 'green-600' | 'green-700' | 'neutral-000' | 'neutral-100' | 'neutral-200' | 'neutral-300' | 'neutral-400' | 'neutral-500' | 'neutral-600' | 'neutral-700' | 'orange-50' | 'orange-100' | 'orange-200' | 'orange-300' | 'orange-400' | 'orange-500' | 'orange-600' | 'orange-700' | 'red-50' | 'red-100' | 'red-200' | 'red-300' | 'red-400' | 'red-500' | 'red-600' | 'red-700';
 export interface CSSLayoutProps {
+    /**
+     * Overrides the alignItems property of a flex or grid container.
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/align-self}
+     */
+    alignSelf?: CSSProperties['alignSelf'];
     /**
      * When used in a flex layout, specifies how the element will grow or shrink to fit the space available.
      * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/flex}
      */
     flex?: CSSProperties['flex'];
+    /**
+     * When used in a flex layout, specifies the initial main size of the element.
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis}
+     */
+    flexBasis?: CSSProperties['flexBasis'];
     /**
      * When used in a flex layout, specifies how the element will grow to fit the space available.
      * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow}
@@ -19,55 +71,86 @@ export interface CSSLayoutProps {
      */
     flexShrink?: CSSProperties['flexShrink'];
     /**
-     * When used in a flex layout, specifies the initial main size of the element.
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis}
+     * Specifies how the element is justified inside a flex or grid container.
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self}
      */
-    flexBasis?: CSSProperties['flexBasis'];
+    justifySelf?: CSSProperties['justifySelf'];
     /**
      * The layout order for the element within a flex or grid container.
      * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/order}
      */
     order?: CSSProperties['order'];
     /**
-     * Overrides the alignItems property of a flex or grid container.
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/align-self}
+     * Species what to do when the element's content is too long to fit its size.
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/overflow}
      */
-    alignSelf?: CSSProperties['alignSelf'];
+    overflow?: CSSProperties['overflow'];
+}
+export interface CSSPositioningProps {
     /**
-     * Specifies how the element is justified inside a flex or grid container.
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self}
+     * The bottom position for the element.
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/bottom}
      */
-    justifySelf?: CSSProperties['justifySelf'];
+    bottom?: CSSProperties['bottom'] | CSSSpacingValue;
     /**
-     * Species what to do when the element's content is too long to fit its size.
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/overflow}
+     * The logical end position for the element, depending on layout direction.
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end}
      */
-    overflow?: CSSProperties['overflow'];
+    insetInlineEnd?: CSSProperties['insetInlineEnd'] | CSSSpacingValue;
+    /**
+     * The logical start position for the element, depending on layout direction.
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start}
+     */
+    insetInlineStart?: CSSProperties['insetInlineStart'] | CSSSpacingValue;
+    /**
+     * Specifies how the element is positioned.
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/position}
+     */
+    position?: CSSProperties['position'];
+    /**
+     * The top position for the element.
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/top}
+     */
+    top?: CSSProperties['top'] | CSSSpacingValue;
 }
-export interface CSSSpacingProps {
+export interface CSSSizingProps {
     /**
-     * The margin for all four sides of the element.
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/margin}
+     * The height of the element.
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/height}
      */
-    margin?: CSSSpacingValue;
+    height?: CSSProperties['height'];
     /**
-     * The `margin-block-start` CSS property 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.
-     *
-     * It corresponds to the `margin-top`, `margin-right`, `margin-bottom`, or `margin-left` property depending
-     * on the values defined for `writing-mode`, `direction`, and `text-orientation`.
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-start}
+     * The maximum height of the element.
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/max-height}
      */
-    marginBlockStart?: CSSSpacingValue;
+    maxHeight?: CSSProperties['maxHeight'];
     /**
-     * The `margin-block-end` CSS property 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.
-     *
-     * It corresponds to the `margin-top`, `margin-right`, `margin-bottom`, or `margin-left` property depending
-     * on the values defined for `writing-mode`, `direction`, and `text-orientation`.
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-end}
+     * The maximum width of the element.
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/max-width}
      */
-    marginBlockEnd?: CSSSpacingValue;
+    maxWidth?: CSSProperties['maxWidth'];
+    /**
+     * The minimum height of the element.
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/min-height}
+     */
+    minHeight?: CSSProperties['minHeight'];
+    /**
+     * The minimum width of the element.
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/min-width}
+     */
+    minWidth?: CSSProperties['minWidth'];
+    /**
+     * The width of the element.
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/width}
+     */
+    width?: CSSProperties['width'];
+}
+export interface CSSSpacingProps {
+    /**
+     * The margin for all four sides of the element.
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/margin}
+     */
+    margin?: CSSSpacingValue;
     /**
      * The `margin-block` CSS shorthand property 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.
@@ -79,23 +162,23 @@ export interface CSSSpacingProps {
      */
     marginBlock?: CSSSpacingValue;
     /**
-     * The `margin-inline-start` CSS property defines the logical inline start margin of an element,
+     * The `margin-block-end` CSS property 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.
      *
      * It corresponds to the `margin-top`, `margin-right`, `margin-bottom`, or `margin-left` property depending
      * on the values defined for `writing-mode`, `direction`, and `text-orientation`.
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-start}
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-end}
      */
-    marginInlineStart?: CSSSpacingValue;
+    marginBlockEnd?: CSSSpacingValue;
     /**
-     * The `margin-inline-end` CSS property defines the logical inline end margin of an element,
+     * The `margin-block-start` CSS property 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.
      *
-     * In other words, it corresponds to the `margin-top`, `margin-right`, `margin-bottom` or `margin-left` property
-     * depending on the values defined for writing-mode, direction, and text-orientation.
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-end}
+     * It corresponds to the `margin-top`, `margin-right`, `margin-bottom`, or `margin-left` property depending
+     * on the values defined for `writing-mode`, `direction`, and `text-orientation`.
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-start}
      */
-    marginInlineEnd?: CSSSpacingValue;
+    marginBlockStart?: CSSSpacingValue;
     /**
      * The margin-inline CSS shorthand property 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.
@@ -106,6 +189,24 @@ export interface CSSSpacingProps {
      * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline}
      */
     marginInline?: CSSSpacingValue;
+    /**
+     * The `margin-inline-end` CSS property 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.
+     *
+     * In other words, it corresponds to the `margin-top`, `margin-right`, `margin-bottom` or `margin-left` property
+     * depending on the values defined for writing-mode, direction, and text-orientation.
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-end}
+     */
+    marginInlineEnd?: CSSSpacingValue;
+    /**
+     * The `margin-inline-start` CSS property 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.
+     *
+     * It corresponds to the `margin-top`, `margin-right`, `margin-bottom`, or `margin-left` property depending
+     * on the values defined for `writing-mode`, `direction`, and `text-orientation`.
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-start}
+     */
+    marginInlineStart?: CSSSpacingValue;
     /**
      * The padding for all four sides of the element.
      * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/padding}
@@ -115,7 +216,7 @@ export interface CSSSpacingProps {
      *
      * @see {@link }
      */
-    paddingBlockStart?: CSSSpacingValue;
+    paddingBlock?: CSSSpacingValue;
     /**
      *
      * @see {@link }
@@ -125,168 +226,67 @@ export interface CSSSpacingProps {
      *
      * @see {@link }
      */
-    paddingBlock?: CSSSpacingValue;
-    /**
-     * The padding for the logical start side of the element, depending on layout direction.
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-start}
-     */
-    paddingInlineStart?: CSSSpacingValue;
-    /**
-     * The padding for the logical end side of an element, depending on layout direction.
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-end}
-     */
-    paddingInlineEnd?: CSSSpacingValue;
+    paddingBlockStart?: CSSSpacingValue;
     /**
      * The padding for both the logical inline start and end sides of the element.
      * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline}
      */
     paddingInline?: CSSSpacingValue;
-}
-export interface CSSSizingProps {
-    /**
-     * The width of the element.
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/width}
-     */
-    width?: CSSProperties['width'];
-    /**
-     * The minimum width of the element.
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/min-width}
-     */
-    minWidth?: CSSProperties['minWidth'];
-    /**
-     * The maximum width of the element.
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/max-width}
-     */
-    maxWidth?: CSSProperties['maxWidth'];
-    /**
-     * The height of the element.
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/height}
-     */
-    height?: CSSProperties['height'];
-    /**
-     * The minimum height of the element.
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/min-height}
-     */
-    minHeight?: CSSProperties['minHeight'];
-    /**
-     * The maximum height of the element.
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/max-height}
-     */
-    maxHeight?: CSSProperties['maxHeight'];
-}
-export interface CSSBackgroundProps {
-    /**
-     * The background color for the element.
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/background-color}
-     */
-    backgroundColor?: CSSColorValue;
-}
-export interface CSSBorderProps {
-    /**
-     * The border radius on all four sides of the element.
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius}
-     */
-    borderRadius?: CSSBorderValue;
-    /**
-     * The border radius for the top start corner of the element, depending on the layout direction.
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-start-radius}
-     */
-    borderStartStartRadius?: CSSBorderValue;
-    /**
-     * The border radius for the top end corner of the element, depending on the layout direction.
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-end-radius}
-     */
-    borderStartEndRadius?: CSSBorderValue;
     /**
-     * The border radius for the bottom start corner of the element, depending on the layout direction.
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-start-radius}
-     */
-    borderEndStartRadius?: CSSBorderValue;
-    /**
-     * The border radius for the bottom end corner of the element, depending on the layout direction.
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-end-radius}
-     */
-    borderEndEndRadius?: CSSBorderValue;
-}
-export interface CSSPositioningProps {
-    /**
-     * Specifies how the element is positioned.
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/position}
-     */
-    position?: CSSProperties['position'];
-    /**
-     * The top position for the element.
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/top}
-     */
-    top?: CSSSpacingValue | CSSProperties['top'];
-    /**
-     * The bottom position for the element.
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/bottom}
-     */
-    bottom?: CSSSpacingValue | CSSProperties['bottom'];
-    /**
-     * The logical start position for the element, depending on layout direction.
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start}
+     * The padding for the logical end side of an element, depending on layout direction.
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-end}
      */
-    insetInlineStart?: CSSSpacingValue | CSSProperties['insetInlineStart'];
+    paddingInlineEnd?: CSSSpacingValue;
     /**
-     * The logical end position for the element, depending on layout direction.
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end}
+     * The padding for the logical start side of the element, depending on layout direction.
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-start}
      */
-    insetInlineEnd?: CSSSpacingValue | CSSProperties['insetInlineEnd'];
-}
-export interface BaseStyleProps extends CSSLayoutProps, CSSSpacingProps, CSSSizingProps, CSSBackgroundProps, CSSBorderProps, CSSPositioningProps {
+    paddingInlineStart?: CSSSpacingValue;
 }
-export interface BoxStyleProps extends BaseStyleProps {
+export type CSSSpacingValue = 'space-0x' | 'space-1x' | 'space-2x' | 'space-3x' | 'space-4x' | 'space-5x' | 'space-6x' | 'space-7x' | 'space-8x' | 'space-9x' | 'space-10x';
+export interface FlexStyleProps extends BaseStyleProps {
     /**
-     * Display of the container.
-     * Use `Flex` component for flex related display.
+     * The distribution of space around child items along the cross axis.
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/align-content}
      */
-    display?: 'none' | 'block' | 'inline' | 'inline-block';
-}
-export interface FlexStyleProps extends BaseStyleProps {
+    alignContent?: CSSProperties['alignContent'];
     /**
-     * Flex display of the container.
+     * The alignment of children within their container.
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/align-items}
      */
-    display?: 'none' | 'flex' | 'inline-flex';
+    alignItems?: CSSProperties['alignItems'];
     /**
-     * Whether to wrap items onto multiple lines.
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap}
+     * The space to display between columns.
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap}
      */
-    wrap?: CSSProperties['flexWrap'];
+    columnGap?: CSSSpacingValue;
     /**
      * The direction in which to layout children.
      * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction}
      */
     direction?: CSSProperties['flexDirection'];
     /**
-     * The distribution of space around items along the main axis.
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content}
-     */
-    justifyContent?: CSSProperties['justifyContent'];
-    /**
-     * The alignment of children within their container.
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/align-items}
-     */
-    alignItems?: CSSProperties['alignItems'];
-    /**
-     * The distribution of space around child items along the cross axis.
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/align-content}
+     * Flex display of the container.
      */
-    alignContent?: CSSProperties['alignContent'];
+    display?: 'flex' | 'inline-flex' | 'none';
     /**
      * The space to display between both rows and columns.
      * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/gap}
      */
     gap?: CSSSpacingValue;
     /**
-     * The space to display between columns.
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap}
+     * The distribution of space around items along the main axis.
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content}
      */
-    columnGap?: CSSSpacingValue;
+    justifyContent?: CSSProperties['justifyContent'];
     /**
      * The space to display between rows.
      * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap}
      */
     rowGap?: CSSSpacingValue;
+    /**
+     * Whether to wrap items onto multiple lines.
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap}
+     */
+    wrap?: CSSProperties['flexWrap'];
 }