@primer/react-brand 0.72.0 → 0.72.1-rc.8a8dc720

package/esm/index.esm.js

@@ -53,28 +53,28 @@ import { OrderedList as kt } from "./list/OrderedList/OrderedList.js";
 import { CTAForm as At } from "./CTAForm/CTAForm.js";
 import { MinimalFooter as jt } from "./MinimalFooter/MinimalFooter.js";
 import { Pillar as Mt, defaultPillarIconColor as Nt, defaultPillarIconSize as Pt } from "./Pillar/Pillar.js";
-import { Card as Ft, CardBackgroundColors as It, CardCTAVariants as Lt, CardIconColors as Rt, CardLabelVariants as zt, CardTokenPositions as Bt, CardVariants as Vt, defaultCardCTAVariant as Ht, defaultCardIconColor as Ut, defaultCardLabelVariant as Wt } from "./Card/Card.js";
-import { CardSkewEffect as Gt } from "./Card/CardSkewEffect.js";
-import { SectionIntro as Kt } from "./SectionIntro/SectionIntro.js";
-import { Prose as qt } from "./Prose/Prose.js";
-import { useVideo as Jt } from "./VideoPlayer/hooks/useVideo.js";
-import { VideoPlayer as Yt } from "./VideoPlayer/VideoPlayer.js";
-import { LogoSuite as Xt } from "./LogoSuite/LogoSuite.js";
-import { Timeline as Zt } from "./Timeline/Timeline.js";
-import { Bento as Qt } from "./Bento/Bento.js";
-import { EyebrowBanner as $t, EyebrowBannerIconColors as en, EyebrowBannerLabelColors as tn, defaultEyebrowBannerIconColor as nn } from "./EyebrowBanner/EyebrowBanner.js";
-import { Tooltip as rn, TooltipContext as an } from "./Tooltip/Tooltip.js";
-import { PricingOptions as on } from "./PricingOptions/PricingOptions.js";
-import { SubNav as sn, SubNavSubMenuVariants as cn, useSubNavContext as ln } from "./SubNav/SubNav.js";
-import { NavList as un } from "./NavList/NavList.js";
-import { IDE as dn, IDEDefaultIconMap as fn, IDEFileExtensions as pn } from "./IDE/IDE.js";
-import { BreadcrumbVariants as mn, Breadcrumbs as hn } from "./Breadcrumbs/Breadcrumbs.js";
-import { Section as gn, SectionBackgroundColors as _n, SectionPaddingVariants as vn } from "./Section/Section.js";
-import { Statistic as yn, StatisticSizes as bn, StatisticSpacingValues as xn } from "./Statistic/Statistic.js";
-import { BreakoutBanner as Sn, BreakoutBannerBackgroundColors as Cn } from "./BreakoutBanner/BreakoutBanner.js";
-import { Footnotes as wn, FootnotesItemTags as Tn, FootnotesTags as En } from "./Footnotes/Footnotes.js";
-import { FrostedGlassVFX as Dn, FrostedGlassVFXIntensity as On, defaultFrostedGlassVFXIntensity as kn } from "./FrostedGlassVFX/FrostedGlassVFX.js";
-import { SectionIntroStacked as An, SectionIntroStackedVariants as jn } from "./SectionIntroStacked/SectionIntroStacked.js";
-import { Tabs as Mn } from "./Tabs/Tabs.js";
-import { Tiles as Nn } from "./Tiles/Tiles.js";
-export { Ze as Accordion, Qe as AccordionContent, $e as AccordionHeading, et as AccordionRoot, tt as AccordionToggleColors, ne as ActionMenu, re as ActionMenuButtonModes, ie as ActionMenuProvider, ae as ActionMenuSizes, Tt as AnchorNav, a as Animate, n as AnimationContext, r as AnimationProvider, i as AnimationVariants, ht as Avatar, gt as AvatarShapes, _t as AvatarSizes, Qt as Bento, g as Box, _ as BoxBackgroundColors, v as BoxBorderColorOptions, y as BoxBorderRadiusOptions, b as BoxBorderWidthOptions, x as BoxSpacingValues, mn as BreadcrumbVariants, hn as Breadcrumbs, Sn as BreakoutBanner, Cn as BreakoutBannerBackgroundColors, ze as BreakpointSize, K as Button, ce as ButtonGroup, q as ButtonSizes, J as ButtonVariants, Et as CTABanner, Dt as CTABannerBackgroundColors, At as CTAForm, Ft as Card, It as CardBackgroundColors, Lt as CardCTAVariants, Rt as CardIconColors, zt as CardLabelVariants, Gt as CardSkewEffect, Bt as CardTokenPositions, Vt as CardVariants, it as Checkbox, pt as CheckboxGroup, Q as ColorModesEnum, Ct as ComparisonTable, at as DEFAULT_TEXTAREA_COLS, ot as DEFAULT_TEXTAREA_RESIZE, st as DEFAULT_TEXTAREA_ROWS, $t as EyebrowBanner, en as EyebrowBannerIconColors, tn as EyebrowBannerLabelColors, M as EyebrowText, N as EyebrowTextVariants, nt as FAQ, rt as FAQGroup, wn as Footnotes, Tn as FootnotesItemTags, En as FootnotesTags, ft as FormControl, Dn as FrostedGlassVFX, On as FrostedGlassVFXIntensity, t as Grid, I as Heading, L as HeadingFontVariants, R as HeadingLetterSpacing, z as HeadingSizes, B as HeadingStretch, V as HeadingTags, H as HeadingWeights, de as Hero, dn as IDE, fn as IDEDefaultIconMap, pn as IDEFileExtensions, je as Icon, le as Image, ue as ImageBorderRadiusOptions, qe as InlineLink, ve as Label, ye as LabelColors, be as LabelSizes, me as Link, he as LinkArrowDirections, ge as LinkSizes, _e as LinkVariants, Xt as LogoSuite, We as MediaPlaylist, jt as MinimalFooter, un as NavList, kt as OrderedList, Ue as Pagination, Mt as Pillar, on as PricingOptions, qt as Prose, dt as Radio, mt as RadioGroup, Ce as River, fe as RiverAccordion, pe as RiverAccordionVariants, ke as RiverBreakout, Ve as RiverBreakoutTabs, Ae as RiverBreakoutVariants, He as RiverStoryScroll, we as RiverVisualPaddingOptions, Te as RiverVisualPositionOptions, gn as Section, _n as SectionBackgroundColors, Kt as SectionIntro, An as SectionIntroStacked, jn as SectionIntroStackedVariants, vn as SectionPaddingVariants, ut as Select, c as Stack, l as StackAlignItemVariants, u as StackDirectionVariants, d as StackFlexWrapVariants, f as StackJustifyContentVariants, p as StackSpacingVariants, yn as Statistic, bn as StatisticSizes, xn as StatisticSpacingValues, sn as SubNav, cn as SubNavSubMenuVariants, Ke as SubdomainNavBar, Mn as Tabs, vt as Testimonial, yt as TestimonialQuoteMarkColors, bt as TestimonialVariants, S as Text, P as TextCursorAnimation, C as TextFontVariants, lt as TextInput, s as TextRevealAnimation, w as TextSizes, T as TextTags, E as TextVariants, D as TextWeights, ct as Textarea, $ as ThemeContext, ee as ThemeProvider, Nn as Tiles, Zt as Timeline, Je as Token, Ye as TokenVariants, rn as Tooltip, an as TooltipContext, Ot as UnorderedList, Yt as VideoPlayer, Y as _Button, wt as _ComparisonTable, e as _GLOBAL_STYLES, oe as actionMenuOverlaySides, U as classMap, X as defaultButtonSize, Z as defaultButtonVariant, Ht as defaultCardCTAVariant, Ut as defaultCardIconColor, Wt as defaultCardLabelVariant, nn as defaultEyebrowBannerIconColor, O as defaultFontVariant, kn as defaultFrostedGlassVFXIntensity, W as defaultHeadingFont, G as defaultHeadingTag, Me as defaultIconColor, Ne as defaultIconSize, xe as defaultLabelColor, Se as defaultLabelSize, Nt as defaultPillarIconColor, Pt as defaultPillarIconSize, xt as defaultQuoteMarkColor, Ee as defaultRiverAlign, De as defaultRiverImageTextRatio, Oe as defaultRiverVariant, m as defaultStackDirection, h as defaultStackSpacing, St as defaultTestimonialVariant, k as defaultTextSize, A as defaultTextTag, j as defaultTextVariant, Xe as defaultTokenVariant, Pe as iconColors, Fe as iconSizeMap, Ie as iconSizes, Le as namedIconSizes, Re as numericIconSizes, F as testIds, se as useActionMenuContext, o as useAnimation, Ge as useFocusTrap, ln as useSubNavContext, te as useTheme, Jt as useVideo, Be as useWindowSize };
+import { Card as Ft, CardBackgroundColors as It, CardCTAVariants as Lt, CardIconColors as Rt, CardImagePaddingOptions as zt, CardLabelVariants as Bt, CardTokenPositions as Vt, CardVariants as Ht, defaultCardCTAVariant as Ut, defaultCardIconColor as Wt, defaultCardLabelVariant as Gt } from "./Card/Card.js";
+import { CardSkewEffect as Kt } from "./Card/CardSkewEffect.js";
+import { SectionIntro as qt } from "./SectionIntro/SectionIntro.js";
+import { Prose as Jt } from "./Prose/Prose.js";
+import { useVideo as Yt } from "./VideoPlayer/hooks/useVideo.js";
+import { VideoPlayer as Xt } from "./VideoPlayer/VideoPlayer.js";
+import { LogoSuite as Zt } from "./LogoSuite/LogoSuite.js";
+import { Timeline as Qt } from "./Timeline/Timeline.js";
+import { Bento as $t } from "./Bento/Bento.js";
+import { EyebrowBanner as en, EyebrowBannerIconColors as tn, EyebrowBannerLabelColors as nn, defaultEyebrowBannerIconColor as rn } from "./EyebrowBanner/EyebrowBanner.js";
+import { Tooltip as an, TooltipContext as on } from "./Tooltip/Tooltip.js";
+import { PricingOptions as sn } from "./PricingOptions/PricingOptions.js";
+import { SubNav as cn, SubNavSubMenuVariants as ln, useSubNavContext as un } from "./SubNav/SubNav.js";
+import { NavList as dn } from "./NavList/NavList.js";
+import { IDE as fn, IDEDefaultIconMap as pn, IDEFileExtensions as mn } from "./IDE/IDE.js";
+import { BreadcrumbVariants as hn, Breadcrumbs as gn } from "./Breadcrumbs/Breadcrumbs.js";
+import { Section as _n, SectionBackgroundColors as vn, SectionPaddingVariants as yn } from "./Section/Section.js";
+import { Statistic as bn, StatisticSizes as xn, StatisticSpacingValues as Sn } from "./Statistic/Statistic.js";
+import { BreakoutBanner as Cn, BreakoutBannerBackgroundColors as wn } from "./BreakoutBanner/BreakoutBanner.js";
+import { Footnotes as Tn, FootnotesItemTags as En, FootnotesTags as Dn } from "./Footnotes/Footnotes.js";
+import { FrostedGlassVFX as On, FrostedGlassVFXIntensity as kn, defaultFrostedGlassVFXIntensity as An } from "./FrostedGlassVFX/FrostedGlassVFX.js";
+import { SectionIntroStacked as jn, SectionIntroStackedVariants as Mn } from "./SectionIntroStacked/SectionIntroStacked.js";
+import { Tabs as Nn } from "./Tabs/Tabs.js";
+import { Tiles as Pn } from "./Tiles/Tiles.js";
+export { Ze as Accordion, Qe as AccordionContent, $e as AccordionHeading, et as AccordionRoot, tt as AccordionToggleColors, ne as ActionMenu, re as ActionMenuButtonModes, ie as ActionMenuProvider, ae as ActionMenuSizes, Tt as AnchorNav, a as Animate, n as AnimationContext, r as AnimationProvider, i as AnimationVariants, ht as Avatar, gt as AvatarShapes, _t as AvatarSizes, $t as Bento, g as Box, _ as BoxBackgroundColors, v as BoxBorderColorOptions, y as BoxBorderRadiusOptions, b as BoxBorderWidthOptions, x as BoxSpacingValues, hn as BreadcrumbVariants, gn as Breadcrumbs, Cn as BreakoutBanner, wn as BreakoutBannerBackgroundColors, ze as BreakpointSize, K as Button, ce as ButtonGroup, q as ButtonSizes, J as ButtonVariants, Et as CTABanner, Dt as CTABannerBackgroundColors, At as CTAForm, Ft as Card, It as CardBackgroundColors, Lt as CardCTAVariants, Rt as CardIconColors, zt as CardImagePaddingOptions, Bt as CardLabelVariants, Kt as CardSkewEffect, Vt as CardTokenPositions, Ht as CardVariants, it as Checkbox, pt as CheckboxGroup, Q as ColorModesEnum, Ct as ComparisonTable, at as DEFAULT_TEXTAREA_COLS, ot as DEFAULT_TEXTAREA_RESIZE, st as DEFAULT_TEXTAREA_ROWS, en as EyebrowBanner, tn as EyebrowBannerIconColors, nn as EyebrowBannerLabelColors, M as EyebrowText, N as EyebrowTextVariants, nt as FAQ, rt as FAQGroup, Tn as Footnotes, En as FootnotesItemTags, Dn as FootnotesTags, ft as FormControl, On as FrostedGlassVFX, kn as FrostedGlassVFXIntensity, t as Grid, I as Heading, L as HeadingFontVariants, R as HeadingLetterSpacing, z as HeadingSizes, B as HeadingStretch, V as HeadingTags, H as HeadingWeights, de as Hero, fn as IDE, pn as IDEDefaultIconMap, mn as IDEFileExtensions, je as Icon, le as Image, ue as ImageBorderRadiusOptions, qe as InlineLink, ve as Label, ye as LabelColors, be as LabelSizes, me as Link, he as LinkArrowDirections, ge as LinkSizes, _e as LinkVariants, Zt as LogoSuite, We as MediaPlaylist, jt as MinimalFooter, dn as NavList, kt as OrderedList, Ue as Pagination, Mt as Pillar, sn as PricingOptions, Jt as Prose, dt as Radio, mt as RadioGroup, Ce as River, fe as RiverAccordion, pe as RiverAccordionVariants, ke as RiverBreakout, Ve as RiverBreakoutTabs, Ae as RiverBreakoutVariants, He as RiverStoryScroll, we as RiverVisualPaddingOptions, Te as RiverVisualPositionOptions, _n as Section, vn as SectionBackgroundColors, qt as SectionIntro, jn as SectionIntroStacked, Mn as SectionIntroStackedVariants, yn as SectionPaddingVariants, ut as Select, c as Stack, l as StackAlignItemVariants, u as StackDirectionVariants, d as StackFlexWrapVariants, f as StackJustifyContentVariants, p as StackSpacingVariants, bn as Statistic, xn as StatisticSizes, Sn as StatisticSpacingValues, cn as SubNav, ln as SubNavSubMenuVariants, Ke as SubdomainNavBar, Nn as Tabs, vt as Testimonial, yt as TestimonialQuoteMarkColors, bt as TestimonialVariants, S as Text, P as TextCursorAnimation, C as TextFontVariants, lt as TextInput, s as TextRevealAnimation, w as TextSizes, T as TextTags, E as TextVariants, D as TextWeights, ct as Textarea, $ as ThemeContext, ee as ThemeProvider, Pn as Tiles, Qt as Timeline, Je as Token, Ye as TokenVariants, an as Tooltip, on as TooltipContext, Ot as UnorderedList, Xt as VideoPlayer, Y as _Button, wt as _ComparisonTable, e as _GLOBAL_STYLES, oe as actionMenuOverlaySides, U as classMap, X as defaultButtonSize, Z as defaultButtonVariant, Ut as defaultCardCTAVariant, Wt as defaultCardIconColor, Gt as defaultCardLabelVariant, rn as defaultEyebrowBannerIconColor, O as defaultFontVariant, An as defaultFrostedGlassVFXIntensity, W as defaultHeadingFont, G as defaultHeadingTag, Me as defaultIconColor, Ne as defaultIconSize, xe as defaultLabelColor, Se as defaultLabelSize, Nt as defaultPillarIconColor, Pt as defaultPillarIconSize, xt as defaultQuoteMarkColor, Ee as defaultRiverAlign, De as defaultRiverImageTextRatio, Oe as defaultRiverVariant, m as defaultStackDirection, h as defaultStackSpacing, St as defaultTestimonialVariant, k as defaultTextSize, A as defaultTextTag, j as defaultTextVariant, Xe as defaultTokenVariant, Pe as iconColors, Fe as iconSizeMap, Ie as iconSizes, Le as namedIconSizes, Re as numericIconSizes, F as testIds, se as useActionMenuContext, o as useAnimation, Ge as useFocusTrap, un as useSubNavContext, te as useTheme, Yt as useVideo, Be as useWindowSize };

package/esm/packages/design-tokens/lib/design-tokens/css/tokens/functional/components/card/base-DgOt50dE.css

@@ -0,0 +1 @@
+:root{--brand-Card-animation-easing:cubic-bezier(.01, .73, .08, .93);--brand-Card-animation-duration:.4s;--brand-Card-padding-inline:var(--base-size-20);--brand-Card-padding-block:var(--base-size-32);--brand-Card-maxWidth:26.25rem}

package/lib/ButtonGroup/ButtonGroup.d.ts

@@ -4,8 +4,9 @@ import { ButtonProps } from '../Button';
 import { ActionMenuProps } from '../ActionMenu';
 export type PrimerBrandButtonType = React.ReactElement<ButtonProps<React.ElementType<'button' | 'a'>>>;
 export type PrimerBrandActionMenuType = React.ReactElement<ActionMenuProps>;
+export type ButtonGroupChild = PrimerBrandButtonType | PrimerBrandActionMenuType | false | null | undefined;
 export type ButtonGroupProps = BaseProps<HTMLDivElement> & {
-    children: Array<PrimerBrandButtonType | PrimerBrandActionMenuType> | PrimerBrandButtonType | PrimerBrandActionMenuType;
+    children: ButtonGroupChild | ButtonGroupChild[];
     buttonSize?: ButtonProps<'button' | 'a'>['size'];
     buttonsAs?: 'button' | 'a';
 };

package/lib/Card/Card.d.ts

@@ -12,6 +12,7 @@ export declare const CardCTAVariants: readonly ["text", "arrow", "none"];
 export declare const CardBackgroundColors: readonly ["default", "subtle", "none"];
 export declare const CardTokenPositions: readonly ["block-start", "block-end"];
 export declare const CardLabelVariants: readonly ["token", "accent-text"];
+export declare const CardImagePaddingOptions: readonly ["default", "none"];
 export declare const CardIconColors: readonly ["default", "blue", "coral", "green", "gray", "indigo", "lemon", "lime", "orange", "pink", "purple", "red", "teal", "yellow"];
 export declare const defaultCardIconColor: "default";
 export declare const defaultCardCTAVariant: "text";
@@ -21,6 +22,7 @@ export type CardCTAVariant = (typeof CardCTAVariants)[number];
 export type CardTokenPosition = (typeof CardTokenPositions)[number];
 export type CardLabelVariant = (typeof CardLabelVariants)[number];
 export type CardBackgroundColor = (typeof CardBackgroundColors)[number];
+export type CardImagePadding = (typeof CardImagePaddingOptions)[number];
 type CardLeadingVisual = React.ReactElement | React.ComponentType<{
     className?: string;
 }>;
@@ -34,7 +36,7 @@ export type CardProps = {
      */
     children: React.ReactNode | React.ReactElement<CardImageProps> | React.ReactElement<CardIconProps> | React.ReactElement<CardLabelProps> | React.ReactElement<CardTokensProps> | React.ReactElement<CardHeadingProps> | React.ReactElement<CardDescriptionProps>;
     /**
-     * Disable the default hover animation
+     * Disable transitions and animations within the Card
      */
     disableAnimation?: boolean;
     /**
@@ -70,10 +72,11 @@ export type CardProps = {
      */
     align?: 'start' | 'center';
 } & Omit<BaseProps<HTMLDivElement>, 'animate'> & Omit<React.ComponentPropsWithoutRef<'div'>, 'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur'> & Pick<React.ComponentPropsWithoutRef<'a'>, 'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur'>;
-type CardImageProps = {
+export type CardImageProps = {
     position?: 'block-start' | 'block-end';
+    padding?: CardImagePadding;
 } & ImageProps;
-declare function CardImage({ className, ...rest }: CardImageProps): import("react/jsx-runtime").JSX.Element;
+declare function CardImage({ className, position, padding, ...rest }: CardImageProps): import("react/jsx-runtime").JSX.Element;
 type CardIconProps = IconProps;
 type CardTokensProps = BaseProps<HTMLDivElement> & {
     children: React.ReactNode | React.ReactNode[];