@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.
- package/.turbo/turbo-build.log +10 -10
- package/CHANGELOG.md +12 -0
- package/dist/{CountryCodeSelect-633P6ZEW.mjs → CountryCodeSelect-KU4HQMG3.mjs} +1 -1
- package/dist/{chunk-RR7HZ3VH.mjs → chunk-PA6EOPOZ.mjs} +20 -14
- package/dist/index.d.mts +11 -1
- package/dist/index.d.ts +11 -1
- package/dist/index.js +28 -15
- package/dist/index.mjs +1 -1
- package/package.json +2 -2
- package/src/logo/VyLogo.tsx +4 -90
- package/src/logo/VyLogoDefault.tsx +104 -0
- package/src/logo/VyLogoPride.tsx +4 -4
- package/src/logo/index.tsx +1 -0
package/.turbo/turbo-build.log
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
|
2
|
-
> @vygruppen/spor-react@9.11.
|
2
|
+
> @vygruppen/spor-react@9.11.2 build
|
3
3
|
> tsup src/index.tsx --dts --treeshake --format cjs,esm
|
4
4
|
|
5
5
|
[34mCLI[39m Building entry: src/index.tsx
|
@@ -9,12 +9,12 @@
|
|
9
9
|
[34mCJS[39m Build start
|
10
10
|
[34mESM[39m Build start
|
11
11
|
[34mDTS[39m Build start
|
12
|
-
[
|
13
|
-
[
|
14
|
-
[32mESM[39m [1mdist/
|
15
|
-
[32mESM[39m
|
16
|
-
[
|
17
|
-
[
|
18
|
-
[32mDTS[39m ⚡️ Build success in
|
19
|
-
[32mDTS[39m [1mdist/index.d.ts [22m[
|
20
|
-
[32mDTS[39m [1mdist/index.d.mts [22m[
|
12
|
+
[32mCJS[39m [1mdist/index.js [22m[32m525.54 KB[39m
|
13
|
+
[32mCJS[39m ⚡️ Build success in 2189ms
|
14
|
+
[32mESM[39m [1mdist/index.mjs [22m[32m2.17 KB[39m
|
15
|
+
[32mESM[39m [1mdist/CountryCodeSelect-KU4HQMG3.mjs [22m[32m1.19 KB[39m
|
16
|
+
[32mESM[39m [1mdist/chunk-PA6EOPOZ.mjs [22m[32m412.80 KB[39m
|
17
|
+
[32mESM[39m ⚡️ Build success in 2189ms
|
18
|
+
[32mDTS[39m ⚡️ Build success in 12957ms
|
19
|
+
[32mDTS[39m [1mdist/index.d.ts [22m[32m344.17 KB[39m
|
20
|
+
[32mDTS[39m [1mdist/index.d.mts [22m[32m344.17 KB[39m
|
package/CHANGELOG.md
CHANGED
@@ -2041,7 +2041,7 @@ var texts4 = createTexts({
|
|
2041
2041
|
sv: "Telefonnummer"
|
2042
2042
|
}
|
2043
2043
|
});
|
2044
|
-
var LazyCountryCodeSelect = React87__default.lazy(() => import('./CountryCodeSelect-
|
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:
|
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:
|
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:
|
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:
|
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
|
-
|
4048
|
-
|
4049
|
-
|
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:
|
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:
|
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:
|
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:
|
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.
|
4818
|
-
var
|
4819
|
-
"src/logo/
|
4820
|
-
|
4821
|
-
|
4822
|
-
|
4823
|
-
|
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-
|
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.
|
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.
|
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",
|
package/src/logo/VyLogo.tsx
CHANGED
@@ -1,7 +1,8 @@
|
|
1
|
-
import {
|
2
|
-
import 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
|
-
|
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
|
+
};
|
package/src/logo/VyLogoPride.tsx
CHANGED
@@ -39,7 +39,7 @@ export const VyLogoPride = ({ colorScheme, ...boxProps }: VyLogoPrideProps) => {
|
|
39
39
|
fill={pinkColor}
|
40
40
|
/>
|
41
41
|
<mask
|
42
|
-
id=
|
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=
|
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=
|
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=
|
123
|
+
<g mask={`url(#${id}-b-pride)`}>
|
124
124
|
<path
|
125
125
|
fillRule="evenodd"
|
126
126
|
clipRule="evenodd"
|
package/src/logo/index.tsx
CHANGED