@ankhorage/zora 0.9.0 → 0.11.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.11.0
+
+### Minor Changes
+
+- a600848: Expands scoped theme support across public ZORA components, layouts, patterns, and foundation primitives through shared `themeId` and `mode` base props.
+
+## 0.10.0
+
+### Minor Changes
+
+- 8ad107f: Adds nested ZORA theme scopes with shared `themeId` and `mode` base props so components can override theme context for themselves and their subtrees.
+
 ## 0.9.0
 
 ### Minor Changes

package/README.md

@@ -68,6 +68,52 @@ export function App() {
 }
 ```
 
+## Scoped themes
+
+ZORA supports nested theme scopes. A component may set `mode` and, later,
+`themeId`; everything inside inherits the nearest scope.
+
+```tsx
+import React from 'react';
+import { Button, Heading, Panel, Text, ZoraProvider, type ZoraTheme } from '@ankhorage/zora';
+
+export function App({ appTheme }: { appTheme: ZoraTheme }) {
+  return (
+    <ZoraProvider theme={appTheme} initialMode="light">
+      <Panel mode="dark">
+        <Heading>Studio panel</Heading>
+        <Text>Text inherits dark mode.</Text>
+        <Button>Also scoped.</Button>
+      </Panel>
+    </ZoraProvider>
+  );
+}
+```
+
+`mode` and `themeId` are available on public ZORA components through `ZoraBaseProps`.
+Use component props for local component/subtree overrides.
+
+Use `ZoraThemeScope` when the scope is conceptual and does not belong to one specific component:
+
+```tsx
+import React from 'react';
+import { SidebarLayout, Text, ZoraProvider, ZoraThemeScope, type ZoraTheme } from '@ankhorage/zora';
+
+export function App({ appTheme }: { appTheme: ZoraTheme }) {
+  return (
+    <ZoraProvider theme={appTheme} initialMode="light">
+      <ZoraThemeScope mode="dark">
+        <SidebarLayout sidebar={<Text>Sidebar</Text>}>
+          <Text>Everything inside uses dark mode.</Text>
+        </SidebarLayout>
+      </ZoraThemeScope>
+    </ZoraProvider>
+  );
+}
+```
+
+`themeId` currently accepts the inherited theme id. Full theme registries arrive in a later phase.
+
 ## Foundation primitives
 
 ZORA re-exports selected Surface foundation primitives for app-facing layout
@@ -122,21 +168,21 @@ responsive for mobile and web layouts.
 
 ZORA props:
 
-| Prop            | Type                                     | Default     | Notes                                        |
-| --------------- | ---------------------------------------- | ----------- | -------------------------------------------- |
-| `children`      | `React.ReactNode`                        | -           | Primary content.                             |
-| `text`          | `string`                                 | -           | Manifest-friendly content prop.              |
-| `i18nKey`       | `string`                                 | -           | Runtime-resolved fallback key when no content prop is provided.                    |
-| `level`         | `HeadingLevel`                           | `2`         | Semantic heading level from `1` through `6`. |
-| `size`          | `Responsive<HeadingSize>`                | level size  | Visual scale: `display`, `h1` through `h6`.  |
-| `tone`          | `Responsive<HeadingTone>`                | `'default'` | Semantic text color.                         |
-| `align`         | `Responsive<HeadingAlign>`               | -           | Text alignment.                              |
-| `weight`        | `Responsive<HeadingWeight>`              | recipe      | Optional structured weight override.         |
-| `italic`        | `boolean`                                | `false`     | Italic style.                                |
-| `numberOfLines` | `number`                                 | -           | Native/web truncation line count.            |
-| `ellipsizeMode` | `'head' \| 'middle' \| 'tail' \| 'clip'` | -           | Truncation behavior.                         |
-| `selectable`    | `boolean`                                | -           | Allows text selection where supported.       |
-| `testID`        | `string`                                 | -           | Test id.                                     |
+| Prop            | Type                                     | Default     | Notes                                                           |
+| --------------- | ---------------------------------------- | ----------- | --------------------------------------------------------------- |
+| `children`      | `React.ReactNode`                        | -           | Primary content.                                                |
+| `text`          | `string`                                 | -           | Manifest-friendly content prop.                                 |
+| `i18nKey`       | `string`                                 | -           | Runtime-resolved fallback key when no content prop is provided. |
+| `level`         | `HeadingLevel`                           | `2`         | Semantic heading level from `1` through `6`.                    |
+| `size`          | `Responsive<HeadingSize>`                | level size  | Visual scale: `display`, `h1` through `h6`.                     |
+| `tone`          | `Responsive<HeadingTone>`                | `'default'` | Semantic text color.                                            |
+| `align`         | `Responsive<HeadingAlign>`               | -           | Text alignment.                                                 |
+| `weight`        | `Responsive<HeadingWeight>`              | recipe      | Optional structured weight override.                            |
+| `italic`        | `boolean`                                | `false`     | Italic style.                                                   |
+| `numberOfLines` | `number`                                 | -           | Native/web truncation line count.                               |
+| `ellipsizeMode` | `'head' \| 'middle' \| 'tail' \| 'clip'` | -           | Truncation behavior.                                            |
+| `selectable`    | `boolean`                                | -           | Allows text selection where supported.                          |
+| `testID`        | `string`                                 | -           | Test id.                                                        |
 
 No inherited props. `HeadingProps` is declared directly by ZORA to keep heading
 usage structured and template-safe.
@@ -163,20 +209,20 @@ responsive props.
 
 ZORA props:
 
-| Prop            | Type                                     | Default     | Notes                                  |
-| --------------- | ---------------------------------------- | ----------- | -------------------------------------- |
-| `children`      | `React.ReactNode`                        | -           | Primary content.                       |
-| `text`          | `string`                                 | -           | Manifest-friendly content prop.        |
-| `i18nKey`       | `string`                                 | -           | Runtime-resolved fallback key when no content prop is provided.              |
-| `variant`       | `Responsive<TextVariant>`                | `'body'`    | Typography recipe.                     |
-| `tone`          | `Responsive<TextTone>`                   | `'default'` | Semantic text color.                   |
-| `align`         | `Responsive<TextAlign>`                  | -           | Text alignment.                        |
-| `weight`        | `Responsive<TextWeight>`                 | recipe      | Optional structured weight override.   |
-| `italic`        | `boolean`                                | `false`     | Italic style.                          |
-| `numberOfLines` | `number`                                 | -           | Native/web truncation line count.      |
-| `ellipsizeMode` | `'head' \| 'middle' \| 'tail' \| 'clip'` | -           | Truncation behavior.                   |
-| `selectable`    | `boolean`                                | -           | Allows text selection where supported. |
-| `testID`        | `string`                                 | -           | Test id.                               |
+| Prop            | Type                                     | Default     | Notes                                                           |
+| --------------- | ---------------------------------------- | ----------- | --------------------------------------------------------------- |
+| `children`      | `React.ReactNode`                        | -           | Primary content.                                                |
+| `text`          | `string`                                 | -           | Manifest-friendly content prop.                                 |
+| `i18nKey`       | `string`                                 | -           | Runtime-resolved fallback key when no content prop is provided. |
+| `variant`       | `Responsive<TextVariant>`                | `'body'`    | Typography recipe.                                              |
+| `tone`          | `Responsive<TextTone>`                   | `'default'` | Semantic text color.                                            |
+| `align`         | `Responsive<TextAlign>`                  | -           | Text alignment.                                                 |
+| `weight`        | `Responsive<TextWeight>`                 | recipe      | Optional structured weight override.                            |
+| `italic`        | `boolean`                                | `false`     | Italic style.                                                   |
+| `numberOfLines` | `number`                                 | -           | Native/web truncation line count.                               |
+| `ellipsizeMode` | `'head' \| 'middle' \| 'tail' \| 'clip'` | -           | Truncation behavior.                                            |
+| `selectable`    | `boolean`                                | -           | Allows text selection where supported.                          |
+| `testID`        | `string`                                 | -           | Test id.                                                        |
 
 No inherited props. `TextProps` is declared directly by ZORA to keep text
 structured and template-safe.
@@ -1332,11 +1378,11 @@ Pass a theme seed to define your app theme:
 
 ZORA props:
 
-| Prop          | Type                 | Default            | Notes                                  |
-| ------------- | -------------------- | ------------------ | -------------------------------------- |
-| `children`    | `React.ReactNode`    | -                  | Required app content.                  |
-| `theme`       | `ZoraTheme`          | `zoraDefaultTheme` | App-facing theme seed for ZORA.        |
-| `initialMode` | `'light' \| 'dark'`  | `'light'`          | Initial theme mode passed to Surface.  |
+| Prop          | Type                | Default            | Notes                                 |
+| ------------- | ------------------- | ------------------ | ------------------------------------- |
+| `children`    | `React.ReactNode`   | -                  | Required app content.                 |
+| `theme`       | `ZoraTheme`         | `zoraDefaultTheme` | App-facing theme seed for ZORA.       |
+| `initialMode` | `'light' \| 'dark'` | `'light'`          | Initial theme mode passed to Surface. |
 
 Inherited props:
 

package/dist/components/badge/Badge.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import type { BadgeProps } from './types';
-export declare function Badge({ children, tone, emphasis, size, ...props }: BadgeProps): React.JSX.Element;
+export declare const Badge: (props: BadgeProps) => React.ReactElement | null;
 //# sourceMappingURL=Badge.d.ts.map

package/dist/components/badge/Badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/badge/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,wBAAgB,KAAK,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,qBAY7E"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/badge/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAwB1C,eAAO,MAAM,KAAK,kDAAiC,CAAC"}

package/dist/components/badge/Badge.js

@@ -1,8 +1,10 @@
 import { Badge as SurfaceBadge } from '@ankhorage/surface';
 import React from 'react';
 import { resolveBadgeRecipe } from '../../internal/recipes';
-export function Badge({ children, tone, emphasis, size, ...props }) {
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+function BadgeInner({ themeId: _themeId, mode: _mode, children, tone, emphasis, size, ...props }) {
     const recipe = resolveBadgeRecipe({ tone, emphasis, size });
     return (<SurfaceBadge {...props} content={children} size={recipe.size} tone={recipe.tone} variant={recipe.variant}/>);
 }
+export const Badge = withZoraThemeScope(BadgeInner);
 //# sourceMappingURL=Badge.js.map

package/dist/components/badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/components/badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAG5D,MAAM,UAAU,KAAK,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,KAAK,EAAc;IAC5E,MAAM,MAAM,GAAG,kBAAkB,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;IAE5D,OAAO,CACL,CAAC,YAAY,CACX,IAAI,KAAK,CAAC,CACV,OAAO,CAAC,CAAC,QAAQ,CAAC,CAClB,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAClB,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAClB,OAAO,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,EACxB,CACH,CAAC;AACJ,CAAC","sourcesContent":["import { Badge as SurfaceBadge } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { resolveBadgeRecipe } from '../../internal/recipes';\nimport type { BadgeProps } from './types';\n\nexport function Badge({ children, tone, emphasis, size, ...props }: BadgeProps) {\n  const recipe = resolveBadgeRecipe({ tone, emphasis, size });\n\n  return (\n    <SurfaceBadge\n      {...props}\n      content={children}\n      size={recipe.size}\n      tone={recipe.tone}\n      variant={recipe.variant}\n    />\n  );\n}\n"]}
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/components/badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,UAAU,CAAC,EAClB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,GAAG,KAAK,EACG;IACX,MAAM,MAAM,GAAG,kBAAkB,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;IAE5D,OAAO,CACL,CAAC,YAAY,CACX,IAAI,KAAK,CAAC,CACV,OAAO,CAAC,CAAC,QAAQ,CAAC,CAClB,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAClB,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAClB,OAAO,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,EACxB,CACH,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC","sourcesContent":["import { Badge as SurfaceBadge } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { resolveBadgeRecipe } from '../../internal/recipes';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { BadgeProps } from './types';\n\nfunction BadgeInner({\n  themeId: _themeId,\n  mode: _mode,\n  children,\n  tone,\n  emphasis,\n  size,\n  ...props\n}: BadgeProps) {\n  const recipe = resolveBadgeRecipe({ tone, emphasis, size });\n\n  return (\n    <SurfaceBadge\n      {...props}\n      content={children}\n      size={recipe.size}\n      tone={recipe.tone}\n      variant={recipe.variant}\n    />\n  );\n}\n\nexport const Badge = withZoraThemeScope(BadgeInner);\n"]}

package/dist/components/badge/types.d.ts

@@ -1,7 +1,8 @@
 import type { BadgeProps as SurfaceBadgeProps } from '@ankhorage/surface';
 import type React from 'react';
 import type { ZoraBadgeEmphasis, ZoraControlSize, ZoraTone } from '../../internal/recipes';
-export interface BadgeProps extends Omit<SurfaceBadgeProps, 'content' | 'size' | 'tone' | 'variant'> {
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+export interface BadgeProps extends ZoraBaseProps, Omit<SurfaceBadgeProps, 'content' | 'size' | 'tone' | 'variant' | 'mode' | 'themeId'> {
     children?: React.ReactNode;
     tone?: ZoraTone;
     emphasis?: ZoraBadgeEmphasis;

package/dist/components/badge/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/badge/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,IAAI,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC1E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAE3F,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,iBAAiB,EACjB,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CACxC;IACC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/badge/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,IAAI,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC1E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAC3F,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,UACf,SACE,aAAa,EACb,IAAI,CAAC,iBAAiB,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;IACvF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB"}

package/dist/components/badge/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/badge/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BadgeProps as SurfaceBadgeProps } from '@ankhorage/surface';\nimport type React from 'react';\n\nimport type { ZoraBadgeEmphasis, ZoraControlSize, ZoraTone } from '../../internal/recipes';\n\nexport interface BadgeProps extends Omit<\n  SurfaceBadgeProps,\n  'content' | 'size' | 'tone' | 'variant'\n> {\n  children?: React.ReactNode;\n  tone?: ZoraTone;\n  emphasis?: ZoraBadgeEmphasis;\n  size?: ZoraControlSize;\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/badge/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BadgeProps as SurfaceBadgeProps } from '@ankhorage/surface';\nimport type React from 'react';\n\nimport type { ZoraBadgeEmphasis, ZoraControlSize, ZoraTone } from '../../internal/recipes';\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface BadgeProps\n  extends\n    ZoraBaseProps,\n    Omit<SurfaceBadgeProps, 'content' | 'size' | 'tone' | 'variant' | 'mode' | 'themeId'> {\n  children?: React.ReactNode;\n  tone?: ZoraTone;\n  emphasis?: ZoraBadgeEmphasis;\n  size?: ZoraControlSize;\n}\n"]}

package/dist/components/button/Button.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import type { ButtonProps } from './types';
-export declare function Button({ tone, emphasis, size, ...props }: ButtonProps): React.JSX.Element;
+export declare const Button: (props: ButtonProps) => React.ReactElement | null;
 //# sourceMappingURL=Button.d.ts.map

package/dist/components/button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,wBAAgB,MAAM,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,qBAMrE"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAiB3C,eAAO,MAAM,MAAM,mDAAkC,CAAC"}

package/dist/components/button/Button.js

@@ -1,8 +1,10 @@
 import { Button as SurfaceButton } from '@ankhorage/surface';
 import React from 'react';
 import { resolveButtonRecipe } from '../../internal/recipes';
-export function Button({ tone, emphasis, size, ...props }) {
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+function ButtonInner({ themeId: _themeId, mode: _mode, tone, emphasis, size, ...props }) {
     const recipe = resolveButtonRecipe({ tone, emphasis, size });
     return (<SurfaceButton {...props} size={recipe.size} tone={recipe.tone} variant={recipe.variant}/>);
 }
+export const Button = withZoraThemeScope(ButtonInner);
 //# sourceMappingURL=Button.js.map

package/dist/components/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAG7D,MAAM,UAAU,MAAM,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,KAAK,EAAe;IACpE,MAAM,MAAM,GAAG,mBAAmB,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;IAE7D,OAAO,CACL,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,EAAG,CAC5F,CAAC;AACJ,CAAC","sourcesContent":["import { Button as SurfaceButton } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { resolveButtonRecipe } from '../../internal/recipes';\nimport type { ButtonProps } from './types';\n\nexport function Button({ tone, emphasis, size, ...props }: ButtonProps) {\n  const recipe = resolveButtonRecipe({ tone, emphasis, size });\n\n  return (\n    <SurfaceButton {...props} size={recipe.size} tone={recipe.tone} variant={recipe.variant} />\n  );\n}\n"]}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,WAAW,CAAC,EACnB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,GAAG,KAAK,EACI;IACZ,MAAM,MAAM,GAAG,mBAAmB,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;IAE7D,OAAO,CACL,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,EAAG,CAC5F,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,MAAM,GAAG,kBAAkB,CAAC,WAAW,CAAC,CAAC","sourcesContent":["import { Button as SurfaceButton } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { resolveButtonRecipe } from '../../internal/recipes';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { ButtonProps } from './types';\n\nfunction ButtonInner({\n  themeId: _themeId,\n  mode: _mode,\n  tone,\n  emphasis,\n  size,\n  ...props\n}: ButtonProps) {\n  const recipe = resolveButtonRecipe({ tone, emphasis, size });\n\n  return (\n    <SurfaceButton {...props} size={recipe.size} tone={recipe.tone} variant={recipe.variant} />\n  );\n}\n\nexport const Button = withZoraThemeScope(ButtonInner);\n"]}

package/dist/components/button/types.d.ts

@@ -1,7 +1,8 @@
 import type { ButtonIconSpec, ButtonProps as SurfaceButtonProps } from '@ankhorage/surface';
 import type React from 'react';
 import type { ZoraControlSize, ZoraEmphasis, ZoraTone } from '../../internal/recipes';
-export interface ButtonProps extends Omit<SurfaceButtonProps, 'children' | 'size' | 'tone' | 'variant'> {
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+export interface ButtonProps extends ZoraBaseProps, Omit<SurfaceButtonProps, 'children' | 'size' | 'tone' | 'variant'> {
     children?: React.ReactNode;
     tone?: ZoraTone;
     emphasis?: ZoraEmphasis;

package/dist/components/button/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,IAAI,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAC5F,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAEtF,MAAM,WAAW,WAAY,SAAQ,IAAI,CACvC,kBAAkB,EAClB,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CACzC;IACC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B,YAAY,CAAC,EAAE,cAAc,CAAC;CAC/B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,IAAI,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAC5F,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AACtF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,WACf,SAAQ,aAAa,EAAE,IAAI,CAAC,kBAAkB,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACzF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B,YAAY,CAAC,EAAE,cAAc,CAAC;CAC/B"}

package/dist/components/button/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/button/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonIconSpec, ButtonProps as SurfaceButtonProps } from '@ankhorage/surface';\nimport type React from 'react';\n\nimport type { ZoraControlSize, ZoraEmphasis, ZoraTone } from '../../internal/recipes';\n\nexport interface ButtonProps extends Omit<\n  SurfaceButtonProps,\n  'children' | 'size' | 'tone' | 'variant'\n> {\n  children?: React.ReactNode;\n  tone?: ZoraTone;\n  emphasis?: ZoraEmphasis;\n  size?: ZoraControlSize;\n  leadingIcon?: ButtonIconSpec;\n  trailingIcon?: ButtonIconSpec;\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/button/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonIconSpec, ButtonProps as SurfaceButtonProps } from '@ankhorage/surface';\nimport type React from 'react';\n\nimport type { ZoraControlSize, ZoraEmphasis, ZoraTone } from '../../internal/recipes';\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface ButtonProps\n  extends ZoraBaseProps, Omit<SurfaceButtonProps, 'children' | 'size' | 'tone' | 'variant'> {\n  children?: React.ReactNode;\n  tone?: ZoraTone;\n  emphasis?: ZoraEmphasis;\n  size?: ZoraControlSize;\n  leadingIcon?: ButtonIconSpec;\n  trailingIcon?: ButtonIconSpec;\n}\n"]}

package/dist/components/card/Card.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import type { CardProps } from './types';
-export declare function Card({ children, title, description, eyebrow, actions, footer, tone, compact, onPress, ...props }: CardProps): React.JSX.Element;
+export declare const Card: (props: CardProps) => React.ReactElement | null;
 //# sourceMappingURL=Card.d.ts.map

package/dist/components/card/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/card/Card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,KAAK,EACL,WAAW,EACX,OAAO,EACP,OAAO,EACP,MAAM,EACN,IAAgB,EAChB,OAAe,EACf,OAAO,EACP,GAAG,KAAK,EACT,EAAE,SAAS,qBA+CX"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/card/Card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAgEzC,eAAO,MAAM,IAAI,iDAAgC,CAAC"}

package/dist/components/card/Card.js

@@ -1,9 +1,10 @@
 import { Box, Card as SurfaceCard, Stack } from '@ankhorage/surface';
 import React from 'react';
 import { resolveCardVariant } from '../../internal/recipes';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { Heading } from '../heading';
 import { Text } from '../text';
-export function Card({ children, title, description, eyebrow, actions, footer, tone = 'default', compact = false, onPress, ...props }) {
+function CardInner({ themeId: _themeId, mode: _mode, children, title, description, eyebrow, actions, footer, tone = 'default', compact = false, onPress, ...props }) {
     const hasHeader = [eyebrow, title, description, actions].some((item) => item != null);
     const hasFooter = footer !== undefined;
     const gap = compact ? 's' : 'm';
@@ -31,4 +32,5 @@ export function Card({ children, title, description, eyebrow, actions, footer, t
       </Stack>
     </SurfaceCard>);
 }
+export const Card = withZoraThemeScope(CardInner);
 //# sourceMappingURL=Card.js.map

package/dist/components/card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/card/Card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Box, Card as SurfaceCard, Stack } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { resolveCardVariant } from '../../internal/recipes';\nimport { Heading } from '../heading';\nimport { Text } from '../text';\nimport type { CardProps } from './types';\n\nexport function Card({\n  children,\n  title,\n  description,\n  eyebrow,\n  actions,\n  footer,\n  tone = 'default',\n  compact = false,\n  onPress,\n  ...props\n}: CardProps) {\n  const hasHeader = [eyebrow, title, description, actions].some((item) => item != null);\n  const hasFooter = footer !== undefined;\n  const gap = compact ? 's' : 'm';\n  const isInteractive = Boolean(onPress) && !actions;\n\n  return (\n    <SurfaceCard\n      {...props}\n      onPress={isInteractive ? onPress : undefined}\n      p={compact ? 'm' : 'l'}\n      radius=\"l\"\n      variant={resolveCardVariant(tone)}\n    >\n      <Stack gap={gap}>\n        {hasHeader ? (\n          <Stack\n            align={{ base: 'flex-start', md: 'center' }}\n            direction={{ base: 'column', md: 'row' }}\n            gap=\"m\"\n            justify=\"space-between\"\n          >\n            <Box flex={1}>\n              <Stack gap=\"xs\">\n                {eyebrow ? (\n                  <Text tone=\"muted\" variant=\"caption\" weight=\"semiBold\">\n                    {eyebrow}\n                  </Text>\n                ) : null}\n                {title ? <Heading level={compact ? 4 : 3}>{title}</Heading> : null}\n                {description ? (\n                  <Text tone=\"muted\" variant=\"bodySmall\">\n                    {description}\n                  </Text>\n                ) : null}\n              </Stack>\n            </Box>\n            {actions ? <Box>{actions}</Box> : null}\n          </Stack>\n        ) : null}\n\n        {children ? <Box>{children}</Box> : null}\n\n        {hasFooter ? <Box pt=\"xs\">{footer}</Box> : null}\n      </Stack>\n    </SurfaceCard>\n  );\n}\n"]}
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/card/Card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Box, Card as SurfaceCard, Stack } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { resolveCardVariant } from '../../internal/recipes';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { Heading } from '../heading';\nimport { Text } from '../text';\nimport type { CardProps } from './types';\n\nfunction CardInner({\n  themeId: _themeId,\n  mode: _mode,\n  children,\n  title,\n  description,\n  eyebrow,\n  actions,\n  footer,\n  tone = 'default',\n  compact = false,\n  onPress,\n  ...props\n}: CardProps) {\n  const hasHeader = [eyebrow, title, description, actions].some((item) => item != null);\n  const hasFooter = footer !== undefined;\n  const gap = compact ? 's' : 'm';\n  const isInteractive = Boolean(onPress) && !actions;\n\n  return (\n    <SurfaceCard\n      {...props}\n      onPress={isInteractive ? onPress : undefined}\n      p={compact ? 'm' : 'l'}\n      radius=\"l\"\n      variant={resolveCardVariant(tone)}\n    >\n      <Stack gap={gap}>\n        {hasHeader ? (\n          <Stack\n            align={{ base: 'flex-start', md: 'center' }}\n            direction={{ base: 'column', md: 'row' }}\n            gap=\"m\"\n            justify=\"space-between\"\n          >\n            <Box flex={1}>\n              <Stack gap=\"xs\">\n                {eyebrow ? (\n                  <Text tone=\"muted\" variant=\"caption\" weight=\"semiBold\">\n                    {eyebrow}\n                  </Text>\n                ) : null}\n                {title ? <Heading level={compact ? 4 : 3}>{title}</Heading> : null}\n                {description ? (\n                  <Text tone=\"muted\" variant=\"bodySmall\">\n                    {description}\n                  </Text>\n                ) : null}\n              </Stack>\n            </Box>\n            {actions ? <Box>{actions}</Box> : null}\n          </Stack>\n        ) : null}\n\n        {children ? <Box>{children}</Box> : null}\n\n        {hasFooter ? <Box pt=\"xs\">{footer}</Box> : null}\n      </Stack>\n    </SurfaceCard>\n  );\n}\n\nexport const Card = withZoraThemeScope(CardInner);\n"]}

package/dist/components/card/types.d.ts

@@ -1,7 +1,8 @@
 import type { CardProps as SurfaceCardProps } from '@ankhorage/surface';
 import type React from 'react';
 import type { ZoraCardTone } from '../../internal/recipes';
-export interface CardProps extends Omit<SurfaceCardProps, 'children' | 'p' | 'radius' | 'variant'> {
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+export interface CardProps extends ZoraBaseProps, Omit<SurfaceCardProps, 'children' | 'p' | 'radius' | 'variant'> {
     children?: React.ReactNode;
     title?: React.ReactNode;
     description?: React.ReactNode;

package/dist/components/card/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/card/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACxE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAE3D,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,GAAG,GAAG,QAAQ,GAAG,SAAS,CAAC;IAChG,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/card/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACxE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,SACf,SAAQ,aAAa,EAAE,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,GAAG,GAAG,QAAQ,GAAG,SAAS,CAAC;IACtF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}

package/dist/components/card/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/card/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { CardProps as SurfaceCardProps } from '@ankhorage/surface';\nimport type React from 'react';\n\nimport type { ZoraCardTone } from '../../internal/recipes';\n\nexport interface CardProps extends Omit<SurfaceCardProps, 'children' | 'p' | 'radius' | 'variant'> {\n  children?: React.ReactNode;\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  eyebrow?: React.ReactNode;\n  actions?: React.ReactNode;\n  footer?: React.ReactNode;\n  tone?: ZoraCardTone;\n  compact?: boolean;\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/card/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { CardProps as SurfaceCardProps } from '@ankhorage/surface';\nimport type React from 'react';\n\nimport type { ZoraCardTone } from '../../internal/recipes';\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface CardProps\n  extends ZoraBaseProps, Omit<SurfaceCardProps, 'children' | 'p' | 'radius' | 'variant'> {\n  children?: React.ReactNode;\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  eyebrow?: React.ReactNode;\n  actions?: React.ReactNode;\n  footer?: React.ReactNode;\n  tone?: ZoraCardTone;\n  compact?: boolean;\n}\n"]}

package/dist/components/checkbox/Checkbox.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { CheckboxProps } from './types';
+export declare const Checkbox: (props: CheckboxProps) => React.ReactElement | null;
+//# sourceMappingURL=Checkbox.d.ts.map

package/dist/components/checkbox/Checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAM7C,eAAO,MAAM,QAAQ,qDAAoC,CAAC"}

package/dist/components/checkbox/Checkbox.js

@@ -0,0 +1,8 @@
+import { Checkbox as SurfaceCheckbox } from '@ankhorage/surface';
+import React from 'react';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+function CheckboxInner({ themeId: _themeId, mode: _mode, ...props }) {
+    return <SurfaceCheckbox {...props}/>;
+}
+export const Checkbox = withZoraThemeScope(CheckboxInner);
+//# sourceMappingURL=Checkbox.js.map

package/dist/components/checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,aAAa,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,EAAiB;IAChF,OAAO,CAAC,eAAe,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AACxC,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,kBAAkB,CAAC,aAAa,CAAC,CAAC","sourcesContent":["import { Checkbox as SurfaceCheckbox } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { CheckboxProps } from './types';\n\nfunction CheckboxInner({ themeId: _themeId, mode: _mode, ...props }: CheckboxProps) {\n  return <SurfaceCheckbox {...props} />;\n}\n\nexport const Checkbox = withZoraThemeScope(CheckboxInner);\n"]}

package/dist/components/checkbox/CheckboxGroup.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import type { CheckboxGroupProps } from './types';
-export declare function CheckboxGroup<TValue extends string>({ value, onValueChange, options, orientation, gap, tone, size, invalid, readOnly, disabled, testID, }: CheckboxGroupProps<TValue>): React.JSX.Element;
+export declare const CheckboxGroup: <TValue extends string>(props: CheckboxGroupProps<TValue>) => React.ReactElement | null;
 //# sourceMappingURL=CheckboxGroup.d.ts.map

package/dist/components/checkbox/CheckboxGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/CheckboxGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAuB,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAEvE,wBAAgB,aAAa,CAAC,MAAM,SAAS,MAAM,EAAE,EACnD,KAAK,EACL,aAAa,EACb,OAAO,EACP,WAAwB,EACxB,GAAS,EACT,IAAgB,EAChB,IAAU,EACV,OAAe,EACf,QAAgB,EAChB,QAAgB,EAChB,MAAM,GACP,EAAE,kBAAkB,CAAC,MAAM,CAAC,qBAkC5B"}
+{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/CheckboxGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAuB,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAoDvE,eAAO,MAAM,aAAa,GAlDE,MAAM,SAAS,MAAM,iEAkDkB,CAAC"}

package/dist/components/checkbox/CheckboxGroup.js

@@ -1,8 +1,9 @@
 import { Checkbox, Stack } from '@ankhorage/surface';
 import React from 'react';
 import { View } from 'react-native';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { Text } from '../text';
-export function CheckboxGroup({ value, onValueChange, options, orientation = 'vertical', gap = 's', tone = 'primary', size = 'm', invalid = false, readOnly = false, disabled = false, testID, }) {
+function CheckboxGroupInner({ themeId: _themeId, mode: _mode, value, onValueChange, options, orientation = 'vertical', gap = 's', tone = 'primary', size = 'm', invalid = false, readOnly = false, disabled = false, testID, }) {
     const selectedValues = new Set(value);
     const isHorizontal = orientation === 'horizontal';
     return (<View testID={testID} style={{
@@ -14,6 +15,7 @@ export function CheckboxGroup({ value, onValueChange, options, orientation = 've
       </Stack>
     </View>);
 }
+export const CheckboxGroup = withZoraThemeScope(CheckboxGroupInner);
 function CheckboxGroupItem({ option, checked, disabled, invalid, readOnly, size, tone, value, onValueChange, }) {
     return (<Checkbox checked={checked} disabled={disabled} invalid={invalid} readOnly={readOnly} size={size} tone={tone} testID={option.testID} onCheckedChange={(nextChecked) => {
             const nextValue = nextChecked

package/dist/components/checkbox/CheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.js","sourceRoot":"","sources":["../../../src/components/checkbox/CheckboxGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Checkbox, Stack } from '@ankhorage/surface';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport { Text } from '../text';\nimport type { CheckboxGroupOption, CheckboxGroupProps } from './types';\n\nexport function CheckboxGroup<TValue extends string>({\n  value,\n  onValueChange,\n  options,\n  orientation = 'vertical',\n  gap = 's',\n  tone = 'primary',\n  size = 'm',\n  invalid = false,\n  readOnly = false,\n  disabled = false,\n  testID,\n}: CheckboxGroupProps<TValue>) {\n  const selectedValues = new Set(value);\n  const isHorizontal = orientation === 'horizontal';\n\n  return (\n    <View\n      testID={testID}\n      style={{\n        flexDirection: isHorizontal ? 'row' : 'column',\n        flexWrap: isHorizontal ? 'wrap' : 'nowrap',\n      }}\n    >\n      <Stack\n        direction={isHorizontal ? 'row' : 'column'}\n        gap={gap}\n        wrap={isHorizontal ? 'wrap' : 'nowrap'}\n      >\n        {options.map((option) => (\n          <CheckboxGroupItem\n            key={option.value}\n            option={option}\n            checked={selectedValues.has(option.value)}\n            disabled={disabled || option.disabled === true}\n            invalid={invalid}\n            readOnly={readOnly}\n            size={size}\n            tone={tone}\n            value={value}\n            onValueChange={onValueChange}\n          />\n        ))}\n      </Stack>\n    </View>\n  );\n}\n\nfunction CheckboxGroupItem<TValue extends string>({\n  option,\n  checked,\n  disabled,\n  invalid,\n  readOnly,\n  size,\n  tone,\n  value,\n  onValueChange,\n}: {\n  option: CheckboxGroupOption<TValue>;\n  checked: boolean;\n  disabled: boolean;\n  invalid: boolean;\n  readOnly: boolean;\n  size: NonNullable<CheckboxGroupProps<TValue>['size']>;\n  tone: NonNullable<CheckboxGroupProps<TValue>['tone']>;\n  value: readonly TValue[];\n  onValueChange: (value: TValue[]) => void;\n}) {\n  return (\n    <Checkbox\n      checked={checked}\n      disabled={disabled}\n      invalid={invalid}\n      readOnly={readOnly}\n      size={size}\n      tone={tone}\n      testID={option.testID}\n      onCheckedChange={(nextChecked) => {\n        const nextValue = nextChecked\n          ? [...value, option.value]\n          : value.filter((currentValue) => currentValue !== option.value);\n\n        onValueChange(nextValue);\n      }}\n    >\n      <Stack gap=\"xs\">\n        <Text>{option.label}</Text>\n        {option.description ? (\n          <Text variant=\"caption\" tone=\"muted\">\n            {option.description}\n          </Text>\n        ) : null}\n      </Stack>\n    </Checkbox>\n  );\n}\n"]}
+{"version":3,"file":"CheckboxGroup.js","sourceRoot":"","sources":["../../../src/components/checkbox/CheckboxGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Checkbox, Stack } from '@ankhorage/surface';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { Text } from '../text';\nimport type { CheckboxGroupOption, CheckboxGroupProps } from './types';\n\nfunction CheckboxGroupInner<TValue extends string>({\n  themeId: _themeId,\n  mode: _mode,\n  value,\n  onValueChange,\n  options,\n  orientation = 'vertical',\n  gap = 's',\n  tone = 'primary',\n  size = 'm',\n  invalid = false,\n  readOnly = false,\n  disabled = false,\n  testID,\n}: CheckboxGroupProps<TValue>) {\n  const selectedValues = new Set(value);\n  const isHorizontal = orientation === 'horizontal';\n\n  return (\n    <View\n      testID={testID}\n      style={{\n        flexDirection: isHorizontal ? 'row' : 'column',\n        flexWrap: isHorizontal ? 'wrap' : 'nowrap',\n      }}\n    >\n      <Stack\n        direction={isHorizontal ? 'row' : 'column'}\n        gap={gap}\n        wrap={isHorizontal ? 'wrap' : 'nowrap'}\n      >\n        {options.map((option) => (\n          <CheckboxGroupItem\n            key={option.value}\n            option={option}\n            checked={selectedValues.has(option.value)}\n            disabled={disabled || option.disabled === true}\n            invalid={invalid}\n            readOnly={readOnly}\n            size={size}\n            tone={tone}\n            value={value}\n            onValueChange={onValueChange}\n          />\n        ))}\n      </Stack>\n    </View>\n  );\n}\n\nexport const CheckboxGroup = withZoraThemeScope(CheckboxGroupInner);\n\nfunction CheckboxGroupItem<TValue extends string>({\n  option,\n  checked,\n  disabled,\n  invalid,\n  readOnly,\n  size,\n  tone,\n  value,\n  onValueChange,\n}: {\n  option: CheckboxGroupOption<TValue>;\n  checked: boolean;\n  disabled: boolean;\n  invalid: boolean;\n  readOnly: boolean;\n  size: NonNullable<CheckboxGroupProps<TValue>['size']>;\n  tone: NonNullable<CheckboxGroupProps<TValue>['tone']>;\n  value: readonly TValue[];\n  onValueChange: (value: TValue[]) => void;\n}) {\n  return (\n    <Checkbox\n      checked={checked}\n      disabled={disabled}\n      invalid={invalid}\n      readOnly={readOnly}\n      size={size}\n      tone={tone}\n      testID={option.testID}\n      onCheckedChange={(nextChecked) => {\n        const nextValue = nextChecked\n          ? [...value, option.value]\n          : value.filter((currentValue) => currentValue !== option.value);\n\n        onValueChange(nextValue);\n      }}\n    >\n      <Stack gap=\"xs\">\n        <Text>{option.label}</Text>\n        {option.description ? (\n          <Text variant=\"caption\" tone=\"muted\">\n            {option.description}\n          </Text>\n        ) : null}\n      </Stack>\n    </Checkbox>\n  );\n}\n"]}

package/dist/components/checkbox/index.d.ts

@@ -1,5 +1,4 @@
+export { Checkbox } from './Checkbox';
 export { CheckboxGroup } from './CheckboxGroup';
-export type { CheckboxGroupOption, CheckboxGroupProps } from './types';
-export type { CheckboxProps } from '@ankhorage/surface';
-export { Checkbox } from '@ankhorage/surface';
+export type { CheckboxGroupOption, CheckboxGroupProps, CheckboxProps } from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/checkbox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AACvE,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/checkbox/index.js

@@ -1,3 +1,3 @@
+export { Checkbox } from './Checkbox';
 export { CheckboxGroup } from './CheckboxGroup';
-export { Checkbox } from '@ankhorage/surface';
 //# sourceMappingURL=index.js.map

package/dist/components/checkbox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC","sourcesContent":["export { CheckboxGroup } from './CheckboxGroup';\nexport type { CheckboxGroupOption, CheckboxGroupProps } from './types';\nexport type { CheckboxProps } from '@ankhorage/surface';\nexport { Checkbox } from '@ankhorage/surface';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { Checkbox } from './Checkbox';\nexport { CheckboxGroup } from './CheckboxGroup';\nexport type { CheckboxGroupOption, CheckboxGroupProps, CheckboxProps } from './types';\n"]}

package/dist/components/checkbox/types.d.ts

@@ -1,5 +1,8 @@
-import type { CheckboxProps } from '@ankhorage/surface';
+import type { CheckboxProps as SurfaceCheckboxProps } from '@ankhorage/surface';
 import type React from 'react';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+export interface CheckboxProps extends ZoraBaseProps, Omit<SurfaceCheckboxProps, 'mode' | 'themeId'> {
+}
 export interface CheckboxGroupOption<TValue extends string> {
     value: TValue;
     label: React.ReactNode;
@@ -7,7 +10,7 @@ export interface CheckboxGroupOption<TValue extends string> {
     disabled?: boolean;
     testID?: string;
 }
-export interface CheckboxGroupProps<TValue extends string> extends Pick<CheckboxProps, 'tone' | 'size' | 'invalid' | 'readOnly' | 'disabled' | 'testID'> {
+export interface CheckboxGroupProps<TValue extends string> extends ZoraBaseProps, Pick<Omit<SurfaceCheckboxProps, 'mode' | 'themeId'>, 'tone' | 'size' | 'invalid' | 'readOnly' | 'disabled'> {
     value: readonly TValue[];
     onValueChange: (value: TValue[]) => void;
     options: readonly CheckboxGroupOption<TValue>[];

package/dist/components/checkbox/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,mBAAmB,CAAC,MAAM,SAAS,MAAM;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,kBAAkB,CAAC,MAAM,SAAS,MAAM,CAAE,SAAQ,IAAI,CACrE,aAAa,EACb,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,QAAQ,CACjE;IACC,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IACzB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACzC,OAAO,EAAE,SAAS,mBAAmB,CAAC,MAAM,CAAC,EAAE,CAAC;IAChD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,GAAG,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CAC9B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,IAAI,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAChF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,aACf,SAAQ,aAAa,EAAE,IAAI,CAAC,oBAAoB,EAAE,MAAM,GAAG,SAAS,CAAC;CAAG;AAE1E,MAAM,WAAW,mBAAmB,CAAC,MAAM,SAAS,MAAM;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,kBAAkB,CAAC,MAAM,SAAS,MAAM,CACvD,SACE,aAAa,EACb,IAAI,CACF,IAAI,CAAC,oBAAoB,EAAE,MAAM,GAAG,SAAS,CAAC,EAC9C,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CACtD;IACH,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IACzB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACzC,OAAO,EAAE,SAAS,mBAAmB,CAAC,MAAM,CAAC,EAAE,CAAC;IAChD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,GAAG,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CAC9B"}

package/dist/components/checkbox/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/checkbox/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { CheckboxProps } from '@ankhorage/surface';\nimport type React from 'react';\n\nexport interface CheckboxGroupOption<TValue extends string> {\n  value: TValue;\n  label: React.ReactNode;\n  description?: React.ReactNode;\n  disabled?: boolean;\n  testID?: string;\n}\n\nexport interface CheckboxGroupProps<TValue extends string> extends Pick<\n  CheckboxProps,\n  'tone' | 'size' | 'invalid' | 'readOnly' | 'disabled' | 'testID'\n> {\n  value: readonly TValue[];\n  onValueChange: (value: TValue[]) => void;\n  options: readonly CheckboxGroupOption<TValue>[];\n  orientation?: 'horizontal' | 'vertical';\n  gap?: 'xs' | 's' | 'm' | 'l';\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/checkbox/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { CheckboxProps as SurfaceCheckboxProps } from '@ankhorage/surface';\nimport type React from 'react';\n\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface CheckboxProps\n  extends ZoraBaseProps, Omit<SurfaceCheckboxProps, 'mode' | 'themeId'> {}\n\nexport interface CheckboxGroupOption<TValue extends string> {\n  value: TValue;\n  label: React.ReactNode;\n  description?: React.ReactNode;\n  disabled?: boolean;\n  testID?: string;\n}\n\nexport interface CheckboxGroupProps<TValue extends string>\n  extends\n    ZoraBaseProps,\n    Pick<\n      Omit<SurfaceCheckboxProps, 'mode' | 'themeId'>,\n      'tone' | 'size' | 'invalid' | 'readOnly' | 'disabled'\n    > {\n  value: readonly TValue[];\n  onValueChange: (value: TValue[]) => void;\n  options: readonly CheckboxGroupOption<TValue>[];\n  orientation?: 'horizontal' | 'vertical';\n  gap?: 'xs' | 's' | 'm' | 'l';\n}\n"]}

package/dist/components/drawer/Drawer.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import type { DrawerProps } from './types';
-export declare function Drawer({ children, title, description, footer, onDismiss, ...props }: DrawerProps): React.JSX.Element;
+export declare const Drawer: (props: DrawerProps) => React.ReactElement | null;
 //# sourceMappingURL=Drawer.d.ts.map

package/dist/components/drawer/Drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/Drawer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAI9D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAc3C,wBAAgB,MAAM,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,qBAsBhG"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/Drawer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAK9D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AA+C3C,eAAO,MAAM,MAAM,mDAAkC,CAAC"}

package/dist/components/drawer/Drawer.js

@@ -1,5 +1,6 @@
 import { Box, Drawer as SurfaceDrawer, Stack } from '@ankhorage/surface';
 import React, { useCallback, useEffect, useRef } from 'react';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { Heading } from '../heading';
 import { Text } from '../text';
 function useStableCallback(callback) {
@@ -11,7 +12,7 @@ function useStableCallback(callback) {
         callbackRef.current?.();
     }, []);
 }
-export function Drawer({ children, title, description, footer, onDismiss, ...props }) {
+function DrawerInner({ themeId: _themeId, mode: _mode, children, title, description, footer, onDismiss, ...props }) {
     const hasHeader = title != null || description != null;
     const stableOnDismiss = useStableCallback(onDismiss);
     return (<SurfaceDrawer {...props} onDismiss={stableOnDismiss}>
@@ -27,4 +28,5 @@ export function Drawer({ children, title, description, footer, onDismiss, ...pro
       </Stack>
     </SurfaceDrawer>);
 }
+export const Drawer = withZoraThemeScope(DrawerInner);
 //# sourceMappingURL=Drawer.js.map

package/dist/components/drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,IAAI,aAAa,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AACzE,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAG/B,SAAS,iBAAiB,CAAC,QAAkC;IAC3D,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IAErC,SAAS,CAAC,GAAG,EAAE;QACb,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;IACjC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,WAAW,CAAC,GAAG,EAAE;QACtB,WAAW,CAAC,OAAO,EAAE,EAAE,CAAC;IAC1B,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC;AAED,MAAM,UAAU,MAAM,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAe;IAC/F,MAAM,SAAS,GAAG,KAAK,IAAI,IAAI,IAAI,WAAW,IAAI,IAAI,CAAC;IACvD,MAAM,eAAe,GAAG,iBAAiB,CAAC,SAAS,CAAC,CAAC;IAErD,OAAO,CACL,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,CAAC,SAAS,CAAC,CAAC,eAAe,CAAC,CACnD;MAAA,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CACZ;QAAA,CAAC,SAAS,CAAC,CAAC,CAAC,CACX,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CACb;YAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CACpD;YAAA,CAAC,WAAW,CAAC,CAAC,CAAC,CACb,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,CACpC;gBAAA,CAAC,WAAW,CACd;cAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,IAAI,CACV;UAAA,EAAE,KAAK,CAAC,CACT,CAAC,CAAC,CAAC,IAAI,CACR;QAAA,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CACjD;QAAA,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAC9C;MAAA,EAAE,KAAK,CACT;IAAA,EAAE,aAAa,CAAC,CACjB,CAAC;AACJ,CAAC","sourcesContent":["import { Box, Drawer as SurfaceDrawer, Stack } from '@ankhorage/surface';\nimport React, { useCallback, useEffect, useRef } from 'react';\n\nimport { Heading } from '../heading';\nimport { Text } from '../text';\nimport type { DrawerProps } from './types';\n\nfunction useStableCallback(callback: (() => void) | undefined): (() => void) | undefined {\n  const callbackRef = useRef(callback);\n\n  useEffect(() => {\n    callbackRef.current = callback;\n  }, [callback]);\n\n  return useCallback(() => {\n    callbackRef.current?.();\n  }, []);\n}\n\nexport function Drawer({ children, title, description, footer, onDismiss, ...props }: DrawerProps) {\n  const hasHeader = title != null || description != null;\n  const stableOnDismiss = useStableCallback(onDismiss);\n\n  return (\n    <SurfaceDrawer {...props} onDismiss={stableOnDismiss}>\n      <Stack gap=\"m\">\n        {hasHeader ? (\n          <Stack gap=\"xs\">\n            {title ? <Heading level={3}>{title}</Heading> : null}\n            {description ? (\n              <Text tone=\"muted\" variant=\"bodySmall\">\n                {description}\n              </Text>\n            ) : null}\n          </Stack>\n        ) : null}\n        {children ? <Box flex={1}>{children}</Box> : null}\n        {footer ? <Box pt=\"xs\">{footer}</Box> : null}\n      </Stack>\n    </SurfaceDrawer>\n  );\n}\n"]}
+{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,IAAI,aAAa,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AACzE,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAG/B,SAAS,iBAAiB,CAAC,QAAkC;IAC3D,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IAErC,SAAS,CAAC,GAAG,EAAE;QACb,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;IACjC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,WAAW,CAAC,GAAG,EAAE;QACtB,WAAW,CAAC,OAAO,EAAE,EAAE,CAAC;IAC1B,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC;AAED,SAAS,WAAW,CAAC,EACnB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,QAAQ,EACR,KAAK,EACL,WAAW,EACX,MAAM,EACN,SAAS,EACT,GAAG,KAAK,EACI;IACZ,MAAM,SAAS,GAAG,KAAK,IAAI,IAAI,IAAI,WAAW,IAAI,IAAI,CAAC;IACvD,MAAM,eAAe,GAAG,iBAAiB,CAAC,SAAS,CAAC,CAAC;IAErD,OAAO,CACL,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,CAAC,SAAS,CAAC,CAAC,eAAe,CAAC,CACnD;MAAA,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CACZ;QAAA,CAAC,SAAS,CAAC,CAAC,CAAC,CACX,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CACb;YAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CACpD;YAAA,CAAC,WAAW,CAAC,CAAC,CAAC,CACb,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,CACpC;gBAAA,CAAC,WAAW,CACd;cAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,IAAI,CACV;UAAA,EAAE,KAAK,CAAC,CACT,CAAC,CAAC,CAAC,IAAI,CACR;QAAA,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CACjD;QAAA,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAC9C;MAAA,EAAE,KAAK,CACT;IAAA,EAAE,aAAa,CAAC,CACjB,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,MAAM,GAAG,kBAAkB,CAAC,WAAW,CAAC,CAAC","sourcesContent":["import { Box, Drawer as SurfaceDrawer, Stack } from '@ankhorage/surface';\nimport React, { useCallback, useEffect, useRef } from 'react';\n\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { Heading } from '../heading';\nimport { Text } from '../text';\nimport type { DrawerProps } from './types';\n\nfunction useStableCallback(callback: (() => void) | undefined): (() => void) | undefined {\n  const callbackRef = useRef(callback);\n\n  useEffect(() => {\n    callbackRef.current = callback;\n  }, [callback]);\n\n  return useCallback(() => {\n    callbackRef.current?.();\n  }, []);\n}\n\nfunction DrawerInner({\n  themeId: _themeId,\n  mode: _mode,\n  children,\n  title,\n  description,\n  footer,\n  onDismiss,\n  ...props\n}: DrawerProps) {\n  const hasHeader = title != null || description != null;\n  const stableOnDismiss = useStableCallback(onDismiss);\n\n  return (\n    <SurfaceDrawer {...props} onDismiss={stableOnDismiss}>\n      <Stack gap=\"m\">\n        {hasHeader ? (\n          <Stack gap=\"xs\">\n            {title ? <Heading level={3}>{title}</Heading> : null}\n            {description ? (\n              <Text tone=\"muted\" variant=\"bodySmall\">\n                {description}\n              </Text>\n            ) : null}\n          </Stack>\n        ) : null}\n        {children ? <Box flex={1}>{children}</Box> : null}\n        {footer ? <Box pt=\"xs\">{footer}</Box> : null}\n      </Stack>\n    </SurfaceDrawer>\n  );\n}\n\nexport const Drawer = withZoraThemeScope(DrawerInner);\n"]}