@hopper-ui/styled-system 0.2.6 → 0.2.7

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hopper-ui/styled-system
 
+## 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___Fy6Tx:hover {
   --hop-b-hover: initial;
   border: var(--hop-b-hover) !important;
 }
-.UseStyledSystem-module__hop-bb-hover___idnOk:hover {
+.UseStyledSystem-module__hop-bb-hover___XNCNu:hover {
   --hop-bb-hover: initial;
   border-bottom: var(--hop-bb-hover) !important;
 }
-.UseStyledSystem-module__hop-bl-hover___xhKyA:hover {
+.UseStyledSystem-module__hop-bl-hover___O3l3D:hover {
   --hop-bl-hover: initial;
   border-left: var(--hop-bl-hover) !important;
 }
-.UseStyledSystem-module__hop-br-hover___qYvoG:hover {
+.UseStyledSystem-module__hop-br-hover___05AZ-:hover {
   --hop-br-hover: initial;
   border-right: var(--hop-br-hover) !important;
 }
-.UseStyledSystem-module__hop-bt-hover___3HGdJ:hover {
+.UseStyledSystem-module__hop-bt-hover___8-kQc: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___pa6EK: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___gUvds: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___AO9Qc: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___X2j6C: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___tf-rE: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___yMjv-:active {
   --hop-b-active: initial;
   border: var(--hop-b-active) !important;
 }
-.UseStyledSystem-module__hop-bb-active___50sg5:active {
+.UseStyledSystem-module__hop-bb-active___ODaPG:active {
   --hop-bb-active: initial;
   border-bottom: var(--hop-bb-active) !important;
 }
-.UseStyledSystem-module__hop-bl-active___jTAz1:active {
+.UseStyledSystem-module__hop-bl-active___Jy7SY:active {
   --hop-bl-active: initial;
   border-left: var(--hop-bl-active) !important;
 }
-.UseStyledSystem-module__hop-br-active___0EeBh:active {
+.UseStyledSystem-module__hop-br-active___o2Tff:active {
   --hop-br-active: initial;
   border-right: var(--hop-br-active) !important;
 }
-.UseStyledSystem-module__hop-bt-active___RXq33:active {
+.UseStyledSystem-module__hop-bt-active___wRzd-:active {
   --hop-bt-active: initial;
   border-top: var(--hop-bt-active) !important;
 }
-.UseStyledSystem-module__hop-bg-hover___w134R:hover {
+.UseStyledSystem-module__hop-bg-hover___pB-VQ: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___EwM-2: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___FPUbN: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___fdtsi: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___GR-22: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___NXrax:active {
   --hop-bs-active: initial;
   box-shadow: var(--hop-bs-active) !important;
 }
-.UseStyledSystem-module__hop-c-hover___m3q2O:hover {
+.UseStyledSystem-module__hop-c-hover___F33fp:hover {
   --hop-c-hover: initial;
   color: var(--hop-c-hover) !important;
 }
-.UseStyledSystem-module__hop-c-focus___ToVnJ:focus-visible {
+.UseStyledSystem-module__hop-c-focus___svGnp:focus-visible {
   --hop-c-focus: initial;
   color: var(--hop-c-focus) !important;
 }
-.UseStyledSystem-module__hop-c-active___PorM-:active {
+.UseStyledSystem-module__hop-c-active___ETSj7:active {
   --hop-c-active: initial;
   color: var(--hop-c-active) !important;
 }
-.UseStyledSystem-module__hop-cs-hover___lQTKe:hover {
+.UseStyledSystem-module__hop-cs-hover___THdqO:hover {
   --hop-cs-hover: initial;
   cursor: var(--hop-cs-hover) !important;
 }
-.UseStyledSystem-module__hop-f-hover___KvbSc:hover {
+.UseStyledSystem-module__hop-f-hover___OyAJe:hover {
   --hop-f-hover: initial;
   fill: var(--hop-f-hover) !important;
 }
-.UseStyledSystem-module__hop-f-focus___eFUxf:focus-visible {
+.UseStyledSystem-module__hop-f-focus___0jVPn:focus-visible {
   --hop-f-focus: initial;
   fill: var(--hop-f-focus) !important;
 }
-.UseStyledSystem-module__hop-o-hover___WyG8r:hover {
+.UseStyledSystem-module__hop-o-hover___g2T2W:hover {
   --hop-o-hover: initial;
   opacity: var(--hop-o-hover) !important;
 }
-.UseStyledSystem-module__hop-o-focus___NDLtq:focus-visible {
+.UseStyledSystem-module__hop-o-focus___cR-Us: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___5hN2e:active {
   --hop-o-active: initial;
   opacity: var(--hop-o-active) !important;
 }
-.UseStyledSystem-module__hop-ol-focus___Yw8fd:focus-visible {
+.UseStyledSystem-module__hop-ol-focus___7KksN: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___Yzywg),
+:where(.htmlElement-module__html-element___Yzywg::after),
+:where(.htmlElement-module__html-element___Yzywg::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-4B7SSNXT.js';
+import './chunk-FTYJQBJC.js';
 import './chunk-3YM73BQP.js';
 import './chunk-B6ZBFYWJ.js';
-import './chunk-BTJMZT3L.js';
-import './chunk-UTFGHZHA.js';
+import './chunk-HK6L6YXX.js';
+import './chunk-TZBJDLE3.js';
 import './chunk-MCUHAIA4.js';
-import './chunk-AMNZEPOY.js';
+import './chunk-EE6BVAE2.js';
 import './chunk-A47SIZVA.js';
 import './chunk-ZKEMKHXY.js';
 import './chunk-HAB2KYRH.js';
 import './chunk-RIORU7JO.js';
 import './chunk-YPIK2HRL.js';
-import './chunk-HZFB352P.js';
-import './chunk-5XPS6ZZ7.js';
+import './chunk-K7AXEZR6.js';
+import './chunk-EAQ7TNQX.js';
 import './chunk-T2LQYER5.js';
 import './chunk-PCGVOTW3.js';
 import './chunk-SFOVKOPG.js';

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

@@ -1,26 +1,38 @@
-import { BodyStyleProvider } from './chunk-Z7O4JONV.js';
-import { Div } from './chunk-BTJMZT3L.js';
+import { BodyStyleProvider } from './chunk-FTYJQBJC.js';
+import { Div } from './chunk-HK6L6YXX.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-EE6BVAE2.js';
+import { HopperRootCssClass, StyledSystemRootCssClass } from './chunk-K7AXEZR6.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-5XPS6ZZ7.js → chunk-EAQ7TNQX.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___Fy6Tx", "hop-bb-hover": "UseStyledSystem-module__hop-bb-hover___XNCNu", "hop-bl-hover": "UseStyledSystem-module__hop-bl-hover___O3l3D", "hop-br-hover": "UseStyledSystem-module__hop-br-hover___05AZ-", "hop-bt-hover": "UseStyledSystem-module__hop-bt-hover___8-kQc", "hop-b-focus": "UseStyledSystem-module__hop-b-focus___pa6EK", "hop-bb-focus": "UseStyledSystem-module__hop-bb-focus___gUvds", "hop-bl-focus": "UseStyledSystem-module__hop-bl-focus___AO9Qc", "hop-br-focus": "UseStyledSystem-module__hop-br-focus___X2j6C", "hop-bt-focus": "UseStyledSystem-module__hop-bt-focus___tf-rE", "hop-b-active": "UseStyledSystem-module__hop-b-active___yMjv-", "hop-bb-active": "UseStyledSystem-module__hop-bb-active___ODaPG", "hop-bl-active": "UseStyledSystem-module__hop-bl-active___Jy7SY", "hop-br-active": "UseStyledSystem-module__hop-br-active___o2Tff", "hop-bt-active": "UseStyledSystem-module__hop-bt-active___wRzd-", "hop-bg-hover": "UseStyledSystem-module__hop-bg-hover___pB-VQ", "hop-bg-focus": "UseStyledSystem-module__hop-bg-focus___EwM-2", "hop-bg-active": "UseStyledSystem-module__hop-bg-active___FPUbN", "hop-bs-hover": "UseStyledSystem-module__hop-bs-hover___fdtsi", "hop-bs-focus": "UseStyledSystem-module__hop-bs-focus___GR-22", "hop-bs-active": "UseStyledSystem-module__hop-bs-active___NXrax", "hop-c-hover": "UseStyledSystem-module__hop-c-hover___F33fp", "hop-c-focus": "UseStyledSystem-module__hop-c-focus___svGnp", "hop-c-active": "UseStyledSystem-module__hop-c-active___ETSj7", "hop-cs-hover": "UseStyledSystem-module__hop-cs-hover___THdqO", "hop-f-hover": "UseStyledSystem-module__hop-f-hover___OyAJe", "hop-f-focus": "UseStyledSystem-module__hop-f-focus___0jVPn", "hop-o-hover": "UseStyledSystem-module__hop-o-hover___g2T2W", "hop-o-focus": "UseStyledSystem-module__hop-o-focus___cR-Us", "hop-o-active": "UseStyledSystem-module__hop-o-active___5hN2e", "hop-ol-focus": "UseStyledSystem-module__hop-ol-focus___7KksN" };
 
 // src/useStyledSystem.ts
 function createSystemValueHandler(systemValues) {

package/dist/{chunk-AMNZEPOY.js → chunk-EE6BVAE2.js}

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

package/dist/{chunk-Z7O4JONV.js → chunk-FTYJQBJC.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-K7AXEZR6.js';
 import { isNil } from './chunk-U5R6ZXH3.js';
 import { useColorSchemeContext } from './chunk-V7X6ANEM.js';
 import { useRef, useState } from 'react';

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

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

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

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

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

@@ -1,10 +1,10 @@
-import { useStyledSystem } from './chunk-5XPS6ZZ7.js';
+import { useStyledSystem } from './chunk-EAQ7TNQX.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___Yzywg" };
 function htmlElement(elementType) {
   return forwardRef((props, ref) => {
     const { className, children, ...rest } = useStyledSystem(props);

package/dist/global-styles/BodyStyleProvider.js

@@ -1,9 +1,9 @@
-export { BodyStyleProvider } from '../chunk-Z7O4JONV.js';
+export { BodyStyleProvider } from '../chunk-FTYJQBJC.js';
 import '../chunk-3YM73BQP.js';
 import '../chunk-B6ZBFYWJ.js';
 import '../chunk-RIORU7JO.js';
 import '../chunk-YPIK2HRL.js';
-import '../chunk-HZFB352P.js';
+import '../chunk-K7AXEZR6.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___Fy6Tx:hover {
   --hop-b-hover: initial;
   border: var(--hop-b-hover) !important;
 }
-.UseStyledSystem-module__hop-bb-hover___idnOk:hover {
+.UseStyledSystem-module__hop-bb-hover___XNCNu:hover {
   --hop-bb-hover: initial;
   border-bottom: var(--hop-bb-hover) !important;
 }
-.UseStyledSystem-module__hop-bl-hover___xhKyA:hover {
+.UseStyledSystem-module__hop-bl-hover___O3l3D:hover {
   --hop-bl-hover: initial;
   border-left: var(--hop-bl-hover) !important;
 }
-.UseStyledSystem-module__hop-br-hover___qYvoG:hover {
+.UseStyledSystem-module__hop-br-hover___05AZ-:hover {
   --hop-br-hover: initial;
   border-right: var(--hop-br-hover) !important;
 }
-.UseStyledSystem-module__hop-bt-hover___3HGdJ:hover {
+.UseStyledSystem-module__hop-bt-hover___8-kQc: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___pa6EK: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___gUvds: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___AO9Qc: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___X2j6C: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___tf-rE: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___yMjv-:active {
   --hop-b-active: initial;
   border: var(--hop-b-active) !important;
 }
-.UseStyledSystem-module__hop-bb-active___50sg5:active {
+.UseStyledSystem-module__hop-bb-active___ODaPG:active {
   --hop-bb-active: initial;
   border-bottom: var(--hop-bb-active) !important;
 }
-.UseStyledSystem-module__hop-bl-active___jTAz1:active {
+.UseStyledSystem-module__hop-bl-active___Jy7SY:active {
   --hop-bl-active: initial;
   border-left: var(--hop-bl-active) !important;
 }
-.UseStyledSystem-module__hop-br-active___0EeBh:active {
+.UseStyledSystem-module__hop-br-active___o2Tff:active {
   --hop-br-active: initial;
   border-right: var(--hop-br-active) !important;
 }
-.UseStyledSystem-module__hop-bt-active___RXq33:active {
+.UseStyledSystem-module__hop-bt-active___wRzd-:active {
   --hop-bt-active: initial;
   border-top: var(--hop-bt-active) !important;
 }
-.UseStyledSystem-module__hop-bg-hover___w134R:hover {
+.UseStyledSystem-module__hop-bg-hover___pB-VQ: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___EwM-2: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___FPUbN: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___fdtsi: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___GR-22: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___NXrax:active {
   --hop-bs-active: initial;
   box-shadow: var(--hop-bs-active) !important;
 }
-.UseStyledSystem-module__hop-c-hover___m3q2O:hover {
+.UseStyledSystem-module__hop-c-hover___F33fp:hover {
   --hop-c-hover: initial;
   color: var(--hop-c-hover) !important;
 }
-.UseStyledSystem-module__hop-c-focus___ToVnJ:focus-visible {
+.UseStyledSystem-module__hop-c-focus___svGnp:focus-visible {
   --hop-c-focus: initial;
   color: var(--hop-c-focus) !important;
 }
-.UseStyledSystem-module__hop-c-active___PorM-:active {
+.UseStyledSystem-module__hop-c-active___ETSj7:active {
   --hop-c-active: initial;
   color: var(--hop-c-active) !important;
 }
-.UseStyledSystem-module__hop-cs-hover___lQTKe:hover {
+.UseStyledSystem-module__hop-cs-hover___THdqO:hover {
   --hop-cs-hover: initial;
   cursor: var(--hop-cs-hover) !important;
 }
-.UseStyledSystem-module__hop-f-hover___KvbSc:hover {
+.UseStyledSystem-module__hop-f-hover___OyAJe:hover {
   --hop-f-hover: initial;
   fill: var(--hop-f-hover) !important;
 }
-.UseStyledSystem-module__hop-f-focus___eFUxf:focus-visible {
+.UseStyledSystem-module__hop-f-focus___0jVPn:focus-visible {
   --hop-f-focus: initial;
   fill: var(--hop-f-focus) !important;
 }
-.UseStyledSystem-module__hop-o-hover___WyG8r:hover {
+.UseStyledSystem-module__hop-o-hover___g2T2W:hover {
   --hop-o-hover: initial;
   opacity: var(--hop-o-hover) !important;
 }
-.UseStyledSystem-module__hop-o-focus___NDLtq:focus-visible {
+.UseStyledSystem-module__hop-o-focus___cR-Us: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___5hN2e:active {
   --hop-o-active: initial;
   opacity: var(--hop-o-active) !important;
 }
-.UseStyledSystem-module__hop-ol-focus___Yw8fd:focus-visible {
+.UseStyledSystem-module__hop-ol-focus___7KksN: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___Yzywg),
+:where(.htmlElement-module__html-element___Yzywg::after),
+:where(.htmlElement-module__html-element___Yzywg::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-HK6L6YXX.js';
+import '../chunk-TZBJDLE3.js';
+import '../chunk-EAQ7TNQX.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___Fy6Tx:hover {
   --hop-b-hover: initial;
   border: var(--hop-b-hover) !important;
 }
-.UseStyledSystem-module__hop-bb-hover___idnOk:hover {
+.UseStyledSystem-module__hop-bb-hover___XNCNu:hover {
   --hop-bb-hover: initial;
   border-bottom: var(--hop-bb-hover) !important;
 }
-.UseStyledSystem-module__hop-bl-hover___xhKyA:hover {
+.UseStyledSystem-module__hop-bl-hover___O3l3D:hover {
   --hop-bl-hover: initial;
   border-left: var(--hop-bl-hover) !important;
 }
-.UseStyledSystem-module__hop-br-hover___qYvoG:hover {
+.UseStyledSystem-module__hop-br-hover___05AZ-:hover {
   --hop-br-hover: initial;
   border-right: var(--hop-br-hover) !important;
 }
-.UseStyledSystem-module__hop-bt-hover___3HGdJ:hover {
+.UseStyledSystem-module__hop-bt-hover___8-kQc: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___pa6EK: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___gUvds: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___AO9Qc: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___X2j6C: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___tf-rE: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___yMjv-:active {
   --hop-b-active: initial;
   border: var(--hop-b-active) !important;
 }
-.UseStyledSystem-module__hop-bb-active___50sg5:active {
+.UseStyledSystem-module__hop-bb-active___ODaPG:active {
   --hop-bb-active: initial;
   border-bottom: var(--hop-bb-active) !important;
 }
-.UseStyledSystem-module__hop-bl-active___jTAz1:active {
+.UseStyledSystem-module__hop-bl-active___Jy7SY:active {
   --hop-bl-active: initial;
   border-left: var(--hop-bl-active) !important;
 }
-.UseStyledSystem-module__hop-br-active___0EeBh:active {
+.UseStyledSystem-module__hop-br-active___o2Tff:active {
   --hop-br-active: initial;
   border-right: var(--hop-br-active) !important;
 }
-.UseStyledSystem-module__hop-bt-active___RXq33:active {
+.UseStyledSystem-module__hop-bt-active___wRzd-:active {
   --hop-bt-active: initial;
   border-top: var(--hop-bt-active) !important;
 }
-.UseStyledSystem-module__hop-bg-hover___w134R:hover {
+.UseStyledSystem-module__hop-bg-hover___pB-VQ: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___EwM-2: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___FPUbN: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___fdtsi: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___GR-22: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___NXrax:active {
   --hop-bs-active: initial;
   box-shadow: var(--hop-bs-active) !important;
 }
-.UseStyledSystem-module__hop-c-hover___m3q2O:hover {
+.UseStyledSystem-module__hop-c-hover___F33fp:hover {
   --hop-c-hover: initial;
   color: var(--hop-c-hover) !important;
 }
-.UseStyledSystem-module__hop-c-focus___ToVnJ:focus-visible {
+.UseStyledSystem-module__hop-c-focus___svGnp:focus-visible {
   --hop-c-focus: initial;
   color: var(--hop-c-focus) !important;
 }
-.UseStyledSystem-module__hop-c-active___PorM-:active {
+.UseStyledSystem-module__hop-c-active___ETSj7:active {
   --hop-c-active: initial;
   color: var(--hop-c-active) !important;
 }
-.UseStyledSystem-module__hop-cs-hover___lQTKe:hover {
+.UseStyledSystem-module__hop-cs-hover___THdqO:hover {
   --hop-cs-hover: initial;
   cursor: var(--hop-cs-hover) !important;
 }
-.UseStyledSystem-module__hop-f-hover___KvbSc:hover {
+.UseStyledSystem-module__hop-f-hover___OyAJe:hover {
   --hop-f-hover: initial;
   fill: var(--hop-f-hover) !important;
 }
-.UseStyledSystem-module__hop-f-focus___eFUxf:focus-visible {
+.UseStyledSystem-module__hop-f-focus___0jVPn:focus-visible {
   --hop-f-focus: initial;
   fill: var(--hop-f-focus) !important;
 }
-.UseStyledSystem-module__hop-o-hover___WyG8r:hover {
+.UseStyledSystem-module__hop-o-hover___g2T2W:hover {
   --hop-o-hover: initial;
   opacity: var(--hop-o-hover) !important;
 }
-.UseStyledSystem-module__hop-o-focus___NDLtq:focus-visible {
+.UseStyledSystem-module__hop-o-focus___cR-Us: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___5hN2e:active {
   --hop-o-active: initial;
   opacity: var(--hop-o-active) !important;
 }
-.UseStyledSystem-module__hop-ol-focus___Yw8fd:focus-visible {
+.UseStyledSystem-module__hop-ol-focus___7KksN: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___Yzywg),
+:where(.htmlElement-module__html-element___Yzywg::after),
+:where(.htmlElement-module__html-element___Yzywg::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-TZBJDLE3.js';
+import '../chunk-EAQ7TNQX.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___Fy6Tx:hover {
   --hop-b-hover: initial;
   border: var(--hop-b-hover) !important;
 }
-.UseStyledSystem-module__hop-bb-hover___idnOk:hover {
+.UseStyledSystem-module__hop-bb-hover___XNCNu:hover {
   --hop-bb-hover: initial;
   border-bottom: var(--hop-bb-hover) !important;
 }
-.UseStyledSystem-module__hop-bl-hover___xhKyA:hover {
+.UseStyledSystem-module__hop-bl-hover___O3l3D:hover {
   --hop-bl-hover: initial;
   border-left: var(--hop-bl-hover) !important;
 }
-.UseStyledSystem-module__hop-br-hover___qYvoG:hover {
+.UseStyledSystem-module__hop-br-hover___05AZ-:hover {
   --hop-br-hover: initial;
   border-right: var(--hop-br-hover) !important;
 }
-.UseStyledSystem-module__hop-bt-hover___3HGdJ:hover {
+.UseStyledSystem-module__hop-bt-hover___8-kQc: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___pa6EK: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___gUvds: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___AO9Qc: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___X2j6C: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___tf-rE: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___yMjv-:active {
   --hop-b-active: initial;
   border: var(--hop-b-active) !important;
 }
-.UseStyledSystem-module__hop-bb-active___50sg5:active {
+.UseStyledSystem-module__hop-bb-active___ODaPG:active {
   --hop-bb-active: initial;
   border-bottom: var(--hop-bb-active) !important;
 }
-.UseStyledSystem-module__hop-bl-active___jTAz1:active {
+.UseStyledSystem-module__hop-bl-active___Jy7SY:active {
   --hop-bl-active: initial;
   border-left: var(--hop-bl-active) !important;
 }
-.UseStyledSystem-module__hop-br-active___0EeBh:active {
+.UseStyledSystem-module__hop-br-active___o2Tff:active {
   --hop-br-active: initial;
   border-right: var(--hop-br-active) !important;
 }
-.UseStyledSystem-module__hop-bt-active___RXq33:active {
+.UseStyledSystem-module__hop-bt-active___wRzd-:active {
   --hop-bt-active: initial;
   border-top: var(--hop-bt-active) !important;
 }
-.UseStyledSystem-module__hop-bg-hover___w134R:hover {
+.UseStyledSystem-module__hop-bg-hover___pB-VQ: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___EwM-2: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___FPUbN: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___fdtsi: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___GR-22: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___NXrax:active {
   --hop-bs-active: initial;
   box-shadow: var(--hop-bs-active) !important;
 }
-.UseStyledSystem-module__hop-c-hover___m3q2O:hover {
+.UseStyledSystem-module__hop-c-hover___F33fp:hover {
   --hop-c-hover: initial;
   color: var(--hop-c-hover) !important;
 }
-.UseStyledSystem-module__hop-c-focus___ToVnJ:focus-visible {
+.UseStyledSystem-module__hop-c-focus___svGnp:focus-visible {
   --hop-c-focus: initial;
   color: var(--hop-c-focus) !important;
 }
-.UseStyledSystem-module__hop-c-active___PorM-:active {
+.UseStyledSystem-module__hop-c-active___ETSj7:active {
   --hop-c-active: initial;
   color: var(--hop-c-active) !important;
 }
-.UseStyledSystem-module__hop-cs-hover___lQTKe:hover {
+.UseStyledSystem-module__hop-cs-hover___THdqO:hover {
   --hop-cs-hover: initial;
   cursor: var(--hop-cs-hover) !important;
 }
-.UseStyledSystem-module__hop-f-hover___KvbSc:hover {
+.UseStyledSystem-module__hop-f-hover___OyAJe:hover {
   --hop-f-hover: initial;
   fill: var(--hop-f-hover) !important;
 }
-.UseStyledSystem-module__hop-f-focus___eFUxf:focus-visible {
+.UseStyledSystem-module__hop-f-focus___0jVPn:focus-visible {
   --hop-f-focus: initial;
   fill: var(--hop-f-focus) !important;
 }
-.UseStyledSystem-module__hop-o-hover___WyG8r:hover {
+.UseStyledSystem-module__hop-o-hover___g2T2W:hover {
   --hop-o-hover: initial;
   opacity: var(--hop-o-hover) !important;
 }
-.UseStyledSystem-module__hop-o-focus___NDLtq:focus-visible {
+.UseStyledSystem-module__hop-o-focus___cR-Us: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___5hN2e:active {
   --hop-o-active: initial;
   opacity: var(--hop-o-active) !important;
 }
-.UseStyledSystem-module__hop-ol-focus___Yw8fd:focus-visible {
+.UseStyledSystem-module__hop-ol-focus___7KksN: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___Yzywg),
+:where(.htmlElement-module__html-element___Yzywg::after),
+:where(.htmlElement-module__html-element___Yzywg::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-4B7SSNXT.js';
+export { BodyStyleProvider } from './chunk-FTYJQBJC.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-HK6L6YXX.js';
+export { htmlElement } from './chunk-TZBJDLE3.js';
 export { BreakpointProvider, DefaultUnsupportedMatchMediaBreakpoint } from './chunk-MCUHAIA4.js';
-export { TokenProvider } from './chunk-AMNZEPOY.js';
+export { TokenProvider } from './chunk-EE6BVAE2.js';
 export { Tokens } from './chunk-A47SIZVA.js';
 import './chunk-ZKEMKHXY.js';
 import './chunk-HAB2KYRH.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-K7AXEZR6.js';
+export { isStyledSystemProp, useStyledSystem } from './chunk-EAQ7TNQX.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-K7AXEZR6.js';
 import './chunk-6LX4VMOV.js';

package/dist/tokens/TokenProvider.js

@@ -1,9 +1,9 @@
-export { TokenProvider } from '../chunk-AMNZEPOY.js';
+export { TokenProvider } from '../chunk-EE6BVAE2.js';
 import '../chunk-A47SIZVA.js';
 import '../chunk-ZKEMKHXY.js';
 import '../chunk-HAB2KYRH.js';
 import '../chunk-RIORU7JO.js';
 import '../chunk-YPIK2HRL.js';
-import '../chunk-HZFB352P.js';
+import '../chunk-K7AXEZR6.js';
 import '../chunk-U5R6ZXH3.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___Fy6Tx:hover {
   --hop-b-hover: initial;
   border: var(--hop-b-hover) !important;
 }
-.UseStyledSystem-module__hop-bb-hover___idnOk:hover {
+.UseStyledSystem-module__hop-bb-hover___XNCNu:hover {
   --hop-bb-hover: initial;
   border-bottom: var(--hop-bb-hover) !important;
 }
-.UseStyledSystem-module__hop-bl-hover___xhKyA:hover {
+.UseStyledSystem-module__hop-bl-hover___O3l3D:hover {
   --hop-bl-hover: initial;
   border-left: var(--hop-bl-hover) !important;
 }
-.UseStyledSystem-module__hop-br-hover___qYvoG:hover {
+.UseStyledSystem-module__hop-br-hover___05AZ-:hover {
   --hop-br-hover: initial;
   border-right: var(--hop-br-hover) !important;
 }
-.UseStyledSystem-module__hop-bt-hover___3HGdJ:hover {
+.UseStyledSystem-module__hop-bt-hover___8-kQc: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___pa6EK: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___gUvds: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___AO9Qc: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___X2j6C: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___tf-rE: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___yMjv-:active {
   --hop-b-active: initial;
   border: var(--hop-b-active) !important;
 }
-.UseStyledSystem-module__hop-bb-active___50sg5:active {
+.UseStyledSystem-module__hop-bb-active___ODaPG:active {
   --hop-bb-active: initial;
   border-bottom: var(--hop-bb-active) !important;
 }
-.UseStyledSystem-module__hop-bl-active___jTAz1:active {
+.UseStyledSystem-module__hop-bl-active___Jy7SY:active {
   --hop-bl-active: initial;
   border-left: var(--hop-bl-active) !important;
 }
-.UseStyledSystem-module__hop-br-active___0EeBh:active {
+.UseStyledSystem-module__hop-br-active___o2Tff:active {
   --hop-br-active: initial;
   border-right: var(--hop-br-active) !important;
 }
-.UseStyledSystem-module__hop-bt-active___RXq33:active {
+.UseStyledSystem-module__hop-bt-active___wRzd-:active {
   --hop-bt-active: initial;
   border-top: var(--hop-bt-active) !important;
 }
-.UseStyledSystem-module__hop-bg-hover___w134R:hover {
+.UseStyledSystem-module__hop-bg-hover___pB-VQ: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___EwM-2: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___FPUbN: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___fdtsi: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___GR-22: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___NXrax:active {
   --hop-bs-active: initial;
   box-shadow: var(--hop-bs-active) !important;
 }
-.UseStyledSystem-module__hop-c-hover___m3q2O:hover {
+.UseStyledSystem-module__hop-c-hover___F33fp:hover {
   --hop-c-hover: initial;
   color: var(--hop-c-hover) !important;
 }
-.UseStyledSystem-module__hop-c-focus___ToVnJ:focus-visible {
+.UseStyledSystem-module__hop-c-focus___svGnp:focus-visible {
   --hop-c-focus: initial;
   color: var(--hop-c-focus) !important;
 }
-.UseStyledSystem-module__hop-c-active___PorM-:active {
+.UseStyledSystem-module__hop-c-active___ETSj7:active {
   --hop-c-active: initial;
   color: var(--hop-c-active) !important;
 }
-.UseStyledSystem-module__hop-cs-hover___lQTKe:hover {
+.UseStyledSystem-module__hop-cs-hover___THdqO:hover {
   --hop-cs-hover: initial;
   cursor: var(--hop-cs-hover) !important;
 }
-.UseStyledSystem-module__hop-f-hover___KvbSc:hover {
+.UseStyledSystem-module__hop-f-hover___OyAJe:hover {
   --hop-f-hover: initial;
   fill: var(--hop-f-hover) !important;
 }
-.UseStyledSystem-module__hop-f-focus___eFUxf:focus-visible {
+.UseStyledSystem-module__hop-f-focus___0jVPn:focus-visible {
   --hop-f-focus: initial;
   fill: var(--hop-f-focus) !important;
 }
-.UseStyledSystem-module__hop-o-hover___WyG8r:hover {
+.UseStyledSystem-module__hop-o-hover___g2T2W:hover {
   --hop-o-hover: initial;
   opacity: var(--hop-o-hover) !important;
 }
-.UseStyledSystem-module__hop-o-focus___NDLtq:focus-visible {
+.UseStyledSystem-module__hop-o-focus___cR-Us: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___5hN2e:active {
   --hop-o-active: initial;
   opacity: var(--hop-o-active) !important;
 }
-.UseStyledSystem-module__hop-ol-focus___Yw8fd:focus-visible {
+.UseStyledSystem-module__hop-ol-focus___7KksN: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-EAQ7TNQX.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.7",
   "description": "The styled-system package.",
   "license": "Apache-2.0",
   "repository": {