@ilo-org/react 0.11.0 → 0.12.0

package/lib/esm/components/Cards/MultilinkCard/index.js

@@ -0,0 +1,22 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import useGlobalSettings from '../../../hooks/useGlobalSettings.js';
+import LinkList from '../../LinkList/LinkList.js';
+import 'tslib';
+import 'react';
+import '../../../GlobalCtx-7fb23cfa.js';
+
+const MultilinkCard = ({ isvideo, eyebrow, title, size = "narrow", alignment, intro, link, linklist, image, }) => {
+    const { prefix } = useGlobalSettings();
+    const baseClass = `${prefix}--card`;
+    const cardClasses = classNames(baseClass, `${baseClass}__type__multilink`, {
+        [`${baseClass}__align__${alignment}`]: alignment,
+        [`${baseClass}__action`]: link,
+        [`${baseClass}__size__${size}`]: size,
+        [`${baseClass}__isvideo`]: isvideo,
+        [`${baseClass}__linklist`]: linklist,
+    });
+    return (jsxs("div", Object.assign({ className: cardClasses }, { children: [link && (jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxs("div", Object.assign({ className: `${baseClass}--wrap` }, { children: [image && (jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsx("picture", { children: jsx("img", { className: `${baseClass}--picture`, src: image, alt: title }) }) }))), jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && jsx("h5", Object.assign({ className: `${baseClass}--title` }, { children: title })), image && (jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsx("picture", { children: jsx("img", { className: `${baseClass}--picture`, src: image, alt: title }) }) }))), intro && jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), linklist && (jsx(LinkList, { headline: linklist.headline, linkgroup: linklist.linkgroup }))] }))] }))] })));
+};
+
+export { MultilinkCard as default };

package/lib/esm/components/Cards/PromoCard/index.js

@@ -0,0 +1,21 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import useGlobalSettings from '../../../hooks/useGlobalSettings.js';
+import 'tslib';
+import 'react';
+import '../../../GlobalCtx-7fb23cfa.js';
+
+const PromoCard = ({ eyebrow, title, theme, size = "narrow", cornercut, intro, link, cta, }) => {
+    const { prefix } = useGlobalSettings();
+    const baseClass = `${prefix}--card`;
+    const wrapperClass = classNames(`${baseClass}--wrapper`, `${baseClass}--wrapper__type__promo ${baseClass}--wrapper__type__promo__size__${size}`);
+    const cardClasses = classNames(baseClass, `${baseClass}__type__promo`, {
+        [`${baseClass}__cornercut`]: cornercut,
+        [`${baseClass}__action`]: link,
+        [`${baseClass}__size__${size}`]: size,
+        [`${baseClass}__theme__${theme}`]: theme,
+    });
+    return (jsx("div", Object.assign({ className: wrapperClass }, { children: jsxs("div", Object.assign({ className: cardClasses }, { children: [link && (jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsx("div", Object.assign({ className: `${baseClass}--wrap` }, { children: jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && jsx("h5", Object.assign({ className: `${baseClass}--title` }, { children: title })), intro && jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), cta && cta.label && (jsx("a", Object.assign({ className: `${baseClass}--cta ${prefix}--button ${prefix}--button--medium ${prefix}--button--primary`, href: cta.url }, { children: jsx("span", Object.assign({ className: "link__label" }, { children: cta.label })) })))] })) }))] })) })));
+};
+
+export { PromoCard as default };

package/lib/esm/components/Cards/StatCard/index.js

@@ -0,0 +1,19 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import useGlobalSettings from '../../../hooks/useGlobalSettings.js';
+import Link from '../../Link/Link.js';
+import 'tslib';
+import 'react';
+import '../../../GlobalCtx-7fb23cfa.js';
+
+const StatCard = ({ title, color, size = "standard", intro, source, }) => {
+    const { prefix } = useGlobalSettings();
+    const baseClass = `${prefix}--card`;
+    const cardClasses = classNames(baseClass, `${baseClass}__type__stat`, {
+        [`${baseClass}__color__${color}`]: color,
+        [`${baseClass}__size__${size}`]: size,
+    });
+    return (jsx("div", Object.assign({ className: cardClasses }, { children: jsx("div", Object.assign({ className: `${baseClass}--wrap` }, { children: jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [title && jsx("h5", Object.assign({ className: `${baseClass}--title` }, { children: title })), intro && jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), source && jsx(Link, Object.assign({ url: source.url }, { children: source.label }))] })) })) })));
+};
+
+export { StatCard as default };

package/lib/esm/components/Cards/TextCard/index.js

@@ -0,0 +1,23 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import useGlobalSettings from '../../../hooks/useGlobalSettings.js';
+import Profile from '../../Profile/Profile.js';
+import 'tslib';
+import 'react';
+import '../../../GlobalCtx-7fb23cfa.js';
+
+const TextCard = ({ eyebrow, title, theme, size, date, profile, link, }) => {
+    const { prefix } = useGlobalSettings();
+    const baseClass = `${prefix}--card`;
+    const wrapperClass = classNames(`${baseClass}--wrapper`);
+    const cardClasses = classNames(baseClass, `${baseClass}__type__text`, {
+        [`${baseClass}__action`]: link,
+        [`${baseClass}__size__${size}`]: size,
+        [`${baseClass}__theme__${theme}`]: theme,
+    });
+    console.log("heloo");
+    console.log(profile);
+    return (jsx("div", Object.assign({ className: wrapperClass }, { children: jsxs("div", Object.assign({ className: cardClasses }, { children: [link && (jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsx("div", Object.assign({ className: `${baseClass}--wrap` }, { children: jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && jsx("h5", Object.assign({ className: `${baseClass}--title` }, { children: title })), date && (jsx("time", Object.assign({ className: `${baseClass}--date`, dateTime: date.unix }, { children: date.human }))), profile && profile.avatar && (jsx(Profile, { avatar: profile.avatar, description: profile.description, link: profile.link, name: profile.name, role: profile.role, className: `${prefix}--profile--contents--${theme}` }))] })) }))] })) })));
+};
+
+export { TextCard as default };

package/lib/esm/components/Cards/index.js

@@ -0,0 +1,22 @@
+export { default as FeatureCard } from './FeatureCard/index.js';
+export { default as DataCard } from './DataCard/index.js';
+export { default as DetailCard } from './DetailCard/index.js';
+export { default as FactlistCard } from './FactlistCard/index.js';
+export { default as MultilinkCard } from './MultilinkCard/index.js';
+export { default as PromoCard } from './PromoCard/index.js';
+export { default as StatCard } from './StatCard/index.js';
+export { default as TextCard } from './TextCard/index.js';
+export { default as Card } from './Card.js';
+export { default as CardGroup } from './CardGroup.js';
+import 'react/jsx-runtime';
+import 'classnames';
+import '../../hooks/useGlobalSettings.js';
+import 'tslib';
+import 'react';
+import '../../GlobalCtx-7fb23cfa.js';
+import '../LinkList/LinkList.js';
+import '../Link/Link.js';
+import '../List/List.js';
+import '../../ListCtx-da435fdf.js';
+import '../List/ListItem.js';
+import '../Profile/Profile.js';

package/lib/esm/components/LinkList/LinkList.js

@@ -12,7 +12,7 @@ const LinkList = ({ className, headline, linkgroup, theme, }) => {
         [baseClass]: true,
         [`${baseClass + "--" + (theme && theme === "dark" ? theme : "light")}`]: true,
     });
-    return (jsxs("div", Object.assign({ className: linkListClasses }, { children: [jsx("h3", Object.assign({ className: `${baseClass}--headline` }, { children: headline })), jsx("ul", Object.assign({ className: `${baseClass}--linkgroups` }, { children: linkgroup &&
+    return (jsxs("div", Object.assign({ className: linkListClasses }, { children: [headline && jsx("h3", Object.assign({ className: `${baseClass}--headline` }, { children: headline })), jsx("ul", Object.assign({ className: `${baseClass}--linkgroups` }, { children: linkgroup &&
                     linkgroup.map((linkset, i) => (jsxs("li", Object.assign({ className: `${baseClass}--linkgroups-item` }, { children: [linkset.headline && (jsx("h4", Object.assign({ className: `${baseClass}--links--headline` }, { children: linkset.headline }))), jsx("ul", Object.assign({ className: `${baseClass}--links` }, { children: linkset.links &&
                                     linkset.links.map((link, i) => (jsx("li", Object.assign({ className: `${baseClass}--links--item${link.indented ? " indented" : ""}` }, { children: jsx("a", Object.assign({ href: link.url, className: `${baseClass}--link` }, { children: jsx("span", Object.assign({ className: `${baseClass}--label` }, { children: link.label })) })) }), `${baseClass}--links--item-${i}`))) }))] }), `${baseClass}--linkgroups-item-${i}`))) }))] })));
 };

package/lib/esm/components/index.js

@@ -50,8 +50,8 @@ export { default as TableOfContents } from './TableOfContents/TableOfContents.js
 export { default as Footer } from './Footer/Footer.js';
 export { default as LocalNav } from './LocalNav/LocalNav.js';
 export { default as Navigation } from './Navigation/Navigation.js';
-export { default as Card } from './Card/Card.js';
-export { default as CardGroup } from './Card/CardGroup.js';
+export { default as Card } from './Cards/Card.js';
+export { default as CardGroup } from './Cards/CardGroup.js';
 export { default as Breadcrumb } from './Breadcrumb/Breadcrumb.js';
 export { default as Tabs } from './Tabs/Tabs.js';
 import '../hooks/useGlobalSettings.js';
@@ -77,4 +77,12 @@ import 'videojs-youtube';
 import 'video.js';
 import '@ilo-org/icons-react';
 import './Logo/Logo.js';
+import './Cards/FeatureCard/index.js';
+import './Cards/DataCard/index.js';
+import './Cards/DetailCard/index.js';
+import './Cards/FactlistCard/index.js';
 import './List/ListItem.js';
+import './Cards/MultilinkCard/index.js';
+import './Cards/PromoCard/index.js';
+import './Cards/StatCard/index.js';
+import './Cards/TextCard/index.js';

package/lib/esm/index.js

@@ -50,8 +50,8 @@ export { default as TableOfContents } from './components/TableOfContents/TableOf
 export { default as Footer } from './components/Footer/Footer.js';
 export { default as LocalNav } from './components/LocalNav/LocalNav.js';
 export { default as Navigation } from './components/Navigation/Navigation.js';
-export { default as Card } from './components/Card/Card.js';
-export { default as CardGroup } from './components/Card/CardGroup.js';
+export { default as Card } from './components/Cards/Card.js';
+export { default as CardGroup } from './components/Cards/CardGroup.js';
 export { default as Breadcrumb } from './components/Breadcrumb/Breadcrumb.js';
 export { default as Tabs } from './components/Tabs/Tabs.js';
 import './hooks/useGlobalSettings.js';
@@ -77,4 +77,12 @@ import './components/Video/VideoPlayer.js';
 import 'videojs-youtube';
 import 'video.js';
 import './components/Logo/Logo.js';
+import './components/Cards/FeatureCard/index.js';
+import './components/Cards/DataCard/index.js';
+import './components/Cards/DetailCard/index.js';
+import './components/Cards/FactlistCard/index.js';
 import './components/List/ListItem.js';
+import './components/Cards/MultilinkCard/index.js';
+import './components/Cards/PromoCard/index.js';
+import './components/Cards/StatCard/index.js';
+import './components/Cards/TextCard/index.js';

package/lib/types/react/src/components/Cards/Card.props.d.ts

@@ -0,0 +1,307 @@
+import { CardAlignment, ThemeTypes, CardCornerType, CardColor, CardSize, CardTypes } from "../../types";
+import { LinkProps, LinkListProps } from "../LinkList/LinkList.props";
+import { ProfileProps } from "../Profile/Profile.props";
+export type DataCardProps = {
+    /**
+     * A line of text that appears as a small heading at the top of the card
+     */
+    eyebrow?: string;
+    /**
+     * How big should the card be
+     */
+    size?: Omit<CardSize, "standard">;
+    /**
+     * The image to show in the card
+     */
+    image?: string;
+    /**
+     * Array of Content (label, copy), Files object (optional headline, array of items with label and url) and Links * * object (optional headline, array of items with label and url)
+     */
+    dataset?: CardDataset;
+    /**
+     * Make the content appear in one or two columns. Only applies when the size is set to `wide` or `fluid`
+     */
+    columns?: string;
+};
+export type DetailCardProps = {
+    /**
+     * A line of text that appears as a small heading above the title of the card
+     */
+    eyebrow?: string;
+    /**
+     * The title of the card
+     */
+    title: string;
+    /**
+     * Introductory text in the card
+     */
+    intro?: string;
+    /**
+     * Specify the event Date, in both human and Unix format.
+     */
+    date?: EventDate;
+    /**
+     * Information about an event
+     */
+    eventdetails?: string;
+    /**
+     * A URL to link to
+     */
+    link?: string;
+    /**
+     * The image to show in the card
+     */
+    image?: string;
+    /**
+     * How big should the card be
+     */
+    size?: Omit<CardSize, "standard">;
+};
+export type FactlistCardProps = {
+    /**
+     * The title of the card
+     */
+    title: string;
+    /**
+     * Will render the card to appear on light or dark backgrounds
+     */
+    theme?: ThemeTypes;
+    /**
+     * How big should the card be
+     */
+    size?: Omit<CardSize, "standard">;
+    list?: string[];
+};
+export type FeatureCardProps = {
+    isvideo?: boolean;
+    /**
+     * A line of text that appears as a small heading above the title of the card
+     */
+    eyebrow?: string;
+    /**
+     * The title of the card
+     */
+    title: string;
+    /**
+     * Will render the card to appear on light or dark backgrounds
+     */
+    theme?: ThemeTypes;
+    /**
+     * How big should the card be
+     */
+    size?: Omit<CardSize, "standard">;
+    /**
+     * Specify the event Date, in both human and Unix format.
+     */
+    date?: EventDate;
+    link?: string;
+    linklist?: LinkListProps;
+    /**
+     * The image to show in the card
+     */
+    image?: string;
+};
+export type MultilinkCardProps = {
+    isvideo?: boolean;
+    /**
+     * A line of text that appears as a small heading above the title of the card
+     */
+    eyebrow?: string;
+    /**
+     * The title of the card
+     */
+    title: string;
+    /**
+     * How big should the card be
+     */
+    size?: CardSize;
+    alignment?: CardAlignment;
+    intro?: string;
+    link?: string;
+    linklist?: LinkListProps;
+    /**
+     * The image to show in the card
+     */
+    image?: string;
+};
+export type PromoCardProps = {
+    /**
+     * A line of text that appears as a small heading above the title of the card
+     */
+    eyebrow?: string;
+    /**
+     * The title of the card
+     */
+    title: string;
+    /**
+     * Will render the card to appear on light or dark backgrounds
+     */
+    theme?: ThemeTypes;
+    /**
+     * How big should the card be
+     */
+    size?: CardSize;
+    /**
+     * Apply an optional corner cut to the top of the card
+     */
+    cornercut?: CardCornerType;
+    /**
+     * Introductory text in the card
+     */
+    intro?: string;
+    link?: string;
+    cta?: LinkProps;
+};
+export type StatCardProps = {
+    /**
+     * The title of the card
+     */
+    title: string;
+    color?: CardColor;
+    /**
+     * How big should the card be
+     */
+    size?: Omit<CardSize, "narrow" | "wide">;
+    /**
+     * Introductory text in the card
+     */
+    intro?: string;
+    source?: LinkProps;
+};
+export type TextCardProps = {
+    /**
+     * A line of text that appears as a small heading above the title of the card
+     */
+    eyebrow?: string;
+    /**
+     * The title of the card
+     */
+    title: string;
+    /**
+     * Will render the card to appear on light or dark backgrounds
+     */
+    theme?: ThemeTypes;
+    /**
+     * How big should the card be
+     */
+    size?: Omit<CardSize, "standard">;
+    /**
+     * Specify the event Date, in both human and Unix format.
+     */
+    date?: EventDate;
+    profile: ProfileProps;
+    link?: string;
+};
+export interface CardProps {
+    /**
+     * Specify whether the card should display a video icon (for Feature card). Possible options: true | false
+     */
+    isvideo?: boolean;
+    /**
+     * Eyebrow field for the card.
+     */
+    eyebrow: string;
+    /**
+     * Title field for the card
+     */
+    title: string;
+    /**
+     * Color of the stat cards, options are turquoise | green| yellow| blue. Only used for stat cards.
+     */
+    color?: CardColor;
+    /**
+     * The theme type for the card. Theme doesn't apply to these card types: Multilink, Data, Stat and Detail. Possible themes: light | dark.
+     */
+    theme?: ThemeTypes;
+    /**
+     * Type - Sets the type of card to render.
+       Option keys: feature, text, detail, promo, multilink, data, stat, factlist
+     */
+    type: CardTypes;
+    /**
+     * Size of the cards (usually reduces padding). `Wide` on Multilink and Feature cause a two column structure above a desktop breakpoint. Possible options: Wide | Standard | Narrow.
+     */
+    size?: CardSize;
+    /**
+     * Specify whether the card has a cut corner. The only card that uses this setting are `Promo`.
+     */
+    cornercut?: CardCornerType;
+    /**
+     * Specify whether a card image is right-aligned or left-aligned for `Multilink` cards. Possible options: left | right.
+     */
+    alignment?: CardAlignment;
+    /**
+     * Intro text field for the card
+     */
+    intro?: string;
+    /**
+     * Specify the event Date, in both human and Unix format.
+     */
+    date?: EventDate;
+    /**
+     * Event details for `Detail` card
+     */
+    eventdetails?: string;
+    /**
+     * Profile to embed in the card for `Text` card
+     */
+    profile?: ProfileProps;
+    /**
+     * A list of text itmes to be embed in the card, specifically used in `Factlist` card.
+     */
+    listitems?: Array<string>;
+    /**
+     * A Link behind a clickable card. Do no use on `Multilink`, `Factlist`, `Data`, or `Stat` cards.
+     */
+    link?: string;
+    /**
+     * Props of the LinkList component. Appears at the bottom of `Multilink` or `Feature` card.
+     */
+    linklist?: LinkListProps;
+    /**
+     * Items for clickable CTA button, specifically used for `Promo` card.
+     */
+    cta?: LinkProps;
+    /**
+     * The image used in a card. Images should be avoided on `Promo`, `Text`, `Factlist`, and `Stat` card.
+     */
+    image?: string;
+    /**
+     * Source link for `Stat` cards.
+     */
+    source?: LinkProps;
+    /**
+     * Dataset object for the `Data` card. An array of Content (label, copy), Files (optional headline, array of items with label and url), and Links (optional headline, array of items with label and url).
+     */
+    dataset?: CardDataset;
+}
+interface EventDate {
+    unix?: string;
+    human?: string;
+}
+interface CardDataset {
+    content?: DataContent;
+    files?: DataFile;
+    links?: DataLink;
+    cta?: Cta;
+}
+interface DataContent {
+    items?: Array<ContentItem>;
+}
+interface ContentItem {
+    label?: string;
+    copy?: string;
+}
+interface DataFile {
+    headline?: string;
+    items?: Array<LinkProps>;
+}
+interface DataLink {
+    headline?: string;
+    items?: Array<LinkProps>;
+}
+interface Cta {
+    headline?: string;
+    items?: Array<LinkProps>;
+}
+export {};

package/lib/types/react/src/components/{Card → Cards}/CardGroup.props.d.ts

@@ -1,4 +1,4 @@
-import { CardProps } from "../Card/Card.props";
+import { CardProps } from "./Card.props";
 import { LinkProps } from "../LinkList/LinkList.props";
 export interface CardGroupProps {
     /**

package/lib/types/react/src/components/Cards/DataCard/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { DataCardProps } from "../Card.props";
+declare const DataCard: FC<DataCardProps>;
+export default DataCard;

package/lib/types/react/src/components/Cards/DetailCard/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { DetailCardProps } from "../Card.props";
+declare const DetailCard: FC<DetailCardProps>;
+export default DetailCard;

package/lib/types/react/src/components/Cards/FactlistCard/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { FactlistCardProps } from "../Card.props";
+declare const FactlistCard: FC<FactlistCardProps>;
+export default FactlistCard;

package/lib/types/react/src/components/Cards/FeatureCard/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { FeatureCardProps } from "../Card.props";
+declare const FeatureCard: FC<FeatureCardProps>;
+export default FeatureCard;

package/lib/types/react/src/components/Cards/MultilinkCard/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { MultilinkCardProps } from "../Card.props";
+declare const MultilinkCard: FC<MultilinkCardProps>;
+export default MultilinkCard;

package/lib/types/react/src/components/Cards/PromoCard/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { PromoCardProps } from "../Card.props";
+declare const PromoCard: FC<PromoCardProps>;
+export default PromoCard;

package/lib/types/react/src/components/Cards/StatCard/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { StatCardProps } from "../Card.props";
+declare const StatCard: FC<StatCardProps>;
+export default StatCard;

package/lib/types/react/src/components/Cards/TextCard/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { TextCardProps } from "../Card.props";
+declare const TextCard: FC<TextCardProps>;
+export default TextCard;

package/lib/types/react/src/components/Cards/index.d.ts

@@ -0,0 +1,11 @@
+import FeatureCard from "./FeatureCard";
+import DataCard from "./DataCard";
+import DetailCard from "./DetailCard";
+import FactlistCard from "./FactlistCard";
+import MultilinkCard from "./MultilinkCard";
+import PromoCard from "./PromoCard";
+import StatCard from "./StatCard";
+import TextCard from "./TextCard";
+export { FeatureCard, DataCard, DetailCard, FactlistCard, MultilinkCard, PromoCard, StatCard, TextCard, };
+export { default as Card } from "./Card";
+export { default as CardGroup } from "./CardGroup";

package/lib/types/react/src/components/index.d.ts

@@ -36,6 +36,6 @@ export { TableOfContents } from "./TableOfContents";
 export { Footer } from "./Footer";
 export { LocalNav } from "./LocalNav";
 export { Navigation } from "./Navigation";
-export { Card, CardGroup } from "./Card";
+export { Card, CardGroup } from "./Cards";
 export { Breadcrumb } from "./Breadcrumb";
 export { Tabs } from "./Tabs";

package/lib/types/react/src/types/index.d.ts

@@ -27,10 +27,10 @@ export type SizeTypes = "small" | "medium" | "large";
 export type TagTypes = "anchor" | "display" | "button";
 export type SocialTypes = "facebook" | "twitter" | "instagram" | "linkedin" | "youtube" | "tiktok" | "flickr";
 export type CardColor = "turquoise" | "green" | "yellow" | "blue";
-export type CardSize = "wide" | "standard" | "narrow";
-export type CardCornerType = "cornercut" | "corner";
+export type CardSize = "wide" | "standard" | "narrow" | "fluid";
+export type CardCornerType = boolean;
 export type CardAlignment = "left" | "right";
-export type CardTypes = "stat" | "multilink" | "graphic" | "graphicpromo" | "feature" | "detail" | "factlist" | "data";
+export type CardTypes = "stat" | "multilink" | "text" | "promo" | "feature" | "detail" | "factlist" | "data";
 export interface FormFieldProps<T> {
     /**
      * The input's onChange callback.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/react",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "React components for the ILO's Design System",
   "keywords": [
     "ui_patterns",
@@ -77,8 +77,8 @@
     "videojs-youtube": "^3.0.1",
     "@ilo-org/brand-assets": "0.4.0",
     "@ilo-org/fonts": "0.1.2",
+    "@ilo-org/styles": "0.14.2",
     "@ilo-org/icons-react": "0.0.21",
-    "@ilo-org/styles": "0.14.1",
     "@ilo-org/themes": "0.7.2",
     "@ilo-org/utils": "0.0.11"
   },