@sendoutcards/quantum-design-ui 2.0.0-alpha.3 → 2.0.0-alpha.4

package/dist/index.d.ts

@@ -1,7 +1,4726 @@
-export * from './theme/quantumThemeWrapper';
-export * from './exports/atoms';
-export * from './exports/molecules';
-export * from './exports/organisms';
-export * from './exports/socPortfolio';
-export * from './exports/themes';
-export * from './exports/hooks';
+import { AnimationControls } from 'framer-motion';
+import { Context } from 'react';
+import { default as default_2 } from 'react';
+import { FC } from 'react';
+import { FileRejection } from 'react-dropzone';
+import { HslColor } from 'react-colorful';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { MotionProps } from 'framer-motion';
+import { MotionValue } from 'framer-motion';
+import { Provider } from 'react';
+import { RgbColor } from 'react-colorful';
+import { Target as Target_2 } from 'framer-motion';
+import { TargetAndTransition } from 'framer-motion';
+import { VariantLabels } from 'framer-motion';
+
+declare type AccentColorSelection = {
+    swatch: 'accent';
+    shade: LiteralUnion<keyof RequiredColorSwatch>;
+};
+
+export declare type AcceptedFiles = File[];
+
+declare type AcceptedFileType = 'jpg' | 'png' | 'gif' | 'jpeg';
+
+export declare type AcceptSelectedOptionType = {
+    title: string;
+    onClick: () => void;
+};
+
+export declare const Accordion: FC<AccordionProps>;
+
+export declare const AccordionBody: FC<AccordionBodyProps>;
+
+export declare type AccordionBodyProps = {
+    eventKey: number | string;
+    onAnimationComplete?: () => void;
+    overflow?: Overflow;
+    insetBody?: HOCSpacingKeys;
+};
+
+export declare const AccordionHeading: ({ children, eventKey, headingSize, onHeadingClick, arrowLocation, }: AccordionHeadingProps) => JSX_2.Element;
+
+export declare type AccordionHeadingProps = {
+    eventKey: number | string;
+    headingSize?: SizeType;
+    background?: 'background' | 'foreground';
+    arrowLocation?: 'right' | 'left' | 'none';
+    isBackgroundInverse?: boolean;
+    onHeadingClick?: () => void;
+    children: default_2.ReactNode;
+};
+
+export declare type AccordionProps = {
+    defaultActiveKeys?: (number | string)[];
+    isExclusive?: boolean;
+    sections: AccordionSection[];
+    background?: 'background' | 'foreground';
+    isHeadingBackgroundInverse?: boolean;
+    arrowLocation?: 'right' | 'left';
+    /** Make sure duplicate keys are not created in the state if you are overriding */
+    /** TODO - Handle duplicate case in QDS and remove them  */
+    stateOverride?: {
+        activeIndexes: (string | number)[];
+        setActiveIndexes: (activeIndexes: (string | number)[]) => void;
+    };
+    inset?: HOCSpacingKeys;
+    insetBody?: HOCSpacingKeys;
+    overflowBody?: Overflow;
+};
+
+export declare type AccordionSection = {
+    key: number | string;
+    heading: default_2.ReactElement | string;
+    body: default_2.ReactElement;
+    onAnimationComplete?: () => void;
+    onHeadingClick?: () => void;
+};
+
+export declare const AccountMenu: ({ isOpen, navOpen, sections, setIsOpen, user, }: AccountMenuProps) => JSX_2.Element;
+
+export declare type AccountMenuItem = {
+    icon?: IconType;
+    title: string;
+    onClick: () => void;
+    badge?: string;
+};
+
+export declare type AccountMenuProps = {
+    sections: AccountMenuItem[][];
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+    navOpen: boolean;
+    user?: UserInfo;
+    children?: default_2.ReactNode;
+};
+
+declare type Action = {
+    title: string;
+    type?: ButtonType;
+    onClick: () => void;
+};
+
+declare type ActionType = {
+    text: string;
+    onClick: () => void;
+    shouldTextMatchBackground?: boolean;
+    isDisabled?: boolean;
+};
+
+declare type ActionType_2 = {
+    title: string;
+    onClick: () => void;
+    type?: ThemeMode;
+    outlined?: boolean;
+};
+
+export declare const AffiliateShareWidget: FC<AffiliateShareWidgetProps>;
+
+export declare type AffiliateShareWidgetProps = {
+    title: string;
+    shareLink: string;
+};
+
+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 AlignmentOptions = 'left' | 'center' | 'right';
+
+export declare type AlignmentType = 'left' | 'center' | 'right';
+
+export declare const Anchor: default_2.MemoExoticComponent<(props: AnchorProps) => JSX_2.Element>;
+
+export declare type AnchorProps = {
+    href?: string;
+    children?: default_2.ReactNode;
+    title?: string;
+    size?: SizeType;
+    color?: TextColor;
+    isDecorated?: boolean;
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    shouldDownload?: boolean;
+} & HOCBaseProps & HOCMotionProps;
+
+export declare const AnimatedCheckMark: FC<AnimatedCheckMarkProps>;
+
+export declare type AnimatedCheckMarkProps = {
+    size?: SizeType;
+    color?: ColorType;
+    filled?: boolean;
+    sizeMap?: SizeMapType;
+    strokeWidth?: StrokeWidth;
+};
+
+export declare const AnimatedGrid: ({ gridImages, shouldAnimate, animationDirection, rotation, gap, columnSize, rowSize, maxWidth, children, }: AnimateGridProps) => JSX_2.Element;
+
+export declare type AnimatedGridImageType = {
+    url: string;
+    colSpan?: number;
+    rowSpan?: number;
+};
+
+export declare const AnimatedTiltCard: FC<AnimatedTiltCardProps>;
+
+export declare type AnimatedTiltCardProps = {
+    containerHeight?: string;
+    containerWidth?: string;
+    childHeight?: string;
+    childWidth?: string;
+    selectableOptions: SelectableOptions;
+    dimensionScale?: DimensionScale;
+};
+
+export declare type AnimateGridProps = {
+    gridImages?: AnimatedGridImageType[];
+    shouldAnimate?: boolean;
+    animationDirection?: 'horizontal' | 'vertical';
+    rotation?: RotationAndOffsetType;
+    gap?: number;
+    columnSize?: number;
+    rowSize?: number;
+    maxWidth?: number;
+    children?: default_2.ReactNode;
+};
+
+export declare const ArticleCard: FC<ArticleCardProps>;
+
+export declare type ArticleCardProps = {
+    imageURL: string;
+    category?: string;
+    categoryColor: TextColor;
+    title: string;
+    date?: string;
+    onClick?: () => void;
+    href?: string;
+};
+
+export declare const Aside: default_2.MemoExoticComponent<default_2.ForwardRefExoticComponent<{
+    children?: default_2.ReactNode;
+    outsideClick?: () => void;
+    clickElementBypass?: string;
+} & HOCBaseProps & {
+    className?: string;
+    motionKey?: string | number;
+    id?: string;
+} & MotionProps & default_2.RefAttributes<HTMLElement>>>;
+
+export declare type AsideProps = {
+    children?: default_2.ReactNode;
+    outsideClick?: () => void;
+    clickElementBypass?: string;
+} & HOCBaseProps & HOCMotionProps;
+
+export declare const Avatar: FC<AvatarProps>;
+
+export declare type AvatarProps = {
+    avatarImage?: string;
+    initials?: string;
+    size: SizeType;
+    isActive?: boolean;
+    isSelected?: boolean;
+};
+
+export declare const AwardCard: FC<AwardCardProps>;
+
+export declare type AwardCardProps = {
+    image: string;
+    title: string;
+    onClick?: () => void;
+    progress: IncrementalAwardType | number;
+};
+
+export declare const AwardGroupLabel: FC<AwardGroupLabelProps>;
+
+export declare type AwardGroupLabelProps = {
+    image: string;
+    label: string;
+};
+
+declare type BackgroundColor = ColorSelection | LiteralUnion<HOCColorKeys> | Responsive<HOCColorKeys>;
+
+declare type BackgroundPosition = 'center' | 'left top' | 'left center' | 'left bottom' | 'right top' | 'right center' | 'right bottom' | 'center top' | 'center center' | 'center bottom';
+
+declare type BackgroundRepeat = 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' | 'initial' | 'inherit';
+
+declare type BackgroundSize = 'auto' | 'length' | 'cover' | 'contain' | 'initial' | 'inherit';
+
+export declare const Badge: FC<BadgeProps>;
+
+export declare type BadgeProps = {
+    item: string;
+    backgroundColor?: BackgroundColor;
+    icon?: IconType;
+    size?: SizeType;
+    color?: TextColor;
+};
+
+export declare const Banner: ({ isOutlined, ...props }: BannerProps) => JSX_2.Element;
+
+declare type BannerDetail = {
+    message: string;
+    icon?: IconType;
+};
+
+export declare type BannerProps = BannerWithTitle | BannerWithChildren;
+
+declare type BannerWithChildren = BaseBannerProps & {
+    children: default_2.ReactNode;
+    bannerTitle?: never;
+};
+
+declare type BannerWithTitle = BaseBannerProps & {
+    bannerTitle: BannerDetail;
+    children?: never;
+};
+
+export declare const Bar: FC<BarProps>;
+
+export declare type BarProps = {
+    height: Height;
+    width: Width;
+    overflow?: Overflow;
+    position?: Position;
+    backgroundColor?: BackgroundColor;
+};
+
+declare type BaseBannerProps = {
+    status: StatusType;
+    isOutlined?: boolean;
+    onClose?: () => void;
+};
+
+export declare const bellaCadaeuxTheme: Entities;
+
+export declare const BlockQuote: ({ author, background, textColor, type, content, contentTextType, borderRadius, boxShadow, children, }: BlockQuoteProps) => JSX_2.Element;
+
+export declare type BlockQuoteProps = {
+    author?: string;
+    background?: 'background' | 'foreground';
+    type?: QuoteType;
+    textColor?: TextColor;
+    content?: string;
+    contentTextType?: TextType | Responsive<TextType>;
+    borderRadius?: BorderRadiusDirection | LiteralUnion<HOCBorderRadiusKeys>;
+    boxShadow?: Shadows;
+    children?: default_2.ReactNode;
+};
+
+export declare const blue42Theme: Entities;
+
+declare type BlueScaleColorSelection = {
+    swatch: 'blueScale';
+    shade: LiteralUnion<keyof RequiredColorSwatch>;
+};
+
+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 = {
+    left?: LiteralUnion<HOCBorderRadiusKeys, string> | Responsive<LiteralUnion<HOCBorderRadiusKeys, string>>;
+    right?: LiteralUnion<HOCBorderRadiusKeys, string> | Responsive<LiteralUnion<HOCBorderRadiusKeys, string>>;
+    top?: LiteralUnion<HOCBorderRadiusKeys, string> | Responsive<LiteralUnion<HOCBorderRadiusKeys, string>>;
+    topRight?: LiteralUnion<HOCBorderRadiusKeys, string> | Responsive<LiteralUnion<HOCBorderRadiusKeys, string>>;
+    topLeft?: LiteralUnion<HOCBorderRadiusKeys, string> | Responsive<LiteralUnion<HOCBorderRadiusKeys, string>>;
+    bottom?: LiteralUnion<HOCBorderRadiusKeys, string> | Responsive<LiteralUnion<HOCBorderRadiusKeys, string>>;
+    bottomRight?: LiteralUnion<HOCBorderRadiusKeys, string> | Responsive<LiteralUnion<HOCBorderRadiusKeys, string>>;
+    bottomLeft?: LiteralUnion<HOCBorderRadiusKeys, string> | Responsive<LiteralUnion<HOCBorderRadiusKeys, string>>;
+};
+
+declare type BorderRadiusDirection = BorderRadius_2 & Responsive<LiteralUnion<HOCBorderRadiusKeys, string>>;
+
+declare const borders: {
+    thin: string;
+    default: string;
+    bold: string;
+};
+
+declare type BorderStyleDirection = BorderDirection<BorderStyles> | BorderDirection<Responsive<BorderStyles>>;
+
+declare type BorderStyles = 'none' | 'hidden' | 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'initial' | 'inherit';
+
+declare type BorderWidth = BorderDirection<HOCBorderWidthKeys> | BorderDirection<Responsive<HOCBorderWidthKeys>>;
+
+declare type BorderWidthDirection = BorderWidth & Responsive<HOCBorderWidthKeys>;
+
+export declare type BrandTypes = 'soc' | 'greenerStill' | 'bellaCadeaux' | 'promptingU' | 'blue42' | 'streamVA' | 'streamMarketing' | 'soc' | 'promptingsAcademy' | 'promptings';
+
+export declare const BulkSend: FC<BulkSendProps>;
+
+export declare type BulkSendProps = {
+    quantity: number;
+    setQuantity: (quantity: number) => void;
+    quantityDescription: string;
+    minQuantity: number;
+    maxQuantity: number;
+    sliderFill: SliderProgressColor;
+    sliderWidth: number;
+    unitPrice: number;
+    salePrice?: number;
+    title: string;
+    description: string;
+    configurationSections: ConfigurationOptionSection[];
+    isDisabled?: boolean;
+    isActive: boolean;
+    setIsActive: (isActive: boolean) => void;
+    addDialog?: ConfirmDialogProps;
+    removeDialog?: ConfirmDialogProps;
+    hasIncrement?: boolean;
+    isConfigurable?: boolean;
+    disableMessage: string;
+    sliderImage?: string;
+    sliderOrientation?: 'vertical' | 'horizontal';
+    secondaryAction?: default_2.ReactNode;
+};
+
+export declare const Button: ({ title, type, size, onClick, children, disabled, hover, outlined, onMouseEvent, fullWidth, textColorOverride, backgroundColorOverride, disabledCaption, id, icon, fontWeight, boxShadow, }: ButtonProps) => JSX_2.Element;
+
+export declare type ButtonProps = {
+    title?: string;
+    type?: ButtonType;
+    size?: SizeType;
+    onClick?: (() => void) | 'submitForm';
+    onMouseEvent?: OnMouseEvent;
+    disabled?: boolean;
+    hover?: boolean;
+    outlined?: boolean;
+    fullWidth?: boolean;
+    textColorOverride?: LiteralUnion<TextColor> | string;
+    backgroundColorOverride?: string;
+    disabledCaption?: string;
+    disabledDirection?: DirectionType;
+    id?: string;
+    icon?: {
+        name: IconType;
+        fill?: LiteralUnion<IconColors>;
+    };
+    fontWeight?: WeightType;
+    children?: default_2.ReactNode;
+    boxShadow?: boolean;
+};
+
+export declare type ButtonStyle = typeof entities.buttons.primary;
+
+export declare type ButtonType = ThemeMode | 'smoke';
+
+export declare const ButtonWithMenu: FC<ButtonWithMenuProps>;
+
+export declare type ButtonWithMenuProps = {
+    menuLocation: MenuLocationType;
+    menuOptions: MenuOptionType[];
+    isExpanded: boolean;
+    isLoading?: boolean;
+    loadingMessage?: string;
+    onClick: () => void;
+} & ButtonProps;
+
+export declare const Capsule: FC<CapsuleProps>;
+
+export declare type CapsuleProps = {
+    title: string;
+    backgroundColor?: BackgroundColor;
+    fontColor?: TextColor;
+    boxShadow?: Shadows;
+};
+
+export declare type CapsuleType = 'new' | 'fix' | 'note';
+
+export declare const Card: (props: CardProps) => JSX_2.Element;
+
+export declare const CardEntryDialog: FC<CardEntryDialogProps>;
+
+export declare type CardEntryDialogProps = {
+    title: string;
+    description: string;
+    primaryAction: ActionType_2;
+    secondaryAction: ActionType_2;
+    isOpen: boolean;
+    onClose: () => void;
+};
+
+export declare type CardProps = {
+    onClick?: () => void;
+    outsideClick?: () => void;
+    className?: string;
+    children?: default_2.ReactNode;
+} & HOCBaseProps & HOCMotionProps;
+
+export declare const CardQuantitySlider: FC<CardQuantitySliderProps>;
+
+export declare type CardQuantitySliderProps = {
+    cardImage?: string;
+    cardOrientation?: 'vertical' | 'horizontal';
+    quantityDescription: string;
+    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 const Checkbox: FC<CheckboxProps>;
+
+export declare type CheckboxProps = {
+    onChange: (isChecked: boolean) => void;
+    isChecked: boolean;
+    type?: CheckboxType;
+    label?: string;
+    id?: string;
+    inputDisplay?: string;
+};
+
+export declare type CheckboxType = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'dark';
+
+export declare const Circle: FC<CircleProps>;
+
+export declare const CircleMenu: FC<CircleMenuProps>;
+
+export declare type CircleMenuProps = {
+    icon: IconType;
+    size: SizeType;
+    setIsSheetOpen: (isOpen: boolean) => void;
+    isOpen: boolean;
+};
+
+export declare type CircleProps = {
+    icon: IconType;
+    fill: IconColors;
+    size?: SizeType;
+    scale?: number;
+    layer?: number;
+    onClick?: () => void;
+    animate?: {};
+};
+
+declare const Clipboard_2: FC<ClipboardProps>;
+export { Clipboard_2 as Clipboard }
+
+export declare type ClipboardProps = {
+    copyText: string;
+    width?: string;
+    type?: 'text' | 'link';
+};
+
+export declare const CloseButton: FC<CloseButtonProps>;
+
+export declare type CloseButtonProps = {
+    onClose: () => void;
+    backgroundColor?: ColorSelection | LiteralUnion<HOCColorKeys> | Responsive<HOCColorKeys>;
+    fill?: IconColors;
+    top?: string;
+    right?: string;
+    size?: SizeType;
+    id?: string;
+};
+
+declare type ColorModeType = 'light' | 'dark';
+
+export declare const ColorOption: FC<ColorOptionProps>;
+
+export declare type ColorOptionProps = {
+    hexColor: string;
+    size?: SizeType;
+    onClick: () => void;
+};
+
+declare const colors: {
+    swatches: {
+        primaryBrand: Required<ColorSwatch>;
+        secondaryBrand: Required<ColorSwatch>;
+        success: Required<ColorSwatch>;
+        danger: Required<ColorSwatch>;
+        warning: Required<ColorSwatch>;
+        accent: Required<ColorSwatch>;
+        grayScale: ColorSwatch;
+        blueScale: Required<ColorSwatch>;
+        purpleScale: ColorSwatch;
+    };
+    background: string;
+    foreground: string;
+};
+
+declare type ColorSelection = PrimaryBrandColorSelection | SecondaryBrandColorSelection | SuccessColorSelection | WarningColorSelection | DangerColorSelection | AccentColorSelection | GrayScaleColorSelection | BlueScaleColorSelection | PurpleScaleColorSelection;
+
+declare type ColorSwatch = {
+    base: string;
+    _100?: string;
+    _200?: string;
+    _300?: string;
+    _400?: string;
+    _500?: string;
+    _600?: string;
+    _700?: string;
+    _800?: string;
+    _900?: string;
+    _1000?: string;
+};
+
+export declare const ColorThumbnail: FC<ColorThumbnailProps>;
+
+export declare type ColorThumbnailProps = {
+    backgroundColor: string;
+    isSelected: boolean;
+    isRounded?: boolean;
+    thumbnailSize?: number;
+    outset?: SpacingDirection | LiteralUnion<HOCSpacingKeys>;
+    onSelect: (fill: string) => void;
+    isLoading?: boolean;
+};
+
+declare type ColorType = keyof typeof entities.animatedCheckmark.colors;
+
+declare type ColorType_2 = keyof typeof entities.animatedCheckmark.colors;
+
+export declare const ComparisonIncludesList: FC<ComparisonIncludesListProps>;
+
+export declare type ComparisonIncludesListProps = {
+    items: ComparisonItemProps[];
+    isMinified?: boolean;
+};
+
+export declare const ComparisonItem: FC<ComparisonItemProps>;
+
+export declare type ComparisonItemProps = {
+    title: string;
+    description?: string | string[];
+    isIncluded: boolean;
+    checkMarkColor?: ColorType_2;
+    maxWidth?: string;
+    isMinified?: boolean;
+};
+
+export declare const ConfigurationCard: FC<ConfigurationCardProps>;
+
+export declare type ConfigurationCardProps = {
+    graphic?: default_2.ReactNode;
+    title: string;
+    secondaryTitle?: string;
+    description?: string;
+    cost?: number | string;
+    isSelected?: boolean;
+    onSelect?: (configurationId: string) => void;
+    configurationId: string;
+    itemPriceTitle?: string;
+    layout?: 'horizontal' | 'vertical';
+    type?: ConfigurationCardType;
+    featureCaption?: string;
+    backgroundColor?: HOCColorKeysWithSwatch;
+};
+
+declare type ConfigurationCardType = 'addon' | 'info' | 'upsale';
+
+declare type ConfigurationListOption = {
+    graphicType?: ConfigurationCardProps['graphic'];
+    configurationId: string;
+    configurationTitle: string;
+    configurationDescription: string;
+    configurationPrice?: number;
+    configurationItemPriceTitle?: string;
+};
+
+export declare type ConfigurationOptionSection = {
+    title: string;
+    description: string;
+    tag?: string;
+    activeConfigurationId: string;
+    setActiveConfigurationId: (configurationId: string) => void;
+    configurationList: ConfigurationListOption[];
+};
+
+export declare const ConfirmDialog: FC<ConfirmDialogProps>;
+
+export declare type ConfirmDialogProps = {
+    requireScroll?: boolean;
+    accept: {
+        title: string;
+        onClick: () => void;
+        id?: string;
+        isDisabled?: boolean;
+    };
+    decline?: {
+        title: string;
+        onClick: () => void;
+        id?: string;
+        isDisabled?: boolean;
+    };
+    title: string;
+    description: string;
+    zIndex?: number;
+    isOpen: boolean;
+    primaryAction?: 'accept' | 'decline';
+    onClose?: () => void;
+    hasStackedActions?: boolean;
+    additionalLink?: {
+        title: string;
+        onClick: () => void;
+    };
+} & DialogProps;
+
+export declare const Content: FC<ContentProps>;
+
+declare type ContentProps = {
+    y?: MotionValue;
+    isMobile: boolean;
+    isOpen: boolean;
+    onDragEnd: () => void;
+    menuSize: number;
+    children: default_2.ReactNode;
+    logo: IconType;
+    isFullScreen?: boolean;
+};
+
+export declare const ContentPusher: FC<ContentPusherProps>;
+
+export declare type ContentPusherProps = {
+    zones: ZoneType;
+    zoneToOpen: keyof ZoneType;
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+    children?: default_2.ReactNode;
+};
+
+export declare const ContextBar: ({ children }: ContextBarProps) => JSX_2.Element;
+
+declare type ContextBarProps = {
+    children?: default_2.ReactNode;
+};
+
+export declare type ConvertedColorType = QuantumRGB | QuantumHex | QuantumHSL;
+
+export declare const CountdownTimer: FC<CountdownTimerProps>;
+
+export declare type CountdownTimerProps = {
+    endDate: DateStr;
+    endTime?: {
+        hour: number;
+        minute: number;
+        second: number;
+    };
+    size?: SizeType;
+    timeReachedMessage?: string;
+};
+
+declare type Country = {
+    isoCode: string;
+    callingCode: number;
+    hasSeparator?: boolean;
+};
+
+declare type CSSGridBaseValues = 'start' | 'end' | 'space-evenly' | 'center';
+
+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';
+    shade: LiteralUnion<keyof RequiredColorSwatch>;
+};
+
+declare type DateStr = string & DateStrBrand;
+
+declare enum DateStrBrand {
+}
+
+export declare const Dialog: default_2.ForwardRefExoticComponent<DialogProps & {
+    children: default_2.ReactNode;
+} & default_2.RefAttributes<HTMLDivElement>>;
+
+export declare type DialogProps = {
+    zIndex?: number;
+    isOpen: boolean;
+    onClose?: () => void;
+    maxWidth?: Responsive<LiteralUnion<HOCSpacingKeys>> | LiteralUnion<HOCSpacingKeys>;
+    maxHeight?: Responsive<LiteralUnion<HOCSpacingKeys>> | LiteralUnion<HOCSpacingKeys>;
+    bgElementSelector?: string;
+    isFullScreen?: boolean;
+    closeButtonId?: string;
+    insetOverride?: HOCSpacingKeys | string;
+    outsetOverride?: HOCSpacingKeys | string;
+    height?: Height;
+    width?: Width;
+    shouldScroll?: boolean;
+    borderRadius?: BorderRadius;
+    pinned?: PinnedType;
+    backgroundVariant?: 'solid' | 'blur';
+    footer?: default_2.ReactNode;
+};
+
+export declare type DimensionScale = 'small' | 'medium' | 'large';
+
+export declare type DirectionType = 'left' | 'right' | 'top' | 'bottom';
+
+declare type Disclaimer = {
+    linkTitle?: string;
+    termsTitle: string;
+    termsDescription: string;
+};
+
+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;
+
+export declare type DisplayCardPaperOptions = {
+    title: string;
+    description: string;
+    image: string;
+};
+
+export declare type DisplayCardProps = {
+    title: string;
+    description: string;
+    children?: default_2.ReactNode;
+};
+
+export declare const Div: default_2.MemoExoticComponent<default_2.ForwardRefExoticComponent<{
+    children?: default_2.ReactNode;
+    outsideClick?: () => void;
+    clickElementBypass?: string;
+    tabIndex?: number;
+} & HOCBaseProps & {
+    className?: string;
+    motionKey?: string | number;
+    id?: string;
+} & MotionProps & default_2.RefAttributes<HTMLDivElement>>>;
+
+export declare type DivProps = {
+    children?: default_2.ReactNode;
+    outsideClick?: () => void;
+    clickElementBypass?: string;
+    tabIndex?: number;
+} & HOCBaseProps & HOCMotionProps;
+
+export declare const DownloadButton: FC<DownloadButtonProps>;
+
+export declare type DownloadButtonProps = {
+    buttonProps: ButtonProps;
+    href: string;
+    id: string;
+};
+
+export declare const DragBar: default_2.ForwardRefExoticComponent<DragBarProps & default_2.RefAttributes<HTMLDivElement>>;
+
+declare type DragBarProps = {
+    x?: MotionValue;
+    onDragEnd: () => void;
+    dragConstraints?: {
+        left: number;
+        right: number;
+    };
+};
+
+export declare const DragBox: default_2.ForwardRefExoticComponent<DragBoxProps & default_2.RefAttributes<HTMLDivElement>>;
+
+export declare type DragBoxProps = {
+    x: MotionValue;
+    onDragEnd: () => void;
+};
+
+export declare const Drawer: ({ children, location, isOpen, isTabHidden, onClick, openValue, offset, zIndex, showTab, inset, overflow, closedValue, tabMode, shouldHideScroll, backgroundColor, }: DrawerProps) => JSX_2.Element;
+
+export declare type DrawerLocation = 'top' | 'right' | 'bottom' | 'left';
+
+export declare type DrawerProps = {
+    children?: default_2.ReactNode;
+    isOpen: boolean;
+    onClick: () => void;
+    isTabHidden?: boolean;
+    location: DrawerLocation;
+    openValue: number;
+    offset?: number;
+    zIndex?: number;
+    showTab?: boolean;
+    inset?: SpacingDirection | LiteralUnion<HOCSpacingKeys>;
+    outset?: SpacingDirection | LiteralUnion<HOCSpacingKeys>;
+    overflow?: Overflow;
+    closedValue?: number;
+    tabMode?: 'dark' | 'light';
+    shouldHideScroll?: boolean;
+    backgroundColor?: LiteralUnion<'blurredGlass'>;
+};
+
+export declare type DropdownLink = {
+    title: string;
+    featuredLinkColumn?: Link[];
+    linkColumns: LinkColumnType[];
+};
+
+export declare const DropDownMenu: FC<DropDownMenuProps>;
+
+export declare type DropDownMenuProps = {
+    linkColumn: LinkColumnType;
+    isOpen: boolean;
+    top: number;
+    right?: number;
+    left?: number;
+};
+
+declare type Entities = typeof entities;
+
+declare const entities: {
+    mediaQueries: {
+        queries: {
+            xSmall: string;
+            small: string;
+            medium: string;
+            large: string;
+            xLarge: string;
+        };
+        rawValues: {
+            xSmall: number;
+            small: number;
+            medium: number;
+            large: number;
+            xLarge: number;
+        };
+    };
+    hocs: {
+        colors: {
+            swatches: {
+                primaryBrand: Required<ColorSwatch>;
+                secondaryBrand: Required<ColorSwatch>;
+                success: Required<ColorSwatch>;
+                danger: Required<ColorSwatch>;
+                warning: Required<ColorSwatch>;
+                accent: Required<ColorSwatch>;
+                grayScale: ColorSwatch;
+                blueScale: Required<ColorSwatch>;
+                purpleScale: ColorSwatch;
+            };
+            background: string;
+            foreground: string;
+        };
+        textColors: {
+            primaryBrand: string;
+            secondaryBrand: string;
+            primaryHeading: string | undefined;
+            primaryBody: string;
+            inverseHeading: string;
+            inverseBody: string;
+            accent: string;
+            success: string;
+            warning: string;
+            danger: string;
+            anchorBlue: string;
+        };
+        spacing: {
+            x0: string;
+            x_25: string;
+            x_5: string;
+            x_75: string;
+            x1: string;
+            x1_5: string;
+            x2: string;
+            x2_5: string;
+            x3: string;
+            x4: string;
+            x5: string;
+            x6: string;
+            x7: string;
+            x8: string;
+            x9: string;
+        };
+        borderRadius: {
+            none: string;
+            small: string;
+            medium: string;
+            default: string;
+            large: string;
+            circle: string;
+        };
+        shadows: {
+            light: string;
+            mediumLight: string;
+            mediumDark: string;
+            dark: string;
+            generate: (shadow: ("dark" | "mediumDark" | "mediumLight" | "light" | "xLight") | number[], color?: string, reverseOffset?: boolean) => string;
+        };
+        borders: {
+            thin: string;
+            default: string;
+            bold: string;
+        };
+    };
+    text: {
+        imports: {
+            body: string;
+            heading: string;
+        };
+        families: {
+            body: string;
+            heading: string;
+        };
+        types: {
+            heroTitle: {
+                color: string | undefined;
+                size: string;
+                fontWeight: number;
+                lineHeight: string;
+                fontFamily: string;
+            };
+            title: {
+                color: string | undefined;
+                size: string;
+                fontWeight: number;
+                lineHeight: string;
+                fontFamily: string;
+            };
+            subtitle: {
+                color: string | undefined;
+                size: string;
+                fontWeight: number;
+                lineHeight: string;
+                fontFamily: string;
+            };
+            largeBody: {
+                color: string;
+                size: string;
+                fontWeight: number;
+                lineHeight: string;
+                fontFamily: string;
+            };
+            body: {
+                color: string;
+                size: string;
+                fontWeight: number;
+                lineHeight: string;
+                fontFamily: string;
+            };
+            caption: {
+                color: string;
+                size: string;
+                fontWeight: number;
+                lineHeight: string;
+                fontFamily: string;
+            };
+            footnote: {
+                color: string;
+                size: string;
+                fontWeight: number;
+                lineHeight: string;
+                fontFamily: string;
+            };
+        };
+        colors: {
+            primaryBrand: string;
+            secondaryBrand: string;
+            primaryHeading: string | undefined;
+            primaryBody: string;
+            inverseHeading: string;
+            inverseBody: string;
+            accent: string;
+            success: string;
+            warning: string;
+            danger: string;
+            anchorBlue: string;
+        };
+        weights: {
+            thin: number;
+            regular: number;
+            semiBold: number;
+            bold: number;
+            extraBold: number;
+        };
+    };
+    spacing: {
+        x0: string;
+        x_25: string;
+        x_5: string;
+        x_75: string;
+        x1: string;
+        x1_5: string;
+        x2: string;
+        x2_5: string;
+        x3: string;
+        x4: string;
+        x5: string;
+        x6: string;
+        x7: string;
+        x8: string;
+        x9: string;
+    };
+    buttons: {
+        primary: {
+            backgroundColor: string;
+            fontColor: string;
+            fontFamily: string;
+        };
+        secondary: {
+            backgroundColor: string;
+            fontColor: string;
+            fontFamily: string;
+        };
+        warning: {
+            backgroundColor: string;
+            fontColor: string;
+            fontFamily: string;
+        };
+        success: {
+            backgroundColor: string;
+            fontColor: string;
+            fontFamily: string;
+        };
+        danger: {
+            backgroundColor: string;
+            fontColor: string;
+            fontFamily: string;
+        };
+        shadow: {
+            backgroundColor: string;
+            fontColor: string;
+            fontFamily: string;
+        };
+        accent: {
+            backgroundColor: string;
+            fontColor: string;
+            fontFamily: string;
+        };
+        smoke: {
+            backgroundColor: string;
+            fontColor: string;
+            fontFamily: string;
+        };
+        boxShadow: (shadow: ("dark" | "mediumDark" | "mediumLight" | "light" | "xLight") | number[], color?: string, reverseOffset?: boolean) => string;
+        borderSize: string;
+        outlinedBackgroundColor: string;
+        fontWeight: number;
+        sizes: {
+            xSmall: {
+                inset: string;
+                outlinedInset: {
+                    vertical: string;
+                    horizontal: string;
+                };
+                fontSize: string;
+                borderRadius: string;
+            };
+            small: {
+                inset: string;
+                outlinedInset: {
+                    vertical: string;
+                    horizontal: string;
+                };
+                fontSize: string;
+                borderRadius: string;
+            };
+            medium: {
+                inset: string;
+                outlinedInset: {
+                    vertical: string;
+                    horizontal: string;
+                };
+                fontSize: string;
+                borderRadius: string;
+            };
+            large: {
+                inset: string;
+                outlinedInset: {
+                    vertical: string;
+                    horizontal: string;
+                };
+                fontSize: string;
+                borderRadius: string;
+            };
+            xLarge: {
+                inset: string;
+                outlinedInset: {
+                    vertical: string;
+                    horizontal: string;
+                };
+                fontSize: string;
+                borderRadius: string;
+            };
+        };
+    };
+    inputs: {
+        checkbox: {
+            border: string;
+            borderRadius: string;
+            unCheckedBackgroundColor: string | undefined;
+            checkmarkColor: string;
+            labelColor: string;
+        };
+        text: {
+            borderRadius: string;
+            labelColor: Required<ColorSwatch>;
+            placeholderColor: string;
+            labelFontSize: string;
+            textFontSize: string;
+            borderWidth: string;
+            defaultFocusColor: string;
+        };
+        select: {
+            dropDownShadow: string;
+            dropDownBackgroundColor: string;
+            boxShadow: string;
+            borderRadius: string;
+        };
+        number: {
+            backgroundColor: string | undefined;
+            fontColor: string;
+            fontSize: string;
+            borderRadius: string;
+        };
+        backgroundColor: string;
+        fontSize: string;
+        fontColor: string;
+        fontFamily: string;
+        colors: {
+            primary: string;
+            secondary: string;
+            success: string;
+            warning: string;
+            danger: string;
+            accent: string;
+            dark: string;
+            blue: string;
+        };
+    };
+    icons: {
+        sizes: {
+            xSmall: number;
+            small: number;
+            medium: number;
+            large: number;
+            xLarge: number;
+        };
+        colors: {
+            default: string | undefined;
+            primaryBodyText: string;
+            primaryHeadingText: string | undefined;
+            inverseBodyText: string;
+            inverseHeadingText: string;
+            primaryBrand: string;
+            secondaryBrand: string;
+            warning: string;
+            danger: string;
+            success: string;
+            background: string;
+            accent: string;
+        };
+    };
+    card: {
+        backgroundColor: string;
+        borderRadius: string;
+        boxShadow: string;
+        defaultInset: string;
+    };
+    separator: {
+        border: string;
+        color: string | undefined;
+    };
+    loadingSpinner: {
+        size: {
+            xSmall: number;
+            small: number;
+            medium: number;
+            large: number;
+            xLarge: number;
+        };
+        colors: {
+            primary: string;
+            secondary: string;
+            success: string;
+            warning: string;
+            danger: string;
+        };
+    };
+    animatedCheckmark: {
+        sizeMap: {
+            xSmall: number;
+            small: number;
+            medium: number;
+            large: number;
+            xLarge: number;
+        };
+        colors: {
+            primary: string;
+            secondary: string;
+            success: string;
+            accent: string;
+        };
+        strokeWidth: {
+            small: number;
+            default: number;
+            large: number;
+        };
+        borderRadius: string;
+        checkmarkFilledColor: string;
+    };
+    avatar: {
+        borderWidth: string;
+        borderColor: string | undefined;
+        borderRadius: string;
+        boxShadow: string;
+        backgroundColor: string;
+        bubbleBackgroundColors: {
+            isActive: string;
+            default: string | undefined;
+        };
+        defaultBackgroundColors: {
+            primary: string;
+            secondary: string;
+            success: string;
+            accent: string;
+            warning: string;
+            danger: string;
+        };
+        sizes: {
+            xSmall: {
+                avatarSize: number;
+                bubbleLeftPosition: number;
+                bubbleSize: number;
+            };
+            small: {
+                avatarSize: number;
+                bubbleLeftPosition: number;
+                bubbleSize: number;
+            };
+            medium: {
+                avatarSize: number;
+                bubbleLeftPosition: number;
+                bubbleSize: number;
+            };
+            large: {
+                avatarSize: number;
+                bubbleLeftPosition: number;
+                bubbleSize: number;
+            };
+            xLarge: {
+                avatarSize: number;
+                bubbleLeftPosition: number;
+                bubbleSize: number;
+            };
+        };
+    };
+    dialog: {
+        backgroundColor: string;
+        boxShadow: string;
+        defaultInset: string;
+    };
+    drawer: {
+        backgroundColor: string;
+        borderRadius: string;
+        boxShadow: string;
+        bottomDirectionShadow: string;
+        hoverBoxShadow: string;
+        hoverBottomDirectionShadow: string;
+        defaultInset: string;
+        tab: {
+            dark: {
+                backgroundColor: string | undefined;
+                arrowColor: string;
+            };
+            light: {
+                backgroundColor: string;
+                arrowColor: string | undefined;
+            };
+        };
+    };
+    sheet: {
+        mobileBorderRadius: string;
+        desktopBorderRadius: string;
+        backgroundColor: string;
+        boxShadow: string;
+    };
+    slider: {
+        backgroundColor: string;
+        borderRadius: string;
+        handleRadius: string;
+        handleColor: string;
+        handleShadow: string;
+    };
+    navigation: {
+        backgroundColor: string;
+        border: string;
+        borderColor: string | undefined;
+    };
+    toggle: {
+        isActiveColor: string;
+        isNotActiveColor: string | undefined;
+    };
+    tooltip: {
+        lightBackgroundColor: string;
+        darkBackgroundColor: string | undefined;
+        boxShadow: string;
+        borderColor: string;
+    };
+    colorPicker: {
+        backgroundColor: string;
+        borderColor: string;
+        boxShadow: string;
+        borderRadius: string;
+    };
+    sphere: Sphere_2;
+    widget: Widget;
+    colorOption: {
+        defaults: {
+            circleFill: string;
+            innerRing: string;
+            outerRing: string;
+        };
+    };
+};
+
+export declare const ExpandedAwardCard: FC<ExpandedAwardProps>;
+
+export declare type ExpandedAwardProps = {
+    image: string;
+    title: string;
+    description: string;
+    checklist: string[];
+    checklistTitle: string;
+    checklistSubtitle: string;
+    close: () => void;
+    progress: IncrementalAwardType | number;
+};
+
+declare type ExpandedOptionChild = {
+    expandedChild?: default_2.ReactNode;
+};
+
+export declare type ExtraLinkType = {
+    title: string;
+    onClick?: () => void;
+    href?: string;
+};
+
+declare type ExtraLinkType_2 = {
+    title: string;
+    onClick?: () => void;
+    href?: string;
+};
+
+export declare const FeatureAnnouncement: FC<FeatureAnnouncementProps>;
+
+export declare type FeatureAnnouncementProps = {
+    title: string;
+    description: string;
+    locationId?: string;
+    onClose?: () => void;
+    button?: {
+        title: string;
+        onClick?: () => void;
+        type?: ButtonType;
+    };
+    imageURL: string;
+    backgroundColor?: BackgroundColor;
+    maxWidth?: string;
+};
+
+export declare const FeatureBadge: FC<FeatureBadgeProps>;
+
+export declare type FeatureBadgeProps = {
+    title: string;
+    backgroundColor?: HOCSwatchColorKeys;
+    icon?: IconType;
+    color?: TextColor;
+    size?: SizeType;
+    onClick?: () => void;
+};
+
+declare type FeaturedItemStyleType = {
+    backgroundColor: PricingTileColorType;
+    accentColor: PricingTileColorType;
+    textColor: 'gray' | 'white';
+};
+
+declare type Features = FeatureWithSubFeatures | string;
+
+declare type FeatureWithSubFeatures = {
+    feature: string;
+    subFeatures: string[];
+    isNotIncluded?: boolean;
+};
+
+declare type FilterType = {
+    name: string;
+    filter?: string;
+    background?: string;
+    mixBlendMode?: string;
+    opacity?: string;
+};
+
+export declare const Flex: default_2.MemoExoticComponent<(props: FlexProps) => JSX_2.Element>;
+
+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 FlexProps = {
+    children?: default_2.ReactNode;
+    outsideClick?: () => void;
+} & HOCBaseProps & HOCMotionProps;
+
+declare type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
+
+declare type FramerAnimation = AnimationControls | TargetAndTransition | VariantLabels | boolean;
+
+export declare const getSize: (size: SizeType) => HOCSpacingKeys;
+
+declare type GlareType = 'standard' | 'satin' | 'pearl';
+
+declare type GrayScaleColorSelection = {
+    swatch: 'grayScale';
+    shade: LiteralUnion<keyof RequiredColorSwatch>;
+};
+
+export declare const greenerStillTheme: Entities;
+
+export declare const Grid: ({ columnSize, rowSize, gap, maxWidth, children, height, overflow, isDense, animate, exit, initial, }: GridProps) => JSX_2.Element;
+
+export declare const GridItem: ({ gridRowSpan, gridColSpan, gridRowStart, gridColStart, borderRadius, aspectRatio, children, }: GridItemProps) => JSX_2.Element;
+
+declare type GridItemProps = {
+    gridRowSpan?: number;
+    gridColSpan?: number;
+    gridRowStart?: number;
+    gridColStart?: number;
+    borderRadius?: BorderRadiusDirection | LiteralUnion<HOCBorderRadiusKeys>;
+    aspectRatio?: string;
+    children?: default_2.ReactNode;
+};
+
+export declare type GridProps = {
+    columnSize: number;
+    rowSize: number;
+    gap: number;
+    maxWidth?: number;
+    height?: string;
+    overflow?: string;
+    isDense?: boolean;
+    animate?: FramerAnimation;
+    initial?: boolean | Target_2 | VariantLabels;
+    exit?: TargetAndTransition | VariantLabels;
+    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;
+    borderWidth?: BorderWidthDirection | HOCBorderWidthKeys;
+    borderStyle?: BorderStyleDirection | BorderStyles;
+    borderColor?: ColorSelection | LiteralUnion<HOCColorKeys>;
+    backgroundColor?: BackgroundColor;
+    color?: LiteralUnion<TextColor>;
+    boxShadow?: Shadows;
+    height?: Height;
+    width?: Width;
+    maxHeight?: Responsive<LiteralUnion<HOCSpacingKeys>> | LiteralUnion<HOCSpacingKeys>;
+    maxWidth?: Responsive<LiteralUnion<HOCSpacingKeys>> | LiteralUnion<HOCSpacingKeys>;
+    minHeight?: Responsive<LiteralUnion<HOCSpacingKeys>> | LiteralUnion<HOCSpacingKeys>;
+    minWidth?: Responsive<LiteralUnion<HOCSpacingKeys>> | LiteralUnion<HOCSpacingKeys>;
+    position?: Responsive<Position> | Position;
+    top?: Responsive<LiteralUnion<HOCSpacingKeys>> | LiteralUnion<HOCSpacingKeys, number | string>;
+    left?: Responsive<LiteralUnion<HOCSpacingKeys>> | LiteralUnion<HOCSpacingKeys, number | string>;
+    bottom?: Responsive<LiteralUnion<HOCSpacingKeys>> | LiteralUnion<HOCSpacingKeys, number | string>;
+    right?: Responsive<LiteralUnion<HOCSpacingKeys>> | LiteralUnion<HOCSpacingKeys, number | string>;
+    justifyContent?: Responsive<JustifyContent> | JustifyContent;
+    alignContent?: Responsive<AlignContent> | AlignContent;
+    alignItems?: Responsive<AlignItems> | AlignItems;
+    flexDirection?: Responsive<FlexDirection> | FlexDirection;
+    flexGrow?: Responsive<number> | number;
+    flexShrink?: Responsive<number> | number;
+    flexWrap?: Responsive<FlexWrap> | FlexWrap;
+    rowGap?: Responsive<LiteralUnion<HOCSpacingKeys>> | LiteralUnion<HOCSpacingKeys>;
+    columnGap?: Responsive<LiteralUnion<HOCSpacingKeys>> | LiteralUnion<HOCSpacingKeys>;
+    justifyItems?: Responsive<JustifyItems> | JustifyItems;
+    order?: Responsive<number> | number;
+    cursor?: Responsive<Cursor> | Cursor;
+    zIndex?: Responsive<number> | number;
+    opacity?: Responsive<number> | number;
+    display?: Responsive<Display> | Display;
+    backgroundImage?: Responsive<string> | string;
+    backgroundSize?: Responsive<BackgroundSize> | BackgroundSize;
+    backgroundPosition?: Responsive<BackgroundPosition> | BackgroundPosition;
+    backgroundRepeat?: Responsive<BackgroundRepeat> | BackgroundRepeat;
+    gradient?: Responsive<string> | string;
+    transform?: Responsive<string> | string;
+    transformOrigin?: Responsive<string> | string;
+    overflow?: Responsive<Overflow> | Overflow;
+    overflowX?: Responsive<Overflow> | Overflow;
+    overflowY?: Responsive<Overflow> | Overflow;
+    onClick?: () => void;
+    onMouseEvent?: OnMouseEvent;
+};
+
+declare type HOCBorderRadius = typeof borderRadius;
+
+declare type HOCBorderRadiusKeys = keyof HOCBorderRadius;
+
+declare type HOCBorderWidth = typeof borders;
+
+declare type HOCBorderWidthKeys = keyof HOCBorderWidth;
+
+declare type HOCColorKeys = Exclude<HOCColorKeysWithSwatch, 'swatches'>;
+
+declare type HOCColorKeysWithSwatch = keyof HOCColors;
+
+declare type HOCColors = typeof colors;
+
+declare type HOCMotionProps = {
+    className?: string;
+    motionKey?: string | number;
+    id?: string;
+} & MotionProps;
+
+declare type HOCShadowKeys = keyof HOCShadows;
+
+declare type HOCShadows = typeof shadows;
+
+declare type HOCSpacing = typeof spacing;
+
+declare type HOCSpacingKeys = keyof HOCSpacing;
+
+declare type HOCSwatchColorKeys = keyof HOCSwatchColors;
+
+declare type HOCSwatchColors = typeof colors.swatches;
+
+declare type HorizontalZone = {
+    component: default_2.ReactNode;
+    width: number | string;
+};
+
+export declare const HStack: default_2.MemoExoticComponent<({ children, gap, justify, alignItems, shouldWrap, inset, outset, childWidth, }: HStackProps) => JSX_2.Element>;
+
+export declare type HStackProps = {
+    gap: SpacingDirection | LiteralUnion<HOCSpacingKeys>;
+    justify: JustifyContent;
+    alignItems?: AlignItems;
+    shouldWrap?: boolean;
+    inset?: SpacingDirection | LiteralUnion<HOCSpacingKeys>;
+    outset?: SpacingDirection | LiteralUnion<HOCSpacingKeys>;
+    childWidth?: string;
+    children?: default_2.ReactNode;
+};
+
+export declare const Icon: FC<IconProps>;
+
+export declare type IconColors = keyof typeof entities.icons.colors;
+
+export declare type IconLabelProps = {
+    type: 'graphic';
+    label: {
+        icon: IconType;
+        url?: undefined;
+    } | {
+        icon?: undefined;
+        url: string;
+    };
+};
+
+export declare const IconLink: FC<IconLinkProps>;
+
+export declare type IconLinkProps = {
+    title?: string;
+    onClick?: () => void;
+    onMouseEvent?: OnMouseEvent;
+    minimize?: boolean;
+    icon: IconType;
+    iconOrientation?: orientation_2;
+    fill?: IconColors;
+    fontColor?: TextColor;
+    isActive?: boolean;
+    activeColor?: IconColors;
+    size?: SizeType;
+    isStacked?: boolean;
+    hasBackgroundColor?: boolean;
+    gap?: HOCSpacingKeys;
+    isDisabled?: boolean;
+};
+
+export declare type IconProps = {
+    name: IconType;
+} & Omit<SVGProps, 'entity'>;
+
+declare const icons: {
+    sizes: {
+        xSmall: number;
+        small: number;
+        medium: number;
+        large: number;
+        xLarge: number;
+    };
+    colors: {
+        default: string | undefined;
+        primaryBodyText: string;
+        primaryHeadingText: string | undefined;
+        inverseBodyText: string;
+        inverseHeadingText: string;
+        primaryBrand: string;
+        secondaryBrand: string;
+        warning: string;
+        danger: string;
+        success: string;
+        background: string;
+        accent: string;
+    };
+};
+
+declare type IconsEntity = typeof icons;
+
+export declare type IconTextLabelProps = {
+    type: 'graphicText';
+    label: {
+        icon: IconType;
+        url?: undefined;
+        text: string;
+    } | {
+        icon?: undefined;
+        url: string;
+        text: string;
+    };
+};
+
+export declare type IconType = 'catalog' | 'socLogo' | 'campaigns' | 'gift' | 'plus' | 'minus' | 'tenDoor' | 'rightChevron' | 'close' | 'award' | 'contact' | 'multipleUsers2x' | 'multipleUsers3x' | 'information' | 'hamburger' | 'leftChevron' | 'chevron' | 'information' | 'filterBy' | 'groups' | 'idCard' | 'plusSquare' | 'star' | 'search' | 'cart' | 'priceTag' | 'layer' | 'loading' | 'play' | 'lock' | 'user' | 'noUsers' | 'add' | 'check' | 'exclamation' | 'envelope' | 'userSuccess' | 'image' | 'imageSwap' | 'text' | 'color' | 'template' | 'redo' | 'undo' | 'copy' | 'drag' | 'delete' | 'crop' | 'alignLeft' | 'alignRight' | 'alignCenter' | 'allPanel' | 'fullBleed' | 'fullBleedLandscape' | 'fullBleedPortrait' | 'sliderHorizontal' | 'sliderVertical' | 'cropRotate' | 'frame' | 'cut' | 'wand' | 'layerAdd' | 'layerRemove' | 'layerDisabled' | 'signature' | 'shadows' | 'rotateLeft' | 'rotateRight' | 'colorPalette' | 'dropper' | 'textBox' | 'fontSize' | 'flipHorizontal' | 'flipVertical' | 'filter' | 'brightness' | 'aText' | 'frameWidth' | 'frameHeight' | 'layerUp' | 'layerDown' | 'capitalizedText' | 'uppercaseText' | 'lowercaseText' | 'fullBleedImage' | 'fullBleedText' | 'panelMode' | 'viewPanels' | 'rotate' | 'view' | 'replaceImage' | 'quotation' | 'facebook' | 'instagram' | 'twitter' | 'linkedIn' | 'youtube' | 'pinterest' | 'visible' | 'invisible' | 'elementIcon' | 'complete' | 'download' | 'closeCircle' | 'backgroundSettings' | 'upload' | 'stickers' | 'clearPanel' | 'viewCarousel' | 'viewSinglePanel' | 'editorText' | 'layout' | 'background' | 'save' | 'signaturePen' | 'size' | 'variable' | 'imageUpload' | 'squareCheck' | 'userTag' | 'map' | 'mapLocation' | 'location' | 'creditCard' | 'calendar' | 'home' | 'bag' | 'swap' | 'warning' | 'coaching' | 'promptingsIcon';
+
+declare const Image_2: FC<ImageProps>;
+export { Image_2 as Image }
+
+export declare const ImageGrid: FC<ImageGridProps>;
+
+export declare type ImageGridProps = {
+    images: {
+        leftColumn: {
+            topLeft: string;
+            bottomLeft: string;
+            topRight: string;
+            bottomRight: string;
+        };
+        centerColumn: {
+            topLeft: string;
+            topRight: string;
+            mainImage: string;
+        };
+        rightColumn: {
+            topLeft: string;
+            bottomLeft: string;
+            topRight: string;
+            bottomRight: string;
+        };
+    };
+    width: string;
+    borderRadius?: string;
+    gap?: string;
+};
+
+export declare type ImageProps = {
+    image: ImageType;
+    activeFilter?: FilterType;
+    width: string;
+    height: string;
+    isActive: boolean;
+    title?: string;
+    borderRadius?: BorderRadiusDirection | LiteralUnion<HOCBorderRadiusKeys>;
+    onClick?: () => void;
+    backgroundSize?: Responsive<BackgroundSize> | BackgroundSize;
+};
+
+export declare const ImageThumbnail: FC<ImageThumbnailProps>;
+
+export declare type ImageThumbnailProps = {
+    url: string;
+    width: number;
+    height: number;
+    onRemove?: () => void;
+    uploadProgress: number;
+};
+
+export declare type ImageType = {
+    url: string;
+};
+
+export declare const ImageUploader: (props: ImageUploaderProps) => JSX_2.Element;
+
+export declare type ImageUploaderProps = {
+    onUpload: (files: {
+        accepted: File[];
+        rejected: FileRejection[];
+    }, fileList?: FileList | null) => void;
+    acceptedFiles: AcceptedFileType[];
+    hasMultiupload?: boolean;
+    maxFileSize?: number;
+    maxAcceptedFiles?: number;
+    uploadTitle?: string;
+    backgroundColor?: BackgroundColor;
+};
+
+export declare const ImageUploadWidget: FC<ImageUploadWidgetProps>;
+
+export declare type ImageUploadWidgetProps = {
+    title: string;
+    maxHeight?: string;
+    onClose: () => void;
+    onFinished: () => void;
+    isOpen: boolean;
+    onUpload: (files: {
+        accepted: AcceptedFiles;
+        rejected: RejectedFiles;
+    }, fileList?: FileList | null) => void;
+    hasMultiUpload?: boolean;
+    userImages?: UserImage[];
+    x: number;
+    y: number;
+    dataLength?: number;
+    loadMore?: () => void;
+    hasMore?: boolean;
+    endMessage?: string;
+    width?: number;
+};
+
+declare type IncrementalAwardType = {
+    title: string;
+    count: number;
+    icon: IconType;
+};
+
+export declare const IncrementSetting: FC<IncrementSettingProps>;
+
+export declare type IncrementSettingProps = {
+    value: number;
+    setValue: (value: number) => void;
+    title: string | TextProps;
+    min: number;
+    max: number;
+    isDisabled?: boolean;
+    layout: 'block' | 'inline' | 'inlineBlock';
+    activeColor?: SliderProgressColor;
+    inputWidth?: number;
+    sliderOrigin?: SliderOriginType;
+    outset?: SpacingDirection | LiteralUnion<HOCSpacingKeys>;
+};
+
+export declare const InfiniteScroller: ({ pageStart, children, loader, loadMore, hasMore, threshold, initialLoad, isLoadingMore, isScrollingOnWindow, }: InfiniteScrollerProps) => JSX_2.Element;
+
+export declare type InfiniteScrollerProps = {
+    hasMore: boolean;
+    isLoadingMore: boolean;
+    initialLoad?: boolean;
+    loadMore: (page?: number) => void;
+    pageStart?: number;
+    threshold?: number;
+    loader: default_2.ReactElement;
+    isScrollingOnWindow?: boolean;
+    children?: default_2.ReactNode;
+};
+
+export declare const InfoBlock: FC<InfoBlockProps>;
+
+export declare type InfoBlockProps = {
+    heading: string;
+    caption: string;
+    size: InfoBlockSizeType;
+    alignment?: AlignmentType;
+    country?: Country;
+};
+
+export declare type InfoBlockSizeType = 'large' | 'medium' | 'small';
+
+export declare const Input: FC<InputProps>;
+
+export declare type InputFocusType = IconColors;
+
+export declare type InputProps = {
+    label?: string;
+    placeholder?: string;
+    labelPlaceholder?: string;
+    name?: string;
+    type: 'text' | 'email' | 'password' | 'search' | 'date' | 'number' | 'time';
+    focusColor?: InputFocusType;
+    icon?: IconType;
+    id?: string;
+    message?: {
+        type: 'success' | 'danger' | 'warning';
+        content: string;
+        icon?: IconType;
+        onClick?: () => void;
+    };
+    isLoading?: boolean;
+    onChange: (value: string) => void;
+    value: string;
+    defaultValue?: number;
+    min?: number;
+    max?: number;
+    isDisabled?: boolean;
+    isFullWidth?: boolean;
+    isTypingDisabled?: boolean;
+    width?: number;
+    height?: number;
+    isPhoneInput?: boolean;
+    hasSecurePassword?: boolean;
+    maxLength?: number;
+    isMaxLengthHit?: boolean;
+    autoComplete?: string;
+    onMaxLengthCap?: (isCapped: boolean) => void;
+    onBlur?: (e?: default_2.FocusEvent) => void;
+};
+
+export declare const InviteCard: FC<InviteCardProps>;
+
+export declare type InviteCardProps = {
+    user: User;
+    avatar: AvatarProps;
+    extraLink: AnchorProps;
+    action: Action;
+};
+
+export declare type Item = {
+    title: string;
+    icon: IconType;
+    iconOrientation?: orientation_2;
+    onClick: () => void;
+    isActive: boolean;
+};
+
+declare type JustifyContent = FlexBaseValues | CSSGridBaseValues;
+
+declare type JustifyItems = 'start' | 'end' | 'center' | 'stretch';
+
+export declare type Link = {
+    title: default_2.ReactNode;
+    href: string;
+    onClick?: () => void;
+    icon?: IconType;
+    target?: Target;
+};
+
+export declare const LinkColumn: FC<LinkColumnProps>;
+
+export declare type LinkColumnProps = {
+    linkColumn: LinkColumnType;
+    linkTitleColor?: TextColor;
+    subLinkColor?: TextColor;
+};
+
+export declare type LinkColumnType = {
+    title: string;
+    titleColor?: TextColor;
+    links: Link[];
+    linkColor?: TextColor;
+};
+
+export declare const List: default_2.MemoExoticComponent<default_2.ForwardRefExoticComponent<{
+    orientation: ListOrientation;
+    alignment: AlignmentOptions;
+    children?: default_2.ReactNode;
+    listStyle?: ListStyleType;
+} & HOCBaseProps & {
+    className?: string;
+    motionKey?: string | number;
+    id?: string;
+} & MotionProps & default_2.RefAttributes<HTMLUListElement>>>;
+
+export declare const ListItem: default_2.MemoExoticComponent<(props: ListItemProps) => JSX_2.Element>;
+
+export declare type ListItemProps = {
+    orientation: ListOrientation;
+    children?: default_2.ReactNode;
+    variants?: {};
+    animate?: string | {};
+    initial?: string;
+    transition?: {};
+} & HOCBaseProps & HOCMotionProps;
+
+export declare type ListOrientation = 'vertical' | 'horizontal';
+
+export declare type ListProps = {
+    orientation: ListOrientation;
+    alignment: AlignmentOptions;
+    children?: default_2.ReactNode;
+    listStyle?: ListStyleType;
+} & HOCBaseProps & HOCMotionProps;
+
+export declare type ListStyleType = 'disc' | 'none' | 'circle';
+
+declare type LiteralUnion<T extends U, U = string> = T | (U & {
+    _?: never;
+});
+
+export declare const Loader: ({ children, width, height, speed }: LoaderProps) => JSX_2.Element;
+
+export declare type LoaderProps = {
+    width: number;
+    height: number;
+    speed?: number;
+    children?: default_2.ReactNode;
+};
+
+export declare const LoadingSpinner: FC<LoadingSpinnerProps>;
+
+export declare type LoadingSpinnerProps = {
+    size: SizeType;
+    hasNoColor?: boolean;
+};
+
+export declare const Logo: FC<LogoProps>;
+
+export declare type LogoColorTypes = 'white' | 'black' | 'color';
+
+export declare type LogoProps = {
+    brand: BrandTypes;
+    color: LogoColorTypes;
+    type?: 'fullLogo' | 'icon';
+    width?: string;
+    href?: string;
+    onClick?: () => void;
+    secondaryLogo?: SecodaryLogo;
+    shouldShowParentBrand?: boolean;
+};
+
+export declare const MasonryGrid: FC<MasonryGridProps>;
+
+export declare type MasonryGridProps = {
+    columnSize: number;
+    rowSize: number;
+    gap: number;
+};
+
+export declare const Menu: FC<MenuProps>;
+
+export declare const MenuItem: FC<MenuItemProps>;
+
+export declare type MenuItemProps = {
+    title: string;
+    icon?: IconType;
+    onClick: () => void;
+    badge?: string;
+    iconOrientation?: orientation_2;
+};
+
+declare type MenuLocationType = 'top' | 'bottom';
+
+export declare type MenuOptionType = {
+    title: string;
+    onClick: () => void;
+    icon?: IconType;
+};
+
+export declare type MenuProps = {
+    children?: default_2.ReactNode;
+};
+
+export declare const MenuSection: ({ children, divider }: MenuSectionProps) => JSX_2.Element;
+
+export declare type MenuSectionProps = {
+    divider: boolean;
+    children?: default_2.ReactNode;
+};
+
+export declare const Navigation: default_2.FC<NavigationProps>;
+
+export declare const NavigationPill: FC<NavigationPillType>;
+
+declare type NavigationPillType = {
+    circleSize: number;
+    height: number;
+    links: Item[];
+    quickLinks: Item[];
+    user: UserInfo;
+    accountRouteOnClick: () => void;
+    setIsExpanded: (isExpanded: boolean) => void;
+    isSheetOpen: boolean;
+    setSheetIsOpen: (isSheetOpen: boolean) => void;
+};
+
+declare type NavigationProps = {
+    navLinks: Item[];
+    logo: IconType;
+    user: UserInfo;
+    setIsExpanded: (isExpanded: boolean) => void;
+    setMenuOpen: (isMenuOpen: boolean) => void;
+    isMenuOpen: boolean;
+    isExpanded: boolean;
+};
+
+export declare type NavItemType = {
+    title: string;
+    icon: IconType;
+    onClick: () => void;
+    isActive: boolean;
+    subNavigation: SubNavigationType[];
+};
+
+export declare type NoteSection = {
+    releaseType: CapsuleType;
+    notes: string[];
+};
+
+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 }
+
+declare type OptionProps = {
+    alignment?: AlignmentOptions;
+    onClick?: (id: number) => void;
+    isSelected: boolean;
+    graphic?: IconType;
+    icon?: IconType;
+    id: number;
+} & (TextLabelProps | IconLabelProps | IconTextLabelProps | ReactNodeLabelProps);
+
+declare type OptionsGraphicTextType = {
+    type: 'graphicText';
+    options: OptionWithGrapihicTextLabelType[];
+};
+
+declare type OptionsGraphicType = {
+    type: 'graphic';
+    options: OptionWithGraphicLabelType[];
+};
+
+declare type OptionsReactNodeType = {
+    type: 'reactNode';
+    options: OptionWithReacNodeLabelType[];
+};
+
+declare type OptionsTextType = {
+    type: 'text';
+    options: OptionWithTextLabelType[];
+};
+
+export declare type OptionSubmitType = {
+    title: string;
+    type?: ButtonType;
+    onClick: (optionId: string) => void;
+};
+
+declare type OptionType = ExpandedOptionChild & RadioOptionCardProps;
+
+declare type OptionWithGraphicLabelType = {
+    value: string;
+    label: {
+        icon: IconType;
+        url?: undefined;
+    } | {
+        icon?: undefined;
+        url: string;
+    };
+};
+
+declare type OptionWithGrapihicTextLabelType = {
+    value: string;
+    label: {
+        icon: IconType;
+        url?: undefined;
+        text: string;
+    } | {
+        icon?: undefined;
+        url: string;
+        text: string;
+    };
+};
+
+declare type OptionWithReacNodeLabelType = {
+    value: string;
+    label: default_2.ReactNode;
+    hasSeparator?: boolean;
+};
+
+declare type OptionWithTextLabelType = {
+    value: string;
+    label: string;
+    hasSeparator?: boolean;
+};
+
+export declare const OrderCard: FC<OrderCardProps>;
+
+export declare type OrderCardProps = {
+    thumbnail: ThumbnailType;
+    title: string;
+    subtitle?: string;
+    price: string;
+    discountPrice?: string;
+    backgroundColor?: 'background' | 'foreground';
+};
+
+declare type orientation_2 = 'up' | 'down' | 'left' | 'right';
+export { orientation_2 as orientation }
+
+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;
+
+export declare type OverlayPropTypes = {
+    zIndex?: number;
+    position?: Responsive<Position> | Position;
+    bgElementSelector?: string;
+    children?: default_2.ReactNode;
+    pinned?: PinnedType;
+    backgroundVariant?: 'solid' | 'blur';
+    shouldScroll?: boolean;
+} & HOCMotionProps;
+
+export declare const PaperTypeModal: FC<PaperTypeModalProps>;
+
+export declare type PaperTypeModalProps = {
+    title: string;
+    subtitle: string;
+    isOpen: boolean;
+    onClose?: () => void;
+    zIndex?: number;
+    options: DisplayCardPaperOptions[];
+};
+
+export declare const PhoneInput: FC<PhoneInputProps>;
+
+export declare type PhoneInputProps = {
+    countries: Country[];
+    phoneNumber: string;
+    selectedCountryIndex: number;
+    onSelectedCountryIndexChange: (selectedCountryIndex: number) => void;
+    onPhoneNumberChange: (phoneNumber: string) => void;
+    message?: {
+        type: 'success' | 'danger' | 'warning';
+        content: string;
+        icon?: IconType;
+        onClick?: () => void;
+    };
+    maxHeight?: string;
+};
+
+export declare const Pill: ({ title, items, flexDirection, boxShadow, children, }: PillProps) => JSX_2.Element;
+
+export declare type PillItemsType = {
+    title: string;
+    icon: IconType;
+    iconOrientation?: orientation_2;
+    onClick: () => void;
+    isActive?: boolean;
+    activeColor?: IconColors;
+};
+
+export declare type PillProps = {
+    title?: string;
+    items: PillItemsType[];
+    flexDirection?: 'row' | 'row-reverse';
+    boxShadow?: Shadows;
+    children?: default_2.ReactNode;
+};
+
+export declare const PinInput: FC<PinInputProps>;
+
+export declare type PinInputProps = {
+    length: 4 | 5 | 6;
+    onChange: (value: string) => void;
+    onComplete?: (value: string) => void;
+    hasFocus?: boolean;
+    isSecret?: boolean;
+    message?: {
+        type: 'success' | 'danger' | 'warning';
+        content: string;
+    };
+};
+
+export declare type PinnedType = 'top' | 'center' | 'bottom';
+
+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;
+
+declare type PricingTileColorType = Exclude<TextColor, 'anchorBlue'>;
+
+export declare type PricingTileProps = {
+    title: string;
+    price?: string;
+    priceSubtext?: string;
+    features: Features[];
+    primaryAction?: ActionType;
+    secondaryAction?: ActionType;
+    isFeatured?: boolean;
+    featuredItemStyles?: FeaturedItemStyleType;
+    accentColor?: PricingTileColorType;
+    backgroundColor?: PricingTileColorType;
+    textColor?: 'gray' | 'white';
+    description?: string;
+    billingInterval?: string;
+    hasShadow?: boolean;
+    disclaimer?: Disclaimer;
+    isSelected?: boolean;
+    isFullLength?: boolean;
+    children?: default_2.ReactNode;
+};
+
+declare type PrimaryBrandColorSelection = {
+    swatch: 'primaryBrand';
+    shade: LiteralUnion<keyof RequiredColorSwatch>;
+};
+
+export declare const Progress: FC<ProgressProps>;
+
+export declare type ProgressProps = {
+    percentage: string | number;
+    hasLabel?: boolean;
+};
+
+export declare const PromotionWidget: FC<PromotionWidgetProps>;
+
+export declare type PromotionWidgetProps = {
+    title: string;
+    description: string;
+    capsuleTitle: string;
+    backgroundColor?: BackgroundColor;
+    primaryAction?: {
+        onClick: () => void;
+        title: string;
+    };
+    secondaryAction?: {
+        href: string;
+        title: string;
+    };
+    minWidth?: string;
+    width?: string;
+    type: ThemeMode;
+    buttonSize?: SizeType;
+};
+
+export declare const promptingsTheme: Entities;
+
+export declare const promptingUTheme: Entities;
+
+declare type PurpleScaleColorSelection = {
+    swatch: 'purpleScale';
+    shade: LiteralUnion<keyof RequiredColorSwatch>;
+};
+
+export declare const QDSChrome: FC<QDSChromeProps>;
+
+export declare type QDSChromeProps = {
+    logo: IconType;
+    navSections: NavItemType[];
+    accountSections: AccountMenuItem[][];
+    user: UserInfo;
+    isExpanded: boolean;
+    setIsExpanded: (isExpanded: boolean) => void;
+    openMenuSize?: number;
+    isOnAccountRoute: boolean;
+    accountRouteOnClick: () => void;
+    quickLinks: QuickLinksType;
+    isFullScreen?: boolean;
+};
+
+export declare const QuantitySlider: FC<QuantitySliderProps>;
+
+export declare type QuantitySliderProps = {
+    quantity: number;
+    min: number;
+    max: number;
+    setQuantity: (quantity: number) => void;
+    salePrice?: number;
+    sliderFill?: SliderProgressColor;
+    unitPrice: number;
+    width: number;
+    hasIncrement?: boolean;
+    head?: default_2.ReactNode;
+};
+
+export declare const QuantumColorPicker: FC<QuantumColorPickerProps>;
+
+export declare type QuantumColorPickerProps = {
+    color: QuantumHex;
+    onChange: (color: QuantumHex) => void;
+    convertedColorCallback?: (color: ConvertedColorType) => void;
+    convertedColorType?: 'hex' | 'rgb' | 'hsl';
+    showEyeDropper?: boolean;
+    palette?: {
+        title?: string;
+        colors?: QuantumHex[];
+        isLoading?: boolean;
+        count?: number;
+    };
+};
+
+export declare type QuantumHex = string;
+
+export declare type QuantumHSL = HslColor;
+
+export declare type QuantumRGB = RgbColor;
+
+export declare type QuantumThemeProviderProps = {
+    theme?: Theme;
+    children?: default_2.ReactNode;
+};
+
+export declare const QuantumThemeWrapper: ({ children, theme, }: QuantumThemeProviderProps) => JSX_2.Element;
+
+export declare const QuickLink: FC<QuickLinkType>;
+
+export declare type QuickLinksType = Item[];
+
+declare type QuickLinkType = {
+    link: Item;
+};
+
+declare type QuoteType = Omit<ThemeMode, 'accent' | 'shadow'>;
+
+export declare const RadioOptionCard: FC<RadioOptionCardProps>;
+
+export declare type RadioOptionCardProps = {
+    title: string;
+    subtitle?: string;
+    isSelected: boolean;
+    onSelect?: (optionId?: string) => void;
+    isFeatured?: boolean;
+    optionId: string;
+    infoAction?: () => void;
+};
+
+export declare const RadioOptionList: FC<RadioOptionListProps>;
+
+export declare type RadioOptionListProps = {
+    options: RadioOptionCardProps[];
+    submitAction: OptionSubmitType;
+    defaultNumOptionsShown?: number;
+    globalInfoActionOverride?: (optionId?: string) => void;
+    extraLink?: AnchorProps;
+};
+
+export declare type ReactNodeLabelProps = {
+    type: 'reactNode';
+    label: default_2.ReactNode;
+};
+
+export declare type RejectedFiles = FileRejection[];
+
+export declare const ReleaseNote: FC<ReleaseNoteProps>;
+
+export declare type ReleaseNoteCapsuleColor = Extract<HOCSwatchColorKeys, 'primaryBrand' | 'secondaryBrand' | 'warning' | 'danger' | 'success' | 'accent' | 'blueScale'>;
+
+export declare const ReleaseNoteDialog: FC<ReleaseNoteDialogProps>;
+
+export declare type ReleaseNoteDialogProps = {
+    title: string;
+    versionTitle?: string;
+    versionNumber: string;
+    releaseDate: string;
+    description: string;
+    listType?: 'ordered' | 'unordered';
+    noteSections: NoteSection[];
+    onClose: () => void;
+    isOpen: boolean;
+    button: {
+        title: string;
+        type: ButtonType;
+        onClick?: () => void;
+    };
+    maxWidth?: number;
+    maxHeight?: number;
+};
+
+export declare type ReleaseNoteProps = {
+    capsule: {
+        title: CapsuleType;
+        backgroundColor?: ReleaseNoteCapsuleColor;
+        fontColor?: TextColor;
+        boxShadow?: Shadows;
+    };
+    note: {
+        title: string;
+        color?: TextColor;
+    };
+};
+
+declare type RequiredColorSwatch = Required<ColorSwatch>;
+
+declare type Responsive<T> = {
+    xSmall?: T;
+    small?: T;
+    medium?: T;
+    large?: T;
+    xLarge?: T;
+};
+
+export declare const RevealingContent: FC<RevealingContentProps>;
+
+declare type RevealingContentProps = {
+    zone: ZoneType_2;
+    width: string;
+    height: string;
+    isMobile: boolean;
+};
+
+declare type RotationAndOffsetType = {
+    degrees: number;
+    offset?: number;
+};
+
+export declare const RowItem: ({ alignment, children, inset, style, ...props }: RowItemProps & {
+    style?: default_2.CSSProperties;
+}) => JSX_2.Element;
+
+declare type RowItemProps = {
+    alignment?: 'left' | 'center' | 'right';
+    inset?: SpacingDirection | LiteralUnion<HOCSpacingKeys>;
+    children?: default_2.ReactNode;
+};
+
+export declare const Scrollable: ({ maxHeight, onChange, children, hasScrollBar, }: ScrollableProps) => JSX_2.Element;
+
+export declare type ScrollableProps = {
+    maxHeight?: number;
+    onChange?: (progress: number) => void;
+    hasScrollBar?: boolean;
+    children?: default_2.ReactNode;
+};
+
+export declare const ScrollingIndicator: FC<ScrollingIndicatorProps>;
+
+export declare type ScrollingIndicatorProps = {
+    size?: string;
+    backgroundColor?: string;
+};
+
+export declare type SecodaryLogo = {
+    width?: string;
+    fontSize?: string;
+};
+
+declare type SecondaryBrandColorSelection = {
+    swatch: 'secondaryBrand';
+    shade: LiteralUnion<keyof RequiredColorSwatch>;
+};
+
+export declare const Section: default_2.MemoExoticComponent<default_2.ForwardRefExoticComponent<{
+    children?: default_2.ReactNode;
+    outsideClick?: () => void;
+    clickElementBypass?: string;
+} & HOCBaseProps & {
+    className?: string;
+    motionKey?: string | number;
+    id?: string;
+} & MotionProps & default_2.RefAttributes<HTMLElement>>>;
+
+export declare type SectionProps = {
+    children?: default_2.ReactNode;
+    outsideClick?: () => void;
+    clickElementBypass?: string;
+} & HOCBaseProps & HOCMotionProps;
+
+export declare const Select: (props: SelectProps) => JSX_2.Element;
+
+export declare const SelectableCard: FC<SelectableCardProps>;
+
+declare type SelectableCardProps = {
+    isActive: boolean;
+    onClick?: () => void;
+    shouldShowActiveIcons?: boolean;
+};
+
+export declare const SelectableList: FC<SelectableListProps>;
+
+export declare type SelectableListProps = {
+    limit?: number;
+    orientation?: ListOrientation;
+    selectedIndexes: number[];
+    setSelectedIndexes: (selectedIndexes: number[]) => void;
+};
+
+export declare type SelectableOptions = {
+    title: string;
+    thumbnail: string;
+    glare: GlareType;
+};
+
+export declare type SelectFocusType = IconColors;
+
+export declare type SelectProps = {
+    alignment?: AlignmentOptions;
+    onChange: (selectedOptionIndex: number) => void;
+    selectedOptionIndex?: number;
+    dropDownMaxHeight?: string;
+    shouldAlignDropDownToLeft?: boolean;
+    isDropDownAbove?: boolean;
+    selectHeight?: string;
+    selectWidth?: string;
+    focusColor?: SelectFocusType;
+    message?: {
+        type: 'success' | 'danger' | 'warning';
+        content: string;
+        icon?: IconType;
+        onClick?: () => void;
+    };
+    frontLabel?: string;
+    scrollBarWidth?: 'thin' | 'auto';
+} & (OptionsTextType | OptionsGraphicTextType | OptionsGraphicType | OptionsReactNodeType);
+
+export declare const sendogoTheme: Entities;
+
+export declare const sendOutCardsTheme: Entities;
+
+export declare const Separator: FC<SeparatorProps>;
+
+export declare type SeparatorOrientationType = 'vertical' | 'horizontal';
+
+export declare type SeparatorProps = {
+    orientation: SeparatorOrientationType;
+    dashed?: boolean;
+    caption?: string;
+    shouldCaptionWrap?: boolean;
+};
+
+export declare const SettingInput: FC<SettingInputProps>;
+
+export declare type SettingInputProps = {
+    value: string | null;
+    settingsType: 'color' | 'image';
+    inactiveTitle: string;
+    onRemove: () => void;
+    onClick?: () => void;
+    onMouseEvent?: () => void;
+};
+
+declare type Shadows = LiteralUnion<HOCShadowKeys, string> | Responsive<LiteralUnion<HOCShadowKeys, string>>;
+
+declare const shadows: {
+    light: string;
+    mediumLight: string;
+    mediumDark: string;
+    dark: string;
+    generate: (shadow: ("dark" | "mediumDark" | "mediumLight" | "light" | "xLight") | number[], color?: string, reverseOffset?: boolean) => string;
+};
+
+export declare const Sheet: ({ isOpen, children, draggable, backgroundColor, layer, setIsOpen, backgroundElement, backgroundElementBackgroundColor, snapPointPercentages, initialSnapPoint, outsideClickBypassId, zIndex, bgElementSelector, hasOverlay, snapTo, setSnapTo, width, inset, outset, }: SheetProps) => JSX_2.Element;
+
+export declare type SheetProps = {
+    isOpen: boolean;
+    setIsOpen?: (isOpen: boolean) => void;
+    draggable?: boolean;
+    backgroundColor?: string;
+    layer?: number;
+    backgroundElement?: default_2.ReactNode;
+    backgroundElementBackgroundColor?: BackgroundColor;
+    snapPointPercentages?: number[];
+    initialSnapPoint?: number | string;
+    outsideClickBypassId?: string;
+    zIndex?: number;
+    bgElementSelector?: string;
+    hasOverlay?: boolean;
+    snapTo?: string | number;
+    setSnapTo?: default_2.Dispatch<default_2.SetStateAction<SnapToStateType>>;
+    width?: string;
+    inset?: SpacingDirection | LiteralUnion<HOCSpacingKeys>;
+    outset?: SpacingDirection | LiteralUnion<HOCSpacingKeys>;
+    children?: default_2.ReactNode;
+};
+
+export declare const Sidebar: ({ children, width, position, zIndex, height, }: SidebarProps) => JSX_2.Element;
+
+export declare type SidebarPosition = 'left' | 'right';
+
+export declare type SidebarProps = {
+    outsideClickEvent?: () => void;
+    width?: string;
+    position?: SidebarPosition;
+    zIndex?: number;
+    height?: string;
+    children?: default_2.ReactNode;
+};
+
+declare type SizeMapType = Record<SizeType, number>;
+
+declare type SizeProperties<T> = {
+    xSmall: T;
+    small: T;
+    medium: T;
+    large: T;
+    xLarge: T;
+};
+
+declare type SizeType = keyof SizeProperties<never>;
+
+export declare const Slider: FC<SliderProps>;
+
+export declare type SliderOriginType = 'left' | 'center';
+
+export declare type SliderProgressColor = IconColors;
+
+export declare type SliderProps = {
+    value: number;
+    min: number;
+    max: number;
+    setValue: (value: number) => void;
+    activeColor?: SliderProgressColor;
+    isDisabled?: boolean;
+    origin?: SliderOriginType;
+    width: number;
+    style?: default_2.CSSProperties;
+};
+
+export declare const SnapPoint: FC<SnapPointProps>;
+
+declare type SnapPointProps = {
+    name?: string;
+};
+
+declare type SnapToStateType = string | number | undefined;
+
+declare type SpaceOrientation = 'horizontal' | 'vertical';
+
+export declare const Spacer: FC<SpacerProps>;
+
+export declare type SpacerProps = {
+    space: HOCSpacingKeys;
+    orientation?: SpaceOrientation;
+};
+
+declare type Spacing = {
+    left?: LiteralUnion<HOCSpacingKeys> | Responsive<LiteralUnion<HOCSpacingKeys, string>>;
+    right?: LiteralUnion<HOCSpacingKeys> | Responsive<LiteralUnion<HOCSpacingKeys, string>>;
+    top?: LiteralUnion<HOCSpacingKeys> | Responsive<LiteralUnion<HOCSpacingKeys, string>>;
+    bottom?: LiteralUnion<HOCSpacingKeys> | Responsive<LiteralUnion<HOCSpacingKeys, string>>;
+    vertical?: LiteralUnion<HOCSpacingKeys> | Responsive<LiteralUnion<HOCSpacingKeys, string>>;
+    horizontal?: LiteralUnion<HOCSpacingKeys> | Responsive<LiteralUnion<HOCSpacingKeys, string>>;
+};
+
+declare const spacing: {
+    x0: string;
+    x_25: string;
+    x_5: string;
+    x_75: string;
+    x1: string;
+    x1_5: string;
+    x2: string;
+    x2_5: string;
+    x3: string;
+    x4: string;
+    x5: string;
+    x6: string;
+    x7: string;
+    x8: string;
+    x9: string;
+};
+
+declare type SpacingDirection = Spacing & Responsive<HOCSpacingKeys>;
+
+export declare const Span: default_2.MemoExoticComponent<(props: SpanProps) => JSX_2.Element>;
+
+export declare type SpanProps = {
+    children?: default_2.ReactNode;
+} & HOCBaseProps & HOCMotionProps;
+
+export declare const Sphere: FC<SphereProps>;
+
+declare type Sphere_2 = SizeProperties<SphereProperties>;
+
+declare type SphereProperties = {
+    circumference: number;
+    textType: TextType;
+};
+
+export declare type SphereProps = {
+    backgroundColor: BackgroundColor;
+    step: {
+        content: Char | number;
+        color?: TextColor;
+    };
+    size: SizeType;
+};
+
+export declare const StackedCards: ({ width, height, stackCount, children, backgroundImage, borderRadius, }: StackedCardsProps) => JSX_2.Element;
+
+export declare type StackedCardsProps = {
+    width: number;
+    height: number;
+    stackCount?: number;
+    backgroundImage?: string;
+    stackBackgroundColor?: BackgroundColor;
+    borderRadius?: BorderRadius;
+    children?: default_2.ReactNode;
+};
+
+export declare const StaticNavigation: FC<StaticNavigationProps>;
+
+export declare type StaticNavigationProps = {
+    logo: default_2.ReactNode | LogoProps;
+    accountSection?: default_2.ReactNode;
+    links?: (DropdownLink | Link)[];
+    zIndex?: number;
+    openValueOverride?: number;
+    drawerOffset?: number;
+    isFrosted?: boolean;
+    menuDropdownLinks?: {
+        linkColumn: LinkColumnType;
+        top?: number;
+        left?: number;
+    };
+};
+
+declare type StatusType = 'success' | 'warning' | 'danger';
+
+export declare const Stepper: FC<StepperProps>;
+
+export declare type StepperProps = {
+    canContinue: boolean;
+    setCanContinue: (canContinue: boolean) => void;
+    activeItemIndex: number;
+    setActiveItemIndex: (index: number) => void;
+    onStepsComplete: () => void;
+    completionMessage: string | default_2.ReactNode;
+    isSkippable?: boolean;
+    skipButton?: {
+        type: ButtonType;
+        title: string;
+    };
+};
+
+export declare const Stoplight: ({ activeIndex, setActiveIndex, isExpanded, setIsExpanded, type, onClick, orientation, isCollapsible, children, }: StoplightProps) => JSX_2.Element;
+
+export declare type StoplightProps = {
+    activeIndex: number;
+    setActiveIndex: (index: number) => void;
+    isExpanded?: boolean;
+    setIsExpanded?: (isExpanded: boolean) => void;
+    type: 'colors' | 'icons';
+    onClick?: () => void;
+    orientation?: 'horizontal' | 'vertical';
+    isCollapsible?: boolean;
+    children?: default_2.ReactNode;
+};
+
+export declare const streamMarketingTheme: Entities;
+
+export declare const streamVATheme: Entities;
+
+declare type StrokeWidth = keyof typeof entities.animatedCheckmark.strokeWidth;
+
+declare type SubmitOptionType = {
+    title: string;
+    type?: ButtonType;
+    onClick: (optionId?: string) => void;
+    isFullWidth?: boolean;
+    isDisabled?: boolean;
+};
+
+export declare const SubNavigation: FC<SubNavigationProps>;
+
+export declare type SubNavigationLinkType = {
+    title: string;
+    isActive: boolean;
+    onClick: () => void;
+};
+
+export declare type SubNavigationProps = {
+    sections: SubNavigationType[];
+    isMobile: boolean;
+    setIsMobileExpanded: (isMobileExpanded: boolean) => void;
+};
+
+export declare type SubNavigationType = {
+    title: string;
+    isActive: boolean;
+    links: SubNavigationLinkType[];
+    icon: IconType;
+};
+
+export declare const SubscriptionUpsaleDialog: FC<UpsaleDialogProps>;
+
+declare type SuccessColorSelection = {
+    swatch: 'success';
+    shade: LiteralUnion<keyof RequiredColorSwatch>;
+};
+
+export declare type SVGProps = {
+    size: LiteralUnion<SizeType> | number;
+    primaryColor: LiteralUnion<IconColors>;
+    secondaryColor?: LiteralUnion<IconColors>;
+    onClick?: () => void;
+    entity: IconsEntity;
+    orientation?: orientation_2;
+};
+
+export declare const Tab: ({ children }: TabContentProps) => JSX_2.Element;
+
+declare type TabContentProps = {
+    tabKey: string | number;
+    title: string;
+    children?: default_2.ReactNode;
+};
+
+export declare const Table: ({ columnCount, rowCount, headers, headerAlignment, headerWeight, headerInset, headerOutset, headerBorder, headerTextColor, children, style, ...props }: TableProps & {
+    style?: default_2.CSSProperties;
+}) => JSX_2.Element;
+
+export declare type TableItemAlignment = 'left' | 'center' | 'right';
+
+export declare type TableProps = {
+    rowCount: number;
+    columnCount: number;
+    headers?: string[];
+    headerAlignment?: TableItemAlignment;
+    headerWeight?: WeightType;
+    headerInset?: SpacingDirection | LiteralUnion<HOCSpacingKeys>;
+    headerOutset?: SpacingDirection | LiteralUnion<HOCSpacingKeys>;
+    headerTextColor?: string;
+    headerBorder?: string;
+    children?: default_2.ReactNode;
+};
+
+export declare const TableRow: ({ columnCount, inset, outset, radius, backgroundColor, children, border, style, ...props }: TableRowProps & {
+    style?: default_2.CSSProperties;
+}) => JSX_2.Element;
+
+declare type TableRowProps = {
+    columnCount: number;
+    children?: default_2.ReactNode;
+    inset?: SpacingDirection | LiteralUnion<HOCSpacingKeys>;
+    outset?: SpacingDirection | LiteralUnion<HOCSpacingKeys>;
+    radius?: number;
+    backgroundColor?: string;
+    border?: string;
+};
+
+export declare type TabProps = {
+    defaultActiveKey?: number | string;
+    activeColor?: TextColor;
+    gap?: HOCSpacingKeys;
+    height: string;
+    justify?: JustifyContent;
+    children?: default_2.ReactNode;
+};
+
+export declare const Tabs: ({ height, defaultActiveKey, activeColor, gap, justify, children, }: TabProps) => JSX_2.Element;
+
+export declare type Target = '_self' | '_blank' | '_parent' | '_top' | undefined;
+
+declare const Text_2: default_2.MemoExoticComponent<({ ...props }: TextProps) => JSX_2.Element>;
+export { Text_2 as Text }
+
+export declare type TextColor = keyof typeof entities.text.colors;
+
+export declare type TextLabelProps = {
+    type: 'text';
+    label: string;
+};
+
+export declare type TextProps = {
+    type: TextType | Responsive<TextType>;
+    color?: TextColor;
+    content?: string | number;
+    children?: default_2.ReactNode;
+    alignment?: AlignmentType;
+    isItalic?: boolean;
+    inset?: SpacingDirection | LiteralUnion<HOCSpacingKeys>;
+    outset?: SpacingDirection | LiteralUnion<HOCSpacingKeys>;
+    isStrikeThrough?: boolean;
+    weight?: WeightType;
+    lineHeight?: number;
+    whiteSpace?: WhiteSpaceType;
+    isInline?: boolean;
+    style?: default_2.CSSProperties;
+};
+
+export declare type TextType = keyof typeof entities.text.types;
+
+declare type Theme = 'sendogo' | 'bellaCadeaux' | 'greenerStill' | 'streamVA' | 'streamMarketing' | 'promptingU' | 'blue42' | 'sendOutCards' | 'promptings' | 'promptingsAcademy';
+
+export declare const ThemeContext: Context<    {
+mediaQueries: {
+queries: {
+xSmall: string;
+small: string;
+medium: string;
+large: string;
+xLarge: string;
+};
+rawValues: {
+xSmall: number;
+small: number;
+medium: number;
+large: number;
+xLarge: number;
+};
+};
+hocs: {
+colors: {
+swatches: {
+primaryBrand: Required<ColorSwatch>;
+secondaryBrand: Required<ColorSwatch>;
+success: Required<ColorSwatch>;
+danger: Required<ColorSwatch>;
+warning: Required<ColorSwatch>;
+accent: Required<ColorSwatch>;
+grayScale: ColorSwatch;
+blueScale: Required<ColorSwatch>;
+purpleScale: ColorSwatch;
+};
+background: string;
+foreground: string;
+};
+textColors: {
+primaryBrand: string;
+secondaryBrand: string;
+primaryHeading: string | undefined;
+primaryBody: string;
+inverseHeading: string;
+inverseBody: string;
+accent: string;
+success: string;
+warning: string;
+danger: string;
+anchorBlue: string;
+};
+spacing: {
+x0: string;
+x_25: string;
+x_5: string;
+x_75: string;
+x1: string;
+x1_5: string;
+x2: string;
+x2_5: string;
+x3: string;
+x4: string;
+x5: string;
+x6: string;
+x7: string;
+x8: string;
+x9: string;
+};
+borderRadius: {
+none: string;
+small: string;
+medium: string;
+default: string;
+large: string;
+circle: string;
+};
+shadows: {
+light: string;
+mediumLight: string;
+mediumDark: string;
+dark: string;
+generate: (shadow: ("dark" | "mediumDark" | "mediumLight" | "light" | "xLight") | number[], color?: string, reverseOffset?: boolean) => string;
+};
+borders: {
+thin: string;
+default: string;
+bold: string;
+};
+};
+text: {
+imports: {
+body: string;
+heading: string;
+};
+families: {
+body: string;
+heading: string;
+};
+types: {
+heroTitle: {
+color: string | undefined;
+size: string;
+fontWeight: number;
+lineHeight: string;
+fontFamily: string;
+};
+title: {
+color: string | undefined;
+size: string;
+fontWeight: number;
+lineHeight: string;
+fontFamily: string;
+};
+subtitle: {
+color: string | undefined;
+size: string;
+fontWeight: number;
+lineHeight: string;
+fontFamily: string;
+};
+largeBody: {
+color: string;
+size: string;
+fontWeight: number;
+lineHeight: string;
+fontFamily: string;
+};
+body: {
+color: string;
+size: string;
+fontWeight: number;
+lineHeight: string;
+fontFamily: string;
+};
+caption: {
+color: string;
+size: string;
+fontWeight: number;
+lineHeight: string;
+fontFamily: string;
+};
+footnote: {
+color: string;
+size: string;
+fontWeight: number;
+lineHeight: string;
+fontFamily: string;
+};
+};
+colors: {
+primaryBrand: string;
+secondaryBrand: string;
+primaryHeading: string | undefined;
+primaryBody: string;
+inverseHeading: string;
+inverseBody: string;
+accent: string;
+success: string;
+warning: string;
+danger: string;
+anchorBlue: string;
+};
+weights: {
+thin: number;
+regular: number;
+semiBold: number;
+bold: number;
+extraBold: number;
+};
+};
+spacing: {
+x0: string;
+x_25: string;
+x_5: string;
+x_75: string;
+x1: string;
+x1_5: string;
+x2: string;
+x2_5: string;
+x3: string;
+x4: string;
+x5: string;
+x6: string;
+x7: string;
+x8: string;
+x9: string;
+};
+buttons: {
+primary: {
+backgroundColor: string;
+fontColor: string;
+fontFamily: string;
+};
+secondary: {
+backgroundColor: string;
+fontColor: string;
+fontFamily: string;
+};
+warning: {
+backgroundColor: string;
+fontColor: string;
+fontFamily: string;
+};
+success: {
+backgroundColor: string;
+fontColor: string;
+fontFamily: string;
+};
+danger: {
+backgroundColor: string;
+fontColor: string;
+fontFamily: string;
+};
+shadow: {
+backgroundColor: string;
+fontColor: string;
+fontFamily: string;
+};
+accent: {
+backgroundColor: string;
+fontColor: string;
+fontFamily: string;
+};
+smoke: {
+backgroundColor: string;
+fontColor: string;
+fontFamily: string;
+};
+boxShadow: (shadow: ("dark" | "mediumDark" | "mediumLight" | "light" | "xLight") | number[], color?: string, reverseOffset?: boolean) => string;
+borderSize: string;
+outlinedBackgroundColor: string;
+fontWeight: number;
+sizes: {
+xSmall: {
+inset: string;
+outlinedInset: {
+vertical: string;
+horizontal: string;
+};
+fontSize: string;
+borderRadius: string;
+};
+small: {
+inset: string;
+outlinedInset: {
+vertical: string;
+horizontal: string;
+};
+fontSize: string;
+borderRadius: string;
+};
+medium: {
+inset: string;
+outlinedInset: {
+vertical: string;
+horizontal: string;
+};
+fontSize: string;
+borderRadius: string;
+};
+large: {
+inset: string;
+outlinedInset: {
+vertical: string;
+horizontal: string;
+};
+fontSize: string;
+borderRadius: string;
+};
+xLarge: {
+inset: string;
+outlinedInset: {
+vertical: string;
+horizontal: string;
+};
+fontSize: string;
+borderRadius: string;
+};
+};
+};
+inputs: {
+checkbox: {
+border: string;
+borderRadius: string;
+unCheckedBackgroundColor: string | undefined;
+checkmarkColor: string;
+labelColor: string;
+};
+text: {
+borderRadius: string;
+labelColor: Required<ColorSwatch>;
+placeholderColor: string;
+labelFontSize: string;
+textFontSize: string;
+borderWidth: string;
+defaultFocusColor: string;
+};
+select: {
+dropDownShadow: string;
+dropDownBackgroundColor: string;
+boxShadow: string;
+borderRadius: string;
+};
+number: {
+backgroundColor: string | undefined;
+fontColor: string;
+fontSize: string;
+borderRadius: string;
+};
+backgroundColor: string;
+fontSize: string;
+fontColor: string;
+fontFamily: string;
+colors: {
+primary: string;
+secondary: string;
+success: string;
+warning: string;
+danger: string;
+accent: string;
+dark: string;
+blue: string;
+};
+};
+icons: {
+sizes: {
+xSmall: number;
+small: number;
+medium: number;
+large: number;
+xLarge: number;
+};
+colors: {
+default: string | undefined;
+primaryBodyText: string;
+primaryHeadingText: string | undefined;
+inverseBodyText: string;
+inverseHeadingText: string;
+primaryBrand: string;
+secondaryBrand: string;
+warning: string;
+danger: string;
+success: string;
+background: string;
+accent: string;
+};
+};
+card: {
+backgroundColor: string;
+borderRadius: string;
+boxShadow: string;
+defaultInset: string;
+};
+separator: {
+border: string;
+color: string | undefined;
+};
+loadingSpinner: {
+size: {
+xSmall: number;
+small: number;
+medium: number;
+large: number;
+xLarge: number;
+};
+colors: {
+primary: string;
+secondary: string;
+success: string;
+warning: string;
+danger: string;
+};
+};
+animatedCheckmark: {
+sizeMap: {
+xSmall: number;
+small: number;
+medium: number;
+large: number;
+xLarge: number;
+};
+colors: {
+primary: string;
+secondary: string;
+success: string;
+accent: string;
+};
+strokeWidth: {
+small: number;
+default: number;
+large: number;
+};
+borderRadius: string;
+checkmarkFilledColor: string;
+};
+avatar: {
+borderWidth: string;
+borderColor: string | undefined;
+borderRadius: string;
+boxShadow: string;
+backgroundColor: string;
+bubbleBackgroundColors: {
+isActive: string;
+default: string | undefined;
+};
+defaultBackgroundColors: {
+primary: string;
+secondary: string;
+success: string;
+accent: string;
+warning: string;
+danger: string;
+};
+sizes: {
+xSmall: {
+avatarSize: number;
+bubbleLeftPosition: number;
+bubbleSize: number;
+};
+small: {
+avatarSize: number;
+bubbleLeftPosition: number;
+bubbleSize: number;
+};
+medium: {
+avatarSize: number;
+bubbleLeftPosition: number;
+bubbleSize: number;
+};
+large: {
+avatarSize: number;
+bubbleLeftPosition: number;
+bubbleSize: number;
+};
+xLarge: {
+avatarSize: number;
+bubbleLeftPosition: number;
+bubbleSize: number;
+};
+};
+};
+dialog: {
+backgroundColor: string;
+boxShadow: string;
+defaultInset: string;
+};
+drawer: {
+backgroundColor: string;
+borderRadius: string;
+boxShadow: string;
+bottomDirectionShadow: string;
+hoverBoxShadow: string;
+hoverBottomDirectionShadow: string;
+defaultInset: string;
+tab: {
+dark: {
+backgroundColor: string | undefined;
+arrowColor: string;
+};
+light: {
+backgroundColor: string;
+arrowColor: string | undefined;
+};
+};
+};
+sheet: {
+mobileBorderRadius: string;
+desktopBorderRadius: string;
+backgroundColor: string;
+boxShadow: string;
+};
+slider: {
+backgroundColor: string;
+borderRadius: string;
+handleRadius: string;
+handleColor: string;
+handleShadow: string;
+};
+navigation: {
+backgroundColor: string;
+border: string;
+borderColor: string | undefined;
+};
+toggle: {
+isActiveColor: string;
+isNotActiveColor: string | undefined;
+};
+tooltip: {
+lightBackgroundColor: string;
+darkBackgroundColor: string | undefined;
+boxShadow: string;
+borderColor: string;
+};
+colorPicker: {
+backgroundColor: string;
+borderColor: string;
+boxShadow: string;
+borderRadius: string;
+};
+sphere: Sphere_2;
+widget: Widget;
+colorOption: {
+defaults: {
+circleFill: string;
+innerRing: string;
+outerRing: string;
+};
+};
+}>;
+
+declare type ThemeMode = keyof ThemeModeProperies<never>;
+
+declare type ThemeModeProperies<T> = {
+    primary: T;
+    secondary: T;
+    success: T;
+    warning: T;
+    danger: T;
+    shadow: T;
+    accent: T;
+};
+
+export declare const ThemeProvider: Provider<    {
+mediaQueries: {
+queries: {
+xSmall: string;
+small: string;
+medium: string;
+large: string;
+xLarge: string;
+};
+rawValues: {
+xSmall: number;
+small: number;
+medium: number;
+large: number;
+xLarge: number;
+};
+};
+hocs: {
+colors: {
+swatches: {
+primaryBrand: Required<ColorSwatch>;
+secondaryBrand: Required<ColorSwatch>;
+success: Required<ColorSwatch>;
+danger: Required<ColorSwatch>;
+warning: Required<ColorSwatch>;
+accent: Required<ColorSwatch>;
+grayScale: ColorSwatch;
+blueScale: Required<ColorSwatch>;
+purpleScale: ColorSwatch;
+};
+background: string;
+foreground: string;
+};
+textColors: {
+primaryBrand: string;
+secondaryBrand: string;
+primaryHeading: string | undefined;
+primaryBody: string;
+inverseHeading: string;
+inverseBody: string;
+accent: string;
+success: string;
+warning: string;
+danger: string;
+anchorBlue: string;
+};
+spacing: {
+x0: string;
+x_25: string;
+x_5: string;
+x_75: string;
+x1: string;
+x1_5: string;
+x2: string;
+x2_5: string;
+x3: string;
+x4: string;
+x5: string;
+x6: string;
+x7: string;
+x8: string;
+x9: string;
+};
+borderRadius: {
+none: string;
+small: string;
+medium: string;
+default: string;
+large: string;
+circle: string;
+};
+shadows: {
+light: string;
+mediumLight: string;
+mediumDark: string;
+dark: string;
+generate: (shadow: ("dark" | "mediumDark" | "mediumLight" | "light" | "xLight") | number[], color?: string, reverseOffset?: boolean) => string;
+};
+borders: {
+thin: string;
+default: string;
+bold: string;
+};
+};
+text: {
+imports: {
+body: string;
+heading: string;
+};
+families: {
+body: string;
+heading: string;
+};
+types: {
+heroTitle: {
+color: string | undefined;
+size: string;
+fontWeight: number;
+lineHeight: string;
+fontFamily: string;
+};
+title: {
+color: string | undefined;
+size: string;
+fontWeight: number;
+lineHeight: string;
+fontFamily: string;
+};
+subtitle: {
+color: string | undefined;
+size: string;
+fontWeight: number;
+lineHeight: string;
+fontFamily: string;
+};
+largeBody: {
+color: string;
+size: string;
+fontWeight: number;
+lineHeight: string;
+fontFamily: string;
+};
+body: {
+color: string;
+size: string;
+fontWeight: number;
+lineHeight: string;
+fontFamily: string;
+};
+caption: {
+color: string;
+size: string;
+fontWeight: number;
+lineHeight: string;
+fontFamily: string;
+};
+footnote: {
+color: string;
+size: string;
+fontWeight: number;
+lineHeight: string;
+fontFamily: string;
+};
+};
+colors: {
+primaryBrand: string;
+secondaryBrand: string;
+primaryHeading: string | undefined;
+primaryBody: string;
+inverseHeading: string;
+inverseBody: string;
+accent: string;
+success: string;
+warning: string;
+danger: string;
+anchorBlue: string;
+};
+weights: {
+thin: number;
+regular: number;
+semiBold: number;
+bold: number;
+extraBold: number;
+};
+};
+spacing: {
+x0: string;
+x_25: string;
+x_5: string;
+x_75: string;
+x1: string;
+x1_5: string;
+x2: string;
+x2_5: string;
+x3: string;
+x4: string;
+x5: string;
+x6: string;
+x7: string;
+x8: string;
+x9: string;
+};
+buttons: {
+primary: {
+backgroundColor: string;
+fontColor: string;
+fontFamily: string;
+};
+secondary: {
+backgroundColor: string;
+fontColor: string;
+fontFamily: string;
+};
+warning: {
+backgroundColor: string;
+fontColor: string;
+fontFamily: string;
+};
+success: {
+backgroundColor: string;
+fontColor: string;
+fontFamily: string;
+};
+danger: {
+backgroundColor: string;
+fontColor: string;
+fontFamily: string;
+};
+shadow: {
+backgroundColor: string;
+fontColor: string;
+fontFamily: string;
+};
+accent: {
+backgroundColor: string;
+fontColor: string;
+fontFamily: string;
+};
+smoke: {
+backgroundColor: string;
+fontColor: string;
+fontFamily: string;
+};
+boxShadow: (shadow: ("dark" | "mediumDark" | "mediumLight" | "light" | "xLight") | number[], color?: string, reverseOffset?: boolean) => string;
+borderSize: string;
+outlinedBackgroundColor: string;
+fontWeight: number;
+sizes: {
+xSmall: {
+inset: string;
+outlinedInset: {
+vertical: string;
+horizontal: string;
+};
+fontSize: string;
+borderRadius: string;
+};
+small: {
+inset: string;
+outlinedInset: {
+vertical: string;
+horizontal: string;
+};
+fontSize: string;
+borderRadius: string;
+};
+medium: {
+inset: string;
+outlinedInset: {
+vertical: string;
+horizontal: string;
+};
+fontSize: string;
+borderRadius: string;
+};
+large: {
+inset: string;
+outlinedInset: {
+vertical: string;
+horizontal: string;
+};
+fontSize: string;
+borderRadius: string;
+};
+xLarge: {
+inset: string;
+outlinedInset: {
+vertical: string;
+horizontal: string;
+};
+fontSize: string;
+borderRadius: string;
+};
+};
+};
+inputs: {
+checkbox: {
+border: string;
+borderRadius: string;
+unCheckedBackgroundColor: string | undefined;
+checkmarkColor: string;
+labelColor: string;
+};
+text: {
+borderRadius: string;
+labelColor: Required<ColorSwatch>;
+placeholderColor: string;
+labelFontSize: string;
+textFontSize: string;
+borderWidth: string;
+defaultFocusColor: string;
+};
+select: {
+dropDownShadow: string;
+dropDownBackgroundColor: string;
+boxShadow: string;
+borderRadius: string;
+};
+number: {
+backgroundColor: string | undefined;
+fontColor: string;
+fontSize: string;
+borderRadius: string;
+};
+backgroundColor: string;
+fontSize: string;
+fontColor: string;
+fontFamily: string;
+colors: {
+primary: string;
+secondary: string;
+success: string;
+warning: string;
+danger: string;
+accent: string;
+dark: string;
+blue: string;
+};
+};
+icons: {
+sizes: {
+xSmall: number;
+small: number;
+medium: number;
+large: number;
+xLarge: number;
+};
+colors: {
+default: string | undefined;
+primaryBodyText: string;
+primaryHeadingText: string | undefined;
+inverseBodyText: string;
+inverseHeadingText: string;
+primaryBrand: string;
+secondaryBrand: string;
+warning: string;
+danger: string;
+success: string;
+background: string;
+accent: string;
+};
+};
+card: {
+backgroundColor: string;
+borderRadius: string;
+boxShadow: string;
+defaultInset: string;
+};
+separator: {
+border: string;
+color: string | undefined;
+};
+loadingSpinner: {
+size: {
+xSmall: number;
+small: number;
+medium: number;
+large: number;
+xLarge: number;
+};
+colors: {
+primary: string;
+secondary: string;
+success: string;
+warning: string;
+danger: string;
+};
+};
+animatedCheckmark: {
+sizeMap: {
+xSmall: number;
+small: number;
+medium: number;
+large: number;
+xLarge: number;
+};
+colors: {
+primary: string;
+secondary: string;
+success: string;
+accent: string;
+};
+strokeWidth: {
+small: number;
+default: number;
+large: number;
+};
+borderRadius: string;
+checkmarkFilledColor: string;
+};
+avatar: {
+borderWidth: string;
+borderColor: string | undefined;
+borderRadius: string;
+boxShadow: string;
+backgroundColor: string;
+bubbleBackgroundColors: {
+isActive: string;
+default: string | undefined;
+};
+defaultBackgroundColors: {
+primary: string;
+secondary: string;
+success: string;
+accent: string;
+warning: string;
+danger: string;
+};
+sizes: {
+xSmall: {
+avatarSize: number;
+bubbleLeftPosition: number;
+bubbleSize: number;
+};
+small: {
+avatarSize: number;
+bubbleLeftPosition: number;
+bubbleSize: number;
+};
+medium: {
+avatarSize: number;
+bubbleLeftPosition: number;
+bubbleSize: number;
+};
+large: {
+avatarSize: number;
+bubbleLeftPosition: number;
+bubbleSize: number;
+};
+xLarge: {
+avatarSize: number;
+bubbleLeftPosition: number;
+bubbleSize: number;
+};
+};
+};
+dialog: {
+backgroundColor: string;
+boxShadow: string;
+defaultInset: string;
+};
+drawer: {
+backgroundColor: string;
+borderRadius: string;
+boxShadow: string;
+bottomDirectionShadow: string;
+hoverBoxShadow: string;
+hoverBottomDirectionShadow: string;
+defaultInset: string;
+tab: {
+dark: {
+backgroundColor: string | undefined;
+arrowColor: string;
+};
+light: {
+backgroundColor: string;
+arrowColor: string | undefined;
+};
+};
+};
+sheet: {
+mobileBorderRadius: string;
+desktopBorderRadius: string;
+backgroundColor: string;
+boxShadow: string;
+};
+slider: {
+backgroundColor: string;
+borderRadius: string;
+handleRadius: string;
+handleColor: string;
+handleShadow: string;
+};
+navigation: {
+backgroundColor: string;
+border: string;
+borderColor: string | undefined;
+};
+toggle: {
+isActiveColor: string;
+isNotActiveColor: string | undefined;
+};
+tooltip: {
+lightBackgroundColor: string;
+darkBackgroundColor: string | undefined;
+boxShadow: string;
+borderColor: string;
+};
+colorPicker: {
+backgroundColor: string;
+borderColor: string;
+boxShadow: string;
+borderRadius: string;
+};
+sphere: Sphere_2;
+widget: Widget;
+colorOption: {
+defaults: {
+circleFill: string;
+innerRing: string;
+outerRing: string;
+};
+};
+}>;
+
+declare type ThumbnailType = {
+    image: string;
+    orientation: 'portrait' | 'landscape';
+};
+
+export declare const TitledList: FC<TitledListProps>;
+
+export declare type TitledListProps = {
+    title: string;
+    listItems: string[];
+    listStyle?: 'ordered' | 'unordered';
+    titleSize?: TitleSize;
+};
+
+export declare type TitleSize = Extract<TextType, 'subtitle' | 'largeBody' | 'body'>;
+
+export declare const Todo: FC<TodoPropTypes>;
+
+export declare type TodoPropTypes = {
+    todo: string;
+};
+
+export declare const Toggle: FC<ToggleProps>;
+
+export declare type ToggleProps = {
+    callBack: (isActive: boolean) => void;
+    defaultValue?: boolean;
+};
+
+export declare const Tooltip: ({ title, children, direction, background, repositionTooltip, zIndex, whiteSpace, }: TooltipProps) => JSX_2.Element;
+
+export declare type TooltipProps = {
+    title: string;
+    direction: DirectionType;
+    background?: ColorModeType;
+    repositionTooltip?: boolean;
+    zIndex?: number;
+    whiteSpace?: WhiteSpaceType;
+    children?: default_2.ReactNode;
+};
+
+export declare const Transition: FC<TransitionProps>;
+
+export declare type TransitionProps = {
+    title: string;
+    subtitle?: string;
+    isLoading: boolean;
+    loadedStatus?: 'success' | 'error';
+};
+
+export declare const UploadButton: default_2.ForwardRefExoticComponent<UploadButtonProps & default_2.RefAttributes<unknown>>;
+
+export declare type UploadButtonProps = {
+    onUpload: (upload: File | null) => void;
+    title: string;
+    backgroundColor?: BackgroundColor;
+    width?: Width;
+    height?: Height;
+    boxShadow?: Shadows;
+};
+
+export declare type UploadButtonRef = {
+    clearPreview: () => void;
+};
+
+export declare const UpsaleDialog: FC<UpsaleDialogProps>;
+
+export declare type UpsaleDialogProps = {
+    title: string;
+    description: string;
+    checkoutTitle: string;
+    checkoutDescription: string;
+    upsaleContent?: default_2.ReactNode;
+    optionFormLocation?: 'right' | 'left';
+    isOpen: boolean;
+    setIsDialogOpen: (isOpen: boolean) => void;
+    children: default_2.ReactNode;
+    maxWidth?: Responsive<LiteralUnion<HOCSpacingKeys>> | LiteralUnion<HOCSpacingKeys>;
+    maxHeight?: Responsive<LiteralUnion<HOCSpacingKeys>> | LiteralUnion<HOCSpacingKeys>;
+    height?: Responsive<LiteralUnion<HOCSpacingKeys>> | LiteralUnion<HOCSpacingKeys>;
+    zIndex?: number;
+    insetOverride?: HOCSpacingKeys;
+    successComponent?: default_2.ReactNode;
+    upsaleContentTitle?: string;
+    sponsorId?: string;
+    extraLink?: ExtraLinkType;
+    defaultNumOptionsShown?: number;
+    submitAction?: SubmitOptionType;
+    acceptSelectedAction?: AcceptSelectedOptionType;
+    shouldHideSendFreeCard?: boolean;
+    upsaleBanner?: default_2.ReactNode;
+    checkoutOnly?: boolean;
+} & UpsaleOptionsType;
+
+declare type UpsaleOptionsType = {
+    selectableOptions: UpsaleOptionType[];
+    selectedOption: string;
+    handleSelectedOption: (optionId: string) => void;
+    removeSelectedOption?: () => void;
+    children: default_2.ReactNode;
+    activeSelectedOption?: UpsaleOptionType;
+};
+
+declare type UpsaleOptionType = {
+    title: string;
+    secondaryTitle?: string;
+    subtitle?: string;
+    optionId: string;
+    featureCaption?: string;
+};
+
+export declare const UpsaleSheet: FC<UpsaleSheetProps>;
+
+export declare type UpsaleSheetProps = {
+    title: string;
+    description: string;
+    options: OptionType[];
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+    backgroundElement: default_2.ReactNode;
+    submitAction: OptionSubmitType;
+    extraLink: ExtraLinkType_2;
+    selectedOptionTitle: string;
+    selectedOptionDescription: string;
+    defaultNumOptionsShown?: number;
+    selectedOption: string;
+    removeSelectedOption?: () => void;
+    successComponent?: default_2.ReactNode;
+    zIndex?: number;
+    width?: string;
+    inset?: SpacingDirection | LiteralUnion<HOCSpacingKeys>;
+    outset?: SpacingDirection | LiteralUnion<HOCSpacingKeys>;
+};
+
+export declare const useColorSwatch: () => {
+    primaryBrand: Required<ColorSwatch>;
+    secondaryBrand: Required<ColorSwatch>;
+    success: Required<ColorSwatch>;
+    danger: Required<ColorSwatch>;
+    warning: Required<ColorSwatch>;
+    accent: Required<ColorSwatch>;
+    grayScale: ColorSwatch;
+    blueScale: Required<ColorSwatch>;
+    purpleScale: ColorSwatch;
+};
+
+declare type User = {
+    name: string;
+    active: string;
+    profileDate: string;
+    status: string;
+    activityFeed: string;
+    activityDescription: string;
+};
+
+export declare const UserCard: FC<UserCardProps>;
+
+export declare const UserCardLoader: FC<UserCardLoaderProps>;
+
+export declare type UserCardLoaderProps = {
+    size: UserCardSize;
+};
+
+export declare type UserCardProps = {
+    profileImage?: string;
+    firstName: string;
+    lastName: string;
+    heading?: string;
+    size: UserCardSize;
+    caption: string;
+    country?: Country;
+    minimize?: boolean;
+    active?: boolean;
+};
+
+export declare type UserCardSize = 'large' | 'medium' | 'small';
+
+export declare type UserImage = {
+    url: string;
+    onClick: () => void;
+    isHorizontal: boolean;
+};
+
+export declare type UserInfo = {
+    firstName: string;
+    lastName: string;
+    profileImage: string;
+    onClick?: () => void;
+};
+
+export declare const useTheme: () => {
+    mediaQueries: {
+        queries: {
+            xSmall: string;
+            small: string;
+            medium: string;
+            large: string;
+            xLarge: string;
+        };
+        rawValues: {
+            xSmall: number;
+            small: number;
+            medium: number;
+            large: number;
+            xLarge: number;
+        };
+    };
+    hocs: {
+        colors: {
+            swatches: {
+                primaryBrand: Required<ColorSwatch>;
+                secondaryBrand: Required<ColorSwatch>;
+                success: Required<ColorSwatch>;
+                danger: Required<ColorSwatch>;
+                warning: Required<ColorSwatch>;
+                accent: Required<ColorSwatch>;
+                grayScale: ColorSwatch;
+                blueScale: Required<ColorSwatch>;
+                purpleScale: ColorSwatch;
+            };
+            background: string;
+            foreground: string;
+        };
+        textColors: {
+            primaryBrand: string;
+            secondaryBrand: string;
+            primaryHeading: string | undefined;
+            primaryBody: string;
+            inverseHeading: string;
+            inverseBody: string;
+            accent: string;
+            success: string;
+            warning: string;
+            danger: string;
+            anchorBlue: string;
+        };
+        spacing: {
+            x0: string;
+            x_25: string;
+            x_5: string;
+            x_75: string;
+            x1: string;
+            x1_5: string;
+            x2: string;
+            x2_5: string;
+            x3: string;
+            x4: string;
+            x5: string;
+            x6: string;
+            x7: string;
+            x8: string;
+            x9: string;
+        };
+        borderRadius: {
+            none: string;
+            small: string;
+            medium: string;
+            default: string;
+            large: string;
+            circle: string;
+        };
+        shadows: {
+            light: string;
+            mediumLight: string;
+            mediumDark: string;
+            dark: string;
+            generate: (shadow: ("dark" | "mediumDark" | "mediumLight" | "light" | "xLight") | number[], color?: string, reverseOffset?: boolean) => string;
+        };
+        borders: {
+            thin: string;
+            default: string;
+            bold: string;
+        };
+    };
+    text: {
+        imports: {
+            body: string;
+            heading: string;
+        };
+        families: {
+            body: string;
+            heading: string;
+        };
+        types: {
+            heroTitle: {
+                color: string | undefined;
+                size: string;
+                fontWeight: number;
+                lineHeight: string;
+                fontFamily: string;
+            };
+            title: {
+                color: string | undefined;
+                size: string;
+                fontWeight: number;
+                lineHeight: string;
+                fontFamily: string;
+            };
+            subtitle: {
+                color: string | undefined;
+                size: string;
+                fontWeight: number;
+                lineHeight: string;
+                fontFamily: string;
+            };
+            largeBody: {
+                color: string;
+                size: string;
+                fontWeight: number;
+                lineHeight: string;
+                fontFamily: string;
+            };
+            body: {
+                color: string;
+                size: string;
+                fontWeight: number;
+                lineHeight: string;
+                fontFamily: string;
+            };
+            caption: {
+                color: string;
+                size: string;
+                fontWeight: number;
+                lineHeight: string;
+                fontFamily: string;
+            };
+            footnote: {
+                color: string;
+                size: string;
+                fontWeight: number;
+                lineHeight: string;
+                fontFamily: string;
+            };
+        };
+        colors: {
+            primaryBrand: string;
+            secondaryBrand: string;
+            primaryHeading: string | undefined;
+            primaryBody: string;
+            inverseHeading: string;
+            inverseBody: string;
+            accent: string;
+            success: string;
+            warning: string;
+            danger: string;
+            anchorBlue: string;
+        };
+        weights: {
+            thin: number;
+            regular: number;
+            semiBold: number;
+            bold: number;
+            extraBold: number;
+        };
+    };
+    spacing: {
+        x0: string;
+        x_25: string;
+        x_5: string;
+        x_75: string;
+        x1: string;
+        x1_5: string;
+        x2: string;
+        x2_5: string;
+        x3: string;
+        x4: string;
+        x5: string;
+        x6: string;
+        x7: string;
+        x8: string;
+        x9: string;
+    };
+    buttons: {
+        primary: {
+            backgroundColor: string;
+            fontColor: string;
+            fontFamily: string;
+        };
+        secondary: {
+            backgroundColor: string;
+            fontColor: string;
+            fontFamily: string;
+        };
+        warning: {
+            backgroundColor: string;
+            fontColor: string;
+            fontFamily: string;
+        };
+        success: {
+            backgroundColor: string;
+            fontColor: string;
+            fontFamily: string;
+        };
+        danger: {
+            backgroundColor: string;
+            fontColor: string;
+            fontFamily: string;
+        };
+        shadow: {
+            backgroundColor: string;
+            fontColor: string;
+            fontFamily: string;
+        };
+        accent: {
+            backgroundColor: string;
+            fontColor: string;
+            fontFamily: string;
+        };
+        smoke: {
+            backgroundColor: string;
+            fontColor: string;
+            fontFamily: string;
+        };
+        boxShadow: (shadow: ("dark" | "mediumDark" | "mediumLight" | "light" | "xLight") | number[], color?: string, reverseOffset?: boolean) => string;
+        borderSize: string;
+        outlinedBackgroundColor: string;
+        fontWeight: number;
+        sizes: {
+            xSmall: {
+                inset: string;
+                outlinedInset: {
+                    vertical: string;
+                    horizontal: string;
+                };
+                fontSize: string;
+                borderRadius: string;
+            };
+            small: {
+                inset: string;
+                outlinedInset: {
+                    vertical: string;
+                    horizontal: string;
+                };
+                fontSize: string;
+                borderRadius: string;
+            };
+            medium: {
+                inset: string;
+                outlinedInset: {
+                    vertical: string;
+                    horizontal: string;
+                };
+                fontSize: string;
+                borderRadius: string;
+            };
+            large: {
+                inset: string;
+                outlinedInset: {
+                    vertical: string;
+                    horizontal: string;
+                };
+                fontSize: string;
+                borderRadius: string;
+            };
+            xLarge: {
+                inset: string;
+                outlinedInset: {
+                    vertical: string;
+                    horizontal: string;
+                };
+                fontSize: string;
+                borderRadius: string;
+            };
+        };
+    };
+    inputs: {
+        checkbox: {
+            border: string;
+            borderRadius: string;
+            unCheckedBackgroundColor: string | undefined;
+            checkmarkColor: string;
+            labelColor: string;
+        };
+        text: {
+            borderRadius: string;
+            labelColor: Required<ColorSwatch>;
+            placeholderColor: string;
+            labelFontSize: string;
+            textFontSize: string;
+            borderWidth: string;
+            defaultFocusColor: string;
+        };
+        select: {
+            dropDownShadow: string;
+            dropDownBackgroundColor: string;
+            boxShadow: string;
+            borderRadius: string;
+        };
+        number: {
+            backgroundColor: string | undefined;
+            fontColor: string;
+            fontSize: string;
+            borderRadius: string;
+        };
+        backgroundColor: string;
+        fontSize: string;
+        fontColor: string;
+        fontFamily: string;
+        colors: {
+            primary: string;
+            secondary: string;
+            success: string;
+            warning: string;
+            danger: string;
+            accent: string;
+            dark: string;
+            blue: string;
+        };
+    };
+    icons: {
+        sizes: {
+            xSmall: number;
+            small: number;
+            medium: number;
+            large: number;
+            xLarge: number;
+        };
+        colors: {
+            default: string | undefined;
+            primaryBodyText: string;
+            primaryHeadingText: string | undefined;
+            inverseBodyText: string;
+            inverseHeadingText: string;
+            primaryBrand: string;
+            secondaryBrand: string;
+            warning: string;
+            danger: string;
+            success: string;
+            background: string;
+            accent: string;
+        };
+    };
+    card: {
+        backgroundColor: string;
+        borderRadius: string;
+        boxShadow: string;
+        defaultInset: string;
+    };
+    separator: {
+        border: string;
+        color: string | undefined;
+    };
+    loadingSpinner: {
+        size: {
+            xSmall: number;
+            small: number;
+            medium: number;
+            large: number;
+            xLarge: number;
+        };
+        colors: {
+            primary: string;
+            secondary: string;
+            success: string;
+            warning: string;
+            danger: string;
+        };
+    };
+    animatedCheckmark: {
+        sizeMap: {
+            xSmall: number;
+            small: number;
+            medium: number;
+            large: number;
+            xLarge: number;
+        };
+        colors: {
+            primary: string;
+            secondary: string;
+            success: string;
+            accent: string;
+        };
+        strokeWidth: {
+            small: number;
+            default: number;
+            large: number;
+        };
+        borderRadius: string;
+        checkmarkFilledColor: string;
+    };
+    avatar: {
+        borderWidth: string;
+        borderColor: string | undefined;
+        borderRadius: string;
+        boxShadow: string;
+        backgroundColor: string;
+        bubbleBackgroundColors: {
+            isActive: string;
+            default: string | undefined;
+        };
+        defaultBackgroundColors: {
+            primary: string;
+            secondary: string;
+            success: string;
+            accent: string;
+            warning: string;
+            danger: string;
+        };
+        sizes: {
+            xSmall: {
+                avatarSize: number;
+                bubbleLeftPosition: number;
+                bubbleSize: number;
+            };
+            small: {
+                avatarSize: number;
+                bubbleLeftPosition: number;
+                bubbleSize: number;
+            };
+            medium: {
+                avatarSize: number;
+                bubbleLeftPosition: number;
+                bubbleSize: number;
+            };
+            large: {
+                avatarSize: number;
+                bubbleLeftPosition: number;
+                bubbleSize: number;
+            };
+            xLarge: {
+                avatarSize: number;
+                bubbleLeftPosition: number;
+                bubbleSize: number;
+            };
+        };
+    };
+    dialog: {
+        backgroundColor: string;
+        boxShadow: string;
+        defaultInset: string;
+    };
+    drawer: {
+        backgroundColor: string;
+        borderRadius: string;
+        boxShadow: string;
+        bottomDirectionShadow: string;
+        hoverBoxShadow: string;
+        hoverBottomDirectionShadow: string;
+        defaultInset: string;
+        tab: {
+            dark: {
+                backgroundColor: string | undefined;
+                arrowColor: string;
+            };
+            light: {
+                backgroundColor: string;
+                arrowColor: string | undefined;
+            };
+        };
+    };
+    sheet: {
+        mobileBorderRadius: string;
+        desktopBorderRadius: string;
+        backgroundColor: string;
+        boxShadow: string;
+    };
+    slider: {
+        backgroundColor: string;
+        borderRadius: string;
+        handleRadius: string;
+        handleColor: string;
+        handleShadow: string;
+    };
+    navigation: {
+        backgroundColor: string;
+        border: string;
+        borderColor: string | undefined;
+    };
+    toggle: {
+        isActiveColor: string;
+        isNotActiveColor: string | undefined;
+    };
+    tooltip: {
+        lightBackgroundColor: string;
+        darkBackgroundColor: string | undefined;
+        boxShadow: string;
+        borderColor: string;
+    };
+    colorPicker: {
+        backgroundColor: string;
+        borderColor: string;
+        boxShadow: string;
+        borderRadius: string;
+    };
+    sphere: Sphere_2;
+    widget: Widget;
+    colorOption: {
+        defaults: {
+            circleFill: string;
+            innerRing: string;
+            outerRing: string;
+        };
+    };
+};
+
+declare type VerticalZone = {
+    component: default_2.ReactNode;
+    height: number | string;
+};
+
+export declare const VideoPlayer: FC<VideoPlayerProps>;
+
+export declare type VideoPlayerProps = {
+    poster: string;
+    hasShadow: boolean;
+    videoId: string;
+    duration?: string;
+    width: string;
+    height?: string;
+    maxHeight?: string;
+    borderRadius?: BorderRadius_2 | LiteralUnion<HOCBorderRadiusKeys>;
+    minWidth?: string;
+    shouldAutoplay?: boolean;
+};
+
+export declare const VStack: default_2.MemoExoticComponent<({ children, gap, justifyContent, alignItems, alignContent, inset, outset, width, height, overflow, }: VStackProps) => JSX_2.Element>;
+
+export declare type VStackProps = {
+    gap: HOCSpacingKeys;
+    justifyContent?: Responsive<CSSGridBaseValues> | CSSGridBaseValues;
+    alignContent?: Responsive<CSSGridBaseValues> | CSSGridBaseValues;
+    alignItems?: Responsive<CSSGridBaseValues> | CSSGridBaseValues;
+    inset?: SpacingDirection | LiteralUnion<HOCSpacingKeys>;
+    outset?: SpacingDirection | LiteralUnion<HOCSpacingKeys>;
+    width?: Width;
+    height?: Height;
+    overflow?: Overflow;
+    children?: default_2.ReactNode;
+};
+
+declare type WarningColorSelection = {
+    swatch: 'warning';
+    shade: LiteralUnion<keyof RequiredColorSwatch>;
+};
+
+export declare type WeightType = keyof typeof entities.text.weights;
+
+export declare type WhiteSpaceType = 'normal' | 'nowrap' | 'pre';
+
+declare type Widget = ThemeModeProperies<WidgetProperties>;
+
+declare type WidgetProperties = {
+    backgroundColor: string;
+    fontColor: TextColor;
+};
+
+declare type Width = Responsive<LiteralUnion<HOCSpacingKeys>> | LiteralUnion<HOCSpacingKeys>;
+
+export declare type ZoneType = {
+    top?: VerticalZone;
+    bottom?: VerticalZone;
+    left?: HorizontalZone;
+    right?: HorizontalZone;
+};
+
+declare type ZoneType_2 = 'bottom' | 'top' | 'left' | 'right';
+
+export declare const Zoom: FC<ZoomProps>;
+
+export declare type ZoomItemsType = {
+    value: string;
+    label: string;
+    hasSeparator?: boolean;
+};
+
+export declare type ZoomProps = {
+    items: ZoomItemsType[];
+    selectedOptionIndex: number;
+    isDropDownAbove?: boolean;
+    dropDownMaxHeight?: string;
+    onChange: (selectedOptionIndex: number) => void;
+    background: 'background' | 'foreground';
+};
+
+export { }