@vygruppen/spor-react 9.11.0 → 9.11.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,5 @@
1
1
 
2
- > @vygruppen/spor-react@9.11.0 build
2
+ > @vygruppen/spor-react@9.11.2 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
- ESM dist/index.mjs 2.16 KB
13
- ESM dist/CountryCodeSelect-633P6ZEW.mjs 1.19 KB
14
- ESM dist/chunk-RR7HZ3VH.mjs 412.62 KB
15
- ESM ⚡️ Build success in 2365ms
16
- CJS dist/index.js 525.18 KB
17
- CJS ⚡️ Build success in 2366ms
18
- DTS ⚡️ Build success in 13907ms
19
- DTS dist/index.d.ts 343.79 KB
20
- DTS dist/index.d.mts 343.79 KB
12
+ CJS dist/index.js 525.54 KB
13
+ CJS ⚡️ Build success in 2189ms
14
+ ESM dist/index.mjs 2.17 KB
15
+ ESM dist/CountryCodeSelect-KU4HQMG3.mjs 1.19 KB
16
+ ESM dist/chunk-PA6EOPOZ.mjs 412.80 KB
17
+ ESM ⚡️ Build success in 2189ms
18
+ DTS ⚡️ Build success in 12957ms
19
+ DTS dist/index.d.ts 344.17 KB
20
+ DTS dist/index.d.mts 344.17 KB
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @vygruppen/spor-react
2
2
 
3
+ ## 9.11.2
4
+
5
+ ### Patch Changes
6
+
7
+ - 2de6b4d: Remove type declaration
8
+
9
+ ## 9.11.1
10
+
11
+ ### Patch Changes
12
+
13
+ - 33a6ee0: Update versions and add types for modules
14
+
3
15
  ## 9.11.0
4
16
 
5
17
  ### Minor Changes
@@ -1,4 +1,4 @@
1
- import { createTexts, useTranslation, InfoSelect, Item } from './chunk-RR7HZ3VH.mjs';
1
+ import { createTexts, useTranslation, InfoSelect, Item } from './chunk-PA6EOPOZ.mjs';
2
2
  import React from 'react';
3
3
  import { getSupportedCallingCodes } from 'awesome-phonenumber';
4
4
 
@@ -2041,7 +2041,7 @@ var texts4 = createTexts({
2041
2041
  sv: "Telefonnummer"
2042
2042
  }
2043
2043
  });
2044
- var LazyCountryCodeSelect = React87__default.lazy(() => import('./CountryCodeSelect-633P6ZEW.mjs'));
2044
+ var LazyCountryCodeSelect = React87__default.lazy(() => import('./CountryCodeSelect-KU4HQMG3.mjs'));
2045
2045
  var Radio = forwardRef((props, ref) => {
2046
2046
  return /* @__PURE__ */ React87__default.createElement(Radio$1, { ...props, ref });
2047
2047
  });
@@ -3862,7 +3862,7 @@ var VyLogoPride = ({ colorScheme, ...boxProps }) => {
3862
3862
  const redColor = colorScheme === "light" ? "#EA3323" : "#ffffff";
3863
3863
  const orangeColor = colorScheme === "light" ? "#F09436" : "#ffffff";
3864
3864
  const yellowColor = colorScheme === "light" ? "#FFFF54" : "#ffffff";
3865
- useId();
3865
+ const id = useId();
3866
3866
  return /* @__PURE__ */ React87__default.createElement(Box, { as: "svg", viewBox: "0 0 107 54", ...boxProps }, /* @__PURE__ */ React87__default.createElement("title", null, "Vy logo pride"), /* @__PURE__ */ React87__default.createElement(
3867
3867
  "svg",
3868
3868
  {
@@ -3884,7 +3884,7 @@ var VyLogoPride = ({ colorScheme, ...boxProps }) => {
3884
3884
  /* @__PURE__ */ React87__default.createElement(
3885
3885
  "mask",
3886
3886
  {
3887
- id: "mask0_4247_11084",
3887
+ id: `${id}-a-pride`,
3888
3888
  style: { maskType: "luminance" },
3889
3889
  maskUnits: "userSpaceOnUse",
3890
3890
  x: "0",
@@ -3902,7 +3902,7 @@ var VyLogoPride = ({ colorScheme, ...boxProps }) => {
3902
3902
  }
3903
3903
  )
3904
3904
  ),
3905
- /* @__PURE__ */ React87__default.createElement("g", { mask: "url(#mask0_4247_11084)" }, /* @__PURE__ */ React87__default.createElement(
3905
+ /* @__PURE__ */ React87__default.createElement("g", { mask: `url(#${id}-a-pride)` }, /* @__PURE__ */ React87__default.createElement(
3906
3906
  "path",
3907
3907
  {
3908
3908
  fillRule: "evenodd",
@@ -3973,7 +3973,7 @@ var VyLogoPride = ({ colorScheme, ...boxProps }) => {
3973
3973
  /* @__PURE__ */ React87__default.createElement(
3974
3974
  "mask",
3975
3975
  {
3976
- id: "mask1_4247_11084",
3976
+ id: `${id}-b-pride`,
3977
3977
  style: { maskType: "luminance" },
3978
3978
  maskUnits: "userSpaceOnUse",
3979
3979
  x: "30",
@@ -3991,7 +3991,7 @@ var VyLogoPride = ({ colorScheme, ...boxProps }) => {
3991
3991
  }
3992
3992
  )
3993
3993
  ),
3994
- /* @__PURE__ */ React87__default.createElement("g", { mask: "url(#mask1_4247_11084)" }, /* @__PURE__ */ React87__default.createElement(
3994
+ /* @__PURE__ */ React87__default.createElement("g", { mask: `url(#${id}-b-pride)` }, /* @__PURE__ */ React87__default.createElement(
3995
3995
  "path",
3996
3996
  {
3997
3997
  fillRule: "evenodd",
@@ -4043,13 +4043,10 @@ var VyLogoPride = ({ colorScheme, ...boxProps }) => {
4043
4043
  )
4044
4044
  ));
4045
4045
  };
4046
-
4047
- // src/logo/VyLogo.tsx
4048
- var VyLogo = ({ colorScheme, ...boxProps }) => {
4049
- const { isPride } = usePride();
4050
- if (isPride) {
4051
- return /* @__PURE__ */ React87__default.createElement(VyLogoPride, { colorScheme, ...boxProps });
4052
- }
4046
+ var VyLogoDefault = ({
4047
+ colorScheme,
4048
+ ...boxProps
4049
+ }) => {
4053
4050
  const mainColor = colorScheme === "light" ? "#1d211c" : "#ffffff";
4054
4051
  const accentColor = colorScheme === "light" ? "#138c6e" : "#ffffff";
4055
4052
  const id = useId();
@@ -4155,6 +4152,15 @@ var VyLogo = ({ colorScheme, ...boxProps }) => {
4155
4152
  }
4156
4153
  ));
4157
4154
  };
4155
+
4156
+ // src/logo/VyLogo.tsx
4157
+ var VyLogo = ({ colorScheme, ...boxProps }) => {
4158
+ const { isPride } = usePride();
4159
+ if (isPride) {
4160
+ return /* @__PURE__ */ React87__default.createElement(VyLogoPride, { colorScheme, ...boxProps });
4161
+ }
4162
+ return /* @__PURE__ */ React87__default.createElement(VyLogoDefault, { colorScheme, ...boxProps });
4163
+ };
4158
4164
  var JumpButton = ({
4159
4165
  direction: direction2,
4160
4166
  isDisabled,
@@ -14477,4 +14483,4 @@ function slugify(text, maxLength = 50) {
14477
14483
  return text.normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[\u00C6\u00E6]/g, "ae").replace(/[\u00D8\u00F8]/g, "oe").replace(/[\u00C5\u00E5]/g, "aa").toLowerCase().replace(/\s+/g, "-").replace(/[^\w-]+/g, "").replace(/--+/g, "-").replace(/^-+/, "").replace(/-+$/, "").substring(0, maxLength);
14478
14484
  }
14479
14485
 
14480
- export { Accordion, AttachedInputs, Badge, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button2 as Button, ButtonGroup, Card2 as Card, CardSelect, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Combobox, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerContent, Expandable, ExpandableAlert, ExpandableItem, FloatingActionButton, FormControl, FormErrorMessage, FormLabel, FullScreenDrawer, Heading2 as Heading, IconButton, InfoSelect, InfoTag, Input, InputLeftElement2 as InputLeftElement, InputRightElement2 as InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightSpinner, LineIcon, ListBox, ModalHeader, NativeSelect, Nudge, NumericStepper, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, PressableCard, PrideProvider, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioGroup, SearchInput, SimpleDrawer, Skeleton, SkeletonCircle, SkeletonText, SkipButton, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Table, Tabs, Text4 as Text, TextLink, Textarea, TimePicker, TogglePride, Tooltip, TravelTag, VyLogo, VyLogoPride, WizardNudge, brandTheme, createTexts, fontFaces, slugify, theme, usePride, useSize, useToast, useTranslation };
14486
+ export { Accordion, AttachedInputs, Badge, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button2 as Button, ButtonGroup, Card2 as Card, CardSelect, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Combobox, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerContent, Expandable, ExpandableAlert, ExpandableItem, FloatingActionButton, FormControl, FormErrorMessage, FormLabel, FullScreenDrawer, Heading2 as Heading, IconButton, InfoSelect, InfoTag, Input, InputLeftElement2 as InputLeftElement, InputRightElement2 as InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightSpinner, LineIcon, ListBox, ModalHeader, NativeSelect, Nudge, NumericStepper, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, PressableCard, PrideProvider, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioGroup, SearchInput, SimpleDrawer, Skeleton, SkeletonCircle, SkeletonText, SkipButton, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Table, Tabs, Text4 as Text, TextLink, Textarea, TimePicker, TogglePride, Tooltip, TravelTag, VyLogo, VyLogoDefault, VyLogoPride, WizardNudge, brandTheme, createTexts, fontFaces, slugify, theme, usePride, useSize, useToast, useTranslation };
package/dist/index.d.mts CHANGED
@@ -1938,6 +1938,16 @@ type VyLogoPrideProps = {
1938
1938
  } & BoxProps;
1939
1939
  declare const VyLogoPride: ({ colorScheme, ...boxProps }: VyLogoPrideProps) => React.JSX.Element;
1940
1940
 
1941
+ type VyLogoDefaultProps = {
1942
+ /** The color of the logo
1943
+ *
1944
+ * Use `"light"` when the logo is used on a light background.
1945
+ * Use `"dark"` when the logo is used on a dark background.
1946
+ */
1947
+ colorScheme: "light" | "dark";
1948
+ } & BoxProps;
1949
+ declare const VyLogoDefault: ({ colorScheme, ...boxProps }: VyLogoDefaultProps) => React.JSX.Element;
1950
+
1941
1951
  type JumpButtonProps = BoxProps & {
1942
1952
  onClick: () => void;
1943
1953
  "aria-label"?: string;
@@ -9559,4 +9569,4 @@ declare const Text: _chakra_ui_system_dist_system_types.ComponentWithAs<"p", Tex
9559
9569
  **/
9560
9570
  declare function slugify(text: string | string[], maxLength?: number): string;
9561
9571
 
9562
- export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Card, CardProps, CardSelect, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChoiceChip, ChoiceChipProps, ClosableAlert, CloseButton, CloseButtonProps, Code, CodeProps, ColorInlineLoader, ColorInlineLoaderProps, ColorSpinner, ColorSpinnerProps, Combobox, ComboboxProps, ContentLoader, ContentLoaderProps, DarkFullScreenLoader, DarkInlineLoader, DarkInlineLoaderProps, DarkSpinner, DarkSpinnerProps, DatePicker, DateRangePicker, Divider, DividerProps, Drawer, DrawerContent, ModalHeader as DrawerHeader, Expandable, ExpandableAlert, ExpandableItem, ExpandableItemProps, FloatingActionButton, FormControl, FormControlProps, FormErrorMessage, FormErrorMessageProps, FormLabel, FormLabelProps, FullScreenDrawer, Heading, HeadingProps, IconButton, IconButtonProps, InfoSelect, InfoTag, InfoTagProps, Input, InputElementProps, InputLeftElement, InputProps, InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightInlineLoaderProps, LightSpinner, LightSpinnerProps, LineIcon, LineIconProps, ListBox, ModalHeader, ModalHeaderProps, NativeSelect, NativeSelectProps, Nudge, NudgeProps, NumericStepper, Pagination, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, PressableCard, PrideProvider, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardProps, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, SimpleDrawer, SimpleDrawerProps, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, StaticCard, StaticCardProps, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, TogglePride, Tooltip, TooltipProps, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoPride, VyLogoPrideProps, VyLogoProps, WizardNudge, WizardNudgeProps, brandTheme, createTexts, fontFaces, slugify, theme, usePride, useToast, useTranslation };
9572
+ export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Card, CardProps, CardSelect, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChoiceChip, ChoiceChipProps, ClosableAlert, CloseButton, CloseButtonProps, Code, CodeProps, ColorInlineLoader, ColorInlineLoaderProps, ColorSpinner, ColorSpinnerProps, Combobox, ComboboxProps, ContentLoader, ContentLoaderProps, DarkFullScreenLoader, DarkInlineLoader, DarkInlineLoaderProps, DarkSpinner, DarkSpinnerProps, DatePicker, DateRangePicker, Divider, DividerProps, Drawer, DrawerContent, ModalHeader as DrawerHeader, Expandable, ExpandableAlert, ExpandableItem, ExpandableItemProps, FloatingActionButton, FormControl, FormControlProps, FormErrorMessage, FormErrorMessageProps, FormLabel, FormLabelProps, FullScreenDrawer, Heading, HeadingProps, IconButton, IconButtonProps, InfoSelect, InfoTag, InfoTagProps, Input, InputElementProps, InputLeftElement, InputProps, InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightInlineLoaderProps, LightSpinner, LightSpinnerProps, LineIcon, LineIconProps, ListBox, ModalHeader, ModalHeaderProps, NativeSelect, NativeSelectProps, Nudge, NudgeProps, NumericStepper, Pagination, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, PressableCard, PrideProvider, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardProps, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, SimpleDrawer, SimpleDrawerProps, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, StaticCard, StaticCardProps, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, TogglePride, Tooltip, TooltipProps, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoDefault, VyLogoDefaultProps, VyLogoPride, VyLogoPrideProps, VyLogoProps, WizardNudge, WizardNudgeProps, brandTheme, createTexts, fontFaces, slugify, theme, usePride, useToast, useTranslation };
package/dist/index.d.ts CHANGED
@@ -1938,6 +1938,16 @@ type VyLogoPrideProps = {
1938
1938
  } & BoxProps;
1939
1939
  declare const VyLogoPride: ({ colorScheme, ...boxProps }: VyLogoPrideProps) => React.JSX.Element;
1940
1940
 
1941
+ type VyLogoDefaultProps = {
1942
+ /** The color of the logo
1943
+ *
1944
+ * Use `"light"` when the logo is used on a light background.
1945
+ * Use `"dark"` when the logo is used on a dark background.
1946
+ */
1947
+ colorScheme: "light" | "dark";
1948
+ } & BoxProps;
1949
+ declare const VyLogoDefault: ({ colorScheme, ...boxProps }: VyLogoDefaultProps) => React.JSX.Element;
1950
+
1941
1951
  type JumpButtonProps = BoxProps & {
1942
1952
  onClick: () => void;
1943
1953
  "aria-label"?: string;
@@ -9559,4 +9569,4 @@ declare const Text: _chakra_ui_system_dist_system_types.ComponentWithAs<"p", Tex
9559
9569
  **/
9560
9570
  declare function slugify(text: string | string[], maxLength?: number): string;
9561
9571
 
9562
- export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Card, CardProps, CardSelect, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChoiceChip, ChoiceChipProps, ClosableAlert, CloseButton, CloseButtonProps, Code, CodeProps, ColorInlineLoader, ColorInlineLoaderProps, ColorSpinner, ColorSpinnerProps, Combobox, ComboboxProps, ContentLoader, ContentLoaderProps, DarkFullScreenLoader, DarkInlineLoader, DarkInlineLoaderProps, DarkSpinner, DarkSpinnerProps, DatePicker, DateRangePicker, Divider, DividerProps, Drawer, DrawerContent, ModalHeader as DrawerHeader, Expandable, ExpandableAlert, ExpandableItem, ExpandableItemProps, FloatingActionButton, FormControl, FormControlProps, FormErrorMessage, FormErrorMessageProps, FormLabel, FormLabelProps, FullScreenDrawer, Heading, HeadingProps, IconButton, IconButtonProps, InfoSelect, InfoTag, InfoTagProps, Input, InputElementProps, InputLeftElement, InputProps, InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightInlineLoaderProps, LightSpinner, LightSpinnerProps, LineIcon, LineIconProps, ListBox, ModalHeader, ModalHeaderProps, NativeSelect, NativeSelectProps, Nudge, NudgeProps, NumericStepper, Pagination, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, PressableCard, PrideProvider, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardProps, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, SimpleDrawer, SimpleDrawerProps, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, StaticCard, StaticCardProps, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, TogglePride, Tooltip, TooltipProps, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoPride, VyLogoPrideProps, VyLogoProps, WizardNudge, WizardNudgeProps, brandTheme, createTexts, fontFaces, slugify, theme, usePride, useToast, useTranslation };
9572
+ export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Card, CardProps, CardSelect, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChoiceChip, ChoiceChipProps, ClosableAlert, CloseButton, CloseButtonProps, Code, CodeProps, ColorInlineLoader, ColorInlineLoaderProps, ColorSpinner, ColorSpinnerProps, Combobox, ComboboxProps, ContentLoader, ContentLoaderProps, DarkFullScreenLoader, DarkInlineLoader, DarkInlineLoaderProps, DarkSpinner, DarkSpinnerProps, DatePicker, DateRangePicker, Divider, DividerProps, Drawer, DrawerContent, ModalHeader as DrawerHeader, Expandable, ExpandableAlert, ExpandableItem, ExpandableItemProps, FloatingActionButton, FormControl, FormControlProps, FormErrorMessage, FormErrorMessageProps, FormLabel, FormLabelProps, FullScreenDrawer, Heading, HeadingProps, IconButton, IconButtonProps, InfoSelect, InfoTag, InfoTagProps, Input, InputElementProps, InputLeftElement, InputProps, InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightInlineLoaderProps, LightSpinner, LightSpinnerProps, LineIcon, LineIconProps, ListBox, ModalHeader, ModalHeaderProps, NativeSelect, NativeSelectProps, Nudge, NudgeProps, NumericStepper, Pagination, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, PressableCard, PrideProvider, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardProps, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, SimpleDrawer, SimpleDrawerProps, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, StaticCard, StaticCardProps, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, TogglePride, Tooltip, TooltipProps, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoDefault, VyLogoDefaultProps, VyLogoPride, VyLogoPrideProps, VyLogoProps, WizardNudge, WizardNudgeProps, brandTheme, createTexts, fontFaces, slugify, theme, usePride, useToast, useTranslation };
package/dist/index.js CHANGED
@@ -4631,7 +4631,7 @@ var init_VyLogoPride = __esm({
4631
4631
  const redColor = colorScheme === "light" ? "#EA3323" : "#ffffff";
4632
4632
  const orangeColor = colorScheme === "light" ? "#F09436" : "#ffffff";
4633
4633
  const yellowColor = colorScheme === "light" ? "#FFFF54" : "#ffffff";
4634
- React88.useId();
4634
+ const id = React88.useId();
4635
4635
  return /* @__PURE__ */ React88__namespace.default.createElement(react.Box, { as: "svg", viewBox: "0 0 107 54", ...boxProps }, /* @__PURE__ */ React88__namespace.default.createElement("title", null, "Vy logo pride"), /* @__PURE__ */ React88__namespace.default.createElement(
4636
4636
  "svg",
4637
4637
  {
@@ -4653,7 +4653,7 @@ var init_VyLogoPride = __esm({
4653
4653
  /* @__PURE__ */ React88__namespace.default.createElement(
4654
4654
  "mask",
4655
4655
  {
4656
- id: "mask0_4247_11084",
4656
+ id: `${id}-a-pride`,
4657
4657
  style: { maskType: "luminance" },
4658
4658
  maskUnits: "userSpaceOnUse",
4659
4659
  x: "0",
@@ -4671,7 +4671,7 @@ var init_VyLogoPride = __esm({
4671
4671
  }
4672
4672
  )
4673
4673
  ),
4674
- /* @__PURE__ */ React88__namespace.default.createElement("g", { mask: "url(#mask0_4247_11084)" }, /* @__PURE__ */ React88__namespace.default.createElement(
4674
+ /* @__PURE__ */ React88__namespace.default.createElement("g", { mask: `url(#${id}-a-pride)` }, /* @__PURE__ */ React88__namespace.default.createElement(
4675
4675
  "path",
4676
4676
  {
4677
4677
  fillRule: "evenodd",
@@ -4742,7 +4742,7 @@ var init_VyLogoPride = __esm({
4742
4742
  /* @__PURE__ */ React88__namespace.default.createElement(
4743
4743
  "mask",
4744
4744
  {
4745
- id: "mask1_4247_11084",
4745
+ id: `${id}-b-pride`,
4746
4746
  style: { maskType: "luminance" },
4747
4747
  maskUnits: "userSpaceOnUse",
4748
4748
  x: "30",
@@ -4760,7 +4760,7 @@ var init_VyLogoPride = __esm({
4760
4760
  }
4761
4761
  )
4762
4762
  ),
4763
- /* @__PURE__ */ React88__namespace.default.createElement("g", { mask: "url(#mask1_4247_11084)" }, /* @__PURE__ */ React88__namespace.default.createElement(
4763
+ /* @__PURE__ */ React88__namespace.default.createElement("g", { mask: `url(#${id}-b-pride)` }, /* @__PURE__ */ React88__namespace.default.createElement(
4764
4764
  "path",
4765
4765
  {
4766
4766
  fillRule: "evenodd",
@@ -4814,16 +4814,13 @@ var init_VyLogoPride = __esm({
4814
4814
  };
4815
4815
  }
4816
4816
  });
4817
- exports.VyLogo = void 0;
4818
- var init_VyLogo = __esm({
4819
- "src/logo/VyLogo.tsx"() {
4820
- init_pride();
4821
- init_VyLogoPride();
4822
- exports.VyLogo = ({ colorScheme, ...boxProps }) => {
4823
- const { isPride } = exports.usePride();
4824
- if (isPride) {
4825
- return /* @__PURE__ */ React88__namespace.default.createElement(exports.VyLogoPride, { colorScheme, ...boxProps });
4826
- }
4817
+ exports.VyLogoDefault = void 0;
4818
+ var init_VyLogoDefault = __esm({
4819
+ "src/logo/VyLogoDefault.tsx"() {
4820
+ exports.VyLogoDefault = ({
4821
+ colorScheme,
4822
+ ...boxProps
4823
+ }) => {
4827
4824
  const mainColor = colorScheme === "light" ? "#1d211c" : "#ffffff";
4828
4825
  const accentColor = colorScheme === "light" ? "#138c6e" : "#ffffff";
4829
4826
  const id = React88.useId();
@@ -4931,12 +4928,28 @@ var init_VyLogo = __esm({
4931
4928
  };
4932
4929
  }
4933
4930
  });
4931
+ exports.VyLogo = void 0;
4932
+ var init_VyLogo = __esm({
4933
+ "src/logo/VyLogo.tsx"() {
4934
+ init_pride();
4935
+ init_VyLogoPride();
4936
+ init_VyLogoDefault();
4937
+ exports.VyLogo = ({ colorScheme, ...boxProps }) => {
4938
+ const { isPride } = exports.usePride();
4939
+ if (isPride) {
4940
+ return /* @__PURE__ */ React88__namespace.default.createElement(exports.VyLogoPride, { colorScheme, ...boxProps });
4941
+ }
4942
+ return /* @__PURE__ */ React88__namespace.default.createElement(exports.VyLogoDefault, { colorScheme, ...boxProps });
4943
+ };
4944
+ }
4945
+ });
4934
4946
 
4935
4947
  // src/logo/index.tsx
4936
4948
  var init_logo = __esm({
4937
4949
  "src/logo/index.tsx"() {
4938
4950
  init_VyLogo();
4939
4951
  init_VyLogoPride();
4952
+ init_VyLogoDefault();
4940
4953
  }
4941
4954
  });
4942
4955
  exports.JumpButton = void 0; var texts18;
package/dist/index.mjs CHANGED
@@ -1 +1 @@
1
- export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, 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, 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, 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-RR7HZ3VH.mjs';
1
+ export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, 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, 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-PA6EOPOZ.mjs';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vygruppen/spor-react",
3
- "version": "9.11.0",
3
+ "version": "9.11.2",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.mjs",
6
6
  "types": "./dist/index.d.ts",
@@ -24,7 +24,7 @@
24
24
  "@internationalized/date": "^3.0.1",
25
25
  "@vygruppen/spor-design-tokens": ">3.6.0",
26
26
  "@vygruppen/spor-icon-react": ">3.6.0",
27
- "@vygruppen/spor-loader": ">0.3.1",
27
+ "@vygruppen/spor-loader": ">0.3.0",
28
28
  "awesome-phonenumber": "^5.10.0",
29
29
  "deepmerge": "^4.3.1",
30
30
  "framer-motion": "^9.1.7",
@@ -1,7 +1,8 @@
1
- import { Box, BoxProps } from "@chakra-ui/react";
2
- import React, { useId } from "react";
1
+ import { BoxProps } from "@chakra-ui/react";
2
+ import React from "react";
3
3
  import { usePride } from "../pride";
4
4
  import { VyLogoPride } from "./VyLogoPride";
5
+ import { VyLogoDefault } from "./VyLogoDefault";
5
6
 
6
7
  export type VyLogoProps = {
7
8
  /** The color of the logo
@@ -17,92 +18,5 @@ export const VyLogo = ({ colorScheme, ...boxProps }: VyLogoProps) => {
17
18
  if (isPride) {
18
19
  return <VyLogoPride colorScheme={colorScheme} {...boxProps} />;
19
20
  }
20
- // These colors should not be tokenized, as they are logo specific.
21
- const mainColor = colorScheme === "light" ? "#1d211c" : "#ffffff";
22
- const accentColor = colorScheme === "light" ? "#138c6e" : "#ffffff";
23
- const id = useId();
24
- return (
25
- <Box as="svg" viewBox="0 0 107 54" {...boxProps}>
26
- <title>Vy logo</title>
27
- <path
28
- fillRule="evenodd"
29
- clipRule="evenodd"
30
- 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"
31
- fill={mainColor}
32
- />
33
- <mask
34
- id={`${id}-a`}
35
- style={{ maskType: "alpha" }}
36
- maskUnits="userSpaceOnUse"
37
- x="0"
38
- y="0"
39
- width="94"
40
- height="54"
41
- >
42
- <path
43
- fillRule="evenodd"
44
- clipRule="evenodd"
45
- d="M0 .03h93.26v53.65H0V.03Z"
46
- fill={mainColor}
47
- />
48
- </mask>
49
- <g
50
- mask={`url(#${id}-a)`}
51
- fillRule="evenodd"
52
- clipRule="evenodd"
53
- fill={mainColor}
54
- >
55
- <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" />
56
- <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" />
57
- </g>
58
- <path
59
- fillRule="evenodd"
60
- clipRule="evenodd"
61
- 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"
62
- fill={accentColor}
63
- />
64
- <path
65
- fillRule="evenodd"
66
- clipRule="evenodd"
67
- 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"
68
- fill={mainColor}
69
- />
70
- <mask
71
- id={`${id}-b`}
72
- style={{ maskType: "alpha" }}
73
- maskUnits="userSpaceOnUse"
74
- x="29"
75
- y="0"
76
- width="78"
77
- height="54"
78
- >
79
- <path
80
- fillRule="evenodd"
81
- clipRule="evenodd"
82
- d="M29.55.04H106v53.64H29.55V.04Z"
83
- fill={mainColor}
84
- />
85
- </mask>
86
- <g mask={`url(#${id}-b)`} fillRule="evenodd" clipRule="evenodd">
87
- <path
88
- 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"
89
- fill={mainColor}
90
- />
91
- <path
92
- 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"
93
- fill={mainColor}
94
- />
95
- <path
96
- 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"
97
- fill={accentColor}
98
- />
99
- </g>
100
- <path
101
- fillRule="evenodd"
102
- clipRule="evenodd"
103
- 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"
104
- fill={mainColor}
105
- />
106
- </Box>
107
- );
21
+ return <VyLogoDefault colorScheme={colorScheme} {...boxProps} />;
108
22
  };
@@ -0,0 +1,104 @@
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
+ };
@@ -39,7 +39,7 @@ export const VyLogoPride = ({ colorScheme, ...boxProps }: VyLogoPrideProps) => {
39
39
  fill={pinkColor}
40
40
  />
41
41
  <mask
42
- id="mask0_4247_11084"
42
+ id={`${id}-a-pride`}
43
43
  style={{ maskType: "luminance" }}
44
44
  maskUnits="userSpaceOnUse"
45
45
  x="0"
@@ -54,7 +54,7 @@ export const VyLogoPride = ({ colorScheme, ...boxProps }: VyLogoPrideProps) => {
54
54
  fill="white"
55
55
  />
56
56
  </mask>
57
- <g mask="url(#mask0_4247_11084)">
57
+ <g mask={`url(#${id}-a-pride)`}>
58
58
  <path
59
59
  fillRule="evenodd"
60
60
  clipRule="evenodd"
@@ -105,7 +105,7 @@ export const VyLogoPride = ({ colorScheme, ...boxProps }: VyLogoPrideProps) => {
105
105
  fill={greenColor}
106
106
  />
107
107
  <mask
108
- id="mask1_4247_11084"
108
+ id={`${id}-b-pride`}
109
109
  style={{ maskType: "luminance" }}
110
110
  maskUnits="userSpaceOnUse"
111
111
  x="30"
@@ -120,7 +120,7 @@ export const VyLogoPride = ({ colorScheme, ...boxProps }: VyLogoPrideProps) => {
120
120
  fill="white"
121
121
  />
122
122
  </mask>
123
- <g mask="url(#mask1_4247_11084)">
123
+ <g mask={`url(#${id}-b-pride)`}>
124
124
  <path
125
125
  fillRule="evenodd"
126
126
  clipRule="evenodd"
@@ -1,2 +1,3 @@
1
1
  export * from "./VyLogo";
2
2
  export * from "./VyLogoPride";
3
+ export * from "./VyLogoDefault";