feat: remove responsive styles support

src/components/Root.tsx

@@ -62,7 +62,6 @@ export function Root(allProps: CubeRootProps) {
     children,
     /** Raw css styles for body element */
     bodyStyles,
-    breakpoints = [980],
     fontDisplay = 'swap',
     fonts,
     publicUrl,
@@ -128,7 +127,7 @@ export function Root(allProps: CubeRootProps) {
   const styles = extractStyles(props, STYLES, DEFAULT_STYLES);
 
   return (
-    <Provider navigation={navigation} root={rootRef} breakpoints={breakpoints}>
+    <Provider navigation={navigation} root={rootRef}>
       <TrackingProvider event={tracking?.event}>
         <StyleSheetManager>
           <RootElement

src/components/content/Text.tsx

@@ -13,7 +13,7 @@ import {
   ColorStyleProps,
   extractStyles,
   filterBaseProps,
-  ResponsiveStyleValue,
+  StylePropValue,
   TagName,
   tasty,
   TEXT_STYLES,
@@ -49,9 +49,9 @@ export interface CubeTextProps<T extends TagName = TagName>
   /**
    * Whether the text has italic style
    */
-  italic?: ResponsiveStyleValue<CSSProperties['fontStyle']>;
+  italic?: StylePropValue<CSSProperties['fontStyle']>;
   weight?: string | number;
-  transform?: ResponsiveStyleValue<CSSProperties['textTransform']>;
+  transform?: StylePropValue<CSSProperties['textTransform']>;
 }
 
 const TextElement = tasty({

src/provider.tsx

@@ -9,11 +9,10 @@ import {
 
 import { NavigationAdapter } from './providers/navigation.types';
 import { defaultNavigationAdapter } from './providers/navigationAdapter.default';
-import { BreakpointsProvider, Props } from './tasty';
+import { Props } from './tasty';
 import { EventBusProvider } from './utils/react/useEventBus';
 
 export interface ProviderProps extends Props {
-  breakpoints?: number[];
   insideForm?: boolean;
   isDisabled?: boolean;
   isReadOnly?: boolean;
@@ -24,15 +23,14 @@ export interface ProviderProps extends Props {
   root?: ForwardedRef<any>;
 }
 
-export type ProviderInsideProps = Omit<ProviderProps, 'styles' | 'breakpoints'>;
+export type ProviderInsideProps = Omit<ProviderProps, 'styles'>;
 
 export const UIKitContext = createContext<ProviderInsideProps>({
   navigation: defaultNavigationAdapter,
 });
 
 export function Provider(allProps: PropsWithChildren<ProviderProps>) {
   let {
-    breakpoints,
     children,
     insideForm,
     isDisabled,
@@ -46,19 +44,12 @@ export function Provider(allProps: PropsWithChildren<ProviderProps>) {
 
   const parentContext = useContext(UIKitContext);
 
-  if (breakpoints) {
-    children = (
-      <BreakpointsProvider value={breakpoints}>{children}</BreakpointsProvider>
-    );
-  }
-
   // Wrap with EventBusProvider for menu synchronization
   children = <EventBusProvider>{children}</EventBusProvider>;
 
   const props = useMemo(
     () => ({
       ref,
-      breakpoints,
       insideForm,
       isDisabled,
       isReadOnly,
@@ -69,7 +60,6 @@ export function Provider(allProps: PropsWithChildren<ProviderProps>) {
     }),
     [
       ref,
-      breakpoints,
       insideForm,
       isDisabled,
       isReadOnly,

src/stories/Tasty.docs.mdx

@@ -53,13 +53,6 @@ const PrimaryButton = tasty(Button, {
 ### Essential Patterns
 
 ```jsx
-// Responsive styling
-const ResponsiveBox = tasty({
-  styles: {
-    padding: ['4x', '2x', '1x'], // Large → Medium → Small screens
-  },
-});
-
 // State-based styling
 const InteractiveCard = tasty({
   styles: {
@@ -133,14 +126,6 @@ fill: '#purple.5'  // → var(--purple-color) with 50% opacity
 
 Shorthand units referencing design system values: `x` (gap), `r` (radius), `bw` (border-width), `fs` (font-size), `sf` (stable grid fractions).
 
-### Responsive Array
-
-Array of values mapping to breakpoints (large to small). Configure with `<BreakpointsProvider>`.
-
-```jsx
-padding: ['4x', '2x', '1x']  // Large → Medium → Small
-```
-
 ### Style Props
 
 Style properties exposed as direct props via `styleProps` config. Provides cleaner API than using `styles` prop.
@@ -219,7 +204,6 @@ const FlexibleBox = tasty({
 - **Cleaner API** - No need for `styles` prop wrapper
 - **Better TypeScript support** - Props are properly typed
 - **Component-specific styling** - Expose only relevant properties
-- **Responsive support** - Works with arrays: `gap={['2x', '1x']}`
 - **State-based styling** - Works with objects: `fill={{ '': '#white', hovered: '#gray' }}`
 
 **Style Prop Priority:**
@@ -243,7 +227,6 @@ const FlexibleBox = tasty({
 Tasty enhances CSS with:
 - **Design tokens** - `#purple`, `#text`, `#border`
 - **Custom units** - `2x` (gap), `1r` (radius), `1bw` (border-width)
-- **Responsive arrays** - `['4x', '2x', '1x']`
 - **State objects** - `{ '': 'default', hovered: 'hover-state' }`
 - **Smart defaults** - `border: true` uses design system values
 
@@ -284,23 +267,6 @@ color: '#purple.05',   // 5% opacity
 > gridColumns="1sf 2sf 1sf"  // equivalent to "minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr)"
 > ```
 
-### Responsive Styling
-
-Configure breakpoints and use responsive arrays:
-
-```jsx
-// Configure breakpoints (optional)
-<BreakpointsProvider value={[1200, 640]}>
-  <App />
-</BreakpointsProvider>
-
-// Use responsive arrays
-<Block padding={["4x", "2x", "1x"]} />
-// Large screens (≥1200px): 4x
-// Medium screens (640px-1199px): 2x
-// Small screens (<640px): 1x
-```
-
 ---
 
 ## 📖 Style Properties Reference
@@ -353,7 +319,6 @@ padding: '2x 1x',                 // Vertical, horizontal
 padding: '2x top',                // Top only
 padding: '1x left right',         // Left and right
 padding: true,                    // Default: '1x'
-padding: ['2x', '1x', '0.5x'],    // Responsive array (padding only)
 
 // Available modifiers: top, right, bottom, left
 // Default value (true): '1x' → 'var(--gap)'
@@ -878,10 +843,6 @@ styles: {
   Content: { color: '#text' },
 }
 
-// ✅ Use responsive arrays for breakpoints
-padding: ['4x', '2x', '1x']
-width: ['max 1200px', 'max 800px', 'max 100%']
-
 // ✅ Use modifiers for state-based styling
 styles: {
   fill: {
@@ -1005,15 +966,6 @@ const InteractiveCard = tasty({
   },
 });
 
-// Responsive container
-const Container = tasty({
-  styles: {
-    padding: ['6x', '4x', '2x'],
-    width: ['max 1200px', 'max 800px', 'max 100%'],
-    margin: '0 auto',
-  },
-});
-
 // Button with variants
 const Button = tasty({
   styles: {