@hjmds/design-contracts 1.13.1 → 1.15.0

package/docs/usage/screens/flow-onboarding.md

@@ -11,7 +11,7 @@
 ## 목적
 
 첫 실행 사용자를 몇 단계(소개 → 관심 주제 → 시작)로 안내하고 마지막 단계에서 완료를 저장하는 화면을 OnboardingScreen 하나로 구성한다.
-단계 제목·설명은 화면 머리, 진행 문구는 머리 아래, 이동 버튼은 footer에 고정하고 단계 본문만 바꾼다. 권한 요청·로그인·가입은
+단계 제목·설명은 화면 맨 위, 진행 문구는 그 아래에 둔다. Web은 머리를 고정하고 Native는 제목·설명·진행을 본문과 함께 스크롤한다. 이동 버튼은 footer에 고정한다. 권한 요청·로그인·가입은
 이 화면에 없다([권한 안내](flow-permission.md), [로그인](common-login.md)).
 스토리는 `기본`(1단계부터 직접 넘기기), `관심 주제 고르기`(2단계를 바로 연 상태), `실패와 복구`(다음 완료 저장 실패 → 다시 시작하기)다.
 2026-10-06 배포 직접 조립 온보딩(Steps·ContentTransition·여러 개 고르는 주제 버튼)을 이 항목으로 합쳤고, 그 고유 상태인
@@ -44,8 +44,8 @@
 | 영역 | 컴포넌트 | 위치 | 크기·간격 |
 | --- | --- | --- | --- |
 | 바깥 틀 | OnboardingScreen(내부 ScreenLayout `scroll="screen"`) | route 본문. host가 남은 높이·safe area·키보드를 준다 | 폭 최대 720, 바깥 padding `spacing.md` 16([ScreenLayout 배치](../components/screen-layout.md#배치)). 화면 props는 `layoutStyle`만 받는다 |
-| 머리 | `steps[index].title`·`description` + `skip`(ghost Button) | 맨 위, 고정 | 제목 열 최소 120 × 글자 배율, 모자라면 건너뛰기가 다음 줄로 내려간다 |
-| 진행 문구 | `progressLabel(current, total)` → Text `variant="caption" tone="muted"` | 머리 아래 notice 자리, 고정 | 좌우 16 |
+| 머리 | `steps[index].title`·`description` + `skip`(ghost Button) | 맨 위, Web 고정·Native 본문 스크롤 | 제목 열 최소 120 × 글자 배율, 모자라면 건너뛰기가 다음 줄로 내려간다 |
+| 진행 문구 | `progressLabel(current, total)` → Text `variant="caption" tone="muted"` | 머리 아래, Web notice 고정·Native 본문 스크롤 | 좌우 16 |
 | 단계 본문 | `steps[index].content` | 진행 문구 아래, 본문 스크롤 | 본문 안 간격은 제품 소유. 예제는 Stack `gap="lg"` 20 |
 | 관심 주제 | Stack `axis="inline" wrap gap="xs"`(Web `role="group"` + 이름) > [Chip](../components/chip.md) `selectionMode="multiple"` | 2단계 content 안 | 칩 높이 `small` 36(Native hitSlop으로 터치 44), 사이 `spacing.xs` 8 |
 | 저장 실패 | [Notice](../components/notice.md) `tone="danger"` + `action` | 마지막 단계 content 맨 아래 | 본문 Stack 간격을 따른다 |
@@ -191,3 +191,5 @@ const topicPicker = <Stack axis="inline" wrap gap="xs">
 - 완료 `pending` 동안에도 이전 버튼은 막히지 않는다. 저장 중 단계 이동이 문제가 되면 `onIndexChange`에서 무시한다.
 - 현재 스토리의 진행 문구는 `` `${index} / ${total}` `` 고정 문자열이다. 제품은 보간 키 하나(`onboarding.progress`)를 쓴다.
 - Storybook은 실제 서버·라우터 연동 증거가 아니다. 기본·어두운 테마·큰 글자와 실패와 복구를 각각 확인한다.
+
+2026-10-07 iOS 26.5 / 200% 글자에서 키보드가 열린 시작 안내의 고정 머리가 본문 높이를 모두 소비했다. Native는 기존 ScreenLayout의 본문 스크롤 안으로 단계 안내를 옮겨 입력에 도달하게 하고 footer의 완료·이전 버튼은 유지한다. [검토 결과](../../../../../docs/qa/2026-10-07-experiment-promotion-release.md).

package/docs/usage/screens/product-bento.md

@@ -0,0 +1,117 @@
+# 기능 카드와 주 행동
+
+- 단계: 화면
+- 상태: 배포
+- 지원: Web · Native
+- 적용: 1.14.0
+- 검토일: 2026-10-07
+- 근거: `reference-adoption-previews.tsx`, `reference-adoption.css`
+- 스토리북: `배포/화면/소개/기능 카드와 주 행동`
+
+승급: 2026-10-07 사용자 승인, [검토 결과](../../../../../docs/qa/2026-10-07-experiment-promotion-release.md). Storybook 분류이며 제품 적용 증거는 별도다.
+
+## 목적
+
+기능을 실제 미리보기로 보여 주고 첫 행동으로 이어지는 소개 화면이다. 기존 Surface/Stack/Button/ImageComparison을 조합한다.
+
+## 영역 구조
+
+```text
+[브랜드]
+[제목 · 가치 설명]
+[비교 미리보기] [기능 설명 두 장]  ← 넓은 Web 2:1
+[첫 입력(시작한 뒤)]
+[사용 방법(선택)]
+[보조 행동] [주 행동]
+[항상 보이는 체험·저장 범위]
+[처리 결과 · 저장된 제목]
+```
+
+좁은 Web과 Native는 비교→설명 두 장→첫 행동 순서로 한 열에 놓는다.
+
+| 영역 | 컴포넌트 | 위치 | 크기·간격 |
+| --- | --- | --- | --- |
+| 바깥 틀 | Web Stack / Native KeyboardAvoiding → ScreenLayout → Stack | Web 문서 스크롤 / Native 고정 제목 아래 본문 스크롤 | 본문 lg=20px, Native 제목 간격 md=16px, contentInset none |
+| 기능 | Surface/Stack | 설명 다음 | padding lg=20px, 카드 gap md=16px |
+| 제목/본문 | Text/Stack | 각 카드 안 | sm=12px |
+| 첫 행동 | BottomCTA | 기능·입력 뒤 | description → 보조/주 행동, flow 배치 |
+| 조건 | BottomInfo | 주 행동 바로 아래 | 항상 유지, 예제의 로컬 저장 범위 설명 |
+
+## 버튼과 행동 위치
+
+| 행동 | 컴포넌트·tone | 위치 | 개수·순서 |
+| --- | --- | --- | --- |
+| 주 행동 | BottomCTA primaryAction | 기능·입력 아래 | 시작 → 미리보기에 저장, 1개 |
+| 보조 행동 | BottomCTA secondaryAction | 같은 행동 영역 | 사용 방법 보기/접기 → 소개로 돌아가기 |
+| 비교 보조 | Button·secondary | 이미지 슬라이더 아래 | 전→후 전체 보기 2개, wrap |
+| 파괴 행동 | 없음 | 없음 | 0개 |
+
+## 상태
+
+| 상태 | 화면 모습 | 행동 |
+| --- | --- | --- |
+| 기본 | 설명과 비교·주/보조 행동·조건 안내 | 첫 입력 또는 사용 방법으로 이동 |
+| 로딩 | 실제 이미지 로드 상태 | 주 행동은 제품 가용성에 맞춤 |
+| 빈 | 제품 자료가 없으면 비교 영역 생략 | 문구와 첫 행동 유지 |
+| 오류 | 이미지 실패 대체 또는 저장 실패 문구·제목 유지 | 현재 제목으로 다시 저장 |
+| 진행 중 | 주 행동 spinner, 보조 행동 비활성 | 중복 실행 방지, 입력 내용은 제품 상태에 유지 |
+| 완료 | 확정한 제목과 성공 문구 | 다음 입력 가능 |
+
+## 사용하는 지침
+
+| 지침 | 쓰는 곳 |
+| --- | --- |
+| [ImageComparison](../components/image-comparison.md) | 기능 미리보기 |
+| [Stack](../components/stack.md) | 읽기 순서와 간격 |
+| [BottomCTA](../components/bottom-cta.md) · [BottomInfo](../components/bottom-info.md) | 주·보조 행동과 항상 보이는 조건 |
+
+## 코드 골격
+
+```tsx
+// Web
+<Stack gap="lg">
+  <Text variant="heading">{title}</Text>
+  <Surface padding="lg"><ImageComparison {...comparison} /></Surface>
+  <BottomCTA primaryAction={{ label: startLabel, onClick: start }} secondaryAction={{ label: helpLabel, onClick: showHelp }} />
+  <BottomInfo items={conditions} />
+</Stack>
+```
+
+```tsx
+// Native: screen-owned scrolling keeps the CTA reachable below long previews.
+<KeyboardAvoiding style={{ flex: 1 }}>
+<ScreenLayout title={title} contentInset="none">
+<Stack gap="lg">
+  <Surface padding="lg"><ImageComparison {...comparison} decrementLabel={decrementLabel} incrementLabel={incrementLabel} /></Surface>
+  <BottomCTA primaryAction={{ label: startLabel, onPress: start }} secondaryAction={{ label: helpLabel, onPress: showHelp }} />
+  <BottomInfo items={conditions} />
+</Stack>
+</ScreenLayout>
+</KeyboardAvoiding>
+```
+
+Native는 같은 public component entry를 `@hjmds/react-native`로 바꾸고 Button에 `onPress`를 쓴다.
+Native ImageComparison에는 증감 행동 label을 추가한다. 제품의 계정/저장 안내와 데이터는 제품이 공급한다.
+
+## 큰 글자·다크·좁은 폭
+
+| 조건 | 바뀌는 것 |
+| --- | --- |
+| 큰 글자 | 제목·본문·버튼이 자연스럽게 줄바꿈 |
+| 다크 | provider semantic palette 사용 |
+| 좁은 폭 | 예제 Web 48rem 이하에서 1열. Native는 항상 단일 순서 |
+
+
+### CTA 레퍼런스 흡수와 저장 소유권
+
+2026-10-07 CTA Gallery의 Webflow 데스크톱·모바일 캡처에서 주/보조 행동의 위계를,
+Ente 캡처에서 플랫폼 조건에 맞춘 행동 묶음을 확인했다. HJM에는 기존 BottomCTA/BottomInfo로
+역할을 분리하며 외부 브랜드 색·스토어 배지·가격을 복제하지 않는다. 별도 CTA 엔진은 추가하지 않는다.
+
+제목은 화면의 controlled state에 둔다. 소개로 돌아가 입력을 숨겨도 제목은 남고 다시 시작하면
+복구된다. 실제 서버가 없는 데모임을 상시 표시한다. 기존 useDemoAction/ActionSession으로
+중복 요청·pending·실패 후 재시도를 검증하며 350ms 지연은 데모 전용이다. 실패 시 현재 제목은
+유지하고 다시 저장은 현재 입력 snapshot을 제출한다. 저장된 제목은 마지막으로 확정한 값이다.
+
+Web 큰 글자에서는 BottomCTA 계약대로 주 행동이 위, 보조 행동이 아래로 쌓인다. 모바일 Native도
+같은 계약을 따르며 화면 host가 스크롤·키보드·safe area를 제공한다. Native 예제에는 기존 ScreenLayout과 KeyboardAvoiding을 연결한다. 스크롤 없는 Canvas에서 CTA가 화면 밖으로 잘렸던 2026-10-07 실제 확인에 따른 수정이다. 제품은 host safe area/keyboard offset을 실제 내비게이션에 맞춘다.

package/docs/usage/tokens/color.md

@@ -4,7 +4,7 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 1.12.1
-- 검토일: 2026-10-06
+- 검토일: 2026-10-07
 - 근거: [브랜드 경계](../../brand-boundary.md), [테마 팔레트](../../theme-palette.md), [테마 사용법](../../theming.md), `src/colors.ts`, `src/semantic-colors.ts`, `src/component-recipes.ts`(`textRecipe`·`iconRecipe`), `src/base-recipes.ts`(`buttonRecipe`·`surfaceRecipe`), `packages/react/src/theme.ts`, `packages/react-native/src/provider.tsx`
 - 스토리북: `배포/토큰/색과 글자/색상`
 
@@ -127,7 +127,7 @@ import { HjmProvider } from "@hjmds/react/provider";
 
 - `#0369a1`, `"gray"` 같은 색 값을 직접 쓰지 않는다. `THEMES.light.primary`를 import해 고정하는 것도 다크 모드와 브랜드를 깨뜨린다.
   현재 palette(`useHjmTheme()`·`useHjmNativeTheme()`)를 읽는다.
-- 제품 브랜드를 `--hjm-color-*` 재정의나 `.hjm-*` 덮어쓰기로 넣지 않는다. 경로는 `brandPalette` 하나다([브랜드 경계](../../brand-boundary.md)).
+- 제품 브랜드를 `--hjm-color-*` 재정의나 `.hjm-*` 덮어쓰기로 넣지 않는다. 색만 바꾸면 `brandPalette`, 여러 표현 축을 함께 선택하면 검증한 `designProfile`을 쓴다([브랜드 경계](../../brand-boundary.md)).
 - 성공·오류 색을 브랜드 색으로, 브랜드 색을 상태 색으로 쓰지 않는다.
 - `textWeak`로 읽혀야 하는 문구를 쓰지 않는다. 보조 문구는 `textMuted`·`textSub`다.
 - 채운 `primary`·`dangerFill`·`accentFill` 위에 `text`를 올리지 않는다. 짝(`onPrimary`·`onDanger`·`onAccentFill`)을 쓴다.
@@ -140,3 +140,10 @@ import { HjmProvider } from "@hjmds/react/provider";
 | 테마 색 읽기 | `--hjm-color-<kebab key>` CSS 변수 또는 `useHjmTheme().palette.theme` | `useHjmNativeTheme().colors` |
 | 피드백 색 | `--hjm-accent-<tone>`, `--hjm-accent-fill-<tone>` | `theme.palette.statusAccents` · `statusAccentFills` |
 | alpha 섞기 | CSS `color-mix` | `resolveColorReference` 또는 `withAlpha` |
+
+### 디자인 프로필(실험·미게시)
+
+위 표는 프로필 없는 기본값이다. 앱이 [디자인 프로필](../../design-profile.md)을 선택하면 연결된
+컴포넌트는 Web CSS 변수 또는 Native `theme.tokens`/semantic palette를 읽는다.
+직접 foundations를 import한 값은 기본 상수이므로 프로필 변경을 따라가지 않는다. 현재 연결 API의 범위는
+프로필 계약에서 확인하고 앱 CSS로 내부 값을 덮지 않는다.

package/docs/usage/tokens/elevation-opacity.md

@@ -4,7 +4,7 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 1.12.1
-- 검토일: 2026-10-06
+- 검토일: 2026-10-07
 - 근거: `src/foundations.ts`(`shadow`·`opacity`·`stateLayer`·`overlay`·`backdrop`·`scrim`), `src/component-contracts.ts`(`floatingSurfaceContract`), `src/component-recipes.ts`(`dialogRecipe`·`sheetRecipe`·`toastRecipe`·`bottomCtaRecipe`), `packages/react/src/theme.ts`, `packages/react/src/styles.css`, `packages/react-native/src/primitives.tsx`
 - 스토리북: `배포/토큰/표면과 움직임/그림자와 투명도`
 
@@ -84,3 +84,10 @@ const s = shadow.floating;
 | HJM 목록 팝업 그림자 | `--hjm-shadow-floating`(Select·Menubar·DatePicker·Menu·Popover) | Modal 기반 메뉴는 해당 플랫폼 표면 계약 |
 
 2026-10-06 후속 검수에서 정의만 있던 Web 그림자 변수를 실제 떠 있는 표면에 연결했다. CommandPalette·Tour 같은 큰 강조 표면은 `shadow.overlay`, 일반 popup·Surface는 `shadow.floating`을 쓴다. Native Surface의 별도 blur 6도 floating token으로 맞췄다. 포커스 링·선택 테두리·스위치 손잡이의 inset 표현은 높이 그림자가 아니므로 각 컴포넌트 상태 계약을 유지한다.
+
+### 디자인 프로필(실험·미게시)
+
+위 표는 프로필 없는 기본값이다. 앱이 [디자인 프로필](../../design-profile.md)을 선택하면 연결된
+컴포넌트는 Web CSS 변수 또는 Native `theme.tokens`/semantic palette를 읽는다.
+직접 foundations를 import한 값은 기본 상수이므로 프로필 변경을 따라가지 않는다. 현재 연결 API의 범위는
+프로필 계약에서 확인하고 앱 CSS로 내부 값을 덮지 않는다.

package/docs/usage/tokens/motion.md

@@ -4,7 +4,7 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 1.12.1
-- 검토일: 2026-10-06
+- 검토일: 2026-10-07
 - 근거: `src/foundations.ts`(`motion`·`easing`·`motionPreset`·`spring`), `packages/react/src/theme.ts`, `packages/react/src/provider.tsx`, `packages/react-native/src/provider.tsx`
 - 스토리북: `배포/토큰/표면과 움직임/모션`
 
@@ -86,3 +86,12 @@ Web에서 JS로 직접 움직일 때는 `useHjmTheme().environment.reducedMotion
 | 동작 줄이기 | `prefers-reduced-motion`을 Provider가 읽어 `--hjm-motion-*`를 `0ms`로, 루트에 `data-motion="reduced"` | `AccessibilityInfo`를 Provider가 읽어 `environment.reducedMotion`. 첫 프레임은 줄이기로 가정 |
 | 곡선 | `cubic-bezier(...)` | `Easing.bezier(...)` |
 | 스프링 | 쓰지 않음 | `spring.*` |
+
+프로필 선택 이동 (미게시, 1.14.0 이후):
+
+`designProfile.interactions.selectionMotion`은 SegmentedControl과 appearance를 생략한
+[Tabs](../components/tabs.md)에 연결된다. Tabs의 `slide`는 `motion.normal` 200ms·
+`easing.standard`로 측정한 표시선만 이동한다. 명시 `gooey`의 기존 320ms 늘어남과 구분한다.
+프로필은 선택 값·패널 수명·제품 초안을 결정하지 않는다. 동작 줄이기와 배경 상태에서는
+선택 위치로 즉시 정리한다. 원본 대조에서 발견한 누락과 플랫폼 검증 범위는
+[채택 판단](../../../../../docs/plans/aceternity-interaction-adoption-2026-10-07.md)에 남겼다.

package/docs/usage/tokens/radius.md

@@ -4,7 +4,7 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 1.12.1
-- 검토일: 2026-10-06
+- 검토일: 2026-10-07
 - 근거: `src/foundations.ts`(`radius`), `src/base-recipes.ts`(`buttonRecipe.shapes`·`fieldRecipe.shapes`·`surfaceDefaults`), `src/component-recipes.ts`, `packages/react/src/theme.ts`
 - 스토리북: `배포/토큰/표면과 움직임/둥글기`
 
@@ -51,3 +51,10 @@ const styles = StyleSheet.create({ thumb: { borderRadius: radius.md, overflow: "
 - `border-radius: 10px`처럼 토큰에 없는 값을 쓰지 않는다.
 - HJM 컴포넌트의 radius를 `style`·`className`으로 덮지 않는다. Button·필드는 `shape`, Surface는 `radius` prop으로만 고른다.
 - 원형을 만들려고 `50%`나 폭의 절반을 계산하지 않는다. `radius.full`을 쓴다.
+
+### 디자인 프로필(실험·미게시)
+
+위 표는 프로필 없는 기본값이다. 앱이 [디자인 프로필](../../design-profile.md)을 선택하면 연결된
+컴포넌트는 Web CSS 변수 또는 Native `theme.tokens`/semantic palette를 읽는다.
+직접 foundations를 import한 값은 기본 상수이므로 프로필 변경을 따라가지 않는다. 현재 연결 API의 범위는
+프로필 계약에서 확인하고 앱 CSS로 내부 값을 덮지 않는다.

package/docs/usage/tokens/typography.md

@@ -4,7 +4,7 @@
 - 상태: 배포
 - 지원: Web · Native
 - 적용: 1.12.1
-- 검토일: 2026-10-06
+- 검토일: 2026-10-07
 - 근거: `src/foundations.ts`(`typography`·`heading`·`fontFamily`·`fontWeight`·`letterSpacing`·`numeric`·`largeTextThreshold`), `src/component-recipes.ts`(`textRecipe`), `packages/react/src/theme.ts`, `packages/react/src/provider.tsx`, `packages/react-native/src/provider.tsx`
 - 스토리북: `배포/토큰/색과 글자/타이포그래피`
 
@@ -87,3 +87,17 @@ import { Heading } from "@hjmds/react-native/heading";
 | 단위 | rem(16px 기준) × `--hjm-text-scale` | dp. OS 글자 크기를 따르고, Provider `textScale`을 주면 HJM이 한 번만 곱한다 |
 | 서체 | `--hjm-font-family-ui` 목록 | OS 기본 서체(HJM이 `fontFamily`를 지정하지 않음) |
 | 큰 글자 판정 | 루트 `data-large-text` | `isLargeTextScale(environment.textScale)` |
+
+### 디자인 프로필(실험·미게시)
+
+위 표는 프로필 없는 기본값이다. 앱이 [디자인 프로필](../../design-profile.md)을 선택하면 연결된
+컴포넌트는 Web CSS 변수 또는 Native `theme.tokens`/semantic palette를 읽는다.
+직접 foundations를 import한 값은 기본 상수이므로 프로필 변경을 따라가지 않는다. 현재 연결 API의 범위는
+프로필 계약에서 확인하고 앱 CSS로 내부 값을 덮지 않는다.
+
+
+Heading의 다섯 시각 단계는 `defineHjmDesignProfile({ tokens: { heading: ... } })`로
+일괄 지정한다. Web `--hjm-heading-size/line-height/weight`, Native Heading의 Text
+metrics로 연결된다. 해당 heading을 담은 Provider에서 가장 가까운 profile을 읽는다.
+level3/4/5는 기존 typography heading/titleLarge/title override를 기본으로 병합하며
+명시적인 heading 값이 우선한다. 문서의 h1~h6 순서는 `semanticLevel`이 소유한다.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hjmds/design-contracts",
-  "version": "1.13.1",
+  "version": "1.15.0",
   "description": "Renderer-neutral design contracts, tokens, recipes, and behaviors shared by HJM products.",
   "license": "MIT",
   "repository": {
@@ -589,6 +589,12 @@
       "import": "./dist/content-transition.js",
       "default": "./dist/content-transition.js"
     },
+    "./reference-controls": {
+      "types": "./dist/reference-controls.d.ts",
+      "react-native": "./dist/reference-controls.js",
+      "import": "./dist/reference-controls.js",
+      "default": "./dist/reference-controls.js"
+    },
     "./duration-field": {
       "types": "./dist/duration-field.d.ts",
       "react-native": "./dist/duration-field.js",
@@ -666,6 +672,48 @@
       "react-native": "./dist/screen-patterns.js",
       "import": "./dist/screen-patterns.js",
       "default": "./dist/screen-patterns.js"
+    },
+    "./progressive-blur": {
+      "types": "./dist/progressive-blur.d.ts",
+      "react-native": "./dist/progressive-blur.js",
+      "import": "./dist/progressive-blur.js",
+      "default": "./dist/progressive-blur.js"
+    },
+    "./text-annotation": {
+      "types": "./dist/text-annotation.d.ts",
+      "react-native": "./dist/text-annotation.js",
+      "import": "./dist/text-annotation.js",
+      "default": "./dist/text-annotation.js"
+    },
+    "./date-entry": {
+      "types": "./dist/date-entry.d.ts",
+      "react-native": "./dist/date-entry.js",
+      "import": "./dist/date-entry.js",
+      "default": "./dist/date-entry.js"
+    },
+    "./field-group": {
+      "types": "./dist/field-group.d.ts",
+      "react-native": "./dist/field-group.js",
+      "import": "./dist/field-group.js",
+      "default": "./dist/field-group.js"
+    },
+    "./document-resource": {
+      "types": "./dist/document-resource.d.ts",
+      "react-native": "./dist/document-resource.js",
+      "import": "./dist/document-resource.js",
+      "default": "./dist/document-resource.js"
+    },
+    "./design-profile": {
+      "types": "./dist/design-profile.d.ts",
+      "react-native": "./dist/design-profile.js",
+      "import": "./dist/design-profile.js",
+      "default": "./dist/design-profile.js"
+    },
+    "./design-profile-layout": {
+      "types": "./dist/design-profile-layout.d.ts",
+      "react-native": "./dist/design-profile-layout.js",
+      "import": "./dist/design-profile-layout.js",
+      "default": "./dist/design-profile-layout.js"
     }
   },
   "files": [