@hopper-ui/styled-system 0.3.0 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @hopper-ui/styled-system
 
+## 1.1.0
+
+### Minor Changes
+
+- 6a2fe45: Added offset tokens to semantic Typographic composite tokens
+
+## 1.0.0
+
+### Major Changes
+
+- 93a1a16: - Changed the useStyledSystem hook to return an object containing the className and the style, instead of merging it with the input props.
+  - Added some sizing options while we wait for the sizing tokens
+
 ## 0.3.0
 
 ### Minor Changes

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___0C6gb:hover {
+.UseStyledSystem-module__hop-b-hover___v8kki:hover {
   --hop-b-hover: initial;
   border: var(--hop-b-hover) !important;
 }
-.UseStyledSystem-module__hop-bb-hover___5R8GS:hover {
+.UseStyledSystem-module__hop-bb-hover___s6F81:hover {
   --hop-bb-hover: initial;
   border-bottom: var(--hop-bb-hover) !important;
 }
-.UseStyledSystem-module__hop-bl-hover___IkHkD:hover {
+.UseStyledSystem-module__hop-bl-hover___tO04m:hover {
   --hop-bl-hover: initial;
   border-left: var(--hop-bl-hover) !important;
 }
-.UseStyledSystem-module__hop-br-hover___jfMkk:hover {
+.UseStyledSystem-module__hop-br-hover___OWDdB:hover {
   --hop-br-hover: initial;
   border-right: var(--hop-br-hover) !important;
 }
-.UseStyledSystem-module__hop-bt-hover___Fh4KI:hover {
+.UseStyledSystem-module__hop-bt-hover___vZ-JR:hover {
   --hop-bt-hover: initial;
   border-top: var(--hop-bt-hover) !important;
 }
-.UseStyledSystem-module__hop-b-focus___42wnu:focus-visible {
+.UseStyledSystem-module__hop-b-focus___eLvPm:focus-visible {
   --hop-b-focus: initial;
   border: var(--hop-b-focus) !important;
 }
-.UseStyledSystem-module__hop-bb-focus___d7tJL:focus-visible {
+.UseStyledSystem-module__hop-bb-focus___RQ0ux:focus-visible {
   --hop-bb-focus: initial;
   border-bottom: var(--hop-bb-focus) !important;
 }
-.UseStyledSystem-module__hop-bl-focus___lIBdy:focus-visible {
+.UseStyledSystem-module__hop-bl-focus___b4F4D:focus-visible {
   --hop-bl-focus: initial;
   border-left: var(--hop-bl-focus) !important;
 }
-.UseStyledSystem-module__hop-br-focus___-51b1:focus-visible {
+.UseStyledSystem-module__hop-br-focus___YvZ0-:focus-visible {
   --hop-br-focus: initial;
   border-right: var(--hop-br-focus) !important;
 }
-.UseStyledSystem-module__hop-bt-focus___LgviM:focus-visible {
+.UseStyledSystem-module__hop-bt-focus___kmT9B:focus-visible {
   --hop-bt-focus: initial;
   border-top: var(--hop-bt-focus) !important;
 }
-.UseStyledSystem-module__hop-b-active___ONrdf:active {
+.UseStyledSystem-module__hop-b-active___jKktg:active {
   --hop-b-active: initial;
   border: var(--hop-b-active) !important;
 }
-.UseStyledSystem-module__hop-bb-active___G6hdU:active {
+.UseStyledSystem-module__hop-bb-active___F9aRL:active {
   --hop-bb-active: initial;
   border-bottom: var(--hop-bb-active) !important;
 }
-.UseStyledSystem-module__hop-bl-active___5Fy9s:active {
+.UseStyledSystem-module__hop-bl-active___7b6w-:active {
   --hop-bl-active: initial;
   border-left: var(--hop-bl-active) !important;
 }
-.UseStyledSystem-module__hop-br-active___sW0IG:active {
+.UseStyledSystem-module__hop-br-active___a76LS:active {
   --hop-br-active: initial;
   border-right: var(--hop-br-active) !important;
 }
-.UseStyledSystem-module__hop-bt-active___bZo82:active {
+.UseStyledSystem-module__hop-bt-active___Y8R5g:active {
   --hop-bt-active: initial;
   border-top: var(--hop-bt-active) !important;
 }
-.UseStyledSystem-module__hop-bg-hover___JI8Yq:hover {
+.UseStyledSystem-module__hop-bg-hover___rjc8F:hover {
   --hop-bg-hover: initial;
   background-color: var(--hop-bg-hover) !important;
 }
-.UseStyledSystem-module__hop-bg-focus___zhYwB:focus-visible {
+.UseStyledSystem-module__hop-bg-focus___0R4Lu:focus-visible {
   --hop-bg-focus: initial;
   background-color: var(--hop-bg-focus) !important;
 }
-.UseStyledSystem-module__hop-bg-active___zE0Q1:active {
+.UseStyledSystem-module__hop-bg-active___pmKdb:active {
   --hop-bg-active: initial;
   background-color: var(--hop-bg-active) !important;
 }
-.UseStyledSystem-module__hop-bs-hover___J0gS8:hover {
+.UseStyledSystem-module__hop-bs-hover___-OvG-:hover {
   --hop-bs-hover: initial;
   box-shadow: var(--hop-bs-hover) !important;
 }
-.UseStyledSystem-module__hop-bs-focus___XMm0W:focus-visible {
+.UseStyledSystem-module__hop-bs-focus___JiReX:focus-visible {
   --hop-bs-focus: initial;
   box-shadow: var(--hop-bs-focus) !important;
 }
-.UseStyledSystem-module__hop-bs-active___wOS0j:active {
+.UseStyledSystem-module__hop-bs-active___Jmvvh:active {
   --hop-bs-active: initial;
   box-shadow: var(--hop-bs-active) !important;
 }
-.UseStyledSystem-module__hop-c-hover___DNEzP:hover {
+.UseStyledSystem-module__hop-c-hover___YhtkL:hover {
   --hop-c-hover: initial;
   color: var(--hop-c-hover) !important;
 }
-.UseStyledSystem-module__hop-c-focus___2pd7x:focus-visible {
+.UseStyledSystem-module__hop-c-focus___Aq77N:focus-visible {
   --hop-c-focus: initial;
   color: var(--hop-c-focus) !important;
 }
-.UseStyledSystem-module__hop-c-active___8Iu-1:active {
+.UseStyledSystem-module__hop-c-active___QQsU9:active {
   --hop-c-active: initial;
   color: var(--hop-c-active) !important;
 }
-.UseStyledSystem-module__hop-cs-hover___y2yVN:hover {
+.UseStyledSystem-module__hop-cs-hover___S7jfy:hover {
   --hop-cs-hover: initial;
   cursor: var(--hop-cs-hover) !important;
 }
-.UseStyledSystem-module__hop-f-hover___D2vmF:hover {
+.UseStyledSystem-module__hop-f-hover___5m-9L:hover {
   --hop-f-hover: initial;
   fill: var(--hop-f-hover) !important;
 }
-.UseStyledSystem-module__hop-f-focus___M1yoY:focus-visible {
+.UseStyledSystem-module__hop-f-focus___LLUi6:focus-visible {
   --hop-f-focus: initial;
   fill: var(--hop-f-focus) !important;
 }
-.UseStyledSystem-module__hop-o-hover___ohVHL:hover {
+.UseStyledSystem-module__hop-o-hover___bjLYo:hover {
   --hop-o-hover: initial;
   opacity: var(--hop-o-hover) !important;
 }
-.UseStyledSystem-module__hop-o-focus___44Yka:focus-visible {
+.UseStyledSystem-module__hop-o-focus___eIchf:focus-visible {
   --hop-o-focus: initial;
   opacity: var(--hop-o-focus) !important;
 }
-.UseStyledSystem-module__hop-o-active___iOPL6:active {
+.UseStyledSystem-module__hop-o-active___qCLhG:active {
   --hop-o-active: initial;
   opacity: var(--hop-o-active) !important;
 }
-.UseStyledSystem-module__hop-ol-focus___eT2dD:focus-visible {
+.UseStyledSystem-module__hop-ol-focus___UcPDK: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___n0Mi3),
-:where(.htmlElement-module__html-element___n0Mi3::after),
-:where(.htmlElement-module__html-element___n0Mi3::before) {
+:where(.htmlElement-module__hop-HtmlElement___cSA3Z),
+:where(.htmlElement-module__hop-HtmlElement___cSA3Z::after),
+:where(.htmlElement-module__hop-HtmlElement___cSA3Z::before) {
   box-sizing: border-box;
 }

package/dist/StyledSystemProvider.d.ts

@@ -3,14 +3,14 @@ import { ReactNode } from 'react';
 import { ColorSchemeOrSystem, ColorScheme } from './color-scheme/ColorSchemeContext.js';
 import { DivProps } from './html-wrappers/html.js';
 import { BreakpointProviderProps } from './responsive/BreakpointProvider.js';
-import './html-wrappers/htmlElement.js';
-import './styled-system-props.js';
+import './styledSystemProps.js';
 import 'csstype';
 import './responsive/useResponsiveValue.js';
 import './responsive/Breakpoints.js';
-import './tokens/token-mappings.js';
+import './tokens/tokenMappings.js';
 import 'react/jsx-runtime';
 
+declare const GlobalStyledSystemProviderCssSelector = "hop-StyledSystemProvider";
 interface StyledSystemProviderProps extends BreakpointProviderProps, DivProps {
     /** The children of the component */
     children: ReactNode;
@@ -41,4 +41,4 @@ interface StyledSystemProviderProps extends BreakpointProviderProps, DivProps {
  */
 declare const _StyledSystemProvider: react.ForwardRefExoticComponent<Omit<StyledSystemProviderProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
 
-export { _StyledSystemProvider as StyledSystemProvider, type StyledSystemProviderProps };
+export { GlobalStyledSystemProviderCssSelector, _StyledSystemProvider as StyledSystemProvider, type StyledSystemProviderProps };

package/dist/StyledSystemProvider.js

@@ -1,25 +1,25 @@
-export { _StyledSystemProvider as StyledSystemProvider } from './chunk-XFDSFXFS.js';
-import './chunk-SE26VHVR.js';
+export { GlobalStyledSystemProviderCssSelector, _StyledSystemProvider as StyledSystemProvider } from './chunk-TJX3I2ER.js';
+import './chunk-2BSH225N.js';
 import './chunk-3YM73BQP.js';
 import './chunk-B6ZBFYWJ.js';
-import './chunk-GM53YQQK.js';
-import './chunk-3JABKEIH.js';
+import './chunk-KHRJTNYB.js';
+import './chunk-WQHLUUDG.js';
 import './chunk-MCUHAIA4.js';
-import './chunk-D4JUIZCP.js';
-import './chunk-TAIACQMV.js';
-import './chunk-ZKEMKHXY.js';
-import './chunk-3IK64CCG.js';
+import './chunk-YZ3QMR47.js';
+import './chunk-FTYCODSC.js';
+import './chunk-IMYR3NDP.js';
+import './chunk-JKXZGQAL.js';
 import './chunk-RIORU7JO.js';
 import './chunk-YPIK2HRL.js';
-import './chunk-64BX3HCB.js';
-import './chunk-P2EJTPCQ.js';
-import './chunk-T2LQYER5.js';
-import './chunk-PCGVOTW3.js';
+import './chunk-FQYMSLSL.js';
+import './chunk-37HGVAAN.js';
+import './chunk-DRFY5W7M.js';
+import './chunk-KKVEOD5L.js';
 import './chunk-SFOVKOPG.js';
 import './chunk-VBKLISDI.js';
 import './chunk-XUHDFZZL.js';
 import './chunk-U5R6ZXH3.js';
-import './chunk-I37Y2R7V.js';
+import './chunk-QMDDVBCZ.js';
 import './chunk-KLNF34G6.js';
 import './chunk-M4X2T3D3.js';
 import './chunk-V7X6ANEM.js';

package/dist/{chunk-SE26VHVR.js → chunk-2BSH225N.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-64BX3HCB.js';
+import { StyledSystemRootCssClass } from './chunk-FQYMSLSL.js';
 import { isNil } from './chunk-U5R6ZXH3.js';
 import { useColorSchemeContext } from './chunk-V7X6ANEM.js';
 import { useRef, useState } from 'react';