@react-hive/honey-style 1.11.0 → 2.1.0

package/dist/index.dev.cjs

@@ -439,6 +439,140 @@ var LAYER = '@layer'
 var SCOPE = '@scope'
 
 
+/***/ }),
+
+/***/ "./node_modules/stylis/src/Middleware.js":
+/*!***********************************************!*\
+  !*** ./node_modules/stylis/src/Middleware.js ***!
+  \***********************************************/
+/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   middleware: () => (/* binding */ middleware),
+/* harmony export */   namespace: () => (/* binding */ namespace),
+/* harmony export */   prefixer: () => (/* binding */ prefixer),
+/* harmony export */   rulesheet: () => (/* binding */ rulesheet)
+/* harmony export */ });
+/* harmony import */ var _Enum_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Enum.js */ "./node_modules/stylis/src/Enum.js");
+/* harmony import */ var _Utility_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Utility.js */ "./node_modules/stylis/src/Utility.js");
+/* harmony import */ var _Tokenizer_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Tokenizer.js */ "./node_modules/stylis/src/Tokenizer.js");
+/* harmony import */ var _Serializer_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Serializer.js */ "./node_modules/stylis/src/Serializer.js");
+/* harmony import */ var _Prefixer_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Prefixer.js */ "./node_modules/stylis/src/Prefixer.js");
+
+
+
+
+
+
+/**
+ * @param {function[]} collection
+ * @return {function}
+ */
+function middleware (collection) {
+	var length = (0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.sizeof)(collection)
+
+	return function (element, index, children, callback) {
+		var output = ''
+
+		for (var i = 0; i < length; i++)
+			output += collection[i](element, index, children, callback) || ''
+
+		return output
+	}
+}
+
+/**
+ * @param {function} callback
+ * @return {function}
+ */
+function rulesheet (callback) {
+	return function (element) {
+		if (!element.root)
+			if (element = element.return)
+				callback(element)
+	}
+}
+
+/**
+ * @param {object} element
+ * @param {number} index
+ * @param {object[]} children
+ * @param {function} callback
+ */
+function prefixer (element, index, children, callback) {
+	if (element.length > -1)
+		if (!element.return)
+			switch (element.type) {
+				case _Enum_js__WEBPACK_IMPORTED_MODULE_1__.DECLARATION: element.return = (0,_Prefixer_js__WEBPACK_IMPORTED_MODULE_2__.prefix)(element.value, element.length, children)
+					return
+				case _Enum_js__WEBPACK_IMPORTED_MODULE_1__.KEYFRAMES:
+					return (0,_Serializer_js__WEBPACK_IMPORTED_MODULE_3__.serialize)([(0,_Tokenizer_js__WEBPACK_IMPORTED_MODULE_4__.copy)(element, {value: (0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.replace)(element.value, '@', '@' + _Enum_js__WEBPACK_IMPORTED_MODULE_1__.WEBKIT)})], callback)
+				case _Enum_js__WEBPACK_IMPORTED_MODULE_1__.RULESET:
+					if (element.length)
+						return (0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.combine)(children = element.props, function (value) {
+							switch ((0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.match)(value, callback = /(::plac\w+|:read-\w+)/)) {
+								// :read-(only|write)
+								case ':read-only': case ':read-write':
+									(0,_Tokenizer_js__WEBPACK_IMPORTED_MODULE_4__.lift)((0,_Tokenizer_js__WEBPACK_IMPORTED_MODULE_4__.copy)(element, {props: [(0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.replace)(value, /:(read-\w+)/, ':' + _Enum_js__WEBPACK_IMPORTED_MODULE_1__.MOZ + '$1')]}))
+									;(0,_Tokenizer_js__WEBPACK_IMPORTED_MODULE_4__.lift)((0,_Tokenizer_js__WEBPACK_IMPORTED_MODULE_4__.copy)(element, {props: [value]}))
+									;(0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.assign)(element, {props: (0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.filter)(children, callback)})
+									break
+								// :placeholder
+								case '::placeholder':
+									;(0,_Tokenizer_js__WEBPACK_IMPORTED_MODULE_4__.lift)((0,_Tokenizer_js__WEBPACK_IMPORTED_MODULE_4__.copy)(element, {props: [(0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.replace)(value, /:(plac\w+)/, ':' + _Enum_js__WEBPACK_IMPORTED_MODULE_1__.WEBKIT + 'input-$1')]}))
+									;(0,_Tokenizer_js__WEBPACK_IMPORTED_MODULE_4__.lift)((0,_Tokenizer_js__WEBPACK_IMPORTED_MODULE_4__.copy)(element, {props: [(0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.replace)(value, /:(plac\w+)/, ':' + _Enum_js__WEBPACK_IMPORTED_MODULE_1__.MOZ + '$1')]}))
+									;(0,_Tokenizer_js__WEBPACK_IMPORTED_MODULE_4__.lift)((0,_Tokenizer_js__WEBPACK_IMPORTED_MODULE_4__.copy)(element, {props: [(0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.replace)(value, /:(plac\w+)/, _Enum_js__WEBPACK_IMPORTED_MODULE_1__.MS + 'input-$1')]}))
+									;(0,_Tokenizer_js__WEBPACK_IMPORTED_MODULE_4__.lift)((0,_Tokenizer_js__WEBPACK_IMPORTED_MODULE_4__.copy)(element, {props: [value]}))
+									;(0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.assign)(element, {props: (0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.filter)(children, callback)})
+									break
+							}
+
+							return ''
+						})
+			}
+}
+
+/**
+ * @param {object} element
+ * @param {number} index
+ * @param {object[]} children
+ */
+function namespace (element) {
+	switch (element.type) {
+		case _Enum_js__WEBPACK_IMPORTED_MODULE_1__.RULESET:
+			element.props = element.props.map(function (value) {
+				return (0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.combine)((0,_Tokenizer_js__WEBPACK_IMPORTED_MODULE_4__.tokenize)(value), function (value, index, children) {
+					switch ((0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.charat)(value, 0)) {
+						// \f
+						case 12:
+							return (0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.substr)(value, 1, (0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.strlen)(value))
+						// \0 ( + > ~
+						case 0: case 40: case 43: case 62: case 126:
+							return value
+						// :
+						case 58:
+							if (children[++index] === 'global')
+								children[index] = '', children[++index] = '\f' + (0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.substr)(children[index], index = 1, -1)
+						// \s
+						case 32:
+							return index === 1 ? '' : value
+						default:
+							switch (index) {
+								case 0: element = value
+									return (0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.sizeof)(children) > 1 ? '' : value
+								case index = (0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.sizeof)(children) - 1: case 2:
+									return index === 2 ? value + element + element : value + element
+								default:
+									return value
+							}
+					}
+				})
+			})
+	}
+}
+
+
 /***/ }),
 
 /***/ "./node_modules/stylis/src/Parser.js":
@@ -662,6 +796,170 @@ function declaration (value, root, parent, length, siblings) {
 }
 
 
+/***/ }),
+
+/***/ "./node_modules/stylis/src/Prefixer.js":
+/*!*********************************************!*\
+  !*** ./node_modules/stylis/src/Prefixer.js ***!
+  \*********************************************/
+/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   prefix: () => (/* binding */ prefix)
+/* harmony export */ });
+/* harmony import */ var _Enum_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Enum.js */ "./node_modules/stylis/src/Enum.js");
+/* harmony import */ var _Utility_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Utility.js */ "./node_modules/stylis/src/Utility.js");
+
+
+
+/**
+ * @param {string} value
+ * @param {number} length
+ * @param {object[]} children
+ * @return {string}
+ */
+function prefix (value, length, children) {
+	switch ((0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.hash)(value, length)) {
+		// color-adjust
+		case 5103:
+			return _Enum_js__WEBPACK_IMPORTED_MODULE_1__.WEBKIT + 'print-' + value + value
+		// animation, animation-(delay|direction|duration|fill-mode|iteration-count|name|play-state|timing-function)
+		case 5737: case 4201: case 3177: case 3433: case 1641: case 4457: case 2921:
+		// text-decoration, filter, clip-path, backface-visibility, column, box-decoration-break
+		case 5572: case 6356: case 5844: case 3191: case 6645: case 3005:
+		// background-clip, columns, column-(count|fill|gap|rule|rule-color|rule-style|rule-width|span|width)
+		case 4215: case 6389: case 5109: case 5365: case 5621: case 3829:
+		// mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position
+		case 6391: case 5879: case 5623: case 6135: case 4599:
+			return _Enum_js__WEBPACK_IMPORTED_MODULE_1__.WEBKIT + value + value
+		// mask-composite
+		case 4855:
+			return _Enum_js__WEBPACK_IMPORTED_MODULE_1__.WEBKIT + value.replace('add', 'source-over').replace('substract', 'source-out').replace('intersect', 'source-in').replace('exclude', 'xor') + value
+		// tab-size
+		case 4789:
+			return _Enum_js__WEBPACK_IMPORTED_MODULE_1__.MOZ + value + value
+		// appearance, user-select, transform, hyphens, text-size-adjust
+		case 5349: case 4246: case 4810: case 6968: case 2756:
+			return _Enum_js__WEBPACK_IMPORTED_MODULE_1__.WEBKIT + value + _Enum_js__WEBPACK_IMPORTED_MODULE_1__.MOZ + value + _Enum_js__WEBPACK_IMPORTED_MODULE_1__.MS + value + value
+		// writing-mode
+		case 5936:
+			switch ((0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.charat)(value, length + 11)) {
+				// vertical-l(r)
+				case 114:
+					return _Enum_js__WEBPACK_IMPORTED_MODULE_1__.WEBKIT + value + _Enum_js__WEBPACK_IMPORTED_MODULE_1__.MS + (0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.replace)(value, /[svh]\w+-[tblr]{2}/, 'tb') + value
+				// vertical-r(l)
+				case 108:
+					return _Enum_js__WEBPACK_IMPORTED_MODULE_1__.WEBKIT + value + _Enum_js__WEBPACK_IMPORTED_MODULE_1__.MS + (0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.replace)(value, /[svh]\w+-[tblr]{2}/, 'tb-rl') + value
+				// horizontal(-)tb
+				case 45:
+					return _Enum_js__WEBPACK_IMPORTED_MODULE_1__.WEBKIT + value + _Enum_js__WEBPACK_IMPORTED_MODULE_1__.MS + (0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.replace)(value, /[svh]\w+-[tblr]{2}/, 'lr') + value
+				// default: fallthrough to below
+			}
+		// flex, flex-direction, scroll-snap-type, writing-mode
+		case 6828: case 4268: case 2903:
+			return _Enum_js__WEBPACK_IMPORTED_MODULE_1__.WEBKIT + value + _Enum_js__WEBPACK_IMPORTED_MODULE_1__.MS + value + value
+		// order
+		case 6165:
+			return _Enum_js__WEBPACK_IMPORTED_MODULE_1__.WEBKIT + value + _Enum_js__WEBPACK_IMPORTED_MODULE_1__.MS + 'flex-' + value + value
+		// align-items
+		case 5187:
+			return _Enum_js__WEBPACK_IMPORTED_MODULE_1__.WEBKIT + value + (0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.replace)(value, /(\w+).+(:[^]+)/, _Enum_js__WEBPACK_IMPORTED_MODULE_1__.WEBKIT + 'box-$1$2' + _Enum_js__WEBPACK_IMPORTED_MODULE_1__.MS + 'flex-$1$2') + value
+		// align-self
+		case 5443:
+			return _Enum_js__WEBPACK_IMPORTED_MODULE_1__.WEBKIT + value + _Enum_js__WEBPACK_IMPORTED_MODULE_1__.MS + 'flex-item-' + (0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.replace)(value, /flex-|-self/g, '') + (!(0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.match)(value, /flex-|baseline/) ? _Enum_js__WEBPACK_IMPORTED_MODULE_1__.MS + 'grid-row-' + (0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.replace)(value, /flex-|-self/g, '') : '') + value
+		// align-content
+		case 4675:
+			return _Enum_js__WEBPACK_IMPORTED_MODULE_1__.WEBKIT + value + _Enum_js__WEBPACK_IMPORTED_MODULE_1__.MS + 'flex-line-pack' + (0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.replace)(value, /align-content|flex-|-self/g, '') + value
+		// flex-shrink
+		case 5548:
+			return _Enum_js__WEBPACK_IMPORTED_MODULE_1__.WEBKIT + value + _Enum_js__WEBPACK_IMPORTED_MODULE_1__.MS + (0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.replace)(value, 'shrink', 'negative') + value
+		// flex-basis
+		case 5292:
+			return _Enum_js__WEBPACK_IMPORTED_MODULE_1__.WEBKIT + value + _Enum_js__WEBPACK_IMPORTED_MODULE_1__.MS + (0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.replace)(value, 'basis', 'preferred-size') + value
+		// flex-grow
+		case 6060:
+			return _Enum_js__WEBPACK_IMPORTED_MODULE_1__.WEBKIT + 'box-' + (0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.replace)(value, '-grow', '') + _Enum_js__WEBPACK_IMPORTED_MODULE_1__.WEBKIT + value + _Enum_js__WEBPACK_IMPORTED_MODULE_1__.MS + (0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.replace)(value, 'grow', 'positive') + value
+		// transition
+		case 4554:
+			return _Enum_js__WEBPACK_IMPORTED_MODULE_1__.WEBKIT + (0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.replace)(value, /([^-])(transform)/g, '$1' + _Enum_js__WEBPACK_IMPORTED_MODULE_1__.WEBKIT + '$2') + value
+		// cursor
+		case 6187:
+			return (0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.replace)((0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.replace)((0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.replace)(value, /(zoom-|grab)/, _Enum_js__WEBPACK_IMPORTED_MODULE_1__.WEBKIT + '$1'), /(image-set)/, _Enum_js__WEBPACK_IMPORTED_MODULE_1__.WEBKIT + '$1'), value, '') + value
+		// background, background-image
+		case 5495: case 3959:
+			return (0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.replace)(value, /(image-set\([^]*)/, _Enum_js__WEBPACK_IMPORTED_MODULE_1__.WEBKIT + '$1' + '$`$1')
+		// justify-content
+		case 4968:
+			return (0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.replace)((0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.replace)(value, /(.+:)(flex-)?(.*)/, _Enum_js__WEBPACK_IMPORTED_MODULE_1__.WEBKIT + 'box-pack:$3' + _Enum_js__WEBPACK_IMPORTED_MODULE_1__.MS + 'flex-pack:$3'), /space-between/, 'justify') + _Enum_js__WEBPACK_IMPORTED_MODULE_1__.WEBKIT + value + value
+		// justify-self
+		case 4200:
+			if (!(0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.match)(value, /flex-|baseline/)) return _Enum_js__WEBPACK_IMPORTED_MODULE_1__.MS + 'grid-column-align' + (0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.substr)(value, length) + value
+			break
+		// grid-template-(columns|rows)
+		case 2592: case 3360:
+			return _Enum_js__WEBPACK_IMPORTED_MODULE_1__.MS + (0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.replace)(value, 'template-', '') + value
+		// grid-(row|column)-start
+		case 4384: case 3616:
+			if (children && children.some(function (element, index) { return length = index, (0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.match)(element.props, /grid-\w+-end/) })) {
+				return ~(0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.indexof)(value + (children = children[length].value), 'span', 0) ? value : (_Enum_js__WEBPACK_IMPORTED_MODULE_1__.MS + (0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.replace)(value, '-start', '') + value + _Enum_js__WEBPACK_IMPORTED_MODULE_1__.MS + 'grid-row-span:' + (~(0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.indexof)(children, 'span', 0) ? (0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.match)(children, /\d+/) : +(0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.match)(children, /\d+/) - +(0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.match)(value, /\d+/)) + ';')
+			}
+			return _Enum_js__WEBPACK_IMPORTED_MODULE_1__.MS + (0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.replace)(value, '-start', '') + value
+		// grid-(row|column)-end
+		case 4896: case 4128:
+			return (children && children.some(function (element) { return (0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.match)(element.props, /grid-\w+-start/) })) ? value : _Enum_js__WEBPACK_IMPORTED_MODULE_1__.MS + (0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.replace)((0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.replace)(value, '-end', '-span'), 'span ', '') + value
+		// (margin|padding)-inline-(start|end)
+		case 4095: case 3583: case 4068: case 2532:
+			return (0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.replace)(value, /(.+)-inline(.+)/, _Enum_js__WEBPACK_IMPORTED_MODULE_1__.WEBKIT + '$1$2') + value
+		// (min|max)?(width|height|inline-size|block-size)
+		case 8116: case 7059: case 5753: case 5535:
+		case 5445: case 5701: case 4933: case 4677:
+		case 5533: case 5789: case 5021: case 4765:
+			// stretch, max-content, min-content, fill-available
+			if ((0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.strlen)(value) - 1 - length > 6)
+				switch ((0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.charat)(value, length + 1)) {
+					// (m)ax-content, (m)in-content
+					case 109:
+						// -
+						if ((0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.charat)(value, length + 4) !== 45)
+							break
+					// (f)ill-available, (f)it-content
+					case 102:
+						return (0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.replace)(value, /(.+:)(.+)-([^]+)/, '$1' + _Enum_js__WEBPACK_IMPORTED_MODULE_1__.WEBKIT + '$2-$3' + '$1' + _Enum_js__WEBPACK_IMPORTED_MODULE_1__.MOZ + ((0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.charat)(value, length + 3) == 108 ? '$3' : '$2-$3')) + value
+					// (s)tretch
+					case 115:
+						return ~(0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.indexof)(value, 'stretch', 0) ? prefix((0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.replace)(value, 'stretch', 'fill-available'), length, children) + value : value
+				}
+			break
+		// grid-(column|row)
+		case 5152: case 5920:
+			return (0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.replace)(value, /(.+?):(\d+)(\s*\/\s*(span)?\s*(\d+))?(.*)/, function (_, a, b, c, d, e, f) { return (_Enum_js__WEBPACK_IMPORTED_MODULE_1__.MS + a + ':' + b + f) + (c ? (_Enum_js__WEBPACK_IMPORTED_MODULE_1__.MS + a + '-span:' + (d ? e : +e - +b)) + f : '') + value })
+		// position: sticky
+		case 4949:
+			// stick(y)?
+			if ((0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.charat)(value, length + 6) === 121)
+				return (0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.replace)(value, ':', ':' + _Enum_js__WEBPACK_IMPORTED_MODULE_1__.WEBKIT) + value
+			break
+		// display: (flex|inline-flex|grid|inline-grid)
+		case 6444:
+			switch ((0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.charat)(value, (0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.charat)(value, 14) === 45 ? 18 : 11)) {
+				// (inline-)?fle(x)
+				case 120:
+					return (0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.replace)(value, /(.+:)([^;\s!]+)(;|(\s+)?!.+)?/, '$1' + _Enum_js__WEBPACK_IMPORTED_MODULE_1__.WEBKIT + ((0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.charat)(value, 14) === 45 ? 'inline-' : '') + 'box$3' + '$1' + _Enum_js__WEBPACK_IMPORTED_MODULE_1__.WEBKIT + '$2$3' + '$1' + _Enum_js__WEBPACK_IMPORTED_MODULE_1__.MS + '$2box$3') + value
+				// (inline-)?gri(d)
+				case 100:
+					return (0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.replace)(value, ':', ':' + _Enum_js__WEBPACK_IMPORTED_MODULE_1__.MS) + value
+			}
+			break
+		// scroll-margin, scroll-margin-(top|right|bottom|left)
+		case 5719: case 2647: case 2135: case 3927: case 2391:
+			return (0,_Utility_js__WEBPACK_IMPORTED_MODULE_0__.replace)(value, 'scroll-', 'scroll-snap-') + value
+	}
+
+	return value
+}
+
+
 /***/ }),
 
 /***/ "./node_modules/stylis/src/Serializer.js":
@@ -1164,80 +1462,6 @@ function filter (array, pattern) {
 }
 
 
-/***/ }),
-
-/***/ "./src/at-rules/index.ts":
-/*!*******************************!*\
-  !*** ./src/at-rules/index.ts ***!
-  \*******************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   mediaQuery: () => (/* reexport safe */ _media_query__WEBPACK_IMPORTED_MODULE_0__.mediaQuery)
-/* harmony export */ });
-/* harmony import */ var _media_query__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./media-query */ "./src/at-rules/media-query.ts");
-
-
-
-/***/ }),
-
-/***/ "./src/at-rules/media-query.ts":
-/*!*************************************!*\
-  !*** ./src/at-rules/media-query.ts ***!
-  \*************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   mediaQuery: () => (/* binding */ mediaQuery)
-/* harmony export */ });
-/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../utils */ "./src/utils.ts");
-
-/**
- * Constructs a complete `@media` query string from an array of media rule objects.
- * Each rule defines conditions such as screen size, orientation, or resolution,
- * which are converted into standard CSS media query syntax.
- *
- * @param rules - An array of media rule objects used to generate individual media queries.
- *
- * @returns A string containing a full `@media` query that can be used in CSS or injected into a stylesheet.
- *
- * @example
- * ```ts
- * atMedia([
- *   { minWidth: '768px', orientation: 'landscape' },
- *   { mediaType: 'print' }
- * ]);
- * // Returns: "@media screen and (min-width: 768px) and (orientation: landscape), print"
- * ```
- */
-const mediaQuery = (rules) => {
-    const mediaRules = rules.map(rule => {
-        const rulesConfig = [
-            rule.width && ['width', rule.width],
-            rule.minWidth && ['min-width', rule.minWidth],
-            rule.maxWidth && ['max-width', rule.maxWidth],
-            rule.height && ['height', rule.height],
-            rule.minHeight && ['min-height', rule.minHeight],
-            rule.maxHeight && ['max-height', rule.maxHeight],
-            rule.orientation && ['orientation', rule.orientation],
-            rule.minResolution && ['min-resolution', rule.minResolution],
-            rule.maxResolution && ['max-resolution', rule.maxResolution],
-            rule.resolution && ['resolution', rule.resolution],
-            rule.update && ['update', rule.update],
-        ];
-        const conditions = (0,_utils__WEBPACK_IMPORTED_MODULE_0__.boolFilter)(rulesConfig)
-            .map(ruleConfig => `(${ruleConfig[0]}: ${ruleConfig[1]})`)
-            .join(' and ');
-        const operatorPart = rule.operator ? `${rule.operator} ` : '';
-        const conditionsPart = conditions ? ` and ${conditions}` : '';
-        return `${operatorPart}${rule.mediaType ?? 'screen'}${conditionsPart}`;
-    });
-    return `@media ${mediaRules.join(', ')}`;
-};
-
-
 /***/ }),
 
 /***/ "./src/constants.ts":
@@ -1559,18 +1783,139 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
-/***/ "./src/css.ts":
-/*!********************!*\
-  !*** ./src/css.ts ***!
-  \********************/
+/***/ "./src/css/at-rules/index.ts":
+/*!***********************************!*\
+  !*** ./src/css/at-rules/index.ts ***!
+  \***********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   mediaQuery: () => (/* reexport safe */ _media_query__WEBPACK_IMPORTED_MODULE_0__.mediaQuery)
+/* harmony export */ });
+/* harmony import */ var _media_query__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./media-query */ "./src/css/at-rules/media-query.ts");
+
+
+
+/***/ }),
+
+/***/ "./src/css/at-rules/media-query.ts":
+/*!*****************************************!*\
+  !*** ./src/css/at-rules/media-query.ts ***!
+  \*****************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   mediaQuery: () => (/* binding */ mediaQuery)
+/* harmony export */ });
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../utils */ "./src/utils.ts");
+
+/**
+ * Constructs a complete `@media` query string from an array of media rule objects.
+ * Each rule defines conditions such as screen size, orientation, or resolution,
+ * which are converted into standard CSS media query syntax.
+ *
+ * @param rules - An array of media rule objects used to generate individual media queries.
+ *
+ * @returns A string containing a full `@media` query that can be used in CSS or injected into a stylesheet.
+ *
+ * @example
+ * ```ts
+ * atMedia([
+ *   { minWidth: '768px', orientation: 'landscape' },
+ *   { mediaType: 'print' }
+ * ]);
+ * // Returns: "@media screen and (min-width: 768px) and (orientation: landscape), print"
+ * ```
+ */
+const mediaQuery = (rules) => {
+    const mediaRules = rules.map(rule => {
+        const rulesConfig = [
+            rule.width && ['width', rule.width],
+            rule.minWidth && ['min-width', rule.minWidth],
+            rule.maxWidth && ['max-width', rule.maxWidth],
+            rule.height && ['height', rule.height],
+            rule.minHeight && ['min-height', rule.minHeight],
+            rule.maxHeight && ['max-height', rule.maxHeight],
+            rule.orientation && ['orientation', rule.orientation],
+            rule.minResolution && ['min-resolution', rule.minResolution],
+            rule.maxResolution && ['max-resolution', rule.maxResolution],
+            rule.resolution && ['resolution', rule.resolution],
+            rule.update && ['update', rule.update],
+        ];
+        const conditions = (0,_utils__WEBPACK_IMPORTED_MODULE_0__.boolFilter)(rulesConfig)
+            .map(ruleConfig => `(${ruleConfig[0]}: ${ruleConfig[1]})`)
+            .join(' and ');
+        const operatorPart = rule.operator ? `${rule.operator} ` : '';
+        const conditionsPart = conditions ? ` and ${conditions}` : '';
+        return `${operatorPart}${rule.mediaType ?? 'screen'}${conditionsPart}`;
+    });
+    return `@media ${mediaRules.join(', ')}`;
+};
+
+
+/***/ }),
+
+/***/ "./src/css/constants.ts":
+/*!******************************!*\
+  !*** ./src/css/constants.ts ***!
+  \******************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   CSS_COLOR_PROPERTIES: () => (/* binding */ CSS_COLOR_PROPERTIES),
+/* harmony export */   CSS_SPACING_PROPERTIES: () => (/* binding */ CSS_SPACING_PROPERTIES)
+/* harmony export */ });
+const CSS_SPACING_PROPERTIES = [
+    'margin',
+    'marginTop',
+    'marginRight',
+    'marginBottom',
+    'marginLeft',
+    'padding',
+    'paddingTop',
+    'paddingRight',
+    'paddingBottom',
+    'paddingLeft',
+    'top',
+    'right',
+    'bottom',
+    'left',
+    'gap',
+    'rowGap',
+    'columnGap',
+];
+const CSS_COLOR_PROPERTIES = [
+    'color',
+    'backgroundColor',
+    'borderColor',
+    'borderTopColor',
+    'borderRightColor',
+    'borderBottomColor',
+    'borderLeftColor',
+    'outlineColor',
+    'textDecorationColor',
+    'fill',
+    'stroke',
+];
+
+
+/***/ }),
+
+/***/ "./src/css/css.ts":
+/*!************************!*\
+  !*** ./src/css/css.ts ***!
+  \************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   css: () => (/* binding */ css)
 /* harmony export */ });
-/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./constants */ "./src/constants.ts");
-/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./utils */ "./src/utils.ts");
+/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../constants */ "./src/constants.ts");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../utils */ "./src/utils.ts");
 
 
 const resolveCssInterpolation = (value, context) => {
@@ -1599,6 +1944,111 @@ const css = (strings, ...interpolations) => {
 };
 
 
+/***/ }),
+
+/***/ "./src/css/index.ts":
+/*!**************************!*\
+  !*** ./src/css/index.ts ***!
+  \**************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   CSS_COLOR_PROPERTIES: () => (/* reexport safe */ _constants__WEBPACK_IMPORTED_MODULE_1__.CSS_COLOR_PROPERTIES),
+/* harmony export */   CSS_SPACING_PROPERTIES: () => (/* reexport safe */ _constants__WEBPACK_IMPORTED_MODULE_1__.CSS_SPACING_PROPERTIES),
+/* harmony export */   createSpacingMiddleware: () => (/* reexport safe */ _middlewares__WEBPACK_IMPORTED_MODULE_2__.createSpacingMiddleware),
+/* harmony export */   css: () => (/* reexport safe */ _css__WEBPACK_IMPORTED_MODULE_4__.css),
+/* harmony export */   mediaQuery: () => (/* reexport safe */ _at_rules__WEBPACK_IMPORTED_MODULE_5__.mediaQuery),
+/* harmony export */   processCss: () => (/* reexport safe */ _processor__WEBPACK_IMPORTED_MODULE_3__.processCss)
+/* harmony export */ });
+/* harmony import */ var _types__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./types */ "./src/css/types.ts");
+/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./constants */ "./src/css/constants.ts");
+/* harmony import */ var _middlewares__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./middlewares */ "./src/css/middlewares.ts");
+/* harmony import */ var _processor__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./processor */ "./src/css/processor.ts");
+/* harmony import */ var _css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./css */ "./src/css/css.ts");
+/* harmony import */ var _at_rules__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./at-rules */ "./src/css/at-rules/index.ts");
+
+
+
+
+
+
+
+
+/***/ }),
+
+/***/ "./src/css/middlewares.ts":
+/*!********************************!*\
+  !*** ./src/css/middlewares.ts ***!
+  \********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   createSpacingMiddleware: () => (/* binding */ createSpacingMiddleware)
+/* harmony export */ });
+/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./constants */ "./src/css/constants.ts");
+
+const toKebabCase = (str) => str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+const KEBAB_CASE_SPACING_PROPERTIES = _constants__WEBPACK_IMPORTED_MODULE_0__.CSS_SPACING_PROPERTIES.map(toKebabCase);
+const createSpacingMiddleware = ({ spacingMultiplier }) => element => {
+    if (!spacingMultiplier || element.type !== 'decl') {
+        return;
+    }
+    if (typeof element.props === 'string' &&
+        KEBAB_CASE_SPACING_PROPERTIES.includes(element.props) &&
+        typeof element.children === 'string') {
+        const transformed = element.children
+            .split(/\s+/)
+            .map(value => {
+            if (/[a-z%]+$/i.test(value)) {
+                return value;
+            }
+            return `${parseFloat(value) * spacingMultiplier}px`;
+        })
+            .join(' ');
+        element.return = `${element.props}:${transformed};`;
+    }
+};
+
+
+/***/ }),
+
+/***/ "./src/css/processor.ts":
+/*!******************************!*\
+  !*** ./src/css/processor.ts ***!
+  \******************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   processCss: () => (/* binding */ processCss)
+/* harmony export */ });
+/* harmony import */ var stylis__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! stylis */ "./node_modules/stylis/src/Serializer.js");
+/* harmony import */ var stylis__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! stylis */ "./node_modules/stylis/src/Parser.js");
+/* harmony import */ var stylis__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! stylis */ "./node_modules/stylis/src/Middleware.js");
+/* harmony import */ var _middlewares__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./middlewares */ "./src/css/middlewares.ts");
+
+
+const processCss = (rawCss, selector, { spacingMultiplier = 0 } = {}) => {
+    const scopedCss = selector ? `${selector}{${rawCss}}` : rawCss;
+    const middlewares = [(0,_middlewares__WEBPACK_IMPORTED_MODULE_0__.createSpacingMiddleware)({ spacingMultiplier }), stylis__WEBPACK_IMPORTED_MODULE_1__.stringify];
+    return (0,stylis__WEBPACK_IMPORTED_MODULE_1__.serialize)((0,stylis__WEBPACK_IMPORTED_MODULE_2__.compile)(scopedCss), (0,stylis__WEBPACK_IMPORTED_MODULE_3__.middleware)(middlewares));
+};
+
+
+/***/ }),
+
+/***/ "./src/css/types.ts":
+/*!**************************!*\
+  !*** ./src/css/types.ts ***!
+  \**************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+
+
+
 /***/ }),
 
 /***/ "./src/global-style.ts":
@@ -1614,7 +2064,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./constants */ "./src/constants.ts");
-/* harmony import */ var _css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./css */ "./src/css.ts");
+/* harmony import */ var _css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./css */ "./src/css/index.ts");
 /* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./utils */ "./src/utils.ts");
 /* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./hooks */ "./src/hooks/index.ts");
 
@@ -1629,7 +2079,7 @@ const createGlobalStyle = (strings, ...interpolations) => {
         const { theme } = (0,_hooks__WEBPACK_IMPORTED_MODULE_4__.useHoneyStyle)();
         (0,react__WEBPACK_IMPORTED_MODULE_0__.useInsertionEffect)(() => {
             const rawCss = computeCss({ theme });
-            const processedCss = (0,_utils__WEBPACK_IMPORTED_MODULE_3__.processCss)(rawCss);
+            const processedCss = (0,_css__WEBPACK_IMPORTED_MODULE_2__.processCss)(rawCss);
             const styleElement = document.createElement('style');
             styleElement.id = styleId;
             styleElement.innerHTML = processedCss;
@@ -1845,7 +2295,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./constants */ "./src/constants.ts");
 /* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./utils */ "./src/utils.ts");
-/* harmony import */ var _css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./css */ "./src/css.ts");
+/* harmony import */ var _css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./css */ "./src/css/index.ts");
 /* harmony import */ var _mount_style__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./mount-style */ "./src/mount-style.ts");
 /* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./hooks */ "./src/hooks/index.ts");
 
@@ -1885,7 +2335,9 @@ const styled = (target, defaultProps) => {
             const rawCss = computeCss(context);
             const baseClassName = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.resolveClassName)(rawCss);
             (0,react__WEBPACK_IMPORTED_MODULE_0__.useInsertionEffect)(() => {
-                const baseCss = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.processCss)(rawCss, `.${baseClassName}`);
+                const baseCss = (0,_css__WEBPACK_IMPORTED_MODULE_3__.processCss)(rawCss, `.${baseClassName}`, {
+                    spacingMultiplier: theme.spacings.base,
+                });
                 return (0,_mount_style__WEBPACK_IMPORTED_MODULE_4__.mountStyle)(baseClassName, baseCss, __compositionDepth);
             }, [baseClassName]);
             const cssPropRaw = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.isFunction)(cssProp) ? cssProp(context) : cssProp;
@@ -1893,7 +2345,9 @@ const styled = (target, defaultProps) => {
             const cssPropClassName = cssPropString ? (0,_utils__WEBPACK_IMPORTED_MODULE_2__.resolveClassName)(cssPropString) : '';
             (0,react__WEBPACK_IMPORTED_MODULE_0__.useInsertionEffect)(() => {
                 if (cssPropClassName) {
-                    const overrideCss = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.processCss)(cssPropString, `.${cssPropClassName}`);
+                    const overrideCss = (0,_css__WEBPACK_IMPORTED_MODULE_3__.processCss)(cssPropString, `.${cssPropClassName}`, {
+                        spacingMultiplier: theme.spacings.base,
+                    });
                     return (0,_mount_style__WEBPACK_IMPORTED_MODULE_4__.mountStyle)(cssPropClassName, overrideCss, 1);
                 }
             }, [cssPropClassName]);
@@ -1929,18 +2383,6 @@ const styled = (target, defaultProps) => {
 };
 
 
-/***/ }),
-
-/***/ "./src/types/css.types.ts":
-/*!********************************!*\
-  !*** ./src/types/css.types.ts ***!
-  \********************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-__webpack_require__.r(__webpack_exports__);
-
-
-
 /***/ }),
 
 /***/ "./src/types/index.ts":
@@ -1950,19 +2392,17 @@ __webpack_require__.r(__webpack_exports__);
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 __webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _types__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./types */ "./src/types/types.ts");
-/* harmony import */ var _utility_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./utility.types */ "./src/types/utility.types.ts");
-/* harmony import */ var _css_types__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./css.types */ "./src/types/css.types.ts");
-
+/* harmony import */ var _theme__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./theme */ "./src/types/theme.ts");
+/* harmony import */ var _utility__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./utility */ "./src/types/utility.ts");
 
 
 
 
 /***/ }),
 
-/***/ "./src/types/types.ts":
+/***/ "./src/types/theme.ts":
 /*!****************************!*\
-  !*** ./src/types/types.ts ***!
+  !*** ./src/types/theme.ts ***!
   \****************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
@@ -1973,10 +2413,10 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
-/***/ "./src/types/utility.types.ts":
-/*!************************************!*\
-  !*** ./src/types/utility.types.ts ***!
-  \************************************/
+/***/ "./src/types/utility.ts":
+/*!******************************!*\
+  !*** ./src/types/utility.ts ***!
+  \******************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 __webpack_require__.r(__webpack_exports__);
@@ -2005,7 +2445,6 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   isObject: () => (/* binding */ isObject),
 /* harmony export */   isString: () => (/* binding */ isString),
 /* harmony export */   isStyledComponent: () => (/* binding */ isStyledComponent),
-/* harmony export */   processCss: () => (/* binding */ processCss),
 /* harmony export */   pxToRem: () => (/* binding */ pxToRem),
 /* harmony export */   resolveClassName: () => (/* binding */ resolveClassName),
 /* harmony export */   resolveColor: () => (/* binding */ resolveColor),
@@ -2014,11 +2453,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   resolveSpacing: () => (/* binding */ resolveSpacing),
 /* harmony export */   toKebabCase: () => (/* binding */ toKebabCase)
 /* harmony export */ });
-/* harmony import */ var stylis__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! stylis */ "./node_modules/stylis/src/Serializer.js");
-/* harmony import */ var stylis__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! stylis */ "./node_modules/stylis/src/Parser.js");
 /* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./constants */ "./src/constants.ts");
-/* harmony import */ var _css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./css */ "./src/css.ts");
-
+/* harmony import */ var _css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./css */ "./src/css/index.ts");
 
 
 function assert(condition, message) {
@@ -2091,10 +2527,6 @@ const hashString = (str) => {
 const combineClassNames = (classNames) => classNames.filter(Boolean).join(' ').trim();
 const resolveClassName = (css) => `hscn-${hashString(css)}`;
 const isStyledComponent = (component) => _constants__WEBPACK_IMPORTED_MODULE_0__.HONEY_STYLED_COMPONENT_ID_PROP in component;
-const processCss = (rawCss, selector) => {
-    const scopedCss = selector ? `${selector}{${rawCss}}` : rawCss;
-    return (0,stylis__WEBPACK_IMPORTED_MODULE_2__.serialize)((0,stylis__WEBPACK_IMPORTED_MODULE_3__.compile)(scopedCss), stylis__WEBPACK_IMPORTED_MODULE_2__.stringify);
-};
 /**
  * Filters out non-standard HTML attributes from a props object intended for a native HTML element.
  *
@@ -2349,6 +2781,8 @@ var __webpack_exports__ = {};
   \**********************/
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   CSS_COLOR_PROPERTIES: () => (/* reexport safe */ _css__WEBPACK_IMPORTED_MODULE_5__.CSS_COLOR_PROPERTIES),
+/* harmony export */   CSS_SPACING_PROPERTIES: () => (/* reexport safe */ _css__WEBPACK_IMPORTED_MODULE_5__.CSS_SPACING_PROPERTIES),
 /* harmony export */   HONEY_BREAKPOINTS: () => (/* reexport safe */ _constants__WEBPACK_IMPORTED_MODULE_0__.HONEY_BREAKPOINTS),
 /* harmony export */   HONEY_GLOBAL_STYLE_ATTR: () => (/* reexport safe */ _constants__WEBPACK_IMPORTED_MODULE_0__.HONEY_GLOBAL_STYLE_ATTR),
 /* harmony export */   HONEY_STYLED_COMPONENT_ID_PROP: () => (/* reexport safe */ _constants__WEBPACK_IMPORTED_MODULE_0__.HONEY_STYLED_COMPONENT_ID_PROP),
@@ -2357,30 +2791,31 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   HoneyStyleProvider: () => (/* reexport safe */ _providers__WEBPACK_IMPORTED_MODULE_2__.HoneyStyleProvider),
 /* harmony export */   VALID_DOM_ELEMENT_ATTRS: () => (/* reexport safe */ _constants__WEBPACK_IMPORTED_MODULE_0__.VALID_DOM_ELEMENT_ATTRS),
 /* harmony export */   __DEV__: () => (/* reexport safe */ _constants__WEBPACK_IMPORTED_MODULE_0__.__DEV__),
-/* harmony export */   assert: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_9__.assert),
-/* harmony export */   boolFilter: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_9__.boolFilter),
-/* harmony export */   checkIsThemeColorValue: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_9__.checkIsThemeColorValue),
-/* harmony export */   combineClassNames: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_9__.combineClassNames),
-/* harmony export */   convertHexToHexWithAlpha: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_9__.convertHexToHexWithAlpha),
+/* harmony export */   assert: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_8__.assert),
+/* harmony export */   boolFilter: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_8__.boolFilter),
+/* harmony export */   checkIsThemeColorValue: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_8__.checkIsThemeColorValue),
+/* harmony export */   combineClassNames: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_8__.combineClassNames),
+/* harmony export */   convertHexToHexWithAlpha: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_8__.convertHexToHexWithAlpha),
 /* harmony export */   createGlobalStyle: () => (/* reexport safe */ _global_style__WEBPACK_IMPORTED_MODULE_6__.createGlobalStyle),
+/* harmony export */   createSpacingMiddleware: () => (/* reexport safe */ _css__WEBPACK_IMPORTED_MODULE_5__.createSpacingMiddleware),
 /* harmony export */   css: () => (/* reexport safe */ _css__WEBPACK_IMPORTED_MODULE_5__.css),
-/* harmony export */   filterNonHtmlAttrs: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_9__.filterNonHtmlAttrs),
-/* harmony export */   generateId: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_9__.generateId),
-/* harmony export */   isFunction: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_9__.isFunction),
-/* harmony export */   isNil: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_9__.isNil),
-/* harmony export */   isObject: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_9__.isObject),
-/* harmony export */   isString: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_9__.isString),
-/* harmony export */   isStyledComponent: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_9__.isStyledComponent),
-/* harmony export */   mediaQuery: () => (/* reexport safe */ _at_rules__WEBPACK_IMPORTED_MODULE_8__.mediaQuery),
-/* harmony export */   processCss: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_9__.processCss),
-/* harmony export */   pxToRem: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_9__.pxToRem),
-/* harmony export */   resolveClassName: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_9__.resolveClassName),
-/* harmony export */   resolveColor: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_9__.resolveColor),
-/* harmony export */   resolveDimension: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_9__.resolveDimension),
-/* harmony export */   resolveFont: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_9__.resolveFont),
-/* harmony export */   resolveSpacing: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_9__.resolveSpacing),
+/* harmony export */   filterNonHtmlAttrs: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_8__.filterNonHtmlAttrs),
+/* harmony export */   generateId: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_8__.generateId),
+/* harmony export */   isFunction: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_8__.isFunction),
+/* harmony export */   isNil: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_8__.isNil),
+/* harmony export */   isObject: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_8__.isObject),
+/* harmony export */   isString: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_8__.isString),
+/* harmony export */   isStyledComponent: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_8__.isStyledComponent),
+/* harmony export */   mediaQuery: () => (/* reexport safe */ _css__WEBPACK_IMPORTED_MODULE_5__.mediaQuery),
+/* harmony export */   processCss: () => (/* reexport safe */ _css__WEBPACK_IMPORTED_MODULE_5__.processCss),
+/* harmony export */   pxToRem: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_8__.pxToRem),
+/* harmony export */   resolveClassName: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_8__.resolveClassName),
+/* harmony export */   resolveColor: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_8__.resolveColor),
+/* harmony export */   resolveDimension: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_8__.resolveDimension),
+/* harmony export */   resolveFont: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_8__.resolveFont),
+/* harmony export */   resolveSpacing: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_8__.resolveSpacing),
 /* harmony export */   styled: () => (/* reexport safe */ _styled__WEBPACK_IMPORTED_MODULE_7__.styled),
-/* harmony export */   toKebabCase: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_9__.toKebabCase),
+/* harmony export */   toKebabCase: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_8__.toKebabCase),
 /* harmony export */   useHoneyStyle: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_3__.useHoneyStyle)
 /* harmony export */ });
 /* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./constants */ "./src/constants.ts");
@@ -2388,12 +2823,10 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _providers__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./providers */ "./src/providers/index.ts");
 /* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./hooks */ "./src/hooks/index.ts");
 /* harmony import */ var _types__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./types */ "./src/types/index.ts");
-/* harmony import */ var _css__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./css */ "./src/css.ts");
+/* harmony import */ var _css__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./css */ "./src/css/index.ts");
 /* harmony import */ var _global_style__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./global-style */ "./src/global-style.ts");
 /* harmony import */ var _styled__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./styled */ "./src/styled.ts");
-/* harmony import */ var _at_rules__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./at-rules */ "./src/at-rules/index.ts");
-/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./utils */ "./src/utils.ts");
-
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./utils */ "./src/utils.ts");