@omni-design/components 0.12.0 → 0.13.0

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

@@ -1,5 +1,5 @@
 export function BackgroundPicker({ theme, onThemeChange, surface, onSurfaceChange, surfaces, size, }: {
-    theme?: any;
+    theme?: string;
     onThemeChange: any;
     surface?: string;
     onSurfaceChange: any;

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

@@ -0,0 +1,20 @@
+/**
+ * @param name   lowercase, hyphenated, as Figma's text layer holds it:
+ *               'github', 'x-twitter', 'linkedin', 'dribbble', 'instagram'
+ * @param icon   a Font Awesome icon object, if you would rather import it
+ *               yourself. Takes precedence over `name`.
+ * @param size   any CSS length. Defaults to 1em so it rides the text beside it.
+ * @param color  any CSS color or token. Defaults to currentColor.
+ * @param title  accessible name. Omit for decoration beside a visible label —
+ *               the icon is then aria-hidden, which is the common case in a
+ *               footer where the link text already says "GitHub".
+ */
+export function BrandIcon({ name, icon, size, color, title, ...props }: {
+    [x: string]: any;
+    name: any;
+    icon: any;
+    size?: string;
+    color?: string;
+    title: any;
+}): JSX.Element;
+export default BrandIcon;

package/dist/types/components/BrandIcon/index.d.ts

@@ -0,0 +1 @@
+export { BrandIcon, default } from "./BrandIcon";

package/dist/types/components/Charts/tokens.d.ts

@@ -16,7 +16,7 @@ export namespace CHART_TOKENS {
  *
  * Brand accents lead, because a category has no inherent meaning and should
  * not borrow one — a green wedge next to a red one reads as pass/fail whether
- * or not that is what the data says. The state colours are still available for
+ * or not that is what the data says. The state colors are still available for
  * charts with more categories than accents, and a caller can pass its own
  * subset (or reorder it) via the `colors` prop when the categories DO carry
  * semantics: `colors={['Success', 'Warning', 'Error']}`.

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

@@ -1,10 +1,12 @@
-export function Footer({ color, brand, address, columns, socialLinks, subscribe, copyrightName, copyrightYear, className, style, ...rest }: {
+export function Footer({ color, brand, address, columns, socialLinks, copyright, children, subscribe, copyrightName, copyrightYear, className, style, ...rest }: {
     [x: string]: any;
     color?: string;
     brand: any;
     address: any;
     columns?: any[];
     socialLinks?: any[];
+    copyright?: boolean;
+    children: any;
     subscribe: any;
     copyrightName: any;
     copyrightYear: any;

package/dist/types/components/Foundations/FoundationTopic.d.ts

@@ -0,0 +1,4 @@
+export function FoundationTopic({ topic }: {
+    topic: any;
+}): JSX.Element;
+export default FoundationTopic;

package/dist/types/components/Foundations/HowToSlot.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @param src     path under public/, e.g. "/images/figma-surface-mode.png".
+ *                Omit it to render the placeholder. A .mp4/.mov/.webm plays.
+ * @param title   what the shot should show, in a few words.
+ * @param shows   one line on what the viewer should come away knowing.
+ * @param aspect  placeholder shape. Panel crops are tall; default suits them.
+ * @param maxWidth cap in px. Panel crops are narrow, so the default is too.
+ */
+export function HowToSlot({ src, title, shows, aspect, maxWidth }: {
+    src: any;
+    title: any;
+    shows: any;
+    aspect?: string;
+    maxWidth?: number;
+}): JSX.Element;
+export default HowToSlot;

package/dist/types/components/Foundations/TokenRoles.d.ts

@@ -0,0 +1,19 @@
+/**
+ * One swatch per role, painted from the token itself.
+ *
+ * The chip renders the REAL variable rather than a copy of its value, so it
+ * re-resolves with the theme and surface pickers above — which is the only way
+ * to show that these are roles and not colors.
+ */
+export function RoleSwatches({ title, note, roles, tokenFor }: {
+    title: any;
+    note: any;
+    roles: any;
+    tokenFor: any;
+}): JSX.Element;
+export function StyleTable({ styles, tokensFor, defaultColorFor, render }: {
+    styles: any;
+    tokensFor: any;
+    defaultColorFor: any;
+    render: any;
+}): JSX.Element;

package/dist/types/components/Foundations/TypographySummary.d.ts

@@ -0,0 +1,2 @@
+export function TypographySummary(): JSX.Element;
+export default TypographySummary;

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

@@ -0,0 +1,5 @@
+export function ShowcaseHeader({ title, component }: {
+    title: any;
+    component: any;
+}): JSX.Element;
+export default ShowcaseHeader;

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

@@ -92,7 +92,7 @@ export function URLTextField({ label, placeholder, ...props }: {
  *   - error / errorMessage where Input has validation / validationMessage, so
  *     the same state was spelled two ways depending on which control you
  *     reached for.
- *   - No size, no variant, no colour, no adornments, no floating label.
+ *   - No size, no variant, no color, no adornments, no floating label.
  *
  * Input already takes multiline / rows / maxRows and renders a <textarea>, so
  * there was never a second thing to build — only a second thing to maintain.

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

@@ -1,8 +1,9 @@
-export function Typography({ children, textStyle, color, width, component, noWrap, gutterBottom, className, sx, ...props }: {
+export function Typography({ children, textStyle, color, altMode, width, component, noWrap, gutterBottom, className, sx, ...props }: {
     [x: string]: any;
     children: any;
     textStyle?: string;
     color: any;
+    altMode: any;
     width: any;
     component: any;
     noWrap?: boolean;
@@ -11,6 +12,39 @@ export function Typography({ children, textStyle, color, width, component, noWra
     sx?: {};
 }): JSX.Element;
 export const STYLE_MAP: {
+    'alt-display-large': {
+        component: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        defaultColor: string;
+        defaultWidth: string;
+        altDisplay: boolean;
+    };
+    'alt-display-medium': {
+        component: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        defaultColor: string;
+        defaultWidth: string;
+        altDisplay: boolean;
+    };
+    'alt-display-small': {
+        component: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        defaultColor: string;
+        defaultWidth: string;
+        altDisplay: boolean;
+    };
     'display-large': {
         component: string;
         fontFamily: string;
@@ -427,6 +461,22 @@ export const STYLE_ALIASES: {
     'subtitle-medium': string;
 };
 export const TYPOGRAPHY_STYLES: string[];
+/**
+ * Every CSS variable each style reads, derived from the style's own config.
+ *
+ * Generated rather than listed, because a hand-kept table is a second source
+ * of truth that drifts the first time someone adds a style — and the docs in
+ * this repo have been wrong about bindings often enough today to make that a
+ * real cost rather than a theoretical one. The config strings already contain
+ * the token names; this just reads them back out.
+ */
+export const STYLE_TOKENS: {
+    [k: string]: string[];
+};
+/** 'header' or 'standard' — which color role a style takes by default. */
+export const STYLE_DEFAULT_COLOR: {
+    [k: string]: string;
+};
 export const HEADER_COLORS: string[];
 export const TEXT_COLORS: string[];
 export const CAP_HEIGHT_TRIM: {
@@ -440,6 +490,9 @@ export const CAP_HEIGHT_TRIM: {
 export function DisplayLarge(p: any): JSX.Element;
 export function DisplayMedium(p: any): JSX.Element;
 export function DisplaySmall(p: any): JSX.Element;
+export function AltDisplayLarge(p: any): JSX.Element;
+export function AltDisplayMedium(p: any): JSX.Element;
+export function AltDisplaySmall(p: any): JSX.Element;
 export function H1(p: any): JSX.Element;
 export function H2(p: any): JSX.Element;
 export function H3(p: any): JSX.Element;

package/dist/types/components/Typography/index.d.ts

@@ -1,2 +1,2 @@
 export { TypographyShowcase } from "./TypographyShowcase";
-export { Typography, TYPOGRAPHY_STYLES, CAP_HEIGHT_TRIM, H1, H2, H3, H4, H5, H6, Heading, DisplayLarge, DisplayMedium, DisplaySmall, Subtitle, SubtitleSmall, SubtitleMedium, SubtitleLarge, Subtitle1, Subtitle2, Body, BodySmall, BodyLarge, BodySemibold, BodyBold, BodySmallSemibold, BodySmallBold, BodyLargeSemibold, BodyLargeBold, Body1, Body2, Label, LabelSmall, LabelLarge, LabelExtraSmall, Caption, CaptionBold, Legal, LegalSemibold, Button, ButtonSmall, ButtonExtraSmall, Eyebrow, EyebrowSmall, EyebrowMedium, EyebrowLarge, Overline, OverlineSmall, OverlineMedium, OverlineLarge, NumberLarge, NumberMedium, NumberSmall, default } from "./Typography";
+export { TEXT_COLORS, HEADER_COLORS, Typography, TYPOGRAPHY_STYLES, STYLE_TOKENS, STYLE_DEFAULT_COLOR, CAP_HEIGHT_TRIM, H1, H2, H3, H4, H5, H6, Heading, DisplayLarge, DisplayMedium, DisplaySmall, AltDisplayLarge, AltDisplayMedium, AltDisplaySmall, Subtitle, SubtitleSmall, SubtitleMedium, SubtitleLarge, Subtitle1, Subtitle2, Body, BodySmall, BodyLarge, BodySemibold, BodyBold, BodySmallSemibold, BodySmallBold, BodyLargeSemibold, BodyLargeBold, Body1, Body2, Label, LabelSmall, LabelLarge, LabelExtraSmall, Caption, CaptionBold, Legal, LegalSemibold, Button, ButtonSmall, ButtonExtraSmall, Eyebrow, EyebrowSmall, EyebrowMedium, EyebrowLarge, Overline, OverlineSmall, OverlineMedium, OverlineLarge, NumberLarge, NumberMedium, NumberSmall, default } from "./Typography";

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

@@ -3,7 +3,7 @@
  *
  * @param {object}  [opts]
  * @param {string}  [opts.selectedBg]    resting fill when selected
- * @param {string}  [opts.selectedText]  text colour when selected
+ * @param {string}  [opts.selectedText]  text color when selected
  * @param {string}  [opts.selectedHover] fill on hover while selected
  * @param {string}  [opts.selectedPressed] fill on press while selected
  * @param {string}  [opts.muiPrefix]     'Mui' to use MUI's class-based

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

@@ -0,0 +1,37 @@
+export function ContrastBadge({ ratio, threshold }: {
+    ratio: any;
+    threshold?: number;
+}): JSX.Element;
+export function A11yRow({ label, ratio, threshold, note }: {
+    label: any;
+    ratio: any;
+    threshold: any;
+    note: any;
+}): JSX.Element;
+export function A11yCheckRow({ label, pass, detail, note }: {
+    label: any;
+    pass: any;
+    detail: any;
+    note: any;
+}): JSX.Element;
+/**
+ * Read resolved CSS custom properties off a mounted element.
+ *
+ * Deferred with setTimeout and NOT requestAnimationFrame: rAF does not fire in
+ * a background or hidden tab, so a page opened in one measured nothing, and
+ * because the deps do not change afterwards it never retried — every row read
+ * "--" forever, even once the tab was focused.
+ *
+ * It also RETRIES, because the element can mount later than the effect: the
+ * preview often lives inside the Playground tab while the landing tab is
+ * Summary, so on first paint there is nothing to measure. Returning early used
+ * to end it permanently. Forty tries at 50ms, then stop, so a component with no
+ * preview does not poll forever.
+ *
+ * @param ref   ref to the element whose computed style is read
+ * @param read  (v) => data, where v(name) resolves one custom property
+ * @param deps  re-measure when these change
+ */
+export function useMeasuredTokens(ref: any, read: any, deps: any): {};
+export { getContrast };
+import { getContrast } from './contrast';

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

@@ -1,5 +1,6 @@
 export { Colors } from "./Colors";
 export { Spacing } from "./Spacing";
+export { BrandIcon } from "./BrandIcon";
 export { Swatch } from "./Swatch";
 export { MiniSwatch } from "./MiniSwatch";
 export { IconBadge } from "./IconBadge";
@@ -29,7 +30,7 @@ export { OmniStack as DynoStack } from "./Stack/Stack";
 export { OmniTreeView as DynoTreeView } from "./TreeView/TreeView";
 export * as chartGeometry from "./Charts/geometry";
 export { StateMessage } from "./StateMessage";
-export { Typography, CAP_HEIGHT_TRIM, Heading, DisplayLarge, DisplayMedium, DisplaySmall, H1, H2, H3, H4, H5, H6, Body, Body1, Body2, BodySemibold, BodyBold, BodySmall, BodySmallSemibold, BodySmallBold, BodyLarge, BodyLargeSemibold, BodyLargeBold, Caption, CaptionBold, Subtitle, Subtitle1, Subtitle2, SubtitleSmall, SubtitleMedium, SubtitleLarge, Legal, LegalSemibold, Label, LabelExtraSmall, LabelSmall, LabelLarge, Eyebrow, EyebrowSmall, EyebrowMedium, EyebrowLarge, Overline, OverlineSmall, OverlineMedium, OverlineLarge, NumberSmall, NumberMedium, NumberLarge, Button as ButtonText, ButtonSmall } from "./Typography";
+export { Typography, CAP_HEIGHT_TRIM, Heading, DisplayLarge, DisplayMedium, AltDisplayLarge, AltDisplayMedium, AltDisplaySmall, DisplaySmall, H1, H2, H3, H4, H5, H6, Body, Body1, Body2, BodySemibold, BodyBold, BodySmall, BodySmallSemibold, BodySmallBold, BodyLarge, BodyLargeSemibold, BodyLargeBold, Caption, CaptionBold, Subtitle, Subtitle1, Subtitle2, SubtitleSmall, SubtitleMedium, SubtitleLarge, Legal, LegalSemibold, Label, LabelExtraSmall, LabelSmall, LabelLarge, Eyebrow, EyebrowSmall, EyebrowMedium, EyebrowLarge, Overline, OverlineSmall, OverlineMedium, OverlineLarge, NumberSmall, NumberMedium, NumberLarge, Button as ButtonText, ButtonSmall } from "./Typography";
 export { Icon, IconShowcase } from "./Icon";
 export { Fab, FabShowcase } from "./Fab";
 export { Rail, RailShowcase } from "./Rail";
@@ -79,4 +80,4 @@ export { OmniDesignProvider, useOmniDesign, ThemedZone, Surfaced } from "../Omni
 export { CodeBlock, CopyButton } from "./CodeBlock/CodeBlock";
 export { BarChart, LineChart, PieChart, CHART_TOKENS, CHART_LABEL_TYPE } from "./Charts";
 export { Ghost, useGhost, ghostBlockSx } from "./_ghost";
-export { COMPONENT_DOCS, FOUNDATIONS, renderFoundations, renderColourSystem, renderComponentDoc, COLOUR_COLLECTIONS, docsSlug, componentDocsUrl, componentDocsIndexUrl, DOCS_ORIGIN, EXAMPLES, hasExample } from "../docs";
+export { COMPONENT_DOCS, FOUNDATIONS, renderFoundations, renderColorSystem, renderColorSystem as renderColourSystem, renderComponentDoc, COLOR_COLLECTIONS, COLOR_COLLECTIONS as COLOUR_COLLECTIONS, docsSlug, componentDocsUrl, componentDocsIndexUrl, DOCS_ORIGIN, EXAMPLES, hasExample } from "../docs";

package/dist/types/docs/DocPanels.d.ts

@@ -14,20 +14,6 @@ export function docFor(component: any): {
     accessibility: any;
     gotchas: any;
 };
-/**
- * Everything written about the component, in reading order — led by ONE live
- * example.
- *
- * The example is here because a page of prose gives no recognition: you cannot
- * tell what a component IS from its prop table. It renders in the theme and
- * surface currently selected, so the picture matches the pickers rather than
- * showing some other configuration. It is the default instance and is not
- * interactive — the Playground tab is where you change things.
- *
- * Components that need state or a portal to be shown honestly (Modal, Drawer,
- * Snackbar) have no example, and simply lead with the summary instead of
- * rendering a half-working one.
- */
 export function DocSummary({ component, theme, surface }: {
     component: any;
     theme?: any;

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

@@ -7,6 +7,8 @@ export namespace BUTTON_DOC {
     }[];
     let props: ({
         name: string;
+        label: string;
+        sample: string;
         type: string;
         default: string;
         values: string[];
@@ -16,17 +18,23 @@ export namespace BUTTON_DOC {
         type: string;
         values: string[];
         default: string;
+        label?: undefined;
+        sample?: undefined;
         note?: undefined;
     } | {
         name: string;
         type: string;
         default: string;
         note: string;
+        label?: undefined;
+        sample?: undefined;
         values?: undefined;
     } | {
         name: string;
         type: string;
         default: string;
+        label?: undefined;
+        sample?: undefined;
         values?: undefined;
         note?: undefined;
     })[];

package/dist/types/docs/componentsSurfaces.d.ts

@@ -79,6 +79,12 @@ export namespace FAB_DOC {
         values: string[];
         default: string;
         note?: undefined;
+    } | {
+        name: string;
+        type: string;
+        values: string[];
+        default: string;
+        note: string;
     })[];
     export { props_1 as props };
     let states_1: ({
@@ -235,6 +241,52 @@ export namespace ACCORDION_DOC {
     let gotchas_3: string[];
     export { gotchas_3 as gotchas };
 }
+export namespace BRANDICON_DOC {
+    let name_4: string;
+    export { name_4 as name };
+    let summary_4: string;
+    export { summary_4 as summary };
+    let insteadUse_4: {
+        when: string;
+        use: string;
+    }[];
+    export { insteadUse_4 as insteadUse };
+    let props_4: {
+        name: string;
+        type: string;
+        default: string;
+        note: string;
+    }[];
+    export { props_4 as props };
+    let states_4: {
+        state: string;
+        setBy: string;
+        note: string;
+    }[];
+    export { states_4 as states };
+    let theming_4: {
+        collection: string;
+        inCode: string;
+        inFigma: string;
+    }[];
+    export { theming_4 as theming };
+    let themingNotes_3: string[];
+    export { themingNotes_3 as themingNotes };
+    let tokens_4: {
+        name: string;
+        sets: string;
+        variesWith: string;
+        figma: string;
+    }[];
+    export { tokens_4 as tokens };
+    let composition_4: string[];
+    export { composition_4 as composition };
+    let accessibility_4: string[];
+    export { accessibility_4 as accessibility };
+    let gotchas_4: string[];
+    export { gotchas_4 as gotchas };
+    export let changes: any[];
+}
 export const SURFACE_DOCS: ({
     name: string;
     summary: string;
@@ -246,14 +298,8 @@ export const SURFACE_DOCS: ({
         name: string;
         type: string;
         default: string;
-        values: string[];
-        note: string;
-    } | {
-        name: string;
-        type: string;
-        values: string[];
-        default: string;
         note?: undefined;
+        values?: undefined;
     } | {
         name: string;
         type: string;
@@ -263,15 +309,25 @@ export const SURFACE_DOCS: ({
     } | {
         name: string;
         type: string;
+        values: string[];
         default: string;
-        values?: undefined;
         note?: undefined;
+    } | {
+        name: string;
+        type: string;
+        values: string[];
+        default: string;
+        note: string;
     })[];
-    states: {
+    states: ({
         state: string;
         setBy: string;
         note: string;
-    }[];
+    } | {
+        state: string;
+        setBy: string;
+        note?: undefined;
+    })[];
     theming: {
         collection: string;
         inCode: string;
@@ -336,4 +392,38 @@ export const SURFACE_DOCS: ({
     composition: string[];
     accessibility: string[];
     gotchas: string[];
+} | {
+    name: string;
+    summary: string;
+    insteadUse: {
+        when: string;
+        use: string;
+    }[];
+    props: {
+        name: string;
+        type: string;
+        default: string;
+        note: string;
+    }[];
+    states: {
+        state: string;
+        setBy: string;
+        note: string;
+    }[];
+    theming: {
+        collection: string;
+        inCode: string;
+        inFigma: string;
+    }[];
+    themingNotes: string[];
+    tokens: {
+        name: string;
+        sets: string;
+        variesWith: string;
+        figma: string;
+    }[];
+    composition: string[];
+    accessibility: string[];
+    gotchas: string[];
+    changes: any[];
 })[];

package/dist/types/docs/examples.d.ts

@@ -3,6 +3,8 @@ export function hasExample(component: any): boolean;
 export function hasPropExample(component: any, prop: any): boolean;
 export namespace EXAMPLES {
     function Button(): JSX.Element;
+    function BrandIcon(): JSX.Element;
+    function Fab(): JSX.Element;
     function ButtonGroup(): JSX.Element;
     function Chip(): JSX.Element;
     function Badge(): JSX.Element;
@@ -24,9 +26,18 @@ export namespace EXAMPLES {
     function Tabs(): JSX.Element;
 }
 export namespace PROP_EXAMPLES {
+    export namespace Fab_1 {
+        function size(): JSX.Element;
+        function color(): JSX.Element;
+        function extended(): JSX.Element;
+        function animate(): JSX.Element;
+        function disabled(): JSX.Element;
+    }
+    export { Fab_1 as Fab };
     let Button_1: {
         variant: () => JSX.Element;
         size: () => JSX.Element;
+        variantColor: () => JSX.Element;
         disabled: () => JSX.Element;
         'startDecorator / endDecorator': () => JSX.Element;
         iconOnly: () => JSX.Element;

package/dist/types/docs/figmaHowTo.d.ts

@@ -0,0 +1,28 @@
+export namespace FIGMA_HOWTO {
+    namespace Fab {
+        let title: string;
+        let after: string;
+        let node: string;
+        let collection: string;
+        let body: string;
+        let shot: string;
+        let caveat: string;
+    }
+    namespace Button {
+        let title_1: string;
+        export { title_1 as title };
+        let after_1: string;
+        export { after_1 as after };
+        let node_1: string;
+        export { node_1 as node };
+        let collection_1: string;
+        export { collection_1 as collection };
+        let body_1: string;
+        export { body_1 as body };
+        let shot_1: string;
+        export { shot_1 as shot };
+        let caveat_1: string;
+        export { caveat_1 as caveat };
+    }
+}
+export function howToFor(component: any): any;

package/dist/types/docs/figmaLinks.d.ts

@@ -0,0 +1,58 @@
+/**
+ * A link to the component in Figma, or null when it is not drawn.
+ *
+ * Null rather than a link to the file root: a component with no design is a
+ * real answer, and sending someone to the front page to hunt for it is not.
+ */
+export function figmaUrlFor(component: any): string;
+export const FIGMA_FILE_KEY: "Qv2dqF7mYoAGY77EkdrwTv";
+export const FIGMA_FILE_NAME: "Omni-Designs-Aug12";
+export namespace FIGMA_PAGES {
+    let Typography: string;
+    let Accordion: string;
+    let Alert: string;
+    let AppBar: string;
+    let Avatar: string;
+    let Badge: string;
+    let Box: string;
+    let Breadcrumbs: string;
+    let Button: string;
+    let ButtonGroup: string;
+    let Card: string;
+    let Checkbox: string;
+    let Chip: string;
+    let CodeBlock: string;
+    let Dialog: string;
+    let Divider: string;
+    let Drawer: string;
+    let Fab: string;
+    let Icon: string;
+    let IconBadge: string;
+    let Input: string;
+    let Link: string;
+    let List: string;
+    let Loader: string;
+    let Menu: string;
+    let Modal: string;
+    let NumberField: string;
+    let Pagination: string;
+    let Radio: string;
+    let Rail: string;
+    let Ratio: string;
+    let Rating: string;
+    let SearchField: string;
+    let Select: string;
+    let Sheet: string;
+    let Slider: string;
+    let Snackbar: string;
+    let Stepper: string;
+    let SwitchInput: string;
+    let Table: string;
+    let Tabs: string;
+    let Tag: string;
+    let TextField: string;
+    let Toolbar: string;
+    let Tooltip: string;
+    let TreeView: string;
+    let BottomNavigation: string;
+}

package/dist/types/docs/foundations.d.ts

@@ -18,11 +18,23 @@ export const FOUNDATIONS: ({
         head: string[];
         rows: string[][];
     };
+    body2: any[];
     trap: string;
+} | {
+    title: string;
+    lede: string;
+    body: string[];
+    table: {
+        head: string[];
+        rows: string[][];
+    };
+    trap: string;
+    body2?: undefined;
 } | {
     title: string;
     lede: string;
     body: string[];
     trap: string;
     table?: undefined;
+    body2?: undefined;
 })[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omni-design/components",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "DynoDesign adaptive component library — token-driven React components with customizable CSS theming",
   "author": "Lise Noble",
   "license": "Apache-2.0",
@@ -107,7 +107,9 @@
     "type": "git",
     "url": "https://github.com/lwnoble/omni-design"
   },
-  "dependencies": {},
+  "dependencies": {
+    "@fortawesome/free-brands-svg-icons": "^7.3.1"
+  },
   "homepage": "/",
   "browserslist": {
     "production": [