@vtex/admin-ui-system - npm Package Compare versions

Comparing version 0.1.0-alpha.0 to 0.1.0-alpha.1

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [0.1.0-alpha.1](https://github.com/vtex/onda/compare/@vtex/admin-ui-system@0.1.0-alpha.0...@vtex/admin-ui-system@0.1.0-alpha.1) (2020-10-22)
+
+
+### Features
+
+* **style-props:** add space and size style-props ([7098f06](https://github.com/vtex/onda/commit/7098f06843f0e02d29c6366eca2cb76e84616802))
+
+
+
+
+
 # 0.1.0-alpha.0 (2020-10-22)
@@ -8,0 +19,0 @@

dist/admin-ui-system.cjs.development.js

@@ -38,2 +38,3 @@ 'use strict';
 
+var availableStyleProps = ['padding', 'margin', 'paddingX', 'paddingY', 'marginX', 'marginY', 'height', 'width', 'minHeight', 'minWidth', 'maxHeight', 'maxWidth'];
 var cssProps = {
@@ -689,3 +690,3 @@ _hover: ':hover',
   });
-  var styles = getPatternStyles({
+  var styles = getStyleProps({
     theme: theme,
@@ -736,3 +737,3 @@ props: props,
 
-function getPatternStyles(params) {
+function getStyleProps(params) {
   var theme = params.theme,
@@ -744,2 +745,3 @@ _params$props2 = params.props,
   var patterns = pick.apply(void 0, [props].concat(patternKeys));
+  var styleProps = pick.apply(void 0, [props].concat(availableStyleProps));
   var patternsStyleObject = Object.keys(patterns).reduce(function (acc, key) {
@@ -750,3 +752,3 @@ var patternPath = "patterns." + key + "." + css.get(patterns, key, '');
   }, {});
-  var mergedTheme = merge(patternsStyleObject, styles);
+  var mergedTheme = merge(_extends({}, patternsStyleObject, styleProps), styles);
   return mergedTheme;
@@ -831,3 +833,3 @@ }
 exports.getClassName = getClassName;
-exports.getPatternStyles = getPatternStyles;
+exports.getStyleProps = getStyleProps;
 exports.isCSSProp = isCSSProp;
@@ -834,0 +836,0 @@ exports.isFunction = isFunction;

dist/admin-ui-system.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("react")),r=require("@theme-ui/core");require("focus-visible/dist/focus-visible");var o=e(require("@emotion/is-prop-valid")),i=require("@theme-ui/css"),n=e(require("deepmerge")),a=require("emotion"),l=e(require("tiny-invariant")),s=require("@theme-ui/match-media"),d=require("@emotion/core"),c=function(e){for(var t=arguments.length,r=new Array(t>1?t-1:0),o=1;o<t;o++)r[o-1]=arguments[o];return Object.keys(e).reduce((function(t,o){return-1===r.indexOf(o)&&(t[o]=e[o]),t}),{})},p={_hover:":hover",_hoveractive:":hover:active",_focus:":focus",_visited:":visited",_active:":active",_disabled:":disabled",_groupHover:"[role=group]:hover &",_groupActive:"[role=group]:active &",_groupFocus:"[role=group]:focus &",_groupVisited:"[role=group]:visited &",_groupDisabled:"[role=group]:disabled &",alignContent:"align-content",alignSelf:"align-self",alignItems:"align-items",justifyContent:"justify-content",justifyItems:"justify-items",justifySelf:"justify-self",flex:"flex",flexBasis:"flex-basis",flexDirection:"flex-direction",flexFlow:"flex-flow",flexGrow:"flex-grow",flexShrink:"flex-shrink",flexWrap:"flex-wrap",alignmentBaseline:"alignment-baseline",all:"all",animation:"animation",animationDelay:"animation-delay",animationDirection:"animation-direction",animationDuration:"animation-duration",animationFillMode:"animation-fill-mode",animationIterationCount:"animation-iteration-count",animationName:"animation-name",animationPlayState:"animation-play-state",animationTimingFunction:"animation-timing-function",appearance:"appearance",azimuth:"azimuth",backfaceVisibility:"backface-visibility",background:"background",backgroundAttachment:"background-attachment",backgroundBlendMode:"background-blend-mode",backgroundClip:"background-clip",bg:"background-color",backgroundColor:"background-color",backgroundImage:"background-image",backgroundImageTransform:"background-image-transform",backgroundOrigin:"background-origin",backgroundPosition:"background-position",backgroundRepeat:"background-repeat",backgroundSize:"background-size",baselineShift:"baseline-shift",blockSize:"block-size",blockStep:"block-step",blockStepAlign:"block-step-align",blockStepInsert:"block-step-insert",blockStepRound:"block-step-round",blockStepSize:"block-step-size",bookmarkLabel:"bookmark-label",bookmarkLevel:"bookmark-level",bookmarkState:"bookmark-state",border:"border",borderBlock:"border-block",borderBlockColor:"border-block-color",borderBlockEnd:"border-block-end",borderBlockEndColor:"border-block-end-color",borderBlockEndStyle:"border-block-end-style",borderBlockEndWidth:"border-block-end-width",borderBlockStart:"border-block-start",borderBlockStartColor:"border-block-start-color",borderBlockStartStyle:"border-block-start-style",borderBlockStartWidth:"border-block-start-width",borderBlockStyle:"border-block-style",borderBlockWidth:"border-block-width",borderBottom:"border-bottom",borderBottomColor:"border-bottom-color",borderBottomLeftRadius:"border-bottom-left-radius",borderBottomRightRadius:"border-bottom-right-radius",borderBottomStyle:"border-bottom-style",borderBottomWidth:"border-bottom-width",borderBoundary:"border-boundary",borderCollapse:"border-collapse",borderColor:"border-color",borderImage:"border-image",borderImageOutset:"border-image-outset",borderImageRepeat:"border-image-repeat",borderImageSlice:"border-image-slice",borderImageSource:"border-image-source",borderImageTransform:"border-image-transform",borderImageWidth:"border-image-width",borderInline:"border-inline",borderInlineColor:"border-inline-color",borderInlineEnd:"border-inline-end",borderInlineEndColor:"border-inline-end-color",borderInlineEndStyle:"border-inline-end-style",borderInlineEndWidth:"border-inline-end-width",borderInlineStart:"border-inline-start",borderInlineStartColor:"border-inline-start-color",borderInlineStartStyle:"border-inline-start-style",borderInlineStartWidth:"border-inline-start-width",borderInlineStyle:"border-inline-style",borderInlineWidth:"border-inline-width",borderLeft:"border-left",borderLeftColor:"border-left-color",borderLeftStyle:"border-left-style",borderLeftWidth:"border-left-width",borderRadius:"border-radius",borderRight:"border-right",borderRightColor:"border-right-color",borderRightStyle:"border-right-style",borderRightWidth:"border-right-width",borderSpacing:"border-spacing",borderStyle:"border-style",borderTop:"border-top",borderTopColor:"border-top-color",borderTopLeftRadius:"border-top-left-radius",borderTopRightRadius:"border-top-right-radius",borderTopStyle:"border-top-style",borderTopWidth:"border-top-width",borderWidth:"border-width",bottom:"bottom",boxDecorationBreak:"box-decoration-break",boxShadow:"box-shadow",boxSizing:"box-sizing",boxSnap:"box-snap",breakAfter:"break-after",breakBefore:"break-before",breakInside:"break-inside",captionSide:"caption-side",caret:"caret",caretAnimation:"caret-animation",caretColor:"caret-color",caretShape:"caret-shape",chains:"chains",clear:"clear",clip:"clip",clipPath:"clip-path",clipRule:"clip-rule",color:"color",colorAdjust:"color-adjust",colorInterpolationFilters:"color-interpolation-filters",columnCount:"column-count",columnFill:"column-fill",columnGap:"column-gap",columnRule:"column-rule",columnRuleColor:"column-rule-color",columnRuleStyle:"column-rule-style",columnRuleWidth:"column-rule-width",columnSpan:"column-span",columnWidth:"column-width",columns:"columns",contain:"contain",content:"content",continue:"continue",counterIncrement:"counter-increment",counterReset:"counter-reset",counterSet:"counter-set",cue:"cue",cueAfter:"cue-after",cueBefore:"cue-before",cursor:"cursor",direction:"direction",display:"display",dominantBaseline:"dominant-baseline",elevation:"elevation",emptyCells:"empty-cells",fill:"fill",fillBreak:"fill-break",fillColor:"fill-color",fillImage:"fill-image",fillOpacity:"fill-opacity",fillOrigin:"fill-origin",fillPosition:"fill-position",fillRepeat:"fill-repeat",fillRule:"fill-rule",fillSize:"fill-size",filter:"filter",float:"float",floatDefer:"float-defer",floatOffset:"float-offset",floatReference:"float-reference",floodColor:"flood-color",floodOpacity:"flood-opacity",flow:"flow",flowFrom:"flow-from",flowInto:"flow-into",font:"font",fontFamily:"font-family",fontFeatureSettings:"font-feature-settings",fontKerning:"font-kerning",fontLanguageOverride:"font-language-override",fontMaxSize:"font-max-size",fontMinSize:"font-min-size",fontOpticalSizing:"font-optical-sizing",fontPalette:"font-palette",fontPresentation:"font-presentation",fontSize:"font-size",fontSizeAdjust:"font-size-adjust",fontStretch:"font-stretch",fontStyle:"font-style",fontSynthesis:"font-synthesis",fontVariant:"font-variant",fontVariantAlternates:"font-variant-alternates",fontVariantCaps:"font-variant-caps",fontVariantEastAsian:"font-variant-east-asian",fontVariantLigatures:"font-variant-ligatures",fontVariantNumeric:"font-variant-numeric",fontVariantPosition:"font-variant-position",fontVariationSettings:"font-variation-settings",fontWeight:"font-weight",footnoteDisplay:"footnote-display",footnotePolicy:"footnote-policy",gap:"gap",glyphOrientationVertical:"glyph-orientation-vertical",grid:"grid",gridArea:"grid-area",gridAutoColumns:"grid-auto-columns",gridAutoFlow:"grid-auto-flow",gridAutoRows:"grid-auto-rows",gridColumn:"grid-column",gridColumnEnd:"grid-column-end",gridColumnGap:"grid-column-gap",gridColumnStart:"grid-column-start",gridGap:"grid-gap",gridRow:"grid-row",gridRowEnd:"grid-row-end",gridRowGap:"grid-row-gap",gridRowStart:"grid-row-start",gridTemplate:"grid-template",gridTemplateAreas:"grid-template-areas",gridTemplateColumns:"grid-template-columns",gridTemplateRows:"grid-template-rows",hangingPunctuation:"hanging-punctuation",height:"height",hyphenateCharacter:"hyphenate-character",hyphenateLimitChars:"hyphenate-limit-chars",hyphenateLimitLast:"hyphenate-limit-last",hyphenateLimitLines:"hyphenate-limit-lines",hyphenateLimitZone:"hyphenate-limit-zone",hyphens:"hyphens",imageOrientation:"image-orientation",imageResolution:"image-resolution",initialLetter:"initial-letter",initialLetterAlign:"initial-letter-align",initialLetterWrap:"initial-letter-wrap",inlineSize:"inline-size",inset:"inset",insetBlock:"inset-block",insetBlockEnd:"inset-block-end",insetBlockStart:"inset-block-start",insetInline:"inset-inline",insetInlineEnd:"inset-inline-end",insetInlineStart:"inset-inline-start",isolation:"isolation",left:"left",letterSpacing:"letter-spacing",lightingColor:"lighting-color",lineBreak:"line-break",lineGrid:"line-grid",lineHeight:"line-height",lineHeightStep:"line-height-step",lineSnap:"line-snap",listStyle:"list-style",listStyleImage:"list-style-image",listStylePosition:"list-style-position",listStyleType:"list-style-type",margin:"margin",marginBlock:"margin-block",marginBlockEnd:"margin-block-end",marginBlockStart:"margin-block-start",marginBottom:"margin-bottom",marginInline:"margin-inline",marginInlineEnd:"margin-inline-end",marginInlineStart:"margin-inline-start",marginLeft:"margin-left",marginRight:"margin-right",marginTop:"margin-top",marginX:"marginX",marginY:"marginY",marker:"marker",markerEnd:"marker-end",markerKnockoutLeft:"marker-knockout-left",markerKnockoutRight:"marker-knockout-right",markerMid:"marker-mid",markerPattern:"marker-pattern",markerSegment:"marker-segment",markerSide:"marker-side",markerStart:"marker-start",marqueeDirection:"marquee-direction",marqueeLoop:"marquee-loop",marqueeSpeed:"marquee-speed",marqueeStyle:"marquee-style",mask:"mask",maskBorder:"mask-border",maskBorderMode:"mask-border-mode",maskBorderOutset:"mask-border-outset",maskBorderRepeat:"mask-border-repeat",maskBorderSlice:"mask-border-slice",maskBorderSource:"mask-border-source",maskBorderWidth:"mask-border-width",maskClip:"mask-clip",maskComposite:"mask-composite",maskImage:"mask-image",maskMode:"mask-mode",maskOrigin:"mask-origin",maskPosition:"mask-position",maskRepeat:"mask-repeat",maskSize:"mask-size",maskType:"mask-type",maxBlockSize:"max-block-size",maxHeight:"max-height",maxInlineSize:"max-inline-size",maxLines:"max-lines",maxWidth:"max-width",minBlockSize:"min-block-size",minHeight:"min-height",minInlineSize:"min-inline-size",minWidth:"min-width",mixBlendMode:"mix-blend-mode",navDown:"nav-down",navLeft:"nav-left",navRight:"nav-right",navUp:"nav-up",objectFit:"object-fit",objectPosition:"object-position",offset:"offset",offsetAfter:"offset-after",offsetAnchor:"offset-anchor",offsetBefore:"offset-before",offsetDistance:"offset-distance",offsetEnd:"offset-end",offsetPath:"offset-path",offsetPosition:"offset-position",offsetRotate:"offset-rotate",offsetStart:"offset-start",opacity:"opacity",order:"order",orphans:"orphans",outline:"outline",outlineColor:"outline-color",outlineOffset:"outline-offset",outlineStyle:"outline-style",outlineWidth:"outline-width",overflow:"overflow",overflowStyle:"overflow-style",overflowWrap:"overflow-wrap",overflowX:"overflow-x",overflowY:"overflow-y",padding:"padding",paddingBlock:"padding-block",paddingBlockEnd:"padding-block-end",paddingBlockStart:"padding-block-start",paddingBottom:"padding-bottom",paddingInline:"padding-inline",paddingInlineEnd:"padding-inline-end",paddingInlineStart:"padding-inline-start",paddingLeft:"padding-left",paddingRight:"padding-right",paddingTop:"padding-top",paddingX:"paddingX",paddingY:"paddingY",page:"page",pageBreakAfter:"page-break-after",pageBreakBefore:"page-break-before",pageBreakInside:"page-break-inside",pause:"pause",pauseAfter:"pause-after",pauseBefore:"pause-before",perspective:"perspective",perspectiveOrigin:"perspective-origin",pitch:"pitch",pitchRange:"pitch-range",placeContent:"place-content",placeItems:"place-items",placeSelf:"place-self",playDuring:"play-during",pointerEvents:"pointer-events",position:"position",presentationLevel:"presentation-level",quotes:"quotes",regionFragment:"region-fragment",resize:"resize",rest:"rest",restAfter:"rest-after",restBefore:"rest-before",richness:"richness",right:"right",rotation:"rotation",rotationPoint:"rotation-point",rowGap:"row-gap",rubyAlign:"ruby-align",rubyMerge:"ruby-merge",rubyPosition:"ruby-position",running:"running",scrollBehavior:"scroll-behavior",scrollPadding:"scroll-padding",scrollPaddingBlock:"scroll-padding-block",scrollPaddingBlockEnd:"scroll-padding-block-end",scrollPaddingBlockStart:"scroll-padding-block-start",scrollPaddingBottom:"scroll-padding-bottom",scrollPaddingInline:"scroll-padding-inline",scrollPaddingInlineEnd:"scroll-padding-inline-end",scrollPaddingInlineStart:"scroll-padding-inline-start",scrollPaddingLeft:"scroll-padding-left",scrollPaddingRight:"scroll-padding-right",scrollPaddingTop:"scroll-padding-top",scrollSnapAlign:"scroll-snap-align",scrollSnapMargin:"scroll-snap-margin",scrollSnapMarginBlock:"scroll-snap-margin-block",scrollSnapMarginBlockEnd:"scroll-snap-margin-block-end",scrollSnapMarginBlockStart:"scroll-snap-margin-block-start",scrollSnapMarginBottom:"scroll-snap-margin-bottom",scrollSnapMarginInline:"scroll-snap-margin-inline",scrollSnapMarginInlineEnd:"scroll-snap-margin-inline-end",scrollSnapMarginInlineStart:"scroll-snap-margin-inline-start",scrollSnapMarginLeft:"scroll-snap-margin-left",scrollSnapMarginRight:"scroll-snap-margin-right",scrollSnapMarginTop:"scroll-snap-margin-top",scrollSnapStop:"scroll-snap-stop",scrollSnapType:"scroll-snap-type",scrollbarGutter:"scrollbar-gutter",shapeImageThreshold:"shape-image-threshold",shapeInside:"shape-inside",shapeMargin:"shape-margin",shapeOutside:"shape-outside",speak:"speak",speakAs:"speak-as",speakHeader:"speak-header",speakNumeral:"speak-numeral",speakPunctuation:"speak-punctuation",speechRate:"speech-rate",stress:"stress",stringSet:"string-set",stroke:"stroke",strokeAlign:"stroke-align",strokeAlignment:"stroke-alignment",strokeBreak:"stroke-break",strokeColor:"stroke-color",strokeDashCorner:"stroke-dash-corner",strokeDashJustify:"stroke-dash-justify",strokeDashadjust:"stroke-dashadjust",strokeDasharray:"stroke-dasharray",strokeDashcorner:"stroke-dashcorner",strokeDashoffset:"stroke-dashoffset",strokeImage:"stroke-image",strokeLinecap:"stroke-linecap",strokeLinejoin:"stroke-linejoin",strokeMiterlimit:"stroke-miterlimit",strokeOpacity:"stroke-opacity",strokeOrigin:"stroke-origin",strokePosition:"stroke-position",strokeRepeat:"stroke-repeat",strokeSize:"stroke-size",strokeWidth:"stroke-width",tabSize:"tab-size",tableLayout:"table-layout",textAlign:"text-align",textAlignAll:"text-align-all",textAlignLast:"text-align-last",textCombineUpright:"text-combine-upright",textDecoration:"text-decoration",textDecorationColor:"text-decoration-color",textDecorationLine:"text-decoration-line",textDecorationSkip:"text-decoration-skip",textDecorationStyle:"text-decoration-style",textEmphasis:"text-emphasis",textEmphasisColor:"text-emphasis-color",textEmphasisPosition:"text-emphasis-position",textEmphasisStyle:"text-emphasis-style",textIndent:"text-indent",textJustify:"text-justify",textOrientation:"text-orientation",textOverflow:"text-overflow",textShadow:"text-shadow",textSpaceCollapse:"text-space-collapse",textSpaceTrim:"text-space-trim",textSpacing:"text-spacing",textTransform:"text-transform",textUnderlinePosition:"text-underline-position",textWrap:"text-wrap",top:"top",transform:"transform",transformBox:"transform-box",transformOrigin:"transform-origin",transformStyle:"transform-style",transition:"transition",transitionDelay:"transition-delay",transitionDuration:"transition-duration",transitionProperty:"transition-property",transitionTimingFunction:"transition-timing-function",unicodeBidi:"unicode-bidi",userSelect:"user-select",verticalAlign:"vertical-align",visibility:"visibility",voiceBalance:"voice-balance",voiceDuration:"voice-duration",voiceFamily:"voice-family",voicePitch:"voice-pitch",voiceRange:"voice-range",voiceRate:"voice-rate",voiceStress:"voice-stress",voiceVolume:"voice-volume",volume:"volume",whiteSpace:"white-space",widows:"widows",width:"width",willChange:"will-change",wordBreak:"word-break",wordSpacing:"word-spacing",wordWrap:"word-wrap",wrapAfter:"wrap-after",wrapBefore:"wrap-before",wrapFlow:"wrap-flow",wrapInside:"wrap-inside",wrapThrough:"wrap-through",writingMode:"writing-mode",zIndex:"z-index"},g=["focusable","spacing","size","kind","variant","orientation","wrap","colorMode"];function m(e){return c.apply(void 0,[e].concat(Object.keys(p)))}function u(e){var t={};for(var r in e)o(r)&&!g.includes(r)&&(t[r]=e[r]);return t}function f(){return(f=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e}).apply(this,arguments)}var b=function(e){return"function"==typeof e},k=function(e){return 0===Object.keys(e).length&&e.constructor===Object},h=function(e){for(var t={},r=arguments.length,o=new Array(r>1?r-1:0),i=1;i<r;i++)o[i-1]=arguments[i];return o.forEach((function(r){r in e&&(t[r]=e[r])})),t};function y(e){var t=e.props,r=e.theme;return v({theme:r,styles:x({theme:r,props:t,styles:S({props:t,themeKey:e.themeKey})})})}function S(e){var t=e.props,r=e.themeKey,o=void 0===r?"":r,n=i.get(void 0===t?{}:t,"styles",{});return f({variant:i.get(n,"variant",o)},n)}function v(e){var t=e.theme,r=i.css(e.styles)(t);return a.css(r)}function x(e){var t=e.theme,r=e.props,o=void 0===r?{}:r,a=e.styles,l=Object.keys(i.get(t,"patterns",{})),s=h.apply(void 0,[o].concat(l)),d=Object.keys(s).reduce((function(e,r){var o="patterns."+r+"."+i.get(s,r,"");return f({},e,i.get(t,o,{}))}),{});return n(d,a)}function w(){var e=r.useThemeUI().theme;return(k(e)||!e)&&l(!1),e}Object.defineProperty(exports,"jsx",{enumerable:!0,get:function(){return r.jsx}}),Object.defineProperty(exports,"cssExtractor",{enumerable:!0,get:function(){return i.css}}),Object.defineProperty(exports,"get",{enumerable:!0,get:function(){return i.get}}),exports.merge=n,Object.defineProperty(exports,"cssResolver",{enumerable:!0,get:function(){return a.css}}),Object.defineProperty(exports,"Global",{enumerable:!0,get:function(){return d.Global}}),Object.defineProperty(exports,"css",{enumerable:!0,get:function(){return d.css}}),Object.defineProperty(exports,"keyframes",{enumerable:!0,get:function(){return d.keyframes}}),exports.cleanProps=function(e){return m(u(e))},exports.createElement=function(e){var r=e.children,o=e.component,i=e.htmlProps,n=e.element,a=e.ref;return b(r)?r(i):t.createElement(o,f({as:n},i,{ref:a}),null!=r?r:null==i?void 0:i.children)},exports.getClassName=y,exports.getPatternStyles=x,exports.isCSSProp=function(e){return Object.keys(p).includes(e)},exports.isFunction=b,exports.isObjectEmpty=k,exports.omit=c,exports.omitCSSProps=m,exports.pick=h,exports.pickCSSProps=function(e){return h.apply(void 0,[e].concat(Object.keys(p)))},exports.pickHTMLProps=u,exports.renameKeys=function(e,t){return Object.keys(t).reduce((function(r,o){var i;return f({},r,((i={})[e[o]||o]=t[o],i))}),{})},exports.resolveCSS=v,exports.selectVariant=S,exports.unstableThemeProvider=function(e){return t.createElement(r.ThemeProvider,{theme:e.theme},e.children)},exports.useClassName=function(e){return y({props:e.props,themeKey:e.themeKey,theme:w()})},exports.useResponsiveValue=function(e){var t=Array.isArray(e)?e:[e];return s.useResponsiveValue(t)},exports.useTheme=w;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("react")),r=require("@theme-ui/core");require("focus-visible/dist/focus-visible");var o=e(require("@emotion/is-prop-valid")),i=require("@theme-ui/css"),n=e(require("deepmerge")),a=require("emotion"),l=e(require("tiny-invariant")),s=require("@theme-ui/match-media"),d=require("@emotion/core"),c=function(e){for(var t=arguments.length,r=new Array(t>1?t-1:0),o=1;o<t;o++)r[o-1]=arguments[o];return Object.keys(e).reduce((function(t,o){return-1===r.indexOf(o)&&(t[o]=e[o]),t}),{})},p=["padding","margin","paddingX","paddingY","marginX","marginY","height","width","minHeight","minWidth","maxHeight","maxWidth"],g={_hover:":hover",_hoveractive:":hover:active",_focus:":focus",_visited:":visited",_active:":active",_disabled:":disabled",_groupHover:"[role=group]:hover &",_groupActive:"[role=group]:active &",_groupFocus:"[role=group]:focus &",_groupVisited:"[role=group]:visited &",_groupDisabled:"[role=group]:disabled &",alignContent:"align-content",alignSelf:"align-self",alignItems:"align-items",justifyContent:"justify-content",justifyItems:"justify-items",justifySelf:"justify-self",flex:"flex",flexBasis:"flex-basis",flexDirection:"flex-direction",flexFlow:"flex-flow",flexGrow:"flex-grow",flexShrink:"flex-shrink",flexWrap:"flex-wrap",alignmentBaseline:"alignment-baseline",all:"all",animation:"animation",animationDelay:"animation-delay",animationDirection:"animation-direction",animationDuration:"animation-duration",animationFillMode:"animation-fill-mode",animationIterationCount:"animation-iteration-count",animationName:"animation-name",animationPlayState:"animation-play-state",animationTimingFunction:"animation-timing-function",appearance:"appearance",azimuth:"azimuth",backfaceVisibility:"backface-visibility",background:"background",backgroundAttachment:"background-attachment",backgroundBlendMode:"background-blend-mode",backgroundClip:"background-clip",bg:"background-color",backgroundColor:"background-color",backgroundImage:"background-image",backgroundImageTransform:"background-image-transform",backgroundOrigin:"background-origin",backgroundPosition:"background-position",backgroundRepeat:"background-repeat",backgroundSize:"background-size",baselineShift:"baseline-shift",blockSize:"block-size",blockStep:"block-step",blockStepAlign:"block-step-align",blockStepInsert:"block-step-insert",blockStepRound:"block-step-round",blockStepSize:"block-step-size",bookmarkLabel:"bookmark-label",bookmarkLevel:"bookmark-level",bookmarkState:"bookmark-state",border:"border",borderBlock:"border-block",borderBlockColor:"border-block-color",borderBlockEnd:"border-block-end",borderBlockEndColor:"border-block-end-color",borderBlockEndStyle:"border-block-end-style",borderBlockEndWidth:"border-block-end-width",borderBlockStart:"border-block-start",borderBlockStartColor:"border-block-start-color",borderBlockStartStyle:"border-block-start-style",borderBlockStartWidth:"border-block-start-width",borderBlockStyle:"border-block-style",borderBlockWidth:"border-block-width",borderBottom:"border-bottom",borderBottomColor:"border-bottom-color",borderBottomLeftRadius:"border-bottom-left-radius",borderBottomRightRadius:"border-bottom-right-radius",borderBottomStyle:"border-bottom-style",borderBottomWidth:"border-bottom-width",borderBoundary:"border-boundary",borderCollapse:"border-collapse",borderColor:"border-color",borderImage:"border-image",borderImageOutset:"border-image-outset",borderImageRepeat:"border-image-repeat",borderImageSlice:"border-image-slice",borderImageSource:"border-image-source",borderImageTransform:"border-image-transform",borderImageWidth:"border-image-width",borderInline:"border-inline",borderInlineColor:"border-inline-color",borderInlineEnd:"border-inline-end",borderInlineEndColor:"border-inline-end-color",borderInlineEndStyle:"border-inline-end-style",borderInlineEndWidth:"border-inline-end-width",borderInlineStart:"border-inline-start",borderInlineStartColor:"border-inline-start-color",borderInlineStartStyle:"border-inline-start-style",borderInlineStartWidth:"border-inline-start-width",borderInlineStyle:"border-inline-style",borderInlineWidth:"border-inline-width",borderLeft:"border-left",borderLeftColor:"border-left-color",borderLeftStyle:"border-left-style",borderLeftWidth:"border-left-width",borderRadius:"border-radius",borderRight:"border-right",borderRightColor:"border-right-color",borderRightStyle:"border-right-style",borderRightWidth:"border-right-width",borderSpacing:"border-spacing",borderStyle:"border-style",borderTop:"border-top",borderTopColor:"border-top-color",borderTopLeftRadius:"border-top-left-radius",borderTopRightRadius:"border-top-right-radius",borderTopStyle:"border-top-style",borderTopWidth:"border-top-width",borderWidth:"border-width",bottom:"bottom",boxDecorationBreak:"box-decoration-break",boxShadow:"box-shadow",boxSizing:"box-sizing",boxSnap:"box-snap",breakAfter:"break-after",breakBefore:"break-before",breakInside:"break-inside",captionSide:"caption-side",caret:"caret",caretAnimation:"caret-animation",caretColor:"caret-color",caretShape:"caret-shape",chains:"chains",clear:"clear",clip:"clip",clipPath:"clip-path",clipRule:"clip-rule",color:"color",colorAdjust:"color-adjust",colorInterpolationFilters:"color-interpolation-filters",columnCount:"column-count",columnFill:"column-fill",columnGap:"column-gap",columnRule:"column-rule",columnRuleColor:"column-rule-color",columnRuleStyle:"column-rule-style",columnRuleWidth:"column-rule-width",columnSpan:"column-span",columnWidth:"column-width",columns:"columns",contain:"contain",content:"content",continue:"continue",counterIncrement:"counter-increment",counterReset:"counter-reset",counterSet:"counter-set",cue:"cue",cueAfter:"cue-after",cueBefore:"cue-before",cursor:"cursor",direction:"direction",display:"display",dominantBaseline:"dominant-baseline",elevation:"elevation",emptyCells:"empty-cells",fill:"fill",fillBreak:"fill-break",fillColor:"fill-color",fillImage:"fill-image",fillOpacity:"fill-opacity",fillOrigin:"fill-origin",fillPosition:"fill-position",fillRepeat:"fill-repeat",fillRule:"fill-rule",fillSize:"fill-size",filter:"filter",float:"float",floatDefer:"float-defer",floatOffset:"float-offset",floatReference:"float-reference",floodColor:"flood-color",floodOpacity:"flood-opacity",flow:"flow",flowFrom:"flow-from",flowInto:"flow-into",font:"font",fontFamily:"font-family",fontFeatureSettings:"font-feature-settings",fontKerning:"font-kerning",fontLanguageOverride:"font-language-override",fontMaxSize:"font-max-size",fontMinSize:"font-min-size",fontOpticalSizing:"font-optical-sizing",fontPalette:"font-palette",fontPresentation:"font-presentation",fontSize:"font-size",fontSizeAdjust:"font-size-adjust",fontStretch:"font-stretch",fontStyle:"font-style",fontSynthesis:"font-synthesis",fontVariant:"font-variant",fontVariantAlternates:"font-variant-alternates",fontVariantCaps:"font-variant-caps",fontVariantEastAsian:"font-variant-east-asian",fontVariantLigatures:"font-variant-ligatures",fontVariantNumeric:"font-variant-numeric",fontVariantPosition:"font-variant-position",fontVariationSettings:"font-variation-settings",fontWeight:"font-weight",footnoteDisplay:"footnote-display",footnotePolicy:"footnote-policy",gap:"gap",glyphOrientationVertical:"glyph-orientation-vertical",grid:"grid",gridArea:"grid-area",gridAutoColumns:"grid-auto-columns",gridAutoFlow:"grid-auto-flow",gridAutoRows:"grid-auto-rows",gridColumn:"grid-column",gridColumnEnd:"grid-column-end",gridColumnGap:"grid-column-gap",gridColumnStart:"grid-column-start",gridGap:"grid-gap",gridRow:"grid-row",gridRowEnd:"grid-row-end",gridRowGap:"grid-row-gap",gridRowStart:"grid-row-start",gridTemplate:"grid-template",gridTemplateAreas:"grid-template-areas",gridTemplateColumns:"grid-template-columns",gridTemplateRows:"grid-template-rows",hangingPunctuation:"hanging-punctuation",height:"height",hyphenateCharacter:"hyphenate-character",hyphenateLimitChars:"hyphenate-limit-chars",hyphenateLimitLast:"hyphenate-limit-last",hyphenateLimitLines:"hyphenate-limit-lines",hyphenateLimitZone:"hyphenate-limit-zone",hyphens:"hyphens",imageOrientation:"image-orientation",imageResolution:"image-resolution",initialLetter:"initial-letter",initialLetterAlign:"initial-letter-align",initialLetterWrap:"initial-letter-wrap",inlineSize:"inline-size",inset:"inset",insetBlock:"inset-block",insetBlockEnd:"inset-block-end",insetBlockStart:"inset-block-start",insetInline:"inset-inline",insetInlineEnd:"inset-inline-end",insetInlineStart:"inset-inline-start",isolation:"isolation",left:"left",letterSpacing:"letter-spacing",lightingColor:"lighting-color",lineBreak:"line-break",lineGrid:"line-grid",lineHeight:"line-height",lineHeightStep:"line-height-step",lineSnap:"line-snap",listStyle:"list-style",listStyleImage:"list-style-image",listStylePosition:"list-style-position",listStyleType:"list-style-type",margin:"margin",marginBlock:"margin-block",marginBlockEnd:"margin-block-end",marginBlockStart:"margin-block-start",marginBottom:"margin-bottom",marginInline:"margin-inline",marginInlineEnd:"margin-inline-end",marginInlineStart:"margin-inline-start",marginLeft:"margin-left",marginRight:"margin-right",marginTop:"margin-top",marginX:"marginX",marginY:"marginY",marker:"marker",markerEnd:"marker-end",markerKnockoutLeft:"marker-knockout-left",markerKnockoutRight:"marker-knockout-right",markerMid:"marker-mid",markerPattern:"marker-pattern",markerSegment:"marker-segment",markerSide:"marker-side",markerStart:"marker-start",marqueeDirection:"marquee-direction",marqueeLoop:"marquee-loop",marqueeSpeed:"marquee-speed",marqueeStyle:"marquee-style",mask:"mask",maskBorder:"mask-border",maskBorderMode:"mask-border-mode",maskBorderOutset:"mask-border-outset",maskBorderRepeat:"mask-border-repeat",maskBorderSlice:"mask-border-slice",maskBorderSource:"mask-border-source",maskBorderWidth:"mask-border-width",maskClip:"mask-clip",maskComposite:"mask-composite",maskImage:"mask-image",maskMode:"mask-mode",maskOrigin:"mask-origin",maskPosition:"mask-position",maskRepeat:"mask-repeat",maskSize:"mask-size",maskType:"mask-type",maxBlockSize:"max-block-size",maxHeight:"max-height",maxInlineSize:"max-inline-size",maxLines:"max-lines",maxWidth:"max-width",minBlockSize:"min-block-size",minHeight:"min-height",minInlineSize:"min-inline-size",minWidth:"min-width",mixBlendMode:"mix-blend-mode",navDown:"nav-down",navLeft:"nav-left",navRight:"nav-right",navUp:"nav-up",objectFit:"object-fit",objectPosition:"object-position",offset:"offset",offsetAfter:"offset-after",offsetAnchor:"offset-anchor",offsetBefore:"offset-before",offsetDistance:"offset-distance",offsetEnd:"offset-end",offsetPath:"offset-path",offsetPosition:"offset-position",offsetRotate:"offset-rotate",offsetStart:"offset-start",opacity:"opacity",order:"order",orphans:"orphans",outline:"outline",outlineColor:"outline-color",outlineOffset:"outline-offset",outlineStyle:"outline-style",outlineWidth:"outline-width",overflow:"overflow",overflowStyle:"overflow-style",overflowWrap:"overflow-wrap",overflowX:"overflow-x",overflowY:"overflow-y",padding:"padding",paddingBlock:"padding-block",paddingBlockEnd:"padding-block-end",paddingBlockStart:"padding-block-start",paddingBottom:"padding-bottom",paddingInline:"padding-inline",paddingInlineEnd:"padding-inline-end",paddingInlineStart:"padding-inline-start",paddingLeft:"padding-left",paddingRight:"padding-right",paddingTop:"padding-top",paddingX:"paddingX",paddingY:"paddingY",page:"page",pageBreakAfter:"page-break-after",pageBreakBefore:"page-break-before",pageBreakInside:"page-break-inside",pause:"pause",pauseAfter:"pause-after",pauseBefore:"pause-before",perspective:"perspective",perspectiveOrigin:"perspective-origin",pitch:"pitch",pitchRange:"pitch-range",placeContent:"place-content",placeItems:"place-items",placeSelf:"place-self",playDuring:"play-during",pointerEvents:"pointer-events",position:"position",presentationLevel:"presentation-level",quotes:"quotes",regionFragment:"region-fragment",resize:"resize",rest:"rest",restAfter:"rest-after",restBefore:"rest-before",richness:"richness",right:"right",rotation:"rotation",rotationPoint:"rotation-point",rowGap:"row-gap",rubyAlign:"ruby-align",rubyMerge:"ruby-merge",rubyPosition:"ruby-position",running:"running",scrollBehavior:"scroll-behavior",scrollPadding:"scroll-padding",scrollPaddingBlock:"scroll-padding-block",scrollPaddingBlockEnd:"scroll-padding-block-end",scrollPaddingBlockStart:"scroll-padding-block-start",scrollPaddingBottom:"scroll-padding-bottom",scrollPaddingInline:"scroll-padding-inline",scrollPaddingInlineEnd:"scroll-padding-inline-end",scrollPaddingInlineStart:"scroll-padding-inline-start",scrollPaddingLeft:"scroll-padding-left",scrollPaddingRight:"scroll-padding-right",scrollPaddingTop:"scroll-padding-top",scrollSnapAlign:"scroll-snap-align",scrollSnapMargin:"scroll-snap-margin",scrollSnapMarginBlock:"scroll-snap-margin-block",scrollSnapMarginBlockEnd:"scroll-snap-margin-block-end",scrollSnapMarginBlockStart:"scroll-snap-margin-block-start",scrollSnapMarginBottom:"scroll-snap-margin-bottom",scrollSnapMarginInline:"scroll-snap-margin-inline",scrollSnapMarginInlineEnd:"scroll-snap-margin-inline-end",scrollSnapMarginInlineStart:"scroll-snap-margin-inline-start",scrollSnapMarginLeft:"scroll-snap-margin-left",scrollSnapMarginRight:"scroll-snap-margin-right",scrollSnapMarginTop:"scroll-snap-margin-top",scrollSnapStop:"scroll-snap-stop",scrollSnapType:"scroll-snap-type",scrollbarGutter:"scrollbar-gutter",shapeImageThreshold:"shape-image-threshold",shapeInside:"shape-inside",shapeMargin:"shape-margin",shapeOutside:"shape-outside",speak:"speak",speakAs:"speak-as",speakHeader:"speak-header",speakNumeral:"speak-numeral",speakPunctuation:"speak-punctuation",speechRate:"speech-rate",stress:"stress",stringSet:"string-set",stroke:"stroke",strokeAlign:"stroke-align",strokeAlignment:"stroke-alignment",strokeBreak:"stroke-break",strokeColor:"stroke-color",strokeDashCorner:"stroke-dash-corner",strokeDashJustify:"stroke-dash-justify",strokeDashadjust:"stroke-dashadjust",strokeDasharray:"stroke-dasharray",strokeDashcorner:"stroke-dashcorner",strokeDashoffset:"stroke-dashoffset",strokeImage:"stroke-image",strokeLinecap:"stroke-linecap",strokeLinejoin:"stroke-linejoin",strokeMiterlimit:"stroke-miterlimit",strokeOpacity:"stroke-opacity",strokeOrigin:"stroke-origin",strokePosition:"stroke-position",strokeRepeat:"stroke-repeat",strokeSize:"stroke-size",strokeWidth:"stroke-width",tabSize:"tab-size",tableLayout:"table-layout",textAlign:"text-align",textAlignAll:"text-align-all",textAlignLast:"text-align-last",textCombineUpright:"text-combine-upright",textDecoration:"text-decoration",textDecorationColor:"text-decoration-color",textDecorationLine:"text-decoration-line",textDecorationSkip:"text-decoration-skip",textDecorationStyle:"text-decoration-style",textEmphasis:"text-emphasis",textEmphasisColor:"text-emphasis-color",textEmphasisPosition:"text-emphasis-position",textEmphasisStyle:"text-emphasis-style",textIndent:"text-indent",textJustify:"text-justify",textOrientation:"text-orientation",textOverflow:"text-overflow",textShadow:"text-shadow",textSpaceCollapse:"text-space-collapse",textSpaceTrim:"text-space-trim",textSpacing:"text-spacing",textTransform:"text-transform",textUnderlinePosition:"text-underline-position",textWrap:"text-wrap",top:"top",transform:"transform",transformBox:"transform-box",transformOrigin:"transform-origin",transformStyle:"transform-style",transition:"transition",transitionDelay:"transition-delay",transitionDuration:"transition-duration",transitionProperty:"transition-property",transitionTimingFunction:"transition-timing-function",unicodeBidi:"unicode-bidi",userSelect:"user-select",verticalAlign:"vertical-align",visibility:"visibility",voiceBalance:"voice-balance",voiceDuration:"voice-duration",voiceFamily:"voice-family",voicePitch:"voice-pitch",voiceRange:"voice-range",voiceRate:"voice-rate",voiceStress:"voice-stress",voiceVolume:"voice-volume",volume:"volume",whiteSpace:"white-space",widows:"widows",width:"width",willChange:"will-change",wordBreak:"word-break",wordSpacing:"word-spacing",wordWrap:"word-wrap",wrapAfter:"wrap-after",wrapBefore:"wrap-before",wrapFlow:"wrap-flow",wrapInside:"wrap-inside",wrapThrough:"wrap-through",writingMode:"writing-mode",zIndex:"z-index"},m=["focusable","spacing","size","kind","variant","orientation","wrap","colorMode"];function u(e){return c.apply(void 0,[e].concat(Object.keys(g)))}function f(e){var t={};for(var r in e)o(r)&&!m.includes(r)&&(t[r]=e[r]);return t}function b(){return(b=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e}).apply(this,arguments)}var k=function(e){return"function"==typeof e},h=function(e){return 0===Object.keys(e).length&&e.constructor===Object},y=function(e){for(var t={},r=arguments.length,o=new Array(r>1?r-1:0),i=1;i<r;i++)o[i-1]=arguments[i];return o.forEach((function(r){r in e&&(t[r]=e[r])})),t};function S(e){var t=e.props,r=e.theme;return x({theme:r,styles:w({theme:r,props:t,styles:v({props:t,themeKey:e.themeKey})})})}function v(e){var t=e.props,r=e.themeKey,o=void 0===r?"":r,n=i.get(void 0===t?{}:t,"styles",{});return b({variant:i.get(n,"variant",o)},n)}function x(e){var t=e.theme,r=i.css(e.styles)(t);return a.css(r)}function w(e){var t=e.theme,r=e.props,o=void 0===r?{}:r,a=e.styles,l=Object.keys(i.get(t,"patterns",{})),s=y.apply(void 0,[o].concat(l)),d=y.apply(void 0,[o].concat(p)),c=Object.keys(s).reduce((function(e,r){var o="patterns."+r+"."+i.get(s,r,"");return b({},e,i.get(t,o,{}))}),{});return n(b({},c,d),a)}function B(){var e=r.useThemeUI().theme;return(h(e)||!e)&&l(!1),e}Object.defineProperty(exports,"jsx",{enumerable:!0,get:function(){return r.jsx}}),Object.defineProperty(exports,"cssExtractor",{enumerable:!0,get:function(){return i.css}}),Object.defineProperty(exports,"get",{enumerable:!0,get:function(){return i.get}}),exports.merge=n,Object.defineProperty(exports,"cssResolver",{enumerable:!0,get:function(){return a.css}}),Object.defineProperty(exports,"Global",{enumerable:!0,get:function(){return d.Global}}),Object.defineProperty(exports,"css",{enumerable:!0,get:function(){return d.css}}),Object.defineProperty(exports,"keyframes",{enumerable:!0,get:function(){return d.keyframes}}),exports.cleanProps=function(e){return u(f(e))},exports.createElement=function(e){var r=e.children,o=e.component,i=e.htmlProps,n=e.element,a=e.ref;return k(r)?r(i):t.createElement(o,b({as:n},i,{ref:a}),null!=r?r:null==i?void 0:i.children)},exports.getClassName=S,exports.getStyleProps=w,exports.isCSSProp=function(e){return Object.keys(g).includes(e)},exports.isFunction=k,exports.isObjectEmpty=h,exports.omit=c,exports.omitCSSProps=u,exports.pick=y,exports.pickCSSProps=function(e){return y.apply(void 0,[e].concat(Object.keys(g)))},exports.pickHTMLProps=f,exports.renameKeys=function(e,t){return Object.keys(t).reduce((function(r,o){var i;return b({},r,((i={})[e[o]||o]=t[o],i))}),{})},exports.resolveCSS=x,exports.selectVariant=v,exports.unstableThemeProvider=function(e){return t.createElement(r.ThemeProvider,{theme:e.theme},e.children)},exports.useClassName=function(e){return S({props:e.props,themeKey:e.themeKey,theme:B()})},exports.useResponsiveValue=function(e){var t=Array.isArray(e)?e:[e];return s.useResponsiveValue(t)},exports.useTheme=B;
 //# sourceMappingURL=admin-ui-system.cjs.production.min.js.map

dist/admin-ui-system.esm.js

@@ -36,2 +36,3 @@ import React from 'react';
 
+var availableStyleProps = ['padding', 'margin', 'paddingX', 'paddingY', 'marginX', 'marginY', 'height', 'width', 'minHeight', 'minWidth', 'maxHeight', 'maxWidth'];
 var cssProps = {
@@ -687,3 +688,3 @@ _hover: ':hover',
   });
-  var styles = getPatternStyles({
+  var styles = getStyleProps({
     theme: theme,
@@ -734,3 +735,3 @@ props: props,
 
-function getPatternStyles(params) {
+function getStyleProps(params) {
   var theme = params.theme,
@@ -742,2 +743,3 @@ _params$props2 = params.props,
   var patterns = pick.apply(void 0, [props].concat(patternKeys));
+  var styleProps = pick.apply(void 0, [props].concat(availableStyleProps));
   var patternsStyleObject = Object.keys(patterns).reduce(function (acc, key) {
@@ -748,3 +750,3 @@ var patternPath = "patterns." + key + "." + get(patterns, key, '');
   }, {});
-  var mergedTheme = merge(patternsStyleObject, styles);
+  var mergedTheme = merge(_extends({}, patternsStyleObject, styleProps), styles);
   return mergedTheme;
@@ -783,3 +785,3 @@ }
 
-export { cleanProps, createElement, getClassName, getPatternStyles, isCSSProp, isFunction, isObjectEmpty, omit, omitCSSProps, pick, pickCSSProps, pickHTMLProps, renameKeys, resolveCSS, selectVariant, unstableThemeProvider, useClassName, useResponsiveValue, useTheme };
+export { cleanProps, createElement, getClassName, getStyleProps, isCSSProp, isFunction, isObjectEmpty, omit, omitCSSProps, pick, pickCSSProps, pickHTMLProps, renameKeys, resolveCSS, selectVariant, unstableThemeProvider, useClassName, useResponsiveValue, useTheme };
 //# sourceMappingURL=admin-ui-system.esm.js.map

dist/constants/cssProps.d.ts

@@ -0,1 +1,2 @@
+export declare const availableStyleProps: string[];
 export declare const cssProps: {
@@ -2,0 +3,0 @@ _hover: string;

dist/functions/getClassName.d.ts

@@ -35,3 +35,3 @@ import { Theme, SxStyleProp, PropsWithStyles } from '../types';
  */
-export declare function getPatternStyles(params: GetPatternParams): import("@theme-ui/css").ThemeUIStyleObject;
+export declare function getStyleProps(params: GetPatternParams): import("@theme-ui/css").ThemeUIStyleObject;
 export {};

package.json

 {
   "name": "@vtex/admin-ui-system",
-  "version": "0.1.0-alpha.0",
+  "version": "0.1.0-alpha.1",
   "main": "dist/index.js",
@@ -49,3 +49,3 @@ "module": "dist/admin-ui-system.esm.js",
   },
-  "gitHead": "85cffd10c273d3340159fd4e25e657c0bc702a37"
+  "gitHead": "243139e9565f3a1d6eb425396a286ffa89d5d96c"
 }

src/constants/cssProps.ts

@@ -0,1 +1,16 @@
+export const availableStyleProps = [
+  'padding',
+  'margin',
+  'paddingX',
+  'paddingY',
+  'marginX',
+  'marginY',
+  'height',
+  'width',
+  'minHeight',
+  'minWidth',
+  'maxHeight',
+  'maxWidth',
+]
+
 export const cssProps = {
@@ -2,0 +17,0 @@ _hover: ':hover',

src/functions/getClassName.ts

 import { get, merge, cssResolver, cssExtractor } from './lib'
 import { pick } from './pick'
 import { Theme, SxStyleProp, PropsWithStyles } from '../types'
+import { availableStyleProps } from '../constants'
 
@@ -13,3 +14,3 @@ type GetClassNameParams = {
   const draftStyles = selectVariant({ props, themeKey })
-  const styles = getPatternStyles({
+  const styles = getStyleProps({
     theme,
@@ -68,3 +69,3 @@ props,
  */
-export function getPatternStyles(params: GetPatternParams) {
+export function getStyleProps(params: GetPatternParams) {
   const { theme, props = {}, styles } = params
@@ -74,2 +75,3 @@
   const patterns = pick(props, ...patternKeys)
+  const styleProps = pick(props, ...availableStyleProps)
 
@@ -83,5 +85,8 @@ const patternsStyleObject = Object.keys(patterns).reduce((acc, key) => {
 
-  const mergedTheme = merge<SxStyleProp>(patternsStyleObject, styles)
+  const mergedTheme = merge<SxStyleProp>(
+    { ...patternsStyleObject, ...styleProps },
+    styles
+  )
 
   return mergedTheme
 }

No alert changes

Improved metrics

Total package byte prevSize

278221

increased by1.14%

Lines of code

3127

increased by0.77%

No dependency changes