@vygruppen/spor-react 9.16.0 → 10.1.0

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/index.d.ts CHANGED
@@ -223,7 +223,6 @@ type AccordionProps = Omit<AccordionProps$1, "variant" | "size"> & {
223
223
  * - `floating` renders a version with a drop shadow
224
224
  */
225
225
  variant?: "ghost" | "base" | "floating";
226
- size?: "sm" | "md" | "lg";
227
226
  /** The margin between accordion items */
228
227
  spacing?: StackProps["spacing"];
229
228
  };
@@ -240,10 +239,7 @@ type ExpandableProps = Omit<AccordionProps, "title" | "index" | "defaultIndex" |
240
239
  /**
241
240
  * Icon shown to the left of the title
242
241
  *
243
- * Make sure it's the outlined version of the icon.
244
- *
245
- * If the size is set to `sm` or `md` the icon should be 24px.
246
- * If the size is set to `lg`, the icon should be 30px.
242
+ * Make sure it's the 24px outlined version of the icon
247
243
  */
248
244
  leftIcon?: React.ReactNode;
249
245
  /** Controlled value of whether the accordion is open or not */
@@ -260,12 +256,12 @@ type ExpandableProps = Omit<AccordionProps, "title" | "index" | "defaultIndex" |
260
256
  * If you want several expandables in a row, use the `Accordion` and `ExpandableItem` components instead.
261
257
  *
262
258
  * ```tsx
263
- * <Expandable title="Click for more" variant="base" size="lg">
259
+ * <Expandable title="Click for more" variant="base">
264
260
  * <Text>MORE! 🎉</Text>
265
261
  * </Expandable>
266
262
  * ```
267
263
  */
268
- declare const Expandable: ({ children, headingLevel, title, leftIcon, size, defaultOpen, isOpen, onChange, ...rest }: ExpandableProps) => React.JSX.Element;
264
+ declare const Expandable: ({ children, headingLevel, title, leftIcon, defaultOpen, isOpen, onChange, ...rest }: ExpandableProps) => React.JSX.Element;
269
265
  type ExpandableItemProps = Omit<AccordionItemProps, "title"> & {
270
266
  /** The hidden content */
271
267
  children: React.ReactNode;
@@ -276,7 +272,7 @@ type ExpandableItemProps = Omit<AccordionItemProps, "title"> & {
276
272
  /**
277
273
  * Icon shown to the left of the title
278
274
  *
279
- * Make sure it's the 30px outlined version of the icon
275
+ * Make sure it's the 24px outlined version of the icon
280
276
  */
281
277
  leftIcon?: React.ReactNode;
282
278
  };
@@ -284,7 +280,7 @@ type ExpandableItemProps = Omit<AccordionItemProps, "title"> & {
284
280
  * An item in a set of Expandables. Must be wrapped in an `<Accordion>` component.
285
281
  *
286
282
  * ```tsx
287
- * <Accordion variant="ghost" size="md">
283
+ * <Accordion variant="ghost">
288
284
  * <ExpandableItem title="Is Spor easy?" headingLevel="h3">
289
285
  * Yes
290
286
  * </ExpandableItem>
@@ -557,46 +553,6 @@ type FloatingActionButtonProps = BoxProps & {
557
553
  */
558
554
  declare const FloatingActionButton: ComponentWithAs<ComponentWithAs<"a" | "button", {}>, FloatingActionButtonProps>;
559
555
 
560
- type CardProps = Exclude<BoxProps, "size"> & {
561
- size?: "sm" | "lg";
562
- children: React.ReactNode;
563
- colorScheme: "white" | "grey" | "blue" | "green" | "teal" | "yellow" | "orange" | "red";
564
- };
565
- /**
566
- * Renders a card.
567
- *
568
- * The most basic version looks like this:
569
- *
570
- * ```tsx
571
- * <Card>
572
- * Content
573
- * </Card>
574
- * ```
575
- *
576
- * There are lots of color schemes available. You can also set the size as either `sm` or `lg`. The default is `sm`.
577
- *
578
- * ```tsx
579
- * <Card colorScheme="orange" size="lg">
580
- * A smaller card
581
- * </Card>
582
- * ```
583
- *
584
- * Cards are not interactive by default. If you specify the `as` prop to be a link or a button, you can make them work as links or buttons respectively. This will also give it a drop shadow.
585
- *
586
- * ```tsx
587
- * <Card colorScheme="blue" as="button" onClick={handleClick}>
588
- * Click for profit
589
- * </Card>
590
- * <Card colorScheme="green" as="a" href="https://vy.no">
591
- * Go to start
592
- * </Card>
593
- * ```
594
- */
595
- /**
596
- * @deprecated Card is deprecated. Use `StaticCard` or `PressableCard` instead.
597
- */
598
- declare const Card: _chakra_ui_system_dist_system_types.ComponentWithAs<As, CardProps>;
599
-
600
556
  /**
601
557
  * A date picker component.
602
558
  *
@@ -1477,43 +1433,28 @@ type TextareaProps = Exclude<TextareaProps$1, "variant" | "size"> & {
1477
1433
  */
1478
1434
  declare const Textarea: _chakra_ui_system_dist_system_types.ComponentWithAs<"textarea", TextareaProps>;
1479
1435
 
1480
- type Variant =
1481
- | "local-train"
1482
- | "region-train"
1483
- | "region-express-train"
1484
- | "long-distance-train"
1485
- | "airport-express-train"
1486
- | "vy-bus"
1487
- | "local-bus"
1488
- | "ferry"
1489
- | "subway"
1490
- | "tram"
1491
- | "alt-transport"
1492
- | "walk";
1493
-
1436
+ type Variant = "local-train" | "region-train" | "region-express-train" | "long-distance-train" | "airport-express-train" | "vy-bus" | "local-bus" | "ferry" | "subway" | "tram" | "alt-transport" | "walk";
1494
1437
  type Size = "sm" | "md" | "lg";
1495
-
1496
1438
  type TagProps = VariantProps$1 & {
1497
- size: Size;
1498
- title: string;
1499
- description?: string;
1439
+ size: Size;
1440
+ title: string;
1441
+ description?: string;
1500
1442
  };
1501
-
1502
1443
  type DefaultVariantProps$1 = {
1503
- variant: Variant;
1444
+ variant: Variant;
1504
1445
  };
1505
- type CustomVariantProps$1 = {
1506
- variant: "custom";
1507
- /** When variant="custom", the foreground color of the tag */
1508
- foregroundColor: string;
1509
- /** When variant="custom", the background color of the tag */
1510
- backgroundColor: string;
1511
- /** When variant="custom", this is the icon you want to display.
1512
- * It should be one of the other variants
1513
- */
1514
- customIconVariant: Variant;
1446
+ type CustomVariantProps = {
1447
+ variant: "custom";
1448
+ /** When variant="custom", the foreground color of the tag */
1449
+ foregroundColor: string;
1450
+ /** When variant="custom", the background color of the tag */
1451
+ backgroundColor: string;
1452
+ /** When variant="custom", this is the icon you want to display.
1453
+ * It should be one of the other variants
1454
+ */
1455
+ customIconVariant: Variant;
1515
1456
  };
1516
- type VariantProps$1 = DefaultVariantProps$1 | CustomVariantProps$1;
1457
+ type VariantProps$1 = DefaultVariantProps$1 | CustomVariantProps;
1517
1458
 
1518
1459
  type InfoTagProps = TagProps;
1519
1460
  /**
@@ -1554,12 +1495,6 @@ type DefaultVariants = Exclude<TagProps["variant"], "custom">;
1554
1495
  type DefaultVariantProps = {
1555
1496
  variant: DefaultVariants;
1556
1497
  };
1557
- type CustomVariantProps = {
1558
- variant: "custom";
1559
- customIconVariant: DefaultVariants;
1560
- foregroundColor: string;
1561
- backgroundColor: string;
1562
- };
1563
1498
  type VariantProps = DefaultVariantProps | CustomVariantProps;
1564
1499
  type LineIconProps = Exclude<BoxProps, "variant"> & VariantProps & {
1565
1500
  size: TagProps["size"];
@@ -1598,6 +1533,9 @@ declare const LineIcon: ({ variant, size, sx, ...rest }: LineIconProps) => React
1598
1533
  type TravelTagProps = TagProps & BoxProps & {
1599
1534
  deviationLevel?: "critical" | "major" | "minor" | "info" | "none";
1600
1535
  isDisabled?: boolean;
1536
+ foregroundColor?: string;
1537
+ backgroundColor?: string;
1538
+ customIconVariant?: string;
1601
1539
  };
1602
1540
  /**
1603
1541
  * A travel tag component.
@@ -2379,9 +2317,13 @@ declare const theme: {
2379
2317
  outlineOffset: string;
2380
2318
  };
2381
2319
  textAlign: string;
2320
+ fontSize: ("mobile.sm" | "desktop.sm" | null)[];
2382
2321
  fontFamily: string;
2383
2322
  fontWeight: string;
2384
2323
  outlineOffset: string;
2324
+ paddingX: (number | null)[];
2325
+ paddingY: (number | null)[];
2326
+ minHeight: (number | null)[];
2385
2327
  color: string;
2386
2328
  transitionProperty: string;
2387
2329
  transitionDuration: string;
@@ -2391,49 +2333,18 @@ declare const theme: {
2391
2333
  };
2392
2334
  panel: {
2393
2335
  paddingY: number;
2336
+ paddingX: (number | null)[];
2394
2337
  borderBottomRadius: string;
2338
+ fontSize: ("mobile.sm" | "desktop.sm" | null)[];
2395
2339
  };
2396
2340
  icon: {
2397
2341
  fontSize: string;
2398
2342
  };
2399
2343
  }) | undefined;
2400
2344
  sizes?: {
2401
- sm: {
2402
- button: {
2403
- fontSize: ("mobile.xs" | "desktop.xs" | null)[];
2404
- paddingX: number;
2405
- paddingY: number;
2406
- minHeight: number;
2407
- };
2408
- panel: {
2409
- fontSize: ("mobile.xs" | "desktop.xs" | null)[];
2410
- paddingX: number;
2411
- };
2412
- };
2413
- md: {
2414
- button: {
2415
- fontSize: ("mobile.sm" | "desktop.sm" | null)[];
2416
- paddingX: number;
2417
- paddingY: number;
2418
- minHeight: number;
2419
- };
2420
- panel: {
2421
- fontSize: ("mobile.sm" | "desktop.sm" | null)[];
2422
- paddingX: number;
2423
- };
2424
- };
2425
- lg: {
2426
- button: {
2427
- fontSize: ("mobile.sm" | "desktop.sm" | null)[];
2428
- paddingX: number;
2429
- paddingY: number;
2430
- minHeight: number;
2431
- };
2432
- panel: {
2433
- fontSize: ("mobile.sm" | "desktop.sm" | null)[];
2434
- paddingX: number;
2435
- };
2436
- };
2345
+ [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
2346
+ keys: ("button" | "container" | "icon" | "root" | "panel")[];
2347
+ }>;
2437
2348
  } | undefined;
2438
2349
  variants?: {
2439
2350
  ghost: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
@@ -2509,7 +2420,7 @@ declare const theme: {
2509
2420
  };
2510
2421
  } | undefined;
2511
2422
  defaultProps?: {
2512
- size?: "sm" | "md" | "lg" | undefined;
2423
+ size?: string | number | undefined;
2513
2424
  variant?: "base" | "ghost" | "floating" | undefined;
2514
2425
  colorScheme?: string | undefined;
2515
2426
  } | undefined;
@@ -2809,588 +2720,115 @@ declare const theme: {
2809
2720
  paddingY: number;
2810
2721
  fontSize: string;
2811
2722
  fontWeight: string;
2812
- };
2813
- } | undefined;
2814
- variants?: {
2815
- primary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
2816
- _hover: {
2817
- backgroundColor: string;
2818
- };
2819
- _active: {
2820
- backgroundColor: string;
2821
- };
2822
- color: string;
2823
- backgroundColor: string;
2824
- };
2825
- secondary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
2826
- _hover: {
2827
- backgroundColor: string;
2828
- };
2829
- _active: {
2830
- backgroundColor: string;
2831
- };
2832
- color: string;
2833
- backgroundColor: string;
2834
- };
2835
- tertiary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
2836
- _hover: {
2837
- outlineWidth: string;
2838
- outlineColor: string;
2839
- outlineStyle: string;
2840
- outlineOffset: string;
2841
- } | {
2842
- outline: string;
2843
- outlineColor: string;
2844
- };
2845
- _active: {
2846
- backgroundColor: string;
2847
- outlineWidth: string;
2848
- outlineColor: string;
2849
- outlineStyle: string;
2850
- outlineOffset: string;
2851
- } | {
2852
- backgroundColor: string;
2853
- outline: string;
2854
- outlineColor: string;
2855
- };
2856
- outlineWidth: string;
2857
- outlineColor: string;
2858
- outlineStyle: string;
2859
- outlineOffset: string;
2860
- color: string;
2861
- backgroundColor: string;
2862
- } | {
2863
- _hover: {
2864
- outlineWidth: string;
2865
- outlineColor: string;
2866
- outlineStyle: string;
2867
- outlineOffset: string;
2868
- } | {
2869
- outline: string;
2870
- outlineColor: string;
2871
- };
2872
- _active: {
2873
- backgroundColor: string;
2874
- outlineWidth: string;
2875
- outlineColor: string;
2876
- outlineStyle: string;
2877
- outlineOffset: string;
2878
- } | {
2879
- backgroundColor: string;
2880
- outline: string;
2881
- outlineColor: string;
2882
- };
2883
- outline: string;
2884
- outlineColor: string;
2885
- color: string;
2886
- backgroundColor: string;
2887
- };
2888
- ghost: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
2889
- _hover: {
2890
- _disabled: {
2891
- color: string;
2892
- };
2893
- backgroundColor: string;
2894
- };
2895
- _active: {
2896
- backgroundColor: string;
2897
- };
2898
- color: string;
2899
- backgroundColor: string;
2900
- };
2901
- floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
2902
- boxShadow: string;
2903
- _hover: {
2904
- boxShadow: string;
2905
- outline: string;
2906
- outlineColor: string;
2907
- backgroundColor: string;
2908
- };
2909
- _active: {
2910
- boxShadow: string;
2911
- backgroundColor: string;
2912
- };
2913
- outline: string;
2914
- outlineColor: string;
2915
- backgroundColor: string;
2916
- };
2917
- } | undefined;
2918
- defaultProps?: {
2919
- size?: "sm" | "md" | "lg" | "xs" | undefined;
2920
- variant?: "ghost" | "floating" | "primary" | "secondary" | "tertiary" | undefined;
2921
- colorScheme?: string | undefined;
2922
- } | undefined;
2923
- };
2924
- Card: {
2925
- baseStyle?: ((props: any) => {
2926
- "button&, a&, label&, &.is-clickable": {
2927
- _hover: {
2928
- outline: string;
2929
- outlineColor: string;
2930
- backgroundColor: string;
2931
- } | {
2932
- outlineColor: string;
2933
- backgroundColor?: undefined;
2934
- } | {
2935
- backgroundColor: string;
2936
- outlineColor: string;
2937
- };
2938
- _active: {
2939
- outline: string;
2940
- outlineColor: string;
2941
- backgroundColor: string;
2942
- } | {
2943
- backgroundColor: string;
2944
- outlineColor: string;
2945
- };
2946
- _disabled: {
2947
- pointerEvents: string;
2948
- color: string;
2949
- outlineWidth: string;
2950
- outlineColor: string;
2951
- outlineStyle: string;
2952
- outlineOffset: string;
2953
- backgroundColor: string;
2954
- } | {
2955
- pointerEvents: string;
2956
- color: string;
2957
- outline: string;
2958
- outlineColor: string;
2959
- backgroundColor: string;
2960
- };
2961
- _focusVisible: {
2962
- outlineWidth: string;
2963
- outlineColor: string;
2964
- outlineStyle: string;
2965
- outlineOffset: string;
2966
- };
2967
- outline: string;
2968
- outlineColor: string;
2969
- backgroundColor?: undefined;
2970
- } | {
2971
- _hover: {
2972
- outline: string;
2973
- outlineColor: string;
2974
- backgroundColor: string;
2975
- } | {
2976
- outlineColor: string;
2977
- backgroundColor?: undefined;
2978
- } | {
2979
- backgroundColor: string;
2980
- outlineColor: string;
2981
- };
2982
- _active: {
2983
- outline: string;
2984
- outlineColor: string;
2985
- backgroundColor: string;
2986
- } | {
2987
- backgroundColor: string;
2988
- outlineColor: string;
2989
- };
2990
- _disabled: {
2991
- pointerEvents: string;
2992
- color: string;
2993
- outlineWidth: string;
2994
- outlineColor: string;
2995
- outlineStyle: string;
2996
- outlineOffset: string;
2997
- backgroundColor: string;
2998
- } | {
2999
- pointerEvents: string;
3000
- color: string;
3001
- outline: string;
3002
- outlineColor: string;
3003
- backgroundColor: string;
3004
- };
3005
- _focusVisible: {
3006
- outlineWidth: string;
3007
- outlineColor: string;
3008
- outlineStyle: string;
3009
- outlineOffset: string;
3010
- };
3011
- outlineColor: string;
3012
- backgroundColor?: undefined;
3013
- outline: string;
3014
- } | {
3015
- _hover: {
3016
- outline: string;
3017
- outlineColor: string;
3018
- backgroundColor: string;
3019
- } | {
3020
- outlineColor: string;
3021
- backgroundColor?: undefined;
3022
- } | {
3023
- backgroundColor: string;
3024
- outlineColor: string;
3025
- };
3026
- _active: {
3027
- outline: string;
3028
- outlineColor: string;
3029
- backgroundColor: string;
3030
- } | {
3031
- backgroundColor: string;
3032
- outlineColor: string;
3033
- };
3034
- _disabled: {
3035
- pointerEvents: string;
3036
- color: string;
3037
- outlineWidth: string;
3038
- outlineColor: string;
3039
- outlineStyle: string;
3040
- outlineOffset: string;
3041
- backgroundColor: string;
3042
- } | {
3043
- pointerEvents: string;
3044
- color: string;
3045
- outline: string;
3046
- outlineColor: string;
3047
- backgroundColor: string;
3048
- };
3049
- _focusVisible: {
3050
- outlineWidth: string;
3051
- outlineColor: string;
3052
- outlineStyle: string;
3053
- outlineOffset: string;
3054
- };
3055
- backgroundColor: string;
3056
- outlineColor: string;
3057
- outline: string;
3058
- };
3059
- backgroundColor: string;
3060
- color: string;
3061
- outlineWidth: string;
3062
- outlineColor: string;
3063
- outlineStyle: string;
3064
- outlineOffset: string;
3065
- appearance: string;
3066
- border: string;
3067
- overflow: string;
3068
- fontSize: string;
3069
- display: string;
3070
- transitionProperty: string;
3071
- transitionDuration: string;
3072
- borderRadius: string;
3073
- } | {
3074
- "button&, a&, label&, &.is-clickable": {
3075
- _hover: {
3076
- outline: string;
3077
- outlineColor: string;
3078
- backgroundColor: string;
3079
- } | {
3080
- outlineColor: string;
3081
- backgroundColor?: undefined;
3082
- } | {
3083
- backgroundColor: string;
3084
- outlineColor: string;
3085
- };
3086
- _active: {
3087
- outline: string;
3088
- outlineColor: string;
3089
- backgroundColor: string;
3090
- } | {
3091
- backgroundColor: string;
3092
- outlineColor: string;
3093
- };
3094
- _disabled: {
3095
- pointerEvents: string;
3096
- color: string;
3097
- outlineWidth: string;
3098
- outlineColor: string;
3099
- outlineStyle: string;
3100
- outlineOffset: string;
3101
- backgroundColor: string;
3102
- } | {
3103
- pointerEvents: string;
3104
- color: string;
3105
- outline: string;
3106
- outlineColor: string;
3107
- backgroundColor: string;
3108
- };
3109
- _focusVisible: {
3110
- outlineWidth: string;
3111
- outlineColor: string;
3112
- outlineStyle: string;
3113
- outlineOffset: string;
3114
- };
3115
- outline: string;
3116
- outlineColor: string;
3117
- backgroundColor?: undefined;
3118
- } | {
3119
- _hover: {
3120
- outline: string;
3121
- outlineColor: string;
3122
- backgroundColor: string;
3123
- } | {
3124
- outlineColor: string;
3125
- backgroundColor?: undefined;
3126
- } | {
3127
- backgroundColor: string;
3128
- outlineColor: string;
3129
- };
3130
- _active: {
3131
- outline: string;
3132
- outlineColor: string;
3133
- backgroundColor: string;
3134
- } | {
3135
- backgroundColor: string;
3136
- outlineColor: string;
3137
- };
3138
- _disabled: {
3139
- pointerEvents: string;
3140
- color: string;
3141
- outlineWidth: string;
3142
- outlineColor: string;
3143
- outlineStyle: string;
3144
- outlineOffset: string;
3145
- backgroundColor: string;
3146
- } | {
3147
- pointerEvents: string;
3148
- color: string;
3149
- outline: string;
3150
- outlineColor: string;
3151
- backgroundColor: string;
3152
- };
3153
- _focusVisible: {
3154
- outlineWidth: string;
3155
- outlineColor: string;
3156
- outlineStyle: string;
3157
- outlineOffset: string;
3158
- };
3159
- outlineColor: string;
3160
- backgroundColor?: undefined;
3161
- outline: string;
3162
- } | {
3163
- _hover: {
3164
- outline: string;
3165
- outlineColor: string;
3166
- backgroundColor: string;
3167
- } | {
3168
- outlineColor: string;
3169
- backgroundColor?: undefined;
3170
- } | {
3171
- backgroundColor: string;
3172
- outlineColor: string;
3173
- };
3174
- _active: {
3175
- outline: string;
3176
- outlineColor: string;
3177
- backgroundColor: string;
3178
- } | {
3179
- backgroundColor: string;
3180
- outlineColor: string;
3181
- };
3182
- _disabled: {
3183
- pointerEvents: string;
3184
- color: string;
3185
- outlineWidth: string;
3186
- outlineColor: string;
3187
- outlineStyle: string;
3188
- outlineOffset: string;
3189
- backgroundColor: string;
3190
- } | {
3191
- pointerEvents: string;
3192
- color: string;
3193
- outline: string;
3194
- outlineColor: string;
3195
- backgroundColor: string;
3196
- };
3197
- _focusVisible: {
3198
- outlineWidth: string;
3199
- outlineColor: string;
3200
- outlineStyle: string;
3201
- outlineOffset: string;
3202
- };
3203
- backgroundColor: string;
3204
- outlineColor: string;
3205
- outline: string;
3206
- };
3207
- backgroundColor: string;
3208
- color: string;
3209
- outline: string;
3210
- outlineColor: string;
3211
- appearance: string;
3212
- border: string;
3213
- overflow: string;
3214
- fontSize: string;
3215
- display: string;
3216
- transitionProperty: string;
3217
- transitionDuration: string;
3218
- borderRadius: string;
3219
- } | {
3220
- "button&, a&, label&, &.is-clickable": {
3221
- _hover: {
3222
- outline: string;
3223
- outlineColor: string;
3224
- backgroundColor: string;
3225
- } | {
3226
- outlineColor: string;
3227
- backgroundColor?: undefined;
3228
- } | {
3229
- backgroundColor: string;
3230
- outlineColor: string;
3231
- };
3232
- _active: {
3233
- outline: string;
3234
- outlineColor: string;
3235
- backgroundColor: string;
3236
- } | {
3237
- backgroundColor: string;
3238
- outlineColor: string;
3239
- };
3240
- _disabled: {
3241
- pointerEvents: string;
3242
- color: string;
3243
- outlineWidth: string;
3244
- outlineColor: string;
3245
- outlineStyle: string;
3246
- outlineOffset: string;
3247
- backgroundColor: string;
3248
- } | {
3249
- pointerEvents: string;
3250
- color: string;
3251
- outline: string;
3252
- outlineColor: string;
2723
+ };
2724
+ } | undefined;
2725
+ variants?: {
2726
+ primary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
2727
+ _hover: {
3253
2728
  backgroundColor: string;
3254
2729
  };
3255
- _focusVisible: {
3256
- outlineWidth: string;
3257
- outlineColor: string;
3258
- outlineStyle: string;
3259
- outlineOffset: string;
2730
+ _active: {
2731
+ backgroundColor: string;
3260
2732
  };
3261
- outline: string;
3262
- outlineColor: string;
3263
- backgroundColor?: undefined;
3264
- } | {
2733
+ color: string;
2734
+ backgroundColor: string;
2735
+ };
2736
+ secondary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
3265
2737
  _hover: {
3266
- outline: string;
3267
- outlineColor: string;
3268
- backgroundColor: string;
3269
- } | {
3270
- outlineColor: string;
3271
- backgroundColor?: undefined;
3272
- } | {
3273
2738
  backgroundColor: string;
3274
- outlineColor: string;
3275
2739
  };
3276
2740
  _active: {
3277
- outline: string;
3278
- outlineColor: string;
3279
2741
  backgroundColor: string;
3280
- } | {
3281
- backgroundColor: string;
3282
- outlineColor: string;
3283
2742
  };
3284
- _disabled: {
3285
- pointerEvents: string;
3286
- color: string;
2743
+ color: string;
2744
+ backgroundColor: string;
2745
+ };
2746
+ tertiary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
2747
+ _hover: {
3287
2748
  outlineWidth: string;
3288
2749
  outlineColor: string;
3289
2750
  outlineStyle: string;
3290
2751
  outlineOffset: string;
3291
- backgroundColor: string;
3292
2752
  } | {
3293
- pointerEvents: string;
3294
- color: string;
3295
2753
  outline: string;
3296
2754
  outlineColor: string;
3297
- backgroundColor: string;
3298
2755
  };
3299
- _focusVisible: {
2756
+ _active: {
2757
+ backgroundColor: string;
3300
2758
  outlineWidth: string;
3301
2759
  outlineColor: string;
3302
2760
  outlineStyle: string;
3303
2761
  outlineOffset: string;
2762
+ } | {
2763
+ backgroundColor: string;
2764
+ outline: string;
2765
+ outlineColor: string;
3304
2766
  };
2767
+ outlineWidth: string;
3305
2768
  outlineColor: string;
3306
- backgroundColor?: undefined;
3307
- outline: string;
2769
+ outlineStyle: string;
2770
+ outlineOffset: string;
2771
+ color: string;
2772
+ backgroundColor: string;
3308
2773
  } | {
3309
2774
  _hover: {
3310
- outline: string;
3311
- outlineColor: string;
3312
- backgroundColor: string;
3313
- } | {
2775
+ outlineWidth: string;
3314
2776
  outlineColor: string;
3315
- backgroundColor?: undefined;
2777
+ outlineStyle: string;
2778
+ outlineOffset: string;
3316
2779
  } | {
3317
- backgroundColor: string;
2780
+ outline: string;
3318
2781
  outlineColor: string;
3319
2782
  };
3320
2783
  _active: {
3321
- outline: string;
3322
- outlineColor: string;
3323
- backgroundColor: string;
3324
- } | {
3325
2784
  backgroundColor: string;
3326
- outlineColor: string;
3327
- };
3328
- _disabled: {
3329
- pointerEvents: string;
3330
- color: string;
3331
2785
  outlineWidth: string;
3332
2786
  outlineColor: string;
3333
2787
  outlineStyle: string;
3334
2788
  outlineOffset: string;
3335
- backgroundColor: string;
3336
2789
  } | {
3337
- pointerEvents: string;
3338
- color: string;
2790
+ backgroundColor: string;
3339
2791
  outline: string;
3340
2792
  outlineColor: string;
2793
+ };
2794
+ outline: string;
2795
+ outlineColor: string;
2796
+ color: string;
2797
+ backgroundColor: string;
2798
+ };
2799
+ ghost: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
2800
+ _hover: {
2801
+ _disabled: {
2802
+ color: string;
2803
+ };
3341
2804
  backgroundColor: string;
3342
2805
  };
3343
- _focusVisible: {
3344
- outlineWidth: string;
3345
- outlineColor: string;
3346
- outlineStyle: string;
3347
- outlineOffset: string;
2806
+ _active: {
2807
+ backgroundColor: string;
3348
2808
  };
2809
+ color: string;
3349
2810
  backgroundColor: string;
3350
- outlineColor: string;
3351
- outline: string;
3352
2811
  };
3353
- backgroundColor: string;
3354
- appearance: string;
3355
- border: string;
3356
- overflow: string;
3357
- fontSize: string;
3358
- display: string;
3359
- transitionProperty: string;
3360
- transitionDuration: string;
3361
- borderRadius: string;
3362
- color: string;
3363
- }) | undefined;
3364
- sizes?: {
3365
- sm: {
3366
- "button&, a&, label&, &.is-clickable": {
2812
+ floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
2813
+ boxShadow: string;
2814
+ _hover: {
3367
2815
  boxShadow: string;
3368
- _hover: {
3369
- boxShadow: string;
3370
- };
3371
- _active: {
3372
- boxShadow: string;
3373
- };
2816
+ outline: string;
2817
+ outlineColor: string;
2818
+ backgroundColor: string;
3374
2819
  };
3375
- };
3376
- lg: {
3377
- "button&, a&, label&, &.is-clickable": {
2820
+ _active: {
3378
2821
  boxShadow: string;
3379
- _hover: {
3380
- boxShadow: string;
3381
- };
3382
- _active: {
3383
- boxShadow: string;
3384
- };
2822
+ backgroundColor: string;
3385
2823
  };
2824
+ outline: string;
2825
+ outlineColor: string;
2826
+ backgroundColor: string;
3386
2827
  };
3387
2828
  } | undefined;
3388
- variants?: {
3389
- [key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;
3390
- } | undefined;
3391
2829
  defaultProps?: {
3392
- size?: "sm" | "lg" | undefined;
3393
- variant?: string | number | undefined;
2830
+ size?: "sm" | "md" | "lg" | "xs" | undefined;
2831
+ variant?: "ghost" | "floating" | "primary" | "secondary" | "tertiary" | undefined;
3394
2832
  colorScheme?: string | undefined;
3395
2833
  } | undefined;
3396
2834
  };
@@ -3927,6 +3365,17 @@ declare const theme: {
3927
3365
  zIndex: number;
3928
3366
  };
3929
3367
  _disabled: {
3368
+ color: string;
3369
+ outlineWidth: string;
3370
+ outlineColor: string;
3371
+ outlineStyle: string;
3372
+ outlineOffset: string;
3373
+ backgroundColor: string;
3374
+ pointerEvents: string;
3375
+ } | {
3376
+ color: string;
3377
+ outline: string;
3378
+ outlineColor: string;
3930
3379
  backgroundColor: string;
3931
3380
  pointerEvents: string;
3932
3381
  };
@@ -3939,12 +3388,10 @@ declare const theme: {
3939
3388
  };
3940
3389
  inputLabel: {
3941
3390
  fontSize: string;
3942
- color: string;
3943
3391
  margin: number;
3944
3392
  cursor: string;
3945
3393
  };
3946
3394
  dateTimeSegment: {
3947
- color: string;
3948
3395
  _focus: {
3949
3396
  color: string;
3950
3397
  backgroundColor: string;
@@ -3976,13 +3423,9 @@ declare const theme: {
3976
3423
  display: string;
3977
3424
  alignItems: string;
3978
3425
  justifyContent: string;
3979
- borderLeftRadius: string;
3980
3426
  transitionProperty: string;
3981
3427
  transitionSpeed: string;
3982
3428
  position: string;
3983
- paddingTop: number;
3984
- paddingBottom: number;
3985
- borderRadius: string;
3986
3429
  right: string;
3987
3430
  };
3988
3431
  arrow: {
@@ -4095,15 +3538,6 @@ declare const theme: {
4095
3538
  outline: string;
4096
3539
  outlineColor: string;
4097
3540
  };
4098
- _disabled: {
4099
- outlineWidth: string;
4100
- outlineColor: string;
4101
- outlineStyle: string;
4102
- outlineOffset: string;
4103
- } | {
4104
- outline: string;
4105
- outlineColor: string;
4106
- };
4107
3541
  backgroundColor: string;
4108
3542
  outlineWidth: string;
4109
3543
  outlineColor: string;
@@ -4128,15 +3562,6 @@ declare const theme: {
4128
3562
  outline: string;
4129
3563
  outlineColor: string;
4130
3564
  };
4131
- _disabled: {
4132
- outlineWidth: string;
4133
- outlineColor: string;
4134
- outlineStyle: string;
4135
- outlineOffset: string;
4136
- } | {
4137
- outline: string;
4138
- outlineColor: string;
4139
- };
4140
3565
  backgroundColor: string;
4141
3566
  outline: string;
4142
3567
  outlineColor: string;
@@ -4158,15 +3583,6 @@ declare const theme: {
4158
3583
  outline: string;
4159
3584
  outlineColor: string;
4160
3585
  };
4161
- _disabled: {
4162
- outlineWidth: string;
4163
- outlineColor: string;
4164
- outlineStyle: string;
4165
- outlineOffset: string;
4166
- } | {
4167
- outline: string;
4168
- outlineColor: string;
4169
- };
4170
3586
  outline: string;
4171
3587
  outlineColor: string;
4172
3588
  backgroundColor: string;
@@ -8983,6 +8399,85 @@ declare const theme: {
8983
8399
  colorScheme?: string | undefined;
8984
8400
  } | undefined;
8985
8401
  };
8402
+ Card: {
8403
+ baseStyle?: {
8404
+ container: {
8405
+ [x: string]: string;
8406
+ backgroundColor: string;
8407
+ boxShadow: string;
8408
+ borderRadius: string;
8409
+ color: string;
8410
+ borderWidth: string;
8411
+ borderColor: string;
8412
+ };
8413
+ body: {
8414
+ padding: string;
8415
+ flex: string;
8416
+ };
8417
+ header: {
8418
+ padding: string;
8419
+ };
8420
+ footer: {
8421
+ padding: string;
8422
+ };
8423
+ } | undefined;
8424
+ sizes?: {
8425
+ sm: {
8426
+ container: {
8427
+ [x: string]: string;
8428
+ };
8429
+ };
8430
+ md: {
8431
+ container: {
8432
+ [x: string]: string;
8433
+ };
8434
+ };
8435
+ lg: {
8436
+ container: {
8437
+ [x: string]: string;
8438
+ };
8439
+ };
8440
+ } | undefined;
8441
+ variants?: {
8442
+ elevated: {
8443
+ container: {
8444
+ [x: string]: string | {
8445
+ [x: string]: string;
8446
+ };
8447
+ _dark: {
8448
+ [x: string]: string;
8449
+ };
8450
+ };
8451
+ };
8452
+ outline: {
8453
+ container: {
8454
+ [x: string]: string;
8455
+ };
8456
+ };
8457
+ filled: {
8458
+ container: {
8459
+ [x: string]: string;
8460
+ };
8461
+ };
8462
+ unstyled: {
8463
+ body: {
8464
+ [x: string]: number;
8465
+ };
8466
+ header: {
8467
+ [x: string]: number;
8468
+ };
8469
+ footer: {
8470
+ [x: string]: number;
8471
+ };
8472
+ };
8473
+ } | undefined;
8474
+ defaultProps?: {
8475
+ size?: "sm" | "md" | "lg" | undefined;
8476
+ variant?: "outline" | "filled" | "unstyled" | "elevated" | undefined;
8477
+ colorScheme?: string | undefined;
8478
+ } | undefined;
8479
+ parts: ("body" | "footer" | "header" | "container")[];
8480
+ };
8986
8481
  };
8987
8482
  borders: {
8988
8483
  none: string;
@@ -9571,4 +9066,4 @@ declare const Text: _chakra_ui_system_dist_system_types.ComponentWithAs<"p", Tex
9571
9066
  **/
9572
9067
  declare function slugify(text: string | string[], maxLength?: number): string;
9573
9068
 
9574
- export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Card, CardProps, CardSelect, CargonetLogo, CargonetLogoProps, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChoiceChip, ChoiceChipProps, ClosableAlert, CloseButton, CloseButtonProps, Code, CodeProps, ColorInlineLoader, ColorInlineLoaderProps, ColorSpinner, ColorSpinnerProps, Combobox, ComboboxProps, ContentLoader, ContentLoaderProps, DarkFullScreenLoader, DarkInlineLoader, DarkInlineLoaderProps, DarkSpinner, DarkSpinnerProps, DatePicker, DateRangePicker, Divider, DividerProps, Drawer, DrawerBodyProps, DrawerContent, ModalHeader as DrawerHeader, Expandable, ExpandableAlert, ExpandableItem, ExpandableItemProps, FloatingActionButton, FormControl, FormControlProps, FormErrorMessage, FormErrorMessageProps, FormLabel, FormLabelProps, FullScreenDrawer, Heading, HeadingProps, IconButton, IconButtonProps, InfoSelect, InfoTag, InfoTagProps, Input, InputElementProps, InputLeftElement, InputProps, InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightInlineLoaderProps, LightSpinner, LightSpinnerProps, LineIcon, LineIconProps, ListBox, ModalHeader, ModalHeaderProps, NativeSelect, NativeSelectProps, Nudge, NudgeProps, NumericStepper, Pagination, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioCardProps, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, SimpleDrawer, SimpleDrawerProps, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, StaticCard, StaticCardProps, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, Tooltip, TooltipProps, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoPride, VyLogoPrideProps, VyLogoProps, WizardNudge, WizardNudgeProps, brandTheme, createTexts, fontFaces, slugify, theme, useToast, useTranslation };
9069
+ export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, ButtonGroupProps, ButtonProps, CardSelect, CargonetLogo, CargonetLogoProps, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChoiceChip, ChoiceChipProps, ClosableAlert, CloseButton, CloseButtonProps, Code, CodeProps, ColorInlineLoader, ColorInlineLoaderProps, ColorSpinner, ColorSpinnerProps, Combobox, ComboboxProps, ContentLoader, ContentLoaderProps, DarkFullScreenLoader, DarkInlineLoader, DarkInlineLoaderProps, DarkSpinner, DarkSpinnerProps, DatePicker, DateRangePicker, Divider, DividerProps, Drawer, DrawerBodyProps, DrawerContent, ModalHeader as DrawerHeader, Expandable, ExpandableAlert, ExpandableItem, ExpandableItemProps, FloatingActionButton, FormControl, FormControlProps, FormErrorMessage, FormErrorMessageProps, FormLabel, FormLabelProps, FullScreenDrawer, Heading, HeadingProps, IconButton, IconButtonProps, InfoSelect, InfoTag, InfoTagProps, Input, InputElementProps, InputLeftElement, InputProps, InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightInlineLoaderProps, LightSpinner, LightSpinnerProps, LineIcon, LineIconProps, ListBox, ModalHeader, ModalHeaderProps, NativeSelect, NativeSelectProps, Nudge, NudgeProps, NumericStepper, Pagination, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioCardProps, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, SimpleDrawer, SimpleDrawerProps, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, StaticCard, StaticCardProps, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, Tooltip, TooltipProps, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoPride, VyLogoPrideProps, VyLogoProps, WizardNudge, WizardNudgeProps, brandTheme, createTexts, fontFaces, slugify, theme, useToast, useTranslation };