@vygruppen/spor-react 9.2.1 → 9.3.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.
@@ -1,5 +1,5 @@
1
1
 
2
- > @vygruppen/spor-react@9.2.1 build
2
+ > @vygruppen/spor-react@9.3.0 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 488.25 KB
13
- CJS ⚡️ Build success in 2045ms
14
12
  ESM dist/index.mjs 2.02 KB
15
- ESM dist/CountryCodeSelect-FR7IFLQR.mjs 1.19 KB
16
- ESM dist/chunk-EVOFJL5T.mjs 382.27 KB
17
- ESM ⚡️ Build success in 2046ms
18
- DTS ⚡️ Build success in 12277ms
19
- DTS dist/index.d.ts 318.44 KB
20
- DTS dist/index.d.mts 318.44 KB
13
+ ESM dist/CountryCodeSelect-QD66IDCL.mjs 1.19 KB
14
+ ESM dist/chunk-U3P2P6PX.mjs 382.24 KB
15
+ ESM ⚡️ Build success in 2076ms
16
+ CJS dist/index.js 488.21 KB
17
+ CJS ⚡️ Build success in 2077ms
18
+ DTS ⚡️ Build success in 12077ms
19
+ DTS dist/index.d.ts 318.05 KB
20
+ DTS dist/index.d.mts 318.05 KB
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @vygruppen/spor-react
2
2
 
3
+ ## 9.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - d660370: CardSelect: Add fontWeight prop
8
+
9
+ ### Patch Changes
10
+
11
+ - 7838d12: Removed baseBackground from base variant on most of the components.
12
+ - 162650e: CardSelect: Improve JSDoc
13
+ - Updated dependencies [df1ae12]
14
+ - @vygruppen/spor-design-tokens@3.5.3
15
+
3
16
  ## 9.2.1
4
17
 
5
18
  ### Patch Changes
@@ -1,4 +1,4 @@
1
- import { createTexts, useTranslation, InfoSelect, Item } from './chunk-EVOFJL5T.mjs';
1
+ import { createTexts, useTranslation, InfoSelect, Item } from './chunk-U3P2P6PX.mjs';
2
2
  import React from 'react';
3
3
  import { getSupportedCallingCodes } from 'awesome-phonenumber';
4
4
 
@@ -2507,6 +2507,7 @@ var CardSelect = forwardRef(
2507
2507
  crossOffset = 0,
2508
2508
  placement = "bottom",
2509
2509
  withChevron = true,
2510
+ fontWeight = "normal",
2510
2511
  ...props
2511
2512
  }, externalRef) => {
2512
2513
  const label = "label" in props ? props.label : props["aria-label"];
@@ -2534,6 +2535,7 @@ var CardSelect = forwardRef(
2534
2535
  {
2535
2536
  type: "button",
2536
2537
  ref: triggerRef,
2538
+ fontWeight: "bold",
2537
2539
  sx: styles3.trigger,
2538
2540
  "aria-label": label,
2539
2541
  ...buttonProps,
@@ -3341,7 +3343,7 @@ var texts14 = createTexts({
3341
3343
  sv: "Telefonnummer"
3342
3344
  }
3343
3345
  });
3344
- var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-FR7IFLQR.mjs'));
3346
+ var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-QD66IDCL.mjs'));
3345
3347
  var Radio = forwardRef((props, ref) => {
3346
3348
  return /* @__PURE__ */ React69__default.createElement(Radio$1, { ...props, ref });
3347
3349
  });
@@ -9552,7 +9554,7 @@ function baseBackground(state2, props) {
9552
9554
  return surface("disabled", props);
9553
9555
  case "hover":
9554
9556
  default:
9555
- return surface("default", props);
9557
+ return { backgroundColor: "transparent" };
9556
9558
  }
9557
9559
  }
9558
9560
  function baseBorder(state2, props) {
@@ -10211,7 +10213,6 @@ var config6 = defineStyleConfig$1({
10211
10213
  },
10212
10214
  _active: {
10213
10215
  ...baseBorder("default", props),
10214
- // We want a
10215
10216
  ...baseBackground("active", props)
10216
10217
  }
10217
10218
  }),
@@ -10904,13 +10905,11 @@ var config11 = helpers6.defineMultiStyleConfig({
10904
10905
  variants: {
10905
10906
  base: (props) => ({
10906
10907
  container: {
10907
- ...baseBackground("default", props),
10908
10908
  ...baseBorder("default", props),
10909
10909
  ...baseText("default", props),
10910
10910
  _hover: {
10911
10911
  ...baseText("default", props),
10912
- ...baseBorder("hover", props),
10913
- ...baseBackground("hover", props)
10912
+ ...baseBorder("hover", props)
10914
10913
  },
10915
10914
  _active: {
10916
10915
  ...baseBackground("active", props),
@@ -11201,6 +11200,7 @@ var config14 = helpers7.defineMultiStyleConfig({
11201
11200
  }),
11202
11201
  floating: (props) => ({
11203
11202
  wrapper: {
11203
+ ...floatingBackground("default", props),
11204
11204
  ...floatingBorder("default", props),
11205
11205
  boxShadow: "sm",
11206
11206
  _hover: {
@@ -11888,7 +11888,6 @@ var config22 = helpers14.defineMultiStyleConfig({
11888
11888
  width: "100%",
11889
11889
  outline: "none",
11890
11890
  border: 0,
11891
- ...baseBackground("default", props),
11892
11891
  borderRadius: "sm",
11893
11892
  transitionProperty: "common",
11894
11893
  transitionDuration: "fast",
@@ -11896,6 +11895,7 @@ var config22 = helpers14.defineMultiStyleConfig({
11896
11895
  paddingX: 3,
11897
11896
  height: "54px",
11898
11897
  fontSize: "mobile.md",
11898
+ ...baseBackground("default", props),
11899
11899
  ...baseBorder("default", props),
11900
11900
  _hover: {
11901
11901
  ...baseBorder("hover", props)
@@ -12390,8 +12390,8 @@ var config28 = helpers19.defineMultiStyleConfig({
12390
12390
  textAlign: "center",
12391
12391
  transitionProperty: "common",
12392
12392
  transitionDuration: "fast",
12393
- ...baseBackground("default", props),
12394
12393
  ...baseText("default", props),
12394
+ ...baseBackground("default", props),
12395
12395
  _disabled: {
12396
12396
  pointerEvents: "none",
12397
12397
  opacity: 0.5
@@ -12637,9 +12637,7 @@ var config33 = helpers24.defineMultiStyleConfig({
12637
12637
  ...input_default.baseStyle(props).field,
12638
12638
  appearance: "none",
12639
12639
  paddingTop: "16px",
12640
- "option, optgroup": {
12641
- background: "white"
12642
- }
12640
+ "option, optgroup": {}
12643
12641
  },
12644
12642
  icon: {
12645
12643
  width: "30px",
@@ -12789,17 +12787,17 @@ var config36 = helpers26.defineMultiStyleConfig({
12789
12787
  height: [$height3.reference],
12790
12788
  transitionProperty: "common",
12791
12789
  transitionDuration: "fast",
12792
- ...baseBackground("default", props),
12793
12790
  ...baseBorder("default", props),
12794
12791
  ...focusVisibleStyles(props),
12792
+ ...baseBackground("default", props),
12795
12793
  _hover: {
12796
- ...baseBackground("hover", props),
12797
12794
  ...baseBorder("hover", props)
12798
12795
  },
12799
12796
  _checked: {
12800
12797
  ...brandBackground("default", props),
12801
12798
  outlineColor: "transparent",
12802
12799
  _hover: {
12800
+ ...baseBackground("default", props),
12803
12801
  ...brandBackground("hover", props)
12804
12802
  }
12805
12803
  },
package/dist/index.d.mts CHANGED
@@ -667,9 +667,13 @@ type CardSelectProps = BoxProps & {
667
667
  placement?: AriaPositionProps["placement"];
668
668
  /** Whether or not to show the chevron. Defaults to true */
669
669
  withChevron?: boolean;
670
+ /** Defaults to normal */
671
+ fontWeight?: ResponsiveValue<"normal" | "bold">;
670
672
  } & ({
673
+ /** The text label of the trigger button */
671
674
  label: string;
672
675
  } | {
676
+ /** Accessible label for the trigger button */
673
677
  "aria-label": string;
674
678
  });
675
679
  /**
@@ -3512,14 +3516,12 @@ declare const theme: {
3512
3516
  base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
3513
3517
  container: {
3514
3518
  _hover: {
3515
- backgroundColor: string;
3516
3519
  outlineWidth: string;
3517
3520
  outlineColor: string;
3518
3521
  outlineStyle: string;
3519
3522
  outlineOffset: string;
3520
3523
  color: string;
3521
3524
  } | {
3522
- backgroundColor: string;
3523
3525
  outline: string;
3524
3526
  outlineColor: string;
3525
3527
  color: string;
@@ -3540,17 +3542,14 @@ declare const theme: {
3540
3542
  outlineColor: string;
3541
3543
  outlineStyle: string;
3542
3544
  outlineOffset: string;
3543
- backgroundColor: string;
3544
3545
  } | {
3545
3546
  _hover: {
3546
- backgroundColor: string;
3547
3547
  outlineWidth: string;
3548
3548
  outlineColor: string;
3549
3549
  outlineStyle: string;
3550
3550
  outlineOffset: string;
3551
3551
  color: string;
3552
3552
  } | {
3553
- backgroundColor: string;
3554
3553
  outline: string;
3555
3554
  outlineColor: string;
3556
3555
  color: string;
@@ -3569,7 +3568,6 @@ declare const theme: {
3569
3568
  color: string;
3570
3569
  outline: string;
3571
3570
  outlineColor: string;
3572
- backgroundColor: string;
3573
3571
  };
3574
3572
  };
3575
3573
  accent: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
@@ -3937,6 +3935,7 @@ declare const theme: {
3937
3935
  };
3938
3936
  outline: string;
3939
3937
  outlineColor: string;
3938
+ backgroundColor: string;
3940
3939
  };
3941
3940
  };
3942
3941
  ghost: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
@@ -4759,6 +4758,11 @@ declare const theme: {
4759
4758
  outlineColor: string;
4760
4759
  outlineStyle: string;
4761
4760
  outlineOffset: string;
4761
+ backgroundColor: string;
4762
+ appearance: string;
4763
+ width: string;
4764
+ outline: string;
4765
+ border: number;
4762
4766
  borderRadius: string;
4763
4767
  transitionProperty: string;
4764
4768
  transitionDuration: string;
@@ -4766,11 +4770,6 @@ declare const theme: {
4766
4770
  paddingX: number;
4767
4771
  height: string;
4768
4772
  fontSize: string;
4769
- backgroundColor: string;
4770
- appearance: string;
4771
- width: string;
4772
- outline: string;
4773
- border: number;
4774
4773
  } | {
4775
4774
  _hover: {
4776
4775
  outlineWidth: string;
@@ -4857,6 +4856,10 @@ declare const theme: {
4857
4856
  };
4858
4857
  outline: string;
4859
4858
  outlineColor: string;
4859
+ backgroundColor: string;
4860
+ appearance: string;
4861
+ width: string;
4862
+ border: number;
4860
4863
  borderRadius: string;
4861
4864
  transitionProperty: string;
4862
4865
  transitionDuration: string;
@@ -4864,10 +4867,6 @@ declare const theme: {
4864
4867
  paddingX: number;
4865
4868
  height: string;
4866
4869
  fontSize: string;
4867
- backgroundColor: string;
4868
- appearance: string;
4869
- width: string;
4870
- border: number;
4871
4870
  };
4872
4871
  element: {
4873
4872
  height: string;
@@ -5385,8 +5384,8 @@ declare const theme: {
5385
5384
  _active: {
5386
5385
  backgroundColor: string;
5387
5386
  };
5388
- color: string;
5389
5387
  backgroundColor: string;
5388
+ color: string;
5390
5389
  fontSize: string;
5391
5390
  fontWeight: string;
5392
5391
  marginX: number;
@@ -5688,9 +5687,7 @@ declare const theme: {
5688
5687
  field: {
5689
5688
  appearance: string;
5690
5689
  paddingTop: string;
5691
- "option, optgroup": {
5692
- background: string;
5693
- };
5690
+ "option, optgroup": {};
5694
5691
  _hover: {
5695
5692
  outlineWidth: string;
5696
5693
  outlineColor: string;
@@ -5778,6 +5775,10 @@ declare const theme: {
5778
5775
  outlineColor: string;
5779
5776
  outlineStyle: string;
5780
5777
  outlineOffset: string;
5778
+ backgroundColor: string;
5779
+ width: string;
5780
+ outline: string;
5781
+ border: number;
5781
5782
  borderRadius: string;
5782
5783
  transitionProperty: string;
5783
5784
  transitionDuration: string;
@@ -5785,16 +5786,10 @@ declare const theme: {
5785
5786
  paddingX: number;
5786
5787
  height: string;
5787
5788
  fontSize: string;
5788
- backgroundColor: string;
5789
- width: string;
5790
- outline: string;
5791
- border: number;
5792
5789
  } | {
5793
5790
  appearance: string;
5794
5791
  paddingTop: string;
5795
- "option, optgroup": {
5796
- background: string;
5797
- };
5792
+ "option, optgroup": {};
5798
5793
  _hover: {
5799
5794
  outlineWidth: string;
5800
5795
  outlineColor: string;
@@ -5880,6 +5875,9 @@ declare const theme: {
5880
5875
  };
5881
5876
  outline: string;
5882
5877
  outlineColor: string;
5878
+ backgroundColor: string;
5879
+ width: string;
5880
+ border: number;
5883
5881
  borderRadius: string;
5884
5882
  transitionProperty: string;
5885
5883
  transitionDuration: string;
@@ -5887,9 +5885,6 @@ declare const theme: {
5887
5885
  paddingX: number;
5888
5886
  height: string;
5889
5887
  fontSize: string;
5890
- backgroundColor: string;
5891
- width: string;
5892
- border: number;
5893
5888
  };
5894
5889
  icon: {
5895
5890
  width: string;
@@ -6035,11 +6030,9 @@ declare const theme: {
6035
6030
  outlineColor: string;
6036
6031
  outlineStyle: string;
6037
6032
  outlineOffset: string;
6038
- backgroundColor: string;
6039
6033
  } | {
6040
6034
  outline: string;
6041
6035
  outlineColor: string;
6042
- backgroundColor: string;
6043
6036
  };
6044
6037
  _checked: {
6045
6038
  outlineColor: string;
@@ -6083,6 +6076,7 @@ declare const theme: {
6083
6076
  backgroundColor: string;
6084
6077
  pointerEvents: string;
6085
6078
  };
6079
+ backgroundColor: string;
6086
6080
  _focusVisible: {
6087
6081
  outlineWidth: string;
6088
6082
  outlineColor: string;
@@ -6093,7 +6087,6 @@ declare const theme: {
6093
6087
  outlineColor: string;
6094
6088
  outlineStyle: string;
6095
6089
  outlineOffset: string;
6096
- backgroundColor: string;
6097
6090
  width: string[];
6098
6091
  height: string[];
6099
6092
  transitionProperty: string;
@@ -6104,11 +6097,9 @@ declare const theme: {
6104
6097
  outlineColor: string;
6105
6098
  outlineStyle: string;
6106
6099
  outlineOffset: string;
6107
- backgroundColor: string;
6108
6100
  } | {
6109
6101
  outline: string;
6110
6102
  outlineColor: string;
6111
- backgroundColor: string;
6112
6103
  };
6113
6104
  _checked: {
6114
6105
  outlineColor: string;
@@ -6152,6 +6143,7 @@ declare const theme: {
6152
6143
  backgroundColor: string;
6153
6144
  pointerEvents: string;
6154
6145
  };
6146
+ backgroundColor: string;
6155
6147
  _focusVisible: {
6156
6148
  outlineWidth: string;
6157
6149
  outlineColor: string;
@@ -6160,7 +6152,6 @@ declare const theme: {
6160
6152
  };
6161
6153
  outline: string;
6162
6154
  outlineColor: string;
6163
- backgroundColor: string;
6164
6155
  width: string[];
6165
6156
  height: string[];
6166
6157
  transitionProperty: string;
@@ -6620,6 +6611,10 @@ declare const theme: {
6620
6611
  outlineColor: string;
6621
6612
  outlineStyle: string;
6622
6613
  outlineOffset: string;
6614
+ backgroundColor: string;
6615
+ width: string;
6616
+ outline: string;
6617
+ border: number;
6623
6618
  borderRadius: string;
6624
6619
  transitionProperty: string;
6625
6620
  transitionDuration: string;
@@ -6627,10 +6622,6 @@ declare const theme: {
6627
6622
  paddingX: number;
6628
6623
  height: string;
6629
6624
  fontSize: string;
6630
- backgroundColor: string;
6631
- width: string;
6632
- outline: string;
6633
- border: number;
6634
6625
  } | {
6635
6626
  minHeight: string;
6636
6627
  verticalAlign: string;
@@ -6723,6 +6714,9 @@ declare const theme: {
6723
6714
  };
6724
6715
  outline: string;
6725
6716
  outlineColor: string;
6717
+ backgroundColor: string;
6718
+ width: string;
6719
+ border: number;
6726
6720
  borderRadius: string;
6727
6721
  transitionProperty: string;
6728
6722
  transitionDuration: string;
@@ -6730,9 +6724,6 @@ declare const theme: {
6730
6724
  paddingX: number;
6731
6725
  height: string;
6732
6726
  fontSize: string;
6733
- backgroundColor: string;
6734
- width: string;
6735
- border: number;
6736
6727
  }) | undefined;
6737
6728
  sizes?: {
6738
6729
  [key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;
package/dist/index.d.ts CHANGED
@@ -667,9 +667,13 @@ type CardSelectProps = BoxProps & {
667
667
  placement?: AriaPositionProps["placement"];
668
668
  /** Whether or not to show the chevron. Defaults to true */
669
669
  withChevron?: boolean;
670
+ /** Defaults to normal */
671
+ fontWeight?: ResponsiveValue<"normal" | "bold">;
670
672
  } & ({
673
+ /** The text label of the trigger button */
671
674
  label: string;
672
675
  } | {
676
+ /** Accessible label for the trigger button */
673
677
  "aria-label": string;
674
678
  });
675
679
  /**
@@ -3512,14 +3516,12 @@ declare const theme: {
3512
3516
  base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
3513
3517
  container: {
3514
3518
  _hover: {
3515
- backgroundColor: string;
3516
3519
  outlineWidth: string;
3517
3520
  outlineColor: string;
3518
3521
  outlineStyle: string;
3519
3522
  outlineOffset: string;
3520
3523
  color: string;
3521
3524
  } | {
3522
- backgroundColor: string;
3523
3525
  outline: string;
3524
3526
  outlineColor: string;
3525
3527
  color: string;
@@ -3540,17 +3542,14 @@ declare const theme: {
3540
3542
  outlineColor: string;
3541
3543
  outlineStyle: string;
3542
3544
  outlineOffset: string;
3543
- backgroundColor: string;
3544
3545
  } | {
3545
3546
  _hover: {
3546
- backgroundColor: string;
3547
3547
  outlineWidth: string;
3548
3548
  outlineColor: string;
3549
3549
  outlineStyle: string;
3550
3550
  outlineOffset: string;
3551
3551
  color: string;
3552
3552
  } | {
3553
- backgroundColor: string;
3554
3553
  outline: string;
3555
3554
  outlineColor: string;
3556
3555
  color: string;
@@ -3569,7 +3568,6 @@ declare const theme: {
3569
3568
  color: string;
3570
3569
  outline: string;
3571
3570
  outlineColor: string;
3572
- backgroundColor: string;
3573
3571
  };
3574
3572
  };
3575
3573
  accent: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
@@ -3937,6 +3935,7 @@ declare const theme: {
3937
3935
  };
3938
3936
  outline: string;
3939
3937
  outlineColor: string;
3938
+ backgroundColor: string;
3940
3939
  };
3941
3940
  };
3942
3941
  ghost: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
@@ -4759,6 +4758,11 @@ declare const theme: {
4759
4758
  outlineColor: string;
4760
4759
  outlineStyle: string;
4761
4760
  outlineOffset: string;
4761
+ backgroundColor: string;
4762
+ appearance: string;
4763
+ width: string;
4764
+ outline: string;
4765
+ border: number;
4762
4766
  borderRadius: string;
4763
4767
  transitionProperty: string;
4764
4768
  transitionDuration: string;
@@ -4766,11 +4770,6 @@ declare const theme: {
4766
4770
  paddingX: number;
4767
4771
  height: string;
4768
4772
  fontSize: string;
4769
- backgroundColor: string;
4770
- appearance: string;
4771
- width: string;
4772
- outline: string;
4773
- border: number;
4774
4773
  } | {
4775
4774
  _hover: {
4776
4775
  outlineWidth: string;
@@ -4857,6 +4856,10 @@ declare const theme: {
4857
4856
  };
4858
4857
  outline: string;
4859
4858
  outlineColor: string;
4859
+ backgroundColor: string;
4860
+ appearance: string;
4861
+ width: string;
4862
+ border: number;
4860
4863
  borderRadius: string;
4861
4864
  transitionProperty: string;
4862
4865
  transitionDuration: string;
@@ -4864,10 +4867,6 @@ declare const theme: {
4864
4867
  paddingX: number;
4865
4868
  height: string;
4866
4869
  fontSize: string;
4867
- backgroundColor: string;
4868
- appearance: string;
4869
- width: string;
4870
- border: number;
4871
4870
  };
4872
4871
  element: {
4873
4872
  height: string;
@@ -5385,8 +5384,8 @@ declare const theme: {
5385
5384
  _active: {
5386
5385
  backgroundColor: string;
5387
5386
  };
5388
- color: string;
5389
5387
  backgroundColor: string;
5388
+ color: string;
5390
5389
  fontSize: string;
5391
5390
  fontWeight: string;
5392
5391
  marginX: number;
@@ -5688,9 +5687,7 @@ declare const theme: {
5688
5687
  field: {
5689
5688
  appearance: string;
5690
5689
  paddingTop: string;
5691
- "option, optgroup": {
5692
- background: string;
5693
- };
5690
+ "option, optgroup": {};
5694
5691
  _hover: {
5695
5692
  outlineWidth: string;
5696
5693
  outlineColor: string;
@@ -5778,6 +5775,10 @@ declare const theme: {
5778
5775
  outlineColor: string;
5779
5776
  outlineStyle: string;
5780
5777
  outlineOffset: string;
5778
+ backgroundColor: string;
5779
+ width: string;
5780
+ outline: string;
5781
+ border: number;
5781
5782
  borderRadius: string;
5782
5783
  transitionProperty: string;
5783
5784
  transitionDuration: string;
@@ -5785,16 +5786,10 @@ declare const theme: {
5785
5786
  paddingX: number;
5786
5787
  height: string;
5787
5788
  fontSize: string;
5788
- backgroundColor: string;
5789
- width: string;
5790
- outline: string;
5791
- border: number;
5792
5789
  } | {
5793
5790
  appearance: string;
5794
5791
  paddingTop: string;
5795
- "option, optgroup": {
5796
- background: string;
5797
- };
5792
+ "option, optgroup": {};
5798
5793
  _hover: {
5799
5794
  outlineWidth: string;
5800
5795
  outlineColor: string;
@@ -5880,6 +5875,9 @@ declare const theme: {
5880
5875
  };
5881
5876
  outline: string;
5882
5877
  outlineColor: string;
5878
+ backgroundColor: string;
5879
+ width: string;
5880
+ border: number;
5883
5881
  borderRadius: string;
5884
5882
  transitionProperty: string;
5885
5883
  transitionDuration: string;
@@ -5887,9 +5885,6 @@ declare const theme: {
5887
5885
  paddingX: number;
5888
5886
  height: string;
5889
5887
  fontSize: string;
5890
- backgroundColor: string;
5891
- width: string;
5892
- border: number;
5893
5888
  };
5894
5889
  icon: {
5895
5890
  width: string;
@@ -6035,11 +6030,9 @@ declare const theme: {
6035
6030
  outlineColor: string;
6036
6031
  outlineStyle: string;
6037
6032
  outlineOffset: string;
6038
- backgroundColor: string;
6039
6033
  } | {
6040
6034
  outline: string;
6041
6035
  outlineColor: string;
6042
- backgroundColor: string;
6043
6036
  };
6044
6037
  _checked: {
6045
6038
  outlineColor: string;
@@ -6083,6 +6076,7 @@ declare const theme: {
6083
6076
  backgroundColor: string;
6084
6077
  pointerEvents: string;
6085
6078
  };
6079
+ backgroundColor: string;
6086
6080
  _focusVisible: {
6087
6081
  outlineWidth: string;
6088
6082
  outlineColor: string;
@@ -6093,7 +6087,6 @@ declare const theme: {
6093
6087
  outlineColor: string;
6094
6088
  outlineStyle: string;
6095
6089
  outlineOffset: string;
6096
- backgroundColor: string;
6097
6090
  width: string[];
6098
6091
  height: string[];
6099
6092
  transitionProperty: string;
@@ -6104,11 +6097,9 @@ declare const theme: {
6104
6097
  outlineColor: string;
6105
6098
  outlineStyle: string;
6106
6099
  outlineOffset: string;
6107
- backgroundColor: string;
6108
6100
  } | {
6109
6101
  outline: string;
6110
6102
  outlineColor: string;
6111
- backgroundColor: string;
6112
6103
  };
6113
6104
  _checked: {
6114
6105
  outlineColor: string;
@@ -6152,6 +6143,7 @@ declare const theme: {
6152
6143
  backgroundColor: string;
6153
6144
  pointerEvents: string;
6154
6145
  };
6146
+ backgroundColor: string;
6155
6147
  _focusVisible: {
6156
6148
  outlineWidth: string;
6157
6149
  outlineColor: string;
@@ -6160,7 +6152,6 @@ declare const theme: {
6160
6152
  };
6161
6153
  outline: string;
6162
6154
  outlineColor: string;
6163
- backgroundColor: string;
6164
6155
  width: string[];
6165
6156
  height: string[];
6166
6157
  transitionProperty: string;
@@ -6620,6 +6611,10 @@ declare const theme: {
6620
6611
  outlineColor: string;
6621
6612
  outlineStyle: string;
6622
6613
  outlineOffset: string;
6614
+ backgroundColor: string;
6615
+ width: string;
6616
+ outline: string;
6617
+ border: number;
6623
6618
  borderRadius: string;
6624
6619
  transitionProperty: string;
6625
6620
  transitionDuration: string;
@@ -6627,10 +6622,6 @@ declare const theme: {
6627
6622
  paddingX: number;
6628
6623
  height: string;
6629
6624
  fontSize: string;
6630
- backgroundColor: string;
6631
- width: string;
6632
- outline: string;
6633
- border: number;
6634
6625
  } | {
6635
6626
  minHeight: string;
6636
6627
  verticalAlign: string;
@@ -6723,6 +6714,9 @@ declare const theme: {
6723
6714
  };
6724
6715
  outline: string;
6725
6716
  outlineColor: string;
6717
+ backgroundColor: string;
6718
+ width: string;
6719
+ border: number;
6726
6720
  borderRadius: string;
6727
6721
  transitionProperty: string;
6728
6722
  transitionDuration: string;
@@ -6730,9 +6724,6 @@ declare const theme: {
6730
6724
  paddingX: number;
6731
6725
  height: string;
6732
6726
  fontSize: string;
6733
- backgroundColor: string;
6734
- width: string;
6735
- border: number;
6736
6727
  }) | undefined;
6737
6728
  sizes?: {
6738
6729
  [key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;
package/dist/index.js CHANGED
@@ -2253,6 +2253,7 @@ var init_CardSelect = __esm({
2253
2253
  crossOffset = 0,
2254
2254
  placement = "bottom",
2255
2255
  withChevron = true,
2256
+ fontWeight = "normal",
2256
2257
  ...props
2257
2258
  }, externalRef) => {
2258
2259
  const label = "label" in props ? props.label : props["aria-label"];
@@ -2280,6 +2281,7 @@ var init_CardSelect = __esm({
2280
2281
  {
2281
2282
  type: "button",
2282
2283
  ref: triggerRef,
2284
+ fontWeight: "bold",
2283
2285
  sx: styles3.trigger,
2284
2286
  "aria-label": label,
2285
2287
  ...buttonProps,
@@ -10858,7 +10860,7 @@ function baseBackground(state2, props) {
10858
10860
  return surface("disabled", props);
10859
10861
  case "hover":
10860
10862
  default:
10861
- return surface("default", props);
10863
+ return { backgroundColor: "transparent" };
10862
10864
  }
10863
10865
  }
10864
10866
  function baseBorder(state2, props) {
@@ -11585,7 +11587,6 @@ var init_button2 = __esm({
11585
11587
  },
11586
11588
  _active: {
11587
11589
  ...baseBorder("default", props),
11588
- // We want a
11589
11590
  ...baseBackground("active", props)
11590
11591
  }
11591
11592
  }),
@@ -12410,13 +12411,11 @@ var init_choice_chip = __esm({
12410
12411
  variants: {
12411
12412
  base: (props) => ({
12412
12413
  container: {
12413
- ...baseBackground("default", props),
12414
12414
  ...baseBorder("default", props),
12415
12415
  ...baseText("default", props),
12416
12416
  _hover: {
12417
12417
  ...baseText("default", props),
12418
- ...baseBorder("hover", props),
12419
- ...baseBackground("hover", props)
12418
+ ...baseBorder("hover", props)
12420
12419
  },
12421
12420
  _active: {
12422
12421
  ...baseBackground("active", props),
@@ -12732,6 +12731,7 @@ var init_datepicker2 = __esm({
12732
12731
  }),
12733
12732
  floating: (props) => ({
12734
12733
  wrapper: {
12734
+ ...floatingBackground("default", props),
12735
12735
  ...floatingBorder("default", props),
12736
12736
  boxShadow: "sm",
12737
12737
  _hover: {
@@ -13489,7 +13489,6 @@ var init_input2 = __esm({
13489
13489
  width: "100%",
13490
13490
  outline: "none",
13491
13491
  border: 0,
13492
- ...baseBackground("default", props),
13493
13492
  borderRadius: "sm",
13494
13493
  transitionProperty: "common",
13495
13494
  transitionDuration: "fast",
@@ -13497,6 +13496,7 @@ var init_input2 = __esm({
13497
13496
  paddingX: 3,
13498
13497
  height: "54px",
13499
13498
  fontSize: "mobile.md",
13499
+ ...baseBackground("default", props),
13500
13500
  ...baseBorder("default", props),
13501
13501
  _hover: {
13502
13502
  ...baseBorder("hover", props)
@@ -14046,8 +14046,8 @@ var init_numeric_stepper = __esm({
14046
14046
  textAlign: "center",
14047
14047
  transitionProperty: "common",
14048
14048
  transitionDuration: "fast",
14049
- ...baseBackground("default", props),
14050
14049
  ...baseText("default", props),
14050
+ ...baseBackground("default", props),
14051
14051
  _disabled: {
14052
14052
  pointerEvents: "none",
14053
14053
  opacity: 0.5
@@ -14329,9 +14329,7 @@ var init_select = __esm({
14329
14329
  ...input_default.baseStyle(props).field,
14330
14330
  appearance: "none",
14331
14331
  paddingTop: "16px",
14332
- "option, optgroup": {
14333
- background: "white"
14334
- }
14332
+ "option, optgroup": {}
14335
14333
  },
14336
14334
  icon: {
14337
14335
  width: "30px",
@@ -14517,17 +14515,17 @@ var init_switch = __esm({
14517
14515
  height: [$height3.reference],
14518
14516
  transitionProperty: "common",
14519
14517
  transitionDuration: "fast",
14520
- ...baseBackground("default", props),
14521
14518
  ...baseBorder("default", props),
14522
14519
  ...focusVisibleStyles(props),
14520
+ ...baseBackground("default", props),
14523
14521
  _hover: {
14524
- ...baseBackground("hover", props),
14525
14522
  ...baseBorder("hover", props)
14526
14523
  },
14527
14524
  _checked: {
14528
14525
  ...brandBackground("default", props),
14529
14526
  outlineColor: "transparent",
14530
14527
  _hover: {
14528
+ ...baseBackground("default", props),
14531
14529
  ...brandBackground("hover", props)
14532
14530
  }
14533
14531
  },
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-EVOFJL5T.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-U3P2P6PX.mjs';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vygruppen/spor-react",
3
- "version": "9.2.1",
3
+ "version": "9.3.0",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.mjs",
6
6
  "types": "./dist/index.d.ts",
@@ -4,6 +4,7 @@ import {
4
4
  chakra,
5
5
  Flex,
6
6
  forwardRef,
7
+ ResponsiveValue,
7
8
  useMultiStyleConfig,
8
9
  } from "@chakra-ui/react";
9
10
  import {
@@ -43,7 +44,18 @@ type CardSelectProps = BoxProps & {
43
44
  placement?: AriaPositionProps["placement"];
44
45
  /** Whether or not to show the chevron. Defaults to true */
45
46
  withChevron?: boolean;
46
- } & ({ label: string } | { "aria-label": string });
47
+ /** Defaults to normal */
48
+ fontWeight?: ResponsiveValue<"normal" | "bold">;
49
+ } & (
50
+ | {
51
+ /** The text label of the trigger button */
52
+ label: string;
53
+ }
54
+ | {
55
+ /** Accessible label for the trigger button */
56
+ "aria-label": string;
57
+ }
58
+ );
47
59
 
48
60
  /**
49
61
  * A card select component.
@@ -73,6 +85,7 @@ export const CardSelect = forwardRef<CardSelectProps, "button">(
73
85
  crossOffset = 0,
74
86
  placement = "bottom",
75
87
  withChevron = true,
88
+ fontWeight = "normal",
76
89
  ...props
77
90
  },
78
91
  externalRef,
@@ -109,6 +122,7 @@ export const CardSelect = forwardRef<CardSelectProps, "button">(
109
122
  <chakra.button
110
123
  type="button"
111
124
  ref={triggerRef}
125
+ fontWeight="bold"
112
126
  sx={styles.trigger}
113
127
  aria-label={label}
114
128
  {...buttonProps}
@@ -57,7 +57,7 @@ const config = defineStyleConfig({
57
57
  ...baseBorder("hover", props),
58
58
  },
59
59
  _active: {
60
- ...baseBorder("default", props), // We want a
60
+ ...baseBorder("default", props),
61
61
  ...baseBackground("active", props),
62
62
  },
63
63
  }),
@@ -64,13 +64,11 @@ const config = helpers.defineMultiStyleConfig({
64
64
  variants: {
65
65
  base: (props) => ({
66
66
  container: {
67
- ...baseBackground("default", props),
68
67
  ...baseBorder("default", props),
69
68
  ...baseText("default", props),
70
69
  _hover: {
71
70
  ...baseText("default", props),
72
71
  ...baseBorder("hover", props),
73
- ...baseBackground("hover", props),
74
72
  },
75
73
  _active: {
76
74
  ...baseBackground("active", props),
@@ -4,7 +4,7 @@ import { zIndices } from "../foundations";
4
4
  import { accentText } from "../utils/accent-utils";
5
5
  import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
6
6
  import { brandBackground, brandText } from "../utils/brand-utils";
7
- import { floatingBorder } from "../utils/floating-utils";
7
+ import { floatingBorder, floatingBackground } from "../utils/floating-utils";
8
8
  import { focusVisibleStyles } from "../utils/focus-utils";
9
9
  import { ghostBackground } from "../utils/ghost-utils";
10
10
  import { surface } from "../utils/surface-utils";
@@ -159,6 +159,7 @@ const config = helpers.defineMultiStyleConfig({
159
159
  }),
160
160
  floating: (props) => ({
161
161
  wrapper: {
162
+ ...floatingBackground("default", props),
162
163
  ...floatingBorder("default", props),
163
164
  boxShadow: "sm",
164
165
 
@@ -13,7 +13,6 @@ const config = helpers.defineMultiStyleConfig({
13
13
  width: "100%",
14
14
  outline: "none",
15
15
  border: 0,
16
- ...baseBackground("default", props),
17
16
  borderRadius: "sm",
18
17
  transitionProperty: "common",
19
18
  transitionDuration: "fast",
@@ -21,6 +20,7 @@ const config = helpers.defineMultiStyleConfig({
21
20
  paddingX: 3,
22
21
  height: "54px",
23
22
  fontSize: "mobile.md",
23
+ ...baseBackground("default", props),
24
24
 
25
25
  ...baseBorder("default", props),
26
26
  _hover: {
@@ -28,8 +28,8 @@ const config = helpers.defineMultiStyleConfig({
28
28
  textAlign: "center",
29
29
  transitionProperty: "common",
30
30
  transitionDuration: "fast",
31
- ...baseBackground("default", props),
32
31
  ...baseText("default", props),
32
+ ...baseBackground("default", props),
33
33
 
34
34
  _disabled: {
35
35
  pointerEvents: "none",
@@ -31,9 +31,7 @@ const config = helpers.defineMultiStyleConfig({
31
31
  ...Input.baseStyle!(props).field,
32
32
  appearance: "none",
33
33
  paddingTop: "16px",
34
- "option, optgroup": {
35
- background: "white",
36
- },
34
+ "option, optgroup": {},
37
35
  },
38
36
  icon: {
39
37
  width: "30px",
@@ -27,12 +27,11 @@ const config = helpers.defineMultiStyleConfig({
27
27
  height: [$height.reference],
28
28
  transitionProperty: "common",
29
29
  transitionDuration: "fast",
30
- ...baseBackground("default", props),
31
30
  ...baseBorder("default", props),
32
31
  ...focusVisibleStyles(props),
32
+ ...baseBackground("default", props),
33
33
 
34
34
  _hover: {
35
- ...baseBackground("hover", props),
36
35
  ...baseBorder("hover", props),
37
36
  },
38
37
  _checked: {
@@ -40,6 +39,7 @@ const config = helpers.defineMultiStyleConfig({
40
39
  outlineColor: "transparent",
41
40
 
42
41
  _hover: {
42
+ ...baseBackground("default", props),
43
43
  ...brandBackground("hover", props),
44
44
  },
45
45
  },
@@ -26,7 +26,7 @@ export function baseBackground(
26
26
  return surface("disabled", props);
27
27
  case "hover":
28
28
  default:
29
- return surface("default", props);
29
+ return { backgroundColor: "transparent" };
30
30
  }
31
31
  }
32
32