@vygruppen/spor-react 9.14.1 → 9.15.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.
package/dist/index.mjs CHANGED
@@ -1 +1 @@
1
- export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, 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, PrideProvider, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioGroup, ScaleFade, SearchInput, Section, 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, TogglePride, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, VyLogoDefault, VyLogoPride, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, usePride, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-HKTFZRTD.mjs';
1
+ export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, 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, 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-NTYAUO4O.mjs';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vygruppen/spor-react",
3
- "version": "9.14.1",
3
+ "version": "9.15.0",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.mjs",
6
6
  "types": "./dist/index.d.ts",
package/src/index.tsx CHANGED
@@ -18,7 +18,6 @@ export * from "./media-controller";
18
18
  export * from "./modal";
19
19
  export * from "./nudge";
20
20
  export * from "./pagination";
21
- export * from "./pride";
22
21
  export * from "./progress-indicator";
23
22
  export * from "./provider";
24
23
  export * from "./stepper";
@@ -3,8 +3,6 @@ import { inlineLoaderColorData } from "@vygruppen/spor-loader";
3
3
  import React from "react";
4
4
  import { ClientOnly } from "./ClientOnly";
5
5
  import Lottie from "./Lottie";
6
- import { inlineLoaderColorPrideData } from "@vygruppen/spor-loader";
7
- import { usePride } from "../pride";
8
6
 
9
7
  export type ColorInlineLoaderProps = Exclude<BoxProps, "children">;
10
8
  /**
@@ -17,18 +15,11 @@ export const ColorInlineLoader = ({
17
15
  maxWidth,
18
16
  ...props
19
17
  }: ColorInlineLoaderProps) => {
20
- const { isPride } = usePride();
21
18
  return (
22
19
  <Center {...props}>
23
20
  <Box width={width} maxWidth={maxWidth}>
24
21
  <ClientOnly>
25
- {() => (
26
- <Lottie
27
- animationData={
28
- isPride ? inlineLoaderColorPrideData : inlineLoaderColorData
29
- }
30
- />
31
- )}
22
+ {() => <Lottie animationData={inlineLoaderColorData} />}
32
23
  </ClientOnly>
33
24
  </Box>
34
25
  </Center>
@@ -1,12 +1,8 @@
1
1
  import { Box, BoxProps, Center } from "@chakra-ui/react";
2
- import {
3
- spinnerColorData,
4
- spinnerColorPrideData,
5
- } from "@vygruppen/spor-loader";
2
+ import { spinnerColorData } from "@vygruppen/spor-loader";
6
3
  import React from "react";
7
4
  import { ClientOnly } from "./ClientOnly";
8
5
  import Lottie from "./Lottie";
9
- import { usePride } from "../pride/PrideProvider";
10
6
 
11
7
  export type SpinnerProps = BoxProps;
12
8
  export type ColorSpinnerProps = SpinnerProps;
@@ -32,16 +28,11 @@ export const ColorSpinner = ({
32
28
 
33
29
  ...props
34
30
  }: SpinnerProps) => {
35
- const { isPride } = usePride();
36
31
  return (
37
32
  <Center flexDirection="column" {...props}>
38
33
  <Box width={width} maxWidth={maxWidth}>
39
34
  <ClientOnly>
40
- {() => (
41
- <Lottie
42
- animationData={isPride ? spinnerColorPrideData : spinnerColorData}
43
- />
44
- )}
35
+ {() => <Lottie animationData={spinnerColorData} />}
45
36
  </ClientOnly>
46
37
  </Box>
47
38
  {children && (
@@ -1,12 +1,8 @@
1
1
  import { Box, BoxProps } from "@chakra-ui/react";
2
- import {
3
- contentLoaderData,
4
- contentLoaderPrideData,
5
- } from "@vygruppen/spor-loader";
2
+ import { contentLoaderData } from "@vygruppen/spor-loader";
6
3
  import React from "react";
7
4
  import { ClientOnly } from "./ClientOnly";
8
5
  import Lottie from "./Lottie";
9
- import { usePride } from "../pride/PrideProvider";
10
6
 
11
7
  export type ContentLoaderProps = BoxProps;
12
8
  /**
@@ -14,18 +10,11 @@ export type ContentLoaderProps = BoxProps;
14
10
  * It should mostly be used for
15
11
  */
16
12
  export const ContentLoader = ({ children, ...props }: ContentLoaderProps) => {
17
- const { isPride } = usePride();
18
13
  return (
19
14
  <Box {...props}>
20
15
  <Box maxWidth="140px" marginX="auto">
21
16
  <ClientOnly>
22
- {() => (
23
- <Lottie
24
- animationData={
25
- isPride ? contentLoaderPrideData : contentLoaderData
26
- }
27
- />
28
- )}
17
+ {() => <Lottie animationData={contentLoaderData} />}
29
18
  </ClientOnly>
30
19
  </Box>
31
20
  {children && (
@@ -1,12 +1,8 @@
1
1
  import { Box, BoxProps, Center } from "@chakra-ui/react";
2
- import {
3
- inlineLoaderColorPrideData,
4
- inlineLoaderDarkData,
5
- } from "@vygruppen/spor-loader";
2
+ import { inlineLoaderDarkData } from "@vygruppen/spor-loader";
6
3
  import React from "react";
7
4
  import { ClientOnly } from "./ClientOnly";
8
5
  import Lottie from "./Lottie";
9
- import { usePride } from "../pride/PrideProvider";
10
6
 
11
7
  export type DarkInlineLoaderProps = Exclude<BoxProps, "children">;
12
8
  /**
@@ -17,18 +13,11 @@ export const DarkInlineLoader = ({
17
13
  maxWidth,
18
14
  ...props
19
15
  }: DarkInlineLoaderProps) => {
20
- const { isPride } = usePride();
21
16
  return (
22
17
  <Center {...props}>
23
18
  <Box width={width} maxWidth={maxWidth}>
24
19
  <ClientOnly>
25
- {() => (
26
- <Lottie
27
- animationData={
28
- isPride ? inlineLoaderColorPrideData : inlineLoaderDarkData
29
- }
30
- />
31
- )}
20
+ {() => <Lottie animationData={inlineLoaderDarkData} />}
32
21
  </ClientOnly>
33
22
  </Box>
34
23
  </Center>
@@ -3,8 +3,6 @@ import { fullScreenLoaderBlackData } from "@vygruppen/spor-loader";
3
3
  import React from "react";
4
4
  import { ClientOnly } from "./ClientOnly";
5
5
  import Lottie from "./Lottie";
6
- import { usePride } from "../pride";
7
- import { vyLogoPrideData } from "@vygruppen/spor-loader";
8
6
 
9
7
  type LightFullScreenLoaderProps = BoxProps;
10
8
 
@@ -13,18 +11,11 @@ export const LightFullScreenLoader = ({
13
11
  maxWidth,
14
12
  ...props
15
13
  }: LightFullScreenLoaderProps) => {
16
- const { isPride } = usePride();
17
14
  return (
18
15
  <Center height="100%" background="white" {...props}>
19
16
  <Box width={width} maxWidth={maxWidth}>
20
17
  <ClientOnly>
21
- {() => (
22
- <Lottie
23
- animationData={
24
- isPride ? vyLogoPrideData : fullScreenLoaderBlackData
25
- }
26
- />
27
- )}
18
+ {() => <Lottie animationData={fullScreenLoaderBlackData} />}
28
19
  </ClientOnly>
29
20
  </Box>
30
21
  </Center>
@@ -1,12 +1,8 @@
1
1
  import { Box, BoxProps, Center } from "@chakra-ui/react";
2
- import {
3
- inlineLoaderColorPrideData,
4
- inlineLoaderLightData,
5
- } from "@vygruppen/spor-loader";
2
+ import { inlineLoaderLightData } from "@vygruppen/spor-loader";
6
3
  import React from "react";
7
4
  import { ClientOnly } from "./ClientOnly";
8
5
  import Lottie from "./Lottie";
9
- import { usePride } from "../pride/PrideProvider";
10
6
 
11
7
  export type LightInlineLoaderProps = Exclude<BoxProps, "children">;
12
8
  /**
@@ -17,18 +13,11 @@ export const LightInlineLoader = ({
17
13
  maxWidth,
18
14
  ...props
19
15
  }: LightInlineLoaderProps) => {
20
- const { isPride } = usePride();
21
16
  return (
22
17
  <Center {...props}>
23
18
  <Box width={width} maxWidth={maxWidth}>
24
19
  <ClientOnly>
25
- {() => (
26
- <Lottie
27
- animationData={
28
- isPride ? inlineLoaderColorPrideData : inlineLoaderLightData
29
- }
30
- />
31
- )}
20
+ {() => <Lottie animationData={inlineLoaderLightData} />}
32
21
  </ClientOnly>
33
22
  </Box>
34
23
  </Center>
@@ -1,8 +1,5 @@
1
- import { BoxProps } from "@chakra-ui/react";
2
- import React from "react";
3
- import { usePride } from "../pride";
4
- import { VyLogoPride } from "./VyLogoPride";
5
- import { VyLogoDefault } from "./VyLogoDefault";
1
+ import { Box, BoxProps } from "@chakra-ui/react";
2
+ import React, { useId } from "react";
6
3
 
7
4
  export type VyLogoProps = {
8
5
  /** The color of the logo
@@ -13,10 +10,92 @@ export type VyLogoProps = {
13
10
  colorScheme: "light" | "dark";
14
11
  } & BoxProps;
15
12
  export const VyLogo = ({ colorScheme, ...boxProps }: VyLogoProps) => {
16
- const { isPride } = usePride();
17
-
18
- if (isPride) {
19
- return <VyLogoPride colorScheme={colorScheme} {...boxProps} />;
20
- }
21
- return <VyLogoDefault colorScheme={colorScheme} {...boxProps} />;
13
+ // These colors should not be tokenized, as they are logo specific.
14
+ const mainColor = colorScheme === "light" ? "#1d211c" : "#ffffff";
15
+ const accentColor = colorScheme === "light" ? "#138c6e" : "#ffffff";
16
+ const id = useId();
17
+ return (
18
+ <Box as="svg" viewBox="0 0 107 54" {...boxProps}>
19
+ <title>Vy logo</title>
20
+ <path
21
+ fillRule="evenodd"
22
+ clipRule="evenodd"
23
+ d="M79.97 33.44a.04.04 0 0 0 0-.08 5.76 5.76 0 0 1-2.32-.85c-1.56-1-2.79-2.9-3.83-6.07L68.14 7.16c-1.18-4.04-3.42-5.85-5.48-6.6a8.36 8.36 0 0 0-2.88-.52h-1.44a.04.04 0 0 0 0 .08c.57.09 1.18.24 1.8.5 1.92.8 3.92 2.63 5.06 6.54l5.61 19.07c1.06 3.3 2.31 5.27 3.92 6.3 1.01.64 2.17.9 3.5.9h1.74Z"
24
+ fill={mainColor}
25
+ />
26
+ <mask
27
+ id={`${id}-a`}
28
+ style={{ maskType: "alpha" }}
29
+ maskUnits="userSpaceOnUse"
30
+ x="0"
31
+ y="0"
32
+ width="94"
33
+ height="54"
34
+ >
35
+ <path
36
+ fillRule="evenodd"
37
+ clipRule="evenodd"
38
+ d="M0 .03h93.26v53.65H0V.03Z"
39
+ fill={mainColor}
40
+ />
41
+ </mask>
42
+ <g
43
+ mask={`url(#${id}-a)`}
44
+ fillRule="evenodd"
45
+ clipRule="evenodd"
46
+ fill={mainColor}
47
+ >
48
+ <path d="M84.57 33.44a.04.04 0 0 0 .01-.08c-2.34-.3-3.85-3.59-4.68-6.38-.88-2.93-4.04-13.63-5.92-19.82C72.08.94 66.2.05 63.54.04a.04.04 0 0 0-.01.08c2.49.34 6.02 1.85 7.55 7.04 1.34 4.55 5.6 19.03 5.76 19.51 1.02 3.03 2.22 4.85 3.73 5.83a6.3 6.3 0 0 0 3.54.94h.46ZM23.28 53.68h-.72c-2.12 0-4.68-1.08-6.09-6.04L3.8 4.37C3.04 1.77 1.93.47.03.15A.04.04 0 0 1 .04.07h1.9c2.54 0 3.92 1.27 4.8 4.3 0 0 11.72 39.78 12.79 43.54.78 2.78 1.7 4.67 3.13 5.43.23.13.42.2.62.26a.04.04 0 0 1 0 .08ZM18.99 5.99C17.77 1.79 15.87.04 12.37.04h-1.71a.04.04 0 0 0 0 .08c2.73.39 4.32 2.19 5.39 5.87 0 0 10.49 35.72 11.85 40.4l1.44-4.87L18.99 6Z" />
49
+ <path d="M24.26 53.68h1.24c1.57 0 2.69-.41 3.52-1.1 1.37-1.1 1.99-2.93 2.56-4.86.09-.29 11.2-37.95 11.59-39.42 1.32-4.97 4.27-7.13 7.43-7.9a12.2 12.2 0 0 1 1.58-.28.04.04 0 0 0 0-.08h-1.4c-4.15 0-8.8 1.65-10.56 8.26-.63 2.38-11.5 39.13-11.58 39.42-.57 1.93-1.23 3.96-2.59 5.07-.56.45-1.06.7-1.8.81a.04.04 0 0 0 0 .08ZM81.3 27.76l6.53-21.78C88.89 2.3 90.49.5 93.23.11a.04.04 0 0 0-.01-.08H91.5c-3.5 0-5.4 1.76-6.62 5.95l-5.05 16.97s1.33 4.46 1.46 4.8Z" />
50
+ </g>
51
+ <path
52
+ fillRule="evenodd"
53
+ clipRule="evenodd"
54
+ d="M98.49.07h-1.82c-2.98 0-4.6 1.49-5.63 5.06l-6.52 21.79a18.22 18.22 0 0 1-1.67 3.96c.57.78 1.17 1.26 1.76 1.38 1.13-.96 2.06-2.75 2.89-5.46l6.49-21.67c.9-3.1 2.23-4.63 4.5-4.98a.04.04 0 0 0 0-.08Z"
55
+ fill={accentColor}
56
+ />
57
+ <path
58
+ fillRule="evenodd"
59
+ clipRule="evenodd"
60
+ d="M85.25 34.53h-2.93L78.58 46.9c-1.82 6.1 1.05 6.73 2.15 6.73h2.31a.04.04 0 0 0 .01-.09c-1.25-.3-2.96-1.6-1.45-6.64l3.65-12.37ZM102.35.11c.02 0 .03-.02.03-.04a.04.04 0 0 0-.04-.04h-.4c-2.54 0-3.92 1.27-4.8 4.3 0 0-5 16.82-6.57 22.03-1.57 5.2-2.65 6.6-4.78 6.97l-.11.03a.04.04 0 0 0 0 .08h1.45c3.72 0 5.1-2.48 6.41-6.84l7.5-25.07c.19-.6.7-1.23 1.31-1.42Z"
61
+ fill={mainColor}
62
+ />
63
+ <mask
64
+ id={`${id}-b`}
65
+ style={{ maskType: "alpha" }}
66
+ maskUnits="userSpaceOnUse"
67
+ x="29"
68
+ y="0"
69
+ width="78"
70
+ height="54"
71
+ >
72
+ <path
73
+ fillRule="evenodd"
74
+ clipRule="evenodd"
75
+ d="M29.55.04H106v53.64H29.55V.04Z"
76
+ fill={mainColor}
77
+ />
78
+ </mask>
79
+ <g mask={`url(#${id}-b)`} fillRule="evenodd" clipRule="evenodd">
80
+ <path
81
+ d="m88.2 34.45-3.96 13.46c-1.54 5.18.9 5.72 1.83 5.72h2.26a.04.04 0 0 0 0-.09c-1.05-.27-2.44-1.4-1.18-5.63l4.43-15.02c-.7.71-1.88 1.37-3.38 1.56ZM93.71 53.63c.02 0 .04-.02.04-.05a.04.04 0 0 0-.03-.04c-.9-.25-2.02-1.24-.96-4.77 0 0 12.4-42.2 13.08-44.6a3.1 3.1 0 0 0-2.47-4.1c-.02 0-.06-.02-.07.01-.01.04.03.06.04.06.3.16.63.52.45 1.14L89.84 48.77c-1.32 4.4.76 4.86 1.55 4.86h2.32ZM74.1 33.44a.04.04 0 0 0 0-.08 5.77 5.77 0 0 1-2.3-.83c-1.64-1.04-2.9-3.06-3.98-6.5-.1-.29-5.37-18.25-5.55-18.87-1.12-3.8-2.91-5.63-4.68-6.46a7.06 7.06 0 0 0-3.04-.66H53a.04.04 0 0 0-.02.08c.3.05 4.32.17 6.35 7.04 2.03 6.86 4.46 15.07 5.28 17.97 1.77 6.26 4.07 8.3 7.75 8.3h1.73Z"
82
+ fill={mainColor}
83
+ />
84
+ <path
85
+ d="M55.43 2.4c-1.48 1.27-2.7 3.16-3.44 5.9-.07.29-11.08 37.74-11.32 38.55-.93 3.12-1.7 6.21-5.2 6.75a.04.04 0 0 0 0 .08h.7l.6-.01c3.56-.14 5.33-1.66 6.85-6.82L54.94 8.3c.44-1.44.96-3.08 1.7-4.52-.15-.25-.7-.96-1.2-1.38Z"
86
+ fill={mainColor}
87
+ />
88
+ <path
89
+ d="M53.78 1.44a4.64 4.64 0 0 0-4.17.93A10.79 10.79 0 0 0 46.19 8L34.53 47.72c-.58 1.93-1.2 3.75-2.56 4.87-.62.5-1.4.86-2.39 1.01a.04.04 0 0 0 0 .08h1.8c1.57 0 2.69-.41 3.53-1.1 1.36-1.1 1.98-2.93 2.56-4.86L49.05 8.3c.73-2.74 1.95-4.63 3.43-5.9.43-.36.88-.68 1.35-.95l-.05-.01Z"
90
+ fill={accentColor}
91
+ />
92
+ </g>
93
+ <path
94
+ fillRule="evenodd"
95
+ clipRule="evenodd"
96
+ d="M26.55 50.33a9.09 9.09 0 0 1-1.24-2.7c-.44-1.54-12.46-42.5-12.46-42.5C11.82 1.56 10.2.07 7.22.07H5.4a.04.04 0 0 0 0 .08C7.67.5 9 2.04 9.9 5.13l12.46 42.5c.65 2.28 1.53 3.74 2.5 4.65.7-.4 1.29-1.05 1.69-1.95Z"
97
+ fill={mainColor}
98
+ />
99
+ </Box>
100
+ );
22
101
  };
@@ -1,4 +1,3 @@
1
1
  export * from "./VyLogo";
2
2
  export * from "./VyLogoPride";
3
- export * from "./VyLogoDefault";
4
3
  export * from "./CargonetLogo";
@@ -4,7 +4,6 @@ import deepmerge from "deepmerge";
4
4
  import React from "react";
5
5
  import { Language, LanguageProvider } from "..";
6
6
  import { Brand, brandTheme, theme as defaultSporTheme, fontFaces } from "../";
7
- import { PrideProvider } from "../pride/PrideProvider";
8
7
 
9
8
  type SporProviderProps = ChakraProviderProps & {
10
9
  language?: Language;
@@ -60,12 +59,10 @@ export const SporProvider = ({
60
59
 
61
60
  return (
62
61
  <LanguageProvider language={language}>
63
- <PrideProvider>
64
- <ChakraProvider theme={extendedTheme} {...props}>
65
- <Global styles={fontFaces} />
66
- {children}
67
- </ChakraProvider>
68
- </PrideProvider>
62
+ <ChakraProvider theme={extendedTheme} {...props}>
63
+ <Global styles={fontFaces} />
64
+ {children}
65
+ </ChakraProvider>
69
66
  </LanguageProvider>
70
67
  );
71
68
  };
@@ -1,2 +1 @@
1
1
  export * from "./SporProvider";
2
- export * from "../pride/PrideProvider";
@@ -1,104 +0,0 @@
1
- import { Box, BoxProps } from "@chakra-ui/react";
2
- import React, { useId } from "react";
3
-
4
- export type VyLogoDefaultProps = {
5
- /** The color of the logo
6
- *
7
- * Use `"light"` when the logo is used on a light background.
8
- * Use `"dark"` when the logo is used on a dark background.
9
- */
10
- colorScheme: "light" | "dark";
11
- } & BoxProps;
12
- export const VyLogoDefault = ({
13
- colorScheme,
14
- ...boxProps
15
- }: VyLogoDefaultProps) => {
16
- // These colors should not be tokenized, as they are logo specific.
17
- const mainColor = colorScheme === "light" ? "#1d211c" : "#ffffff";
18
- const accentColor = colorScheme === "light" ? "#138c6e" : "#ffffff";
19
- const id = useId();
20
- return (
21
- <Box as="svg" viewBox="0 0 107 54" {...boxProps}>
22
- <title>Vy logo</title>
23
- <path
24
- fillRule="evenodd"
25
- clipRule="evenodd"
26
- d="M79.97 33.44a.04.04 0 0 0 0-.08 5.76 5.76 0 0 1-2.32-.85c-1.56-1-2.79-2.9-3.83-6.07L68.14 7.16c-1.18-4.04-3.42-5.85-5.48-6.6a8.36 8.36 0 0 0-2.88-.52h-1.44a.04.04 0 0 0 0 .08c.57.09 1.18.24 1.8.5 1.92.8 3.92 2.63 5.06 6.54l5.61 19.07c1.06 3.3 2.31 5.27 3.92 6.3 1.01.64 2.17.9 3.5.9h1.74Z"
27
- fill={mainColor}
28
- />
29
- <mask
30
- id={`${id}-a`}
31
- style={{ maskType: "alpha" }}
32
- maskUnits="userSpaceOnUse"
33
- x="0"
34
- y="0"
35
- width="94"
36
- height="54"
37
- >
38
- <path
39
- fillRule="evenodd"
40
- clipRule="evenodd"
41
- d="M0 .03h93.26v53.65H0V.03Z"
42
- fill={mainColor}
43
- />
44
- </mask>
45
- <g
46
- mask={`url(#${id}-a)`}
47
- fillRule="evenodd"
48
- clipRule="evenodd"
49
- fill={mainColor}
50
- >
51
- <path d="M84.57 33.44a.04.04 0 0 0 .01-.08c-2.34-.3-3.85-3.59-4.68-6.38-.88-2.93-4.04-13.63-5.92-19.82C72.08.94 66.2.05 63.54.04a.04.04 0 0 0-.01.08c2.49.34 6.02 1.85 7.55 7.04 1.34 4.55 5.6 19.03 5.76 19.51 1.02 3.03 2.22 4.85 3.73 5.83a6.3 6.3 0 0 0 3.54.94h.46ZM23.28 53.68h-.72c-2.12 0-4.68-1.08-6.09-6.04L3.8 4.37C3.04 1.77 1.93.47.03.15A.04.04 0 0 1 .04.07h1.9c2.54 0 3.92 1.27 4.8 4.3 0 0 11.72 39.78 12.79 43.54.78 2.78 1.7 4.67 3.13 5.43.23.13.42.2.62.26a.04.04 0 0 1 0 .08ZM18.99 5.99C17.77 1.79 15.87.04 12.37.04h-1.71a.04.04 0 0 0 0 .08c2.73.39 4.32 2.19 5.39 5.87 0 0 10.49 35.72 11.85 40.4l1.44-4.87L18.99 6Z" />
52
- <path d="M24.26 53.68h1.24c1.57 0 2.69-.41 3.52-1.1 1.37-1.1 1.99-2.93 2.56-4.86.09-.29 11.2-37.95 11.59-39.42 1.32-4.97 4.27-7.13 7.43-7.9a12.2 12.2 0 0 1 1.58-.28.04.04 0 0 0 0-.08h-1.4c-4.15 0-8.8 1.65-10.56 8.26-.63 2.38-11.5 39.13-11.58 39.42-.57 1.93-1.23 3.96-2.59 5.07-.56.45-1.06.7-1.8.81a.04.04 0 0 0 0 .08ZM81.3 27.76l6.53-21.78C88.89 2.3 90.49.5 93.23.11a.04.04 0 0 0-.01-.08H91.5c-3.5 0-5.4 1.76-6.62 5.95l-5.05 16.97s1.33 4.46 1.46 4.8Z" />
53
- </g>
54
- <path
55
- fillRule="evenodd"
56
- clipRule="evenodd"
57
- d="M98.49.07h-1.82c-2.98 0-4.6 1.49-5.63 5.06l-6.52 21.79a18.22 18.22 0 0 1-1.67 3.96c.57.78 1.17 1.26 1.76 1.38 1.13-.96 2.06-2.75 2.89-5.46l6.49-21.67c.9-3.1 2.23-4.63 4.5-4.98a.04.04 0 0 0 0-.08Z"
58
- fill={accentColor}
59
- />
60
- <path
61
- fillRule="evenodd"
62
- clipRule="evenodd"
63
- d="M85.25 34.53h-2.93L78.58 46.9c-1.82 6.1 1.05 6.73 2.15 6.73h2.31a.04.04 0 0 0 .01-.09c-1.25-.3-2.96-1.6-1.45-6.64l3.65-12.37ZM102.35.11c.02 0 .03-.02.03-.04a.04.04 0 0 0-.04-.04h-.4c-2.54 0-3.92 1.27-4.8 4.3 0 0-5 16.82-6.57 22.03-1.57 5.2-2.65 6.6-4.78 6.97l-.11.03a.04.04 0 0 0 0 .08h1.45c3.72 0 5.1-2.48 6.41-6.84l7.5-25.07c.19-.6.7-1.23 1.31-1.42Z"
64
- fill={mainColor}
65
- />
66
- <mask
67
- id={`${id}-b`}
68
- style={{ maskType: "alpha" }}
69
- maskUnits="userSpaceOnUse"
70
- x="29"
71
- y="0"
72
- width="78"
73
- height="54"
74
- >
75
- <path
76
- fillRule="evenodd"
77
- clipRule="evenodd"
78
- d="M29.55.04H106v53.64H29.55V.04Z"
79
- fill={mainColor}
80
- />
81
- </mask>
82
- <g mask={`url(#${id}-b)`} fillRule="evenodd" clipRule="evenodd">
83
- <path
84
- d="m88.2 34.45-3.96 13.46c-1.54 5.18.9 5.72 1.83 5.72h2.26a.04.04 0 0 0 0-.09c-1.05-.27-2.44-1.4-1.18-5.63l4.43-15.02c-.7.71-1.88 1.37-3.38 1.56ZM93.71 53.63c.02 0 .04-.02.04-.05a.04.04 0 0 0-.03-.04c-.9-.25-2.02-1.24-.96-4.77 0 0 12.4-42.2 13.08-44.6a3.1 3.1 0 0 0-2.47-4.1c-.02 0-.06-.02-.07.01-.01.04.03.06.04.06.3.16.63.52.45 1.14L89.84 48.77c-1.32 4.4.76 4.86 1.55 4.86h2.32ZM74.1 33.44a.04.04 0 0 0 0-.08 5.77 5.77 0 0 1-2.3-.83c-1.64-1.04-2.9-3.06-3.98-6.5-.1-.29-5.37-18.25-5.55-18.87-1.12-3.8-2.91-5.63-4.68-6.46a7.06 7.06 0 0 0-3.04-.66H53a.04.04 0 0 0-.02.08c.3.05 4.32.17 6.35 7.04 2.03 6.86 4.46 15.07 5.28 17.97 1.77 6.26 4.07 8.3 7.75 8.3h1.73Z"
85
- fill={mainColor}
86
- />
87
- <path
88
- d="M55.43 2.4c-1.48 1.27-2.7 3.16-3.44 5.9-.07.29-11.08 37.74-11.32 38.55-.93 3.12-1.7 6.21-5.2 6.75a.04.04 0 0 0 0 .08h.7l.6-.01c3.56-.14 5.33-1.66 6.85-6.82L54.94 8.3c.44-1.44.96-3.08 1.7-4.52-.15-.25-.7-.96-1.2-1.38Z"
89
- fill={mainColor}
90
- />
91
- <path
92
- d="M53.78 1.44a4.64 4.64 0 0 0-4.17.93A10.79 10.79 0 0 0 46.19 8L34.53 47.72c-.58 1.93-1.2 3.75-2.56 4.87-.62.5-1.4.86-2.39 1.01a.04.04 0 0 0 0 .08h1.8c1.57 0 2.69-.41 3.53-1.1 1.36-1.1 1.98-2.93 2.56-4.86L49.05 8.3c.73-2.74 1.95-4.63 3.43-5.9.43-.36.88-.68 1.35-.95l-.05-.01Z"
93
- fill={accentColor}
94
- />
95
- </g>
96
- <path
97
- fillRule="evenodd"
98
- clipRule="evenodd"
99
- d="M26.55 50.33a9.09 9.09 0 0 1-1.24-2.7c-.44-1.54-12.46-42.5-12.46-42.5C11.82 1.56 10.2.07 7.22.07H5.4a.04.04 0 0 0 0 .08C7.67.5 9 2.04 9.9 5.13l12.46 42.5c.65 2.28 1.53 3.74 2.5 4.65.7-.4 1.29-1.05 1.69-1.95Z"
100
- fill={mainColor}
101
- />
102
- </Box>
103
- );
104
- };
@@ -1,58 +0,0 @@
1
- // PrideContext.tsx
2
- import React, { createContext, useContext, useEffect, useState } from "react";
3
-
4
- interface PrideContextProps {
5
- isPride: boolean;
6
- togglePride: () => void;
7
- }
8
-
9
- const PrideContext = createContext<PrideContextProps | undefined>(undefined);
10
-
11
- export const PrideProvider: React.FC<React.PropsWithChildren<{}>> = ({
12
- children,
13
- }) => {
14
- const isBrowser = typeof window !== "undefined";
15
-
16
- const key = "spor__isPride";
17
-
18
- const [isPride, setIsPride] = useState<boolean>(() => {
19
- if (isBrowser) {
20
- const savedState = localStorage.getItem(key);
21
- return savedState ? JSON.parse(savedState) : true;
22
- }
23
- return true;
24
- });
25
-
26
- const togglePride = () => {
27
- setIsPride((prev) => {
28
- const newState = !prev;
29
- if (isBrowser) {
30
- localStorage.setItem(key, JSON.stringify(newState));
31
- }
32
- return newState;
33
- });
34
- };
35
-
36
- useEffect(() => {
37
- if (isBrowser) {
38
- const savedState = localStorage.getItem(key);
39
- if (savedState) {
40
- setIsPride(JSON.parse(savedState));
41
- }
42
- }
43
- }, [isBrowser]);
44
-
45
- return (
46
- <PrideContext.Provider value={{ isPride, togglePride }}>
47
- {children}
48
- </PrideContext.Provider>
49
- );
50
- };
51
-
52
- export const usePride = (): PrideContextProps => {
53
- const context = useContext(PrideContext);
54
- if (context === undefined) {
55
- throw new Error("usePride must be used within a PrideProvider");
56
- }
57
- return context;
58
- };
@@ -1,23 +0,0 @@
1
- // TogglePride.tsx
2
- import React from "react";
3
- import { usePride } from "./PrideProvider";
4
- import { FormControl, FormLabel, Switch } from "../input";
5
-
6
- type TogglePrideProps = {
7
- label: string;
8
- };
9
-
10
- export const TogglePride = ({ label }: TogglePrideProps) => {
11
- const { isPride, togglePride } = usePride();
12
-
13
- return (
14
- <FormControl display="flex" alignItems="center" gap={3}>
15
- <FormLabel margin="0">{label}</FormLabel>
16
- <Switch
17
- size="sm"
18
- onChange={() => togglePride()}
19
- defaultChecked={isPride}
20
- />
21
- </FormControl>
22
- );
23
- };
@@ -1,2 +0,0 @@
1
- export * from "./PrideProvider";
2
- export * from "./TogglePride";