@vygruppen/spor-react 9.11.2 → 9.11.4

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.11.2 build
2
+ > @vygruppen/spor-react@9.11.4 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 525.54 KB
13
- CJS ⚡️ Build success in 2189ms
14
12
  ESM dist/index.mjs 2.17 KB
15
- ESM dist/CountryCodeSelect-KU4HQMG3.mjs 1.19 KB
16
- ESM dist/chunk-PA6EOPOZ.mjs 412.80 KB
17
- ESM ⚡️ Build success in 2189ms
18
- DTS ⚡️ Build success in 12957ms
19
- DTS dist/index.d.ts 344.17 KB
20
- DTS dist/index.d.mts 344.17 KB
13
+ ESM dist/CountryCodeSelect-5Z5ATLWK.mjs 1.19 KB
14
+ ESM dist/chunk-WCPDJEIZ.mjs 411.91 KB
15
+ ESM ⚡️ Build success in 2171ms
16
+ CJS dist/index.js 524.56 KB
17
+ CJS ⚡️ Build success in 2172ms
18
+ DTS ⚡️ Build success in 13269ms
19
+ DTS dist/index.d.ts 344.88 KB
20
+ DTS dist/index.d.mts 344.88 KB
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @vygruppen/spor-react
2
2
 
3
+ ## 9.11.4
4
+
5
+ ### Patch Changes
6
+
7
+ - 99eba82: Clean up colors with mode and px to rem
8
+
9
+ ## 9.11.3
10
+
11
+ ### Patch Changes
12
+
13
+ - c644d2e: Bump versions
14
+
3
15
  ## 9.11.2
4
16
 
5
17
  ### Patch Changes
@@ -1,4 +1,4 @@
1
- import { createTexts, useTranslation, InfoSelect, Item } from './chunk-PA6EOPOZ.mjs';
1
+ import { createTexts, useTranslation, InfoSelect, Item } from './chunk-WCPDJEIZ.mjs';
2
2
  import React from 'react';
3
3
  import { getSupportedCallingCodes } from 'awesome-phonenumber';
4
4
 
@@ -2041,7 +2041,7 @@ var texts4 = createTexts({
2041
2041
  sv: "Telefonnummer"
2042
2042
  }
2043
2043
  });
2044
- var LazyCountryCodeSelect = React87__default.lazy(() => import('./CountryCodeSelect-KU4HQMG3.mjs'));
2044
+ var LazyCountryCodeSelect = React87__default.lazy(() => import('./CountryCodeSelect-5Z5ATLWK.mjs'));
2045
2045
  var Radio = forwardRef((props, ref) => {
2046
2046
  return /* @__PURE__ */ React87__default.createElement(Radio$1, { ...props, ref });
2047
2047
  });
@@ -2924,44 +2924,20 @@ function CalendarCell({
2924
2924
  { passive: false, once: true }
2925
2925
  );
2926
2926
  }, []);
2927
- return /* @__PURE__ */ React87__default.createElement(
2927
+ return /* @__PURE__ */ React87__default.createElement(Box, { as: "td", ...cellProps, textAlign: "center", sx: styles3.cell }, /* @__PURE__ */ React87__default.createElement(
2928
2928
  Box,
2929
2929
  {
2930
- as: "td",
2931
- ...cellProps,
2932
- textAlign: "center",
2933
- sx: {
2934
- '&[aria-selected="true"] + [aria-selected="true"] > button': {
2935
- "&::before": {
2936
- content: '""',
2937
- display: "block",
2938
- width: "100%",
2939
- height: "100%",
2940
- backgroundColor: "darkTeal",
2941
- position: "absolute",
2942
- left: "-50%",
2943
- top: 0,
2944
- bottom: 0,
2945
- zIndex: -1
2946
- }
2947
- }
2948
- }
2930
+ as: "button",
2931
+ type: "button",
2932
+ ...buttonProps,
2933
+ ...stateProps,
2934
+ ref,
2935
+ sx: styles3.dateCell,
2936
+ hidden: isOutsideVisibleRange,
2937
+ width: "100%"
2949
2938
  },
2950
- /* @__PURE__ */ React87__default.createElement(
2951
- Box,
2952
- {
2953
- as: "button",
2954
- type: "button",
2955
- ...buttonProps,
2956
- ...stateProps,
2957
- ref,
2958
- sx: styles3.dateCell,
2959
- hidden: isOutsideVisibleRange,
2960
- width: "100%"
2961
- },
2962
- date.day
2963
- )
2964
- );
2939
+ date.day
2940
+ ));
2965
2941
  }
2966
2942
  var useCurrentLocale = () => {
2967
2943
  const { language } = useTranslation();
@@ -3116,11 +3092,10 @@ var CalendarNavigator = ({
3116
3092
  "aria-label": `${t2(texts12.previous)} ${t2(texts12[unit])}`
3117
3093
  }
3118
3094
  ), /* @__PURE__ */ React87__default.createElement(
3119
- Heading2,
3095
+ Box,
3120
3096
  {
3121
- as: "div",
3122
3097
  role: "heading",
3123
- variant: "sm",
3098
+ fontSize: "sm",
3124
3099
  fontWeight: "bold",
3125
3100
  flex: "1",
3126
3101
  textAlign: "center"
@@ -3249,11 +3224,7 @@ var DateTimeSegment = forwardRef$1(
3249
3224
  outline: "none",
3250
3225
  borderRadius: "xs",
3251
3226
  fontSize: ["mobile.sm", "desktop.sm"],
3252
- sx: styles3.dateTimeSegment,
3253
- _focus: {
3254
- backgroundColor: "darkTeal",
3255
- color: "white"
3256
- }
3227
+ sx: styles3.dateTimeSegment
3257
3228
  },
3258
3229
  isPaddable(segment.type) ? segment.text.padStart(2, "0") : segment.text
3259
3230
  );
@@ -10650,34 +10621,9 @@ var colorCombinations = {
10650
10621
  color: "darkGrey"
10651
10622
  }
10652
10623
  };
10624
+
10625
+ // src/theme/components/breadcrumb.ts
10653
10626
  var { defineMultiStyleConfig: defineMultiStyleConfig27, definePartsStyle: definePartsStyle27 } = createMultiStyleConfigHelpers(breadcrumbAnatomy.keys);
10654
- var baseStyleLink2 = defineStyle((props) => ({
10655
- transitionProperty: "common",
10656
- transitionDuration: "fast",
10657
- transitionTimingFunction: "ease-out",
10658
- color: "inherit",
10659
- textDecoration: "none",
10660
- textStyle: "xs",
10661
- paddingX: 0.5,
10662
- borderRadius: "xs",
10663
- "&:not([aria-current=page])": {
10664
- cursor: "pointer",
10665
- _hover: {
10666
- ...baseBackground("hover", props)
10667
- },
10668
- _active: {
10669
- ...baseBackground("active", props)
10670
- },
10671
- ...focusVisibleStyles(props)
10672
- }
10673
- }));
10674
- definePartsStyle27((props) => ({
10675
- link: baseStyleLink2(props),
10676
- list: {
10677
- flexWrap: "wrap",
10678
- alignItems: "flex-start"
10679
- }
10680
- }));
10681
10627
  var breadcrumb_default = defineMultiStyleConfig27({
10682
10628
  baseStyle: definePartsStyle27((props) => ({
10683
10629
  link: {
@@ -10716,16 +10662,10 @@ var breadcrumb_default = defineMultiStyleConfig27({
10716
10662
  link: {
10717
10663
  "&:not([aria-current=page])": {
10718
10664
  _hover: {
10719
- backgroundColor: mode(
10720
- "ghost.surface.hover.light",
10721
- "ghost.surface.hover.dark"
10722
- )(props)
10665
+ ...ghostBackground("hover", props)
10723
10666
  },
10724
10667
  _active: {
10725
- backgroundColor: mode(
10726
- "ghost.surface.active.light",
10727
- "ghost.surface.active.dark"
10728
- )(props)
10668
+ ...ghostBackground("active", props)
10729
10669
  }
10730
10670
  }
10731
10671
  }
@@ -10862,26 +10802,26 @@ var config6 = defineStyleConfig$1({
10862
10802
  lg: {
10863
10803
  minHeight: 8,
10864
10804
  minWidth: 8,
10865
- fontSize: "18px",
10805
+ fontSize: "sm",
10866
10806
  fontWeight: "bold"
10867
10807
  },
10868
10808
  md: {
10869
10809
  minHeight: 7,
10870
10810
  minWidth: 7,
10871
- fontSize: "18px",
10811
+ fontSize: "sm",
10872
10812
  fontWeight: "bold"
10873
10813
  },
10874
10814
  sm: {
10875
10815
  minHeight: 6,
10876
10816
  minWidth: 6,
10877
- fontSize: "16px",
10817
+ fontSize: "xs",
10878
10818
  fontWeight: "normal"
10879
10819
  },
10880
10820
  xs: {
10881
10821
  minHeight: 5,
10882
10822
  minWidth: 5,
10883
10823
  paddingY: 0.5,
10884
- fontSize: "16px",
10824
+ fontSize: "xs",
10885
10825
  fontWeight: "normal"
10886
10826
  }
10887
10827
  },
@@ -11470,9 +11410,10 @@ var config11 = helpers6.defineMultiStyleConfig({
11470
11410
  container: {
11471
11411
  display: "inline-flex",
11472
11412
  alignItems: "center",
11473
- fontSize: "16px",
11413
+ fontSize: "xs",
11474
11414
  cursor: "pointer",
11475
11415
  transitionProperty: "all",
11416
+ borderRadius: "xl",
11476
11417
  transitionDuration: "fast",
11477
11418
  _checked: {
11478
11419
  outlineColor: "transparent",
@@ -11572,42 +11513,38 @@ var config11 = helpers6.defineMultiStyleConfig({
11572
11513
  sizes: {
11573
11514
  xs: {
11574
11515
  container: {
11575
- borderRadius: "30px",
11576
11516
  _checked: {
11577
- borderRadius: "9px"
11517
+ borderRadius: "0.563rem"
11578
11518
  },
11579
- height: "30px",
11519
+ height: 5,
11580
11520
  paddingX: 1.5
11581
11521
  }
11582
11522
  },
11583
11523
  sm: {
11584
11524
  container: {
11585
- borderRadius: "30px",
11586
11525
  _checked: {
11587
- borderRadius: "12px"
11526
+ borderRadius: "sm"
11588
11527
  },
11589
- height: "36px",
11528
+ height: 6,
11590
11529
  paddingX: 2
11591
11530
  }
11592
11531
  },
11593
11532
  md: {
11594
11533
  container: {
11595
- borderRadius: "30px",
11596
11534
  _checked: {
11597
- borderRadius: "12px"
11535
+ borderRadius: "sm"
11598
11536
  },
11599
- height: "42px",
11537
+ height: 7,
11600
11538
  paddingX: 2
11601
11539
  }
11602
11540
  },
11603
11541
  lg: {
11604
11542
  container: {
11605
- borderRadius: "30px",
11606
11543
  _checked: {
11607
- borderRadius: "18px"
11544
+ borderRadius: "md"
11608
11545
  },
11609
- height: "54px",
11610
- px: 3
11546
+ height: 8,
11547
+ paddingX: 3
11611
11548
  }
11612
11549
  }
11613
11550
  },
@@ -11629,27 +11566,27 @@ var config12 = defineStyleConfig$1({
11629
11566
  fontWeight: "normal",
11630
11567
  ...focusVisibleStyles(props),
11631
11568
  _hover: {
11632
- backgroundColor: mode("seaMist", "whiteAlpha.100")(props),
11569
+ ...ghostBackground("hover", props),
11633
11570
  _disabled: {
11634
11571
  color: "dimGrey"
11635
11572
  }
11636
11573
  },
11637
11574
  _active: {
11638
- backgroundColor: mode("mint", "whiteAlpha.200")(props)
11575
+ ...ghostBackground("active", props)
11639
11576
  }
11640
11577
  }),
11641
11578
  sizes: {
11642
11579
  lg: {
11643
11580
  [$size6.variable]: "40px",
11644
- fontSize: "16px"
11581
+ fontSize: "xs"
11645
11582
  },
11646
11583
  md: {
11647
11584
  [$size6.variable]: "32px",
11648
- fontSize: "12px"
11585
+ fontSize: "0.75rem"
11649
11586
  },
11650
11587
  sm: {
11651
11588
  [$size6.variable]: "24px",
11652
- fontSize: "10px"
11589
+ fontSize: "0.625rem"
11653
11590
  }
11654
11591
  },
11655
11592
  defaultProps: {
@@ -11679,7 +11616,8 @@ var parts5 = anatomy$1("datepicker").parts(
11679
11616
  "weekend",
11680
11617
  "dateCell",
11681
11618
  "inputLabel",
11682
- "dateTimeSegment"
11619
+ "dateTimeSegment",
11620
+ "cell"
11683
11621
  );
11684
11622
  var $arrowBackground = cssVar$1("popper-arrow-bg");
11685
11623
  var helpers7 = createMultiStyleConfigHelpers$1(parts5.keys);
@@ -11714,7 +11652,11 @@ var config14 = helpers7.defineMultiStyleConfig({
11714
11652
  color: mode(
11715
11653
  "darkGrey",
11716
11654
  props.isPlaceholder ? "whiteAlpha.400" : "white"
11717
- )(props)
11655
+ )(props),
11656
+ _focus: {
11657
+ ...brandBackground("hover", props),
11658
+ color: "white"
11659
+ }
11718
11660
  },
11719
11661
  calendarTriggerButton: {
11720
11662
  width: 8,
@@ -11755,6 +11697,22 @@ var config14 = helpers7.defineMultiStyleConfig({
11755
11697
  weekend: {
11756
11698
  ...accentText("default", props)
11757
11699
  },
11700
+ cell: {
11701
+ '&[aria-selected="true"] + [aria-selected="true"] > button': {
11702
+ "&::before": {
11703
+ content: '""',
11704
+ display: "block",
11705
+ width: "100%",
11706
+ height: "100%",
11707
+ position: "absolute",
11708
+ left: "-50%",
11709
+ top: 0,
11710
+ bottom: 0,
11711
+ zIndex: -1,
11712
+ ...brandBackground("default", props)
11713
+ }
11714
+ }
11715
+ },
11758
11716
  dateCell: {
11759
11717
  ...ghostBackground("default", props),
11760
11718
  ...baseText("default", props),
@@ -11841,7 +11799,7 @@ var config14 = helpers7.defineMultiStyleConfig({
11841
11799
  }
11842
11800
  });
11843
11801
  var datepicker_default = config14;
11844
- var baseStyle44 = defineStyle((props) => ({
11802
+ var baseStyle43 = defineStyle((props) => ({
11845
11803
  borderColor: mode("blackAlpha.300", "whiteAlpha.300")(props)
11846
11804
  }));
11847
11805
  var variantSolid5 = defineStyle({
@@ -11869,7 +11827,7 @@ var sizes25 = {
11869
11827
  }
11870
11828
  };
11871
11829
  var divider_default = defineStyleConfig({
11872
- baseStyle: baseStyle44,
11830
+ baseStyle: baseStyle43,
11873
11831
  variants: variants14,
11874
11832
  sizes: sizes25,
11875
11833
  defaultProps: {
@@ -12150,7 +12108,7 @@ var config19 = helpers11.defineMultiStyleConfig({
12150
12108
  display: "flex",
12151
12109
  appearance: "none",
12152
12110
  width: "100%",
12153
- height: "54px",
12111
+ height: 8,
12154
12112
  borderTopRadius: "sm",
12155
12113
  borderBottomRadius: props.isOpen ? 0 : "sm",
12156
12114
  paddingY: 1.5,
@@ -12518,7 +12476,7 @@ var config22 = helpers14.defineMultiStyleConfig({
12518
12476
  transitionDuration: "fast",
12519
12477
  position: "relative",
12520
12478
  paddingX: 3,
12521
- height: "54px",
12479
+ height: 8,
12522
12480
  fontSize: "mobile.md",
12523
12481
  ...baseBackground("default", props),
12524
12482
  ...baseBorder("default", props),
@@ -12556,7 +12514,7 @@ var config22 = helpers14.defineMultiStyleConfig({
12556
12514
  cursor: "text"
12557
12515
  },
12558
12516
  "&:not(:placeholder-shown)": {
12559
- paddingTop: "16px",
12517
+ paddingTop: "1rem",
12560
12518
  "& + label": {
12561
12519
  transform: "scale(0.825) translateY(-10px)"
12562
12520
  }
@@ -12765,7 +12723,7 @@ var link_default = config24;
12765
12723
 
12766
12724
  // src/theme/components/list.ts
12767
12725
  var { defineMultiStyleConfig: defineMultiStyleConfig28, definePartsStyle: definePartsStyle28 } = createMultiStyleConfigHelpers(listAnatomy.keys);
12768
- var baseStyle45 = definePartsStyle28({
12726
+ var baseStyle44 = definePartsStyle28({
12769
12727
  container: {
12770
12728
  fontSize: ["mobile.sm", "desktop.sm"]
12771
12729
  },
@@ -12779,7 +12737,7 @@ var baseStyle45 = definePartsStyle28({
12779
12737
  }
12780
12738
  });
12781
12739
  var list_default = defineMultiStyleConfig28({
12782
- baseStyle: baseStyle45
12740
+ baseStyle: baseStyle44
12783
12741
  });
12784
12742
  var parts11 = anatomy("ListBox").parts(
12785
12743
  "container",
@@ -13193,8 +13151,10 @@ var config31 = helpers22.defineMultiStyleConfig({
13193
13151
  },
13194
13152
  background: {
13195
13153
  display: "flex",
13196
- backgroundColor: mode("coralGreen", "pine")(props),
13197
- // TODO: Replace with semantic tokens
13154
+ backgroundColor: mode(
13155
+ "brand.surface.default.dark",
13156
+ "brand.surface.default.light"
13157
+ )(props),
13198
13158
  borderRadius: "sm",
13199
13159
  justifyContent: "flex-start",
13200
13160
  marginX: "auto"
@@ -13399,7 +13359,10 @@ var config34 = helpers25.defineMultiStyleConfig({
13399
13359
  ...baseText("disabled", props)
13400
13360
  },
13401
13361
  _checked: {
13402
- color: mode("pine", "coralGreen")(props),
13362
+ color: mode(
13363
+ "brand.surface.default.light",
13364
+ "brand.surface.default.dark"
13365
+ )(props),
13403
13366
  borderColor: "currentColor",
13404
13367
  _before: {
13405
13368
  content: `""`,
@@ -13446,17 +13409,17 @@ var config35 = helpers26.defineMultiStyleConfig({
13446
13409
  field: {
13447
13410
  ...input_default.baseStyle(props).field,
13448
13411
  appearance: "none",
13449
- paddingTop: "16px",
13412
+ paddingTop: "1rem",
13450
13413
  "option, optgroup": {}
13451
13414
  },
13452
13415
  icon: {
13453
- width: "30px",
13454
- height: "30px",
13416
+ width: 5,
13417
+ height: 5,
13455
13418
  insetEnd: "0.5rem",
13456
13419
  position: "relative",
13457
13420
  color: "currentColor",
13458
13421
  strokeLinecap: "round",
13459
- fontSize: "1.125rem",
13422
+ fontSize: "sm",
13460
13423
  _disabled: {
13461
13424
  ...baseText("disabled", props)
13462
13425
  }
@@ -13911,7 +13874,7 @@ var config40 = helpers30.defineMultiStyleConfig({
13911
13874
  sizes: {
13912
13875
  xs: {
13913
13876
  tablist: {
13914
- height: "30px",
13877
+ height: 5,
13915
13878
  padding: "2px"
13916
13879
  },
13917
13880
  tab: {
@@ -13921,7 +13884,7 @@ var config40 = helpers30.defineMultiStyleConfig({
13921
13884
  },
13922
13885
  sm: {
13923
13886
  tablist: {
13924
- height: "36px",
13887
+ height: 6,
13925
13888
  padding: 0.5
13926
13889
  },
13927
13890
  tab: {
@@ -13930,7 +13893,7 @@ var config40 = helpers30.defineMultiStyleConfig({
13930
13893
  },
13931
13894
  md: {
13932
13895
  tablist: {
13933
- height: "42px",
13896
+ height: 7,
13934
13897
  padding: 0.5
13935
13898
  },
13936
13899
  tab: {
@@ -13940,7 +13903,7 @@ var config40 = helpers30.defineMultiStyleConfig({
13940
13903
  },
13941
13904
  lg: {
13942
13905
  tablist: {
13943
- height: "54px",
13906
+ height: 8,
13944
13907
  padding: "4px"
13945
13908
  },
13946
13909
  tab: {
@@ -14092,6 +14055,7 @@ var config44 = defineStyleConfig$1({
14092
14055
  }
14093
14056
  }),
14094
14057
  accent: (props) => ({
14058
+ ...accentText("default", props),
14095
14059
  ...accentBackground("default", props),
14096
14060
  boxShadow: "sm",
14097
14061
  _hover: {