diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md
index e725d0ac8b..fc1f773b4b 100644
--- a/packages/canon/report.api.md
+++ b/packages/canon/report.api.md
@@ -5,9 +5,11 @@
```ts
///
+import type { CSSProperties } from 'react';
import { ForwardRefExoticComponent } from 'react';
import { default as React_2 } from 'react';
import * as React_3 from 'react';
+import { ReactNode } from 'react';
import { RefAttributes } from 'react';
// @public (undocumented)
@@ -84,6 +86,8 @@ export interface ButtonProps {
// (undocumented)
size?: 'small' | 'medium' | Partial>;
// (undocumented)
+ style?: React.CSSProperties;
+ // (undocumented)
variant?:
| 'primary'
| 'secondary'
@@ -91,6 +95,29 @@ export interface ButtonProps {
| Partial>;
}
+// @public (undocumented)
+export interface CanonContextProps {
+ // (undocumented)
+ breakpoint: Breakpoint;
+ // (undocumented)
+ getResponsiveValue: (
+ value: string | Partial>,
+ ) => string;
+ // (undocumented)
+ icons: IconMap;
+}
+
+// @public (undocumented)
+export const CanonProvider: (props: CanonProviderProps) => React_2.JSX.Element;
+
+// @public (undocumented)
+export interface CanonProviderProps {
+ // (undocumented)
+ children?: ReactNode;
+ // (undocumented)
+ overrides?: Partial>;
+}
+
// @public (undocumented)
export const Checkbox: React_2.ForwardRefExoticComponent<
CheckboxProps & React_2.RefAttributes
@@ -200,6 +227,33 @@ export interface GridProps extends SpaceProps {
style?: React.CSSProperties;
}
+// @public (undocumented)
+export const Heading: React_2.ForwardRefExoticComponent<
+ HeadingProps & React_2.RefAttributes
+>;
+
+// @public (undocumented)
+export interface HeadingProps {
+ // (undocumented)
+ as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+ // (undocumented)
+ children: React.ReactNode;
+ // (undocumented)
+ variant?:
+ | 'display'
+ | 'title1'
+ | 'title2'
+ | 'title3'
+ | 'title4'
+ | 'title5'
+ | Partial<
+ Record<
+ Breakpoint,
+ 'display' | 'title1' | 'title2' | 'title3' | 'title4' | 'title5'
+ >
+ >;
+}
+
// @public (undocumented)
export const Icon: (props: IconProps) => React_2.JSX.Element;
@@ -222,8 +276,11 @@ export type IconNames =
| 'chevronRight'
| 'chevronUp'
| 'cloud'
+ | 'externalLink'
| 'heart'
+ | 'moon'
| 'plus'
+ | 'sun'
| 'trash';
// @public (undocumented)
@@ -232,6 +289,9 @@ export type IconProps = {
size?: number;
};
+// @public (undocumented)
+export const icons: IconMap;
+
// @public (undocumented)
export const Inline: ForwardRefExoticComponent<
InlineProps & RefAttributes
@@ -374,6 +434,32 @@ export const TableRow: React_3.ForwardRefExoticComponent<
React_3.RefAttributes
>;
+// @public (undocumented)
+const Text_2: React_2.ForwardRefExoticComponent<
+ TextProps & React_2.RefAttributes
+>;
+export { Text_2 as Text };
+
+// @public (undocumented)
+export interface TextProps {
+ // (undocumented)
+ children: ReactNode;
+ // (undocumented)
+ style?: CSSProperties;
+ // (undocumented)
+ variant?:
+ | 'subtitle'
+ | 'body'
+ | 'caption'
+ | 'label'
+ | Partial>;
+ // (undocumented)
+ weight?: 'regular' | 'bold' | Partial>;
+}
+
+// @public (undocumented)
+export const useCanon: () => CanonContextProps;
+
// @public (undocumented)
export interface UtilityProps extends SpaceProps {
// (undocumented)
diff --git a/packages/canon/src/components/Button/Docs.mdx b/packages/canon/src/components/Button/Docs.mdx
index e4b069cbcd..ae90b5fd80 100644
--- a/packages/canon/src/components/Button/Docs.mdx
+++ b/packages/canon/src/components/Button/Docs.mdx
@@ -10,7 +10,7 @@ import { PropsTable } from '../../../docs/components/PropsTable/PropsTable';
Button
A button component that can be used to trigger actions.
-
+
Usage
Checkbox
A checkbox component that can be used to trigger actions.
-
+
Usage
@@ -12,7 +12,7 @@ import { defaultIcons } from './icons';
Icons are used to represent an action or a state.
-
+
Usage
({
- icons: defaultIcons,
+ icons,
breakpoint: 'md',
getResponsiveValue: () => '',
});
-interface CanonProviderProps {
+/** @public */
+export interface CanonProviderProps {
children?: ReactNode;
overrides?: Partial>;
}
@@ -44,7 +46,7 @@ export const CanonProvider = (props: CanonProviderProps) => {
const { children, overrides } = props;
// Merge provided overrides with default icons
- const combinedIcons = { ...defaultIcons, ...overrides };
+ const combinedIcons = { ...icons, ...overrides };
const isBreakpointSm = useMediaQuery(`(min-width: 640px)`);
const isBreakpointMd = useMediaQuery(`(min-width: 768px)`);
diff --git a/packages/canon/src/index.ts b/packages/canon/src/index.ts
index 23432295e2..f6cca4bed6 100644
--- a/packages/canon/src/index.ts
+++ b/packages/canon/src/index.ts
@@ -20,12 +20,17 @@
* @packageDocumentation
*/
+// Providers
+export * from './contexts/canon';
+
// Layout components
export * from './components/Box';
export * from './components/Grid';
export * from './components/Stack';
export * from './components/Inline';
export * from './components/Container';
+export * from './components/Text';
+export * from './components/Heading';
// UI components
export * from './components/Button';