braid-design-system 32.1.0 → 32.2.0

package/dist/playroom/scope.d.ts

@@ -1,385 +1 @@
-import { ReactElement } from 'react';
-import * as lodash from 'lodash';
-import * as _vanilla_extract_sprinkles from '@vanilla-extract/sprinkles';
-
-type AllOrNone<T> = T | {
-    [K in keyof T]?: never;
-};
-
-type OptionalTitle = AllOrNone<{
-    title: string;
-    titleId: string;
-}>;
-
-declare const breakpointNames: readonly ["mobile", "tablet", "desktop", "wide"];
-declare const breakpoints: {
-    readonly mobile: 0;
-    readonly tablet: 740;
-    readonly desktop: 992;
-    readonly wide: 1200;
-};
-type Breakpoint = keyof typeof breakpoints;
-
-declare const sprinkles: ((props: {
-    readonly overflow?: "hidden" | "scroll" | "visible" | "auto" | undefined;
-    readonly userSelect?: "none" | undefined;
-    readonly outline?: "none" | undefined;
-    readonly opacity?: 0 | undefined;
-    readonly zIndex?: 0 | 2 | 1 | "dropdownBackdrop" | "dropdown" | "sticky" | "modalBackdrop" | "modal" | "notification" | undefined;
-    readonly cursor?: "default" | "pointer" | undefined;
-    readonly pointerEvents?: "none" | undefined;
-    readonly top?: 0 | undefined;
-    readonly bottom?: 0 | undefined;
-    readonly left?: 0 | undefined;
-    readonly right?: 0 | undefined;
-    readonly height?: "touchable" | "full" | undefined;
-    readonly width?: "touchable" | "full" | undefined;
-    readonly minWidth?: 0 | undefined;
-    readonly maxWidth?: "xsmall" | "small" | "medium" | "large" | undefined;
-    readonly transition?: "fast" | "touchable" | undefined;
-    inset?: 0 | undefined;
-} & {
-    readonly display?: (("none" | "flex" | "block" | "inline" | "inlineBlock" | {
-        mobile?: "none" | "flex" | "block" | "inline" | "inlineBlock" | undefined;
-        tablet?: "none" | "flex" | "block" | "inline" | "inlineBlock" | undefined;
-        desktop?: "none" | "flex" | "block" | "inline" | "inlineBlock" | undefined;
-        wide?: "none" | "flex" | "block" | "inline" | "inlineBlock" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "flex" | "block" | "inline" | "inlineBlock" | null>) | undefined;
-    readonly position?: (("relative" | "absolute" | "fixed" | {
-        mobile?: "relative" | "absolute" | "fixed" | undefined;
-        tablet?: "relative" | "absolute" | "fixed" | undefined;
-        desktop?: "relative" | "absolute" | "fixed" | undefined;
-        wide?: "relative" | "absolute" | "fixed" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "relative" | "absolute" | "fixed" | null>) | undefined;
-    readonly borderRadius?: (("large" | "xlarge" | "standard" | "none" | "full" | {
-        mobile?: "large" | "xlarge" | "standard" | "none" | "full" | undefined;
-        tablet?: "large" | "xlarge" | "standard" | "none" | "full" | undefined;
-        desktop?: "large" | "xlarge" | "standard" | "none" | "full" | undefined;
-        wide?: "large" | "xlarge" | "standard" | "none" | "full" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "large" | "xlarge" | "standard" | "none" | "full" | null>) | undefined;
-    readonly paddingTop?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | {
-        mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
-    readonly paddingBottom?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | {
-        mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
-    readonly paddingRight?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | {
-        mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
-    readonly paddingLeft?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | {
-        mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
-    readonly marginTop?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | {
-        mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
-    readonly marginBottom?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | {
-        mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
-    readonly marginRight?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | {
-        mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
-    readonly marginLeft?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | {
-        mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
-    readonly alignItems?: (("center" | "flexStart" | "flexEnd" | {
-        mobile?: "center" | "flexStart" | "flexEnd" | undefined;
-        tablet?: "center" | "flexStart" | "flexEnd" | undefined;
-        desktop?: "center" | "flexStart" | "flexEnd" | undefined;
-        wide?: "center" | "flexStart" | "flexEnd" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "center" | "flexStart" | "flexEnd" | null>) | undefined;
-    readonly justifyContent?: (("center" | "flexStart" | "flexEnd" | "spaceBetween" | {
-        mobile?: "center" | "flexStart" | "flexEnd" | "spaceBetween" | undefined;
-        tablet?: "center" | "flexStart" | "flexEnd" | "spaceBetween" | undefined;
-        desktop?: "center" | "flexStart" | "flexEnd" | "spaceBetween" | undefined;
-        wide?: "center" | "flexStart" | "flexEnd" | "spaceBetween" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "center" | "flexStart" | "flexEnd" | "spaceBetween" | null>) | undefined;
-    readonly flexDirection?: (("row" | "column" | "rowReverse" | "columnReverse" | {
-        mobile?: "row" | "column" | "rowReverse" | "columnReverse" | undefined;
-        tablet?: "row" | "column" | "rowReverse" | "columnReverse" | undefined;
-        desktop?: "row" | "column" | "rowReverse" | "columnReverse" | undefined;
-        wide?: "row" | "column" | "rowReverse" | "columnReverse" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "row" | "column" | "rowReverse" | "columnReverse" | null>) | undefined;
-    readonly flexWrap?: (("wrap" | "nowrap" | {
-        mobile?: "wrap" | "nowrap" | undefined;
-        tablet?: "wrap" | "nowrap" | undefined;
-        desktop?: "wrap" | "nowrap" | undefined;
-        wide?: "wrap" | "nowrap" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "wrap" | "nowrap" | null>) | undefined;
-    readonly flexShrink?: ((0 | {
-        mobile?: 0 | undefined;
-        tablet?: 0 | undefined;
-        desktop?: 0 | undefined;
-        wide?: 0 | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, 0 | null>) | undefined;
-    readonly flexGrow?: ((0 | 1 | {
-        mobile?: 0 | 1 | undefined;
-        tablet?: 0 | 1 | undefined;
-        desktop?: 0 | 1 | undefined;
-        wide?: 0 | 1 | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, 0 | 1 | null>) | undefined;
-    readonly textAlign?: (("left" | "right" | "center" | {
-        mobile?: "left" | "right" | "center" | undefined;
-        tablet?: "left" | "right" | "center" | undefined;
-        desktop?: "left" | "right" | "center" | undefined;
-        wide?: "left" | "right" | "center" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "left" | "right" | "center" | null>) | undefined;
-    padding?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | {
-        mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
-    paddingY?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | {
-        mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
-    paddingX?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | {
-        mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
-    margin?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | {
-        mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
-    marginY?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | {
-        mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
-    marginX?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | {
-        mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
-} & {
-    readonly transform?: {
-        active?: "touchable" | undefined;
-    } | undefined;
-} & {
-    readonly background?: ("brandAccent" | "caution" | "cautionLight" | "critical" | "criticalLight" | "formAccent" | "info" | "infoLight" | "neutral" | "neutralLight" | "positive" | "positiveLight" | "promote" | "promoteLight" | "body" | "bodyDark" | "brand" | "brandAccentActive" | "brandAccentHover" | "brandAccentSoft" | "brandAccentSoftActive" | "brandAccentSoftHover" | "criticalActive" | "criticalHover" | "criticalSoft" | "criticalSoftActive" | "criticalSoftHover" | "formAccentActive" | "formAccentHover" | "formAccentSoft" | "formAccentSoftActive" | "formAccentSoftHover" | "neutralActive" | "neutralHover" | "neutralSoft" | "neutralSoftActive" | "neutralSoftHover" | "surface" | "surfaceDark" | {
-        lightMode?: "brandAccent" | "caution" | "cautionLight" | "critical" | "criticalLight" | "formAccent" | "info" | "infoLight" | "neutral" | "neutralLight" | "positive" | "positiveLight" | "promote" | "promoteLight" | "body" | "bodyDark" | "brand" | "brandAccentActive" | "brandAccentHover" | "brandAccentSoft" | "brandAccentSoftActive" | "brandAccentSoftHover" | "criticalActive" | "criticalHover" | "criticalSoft" | "criticalSoftActive" | "criticalSoftHover" | "formAccentActive" | "formAccentHover" | "formAccentSoft" | "formAccentSoftActive" | "formAccentSoftHover" | "neutralActive" | "neutralHover" | "neutralSoft" | "neutralSoftActive" | "neutralSoftHover" | "surface" | "surfaceDark" | undefined;
-        darkMode?: "brandAccent" | "caution" | "cautionLight" | "critical" | "criticalLight" | "formAccent" | "info" | "infoLight" | "neutral" | "neutralLight" | "positive" | "positiveLight" | "promote" | "promoteLight" | "body" | "bodyDark" | "brand" | "brandAccentActive" | "brandAccentHover" | "brandAccentSoft" | "brandAccentSoftActive" | "brandAccentSoftHover" | "criticalActive" | "criticalHover" | "criticalSoft" | "criticalSoftActive" | "criticalSoftHover" | "formAccentActive" | "formAccentHover" | "formAccentSoft" | "formAccentSoftActive" | "formAccentSoftHover" | "neutralActive" | "neutralHover" | "neutralSoft" | "neutralSoftActive" | "neutralSoftHover" | "surface" | "surfaceDark" | undefined;
-    }) | undefined;
-    readonly boxShadow?: ("small" | "medium" | "large" | "borderBrandAccentLarge" | "borderBrandAccentLightLarge" | "borderCaution" | "borderCautionLight" | "borderCritical" | "borderCriticalLarge" | "borderCriticalLight" | "borderCriticalLightLarge" | "borderField" | "borderFormAccent" | "borderFormAccentLarge" | "borderFormAccentLight" | "borderFormAccentLightLarge" | "borderInfo" | "borderInfoLight" | "borderNeutral" | "borderNeutralLarge" | "borderNeutralInverted" | "borderNeutralInvertedLarge" | "borderNeutralLight" | "borderPositive" | "borderPositiveLight" | "borderPromote" | "borderPromoteLight" | "outlineFocus" | {
-        lightMode?: "small" | "medium" | "large" | "borderBrandAccentLarge" | "borderBrandAccentLightLarge" | "borderCaution" | "borderCautionLight" | "borderCritical" | "borderCriticalLarge" | "borderCriticalLight" | "borderCriticalLightLarge" | "borderField" | "borderFormAccent" | "borderFormAccentLarge" | "borderFormAccentLight" | "borderFormAccentLightLarge" | "borderInfo" | "borderInfoLight" | "borderNeutral" | "borderNeutralLarge" | "borderNeutralInverted" | "borderNeutralInvertedLarge" | "borderNeutralLight" | "borderPositive" | "borderPositiveLight" | "borderPromote" | "borderPromoteLight" | "outlineFocus" | undefined;
-        darkMode?: "small" | "medium" | "large" | "borderBrandAccentLarge" | "borderBrandAccentLightLarge" | "borderCaution" | "borderCautionLight" | "borderCritical" | "borderCriticalLarge" | "borderCriticalLight" | "borderCriticalLightLarge" | "borderField" | "borderFormAccent" | "borderFormAccentLarge" | "borderFormAccentLight" | "borderFormAccentLightLarge" | "borderInfo" | "borderInfoLight" | "borderNeutral" | "borderNeutralLarge" | "borderNeutralInverted" | "borderNeutralInvertedLarge" | "borderNeutralLight" | "borderPositive" | "borderPositiveLight" | "borderPromote" | "borderPromoteLight" | "outlineFocus" | undefined;
-    }) | undefined;
-}) => string) & {
-    properties: Set<"background" | "borderRadius" | "transition" | "transform" | "alignItems" | "bottom" | "boxShadow" | "cursor" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "inset" | "justifyContent" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxWidth" | "minWidth" | "opacity" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "right" | "textAlign" | "top" | "userSelect" | "width" | "zIndex" | "margin" | "outline" | "overflow" | "padding" | "paddingY" | "paddingX" | "marginY" | "marginX">;
-};
-type RequiredResponsiveObject<Value> = Partial<Record<Breakpoint, Value>> & Record<(typeof breakpointNames)[0], Value>;
-
-type Sprinkles = Parameters<typeof sprinkles>[0];
-interface Atoms extends Sprinkles {
-    reset?: keyof JSX.IntrinsicElements;
-}
-
-type DataAttributeMap = Record<string, string | number | boolean>;
-
-declare const textSizeUntrimmed: Record<"xsmall" | "small" | "large" | "standard", string>;
-declare const tone: Record<"brandAccent" | "caution" | "critical" | "formAccent" | "info" | "neutral" | "positive" | "promote" | "link" | "secondary", string>;
-
-type IconSize = keyof typeof textSizeUntrimmed | 'fill';
-type UseIconProps = {
-    size?: IconSize;
-    tone?: keyof typeof tone;
-    alignY?: 'uppercase' | 'lowercase';
-    data?: DataAttributeMap;
-} & OptionalTitle;
-
-interface ToastAction {
-    label: string;
-    onClick: () => void;
-}
-type Toast = {
-    key?: string;
-    message: string;
-    description?: string;
-    action?: ToastAction;
-    closeLabel?: string;
-    data?: DataAttributeMap;
-} & ({
-    tone: 'positive' | 'critical';
-} | {
-    tone: 'neutral';
-    icon?: ReactElement<UseIconProps>;
-});
-
-declare function atoms(props: Omit<Atoms, 'background'>): string;
-
-declare function useScope(): {
-    setDefaultState: (key: string, value: any) => void;
-    getState: (key: string) => any;
-    setState: lodash.CurriedFunction2<string, any, void>;
-    toggleState: (key: string) => void;
-    resetState: (...keys: string[]) => void;
-    vars: {
-        grid: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        space: {
-            gutter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            xxsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            xxlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        touchableSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        contentWidth: {
-            xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        backgroundColor: {
-            body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            brand: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            brandAccent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            brandAccentActive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            brandAccentHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            brandAccentSoft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            brandAccentSoftActive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            brandAccentSoftHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            caution: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            cautionLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            critical: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            criticalActive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            criticalHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            criticalLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            criticalSoft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            criticalSoftActive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            criticalSoftHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            formAccent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            formAccentActive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            formAccentHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            formAccentSoft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            formAccentSoftActive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            formAccentSoftHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            info: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            infoLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            neutral: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            neutralActive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            neutralHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            neutralLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            neutralSoft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            neutralSoftActive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            neutralSoftHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            positive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            positiveLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            promote: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            promoteLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            surface: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        foregroundColor: {
-            brandAccentLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            brandAccent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            cautionLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            caution: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            criticalLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            critical: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            formAccentLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            formAccent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            infoLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            info: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            linkLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            link: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            linkHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            linkVisited: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            linkLightVisited: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            neutral: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            neutralInverted: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            positiveLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            positive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            promoteLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            promote: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            rating: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            secondaryInverted: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        textWeight: {
-            medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            strong: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        borderColor: {
-            brandAccent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            brandAccentLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            caution: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            cautionLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            critical: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            criticalLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            field: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            focus: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            formAccent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            formAccentLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            info: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            infoLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            neutral: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            neutralInverted: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            neutralLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            positive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            positiveLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            promote: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            promoteLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        borderRadius: {
-            standard: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        borderWidth: {
-            standard: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        shadow: {
-            small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-    };
-    atoms: typeof atoms;
-    breakpoints: {
-        readonly mobile: 0;
-        readonly tablet: 740;
-        readonly desktop: 992;
-        readonly wide: 1200;
-    };
-    showToast: (toast: Toast) => void;
-    responsiveValue: <Value>(value: RequiredResponsiveObject<Value>) => Value;
-    colorModeValue: (value: Record<'lightMode' | 'darkMode', any>) => any;
-};
-
-export { useScope as default };
+export { useScope as default } from '../reset.js';

package/dist/playroom/scope.mjs

@@ -1,10 +1,10 @@
 import "../side-effects/lib/css/reset/index.mjs";
 import { useState, useEffect } from "react";
 import { vars, atoms } from "../css.mjs";
-import { a as usePlayroomStore } from "../playroomState.chunk.mjs";
-import { d as darkMode } from "../styles/lib/css/atoms/sprinkles.css.mjs";
-import { b as useResponsiveValue, l as useToast } from "../ToastContext.chunk.mjs";
-import { b as breakpoints } from "../styles/lib/css/breakpoints.mjs";
+import { usePlayroomStore } from "../playroomState.chunk.mjs";
+import { darkMode } from "../styles/lib/css/atoms/sprinkles.css.mjs";
+import { useResponsiveValue, useToast } from "../ToastContext.chunk.mjs";
+import { breakpoints } from "../styles/lib/css/breakpoints.mjs";
 function useScope() {
   const responsiveValue = useResponsiveValue();
   const [colorMode, setColorMode] = useState(

package/dist/playroom/snippets.d.ts

@@ -1,7 +1 @@
-declare const _default: {
-    group: string;
-    name: string;
-    code: string;
-}[];
-
-export { _default as default };
+export { _default$1 as default } from '../reset.js';

package/dist/playroomState.chunk.cjs

@@ -1,7 +1,7 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const curry = require("lodash/curry");
+const curry = require("lodash/curry.js");
 const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
 const curry__default = /* @__PURE__ */ _interopDefaultCompat(curry);
 const unwrapValue = (value) => {

package/dist/playroomState.chunk.mjs

@@ -75,7 +75,7 @@ function useFallbackState(stateKey, value, onChange, defaultValue) {
   return [resolvedValue, handleChange];
 }
 export {
-  PlayroomStateProvider as P,
-  usePlayroomStore as a,
-  useFallbackState as u
+  PlayroomStateProvider,
+  useFallbackState,
+  usePlayroomStore
 };