@shmidko61/lc-ui-kit 0.8.0 → 0.11.0

package/README.md

@@ -36,3 +36,36 @@ import { Button, Select } from '@shmidko61/lc-ui-kit';
 поэтому может потянуть `createContext`, `useState` или event handlers в RSC-граф.
 
 Примеры по компонентам: [docs/component-usage.md](./docs/component-usage.md).
+
+## Наведение и адаптивность
+
+Общие визуальные свойства доступны в `hover` у Box и компонентов на его основе:
+
+```tsx
+<Box
+  bg="#10183B"
+  hover={{ bg: '#273B7D', color: '#F4C542', transform: 'translateY(-4px)' }}
+  md={{ hover: { bg: '#294D4B' } }}
+  lg={{ hover: null }}
+  xl={{ hover: { color: '#89A4D9' } }}
+/>
+```
+
+Hover наследуется base → md (768px) → lg (1024px) → xl (1440px).
+Частичные overrides сохраняют остальные hover-свойства, включая поля рамки.
+`null` сбрасывает всё состояние к обычным стилям текущего диапазона; следующие
+breakpoints могут включить hover заново. Для сброса отдельного эффекта подходят
+обычные CSS-значения: `transform: 'none'`, `boxShadow: 'none'`, `opacity: 1`.
+
+Поддерживаются `bg`, `background`, `backgroundColor`, `color`, `border`,
+`boxShadow`, `opacity`, `transform`. Эффекты работают при
+`(hover: hover) and (pointer: fine)` и исключают `:disabled`,
+`aria-disabled="true"` и `data-disabled="true"`.
+Явный inline `style` приоритетнее hover. Плавность настраивается через
+`style.transition` или `className`.
+
+`Button.hoverBg` помечен `@deprecated`, но продолжает работать.
+Новый `hover.bg` имеет приоритет. Переход: `hoverBg={color}` →
+`hover={{ bg: color }}`. При использовании нового background в base-hover
+он наследуется на последующие breakpoints поверх старого `hoverBg`.
+Примеры доступны в Storybook: `UI Kit/Box/Hover`.

package/dist/box/box.d.ts

@@ -9,4 +9,4 @@ type BoxComponentType = {
 };
 export declare const Box: BoxComponentType;
 export type { BorderRadiusItem, BorderRadiusKeys, BorderRadiusSides, BorderWidthItem, BorderWidthSides, PositionValue, UiKitAnyIndentationMargin, UiKitAnyIndentationPadding, UiKitArrayIndentation, UiKitAspectRatioProps, UiKitAspectRatioValue, UiKitAxisIndentationMargin, UiKitAxisIndentationPadding, UiKitBackgroundProps, UiKitBorderColor, UiKitBorderProps, UiKitBorderRadius, UiKitBorderWidth, UiKitBoxShadowProps, UiKitBoxShadowValue, UiKitColorProps, UiKitColorValue, UiKitCursorProps, UiKitDimensionProps, UiKitDisplayProps, UiKitIndentations, UiKitIndentationsProps, UiKitListStyleProps, UiKitMarginArrayIndentation, UiKitMarginIndentation, UiKitMixedXAxisIndentationMargin, UiKitMixedXAxisIndentationPadding, UiKitMixedYAxisIndentationMargin, UiKitMixedYAxisIndentationPadding, UiKitOpacityProps, UiKitOpacityValue, UiKitOutlineProps, UiKitOverflowProps, UiKitOverflowValue, UiKitPointerEventsProps, UiKitPointerEventsValue, UiKitPositionProps, UiKitTransformOriginValue, UiKitTransformProps, UiKitTransformValue, } from '../types';
-export type { BoxAs, BoxBackgroundValue, BoxBreakpointProps, BoxComponentProps, BoxProps, } from './box.types';
+export type { BoxAs, BoxBackgroundValue, BoxBreakpointProps, BoxComponentProps, BoxProps, HoverStyleProps, } from './box.types';

package/dist/box/box.types.d.ts

@@ -35,7 +35,20 @@ export type BoxOwnStyleProps = {
 /**
  * Набор props для одного responsive-состояния.
  */
-export type BoxBreakpointProps = BoxStyleProps & BoxOwnStyleProps;
+export type BoxBreakpointProps = BoxStyleProps & BoxOwnStyleProps & {
+    /**
+     * Визуальные свойства при наведении точного указателя. Частичные overrides
+     * наследуются base → md → lg → xl. `null` сбрасывает весь унаследованный
+     * hover; следующие breakpoint-объекты могут включить его заново.
+     */
+    hover?: HoverStyleProps | null;
+};
+/**
+ * Визуальные hover-свойства без размеров и вложенных breakpoints.
+ * Частичный border сохраняет остальные параметры обычной рамки.
+ * Явный element-level `style` приоритетнее hover, disabled не реагирует.
+ */
+export type HoverStyleProps = Pick<BoxStyleProps & BoxOwnStyleProps, 'bg' | 'background' | 'backgroundColor' | 'color' | 'border' | 'boxShadow' | 'opacity' | 'transform'>;
 /**
  * Responsive overrides Box.
  */

package/dist/box.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const eo=require("react/jsx-runtime"),ro=require("react"),D=require("./responsive-style.config-B2m9jVlX.cjs");function no({background:t,backgroundColor:o,bg:i,bgSize:d,bgRepeat:a,bgPosition:u,border:v,boxShadow:f,color:b,cursor:m,opacity:c,overflow:s,overflowX:p,overflowY:x,pointerEvents:R,aspectRatio:g,transform:k,transformOrigin:S,p:G,m:H,outlineColor:z,outlineWidth:W,outlineOffset:C,outlineStyle:T,listStyle:h,display:L,position:n,width:N,maxWidth:V,minWidth:P,height:w,maxHeight:j,minHeight:I}){const e={};return i!==void 0?xo(e,i):t!==void 0&&(e.background=A(t)),o!==void 0&&(e.backgroundColor=A(o)),d!==void 0&&(e.backgroundSize=vo(d)),a!==void 0&&(e.backgroundRepeat=Bo(a)),u!==void 0&&(e.backgroundPosition=yo(u)),bo(e,v),f!==void 0&&(e.boxShadow=l(f)),b!==void 0&&(e.color=l(b)),m!==void 0&&(e.cursor=m),c!==void 0&&(e.opacity=typeof c=="number"?c:l(c)),s!==void 0&&(e.overflowX=s,e.overflowY=s),p!==void 0&&(e.overflowX=p),x!==void 0&&(e.overflowY=x),R!==void 0&&(e.pointerEvents=R),g!==void 0&&(e.aspectRatio=typeof g=="number"?String(g):l(g)),k!==void 0&&(e.transform=l(k)),S!==void 0&&(e.transformOrigin=l(S)),so(e,G),lo(e,H),z!==void 0&&(e.outlineColor=l(z)),W!==void 0&&(e.outlineWidth=W),C!==void 0&&(e.outlineOffset=C),T!==void 0&&(e.outlineStyle=T),h?.position!==void 0&&(e.listStylePosition=h.position),h?.type!==void 0&&(e.listStyleType=h.type),L!==void 0&&(e.display=$o(L)),n?.type!==void 0&&(e.position=n.type),n?.top!==void 0&&(e.top=O(n.top)),n?.left!==void 0&&(e.left=O(n.left)),n?.right!==void 0&&(e.right=O(n.right)),n?.bottom!==void 0&&(e.bottom=O(n.bottom)),n?.zIndex!==void 0&&(e.zIndex=n.zIndex),N!==void 0&&(e.width=$(N)),V!==void 0&&(e.maxWidth=$(V)),P!==void 0&&(e.minWidth=$(P)),w!==void 0&&(e.height=$(w)),j!==void 0&&(e.maxHeight=$(j)),I!==void 0&&(e.minHeight=$(I)),Object.keys(e).length>0?e:void 0}function fo(t){const o=[],i={},d=t.groupParent===!0;Y(t,o,i,"","",d);for(const a of D.responsiveBreakpoints){const u=t[a];u&&Y(u,o,i,`${a}:`,`${a}-`,d)}return{className:o.join(" "),style:Object.keys(i).length>0?i:void 0}}function Y(t,o,i,d="",a="",u=!1){const v=no(t);for(const[f,b]of Object.entries(v??{})){if(b==null)continue;const m=String(b),c=ao(f,m);if(c){o.push(`${d}${c}`);continue}const s=`${a}${co(f)}`,p=uo(f,s);p&&(i[`--${s}`]=m,o.push(`${d}${p}`))}if(t.bgGroup!==void 0){const f=`${a}group-background`;i[`--${f}`]=A(t.bgGroup),o.push(`${d}group-hover:[background:var(--${f})]`),u&&o.push(`${d}hover:[background:var(--${f})]`)}}function ao(t,o){if(t==="display")return o==="none"?"hidden":o;if(t==="position")return o==="inherit"?"[position:inherit]":o;if(t==="cursor")return`cursor-${o}`;if(t==="backgroundRepeat")return{"no-repeat":"bg-no-repeat",repeat:"bg-repeat",round:"bg-repeat-round",space:"bg-repeat-space","repeat-x":"bg-repeat-x","repeat-y":"bg-repeat-y"}[o];if(t==="backgroundSize")return{auto:"bg-auto",contain:"bg-contain",cover:"bg-cover"}[o];if(t==="backgroundPosition")return{bottom:"bg-bottom",center:"bg-center",left:"bg-left","left bottom":"bg-left-bottom","left top":"bg-left-top",right:"bg-right","right bottom":"bg-right-bottom","right top":"bg-right-top",top:"bg-top"}[o];if(t==="borderStyle")return o==="none"?"border-none":`border-${o}`;if(t==="outlineStyle")return o==="none"?"outline-none":`outline-${o}`;if(t==="listStylePosition")return`list-${o}`;if(t==="listStyleType")return`list-${o}`}function uo(t,o){const i=`var(--${o})`;return{background:`[background:${i}]`,backgroundColor:`bg-[${i}]`,backgroundPosition:`bg-[position:${i}]`,backgroundSize:`bg-[length:${i}]`,aspectRatio:`[aspect-ratio:${i}]`,borderBottomLeftRadius:`rounded-bl-[${i}]`,borderBottomRightRadius:`rounded-br-[${i}]`,borderBottomWidth:`border-b-[length:${i}]`,borderColor:`border-[color:${i}]`,borderLeftWidth:`border-l-[length:${i}]`,borderRadius:`rounded-[${i}]`,borderRightWidth:`border-r-[length:${i}]`,borderTopLeftRadius:`rounded-tl-[${i}]`,borderTopRightRadius:`rounded-tr-[${i}]`,borderTopWidth:`border-t-[length:${i}]`,borderWidth:`border-[length:${i}]`,boxShadow:`[box-shadow:${i}]`,bottom:`bottom-[${i}]`,color:`[color:${i}]`,height:`h-[${i}]`,left:`left-[${i}]`,margin:`m-[${i}]`,marginBottom:`mb-[${i}]`,marginLeft:`ml-[${i}]`,marginRight:`mr-[${i}]`,marginTop:`mt-[${i}]`,maxHeight:`max-h-[${i}]`,maxWidth:`max-w-[${i}]`,minHeight:`min-h-[${i}]`,minWidth:`min-w-[${i}]`,outlineColor:`outline-[color:${i}]`,outlineOffset:`outline-offset-[${i}]`,outlineWidth:`outline-[length:${i}]`,opacity:`[opacity:${i}]`,overflowX:`[overflow-x:${i}]`,overflowY:`[overflow-y:${i}]`,padding:`p-[${i}]`,paddingBottom:`pb-[${i}]`,paddingLeft:`pl-[${i}]`,paddingRight:`pr-[${i}]`,paddingTop:`pt-[${i}]`,pointerEvents:`[pointer-events:${i}]`,right:`right-[${i}]`,top:`top-[${i}]`,transform:`[transform:${i}]`,transformOrigin:`[transform-origin:${i}]`,width:`w-[${i}]`,zIndex:`z-[${i}]`}[t]}function co(t){return t.replace(/[A-Z]/g,o=>`-${o.toLowerCase()}`)}function so(t,o){if(o!==void 0){if(Array.isArray(o)){t.padding=o.map(r).join(" ");return}if(typeof o!="object"){t.padding=r(o);return}"px"in o&&o.px!==void 0&&(t.paddingLeft=r(o.px),t.paddingRight=r(o.px)),"py"in o&&o.py!==void 0&&(t.paddingTop=r(o.py),t.paddingBottom=r(o.py)),"pt"in o&&o.pt!==void 0&&(t.paddingTop=r(o.pt)),"pb"in o&&o.pb!==void 0&&(t.paddingBottom=r(o.pb)),"pl"in o&&o.pl!==void 0&&(t.paddingLeft=r(o.pl)),"pr"in o&&o.pr!==void 0&&(t.paddingRight=r(o.pr))}}function lo(t,o){if(o!==void 0){if(Array.isArray(o)){t.margin=o.map(r).join(" ");return}if(typeof o!="object"){t.margin=r(o);return}"mx"in o&&o.mx!==void 0&&(t.marginLeft=r(o.mx),t.marginRight=r(o.mx)),"my"in o&&o.my!==void 0&&(t.marginTop=r(o.my),t.marginBottom=r(o.my)),"mt"in o&&o.mt!==void 0&&(t.marginTop=r(o.mt)),"mb"in o&&o.mb!==void 0&&(t.marginBottom=r(o.mb)),"ml"in o&&o.ml!==void 0&&(t.marginLeft=r(o.ml)),"mr"in o&&o.mr!==void 0&&(t.marginRight=r(o.mr))}}function bo(t,o){o&&(o.radius!==void 0&&mo(t,o.radius),o.color!==void 0&&(t.borderColor=l(o.color)),o.width!==void 0&&po(t,o.width),o.style!==void 0&&(t.borderStyle=o.style))}function mo(t,o){if(go(o)){o.topLeft!==void 0&&(t.borderTopLeftRadius=B(o.topLeft)),o.topRight!==void 0&&(t.borderTopRightRadius=B(o.topRight)),o.bottomLeft!==void 0&&(t.borderBottomLeftRadius=B(o.bottomLeft)),o.bottomRight!==void 0&&(t.borderBottomRightRadius=B(o.bottomRight));return}t.borderRadius=B(o)}function po(t,o){if(ho(o)){o.top!==void 0&&(t.borderTopWidth=y(o.top)),o.bottom!==void 0&&(t.borderBottomWidth=y(o.bottom)),o.left!==void 0&&(t.borderLeftWidth=y(o.left)),o.right!==void 0&&(t.borderRightWidth=y(o.right));return}t.borderWidth=y(o)}function go(t){return typeof t=="object"}function ho(t){return typeof t=="object"}function B(t){return t.startsWith("--")?`var(${t})`:t}function y(t){return t.startsWith("--")?`var(${t})`:t}function $o(t){return t==="hidden"?"none":t}function O(t){return typeof t=="number"?`${t}px`:t}function r(t){return typeof t=="number"?`${t}px`:t}function $(t){return typeof t=="number"?`${t}px`:t}function vo(t){return typeof t=="number"?`${t}px`:t}function Bo(t){return{"no-repeat":"no-repeat",repeat:"repeat","repeat-round":"round","repeat-space":"space","repeat-x":"repeat-x","repeat-y":"repeat-y"}[t]}function yo(t){return t.replace("-"," ")}function A(t){return l(t)}function xo(t,o){const i=A(o);if(Ro(o)){t.background=i;return}t.backgroundColor=i}function Ro(t){const o=t.trim().toLowerCase();return o.includes("url(")||o.includes("gradient(")||o.includes("image-set(")||o.includes("cross-fade(")||o.includes("element(")||o.includes("paint(")}function l(t){return t.startsWith("--")?`var(${t})`:t}function ko(t,o){const{as:i,children:d,className:a,background:u,backgroundColor:v,bg:f,bgSize:b,bgRepeat:m,bgGroup:c,groupParent:s,bgPosition:p,border:x,boxShadow:R,color:g,cursor:k,opacity:S,overflow:G,overflowX:H,overflowY:z,pointerEvents:W,aspectRatio:C,transform:T,transformOrigin:h,p:L,m:n,outlineColor:N,outlineWidth:V,outlineOffset:P,outlineStyle:w,listStyle:j,display:I,position:e,width:E,maxWidth:M,minWidth:K,height:Z,maxHeight:_,minHeight:F,md:J,lg:Q,xl:U,style:X,...oo}=t,to=i??"div",q=fo({background:u,backgroundColor:v,bg:f,bgSize:b,bgRepeat:m,bgGroup:c,groupParent:s,bgPosition:p,border:x,boxShadow:R,color:g,cursor:k,opacity:S,overflow:G,overflowX:H,overflowY:z,pointerEvents:W,aspectRatio:C,transform:T,transformOrigin:h,p:L,m:n,outlineColor:N,outlineWidth:V,outlineOffset:P,outlineStyle:w,listStyle:j,display:I,position:e,width:E,maxWidth:M,minWidth:K,height:Z,maxHeight:_,minHeight:F,md:J,lg:Q,xl:U}),io=q.style||X?{...q.style,...X}:void 0;return eo.jsx(to,{className:D.cn(q.className,s&&"group",a),ref:o,style:io,...oo,children:d})}const So=ro.forwardRef(ko);exports.Box=So;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const so=require("react/jsx-runtime"),fo=require("react"),x=require("./responsive-style.config-B2m9jVlX.cjs");function D({background:t,backgroundColor:o,bg:i,bgSize:d,bgRepeat:a,bgPosition:f,border:c,boxShadow:n,color:r,cursor:g,opacity:u,overflow:b,overflowX:p,overflowY:v,pointerEvents:B,aspectRatio:m,transform:y,transformOrigin:h,p:E,m:G,outlineColor:z,outlineWidth:C,outlineOffset:T,outlineStyle:L,listStyle:k,display:P,position:l,width:w,maxWidth:N,minWidth:V,height:j,maxHeight:I,minHeight:O}){const e={};return i!==void 0?So(e,i):t!==void 0&&(e.background=A(t)),o!==void 0&&(e.backgroundColor=A(o)),d!==void 0&&(e.backgroundSize=ko(d)),a!==void 0&&(e.backgroundRepeat=Ro(a)),f!==void 0&&(e.backgroundPosition=xo(f)),go(e,c),n!==void 0&&(e.boxShadow=$(n)),r!==void 0&&(e.color=$(r)),g!==void 0&&(e.cursor=g),u!==void 0&&(e.opacity=typeof u=="number"?u:$(u)),b!==void 0&&(e.overflowX=b,e.overflowY=b),p!==void 0&&(e.overflowX=p),v!==void 0&&(e.overflowY=v),B!==void 0&&(e.pointerEvents=B),m!==void 0&&(e.aspectRatio=typeof m=="number"?String(m):$(m)),y!==void 0&&(e.transform=$(y)),h!==void 0&&(e.transformOrigin=$(h)),po(e,E),mo(e,G),z!==void 0&&(e.outlineColor=$(z)),C!==void 0&&(e.outlineWidth=C),T!==void 0&&(e.outlineOffset=T),L!==void 0&&(e.outlineStyle=L),k?.position!==void 0&&(e.listStylePosition=k.position),k?.type!==void 0&&(e.listStyleType=k.type),P!==void 0&&(e.display=yo(P)),l?.type!==void 0&&(e.position=l.type),l?.top!==void 0&&(e.top=H(l.top)),l?.left!==void 0&&(e.left=H(l.left)),l?.right!==void 0&&(e.right=H(l.right)),l?.bottom!==void 0&&(e.bottom=H(l.bottom)),l?.zIndex!==void 0&&(e.zIndex=l.zIndex),w!==void 0&&(e.width=R(w)),N!==void 0&&(e.maxWidth=R(N)),V!==void 0&&(e.minWidth=R(V)),j!==void 0&&(e.height=R(j)),I!==void 0&&(e.maxHeight=R(I)),O!==void 0&&(e.minHeight=R(O)),Object.keys(e).length>0?e:void 0}function uo(t){const o=[],i={},d=t.groupParent===!0;_(t,o,i,"","",d);for(const a of x.responsiveBreakpoints){const f=t[a];f&&_(f,o,i,`${a}:`,`${a}-`,d)}return co(t,o,i),{className:o.join(" "),style:Object.keys(i).length>0?i:void 0}}function co(t,o,i){const d=[t,...x.responsiveBreakpoints.map(n=>t[n]??{})],a=new Set;for(const n of d)n.hover===null&&a.add("backgroundColor"),Object.keys(X(n.hover??{})).forEach(r=>a.add(r));if(a.size===0)return;let f={},c={};d.forEach((n,r)=>{f={...f,...X(n)},n.hover===null?c={}:c={...c,...X(n.hover??{})};const g=r===0?"":`${x.responsiveBreakpoints[r-1]}:`;for(const u of a){const b=M(u),p=`--hover-${r}-${b}`,v=u==="color"?"inherit":"initial";let B=`var(--button-bg,${v})`,m=`var(--button-color,${v})`;for(let h=0;h<r;h+=1)B=`var(--${x.responsiveBreakpoints[h]}-button-bg,${B})`,m=`var(--${x.responsiveBreakpoints[h]}-button-color,${m})`;const y=u==="background"||u==="backgroundColor"?B:u==="color"?m:v;i[p]=String(c[u]??f[u]??y),o.push(`${g}[@media(hover:hover)_and_(pointer:fine)]:[&:hover:not(:disabled):not([aria-disabled=true]):not([data-disabled=true])]:[${b}:var(${p})]`)}})}function X(t){const o={...D(t)};if(o.borderWidth!==void 0){const i=String(o.borderWidth).split(/\s+(?![^()]*\))/),d=i[0],a=i[1]??d,f=i[2]??d,c=i[3]??a;Object.assign(o,{borderTopWidth:d,borderRightWidth:a,borderBottomWidth:f,borderLeftWidth:c}),delete o.borderWidth}if(o.borderRadius!==void 0){const[i,d=i]=String(o.borderRadius).split("/"),a=n=>{const r=n.trim().split(/\s+(?![^()]*\))/);return[r[0],r[1]??r[0],r[2]??r[0],r[3]??r[1]??r[0]]},f=a(i),c=a(d);["TopLeft","TopRight","BottomRight","BottomLeft"].forEach((n,r)=>{o[`border${n}Radius`]=`${f[r]} ${c[r]}`}),delete o.borderRadius}return o}function _(t,o,i,d="",a="",f=!1){const c=D(t);for(const[n,r]of Object.entries(c??{})){if(r==null)continue;const g=String(r),u=lo(n,g);if(u){o.push(`${d}${u}`);continue}const b=`${a}${M(n)}`,p=bo(n,b);p&&(i[`--${b}`]=g,o.push(`${d}${p}`))}if(t.bgGroup!==void 0){const n=`${a}group-background`;i[`--${n}`]=A(t.bgGroup),o.push(`${d}group-hover:[background:var(--${n})]`),f&&o.push(`${d}hover:[background:var(--${n})]`)}}function lo(t,o){if(t==="display")return o==="none"?"hidden":o;if(t==="position")return o==="inherit"?"[position:inherit]":o;if(t==="cursor")return`cursor-${o}`;if(t==="backgroundRepeat")return{"no-repeat":"bg-no-repeat",repeat:"bg-repeat",round:"bg-repeat-round",space:"bg-repeat-space","repeat-x":"bg-repeat-x","repeat-y":"bg-repeat-y"}[o];if(t==="backgroundSize")return{auto:"bg-auto",contain:"bg-contain",cover:"bg-cover"}[o];if(t==="backgroundPosition")return{bottom:"bg-bottom",center:"bg-center",left:"bg-left","left bottom":"bg-left-bottom","left top":"bg-left-top",right:"bg-right","right bottom":"bg-right-bottom","right top":"bg-right-top",top:"bg-top"}[o];if(t==="borderStyle")return o==="none"?"border-none":`border-${o}`;if(t==="outlineStyle")return o==="none"?"outline-none":`outline-${o}`;if(t==="listStylePosition")return`list-${o}`;if(t==="listStyleType")return`list-${o}`}function bo(t,o){const i=`var(--${o})`;return{background:`[background:${i}]`,backgroundColor:`bg-[${i}]`,backgroundPosition:`bg-[position:${i}]`,backgroundSize:`bg-[length:${i}]`,aspectRatio:`[aspect-ratio:${i}]`,borderBottomLeftRadius:`rounded-bl-[${i}]`,borderBottomRightRadius:`rounded-br-[${i}]`,borderBottomWidth:`border-b-[length:${i}]`,borderColor:`border-[color:${i}]`,borderLeftWidth:`border-l-[length:${i}]`,borderRadius:`rounded-[${i}]`,borderRightWidth:`border-r-[length:${i}]`,borderTopLeftRadius:`rounded-tl-[${i}]`,borderTopRightRadius:`rounded-tr-[${i}]`,borderTopWidth:`border-t-[length:${i}]`,borderWidth:`border-[length:${i}]`,boxShadow:`[box-shadow:${i}]`,bottom:`bottom-[${i}]`,color:`[color:${i}]`,height:`h-[${i}]`,left:`left-[${i}]`,margin:`m-[${i}]`,marginBottom:`mb-[${i}]`,marginLeft:`ml-[${i}]`,marginRight:`mr-[${i}]`,marginTop:`mt-[${i}]`,maxHeight:`max-h-[${i}]`,maxWidth:`max-w-[${i}]`,minHeight:`min-h-[${i}]`,minWidth:`min-w-[${i}]`,outlineColor:`outline-[color:${i}]`,outlineOffset:`outline-offset-[${i}]`,outlineWidth:`outline-[length:${i}]`,opacity:`[opacity:${i}]`,overflowX:`[overflow-x:${i}]`,overflowY:`[overflow-y:${i}]`,padding:`p-[${i}]`,paddingBottom:`pb-[${i}]`,paddingLeft:`pl-[${i}]`,paddingRight:`pr-[${i}]`,paddingTop:`pt-[${i}]`,pointerEvents:`[pointer-events:${i}]`,right:`right-[${i}]`,top:`top-[${i}]`,transform:`[transform:${i}]`,transformOrigin:`[transform-origin:${i}]`,width:`w-[${i}]`,zIndex:`z-[${i}]`}[t]}function M(t){return t.replace(/[A-Z]/g,o=>`-${o.toLowerCase()}`)}function po(t,o){if(o!==void 0){if(Array.isArray(o)){t.padding=o.map(s).join(" ");return}if(typeof o!="object"){t.padding=s(o);return}"px"in o&&o.px!==void 0&&(t.paddingLeft=s(o.px),t.paddingRight=s(o.px)),"py"in o&&o.py!==void 0&&(t.paddingTop=s(o.py),t.paddingBottom=s(o.py)),"pt"in o&&o.pt!==void 0&&(t.paddingTop=s(o.pt)),"pb"in o&&o.pb!==void 0&&(t.paddingBottom=s(o.pb)),"pl"in o&&o.pl!==void 0&&(t.paddingLeft=s(o.pl)),"pr"in o&&o.pr!==void 0&&(t.paddingRight=s(o.pr))}}function mo(t,o){if(o!==void 0){if(Array.isArray(o)){t.margin=o.map(s).join(" ");return}if(typeof o!="object"){t.margin=s(o);return}"mx"in o&&o.mx!==void 0&&(t.marginLeft=s(o.mx),t.marginRight=s(o.mx)),"my"in o&&o.my!==void 0&&(t.marginTop=s(o.my),t.marginBottom=s(o.my)),"mt"in o&&o.mt!==void 0&&(t.marginTop=s(o.mt)),"mb"in o&&o.mb!==void 0&&(t.marginBottom=s(o.mb)),"ml"in o&&o.ml!==void 0&&(t.marginLeft=s(o.ml)),"mr"in o&&o.mr!==void 0&&(t.marginRight=s(o.mr))}}function go(t,o){o&&(o.radius!==void 0&&ho(t,o.radius),o.color!==void 0&&(t.borderColor=$(o.color)),o.width!==void 0&&$o(t,o.width),o.style!==void 0&&(t.borderStyle=o.style))}function ho(t,o){if(vo(o)){o.topLeft!==void 0&&(t.borderTopLeftRadius=S(o.topLeft)),o.topRight!==void 0&&(t.borderTopRightRadius=S(o.topRight)),o.bottomLeft!==void 0&&(t.borderBottomLeftRadius=S(o.bottomLeft)),o.bottomRight!==void 0&&(t.borderBottomRightRadius=S(o.bottomRight));return}t.borderRadius=S(o)}function $o(t,o){if(Bo(o)){o.top!==void 0&&(t.borderTopWidth=W(o.top)),o.bottom!==void 0&&(t.borderBottomWidth=W(o.bottom)),o.left!==void 0&&(t.borderLeftWidth=W(o.left)),o.right!==void 0&&(t.borderRightWidth=W(o.right));return}t.borderWidth=W(o)}function vo(t){return typeof t=="object"}function Bo(t){return typeof t=="object"}function S(t){return t.startsWith("--")?`var(${t})`:t}function W(t){return t.startsWith("--")?`var(${t})`:t}function yo(t){return t==="hidden"?"none":t}function H(t){return typeof t=="number"?`${t}px`:t}function s(t){return typeof t=="number"?`${t}px`:t}function R(t){return typeof t=="number"?`${t}px`:t}function ko(t){return typeof t=="number"?`${t}px`:t}function Ro(t){return{"no-repeat":"no-repeat",repeat:"repeat","repeat-round":"round","repeat-space":"space","repeat-x":"repeat-x","repeat-y":"repeat-y"}[t]}function xo(t){return t.replace("-"," ")}function A(t){return $(t)}function So(t,o){const i=A(o);if(Wo(o)){t.background=i;return}t.backgroundColor=i}function Wo(t){const o=t.trim().toLowerCase();return o.includes("url(")||o.includes("gradient(")||o.includes("image-set(")||o.includes("cross-fade(")||o.includes("element(")||o.includes("paint(")}function $(t){return t.startsWith("--")?`var(${t})`:t}function zo(t,o){const{as:i,children:d,className:a,background:f,backgroundColor:c,bg:n,bgSize:r,bgRepeat:g,bgGroup:u,groupParent:b,bgPosition:p,border:v,boxShadow:B,color:m,cursor:y,opacity:h,overflow:E,overflowX:G,overflowY:z,pointerEvents:C,aspectRatio:T,transform:L,transformOrigin:k,p:P,m:l,outlineColor:w,outlineWidth:N,outlineOffset:V,outlineStyle:j,listStyle:I,display:O,position:e,width:F,maxWidth:K,minWidth:Z,height:J,hover:Q,maxHeight:U,minHeight:oo,md:to,lg:io,xl:eo,style:Y,...ro}=t,no=i??"div",q=uo({hover:Q,background:f,backgroundColor:c,bg:n,bgSize:r,bgRepeat:g,bgGroup:u,groupParent:b,bgPosition:p,border:v,boxShadow:B,color:m,cursor:y,opacity:h,overflow:E,overflowX:G,overflowY:z,pointerEvents:C,aspectRatio:T,transform:L,transformOrigin:k,p:P,m:l,outlineColor:w,outlineWidth:N,outlineOffset:V,outlineStyle:j,listStyle:I,display:O,position:e,width:F,maxWidth:K,minWidth:Z,height:J,maxHeight:U,minHeight:oo,md:to,lg:io,xl:eo}),ao=q.style||Y?{...q.style,...Y}:void 0;return so.jsx(no,{className:x.cn(q.className,b&&"group",a),ref:o,style:ao,...ro,children:d})}const Co=fo.forwardRef(zo);exports.Box=Co;

package/dist/box.js

@@ -1,51 +1,51 @@
-import { jsx as io } from "react/jsx-runtime";
-import { forwardRef as eo } from "react";
-import { a as ro, c as no } from "./responsive-style.config-DFuATrIM.js";
-function fo({
+import { jsx as fo } from "react/jsx-runtime";
+import { forwardRef as so } from "react";
+import { a as W, c as uo } from "./responsive-style.config-DFuATrIM.js";
+function F({
   background: t,
   backgroundColor: o,
   bg: i,
   bgSize: d,
   bgRepeat: a,
-  bgPosition: u,
-  border: v,
-  boxShadow: f,
-  color: b,
-  cursor: m,
-  opacity: c,
-  overflow: s,
-  overflowX: p,
-  overflowY: x,
-  pointerEvents: R,
-  aspectRatio: g,
-  transform: k,
-  transformOrigin: S,
-  p: G,
-  m: H,
+  bgPosition: s,
+  border: c,
+  boxShadow: n,
+  color: e,
+  cursor: g,
+  opacity: u,
+  overflow: b,
+  overflowX: m,
+  overflowY: v,
+  pointerEvents: B,
+  aspectRatio: p,
+  transform: y,
+  transformOrigin: h,
+  p: E,
+  m: G,
   outlineColor: z,
-  outlineWidth: W,
-  outlineOffset: C,
-  outlineStyle: T,
-  listStyle: h,
-  display: L,
-  position: n,
-  width: N,
-  maxWidth: V,
-  minWidth: w,
-  height: P,
+  outlineWidth: C,
+  outlineOffset: T,
+  outlineStyle: L,
+  listStyle: R,
+  display: P,
+  position: l,
+  width: w,
+  maxWidth: N,
+  minWidth: V,
+  height: j,
   maxHeight: I,
-  minHeight: j
+  minHeight: O
 }) {
-  const e = {};
-  return i !== void 0 ? Ro(e, i) : t !== void 0 && (e.background = A(t)), o !== void 0 && (e.backgroundColor = A(o)), d !== void 0 && (e.backgroundSize = Bo(d)), a !== void 0 && (e.backgroundRepeat = yo(a)), u !== void 0 && (e.backgroundPosition = xo(u)), mo(e, v), f !== void 0 && (e.boxShadow = l(f)), b !== void 0 && (e.color = l(b)), m !== void 0 && (e.cursor = m), c !== void 0 && (e.opacity = typeof c == "number" ? c : l(c)), s !== void 0 && (e.overflowX = s, e.overflowY = s), p !== void 0 && (e.overflowX = p), x !== void 0 && (e.overflowY = x), R !== void 0 && (e.pointerEvents = R), g !== void 0 && (e.aspectRatio = typeof g == "number" ? String(g) : l(g)), k !== void 0 && (e.transform = l(k)), S !== void 0 && (e.transformOrigin = l(S)), lo(e, G), bo(e, H), z !== void 0 && (e.outlineColor = l(z)), W !== void 0 && (e.outlineWidth = W), C !== void 0 && (e.outlineOffset = C), T !== void 0 && (e.outlineStyle = T), h?.position !== void 0 && (e.listStylePosition = h.position), h?.type !== void 0 && (e.listStyleType = h.type), L !== void 0 && (e.display = vo(L)), n?.type !== void 0 && (e.position = n.type), n?.top !== void 0 && (e.top = O(n.top)), n?.left !== void 0 && (e.left = O(n.left)), n?.right !== void 0 && (e.right = O(n.right)), n?.bottom !== void 0 && (e.bottom = O(n.bottom)), n?.zIndex !== void 0 && (e.zIndex = n.zIndex), N !== void 0 && (e.width = $(N)), V !== void 0 && (e.maxWidth = $(V)), w !== void 0 && (e.minWidth = $(w)), P !== void 0 && (e.height = $(P)), I !== void 0 && (e.maxHeight = $(I)), j !== void 0 && (e.minHeight = $(j)), Object.keys(e).length > 0 ? e : void 0;
+  const r = {};
+  return i !== void 0 ? Wo(r, i) : t !== void 0 && (r.background = A(t)), o !== void 0 && (r.backgroundColor = A(o)), d !== void 0 && (r.backgroundSize = ko(d)), a !== void 0 && (r.backgroundRepeat = xo(a)), s !== void 0 && (r.backgroundPosition = So(s)), ho(r, c), n !== void 0 && (r.boxShadow = $(n)), e !== void 0 && (r.color = $(e)), g !== void 0 && (r.cursor = g), u !== void 0 && (r.opacity = typeof u == "number" ? u : $(u)), b !== void 0 && (r.overflowX = b, r.overflowY = b), m !== void 0 && (r.overflowX = m), v !== void 0 && (r.overflowY = v), B !== void 0 && (r.pointerEvents = B), p !== void 0 && (r.aspectRatio = typeof p == "number" ? String(p) : $(p)), y !== void 0 && (r.transform = $(y)), h !== void 0 && (r.transformOrigin = $(h)), po(r, E), go(r, G), z !== void 0 && (r.outlineColor = $(z)), C !== void 0 && (r.outlineWidth = C), T !== void 0 && (r.outlineOffset = T), L !== void 0 && (r.outlineStyle = L), R?.position !== void 0 && (r.listStylePosition = R.position), R?.type !== void 0 && (r.listStyleType = R.type), P !== void 0 && (r.display = Ro(P)), l?.type !== void 0 && (r.position = l.type), l?.top !== void 0 && (r.top = H(l.top)), l?.left !== void 0 && (r.left = H(l.left)), l?.right !== void 0 && (r.right = H(l.right)), l?.bottom !== void 0 && (r.bottom = H(l.bottom)), l?.zIndex !== void 0 && (r.zIndex = l.zIndex), w !== void 0 && (r.width = k(w)), N !== void 0 && (r.maxWidth = k(N)), V !== void 0 && (r.minWidth = k(V)), j !== void 0 && (r.height = k(j)), I !== void 0 && (r.maxHeight = k(I)), O !== void 0 && (r.minHeight = k(O)), Object.keys(r).length > 0 ? r : void 0;
 }
-function ao(t) {
+function co(t) {
   const o = [], i = {}, d = t.groupParent === !0;
-  D(t, o, i, "", "", d);
-  for (const a of ro) {
-    const u = t[a];
-    u && D(
-      u,
+  _(t, o, i, "", "", d);
+  for (const a of W) {
+    const s = t[a];
+    s && _(
+      s,
       o,
       i,
       `${a}:`,
@@ -53,30 +53,78 @@ function ao(t) {
       d
     );
   }
-  return {
+  return lo(t, o, i), {
     className: o.join(" "),
     style: Object.keys(i).length > 0 ? i : void 0
   };
 }
-function D(t, o, i, d = "", a = "", u = !1) {
-  const v = fo(t);
-  for (const [f, b] of Object.entries(v ?? {})) {
-    if (b == null)
+function lo(t, o, i) {
+  const d = [t, ...W.map((n) => t[n] ?? {})], a = /* @__PURE__ */ new Set();
+  for (const n of d)
+    n.hover === null && a.add("backgroundColor"), Object.keys(Y(n.hover ?? {})).forEach((e) => a.add(e));
+  if (a.size === 0) return;
+  let s = {}, c = {};
+  d.forEach((n, e) => {
+    s = { ...s, ...Y(n) }, n.hover === null ? c = {} : c = { ...c, ...Y(n.hover ?? {}) };
+    const g = e === 0 ? "" : `${W[e - 1]}:`;
+    for (const u of a) {
+      const b = K(u), m = `--hover-${e}-${b}`, v = u === "color" ? "inherit" : "initial";
+      let B = `var(--button-bg,${v})`, p = `var(--button-color,${v})`;
+      for (let h = 0; h < e; h += 1)
+        B = `var(--${W[h]}-button-bg,${B})`, p = `var(--${W[h]}-button-color,${p})`;
+      const y = u === "background" || u === "backgroundColor" ? B : u === "color" ? p : v;
+      i[m] = String(c[u] ?? s[u] ?? y), o.push(
+        `${g}[@media(hover:hover)_and_(pointer:fine)]:[&:hover:not(:disabled):not([aria-disabled=true]):not([data-disabled=true])]:[${b}:var(${m})]`
+      );
+    }
+  });
+}
+function Y(t) {
+  const o = { ...F(t) };
+  if (o.borderWidth !== void 0) {
+    const i = String(o.borderWidth).split(/\s+(?![^()]*\))/), d = i[0], a = i[1] ?? d, s = i[2] ?? d, c = i[3] ?? a;
+    Object.assign(o, {
+      borderTopWidth: d,
+      borderRightWidth: a,
+      borderBottomWidth: s,
+      borderLeftWidth: c
+    }), delete o.borderWidth;
+  }
+  if (o.borderRadius !== void 0) {
+    const [i, d = i] = String(o.borderRadius).split("/"), a = (n) => {
+      const e = n.trim().split(/\s+(?![^()]*\))/);
+      return [
+        e[0],
+        e[1] ?? e[0],
+        e[2] ?? e[0],
+        e[3] ?? e[1] ?? e[0]
+      ];
+    }, s = a(i), c = a(d);
+    ["TopLeft", "TopRight", "BottomRight", "BottomLeft"].forEach((n, e) => {
+      o[`border${n}Radius`] = `${s[e]} ${c[e]}`;
+    }), delete o.borderRadius;
+  }
+  return o;
+}
+function _(t, o, i, d = "", a = "", s = !1) {
+  const c = F(t);
+  for (const [n, e] of Object.entries(c ?? {})) {
+    if (e == null)
       continue;
-    const m = String(b), c = uo(f, m);
-    if (c) {
-      o.push(`${d}${c}`);
+    const g = String(e), u = bo(n, g);
+    if (u) {
+      o.push(`${d}${u}`);
       continue;
     }
-    const s = `${a}${so(f)}`, p = co(f, s);
-    p && (i[`--${s}`] = m, o.push(`${d}${p}`));
+    const b = `${a}${K(n)}`, m = mo(n, b);
+    m && (i[`--${b}`] = g, o.push(`${d}${m}`));
   }
   if (t.bgGroup !== void 0) {
-    const f = `${a}group-background`;
-    i[`--${f}`] = A(t.bgGroup), o.push(`${d}group-hover:[background:var(--${f})]`), u && o.push(`${d}hover:[background:var(--${f})]`);
+    const n = `${a}group-background`;
+    i[`--${n}`] = A(t.bgGroup), o.push(`${d}group-hover:[background:var(--${n})]`), s && o.push(`${d}hover:[background:var(--${n})]`);
   }
 }
-function uo(t, o) {
+function bo(t, o) {
   if (t === "display")
     return o === "none" ? "hidden" : o;
   if (t === "position")
@@ -119,7 +167,7 @@ function uo(t, o) {
   if (t === "listStyleType")
     return `list-${o}`;
 }
-function co(t, o) {
+function mo(t, o) {
   const i = `var(--${o})`;
   return {
     background: `[background:${i}]`,
@@ -172,80 +220,80 @@ function co(t, o) {
     zIndex: `z-[${i}]`
   }[t];
 }
-function so(t) {
+function K(t) {
   return t.replace(/[A-Z]/g, (o) => `-${o.toLowerCase()}`);
 }
-function lo(t, o) {
+function po(t, o) {
   if (o !== void 0) {
     if (Array.isArray(o)) {
-      t.padding = o.map(r).join(" ");
+      t.padding = o.map(f).join(" ");
       return;
     }
     if (typeof o != "object") {
-      t.padding = r(o);
+      t.padding = f(o);
       return;
     }
-    "px" in o && o.px !== void 0 && (t.paddingLeft = r(o.px), t.paddingRight = r(o.px)), "py" in o && o.py !== void 0 && (t.paddingTop = r(o.py), t.paddingBottom = r(o.py)), "pt" in o && o.pt !== void 0 && (t.paddingTop = r(o.pt)), "pb" in o && o.pb !== void 0 && (t.paddingBottom = r(o.pb)), "pl" in o && o.pl !== void 0 && (t.paddingLeft = r(o.pl)), "pr" in o && o.pr !== void 0 && (t.paddingRight = r(o.pr));
+    "px" in o && o.px !== void 0 && (t.paddingLeft = f(o.px), t.paddingRight = f(o.px)), "py" in o && o.py !== void 0 && (t.paddingTop = f(o.py), t.paddingBottom = f(o.py)), "pt" in o && o.pt !== void 0 && (t.paddingTop = f(o.pt)), "pb" in o && o.pb !== void 0 && (t.paddingBottom = f(o.pb)), "pl" in o && o.pl !== void 0 && (t.paddingLeft = f(o.pl)), "pr" in o && o.pr !== void 0 && (t.paddingRight = f(o.pr));
   }
 }
-function bo(t, o) {
+function go(t, o) {
   if (o !== void 0) {
     if (Array.isArray(o)) {
-      t.margin = o.map(r).join(" ");
+      t.margin = o.map(f).join(" ");
       return;
     }
     if (typeof o != "object") {
-      t.margin = r(o);
+      t.margin = f(o);
       return;
     }
-    "mx" in o && o.mx !== void 0 && (t.marginLeft = r(o.mx), t.marginRight = r(o.mx)), "my" in o && o.my !== void 0 && (t.marginTop = r(o.my), t.marginBottom = r(o.my)), "mt" in o && o.mt !== void 0 && (t.marginTop = r(o.mt)), "mb" in o && o.mb !== void 0 && (t.marginBottom = r(o.mb)), "ml" in o && o.ml !== void 0 && (t.marginLeft = r(o.ml)), "mr" in o && o.mr !== void 0 && (t.marginRight = r(o.mr));
+    "mx" in o && o.mx !== void 0 && (t.marginLeft = f(o.mx), t.marginRight = f(o.mx)), "my" in o && o.my !== void 0 && (t.marginTop = f(o.my), t.marginBottom = f(o.my)), "mt" in o && o.mt !== void 0 && (t.marginTop = f(o.mt)), "mb" in o && o.mb !== void 0 && (t.marginBottom = f(o.mb)), "ml" in o && o.ml !== void 0 && (t.marginLeft = f(o.ml)), "mr" in o && o.mr !== void 0 && (t.marginRight = f(o.mr));
   }
 }
-function mo(t, o) {
-  o && (o.radius !== void 0 && po(t, o.radius), o.color !== void 0 && (t.borderColor = l(o.color)), o.width !== void 0 && go(t, o.width), o.style !== void 0 && (t.borderStyle = o.style));
+function ho(t, o) {
+  o && (o.radius !== void 0 && $o(t, o.radius), o.color !== void 0 && (t.borderColor = $(o.color)), o.width !== void 0 && vo(t, o.width), o.style !== void 0 && (t.borderStyle = o.style));
 }
-function po(t, o) {
-  if (ho(o)) {
-    o.topLeft !== void 0 && (t.borderTopLeftRadius = B(o.topLeft)), o.topRight !== void 0 && (t.borderTopRightRadius = B(o.topRight)), o.bottomLeft !== void 0 && (t.borderBottomLeftRadius = B(o.bottomLeft)), o.bottomRight !== void 0 && (t.borderBottomRightRadius = B(o.bottomRight));
+function $o(t, o) {
+  if (Bo(o)) {
+    o.topLeft !== void 0 && (t.borderTopLeftRadius = x(o.topLeft)), o.topRight !== void 0 && (t.borderTopRightRadius = x(o.topRight)), o.bottomLeft !== void 0 && (t.borderBottomLeftRadius = x(o.bottomLeft)), o.bottomRight !== void 0 && (t.borderBottomRightRadius = x(o.bottomRight));
     return;
   }
-  t.borderRadius = B(o);
+  t.borderRadius = x(o);
 }
-function go(t, o) {
-  if ($o(o)) {
-    o.top !== void 0 && (t.borderTopWidth = y(o.top)), o.bottom !== void 0 && (t.borderBottomWidth = y(o.bottom)), o.left !== void 0 && (t.borderLeftWidth = y(o.left)), o.right !== void 0 && (t.borderRightWidth = y(o.right));
+function vo(t, o) {
+  if (yo(o)) {
+    o.top !== void 0 && (t.borderTopWidth = S(o.top)), o.bottom !== void 0 && (t.borderBottomWidth = S(o.bottom)), o.left !== void 0 && (t.borderLeftWidth = S(o.left)), o.right !== void 0 && (t.borderRightWidth = S(o.right));
     return;
   }
-  t.borderWidth = y(o);
+  t.borderWidth = S(o);
 }
-function ho(t) {
+function Bo(t) {
   return typeof t == "object";
 }
-function $o(t) {
+function yo(t) {
   return typeof t == "object";
 }
-function B(t) {
+function x(t) {
   return t.startsWith("--") ? `var(${t})` : t;
 }
-function y(t) {
+function S(t) {
   return t.startsWith("--") ? `var(${t})` : t;
 }
-function vo(t) {
+function Ro(t) {
   return t === "hidden" ? "none" : t;
 }
-function O(t) {
+function H(t) {
   return typeof t == "number" ? `${t}px` : t;
 }
-function r(t) {
+function f(t) {
   return typeof t == "number" ? `${t}px` : t;
 }
-function $(t) {
+function k(t) {
   return typeof t == "number" ? `${t}px` : t;
 }
-function Bo(t) {
+function ko(t) {
   return typeof t == "number" ? `${t}px` : t;
 }
-function yo(t) {
+function xo(t) {
   return {
     "no-repeat": "no-repeat",
     repeat: "repeat",
@@ -255,127 +303,129 @@ function yo(t) {
     "repeat-y": "repeat-y"
   }[t];
 }
-function xo(t) {
+function So(t) {
   return t.replace("-", " ");
 }
 function A(t) {
-  return l(t);
+  return $(t);
 }
-function Ro(t, o) {
+function Wo(t, o) {
   const i = A(o);
-  if (ko(o)) {
+  if (zo(o)) {
     t.background = i;
     return;
   }
   t.backgroundColor = i;
 }
-function ko(t) {
+function zo(t) {
   const o = t.trim().toLowerCase();
   return o.includes("url(") || o.includes("gradient(") || o.includes("image-set(") || o.includes("cross-fade(") || o.includes("element(") || o.includes("paint(");
 }
-function l(t) {
+function $(t) {
   return t.startsWith("--") ? `var(${t})` : t;
 }
-function So(t, o) {
+function Co(t, o) {
   const {
     as: i,
     children: d,
     className: a,
-    background: u,
-    backgroundColor: v,
-    bg: f,
-    bgSize: b,
-    bgRepeat: m,
-    bgGroup: c,
-    groupParent: s,
-    bgPosition: p,
-    border: x,
-    boxShadow: R,
-    color: g,
-    cursor: k,
-    opacity: S,
-    overflow: G,
-    overflowX: H,
+    background: s,
+    backgroundColor: c,
+    bg: n,
+    bgSize: e,
+    bgRepeat: g,
+    bgGroup: u,
+    groupParent: b,
+    bgPosition: m,
+    border: v,
+    boxShadow: B,
+    color: p,
+    cursor: y,
+    opacity: h,
+    overflow: E,
+    overflowX: G,
     overflowY: z,
-    pointerEvents: W,
-    aspectRatio: C,
-    transform: T,
-    transformOrigin: h,
-    p: L,
-    m: n,
-    outlineColor: N,
-    outlineWidth: V,
-    outlineOffset: w,
-    outlineStyle: P,
+    pointerEvents: C,
+    aspectRatio: T,
+    transform: L,
+    transformOrigin: R,
+    p: P,
+    m: l,
+    outlineColor: w,
+    outlineWidth: N,
+    outlineOffset: V,
+    outlineStyle: j,
     listStyle: I,
-    display: j,
-    position: e,
-    width: E,
-    maxWidth: K,
-    minWidth: M,
-    height: Z,
-    maxHeight: q,
-    minHeight: F,
-    md: J,
-    lg: Q,
-    xl: U,
-    style: Y,
-    ..._
-  } = t, oo = i ?? "div", X = ao({
-    background: u,
-    backgroundColor: v,
-    bg: f,
-    bgSize: b,
-    bgRepeat: m,
-    bgGroup: c,
-    groupParent: s,
-    bgPosition: p,
-    border: x,
-    boxShadow: R,
-    color: g,
-    cursor: k,
-    opacity: S,
-    overflow: G,
-    overflowX: H,
+    display: O,
+    position: r,
+    width: M,
+    maxWidth: Z,
+    minWidth: q,
+    height: J,
+    hover: Q,
+    maxHeight: U,
+    minHeight: oo,
+    md: to,
+    lg: io,
+    xl: ro,
+    style: D,
+    ...eo
+  } = t, no = i ?? "div", X = co({
+    hover: Q,
+    background: s,
+    backgroundColor: c,
+    bg: n,
+    bgSize: e,
+    bgRepeat: g,
+    bgGroup: u,
+    groupParent: b,
+    bgPosition: m,
+    border: v,
+    boxShadow: B,
+    color: p,
+    cursor: y,
+    opacity: h,
+    overflow: E,
+    overflowX: G,
     overflowY: z,
-    pointerEvents: W,
-    aspectRatio: C,
-    transform: T,
-    transformOrigin: h,
-    p: L,
-    m: n,
-    outlineColor: N,
-    outlineWidth: V,
-    outlineOffset: w,
-    outlineStyle: P,
+    pointerEvents: C,
+    aspectRatio: T,
+    transform: L,
+    transformOrigin: R,
+    p: P,
+    m: l,
+    outlineColor: w,
+    outlineWidth: N,
+    outlineOffset: V,
+    outlineStyle: j,
     listStyle: I,
-    display: j,
-    position: e,
-    width: E,
-    maxWidth: K,
-    minWidth: M,
-    height: Z,
-    maxHeight: q,
-    minHeight: F,
-    md: J,
-    lg: Q,
-    xl: U
-  }), to = X.style || Y ? {
+    display: O,
+    position: r,
+    width: M,
+    maxWidth: Z,
+    minWidth: q,
+    height: J,
+    maxHeight: U,
+    minHeight: oo,
+    md: to,
+    lg: io,
+    xl: ro
+  }), ao = X.style || D ? {
     ...X.style,
-    ...Y
+    ...D
   } : void 0;
-  return /* @__PURE__ */ io(
-    oo,
+  return /* @__PURE__ */ fo(
+    no,
     {
-      className: no(X.className, s && "group", a),
+      className: uo(X.className, b && "group", a),
       ref: o,
-      style: to,
-      ..._,
+      style: ao,
+      ...eo,
       children: d
     }
   );
 }
-const Lo = eo(So);
+const No = so(Co);
 export {
-  Lo as Box
+  No as Box
 };