@arc-ui/components 10.8.0 → 10.8.1

package/dist/_shared/esm/Button-d59c31a2.d.ts

@@ -0,0 +1,98 @@
+/// <reference types="react" />
+import { icons } from "@arc-ui/tokens";
+import React from "react";
+import { FC } from "react";
+type ElementUnion = HTMLButtonElement | HTMLAnchorElement;
+type Ref = React.Ref<ElementUnion> | null;
+/**
+ * Use `Button` to allow users to take actions with clicks and taps.
+ */
+declare const Button: FC<ButtonProps>;
+interface ButtonIconProps {
+    /**
+     * Icon variant.
+     */
+    icon?: typeof icons[number];
+    /**
+     * Should the icon be a default chevron?
+     */
+    isChevron?: boolean;
+    /**
+     * Should the icon be positioned before button text?
+     */
+    isBeforeText?: boolean;
+}
+interface ButtonElementProps {
+    /**
+     * Default behavior of the Button element. If not provided, 'submit' will
+     * be inferred. Type 'reset' deliberately excluded.
+     */
+    type?: "button" | "submit";
+}
+interface LinkElementProps {
+    /**
+     * URL to link to if Button elementType is 'a'.
+     */
+    href?: string;
+    /**
+     * Target window for the Button href URL.
+     */
+    target?: string;
+    /**
+     * Relationship between the Button href URL and the current page. See
+     * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).
+     */
+    rel?: string;
+}
+interface ButtonProps extends ButtonElementProps, LinkElementProps {
+    /**
+     * Text to override `label` with additional, more precise information
+     * specifically for screen reader users.
+     */
+    ariaLabel?: string;
+    /**
+     * Button fill.
+     */
+    fill?: "solid" | "outlined" | "flat";
+    /**
+     * Button icon variant.
+     */
+    icon?: typeof icons[number];
+    /**
+     * How should a Button icon be displayed?
+     */
+    iconPosition?: "afterText" | "beforeText" | "iconOnly";
+    /**
+     * HTML ID for the Button
+     */
+    id?: string;
+    /**
+     * Should the Button be disabled?
+     */
+    isDisabled?: boolean;
+    /**
+     * Should the Button’s CSS display property be set to block?
+     */
+    isDisplayBlock?: boolean;
+    /**
+     * Should the Button take up the full width of its container?
+     */
+    isFullWidth?: boolean;
+    /**
+     * Button text.
+     */
+    label: string;
+    /**
+     * Optional click handler for the Button.
+     */
+    onClick?: () => void;
+    /**
+     * Optional property to provide component Ref
+     */
+    ref?: Ref;
+    /**
+     * Optional supporting text for the Button.
+     */
+    supportingText?: string;
+}
+export { ElementUnion, Ref, Button, ButtonIconProps, ButtonProps };

package/dist/_shared/{Button-2fcbd4ed.js → esm/Button-d59c31a2.js}

@@ -1,9 +1,9 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-e3c83626.js';
-import { c as classNames } from './index-56d9df62.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-229fc864.js';
+import { c as classNames } from './index-2ae58626.js';
 import React, { forwardRef, useContext } from 'react';
-import { s as suffixModifier } from './suffix-modifier-2a93822c.js';
-import { I as Icon } from './Icon-b053f03d.js';
-import { C as Context } from './Surface-3fe44a2a.js';
+import { s as suffixModifier } from './suffix-modifier-f5e28822.js';
+import { I as Icon } from './Icon-2fd92daa.js';
+import { C as Context } from './Surface-d515d212.js';
 
 /**
  * Use `Button` to allow users to take actions with clicks and taps.

package/dist/_shared/esm/Curve-cfdca379.d.ts

@@ -0,0 +1,32 @@
+import { FC } from "react";
+import { backgroundsBT } from "../../Surface/Surface.esm";
+/**
+ * Use `Curve` sparingly to soften edges and create a more natural, less rigid
+ * look and feel.
+ */
+declare const Curve: FC<CurveProps>;
+declare const sizes: readonly ["s", "m", "l"];
+declare const positions: readonly ["bottom", "bottomLeft", "bottomRight", "top", "topLeft", "topRight"];
+interface CurveProps {
+    /**
+     * Bottom color of the Curve. Shares values with Surface.
+     */
+    bottomColor?: typeof backgroundsBT[number];
+    /**
+     * Positional variants of the Curve.
+     */
+    from?: typeof positions[number];
+    /**
+     * Should the Curve colors be flipped? Normally used at the top of Poster.
+     */
+    isInverted?: boolean;
+    /**
+     * Size of the Curve.
+     */
+    size?: typeof sizes[number];
+    /**
+     * Top color of the Curve. Shares values with Surface.
+     */
+    topColor?: typeof backgroundsBT[number];
+}
+export { Curve, sizes, positions, CurveProps };

package/dist/_shared/{Curve-5f476d0b.js → esm/Curve-cfdca379.js}

@@ -1,7 +1,7 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-e3c83626.js';
-import { c as classNames } from './index-56d9df62.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-229fc864.js';
+import { c as classNames } from './index-2ae58626.js';
 import React from 'react';
-import { s as suffixModifier } from './suffix-modifier-2a93822c.js';
+import { s as suffixModifier } from './suffix-modifier-f5e28822.js';
 
 /**
  * Use `Curve` sparingly to soften edges and create a more natural, less rigid

package/dist/_shared/esm/FormControl-33194106.d.ts

@@ -0,0 +1,70 @@
+/// <reference types="react" />
+import React from "react";
+import { FC } from "react";
+/**
+ * Optionally define ariaDescribedBy if errorMessage or helper exist.
+ */
+declare const useAriaDescribedby: ({ id, idError, idHelper, errorMessage, helper }: {
+    id?: string | undefined;
+    idError?: string | undefined;
+    idHelper?: string | undefined;
+    errorMessage?: any;
+    helper?: any;
+}) => {
+    ariaDescribedby: undefined;
+    idHelper: undefined;
+    idError: undefined;
+} | {
+    ariaDescribedby: string | undefined;
+    idError: string;
+    idHelper: string;
+};
+type RequirementStatus = "required" | "optional" | "not-applicable";
+declare const Context: React.Context<{
+    requirementStatus: RequirementStatus | null;
+}>;
+/**
+ * Use `FormControl` to provide inputs with labels, helper text and error messages
+ */
+declare const FormControl: FC<FormControlProps>;
+interface FormControlProps {
+    /**
+     * Render the input or series of inputs
+     */
+    children: React.ReactNode;
+    /**
+     * HTML Element type for the FormControl.
+     * @default 'div'
+     */
+    elementType?: "div" | "fieldset";
+    /**
+     * Error message for the FormControl.
+     */
+    errorMessage?: string;
+    /**
+     * Helper text for the FormControl, shown below the label.
+     */
+    helper?: React.ReactNode;
+    /**
+     * ID for the input that the FormControl points towards.
+     */
+    htmlFor?: string;
+    /**
+     * ID for the FormControl. Used for helper and errorMessage if `htmlFor` is undefined.
+     */
+    id?: string;
+    /**
+     * Are all of the inputs in the FormControl required, optional, or is a
+     * uniform requirement status for all inputs not applicable?
+     */
+    requirementStatus?: RequirementStatus;
+    /**
+     * Label for the FormControl.
+     */
+    label: string;
+    /**
+     * Label size.
+     */
+    labelSize?: "s" | "l";
+}
+export { useAriaDescribedby, FormControl, FormControlProps, Context as FormControlContext };

package/dist/_shared/{FormControl-9dc9ecc3.js → esm/FormControl-33194106.js}

@@ -1,7 +1,7 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-e3c83626.js';
-import { c as classNames } from './index-56d9df62.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-229fc864.js';
+import { c as classNames } from './index-2ae58626.js';
 import React, { createContext, useContext } from 'react';
-import { C as Context$1 } from './Surface-3fe44a2a.js';
+import { C as Context$1 } from './Surface-d515d212.js';
 
 /**
  * Optionally define ariaDescribedBy if errorMessage or helper exist.

package/dist/_shared/esm/Heading-183be76c.d.ts

@@ -0,0 +1,46 @@
+import { FC, ReactNode } from "react";
+/**
+ * Use `Heading` to display heading text.
+ */
+declare const Heading: FC<HeadingProps> & {
+    Proposition: typeof HeadingProposition;
+};
+declare const HeadingProposition: FC<HeadingPropositionProps>;
+interface HeadingPropositionProps {
+    /**
+     * Text to display in the Proposition.
+     */
+    children: ReactNode;
+}
+type HeadingCasing = "auto" | "none";
+type HeadingColor = "auto" | "brand";
+type HeadingLevel = "1" | "2" | "3" | "4" | "5" | "6";
+type HeadingSize = "xxxs" | "xxs" | "xs" | "s" | "m" | "l" | "xl" | "xxl" | "xxxl";
+interface HeadingProps {
+    /**
+     * Text alignment of the Heading.
+     */
+    align?: "left" | "center" | "right";
+    /**
+     * Typographic casing of the Heading.
+     */
+    casing?: HeadingCasing;
+    /**
+     * Text and inline markup to display in the Heading.
+     */
+    children: ReactNode;
+    /**
+     * The color of the Heading.
+     */
+    color?: HeadingColor;
+    /**
+     * HTML section heading level. If not provided, the Heading will render as
+     * a span.
+     */
+    level?: HeadingLevel;
+    /**
+     * Typographic size of the Heading.
+     */
+    size?: HeadingSize;
+}
+export { Heading, HeadingProposition, HeadingPropositionProps, HeadingCasing, HeadingColor, HeadingLevel, HeadingSize, HeadingProps };

package/dist/_shared/{Heading-8c640dd1.js → esm/Heading-183be76c.js}

@@ -1,8 +1,8 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-e3c83626.js';
-import { c as classNames } from './index-56d9df62.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-229fc864.js';
+import { c as classNames } from './index-2ae58626.js';
 import React, { useContext } from 'react';
-import { s as suffixModifier } from './suffix-modifier-2a93822c.js';
-import { C as Context } from './Surface-3fe44a2a.js';
+import { s as suffixModifier } from './suffix-modifier-f5e28822.js';
+import { C as Context } from './Surface-d515d212.js';
 
 /**
  * Use `Heading` to display heading text.

package/dist/_shared/esm/Icon-2fd92daa.d.ts

@@ -0,0 +1,34 @@
+import { icons } from "@arc-ui/tokens";
+import { FC } from "react";
+/**
+ * Use `Icon` to display brand iconography.
+ */
+declare const Icon: FC<IconProps>;
+declare const colors: readonly ["auto", "brand", "statusRed", "statusAmber", "statusGreen"];
+interface IconProps {
+    /**
+     * Color of the Icon.
+     */
+    color?: typeof colors[number];
+    /**
+     * Should the Icon component be styled as an inline element?
+     */
+    isInline?: boolean;
+    /**
+     * Should a selected variant of the Icon be shown?
+     */
+    isSelected?: boolean;
+    /**
+     * Icon variant.
+     */
+    icon?: typeof icons[number];
+    /**
+     * Alternative text label for the Icon.
+     */
+    label?: string;
+    /**
+     * Size of the Icon, in pixels.
+     */
+    size?: number;
+}
+export { Icon, colors, IconProps };

package/dist/_shared/{Icon-b053f03d.js → esm/Icon-2fd92daa.js}

@@ -1,9 +1,9 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-e3c83626.js';
-import { i as iconsSelected } from './index.es-ff960629.js';
-import { c as classNames } from './index-56d9df62.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-229fc864.js';
+import { i as iconsSelected } from './index.es-42f84e2d.js';
+import { c as classNames } from './index-2ae58626.js';
 import React, { useContext } from 'react';
-import { s as suffixModifier } from './suffix-modifier-2a93822c.js';
-import { C as Context } from './Surface-3fe44a2a.js';
+import { s as suffixModifier } from './suffix-modifier-f5e28822.js';
+import { C as Context } from './Surface-d515d212.js';
 
 /**
  * Use `Icon` to display brand iconography.

package/dist/_shared/esm/Image-7e4948f6.d.ts

@@ -0,0 +1,94 @@
+import { FC, HTMLAttributes, ReactNode } from "react";
+import { anchorPoints } from "./index-9483ad5f";
+/**
+ * Use `Image` to render a single image, or set of images, with support for
+ * image fitting and art direction.
+ */
+declare const Image: FC<ImageProps> & {
+    Source: typeof ImageSource;
+};
+declare const ImageSource: FC<ImageSourceProps>;
+interface ImageSourceProps {
+    /**
+     * The intrinsic height of the ImageSource, in pixels
+     */
+    height?: number;
+    /**
+     * Media condition (similar to a media query) that the user agent will evaluate for each ImageSource element. Same format as [media](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attr-media), i.e. `(min-width: 600px)`
+     */
+    media?: string;
+    /**
+     * The HTML [sizes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attr-sizes) attribute. Only required if srcSet is switching widths.
+     */
+    sizes?: string;
+    /**
+     * A comma-separated list indicating a set of possible sources for the user agent to use for different screen sizes for the ImageSource element. Same format as [srcSet](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attr-srcset), i.e. `my-image-200.png 200w, my-image-200.png 200w`.
+     */
+    srcSet: string;
+    /**
+     * MIME type for the resource URL(s) in the ImageSource element's srcset attribute. If the user agent does not support the given type, the element is skipped. Same format as [type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attr-type), i.e. `image/jpeg`.
+     */
+    type?: string;
+    /**
+     * The intrinsic width of the ImageSource, in pixels
+     */
+    width?: number;
+}
+declare const fitOptions: readonly ["cover"];
+declare const loadingOptions: readonly ["eager", "lazy"];
+declare const overlayOptions: readonly ["scrimBottomDark"];
+interface ImageProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Alternative text for the Image, shown if the image cannot be displayed.
+     */
+    alt?: string;
+    /**
+     * Anchor point for the Image if using fit="cover".
+     */
+    anchor?: typeof anchorPoints[number];
+    /**
+     * Optionally enable HTML <picture> functionality by passing `Image.Source`
+     * components as children.
+     */
+    children?: ReactNode;
+    /**
+     * Fallback hexadecimal fill color. The intent is to increase perceived loading speed. Do not use on images with transparency. Requires that an explicit width and height be set for the image.
+     */
+    fillColor?: string;
+    /**
+     * Fit of the Image.
+     */
+    fit?: typeof fitOptions[number];
+    /**
+     * Height dimension of the Image, in pixels. If fit="cover", the height in which
+     * to fit the Image. Otherwise, the intrinsic height of the Image element.
+     */
+    height?: number;
+    /**
+     * Loading behaviour of the Image.
+     */
+    loading?: typeof loadingOptions[number];
+    /**
+     * Apply an overlay to the Image, e.g. a scrim gradient for text legibility.
+     * Should not be used if the image has a rasterized overlay.
+     */
+    overlay?: typeof overlayOptions[number];
+    /**
+     * The HTML [sizes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Example_4_Using_the_srcset_and_sizes_attributes) attribute. Only required if srcSet is switching widths. Ignored if `children` (<source> elements) are present.
+     */
+    sizes?: string;
+    /**
+     * Image `src`. Used if srcSet is not defined, or as a fallback.
+     */
+    src: string;
+    /**
+     * A comma-separated list indicating a set of possible sources for the user agent to use for different screen sizes for the Image. Same format as [srcSet](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Example_4_Using_the_srcset_and_sizes_attributes), i.e. `my-image-200.png 200w, my-image-200.png 200w`. Ignored if `children` (<source> elements) are present.
+     */
+    srcSet?: string;
+    /**
+     * Width dimension of the Image, in pixels. If fit="cover", the width in which
+     * to fit the Image. Otherwise, the intrinsic width of the Image element.
+     */
+    width?: number;
+}
+export { Image, ImageSource, ImageSourceProps, fitOptions, loadingOptions, overlayOptions, ImageProps };

package/dist/_shared/{Image-a3225049.js → esm/Image-7e4948f6.js}

@@ -1,7 +1,7 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-e3c83626.js';
-import { c as classNames } from './index-56d9df62.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-229fc864.js';
+import { c as classNames } from './index-2ae58626.js';
 import React, { useEffect } from 'react';
-import { s as suffixModifier } from './suffix-modifier-2a93822c.js';
+import { s as suffixModifier } from './suffix-modifier-f5e28822.js';
 
 /**
  * Use `Image` to render a single image, or set of images, with support for

package/dist/_shared/esm/Section-f1256c87.d.ts

@@ -0,0 +1,21 @@
+import { FC, ReactNode } from "react";
+/**
+ * Use `Section` to compose content into vertical page layouts.
+ */
+declare const Section: FC<SectionProps>;
+interface SectionProps {
+    /**
+     * Content to display in the Section.
+     */
+    children: ReactNode;
+    /**
+     * Should the Section be visible for debugging and documentation
+     * purposes?
+     */
+    isDebugVisible?: boolean;
+    /**
+     * Should the width of this Section be unconstrained (filling the viewport)?
+     */
+    isFullWidth?: boolean;
+}
+export { Section, SectionProps };

package/dist/_shared/{Section-927988cb.js → esm/Section-f1256c87.js}

@@ -1,5 +1,5 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-e3c83626.js';
-import { c as classNames } from './index-56d9df62.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-229fc864.js';
+import { c as classNames } from './index-2ae58626.js';
 import React from 'react';
 
 /**

package/dist/_shared/esm/Surface-d515d212.d.ts

@@ -0,0 +1,50 @@
+/// <reference types="react" />
+import React from "react";
+import { FC, HTMLAttributes } from "react";
+type SurfaceBackground = "light" | "dark";
+declare const Context: React.Context<{
+    surface: SurfaceBackground;
+}>;
+/**
+ * Use `Surface` to compose content using the Arc system.
+ */
+declare const Surface: FC<SurfaceProps>;
+declare const backgrounds: readonly ["black", "brand", "brand-flat", "dark", "darker", "coral", "turquoise", "light", "lighter", "white"];
+declare const backgroundsBT: readonly ["black", "brand", "brand-flat", "dark", "darker", "coral", "turquoise", "light", "lighter", "white"];
+type SurfacePadding = "8" | "12" | "16" | "24" | "32" | "48" | "64";
+interface SurfaceProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Background colour of the Surface. Contents will change colour to meet
+     * accessibility requirements.
+     */
+    background?: typeof backgrounds[number];
+    /**
+     * Content to display on the Surface.
+     */
+    children?: any;
+    /**
+     * Should the Surface grow to take up all the available vertical space? Most
+     * of the time this should not be required, but useful to fix issues in
+     * certain layout combinations.
+     */
+    growVertically?: boolean;
+    /**
+     * _Caution: This is an experimental property and may be removed at any time._
+     *
+     * Size of the padding applied to all sides of the Surface. Use to prevent margin collapsing issues.
+     */
+    padding?: SurfacePadding;
+    /**
+     * _Caution: This is an experimental property and may be removed at any time._
+     *
+     * Size of the horizontal padding applied to the left and right of the Surface.
+     */
+    paddingHorizontal?: SurfacePadding;
+    /**
+     * _Caution: This is an experimental property and may be removed at any time._
+     *
+     * Size of the vertical padding applied to the top and bottom of the Surface.
+     */
+    paddingVertical?: SurfacePadding;
+}
+export { Surface, backgrounds, backgroundsBT, SurfacePadding, SurfaceProps, Context as SurfaceContext };

package/dist/_shared/{Surface-3fe44a2a.js → esm/Surface-d515d212.js}

@@ -1,5 +1,5 @@
-import { b as __spreadArray, _ as __rest, a as __assign, c as camelCase, f as filterDataAttrs } from './index-e3c83626.js';
-import { c as classNames } from './index-56d9df62.js';
+import { b as __spreadArray, _ as __rest, a as __assign, c as camelCase, f as filterDataAttrs } from './index-229fc864.js';
+import { c as classNames } from './index-2ae58626.js';
 import React, { createContext } from 'react';
 
 var defaultContext = { surface: "light" };

package/dist/_shared/esm/Text-d8988620.d.ts

@@ -0,0 +1,34 @@
+import { FC, ReactNode } from "react";
+/**
+ * Use `Text` to display text.
+ */
+declare const Text: FC<TextProps>;
+type Tone = "default" | "supporting" | "muted";
+type TextSize = "xs" | "s" | "m" | "l";
+interface TextProps {
+    /**
+     * Alignment of the Text.
+     */
+    align?: "left" | "center" | "right";
+    /**
+     * Text and inline markup to display.
+     */
+    children: ReactNode;
+    /**
+     * Should the Text component be styled as an inline element?
+     */
+    isInline?: boolean;
+    /**
+     * Should the Text width be constrained to a typographic measure?
+     */
+    isMeasured?: boolean;
+    /**
+     * Typographic Text size.
+     */
+    size?: TextSize;
+    /**
+     * Visual emphasis of the Text.
+     */
+    tone?: Tone;
+}
+export { Text, Tone, TextSize, TextProps };

package/dist/_shared/{Text-1c43d82b.js → esm/Text-d8988620.js}

@@ -1,8 +1,8 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-e3c83626.js';
-import { c as classNames } from './index-56d9df62.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-229fc864.js';
+import { c as classNames } from './index-2ae58626.js';
 import React, { useContext } from 'react';
-import { s as suffixModifier } from './suffix-modifier-2a93822c.js';
-import { C as Context } from './Surface-3fe44a2a.js';
+import { s as suffixModifier } from './suffix-modifier-f5e28822.js';
+import { C as Context } from './Surface-d515d212.js';
 
 /**
  * Use `Text` to display text.

package/dist/_shared/esm/handle-link-click-f64f55a2.d.ts

@@ -0,0 +1,7 @@
+import { MouseEvent } from "react";
+interface IHandleLinkClick {
+    handler?: () => void;
+    preventDefault?: boolean;
+}
+declare const handleLinkClick: ({ handler, preventDefault }: IHandleLinkClick) => (e: MouseEvent<HTMLAnchorElement>) => void;
+export { handleLinkClick };

package/dist/_shared/esm/index-229fc864.d.ts

@@ -0,0 +1,2 @@
+declare const filterDataAttrs: (props: Object) => {};
+export { filterDataAttrs };

package/dist/_shared/esm/index-9483ad5f.d.ts

@@ -0,0 +1,14 @@
+declare const anchorPoints: readonly [
+    "N",
+    "NE",
+    "E",
+    "SE",
+    "S",
+    "SW",
+    "W",
+    "NW",
+    "C"
+];
+export { anchorPoints };
+export * from "./index-229fc864";
+export * from "./suffix-modifier-f5e28822";

package/dist/_shared/esm/index-c81c9401.d.ts

@@ -0,0 +1,4 @@
+export * from "./FormControl-33194106";
+export * from "../../Card/Card.esm";
+export * from "./use-media-query-38faed7f";
+export * from "../../TextInput/TextInput.esm";

package/dist/_shared/esm/suffix-modifier-f5e28822.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Suffixes a modifier value onto the end of a className, converting it to
+ * pascal case. i.e. turns suffixModifier("MyComponent--display", display)
+ * returns MyComponent--displayBlock.
+ *
+ * @param rootClassName The root className to append the suffix onto
+ * @param suffix The suffix to convert into pascal case.
+ */
+declare const suffixModifier: (rootClassName: string, suffix: string) => string;
+export { suffixModifier };

package/dist/_shared/{suffix-modifier-2a93822c.js → esm/suffix-modifier-f5e28822.js}

@@ -1,4 +1,4 @@
-import { c as camelCase } from './index-e3c83626.js';
+import { c as camelCase } from './index-229fc864.js';
 
 /**
  * Suffixes a modifier value onto the end of a className, converting it to