@hopper-ui/styled-system 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hopper-ui/styled-system
 
+## 1.1.0
+
+### Minor Changes
+
+- 6a2fe45: Added offset tokens to semantic Typographic composite tokens
+
 ## 1.0.0
 
 ### Major 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___71ep8:hover {
+.UseStyledSystem-module__hop-b-hover___v8kki:hover {
   --hop-b-hover: initial;
   border: var(--hop-b-hover) !important;
 }
-.UseStyledSystem-module__hop-bb-hover___ylhBC:hover {
+.UseStyledSystem-module__hop-bb-hover___s6F81:hover {
   --hop-bb-hover: initial;
   border-bottom: var(--hop-bb-hover) !important;
 }
-.UseStyledSystem-module__hop-bl-hover___TO68v:hover {
+.UseStyledSystem-module__hop-bl-hover___tO04m:hover {
   --hop-bl-hover: initial;
   border-left: var(--hop-bl-hover) !important;
 }
-.UseStyledSystem-module__hop-br-hover___BcsdD:hover {
+.UseStyledSystem-module__hop-br-hover___OWDdB:hover {
   --hop-br-hover: initial;
   border-right: var(--hop-br-hover) !important;
 }
-.UseStyledSystem-module__hop-bt-hover___cy3wM: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___tmnq6: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___G-HZ8: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___kGmWM: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___dUPR-: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___Hrlw3: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___dHtWO:active {
+.UseStyledSystem-module__hop-b-active___jKktg:active {
   --hop-b-active: initial;
   border: var(--hop-b-active) !important;
 }
-.UseStyledSystem-module__hop-bb-active___Egybw:active {
+.UseStyledSystem-module__hop-bb-active___F9aRL:active {
   --hop-bb-active: initial;
   border-bottom: var(--hop-bb-active) !important;
 }
-.UseStyledSystem-module__hop-bl-active___jqw-D:active {
+.UseStyledSystem-module__hop-bl-active___7b6w-:active {
   --hop-bl-active: initial;
   border-left: var(--hop-bl-active) !important;
 }
-.UseStyledSystem-module__hop-br-active___ysPGE:active {
+.UseStyledSystem-module__hop-br-active___a76LS:active {
   --hop-br-active: initial;
   border-right: var(--hop-br-active) !important;
 }
-.UseStyledSystem-module__hop-bt-active___C7xuD:active {
+.UseStyledSystem-module__hop-bt-active___Y8R5g:active {
   --hop-bt-active: initial;
   border-top: var(--hop-bt-active) !important;
 }
-.UseStyledSystem-module__hop-bg-hover___1W2CI:hover {
+.UseStyledSystem-module__hop-bg-hover___rjc8F:hover {
   --hop-bg-hover: initial;
   background-color: var(--hop-bg-hover) !important;
 }
-.UseStyledSystem-module__hop-bg-focus___GQNcd: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___Bo-0I:active {
+.UseStyledSystem-module__hop-bg-active___pmKdb:active {
   --hop-bg-active: initial;
   background-color: var(--hop-bg-active) !important;
 }
-.UseStyledSystem-module__hop-bs-hover___Z1cKa:hover {
+.UseStyledSystem-module__hop-bs-hover___-OvG-:hover {
   --hop-bs-hover: initial;
   box-shadow: var(--hop-bs-hover) !important;
 }
-.UseStyledSystem-module__hop-bs-focus___tBUac: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___mkrRd:active {
+.UseStyledSystem-module__hop-bs-active___Jmvvh:active {
   --hop-bs-active: initial;
   box-shadow: var(--hop-bs-active) !important;
 }
-.UseStyledSystem-module__hop-c-hover___wiNSV:hover {
+.UseStyledSystem-module__hop-c-hover___YhtkL:hover {
   --hop-c-hover: initial;
   color: var(--hop-c-hover) !important;
 }
-.UseStyledSystem-module__hop-c-focus___59TkO: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___H8-u-:active {
+.UseStyledSystem-module__hop-c-active___QQsU9:active {
   --hop-c-active: initial;
   color: var(--hop-c-active) !important;
 }
-.UseStyledSystem-module__hop-cs-hover___igsh7:hover {
+.UseStyledSystem-module__hop-cs-hover___S7jfy:hover {
   --hop-cs-hover: initial;
   cursor: var(--hop-cs-hover) !important;
 }
-.UseStyledSystem-module__hop-f-hover___1Xk9j:hover {
+.UseStyledSystem-module__hop-f-hover___5m-9L:hover {
   --hop-f-hover: initial;
   fill: var(--hop-f-hover) !important;
 }
-.UseStyledSystem-module__hop-f-focus___Ib-hw: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___gzbqv:hover {
+.UseStyledSystem-module__hop-o-hover___bjLYo:hover {
   --hop-o-hover: initial;
   opacity: var(--hop-o-hover) !important;
 }
-.UseStyledSystem-module__hop-o-focus___Pmoy-: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___eu716:active {
+.UseStyledSystem-module__hop-o-active___qCLhG:active {
   --hop-o-active: initial;
   opacity: var(--hop-o-active) !important;
 }
-.UseStyledSystem-module__hop-ol-focus___aURRZ: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___f3WYL),
-:where(.htmlElement-module__html-element___f3WYL::after),
-:where(.htmlElement-module__html-element___f3WYL::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,11 +3,11 @@ 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 './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";

package/dist/StyledSystemProvider.js

@@ -1,25 +1,25 @@
-export { GlobalStyledSystemProviderCssSelector, _StyledSystemProvider as StyledSystemProvider } from './chunk-36LPB7RX.js';
-import './chunk-HPTCF3O5.js';
+export { GlobalStyledSystemProviderCssSelector, _StyledSystemProvider as StyledSystemProvider } from './chunk-TJX3I2ER.js';
+import './chunk-2BSH225N.js';
 import './chunk-3YM73BQP.js';
 import './chunk-B6ZBFYWJ.js';
-import './chunk-XISFZQD3.js';
-import './chunk-RG533UHT.js';
+import './chunk-KHRJTNYB.js';
+import './chunk-WQHLUUDG.js';
 import './chunk-MCUHAIA4.js';
-import './chunk-7WKPFXQZ.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-Y6PI5JPG.js';
-import './chunk-IZYWFDT7.js';
-import './chunk-ACHT4RXQ.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-HPTCF3O5.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-Y6PI5JPG.js';
+import { StyledSystemRootCssClass } from './chunk-FQYMSLSL.js';
 import { isNil } from './chunk-U5R6ZXH3.js';
 import { useColorSchemeContext } from './chunk-V7X6ANEM.js';
 import { useRef, useState } from 'react';

package/dist/{chunk-IZYWFDT7.js → chunk-37HGVAAN.js}

@@ -1,12 +1,12 @@
-import { parseResponsiveSystemValue, ColorExpressionTypes, DefaultBorderWidthAndStyle, SizingMapping, BackgroundColorMapping, BorderMapping, BorderRadiusMapping, BoxShadowMapping, TextColorMapping, SimpleMarginMapping, IconColorMapping, FontFamilyMapping, FontSizeMapping, FontWeightMapping, LineHeightMapping, ComplexMarginMapping, ComplexPaddingMapping, SimplePaddingMapping } from './chunk-ACHT4RXQ.js';
+import { parseResponsiveSystemValue, ColorExpressionTypes, DefaultBorderWidthAndStyle, SizingMapping, BackgroundColorMapping, BorderMapping, BorderRadiusMapping, BoxShadowMapping, TextColorMapping, SimpleMarginMapping, IconColorMapping, FontFamilyMapping, FontSizeMapping, FontWeightMapping, LineHeightMapping, ComplexMarginMapping, ComplexPaddingMapping, SimplePaddingMapping } from './chunk-DRFY5W7M.js';
 import { parseResponsiveValue } from './chunk-SFOVKOPG.js';
 import { useBreakpointContext } from './chunk-VBKLISDI.js';
 import { isNil } from './chunk-U5R6ZXH3.js';
-import { UnsafePrefix } from './chunk-I37Y2R7V.js';
+import { UnsafePrefix } from './chunk-QMDDVBCZ.js';
 import { __privateAdd, __publicField, __privateSet, __privateGet } from './chunk-6LX4VMOV.js';
 
 // css-module:./UseStyledSystem.module.css#css-module
-var UseStyledSystem_module_default = { "hop-b-hover": "UseStyledSystem-module__hop-b-hover___71ep8", "hop-bb-hover": "UseStyledSystem-module__hop-bb-hover___ylhBC", "hop-bl-hover": "UseStyledSystem-module__hop-bl-hover___TO68v", "hop-br-hover": "UseStyledSystem-module__hop-br-hover___BcsdD", "hop-bt-hover": "UseStyledSystem-module__hop-bt-hover___cy3wM", "hop-b-focus": "UseStyledSystem-module__hop-b-focus___tmnq6", "hop-bb-focus": "UseStyledSystem-module__hop-bb-focus___G-HZ8", "hop-bl-focus": "UseStyledSystem-module__hop-bl-focus___kGmWM", "hop-br-focus": "UseStyledSystem-module__hop-br-focus___dUPR-", "hop-bt-focus": "UseStyledSystem-module__hop-bt-focus___Hrlw3", "hop-b-active": "UseStyledSystem-module__hop-b-active___dHtWO", "hop-bb-active": "UseStyledSystem-module__hop-bb-active___Egybw", "hop-bl-active": "UseStyledSystem-module__hop-bl-active___jqw-D", "hop-br-active": "UseStyledSystem-module__hop-br-active___ysPGE", "hop-bt-active": "UseStyledSystem-module__hop-bt-active___C7xuD", "hop-bg-hover": "UseStyledSystem-module__hop-bg-hover___1W2CI", "hop-bg-focus": "UseStyledSystem-module__hop-bg-focus___GQNcd", "hop-bg-active": "UseStyledSystem-module__hop-bg-active___Bo-0I", "hop-bs-hover": "UseStyledSystem-module__hop-bs-hover___Z1cKa", "hop-bs-focus": "UseStyledSystem-module__hop-bs-focus___tBUac", "hop-bs-active": "UseStyledSystem-module__hop-bs-active___mkrRd", "hop-c-hover": "UseStyledSystem-module__hop-c-hover___wiNSV", "hop-c-focus": "UseStyledSystem-module__hop-c-focus___59TkO", "hop-c-active": "UseStyledSystem-module__hop-c-active___H8-u-", "hop-cs-hover": "UseStyledSystem-module__hop-cs-hover___igsh7", "hop-f-hover": "UseStyledSystem-module__hop-f-hover___1Xk9j", "hop-f-focus": "UseStyledSystem-module__hop-f-focus___Ib-hw", "hop-o-hover": "UseStyledSystem-module__hop-o-hover___gzbqv", "hop-o-focus": "UseStyledSystem-module__hop-o-focus___Pmoy-", "hop-o-active": "UseStyledSystem-module__hop-o-active___eu716", "hop-ol-focus": "UseStyledSystem-module__hop-ol-focus___aURRZ" };
+var UseStyledSystem_module_default = { "hop-b-hover": "UseStyledSystem-module__hop-b-hover___v8kki", "hop-bb-hover": "UseStyledSystem-module__hop-bb-hover___s6F81", "hop-bl-hover": "UseStyledSystem-module__hop-bl-hover___tO04m", "hop-br-hover": "UseStyledSystem-module__hop-br-hover___OWDdB", "hop-bt-hover": "UseStyledSystem-module__hop-bt-hover___vZ-JR", "hop-b-focus": "UseStyledSystem-module__hop-b-focus___eLvPm", "hop-bb-focus": "UseStyledSystem-module__hop-bb-focus___RQ0ux", "hop-bl-focus": "UseStyledSystem-module__hop-bl-focus___b4F4D", "hop-br-focus": "UseStyledSystem-module__hop-br-focus___YvZ0-", "hop-bt-focus": "UseStyledSystem-module__hop-bt-focus___kmT9B", "hop-b-active": "UseStyledSystem-module__hop-b-active___jKktg", "hop-bb-active": "UseStyledSystem-module__hop-bb-active___F9aRL", "hop-bl-active": "UseStyledSystem-module__hop-bl-active___7b6w-", "hop-br-active": "UseStyledSystem-module__hop-br-active___a76LS", "hop-bt-active": "UseStyledSystem-module__hop-bt-active___Y8R5g", "hop-bg-hover": "UseStyledSystem-module__hop-bg-hover___rjc8F", "hop-bg-focus": "UseStyledSystem-module__hop-bg-focus___0R4Lu", "hop-bg-active": "UseStyledSystem-module__hop-bg-active___pmKdb", "hop-bs-hover": "UseStyledSystem-module__hop-bs-hover___-OvG-", "hop-bs-focus": "UseStyledSystem-module__hop-bs-focus___JiReX", "hop-bs-active": "UseStyledSystem-module__hop-bs-active___Jmvvh", "hop-c-hover": "UseStyledSystem-module__hop-c-hover___YhtkL", "hop-c-focus": "UseStyledSystem-module__hop-c-focus___Aq77N", "hop-c-active": "UseStyledSystem-module__hop-c-active___QQsU9", "hop-cs-hover": "UseStyledSystem-module__hop-cs-hover___S7jfy", "hop-f-hover": "UseStyledSystem-module__hop-f-hover___5m-9L", "hop-f-focus": "UseStyledSystem-module__hop-f-focus___LLUi6", "hop-o-hover": "UseStyledSystem-module__hop-o-hover___bjLYo", "hop-o-focus": "UseStyledSystem-module__hop-o-focus___eIchf", "hop-o-active": "UseStyledSystem-module__hop-o-active___qCLhG", "hop-ol-focus": "UseStyledSystem-module__hop-ol-focus___UcPDK" };
 
 // src/useStyledSystem.ts
 function createSystemValueHandler(systemValues) {

package/dist/{chunk-ACHT4RXQ.js → chunk-DRFY5W7M.js}

@@ -1,8 +1,8 @@
-import { HopperVariablePrefix, HopperColors, DataVizColors, BackgroundColors, TextColors, IconColors, Elevation, FontSize, FontWeight, LineHeight, FontFamily, Shape, CoreSpace, SemanticSimplePaddingSpace, SemanticComplexPaddingSpace, SemanticSimpleMarginSpace, SemanticComplexMarginSpace } from './chunk-PCGVOTW3.js';
+import { HopperVariablePrefix, HopperColors, DataVizColors, BackgroundColors, TextColors, IconColors, Elevation, FontSize, FontWeight, LineHeight, FontFamily, Shape, CoreSpace, SemanticSimplePaddingSpace, SemanticComplexPaddingSpace, SemanticSimpleMarginSpace, SemanticComplexMarginSpace } from './chunk-KKVEOD5L.js';
 import { parseResponsiveValue } from './chunk-SFOVKOPG.js';
 import { isNil, isObject } from './chunk-U5R6ZXH3.js';
 
-// src/tokens/token-mappings.ts
+// src/tokens/tokenMappings.ts
 var ColorExpressionTypes = [
   "#",
   "rgb",

package/dist/{chunk-Y6PI5JPG.js → chunk-FQYMSLSL.js}

@@ -2,7 +2,7 @@
 var package_default = {
   name: "@hopper-ui/styled-system",
   author: "Workleap",
-  version: "1.0.0",
+  version: "1.1.0",
   description: "The styled-system package.",
   license: "Apache-2.0",
   repository: {
@@ -44,40 +44,39 @@ var package_default = {
     "react-dom": "*"
   },
   dependencies: {
-    clsx: "^2.1.0",
-    "@react-aria/ssr": "^3.9.1"
+    "@react-aria/ssr": "^3.9.2",
+    clsx: "^2.1.0"
   },
   devDependencies: {
     "@hopper-ui/tokens": "workspace:*",
-    "@swc/core": "1.3.106",
-    "@swc/helpers": "0.5.3",
-    "@swc/jest": "0.2.31",
-    "@testing-library/jest-dom": "6.3.0",
-    "@testing-library/react": "14.1.2",
-    "@types/jest": "29.5.11",
-    "@types/react": "18.2.48",
-    "@types/react-dom": "18.2.18",
+    "@swc/core": "1.4.8",
+    "@swc/helpers": "0.5.7",
+    "@swc/jest": "0.2.36",
+    "@testing-library/jest-dom": "6.4.2",
+    "@testing-library/react": "14.2.2",
+    "@types/jest": "29.5.12",
+    "@types/react": "18.2.67",
+    "@types/react-dom": "18.2.22",
     "@types/react-test-renderer": "18.0.7",
-    "@workleap/eslint-plugin": "3.0.0",
-    "@workleap/swc-configs": "2.1.2",
-    "@workleap/tsup-configs": "3.0.1",
+    "@workleap/eslint-plugin": "3.1.0",
+    "@workleap/swc-configs": "2.2.3",
+    "@workleap/tsup-configs": "3.0.4",
     "@workleap/typescript-configs": "3.0.2",
     "identity-obj-proxy": "3.0.0",
     jest: "29.7.0",
     "jest-environment-jsdom": "29.7.0",
-    postcss: "8.4.33",
+    postcss: "8.4.37",
     "postcss-modules": "6.0.0",
     react: "18.2.0",
     "react-dom": "18.2.0",
     "react-test-renderer": "18.2.0",
     "ts-jest": "29.1.2",
-    tsup: "8.0.1",
-    "type-fest": "4.10.1",
-    typescript: "5.3.3"
+    tsup: "8.0.2",
+    typescript: "5.4.2"
   }
 };
 
-// src/styled-system-root-css-class.ts
+// src/styledSystemRootCssClass.ts
 var HopperRootCssClass = "hop";
 var StyledSystemRootCssClass = `${HopperRootCssClass}-${package_default.version.replaceAll(".", "-")}`;
 

package/dist/{chunk-TAIACQMV.js → chunk-FTYCODSC.js}

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

package/dist/{chunk-ZKEMKHXY.js → chunk-IMYR3NDP.js}

@@ -1,4 +1,4 @@
-// src/tokens/generated/dark-semantic-tokens.ts
+// src/tokens/generated/darkSemanticTokens.ts
 var DarkSemanticTokens = {
   "--hop-upsell-border-active": "var(--hop-sunken-treasure-500)",
   "--hop-upsell-text-active": "var(--hop-sunken-treasure-300)",

package/dist/{chunk-3IK64CCG.js → chunk-JKXZGQAL.js}

@@ -1,4 +1,4 @@
-// src/tokens/generated/light-semantic-tokens.ts
+// src/tokens/generated/lightSemanticTokens.ts
 var CoreTokens = {
   "--hop-coastal-25": "#f0f8ff",
   "--hop-coastal-50": "#d9efff",
@@ -166,6 +166,14 @@ var CoreTokens = {
   "--hop-line-height-1-33": "1.3333333",
   "--hop-line-height-1-4285": "1.4285714",
   "--hop-line-height-1-50": "1.5",
+  "--hop-easing-duration-1": "100ms",
+  "--hop-easing-duration-2": "200ms",
+  "--hop-easing-duration-3": "300ms",
+  "--hop-easing-duration-4": "500ms",
+  "--hop-easing-duration-5": "800ms",
+  "--hop-easing-productive": "cubic-bezier(0.22, 0.61, 0.36, 1)",
+  "--hop-easing-focus": "cubic-bezier(0.46, 0.03, 0.52, 0.96)",
+  "--hop-easing-expressive": "cubic-bezier(0.72, -0.66, 0.15, 1.5)",
   "--hop-border-radius-0": "0",
   "--hop-border-radius-1": "0.25rem",
   "--hop-border-radius-2": "0.5rem",
@@ -744,38 +752,56 @@ var SemanticTokens = {
   "--hop-heading-3xl-font-size": "var(--hop-font-size-360)",
   "--hop-heading-3xl-font-weight": "var(--hop-font-weight-680)",
   "--hop-heading-3xl-line-height": "var(--hop-line-height-1-33)",
+  "--hop-heading-3xl-top-offset": "-0.9375rem",
+  "--hop-heading-3xl-bottom-offset": "-0.5625rem",
   "--hop-heading-2xl-font-family": "var(--hop-font-family-primary)",
   "--hop-heading-2xl-font-size": "var(--hop-font-size-320)",
   "--hop-heading-2xl-font-weight": "var(--hop-font-weight-580)",
   "--hop-heading-2xl-line-height": "var(--hop-line-height-1-25)",
+  "--hop-heading-2xl-top-offset": "-0.6667rem",
+  "--hop-heading-2xl-bottom-offset": "-0.3334rem",
   "--hop-heading-xl-font-family": "var(--hop-font-family-primary)",
   "--hop-heading-xl-font-size": "var(--hop-font-size-280)",
   "--hop-heading-xl-font-weight": "var(--hop-font-weight-680)",
   "--hop-heading-xl-line-height": "var(--hop-line-height-1-14)",
+  "--hop-heading-xl-top-offset": "-0.5rem",
+  "--hop-heading-xl-bottom-offset": "-0.1875rem",
   "--hop-heading-lg-font-family": "var(--hop-font-family-primary)",
   "--hop-heading-lg-font-size": "var(--hop-font-size-240)",
   "--hop-heading-lg-font-weight": "var(--hop-font-weight-680)",
   "--hop-heading-lg-line-height": "var(--hop-line-height-1-33)",
+  "--hop-heading-lg-top-offset": "-0.5625rem",
+  "--hop-heading-lg-bottom-offset": "-0.3125rem",
   "--hop-heading-md-font-family": "var(--hop-font-family-primary)",
   "--hop-heading-md-font-size": "var(--hop-font-size-200)",
   "--hop-heading-md-font-weight": "var(--hop-font-weight-580)",
   "--hop-heading-md-line-height": "var(--hop-line-height-1-20)",
+  "--hop-heading-md-top-offset": "-0.3333rem",
+  "--hop-heading-md-bottom-offset": "-0.125rem",
   "--hop-heading-sm-font-family": "var(--hop-font-family-primary)",
   "--hop-heading-sm-font-size": "var(--hop-font-size-180)",
   "--hop-heading-sm-font-weight": "var(--hop-font-weight-580)",
   "--hop-heading-sm-line-height": "var(--hop-line-height-1-33)",
+  "--hop-heading-sm-top-offset": "-0.375rem",
+  "--hop-heading-sm-bottom-offset": "-0.1875rem",
   "--hop-heading-xs-font-family": "var(--hop-font-family-primary)",
   "--hop-heading-xs-font-size": "var(--hop-font-size-160)",
   "--hop-heading-xs-font-weight": "var(--hop-font-weight-410)",
   "--hop-heading-xs-line-height": "var(--hop-line-height-1-50)",
+  "--hop-heading-xs-top-offset": "-0.4166rem",
+  "--hop-heading-xs-bottom-offset": "-0.25rem",
   "--hop-heading-xs-medium-font-family": "var(--hop-font-family-primary)",
   "--hop-heading-xs-medium-font-size": "var(--hop-font-size-160)",
   "--hop-heading-xs-medium-font-weight": "var(--hop-font-weight-580)",
   "--hop-heading-xs-medium-line-height": "var(--hop-line-height-1-50)",
+  "--hop-heading-xs-medium-top-offset": "-0.4166rem",
+  "--hop-heading-xs-medium-bottom-offset": "-0.25rem",
   "--hop-overline-font-family": "var(--hop-font-family-tertiary)",
   "--hop-overline-font-size": "var(--hop-font-size-120)",
   "--hop-overline-font-weight": "var(--hop-font-weight-400)",
   "--hop-overline-line-height": "var(--hop-line-height-1-33)",
+  "--hop-overline-top-offset": "-0.25rem",
+  "--hop-overline-bottom-offset": "-0.125rem",
   "--hop-body-2xl-font-family": "var(--hop-font-family-secondary)",
   "--hop-body-2xl-font-size": "var(--hop-font-size-320)",
   "--hop-body-2xl-font-weight": "var(--hop-font-weight-410)",

package/dist/{chunk-XISFZQD3.js → chunk-KHRJTNYB.js}

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

package/dist/{chunk-PCGVOTW3.js → chunk-KKVEOD5L.js}

@@ -1,4 +1,4 @@
-// src/tokens/generated/styled-system-to-token-mappings.ts
+// src/tokens/generated/styledSystemToTokenMappings.ts
 var HopperVariablePrefix = "--hop";
 var HopperColors = {
   "core_coastal-25": "coastal-25",

package/dist/{chunk-I37Y2R7V.js → chunk-QMDDVBCZ.js}

@@ -1,4 +1,4 @@
-// src/styled-system-props.ts
+// src/styledSystemProps.ts
 var UnsafePrefix = "UNSAFE_";
 
 export { UnsafePrefix };

package/dist/{chunk-36LPB7RX.js → chunk-TJX3I2ER.js}

@@ -1,8 +1,8 @@
-import { BodyStyleProvider } from './chunk-HPTCF3O5.js';
-import { Div } from './chunk-XISFZQD3.js';
+import { BodyStyleProvider } from './chunk-2BSH225N.js';
+import { Div } from './chunk-KHRJTNYB.js';
 import { BreakpointProvider, DefaultUnsupportedMatchMediaBreakpoint } from './chunk-MCUHAIA4.js';
-import { TokenProvider } from './chunk-7WKPFXQZ.js';
-import { HopperRootCssClass, StyledSystemRootCssClass } from './chunk-Y6PI5JPG.js';
+import { TokenProvider } from './chunk-YZ3QMR47.js';
+import { HopperRootCssClass, StyledSystemRootCssClass } from './chunk-FQYMSLSL.js';
 import { useColorScheme } from './chunk-KLNF34G6.js';
 import { ColorSchemeContext } from './chunk-V7X6ANEM.js';
 import clsx from 'clsx';

package/dist/{chunk-RG533UHT.js → chunk-WQHLUUDG.js}

@@ -1,11 +1,11 @@
-import { useStyledSystem } from './chunk-IZYWFDT7.js';
+import { useStyledSystem } from './chunk-37HGVAAN.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___f3WYL" };
-var GlobalHtmlElementCssSelector = "hop-Html";
+var htmlElement_module_default = { "hop-HtmlElement": "htmlElement-module__hop-HtmlElement___cSA3Z" };
+var GlobalHtmlElementCssSelector = "hop-HtmlElement";
 var GlobalHtmlElementSpecificCssSelector = (elementType) => `${GlobalHtmlElementCssSelector}-${elementType}`;
 function htmlElement(elementType) {
   return forwardRef((props, ref) => {
@@ -14,7 +14,7 @@ function htmlElement(elementType) {
     const As = elementType;
     const classNames = clsx(
       className,
-      htmlElement_module_default["html-element"],
+      htmlElement_module_default["hop-HtmlElement"],
       GlobalHtmlElementCssSelector,
       GlobalHtmlElementSpecificCssSelector(elementType),
       stylingProps.className

package/dist/{chunk-7WKPFXQZ.js → chunk-YZ3QMR47.js}

@@ -1,6 +1,6 @@
-import { Tokens } from './chunk-TAIACQMV.js';
+import { Tokens } from './chunk-FTYCODSC.js';
 import { useInsertStyleElement } from './chunk-RIORU7JO.js';
-import { StyledSystemRootCssClass } from './chunk-Y6PI5JPG.js';
+import { StyledSystemRootCssClass } from './chunk-FQYMSLSL.js';
 
 // src/tokens/TokenProvider.tsx
 function TokenProvider() {

package/dist/global-styles/BodyStyleProvider.js

@@ -1,9 +1,9 @@
-export { BodyStyleProvider } from '../chunk-HPTCF3O5.js';
+export { BodyStyleProvider } from '../chunk-2BSH225N.js';
 import '../chunk-3YM73BQP.js';
 import '../chunk-B6ZBFYWJ.js';
 import '../chunk-RIORU7JO.js';
 import '../chunk-YPIK2HRL.js';
-import '../chunk-Y6PI5JPG.js';
+import '../chunk-FQYMSLSL.js';
 import '../chunk-U5R6ZXH3.js';
 import '../chunk-V7X6ANEM.js';
 import '../chunk-6LX4VMOV.js';