@vygruppen/spor-react 4.0.0 → 4.0.1

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 (12) hide show
  1. package/.turbo/turbo-build.log +10 -10
  2. package/CHANGELOG.md +6 -0
  3. package/dist/{CountryCodeSelect-7WPJ6BDU.mjs → CountryCodeSelect-HCQZVKWU.mjs} +1 -1
  4. package/dist/{chunk-B77QE6EZ.mjs → chunk-3SY4N6MP.mjs} +129 -38
  5. package/dist/index.d.mts +57 -14
  6. package/dist/index.d.ts +57 -14
  7. package/dist/index.js +128 -37
  8. package/dist/index.mjs +1 -1
  9. package/package.json +1 -1
  10. package/src/datepicker/DatePicker.tsx +1 -1
  11. package/src/datepicker/DateRangePicker.tsx +12 -11
  12. package/src/theme/components/datepicker.ts +122 -39
package/.turbo/turbo-build.log CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- > @vygruppen/spor-react@4.0.0 build
2
+ > @vygruppen/spor-react@4.0.1 build
3
3
  > tsup src/index.tsx --dts --treeshake --format cjs,esm
4
4
 
5
5
  CLI Building entry: src/index.tsx
@@ -10,13 +10,13 @@
10
10
  ESM Build start
11
11
  DTS Build start
12
12
  "toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/index.js".
13
- "toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/chunk-B77QE6EZ.mjs".
14
- CJS dist/index.js 547.83 KB
15
- CJS ⚡️ Build success in 4018ms
13
+ "toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/chunk-3SY4N6MP.mjs".
14
+ CJS dist/index.js 550.61 KB
15
+ CJS ⚡️ Build success in 3780ms
16
16
  ESM dist/index.mjs 2.10 KB
17
- ESM dist/CountryCodeSelect-7WPJ6BDU.mjs 1.19 KB
18
- ESM dist/chunk-B77QE6EZ.mjs 437.32 KB
19
- ESM ⚡️ Build success in 4019ms
20
- DTS ⚡️ Build success in 17985ms
21
- DTS dist/index.d.ts 262.81 KB
22
- DTS dist/index.d.mts 262.81 KB
17
+ ESM dist/CountryCodeSelect-HCQZVKWU.mjs 1.19 KB
18
+ ESM dist/chunk-3SY4N6MP.mjs 439.68 KB
19
+ ESM ⚡️ Build success in 3781ms
20
+ DTS ⚡️ Build success in 18223ms
21
+ DTS dist/index.d.ts 264.40 KB
22
+ DTS dist/index.d.mts 264.40 KB
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @vygruppen/spor-react
2
2
 
3
+ ## 4.0.1
4
+
5
+ ### Patch Changes
6
+
7
+ - 0450ca0a: DatePicker, DateRangePicker: Fix visual regressions
8
+
3
9
  ## 4.0.0
4
10
 
5
11
  ### Major Changes
package/dist/{CountryCodeSelect-7WPJ6BDU.mjs → CountryCodeSelect-HCQZVKWU.mjs} RENAMED
@@ -1,4 +1,4 @@
1
- import { createTexts, useTranslation, InfoSelect, Item } from './chunk-B77QE6EZ.mjs';
1
+ import { createTexts, useTranslation, InfoSelect, Item } from './chunk-3SY4N6MP.mjs';
2
2
  import React from 'react';
3
3
  import { getSupportedCallingCodes } from 'awesome-phonenumber';
4
4
 
package/dist/{chunk-B77QE6EZ.mjs → chunk-3SY4N6MP.mjs} RENAMED
@@ -3777,7 +3777,7 @@ var DatePicker = forwardRef$1(
3777
3777
  const onFieldClick = () => {
3778
3778
  state2.setOpen(true);
3779
3779
  };
3780
- const popoverContent = /* @__PURE__ */ React69__default.createElement(PopoverContent, { color: "darkGrey", boxShadow: "md", sx: styles3.calendar }, /* @__PURE__ */ React69__default.createElement(PopoverArrow, { sx: styles3.arrow }), /* @__PURE__ */ React69__default.createElement(PopoverBody, null, /* @__PURE__ */ React69__default.createElement(FocusLock, null, /* @__PURE__ */ React69__default.createElement(
3780
+ const popoverContent = /* @__PURE__ */ React69__default.createElement(PopoverContent, { color: "darkGrey", sx: styles3.calendarPopover }, /* @__PURE__ */ React69__default.createElement(PopoverArrow, { sx: styles3.arrow }), /* @__PURE__ */ React69__default.createElement(PopoverBody, null, /* @__PURE__ */ React69__default.createElement(FocusLock, null, /* @__PURE__ */ React69__default.createElement(
3781
3781
  Calendar,
3782
3782
  {
3783
3783
  ...calendarProps,
@@ -3884,7 +3884,7 @@ function DateRangePicker({
3884
3884
  const onFieldClick = () => {
3885
3885
  state2.setOpen(true);
3886
3886
  };
3887
- const popoverContent = /* @__PURE__ */ React69__default.createElement(PopoverContent, { sx: styles3.calendar, boxShadow: "md", maxWidth: "none" }, /* @__PURE__ */ React69__default.createElement(PopoverArrow, { sx: styles3.arrow }), /* @__PURE__ */ React69__default.createElement(PopoverBody, null, /* @__PURE__ */ React69__default.createElement(FocusLock, null, /* @__PURE__ */ React69__default.createElement(RangeCalendar, { variant: "base", ...calendarProps }))));
3887
+ const popoverContent = /* @__PURE__ */ React69__default.createElement(PopoverContent, { sx: styles3.calendarPopover, maxWidth: "none" }, /* @__PURE__ */ React69__default.createElement(PopoverArrow, { sx: styles3.arrow }), /* @__PURE__ */ React69__default.createElement(PopoverBody, null, /* @__PURE__ */ React69__default.createElement(FocusLock, null, /* @__PURE__ */ React69__default.createElement(RangeCalendar, { variant: "base", ...calendarProps }))));
3888
3888
  return /* @__PURE__ */ React69__default.createElement(I18nProvider, { locale }, /* @__PURE__ */ React69__default.createElement(Box, { position: "relative", display: "inline-flex", flexDirection: "column" }, props.label && /* @__PURE__ */ React69__default.createElement(FormLabel, { ...labelProps, sx: styles3.inputLabel }, props.label), /* @__PURE__ */ React69__default.createElement(
3889
3889
  Popover,
3890
3890
  {
@@ -3903,7 +3903,16 @@ function DateRangePicker({
3903
3903
  onKeyPress: handleEnterClick,
3904
3904
  minHeight
3905
3905
  },
3906
- variant && /* @__PURE__ */ React69__default.createElement(PopoverTrigger, null, /* @__PURE__ */ React69__default.createElement(CalendarTriggerButton, { paddingLeft: 1, paddingRight: 1, variant, ref, ...buttonProps })),
3906
+ variant && /* @__PURE__ */ React69__default.createElement(PopoverTrigger, null, /* @__PURE__ */ React69__default.createElement(
3907
+ CalendarTriggerButton,
3908
+ {
3909
+ paddingLeft: 1,
3910
+ paddingRight: 1,
3911
+ variant,
3912
+ ref,
3913
+ ...buttonProps
3914
+ }
3915
+ )),
3907
3916
  /* @__PURE__ */ React69__default.createElement(
3908
3917
  DateField,
3909
3918
  {
@@ -5101,7 +5110,7 @@ var texts14 = createTexts({
5101
5110
  sv: "Telefonnummer"
5102
5111
  }
5103
5112
  });
5104
- var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-7WPJ6BDU.mjs'));
5113
+ var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-HCQZVKWU.mjs'));
5105
5114
  var Radio = forwardRef((props, ref) => {
5106
5115
  return /* @__PURE__ */ React69__default.createElement(Radio$1, { ...props, ref });
5107
5116
  });
@@ -12210,6 +12219,7 @@ var parts4 = anatomy$1("datepicker").parts(
12210
12219
  "wrapper",
12211
12220
  "calendarTriggerButton",
12212
12221
  "arrow",
12222
+ "calendarPopover",
12213
12223
  "calendar",
12214
12224
  "weekdays",
12215
12225
  "weekend",
@@ -12234,36 +12244,10 @@ var config13 = helpers6.defineMultiStyleConfig({
12234
12244
  paddingY: 0.5,
12235
12245
  alignItems: "center",
12236
12246
  _hover: {
12237
- boxShadow: getBoxShadowString({
12238
- borderColor: mode("darkGrey", "white")(props),
12239
- borderWidth: 2
12240
- }),
12241
12247
  zIndex: zIndices2.docked
12242
12248
  },
12243
- _focusWithin: {
12244
- boxShadow: getBoxShadowString({
12245
- borderColor: mode("greenHaze", "azure")(props),
12246
- borderWidth: 2
12247
- })
12248
- },
12249
- _invalid: {
12250
- boxShadow: getBoxShadowString({
12251
- borderColor: "brightRed",
12252
- borderWidth: 2
12253
- })
12254
- },
12255
12249
  _disabled: {
12256
- pointerEvents: "none",
12257
- boxShadow: getBoxShadowString({
12258
- borderColor: mode("osloGrey", "whiteAlpha.400")(props),
12259
- borderWidth: 1
12260
- }),
12261
- _focus: {
12262
- boxShadow: getBoxShadowString({
12263
- borderColor: mode("osloGrey", "whiteAlpha.400")(props),
12264
- borderWidth: 1
12265
- })
12266
- }
12250
+ pointerEvents: "none"
12267
12251
  }
12268
12252
  },
12269
12253
  inputLabel: {
@@ -12325,12 +12309,13 @@ var config13 = helpers6.defineMultiStyleConfig({
12325
12309
  arrow: {
12326
12310
  [$arrowBackground.variable]: mode("white", colors.night)(props)
12327
12311
  },
12328
- calendar: {
12312
+ calendarPopover: {
12329
12313
  backgroundColor: mode("white", "night")(props),
12330
12314
  color: mode("darkGrey", "white")(props),
12331
12315
  boxShadow: getBoxShadowString({
12332
12316
  borderWidth: 2,
12333
- borderColor: mode("blackAlpha.200", "whiteAlpha.200")(props)
12317
+ borderColor: mode("blackAlpha.200", "whiteAlpha.200")(props),
12318
+ baseShadow: "md"
12334
12319
  })
12335
12320
  },
12336
12321
  weekdays: {
@@ -12414,6 +12399,41 @@ var config13 = helpers6.defineMultiStyleConfig({
12414
12399
  }),
12415
12400
  variants: {
12416
12401
  base: (props) => ({
12402
+ wrapper: {
12403
+ boxShadow: getBoxShadowString({
12404
+ borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props)
12405
+ }),
12406
+ _hover: {
12407
+ boxShadow: getBoxShadowString({
12408
+ borderColor: mode("darkGrey", "white")(props),
12409
+ borderWidth: 2
12410
+ })
12411
+ },
12412
+ _focusWithin: {
12413
+ boxShadow: getBoxShadowString({
12414
+ borderColor: mode("greenHaze", "azure")(props),
12415
+ borderWidth: 2
12416
+ })
12417
+ },
12418
+ _invalid: {
12419
+ boxShadow: getBoxShadowString({
12420
+ borderColor: "brightRed",
12421
+ borderWidth: 2
12422
+ })
12423
+ },
12424
+ _disabled: {
12425
+ boxShadow: getBoxShadowString({
12426
+ borderColor: mode("osloGrey", "whiteAlpha.400")(props),
12427
+ borderWidth: 1
12428
+ }),
12429
+ _focus: {
12430
+ boxShadow: getBoxShadowString({
12431
+ borderColor: mode("osloGrey", "whiteAlpha.400")(props),
12432
+ borderWidth: 1
12433
+ })
12434
+ }
12435
+ }
12436
+ },
12417
12437
  calendar: {
12418
12438
  backgroundColor: mode("white", "night")(props),
12419
12439
  color: mode("darkGrey", "white")(props),
@@ -12436,6 +12456,47 @@ var config13 = helpers6.defineMultiStyleConfig({
12436
12456
  }
12437
12457
  }),
12438
12458
  floating: (props) => ({
12459
+ wrapper: {
12460
+ boxShadow: getBoxShadowString({
12461
+ borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
12462
+ baseShadow: "sm"
12463
+ }),
12464
+ _hover: {
12465
+ boxShadow: getBoxShadowString({
12466
+ borderColor: mode("darkGrey", "white")(props),
12467
+ borderWidth: 2,
12468
+ baseShadow: "sm"
12469
+ })
12470
+ },
12471
+ _focusWithin: {
12472
+ boxShadow: getBoxShadowString({
12473
+ borderColor: mode("greenHaze", "azure")(props),
12474
+ borderWidth: 2,
12475
+ baseShadow: "sm"
12476
+ })
12477
+ },
12478
+ _invalid: {
12479
+ boxShadow: getBoxShadowString({
12480
+ borderColor: "brightRed",
12481
+ borderWidth: 2,
12482
+ baseShadow: "sm"
12483
+ })
12484
+ },
12485
+ _disabled: {
12486
+ boxShadow: getBoxShadowString({
12487
+ borderColor: mode("osloGrey", "whiteAlpha.400")(props),
12488
+ borderWidth: 1,
12489
+ baseShadow: "sm"
12490
+ }),
12491
+ _focus: {
12492
+ boxShadow: getBoxShadowString({
12493
+ borderColor: mode("osloGrey", "whiteAlpha.400")(props),
12494
+ borderWidth: 1,
12495
+ baseShadow: "sm"
12496
+ })
12497
+ }
12498
+ }
12499
+ },
12439
12500
  calendar: {
12440
12501
  backgroundColor: mode("white", "night")(props),
12441
12502
  color: mode("darkGrey", "white")(props),
@@ -12452,13 +12513,43 @@ var config13 = helpers6.defineMultiStyleConfig({
12452
12513
  }
12453
12514
  }),
12454
12515
  ghost: (props) => ({
12516
+ wrapper: {
12517
+ boxShadow: "none",
12518
+ _hover: {
12519
+ boxShadow: getBoxShadowString({
12520
+ borderColor: mode("darkGrey", "white")(props),
12521
+ borderWidth: 2
12522
+ })
12523
+ },
12524
+ _focusWithin: {
12525
+ boxShadow: getBoxShadowString({
12526
+ borderColor: mode("greenHaze", "azure")(props),
12527
+ borderWidth: 2
12528
+ })
12529
+ },
12530
+ _invalid: {
12531
+ boxShadow: getBoxShadowString({
12532
+ borderColor: "brightRed",
12533
+ borderWidth: 2
12534
+ })
12535
+ },
12536
+ _disabled: {
12537
+ boxShadow: getBoxShadowString({
12538
+ borderColor: mode("osloGrey", "whiteAlpha.400")(props),
12539
+ borderWidth: 1
12540
+ }),
12541
+ _focus: {
12542
+ boxShadow: getBoxShadowString({
12543
+ borderColor: mode("osloGrey", "whiteAlpha.400")(props),
12544
+ borderWidth: 1
12545
+ })
12546
+ }
12547
+ }
12548
+ },
12455
12549
  calendar: {
12456
12550
  backgroundColor: mode("white", "night")(props),
12457
12551
  color: mode("darkGrey", "white")(props),
12458
- boxShadow: getBoxShadowString({
12459
- borderWidth: 2,
12460
- borderColor: mode("", "")(props)
12461
- })
12552
+ boxShadow: "none"
12462
12553
  },
12463
12554
  dateCell: {
12464
12555
  color: mode("darkGrey", "white")(props),
@@ -12466,7 +12557,7 @@ var config13 = helpers6.defineMultiStyleConfig({
12466
12557
  backgroundColor: mode("seaMist", "pine")(props)
12467
12558
  },
12468
12559
  _selected: {
12469
- backgroundColor: mode("", "primaryGreen")(props),
12560
+ backgroundColor: mode("transparent", "primaryGreen")(props),
12470
12561
  color: "darkGrey"
12471
12562
  }
12472
12563
  }
package/dist/index.d.mts CHANGED
@@ -2874,21 +2874,10 @@ declare const theme: {
2874
2874
  paddingY: number;
2875
2875
  alignItems: string;
2876
2876
  _hover: {
2877
- boxShadow: string;
2878
2877
  zIndex: number;
2879
2878
  };
2880
- _focusWithin: {
2881
- boxShadow: string;
2882
- };
2883
- _invalid: {
2884
- boxShadow: string;
2885
- };
2886
2879
  _disabled: {
2887
2880
  pointerEvents: string;
2888
- boxShadow: string;
2889
- _focus: {
2890
- boxShadow: string;
2891
- };
2892
2881
  };
2893
2882
  };
2894
2883
  inputLabel: {
@@ -2932,7 +2921,7 @@ declare const theme: {
2932
2921
  arrow: {
2933
2922
  [x: string]: string;
2934
2923
  };
2935
- calendar: {
2924
+ calendarPopover: {
2936
2925
  backgroundColor: string;
2937
2926
  color: string;
2938
2927
  boxShadow: string;
@@ -2994,11 +2983,29 @@ declare const theme: {
2994
2983
  }) | undefined;
2995
2984
  sizes?: {
2996
2985
  [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
2997
- keys: ("dateCell" | "weekdays" | "weekend" | "calendar" | "calendarTriggerButton" | "dateTimeSegment" | "inputLabel" | "wrapper" | "arrow")[];
2986
+ keys: ("dateCell" | "weekdays" | "weekend" | "calendar" | "calendarTriggerButton" | "dateTimeSegment" | "inputLabel" | "wrapper" | "calendarPopover" | "arrow")[];
2998
2987
  }>;
2999
2988
  } | undefined;
3000
2989
  variants?: {
3001
2990
  base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
2991
+ wrapper: {
2992
+ boxShadow: string;
2993
+ _hover: {
2994
+ boxShadow: string;
2995
+ };
2996
+ _focusWithin: {
2997
+ boxShadow: string;
2998
+ };
2999
+ _invalid: {
3000
+ boxShadow: string;
3001
+ };
3002
+ _disabled: {
3003
+ boxShadow: string;
3004
+ _focus: {
3005
+ boxShadow: string;
3006
+ };
3007
+ };
3008
+ };
3002
3009
  calendar: {
3003
3010
  backgroundColor: string;
3004
3011
  color: string;
@@ -3015,6 +3022,24 @@ declare const theme: {
3015
3022
  };
3016
3023
  };
3017
3024
  floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
3025
+ wrapper: {
3026
+ boxShadow: string;
3027
+ _hover: {
3028
+ boxShadow: string;
3029
+ };
3030
+ _focusWithin: {
3031
+ boxShadow: string;
3032
+ };
3033
+ _invalid: {
3034
+ boxShadow: string;
3035
+ };
3036
+ _disabled: {
3037
+ boxShadow: string;
3038
+ _focus: {
3039
+ boxShadow: string;
3040
+ };
3041
+ };
3042
+ };
3018
3043
  calendar: {
3019
3044
  backgroundColor: string;
3020
3045
  color: string;
@@ -3028,6 +3053,24 @@ declare const theme: {
3028
3053
  };
3029
3054
  };
3030
3055
  ghost: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
3056
+ wrapper: {
3057
+ boxShadow: string;
3058
+ _hover: {
3059
+ boxShadow: string;
3060
+ };
3061
+ _focusWithin: {
3062
+ boxShadow: string;
3063
+ };
3064
+ _invalid: {
3065
+ boxShadow: string;
3066
+ };
3067
+ _disabled: {
3068
+ boxShadow: string;
3069
+ _focus: {
3070
+ boxShadow: string;
3071
+ };
3072
+ };
3073
+ };
3031
3074
  calendar: {
3032
3075
  backgroundColor: string;
3033
3076
  color: string;
@@ -3050,7 +3093,7 @@ declare const theme: {
3050
3093
  variant?: "base" | "ghost" | "floating" | undefined;
3051
3094
  colorScheme?: string | undefined;
3052
3095
  } | undefined;
3053
- parts: ("dateCell" | "weekdays" | "weekend" | "calendar" | "calendarTriggerButton" | "dateTimeSegment" | "inputLabel" | "wrapper" | "arrow")[];
3096
+ parts: ("dateCell" | "weekdays" | "weekend" | "calendar" | "calendarTriggerButton" | "dateTimeSegment" | "inputLabel" | "wrapper" | "calendarPopover" | "arrow")[];
3054
3097
  };
3055
3098
  Divider: {
3056
3099
  baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
package/dist/index.d.ts CHANGED
@@ -2874,21 +2874,10 @@ declare const theme: {
2874
2874
  paddingY: number;
2875
2875
  alignItems: string;
2876
2876
  _hover: {
2877
- boxShadow: string;
2878
2877
  zIndex: number;
2879
2878
  };
2880
- _focusWithin: {
2881
- boxShadow: string;
2882
- };
2883
- _invalid: {
2884
- boxShadow: string;
2885
- };
2886
2879
  _disabled: {
2887
2880
  pointerEvents: string;
2888
- boxShadow: string;
2889
- _focus: {
2890
- boxShadow: string;
2891
- };
2892
2881
  };
2893
2882
  };
2894
2883
  inputLabel: {
@@ -2932,7 +2921,7 @@ declare const theme: {
2932
2921
  arrow: {
2933
2922
  [x: string]: string;
2934
2923
  };
2935
- calendar: {
2924
+ calendarPopover: {
2936
2925
  backgroundColor: string;
2937
2926
  color: string;
2938
2927
  boxShadow: string;
@@ -2994,11 +2983,29 @@ declare const theme: {
2994
2983
  }) | undefined;
2995
2984
  sizes?: {
2996
2985
  [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
2997
- keys: ("dateCell" | "weekdays" | "weekend" | "calendar" | "calendarTriggerButton" | "dateTimeSegment" | "inputLabel" | "wrapper" | "arrow")[];
2986
+ keys: ("dateCell" | "weekdays" | "weekend" | "calendar" | "calendarTriggerButton" | "dateTimeSegment" | "inputLabel" | "wrapper" | "calendarPopover" | "arrow")[];
2998
2987
  }>;
2999
2988
  } | undefined;
3000
2989
  variants?: {
3001
2990
  base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
2991
+ wrapper: {
2992
+ boxShadow: string;
2993
+ _hover: {
2994
+ boxShadow: string;
2995
+ };
2996
+ _focusWithin: {
2997
+ boxShadow: string;
2998
+ };
2999
+ _invalid: {
3000
+ boxShadow: string;
3001
+ };
3002
+ _disabled: {
3003
+ boxShadow: string;
3004
+ _focus: {
3005
+ boxShadow: string;
3006
+ };
3007
+ };
3008
+ };
3002
3009
  calendar: {
3003
3010
  backgroundColor: string;
3004
3011
  color: string;
@@ -3015,6 +3022,24 @@ declare const theme: {
3015
3022
  };
3016
3023
  };
3017
3024
  floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
3025
+ wrapper: {
3026
+ boxShadow: string;
3027
+ _hover: {
3028
+ boxShadow: string;
3029
+ };
3030
+ _focusWithin: {
3031
+ boxShadow: string;
3032
+ };
3033
+ _invalid: {
3034
+ boxShadow: string;
3035
+ };
3036
+ _disabled: {
3037
+ boxShadow: string;
3038
+ _focus: {
3039
+ boxShadow: string;
3040
+ };
3041
+ };
3042
+ };
3018
3043
  calendar: {
3019
3044
  backgroundColor: string;
3020
3045
  color: string;
@@ -3028,6 +3053,24 @@ declare const theme: {
3028
3053
  };
3029
3054
  };
3030
3055
  ghost: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
3056
+ wrapper: {
3057
+ boxShadow: string;
3058
+ _hover: {
3059
+ boxShadow: string;
3060
+ };
3061
+ _focusWithin: {
3062
+ boxShadow: string;
3063
+ };
3064
+ _invalid: {
3065
+ boxShadow: string;
3066
+ };
3067
+ _disabled: {
3068
+ boxShadow: string;
3069
+ _focus: {
3070
+ boxShadow: string;
3071
+ };
3072
+ };
3073
+ };
3031
3074
  calendar: {
3032
3075
  backgroundColor: string;
3033
3076
  color: string;
@@ -3050,7 +3093,7 @@ declare const theme: {
3050
3093
  variant?: "base" | "ghost" | "floating" | undefined;
3051
3094
  colorScheme?: string | undefined;
3052
3095
  } | undefined;
3053
- parts: ("dateCell" | "weekdays" | "weekend" | "calendar" | "calendarTriggerButton" | "dateTimeSegment" | "inputLabel" | "wrapper" | "arrow")[];
3096
+ parts: ("dateCell" | "weekdays" | "weekend" | "calendar" | "calendarTriggerButton" | "dateTimeSegment" | "inputLabel" | "wrapper" | "calendarPopover" | "arrow")[];
3054
3097
  };
3055
3098
  Divider: {
3056
3099
  baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
package/dist/index.js CHANGED
@@ -3476,7 +3476,7 @@ var init_DatePicker = __esm({
3476
3476
  const onFieldClick = () => {
3477
3477
  state2.setOpen(true);
3478
3478
  };
3479
- const popoverContent = /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverContent, { color: "darkGrey", boxShadow: "md", sx: styles3.calendar }, /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverArrow, { sx: styles3.arrow }), /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverBody, null, /* @__PURE__ */ React69__namespace.default.createElement(react.FocusLock, null, /* @__PURE__ */ React69__namespace.default.createElement(
3479
+ const popoverContent = /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverContent, { color: "darkGrey", sx: styles3.calendarPopover }, /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverArrow, { sx: styles3.arrow }), /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverBody, null, /* @__PURE__ */ React69__namespace.default.createElement(react.FocusLock, null, /* @__PURE__ */ React69__namespace.default.createElement(
3480
3480
  Calendar,
3481
3481
  {
3482
3482
  ...calendarProps,
@@ -3591,7 +3591,7 @@ function DateRangePicker({
3591
3591
  const onFieldClick = () => {
3592
3592
  state2.setOpen(true);
3593
3593
  };
3594
- const popoverContent = /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverContent, { sx: styles3.calendar, boxShadow: "md", maxWidth: "none" }, /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverArrow, { sx: styles3.arrow }), /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverBody, null, /* @__PURE__ */ React69__namespace.default.createElement(react.FocusLock, null, /* @__PURE__ */ React69__namespace.default.createElement(RangeCalendar, { variant: "base", ...calendarProps }))));
3594
+ const popoverContent = /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverContent, { sx: styles3.calendarPopover, maxWidth: "none" }, /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverArrow, { sx: styles3.arrow }), /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverBody, null, /* @__PURE__ */ React69__namespace.default.createElement(react.FocusLock, null, /* @__PURE__ */ React69__namespace.default.createElement(RangeCalendar, { variant: "base", ...calendarProps }))));
3595
3595
  return /* @__PURE__ */ React69__namespace.default.createElement(reactAria.I18nProvider, { locale }, /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { position: "relative", display: "inline-flex", flexDirection: "column" }, props.label && /* @__PURE__ */ React69__namespace.default.createElement(react.FormLabel, { ...labelProps, sx: styles3.inputLabel }, props.label), /* @__PURE__ */ React69__namespace.default.createElement(
3596
3596
  react.Popover,
3597
3597
  {
@@ -3610,7 +3610,16 @@ function DateRangePicker({
3610
3610
  onKeyPress: handleEnterClick,
3611
3611
  minHeight
3612
3612
  },
3613
- variant && /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverTrigger, null, /* @__PURE__ */ React69__namespace.default.createElement(CalendarTriggerButton, { paddingLeft: 1, paddingRight: 1, variant, ref, ...buttonProps })),
3613
+ variant && /* @__PURE__ */ React69__namespace.default.createElement(react.PopoverTrigger, null, /* @__PURE__ */ React69__namespace.default.createElement(
3614
+ CalendarTriggerButton,
3615
+ {
3616
+ paddingLeft: 1,
3617
+ paddingRight: 1,
3618
+ variant,
3619
+ ref,
3620
+ ...buttonProps
3621
+ }
3622
+ )),
3614
3623
  /* @__PURE__ */ React69__namespace.default.createElement(
3615
3624
  DateField,
3616
3625
  {
@@ -13776,6 +13785,7 @@ var init_datepicker2 = __esm({
13776
13785
  "wrapper",
13777
13786
  "calendarTriggerButton",
13778
13787
  "arrow",
13788
+ "calendarPopover",
13779
13789
  "calendar",
13780
13790
  "weekdays",
13781
13791
  "weekend",
@@ -13800,36 +13810,10 @@ var init_datepicker2 = __esm({
13800
13810
  paddingY: 0.5,
13801
13811
  alignItems: "center",
13802
13812
  _hover: {
13803
- boxShadow: getBoxShadowString({
13804
- borderColor: themeTools.mode("darkGrey", "white")(props),
13805
- borderWidth: 2
13806
- }),
13807
13813
  zIndex: zIndices2.docked
13808
13814
  },
13809
- _focusWithin: {
13810
- boxShadow: getBoxShadowString({
13811
- borderColor: themeTools.mode("greenHaze", "azure")(props),
13812
- borderWidth: 2
13813
- })
13814
- },
13815
- _invalid: {
13816
- boxShadow: getBoxShadowString({
13817
- borderColor: "brightRed",
13818
- borderWidth: 2
13819
- })
13820
- },
13821
13815
  _disabled: {
13822
- pointerEvents: "none",
13823
- boxShadow: getBoxShadowString({
13824
- borderColor: themeTools.mode("osloGrey", "whiteAlpha.400")(props),
13825
- borderWidth: 1
13826
- }),
13827
- _focus: {
13828
- boxShadow: getBoxShadowString({
13829
- borderColor: themeTools.mode("osloGrey", "whiteAlpha.400")(props),
13830
- borderWidth: 1
13831
- })
13832
- }
13816
+ pointerEvents: "none"
13833
13817
  }
13834
13818
  },
13835
13819
  inputLabel: {
@@ -13891,12 +13875,13 @@ var init_datepicker2 = __esm({
13891
13875
  arrow: {
13892
13876
  [$arrowBackground.variable]: themeTools.mode("white", colors.night)(props)
13893
13877
  },
13894
- calendar: {
13878
+ calendarPopover: {
13895
13879
  backgroundColor: themeTools.mode("white", "night")(props),
13896
13880
  color: themeTools.mode("darkGrey", "white")(props),
13897
13881
  boxShadow: getBoxShadowString({
13898
13882
  borderWidth: 2,
13899
- borderColor: themeTools.mode("blackAlpha.200", "whiteAlpha.200")(props)
13883
+ borderColor: themeTools.mode("blackAlpha.200", "whiteAlpha.200")(props),
13884
+ baseShadow: "md"
13900
13885
  })
13901
13886
  },
13902
13887
  weekdays: {
@@ -13980,6 +13965,41 @@ var init_datepicker2 = __esm({
13980
13965
  }),
13981
13966
  variants: {
13982
13967
  base: (props) => ({
13968
+ wrapper: {
13969
+ boxShadow: getBoxShadowString({
13970
+ borderColor: themeTools.mode("blackAlpha.400", "whiteAlpha.400")(props)
13971
+ }),
13972
+ _hover: {
13973
+ boxShadow: getBoxShadowString({
13974
+ borderColor: themeTools.mode("darkGrey", "white")(props),
13975
+ borderWidth: 2
13976
+ })
13977
+ },
13978
+ _focusWithin: {
13979
+ boxShadow: getBoxShadowString({
13980
+ borderColor: themeTools.mode("greenHaze", "azure")(props),
13981
+ borderWidth: 2
13982
+ })
13983
+ },
13984
+ _invalid: {
13985
+ boxShadow: getBoxShadowString({
13986
+ borderColor: "brightRed",
13987
+ borderWidth: 2
13988
+ })
13989
+ },
13990
+ _disabled: {
13991
+ boxShadow: getBoxShadowString({
13992
+ borderColor: themeTools.mode("osloGrey", "whiteAlpha.400")(props),
13993
+ borderWidth: 1
13994
+ }),
13995
+ _focus: {
13996
+ boxShadow: getBoxShadowString({
13997
+ borderColor: themeTools.mode("osloGrey", "whiteAlpha.400")(props),
13998
+ borderWidth: 1
13999
+ })
14000
+ }
14001
+ }
14002
+ },
13983
14003
  calendar: {
13984
14004
  backgroundColor: themeTools.mode("white", "night")(props),
13985
14005
  color: themeTools.mode("darkGrey", "white")(props),
@@ -14002,6 +14022,47 @@ var init_datepicker2 = __esm({
14002
14022
  }
14003
14023
  }),
14004
14024
  floating: (props) => ({
14025
+ wrapper: {
14026
+ boxShadow: getBoxShadowString({
14027
+ borderColor: themeTools.mode("blackAlpha.400", "whiteAlpha.400")(props),
14028
+ baseShadow: "sm"
14029
+ }),
14030
+ _hover: {
14031
+ boxShadow: getBoxShadowString({
14032
+ borderColor: themeTools.mode("darkGrey", "white")(props),
14033
+ borderWidth: 2,
14034
+ baseShadow: "sm"
14035
+ })
14036
+ },
14037
+ _focusWithin: {
14038
+ boxShadow: getBoxShadowString({
14039
+ borderColor: themeTools.mode("greenHaze", "azure")(props),
14040
+ borderWidth: 2,
14041
+ baseShadow: "sm"
14042
+ })
14043
+ },
14044
+ _invalid: {
14045
+ boxShadow: getBoxShadowString({
14046
+ borderColor: "brightRed",
14047
+ borderWidth: 2,
14048
+ baseShadow: "sm"
14049
+ })
14050
+ },
14051
+ _disabled: {
14052
+ boxShadow: getBoxShadowString({
14053
+ borderColor: themeTools.mode("osloGrey", "whiteAlpha.400")(props),
14054
+ borderWidth: 1,
14055
+ baseShadow: "sm"
14056
+ }),
14057
+ _focus: {
14058
+ boxShadow: getBoxShadowString({
14059
+ borderColor: themeTools.mode("osloGrey", "whiteAlpha.400")(props),
14060
+ borderWidth: 1,
14061
+ baseShadow: "sm"
14062
+ })
14063
+ }
14064
+ }
14065
+ },
14005
14066
  calendar: {
14006
14067
  backgroundColor: themeTools.mode("white", "night")(props),
14007
14068
  color: themeTools.mode("darkGrey", "white")(props),
@@ -14018,13 +14079,43 @@ var init_datepicker2 = __esm({
14018
14079
  }
14019
14080
  }),
14020
14081
  ghost: (props) => ({
14082
+ wrapper: {
14083
+ boxShadow: "none",
14084
+ _hover: {
14085
+ boxShadow: getBoxShadowString({
14086
+ borderColor: themeTools.mode("darkGrey", "white")(props),
14087
+ borderWidth: 2
14088
+ })
14089
+ },
14090
+ _focusWithin: {
14091
+ boxShadow: getBoxShadowString({
14092
+ borderColor: themeTools.mode("greenHaze", "azure")(props),
14093
+ borderWidth: 2
14094
+ })
14095
+ },
14096
+ _invalid: {
14097
+ boxShadow: getBoxShadowString({
14098
+ borderColor: "brightRed",
14099
+ borderWidth: 2
14100
+ })
14101
+ },
14102
+ _disabled: {
14103
+ boxShadow: getBoxShadowString({
14104
+ borderColor: themeTools.mode("osloGrey", "whiteAlpha.400")(props),
14105
+ borderWidth: 1
14106
+ }),
14107
+ _focus: {
14108
+ boxShadow: getBoxShadowString({
14109
+ borderColor: themeTools.mode("osloGrey", "whiteAlpha.400")(props),
14110
+ borderWidth: 1
14111
+ })
14112
+ }
14113
+ }
14114
+ },
14021
14115
  calendar: {
14022
14116
  backgroundColor: themeTools.mode("white", "night")(props),
14023
14117
  color: themeTools.mode("darkGrey", "white")(props),
14024
- boxShadow: getBoxShadowString({
14025
- borderWidth: 2,
14026
- borderColor: themeTools.mode("", "")(props)
14027
- })
14118
+ boxShadow: "none"
14028
14119
  },
14029
14120
  dateCell: {
14030
14121
  color: themeTools.mode("darkGrey", "white")(props),
@@ -14032,7 +14123,7 @@ var init_datepicker2 = __esm({
14032
14123
  backgroundColor: themeTools.mode("seaMist", "pine")(props)
14033
14124
  },
14034
14125
  _selected: {
14035
- backgroundColor: themeTools.mode("", "primaryGreen")(props),
14126
+ backgroundColor: themeTools.mode("transparent", "primaryGreen")(props),
14036
14127
  color: "darkGrey"
14037
14128
  }
14038
14129
  }
package/dist/index.mjs CHANGED
@@ -1 +1 @@
1
- export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, 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, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, Portal, ProgressBar, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, 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, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardPopover, Wrap, WrapItem, createTexts, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToast, useToken, useTranslation } from './chunk-B77QE6EZ.mjs';
1
+ export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, 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, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, Portal, ProgressBar, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, 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, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardPopover, Wrap, WrapItem, createTexts, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToast, useToken, useTranslation } from './chunk-3SY4N6MP.mjs';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vygruppen/spor-react",
3
- "version": "4.0.0",
3
+ "version": "4.0.1",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.mjs",
6
6
  "types": "./dist/index.d.ts",
package/src/datepicker/DatePicker.tsx CHANGED
@@ -88,7 +88,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
88
88
  };
89
89
 
90
90
  const popoverContent = (
91
- <PopoverContent color="darkGrey" boxShadow="md" sx={styles.calendar}>
91
+ <PopoverContent color="darkGrey" sx={styles.calendarPopover}>
92
92
  <PopoverArrow sx={styles.arrow} />
93
93
  <PopoverBody>
94
94
  <FocusLock>
package/src/datepicker/DateRangePicker.tsx CHANGED
@@ -12,7 +12,6 @@ import {
12
12
  PopoverTrigger,
13
13
  Portal,
14
14
  ResponsiveValue,
15
- useBreakpointValue,
16
15
  useFormControlContext,
17
16
  useMultiStyleConfig,
18
17
  } from "@chakra-ui/react";
@@ -36,11 +35,7 @@ type DateRangePickerProps = AriaDateRangePickerProps<DateValue> &
36
35
  startName?: string;
37
36
  endLabel?: string;
38
37
  endName?: string;
39
- variant: ResponsiveValue<
40
- "base"
41
- | "floating"
42
- | "ghost"
43
- >;
38
+ variant: ResponsiveValue<"base" | "floating" | "ghost">;
44
39
  withPortal?: boolean;
45
40
  };
46
41
  /**
@@ -78,7 +73,7 @@ export function DateRangePicker({
78
73
  calendarProps,
79
74
  } = useDateRangePicker(props, state, ref);
80
75
 
81
- const styles = useMultiStyleConfig("Datepicker", {variant});
76
+ const styles = useMultiStyleConfig("Datepicker", { variant });
82
77
  const locale = useCurrentLocale();
83
78
 
84
79
  const handleEnterClick = (e: React.KeyboardEvent) => {
@@ -90,11 +85,11 @@ export function DateRangePicker({
90
85
  };
91
86
 
92
87
  const onFieldClick = () => {
93
- state.setOpen(true);
88
+ state.setOpen(true);
94
89
  };
95
90
 
96
91
  const popoverContent = (
97
- <PopoverContent sx={styles.calendar} boxShadow="md" maxWidth="none">
92
+ <PopoverContent sx={styles.calendarPopover} maxWidth="none">
98
93
  <PopoverArrow sx={styles.arrow} />
99
94
  <PopoverBody>
100
95
  <FocusLock>
@@ -130,7 +125,13 @@ export function DateRangePicker({
130
125
  >
131
126
  {variant && (
132
127
  <PopoverTrigger>
133
- <CalendarTriggerButton paddingLeft={1} paddingRight={1} variant={variant} ref={ref} {...buttonProps} />
128
+ <CalendarTriggerButton
129
+ paddingLeft={1}
130
+ paddingRight={1}
131
+ variant={variant}
132
+ ref={ref}
133
+ {...buttonProps}
134
+ />
134
135
  </PopoverTrigger>
135
136
  )}
136
137
  <DateField
@@ -139,7 +140,7 @@ export function DateRangePicker({
139
140
  label={props.startLabel}
140
141
  labelProps={labelProps}
141
142
  />
142
- <Box as="span" aria-hidden="true" paddingRight="2">
143
+ <Box as="span" aria-hidden="true" paddingRight="2">
143
144
  –
144
145
  </Box>
145
146
  <DateField
package/src/theme/components/datepicker.ts CHANGED
@@ -8,6 +8,7 @@ const parts = anatomy("datepicker").parts(
8
8
  "wrapper",
9
9
  "calendarTriggerButton",
10
10
  "arrow",
11
+ "calendarPopover",
11
12
  "calendar",
12
13
  "weekdays",
13
14
  "weekend",
@@ -34,36 +35,10 @@ const config = helpers.defineMultiStyleConfig({
34
35
  paddingY: 0.5,
35
36
  alignItems: "center",
36
37
  _hover: {
37
- boxShadow: getBoxShadowString({
38
- borderColor: mode("darkGrey", "white")(props),
39
- borderWidth: 2,
40
- }),
41
38
  zIndex: zIndices.docked,
42
39
  },
43
- _focusWithin: {
44
- boxShadow: getBoxShadowString({
45
- borderColor: mode("greenHaze", "azure")(props),
46
- borderWidth: 2,
47
- }),
48
- },
49
- _invalid: {
50
- boxShadow: getBoxShadowString({
51
- borderColor: "brightRed",
52
- borderWidth: 2,
53
- }),
54
- },
55
40
  _disabled: {
56
41
  pointerEvents: "none",
57
- boxShadow: getBoxShadowString({
58
- borderColor: mode("osloGrey", "whiteAlpha.400")(props),
59
- borderWidth: 1,
60
- }),
61
- _focus: {
62
- boxShadow: getBoxShadowString({
63
- borderColor: mode("osloGrey", "whiteAlpha.400")(props),
64
- borderWidth: 1,
65
- }),
66
- },
67
42
  },
68
43
  },
69
44
  inputLabel: {
@@ -123,17 +98,19 @@ const config = helpers.defineMultiStyleConfig({
123
98
  }),
124
99
  },
125
100
  },
126
- arrow: {
101
+ arrow: {
127
102
  [$arrowBackground.variable]: mode("white", colors.night)(props),
128
- },
129
- calendar: {
103
+ },
104
+ calendarPopover: {
130
105
  backgroundColor: mode("white", "night")(props),
131
106
  color: mode("darkGrey", "white")(props),
132
107
  boxShadow: getBoxShadowString({
133
108
  borderWidth: 2,
134
109
  borderColor: mode("blackAlpha.200", "whiteAlpha.200")(props),
110
+ baseShadow: "md",
135
111
  }),
136
112
  },
113
+
137
114
  weekdays: {
138
115
  color: mode("darkGrey", "white")(props),
139
116
  },
@@ -216,6 +193,41 @@ const config = helpers.defineMultiStyleConfig({
216
193
  }),
217
194
  variants: {
218
195
  base: (props) => ({
196
+ wrapper: {
197
+ boxShadow: getBoxShadowString({
198
+ borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
199
+ }),
200
+ _hover: {
201
+ boxShadow: getBoxShadowString({
202
+ borderColor: mode("darkGrey", "white")(props),
203
+ borderWidth: 2,
204
+ }),
205
+ },
206
+ _focusWithin: {
207
+ boxShadow: getBoxShadowString({
208
+ borderColor: mode("greenHaze", "azure")(props),
209
+ borderWidth: 2,
210
+ }),
211
+ },
212
+ _invalid: {
213
+ boxShadow: getBoxShadowString({
214
+ borderColor: "brightRed",
215
+ borderWidth: 2,
216
+ }),
217
+ },
218
+ _disabled: {
219
+ boxShadow: getBoxShadowString({
220
+ borderColor: mode("osloGrey", "whiteAlpha.400")(props),
221
+ borderWidth: 1,
222
+ }),
223
+ _focus: {
224
+ boxShadow: getBoxShadowString({
225
+ borderColor: mode("osloGrey", "whiteAlpha.400")(props),
226
+ borderWidth: 1,
227
+ }),
228
+ },
229
+ },
230
+ },
219
231
  calendar: {
220
232
  backgroundColor: mode("white", "night")(props),
221
233
  color: mode("darkGrey", "white")(props),
@@ -238,14 +250,55 @@ const config = helpers.defineMultiStyleConfig({
238
250
  },
239
251
  }),
240
252
  floating: (props) => ({
241
- calendar: {
242
- backgroundColor: mode("white", "night")(props),
243
- color: mode("darkGrey", "white")(props),
253
+ wrapper: {
254
+ boxShadow: getBoxShadowString({
255
+ borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
256
+ baseShadow: "sm",
257
+ }),
258
+ _hover: {
259
+ boxShadow: getBoxShadowString({
260
+ borderColor: mode("darkGrey", "white")(props),
261
+ borderWidth: 2,
262
+ baseShadow: "sm",
263
+ }),
264
+ },
265
+ _focusWithin: {
244
266
  boxShadow: getBoxShadowString({
245
- borderColor: mode("grey.200", "whiteAlpha.400")(props),
267
+ borderColor: mode("greenHaze", "azure")(props),
268
+ borderWidth: 2,
246
269
  baseShadow: "sm",
247
270
  }),
248
271
  },
272
+ _invalid: {
273
+ boxShadow: getBoxShadowString({
274
+ borderColor: "brightRed",
275
+ borderWidth: 2,
276
+ baseShadow: "sm",
277
+ }),
278
+ },
279
+ _disabled: {
280
+ boxShadow: getBoxShadowString({
281
+ borderColor: mode("osloGrey", "whiteAlpha.400")(props),
282
+ borderWidth: 1,
283
+ baseShadow: "sm",
284
+ }),
285
+ _focus: {
286
+ boxShadow: getBoxShadowString({
287
+ borderColor: mode("osloGrey", "whiteAlpha.400")(props),
288
+ borderWidth: 1,
289
+ baseShadow: "sm",
290
+ }),
291
+ },
292
+ },
293
+ },
294
+ calendar: {
295
+ backgroundColor: mode("white", "night")(props),
296
+ color: mode("darkGrey", "white")(props),
297
+ boxShadow: getBoxShadowString({
298
+ borderColor: mode("grey.200", "whiteAlpha.400")(props),
299
+ baseShadow: "sm",
300
+ }),
301
+ },
249
302
  dateCell: {
250
303
  color: mode("darkGrey", "white")(props),
251
304
  _hover: {
@@ -254,13 +307,43 @@ const config = helpers.defineMultiStyleConfig({
254
307
  },
255
308
  }),
256
309
  ghost: (props) => ({
310
+ wrapper: {
311
+ boxShadow: "none",
312
+ _hover: {
313
+ boxShadow: getBoxShadowString({
314
+ borderColor: mode("darkGrey", "white")(props),
315
+ borderWidth: 2,
316
+ }),
317
+ },
318
+ _focusWithin: {
319
+ boxShadow: getBoxShadowString({
320
+ borderColor: mode("greenHaze", "azure")(props),
321
+ borderWidth: 2,
322
+ }),
323
+ },
324
+ _invalid: {
325
+ boxShadow: getBoxShadowString({
326
+ borderColor: "brightRed",
327
+ borderWidth: 2,
328
+ }),
329
+ },
330
+ _disabled: {
331
+ boxShadow: getBoxShadowString({
332
+ borderColor: mode("osloGrey", "whiteAlpha.400")(props),
333
+ borderWidth: 1,
334
+ }),
335
+ _focus: {
336
+ boxShadow: getBoxShadowString({
337
+ borderColor: mode("osloGrey", "whiteAlpha.400")(props),
338
+ borderWidth: 1,
339
+ }),
340
+ },
341
+ },
342
+ },
257
343
  calendar: {
258
344
  backgroundColor: mode("white", "night")(props),
259
345
  color: mode("darkGrey", "white")(props),
260
- boxShadow: getBoxShadowString({
261
- borderWidth: 2,
262
- borderColor: mode("", "")(props),
263
- }),
346
+ boxShadow: "none",
264
347
  },
265
348
  dateCell: {
266
349
  color: mode("darkGrey", "white")(props),
@@ -268,8 +351,8 @@ const config = helpers.defineMultiStyleConfig({
268
351
  backgroundColor: mode("seaMist", "pine")(props),
269
352
  },
270
353
  _selected: {
271
- backgroundColor: mode("", "primaryGreen")(props),
272
- color: "darkGrey"
354
+ backgroundColor: mode("transparent", "primaryGreen")(props),
355
+ color: "darkGrey",
273
356
  },
274
357
  },
275
358
  }),