@react-hive/honey-style 2.6.0 → 2.8.0

package/dist/index.dev.cjs

@@ -2,6 +2,71 @@
 /******/ 	"use strict";
 /******/ 	var __webpack_modules__ = ({
 
+/***/ "./node_modules/@react-hive/honey-utils/dist/index.mjs":
+/*!*************************************************************!*\
+  !*** ./node_modules/@react-hive/honey-utils/dist/index.mjs ***!
+  \*************************************************************/
+/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   assert: () => (/* binding */ a),
+/* harmony export */   boolFilter: () => (/* binding */ S),
+/* harmony export */   calculateEuclideanDistance: () => (/* binding */ V),
+/* harmony export */   calculateMovingSpeed: () => (/* binding */ G),
+/* harmony export */   calculatePercentage: () => (/* binding */ H),
+/* harmony export */   camelToDashCase: () => (/* binding */ t),
+/* harmony export */   chunk: () => (/* binding */ B),
+/* harmony export */   cloneBlob: () => (/* binding */ K),
+/* harmony export */   compose: () => (/* binding */ Z),
+/* harmony export */   convertBlobToFile: () => (/* binding */ Q),
+/* harmony export */   delay: () => (/* binding */ I),
+/* harmony export */   difference: () => (/* binding */ L),
+/* harmony export */   everyAsync: () => (/* binding */ v),
+/* harmony export */   filterAsync: () => (/* binding */ R),
+/* harmony export */   findAsync: () => (/* binding */ E),
+/* harmony export */   forAsync: () => (/* binding */ N),
+/* harmony export */   hashString: () => (/* binding */ r),
+/* harmony export */   intersection: () => (/* binding */ F),
+/* harmony export */   invokeIfFunction: () => (/* binding */ D),
+/* harmony export */   isArray: () => (/* binding */ p),
+/* harmony export */   isBool: () => (/* binding */ u),
+/* harmony export */   isDate: () => (/* binding */ b),
+/* harmony export */   isDefined: () => (/* binding */ i),
+/* harmony export */   isEmptyArray: () => (/* binding */ w),
+/* harmony export */   isEmptyObject: () => (/* binding */ h),
+/* harmony export */   isFiniteNumber: () => (/* binding */ M),
+/* harmony export */   isFunction: () => (/* binding */ g),
+/* harmony export */   isInteger: () => (/* binding */ x),
+/* harmony export */   isMap: () => (/* binding */ k),
+/* harmony export */   isNil: () => (/* binding */ l),
+/* harmony export */   isNilOrEmptyString: () => (/* binding */ s),
+/* harmony export */   isNull: () => (/* binding */ o),
+/* harmony export */   isNumber: () => (/* binding */ f),
+/* harmony export */   isObject: () => (/* binding */ y),
+/* harmony export */   isPromise: () => (/* binding */ m),
+/* harmony export */   isRegExp: () => (/* binding */ A),
+/* harmony export */   isSet: () => (/* binding */ C),
+/* harmony export */   isString: () => (/* binding */ c),
+/* harmony export */   isSymbol: () => (/* binding */ X),
+/* harmony export */   isUndefined: () => (/* binding */ Y),
+/* harmony export */   isValidDate: () => (/* binding */ d),
+/* harmony export */   mapAsync: () => (/* binding */ P),
+/* harmony export */   noop: () => (/* binding */ q),
+/* harmony export */   parse2DMatrix: () => (/* binding */ J),
+/* harmony export */   pipe: () => (/* binding */ T),
+/* harmony export */   reduceAsync: () => (/* binding */ z),
+/* harmony export */   retry: () => (/* binding */ O),
+/* harmony export */   someAsync: () => (/* binding */ j),
+/* harmony export */   splitStringIntoWords: () => (/* binding */ n),
+/* harmony export */   toKebabCase: () => (/* binding */ e),
+/* harmony export */   unique: () => (/* binding */ $)
+/* harmony export */ });
+const e=e=>e.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase(),t=e=>{const t=e.charAt(0),n=e.slice(1);return t.toLowerCase()+n.replace(/[A-Z]/g,e=>`-${e.toLowerCase()}`)},n=e=>e.split(" ").filter(Boolean),r=e=>{let t=5381;for(let n=0;n<e.length;n++)t=33*t^e.charCodeAt(n);return(t>>>0).toString(36)};function a(e,t){if(!e)throw new Error(t)}const o=e=>null===e,l=e=>null==e,s=e=>""===e||l(e),i=e=>null!=e,c=e=>"string"==typeof e,f=e=>"number"==typeof e,u=e=>"boolean"==typeof e,y=e=>"object"==typeof e,h=e=>y(e)&&!o(e)&&0===Object.keys(e).length,p=e=>Array.isArray(e),w=e=>p(e)&&0===e.length,g=e=>"function"==typeof e,m=e=>g(e?.then),b=e=>e instanceof Date,d=e=>b(e)&&!isNaN(e.getTime()),A=e=>e instanceof RegExp,k=e=>e instanceof Map,C=e=>e instanceof Set,X=e=>"symbol"==typeof e,Y=e=>void 0===e,M=e=>f(e)&&isFinite(e),x=e=>f(e)&&Number.isInteger(e),S=e=>e.filter(Boolean),$=e=>[...new Set(e)],B=(e,t)=>(a(t>0,"Chunk size must be greater than 0"),Array.from({length:Math.ceil(e.length/t)},(n,r)=>e.slice(r*t,(r+1)*t))),F=(...e)=>{if(0===e.length)return[];if(1===e.length)return[...e[0]];const[t,...n]=e;return $(t).filter(e=>n.every(t=>t.includes(e)))},L=(e,t)=>e.filter(e=>!t.includes(e)),N=async(e,t)=>{const n=[];for(let r=0;r<e.length;r++)n.push(await t(e[r],r,e));return n},P=async(e,t)=>Promise.all(e.map(t)),R=async(e,t)=>{const n=await P(e,async(e,n,r)=>!!await t(e,n,r)&&e);return S(n)},j=async(e,t)=>{for(let n=0;n<e.length;n++)if(await t(e[n],n,e))return!0;return!1},v=async(e,t)=>{for(let n=0;n<e.length;n++)if(!await t(e[n],n,e))return!1;return!0},z=async(e,t,n)=>{let r=n;for(let n=0;n<e.length;n++)r=await t(r,e[n],n,e);return r},E=async(e,t)=>{for(let n=0;n<e.length;n++)if(await t(e[n],n,e))return e[n];return null},T=(...e)=>t=>e.reduce((e,t)=>t(e),t),Z=(...e)=>t=>e.reduceRight((e,t)=>t(e),t),q=()=>{},D=(e,...t)=>"function"==typeof e?e(...t):e,I=e=>new Promise(t=>setTimeout(t,e)),O=(e,{maxAttempts:t=3,delayMs:n=300,backoff:r=!0,onRetry:a}={})=>async(...o)=>{let l;for(let s=1;s<=t;s++)try{return await e(...o)}catch(e){if(l=e,s<t){a?.(s,e);const t=r?n*2**(s-1):n;await I(t)}}throw l},V=(e,t,n,r)=>{const a=n-e,o=r-t;return Math.sqrt(a**2+o**2)},G=(e,t)=>Math.abs(e/t),H=(e,t)=>e*t/100,J=e=>{const t=window.getComputedStyle(e).getPropertyValue("transform").match(/^matrix\((.+)\)$/);if(!t)return{translateX:0,translateY:0,scaleX:1,scaleY:1,skewX:0,skewY:0};const[n,r,a,o,l,s]=t[1].split(", ").map(parseFloat);return{translateX:l,translateY:s,scaleX:n,scaleY:o,skewX:a,skewY:r}},K=e=>new Blob([e],{type:e.type}),Q=(e,t)=>new File([e],t,{type:e.type});
+//# sourceMappingURL=index.mjs.map
+
+/***/ }),
+
 /***/ "./node_modules/react/cjs/react-jsx-runtime.development.js":
 /*!*****************************************************************!*\
   !*** ./node_modules/react/cjs/react-jsx-runtime.development.js ***!
@@ -1809,7 +1874,7 @@ __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");
+/* harmony import */ var _react_hive_honey_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @react-hive/honey-utils */ "./node_modules/@react-hive/honey-utils/dist/index.mjs");
 
 /**
  * Constructs a complete `@media` query string from an array of media rule objects.
@@ -1844,7 +1909,7 @@ const mediaQuery = (rules) => {
             rule.resolution && ['resolution', rule.resolution],
             rule.update && ['update', rule.update],
         ];
-        const conditions = (0,_utils__WEBPACK_IMPORTED_MODULE_0__.boolFilter)(rulesConfig)
+        const conditions = (0,_react_hive_honey_utils__WEBPACK_IMPORTED_MODULE_0__.boolFilter)(rulesConfig)
             .map(ruleConfig => `(${ruleConfig[0]}: ${ruleConfig[1]})`)
             .join(' and ');
         const operatorPart = rule.operator ? `${rule.operator} ` : '';
@@ -1918,27 +1983,29 @@ __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 _react_hive_honey_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @react-hive/honey-utils */ "./node_modules/@react-hive/honey-utils/dist/index.mjs");
+/* 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");
+
 
 
 const resolveCssInterpolation = (value, context) => {
-    if (value === '' || value === false || (0,_utils__WEBPACK_IMPORTED_MODULE_1__.isNil)(value)) {
+    if (value === '' || value === false || (0,_react_hive_honey_utils__WEBPACK_IMPORTED_MODULE_0__.isNil)(value)) {
         return '';
     }
-    if ((0,_utils__WEBPACK_IMPORTED_MODULE_1__.isFunction)(value)) {
-        if ((0,_utils__WEBPACK_IMPORTED_MODULE_1__.isStyledComponent)(value)) {
-            return `.${value[_constants__WEBPACK_IMPORTED_MODULE_0__.HONEY_STYLED_COMPONENT_ID_PROP]}`;
+    if ((0,_react_hive_honey_utils__WEBPACK_IMPORTED_MODULE_0__.isFunction)(value)) {
+        if ((0,_utils__WEBPACK_IMPORTED_MODULE_2__.isStyledComponent)(value)) {
+            return `.${value[_constants__WEBPACK_IMPORTED_MODULE_1__.HONEY_STYLED_COMPONENT_ID_PROP]}`;
         }
         return resolveCssInterpolation(value(context), context);
     }
     if (Array.isArray(value)) {
         return value.map(v => resolveCssInterpolation(v, context)).join('\n');
     }
-    if ((0,_utils__WEBPACK_IMPORTED_MODULE_1__.isObject)(value)) {
+    if ((0,_react_hive_honey_utils__WEBPACK_IMPORTED_MODULE_0__.isObject)(value)) {
         return Object.entries(value)
             .filter(([, v]) => v !== undefined && v !== false)
-            .map(([k, v]) => `${(0,_utils__WEBPACK_IMPORTED_MODULE_1__.toKebabCase)(k)}: ${v};`)
+            .map(([k, v]) => `${(0,_react_hive_honey_utils__WEBPACK_IMPORTED_MODULE_0__.toKebabCase)(k)}: ${v};`)
             .join('\n');
     }
     return value.toString?.() ?? '';
@@ -1962,12 +2029,14 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   CSS_SPACING_PROPERTIES: () => (/* reexport safe */ _constants__WEBPACK_IMPORTED_MODULE_1__.CSS_SPACING_PROPERTIES),
 /* harmony export */   createAbsoluteFillAtRuleMiddleware: () => (/* reexport safe */ _middlewares__WEBPACK_IMPORTED_MODULE_2__.createAbsoluteFillAtRuleMiddleware),
 /* harmony export */   createCenterAtRuleMiddleware: () => (/* reexport safe */ _middlewares__WEBPACK_IMPORTED_MODULE_2__.createCenterAtRuleMiddleware),
+/* harmony export */   createEllipsisAtRuleMiddleware: () => (/* reexport safe */ _middlewares__WEBPACK_IMPORTED_MODULE_2__.createEllipsisAtRuleMiddleware),
 /* harmony export */   createInlineAtRuleMiddleware: () => (/* reexport safe */ _middlewares__WEBPACK_IMPORTED_MODULE_2__.createInlineAtRuleMiddleware),
 /* harmony export */   createSpacingMiddleware: () => (/* reexport safe */ _middlewares__WEBPACK_IMPORTED_MODULE_2__.createSpacingMiddleware),
 /* harmony export */   createStackAtRuleMiddleware: () => (/* reexport safe */ _middlewares__WEBPACK_IMPORTED_MODULE_2__.createStackAtRuleMiddleware),
 /* 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 */   processCss: () => (/* reexport safe */ _processor__WEBPACK_IMPORTED_MODULE_3__.processCss),
+/* harmony export */   suggestAtRuleMiddleware: () => (/* reexport safe */ _middlewares__WEBPACK_IMPORTED_MODULE_2__.suggestAtRuleMiddleware)
 /* 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");
@@ -1999,7 +2068,10 @@ __webpack_require__.r(__webpack_exports__);
 
 const createAbsoluteFillAtRuleMiddleware = () => (0,_factory__WEBPACK_IMPORTED_MODULE_0__.createAtRuleMiddleware)({
     name: 'absolute-fill',
-    transform: () => 'position:absolute;top:0;right:0;bottom:0;left:0;',
+    transform: () => {
+        const declarations = ['position:absolute;', 'inset:0;'];
+        return declarations.join('');
+    },
 });
 
 
@@ -2019,7 +2091,56 @@ __webpack_require__.r(__webpack_exports__);
 
 const createCenterAtRuleMiddleware = () => (0,_factory__WEBPACK_IMPORTED_MODULE_0__.createAtRuleMiddleware)({
     name: 'center',
-    transform: () => 'display:flex;align-items:center;justify-content:center;',
+    transform: (args = []) => {
+        const declarations = [];
+        switch (args[0]) {
+            case 'horizontal':
+            case 'x':
+                declarations.push('display:flex;', 'justify-content:center;');
+                break;
+            case 'vertical':
+            case 'y':
+                declarations.push('display:flex;', 'align-items:center;');
+                break;
+            case 'block':
+                declarations.push('display:block;', 'text-align:center;');
+                break;
+            case 'inline':
+                declarations.push('display:inline-flex;', 'align-items:center;', 'justify-content:center;');
+                break;
+            default:
+                declarations.push('display:flex;', 'align-items:center;', 'justify-content:center;');
+                break;
+        }
+        return declarations.join('');
+    },
+});
+
+
+/***/ }),
+
+/***/ "./src/css/middlewares/ellipsis-at-rule.ts":
+/*!*************************************************!*\
+  !*** ./src/css/middlewares/ellipsis-at-rule.ts ***!
+  \*************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   createEllipsisAtRuleMiddleware: () => (/* binding */ createEllipsisAtRuleMiddleware)
+/* harmony export */ });
+/* harmony import */ var _factory__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./factory */ "./src/css/middlewares/factory.ts");
+
+const createEllipsisAtRuleMiddleware = () => (0,_factory__WEBPACK_IMPORTED_MODULE_0__.createAtRuleMiddleware)({
+    name: 'ellipsis',
+    transform: () => {
+        const declarations = [
+            'white-space:nowrap;',
+            'overflow:hidden;',
+            'text-overflow:ellipsis;',
+        ];
+        return declarations.join('');
+    },
 });
 
 
@@ -2039,20 +2160,42 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var stylis__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! stylis */ "./node_modules/stylis/src/Parser.js");
 
 /**
- * Creates a Stylis middleware that transforms a custom @honey-* at-rule
- * into standard CSS declarations. It supports optional arguments via parentheses
- * and nested rule content.
+ * Creates a Stylis middleware for transforming custom `@honey-*` at-rules into
+ * regular CSS declarations.
  *
- * @example
- * // For @honey-stack(2) { gap: 1; }
+ * This utility enables the definition of expressive, domain-specific at-rules
+ * such as `@honey-stack`, `@honey-inline`, or `@honey-center`, which can then be
+ * expanded into valid CSS at build time.
+ *
+ * Supports optional arguments passed via parentheses (e.g., `@honey-stack(2)`),
+ * as well as nested rule bodies (e.g., `@honey-stack { .child { ... } }`).
+ *
+ * ---
+ *
+ * ### Example
+ * ```ts
  * createAtRuleMiddleware({
  *   name: 'stack',
- *   transform: args => `display:flex;gap:${parseFloat(args || '0') * 8}px;`
+ *   transform: args => {
+ *     const gap = parseFloat(args?.[0] ?? '0') * 8;
+ *
+ *     return `display:flex;flex-direction:column;gap:${gap}px;`;
+ *   }
  * });
+ * ```
+ *
+ * ---
  *
- * @param options - Middleware creation options.
+ * ### Behavior
+ * - Matches only rules of the form `@honey-${name}` inside standard CSS rules.
+ * - Parses arguments from parentheses (e.g. `@honey-name (arg1 arg2)`).
+ * - Serializes nested content (children) and appends it to the output.
  *
- * @returns A Stylis middleware function.
+ * @param options - Options for configuring the middleware:
+ *   - `name`: the custom at-rule suffix, without the `@honey-` prefix.
+ *   - `transform`: a function to convert parsed args and the AST node into CSS declarations.
+ *
+ * @returns A Stylis `Middleware` function that replaces the matched at-rule with the generated CSS.
  */
 const createAtRuleMiddleware = ({ name, transform, }) => {
     return (element, _i, _children, callback) => {
@@ -2066,7 +2209,7 @@ const createAtRuleMiddleware = ({ name, transform, }) => {
         const argsMatch = element.value
             .trim()
             .match(new RegExp(`^${element.type}\\s*\\(\\s*([^)]+?)\\s*\\)\\s*;?$`, 'i'));
-        const args = argsMatch ? argsMatch[1].trim() : undefined;
+        const args = argsMatch ? argsMatch[1].split(' ').filter(Boolean) : undefined;
         const transformedCSS = transform(args, element, name);
         const serializedChildren = Array.isArray(element.children)
             ? (0,stylis__WEBPACK_IMPORTED_MODULE_0__.serialize)(element.children, callback)
@@ -2089,15 +2232,21 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   createAbsoluteFillAtRuleMiddleware: () => (/* reexport safe */ _absolute_fill_at_rule__WEBPACK_IMPORTED_MODULE_4__.createAbsoluteFillAtRuleMiddleware),
 /* harmony export */   createCenterAtRuleMiddleware: () => (/* reexport safe */ _center_at_rule__WEBPACK_IMPORTED_MODULE_3__.createCenterAtRuleMiddleware),
+/* harmony export */   createEllipsisAtRuleMiddleware: () => (/* reexport safe */ _ellipsis_at_rule__WEBPACK_IMPORTED_MODULE_5__.createEllipsisAtRuleMiddleware),
 /* harmony export */   createInlineAtRuleMiddleware: () => (/* reexport safe */ _inline_at_rule__WEBPACK_IMPORTED_MODULE_2__.createInlineAtRuleMiddleware),
 /* harmony export */   createSpacingMiddleware: () => (/* reexport safe */ _spacing__WEBPACK_IMPORTED_MODULE_0__.createSpacingMiddleware),
-/* harmony export */   createStackAtRuleMiddleware: () => (/* reexport safe */ _stack_at_rule__WEBPACK_IMPORTED_MODULE_1__.createStackAtRuleMiddleware)
+/* harmony export */   createStackAtRuleMiddleware: () => (/* reexport safe */ _stack_at_rule__WEBPACK_IMPORTED_MODULE_1__.createStackAtRuleMiddleware),
+/* harmony export */   suggestAtRuleMiddleware: () => (/* reexport safe */ _suggest__WEBPACK_IMPORTED_MODULE_6__.suggestAtRuleMiddleware)
 /* harmony export */ });
 /* harmony import */ var _spacing__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./spacing */ "./src/css/middlewares/spacing.ts");
 /* harmony import */ var _stack_at_rule__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./stack-at-rule */ "./src/css/middlewares/stack-at-rule.ts");
 /* harmony import */ var _inline_at_rule__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./inline-at-rule */ "./src/css/middlewares/inline-at-rule.ts");
 /* harmony import */ var _center_at_rule__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./center-at-rule */ "./src/css/middlewares/center-at-rule.ts");
 /* harmony import */ var _absolute_fill_at_rule__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./absolute-fill-at-rule */ "./src/css/middlewares/absolute-fill-at-rule.ts");
+/* harmony import */ var _ellipsis_at_rule__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./ellipsis-at-rule */ "./src/css/middlewares/ellipsis-at-rule.ts");
+/* harmony import */ var _suggest__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./suggest */ "./src/css/middlewares/suggest.ts");
+
+
 
 
 
@@ -2119,13 +2268,13 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var _factory__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./factory */ "./src/css/middlewares/factory.ts");
 
-const createInlineAtRuleMiddleware = ({ spacingMultiplier = 0, } = {}) => (0,_factory__WEBPACK_IMPORTED_MODULE_0__.createAtRuleMiddleware)({
+const createInlineAtRuleMiddleware = ({ spacing = 0, } = {}) => (0,_factory__WEBPACK_IMPORTED_MODULE_0__.createAtRuleMiddleware)({
     name: 'inline',
     transform: args => {
         const declarations = ['display:flex;', 'align-items:center;'];
-        if (args) {
-            const isNumber = /^-?\d*\.?\d+$/.test(args);
-            const gap = isNumber ? `${parseFloat(args) * spacingMultiplier}px` : args;
+        if (args?.length) {
+            const isNumber = /^-?\d*\.?\d+$/.test(args[0]);
+            const gap = isNumber ? `${parseFloat(args[0]) * spacing}px` : args;
             declarations.push(`gap:${gap};`);
         }
         return declarations.join('');
@@ -2149,7 +2298,7 @@ __webpack_require__.r(__webpack_exports__);
 
 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 = 0 }) => element => {
+const createSpacingMiddleware = ({ spacing = 0 }) => element => {
     if (element.type !== 'decl') {
         return;
     }
@@ -2165,7 +2314,7 @@ const createSpacingMiddleware = ({ spacingMultiplier = 0 }) => element => {
         for (const value of parts) {
             transformedParts.push(
             // Accept only numeric strings (integers or floats), no units or symbols
-            /^-?\d*\.?\d+$/.test(value) ? `${parseFloat(value) * spacingMultiplier}px` : value);
+            /^-?\d*\.?\d+$/.test(value) ? `${parseFloat(value) * spacing}px` : value);
         }
         const transformed = transformedParts.join(' ');
         element.return = `${element.props}:${transformed};`;
@@ -2187,13 +2336,13 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var _factory__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./factory */ "./src/css/middlewares/factory.ts");
 
-const createStackAtRuleMiddleware = ({ spacingMultiplier = 0, }) => (0,_factory__WEBPACK_IMPORTED_MODULE_0__.createAtRuleMiddleware)({
+const createStackAtRuleMiddleware = ({ spacing = 0 }) => (0,_factory__WEBPACK_IMPORTED_MODULE_0__.createAtRuleMiddleware)({
     name: 'stack',
     transform: args => {
         const declarations = ['display:flex;', 'flex-direction:column;'];
-        if (args) {
-            const isNumber = /^-?\d*\.?\d+$/.test(args);
-            const gap = isNumber ? `${parseFloat(args) * spacingMultiplier}px` : args;
+        if (args?.length) {
+            const isNumber = /^-?\d*\.?\d+$/.test(args[0]);
+            const gap = isNumber ? `${parseFloat(args[0]) * spacing}px` : args;
             declarations.push(`gap:${gap};`);
         }
         return declarations.join('');
@@ -2201,6 +2350,63 @@ const createStackAtRuleMiddleware = ({ spacingMultiplier = 0, }) => (0,_factory_
 });
 
 
+/***/ }),
+
+/***/ "./src/css/middlewares/suggest.ts":
+/*!****************************************!*\
+  !*** ./src/css/middlewares/suggest.ts ***!
+  \****************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   suggestAtRuleMiddleware: () => (/* binding */ suggestAtRuleMiddleware)
+/* harmony export */ });
+const collectDeclarations = (rule) => {
+    if (!rule.children || !Array.isArray(rule.children)) {
+        return [];
+    }
+    return rule.children
+        .filter(child => child.type === 'decl' &&
+        typeof child.props === 'string' &&
+        typeof child.children === 'string')
+        .map(child => ({
+        prop: child.props,
+        value: child.children,
+    }));
+};
+const knownPatterns = [
+    {
+        name: '@honey-center',
+        match: (declarations) => declarations.some(d => d.prop === 'display' && d.value === 'flex') &&
+            declarations.some(d => d.prop === 'align-items' && d.value === 'center') &&
+            declarations.some(d => d.prop === 'justify-content' && d.value === 'center'),
+    },
+    {
+        name: '@honey-stack',
+        match: (declarations) => declarations.some(d => d.prop === 'display' && d.value === 'flex') &&
+            declarations.some(d => d.prop === 'flex-direction' && d.value === 'column'),
+    },
+    {
+        name: '@honey-inline',
+        match: (declarations) => declarations.some(d => d.prop === 'display' && d.value === 'flex') &&
+            declarations.some(d => d.prop === 'align-items' && d.value === 'center'),
+    },
+];
+const suggestAtRuleMiddleware = element => {
+    if (element.type !== 'rule' || !element.children) {
+        return;
+    }
+    const declarations = collectDeclarations(element);
+    for (const pattern of knownPatterns) {
+        if (pattern.match(declarations)) {
+            console.info(`[@react-hive/honey-style]: The CSS rule "${element.value}" can be simplified using the shorthand at-rule "${pattern.name}".`);
+            break;
+        }
+    }
+};
+
+
 /***/ }),
 
 /***/ "./src/css/processor.ts":
@@ -2213,23 +2419,22 @@ __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/index.ts");
+/* 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 stylis__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! stylis */ "./node_modules/stylis/src/Middleware.js");
+/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../constants */ "./src/constants.ts");
+/* harmony import */ var _middlewares__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./middlewares */ "./src/css/middlewares/index.ts");
+
 
 
-const processCss = (rawCss, selector, { spacingMultiplier } = {}) => {
+const processCss = (rawCss, selector, { spacing } = {}) => {
     const scopedCss = selector ? `${selector}{${rawCss}}` : rawCss;
-    const middlewares = [
-        (0,_middlewares__WEBPACK_IMPORTED_MODULE_0__.createStackAtRuleMiddleware)({ spacingMultiplier }),
-        (0,_middlewares__WEBPACK_IMPORTED_MODULE_0__.createInlineAtRuleMiddleware)({ spacingMultiplier }),
-        (0,_middlewares__WEBPACK_IMPORTED_MODULE_0__.createCenterAtRuleMiddleware)(),
-        (0,_middlewares__WEBPACK_IMPORTED_MODULE_0__.createAbsoluteFillAtRuleMiddleware)(),
-        (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));
+    const middlewares = [];
+    if (_constants__WEBPACK_IMPORTED_MODULE_0__.__DEV__) {
+        // middlewares.push(suggestAtRuleMiddleware);
+    }
+    middlewares.push((0,_middlewares__WEBPACK_IMPORTED_MODULE_1__.createStackAtRuleMiddleware)({ spacing }), (0,_middlewares__WEBPACK_IMPORTED_MODULE_1__.createInlineAtRuleMiddleware)({ spacing }), (0,_middlewares__WEBPACK_IMPORTED_MODULE_1__.createCenterAtRuleMiddleware)(), (0,_middlewares__WEBPACK_IMPORTED_MODULE_1__.createEllipsisAtRuleMiddleware)(), (0,_middlewares__WEBPACK_IMPORTED_MODULE_1__.createAbsoluteFillAtRuleMiddleware)(), (0,_middlewares__WEBPACK_IMPORTED_MODULE_1__.createSpacingMiddleware)({ spacing }), stylis__WEBPACK_IMPORTED_MODULE_2__.stringify);
+    return (0,stylis__WEBPACK_IMPORTED_MODULE_2__.serialize)((0,stylis__WEBPACK_IMPORTED_MODULE_3__.compile)(scopedCss), (0,stylis__WEBPACK_IMPORTED_MODULE_4__.middleware)(middlewares));
 };
 
 
@@ -2321,14 +2526,14 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* 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 _utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../utils */ "./src/utils.ts");
+/* harmony import */ var _react_hive_honey_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @react-hive/honey-utils */ "./node_modules/@react-hive/honey-utils/dist/index.mjs");
 /* harmony import */ var _contexts__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../contexts */ "./src/contexts/index.ts");
 
 
 
 const useHoneyStyle = () => {
     const context = (0,react__WEBPACK_IMPORTED_MODULE_0__.useContext)(_contexts__WEBPACK_IMPORTED_MODULE_2__.HoneyStyleContext);
-    (0,_utils__WEBPACK_IMPORTED_MODULE_1__.assert)(context, 'The `useHoneyStyle()` hook must be used inside <HoneyStyleProvider/> component!');
+    (0,_react_hive_honey_utils__WEBPACK_IMPORTED_MODULE_1__.assert)(context, 'The `useHoneyStyle()` hook must be used inside <HoneyStyleProvider/> component!');
     return context;
 };
 
@@ -2489,11 +2694,13 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* 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 _utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./utils */ "./src/utils.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");
+/* harmony import */ var _react_hive_honey_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @react-hive/honey-utils */ "./node_modules/@react-hive/honey-utils/dist/index.mjs");
+/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./constants */ "./src/constants.ts");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./utils */ "./src/utils.ts");
+/* harmony import */ var _css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./css */ "./src/css/index.ts");
+/* harmony import */ var _mount_style__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./mount-style */ "./src/mount-style.ts");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./hooks */ "./src/hooks/index.ts");
+
 
 
 
@@ -2504,23 +2711,23 @@ const evaluateDynamicCss = (interpolation, context) => {
     if (!interpolation) {
         return '';
     }
-    if ((0,_utils__WEBPACK_IMPORTED_MODULE_2__.isString)(interpolation)) {
+    if ((0,_react_hive_honey_utils__WEBPACK_IMPORTED_MODULE_1__.isString)(interpolation)) {
         return interpolation;
     }
     // @ts-expect-error
-    return (0,_css__WEBPACK_IMPORTED_MODULE_3__.css)([''], [interpolation])(context);
+    return (0,_css__WEBPACK_IMPORTED_MODULE_4__.css)([''], [interpolation])(context);
 };
 const styled = (target, defaultProps) => {
     return (strings, ...interpolations) => {
-        const componentId = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.generateId)('hsc');
-        const computeCss = (0,_css__WEBPACK_IMPORTED_MODULE_3__.css)(strings, ...interpolations);
+        const componentId = (0,_utils__WEBPACK_IMPORTED_MODULE_3__.generateId)('hsc');
+        const computeCss = (0,_css__WEBPACK_IMPORTED_MODULE_4__.css)(strings, ...interpolations);
         const StyledComponent = ({ as, className, __compositionDepth = 0, css: cssProp, ...props }) => {
-            if (_constants__WEBPACK_IMPORTED_MODULE_1__.__DEV__ && cssProp) {
+            if (_constants__WEBPACK_IMPORTED_MODULE_2__.__DEV__ && cssProp) {
                 console.warn(`[@react-hive/honey-style]: The "css" prop is deprecated. Please use inheritance or composition instead.`);
             }
-            const { theme } = (0,_hooks__WEBPACK_IMPORTED_MODULE_5__.useHoneyStyle)();
+            const { theme } = (0,_hooks__WEBPACK_IMPORTED_MODULE_6__.useHoneyStyle)();
             const cleanedProps = Object.fromEntries(Object.entries(props).filter(([, value]) => value !== undefined));
-            const resolvedDefaultProps = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.isFunction)(defaultProps)
+            const resolvedDefaultProps = (0,_react_hive_honey_utils__WEBPACK_IMPORTED_MODULE_1__.isFunction)(defaultProps)
                 ? defaultProps({ theme, as, className, ...cleanedProps })
                 : (defaultProps ?? {});
             const context = {
@@ -2529,47 +2736,47 @@ const styled = (target, defaultProps) => {
                 theme,
             };
             const rawCss = computeCss(context);
-            const baseClassName = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.resolveClassName)(rawCss);
+            const baseClassName = (0,_utils__WEBPACK_IMPORTED_MODULE_3__.resolveClassName)(rawCss);
             (0,react__WEBPACK_IMPORTED_MODULE_0__.useInsertionEffect)(() => {
-                const baseCss = (0,_css__WEBPACK_IMPORTED_MODULE_3__.processCss)(rawCss, `.${baseClassName}`, {
-                    spacingMultiplier: theme.spacings.base,
+                const baseCss = (0,_css__WEBPACK_IMPORTED_MODULE_4__.processCss)(rawCss, `.${baseClassName}`, {
+                    spacing: theme.spacings.base,
                 });
-                return (0,_mount_style__WEBPACK_IMPORTED_MODULE_4__.mountStyle)(baseClassName, baseCss, __compositionDepth);
+                return (0,_mount_style__WEBPACK_IMPORTED_MODULE_5__.mountStyle)(baseClassName, baseCss, __compositionDepth);
             }, [baseClassName]);
-            const cssPropRaw = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.isFunction)(cssProp) ? cssProp(context) : cssProp;
+            const cssPropRaw = (0,_react_hive_honey_utils__WEBPACK_IMPORTED_MODULE_1__.isFunction)(cssProp) ? cssProp(context) : cssProp;
             const cssPropString = evaluateDynamicCss(cssPropRaw, context);
-            const cssPropClassName = cssPropString ? (0,_utils__WEBPACK_IMPORTED_MODULE_2__.resolveClassName)(cssPropString) : '';
+            const cssPropClassName = cssPropString ? (0,_utils__WEBPACK_IMPORTED_MODULE_3__.resolveClassName)(cssPropString) : '';
             (0,react__WEBPACK_IMPORTED_MODULE_0__.useInsertionEffect)(() => {
                 if (cssPropClassName) {
-                    const overrideCss = (0,_css__WEBPACK_IMPORTED_MODULE_3__.processCss)(cssPropString, `.${cssPropClassName}`, {
-                        spacingMultiplier: theme.spacings.base,
+                    const overrideCss = (0,_css__WEBPACK_IMPORTED_MODULE_4__.processCss)(cssPropString, `.${cssPropClassName}`, {
+                        spacing: theme.spacings.base,
                     });
-                    return (0,_mount_style__WEBPACK_IMPORTED_MODULE_4__.mountStyle)(cssPropClassName, overrideCss, 1);
+                    return (0,_mount_style__WEBPACK_IMPORTED_MODULE_5__.mountStyle)(cssPropClassName, overrideCss, 1);
                 }
             }, [cssPropClassName]);
             const mergedProps = {
                 ...resolvedDefaultProps,
                 ...cleanedProps,
-                className: (0,_utils__WEBPACK_IMPORTED_MODULE_2__.combineClassNames)([componentId, baseClassName, className, cssPropClassName]),
+                className: (0,_utils__WEBPACK_IMPORTED_MODULE_3__.combineClassNames)([componentId, baseClassName, className, cssPropClassName]),
             };
             const finalComponent = as || target;
-            if ((0,_utils__WEBPACK_IMPORTED_MODULE_2__.isString)(target)) {
-                const filteredProps = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.isString)(finalComponent)
-                    ? (0,_utils__WEBPACK_IMPORTED_MODULE_2__.filterNonHtmlAttrs)(mergedProps)
+            if ((0,_react_hive_honey_utils__WEBPACK_IMPORTED_MODULE_1__.isString)(target)) {
+                const filteredProps = (0,_react_hive_honey_utils__WEBPACK_IMPORTED_MODULE_1__.isString)(finalComponent)
+                    ? (0,_utils__WEBPACK_IMPORTED_MODULE_3__.filterNonHtmlAttrs)(mergedProps)
                     : mergedProps;
                 return (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(finalComponent, filteredProps);
             }
             return (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(target, {
                 ...mergedProps,
                 ...(as && { as }),
-                ...((0,_utils__WEBPACK_IMPORTED_MODULE_2__.isStyledComponent)(target) && {
+                ...((0,_utils__WEBPACK_IMPORTED_MODULE_3__.isStyledComponent)(target) && {
                     __compositionDepth: __compositionDepth - 1,
                 }),
             });
         };
-        StyledComponent[_constants__WEBPACK_IMPORTED_MODULE_1__.HONEY_STYLED_COMPONENT_ID_PROP] = componentId;
-        if (_constants__WEBPACK_IMPORTED_MODULE_1__.__DEV__) {
-            const componentName = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.isString)(target)
+        StyledComponent[_constants__WEBPACK_IMPORTED_MODULE_2__.HONEY_STYLED_COMPONENT_ID_PROP] = componentId;
+        if (_constants__WEBPACK_IMPORTED_MODULE_2__.__DEV__) {
+            const componentName = (0,_react_hive_honey_utils__WEBPACK_IMPORTED_MODULE_1__.isString)(target)
                 ? target
                 : target.displayName || target.name || 'Component';
             StyledComponent.displayName = `HoneyStyledComponent(${componentName})`;
@@ -2629,100 +2836,34 @@ __webpack_require__.r(__webpack_exports__);
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   assert: () => (/* binding */ assert),
-/* harmony export */   boolFilter: () => (/* binding */ boolFilter),
 /* harmony export */   checkIsThemeColorValue: () => (/* binding */ checkIsThemeColorValue),
 /* harmony export */   combineClassNames: () => (/* binding */ combineClassNames),
 /* harmony export */   convertHexToHexWithAlpha: () => (/* binding */ convertHexToHexWithAlpha),
 /* harmony export */   filterNonHtmlAttrs: () => (/* binding */ filterNonHtmlAttrs),
 /* harmony export */   generateId: () => (/* binding */ generateId),
-/* harmony export */   isFunction: () => (/* binding */ isFunction),
-/* harmony export */   isNil: () => (/* binding */ isNil),
-/* harmony export */   isObject: () => (/* binding */ isObject),
-/* harmony export */   isString: () => (/* binding */ isString),
 /* harmony export */   isStyledComponent: () => (/* binding */ isStyledComponent),
 /* harmony export */   pxToRem: () => (/* binding */ pxToRem),
 /* harmony export */   resolveClassName: () => (/* binding */ resolveClassName),
 /* harmony export */   resolveColor: () => (/* binding */ resolveColor),
 /* harmony export */   resolveDimension: () => (/* binding */ resolveDimension),
 /* harmony export */   resolveFont: () => (/* binding */ resolveFont),
-/* harmony export */   resolveSpacing: () => (/* binding */ resolveSpacing),
-/* harmony export */   toKebabCase: () => (/* binding */ toKebabCase)
+/* harmony export */   resolveSpacing: () => (/* binding */ resolveSpacing)
 /* harmony export */ });
-/* 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/index.ts");
+/* harmony import */ var _react_hive_honey_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @react-hive/honey-utils */ "./node_modules/@react-hive/honey-utils/dist/index.mjs");
+/* 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/index.ts");
+
 
 
-function assert(condition, message) {
-    if (!condition) {
-        throw new Error(message);
-    }
-}
 const generateId = (prefix) => `${prefix}-${Math.random().toString(36).slice(2, 8)}`;
-const toKebabCase = (str) => str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
-const isString = (value) => typeof value === 'string';
-const isObject = (value) => typeof value === 'object';
-const isFunction = (value) => typeof value === 'function';
-/**
- * Checks if a value is null or undefined.
- *
- * @param value - The value to check.
- *
- * @returns `true` if the value is `null` or `undefined`, otherwise `false`.
- */
-const isNil = (value) => value === undefined || value === null;
-/**
- * Filters out `null`, `undefined`, and other falsy values from an array,
- * returning a typed array of only truthy `Item` values.
- *
- * Useful when working with optional or nullable items that need to be sanitized.
- *
- * @template T - The type of the items in the array.
- *
- * @param array - An array of items that may include `null`, `undefined`, or falsy values.
- *
- * @returns A new array containing only truthy `Item` values.
- */
-const boolFilter = (array) => array.filter(Boolean);
-/**
- * Generates a short, consistent hash string from an input string using a DJB2-inspired algorithm.
- *
- * This function uses a variation of the DJB2 algorithm, which is a simple yet effective hashing algorithm
- * based on bitwise XOR (`^`) and multiplication by 33. It produces a non-negative 32-bit integer,
- * which is then converted to a base-36 string (digits + lowercase letters) to produce a compact output.
- *
- * Useful for:
- * - Generating stable class names in CSS-in-JS libraries.
- * - Producing consistent cache keys.
- * - Quick and lightweight hashing needs where cryptographic security is not required.
- *
- * ⚠️ This is not cryptographically secure and should not be used for hashing passwords or sensitive data.
- *
- * @param str - The input string to hash.
- *
- * @returns A short, base-36 encoded hash string.
- *
- * @example
- * ```ts
- * const className = hashString('background-color: red;');
- * // → 'e4k1z0x'
- * ```
- */
-const hashString = (str) => {
-    let hash = 5381;
-    for (let i = 0; i < str.length; i++) {
-        hash = (hash * 33) ^ str.charCodeAt(i);
-    }
-    return (hash >>> 0).toString(36);
-};
 /**
  * Combines multiple class names into a single space-separated string
  *
  * @param classNames - Array of class names to combine
  */
 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 resolveClassName = (css) => `hscn-${(0,_react_hive_honey_utils__WEBPACK_IMPORTED_MODULE_0__.hashString)(css)}`;
+const isStyledComponent = (component) => _constants__WEBPACK_IMPORTED_MODULE_1__.HONEY_STYLED_COMPONENT_ID_PROP in component;
 /**
  * Filters out non-standard HTML attributes from a props object intended for a native HTML element.
  *
@@ -2741,7 +2882,7 @@ const isStyledComponent = (component) => _constants__WEBPACK_IMPORTED_MODULE_0__
  * @returns A new object containing only props that are safe and valid for use on native DOM elements.
  */
 const filterNonHtmlAttrs = (attrs) => Object.entries(attrs).reduce((allowedAttrs, [name, value]) => {
-    if (_constants__WEBPACK_IMPORTED_MODULE_0__.VALID_DOM_ELEMENT_ATTRS.has(name) || name.startsWith('data-') || name.startsWith('aria-')) {
+    if (_constants__WEBPACK_IMPORTED_MODULE_1__.VALID_DOM_ELEMENT_ATTRS.has(name) || name.startsWith('data-') || name.startsWith('aria-')) {
         allowedAttrs[name] = value;
     }
     return allowedAttrs;
@@ -2814,7 +2955,7 @@ const resolveSpacing = (value, unit = 'px', type = 'base') => ({ theme }) => {
  */
 const resolveFont = (fontName) => ({ theme }) => {
     const font = theme.fonts[fontName];
-    return (0,_css__WEBPACK_IMPORTED_MODULE_1__.css) `
+    return (0,_css__WEBPACK_IMPORTED_MODULE_2__.css) `
       font-family: ${font.family};
       font-size: ${pxToRem(font.size)};
       font-weight: ${font.weight};
@@ -2987,13 +3128,12 @@ __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_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 */   createAbsoluteFillAtRuleMiddleware: () => (/* reexport safe */ _css__WEBPACK_IMPORTED_MODULE_5__.createAbsoluteFillAtRuleMiddleware),
 /* harmony export */   createCenterAtRuleMiddleware: () => (/* reexport safe */ _css__WEBPACK_IMPORTED_MODULE_5__.createCenterAtRuleMiddleware),
+/* harmony export */   createEllipsisAtRuleMiddleware: () => (/* reexport safe */ _css__WEBPACK_IMPORTED_MODULE_5__.createEllipsisAtRuleMiddleware),
 /* harmony export */   createGlobalStyle: () => (/* reexport safe */ _global_style__WEBPACK_IMPORTED_MODULE_6__.createGlobalStyle),
 /* harmony export */   createInlineAtRuleMiddleware: () => (/* reexport safe */ _css__WEBPACK_IMPORTED_MODULE_5__.createInlineAtRuleMiddleware),
 /* harmony export */   createSpacingMiddleware: () => (/* reexport safe */ _css__WEBPACK_IMPORTED_MODULE_5__.createSpacingMiddleware),
@@ -3001,10 +3141,6 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   css: () => (/* reexport safe */ _css__WEBPACK_IMPORTED_MODULE_5__.css),
 /* 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),
@@ -3015,7 +3151,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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_8__.toKebabCase),
+/* harmony export */   suggestAtRuleMiddleware: () => (/* reexport safe */ _css__WEBPACK_IMPORTED_MODULE_5__.suggestAtRuleMiddleware),
 /* 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");