@hopper-ui/styled-system 0.2.4 → 0.2.5

package/dist/styled-system-props.d.ts

@@ -910,7 +910,7 @@ interface StyledSystemProps {
      */
     UNSAFE_borderTopHover?: ResponsiveProp<UNSAFE_BorderValue>;
     /**
-     * Sets the `border-top-left-radius` property when hovered.
+     * Sets the `border-top-left-radius` property.
      *
      * If you want to use a **token value** from the **SCALE**, use the **`borderTopLeftRadius`** property instead.
      *
@@ -918,7 +918,7 @@ interface StyledSystemProps {
      */
     UNSAFE_borderTopLeftRadius?: ResponsiveProp<UNSAFE_BorderRadiusValue>;
     /**
-     * Sets the `border-top-right-radius` property when hovered.
+     * Sets the `border-top-right-radius` property.
      *
      * If you want to use a **token value** from the **SCALE**, use the **`borderTopRightRadius`** property instead.
      *
@@ -933,6 +933,30 @@ interface StyledSystemProps {
      * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
      */
     UNSAFE_boxShadow?: ResponsiveProp<UNSAFE_BoxShadowValue>;
+    /**
+     * Sets the `box-shadow` property when active.
+     *
+     * If you want to use a **token value** from the **SCALE**, use the **`boxShadowActive`** property instead.
+     *
+     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
+     */
+    UNSAFE_boxShadowActive?: ResponsiveProp<UNSAFE_BoxShadowValue>;
+    /**
+     * Sets the `box-shadow` property when focused.
+     *
+     * If you want to use a **token value** from the **SCALE**, use the **`boxShadowFocus`** property instead.
+     *
+     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
+     */
+    UNSAFE_boxShadowFocus?: ResponsiveProp<UNSAFE_BoxShadowValue>;
+    /**
+     * Sets the `box-shadow` property when hovered.
+     *
+     * If you want to use a **token value** from the **SCALE**, use the **`boxShadowHover`** property instead.
+     *
+     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
+     */
+    UNSAFE_boxShadowHover?: ResponsiveProp<UNSAFE_BoxShadowValue>;
     /**
      * Sets the `color` property.
      *
@@ -941,6 +965,30 @@ interface StyledSystemProps {
      * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
      */
     UNSAFE_color?: ResponsiveProp<UNSAFE_ColorValue>;
+    /**
+     * Sets the `color` property when active.
+     *
+     * If you want to use a **token value** from the **SCALE**, use the **`colorActive`** property instead.
+     *
+     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
+     */
+    UNSAFE_colorActive?: ResponsiveProp<UNSAFE_ColorValue>;
+    /**
+     * Sets the `color` property when focused.
+     *
+     * If you want to use a **token value** from the **SCALE**, use the **`colorFocus`** property instead.
+     *
+     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
+     */
+    UNSAFE_colorFocus?: ResponsiveProp<UNSAFE_ColorValue>;
+    /**
+     * Sets the `color` property when hovered.
+     *
+     * If you want to use a **token value** from the **SCALE**, use the **`colorHover`** property instead.
+     *
+     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
+     */
+    UNSAFE_colorHover?: ResponsiveProp<UNSAFE_ColorValue>;
     /**
      * Sets the `column-gap` property.
      *
@@ -957,6 +1005,22 @@ interface StyledSystemProps {
      * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
      */
     UNSAFE_fill?: ResponsiveProp<UNSAFE_FillValue>;
+    /**
+     * Sets the `fill` property when focused.
+     *
+     * If you want to use a **token value** from the **SCALE**, use the **`fillFocus`** property instead.
+     *
+     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
+     */
+    UNSAFE_fillFocus?: ResponsiveProp<UNSAFE_FillValue>;
+    /**
+     * Sets the `fill` property when hovered.
+     *
+     * If you want to use a **token value** from the **SCALE**, use the **`fillHover`** property instead.
+     *
+     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
+     */
+    UNSAFE_fillHover?: ResponsiveProp<UNSAFE_FillValue>;
     /**
      * Sets the `font-family` property.
      *
@@ -1005,6 +1069,22 @@ interface StyledSystemProps {
      * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
      */
     UNSAFE_gridAutoRows?: ResponsiveProp<UNSAFE_GridAutoRowsValue>;
+    /**
+     * Sets the `grid-column-span` property.
+     *
+     * If you want to use a **token value** from the **SCALE**, use the **`gridColumnSpan`** property instead.
+     *
+     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
+     */
+    UNSAFE_gridColumnSpan?: ResponsiveProp<GridColumSpanValue>;
+    /**
+     * Sets the `grid-row-span` property.
+     *
+     * If you want to use a **token value** from the **SCALE**, use the **`gridRowSpan`** property instead.
+     *
+     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
+     */
+    UNSAFE_gridRowSpan?: ResponsiveProp<GridRowSpanValue>;
     /**
      * Sets the `grid-template-columns` property.
      *

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

@@ -1,2 +1,2 @@
-export { HopperRootCssClass, StyledSystemRootCssClass } from './chunk-LTBVOC66.js';
+export { HopperRootCssClass, StyledSystemRootCssClass } from './chunk-R63UWTVG.js';
 import './chunk-JFESGV6Z.js';

package/dist/tokens/TokenProvider.js

@@ -1,9 +1,9 @@
-export { TokenProvider } from '../chunk-6Z3ODGLS.js';
+export { TokenProvider } from '../chunk-6GS5PMAA.js';
 import '../chunk-A47SIZVA.js';
 import '../chunk-ZKEMKHXY.js';
 import '../chunk-HAB2KYRH.js';
 import '../chunk-RIORU7JO.js';
 import '../chunk-YPIK2HRL.js';
-import '../chunk-LTBVOC66.js';
+import '../chunk-R63UWTVG.js';
 import '../chunk-U5R6ZXH3.js';
 import '../chunk-JFESGV6Z.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___hm18j:hover {
+.UseStyledSystem-module__hop-b-hover___ELiam:hover {
   --hop-b-hover: initial;
   border: var(--hop-b-hover) !important;
 }
-.UseStyledSystem-module__hop-bb-hover___21HKw:hover {
+.UseStyledSystem-module__hop-bb-hover___mZbsF:hover {
   --hop-bb-hover: initial;
   border-bottom: var(--hop-bb-hover) !important;
 }
-.UseStyledSystem-module__hop-bl-hover___Grzt6:hover {
+.UseStyledSystem-module__hop-bl-hover___ceyGf:hover {
   --hop-bl-hover: initial;
   border-left: var(--hop-bl-hover) !important;
 }
-.UseStyledSystem-module__hop-br-hover___G7tk8:hover {
+.UseStyledSystem-module__hop-br-hover___1koop:hover {
   --hop-br-hover: initial;
   border-right: var(--hop-br-hover) !important;
 }
-.UseStyledSystem-module__hop-bt-hover___sm1qA:hover {
+.UseStyledSystem-module__hop-bt-hover___XYjzz:hover {
   --hop-bt-hover: initial;
   border-top: var(--hop-bt-hover) !important;
 }
-.UseStyledSystem-module__hop-b-focus___e1pDZ:focus-visible {
+.UseStyledSystem-module__hop-b-focus___eKqPu:focus-visible {
   --hop-b-focus: initial;
   border: var(--hop-b-focus) !important;
 }
-.UseStyledSystem-module__hop-bb-focus___n1ebY:focus-visible {
+.UseStyledSystem-module__hop-bb-focus___sLRKs:focus-visible {
   --hop-bb-focus: initial;
   border-bottom: var(--hop-bb-focus) !important;
 }
-.UseStyledSystem-module__hop-bl-focus___pkLah:focus-visible {
+.UseStyledSystem-module__hop-bl-focus___ql2vz:focus-visible {
   --hop-bl-focus: initial;
   border-left: var(--hop-bl-focus) !important;
 }
-.UseStyledSystem-module__hop-br-focus___EIC7F:focus-visible {
+.UseStyledSystem-module__hop-br-focus___bOlUU:focus-visible {
   --hop-br-focus: initial;
   border-right: var(--hop-br-focus) !important;
 }
-.UseStyledSystem-module__hop-bt-focus___Hs3sj:focus-visible {
+.UseStyledSystem-module__hop-bt-focus___iUUrS:focus-visible {
   --hop-bt-focus: initial;
   border-top: var(--hop-bt-focus) !important;
 }
-.UseStyledSystem-module__hop-b-active___ELBnY:active {
+.UseStyledSystem-module__hop-b-active___qHy5D:active {
   --hop-b-active: initial;
   border: var(--hop-b-active) !important;
 }
-.UseStyledSystem-module__hop-bb-active___0i1A8:active {
+.UseStyledSystem-module__hop-bb-active___ZZKAA:active {
   --hop-bb-active: initial;
   border-bottom: var(--hop-bb-active) !important;
 }
-.UseStyledSystem-module__hop-bl-active___fNBrE:active {
+.UseStyledSystem-module__hop-bl-active___FCKS3:active {
   --hop-bl-active: initial;
   border-left: var(--hop-bl-active) !important;
 }
-.UseStyledSystem-module__hop-br-active___fmCeI:active {
+.UseStyledSystem-module__hop-br-active___o8t8T:active {
   --hop-br-active: initial;
   border-right: var(--hop-br-active) !important;
 }
-.UseStyledSystem-module__hop-bt-active___gWcN8:active {
+.UseStyledSystem-module__hop-bt-active___GogIA:active {
   --hop-bt-active: initial;
   border-top: var(--hop-bt-active) !important;
 }
-.UseStyledSystem-module__hop-bg-hover___RJ8bQ:hover {
+.UseStyledSystem-module__hop-bg-hover___CTlws:hover {
   --hop-bg-hover: initial;
   background-color: var(--hop-bg-hover) !important;
 }
-.UseStyledSystem-module__hop-bg-focus___0wFZh:focus-visible {
+.UseStyledSystem-module__hop-bg-focus___iPjbs:focus-visible {
   --hop-bg-focus: initial;
   background-color: var(--hop-bg-focus) !important;
 }
-.UseStyledSystem-module__hop-bg-active___ClI7B:active {
+.UseStyledSystem-module__hop-bg-active___8Fos8:active {
   --hop-bg-active: initial;
   background-color: var(--hop-bg-active) !important;
 }
-.UseStyledSystem-module__hop-bs-hover___n4AMX:hover {
+.UseStyledSystem-module__hop-bs-hover___gLQZn:hover {
   --hop-bs-hover: initial;
   box-shadow: var(--hop-bs-hover) !important;
 }
-.UseStyledSystem-module__hop-bs-focus___EkVlA:focus-visible {
+.UseStyledSystem-module__hop-bs-focus___VbuiX:focus-visible {
   --hop-bs-focus: initial;
   box-shadow: var(--hop-bs-focus) !important;
 }
-.UseStyledSystem-module__hop-bs-active___jUKcJ:active {
+.UseStyledSystem-module__hop-bs-active___cTySx:active {
   --hop-bs-active: initial;
   box-shadow: var(--hop-bs-active) !important;
 }
-.UseStyledSystem-module__hop-c-hover___Yszuq:hover {
+.UseStyledSystem-module__hop-c-hover___sziqQ:hover {
   --hop-c-hover: initial;
   color: var(--hop-c-hover) !important;
 }
-.UseStyledSystem-module__hop-c-focus___R-D-d:focus-visible {
+.UseStyledSystem-module__hop-c-focus___pLFyI:focus-visible {
   --hop-c-focus: initial;
   color: var(--hop-c-focus) !important;
 }
-.UseStyledSystem-module__hop-c-active___iy--9:active {
+.UseStyledSystem-module__hop-c-active___GOSR5:active {
   --hop-c-active: initial;
   color: var(--hop-c-active) !important;
 }
-.UseStyledSystem-module__hop-cs-hover___OqIJ2:hover {
+.UseStyledSystem-module__hop-cs-hover___F9NUH:hover {
   --hop-cs-hover: initial;
   cursor: var(--hop-cs-hover) !important;
 }
-.UseStyledSystem-module__hop-f-hover___y-XLH:hover {
+.UseStyledSystem-module__hop-f-hover___p0BS-:hover {
   --hop-f-hover: initial;
   fill: var(--hop-f-hover) !important;
 }
-.UseStyledSystem-module__hop-f-focus___NSIK4:focus-visible {
+.UseStyledSystem-module__hop-f-focus___Fq-NB:focus-visible {
   --hop-f-focus: initial;
   fill: var(--hop-f-focus) !important;
 }
-.UseStyledSystem-module__hop-o-hover___rxxcZ:hover {
+.UseStyledSystem-module__hop-o-hover___KGrys:hover {
   --hop-o-hover: initial;
   opacity: var(--hop-o-hover) !important;
 }
-.UseStyledSystem-module__hop-o-focus___oO8-E:focus-visible {
+.UseStyledSystem-module__hop-o-focus___cGXdz:focus-visible {
   --hop-o-focus: initial;
   opacity: var(--hop-o-focus) !important;
 }
-.UseStyledSystem-module__hop-o-active___bYxsk:active {
+.UseStyledSystem-module__hop-o-active___qwlbA:active {
   --hop-o-active: initial;
   opacity: var(--hop-o-active) !important;
 }
-.UseStyledSystem-module__hop-ol-focus___bZPzq:focus-visible {
+.UseStyledSystem-module__hop-ol-focus___9PPfW: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-I7U75XRH.js';
+export { isStyledSystemProp, useStyledSystem } from './chunk-RS5A44EK.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.4",
+  "version": "0.2.5",
   "description": "The styled-system package.",
   "license": "Apache-2.0",
   "repository": {