@hopper-ui/styled-system 0.2.6 → 0.2.8

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @hopper-ui/styled-system
 
+## 0.2.8
+
+### Patch Changes
+
+- 2f18e75: - Upsell disabled surface value has been set to treasure-25
+  - Upsell surface value has been set to treasure-75
+
+## 0.2.7
+
+### Patch Changes
+
+- 7717443: StyledSystemProvider now accepts a ref
+
 ## 0.2.6
 
 ### Patch Changes

package/README.md

@@ -5,28 +5,6 @@ Hopper's styled-system offers a collection of utility functions that add style p
 [![License](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](../../LICENSE)
 [![npm version](https://img.shields.io/npm/v/@hopper-ui/styled-system)](https://www.npmjs.com/package/@hopper-ui/styled-system)
 
-## Installation
-
-Install the following packages:
-
-**With pnpm**
-
-```shell
-pnpm add @hopper-ui/styled-system
-```
-
-**With yarn**
-
-```shell
-yarn add -D @hopper-ui/styled-system
-```
-
-**With npm**
-
-```shell
-npm install -D @hopper-ui/styled-system
-```
-
 ## Usage
 
 View the [user's documentation](https://hopper.workleap.design/).

package/dist/StyledSystemProvider.css

@@ -1,132 +1,132 @@
 /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/styled-system/src/UseStyledSystem.module.css/#css-module-data */
-.UseStyledSystem-module__hop-b-hover___GVP3r:hover {
+.UseStyledSystem-module__hop-b-hover___PCiT6:hover {
   --hop-b-hover: initial;
   border: var(--hop-b-hover) !important;
 }
-.UseStyledSystem-module__hop-bb-hover___idnOk:hover {
+.UseStyledSystem-module__hop-bb-hover___lTydY:hover {
   --hop-bb-hover: initial;
   border-bottom: var(--hop-bb-hover) !important;
 }
-.UseStyledSystem-module__hop-bl-hover___xhKyA:hover {
+.UseStyledSystem-module__hop-bl-hover___jMTE-:hover {
   --hop-bl-hover: initial;
   border-left: var(--hop-bl-hover) !important;
 }
-.UseStyledSystem-module__hop-br-hover___qYvoG:hover {
+.UseStyledSystem-module__hop-br-hover___bJ83o:hover {
   --hop-br-hover: initial;
   border-right: var(--hop-br-hover) !important;
 }
-.UseStyledSystem-module__hop-bt-hover___3HGdJ:hover {
+.UseStyledSystem-module__hop-bt-hover___eDPfm:hover {
   --hop-bt-hover: initial;
   border-top: var(--hop-bt-hover) !important;
 }
-.UseStyledSystem-module__hop-b-focus___v2Wwi:focus-visible {
+.UseStyledSystem-module__hop-b-focus___sGCIR:focus-visible {
   --hop-b-focus: initial;
   border: var(--hop-b-focus) !important;
 }
-.UseStyledSystem-module__hop-bb-focus___itBFq:focus-visible {
+.UseStyledSystem-module__hop-bb-focus___eHDgZ:focus-visible {
   --hop-bb-focus: initial;
   border-bottom: var(--hop-bb-focus) !important;
 }
-.UseStyledSystem-module__hop-bl-focus___dT6WS:focus-visible {
+.UseStyledSystem-module__hop-bl-focus___oVWyr:focus-visible {
   --hop-bl-focus: initial;
   border-left: var(--hop-bl-focus) !important;
 }
-.UseStyledSystem-module__hop-br-focus___FPZjN:focus-visible {
+.UseStyledSystem-module__hop-br-focus___m4ZZI:focus-visible {
   --hop-br-focus: initial;
   border-right: var(--hop-br-focus) !important;
 }
-.UseStyledSystem-module__hop-bt-focus___SBwfM:focus-visible {
+.UseStyledSystem-module__hop-bt-focus___XT0JW:focus-visible {
   --hop-bt-focus: initial;
   border-top: var(--hop-bt-focus) !important;
 }
-.UseStyledSystem-module__hop-b-active___vI8-0:active {
+.UseStyledSystem-module__hop-b-active___xKyzt:active {
   --hop-b-active: initial;
   border: var(--hop-b-active) !important;
 }
-.UseStyledSystem-module__hop-bb-active___50sg5:active {
+.UseStyledSystem-module__hop-bb-active___9vrWq:active {
   --hop-bb-active: initial;
   border-bottom: var(--hop-bb-active) !important;
 }
-.UseStyledSystem-module__hop-bl-active___jTAz1:active {
+.UseStyledSystem-module__hop-bl-active___qbrLo:active {
   --hop-bl-active: initial;
   border-left: var(--hop-bl-active) !important;
 }
-.UseStyledSystem-module__hop-br-active___0EeBh:active {
+.UseStyledSystem-module__hop-br-active___aRmLI:active {
   --hop-br-active: initial;
   border-right: var(--hop-br-active) !important;
 }
-.UseStyledSystem-module__hop-bt-active___RXq33:active {
+.UseStyledSystem-module__hop-bt-active___75-yZ:active {
   --hop-bt-active: initial;
   border-top: var(--hop-bt-active) !important;
 }
-.UseStyledSystem-module__hop-bg-hover___w134R:hover {
+.UseStyledSystem-module__hop-bg-hover___BAsJt:hover {
   --hop-bg-hover: initial;
   background-color: var(--hop-bg-hover) !important;
 }
-.UseStyledSystem-module__hop-bg-focus___GcLCI:focus-visible {
+.UseStyledSystem-module__hop-bg-focus___wmDkz:focus-visible {
   --hop-bg-focus: initial;
   background-color: var(--hop-bg-focus) !important;
 }
-.UseStyledSystem-module__hop-bg-active___rdOhL:active {
+.UseStyledSystem-module__hop-bg-active___l4tex:active {
   --hop-bg-active: initial;
   background-color: var(--hop-bg-active) !important;
 }
-.UseStyledSystem-module__hop-bs-hover___y-aEQ:hover {
+.UseStyledSystem-module__hop-bs-hover___o6LSh:hover {
   --hop-bs-hover: initial;
   box-shadow: var(--hop-bs-hover) !important;
 }
-.UseStyledSystem-module__hop-bs-focus___qMKoc:focus-visible {
+.UseStyledSystem-module__hop-bs-focus___6nNJH:focus-visible {
   --hop-bs-focus: initial;
   box-shadow: var(--hop-bs-focus) !important;
 }
-.UseStyledSystem-module__hop-bs-active___8MtLu:active {
+.UseStyledSystem-module__hop-bs-active___d7Ec-:active {
   --hop-bs-active: initial;
   box-shadow: var(--hop-bs-active) !important;
 }
-.UseStyledSystem-module__hop-c-hover___m3q2O:hover {
+.UseStyledSystem-module__hop-c-hover___uveCx:hover {
   --hop-c-hover: initial;
   color: var(--hop-c-hover) !important;
 }
-.UseStyledSystem-module__hop-c-focus___ToVnJ:focus-visible {
+.UseStyledSystem-module__hop-c-focus___bYVxt:focus-visible {
   --hop-c-focus: initial;
   color: var(--hop-c-focus) !important;
 }
-.UseStyledSystem-module__hop-c-active___PorM-:active {
+.UseStyledSystem-module__hop-c-active___pSKRG:active {
   --hop-c-active: initial;
   color: var(--hop-c-active) !important;
 }
-.UseStyledSystem-module__hop-cs-hover___lQTKe:hover {
+.UseStyledSystem-module__hop-cs-hover___rLWvX:hover {
   --hop-cs-hover: initial;
   cursor: var(--hop-cs-hover) !important;
 }
-.UseStyledSystem-module__hop-f-hover___KvbSc:hover {
+.UseStyledSystem-module__hop-f-hover___WhWFr:hover {
   --hop-f-hover: initial;
   fill: var(--hop-f-hover) !important;
 }
-.UseStyledSystem-module__hop-f-focus___eFUxf:focus-visible {
+.UseStyledSystem-module__hop-f-focus___YVEAE:focus-visible {
   --hop-f-focus: initial;
   fill: var(--hop-f-focus) !important;
 }
-.UseStyledSystem-module__hop-o-hover___WyG8r:hover {
+.UseStyledSystem-module__hop-o-hover___Fz6bG:hover {
   --hop-o-hover: initial;
   opacity: var(--hop-o-hover) !important;
 }
-.UseStyledSystem-module__hop-o-focus___NDLtq:focus-visible {
+.UseStyledSystem-module__hop-o-focus___Qj2Lh:focus-visible {
   --hop-o-focus: initial;
   opacity: var(--hop-o-focus) !important;
 }
-.UseStyledSystem-module__hop-o-active___L-qyl:active {
+.UseStyledSystem-module__hop-o-active___cm3NT:active {
   --hop-o-active: initial;
   opacity: var(--hop-o-active) !important;
 }
-.UseStyledSystem-module__hop-ol-focus___Yw8fd:focus-visible {
+.UseStyledSystem-module__hop-ol-focus___TQMP-:focus-visible {
   --hop-ol-focus: initial;
   color: var(--hop-ol-focus) !important;
 }
 
 /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/styled-system/src/html-wrappers/htmlElement.module.css/#css-module-data */
-:where(.htmlElement-module__html-element___mTHcW),
-:where(.htmlElement-module__html-element___mTHcW::after),
-:where(.htmlElement-module__html-element___mTHcW::before) {
+:where(.htmlElement-module__html-element___X3XT3),
+:where(.htmlElement-module__html-element___X3XT3::after),
+:where(.htmlElement-module__html-element___X3XT3::before) {
   box-sizing: border-box;
 }

package/dist/StyledSystemProvider.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { ReactNode } from 'react';
 import { ColorSchemeOrSystem, ColorScheme } from './color-scheme/ColorSchemeContext.js';
 import { DivProps } from './html-wrappers/html.js';
@@ -9,6 +9,7 @@ import 'csstype';
 import './responsive/useResponsiveValue.js';
 import './responsive/Breakpoints.js';
 import './tokens/token-mappings.js';
+import 'react/jsx-runtime';
 
 interface StyledSystemProviderProps extends BreakpointProviderProps, DivProps {
     /** The children of the component */
@@ -38,6 +39,6 @@ interface StyledSystemProviderProps extends BreakpointProviderProps, DivProps {
  * - Managing color scheme (light, dark, auto)
  * - Optionally adding body styles to the document
  */
-declare function StyledSystemProvider({ children, withBodyStyle, withCssVariables, colorScheme, defaultColorScheme, unsupportedMatchMediaBreakpoint, className, ...rest }: StyledSystemProviderProps): react_jsx_runtime.JSX.Element;
+declare const _StyledSystemProvider: react.ForwardRefExoticComponent<Omit<StyledSystemProviderProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
 
-export { StyledSystemProvider, type StyledSystemProviderProps };
+export { _StyledSystemProvider as StyledSystemProvider, type StyledSystemProviderProps };

package/dist/StyledSystemProvider.js

@@ -1,18 +1,18 @@
-export { StyledSystemProvider } from './chunk-7XB4VCCJ.js';
-import './chunk-Z7O4JONV.js';
+export { _StyledSystemProvider as StyledSystemProvider } from './chunk-4W2Y5NP7.js';
+import './chunk-QM2KKTRJ.js';
 import './chunk-3YM73BQP.js';
 import './chunk-B6ZBFYWJ.js';
-import './chunk-BTJMZT3L.js';
-import './chunk-UTFGHZHA.js';
+import './chunk-C2ZCLERY.js';
+import './chunk-B6X5QHOR.js';
 import './chunk-MCUHAIA4.js';
-import './chunk-AMNZEPOY.js';
-import './chunk-A47SIZVA.js';
+import './chunk-6QQ7EFT3.js';
+import './chunk-4YLLB6OG.js';
 import './chunk-ZKEMKHXY.js';
-import './chunk-HAB2KYRH.js';
+import './chunk-AGTKHWTQ.js';
 import './chunk-RIORU7JO.js';
 import './chunk-YPIK2HRL.js';
-import './chunk-HZFB352P.js';
-import './chunk-5XPS6ZZ7.js';
+import './chunk-ZAVRK5U2.js';
+import './chunk-7DJQGTVY.js';
 import './chunk-T2LQYER5.js';
 import './chunk-PCGVOTW3.js';
 import './chunk-SFOVKOPG.js';

package/dist/{chunk-7XB4VCCJ.js → chunk-4W2Y5NP7.js}

@@ -1,26 +1,38 @@
-import { BodyStyleProvider } from './chunk-Z7O4JONV.js';
-import { Div } from './chunk-BTJMZT3L.js';
+import { BodyStyleProvider } from './chunk-QM2KKTRJ.js';
+import { Div } from './chunk-C2ZCLERY.js';
 import { BreakpointProvider, DefaultUnsupportedMatchMediaBreakpoint } from './chunk-MCUHAIA4.js';
-import { TokenProvider } from './chunk-AMNZEPOY.js';
-import { HopperRootCssClass, StyledSystemRootCssClass } from './chunk-HZFB352P.js';
+import { TokenProvider } from './chunk-6QQ7EFT3.js';
+import { HopperRootCssClass, StyledSystemRootCssClass } from './chunk-ZAVRK5U2.js';
 import { useColorScheme } from './chunk-KLNF34G6.js';
 import { ColorSchemeContext } from './chunk-V7X6ANEM.js';
 import clsx from 'clsx';
-import { useState, useCallback } from 'react';
+import { forwardRef, useState, useCallback } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-function StyledSystemProvider({ children, withBodyStyle = false, withCssVariables = true, colorScheme = "light", defaultColorScheme = "light", unsupportedMatchMediaBreakpoint = DefaultUnsupportedMatchMediaBreakpoint, className, ...rest }) {
+var GlobalStyledSystemProviderCssSelector = "hop-StyledSystemProvider";
+var StyledSystemProvider = (props, ref) => {
+  const {
+    children,
+    withBodyStyle = false,
+    withCssVariables = true,
+    colorScheme = "light",
+    defaultColorScheme = "light",
+    unsupportedMatchMediaBreakpoint = DefaultUnsupportedMatchMediaBreakpoint,
+    className,
+    ...rest
+  } = props;
   const [remoteColorScheme, setRemoteColorScheme] = useState();
   const computedColorScheme = useColorScheme(remoteColorScheme != null ? remoteColorScheme : colorScheme, defaultColorScheme);
   const setColorScheme = useCallback((newColorScheme) => {
     setRemoteColorScheme(newColorScheme);
   }, [setRemoteColorScheme]);
   const classNames = clsx(
+    className,
+    GlobalStyledSystemProviderCssSelector,
     HopperRootCssClass,
     `${HopperRootCssClass}-${computedColorScheme}`,
     StyledSystemRootCssClass,
-    `${StyledSystemRootCssClass}-${computedColorScheme}`,
-    className
+    `${StyledSystemRootCssClass}-${computedColorScheme}`
   );
   return /* @__PURE__ */ jsx(
     ColorSchemeContext.Provider,
@@ -29,13 +41,15 @@ function StyledSystemProvider({ children, withBodyStyle = false, withCssVariable
         colorScheme: computedColorScheme,
         setColorScheme
       },
-      children: /* @__PURE__ */ jsx(BreakpointProvider, { unsupportedMatchMediaBreakpoint, children: /* @__PURE__ */ jsxs(Div, { className: classNames, ...rest, children: [
+      children: /* @__PURE__ */ jsx(BreakpointProvider, { unsupportedMatchMediaBreakpoint, children: /* @__PURE__ */ jsxs(Div, { ref, className: classNames, ...rest, children: [
         withBodyStyle && /* @__PURE__ */ jsx(BodyStyleProvider, {}),
         withCssVariables && /* @__PURE__ */ jsx(TokenProvider, {}),
         children
       ] }) })
     }
   );
-}
+};
+var _StyledSystemProvider = forwardRef(StyledSystemProvider);
+_StyledSystemProvider.displayName = "StyledSystemProvider";
 
-export { StyledSystemProvider };
+export { _StyledSystemProvider };

package/dist/{chunk-A47SIZVA.js → chunk-4YLLB6OG.js}

@@ -1,5 +1,5 @@
 import { DarkSemanticTokens } from './chunk-ZKEMKHXY.js';
-import { CoreTokens, SemanticTokens } from './chunk-HAB2KYRH.js';
+import { CoreTokens, SemanticTokens } from './chunk-AGTKHWTQ.js';
 
 // src/tokens/tokens.ts
 var Tokens = {

package/dist/{chunk-AMNZEPOY.js → chunk-6QQ7EFT3.js}

@@ -1,6 +1,6 @@
-import { Tokens } from './chunk-A47SIZVA.js';
+import { Tokens } from './chunk-4YLLB6OG.js';
 import { useInsertStyleElement } from './chunk-RIORU7JO.js';
-import { StyledSystemRootCssClass } from './chunk-HZFB352P.js';
+import { StyledSystemRootCssClass } from './chunk-ZAVRK5U2.js';
 
 // src/tokens/TokenProvider.tsx
 function TokenProvider() {

package/dist/{chunk-5XPS6ZZ7.js → chunk-7DJQGTVY.js}

@@ -7,7 +7,7 @@ import { __privateAdd, __publicField, __privateSet, __privateGet } from './chunk
 import { useMemo } from 'react';
 
 // css-module:./UseStyledSystem.module.css#css-module
-var UseStyledSystem_module_default = { "hop-b-hover": "UseStyledSystem-module__hop-b-hover___GVP3r", "hop-bb-hover": "UseStyledSystem-module__hop-bb-hover___idnOk", "hop-bl-hover": "UseStyledSystem-module__hop-bl-hover___xhKyA", "hop-br-hover": "UseStyledSystem-module__hop-br-hover___qYvoG", "hop-bt-hover": "UseStyledSystem-module__hop-bt-hover___3HGdJ", "hop-b-focus": "UseStyledSystem-module__hop-b-focus___v2Wwi", "hop-bb-focus": "UseStyledSystem-module__hop-bb-focus___itBFq", "hop-bl-focus": "UseStyledSystem-module__hop-bl-focus___dT6WS", "hop-br-focus": "UseStyledSystem-module__hop-br-focus___FPZjN", "hop-bt-focus": "UseStyledSystem-module__hop-bt-focus___SBwfM", "hop-b-active": "UseStyledSystem-module__hop-b-active___vI8-0", "hop-bb-active": "UseStyledSystem-module__hop-bb-active___50sg5", "hop-bl-active": "UseStyledSystem-module__hop-bl-active___jTAz1", "hop-br-active": "UseStyledSystem-module__hop-br-active___0EeBh", "hop-bt-active": "UseStyledSystem-module__hop-bt-active___RXq33", "hop-bg-hover": "UseStyledSystem-module__hop-bg-hover___w134R", "hop-bg-focus": "UseStyledSystem-module__hop-bg-focus___GcLCI", "hop-bg-active": "UseStyledSystem-module__hop-bg-active___rdOhL", "hop-bs-hover": "UseStyledSystem-module__hop-bs-hover___y-aEQ", "hop-bs-focus": "UseStyledSystem-module__hop-bs-focus___qMKoc", "hop-bs-active": "UseStyledSystem-module__hop-bs-active___8MtLu", "hop-c-hover": "UseStyledSystem-module__hop-c-hover___m3q2O", "hop-c-focus": "UseStyledSystem-module__hop-c-focus___ToVnJ", "hop-c-active": "UseStyledSystem-module__hop-c-active___PorM-", "hop-cs-hover": "UseStyledSystem-module__hop-cs-hover___lQTKe", "hop-f-hover": "UseStyledSystem-module__hop-f-hover___KvbSc", "hop-f-focus": "UseStyledSystem-module__hop-f-focus___eFUxf", "hop-o-hover": "UseStyledSystem-module__hop-o-hover___WyG8r", "hop-o-focus": "UseStyledSystem-module__hop-o-focus___NDLtq", "hop-o-active": "UseStyledSystem-module__hop-o-active___L-qyl", "hop-ol-focus": "UseStyledSystem-module__hop-ol-focus___Yw8fd" };
+var UseStyledSystem_module_default = { "hop-b-hover": "UseStyledSystem-module__hop-b-hover___PCiT6", "hop-bb-hover": "UseStyledSystem-module__hop-bb-hover___lTydY", "hop-bl-hover": "UseStyledSystem-module__hop-bl-hover___jMTE-", "hop-br-hover": "UseStyledSystem-module__hop-br-hover___bJ83o", "hop-bt-hover": "UseStyledSystem-module__hop-bt-hover___eDPfm", "hop-b-focus": "UseStyledSystem-module__hop-b-focus___sGCIR", "hop-bb-focus": "UseStyledSystem-module__hop-bb-focus___eHDgZ", "hop-bl-focus": "UseStyledSystem-module__hop-bl-focus___oVWyr", "hop-br-focus": "UseStyledSystem-module__hop-br-focus___m4ZZI", "hop-bt-focus": "UseStyledSystem-module__hop-bt-focus___XT0JW", "hop-b-active": "UseStyledSystem-module__hop-b-active___xKyzt", "hop-bb-active": "UseStyledSystem-module__hop-bb-active___9vrWq", "hop-bl-active": "UseStyledSystem-module__hop-bl-active___qbrLo", "hop-br-active": "UseStyledSystem-module__hop-br-active___aRmLI", "hop-bt-active": "UseStyledSystem-module__hop-bt-active___75-yZ", "hop-bg-hover": "UseStyledSystem-module__hop-bg-hover___BAsJt", "hop-bg-focus": "UseStyledSystem-module__hop-bg-focus___wmDkz", "hop-bg-active": "UseStyledSystem-module__hop-bg-active___l4tex", "hop-bs-hover": "UseStyledSystem-module__hop-bs-hover___o6LSh", "hop-bs-focus": "UseStyledSystem-module__hop-bs-focus___6nNJH", "hop-bs-active": "UseStyledSystem-module__hop-bs-active___d7Ec-", "hop-c-hover": "UseStyledSystem-module__hop-c-hover___uveCx", "hop-c-focus": "UseStyledSystem-module__hop-c-focus___bYVxt", "hop-c-active": "UseStyledSystem-module__hop-c-active___pSKRG", "hop-cs-hover": "UseStyledSystem-module__hop-cs-hover___rLWvX", "hop-f-hover": "UseStyledSystem-module__hop-f-hover___WhWFr", "hop-f-focus": "UseStyledSystem-module__hop-f-focus___YVEAE", "hop-o-hover": "UseStyledSystem-module__hop-o-hover___Fz6bG", "hop-o-focus": "UseStyledSystem-module__hop-o-focus___Qj2Lh", "hop-o-active": "UseStyledSystem-module__hop-o-active___cm3NT", "hop-ol-focus": "UseStyledSystem-module__hop-ol-focus___TQMP-" };
 
 // src/useStyledSystem.ts
 function createSystemValueHandler(systemValues) {

package/dist/{chunk-HAB2KYRH.js → chunk-AGTKHWTQ.js}

@@ -217,13 +217,13 @@ var SemanticTokens = {
   "--hop-upsell-border-disabled": "var(--hop-sunken-treasure-75)",
   "--hop-upsell-icon-active": "var(--hop-sunken-treasure-400)",
   "--hop-upsell-surface-weak": "var(--hop-sunken-treasure-25)",
-  "--hop-upsell-surface-disabled": "var(--hop-sunken-treasure-75)",
+  "--hop-upsell-surface-disabled": "var(--hop-sunken-treasure-25)",
   "--hop-upsell-text": "var(--hop-sunken-treasure-800)",
   "--hop-upsell-icon": "var(--hop-sunken-treasure-800)",
   "--hop-upsell-text-hover": "var(--hop-sunken-treasure-900)",
   "--hop-upsell-text-disabled": "var(--hop-sunken-treasure-400)",
   "--hop-upsell-surface-active": "var(--hop-sunken-treasure-50)",
-  "--hop-upsell-surface": "var(--hop-sunken-treasure-25)",
+  "--hop-upsell-surface": "var(--hop-sunken-treasure-75)",
   "--hop-danger-border-active": "var(--hop-amanita-300)",
   "--hop-danger-icon-active": "var(--hop-amanita-400)",
   "--hop-danger-text-active": "var(--hop-amanita-400)",

package/dist/{chunk-UTFGHZHA.js → chunk-B6X5QHOR.js}

@@ -1,10 +1,10 @@
-import { useStyledSystem } from './chunk-5XPS6ZZ7.js';
+import { useStyledSystem } from './chunk-7DJQGTVY.js';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./htmlElement.module.css#css-module
-var htmlElement_module_default = { "html-element": "htmlElement-module__html-element___mTHcW" };
+var htmlElement_module_default = { "html-element": "htmlElement-module__html-element___X3XT3" };
 function htmlElement(elementType) {
   return forwardRef((props, ref) => {
     const { className, children, ...rest } = useStyledSystem(props);

package/dist/{chunk-BTJMZT3L.js → chunk-C2ZCLERY.js}

@@ -1,4 +1,4 @@
-import { htmlElement } from './chunk-UTFGHZHA.js';
+import { htmlElement } from './chunk-B6X5QHOR.js';
 
 // src/html-wrappers/html.ts
 var Address = htmlElement("address");

package/dist/{chunk-Z7O4JONV.js → chunk-QM2KKTRJ.js}

@@ -1,7 +1,7 @@
 import { useIsomorphicLayoutEffect } from './chunk-3YM73BQP.js';
 import { ThemeComputedStyle } from './chunk-B6ZBFYWJ.js';
 import { useInsertStyleElement } from './chunk-RIORU7JO.js';
-import { StyledSystemRootCssClass } from './chunk-HZFB352P.js';
+import { StyledSystemRootCssClass } from './chunk-ZAVRK5U2.js';
 import { isNil } from './chunk-U5R6ZXH3.js';
 import { useColorSchemeContext } from './chunk-V7X6ANEM.js';
 import { useRef, useState } from 'react';

package/dist/{chunk-HZFB352P.js → chunk-ZAVRK5U2.js}

@@ -2,7 +2,7 @@
 var package_default = {
   name: "@hopper-ui/styled-system",
   author: "Workleap",
-  version: "0.2.6",
+  version: "0.2.8",
   description: "The styled-system package.",
   license: "Apache-2.0",
   repository: {

package/dist/global-styles/BodyStyleProvider.js

@@ -1,9 +1,9 @@
-export { BodyStyleProvider } from '../chunk-Z7O4JONV.js';
+export { BodyStyleProvider } from '../chunk-QM2KKTRJ.js';
 import '../chunk-3YM73BQP.js';
 import '../chunk-B6ZBFYWJ.js';
 import '../chunk-RIORU7JO.js';
 import '../chunk-YPIK2HRL.js';
-import '../chunk-HZFB352P.js';
+import '../chunk-ZAVRK5U2.js';
 import '../chunk-U5R6ZXH3.js';
 import '../chunk-V7X6ANEM.js';
 import '../chunk-6LX4VMOV.js';

package/dist/html-wrappers/html.css

@@ -1,132 +1,132 @@
 /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/styled-system/src/UseStyledSystem.module.css/#css-module-data */
-.UseStyledSystem-module__hop-b-hover___GVP3r:hover {
+.UseStyledSystem-module__hop-b-hover___PCiT6:hover {
   --hop-b-hover: initial;
   border: var(--hop-b-hover) !important;
 }
-.UseStyledSystem-module__hop-bb-hover___idnOk:hover {
+.UseStyledSystem-module__hop-bb-hover___lTydY:hover {
   --hop-bb-hover: initial;
   border-bottom: var(--hop-bb-hover) !important;
 }
-.UseStyledSystem-module__hop-bl-hover___xhKyA:hover {
+.UseStyledSystem-module__hop-bl-hover___jMTE-:hover {
   --hop-bl-hover: initial;
   border-left: var(--hop-bl-hover) !important;
 }
-.UseStyledSystem-module__hop-br-hover___qYvoG:hover {
+.UseStyledSystem-module__hop-br-hover___bJ83o:hover {
   --hop-br-hover: initial;
   border-right: var(--hop-br-hover) !important;
 }
-.UseStyledSystem-module__hop-bt-hover___3HGdJ:hover {
+.UseStyledSystem-module__hop-bt-hover___eDPfm:hover {
   --hop-bt-hover: initial;
   border-top: var(--hop-bt-hover) !important;
 }
-.UseStyledSystem-module__hop-b-focus___v2Wwi:focus-visible {
+.UseStyledSystem-module__hop-b-focus___sGCIR:focus-visible {
   --hop-b-focus: initial;
   border: var(--hop-b-focus) !important;
 }
-.UseStyledSystem-module__hop-bb-focus___itBFq:focus-visible {
+.UseStyledSystem-module__hop-bb-focus___eHDgZ:focus-visible {
   --hop-bb-focus: initial;
   border-bottom: var(--hop-bb-focus) !important;
 }
-.UseStyledSystem-module__hop-bl-focus___dT6WS:focus-visible {
+.UseStyledSystem-module__hop-bl-focus___oVWyr:focus-visible {
   --hop-bl-focus: initial;
   border-left: var(--hop-bl-focus) !important;
 }
-.UseStyledSystem-module__hop-br-focus___FPZjN:focus-visible {
+.UseStyledSystem-module__hop-br-focus___m4ZZI:focus-visible {
   --hop-br-focus: initial;
   border-right: var(--hop-br-focus) !important;
 }
-.UseStyledSystem-module__hop-bt-focus___SBwfM:focus-visible {
+.UseStyledSystem-module__hop-bt-focus___XT0JW:focus-visible {
   --hop-bt-focus: initial;
   border-top: var(--hop-bt-focus) !important;
 }
-.UseStyledSystem-module__hop-b-active___vI8-0:active {
+.UseStyledSystem-module__hop-b-active___xKyzt:active {
   --hop-b-active: initial;
   border: var(--hop-b-active) !important;
 }
-.UseStyledSystem-module__hop-bb-active___50sg5:active {
+.UseStyledSystem-module__hop-bb-active___9vrWq:active {
   --hop-bb-active: initial;
   border-bottom: var(--hop-bb-active) !important;
 }
-.UseStyledSystem-module__hop-bl-active___jTAz1:active {
+.UseStyledSystem-module__hop-bl-active___qbrLo:active {
   --hop-bl-active: initial;
   border-left: var(--hop-bl-active) !important;
 }
-.UseStyledSystem-module__hop-br-active___0EeBh:active {
+.UseStyledSystem-module__hop-br-active___aRmLI:active {
   --hop-br-active: initial;
   border-right: var(--hop-br-active) !important;
 }
-.UseStyledSystem-module__hop-bt-active___RXq33:active {
+.UseStyledSystem-module__hop-bt-active___75-yZ:active {
   --hop-bt-active: initial;
   border-top: var(--hop-bt-active) !important;
 }
-.UseStyledSystem-module__hop-bg-hover___w134R:hover {
+.UseStyledSystem-module__hop-bg-hover___BAsJt:hover {
   --hop-bg-hover: initial;
   background-color: var(--hop-bg-hover) !important;
 }
-.UseStyledSystem-module__hop-bg-focus___GcLCI:focus-visible {
+.UseStyledSystem-module__hop-bg-focus___wmDkz:focus-visible {
   --hop-bg-focus: initial;
   background-color: var(--hop-bg-focus) !important;
 }
-.UseStyledSystem-module__hop-bg-active___rdOhL:active {
+.UseStyledSystem-module__hop-bg-active___l4tex:active {
   --hop-bg-active: initial;
   background-color: var(--hop-bg-active) !important;
 }
-.UseStyledSystem-module__hop-bs-hover___y-aEQ:hover {
+.UseStyledSystem-module__hop-bs-hover___o6LSh:hover {
   --hop-bs-hover: initial;
   box-shadow: var(--hop-bs-hover) !important;
 }
-.UseStyledSystem-module__hop-bs-focus___qMKoc:focus-visible {
+.UseStyledSystem-module__hop-bs-focus___6nNJH:focus-visible {
   --hop-bs-focus: initial;
   box-shadow: var(--hop-bs-focus) !important;
 }
-.UseStyledSystem-module__hop-bs-active___8MtLu:active {
+.UseStyledSystem-module__hop-bs-active___d7Ec-:active {
   --hop-bs-active: initial;
   box-shadow: var(--hop-bs-active) !important;
 }
-.UseStyledSystem-module__hop-c-hover___m3q2O:hover {
+.UseStyledSystem-module__hop-c-hover___uveCx:hover {
   --hop-c-hover: initial;
   color: var(--hop-c-hover) !important;
 }
-.UseStyledSystem-module__hop-c-focus___ToVnJ:focus-visible {
+.UseStyledSystem-module__hop-c-focus___bYVxt:focus-visible {
   --hop-c-focus: initial;
   color: var(--hop-c-focus) !important;
 }
-.UseStyledSystem-module__hop-c-active___PorM-:active {
+.UseStyledSystem-module__hop-c-active___pSKRG:active {
   --hop-c-active: initial;
   color: var(--hop-c-active) !important;
 }
-.UseStyledSystem-module__hop-cs-hover___lQTKe:hover {
+.UseStyledSystem-module__hop-cs-hover___rLWvX:hover {
   --hop-cs-hover: initial;
   cursor: var(--hop-cs-hover) !important;
 }
-.UseStyledSystem-module__hop-f-hover___KvbSc:hover {
+.UseStyledSystem-module__hop-f-hover___WhWFr:hover {
   --hop-f-hover: initial;
   fill: var(--hop-f-hover) !important;
 }
-.UseStyledSystem-module__hop-f-focus___eFUxf:focus-visible {
+.UseStyledSystem-module__hop-f-focus___YVEAE:focus-visible {
   --hop-f-focus: initial;
   fill: var(--hop-f-focus) !important;
 }
-.UseStyledSystem-module__hop-o-hover___WyG8r:hover {
+.UseStyledSystem-module__hop-o-hover___Fz6bG:hover {
   --hop-o-hover: initial;
   opacity: var(--hop-o-hover) !important;
 }
-.UseStyledSystem-module__hop-o-focus___NDLtq:focus-visible {
+.UseStyledSystem-module__hop-o-focus___Qj2Lh:focus-visible {
   --hop-o-focus: initial;
   opacity: var(--hop-o-focus) !important;
 }
-.UseStyledSystem-module__hop-o-active___L-qyl:active {
+.UseStyledSystem-module__hop-o-active___cm3NT:active {
   --hop-o-active: initial;
   opacity: var(--hop-o-active) !important;
 }
-.UseStyledSystem-module__hop-ol-focus___Yw8fd:focus-visible {
+.UseStyledSystem-module__hop-ol-focus___TQMP-:focus-visible {
   --hop-ol-focus: initial;
   color: var(--hop-ol-focus) !important;
 }
 
 /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/styled-system/src/html-wrappers/htmlElement.module.css/#css-module-data */
-:where(.htmlElement-module__html-element___mTHcW),
-:where(.htmlElement-module__html-element___mTHcW::after),
-:where(.htmlElement-module__html-element___mTHcW::before) {
+:where(.htmlElement-module__html-element___X3XT3),
+:where(.htmlElement-module__html-element___X3XT3::after),
+:where(.htmlElement-module__html-element___X3XT3::before) {
   box-sizing: border-box;
 }

package/dist/html-wrappers/html.js

@@ -1,6 +1,6 @@
-export { A, Address, Article, Aside, Div, HtmlButton, HtmlFooter, HtmlForm, HtmlH1, HtmlH2, HtmlH3, HtmlH4, HtmlH5, HtmlH6, HtmlHeader, HtmlInput, HtmlLabel, HtmlParagraph, HtmlSection, HtmlTextArea, Img, LI, Main, Nav, OL, Span, TBody, TD, TFoot, TH, THead, TR, Table, UL } from '../chunk-BTJMZT3L.js';
-import '../chunk-UTFGHZHA.js';
-import '../chunk-5XPS6ZZ7.js';
+export { A, Address, Article, Aside, Div, HtmlButton, HtmlFooter, HtmlForm, HtmlH1, HtmlH2, HtmlH3, HtmlH4, HtmlH5, HtmlH6, HtmlHeader, HtmlInput, HtmlLabel, HtmlParagraph, HtmlSection, HtmlTextArea, Img, LI, Main, Nav, OL, Span, TBody, TD, TFoot, TH, THead, TR, Table, UL } from '../chunk-C2ZCLERY.js';
+import '../chunk-B6X5QHOR.js';
+import '../chunk-7DJQGTVY.js';
 import '../chunk-T2LQYER5.js';
 import '../chunk-PCGVOTW3.js';
 import '../chunk-SFOVKOPG.js';

package/dist/html-wrappers/htmlElement.css

@@ -1,132 +1,132 @@
 /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/styled-system/src/UseStyledSystem.module.css/#css-module-data */
-.UseStyledSystem-module__hop-b-hover___GVP3r:hover {
+.UseStyledSystem-module__hop-b-hover___PCiT6:hover {
   --hop-b-hover: initial;
   border: var(--hop-b-hover) !important;
 }
-.UseStyledSystem-module__hop-bb-hover___idnOk:hover {
+.UseStyledSystem-module__hop-bb-hover___lTydY:hover {
   --hop-bb-hover: initial;
   border-bottom: var(--hop-bb-hover) !important;
 }
-.UseStyledSystem-module__hop-bl-hover___xhKyA:hover {
+.UseStyledSystem-module__hop-bl-hover___jMTE-:hover {
   --hop-bl-hover: initial;
   border-left: var(--hop-bl-hover) !important;
 }
-.UseStyledSystem-module__hop-br-hover___qYvoG:hover {
+.UseStyledSystem-module__hop-br-hover___bJ83o:hover {
   --hop-br-hover: initial;
   border-right: var(--hop-br-hover) !important;
 }
-.UseStyledSystem-module__hop-bt-hover___3HGdJ:hover {
+.UseStyledSystem-module__hop-bt-hover___eDPfm:hover {
   --hop-bt-hover: initial;
   border-top: var(--hop-bt-hover) !important;
 }
-.UseStyledSystem-module__hop-b-focus___v2Wwi:focus-visible {
+.UseStyledSystem-module__hop-b-focus___sGCIR:focus-visible {
   --hop-b-focus: initial;
   border: var(--hop-b-focus) !important;
 }
-.UseStyledSystem-module__hop-bb-focus___itBFq:focus-visible {
+.UseStyledSystem-module__hop-bb-focus___eHDgZ:focus-visible {
   --hop-bb-focus: initial;
   border-bottom: var(--hop-bb-focus) !important;
 }
-.UseStyledSystem-module__hop-bl-focus___dT6WS:focus-visible {
+.UseStyledSystem-module__hop-bl-focus___oVWyr:focus-visible {
   --hop-bl-focus: initial;
   border-left: var(--hop-bl-focus) !important;
 }
-.UseStyledSystem-module__hop-br-focus___FPZjN:focus-visible {
+.UseStyledSystem-module__hop-br-focus___m4ZZI:focus-visible {
   --hop-br-focus: initial;
   border-right: var(--hop-br-focus) !important;
 }
-.UseStyledSystem-module__hop-bt-focus___SBwfM:focus-visible {
+.UseStyledSystem-module__hop-bt-focus___XT0JW:focus-visible {
   --hop-bt-focus: initial;
   border-top: var(--hop-bt-focus) !important;
 }
-.UseStyledSystem-module__hop-b-active___vI8-0:active {
+.UseStyledSystem-module__hop-b-active___xKyzt:active {
   --hop-b-active: initial;
   border: var(--hop-b-active) !important;
 }
-.UseStyledSystem-module__hop-bb-active___50sg5:active {
+.UseStyledSystem-module__hop-bb-active___9vrWq:active {
   --hop-bb-active: initial;
   border-bottom: var(--hop-bb-active) !important;
 }
-.UseStyledSystem-module__hop-bl-active___jTAz1:active {
+.UseStyledSystem-module__hop-bl-active___qbrLo:active {
   --hop-bl-active: initial;
   border-left: var(--hop-bl-active) !important;
 }
-.UseStyledSystem-module__hop-br-active___0EeBh:active {
+.UseStyledSystem-module__hop-br-active___aRmLI:active {
   --hop-br-active: initial;
   border-right: var(--hop-br-active) !important;
 }
-.UseStyledSystem-module__hop-bt-active___RXq33:active {
+.UseStyledSystem-module__hop-bt-active___75-yZ:active {
   --hop-bt-active: initial;
   border-top: var(--hop-bt-active) !important;
 }
-.UseStyledSystem-module__hop-bg-hover___w134R:hover {
+.UseStyledSystem-module__hop-bg-hover___BAsJt:hover {
   --hop-bg-hover: initial;
   background-color: var(--hop-bg-hover) !important;
 }
-.UseStyledSystem-module__hop-bg-focus___GcLCI:focus-visible {
+.UseStyledSystem-module__hop-bg-focus___wmDkz:focus-visible {
   --hop-bg-focus: initial;
   background-color: var(--hop-bg-focus) !important;
 }
-.UseStyledSystem-module__hop-bg-active___rdOhL:active {
+.UseStyledSystem-module__hop-bg-active___l4tex:active {
   --hop-bg-active: initial;
   background-color: var(--hop-bg-active) !important;
 }
-.UseStyledSystem-module__hop-bs-hover___y-aEQ:hover {
+.UseStyledSystem-module__hop-bs-hover___o6LSh:hover {
   --hop-bs-hover: initial;
   box-shadow: var(--hop-bs-hover) !important;
 }
-.UseStyledSystem-module__hop-bs-focus___qMKoc:focus-visible {
+.UseStyledSystem-module__hop-bs-focus___6nNJH:focus-visible {
   --hop-bs-focus: initial;
   box-shadow: var(--hop-bs-focus) !important;
 }
-.UseStyledSystem-module__hop-bs-active___8MtLu:active {
+.UseStyledSystem-module__hop-bs-active___d7Ec-:active {
   --hop-bs-active: initial;
   box-shadow: var(--hop-bs-active) !important;
 }
-.UseStyledSystem-module__hop-c-hover___m3q2O:hover {
+.UseStyledSystem-module__hop-c-hover___uveCx:hover {
   --hop-c-hover: initial;
   color: var(--hop-c-hover) !important;
 }
-.UseStyledSystem-module__hop-c-focus___ToVnJ:focus-visible {
+.UseStyledSystem-module__hop-c-focus___bYVxt:focus-visible {
   --hop-c-focus: initial;
   color: var(--hop-c-focus) !important;
 }
-.UseStyledSystem-module__hop-c-active___PorM-:active {
+.UseStyledSystem-module__hop-c-active___pSKRG:active {
   --hop-c-active: initial;
   color: var(--hop-c-active) !important;
 }
-.UseStyledSystem-module__hop-cs-hover___lQTKe:hover {
+.UseStyledSystem-module__hop-cs-hover___rLWvX:hover {
   --hop-cs-hover: initial;
   cursor: var(--hop-cs-hover) !important;
 }
-.UseStyledSystem-module__hop-f-hover___KvbSc:hover {
+.UseStyledSystem-module__hop-f-hover___WhWFr:hover {
   --hop-f-hover: initial;
   fill: var(--hop-f-hover) !important;
 }
-.UseStyledSystem-module__hop-f-focus___eFUxf:focus-visible {
+.UseStyledSystem-module__hop-f-focus___YVEAE:focus-visible {
   --hop-f-focus: initial;
   fill: var(--hop-f-focus) !important;
 }
-.UseStyledSystem-module__hop-o-hover___WyG8r:hover {
+.UseStyledSystem-module__hop-o-hover___Fz6bG:hover {
   --hop-o-hover: initial;
   opacity: var(--hop-o-hover) !important;
 }
-.UseStyledSystem-module__hop-o-focus___NDLtq:focus-visible {
+.UseStyledSystem-module__hop-o-focus___Qj2Lh:focus-visible {
   --hop-o-focus: initial;
   opacity: var(--hop-o-focus) !important;
 }
-.UseStyledSystem-module__hop-o-active___L-qyl:active {
+.UseStyledSystem-module__hop-o-active___cm3NT:active {
   --hop-o-active: initial;
   opacity: var(--hop-o-active) !important;
 }
-.UseStyledSystem-module__hop-ol-focus___Yw8fd:focus-visible {
+.UseStyledSystem-module__hop-ol-focus___TQMP-:focus-visible {
   --hop-ol-focus: initial;
   color: var(--hop-ol-focus) !important;
 }
 
 /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/styled-system/src/html-wrappers/htmlElement.module.css/#css-module-data */
-:where(.htmlElement-module__html-element___mTHcW),
-:where(.htmlElement-module__html-element___mTHcW::after),
-:where(.htmlElement-module__html-element___mTHcW::before) {
+:where(.htmlElement-module__html-element___X3XT3),
+:where(.htmlElement-module__html-element___X3XT3::after),
+:where(.htmlElement-module__html-element___X3XT3::before) {
   box-sizing: border-box;
 }

package/dist/html-wrappers/htmlElement.js

@@ -1,5 +1,5 @@
-export { htmlElement } from '../chunk-UTFGHZHA.js';
-import '../chunk-5XPS6ZZ7.js';
+export { htmlElement } from '../chunk-B6X5QHOR.js';
+import '../chunk-7DJQGTVY.js';
 import '../chunk-T2LQYER5.js';
 import '../chunk-PCGVOTW3.js';
 import '../chunk-SFOVKOPG.js';

package/dist/index.css

@@ -1,132 +1,132 @@
 /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/styled-system/src/UseStyledSystem.module.css/#css-module-data */
-.UseStyledSystem-module__hop-b-hover___GVP3r:hover {
+.UseStyledSystem-module__hop-b-hover___PCiT6:hover {
   --hop-b-hover: initial;
   border: var(--hop-b-hover) !important;
 }
-.UseStyledSystem-module__hop-bb-hover___idnOk:hover {
+.UseStyledSystem-module__hop-bb-hover___lTydY:hover {
   --hop-bb-hover: initial;
   border-bottom: var(--hop-bb-hover) !important;
 }
-.UseStyledSystem-module__hop-bl-hover___xhKyA:hover {
+.UseStyledSystem-module__hop-bl-hover___jMTE-:hover {
   --hop-bl-hover: initial;
   border-left: var(--hop-bl-hover) !important;
 }
-.UseStyledSystem-module__hop-br-hover___qYvoG:hover {
+.UseStyledSystem-module__hop-br-hover___bJ83o:hover {
   --hop-br-hover: initial;
   border-right: var(--hop-br-hover) !important;
 }
-.UseStyledSystem-module__hop-bt-hover___3HGdJ:hover {
+.UseStyledSystem-module__hop-bt-hover___eDPfm:hover {
   --hop-bt-hover: initial;
   border-top: var(--hop-bt-hover) !important;
 }
-.UseStyledSystem-module__hop-b-focus___v2Wwi:focus-visible {
+.UseStyledSystem-module__hop-b-focus___sGCIR:focus-visible {
   --hop-b-focus: initial;
   border: var(--hop-b-focus) !important;
 }
-.UseStyledSystem-module__hop-bb-focus___itBFq:focus-visible {
+.UseStyledSystem-module__hop-bb-focus___eHDgZ:focus-visible {
   --hop-bb-focus: initial;
   border-bottom: var(--hop-bb-focus) !important;
 }
-.UseStyledSystem-module__hop-bl-focus___dT6WS:focus-visible {
+.UseStyledSystem-module__hop-bl-focus___oVWyr:focus-visible {
   --hop-bl-focus: initial;
   border-left: var(--hop-bl-focus) !important;
 }
-.UseStyledSystem-module__hop-br-focus___FPZjN:focus-visible {
+.UseStyledSystem-module__hop-br-focus___m4ZZI:focus-visible {
   --hop-br-focus: initial;
   border-right: var(--hop-br-focus) !important;
 }
-.UseStyledSystem-module__hop-bt-focus___SBwfM:focus-visible {
+.UseStyledSystem-module__hop-bt-focus___XT0JW:focus-visible {
   --hop-bt-focus: initial;
   border-top: var(--hop-bt-focus) !important;
 }
-.UseStyledSystem-module__hop-b-active___vI8-0:active {
+.UseStyledSystem-module__hop-b-active___xKyzt:active {
   --hop-b-active: initial;
   border: var(--hop-b-active) !important;
 }
-.UseStyledSystem-module__hop-bb-active___50sg5:active {
+.UseStyledSystem-module__hop-bb-active___9vrWq:active {
   --hop-bb-active: initial;
   border-bottom: var(--hop-bb-active) !important;
 }
-.UseStyledSystem-module__hop-bl-active___jTAz1:active {
+.UseStyledSystem-module__hop-bl-active___qbrLo:active {
   --hop-bl-active: initial;
   border-left: var(--hop-bl-active) !important;
 }
-.UseStyledSystem-module__hop-br-active___0EeBh:active {
+.UseStyledSystem-module__hop-br-active___aRmLI:active {
   --hop-br-active: initial;
   border-right: var(--hop-br-active) !important;
 }
-.UseStyledSystem-module__hop-bt-active___RXq33:active {
+.UseStyledSystem-module__hop-bt-active___75-yZ:active {
   --hop-bt-active: initial;
   border-top: var(--hop-bt-active) !important;
 }
-.UseStyledSystem-module__hop-bg-hover___w134R:hover {
+.UseStyledSystem-module__hop-bg-hover___BAsJt:hover {
   --hop-bg-hover: initial;
   background-color: var(--hop-bg-hover) !important;
 }
-.UseStyledSystem-module__hop-bg-focus___GcLCI:focus-visible {
+.UseStyledSystem-module__hop-bg-focus___wmDkz:focus-visible {
   --hop-bg-focus: initial;
   background-color: var(--hop-bg-focus) !important;
 }
-.UseStyledSystem-module__hop-bg-active___rdOhL:active {
+.UseStyledSystem-module__hop-bg-active___l4tex:active {
   --hop-bg-active: initial;
   background-color: var(--hop-bg-active) !important;
 }
-.UseStyledSystem-module__hop-bs-hover___y-aEQ:hover {
+.UseStyledSystem-module__hop-bs-hover___o6LSh:hover {
   --hop-bs-hover: initial;
   box-shadow: var(--hop-bs-hover) !important;
 }
-.UseStyledSystem-module__hop-bs-focus___qMKoc:focus-visible {
+.UseStyledSystem-module__hop-bs-focus___6nNJH:focus-visible {
   --hop-bs-focus: initial;
   box-shadow: var(--hop-bs-focus) !important;
 }
-.UseStyledSystem-module__hop-bs-active___8MtLu:active {
+.UseStyledSystem-module__hop-bs-active___d7Ec-:active {
   --hop-bs-active: initial;
   box-shadow: var(--hop-bs-active) !important;
 }
-.UseStyledSystem-module__hop-c-hover___m3q2O:hover {
+.UseStyledSystem-module__hop-c-hover___uveCx:hover {
   --hop-c-hover: initial;
   color: var(--hop-c-hover) !important;
 }
-.UseStyledSystem-module__hop-c-focus___ToVnJ:focus-visible {
+.UseStyledSystem-module__hop-c-focus___bYVxt:focus-visible {
   --hop-c-focus: initial;
   color: var(--hop-c-focus) !important;
 }
-.UseStyledSystem-module__hop-c-active___PorM-:active {
+.UseStyledSystem-module__hop-c-active___pSKRG:active {
   --hop-c-active: initial;
   color: var(--hop-c-active) !important;
 }
-.UseStyledSystem-module__hop-cs-hover___lQTKe:hover {
+.UseStyledSystem-module__hop-cs-hover___rLWvX:hover {
   --hop-cs-hover: initial;
   cursor: var(--hop-cs-hover) !important;
 }
-.UseStyledSystem-module__hop-f-hover___KvbSc:hover {
+.UseStyledSystem-module__hop-f-hover___WhWFr:hover {
   --hop-f-hover: initial;
   fill: var(--hop-f-hover) !important;
 }
-.UseStyledSystem-module__hop-f-focus___eFUxf:focus-visible {
+.UseStyledSystem-module__hop-f-focus___YVEAE:focus-visible {
   --hop-f-focus: initial;
   fill: var(--hop-f-focus) !important;
 }
-.UseStyledSystem-module__hop-o-hover___WyG8r:hover {
+.UseStyledSystem-module__hop-o-hover___Fz6bG:hover {
   --hop-o-hover: initial;
   opacity: var(--hop-o-hover) !important;
 }
-.UseStyledSystem-module__hop-o-focus___NDLtq:focus-visible {
+.UseStyledSystem-module__hop-o-focus___Qj2Lh:focus-visible {
   --hop-o-focus: initial;
   opacity: var(--hop-o-focus) !important;
 }
-.UseStyledSystem-module__hop-o-active___L-qyl:active {
+.UseStyledSystem-module__hop-o-active___cm3NT:active {
   --hop-o-active: initial;
   opacity: var(--hop-o-active) !important;
 }
-.UseStyledSystem-module__hop-ol-focus___Yw8fd:focus-visible {
+.UseStyledSystem-module__hop-ol-focus___TQMP-:focus-visible {
   --hop-ol-focus: initial;
   color: var(--hop-ol-focus) !important;
 }
 
 /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/styled-system/src/html-wrappers/htmlElement.module.css/#css-module-data */
-:where(.htmlElement-module__html-element___mTHcW),
-:where(.htmlElement-module__html-element___mTHcW::after),
-:where(.htmlElement-module__html-element___mTHcW::before) {
+:where(.htmlElement-module__html-element___X3XT3),
+:where(.htmlElement-module__html-element___X3XT3::after),
+:where(.htmlElement-module__html-element___X3XT3::before) {
   box-sizing: border-box;
 }

package/dist/index.js

@@ -1,18 +1,18 @@
-export { StyledSystemProvider } from './chunk-7XB4VCCJ.js';
-export { BodyStyleProvider } from './chunk-Z7O4JONV.js';
+export { _StyledSystemProvider as StyledSystemProvider } from './chunk-4W2Y5NP7.js';
+export { BodyStyleProvider } from './chunk-QM2KKTRJ.js';
 export { useIsomorphicLayoutEffect } from './chunk-3YM73BQP.js';
 export { ThemeComputedStyle } from './chunk-B6ZBFYWJ.js';
-export { A, Address, Article, Aside, Div, HtmlButton, HtmlFooter, HtmlForm, HtmlH1, HtmlH2, HtmlH3, HtmlH4, HtmlH5, HtmlH6, HtmlHeader, HtmlInput, HtmlLabel, HtmlParagraph, HtmlSection, HtmlTextArea, Img, LI, Main, Nav, OL, Span, TBody, TD, TFoot, TH, THead, TR, Table, UL } from './chunk-BTJMZT3L.js';
-export { htmlElement } from './chunk-UTFGHZHA.js';
+export { A, Address, Article, Aside, Div, HtmlButton, HtmlFooter, HtmlForm, HtmlH1, HtmlH2, HtmlH3, HtmlH4, HtmlH5, HtmlH6, HtmlHeader, HtmlInput, HtmlLabel, HtmlParagraph, HtmlSection, HtmlTextArea, Img, LI, Main, Nav, OL, Span, TBody, TD, TFoot, TH, THead, TR, Table, UL } from './chunk-C2ZCLERY.js';
+export { htmlElement } from './chunk-B6X5QHOR.js';
 export { BreakpointProvider, DefaultUnsupportedMatchMediaBreakpoint } from './chunk-MCUHAIA4.js';
-export { TokenProvider } from './chunk-AMNZEPOY.js';
-export { Tokens } from './chunk-A47SIZVA.js';
+export { TokenProvider } from './chunk-6QQ7EFT3.js';
+export { Tokens } from './chunk-4YLLB6OG.js';
 import './chunk-ZKEMKHXY.js';
-import './chunk-HAB2KYRH.js';
+import './chunk-AGTKHWTQ.js';
 export { useInsertStyleElement } from './chunk-RIORU7JO.js';
 export { useIsomorphicInsertionEffect } from './chunk-YPIK2HRL.js';
-export { HopperRootCssClass, StyledSystemRootCssClass } from './chunk-HZFB352P.js';
-export { isStyledSystemProp, useStyledSystem } from './chunk-5XPS6ZZ7.js';
+export { HopperRootCssClass, StyledSystemRootCssClass } from './chunk-ZAVRK5U2.js';
+export { isStyledSystemProp, useStyledSystem } from './chunk-7DJQGTVY.js';
 export { BackgroundColorMapping, BorderMapping, BorderRadiusMapping, BoxShadowMapping, ColorExpressionTypes, ColorMapping, ComplexMarginMapping, ComplexPaddingMapping, DataVizColorMapping, DefaultBorderWidthAndStyle, FontFamilyMapping, FontSizeMapping, FontWeightMapping, IconColorMapping, LineHeightMapping, SimpleMarginMapping, SimplePaddingMapping, SizingMapping, SpaceMapping, TextColorMapping, getSystemValue, parseResponsiveSystemValue } from './chunk-T2LQYER5.js';
 import './chunk-PCGVOTW3.js';
 export { isResponsiveObject, parseResponsiveValue, useResponsiveValue } from './chunk-SFOVKOPG.js';

package/dist/styled-system-root-css-class.js

@@ -1,2 +1,2 @@
-export { HopperRootCssClass, StyledSystemRootCssClass } from './chunk-HZFB352P.js';
+export { HopperRootCssClass, StyledSystemRootCssClass } from './chunk-ZAVRK5U2.js';
 import './chunk-6LX4VMOV.js';

package/dist/tokens/TokenProvider.js

@@ -1,9 +1,9 @@
-export { TokenProvider } from '../chunk-AMNZEPOY.js';
-import '../chunk-A47SIZVA.js';
+export { TokenProvider } from '../chunk-6QQ7EFT3.js';
+import '../chunk-4YLLB6OG.js';
 import '../chunk-ZKEMKHXY.js';
-import '../chunk-HAB2KYRH.js';
+import '../chunk-AGTKHWTQ.js';
 import '../chunk-RIORU7JO.js';
 import '../chunk-YPIK2HRL.js';
-import '../chunk-HZFB352P.js';
+import '../chunk-ZAVRK5U2.js';
 import '../chunk-U5R6ZXH3.js';
 import '../chunk-6LX4VMOV.js';

package/dist/tokens/generated/light-semantic-tokens.js

@@ -1,2 +1,2 @@
-export { CoreTokens, SemanticTokens } from '../../chunk-HAB2KYRH.js';
+export { CoreTokens, SemanticTokens } from '../../chunk-AGTKHWTQ.js';
 import '../../chunk-6LX4VMOV.js';

package/dist/tokens/tokens.js

@@ -1,4 +1,4 @@
-export { Tokens } from '../chunk-A47SIZVA.js';
+export { Tokens } from '../chunk-4YLLB6OG.js';
 import '../chunk-ZKEMKHXY.js';
-import '../chunk-HAB2KYRH.js';
+import '../chunk-AGTKHWTQ.js';
 import '../chunk-6LX4VMOV.js';

package/dist/useStyledSystem.css

@@ -1,125 +1,125 @@
 /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/styled-system/src/UseStyledSystem.module.css/#css-module-data */
-.UseStyledSystem-module__hop-b-hover___GVP3r:hover {
+.UseStyledSystem-module__hop-b-hover___PCiT6:hover {
   --hop-b-hover: initial;
   border: var(--hop-b-hover) !important;
 }
-.UseStyledSystem-module__hop-bb-hover___idnOk:hover {
+.UseStyledSystem-module__hop-bb-hover___lTydY:hover {
   --hop-bb-hover: initial;
   border-bottom: var(--hop-bb-hover) !important;
 }
-.UseStyledSystem-module__hop-bl-hover___xhKyA:hover {
+.UseStyledSystem-module__hop-bl-hover___jMTE-:hover {
   --hop-bl-hover: initial;
   border-left: var(--hop-bl-hover) !important;
 }
-.UseStyledSystem-module__hop-br-hover___qYvoG:hover {
+.UseStyledSystem-module__hop-br-hover___bJ83o:hover {
   --hop-br-hover: initial;
   border-right: var(--hop-br-hover) !important;
 }
-.UseStyledSystem-module__hop-bt-hover___3HGdJ:hover {
+.UseStyledSystem-module__hop-bt-hover___eDPfm:hover {
   --hop-bt-hover: initial;
   border-top: var(--hop-bt-hover) !important;
 }
-.UseStyledSystem-module__hop-b-focus___v2Wwi:focus-visible {
+.UseStyledSystem-module__hop-b-focus___sGCIR:focus-visible {
   --hop-b-focus: initial;
   border: var(--hop-b-focus) !important;
 }
-.UseStyledSystem-module__hop-bb-focus___itBFq:focus-visible {
+.UseStyledSystem-module__hop-bb-focus___eHDgZ:focus-visible {
   --hop-bb-focus: initial;
   border-bottom: var(--hop-bb-focus) !important;
 }
-.UseStyledSystem-module__hop-bl-focus___dT6WS:focus-visible {
+.UseStyledSystem-module__hop-bl-focus___oVWyr:focus-visible {
   --hop-bl-focus: initial;
   border-left: var(--hop-bl-focus) !important;
 }
-.UseStyledSystem-module__hop-br-focus___FPZjN:focus-visible {
+.UseStyledSystem-module__hop-br-focus___m4ZZI:focus-visible {
   --hop-br-focus: initial;
   border-right: var(--hop-br-focus) !important;
 }
-.UseStyledSystem-module__hop-bt-focus___SBwfM:focus-visible {
+.UseStyledSystem-module__hop-bt-focus___XT0JW:focus-visible {
   --hop-bt-focus: initial;
   border-top: var(--hop-bt-focus) !important;
 }
-.UseStyledSystem-module__hop-b-active___vI8-0:active {
+.UseStyledSystem-module__hop-b-active___xKyzt:active {
   --hop-b-active: initial;
   border: var(--hop-b-active) !important;
 }
-.UseStyledSystem-module__hop-bb-active___50sg5:active {
+.UseStyledSystem-module__hop-bb-active___9vrWq:active {
   --hop-bb-active: initial;
   border-bottom: var(--hop-bb-active) !important;
 }
-.UseStyledSystem-module__hop-bl-active___jTAz1:active {
+.UseStyledSystem-module__hop-bl-active___qbrLo:active {
   --hop-bl-active: initial;
   border-left: var(--hop-bl-active) !important;
 }
-.UseStyledSystem-module__hop-br-active___0EeBh:active {
+.UseStyledSystem-module__hop-br-active___aRmLI:active {
   --hop-br-active: initial;
   border-right: var(--hop-br-active) !important;
 }
-.UseStyledSystem-module__hop-bt-active___RXq33:active {
+.UseStyledSystem-module__hop-bt-active___75-yZ:active {
   --hop-bt-active: initial;
   border-top: var(--hop-bt-active) !important;
 }
-.UseStyledSystem-module__hop-bg-hover___w134R:hover {
+.UseStyledSystem-module__hop-bg-hover___BAsJt:hover {
   --hop-bg-hover: initial;
   background-color: var(--hop-bg-hover) !important;
 }
-.UseStyledSystem-module__hop-bg-focus___GcLCI:focus-visible {
+.UseStyledSystem-module__hop-bg-focus___wmDkz:focus-visible {
   --hop-bg-focus: initial;
   background-color: var(--hop-bg-focus) !important;
 }
-.UseStyledSystem-module__hop-bg-active___rdOhL:active {
+.UseStyledSystem-module__hop-bg-active___l4tex:active {
   --hop-bg-active: initial;
   background-color: var(--hop-bg-active) !important;
 }
-.UseStyledSystem-module__hop-bs-hover___y-aEQ:hover {
+.UseStyledSystem-module__hop-bs-hover___o6LSh:hover {
   --hop-bs-hover: initial;
   box-shadow: var(--hop-bs-hover) !important;
 }
-.UseStyledSystem-module__hop-bs-focus___qMKoc:focus-visible {
+.UseStyledSystem-module__hop-bs-focus___6nNJH:focus-visible {
   --hop-bs-focus: initial;
   box-shadow: var(--hop-bs-focus) !important;
 }
-.UseStyledSystem-module__hop-bs-active___8MtLu:active {
+.UseStyledSystem-module__hop-bs-active___d7Ec-:active {
   --hop-bs-active: initial;
   box-shadow: var(--hop-bs-active) !important;
 }
-.UseStyledSystem-module__hop-c-hover___m3q2O:hover {
+.UseStyledSystem-module__hop-c-hover___uveCx:hover {
   --hop-c-hover: initial;
   color: var(--hop-c-hover) !important;
 }
-.UseStyledSystem-module__hop-c-focus___ToVnJ:focus-visible {
+.UseStyledSystem-module__hop-c-focus___bYVxt:focus-visible {
   --hop-c-focus: initial;
   color: var(--hop-c-focus) !important;
 }
-.UseStyledSystem-module__hop-c-active___PorM-:active {
+.UseStyledSystem-module__hop-c-active___pSKRG:active {
   --hop-c-active: initial;
   color: var(--hop-c-active) !important;
 }
-.UseStyledSystem-module__hop-cs-hover___lQTKe:hover {
+.UseStyledSystem-module__hop-cs-hover___rLWvX:hover {
   --hop-cs-hover: initial;
   cursor: var(--hop-cs-hover) !important;
 }
-.UseStyledSystem-module__hop-f-hover___KvbSc:hover {
+.UseStyledSystem-module__hop-f-hover___WhWFr:hover {
   --hop-f-hover: initial;
   fill: var(--hop-f-hover) !important;
 }
-.UseStyledSystem-module__hop-f-focus___eFUxf:focus-visible {
+.UseStyledSystem-module__hop-f-focus___YVEAE:focus-visible {
   --hop-f-focus: initial;
   fill: var(--hop-f-focus) !important;
 }
-.UseStyledSystem-module__hop-o-hover___WyG8r:hover {
+.UseStyledSystem-module__hop-o-hover___Fz6bG:hover {
   --hop-o-hover: initial;
   opacity: var(--hop-o-hover) !important;
 }
-.UseStyledSystem-module__hop-o-focus___NDLtq:focus-visible {
+.UseStyledSystem-module__hop-o-focus___Qj2Lh:focus-visible {
   --hop-o-focus: initial;
   opacity: var(--hop-o-focus) !important;
 }
-.UseStyledSystem-module__hop-o-active___L-qyl:active {
+.UseStyledSystem-module__hop-o-active___cm3NT:active {
   --hop-o-active: initial;
   opacity: var(--hop-o-active) !important;
 }
-.UseStyledSystem-module__hop-ol-focus___Yw8fd:focus-visible {
+.UseStyledSystem-module__hop-ol-focus___TQMP-:focus-visible {
   --hop-ol-focus: initial;
   color: var(--hop-ol-focus) !important;
 }

package/dist/useStyledSystem.js

@@ -1,4 +1,4 @@
-export { isStyledSystemProp, useStyledSystem } from './chunk-5XPS6ZZ7.js';
+export { isStyledSystemProp, useStyledSystem } from './chunk-7DJQGTVY.js';
 import './chunk-T2LQYER5.js';
 import './chunk-PCGVOTW3.js';
 import './chunk-SFOVKOPG.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hopper-ui/styled-system",
   "author": "Workleap",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "description": "The styled-system package.",
   "license": "Apache-2.0",
   "repository": {
@@ -67,7 +67,7 @@
     "tsup": "8.0.1",
     "type-fest": "4.10.1",
     "typescript": "5.3.3",
-    "@hopper-ui/tokens": "3.1.4"
+    "@hopper-ui/tokens": "3.1.5"
   },
   "scripts": {
     "dev": "tsup --config ./tsup.dev.ts",