@vygruppen/spor-react 10.8.1 → 10.9.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 (15) hide show
  1. package/.turbo/turbo-build.log +9 -9
  2. package/CHANGELOG.md +17 -0
  3. package/dist/{CountryCodeSelect-YWEVYR4L.mjs → CountryCodeSelect-3FKJ54VO.mjs} +1 -1
  4. package/dist/{chunk-RPFFDHUW.mjs → chunk-HAWOB4BD.mjs} +71 -21
  5. package/dist/index.d.mts +71 -32
  6. package/dist/index.d.ts +71 -32
  7. package/dist/index.js +70 -20
  8. package/dist/index.mjs +1 -1
  9. package/package.json +2 -2
  10. package/src/alert/AlertIcon.tsx +10 -1
  11. package/src/alert/BaseAlert.tsx +2 -1
  12. package/src/alert/ServiceAlert.tsx +10 -6
  13. package/src/input/PhoneNumberInput.tsx +2 -3
  14. package/src/theme/components/alert-service.ts +46 -10
  15. package/src/theme/components/alert.ts +5 -0
package/.turbo/turbo-build.log CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- > @vygruppen/spor-react@10.8.1 build
2
+ > @vygruppen/spor-react@10.9.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 539.46 KB
13
- CJS ⚡️ Build success in 2268ms
14
12
  ESM dist/index.mjs 2.16 KB
15
- ESM dist/CountryCodeSelect-YWEVYR4L.mjs 1.22 KB
16
- ESM dist/chunk-RPFFDHUW.mjs 425.97 KB
17
- ESM ⚡️ Build success in 2269ms
18
- DTS ⚡️ Build success in 16086ms
19
- DTS dist/index.d.ts 340.79 KB
20
- DTS dist/index.d.mts 340.79 KB
13
+ ESM dist/CountryCodeSelect-3FKJ54VO.mjs 1.22 KB
14
+ ESM dist/chunk-HAWOB4BD.mjs 427.04 KB
15
+ ESM ⚡️ Build success in 2218ms
16
+ CJS dist/index.js 540.72 KB
17
+ CJS ⚡️ Build success in 2219ms
18
+ DTS ⚡️ Build success in 19257ms
19
+ DTS dist/index.d.ts 342.08 KB
20
+ DTS dist/index.d.mts 342.08 KB
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @vygruppen/spor-react
2
2
 
3
+ ## 10.9.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 288d5e4: new variant for ServiceAlert
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies [288d5e4]
12
+ - @vygruppen/spor-icon-react@3.12.0
13
+
14
+ ## 10.8.2
15
+
16
+ ### Patch Changes
17
+
18
+ - 96f0dca: Fixed buggy label logic for PhoneNumberInput
19
+
3
20
  ## 10.8.1
4
21
 
5
22
  ### Patch Changes
package/dist/{CountryCodeSelect-YWEVYR4L.mjs → CountryCodeSelect-3FKJ54VO.mjs} RENAMED
@@ -1,4 +1,4 @@
1
- import { createTexts, useTranslation, InfoSelect, Item } from './chunk-RPFFDHUW.mjs';
1
+ import { createTexts, useTranslation, InfoSelect, Item } from './chunk-HAWOB4BD.mjs';
2
2
  import React from 'react';
3
3
  import { getSupportedCallingCodes } from 'awesome-phonenumber';
4
4
 
package/dist/{chunk-RPFFDHUW.mjs → chunk-HAWOB4BD.mjs} RENAMED
@@ -12,6 +12,7 @@ export { Item, Section } from 'react-stately';
12
12
  import { inlineLoaderColorData, spinnerColorData, contentLoaderData, fullScreenLoaderWhiteData, inlineLoaderDarkData, fullScreenLoaderBlackData, inlineLoaderLightData, spinnerLightData, spinnerDarkData } from '@vygruppen/spor-loader';
13
13
  import { useLottie } from 'lottie-react';
14
14
  import { motion } from 'framer-motion';
15
+ import { ServiceFill24Icon } from '@vygruppen/spor-icon-react/tmp';
15
16
  import { createCalendar, GregorianCalendar, parseTime, endOfMonth, getWeeksInMonth, getLocalTimeZone, isSameMonth, isToday } from '@internationalized/date';
16
17
  export { Time } from '@internationalized/date';
17
18
  import { useSwipeable } from 'react-swipeable';
@@ -1760,7 +1761,7 @@ var PhoneNumberInput = forwardRef(
1760
1761
  ...boxProps
1761
1762
  }, ref) => {
1762
1763
  const { t: t2 } = useTranslation();
1763
- const label = externalLabel ?? isOptional ? t2(texts4.phoneNumberOptional) : t2(texts4.phoneNumber);
1764
+ const label = externalLabel ?? (isOptional ? t2(texts4.phoneNumberOptional) : t2(texts4.phoneNumber));
1764
1765
  const [value, onChange] = useControllableState({
1765
1766
  value: externalValue,
1766
1767
  onChange: externalOnChange,
@@ -1841,7 +1842,7 @@ var texts4 = createTexts({
1841
1842
  sv: "Landskod"
1842
1843
  }
1843
1844
  });
1844
- var LazyCountryCodeSelect = React85__default.lazy(() => import('./CountryCodeSelect-YWEVYR4L.mjs'));
1845
+ var LazyCountryCodeSelect = React85__default.lazy(() => import('./CountryCodeSelect-3FKJ54VO.mjs'));
1845
1846
  var Radio = forwardRef((props, ref) => {
1846
1847
  return /* @__PURE__ */ React85__default.createElement(Radio$1, { ...props, ref });
1847
1848
  });
@@ -2715,8 +2716,10 @@ var getIcon2 = (variant) => {
2715
2716
  return AltTransportOutline24Icon;
2716
2717
  case "error":
2717
2718
  return ErrorOutline24Icon;
2718
- case "service":
2719
+ case "global-deviation":
2719
2720
  return WarningFill24Icon;
2721
+ case "service":
2722
+ return ServiceFill24Icon;
2720
2723
  }
2721
2724
  };
2722
2725
  var texts10 = createTexts({
@@ -2755,6 +2758,12 @@ var texts10 = createTexts({
2755
2758
  nn: "Driftsmelding",
2756
2759
  sv: "Servicemeddelande",
2757
2760
  en: "Service message"
2761
+ },
2762
+ "global-deviation": {
2763
+ nb: "Trafikkmelding",
2764
+ nn: "Trafikkmelding",
2765
+ sv: "Trafikmeddelande",
2766
+ en: "Traffic announcement"
2758
2767
  }
2759
2768
  });
2760
2769
  var BaseAlert = ({
@@ -2862,7 +2871,7 @@ var StaticAlert = ({
2862
2871
  return /* @__PURE__ */ React85__default.createElement(BaseAlert, { ...props }, /* @__PURE__ */ React85__default.createElement(AlertIcon, { variant: props.variant }), /* @__PURE__ */ React85__default.createElement(Flex, { direction: "column", gap: title ? 2 : void 0, textAlign: "left" }, title && /* @__PURE__ */ React85__default.createElement(Box, { fontWeight: "bold" }, title), /* @__PURE__ */ React85__default.createElement(Box, null, children)));
2863
2872
  };
2864
2873
  var ServiceAlert = ({
2865
- variant,
2874
+ variant = "service",
2866
2875
  children,
2867
2876
  title,
2868
2877
  notification,
@@ -2873,9 +2882,8 @@ var ServiceAlert = ({
2873
2882
  },
2874
2883
  ...boxProps
2875
2884
  }) => {
2876
- variant = "service";
2877
2885
  const { t: t2 } = useTranslation();
2878
- const styles3 = useMultiStyleConfig("AlertService");
2886
+ const styles3 = useMultiStyleConfig("AlertService", { variant });
2879
2887
  return /* @__PURE__ */ React85__default.createElement(
2880
2888
  BaseAlert,
2881
2889
  {
@@ -2921,12 +2929,11 @@ var ServiceAlert = ({
2921
2929
  overflow: "hidden",
2922
2930
  WebkitLineClamp: "1",
2923
2931
  WebkitBoxOrient: "vertical"
2924
- },
2925
- color: "white"
2932
+ }
2926
2933
  },
2927
2934
  title
2928
2935
  )),
2929
- /* @__PURE__ */ React85__default.createElement(Flex, { alignItems: "center" }, notification && /* @__PURE__ */ React85__default.createElement(Text, { sx: styles3.notificationText }, t2(texts12.notification(notification))), /* @__PURE__ */ React85__default.createElement(AccordionIcon, { color: "white" }))
2936
+ /* @__PURE__ */ React85__default.createElement(Flex, { alignItems: "center" }, notification && /* @__PURE__ */ React85__default.createElement(Text, { sx: styles3.notificationText }, t2(texts12.notification(notification))), /* @__PURE__ */ React85__default.createElement(AccordionIcon, null))
2930
2937
  )
2931
2938
  )), /* @__PURE__ */ React85__default.createElement(AccordionPanel, { sx: styles3.serviceMessageContent }, /* @__PURE__ */ React85__default.createElement(Stack$1, { flexDirection: "row", justifyContent: "center", width: "100%" }, /* @__PURE__ */ React85__default.createElement(
2932
2939
  Stack$1,
@@ -2940,7 +2947,8 @@ var ServiceAlert = ({
2940
2947
  sx: {
2941
2948
  p: {
2942
2949
  padding: "0.8rem 0",
2943
- borderBottom: "0.08rem solid rgba(255, 255, 255, 0.4)"
2950
+ borderBottom: "0.08rem solid",
2951
+ borderColor: variant === "global-deviation" ? "blackAlpha.400" : "whiteAlpha.400"
2944
2952
  },
2945
2953
  "p:last-child": {
2946
2954
  borderBottom: "none"
@@ -10761,6 +10769,11 @@ var config3 = helpers2.defineMultiStyleConfig({
10761
10769
  backgroundColor: "banana"
10762
10770
  }
10763
10771
  },
10772
+ "global-deviation": {
10773
+ container: {
10774
+ backgroundColor: "blonde"
10775
+ }
10776
+ },
10764
10777
  service: {
10765
10778
  container: {
10766
10779
  backgroundColor: "darkTeal",
@@ -10895,24 +10908,16 @@ var config5 = helpers4.defineMultiStyleConfig({
10895
10908
  borderTopRadius: "none",
10896
10909
  borderBottomRadius: "md",
10897
10910
  _hover: {
10898
- outline: "2px solid",
10899
- outlineColor: "blueGreen"
10900
- },
10901
- _active: {
10902
- backgroundColor: "pine",
10903
- outlineColor: "pine"
10911
+ outline: "2px solid"
10904
10912
  }
10905
10913
  },
10906
10914
  outerBox: {
10907
10915
  outline: "1px solid",
10908
- outlineColor: "blueGreen",
10909
- backgroundColor: "darkTeal",
10910
10916
  borderBottomRadius: "md",
10911
10917
  borderTopRadius: "none",
10912
10918
  width: "100%"
10913
10919
  },
10914
10920
  notificationText: {
10915
- color: "white",
10916
10921
  fontWeight: "400",
10917
10922
  fontSize: "1rem",
10918
10923
  pr: "0.375rem"
@@ -10920,8 +10925,53 @@ var config5 = helpers4.defineMultiStyleConfig({
10920
10925
  serviceMessageContent: {
10921
10926
  paddingX: "0.75rem",
10922
10927
  paddingTop: "0.375rem",
10923
- paddingBottom: "0.9375rem",
10924
- color: "white"
10928
+ paddingBottom: "0.9375rem"
10929
+ }
10930
+ },
10931
+ variants: {
10932
+ "global-deviation": {
10933
+ container: {
10934
+ _hover: {
10935
+ outlineColor: "primrose"
10936
+ },
10937
+ _active: {
10938
+ backgroundColor: "blonde",
10939
+ outlineColor: "primrose"
10940
+ },
10941
+ color: "darkGrey"
10942
+ },
10943
+ outerBox: {
10944
+ outlineColor: "primrose",
10945
+ backgroundColor: "blonde"
10946
+ },
10947
+ notificationText: {
10948
+ color: "darkGrey"
10949
+ },
10950
+ serviceMessageContent: {
10951
+ color: "darkGrey"
10952
+ }
10953
+ },
10954
+ service: {
10955
+ container: {
10956
+ _hover: {
10957
+ outlineColor: "blueGreen"
10958
+ },
10959
+ _active: {
10960
+ backgroundColor: "pine",
10961
+ outlineColor: "pine"
10962
+ },
10963
+ color: "white"
10964
+ },
10965
+ outerBox: {
10966
+ outlineColor: "blueGreen",
10967
+ backgroundColor: "darkTeal"
10968
+ },
10969
+ notificationText: {
10970
+ color: "white"
10971
+ },
10972
+ serviceMessageContent: {
10973
+ color: "white"
10974
+ }
10925
10975
  }
10926
10976
  }
10927
10977
  });
package/dist/index.d.mts CHANGED
@@ -296,7 +296,7 @@ declare const ExpandableItem: ({ children, title, headingLevel, leftIcon, ...res
296
296
 
297
297
  type BaseAlertProps = BoxProps & {
298
298
  /** The color scheme and icon of the alert */
299
- variant: "info" | "success" | "warning" | "alt-transport" | "error" | "service";
299
+ variant: "info" | "success" | "warning" | "alt-transport" | "error" | "service" | "global-deviation";
300
300
  /** The body content of the alert */
301
301
  children: React.ReactNode;
302
302
  /** The title of the alert */
@@ -389,6 +389,8 @@ type ServiceAlertProps = BaseAlertProps & {
389
389
  *
390
390
  * Defaults to h3 */
391
391
  headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6";
392
+ /** The variant of Service Alert. Default: service */
393
+ variant?: "service" | "global-deviation";
392
394
  };
393
395
  /**
394
396
  * A service alert component.
@@ -2528,6 +2530,11 @@ declare const theme: {
2528
2530
  backgroundColor: string;
2529
2531
  };
2530
2532
  };
2533
+ "global-deviation": {
2534
+ container: {
2535
+ backgroundColor: string;
2536
+ };
2537
+ };
2531
2538
  service: {
2532
2539
  container: {
2533
2540
  backgroundColor: string;
@@ -2537,7 +2544,7 @@ declare const theme: {
2537
2544
  } | undefined;
2538
2545
  defaultProps?: {
2539
2546
  size?: string | number | undefined;
2540
- variant?: "error" | "info" | "success" | "warning" | "alt-transport" | "service" | undefined;
2547
+ variant?: "error" | "info" | "success" | "warning" | "alt-transport" | "service" | "global-deviation" | undefined;
2541
2548
  colorScheme?: string | undefined;
2542
2549
  } | undefined;
2543
2550
  parts: ("container" | "icon" | "closeButton")[];
@@ -2659,23 +2666,15 @@ declare const theme: {
2659
2666
  borderBottomRadius: string;
2660
2667
  _hover: {
2661
2668
  outline: string;
2662
- outlineColor: string;
2663
- };
2664
- _active: {
2665
- backgroundColor: string;
2666
- outlineColor: string;
2667
2669
  };
2668
2670
  };
2669
2671
  outerBox: {
2670
2672
  outline: string;
2671
- outlineColor: string;
2672
- backgroundColor: string;
2673
2673
  borderBottomRadius: string;
2674
2674
  borderTopRadius: string;
2675
2675
  width: string;
2676
2676
  };
2677
2677
  notificationText: {
2678
- color: string;
2679
2678
  fontWeight: string;
2680
2679
  fontSize: string;
2681
2680
  pr: string;
@@ -2684,7 +2683,6 @@ declare const theme: {
2684
2683
  paddingX: string;
2685
2684
  paddingTop: string;
2686
2685
  paddingBottom: string;
2687
- color: string;
2688
2686
  };
2689
2687
  } | undefined;
2690
2688
  sizes?: {
@@ -2693,13 +2691,54 @@ declare const theme: {
2693
2691
  }>;
2694
2692
  } | undefined;
2695
2693
  variants?: {
2696
- [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
2697
- keys: ("container" | "outerBox" | "serviceMessageContent" | "notificationText")[];
2698
- }>;
2694
+ "global-deviation": {
2695
+ container: {
2696
+ _hover: {
2697
+ outlineColor: string;
2698
+ };
2699
+ _active: {
2700
+ backgroundColor: string;
2701
+ outlineColor: string;
2702
+ };
2703
+ color: string;
2704
+ };
2705
+ outerBox: {
2706
+ outlineColor: string;
2707
+ backgroundColor: string;
2708
+ };
2709
+ notificationText: {
2710
+ color: string;
2711
+ };
2712
+ serviceMessageContent: {
2713
+ color: string;
2714
+ };
2715
+ };
2716
+ service: {
2717
+ container: {
2718
+ _hover: {
2719
+ outlineColor: string;
2720
+ };
2721
+ _active: {
2722
+ backgroundColor: string;
2723
+ outlineColor: string;
2724
+ };
2725
+ color: string;
2726
+ };
2727
+ outerBox: {
2728
+ outlineColor: string;
2729
+ backgroundColor: string;
2730
+ };
2731
+ notificationText: {
2732
+ color: string;
2733
+ };
2734
+ serviceMessageContent: {
2735
+ color: string;
2736
+ };
2737
+ };
2699
2738
  } | undefined;
2700
2739
  defaultProps?: {
2701
2740
  size?: string | number | undefined;
2702
- variant?: string | number | undefined;
2741
+ variant?: "service" | "global-deviation" | undefined;
2703
2742
  colorScheme?: string | undefined;
2704
2743
  } | undefined;
2705
2744
  parts: ("container" | "outerBox" | "serviceMessageContent" | "notificationText")[];
@@ -7516,15 +7555,15 @@ declare const theme: {
7516
7555
  sizes?: {
7517
7556
  "2xs": {
7518
7557
  container: {
7519
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | {
7558
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | {
7520
7559
  sm: string;
7521
7560
  md: string;
7522
7561
  lg: string;
7523
7562
  xl: string;
7524
- } | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96;
7563
+ } | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96;
7525
7564
  };
7526
7565
  excessLabel: {
7527
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7566
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7528
7567
  sm: string;
7529
7568
  md: string;
7530
7569
  lg: string;
@@ -7534,7 +7573,7 @@ declare const theme: {
7534
7573
  };
7535
7574
  xs: {
7536
7575
  container: {
7537
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7576
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7538
7577
  sm: string;
7539
7578
  md: string;
7540
7579
  lg: string;
@@ -7542,7 +7581,7 @@ declare const theme: {
7542
7581
  };
7543
7582
  };
7544
7583
  excessLabel: {
7545
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7584
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7546
7585
  sm: string;
7547
7586
  md: string;
7548
7587
  lg: string;
@@ -7552,7 +7591,7 @@ declare const theme: {
7552
7591
  };
7553
7592
  sm: {
7554
7593
  container: {
7555
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7594
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7556
7595
  sm: string;
7557
7596
  md: string;
7558
7597
  lg: string;
@@ -7560,7 +7599,7 @@ declare const theme: {
7560
7599
  };
7561
7600
  };
7562
7601
  excessLabel: {
7563
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7602
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7564
7603
  sm: string;
7565
7604
  md: string;
7566
7605
  lg: string;
@@ -7570,7 +7609,7 @@ declare const theme: {
7570
7609
  };
7571
7610
  md: {
7572
7611
  container: {
7573
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7612
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7574
7613
  sm: string;
7575
7614
  md: string;
7576
7615
  lg: string;
@@ -7578,7 +7617,7 @@ declare const theme: {
7578
7617
  };
7579
7618
  };
7580
7619
  excessLabel: {
7581
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7620
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7582
7621
  sm: string;
7583
7622
  md: string;
7584
7623
  lg: string;
@@ -7588,7 +7627,7 @@ declare const theme: {
7588
7627
  };
7589
7628
  lg: {
7590
7629
  container: {
7591
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7630
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7592
7631
  sm: string;
7593
7632
  md: string;
7594
7633
  lg: string;
@@ -7596,7 +7635,7 @@ declare const theme: {
7596
7635
  };
7597
7636
  };
7598
7637
  excessLabel: {
7599
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7638
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7600
7639
  sm: string;
7601
7640
  md: string;
7602
7641
  lg: string;
@@ -7606,7 +7645,7 @@ declare const theme: {
7606
7645
  };
7607
7646
  xl: {
7608
7647
  container: {
7609
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7648
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7610
7649
  sm: string;
7611
7650
  md: string;
7612
7651
  lg: string;
@@ -7614,7 +7653,7 @@ declare const theme: {
7614
7653
  };
7615
7654
  };
7616
7655
  excessLabel: {
7617
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7656
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7618
7657
  sm: string;
7619
7658
  md: string;
7620
7659
  lg: string;
@@ -7624,7 +7663,7 @@ declare const theme: {
7624
7663
  };
7625
7664
  "2xl": {
7626
7665
  container: {
7627
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7666
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7628
7667
  sm: string;
7629
7668
  md: string;
7630
7669
  lg: string;
@@ -7632,7 +7671,7 @@ declare const theme: {
7632
7671
  };
7633
7672
  };
7634
7673
  excessLabel: {
7635
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7674
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7636
7675
  sm: string;
7637
7676
  md: string;
7638
7677
  lg: string;
@@ -7642,7 +7681,7 @@ declare const theme: {
7642
7681
  };
7643
7682
  full: {
7644
7683
  container: {
7645
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7684
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7646
7685
  sm: string;
7647
7686
  md: string;
7648
7687
  lg: string;
@@ -7650,7 +7689,7 @@ declare const theme: {
7650
7689
  };
7651
7690
  };
7652
7691
  excessLabel: {
7653
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7692
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7654
7693
  sm: string;
7655
7694
  md: string;
7656
7695
  lg: string;
package/dist/index.d.ts CHANGED
@@ -296,7 +296,7 @@ declare const ExpandableItem: ({ children, title, headingLevel, leftIcon, ...res
296
296
 
297
297
  type BaseAlertProps = BoxProps & {
298
298
  /** The color scheme and icon of the alert */
299
- variant: "info" | "success" | "warning" | "alt-transport" | "error" | "service";
299
+ variant: "info" | "success" | "warning" | "alt-transport" | "error" | "service" | "global-deviation";
300
300
  /** The body content of the alert */
301
301
  children: React.ReactNode;
302
302
  /** The title of the alert */
@@ -389,6 +389,8 @@ type ServiceAlertProps = BaseAlertProps & {
389
389
  *
390
390
  * Defaults to h3 */
391
391
  headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6";
392
+ /** The variant of Service Alert. Default: service */
393
+ variant?: "service" | "global-deviation";
392
394
  };
393
395
  /**
394
396
  * A service alert component.
@@ -2528,6 +2530,11 @@ declare const theme: {
2528
2530
  backgroundColor: string;
2529
2531
  };
2530
2532
  };
2533
+ "global-deviation": {
2534
+ container: {
2535
+ backgroundColor: string;
2536
+ };
2537
+ };
2531
2538
  service: {
2532
2539
  container: {
2533
2540
  backgroundColor: string;
@@ -2537,7 +2544,7 @@ declare const theme: {
2537
2544
  } | undefined;
2538
2545
  defaultProps?: {
2539
2546
  size?: string | number | undefined;
2540
- variant?: "error" | "info" | "success" | "warning" | "alt-transport" | "service" | undefined;
2547
+ variant?: "error" | "info" | "success" | "warning" | "alt-transport" | "service" | "global-deviation" | undefined;
2541
2548
  colorScheme?: string | undefined;
2542
2549
  } | undefined;
2543
2550
  parts: ("container" | "icon" | "closeButton")[];
@@ -2659,23 +2666,15 @@ declare const theme: {
2659
2666
  borderBottomRadius: string;
2660
2667
  _hover: {
2661
2668
  outline: string;
2662
- outlineColor: string;
2663
- };
2664
- _active: {
2665
- backgroundColor: string;
2666
- outlineColor: string;
2667
2669
  };
2668
2670
  };
2669
2671
  outerBox: {
2670
2672
  outline: string;
2671
- outlineColor: string;
2672
- backgroundColor: string;
2673
2673
  borderBottomRadius: string;
2674
2674
  borderTopRadius: string;
2675
2675
  width: string;
2676
2676
  };
2677
2677
  notificationText: {
2678
- color: string;
2679
2678
  fontWeight: string;
2680
2679
  fontSize: string;
2681
2680
  pr: string;
@@ -2684,7 +2683,6 @@ declare const theme: {
2684
2683
  paddingX: string;
2685
2684
  paddingTop: string;
2686
2685
  paddingBottom: string;
2687
- color: string;
2688
2686
  };
2689
2687
  } | undefined;
2690
2688
  sizes?: {
@@ -2693,13 +2691,54 @@ declare const theme: {
2693
2691
  }>;
2694
2692
  } | undefined;
2695
2693
  variants?: {
2696
- [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
2697
- keys: ("container" | "outerBox" | "serviceMessageContent" | "notificationText")[];
2698
- }>;
2694
+ "global-deviation": {
2695
+ container: {
2696
+ _hover: {
2697
+ outlineColor: string;
2698
+ };
2699
+ _active: {
2700
+ backgroundColor: string;
2701
+ outlineColor: string;
2702
+ };
2703
+ color: string;
2704
+ };
2705
+ outerBox: {
2706
+ outlineColor: string;
2707
+ backgroundColor: string;
2708
+ };
2709
+ notificationText: {
2710
+ color: string;
2711
+ };
2712
+ serviceMessageContent: {
2713
+ color: string;
2714
+ };
2715
+ };
2716
+ service: {
2717
+ container: {
2718
+ _hover: {
2719
+ outlineColor: string;
2720
+ };
2721
+ _active: {
2722
+ backgroundColor: string;
2723
+ outlineColor: string;
2724
+ };
2725
+ color: string;
2726
+ };
2727
+ outerBox: {
2728
+ outlineColor: string;
2729
+ backgroundColor: string;
2730
+ };
2731
+ notificationText: {
2732
+ color: string;
2733
+ };
2734
+ serviceMessageContent: {
2735
+ color: string;
2736
+ };
2737
+ };
2699
2738
  } | undefined;
2700
2739
  defaultProps?: {
2701
2740
  size?: string | number | undefined;
2702
- variant?: string | number | undefined;
2741
+ variant?: "service" | "global-deviation" | undefined;
2703
2742
  colorScheme?: string | undefined;
2704
2743
  } | undefined;
2705
2744
  parts: ("container" | "outerBox" | "serviceMessageContent" | "notificationText")[];
@@ -7516,15 +7555,15 @@ declare const theme: {
7516
7555
  sizes?: {
7517
7556
  "2xs": {
7518
7557
  container: {
7519
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | {
7558
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | {
7520
7559
  sm: string;
7521
7560
  md: string;
7522
7561
  lg: string;
7523
7562
  xl: string;
7524
- } | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96;
7563
+ } | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96;
7525
7564
  };
7526
7565
  excessLabel: {
7527
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7566
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7528
7567
  sm: string;
7529
7568
  md: string;
7530
7569
  lg: string;
@@ -7534,7 +7573,7 @@ declare const theme: {
7534
7573
  };
7535
7574
  xs: {
7536
7575
  container: {
7537
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7576
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7538
7577
  sm: string;
7539
7578
  md: string;
7540
7579
  lg: string;
@@ -7542,7 +7581,7 @@ declare const theme: {
7542
7581
  };
7543
7582
  };
7544
7583
  excessLabel: {
7545
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7584
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7546
7585
  sm: string;
7547
7586
  md: string;
7548
7587
  lg: string;
@@ -7552,7 +7591,7 @@ declare const theme: {
7552
7591
  };
7553
7592
  sm: {
7554
7593
  container: {
7555
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7594
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7556
7595
  sm: string;
7557
7596
  md: string;
7558
7597
  lg: string;
@@ -7560,7 +7599,7 @@ declare const theme: {
7560
7599
  };
7561
7600
  };
7562
7601
  excessLabel: {
7563
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7602
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7564
7603
  sm: string;
7565
7604
  md: string;
7566
7605
  lg: string;
@@ -7570,7 +7609,7 @@ declare const theme: {
7570
7609
  };
7571
7610
  md: {
7572
7611
  container: {
7573
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7612
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7574
7613
  sm: string;
7575
7614
  md: string;
7576
7615
  lg: string;
@@ -7578,7 +7617,7 @@ declare const theme: {
7578
7617
  };
7579
7618
  };
7580
7619
  excessLabel: {
7581
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7620
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7582
7621
  sm: string;
7583
7622
  md: string;
7584
7623
  lg: string;
@@ -7588,7 +7627,7 @@ declare const theme: {
7588
7627
  };
7589
7628
  lg: {
7590
7629
  container: {
7591
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7630
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7592
7631
  sm: string;
7593
7632
  md: string;
7594
7633
  lg: string;
@@ -7596,7 +7635,7 @@ declare const theme: {
7596
7635
  };
7597
7636
  };
7598
7637
  excessLabel: {
7599
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7638
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7600
7639
  sm: string;
7601
7640
  md: string;
7602
7641
  lg: string;
@@ -7606,7 +7645,7 @@ declare const theme: {
7606
7645
  };
7607
7646
  xl: {
7608
7647
  container: {
7609
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7648
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7610
7649
  sm: string;
7611
7650
  md: string;
7612
7651
  lg: string;
@@ -7614,7 +7653,7 @@ declare const theme: {
7614
7653
  };
7615
7654
  };
7616
7655
  excessLabel: {
7617
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7656
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7618
7657
  sm: string;
7619
7658
  md: string;
7620
7659
  lg: string;
@@ -7624,7 +7663,7 @@ declare const theme: {
7624
7663
  };
7625
7664
  "2xl": {
7626
7665
  container: {
7627
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7666
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7628
7667
  sm: string;
7629
7668
  md: string;
7630
7669
  lg: string;
@@ -7632,7 +7671,7 @@ declare const theme: {
7632
7671
  };
7633
7672
  };
7634
7673
  excessLabel: {
7635
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7674
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7636
7675
  sm: string;
7637
7676
  md: string;
7638
7677
  lg: string;
@@ -7642,7 +7681,7 @@ declare const theme: {
7642
7681
  };
7643
7682
  full: {
7644
7683
  container: {
7645
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7684
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7646
7685
  sm: string;
7647
7686
  md: string;
7648
7687
  lg: string;
@@ -7650,7 +7689,7 @@ declare const theme: {
7650
7689
  };
7651
7690
  };
7652
7691
  excessLabel: {
7653
- [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 2.5 | 60 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
7692
+ [x: string]: string | 1 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 16 | 20 | 1.5 | 0.5 | 24 | 60 | 3.5 | 44 | 56 | 2.5 | 28 | 32 | 36 | 40 | 48 | 52 | 64 | 72 | 80 | 96 | {
7654
7693
  sm: string;
7655
7694
  md: string;
7656
7695
  lg: string;
package/dist/index.js CHANGED
@@ -9,6 +9,7 @@ var awesomePhonenumber = require('awesome-phonenumber');
9
9
  var lottieReact = require('lottie-react');
10
10
  var sporLoader = require('@vygruppen/spor-loader');
11
11
  var framerMotion = require('framer-motion');
12
+ var tmp = require('@vygruppen/spor-icon-react/tmp');
12
13
  var date = require('@internationalized/date');
13
14
  var reactSwipeable = require('react-swipeable');
14
15
  var tokens11 = require('@vygruppen/spor-design-tokens');
@@ -1972,7 +1973,7 @@ var init_PhoneNumberInput = __esm({
1972
1973
  ...boxProps
1973
1974
  }, ref) => {
1974
1975
  const { t: t2 } = useTranslation();
1975
- const label = externalLabel ?? isOptional ? t2(texts5.phoneNumberOptional) : t2(texts5.phoneNumber);
1976
+ const label = externalLabel ?? (isOptional ? t2(texts5.phoneNumberOptional) : t2(texts5.phoneNumber));
1976
1977
  const [value, onChange] = react.useControllableState({
1977
1978
  value: externalValue,
1978
1979
  onChange: externalOnChange,
@@ -3203,8 +3204,10 @@ var init_AlertIcon = __esm({
3203
3204
  return sporIconReact.AltTransportOutline24Icon;
3204
3205
  case "error":
3205
3206
  return sporIconReact.ErrorOutline24Icon;
3206
- case "service":
3207
+ case "global-deviation":
3207
3208
  return sporIconReact.WarningFill24Icon;
3209
+ case "service":
3210
+ return tmp.ServiceFill24Icon;
3208
3211
  }
3209
3212
  };
3210
3213
  texts11 = createTexts({
@@ -3243,6 +3246,12 @@ var init_AlertIcon = __esm({
3243
3246
  nn: "Driftsmelding",
3244
3247
  sv: "Servicemeddelande",
3245
3248
  en: "Service message"
3249
+ },
3250
+ "global-deviation": {
3251
+ nb: "Trafikkmelding",
3252
+ nn: "Trafikkmelding",
3253
+ sv: "Trafikmeddelande",
3254
+ en: "Traffic announcement"
3246
3255
  }
3247
3256
  });
3248
3257
  }
@@ -3384,7 +3393,7 @@ var init_ServiceAlert = __esm({
3384
3393
  init_BaseAlert();
3385
3394
  init_i18n();
3386
3395
  exports.ServiceAlert = ({
3387
- variant,
3396
+ variant = "service",
3388
3397
  children,
3389
3398
  title,
3390
3399
  notification,
@@ -3395,9 +3404,8 @@ var init_ServiceAlert = __esm({
3395
3404
  },
3396
3405
  ...boxProps
3397
3406
  }) => {
3398
- variant = "service";
3399
3407
  const { t: t2 } = useTranslation();
3400
- const styles3 = react.useMultiStyleConfig("AlertService");
3408
+ const styles3 = react.useMultiStyleConfig("AlertService", { variant });
3401
3409
  return /* @__PURE__ */ React86__namespace.default.createElement(
3402
3410
  BaseAlert,
3403
3411
  {
@@ -3443,12 +3451,11 @@ var init_ServiceAlert = __esm({
3443
3451
  overflow: "hidden",
3444
3452
  WebkitLineClamp: "1",
3445
3453
  WebkitBoxOrient: "vertical"
3446
- },
3447
- color: "white"
3454
+ }
3448
3455
  },
3449
3456
  title
3450
3457
  )),
3451
- /* @__PURE__ */ React86__namespace.default.createElement(react.Flex, { alignItems: "center" }, notification && /* @__PURE__ */ React86__namespace.default.createElement(react.Text, { sx: styles3.notificationText }, t2(texts13.notification(notification))), /* @__PURE__ */ React86__namespace.default.createElement(react.AccordionIcon, { color: "white" }))
3458
+ /* @__PURE__ */ React86__namespace.default.createElement(react.Flex, { alignItems: "center" }, notification && /* @__PURE__ */ React86__namespace.default.createElement(react.Text, { sx: styles3.notificationText }, t2(texts13.notification(notification))), /* @__PURE__ */ React86__namespace.default.createElement(react.AccordionIcon, null))
3452
3459
  )
3453
3460
  )), /* @__PURE__ */ React86__namespace.default.createElement(react.AccordionPanel, { sx: styles3.serviceMessageContent }, /* @__PURE__ */ React86__namespace.default.createElement(react.Stack, { flexDirection: "row", justifyContent: "center", width: "100%" }, /* @__PURE__ */ React86__namespace.default.createElement(
3454
3461
  react.Stack,
@@ -3462,7 +3469,8 @@ var init_ServiceAlert = __esm({
3462
3469
  sx: {
3463
3470
  p: {
3464
3471
  padding: "0.8rem 0",
3465
- borderBottom: "0.08rem solid rgba(255, 255, 255, 0.4)"
3472
+ borderBottom: "0.08rem solid",
3473
+ borderColor: variant === "global-deviation" ? "blackAlpha.400" : "whiteAlpha.400"
3466
3474
  },
3467
3475
  "p:last-child": {
3468
3476
  borderBottom: "none"
@@ -12136,6 +12144,11 @@ var init_alert2 = __esm({
12136
12144
  backgroundColor: "banana"
12137
12145
  }
12138
12146
  },
12147
+ "global-deviation": {
12148
+ container: {
12149
+ backgroundColor: "blonde"
12150
+ }
12151
+ },
12139
12152
  service: {
12140
12153
  container: {
12141
12154
  backgroundColor: "darkTeal",
@@ -12284,24 +12297,16 @@ var init_alert_service = __esm({
12284
12297
  borderTopRadius: "none",
12285
12298
  borderBottomRadius: "md",
12286
12299
  _hover: {
12287
- outline: "2px solid",
12288
- outlineColor: "blueGreen"
12289
- },
12290
- _active: {
12291
- backgroundColor: "pine",
12292
- outlineColor: "pine"
12300
+ outline: "2px solid"
12293
12301
  }
12294
12302
  },
12295
12303
  outerBox: {
12296
12304
  outline: "1px solid",
12297
- outlineColor: "blueGreen",
12298
- backgroundColor: "darkTeal",
12299
12305
  borderBottomRadius: "md",
12300
12306
  borderTopRadius: "none",
12301
12307
  width: "100%"
12302
12308
  },
12303
12309
  notificationText: {
12304
- color: "white",
12305
12310
  fontWeight: "400",
12306
12311
  fontSize: "1rem",
12307
12312
  pr: "0.375rem"
@@ -12309,8 +12314,53 @@ var init_alert_service = __esm({
12309
12314
  serviceMessageContent: {
12310
12315
  paddingX: "0.75rem",
12311
12316
  paddingTop: "0.375rem",
12312
- paddingBottom: "0.9375rem",
12313
- color: "white"
12317
+ paddingBottom: "0.9375rem"
12318
+ }
12319
+ },
12320
+ variants: {
12321
+ "global-deviation": {
12322
+ container: {
12323
+ _hover: {
12324
+ outlineColor: "primrose"
12325
+ },
12326
+ _active: {
12327
+ backgroundColor: "blonde",
12328
+ outlineColor: "primrose"
12329
+ },
12330
+ color: "darkGrey"
12331
+ },
12332
+ outerBox: {
12333
+ outlineColor: "primrose",
12334
+ backgroundColor: "blonde"
12335
+ },
12336
+ notificationText: {
12337
+ color: "darkGrey"
12338
+ },
12339
+ serviceMessageContent: {
12340
+ color: "darkGrey"
12341
+ }
12342
+ },
12343
+ service: {
12344
+ container: {
12345
+ _hover: {
12346
+ outlineColor: "blueGreen"
12347
+ },
12348
+ _active: {
12349
+ backgroundColor: "pine",
12350
+ outlineColor: "pine"
12351
+ },
12352
+ color: "white"
12353
+ },
12354
+ outerBox: {
12355
+ outlineColor: "blueGreen",
12356
+ backgroundColor: "darkTeal"
12357
+ },
12358
+ notificationText: {
12359
+ color: "white"
12360
+ },
12361
+ serviceMessageContent: {
12362
+ color: "white"
12363
+ }
12314
12364
  }
12315
12365
  }
12316
12366
  });
package/dist/index.mjs CHANGED
@@ -1 +1 @@
1
- export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, CardSelect, CargonetLogo, 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, FullScreenDrawer, 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, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioGroup, ScaleFade, SearchInput, Section, ServiceAlert, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, StaticCard, 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, VyLogoPride, 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-RPFFDHUW.mjs';
1
+ export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, CardSelect, CargonetLogo, 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, FullScreenDrawer, 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, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioGroup, ScaleFade, SearchInput, Section, ServiceAlert, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, StaticCard, 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, VyLogoPride, 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-HAWOB4BD.mjs';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vygruppen/spor-react",
3
- "version": "10.8.1",
3
+ "version": "10.9.0",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.mjs",
6
6
  "types": "./dist/index.d.ts",
@@ -23,7 +23,7 @@
23
23
  "@emotion/styled": "^11.11.5",
24
24
  "@internationalized/date": "^3.5.4",
25
25
  "@vygruppen/spor-design-tokens": "^3.7.0",
26
- "@vygruppen/spor-icon-react": "^3.9.0",
26
+ "@vygruppen/spor-icon-react": "^3.12.0",
27
27
  "@vygruppen/spor-loader": "^0.4.0",
28
28
  "awesome-phonenumber": "^5.11.0",
29
29
  "deepmerge": "^4.3.1",
package/src/alert/AlertIcon.tsx CHANGED
@@ -9,6 +9,7 @@ import {
9
9
  import React from "react";
10
10
  import { createTexts, useTranslation } from "../i18n";
11
11
  import { BaseAlertProps } from "./BaseAlert";
12
+ import { ServiceFill24Icon } from "@vygruppen/spor-icon-react/tmp";
12
13
 
13
14
  type AlertIconProps = { variant: BaseAlertProps["variant"] };
14
15
  /**
@@ -39,8 +40,10 @@ const getIcon = (variant: BaseAlertProps["variant"]) => {
39
40
  return AltTransportOutline24Icon;
40
41
  case "error":
41
42
  return ErrorOutline24Icon;
42
- case "service":
43
+ case "global-deviation":
43
44
  return WarningFill24Icon;
45
+ case "service":
46
+ return ServiceFill24Icon;
44
47
  }
45
48
  };
46
49
 
@@ -81,4 +84,10 @@ const texts = createTexts({
81
84
  sv: "Servicemeddelande",
82
85
  en: "Service message",
83
86
  },
87
+ "global-deviation": {
88
+ nb: "Trafikkmelding",
89
+ nn: "Trafikkmelding",
90
+ sv: "Trafikmeddelande",
91
+ en: "Traffic announcement",
92
+ },
84
93
  });
package/src/alert/BaseAlert.tsx CHANGED
@@ -9,7 +9,8 @@ export type BaseAlertProps = BoxProps & {
9
9
  | "warning"
10
10
  | "alt-transport"
11
11
  | "error"
12
- | "service";
12
+ | "service"
13
+ | "global-deviation";
13
14
  /** The body content of the alert */
14
15
  children: React.ReactNode;
15
16
  /** The title of the alert */
package/src/alert/ServiceAlert.tsx CHANGED
@@ -33,6 +33,8 @@ type ServiceAlertProps = BaseAlertProps & {
33
33
  *
34
34
  * Defaults to h3 */
35
35
  headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6";
36
+ /** The variant of Service Alert. Default: service */
37
+ variant?: "service" | "global-deviation";
36
38
  };
37
39
  /**
38
40
  * A service alert component.
@@ -46,7 +48,7 @@ type ServiceAlertProps = BaseAlertProps & {
46
48
  * ```
47
49
  */
48
50
  export const ServiceAlert = ({
49
- variant,
51
+ variant = "service",
50
52
  children,
51
53
  title,
52
54
  notification,
@@ -56,9 +58,8 @@ export const ServiceAlert = ({
56
58
  onToggle = () => {},
57
59
  ...boxProps
58
60
  }: ServiceAlertProps) => {
59
- variant = "service";
60
61
  const { t } = useTranslation();
61
- const styles = useMultiStyleConfig("AlertService");
62
+ const styles = useMultiStyleConfig("AlertService", { variant });
62
63
  return (
63
64
  <BaseAlert
64
65
  variant={variant}
@@ -101,7 +102,6 @@ export const ServiceAlert = ({
101
102
  WebkitLineClamp: "1",
102
103
  WebkitBoxOrient: "vertical",
103
104
  }}
104
- color="white"
105
105
  >
106
106
  {title}
107
107
  </Box>
@@ -114,7 +114,7 @@ export const ServiceAlert = ({
114
114
  </Text>
115
115
  )}
116
116
 
117
- <AccordionIcon color="white" />
117
+ <AccordionIcon />
118
118
  </Flex>
119
119
  </Flex>
120
120
  </Stack>
@@ -132,7 +132,11 @@ export const ServiceAlert = ({
132
132
  sx={{
133
133
  p: {
134
134
  padding: "0.8rem 0",
135
- borderBottom: "0.08rem solid rgba(255, 255, 255, 0.4)",
135
+ borderBottom: "0.08rem solid",
136
+ borderColor:
137
+ variant === "global-deviation"
138
+ ? "blackAlpha.400"
139
+ : "whiteAlpha.400",
136
140
  },
137
141
  "p:last-child": {
138
142
  borderBottom: "none",
package/src/input/PhoneNumberInput.tsx CHANGED
@@ -59,9 +59,8 @@ export const PhoneNumberInput = forwardRef<PhoneNumberInputProps, As>(
59
59
  ) => {
60
60
  const { t } = useTranslation();
61
61
  const label =
62
- externalLabel ?? isOptional
63
- ? t(texts.phoneNumberOptional)
64
- : t(texts.phoneNumber);
62
+ externalLabel ??
63
+ (isOptional ? t(texts.phoneNumberOptional) : t(texts.phoneNumber));
65
64
  const [value, onChange] = useControllableState({
66
65
  value: externalValue,
67
66
  onChange: externalOnChange,
package/src/theme/components/alert-service.ts CHANGED
@@ -8,7 +8,6 @@ const parts = anatomy("alertService").parts(
8
8
  "serviceMessageContent",
9
9
  );
10
10
  const helpers = createMultiStyleConfigHelpers(parts.keys);
11
-
12
11
  const config = helpers.defineMultiStyleConfig({
13
12
  baseStyle: {
14
13
  container: {
@@ -21,23 +20,15 @@ const config = helpers.defineMultiStyleConfig({
21
20
  borderBottomRadius: "md",
22
21
  _hover: {
23
22
  outline: "2px solid",
24
- outlineColor: "blueGreen",
25
- },
26
- _active: {
27
- backgroundColor: "pine",
28
- outlineColor: "pine",
29
23
  },
30
24
  },
31
25
  outerBox: {
32
26
  outline: "1px solid",
33
- outlineColor: "blueGreen",
34
- backgroundColor: "darkTeal",
35
27
  borderBottomRadius: "md",
36
28
  borderTopRadius: "none",
37
29
  width: "100%",
38
30
  },
39
31
  notificationText: {
40
- color: "white",
41
32
  fontWeight: "400",
42
33
  fontSize: "1rem",
43
34
  pr: "0.375rem",
@@ -46,7 +37,52 @@ const config = helpers.defineMultiStyleConfig({
46
37
  paddingX: "0.75rem",
47
38
  paddingTop: "0.375rem",
48
39
  paddingBottom: "0.9375rem",
49
- color: "white",
40
+ },
41
+ },
42
+ variants: {
43
+ "global-deviation": {
44
+ container: {
45
+ _hover: {
46
+ outlineColor: "primrose",
47
+ },
48
+ _active: {
49
+ backgroundColor: "blonde",
50
+ outlineColor: "primrose",
51
+ },
52
+ color: "darkGrey",
53
+ },
54
+ outerBox: {
55
+ outlineColor: "primrose",
56
+ backgroundColor: "blonde",
57
+ },
58
+ notificationText: {
59
+ color: "darkGrey",
60
+ },
61
+ serviceMessageContent: {
62
+ color: "darkGrey",
63
+ },
64
+ },
65
+ service: {
66
+ container: {
67
+ _hover: {
68
+ outlineColor: "blueGreen",
69
+ },
70
+ _active: {
71
+ backgroundColor: "pine",
72
+ outlineColor: "pine",
73
+ },
74
+ color: "white",
75
+ },
76
+ outerBox: {
77
+ outlineColor: "blueGreen",
78
+ backgroundColor: "darkTeal",
79
+ },
80
+ notificationText: {
81
+ color: "white",
82
+ },
83
+ serviceMessageContent: {
84
+ color: "white",
85
+ },
50
86
  },
51
87
  },
52
88
  });
package/src/theme/components/alert.ts CHANGED
@@ -51,6 +51,11 @@ const config = helpers.defineMultiStyleConfig({
51
51
  backgroundColor: "banana",
52
52
  },
53
53
  },
54
+ "global-deviation": {
55
+ container: {
56
+ backgroundColor: "blonde",
57
+ },
58
+ },
54
59
  service: {
55
60
  container: {
56
61
  backgroundColor: "darkTeal",