@qasa/qds-ui 0.10.0-next.5 → 0.10.0-next.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +2 -2
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/components/display-text/display-text.d.ts +29 -0
- package/dist/cjs/types/components/display-text/index.d.ts +1 -0
- package/dist/cjs/types/components/heading/heading.d.ts +1 -445
- package/dist/esm/index.js +2 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/display-text/display-text.d.ts +29 -0
- package/dist/esm/types/components/display-text/index.d.ts +1 -0
- package/dist/esm/types/components/heading/heading.d.ts +1 -445
- package/dist/index.d.ts +3 -446
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -1479,7 +1479,7 @@ declare const getFormFieldBaseStyles: (theme: {
|
|
|
1479
1479
|
alignItems: "center";
|
|
1480
1480
|
};
|
|
1481
1481
|
|
|
1482
|
-
declare const getSizeStyles$
|
|
1482
|
+
declare const getSizeStyles$4: (theme: {
|
|
1483
1483
|
mediaQueries: {
|
|
1484
1484
|
readonly smUp: "@media(min-width: 480px)";
|
|
1485
1485
|
readonly mdUp: "@media(min-width: 768px)";
|
|
@@ -1929,7 +1929,7 @@ declare const getSizeStyles$5: (theme: {
|
|
|
1929
1929
|
paddingRight: string;
|
|
1930
1930
|
};
|
|
1931
1931
|
};
|
|
1932
|
-
declare type ButtonSize = VariantProps<typeof getSizeStyles$
|
|
1932
|
+
declare type ButtonSize = VariantProps<typeof getSizeStyles$4>;
|
|
1933
1933
|
declare const getVariantStyles$1: (theme: {
|
|
1934
1934
|
mediaQueries: {
|
|
1935
1935
|
readonly smUp: "@media(min-width: 480px)";
|
|
@@ -2547,454 +2547,11 @@ declare const DropdownMenu: typeof DropdownMenuRoot & {
|
|
|
2547
2547
|
Divider: react.ForwardRefExoticComponent<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof react.HTMLAttributes<HTMLDivElement>> & react.RefAttributes<HTMLDivElement>>;
|
|
2548
2548
|
};
|
|
2549
2549
|
|
|
2550
|
-
declare
|
|
2551
|
-
mediaQueries: {
|
|
2552
|
-
readonly smUp: "@media(min-width: 480px)";
|
|
2553
|
-
readonly mdUp: "@media(min-width: 768px)";
|
|
2554
|
-
readonly lgUp: "@media(min-width: 1024px)";
|
|
2555
|
-
readonly xlUp: "@media(min-width: 1280px)";
|
|
2556
|
-
readonly '2xlUp': "@media(min-width: 1536px)";
|
|
2557
|
-
};
|
|
2558
|
-
spacing: {
|
|
2559
|
-
'0x': string;
|
|
2560
|
-
'1x': string;
|
|
2561
|
-
'2x': string;
|
|
2562
|
-
'3x': string;
|
|
2563
|
-
'4x': string;
|
|
2564
|
-
'5x': string;
|
|
2565
|
-
'6x': string;
|
|
2566
|
-
'8x': string;
|
|
2567
|
-
'12x': string;
|
|
2568
|
-
'16x': string;
|
|
2569
|
-
'20x': string;
|
|
2570
|
-
'24x': string;
|
|
2571
|
-
};
|
|
2572
|
-
breakpoints: {
|
|
2573
|
-
readonly base: 0;
|
|
2574
|
-
readonly sm: 480;
|
|
2575
|
-
readonly md: 768;
|
|
2576
|
-
readonly lg: 1024;
|
|
2577
|
-
readonly xl: 1280;
|
|
2578
|
-
readonly '2xl': 1536;
|
|
2579
|
-
};
|
|
2580
|
-
zIndices: {
|
|
2581
|
-
hide: number;
|
|
2582
|
-
auto: string;
|
|
2583
|
-
base: number;
|
|
2584
|
-
docked: number;
|
|
2585
|
-
dropdown: number;
|
|
2586
|
-
sticky: number;
|
|
2587
|
-
banner: number;
|
|
2588
|
-
overlay: number;
|
|
2589
|
-
modal: number;
|
|
2590
|
-
popover: number;
|
|
2591
|
-
skipLink: number;
|
|
2592
|
-
toast: number;
|
|
2593
|
-
tooltip: number;
|
|
2594
|
-
};
|
|
2595
|
-
colors: {
|
|
2596
|
-
core: {
|
|
2597
|
-
black: string;
|
|
2598
|
-
white: string;
|
|
2599
|
-
gray90: string;
|
|
2600
|
-
gray80: string;
|
|
2601
|
-
gray70: string;
|
|
2602
|
-
gray60: string;
|
|
2603
|
-
gray50: string;
|
|
2604
|
-
gray40: string;
|
|
2605
|
-
gray30: string;
|
|
2606
|
-
gray20: string;
|
|
2607
|
-
gray10: string;
|
|
2608
|
-
uiPink: string;
|
|
2609
|
-
uiPinkDark: string;
|
|
2610
|
-
uiPinkLight: string;
|
|
2611
|
-
brown: string;
|
|
2612
|
-
brownDark: string;
|
|
2613
|
-
brownLight: string;
|
|
2614
|
-
offWhite: string;
|
|
2615
|
-
offWhiteDark: string;
|
|
2616
|
-
offWhiteLight: string;
|
|
2617
|
-
softPink: string;
|
|
2618
|
-
warmYellow: string;
|
|
2619
|
-
softYellow: string;
|
|
2620
|
-
red10: string;
|
|
2621
|
-
red20: string;
|
|
2622
|
-
red30: string;
|
|
2623
|
-
red40: string;
|
|
2624
|
-
red50: string;
|
|
2625
|
-
red60: string;
|
|
2626
|
-
red70: string;
|
|
2627
|
-
red80: string;
|
|
2628
|
-
red90: string;
|
|
2629
|
-
green90: string;
|
|
2630
|
-
green80: string;
|
|
2631
|
-
green70: string;
|
|
2632
|
-
green60: string;
|
|
2633
|
-
green50: string;
|
|
2634
|
-
green40: string;
|
|
2635
|
-
green30: string;
|
|
2636
|
-
green20: string;
|
|
2637
|
-
green10: string;
|
|
2638
|
-
blue90: string;
|
|
2639
|
-
blue80: string;
|
|
2640
|
-
blue70: string;
|
|
2641
|
-
blue60: string;
|
|
2642
|
-
blue50: string;
|
|
2643
|
-
blue40: string;
|
|
2644
|
-
blue30: string;
|
|
2645
|
-
blue20: string;
|
|
2646
|
-
blue10: string;
|
|
2647
|
-
yellow90: string;
|
|
2648
|
-
yellow80: string;
|
|
2649
|
-
yellow70: string;
|
|
2650
|
-
yellow60: string;
|
|
2651
|
-
yellow50: string;
|
|
2652
|
-
yellow40: string;
|
|
2653
|
-
yellow30: string;
|
|
2654
|
-
yellow20: string;
|
|
2655
|
-
yellow10: string;
|
|
2656
|
-
blackAlpha20: string;
|
|
2657
|
-
};
|
|
2658
|
-
bg: {
|
|
2659
|
-
default: string;
|
|
2660
|
-
brandPrimary: string;
|
|
2661
|
-
brandPrimaryHover: string;
|
|
2662
|
-
brandPrimaryActive: string;
|
|
2663
|
-
brandSecondary: string;
|
|
2664
|
-
brandSecondaryHover: string;
|
|
2665
|
-
brandSecondaryActive: string;
|
|
2666
|
-
brandTertiary: string;
|
|
2667
|
-
brandTertiaryHover: string;
|
|
2668
|
-
brandTertiaryActive: string;
|
|
2669
|
-
negative: string;
|
|
2670
|
-
warning: string;
|
|
2671
|
-
positive: string;
|
|
2672
|
-
inset: string;
|
|
2673
|
-
backdrop: string;
|
|
2674
|
-
};
|
|
2675
|
-
text: {
|
|
2676
|
-
strong: string;
|
|
2677
|
-
default: string;
|
|
2678
|
-
subtle: string;
|
|
2679
|
-
disabled: string;
|
|
2680
|
-
negative: string;
|
|
2681
|
-
warning: string;
|
|
2682
|
-
positive: string;
|
|
2683
|
-
onBrandPrimary: string;
|
|
2684
|
-
onBrandSecondary: string;
|
|
2685
|
-
onBrandTertiary: string;
|
|
2686
|
-
};
|
|
2687
|
-
icon: {
|
|
2688
|
-
default: string;
|
|
2689
|
-
strong: string;
|
|
2690
|
-
subtle: string;
|
|
2691
|
-
disabled: string;
|
|
2692
|
-
negative: string;
|
|
2693
|
-
warning: string;
|
|
2694
|
-
positive: string;
|
|
2695
|
-
onBrandPrimary: string;
|
|
2696
|
-
onBrandSecondary: string;
|
|
2697
|
-
onBrandTertiary: string;
|
|
2698
|
-
};
|
|
2699
|
-
border: {
|
|
2700
|
-
default: string;
|
|
2701
|
-
defaultHover: string;
|
|
2702
|
-
defaultSelected: string;
|
|
2703
|
-
strong: string;
|
|
2704
|
-
subtle: string;
|
|
2705
|
-
negative: string;
|
|
2706
|
-
warning: string;
|
|
2707
|
-
positive: string;
|
|
2708
|
-
};
|
|
2709
|
-
};
|
|
2710
|
-
sizes: {
|
|
2711
|
-
112: string;
|
|
2712
|
-
128: string;
|
|
2713
|
-
144: string;
|
|
2714
|
-
160: string;
|
|
2715
|
-
176: string;
|
|
2716
|
-
192: string;
|
|
2717
|
-
224: string;
|
|
2718
|
-
256: string;
|
|
2719
|
-
288: string;
|
|
2720
|
-
320: string;
|
|
2721
|
-
384: string;
|
|
2722
|
-
448: string;
|
|
2723
|
-
512: string;
|
|
2724
|
-
576: string;
|
|
2725
|
-
672: string;
|
|
2726
|
-
768: string;
|
|
2727
|
-
896: string;
|
|
2728
|
-
1024: string;
|
|
2729
|
-
'0x': string;
|
|
2730
|
-
'1x': string;
|
|
2731
|
-
'2x': string;
|
|
2732
|
-
'3x': string;
|
|
2733
|
-
'4x': string;
|
|
2734
|
-
'5x': string;
|
|
2735
|
-
'6x': string;
|
|
2736
|
-
'8x': string;
|
|
2737
|
-
'12x': string;
|
|
2738
|
-
'16x': string;
|
|
2739
|
-
'20x': string;
|
|
2740
|
-
'24x': string;
|
|
2741
|
-
};
|
|
2742
|
-
radii: {
|
|
2743
|
-
none: string;
|
|
2744
|
-
'2xs': string;
|
|
2745
|
-
xs: string;
|
|
2746
|
-
sm: string;
|
|
2747
|
-
md: string;
|
|
2748
|
-
lg: string;
|
|
2749
|
-
xl: string;
|
|
2750
|
-
full: string;
|
|
2751
|
-
};
|
|
2752
|
-
shadows: {
|
|
2753
|
-
none: string;
|
|
2754
|
-
sm: string;
|
|
2755
|
-
md: string;
|
|
2756
|
-
lg: string;
|
|
2757
|
-
xl: string;
|
|
2758
|
-
};
|
|
2759
|
-
typography: {
|
|
2760
|
-
display: {
|
|
2761
|
-
'3xl': {
|
|
2762
|
-
fontFamily: string;
|
|
2763
|
-
fontWeight: string;
|
|
2764
|
-
fontSize: string;
|
|
2765
|
-
lineHeight: string;
|
|
2766
|
-
letterSpacing: string;
|
|
2767
|
-
fontFeatureSettings: string;
|
|
2768
|
-
};
|
|
2769
|
-
'2xl': {
|
|
2770
|
-
fontFamily: string;
|
|
2771
|
-
fontWeight: string;
|
|
2772
|
-
fontSize: string;
|
|
2773
|
-
lineHeight: string;
|
|
2774
|
-
letterSpacing: string;
|
|
2775
|
-
fontFeatureSettings: string;
|
|
2776
|
-
};
|
|
2777
|
-
xl: {
|
|
2778
|
-
fontFamily: string;
|
|
2779
|
-
fontWeight: string;
|
|
2780
|
-
fontSize: string;
|
|
2781
|
-
lineHeight: string;
|
|
2782
|
-
letterSpacing: string;
|
|
2783
|
-
fontFeatureSettings: string;
|
|
2784
|
-
};
|
|
2785
|
-
lg: {
|
|
2786
|
-
fontFamily: string;
|
|
2787
|
-
fontWeight: string;
|
|
2788
|
-
fontSize: string;
|
|
2789
|
-
lineHeight: string;
|
|
2790
|
-
letterSpacing: string;
|
|
2791
|
-
fontFeatureSettings: string;
|
|
2792
|
-
};
|
|
2793
|
-
md: {
|
|
2794
|
-
fontFamily: string;
|
|
2795
|
-
fontWeight: string;
|
|
2796
|
-
fontSize: string;
|
|
2797
|
-
lineHeight: string;
|
|
2798
|
-
letterSpacing: string;
|
|
2799
|
-
fontFeatureSettings: string;
|
|
2800
|
-
};
|
|
2801
|
-
sm: {
|
|
2802
|
-
fontFamily: string;
|
|
2803
|
-
fontWeight: string;
|
|
2804
|
-
fontSize: string;
|
|
2805
|
-
lineHeight: string;
|
|
2806
|
-
letterSpacing: string;
|
|
2807
|
-
fontFeatureSettings: string;
|
|
2808
|
-
};
|
|
2809
|
-
xs: {
|
|
2810
|
-
fontFamily: string;
|
|
2811
|
-
fontWeight: string;
|
|
2812
|
-
fontSize: string;
|
|
2813
|
-
lineHeight: string;
|
|
2814
|
-
letterSpacing: string;
|
|
2815
|
-
fontFeatureSettings: string;
|
|
2816
|
-
};
|
|
2817
|
-
};
|
|
2818
|
-
title: {
|
|
2819
|
-
lg: {
|
|
2820
|
-
fontFamily: string;
|
|
2821
|
-
fontWeight: string;
|
|
2822
|
-
fontSize: string;
|
|
2823
|
-
lineHeight: string;
|
|
2824
|
-
letterSpacing: string;
|
|
2825
|
-
};
|
|
2826
|
-
md: {
|
|
2827
|
-
fontFamily: string;
|
|
2828
|
-
fontWeight: string;
|
|
2829
|
-
fontSize: string;
|
|
2830
|
-
lineHeight: string;
|
|
2831
|
-
letterSpacing: string;
|
|
2832
|
-
};
|
|
2833
|
-
sm: {
|
|
2834
|
-
fontFamily: string;
|
|
2835
|
-
fontWeight: string;
|
|
2836
|
-
fontSize: string;
|
|
2837
|
-
lineHeight: string;
|
|
2838
|
-
letterSpacing: string;
|
|
2839
|
-
};
|
|
2840
|
-
xs: {
|
|
2841
|
-
fontFamily: string;
|
|
2842
|
-
fontWeight: string;
|
|
2843
|
-
fontSize: string;
|
|
2844
|
-
lineHeight: string;
|
|
2845
|
-
letterSpacing: string;
|
|
2846
|
-
};
|
|
2847
|
-
'2xs': {
|
|
2848
|
-
fontFamily: string;
|
|
2849
|
-
fontWeight: string;
|
|
2850
|
-
fontSize: string;
|
|
2851
|
-
lineHeight: string;
|
|
2852
|
-
letterSpacing: string;
|
|
2853
|
-
};
|
|
2854
|
-
'3xs': {
|
|
2855
|
-
fontFamily: string;
|
|
2856
|
-
fontWeight: string;
|
|
2857
|
-
fontSize: string;
|
|
2858
|
-
lineHeight: string;
|
|
2859
|
-
letterSpacing: string;
|
|
2860
|
-
};
|
|
2861
|
-
};
|
|
2862
|
-
body: {
|
|
2863
|
-
xl: {
|
|
2864
|
-
fontFamily: string;
|
|
2865
|
-
fontWeight: string;
|
|
2866
|
-
fontSize: string;
|
|
2867
|
-
lineHeight: string;
|
|
2868
|
-
letterSpacing: string;
|
|
2869
|
-
};
|
|
2870
|
-
lg: {
|
|
2871
|
-
fontFamily: string;
|
|
2872
|
-
fontWeight: string;
|
|
2873
|
-
fontSize: string;
|
|
2874
|
-
lineHeight: string;
|
|
2875
|
-
letterSpacing: string;
|
|
2876
|
-
};
|
|
2877
|
-
md: {
|
|
2878
|
-
fontFamily: string;
|
|
2879
|
-
fontWeight: string;
|
|
2880
|
-
fontSize: string;
|
|
2881
|
-
lineHeight: string;
|
|
2882
|
-
letterSpacing: string;
|
|
2883
|
-
};
|
|
2884
|
-
sm: {
|
|
2885
|
-
fontFamily: string;
|
|
2886
|
-
fontWeight: string;
|
|
2887
|
-
fontSize: string;
|
|
2888
|
-
lineHeight: string;
|
|
2889
|
-
letterSpacing: string;
|
|
2890
|
-
};
|
|
2891
|
-
xs: {
|
|
2892
|
-
fontFamily: string;
|
|
2893
|
-
fontWeight: string;
|
|
2894
|
-
fontSize: string;
|
|
2895
|
-
lineHeight: string;
|
|
2896
|
-
letterSpacing: string;
|
|
2897
|
-
};
|
|
2898
|
-
};
|
|
2899
|
-
label: {
|
|
2900
|
-
md: {
|
|
2901
|
-
fontFamily: string;
|
|
2902
|
-
fontWeight: string;
|
|
2903
|
-
fontSize: string;
|
|
2904
|
-
lineHeight: string;
|
|
2905
|
-
letterSpacing: string;
|
|
2906
|
-
};
|
|
2907
|
-
sm: {
|
|
2908
|
-
fontFamily: string;
|
|
2909
|
-
fontWeight: string;
|
|
2910
|
-
fontSize: string;
|
|
2911
|
-
lineHeight: string;
|
|
2912
|
-
letterSpacing: string;
|
|
2913
|
-
};
|
|
2914
|
-
};
|
|
2915
|
-
button: {
|
|
2916
|
-
md: {
|
|
2917
|
-
fontFamily: string;
|
|
2918
|
-
fontWeight: string;
|
|
2919
|
-
fontSize: string;
|
|
2920
|
-
lineHeight: string;
|
|
2921
|
-
letterSpacing: string;
|
|
2922
|
-
};
|
|
2923
|
-
sm: {
|
|
2924
|
-
fontFamily: string;
|
|
2925
|
-
fontWeight: string;
|
|
2926
|
-
fontSize: string;
|
|
2927
|
-
lineHeight: string;
|
|
2928
|
-
letterSpacing: string;
|
|
2929
|
-
};
|
|
2930
|
-
};
|
|
2931
|
-
caption: {
|
|
2932
|
-
md: {
|
|
2933
|
-
fontFamily: string;
|
|
2934
|
-
fontWeight: string;
|
|
2935
|
-
fontSize: string;
|
|
2936
|
-
lineHeight: string;
|
|
2937
|
-
letterSpacing: string;
|
|
2938
|
-
};
|
|
2939
|
-
sm: {
|
|
2940
|
-
fontFamily: string;
|
|
2941
|
-
fontWeight: string;
|
|
2942
|
-
fontSize: string;
|
|
2943
|
-
lineHeight: string;
|
|
2944
|
-
letterSpacing: string;
|
|
2945
|
-
};
|
|
2946
|
-
};
|
|
2947
|
-
};
|
|
2948
|
-
}) => {
|
|
2949
|
-
lg: {
|
|
2950
|
-
fontFamily: string;
|
|
2951
|
-
fontWeight: string;
|
|
2952
|
-
fontSize: string;
|
|
2953
|
-
lineHeight: string;
|
|
2954
|
-
letterSpacing: string;
|
|
2955
|
-
};
|
|
2956
|
-
md: {
|
|
2957
|
-
fontFamily: string;
|
|
2958
|
-
fontWeight: string;
|
|
2959
|
-
fontSize: string;
|
|
2960
|
-
lineHeight: string;
|
|
2961
|
-
letterSpacing: string;
|
|
2962
|
-
};
|
|
2963
|
-
sm: {
|
|
2964
|
-
fontFamily: string;
|
|
2965
|
-
fontWeight: string;
|
|
2966
|
-
fontSize: string;
|
|
2967
|
-
lineHeight: string;
|
|
2968
|
-
letterSpacing: string;
|
|
2969
|
-
};
|
|
2970
|
-
xs: {
|
|
2971
|
-
fontFamily: string;
|
|
2972
|
-
fontWeight: string;
|
|
2973
|
-
fontSize: string;
|
|
2974
|
-
lineHeight: string;
|
|
2975
|
-
letterSpacing: string;
|
|
2976
|
-
};
|
|
2977
|
-
'2xs': {
|
|
2978
|
-
fontFamily: string;
|
|
2979
|
-
fontWeight: string;
|
|
2980
|
-
fontSize: string;
|
|
2981
|
-
lineHeight: string;
|
|
2982
|
-
letterSpacing: string;
|
|
2983
|
-
};
|
|
2984
|
-
'3xs': {
|
|
2985
|
-
fontFamily: string;
|
|
2986
|
-
fontWeight: string;
|
|
2987
|
-
fontSize: string;
|
|
2988
|
-
lineHeight: string;
|
|
2989
|
-
letterSpacing: string;
|
|
2990
|
-
};
|
|
2991
|
-
};
|
|
2992
|
-
declare type HeadingSize = VariantProps<typeof getSizeStyles$4>;
|
|
2550
|
+
declare type HeadingSize = keyof Theme['typography']['title'];
|
|
2993
2551
|
declare type HeadingColor = keyof Theme['colors']['text'];
|
|
2994
2552
|
interface HeadingOptions {
|
|
2995
2553
|
/**
|
|
2996
2554
|
* Sets the visual size of the heading.
|
|
2997
|
-
* Also sets the HTML tag used for the heading.
|
|
2998
2555
|
* To override the rendered tag, use the `as` prop.
|
|
2999
2556
|
*
|
|
3000
2557
|
* @default 'md'
|