TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-12-12 01:02:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

sass, global vars, components

Browse Source
This commit is contained in:
Max Peintner
2023-04-24 15:32:57 +02:00
parent e323e48523
commit fd11a78bc2
15 changed files with 309 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
apps/login/app/(login)/mfa/set/page.tsx Normal file
View File

@@ -0,0 +1,31 @@
"use client";
import { Button, ButtonVariants } from "#/ui/Button";
import { TextInput } from "#/ui/Input";
import UserAvatar from "#/ui/UserAvatar";
import { useRouter } from "next/navigation";
export default function Page() {
const router = useRouter();
return (
<div className="flex flex-col items-center space-y-4">
<h1>Password</h1>
<p className="ztdl-p mb-6 block">Enter your password.</p>
<UserAvatar name="max@zitadel.com"></UserAvatar>
<div className="w-full">
<TextInput type="password" label="Password" />
</div>
<div className="flex w-full flex-row items-center justify-between">
<Button
onClick={() => router.back()}
variant={ButtonVariants.Secondary}
>
back
</Button>
<Button variant={ButtonVariants.Primary}>continue</Button>
</div>
</div>
);
}

9
apps/login/app/layout.tsx
View File

@@ -1,4 +1,4 @@
import "#/styles/globals.css";
import "#/styles/globals.scss";
// include styles from the ui package
import "@zitadel/react/styles.css";
import { AddressBar } from "#/ui/AddressBar";
@@ -7,7 +7,6 @@ import { Lato } from "next/font/google";
import Byline from "#/ui/Byline";
import { LayoutProviders } from "#/ui/LayoutProviders";
import { Analytics } from "@vercel/analytics/react";
import { ZitadelUIProvider } from "#/../../packages/zitadel-react/dist";
import ThemeWrapper from "#/ui/ThemeWrapper";
import { getBranding } from "#/lib/zitadel";
import { server } from "../lib/zitadel";
@@ -35,19 +34,19 @@ export default async function RootLayout({
<div className="lg:pl-72">
<div className="mx-auto max-w-xl space-y-8 px-2 pt-20 lg:py-8 lg:px-8">
<div className="rounded-lg bg-vc-border-gradient dark:bg-dark-vc-border-gradient p-px shadow-lg shadow-black/5 dark:shadow-black/20">
<div className="rounded-lg bg-background-light-500 dark:bg-background-dark-600">
<div className="rounded-lg bg-background-light-400 dark:bg-background-dark-600">
<AddressBar />
</div>
</div>
<div className="rounded-lg bg-vc-border-gradient dark:bg-dark-vc-border-gradient p-px shadow-lg shadow-black/5 dark:shadow-black/20">
<div className="rounded-lg bg-background-light-500 dark:bg-background-dark-500 p-3.5 lg:p-8">
<div className="rounded-lg bg-background-light-400 dark:bg-background-dark-500 p-3.5 lg:p-8">
{children}
</div>
</div>
<div className="rounded-lg bg-vc-border-gradient dark:bg-dark-vc-border-gradient p-px shadow-lg shadow-black/5 dark:shadow-black/20">
<div className="rounded-lg bg-background-light-500 dark:bg-background-dark-600">
<div className="rounded-lg bg-background-light-400 dark:bg-background-dark-600">
<Byline />
</div>
</div>

1
apps/login/package.json
View File

@@ -32,6 +32,7 @@
"react": "18.2.0",
"react-dom": "18.2.0",
"react-hook-form": "7.39.5",
"sass": "^1.62.0",
"styled-components": "6.0.0-beta.2",
"tinycolor2": "1.4.2"
},

14
apps/login/styles/globals.css → apps/login/styles/globals.scss
View File

@@ -1,3 +1,5 @@
@import "./vars.scss";
@tailwind base;
@tailwind components;
@tailwind utilities;
@@ -18,6 +20,14 @@ html {
--dark-background-color: #000000;
}
.bg-background-light-300 {
background-color: var(--theme-light-background-300);
}
.bg-background-light-400 {
background-color: var(--theme-light-background-400);
}
.bg-background-light-500 {
background-color: var(--theme-light-background-500);
}
@@ -34,6 +44,10 @@ html {
background-color: var(--theme-light-background-600);
}
.dark .dark\:bg-background-dark-400 {
background-color: var(--theme-dark-background-400) !important;
}
.dark .dark\:bg-background-dark-500 {
background-color: var(--theme-dark-background-500) !important;
}

174
apps/login/styles/vars.scss Normal file
View File

@@ -0,0 +1,174 @@
:root {
--theme-dark-primary-50: #f1f7fd;
--theme-dark-primary-contrast-50: hsla(0, 0%, 0%, 0.87);
--theme-dark-primary-100: #afd1f2;
--theme-dark-primary-contrast-100: hsla(0, 0%, 0%, 0.87);
--theme-dark-primary-200: #7fb5ea;
--theme-dark-primary-contrast-200: hsla(0, 0%, 0%, 0.87);
--theme-dark-primary-300: #4192e0;
--theme-dark-primary-contrast-300: hsla(0, 0%, 0%, 0.87);
--theme-dark-primary-400: #2782dc;
--theme-dark-primary-contrast-400: hsla(0, 0%, 0%, 0.87);
--theme-dark-primary-500: #2073c4;
--theme-dark-primary-contrast-500: #ffffff;
--theme-dark-primary-600: #1c64aa;
--theme-dark-primary-contrast-600: #ffffff;
--theme-dark-primary-700: #17548f;
--theme-dark-primary-contrast-700: #ffffff;
--theme-dark-primary-800: #134575;
--theme-dark-primary-contrast-800: #ffffff;
--theme-dark-primary-900: #0f355b;
--theme-dark-primary-contrast-900: #ffffff;
--theme-dark-primary-A100: #e4f2ff;
--theme-dark-primary-contrast-A100: hsla(0, 0%, 0%, 0.87);
--theme-dark-primary-A200: #7ebfff;
--theme-dark-primary-contrast-A200: hsla(0, 0%, 0%, 0.87);
--theme-dark-primary-A400: #278df0;
--theme-dark-primary-contrast-A400: hsla(0, 0%, 0%, 0.87);
--theme-dark-primary-A700: #1d80e0;
--theme-dark-primary-contrast-A700: hsla(0, 0%, 0%, 0.87);
--theme-light-primary-50: #ffffff;
--theme-light-primary-contrast-50: hsla(0, 0%, 0%, 0.87);
--theme-light-primary-100: #ebedfa;
--theme-light-primary-contrast-100: hsla(0, 0%, 0%, 0.87);
--theme-light-primary-200: #bec6ef;
--theme-light-primary-contrast-200: hsla(0, 0%, 0%, 0.87);
--theme-light-primary-300: #8594e0;
--theme-light-primary-contrast-300: hsla(0, 0%, 0%, 0.87);
--theme-light-primary-400: #6c7eda;
--theme-light-primary-contrast-400: hsla(0, 0%, 0%, 0.87);
--theme-light-primary-500: #5469d4;
--theme-light-primary-contrast-500: #ffffff;
--theme-light-primary-600: #3c54ce;
--theme-light-primary-contrast-600: #ffffff;
--theme-light-primary-700: #2f46bc;
--theme-light-primary-contrast-700: #ffffff;
--theme-light-primary-800: #293da3;
--theme-light-primary-contrast-800: #ffffff;
--theme-light-primary-900: #23348b;
--theme-light-primary-contrast-900: #ffffff;
--theme-light-primary-A100: #ffffff;
--theme-light-primary-contrast-A100: hsla(0, 0%, 0%, 0.87);
--theme-light-primary-A200: #c5cefc;
--theme-light-primary-contrast-A200: hsla(0, 0%, 0%, 0.87);
--theme-light-primary-A400: #7085ea;
--theme-light-primary-contrast-A400: hsla(0, 0%, 0%, 0.87);
--theme-light-primary-A700: #6478de;
--theme-light-primary-contrast-A700: hsla(0, 0%, 0%, 0.87);
--theme-dark-warn-50: #ffffff;
--theme-dark-warn-contrast-50: hsla(0, 0%, 0%, 0.87);
--theme-dark-warn-100: #fff8f9;
--theme-dark-warn-contrast-100: hsla(0, 0%, 0%, 0.87);
--theme-dark-warn-200: #ffc0ca;
--theme-dark-warn-contrast-200: hsla(0, 0%, 0%, 0.87);
--theme-dark-warn-300: #ff788e;
--theme-dark-warn-contrast-300: hsla(0, 0%, 0%, 0.87);
--theme-dark-warn-400: #ff5a75;
--theme-dark-warn-contrast-400: hsla(0, 0%, 0%, 0.87);
--theme-dark-warn-500: #ff3b5b;
--theme-dark-warn-contrast-500: hsla(0, 0%, 0%, 0.87);
--theme-dark-warn-600: #ff1c41;
--theme-dark-warn-contrast-600: hsla(0, 0%, 0%, 0.87);
--theme-dark-warn-700: #fd0029;
--theme-dark-warn-contrast-700: hsla(0, 0%, 0%, 0.87);
--theme-dark-warn-800: #de0024;
--theme-dark-warn-contrast-800: #ffffff;
--theme-dark-warn-900: #c0001f;
--theme-dark-warn-contrast-900: #ffffff;
--theme-dark-warn-A100: #ffffff;
--theme-dark-warn-contrast-A100: hsla(0, 0%, 0%, 0.87);
--theme-dark-warn-A200: #ffd4db;
--theme-dark-warn-contrast-A200: hsla(0, 0%, 0%, 0.87);
--theme-dark-warn-A400: #ff6e86;
--theme-dark-warn-contrast-A400: hsla(0, 0%, 0%, 0.87);
--theme-dark-warn-A700: #ff5470;
--theme-dark-warn-contrast-A700: hsla(0, 0%, 0%, 0.87);
--theme-light-warn-50: #ffffff;
--theme-light-warn-contrast-50: hsla(0, 0%, 0%, 0.87);
--theme-light-warn-100: #f4d3d9;
--theme-light-warn-contrast-100: hsla(0, 0%, 0%, 0.87);
--theme-light-warn-200: #e8a6b2;
--theme-light-warn-contrast-200: hsla(0, 0%, 0%, 0.87);
--theme-light-warn-300: #da6e80;
--theme-light-warn-contrast-300: hsla(0, 0%, 0%, 0.87);
--theme-light-warn-400: #d3556b;
--theme-light-warn-contrast-400: hsla(0, 0%, 0%, 0.87);
--theme-light-warn-500: #cd3d56;
--theme-light-warn-contrast-500: #ffffff;
--theme-light-warn-600: #bb3048;
--theme-light-warn-contrast-600: #ffffff;
--theme-light-warn-700: #a32a3f;
--theme-light-warn-contrast-700: #ffffff;
--theme-light-warn-800: #8a2436;
--theme-light-warn-contrast-800: #ffffff;
--theme-light-warn-900: #721d2c;
--theme-light-warn-contrast-900: #ffffff;
--theme-light-warn-A100: #ffffff;
--theme-light-warn-contrast-A100: hsla(0, 0%, 0%, 0.87);
--theme-light-warn-A200: #faa9b7;
--theme-light-warn-contrast-A200: hsla(0, 0%, 0%, 0.87);
--theme-light-warn-A400: #e65770;
--theme-light-warn-contrast-A400: hsla(0, 0%, 0%, 0.87);
--theme-light-warn-A700: #d84c64;
--theme-light-warn-contrast-A700: hsla(0, 0%, 0%, 0.87);
--theme-dark-background-50: #7c93c6;
--theme-dark-background-contrast-50: hsla(0, 0%, 0%, 0.87);
--theme-dark-background-100: #4a69aa;
--theme-dark-background-contrast-100: #ffffff;
--theme-dark-background-200: #395183;
--theme-dark-background-contrast-200: #ffffff;
--theme-dark-background-300: #243252;
--theme-dark-background-contrast-300: #ffffff;
--theme-dark-background-400: #1a253c;
--theme-dark-background-contrast-400: #ffffff;
--theme-dark-background-500: #111827;
--theme-dark-background-contrast-500: #ffffff;
--theme-dark-background-600: #080b12;
--theme-dark-background-contrast-600: #ffffff;
--theme-dark-background-700: #000000;
--theme-dark-background-contrast-700: #ffffff;
--theme-dark-background-800: #000000;
--theme-dark-background-contrast-800: #ffffff;
--theme-dark-background-900: #000000;
--theme-dark-background-contrast-900: #ffffff;
--theme-dark-background-A100: #5782e0;
--theme-dark-background-contrast-A100: hsla(0, 0%, 0%, 0.87);
--theme-dark-background-A200: #204eb1;
--theme-dark-background-contrast-A200: #ffffff;
--theme-dark-background-A400: #182b53;
--theme-dark-background-contrast-A400: #ffffff;
--theme-dark-background-A700: #17223b;
--theme-dark-background-contrast-A700: #ffffff;
--theme-light-background-50: #ffffff;
--theme-light-background-contrast-50: hsla(0, 0%, 0%, 0.87);
--theme-light-background-100: #ffffff;
--theme-light-background-contrast-100: hsla(0, 0%, 0%, 0.87);
--theme-light-background-200: #ffffff;
--theme-light-background-contrast-200: hsla(0, 0%, 0%, 0.87);
--theme-light-background-300: #ffffff;
--theme-light-background-contrast-300: hsla(0, 0%, 0%, 0.87);
--theme-light-background-400: #ffffff;
--theme-light-background-contrast-400: hsla(0, 0%, 0%, 0.87);
--theme-light-background-500: #fafafa;
--theme-light-background-contrast-500: hsla(0, 0%, 0%, 0.87);
--theme-light-background-600: #ebebeb;
--theme-light-background-contrast-600: hsla(0, 0%, 0%, 0.87);
--theme-light-background-700: #dbdbdb;
--theme-light-background-contrast-700: hsla(0, 0%, 0%, 0.87);
--theme-light-background-800: #cccccc;
--theme-light-background-contrast-800: hsla(0, 0%, 0%, 0.87);
--theme-light-background-900: #bdbdbd;
--theme-light-background-contrast-900: hsla(0, 0%, 0%, 0.87);
--theme-light-background-A100: #ffffff;
--theme-light-background-contrast-A100: hsla(0, 0%, 0%, 0.87);
--theme-light-background-A200: #ffffff;
--theme-light-background-contrast-A200: hsla(0, 0%, 0%, 0.87);
--theme-light-background-A400: #ffffff;
--theme-light-background-contrast-A400: hsla(0, 0%, 0%, 0.87);
--theme-light-background-A700: #ffffff;
--theme-light-background-contrast-A700: hsla(0, 0%, 0%, 0.87);
--theme-dark-text: #ffffff;
--theme-dark-secondary-text: #ffffffc7;
--theme-light-text: #000000;
--theme-light-secondary-text: #000000c7;
}

98
apps/login/tailwind.config.js
View File

@@ -29,55 +29,55 @@ module.exports = {
orange: "#F5A623",
violet: "#7928CA",
},
primary: {
light: {
200: "#bec6ef",
300: "#8594e0",
400: "#6c7eda",
500: "#5469d4",
600: "#3c54ce",
contrast: "#ffffff",
},
dark: {
100: "#afd1f2",
200: "#7fb5ea",
300: "#4192e0",
400: "#2782dc",
500: "#2073c4",
600: "#1c64aa",
700: "#17548f",
800: "#134575",
900: "#0f355b",
},
},
accent: {
light: {
400: "#9142d5",
500: "#7e21ce",
},
dark: {
300: "#ff6396",
400: "#ff4180",
500: "#ff2069",
},
},
background: {
dark: {
100: "#4a69aa",
200: "#395183",
300: "#243252",
400: "#1a253c",
500: "#111827",
600: "#080b12",
700: "#000000",
800: "#000000",
900: "#000000",
},
light: {
500: colors.white,
600: colors.gray[50],
},
},
// primary: {
// light: {
// 200: "#bec6ef",
// 300: "#8594e0",
// 400: "#6c7eda",
// 500: "#5469d4",
// 600: "#3c54ce",
// contrast: "#ffffff",
// },
// dark: {
// 100: "#afd1f2",
// 200: "#7fb5ea",
// 300: "#4192e0",
// 400: "#2782dc",
// 500: "#2073c4",
// 600: "#1c64aa",
// 700: "#17548f",
// 800: "#134575",
// 900: "#0f355b",
// },
// },
// accent: {
// light: {
// 400: "#9142d5",
// 500: "#7e21ce",
// },
// dark: {
// 300: "#ff6396",
// 400: "#ff4180",
// 500: "#ff2069",
// },
// },
// background: {
// dark: {
// 100: "#4a69aa",
// 200: "#395183",
// 300: "#243252",
// 400: "#1a253c",
// 500: "#111827",
// 600: "#080b12",
// 700: "#000000",
// 800: "#000000",
// 900: "#000000",
// },
// light: {
// 500: colors.white,
// 600: colors.gray[50],
// },
// },
divider: {
dark: "rgba(135,149,161,.2)",
light: "rgba(135,149,161,.2)",

8
apps/login/ui/Avatar.tsx
View File

@@ -1,4 +1,4 @@
import { Color, getColorHash } from "#/utils/colors";
import { Color, ColorShade, getColorHash } from "#/utils/colors";
import { useTheme } from "next-themes";
import { FC } from "react";
@@ -44,7 +44,7 @@ export const Avatar: FC<AvatarProps> = ({
credentials = initials;
}
const color: Color = getColorHash(loginName);
const color: ColorShade = getColorHash(loginName);
const avatarStyleDark = {
backgroundColor: color[900],
@@ -64,9 +64,9 @@ export const Avatar: FC<AvatarProps> = ({
size === AvatarSize.LARGE
? "h-20 w-20 font-normal"
: size === AvatarSize.BASE
? "w-38px h-38px font-bold"
? "w-[38px] h-[38px] font-bold"
: size === AvatarSize.SMALL
? "w-32px h-32px font-bold"
? "w-[32px] h-[32px] font-bold"
: ""
}`}
style={resolvedTheme === "light" ? avatarStyleLight : avatarStyleDark}

1
apps/login/ui/GlobalNav.tsx
View File

@@ -1,7 +1,6 @@
"use client";
import { demos, type Item } from "#/lib/demos";
import "#/styles/globals.css";
import { ZitadelLogo } from "#/ui/ZitadelLogo";
import Link from "next/link";
import { useSelectedLayoutSegment } from "next/navigation";

7
apps/login/ui/LayoutProviders.tsx
View File

@@ -1,6 +1,8 @@
"use client";
import { ColorService } from "#/utils/colors";
import { ThemeProvider, useTheme } from "next-themes";
import { useEffect } from "react";
type Props = {
children: React.ReactNode;
@@ -10,7 +12,10 @@ export function LayoutProviders({ children }: Props) {
const { resolvedTheme } = useTheme();
const isDark = resolvedTheme && resolvedTheme === "dark";
console.log(isDark);
useEffect(() => {
new ColorService(document);
});
return (
<ThemeProvider
attribute="class"

2
apps/login/ui/Theme.tsx
View File

@@ -35,7 +35,7 @@ export default function Theme() {
aria-hidden="true"
className={`${
isDark ? "translate-x-5" : "translate-x-0"
} flex flex-row items-center justify-center h-4 w-4 transform rounded-full bg-white transition-all shadow dark:bg-background-dark-500 ring-1 ring-gray-200 dark:ring-gray-800 ring-offset-1 ring-offset-white dark:ring-offset-background-dark-500`}
} flex flex-row items-center justify-center h-4 w-4 transform rounded-full bg-white transition-all shadow dark:bg-background-dark-500 ring-1 ring-[#00000020] dark:ring-[#ffffff20] ring-offset-1 ring-offset-[#ffffff50] dark:ring-offset-[#00000005]`}
>
{isDark ? (
<MoonIcon className="dark:text-amber-500 h-4 w-4" />

5
apps/login/ui/ThemeWrapper.tsx
View File

@@ -2,6 +2,7 @@
import { LabelPolicy } from "#/../../packages/zitadel-server/dist";
import { ColorService } from "#/utils/colors";
import { useEffect } from "react";
type Props = {
branding: LabelPolicy | undefined;
@@ -9,7 +10,9 @@ type Props = {
};
const ThemeWrapper = ({ children, branding }: Props) => {
const colorService = new ColorService(branding);
useEffect(() => {
const colorService = new ColorService(document, branding);
}, []);
const defaultClasses = "bg-background-light-600 dark:bg-background-dark-600";

34
apps/login/utils/colors.ts
View File

@@ -47,7 +47,7 @@ export class ColorService {
dark: ColorMap;
light: ColorMap;
constructor(policy?: LabelPolicy) {
constructor(document: any, policy?: LabelPolicy) {
const lP = {
backgroundColor: BACKGROUND,
backgroundColorDark: DARK_BACKGROUND,
@@ -73,27 +73,28 @@ export class ColorService {
lP.linkColor = policy.fontColor;
lP.linkColorDark = policy.fontColorDark;
}
this.dark = computeMap(lP, true);
this.light = computeMap(lP, false);
setColors(this.dark.background, "background", "dark");
setColors(this.light.background, "background", "light");
setColors(this.dark.background, "background", "dark", document);
setColors(this.light.background, "background", "light", document);
setColors(this.dark.primary, "primary", "dark");
setColors(this.light.primary, "primary", "light");
setColors(this.dark.primary, "primary", "dark", document);
setColors(this.light.primary, "primary", "light", document);
setColors(this.dark.text, "primary", "dark");
setColors(this.light.text, "primary", "light");
setColors(this.dark.text, "primary", "dark", document);
setColors(this.light.text, "primary", "light", document);
setColors(this.dark.link, "link", "dark");
setColors(this.light.link, "link", "light");
setColors(this.dark.link, "link", "dark", document);
setColors(this.light.link, "link", "light", document);
setColors(this.dark.warn, "warn", "dark");
setColors(this.light.warn, "warn", "light");
setColors(this.dark.warn, "warn", "dark", document);
setColors(this.light.warn, "warn", "light", document);
}
}
function setColors(map: Color[], type: string, theme: string) {
function setColors(map: Color[], type: string, theme: string, document: any) {
map.forEach((color) => {
document.documentElement.style.setProperty(
`--theme-${theme}-${type}-${color.name}`,
@@ -104,15 +105,6 @@ function setColors(map: Color[], type: string, theme: string) {
color.contrastColor
);
});
// document.documentElement.style.setProperty(
// `--${prefix}background-color`,
// map?.background[500].,
// );
// document.documentElement.style.setProperty(
// "--dark-background-color",
// branding?.backgroundColorDark
// );
}
function computeColors(hex: string): Color[] {

2
packages/zitadel-react/src/components/SignInWithGitlab.tsx
View File

@@ -6,7 +6,7 @@ export interface SignInWithGitlabProps {
export function SignInWithGitlab(props: SignInWithGitlabProps) {
return (
<div className="ui-flex ui-flex-row ui-items-center ui-bg-white ui-text-black dark:ui-bg-transparent dark:ui-text-white border ui-border-divider-light dark:ui-border-divider-dark rounded-md px-4 text-sm">
<div className="ui-cursor-pointer ui-flex ui-flex-row ui-items-center ui-bg-white ui-text-black dark:ui-bg-transparent dark:ui-text-white border ui-border-divider-light dark:ui-border-divider-dark rounded-md px-4 text-sm">
<div className="ui-h-12 ui-w-12 flex items-center justify-center">
<svg
xmlns="http://www.w3.org/2000/svg"

2
packages/zitadel-react/src/components/SignInWithGoogle.tsx
View File

@@ -6,7 +6,7 @@ export interface SignInWithGoogleProps {
export function SignInWithGoogle(props: SignInWithGoogleProps) {
return (
<div className="ui-flex ui-flex-row ui-items-center ui-bg-white ui-text-black dark:ui-bg-transparent dark:ui-text-white border ui-border-divider-light dark:ui-border-divider-dark rounded-md px-4 text-sm">
<div className="ui-cursor-pointer ui-flex ui-flex-row ui-items-center ui-bg-white ui-text-black dark:ui-bg-transparent dark:ui-text-white border ui-border-divider-light dark:ui-border-divider-dark rounded-md px-4 text-sm">
<div className="ui-h-12 ui-w-12 ui-flex ui-items-center ui-justify-center">
<svg
xmlns="http://www.w3.org/2000/svg"

11
pnpm-lock.yaml generated
View File

@@ -49,6 +49,7 @@ importers:
react: 18.2.0
react-dom: 18.2.0
react-hook-form: 7.39.5
sass: ^1.62.0
styled-components: 6.0.0-beta.2
tailwindcss: 3.2.4
tinycolor2: 1.4.2
@@ -64,12 +65,13 @@ importers:
'@zitadel/server': link:../../packages/zitadel-server
clsx: 1.2.1
date-fns: 2.29.3
next: 13.3.1-canary.13_z72xxk7vwlamvgqemvc4ptm4du
next: 13.3.1-canary.13_q2l6mupuna4bhqrj53otrbdm2a
next-themes: 0.2.1_amhwfk4ri4rspyzmqtvcofnhfa
nice-grpc: 2.0.1
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
react-hook-form: 7.39.5_react@18.2.0
sass: 1.62.0
styled-components: 6.0.0-beta.2_biqbaboplfbrettd7655fr4n2y
tinycolor2: 1.4.2
devDependencies:
@@ -4360,7 +4362,6 @@ packages:
/immutable/4.3.0:
resolution: {integrity: sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==}
dev: true
/import-fresh/3.3.0:
resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
@@ -5021,7 +5022,7 @@ packages:
react: '*'
react-dom: '*'
dependencies:
next: 13.3.1-canary.13_z72xxk7vwlamvgqemvc4ptm4du
next: 13.3.1-canary.13_q2l6mupuna4bhqrj53otrbdm2a
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
dev: false
@@ -5073,7 +5074,7 @@ packages:
- babel-plugin-macros
dev: false
/next/13.3.1-canary.13_z72xxk7vwlamvgqemvc4ptm4du:
/next/13.3.1-canary.13_q2l6mupuna4bhqrj53otrbdm2a:
resolution: {integrity: sha512-nqLvbeAbJiVFWHzfvUM6D5L/nwjUD7+fc0FWPdJc/jLbInKNqQQHc4+0NKNi8tj6Af9cn4MBPrrg/lyMbf0hVA==}
engines: {node: '>=14.6.0'}
hasBin: true
@@ -5101,6 +5102,7 @@ packages:
postcss: 8.4.14
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
sass: 1.62.0
styled-jsx: 5.1.1_duavcg6prxxl5begav3y2fyxcu
optionalDependencies:
'@next/swc-darwin-arm64': 13.3.1-canary.13
@@ -5914,7 +5916,6 @@ packages:
chokidar: 3.5.3
immutable: 4.3.0
source-map-js: 1.0.2
dev: true
/scheduler/0.23.0:
resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}