@sendoutcards/quantum-design-ui 2.0.0-alpha.6 → 2.0.0-canary.1

package/dist/index.d.ts

@@ -8,6 +8,7 @@ import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { MotionProps } from 'framer-motion';
 import { MotionValue } from 'framer-motion';
 import { Provider } from 'react';
+import { ReactNode } from 'react';
 import { RgbColor } from 'react-colorful';
 import { Target as Target_2 } from 'framer-motion';
 import { TargetAndTransition } from 'framer-motion';
@@ -36,6 +37,7 @@ export declare type AccordionBodyProps = {
     onAnimationComplete?: () => void;
     overflow?: Overflow;
     insetBody?: HOCSpacingKeys;
+    children?: default_2.ReactNode;
 };
 
 export declare const AccordionHeading: ({ children, eventKey, headingSize, onHeadingClick, arrowLocation, }: AccordionHeadingProps) => JSX_2.Element;
@@ -121,9 +123,9 @@ export declare type AffiliateShareWidgetProps = {
     shareLink: string;
 };
 
-declare type AlignContent = 'space-evenly' | 'stretch' | 'start' | 'end' | 'baseline' | 'first baseline' | 'last baseline' | 'safe' | 'unsafe' | CSSGridBaseValues | FlexBaseValues;
+export declare type AlignContent = 'space-evenly' | 'stretch' | 'start' | 'end' | 'baseline' | 'first baseline' | 'last baseline' | 'safe' | 'unsafe' | CSSGridBaseValues | FlexBaseValues;
 
-declare type AlignItems = AlignContent | 'self-start' | 'self-end' | CSSGridBaseValues;
+export declare type AlignItems = AlignContent | 'self-start' | 'self-end' | CSSGridBaseValues;
 
 export declare type AlignmentOptions = 'left' | 'center' | 'right';
 
@@ -237,11 +239,11 @@ export declare type AwardGroupLabelProps = {
     label: string;
 };
 
-declare type BackgroundPosition = 'center' | 'left top' | 'left center' | 'left bottom' | 'right top' | 'right center' | 'right bottom' | 'center top' | 'center center' | 'center bottom';
+export declare type 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';
+export declare type BackgroundRepeat = 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' | 'initial' | 'inherit';
 
-declare type BackgroundSize = 'auto' | 'length' | 'cover' | 'contain' | 'initial' | 'inherit';
+export declare type BackgroundSize = 'auto' | 'length' | 'cover' | 'contain' | 'initial' | 'inherit';
 
 export declare const Badge: FC<BadgeProps>;
 
@@ -288,6 +290,8 @@ declare type BaseBannerProps = {
     onClose?: () => void;
 };
 
+export declare type BaseColorType = keyof typeof entities.hocs.colors.swatches;
+
 export declare const bellaCadaeuxTheme: Entities;
 
 export declare type BGColorUnion = ColorSelection | LiteralUnion<HOCColorKeys> | Responsive<HOCColorKeys>;
@@ -350,7 +354,7 @@ export declare const borders: {
 
 export declare type BorderStyleDirection = BorderDirection<BorderStyles> | BorderDirection<Responsive<BorderStyles>>;
 
-declare type BorderStyles = 'none' | 'hidden' | 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'initial' | 'inherit';
+export declare type BorderStyles = 'none' | 'hidden' | 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'initial' | 'inherit';
 
 export declare type BorderWidth = BorderDirection<HOCBorderWidthKeys> | BorderDirection<Responsive<HOCBorderWidthKeys>>;
 
@@ -469,7 +473,7 @@ export declare type CardQuantitySliderProps = {
     secondaryAction?: default_2.ReactNode;
 } & QuantitySliderProps;
 
-declare type Char = 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'J' | 'K' | 'L' | 'M' | 'N' | 'O' | 'P' | 'Q' | 'R' | 'S' | 'T' | 'U' | 'V' | 'W' | 'X' | 'Y' | 'Z';
+export declare type Char = 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'J' | 'K' | 'L' | 'M' | 'N' | 'O' | 'P' | 'Q' | 'R' | 'S' | 'T' | 'U' | 'V' | 'W' | 'X' | 'Y' | 'Z';
 
 export declare const Checkbox: FC<CheckboxProps>;
 
@@ -526,7 +530,7 @@ export declare type CloseButtonProps = {
     id?: string;
 };
 
-declare type ColorModeType = 'light' | 'dark';
+export declare type ColorModeType = 'light' | 'dark';
 
 export declare const ColorOption: FC<ColorOptionProps>;
 
@@ -554,6 +558,11 @@ export declare const colors: {
 
 export declare type ColorSelection = PrimaryBrandColorSelection | SecondaryBrandColorSelection | SuccessColorSelection | WarningColorSelection | DangerColorSelection | AccentColorSelection | GrayScaleColorSelection | BlueScaleColorSelection | PurpleScaleColorSelection;
 
+export declare type ColorStop = {
+    color: HOCSwatchColorKeys;
+    percentage: number;
+};
+
 declare type ColorSwatch = {
     base: string;
     _100?: string;
@@ -715,15 +724,17 @@ export declare type CountdownTimerProps = {
     timeReachedMessage?: string;
 };
 
-declare type Country = {
+export declare type Country = {
     isoCode: string;
     callingCode: number;
     hasSeparator?: boolean;
 };
 
-declare type CSSGridBaseValues = 'start' | 'end' | 'space-evenly' | 'center';
+export declare type CSSGridBaseValues = 'start' | 'end' | 'space-evenly' | 'center';
+
+export declare type CSSValues = BorderStyles | Cursor | Display | JustifyContent | AlignContent | AlignItems | JustifyItems | FlexDirection | BackgroundSize | BackgroundPosition | BackgroundRepeat | Overflow | Position;
 
-declare type Cursor = 'pointer' | 'auto' | 'text' | 'zoom-out' | 'zoom-in' | 'initial' | 'inherit' | 'move' | 'row-resize' | 'col-resize' | 'nesw-resize' | 'nwse-resize' | 'not-allowed';
+export declare type Cursor = 'pointer' | 'auto' | 'text' | 'zoom-out' | 'zoom-in' | 'initial' | 'inherit' | 'move' | 'row-resize' | 'col-resize' | 'nesw-resize' | 'nwse-resize' | 'not-allowed';
 
 declare type DangerColorSelection = {
     swatch: 'danger';
@@ -769,7 +780,7 @@ declare type Disclaimer = {
     termsDescription: string;
 };
 
-declare type Display = 'relative' | 'absolute' | 'inline' | 'inline-block' | 'flex' | 'grid' | 'none' | 'contents' | 'inline-flex';
+export declare type Display = 'relative' | 'absolute' | 'inline' | 'inline-block' | 'flex' | 'grid' | 'none' | 'contents' | 'inline-flex';
 
 export declare const DisplayCard: ({ title, description, children, }: DisplayCardProps) => JSX_2.Element;
 
@@ -1190,26 +1201,26 @@ declare const entities: {
         };
     };
     icons: {
-        sizes: {
-            xSmall: number;
-            small: number;
-            medium: number;
-            large: number;
-            xLarge: number;
+        readonly sizes: {
+            readonly xSmall: number;
+            readonly small: number;
+            readonly medium: number;
+            readonly large: number;
+            readonly 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;
+        readonly colors: {
+            readonly default: string | undefined;
+            readonly primaryBodyText: string;
+            readonly primaryHeadingText: string | undefined;
+            readonly inverseBodyText: string;
+            readonly inverseHeadingText: string;
+            readonly primaryBrand: string;
+            readonly secondaryBrand: string;
+            readonly warning: string;
+            readonly danger: string;
+            readonly success: string;
+            readonly background: string;
+            readonly accent: string;
         };
     };
     card: {
@@ -1458,14 +1469,14 @@ export declare const Flex: default_2.MemoExoticComponent<(props: FlexProps) => J
 
 declare type FlexBaseValues = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'initial' | 'inherit';
 
-declare type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+export declare type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
 
 export declare type FlexProps = {
     children?: default_2.ReactNode;
     outsideClick?: () => void;
 } & HOCBaseProps & HOCMotionProps;
 
-declare type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
+export declare type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
 
 declare type FramerAnimation = AnimationControls | TargetAndTransition | VariantLabels | boolean;
 
@@ -1656,26 +1667,26 @@ export declare type IconProps = {
 } & Omit<SVGProps, 'entity'>;
 
 declare const icons: {
-    sizes: {
-        xSmall: number;
-        small: number;
-        medium: number;
-        large: number;
-        xLarge: number;
+    readonly sizes: {
+        readonly xSmall: number;
+        readonly small: number;
+        readonly medium: number;
+        readonly large: number;
+        readonly 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;
+    readonly colors: {
+        readonly default: string | undefined;
+        readonly primaryBodyText: string;
+        readonly primaryHeadingText: string | undefined;
+        readonly inverseBodyText: string;
+        readonly inverseHeadingText: string;
+        readonly primaryBrand: string;
+        readonly secondaryBrand: string;
+        readonly warning: string;
+        readonly danger: string;
+        readonly success: string;
+        readonly background: string;
+        readonly accent: string;
     };
 };
 
@@ -1838,6 +1849,8 @@ export declare type InfoBlockProps = {
 
 export declare type InfoBlockSizeType = 'large' | 'medium' | 'small';
 
+export declare type Initials = 'inherit' | 'initial';
+
 export declare const Input: FC<InputProps>;
 
 export declare type InputFocusType = IconColors;
@@ -1894,9 +1907,9 @@ export declare type Item = {
     isActive: boolean;
 };
 
-declare type JustifyContent = FlexBaseValues | CSSGridBaseValues;
+export declare type JustifyContent = FlexBaseValues | CSSGridBaseValues;
 
-declare type JustifyItems = 'start' | 'end' | 'center' | 'stretch';
+export declare type JustifyItems = 'start' | 'end' | 'center' | 'stretch';
 
 export declare type Link = {
     title: default_2.ReactNode;
@@ -2067,7 +2080,7 @@ export declare type NoteSection = {
     notes: string[];
 };
 
-declare type OnMouseEvent = (event: default_2.MouseEvent<HTMLElement, MouseEvent>) => void;
+export declare type OnMouseEvent = (event: default_2.MouseEvent<HTMLElement, MouseEvent>) => void;
 
 declare const Option_2: default_2.ForwardRefExoticComponent<OptionProps & default_2.RefAttributes<HTMLDivElement>>;
 export { Option_2 as Option }
@@ -2159,7 +2172,7 @@ export declare type OrderCardProps = {
 declare type orientation_2 = 'up' | 'down' | 'left' | 'right';
 export { orientation_2 as orientation }
 
-declare type Overflow = 'visible' | 'auto' | 'scroll' | 'hidden';
+export declare type Overflow = 'visible' | 'auto' | 'scroll' | 'hidden';
 
 export declare const Overlay: ({ children, zIndex, animate, initial, exit, variants, transition, motionKey, position, backgroundVariant, pinned, shouldScroll, ...rest }: OverlayPropTypes) => JSX_2.Element;
 
@@ -2236,7 +2249,7 @@ export declare type PinInputProps = {
 
 export declare type PinnedType = 'top' | 'center' | 'bottom';
 
-declare type Position = 'absolute' | 'fixed' | 'sticky' | 'relative' | 'static';
+export declare type Position = 'absolute' | 'fixed' | 'sticky' | 'relative' | 'static';
 
 export declare const PricingTile: ({ title, price, features, accentColor, backgroundColor, isFeatured, featuredItemStyles, textColor, description, priceSubtext, billingInterval, primaryAction, secondaryAction, children, hasShadow, disclaimer, isSelected, isFullLength, }: PricingTileProps) => JSX_2.Element;
 
@@ -2294,6 +2307,7 @@ export declare type PromotionWidgetProps = {
     width?: string;
     type: ThemeMode;
     buttonSize?: SizeType;
+    children?: ReactNode;
 };
 
 export declare const promptingsTheme: Entities;
@@ -2319,6 +2333,7 @@ export declare type QDSChromeProps = {
     accountRouteOnClick: () => void;
     quickLinks: QuickLinksType;
     isFullScreen?: boolean;
+    children?: ReactNode;
 };
 
 export declare const QuantitySlider: FC<QuantitySliderProps>;
@@ -2373,7 +2388,7 @@ declare type QuickLinkType = {
     link: Item;
 };
 
-declare type QuoteType = Omit<ThemeMode, 'accent' | 'shadow'>;
+declare type QuoteType = Exclude<ThemeMode, 'accent' | 'shadow'>;
 
 export declare const RadioOptionCard: FC<RadioOptionCardProps>;
 
@@ -2459,6 +2474,7 @@ declare type RevealingContentProps = {
     width: string;
     height: string;
     isMobile: boolean;
+    children?: ReactNode;
 };
 
 declare type RotationAndOffsetType = {
@@ -2526,6 +2542,7 @@ declare type SelectableCardProps = {
     isActive: boolean;
     onClick?: () => void;
     shouldShowActiveIcons?: boolean;
+    children?: ReactNode;
 };
 
 export declare const SelectableList: FC<SelectableListProps>;
@@ -2535,6 +2552,7 @@ export declare type SelectableListProps = {
     orientation?: ListOrientation;
     selectedIndexes: number[];
     setSelectedIndexes: (selectedIndexes: number[]) => void;
+    children?: ReactNode;
 };
 
 export declare type SelectableOptions = {
@@ -2543,7 +2561,7 @@ export declare type SelectableOptions = {
     glare: GlareType;
 };
 
-export declare type SelectFocusType = IconColors;
+export declare type SelectFocusType = HOCSwatchColorKeys;
 
 export declare type SelectProps = {
     alignment?: AlignmentOptions;
@@ -2640,7 +2658,7 @@ export declare type SidebarProps = {
 
 declare type SizeMapType = Record<SizeType, number>;
 
-declare type SizeProperties<T> = {
+export declare type SizeProperties<T> = {
     xSmall: T;
     small: T;
     medium: T;
@@ -2648,7 +2666,7 @@ declare type SizeProperties<T> = {
     xLarge: T;
 };
 
-declare type SizeType = keyof SizeProperties<never>;
+export declare type SizeType = keyof SizeProperties<never>;
 
 export declare const Slider: FC<SliderProps>;
 
@@ -2783,6 +2801,7 @@ export declare type StepperProps = {
         type: ButtonType;
         title: string;
     };
+    children?: ReactNode;
 };
 
 export declare const Stoplight: ({ activeIndex, setActiveIndex, isExpanded, setIsExpanded, type, onClick, orientation, isCollapsible, children, }: StoplightProps) => JSX_2.Element;
@@ -3269,26 +3288,26 @@ 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;
+readonly sizes: {
+readonly xSmall: number;
+readonly small: number;
+readonly medium: number;
+readonly large: number;
+readonly xLarge: number;
+};
+readonly colors: {
+readonly default: string | undefined;
+readonly primaryBodyText: string;
+readonly primaryHeadingText: string | undefined;
+readonly inverseBodyText: string;
+readonly inverseHeadingText: string;
+readonly primaryBrand: string;
+readonly secondaryBrand: string;
+readonly warning: string;
+readonly danger: string;
+readonly success: string;
+readonly background: string;
+readonly accent: string;
 };
 };
 card: {
@@ -3454,9 +3473,9 @@ outerRing: string;
 };
 }>;
 
-declare type ThemeMode = keyof ThemeModeProperies<never>;
+export declare type ThemeMode = keyof ThemeModeProperies<never>;
 
-declare type ThemeModeProperies<T> = {
+export declare type ThemeModeProperies<T> = {
     primary: T;
     secondary: T;
     success: T;
@@ -3786,26 +3805,26 @@ 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;
+readonly sizes: {
+readonly xSmall: number;
+readonly small: number;
+readonly medium: number;
+readonly large: number;
+readonly xLarge: number;
+};
+readonly colors: {
+readonly default: string | undefined;
+readonly primaryBodyText: string;
+readonly primaryHeadingText: string | undefined;
+readonly inverseBodyText: string;
+readonly inverseHeadingText: string;
+readonly primaryBrand: string;
+readonly secondaryBrand: string;
+readonly warning: string;
+readonly danger: string;
+readonly success: string;
+readonly background: string;
+readonly accent: string;
 };
 };
 card: {
@@ -4113,6 +4132,7 @@ export declare type UpsaleSheetProps = {
     width?: string;
     inset?: SpacingDirection | LiteralUnion<HOCSpacingKeys>;
     outset?: SpacingDirection | LiteralUnion<HOCSpacingKeys>;
+    children?: ReactNode;
 };
 
 export declare const useColorSwatch: () => {
@@ -4491,26 +4511,26 @@ export declare const useTheme: () => {
         };
     };
     icons: {
-        sizes: {
-            xSmall: number;
-            small: number;
-            medium: number;
-            large: number;
-            xLarge: number;
+        readonly sizes: {
+            readonly xSmall: number;
+            readonly small: number;
+            readonly medium: number;
+            readonly large: number;
+            readonly 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;
+        readonly colors: {
+            readonly default: string | undefined;
+            readonly primaryBodyText: string;
+            readonly primaryHeadingText: string | undefined;
+            readonly inverseBodyText: string;
+            readonly inverseHeadingText: string;
+            readonly primaryBrand: string;
+            readonly secondaryBrand: string;
+            readonly warning: string;
+            readonly danger: string;
+            readonly success: string;
+            readonly background: string;
+            readonly accent: string;
         };
     };
     card: {