@hopper-ui/styled-system 2.5.13 → 3.0.0

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_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, 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_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 './responsive/Breakpoints.js';
 
 declare const UnsafePrefix = "UNSAFE_";
@@ -558,14 +558,14 @@ interface StyledSystemProps extends UnsafeStyledSystemProps {
     order?: ResponsiveProp<Property.Order>;
     /**
    * Sets the `outline` property.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/outline}
+   * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_outline`** property
    */
-    outline?: ResponsiveProp<Property.Outline>;
+    outline?: ResponsiveProp<OutlineValue>;
     /**
    * Sets the `outline` property when focused.
-   * @see {@link https://developer.mozilla.org/docs/Web/CSS/outline}
+   * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_outlineFocus`** property
    */
-    outlineFocus?: ResponsiveProp<Property.Outline>;
+    outlineFocus?: ResponsiveProp<OutlineValue>;
     /**
    * Sets the `overflow` property.
    * @see {@link https://developer.mozilla.org/docs/Web/CSS/overflow}
@@ -1240,6 +1240,22 @@ interface UnsafeStyledSystemProps {
      * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
      */
     UNSAFE_minWidth?: ResponsiveProp<UNSAFE_WidthValue>;
+    /**
+     * Sets the `outline` property.
+     *
+     * If you want to use a **token value** from the **SCALE**, use the **`outline`** property instead.
+     *
+     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
+     */
+    UNSAFE_outline?: ResponsiveProp<UNSAFE_OutlineValue>;
+    /**
+     * Sets the `outline` property when focused.
+     *
+     * If you want to use a **token value** from the **SCALE**, use the **`outlineHover`** property instead.
+     *
+     * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
+     */
+    UNSAFE_outlineFocus?: ResponsiveProp<UNSAFE_OutlineValue>;
     /**
      * Sets the `padding` property.
      *

package/dist/styledSystemRootCssClass.d.ts

@@ -1,12 +1,10 @@
 import { ColorScheme } from './color-scheme/ColorSchemeContext.js';
 import 'react';
 
-declare const HopperRootCssClass = "hop";
-declare const StyledSystemRootCssClass: string;
 /**
  * The CSS Variables that are used by the Styled System are injected targeting those classes.
  * Therefore, any portaled component or any Hopper Provider must have one of these classes on the root element.
  */
-declare function getRootCSSClasses(colorScheme: ColorScheme): string;
+declare function getRootCSSClasses(colorScheme: ColorScheme, theme: string): string;
 
-export { HopperRootCssClass, StyledSystemRootCssClass, getRootCSSClasses };
+export { getRootCSSClasses };

package/dist/styledSystemRootCssClass.js

@@ -1,2 +1,3 @@
-export { HopperRootCssClass, StyledSystemRootCssClass, getRootCSSClasses } from './chunk-43MQD25Q.js';
+export { getRootCSSClasses } from './chunk-6ZFFJVAW.js';
+import './chunk-YQ665QH5.js';
 import './chunk-AQ5VUG5P.js';

package/dist/theme/ThemeContext.d.ts

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import { Theme } from '../tokens/generated/styledSystemConstants.js';
+
+interface ThemeContextType {
+    theme: Theme;
+    setTheme: (newTheme: Theme) => void;
+}
+declare const ThemeContext: react.Context<ThemeContextType>;
+declare function useThemeContext(): ThemeContextType;
+
+export { ThemeContext, type ThemeContextType, useThemeContext };

package/dist/theme/ThemeContext.js

@@ -0,0 +1,2 @@
+export { ThemeContext, useThemeContext } from '../chunk-TKWJ3X2I.js';
+import '../chunk-AQ5VUG5P.js';