@dataimago/ui 0.1.0-alpha.1 → 0.1.0-alpha.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +18 -1
  2. package/dist/index.cjs +326 -10
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +186 -3
  5. package/dist/index.d.ts +186 -3
  6. package/dist/index.js +326 -9
  7. package/dist/index.js.map +1 -1
  8. package/package.json +21 -7
package/dist/index.d.cts CHANGED
@@ -1,4 +1,6 @@
1
1
  import * as React from 'react';
2
+ import * as react_jsx_runtime from 'react/jsx-runtime';
3
+ import { LogoId, LogoVariant, AnimationId, NavbarLogoId } from '@dataimago/brand';
2
4
 
3
5
  type ButtonVariant = 'primary' | 'secondary' | 'ghost';
4
6
  type ButtonSize = 'sm' | 'md' | 'lg';
@@ -9,10 +11,191 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
9
11
  /**
10
12
  * Smoke-level `<Button>` for the alpha release of @dataimago/ui.
11
13
  *
12
- * Styling is delegated to the CSS classes `.btn`, `.btn-<variant>`, `.btn-<size>`
13
- * published by @dataimago/css so that the component stays small and theme-aware.
14
+ * Styling is delegated to semantic CSS variables published by @dataimago/css
15
+ * so that the component stays small and theme-aware.
14
16
  * Consumers that want to override visuals can pass their own className.
15
17
  */
16
18
  declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
17
19
 
18
- export { Button, type ButtonProps, type ButtonSize, type ButtonVariant };
20
+ /**
21
+ * <LogoMonogram /> — the dataimago 'a + i' superimposed monogram, transparent
22
+ * background. Glyphs are outlined paths (no font dependency at render time);
23
+ * fill defaults to `currentColor` so the mark inherits from the surrounding
24
+ * text color and respects light/dark theme switches automatically.
25
+ *
26
+ * Symbolism: 'a' (data, agency) superimposed with 'i' (imago, AI) — the
27
+ * fusion is the brand's central idea. See wiki/principles/visual-identity.md
28
+ * (Stage L follow-up) for the full brand-mark rationale.
29
+ *
30
+ * Source artwork: outlined-path SVG from
31
+ * FOUNDATIONS/background/04_dataimago_Content/Design_Assets/logos/
32
+ * ai_monogram_supreme_1_PATH.svg
33
+ *
34
+ * Usage:
35
+ * <LogoMonogram size={48} aria-label="dataimago" />
36
+ * <span style={{ color: 'var(--color-interactive-primary)' }}>
37
+ * <LogoMonogram size={32} />
38
+ * </span>
39
+ */
40
+ interface LogoMonogramProps extends React.SVGAttributes<SVGSVGElement> {
41
+ /** Render size in px (or any CSS length). Default: 24. Width and height match. */
42
+ size?: number | string;
43
+ /**
44
+ * Accessible name announced by screen readers. Set to `undefined` (or pass
45
+ * `aria-hidden` directly) when the mark is purely decorative.
46
+ */
47
+ title?: string;
48
+ }
49
+ declare function LogoMonogram({ size, title, ...rest }: LogoMonogramProps): react_jsx_runtime.JSX.Element;
50
+
51
+ /**
52
+ * <LogoMonogramBg /> — the dataimago 'a + i' monogram with a rounded accent
53
+ * backplate. White letters on the brand-accent role
54
+ * (var(--color-interactive-accent), iteration-2 sky-blue).
55
+ *
56
+ * Use this variant on neutral surfaces where the no-background monogram
57
+ * would lack presence — favicons, app icons, social-media avatars, or any
58
+ * branded chrome where the mark should read as a self-contained badge.
59
+ *
60
+ * Source artwork: outlined-path SVG from
61
+ * FOUNDATIONS/background/04_dataimago_Content/Design_Assets/logos/
62
+ * ai_monogram_supreme_bg_1_PATH.svg
63
+ *
64
+ * Theming: the background uses var(--color-interactive-accent), which
65
+ * resolves via theme-colors.json's mode-aware role mapping — accent-500
66
+ * (#1f618d) on light surfaces, accent-300 (#3498DB) on dark. The letter
67
+ * fill is hard-set to white; both accent stops have AA-or-better contrast
68
+ * with white letters (light-mode 6.66:1 AA, dark-mode 3.15:1 AA-large for
69
+ * the dot-and-stem heading-size letters used in the monogram). The
70
+ * literal-fallback in this component is light-mode (#1f618d, sky-blue
71
+ * iteration-2) for rare non-CSS-aware contexts. Iteration-1's copper-red
72
+ * fallback (#b54a27) was retired in iteration-2-B.2; see
73
+ * wiki/decisions/iteration-2-blue-accent.md for the rationale.
74
+ *
75
+ * Usage:
76
+ * <LogoMonogramBg size={64} aria-label="dataimago" />
77
+ */
78
+ interface LogoMonogramBgProps extends React.SVGAttributes<SVGSVGElement> {
79
+ /** Render size in px. Default: 32 (favicon-sized). Width and height match. */
80
+ size?: number | string;
81
+ /** Accessible name. Set undefined or pass aria-hidden for decorative use. */
82
+ title?: string;
83
+ }
84
+ declare function LogoMonogramBg({ size, title, ...rest }: LogoMonogramBgProps): react_jsx_runtime.JSX.Element;
85
+
86
+ /**
87
+ * <LogoWordmark /> — the full "dataimago" wordmark with the 'ai' overlap.
88
+ * White letters on a rounded accent backplate, themed via
89
+ * var(--color-interactive-accent).
90
+ *
91
+ * Use this variant for primary brand surfaces: site headers, document
92
+ * letterheads, large-format presentations, business materials. For compact
93
+ * contexts (favicons, social avatars) use <LogoMonogramBg /> instead; for
94
+ * inline use within prose use <LogoMonogram /> with currentColor.
95
+ *
96
+ * The wordmark preserves the philosophical idea of the brand: the visible
97
+ * superposition of 'a' (data, human agency) and 'i' (imago, AI) creates a new
98
+ * unified glyph that is neither pure human nor pure artificial — genuine
99
+ * collaboration. See wiki/principles/visual-identity.md (Stage L follow-up).
100
+ *
101
+ * Source artwork: outlined-path SVG from
102
+ * FOUNDATIONS/background/04_dataimago_Content/Design_Assets/logos/
103
+ * dataimago_supreme_1_PATH.svg
104
+ *
105
+ * Theming: the backplate uses var(--color-interactive-accent), which resolves
106
+ * via theme-colors.json's mode-aware role mapping — accent-500 (#1f618d) on
107
+ * light surfaces, accent-300 (#3498DB) on dark. The literal-fallback in this
108
+ * component is light-mode (#1f618d, sky-blue iteration-2) for the rare cases
109
+ * where the SVG is consumed without CSS-variable resolution (printed PDFs from
110
+ * raw SVG, third-party platforms that strip CSS). Iteration-1's copper-red
111
+ * fallback (#b54a27) was retired in iteration-2-B.2; see
112
+ * wiki/decisions/iteration-2-blue-accent.md for the rationale.
113
+ *
114
+ * Usage:
115
+ * <LogoWordmark width={240} aria-label="dataimago" />
116
+ *
117
+ * The wordmark's natural aspect ratio is 480x150 (~3.2:1). Pass `width` and
118
+ * height auto-scales, or pass both explicitly.
119
+ */
120
+ interface LogoWordmarkProps extends React.SVGAttributes<SVGSVGElement> {
121
+ /** Width in px. Default: 240. Height auto-scales to the 480:150 ratio. */
122
+ width?: number | string;
123
+ /** Accessible name. Set undefined or pass aria-hidden for decorative use. */
124
+ title?: string;
125
+ }
126
+ declare function LogoWordmark({ width, title, ...rest }: LogoWordmarkProps): react_jsx_runtime.JSX.Element;
127
+
128
+ interface LogoProps extends React.HTMLAttributes<HTMLSpanElement> {
129
+ /** Mark id, e.g. `dissertation_ai_OVERLAP`. */
130
+ name: LogoId;
131
+ /** PATH (default), CUTOUT, BG, or LETTERS. See @dataimago/brand. */
132
+ variant?: LogoVariant;
133
+ /**
134
+ * Render width (px number or any CSS length). Height scales proportionally
135
+ * via the SVG viewBox. Omit to use the mark's intrinsic size.
136
+ */
137
+ width?: number | string;
138
+ }
139
+ /**
140
+ * Manifest-driven brand mark from `@dataimago/brand`. Inlines the SVG string so
141
+ * `currentColor` (PATH/LETTERS), the `--color-interactive-accent` badge fill
142
+ * (CUTOUT/BG), and the per-letter interaction classes (`.glyph`, `.logo-*`) all
143
+ * work — an `<img src>` can't receive those interior styles.
144
+ *
145
+ * Color flows from CSS: set `color` (PATH/LETTERS) on this element or an
146
+ * ancestor. Size via `width` (or CSS on the wrapper).
147
+ */
148
+ declare function Logo({ name, variant, width, style, ...rest }: LogoProps): react_jsx_runtime.JSX.Element | null;
149
+
150
+ interface BrandAnimationProps extends React.HTMLAttributes<HTMLSpanElement> {
151
+ /** Animation id, e.g. `dissertation-ai`. See @dataimago/brand animations.json. */
152
+ name: AnimationId;
153
+ /**
154
+ * Render width (px number or any CSS length). Height scales via the SVG
155
+ * viewBox. Omit to use the animation's intrinsic size.
156
+ */
157
+ width?: number | string;
158
+ }
159
+ /**
160
+ * Decorative brand animation from `@dataimago/brand` (the animation-foundry).
161
+ * Inlines the pure-SMIL SVG string so its interior `<style>` works — an
162
+ * `<img src>` can't receive those styles (same rationale as `<Logo>`).
163
+ *
164
+ * Motion-dignity: decorative brand animation is a distinct category from the
165
+ * 300ms UI-transition ceiling, but it is contractually gated on
166
+ * `prefers-reduced-motion`. When the user prefers reduced motion this renders
167
+ * the static brand mark the animation settles to (its `poster`) via `<Logo>`,
168
+ * so no consumer can ship the motion without the fallback.
169
+ */
170
+ declare function BrandAnimation({ name, width, style, ...rest }: BrandAnimationProps): react_jsx_runtime.JSX.Element | null;
171
+
172
+ interface NavbarLogoProps extends React.HTMLAttributes<HTMLSpanElement> {
173
+ /** Navbar mark id, e.g. `dissertation-ai`. See @dataimago/brand navbar.json. */
174
+ name: NavbarLogoId;
175
+ /**
176
+ * Render width (px number or any CSS length). Height scales via the SVG
177
+ * viewBox. Omit to use the mark's intrinsic size.
178
+ */
179
+ width?: number | string;
180
+ }
181
+ /**
182
+ * Animated brand mark for an app navbar, from `@dataimago/brand` (the
183
+ * animation-foundry's navbar set). Inlines the self-contained CSS-animated SVG
184
+ * so its interior `<style>` works — an `<img src>` can't receive those styles.
185
+ *
186
+ * Behaviour by mark kind (from the navbar manifest):
187
+ * - `assemble` (L2: dissertation-ai, rpkg-ai, SGPc-ai): the trailing `a`/`i`
188
+ * start apart and the `i` slides onto the `a`. Plays once on mount; replays
189
+ * on pointer-enter via a remount (`replayKey`).
190
+ * - `shimmer` (L1: dataimago-ai): the monogram is always superimposed; an
191
+ * accent shimmer sweeps on `:hover` from the SVG's own CSS (no JS trigger).
192
+ *
193
+ * Motion-dignity: the embedded CSS animation is <= 300ms and gated on
194
+ * `@media (prefers-reduced-motion: no-preference)`. When the user prefers
195
+ * reduced motion this renders the static settled mark (the manifest `poster`,
196
+ * the superimposed monogram) via `<Logo>` — so no consumer can ship the motion
197
+ * without the fallback.
198
+ */
199
+ declare function NavbarLogo({ name, width, style, ...rest }: NavbarLogoProps): react_jsx_runtime.JSX.Element | null;
200
+
201
+ export { BrandAnimation, type BrandAnimationProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Logo, LogoMonogram, LogoMonogramBg, type LogoMonogramBgProps, type LogoMonogramProps, type LogoProps, LogoWordmark, type LogoWordmarkProps, NavbarLogo, type NavbarLogoProps };
package/dist/index.d.ts CHANGED
@@ -1,4 +1,6 @@
1
1
  import * as React from 'react';
2
+ import * as react_jsx_runtime from 'react/jsx-runtime';
3
+ import { LogoId, LogoVariant, AnimationId, NavbarLogoId } from '@dataimago/brand';
2
4
 
3
5
  type ButtonVariant = 'primary' | 'secondary' | 'ghost';
4
6
  type ButtonSize = 'sm' | 'md' | 'lg';
@@ -9,10 +11,191 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
9
11
  /**
10
12
  * Smoke-level `<Button>` for the alpha release of @dataimago/ui.
11
13
  *
12
- * Styling is delegated to the CSS classes `.btn`, `.btn-<variant>`, `.btn-<size>`
13
- * published by @dataimago/css so that the component stays small and theme-aware.
14
+ * Styling is delegated to semantic CSS variables published by @dataimago/css
15
+ * so that the component stays small and theme-aware.
14
16
  * Consumers that want to override visuals can pass their own className.
15
17
  */
16
18
  declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
17
19
 
18
- export { Button, type ButtonProps, type ButtonSize, type ButtonVariant };
20
+ /**
21
+ * <LogoMonogram /> — the dataimago 'a + i' superimposed monogram, transparent
22
+ * background. Glyphs are outlined paths (no font dependency at render time);
23
+ * fill defaults to `currentColor` so the mark inherits from the surrounding
24
+ * text color and respects light/dark theme switches automatically.
25
+ *
26
+ * Symbolism: 'a' (data, agency) superimposed with 'i' (imago, AI) — the
27
+ * fusion is the brand's central idea. See wiki/principles/visual-identity.md
28
+ * (Stage L follow-up) for the full brand-mark rationale.
29
+ *
30
+ * Source artwork: outlined-path SVG from
31
+ * FOUNDATIONS/background/04_dataimago_Content/Design_Assets/logos/
32
+ * ai_monogram_supreme_1_PATH.svg
33
+ *
34
+ * Usage:
35
+ * <LogoMonogram size={48} aria-label="dataimago" />
36
+ * <span style={{ color: 'var(--color-interactive-primary)' }}>
37
+ * <LogoMonogram size={32} />
38
+ * </span>
39
+ */
40
+ interface LogoMonogramProps extends React.SVGAttributes<SVGSVGElement> {
41
+ /** Render size in px (or any CSS length). Default: 24. Width and height match. */
42
+ size?: number | string;
43
+ /**
44
+ * Accessible name announced by screen readers. Set to `undefined` (or pass
45
+ * `aria-hidden` directly) when the mark is purely decorative.
46
+ */
47
+ title?: string;
48
+ }
49
+ declare function LogoMonogram({ size, title, ...rest }: LogoMonogramProps): react_jsx_runtime.JSX.Element;
50
+
51
+ /**
52
+ * <LogoMonogramBg /> — the dataimago 'a + i' monogram with a rounded accent
53
+ * backplate. White letters on the brand-accent role
54
+ * (var(--color-interactive-accent), iteration-2 sky-blue).
55
+ *
56
+ * Use this variant on neutral surfaces where the no-background monogram
57
+ * would lack presence — favicons, app icons, social-media avatars, or any
58
+ * branded chrome where the mark should read as a self-contained badge.
59
+ *
60
+ * Source artwork: outlined-path SVG from
61
+ * FOUNDATIONS/background/04_dataimago_Content/Design_Assets/logos/
62
+ * ai_monogram_supreme_bg_1_PATH.svg
63
+ *
64
+ * Theming: the background uses var(--color-interactive-accent), which
65
+ * resolves via theme-colors.json's mode-aware role mapping — accent-500
66
+ * (#1f618d) on light surfaces, accent-300 (#3498DB) on dark. The letter
67
+ * fill is hard-set to white; both accent stops have AA-or-better contrast
68
+ * with white letters (light-mode 6.66:1 AA, dark-mode 3.15:1 AA-large for
69
+ * the dot-and-stem heading-size letters used in the monogram). The
70
+ * literal-fallback in this component is light-mode (#1f618d, sky-blue
71
+ * iteration-2) for rare non-CSS-aware contexts. Iteration-1's copper-red
72
+ * fallback (#b54a27) was retired in iteration-2-B.2; see
73
+ * wiki/decisions/iteration-2-blue-accent.md for the rationale.
74
+ *
75
+ * Usage:
76
+ * <LogoMonogramBg size={64} aria-label="dataimago" />
77
+ */
78
+ interface LogoMonogramBgProps extends React.SVGAttributes<SVGSVGElement> {
79
+ /** Render size in px. Default: 32 (favicon-sized). Width and height match. */
80
+ size?: number | string;
81
+ /** Accessible name. Set undefined or pass aria-hidden for decorative use. */
82
+ title?: string;
83
+ }
84
+ declare function LogoMonogramBg({ size, title, ...rest }: LogoMonogramBgProps): react_jsx_runtime.JSX.Element;
85
+
86
+ /**
87
+ * <LogoWordmark /> — the full "dataimago" wordmark with the 'ai' overlap.
88
+ * White letters on a rounded accent backplate, themed via
89
+ * var(--color-interactive-accent).
90
+ *
91
+ * Use this variant for primary brand surfaces: site headers, document
92
+ * letterheads, large-format presentations, business materials. For compact
93
+ * contexts (favicons, social avatars) use <LogoMonogramBg /> instead; for
94
+ * inline use within prose use <LogoMonogram /> with currentColor.
95
+ *
96
+ * The wordmark preserves the philosophical idea of the brand: the visible
97
+ * superposition of 'a' (data, human agency) and 'i' (imago, AI) creates a new
98
+ * unified glyph that is neither pure human nor pure artificial — genuine
99
+ * collaboration. See wiki/principles/visual-identity.md (Stage L follow-up).
100
+ *
101
+ * Source artwork: outlined-path SVG from
102
+ * FOUNDATIONS/background/04_dataimago_Content/Design_Assets/logos/
103
+ * dataimago_supreme_1_PATH.svg
104
+ *
105
+ * Theming: the backplate uses var(--color-interactive-accent), which resolves
106
+ * via theme-colors.json's mode-aware role mapping — accent-500 (#1f618d) on
107
+ * light surfaces, accent-300 (#3498DB) on dark. The literal-fallback in this
108
+ * component is light-mode (#1f618d, sky-blue iteration-2) for the rare cases
109
+ * where the SVG is consumed without CSS-variable resolution (printed PDFs from
110
+ * raw SVG, third-party platforms that strip CSS). Iteration-1's copper-red
111
+ * fallback (#b54a27) was retired in iteration-2-B.2; see
112
+ * wiki/decisions/iteration-2-blue-accent.md for the rationale.
113
+ *
114
+ * Usage:
115
+ * <LogoWordmark width={240} aria-label="dataimago" />
116
+ *
117
+ * The wordmark's natural aspect ratio is 480x150 (~3.2:1). Pass `width` and
118
+ * height auto-scales, or pass both explicitly.
119
+ */
120
+ interface LogoWordmarkProps extends React.SVGAttributes<SVGSVGElement> {
121
+ /** Width in px. Default: 240. Height auto-scales to the 480:150 ratio. */
122
+ width?: number | string;
123
+ /** Accessible name. Set undefined or pass aria-hidden for decorative use. */
124
+ title?: string;
125
+ }
126
+ declare function LogoWordmark({ width, title, ...rest }: LogoWordmarkProps): react_jsx_runtime.JSX.Element;
127
+
128
+ interface LogoProps extends React.HTMLAttributes<HTMLSpanElement> {
129
+ /** Mark id, e.g. `dissertation_ai_OVERLAP`. */
130
+ name: LogoId;
131
+ /** PATH (default), CUTOUT, BG, or LETTERS. See @dataimago/brand. */
132
+ variant?: LogoVariant;
133
+ /**
134
+ * Render width (px number or any CSS length). Height scales proportionally
135
+ * via the SVG viewBox. Omit to use the mark's intrinsic size.
136
+ */
137
+ width?: number | string;
138
+ }
139
+ /**
140
+ * Manifest-driven brand mark from `@dataimago/brand`. Inlines the SVG string so
141
+ * `currentColor` (PATH/LETTERS), the `--color-interactive-accent` badge fill
142
+ * (CUTOUT/BG), and the per-letter interaction classes (`.glyph`, `.logo-*`) all
143
+ * work — an `<img src>` can't receive those interior styles.
144
+ *
145
+ * Color flows from CSS: set `color` (PATH/LETTERS) on this element or an
146
+ * ancestor. Size via `width` (or CSS on the wrapper).
147
+ */
148
+ declare function Logo({ name, variant, width, style, ...rest }: LogoProps): react_jsx_runtime.JSX.Element | null;
149
+
150
+ interface BrandAnimationProps extends React.HTMLAttributes<HTMLSpanElement> {
151
+ /** Animation id, e.g. `dissertation-ai`. See @dataimago/brand animations.json. */
152
+ name: AnimationId;
153
+ /**
154
+ * Render width (px number or any CSS length). Height scales via the SVG
155
+ * viewBox. Omit to use the animation's intrinsic size.
156
+ */
157
+ width?: number | string;
158
+ }
159
+ /**
160
+ * Decorative brand animation from `@dataimago/brand` (the animation-foundry).
161
+ * Inlines the pure-SMIL SVG string so its interior `<style>` works — an
162
+ * `<img src>` can't receive those styles (same rationale as `<Logo>`).
163
+ *
164
+ * Motion-dignity: decorative brand animation is a distinct category from the
165
+ * 300ms UI-transition ceiling, but it is contractually gated on
166
+ * `prefers-reduced-motion`. When the user prefers reduced motion this renders
167
+ * the static brand mark the animation settles to (its `poster`) via `<Logo>`,
168
+ * so no consumer can ship the motion without the fallback.
169
+ */
170
+ declare function BrandAnimation({ name, width, style, ...rest }: BrandAnimationProps): react_jsx_runtime.JSX.Element | null;
171
+
172
+ interface NavbarLogoProps extends React.HTMLAttributes<HTMLSpanElement> {
173
+ /** Navbar mark id, e.g. `dissertation-ai`. See @dataimago/brand navbar.json. */
174
+ name: NavbarLogoId;
175
+ /**
176
+ * Render width (px number or any CSS length). Height scales via the SVG
177
+ * viewBox. Omit to use the mark's intrinsic size.
178
+ */
179
+ width?: number | string;
180
+ }
181
+ /**
182
+ * Animated brand mark for an app navbar, from `@dataimago/brand` (the
183
+ * animation-foundry's navbar set). Inlines the self-contained CSS-animated SVG
184
+ * so its interior `<style>` works — an `<img src>` can't receive those styles.
185
+ *
186
+ * Behaviour by mark kind (from the navbar manifest):
187
+ * - `assemble` (L2: dissertation-ai, rpkg-ai, SGPc-ai): the trailing `a`/`i`
188
+ * start apart and the `i` slides onto the `a`. Plays once on mount; replays
189
+ * on pointer-enter via a remount (`replayKey`).
190
+ * - `shimmer` (L1: dataimago-ai): the monogram is always superimposed; an
191
+ * accent shimmer sweeps on `:hover` from the SVG's own CSS (no JS trigger).
192
+ *
193
+ * Motion-dignity: the embedded CSS animation is <= 300ms and gated on
194
+ * `@media (prefers-reduced-motion: no-preference)`. When the user prefers
195
+ * reduced motion this renders the static settled mark (the manifest `poster`,
196
+ * the superimposed monogram) via `<Logo>` — so no consumer can ship the motion
197
+ * without the fallback.
198
+ */
199
+ declare function NavbarLogo({ name, width, style, ...rest }: NavbarLogoProps): react_jsx_runtime.JSX.Element | null;
200
+
201
+ export { BrandAnimation, type BrandAnimationProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Logo, LogoMonogram, LogoMonogramBg, type LogoMonogramBgProps, type LogoMonogramProps, type LogoProps, LogoWordmark, type LogoWordmarkProps, NavbarLogo, type NavbarLogoProps };