dev ← alpha

[te6-in]

리베이스 머지해요

Summary by CodeRabbit

릴리스 노트

• 새로운 기능

  • 반응형 디자인 지원 추가: Box, Flex, Grid, Stack 컴포넌트에서 중단점 기반 반응형 속성 사용 가능 (예: padding={{ base: "x4", md: "x6" }})
  • 새로운 훅 추가: useBreakpoint() - 현재 활성화된 중단점 반환, useBreakpointValue() - 반응형 객체에서 값 조회

• 버그 수정

  • Grid 컴포넌트에서 display="none" 사용 가능하도록 개선

• 문서

  • 반응형 디자인 개념 페이지 및 각 레이아웃 컴포넌트 문서 업데이트

[changeset-bot]

⚠️ No Changeset found

Latest commit: 8101876

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 34633ecb-87bf-4077-a94d-909e827688b9

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

📝 Walkthrough

요약

반응형 스타일링 시스템이 SEED Design에 추가되었습니다. 새로운 PostCSS 플러그인, 브레이크포인트 감지 훅, 제공자 컴포넌트, 그리고 레이아웃 컴포넌트 업데이트를 통해 padding={{ base: ..., md: ... }}과 같은 반응형 객체 기반 스타일링이 가능해집니다.

변경사항

코호트 / 파일(들)	요약
PostCSS 반응형 플러그인 ecosystem/postcss-responsive/src/index.ts, ecosystem/postcss-responsive/src/index.test.ts, ecosystem/postcss-responsive/tsconfig.json	새로운 PostCSS 플러그인으로 --responsive 마크가 있는 CSS 커스텀 속성을 감지하고 브레이크포인트별 미디어 쿼리 블록을 자동 생성. 기본 브레이크포인트 검증 및 마커 커스터마이제이션 지원 포함.
브레이크포인트 스토어 & 프리미티브 packages/react/src/primitives/breakpoint-store.ts	현재 활성 브레이크포인트를 window.matchMedia를 통해 추적하고 외부 상태 구독 패턴으로 관리. 구독자가 없을 때 리스너 정리 로직 포함.
브레이크포인트 훅 packages/react/src/hooks/useBreakpoint.ts, packages/react/src/hooks/useBreakpoint.test.tsx	현재 활성 브레이크포인트 이름을 반환하는 useBreakpoint() 훅. 옵션의 기본값 및 컨텍스트 기반 설정 지원.
반응형 값 훅 packages/react/src/hooks/useBreakpointValue.ts, packages/react/src/hooks/useBreakpointValue.test.tsx	활성 브레이크포인트에 대응하는 값을 반응형 객체에서 해석하는 useBreakpointValue<T>() 훅. 누락된 브레이크포인트에 대해 하위 브레이크포인트로 폴백.
브레이크포인트 제공자 packages/react/src/providers/BreakpointProvider.tsx	컨텍스트 기반 브레이크포인트 상태 제공 컴포넌트. 선택적 기본값 설정 및 SSR 지원.
반응형 타입 유틸리티 packages/react/src/types/responsive.ts	ResponsiveValue<T>, UnwrapResponsive<T>, BreakpointThreshold 타입 및 isResponsiveObject() 런타임 검사 함수 추가.
스타일 유틸 업데이트 packages/react/src/utils/styled.tsx	resolveResponsive() 함수로 반응형 값을 브레이크포인트별 CSS 변수로 변환. StyleProps에서 width, padding, display, gap, flexDirection 등이 ResponsiveValue<...> 지원.
컴포넌트 업데이트 packages/react/src/components/Box/Box.tsx, packages/react/src/components/Flex/Flex.tsx, packages/react/src/components/Grid/Grid.tsx, packages/react/src/components/Icon/Icon.tsx, packages/react/src/components/ResponsivePair/ResponsivePair.tsx	Box에 hideFrom 프롭 추가. Flex/Grid의 display, columns, rows를 ResponsiveValue<...>로 업그레이드. Icon의 size에서 비반응형 래핑 제거. ResponsivePair를 CSS 커스텀 속성 기반으로 리팩토링.
CSS 프리셋 업데이트 packages/qvism-preset/src/global.ts, packages/qvism-preset/src/index.ts, packages/qvism-preset/src/recipes/*	CSS 커스텀 속성을 --responsive 접미사로 리네이밍. postcss-responsive 플러그인을 PostCSS 파이프라인에 통합. 모든 레시피(ActionButton, BottomSheet, HelpBubble, ListItem, Skeleton)에서 반응형 속성으로 업데이트.
브레이크포인트 정의 packages/qvism-preset/src/utils/breakpoint.ts	base: 0, sm: 480, md: 768, lg: 1280, xl: 1440의 브레이크포인트 값 및 breakpoints.up() 미디어 쿼리 헬퍼 정의.
공용 API 내보내기 packages/react/src/index.ts	useBreakpoint, useBreakpointValue, BreakpointProvider 및 관련 타입들을 공개 API로 내보내기.
반응형 디자인 문서 docs/content/react/components/concepts/responsive-design.mdx	브레이크포인트 정의, 반응형 프롭 구문, 지원 속성 카테고리, hideFrom 사용, 그리고 SSR 시 BreakpointProvider 사용법 문서화.
컴포넌트별 문서 docs/content/react/components/(foundation)/layout/box.mdx, .../flex.mdx, .../grid.mdx, .../h-stack.mdx, .../v-stack.mdx	각 레이아웃 컴포넌트에 "반응형 디자인" 섹션 추가 및 반응형 디자인 개념 페이지로의 링크.
반응형 예제 docs/examples/react/responsive-design/responsive-props.tsx, responsive-display.tsx, responsive-grid.tsx, use-breakpoint.tsx, use-breakpoint-value.tsx, hide-from.tsx	반응형 패딩, 조건부 표시, 반응형 그리드, 브레이크포인트 훅 사용 예제 6개 추가.
스토리북 설정 docs/.storybook/preview.ts, docs/stories/utils/parameters.ts	브레이크포인트 기반 뷰포트 맵 생성 및 VIEWPORT_MODES 내보내기. Chromatic 다중 뷰포트 테스트 구성.
스토리북 스토리 업데이트 docs/stories/Box.stories.tsx, docs/stories/Flex.stories.tsx, docs/stories/Grid.stories.tsx, docs/stories/Stack.stories.tsx, docs/stories/ResponsivePair.stories.tsx	반응형 속성 테스트 케이스 추가 및 모든 스토리에 VIEWPORT_MODES Chromatic 설정 적용.
체인지셋 및 설정 .changeset/responsive-styling.md	@seed-design/css와 @seed-design/react에 대한 마이너 버전 업데이트 문서화.

시퀀스 다이어그램

sequenceDiagram
    actor User
    participant Browser
    participant BreakpointProvider
    participant BreakpointStore as Breakpoint<br/>Store
    participant useBreakpoint
    participant useBreakpointValue
    participant LayoutComponent as Layout<br/>Component
    participant PostCSSPlugin as PostCSS<br/>Plugin

    User->>Browser: Viewport 크기 변경
    Browser->>BreakpointStore: matchMedia 이벤트 발생
    BreakpointStore->>BreakpointStore: 활성 브레이크포인트 재계산
    BreakpointStore->>useBreakpoint: 구독자에 변경 알림
    useBreakpoint->>BreakpointProvider: 현재 브레이크포인트 제공
    BreakpointProvider->>LayoutComponent: 컨텍스트 값 업데이트
    
    LayoutComponent->>useBreakpointValue: 활성 브레이크포인트에<br/>대한 값 요청
    useBreakpointValue->>useBreakpointValue: 반응형 객체에서<br/>현재 BP 값 해석
    useBreakpointValue-->>LayoutComponent: 해석된 값 반환
    
    LayoutComponent->>PostCSSPlugin: --responsive 마크된<br/>CSS 변수 사용
    PostCSSPlugin-->>LayoutComponent: 브레이크포인트별<br/>미디어 쿼리 적용

Loading

예상 코드 리뷰 노력

🎯 4 (복잡함) | ⏱️ ~60분

관련된 PRs

• feat: breakpoint & responsive styling support #1326: 동일한 브레이크포인트/반응형 스타일링 기능 세트를 구현—postcss-responsive 플러그인, 브레이크포인트 토큰, resolveResponsive/useBreakpoint/useBreakpointValue/BreakpointProvider 및 breakpoint-store 런타임, 반응형 타입/유틸리티, 그리고 컴포넌트 변경사항(Box/Flex/Grid/Icon/ResponsivePair 및 styled.useStyleProps)—이므로 코드 수준에서 직접적으로 관련됨.

시를 바치며

🐰 반응형 레이아웃 춤을 춘다,
브레이크포인트마다 새로운 옷을 입고
PostCSS 마법이 CSS를 부려내니,
Box와 Flex가 쌓고 펼쳐지며
모바일부터 데스크톱까지
우아하게 흘러가는 디자인의 춤 🎨✨

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	제목 'dev ← alpha'는 풀 리퀘스트의 소스 브랜치에서 대상 브랜치로의 병합 방향만 나타내며, 실제 변경 내용(반응형 디자인 지원, 새로운 훅, PostCSS 플러그인 등)을 전혀 설명하지 않습니다.	제목을 변경하여 이 PR의 주요 변경 사항을 명확히 설명하는 내용으로 수정하세요. 예: 'Add responsive design support with breakpoints, hooks, and postcss plugin' 또는 'Implement responsive styling system with breakpoint utilities and CSS variable cascades'
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch alpha

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

Alpha Preview (Stackflow SPA)

• Branch Preview URL: https://alpha.seed-design-stackflow-spa.pages.dev
• Preview URL: https://8362ff3e.seed-design-stackflow-spa.pages.dev
• Commit: 8101876

[github-actions]

Alpha Preview (Storybook)

• Branch Preview URL: https://alpha.seed-design-storybook.pages.dev
• Preview URL: https://a088c117.seed-design-storybook.pages.dev
• Commit: 8101876

[github-actions]

Alpha Preview (Docs)

• Branch Preview URL: https://alpha.seed-design.pages.dev
• Preview URL: https://547b5a7f.seed-design.pages.dev
• Commit: 8101876

[coderabbitai]

Actionable comments posted: 4

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

packages/react/src/components/Grid/Grid.tsx (1)

61-86: ⚠️ Potential issue | 🟡 Minor

displayName 누락

코딩 가이드라인에 따르면 모든 컴포넌트는 forwardRef와 displayName을 사용해야 합니다. Grid 컴포넌트에 displayName이 설정되어 있지 않습니다.

🔧 수정 제안

 export const Grid = React.forwardRef<HTMLDivElement, GridProps>((props, ref) => {
   // ... component body
 });
+
+Grid.displayName = "Grid";

As per coding guidelines, "All components must use forwardRef and displayName for proper ref forwarding and component identification".

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/react/src/components/Grid/Grid.tsx` around lines 61 - 86, The Grid
component uses React.forwardRef but is missing a displayName; add a displayName
property after the forwardRef declaration by assigning Grid.displayName = "Grid"
so the component is properly identified in devtools and stacks; locate the
exported const Grid from React.forwardRef and append the displayName assignment
immediately after its definition.

🧹 Nitpick comments (4)

packages/react/src/components/Flex/Flex.tsx (1)

42-58: displayName 설정이 누락되었습니다.

코딩 가이드라인에 따르면 모든 컴포넌트는 forwardRef와 displayName을 사용해야 합니다. Flex 컴포넌트에 displayName이 설정되어 있지 않습니다.

♻️ displayName 추가 제안

 export const Flex = React.forwardRef<HTMLDivElement, FlexProps>((props, ref) => {
   const { direction, wrap, align, justify, grow, shrink, ...rest } = props;

   return (
     <Box
       ref={ref}
       display="flex"
       flexDirection={direction}
       flexWrap={wrap}
       alignItems={align}
       justifyContent={justify}
       flexGrow={grow}
       flexShrink={shrink}
       {...rest}
     />
   );
 });
+
+Flex.displayName = "Flex";

As per coding guidelines, "All components must use forwardRef and displayName for proper ref forwarding and component identification".

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/react/src/components/Flex/Flex.tsx` around lines 42 - 58, The Flex
component created via React.forwardRef (function name Flex, props type
FlexProps) is missing a displayName; set Flex.displayName = "Flex" immediately
after the forwardRef declaration to satisfy the coding guideline requiring all
forwardRef components to have a displayName for proper ref forwarding and
component identification.

packages/react/src/components/ResponsivePair/ResponsivePair.tsx (1)

14-44: displayName 설정이 누락되었습니다.

코딩 가이드라인에 따르면 모든 컴포넌트는 forwardRef와 displayName을 사용해야 합니다.

♻️ displayName 추가 제안

 export const ResponsivePair = React.forwardRef<HTMLDivElement, ResponsivePairProps>(
   (props, ref) => {
     // ... component body
   },
 );
+
+ResponsivePair.displayName = "ResponsivePair";

As per coding guidelines, "All components must use forwardRef and displayName for proper ref forwarding and component identification".

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/react/src/components/ResponsivePair/ResponsivePair.tsx` around lines
14 - 44, The ResponsivePair component uses React.forwardRef but lacks a
displayName; after the forwardRef declaration assign ResponsivePair.displayName
= "ResponsivePair" so the component is identifiable in devtools and
errors—locate the forwardRef export named ResponsivePair and add the displayName
assignment immediately after its definition.

packages/react/src/components/Box/Box.tsx (1)

25-28: hideFrom 스타일 로직 중복을 추출하는 것을 고려해 보세요.

asChild와 non-asChild 렌더 경로에서 동일한 스타일 객체 생성 로직이 반복됩니다. 이를 변수로 추출하면 유지보수성이 향상됩니다.

♻️ 스타일 로직 추출 제안

 export const Box = React.forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
   const { hideFrom, ...rest } = props;
   const { style, restProps } = useStyleProps(rest);
   const { as: Comp = "div", asChild = false, className, ...nativeProps } = restProps;
+  
+  const mergedStyle = {
+    ...style,
+    ...(hideFrom && { [`--seed-box-display-${hideFrom}`]: "none" }),
+  };

   if (asChild) {
     return (
       <Slot
         ref={ref}
         className={clsx("seed-box", className)}
-        style={{
-          ...style,
-          ...(hideFrom && { [`--seed-box-display-${hideFrom}`]: "none" }),
-        }}
+        style={mergedStyle}
         {...nativeProps}
       />
     );
   }

   return (
     <Comp
       ref={ref}
       className={clsx("seed-box", className)}
-      style={{
-        ...style,
-        ...(hideFrom && { [`--seed-box-display-${hideFrom}`]: "none" }),
-      }}
+      style={mergedStyle}
       {...nativeProps}
     />
   );
 });

Also applies to: 38-41

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/react/src/components/Box/Box.tsx` around lines 25 - 28, The Box
component duplicates the style object creation for the hideFrom logic in both
the asChild and non-asChild render paths; extract the merged style into a single
variable (e.g., mergedStyle or computedStyle) that starts from the incoming
style prop and conditionally adds the hideFrom token when hideFrom is truthy,
then use that variable in both JSX branches instead of recreating the object;
ensure you reference the existing hideFrom prop, the style prop, and the asChild
render branch so the change applies to both code paths.

packages/react/src/hooks/useBreakpointValue.test.tsx (1)

8-42: 테스트 유틸리티 중복 고려

mockMatchMedia와 setViewport 헬퍼가 useBreakpoint.test.tsx에서도 동일하게 구현되어 있습니다. 공유 테스트 유틸리티 모듈로 추출하면 유지보수성이 향상됩니다.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/react/src/hooks/useBreakpointValue.test.tsx` around lines 8 - 42,
Duplicate test helpers (mockMatchMedia, setViewport, currentWidth, entries)
exist in this repo; extract them into a shared test utility module (e.g.,
test/utils/matchMedia.ts) and export the necessary symbols (mockMatchMedia,
setViewport, ChangeHandler type if used) then update useBreakpointValue.test.tsx
and useBreakpoint.test.tsx to import these helpers instead of re-defining them;
ensure the exported mock correctly registers/unregisters handlers and that tests
call setViewport to simulate width changes.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@docs/.storybook/preview.ts`:
- Around line 5-6: The import of ViewportMap from "storybook/viewport" is
invalid and causes build failures; either install `@storybook/addon-viewport` and
replace the import with a type import like import type { Viewport } from
"@storybook/addon-viewport" (and update any ViewportMap usages to the correct
type), or remove the type annotation entirely and proceed without ViewportMap;
additionally remove the duplicated viewport configuration block so only one
viewport definition remains (look for the viewport settings surrounding the
breakpoints usage and the duplicated block in preview.ts).

In `@docs/content/react/components/`(foundation)/layout/flex.mdx:
- Around line 19-24: Clarify that not all Flex props accept responsive objects
by listing which props support responsive values (e.g., justify, align, wrap if
applicable) or by adding a short type table/example for the Flex component
(reference the Flex component and prop names like justify, align, wrap) and
update the "Responsive Design" paragraph in
docs/content/react/components/(foundation)/layout/flex.mdx to show an explicit
example of supported prop syntax and/or link to the types; also apply the same
wording change to the other layout docs that reuse this paragraph to avoid
inconsistency.

In `@packages/react/src/components/Box/Box.tsx`:
- Around line 15-45: The Box component created with React.forwardRef is missing
a displayName; add a displayName property to the forwarded component (e.g., set
Box.displayName = "Box" immediately after the export const Box =
React.forwardRef(...) declaration) so the forwarded ref component is properly
identified in DevTools and error messages.

In `@packages/react/src/types/responsive.ts`:
- Around line 17-18: The type guard isResponsiveObject currently treats any
non-null object (excluding arrays) as a ResponsiveObject, causing plain objects
like { foo: 1 } to be misinterpreted as breakpoint maps; update
isResponsiveObject to also verify that the object's keys are valid breakpoint
keys only (e.g., get Object.keys(value) and ensure every key is one of the known
breakpoint identifiers or exists in the theme.breakpoints map) so it returns
true only when the object is a breakpoint-keyed map; reference the
isResponsiveObject function and the ResponsiveObject/Theme breakpoint keys when
implementing this narrower check.

---

Outside diff comments:
In `@packages/react/src/components/Grid/Grid.tsx`:
- Around line 61-86: The Grid component uses React.forwardRef but is missing a
displayName; add a displayName property after the forwardRef declaration by
assigning Grid.displayName = "Grid" so the component is properly identified in
devtools and stacks; locate the exported const Grid from React.forwardRef and
append the displayName assignment immediately after its definition.

---

Nitpick comments:
In `@packages/react/src/components/Box/Box.tsx`:
- Around line 25-28: The Box component duplicates the style object creation for
the hideFrom logic in both the asChild and non-asChild render paths; extract the
merged style into a single variable (e.g., mergedStyle or computedStyle) that
starts from the incoming style prop and conditionally adds the hideFrom token
when hideFrom is truthy, then use that variable in both JSX branches instead of
recreating the object; ensure you reference the existing hideFrom prop, the
style prop, and the asChild render branch so the change applies to both code
paths.

In `@packages/react/src/components/Flex/Flex.tsx`:
- Around line 42-58: The Flex component created via React.forwardRef (function
name Flex, props type FlexProps) is missing a displayName; set Flex.displayName
= "Flex" immediately after the forwardRef declaration to satisfy the coding
guideline requiring all forwardRef components to have a displayName for proper
ref forwarding and component identification.

In `@packages/react/src/components/ResponsivePair/ResponsivePair.tsx`:
- Around line 14-44: The ResponsivePair component uses React.forwardRef but
lacks a displayName; after the forwardRef declaration assign
ResponsivePair.displayName = "ResponsivePair" so the component is identifiable
in devtools and errors—locate the forwardRef export named ResponsivePair and add
the displayName assignment immediately after its definition.

In `@packages/react/src/hooks/useBreakpointValue.test.tsx`:
- Around line 8-42: Duplicate test helpers (mockMatchMedia, setViewport,
currentWidth, entries) exist in this repo; extract them into a shared test
utility module (e.g., test/utils/matchMedia.ts) and export the necessary symbols
(mockMatchMedia, setViewport, ChangeHandler type if used) then update
useBreakpointValue.test.tsx and useBreakpoint.test.tsx to import these helpers
instead of re-defining them; ensure the exported mock correctly
registers/unregisters handlers and that tests call setViewport to simulate width
changes.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 3864cf01-493e-4bc2-84c9-a2c3883465b8

📥 Commits

Reviewing files that changed from the base of the PR and between 59a6524 and 054d6eb.

⛔ Files ignored due to path filters (25)

• bun.lock is excluded by !**/*.lock
• docs/public/__docs__/index.json is excluded by !**/public/**/*
• ecosystem/postcss-responsive/package.json is excluded by !**/package.json
• packages/css/all.css is excluded by !packages/css/**/*
• packages/css/all.layered.css is excluded by !packages/css/**/*
• packages/css/all.layered.min.css is excluded by !packages/css/**/*
• packages/css/all.min.css is excluded by !packages/css/**/*
• packages/css/base.css is excluded by !packages/css/**/*
• packages/css/base.layered.css is excluded by !packages/css/**/*
• packages/css/base.layered.min.css is excluded by !packages/css/**/*
• packages/css/base.min.css is excluded by !packages/css/**/*
• packages/css/breakpoints/index.d.ts is excluded by !packages/css/**/*
• packages/css/breakpoints/index.mjs is excluded by !packages/css/**/*
• packages/css/package.json is excluded by !**/package.json, !packages/css/**/*
• packages/css/recipes/action-button.css is excluded by !packages/css/**/*
• packages/css/recipes/action-button.layered.css is excluded by !packages/css/**/*
• packages/css/recipes/bottom-sheet.css is excluded by !packages/css/**/*
• packages/css/recipes/bottom-sheet.layered.css is excluded by !packages/css/**/*
• packages/css/recipes/help-bubble.css is excluded by !packages/css/**/*
• packages/css/recipes/help-bubble.layered.css is excluded by !packages/css/**/*
• packages/css/recipes/list-item.css is excluded by !packages/css/**/*
• packages/css/recipes/list-item.layered.css is excluded by !packages/css/**/*
• packages/css/recipes/skeleton.css is excluded by !packages/css/**/*
• packages/css/recipes/skeleton.layered.css is excluded by !packages/css/**/*
• packages/qvism-preset/package.json is excluded by !**/package.json

📒 Files selected for processing (45)

• .changeset/responsive-styling.md
• docs/.storybook/preview.ts
• docs/content/react/components/(foundation)/layout/box.mdx
• docs/content/react/components/(foundation)/layout/flex.mdx
• docs/content/react/components/(foundation)/layout/grid.mdx
• docs/content/react/components/(foundation)/layout/h-stack.mdx
• docs/content/react/components/(foundation)/layout/v-stack.mdx
• docs/content/react/components/concepts/responsive-design.mdx
• docs/examples/react/responsive-design/hide-from.tsx
• docs/examples/react/responsive-design/responsive-display.tsx
• docs/examples/react/responsive-design/responsive-grid.tsx
• docs/examples/react/responsive-design/responsive-props.tsx
• docs/examples/react/responsive-design/use-breakpoint-value.tsx
• docs/examples/react/responsive-design/use-breakpoint.tsx
• docs/stories/Box.stories.tsx
• docs/stories/Flex.stories.tsx
• docs/stories/Grid.stories.tsx
• docs/stories/ResponsivePair.stories.tsx
• docs/stories/Stack.stories.tsx
• docs/stories/utils/parameters.ts
• ecosystem/postcss-responsive/src/index.test.ts
• ecosystem/postcss-responsive/src/index.ts
• ecosystem/postcss-responsive/tsconfig.json
• packages/qvism-preset/src/global.ts
• packages/qvism-preset/src/index.ts
• packages/qvism-preset/src/recipes/action-button.ts
• packages/qvism-preset/src/recipes/bottom-sheet.ts
• packages/qvism-preset/src/recipes/help-bubble.ts
• packages/qvism-preset/src/recipes/list-item.ts
• packages/qvism-preset/src/recipes/skeleton.ts
• packages/qvism-preset/src/utils/breakpoint.ts
• packages/react/src/components/Box/Box.tsx
• packages/react/src/components/Flex/Flex.tsx
• packages/react/src/components/Grid/Grid.tsx
• packages/react/src/components/Icon/Icon.tsx
• packages/react/src/components/ResponsivePair/ResponsivePair.tsx
• packages/react/src/hooks/useBreakpoint.test.tsx
• packages/react/src/hooks/useBreakpoint.ts
• packages/react/src/hooks/useBreakpointValue.test.tsx
• packages/react/src/hooks/useBreakpointValue.ts
• packages/react/src/index.ts
• packages/react/src/primitives/breakpoint-store.ts
• packages/react/src/providers/BreakpointProvider.tsx
• packages/react/src/types/responsive.ts
• packages/react/src/utils/styled.tsx