@vitus-labs/unistyle 0.23.0 → 0.25.0-alpha.2

package/lib/index.d.ts

@@ -13,15 +13,6 @@ declare type TProvider = {
 } & Partial<Record<string, unknown>>;
 declare const Provider: FC<TProvider>;
 
-declare type UseWindowResize = (throttleDelay?: number, defaultValues?: Partial<{
-    width: number;
-    height: number;
-}>) => {
-    width: number;
-    height: number;
-};
-declare const useWindowResize: UseWindowResize;
-
 declare const breakpoints: {
     readonly rootSize: 16;
     readonly breakpoints: {
@@ -35,14 +26,19 @@ declare const breakpoints: {
 };
 declare type Breakpoints = typeof breakpoints;
 
-declare type CreateMediaQueries = <B, R extends number, C extends (...args: any) => any>({ breakpoints, rootSize, css, }: {
+declare type CreateMediaQueries = <B, R extends number, C extends (...args: any) => any>(props: {
     breakpoints: B;
     rootSize: R;
     css: C;
 }) => Record<keyof B, ReturnType<C>>;
 declare const createMediaQueries: CreateMediaQueries;
 
-declare type Css = typeof config.css;
+declare type Css = typeof config.css;
+declare type Defaults = 'initial' | 'inherit';
+declare type Units = 'px' | 'rem' | 'em' | '%' | 'vh' | 'vw' | 'vmin' | 'vmax';
+declare type UnitValue = number | `${number}${Units}`;
+declare type Value$2 = UnitValue | 'auto' | Defaults;
+declare type Color = `#${string | number}` | 'currentcolor' | 'transparent' | `rgb(${number}, ${number}, ${number})` | `rgba(${number}, ${number}, ${number}, ${number})` | `hsl(${number}, ${number}%, ${number}%)` | `hsla(${number}, ${number}%, ${number}%, ${number})` | Defaults;
 
 declare type SortBreakpoints = <T extends Record<string, number>>(breakpoints: T) => Array<keyof T>;
 declare const sortBreakpoints: SortBreakpoints;
@@ -85,10 +81,7 @@ declare type TransformTheme = ({ theme, breakpoints, }: {
 }) => any;
 declare const transformTheme: TransformTheme;
 
-declare type Value$2 = 'auto' | 'inital' | 'inherit' | number | string;
-declare type Defaults = 'initial' | 'inherit';
-declare type Length = number | string;
-declare type BorderColor = 'transparent' | string | Defaults;
+declare type BorderColor = Color | Defaults;
 declare type BorderImageRepeat = 'stretch' | 'repeat' | 'round' | 'space' | Defaults;
 declare type TextDecoration = 'none' | 'underline' | 'overline' | 'line-through' | 'blink' | Defaults;
 declare type BorderStyle = 'none' | 'hidden' | 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | Defaults;
@@ -96,8 +89,10 @@ declare type FontSize = 'medium' | 'xx-small' | 'x-small' | 'small' | 'large' |
 declare type ListStyleType = 'disc' | 'armenian' | 'circle' | 'cjk-ideographic' | 'decimal' | 'decimal-leading-zero' | 'georgian' | 'hebrew' | 'hiragana' | 'hiragana-iroha' | 'katakana' | 'katakana-iroha' | 'lower-alpha' | 'lower-greek' | 'lower-latin' | 'lower-roman' | 'none' | 'square' | 'upper-alpha' | 'upper-greek' | 'upper-latin' | 'upper-roman' | Defaults;
 declare type Overflow = 'visible' | 'hidden' | 'scroll' | 'auto' | Defaults;
 declare type Cursor = 'alias' | 'all-scroll' | 'auto' | 'cell' | 'context-menu' | 'col-resize' | 'copy' | 'crosshair' | 'default' | 'e-resize' | 'ew-resize' | 'grab' | 'grabbing' | 'help' | 'move' | 'n-resize' | 'ne-resize' | 'nesw-resize' | 'ns-resize' | 'nw-resize' | 'nwse-resize' | 'no-drop' | 'none' | 'not-allowed' | 'pointer' | 'progress' | 'row-resize' | 's-resize' | 'se-resize' | 'sw-resize' | 'text' | 'URL' | 'vertical-text' | 'w-resize' | 'wait' | 'zoom-in' | 'zoom-out' | Defaults;
-declare type ITheme = Partial<{
-    inset: string;
+declare type ITheme = {
+    inset: Value$2;
+    insetX: Value$2;
+    insetY: Value$2;
     top: Value$2;
     bottom: Value$2;
     left: Value$2;
@@ -136,7 +131,7 @@ declare type ITheme = Partial<{
     background: string;
     backgroundAttachment: 'scroll' | 'fixed' | Defaults;
     backgroundClip: 'border-box' | 'padding-box' | 'content-box' | Defaults;
-    backgroundColor: string | 'transparent' | Defaults;
+    backgroundColor: Color;
     backgroundImage: string | 'none' | Defaults;
     backgroundOrigin: 'padding-box' | 'border-box' | 'content-box' | Defaults;
     backgroundPosition: any;
@@ -191,7 +186,7 @@ declare type ITheme = Partial<{
     clear: 'left' | 'right' | 'auto' | 'both' | 'none' | Defaults;
     clip: 'shape' | 'auto' | Defaults;
     clipPath: string;
-    color: string;
+    color: Color;
     content: 'normal' | 'none' | 'counter' | 'open-quote' | 'close-quote' | 'no-open-quote' | 'no-close-quote' | Defaults | string;
     counterIncrement: string;
     counterReset: string;
@@ -219,7 +214,7 @@ declare type ITheme = Partial<{
     justifyContent: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around';
     keyframe: any;
     letterSpacing: 'normal' | Value$2 | Defaults;
-    lineHeight: 'normal' | Defaults | Length;
+    lineHeight: Value$2 | 'normal' | 'revert' | 'unset' | Defaults;
     listStyle: string;
     listStyleImage: 'none' | string | Defaults;
     listStylePosition: string;
@@ -276,9 +271,9 @@ declare type ITheme = Partial<{
     clearFix: boolean;
     fullScreen: boolean;
     extendCss: ReturnType<typeof config.css> | string;
-}>;
+};
 declare type Theme = {
-    [I in keyof ITheme]: ITheme[I] | null;
+    [I in keyof ITheme]: ITheme[I] | null | undefined;
 };
 
 declare type Styles = ({ theme, css, rootSize, }: {
@@ -320,7 +315,7 @@ declare type AlignContent = ({ direction, alignX, alignY, }: {
 }) => ReturnType<typeof config.css> | null;
 declare const alignContent: AlignContent;
 
-declare type ExtendCss = (styles: string | ((css: typeof config.css) => ReturnType<typeof css>) | null | undefined) => string | ReturnType<typeof config.css>;
+declare type ExtendCss = (styles: ((css: typeof config.css) => ReturnType<typeof css>) | string | null | undefined) => string | ReturnType<typeof config.css>;
 declare const extendCss: ExtendCss;
 
 declare type NormalizeUnit = ({ param, rootSize, outputUnit, }: {
@@ -335,7 +330,7 @@ declare type Unit<V> = V extends string ? string : undefined;
 declare type StripUnit = <V extends ReactText, UR extends boolean = false>(value: V, unitReturn?: UR) => UR extends true ? [Value$1<V>, Unit<V>] : Value$1<V>;
 declare const stripUnit: StripUnit;
 
-declare type Value = (values: Array<unknown>, rootSize?: number, outputUnit?: 'px' | 'rem' | '%' | string) => string | number;
+declare type Value = (values: Array<unknown>, rootSize?: number, outputUnit?: Units) => string | number;
 declare const value: Value;
 
-export { ALIGN_CONTENT_DIRECTION, ALIGN_CONTENT_MAP_X, ALIGN_CONTENT_MAP_Y, AlignContent, AlignContentAlignXKeys, AlignContentAlignYKeys, AlignContentDirectionKeys, Breakpoints, CreateMediaQueries, ExtendCss, MakeItResponsive, MakeItResponsiveStyles, NormalizeTheme, NormalizeUnit, Provider, SortBreakpoints, StripUnit, Styles, Theme as StylesTheme, TProvider, TransformTheme, UseWindowResize, Value, alignContent, breakpoints, createMediaQueries, extendCss, makeItResponsive, normalizeTheme, normalizeUnit, sortBreakpoints, stripUnit, styles, transformTheme, useWindowResize, value };
+export { ALIGN_CONTENT_DIRECTION, ALIGN_CONTENT_MAP_X, ALIGN_CONTENT_MAP_Y, AlignContent, AlignContentAlignXKeys, AlignContentAlignYKeys, AlignContentDirectionKeys, Breakpoints, CreateMediaQueries, ExtendCss, MakeItResponsive, MakeItResponsiveStyles, NormalizeTheme, NormalizeUnit, Provider, SortBreakpoints, StripUnit, Styles, Theme as StylesTheme, TProvider, TransformTheme, Value, alignContent, breakpoints, createMediaQueries, extendCss, makeItResponsive, normalizeTheme, normalizeUnit, sortBreakpoints, stripUnit, styles, transformTheme, value };

package/lib/types/index.d.ts

@@ -1,7 +1,6 @@
 import Provider, { context, TProvider } from "./context";
-import { useWindowResize, UseWindowResize } from "./hooks";
 import { breakpoints, createMediaQueries, makeItResponsive, normalizeTheme, sortBreakpoints, transformTheme, Breakpoints, CreateMediaQueries, MakeItResponsive, MakeItResponsiveStyles, NormalizeTheme, SortBreakpoints, TransformTheme } from "./responsive";
 import { styles, alignContent, ALIGN_CONTENT_DIRECTION, ALIGN_CONTENT_MAP_X, ALIGN_CONTENT_MAP_Y, extendCss, Styles, StylesTheme, AlignContent, AlignContentAlignXKeys, AlignContentAlignYKeys, AlignContentDirectionKeys, ExtendCss } from "./styles";
 import { stripUnit, normalizeUnit, value, StripUnit, NormalizeUnit, Value } from "./units";
-export type { TProvider, Breakpoints, UseWindowResize, CreateMediaQueries, MakeItResponsive, MakeItResponsiveStyles, NormalizeTheme, SortBreakpoints, TransformTheme, Styles, StylesTheme, AlignContent, AlignContentAlignXKeys, AlignContentAlignYKeys, AlignContentDirectionKeys, ExtendCss, StripUnit, NormalizeUnit, Value, };
-export { breakpoints, Provider, context, useWindowResize, makeItResponsive, sortBreakpoints, createMediaQueries, transformTheme, normalizeTheme, styles, alignContent, ALIGN_CONTENT_DIRECTION, ALIGN_CONTENT_MAP_X, ALIGN_CONTENT_MAP_Y, extendCss, stripUnit, normalizeUnit, value, };
+export type { TProvider, Breakpoints, CreateMediaQueries, MakeItResponsive, MakeItResponsiveStyles, NormalizeTheme, SortBreakpoints, TransformTheme, Styles, StylesTheme, AlignContent, AlignContentAlignXKeys, AlignContentAlignYKeys, AlignContentDirectionKeys, ExtendCss, StripUnit, NormalizeUnit, Value, };
+export { breakpoints, Provider, context, makeItResponsive, sortBreakpoints, createMediaQueries, transformTheme, normalizeTheme, styles, alignContent, ALIGN_CONTENT_DIRECTION, ALIGN_CONTENT_MAP_X, ALIGN_CONTENT_MAP_Y, extendCss, stripUnit, normalizeUnit, value, };

package/lib/types/responsive/createMediaQueries.d.ts

@@ -1,4 +1,4 @@
-export declare type CreateMediaQueries = <B, R extends number, C extends (...args: any) => any>({ breakpoints, rootSize, css, }: {
+export declare type CreateMediaQueries = <B, R extends number, C extends (...args: any) => any>(props: {
     breakpoints: B;
     rootSize: R;
     css: C;

package/lib/types/styles/extendCss.d.ts

@@ -1,4 +1,4 @@
 import { config } from '@vitus-labs/core';
-export declare type ExtendCss = (styles: string | ((css: typeof config.css) => ReturnType<typeof css>) | null | undefined) => string | ReturnType<typeof config.css>;
+export declare type ExtendCss = (styles: ((css: typeof config.css) => ReturnType<typeof css>) | string | null | undefined) => string | ReturnType<typeof config.css>;
 declare const extendCss: ExtendCss;
 export default extendCss;

package/lib/types/styles/shorthands/index.d.ts

@@ -0,0 +1,4 @@
+import insetShorthand, { InsetShorthand } from './insetShorthand';
+import spacingShorthand, { SpacingShorthand } from './spacingShorthand';
+export type { InsetShorthand, SpacingShorthand };
+export { insetShorthand, spacingShorthand };

package/lib/types/styles/shorthands/insetShorthand.d.ts

@@ -0,0 +1,12 @@
+import { Value } from "../../types";
+export declare type InsetShorthand = (rootSize?: number) => (props: {
+    top: Value | null | undefined;
+    left: Value | null | undefined;
+    right: Value | null | undefined;
+    bottom: Value | null | undefined;
+    x: Value | null | undefined;
+    y: Value | null | undefined;
+    full: Value | null | undefined;
+}) => string | null;
+declare const insetShorthand: InsetShorthand;
+export default insetShorthand;

package/lib/types/styles/shorthands/spacingShorthand.d.ts

@@ -0,0 +1,12 @@
+import { Value } from "../../types";
+export declare type SpacingShorthand = (property: 'padding' | 'margin', rootSize?: number) => (props: {
+    top: Value | null | undefined;
+    left: Value | null | undefined;
+    right: Value | null | undefined;
+    bottom: Value | null | undefined;
+    x: Value | null | undefined;
+    y: Value | null | undefined;
+    full: Value | null | undefined;
+}) => string | null;
+declare const spacingShorthand: SpacingShorthand;
+export default spacingShorthand;

package/lib/types/styles/styles/types.d.ts

@@ -1,8 +1,6 @@
 import { config } from '@vitus-labs/core';
-declare type Value = 'auto' | 'inital' | 'inherit' | number | string;
-declare type Defaults = 'initial' | 'inherit';
-declare type Length = number | string;
-declare type BorderColor = 'transparent' | string | Defaults;
+import { Value, Defaults, Color } from "../../types";
+declare type BorderColor = Color | Defaults;
 declare type BorderImageRepeat = 'stretch' | 'repeat' | 'round' | 'space' | Defaults;
 declare type TextDecoration = 'none' | 'underline' | 'overline' | 'line-through' | 'blink' | Defaults;
 declare type BorderStyle = 'none' | 'hidden' | 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | Defaults;
@@ -10,8 +8,10 @@ declare type FontSize = 'medium' | 'xx-small' | 'x-small' | 'small' | 'large' |
 declare type ListStyleType = 'disc' | 'armenian' | 'circle' | 'cjk-ideographic' | 'decimal' | 'decimal-leading-zero' | 'georgian' | 'hebrew' | 'hiragana' | 'hiragana-iroha' | 'katakana' | 'katakana-iroha' | 'lower-alpha' | 'lower-greek' | 'lower-latin' | 'lower-roman' | 'none' | 'square' | 'upper-alpha' | 'upper-greek' | 'upper-latin' | 'upper-roman' | Defaults;
 declare type Overflow = 'visible' | 'hidden' | 'scroll' | 'auto' | Defaults;
 declare type Cursor = 'alias' | 'all-scroll' | 'auto' | 'cell' | 'context-menu' | 'col-resize' | 'copy' | 'crosshair' | 'default' | 'e-resize' | 'ew-resize' | 'grab' | 'grabbing' | 'help' | 'move' | 'n-resize' | 'ne-resize' | 'nesw-resize' | 'ns-resize' | 'nw-resize' | 'nwse-resize' | 'no-drop' | 'none' | 'not-allowed' | 'pointer' | 'progress' | 'row-resize' | 's-resize' | 'se-resize' | 'sw-resize' | 'text' | 'URL' | 'vertical-text' | 'w-resize' | 'wait' | 'zoom-in' | 'zoom-out' | Defaults;
-export declare type ITheme = Partial<{
-    inset: string;
+export declare type ITheme = {
+    inset: Value;
+    insetX: Value;
+    insetY: Value;
     top: Value;
     bottom: Value;
     left: Value;
@@ -50,7 +50,7 @@ export declare type ITheme = Partial<{
     background: string;
     backgroundAttachment: 'scroll' | 'fixed' | Defaults;
     backgroundClip: 'border-box' | 'padding-box' | 'content-box' | Defaults;
-    backgroundColor: string | 'transparent' | Defaults;
+    backgroundColor: Color;
     backgroundImage: string | 'none' | Defaults;
     backgroundOrigin: 'padding-box' | 'border-box' | 'content-box' | Defaults;
     backgroundPosition: any;
@@ -105,7 +105,7 @@ export declare type ITheme = Partial<{
     clear: 'left' | 'right' | 'auto' | 'both' | 'none' | Defaults;
     clip: 'shape' | 'auto' | Defaults;
     clipPath: string;
-    color: string;
+    color: Color;
     content: 'normal' | 'none' | 'counter' | 'open-quote' | 'close-quote' | 'no-open-quote' | 'no-close-quote' | Defaults | string;
     counterIncrement: string;
     counterReset: string;
@@ -133,7 +133,7 @@ export declare type ITheme = Partial<{
     justifyContent: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around';
     keyframe: any;
     letterSpacing: 'normal' | Value | Defaults;
-    lineHeight: 'normal' | Defaults | Length;
+    lineHeight: Value | 'normal' | 'revert' | 'unset' | Defaults;
     listStyle: string;
     listStyleImage: 'none' | string | Defaults;
     listStylePosition: string;
@@ -190,8 +190,8 @@ export declare type ITheme = Partial<{
     clearFix: boolean;
     fullScreen: boolean;
     extendCss: ReturnType<typeof config.css> | string;
-}>;
+};
 export declare type Theme = {
-    [I in keyof ITheme]: ITheme[I] | null;
+    [I in keyof ITheme]: ITheme[I] | null | undefined;
 };
 export {};

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

@@ -0,0 +1,11 @@
+import { Value } from "../../types";
+export declare type SpacingShorthand = (property: 'padding' | 'margin') => (props: {
+    top: Value | null | undefined;
+    left: Value | null | undefined;
+    right: Value | null | undefined;
+    bottom: Value | null | undefined;
+    x: Value | null | undefined;
+    y: Value | null | undefined;
+    full: Value | null | undefined;
+}) => string;
+export declare const spacingShorthand: SpacingShorthand;

package/lib/types/types.d.ts

@@ -1,2 +1,8 @@
 import { config } from '@vitus-labs/core';
 export declare type Css = typeof config.css;
+export declare type Defaults = 'initial' | 'inherit';
+export declare type Units = 'px' | 'rem' | 'em' | '%' | 'vh' | 'vw' | 'vmin' | 'vmax';
+export declare type UnitValue = number | `${number}${Units}`;
+export declare type Value = UnitValue | 'auto' | Defaults;
+export declare type Color = `#${string | number}` | 'currentcolor' | 'transparent' | `rgb(${number}, ${number}, ${number})` | `rgba(${number}, ${number}, ${number}, ${number})` | `hsl(${number}, ${number}%, ${number}%)` | `hsla(${number}, ${number}%, ${number}%, ${number})` | Defaults;
+export declare type BrowserColors = 'black' | 'silver' | 'gray' | 'white' | 'maroon' | 'red' | 'purple' | 'fuchsia' | 'green' | 'lime' | 'olive' | 'yellow' | 'navy' | 'blue' | 'teal' | 'aqua' | 'orange' | 'aliceblue' | 'antiquewhite' | 'aquamarine' | 'azure' | 'beige' | 'bisque' | 'blanchedalmond' | 'blueviolet' | 'brown' | 'burlywood' | 'cadetblue' | 'chartreuse' | 'chocolate' | 'coral' | 'cornflowerblue' | 'cornsilk' | 'crimson' | 'cyan' | 'darkblue' | 'darkcyan' | 'darkgoldenrod' | 'darkgray' | 'darkgreen' | 'darkgrey' | 'darkkhaki' | 'darkmagenta' | 'darkolivegreen' | 'darkorange' | 'darkorchid' | 'darkred' | 'darksalmon' | 'darkseagreen' | 'darkslateblue' | 'darkslategray' | 'darkslategrey' | 'darkturquoise' | 'darkviolet' | 'deeppink' | 'deepskyblue' | 'dimgray' | 'dimgrey' | 'dodgerblue' | 'firebrick' | 'floralwhite' | 'forestgreen' | 'gainsboro' | 'ghostwhite' | 'gold' | 'goldenrod' | 'greenyellow' | 'grey' | 'honeydew' | 'hotpink' | 'indianred' | 'indigo' | 'ivory' | 'khaki' | 'lavender' | 'lavenderblush' | 'lawngreen' | 'lemonchiffon' | 'lightblue' | 'lightcoral' | 'lightcyan' | 'lightgoldenrodyellow' | 'lightgray' | 'lightgreen' | 'lightgrey' | 'lightpink' | 'lightsalmon' | 'lightseagreen' | 'lightskyblue' | 'lightslategray' | 'lightslategrey' | 'lightsteelblue' | 'lightyellow' | 'limegreen' | 'linen' | 'magenta' | 'mediumaquamarine' | 'mediumblue' | 'mediumorchid' | 'mediumpurple' | 'mediumseagreen' | 'mediumslateblue' | 'mediumspringgreen' | 'mediumturquoise' | 'mediumvioletred' | 'midnightblue' | 'mintcream' | 'mistyrose' | 'moccasin' | 'navajowhite' | 'oldlace' | 'olivedrab' | 'orangered' | 'orchid' | 'palegoldenrod' | 'palegreen' | 'paleturquoise' | 'palevioletred' | 'papayawhip' | 'peachpuff' | 'peru' | 'pink' | 'plum' | 'powderblue' | 'rosybrown' | 'royalblue' | 'saddlebrown' | 'salmon' | 'sandybrown' | 'seagreen' | 'seashell' | 'sienna' | 'skyblue' | 'slateblue' | 'slategray' | 'slategrey' | 'snow' | 'springgreen' | 'steelblue' | 'tan' | 'thistle' | 'tomato' | 'turquoise' | 'violet' | 'wheat' | 'whitesmoke' | 'yellowgreen' | 'rebeccapurple';

package/lib/types/units/value.d.ts

@@ -1,3 +1,4 @@
-export declare type Value = (values: Array<unknown>, rootSize?: number, outputUnit?: 'px' | 'rem' | '%' | string) => string | number;
+import type { Units } from "../types";
+export declare type Value = (values: Array<unknown>, rootSize?: number, outputUnit?: Units) => string | number;
 declare const value: Value;
 export default value;

package/lib/vitus-labs-unistyle.browser.js

@@ -1,5 +1,5 @@
-import React, { useMemo, useState, useEffect } from 'react';
-import { memoize, isEmpty, set, config, Provider as Provider$1, throttle } from '@vitus-labs/core';
+import React, { useMemo } from 'react';
+import { memoize, isEmpty, set, config, Provider as Provider$1 } from '@vitus-labs/core';
 export { context } from '@vitus-labs/core';
 
 const breakpoints = {
@@ -64,7 +64,7 @@ const handleObjectCb = (obj) => (bp, i, bps, res) => {
 };
 const handleValueCb = (value) => () => value;
 const shouldNormalize = (props) => Object.values(props).some((item) => typeof item === 'object' || Array.isArray(item));
-const normalizeTheme = memoize(({ theme, breakpoints }) => {
+const normalizeTheme = ({ theme, breakpoints }) => {
     if (!shouldNormalize(theme))
         return theme;
     const getBpValues = assignToBreakbointKey(breakpoints);
@@ -86,7 +86,7 @@ const normalizeTheme = memoize(({ theme, breakpoints }) => {
         }
     });
     return result;
-}, { isDeepEqual: true, maxSize: 4000 });
+};
 
 const removeUnexpectedKeys = (obj, keys) => {
     const result = {};
@@ -208,22 +208,6 @@ const Provider = ({ theme, children, ...props }) => {
     return (React.createElement(Provider$1, { theme: result, ...props }, children));
 };
 
-const useWindowResize = (throttleDelay = 200, { width = 0, height = 0 } = {}) => {
-    const getSize = () => ({
-        width: window.innerWidth ,
-        height: window.innerHeight ,
-    });
-    const [windowSize, setWindowSize] = useState(getSize);
-    useEffect(() => {
-        const handleResize = throttle(() => {
-            setWindowSize(getSize());
-        }, throttleDelay);
-        window.addEventListener('resize', handleResize, false);
-        return () => window.removeEventListener('resize', handleResize, false);
-    }, []); // Empty array ensures that effect is only run on mount and unmount
-    return windowSize;
-};
-
 const stripUnit = (value, unitReturn) => {
     const cssRegex = /^([+-]?(?:\d+|\d*\.\d+))([a-z]*|%)$/;
     if (typeof value !== 'string')
@@ -239,11 +223,12 @@ const stripUnit = (value, unitReturn) => {
     return value;
 };
 
-const normalizeUnit = memoize(({ param, rootSize = 16, outputUnit = 'rem'  }) => {
-    if (!param && param !== 0)
+const isNotValue = (value) => !value && value !== 0;
+const normalizeUnit = ({ param, rootSize = 16, outputUnit = 'rem' , }) => {
+    if (isNotValue(param))
         return null;
     const [value, unit] = stripUnit(param, true);
-    if (!value && value !== 0)
+    if (isNotValue(value))
         return null;
     if (value === 0 || typeof value === 'string')
         return param; // zero should be unitless
@@ -258,7 +243,7 @@ const normalizeUnit = memoize(({ param, rootSize = 16, outputUnit = 'rem'  }) =>
     if (unit)
         return param;
     return `${value}${outputUnit}`;
-}, { isDeepEqual: true, maxSize: 1000 });
+};
 
 const getValueOf = (...values) => values.find((value) => typeof value !== 'undefined' && value !== null);
 const value = (values, rootSize, outputUnit) => {
@@ -279,6 +264,134 @@ const value = (values, rootSize, outputUnit) => {
     });
 };
 
+const isValidValue$1 = (value) => !!value || value === 0;
+// eslint-disable-next-line import/prefer-default-export
+const insetShorthand = (rootSize) => ({ top, left, right, bottom, x, y, full }) => {
+    if (!isValidValue$1(top) &&
+        !isValidValue$1(bottom) &&
+        !isValidValue$1(left) &&
+        !isValidValue$1(right) &&
+        !isValidValue$1(x) &&
+        !isValidValue$1(y) &&
+        !isValidValue$1(full)) {
+        return null;
+    }
+    const value = (param) => normalizeUnit({ param, rootSize });
+    // top - right - bottom - left
+    const spacing = [full, full, full, full];
+    if (isValidValue$1(x)) {
+        spacing[1] = x;
+        spacing[3] = x;
+    }
+    if (isValidValue$1(y)) {
+        spacing[0] = y;
+        spacing[2] = y;
+    }
+    if (isValidValue$1(top)) {
+        spacing[0] = top;
+    }
+    if (isValidValue$1(right)) {
+        spacing[1] = right;
+    }
+    if (isValidValue$1(bottom)) {
+        spacing[2] = bottom;
+    }
+    if (isValidValue$1(left)) {
+        spacing[3] = left;
+    }
+    const [t, r, b, l] = spacing;
+    if (spacing.every((val, _, arr) => isValidValue$1(val) && val === arr[0])) {
+        return `inset: ${t};`;
+    }
+    if (t === b && r === l) {
+        return `inset: ${value(t)} ${value(r)};`;
+    }
+    if (t && r === l && b) {
+        return `inset: ${value(t)} ${value(r)} ${value(b)};`;
+    }
+    if (spacing.every((val) => !!val)) {
+        return `inset: ${value(t)} ${value(r)} ${value(b)} ${value(l)};`;
+    }
+    let output = '';
+    if (isValidValue$1(t)) {
+        output += `$-top: ${value([t])};`;
+    }
+    if (isValidValue$1(b)) {
+        output += `bottom: ${value([b])};`;
+    }
+    if (isValidValue$1(l)) {
+        output += `left: ${value([l])};`;
+    }
+    if (isValidValue$1(r)) {
+        output += `right: ${value([r])};`;
+    }
+    return output;
+};
+
+const isValidValue = (value) => !!value || value === 0;
+// eslint-disable-next-line import/prefer-default-export
+const spacingShorthand = (property, rootSize) => ({ top, left, right, bottom, x, y, full }) => {
+    if (!isValidValue(top) &&
+        !isValidValue(bottom) &&
+        !isValidValue(left) &&
+        !isValidValue(right) &&
+        !isValidValue(x) &&
+        !isValidValue(y) &&
+        !isValidValue(full)) {
+        return null;
+    }
+    const value = (param) => normalizeUnit({ param, rootSize });
+    // top - right - bottom - left
+    const spacing = [full, full, full, full];
+    if (isValidValue(x)) {
+        spacing[1] = x;
+        spacing[3] = x;
+    }
+    if (isValidValue(y)) {
+        spacing[0] = y;
+        spacing[2] = y;
+    }
+    if (isValidValue(top)) {
+        spacing[0] = top;
+    }
+    if (isValidValue(right)) {
+        spacing[1] = right;
+    }
+    if (isValidValue(bottom)) {
+        spacing[2] = bottom;
+    }
+    if (isValidValue(left)) {
+        spacing[3] = left;
+    }
+    const [t, r, b, l] = spacing;
+    if (spacing.every((val, _, arr) => isValidValue(val) && val === arr[0])) {
+        return `${property}: ${t};`;
+    }
+    if (t === b && r === l) {
+        return `${property}: ${value(t)} ${value(r)};`;
+    }
+    if (t && r === l && b) {
+        return `${property}: ${value(t)} ${value(r)} ${value(b)};`;
+    }
+    if (spacing.every((val) => !!val)) {
+        return `${property}: ${value(t)} ${value(r)} ${value(b)} ${value(l)};`;
+    }
+    let output = '';
+    if (isValidValue(t)) {
+        output += `${property}-top: ${value([t])};`;
+    }
+    if (isValidValue(b)) {
+        output += `${property}-bottom: ${value([b])};`;
+    }
+    if (isValidValue(l)) {
+        output += `${property}-left: ${value([l])};`;
+    }
+    if (isValidValue(r)) {
+        output += `${property}-right: ${value([r])};`;
+    }
+    return output;
+};
+
 const styles = ({ theme: t, css, rootSize }) => {
     const value$1 = (...values) => value(values, rootSize);
     const pxValue = (...values) => value(values, rootSize, 'px');
@@ -301,11 +414,15 @@ const styles = ({ theme: t, css, rootSize }) => {
     box-sizing: ${t.boxSizing};
     float: ${t.float};
 
-    inset: ${t.inset};
-    top: ${value$1(t.top, t.positionY)};
-    bottom: ${value$1(t.bottom, t.positionY)};
-    left: ${value$1(t.left, t.positionX)};
-    right: ${value$1(t.right, t.positionX)};
+    ${insetShorthand(rootSize)({
+        top: t.top,
+        left: t.left,
+        bottom: t.bottom,
+        right: t.right,
+        x: t.insetX,
+        y: t.insetY,
+        full: t.inset,
+    })}
 
     width: ${value$1(t.width, t.size)};
     min-width: ${value$1(t.minWidth, t.minSize)};
@@ -318,17 +435,25 @@ const styles = ({ theme: t, css, rootSize }) => {
     /* ------------------------------------------------- */
     /* SPACING attributes */
     /* ------------------------------------------------- */
-    margin: ${value$1(t.margin)};
-    margin-top: ${value$1(t.marginTop, t.marginY)};
-    margin-bottom: ${value$1(t.marginBottom, t.marginY)};
-    margin-left: ${value$1(t.marginLeft, t.marginX)};
-    margin-right: ${value$1(t.marginRight, t.marginX)};
-
-    padding: ${value$1(t.padding)};
-    padding-top: ${value$1(t.paddingTop, t.paddingY)};
-    padding-bottom: ${value$1(t.paddingBottom, t.paddingY)};
-    padding-left: ${value$1(t.paddingLeft, t.paddingX)};
-    padding-right: ${value$1(t.paddingRight, t.paddingX)};
+    ${spacingShorthand('margin', rootSize)({
+        top: t.marginTop,
+        left: t.marginLeft,
+        bottom: t.marginBottom,
+        right: t.marginRight,
+        x: t.marginX,
+        y: t.marginY,
+        full: t.margin,
+    })};
+
+    ${spacingShorthand('padding', rootSize)({
+        top: t.paddingTop,
+        left: t.paddingLeft,
+        bottom: t.paddingBottom,
+        right: t.paddingRight,
+        x: t.paddingX,
+        y: t.paddingY,
+        full: t.padding,
+    })};
 
     /* ------------------------------------------------- */
     /* FLEX attributes */
@@ -576,5 +701,5 @@ const extendCss = (styles) => {
     return styles;
 };
 
-export { ALIGN_CONTENT_DIRECTION, ALIGN_CONTENT_MAP_X, ALIGN_CONTENT_MAP_Y, Provider, alignContent, breakpoints, createMediaQueries, extendCss, makeItResponsive, normalizeTheme, normalizeUnit, sortBreakpoints, stripUnit, styles, transformTheme, useWindowResize, value };
+export { ALIGN_CONTENT_DIRECTION, ALIGN_CONTENT_MAP_X, ALIGN_CONTENT_MAP_Y, Provider, alignContent, breakpoints, createMediaQueries, extendCss, makeItResponsive, normalizeTheme, normalizeUnit, sortBreakpoints, stripUnit, styles, transformTheme, value };
 //# sourceMappingURL=vitus-labs-unistyle.browser.js.map