@sendoutcards/quantum-design-ui 2.0.0-alpha.5 → 2.0.0-alpha.7

package/dist/index.d.ts

@@ -121,9 +121,9 @@ export declare type AffiliateShareWidgetProps = {
     shareLink: string;
 };
 
-declare type AlignContent = 'space-evenly' | 'stretch' | 'start' | 'end' | 'baseline' | 'first baseline' | 'last baseline' | 'safe' | 'unsafe' | CSSGridBaseValues | FlexBaseValues;
+export declare type AlignContent = 'space-evenly' | 'stretch' | 'start' | 'end' | 'baseline' | 'first baseline' | 'last baseline' | 'safe' | 'unsafe' | CSSGridBaseValues | FlexBaseValues;
 
-declare type AlignItems = AlignContent | 'self-start' | 'self-end' | CSSGridBaseValues;
+export declare type AlignItems = AlignContent | 'self-start' | 'self-end' | CSSGridBaseValues;
 
 export declare type AlignmentOptions = 'left' | 'center' | 'right';
 
@@ -237,19 +237,17 @@ export declare type AwardGroupLabelProps = {
     label: string;
 };
 
-declare type BackgroundColor = ColorSelection | LiteralUnion<HOCColorKeys> | Responsive<HOCColorKeys>;
+export declare type BackgroundPosition = 'center' | 'left top' | 'left center' | 'left bottom' | 'right top' | 'right center' | 'right bottom' | 'center top' | 'center center' | 'center bottom';
 
-declare type BackgroundPosition = 'center' | 'left top' | 'left center' | 'left bottom' | 'right top' | 'right center' | 'right bottom' | 'center top' | 'center center' | 'center bottom';
+export declare type BackgroundRepeat = 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' | 'initial' | 'inherit';
 
-declare type BackgroundRepeat = 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' | 'initial' | 'inherit';
-
-declare type BackgroundSize = 'auto' | 'length' | 'cover' | 'contain' | 'initial' | 'inherit';
+export declare type BackgroundSize = 'auto' | 'length' | 'cover' | 'contain' | 'initial' | 'inherit';
 
 export declare const Badge: FC<BadgeProps>;
 
 export declare type BadgeProps = {
     item: string;
-    backgroundColor?: BackgroundColor;
+    backgroundColor?: BGColorUnion;
     icon?: IconType;
     size?: SizeType;
     color?: TextColor;
@@ -277,11 +275,11 @@ declare type BannerWithTitle = BaseBannerProps & {
 export declare const Bar: FC<BarProps>;
 
 export declare type BarProps = {
-    height: Height;
-    width: Width;
+    height: HUnion;
+    width: WUnion;
     overflow?: Overflow;
     position?: Position;
-    backgroundColor?: BackgroundColor;
+    backgroundColor?: BGColorUnion;
 };
 
 declare type BaseBannerProps = {
@@ -290,8 +288,12 @@ declare type BaseBannerProps = {
     onClose?: () => void;
 };
 
+export declare type BaseColorType = keyof typeof entities.hocs.colors.swatches;
+
 export declare const bellaCadaeuxTheme: Entities;
 
+export declare type BGColorUnion = ColorSelection | LiteralUnion<HOCColorKeys> | Responsive<HOCColorKeys>;
+
 export declare const BlockQuote: ({ author, background, textColor, type, content, contentTextType, borderRadius, boxShadow, children, }: BlockQuoteProps) => JSX_2.Element;
 
 export declare type BlockQuoteProps = {
@@ -313,25 +315,14 @@ declare type BlueScaleColorSelection = {
     shade: LiteralUnion<keyof RequiredColorSwatch>;
 };
 
-declare type BorderDirection<T> = {
+export declare type BorderDirection<T> = {
     left?: T;
     right?: T;
     bottom?: T;
     top?: T;
 };
 
-declare type BorderRadius = BorderRadiusDirection | LiteralUnion<HOCBorderRadiusKeys>;
-
-declare const borderRadius: {
-    none: string;
-    small: string;
-    medium: string;
-    default: string;
-    large: string;
-    circle: string;
-};
-
-declare type BorderRadius_2 = {
+export declare type BorderRadius = {
     left?: LiteralUnion<HOCBorderRadiusKeys, string> | Responsive<LiteralUnion<HOCBorderRadiusKeys, string>>;
     right?: LiteralUnion<HOCBorderRadiusKeys, string> | Responsive<LiteralUnion<HOCBorderRadiusKeys, string>>;
     top?: LiteralUnion<HOCBorderRadiusKeys, string> | Responsive<LiteralUnion<HOCBorderRadiusKeys, string>>;
@@ -342,24 +333,35 @@ declare type BorderRadius_2 = {
     bottomLeft?: LiteralUnion<HOCBorderRadiusKeys, string> | Responsive<LiteralUnion<HOCBorderRadiusKeys, string>>;
 };
 
-declare type BorderRadiusDirection = BorderRadius_2 & Responsive<LiteralUnion<HOCBorderRadiusKeys, string>>;
+export declare const borderRadius: {
+    none: string;
+    small: string;
+    medium: string;
+    default: string;
+    large: string;
+    circle: string;
+};
+
+export declare type BorderRadiusDirection = BorderRadius & Responsive<LiteralUnion<HOCBorderRadiusKeys, string>>;
 
-declare const borders: {
+export declare const borders: {
     thin: string;
     default: string;
     bold: string;
 };
 
-declare type BorderStyleDirection = BorderDirection<BorderStyles> | BorderDirection<Responsive<BorderStyles>>;
+export declare type BorderStyleDirection = BorderDirection<BorderStyles> | BorderDirection<Responsive<BorderStyles>>;
 
-declare type BorderStyles = 'none' | 'hidden' | 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'initial' | 'inherit';
+export declare type BorderStyles = 'none' | 'hidden' | 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'initial' | 'inherit';
 
-declare type BorderWidth = BorderDirection<HOCBorderWidthKeys> | BorderDirection<Responsive<HOCBorderWidthKeys>>;
+export declare type BorderWidth = BorderDirection<HOCBorderWidthKeys> | BorderDirection<Responsive<HOCBorderWidthKeys>>;
 
-declare type BorderWidthDirection = BorderWidth & Responsive<HOCBorderWidthKeys>;
+export declare type BorderWidthDirection = BorderWidth & Responsive<HOCBorderWidthKeys>;
 
 export declare type BrandTypes = 'soc' | 'greenerStill' | 'bellaCadeaux' | 'promptingU' | 'blue42' | 'streamVA' | 'streamMarketing' | 'soc' | 'promptingsAcademy' | 'promptings';
 
+export declare type BRUnion = BorderRadiusDirection | LiteralUnion<HOCBorderRadiusKeys>;
+
 export declare const BulkSend: FC<BulkSendProps>;
 
 export declare type BulkSendProps = {
@@ -433,7 +435,7 @@ export declare const Capsule: FC<CapsuleProps>;
 
 export declare type CapsuleProps = {
     title: string;
-    backgroundColor?: BackgroundColor;
+    backgroundColor?: BGColorUnion;
     fontColor?: TextColor;
     boxShadow?: Shadows;
 };
@@ -469,7 +471,7 @@ export declare type CardQuantitySliderProps = {
     secondaryAction?: default_2.ReactNode;
 } & QuantitySliderProps;
 
-declare type Char = 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'J' | 'K' | 'L' | 'M' | 'N' | 'O' | 'P' | 'Q' | 'R' | 'S' | 'T' | 'U' | 'V' | 'W' | 'X' | 'Y' | 'Z';
+export declare type Char = 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'J' | 'K' | 'L' | 'M' | 'N' | 'O' | 'P' | 'Q' | 'R' | 'S' | 'T' | 'U' | 'V' | 'W' | 'X' | 'Y' | 'Z';
 
 export declare const Checkbox: FC<CheckboxProps>;
 
@@ -526,7 +528,7 @@ export declare type CloseButtonProps = {
     id?: string;
 };
 
-declare type ColorModeType = 'light' | 'dark';
+export declare type ColorModeType = 'light' | 'dark';
 
 export declare const ColorOption: FC<ColorOptionProps>;
 
@@ -536,7 +538,7 @@ export declare type ColorOptionProps = {
     onClick: () => void;
 };
 
-declare const colors: {
+export declare const colors: {
     swatches: {
         primaryBrand: Required<ColorSwatch>;
         secondaryBrand: Required<ColorSwatch>;
@@ -552,7 +554,12 @@ declare const colors: {
     foreground: string;
 };
 
-declare type ColorSelection = PrimaryBrandColorSelection | SecondaryBrandColorSelection | SuccessColorSelection | WarningColorSelection | DangerColorSelection | AccentColorSelection | GrayScaleColorSelection | BlueScaleColorSelection | PurpleScaleColorSelection;
+export declare type ColorSelection = PrimaryBrandColorSelection | SecondaryBrandColorSelection | SuccessColorSelection | WarningColorSelection | DangerColorSelection | AccentColorSelection | GrayScaleColorSelection | BlueScaleColorSelection | PurpleScaleColorSelection;
+
+export declare type ColorStop = {
+    color: LiteralUnion<HOCSwatchColorKeys>;
+    percentage: number;
+};
 
 declare type ColorSwatch = {
     base: string;
@@ -568,6 +575,8 @@ declare type ColorSwatch = {
     _1000?: string;
 };
 
+export declare type ColorSwatchKeys = keyof ColorSwatch;
+
 export declare const ColorThumbnail: FC<ColorThumbnailProps>;
 
 export declare type ColorThumbnailProps = {
@@ -713,15 +722,17 @@ export declare type CountdownTimerProps = {
     timeReachedMessage?: string;
 };
 
-declare type Country = {
+export declare type Country = {
     isoCode: string;
     callingCode: number;
     hasSeparator?: boolean;
 };
 
-declare type CSSGridBaseValues = 'start' | 'end' | 'space-evenly' | 'center';
+export declare type CSSGridBaseValues = 'start' | 'end' | 'space-evenly' | 'center';
+
+export declare type CSSValues = BorderStyles | Cursor | Display | JustifyContent | AlignContent | AlignItems | JustifyItems | FlexDirection | BackgroundSize | BackgroundPosition | BackgroundRepeat | Overflow | Position;
 
-declare type Cursor = 'pointer' | 'auto' | 'text' | 'zoom-out' | 'zoom-in' | 'initial' | 'inherit' | 'move' | 'row-resize' | 'col-resize' | 'nesw-resize' | 'nwse-resize' | 'not-allowed';
+export declare type Cursor = 'pointer' | 'auto' | 'text' | 'zoom-out' | 'zoom-in' | 'initial' | 'inherit' | 'move' | 'row-resize' | 'col-resize' | 'nesw-resize' | 'nwse-resize' | 'not-allowed';
 
 declare type DangerColorSelection = {
     swatch: 'danger';
@@ -748,10 +759,10 @@ export declare type DialogProps = {
     closeButtonId?: string;
     insetOverride?: HOCSpacingKeys | string;
     outsetOverride?: HOCSpacingKeys | string;
-    height?: Height;
-    width?: Width;
+    height?: HUnion;
+    width?: WUnion;
     shouldScroll?: boolean;
-    borderRadius?: BorderRadius;
+    borderRadius?: BRUnion;
     pinned?: PinnedType;
     backgroundVariant?: 'solid' | 'blur';
     footer?: default_2.ReactNode;
@@ -767,7 +778,7 @@ declare type Disclaimer = {
     termsDescription: string;
 };
 
-declare type Display = 'relative' | 'absolute' | 'inline' | 'inline-block' | 'flex' | 'grid' | 'none' | 'contents' | 'inline-flex';
+export declare type Display = 'relative' | 'absolute' | 'inline' | 'inline-block' | 'flex' | 'grid' | 'none' | 'contents' | 'inline-flex';
 
 export declare const DisplayCard: ({ title, description, children, }: DisplayCardProps) => JSX_2.Element;
 
@@ -1415,7 +1426,7 @@ export declare type FeatureAnnouncementProps = {
         type?: ButtonType;
     };
     imageURL: string;
-    backgroundColor?: BackgroundColor;
+    backgroundColor?: BGColorUnion;
     maxWidth?: string;
 };
 
@@ -1456,14 +1467,14 @@ export declare const Flex: default_2.MemoExoticComponent<(props: FlexProps) => J
 
 declare type FlexBaseValues = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'initial' | 'inherit';
 
-declare type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+export declare type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
 
 export declare type FlexProps = {
     children?: default_2.ReactNode;
     outsideClick?: () => void;
 } & HOCBaseProps & HOCMotionProps;
 
-declare type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
+export declare type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
 
 declare type FramerAnimation = AnimationControls | TargetAndTransition | VariantLabels | boolean;
 
@@ -1506,20 +1517,18 @@ export declare type GridProps = {
     children?: default_2.ReactNode;
 };
 
-declare type Height = Responsive<LiteralUnion<HOCSpacingKeys>> | LiteralUnion<HOCSpacingKeys>;
-
 declare type HOCBaseProps = {
     inset?: SpacingDirection | LiteralUnion<HOCSpacingKeys>;
     outset?: SpacingDirection | LiteralUnion<HOCSpacingKeys>;
-    borderRadius?: BorderRadius;
+    borderRadius?: BRUnion;
     borderWidth?: BorderWidthDirection | HOCBorderWidthKeys;
     borderStyle?: BorderStyleDirection | BorderStyles;
     borderColor?: ColorSelection | LiteralUnion<HOCColorKeys>;
-    backgroundColor?: BackgroundColor;
+    backgroundColor?: BGColorUnion;
     color?: LiteralUnion<TextColor>;
     boxShadow?: Shadows;
-    height?: Height;
-    width?: Width;
+    height?: HUnion;
+    width?: WUnion;
     maxHeight?: Responsive<LiteralUnion<HOCSpacingKeys>> | LiteralUnion<HOCSpacingKeys>;
     maxWidth?: Responsive<LiteralUnion<HOCSpacingKeys>> | LiteralUnion<HOCSpacingKeys>;
     minHeight?: Responsive<LiteralUnion<HOCSpacingKeys>> | LiteralUnion<HOCSpacingKeys>;
@@ -1558,19 +1567,19 @@ declare type HOCBaseProps = {
     onMouseEvent?: OnMouseEvent;
 };
 
-declare type HOCBorderRadius = typeof borderRadius;
+export declare type HOCBorderRadius = typeof borderRadius;
 
-declare type HOCBorderRadiusKeys = keyof HOCBorderRadius;
+export declare type HOCBorderRadiusKeys = keyof HOCBorderRadius;
 
-declare type HOCBorderWidth = typeof borders;
+export declare type HOCBorderWidth = typeof borders;
 
-declare type HOCBorderWidthKeys = keyof HOCBorderWidth;
+export declare type HOCBorderWidthKeys = keyof HOCBorderWidth;
 
-declare type HOCColorKeys = Exclude<HOCColorKeysWithSwatch, 'swatches'>;
+export declare type HOCColorKeys = Exclude<HOCColorKeysWithSwatch, 'swatches'>;
 
-declare type HOCColorKeysWithSwatch = keyof HOCColors;
+export declare type HOCColorKeysWithSwatch = keyof HOCColors;
 
-declare type HOCColors = typeof colors;
+export declare type HOCColors = typeof colors;
 
 declare type HOCMotionProps = {
     className?: string;
@@ -1578,17 +1587,23 @@ declare type HOCMotionProps = {
     id?: string;
 } & MotionProps;
 
-declare type HOCShadowKeys = keyof HOCShadows;
+export declare type HOCPrimitive = string | number;
+
+export declare type HOCShadowKeys = keyof HOCShadows;
+
+export declare type HOCShadows = typeof shadows;
 
-declare type HOCShadows = typeof shadows;
+export declare type HOCSpacing = typeof spacing;
 
-declare type HOCSpacing = typeof spacing;
+export declare type HOCSpacingKeys = keyof HOCSpacing;
 
-declare type HOCSpacingKeys = keyof HOCSpacing;
+export declare type HOCSwatchColorKeys = keyof HOCSwatchColors;
 
-declare type HOCSwatchColorKeys = keyof HOCSwatchColors;
+export declare type HOCSwatchColors = typeof colors.swatches;
 
-declare type HOCSwatchColors = typeof colors.swatches;
+export declare type HOCTextColors = typeof textColors;
+
+export declare type HOCValues = Spacing | HOCSpacingKeys | BorderRadius | HOCBorderRadiusKeys | BorderWidth | HOCBorderWidthKeys | ColorSelection | Shadows | ColorSwatch;
 
 declare type HorizontalZone = {
     component: default_2.ReactNode;
@@ -1608,6 +1623,8 @@ export declare type HStackProps = {
     children?: default_2.ReactNode;
 };
 
+export declare type HUnion = Responsive<LiteralUnion<HOCSpacingKeys>> | LiteralUnion<HOCSpacingKeys>;
+
 export declare const Icon: FC<IconProps>;
 
 export declare type IconColors = keyof typeof entities.icons.colors;
@@ -1756,7 +1773,7 @@ export declare type ImageUploaderProps = {
     maxFileSize?: number;
     maxAcceptedFiles?: number;
     uploadTitle?: string;
-    backgroundColor?: BackgroundColor;
+    backgroundColor?: BGColorUnion;
 };
 
 export declare const ImageUploadWidget: FC<ImageUploadWidgetProps>;
@@ -1830,6 +1847,8 @@ export declare type InfoBlockProps = {
 
 export declare type InfoBlockSizeType = 'large' | 'medium' | 'small';
 
+export declare type Initials = 'inherit' | 'initial';
+
 export declare const Input: FC<InputProps>;
 
 export declare type InputFocusType = IconColors;
@@ -1886,9 +1905,9 @@ export declare type Item = {
     isActive: boolean;
 };
 
-declare type JustifyContent = FlexBaseValues | CSSGridBaseValues;
+export declare type JustifyContent = FlexBaseValues | CSSGridBaseValues;
 
-declare type JustifyItems = 'start' | 'end' | 'center' | 'stretch';
+export declare type JustifyItems = 'start' | 'end' | 'center' | 'stretch';
 
 export declare type Link = {
     title: default_2.ReactNode;
@@ -1946,7 +1965,7 @@ export declare type ListProps = {
 
 export declare type ListStyleType = 'disc' | 'none' | 'circle';
 
-declare type LiteralUnion<T extends U, U = string> = T | (U & {
+export declare type LiteralUnion<T extends U, U = string> = T | (U & {
     _?: never;
 });
 
@@ -2059,7 +2078,7 @@ export declare type NoteSection = {
     notes: string[];
 };
 
-declare type OnMouseEvent = (event: default_2.MouseEvent<HTMLElement, MouseEvent>) => void;
+export declare type OnMouseEvent = (event: default_2.MouseEvent<HTMLElement, MouseEvent>) => void;
 
 declare const Option_2: default_2.ForwardRefExoticComponent<OptionProps & default_2.RefAttributes<HTMLDivElement>>;
 export { Option_2 as Option }
@@ -2151,7 +2170,7 @@ export declare type OrderCardProps = {
 declare type orientation_2 = 'up' | 'down' | 'left' | 'right';
 export { orientation_2 as orientation }
 
-declare type Overflow = 'visible' | 'auto' | 'scroll' | 'hidden';
+export declare type Overflow = 'visible' | 'auto' | 'scroll' | 'hidden';
 
 export declare const Overlay: ({ children, zIndex, animate, initial, exit, variants, transition, motionKey, position, backgroundVariant, pinned, shouldScroll, ...rest }: OverlayPropTypes) => JSX_2.Element;
 
@@ -2228,7 +2247,7 @@ export declare type PinInputProps = {
 
 export declare type PinnedType = 'top' | 'center' | 'bottom';
 
-declare type Position = 'absolute' | 'fixed' | 'sticky' | 'relative' | 'static';
+export declare type Position = 'absolute' | 'fixed' | 'sticky' | 'relative' | 'static';
 
 export declare const PricingTile: ({ title, price, features, accentColor, backgroundColor, isFeatured, featuredItemStyles, textColor, description, priceSubtext, billingInterval, primaryAction, secondaryAction, children, hasShadow, disclaimer, isSelected, isFullLength, }: PricingTileProps) => JSX_2.Element;
 
@@ -2273,7 +2292,7 @@ export declare type PromotionWidgetProps = {
     title: string;
     description: string;
     capsuleTitle: string;
-    backgroundColor?: BackgroundColor;
+    backgroundColor?: BGColorUnion;
     primaryAction?: {
         onClick: () => void;
         title: string;
@@ -2436,7 +2455,7 @@ export declare type ReleaseNoteProps = {
 
 declare type RequiredColorSwatch = Required<ColorSwatch>;
 
-declare type Responsive<T> = {
+export declare type Responsive<T> = {
     xSmall?: T;
     small?: T;
     medium?: T;
@@ -2583,9 +2602,9 @@ export declare type SettingInputProps = {
     onMouseEvent?: () => void;
 };
 
-declare type Shadows = LiteralUnion<HOCShadowKeys, string> | Responsive<LiteralUnion<HOCShadowKeys, string>>;
+export declare type Shadows = LiteralUnion<HOCShadowKeys, string> | Responsive<LiteralUnion<HOCShadowKeys, string>>;
 
-declare const shadows: {
+export declare const shadows: {
     light: string;
     mediumLight: string;
     mediumDark: string;
@@ -2602,7 +2621,7 @@ export declare type SheetProps = {
     backgroundColor?: string;
     layer?: number;
     backgroundElement?: default_2.ReactNode;
-    backgroundElementBackgroundColor?: BackgroundColor;
+    backgroundElementBackgroundColor?: BGColorUnion;
     snapPointPercentages?: number[];
     initialSnapPoint?: number | string;
     outsideClickBypassId?: string;
@@ -2632,7 +2651,7 @@ export declare type SidebarProps = {
 
 declare type SizeMapType = Record<SizeType, number>;
 
-declare type SizeProperties<T> = {
+export declare type SizeProperties<T> = {
     xSmall: T;
     small: T;
     medium: T;
@@ -2640,7 +2659,7 @@ declare type SizeProperties<T> = {
     xLarge: T;
 };
 
-declare type SizeType = keyof SizeProperties<never>;
+export declare type SizeType = keyof SizeProperties<never>;
 
 export declare const Slider: FC<SliderProps>;
 
@@ -2677,7 +2696,7 @@ export declare type SpacerProps = {
     orientation?: SpaceOrientation;
 };
 
-declare type Spacing = {
+export declare type Spacing = {
     left?: LiteralUnion<HOCSpacingKeys> | Responsive<LiteralUnion<HOCSpacingKeys, string>>;
     right?: LiteralUnion<HOCSpacingKeys> | Responsive<LiteralUnion<HOCSpacingKeys, string>>;
     top?: LiteralUnion<HOCSpacingKeys> | Responsive<LiteralUnion<HOCSpacingKeys, string>>;
@@ -2686,7 +2705,7 @@ declare type Spacing = {
     horizontal?: LiteralUnion<HOCSpacingKeys> | Responsive<LiteralUnion<HOCSpacingKeys, string>>;
 };
 
-declare const spacing: {
+export declare const spacing: {
     x0: string;
     x_25: string;
     x_5: string;
@@ -2704,7 +2723,7 @@ declare const spacing: {
     x9: string;
 };
 
-declare type SpacingDirection = Spacing & Responsive<HOCSpacingKeys>;
+export declare type SpacingDirection = Spacing & Responsive<HOCSpacingKeys>;
 
 export declare const Span: default_2.MemoExoticComponent<(props: SpanProps) => JSX_2.Element>;
 
@@ -2722,7 +2741,7 @@ declare type SphereProperties = {
 };
 
 export declare type SphereProps = {
-    backgroundColor: BackgroundColor;
+    backgroundColor: BGColorUnion;
     step: {
         content: Char | number;
         color?: TextColor;
@@ -2737,8 +2756,8 @@ export declare type StackedCardsProps = {
     height: number;
     stackCount?: number;
     backgroundImage?: string;
-    stackBackgroundColor?: BackgroundColor;
-    borderRadius?: BorderRadius;
+    stackBackgroundColor?: BGColorUnion;
+    borderRadius?: BRUnion;
     children?: default_2.ReactNode;
 };
 
@@ -2797,7 +2816,7 @@ export declare const streamVATheme: Entities;
 
 declare type StrokeWidth = keyof typeof entities.animatedCheckmark.strokeWidth;
 
-declare type SubmitOptionType = {
+export declare type SubmitOptionType = {
     title: string;
     type?: ButtonType;
     onClick: (optionId?: string) => void;
@@ -2901,6 +2920,20 @@ export { Text_2 as Text }
 
 export declare type TextColor = keyof typeof entities.text.colors;
 
+export declare const textColors: {
+    primaryBrand: string;
+    secondaryBrand: string;
+    primaryHeading: string | undefined;
+    primaryBody: string;
+    inverseHeading: string;
+    inverseBody: string;
+    accent: string;
+    success: string;
+    warning: string;
+    danger: string;
+    anchorBlue: string;
+};
+
 export declare type TextLabelProps = {
     type: 'text';
     label: string;
@@ -3432,9 +3465,9 @@ outerRing: string;
 };
 }>;
 
-declare type ThemeMode = keyof ThemeModeProperies<never>;
+export declare type ThemeMode = keyof ThemeModeProperies<never>;
 
-declare type ThemeModeProperies<T> = {
+export declare type ThemeModeProperies<T> = {
     primary: T;
     secondary: T;
     success: T;
@@ -4004,9 +4037,9 @@ export declare const UploadButton: default_2.ForwardRefExoticComponent<UploadBut
 export declare type UploadButtonProps = {
     onUpload: (upload: File | null) => void;
     title: string;
-    backgroundColor?: BackgroundColor;
-    width?: Width;
-    height?: Height;
+    backgroundColor?: BGColorUnion;
+    width?: WUnion;
+    height?: HUnion;
     boxShadow?: Shadows;
 };
 
@@ -4043,7 +4076,17 @@ export declare type UpsaleDialogProps = {
     checkoutOnly?: boolean;
 } & UpsaleOptionsType;
 
-declare type UpsaleOptionsType = {
+export declare const UpsaleOptions: FC<UpsaleOptionsProps>;
+
+declare type UpsaleOptionsProps = {
+    showCheckoutView: boolean;
+    extraLink?: AnchorProps;
+    defaultNumOptionsShown?: number;
+    handleShouldShowCheckoutView: (value: boolean) => void;
+    submitAction?: SubmitOptionType;
+} & UpsaleOptionsType;
+
+export declare type UpsaleOptionsType = {
     selectableOptions: UpsaleOptionType[];
     selectedOption: string;
     handleSelectedOption: (optionId: string) => void;
@@ -4052,7 +4095,7 @@ declare type UpsaleOptionsType = {
     activeSelectedOption?: UpsaleOptionType;
 };
 
-declare type UpsaleOptionType = {
+export declare type UpsaleOptionType = {
     title: string;
     secondaryTitle?: string;
     subtitle?: string;
@@ -4659,7 +4702,7 @@ export declare type VideoPlayerProps = {
     width: string;
     height?: string;
     maxHeight?: string;
-    borderRadius?: BorderRadius_2 | LiteralUnion<HOCBorderRadiusKeys>;
+    borderRadius?: BorderRadius | LiteralUnion<HOCBorderRadiusKeys>;
     minWidth?: string;
     shouldAutoplay?: boolean;
 };
@@ -4673,8 +4716,8 @@ export declare type VStackProps = {
     alignItems?: Responsive<CSSGridBaseValues> | CSSGridBaseValues;
     inset?: SpacingDirection | LiteralUnion<HOCSpacingKeys>;
     outset?: SpacingDirection | LiteralUnion<HOCSpacingKeys>;
-    width?: Width;
-    height?: Height;
+    width?: WUnion;
+    height?: HUnion;
     overflow?: Overflow;
     children?: default_2.ReactNode;
 };
@@ -4695,7 +4738,7 @@ declare type WidgetProperties = {
     fontColor: TextColor;
 };
 
-declare type Width = Responsive<LiteralUnion<HOCSpacingKeys>> | LiteralUnion<HOCSpacingKeys>;
+export declare type WUnion = Responsive<LiteralUnion<HOCSpacingKeys>> | LiteralUnion<HOCSpacingKeys>;
 
 export declare type ZoneType = {
     top?: VerticalZone;

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { jsx as e, jsxs as l, Fragment as le } from "react/jsx-runtime";
-import ae, { createContext as Xr, useContext as dr, useState as K, useEffect as Te, useMemo as N, useRef as We, useCallback as Be, useLayoutEffect as Tt, useImperativeHandle as Et, createElement as Wt } from "react";
+import ae, { createContext as Xr, useContext as hr, useState as K, useEffect as Te, useMemo as N, useRef as We, useCallback as Be, useLayoutEffect as Tt, useImperativeHandle as Et, createElement as Wt } from "react";
 import E from "color";
-import { motion as se, useMotionValue as $o, useTransform as lo, animate as Tr, AnimatePresence as e1, useElementScroll as Dt, useAnimation as ir } from "framer-motion";
+import { motion as se, useMotionValue as $o, useTransform as lo, animate as Tr, AnimatePresence as e1, useElementScroll as Dt, useAnimation as nr } from "framer-motion";
 import Yr from "react-country-flag";
 import Vt from "fast-deep-equal";
 import Po from "use-resize-observer";
@@ -59,7 +59,7 @@ const D = (o) => {
   medium: 2,
   large: 2.5,
   xLarge: 3
-}, ya = 0.5, fa = "rem", nr = {
+}, ya = 0.5, fa = "rem", sr = {
   small: 576,
   medium: 768,
   large: 992,
@@ -199,10 +199,10 @@ const D = (o) => {
     baseUnits: fa
   },
   mediaQueries: {
-    small: nr.small,
-    medium: nr.medium,
-    large: nr.large,
-    xLarge: nr.xLarge
+    small: sr.small,
+    medium: sr.medium,
+    large: sr.large,
+    xLarge: sr.xLarge
   },
   sizing: {
     icons: {
@@ -746,7 +746,7 @@ const D = (o) => {
       E(S.colors.defaultShadowColor).rgb().alpha(0.06).toString()
     )
   }
-}, hr = {
+}, er = {
   mediaQueries: Aa,
   hocs: Na,
   text: R1,
@@ -7031,8 +7031,8 @@ const D = (o) => {
   sphere: k9,
   widget: L9,
   colorOption: S9
-}, st = Xr(hr), B9 = () => {
-  const o = dr(st);
+}, st = Xr(er), B9 = () => {
+  const o = hr(st);
   if (!o)
     throw new Error("useTheme must be used within a ThemeProvider");
   return o;
@@ -7082,7 +7082,7 @@ const D = (o) => {
       case "promptingsAcademy":
         return Er;
       default:
-        return hr;
+        return er;
     }
   })(t), i = N(
     () => ({
@@ -12992,7 +12992,7 @@ const D = (o) => {
     [o, a]
     // Removed handler from dependencies
   );
-}, { mediaQueries: q7 } = hr, G = (o, t, a) => {
+}, { mediaQueries: q7 } = er, G = (o, t, a) => {
   let r = {};
   return typeof t == "string" || typeof t == "number" || typeof t == "boolean" ? r[`${o}`] = a && a[`${t}`] || `${t}` : Object.keys(t).forEach((i) => {
     i === "xSmall" ? r[o] = a && a[`${t[i]}`] || `${t[i]}` : r[q7.queries[i]] = {
@@ -13260,7 +13260,7 @@ ${u.join(`
       );
     }
   )
-), Lo = () => dr(lt), { mediaQueries: qo } = hr, ah = (o, t, a) => {
+), Lo = () => hr(lt), { mediaQueries: qo } = er, ah = (o, t, a) => {
   let r = "body";
   return eh(o) ? t(o) : (o.xSmall && a >= qo.rawValues.xSmall && (r = o.xSmall), o.small && a >= qo.rawValues.small && (r = o.small), o.medium && a >= qo.rawValues.medium && (r = o.medium), o.large && a >= qo.rawValues.large && (r = o.large), o.xLarge && a >= qo.rawValues.xLarge && (r = o.xLarge), t(r));
 }, I = ae.memo(({ ...o }) => {
@@ -13336,19 +13336,19 @@ ${u.join(`
     [_, W, t]
   );
   return /* @__PURE__ */ e(le, { children: u || s ? /* @__PURE__ */ e(B, { inset: u, outset: s, children: U }) : U });
-}), er = (o, t) => t[o], ih = (o) => er(o, {
+}), or = (o, t) => t[o], ih = (o) => or(o, {
   xSmall: "footnote",
   small: "footnote",
   medium: "body",
   large: "subtitle",
   xLarge: "title"
-}), G1 = (o) => er(o, {
+}), G1 = (o) => or(o, {
   xSmall: "caption",
   small: "body",
   medium: "largeBody",
   large: "largeBody",
   xLarge: "subtitle"
-}), Ar = (o) => er(o, {
+}), Ar = (o) => or(o, {
   xSmall: { heading: "caption", caption: "footnote" },
   small: { heading: "body", caption: "caption" },
   medium: { heading: "largeBody", caption: "body" },
@@ -13744,7 +13744,7 @@ ${u.join(`
       children: o.children
     }
   );
-}), or = ({
+}), rr = ({
   size: o,
   hasNoColor: t = !1
 }) => {
@@ -13989,7 +13989,7 @@ ${u.join(`
       }
     )
   }
-), rr = ({
+), tr = ({
   title: o,
   children: t,
   direction: a,
@@ -14030,7 +14030,7 @@ ${u.join(`
       )
     }
   );
-}, Go = (o, t) => er(o, t), ch = (o, t) => {
+}, Go = (o, t) => or(o, t), ch = (o, t) => {
   switch (o) {
     case "primary":
       return t.primary;
@@ -14130,7 +14130,7 @@ ${u.join(`
             position: "absolute",
             top: "-8px",
             children: /* @__PURE__ */ e(
-              rr,
+              tr,
               {
                 repositionTooltip: !!F,
                 title: F ?? "",
@@ -14564,7 +14564,7 @@ ${u.join(`
       onDragEnd: o
     }
   )
-), cr = ae.memo((o) => {
+), dr = ae.memo((o) => {
   const [t, a] = po(o), { onMouseEvent: r, onClick: i, style: n, className: c, ...d } = a, s = Y(), u = yo(t, s), p = We(null), v = N(
     () => ({
       display: "flex",
@@ -14699,7 +14699,7 @@ ${u.join(`
         )
       ] }),
       /* @__PURE__ */ e(B, { style: M, children: /* @__PURE__ */ e($, { flexDirection: "column", alignItems: "center", width: "100%", children: o.map((_, R) => /* @__PURE__ */ l(
-        cr,
+        dr,
         {
           inset: { vertical: "x2" },
           alignItems: "center",
@@ -14735,7 +14735,7 @@ ${u.join(`
                 className: "navigation-tooltip",
                 style: T,
                 children: /* @__PURE__ */ e(
-                  rr,
+                  tr,
                   {
                     direction: "left",
                     title: _.title,
@@ -14914,13 +14914,13 @@ ${u.join(`
   Te(() => {
     M && Co(M);
   }, [M]);
-  const tr = {
+  const ar = {
     position: "fixed",
     top: "50%",
     left: "50%",
     transform: "translate(-50%, -50%)",
     minWidth: V ? void 0 : "768px"
-  }, ar = {
+  }, ir = {
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
@@ -14958,7 +14958,7 @@ ${u.join(`
     {
       style: {
         zIndex: v ?? 4,
-        ...V ? {} : z ? { ...ar } : { ...tr }
+        ...V ? {} : z ? { ...ir } : { ...ar }
       },
       children: [
         z && /* @__PURE__ */ e(
@@ -15364,7 +15364,7 @@ ${u.join(`
   onBlur: V
 }) => {
   var _r;
-  const [J, ne] = K(0), [_e, ee] = K(!1), [me, he] = K(!1), [ce, Q] = K(!1), [ue, Re] = K(!1), [De, $e] = K(!1), [U1, bo] = K(!1), { inputs: Ve, hocs: I1 } = Y(), Q1 = !!p, _1 = !!c, X1 = !!a, Y1 = d != null && d.type ? d == null ? void 0 : d.type : n, vo = We(null), Co = We(null), tr = _ >= 150, ar = N(
+  const [J, ne] = K(0), [_e, ee] = K(!1), [me, he] = K(!1), [ce, Q] = K(!1), [ue, Re] = K(!1), [De, $e] = K(!1), [U1, bo] = K(!1), { inputs: Ve, hocs: I1 } = Y(), Q1 = !!p, _1 = !!c, X1 = !!a, Y1 = d != null && d.type ? d == null ? void 0 : d.type : n, vo = We(null), Co = We(null), ar = _ >= 150, ir = N(
     () => Ch(
       Ve,
       R,
@@ -15464,8 +15464,8 @@ ${u.join(`
       {
         className: "input-container",
         style: {
-          ...ar,
-          backgroundColor: d ? `${I1.colors.swatches[d.type]._1000}` : ar.background
+          ...ir,
+          backgroundColor: d ? `${I1.colors.swatches[d.type]._1000}` : ir.background
         },
         ref: vo,
         onFocus: () => {
@@ -15567,7 +15567,7 @@ ${u.join(`
               ]
             }
           ),
-          s && /* @__PURE__ */ e(or, { size: "medium" }),
+          s && /* @__PURE__ */ e(rr, { size: "medium" }),
           Z && i !== "number" && !j && /* @__PURE__ */ e(
             $,
             {
@@ -15659,7 +15659,7 @@ ${u.join(`
         }
       )
     ] }),
-    ce && tr ? /* @__PURE__ */ e(
+    ce && ar ? /* @__PURE__ */ e(
       $,
       {
         width: "100%",
@@ -15682,7 +15682,7 @@ ${u.join(`
           }
         )
       }
-    ) : ce && !tr && /* @__PURE__ */ e(
+    ) : ce && !ar && /* @__PURE__ */ e(
       $,
       {
         inset: { top: "x1" },
@@ -15693,7 +15693,7 @@ ${u.join(`
       }
     ),
     U1 && /* @__PURE__ */ e($, { position: "absolute", top: "-50px", right: "-55px", children: /* @__PURE__ */ e(
-      rr,
+      tr,
       {
         title: `Value must be between ${F} and ${z}`,
         direction: "bottom",
@@ -15837,7 +15837,7 @@ ${u.join(`
       }
     )
   ] }) });
-}, sr = ae.forwardRef(
+}, lr = ae.forwardRef(
   (o, t) => {
     const { alignment: a, isSelected: r, onClick: i, id: n } = o, [c, d] = K(!1), s = N(() => ({
       "--option-justify": a === "left" ? "flex-start" : a === "right" ? "flex-end" : "center"
@@ -16101,7 +16101,7 @@ ${u.join(`
             children: [
               o.type === "reactNode" && o.options.map((Q, ue) => /* @__PURE__ */ l(le, { children: [
                 /* @__PURE__ */ e(
-                  sr,
+                  lr,
                   {
                     id: ue,
                     isSelected: _ === ue,
@@ -16116,7 +16116,7 @@ ${u.join(`
               ] })),
               o.type === "text" && o.options.map((Q, ue) => /* @__PURE__ */ l(le, { children: [
                 /* @__PURE__ */ e(
-                  sr,
+                  lr,
                   {
                     id: ue,
                     isSelected: _ === ue,
@@ -16130,7 +16130,7 @@ ${u.join(`
                 Q.hasSeparator && /* @__PURE__ */ e(Vo, { orientation: "horizontal" })
               ] })),
               o.type === "graphicText" && o.options.map((Q, ue) => /* @__PURE__ */ e(
-                sr,
+                lr,
                 {
                   id: ue,
                   isSelected: r === ue,
@@ -16142,7 +16142,7 @@ ${u.join(`
                 ue
               )),
               o.type === "graphic" && o.options.map((Q, ue) => /* @__PURE__ */ e(
-                sr,
+                lr,
                 {
                   id: ue,
                   isSelected: r === ue,
@@ -16174,7 +16174,7 @@ ${u.join(`
       alignItems: "center",
       width: "100%",
       inset: { bottom: "x2" },
-      children: a ? /* @__PURE__ */ e(or, { size: "xLarge" }) : r === "success" ? /* @__PURE__ */ e(Ao, { filled: !0, size: "xLarge" }) : /* @__PURE__ */ e(
+      children: a ? /* @__PURE__ */ e(rr, { size: "xLarge" }) : r === "success" ? /* @__PURE__ */ e(Ao, { filled: !0, size: "xLarge" }) : /* @__PURE__ */ e(
         B,
         {
           width: "84px",
@@ -19134,7 +19134,7 @@ ${u.join(`
       )
     }
   );
-}, lr = (o, t) => Math.abs(o - t), Jh = (o) => o.match(/^\d{4}-\d{2}-\d{2}$/) !== null, e6 = (o) => {
+}, cr = (o, t) => Math.abs(o - t), Jh = (o) => o.match(/^\d{4}-\d{2}-\d{2}$/) !== null, e6 = (o) => {
   if (typeof o == "string") {
     if (Jh(o))
       return o;
@@ -19230,14 +19230,14 @@ ${u.join(`
     /* @__PURE__ */ new Date(
       `${e6(o)}${t ? `T${t.hour}:${t.minute}:${t.second}` : "T00:00:00"}`
     )
-  ), d = () => lr(i.getFullYear(), c.getFullYear()), s = () => lr(i.getMonth(), c.getMonth()), u = () => {
+  ), d = () => cr(i.getFullYear(), c.getFullYear()), s = () => cr(i.getMonth(), c.getMonth()), u = () => {
     const W = i.getDate(), U = c.getDate();
-    return lr(W, U);
+    return cr(W, U);
   }, p = () => i.getDate() - c.getDate(), v = () => {
     var W;
     return p() > 1 ? {
       monthsRemaing: s() - 1,
-      daysRemaining: lr(
+      daysRemaining: cr(
         ((W = r6(c.getMonth())) == null ? void 0 : W.dayCount) ?? 0,
         i.getDate()
       ) + c.getDate(),
@@ -19755,7 +19755,7 @@ ${u.join(`
       }
     )
   ] });
-}, l6 = (o, t) => er(o, t), E8 = ({ size: o }) => {
+}, l6 = (o, t) => or(o, t), E8 = ({ size: o }) => {
   const t = (p, v, F, z) => {
     switch (p) {
       case "small":
@@ -20130,7 +20130,7 @@ ${u.join(`
       T + 1
     )),
     /* @__PURE__ */ e(
-      cr,
+      dr,
       {
         onClick: i,
         height: `${o}px`,
@@ -20538,7 +20538,7 @@ ${u.join(`
   insetBody: r,
   overflow: i
 }) => {
-  const n = dr(zr);
+  const n = hr(zr);
   return /* @__PURE__ */ e(e1, { children: n.activeIndexes.map((c) => c === o && /* @__PURE__ */ e(
     u6,
     {
@@ -20562,7 +20562,7 @@ ${u.join(`
   onHeadingClick: r,
   arrowLocation: i = "right"
 }) => {
-  const n = dr(zr), c = n.activeIndexes.some((s) => s === t), d = (s) => {
+  const n = hr(zr), c = n.activeIndexes.some((s) => s === t), d = (s) => {
     if (n.isExclusive)
       n.activeIndexes.some((u) => u === s) ? n.setActiveIndexes([-1]) : n.setActiveIndexes([s]);
     else if (c) {
@@ -21080,7 +21080,7 @@ ${u.join(`
             justifyContent: "center",
             flexDirection: "column",
             inset: "x2",
-            children: s ? /* @__PURE__ */ l(cr, { flexDirection: "column", children: [
+            children: s ? /* @__PURE__ */ l(dr, { flexDirection: "column", children: [
               /* @__PURE__ */ e(
                 I,
                 {
@@ -21106,7 +21106,7 @@ ${u.join(`
                 },
                 ce
               )) }, me))
-            ] }) : a.map((ee, me) => ee.isActive && /* @__PURE__ */ l(cr, { flexDirection: "column", children: [
+            ] }) : a.map((ee, me) => ee.isActive && /* @__PURE__ */ l(dr, { flexDirection: "column", children: [
               /* @__PURE__ */ e(
                 I,
                 {
@@ -21849,7 +21849,7 @@ ${u.join(`
                     top: `-${s}`,
                     position: "absolute",
                     children: /* @__PURE__ */ e(
-                      rr,
+                      tr,
                       {
                         direction: "bottom",
                         title: u.title,
@@ -22203,7 +22203,7 @@ ${u.join(`
           r ? i : d,
           /* @__PURE__ */ e(pe, { space: "x1_5", orientation: "horizontal" }),
           r ? /* @__PURE__ */ e(
-            or,
+            rr,
             {
               size: s === "xSmall" || s === "small" ? "small" : "medium",
               hasNoColor: !0
@@ -24011,7 +24011,7 @@ const Sr = {
                   {
                     hasMore: !!s,
                     dataLength: v ?? 0,
-                    loader: /* @__PURE__ */ e(B, { inset: "x8", children: /* @__PURE__ */ e(or, { size: "xLarge" }) }),
+                    loader: /* @__PURE__ */ e(B, { inset: "x8", children: /* @__PURE__ */ e(rr, { size: "xLarge" }) }),
                     endMessage: /* @__PURE__ */ l(
                       $,
                       {
@@ -24855,7 +24855,7 @@ const Sr = {
       height: n,
       boxShadow: c = "mediumLight",
       backgroundColor: d
-    } = o, s = We(null), [u, p] = K(), [v, F] = K(!1), z = ir(), M = ir(), H = ir(), T = ir(), _ = async () => {
+    } = o, s = We(null), [u, p] = K(), [v, F] = K(!1), z = nr(), M = nr(), H = nr(), T = nr(), _ = async () => {
       z.start({
         zIndex: 1
       }), await M.start({
@@ -24986,7 +24986,7 @@ const Sr = {
             }
           ),
           /* @__PURE__ */ l(se.div, { animate: M, className: "container loading", children: [
-            /* @__PURE__ */ e(or, { hasNoColor: !0, size: "xSmall" }),
+            /* @__PURE__ */ e(rr, { hasNoColor: !0, size: "xSmall" }),
             /* @__PURE__ */ e(
               I,
               {
@@ -25549,7 +25549,7 @@ const Sr = {
                 exit: { opacity: 0 },
                 transition: { delay: 0.3, duration: 0.3 },
                 children: /* @__PURE__ */ e(
-                  rr,
+                  tr,
                   {
                     title: R,
                     direction: "bottom",
@@ -26296,7 +26296,7 @@ const Sr = {
     blueScale: u,
     purpleScale: p
   };
-};
+}, { colors: bg, spacing: Cg, borderRadius: xg, borders: wg, shadows: kg, textColors: Lg } = er.hocs;
 export {
   Hr as Accordion,
   p6 as AccordionBody,
@@ -26369,7 +26369,7 @@ export {
   co as List,
   fo as ListItem,
   Mr as Loader,
-  or as LoadingSpinner,
+  rr as LoadingSpinner,
   Kh as Logo,
   M8 as MasonryGrid,
   pt as Menu,
@@ -26377,7 +26377,7 @@ export {
   vr as MenuSection,
   mh as Navigation,
   h6 as NavigationPill,
-  sr as Option,
+  lr as Option,
   dg as OrderCard,
   yr as Overlay,
   mg as PaperTypeModal,
@@ -26429,7 +26429,7 @@ export {
   sg as TitledList,
   bh as Todo,
   f8 as Toggle,
-  rr as Tooltip,
+  tr as Tooltip,
   w8 as Transition,
   cg as UploadButton,
   o8 as UpsaleDialog,
@@ -26441,14 +26441,20 @@ export {
   O8 as Zoom,
   $l as bellaCadaeuxTheme,
   W2 as blue42Theme,
+  xg as borderRadius,
+  wg as borders,
+  bg as colors,
   xo as getSize,
   xs as greenerStillTheme,
   Er as promptingUTheme,
   v9 as promptingsTheme,
   y4 as sendOutCardsTheme,
   hn as sendogoTheme,
+  kg as shadows,
+  Cg as spacing,
   ed as streamMarketingTheme,
   c5 as streamVATheme,
+  Lg as textColors,
   fg as useColorSwatch,
   B9 as useTheme
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendoutcards/quantum-design-ui",
-  "version": "2.0.0-alpha.5",
+  "version": "2.0.0-alpha.7",
   "description": "UI component library for Quantum Design System",
   "module": "dist/index.mjs",
   "jsnext:main": "dist/index.mjs",