@hopper-ui/styled-system 3.2.2 → 4.0.0

package/dist/html-wrappers/html.js

@@ -1,12 +1,12 @@
-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-F5DBKR5B.js';
-import '../chunk-WMA6YQHA.js';
-import '../chunk-UR27V3AY.js';
-import '../chunk-YFZ3HPSH.js';
-import '../chunk-ASSKAO2A.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-TSN5DPDB.js';
+import '../chunk-LLGTCJEP.js';
+import '../chunk-BLSIMXE7.js';
+import '../chunk-TZCNHN3Q.js';
+import '../chunk-2BMH444W.js';
 import '../chunk-FTYK7Z7Q.js';
 import '../chunk-U5R6ZXH3.js';
 import '../chunk-VBKLISDI.js';
 import '../chunk-XUHDFZZL.js';
 import '../chunk-QMDDVBCZ.js';
-import '../chunk-46R7LA5R.js';
+import '../chunk-QAUUAHRK.js';
 import '../chunk-AQ5VUG5P.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___q-ZZH:hover {
+.UseStyledSystem-module__hop-b-hover___JoD3R:hover {
   --hop-b-hover: initial;
   border: var(--hop-b-hover) !important;
 }
-.UseStyledSystem-module__hop-bb-hover___DpnCi:hover {
+.UseStyledSystem-module__hop-bb-hover___Eo8QP:hover {
   --hop-bb-hover: initial;
   border-bottom: var(--hop-bb-hover) !important;
 }
-.UseStyledSystem-module__hop-bl-hover___lAga6:hover {
+.UseStyledSystem-module__hop-bl-hover___UqR66:hover {
   --hop-bl-hover: initial;
   border-left: var(--hop-bl-hover) !important;
 }
-.UseStyledSystem-module__hop-br-hover___mFAfB:hover {
+.UseStyledSystem-module__hop-br-hover___hxQHb:hover {
   --hop-br-hover: initial;
   border-right: var(--hop-br-hover) !important;
 }
-.UseStyledSystem-module__hop-bt-hover___yUPF0:hover {
+.UseStyledSystem-module__hop-bt-hover___AyqnV:hover {
   --hop-bt-hover: initial;
   border-top: var(--hop-bt-hover) !important;
 }
-.UseStyledSystem-module__hop-b-focus___mPCBB:focus-visible {
+.UseStyledSystem-module__hop-b-focus___74YP-:focus-visible {
   --hop-b-focus: initial;
   border: var(--hop-b-focus) !important;
 }
-.UseStyledSystem-module__hop-bb-focus___59mxU:focus-visible {
+.UseStyledSystem-module__hop-bb-focus___b4VWo:focus-visible {
   --hop-bb-focus: initial;
   border-bottom: var(--hop-bb-focus) !important;
 }
-.UseStyledSystem-module__hop-bl-focus___zGicJ:focus-visible {
+.UseStyledSystem-module__hop-bl-focus___rl6Wn:focus-visible {
   --hop-bl-focus: initial;
   border-left: var(--hop-bl-focus) !important;
 }
-.UseStyledSystem-module__hop-br-focus___zouBa:focus-visible {
+.UseStyledSystem-module__hop-br-focus___slvwf:focus-visible {
   --hop-br-focus: initial;
   border-right: var(--hop-br-focus) !important;
 }
-.UseStyledSystem-module__hop-bt-focus___2Bvlg:focus-visible {
+.UseStyledSystem-module__hop-bt-focus___g2mQz:focus-visible {
   --hop-bt-focus: initial;
   border-top: var(--hop-bt-focus) !important;
 }
-.UseStyledSystem-module__hop-b-active___6-OsN:active {
+.UseStyledSystem-module__hop-b-active___jzqga:active {
   --hop-b-active: initial;
   border: var(--hop-b-active) !important;
 }
-.UseStyledSystem-module__hop-bb-active___DRPBN:active {
+.UseStyledSystem-module__hop-bb-active___0GVhz:active {
   --hop-bb-active: initial;
   border-bottom: var(--hop-bb-active) !important;
 }
-.UseStyledSystem-module__hop-bl-active___PiHtD:active {
+.UseStyledSystem-module__hop-bl-active___Ze0Ut:active {
   --hop-bl-active: initial;
   border-left: var(--hop-bl-active) !important;
 }
-.UseStyledSystem-module__hop-br-active___g0WO7:active {
+.UseStyledSystem-module__hop-br-active___OwfJe:active {
   --hop-br-active: initial;
   border-right: var(--hop-br-active) !important;
 }
-.UseStyledSystem-module__hop-bt-active___TnTBT:active {
+.UseStyledSystem-module__hop-bt-active___xkKME:active {
   --hop-bt-active: initial;
   border-top: var(--hop-bt-active) !important;
 }
-.UseStyledSystem-module__hop-bg-hover___FFOCc:hover {
+.UseStyledSystem-module__hop-bg-hover___Rn84Y:hover {
   --hop-bg-hover: initial;
   background-color: var(--hop-bg-hover) !important;
 }
-.UseStyledSystem-module__hop-bg-focus___SyWa8:focus-visible {
+.UseStyledSystem-module__hop-bg-focus___11LTL:focus-visible {
   --hop-bg-focus: initial;
   background-color: var(--hop-bg-focus) !important;
 }
-.UseStyledSystem-module__hop-bg-active___Zr7V-:active {
+.UseStyledSystem-module__hop-bg-active___B7r5J:active {
   --hop-bg-active: initial;
   background-color: var(--hop-bg-active) !important;
 }
-.UseStyledSystem-module__hop-bs-hover___VslsP:hover {
+.UseStyledSystem-module__hop-bs-hover___wG-nN:hover {
   --hop-bs-hover: initial;
   box-shadow: var(--hop-bs-hover) !important;
 }
-.UseStyledSystem-module__hop-bs-focus___EWrDb:focus-visible {
+.UseStyledSystem-module__hop-bs-focus___Ui3-S:focus-visible {
   --hop-bs-focus: initial;
   box-shadow: var(--hop-bs-focus) !important;
 }
-.UseStyledSystem-module__hop-bs-active___lq4EK:active {
+.UseStyledSystem-module__hop-bs-active___001wz:active {
   --hop-bs-active: initial;
   box-shadow: var(--hop-bs-active) !important;
 }
-.UseStyledSystem-module__hop-c-hover___Tvh3J:hover {
+.UseStyledSystem-module__hop-c-hover___aG-pk:hover {
   --hop-c-hover: initial;
   color: var(--hop-c-hover) !important;
 }
-.UseStyledSystem-module__hop-c-focus___XC3zu:focus-visible {
+.UseStyledSystem-module__hop-c-focus___6o0tp:focus-visible {
   --hop-c-focus: initial;
   color: var(--hop-c-focus) !important;
 }
-.UseStyledSystem-module__hop-c-active___NrqxR:active {
+.UseStyledSystem-module__hop-c-active___fYi9B:active {
   --hop-c-active: initial;
   color: var(--hop-c-active) !important;
 }
-.UseStyledSystem-module__hop-cs-hover___R2IhT:hover {
+.UseStyledSystem-module__hop-cs-hover___GadTG:hover {
   --hop-cs-hover: initial;
   cursor: var(--hop-cs-hover) !important;
 }
-.UseStyledSystem-module__hop-f-hover___SlnDF:hover {
+.UseStyledSystem-module__hop-f-hover___SS6Ag:hover {
   --hop-f-hover: initial;
   fill: var(--hop-f-hover) !important;
 }
-.UseStyledSystem-module__hop-f-focus___rv9Z5:focus-visible {
+.UseStyledSystem-module__hop-f-focus___tIGqP:focus-visible {
   --hop-f-focus: initial;
   fill: var(--hop-f-focus) !important;
 }
-.UseStyledSystem-module__hop-o-hover___w7nbf:hover {
+.UseStyledSystem-module__hop-o-hover___3u-Po:hover {
   --hop-o-hover: initial;
   opacity: var(--hop-o-hover) !important;
 }
-.UseStyledSystem-module__hop-o-focus___d6-yp:focus-visible {
+.UseStyledSystem-module__hop-o-focus___DvIjI:focus-visible {
   --hop-o-focus: initial;
   opacity: var(--hop-o-focus) !important;
 }
-.UseStyledSystem-module__hop-o-active___KHCuo:active {
+.UseStyledSystem-module__hop-o-active___3jiIc:active {
   --hop-o-active: initial;
   opacity: var(--hop-o-active) !important;
 }
-.UseStyledSystem-module__hop-ol-focus___YWW6t:focus-visible {
+.UseStyledSystem-module__hop-ol-focus___m-i1t:focus-visible {
   --hop-ol-focus: initial;
   outline: 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__hop-HtmlElement___kP3pn),
-:where(.htmlElement-module__hop-HtmlElement___kP3pn::after),
-:where(.htmlElement-module__hop-HtmlElement___kP3pn::before) {
+:where(.htmlElement-module__hop-HtmlElement___hPHYV),
+:where(.htmlElement-module__hop-HtmlElement___hPHYV::after),
+:where(.htmlElement-module__hop-HtmlElement___hPHYV::before) {
   box-sizing: border-box;
 }

package/dist/html-wrappers/htmlElement.js

@@ -1,11 +1,11 @@
-export { GlobalHtmlElementCssSelector, GlobalHtmlElementSpecificCssSelector, htmlElement } from '../chunk-WMA6YQHA.js';
-import '../chunk-UR27V3AY.js';
-import '../chunk-YFZ3HPSH.js';
-import '../chunk-ASSKAO2A.js';
+export { GlobalHtmlElementCssSelector, GlobalHtmlElementSpecificCssSelector, htmlElement } from '../chunk-LLGTCJEP.js';
+import '../chunk-BLSIMXE7.js';
+import '../chunk-TZCNHN3Q.js';
+import '../chunk-2BMH444W.js';
 import '../chunk-FTYK7Z7Q.js';
 import '../chunk-U5R6ZXH3.js';
 import '../chunk-VBKLISDI.js';
 import '../chunk-XUHDFZZL.js';
 import '../chunk-QMDDVBCZ.js';
-import '../chunk-46R7LA5R.js';
+import '../chunk-QAUUAHRK.js';
 import '../chunk-AQ5VUG5P.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___q-ZZH:hover {
+.UseStyledSystem-module__hop-b-hover___JoD3R:hover {
   --hop-b-hover: initial;
   border: var(--hop-b-hover) !important;
 }
-.UseStyledSystem-module__hop-bb-hover___DpnCi:hover {
+.UseStyledSystem-module__hop-bb-hover___Eo8QP:hover {
   --hop-bb-hover: initial;
   border-bottom: var(--hop-bb-hover) !important;
 }
-.UseStyledSystem-module__hop-bl-hover___lAga6:hover {
+.UseStyledSystem-module__hop-bl-hover___UqR66:hover {
   --hop-bl-hover: initial;
   border-left: var(--hop-bl-hover) !important;
 }
-.UseStyledSystem-module__hop-br-hover___mFAfB:hover {
+.UseStyledSystem-module__hop-br-hover___hxQHb:hover {
   --hop-br-hover: initial;
   border-right: var(--hop-br-hover) !important;
 }
-.UseStyledSystem-module__hop-bt-hover___yUPF0:hover {
+.UseStyledSystem-module__hop-bt-hover___AyqnV:hover {
   --hop-bt-hover: initial;
   border-top: var(--hop-bt-hover) !important;
 }
-.UseStyledSystem-module__hop-b-focus___mPCBB:focus-visible {
+.UseStyledSystem-module__hop-b-focus___74YP-:focus-visible {
   --hop-b-focus: initial;
   border: var(--hop-b-focus) !important;
 }
-.UseStyledSystem-module__hop-bb-focus___59mxU:focus-visible {
+.UseStyledSystem-module__hop-bb-focus___b4VWo:focus-visible {
   --hop-bb-focus: initial;
   border-bottom: var(--hop-bb-focus) !important;
 }
-.UseStyledSystem-module__hop-bl-focus___zGicJ:focus-visible {
+.UseStyledSystem-module__hop-bl-focus___rl6Wn:focus-visible {
   --hop-bl-focus: initial;
   border-left: var(--hop-bl-focus) !important;
 }
-.UseStyledSystem-module__hop-br-focus___zouBa:focus-visible {
+.UseStyledSystem-module__hop-br-focus___slvwf:focus-visible {
   --hop-br-focus: initial;
   border-right: var(--hop-br-focus) !important;
 }
-.UseStyledSystem-module__hop-bt-focus___2Bvlg:focus-visible {
+.UseStyledSystem-module__hop-bt-focus___g2mQz:focus-visible {
   --hop-bt-focus: initial;
   border-top: var(--hop-bt-focus) !important;
 }
-.UseStyledSystem-module__hop-b-active___6-OsN:active {
+.UseStyledSystem-module__hop-b-active___jzqga:active {
   --hop-b-active: initial;
   border: var(--hop-b-active) !important;
 }
-.UseStyledSystem-module__hop-bb-active___DRPBN:active {
+.UseStyledSystem-module__hop-bb-active___0GVhz:active {
   --hop-bb-active: initial;
   border-bottom: var(--hop-bb-active) !important;
 }
-.UseStyledSystem-module__hop-bl-active___PiHtD:active {
+.UseStyledSystem-module__hop-bl-active___Ze0Ut:active {
   --hop-bl-active: initial;
   border-left: var(--hop-bl-active) !important;
 }
-.UseStyledSystem-module__hop-br-active___g0WO7:active {
+.UseStyledSystem-module__hop-br-active___OwfJe:active {
   --hop-br-active: initial;
   border-right: var(--hop-br-active) !important;
 }
-.UseStyledSystem-module__hop-bt-active___TnTBT:active {
+.UseStyledSystem-module__hop-bt-active___xkKME:active {
   --hop-bt-active: initial;
   border-top: var(--hop-bt-active) !important;
 }
-.UseStyledSystem-module__hop-bg-hover___FFOCc:hover {
+.UseStyledSystem-module__hop-bg-hover___Rn84Y:hover {
   --hop-bg-hover: initial;
   background-color: var(--hop-bg-hover) !important;
 }
-.UseStyledSystem-module__hop-bg-focus___SyWa8:focus-visible {
+.UseStyledSystem-module__hop-bg-focus___11LTL:focus-visible {
   --hop-bg-focus: initial;
   background-color: var(--hop-bg-focus) !important;
 }
-.UseStyledSystem-module__hop-bg-active___Zr7V-:active {
+.UseStyledSystem-module__hop-bg-active___B7r5J:active {
   --hop-bg-active: initial;
   background-color: var(--hop-bg-active) !important;
 }
-.UseStyledSystem-module__hop-bs-hover___VslsP:hover {
+.UseStyledSystem-module__hop-bs-hover___wG-nN:hover {
   --hop-bs-hover: initial;
   box-shadow: var(--hop-bs-hover) !important;
 }
-.UseStyledSystem-module__hop-bs-focus___EWrDb:focus-visible {
+.UseStyledSystem-module__hop-bs-focus___Ui3-S:focus-visible {
   --hop-bs-focus: initial;
   box-shadow: var(--hop-bs-focus) !important;
 }
-.UseStyledSystem-module__hop-bs-active___lq4EK:active {
+.UseStyledSystem-module__hop-bs-active___001wz:active {
   --hop-bs-active: initial;
   box-shadow: var(--hop-bs-active) !important;
 }
-.UseStyledSystem-module__hop-c-hover___Tvh3J:hover {
+.UseStyledSystem-module__hop-c-hover___aG-pk:hover {
   --hop-c-hover: initial;
   color: var(--hop-c-hover) !important;
 }
-.UseStyledSystem-module__hop-c-focus___XC3zu:focus-visible {
+.UseStyledSystem-module__hop-c-focus___6o0tp:focus-visible {
   --hop-c-focus: initial;
   color: var(--hop-c-focus) !important;
 }
-.UseStyledSystem-module__hop-c-active___NrqxR:active {
+.UseStyledSystem-module__hop-c-active___fYi9B:active {
   --hop-c-active: initial;
   color: var(--hop-c-active) !important;
 }
-.UseStyledSystem-module__hop-cs-hover___R2IhT:hover {
+.UseStyledSystem-module__hop-cs-hover___GadTG:hover {
   --hop-cs-hover: initial;
   cursor: var(--hop-cs-hover) !important;
 }
-.UseStyledSystem-module__hop-f-hover___SlnDF:hover {
+.UseStyledSystem-module__hop-f-hover___SS6Ag:hover {
   --hop-f-hover: initial;
   fill: var(--hop-f-hover) !important;
 }
-.UseStyledSystem-module__hop-f-focus___rv9Z5:focus-visible {
+.UseStyledSystem-module__hop-f-focus___tIGqP:focus-visible {
   --hop-f-focus: initial;
   fill: var(--hop-f-focus) !important;
 }
-.UseStyledSystem-module__hop-o-hover___w7nbf:hover {
+.UseStyledSystem-module__hop-o-hover___3u-Po:hover {
   --hop-o-hover: initial;
   opacity: var(--hop-o-hover) !important;
 }
-.UseStyledSystem-module__hop-o-focus___d6-yp:focus-visible {
+.UseStyledSystem-module__hop-o-focus___DvIjI:focus-visible {
   --hop-o-focus: initial;
   opacity: var(--hop-o-focus) !important;
 }
-.UseStyledSystem-module__hop-o-active___KHCuo:active {
+.UseStyledSystem-module__hop-o-active___3jiIc:active {
   --hop-o-active: initial;
   opacity: var(--hop-o-active) !important;
 }
-.UseStyledSystem-module__hop-ol-focus___YWW6t:focus-visible {
+.UseStyledSystem-module__hop-ol-focus___m-i1t:focus-visible {
   --hop-ol-focus: initial;
   outline: 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__hop-HtmlElement___kP3pn),
-:where(.htmlElement-module__hop-HtmlElement___kP3pn::after),
-:where(.htmlElement-module__hop-HtmlElement___kP3pn::before) {
+:where(.htmlElement-module__hop-HtmlElement___hPHYV),
+:where(.htmlElement-module__hop-HtmlElement___hPHYV::after),
+:where(.htmlElement-module__hop-HtmlElement___hPHYV::before) {
   box-sizing: border-box;
 }

package/dist/index.d.ts

@@ -10,7 +10,7 @@ export { Breakpoint, Breakpoints } from './responsive/Breakpoints.js';
 export { ResponsiveProp, ResponsiveValue, isResponsiveObject, parseResponsiveValue, useResponsiveValue } from './responsive/useResponsiveValue.js';
 export { ThemeContext, ThemeContextType, useThemeContext } from './theme/ThemeContext.js';
 export { HopperRootCssClass, HopperVariablePrefix, StyledSystemRootCssClass, Theme } from './tokens/generated/styledSystemConstants.js';
-export { BackgroundColorMapping, BackgroundColorValue, BorderMapping, BorderRadiusMapping, BorderRadiusValue, BorderValue, BoxShadowMapping, BoxShadowValue, CSSOutline, CSSSizing, ColorExpressionTypes, ColorMapping, ColorValue, ColumnGapValue, ComplexMarginMapping, ComplexMarginValue, ComplexPaddingMapping, ComplexPaddingValue, CssBorder, CssBorderRadius, CssBoxShadow, CssColor, CssFill, CssGap, CssGrid, CssGridTemplate, DataVizColorMapping, DefaultBorderWidthAndStyle, DefaultOutlineWidthAndStyle, FRValues, FillValue, FontFamilyMapping, FontFamilyValue, FontSizeMapping, FontSizeValue, FontWeightMapping, FontWeightValue, GapValue, GradientColorMapping, GridAutoColumnsValue, GridAutoRowsValue, GridColumSpanValue, GridRowSpanValue, GridTemplateAreasValue, GridTemplateColumnsValue, GridTemplateRowsValue, HeightValue, IconColorMapping, LineHeightMapping, LineHeightValue, OutlineMapping, OutlineValue, Percentage, RowGapValue, SimpleMarginMapping, SimpleMarginValue, SimplePaddingMapping, SimplePaddingValue, SizingMapping, SizingValue, SpaceMapping, StrokeValue, TextColorMapping, UNSAFE_BackgroundColorValue, UNSAFE_BorderRadiusValue, UNSAFE_BorderValue, UNSAFE_BoxShadowValue, UNSAFE_ColorValue, UNSAFE_ColumnGapValue, UNSAFE_ComplexMarginValue, UNSAFE_ComplexPaddingValue, UNSAFE_FillValue, UNSAFE_FontFamilyValue, UNSAFE_FontSizeValue, UNSAFE_FontWeightValue, UNSAFE_GapValue, UNSAFE_GridAutoColumnsValue, UNSAFE_GridAutoRowsValue, UNSAFE_GridTemplateColumnsValue, UNSAFE_GridTemplateRowsValue, UNSAFE_HeightValue, UNSAFE_LineHeightValue, UNSAFE_OutlineValue, UNSAFE_RowGapValue, UNSAFE_SimpleMarginValue, UNSAFE_SimplePaddingValue, UNSAFE_SizingValue, UNSAFE_StrokeValue, UNSAFE_WidthValue, WidthValue, getSizingValue, getSystemValue, parseResponsiveSystemValue } from './tokens/tokenMappings.js';
+export { BackgroundColorMapping, BackgroundColorValue, BorderMapping, BorderRadiusMapping, BorderRadiusValue, BorderValue, BoxShadowMapping, BoxShadowValue, CSSOutline, CSSSizing, ColorExpressionTypes, ColorMapping, ColorValue, ColumnGapValue, ComplexMarginMapping, ComplexMarginValue, ComplexPaddingMapping, ComplexPaddingValue, CssBorder, CssBorderRadius, CssBoxShadow, CssColor, CssFill, CssGap, CssGrid, CssGridTemplate, DataVizColorMapping, DefaultBorderWidthAndStyle, DefaultOutlineWidthAndStyle, FRValues, FillValue, FontFamilyMapping, FontFamilyValue, FontSizeMapping, FontSizeValue, FontWeightMapping, FontWeightValue, GapValue, GradientColorMapping, GridAutoColumnsValue, GridAutoRowsValue, GridColumSpanValue, GridRowSpanValue, GridTemplateAreasValue, GridTemplateColumnsValue, GridTemplateRowsValue, HeightValue, IconColorMapping, LetterSpacingMapping, LetterSpacingValue, LineHeightMapping, LineHeightValue, OutlineMapping, OutlineValue, Percentage, RowGapValue, SimpleMarginMapping, SimpleMarginValue, SimplePaddingMapping, SimplePaddingValue, SizingMapping, SizingValue, SpaceMapping, StrokeValue, TextColorMapping, UNSAFE_BackgroundColorValue, UNSAFE_BorderRadiusValue, UNSAFE_BorderValue, UNSAFE_BoxShadowValue, UNSAFE_ColorValue, UNSAFE_ColumnGapValue, UNSAFE_ComplexMarginValue, UNSAFE_ComplexPaddingValue, UNSAFE_FillValue, UNSAFE_FontFamilyValue, UNSAFE_FontSizeValue, UNSAFE_FontWeightValue, UNSAFE_GapValue, UNSAFE_GridAutoColumnsValue, UNSAFE_GridAutoRowsValue, UNSAFE_GridTemplateColumnsValue, UNSAFE_GridTemplateRowsValue, UNSAFE_HeightValue, UNSAFE_LetterSpacingValue, UNSAFE_LineHeightValue, UNSAFE_OutlineValue, UNSAFE_RowGapValue, UNSAFE_SimpleMarginValue, UNSAFE_SimplePaddingValue, UNSAFE_SizingValue, UNSAFE_StrokeValue, UNSAFE_WidthValue, WidthValue, getSizingValue, getSystemValue, parseResponsiveSystemValue } from './tokens/tokenMappings.js';
 export { slot } from './utils/slot.js';
 export { useInsertStyleElement } from './utils/useInsertStyleElement.js';
 export { useIsomorphicInsertionEffect } from './utils/useIsomorphicInsertionEffect.js';

package/dist/index.js

@@ -1,24 +1,24 @@
 export { slot } from './chunk-7STOSQRA.js';
-export { GlobalStyledSystemProviderCssSelector, _StyledSystemProvider as StyledSystemProvider } from './chunk-VYSHJ4BC.js';
-export { BodyStyleProvider } from './chunk-ODDLVJ3T.js';
+export { GlobalStyledSystemProviderCssSelector, _StyledSystemProvider as StyledSystemProvider } from './chunk-3W57BWQT.js';
+export { BodyStyleProvider } from './chunk-G37OO232.js';
 export { useInsertStyleElement } from './chunk-RIORU7JO.js';
 export { useIsomorphicInsertionEffect } from './chunk-YPIK2HRL.js';
 export { useIsomorphicLayoutEffect } from './chunk-3YM73BQP.js';
 export { ThemeComputedStyle } from './chunk-BSIKCABJ.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-F5DBKR5B.js';
-export { GlobalHtmlElementCssSelector, GlobalHtmlElementSpecificCssSelector, htmlElement } from './chunk-WMA6YQHA.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-TSN5DPDB.js';
+export { GlobalHtmlElementCssSelector, GlobalHtmlElementSpecificCssSelector, htmlElement } from './chunk-LLGTCJEP.js';
 export { BreakpointProvider, DefaultUnsupportedMatchMediaBreakpoint } from './chunk-GXUFWEP5.js';
 export { ThemeContext, useThemeContext } from './chunk-TKWJ3X2I.js';
-export { getRootCSSClasses } from './chunk-2B3FQDBI.js';
-export { isStyledSystemProp, useStyledSystem } from './chunk-UR27V3AY.js';
-export { BackgroundColorMapping, BorderMapping, BorderRadiusMapping, BoxShadowMapping, ColorExpressionTypes, ColorMapping, ComplexMarginMapping, ComplexPaddingMapping, DataVizColorMapping, DefaultBorderWidthAndStyle, DefaultOutlineWidthAndStyle, FontFamilyMapping, FontSizeMapping, FontWeightMapping, GradientColorMapping, IconColorMapping, LineHeightMapping, OutlineMapping, SimpleMarginMapping, SimplePaddingMapping, SizingMapping, SpaceMapping, TextColorMapping, getSizingValue, getSystemValue, parseResponsiveSystemValue } from './chunk-YFZ3HPSH.js';
-import './chunk-ASSKAO2A.js';
+export { getRootCSSClasses } from './chunk-RIOM7ASY.js';
+export { isStyledSystemProp, useStyledSystem } from './chunk-BLSIMXE7.js';
+export { BackgroundColorMapping, BorderMapping, BorderRadiusMapping, BoxShadowMapping, ColorExpressionTypes, ColorMapping, ComplexMarginMapping, ComplexPaddingMapping, DataVizColorMapping, DefaultBorderWidthAndStyle, DefaultOutlineWidthAndStyle, FontFamilyMapping, FontSizeMapping, FontWeightMapping, GradientColorMapping, IconColorMapping, LetterSpacingMapping, LineHeightMapping, OutlineMapping, SimpleMarginMapping, SimplePaddingMapping, SizingMapping, SpaceMapping, TextColorMapping, getSizingValue, getSystemValue, parseResponsiveSystemValue } from './chunk-TZCNHN3Q.js';
+import './chunk-2BMH444W.js';
 export { isResponsiveObject, parseResponsiveValue, useResponsiveValue } from './chunk-FTYK7Z7Q.js';
 import './chunk-U5R6ZXH3.js';
 export { BreakpointContext, useBreakpointContext } from './chunk-VBKLISDI.js';
 export { Breakpoints } from './chunk-XUHDFZZL.js';
 export { UnsafePrefix } from './chunk-QMDDVBCZ.js';
-export { HopperRootCssClass, HopperVariablePrefix, StyledSystemRootCssClass } from './chunk-46R7LA5R.js';
+export { HopperRootCssClass, HopperVariablePrefix, StyledSystemRootCssClass } from './chunk-QAUUAHRK.js';
 export { useColorScheme } from './chunk-5U5IRAPA.js';
 export { supportsMatchMedia, useMediaQuery } from './chunk-T6JS7L6B.js';
 export { useColorSchemeValue } from './chunk-XG7R6QGE.js';

package/dist/styledSystemProps.d.ts

@@ -1,7 +1,7 @@
 import { Property } from 'csstype';
 import { JSX, JSXElementConstructor, ComponentProps } from 'react';
 import { ResponsiveProp } from './responsive/useResponsiveValue.js';
-import { UNSAFE_BackgroundColorValue, UNSAFE_BorderValue, UNSAFE_BorderRadiusValue, UNSAFE_BoxShadowValue, UNSAFE_ColorValue, UNSAFE_GapValue, UNSAFE_FillValue, UNSAFE_FontFamilyValue, UNSAFE_FontSizeValue, UNSAFE_FontWeightValue, UNSAFE_GridAutoColumnsValue, UNSAFE_GridAutoRowsValue, GridColumSpanValue, GridRowSpanValue, UNSAFE_GridTemplateColumnsValue, UNSAFE_GridTemplateRowsValue, UNSAFE_HeightValue, UNSAFE_LineHeightValue, UNSAFE_ComplexMarginValue, UNSAFE_SimpleMarginValue, UNSAFE_WidthValue, UNSAFE_OutlineValue, UNSAFE_ComplexPaddingValue, UNSAFE_SimplePaddingValue, UNSAFE_RowGapValue, UNSAFE_StrokeValue, BackgroundColorValue, BorderValue, BorderRadiusValue, BoxShadowValue, ColorValue, ColumnGapValue, FillValue, FontFamilyValue, FontSizeValue, FontWeightValue, GapValue, GridAutoColumnsValue, GridAutoRowsValue, GridTemplateAreasValue, GridTemplateColumnsValue, GridTemplateRowsValue, HeightValue, LineHeightValue, ComplexMarginValue, SimpleMarginValue, WidthValue, OutlineValue, ComplexPaddingValue, SimplePaddingValue, RowGapValue, StrokeValue } from './tokens/tokenMappings.js';
+import { UNSAFE_BackgroundColorValue, UNSAFE_BorderValue, UNSAFE_BorderRadiusValue, UNSAFE_BoxShadowValue, UNSAFE_ColorValue, UNSAFE_GapValue, UNSAFE_FillValue, UNSAFE_FontFamilyValue, UNSAFE_FontSizeValue, UNSAFE_FontWeightValue, UNSAFE_GridAutoColumnsValue, UNSAFE_GridAutoRowsValue, GridColumSpanValue, GridRowSpanValue, UNSAFE_GridTemplateColumnsValue, UNSAFE_GridTemplateRowsValue, UNSAFE_HeightValue, UNSAFE_LetterSpacingValue, UNSAFE_LineHeightValue, UNSAFE_ComplexMarginValue, UNSAFE_SimpleMarginValue, UNSAFE_WidthValue, UNSAFE_OutlineValue, UNSAFE_ComplexPaddingValue, UNSAFE_SimplePaddingValue, UNSAFE_RowGapValue, UNSAFE_StrokeValue, BackgroundColorValue, BorderValue, BorderRadiusValue, BoxShadowValue, ColorValue, ColumnGapValue, FillValue, FontFamilyValue, FontSizeValue, FontWeightValue, GapValue, GridAutoColumnsValue, GridAutoRowsValue, GridTemplateAreasValue, GridTemplateColumnsValue, GridTemplateRowsValue, HeightValue, LetterSpacingValue, LineHeightValue, ComplexMarginValue, SimpleMarginValue, WidthValue, OutlineValue, ComplexPaddingValue, SimplePaddingValue, RowGapValue, StrokeValue } from './tokens/tokenMappings.js';
 import './responsive/Breakpoints.js';
 
 declare const UnsafePrefix = "UNSAFE_";
@@ -457,10 +457,10 @@ interface StyledSystemProps extends UnsafeStyledSystemProps {
    */
     left?: ResponsiveProp<Property.Left>;
     /**
-   * Sets the `letter-spacing` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/letter-spacing}
-   */
-    letterSpacing?: ResponsiveProp<Property.LetterSpacing>;
+     * Sets the `letter-spacing` property.
+     * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_letterSpacing`** property
+     */
+    letterSpacing?: ResponsiveProp<LetterSpacingValue>;
     /**
      * Sets the `line-height` property.
      * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_lineHeight`** property
@@ -1144,6 +1144,14 @@ interface UnsafeStyledSystemProps {
      * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
      */
     UNSAFE_height?: ResponsiveProp<UNSAFE_HeightValue>;
+    /**
+     * Sets the `letter-spacing` property.
+     *
+     * If you want to use a **token value** from the **SCALE**, use the **`letterSpacing`** property instead.
+     *
+     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
+     */
+    UNSAFE_letterSpacing?: ResponsiveProp<UNSAFE_LetterSpacingValue>;
     /**
      * Sets the `line-height` property.
      *

package/dist/styledSystemRootCssClass.js

@@ -1,3 +1,3 @@
-export { getRootCSSClasses } from './chunk-2B3FQDBI.js';
-import './chunk-46R7LA5R.js';
+export { getRootCSSClasses } from './chunk-RIOM7ASY.js';
+import './chunk-QAUUAHRK.js';
 import './chunk-AQ5VUG5P.js';