@vygruppen/spor-react 9.0.1 → 9.0.3

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.
Files changed (10) hide show
  1. package/.turbo/turbo-build.log +9 -9
  2. package/CHANGELOG.md +12 -0
  3. package/dist/{CountryCodeSelect-OVMXGXPY.mjs → CountryCodeSelect-ZL7DHEIA.mjs} +1 -1
  4. package/dist/{chunk-W7IAYOJH.mjs → chunk-FTQF5IX2.mjs} +7 -8
  5. package/dist/index.d.mts +273 -7
  6. package/dist/index.d.ts +273 -7
  7. package/dist/index.js +7 -7
  8. package/dist/index.mjs +1 -1
  9. package/package.json +1 -1
  10. package/src/theme/components/card.ts +8 -7
package/.turbo/turbo-build.log CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- > @vygruppen/spor-react@9.0.1 build
2
+ > @vygruppen/spor-react@9.0.3 build
3
3
  > tsup src/index.tsx --dts --treeshake --format cjs,esm
4
4
 
5
5
  CLI Building entry: src/index.tsx
@@ -9,12 +9,12 @@
9
9
  CJS Build start
10
10
  ESM Build start
11
11
  DTS Build start
12
- CJS dist/index.js 487.82 KB
13
- CJS ⚡️ Build success in 2091ms
12
+ CJS dist/index.js 487.85 KB
13
+ CJS ⚡️ Build success in 2081ms
14
14
  ESM dist/index.mjs 2.02 KB
15
- ESM dist/CountryCodeSelect-OVMXGXPY.mjs 1.19 KB
16
- ESM dist/chunk-W7IAYOJH.mjs 381.88 KB
17
- ESM ⚡️ Build success in 2092ms
18
- DTS ⚡️ Build success in 11319ms
19
- DTS dist/index.d.ts 307.91 KB
20
- DTS dist/index.d.mts 307.91 KB
15
+ ESM dist/CountryCodeSelect-ZL7DHEIA.mjs 1.19 KB
16
+ ESM dist/chunk-FTQF5IX2.mjs 381.89 KB
17
+ ESM ⚡️ Build success in 2082ms
18
+ DTS ⚡️ Build success in 12077ms
19
+ DTS dist/index.d.ts 318.30 KB
20
+ DTS dist/index.d.mts 318.30 KB
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @vygruppen/spor-react
2
2
 
3
+ ## 9.0.3
4
+
5
+ ### Patch Changes
6
+
7
+ - 51ff0e7: Card: Fix wrong colors on white card outlines in dark mode
8
+
9
+ ## 9.0.2
10
+
11
+ ### Patch Changes
12
+
13
+ - 6bd954e: Use CSS variable to avoid possible nullpointer"
14
+
3
15
  ## 9.0.1
4
16
 
5
17
  ### Patch Changes
package/dist/{CountryCodeSelect-OVMXGXPY.mjs → CountryCodeSelect-ZL7DHEIA.mjs} RENAMED
@@ -1,4 +1,4 @@
1
- import { createTexts, useTranslation, InfoSelect, Item } from './chunk-W7IAYOJH.mjs';
1
+ import { createTexts, useTranslation, InfoSelect, Item } from './chunk-FTQF5IX2.mjs';
2
2
  import React from 'react';
3
3
  import { getSupportedCallingCodes } from 'awesome-phonenumber';
4
4
 
package/dist/{chunk-W7IAYOJH.mjs → chunk-FTQF5IX2.mjs} RENAMED
@@ -3340,7 +3340,7 @@ var texts14 = createTexts({
3340
3340
  sv: "Telefonnummer"
3341
3341
  }
3342
3342
  });
3343
- var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-OVMXGXPY.mjs'));
3343
+ var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-ZL7DHEIA.mjs'));
3344
3344
  var Radio = forwardRef((props, ref) => {
3345
3345
  return /* @__PURE__ */ React69__default.createElement(Radio$1, { ...props, ref });
3346
3346
  });
@@ -10581,11 +10581,10 @@ var getColorSchemeBaseProps = (props) => {
10581
10581
  switch (props.colorScheme) {
10582
10582
  case "white":
10583
10583
  return {
10584
- outline: "1px solid",
10585
- outlineColor: "silver",
10584
+ ...baseBorder("default", props),
10586
10585
  backgroundColor: mode(
10587
10586
  "white",
10588
- `color-mix(in srgb, white 10%, ${props.theme.colors.surface.default.dark})`
10587
+ `color-mix(in srgb, white 10%, var(--spor-colors-surface-default-dark))`
10589
10588
  )(props),
10590
10589
  color: "inherit"
10591
10590
  };
@@ -10614,7 +10613,7 @@ function getColorSchemeClickableProps(props) {
10614
10613
  switch (props.colorScheme) {
10615
10614
  case "white":
10616
10615
  return {
10617
- outlineColor: "silver"
10616
+ ...floatingBorder("default", props)
10618
10617
  };
10619
10618
  case "grey":
10620
10619
  return {
@@ -10634,9 +10633,9 @@ var getColorSchemeHoverProps = (props) => {
10634
10633
  return {
10635
10634
  backgroundColor: mode(
10636
10635
  "white",
10637
- `color-mix(in srgb, white 20%, ${props.theme.colors.surface.default.dark})`
10636
+ `color-mix(in srgb, white 20%, var(--spor-colors-surface-default-dark))`
10638
10637
  )(props),
10639
- outlineColor: "steel"
10638
+ ...floatingBorder("hover", props)
10640
10639
  };
10641
10640
  case "grey":
10642
10641
  return {
@@ -10656,7 +10655,7 @@ var getColorSchemeActiveProps = (props) => {
10656
10655
  case "white":
10657
10656
  return {
10658
10657
  backgroundColor: mode("mint", "teal")(props),
10659
- outlineColor: "silver"
10658
+ ...floatingBorder("active", props)
10660
10659
  };
10661
10660
  case "grey":
10662
10661
  return {
package/dist/index.d.mts CHANGED
@@ -404,7 +404,7 @@ type FloatingActionButtonProps = BoxProps & {
404
404
  * placement="bottom right"
405
405
  * />
406
406
  */
407
- declare const FloatingActionButton: ComponentWithAs<ComponentWithAs<"a" | "button">, FloatingActionButtonProps>;
407
+ declare const FloatingActionButton: ComponentWithAs<ComponentWithAs<"a" | "button", {}>, FloatingActionButtonProps>;
408
408
 
409
409
  type CardProps = Exclude<BoxProps, "size"> & {
410
410
  size?: "sm" | "lg";
@@ -2693,13 +2693,65 @@ declare const theme: {
2693
2693
  baseStyle?: ((props: any) => {
2694
2694
  "button&, a&, label&, &.is-clickable": {
2695
2695
  _hover: {
2696
+ outline: string;
2697
+ outlineColor: string;
2696
2698
  backgroundColor: string;
2699
+ } | {
2700
+ outlineColor: string;
2701
+ backgroundColor?: undefined;
2702
+ } | {
2703
+ backgroundColor: string;
2704
+ outlineColor: string;
2705
+ };
2706
+ _active: {
2707
+ outline: string;
2697
2708
  outlineColor: string;
2709
+ backgroundColor: string;
2710
+ } | {
2711
+ backgroundColor: string;
2712
+ outlineColor: string;
2713
+ };
2714
+ _disabled: {
2715
+ pointerEvents: string;
2716
+ color: string;
2717
+ outlineWidth: string;
2718
+ outlineColor: string;
2719
+ outlineStyle: string;
2720
+ outlineOffset: string;
2721
+ backgroundColor: string;
2722
+ } | {
2723
+ pointerEvents: string;
2724
+ color: string;
2725
+ outline: string;
2726
+ outlineColor: string;
2727
+ backgroundColor: string;
2728
+ };
2729
+ _focusVisible: {
2730
+ outlineWidth: string;
2731
+ outlineColor: string;
2732
+ outlineStyle: string;
2733
+ outlineOffset: string;
2734
+ };
2735
+ outline: string;
2736
+ outlineColor: string;
2737
+ backgroundColor?: undefined;
2738
+ } | {
2739
+ _hover: {
2740
+ outline: string;
2741
+ outlineColor: string;
2742
+ backgroundColor: string;
2698
2743
  } | {
2699
2744
  outlineColor: string;
2700
2745
  backgroundColor?: undefined;
2746
+ } | {
2747
+ backgroundColor: string;
2748
+ outlineColor: string;
2701
2749
  };
2702
2750
  _active: {
2751
+ outline: string;
2752
+ outlineColor: string;
2753
+ backgroundColor: string;
2754
+ } | {
2703
2755
  backgroundColor: string;
2704
2756
  outlineColor: string;
2705
2757
  };
@@ -2729,13 +2781,21 @@ declare const theme: {
2729
2781
  outline: string;
2730
2782
  } | {
2731
2783
  _hover: {
2732
- backgroundColor: string;
2784
+ outline: string;
2733
2785
  outlineColor: string;
2786
+ backgroundColor: string;
2734
2787
  } | {
2735
2788
  outlineColor: string;
2736
2789
  backgroundColor?: undefined;
2790
+ } | {
2791
+ backgroundColor: string;
2792
+ outlineColor: string;
2737
2793
  };
2738
2794
  _active: {
2795
+ outline: string;
2796
+ outlineColor: string;
2797
+ backgroundColor: string;
2798
+ } | {
2739
2799
  backgroundColor: string;
2740
2800
  outlineColor: string;
2741
2801
  };
@@ -2764,10 +2824,12 @@ declare const theme: {
2764
2824
  outlineColor: string;
2765
2825
  outline: string;
2766
2826
  };
2767
- outline: string;
2768
- outlineColor: string;
2769
2827
  backgroundColor: string;
2770
2828
  color: string;
2829
+ outlineWidth: string;
2830
+ outlineColor: string;
2831
+ outlineStyle: string;
2832
+ outlineOffset: string;
2771
2833
  appearance: string;
2772
2834
  border: string;
2773
2835
  overflow: string;
@@ -2779,13 +2841,65 @@ declare const theme: {
2779
2841
  } | {
2780
2842
  "button&, a&, label&, &.is-clickable": {
2781
2843
  _hover: {
2844
+ outline: string;
2845
+ outlineColor: string;
2782
2846
  backgroundColor: string;
2847
+ } | {
2848
+ outlineColor: string;
2849
+ backgroundColor?: undefined;
2850
+ } | {
2851
+ backgroundColor: string;
2852
+ outlineColor: string;
2853
+ };
2854
+ _active: {
2855
+ outline: string;
2783
2856
  outlineColor: string;
2857
+ backgroundColor: string;
2858
+ } | {
2859
+ backgroundColor: string;
2860
+ outlineColor: string;
2861
+ };
2862
+ _disabled: {
2863
+ pointerEvents: string;
2864
+ color: string;
2865
+ outlineWidth: string;
2866
+ outlineColor: string;
2867
+ outlineStyle: string;
2868
+ outlineOffset: string;
2869
+ backgroundColor: string;
2870
+ } | {
2871
+ pointerEvents: string;
2872
+ color: string;
2873
+ outline: string;
2874
+ outlineColor: string;
2875
+ backgroundColor: string;
2876
+ };
2877
+ _focusVisible: {
2878
+ outlineWidth: string;
2879
+ outlineColor: string;
2880
+ outlineStyle: string;
2881
+ outlineOffset: string;
2882
+ };
2883
+ outline: string;
2884
+ outlineColor: string;
2885
+ backgroundColor?: undefined;
2886
+ } | {
2887
+ _hover: {
2888
+ outline: string;
2889
+ outlineColor: string;
2890
+ backgroundColor: string;
2784
2891
  } | {
2785
2892
  outlineColor: string;
2786
2893
  backgroundColor?: undefined;
2894
+ } | {
2895
+ backgroundColor: string;
2896
+ outlineColor: string;
2787
2897
  };
2788
2898
  _active: {
2899
+ outline: string;
2900
+ outlineColor: string;
2901
+ backgroundColor: string;
2902
+ } | {
2789
2903
  backgroundColor: string;
2790
2904
  outlineColor: string;
2791
2905
  };
@@ -2815,13 +2929,21 @@ declare const theme: {
2815
2929
  outline: string;
2816
2930
  } | {
2817
2931
  _hover: {
2818
- backgroundColor: string;
2932
+ outline: string;
2819
2933
  outlineColor: string;
2934
+ backgroundColor: string;
2820
2935
  } | {
2821
2936
  outlineColor: string;
2822
2937
  backgroundColor?: undefined;
2938
+ } | {
2939
+ backgroundColor: string;
2940
+ outlineColor: string;
2823
2941
  };
2824
2942
  _active: {
2943
+ outline: string;
2944
+ outlineColor: string;
2945
+ backgroundColor: string;
2946
+ } | {
2825
2947
  backgroundColor: string;
2826
2948
  outlineColor: string;
2827
2949
  };
@@ -2851,9 +2973,152 @@ declare const theme: {
2851
2973
  outline: string;
2852
2974
  };
2853
2975
  backgroundColor: string;
2854
- outline?: undefined;
2855
- outlineColor?: undefined;
2856
2976
  color: string;
2977
+ outline: string;
2978
+ outlineColor: string;
2979
+ appearance: string;
2980
+ border: string;
2981
+ overflow: string;
2982
+ fontSize: string;
2983
+ display: string;
2984
+ transitionProperty: string;
2985
+ transitionDuration: string;
2986
+ borderRadius: string;
2987
+ } | {
2988
+ "button&, a&, label&, &.is-clickable": {
2989
+ _hover: {
2990
+ outline: string;
2991
+ outlineColor: string;
2992
+ backgroundColor: string;
2993
+ } | {
2994
+ outlineColor: string;
2995
+ backgroundColor?: undefined;
2996
+ } | {
2997
+ backgroundColor: string;
2998
+ outlineColor: string;
2999
+ };
3000
+ _active: {
3001
+ outline: string;
3002
+ outlineColor: string;
3003
+ backgroundColor: string;
3004
+ } | {
3005
+ backgroundColor: string;
3006
+ outlineColor: string;
3007
+ };
3008
+ _disabled: {
3009
+ pointerEvents: string;
3010
+ color: string;
3011
+ outlineWidth: string;
3012
+ outlineColor: string;
3013
+ outlineStyle: string;
3014
+ outlineOffset: string;
3015
+ backgroundColor: string;
3016
+ } | {
3017
+ pointerEvents: string;
3018
+ color: string;
3019
+ outline: string;
3020
+ outlineColor: string;
3021
+ backgroundColor: string;
3022
+ };
3023
+ _focusVisible: {
3024
+ outlineWidth: string;
3025
+ outlineColor: string;
3026
+ outlineStyle: string;
3027
+ outlineOffset: string;
3028
+ };
3029
+ outline: string;
3030
+ outlineColor: string;
3031
+ backgroundColor?: undefined;
3032
+ } | {
3033
+ _hover: {
3034
+ outline: string;
3035
+ outlineColor: string;
3036
+ backgroundColor: string;
3037
+ } | {
3038
+ outlineColor: string;
3039
+ backgroundColor?: undefined;
3040
+ } | {
3041
+ backgroundColor: string;
3042
+ outlineColor: string;
3043
+ };
3044
+ _active: {
3045
+ outline: string;
3046
+ outlineColor: string;
3047
+ backgroundColor: string;
3048
+ } | {
3049
+ backgroundColor: string;
3050
+ outlineColor: string;
3051
+ };
3052
+ _disabled: {
3053
+ pointerEvents: string;
3054
+ color: string;
3055
+ outlineWidth: string;
3056
+ outlineColor: string;
3057
+ outlineStyle: string;
3058
+ outlineOffset: string;
3059
+ backgroundColor: string;
3060
+ } | {
3061
+ pointerEvents: string;
3062
+ color: string;
3063
+ outline: string;
3064
+ outlineColor: string;
3065
+ backgroundColor: string;
3066
+ };
3067
+ _focusVisible: {
3068
+ outlineWidth: string;
3069
+ outlineColor: string;
3070
+ outlineStyle: string;
3071
+ outlineOffset: string;
3072
+ };
3073
+ outlineColor: string;
3074
+ backgroundColor?: undefined;
3075
+ outline: string;
3076
+ } | {
3077
+ _hover: {
3078
+ outline: string;
3079
+ outlineColor: string;
3080
+ backgroundColor: string;
3081
+ } | {
3082
+ outlineColor: string;
3083
+ backgroundColor?: undefined;
3084
+ } | {
3085
+ backgroundColor: string;
3086
+ outlineColor: string;
3087
+ };
3088
+ _active: {
3089
+ outline: string;
3090
+ outlineColor: string;
3091
+ backgroundColor: string;
3092
+ } | {
3093
+ backgroundColor: string;
3094
+ outlineColor: string;
3095
+ };
3096
+ _disabled: {
3097
+ pointerEvents: string;
3098
+ color: string;
3099
+ outlineWidth: string;
3100
+ outlineColor: string;
3101
+ outlineStyle: string;
3102
+ outlineOffset: string;
3103
+ backgroundColor: string;
3104
+ } | {
3105
+ pointerEvents: string;
3106
+ color: string;
3107
+ outline: string;
3108
+ outlineColor: string;
3109
+ backgroundColor: string;
3110
+ };
3111
+ _focusVisible: {
3112
+ outlineWidth: string;
3113
+ outlineColor: string;
3114
+ outlineStyle: string;
3115
+ outlineOffset: string;
3116
+ };
3117
+ backgroundColor: string;
3118
+ outlineColor: string;
3119
+ outline: string;
3120
+ };
3121
+ backgroundColor: string;
2857
3122
  appearance: string;
2858
3123
  border: string;
2859
3124
  overflow: string;
@@ -2862,6 +3127,7 @@ declare const theme: {
2862
3127
  transitionProperty: string;
2863
3128
  transitionDuration: string;
2864
3129
  borderRadius: string;
3130
+ color: string;
2865
3131
  }) | undefined;
2866
3132
  sizes?: {
2867
3133
  sm: {
package/dist/index.d.ts CHANGED
@@ -404,7 +404,7 @@ type FloatingActionButtonProps = BoxProps & {
404
404
  * placement="bottom right"
405
405
  * />
406
406
  */
407
- declare const FloatingActionButton: ComponentWithAs<ComponentWithAs<"a" | "button">, FloatingActionButtonProps>;
407
+ declare const FloatingActionButton: ComponentWithAs<ComponentWithAs<"a" | "button", {}>, FloatingActionButtonProps>;
408
408
 
409
409
  type CardProps = Exclude<BoxProps, "size"> & {
410
410
  size?: "sm" | "lg";
@@ -2693,13 +2693,65 @@ declare const theme: {
2693
2693
  baseStyle?: ((props: any) => {
2694
2694
  "button&, a&, label&, &.is-clickable": {
2695
2695
  _hover: {
2696
+ outline: string;
2697
+ outlineColor: string;
2696
2698
  backgroundColor: string;
2699
+ } | {
2700
+ outlineColor: string;
2701
+ backgroundColor?: undefined;
2702
+ } | {
2703
+ backgroundColor: string;
2704
+ outlineColor: string;
2705
+ };
2706
+ _active: {
2707
+ outline: string;
2697
2708
  outlineColor: string;
2709
+ backgroundColor: string;
2710
+ } | {
2711
+ backgroundColor: string;
2712
+ outlineColor: string;
2713
+ };
2714
+ _disabled: {
2715
+ pointerEvents: string;
2716
+ color: string;
2717
+ outlineWidth: string;
2718
+ outlineColor: string;
2719
+ outlineStyle: string;
2720
+ outlineOffset: string;
2721
+ backgroundColor: string;
2722
+ } | {
2723
+ pointerEvents: string;
2724
+ color: string;
2725
+ outline: string;
2726
+ outlineColor: string;
2727
+ backgroundColor: string;
2728
+ };
2729
+ _focusVisible: {
2730
+ outlineWidth: string;
2731
+ outlineColor: string;
2732
+ outlineStyle: string;
2733
+ outlineOffset: string;
2734
+ };
2735
+ outline: string;
2736
+ outlineColor: string;
2737
+ backgroundColor?: undefined;
2738
+ } | {
2739
+ _hover: {
2740
+ outline: string;
2741
+ outlineColor: string;
2742
+ backgroundColor: string;
2698
2743
  } | {
2699
2744
  outlineColor: string;
2700
2745
  backgroundColor?: undefined;
2746
+ } | {
2747
+ backgroundColor: string;
2748
+ outlineColor: string;
2701
2749
  };
2702
2750
  _active: {
2751
+ outline: string;
2752
+ outlineColor: string;
2753
+ backgroundColor: string;
2754
+ } | {
2703
2755
  backgroundColor: string;
2704
2756
  outlineColor: string;
2705
2757
  };
@@ -2729,13 +2781,21 @@ declare const theme: {
2729
2781
  outline: string;
2730
2782
  } | {
2731
2783
  _hover: {
2732
- backgroundColor: string;
2784
+ outline: string;
2733
2785
  outlineColor: string;
2786
+ backgroundColor: string;
2734
2787
  } | {
2735
2788
  outlineColor: string;
2736
2789
  backgroundColor?: undefined;
2790
+ } | {
2791
+ backgroundColor: string;
2792
+ outlineColor: string;
2737
2793
  };
2738
2794
  _active: {
2795
+ outline: string;
2796
+ outlineColor: string;
2797
+ backgroundColor: string;
2798
+ } | {
2739
2799
  backgroundColor: string;
2740
2800
  outlineColor: string;
2741
2801
  };
@@ -2764,10 +2824,12 @@ declare const theme: {
2764
2824
  outlineColor: string;
2765
2825
  outline: string;
2766
2826
  };
2767
- outline: string;
2768
- outlineColor: string;
2769
2827
  backgroundColor: string;
2770
2828
  color: string;
2829
+ outlineWidth: string;
2830
+ outlineColor: string;
2831
+ outlineStyle: string;
2832
+ outlineOffset: string;
2771
2833
  appearance: string;
2772
2834
  border: string;
2773
2835
  overflow: string;
@@ -2779,13 +2841,65 @@ declare const theme: {
2779
2841
  } | {
2780
2842
  "button&, a&, label&, &.is-clickable": {
2781
2843
  _hover: {
2844
+ outline: string;
2845
+ outlineColor: string;
2782
2846
  backgroundColor: string;
2847
+ } | {
2848
+ outlineColor: string;
2849
+ backgroundColor?: undefined;
2850
+ } | {
2851
+ backgroundColor: string;
2852
+ outlineColor: string;
2853
+ };
2854
+ _active: {
2855
+ outline: string;
2783
2856
  outlineColor: string;
2857
+ backgroundColor: string;
2858
+ } | {
2859
+ backgroundColor: string;
2860
+ outlineColor: string;
2861
+ };
2862
+ _disabled: {
2863
+ pointerEvents: string;
2864
+ color: string;
2865
+ outlineWidth: string;
2866
+ outlineColor: string;
2867
+ outlineStyle: string;
2868
+ outlineOffset: string;
2869
+ backgroundColor: string;
2870
+ } | {
2871
+ pointerEvents: string;
2872
+ color: string;
2873
+ outline: string;
2874
+ outlineColor: string;
2875
+ backgroundColor: string;
2876
+ };
2877
+ _focusVisible: {
2878
+ outlineWidth: string;
2879
+ outlineColor: string;
2880
+ outlineStyle: string;
2881
+ outlineOffset: string;
2882
+ };
2883
+ outline: string;
2884
+ outlineColor: string;
2885
+ backgroundColor?: undefined;
2886
+ } | {
2887
+ _hover: {
2888
+ outline: string;
2889
+ outlineColor: string;
2890
+ backgroundColor: string;
2784
2891
  } | {
2785
2892
  outlineColor: string;
2786
2893
  backgroundColor?: undefined;
2894
+ } | {
2895
+ backgroundColor: string;
2896
+ outlineColor: string;
2787
2897
  };
2788
2898
  _active: {
2899
+ outline: string;
2900
+ outlineColor: string;
2901
+ backgroundColor: string;
2902
+ } | {
2789
2903
  backgroundColor: string;
2790
2904
  outlineColor: string;
2791
2905
  };
@@ -2815,13 +2929,21 @@ declare const theme: {
2815
2929
  outline: string;
2816
2930
  } | {
2817
2931
  _hover: {
2818
- backgroundColor: string;
2932
+ outline: string;
2819
2933
  outlineColor: string;
2934
+ backgroundColor: string;
2820
2935
  } | {
2821
2936
  outlineColor: string;
2822
2937
  backgroundColor?: undefined;
2938
+ } | {
2939
+ backgroundColor: string;
2940
+ outlineColor: string;
2823
2941
  };
2824
2942
  _active: {
2943
+ outline: string;
2944
+ outlineColor: string;
2945
+ backgroundColor: string;
2946
+ } | {
2825
2947
  backgroundColor: string;
2826
2948
  outlineColor: string;
2827
2949
  };
@@ -2851,9 +2973,152 @@ declare const theme: {
2851
2973
  outline: string;
2852
2974
  };
2853
2975
  backgroundColor: string;
2854
- outline?: undefined;
2855
- outlineColor?: undefined;
2856
2976
  color: string;
2977
+ outline: string;
2978
+ outlineColor: string;
2979
+ appearance: string;
2980
+ border: string;
2981
+ overflow: string;
2982
+ fontSize: string;
2983
+ display: string;
2984
+ transitionProperty: string;
2985
+ transitionDuration: string;
2986
+ borderRadius: string;
2987
+ } | {
2988
+ "button&, a&, label&, &.is-clickable": {
2989
+ _hover: {
2990
+ outline: string;
2991
+ outlineColor: string;
2992
+ backgroundColor: string;
2993
+ } | {
2994
+ outlineColor: string;
2995
+ backgroundColor?: undefined;
2996
+ } | {
2997
+ backgroundColor: string;
2998
+ outlineColor: string;
2999
+ };
3000
+ _active: {
3001
+ outline: string;
3002
+ outlineColor: string;
3003
+ backgroundColor: string;
3004
+ } | {
3005
+ backgroundColor: string;
3006
+ outlineColor: string;
3007
+ };
3008
+ _disabled: {
3009
+ pointerEvents: string;
3010
+ color: string;
3011
+ outlineWidth: string;
3012
+ outlineColor: string;
3013
+ outlineStyle: string;
3014
+ outlineOffset: string;
3015
+ backgroundColor: string;
3016
+ } | {
3017
+ pointerEvents: string;
3018
+ color: string;
3019
+ outline: string;
3020
+ outlineColor: string;
3021
+ backgroundColor: string;
3022
+ };
3023
+ _focusVisible: {
3024
+ outlineWidth: string;
3025
+ outlineColor: string;
3026
+ outlineStyle: string;
3027
+ outlineOffset: string;
3028
+ };
3029
+ outline: string;
3030
+ outlineColor: string;
3031
+ backgroundColor?: undefined;
3032
+ } | {
3033
+ _hover: {
3034
+ outline: string;
3035
+ outlineColor: string;
3036
+ backgroundColor: string;
3037
+ } | {
3038
+ outlineColor: string;
3039
+ backgroundColor?: undefined;
3040
+ } | {
3041
+ backgroundColor: string;
3042
+ outlineColor: string;
3043
+ };
3044
+ _active: {
3045
+ outline: string;
3046
+ outlineColor: string;
3047
+ backgroundColor: string;
3048
+ } | {
3049
+ backgroundColor: string;
3050
+ outlineColor: string;
3051
+ };
3052
+ _disabled: {
3053
+ pointerEvents: string;
3054
+ color: string;
3055
+ outlineWidth: string;
3056
+ outlineColor: string;
3057
+ outlineStyle: string;
3058
+ outlineOffset: string;
3059
+ backgroundColor: string;
3060
+ } | {
3061
+ pointerEvents: string;
3062
+ color: string;
3063
+ outline: string;
3064
+ outlineColor: string;
3065
+ backgroundColor: string;
3066
+ };
3067
+ _focusVisible: {
3068
+ outlineWidth: string;
3069
+ outlineColor: string;
3070
+ outlineStyle: string;
3071
+ outlineOffset: string;
3072
+ };
3073
+ outlineColor: string;
3074
+ backgroundColor?: undefined;
3075
+ outline: string;
3076
+ } | {
3077
+ _hover: {
3078
+ outline: string;
3079
+ outlineColor: string;
3080
+ backgroundColor: string;
3081
+ } | {
3082
+ outlineColor: string;
3083
+ backgroundColor?: undefined;
3084
+ } | {
3085
+ backgroundColor: string;
3086
+ outlineColor: string;
3087
+ };
3088
+ _active: {
3089
+ outline: string;
3090
+ outlineColor: string;
3091
+ backgroundColor: string;
3092
+ } | {
3093
+ backgroundColor: string;
3094
+ outlineColor: string;
3095
+ };
3096
+ _disabled: {
3097
+ pointerEvents: string;
3098
+ color: string;
3099
+ outlineWidth: string;
3100
+ outlineColor: string;
3101
+ outlineStyle: string;
3102
+ outlineOffset: string;
3103
+ backgroundColor: string;
3104
+ } | {
3105
+ pointerEvents: string;
3106
+ color: string;
3107
+ outline: string;
3108
+ outlineColor: string;
3109
+ backgroundColor: string;
3110
+ };
3111
+ _focusVisible: {
3112
+ outlineWidth: string;
3113
+ outlineColor: string;
3114
+ outlineStyle: string;
3115
+ outlineOffset: string;
3116
+ };
3117
+ backgroundColor: string;
3118
+ outlineColor: string;
3119
+ outline: string;
3120
+ };
3121
+ backgroundColor: string;
2857
3122
  appearance: string;
2858
3123
  border: string;
2859
3124
  overflow: string;
@@ -2862,6 +3127,7 @@ declare const theme: {
2862
3127
  transitionProperty: string;
2863
3128
  transitionDuration: string;
2864
3129
  borderRadius: string;
3130
+ color: string;
2865
3131
  }) | undefined;
2866
3132
  sizes?: {
2867
3133
  sm: {
package/dist/index.js CHANGED
@@ -11997,7 +11997,7 @@ function getColorSchemeClickableProps(props) {
11997
11997
  switch (props.colorScheme) {
11998
11998
  case "white":
11999
11999
  return {
12000
- outlineColor: "silver"
12000
+ ...floatingBorder("default", props)
12001
12001
  };
12002
12002
  case "grey":
12003
12003
  return {
@@ -12015,6 +12015,7 @@ var init_card2 = __esm({
12015
12015
  "src/theme/components/card.ts"() {
12016
12016
  init_foundations();
12017
12017
  init_base_utils();
12018
+ init_floating_utils();
12018
12019
  init_focus_utils();
12019
12020
  config8 = react.defineStyleConfig({
12020
12021
  baseStyle: (props) => ({
@@ -12074,11 +12075,10 @@ var init_card2 = __esm({
12074
12075
  switch (props.colorScheme) {
12075
12076
  case "white":
12076
12077
  return {
12077
- outline: "1px solid",
12078
- outlineColor: "silver",
12078
+ ...baseBorder("default", props),
12079
12079
  backgroundColor: themeTools.mode(
12080
12080
  "white",
12081
- `color-mix(in srgb, white 10%, ${props.theme.colors.surface.default.dark})`
12081
+ `color-mix(in srgb, white 10%, var(--spor-colors-surface-default-dark))`
12082
12082
  )(props),
12083
12083
  color: "inherit"
12084
12084
  };
@@ -12109,9 +12109,9 @@ var init_card2 = __esm({
12109
12109
  return {
12110
12110
  backgroundColor: themeTools.mode(
12111
12111
  "white",
12112
- `color-mix(in srgb, white 20%, ${props.theme.colors.surface.default.dark})`
12112
+ `color-mix(in srgb, white 20%, var(--spor-colors-surface-default-dark))`
12113
12113
  )(props),
12114
- outlineColor: "steel"
12114
+ ...floatingBorder("hover", props)
12115
12115
  };
12116
12116
  case "grey":
12117
12117
  return {
@@ -12131,7 +12131,7 @@ var init_card2 = __esm({
12131
12131
  case "white":
12132
12132
  return {
12133
12133
  backgroundColor: themeTools.mode("mint", "teal")(props),
12134
- outlineColor: "silver"
12134
+ ...floatingBorder("active", props)
12135
12135
  };
12136
12136
  case "grey":
12137
12137
  return {
package/dist/index.mjs CHANGED
@@ -1 +1 @@
1
- export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-W7IAYOJH.mjs';
1
+ export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-FTQF5IX2.mjs';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vygruppen/spor-react",
3
- "version": "9.0.1",
3
+ "version": "9.0.3",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.mjs",
6
6
  "types": "./dist/index.d.ts",
package/src/theme/components/card.ts CHANGED
@@ -2,6 +2,7 @@ import { defineStyleConfig } from "@chakra-ui/react";
2
2
  import { mode } from "@chakra-ui/theme-tools";
3
3
  import { colors } from "../foundations";
4
4
  import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
5
+ import { floatingBorder } from "../utils/floating-utils";
5
6
  import { focusVisibleStyles } from "../utils/focus-utils";
6
7
 
7
8
  const config = defineStyleConfig({
@@ -74,17 +75,17 @@ type CardThemeProps = {
74
75
  | "orange"
75
76
  | "red";
76
77
  theme: any;
78
+ colorMode: "light" | "dark";
77
79
  };
78
80
 
79
81
  const getColorSchemeBaseProps = (props: CardThemeProps) => {
80
82
  switch (props.colorScheme) {
81
83
  case "white":
82
84
  return {
83
- outline: "1px solid",
84
- outlineColor: "silver",
85
+ ...baseBorder("default", props),
85
86
  backgroundColor: mode(
86
87
  "white",
87
- `color-mix(in srgb, white 10%, ${props.theme.colors.surface.default.dark})`,
88
+ `color-mix(in srgb, white 10%, var(--spor-colors-surface-default-dark))`,
88
89
  )(props),
89
90
  color: "inherit",
90
91
  };
@@ -113,7 +114,7 @@ function getColorSchemeClickableProps(props: CardThemeProps) {
113
114
  switch (props.colorScheme) {
114
115
  case "white":
115
116
  return {
116
- outlineColor: "silver",
117
+ ...floatingBorder("default", props),
117
118
  };
118
119
  case "grey":
119
120
  return {
@@ -133,9 +134,9 @@ const getColorSchemeHoverProps = (props: CardThemeProps) => {
133
134
  return {
134
135
  backgroundColor: mode(
135
136
  "white",
136
- `color-mix(in srgb, white 20%, ${props.theme.colors.surface.default.dark})`,
137
+ `color-mix(in srgb, white 20%, var(--spor-colors-surface-default-dark))`,
137
138
  )(props),
138
- outlineColor: "steel",
139
+ ...floatingBorder("hover", props),
139
140
  };
140
141
  case "grey":
141
142
  return {
@@ -154,7 +155,7 @@ const getColorSchemeActiveProps = (props: CardThemeProps) => {
154
155
  case "white":
155
156
  return {
156
157
  backgroundColor: mode("mint", "teal")(props),
157
- outlineColor: "silver",
158
+ ...floatingBorder("active", props),
158
159
  };
159
160
  case "grey":
160
161
  return {