@vygruppen/spor-react 9.2.0 → 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.
Files changed (19) hide show
  1. package/.turbo/turbo-build.log +9 -9
  2. package/CHANGELOG.md +21 -0
  3. package/dist/{CountryCodeSelect-XAG646YQ.mjs → CountryCodeSelect-QD66IDCL.mjs} +1 -1
  4. package/dist/{chunk-VLNBMJ7I.mjs → chunk-U3P2P6PX.mjs} +12 -13
  5. package/dist/index.d.mts +34 -42
  6. package/dist/index.d.ts +34 -42
  7. package/dist/index.js +11 -12
  8. package/dist/index.mjs +1 -1
  9. package/package.json +1 -1
  10. package/src/input/CardSelect.tsx +15 -1
  11. package/src/theme/components/button.ts +1 -1
  12. package/src/theme/components/card-select.ts +1 -0
  13. package/src/theme/components/choice-chip.ts +0 -2
  14. package/src/theme/components/datepicker.ts +2 -1
  15. package/src/theme/components/input.ts +1 -1
  16. package/src/theme/components/numeric-stepper.ts +1 -1
  17. package/src/theme/components/select.ts +1 -3
  18. package/src/theme/components/switch.ts +2 -2
  19. package/src/theme/utils/base-utils.ts +1 -1
package/.turbo/turbo-build.log CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- > @vygruppen/spor-react@9.2.0 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.21 KB
13
- CJS ⚡️ Build success in 2042ms
14
12
  ESM dist/index.mjs 2.02 KB
15
- ESM dist/CountryCodeSelect-XAG646YQ.mjs 1.19 KB
16
- ESM dist/chunk-VLNBMJ7I.mjs 382.23 KB
17
- ESM ⚡️ Build success in 2043ms
18
- DTS ⚡️ Build success in 11913ms
19
- DTS dist/index.d.ts 318.41 KB
20
- DTS dist/index.d.mts 318.41 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,26 @@
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
+
16
+ ## 9.2.1
17
+
18
+ ### Patch Changes
19
+
20
+ - c82f7eb: Set the text color of card selects"
21
+ - Updated dependencies [c82f7eb]
22
+ - @vygruppen/spor-design-tokens@3.5.2
23
+
3
24
  ## 9.2.0
4
25
 
5
26
  ### Minor Changes
package/dist/{CountryCodeSelect-XAG646YQ.mjs → CountryCodeSelect-QD66IDCL.mjs} RENAMED
@@ -1,4 +1,4 @@
1
- import { createTexts, useTranslation, InfoSelect, Item } from './chunk-VLNBMJ7I.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
 
package/dist/{chunk-VLNBMJ7I.mjs → chunk-U3P2P6PX.mjs} RENAMED
@@ -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-XAG646YQ.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
  }),
@@ -10680,6 +10681,7 @@ var config9 = helpers4.defineMultiStyleConfig({
10680
10681
  alignItems: "center",
10681
10682
  transitionProperty: "outline",
10682
10683
  transitionDuration: "fast",
10684
+ ...baseText("default", props),
10683
10685
  ...focusVisibleStyles(props)
10684
10686
  },
10685
10687
  card: {
@@ -10903,13 +10905,11 @@ var config11 = helpers6.defineMultiStyleConfig({
10903
10905
  variants: {
10904
10906
  base: (props) => ({
10905
10907
  container: {
10906
- ...baseBackground("default", props),
10907
10908
  ...baseBorder("default", props),
10908
10909
  ...baseText("default", props),
10909
10910
  _hover: {
10910
10911
  ...baseText("default", props),
10911
- ...baseBorder("hover", props),
10912
- ...baseBackground("hover", props)
10912
+ ...baseBorder("hover", props)
10913
10913
  },
10914
10914
  _active: {
10915
10915
  ...baseBackground("active", props),
@@ -11200,6 +11200,7 @@ var config14 = helpers7.defineMultiStyleConfig({
11200
11200
  }),
11201
11201
  floating: (props) => ({
11202
11202
  wrapper: {
11203
+ ...floatingBackground("default", props),
11203
11204
  ...floatingBorder("default", props),
11204
11205
  boxShadow: "sm",
11205
11206
  _hover: {
@@ -11887,7 +11888,6 @@ var config22 = helpers14.defineMultiStyleConfig({
11887
11888
  width: "100%",
11888
11889
  outline: "none",
11889
11890
  border: 0,
11890
- ...baseBackground("default", props),
11891
11891
  borderRadius: "sm",
11892
11892
  transitionProperty: "common",
11893
11893
  transitionDuration: "fast",
@@ -11895,6 +11895,7 @@ var config22 = helpers14.defineMultiStyleConfig({
11895
11895
  paddingX: 3,
11896
11896
  height: "54px",
11897
11897
  fontSize: "mobile.md",
11898
+ ...baseBackground("default", props),
11898
11899
  ...baseBorder("default", props),
11899
11900
  _hover: {
11900
11901
  ...baseBorder("hover", props)
@@ -12389,8 +12390,8 @@ var config28 = helpers19.defineMultiStyleConfig({
12389
12390
  textAlign: "center",
12390
12391
  transitionProperty: "common",
12391
12392
  transitionDuration: "fast",
12392
- ...baseBackground("default", props),
12393
12393
  ...baseText("default", props),
12394
+ ...baseBackground("default", props),
12394
12395
  _disabled: {
12395
12396
  pointerEvents: "none",
12396
12397
  opacity: 0.5
@@ -12636,9 +12637,7 @@ var config33 = helpers24.defineMultiStyleConfig({
12636
12637
  ...input_default.baseStyle(props).field,
12637
12638
  appearance: "none",
12638
12639
  paddingTop: "16px",
12639
- "option, optgroup": {
12640
- background: "white"
12641
- }
12640
+ "option, optgroup": {}
12642
12641
  },
12643
12642
  icon: {
12644
12643
  width: "30px",
@@ -12788,17 +12787,17 @@ var config36 = helpers26.defineMultiStyleConfig({
12788
12787
  height: [$height3.reference],
12789
12788
  transitionProperty: "common",
12790
12789
  transitionDuration: "fast",
12791
- ...baseBackground("default", props),
12792
12790
  ...baseBorder("default", props),
12793
12791
  ...focusVisibleStyles(props),
12792
+ ...baseBackground("default", props),
12794
12793
  _hover: {
12795
- ...baseBackground("hover", props),
12796
12794
  ...baseBorder("hover", props)
12797
12795
  },
12798
12796
  _checked: {
12799
12797
  ...brandBackground("default", props),
12800
12798
  outlineColor: "transparent",
12801
12799
  _hover: {
12800
+ ...baseBackground("default", props),
12802
12801
  ...brandBackground("hover", props)
12803
12802
  }
12804
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
  /**
@@ -3174,6 +3178,7 @@ declare const theme: {
3174
3178
  outlineStyle: string;
3175
3179
  outlineOffset: string;
3176
3180
  };
3181
+ color: string;
3177
3182
  appearance: string;
3178
3183
  display: string;
3179
3184
  alignItems: string;
@@ -3511,14 +3516,12 @@ declare const theme: {
3511
3516
  base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
3512
3517
  container: {
3513
3518
  _hover: {
3514
- backgroundColor: string;
3515
3519
  outlineWidth: string;
3516
3520
  outlineColor: string;
3517
3521
  outlineStyle: string;
3518
3522
  outlineOffset: string;
3519
3523
  color: string;
3520
3524
  } | {
3521
- backgroundColor: string;
3522
3525
  outline: string;
3523
3526
  outlineColor: string;
3524
3527
  color: string;
@@ -3539,17 +3542,14 @@ declare const theme: {
3539
3542
  outlineColor: string;
3540
3543
  outlineStyle: string;
3541
3544
  outlineOffset: string;
3542
- backgroundColor: string;
3543
3545
  } | {
3544
3546
  _hover: {
3545
- backgroundColor: string;
3546
3547
  outlineWidth: string;
3547
3548
  outlineColor: string;
3548
3549
  outlineStyle: string;
3549
3550
  outlineOffset: string;
3550
3551
  color: string;
3551
3552
  } | {
3552
- backgroundColor: string;
3553
3553
  outline: string;
3554
3554
  outlineColor: string;
3555
3555
  color: string;
@@ -3568,7 +3568,6 @@ declare const theme: {
3568
3568
  color: string;
3569
3569
  outline: string;
3570
3570
  outlineColor: string;
3571
- backgroundColor: string;
3572
3571
  };
3573
3572
  };
3574
3573
  accent: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
@@ -3936,6 +3935,7 @@ declare const theme: {
3936
3935
  };
3937
3936
  outline: string;
3938
3937
  outlineColor: string;
3938
+ backgroundColor: string;
3939
3939
  };
3940
3940
  };
3941
3941
  ghost: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
@@ -4758,6 +4758,11 @@ declare const theme: {
4758
4758
  outlineColor: string;
4759
4759
  outlineStyle: string;
4760
4760
  outlineOffset: string;
4761
+ backgroundColor: string;
4762
+ appearance: string;
4763
+ width: string;
4764
+ outline: string;
4765
+ border: number;
4761
4766
  borderRadius: string;
4762
4767
  transitionProperty: string;
4763
4768
  transitionDuration: string;
@@ -4765,11 +4770,6 @@ declare const theme: {
4765
4770
  paddingX: number;
4766
4771
  height: string;
4767
4772
  fontSize: string;
4768
- backgroundColor: string;
4769
- appearance: string;
4770
- width: string;
4771
- outline: string;
4772
- border: number;
4773
4773
  } | {
4774
4774
  _hover: {
4775
4775
  outlineWidth: string;
@@ -4856,6 +4856,10 @@ declare const theme: {
4856
4856
  };
4857
4857
  outline: string;
4858
4858
  outlineColor: string;
4859
+ backgroundColor: string;
4860
+ appearance: string;
4861
+ width: string;
4862
+ border: number;
4859
4863
  borderRadius: string;
4860
4864
  transitionProperty: string;
4861
4865
  transitionDuration: string;
@@ -4863,10 +4867,6 @@ declare const theme: {
4863
4867
  paddingX: number;
4864
4868
  height: string;
4865
4869
  fontSize: string;
4866
- backgroundColor: string;
4867
- appearance: string;
4868
- width: string;
4869
- border: number;
4870
4870
  };
4871
4871
  element: {
4872
4872
  height: string;
@@ -5384,8 +5384,8 @@ declare const theme: {
5384
5384
  _active: {
5385
5385
  backgroundColor: string;
5386
5386
  };
5387
- color: string;
5388
5387
  backgroundColor: string;
5388
+ color: string;
5389
5389
  fontSize: string;
5390
5390
  fontWeight: string;
5391
5391
  marginX: number;
@@ -5687,9 +5687,7 @@ declare const theme: {
5687
5687
  field: {
5688
5688
  appearance: string;
5689
5689
  paddingTop: string;
5690
- "option, optgroup": {
5691
- background: string;
5692
- };
5690
+ "option, optgroup": {};
5693
5691
  _hover: {
5694
5692
  outlineWidth: string;
5695
5693
  outlineColor: string;
@@ -5777,6 +5775,10 @@ declare const theme: {
5777
5775
  outlineColor: string;
5778
5776
  outlineStyle: string;
5779
5777
  outlineOffset: string;
5778
+ backgroundColor: string;
5779
+ width: string;
5780
+ outline: string;
5781
+ border: number;
5780
5782
  borderRadius: string;
5781
5783
  transitionProperty: string;
5782
5784
  transitionDuration: string;
@@ -5784,16 +5786,10 @@ declare const theme: {
5784
5786
  paddingX: number;
5785
5787
  height: string;
5786
5788
  fontSize: string;
5787
- backgroundColor: string;
5788
- width: string;
5789
- outline: string;
5790
- border: number;
5791
5789
  } | {
5792
5790
  appearance: string;
5793
5791
  paddingTop: string;
5794
- "option, optgroup": {
5795
- background: string;
5796
- };
5792
+ "option, optgroup": {};
5797
5793
  _hover: {
5798
5794
  outlineWidth: string;
5799
5795
  outlineColor: string;
@@ -5879,6 +5875,9 @@ declare const theme: {
5879
5875
  };
5880
5876
  outline: string;
5881
5877
  outlineColor: string;
5878
+ backgroundColor: string;
5879
+ width: string;
5880
+ border: number;
5882
5881
  borderRadius: string;
5883
5882
  transitionProperty: string;
5884
5883
  transitionDuration: string;
@@ -5886,9 +5885,6 @@ declare const theme: {
5886
5885
  paddingX: number;
5887
5886
  height: string;
5888
5887
  fontSize: string;
5889
- backgroundColor: string;
5890
- width: string;
5891
- border: number;
5892
5888
  };
5893
5889
  icon: {
5894
5890
  width: string;
@@ -6034,11 +6030,9 @@ declare const theme: {
6034
6030
  outlineColor: string;
6035
6031
  outlineStyle: string;
6036
6032
  outlineOffset: string;
6037
- backgroundColor: string;
6038
6033
  } | {
6039
6034
  outline: string;
6040
6035
  outlineColor: string;
6041
- backgroundColor: string;
6042
6036
  };
6043
6037
  _checked: {
6044
6038
  outlineColor: string;
@@ -6082,6 +6076,7 @@ declare const theme: {
6082
6076
  backgroundColor: string;
6083
6077
  pointerEvents: string;
6084
6078
  };
6079
+ backgroundColor: string;
6085
6080
  _focusVisible: {
6086
6081
  outlineWidth: string;
6087
6082
  outlineColor: string;
@@ -6092,7 +6087,6 @@ declare const theme: {
6092
6087
  outlineColor: string;
6093
6088
  outlineStyle: string;
6094
6089
  outlineOffset: string;
6095
- backgroundColor: string;
6096
6090
  width: string[];
6097
6091
  height: string[];
6098
6092
  transitionProperty: string;
@@ -6103,11 +6097,9 @@ declare const theme: {
6103
6097
  outlineColor: string;
6104
6098
  outlineStyle: string;
6105
6099
  outlineOffset: string;
6106
- backgroundColor: string;
6107
6100
  } | {
6108
6101
  outline: string;
6109
6102
  outlineColor: string;
6110
- backgroundColor: string;
6111
6103
  };
6112
6104
  _checked: {
6113
6105
  outlineColor: string;
@@ -6151,6 +6143,7 @@ declare const theme: {
6151
6143
  backgroundColor: string;
6152
6144
  pointerEvents: string;
6153
6145
  };
6146
+ backgroundColor: string;
6154
6147
  _focusVisible: {
6155
6148
  outlineWidth: string;
6156
6149
  outlineColor: string;
@@ -6159,7 +6152,6 @@ declare const theme: {
6159
6152
  };
6160
6153
  outline: string;
6161
6154
  outlineColor: string;
6162
- backgroundColor: string;
6163
6155
  width: string[];
6164
6156
  height: string[];
6165
6157
  transitionProperty: string;
@@ -6619,6 +6611,10 @@ declare const theme: {
6619
6611
  outlineColor: string;
6620
6612
  outlineStyle: string;
6621
6613
  outlineOffset: string;
6614
+ backgroundColor: string;
6615
+ width: string;
6616
+ outline: string;
6617
+ border: number;
6622
6618
  borderRadius: string;
6623
6619
  transitionProperty: string;
6624
6620
  transitionDuration: string;
@@ -6626,10 +6622,6 @@ declare const theme: {
6626
6622
  paddingX: number;
6627
6623
  height: string;
6628
6624
  fontSize: string;
6629
- backgroundColor: string;
6630
- width: string;
6631
- outline: string;
6632
- border: number;
6633
6625
  } | {
6634
6626
  minHeight: string;
6635
6627
  verticalAlign: string;
@@ -6722,6 +6714,9 @@ declare const theme: {
6722
6714
  };
6723
6715
  outline: string;
6724
6716
  outlineColor: string;
6717
+ backgroundColor: string;
6718
+ width: string;
6719
+ border: number;
6725
6720
  borderRadius: string;
6726
6721
  transitionProperty: string;
6727
6722
  transitionDuration: string;
@@ -6729,9 +6724,6 @@ declare const theme: {
6729
6724
  paddingX: number;
6730
6725
  height: string;
6731
6726
  fontSize: string;
6732
- backgroundColor: string;
6733
- width: string;
6734
- border: number;
6735
6727
  }) | undefined;
6736
6728
  sizes?: {
6737
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
  /**
@@ -3174,6 +3178,7 @@ declare const theme: {
3174
3178
  outlineStyle: string;
3175
3179
  outlineOffset: string;
3176
3180
  };
3181
+ color: string;
3177
3182
  appearance: string;
3178
3183
  display: string;
3179
3184
  alignItems: string;
@@ -3511,14 +3516,12 @@ declare const theme: {
3511
3516
  base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
3512
3517
  container: {
3513
3518
  _hover: {
3514
- backgroundColor: string;
3515
3519
  outlineWidth: string;
3516
3520
  outlineColor: string;
3517
3521
  outlineStyle: string;
3518
3522
  outlineOffset: string;
3519
3523
  color: string;
3520
3524
  } | {
3521
- backgroundColor: string;
3522
3525
  outline: string;
3523
3526
  outlineColor: string;
3524
3527
  color: string;
@@ -3539,17 +3542,14 @@ declare const theme: {
3539
3542
  outlineColor: string;
3540
3543
  outlineStyle: string;
3541
3544
  outlineOffset: string;
3542
- backgroundColor: string;
3543
3545
  } | {
3544
3546
  _hover: {
3545
- backgroundColor: string;
3546
3547
  outlineWidth: string;
3547
3548
  outlineColor: string;
3548
3549
  outlineStyle: string;
3549
3550
  outlineOffset: string;
3550
3551
  color: string;
3551
3552
  } | {
3552
- backgroundColor: string;
3553
3553
  outline: string;
3554
3554
  outlineColor: string;
3555
3555
  color: string;
@@ -3568,7 +3568,6 @@ declare const theme: {
3568
3568
  color: string;
3569
3569
  outline: string;
3570
3570
  outlineColor: string;
3571
- backgroundColor: string;
3572
3571
  };
3573
3572
  };
3574
3573
  accent: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
@@ -3936,6 +3935,7 @@ declare const theme: {
3936
3935
  };
3937
3936
  outline: string;
3938
3937
  outlineColor: string;
3938
+ backgroundColor: string;
3939
3939
  };
3940
3940
  };
3941
3941
  ghost: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
@@ -4758,6 +4758,11 @@ declare const theme: {
4758
4758
  outlineColor: string;
4759
4759
  outlineStyle: string;
4760
4760
  outlineOffset: string;
4761
+ backgroundColor: string;
4762
+ appearance: string;
4763
+ width: string;
4764
+ outline: string;
4765
+ border: number;
4761
4766
  borderRadius: string;
4762
4767
  transitionProperty: string;
4763
4768
  transitionDuration: string;
@@ -4765,11 +4770,6 @@ declare const theme: {
4765
4770
  paddingX: number;
4766
4771
  height: string;
4767
4772
  fontSize: string;
4768
- backgroundColor: string;
4769
- appearance: string;
4770
- width: string;
4771
- outline: string;
4772
- border: number;
4773
4773
  } | {
4774
4774
  _hover: {
4775
4775
  outlineWidth: string;
@@ -4856,6 +4856,10 @@ declare const theme: {
4856
4856
  };
4857
4857
  outline: string;
4858
4858
  outlineColor: string;
4859
+ backgroundColor: string;
4860
+ appearance: string;
4861
+ width: string;
4862
+ border: number;
4859
4863
  borderRadius: string;
4860
4864
  transitionProperty: string;
4861
4865
  transitionDuration: string;
@@ -4863,10 +4867,6 @@ declare const theme: {
4863
4867
  paddingX: number;
4864
4868
  height: string;
4865
4869
  fontSize: string;
4866
- backgroundColor: string;
4867
- appearance: string;
4868
- width: string;
4869
- border: number;
4870
4870
  };
4871
4871
  element: {
4872
4872
  height: string;
@@ -5384,8 +5384,8 @@ declare const theme: {
5384
5384
  _active: {
5385
5385
  backgroundColor: string;
5386
5386
  };
5387
- color: string;
5388
5387
  backgroundColor: string;
5388
+ color: string;
5389
5389
  fontSize: string;
5390
5390
  fontWeight: string;
5391
5391
  marginX: number;
@@ -5687,9 +5687,7 @@ declare const theme: {
5687
5687
  field: {
5688
5688
  appearance: string;
5689
5689
  paddingTop: string;
5690
- "option, optgroup": {
5691
- background: string;
5692
- };
5690
+ "option, optgroup": {};
5693
5691
  _hover: {
5694
5692
  outlineWidth: string;
5695
5693
  outlineColor: string;
@@ -5777,6 +5775,10 @@ declare const theme: {
5777
5775
  outlineColor: string;
5778
5776
  outlineStyle: string;
5779
5777
  outlineOffset: string;
5778
+ backgroundColor: string;
5779
+ width: string;
5780
+ outline: string;
5781
+ border: number;
5780
5782
  borderRadius: string;
5781
5783
  transitionProperty: string;
5782
5784
  transitionDuration: string;
@@ -5784,16 +5786,10 @@ declare const theme: {
5784
5786
  paddingX: number;
5785
5787
  height: string;
5786
5788
  fontSize: string;
5787
- backgroundColor: string;
5788
- width: string;
5789
- outline: string;
5790
- border: number;
5791
5789
  } | {
5792
5790
  appearance: string;
5793
5791
  paddingTop: string;
5794
- "option, optgroup": {
5795
- background: string;
5796
- };
5792
+ "option, optgroup": {};
5797
5793
  _hover: {
5798
5794
  outlineWidth: string;
5799
5795
  outlineColor: string;
@@ -5879,6 +5875,9 @@ declare const theme: {
5879
5875
  };
5880
5876
  outline: string;
5881
5877
  outlineColor: string;
5878
+ backgroundColor: string;
5879
+ width: string;
5880
+ border: number;
5882
5881
  borderRadius: string;
5883
5882
  transitionProperty: string;
5884
5883
  transitionDuration: string;
@@ -5886,9 +5885,6 @@ declare const theme: {
5886
5885
  paddingX: number;
5887
5886
  height: string;
5888
5887
  fontSize: string;
5889
- backgroundColor: string;
5890
- width: string;
5891
- border: number;
5892
5888
  };
5893
5889
  icon: {
5894
5890
  width: string;
@@ -6034,11 +6030,9 @@ declare const theme: {
6034
6030
  outlineColor: string;
6035
6031
  outlineStyle: string;
6036
6032
  outlineOffset: string;
6037
- backgroundColor: string;
6038
6033
  } | {
6039
6034
  outline: string;
6040
6035
  outlineColor: string;
6041
- backgroundColor: string;
6042
6036
  };
6043
6037
  _checked: {
6044
6038
  outlineColor: string;
@@ -6082,6 +6076,7 @@ declare const theme: {
6082
6076
  backgroundColor: string;
6083
6077
  pointerEvents: string;
6084
6078
  };
6079
+ backgroundColor: string;
6085
6080
  _focusVisible: {
6086
6081
  outlineWidth: string;
6087
6082
  outlineColor: string;
@@ -6092,7 +6087,6 @@ declare const theme: {
6092
6087
  outlineColor: string;
6093
6088
  outlineStyle: string;
6094
6089
  outlineOffset: string;
6095
- backgroundColor: string;
6096
6090
  width: string[];
6097
6091
  height: string[];
6098
6092
  transitionProperty: string;
@@ -6103,11 +6097,9 @@ declare const theme: {
6103
6097
  outlineColor: string;
6104
6098
  outlineStyle: string;
6105
6099
  outlineOffset: string;
6106
- backgroundColor: string;
6107
6100
  } | {
6108
6101
  outline: string;
6109
6102
  outlineColor: string;
6110
- backgroundColor: string;
6111
6103
  };
6112
6104
  _checked: {
6113
6105
  outlineColor: string;
@@ -6151,6 +6143,7 @@ declare const theme: {
6151
6143
  backgroundColor: string;
6152
6144
  pointerEvents: string;
6153
6145
  };
6146
+ backgroundColor: string;
6154
6147
  _focusVisible: {
6155
6148
  outlineWidth: string;
6156
6149
  outlineColor: string;
@@ -6159,7 +6152,6 @@ declare const theme: {
6159
6152
  };
6160
6153
  outline: string;
6161
6154
  outlineColor: string;
6162
- backgroundColor: string;
6163
6155
  width: string[];
6164
6156
  height: string[];
6165
6157
  transitionProperty: string;
@@ -6619,6 +6611,10 @@ declare const theme: {
6619
6611
  outlineColor: string;
6620
6612
  outlineStyle: string;
6621
6613
  outlineOffset: string;
6614
+ backgroundColor: string;
6615
+ width: string;
6616
+ outline: string;
6617
+ border: number;
6622
6618
  borderRadius: string;
6623
6619
  transitionProperty: string;
6624
6620
  transitionDuration: string;
@@ -6626,10 +6622,6 @@ declare const theme: {
6626
6622
  paddingX: number;
6627
6623
  height: string;
6628
6624
  fontSize: string;
6629
- backgroundColor: string;
6630
- width: string;
6631
- outline: string;
6632
- border: number;
6633
6625
  } | {
6634
6626
  minHeight: string;
6635
6627
  verticalAlign: string;
@@ -6722,6 +6714,9 @@ declare const theme: {
6722
6714
  };
6723
6715
  outline: string;
6724
6716
  outlineColor: string;
6717
+ backgroundColor: string;
6718
+ width: string;
6719
+ border: number;
6725
6720
  borderRadius: string;
6726
6721
  transitionProperty: string;
6727
6722
  transitionDuration: string;
@@ -6729,9 +6724,6 @@ declare const theme: {
6729
6724
  paddingX: number;
6730
6725
  height: string;
6731
6726
  fontSize: string;
6732
- backgroundColor: string;
6733
- width: string;
6734
- border: number;
6735
6727
  }) | undefined;
6736
6728
  sizes?: {
6737
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
  }),
@@ -12167,6 +12168,7 @@ var init_card_select = __esm({
12167
12168
  alignItems: "center",
12168
12169
  transitionProperty: "outline",
12169
12170
  transitionDuration: "fast",
12171
+ ...baseText("default", props),
12170
12172
  ...focusVisibleStyles(props)
12171
12173
  },
12172
12174
  card: {
@@ -12409,13 +12411,11 @@ var init_choice_chip = __esm({
12409
12411
  variants: {
12410
12412
  base: (props) => ({
12411
12413
  container: {
12412
- ...baseBackground("default", props),
12413
12414
  ...baseBorder("default", props),
12414
12415
  ...baseText("default", props),
12415
12416
  _hover: {
12416
12417
  ...baseText("default", props),
12417
- ...baseBorder("hover", props),
12418
- ...baseBackground("hover", props)
12418
+ ...baseBorder("hover", props)
12419
12419
  },
12420
12420
  _active: {
12421
12421
  ...baseBackground("active", props),
@@ -12731,6 +12731,7 @@ var init_datepicker2 = __esm({
12731
12731
  }),
12732
12732
  floating: (props) => ({
12733
12733
  wrapper: {
12734
+ ...floatingBackground("default", props),
12734
12735
  ...floatingBorder("default", props),
12735
12736
  boxShadow: "sm",
12736
12737
  _hover: {
@@ -13488,7 +13489,6 @@ var init_input2 = __esm({
13488
13489
  width: "100%",
13489
13490
  outline: "none",
13490
13491
  border: 0,
13491
- ...baseBackground("default", props),
13492
13492
  borderRadius: "sm",
13493
13493
  transitionProperty: "common",
13494
13494
  transitionDuration: "fast",
@@ -13496,6 +13496,7 @@ var init_input2 = __esm({
13496
13496
  paddingX: 3,
13497
13497
  height: "54px",
13498
13498
  fontSize: "mobile.md",
13499
+ ...baseBackground("default", props),
13499
13500
  ...baseBorder("default", props),
13500
13501
  _hover: {
13501
13502
  ...baseBorder("hover", props)
@@ -14045,8 +14046,8 @@ var init_numeric_stepper = __esm({
14045
14046
  textAlign: "center",
14046
14047
  transitionProperty: "common",
14047
14048
  transitionDuration: "fast",
14048
- ...baseBackground("default", props),
14049
14049
  ...baseText("default", props),
14050
+ ...baseBackground("default", props),
14050
14051
  _disabled: {
14051
14052
  pointerEvents: "none",
14052
14053
  opacity: 0.5
@@ -14328,9 +14329,7 @@ var init_select = __esm({
14328
14329
  ...input_default.baseStyle(props).field,
14329
14330
  appearance: "none",
14330
14331
  paddingTop: "16px",
14331
- "option, optgroup": {
14332
- background: "white"
14333
- }
14332
+ "option, optgroup": {}
14334
14333
  },
14335
14334
  icon: {
14336
14335
  width: "30px",
@@ -14516,17 +14515,17 @@ var init_switch = __esm({
14516
14515
  height: [$height3.reference],
14517
14516
  transitionProperty: "common",
14518
14517
  transitionDuration: "fast",
14519
- ...baseBackground("default", props),
14520
14518
  ...baseBorder("default", props),
14521
14519
  ...focusVisibleStyles(props),
14520
+ ...baseBackground("default", props),
14522
14521
  _hover: {
14523
- ...baseBackground("hover", props),
14524
14522
  ...baseBorder("hover", props)
14525
14523
  },
14526
14524
  _checked: {
14527
14525
  ...brandBackground("default", props),
14528
14526
  outlineColor: "transparent",
14529
14527
  _hover: {
14528
+ ...baseBackground("default", props),
14530
14529
  ...brandBackground("hover", props)
14531
14530
  }
14532
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-VLNBMJ7I.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.0",
3
+ "version": "9.3.0",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.mjs",
6
6
  "types": "./dist/index.d.ts",
package/src/input/CardSelect.tsx CHANGED
@@ -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}
package/src/theme/components/button.ts CHANGED
@@ -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
  }),
package/src/theme/components/card-select.ts CHANGED
@@ -17,6 +17,7 @@ const config = helpers.defineMultiStyleConfig({
17
17
  alignItems: "center",
18
18
  transitionProperty: "outline",
19
19
  transitionDuration: "fast",
20
+ ...baseText("default", props),
20
21
  ...focusVisibleStyles(props),
21
22
  },
22
23
  card: {
package/src/theme/components/choice-chip.ts CHANGED
@@ -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),
package/src/theme/components/datepicker.ts CHANGED
@@ -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
 
package/src/theme/components/input.ts CHANGED
@@ -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: {
package/src/theme/components/numeric-stepper.ts CHANGED
@@ -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",
package/src/theme/components/select.ts CHANGED
@@ -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",
package/src/theme/components/switch.ts CHANGED
@@ -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
  },
package/src/theme/utils/base-utils.ts CHANGED
@@ -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