@indoqa/style-system - npm Package Compare versions

Comparing version 1.3.2-rc.2 to 1.4.0-rc.4

CHANGELOG.md

@@ -1,7 +0,11 @@
-# v1.3.2 | TBA
+# v1.4.0 | TBA
+* Add properties `display`, `maxWidth`, `minWidth`, `maxHeight`, `minHeight` to `Flex`and `Box`.
+* Add properties  properties `uppercase`, `wordBreakAll`, `wordWrapAll` to `Flex`, `Box' and `Text`.
 * Add properties for shadows (`shadow`) and radius (`r`, `rt`, `rb`, `rl`, `rr`, `rtl`, `rtr`, `rbl`, `rbr`) to `Flex` and `Box`.
+* Add often used event props onClick, onMouseDown, onMouseOut, onMouseOver, onScroll to Flex, Box and Text.
+* Add often used CSS style properties: cursor => pointer, overflow => hidden, text-decoration => underline
+* Fix a bug if the style system provides default values for a particular property (e.g. height) and these default values 
+are not set for styles put into media queries.
 * Fix a bug with the flex-shrink property of Flex, Box and Text. The bug made it impossible to set the value to 0.
 * Fix a bug with the flex-basis property of Flex, Box and Text. The bug made it impossible to set the value to 0.
-* Add often used event props onClick, onMouseDown, onMouseOut, onMouseOver, onScroll to Flex, Box and Text.
-* Add often used CSS style properties: cursor => pointer, overflow => hidden, text-decoration => underline
 * Fix bug in ColRow: if a size array was provided, the last size was not calculated correctly
@@ -29,4 +33,4 @@ * minor library upgrades
 * Remove unnecessary exports from module exports
-* Support a property 'testId' in Box, Flex, Text, Grid, Row, Panel, ColRow, Col. 
-  This prop creates a 'data-test' attribute which is useful in e2e testing. 
+* Support a property `testId` in Box, Flex, Text, Grid, Row, Panel, ColRow, Col. 
+  This prop creates a `data-test` attribute which is useful in e2e testing. 
 * Upgrade to Fela 10.2.4
@@ -33,0 +37,0 @@ * Set base font size in renderRebootCSS to theme.fontSizes.text

dist/components/base.d.ts

 import { IStyle } from 'fela';
 import { BaseTheme } from '..';
 import { BoxModelProps, FlexChildProps, FontProps, MarginProps, PaddingProps, StylingProps, WithBaseTheme } from './types';
-export declare const createBoxModelCSSProps: ({ inline, width, height, fullWidth, fullHeight }: BoxModelProps) => {
-    display: string;
-    width: string | number;
-    height: string | number;
-};
-export declare const createFlexChildCSSProps: ({ grow, shrink, basis, order, align }: FlexChildProps) => IStyle;
-export declare function createStylingCSSProps<T extends BaseTheme>({ bg, cursorPointer, overflowHidden, shadow, r, rt, rb, rl, rr, rtl, rtr, rbl, rbr }: StylingProps<T> & WithBaseTheme, theme: BaseTheme): IStyle;
-export declare function createFontCSSProps<T extends BaseTheme>({ fontStyle, fontSize, color, bold, italic, underline, ellipsis, textAlign }: FontProps<T> & WithBaseTheme, theme: BaseTheme): IStyle;
-export declare const createMarginCSSProps: ({ m, mt, mb, ml, mr, mx, my }: MarginProps & WithBaseTheme, theme: BaseTheme) => {};
-export declare const createPaddingCSSProps: ({ p, pt, pb, pl, pr, px, py }: PaddingProps & WithBaseTheme, theme: BaseTheme) => {};
+export declare const createBoxModelCSSProps: <T extends BaseTheme>(props: BoxModelProps) => {};
+export declare const createFlexChildCSSProps: <T extends BaseTheme>(props: FlexChildProps, theme: BaseTheme, outsideMediaQuery: boolean) => IStyle;
+export declare function createStylingCSSProps<T extends BaseTheme>(props: StylingProps<T> & WithBaseTheme, theme: BaseTheme): IStyle;
+export declare function createFontCSSProps<T extends BaseTheme>(props: FontProps<T> & WithBaseTheme, theme: BaseTheme): IStyle;
+export declare const createMarginCSSProps: (props: MarginProps & WithBaseTheme, theme: BaseTheme) => {};
+export declare const createPaddingCSSProps: (props: PaddingProps & WithBaseTheme, theme: BaseTheme) => {};

dist/components/Box.d.ts

@@ -5,3 +5,3 @@ /// <reference types="react" />
 import { BaseProps, BoxProps, FlatBoxProps, HtmlDivAttributesWithoutStyle } from './types';
-export declare function createBoxCSSStyle<T extends BaseTheme>(props: FlatBoxProps<T>, theme: BaseTheme): IStyle;
+export declare function createBoxCSSStyle<T extends BaseTheme>(props: FlatBoxProps<T>, theme: BaseTheme, outsideMediaQuery: boolean): IStyle;
 export declare function Box<T extends BaseTheme>(props: BoxProps<T> & BaseProps<T, HtmlDivAttributesWithoutStyle>): JSX.Element;
@@ -8,0 +8,0 @@ export declare function HeaderBox<T extends BaseTheme>(props: BoxProps<T> & BaseProps<T, HtmlDivAttributesWithoutStyle>): JSX.Element;

dist/components/extendBox.d.ts

 /// <reference types="react" />
 import { IStyle } from 'fela';
-export declare const extendBox: (styles: IStyle) => import("react").ComponentType<import("./types").BoxProps<import("..").BaseTheme> & import("./types").BaseProps<import("..").BaseTheme, Pick<import("react").HTMLAttributes<HTMLDivElement>, "color" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture">> & import("react-fela").FelaInjectedProps<import("./types").BoxProps<import("..").BaseTheme> & import("./types").BaseProps<import("..").BaseTheme, Pick<import("react").HTMLAttributes<HTMLDivElement>, "color" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture">>, any> & import("react").HTMLProps<HTMLElement>>;
+export declare const extendBox: (styles: IStyle) => import("react").ComponentType<import("./types").BoxProps<import("..").BaseTheme> & import("./types").BaseProps<import("..").BaseTheme, Pick<import("react").HTMLAttributes<HTMLDivElement>, "color" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture">> & import("react-fela").FelaInjectedProps<import("./types").BoxProps<import("..").BaseTheme> & import("./types").BaseProps<import("..").BaseTheme, Pick<import("react").HTMLAttributes<HTMLDivElement>, "color" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture">>, any> & import("react").HTMLProps<HTMLElement>>;

dist/components/Flex.d.ts

@@ -5,3 +5,3 @@ /// <reference types="react" />
 import { BaseProps, FlexContainerProps, FlexProps, HtmlDivAttributesWithoutStyle } from './types';
-export declare const createFlexContainerCSSStyle: ({ inline, direction, nowrap, center, justifyContent, alignItems, }: FlexContainerProps) => IStyle;
+export declare const createFlexContainerCSSStyle: <T extends BaseTheme>(props: FlexContainerProps, theme: T, outsideMediaQuery: boolean) => IStyle;
 export declare function Flex<T extends BaseTheme>(props: FlexProps<T> & BaseProps<T, HtmlDivAttributesWithoutStyle>): JSX.Element;
@@ -8,0 +8,0 @@ export declare function HeaderFlex<T extends BaseTheme>(props: FlexProps<T> & BaseProps<T, HtmlDivAttributesWithoutStyle>): JSX.Element;

dist/components/types.d.ts

@@ -19,5 +19,10 @@ import { BaseTheme } from '@indoqa/style-system';
 export interface BoxModelProps {
+    display?: Display;
     inline?: boolean;
     width?: number | string;
     height?: number | string;
+    maxWidth?: number | string;
+    maxHeight?: number | string;
+    minWidth?: number | string;
+    minHeight?: number | string;
     fullWidth?: boolean;
@@ -50,2 +55,5 @@ fullHeight?: boolean;
     underline?: boolean;
+    uppercase?: boolean;
+    wordBreakAll?: boolean;
+    wordWrapAll?: boolean;
 }
@@ -101,10 +109,10 @@ export interface MarginProps {
 }
-declare type Direction = 'column' | 'column-reverse' | 'row-reverse' | 'initial' | 'inherit';
-declare type AlignItems = 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'initial' | 'inherit';
-declare type JustifyContent = 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
-declare type Spacing = 0 | 1 | 2 | 3 | 4;
-declare type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'initial' | 'inherit';
+export declare type Display = 'inline' | 'block' | 'contents' | 'flex' | 'grid' | 'inline-block' | 'inline-flex' | 'inline-grid' | 'inline-table' | 'list-item' | 'run-in' | 'table' | 'table-caption' | 'table-column-group' | 'table-header-group' | 'table-footer-group' | 'table-row-group' | 'table-cell' | 'table-column' | 'table-row' | 'none' | 'initial' | 'inherit';
+export declare type Direction = 'column' | 'column-reverse' | 'row-reverse' | 'initial' | 'inherit';
+export declare type AlignItems = 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'initial' | 'inherit';
+export declare type JustifyContent = 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
+export declare type Spacing = 0 | 1 | 2 | 3 | 4;
+export declare type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'initial' | 'inherit';
 export declare type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 export declare type HtmlDivAttributesWithoutStyle = Omit<React.HTMLAttributes<HTMLDivElement>, 'style'>;
 export declare type HtmlSpanAttributesWithoutStyle = Omit<React.HTMLAttributes<HTMLSpanElement>, 'style'>;
-export {};

dist/components/utils.d.ts

@@ -9,3 +9,4 @@ import { IStyle } from 'fela';
 export declare function getPropsByBreakpoint(props: any, breakpoints: NamedBreakPoint[]): any[];
-export declare function createResponsiveStyles<T extends BaseTheme>(props: any & WithBaseTheme, styleFunction: any): IStyle;
+export declare type ResponsiveStyleFunction<T extends BaseTheme> = (props: any, theme: T, outsideMediaQuery: boolean) => IStyle;
+export declare function createResponsiveStyles<T extends BaseTheme>(props: any & WithBaseTheme, styleFunction: ResponsiveStyleFunction<T>): IStyle;
 export declare function mergeThemedStyles<T extends BaseTheme, P>(componentStyle: StyleFunction<T, P> | IStyle, passedStyle?: FelaStyle<T, P>): FelaStyle<T, P>;

dist/indoqa-style-system.cjs.js

@@ -57,2 +57,9 @@ 'use strict';
 }
+function __spreadArrays() {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+}
 
@@ -490,3 +497,3 @@ var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
     var groupedProps = getPropsByBreakpoint(props, sortedBreakpoints);
-    var styles = styleFunction(groupedProps[0], theme);
+    var styles = styleFunction(groupedProps[0], theme, true);
     for (var i = 0; i < sortedBreakpoints.length; i++) {
@@ -499,3 +506,3 @@ var breakpointProps = groupedProps[i + 1];
         Object.assign(styles, (_a = {},
-            _a[breakpointName] = styleFunction(breakpointProps, theme),
+            _a[breakpointName] = styleFunction(breakpointProps, theme, false),
             _a));
@@ -510,3 +517,3 @@ }
     if (passedStyle instanceof Array) {
-        return [componentStyle].concat(passedStyle);
+        return __spreadArrays([componentStyle], passedStyle);
     }
@@ -534,17 +541,58 @@ return [componentStyle, passedStyle];
 }
-var createBoxModelCSSProps = function (_a) {
-    var inline = _a.inline, width = _a.width, height = _a.height, fullWidth = _a.fullWidth, fullHeight = _a.fullHeight;
-    return ({
-        display: (inline) ? 'inline' : 'block',
-        width: (fullWidth) ? '100%' : width || 'auto',
-        height: (fullHeight) ? '100%' : height || 'auto',
-    });
+var createBoxModelCSSProps = function (props) {
+    var display = props.display, inline = props.inline, width = props.width, height = props.height, fullWidth = props.fullWidth, fullHeight = props.fullHeight, maxHeight = props.maxHeight, maxWidth = props.maxWidth, minHeight = props.minHeight, minWidth = props.minWidth;
+    var styles = {};
+    if (inline) {
+        Object.assign(styles, { display: 'inline' });
+    }
+    if (display) {
+        Object.assign(styles, { display: display });
+    }
+    if (fullWidth) {
+        Object.assign(styles, { width: '100%' });
+    }
+    else if (width) {
+        Object.assign(styles, { width: width });
+    }
+    if (maxWidth) {
+        Object.assign(styles, { maxWidth: maxWidth });
+    }
+    if (minWidth) {
+        Object.assign(styles, { minWidth: minWidth });
+    }
+    if (fullHeight) {
+        Object.assign(styles, { height: '100%' });
+    }
+    else if (height) {
+        Object.assign(styles, { height: height });
+    }
+    if (maxHeight) {
+        Object.assign(styles, { maxHeight: maxHeight });
+    }
+    if (minHeight) {
+        Object.assign(styles, { minHeight: minHeight });
+    }
+    return styles;
 };
-var createFlexChildCSSProps = function (_a) {
-    var grow = _a.grow, shrink = _a.shrink, basis = _a.basis, order = _a.order, align = _a.align;
-    var styles = {
-        flexGrow: grow || 0,
-        flexShrink: shrink === 0 ? 0 : shrink ? shrink : 1,
-        flexBasis: basis === 0 ? 0 : basis ? basis : 'auto',
-    };
+var createFlexChildCSSProps = function (props, theme, outsideMediaQuery) {
+    var grow = props.grow, shrink = props.shrink, basis = props.basis, order = props.order, align = props.align;
+    var styles = {};
+    if (grow !== undefined) {
+        Object.assign(styles, { flexGrow: grow });
+    }
+    else if (outsideMediaQuery) {
+        Object.assign(styles, { flexGrow: 0 });
+    }
+    if (shrink !== undefined) {
+        Object.assign(styles, { flexShrink: shrink });
+    }
+    else if (outsideMediaQuery) {
+        Object.assign(styles, { flexShrink: 1 });
+    }
+    if (basis !== undefined) {
+        Object.assign(styles, { flexBasis: basis });
+    }
+    else if (outsideMediaQuery) {
+        Object.assign(styles, { flexBasis: 'auto' });
+    }
     if (order !== undefined) {
@@ -564,4 +612,4 @@ Object.assign(styles, { order: order });
 }
-function createStylingCSSProps(_a, theme) {
-    var bg = _a.bg, cursorPointer = _a.cursorPointer, overflowHidden = _a.overflowHidden, shadow = _a.shadow, r = _a.r, rt = _a.rt, rb = _a.rb, rl = _a.rl, rr = _a.rr, rtl = _a.rtl, rtr = _a.rtr, rbl = _a.rbl, rbr = _a.rbr;
+function createStylingCSSProps(props, theme) {
+    var bg = props.bg, cursorPointer = props.cursorPointer, overflowHidden = props.overflowHidden, shadow = props.shadow, r = props.r, rt = props.rt, rb = props.rb, rl = props.rl, rr = props.rr, rtl = props.rtl, rtr = props.rtr, rbl = props.rbl, rbr = props.rbr;
     var styles = {};
@@ -613,4 +661,4 @@ if (bg) {
 }
-function createFontCSSProps(_a, theme) {
-    var fontStyle = _a.fontStyle, fontSize = _a.fontSize, color = _a.color, bold = _a.bold, italic = _a.italic, underline = _a.underline, ellipsis = _a.ellipsis, textAlign = _a.textAlign;
+function createFontCSSProps(props, theme) {
+    var fontStyle = props.fontStyle, fontSize = props.fontSize, color = props.color, bold = props.bold, italic = props.italic, underline = props.underline, ellipsis = props.ellipsis, textAlign = props.textAlign, uppercase = props.uppercase, wordBreakAll = props.wordBreakAll, wordWrapAll = props.wordWrapAll;
     var styles = {};
@@ -646,6 +694,15 @@ if (bold) {
     }
+    if (uppercase) {
+        Object.assign(styles, { textTransform: 'uppercase' });
+    }
+    if (wordBreakAll) {
+        Object.assign(styles, { wordBreak: 'break-all' });
+    }
+    if (wordWrapAll) {
+        Object.assign(styles, { wordWrap: 'break-word' });
+    }
     return styles;
 }
-var createMarginCSSProps = function (_a, theme) {
-    var m = _a.m, mt = _a.mt, mb = _a.mb, ml = _a.ml, mr = _a.mr, mx = _a.mx, my = _a.my;
+var createMarginCSSProps = function (props, theme) {
+    var m = props.m, mt = props.mt, mb = props.mb, ml = props.ml, mr = props.mr, mx = props.mx, my = props.my;
     var styles = {};
@@ -677,4 +734,4 @@ if (m !== undefined) {
 };
-var createPaddingCSSProps = function (_a, theme) {
-    var p = _a.p, pt = _a.pt, pb = _a.pb, pl = _a.pl, pr = _a.pr, px = _a.px, py = _a.py;
+var createPaddingCSSProps = function (props, theme) {
+    var p = props.p, pt = props.pt, pb = props.pb, pl = props.pl, pr = props.pr, px = props.px, py = props.py;
     var styles = {};
@@ -724,4 +781,4 @@ if (p !== undefined) {
 
-function createBoxCSSStyle(props, theme) {
-    return __assign({}, createBoxModelCSSProps(props), createMarginCSSProps(props, theme), createPaddingCSSProps(props, theme), createFlexChildCSSProps(props), createStylingCSSProps(props, theme), createFontCSSProps(props, theme));
+function createBoxCSSStyle(props, theme, outsideMediaQuery) {
+    return __assign(__assign(__assign(__assign(__assign(__assign({}, createBoxModelCSSProps(props)), createMarginCSSProps(props, theme)), createPaddingCSSProps(props, theme)), createFlexChildCSSProps(props, theme, outsideMediaQuery)), createStylingCSSProps(props, theme)), createFontCSSProps(props, theme));
 }
@@ -736,7 +793,7 @@ function themedBoxStyles(props) {
         var className = _a.className;
-        return React.createElement(as, __assign({ className: className, 'data-testid': testId, onClick: onClick,
+        return React.createElement(as, __assign(__assign({ className: className, 'data-testid': testId, onClick: onClick,
             onMouseDown: onMouseDown,
             onMouseOut: onMouseOut,
             onMouseOver: onMouseOver,
-            onScroll: onScroll }, htmlAttrs, { ref: innerRef }), children);
+            onScroll: onScroll }, htmlAttrs), { ref: innerRef }), children);
     }));
@@ -774,11 +831,23 @@ }
 
-var createFlexContainerCSSStyle = function (_a) {
-    var inline = _a.inline, direction = _a.direction, nowrap = _a.nowrap, center = _a.center, justifyContent = _a.justifyContent, alignItems = _a.alignItems;
-    var styles = ({
-        display: (inline) ? 'inline-flex' : 'flex',
-        flexDirection: direction || 'row',
-        flexWrap: (nowrap) ? 'nowrap' : 'wrap',
-        justifyContent: justifyContent || 'flex-start',
-        alignItems: alignItems || 'stretch',
-    });
+var createFlexContainerCSSStyle = function (props, theme, outsideMediaQuery) {
+    var inline = props.inline, direction = props.direction, nowrap = props.nowrap, center = props.center, justifyContent = props.justifyContent, alignItems = props.alignItems;
+    var styles = {};
+    if (inline) {
+        Object.assign(styles, { display: 'inline-flex' });
+    }
+    else {
+        Object.assign(styles, { display: 'flex' });
+    }
+    if (direction) {
+        Object.assign(styles, { flexDirection: direction });
+    }
+    if (nowrap) {
+        Object.assign(styles, { flexWrap: 'nowrap' });
+    }
+    if (justifyContent) {
+        Object.assign(styles, { justifyContent: justifyContent });
+    }
+    if (alignItems) {
+        Object.assign(styles, { alignItems: alignItems });
+    }
     if (center) {
@@ -794,4 +863,4 @@ var centerStyles = {
 };
-function createFlexCSSStyle(props, theme) {
-    return __assign({}, createBoxCSSStyle(props, theme), createFlexContainerCSSStyle(props));
+function createFlexCSSStyle(props, theme, outsideMediaQuery) {
+    return __assign(__assign({}, createBoxCSSStyle(props, theme, outsideMediaQuery)), createFlexContainerCSSStyle(props));
 }
@@ -806,7 +875,7 @@ function themedFlexStyles(props) {
         var className = _a.className;
-        return React.createElement(as, __assign({ className: className, 'data-testid': testId, onClick: onClick,
+        return React.createElement(as, __assign(__assign({ className: className, 'data-testid': testId, onClick: onClick,
             onMouseDown: onMouseDown,
             onMouseOut: onMouseOut,
             onMouseOver: onMouseOver,
-            onScroll: onScroll }, htmlAttrs, { ref: innerRef }), children);
+            onScroll: onScroll }, htmlAttrs), { ref: innerRef }), children);
     }));
@@ -842,4 +911,4 @@ }
 
-function createTextCSSStyle(props, theme) {
-    return __assign({ display: 'inline-block' }, createMarginCSSProps(props, theme), createPaddingCSSProps(props, theme), createFlexChildCSSProps(props), createFontCSSProps(props, theme), createStylingCSSProps(props, theme));
+function createTextCSSStyle(props, theme, outsideMediaQuery) {
+    return __assign(__assign(__assign(__assign(__assign({ display: 'inline-block' }, createMarginCSSProps(props, theme)), createPaddingCSSProps(props, theme)), createFlexChildCSSProps(props, theme, outsideMediaQuery)), createFontCSSProps(props, theme)), createStylingCSSProps(props, theme));
 }
@@ -854,7 +923,7 @@ function themedTextStyle(props) {
         var className = _a.className;
-        return React.createElement('span', __assign({ className: className, 'data-testid': testId, onClick: onClick,
+        return React.createElement('span', __assign(__assign({ className: className, 'data-testid': testId, onClick: onClick,
             onMouseDown: onMouseDown,
             onMouseOut: onMouseOut,
             onMouseOver: onMouseOver,
-            onScroll: onScroll }, htmlAttrs, { ref: innerRef }), children);
+            onScroll: onScroll }, htmlAttrs), { ref: innerRef }), children);
     }));
@@ -882,3 +951,3 @@ }
 function createBaseStyles(props, theme) {
-    return __assign({}, createPaddingCSSProps(props, theme), createFontCSSProps(props, theme), createStylingCSSProps(props, theme));
+    return __assign(__assign(__assign({}, createPaddingCSSProps(props, theme)), createFontCSSProps(props, theme)), createStylingCSSProps(props, theme));
 }
@@ -984,3 +1053,3 @@ function themedBoxStyles$1(props) {
 function createBaseStyles$1(props, theme) {
-    return __assign({}, createPaddingCSSProps(props, theme), createStylingCSSProps(props, theme));
+    return __assign(__assign({}, createPaddingCSSProps(props, theme)), createStylingCSSProps(props, theme));
 }
@@ -996,3 +1065,3 @@ var RowContainer = (function (_super) {
             var style = _a.style, spacing = _a.spacing, otherProps = __rest(_a, ["style", "spacing"]);
-            return (__assign({}, createResponsiveStyles(otherProps, createBaseStyles$1), { boxSizing: 'border-box', display: 'flex', flexWrap: 'wrap', width: '100%', marginTop: spacing, '&:first-child': {
+            return (__assign(__assign({}, createResponsiveStyles(otherProps, createBaseStyles$1)), { boxSizing: 'border-box', display: 'flex', flexWrap: 'wrap', width: '100%', marginTop: spacing, '&:first-child': {
                     marginTop: 0,
@@ -1027,4 +1096,4 @@ } }));
 
-function createBaseStyles$2(props, theme) {
-    return __assign({}, createBoxModelCSSProps(props), createMarginCSSProps(props, theme), createPaddingCSSProps(props, theme), createStylingCSSProps(props, theme));
+function createBaseStyles$2(props, theme, outsideMediaQuery) {
+    return __assign(__assign(__assign(__assign({}, createBoxModelCSSProps(props)), createMarginCSSProps(props, theme)), createPaddingCSSProps(props, theme)), createStylingCSSProps(props, theme));
 }
@@ -1039,3 +1108,3 @@ var GridContainer = (function (_super) {
             var maxWidth = _a.maxWidth, center = _a.center, otherProps = __rest(_a, ["maxWidth", "center"]);
-            return (__assign({ margin: center ? 'auto' : 0 }, createResponsiveStyles(otherProps, createBaseStyles$2), { boxSizing: 'border-box', maxWidth: maxWidth }));
+            return (__assign(__assign({ margin: center ? 'auto' : 0 }, createResponsiveStyles(otherProps, createBaseStyles$2)), { boxSizing: 'border-box', maxWidth: maxWidth }));
         };
@@ -1076,3 +1145,3 @@ var _a = this.props, children = _a.children, style = _a.style, center = _a.center, innerRef = _a.innerRef, testId = _a.testId, otherProps = __rest(_a, ["children", "style", "center", "innerRef", "testId"]);
 function createBaseStyles$3(props, theme) {
-    return __assign({}, createPaddingCSSProps(props, theme), createStylingCSSProps(props, theme));
+    return __assign(__assign({}, createPaddingCSSProps(props, theme)), createStylingCSSProps(props, theme));
 }
@@ -1087,3 +1156,3 @@ var RowContainer$1 = (function (_super) {
             var style = _a.style, minHeight = _a.minHeight, spacing = _a.spacing, height = _a.height, otherProps = __rest(_a, ["style", "minHeight", "spacing", "height"]);
-            return (__assign({}, createResponsiveStyles(otherProps, createBaseStyles$3), { boxSizing: 'border-box', display: 'flex', flexWrap: 'wrap', alignItems: 'stretch', width: '100%', minHeight: minHeight, ':first-child': {
+            return (__assign(__assign({}, createResponsiveStyles(otherProps, createBaseStyles$3)), { boxSizing: 'border-box', display: 'flex', flexWrap: 'wrap', alignItems: 'stretch', width: '100%', minHeight: minHeight, ':first-child': {
                     marginTop: "-" + spacing,
@@ -1138,3 +1207,3 @@ }, tablet: {
 function createBaseStyles$4(props, theme) {
-    return __assign({}, createPaddingCSSProps(props, theme), createFontCSSProps(props, theme), createStylingCSSProps(props, theme));
+    return __assign(__assign(__assign({}, createPaddingCSSProps(props, theme)), createFontCSSProps(props, theme)), createStylingCSSProps(props, theme));
 }
@@ -1149,3 +1218,3 @@ var PanelContainer = (function (_super) {
             var width = _a.width, size = _a.size, spacing = _a.spacing, otherProps = __rest(_a, ["width", "size", "spacing"]);
-            return (__assign({}, createResponsiveStyles(otherProps, createBaseStyles$4), { flexGrow: 1, flexShrink: 0, width: '100%', height: 'auto', overflow: 'hidden', marginTop: spacing, '@media (min-width: 768px)': {
+            return (__assign(__assign({}, createResponsiveStyles(otherProps, createBaseStyles$4)), { flexGrow: 1, flexShrink: 0, width: '100%', height: 'auto', overflow: 'hidden', marginTop: spacing, '@media (min-width: 768px)': {
                     width: '0',
@@ -1201,3 +1270,3 @@ flex: (isDefaultWidth(width) ? size : 0) + " 0 " + calcBasis(spacing, size, width),
     renderer.renderStatic(rebootCss);
-    renderer.renderStatic(__assign({}, props.fontStyles.base, { color: props.colors.text, fontSize: props.fontSizes.text }), 'body');
+    renderer.renderStatic(__assign(__assign({}, props.fontStyles.base), { color: props.colors.text, fontSize: props.fontSizes.text }), 'body');
     renderer.renderStatic(__assign({}, props.fontStyles.alt), 'h1, h2, h3, h4, h5, h6');
@@ -1230,2 +1299,158 @@ renderer.renderStatic({
 
+const minMaxWidth = /(!?\(\s*min(-device-)?-width).+\(\s*max(-device)?-width/i;
+const minWidth = /\(\s*min(-device)?-width/i;
+const maxMinWidth = /(!?\(\s*max(-device)?-width).+\(\s*min(-device)?-width/i;
+const maxWidth = /\(\s*max(-device)?-width/i;
+const isMinWidth = _testQuery(minMaxWidth, maxMinWidth, minWidth);
+const isMaxWidth = _testQuery(maxMinWidth, minMaxWidth, maxWidth);
+const minMaxHeight = /(!?\(\s*min(-device)?-height).+\(\s*max(-device)?-height/i;
+const minHeight = /\(\s*min(-device)?-height/i;
+const maxMinHeight = /(!?\(\s*max(-device)?-height).+\(\s*min(-device)?-height/i;
+const maxHeight = /\(\s*max(-device)?-height/i;
+const isMinHeight = _testQuery(minMaxHeight, maxMinHeight, minHeight);
+const isMaxHeight = _testQuery(maxMinHeight, minMaxHeight, maxHeight);
+const isPrint = /print/i;
+const isPrintOnly = /^print$/i;
+const maxValue = Number.MAX_VALUE;
+function _getQueryLength (length) {
+  length = /(-?\d*\.?\d+)(ch|em|ex|px|rem)/.exec(length);
+  if (length === null) {
+    return maxValue
+  }
+  let number = length[1];
+  const unit = length[2];
+  switch (unit) {
+    case 'ch':
+      number = parseFloat(number) * 8.8984375;
+      break
+    case 'em':
+    case 'rem':
+      number = parseFloat(number) * 16;
+      break
+    case 'ex':
+      number = parseFloat(number) * 8.296875;
+      break
+    case 'px':
+      number = parseFloat(number);
+      break
+  }
+  return +number
+}
+function _testQuery (doubleTestTrue, doubleTestFalse, singleTest) {
+  return function (query) {
+    if (doubleTestTrue.test(query)) {
+      return true
+    } else if (doubleTestFalse.test(query)) {
+      return false
+    }
+    return singleTest.test(query)
+  }
+}
+function _testIsPrint (a, b) {
+  const isPrintA = isPrint.test(a);
+  const isPrintOnlyA = isPrintOnly.test(a);
+  const isPrintB = isPrint.test(b);
+  const isPrintOnlyB = isPrintOnly.test(b);
+  if (isPrintA && isPrintB) {
+    if (!isPrintOnlyA && isPrintOnlyB) {
+      return 1
+    }
+    if (isPrintOnlyA && !isPrintOnlyB) {
+      return -1
+    }
+    return a.localeCompare(b)
+  }
+  if (isPrintA) {
+    return 1
+  }
+  if (isPrintB) {
+    return -1
+  }
+  return null
+}
+function sortCSSmq (a, b) {
+  const testIsPrint = _testIsPrint(a, b);
+  if (testIsPrint !== null) {
+    return testIsPrint
+  }
+  const minA = isMinWidth(a) || isMinHeight(a);
+  const maxA = isMaxWidth(a) || isMaxHeight(a);
+  const minB = isMinWidth(b) || isMinHeight(b);
+  const maxB = isMaxWidth(b) || isMaxHeight(b);
+  if (minA && maxB) {
+    return -1
+  }
+  if (maxA && minB) {
+    return 1
+  }
+  let lengthA = _getQueryLength(a);
+  let lengthB = _getQueryLength(b);
+  if (lengthA === maxValue && lengthB === maxValue) {
+    return a.localeCompare(b)
+  } else if (lengthA === maxValue) {
+    return 1
+  } else if (lengthB === maxValue) {
+    return -1
+  }
+  if (lengthA > lengthB) {
+    if (maxA) {
+      return -1
+    }
+    return 1
+  }
+  if (lengthA < lengthB) {
+    if (maxA) {
+      return 1
+    }
+    return -1
+  }
+  return a.localeCompare(b)
+}
+sortCSSmq.desktopFirst = function (a, b) {
+  const testIsPrint = _testIsPrint(a, b);
+  if (testIsPrint !== null) {
+    return testIsPrint
+  }
+  const minA = isMinWidth(a) || isMinHeight(a);
+  const maxA = isMaxWidth(a) || isMaxHeight(a);
+  const minB = isMinWidth(b) || isMinHeight(b);
+  const maxB = isMaxWidth(b) || isMaxHeight(b);
+  if (minA && maxB) {
+    return 1
+  }
+  if (maxA && minB) {
+    return -1
+  }
+  const lengthA = _getQueryLength(a);
+  const lengthB = _getQueryLength(b);
+  if (lengthA === maxValue && lengthB === maxValue) {
+    return a.localeCompare(b)
+  } else if (lengthA === maxValue) {
+    return 1
+  } else if (lengthB === maxValue) {
+    return -1
+  }
+  if (lengthA > lengthB) {
+    if (maxA) {
+      return -1
+    }
+    return 1
+  }
+  if (lengthA < lengthB) {
+    if (maxA) {
+      return 1
+    }
+    return -1
+  }
+  return -(a.localeCompare(b))
+};
+var sortCssMediaQueries = sortCSSmq;
+
+function sortMediaQueryOrder() {
+  return function (renderer) {
+    renderer.sortMediaQuery = sortCssMediaQueries;
+    return renderer;
+  };
+}
+
 var typeScaleFactor = 1.333;
@@ -1327,3 +1552,3 @@ var typeScaleBase = 14;
 function createNamedKeys(breakpoints) {
-    return namedKeys(__assign({}, toMediaQueryMap(breakpoints), { print: '@media print' }));
+    return namedKeys(__assign(__assign({}, toMediaQueryMap(breakpoints)), { print: '@media print' }));
 }
@@ -1333,10 +1558,10 @@ function createFelaConfig(breakpoints) {
     var config = {
-        plugins: webPreset.concat([
+        plugins: __spreadArrays(webPreset, [
             createNamedKeys(breakpoints),
         ]),
-        enhancers: [],
+        enhancers: [sortMediaQueryOrder()],
         devMode: false,
     };
     if (process.env.NODE_ENV === 'development') {
-        config.enhancers = [monolithic({ prettySelectors: true })];
+        config.enhancers = [monolithic({ prettySelectors: true }), sortMediaQueryOrder()];
         config.devMode = true;
@@ -1343,0 +1568,0 @@ }

dist/indoqa-style-system.es.js

@@ -51,2 +51,9 @@ import { FelaComponent, createComponentWithProxy, RendererContext } from 'react-fela';
 }
+function __spreadArrays() {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+}
 
@@ -484,3 +491,3 @@ var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
     var groupedProps = getPropsByBreakpoint(props, sortedBreakpoints);
-    var styles = styleFunction(groupedProps[0], theme);
+    var styles = styleFunction(groupedProps[0], theme, true);
     for (var i = 0; i < sortedBreakpoints.length; i++) {
@@ -493,3 +500,3 @@ var breakpointProps = groupedProps[i + 1];
         Object.assign(styles, (_a = {},
-            _a[breakpointName] = styleFunction(breakpointProps, theme),
+            _a[breakpointName] = styleFunction(breakpointProps, theme, false),
             _a));
@@ -504,3 +511,3 @@ }
     if (passedStyle instanceof Array) {
-        return [componentStyle].concat(passedStyle);
+        return __spreadArrays([componentStyle], passedStyle);
     }
@@ -528,17 +535,58 @@ return [componentStyle, passedStyle];
 }
-var createBoxModelCSSProps = function (_a) {
-    var inline = _a.inline, width = _a.width, height = _a.height, fullWidth = _a.fullWidth, fullHeight = _a.fullHeight;
-    return ({
-        display: (inline) ? 'inline' : 'block',
-        width: (fullWidth) ? '100%' : width || 'auto',
-        height: (fullHeight) ? '100%' : height || 'auto',
-    });
+var createBoxModelCSSProps = function (props) {
+    var display = props.display, inline = props.inline, width = props.width, height = props.height, fullWidth = props.fullWidth, fullHeight = props.fullHeight, maxHeight = props.maxHeight, maxWidth = props.maxWidth, minHeight = props.minHeight, minWidth = props.minWidth;
+    var styles = {};
+    if (inline) {
+        Object.assign(styles, { display: 'inline' });
+    }
+    if (display) {
+        Object.assign(styles, { display: display });
+    }
+    if (fullWidth) {
+        Object.assign(styles, { width: '100%' });
+    }
+    else if (width) {
+        Object.assign(styles, { width: width });
+    }
+    if (maxWidth) {
+        Object.assign(styles, { maxWidth: maxWidth });
+    }
+    if (minWidth) {
+        Object.assign(styles, { minWidth: minWidth });
+    }
+    if (fullHeight) {
+        Object.assign(styles, { height: '100%' });
+    }
+    else if (height) {
+        Object.assign(styles, { height: height });
+    }
+    if (maxHeight) {
+        Object.assign(styles, { maxHeight: maxHeight });
+    }
+    if (minHeight) {
+        Object.assign(styles, { minHeight: minHeight });
+    }
+    return styles;
 };
-var createFlexChildCSSProps = function (_a) {
-    var grow = _a.grow, shrink = _a.shrink, basis = _a.basis, order = _a.order, align = _a.align;
-    var styles = {
-        flexGrow: grow || 0,
-        flexShrink: shrink === 0 ? 0 : shrink ? shrink : 1,
-        flexBasis: basis === 0 ? 0 : basis ? basis : 'auto',
-    };
+var createFlexChildCSSProps = function (props, theme, outsideMediaQuery) {
+    var grow = props.grow, shrink = props.shrink, basis = props.basis, order = props.order, align = props.align;
+    var styles = {};
+    if (grow !== undefined) {
+        Object.assign(styles, { flexGrow: grow });
+    }
+    else if (outsideMediaQuery) {
+        Object.assign(styles, { flexGrow: 0 });
+    }
+    if (shrink !== undefined) {
+        Object.assign(styles, { flexShrink: shrink });
+    }
+    else if (outsideMediaQuery) {
+        Object.assign(styles, { flexShrink: 1 });
+    }
+    if (basis !== undefined) {
+        Object.assign(styles, { flexBasis: basis });
+    }
+    else if (outsideMediaQuery) {
+        Object.assign(styles, { flexBasis: 'auto' });
+    }
     if (order !== undefined) {
@@ -558,4 +606,4 @@ Object.assign(styles, { order: order });
 }
-function createStylingCSSProps(_a, theme) {
-    var bg = _a.bg, cursorPointer = _a.cursorPointer, overflowHidden = _a.overflowHidden, shadow = _a.shadow, r = _a.r, rt = _a.rt, rb = _a.rb, rl = _a.rl, rr = _a.rr, rtl = _a.rtl, rtr = _a.rtr, rbl = _a.rbl, rbr = _a.rbr;
+function createStylingCSSProps(props, theme) {
+    var bg = props.bg, cursorPointer = props.cursorPointer, overflowHidden = props.overflowHidden, shadow = props.shadow, r = props.r, rt = props.rt, rb = props.rb, rl = props.rl, rr = props.rr, rtl = props.rtl, rtr = props.rtr, rbl = props.rbl, rbr = props.rbr;
     var styles = {};
@@ -607,4 +655,4 @@ if (bg) {
 }
-function createFontCSSProps(_a, theme) {
-    var fontStyle = _a.fontStyle, fontSize = _a.fontSize, color = _a.color, bold = _a.bold, italic = _a.italic, underline = _a.underline, ellipsis = _a.ellipsis, textAlign = _a.textAlign;
+function createFontCSSProps(props, theme) {
+    var fontStyle = props.fontStyle, fontSize = props.fontSize, color = props.color, bold = props.bold, italic = props.italic, underline = props.underline, ellipsis = props.ellipsis, textAlign = props.textAlign, uppercase = props.uppercase, wordBreakAll = props.wordBreakAll, wordWrapAll = props.wordWrapAll;
     var styles = {};
@@ -640,6 +688,15 @@ if (bold) {
     }
+    if (uppercase) {
+        Object.assign(styles, { textTransform: 'uppercase' });
+    }
+    if (wordBreakAll) {
+        Object.assign(styles, { wordBreak: 'break-all' });
+    }
+    if (wordWrapAll) {
+        Object.assign(styles, { wordWrap: 'break-word' });
+    }
     return styles;
 }
-var createMarginCSSProps = function (_a, theme) {
-    var m = _a.m, mt = _a.mt, mb = _a.mb, ml = _a.ml, mr = _a.mr, mx = _a.mx, my = _a.my;
+var createMarginCSSProps = function (props, theme) {
+    var m = props.m, mt = props.mt, mb = props.mb, ml = props.ml, mr = props.mr, mx = props.mx, my = props.my;
     var styles = {};
@@ -671,4 +728,4 @@ if (m !== undefined) {
 };
-var createPaddingCSSProps = function (_a, theme) {
-    var p = _a.p, pt = _a.pt, pb = _a.pb, pl = _a.pl, pr = _a.pr, px = _a.px, py = _a.py;
+var createPaddingCSSProps = function (props, theme) {
+    var p = props.p, pt = props.pt, pb = props.pb, pl = props.pl, pr = props.pr, px = props.px, py = props.py;
     var styles = {};
@@ -718,4 +775,4 @@ if (p !== undefined) {
 
-function createBoxCSSStyle(props, theme) {
-    return __assign({}, createBoxModelCSSProps(props), createMarginCSSProps(props, theme), createPaddingCSSProps(props, theme), createFlexChildCSSProps(props), createStylingCSSProps(props, theme), createFontCSSProps(props, theme));
+function createBoxCSSStyle(props, theme, outsideMediaQuery) {
+    return __assign(__assign(__assign(__assign(__assign(__assign({}, createBoxModelCSSProps(props)), createMarginCSSProps(props, theme)), createPaddingCSSProps(props, theme)), createFlexChildCSSProps(props, theme, outsideMediaQuery)), createStylingCSSProps(props, theme)), createFontCSSProps(props, theme));
 }
@@ -730,7 +787,7 @@ function themedBoxStyles(props) {
         var className = _a.className;
-        return createElement(as, __assign({ className: className, 'data-testid': testId, onClick: onClick,
+        return createElement(as, __assign(__assign({ className: className, 'data-testid': testId, onClick: onClick,
             onMouseDown: onMouseDown,
             onMouseOut: onMouseOut,
             onMouseOver: onMouseOver,
-            onScroll: onScroll }, htmlAttrs, { ref: innerRef }), children);
+            onScroll: onScroll }, htmlAttrs), { ref: innerRef }), children);
     }));
@@ -768,11 +825,23 @@ }
 
-var createFlexContainerCSSStyle = function (_a) {
-    var inline = _a.inline, direction = _a.direction, nowrap = _a.nowrap, center = _a.center, justifyContent = _a.justifyContent, alignItems = _a.alignItems;
-    var styles = ({
-        display: (inline) ? 'inline-flex' : 'flex',
-        flexDirection: direction || 'row',
-        flexWrap: (nowrap) ? 'nowrap' : 'wrap',
-        justifyContent: justifyContent || 'flex-start',
-        alignItems: alignItems || 'stretch',
-    });
+var createFlexContainerCSSStyle = function (props, theme, outsideMediaQuery) {
+    var inline = props.inline, direction = props.direction, nowrap = props.nowrap, center = props.center, justifyContent = props.justifyContent, alignItems = props.alignItems;
+    var styles = {};
+    if (inline) {
+        Object.assign(styles, { display: 'inline-flex' });
+    }
+    else {
+        Object.assign(styles, { display: 'flex' });
+    }
+    if (direction) {
+        Object.assign(styles, { flexDirection: direction });
+    }
+    if (nowrap) {
+        Object.assign(styles, { flexWrap: 'nowrap' });
+    }
+    if (justifyContent) {
+        Object.assign(styles, { justifyContent: justifyContent });
+    }
+    if (alignItems) {
+        Object.assign(styles, { alignItems: alignItems });
+    }
     if (center) {
@@ -788,4 +857,4 @@ var centerStyles = {
 };
-function createFlexCSSStyle(props, theme) {
-    return __assign({}, createBoxCSSStyle(props, theme), createFlexContainerCSSStyle(props));
+function createFlexCSSStyle(props, theme, outsideMediaQuery) {
+    return __assign(__assign({}, createBoxCSSStyle(props, theme, outsideMediaQuery)), createFlexContainerCSSStyle(props));
 }
@@ -800,7 +869,7 @@ function themedFlexStyles(props) {
         var className = _a.className;
-        return createElement(as, __assign({ className: className, 'data-testid': testId, onClick: onClick,
+        return createElement(as, __assign(__assign({ className: className, 'data-testid': testId, onClick: onClick,
             onMouseDown: onMouseDown,
             onMouseOut: onMouseOut,
             onMouseOver: onMouseOver,
-            onScroll: onScroll }, htmlAttrs, { ref: innerRef }), children);
+            onScroll: onScroll }, htmlAttrs), { ref: innerRef }), children);
     }));
@@ -836,4 +905,4 @@ }
 
-function createTextCSSStyle(props, theme) {
-    return __assign({ display: 'inline-block' }, createMarginCSSProps(props, theme), createPaddingCSSProps(props, theme), createFlexChildCSSProps(props), createFontCSSProps(props, theme), createStylingCSSProps(props, theme));
+function createTextCSSStyle(props, theme, outsideMediaQuery) {
+    return __assign(__assign(__assign(__assign(__assign({ display: 'inline-block' }, createMarginCSSProps(props, theme)), createPaddingCSSProps(props, theme)), createFlexChildCSSProps(props, theme, outsideMediaQuery)), createFontCSSProps(props, theme)), createStylingCSSProps(props, theme));
 }
@@ -848,7 +917,7 @@ function themedTextStyle(props) {
         var className = _a.className;
-        return createElement('span', __assign({ className: className, 'data-testid': testId, onClick: onClick,
+        return createElement('span', __assign(__assign({ className: className, 'data-testid': testId, onClick: onClick,
             onMouseDown: onMouseDown,
             onMouseOut: onMouseOut,
             onMouseOver: onMouseOver,
-            onScroll: onScroll }, htmlAttrs, { ref: innerRef }), children);
+            onScroll: onScroll }, htmlAttrs), { ref: innerRef }), children);
     }));
@@ -876,3 +945,3 @@ }
 function createBaseStyles(props, theme) {
-    return __assign({}, createPaddingCSSProps(props, theme), createFontCSSProps(props, theme), createStylingCSSProps(props, theme));
+    return __assign(__assign(__assign({}, createPaddingCSSProps(props, theme)), createFontCSSProps(props, theme)), createStylingCSSProps(props, theme));
 }
@@ -978,3 +1047,3 @@ function themedBoxStyles$1(props) {
 function createBaseStyles$1(props, theme) {
-    return __assign({}, createPaddingCSSProps(props, theme), createStylingCSSProps(props, theme));
+    return __assign(__assign({}, createPaddingCSSProps(props, theme)), createStylingCSSProps(props, theme));
 }
@@ -990,3 +1059,3 @@ var RowContainer = (function (_super) {
             var style = _a.style, spacing = _a.spacing, otherProps = __rest(_a, ["style", "spacing"]);
-            return (__assign({}, createResponsiveStyles(otherProps, createBaseStyles$1), { boxSizing: 'border-box', display: 'flex', flexWrap: 'wrap', width: '100%', marginTop: spacing, '&:first-child': {
+            return (__assign(__assign({}, createResponsiveStyles(otherProps, createBaseStyles$1)), { boxSizing: 'border-box', display: 'flex', flexWrap: 'wrap', width: '100%', marginTop: spacing, '&:first-child': {
                     marginTop: 0,
@@ -1021,4 +1090,4 @@ } }));
 
-function createBaseStyles$2(props, theme) {
-    return __assign({}, createBoxModelCSSProps(props), createMarginCSSProps(props, theme), createPaddingCSSProps(props, theme), createStylingCSSProps(props, theme));
+function createBaseStyles$2(props, theme, outsideMediaQuery) {
+    return __assign(__assign(__assign(__assign({}, createBoxModelCSSProps(props)), createMarginCSSProps(props, theme)), createPaddingCSSProps(props, theme)), createStylingCSSProps(props, theme));
 }
@@ -1033,3 +1102,3 @@ var GridContainer = (function (_super) {
             var maxWidth = _a.maxWidth, center = _a.center, otherProps = __rest(_a, ["maxWidth", "center"]);
-            return (__assign({ margin: center ? 'auto' : 0 }, createResponsiveStyles(otherProps, createBaseStyles$2), { boxSizing: 'border-box', maxWidth: maxWidth }));
+            return (__assign(__assign({ margin: center ? 'auto' : 0 }, createResponsiveStyles(otherProps, createBaseStyles$2)), { boxSizing: 'border-box', maxWidth: maxWidth }));
         };
@@ -1070,3 +1139,3 @@ var _a = this.props, children = _a.children, style = _a.style, center = _a.center, innerRef = _a.innerRef, testId = _a.testId, otherProps = __rest(_a, ["children", "style", "center", "innerRef", "testId"]);
 function createBaseStyles$3(props, theme) {
-    return __assign({}, createPaddingCSSProps(props, theme), createStylingCSSProps(props, theme));
+    return __assign(__assign({}, createPaddingCSSProps(props, theme)), createStylingCSSProps(props, theme));
 }
@@ -1081,3 +1150,3 @@ var RowContainer$1 = (function (_super) {
             var style = _a.style, minHeight = _a.minHeight, spacing = _a.spacing, height = _a.height, otherProps = __rest(_a, ["style", "minHeight", "spacing", "height"]);
-            return (__assign({}, createResponsiveStyles(otherProps, createBaseStyles$3), { boxSizing: 'border-box', display: 'flex', flexWrap: 'wrap', alignItems: 'stretch', width: '100%', minHeight: minHeight, ':first-child': {
+            return (__assign(__assign({}, createResponsiveStyles(otherProps, createBaseStyles$3)), { boxSizing: 'border-box', display: 'flex', flexWrap: 'wrap', alignItems: 'stretch', width: '100%', minHeight: minHeight, ':first-child': {
                     marginTop: "-" + spacing,
@@ -1132,3 +1201,3 @@ }, tablet: {
 function createBaseStyles$4(props, theme) {
-    return __assign({}, createPaddingCSSProps(props, theme), createFontCSSProps(props, theme), createStylingCSSProps(props, theme));
+    return __assign(__assign(__assign({}, createPaddingCSSProps(props, theme)), createFontCSSProps(props, theme)), createStylingCSSProps(props, theme));
 }
@@ -1143,3 +1212,3 @@ var PanelContainer = (function (_super) {
             var width = _a.width, size = _a.size, spacing = _a.spacing, otherProps = __rest(_a, ["width", "size", "spacing"]);
-            return (__assign({}, createResponsiveStyles(otherProps, createBaseStyles$4), { flexGrow: 1, flexShrink: 0, width: '100%', height: 'auto', overflow: 'hidden', marginTop: spacing, '@media (min-width: 768px)': {
+            return (__assign(__assign({}, createResponsiveStyles(otherProps, createBaseStyles$4)), { flexGrow: 1, flexShrink: 0, width: '100%', height: 'auto', overflow: 'hidden', marginTop: spacing, '@media (min-width: 768px)': {
                     width: '0',
@@ -1195,3 +1264,3 @@ flex: (isDefaultWidth(width) ? size : 0) + " 0 " + calcBasis(spacing, size, width),
     renderer.renderStatic(rebootCss);
-    renderer.renderStatic(__assign({}, props.fontStyles.base, { color: props.colors.text, fontSize: props.fontSizes.text }), 'body');
+    renderer.renderStatic(__assign(__assign({}, props.fontStyles.base), { color: props.colors.text, fontSize: props.fontSizes.text }), 'body');
     renderer.renderStatic(__assign({}, props.fontStyles.alt), 'h1, h2, h3, h4, h5, h6');
@@ -1224,2 +1293,158 @@ renderer.renderStatic({
 
+const minMaxWidth = /(!?\(\s*min(-device-)?-width).+\(\s*max(-device)?-width/i;
+const minWidth = /\(\s*min(-device)?-width/i;
+const maxMinWidth = /(!?\(\s*max(-device)?-width).+\(\s*min(-device)?-width/i;
+const maxWidth = /\(\s*max(-device)?-width/i;
+const isMinWidth = _testQuery(minMaxWidth, maxMinWidth, minWidth);
+const isMaxWidth = _testQuery(maxMinWidth, minMaxWidth, maxWidth);
+const minMaxHeight = /(!?\(\s*min(-device)?-height).+\(\s*max(-device)?-height/i;
+const minHeight = /\(\s*min(-device)?-height/i;
+const maxMinHeight = /(!?\(\s*max(-device)?-height).+\(\s*min(-device)?-height/i;
+const maxHeight = /\(\s*max(-device)?-height/i;
+const isMinHeight = _testQuery(minMaxHeight, maxMinHeight, minHeight);
+const isMaxHeight = _testQuery(maxMinHeight, minMaxHeight, maxHeight);
+const isPrint = /print/i;
+const isPrintOnly = /^print$/i;
+const maxValue = Number.MAX_VALUE;
+function _getQueryLength (length) {
+  length = /(-?\d*\.?\d+)(ch|em|ex|px|rem)/.exec(length);
+  if (length === null) {
+    return maxValue
+  }
+  let number = length[1];
+  const unit = length[2];
+  switch (unit) {
+    case 'ch':
+      number = parseFloat(number) * 8.8984375;
+      break
+    case 'em':
+    case 'rem':
+      number = parseFloat(number) * 16;
+      break
+    case 'ex':
+      number = parseFloat(number) * 8.296875;
+      break
+    case 'px':
+      number = parseFloat(number);
+      break
+  }
+  return +number
+}
+function _testQuery (doubleTestTrue, doubleTestFalse, singleTest) {
+  return function (query) {
+    if (doubleTestTrue.test(query)) {
+      return true
+    } else if (doubleTestFalse.test(query)) {
+      return false
+    }
+    return singleTest.test(query)
+  }
+}
+function _testIsPrint (a, b) {
+  const isPrintA = isPrint.test(a);
+  const isPrintOnlyA = isPrintOnly.test(a);
+  const isPrintB = isPrint.test(b);
+  const isPrintOnlyB = isPrintOnly.test(b);
+  if (isPrintA && isPrintB) {
+    if (!isPrintOnlyA && isPrintOnlyB) {
+      return 1
+    }
+    if (isPrintOnlyA && !isPrintOnlyB) {
+      return -1
+    }
+    return a.localeCompare(b)
+  }
+  if (isPrintA) {
+    return 1
+  }
+  if (isPrintB) {
+    return -1
+  }
+  return null
+}
+function sortCSSmq (a, b) {
+  const testIsPrint = _testIsPrint(a, b);
+  if (testIsPrint !== null) {
+    return testIsPrint
+  }
+  const minA = isMinWidth(a) || isMinHeight(a);
+  const maxA = isMaxWidth(a) || isMaxHeight(a);
+  const minB = isMinWidth(b) || isMinHeight(b);
+  const maxB = isMaxWidth(b) || isMaxHeight(b);
+  if (minA && maxB) {
+    return -1
+  }
+  if (maxA && minB) {
+    return 1
+  }
+  let lengthA = _getQueryLength(a);
+  let lengthB = _getQueryLength(b);
+  if (lengthA === maxValue && lengthB === maxValue) {
+    return a.localeCompare(b)
+  } else if (lengthA === maxValue) {
+    return 1
+  } else if (lengthB === maxValue) {
+    return -1
+  }
+  if (lengthA > lengthB) {
+    if (maxA) {
+      return -1
+    }
+    return 1
+  }
+  if (lengthA < lengthB) {
+    if (maxA) {
+      return 1
+    }
+    return -1
+  }
+  return a.localeCompare(b)
+}
+sortCSSmq.desktopFirst = function (a, b) {
+  const testIsPrint = _testIsPrint(a, b);
+  if (testIsPrint !== null) {
+    return testIsPrint
+  }
+  const minA = isMinWidth(a) || isMinHeight(a);
+  const maxA = isMaxWidth(a) || isMaxHeight(a);
+  const minB = isMinWidth(b) || isMinHeight(b);
+  const maxB = isMaxWidth(b) || isMaxHeight(b);
+  if (minA && maxB) {
+    return 1
+  }
+  if (maxA && minB) {
+    return -1
+  }
+  const lengthA = _getQueryLength(a);
+  const lengthB = _getQueryLength(b);
+  if (lengthA === maxValue && lengthB === maxValue) {
+    return a.localeCompare(b)
+  } else if (lengthA === maxValue) {
+    return 1
+  } else if (lengthB === maxValue) {
+    return -1
+  }
+  if (lengthA > lengthB) {
+    if (maxA) {
+      return -1
+    }
+    return 1
+  }
+  if (lengthA < lengthB) {
+    if (maxA) {
+      return 1
+    }
+    return -1
+  }
+  return -(a.localeCompare(b))
+};
+var sortCssMediaQueries = sortCSSmq;
+
+function sortMediaQueryOrder() {
+  return function (renderer) {
+    renderer.sortMediaQuery = sortCssMediaQueries;
+    return renderer;
+  };
+}
+
 var typeScaleFactor = 1.333;
@@ -1321,3 +1546,3 @@ var typeScaleBase = 14;
 function createNamedKeys(breakpoints) {
-    return namedKeys(__assign({}, toMediaQueryMap(breakpoints), { print: '@media print' }));
+    return namedKeys(__assign(__assign({}, toMediaQueryMap(breakpoints)), { print: '@media print' }));
 }
@@ -1327,10 +1552,10 @@ function createFelaConfig(breakpoints) {
     var config = {
-        plugins: webPreset.concat([
+        plugins: __spreadArrays(webPreset, [
             createNamedKeys(breakpoints),
         ]),
-        enhancers: [],
+        enhancers: [sortMediaQueryOrder()],
         devMode: false,
     };
     if (process.env.NODE_ENV === 'development') {
-        config.enhancers = [monolithic({ prettySelectors: true })];
+        config.enhancers = [monolithic({ prettySelectors: true }), sortMediaQueryOrder()];
         config.devMode = true;
@@ -1337,0 +1562,0 @@ }

package.json

 {
   "name": "@indoqa/style-system",
-  "version": "1.3.2-rc.2",
+  "version": "1.4.0-rc.4",
   "author": "Indoqa Software Design und Beratung GmbH (https://www.indoqa.com)",
@@ -17,3 +17,4 @@ "description": "A style system for React with Typescript typed theme support and several base components.",
     "compile": "yarn clean && tsc -p tsconfig.json",
-    "package": "yarn compile && rollup -c",
+    "lint": "eslint './src/**/*.tsx' './src/**/*.ts'",
+    "package": "yarn lint && yarn compile && rollup -c",
     "prepublishOnly": "yarn package"
@@ -33,20 +34,21 @@ },
   "peerDependencies": {
-    "fela": ">=10.5.0",
-    "fela-monolithic": ">=10.5.0",
-    "fela-plugin-named-keys": ">=10.5.0",
-    "fela-preset-web": ">=10.5.0",
+    "fela": ">=11",
+    "fela-monolithic": ">=11",
+    "fela-plugin-named-keys": ">=11",
+    "fela-preset-web": ">=11",
     "react": ">=16.8.5",
-    "react-fela": ">=10.5.0"
+    "react-fela": ">=11"
   },
   "dependencies": {
-    "fela": "^10.6.1",
-    "fela-monolithic": "^10.6.1",
-    "fela-plugin-named-keys": "^10.6.1",
-    "fela-preset-web": "^10.6.1",
+    "fela": "^11.0.2",
+    "fela-monolithic": "^11.0.2",
+    "fela-plugin-named-keys": "^11.0.2",
+    "fela-preset-web": "^11.0.2",
+    "fela-sort-media-query-mobile-first": "^11.0.2",
     "lodash": "^4.17.15",
-    "react": "^16.9.0",
-    "react-fela": "^10.6.1",
+    "react": "^16.12.0",
+    "react-fela": "^11.0.2",
     "tslib": "^1.10.0"
   },
-  "gitHead": "37c0feca541f518916112d48458f3cf0e2e3e8e9"
+  "gitHead": "738e54807f2e22f9555f3f8e99a5acbebd1ceca1"
 }

No alert changes

Improved metrics

Total package byte prevSize

174120

increased by9.26%

Lines of code

3499

increased by15.06%

Worsened metrics

Dependency count

15

increased by7.14%

Dependency changes

• + Addedfela-sort-media-query-mobile-first@^11.0.2

• + Addedcsstype@3.1.3(transitive)

• + Addedfela@11.7.0(transitive)

• + Addedfela-bindings@11.7.0(transitive)

• + Addedfela-dom@11.7.0(transitive)

• + Addedfela-monolithic@11.7.0(transitive)

• + Addedfela-plugin-embedded@11.7.0(transitive)

• + Addedfela-plugin-extend@11.7.0(transitive)

• + Addedfela-plugin-fallback-value@11.7.0(transitive)

• + Addedfela-plugin-named-keys@11.7.0(transitive)

• + Addedfela-plugin-prefixer@11.7.0(transitive)

• + Addedfela-plugin-unit@11.7.0(transitive)

• + Addedfela-preset-web@11.7.0(transitive)

• + Addedfela-sort-media-query-mobile-first@11.7.0(transitive)

• + Addedfela-tools@11.7.0(transitive)

• + Addedfela-utils@11.7.0(transitive)

• + Addedreact-fela@11.7.0(transitive)

• + Addedsort-css-media-queries@1.5.4(transitive)

• + Addedstylis@4.3.5(transitive)

• - Removedcsstype@2.6.21(transitive)

• - Removedfela@10.8.2(transitive)

• - Removedfela-bindings@10.8.2(transitive)

• - Removedfela-dom@10.8.2(transitive)

• - Removedfela-monolithic@10.8.2(transitive)

• - Removedfela-plugin-embedded@10.8.2(transitive)

• - Removedfela-plugin-extend@10.8.2(transitive)

• - Removedfela-plugin-fallback-value@10.8.2(transitive)

• - Removedfela-plugin-named-keys@10.8.2(transitive)

• - Removedfela-plugin-prefixer@10.8.2(transitive)

• - Removedfela-plugin-unit@10.8.2(transitive)

• - Removedfela-preset-web@10.8.2(transitive)

• - Removedfela-tools@10.8.2(transitive)

• - Removedfela-utils@10.8.2(transitive)

• - Removedreact-fela@10.8.2(transitive)

• Updatedfela@^11.0.2

• Updatedfela-monolithic@^11.0.2

• Updatedfela-plugin-named-keys@^11.0.2

• Updatedfela-preset-web@^11.0.2

• Updatedreact@^16.12.0

• Updatedreact-fela@^11.0.2